@drivy/cobalt 2.16.0 → 2.16.1

package/components/Form/Autocomplete/index.js

@@ -25,7 +25,7 @@ function sanitizeItems(items) {
 }
 const KEY_CODE_ENTER = 13;
 const ignoreItemValue = nanoid();
-const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon, status, focusOnInit = false, popoverClassName, minQueryLength = 1, onQueryChange, onSelectItem, renderItem, items, onKeyDown, disabled, defaultValue, onClearValue, allowCustomValue = true, ...inputProps }, ref) => {
+const _Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon, status, focusOnInit = false, popoverClassName, minQueryLength = 1, onQueryChange, onSelectItem, renderItem, items, onKeyDown, disabled, defaultValue, onClearValue, allowCustomValue = true, ...inputProps }, ref) => {
     const [defaultInputValue, setDefaultInputValue] = useState(defaultValue);
     const [autocompleteKey, setAutocompleteKey] = useState(true);
     const isInputValidChangedProgrammatically = useRef(false);
@@ -64,9 +64,7 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
         openOnClick: minQueryLength === 0 && collection.items.length > 0,
         onValueChange: (details) => {
             isInputValidChangedProgrammatically.current = true;
-            details.items[0]
-                ? setValue(details.items[0].value)
-                : setValue("");
+            details.items[0] ? setValue(details.items[0].value) : setValue("");
         },
         onInteractOutside: () => {
             setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); }, 30);
@@ -178,7 +176,8 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
             "cobalt-FormField--fullWidth": fullWidth,
         }), children: [autocomplete, hint && (jsx(Hint, { status: status, children: jsx("span", { dangerouslySetInnerHTML: { __html: hint } }) }))] })) : (autocomplete);
 });
-Autocomplete.displayName = "Autocomplete";
+_Autocomplete.displayName = "Autocomplete";
+const Autocomplete = _Autocomplete;
 
 export { Autocomplete };
 //# sourceMappingURL=index.js.map

package/components/Form/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import {\n  Combobox,\n  createListCollection,\n  Portal,\n  useCombobox,\n} from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { nanoid } from \"nanoid\"\nimport type React from \"react\"\nimport {\n  Fragment,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { getA11yOnClick } from \"../../../helpers\"\nimport { useOnMountEffect } from \"../../../hooks/useOnMountEffect\"\nimport { CheckIcon, Icon, type IconSources } from \"../../Icon\"\nimport type { FormElement } from \"../form\"\nimport { Hint } from \"../Hint\"\n\nexport type AutocompleteItemInput =\n  | string\n  | {\n      [x: string]: unknown\n      icon?: IconSources\n      label?: string\n      value: string\n      disabled?: boolean\n    }\n\nexport type AutocompleteItem = {\n  [x: string]: unknown\n  icon?: IconSources\n  label: string\n  value: string\n  disabled?: boolean\n  description?: string\n}\n\nexport type AutocompleteRefType = {\n  query: string\n  input: HTMLInputElement\n  open: () => void\n  focus: () => void\n  clearValue: () => void\n  setSelectedItem: (item: AutocompleteItemInput) => void\n}\n\ntype Props = {\n  className?: string\n  label?: string\n  hint?: string\n  fullWidth?: boolean\n  icon?: IconSources\n  items: AutocompleteItemInput[]\n  popoverClassName?: string\n  minQueryLength?: number\n  autoFilter?: boolean\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onClearValue?: () => void\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n  allowCustomValue?: boolean\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction sanitizeItem(item: AutocompleteItemInput) {\n  if (typeof item === \"string\") {\n    // If the item is a string, create an object with label and value being the string\n    return { label: item, value: item }\n  } else {\n    // If the item is an object, ensure it has a label property\n    const { value, label } = item\n    return { ...item, label: label ?? value }\n  }\n}\n\nfunction sanitizeItems(items: AutocompleteItemInput[]) {\n  return items.map((item) => sanitizeItem(item))\n}\n\nconst HIGHLIGHT_CLASSNAME = \"autocomplete_matching_query\"\nconst regExpEscape = (s: string) => s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\")\n\ntype AutocompleteMatchHighlightPropsType = {\n  label: string\n  query: string\n  matchClassName?: string\n}\n\nexport const AutocompleteMatchHighlight = ({\n  label,\n  query,\n  matchClassName = HIGHLIGHT_CLASSNAME,\n}: AutocompleteMatchHighlightPropsType) => {\n  if (query.trim().length === 0) return label\n\n  const queryRX = RegExp(`(${regExpEscape(query)})`, \"gi\")\n\n  const parts = label.split(queryRX)\n\n  return (\n    <>\n      {parts.map((part, index) => {\n        const key = `${index}-${part}`\n        return part.match(queryRX) ? (\n          <span className={cx(matchClassName)} key={key}>\n            {part}\n          </span>\n        ) : (\n          <Fragment key={key}>{part}</Fragment>\n        )\n      })}\n    </>\n  )\n}\n\nconst KEY_CODE_ENTER = 13\n\nconst ignoreItemValue = nanoid()\n\nconst Autocomplete = forwardRef(\n  (\n    {\n      id,\n      className,\n      label,\n      hint,\n      fullWidth,\n      icon,\n      status,\n      focusOnInit = false,\n      popoverClassName,\n      minQueryLength = 1,\n      onQueryChange,\n      onSelectItem,\n      renderItem,\n      items,\n      onKeyDown,\n      disabled,\n      defaultValue,\n      onClearValue,\n      allowCustomValue = true,\n      ...inputProps\n    }: Props,\n    ref,\n  ) => {\n    const [defaultInputValue, setDefaultInputValue] = useState(defaultValue)\n    const [autocompleteKey, setAutocompleteKey] = useState(true)\n\n    const isInputValidChangedProgrammatically = useRef(false)\n    const sanitizedInitialItems = useMemo(() => sanitizeItems(items), [items])\n\n    const [value, setValue] = useState<string>((defaultValue as string) || \"\")\n    const [popoverItems, setPopoverItems] = useState(sanitizedInitialItems)\n    // Allow to use the combobox without listening its changes\n    const comboboxRef = useRef<ReturnType<\n      typeof useCombobox<AutocompleteItem>\n    > | null>(null)\n\n    const collection = useMemo(\n      () =>\n        createListCollection({\n          items: popoverItems.length\n            ? popoverItems\n            : sanitizeItems([{ value: ignoreItemValue }]), // having an empty collection makes the component buggy. Best practice is to always have an \"instruction\" item when empty. This dummy item will not be displayed\n        }),\n      [popoverItems],\n    )\n\n    const handleInputChange = (details: Combobox.InputValueChangeDetails) => {\n      if (isInputValidChangedProgrammatically.current) {\n        isInputValidChangedProgrammatically.current = false\n        return\n      }\n\n      onQueryChange\n        ? onQueryChange(details.inputValue)\n        : setPopoverItems(\n            sanitizedInitialItems.filter((item) =>\n              item.label\n                .toLowerCase()\n                .includes(details.inputValue.toLowerCase()),\n            ),\n          )\n    }\n\n    useEffect(() => {\n      setPopoverItems(sanitizeItems(items))\n    }, [items])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const combobox = useCombobox({\n      ...(id ? { id } : {}),\n      allowCustomValue: allowCustomValue,\n      autoFocus: focusOnInit,\n      value: [value],\n      collection: collection,\n      onInputValueChange: handleInputChange,\n      openOnClick: minQueryLength === 0 && collection.items.length > 0,\n      onValueChange: (details) => {\n        isInputValidChangedProgrammatically.current = true\n        details.items[0]\n          ? setValue((details.items[0] as AutocompleteItem).value)\n          : setValue(\"\")\n      },\n      onInteractOutside: () => {\n        setTimeout(() => inputRef.current?.blur(), 30)\n      },\n      positioning: {\n        gutter: -3,\n        flip: false,\n      },\n    })\n\n    useEffect(() => {\n      comboboxRef.current = combobox\n    }, [combobox])\n\n    useImperativeHandle(ref, (): AutocompleteRefType => {\n      return {\n        query: combobox.inputValue,\n        input: inputRef.current as HTMLInputElement,\n        open: () => {\n          combobox.setOpen(true)\n        },\n        focus: () => {\n          combobox.focus()\n        },\n        clearValue: () => {\n          combobox.clearValue()\n          setValue(\"\")\n          setDefaultInputValue(\"\")\n          onClearValue?.()\n          onQueryChange?.(\"\")\n        },\n        setSelectedItem: (selectedItem: AutocompleteItemInput) => {\n          isInputValidChangedProgrammatically.current = true\n          const sanitizedItem = sanitizeItem(selectedItem)\n          const existingItem = popoverItems.find(\n            (item) => item.value === sanitizedItem.value,\n          )\n\n          if (!existingItem) {\n            combobox.setOpen(false)\n            setPopoverItems([])\n            setDefaultInputValue(sanitizedItem.value)\n            setValue(sanitizedItem.value)\n            setAutocompleteKey(!autocompleteKey)\n          } else {\n            setValue(sanitizedItem.value)\n            combobox.setOpen(false)\n          }\n        },\n      }\n    }, [combobox, autocompleteKey, onClearValue, onQueryChange, popoverItems])\n\n    useOnMountEffect(() => {\n      focusOnInit && combobox.setOpen(collection.items.length > 0)\n    })\n\n    const validItems = useMemo(\n      () => collection.items.filter((item) => item.value !== ignoreItemValue),\n      [collection.items],\n    )\n\n    useEffect(() => {\n      if (validItems.length) {\n        if (!comboboxRef.current?.open && comboboxRef.current?.focused) {\n          comboboxRef.current.setOpen(true)\n        }\n      } else {\n        if (comboboxRef.current?.open) {\n          comboboxRef.current.setOpen(false)\n        }\n      }\n    }, [validItems])\n\n    const autocomplete = (\n      <Combobox.RootProvider\n        value={combobox}\n        className={cx(\"cobalt-Autocomplete\", className, {\n          \"cobalt-Autocomplete--empty\": validItems.length === 0,\n        })}\n        key={`${autocompleteKey}`}\n      >\n        {label && (\n          <Combobox.Label className=\"cobalt-FormField__Label\">\n            {label}\n          </Combobox.Label>\n        )}\n        <Combobox.Control\n          className={cx(\"cobalt-TextField\", {\n            \"cobalt-TextField--error\": status === \"error\",\n            \"cobalt-TextField--success\": status === \"success\",\n            \"cobalt-TextField--withIcon\": icon,\n            \"cobalt-TextField--withValue\":\n              inputRef.current && inputRef.current.value.length > 0,\n          })}\n        >\n          <Combobox.Input\n            className=\"cobalt-TextField__Input\"\n            ref={inputRef}\n            disabled={disabled}\n            defaultValue={defaultInputValue}\n            {...inputProps}\n            onKeyDown={(e) => {\n              onKeyDown?.(e)\n              if (\n                onSelectItem &&\n                e.keyCode === KEY_CODE_ENTER &&\n                combobox.highlightedItem\n              ) {\n                const processSelection = onSelectItem(\n                  combobox.highlightedItem as AutocompleteItem,\n                  combobox.inputValue,\n                )\n\n                if (!processSelection) {\n                  e.preventDefault()\n                  e.stopPropagation()\n                }\n              }\n            }}\n          />\n          {icon && (\n            <Icon\n              source={icon}\n              color=\"primary\"\n              className=\"cobalt-TextField__Icon\"\n            />\n          )}\n          {value.length > 0 && !disabled && (\n            <Combobox.ClearTrigger\n              className=\"cobalt-Autocomplete__clear-button\"\n              data-testid=\"clear\"\n              onClick={() => {\n                setDefaultInputValue(\"\")\n                setValue(\"\")\n                setAutocompleteKey(!autocompleteKey)\n                minQueryLength === 0 &&\n                  setTimeout(() => {\n                    inputRef.current?.click()\n                  }, 0)\n                onClearValue?.()\n                onQueryChange?.(\"\")\n              }}\n            >\n              <Icon source=\"close\" size={16} />\n            </Combobox.ClearTrigger>\n          )}\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner className=\"cobalt-Autocomplete__positioner\">\n            <Combobox.Content\n              className={cx(\"cobalt-Autocomplete__content\", popoverClassName, {\n                \"cobalt-Autocomplete__content--empty\": validItems.length === 0,\n              })}\n            >\n              {validItems.map((item: AutocompleteItem, index: number) => (\n                <Combobox.Item\n                  key={`${item.label}-${item.value}-${index}`}\n                  item={item}\n                  className=\"cobalt-Autocomplete__item\"\n                >\n                  {renderItem ? (\n                    <div\n                      {...getA11yOnClick((e) => {\n                        if (onSelectItem) {\n                          const processSelection = onSelectItem(\n                            item,\n                            combobox.inputValue,\n                          )\n\n                          if (!processSelection) {\n                            e.preventDefault()\n                            e.stopPropagation()\n                          }\n                        }\n                      })}\n                    >\n                      {renderItem(item, combobox.inputValue)}\n                    </div>\n                  ) : (\n                    <div\n                      className={cx(\"cobalt-Autocomplete__item-wrapper\", {\n                        \"cobalt-Autocomplete__item-wrapper--disabled\":\n                          item.disabled,\n                      })}\n                    >\n                      {icon && (\n                        <span className=\"cobalt-Autocomplete__item-icon\">\n                          <Icon source={icon} color=\"primary\" />\n                        </span>\n                      )}\n                      <Combobox.ItemText className=\"cobalt-Autocomplete__item-label\">\n                        {item.label}\n                      </Combobox.ItemText>\n                      <Combobox.ItemIndicator className=\"cobalt-Autocomplete_selected-item-indicator\">\n                        <CheckIcon size={16} />\n                      </Combobox.ItemIndicator>\n                    </div>\n                  )}\n                </Combobox.Item>\n              ))}\n            </Combobox.Content>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.RootProvider>\n    )\n\n    return label || hint ? (\n      <div\n        className={cx(\"cobalt-FormField\", {\n          \"cobalt-FormField--withHint\": hint,\n          \"cobalt-FormField--fullWidth\": fullWidth,\n        })}\n      >\n        {autocomplete}\n        {hint && (\n          <Hint status={status}>\n            {/** biome-ignore lint/security/noDangerouslySetInnerHtml: Allow to pass content from the HAML template*/}\n            <span dangerouslySetInnerHTML={{ __html: hint }} />\n          </Hint>\n        )}\n      </div>\n    ) : (\n      autocomplete\n    )\n  },\n)\n\nAutocomplete.displayName = \"Autocomplete\"\n\nexport { Autocomplete }\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import {\n  Combobox,\n  createListCollection,\n  Portal,\n  useCombobox,\n} from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { nanoid } from \"nanoid\"\nimport type React from \"react\"\nimport {\n  Fragment,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { getA11yOnClick } from \"../../../helpers\"\nimport { useOnMountEffect } from \"../../../hooks/useOnMountEffect\"\nimport { CheckIcon, Icon, type IconSources } from \"../../Icon\"\nimport type { FormElement } from \"../form\"\nimport { Hint } from \"../Hint\"\n\ntype AutocompleteItemBaseKeys = \"icon\" | \"label\" | \"value\" | \"disabled\"\n\nexport type AutocompleteItemInput<T extends object = Record<string, unknown>> =\n  | string\n  | ({\n      icon?: IconSources\n      label?: string\n      value: string\n      disabled?: boolean\n    } & Partial<Omit<T, AutocompleteItemBaseKeys>>)\n\ntype AutocompleteItemAllBaseKeys = AutocompleteItemBaseKeys | \"description\"\n\nexport type AutocompleteItem<T extends object = Record<string, unknown>> = {\n  icon?: IconSources\n  label: string\n  value: string\n  disabled?: boolean\n  description?: string\n} & Omit<T, AutocompleteItemAllBaseKeys>\n\nexport type AutocompleteRefType<T extends object = Record<string, unknown>> = {\n  query: string\n  input: HTMLInputElement\n  open: () => void\n  focus: () => void\n  clearValue: () => void\n  setSelectedItem: (item: AutocompleteItemInput<T>) => void\n}\n\ntype Props<T extends object = Record<string, unknown>> = {\n  className?: string\n  label?: string\n  hint?: string\n  fullWidth?: boolean\n  icon?: IconSources\n  items: AutocompleteItemInput<T>[]\n  popoverClassName?: string\n  minQueryLength?: number\n  autoFilter?: boolean\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onClearValue?: () => void\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem<T>, term: string) => boolean\n  renderItem?: (item: AutocompleteItem<T>, term: string) => React.ReactNode\n  allowCustomValue?: boolean\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction sanitizeItem<T extends object = Record<string, unknown>>(\n  item: AutocompleteItemInput<T>,\n): AutocompleteItem<T> {\n  if (typeof item === \"string\") {\n    // If the item is a string, create an object with label and value being the string\n    return { label: item, value: item } as AutocompleteItem<T>\n  } else {\n    // If the item is an object, ensure it has a label property\n    const { value, label } = item\n    return { ...item, label: label ?? value } as AutocompleteItem<T>\n  }\n}\n\nfunction sanitizeItems<T extends object = Record<string, unknown>>(\n  items: AutocompleteItemInput<T>[],\n): AutocompleteItem<T>[] {\n  return items.map((item) => sanitizeItem(item))\n}\n\nconst HIGHLIGHT_CLASSNAME = \"autocomplete_matching_query\"\nconst regExpEscape = (s: string) => s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\")\n\ntype AutocompleteMatchHighlightPropsType = {\n  label: string\n  query: string\n  matchClassName?: string\n}\n\nexport const AutocompleteMatchHighlight = ({\n  label,\n  query,\n  matchClassName = HIGHLIGHT_CLASSNAME,\n}: AutocompleteMatchHighlightPropsType) => {\n  if (query.trim().length === 0) return label\n\n  const queryRX = RegExp(`(${regExpEscape(query)})`, \"gi\")\n\n  const parts = label.split(queryRX)\n\n  return (\n    <>\n      {parts.map((part, index) => {\n        const key = `${index}-${part}`\n        return part.match(queryRX) ? (\n          <span className={cx(matchClassName)} key={key}>\n            {part}\n          </span>\n        ) : (\n          <Fragment key={key}>{part}</Fragment>\n        )\n      })}\n    </>\n  )\n}\n\nconst KEY_CODE_ENTER = 13\n\nconst ignoreItemValue = nanoid()\n\nconst _Autocomplete = forwardRef(\n  (\n    {\n      id,\n      className,\n      label,\n      hint,\n      fullWidth,\n      icon,\n      status,\n      focusOnInit = false,\n      popoverClassName,\n      minQueryLength = 1,\n      onQueryChange,\n      onSelectItem,\n      renderItem,\n      items,\n      onKeyDown,\n      disabled,\n      defaultValue,\n      onClearValue,\n      allowCustomValue = true,\n      ...inputProps\n    }: Props,\n    ref,\n  ) => {\n    const [defaultInputValue, setDefaultInputValue] = useState(defaultValue)\n    const [autocompleteKey, setAutocompleteKey] = useState(true)\n\n    const isInputValidChangedProgrammatically = useRef(false)\n    const sanitizedInitialItems = useMemo(() => sanitizeItems(items), [items])\n\n    const [value, setValue] = useState<string>((defaultValue as string) || \"\")\n    const [popoverItems, setPopoverItems] = useState(sanitizedInitialItems)\n    // Allow to use the combobox without listening its changes\n    const comboboxRef = useRef<ReturnType<\n      typeof useCombobox<AutocompleteItem<object>>\n    > | null>(null)\n\n    const collection = useMemo(\n      () =>\n        createListCollection({\n          items: popoverItems.length\n            ? popoverItems\n            : sanitizeItems([{ value: ignoreItemValue }]), // having an empty collection makes the component buggy. Best practice is to always have an \"instruction\" item when empty. This dummy item will not be displayed\n        }),\n      [popoverItems],\n    )\n\n    const handleInputChange = (details: Combobox.InputValueChangeDetails) => {\n      if (isInputValidChangedProgrammatically.current) {\n        isInputValidChangedProgrammatically.current = false\n        return\n      }\n\n      onQueryChange\n        ? onQueryChange(details.inputValue)\n        : setPopoverItems(\n            sanitizedInitialItems.filter((item) =>\n              item.label\n                .toLowerCase()\n                .includes(details.inputValue.toLowerCase()),\n            ),\n          )\n    }\n\n    useEffect(() => {\n      setPopoverItems(sanitizeItems(items))\n    }, [items])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const combobox = useCombobox({\n      ...(id ? { id } : {}),\n      allowCustomValue: allowCustomValue,\n      autoFocus: focusOnInit,\n      value: [value],\n      collection: collection,\n      onInputValueChange: handleInputChange,\n      openOnClick: minQueryLength === 0 && collection.items.length > 0,\n      onValueChange: (details) => {\n        isInputValidChangedProgrammatically.current = true\n        details.items[0] ? setValue(details.items[0].value) : setValue(\"\")\n      },\n      onInteractOutside: () => {\n        setTimeout(() => inputRef.current?.blur(), 30)\n      },\n      positioning: {\n        gutter: -3,\n        flip: false,\n      },\n    })\n\n    useEffect(() => {\n      comboboxRef.current = combobox\n    }, [combobox])\n\n    useImperativeHandle(ref, (): AutocompleteRefType => {\n      return {\n        query: combobox.inputValue,\n        input: inputRef.current as HTMLInputElement,\n        open: () => {\n          combobox.setOpen(true)\n        },\n        focus: () => {\n          combobox.focus()\n        },\n        clearValue: () => {\n          combobox.clearValue()\n          setValue(\"\")\n          setDefaultInputValue(\"\")\n          onClearValue?.()\n          onQueryChange?.(\"\")\n        },\n        setSelectedItem: (selectedItem: AutocompleteItemInput) => {\n          isInputValidChangedProgrammatically.current = true\n          const sanitizedItem = sanitizeItem(selectedItem)\n          const existingItem = popoverItems.find(\n            (item) => item.value === sanitizedItem.value,\n          )\n\n          if (!existingItem) {\n            combobox.setOpen(false)\n            setPopoverItems([])\n            setDefaultInputValue(sanitizedItem.value)\n            setValue(sanitizedItem.value)\n            setAutocompleteKey(!autocompleteKey)\n          } else {\n            setValue(sanitizedItem.value)\n            combobox.setOpen(false)\n          }\n        },\n      }\n    }, [combobox, autocompleteKey, onClearValue, onQueryChange, popoverItems])\n\n    useOnMountEffect(() => {\n      focusOnInit && combobox.setOpen(collection.items.length > 0)\n    })\n\n    const validItems = useMemo(\n      () => collection.items.filter((item) => item.value !== ignoreItemValue),\n      [collection.items],\n    )\n\n    useEffect(() => {\n      if (validItems.length) {\n        if (!comboboxRef.current?.open && comboboxRef.current?.focused) {\n          comboboxRef.current.setOpen(true)\n        }\n      } else {\n        if (comboboxRef.current?.open) {\n          comboboxRef.current.setOpen(false)\n        }\n      }\n    }, [validItems])\n\n    const autocomplete = (\n      <Combobox.RootProvider\n        value={combobox}\n        className={cx(\"cobalt-Autocomplete\", className, {\n          \"cobalt-Autocomplete--empty\": validItems.length === 0,\n        })}\n        key={`${autocompleteKey}`}\n      >\n        {label && (\n          <Combobox.Label className=\"cobalt-FormField__Label\">\n            {label}\n          </Combobox.Label>\n        )}\n        <Combobox.Control\n          className={cx(\"cobalt-TextField\", {\n            \"cobalt-TextField--error\": status === \"error\",\n            \"cobalt-TextField--success\": status === \"success\",\n            \"cobalt-TextField--withIcon\": icon,\n            \"cobalt-TextField--withValue\":\n              inputRef.current && inputRef.current.value.length > 0,\n          })}\n        >\n          <Combobox.Input\n            className=\"cobalt-TextField__Input\"\n            ref={inputRef}\n            disabled={disabled}\n            defaultValue={defaultInputValue}\n            {...inputProps}\n            onKeyDown={(e) => {\n              onKeyDown?.(e)\n              if (\n                onSelectItem &&\n                e.keyCode === KEY_CODE_ENTER &&\n                combobox.highlightedItem\n              ) {\n                const processSelection = onSelectItem(\n                  combobox.highlightedItem,\n                  combobox.inputValue,\n                )\n\n                if (!processSelection) {\n                  e.preventDefault()\n                  e.stopPropagation()\n                }\n              }\n            }}\n          />\n          {icon && (\n            <Icon\n              source={icon}\n              color=\"primary\"\n              className=\"cobalt-TextField__Icon\"\n            />\n          )}\n          {value.length > 0 && !disabled && (\n            <Combobox.ClearTrigger\n              className=\"cobalt-Autocomplete__clear-button\"\n              data-testid=\"clear\"\n              onClick={() => {\n                setDefaultInputValue(\"\")\n                setValue(\"\")\n                setAutocompleteKey(!autocompleteKey)\n                minQueryLength === 0 &&\n                  setTimeout(() => {\n                    inputRef.current?.click()\n                  }, 0)\n                onClearValue?.()\n                onQueryChange?.(\"\")\n              }}\n            >\n              <Icon source=\"close\" size={16} />\n            </Combobox.ClearTrigger>\n          )}\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner className=\"cobalt-Autocomplete__positioner\">\n            <Combobox.Content\n              className={cx(\"cobalt-Autocomplete__content\", popoverClassName, {\n                \"cobalt-Autocomplete__content--empty\": validItems.length === 0,\n              })}\n            >\n              {validItems.map((item, index) => (\n                <Combobox.Item\n                  key={`${item.label}-${item.value}-${index}`}\n                  item={item}\n                  className=\"cobalt-Autocomplete__item\"\n                >\n                  {renderItem ? (\n                    <div\n                      {...getA11yOnClick((e) => {\n                        if (onSelectItem) {\n                          const processSelection = onSelectItem(\n                            item,\n                            combobox.inputValue,\n                          )\n\n                          if (!processSelection) {\n                            e.preventDefault()\n                            e.stopPropagation()\n                          }\n                        }\n                      })}\n                    >\n                      {renderItem(item, combobox.inputValue)}\n                    </div>\n                  ) : (\n                    <div\n                      className={cx(\"cobalt-Autocomplete__item-wrapper\", {\n                        \"cobalt-Autocomplete__item-wrapper--disabled\":\n                          item.disabled,\n                      })}\n                    >\n                      {icon && (\n                        <span className=\"cobalt-Autocomplete__item-icon\">\n                          <Icon source={icon} color=\"primary\" />\n                        </span>\n                      )}\n                      <Combobox.ItemText className=\"cobalt-Autocomplete__item-label\">\n                        {item.label}\n                      </Combobox.ItemText>\n                      <Combobox.ItemIndicator className=\"cobalt-Autocomplete_selected-item-indicator\">\n                        <CheckIcon size={16} />\n                      </Combobox.ItemIndicator>\n                    </div>\n                  )}\n                </Combobox.Item>\n              ))}\n            </Combobox.Content>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.RootProvider>\n    )\n\n    return label || hint ? (\n      <div\n        className={cx(\"cobalt-FormField\", {\n          \"cobalt-FormField--withHint\": hint,\n          \"cobalt-FormField--fullWidth\": fullWidth,\n        })}\n      >\n        {autocomplete}\n        {hint && (\n          <Hint status={status}>\n            {/** biome-ignore lint/security/noDangerouslySetInnerHtml: Allow to pass content from the HAML template*/}\n            <span dangerouslySetInnerHTML={{ __html: hint }} />\n          </Hint>\n        )}\n      </div>\n    ) : (\n      autocomplete\n    )\n  },\n)\n\n_Autocomplete.displayName = \"Autocomplete\"\n\nconst Autocomplete = _Autocomplete as <\n  T extends object = Record<string, unknown>,\n>(\n  props: Props<T> & React.RefAttributes<AutocompleteRefType<T>>,\n) => React.ReactElement | null\n\nexport { Autocomplete }\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/components/Pagination/index.scss

@@ -5,6 +5,7 @@
 }
 
 .cobalt-pagination__Button {
+  @apply c-rounded-lg;
   padding: 0;
 }
 

package/types/src/components/Form/Autocomplete/index.d.ts

@@ -1,42 +1,36 @@
 import type React from "react";
 import { type IconSources } from "../../Icon";
 import type { FormElement } from "../form";
-export type AutocompleteItemInput = string | {
-    [x: string]: unknown;
+type AutocompleteItemBaseKeys = "icon" | "label" | "value" | "disabled";
+export type AutocompleteItemInput<T extends object = Record<string, unknown>> = string | ({
     icon?: IconSources;
     label?: string;
     value: string;
     disabled?: boolean;
-};
-export type AutocompleteItem = {
-    [x: string]: unknown;
+} & Partial<Omit<T, AutocompleteItemBaseKeys>>);
+type AutocompleteItemAllBaseKeys = AutocompleteItemBaseKeys | "description";
+export type AutocompleteItem<T extends object = Record<string, unknown>> = {
     icon?: IconSources;
     label: string;
     value: string;
     disabled?: boolean;
     description?: string;
-};
-export type AutocompleteRefType = {
+} & Omit<T, AutocompleteItemAllBaseKeys>;
+export type AutocompleteRefType<T extends object = Record<string, unknown>> = {
     query: string;
     input: HTMLInputElement;
     open: () => void;
     focus: () => void;
     clearValue: () => void;
-    setSelectedItem: (item: AutocompleteItemInput) => void;
-};
-type AutocompleteMatchHighlightPropsType = {
-    label: string;
-    query: string;
-    matchClassName?: string;
+    setSelectedItem: (item: AutocompleteItemInput<T>) => void;
 };
-export declare const AutocompleteMatchHighlight: ({ label, query, matchClassName, }: AutocompleteMatchHighlightPropsType) => string | import("react/jsx-runtime").JSX.Element;
-declare const Autocomplete: React.ForwardRefExoticComponent<{
+type Props<T extends object = Record<string, unknown>> = {
     className?: string;
     label?: string;
     hint?: string;
     fullWidth?: boolean;
     icon?: IconSources;
-    items: AutocompleteItemInput[];
+    items: AutocompleteItemInput<T>[];
     popoverClassName?: string;
     minQueryLength?: number;
     autoFilter?: boolean;
@@ -46,8 +40,15 @@ declare const Autocomplete: React.ForwardRefExoticComponent<{
     onClearValue?: () => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     onQueryChange?: (term: string) => void;
-    onSelectItem?: (item: AutocompleteItem, term: string) => boolean;
-    renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode;
+    onSelectItem?: (item: AutocompleteItem<T>, term: string) => boolean;
+    renderItem?: (item: AutocompleteItem<T>, term: string) => React.ReactNode;
     allowCustomValue?: boolean;
-} & FormElement & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<unknown>>;
+} & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
+type AutocompleteMatchHighlightPropsType = {
+    label: string;
+    query: string;
+    matchClassName?: string;
+};
+export declare const AutocompleteMatchHighlight: ({ label, query, matchClassName, }: AutocompleteMatchHighlightPropsType) => string | import("react/jsx-runtime").JSX.Element;
+declare const Autocomplete: <T extends object = Record<string, unknown>>(props: Props<T> & React.RefAttributes<AutocompleteRefType<T>>) => React.ReactElement | null;
 export { Autocomplete };

package/types/src/index.d.ts

@@ -20,7 +20,7 @@ export { Chip } from "./components/Chip";
 export { ContainedIcon } from "./components/ContainedIcon";
 export { EmptyState } from "./components/EmptyState";
 export { Flag } from "./components/Flag";
-export { Autocomplete, AutocompleteItem } from "./components/Form/Autocomplete";
+export { Autocomplete, type AutocompleteItem, type AutocompleteItemInput, type AutocompleteRefType, } from "./components/Form/Autocomplete";
 export { CheckablePillsGroup, CheckboxPill, RadioPill, } from "./components/Form/CheckablePill";
 export { Checkbox, ChoiceList, Radio } from "./components/Form/Checkmark";
 export { ComposedField } from "./components/Form/ComposedField";