@salt-ds/core 1.41.0 → 1.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/CHANGELOG.md +100 -0
  2. package/css/salt-core.css +133 -54
  3. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  4. package/dist-cjs/border-layout/BorderLayout.js +1 -1
  5. package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
  6. package/dist-cjs/button/Button.css.js +1 -1
  7. package/dist-cjs/button/Button.js +2 -2
  8. package/dist-cjs/button/Button.js.map +1 -1
  9. package/dist-cjs/card/Card.css.js +1 -1
  10. package/dist-cjs/card/Card.js.map +1 -1
  11. package/dist-cjs/combo-box/ComboBox.js +22 -20
  12. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  13. package/dist-cjs/dialog/Dialog.js +1 -0
  14. package/dist-cjs/dialog/Dialog.js.map +1 -1
  15. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  16. package/dist-cjs/dialog/DialogContent.js +24 -4
  17. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  18. package/dist-cjs/dialog/DialogHeader.css.js +1 -1
  19. package/dist-cjs/dialog/DialogHeader.js +15 -16
  20. package/dist-cjs/dialog/DialogHeader.js.map +1 -1
  21. package/dist-cjs/dropdown/Dropdown.css.js +1 -1
  22. package/dist-cjs/dropdown/Dropdown.js +3 -3
  23. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  24. package/dist-cjs/flex-item/FlexItem.js +2 -2
  25. package/dist-cjs/flex-item/FlexItem.js.map +1 -1
  26. package/dist-cjs/flex-layout/FlexLayout.js +2 -2
  27. package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
  28. package/dist-cjs/grid-item/GridItem.js +2 -2
  29. package/dist-cjs/grid-item/GridItem.js.map +1 -1
  30. package/dist-cjs/grid-layout/GridLayout.js +2 -2
  31. package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
  32. package/dist-cjs/index.js +2 -0
  33. package/dist-cjs/index.js.map +1 -1
  34. package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
  35. package/dist-cjs/link/Link.css.js +1 -1
  36. package/dist-cjs/link/Link.js +3 -0
  37. package/dist-cjs/link/Link.js.map +1 -1
  38. package/dist-cjs/link-card/LinkCard.css.js +1 -1
  39. package/dist-cjs/option/Option.js +5 -12
  40. package/dist-cjs/option/Option.js.map +1 -1
  41. package/dist-cjs/overlay/OverlayHeader.css.js +6 -0
  42. package/dist-cjs/overlay/OverlayHeader.css.js.map +1 -0
  43. package/dist-cjs/overlay/OverlayHeader.js +40 -0
  44. package/dist-cjs/overlay/OverlayHeader.js.map +1 -0
  45. package/dist-cjs/overlay/OverlayPanelCloseButton.css.js +1 -1
  46. package/dist-cjs/overlay/OverlayPanelContent.css.js +1 -1
  47. package/dist-cjs/overlay/OverlayPanelContent.js +26 -26
  48. package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
  49. package/dist-cjs/pagination/PageButton.css.js +1 -1
  50. package/dist-cjs/pagination/PageButton.js +2 -3
  51. package/dist-cjs/pagination/PageButton.js.map +1 -1
  52. package/dist-cjs/pagination/Paginator.css.js +1 -1
  53. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  54. package/dist-cjs/pill-input/PillInput.js +1 -0
  55. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  56. package/dist-cjs/skip-link/SkipLink.css.js +1 -1
  57. package/dist-cjs/text/Text.css.js +1 -1
  58. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +3 -0
  59. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  60. package/dist-cjs/utils/usePreventScroll.js +233 -0
  61. package/dist-cjs/utils/usePreventScroll.js.map +1 -0
  62. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  63. package/dist-es/border-layout/BorderLayout.js +2 -2
  64. package/dist-es/border-layout/BorderLayout.js.map +1 -1
  65. package/dist-es/button/Button.css.js +1 -1
  66. package/dist-es/button/Button.js +2 -2
  67. package/dist-es/button/Button.js.map +1 -1
  68. package/dist-es/card/Card.css.js +1 -1
  69. package/dist-es/card/Card.js.map +1 -1
  70. package/dist-es/combo-box/ComboBox.js +23 -21
  71. package/dist-es/combo-box/ComboBox.js.map +1 -1
  72. package/dist-es/dialog/Dialog.js +1 -0
  73. package/dist-es/dialog/Dialog.js.map +1 -1
  74. package/dist-es/dialog/DialogContent.css.js +1 -1
  75. package/dist-es/dialog/DialogContent.js +24 -4
  76. package/dist-es/dialog/DialogContent.js.map +1 -1
  77. package/dist-es/dialog/DialogHeader.css.js +1 -1
  78. package/dist-es/dialog/DialogHeader.js +14 -15
  79. package/dist-es/dialog/DialogHeader.js.map +1 -1
  80. package/dist-es/dropdown/Dropdown.css.js +1 -1
  81. package/dist-es/dropdown/Dropdown.js +3 -3
  82. package/dist-es/dropdown/Dropdown.js.map +1 -1
  83. package/dist-es/flex-item/FlexItem.js +2 -2
  84. package/dist-es/flex-item/FlexItem.js.map +1 -1
  85. package/dist-es/flex-layout/FlexLayout.js +2 -2
  86. package/dist-es/flex-layout/FlexLayout.js.map +1 -1
  87. package/dist-es/grid-item/GridItem.js +2 -2
  88. package/dist-es/grid-item/GridItem.js.map +1 -1
  89. package/dist-es/grid-layout/GridLayout.js +2 -2
  90. package/dist-es/grid-layout/GridLayout.js.map +1 -1
  91. package/dist-es/index.js +1 -0
  92. package/dist-es/index.js.map +1 -1
  93. package/dist-es/interactable-card/InteractableCard.css.js +1 -1
  94. package/dist-es/link/Link.css.js +1 -1
  95. package/dist-es/link/Link.js +3 -0
  96. package/dist-es/link/Link.js.map +1 -1
  97. package/dist-es/link-card/LinkCard.css.js +1 -1
  98. package/dist-es/option/Option.js +5 -12
  99. package/dist-es/option/Option.js.map +1 -1
  100. package/dist-es/overlay/OverlayHeader.css.js +4 -0
  101. package/dist-es/overlay/OverlayHeader.css.js.map +1 -0
  102. package/dist-es/overlay/OverlayHeader.js +38 -0
  103. package/dist-es/overlay/OverlayHeader.js.map +1 -0
  104. package/dist-es/overlay/OverlayPanelCloseButton.css.js +1 -1
  105. package/dist-es/overlay/OverlayPanelContent.css.js +1 -1
  106. package/dist-es/overlay/OverlayPanelContent.js +27 -27
  107. package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
  108. package/dist-es/pagination/PageButton.css.js +1 -1
  109. package/dist-es/pagination/PageButton.js +2 -3
  110. package/dist-es/pagination/PageButton.js.map +1 -1
  111. package/dist-es/pagination/Paginator.css.js +1 -1
  112. package/dist-es/pill-input/PillInput.css.js +1 -1
  113. package/dist-es/pill-input/PillInput.js +1 -0
  114. package/dist-es/pill-input/PillInput.js.map +1 -1
  115. package/dist-es/skip-link/SkipLink.css.js +1 -1
  116. package/dist-es/text/Text.css.js +1 -1
  117. package/dist-es/utils/useFloatingUI/useFloatingUI.js +3 -0
  118. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  119. package/dist-es/utils/usePreventScroll.js +231 -0
  120. package/dist-es/utils/usePreventScroll.js.map +1 -0
  121. package/dist-types/border-layout/BorderLayout.d.ts +2 -3
  122. package/dist-types/card/Card.d.ts +1 -1
  123. package/dist-types/dialog/DialogHeader.d.ts +9 -1
  124. package/dist-types/link/Link.d.ts +11 -0
  125. package/dist-types/overlay/OverlayHeader.d.ts +20 -0
  126. package/dist-types/overlay/index.d.ts +1 -0
  127. package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +4 -0
  128. package/dist-types/utils/usePreventScroll.d.ts +11 -0
  129. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltOverlayPanelContent {\n animation: var(--salt-animation-fade-in-center);\n position: relative;\n overflow: hidden;\n padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n\n.saltOverlayHeader ~ .saltOverlayPanelContent-separator {\n border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n}\n\n.saltOverlayPanelContent-overflow {\n padding-right: var(--salt-spacing-100);\n overflow-y: auto;\n}\n\n.saltOverlayHeader ~ .saltOverlayPanelContent-scroll {\n border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n box-shadow: var(--salt-overlayable-shadow-scroll);\n margin-top: calc(0 - var(--salt-size-border));\n}\n\n.saltOverlayHeader ~ .saltOverlayPanelContent-separator ~ .saltOverlayPanelContent {\n padding-top: 0;\n}\n";
1
+ var css_248z = ".saltOverlayPanelContent {\n animation: var(--salt-animation-fade-in-center);\n position: relative;\n overflow: hidden;\n padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n\n.saltOverlayPanelContent-overflow {\n padding-right: var(--salt-spacing-100);\n border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n overflow-y: auto;\n}\n.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {\n border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=OverlayPanelContent.css.js.map
@@ -1,4 +1,4 @@
1
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
1
+ import { jsx } from 'react/jsx-runtime';
2
2
  import { useComponentCssInjection } from '@salt-ds/styles';
3
3
  import { useWindow } from '@salt-ds/window';
4
4
  import clsx from 'clsx';
@@ -23,44 +23,44 @@ const OverlayPanelContent = forwardRef(function OverlayPanelContent2(props, ref)
23
23
  window: targetWindow
24
24
  });
25
25
  const { children, className, ...rest } = props;
26
- const [scrolled, setScrolled] = useState(false);
26
+ const [scrollBarTop, setScrollBarTop] = useState(false);
27
+ const [scrollBarBottom, setScrollBarBottom] = useState(true);
27
28
  const [isOverflowing, setIsOverflowing] = useState(false);
28
29
  const divRef = useRef(null);
29
30
  const containerRef = useForkRef(divRef, ref);
30
31
  const handleScroll = debounce(() => {
31
- if (!divRef.current) return;
32
- setScrolled(divRef.current.scrollTop > 0);
32
+ const container = divRef.current;
33
+ if (!container) return;
34
+ setScrollBarTop(container.scrollTop > 0);
35
+ setScrollBarBottom(
36
+ container.scrollHeight - container.scrollTop - container.clientHeight !== 0
37
+ );
33
38
  });
34
39
  const checkOverflow = useCallback(() => {
35
40
  if (!divRef.current) return;
36
- setIsOverflowing(divRef.current.scrollHeight > divRef.current.offsetHeight);
41
+ setIsOverflowing(
42
+ divRef.current.scrollHeight > divRef.current.offsetHeight + 1
43
+ // var(--salt-size-border)
44
+ );
37
45
  }, []);
38
46
  useResizeObserver({ ref: divRef, onResize: checkOverflow });
39
47
  useIsomorphicLayoutEffect(() => {
40
48
  checkOverflow();
41
49
  }, [checkOverflow]);
42
- return /* @__PURE__ */ jsxs(Fragment, { children: [
43
- /* @__PURE__ */ jsx(
44
- "div",
45
- {
46
- className: clsx(withBaseName("separator"), {
47
- [withBaseName("scroll")]: scrolled
48
- })
49
- }
50
- ),
51
- /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), children: /* @__PURE__ */ jsx(
52
- "div",
53
- {
54
- className: clsx(withBaseName("container"), {
55
- [withBaseName("overflow")]: isOverflowing
56
- }),
57
- onScrollCapture: handleScroll,
58
- ...rest,
59
- ref: containerRef,
60
- children
61
- }
62
- ) })
63
- ] });
50
+ return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), children: /* @__PURE__ */ jsx(
51
+ "div",
52
+ {
53
+ className: clsx(withBaseName("container"), {
54
+ [withBaseName("overflow")]: isOverflowing,
55
+ [withBaseName("scroll-top")]: isOverflowing && scrollBarTop,
56
+ [withBaseName("scroll-bottom")]: isOverflowing && scrollBarBottom
57
+ }),
58
+ onScrollCapture: handleScroll,
59
+ ...rest,
60
+ ref: containerRef,
61
+ children
62
+ }
63
+ ) });
64
64
  });
65
65
 
66
66
  export { OverlayPanelContent };
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.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 useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n debounce,\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n useResizeObserver,\n} from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Overlay Panel Content\n */\n children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n HTMLDivElement,\n OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overlay-panel-content\",\n css: overlayPanelContentCss,\n window: targetWindow,\n });\n\n const { children, className, ...rest } = props;\n const [scrolled, setScrolled] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const divRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(divRef, ref);\n const handleScroll = debounce(() => {\n if (!divRef.current) return;\n setScrolled(divRef.current.scrollTop > 0);\n });\n\n const checkOverflow = useCallback(() => {\n if (!divRef.current) return;\n setIsOverflowing(divRef.current.scrollHeight > divRef.current.offsetHeight);\n }, []);\n\n useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n useIsomorphicLayoutEffect(() => {\n checkOverflow();\n }, [checkOverflow]);\n return (\n <>\n <div\n className={clsx(withBaseName(\"separator\"), {\n [withBaseName(\"scroll\")]: scrolled,\n })}\n />\n <div className={clsx(withBaseName(), className)}>\n <div\n className={clsx(withBaseName(\"container\"), {\n [withBaseName(\"overflow\")]: isOverflowing,\n })}\n onScrollCapture={handleScroll}\n {...rest}\n ref={containerRef}\n >\n {children}\n </div>\n </div>\n </>\n );\n});\n"],"names":["OverlayPanelContent","overlayPanelContentCss"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3C,EAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,IAAY,WAAA,CAAA,MAAA,CAAO,OAAQ,CAAA,SAAA,GAAY,CAAC,CAAA;AAAA,GACzC,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,IAAA,gBAAA,CAAiB,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,QAAQ,YAAY,CAAA;AAAA,GAC5E,EAAG,EAAE,CAAA;AAEL,EAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAClB,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC3B;AAAA;AAAA,KACH;AAAA,wBACC,KAAI,EAAA,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,eAAiB,EAAA,YAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAK,EAAA,YAAA;AAAA,QAEJ;AAAA;AAAA,KAEL,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.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 useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n debounce,\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n useResizeObserver,\n} from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Overlay Panel Content\n */\n children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n HTMLDivElement,\n OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overlay-panel-content\",\n css: overlayPanelContentCss,\n window: targetWindow,\n });\n\n const { children, className, ...rest } = props;\n const [scrollBarTop, setScrollBarTop] = useState(false);\n const [scrollBarBottom, setScrollBarBottom] = useState(true);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const divRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(divRef, ref);\n const handleScroll = debounce(() => {\n const container = divRef.current;\n if (!container) return;\n setScrollBarTop(container.scrollTop > 0);\n setScrollBarBottom(\n container.scrollHeight - container.scrollTop - container.clientHeight !==\n 0,\n );\n });\n\n const checkOverflow = useCallback(() => {\n if (!divRef.current) return;\n setIsOverflowing(\n divRef.current.scrollHeight > divRef.current.offsetHeight + 1, // var(--salt-size-border)\n );\n }, []);\n\n useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n useIsomorphicLayoutEffect(() => {\n checkOverflow();\n }, [checkOverflow]);\n\n return (\n <div className={clsx(withBaseName(), className)}>\n <div\n className={clsx(withBaseName(\"container\"), {\n [withBaseName(\"overflow\")]: isOverflowing,\n [withBaseName(\"scroll-top\")]: isOverflowing && scrollBarTop,\n [withBaseName(\"scroll-bottom\")]: isOverflowing && scrollBarBottom,\n })}\n onScrollCapture={handleScroll}\n {...rest}\n ref={containerRef}\n >\n {children}\n </div>\n </div>\n );\n});\n"],"names":["OverlayPanelContent","overlayPanelContentCss"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3C,EAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,IAAA,MAAM,YAAY,MAAO,CAAA,OAAA;AACzB,IAAA,IAAI,CAAC,SAAW,EAAA;AAChB,IAAgB,eAAA,CAAA,SAAA,CAAU,YAAY,CAAC,CAAA;AACvC,IAAA,kBAAA;AAAA,MACE,SAAU,CAAA,YAAA,GAAe,SAAU,CAAA,SAAA,GAAY,UAAU,YACvD,KAAA;AAAA,KACJ;AAAA,GACD,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,IAAA,gBAAA;AAAA,MACE,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,QAAQ,YAAe,GAAA;AAAA;AAAA,KAC9D;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,aAAiB,IAAA,YAAA;AAAA,QAC/C,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAiB,IAAA;AAAA,OACnD,CAAA;AAAA,MACD,eAAiB,EAAA,YAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltPageButton {\n --saltButton-minWidth: var(--salt-size-base);\n --saltButton-fontWeight: var(--salt-text-fontWeight);\n --saltButton-height: var(--salt-size-base);\n --saltButton-text-color: var(--salt-content-primary-foreground);\n --saltButton-background-active: var(--salt-selectable-background-selected);\n --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n --saltButton-text-color-hover: var(--salt-content-primary-foreground);\n --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n --saltButton-padding: 0;\n}\n";
1
+ 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-action-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-action-letterSpacing);\n cursor: var(--salt-selectable-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.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-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n padding: 0;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=PageButton.css.js.map
@@ -1,7 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef } from 'react';
4
- import { Button } from '../button/Button.js';
5
4
  import { makePrefixer } from '../utils/makePrefixer.js';
6
5
  import '../utils/useFloatingUI/useFloatingUI.js';
7
6
  import '../utils/useId.js';
@@ -26,11 +25,10 @@ const PageButton = forwardRef(
26
25
  onPageChange(event, page);
27
26
  };
28
27
  return /* @__PURE__ */ jsx(
29
- Button,
28
+ "button",
30
29
  {
31
30
  "aria-label": `Page ${page} of ${count}`,
32
31
  "aria-current": selected ? "page" : void 0,
33
- appearance: "transparent",
34
32
  className: clsx(withBaseName(), {
35
33
  [withBaseName("selected")]: selected,
36
34
  [withBaseName("fixed")]: page < 100
@@ -38,6 +36,7 @@ const PageButton = forwardRef(
38
36
  onClick,
39
37
  disabled,
40
38
  ref,
39
+ type: "button",
41
40
  children: page
42
41
  }
43
42
  );
@@ -1 +1 @@
1
- {"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { Button } from \"../button\";\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 appearance=\"transparent\"\n className={clsx(withBaseName(), {\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"fixed\")]: page < 100,\n })}\n onClick={onClick}\n disabled={disabled}\n ref={ref}\n >\n {page}\n </Button>\n );\n },\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA;AAAA,QACpC,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,QAClC,UAAW,EAAA,aAAA;AAAA,QACX,SAAA,EAAW,IAAK,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,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
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":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAA,GAAA;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,KAAA,CAAA;AAAA,QAClC,SAAA,EAAW,IAAK,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;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltPaginator {\n display: flex;\n flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous {\n --saltButton-margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next {\n --saltButton-margin: 0 0 0 var(--salt-spacing-100);\n}\n";
1
+ var css_248z = ".saltPaginator {\n display: flex;\n flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous.saltButton {\n margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next.saltButton {\n margin: 0 0 0 var(--salt-spacing-100);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Paginator.css.js.map
@@ -1,4 +1,4 @@
1
- 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-editable-cursor-hover);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n border: var(--salt-size-border) 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-editable-borderWidth-active) - var(--salt-size-border));\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-border) 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-border-strong) 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-border-strong) - var(--salt-size-border));\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-editable-cursor-active);\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-editable-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-editable-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-100);\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(--salt-size-border));\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(--salt-size-border));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 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";
1
+ 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-editable-cursor-hover);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n border: var(--salt-size-border) 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-editable-borderWidth-active) - var(--salt-size-border));\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-border) 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-border-strong) 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-border-strong) - var(--salt-size-border));\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-editable-cursor-active);\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-editable-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-editable-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(--salt-size-border));\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(--salt-size-border));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 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";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=PillInput.css.js.map
@@ -239,6 +239,7 @@ const PillInput = forwardRef(function PillInput2({
239
239
  {
240
240
  "aria-describedby": clsx(formFieldDescribedBy, inputDescribedBy),
241
241
  "aria-labelledby": clsx(formFieldLabelledBy, inputLabelledBy),
242
+ autoComplete: "off",
242
243
  className: clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
243
244
  disabled: isDisabled,
244
245
  id,
@@ -1 +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 const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\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 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":["PillInput","pillInputCss","value"],"mappings":"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"}
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 const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\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":["PillInput","pillInputCss","value"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var css_248z = "/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n top: 0;\n left: 0;\n opacity: 0;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n position: absolute;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n letter-spacing: var(--salt-text-letterSpacing);\n text-decoration: var(--salt-navigable-textDecoration);\n font-family: var(--salt-text-fontFamily);\n white-space: nowrap;\n background: var(--saltSkipLink-background, var(--salt-container-primary-background));\n z-index: calc(var(--salt-zIndex-appHeader) + 1);\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n opacity: 1;\n width: auto;\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n padding: var(--salt-spacing-100) var(--salt-spacing-300);\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n box-shadow: var(--salt-overlayable-shadow);\n}\n\n@keyframes fade-out-back-outline {\n /* required animation to apply an opacity fade-out-back to outline */\n 0% {\n outline-color: var(--salt-focused-outlineColor);\n }\n 100% {\n outline-color: transparent;\n }\n}\n\n.saltSkipLink-target {\n animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;\n outline: var(--salt-focused-outline);\n}\n@media (prefers-reduced-motion: reduce) {\n .saltSkipLink-target {\n animation: none;\n }\n}\n";
1
+ var css_248z = "/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n top: 0;\n left: 0;\n opacity: 0;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n position: absolute;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n letter-spacing: var(--salt-text-letterSpacing);\n text-decoration: var(--salt-typography-textDecoration-underline);\n font-family: var(--salt-text-fontFamily);\n white-space: nowrap;\n background: var(--saltSkipLink-background, var(--salt-container-primary-background));\n z-index: calc(var(--salt-zIndex-appHeader) + 1);\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n opacity: 1;\n width: auto;\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n padding: var(--salt-spacing-100) var(--salt-spacing-300);\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n box-shadow: var(--salt-overlayable-shadow);\n}\n\n@keyframes fade-out-back-outline {\n /* required animation to apply an opacity fade-out-back to outline */\n 0% {\n outline-color: var(--salt-focused-outlineColor);\n }\n 100% {\n outline-color: transparent;\n }\n}\n\n.saltSkipLink-target {\n animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;\n outline: var(--salt-focused-outline);\n}\n@media (prefers-reduced-motion: reduce) {\n .saltSkipLink-target {\n animation: none;\n }\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=SkipLink.css.js.map
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltText {\n --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n font-family: var(--salt-text-notation-fontFamily);\n font-size: var(--salt-text-notation-fontSize);\n line-height: var(--salt-text-notation-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n text-align: var(--salt-text-action-textAlign);\n font-weight: var(--salt-text-action-fontWeight);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 1 emphasis strong */\n.saltText-display1.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display1-fontWeight-strong);\n}\n\n/* Display 1 emphasis small */\n.saltText-display1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display1-fontWeight-small);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 2 emphasis strong */\n.saltText-display2.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display2-fontWeight-strong);\n}\n\n/* Display 2 emphasis small */\n.saltText-display2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display2-fontWeight-small);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Display 3 emphasis strong */\n.saltText-display3.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display3-fontWeight-strong);\n}\n\n/* Display 3 emphasis small */\n.saltText-display3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display3-fontWeight-small);\n}\n\n/* Display 4 */\n.saltText-display4.saltText {\n font-family: var(--salt-text-display4-fontFamily);\n font-size: var(--salt-text-display4-fontSize);\n font-weight: var(--salt-text-display4-fontWeight);\n line-height: var(--salt-text-display4-lineHeight);\n}\n\n/* Display 4 emphasis strong */\n.saltText-display4.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display4-fontWeight-strong);\n}\n\n/* Display 4 emphasis small */\n.saltText-display4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display4-fontWeight-small);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
1
+ var css_248z = ".saltText {\n --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n font-family: var(--salt-text-notation-fontFamily);\n font-size: var(--salt-text-notation-fontSize);\n line-height: var(--salt-text-notation-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n text-align: var(--salt-text-action-textAlign);\n font-weight: var(--salt-text-action-fontWeight);\n}\n.saltText-action.saltText strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n.saltText-action.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 1 emphasis strong */\n.saltText-display1.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display1-fontWeight-strong);\n}\n\n/* Display 1 emphasis small */\n.saltText-display1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display1-fontWeight-small);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 2 emphasis strong */\n.saltText-display2.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display2-fontWeight-strong);\n}\n\n/* Display 2 emphasis small */\n.saltText-display2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display2-fontWeight-small);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Display 3 emphasis strong */\n.saltText-display3.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display3-fontWeight-strong);\n}\n\n/* Display 3 emphasis small */\n.saltText-display3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display3-fontWeight-small);\n}\n\n/* Display 4 */\n.saltText-display4.saltText {\n font-family: var(--salt-text-display4-fontFamily);\n font-size: var(--salt-text-display4-fontSize);\n font-weight: var(--salt-text-display4-fontWeight);\n line-height: var(--salt-text-display4-lineHeight);\n}\n\n/* Display 4 emphasis strong */\n.saltText-display4.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display4-fontWeight-strong);\n}\n\n/* Display 4 emphasis small */\n.saltText-display4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display4-fontWeight-small);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Text.css.js.map
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { FloatingPortal, FloatingFocusManager, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
3
3
  import { forwardRef, createContext, useMemo, useContext } from 'react';
4
4
  import { useTheme, SaltProviderNext, SaltProvider } from '../../salt-provider/SaltProvider.js';
5
+ import { usePreventScroll } from '../usePreventScroll.js';
5
6
 
6
7
  const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(props, ref) {
7
8
  const {
@@ -12,6 +13,7 @@ const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(p
12
13
  width,
13
14
  height,
14
15
  focusManagerProps,
16
+ lockScroll,
15
17
  ...rest
16
18
  } = props;
17
19
  const style = {
@@ -20,6 +22,7 @@ const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(p
20
22
  position
21
23
  };
22
24
  const { themeNext } = useTheme();
25
+ usePreventScroll({ isDisabled: !lockScroll || !open });
23
26
  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;
24
27
  if (focusManagerProps && open) {
25
28
  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(ChosenSaltProvider, { applyClassesTo: "scope", children: /* @__PURE__ */ jsx(FloatingFocusManager, { ...focusManagerProps, children: /* @__PURE__ */ jsx("div", { style, ...rest, ref }) }) }) });
@@ -1 +1 @@
1
- {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n type Middleware,\n type Platform,\n type Strategy,\n type UseFloatingOptions,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n createContext,\n forwardRef,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width,\n height,\n focusManagerProps,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}
1
+ {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n type Middleware,\n type Platform,\n type Strategy,\n type UseFloatingOptions,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n createContext,\n forwardRef,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n /**\n * Makes the page unscrollable when the floating component is open.\n */\n lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width,\n height,\n focusManagerProps,\n lockScroll,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n usePreventScroll({ isDisabled: !lockScroll || !open });\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}