Merge pull request #1318 from nsbno/search-input-width

Direct width-related props to InputGroup.

.changeset/real-pots-yell.md

@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+SearchInput: Added support for width-related props

packages/spor-react/src/input/SearchInput.tsx

@@ -2,6 +2,7 @@ import {
   Input as ChakraInput,
   InputProps as ChakraInputProps,
   IconButton,
+  LayoutProps,
   forwardRef,
   useFormControlContext,
 } from "@chakra-ui/react";
@@ -33,15 +34,18 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
     const formControlProps = useFormControlContext();
     const autoGeneratedId = useId();
     const inputId = props.id ?? formControlProps?.id ?? autoGeneratedId;
+
+    const { outerProps, innerProps } = getOuterProps(props);
+
     return (
-      <InputGroup position="relative">
+      <InputGroup position="relative" {...outerProps}>
         <InputLeftElement>
           <SearchOutline24Icon />
         </InputLeftElement>
         <ChakraInput
           paddingLeft={7}
           paddingRight={7}
-          {...props}
+          {...innerProps}
           id={inputId}
           type="search"
           css={{
@@ -74,6 +78,22 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
   },
 );
 
+const getOuterProps = (props: Record<string, any>) => {
+  const layoutKeys = new Set(["w, width, maxW, minW, maxWidth, minWidth"]); // add more keys here if neccessary
+  const outerProps: LayoutProps = {};
+  const innerProps: Record<string, any> = {};
+
+  for (const key in props) {
+    if (layoutKeys.has(key)) {
+      (outerProps as any)[key] = props[key];
+    } else {
+      (innerProps as any)[key] = props[key];
+    }
+  }
+
+  return { outerProps, innerProps };
+};
+
 const texts = createTexts({
   label: {
     nb: "Søk",