@navikt/ds-react 5.12.4 → 5.13.0

package/src/form/Select.tsx

@@ -1,6 +1,6 @@
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, SelectHTMLAttributes } from "react";
+import React, { SelectHTMLAttributes, forwardRef } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
@@ -83,7 +83,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         if (
           readOnly &&
           ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes(
-            evt.key
+            evt.key,
           )
         ) {
           evt.preventDefault();
@@ -102,7 +102,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-form-field--readonly": readOnly,
             "navds-select--error": hasError,
             "navds-select--readonly": readOnly,
-          }
+          },
         )}
       >
         <Label
@@ -136,7 +136,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             className={cl(
               "navds-select__input",
               "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`,
             )}
             size={htmlSize}
           >
@@ -156,7 +156,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default Select;

package/src/form/Switch.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, {
-  forwardRef,
   InputHTMLAttributes,
+  forwardRef,
   useEffect,
   useState,
 } from "react";
@@ -86,7 +86,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     } = props;
 
     const [checked, setChecked] = useState(
-      defaultChecked ?? checkedProp ?? false
+      defaultChecked ?? checkedProp ?? false,
     );
 
     useEffect(() => {
@@ -104,7 +104,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             "navds-switch--loading": loading,
             "navds-switch--disabled": inputProps.disabled ?? loading,
             "navds-switch--readonly": readOnly,
-          }
+          },
         )}
       >
         <input
@@ -168,7 +168,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         </label>
       </div>
     );
-  }
+  },
 );
 
 export default Switch;

package/src/form/TextField.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes, forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
@@ -81,7 +81,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-form-field--readonly": readOnly,
             "navds-text-field--readonly": readOnly,
-          }
+          },
         )}
       >
         <Label
@@ -116,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           className={cl(
             "navds-text-field__input",
             "navds-body-short",
-            `navds-body-short--${size ?? "medium"}`
+            `navds-body-short--${size ?? "medium"}`,
           )}
           size={htmlSize}
         />
@@ -132,7 +132,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default TextField;

package/src/form/Textarea.tsx

@@ -102,7 +102,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
     const [controlledValue, setControlledValue] = useState<string>(
-      props?.defaultValue ?? ""
+      props?.defaultValue ?? "",
     );
 
     const getMinRows = () => {
@@ -131,7 +131,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
             [`navds-textarea--resize-${resize === true ? "both" : resize}`]:
               resize,
-          }
+          },
         )}
       >
         <Label
@@ -172,7 +172,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             className={cl(
               "navds-textarea__input",
               "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`,
             )}
             {...(describedBy ? { "aria-describedby": describedBy } : {})}
           />
@@ -202,7 +202,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default Textarea;

package/src/form/checkbox/Checkbox.test.tsx

@@ -16,7 +16,7 @@ test("checkbox group chains onChange calls", async () => {
       <Checkbox onChange={onChange} value={value}>
         {label}
       </Checkbox>
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   fireEvent.click(screen.getByLabelText(label));
@@ -42,11 +42,11 @@ describe("Checkbox handles controlled-state correctly", () => {
     fireEvent.click(screen.getByLabelText("label2"));
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
 
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
   });
 
@@ -57,7 +57,7 @@ describe("Checkbox handles controlled-state correctly", () => {
       <CheckboxComponent
         onChange={onGroupChange}
         value={["value1", "value2"]}
-      />
+      />,
     );
 
     fireEvent.click(screen.getByLabelText("label1"));
@@ -71,19 +71,19 @@ describe("Checkbox handles controlled-state correctly", () => {
     const { rerender } = render(<CheckboxComponent value={[]} />);
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      false
+      false,
     );
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      false
+      false,
     );
 
     rerender(<CheckboxComponent value={["value1", "value2"]} />);
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
   });
 });

package/src/form/checkbox/Checkbox.tsx

@@ -23,7 +23,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
             "navds-checkbox--readonly": readOnly,
-          }
+          },
         )}
       >
         <input
@@ -57,7 +57,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             !!props["aria-labelledby"] && props["aria-labelledby"],
             {
               [descriptionId]: props.description,
-            }
+            },
           )}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
@@ -110,7 +110,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         </label>
       </div>
     );
-  }
+  },
 );
 
 export default Checkbox;

package/src/form/checkbox/CheckboxGroup.tsx

@@ -9,7 +9,7 @@ export interface CheckboxGroupState {
 }
 
 export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
-  null
+  null,
 );
 
 export interface CheckboxGroupProps
@@ -56,7 +56,7 @@ export const CheckboxGroup = forwardRef<
 >(
   (
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
-    ref
+    ref,
   ) => {
     const fieldset = useContext(FieldsetContext);
 
@@ -79,7 +79,7 @@ export const CheckboxGroup = forwardRef<
         className={cl(
           className,
           "navds-checkbox-group",
-          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`
+          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -94,7 +94,7 @@ export const CheckboxGroup = forwardRef<
         </CheckboxGroupContext.Provider>
       </Fieldset>
     );
-  }
+  },
 );
 
 export default CheckboxGroup;

package/src/form/checkbox/useCheckbox.ts

@@ -12,18 +12,18 @@ const useCheckbox = (props: CheckboxProps) => {
 
   const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description", "children"]),
-    "checkbox"
+    "checkbox",
   );
 
   if (checkboxGroup) {
     if (props.checked) {
       console.warn(
-        "`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead."
+        "`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead.",
       );
     }
     if (props.value === undefined) {
       console.warn(
-        "A <Checkbox> element within a <CheckboxGroup> requires a `value` property."
+        "A <Checkbox> element within a <CheckboxGroup> requires a `value` property.",
       );
     }
   }

package/src/form/combobox/Combobox.tsx

@@ -1,17 +1,17 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef } from "react";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { mergeRefs } from "../../util";
 import ClearButton from "./ClearButton";
+import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
+import Input from "./Input/Input";
+import { useInputContext } from "./Input/inputContext";
 import SelectedOptions from "./SelectedOptions/SelectedOptions";
+import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
 import ToggleListButton from "./ToggleListButton";
 import { ComboboxProps } from "./types";
-import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
-import ComboboxWrapper from "./ComboboxWrapper";
-import { useInputContext } from "./Input/inputContext";
-import Input from "./Input/Input";
-import { mergeRefs } from "../../util";
-import { BodyShort, ErrorMessage, Label } from "../../typography";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
@@ -52,7 +52,7 @@ export const Combobox = forwardRef<
 
   const mergedInputRef = useMemo(
     () => mergeRefs([inputRef, ref]),
-    [inputRef, ref]
+    [inputRef, ref],
   );
 
   return (
@@ -93,7 +93,7 @@ export const Combobox = forwardRef<
             {
               "navds-combobox__wrapper-inner--virtually-unfocused":
                 activeDecendantId !== null,
-            }
+            },
           )}
           onClick={focusInput}
         >

package/src/form/combobox/ComboboxProvider.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
 import Combobox from "./Combobox";
 import { FilteredOptionsProvider } from "./FilteredOptions/filteredOptionsContext";
-import { CustomOptionsProvider } from "./customOptionsContext";
-import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
 import { InputContextProvider } from "./Input/inputContext";
+import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
+import { CustomOptionsProvider } from "./customOptionsContext";
 import { ComboboxProps } from "./types";
 
 /**
@@ -92,7 +92,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
         </CustomOptionsProvider>
       </InputContextProvider>
     );
-  }
+  },
 );
 
 export default ComboboxProvider;

package/src/form/combobox/ComboboxWrapper.tsx

@@ -53,7 +53,7 @@ const ComboboxWrapper = ({
           "navds-combobox--error": hasError,
           "navds-combobox--disabled": !!inputProps.disabled,
           "navds-combobox--focused": hasFocusWithin,
-        }
+        },
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -1,12 +1,12 @@
-import React from "react";
 import cl from "clsx";
+import React from "react";
 import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
-import { useFilteredOptionsContext } from "./filteredOptionsContext";
-import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
-import { useInputContext } from "../Input/inputContext";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
+import { useInputContext } from "../Input/inputContext";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
+import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const {
@@ -60,7 +60,7 @@ const FilteredOptions = () => {
               activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)
             ) {
               virtualFocus.moveFocusToElement(
-                filteredOptionsUtil.getAddNewOptionId(id)
+                filteredOptionsUtil.getAddNewOptionId(id),
               );
               setIsMouseLastUsedInputDevice(true);
             }
@@ -114,7 +114,7 @@ const FilteredOptions = () => {
               activeDecendantId !== filteredOptionsUtil.getOptionId(id, option)
             ) {
               virtualFocus.moveFocusToElement(
-                filteredOptionsUtil.getOptionId(id, option)
+                filteredOptionsUtil.getOptionId(id, option),
               );
               setIsMouseLastUsedInputDevice(true);
             }

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -1,19 +1,19 @@
+import cl from "clsx";
 import React, {
-  useState,
-  useMemo,
+  SetStateAction,
   createContext,
-  useContext,
   useCallback,
-  SetStateAction,
+  useContext,
+  useMemo,
+  useState,
 } from "react";
-import cl from "clsx";
-import { useCustomOptionsContext } from "../customOptionsContext";
-import { useInputContext } from "../Input/inputContext";
-import usePrevious from "../../../util/usePrevious";
 import { useClientLayoutEffect } from "../../../util";
+import usePrevious from "../../../util/usePrevious";
+import { useInputContext } from "../Input/inputContext";
+import { useCustomOptionsContext } from "../customOptionsContext";
+import { ComboboxProps } from "../types";
 import filteredOptionsUtils from "./filtered-options-util";
 import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
-import { ComboboxProps } from "../types";
 
 type FilteredOptionsProps = {
   children: any;
@@ -46,7 +46,7 @@ type FilteredOptionsContextType = {
   virtualFocus: VirtualFocusType;
 };
 const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
-  {} as FilteredOptionsContextType
+  {} as FilteredOptionsContextType,
 );
 
 export const FilteredOptionsProvider = ({
@@ -99,9 +99,9 @@ export const FilteredOptionsProvider = ({
           [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
             ? value
             : undefined,
-        }
+        },
       ),
-    [allowNewValues, id, options, value]
+    [allowNewValues, id, options, value],
   );
 
   useClientLayoutEffect(() => {
@@ -112,7 +112,7 @@ export const FilteredOptionsProvider = ({
       filteredOptions.length > 0
     ) {
       setValue(
-        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`
+        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`,
       );
       setSearchTerm(searchTerm);
     }
@@ -134,14 +134,14 @@ export const FilteredOptionsProvider = ({
       virtualFocus.moveFocusToTop();
       setInternalListOpen((oldState) => newState ?? !oldState);
     },
-    [virtualFocus]
+    [virtualFocus],
   );
 
   const isValueNew = useMemo(
     () =>
       Boolean(value) &&
       !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)],
-    [filteredOptionsMap, id, value]
+    [filteredOptionsMap, id, value],
   );
 
   const ariaDescribedBy = useMemo(() => {
@@ -169,12 +169,12 @@ export const FilteredOptionsProvider = ({
   const currentOption = useMemo(
     () =>
       filteredOptionsMap[virtualFocus.activeElement?.getAttribute("id") || -1],
-    [filteredOptionsMap, virtualFocus]
+    [filteredOptionsMap, virtualFocus],
   );
 
   const activeDecendantId = useMemo(
     () => virtualFocus.activeElement?.getAttribute("id") || undefined,
-    [virtualFocus.activeElement]
+    [virtualFocus.activeElement],
   );
 
   const filteredOptionsState = {
@@ -205,7 +205,7 @@ export const useFilteredOptionsContext = () => {
   const context = useContext(FilteredOptionsContext);
   if (!context) {
     throw new Error(
-      "useFilteredOptionsContext must be used within a FilteredOptionsProvider"
+      "useFilteredOptionsContext must be used within a FilteredOptionsProvider",
     );
   }
   return context;

package/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -14,7 +14,7 @@ export type VirtualFocusType = {
 };
 
 const useVirtualFocus = (
-  containerRef: HTMLElement | null
+  containerRef: HTMLElement | null,
 ): VirtualFocusType => {
   const [index, setIndex] = useState(-1);
 
@@ -22,7 +22,7 @@ const useVirtualFocus = (
     ? Array.prototype.slice.call(containerRef?.children)
     : [];
   const elementsAbleToReceiveFocus = listOfAllChildren.filter(
-    (child) => child.getAttribute("data-no-focus") !== "true"
+    (child) => child.getAttribute("data-no-focus") !== "true",
   );
 
   const activeElement = elementsAbleToReceiveFocus[index];
@@ -34,7 +34,7 @@ const useVirtualFocus = (
   const scrollToOption = (newIndex: number) => {
     const indexOfElementToScrollTo = Math.min(
       Math.max(newIndex, 0),
-      containerRef?.children.length || 0
+      containerRef?.children.length || 0,
     );
     if (containerRef?.children[indexOfElementToScrollTo]) {
       const child = containerRef.children[indexOfElementToScrollTo];
@@ -53,14 +53,14 @@ const useVirtualFocus = (
   const moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
   const moveFocusDown = () =>
     _moveFocusAndScrollTo(
-      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1)
+      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1),
     );
   const moveFocusToTop = () => _moveFocusAndScrollTo(-1);
   const moveFocusToBottom = () =>
     _moveFocusAndScrollTo(elementsAbleToReceiveFocus.length - 1);
   const moveFocusToElement = (id: string) => {
     const thisElement = elementsAbleToReceiveFocus.find(
-      (_element) => _element.getAttribute("id") === id
+      (_element) => _element.getAttribute("id") === id,
     );
     const indexOfElement = thisElement
       ? elementsAbleToReceiveFocus.indexOf(thisElement)

package/src/form/combobox/Input/Input.tsx

@@ -1,15 +1,15 @@
-import { omit } from "../../../util";
+import cl from "clsx";
 import React, {
-  useCallback,
-  forwardRef,
-  InputHTMLAttributes,
   ChangeEvent,
+  InputHTMLAttributes,
+  forwardRef,
+  useCallback,
 } from "react";
-import cl from "clsx";
-import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { omit } from "../../../util";
+import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "./inputContext";
-import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 
 interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
@@ -45,7 +45,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       (event: React.KeyboardEvent) => {
         const isTextInSelectedOptions = (text: string) => {
           return selectedOptions.find(
-            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase()
+            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase(),
           );
         };
 
@@ -86,7 +86,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         toggleIsListOpen,
         toggleOption,
         value,
-      ]
+      ],
     );
 
     const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -151,7 +151,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         setIsMouseLastUsedInputDevice,
         toggleIsListOpen,
         virtualFocus,
-      ]
+      ],
     );
 
     const onChangeHandler = useCallback(
@@ -165,7 +165,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         virtualFocus.moveFocusToTop();
         onChange(event);
       },
-      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]
+      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen],
     );
 
     return (
@@ -190,11 +190,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           inputClassName,
           "navds-combobox__input",
           "navds-body-short",
-          `navds-body-short--${size}`
+          `navds-body-short--${size}`,
         )}
       />
     );
-  }
+  },
 );
 
 export default Input;

package/src/form/combobox/Input/inputContext.tsx

@@ -49,14 +49,14 @@ export const InputContextProvider = ({ children, value: props }) => {
       id: externalId,
       size,
     },
-    "comboboxfield"
+    "comboboxfield",
   );
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [internalValue, setInternalValue] = useState<string>(defaultValue);
 
   const value = useMemo(
     () => String(externalValue ?? internalValue),
-    [externalValue, internalValue]
+    [externalValue, internalValue],
   );
 
   const [searchTerm, setSearchTerm] = useState(value);
@@ -68,14 +68,14 @@ export const InputContextProvider = ({ children, value: props }) => {
       externalOnChange?.(event);
       setSearchTerm(newValue);
     },
-    [externalValue, externalOnChange]
+    [externalValue, externalOnChange],
   );
 
   const setValue = useCallback(
     (text) => {
       setInternalValue(text);
     },
-    [setInternalValue]
+    [setInternalValue],
   );
 
   const clearInput = useCallback(
@@ -85,7 +85,7 @@ export const InputContextProvider = ({ children, value: props }) => {
       setValue("");
       setSearchTerm("");
     },
-    [externalOnChange, onClear, setValue]
+    [externalOnChange, onClear, setValue],
   );
 
   const focusInput = useCallback(() => {
@@ -123,7 +123,7 @@ export const useInputContext = () => {
   const context = useContext(InputContext);
   if (!context) {
     throw new Error(
-      "useInputContext must be used within an InputContextProvider"
+      "useInputContext must be used within an InputContextProvider",
     );
   }
   return context;

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Chips } from "../../../chips";
-import { useSelectedOptionsContext } from "./selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
+import { useSelectedOptionsContext } from "./selectedOptionsContext";
 
 interface SelectedOptionsProps {
   selectedOptions?: string[];