npm - @drivy/cobalt - Versions diffs - 1.0.0-beta.1 → 1.0.0-beta.3 - Mend

@drivy/cobalt 1.0.0-beta.1 → 1.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/components/Form/Autocomplete/index.js +2 -1
package/components/Form/Autocomplete/index.js.map +1 -1
package/components/Modal/index.js +19 -19
package/components/Modal/index.js.map +1 -1
package/package.json +2 -2
package/styles/components/Modal/index.scss +14 -1
package/types/src/components/Form/Autocomplete/index.d.ts +1 -1
package/types/src/components/Modal/index.d.ts +4 -0

package/components/Form/Autocomplete/index.js CHANGED Viewed

@@ -22,7 +22,7 @@ function sanitizeItems(items) {
 }
 const KEY_CODE_ENTER = 13;
 const ignoreItemValue = nanoid();
-const Autocomplete = forwardRef(({ 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);
@@ -50,6 +50,7 @@ const Autocomplete = forwardRef(({ className, label, hint, fullWidth, icon, stat
     }, [items]);
     const inputRef = useRef(null);
     const combobox = useCombobox({
+        ...(id ? { id } : {}),
         allowCustomValue: allowCustomValue,
         autoFocus: focusOnInit,
         value: [value],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, {\n useEffect,\n useRef,\n useMemo,\n useImperativeHandle,\n forwardRef,\n} from \"react\"\nimport { useState } from \"react\"\nimport cx from \"classnames\"\n\nimport { CheckIcon, Icon, IconSources } from \"../../Icon\"\n\nimport { FormElement } from \"../form\"\nimport {\n Combobox,\n createListCollection,\n Portal,\n useCombobox,\n} from \"@ark-ui/react\"\nimport { Hint } from \"../Hint\"\nimport { nanoid } from \"nanoid\"\n\nexport type AutocompleteItemInput =\n \| string\n \| {\n [x: string]: any\n icon?: IconSources\n label?: string\n value: string\n disabled?: boolean\n }\n\nexport type AutocompleteItem = {\n [x: string]: any\n icon?: IconSources\n label: string\n value: string\n disabled?: boolean\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 Omit<React.InputHTMLAttributes<HTMLInputElement>, \"id\">\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 return (\n <>\n {label.split(queryRX).map((part, i) =>\n part.match(queryRX) ? (\n <span className={cx(matchClassName)} key={i}>\n {part}\n </span>\n ) : (\n part\n )\n )}\n </>\n )\n}\n\nconst KEY_CODE_ENTER = 13\n\nconst ignoreItemValue = nanoid()\n\nconst Autocomplete = forwardRef(\n (\n {\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\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 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 details.items[0] &&\n onSelectItem &&\n onSelectItem(\n details.items[0] as AutocompleteItem,\n combobox.inputValue\n )\n },\n onInteractOutside: () => {\n setTimeout(() => inputRef.current?.blur(), 30)\n },\n positioning: {\n gutter: -3,\n flip: false,\n },\n })\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 && onClearValue()\n onQueryChange && 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])\n\n useEffect(() => {\n focusOnInit && combobox.setOpen(collection.items.length > 0)\n }, [])\n\n const validItems = collection.items.filter(\n (item) => item.value !== ignoreItemValue\n )\n\n useEffect(() => {\n validItems.length === 0 && combobox.setOpen(false)\n\n combobox.focused &&\n collection.items.length > 0 &&\n !combobox.open &&\n combobox.setOpen(true)\n }, [collection.items.length])\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 && 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=\"accent\"\n className=\"cobalt-TextField__Icon\"\n />\n )}\n {value.length > 0 && !disabled && (\n <Combobox.ClearTrigger\n className=\"cobalt-Autocomplete__clear-button\"\n role=\"clear\"\n onClick={() => {\n setDefaultInputValue(\"\")\n setValue(\"\")\n setAutocompleteKey(!autocompleteKey)\n minQueryLength === 0 &&\n setTimeout(() => {\n inputRef.current?.click()\n }, 0)\n onClearValue && onClearValue()\n onQueryChange && 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={index}\n item={item}\n className=\"cobalt-Autocomplete__item\"\n >\n {renderItem ? (\n <div\n onClick={(e) => {\n if (onSelectItem) {\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 {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=\"accent\" />\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 <span dangerouslySetInnerHTML={{ __html: hint }} />\n </Hint>\n )}\n </div>\n ) : (\n <>{autocomplete}</>\n )\n }\n)\n\nAutocomplete.displayName = \"Autocomplete\"\n\nexport { Autocomplete }\n"],"names":[],"mappings":";;;;;;;;AAuEA,SAAS,YAAY,CAAC,IAA2B,EAAA;AAC/C,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;;QAE5B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;KACpC;SAAM;;AAEL,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;AAC7B,QAAA,OAAO,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,KAAK,EAAE,CAAA;KAC1C;AACH,CAAC;AAED,SAAS,aAAa,CAAC,KAA8B,EAAA;AACnD,IAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC,CAAA;AAChD,CAAC;AAmCD,MAAM,cAAc,GAAG,EAAE,CAAA;AAEzB,MAAM,eAAe,GAAG,MAAM,EAAE,CAAA;AAE1B,MAAA,YAAY,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,KAAK,EACL,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,EACN,WAAW,GAAG,KAAK,EACnB,gBAAgB,EAChB,cAAc,GAAG,CAAC,EAClB,aAAa,EACb,YAAY,EACZ,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,gBAAgB,GAAG,IAAI,EACvB,GAAG,UAAU,EACP,EACR,GAAG,KACD;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IACxE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AAE5D,IAAA,MAAM,mCAAmC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;AACzD,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAM,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAE1E,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,YAAuB,IAAI,EAAE,CAAC,CAAA;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAA;IAEvE,MAAM,UAAU,GAAG,OAAO,CACxB,MACE,oBAAoB,CAAC;QACnB,KAAK,EAAE,YAAY,CAAC,MAAM;AACxB,cAAE,YAAY;AACd,cAAE,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC,CAAC;AAChD,KAAA,CAAC,EACJ,CAAC,YAAY,CAAC,CACf,CAAA;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,OAAyC,KAAI;AACtE,QAAA,IAAI,mCAAmC,CAAC,OAAO,EAAE;AAC/C,YAAA,mCAAmC,CAAC,OAAO,GAAG,KAAK,CAAA;YACnD,OAAM;SACP;QAED,aAAa;AACX,cAAE,aAAa,CAAC,OAAO,CAAC,UAAU,CAAC;AACnC,cAAE,eAAe,CACb,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAI,KAChC,IAAI,CAAC,KAAK;AACP,iBAAA,WAAW,EAAE;iBACb,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAC9C,CACF,CAAA;AACP,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;AACb,QAAA,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAA;AACvC,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAEX,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE/C,MAAM,QAAQ,GAAG,WAAW,CAAC;AAC3B,QAAA,gBAAgB,EAAE,gBAAgB;AAClC,QAAA,SAAS,EAAE,WAAW;QACtB,KAAK,EAAE,CAAC,KAAK,CAAC;AACd,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,kBAAkB,EAAE,iBAAiB;QACrC,WAAW,EAAE,cAAc,KAAK,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AAChE,QAAA,aAAa,EAAE,CAAC,OAAO,KAAI;AACzB,YAAA,mCAAmC,CAAC,OAAO,GAAG,IAAI,CAAA;AAClD,YAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;kBACZ,QAAQ,CAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAsB,CAAC,KAAK,CAAC;AACxD,kBAAE,QAAQ,CAAC,EAAE,CAAC,CAAA;AAChB,YAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;gBACd,YAAY;AACZ,gBAAA,YAAY,CACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAqB,EACpC,QAAQ,CAAC,UAAU,CACpB,CAAA;SACJ;QACD,iBAAiB,EAAE,MAAK;AACtB,YAAA,UAAU,CAAC,MAAM,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,IAAI,EAAE,CAAA,EAAA,EAAE,EAAE,CAAC,CAAA;SAC/C;AACD,QAAA,WAAW,EAAE;YACX,MAAM,EAAE,CAAC,CAAC;AACV,YAAA,IAAI,EAAE,KAAK;AACZ,SAAA;AACF,KAAA,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,MAA0B;QACjD,OAAO;YACL,KAAK,EAAE,QAAQ,CAAC,UAAU;YAC1B,KAAK,EAAE,QAAQ,CAAC,OAA2B;YAC3C,IAAI,EAAE,MAAK;AACT,gBAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;aACvB;YACD,KAAK,EAAE,MAAK;gBACV,QAAQ,CAAC,KAAK,EAAE,CAAA;aACjB;YACD,UAAU,EAAE,MAAK;gBACf,QAAQ,CAAC,UAAU,EAAE,CAAA;gBACrB,QAAQ,CAAC,EAAE,CAAC,CAAA;gBACZ,oBAAoB,CAAC,EAAE,CAAC,CAAA;gBACxB,YAAY,IAAI,YAAY,EAAE,CAAA;AAC9B,gBAAA,aAAa,IAAI,aAAa,CAAC,EAAE,CAAC,CAAA;aACnC;AACD,YAAA,eAAe,EAAE,CAAC,YAAmC,KAAI;AACvD,gBAAA,mCAAmC,CAAC,OAAO,GAAG,IAAI,CAAA;AAClD,gBAAA,MAAM,aAAa,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;AAChD,gBAAA,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CACpC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,CAC7C,CAAA;gBAED,IAAI,CAAC,YAAY,EAAE;AACjB,oBAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;oBACvB,eAAe,CAAC,EAAE,CAAC,CAAA;AACnB,oBAAA,oBAAoB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AACzC,oBAAA,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAC7B,oBAAA,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;iBACrC;qBAAM;AACL,oBAAA,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAC7B,oBAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;iBACxB;aACF;SACF,CAAA;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,SAAS,CAAC,MAAK;AACb,QAAA,WAAW,IAAI,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;KAC7D,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CACxC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,eAAe,CACzC,CAAA;IAED,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AAElD,QAAA,QAAQ,CAAC,OAAO;AACd,YAAA,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;YAC3B,CAAC,QAAQ,CAAC,IAAI;AACd,YAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;KACzB,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7B,IAAA,MAAM,YAAY,IAChB,oBAAC,QAAQ,CAAC,YAAY,EACpB,EAAA,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE;AAC9C,YAAA,4BAA4B,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC;AACtD,SAAA,CAAC,EACF,GAAG,EAAE,EAAE,GAAG,eAAe,EAAA;AAExB,QAAA,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,QAAQ,CAAC,KAAK,EAAC,EAAA,SAAS,EAAC,yBAAyB,EAChD,EAAA,KAAK,CACS,CAClB;QACD,KAAC,CAAA,aAAA,CAAA,QAAQ,CAAC,OAAO,EAAA,EACf,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE;gBAChC,yBAAyB,EAAE,MAAM,KAAK,OAAO;gBAC7C,2BAA2B,EAAE,MAAM,KAAK,SAAS;AACjD,gBAAA,4BAA4B,EAAE,IAAI;AAClC,gBAAA,6BAA6B,EAC3B,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;aACxD,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,QAAQ,CAAC,KAAK,EACb,EAAA,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,iBAAiB,EAC3B,GAAA,UAAU,EACd,SAAS,EAAE,CAAC,CAAC,KAAI;AACf,oBAAA,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CAAA;AACzB,oBAAA,IACE,YAAY;wBACZ,CAAC,CAAC,OAAO,KAAK,cAAc;wBAC5B,QAAQ,CAAC,eAAe,EACxB;AACA,wBAAA,MAAM,gBAAgB,GAAG,YAAY,CACnC,QAAQ,CAAC,eAAmC,EAC5C,QAAQ,CAAC,UAAU,CACpB,CAAA;wBAED,IAAI,CAAC,gBAAgB,EAAE;4BACrB,CAAC,CAAC,cAAc,EAAE,CAAA;4BAClB,CAAC,CAAC,eAAe,EAAE,CAAA;yBACpB;qBACF;AACH,iBAAC,EACD,CAAA;AACD,YAAA,IAAI,KACH,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,wBAAwB,GAClC,CACH;YACA,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,KAC5B,KAAA,CAAA,aAAA,CAAC,QAAQ,CAAC,YAAY,EACpB,EAAA,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAK;oBACZ,oBAAoB,CAAC,EAAE,CAAC,CAAA;oBACxB,QAAQ,CAAC,EAAE,CAAC,CAAA;AACZ,oBAAA,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;AACpC,oBAAA,cAAc,KAAK,CAAC;wBAClB,UAAU,CAAC,MAAK;;AACd,4BAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAA;yBAC1B,EAAE,CAAC,CAAC,CAAA;oBACP,YAAY,IAAI,YAAY,EAAE,CAAA;AAC9B,oBAAA,aAAa,IAAI,aAAa,CAAC,EAAE,CAAC,CAAA;iBACnC,EAAA;AAED,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,CACX,CACzB,CACgB;AACnB,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,YAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,CAAC,UAAU,EAAC,EAAA,SAAS,EAAC,iCAAiC,EAAA;gBAC9D,KAAC,CAAA,aAAA,CAAA,QAAQ,CAAC,OAAO,EACf,EAAA,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,gBAAgB,EAAE;AAC9D,wBAAA,qCAAqC,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC;AAC/D,qBAAA,CAAC,IAED,UAAU,CAAC,GAAG,CAAC,CAAC,IAAsB,EAAE,KAAa,MACpD,KAAA,CAAA,aAAA,CAAC,QAAQ,CAAC,IAAI,IACZ,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EAEpC,EAAA,UAAU,IACT,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAE,CAAC,CAAC,KAAI;wBACb,IAAI,YAAY,EAAE;AAChB,4BAAA,MAAM,gBAAgB,GAAG,YAAY,CACnC,QAAQ,CAAC,eAAmC,EAC5C,QAAQ,CAAC,UAAU,CACpB,CAAA;4BAED,IAAI,CAAC,gBAAgB,EAAE;gCACrB,CAAC,CAAC,cAAc,EAAE,CAAA;gCAClB,CAAC,CAAC,eAAe,EAAE,CAAA;6BACpB;yBACF;qBACF,EAAA,EAEA,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,UAAU,CAAC,CAClC,KAEN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE;wBACjD,6CAA6C,EAC3C,IAAI,CAAC,QAAQ;qBAChB,CAAC,EAAA;AAED,oBAAA,IAAI,KACH,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA;wBAC9C,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,EAAG,CAAA,CAChC,CACR;oBACD,KAAC,CAAA,aAAA,CAAA,QAAQ,CAAC,QAAQ,EAAC,EAAA,SAAS,EAAC,iCAAiC,EAC3D,EAAA,IAAI,CAAC,KAAK,CACO;AACpB,oBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,CAAC,aAAa,EAAC,EAAA,SAAS,EAAC,6CAA6C,EAAA;AAC7E,wBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,IAAI,EAAE,EAAE,GAAI,CACA,CACrB,CACP,CACa,CACjB,CAAC,CACe,CACC,CACf,CACa,CACzB,CAAA;AAED,IAAA,OAAO,KAAK,IAAI,IAAI,IAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE;AAChC,YAAA,4BAA4B,EAAE,IAAI;AAClC,YAAA,6BAA6B,EAAE,SAAS;SACzC,CAAC,EAAA;QAED,YAAY;AACZ,QAAA,IAAI,KACH,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,MAAM,EAAE,MAAM,EAAA;YAClB,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAC9C,CACR,CACG,KAEN,0CAAG,YAAY,CAAI,CACpB,CAAA;AACH,CAAC,EACF;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, {\n useEffect,\n useRef,\n useMemo,\n useImperativeHandle,\n forwardRef,\n} from \"react\"\nimport { useState } from \"react\"\nimport cx from \"classnames\"\n\nimport { CheckIcon, Icon, IconSources } from \"../../Icon\"\n\nimport { FormElement } from \"../form\"\nimport {\n Combobox,\n createListCollection,\n Portal,\n useCombobox,\n} from \"@ark-ui/react\"\nimport { Hint } from \"../Hint\"\nimport { nanoid } from \"nanoid\"\n\nexport type AutocompleteItemInput =\n \| string\n \| {\n [x: string]: any\n icon?: IconSources\n label?: string\n value: string\n disabled?: boolean\n }\n\nexport type AutocompleteItem = {\n [x: string]: any\n icon?: IconSources\n label: string\n value: string\n disabled?: boolean\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 return (\n <>\n {label.split(queryRX).map((part, i) =>\n part.match(queryRX) ? (\n <span className={cx(matchClassName)} key={i}>\n {part}\n </span>\n ) : (\n part\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\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 details.items[0] &&\n onSelectItem &&\n onSelectItem(\n details.items[0] as AutocompleteItem,\n combobox.inputValue\n )\n },\n onInteractOutside: () => {\n setTimeout(() => inputRef.current?.blur(), 30)\n },\n positioning: {\n gutter: -3,\n flip: false,\n },\n })\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 && onClearValue()\n onQueryChange && 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])\n\n useEffect(() => {\n focusOnInit && combobox.setOpen(collection.items.length > 0)\n }, [])\n\n const validItems = collection.items.filter(\n (item) => item.value !== ignoreItemValue\n )\n\n useEffect(() => {\n validItems.length === 0 && combobox.setOpen(false)\n\n combobox.focused &&\n collection.items.length > 0 &&\n !combobox.open &&\n combobox.setOpen(true)\n }, [collection.items.length])\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 && 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=\"accent\"\n className=\"cobalt-TextField__Icon\"\n />\n )}\n {value.length > 0 && !disabled && (\n <Combobox.ClearTrigger\n className=\"cobalt-Autocomplete__clear-button\"\n role=\"clear\"\n onClick={() => {\n setDefaultInputValue(\"\")\n setValue(\"\")\n setAutocompleteKey(!autocompleteKey)\n minQueryLength === 0 &&\n setTimeout(() => {\n inputRef.current?.click()\n }, 0)\n onClearValue && onClearValue()\n onQueryChange && 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={index}\n item={item}\n className=\"cobalt-Autocomplete__item\"\n >\n {renderItem ? (\n <div\n onClick={(e) => {\n if (onSelectItem) {\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 {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=\"accent\" />\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 <span dangerouslySetInnerHTML={{ __html: hint }} />\n </Hint>\n )}\n </div>\n ) : (\n <>{autocomplete}</>\n )\n }\n)\n\nAutocomplete.displayName = \"Autocomplete\"\n\nexport { Autocomplete }\n"],"names":[],"mappings":"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"}

package/components/Modal/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ import ModalFooter from './ModalFooter.js';
 // Only for the API, render nothing, we use ModalFooterInternal internally
 const ModalFooterAPI = (_props) => null;
 const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
-const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-label"]: ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
+const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-label"]: ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, unmountOnHidden = true, }, ref) => {
     useEffect(() => {
         isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
     }, [onShow, isOpen]);
@@ -15,28 +15,28 @@ const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-la
     const hasFooter = isValidElement(modalFooter);
     return (React.createElement(Dialog.Root, { "aria-label": ariaLabel, open: isOpen, onOpenChange: (e) => {
             e.open ? onShow === null || onShow === void 0 ? void 0 : onShow() : close === null || close === void 0 ? void 0 : close();
-        }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true },
+        }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true, unmountOnExit: unmountOnHidden },
         React.createElement(Portal, null,
             React.createElement(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
                     "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
                     "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
-                }) }),
-            React.createElement(Dialog.Positioner, { className: cx("cobalt-modal", {
-                    "cobalt-modal--overflowHidden": overflowHidden,
-                    "cobalt-modal--fullHeight": fullHeight,
-                    "cobalt-modal--fullWidth": fullWidth,
-                }), ref: ref },
-                React.createElement(Dialog.Content, { className: cx("cobalt-modal__content", className, {
-                        "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
-                        "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
-                    }) },
-                    React.createElement(ModalHeader, { title: title, close: close }),
-                    React.createElement(Dialog.Description, { className: "cobalt-modal-body__wrapper" },
-                        React.createElement("div", { className: cx("cobalt-modal-body", {
-                                "cobalt-modal-body--bodySpacing": bodySpacing,
-                                "cobalt-modal-body--hasFooter": hasFooter,
-                            }) }, children),
-                        hasFooter && React.createElement(ModalFooter, { ...modalFooter.props })))))));
+                }) },
+                React.createElement(Dialog.Positioner, { className: cx("cobalt-modal", {
+                        "cobalt-modal--overflowHidden": overflowHidden,
+                        "cobalt-modal--fullHeight": fullHeight,
+                        "cobalt-modal--fullWidth": fullWidth,
+                    }), ref: ref },
+                    React.createElement(Dialog.Content, { className: cx("cobalt-modal__content", className, {
+                            "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
+                            "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
+                        }) },
+                        React.createElement(ModalHeader, { title: title, close: close }),
+                        React.createElement(Dialog.Description, { className: "cobalt-modal-body__wrapper" },
+                            React.createElement("div", { className: cx("cobalt-modal-body", {
+                                    "cobalt-modal-body--bodySpacing": bodySpacing,
+                                    "cobalt-modal-body--hasFooter": hasFooter,
+                                }) }, children),
+                            hasFooter && React.createElement(ModalFooter, { ...modalFooter.props }))))))));
 });
 Modal.displayName = "Modal";
 var Modal$1 = Object.assign(Modal, { Footer: ModalFooterAPI });

package/components/Modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { isValidElement, useEffect, forwardRef } from \"react\"\nimport { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\n\nimport ModalHeader from \"./ModalHeader\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\n\nexport type ModalPropsType = {\n /*\n mandatory for A11y\n /\n [\"aria-label\"]: string\n /\n Function called to close the modal, providing it make the modal closeable\n /\n close?: () => void\n /\n React.ref of the element to focus first when the modal opens\n /\n initialFocusRef?: React.RefObject<HTMLElement>\n /\n State to show or hide the modal/dialog\n /\n isOpen: boolean\n /\n Custom css classes to add to the modal\n /\n className?: string\n /\n Action to fire if the user try to dismiss when the modal is not closeable\n /\n onDismissAttempt?: () => void\n /\n Listener called when the modal has been fully hidden\n /\n onHidden?: () => void\n /\n Listener called when the modal begins to show\n /\n onShow?: () => void\n /\n Modal title\n /\n title?: string\n /\n Disable/Enable body paddings (enabled by default)\n /\n bodySpacing?: boolean\n /\n Disable/Enable hidding overflowing absolute elements (enabled by default)\n /\n overflowHidden?: boolean\n /\n Disable enter/leave animation (animation enabled by default)\n /\n skipAnimation?: {\n enter: boolean\n leave: boolean\n }\n /\n Disable modal max-width limit\n /\n fullWidth?: boolean\n /\n Always take the full height of the screen\n /\n fullHeight?: boolean\n /\n Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n isOpen,\n close,\n className,\n initialFocusRef,\n [\"aria-label\"]: ariaLabel,\n title,\n children,\n overflowHidden = true,\n bodySpacing = true,\n fullWidth,\n fullHeight,\n onHidden,\n onShow,\n skipAnimation,\n onDismissAttempt,\n }: ModalPropsType,\n ref\n ) => {\n useEffect(() => {\n isOpen && onShow?.()\n }, [onShow, isOpen])\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c)\n )\n const hasFooter = isValidElement(modalFooter)\n\n return (\n <Dialog.Root\n aria-label={ariaLabel}\n open={isOpen}\n onOpenChange={(e) => {\n e.open ? onShow?.() : close?.()\n }}\n onExitComplete={onHidden}\n initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n onPointerDownOutside={close ? undefined : onDismissAttempt}\n lazyMount\n >\n <Portal>\n <Dialog.Backdrop\n className={cx(\"cobalt-modal__overlay\", {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n ~~/>\~~n <Dialog.Positioner\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--overflowHidden\": overflowHidden,\n \"cobalt-modal--fullHeight\": fullHeight,\n \"cobalt-modal--fullWidth\": fullWidth,\n })}\n ref={ref}\n >\n <Dialog.Content\n className={cx(\"cobalt-modal__content\", className, {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <ModalHeader title={title} close={close} />\n <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n <div\n className={cx(\"cobalt-modal-body\", {\n \"cobalt-modal-body--bodySpacing\": bodySpacing,\n \"cobalt-modal-body--hasFooter\": hasFooter,\n })}\n >\n {children}\n </div>\n {hasFooter && <ModalFooter {...modalFooter.props} />}\n </Dialog.Description>\n </Dialog.Content>\n </Dialog.Positioner>\n </Portal>\n </Dialog.Root>\n )\n }\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n"],"names":[],"mappings":";;;;;;~~AAyEA~~;AACa,MAAA,cAAc,GAAG,CAAC,MAA4B,KAAK,KAAI;MAEvD,yBAAyB,GAAG,CACvC,SAA0B,KAE1B,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,IAAI,KAAK,eAAc;AAEtE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EACE,MAAM,EACN,KAAK,EACL,SAAS,EACT,eAAe,EACf,CAAC,YAAY,GAAG,SAAS,EACzB,KAAK,EACL,QAAQ,EACR,cAAc,GAAG,IAAI,EACrB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,gBAAgB,~~GACD~~,EACjB,GAAG,KACD;IACF,SAAS,CAAC,MAAK;QACb,MAAM,KAAI,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,EAAI,CAAA,CAAA;AACtB,KAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAEpB,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAC1D,yBAAyB,CAAC,CAAC,CAAC,CAC7B,CAAA;AACD,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE7C,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,IAAI,kBACE,SAAS,EACrB,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,CAAC,CAAC,KAAI;YAClB,CAAC,CAAC,IAAI,GAAG,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,MAAM,EAAI,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,EAAI,CAAA;AACjC,SAAC,EACD,cAAc,EAAE,QAAQ,EACxB,cAAc,EAAE,eAAe,KAAK,MAAM,eAAe,CAAC,OAAO,CAAC,EAClE,oBAAoB,EAAE,KAAK,GAAG,SAAS,GAAG,gBAAgB,EAC1D,SAAS,~~EAAA~~,IAAA,EAAA;~~AAET~~,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;YACL,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,QAAQ,EAAA,EACd,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;AACrC,oBAAA,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;AAC1D,oBAAA,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;~~AAC3D~~,~~iBAAA,~~CAAC,~~EACF,CAAA~~;~~YACF~~,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,UAAU,EAAA,EAChB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE;AAC5B,~~oBAAA~~,8BAA8B,EAAE,cAAc;AAC9C,~~oBAAA~~,0BAA0B,EAAE,UAAU;AACtC,~~oBAAA~~,yBAAyB,EAAE,SAAS;~~iBACrC~~,CAAC,EACF,GAAG,EAAE,GAAG,EAAA;~~gBAER~~,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,OAAO,EACb,EAAA,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,~~wBAAA~~,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;AAC1D,~~wBAAA~~,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;~~qBAC3D~~,CAAC,EAAA;~~oBAEF~~,KAAC,CAAA,aAAA,CAAA,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAI,CAAA;AAC3C,~~oBAAA~~,KAAA,CAAA,aAAA,CAAC,MAAM,CAAC,WAAW,EAAC,EAAA,SAAS,EAAC,4BAA4B,EAAA;AACxD,~~wBAAA~~,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE;AACjC,~~gCAAA~~,gCAAgC,EAAE,WAAW;AAC7C,~~gCAAA~~,8BAA8B,EAAE,SAAS;~~6BAC1C~~,CAAC,EAAA,EAED,QAAQ,CACL;AACL,~~wBAAA~~,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,GAAK,WAAW,CAAC,KAAK,EAAI,CAAA,CACjC,CACN,CACC,~~CACb~~,CACG,EACf;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,cAAe,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { isValidElement, useEffect, forwardRef } from \"react\"\nimport { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\n\nimport ModalHeader from \"./ModalHeader\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\n\nexport type ModalPropsType = {\n /*\n mandatory for A11y\n /\n [\"aria-label\"]: string\n /\n Function called to close the modal, providing it make the modal closeable\n /\n close?: () => void\n /\n React.ref of the element to focus first when the modal opens\n /\n initialFocusRef?: React.RefObject<HTMLElement>\n /\n State to show or hide the modal/dialog\n /\n isOpen: boolean\n /\n Custom css classes to add to the modal\n /\n className?: string\n /\n Action to fire if the user try to dismiss when the modal is not closeable\n /\n onDismissAttempt?: () => void\n /\n Listener called when the modal has been fully hidden\n /\n onHidden?: () => void\n /\n Listener called when the modal begins to show\n /\n onShow?: () => void\n /\n Modal title\n /\n title?: string\n /\n Disable/Enable body paddings (enabled by default)\n /\n bodySpacing?: boolean\n /\n Disable/Enable hidding overflowing absolute elements (enabled by default)\n /\n overflowHidden?: boolean\n /\n Disable enter/leave animation (animation enabled by default)\n /\n skipAnimation?: {\n enter: boolean\n leave: boolean\n }\n /\n Disable modal max-width limit\n /\n fullWidth?: boolean\n /\n Always take the full height of the screen\n /\n fullHeight?: boolean\n /\n Remove the modal from the DOM on hidden (enabled by default)\n /\n unmountOnHidden?: boolean\n /\n Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n isOpen,\n close,\n className,\n initialFocusRef,\n [\"aria-label\"]: ariaLabel,\n title,\n children,\n overflowHidden = true,\n bodySpacing = true,\n fullWidth,\n fullHeight,\n onHidden,\n onShow,\n skipAnimation,\n onDismissAttempt,\n unmountOnHidden = true,\n }: ModalPropsType,\n ref\n ) => {\n useEffect(() => {\n isOpen && onShow?.()\n }, [onShow, isOpen])\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c)\n )\n const hasFooter = isValidElement(modalFooter)\n\n return (\n <Dialog.Root\n aria-label={ariaLabel}\n open={isOpen}\n onOpenChange={(e) => {\n e.open ? onShow?.() : close?.()\n }}\n onExitComplete={onHidden}\n initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n onPointerDownOutside={close ? undefined : onDismissAttempt}\n lazyMount\n unmountOnExit={unmountOnHidden}\n >\n <Portal>\n <Dialog.Backdrop\n className={cx(\"cobalt-modal__overlay\", {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <Dialog.Positioner\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--overflowHidden\": overflowHidden,\n \"cobalt-modal--fullHeight\": fullHeight,\n \"cobalt-modal--fullWidth\": fullWidth,\n })}\n ref={ref}\n >\n <Dialog.Content\n className={cx(\"cobalt-modal__content\", className, {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <ModalHeader title={title} close={close} />\n <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n <div\n className={cx(\"cobalt-modal-body\", {\n \"cobalt-modal-body--bodySpacing\": bodySpacing,\n \"cobalt-modal-body--hasFooter\": hasFooter,\n })}\n >\n {children}\n </div>\n {hasFooter && <ModalFooter {...modalFooter.props} />}\n </Dialog.Description>\n </Dialog.Content>\n </Dialog.Positioner>\n </Dialog.Backdrop>\n </Portal>\n </Dialog.Root>\n )\n }\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -19,7 +19,7 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@ark-ui/react": "4.8.1",
+    "@ark-ui/react": "4.9.1",
     "@juggle/resize-observer": "3.4.0",
     "@lottiefiles/react-lottie-player": "3.5.4",
     "@react-spring/web": "9.7.5",

package/styles/components/Modal/index.scss CHANGED Viewed

@@ -32,8 +32,14 @@
     }
   }
-  .cobalt-modal__content {
+  .cobalt-modal__content:not([hidden]) {
     @apply c-bg-secondary;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
     max-height: calc(100% - 2 * var(--dialog-margin-top));
     width: 80vw;
@@ -130,5 +136,12 @@
         @apply c-pb-sm;
       }
     }
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+    }
   }
 }

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

@@ -48,5 +48,5 @@ declare const Autocomplete: React.ForwardRefExoticComponent<{
     onSelectItem?: ((item: AutocompleteItem, term: string) => boolean) | undefined;
     renderItem?: ((item: AutocompleteItem, term: string) => React.ReactNode) | undefined;
     allowCustomValue?: boolean | undefined;
-} & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id"> & React.RefAttributes<unknown>>;
+} & FormElement & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<unknown>>;
 export { Autocomplete };

package/types/src/components/Modal/index.d.ts CHANGED Viewed

@@ -60,6 +60,10 @@ export type ModalPropsType = {
      * Always take the full height of the screen
      */
     fullHeight?: boolean;
+    /**
+     * Remove the modal from the DOM on hidden (enabled by default)
+     */
+    unmountOnHidden?: boolean;
     /**
      * Modal body content
      */