@salt-ds/lab 1.0.0-alpha.39 → 1.0.0-alpha.40

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 (151) hide show
  1. package/css/salt-lab.css +288 -57
  2. package/dist-cjs/calendar/internal/CalendarDay.js +1 -0
  3. package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
  4. package/dist-cjs/carousel/CarouselSlide.js +1 -2
  5. package/dist-cjs/carousel/CarouselSlide.js.map +1 -1
  6. package/dist-cjs/color-chooser/ColorChooser.js +10 -12
  7. package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
  8. package/dist-cjs/date-input/DateInput.css.js +6 -0
  9. package/dist-cjs/date-input/DateInput.css.js.map +1 -0
  10. package/dist-cjs/date-input/DateInput.js +153 -0
  11. package/dist-cjs/date-input/DateInput.js.map +1 -0
  12. package/dist-cjs/index.js +12 -10
  13. package/dist-cjs/index.js.map +1 -1
  14. package/dist-cjs/menu/Menu.js +24 -0
  15. package/dist-cjs/menu/Menu.js.map +1 -0
  16. package/dist-cjs/menu/MenuBase.js +116 -0
  17. package/dist-cjs/menu/MenuBase.js.map +1 -0
  18. package/dist-cjs/menu/MenuContext.js +26 -0
  19. package/dist-cjs/menu/MenuContext.js.map +1 -0
  20. package/dist-cjs/menu/MenuGroup.css.js +6 -0
  21. package/dist-cjs/menu/MenuGroup.css.js.map +1 -0
  22. package/dist-cjs/menu/MenuGroup.js +44 -0
  23. package/dist-cjs/menu/MenuGroup.js.map +1 -0
  24. package/dist-cjs/menu/MenuItem.css.js +6 -0
  25. package/dist-cjs/menu/MenuItem.css.js.map +1 -0
  26. package/dist-cjs/menu/MenuItem.js +92 -0
  27. package/dist-cjs/menu/MenuItem.js.map +1 -0
  28. package/dist-cjs/menu/MenuPanel.css.js +6 -0
  29. package/dist-cjs/menu/MenuPanel.css.js.map +1 -0
  30. package/dist-cjs/menu/MenuPanel.js +61 -0
  31. package/dist-cjs/menu/MenuPanel.js.map +1 -0
  32. package/dist-cjs/menu/MenuPanelBase.js +29 -0
  33. package/dist-cjs/menu/MenuPanelBase.js.map +1 -0
  34. package/dist-cjs/menu/MenuPanelContext.js +22 -0
  35. package/dist-cjs/menu/MenuPanelContext.js.map +1 -0
  36. package/dist-cjs/menu/MenuTrigger.js +43 -0
  37. package/dist-cjs/menu/MenuTrigger.js.map +1 -0
  38. package/dist-cjs/menu/MenuTriggerContext.js +18 -0
  39. package/dist-cjs/menu/MenuTriggerContext.js.map +1 -0
  40. package/dist-cjs/parent-child-layout/ParentChildLayout.css.js +1 -1
  41. package/dist-cjs/parent-child-layout/ParentChildLayout.js +22 -33
  42. package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
  43. package/dist-cjs/tabs-next/TabNext.js +1 -0
  44. package/dist-cjs/tabs-next/TabNext.js.map +1 -1
  45. package/dist-cjs/utils/useIsViewportLargerThanBreakpoint.js +2 -2
  46. package/dist-cjs/utils/useIsViewportLargerThanBreakpoint.js.map +1 -1
  47. package/dist-es/calendar/internal/CalendarDay.js +1 -0
  48. package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
  49. package/dist-es/carousel/CarouselSlide.js +1 -2
  50. package/dist-es/carousel/CarouselSlide.js.map +1 -1
  51. package/dist-es/color-chooser/ColorChooser.js +9 -11
  52. package/dist-es/color-chooser/ColorChooser.js.map +1 -1
  53. package/dist-es/date-input/DateInput.css.js +4 -0
  54. package/dist-es/date-input/DateInput.css.js.map +1 -0
  55. package/dist-es/date-input/DateInput.js +149 -0
  56. package/dist-es/date-input/DateInput.js.map +1 -0
  57. package/dist-es/index.js +6 -5
  58. package/dist-es/index.js.map +1 -1
  59. package/dist-es/menu/Menu.js +20 -0
  60. package/dist-es/menu/Menu.js.map +1 -0
  61. package/dist-es/menu/MenuBase.js +112 -0
  62. package/dist-es/menu/MenuBase.js.map +1 -0
  63. package/dist-es/menu/MenuContext.js +21 -0
  64. package/dist-es/menu/MenuContext.js.map +1 -0
  65. package/dist-es/menu/MenuGroup.css.js +4 -0
  66. package/dist-es/menu/MenuGroup.css.js.map +1 -0
  67. package/dist-es/menu/MenuGroup.js +40 -0
  68. package/dist-es/menu/MenuGroup.js.map +1 -0
  69. package/dist-es/menu/MenuItem.css.js +4 -0
  70. package/dist-es/menu/MenuItem.css.js.map +1 -0
  71. package/dist-es/menu/MenuItem.js +88 -0
  72. package/dist-es/menu/MenuItem.js.map +1 -0
  73. package/dist-es/menu/MenuPanel.css.js +4 -0
  74. package/dist-es/menu/MenuPanel.css.js.map +1 -0
  75. package/dist-es/menu/MenuPanel.js +57 -0
  76. package/dist-es/menu/MenuPanel.js.map +1 -0
  77. package/dist-es/menu/MenuPanelBase.js +25 -0
  78. package/dist-es/menu/MenuPanelBase.js.map +1 -0
  79. package/dist-es/menu/MenuPanelContext.js +17 -0
  80. package/dist-es/menu/MenuPanelContext.js.map +1 -0
  81. package/dist-es/menu/MenuTrigger.js +39 -0
  82. package/dist-es/menu/MenuTrigger.js.map +1 -0
  83. package/dist-es/menu/MenuTriggerContext.js +13 -0
  84. package/dist-es/menu/MenuTriggerContext.js.map +1 -0
  85. package/dist-es/parent-child-layout/ParentChildLayout.css.js +1 -1
  86. package/dist-es/parent-child-layout/ParentChildLayout.js +23 -34
  87. package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
  88. package/dist-es/tabs-next/TabNext.js +1 -0
  89. package/dist-es/tabs-next/TabNext.js.map +1 -1
  90. package/dist-es/utils/useIsViewportLargerThanBreakpoint.js +2 -2
  91. package/dist-es/utils/useIsViewportLargerThanBreakpoint.js.map +1 -1
  92. package/dist-types/carousel/CarouselSlide.d.ts +1 -2
  93. package/dist-types/date-input/DateInput.d.ts +33 -0
  94. package/dist-types/date-input/index.d.ts +1 -0
  95. package/dist-types/index.d.ts +2 -1
  96. package/dist-types/menu/Menu.d.ts +4 -0
  97. package/dist-types/menu/MenuBase.d.ts +22 -0
  98. package/dist-types/menu/MenuContext.d.ts +16 -0
  99. package/dist-types/menu/MenuGroup.d.ts +12 -0
  100. package/dist-types/menu/MenuItem.d.ts +8 -0
  101. package/dist-types/menu/MenuPanel.d.ts +8 -0
  102. package/dist-types/menu/MenuPanelBase.d.ts +4 -0
  103. package/dist-types/menu/MenuPanelContext.d.ts +5 -0
  104. package/dist-types/menu/MenuTrigger.d.ts +8 -0
  105. package/dist-types/menu/MenuTriggerContext.d.ts +6 -0
  106. package/dist-types/menu/index.d.ts +5 -0
  107. package/dist-types/parent-child-layout/ParentChildLayout.d.ts +11 -13
  108. package/package.json +3 -3
  109. package/dist-cjs/overlay/Overlay.js +0 -74
  110. package/dist-cjs/overlay/Overlay.js.map +0 -1
  111. package/dist-cjs/overlay/OverlayContext.js +0 -35
  112. package/dist-cjs/overlay/OverlayContext.js.map +0 -1
  113. package/dist-cjs/overlay/OverlayPanel.css.js +0 -6
  114. package/dist-cjs/overlay/OverlayPanel.css.js.map +0 -1
  115. package/dist-cjs/overlay/OverlayPanel.js +0 -79
  116. package/dist-cjs/overlay/OverlayPanel.js.map +0 -1
  117. package/dist-cjs/overlay/OverlayPanelCloseButton.css.js +0 -6
  118. package/dist-cjs/overlay/OverlayPanelCloseButton.css.js.map +0 -1
  119. package/dist-cjs/overlay/OverlayPanelCloseButton.js +0 -42
  120. package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +0 -1
  121. package/dist-cjs/overlay/OverlayPanelContent.css.js +0 -6
  122. package/dist-cjs/overlay/OverlayPanelContent.css.js.map +0 -1
  123. package/dist-cjs/overlay/OverlayPanelContent.js +0 -35
  124. package/dist-cjs/overlay/OverlayPanelContent.js.map +0 -1
  125. package/dist-cjs/overlay/OverlayTrigger.js +0 -31
  126. package/dist-cjs/overlay/OverlayTrigger.js.map +0 -1
  127. package/dist-es/overlay/Overlay.js +0 -70
  128. package/dist-es/overlay/Overlay.js.map +0 -1
  129. package/dist-es/overlay/OverlayContext.js +0 -30
  130. package/dist-es/overlay/OverlayContext.js.map +0 -1
  131. package/dist-es/overlay/OverlayPanel.css.js +0 -4
  132. package/dist-es/overlay/OverlayPanel.css.js.map +0 -1
  133. package/dist-es/overlay/OverlayPanel.js +0 -75
  134. package/dist-es/overlay/OverlayPanel.js.map +0 -1
  135. package/dist-es/overlay/OverlayPanelCloseButton.css.js +0 -4
  136. package/dist-es/overlay/OverlayPanelCloseButton.css.js.map +0 -1
  137. package/dist-es/overlay/OverlayPanelCloseButton.js +0 -34
  138. package/dist-es/overlay/OverlayPanelCloseButton.js.map +0 -1
  139. package/dist-es/overlay/OverlayPanelContent.css.js +0 -4
  140. package/dist-es/overlay/OverlayPanelContent.css.js.map +0 -1
  141. package/dist-es/overlay/OverlayPanelContent.js +0 -27
  142. package/dist-es/overlay/OverlayPanelContent.js.map +0 -1
  143. package/dist-es/overlay/OverlayTrigger.js +0 -27
  144. package/dist-es/overlay/OverlayTrigger.js.map +0 -1
  145. package/dist-types/overlay/Overlay.d.ts +0 -13
  146. package/dist-types/overlay/OverlayContext.d.ts +0 -21
  147. package/dist-types/overlay/OverlayPanel.d.ts +0 -8
  148. package/dist-types/overlay/OverlayPanelCloseButton.d.ts +0 -2
  149. package/dist-types/overlay/OverlayPanelContent.d.ts +0 -8
  150. package/dist-types/overlay/OverlayTrigger.d.ts +0 -5
  151. package/dist-types/overlay/index.d.ts +0 -5
@@ -0,0 +1,153 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var clsx = require('clsx');
7
+ var React = require('react');
8
+ var styles = require('@salt-ds/styles');
9
+ var window = require('@salt-ds/window');
10
+ var DateInput$1 = require('./DateInput.css.js');
11
+ var core = require('@salt-ds/core');
12
+ var date = require('@internationalized/date');
13
+
14
+ const withBaseName = core.makePrefixer("saltDateInput");
15
+ const isInvalidDate = (value) => value && isNaN(new Date(value));
16
+ const defaultDateFormatter = (input) => {
17
+ const date$1 = new Date(input);
18
+ return isInvalidDate(input) ? input : new date.DateFormatter("EN-GB", {
19
+ day: "2-digit",
20
+ month: "short",
21
+ year: "numeric"
22
+ }).format(date$1);
23
+ };
24
+ const DateInput = React.forwardRef(
25
+ function DateInput2({
26
+ "aria-activedescendant": ariaActiveDescendant,
27
+ "aria-expanded": ariaExpanded,
28
+ "aria-owns": ariaOwns,
29
+ className,
30
+ disabled,
31
+ emptyReadOnlyMarker = "\u2014",
32
+ inputProps = {},
33
+ inputRef,
34
+ readOnly: readOnlyProp,
35
+ role,
36
+ value: valueProp,
37
+ defaultValue: defaultStartDateProp = valueProp === void 0 ? "" : void 0,
38
+ validationStatus: validationStatusProp,
39
+ variant = "primary",
40
+ dateFormatter = defaultDateFormatter,
41
+ placeholder = "dd mmm yyyy",
42
+ ...rest
43
+ }, ref) {
44
+ var _a;
45
+ const targetWindow = window.useWindow();
46
+ styles.useComponentCssInjection({
47
+ testId: "salt-dateInput",
48
+ css: DateInput$1,
49
+ window: targetWindow
50
+ });
51
+ const {
52
+ a11yProps: {
53
+ "aria-describedby": formFieldDescribedBy,
54
+ "aria-labelledby": formFieldLabelledBy
55
+ } = {},
56
+ disabled: formFieldDisabled,
57
+ readOnly: formFieldReadOnly,
58
+ necessity: formFieldRequired,
59
+ validationStatus: formFieldValidationStatus
60
+ } = core.useFormFieldProps();
61
+ const restA11yProps = {
62
+ "aria-activedescendant": ariaActiveDescendant,
63
+ "aria-expanded": ariaExpanded,
64
+ "aria-owns": ariaOwns
65
+ };
66
+ const isReadOnly = readOnlyProp || formFieldReadOnly;
67
+ const isEmptyReadOnly = isReadOnly && !defaultStartDateProp && !valueProp;
68
+ const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultStartDateProp;
69
+ const [value, setValue] = core.useControlled({
70
+ controlled: valueProp,
71
+ default: defaultValue,
72
+ name: "DateInput",
73
+ state: "value"
74
+ });
75
+ const getDateValidationStatus = (value2) => isInvalidDate(value2) ? "error" : void 0;
76
+ const [dateStatus, setDateStatus] = React.useState(
77
+ getDateValidationStatus(value)
78
+ );
79
+ const isDisabled = disabled || formFieldDisabled;
80
+ const validationStatus = (_a = dateStatus != null ? dateStatus : formFieldValidationStatus) != null ? _a : validationStatusProp;
81
+ const [focused, setFocused] = React.useState(false);
82
+ const {
83
+ "aria-describedby": dateInputDescribedBy,
84
+ "aria-labelledby": dateInputLabelledBy,
85
+ onBlur,
86
+ onChange,
87
+ onFocus,
88
+ required: dateInputPropsRequired,
89
+ ...restDateInputProps
90
+ } = inputProps;
91
+ const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : dateInputPropsRequired;
92
+ const format = (date) => {
93
+ const formattedDate = dateFormatter(date);
94
+ setValue(formattedDate);
95
+ };
96
+ const handleStartDateChange = (event) => {
97
+ setValue(event.target.value);
98
+ onChange == null ? void 0 : onChange(event);
99
+ };
100
+ const handleStartDateBlur = (event) => {
101
+ const stringDate = value;
102
+ value && format(stringDate);
103
+ onBlur == null ? void 0 : onBlur(event);
104
+ setDateStatus(getDateValidationStatus(stringDate));
105
+ setFocused(false);
106
+ };
107
+ const handleFocus = (event) => {
108
+ onFocus == null ? void 0 : onFocus(event);
109
+ setFocused(true);
110
+ };
111
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
112
+ className: clsx.clsx(
113
+ withBaseName(),
114
+ withBaseName(variant),
115
+ {
116
+ [withBaseName("focused")]: !isDisabled && focused,
117
+ [withBaseName("disabled")]: isDisabled,
118
+ [withBaseName("readOnly")]: isReadOnly,
119
+ [withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus
120
+ },
121
+ className
122
+ ),
123
+ ref,
124
+ ...rest,
125
+ children: [
126
+ /* @__PURE__ */ jsxRuntime.jsx("input", {
127
+ "aria-describedby": clsx.clsx(formFieldDescribedBy, dateInputDescribedBy),
128
+ "aria-labelledby": clsx.clsx(formFieldLabelledBy, dateInputLabelledBy),
129
+ className: clsx.clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
130
+ disabled: isDisabled,
131
+ readOnly: isReadOnly,
132
+ ref: inputRef,
133
+ role,
134
+ tabIndex: isDisabled ? -1 : 0,
135
+ onBlur: handleStartDateBlur,
136
+ onChange: handleStartDateChange,
137
+ onFocus: !isDisabled ? handleFocus : void 0,
138
+ placeholder,
139
+ value,
140
+ ...restA11yProps,
141
+ ...restDateInputProps,
142
+ required: isRequired
143
+ }),
144
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
145
+ className: withBaseName("activationIndicator")
146
+ })
147
+ ]
148
+ });
149
+ }
150
+ );
151
+
152
+ exports.DateInput = DateInput;
153
+ //# sourceMappingURL=DateInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateInput.js","sources":["../src/date-input/DateInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n Ref,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dateInputCss from \"./DateInput.css\";\nimport { makePrefixer, useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { DateFormatter } from \"@internationalized/date\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\nconst isInvalidDate = (value: string) =>\n // @ts-ignore evaluating validity of date\n value && isNaN(new Date(value));\n\nconst defaultDateFormatter = (input: string): string => {\n const date = new Date(input);\n\n return isInvalidDate(input)\n ? input\n : new DateFormatter(\"EN-GB\", {\n day: \"2-digit\",\n month: \"short\",\n year: \"numeric\",\n }).format(date);\n};\nexport interface DateInputProps\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 DateInput.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes) applied to the `input` elements.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the dateInput component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Function to format the input value.\n */\n dateFormatter?: (input: string) => string;\n}\n\nexport const DateInput = forwardRef<HTMLDivElement, DateInputProps>(\n function DateInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className,\n disabled,\n emptyReadOnlyMarker = \"—\",\n inputProps = {},\n inputRef,\n readOnly: readOnlyProp,\n role,\n value: valueProp,\n defaultValue: defaultStartDateProp = valueProp === undefined\n ? \"\"\n : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n dateFormatter = defaultDateFormatter,\n placeholder = \"dd mmm yyyy\",\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dateInput\",\n css: dateInputCss,\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 isReadOnly = readOnlyProp || formFieldReadOnly;\n const isEmptyReadOnly = isReadOnly && !defaultStartDateProp && !valueProp;\n const defaultValue = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : defaultStartDateProp;\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DateInput\",\n state: \"value\",\n });\n\n const getDateValidationStatus = (value: string) =>\n isInvalidDate(value) ? \"error\" : undefined;\n\n const [dateStatus, setDateStatus] = useState<\"error\" | undefined>(\n getDateValidationStatus(value as string)\n );\n\n const isDisabled = disabled || formFieldDisabled;\n const validationStatus =\n dateStatus ?? formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": dateInputDescribedBy,\n \"aria-labelledby\": dateInputLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: dateInputPropsRequired,\n ...restDateInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : dateInputPropsRequired;\n\n const format = (date: string) => {\n const formattedDate = dateFormatter(date);\n setValue(formattedDate);\n };\n const handleStartDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n onChange?.(event);\n };\n\n const handleStartDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n const stringDate = value as string;\n value && format(stringDate);\n onBlur?.(event);\n setDateStatus(getDateValidationStatus(stringDate));\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\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(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, dateInputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleStartDateBlur}\n onChange={handleStartDateChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restDateInputProps}\n required={isRequired}\n />\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n }\n);\n"],"names":["makePrefixer","date","DateFormatter","forwardRef","DateInput","useWindow","useComponentCssInjection","dateInputCss","useFormFieldProps","useControlled","value","useState","jsxs","clsx","jsx"],"mappings":"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"}
package/dist-cjs/index.js CHANGED
@@ -58,6 +58,7 @@ var ContactTertiaryInfo = require('./contact-details/ContactTertiaryInfo.js');
58
58
  var ContactFavoriteToggle = require('./contact-details/ContactFavoriteToggle.js');
59
59
  var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
60
60
  var ContentStatus = require('./content-status/ContentStatus.js');
61
+ var DateInput = require('./date-input/DateInput.js');
61
62
  var DeckItem = require('./deck-item/DeckItem.js');
62
63
  var DeckLayout = require('./deck-layout/DeckLayout.js');
63
64
  var DropdownBase = require('./dropdown/DropdownBase.js');
@@ -86,15 +87,15 @@ var ListItemNext = require('./list-next/ListItemNext.js');
86
87
  var Logo = require('./logo/Logo.js');
87
88
  var LogoImage = require('./logo/LogoImage.js');
88
89
  var LogoSeparator = require('./logo/LogoSeparator.js');
90
+ var Menu = require('./menu/Menu.js');
91
+ var MenuItem = require('./menu/MenuItem.js');
92
+ var MenuPanel = require('./menu/MenuPanel.js');
93
+ var MenuTrigger = require('./menu/MenuTrigger.js');
94
+ var MenuGroup = require('./menu/MenuGroup.js');
89
95
  var MenuButton = require('./menu-button/MenuButton.js');
90
96
  var Metric = require('./metric/Metric.js');
91
97
  var MetricHeader = require('./metric/MetricHeader.js');
92
98
  var MetricContent = require('./metric/MetricContent.js');
93
- var Overlay = require('./overlay/Overlay.js');
94
- var OverlayTrigger = require('./overlay/OverlayTrigger.js');
95
- var OverlayPanel = require('./overlay/OverlayPanel.js');
96
- var OverlayPanelCloseButton = require('./overlay/OverlayPanelCloseButton.js');
97
- var OverlayPanelContent = require('./overlay/OverlayPanelContent.js');
98
99
  var ParentChildLayout = require('./parent-child-layout/ParentChildLayout.js');
99
100
  var Portal = require('./portal/Portal.js');
100
101
  var QueryInput = require('./query-input/QueryInput.js');
@@ -199,6 +200,7 @@ exports.ContactTertiaryInfo = ContactTertiaryInfo.ContactTertiaryInfo;
199
200
  exports.ContactFavoriteToggle = ContactFavoriteToggle.ContactFavoriteToggle;
200
201
  exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
201
202
  exports.ContentStatus = ContentStatus.ContentStatus;
203
+ exports.DateInput = DateInput.DateInput;
202
204
  exports.DeckItem = DeckItem.DeckItem;
203
205
  exports.DeckLayout = DeckLayout.DeckLayout;
204
206
  exports.DropdownBase = DropdownBase.DropdownBase;
@@ -229,15 +231,15 @@ exports.ListItemNext = ListItemNext.ListItemNext;
229
231
  exports.Logo = Logo.Logo;
230
232
  exports.LogoImage = LogoImage.LogoImage;
231
233
  exports.LogoSeparator = LogoSeparator.LogoSeparator;
234
+ exports.Menu = Menu.Menu;
235
+ exports.MenuItem = MenuItem.MenuItem;
236
+ exports.MenuPanel = MenuPanel.MenuPanel;
237
+ exports.MenuTrigger = MenuTrigger.MenuTrigger;
238
+ exports.MenuGroup = MenuGroup.MenuGroup;
232
239
  exports.MenuButton = MenuButton.MenuButton;
233
240
  exports.Metric = Metric.Metric;
234
241
  exports.MetricHeader = MetricHeader.MetricHeader;
235
242
  exports.MetricContent = MetricContent.MetricContent;
236
- exports.Overlay = Overlay.Overlay;
237
- exports.OverlayTrigger = OverlayTrigger.OverlayTrigger;
238
- exports.OverlayPanel = OverlayPanel.OverlayPanel;
239
- exports.OverlayPanelCloseButton = OverlayPanelCloseButton.OverlayPanelCloseButton;
240
- exports.OverlayPanelContent = OverlayPanelContent.OverlayPanelContent;
241
243
  exports.ParentChildLayout = ParentChildLayout.ParentChildLayout;
242
244
  exports.Portal = Portal.Portal;
243
245
  exports.QueryInput = QueryInput.QueryInput;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,24 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var MenuBase = require('./MenuBase.js');
7
+ var react = require('@floating-ui/react');
8
+
9
+ function Menu(props) {
10
+ const parentId = react.useFloatingParentNodeId();
11
+ if (parentId === null) {
12
+ return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingTree, {
13
+ children: /* @__PURE__ */ jsxRuntime.jsx(MenuBase.MenuBase, {
14
+ ...props
15
+ })
16
+ });
17
+ }
18
+ return /* @__PURE__ */ jsxRuntime.jsx(MenuBase.MenuBase, {
19
+ ...props
20
+ });
21
+ }
22
+
23
+ exports.Menu = Menu;
24
+ //# sourceMappingURL=Menu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Menu.js","sources":["../src/menu/Menu.tsx"],"sourcesContent":["import { MenuBase, MenuBaseProps } from \"./MenuBase\";\nimport { FloatingTree, useFloatingParentNodeId } from \"@floating-ui/react\";\n\nexport interface MenuProps extends MenuBaseProps {}\n\nexport function Menu(props: MenuProps) {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuBase {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuBase {...props} />;\n}\n"],"names":["useFloatingParentNodeId","jsx","FloatingTree","MenuBase"],"mappings":";;;;;;;;AAKO,SAAS,KAAK,KAAkB,EAAA;AACrC,EAAA,MAAM,WAAWA,6BAAwB,EAAA,CAAA;AAEzC,EAAA,IAAI,aAAa,IAAM,EAAA;AACrB,IAAA,uBACGC,cAAA,CAAAC,kBAAA,EAAA;AAAA,MACC,QAAC,kBAAAD,cAAA,CAAAE,iBAAA,EAAA;AAAA,QAAU,GAAG,KAAA;AAAA,OAAO,CAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBAAQF,cAAA,CAAAE,iBAAA,EAAA;AAAA,IAAU,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAC9B;;;;"}
@@ -0,0 +1,116 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var React = require('react');
7
+ var MenuContext = require('./MenuContext.js');
8
+ var core = require('@salt-ds/core');
9
+ var react = require('@floating-ui/react');
10
+
11
+ function MenuBase(props) {
12
+ const { children, defaultOpen, open, onOpenChange, placement } = props;
13
+ const parentId = react.useFloatingParentNodeId();
14
+ const nodeId = react.useFloatingNodeId();
15
+ const tree = react.useFloatingTree();
16
+ const elementsRef = React.useRef([]);
17
+ const [openState, setOpenState] = core.useControlled({
18
+ controlled: open,
19
+ default: Boolean(defaultOpen),
20
+ name: "ListControl",
21
+ state: "open"
22
+ });
23
+ const setOpen = React.useCallback(
24
+ (newOpen) => {
25
+ setOpenState(newOpen);
26
+ onOpenChange == null ? void 0 : onOpenChange(newOpen);
27
+ },
28
+ [setOpenState, onOpenChange]
29
+ );
30
+ const [activeIndex, setActiveIndex] = React.useState(null);
31
+ const [focusInside, setFocusInside] = React.useState(false);
32
+ const isNested = parentId != null;
33
+ const { x, y, strategy, elements, refs, context } = core.useFloatingUI({
34
+ nodeId,
35
+ open: openState,
36
+ onOpenChange: setOpen,
37
+ placement: placement != null ? placement : isNested ? "right-start" : "bottom-start",
38
+ middleware: [
39
+ react.offset(isNested ? { crossAxis: -1 } : {}),
40
+ react.flip({}),
41
+ react.shift({ limiter: react.limitShift() }),
42
+ react.size({
43
+ apply({ elements: elements2, availableHeight }) {
44
+ Object.assign(elements2.floating.style, {
45
+ maxHeight: `${availableHeight}px`
46
+ });
47
+ }
48
+ })
49
+ ]
50
+ });
51
+ const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions(
52
+ [
53
+ react.useHover(context, {
54
+ enabled: isNested,
55
+ handleClose: react.safePolygon({ blockPointerEvents: true })
56
+ }),
57
+ react.useClick(context, {
58
+ event: "mousedown",
59
+ toggle: !isNested,
60
+ ignoreMouse: isNested
61
+ }),
62
+ react.useRole(context, { role: "menu" }),
63
+ react.useDismiss(context, { bubbles: true }),
64
+ react.useListNavigation(context, {
65
+ listRef: elementsRef,
66
+ activeIndex,
67
+ nested: isNested,
68
+ onNavigate: setActiveIndex
69
+ })
70
+ ]
71
+ );
72
+ const getPanelPosition = () => {
73
+ var _a, _b;
74
+ return {
75
+ top: y != null ? y : 0,
76
+ left: x != null ? x : 0,
77
+ position: strategy,
78
+ width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
79
+ height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
80
+ };
81
+ };
82
+ React.useEffect(() => {
83
+ if (!tree)
84
+ return;
85
+ function handleItemClick() {
86
+ setOpen(false);
87
+ }
88
+ tree.events.on("click", handleItemClick);
89
+ return () => {
90
+ tree.events.off("click", handleItemClick);
91
+ };
92
+ }, [tree, setOpen]);
93
+ return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingNode, {
94
+ id: nodeId,
95
+ children: /* @__PURE__ */ jsxRuntime.jsx(MenuContext.MenuContext.Provider, {
96
+ value: {
97
+ openState,
98
+ getReferenceProps,
99
+ getFloatingProps,
100
+ refs,
101
+ getPanelPosition,
102
+ getItemProps,
103
+ activeIndex,
104
+ context,
105
+ elementsRef,
106
+ focusInside,
107
+ setFocusInside,
108
+ isNested
109
+ },
110
+ children
111
+ })
112
+ });
113
+ }
114
+
115
+ exports.MenuBase = MenuBase;
116
+ //# sourceMappingURL=MenuBase.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n flip,\n offset,\n shift,\n limitShift,\n useInteractions,\n useRole,\n useClick,\n useDismiss,\n useHover,\n safePolygon,\n FloatingNode,\n useFloatingParentNodeId,\n useFloatingNodeId,\n useListNavigation,\n useFloatingTree,\n size,\n} from \"@floating-ui/react\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const { children, defaultOpen, open, onOpenChange, placement } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [setOpenState, onOpenChange]\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n placement: placement ?? (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(isNested ? { crossAxis: -1 } : {}),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["useFloatingParentNodeId","useFloatingNodeId","useFloatingTree","useRef","useControlled","useCallback","useState","useFloatingUI","offset","flip","shift","limitShift","size","elements","useInteractions","useHover","safePolygon","useClick","useRole","useDismiss","useListNavigation","useEffect","jsx","FloatingNode","MenuContext"],"mappings":"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"}
@@ -0,0 +1,26 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var core = require('@salt-ds/core');
6
+ var React = require('react');
7
+
8
+ const MenuContext = core.createContext("MenuContext", {
9
+ openState: false,
10
+ getReferenceProps: () => ({}),
11
+ getFloatingProps: () => ({}),
12
+ getPanelPosition: () => ({}),
13
+ getItemProps: () => ({}),
14
+ activeIndex: null,
15
+ elementsRef: { current: [] },
16
+ focusInside: false,
17
+ setFocusInside: () => void 0,
18
+ isNested: false
19
+ });
20
+ function useMenuContext() {
21
+ return React.useContext(MenuContext);
22
+ }
23
+
24
+ exports.MenuContext = MenuContext;
25
+ exports.useMenuContext = useMenuContext;
26
+ //# sourceMappingURL=MenuContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuContext.js","sources":["../src/menu/MenuContext.ts"],"sourcesContent":["import { createContext, UseFloatingUIReturn } from \"@salt-ds/core\";\nimport { Dispatch, MutableRefObject, SetStateAction, useContext } from \"react\";\nimport { useInteractions } from \"@floating-ui/react\";\n\ntype UseInteractionsReturn = ReturnType<typeof useInteractions>;\n\nexport interface MenuContextValue\n extends Pick<\n UseInteractionsReturn,\n \"getItemProps\" | \"getReferenceProps\" | \"getFloatingProps\"\n >,\n Partial<Pick<UseFloatingUIReturn, \"context\" | \"refs\">> {\n openState: boolean;\n activeIndex: number | null;\n getPanelPosition: () => Record<string, unknown>;\n elementsRef: MutableRefObject<(HTMLDivElement | null)[]>;\n focusInside: boolean;\n setFocusInside: Dispatch<SetStateAction<boolean>>;\n isNested: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>(\"MenuContext\", {\n openState: false,\n getReferenceProps: () => ({}),\n getFloatingProps: () => ({}),\n getPanelPosition: () => ({}),\n getItemProps: () => ({}),\n activeIndex: null,\n elementsRef: { current: [] },\n focusInside: false,\n setFocusInside: () => undefined,\n isNested: false,\n});\n\nexport function useMenuContext() {\n return useContext(MenuContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAqBa,MAAA,WAAA,GAAcA,mBAAgC,aAAe,EAAA;AAAA,EACxE,SAAW,EAAA,KAAA;AAAA,EACX,iBAAA,EAAmB,OAAO,EAAC,CAAA;AAAA,EAC3B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,EACtB,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA,EAAE,OAAS,EAAA,EAAG,EAAA;AAAA,EAC3B,WAAa,EAAA,KAAA;AAAA,EACb,gBAAgB,MAAM,KAAA,CAAA;AAAA,EACtB,QAAU,EAAA,KAAA;AACZ,CAAC,EAAA;AAEM,SAAS,cAAiB,GAAA;AAC/B,EAAA,OAAOC,iBAAW,WAAW,CAAA,CAAA;AAC/B;;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltMenuGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-text-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: var(--salt-zIndex-default);\n}\n\n.saltMenuGroup {\n border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n border-top: 0;\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=MenuGroup.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,44 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var React = require('react');
7
+ var clsx = require('clsx');
8
+ var window = require('@salt-ds/window');
9
+ var styles = require('@salt-ds/styles');
10
+ var core = require('@salt-ds/core');
11
+ var MenuGroup$1 = require('./MenuGroup.css.js');
12
+
13
+ const withBaseName = core.makePrefixer("saltMenuGroup");
14
+ const MenuGroup = React.forwardRef(
15
+ function MenuGroup2(props, ref) {
16
+ const { className, children, label, ...rest } = props;
17
+ const targetWindow = window.useWindow();
18
+ styles.useComponentCssInjection({
19
+ testId: "salt-menu-group",
20
+ css: MenuGroup$1,
21
+ window: targetWindow
22
+ });
23
+ const labelId = core.useId();
24
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
25
+ "aria-labelledby": label ? labelId : void 0,
26
+ className: clsx.clsx(withBaseName(), className),
27
+ role: "group",
28
+ ref,
29
+ ...rest,
30
+ children: [
31
+ label && /* @__PURE__ */ jsxRuntime.jsx("div", {
32
+ "aria-hidden": true,
33
+ className: withBaseName("label"),
34
+ id: labelId,
35
+ children: label
36
+ }),
37
+ children
38
+ ]
39
+ });
40
+ }
41
+ );
42
+
43
+ exports.MenuGroup = MenuGroup;
44
+ //# sourceMappingURL=MenuGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuGroup.js","sources":["../src/menu/MenuGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport menuGroupCss from \"./MenuGroup.css\";\n\nexport interface MenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The label of the menu group.\n */\n label?: string;\n /**\n * Menus to be rendered inside the menu group.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuGroup\");\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n function MenuGroup(props, ref) {\n const { className, children, label, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-group\",\n css: menuGroupCss,\n window: targetWindow,\n });\n\n const labelId = useId();\n\n return (\n <div\n aria-labelledby={label ? labelId : undefined}\n className={clsx(withBaseName(), className)}\n role=\"group\"\n ref={ref}\n {...rest}\n >\n {label && (\n <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n {label}\n </div>\n )}\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","MenuGroup","useWindow","useComponentCssInjection","menuGroupCss","useId","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,EAAA,GAAU,MAAS,GAAA,KAAA,CAAA;AAEhD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,UAAUC,UAAM,EAAA,CAAA;AAEtB,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,iBAAA,EAAiB,QAAQ,OAAU,GAAA,KAAA,CAAA;AAAA,MACnC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,OAAA;AAAA,MACL,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAG,EAAI,EAAA,OAAA;AAAA,UACpD,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QAED,QAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n align-items: center;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n margin-left: auto;\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=MenuItem.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,92 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var React = require('react');
7
+ var clsx = require('clsx');
8
+ var core = require('@salt-ds/core');
9
+ var window$1 = require('@salt-ds/window');
10
+ var styles = require('@salt-ds/styles');
11
+ var icons = require('@salt-ds/icons');
12
+ var react = require('@floating-ui/react');
13
+ var MenuItem$1 = require('./MenuItem.css.js');
14
+ var MenuTriggerContext = require('./MenuTriggerContext.js');
15
+ var MenuPanelContext = require('./MenuPanelContext.js');
16
+
17
+ const withBaseName = core.makePrefixer("saltMenuItem");
18
+ const MenuItem = React.forwardRef(
19
+ function MenuItem2(props, ref) {
20
+ const {
21
+ children,
22
+ className,
23
+ disabled,
24
+ onClick,
25
+ onFocus,
26
+ onKeyDown,
27
+ ...rest
28
+ } = props;
29
+ const { triggersSubmenu, blurActive } = MenuTriggerContext.useIsMenuTrigger();
30
+ const { activeIndex, getItemProps, setFocusInside } = MenuPanelContext.useMenuPanelContext();
31
+ const item = react.useListItem();
32
+ const tree = react.useFloatingTree();
33
+ const active = item.index === activeIndex;
34
+ const targetWindow = window$1.useWindow();
35
+ styles.useComponentCssInjection({
36
+ testId: "salt-menu-item",
37
+ css: MenuItem$1,
38
+ window: targetWindow
39
+ });
40
+ const handleRef = core.useForkRef(ref, item.ref);
41
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
42
+ className: clsx.clsx(
43
+ withBaseName(),
44
+ {
45
+ [withBaseName("blurActive")]: blurActive
46
+ },
47
+ className
48
+ ),
49
+ role: "menuitem",
50
+ "aria-disabled": disabled || void 0,
51
+ ...getItemProps({
52
+ tabIndex: disabled ? void 0 : active ? 0 : -1,
53
+ onKeyDown(event) {
54
+ const element = event.currentTarget;
55
+ onKeyDown == null ? void 0 : onKeyDown(event);
56
+ if ((event.key == " " || event.key == "Enter") && !triggersSubmenu && !disabled) {
57
+ event.preventDefault();
58
+ const { view, ...eventInit } = event;
59
+ queueMicrotask(() => {
60
+ element.dispatchEvent(
61
+ new window.MouseEvent("click", eventInit)
62
+ );
63
+ });
64
+ tree == null ? void 0 : tree.events.emit("click");
65
+ }
66
+ },
67
+ onClick(event) {
68
+ onClick == null ? void 0 : onClick(event);
69
+ if (!triggersSubmenu && !disabled) {
70
+ tree == null ? void 0 : tree.events.emit("click");
71
+ }
72
+ },
73
+ onFocus(event) {
74
+ onFocus == null ? void 0 : onFocus(event);
75
+ setFocusInside(true);
76
+ },
77
+ ...rest
78
+ }),
79
+ ref: handleRef,
80
+ children: [
81
+ children,
82
+ triggersSubmenu && /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
83
+ className: withBaseName("expandIcon"),
84
+ "aria-hidden": true
85
+ })
86
+ ]
87
+ });
88
+ }
89
+ );
90
+
91
+ exports.MenuItem = MenuItem;
92
+ //# sourceMappingURL=MenuItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useFloatingTree, useListItem } from \"@floating-ui/react\";\n\nimport menuItemCss from \"./MenuItem.css\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the item will be disabled.\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n function MenuItem(props, ref) {\n const {\n children,\n className,\n disabled,\n onClick,\n onFocus,\n onKeyDown,\n ...rest\n } = props;\n\n const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();\n const item = useListItem();\n const tree = useFloatingTree();\n const active = item.index === activeIndex;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-item\",\n css: menuItemCss,\n window: targetWindow,\n });\n const handleRef = useForkRef<HTMLDivElement>(ref, item.ref);\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"blurActive\")]: blurActive,\n },\n className\n )}\n role=\"menuitem\"\n aria-disabled={disabled || undefined}\n {...getItemProps({\n tabIndex: disabled ? undefined : active ? 0 : -1,\n onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n const element = event.currentTarget;\n onKeyDown?.(event);\n if (\n (event.key == \" \" || event.key == \"Enter\") &&\n !triggersSubmenu &&\n !disabled\n ) {\n event.preventDefault();\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- view is unused.\n const { view, ...eventInit } = event;\n queueMicrotask(() => {\n element.dispatchEvent(\n new window.MouseEvent(\"click\", eventInit)\n );\n });\n tree?.events.emit(\"click\");\n }\n },\n onClick(event: MouseEvent<HTMLDivElement>) {\n onClick?.(event);\n if (!triggersSubmenu && !disabled) {\n tree?.events.emit(\"click\");\n }\n },\n onFocus(event: FocusEvent<HTMLDivElement>) {\n onFocus?.(event);\n setFocusInside(true);\n },\n ...rest,\n })}\n ref={handleRef}\n >\n {children}\n {triggersSubmenu && (\n <ChevronRightIcon\n className={withBaseName(\"expandIcon\")}\n aria-hidden\n />\n )}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","MenuItem","useIsMenuTrigger","useMenuPanelContext","useListItem","useFloatingTree","useWindow","useComponentCssInjection","menuItemCss","useForkRef","jsxs","clsx","jsx","ChevronRightIcon"],"mappings":"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"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltMenuPanel {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n overflow: hidden;\n overflow-y: auto;\n min-width: 10em;\n position: relative;\n z-index: var(--salt-zIndex-popout);\n box-shadow: var(--salt-overlayable-shadow-popout);\n box-sizing: border-box;\n}\n\n.saltMenuPanel-container {\n display: flex;\n flex-direction: column;\n gap: var(--salt-size-border);\n max-height: inherit;\n min-height: inherit;\n}\n\n.saltMenuPanel:focus-visible {\n outline: none;\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=MenuPanel.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}