npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.52 → 1.0.0-alpha.53 - Mend

@salt-ds/lab 1.0.0-alpha.52 → 1.0.0-alpha.53

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

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useDensity, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
-import { OverflowMenuIcon, CloseIcon } from '@salt-ds/icons';
+import { makePrefixer, useDensity, useIcon, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -68,6 +67,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
     window: targetWindow
   });
   const density = useDensity();
+  const { OverflowIcon, CloseIcon } = useIcon();
   const id = useId(idProp);
   const inputId = `${id}-input`;
   const expandButtonId = `${id}-expand-button`;
@@ -238,7 +238,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
             ref: useForkRef(expandButtonRef, expandButtonRefProp),
             variant: "secondary",
             ...restExpandButtonProps,
-            children: /* @__PURE__ */ jsx(OverflowMenuIcon, {
+            children: /* @__PURE__ */ jsx(OverflowIcon, {
               "aria-label": expandButtonAccessibleText === void 0 ? "expand edit" : expandButtonAccessibleText
             })
           }),

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 useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\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\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 <OverflowMenuIcon\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":";;;;;;;;;;;;;;;;;;AAkFA,MAAM,mBAAsB,GAAA,CAAA,CAAA;AAC5B,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAEtD,MAAM,iBAAA,GAAoB,CAAC,SAAA,KACzB,SAAc,KAAA,CAAA,GACV,qBACA,CAAG,EAAA,SAAA,CAAA,CAAA,EAAa,SAAY,GAAA,CAAA,GAAI,OAAU,GAAA,MAAA,CAAA,CAAA,CAAA;AAEhD,SAAS,WAAiB,OAAsC,EAAA;AAC9D,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,WAAW,IAAM,EAAA;AACnB,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN,oGAAA;AAAA,OACF,CAAA;AAAA,KACF;AAAA,GACF;AACA,EAAA,OAAO,OAAW,IAAA,IAAA,CAAA;AACpB,CAAA;AAEO,MAAM,kBAAqB,GAAA,UAAA,CAAW,SAASA,mBAAAA,CACpD,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,aAAa,EAAC;AAAA,IACd,oBAAoB,EAAC;AAAA,IACrB,SAAA;AAAA,IACA,gBAAgB,EAAC;AAAA,IACjB,gBAAgB,EAAC;AAAA,IACjB,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,mBAAA;AAAA,IACf,EAAI,EAAA,MAAA;AAAA,IACJ,eAAiB,EAAA,mBAAA;AAAA,IACjB,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA,cAAA;AAAA,IAChB,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAE3B,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,UAAU,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA,CAAA;AACnB,EAAA,MAAM,iBAAiB,CAAG,EAAA,EAAA,CAAA,cAAA,CAAA,CAAA;AAC1B,EAAA,MAAM,gBAAgB,CAAG,EAAA,EAAA,CAAA,aAAA,CAAA,CAAA;AAKzB,EAAA,MAAM,gBAAmB,GAAA,EAAA,CAAA;AAGzB,EAAM,MAAA,QAAA,GAAW,MAAgD,CAAA,EAAE,CAAA,CAAA;AACnE,EAAM,MAAA,aAAA,GAAgB,OAA+B,IAAI,CAAA,CAAA;AACzD,EAAM,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA,CAAA;AAExC,EAAA,MAAM,CAAC,eAAA,EAAiB,iBAAiB,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,cAAA,EAAgB,gBAAgB,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AAC3D,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,mBAAmB,CAAA,CAAA;AAChE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAwB,IAAI,CAAA,CAAA;AACxE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAwB,IAAI,CAAA,CAAA;AAE5E,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAA,IAAY,gBAAoB,IAAA,IAAA,CAAA;AAE1D,EAAA,MAAM,WACJ,GAAA,gBAAA,GACA,mBACC,IAAA,QAAA,GAAW,gBAAmB,GAAA,iBAAA,CAAA,CAAA;AAEjC,EAAA,MAAM,YAAe,GAAA,iBAAA;AAAA,IACnB,WAAA;AAAA,MACE,CAAC,CAAC,EAAE,WAAA,EAAa,CAAM,KAAA;AACrB,QAAkB,iBAAA,CAAA,WAAA,CAAY,QAAQ,WAAW,CAAA,CAAA;AAAA,OACnD;AAAA,MACA,CAAC,WAAW,CAAA;AAAA,KACd;AAAA,GACF,CAAA;AAEA,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AAGV,MAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAIA,EAAA,yBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,OAC1B,MAAA,IAAW,kBAAkB,IAAM,EAAA;AACjC,QAAA,mBAAA;AAAA,UACE,oBAAqB,CAAA;AAAA,YACnB,cAAgB,EAAA,cAAA;AAAA,YAChB,UAAY,EAAA,MAAA,CAAO,MAAO,CAAA,QAAA,CAAS,OAAO,CAAE,CAAA,MAAA;AAAA,cAC1C,OAAA;AAAA,aACF;AAAA,WACD,CAAA;AAAA,SACH,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IAEA,CAAC,QAAU,EAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,QAAA,IAAY,cAAc,OAAS,EAAA;AACrC,MAAM,MAAA,aAAA,GAAgB,cAAc,OAAQ,CAAA,WAAA,CAAA;AAC5C,MAAA,aAAA,CAAc,IAAK,CAAA,GAAA,CAAI,aAAe,EAAA,cAAA,IAAkB,CAAC,CAAC,CAAA,CAAA;AAAA,KAC5D;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,cAAA,EAAgB,KAAK,CAAC,CAAA,CAAA;AAEpC,EAAM,MAAA,yBAAA,GAA4B,CAChC,KACG,KAAA;AACH,IAAM,MAAA,UAAA,GAAa,KAAM,CAAA,GAAA,CAAI,MAAW,KAAA,CAAA,CAAA;AACxC,IAAA,MAAM,aACJ,GAAA;AAAA,MACE,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAQ,CAAA,KAAA,CAAM,GAAI,CAAA,WAAA,EAAa,CAAM,KAAA,CAAA,CAAA,CAAA;AAEzC,IAAA,IAAA,CAAK,UAAc,IAAA,aAAA,KAAkB,UAAW,CAAA,OAAO,CAAG,EAAA;AACxD,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,OACxB;AACA,MAAA,OAAA,CAAQ,eAAe,IAAI,CAAA,CAAA;AAC3B,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA,CAAA;AAAA,KAChC;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAEnE,IAAA,IAAI,mBAAoB,CAAA,OAAA,IAAW,OAAY,KAAA,KAAA,CAAM,GAAK,EAAA;AACxD,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA,CAAA;AAE9B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA6C,KAAA;AACjE,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,IAAI,IAAA,UAAA,CAAW,OAAO,CAAG,EAAA;AACvB,MAAA,OAAA,CAAQ,eAAe,IAAI,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,sBAAA,GAAyB,CAAC,KAAyC,KAAA;AACvE,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,IAAI,IAAA,UAAA,CAAW,OAAO,CAAG,EAAA;AACvB,MAAA,OAAA,CAAQ,WAAW,KAAK,CAAA,CAAA;AACxB,MAAA,OAAA,CAAQ,UAAW,EAAA,CAAA;AAAA,KACrB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,aAAc,CAAA,GAAA;AAAA,IACpC,CAAC,CAAA,EAAG,KAAU,KAAA,CAAA,EAAG,EAAW,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsB,QACxB,GAAA,CAAC,cAAgB,EAAA,OAAA,EAAS,GAAG,eAAe,CAAA,GAC5C,CAAC,cAAA,EAAgB,OAAO,CAAA,CAAA;AAE5B,EAAA,MAAM,gBAAmB,GAAA,SAAA;AAAA,IACvB;AAAA,MACE,UAAY,EAAA;AAAA,QACV,KAAO,EAAA;AAAA,UACL,KAAO,EAAA,UAAA;AAAA,UACP,QAAU,EAAA,UAAA;AAAA,SACZ;AAAA,QACA,YAAc,EAAA,CAAC,SAAW,EAAA,iBAAA,CAAkB,aAAc,CAAA,MAAM,CAAC,CAAA,CAC9D,MAAO,CAAA,OAAO,CACd,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,QACX,mBAAmB,mBAAoB,CAAA,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA,QAC/D,yBACE,gBAAoB,IAAA,gBAAA,IAAoB,CACpC,GAAA,CAAA,EAAG,WAAW,gBACd,CAAA,CAAA,GAAA,KAAA,CAAA;AAAA,OACR;AAAA,KACF;AAAA,IACA,UAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,cAAgB,EAAA,0BAAA;AAAA,IACb,GAAA,qBAAA;AAAA,GACD,GAAA,iBAAA,CAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA;AAAA,IAEjC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,WAAA,EAAW,eAAgB,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,QACnC,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAChC,IAAK,EAAA,SAAA;AAAA,OACP,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAc,aAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAClC,YAAM,MAAA,KAAA,GAAQ,aAAa,IAAI,CAAA,CAAA;AAE/B,YAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,cACC,MAAQ,EAAA,aAAA,CAAc,OAAQ,CAAA,KAAK,CAAM,KAAA,CAAA,CAAA;AAAA,cACzC,QAAA;AAAA,cACA,MAAA,EAAQ,oBAAoB,KAAS,IAAA,gBAAA;AAAA,cACrC,aAAa,KAAU,KAAA,gBAAA;AAAA,cACvB,EAAA,EAAI,GAAG,EAAW,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AAAA,cAClB,KAAA;AAAA,cAEA,KAAA;AAAA,cACA,WACE,EAAA,CAAC,gBAAoB,IAAA,KAAA,KAAU,cAAc,MAAS,GAAA,CAAA;AAAA,cAExD,QAAA,EAAU,WAAW,YAAe,GAAA,KAAA,CAAA;AAAA,cACpC,QAAA;AAAA,aANK,EAAA,CAAA,EAAG,SAAS,KAOnB,CAAA,CAAA,CAAA,CAAA;AAAA,WAEH,CAAA;AAAA,0BACA,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,iBAAA,EAAiB,CAAC,cAAA,EAAgB,OAAS,EAAA,cAAc,EACtD,MAAO,CAAA,OAAO,CACd,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,YACX,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAG,EAAA;AAAA,cAC5C,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,gBAAA;AAAA,aAC5B,CAAA;AAAA,YACD,QAAA;AAAA,YACA,EAAI,EAAA,cAAA;AAAA,YACJ,MAAA;AAAA,YACA,OAAS,EAAA,YAAA;AAAA,YACT,OAAA;AAAA,YACA,SAAW,EAAA,yBAAA;AAAA,YACX,GAAA,EAAK,UAAW,CAAA,eAAA,EAAiB,mBAAmB,CAAA;AAAA,YACpD,OAAQ,EAAA,WAAA;AAAA,YACP,GAAG,qBAAA;AAAA,YAEJ,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,cACC,YAAA,EACE,0BAA+B,KAAA,KAAA,CAAA,GAC3B,aACA,GAAA,0BAAA;AAAA,aAER,CAAA;AAAA,WACF,CAAA;AAAA,0BACC,GAAA,CAAAC,WAAA,EAAA;AAAA,YACE,GAAG,gBAAA;AAAA,YACJ,WAAW,IAAK,CAAA,YAAA,CAAa,OAAO,CAAG,EAAA,YAAA,CAAa,YAAY,CAAG,EAAA;AAAA,cACjE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,gBAAA;AAAA,aAC3B,CAAA;AAAA,YACD,QAAA;AAAA,YACA,EAAI,EAAA,OAAA;AAAA,YAGJ,MAAQ,EAAA,WAAA;AAAA,YACR,QAAU,EAAA,aAAA;AAAA,YACV,OAAS,EAAA,YAAA;AAAA,YACT,SAAA;AAAA,YACA,OAAS,EAAA,gBAAA;AAAA,YACT,QAAU,EAAA,aAAA;AAAA,YACV,YAAA,EAAc,sBAAO,GAAA,CAAA,UAAA,EAAA;AAAA,cAAW,GAAK,EAAA,aAAA;AAAA,cAAe,KAAA;AAAA,aAAc,CAAA;AAAA,YAClE,KAAA;AAAA,YACA,GAAK,EAAA,QAAA;AAAA,WACP,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,aAAa,CAAG,EAAA;AAAA,UAC3C,CAAC,YAAa,CAAA,QAAQ,IAAI,CAAC,QAAA,IAAY,cAAc,MAAW,KAAA,CAAA;AAAA,SACjE,CAAA;AAAA,QACD,QAAA;AAAA,QACA,EAAI,EAAA,aAAA;AAAA,QACJ,MAAA;AAAA,QACA,OAAS,EAAA,OAAA;AAAA,QACT,OAAS,EAAA,sBAAA;AAAA,QACT,GAAK,EAAA,cAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QACR,aAAY,EAAA,cAAA;AAAA,QAEZ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,UAAU,YAAW,EAAA,aAAA;AAAA,SAAc,CAAA;AAAA,OACtC,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
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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"}

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
-import { CloseIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
 import { getWidth } from './useWidth.js';
@@ -22,6 +21,7 @@ const InputPill = memo(function InputPill2(props) {
   } = props;
   const ref = useRef(null);
   const isRemovable = Boolean(onDelete);
+  const { CloseIcon } = useIcon();
   useIsomorphicLayoutEffect(() => {
     if (!isRemovable && pillsRef.current) {
       pillsRef.current[index] = getWidth(ref.current);

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 useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { ~~CloseIcon } from \"@salt-ds/icons\";\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\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,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,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;~~AAIpC~~,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACtC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEJ,GAAG,SAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAI,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7B,CAAA,CAAA;AAEJ,CAAC;;;;"}
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,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,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AACpC,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA,CAAA;AAG9B,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACtC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEJ,GAAG,SAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAI,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7B,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId, useForkRef, StatusAdornment, Button } from '@salt-ds/core';
-import { CloseIcon, OverflowMenuIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useId, useForkRef, StatusAdornment, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -67,6 +66,7 @@ const TokenizedInputNext = forwardRef(function TokenizedInputNext2({
     "aria-describedby": ariaDescribedBy,
     ...restProps
   } = inputProps;
+  const { OverflowIcon, CloseIcon } = useIcon();
   const id = useId(idProp);
   const inputId = `${id}-input`;
   const expandButtonId = `${id}-expand-button`;
@@ -223,7 +223,7 @@ const TokenizedInputNext = forwardRef(function TokenizedInputNext2({
                 variant: "secondary",
                 "data-testid": "expand-button",
                 ...restExpandButtonProps,
-                children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
+                children: /* @__PURE__ */ jsx(OverflowIcon, {})
               })
             ]
           }),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenizedInputNext.js","sources":["../src/tokenized-input-next/TokenizedInputNext.tsx"],"sourcesContent":["import {\n type AdornmentValidationStatus,\n Button,\n type ButtonProps,\n type NecessityType,\n StatusAdornment,\n type ValidationStatus,\n makePrefixer,\n useForkRef,\n useId,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEvent,\n type FocusEventHandler,\n type ForwardedRef,\n type HTMLAttributes,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type ReactEventHandler,\n type Ref,\n type SyntheticEvent,\n type TextareaHTMLAttributes,\n forwardRef,\n useRef,\n} from \"react\";\nimport tokenizedInputCss from \"./TokenizedInputNext.css\";\nimport { InputPill } from \"./internal/InputPill\";\nimport {\n type TokenizedInputNextHelpers,\n type TokenizedInputNextState,\n useTokenizedInputNext,\n} from \"./useTokenizedInputNext\";\n\ntype ChangeHandler<Item> = (\n event: SyntheticEvent,\n selectedItems: Item[] \| undefined,\n) => void;\n\ntype ExpandButtonProps = Pick<\n ButtonProps,\n \"role\" \| \"aria-roledescription\" \| \"aria-describedby\"\n> & { \"aria-label\"?: string };\n\nexport interface TokenizedInputNextProps<Item>\n extends Partial<TokenizedInputNextState<Item>>,\n Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onFocus\" \| \"onBlur\" \| \"onChange\" \| \"onKeyUp\" \| \"onKeyDown\"\n > {\n ExpandButtonProps?: ExpandButtonProps;\n disabled?: boolean;\n focused?: boolean;\n expandButtonRef?: Ref<HTMLButtonElement>;\n onBlur?: FocusEventHandler<HTMLTextAreaElement \| HTMLButtonElement>;\n onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement \| HTMLButtonElement>;\n // Can key down on either input or expand button\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement \| HTMLButtonElement>;\n onRemoveItem?: (event: SyntheticEvent, index: number) => void;\n onInputBlur?: FocusEventHandler<HTMLTextAreaElement>;\n onInputFocus?: FocusEventHandler<HTMLTextAreaElement>;\n onInputChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onClick?: ReactEventHandler;\n onClear?: ReactEventHandler;\n delimiters?: string[];\n disableAddOnBlur?: boolean;\n defaultSelected?: Item[];\n onChange?: ChangeHandler<Item>;\n onCollapse?: ReactEventHandler;\n onExpand?: ReactEventHandler;\n\n /// from input\n /*\n Validation status.\n /\n validationStatus?: Omit<ValidationStatus, \"info\">;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n /\n textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n /\n Optional ref for the textarea component\n /\n textAreaRef?: Ref<HTMLTextAreaElement>;\n necessity?: NecessityType;\n /\n Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" \| \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltTokenizedInputNext\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n itemCount === 0\n ? \"no item selected\"\n : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nexport const TokenizedInputNext = forwardRef(function TokenizedInputNext<Item>(\n {\n textAreaRef: textAreaRefProp,\n textAreaProps = {},\n variant = \"primary\",\n ...rest\n }: TokenizedInputNextProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tokenized-input-next\",\n css: tokenizedInputCss,\n window: targetWindow,\n });\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\n\n const { refs, helpers, inputProps, firstHiddenIndex } =\n useTokenizedInputNext(rest);\n\n const {\n textAreaRef: textAreaHookRef,\n pillsRef,\n clearButtonRef,\n expandButtonRef,\n statusAdornmentRef,\n containerRef: containerHookRef,\n } = refs;\n\n const {\n ExpandButtonProps = {\n \"aria-label\": \"expand edit\",\n },\n className,\n activeIndices = [],\n selectedItems = [],\n highlightedIndex,\n value,\n expanded,\n disabled,\n onBlur,\n onKeyDown,\n onRemoveItem,\n onInputChange,\n focused,\n validationStatus,\n readOnly,\n onInputFocus,\n onInputBlur,\n onClear,\n onClick,\n onKeyUp,\n id: idProp,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...restProps\n } = inputProps;\n\n const id = useId(idProp);\n const inputId = `${id}-input`;\n const expandButtonId = `${id}-expand-button`;\n const clearButtonId = `${id}-clear-button`;\n\n const keydownExpandButton = useRef(false);\n const containerRef = useForkRef(ref, containerHookRef);\n const textAreaRef = useForkRef(textAreaHookRef, textAreaRefProp);\n const showExpandButton = !expanded && firstHiddenIndex != null;\n\n const hasHelpers = (helpers: TokenizedInputNextHelpers<Item>) => {\n if (process.env.NODE_ENV !== \"production\") {\n if (helpers == null) {\n console.warn(\n 'TokenizedInputNext is used without helpers. You should pass in \"helpers\" from \"useTokenizedInputNext\".',\n );\n }\n }\n return helpers != null;\n };\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(event, true);\n keydownExpandButton.current = true;\n }\n };\n\n const handleInputKeyUp = (\n event: KeyboardEvent<HTMLButtonElement \| HTMLTextAreaElement>,\n ) => {\n // Call keydown again if the initial event has been used to expand the input\n if (keydownExpandButton.current && \"Enter\" !== event.key) {\n keydownExpandButton.current = false;\n onKeyDown?.(event);\n }\n onKeyUp?.(event);\n };\n\n const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n if (hasHelpers(helpers)) {\n helpers.updateExpanded(event, true);\n }\n };\n\n const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n event.stopPropagation();\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 expandedWithItems =\n expanded && !showExpandButton && selectedItems.length > 0;\n const { \"aria-label\": expandButtonAccessibleText, ...restExpandButtonProps } =\n ExpandButtonProps;\n\n return (\n <div className={withBaseName(\"container\")}>\n <span\n aria-owns={selectedItemIds.join(\" \")}\n className={withBaseName(\"hidden\")}\n role=\"listbox\"\n />\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"expanded\")]: expanded,\n [withBaseName(\"focused\")]: !disabled && focused,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(validationStatus as string)]: validationStatus,\n },\n className,\n )}\n ref={containerRef}\n onClick={onClick}\n // Tab index allows the div to be found as related target and prevents it closing when a click in happens\n tabIndex={-1}\n {...restProps}\n >\n {selectedItems.length > 0 &&\n selectedItems.map((item, index) => {\n const label = String(item);\n return (\n <InputPill\n disabled={disabled}\n hidden={showExpandButton && index >= firstHiddenIndex}\n highlighted={\n index === highlightedIndex \|\|\n activeIndices.indexOf(index) !== -1\n }\n id={`${id}-pill-${index}`}\n index={index}\n key={`${index}-${label}`}\n label={label}\n onClose={\n expanded && !readOnly\n ? (event) => onRemoveItem?.(event, index)\n : undefined\n }\n pillsRef={pillsRef}\n />\n );\n })}\n <textarea\n aria-labelledby={clsx(inputAriaLabelledBy, textAreaLabelledBy)}\n aria-describedby={clsx(ariaDescribedBy, textAreaDescribedBy)}\n aria-label={clsx(ariaLabel, getItemsAriaLabel(selectedItems.length))}\n aria-activedescendant={\n highlightedIndex && highlightedIndex >= 0\n ? `${id}-pill-${highlightedIndex}`\n : undefined\n }\n disabled={disabled}\n id={inputId}\n readOnly={readOnly}\n ref={textAreaRef}\n required={textAreaRequired}\n rows={1}\n tabIndex={disabled ? -1 : 0}\n value={value}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n onChange={onInputChange}\n onBlur={onInputBlur}\n onFocus={!disabled ? onInputFocus : undefined}\n onKeyDown={onKeyDown}\n {...restTextAreaProps}\n />\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!disabled && !readOnly && validationStatus && (\n <StatusAdornment\n className={withBaseName(\"statusAdornment\")}\n ref={statusAdornmentRef}\n status={validationStatus as AdornmentValidationStatus}\n />\n )}\n {expandedWithItems && !readOnly && (\n <Button\n className={withBaseName(\"endAdornment\")}\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 aria-label=\"clear input\"\n >\n <CloseIcon aria-hidden />\n </Button>\n )}\n {showExpandButton && (\n <Button\n className={withBaseName(\"endAdornment\")}\n aria-label={expandButtonAccessibleText}\n aria-labelledby={clsx(ariaLabelledBy, inputId, expandButtonId)}\n disabled={disabled}\n id={expandButtonId}\n onBlur={onBlur}\n onClick={handleExpand}\n onKeyDown={handleExpandButtonKeyDown}\n onKeyUp={handleInputKeyUp}\n ref={expandButtonRef}\n variant=\"secondary\"\n data-testid=\"expand-button\"\n {...restExpandButtonProps}\n >\n <OverflowMenuIcon />\n </Button>\n )}\n </div>\n\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n </div>\n );\n});\n"],"names":["TokenizedInputNext","tokenizedInputCss","helpers"],"mappings":"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"}
1	+ {"version":3,"file":"TokenizedInputNext.js","sources":["../src/tokenized-input-next/TokenizedInputNext.tsx"],"sourcesContent":["import {\n type AdornmentValidationStatus,\n Button,\n type ButtonProps,\n type NecessityType,\n StatusAdornment,\n type ValidationStatus,\n makePrefixer,\n useForkRef,\n useIcon,\n useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEvent,\n type FocusEventHandler,\n type ForwardedRef,\n type HTMLAttributes,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type ReactEventHandler,\n type Ref,\n type SyntheticEvent,\n type TextareaHTMLAttributes,\n forwardRef,\n useRef,\n} from \"react\";\nimport tokenizedInputCss from \"./TokenizedInputNext.css\";\nimport { InputPill } from \"./internal/InputPill\";\nimport {\n type TokenizedInputNextHelpers,\n type TokenizedInputNextState,\n useTokenizedInputNext,\n} from \"./useTokenizedInputNext\";\n\ntype ChangeHandler<Item> = (\n event: SyntheticEvent,\n selectedItems: Item[] \| undefined,\n) => void;\n\ntype ExpandButtonProps = Pick<\n ButtonProps,\n \"role\" \| \"aria-roledescription\" \| \"aria-describedby\"\n> & { \"aria-label\"?: string };\n\nexport interface TokenizedInputNextProps<Item>\n extends Partial<TokenizedInputNextState<Item>>,\n Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onFocus\" \| \"onBlur\" \| \"onChange\" \| \"onKeyUp\" \| \"onKeyDown\"\n > {\n ExpandButtonProps?: ExpandButtonProps;\n disabled?: boolean;\n focused?: boolean;\n expandButtonRef?: Ref<HTMLButtonElement>;\n onBlur?: FocusEventHandler<HTMLTextAreaElement \| HTMLButtonElement>;\n onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement \| HTMLButtonElement>;\n // Can key down on either input or expand button\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement \| HTMLButtonElement>;\n onRemoveItem?: (event: SyntheticEvent, index: number) => void;\n onInputBlur?: FocusEventHandler<HTMLTextAreaElement>;\n onInputFocus?: FocusEventHandler<HTMLTextAreaElement>;\n onInputChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onClick?: ReactEventHandler;\n onClear?: ReactEventHandler;\n delimiters?: string[];\n disableAddOnBlur?: boolean;\n defaultSelected?: Item[];\n onChange?: ChangeHandler<Item>;\n onCollapse?: ReactEventHandler;\n onExpand?: ReactEventHandler;\n\n /// from input\n /*\n Validation status.\n /\n validationStatus?: Omit<ValidationStatus, \"info\">;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n /\n textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n /\n Optional ref for the textarea component\n /\n textAreaRef?: Ref<HTMLTextAreaElement>;\n necessity?: NecessityType;\n /\n Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" \| \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltTokenizedInputNext\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n itemCount === 0\n ? \"no item selected\"\n : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nexport const TokenizedInputNext = forwardRef(function TokenizedInputNext<Item>(\n {\n textAreaRef: textAreaRefProp,\n textAreaProps = {},\n variant = \"primary\",\n ...rest\n }: TokenizedInputNextProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tokenized-input-next\",\n css: tokenizedInputCss,\n window: targetWindow,\n });\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\n\n const { refs, helpers, inputProps, firstHiddenIndex } =\n useTokenizedInputNext(rest);\n\n const {\n textAreaRef: textAreaHookRef,\n pillsRef,\n clearButtonRef,\n expandButtonRef,\n statusAdornmentRef,\n containerRef: containerHookRef,\n } = refs;\n\n const {\n ExpandButtonProps = {\n \"aria-label\": \"expand edit\",\n },\n className,\n activeIndices = [],\n selectedItems = [],\n highlightedIndex,\n value,\n expanded,\n disabled,\n onBlur,\n onKeyDown,\n onRemoveItem,\n onInputChange,\n focused,\n validationStatus,\n readOnly,\n onInputFocus,\n onInputBlur,\n onClear,\n onClick,\n onKeyUp,\n id: idProp,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...restProps\n } = inputProps;\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 const keydownExpandButton = useRef(false);\n const containerRef = useForkRef(ref, containerHookRef);\n const textAreaRef = useForkRef(textAreaHookRef, textAreaRefProp);\n const showExpandButton = !expanded && firstHiddenIndex != null;\n\n const hasHelpers = (helpers: TokenizedInputNextHelpers<Item>) => {\n if (process.env.NODE_ENV !== \"production\") {\n if (helpers == null) {\n console.warn(\n 'TokenizedInputNext is used without helpers. You should pass in \"helpers\" from \"useTokenizedInputNext\".',\n );\n }\n }\n return helpers != null;\n };\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(event, true);\n keydownExpandButton.current = true;\n }\n };\n\n const handleInputKeyUp = (\n event: KeyboardEvent<HTMLButtonElement \| HTMLTextAreaElement>,\n ) => {\n // Call keydown again if the initial event has been used to expand the input\n if (keydownExpandButton.current && \"Enter\" !== event.key) {\n keydownExpandButton.current = false;\n onKeyDown?.(event);\n }\n onKeyUp?.(event);\n };\n\n const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n if (hasHelpers(helpers)) {\n helpers.updateExpanded(event, true);\n }\n };\n\n const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n event.stopPropagation();\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 expandedWithItems =\n expanded && !showExpandButton && selectedItems.length > 0;\n const { \"aria-label\": expandButtonAccessibleText, ...restExpandButtonProps } =\n ExpandButtonProps;\n\n return (\n <div className={withBaseName(\"container\")}>\n <span\n aria-owns={selectedItemIds.join(\" \")}\n className={withBaseName(\"hidden\")}\n role=\"listbox\"\n />\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"expanded\")]: expanded,\n [withBaseName(\"focused\")]: !disabled && focused,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(validationStatus as string)]: validationStatus,\n },\n className,\n )}\n ref={containerRef}\n onClick={onClick}\n // Tab index allows the div to be found as related target and prevents it closing when a click in happens\n tabIndex={-1}\n {...restProps}\n >\n {selectedItems.length > 0 &&\n selectedItems.map((item, index) => {\n const label = String(item);\n return (\n <InputPill\n disabled={disabled}\n hidden={showExpandButton && index >= firstHiddenIndex}\n highlighted={\n index === highlightedIndex \|\|\n activeIndices.indexOf(index) !== -1\n }\n id={`${id}-pill-${index}`}\n index={index}\n key={`${index}-${label}`}\n label={label}\n onClose={\n expanded && !readOnly\n ? (event) => onRemoveItem?.(event, index)\n : undefined\n }\n pillsRef={pillsRef}\n />\n );\n })}\n <textarea\n aria-labelledby={clsx(inputAriaLabelledBy, textAreaLabelledBy)}\n aria-describedby={clsx(ariaDescribedBy, textAreaDescribedBy)}\n aria-label={clsx(ariaLabel, getItemsAriaLabel(selectedItems.length))}\n aria-activedescendant={\n highlightedIndex && highlightedIndex >= 0\n ? `${id}-pill-${highlightedIndex}`\n : undefined\n }\n disabled={disabled}\n id={inputId}\n readOnly={readOnly}\n ref={textAreaRef}\n required={textAreaRequired}\n rows={1}\n tabIndex={disabled ? -1 : 0}\n value={value}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n onChange={onInputChange}\n onBlur={onInputBlur}\n onFocus={!disabled ? onInputFocus : undefined}\n onKeyDown={onKeyDown}\n {...restTextAreaProps}\n />\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!disabled && !readOnly && validationStatus && (\n <StatusAdornment\n className={withBaseName(\"statusAdornment\")}\n ref={statusAdornmentRef}\n status={validationStatus as AdornmentValidationStatus}\n />\n )}\n {expandedWithItems && !readOnly && (\n <Button\n className={withBaseName(\"endAdornment\")}\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 aria-label=\"clear input\"\n >\n <CloseIcon aria-hidden />\n </Button>\n )}\n {showExpandButton && (\n <Button\n className={withBaseName(\"endAdornment\")}\n aria-label={expandButtonAccessibleText}\n aria-labelledby={clsx(ariaLabelledBy, inputId, expandButtonId)}\n disabled={disabled}\n id={expandButtonId}\n onBlur={onBlur}\n onClick={handleExpand}\n onKeyDown={handleExpandButtonKeyDown}\n onKeyUp={handleInputKeyUp}\n ref={expandButtonRef}\n variant=\"secondary\"\n data-testid=\"expand-button\"\n {...restExpandButtonProps}\n >\n <OverflowIcon />\n </Button>\n )}\n </div>\n\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n </div>\n );\n});\n"],"names":["TokenizedInputNext","tokenizedInputCss","helpers"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer, useIsomorphicLayoutEffect, Tooltip, Pill } from '@salt-ds/core';
-import { CloseIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useIsomorphicLayoutEffect, Tooltip, Pill } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -26,6 +25,7 @@ const InputPill = memo(function InputPill2(props) {
     css: css_248z,
     window: targetWindow
   });
+  const { CloseIcon } = useIcon();
   const ref = useRef(null);
   const [isEllipsisActive, setEllipsisActive] = useState(false);
   const isRemovable = Boolean(onClose);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputPill.js","sources":["../src/tokenized-input-next/internal/InputPill.tsx"],"sourcesContent":["import {\n Pill,\n type PillProps,\n Tooltip,\n makePrefixer,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { ~~CloseIcon } from \"@salt-ds/icons\";\nimport {~~ useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type MutableRefObject,\n type SyntheticEvent,\n memo,\n useRef,\n useState,\n} from \"react\";\nimport inputPillCss from \"./InputPill.css\";\nimport { getWidth } from \"./useWidth\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n /*\n A 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 Whether the pill is the last visible one within Input.\n /\n lastVisible?: boolean;\n /\n Pill label.\n /\n label?: string;\n /\n Whether the pill is highlighted.\n /\n highlighted?: boolean;\n\n /\n Callback when pill is deleted.\n */\n onClose?: (event: SyntheticEvent, index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n const {\n className,\n hidden,\n highlighted,\n index,\n label,\n onClose,\n pillsRef,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-pill\",\n css: inputPillCss,\n window: targetWindow,\n });\n\n const ref = useRef<HTMLButtonElement \| null>(null);\n const [isEllipsisActive, setEllipsisActive] = useState(false);\n const isRemovable = Boolean(onClose);\n\n // useIsomorphicLayoutEffect to match the calcFirstHiddenIndex\n // We need to collect widths before the calculation\n useIsomorphicLayoutEffect(() => {\n const text = ref?.current?.firstElementChild as HTMLElement;\n if (!isRemovable && pillsRef.current) {\n pillsRef.current[index] = getWidth(ref.current);\n }\n setEllipsisActive(text?.offsetWidth < text?.scrollWidth);\n }, [pillsRef, index, isRemovable]);\n\n useIsomorphicLayoutEffect(\n () => () => {\n pillsRef.current[index] = undefined;\n },\n [pillsRef, index],\n );\n\n const handleClose = (event: SyntheticEvent) => {\n onClose?.(event, index);\n };\n return (\n <Tooltip content={label} disabled={!isEllipsisActive}>\n <Pill\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"pillHighlighted\")]: highlighted,\n [withBaseName(\"expanded\")]: isRemovable,\n [withBaseName(\"hidden\")]: hidden,\n },\n className,\n )}\n tabIndex={-1}\n onClick={isRemovable ? handleClose : undefined}\n ref={ref}\n role=\"option\"\n {...rest}\n >\n <span className={withBaseName(\"label\")}>{label}</span>\n {isRemovable && <CloseIcon />}\n </Pill>\n </Tooltip>\n );\n});\n"],"names":["InputPill","inputPillCss"],"mappings":"~~;;;;;;;;;;~~AAqBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AA8B1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,gBAAA,EAAkB,iBAAiB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5D,EAAM,MAAA,WAAA,GAAc,QAAQ,OAAO,CAAA,CAAA;AAInC,EAAA,yBAAA,CAA0B,MAAM;~~AA3ElC~~,IAAA,IAAA,EAAA,CAAA;~~AA4EI~~,IAAM,MAAA,IAAA,GAAA,CAAO,EAAK,GAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,OAAA,KAAL,IAAc,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,iBAAA,CAAA;AAC3B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AACA,IAAkB,iBAAA,CAAA,CAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,WAAc,KAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,WAAW,CAAA,CAAA,CAAA;AAAA,GACtD,EAAA,CAAC,QAAU,EAAA,KAAA,EAAO,WAAW,CAAC,CAAA,CAAA;AAEjC,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA0B,KAAA;AAC7C,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAU,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACnB,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,KAAA;AAAA,IAAO,UAAU,CAAC,gBAAA;AAAA,IAClC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,UACnC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,WAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,QAAU,EAAA,CAAA,CAAA;AAAA,MACV,OAAA,EAAS,cAAc,WAAc,GAAA,KAAA,CAAA;AAAA,MACrC,GAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,QAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAC7B,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"InputPill.js","sources":["../src/tokenized-input-next/internal/InputPill.tsx"],"sourcesContent":["import {\n Pill,\n type PillProps,\n Tooltip,\n makePrefixer,\n useIcon,\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 MutableRefObject,\n type SyntheticEvent,\n memo,\n useRef,\n useState,\n} from \"react\";\nimport inputPillCss from \"./InputPill.css\";\nimport { getWidth } from \"./useWidth\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n /*\n A 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 Whether the pill is the last visible one within Input.\n /\n lastVisible?: boolean;\n /\n Pill label.\n /\n label?: string;\n /\n Whether the pill is highlighted.\n /\n highlighted?: boolean;\n\n /\n Callback when pill is deleted.\n */\n onClose?: (event: SyntheticEvent, index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n const {\n className,\n hidden,\n highlighted,\n index,\n label,\n onClose,\n pillsRef,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-pill\",\n css: inputPillCss,\n window: targetWindow,\n });\n\n const { CloseIcon } = useIcon();\n const ref = useRef<HTMLButtonElement \| null>(null);\n const [isEllipsisActive, setEllipsisActive] = useState(false);\n const isRemovable = Boolean(onClose);\n\n // useIsomorphicLayoutEffect to match the calcFirstHiddenIndex\n // We need to collect widths before the calculation\n useIsomorphicLayoutEffect(() => {\n const text = ref?.current?.firstElementChild as HTMLElement;\n if (!isRemovable && pillsRef.current) {\n pillsRef.current[index] = getWidth(ref.current);\n }\n setEllipsisActive(text?.offsetWidth < text?.scrollWidth);\n }, [pillsRef, index, isRemovable]);\n\n useIsomorphicLayoutEffect(\n () => () => {\n pillsRef.current[index] = undefined;\n },\n [pillsRef, index],\n );\n\n const handleClose = (event: SyntheticEvent) => {\n onClose?.(event, index);\n };\n return (\n <Tooltip content={label} disabled={!isEllipsisActive}>\n <Pill\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"pillHighlighted\")]: highlighted,\n [withBaseName(\"expanded\")]: isRemovable,\n [withBaseName(\"hidden\")]: hidden,\n },\n className,\n )}\n tabIndex={-1}\n onClick={isRemovable ? handleClose : undefined}\n ref={ref}\n role=\"option\"\n {...rest}\n >\n <span className={withBaseName(\"label\")}>{label}</span>\n {isRemovable && <CloseIcon />}\n </Pill>\n </Tooltip>\n );\n});\n"],"names":["InputPill","inputPillCss"],"mappings":"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"}

package/dist-es/toolbar/overflow-panel/OverflowPanel.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useCallback, cloneElement, createElement } from 'react';
-import { makePrefixer, useIdMemo, useControlled, Button } from '@salt-ds/core';
-import { OverflowMenuIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useIdMemo, useControlled, Button } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { ToolbarField } from '../toolbar-field/ToolbarField.js';
 import { OverflowSeparator } from './OverflowSeparator.js';
@@ -35,6 +34,7 @@ const OverflowPanel = forwardRef(function DropdownPanel({
     css: css_248z,
     window: targetWindow
   });
+  const { OverflowIcon } = useIcon();
   const id = useIdMemo();
   const collectionHook = useCollectionItems({
     id,
@@ -66,7 +66,7 @@ const OverflowPanel = forwardRef(function DropdownPanel({
     setIsOpen(open);
     onOpenChange == null ? void 0 : onOpenChange(open);
   };
-  const getTriggerButtonIcon = () => (triggerButtonIcon != null ? triggerButtonIcon : triggerButtonLabel === void 0) ? /* @__PURE__ */ jsx(OverflowMenuIcon, {}) : void 0;
+  const getTriggerButtonIcon = () => (triggerButtonIcon != null ? triggerButtonIcon : triggerButtonLabel === void 0) ? /* @__PURE__ */ jsx(OverflowIcon, {}) : void 0;
   return /* @__PURE__ */ jsxs(DropdownBase, {
     ...props,
     className: clsx(withBaseName(), className),

package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { ~~OverflowMenuIcon } from \"@salt-ds/icons\";\nimport {~~ clsx } from \"clsx\";\nimport {\n type ForwardedRef,\n type MouseEvent,\n type ReactElement,\n cloneElement,\n forwardRef,\n useCallback,\n useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n useCollectionItems,\n useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n /*\n Trigger button icon\n /\n triggerButtonIcon?: JSX.Element;\n /\n Trigger button text\n */\n triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n {\n children,\n className,\n defaultIsOpen,\n isOpen: isOpenProp,\n onOpenChange,\n triggerButtonIcon,\n triggerButtonLabel,\n ...props\n }: DropdownPanelProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overflow-panel\",\n css: overflowPanelCss,\n window: targetWindow,\n });\n\n const id = useId();\n const collectionHook = useCollectionItems<ReactElement>({\n id,\n children,\n });\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen \|\| false,\n name: \"DropdownPanel\",\n });\n\n const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n useKeyboardNavigationPanel({\n cycleFocus: true,\n defaultHighlightedIndex: 0,\n focusOnHighlight: true,\n indexPositions: collectionHook.data,\n });\n\n const focusTrigger = useCallback(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, []);\n\n const setPanelRef = useCallback((el: HTMLElement \| null) => el?.focus(), []);\n\n const handleItemClick = (evt: MouseEvent) => {\n // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n setIsOpen(false);\n focusTrigger();\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange?.(open);\n };\n\n const getTriggerButtonIcon = () =>\n (triggerButtonIcon ?? triggerButtonLabel === undefined) ? (\n <~~OverflowMenuIcon~~ />\n ) : undefined;\n\n return (\n <DropdownBase\n {...props}\n className={clsx(withBaseName(), className)}\n isOpen={isOpen}\n onOpenChange={handleOpenChange}\n placement=\"bottom-end\"\n ref={forwardedRef}\n >\n <Button variant=\"secondary\" ref={triggerRef}>\n {getTriggerButtonIcon()}\n {triggerButtonLabel}\n </Button>\n <div\n className={withBaseName(\"content\")}\n ref={setPanelRef}\n tabIndex={-1}\n {...keyboardHook.listProps}\n >\n {collectionHook.data.map((item) => {\n const { type } = item.value as ReactElement;\n if (type === OverflowSeparator) {\n return item.value;\n }\n const formFieldProps = {\n id: item.id,\n inOverflowPanel: true,\n key: item.id,\n onClick: handleItemClick,\n } as ToolbarFieldProps;\n\n if (type === ToolbarField) {\n return cloneElement(item.value as ReactElement, formFieldProps);\n }\n return (\n <ToolbarField {...formFieldProps} key={item.id}>\n {item.value}\n </ToolbarField>\n );\n })}\n </div>\n </DropdownBase>\n );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;~~AA+BA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAaxC,MAAA,aAAA,GAAgB,UAAW,CAAA,SAAS,aAC/C,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;~~AAED~~,EAAA,MAAM,KAAKC,SAAM,EAAA,CAAA;AACjB,EAAA,MAAM,iBAAiB,kBAAiC,CAAA;AAAA,IACtD,EAAA;AAAA,IACA,QAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GAAa,OAA0B,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,aAAuB,CAAA;AAAA,IACjD,UAAY,EAAA,UAAA;AAAA,IACZ,SAAS,aAAiB,IAAA,KAAA;AAAA,IAC1B,IAAM,EAAA,eAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,gBAAA,EAAkB,cAAmB,EAAA,GAAA,YAAA,KAC3C,0BAA2B,CAAA;AAAA,IACzB,UAAY,EAAA,IAAA;AAAA,IACZ,uBAAyB,EAAA,CAAA;AAAA,IACzB,gBAAkB,EAAA,IAAA;AAAA,IAClB,gBAAgB,cAAe,CAAA,IAAA;AAAA,GAChC,CAAA,CAAA;AAEH,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,UAAA,CAAW,QAAQ,KAAM,EAAA,CAAA;AAAA,KAC3B;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,cAAc,WAAY,CAAA,CAAC,OAA2B,EAAI,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,EAAS,EAAE,CAAA,CAAA;AAE3E,EAAM,MAAA,eAAA,GAAkB,CAAC,GAAoB,KAAA;AAE3C,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAa,YAAA,EAAA,CAAA;AAAA,GACf,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,IAAkB,KAAA;AAC1C,IAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,uBAAuB,MAC1B,CAAA,iBAAA,IAAA,IAAA,GAAA,iBAAA,GAAqB,uBAAuB,KAC3C,CAAA,oBAAA,GAAA,CAAC,~~oBAAiB~~,~~CAChB~~,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,uBACG,IAAA,CAAA,YAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,MAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAU,EAAA,YAAA;AAAA,IACV,GAAK,EAAA,YAAA;AAAA,IAEL,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,MAAA,EAAA;AAAA,QAAO,OAAQ,EAAA,WAAA;AAAA,QAAY,GAAK,EAAA,UAAA;AAAA,QAC9B,QAAA,EAAA;AAAA,UAAqB,oBAAA,EAAA;AAAA,UACrB,kBAAA;AAAA,SAAA;AAAA,OACH,CAAA;AAAA,sBACC,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACjC,GAAK,EAAA,WAAA;AAAA,QACL,QAAU,EAAA,CAAA,CAAA;AAAA,QACT,GAAG,YAAa,CAAA,SAAA;AAAA,QAEhB,QAAe,EAAA,cAAA,CAAA,IAAA,CAAK,GAAI,CAAA,CAAC,IAAS,KAAA;AACjC,UAAM,MAAA,EAAE,IAAK,EAAA,GAAI,IAAK,CAAA,KAAA,CAAA;AACtB,UAAA,IAAI,SAAS,iBAAmB,EAAA;AAC9B,YAAA,OAAO,IAAK,CAAA,KAAA,CAAA;AAAA,WACd;AACA,UAAA,MAAM,cAAiB,GAAA;AAAA,YACrB,IAAI,IAAK,CAAA,EAAA;AAAA,YACT,eAAiB,EAAA,IAAA;AAAA,YACjB,KAAK,IAAK,CAAA,EAAA;AAAA,YACV,OAAS,EAAA,eAAA;AAAA,WACX,CAAA;AAEA,UAAA,IAAI,SAAS,YAAc,EAAA;AACzB,YAAO,OAAA,YAAA,CAAa,IAAK,CAAA,KAAA,EAAuB,cAAc,CAAA,CAAA;AAAA,WAChE;AACA,UAAA,uBACG,aAAA,CAAA,YAAA,EAAA;AAAA,YAAc,GAAG,cAAA;AAAA,YAAgB,KAAK,IAAK,CAAA,EAAA;AAAA,WAAA,EACzC,KAAK,KACR,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIcon,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ForwardedRef,\n type MouseEvent,\n type ReactElement,\n cloneElement,\n forwardRef,\n useCallback,\n useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n useCollectionItems,\n useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n /*\n Trigger button icon\n /\n triggerButtonIcon?: JSX.Element;\n /\n Trigger button text\n */\n triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n {\n children,\n className,\n defaultIsOpen,\n isOpen: isOpenProp,\n onOpenChange,\n triggerButtonIcon,\n triggerButtonLabel,\n ...props\n }: DropdownPanelProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overflow-panel\",\n css: overflowPanelCss,\n window: targetWindow,\n });\n const { OverflowIcon } = useIcon();\n const id = useId();\n const collectionHook = useCollectionItems<ReactElement>({\n id,\n children,\n });\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen \|\| false,\n name: \"DropdownPanel\",\n });\n\n const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n useKeyboardNavigationPanel({\n cycleFocus: true,\n defaultHighlightedIndex: 0,\n focusOnHighlight: true,\n indexPositions: collectionHook.data,\n });\n\n const focusTrigger = useCallback(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, []);\n\n const setPanelRef = useCallback((el: HTMLElement \| null) => el?.focus(), []);\n\n const handleItemClick = (evt: MouseEvent) => {\n // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n setIsOpen(false);\n focusTrigger();\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange?.(open);\n };\n\n const getTriggerButtonIcon = () =>\n (triggerButtonIcon ?? triggerButtonLabel === undefined) ? (\n <OverflowIcon />\n ) : undefined;\n\n return (\n <DropdownBase\n {...props}\n className={clsx(withBaseName(), className)}\n isOpen={isOpen}\n onOpenChange={handleOpenChange}\n placement=\"bottom-end\"\n ref={forwardedRef}\n >\n <Button variant=\"secondary\" ref={triggerRef}>\n {getTriggerButtonIcon()}\n {triggerButtonLabel}\n </Button>\n <div\n className={withBaseName(\"content\")}\n ref={setPanelRef}\n tabIndex={-1}\n {...keyboardHook.listProps}\n >\n {collectionHook.data.map((item) => {\n const { type } = item.value as ReactElement;\n if (type === OverflowSeparator) {\n return item.value;\n }\n const formFieldProps = {\n id: item.id,\n inOverflowPanel: true,\n key: item.id,\n onClick: handleItemClick,\n } as ToolbarFieldProps;\n\n if (type === ToolbarField) {\n return cloneElement(item.value as ReactElement, formFieldProps);\n }\n return (\n <ToolbarField {...formFieldProps} key={item.id}>\n {item.value}\n </ToolbarField>\n );\n })}\n </div>\n </DropdownBase>\n );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}

package/dist-types/calendar/Calendar.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
-import { type CalendarCarouselProps } from "./internal/CalendarCarousel";
 import { type UseCalendarMultiSelectProps, type UseCalendarOffsetProps, type UseCalendarRangeProps, type UseCalendarSingleProps } from "./useCalendar";
 /**
  * Base props for the Calendar component.
@@ -8,23 +7,11 @@ export interface CalendarBaseProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The content to be rendered inside the Calendar.
      */
-    children?: ReactNode;
-    /**
-     * Additional class names to apply to the Calendar.
-     */
-    className?: string;
-    /**
-     * Function to render the contents of a day.
-     */
-    renderDayContents?: CalendarCarouselProps["renderDayContents"];
-    /**
-     * Props for the tooltip component.
-     */
-    TooltipProps?: CalendarCarouselProps["TooltipProps"];
+    children: ReactNode;
     /**
      * If `true`, hides dates that are out of the selectable range.
      */
-    hideOutOfRangeDates?: CalendarCarouselProps["hideOutOfRangeDates"];
+    hideOutOfRangeDates?: boolean;
 }
 /**
  * Props for the Calendar component with single date selection.

package/dist-types/calendar/CalendarDateGrid.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { type DateValue } from "@internationalized/date";
+import { type ComponentPropsWithoutRef } from "react";
+import { type CalendarMonthProps } from "./internal/CalendarMonth";
+export interface CalendarDateGridProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Props getter to pass to each CalendarMonth element
+     */
+    getCalendarMonthProps?: (date: DateValue) => Omit<CalendarMonthProps, "date">;
+}
+export declare const CalendarDateGrid: import("react").ForwardRefExoticComponent<CalendarDateGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/{internal/CalendarWeekHeader.d.ts → CalendarWeekHeader.d.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef } from "react";
 export declare type CalendarWeekHeaderProps = ComponentPropsWithRef<"div"> & {
-    locale: string;
+    locale?: string;
 };
 export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<CalendarWeekHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/index.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 export * from "./Calendar";
 export * from "./CalendarNavigation";
+export * from "./CalendarWeekHeader";
+export * from "./CalendarDateGrid";
 export * from "./useCalendarDay";
 export * from "./useCalendar";
 export * from "./useCalendarSelection";

package/dist-types/calendar/internal/CalendarMonth.d.ts CHANGED Viewed

@@ -2,9 +2,17 @@ import type { DateValue } from "@internationalized/date";
 import { type ComponentPropsWithRef } from "react";
 import { type CalendarDayProps } from "./CalendarDay";
 export interface CalendarMonthProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Month to render as selectable dates
+     */
     date: DateValue;
-    hideOutOfRangeDates?: boolean;
+    /**
+     * Function to render the contents of a day.
+     */
     renderDayContents?: CalendarDayProps["renderDayContents"];
+    /**
+     * Props for the tooltip component.
+     */
     TooltipProps?: CalendarDayProps["TooltipProps"];
 }
 export declare const CalendarMonth: import("react").ForwardRefExoticComponent<Omit<CalendarMonthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/useCalendarSelection.d.ts CHANGED Viewed

@@ -86,13 +86,6 @@ interface UseCalendarSelectionBaseProps<SelectionVariantType> {
      * @param hoveredDate - The new hovered date.
      */
     onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: DateValue | null) => void;
-    /**
-     * Function to select a new date.
-     * @param currentSelectedDate - The current selected date.
-     * @param newSelectedDate - The new date to select.
-     * @returns The updated selection variant type.
-     */
-    select?: (currentSelectedDate: SelectionVariantType, newSelectedDate: DateValue) => SelectionVariantType;
 }
 /**
  * UseCalendar hook props to return a calendar day's status

package/dist-types/date-picker/DatePickerRangePanel.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { type DateValue } from "@internationalized/date";
 import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
-import { type CalendarNavigationProps, type CalendarOffsetProps, type CalendarRangeProps, type DateRangeSelection } from "../calendar";
+import { type CalendarDateGridProps, type CalendarNavigationProps, type CalendarOffsetProps, type CalendarRangeProps, type CalendarWeekHeaderProps, type DateRangeSelection } from "../calendar";
 /**
  * Props for the DatePickerRangePanel component.
  * @template T - The type of the selected date range.
@@ -52,6 +52,14 @@ export interface DatePickerRangePanelProps<T> extends ComponentPropsWithoutRef<"
      * Props to be passed to the start date calendar component.
      */
     StartCalendarProps?: Partial<Omit<CalendarRangeProps | CalendarOffsetProps, "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange" | "onVisibleMonthChange">>;
+    /**
+     * Props to be passed to the start date CalendarWeekHeader component.
+     */
+    StartCalendarWeekHeaderProps?: CalendarWeekHeaderProps;
+    /**
+     * Props to be passed to the start date CalendarDataGrid component.
+     */
+    StartCalendarDataGridProps?: CalendarDateGridProps;
     /**
      * Props to be passed to the end date CalendarNavigation component.
      */
@@ -60,5 +68,13 @@ export interface DatePickerRangePanelProps<T> extends ComponentPropsWithoutRef<"
      * Props to be passed to the end date CalendarNavigation component.
      */
     EndCalendarNavigationProps?: CalendarNavigationProps;
+    /**
+     * Props to be passed to the end date CalendarWeekHeader component.
+     */
+    EndCalendarWeekHeaderProps?: CalendarWeekHeaderProps;
+    /**
+     * Props to be passed to the end date CalendarDataGrid component.
+     */
+    EndCalendarDataGridProps?: CalendarDateGridProps;
 }
 export declare const DatePickerRangePanel: import("react").ForwardRefExoticComponent<DatePickerRangePanelProps<DateRangeSelection> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerSinglePanel.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { type DateValue } from "@internationalized/date";
 import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
-import { type CalendarNavigationProps, type CalendarSingleProps } from "../calendar";
+import { type CalendarDateGridProps, type CalendarNavigationProps, type CalendarSingleProps, type CalendarWeekHeaderProps } from "../calendar";
 /**
  * Props for the DatePickerSinglePanel component.
  * @template T - The type of the selected date.
@@ -38,5 +38,13 @@ export interface DatePickerSinglePanelProps<T> extends ComponentPropsWithoutRef<
      * Props to be passed to the CalendarNavigation component.
      */
     CalendarNavigationProps?: CalendarNavigationProps;
+    /**
+     * Props to be passed to the CalendarWeekHeader component.
+     */
+    CalendarWeekHeaderProps?: CalendarWeekHeaderProps;
+    /**
+     * Props to be passed to the CalendarDataGrid component.
+     */
+    CalendarDataGridProps?: CalendarDateGridProps;
 }
 export declare const DatePickerSinglePanel: import("react").ForwardRefExoticComponent<DatePickerSinglePanelProps<DateValue> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/index.d.ts CHANGED Viewed

@@ -35,6 +35,7 @@ export * from "./responsive";
 export * from "./search-input";
 export * from "./skip-link";
 export * from "./slider";
+export * from "./static-list";
 export * from "./stepped-tracker";
 export * from "./stepper-input";
 export * from "./system-status";

package/dist-types/static-list/StaticList.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface StaticListProps extends ComponentPropsWithoutRef<"ul"> {
+    /**
+     * The list items to be rendered within the StaticList.
+     */
+    children: ReactNode;
+}
+export declare const StaticList: import("react").ForwardRefExoticComponent<StaticListProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist-types/static-list/StaticListItem.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface StaticListItemProps extends ComponentPropsWithoutRef<"li"> {
+}
+export declare const StaticListItem: import("react").ForwardRefExoticComponent<StaticListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist-types/static-list/StaticListItemContent.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface StaticListItemContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of Static List Item
+     */
+    children?: ReactNode;
+}
+export declare const StaticListItemContent: import("react").ForwardRefExoticComponent<StaticListItemContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/static-list/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from "./StaticList";
+export * from "./StaticListItem";
+export * from "./StaticListItemContent";