npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.71 → 1.0.0-alpha.73 - Mend

@salt-ds/lab 1.0.0-alpha.71 → 1.0.0-alpha.73

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 (668) hide show

package/dist-es/tabs-next/TabNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type MouseEvent,\n type ReactElement,\n ~~forwardRef,\n~~ useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n If `true`, the tab will be disabled.\n /\n disabled?: boolean;\n /\n The value of the tab.\n */\n value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n function Tab(props, ref): ReactElement<TabNextProps> {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n children,\n className,\n disabled: disabledProp,\n onBlur,\n onMouseDown,\n onFocus,\n onFocusCapture,\n value,\n id: idProp,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next\",\n css: tabCss,\n window: targetWindow,\n });\n\n const { selected, activeTab } = useTabsNext();\n\n const disabled = !!disabledProp;\n\n const id = useId(idProp);\n\n const wasMouseDown = useRef(false);\n const [focusVisible, setFocusVisible] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n onFocusCapture?.(event);\n if (value && id) {\n activeTab.current = { value, id };\n }\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n onFocus?.(event);\n\n setFocused(true);\n\n if (\n !wasMouseDown.current &&\n event.target.getAttribute(\"role\") === \"tab\"\n ) {\n setFocusVisible(true);\n }\n\n wasMouseDown.current = false;\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n setFocused(false);\n setFocusVisible(false);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(event);\n wasMouseDown.current = true;\n };\n\n const [actions, setActions] = useState<string[]>([]);\n\n const registerAction = useCallback((id: string) => {\n setActions((old) => old.concat(id));\n\n return () => {\n setActions((old) => old.filter((action) => action !== id));\n };\n }, []);\n\n const context = useMemo(\n () => ({\n tabId: id,\n selected: selected === value,\n focused,\n value,\n disabled,\n actions,\n registerAction,\n }),\n [id, selected, value, focused, disabled, actions, registerAction],\n );\n\n return (\n <TabNextContext.Provider value={context}>\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"selected\")]: selected === value,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"focusVisible\")]: focusVisible,\n },\n className,\n )}\n data-overflowitem=\"true\"\n ref={ref}\n onMouseDown={handleMouseDown}\n onFocusCapture={handleFocusCapture}\n onFocus={handleFocus}\n onBlur={handleBlur}\n role=\"presentation\"\n {...rest}\n >\n {children}\n </div>\n </TabNextContext.Provider>\n );\n },\n);\n"],"names":["tabCss","id"],"mappings":"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"}
1	+ {"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type MouseEvent,\n type ReactElement,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n If `true`, the tab will be disabled.\n /\n disabled?: boolean;\n /\n The value of the tab.\n */\n value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n function Tab(props, ref): ReactElement<TabNextProps> {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n children,\n className,\n disabled: disabledProp,\n onBlur,\n onMouseDown,\n onFocus,\n onFocusCapture,\n value,\n id: idProp,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next\",\n css: tabCss,\n window: targetWindow,\n });\n\n const { selected, activeTab } = useTabsNext();\n\n const disabled = !!disabledProp;\n\n const id = useId(idProp);\n\n const wasMouseDown = useRef(false);\n const [focusVisible, setFocusVisible] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n onFocusCapture?.(event);\n if (value && id) {\n activeTab.current = { value, id };\n }\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n onFocus?.(event);\n\n setFocused(true);\n\n if (\n !wasMouseDown.current &&\n event.target.getAttribute(\"role\") === \"tab\"\n ) {\n setFocusVisible(true);\n }\n\n wasMouseDown.current = false;\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n setFocused(false);\n setFocusVisible(false);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(event);\n wasMouseDown.current = true;\n };\n\n const [actions, setActions] = useState<string[]>([]);\n\n const registerAction = useCallback((id: string) => {\n setActions((old) => old.concat(id));\n\n return () => {\n setActions((old) => old.filter((action) => action !== id));\n };\n }, []);\n\n const context = useMemo(\n () => ({\n tabId: id,\n selected: selected === value,\n focused,\n value,\n disabled,\n actions,\n registerAction,\n }),\n [id, selected, value, focused, disabled, actions, registerAction],\n );\n\n return (\n <TabNextContext.Provider value={context}>\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"selected\")]: selected === value,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"focusVisible\")]: focusVisible,\n },\n className,\n )}\n data-overflowitem=\"true\"\n ref={ref}\n onMouseDown={handleMouseDown}\n onFocusCapture={handleFocusCapture}\n onFocus={handleFocus}\n onBlur={handleBlur}\n role=\"presentation\"\n {...rest}\n >\n {children}\n </div>\n </TabNextContext.Provider>\n );\n },\n);\n"],"names":["tabCss","id"],"mappings":"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"}

package/dist-es/tabs-next/TabNextTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNextTrigger.js","sources":["../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type MouseEvent,\n ~~forwardRef,\n~~ useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n extends ComponentPropsWithoutRef<\"button\"> {}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n if (count < 1) {\n return undefined;\n }\n\n if (count === 1) {\n return \"1 action available\";\n }\n\n return `${count} actions available`;\n}\n\nexport const TabNextTrigger = forwardRef<\n HTMLButtonElement,\n TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n const { children, id: idProp, onClick, onKeyDown, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next-trigger\",\n css: tabTriggerCss,\n window: targetWindow,\n });\n\n const { setSelected, registerTab, getPanelId } = useTabsNext();\n const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n const tabRef = useRef<HTMLButtonElement>(null);\n\n const id = tabId;\n\n useIsomorphicLayoutEffect(() => {\n if (value && id && tabRef.current) {\n return registerTab({ id, value, element: tabRef.current });\n }\n }, [value, id, registerTab]);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n setSelected(event, value);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n setSelected(event, value);\n }\n };\n\n const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n const panelId = getPanelId(value);\n\n return (\n // biome-ignore lint/a11y/useValidAriaProps: aria-actions is a draft spec https://pr-preview.s3.amazonaws.com/w3c/aria/pull/1805.html#aria-actions\n <button\n aria-selected={selected}\n aria-disabled={disabled}\n aria-controls={panelId}\n aria-actions={clsx(actions) \|\| undefined}\n aria-description={getAriaDescription(actions.length)}\n tabIndex={focused \|\| selected ? undefined : -1}\n role=\"tab\"\n type=\"button\"\n onClick={!disabled ? handleClick : undefined}\n onKeyDown={!disabled ? handleKeyDown : undefined}\n className={withBaseName()}\n id={id}\n ref={handleRef}\n {...rest}\n >\n {children}\n </button>\n );\n});\n"],"names":["TabNextTrigger","tabTriggerCss"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEtD,SAAS,mBAAmB,KAAe,EAAA;AACzC,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAO,OAAA,MAAA;AAAA;AAGT,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,oBAAA;AAAA;AAGT,EAAA,OAAO,GAAG,KAAK,CAAA,kBAAA,CAAA;AACjB;AAEO,MAAM,cAAiB,GAAA,UAAA,CAG5B,SAASA,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAe,WAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAY,UAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,KAAA,IAAS,EAAM,IAAA,MAAA,CAAO,OAAS,EAAA;AACjC,MAAA,OAAO,YAAY,EAAE,EAAA,EAAI,OAAO,OAAS,EAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAC3D,GACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,WAAW,CAAC,CAAA;AAE3B,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4C,KAAA;AACjE,IAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAEZ,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,SAAA,GAAY,UAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EAAA;AAAA;AAAA,oBAEE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,eAAe,EAAA,QAAA;AAAA,QACf,eAAe,EAAA,QAAA;AAAA,QACf,eAAe,EAAA,OAAA;AAAA,QACf,cAAA,EAAc,IAAK,CAAA,OAAO,CAAK,IAAA,MAAA;AAAA,QAC/B,kBAAA,EAAkB,kBAAmB,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,QACnD,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,MAAY,GAAA,EAAA;AAAA,QAC5C,IAAK,EAAA,KAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACL,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,MAAA;AAAA,QACnC,SAAA,EAAW,CAAC,QAAA,GAAW,aAAgB,GAAA,MAAA;AAAA,QACvC,WAAW,YAAa,EAAA;AAAA,QACxB,EAAA;AAAA,QACA,GAAK,EAAA,SAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA;AACH;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"TabNextTrigger.js","sources":["../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n extends ComponentPropsWithoutRef<\"button\"> {}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n if (count < 1) {\n return undefined;\n }\n\n if (count === 1) {\n return \"1 action available\";\n }\n\n return `${count} actions available`;\n}\n\nexport const TabNextTrigger = forwardRef<\n HTMLButtonElement,\n TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n const { children, id: idProp, onClick, onKeyDown, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next-trigger\",\n css: tabTriggerCss,\n window: targetWindow,\n });\n\n const { setSelected, registerTab, getPanelId } = useTabsNext();\n const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n const tabRef = useRef<HTMLButtonElement>(null);\n\n const id = tabId;\n\n useIsomorphicLayoutEffect(() => {\n if (value && id && tabRef.current) {\n return registerTab({ id, value, element: tabRef.current });\n }\n }, [value, id, registerTab]);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n setSelected(event, value);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n setSelected(event, value);\n }\n };\n\n const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n const panelId = getPanelId(value);\n\n return (\n // biome-ignore lint/a11y/useValidAriaProps: aria-actions is a draft spec https://pr-preview.s3.amazonaws.com/w3c/aria/pull/1805.html#aria-actions\n <button\n aria-selected={selected}\n aria-disabled={disabled}\n aria-controls={panelId}\n aria-actions={clsx(actions) \|\| undefined}\n aria-description={getAriaDescription(actions.length)}\n tabIndex={focused \|\| selected ? undefined : -1}\n role=\"tab\"\n type=\"button\"\n onClick={!disabled ? handleClick : undefined}\n onKeyDown={!disabled ? handleKeyDown : undefined}\n className={withBaseName()}\n id={id}\n ref={handleRef}\n {...rest}\n >\n {children}\n </button>\n );\n});\n"],"names":["TabNextTrigger","tabTriggerCss"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEtD,SAAS,mBAAmB,KAAe,EAAA;AACzC,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAO,OAAA,MAAA;AAAA;AAGT,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,oBAAA;AAAA;AAGT,EAAA,OAAO,GAAG,KAAK,CAAA,kBAAA,CAAA;AACjB;AAEO,MAAM,cAAiB,GAAA,UAAA,CAG5B,SAASA,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAe,WAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAY,UAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,KAAA,IAAS,EAAM,IAAA,MAAA,CAAO,OAAS,EAAA;AACjC,MAAA,OAAO,YAAY,EAAE,EAAA,EAAI,OAAO,OAAS,EAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAC3D,GACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,WAAW,CAAC,CAAA;AAE3B,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4C,KAAA;AACjE,IAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAEZ,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,SAAA,GAAY,UAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EAAA;AAAA;AAAA,oBAEE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,eAAe,EAAA,QAAA;AAAA,QACf,eAAe,EAAA,QAAA;AAAA,QACf,eAAe,EAAA,OAAA;AAAA,QACf,cAAA,EAAc,IAAK,CAAA,OAAO,CAAK,IAAA,MAAA;AAAA,QAC/B,kBAAA,EAAkB,kBAAmB,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,QACnD,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,MAAY,GAAA,EAAA;AAAA,QAC5C,IAAK,EAAA,KAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACL,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,MAAA;AAAA,QACnC,SAAA,EAAW,CAAC,QAAA,GAAW,aAAgB,GAAA,MAAA;AAAA,QACvC,WAAW,YAAa,EAAA;AAAA,QACxB,EAAA;AAAA,QACA,GAAK,EAAA,SAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA;AACH;AAEJ,CAAC;;;;"}

package/dist-es/tabs-next/TabOverflowList.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n  /* Avoid causing page to overflow with the hidden elements */\n  width: 1px;\n  height: 1px;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
+var css_248z = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n  /* Avoid causing page to overflow with the hidden elements */\n  width: 1px;\n  height: 1px;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=TabOverflowList.css.js.map

package/dist-es/tabs-next/TabOverflowList.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { makePrefixer, useIcon, useFloatingUI, useForkRef, useId, Button } from
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { forwardRef, useRef, useCallback, Children } from 'react';
-import css_248z from './TabOverflowList.css.js';
 import { useFocusOutside } from './hooks/useFocusOutside.js';
+import css_248z from './TabOverflowList.css.js';
 const withBaseName = makePrefixer("saltTabOverflow");
 const TabOverflowList = forwardRef(

package/dist-es/tabs-next/TabOverflowList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n FloatingTree,\n flip,\n offset,\n size,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n Button,\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIcon,\n useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type Dispatch,\n type ReactNode,\n type Ref,\n type RefObject,\n type SetStateAction,\n ~~forwardRef,\n~~ useCallback,\n useRef,\n} from \"react\";\nimport ~~tabOverflowListCss~~ from \"./~~TabOverflowList.css~~\";\nimport { ~~useFocusOutside }~~ from \"./~~hooks/useFocusOutside~~\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n buttonRef?: Ref<HTMLButtonElement>;\n tabstripRef: RefObject<HTMLDivElement>;\n children?: ReactNode;\n isMeasuring?: boolean;\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n function TabOverflowList(props, ref) {\n const {\n buttonRef,\n tabstripRef,\n children,\n isMeasuring,\n open,\n setOpen,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs-next-overflow-list\",\n css: tabOverflowListCss,\n window: targetWindow,\n });\n\n const { OverflowIcon } = useIcon();\n\n const { refs, x, y, strategy, context } = useFloatingUI({\n open: open,\n onOpenChange(open, _, reason) {\n if (reason === \"escape-key\") {\n queueMicrotask(() => {\n const allTabs =\n tabstripRef.current?.querySelectorAll<HTMLElement>(\n '[role=\"tab\"]:not([aria-hidden])',\n ) ?? [];\n const numberOfTabsInOverflow =\n listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n .length ?? 0;\n\n allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n preventScroll: true,\n });\n });\n }\n\n setOpen(open);\n },\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip(),\n ],\n });\n\n const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const handleRootRef = useForkRef(rootRef, ref);\n const listRef = useRef<HTMLDivElement>(null);\n const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n const handleFocusOutside = useCallback(() => {\n setOpen(false);\n }, [setOpen]);\n\n useFocusOutside(\n rootRef,\n handleFocusOutside,\n open,\n \"[data-floating-ui-portal]\",\n );\n\n const handleClick = () => {\n if (!open) {\n listRef.current\n ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n ?.focus({ preventScroll: true });\n } else {\n setOpen(false);\n }\n };\n\n const handleFocus = () => {\n setOpen(true);\n };\n\n const handleButtonRef = useForkRef<HTMLButtonElement>(\n buttonRef,\n refs.setReference,\n );\n\n const listId = useId();\n\n const childCount = Children.count(children);\n if (childCount === 0 && !isMeasuring) return null;\n\n return (\n <div className={withBaseName()} ref={handleRootRef} data-overflow>\n <Button\n data-overflowbutton\n tabIndex={-1}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleClick}\n ref={handleButtonRef}\n aria-label={`Overflow menu. ${childCount} tabs hidden`}\n aria-expanded={open}\n aria-controls={listId}\n aria-hidden=\"true\"\n role=\"tab\"\n aria-haspopup\n {...rest}\n >\n <OverflowIcon aria-hidden />\n </Button>\n <FloatingTree>\n <div\n ref={handleListRef}\n {...getFloatingProps({\n onFocus: handleFocus,\n role: \"presentation\",\n })}\n className={withBaseName(\"list\")}\n data-hidden={!open}\n style={\n open\n ? { left: x ?? 0, top: y ?? 0, position: strategy }\n : undefined\n }\n id={listId}\n >\n <div className={withBaseName(\"listContainer\")}>{children}</div>\n </div>\n </FloatingTree>\n </div>\n );\n },\n);\n"],"names":["TabOverflowList","tabOverflowListCss","open"],"mappings":"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"}
1	+ {"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n FloatingTree,\n flip,\n offset,\n size,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n Button,\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIcon,\n useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type Dispatch,\n forwardRef,\n type ReactNode,\n type Ref,\n type RefObject,\n type SetStateAction,\n useCallback,\n useRef,\n} from \"react\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n buttonRef?: Ref<HTMLButtonElement>;\n tabstripRef: RefObject<HTMLDivElement>;\n children?: ReactNode;\n isMeasuring?: boolean;\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n function TabOverflowList(props, ref) {\n const {\n buttonRef,\n tabstripRef,\n children,\n isMeasuring,\n open,\n setOpen,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs-next-overflow-list\",\n css: tabOverflowListCss,\n window: targetWindow,\n });\n\n const { OverflowIcon } = useIcon();\n\n const { refs, x, y, strategy, context } = useFloatingUI({\n open: open,\n onOpenChange(open, _, reason) {\n if (reason === \"escape-key\") {\n queueMicrotask(() => {\n const allTabs =\n tabstripRef.current?.querySelectorAll<HTMLElement>(\n '[role=\"tab\"]:not([aria-hidden])',\n ) ?? [];\n const numberOfTabsInOverflow =\n listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n .length ?? 0;\n\n allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n preventScroll: true,\n });\n });\n }\n\n setOpen(open);\n },\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip(),\n ],\n });\n\n const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const handleRootRef = useForkRef(rootRef, ref);\n const listRef = useRef<HTMLDivElement>(null);\n const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n const handleFocusOutside = useCallback(() => {\n setOpen(false);\n }, [setOpen]);\n\n useFocusOutside(\n rootRef,\n handleFocusOutside,\n open,\n \"[data-floating-ui-portal]\",\n );\n\n const handleClick = () => {\n if (!open) {\n listRef.current\n ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n ?.focus({ preventScroll: true });\n } else {\n setOpen(false);\n }\n };\n\n const handleFocus = () => {\n setOpen(true);\n };\n\n const handleButtonRef = useForkRef<HTMLButtonElement>(\n buttonRef,\n refs.setReference,\n );\n\n const listId = useId();\n\n const childCount = Children.count(children);\n if (childCount === 0 && !isMeasuring) return null;\n\n return (\n <div className={withBaseName()} ref={handleRootRef} data-overflow>\n <Button\n data-overflowbutton\n tabIndex={-1}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleClick}\n ref={handleButtonRef}\n aria-label={`Overflow menu. ${childCount} tabs hidden`}\n aria-expanded={open}\n aria-controls={listId}\n aria-hidden=\"true\"\n role=\"tab\"\n aria-haspopup\n {...rest}\n >\n <OverflowIcon aria-hidden />\n </Button>\n <FloatingTree>\n <div\n ref={handleListRef}\n {...getFloatingProps({\n onFocus: handleFocus,\n role: \"presentation\",\n })}\n className={withBaseName(\"list\")}\n data-hidden={!open}\n style={\n open\n ? { left: x ?? 0, top: y ?? 0, position: strategy }\n : undefined\n }\n id={listId}\n >\n <div className={withBaseName(\"listContainer\")}>{children}</div>\n </div>\n </FloatingTree>\n </div>\n );\n },\n);\n"],"names":["TabOverflowList","tabOverflowListCss","open"],"mappings":"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"}

package/dist-es/tabs-next/TabsNext.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
 import { makePrefixer, useControlled, useEventCallback } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { TabsNextContext } from './TabsNextContext.js';
+import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
 import { useCollection } from './hooks/useCollection.js';
+import { TabsNextContext } from './TabsNextContext.js';
 const withBaseName = makePrefixer("saltTabsNext");
 const TabsNext = forwardRef(

package/dist-es/tabs-next/TabsNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsNext.js","sources":["../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type ReactNode,\n type SyntheticEvent,\n ~~forwardRef,\n~~ useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { ~~makePrefixer,~~ ~~useControlled, useEventCallback~~ } from \"~~@salt-ds~~/~~core~~\";\nimport { ~~clsx } from \"clsx\";\nimport {~~ type Item, TabsNextContext } from \"./TabsNextContext\";\~~nimport { useCollection } from \"./hooks/useCollection\";\~~n\nexport interface TabsNextProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n children?: ReactNode;\n /*\n The default value. Use when the component is not controlled.\n /\n defaultValue?: string;\n /\n The value. Use when the component is controlled.\n /\n value?: string;\n /\n Callback fired when the selection changes. The event will be null when selection is moved automatically.\n */\n onChange?: (event: SyntheticEvent \| null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n function TabsNext(props, ref) {\n const { className, children, value, defaultValue, onChange, ...rest } =\n props;\n\n const [valueToTabIdMap, setValueToIdMap] = useState({\n map: new Map<string, string>(),\n });\n const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n map: new Map<string, string>(),\n });\n\n const {\n registerItem,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n } = useCollection({ wrap: true });\n\n const activeTab = useRef<Pick<Item, \"id\" \| \"value\">>();\n const removedActiveTabRef = useRef<string \| undefined>(undefined);\n\n const [menuOpen, setMenuOpen] = useState(false);\n\n const [selected, setSelectedState] = useControlled({\n controlled: value,\n default: defaultValue,\n name: \"TabListNext\",\n state: \"selected\",\n });\n\n const setSelected = useCallback(\n (event: SyntheticEvent \| null, value: string) => {\n setMenuOpen(false);\n setSelectedState(value);\n onChange?.(event, value);\n },\n [onChange],\n );\n\n const registerTab = useEventCallback((item: Item) => {\n const cleanup = registerItem(item);\n setValueToIdMap(({ map }) => {\n map.set(item.value, item.id);\n return { map };\n });\n\n return () => {\n cleanup();\n setValueToIdMap(({ map }) => {\n map.delete(item.value);\n return { map };\n });\n\n if (activeTab.current?.value !== item.value) {\n return;\n }\n\n removedActiveTabRef.current = item.value;\n };\n });\n\n const registerPanel = useCallback((id: string, value: string) => {\n setValueToPanelIdMap(({ map }) => {\n map.set(value, id);\n return { map };\n });\n return () => {\n setValueToIdMap(({ map }) => {\n map.delete(value);\n return { map };\n });\n };\n }, []);\n\n const getPanelId = useCallback(\n (value: string) => {\n return valueToPanelIdMap.map.get(value);\n },\n [valueToPanelIdMap],\n );\n\n const getTabId = useCallback(\n (value: string) => {\n return valueToTabIdMap.map.get(value);\n },\n [valueToTabIdMap],\n );\n\n const context = useMemo(\n () => ({\n registerTab,\n registerPanel,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n activeTab,\n menuOpen,\n setMenuOpen,\n removedActiveTabRef,\n }),\n [\n registerPanel,\n registerTab,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n menuOpen,\n ],\n );\n\n return (\n <TabsNextContext.Provider value={context}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n </TabsNextContext.Provider>\n );\n },\n);\n"],"names":["TabsNext","value","item"],"mappings":";;;;;;;~~AAiCA~~,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA,EAAE,WAAW,QAAU,EAAA,KAAA,EAAO,cAAc,QAAU,EAAA,GAAG,MAC7D,GAAA,KAAA;AAEF,IAAA,MAAM,CAAC,eAAA,EAAiB,eAAe,CAAA,GAAI,QAAS,CAAA;AAAA,MAClD,GAAA,sBAAS,GAAoB;AAAA,KAC9B,CAAA;AACD,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAS,CAAA;AAAA,MACzD,GAAA,sBAAS,GAAoB;AAAA,KAC9B,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,YAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACE,GAAA,aAAA,CAAc,EAAE,IAAA,EAAM,MAAM,CAAA;AAEhC,IAAA,MAAM,YAAY,MAAmC,EAAA;AACrD,IAAM,MAAA,mBAAA,GAAsB,OAA2B,MAAS,CAAA;AAEhE,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,IAAA,MAAM,CAAC,QAAA,EAAU,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,MACjD,UAAY,EAAA,KAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MACT,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,WAAA;AAAA,MAClB,CAAC,OAA8BC,MAAkB,KAAA;AAC/C,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,gBAAA,CAAiBA,MAAK,CAAA;AACtB,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAOA,EAAAA,MAAAA,CAAAA;AAAA,OACpB;AAAA,MACA,CAAC,QAAQ;AAAA,KACX;AAEA,IAAM,MAAA,WAAA,GAAc,gBAAiB,CAAA,CAACC,KAAe,KAAA;AACnD,MAAM,MAAA,OAAA,GAAU,aAAaA,KAAI,CAAA;AACjC,MAAgB,eAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAC3B,QAAA,GAAA,CAAI,GAAIA,CAAAA,KAAAA,CAAK,KAAOA,EAAAA,KAAAA,CAAK,EAAE,CAAA;AAC3B,QAAA,OAAO,EAAE,GAAI,EAAA;AAAA,OACd,CAAA;AAED,MAAA,OAAO,MAAM;~~AArFnB~~,QAAA,IAAA,EAAA;~~AAsFQ~~,QAAQ,OAAA,EAAA;AACR,QAAgB,eAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAC3B,UAAI,GAAA,CAAA,MAAA,CAAOA,MAAK,KAAK,CAAA;AACrB,UAAA,OAAO,EAAE,GAAI,EAAA;AAAA,SACd,CAAA;AAED,QAAA,IAAA,CAAA,CAAI,EAAU,GAAA,SAAA,CAAA,OAAA,KAAV,IAAmB,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,MAAUA,MAAK,KAAO,EAAA;AAC3C,UAAA;AAAA;AAGF,QAAA,mBAAA,CAAoB,UAAUA,KAAK,CAAA,KAAA;AAAA,OACrC;AAAA,KACD,CAAA;AAED,IAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,CAAC,EAAA,EAAYD,MAAkB,KAAA;AAC/D,MAAqB,oBAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAChC,QAAI,GAAA,CAAA,GAAA,CAAIA,QAAO,EAAE,CAAA;AACjB,QAAA,OAAO,EAAE,GAAI,EAAA;AAAA,OACd,CAAA;AACD,MAAA,OAAO,MAAM;AACX,QAAgB,eAAA,CAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AAC3B,UAAA,GAAA,CAAI,OAAOA,MAAK,CAAA;AAChB,UAAA,OAAO,EAAE,GAAI,EAAA;AAAA,SACd,CAAA;AAAA,OACH;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,UAAa,GAAA,WAAA;AAAA,MACjB,CAACA,MAAkB,KAAA;AACjB,QAAO,OAAA,iBAAA,CAAkB,GAAI,CAAA,GAAA,CAAIA,MAAK,CAAA;AAAA,OACxC;AAAA,MACA,CAAC,iBAAiB;AAAA,KACpB;AAEA,IAAA,MAAM,QAAW,GAAA,WAAA;AAAA,MACf,CAACA,MAAkB,KAAA;AACjB,QAAO,OAAA,eAAA,CAAgB,GAAI,CAAA,GAAA,CAAIA,MAAK,CAAA;AAAA,OACtC;AAAA,MACA,CAAC,eAAe;AAAA,KAClB;AAEA,IAAA,MAAM,OAAU,GAAA,OAAA;AAAA,MACd,OAAO;AAAA,QACL,WAAA;AAAA,QACA,aAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA;AAAA,QACE,aAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,2BACG,eAAgB,CAAA,QAAA,EAAhB,EAAyB,KAAO,EAAA,OAAA,EAC/B,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAG,KAAW,GAAG,IAAA,EAC5D,UACH,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"TabsNext.js","sources":["../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useEventCallback } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useCollection } from \"./hooks/useCollection\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\n\nexport interface TabsNextProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n children?: ReactNode;\n /*\n The default value. Use when the component is not controlled.\n /\n defaultValue?: string;\n /\n The value. Use when the component is controlled.\n /\n value?: string;\n /\n Callback fired when the selection changes. The event will be null when selection is moved automatically.\n */\n onChange?: (event: SyntheticEvent \| null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n function TabsNext(props, ref) {\n const { className, children, value, defaultValue, onChange, ...rest } =\n props;\n\n const [valueToTabIdMap, setValueToIdMap] = useState({\n map: new Map<string, string>(),\n });\n const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n map: new Map<string, string>(),\n });\n\n const {\n registerItem,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n } = useCollection({ wrap: true });\n\n const activeTab = useRef<Pick<Item, \"id\" \| \"value\">>();\n const removedActiveTabRef = useRef<string \| undefined>(undefined);\n\n const [menuOpen, setMenuOpen] = useState(false);\n\n const [selected, setSelectedState] = useControlled({\n controlled: value,\n default: defaultValue,\n name: \"TabListNext\",\n state: \"selected\",\n });\n\n const setSelected = useCallback(\n (event: SyntheticEvent \| null, value: string) => {\n setMenuOpen(false);\n setSelectedState(value);\n onChange?.(event, value);\n },\n [onChange],\n );\n\n const registerTab = useEventCallback((item: Item) => {\n const cleanup = registerItem(item);\n setValueToIdMap(({ map }) => {\n map.set(item.value, item.id);\n return { map };\n });\n\n return () => {\n cleanup();\n setValueToIdMap(({ map }) => {\n map.delete(item.value);\n return { map };\n });\n\n if (activeTab.current?.value !== item.value) {\n return;\n }\n\n removedActiveTabRef.current = item.value;\n };\n });\n\n const registerPanel = useCallback((id: string, value: string) => {\n setValueToPanelIdMap(({ map }) => {\n map.set(value, id);\n return { map };\n });\n return () => {\n setValueToIdMap(({ map }) => {\n map.delete(value);\n return { map };\n });\n };\n }, []);\n\n const getPanelId = useCallback(\n (value: string) => {\n return valueToPanelIdMap.map.get(value);\n },\n [valueToPanelIdMap],\n );\n\n const getTabId = useCallback(\n (value: string) => {\n return valueToTabIdMap.map.get(value);\n },\n [valueToTabIdMap],\n );\n\n const context = useMemo(\n () => ({\n registerTab,\n registerPanel,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n activeTab,\n menuOpen,\n setMenuOpen,\n removedActiveTabRef,\n }),\n [\n registerPanel,\n registerTab,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n menuOpen,\n ],\n );\n\n return (\n <TabsNextContext.Provider value={context}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n </TabsNextContext.Provider>\n );\n },\n);\n"],"names":["TabsNext","value","item"],"mappings":"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"}

package/dist-es/tokenized-input/TokenizedInputBase.js CHANGED Viewed

@@ -7,10 +7,10 @@ import deepmerge from 'deepmerge';
 import { forwardRef, useRef, useState, useCallback } from 'react';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
 import '../input-legacy/StaticInputAdornment.js';
-import { InputPill } from './internal/InputPill.js';
-import { InputRuler } from './internal/InputRuler.js';
 import { calcFirstHiddenIndex } from './internal/calcFirstHiddenIndex.js';
 import { defaultItemToString } from './internal/defaultItemToString.js';
+import { InputPill } from './internal/InputPill.js';
+import { InputRuler } from './internal/InputRuler.js';
 import { useResizeObserver } from './internal/useResizeObserver.js';
 import { useWidth } from './internal/useWidth.js';
 import css_248z from './TokenizedInput.css.js';

package/dist-es/tokenized-input/TokenizedInputBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n makePrefixer,\n useDensity,\n useForkRef,\n useIcon,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n type ChangeEventHandler,\n type FocusEvent,\n type FocusEventHandler,\n type ForwardedRef,\n type HTMLAttributes,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type ReactElement,\n type ReactEventHandler,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport type {\n TokenizedInputHelpers,\n TokenizedInputState,\n} from \"./useTokenizedInput\";\n\nimport tokenizedInputCss from \"./TokenizedInput.css\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n ButtonProps,\n \"role\" \| \"aria-roledescription\" \| \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n extends Partial<TokenizedInputState<Item>>,\n Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onFocus\" \| \"onBlur\" \| \"onChange\" \| \"onKeyUp\" \| \"onKeyDown\"\n > {\n ExpandButtonProps?: ExpandButtonProps;\n InputProps?: Pick<InputProps, \"aria-describedby\" \| \"inputProps\">;\n disabled?: boolean;\n expandButtonRef?: Ref<HTMLButtonElement>;\n helpers: TokenizedInputHelpers<Item>;\n inputRef?: Ref<HTMLInputElement>;\n itemToString?: ItemToString<Item>;\n onFocus?: FocusEventHandler<HTMLInputElement \| HTMLButtonElement>;\n onBlur?: FocusEventHandler<HTMLInputElement \| HTMLButtonElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n // Can key down on either input or expand button\n onKeyDown?: KeyboardEventHandler<HTMLInputElement \| HTMLButtonElement>;\n onRemoveItem?: RemoveItemHandler;\n onInputBlur?: FocusEventHandler<HTMLInputElement>;\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n onInputSelect?: ReactEventHandler<HTMLInputElement>;\n onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n itemCount === 0\n ? \"no item selected\"\n : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nfunction hasHelpers<Item>(helpers: TokenizedInputHelpers<Item>) {\n if (process.env.NODE_ENV !== \"production\") {\n if (helpers == null) {\n console.warn(\n 'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".',\n );\n }\n }\n return helpers != null;\n}\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n props: TokenizedInputBaseProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n InputProps = {},\n ExpandButtonProps = {},\n className,\n activeIndices = [],\n selectedItems = [],\n highlightedIndex,\n value,\n focused,\n expanded,\n disabled,\n helpers,\n onFocus,\n onBlur,\n onKeyUp,\n onKeyDown,\n onRemoveItem,\n onInputChange,\n onInputFocus,\n onInputBlur,\n onInputSelect,\n onClear,\n onClick,\n inputRef,\n itemToString = defaultItemToString,\n id: idProp,\n expandButtonRef: expandButtonRefProp,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tokenized-input\",\n css: tokenizedInputCss,\n window: targetWindow,\n });\n\n const density = useDensity();\n const { OverflowIcon, CloseIcon } = useIcon();\n const id = useId(idProp);\n const inputId = `${id}-input`;\n const expandButtonId = `${id}-expand-button`;\n const clearButtonId = `${id}-clear-button`;\n\n // TODO: Use proper machanism to get variable values from theme in React. Something like below\n // getComputedStyle(document.documentElement)\n // .getPropertyValue('--my-variable-name'); // #999999\n const pillGroupPadding = 16;\n const lastVisiblePillMargin = 4;\n\n const pillsRef = useRef<{ [index: number]: number \| undefined }>({});\n const inputRulerRef = useRef<HTMLSpanElement \| null>(null);\n const keydownExpandButton = useRef(false);\n\n const [expandButtonRef, expandButtonWidth] = useWidth(density);\n const [clearButtonRef, clearButtonWidth] = useWidth(density);\n const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n const [pillGroupWidth, setPillGroupWidth] = useState<number \| null>(null);\n const [firstHiddenIndex, setFirstHiddenIndex] = useState<number \| null>(null);\n\n const showExpandButton = !expanded && firstHiddenIndex != null;\n\n const widthOffset =\n pillGroupPadding +\n INITIAL_INPUT_WIDTH +\n (expanded ? clearButtonWidth : expandButtonWidth);\n\n const containerRef = useResizeObserver<HTMLDivElement>(\n useCallback(\n ([{ contentRect }]) => {\n setPillGroupWidth(contentRect.width - widthOffset);\n },\n [widthOffset],\n ),\n );\n\n useIsomorphicLayoutEffect(\n () => () => {\n // When density changes, set hidden index to null so that pills are in their\n // readonly state before they are measured.\n setFirstHiddenIndex(null);\n },\n [density],\n );\n\n // useLayoutEffect because of potential layout change\n // We want to do that before paint to avoid layout jumps\n useIsomorphicLayoutEffect(\n () => {\n if (expanded) {\n setFirstHiddenIndex(null);\n } else if (pillGroupWidth != null) {\n setFirstHiddenIndex(\n calcFirstHiddenIndex({\n containerWidth: pillGroupWidth,\n pillWidths: Object.values(pillsRef.current).filter(\n Boolean,\n ) as number[],\n }),\n );\n }\n },\n // Additional dependency on selectedItems is for the controlled version\n [expanded, pillGroupWidth, selectedItems],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (expanded && inputRulerRef.current) {\n const newInputWidth = inputRulerRef.current.scrollWidth;\n setInputWidth(Math.min(newInputWidth, pillGroupWidth \|\| 0));\n }\n }, [expanded, pillGroupWidth, value]);\n\n const handleExpandButtonKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n ) => {\n const singleChar = event.key.length === 1;\n const triggerExpand =\n [\n \"CONTROL\",\n \"META\",\n \"ENTER\",\n \"BACKSPACE\",\n \"ARROWDOWN\",\n \"ARROWLEFT\",\n \"ARROWRIGHT\",\n ].indexOf(event.key.toUpperCase()) !== -1;\n\n if ((singleChar \|\| triggerExpand) && hasHelpers(helpers)) {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n event.stopPropagation();\n }\n helpers.updateExpanded(true);\n keydownExpandButton.current = true;\n }\n };\n\n const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n // Call keydown again if the initail event has been used to expand the input\n if (keydownExpandButton.current && \"Enter\" !== event.key) {\n keydownExpandButton.current = false;\n\n if (onKeyDown) {\n onKeyDown(event);\n }\n }\n\n if (onKeyUp) {\n onKeyUp(event);\n }\n };\n\n const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n if (hasHelpers(helpers)) {\n helpers.updateExpanded(true);\n }\n };\n\n const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n if (hasHelpers(helpers)) {\n helpers.setFocused(false);\n helpers.cancelBlur();\n }\n };\n\n const selectedItemIds = selectedItems.map(\n (_, index) => `${id}-pill-${index}`,\n );\n\n const inputAriaLabelledBy = disabled\n ? [ariaLabelledBy, inputId, ...selectedItemIds]\n : [ariaLabelledBy, inputId];\n\n const mergedInputProps = deepmerge(\n {\n inputProps: {\n style: {\n width: inputWidth,\n minWidth: inputWidth,\n },\n \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n .filter(Boolean)\n .join(\" \"),\n \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n \"aria-activedescendant\":\n highlightedIndex && highlightedIndex >= 0\n ? `${id}-pill-${highlightedIndex}`\n : undefined,\n },\n },\n InputProps,\n );\n\n const {\n accessibleText: expandButtonAccessibleText,\n ...restExpandButtonProps\n } = ExpandButtonProps;\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: focused,\n [withBaseName(\"expanded\")]: expanded,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n id={id}\n onClick={onClick}\n ref={useForkRef(ref, containerRef)}\n >\n <span\n aria-owns={selectedItemIds.join(\" \")}\n className={withBaseName(\"hidden\")}\n role=\"listbox\"\n />\n <div className={withBaseName(\"pillGroup\")}>\n {selectedItems.map((item, index) => {\n const label = itemToString(item);\n\n return (\n <InputPill\n active={activeIndices.indexOf(index) !== -1}\n disabled={disabled}\n hidden={showExpandButton && index >= firstHiddenIndex}\n highlighted={index === highlightedIndex}\n id={`${id}-pill-${index}`}\n index={index}\n key={`${index}-${label}`}\n label={label}\n lastVisible={\n !showExpandButton && index === selectedItems.length - 1\n }\n onDelete={expanded ? onRemoveItem : undefined}\n pillsRef={pillsRef}\n />\n );\n })}\n <Button\n aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n .filter(Boolean)\n .join(\" \")}\n className={clsx(withBaseName(\"expandButton\"), {\n [withBaseName(\"hidden\")]: !showExpandButton,\n })}\n disabled={disabled}\n id={expandButtonId}\n onBlur={onBlur}\n onClick={handleExpand}\n onFocus={onFocus}\n onKeyDown={handleExpandButtonKeyDown}\n ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n variant=\"secondary\"\n {...restExpandButtonProps}\n >\n <OverflowIcon\n aria-label={\n expandButtonAccessibleText === undefined\n ? \"expand edit\"\n : expandButtonAccessibleText\n }\n />\n </Button>\n <Input\n {...mergedInputProps}\n className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n [withBaseName(\"hidden\")]: showExpandButton,\n })}\n disabled={disabled}\n id={inputId}\n // TODO: Use multi line input when available\n // multiline\n onBlur={onInputBlur}\n onChange={onInputChange}\n onFocus={onInputFocus}\n onKeyDown={onKeyDown}\n onKeyUp={handleInputKeyUp}\n onSelect={onInputSelect}\n renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n value={value}\n ref={inputRef}\n />\n </div>\n <Button\n className={clsx(withBaseName(\"clearButton\"), {\n [withBaseName(\"hidden\")]: !expanded \|\| selectedItems.length === 0,\n })}\n disabled={disabled}\n id={clearButtonId}\n onBlur={onBlur}\n onClick={onClear}\n onFocus={handleClearButtonFocus}\n ref={clearButtonRef}\n variant=\"secondary\"\n data-testid=\"clear-button\"\n >\n <CloseIcon aria-label=\"clear input\" />\n </Button>\n </div>\n );\n}) as <Item>(\n p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","tokenizedInputCss","Input"],"mappings":"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"}
1	+ {"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n makePrefixer,\n useDensity,\n useForkRef,\n useIcon,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n type ChangeEventHandler,\n type FocusEvent,\n type FocusEventHandler,\n type ForwardedRef,\n forwardRef,\n type HTMLAttributes,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type ReactElement,\n type ReactEventHandler,\n type Ref,\n type SyntheticEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport tokenizedInputCss from \"./TokenizedInput.css\";\nimport type {\n TokenizedInputHelpers,\n TokenizedInputState,\n} from \"./useTokenizedInput\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n ButtonProps,\n \"role\" \| \"aria-roledescription\" \| \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n extends Partial<TokenizedInputState<Item>>,\n Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onFocus\" \| \"onBlur\" \| \"onChange\" \| \"onKeyUp\" \| \"onKeyDown\"\n > {\n ExpandButtonProps?: ExpandButtonProps;\n InputProps?: Pick<InputProps, \"aria-describedby\" \| \"inputProps\">;\n disabled?: boolean;\n expandButtonRef?: Ref<HTMLButtonElement>;\n helpers: TokenizedInputHelpers<Item>;\n inputRef?: Ref<HTMLInputElement>;\n itemToString?: ItemToString<Item>;\n onFocus?: FocusEventHandler<HTMLInputElement \| HTMLButtonElement>;\n onBlur?: FocusEventHandler<HTMLInputElement \| HTMLButtonElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n // Can key down on either input or expand button\n onKeyDown?: KeyboardEventHandler<HTMLInputElement \| HTMLButtonElement>;\n onRemoveItem?: RemoveItemHandler;\n onInputBlur?: FocusEventHandler<HTMLInputElement>;\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n onInputSelect?: ReactEventHandler<HTMLInputElement>;\n onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n itemCount === 0\n ? \"no item selected\"\n : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nfunction hasHelpers<Item>(helpers: TokenizedInputHelpers<Item>) {\n if (process.env.NODE_ENV !== \"production\") {\n if (helpers == null) {\n console.warn(\n 'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".',\n );\n }\n }\n return helpers != null;\n}\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n props: TokenizedInputBaseProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n InputProps = {},\n ExpandButtonProps = {},\n className,\n activeIndices = [],\n selectedItems = [],\n highlightedIndex,\n value,\n focused,\n expanded,\n disabled,\n helpers,\n onFocus,\n onBlur,\n onKeyUp,\n onKeyDown,\n onRemoveItem,\n onInputChange,\n onInputFocus,\n onInputBlur,\n onInputSelect,\n onClear,\n onClick,\n inputRef,\n itemToString = defaultItemToString,\n id: idProp,\n expandButtonRef: expandButtonRefProp,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tokenized-input\",\n css: tokenizedInputCss,\n window: targetWindow,\n });\n\n const density = useDensity();\n const { OverflowIcon, CloseIcon } = useIcon();\n const id = useId(idProp);\n const inputId = `${id}-input`;\n const expandButtonId = `${id}-expand-button`;\n const clearButtonId = `${id}-clear-button`;\n\n // TODO: Use proper machanism to get variable values from theme in React. Something like below\n // getComputedStyle(document.documentElement)\n // .getPropertyValue('--my-variable-name'); // #999999\n const pillGroupPadding = 16;\n const lastVisiblePillMargin = 4;\n\n const pillsRef = useRef<{ [index: number]: number \| undefined }>({});\n const inputRulerRef = useRef<HTMLSpanElement \| null>(null);\n const keydownExpandButton = useRef(false);\n\n const [expandButtonRef, expandButtonWidth] = useWidth(density);\n const [clearButtonRef, clearButtonWidth] = useWidth(density);\n const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n const [pillGroupWidth, setPillGroupWidth] = useState<number \| null>(null);\n const [firstHiddenIndex, setFirstHiddenIndex] = useState<number \| null>(null);\n\n const showExpandButton = !expanded && firstHiddenIndex != null;\n\n const widthOffset =\n pillGroupPadding +\n INITIAL_INPUT_WIDTH +\n (expanded ? clearButtonWidth : expandButtonWidth);\n\n const containerRef = useResizeObserver<HTMLDivElement>(\n useCallback(\n ([{ contentRect }]) => {\n setPillGroupWidth(contentRect.width - widthOffset);\n },\n [widthOffset],\n ),\n );\n\n useIsomorphicLayoutEffect(\n () => () => {\n // When density changes, set hidden index to null so that pills are in their\n // readonly state before they are measured.\n setFirstHiddenIndex(null);\n },\n [density],\n );\n\n // useLayoutEffect because of potential layout change\n // We want to do that before paint to avoid layout jumps\n useIsomorphicLayoutEffect(\n () => {\n if (expanded) {\n setFirstHiddenIndex(null);\n } else if (pillGroupWidth != null) {\n setFirstHiddenIndex(\n calcFirstHiddenIndex({\n containerWidth: pillGroupWidth,\n pillWidths: Object.values(pillsRef.current).filter(\n Boolean,\n ) as number[],\n }),\n );\n }\n },\n // Additional dependency on selectedItems is for the controlled version\n [expanded, pillGroupWidth, selectedItems],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (expanded && inputRulerRef.current) {\n const newInputWidth = inputRulerRef.current.scrollWidth;\n setInputWidth(Math.min(newInputWidth, pillGroupWidth \|\| 0));\n }\n }, [expanded, pillGroupWidth, value]);\n\n const handleExpandButtonKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n ) => {\n const singleChar = event.key.length === 1;\n const triggerExpand =\n [\n \"CONTROL\",\n \"META\",\n \"ENTER\",\n \"BACKSPACE\",\n \"ARROWDOWN\",\n \"ARROWLEFT\",\n \"ARROWRIGHT\",\n ].indexOf(event.key.toUpperCase()) !== -1;\n\n if ((singleChar \|\| triggerExpand) && hasHelpers(helpers)) {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n event.stopPropagation();\n }\n helpers.updateExpanded(true);\n keydownExpandButton.current = true;\n }\n };\n\n const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n // Call keydown again if the initail event has been used to expand the input\n if (keydownExpandButton.current && \"Enter\" !== event.key) {\n keydownExpandButton.current = false;\n\n if (onKeyDown) {\n onKeyDown(event);\n }\n }\n\n if (onKeyUp) {\n onKeyUp(event);\n }\n };\n\n const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n if (hasHelpers(helpers)) {\n helpers.updateExpanded(true);\n }\n };\n\n const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n if (hasHelpers(helpers)) {\n helpers.setFocused(false);\n helpers.cancelBlur();\n }\n };\n\n const selectedItemIds = selectedItems.map(\n (_, index) => `${id}-pill-${index}`,\n );\n\n const inputAriaLabelledBy = disabled\n ? [ariaLabelledBy, inputId, ...selectedItemIds]\n : [ariaLabelledBy, inputId];\n\n const mergedInputProps = deepmerge(\n {\n inputProps: {\n style: {\n width: inputWidth,\n minWidth: inputWidth,\n },\n \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n .filter(Boolean)\n .join(\" \"),\n \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n \"aria-activedescendant\":\n highlightedIndex && highlightedIndex >= 0\n ? `${id}-pill-${highlightedIndex}`\n : undefined,\n },\n },\n InputProps,\n );\n\n const {\n accessibleText: expandButtonAccessibleText,\n ...restExpandButtonProps\n } = ExpandButtonProps;\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: focused,\n [withBaseName(\"expanded\")]: expanded,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n id={id}\n onClick={onClick}\n ref={useForkRef(ref, containerRef)}\n >\n <span\n aria-owns={selectedItemIds.join(\" \")}\n className={withBaseName(\"hidden\")}\n role=\"listbox\"\n />\n <div className={withBaseName(\"pillGroup\")}>\n {selectedItems.map((item, index) => {\n const label = itemToString(item);\n\n return (\n <InputPill\n active={activeIndices.indexOf(index) !== -1}\n disabled={disabled}\n hidden={showExpandButton && index >= firstHiddenIndex}\n highlighted={index === highlightedIndex}\n id={`${id}-pill-${index}`}\n index={index}\n key={`${index}-${label}`}\n label={label}\n lastVisible={\n !showExpandButton && index === selectedItems.length - 1\n }\n onDelete={expanded ? onRemoveItem : undefined}\n pillsRef={pillsRef}\n />\n );\n })}\n <Button\n aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n .filter(Boolean)\n .join(\" \")}\n className={clsx(withBaseName(\"expandButton\"), {\n [withBaseName(\"hidden\")]: !showExpandButton,\n })}\n disabled={disabled}\n id={expandButtonId}\n onBlur={onBlur}\n onClick={handleExpand}\n onFocus={onFocus}\n onKeyDown={handleExpandButtonKeyDown}\n ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n variant=\"secondary\"\n {...restExpandButtonProps}\n >\n <OverflowIcon\n aria-label={\n expandButtonAccessibleText === undefined\n ? \"expand edit\"\n : expandButtonAccessibleText\n }\n />\n </Button>\n <Input\n {...mergedInputProps}\n className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n [withBaseName(\"hidden\")]: showExpandButton,\n })}\n disabled={disabled}\n id={inputId}\n // TODO: Use multi line input when available\n // multiline\n onBlur={onInputBlur}\n onChange={onInputChange}\n onFocus={onInputFocus}\n onKeyDown={onKeyDown}\n onKeyUp={handleInputKeyUp}\n onSelect={onInputSelect}\n renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n value={value}\n ref={inputRef}\n />\n </div>\n <Button\n className={clsx(withBaseName(\"clearButton\"), {\n [withBaseName(\"hidden\")]: !expanded \|\| selectedItems.length === 0,\n })}\n disabled={disabled}\n id={clearButtonId}\n onBlur={onBlur}\n onClick={onClear}\n onFocus={handleClearButtonFocus}\n ref={clearButtonRef}\n variant=\"secondary\"\n data-testid=\"clear-button\"\n >\n <CloseIcon aria-label=\"clear input\" />\n </Button>\n </div>\n );\n}) as <Item>(\n p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","tokenizedInputCss","Input"],"mappings":"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"}

package/dist-es/tokenized-input/internal/InputPill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import {\n Pill,\n type PillProps,\n ~~makePrefixer,\n~~ useIcon,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type MutableRefObject, memo, useRef } from \"react\";\nimport { getWidth } from \"./useWidth\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n /*\n An ref object holds pills index map to width.\n /\n pillsRef: MutableRefObject<Record<number, number \| undefined>>;\n /\n Index of the pill within Input.\n /\n index: number;\n /\n Pill label.\n /\n label?: string;\n /\n Whether the pill is the last visible one within Input.\n /\n lastVisible?: boolean;\n /\n Whether the pill is highlighted.\n /\n highlighted?: boolean;\n /\n Whether the pill is active.\n /\n active?: boolean;\n /\n Callback when pill is deleted.\n */\n onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n const {\n active,\n className,\n disabled,\n hidden,\n highlighted,\n index,\n label,\n lastVisible,\n onDelete,\n pillsRef,\n ...restProps\n } = props;\n\n const ref = useRef<HTMLButtonElement \| null>(null);\n const isRemovable = Boolean(onDelete);\n const { CloseIcon } = useIcon();\n // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n // We need to collect widths before the calculation\n useIsomorphicLayoutEffect(() => {\n if (!isRemovable && pillsRef.current) {\n pillsRef.current[index] = getWidth(ref.current);\n }\n }, [pillsRef, index, isRemovable, lastVisible]);\n\n useIsomorphicLayoutEffect(\n () => () => {\n pillsRef.current[index] = undefined;\n },\n [pillsRef, index],\n );\n\n const handleDelete = () => {\n onDelete?.(index);\n };\n\n return (\n <Pill\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"pillActive\")]: active \|\| highlighted,\n [withBaseName(\"pillLastVisible\")]: lastVisible,\n [withBaseName(\"hidden\")]: hidden,\n },\n className,\n )}\n disabled={disabled}\n tabIndex={-1}\n onClick={isRemovable ? handleDelete : undefined}\n ref={ref}\n role=\"option\"\n // style={useMemo(() => ({ maxWidth }), [maxWidth])}\n {...restProps}\n >\n <span className={withBaseName(\"label\")}>{label}</span>\n {isRemovable && <CloseIcon />}\n </Pill>\n );\n});\n"],"names":["InputPill"],"mappings":";;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAiC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA;AACpC,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA;AAG9B,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAK,CAAI,GAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA;AAChD,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAS,QAAA,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,MAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,GAClB;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,GACb;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,MAAU,IAAA,WAAA;AAAA,UACxC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,WAAA;AAAA,UACnC,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,EAAA;AAAA,MACV,OAAA,EAAS,cAAc,YAAe,GAAA,MAAA;AAAA,MACtC,GAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MAEJ,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA;AAAA;AAAA;AAAA,GAC7B;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import {\n makePrefixer,\n Pill,\n type PillProps,\n useIcon,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type MutableRefObject, memo, useRef } from \"react\";\nimport { getWidth } from \"./useWidth\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n /*\n An ref object holds pills index map to width.\n /\n pillsRef: MutableRefObject<Record<number, number \| undefined>>;\n /\n Index of the pill within Input.\n /\n index: number;\n /\n Pill label.\n /\n label?: string;\n /\n Whether the pill is the last visible one within Input.\n /\n lastVisible?: boolean;\n /\n Whether the pill is highlighted.\n /\n highlighted?: boolean;\n /\n Whether the pill is active.\n /\n active?: boolean;\n /\n Callback when pill is deleted.\n */\n onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n const {\n active,\n className,\n disabled,\n hidden,\n highlighted,\n index,\n label,\n lastVisible,\n onDelete,\n pillsRef,\n ...restProps\n } = props;\n\n const ref = useRef<HTMLButtonElement \| null>(null);\n const isRemovable = Boolean(onDelete);\n const { CloseIcon } = useIcon();\n // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n // We need to collect widths before the calculation\n useIsomorphicLayoutEffect(() => {\n if (!isRemovable && pillsRef.current) {\n pillsRef.current[index] = getWidth(ref.current);\n }\n }, [pillsRef, index, isRemovable, lastVisible]);\n\n useIsomorphicLayoutEffect(\n () => () => {\n pillsRef.current[index] = undefined;\n },\n [pillsRef, index],\n );\n\n const handleDelete = () => {\n onDelete?.(index);\n };\n\n return (\n <Pill\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"pillActive\")]: active \|\| highlighted,\n [withBaseName(\"pillLastVisible\")]: lastVisible,\n [withBaseName(\"hidden\")]: hidden,\n },\n className,\n )}\n disabled={disabled}\n tabIndex={-1}\n onClick={isRemovable ? handleDelete : undefined}\n ref={ref}\n role=\"option\"\n // style={useMemo(() => ({ maxWidth }), [maxWidth])}\n {...restProps}\n >\n <span className={withBaseName(\"label\")}>{label}</span>\n {isRemovable && <CloseIcon />}\n </Pill>\n );\n});\n"],"names":["InputPill"],"mappings":";;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAiC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA;AACpC,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA;AAG9B,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAK,CAAI,GAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA;AAChD,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAS,QAAA,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,MAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,GAClB;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,GACb;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,MAAU,IAAA,WAAA;AAAA,UACxC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,WAAA;AAAA,UACnC,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,EAAA;AAAA,MACV,OAAA,EAAS,cAAc,YAAe,GAAA,MAAA;AAAA,MACtC,GAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MAEJ,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA;AAAA;AAAA;AAAA,GAC7B;AAEJ,CAAC;;;;"}

package/dist-es/tokenized-input/internal/InputRuler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputRuler.js","sources":["../src/tokenized-input/internal/InputRuler.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ForwardedRef, type InputHTMLAttributes, ~~forwardRef~~ } from \"react\";\nimport inputRuler from \"./InputRuler.css\";\n\nconst withBaseName = makePrefixer(\"saltInputRuler\");\n\n/*\n This hidden component is used to wrap a copy of an input value\n * so that we can use it to determine the input width dynamically\n */\nexport const InputRuler = forwardRef(function InputRuler(\n props: { value: InputHTMLAttributes<HTMLInputElement>[\"value\"] },\n ref: ForwardedRef<HTMLSpanElement>,\n) {\n const { value } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-ruler\",\n css: inputRuler,\n window: targetWindow,\n });\n\n return (\n <span className={withBaseName()} ref={ref}>\n {value}\n </span>\n );\n});\n"],"names":["InputRuler","inputRuler"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA,CAAW,SAASA,WAAAA,CAC5C,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA;AAElB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,2BACG,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,EAAA,EAAG,KAC9B,QACH,EAAA,KAAA,EAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"InputRuler.js","sources":["../src/tokenized-input/internal/InputRuler.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ForwardedRef, forwardRef, type InputHTMLAttributes } from \"react\";\nimport inputRuler from \"./InputRuler.css\";\n\nconst withBaseName = makePrefixer(\"saltInputRuler\");\n\n/*\n This hidden component is used to wrap a copy of an input value\n * so that we can use it to determine the input width dynamically\n */\nexport const InputRuler = forwardRef(function InputRuler(\n props: { value: InputHTMLAttributes<HTMLInputElement>[\"value\"] },\n ref: ForwardedRef<HTMLSpanElement>,\n) {\n const { value } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-ruler\",\n css: inputRuler,\n window: targetWindow,\n });\n\n return (\n <span className={withBaseName()} ref={ref}>\n {value}\n </span>\n );\n});\n"],"names":["InputRuler","inputRuler"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA,CAAW,SAASA,WAAAA,CAC5C,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA;AAElB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,2BACG,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,EAAA,EAAG,KAC9B,QACH,EAAA,KAAA,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tokenized-input/internal/calcFirstHiddenIndex.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calcFirstHiddenIndex.js","sources":["../src/tokenized-input/internal/calcFirstHiddenIndex.ts"],"sourcesContent":["export function calcFirstHiddenIndex({\n containerWidth = 0,\n pillWidths = [],\n}: { containerWidth?: number; pillWidths?: number[] } = {}) {\n let totalWidth = 0;\n let firstHiddenIndex: null \| number = null;\n\n for (let i = 0; i < pillWidths.length; i++) {\n totalWidth += pillWidths[i];\n\n if (totalWidth > containerWidth) {\n firstHiddenIndex = i;\n break;\n }\n }\n\n return firstHiddenIndex;\n}\n"],"names":[],"mappings":"AAAO,SAAS,oBAAqB,CAAA;AAAA,EACnC,cAAiB,GAAA,CAAA;AAAA,EACjB,aAAa;AACf,CAAA,~~GAAwD~~,EAAI,EAAA;~~AAC1D~~,EAAA,IAAI,UAAa,GAAA,CAAA;AACjB,EAAA,IAAI,gBAAkC,GAAA,IAAA;AAEtC,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAK,EAAA,EAAA;AAC1C,IAAA,UAAA,IAAc,WAAW,CAAC,CAAA;AAE1B,IAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,MAAmB,gBAAA,GAAA,CAAA;AACnB,MAAA;AAAA;AACF;AAGF,EAAO,OAAA,gBAAA;AACT;;;;"}
1	+ {"version":3,"file":"calcFirstHiddenIndex.js","sources":["../src/tokenized-input/internal/calcFirstHiddenIndex.ts"],"sourcesContent":["export function calcFirstHiddenIndex({\n containerWidth = 0,\n pillWidths = [],\n}: {\n containerWidth?: number;\n pillWidths?: number[];\n} = {}) {\n let totalWidth = 0;\n let firstHiddenIndex: null \| number = null;\n\n for (let i = 0; i < pillWidths.length; i++) {\n totalWidth += pillWidths[i];\n\n if (totalWidth > containerWidth) {\n firstHiddenIndex = i;\n break;\n }\n }\n\n return firstHiddenIndex;\n}\n"],"names":[],"mappings":"AAAO,SAAS,oBAAqB,CAAA;AAAA,EACnC,cAAiB,GAAA,CAAA;AAAA,EACjB,aAAa;AACf,CAAA,GAGI,EAAI,EAAA;AACN,EAAA,IAAI,UAAa,GAAA,CAAA;AACjB,EAAA,IAAI,gBAAkC,GAAA,IAAA;AAEtC,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAK,EAAA,EAAA;AAC1C,IAAA,UAAA,IAAc,WAAW,CAAC,CAAA;AAE1B,IAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,MAAmB,gBAAA,GAAA,CAAA;AACnB,MAAA;AAAA;AACF;AAGF,EAAO,OAAA,gBAAA;AACT;;;;"}

package/dist-es/tokenized-input/internal/defaultItemToString.js CHANGED Viewed

@@ -4,7 +4,7 @@ const defaultItemToString = (item) => {
   if (!isPlainObject(item)) {
     return String(item);
   }
-  if (Object.prototype.hasOwnProperty.call(item, "label")) {
+  if (Object.hasOwn(item, "label")) {
     return String(item.label);
   }
   if (process.env.NODE_ENV !== "production") {

package/dist-es/tokenized-input/internal/defaultItemToString.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"defaultItemToString.js","sources":["../src/tokenized-input/internal/defaultItemToString.ts"],"sourcesContent":["import { isPlainObject } from \"./isPlainObject\";\n\nexport const defaultItemToString = (item: any) => {\n if (!isPlainObject(item)) {\n return String(item);\n }\n\n if (Object.~~prototype.hasOwnProperty.call~~(item, \"label\")) {\n return String(item.label);\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n console.warn(\n [\n \"itemToString: you've likely forgotten to set the label prop on the item object.\",\n \"You can also provide your own `itemToString` implementation.\",\n ].join(\"\\n\"),\n );\n }\n\n return \"\";\n};\n"],"names":[],"mappings":";;AAEa,MAAA,mBAAA,GAAsB,CAAC,IAAc,KAAA;AAChD,EAAI,IAAA,CAAC,aAAc,CAAA,IAAI,CAAG,EAAA;AACxB,IAAA,OAAO,OAAO,IAAI,CAAA;AAAA;AAGpB,EAAA,IAAI,~~OAAO~~,~~SAAU,~~CAAA,~~cAAA~~,~~CAAe~~,~~IAAK~~,~~CAAA~~,~~IAAA,EAAM,~~OAAO,CAAG,EAAA;~~AACvD~~,IAAO,OAAA,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA;AAG1B,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,QACE,iFAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,IAAI;AAAA,KACb;AAAA;AAGF,EAAO,OAAA,EAAA;AACT;;;;"}
1	+ {"version":3,"file":"defaultItemToString.js","sources":["../src/tokenized-input/internal/defaultItemToString.ts"],"sourcesContent":["import { isPlainObject } from \"./isPlainObject\";\n\nexport const defaultItemToString = (item: any) => {\n if (!isPlainObject(item)) {\n return String(item);\n }\n\n if (Object.hasOwn(item, \"label\")) {\n return String(item.label);\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n console.warn(\n [\n \"itemToString: you've likely forgotten to set the label prop on the item object.\",\n \"You can also provide your own `itemToString` implementation.\",\n ].join(\"\\n\"),\n );\n }\n\n return \"\";\n};\n"],"names":[],"mappings":";;AAEa,MAAA,mBAAA,GAAsB,CAAC,IAAc,KAAA;AAChD,EAAI,IAAA,CAAC,aAAc,CAAA,IAAI,CAAG,EAAA;AACxB,IAAA,OAAO,OAAO,IAAI,CAAA;AAAA;AAGpB,EAAA,IAAI,MAAO,CAAA,MAAA,CAAO,IAAM,EAAA,OAAO,CAAG,EAAA;AAChC,IAAO,OAAA,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA;AAG1B,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,QACE,iFAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,IAAI;AAAA,KACb;AAAA;AAGF,EAAO,OAAA,EAAA;AACT;;;;"}

package/dist-es/tokenized-input/useTokenizedInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTokenizedInput.js","sources":["../src/tokenized-input/useTokenizedInput.tsx"],"sourcesContent":["//TODO remove when popout code has been migrated\nimport { ownerWindow, useControlled, useDensity, useId } from \"@salt-ds/core\";\nimport copy from \"clipboard-copy\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type Ref,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { escapeRegExp, useEventCallback } from \"../utils\";\nimport type { TokenizedInputProps } from \"./TokenizedInput\";\nimport type { TokenizedInputBaseProps } from \"./TokenizedInputBase\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { getCursorPosition } from \"./internal/getCursorPosition\";\n\nexport interface TokenizedInputState<Item> {\n activeIndices: Array<number>;\n expanded: boolean \| undefined;\n focused: boolean;\n highlightedIndex: number \| undefined;\n selectedItems: Array<Item>;\n value: string \| undefined;\n}\n\nexport interface TokenizedInputHelpers<Item> {\n cancelBlur: () => void;\n setFocused: (expanded: boolean) => void;\n setHighlightedIndex: (value?: number) => void;\n setValue: (value: string) => void;\n setSelectedItems: (selectedItems: Array<Item>) => void;\n updateExpanded: (expanded: boolean) => void;\n}\n\n// Timeout to accommodate blur from the input and a click inside of the container\nconst BLUR_TIMEOUT = 200;\n\n/*\n Map of the height of TokenizedInput in different density.\n * We have to keep a map of this as we can't always measure the height of the input in it's\n * collapsed state, e.g. in a controlled 'expanded' state.\n /\nconst SINGLE_LINE_HEIGHT_MAP = {\n touch: 45,\n low: 36,\n medium: 28,\n high: 23,\n};\n\nfunction isValidItem<Item>(data: unknown): data is Item {\n return (\n (typeof data === \"string\" && Boolean(data.length)) \|\|\n (typeof data !== \"string\" && data != null)\n );\n}\n\ntype useTokenizedInputResult<Item> = {\n /\n Used to do auto focus. It should be set to the actual input node.\n /\n inputRef: Ref<HTMLInputElement>;\n /\n The tokenized input state\n /\n state: TokenizedInputState<Item>;\n /\n Utility functions for modifying tokenized input state\n /\n helpers: TokenizedInputHelpers<Item>;\n /\n Properties applied to a basic tokenized input component\n */\n inputProps: Omit<TokenizedInputBaseProps<Item>, \"helpers\">;\n};\n\nexport function useTokenizedInput<Item>(\n props: TokenizedInputProps<Item>,\n): useTokenizedInputResult<Item> {\n validateProps(props);\n\n const {\n inFormField,\n // @ts-ignore\n popoutMode,\n // @ts-ignore\n popoutActions,\n // @ts-ignore\n setIsPoppedOut,\n // @ts-ignore\n setManagedPopout,\n // @ts-ignore\n setIntendedHeight,\n a11yProps: {\n \"aria-labelledby\": ariaLabelledBy,\n disabled: formFieldDisabled,\n } = {},\n } = useFormFieldLegacyProps(); // FIXME: FormField Props\n\n const density = useDensity();\n\n const {\n delimiter = \",\",\n initialSelectedItems = [],\n itemToString = defaultItemToString,\n stringToItem = (_, value) => value.trim(),\n disabled = formFieldDisabled,\n disableAddOnBlur,\n onFocus,\n onBlur,\n onClick,\n onExpand,\n onCollapse,\n onKeyUp,\n onKeyDown,\n onInputSelect,\n onInputChange,\n onInputFocus,\n onInputBlur,\n onClear,\n id: idProp,\n value: valueProp,\n expanded: expandedProp,\n selectedItems: selectedItemsProp,\n onChange: onChangeProp,\n \"aria-label\": ariaLabel,\n ...restProps\n } = props;\n\n const id = useId(idProp);\n\n const [value, setValue, isInputControlled] = useControlled<\n string \| undefined\n >({\n controlled: valueProp,\n default: \"\",\n name: \"TokenizedInput\",\n state: \"value\",\n });\n\n const [\n // TODO: Check whether defaultValue of [] changes the logic\n selectedItems = [],\n setSelectedItems,\n isSelectionControlled,\n ] = useControlled<Item[] \| undefined>({\n controlled: selectedItemsProp,\n default: initialSelectedItems,\n name: \"TokenizedInput\",\n state: \"selectedItems\",\n });\n\n const [expanded, setExpanded, isExpandedControlled] = useControlled<boolean>({\n controlled: expandedProp,\n default: false,\n name: \"TokenizedInput\",\n state: \"expanded\",\n });\n\n const [activeIndices, setActiveIndices] = useState<number[]>([]);\n const [highlightedIndex, setHighlightedIndex] = useState<number \| undefined>(\n undefined,\n );\n const [focused, setFocusedState] = useState(false);\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const blurTimeout = useRef<number \| null>(null);\n const preventBlurOnCopy = useRef(false);\n const hasActiveItems = Boolean(activeIndices.length);\n\n const delimiters = ([] as string[]).concat(delimiter);\n const primaryDelimiter = delimiters[0];\n const delimiterRegex = new RegExp(\n delimiters.map(escapeRegExp).join(\"\|\"),\n \"gi\",\n );\n\n const onChange = useEventCallback((selectedItems: Item[] \| undefined) => {\n if (onChangeProp) {\n onChangeProp(selectedItems);\n }\n });\n\n const cancelBlur = useCallback(() => {\n if (blurTimeout.current) {\n clearTimeout(blurTimeout.current);\n }\n blurTimeout.current = null;\n }, []);\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n\n if (popoutMode && setIsPoppedOut) {\n setIsPoppedOut(true);\n }\n }\n }, [popoutMode, setIsPoppedOut]);\n\n useEffect(\n () => () => {\n cancelBlur();\n },\n [cancelBlur],\n );\n\n useEffect(() => {\n if (expanded) {\n focusInput();\n }\n }, [expanded, focusInput]);\n\n useEffect(() => {\n if (popoutMode && setManagedPopout) {\n setManagedPopout(true);\n\n setIntendedHeight(SINGLE_LINE_HEIGHT_MAP[density]);\n }\n }, [density, popoutMode, setIntendedHeight, setManagedPopout]);\n\n const updateInputValue = (newValue: string \| undefined) => {\n if (!isInputControlled) {\n setValue(newValue);\n }\n };\n\n const updateSelectedItems = useCallback(\n (action: SetStateAction<Item[] \| undefined>) => {\n if (!isSelectionControlled) {\n setSelectedItems((prevSelectedItems?: Item[]) => {\n const newItems =\n typeof action === \"function\" ? action(prevSelectedItems) : action;\n\n if (newItems !== prevSelectedItems) {\n onChange(newItems);\n }\n\n return newItems;\n });\n } else {\n onChange(typeof action === \"function\" ? action(selectedItems) : action);\n }\n },\n [isSelectionControlled, onChange, selectedItems],\n );\n\n const updateExpanded = (newExpanded: boolean) => {\n if (!isExpandedControlled) {\n setExpanded(newExpanded);\n }\n\n if (newExpanded) {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n\n if (popoutMode && popoutActions) {\n popoutActions.refresh();\n }\n };\n\n const setFocused = (newState: boolean) => {\n setFocusedState(newState);\n };\n\n const resetInput = () => {\n updateInputValue(\"\");\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n };\n\n const removeItems = useCallback(\n (itemIndices: number[]) => {\n updateSelectedItems(\n (prevSelectedItems) =>\n prevSelectedItems &&\n (prevSelectedItems.length === 0\n ? prevSelectedItems\n : prevSelectedItems.filter(\n (_, index) => itemIndices.indexOf(index) === -1,\n )),\n );\n },\n [updateSelectedItems],\n );\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n\n // The input will lose focus when building the text to copy in a temporary\n // DOM node. This is particularly visible in a slower browser, i.e. IE 11.\n // This is to prevent a blur in that scenario.\n if (preventBlurOnCopy.current) {\n preventBlurOnCopy.current = false;\n setActiveIndices(\n Array.from(\n { length: selectedItems ? selectedItems.length : 0 },\n (_, index) => index,\n ),\n );\n return;\n }\n\n setFocused(true);\n\n if (onInputFocus) {\n onInputFocus(event);\n }\n\n if (blurTimeout.current !== null) {\n cancelBlur();\n } else {\n updateExpanded(true);\n\n if (onFocus) {\n onFocus(event);\n }\n }\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n\n setFocused(false);\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n\n if (onInputBlur) {\n onInputBlur(event);\n }\n\n handleBlur(event);\n };\n\n const handleBlur = (\n event: FocusEvent<HTMLInputElement \| HTMLButtonElement>,\n ) => {\n if (preventBlurOnCopy.current) {\n return focusInput();\n }\n\n event.persist();\n\n blurTimeout.current = setTimeout(() => {\n blurTimeout.current = null;\n updateExpanded(false);\n\n if (!disableAddOnBlur) {\n handleAddItems(value, true);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n\n if (popoutMode && setIsPoppedOut) {\n setIsPoppedOut(false);\n }\n }, BLUR_TIMEOUT) as unknown as number;\n };\n\n const handleClick = (event: SyntheticEvent<HTMLElement>) => {\n updateExpanded(true);\n setActiveIndices([]);\n focusInput();\n\n if (onClick) {\n onClick(event);\n }\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n setHighlightedIndex(undefined);\n\n if (onInputChange) {\n onInputChange(event);\n }\n\n const newValue = event.target.value;\n\n if (delimiterRegex.test(newValue)) {\n // Process value with delimiters\n handleAddItems(newValue);\n } else {\n // Just update input value if there is no delimiter\n updateInputValue(newValue);\n }\n };\n\n const handleAddItems = (\n newValue: string \| undefined,\n appendOnly?: boolean,\n ) => {\n if (!newValue \|\| newValue.length === 0) {\n return;\n }\n\n resetInput();\n\n const newItems = newValue\n .split(delimiterRegex)\n .reduce<Item[]>((values, part) => {\n const newItem = stringToItem(\n hasActiveItems ? values : selectedItems.concat(values),\n part,\n );\n return isValidItem<Item>(newItem) ? values.concat(newItem) : values;\n }, []);\n\n if (newItems.length) {\n updateSelectedItems((prevSelectedItems = []) =>\n hasActiveItems && !appendOnly\n ? newItems\n : prevSelectedItems.concat(newItems),\n );\n }\n };\n\n const handleRemoveItem = useCallback(\n (itemIndex?: number) => {\n focusInput();\n if (itemIndex) {\n removeItems([itemIndex]);\n }\n },\n [focusInput, removeItems],\n );\n\n const handleClear = (event: ChangeEvent<HTMLInputElement>) => {\n updateSelectedItems([]);\n resetInput();\n focusInput();\n\n if (onClear) {\n onClear(event);\n }\n\n if (popoutMode && popoutActions) {\n popoutActions.refresh();\n }\n };\n\n const cursorAtInputStart = () =>\n getCursorPosition(inputRef) === 0 && Boolean(selectedItems.length);\n\n const highlightAtPillGroupEnd = () =>\n highlightedIndex === selectedItems.length - 1;\n\n const pillGroupKeyDownHandlers: {\n [key: string]: KeyboardEventHandler<HTMLInputElement>;\n } = {\n ArrowLeft: (event) => {\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? selectedItems.length - 1\n : Math.max(0, prevHighlightedIndex - 1),\n );\n },\n ArrowRight: (event) => {\n if (highlightAtPillGroupEnd()) {\n return setHighlightedIndex(undefined);\n }\n\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1),\n );\n },\n Backspace: (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.max(0, prevHighlightedIndex - 1),\n );\n },\n Home: (event) => {\n event.preventDefault();\n setHighlightedIndex(0);\n },\n End: (event) => {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n },\n Enter: (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n },\n Delete: (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n },\n \" \": (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n },\n };\n\n const inputKeyDownHandlers: {\n [key: string]: KeyboardEventHandler<HTMLInputElement>;\n } = {\n ArrowLeft: (event) => {\n if (cursorAtInputStart()) {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Backspace: () => {\n if (hasActiveItems) {\n removeItems(activeIndices);\n } else if (cursorAtInputStart()) {\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Delete: () => {\n if (hasActiveItems) {\n removeItems(activeIndices);\n }\n },\n Enter: (event) => {\n event.preventDefault();\n\n if (hasActiveItems) {\n removeItems(activeIndices);\n } else {\n handleAddItems(value);\n }\n },\n };\n\n const handleCtrlModifierKeyDown: InputHTMLAttributes<HTMLInputElement>[\"onKeyDown\"] =\n (event) => {\n const win = ownerWindow(event.target as HTMLElement);\n const supportClipboard = win.navigator?.clipboard;\n\n switch (event.key.toUpperCase()) {\n case \"A\":\n // Select all\n setHighlightedIndex(undefined);\n setActiveIndices(\n Array.from({ length: selectedItems.length }, (_, index) => index),\n );\n break;\n case \"C\":\n // Copy\n copy(\n activeIndices\n .map((index) => itemToString(selectedItems[index]))\n .concat(value != null ? String(value).trim() : \"\")\n .filter(Boolean)\n .join(primaryDelimiter),\n )\n .then((result) => {\n preventBlurOnCopy.current = !supportClipboard;\n return result;\n })\n .catch((error) => {\n console.error(error);\n });\n break;\n case \"V\":\n // Paste - do nothing and let handleChange deal with it\n break;\n case \"ARROWLEFT\":\n pillGroupKeyDownHandlers.ArrowLeft(event);\n break;\n case \"ARROWRIGHT\":\n pillGroupKeyDownHandlers.ArrowRight(event);\n break;\n case \"BACKSPACE\":\n if (cursorAtInputStart()) {\n handleRemoveItem(selectedItems.length - 1);\n }\n break;\n case \"CONTROL\":\n case \"META\":\n // Do nothing\n break;\n default:\n // Otherwise, reset active items\n setActiveIndices([]);\n }\n };\n\n const handleCommonKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const eventKey = event.key.toUpperCase();\n\n if (eventKey === \"ESCAPE\") {\n event.preventDefault();\n resetInput();\n } else if (eventKey === \"TAB\" && !disableAddOnBlur) {\n // Pressing Tab adds a new value\n handleAddItems(value);\n }\n };\n\n const handleKeyDown: InputHTMLAttributes<HTMLInputElement>[\"onKeyDown\"] = (\n event,\n ) => {\n if (onKeyDown) {\n onKeyDown(event);\n }\n if (event.defaultPrevented) {\n return;\n }\n if (\n event.ctrlKey \|\|\n event.metaKey \|\|\n [\"CONTROL\", \"META\"].indexOf(event.key.toUpperCase()) !== -1\n ) {\n handleCtrlModifierKeyDown(event);\n } else {\n let handler: KeyboardEventHandler<HTMLInputElement> \| undefined;\n\n if (highlightedIndex == null) {\n handler = inputKeyDownHandlers[event.key];\n setActiveIndices([]);\n } else {\n handler = pillGroupKeyDownHandlers[event.key];\n }\n\n if (handler != null) {\n handler(event);\n } else {\n handleCommonKeyDown(event);\n }\n }\n\n if (popoutMode && popoutActions) {\n popoutActions.refresh();\n }\n };\n\n const state: TokenizedInputState<Item> = {\n value,\n selectedItems,\n activeIndices,\n highlightedIndex,\n expanded,\n focused: !inFormField && focused,\n };\n\n const eventHandlers = {\n // onFocus is a focus on the expand button\n // It can also be triggered by a focus on the input\n onFocus,\n // onBlur is a blur from the expand button when it's collapsed\n // It can also be triggered by the clear button\n onBlur: expanded ? handleBlur : onBlur,\n onClick: handleClick,\n onInputSelect,\n onInputChange: handleInputChange,\n onInputFocus: handleInputFocus,\n onInputBlur: handleInputBlur,\n onKeyDown: handleKeyDown,\n onRemoveItem: handleRemoveItem,\n onClear: handleClear,\n };\n\n return {\n inputRef,\n state,\n helpers: {\n cancelBlur,\n setValue,\n setSelectedItems,\n setHighlightedIndex,\n setFocused,\n updateExpanded,\n },\n inputProps: {\n id,\n itemToString,\n disabled,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n ...state,\n ...restProps,\n ...(disabled ? {} : eventHandlers),\n },\n };\n}\n\nconst validateProps = function validateProps<Item>(\n props: TokenizedInputProps<Item>,\n) {\n if (process.env.NODE_ENV !== \"production\") {\n const { delimiter } = props;\n\n const invalidDelimiter = Array.isArray(delimiter)\n ? delimiter.every(isChar)\n : isChar(delimiter);\n\n useEffect(() => {\n if (invalidDelimiter) {\n console.warn(\n \"TokenizedInput delimiter should be a single character or an array of single characters\",\n );\n }\n }, [invalidDelimiter]);\n }\n};\n\nconst isChar = (value: unknown) =>\n typeof value === \"string\" && value.length === 1;\n"],"names":["value","selectedItems","validateProps"],"mappings":"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"}
1	+ {"version":3,"file":"useTokenizedInput.js","sources":["../src/tokenized-input/useTokenizedInput.tsx"],"sourcesContent":["//TODO remove when popout code has been migrated\nimport { ownerWindow, useControlled, useDensity, useId } from \"@salt-ds/core\";\nimport copy from \"clipboard-copy\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type Ref,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { escapeRegExp, useEventCallback } from \"../utils\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { getCursorPosition } from \"./internal/getCursorPosition\";\nimport type { TokenizedInputProps } from \"./TokenizedInput\";\nimport type { TokenizedInputBaseProps } from \"./TokenizedInputBase\";\n\nexport interface TokenizedInputState<Item> {\n activeIndices: Array<number>;\n expanded: boolean \| undefined;\n focused: boolean;\n highlightedIndex: number \| undefined;\n selectedItems: Array<Item>;\n value: string \| undefined;\n}\n\nexport interface TokenizedInputHelpers<Item> {\n cancelBlur: () => void;\n setFocused: (expanded: boolean) => void;\n setHighlightedIndex: (value?: number) => void;\n setValue: (value: string) => void;\n setSelectedItems: (selectedItems: Array<Item>) => void;\n updateExpanded: (expanded: boolean) => void;\n}\n\n// Timeout to accommodate blur from the input and a click inside of the container\nconst BLUR_TIMEOUT = 200;\n\n/*\n Map of the height of TokenizedInput in different density.\n * We have to keep a map of this as we can't always measure the height of the input in it's\n * collapsed state, e.g. in a controlled 'expanded' state.\n /\nconst SINGLE_LINE_HEIGHT_MAP = {\n touch: 45,\n low: 36,\n medium: 28,\n high: 23,\n};\n\nfunction isValidItem<Item>(data: unknown): data is Item {\n return (\n (typeof data === \"string\" && Boolean(data.length)) \|\|\n (typeof data !== \"string\" && data != null)\n );\n}\n\ntype useTokenizedInputResult<Item> = {\n /\n Used to do auto focus. It should be set to the actual input node.\n /\n inputRef: Ref<HTMLInputElement>;\n /\n The tokenized input state\n /\n state: TokenizedInputState<Item>;\n /\n Utility functions for modifying tokenized input state\n /\n helpers: TokenizedInputHelpers<Item>;\n /\n Properties applied to a basic tokenized input component\n */\n inputProps: Omit<TokenizedInputBaseProps<Item>, \"helpers\">;\n};\n\nexport function useTokenizedInput<Item>(\n props: TokenizedInputProps<Item>,\n): useTokenizedInputResult<Item> {\n validateProps(props);\n\n const {\n inFormField,\n // @ts-ignore\n popoutMode,\n // @ts-ignore\n popoutActions,\n // @ts-ignore\n setIsPoppedOut,\n // @ts-ignore\n setManagedPopout,\n // @ts-ignore\n setIntendedHeight,\n a11yProps: {\n \"aria-labelledby\": ariaLabelledBy,\n disabled: formFieldDisabled,\n } = {},\n } = useFormFieldLegacyProps(); // FIXME: FormField Props\n\n const density = useDensity();\n\n const {\n delimiter = \",\",\n initialSelectedItems = [],\n itemToString = defaultItemToString,\n stringToItem = (_, value) => value.trim(),\n disabled = formFieldDisabled,\n disableAddOnBlur,\n onFocus,\n onBlur,\n onClick,\n onExpand,\n onCollapse,\n onKeyUp,\n onKeyDown,\n onInputSelect,\n onInputChange,\n onInputFocus,\n onInputBlur,\n onClear,\n id: idProp,\n value: valueProp,\n expanded: expandedProp,\n selectedItems: selectedItemsProp,\n onChange: onChangeProp,\n \"aria-label\": ariaLabel,\n ...restProps\n } = props;\n\n const id = useId(idProp);\n\n const [value, setValue, isInputControlled] = useControlled<\n string \| undefined\n >({\n controlled: valueProp,\n default: \"\",\n name: \"TokenizedInput\",\n state: \"value\",\n });\n\n const [\n // TODO: Check whether defaultValue of [] changes the logic\n selectedItems = [],\n setSelectedItems,\n isSelectionControlled,\n ] = useControlled<Item[] \| undefined>({\n controlled: selectedItemsProp,\n default: initialSelectedItems,\n name: \"TokenizedInput\",\n state: \"selectedItems\",\n });\n\n const [expanded, setExpanded, isExpandedControlled] = useControlled<boolean>({\n controlled: expandedProp,\n default: false,\n name: \"TokenizedInput\",\n state: \"expanded\",\n });\n\n const [activeIndices, setActiveIndices] = useState<number[]>([]);\n const [highlightedIndex, setHighlightedIndex] = useState<number \| undefined>(\n undefined,\n );\n const [focused, setFocusedState] = useState(false);\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const blurTimeout = useRef<number \| null>(null);\n const preventBlurOnCopy = useRef(false);\n const hasActiveItems = Boolean(activeIndices.length);\n\n const delimiters = ([] as string[]).concat(delimiter);\n const primaryDelimiter = delimiters[0];\n const delimiterRegex = new RegExp(\n delimiters.map(escapeRegExp).join(\"\|\"),\n \"gi\",\n );\n\n const onChange = useEventCallback((selectedItems: Item[] \| undefined) => {\n if (onChangeProp) {\n onChangeProp(selectedItems);\n }\n });\n\n const cancelBlur = useCallback(() => {\n if (blurTimeout.current) {\n clearTimeout(blurTimeout.current);\n }\n blurTimeout.current = null;\n }, []);\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n\n if (popoutMode && setIsPoppedOut) {\n setIsPoppedOut(true);\n }\n }\n }, [popoutMode, setIsPoppedOut]);\n\n useEffect(\n () => () => {\n cancelBlur();\n },\n [cancelBlur],\n );\n\n useEffect(() => {\n if (expanded) {\n focusInput();\n }\n }, [expanded, focusInput]);\n\n useEffect(() => {\n if (popoutMode && setManagedPopout) {\n setManagedPopout(true);\n\n setIntendedHeight(SINGLE_LINE_HEIGHT_MAP[density]);\n }\n }, [density, popoutMode, setIntendedHeight, setManagedPopout]);\n\n const updateInputValue = (newValue: string \| undefined) => {\n if (!isInputControlled) {\n setValue(newValue);\n }\n };\n\n const updateSelectedItems = useCallback(\n (action: SetStateAction<Item[] \| undefined>) => {\n if (!isSelectionControlled) {\n setSelectedItems((prevSelectedItems?: Item[]) => {\n const newItems =\n typeof action === \"function\" ? action(prevSelectedItems) : action;\n\n if (newItems !== prevSelectedItems) {\n onChange(newItems);\n }\n\n return newItems;\n });\n } else {\n onChange(typeof action === \"function\" ? action(selectedItems) : action);\n }\n },\n [isSelectionControlled, onChange, selectedItems],\n );\n\n const updateExpanded = (newExpanded: boolean) => {\n if (!isExpandedControlled) {\n setExpanded(newExpanded);\n }\n\n if (newExpanded) {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n\n if (popoutMode && popoutActions) {\n popoutActions.refresh();\n }\n };\n\n const setFocused = (newState: boolean) => {\n setFocusedState(newState);\n };\n\n const resetInput = () => {\n updateInputValue(\"\");\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n };\n\n const removeItems = useCallback(\n (itemIndices: number[]) => {\n updateSelectedItems(\n (prevSelectedItems) =>\n prevSelectedItems &&\n (prevSelectedItems.length === 0\n ? prevSelectedItems\n : prevSelectedItems.filter(\n (_, index) => itemIndices.indexOf(index) === -1,\n )),\n );\n },\n [updateSelectedItems],\n );\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n\n // The input will lose focus when building the text to copy in a temporary\n // DOM node. This is particularly visible in a slower browser, i.e. IE 11.\n // This is to prevent a blur in that scenario.\n if (preventBlurOnCopy.current) {\n preventBlurOnCopy.current = false;\n setActiveIndices(\n Array.from(\n { length: selectedItems ? selectedItems.length : 0 },\n (_, index) => index,\n ),\n );\n return;\n }\n\n setFocused(true);\n\n if (onInputFocus) {\n onInputFocus(event);\n }\n\n if (blurTimeout.current !== null) {\n cancelBlur();\n } else {\n updateExpanded(true);\n\n if (onFocus) {\n onFocus(event);\n }\n }\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n\n setFocused(false);\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n\n if (onInputBlur) {\n onInputBlur(event);\n }\n\n handleBlur(event);\n };\n\n const handleBlur = (\n event: FocusEvent<HTMLInputElement \| HTMLButtonElement>,\n ) => {\n if (preventBlurOnCopy.current) {\n return focusInput();\n }\n\n event.persist();\n\n blurTimeout.current = setTimeout(() => {\n blurTimeout.current = null;\n updateExpanded(false);\n\n if (!disableAddOnBlur) {\n handleAddItems(value, true);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n\n if (popoutMode && setIsPoppedOut) {\n setIsPoppedOut(false);\n }\n }, BLUR_TIMEOUT) as unknown as number;\n };\n\n const handleClick = (event: SyntheticEvent<HTMLElement>) => {\n updateExpanded(true);\n setActiveIndices([]);\n focusInput();\n\n if (onClick) {\n onClick(event);\n }\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n setHighlightedIndex(undefined);\n\n if (onInputChange) {\n onInputChange(event);\n }\n\n const newValue = event.target.value;\n\n if (delimiterRegex.test(newValue)) {\n // Process value with delimiters\n handleAddItems(newValue);\n } else {\n // Just update input value if there is no delimiter\n updateInputValue(newValue);\n }\n };\n\n const handleAddItems = (\n newValue: string \| undefined,\n appendOnly?: boolean,\n ) => {\n if (!newValue \|\| newValue.length === 0) {\n return;\n }\n\n resetInput();\n\n const newItems = newValue\n .split(delimiterRegex)\n .reduce<Item[]>((values, part) => {\n const newItem = stringToItem(\n hasActiveItems ? values : selectedItems.concat(values),\n part,\n );\n return isValidItem<Item>(newItem) ? values.concat(newItem) : values;\n }, []);\n\n if (newItems.length) {\n updateSelectedItems((prevSelectedItems = []) =>\n hasActiveItems && !appendOnly\n ? newItems\n : prevSelectedItems.concat(newItems),\n );\n }\n };\n\n const handleRemoveItem = useCallback(\n (itemIndex?: number) => {\n focusInput();\n if (itemIndex) {\n removeItems([itemIndex]);\n }\n },\n [focusInput, removeItems],\n );\n\n const handleClear = (event: ChangeEvent<HTMLInputElement>) => {\n updateSelectedItems([]);\n resetInput();\n focusInput();\n\n if (onClear) {\n onClear(event);\n }\n\n if (popoutMode && popoutActions) {\n popoutActions.refresh();\n }\n };\n\n const cursorAtInputStart = () =>\n getCursorPosition(inputRef) === 0 && Boolean(selectedItems.length);\n\n const highlightAtPillGroupEnd = () =>\n highlightedIndex === selectedItems.length - 1;\n\n const pillGroupKeyDownHandlers: {\n [key: string]: KeyboardEventHandler<HTMLInputElement>;\n } = {\n ArrowLeft: (event) => {\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? selectedItems.length - 1\n : Math.max(0, prevHighlightedIndex - 1),\n );\n },\n ArrowRight: (event) => {\n if (highlightAtPillGroupEnd()) {\n return setHighlightedIndex(undefined);\n }\n\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1),\n );\n },\n Backspace: (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.max(0, prevHighlightedIndex - 1),\n );\n },\n Home: (event) => {\n event.preventDefault();\n setHighlightedIndex(0);\n },\n End: (event) => {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n },\n Enter: (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n },\n Delete: (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n },\n \" \": (event) => {\n event.preventDefault();\n handleRemoveItem(highlightedIndex);\n },\n };\n\n const inputKeyDownHandlers: {\n [key: string]: KeyboardEventHandler<HTMLInputElement>;\n } = {\n ArrowLeft: (event) => {\n if (cursorAtInputStart()) {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Backspace: () => {\n if (hasActiveItems) {\n removeItems(activeIndices);\n } else if (cursorAtInputStart()) {\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Delete: () => {\n if (hasActiveItems) {\n removeItems(activeIndices);\n }\n },\n Enter: (event) => {\n event.preventDefault();\n\n if (hasActiveItems) {\n removeItems(activeIndices);\n } else {\n handleAddItems(value);\n }\n },\n };\n\n const handleCtrlModifierKeyDown: InputHTMLAttributes<HTMLInputElement>[\"onKeyDown\"] =\n (event) => {\n const win = ownerWindow(event.target as HTMLElement);\n const supportClipboard = win.navigator?.clipboard;\n\n switch (event.key.toUpperCase()) {\n case \"A\":\n // Select all\n setHighlightedIndex(undefined);\n setActiveIndices(\n Array.from({ length: selectedItems.length }, (_, index) => index),\n );\n break;\n case \"C\":\n // Copy\n copy(\n activeIndices\n .map((index) => itemToString(selectedItems[index]))\n .concat(value != null ? String(value).trim() : \"\")\n .filter(Boolean)\n .join(primaryDelimiter),\n )\n .then((result) => {\n preventBlurOnCopy.current = !supportClipboard;\n return result;\n })\n .catch((error) => {\n console.error(error);\n });\n break;\n case \"V\":\n // Paste - do nothing and let handleChange deal with it\n break;\n case \"ARROWLEFT\":\n pillGroupKeyDownHandlers.ArrowLeft(event);\n break;\n case \"ARROWRIGHT\":\n pillGroupKeyDownHandlers.ArrowRight(event);\n break;\n case \"BACKSPACE\":\n if (cursorAtInputStart()) {\n handleRemoveItem(selectedItems.length - 1);\n }\n break;\n case \"CONTROL\":\n case \"META\":\n // Do nothing\n break;\n default:\n // Otherwise, reset active items\n setActiveIndices([]);\n }\n };\n\n const handleCommonKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const eventKey = event.key.toUpperCase();\n\n if (eventKey === \"ESCAPE\") {\n event.preventDefault();\n resetInput();\n } else if (eventKey === \"TAB\" && !disableAddOnBlur) {\n // Pressing Tab adds a new value\n handleAddItems(value);\n }\n };\n\n const handleKeyDown: InputHTMLAttributes<HTMLInputElement>[\"onKeyDown\"] = (\n event,\n ) => {\n if (onKeyDown) {\n onKeyDown(event);\n }\n if (event.defaultPrevented) {\n return;\n }\n if (\n event.ctrlKey \|\|\n event.metaKey \|\|\n [\"CONTROL\", \"META\"].indexOf(event.key.toUpperCase()) !== -1\n ) {\n handleCtrlModifierKeyDown(event);\n } else {\n let handler: KeyboardEventHandler<HTMLInputElement> \| undefined;\n\n if (highlightedIndex == null) {\n handler = inputKeyDownHandlers[event.key];\n setActiveIndices([]);\n } else {\n handler = pillGroupKeyDownHandlers[event.key];\n }\n\n if (handler != null) {\n handler(event);\n } else {\n handleCommonKeyDown(event);\n }\n }\n\n if (popoutMode && popoutActions) {\n popoutActions.refresh();\n }\n };\n\n const state: TokenizedInputState<Item> = {\n value,\n selectedItems,\n activeIndices,\n highlightedIndex,\n expanded,\n focused: !inFormField && focused,\n };\n\n const eventHandlers = {\n // onFocus is a focus on the expand button\n // It can also be triggered by a focus on the input\n onFocus,\n // onBlur is a blur from the expand button when it's collapsed\n // It can also be triggered by the clear button\n onBlur: expanded ? handleBlur : onBlur,\n onClick: handleClick,\n onInputSelect,\n onInputChange: handleInputChange,\n onInputFocus: handleInputFocus,\n onInputBlur: handleInputBlur,\n onKeyDown: handleKeyDown,\n onRemoveItem: handleRemoveItem,\n onClear: handleClear,\n };\n\n return {\n inputRef,\n state,\n helpers: {\n cancelBlur,\n setValue,\n setSelectedItems,\n setHighlightedIndex,\n setFocused,\n updateExpanded,\n },\n inputProps: {\n id,\n itemToString,\n disabled,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n ...state,\n ...restProps,\n ...(disabled ? {} : eventHandlers),\n },\n };\n}\n\nconst validateProps = function validateProps<Item>(\n props: TokenizedInputProps<Item>,\n) {\n if (process.env.NODE_ENV !== \"production\") {\n const { delimiter } = props;\n\n const invalidDelimiter = Array.isArray(delimiter)\n ? delimiter.every(isChar)\n : isChar(delimiter);\n\n // biome-ignore lint/correctness/useHookAtTopLevel: NODE_ENV is invariant at runtime.\n useEffect(() => {\n if (invalidDelimiter) {\n console.warn(\n \"TokenizedInput delimiter should be a single character or an array of single characters\",\n );\n }\n }, [invalidDelimiter]);\n }\n};\n\nconst isChar = (value: unknown) =>\n typeof value === \"string\" && value.length === 1;\n"],"names":["value","selectedItems","validateProps"],"mappings":"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"}

package/dist-es/tokenized-input-next/TokenizedInputNext.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltTokenizedInputNext-container {\n  width: 100%;\n}\n.saltTokenizedInputNext {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);\n  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);\n  --tokenizedInput-border: none;\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  background: var(--tokenizedInput-background);\n  border: var(--tokenizedInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: 100%;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Style applied on hover */\n.saltTokenizedInputNext:hover {\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--tokenizedInput-background-hover);\n  cursor: var(--salt-cursor-hover);\n}\n\n/* Style applied when active */\n.saltTokenizedInputNext:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--tokenizedInput-background-active);\n  cursor: var(--salt-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltTokenizedInputNext-primary {\n  --tokenizedInput-background: var(--salt-editable-primary-background);\n  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);\n  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltTokenizedInputNext-secondary {\n  --tokenizedInput-background: var(--salt-editable-secondary-background);\n  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltTokenizedInputNext-error,\n.saltTokenizedInputNext-error:hover {\n  --tokenizedInput-background: var(--salt-status-error-background);\n  --tokenizedInput-background-active: var(--salt-status-error-background);\n  --tokenizedInput-background-hover: var(--salt-status-error-background);\n  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltTokenizedInputNext-warning,\n.saltTokenizedInputNext-warning:hover {\n  --tokenizedInput-background: var(--salt-status-warning-background);\n  --tokenizedInput-background-active: var(--salt-status-warning-background);\n  --tokenizedInput-background-hover: var(--salt-status-warning-background);\n  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltTokenizedInputNext-success,\n.saltTokenizedInputNext-success:hover {\n  --tokenizedInput-background: var(--salt-status-success-background);\n  --tokenizedInput-background-active: var(--salt-status-success-background);\n  --tokenizedInput-background-hover: var(--salt-status-success-background);\n  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltTokenizedInputNext-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  flex-basis: 0;\n  height: var(--salt-text-lineHeight);\n  font: inherit;\n  letter-spacing: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n  min-width: 1px; /* requires a min width to be visible */\n}\n.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {\n  flex-grow: 1;\n  min-width: 4em; /* on expanded, use the same min-width as input*/\n}\n\n/* Style applied to placeholder */\n.saltTokenizedInputNext-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltTokenizedInputNext-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltTokenizedInputNext-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltTokenizedInputNext-focused {\n  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltTokenizedInputNext-readOnly,\n.saltTokenizedInputNext-readOnly:active,\n.saltTokenizedInputNext-readOnly:hover {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--tokenizedInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltTokenizedInputNext-disabled,\n.saltTokenizedInputNext-disabled:hover,\n.saltTokenizedInputNext-disabled:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--tokenizedInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltTokenizedInputNext-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltTokenizedInputNext.saltTokenizedInputNext-bordered {\n  --tokenizedInput-border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltTokenizedInputNext-bordered:active,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n.saltTokenizedInputNext-statusAdornment {\n  margin-left: auto;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: auto;\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: 0;\n}\n\n.saltTokenizedInputNext .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {\n  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;\n}\n.saltTokenizedInputNext-hidden {\n  display: none;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltTokenizedInputNext-container {\n  width: 100%;\n}\n.saltTokenizedInputNext {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor);\n  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);\n  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);\n  --tokenizedInput-border: none;\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  background: var(--tokenizedInput-background);\n  border: var(--tokenizedInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: 100%;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Style applied on hover */\n.saltTokenizedInputNext:hover {\n  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--tokenizedInput-background-hover);\n  cursor: var(--salt-cursor-hover);\n}\n\n/* Style applied when active */\n.saltTokenizedInputNext:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);\n  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--tokenizedInput-background-active);\n  cursor: var(--salt-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltTokenizedInputNext-primary {\n  --tokenizedInput-background: var(--salt-editable-primary-background);\n  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);\n  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltTokenizedInputNext-secondary {\n  --tokenizedInput-background: var(--salt-editable-secondary-background);\n  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltTokenizedInputNext-error,\n.saltTokenizedInputNext-error:hover {\n  --tokenizedInput-background: var(--salt-status-error-background);\n  --tokenizedInput-background-active: var(--salt-status-error-background);\n  --tokenizedInput-background-hover: var(--salt-status-error-background);\n  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltTokenizedInputNext-warning,\n.saltTokenizedInputNext-warning:hover {\n  --tokenizedInput-background: var(--salt-status-warning-background);\n  --tokenizedInput-background-active: var(--salt-status-warning-background);\n  --tokenizedInput-background-hover: var(--salt-status-warning-background);\n  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltTokenizedInputNext-success,\n.saltTokenizedInputNext-success:hover {\n  --tokenizedInput-background: var(--salt-status-success-background);\n  --tokenizedInput-background-active: var(--salt-status-success-background);\n  --tokenizedInput-background-hover: var(--salt-status-success-background);\n  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltTokenizedInputNext-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  flex-basis: 0;\n  height: var(--salt-text-lineHeight);\n  font: inherit;\n  letter-spacing: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n  min-width: 1px; /* requires a min width to be visible */\n}\n.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {\n  flex-grow: 1;\n  min-width: 4em; /* on expanded, use the same min-width as input*/\n}\n\n/* Style applied to placeholder */\n.saltTokenizedInputNext-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltTokenizedInputNext-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltTokenizedInputNext-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltTokenizedInputNext-focused {\n  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltTokenizedInputNext-readOnly,\n.saltTokenizedInputNext-readOnly:active,\n.saltTokenizedInputNext-readOnly:hover {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--tokenizedInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltTokenizedInputNext-disabled,\n.saltTokenizedInputNext-disabled:hover,\n.saltTokenizedInputNext-disabled:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--tokenizedInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltTokenizedInputNext-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltTokenizedInputNext.saltTokenizedInputNext-bordered {\n  --tokenizedInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tokenizedInput-borderColor);\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltTokenizedInputNext-bordered:active,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n.saltTokenizedInputNext-statusAdornment {\n  margin-left: auto;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: auto;\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: 0;\n}\n\n.saltTokenizedInputNext .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {\n  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;\n}\n.saltTokenizedInputNext-hidden {\n  display: none;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=TokenizedInputNext.css.js.map