@salt-ds/core 1.71.0 → 1.72.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 (215) hide show
  1. package/CHANGELOG.md +82 -0
  2. package/css/salt-core.css +189 -77
  3. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  4. package/dist-cjs/avatar/Avatar.css.js +1 -1
  5. package/dist-cjs/badge/Badge.css.js +1 -1
  6. package/dist-cjs/banner/Banner.css.js +1 -1
  7. package/dist-cjs/breadcrumbs/Breadcrumb.css.js +1 -1
  8. package/dist-cjs/breadcrumbs/Breadcrumbs.css.js +1 -1
  9. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  10. package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
  11. package/dist-cjs/combo-box/ComboBox.js +18 -36
  12. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  13. package/dist-cjs/combo-box/useComboBox.js +21 -21
  14. package/dist-cjs/combo-box/useComboBox.js.map +1 -1
  15. package/dist-cjs/dropdown/Dropdown.js +29 -30
  16. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  17. package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
  18. package/dist-cjs/form-field/FormField.css.js +1 -1
  19. package/dist-cjs/form-field/FormFieldHelperText.css.js +1 -1
  20. package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
  21. package/dist-cjs/form-field/FormFieldLabel.js +1 -1
  22. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  23. package/dist-cjs/index.js +2 -0
  24. package/dist-cjs/index.js.map +1 -1
  25. package/dist-cjs/input/Input.css.js +1 -1
  26. package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
  27. package/dist-cjs/interactable-card/InteractableCard.js +18 -7
  28. package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
  29. package/dist-cjs/interactable-card/InteractableCardGroup.js +71 -39
  30. package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
  31. package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
  32. package/dist-cjs/interactable-card/useInteractableCard.js +2 -3
  33. package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
  34. package/dist-cjs/kbd/Kbd.css.js +1 -1
  35. package/dist-cjs/link/Link.css.js +1 -1
  36. package/dist-cjs/list-box/ListBox.js +19 -26
  37. package/dist-cjs/list-box/ListBox.js.map +1 -1
  38. package/dist-cjs/list-control/ListControlNavigationKeys.js +74 -0
  39. package/dist-cjs/list-control/ListControlNavigationKeys.js.map +1 -0
  40. package/dist-cjs/list-control/ListControlOptionContext.js +47 -0
  41. package/dist-cjs/list-control/ListControlOptionContext.js.map +1 -0
  42. package/dist-cjs/list-control/ListControlOptionStore.js +159 -0
  43. package/dist-cjs/list-control/ListControlOptionStore.js.map +1 -0
  44. package/dist-cjs/list-control/ListControlProvider.js +39 -0
  45. package/dist-cjs/list-control/ListControlProvider.js.map +1 -0
  46. package/dist-cjs/list-control/ListControlRegistry.js +161 -0
  47. package/dist-cjs/list-control/ListControlRegistry.js.map +1 -0
  48. package/dist-cjs/list-control/ListControlState.js +137 -109
  49. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  50. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  51. package/dist-cjs/mega-menu/MegaMenuListItem.css.js +1 -1
  52. package/dist-cjs/menu/MenuGroup.css.js +1 -1
  53. package/dist-cjs/menu/MenuItem.css.js +1 -1
  54. package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
  55. package/dist-cjs/number-input/NumberInput.js +2 -2
  56. package/dist-cjs/number-input/NumberInput.js.map +1 -1
  57. package/dist-cjs/option/Option.js +58 -39
  58. package/dist-cjs/option/Option.js.map +1 -1
  59. package/dist-cjs/option/OptionGroup.css.js +1 -1
  60. package/dist-cjs/overlay/Overlay.js +12 -2
  61. package/dist-cjs/overlay/Overlay.js.map +1 -1
  62. package/dist-cjs/overlay/OverlayContext.js +6 -0
  63. package/dist-cjs/overlay/OverlayContext.js.map +1 -1
  64. package/dist-cjs/overlay/OverlayFooter.css.js +6 -0
  65. package/dist-cjs/overlay/OverlayFooter.css.js.map +1 -0
  66. package/dist-cjs/overlay/OverlayFooter.js +30 -0
  67. package/dist-cjs/overlay/OverlayFooter.js.map +1 -0
  68. package/dist-cjs/overlay/OverlayHeader.css.js +1 -1
  69. package/dist-cjs/overlay/OverlayHeader.js +51 -11
  70. package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
  71. package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
  72. package/dist-cjs/overlay/OverlayPanel.js +20 -7
  73. package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
  74. package/dist-cjs/overlay/OverlayPanelContent.css.js +1 -1
  75. package/dist-cjs/overlay/OverlayPanelContent.js +11 -13
  76. package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
  77. package/dist-cjs/overlay/hasOverlaySection.js +24 -0
  78. package/dist-cjs/overlay/hasOverlaySection.js.map +1 -0
  79. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  80. package/dist-cjs/pill-input/PillInput.js +2 -2
  81. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  82. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  83. package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
  84. package/dist-cjs/rating/Rating.css.js +1 -1
  85. package/dist-cjs/slider/internal/SliderTrack.css.js +1 -1
  86. package/dist-cjs/stepper/internal/StepText.css.js +1 -1
  87. package/dist-cjs/switch/Switch.css.js +1 -1
  88. package/dist-cjs/table/Table.css.js +1 -1
  89. package/dist-cjs/tag/Tag.css.js +1 -1
  90. package/dist-cjs/text/Text.css.js +1 -1
  91. package/dist-cjs/toast/Toast.css.js +1 -1
  92. package/dist-cjs/toggle-button/ToggleButton.js +8 -2
  93. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  94. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +71 -8
  95. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  96. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  97. package/dist-cjs/toggletip/ToggletipPanel.css.js +1 -1
  98. package/dist-cjs/tooltip/Tooltip.css.js +1 -1
  99. package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
  100. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  101. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  102. package/dist-es/avatar/Avatar.css.js +1 -1
  103. package/dist-es/badge/Badge.css.js +1 -1
  104. package/dist-es/banner/Banner.css.js +1 -1
  105. package/dist-es/breadcrumbs/Breadcrumb.css.js +1 -1
  106. package/dist-es/breadcrumbs/Breadcrumbs.css.js +1 -1
  107. package/dist-es/checkbox/Checkbox.css.js +1 -1
  108. package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
  109. package/dist-es/combo-box/ComboBox.js +18 -36
  110. package/dist-es/combo-box/ComboBox.js.map +1 -1
  111. package/dist-es/combo-box/useComboBox.js +21 -21
  112. package/dist-es/combo-box/useComboBox.js.map +1 -1
  113. package/dist-es/dropdown/Dropdown.js +29 -30
  114. package/dist-es/dropdown/Dropdown.js.map +1 -1
  115. package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
  116. package/dist-es/form-field/FormField.css.js +1 -1
  117. package/dist-es/form-field/FormFieldHelperText.css.js +1 -1
  118. package/dist-es/form-field/FormFieldLabel.css.js +1 -1
  119. package/dist-es/form-field/FormFieldLabel.js +1 -1
  120. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  121. package/dist-es/index.js +1 -0
  122. package/dist-es/index.js.map +1 -1
  123. package/dist-es/input/Input.css.js +1 -1
  124. package/dist-es/interactable-card/InteractableCard.css.js +1 -1
  125. package/dist-es/interactable-card/InteractableCard.js +18 -7
  126. package/dist-es/interactable-card/InteractableCard.js.map +1 -1
  127. package/dist-es/interactable-card/InteractableCardGroup.js +72 -40
  128. package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
  129. package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
  130. package/dist-es/interactable-card/useInteractableCard.js +2 -3
  131. package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
  132. package/dist-es/kbd/Kbd.css.js +1 -1
  133. package/dist-es/link/Link.css.js +1 -1
  134. package/dist-es/list-box/ListBox.js +19 -26
  135. package/dist-es/list-box/ListBox.js.map +1 -1
  136. package/dist-es/list-control/ListControlNavigationKeys.js +69 -0
  137. package/dist-es/list-control/ListControlNavigationKeys.js.map +1 -0
  138. package/dist-es/list-control/ListControlOptionContext.js +44 -0
  139. package/dist-es/list-control/ListControlOptionContext.js.map +1 -0
  140. package/dist-es/list-control/ListControlOptionStore.js +153 -0
  141. package/dist-es/list-control/ListControlOptionStore.js.map +1 -0
  142. package/dist-es/list-control/ListControlProvider.js +37 -0
  143. package/dist-es/list-control/ListControlProvider.js.map +1 -0
  144. package/dist-es/list-control/ListControlRegistry.js +158 -0
  145. package/dist-es/list-control/ListControlRegistry.js.map +1 -0
  146. package/dist-es/list-control/ListControlState.js +137 -110
  147. package/dist-es/list-control/ListControlState.js.map +1 -1
  148. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  149. package/dist-es/mega-menu/MegaMenuListItem.css.js +1 -1
  150. package/dist-es/menu/MenuGroup.css.js +1 -1
  151. package/dist-es/menu/MenuItem.css.js +1 -1
  152. package/dist-es/navigation-item/NavigationItem.css.js +1 -1
  153. package/dist-es/number-input/NumberInput.js +2 -2
  154. package/dist-es/number-input/NumberInput.js.map +1 -1
  155. package/dist-es/option/Option.js +59 -40
  156. package/dist-es/option/Option.js.map +1 -1
  157. package/dist-es/option/OptionGroup.css.js +1 -1
  158. package/dist-es/overlay/Overlay.js +13 -3
  159. package/dist-es/overlay/Overlay.js.map +1 -1
  160. package/dist-es/overlay/OverlayContext.js +6 -0
  161. package/dist-es/overlay/OverlayContext.js.map +1 -1
  162. package/dist-es/overlay/OverlayFooter.css.js +4 -0
  163. package/dist-es/overlay/OverlayFooter.css.js.map +1 -0
  164. package/dist-es/overlay/OverlayFooter.js +28 -0
  165. package/dist-es/overlay/OverlayFooter.js.map +1 -0
  166. package/dist-es/overlay/OverlayHeader.css.js +1 -1
  167. package/dist-es/overlay/OverlayHeader.js +51 -11
  168. package/dist-es/overlay/OverlayHeader.js.map +1 -1
  169. package/dist-es/overlay/OverlayPanel.css.js +1 -1
  170. package/dist-es/overlay/OverlayPanel.js +20 -7
  171. package/dist-es/overlay/OverlayPanel.js.map +1 -1
  172. package/dist-es/overlay/OverlayPanelContent.css.js +1 -1
  173. package/dist-es/overlay/OverlayPanelContent.js +11 -13
  174. package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
  175. package/dist-es/overlay/hasOverlaySection.js +22 -0
  176. package/dist-es/overlay/hasOverlaySection.js.map +1 -0
  177. package/dist-es/pill-input/PillInput.css.js +1 -1
  178. package/dist-es/pill-input/PillInput.js +2 -2
  179. package/dist-es/pill-input/PillInput.js.map +1 -1
  180. package/dist-es/radio-button/RadioButton.css.js +1 -1
  181. package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
  182. package/dist-es/rating/Rating.css.js +1 -1
  183. package/dist-es/slider/internal/SliderTrack.css.js +1 -1
  184. package/dist-es/stepper/internal/StepText.css.js +1 -1
  185. package/dist-es/switch/Switch.css.js +1 -1
  186. package/dist-es/table/Table.css.js +1 -1
  187. package/dist-es/tag/Tag.css.js +1 -1
  188. package/dist-es/text/Text.css.js +1 -1
  189. package/dist-es/toast/Toast.css.js +1 -1
  190. package/dist-es/toggle-button/ToggleButton.js +8 -2
  191. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  192. package/dist-es/toggle-button-group/ToggleButtonGroup.js +71 -8
  193. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  194. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  195. package/dist-es/toggletip/ToggletipPanel.css.js +1 -1
  196. package/dist-es/tooltip/Tooltip.css.js +1 -1
  197. package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
  198. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  199. package/dist-types/combo-box/useComboBox.d.ts +3 -6
  200. package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +2 -0
  201. package/dist-types/interactable-card/useInteractableCard.d.ts +1 -2
  202. package/dist-types/list-control/ListControlNavigationKeys.d.ts +30 -0
  203. package/dist-types/list-control/ListControlOptionContext.d.ts +18 -0
  204. package/dist-types/list-control/ListControlOptionStore.d.ts +17 -0
  205. package/dist-types/list-control/ListControlProvider.d.ts +11 -0
  206. package/dist-types/list-control/ListControlRegistry.d.ts +22 -0
  207. package/dist-types/list-control/ListControlState.d.ts +6 -6
  208. package/dist-types/option/Option.d.ts +3 -1
  209. package/dist-types/overlay/Overlay.d.ts +2 -1
  210. package/dist-types/overlay/OverlayContext.d.ts +4 -0
  211. package/dist-types/overlay/OverlayFooter.d.ts +4 -0
  212. package/dist-types/overlay/hasOverlaySection.d.ts +2 -0
  213. package/dist-types/overlay/index.d.ts +1 -0
  214. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +2 -1
  215. package/package.json +4 -4
@@ -1,5 +1,7 @@
1
1
  import { type SyntheticEvent } from "react";
2
2
  import type { OptionValue } from "./ListControlContext";
3
+ import { ListControlOptionStore } from "./ListControlOptionStore";
4
+ import { type RegisteredOption } from "./ListControlRegistry";
3
5
  export type OpenChangeReason = "input" | "manual";
4
6
  export type ListControlProps<Item> = {
5
7
  /**
@@ -44,13 +46,14 @@ export type ListControlProps<Item> = {
44
46
  valueToString?: (item: Item) => string;
45
47
  };
46
48
  export declare function defaultValueToString<Item>(item: Item): string;
49
+ export declare function findOptionFromSearch<Item>(options: readonly Pick<RegisteredOption<Item>, "data">[], search: string, valueToString: (item: Item) => string, startFrom?: OptionValue<Item>): OptionValue<Item> | undefined;
47
50
  export declare function useListControl<Item>(props: ListControlProps<Item>): {
48
51
  multiselect: boolean;
49
52
  openState: boolean;
50
53
  setOpen: (newOpen: boolean, reason?: OpenChangeReason, key?: string) => void;
51
54
  openKey: import("react").MutableRefObject<string | undefined>;
52
55
  activeState: OptionValue<Item> | undefined;
53
- setActive: (option?: OptionValue<Item>) => void;
56
+ setActive: import("react").Dispatch<import("react").SetStateAction<OptionValue<Item> | undefined>>;
54
57
  selectedState: Item[];
55
58
  setSelectedState: import("react").Dispatch<import("react").SetStateAction<Item[]>>;
56
59
  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
@@ -61,17 +64,13 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
61
64
  setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
62
65
  setListRef: import("react").Ref<HTMLDivElement>;
63
66
  listRef: import("react").RefObject<HTMLDivElement>;
64
- options: HTMLElement[];
65
67
  register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
66
68
  getOptionAtIndex: (index: number) => {
67
69
  data: OptionValue<Item>;
68
70
  element: HTMLElement;
69
71
  } | undefined;
70
72
  getIndexOfOption: (option: OptionValue<Item>) => number;
71
- getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => {
72
- data: OptionValue<Item>;
73
- element: HTMLElement;
74
- }[];
73
+ getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => RegisteredOption<Item>[];
75
74
  getOptionFromSearch: (search: string, startFrom?: OptionValue<Item>) => OptionValue<Item> | undefined;
76
75
  getOptionAfter: (option: OptionValue<Item>) => {
77
76
  data: OptionValue<Item>;
@@ -99,4 +98,5 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
99
98
  } | undefined;
100
99
  valueToString: (item: Item) => string;
101
100
  disabled: boolean | undefined;
101
+ optionStateStore: ListControlOptionStore<Item>;
102
102
  };
@@ -13,4 +13,6 @@ export interface OptionProps extends ComponentPropsWithoutRef<"div"> {
13
13
  */
14
14
  children?: ReactNode;
15
15
  }
16
- export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLDivElement>>;
16
+ declare const OptionComponent: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLDivElement>>;
17
+ export declare const Option: typeof OptionComponent;
18
+ export {};
@@ -1,4 +1,5 @@
1
1
  import { type ReactNode } from "react";
2
+ import { type UseFloatingUIProps } from "../utils";
2
3
  export interface OverlayProps {
3
4
  /**
4
5
  * The content of the Overlay, typically an `OverlayTrigger` and `OverlayPanel`.
@@ -15,7 +16,7 @@ export interface OverlayProps {
15
16
  /**
16
17
  * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.
17
18
  */
18
- placement?: "top" | "bottom" | "left" | "right";
19
+ placement?: UseFloatingUIProps["placement"];
19
20
  /**
20
21
  * When `true`, the arrow indicator is hidden
21
22
  */
@@ -17,6 +17,10 @@ export interface OverlayContextValue {
17
17
  floating?: (node: HTMLElement | null) => void;
18
18
  getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
19
19
  getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;
20
+ headerId?: string;
21
+ setHeaderId?: (id: string | undefined) => void;
22
+ descriptionId?: string;
23
+ setDescriptionId?: (id: string | undefined) => void;
20
24
  }
21
25
  export declare const OverlayContext: import("react").Context<OverlayContextValue>;
22
26
  export declare function useOverlayContext(): OverlayContextValue;
@@ -0,0 +1,4 @@
1
+ import { type ComponentPropsWithoutRef } from "react";
2
+ export interface OverlayFooterProps extends ComponentPropsWithoutRef<"div"> {
3
+ }
4
+ export declare const OverlayFooter: import("react").ForwardRefExoticComponent<OverlayFooterProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,2 @@
1
+ import { type ReactNode } from "react";
2
+ export declare function hasOverlaySection(children: ReactNode): boolean;
@@ -1,4 +1,5 @@
1
1
  export * from "./Overlay";
2
+ export * from "./OverlayFooter";
2
3
  export * from "./OverlayHeader";
3
4
  export * from "./OverlayPanel";
4
5
  export * from "./OverlayPanelCloseButton";
@@ -9,7 +9,8 @@ export interface ToggleButtonGroupContextValue {
9
9
  isSelected: (id: Value) => boolean;
10
10
  orientation: "horizontal" | "vertical";
11
11
  readOnly?: boolean;
12
- select: (event: SyntheticEvent<HTMLButtonElement>) => void;
12
+ registerButton: (value: Value, element: HTMLElement) => () => void;
13
+ select: (event: SyntheticEvent<HTMLButtonElement>, value?: Value) => void;
13
14
  sentiment?: ButtonSentiment;
14
15
  }
15
16
  export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | undefined>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/core",
3
- "version": "1.71.0",
3
+ "version": "1.72.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -23,9 +23,9 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@floating-ui/react": "^0.27.19",
26
- "@salt-ds/icons": "^1.18.2",
27
- "@salt-ds/styles": "0.4.0",
28
- "@salt-ds/window": "0.1.1",
26
+ "@salt-ds/icons": "^1.18.3",
27
+ "@salt-ds/styles": "0.4.1",
28
+ "@salt-ds/window": "0.1.2",
29
29
  "clsx": "^2.0.0",
30
30
  "compute-scroll-into-view": "^3.0.0",
31
31
  "dom-accessibility-api": "^0.7.1",