@salt-ds/core 1.47.1 → 1.47.2

package/dist-cjs/pagination/GoToInput.js

@@ -1,16 +1,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
 var FormField = require('../form-field/FormField.js');
 require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
-require('../text/Text.js');
 require('../text/Code.js');
 require('../text/Display.js');
 require('../text/Headings.js');
 require('../text/Label.js');
+require('../text/Text.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
 var makePrefixer = require('../utils/makePrefixer.js');
@@ -18,12 +20,10 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var FormFieldLabel = require('../form-field/FormFieldLabel.js');
 var Input = require('../input/Input.js');
-var usePaginationContext = require('./usePaginationContext.js');
 var GoToInput$1 = require('./GoToInput.css.js');
+var usePaginationContext = require('./usePaginationContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltGoToInput");
 const GoToInput = React.forwardRef(

package/dist-cjs/pagination/GoToInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type Ref,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport goToInputCss from \"./GoToInput.css\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !Number.isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","GoToInput","useWindow","useComponentCssInjection","goToInputCss","usePaginationContext","useState","jsxs","FormField","clsx","jsx","FormFieldLabel","Input"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAgB1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,SAAA;AAAA,IACf,KAAQ,GAAA,OAAA;AAAA,IACR,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA;AAE/C,IAAM,MAAA,QAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,MAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,KAClC;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,MAAO,CAAA,KAAA,CAAM,SAAS,CAAA,IACvB,SAAY,GAAA,CAAA,IACZ,aAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA;AAE/B,QAAA,aAAA,CAAc,EAAE,CAAA;AAAA;AAClB,KACF;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,KAClB;AAEA,IAAA,MAAM,OAAU,GAAA,CAAA,EAAG,CAAG,EAAA,KAAK,GAAG,MAAM,CAAA,EAAA,CAAA;AAEpC,IACE,uBAAAC,eAAA;AAAA,MAACC,mBAAA;AAAA,MAAA;AAAA,QACC,cAAe,EAAA,MAAA;AAAA,QACf,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,iCAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BACvBD,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAAH,SAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,gBACrC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,KAAQ,GAAA;AAAA,eAC7C,CAAA;AAAA,cACD,GAAK,EAAA,QAAA;AAAA,cACL,UAAY,EAAA;AAAA,gBACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ;AAAA,eAC1B;AAAA,cACA,MAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,KAAO,EAAA,UAAA;AAAA,cACP,SAAW,EAAA,QAAA;AAAA,cACX,OAAS,EAAA;AAAA;AAAA;AACX;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type Ref,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport goToInputCss from \"./GoToInput.css\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !Number.isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","GoToInput","useWindow","useComponentCssInjection","goToInputCss","usePaginationContext","useState","jsxs","FormField","clsx","jsx","FormFieldLabel","Input"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAgB1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,SAAA;AAAA,IACf,KAAQ,GAAA,OAAA;AAAA,IACR,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA;AAE/C,IAAM,MAAA,QAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,MAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,KAClC;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,MAAO,CAAA,KAAA,CAAM,SAAS,CAAA,IACvB,SAAY,GAAA,CAAA,IACZ,aAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA;AAE/B,QAAA,aAAA,CAAc,EAAE,CAAA;AAAA;AAClB,KACF;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,KAClB;AAEA,IAAA,MAAM,OAAU,GAAA,CAAA,EAAG,CAAG,EAAA,KAAK,GAAG,MAAM,CAAA,EAAA,CAAA;AAEpC,IACE,uBAAAC,eAAA;AAAA,MAACC,mBAAA;AAAA,MAAA;AAAA,QACC,cAAe,EAAA,MAAA;AAAA,QACf,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,iCAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BACvBD,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAAH,SAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,gBACrC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,KAAQ,GAAA;AAAA,eAC7C,CAAA;AAAA,cACD,GAAK,EAAA,QAAA;AAAA,cACL,UAAY,EAAA;AAAA,gBACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ;AAAA,eAC1B;AAAA,cACA,MAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,KAAO,EAAA,UAAA;AAAA,cACP,SAAW,EAAA,QAAA;AAAA,cACX,OAAS,EAAA;AAAA;AAAA;AACX;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/pagination/PageButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltPageButton[aria-current=\"page\"] {\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
+var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltPageButton[aria-current=\"page\"] {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=PageButton.css.js.map

package/dist-cjs/pagination/PageButton.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
@@ -8,10 +10,8 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var usePaginationContext = require('./usePaginationContext.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var PageButton$1 = require('./PageButton.css.js');
+var usePaginationContext = require('./usePaginationContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltPageButton");
 const PageButton = React.forwardRef(

package/dist-cjs/pagination/PageButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n  page: number;\n  selected?: boolean;\n  disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n  function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-page-button\",\n      css: pageButtonCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n\n    const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, page);\n    };\n\n    return (\n      <button\n        aria-label={`Page ${page} of ${count}`}\n        aria-current={selected ? \"page\" : undefined}\n        className={clsx(withBaseName(), {\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"fixed\")]: page < 100,\n        })}\n        onClick={onClick}\n        disabled={disabled}\n        ref={ref}\n        type=\"button\"\n      >\n        {page}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","PageButton","useWindow","useComponentCssInjection","pageButtonCss","usePaginationContext","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA;AAAA,QACpC,cAAA,EAAc,WAAW,MAAS,GAAA,MAAA;AAAA,QAClC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,UAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,IAAO,GAAA;AAAA,SACjC,CAAA;AAAA,QACD,OAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QAEJ,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport pageButtonCss from \"./PageButton.css\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n  page: number;\n  selected?: boolean;\n  disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n  function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-page-button\",\n      css: pageButtonCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n\n    const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, page);\n    };\n\n    return (\n      <button\n        aria-label={`Page ${page} of ${count}`}\n        aria-current={selected ? \"page\" : undefined}\n        className={clsx(withBaseName(), {\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"fixed\")]: page < 100,\n        })}\n        onClick={onClick}\n        disabled={disabled}\n        ref={ref}\n        type=\"button\"\n      >\n        {page}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","PageButton","useWindow","useComponentCssInjection","pageButtonCss","usePaginationContext","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA;AAAA,QACpC,cAAA,EAAc,WAAW,MAAS,GAAA,MAAA;AAAA,QAClC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,UAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,IAAO,GAAA;AAAA,SACjC,CAAA;AAAA,QACD,OAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QAEJ,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/pagination/PageRanges.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('clsx');
@@ -9,11 +11,9 @@ require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var PageButton = require('./PageButton.js');
+var PageRanges$1 = require('./PageRanges.css.js');
 var usePagination = require('./usePagination.js');
 var usePaginationContext = require('./usePaginationContext.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var PageRanges$1 = require('./PageRanges.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltPageRanges");
 const Ellipsis = () => {

package/dist-cjs/pagination/PageRanges.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageRanges.js","sources":["../src/pagination/PageRanges.tsx"],"sourcesContent":["import { type ReactElement, useCallback } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { PageButton } from \"./PageButton\";\nimport { type PageRange, usePagination } from \"./usePagination\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport pageRangesCss from \"./PageRanges.css\";\n\nconst withBaseName = makePrefixer(\"saltPageRanges\");\n\nexport interface PageRangesProps {\n  boundaryCount?: number;\n  siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n  return <div className={withBaseName(\"ellipsis\")}>{\"\\u2026\"}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n  const result: ReactElement[] = [];\n  for (let i = range[0]; i <= range[1]; ++i) {\n    result.push(fn(i));\n  }\n  return result;\n};\n\nexport function PageRanges({\n  siblingCount = 2,\n  boundaryCount = 1,\n}: PageRangesProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-page-ranges\",\n    css: pageRangesCss,\n    window: targetWindow,\n  });\n\n  const { count, page } = usePaginationContext();\n\n  const renderPages = useCallback(\n    (range: PageRange) =>\n      mapRange(range, (i) => (\n        <PageButton key={i} page={i} selected={page === i} />\n      )),\n    [page],\n  );\n\n  const [leftPages, middlePages, rightPages] = usePagination(\n    page,\n    count,\n    Math.max(1, boundaryCount),\n    siblingCount,\n  );\n\n  return (\n    <>\n      {leftPages && (\n        <>\n          {renderPages(leftPages)}\n          <Ellipsis />\n        </>\n      )}\n      {middlePages && renderPages(middlePages)}\n      {rightPages && (\n        <>\n          <Ellipsis />\n          {renderPages(rightPages)}\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","pageRangesCss","usePaginationContext","useCallback","jsx","PageButton","usePagination","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAOlD,MAAM,WAAW,MAAM;AACrB,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,UAAU,GAAI,QAAS,EAAA,QAAA,EAAA,CAAA;AAC7D,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC;AAChC,EAAS,KAAA,IAAA,CAAA,GAAI,MAAM,CAAC,CAAA,EAAG,KAAK,KAAM,CAAA,CAAC,CAAG,EAAA,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA;AAAA;AAEnB,EAAO,OAAA,MAAA;AACT,CAAA;AAEO,SAAS,UAAW,CAAA;AAAA,EACzB,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA;AAClB,CAAoB,EAAA;AAClB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAK,EAAA,GAAIC,yCAAqB,EAAA;AAE7C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAAA,KACC,QAAS,CAAA,KAAA,EAAO,CAAC,CACf,qBAAAC,cAAA,CAACC,qBAAmB,EAAA,EAAA,IAAA,EAAM,CAAG,EAAA,QAAA,EAAU,IAAS,KAAA,CAAA,EAAA,EAA/B,CAAkC,CACpD,CAAA;AAAA,IACH,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAAC,2BAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB;AAAA,GACF;AAEA,EAAA,uBAEKC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,SAAA,oBAEID,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,WAAA,CAAY,SAAS,CAAA;AAAA,qCACrB,QAAS,EAAA,EAAA;AAAA,KACZ,EAAA,CAAA;AAAA,IAED,WAAA,IAAe,YAAY,WAAW,CAAA;AAAA,IACtC,8BAEGD,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,MACT,YAAY,UAAU;AAAA,KACzB,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PageRanges.js","sources":["../src/pagination/PageRanges.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ReactElement, useCallback } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { PageButton } from \"./PageButton\";\nimport pageRangesCss from \"./PageRanges.css\";\nimport { type PageRange, usePagination } from \"./usePagination\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltPageRanges\");\n\nexport interface PageRangesProps {\n  boundaryCount?: number;\n  siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n  return <div className={withBaseName(\"ellipsis\")}>{\"\\u2026\"}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n  const result: ReactElement[] = [];\n  for (let i = range[0]; i <= range[1]; ++i) {\n    result.push(fn(i));\n  }\n  return result;\n};\n\nexport function PageRanges({\n  siblingCount = 2,\n  boundaryCount = 1,\n}: PageRangesProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-page-ranges\",\n    css: pageRangesCss,\n    window: targetWindow,\n  });\n\n  const { count, page } = usePaginationContext();\n\n  const renderPages = useCallback(\n    (range: PageRange) =>\n      mapRange(range, (i) => (\n        <PageButton key={i} page={i} selected={page === i} />\n      )),\n    [page],\n  );\n\n  const [leftPages, middlePages, rightPages] = usePagination(\n    page,\n    count,\n    Math.max(1, boundaryCount),\n    siblingCount,\n  );\n\n  return (\n    <>\n      {leftPages && (\n        <>\n          {renderPages(leftPages)}\n          <Ellipsis />\n        </>\n      )}\n      {middlePages && renderPages(middlePages)}\n      {rightPages && (\n        <>\n          <Ellipsis />\n          {renderPages(rightPages)}\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","pageRangesCss","usePaginationContext","useCallback","jsx","PageButton","usePagination","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAOlD,MAAM,WAAW,MAAM;AACrB,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,UAAU,GAAI,QAAS,EAAA,QAAA,EAAA,CAAA;AAC7D,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC;AAChC,EAAS,KAAA,IAAA,CAAA,GAAI,MAAM,CAAC,CAAA,EAAG,KAAK,KAAM,CAAA,CAAC,CAAG,EAAA,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA;AAAA;AAEnB,EAAO,OAAA,MAAA;AACT,CAAA;AAEO,SAAS,UAAW,CAAA;AAAA,EACzB,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA;AAClB,CAAoB,EAAA;AAClB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAK,EAAA,GAAIC,yCAAqB,EAAA;AAE7C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAAA,KACC,QAAS,CAAA,KAAA,EAAO,CAAC,CACf,qBAAAC,cAAA,CAACC,qBAAmB,EAAA,EAAA,IAAA,EAAM,CAAG,EAAA,QAAA,EAAU,IAAS,KAAA,CAAA,EAAA,EAA/B,CAAkC,CACpD,CAAA;AAAA,IACH,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAAC,2BAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB;AAAA,GACF;AAEA,EAAA,uBAEKC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,SAAA,oBAEID,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,WAAA,CAAY,SAAS,CAAA;AAAA,qCACrB,QAAS,EAAA,EAAA;AAAA,KACZ,EAAA,CAAA;AAAA,IAED,WAAA,IAAe,YAAY,WAAW,CAAA;AAAA,IACtC,8BAEGD,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,MACT,YAAY,UAAU;AAAA,KACzB,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/pagination/Pagination.js

@@ -1,20 +1,20 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
-require('../aria-announcer/AriaAnnouncerContext.js');
 var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
+require('../aria-announcer/AriaAnnouncerContext.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useControlled = require('../utils/useControlled.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var PaginationContext = require('./PaginationContext.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var Pagination$1 = require('./Pagination.css.js');
+var PaginationContext = require('./PaginationContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltPagination");
 const { Provider } = PaginationContext.paginationContext;

package/dist-cjs/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { type PaginationContext, paginationContext } from \"./PaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport paginationCss from \"./Pagination.css\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Number of pages.\n   */\n  count: number;\n  /**\n   * Current/active page.\n   */\n  page?: number;\n  /**\n   * Default current/active page.\n   */\n  defaultPage?: number;\n  /**\n   * Callback function triggered when current page changed.\n   */\n  onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  function Pagination(\n    {\n      className,\n      count,\n      children,\n      defaultPage = 1,\n      page: pageProp,\n      onPageChange: onPageChangeProp,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pagination\",\n      css: paginationCss,\n      window: targetWindow,\n    });\n\n    const [pageState, setPageState] = useControlled({\n      controlled: pageProp,\n      default: defaultPage,\n      name: \"Pagination\",\n      state: \"page\",\n    });\n\n    const onPageChange = useCallback(\n      (event: SyntheticEvent, page: number) => {\n        setPageState(page);\n        onPageChangeProp?.(event, page);\n      },\n      [onPageChangeProp],\n    );\n\n    const contextValue: PaginationContext = useMemo(\n      () => ({\n        page: pageState,\n        count,\n        onPageChange,\n      }),\n      [pageState, count, onPageChange],\n    );\n\n    const { announce } = useAriaAnnouncer();\n    const mounted = useRef<boolean>(false);\n\n    useEffect(() => {\n      if (mounted.current) {\n        announce(`Page ${pageState}`);\n      } else {\n        mounted.current = true;\n      }\n    }, [announce, pageState]);\n\n    if (count < 2) {\n      return null;\n    }\n\n    return (\n      <Provider value={contextValue}>\n        <nav\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...restProps}\n        >\n          {children}\n        </nav>\n      </Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","paginationContext","forwardRef","Pagination","useWindow","useComponentCssInjection","paginationCss","useControlled","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAElD,MAAM,EAAE,UAAa,GAAAC,mCAAA;AAqBd,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAmB,KAAO,EAAA,IAAA,CAAA;AAAA,OAC5B;AAAA,MACA,CAAC,gBAAgB;AAAA,KACnB;AAEA,IAAA,MAAM,YAAkC,GAAAC,aAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY;AAAA,KACjC;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA;AACtC,IAAM,MAAA,OAAA,GAAUC,aAAgB,KAAK,CAAA;AAErC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAS,QAAA,CAAA,CAAA,KAAA,EAAQ,SAAS,CAAE,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA;AAAA;AACpB,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA;AAAA;AAGT,IACE,uBAAAC,cAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,YACf,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport paginationCss from \"./Pagination.css\";\nimport { type PaginationContext, paginationContext } from \"./PaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Number of pages.\n   */\n  count: number;\n  /**\n   * Current/active page.\n   */\n  page?: number;\n  /**\n   * Default current/active page.\n   */\n  defaultPage?: number;\n  /**\n   * Callback function triggered when current page changed.\n   */\n  onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  function Pagination(\n    {\n      className,\n      count,\n      children,\n      defaultPage = 1,\n      page: pageProp,\n      onPageChange: onPageChangeProp,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pagination\",\n      css: paginationCss,\n      window: targetWindow,\n    });\n\n    const [pageState, setPageState] = useControlled({\n      controlled: pageProp,\n      default: defaultPage,\n      name: \"Pagination\",\n      state: \"page\",\n    });\n\n    const onPageChange = useCallback(\n      (event: SyntheticEvent, page: number) => {\n        setPageState(page);\n        onPageChangeProp?.(event, page);\n      },\n      [onPageChangeProp],\n    );\n\n    const contextValue: PaginationContext = useMemo(\n      () => ({\n        page: pageState,\n        count,\n        onPageChange,\n      }),\n      [pageState, count, onPageChange],\n    );\n\n    const { announce } = useAriaAnnouncer();\n    const mounted = useRef<boolean>(false);\n\n    useEffect(() => {\n      if (mounted.current) {\n        announce(`Page ${pageState}`);\n      } else {\n        mounted.current = true;\n      }\n    }, [announce, pageState]);\n\n    if (count < 2) {\n      return null;\n    }\n\n    return (\n      <Provider value={contextValue}>\n        <nav\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...restProps}\n        >\n          {children}\n        </nav>\n      </Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","paginationContext","forwardRef","Pagination","useWindow","useComponentCssInjection","paginationCss","useControlled","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAElD,MAAM,EAAE,UAAa,GAAAC,mCAAA;AAqBd,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAmB,KAAO,EAAA,IAAA,CAAA;AAAA,OAC5B;AAAA,MACA,CAAC,gBAAgB;AAAA,KACnB;AAEA,IAAA,MAAM,YAAkC,GAAAC,aAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY;AAAA,KACjC;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA;AACtC,IAAM,MAAA,OAAA,GAAUC,aAAgB,KAAK,CAAA;AAErC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAS,QAAA,CAAA,CAAA,KAAA,EAAQ,SAAS,CAAE,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA;AAAA;AACpB,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA;AAAA;AAGT,IACE,uBAAAC,cAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,YACf,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/pagination/PaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { type SyntheticEvent, createContext } from \"react\";\n\nexport interface PaginationContext {\n  page: number;\n  count: number;\n  onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n  page: 0,\n  count: 0,\n  onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":["createContext"],"mappings":";;;;AAQO,MAAM,oBAAoBA,mBAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM;AACtB,CAAC;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA;AAClC;;;;"}
+{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { createContext, type SyntheticEvent } from \"react\";\n\nexport interface PaginationContext {\n  page: number;\n  count: number;\n  onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n  page: 0,\n  count: 0,\n  onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":["createContext"],"mappings":";;;;AAQO,MAAM,oBAAoBA,mBAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM;AACtB,CAAC;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA;AAClC;;;;"}

package/dist-cjs/pagination/Paginator.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
 var Button = require('../button/Button.js');
@@ -11,10 +13,8 @@ require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var PageRanges = require('./PageRanges.js');
-var usePaginationContext = require('./usePaginationContext.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var Paginator$1 = require('./Paginator.css.js');
+var usePaginationContext = require('./usePaginationContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltPaginator");
 const Paginator = React.forwardRef(

package/dist-cjs/pagination/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, type MouseEventHandler, forwardRef } from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport { PageRanges } from \"./PageRanges\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport paginatorCss from \"./Paginator.css\";\n\nconst withBaseName = makePrefixer(\"saltPaginator\");\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of pages next to the arrow buttons when page range is truncated.\n   */\n  boundaryCount?: number;\n  /**\n   * Number of pages on each side of the current page when page range is truncated.\n   */\n  siblingCount?: number;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n  function Paginator(\n    { className, boundaryCount, siblingCount, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-paginator\",\n      css: paginatorCss,\n      window: targetWindow,\n    });\n\n    const { count, page, onPageChange } = usePaginationContext();\n    const { NextIcon, PreviousIcon } = useIcon();\n\n    const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.max(1, page - 1));\n    };\n\n    const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.min(page + 1, count));\n    };\n\n    const isOnFirstPage = page === 1;\n    const isOnLastPage = page === count;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n        <Button\n          appearance=\"transparent\"\n          aria-label=\"Previous Page\"\n          onClick={onPreviousPage}\n          disabled={isOnFirstPage}\n          className={withBaseName(\"arrowButton-previous\")}\n        >\n          <PreviousIcon aria-hidden />\n        </Button>\n        <PageRanges siblingCount={siblingCount} boundaryCount={boundaryCount} />\n        <Button\n          appearance=\"transparent\"\n          aria-label=\"Next Page\"\n          onClick={onNextPage}\n          disabled={isOnLastPage}\n          className={withBaseName(\"arrowButton-next\")}\n        >\n          <NextIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Paginator","useWindow","useComponentCssInjection","paginatorCss","usePaginationContext","useIcon","jsxs","clsx","jsx","Button","PageRanges"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAa1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,WACP,EAAE,SAAA,EAAW,eAAe,YAAc,EAAA,GAAG,SAAU,EAAA,EACvD,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiBC,yCAAqB,EAAA;AAC3D,IAAA,MAAM,EAAE,QAAA,EAAU,YAAa,EAAA,GAAIC,4BAAQ,EAAA;AAE3C,IAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,KAC3C;AAEA,IAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,KAC/C;AAEA,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA;AAE9B,IACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAC9D,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,UAAW,EAAA,aAAA;AAAA,UACX,YAAW,EAAA,eAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UACV,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,UAE9C,QAAA,kBAAAD,cAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,OAC5B;AAAA,sBACAA,cAAA,CAACE,qBAAW,EAAA,EAAA,YAAA,EAA4B,aAA8B,EAAA,CAAA;AAAA,sBACtEF,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,UAAW,EAAA,aAAA;AAAA,UACX,YAAW,EAAA,WAAA;AAAA,UACX,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UACV,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAE1C,QAAA,kBAAAD,cAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA;AACxB,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type MouseEventHandler } from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport { PageRanges } from \"./PageRanges\";\nimport paginatorCss from \"./Paginator.css\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltPaginator\");\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of pages next to the arrow buttons when page range is truncated.\n   */\n  boundaryCount?: number;\n  /**\n   * Number of pages on each side of the current page when page range is truncated.\n   */\n  siblingCount?: number;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n  function Paginator(\n    { className, boundaryCount, siblingCount, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-paginator\",\n      css: paginatorCss,\n      window: targetWindow,\n    });\n\n    const { count, page, onPageChange } = usePaginationContext();\n    const { NextIcon, PreviousIcon } = useIcon();\n\n    const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.max(1, page - 1));\n    };\n\n    const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.min(page + 1, count));\n    };\n\n    const isOnFirstPage = page === 1;\n    const isOnLastPage = page === count;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n        <Button\n          appearance=\"transparent\"\n          aria-label=\"Previous Page\"\n          onClick={onPreviousPage}\n          disabled={isOnFirstPage}\n          className={withBaseName(\"arrowButton-previous\")}\n        >\n          <PreviousIcon aria-hidden />\n        </Button>\n        <PageRanges siblingCount={siblingCount} boundaryCount={boundaryCount} />\n        <Button\n          appearance=\"transparent\"\n          aria-label=\"Next Page\"\n          onClick={onNextPage}\n          disabled={isOnLastPage}\n          className={withBaseName(\"arrowButton-next\")}\n        >\n          <NextIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Paginator","useWindow","useComponentCssInjection","paginatorCss","usePaginationContext","useIcon","jsxs","clsx","jsx","Button","PageRanges"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAa1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,WACP,EAAE,SAAA,EAAW,eAAe,YAAc,EAAA,GAAG,SAAU,EAAA,EACvD,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiBC,yCAAqB,EAAA;AAC3D,IAAA,MAAM,EAAE,QAAA,EAAU,YAAa,EAAA,GAAIC,4BAAQ,EAAA;AAE3C,IAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,KAC3C;AAEA,IAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,KAC/C;AAEA,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA;AAE9B,IACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAC9D,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,UAAW,EAAA,aAAA;AAAA,UACX,YAAW,EAAA,eAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UACV,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,UAE9C,QAAA,kBAAAD,cAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,OAC5B;AAAA,sBACAA,cAAA,CAACE,qBAAW,EAAA,EAAA,YAAA,EAA4B,aAA8B,EAAA,CAAA;AAAA,sBACtEF,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,UAAW,EAAA,aAAA;AAAA,UACX,YAAW,EAAA,WAAA;AAAA,UACX,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UACV,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAE1C,QAAA,kBAAAD,cAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA;AACxB,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/panel/Panel.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
@@ -8,8 +10,6 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var Panel$1 = require('./Panel.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltPanel");

package/dist-cjs/panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport panelCss from \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n *   <Panel>\n *     <p>This is a panel around some text.</p>\n *   </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  { className, children, variant = \"primary\", ...restProps },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-panel\",\n    css: panelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(variant), className)}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Panel","useWindow","useComponentCssInjection","panelCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAEtC,MAAM,KAAQ,GAAAC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,OAAA,GAAU,SAAW,EAAA,GAAG,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,MAChE,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport panelCss from \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n *   <Panel>\n *     <p>This is a panel around some text.</p>\n *   </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  { className, children, variant = \"primary\", ...restProps },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-panel\",\n    css: panelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(variant), className)}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Panel","useWindow","useComponentCssInjection","panelCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAEtC,MAAM,KAAQ,GAAAC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,OAAA,GAAU,SAAW,EAAA,GAAG,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,MAChE,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/parent-child-layout/ParentChildLayout.js

@@ -10,8 +10,8 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var useIsViewportLargerThanBreakpoint = require('./useIsViewportLargerThanBreakpoint.js');
 var ParentChildLayout$1 = require('./ParentChildLayout.css.js');
+var useIsViewportLargerThanBreakpoint = require('./useIsViewportLargerThanBreakpoint.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltParentChildLayout");
 const ParentChildLayout = React.forwardRef(function ParentChildLayout2({

package/dist-cjs/parent-child-layout/ParentChildLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport type { Breakpoints } from \"../breakpoints\";\nimport { makePrefixer } from \"../utils\";\nimport { useIsViewportLargerThanBreakpoint } from \"./useIsViewportLargerThanBreakpoint\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\nexport interface ParentChildLayoutProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  collapseAtBreakpoint?: keyof Breakpoints;\n  /**\n   * View that is displayed when in a collapsed state.\n   */\n  visibleView?: \"child\" | \"parent\";\n  /**\n   * Controls the space between parent and child components, default is 0.\n   */\n  gap?: number;\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n  /**\n   * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable\n   */\n  onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    collapseAtBreakpoint = \"sm\",\n    visibleView = \"child\",\n    parent,\n    child,\n    className,\n    gap = 0,\n    onCollapseChange,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n  useEffect(() => {\n    onCollapseChange?.(isCollapsed);\n  }, [isCollapsed, onCollapseChange]);\n\n  const parentChildLayoutStyles = {\n    ...style,\n    \"--parentChildLayout-gap\": `calc(var(--salt-spacing-100) * ${gap})`,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      style={parentChildLayoutStyles}\n      {...rest}\n    >\n      {isCollapsed ? (\n        <div\n          key={visibleView}\n          className={clsx({\n            [withBaseName(\"collapsed\")]: isCollapsed,\n            [withBaseName(\"childAnimation\")]: visibleView === \"child\",\n            [withBaseName(\"parentAnimation\")]: visibleView === \"parent\",\n          })}\n        >\n          {isCollapsed && visibleView === \"child\" ? child : parent}\n        </div>\n      ) : (\n        <>\n          <div className={withBaseName(\"parent\")}>{parent}</div>\n          <div className={withBaseName(\"child\")}>{child}</div>\n        </>\n      )}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useWindow","useComponentCssInjection","parentChildLayoutCss","useIsViewportLargerThanBreakpoint","useEffect","jsx","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAE5C,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,WAAc,GAAA,OAAA;AAAA,EACd,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,oEAAkC,oBAAoB,CAAA;AAE1E,EAAAC,eAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAA,WAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA;AAElC,EAAA,MAAM,uBAA0B,GAAA;AAAA,IAC9B,GAAG,KAAA;AAAA,IACH,yBAAA,EAA2B,kCAAkC,GAAG,CAAA,CAAA;AAAA,GAClE;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,uBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QACC,EAAA,WAAA,mBAAAD,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,WAAWC,SAAK,CAAA;AAAA,YACd,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,WAAA;AAAA,YAC7B,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,WAAgB,KAAA,OAAA;AAAA,YAClD,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,WAAgB,KAAA;AAAA,WACpD,CAAA;AAAA,UAEA,QAAA,EAAA,WAAA,IAAe,WAAgB,KAAA,OAAA,GAAU,KAAQ,GAAA;AAAA,SAAA;AAAA,QAP7C;AAAA,0BAWLC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,GAAI,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,uCAC/C,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA,OAChD,EAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport type { Breakpoints } from \"../breakpoints\";\nimport { makePrefixer } from \"../utils\";\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\nimport { useIsViewportLargerThanBreakpoint } from \"./useIsViewportLargerThanBreakpoint\";\nexport interface ParentChildLayoutProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  collapseAtBreakpoint?: keyof Breakpoints;\n  /**\n   * View that is displayed when in a collapsed state.\n   */\n  visibleView?: \"child\" | \"parent\";\n  /**\n   * Controls the space between parent and child components, default is 0.\n   */\n  gap?: number;\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n  /**\n   * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable\n   */\n  onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    collapseAtBreakpoint = \"sm\",\n    visibleView = \"child\",\n    parent,\n    child,\n    className,\n    gap = 0,\n    onCollapseChange,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n  useEffect(() => {\n    onCollapseChange?.(isCollapsed);\n  }, [isCollapsed, onCollapseChange]);\n\n  const parentChildLayoutStyles = {\n    ...style,\n    \"--parentChildLayout-gap\": `calc(var(--salt-spacing-100) * ${gap})`,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      style={parentChildLayoutStyles}\n      {...rest}\n    >\n      {isCollapsed ? (\n        <div\n          key={visibleView}\n          className={clsx({\n            [withBaseName(\"collapsed\")]: isCollapsed,\n            [withBaseName(\"childAnimation\")]: visibleView === \"child\",\n            [withBaseName(\"parentAnimation\")]: visibleView === \"parent\",\n          })}\n        >\n          {isCollapsed && visibleView === \"child\" ? child : parent}\n        </div>\n      ) : (\n        <>\n          <div className={withBaseName(\"parent\")}>{parent}</div>\n          <div className={withBaseName(\"child\")}>{child}</div>\n        </>\n      )}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useWindow","useComponentCssInjection","parentChildLayoutCss","useIsViewportLargerThanBreakpoint","useEffect","jsx","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;AAyCA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAE5C,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,WAAc,GAAA,OAAA;AAAA,EACd,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,oEAAkC,oBAAoB,CAAA;AAE1E,EAAAC,eAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAA,WAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA;AAElC,EAAA,MAAM,uBAA0B,GAAA;AAAA,IAC9B,GAAG,KAAA;AAAA,IACH,yBAAA,EAA2B,kCAAkC,GAAG,CAAA,CAAA;AAAA,GAClE;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,uBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QACC,EAAA,WAAA,mBAAAD,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,WAAWC,SAAK,CAAA;AAAA,YACd,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,WAAA;AAAA,YAC7B,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,WAAgB,KAAA,OAAA;AAAA,YAClD,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,WAAgB,KAAA;AAAA,WACpD,CAAA;AAAA,UAEA,QAAA,EAAA,WAAA,IAAe,WAAgB,KAAA,OAAA,GAAU,KAAQ,GAAA;AAAA,SAAA;AAAA,QAP7C;AAAA,0BAWLC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,GAAI,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,uCAC/C,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA,OAChD,EAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js

@@ -1,8 +1,8 @@
 'use strict';
 
 require('react');
-require('react/jsx-runtime');
 require('clsx');
+require('react/jsx-runtime');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 var useResponsiveProp = require('../utils/useResponsiveProp.js');

package/dist-cjs/pill/Pill.js

@@ -44,7 +44,7 @@ const Pill = React.forwardRef(function Pill2({
     {
       "data-testid": "pill",
       ref,
-      className: clsx(
+      className: clsx.clsx(
         withBaseName(),
         withBaseName("clickable"),
         { [withBaseName("active")]: active },

package/dist-cjs/pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport pillCss from \"./Pill.css\";\n\nconst withBaseName = makePrefixer(\"saltPill\");\n\nexport interface PillProps extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const Pill = forwardRef<HTMLButtonElement, PillProps>(function Pill(\n  {\n    children,\n    className,\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\n  const { buttonProps, active } = useButton<HTMLButtonElement>({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n  });\n  // we do not want to spread tab index in this case because the button element\n  // does not require tabindex=\"0\" attribute\n  const { tabIndex, ...restButtonProps } = buttonProps;\n  return (\n    <button\n      data-testid=\"pill\"\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(\"clickable\"),\n        { [withBaseName(\"active\")]: active },\n        className,\n      )}\n      type=\"button\"\n      {...restButtonProps}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Pill","useWindow","useComponentCssInjection","pillCss","useButton","jsx"],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,mBAA6B,CAAA;AAAA,IAC3D,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,eAAA,EAAoB,GAAA,WAAA;AACzC,EACE,uBAAAC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,MAAA;AAAA,MACZ,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAO,EAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,eAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport pillCss from \"./Pill.css\";\n\nconst withBaseName = makePrefixer(\"saltPill\");\n\nexport interface PillProps extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const Pill = forwardRef<HTMLButtonElement, PillProps>(function Pill(\n  {\n    children,\n    className,\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\n  const { buttonProps, active } = useButton<HTMLButtonElement>({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n  });\n  // we do not want to spread tab index in this case because the button element\n  // does not require tabindex=\"0\" attribute\n  const { tabIndex, ...restButtonProps } = buttonProps;\n  return (\n    <button\n      data-testid=\"pill\"\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(\"clickable\"),\n        { [withBaseName(\"active\")]: active },\n        className,\n      )}\n      type=\"button\"\n      {...restButtonProps}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Pill","useWindow","useComponentCssInjection","pillCss","useButton","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,mBAA6B,CAAA;AAAA,IAC3D,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,eAAA,EAAoB,GAAA,WAAA;AACzC,EACE,uBAAAC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,MAAA;AAAA,MACZ,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAO,EAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,eAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/pill-input/PillInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-editable-borderStyle) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered:active {\n  --pillInput-borderWidth: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-active: var(--salt-editable-primary-background-active);\n  --pillInput-background-hover: var(--salt-editable-primary-background-hover);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-active: var(--salt-editable-secondary-background-active);\n  --pillInput-background-hover: var(--salt-editable-secondary-background-active);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-active: var(--salt-status-error-background);\n  --pillInput-background-hover: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-active: var(--salt-status-warning-background);\n  --pillInput-background-hover: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-active: var(--salt-status-success-background);\n  --pillInput-background-hover: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  background: var(--saltPillInput-background-active, var(--pillInput-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput .saltPill:focus-visible {\n  background: var(--salt-content-foreground-highlight);\n  color: var(--salt-content-primary-foreground);\n  --saltIcon-color: var(--salt-content-primary-foreground);\n  border-color: transparent;\n  outline: none;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltPillInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-active: var(--salt-editable-primary-background-active);\n  --pillInput-background-hover: var(--salt-editable-primary-background-hover);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-active: var(--salt-editable-secondary-background-active);\n  --pillInput-background-hover: var(--salt-editable-secondary-background-active);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-active: var(--salt-status-error-background);\n  --pillInput-background-hover: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-active: var(--salt-status-warning-background);\n  --pillInput-background-hover: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-active: var(--salt-status-success-background);\n  --pillInput-background-hover: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  background: var(--saltPillInput-background-active, var(--pillInput-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput .saltPill:focus-visible {\n  background: var(--salt-content-foreground-highlight);\n  color: var(--salt-content-primary-foreground);\n  --saltIcon-color: var(--salt-content-primary-foreground);\n  border-color: transparent;\n  outline: none;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltPillInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=PillInput.css.js.map

package/dist-cjs/pill-input/PillInput.js

@@ -17,8 +17,8 @@ var useForkRef = require('../utils/useForkRef.js');
 var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var useTruncatePills = require('./useTruncatePills.js');
 var PillInput$1 = require('./PillInput.css.js');
+var useTruncatePills = require('./useTruncatePills.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltPillInput");
 const PillInput = React.forwardRef(function PillInput2({

package/dist-cjs/pill-input/PillInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nimport pillInputCss from \"./PillInput.css\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    placeholder,\n    pills = [],\n    onPillRemove,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}
+{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    placeholder,\n    pills = [],\n    onPillRemove,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}

package/dist-cjs/pill-input/useTruncatePills.js

@@ -2,15 +2,15 @@
 
 var window = require('@salt-ds/window');
 var React = require('react');
-require('react/jsx-runtime');
 require('clsx');
+require('react/jsx-runtime');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
-var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
+var useResizeObserver = require('../utils/useResizeObserver.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var useValueEffect = require('../utils/useValueEffect.js');
-var useResizeObserver = require('../utils/useResizeObserver.js');
 
 function useTruncatePills({
   pills,