@salt-ds/core 1.14.0 → 1.16.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 (164) hide show
  1. package/css/salt-core.css +261 -9
  2. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  3. package/dist-cjs/card/Card.css.js +1 -1
  4. package/dist-cjs/file-drop-zone/FileDropZone.css.js +6 -0
  5. package/dist-cjs/file-drop-zone/FileDropZone.css.js.map +1 -0
  6. package/dist-cjs/file-drop-zone/FileDropZone.js +99 -0
  7. package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -0
  8. package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +25 -0
  9. package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -0
  10. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +58 -0
  11. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
  12. package/dist-cjs/file-drop-zone/internal/utils.js +30 -0
  13. package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -0
  14. package/dist-cjs/index.js +20 -0
  15. package/dist-cjs/index.js.map +1 -1
  16. package/dist-cjs/navigation-item/ConditionalWrapper.js +35 -0
  17. package/dist-cjs/navigation-item/ConditionalWrapper.js.map +1 -0
  18. package/dist-cjs/navigation-item/ExpansionIcon.js +29 -0
  19. package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
  20. package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
  21. package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
  22. package/dist-cjs/navigation-item/NavigationItem.js +82 -0
  23. package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
  24. package/dist-cjs/pagination/CompactInput.css.js +6 -0
  25. package/dist-cjs/pagination/CompactInput.css.js.map +1 -0
  26. package/dist-cjs/pagination/CompactInput.js +67 -0
  27. package/dist-cjs/pagination/CompactInput.js.map +1 -0
  28. package/dist-cjs/pagination/CompactPaginator.css.js +6 -0
  29. package/dist-cjs/pagination/CompactPaginator.css.js.map +1 -0
  30. package/dist-cjs/pagination/CompactPaginator.js +87 -0
  31. package/dist-cjs/pagination/CompactPaginator.js.map +1 -0
  32. package/dist-cjs/pagination/GoToInput.css.js +6 -0
  33. package/dist-cjs/pagination/GoToInput.css.js.map +1 -0
  34. package/dist-cjs/pagination/GoToInput.js +92 -0
  35. package/dist-cjs/pagination/GoToInput.js.map +1 -0
  36. package/dist-cjs/pagination/PageButton.css.js +6 -0
  37. package/dist-cjs/pagination/PageButton.css.js.map +1 -0
  38. package/dist-cjs/pagination/PageButton.js +49 -0
  39. package/dist-cjs/pagination/PageButton.js.map +1 -0
  40. package/dist-cjs/pagination/PageRanges.css.js +6 -0
  41. package/dist-cjs/pagination/PageRanges.css.js.map +1 -0
  42. package/dist-cjs/pagination/PageRanges.js +78 -0
  43. package/dist-cjs/pagination/PageRanges.js.map +1 -0
  44. package/dist-cjs/pagination/Pagination.css.js +6 -0
  45. package/dist-cjs/pagination/Pagination.css.js.map +1 -0
  46. package/dist-cjs/pagination/Pagination.js +85 -0
  47. package/dist-cjs/pagination/Pagination.js.map +1 -0
  48. package/dist-cjs/pagination/PaginationContext.js +17 -0
  49. package/dist-cjs/pagination/PaginationContext.js.map +1 -0
  50. package/dist-cjs/pagination/Paginator.css.js +6 -0
  51. package/dist-cjs/pagination/Paginator.css.js.map +1 -0
  52. package/dist-cjs/pagination/Paginator.js +74 -0
  53. package/dist-cjs/pagination/Paginator.js.map +1 -0
  54. package/dist-cjs/pagination/usePagination.js +27 -0
  55. package/dist-cjs/pagination/usePagination.js.map +1 -0
  56. package/dist-cjs/pagination/usePaginationContext.js +19 -0
  57. package/dist-cjs/pagination/usePaginationContext.js.map +1 -0
  58. package/dist-cjs/panel/Panel.css.js +1 -1
  59. package/dist-cjs/scrim/Scrim.css.js +6 -0
  60. package/dist-cjs/scrim/Scrim.css.js.map +1 -0
  61. package/dist-cjs/scrim/Scrim.js +44 -0
  62. package/dist-cjs/scrim/Scrim.js.map +1 -0
  63. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +3 -2
  64. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  65. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  66. package/dist-cjs/tooltip/Tooltip.js +2 -1
  67. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  68. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +17 -2
  69. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  70. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  71. package/dist-es/card/Card.css.js +1 -1
  72. package/dist-es/file-drop-zone/FileDropZone.css.js +4 -0
  73. package/dist-es/file-drop-zone/FileDropZone.css.js.map +1 -0
  74. package/dist-es/file-drop-zone/FileDropZone.js +95 -0
  75. package/dist-es/file-drop-zone/FileDropZone.js.map +1 -0
  76. package/dist-es/file-drop-zone/FileDropZoneIcon.js +21 -0
  77. package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -0
  78. package/dist-es/file-drop-zone/FileDropZoneTrigger.js +54 -0
  79. package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
  80. package/dist-es/file-drop-zone/internal/utils.js +25 -0
  81. package/dist-es/file-drop-zone/internal/utils.js.map +1 -0
  82. package/dist-es/index.js +10 -0
  83. package/dist-es/index.js.map +1 -1
  84. package/dist-es/navigation-item/ConditionalWrapper.js +31 -0
  85. package/dist-es/navigation-item/ConditionalWrapper.js.map +1 -0
  86. package/dist-es/navigation-item/ExpansionIcon.js +25 -0
  87. package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
  88. package/dist-es/navigation-item/NavigationItem.css.js +4 -0
  89. package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
  90. package/dist-es/navigation-item/NavigationItem.js +78 -0
  91. package/dist-es/navigation-item/NavigationItem.js.map +1 -0
  92. package/dist-es/pagination/CompactInput.css.js +4 -0
  93. package/dist-es/pagination/CompactInput.css.js.map +1 -0
  94. package/dist-es/pagination/CompactInput.js +63 -0
  95. package/dist-es/pagination/CompactInput.js.map +1 -0
  96. package/dist-es/pagination/CompactPaginator.css.js +4 -0
  97. package/dist-es/pagination/CompactPaginator.css.js.map +1 -0
  98. package/dist-es/pagination/CompactPaginator.js +83 -0
  99. package/dist-es/pagination/CompactPaginator.js.map +1 -0
  100. package/dist-es/pagination/GoToInput.css.js +4 -0
  101. package/dist-es/pagination/GoToInput.css.js.map +1 -0
  102. package/dist-es/pagination/GoToInput.js +88 -0
  103. package/dist-es/pagination/GoToInput.js.map +1 -0
  104. package/dist-es/pagination/PageButton.css.js +4 -0
  105. package/dist-es/pagination/PageButton.css.js.map +1 -0
  106. package/dist-es/pagination/PageButton.js +45 -0
  107. package/dist-es/pagination/PageButton.js.map +1 -0
  108. package/dist-es/pagination/PageRanges.css.js +4 -0
  109. package/dist-es/pagination/PageRanges.css.js.map +1 -0
  110. package/dist-es/pagination/PageRanges.js +74 -0
  111. package/dist-es/pagination/PageRanges.js.map +1 -0
  112. package/dist-es/pagination/Pagination.css.js +4 -0
  113. package/dist-es/pagination/Pagination.css.js.map +1 -0
  114. package/dist-es/pagination/Pagination.js +81 -0
  115. package/dist-es/pagination/Pagination.js.map +1 -0
  116. package/dist-es/pagination/PaginationContext.js +13 -0
  117. package/dist-es/pagination/PaginationContext.js.map +1 -0
  118. package/dist-es/pagination/Paginator.css.js +4 -0
  119. package/dist-es/pagination/Paginator.css.js.map +1 -0
  120. package/dist-es/pagination/Paginator.js +70 -0
  121. package/dist-es/pagination/Paginator.js.map +1 -0
  122. package/dist-es/pagination/usePagination.js +23 -0
  123. package/dist-es/pagination/usePagination.js.map +1 -0
  124. package/dist-es/pagination/usePaginationContext.js +15 -0
  125. package/dist-es/pagination/usePaginationContext.js.map +1 -0
  126. package/dist-es/panel/Panel.css.js +1 -1
  127. package/dist-es/scrim/Scrim.css.js +4 -0
  128. package/dist-es/scrim/Scrim.css.js.map +1 -0
  129. package/dist-es/scrim/Scrim.js +40 -0
  130. package/dist-es/scrim/Scrim.js.map +1 -0
  131. package/dist-es/toggle-button-group/ToggleButtonGroup.js +3 -2
  132. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  133. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  134. package/dist-es/tooltip/Tooltip.js +2 -1
  135. package/dist-es/tooltip/Tooltip.js.map +1 -1
  136. package/dist-es/utils/useFloatingUI/useFloatingUI.js +18 -3
  137. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  138. package/dist-types/file-drop-zone/FileDropZone.d.ts +17 -0
  139. package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts +9 -0
  140. package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +22 -0
  141. package/dist-types/file-drop-zone/index.d.ts +3 -0
  142. package/dist-types/file-drop-zone/internal/utils.d.ts +3 -0
  143. package/dist-types/index.d.ts +4 -0
  144. package/dist-types/navigation-item/ConditionalWrapper.d.ts +8 -0
  145. package/dist-types/navigation-item/ExpansionIcon.d.ts +2 -0
  146. package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
  147. package/dist-types/navigation-item/index.d.ts +1 -0
  148. package/dist-types/pagination/CompactInput.d.ts +2 -0
  149. package/dist-types/pagination/CompactPaginator.d.ts +1 -0
  150. package/dist-types/pagination/GoToInput.d.ts +16 -0
  151. package/dist-types/pagination/PageButton.d.ts +6 -0
  152. package/dist-types/pagination/PageRanges.d.ts +5 -0
  153. package/dist-types/pagination/Pagination.d.ts +20 -0
  154. package/dist-types/pagination/PaginationContext.d.ts +7 -0
  155. package/dist-types/pagination/Paginator.d.ts +12 -0
  156. package/dist-types/pagination/index.d.ts +5 -0
  157. package/dist-types/pagination/usePagination.d.ts +2 -0
  158. package/dist-types/pagination/usePaginationContext.d.ts +1 -0
  159. package/dist-types/scrim/Scrim.d.ts +13 -0
  160. package/dist-types/scrim/index.d.ts +1 -0
  161. package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +3 -2
  162. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +5 -3
  163. package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +6 -2
  164. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n background: var(--saltPanel-background, var(--panel-background));\n color: var(--saltPanel-color, initial);\n height: var(--saltPanel-height, 100%);\n overflow: auto;\n padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n width: var(--saltPanel-width, 100%);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n";
1
+ var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n background: var(--saltPanel-background, var(--panel-background));\n color: var(--saltPanel-color, initial);\n height: var(--saltPanel-height, 100%);\n overflow: auto;\n padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n width: var(--saltPanel-width, 100%);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Panel.css.js.map
@@ -0,0 +1,4 @@
1
+ var css_248z = "/* Style applied to the root element */\n.saltScrim {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0;\n height: 100%;\n display: flex;\n z-index: calc(var(--salt-zIndex-drawer) - 1);\n position: absolute;\n align-items: center;\n justify-content: center;\n background: var(--saltScrim-background, var(--salt-overlayable-background));\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n outline: none;\n}\n\n/* Style applied to the root element when fixed={true} */\n.saltScrim-fixed {\n position: fixed;\n}\n";
2
+
3
+ export { css_248z as default };
4
+ //# sourceMappingURL=Scrim.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scrim.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,40 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { clsx } from 'clsx';
3
+ import { forwardRef } from 'react';
4
+ import { makePrefixer } from '../utils/makePrefixer.js';
5
+ import '../utils/useFloatingUI/useFloatingUI.js';
6
+ import '../utils/useId.js';
7
+ import '../salt-provider/SaltProvider.js';
8
+ import '../viewport/ViewportProvider.js';
9
+ import { useWindow } from '@salt-ds/window';
10
+ import { useComponentCssInjection } from '@salt-ds/styles';
11
+ import css_248z from './Scrim.css.js';
12
+
13
+ const withBaseName = makePrefixer("saltScrim");
14
+ const Scrim = forwardRef(function Scrim2({ className, children, fixed = false, open = true, ...rest }, ref) {
15
+ const targetWindow = useWindow();
16
+ useComponentCssInjection({
17
+ testId: "salt-scrim",
18
+ css: css_248z,
19
+ window: targetWindow
20
+ });
21
+ if (!open) {
22
+ return null;
23
+ }
24
+ return /* @__PURE__ */ jsx("div", {
25
+ className: clsx(
26
+ withBaseName(),
27
+ {
28
+ [withBaseName("fixed")]: fixed
29
+ },
30
+ className
31
+ ),
32
+ "data-testid": "scrim",
33
+ ref,
34
+ ...rest,
35
+ children
36
+ });
37
+ });
38
+
39
+ export { Scrim };
40
+ //# sourceMappingURL=Scrim.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true` the scrim is bound to the document viewport.\n * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n */\n fixed?: boolean;\n /**\n * If `true` the scrim is shown.\n */\n open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n { className, children, fixed = false, open = true, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-scrim\",\n css: scrimCss,\n window: targetWindow,\n });\n\n if (!open) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fixed\")]: fixed,\n },\n className\n )}\n data-testid=\"scrim\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Scrim","scrimCss"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -72,9 +72,10 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
72
72
  isSelected,
73
73
  focus,
74
74
  isFocused,
75
- disabled
75
+ disabled,
76
+ orientation
76
77
  }),
77
- [select, isSelected, isFocused, disabled]
78
+ [select, isSelected, isFocused, disabled, orientation]
78
79
  );
79
80
  const handleKeyDown = (event) => {
80
81
  var _a, _b, _c, _d;
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: string | ReadonlyArray<string> | number | undefined;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: string | ReadonlyArray<string> | number | undefined;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<\n string | ReadonlyArray<string> | number | undefined\n >(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n }),\n [select, isSelected, isFocused, disabled]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
1
+ {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: Value) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\n focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n isFocused: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;AAca,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;"}
1
+ {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (id: Value) => boolean;\n focus: (id: Value) => void;\n isFocused: (id: Value) => boolean;\n orientation: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;AAca,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;"}
@@ -60,6 +60,7 @@ const Tooltip = forwardRef(
60
60
  reference
61
61
  );
62
62
  const floatingRef = useForkRef(floating, ref);
63
+ const hasContent = !!content;
63
64
  return /* @__PURE__ */ jsxs(Fragment, {
64
65
  children: [
65
66
  isValidElement(children) && cloneElement(children, {
@@ -68,7 +69,7 @@ const Tooltip = forwardRef(
68
69
  }),
69
70
  /* @__PURE__ */ jsx(FloatingComponent, {
70
71
  className: clsx(withBaseName(), withBaseName(status), className),
71
- open: open && !disabled,
72
+ open: open && !disabled && hasContent,
72
73
  ...getTooltipProps(),
73
74
  ref: floatingRef,
74
75
  ...getTooltipPosition(),
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-expect-error children.ref cannot currently be typed.\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open && !disabled}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA,CAAA;AACjC,IAAA,MAAM,SACJ,yBAA8B,KAAA,KAAA,CAAA,IAC9B,wBAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,UAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACd,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-expect-error children.ref cannot currently be typed.\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n const hasContent = !!content;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open && !disabled && hasContent}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA,CAAA;AACjC,IAAA,MAAM,SACJ,yBAA8B,KAAA,KAAA,CAAA,IAC9B,wBAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,UAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,CAAC,CAAC,OAAA,CAAA;AAErB,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,5 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { FloatingPortal, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
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 { SaltProvider } from '../../salt-provider/SaltProvider.js';
5
5
 
@@ -11,6 +11,7 @@ const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(p
11
11
  position,
12
12
  width,
13
13
  height,
14
+ focusManagerProps,
14
15
  ...rest
15
16
  } = props;
16
17
  const style = {
@@ -18,6 +19,20 @@ const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(p
18
19
  left,
19
20
  position
20
21
  };
22
+ if (focusManagerProps) {
23
+ return /* @__PURE__ */ jsx(FloatingPortal, {
24
+ children: /* @__PURE__ */ jsx(SaltProvider, {
25
+ children: /* @__PURE__ */ jsx(FloatingFocusManager, {
26
+ ...focusManagerProps,
27
+ children: /* @__PURE__ */ jsx("div", {
28
+ style,
29
+ ...rest,
30
+ ref
31
+ })
32
+ })
33
+ })
34
+ });
35
+ }
21
36
  return open ? /* @__PURE__ */ jsx(FloatingPortal, {
22
37
  children: /* @__PURE__ */ jsx(SaltProvider, {
23
38
  children: /* @__PURE__ */ jsx("div", {
@@ -94,7 +109,7 @@ function useFloatingUI(props) {
94
109
  onOpenChange == null ? void 0 : onOpenChange(open2);
95
110
  };
96
111
  const {
97
- platform: contextPlaform,
112
+ platform: contextPlatform,
98
113
  middleware: contextMiddleware,
99
114
  animationFrame
100
115
  } = useFloatingPlatform();
@@ -108,7 +123,7 @@ function useFloatingUI(props) {
108
123
  const cleanup = autoUpdate(...args, { animationFrame });
109
124
  return cleanup;
110
125
  },
111
- platform: contextPlaform
126
+ platform: contextPlatform
112
127
  });
113
128
  return {
114
129
  reference: refs.setReference,
@@ -1 +1 @@
1
- {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determinig 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 * Position props for the floating component\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 /* eslint-disable @typescript-eslint/no-unused-vars */\n width,\n height,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n return open ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref} />\n </SaltProvider>\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 /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\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 placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const handleOpenChange = (open: boolean) => {\n update();\n onOpenChange?.(open);\n };\n\n const {\n platform: contextPlaform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n placement,\n strategy,\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: contextPlaform,\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 Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n FloatingFocusManager,\n FloatingFocusManagerProps,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } 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 props for the floating component\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 /* eslint-disable @typescript-eslint/no-unused-vars */\n width,\n height,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n focusManagerProps,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n if (focusManagerProps) {\n return (\n <FloatingPortal>\n <SaltProvider>\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </SaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref} />\n </SaltProvider>\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 /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\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 placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const handleOpenChange = (open: boolean) => {\n update();\n onOpenChange?.(open);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n placement,\n strategy,\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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"}
@@ -0,0 +1,17 @@
1
+ import { DragEvent, ComponentPropsWithoutRef } from "react";
2
+ import { ValidationStatus } from "../status-indicator";
3
+ export interface FileDropZoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onDrop"> {
4
+ /**
5
+ * If `true`, the file drop zone will be disabled.
6
+ */
7
+ disabled?: boolean;
8
+ /**
9
+ * Status indicator to be displayed.
10
+ */
11
+ status?: Omit<ValidationStatus, "info" | "warning">;
12
+ /**
13
+ * Callback for on drop event
14
+ */
15
+ onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;
16
+ }
17
+ export declare const FileDropZone: import("react").ForwardRefExoticComponent<FileDropZoneProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,9 @@
1
+ import { IconProps } from "@salt-ds/icons";
2
+ import { ValidationStatus } from "../status-indicator";
3
+ export interface FileDropZoneIconProps extends IconProps {
4
+ /**
5
+ * Status indicator to be displayed.
6
+ */
7
+ status?: ValidationStatus;
8
+ }
9
+ export declare const FileDropZoneIcon: import("react").ForwardRefExoticComponent<FileDropZoneIconProps & import("react").RefAttributes<SVGSVGElement>>;
@@ -0,0 +1,22 @@
1
+ import { HTMLAttributes, SyntheticEvent } from "react";
2
+ export interface FileDropZoneTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
3
+ /**
4
+ * `accept` attribute for HTML <input>.
5
+ *
6
+ * A comma separated list of file types the user can pick from the file input dialog box.
7
+ */
8
+ accept?: string;
9
+ /**
10
+ * Disable all trigger elements.
11
+ */
12
+ disabled?: boolean;
13
+ /**
14
+ * Allows multiple files to be uploaded.
15
+ */
16
+ multiple?: boolean;
17
+ /**
18
+ * Callback for input change event
19
+ */
20
+ onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;
21
+ }
22
+ export declare const FileDropZoneTrigger: import("react").ForwardRefExoticComponent<FileDropZoneTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,3 @@
1
+ export * from "./FileDropZone";
2
+ export * from "./FileDropZoneIcon";
3
+ export * from "./FileDropZoneTrigger";
@@ -0,0 +1,3 @@
1
+ import { DragEvent } from "react";
2
+ export declare const containsFiles: (e: DragEvent) => boolean | FileList | null;
3
+ export declare const extractFiles: (e: DragEvent) => File[];
@@ -9,6 +9,7 @@ export * from "./breakpoints";
9
9
  export * from "./button";
10
10
  export * from "./card";
11
11
  export * from "./checkbox";
12
+ export * from "./file-drop-zone";
12
13
  export * from "./flex-item";
13
14
  export * from "./flex-layout";
14
15
  export * from "./flow-layout";
@@ -19,9 +20,12 @@ export * from "./grid-layout";
19
20
  export * from "./input";
20
21
  export * from "./link";
21
22
  export * from "./multiline-input";
23
+ export * from "./navigation-item";
24
+ export * from "./pagination";
22
25
  export * from "./panel";
23
26
  export * from "./pill";
24
27
  export * from "./radio-button";
28
+ export * from "./scrim";
25
29
  export * from "./spinner";
26
30
  export * from "./stack-layout";
27
31
  export * from "./status-adornment";
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from "react";
2
+ import { NavigationItemProps } from "./NavigationItem";
3
+ interface ConditionalWrapperProps extends Pick<NavigationItemProps, "parent" | "expanded" | "onExpand" | "active" | "href" | "onClick"> {
4
+ children: ReactNode;
5
+ className: string;
6
+ }
7
+ export declare const ConditionalWrapper: ({ children, className, parent, expanded, onExpand, active, href, }: ConditionalWrapperProps) => JSX.Element;
8
+ export {};
@@ -0,0 +1,2 @@
1
+ import { NavigationItemProps } from "./NavigationItem";
2
+ export declare function ExpansionIcon({ expanded, orientation, }: Pick<NavigationItemProps, "expanded" | "orientation" | "className">): JSX.Element;
@@ -0,0 +1,36 @@
1
+ import { ComponentPropsWithoutRef, MouseEventHandler } from "react";
2
+ export interface NavigationItemProps extends ComponentPropsWithoutRef<"div"> {
3
+ /**
4
+ * Whether the navigation item is active.
5
+ */
6
+ active?: boolean;
7
+ /**
8
+ * Whether the nested group is collapsed and there is an active nested item within it.
9
+ */
10
+ blurActive?: boolean;
11
+ /**
12
+ * Whether the navigation item is expanded.
13
+ */
14
+ expanded?: boolean;
15
+ /**
16
+ * Level of nesting.
17
+ */
18
+ level?: number;
19
+ /**
20
+ * The orientation of the navigation item.
21
+ */
22
+ orientation?: "horizontal" | "vertical";
23
+ /**
24
+ * Whether the navigation item is a parent with nested items.
25
+ */
26
+ parent?: boolean;
27
+ /**
28
+ * Action to be triggered when the navigation item is expanded.
29
+ */
30
+ onExpand?: MouseEventHandler<HTMLButtonElement>;
31
+ /**
32
+ * Href to be passed to the Link element.
33
+ */
34
+ href?: string;
35
+ }
36
+ export declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ export * from "./NavigationItem";
@@ -0,0 +1,2 @@
1
+ import { InputProps } from "../input";
2
+ export declare const CompactInput: import("react").ForwardRefExoticComponent<Pick<InputProps, "variant" | "inputRef"> & import("react").RefAttributes<HTMLInputElement>>;
@@ -0,0 +1 @@
1
+ export declare const CompactPaginator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,16 @@
1
+ import { HTMLAttributes, Ref } from "react";
2
+ export interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {
3
+ /**
4
+ * Input label.
5
+ */
6
+ label?: string;
7
+ /**
8
+ * Optional ref for the input component
9
+ */
10
+ inputRef?: Ref<HTMLInputElement>;
11
+ /**
12
+ * Change input variant.
13
+ */
14
+ inputVariant?: "primary" | "secondary";
15
+ }
16
+ export declare const GoToInput: import("react").ForwardRefExoticComponent<GoToInputProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,6 @@
1
+ export interface PageButtonProps {
2
+ page: number;
3
+ selected?: boolean;
4
+ disabled?: boolean;
5
+ }
6
+ export declare const PageButton: import("react").ForwardRefExoticComponent<PageButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,5 @@
1
+ export interface PageRangesProps {
2
+ boundaryCount?: number;
3
+ siblingCount?: number;
4
+ }
5
+ export declare function PageRanges({ siblingCount, boundaryCount, }: PageRangesProps): JSX.Element;
@@ -0,0 +1,20 @@
1
+ import { HTMLAttributes, SyntheticEvent } from "react";
2
+ export interface PaginationProps extends HTMLAttributes<HTMLElement> {
3
+ /**
4
+ * Number of pages.
5
+ */
6
+ count: number;
7
+ /**
8
+ * Current/active page.
9
+ */
10
+ page?: number;
11
+ /**
12
+ * Default current/active page.
13
+ */
14
+ defaultPage?: number;
15
+ /**
16
+ * Callback function triggered when current page changed.
17
+ */
18
+ onPageChange?: (event: SyntheticEvent, page: number) => void;
19
+ }
20
+ export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
@@ -0,0 +1,7 @@
1
+ import { SyntheticEvent } from "react";
2
+ export interface PaginationContext {
3
+ page: number;
4
+ count: number;
5
+ onPageChange: (event: SyntheticEvent, page: number) => void;
6
+ }
7
+ export declare const paginationContext: import("react").Context<PaginationContext>;
@@ -0,0 +1,12 @@
1
+ import { HTMLAttributes } from "react";
2
+ export interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {
3
+ /**
4
+ * Number of pages next to the arrow buttons when page range is truncated.
5
+ */
6
+ boundaryCount?: number;
7
+ /**
8
+ * Number of pages on each side of the current page when page range is truncated.
9
+ */
10
+ siblingCount?: number;
11
+ }
12
+ export declare const Paginator: import("react").ForwardRefExoticComponent<PaginatorProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,5 @@
1
+ export * from "./Pagination";
2
+ export * from "./Paginator";
3
+ export * from "./CompactInput";
4
+ export * from "./CompactPaginator";
5
+ export * from "./GoToInput";
@@ -0,0 +1,2 @@
1
+ export declare type PageRange = [number, number];
2
+ export declare function usePagination(page: number, count: number, boundaryCount: number, siblingCount: number): readonly [PageRange | undefined, PageRange, PageRange | undefined];
@@ -0,0 +1 @@
1
+ export declare const usePaginationContext: () => import("./PaginationContext").PaginationContext;
@@ -0,0 +1,13 @@
1
+ import { ComponentPropsWithoutRef } from "react";
2
+ export interface ScrimProps extends ComponentPropsWithoutRef<"div"> {
3
+ /**
4
+ * If `true` the scrim is bound to the document viewport.
5
+ * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).
6
+ */
7
+ fixed?: boolean;
8
+ /**
9
+ * If `true` the scrim is shown.
10
+ */
11
+ open?: boolean;
12
+ }
13
+ export declare const Scrim: import("react").ForwardRefExoticComponent<ScrimProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ export * from "./Scrim";
@@ -1,9 +1,10 @@
1
1
  import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
2
+ import { Value } from "./ToggleButtonGroupContext";
2
3
  export interface ToggleButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
3
4
  /**
4
5
  * The default value. Use when the component is not controlled.
5
6
  */
6
- defaultValue?: string | ReadonlyArray<string> | number | undefined;
7
+ defaultValue?: Value;
7
8
  /**
8
9
  * If `true`, the Toggle Button Group will be disabled.
9
10
  */
@@ -11,7 +12,7 @@ export interface ToggleButtonGroupProps extends Omit<ComponentPropsWithoutRef<"d
11
12
  /**
12
13
  * The value. Use when the component is controlled.
13
14
  */
14
- value?: string | ReadonlyArray<string> | number | undefined;
15
+ value?: Value;
15
16
  /**
16
17
  * Callback fired when the selection changes.
17
18
  * @param event
@@ -1,10 +1,12 @@
1
1
  import { SyntheticEvent } from "react";
2
+ export declare type Value = string | readonly string[] | number | undefined;
2
3
  export interface ToggleButtonGroupContextValue {
3
4
  disabled?: boolean;
4
5
  select: (event: SyntheticEvent<HTMLButtonElement>) => void;
5
- isSelected: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
6
- focus: (id: string | ReadonlyArray<string> | number | undefined) => void;
7
- isFocused: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
6
+ isSelected: (id: Value) => boolean;
7
+ focus: (id: Value) => void;
8
+ isFocused: (id: Value) => boolean;
9
+ orientation: "horizontal" | "vertical";
8
10
  }
9
11
  export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | undefined>;
10
12
  export declare function useToggleButtonGroup(): ToggleButtonGroupContextValue | undefined;
@@ -1,12 +1,16 @@
1
- import { Middleware, Placement, Platform, Strategy, useFloating } from "@floating-ui/react";
1
+ import { Middleware, Placement, Platform, Strategy, useFloating, FloatingFocusManagerProps } from "@floating-ui/react";
2
2
  import { ReactNode, ComponentPropsWithoutRef } from "react";
3
3
  export interface FloatingComponentProps extends ComponentPropsWithoutRef<"div"> {
4
4
  /**
5
- * Whether the floating component is open (used for determinig whether to show the component)
5
+ * Whether the floating component is open (used for determining whether to show the component)
6
6
  * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.
7
7
  * for caching windows and reusing them, rather than always spawning a new one
8
8
  */
9
9
  open: boolean;
10
+ /**
11
+ * Use this prop when `FloatingFocusManager` is needed for floating component
12
+ */
13
+ focusManagerProps?: Omit<FloatingFocusManagerProps, "children">;
10
14
  /**
11
15
  * Position props for the floating component
12
16
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/core",
3
- "version": "1.14.0",
3
+ "version": "1.16.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",