@salt-ds/lab 1.0.0-alpha.15 → 1.0.0-alpha.17

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 (188) hide show
  1. package/dist-cjs/badge/Badge.css.js +1 -1
  2. package/dist-cjs/cascading-menu/CascadingMenu.js.map +1 -1
  3. package/dist-cjs/color-chooser/ColorChooser.js +1 -1
  4. package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
  5. package/dist-cjs/color-chooser/GetColorPalettes.js +2 -2
  6. package/dist-cjs/color-chooser/GetColorPalettes.js.map +1 -1
  7. package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
  8. package/dist-cjs/combo-box-next/ComboBoxNext.css.js +6 -0
  9. package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +1 -0
  10. package/dist-cjs/combo-box-next/ComboBoxNext.js +184 -0
  11. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -0
  12. package/dist-cjs/combo-box-next/useComboBox.js +145 -0
  13. package/dist-cjs/combo-box-next/useComboBox.js.map +1 -0
  14. package/dist-cjs/combo-box-next/useComboboxPortal.js +69 -0
  15. package/dist-cjs/combo-box-next/useComboboxPortal.js.map +1 -0
  16. package/dist-cjs/combo-box-next/utils.js +40 -0
  17. package/dist-cjs/combo-box-next/utils.js.map +1 -0
  18. package/dist-cjs/dialog/Dialog.css.js +1 -1
  19. package/dist-cjs/dialog/Dialog.js +58 -59
  20. package/dist-cjs/dialog/Dialog.js.map +1 -1
  21. package/dist-cjs/dialog/DialogActions.css.js +1 -1
  22. package/dist-cjs/dialog/DialogActions.js +15 -17
  23. package/dist-cjs/dialog/DialogActions.js.map +1 -1
  24. package/dist-cjs/dialog/DialogCloseButton.css.js +6 -0
  25. package/dist-cjs/dialog/DialogCloseButton.css.js.map +1 -0
  26. package/dist-cjs/dialog/DialogCloseButton.js +39 -0
  27. package/dist-cjs/dialog/DialogCloseButton.js.map +1 -0
  28. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  29. package/dist-cjs/dialog/DialogContent.js +20 -29
  30. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  31. package/dist-cjs/dialog/{internal/DialogContext.js → DialogContext.js} +4 -0
  32. package/dist-cjs/dialog/DialogContext.js.map +1 -0
  33. package/dist-cjs/dialog/DialogTitle.css.js +1 -1
  34. package/dist-cjs/dialog/DialogTitle.js +40 -41
  35. package/dist-cjs/dialog/DialogTitle.js.map +1 -1
  36. package/dist-cjs/dialog/useDialog.js +31 -0
  37. package/dist-cjs/dialog/useDialog.js.map +1 -0
  38. package/dist-cjs/drawer/Drawer.js +25 -23
  39. package/dist-cjs/drawer/Drawer.js.map +1 -1
  40. package/dist-cjs/dropdown-next/DropdownNext.css.js +6 -0
  41. package/dist-cjs/dropdown-next/DropdownNext.css.js.map +1 -0
  42. package/dist-cjs/dropdown-next/DropdownNext.js +183 -0
  43. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -0
  44. package/dist-cjs/dropdown-next/useDropdownNext.js +169 -0
  45. package/dist-cjs/dropdown-next/useDropdownNext.js.map +1 -0
  46. package/dist-cjs/index.js +15 -6
  47. package/dist-cjs/index.js.map +1 -1
  48. package/dist-cjs/list/Highlighter.js +1 -1
  49. package/dist-cjs/list/Highlighter.js.map +1 -1
  50. package/dist-cjs/list/keyset.js.map +1 -1
  51. package/dist-cjs/list-next/ListItemNext.css.js +1 -1
  52. package/dist-cjs/list-next/ListNext.js +1 -0
  53. package/dist-cjs/list-next/ListNext.js.map +1 -1
  54. package/dist-cjs/list-next/useList.js +11 -7
  55. package/dist-cjs/list-next/useList.js.map +1 -1
  56. package/dist-cjs/logo/Logo.css.js +1 -1
  57. package/dist-cjs/logo/LogoImage.css.js +6 -0
  58. package/dist-cjs/logo/LogoImage.css.js.map +1 -0
  59. package/dist-cjs/logo/LogoImage.js +9 -0
  60. package/dist-cjs/logo/LogoImage.js.map +1 -1
  61. package/dist-cjs/logo/LogoSeparator.css.js +1 -1
  62. package/dist-cjs/navigation-item/ConditionalWrapper.js +37 -0
  63. package/dist-cjs/navigation-item/ConditionalWrapper.js.map +1 -0
  64. package/dist-cjs/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
  65. package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
  66. package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
  67. package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
  68. package/dist-cjs/navigation-item/NavigationItem.js +80 -0
  69. package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
  70. package/dist-cjs/pill-next/PillNext.css.js +1 -1
  71. package/dist-cjs/responsive/useDynamicCollapse.js.map +1 -1
  72. package/dist-cjs/responsive/useOverflowLayout.js.map +1 -1
  73. package/dist-cjs/tabs/useActivationIndicator.js.map +1 -1
  74. package/dist-cjs/tabs-next/TabNext.css.js +1 -1
  75. package/dist-es/badge/Badge.css.js +1 -1
  76. package/dist-es/cascading-menu/CascadingMenu.js.map +1 -1
  77. package/dist-es/color-chooser/ColorChooser.js +1 -1
  78. package/dist-es/color-chooser/ColorChooser.js.map +1 -1
  79. package/dist-es/color-chooser/GetColorPalettes.js +2 -2
  80. package/dist-es/color-chooser/GetColorPalettes.js.map +1 -1
  81. package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
  82. package/dist-es/combo-box-next/ComboBoxNext.css.js +4 -0
  83. package/dist-es/combo-box-next/ComboBoxNext.css.js.map +1 -0
  84. package/dist-es/combo-box-next/ComboBoxNext.js +180 -0
  85. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -0
  86. package/dist-es/combo-box-next/useComboBox.js +141 -0
  87. package/dist-es/combo-box-next/useComboBox.js.map +1 -0
  88. package/dist-es/combo-box-next/useComboboxPortal.js +65 -0
  89. package/dist-es/combo-box-next/useComboboxPortal.js.map +1 -0
  90. package/dist-es/combo-box-next/utils.js +35 -0
  91. package/dist-es/combo-box-next/utils.js.map +1 -0
  92. package/dist-es/dialog/Dialog.css.js +1 -1
  93. package/dist-es/dialog/Dialog.js +58 -59
  94. package/dist-es/dialog/Dialog.js.map +1 -1
  95. package/dist-es/dialog/DialogActions.css.js +1 -1
  96. package/dist-es/dialog/DialogActions.js +15 -17
  97. package/dist-es/dialog/DialogActions.js.map +1 -1
  98. package/dist-es/dialog/DialogCloseButton.css.js +4 -0
  99. package/dist-es/dialog/DialogCloseButton.css.js.map +1 -0
  100. package/dist-es/dialog/DialogCloseButton.js +31 -0
  101. package/dist-es/dialog/DialogCloseButton.js.map +1 -0
  102. package/dist-es/dialog/DialogContent.css.js +1 -1
  103. package/dist-es/dialog/DialogContent.js +20 -29
  104. package/dist-es/dialog/DialogContent.js.map +1 -1
  105. package/dist-es/dialog/DialogContext.js +9 -0
  106. package/dist-es/dialog/DialogContext.js.map +1 -0
  107. package/dist-es/dialog/DialogTitle.css.js +1 -1
  108. package/dist-es/dialog/DialogTitle.js +37 -42
  109. package/dist-es/dialog/DialogTitle.js.map +1 -1
  110. package/dist-es/dialog/useDialog.js +27 -0
  111. package/dist-es/dialog/useDialog.js.map +1 -0
  112. package/dist-es/drawer/Drawer.js +26 -24
  113. package/dist-es/drawer/Drawer.js.map +1 -1
  114. package/dist-es/dropdown-next/DropdownNext.css.js +4 -0
  115. package/dist-es/dropdown-next/DropdownNext.css.js.map +1 -0
  116. package/dist-es/dropdown-next/DropdownNext.js +179 -0
  117. package/dist-es/dropdown-next/DropdownNext.js.map +1 -0
  118. package/dist-es/dropdown-next/useDropdownNext.js +165 -0
  119. package/dist-es/dropdown-next/useDropdownNext.js.map +1 -0
  120. package/dist-es/index.js +7 -3
  121. package/dist-es/index.js.map +1 -1
  122. package/dist-es/list/Highlighter.js +1 -1
  123. package/dist-es/list/Highlighter.js.map +1 -1
  124. package/dist-es/list/keyset.js.map +1 -1
  125. package/dist-es/list-next/ListItemNext.css.js +1 -1
  126. package/dist-es/list-next/ListNext.js +1 -0
  127. package/dist-es/list-next/ListNext.js.map +1 -1
  128. package/dist-es/list-next/useList.js +11 -7
  129. package/dist-es/list-next/useList.js.map +1 -1
  130. package/dist-es/logo/Logo.css.js +1 -1
  131. package/dist-es/logo/LogoImage.css.js +4 -0
  132. package/dist-es/logo/LogoImage.css.js.map +1 -0
  133. package/dist-es/logo/LogoImage.js +9 -0
  134. package/dist-es/logo/LogoImage.js.map +1 -1
  135. package/dist-es/logo/LogoSeparator.css.js +1 -1
  136. package/dist-es/navigation-item/ConditionalWrapper.js +33 -0
  137. package/dist-es/navigation-item/ConditionalWrapper.js.map +1 -0
  138. package/dist-es/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
  139. package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
  140. package/dist-es/navigation-item/NavigationItem.css.js +4 -0
  141. package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
  142. package/dist-es/navigation-item/NavigationItem.js +76 -0
  143. package/dist-es/navigation-item/NavigationItem.js.map +1 -0
  144. package/dist-es/pill-next/PillNext.css.js +1 -1
  145. package/dist-es/responsive/useDynamicCollapse.js.map +1 -1
  146. package/dist-es/responsive/useOverflowLayout.js.map +1 -1
  147. package/dist-es/tabs/useActivationIndicator.js.map +1 -1
  148. package/dist-es/tabs-next/TabNext.css.js +1 -1
  149. package/dist-types/combo-box-next/ComboBoxNext.d.ts +83 -0
  150. package/dist-types/combo-box-next/index.d.ts +1 -0
  151. package/dist-types/combo-box-next/useComboBox.d.ts +36 -0
  152. package/dist-types/combo-box-next/useComboboxPortal.d.ts +15 -0
  153. package/dist-types/combo-box-next/utils.d.ts +8 -0
  154. package/dist-types/dialog/Dialog.d.ts +17 -12
  155. package/dist-types/dialog/DialogActions.d.ts +1 -3
  156. package/dist-types/dialog/DialogCloseButton.d.ts +3 -0
  157. package/dist-types/dialog/DialogContent.d.ts +1 -3
  158. package/dist-types/dialog/{internal/DialogContext.d.ts → DialogContext.d.ts} +5 -2
  159. package/dist-types/dialog/DialogTitle.d.ts +7 -8
  160. package/dist-types/dialog/index.d.ts +4 -2
  161. package/dist-types/dialog/useDialog.d.ts +27 -0
  162. package/dist-types/dropdown-next/DropdownNext.d.ts +49 -0
  163. package/dist-types/dropdown-next/index.d.ts +1 -0
  164. package/dist-types/dropdown-next/useDropdownNext.d.ts +31 -0
  165. package/dist-types/index.d.ts +3 -1
  166. package/dist-types/list-next/ListNext.d.ts +4 -1
  167. package/dist-types/list-next/useList.d.ts +6 -4
  168. package/dist-types/navigation-item/ConditionalWrapper.d.ts +8 -0
  169. package/dist-types/navigation-item/ExpansionIcon.d.ts +3 -0
  170. package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
  171. package/dist-types/navigation-item/index.d.ts +1 -0
  172. package/package.json +29 -27
  173. package/dist-cjs/dialog/internal/DialogContext.js.map +0 -1
  174. package/dist-cjs/nav-item/ExpansionButton.js.map +0 -1
  175. package/dist-cjs/nav-item/NavItem.css.js +0 -6
  176. package/dist-cjs/nav-item/NavItem.css.js.map +0 -1
  177. package/dist-cjs/nav-item/NavItem.js +0 -88
  178. package/dist-cjs/nav-item/NavItem.js.map +0 -1
  179. package/dist-es/dialog/internal/DialogContext.js +0 -6
  180. package/dist-es/dialog/internal/DialogContext.js.map +0 -1
  181. package/dist-es/nav-item/ExpansionButton.js.map +0 -1
  182. package/dist-es/nav-item/NavItem.css.js +0 -4
  183. package/dist-es/nav-item/NavItem.css.js.map +0 -1
  184. package/dist-es/nav-item/NavItem.js +0 -84
  185. package/dist-es/nav-item/NavItem.js.map +0 -1
  186. package/dist-types/nav-item/ExpansionButton.d.ts +0 -3
  187. package/dist-types/nav-item/NavItem.d.ts +0 -45
  188. package/dist-types/nav-item/index.d.ts +0 -1
@@ -3,41 +3,32 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@salt-ds/core');
7
- var clsx = require('clsx');
8
6
  var React = require('react');
9
- var DialogContext = require('./internal/DialogContext.js');
7
+ var clsx = require('clsx');
8
+ var core = require('@salt-ds/core');
10
9
  var window = require('@salt-ds/window');
11
10
  var styles = require('@salt-ds/styles');
12
11
  var DialogContent$1 = require('./DialogContent.css.js');
12
+ var DialogContext = require('./DialogContext.js');
13
13
 
14
14
  const withBaseName = core.makePrefixer("saltDialogContent");
15
- const DialogContent = React.forwardRef(
16
- function DialogContent2(props, ref) {
17
- const targetWindow = window.useWindow();
18
- styles.useComponentCssInjection({
19
- testId: "salt-dialog-content",
20
- css: DialogContent$1,
21
- window: targetWindow
22
- });
23
- const { children, className, ...rest } = props;
24
- const { status, dialogId, setContentElement } = React.useContext(DialogContext.DialogContext);
25
- const handleRef = core.useForkRef(ref, setContentElement);
26
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
27
- ...rest,
28
- className: clsx.clsx(
29
- withBaseName(),
30
- {
31
- [withBaseName("leftGutter")]: !!status
32
- },
33
- className
34
- ),
35
- id: `${dialogId}-body`,
36
- ref: handleRef,
37
- children
38
- });
39
- }
40
- );
15
+ const DialogContent = React.forwardRef(function DialogContent2(props, ref) {
16
+ const { children, className, ...rest } = props;
17
+ const { dialogId } = DialogContext.useDialogContext();
18
+ const targetWindow = window.useWindow();
19
+ styles.useComponentCssInjection({
20
+ testId: "salt-dialog-content",
21
+ css: DialogContent$1,
22
+ window: targetWindow
23
+ });
24
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
25
+ id: `${dialogId}-description`,
26
+ className: clsx.clsx(withBaseName(), className),
27
+ ...rest,
28
+ ref,
29
+ children
30
+ });
31
+ });
41
32
 
42
33
  exports.DialogContent = DialogContent;
43
34
  //# sourceMappingURL=DialogContent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n const { children, className, ...rest } = props;\n const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n const handleRef = useForkRef(ref, setContentElement);\n\n return (\n <div\n {...rest}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"leftGutter\")]: !!status,\n },\n className\n )}\n id={`${dialogId}-body`}\n ref={handleRef}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useWindow","useComponentCssInjection","dialogContentCss","useContext","DialogContext","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAIC,iBAAWC,2BAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\nimport { useDialogContext } from \"./DialogContext\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const { dialogId } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n return (\n <div\n id={`${dialogId!}-description`}\n className={clsx(withBaseName(), className)}\n {...rest}\n ref={ref}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","DialogContent","useDialogContext","useWindow","useComponentCssInjection","dialogContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA,CAG3B,SAASC,cAAAA,CAAc,OAAO,GAAK,EAAA;AACnC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAEtC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,IAAI,CAAG,EAAA,QAAA,CAAA,YAAA,CAAA;AAAA,IACP,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACxC,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
 
7
7
  const DialogContext = React.createContext({});
8
+ const useDialogContext = () => {
9
+ return React.useContext(DialogContext);
10
+ };
8
11
 
9
12
  exports.DialogContext = DialogContext;
13
+ exports.useDialogContext = useDialogContext;
10
14
  //# sourceMappingURL=DialogContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n dialogId?: string;\n status?: ValidationStatus;\n}>({});\n\nexport const useDialogContext = () => {\n return useContext(DialogContext);\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAGa,MAAA,aAAA,GAAgBA,mBAG1B,CAAA,EAAE,EAAA;AAEE,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAOC,iBAAW,aAAa,CAAA,CAAA;AACjC;;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltDialogTitle {\n --dialog-closeButton-padding: var(--saltDialog-closeButton-padding, var(--salt-size-unit));\n --dialog-closeButton-offset: var(--saltDialog-closeButton-offset, calc(var(--dialog-padding) * -1));\n\n --dialog-title-icon-marginRight: var(--saltDialog-title-icon-marginRight, var(--salt-spacing-100));\n}\n\n.saltDialogTitle {\n display: flex;\n flex: 0 0 auto;\n min-height: 16px;\n position: relative;\n margin: 0;\n}\n\n.saltDialogTitle-close {\n position: absolute;\n padding-top: var(--dialog-closeButton-padding);\n padding-bottom: var(--dialog-closeButton-padding);\n right: var(--dialog-closeButton-offset);\n top: var(--dialog-closeButton-offset);\n}\n\n.saltDialogTitle .saltDialogTitle-statusIndicator {\n min-height: var(--salt-text-h1-lineHeight);\n margin-right: var(--dialog-title-icon-marginRight);\n}\n\n.saltDialogTitle-text {\n margin: 0;\n}\n";
3
+ var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n display: flex;\n gap: var(--salt-spacing-100);\n padding-bottom: var(--salt-spacing-100);\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogTitle .saltStatusIndicator.saltIcon {\n --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogTitle-withAccent {\n position: relative;\n}\n\n.saltDialogTitle-withAccent::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: var(--salt-spacing-100);\n width: var(--salt-size-accent);\n background: var(--salt-accent-background);\n}\n\n.saltDialogTitle-error::before {\n background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogTitle-info::before {\n background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogTitle-success::before {\n background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogTitle-warning::before {\n background: var(--salt-status-warning-borderColor);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=DialogTitle.css.js.map
@@ -3,53 +3,52 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@salt-ds/core');
7
- var icons = require('@salt-ds/icons');
8
6
  var clsx = require('clsx');
9
- var React = require('react');
10
- var DialogContext = require('./internal/DialogContext.js');
7
+ var core = require('@salt-ds/core');
8
+ var DialogContext = require('./DialogContext.js');
11
9
  var window = require('@salt-ds/window');
12
10
  var styles = require('@salt-ds/styles');
13
11
  var DialogTitle$1 = require('./DialogTitle.css.js');
14
12
 
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
16
+
15
17
  const withBaseName = core.makePrefixer("saltDialogTitle");
16
- const DialogTitle = React.forwardRef(
17
- function DialogTitle2(props, ref) {
18
- const targetWindow = window.useWindow();
19
- styles.useComponentCssInjection({
20
- testId: "salt-dialog-title",
21
- css: DialogTitle$1,
22
- window: targetWindow
23
- });
24
- const { children, className, onClose, ...rest } = props;
25
- const { status, dialogId } = React.useContext(DialogContext.DialogContext);
26
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
27
- className: clsx.clsx(withBaseName(), className),
28
- ref,
29
- ...rest,
30
- children: [
31
- onClose && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
32
- className: withBaseName("close"),
33
- onClick: onClose,
34
- variant: "secondary",
35
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
36
- "aria-label": "close dialog",
37
- className: withBaseName("closeIcon")
38
- })
39
- }),
40
- status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
41
- className: withBaseName("statusIndicator"),
42
- status
43
- }),
44
- /* @__PURE__ */ jsxRuntime.jsx(core.H1, {
45
- id: `${dialogId}-heading`,
46
- className: withBaseName("text"),
47
- children
48
- })
49
- ]
50
- });
51
- }
52
- );
18
+ const DialogTitle = ({
19
+ children,
20
+ className,
21
+ accent,
22
+ status: statusProp,
23
+ ...rest
24
+ }) => {
25
+ const { dialogId, status: statusContext } = DialogContext.useDialogContext();
26
+ const targetWindow = window.useWindow();
27
+ styles.useComponentCssInjection({
28
+ testId: "salt-dialog-title",
29
+ css: DialogTitle$1,
30
+ window: targetWindow
31
+ });
32
+ const status = statusProp || statusContext;
33
+ return /* @__PURE__ */ jsxRuntime.jsxs(core.H2, {
34
+ id: `${dialogId}-heading`,
35
+ className: clsx__default["default"](
36
+ withBaseName(),
37
+ {
38
+ [withBaseName("withAccent")]: accent && !status,
39
+ [withBaseName(status)]: !!status
40
+ },
41
+ className
42
+ ),
43
+ ...rest,
44
+ children: [
45
+ status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
46
+ status
47
+ }),
48
+ children
49
+ ]
50
+ });
51
+ };
53
52
 
54
53
  exports.DialogTitle = DialogTitle;
55
54
  //# sourceMappingURL=DialogTitle.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { Button, H1, makePrefixer, StatusIndicator } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, SyntheticEvent, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogTitleCss from \"./DialogTitle.css\";\n\nexport interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Disable the built-in ARIA heading attributes.\n */\n disableAria?: boolean;\n onClose?: (event: SyntheticEvent) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\nexport const DialogTitle = forwardRef<HTMLDivElement, DialogTitleProps>(\n function DialogTitle(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-title\",\n css: dialogTitleCss,\n window: targetWindow,\n });\n\n const { children, className, onClose, ...rest } = props;\n const { status, dialogId } = useContext(DialogContext);\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {onClose && (\n <Button\n className={withBaseName(\"close\")}\n onClick={onClose}\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"close dialog\"\n className={withBaseName(\"closeIcon\")}\n />\n </Button>\n )}\n {status && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={status}\n />\n )}\n <H1 id={`${dialogId}-heading`} className={withBaseName(\"text\")}>\n {children}\n </H1>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogTitle","useWindow","useComponentCssInjection","dialogTitleCss","useContext","DialogContext","jsxs","clsx","jsx","Button","CloseIcon","StatusIndicator","H1"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAS,EAAA,GAAIC,iBAAWC,2BAAa,CAAA,CAAA;AAErD,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC5D,QAAA,EAAA;AAAA,QAAA,OAAA,oBACEC,cAAA,CAAAC,WAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,OAAS,EAAA,OAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UAER,QAAC,kBAAAD,cAAA,CAAAE,eAAA,EAAA;AAAA,YACC,YAAW,EAAA,cAAA;AAAA,YACX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,WACrC,CAAA;AAAA,SACF,CAAA;AAAA,QAED,0BACEF,cAAA,CAAAG,oBAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UACzC,MAAA;AAAA,SACF,CAAA;AAAA,wBAEDH,cAAA,CAAAI,OAAA,EAAA;AAAA,UAAG,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,UAAoB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC1D,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n H2,\n StatusIndicator,\n ValidationStatus,\n makePrefixer,\n} from \"@salt-ds/core\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\ninterface DialogTitleProps extends ComponentPropsWithoutRef<\"h2\"> {\n status?: ValidationStatus;\n accent?: boolean;\n}\n\nexport const DialogTitle = ({\n children,\n className,\n accent,\n status: statusProp,\n ...rest\n}: DialogTitleProps) => {\n const { dialogId, status: statusContext } = useDialogContext();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-title\",\n css: dialogTitleCss,\n window: targetWindow,\n });\n\n const status = statusProp || statusContext;\n\n return (\n <H2\n id={`${dialogId!}-heading`}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: accent && !status,\n [withBaseName(status!)]: !!status,\n },\n className\n )}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n {children}\n </H2>\n );\n};\n"],"names":["makePrefixer","useDialogContext","useWindow","useComponentCssInjection","dialogTitleCss","jsxs","H2","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAO5C,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,aAAA,KAAkBC,8BAAiB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAc,IAAA,aAAA,CAAA;AAE7B,EAAA,uBACGC,eAAA,CAAAC,OAAA,EAAA;AAAA,IACC,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,IACP,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,UAAU,CAAC,MAAA;AAAA,QACzC,CAAC,YAAA,CAAa,MAAO,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAWC,cAAA,CAAAC,oBAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,31 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var react = require('@floating-ui/react');
6
+ var core = require('@salt-ds/core');
7
+
8
+ function useDialog(props) {
9
+ const { open, onOpenChange } = props;
10
+ const { context, floating } = core.useFloatingUI({
11
+ open,
12
+ onOpenChange
13
+ });
14
+ const click = react.useClick(context);
15
+ const role = react.useRole(context);
16
+ const dismiss = react.useDismiss(context);
17
+ const { getFloatingProps, getReferenceProps } = react.useInteractions([
18
+ role,
19
+ dismiss,
20
+ click
21
+ ]);
22
+ return {
23
+ getFloatingProps,
24
+ getReferenceProps,
25
+ floating,
26
+ context
27
+ };
28
+ }
29
+
30
+ exports.useDialog = useDialog;
31
+ //# sourceMappingURL=useDialog.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useDialog.js","sources":["../src/dialog/useDialog.ts"],"sourcesContent":["import {\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { useFloatingUI, UseFloatingUIProps } from \"@salt-ds/core\";\n\nexport type UseDialogProps = Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">\n>;\n\nexport function useDialog(props: UseDialogProps) {\n const { open, onOpenChange } = props;\n\n const { context, floating } = useFloatingUI({\n open,\n onOpenChange,\n });\n\n const click = useClick(context);\n const role = useRole(context);\n const dismiss = useDismiss(context);\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n role,\n dismiss,\n click,\n ]);\n\n return {\n getFloatingProps,\n getReferenceProps,\n floating,\n context,\n };\n}\n"],"names":["useFloatingUI","useClick","useRole","useDismiss","useInteractions"],"mappings":";;;;;;;AAYO,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA,EAAE,IAAM,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAE/B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAIA,kBAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQC,eAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAOC,cAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAUC,iBAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -42,30 +42,32 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
42
42
  }
43
43
  }, [open, showComponent]);
44
44
  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
45
- children: showComponent && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, {
46
- className: withBaseName("overlay"),
47
- lockScroll: true,
48
- children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, {
49
- context,
50
- children: /* @__PURE__ */ jsxRuntime.jsx("div", {
51
- ref: floatingRef,
52
- className: clsx.clsx(
53
- withBaseName(),
54
- withBaseName(position),
55
- {
56
- [withBaseName("enterAnimation")]: open,
57
- [withBaseName("exitAnimation")]: !open,
58
- [withBaseName(variant)]: variant
45
+ children: /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, {
46
+ children: showComponent && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, {
47
+ className: withBaseName("overlay"),
48
+ lockScroll: true,
49
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, {
50
+ context,
51
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
52
+ ref: floatingRef,
53
+ className: clsx.clsx(
54
+ withBaseName(),
55
+ withBaseName(position),
56
+ {
57
+ [withBaseName("enterAnimation")]: open,
58
+ [withBaseName("exitAnimation")]: !open,
59
+ [withBaseName(variant)]: variant
60
+ },
61
+ className
62
+ ),
63
+ onAnimationEnd: () => {
64
+ if (!open && showComponent) {
65
+ setShowComponent(false);
66
+ }
59
67
  },
60
- className
61
- ),
62
- onAnimationEnd: () => {
63
- if (!open && showComponent) {
64
- setShowComponent(false);
65
- }
66
- },
67
- ...rest,
68
- children
68
+ ...rest,
69
+ children
70
+ })
69
71
  })
70
72
  })
71
73
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n} from \"@floating-ui/react\";\nimport { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDrawer } from \"./useDrawer\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = typeof DRAWER_POSITIONS[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Defines the drawer position within the screen.\n */\n position?: DrawerPositions;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n props,\n ref\n) {\n const {\n children,\n className,\n position = \"left\",\n open = true,\n onOpenChange,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { floating, context } = useDrawer({\n open,\n onOpenChange,\n });\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n }, [open, showComponent]);\n\n return (\n <FloatingPortal>\n {showComponent && (\n <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n <FloatingFocusManager context={context}>\n <div\n ref={floatingRef}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...rest}\n >\n {children}\n </div>\n </FloatingFocusManager>\n </FloatingOverlay>\n )}\n </FloatingPortal>\n );\n});\n"],"names":["makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useDrawer","useForkRef","useEffect","jsx","FloatingPortal","FloatingOverlay","FloatingFocusManager","clsx"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,gBAAmB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,SAAS,QAAQ,EAAA;AAuBjE,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAQ,EAAA,GAAIC,mBAAU,CAAA;AAAA,IACtC,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,uBACGC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IACE,2CACED,cAAA,CAAAE,qBAAA,EAAA;AAAA,MAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MAAG,UAAU,EAAA,IAAA;AAAA,MAC7D,QAAC,kBAAAF,cAAA,CAAAG,0BAAA,EAAA;AAAA,QAAqB,OAAA;AAAA,QACpB,QAAC,kBAAAH,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,GAAK,EAAA,WAAA;AAAA,UACL,SAAW,EAAAI,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,aAAa,QAAQ,CAAA;AAAA,YACrB;AAAA,cACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,cAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,cAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,aAC3B;AAAA,YACA,SAAA;AAAA,WACF;AAAA,UACA,gBAAgB,MAAM;AACpB,YAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,cAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,aACxB;AAAA,WACF;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;;"}
1
+ {"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n} from \"@floating-ui/react\";\nimport { makePrefixer, SaltProvider, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDrawer } from \"./useDrawer\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = typeof DRAWER_POSITIONS[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Defines the drawer position within the screen.\n */\n position?: DrawerPositions;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n props,\n ref\n) {\n const {\n children,\n className,\n position = \"left\",\n open = true,\n onOpenChange,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { floating, context } = useDrawer({\n open,\n onOpenChange,\n });\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n }, [open, showComponent]);\n\n return (\n <FloatingPortal>\n {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n {showComponent && (\n <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n <FloatingFocusManager context={context}>\n <div\n ref={floatingRef}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...rest}\n >\n {children}\n </div>\n </FloatingFocusManager>\n </FloatingOverlay>\n )}\n </SaltProvider>\n </FloatingPortal>\n );\n});\n"],"names":["makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useDrawer","useForkRef","useEffect","jsx","FloatingPortal","SaltProvider","FloatingOverlay","FloatingFocusManager","clsx"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,gBAAmB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,SAAS,QAAQ,EAAA;AAuBjE,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAQ,EAAA,GAAIC,mBAAU,CAAA;AAAA,IACtC,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,uBACGC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IAEC,QAAC,kBAAAD,cAAA,CAAAE,iBAAA,EAAA;AAAA,MACE,2CACEF,cAAA,CAAAG,qBAAA,EAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAG,UAAU,EAAA,IAAA;AAAA,QAC7D,QAAC,kBAAAH,cAAA,CAAAI,0BAAA,EAAA;AAAA,UAAqB,OAAA;AAAA,UACpB,QAAC,kBAAAJ,cAAA,CAAA,KAAA,EAAA;AAAA,YACC,GAAK,EAAA,WAAA;AAAA,YACL,SAAW,EAAAK,SAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb,aAAa,QAAQ,CAAA;AAAA,cACrB;AAAA,gBACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,gBAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,gBAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,eAC3B;AAAA,cACA,SAAA;AAAA,aACF;AAAA,YACA,gBAAgB,MAAM;AACpB,cAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,gBAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,eACxB;AAAA,aACF;AAAA,YACC,GAAG,IAAA;AAAA,YAEH,QAAA;AAAA,WACH,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltDropdownNext-button {\n --dropdownNext-borderColor: var(--salt-editable-borderColor);\n --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n --dropdownNext-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground));\n display: flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n height: var(--saltDropdownNext-height, var(--salt-size-base));\n line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n min-width: var(--saltDropdownNext-minWidth, 160px);\n padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n position: relative;\n border: none;\n border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n text-align: left;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: var(--salt-spacing-100);\n user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n border-color: var(--salt-selectable-borderColor-selected);\n box-shadow: var(--salt-overlayable-shadow-popout);\n max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n --dropdownNext-borderWidth: var(--salt-size-border);\n\n cursor: var(--salt-selectable-cursor-disabled);\n background: var(--dropdownNext-background-disabled);\n color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled));\n outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n --dropdownNext-borderWidth: var(--salt-size-border);\n\n cursor: var(--salt-editable-cursor-readonly);\n background: var(--dropdownNext-background-readonly);\n /* no padding-right when there's no dropdown button icon */\n padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n --dropdownNext-background: var(--salt-editable-primary-background);\n --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n --dropdownNext-background: var(--salt-editable-secondary-background);\n --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=DropdownNext.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DropdownNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,183 @@
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 ListNext = require('../list-next/ListNext.js');
8
+ require('../list-next/ListItemNext.js');
9
+ var core = require('@salt-ds/core');
10
+ var icons = require('@salt-ds/icons');
11
+ var React = require('react');
12
+ var window = require('@salt-ds/window');
13
+ var DropdownNext$1 = require('./DropdownNext.css.js');
14
+ var styles = require('@salt-ds/styles');
15
+ var react = require('@floating-ui/react');
16
+ var useDropdownNext = require('./useDropdownNext.js');
17
+
18
+ const withBaseName = core.makePrefixer("saltDropdownNext");
19
+ const DropdownNext = React.forwardRef(function DropdownNext2(props, ref) {
20
+ const {
21
+ className,
22
+ disabled,
23
+ variant = "primary",
24
+ id: dropdownIdProp,
25
+ defaultSelected,
26
+ readOnly,
27
+ source,
28
+ placement = "bottom",
29
+ open: openControlProp,
30
+ selected: selectedControlProp,
31
+ highlightedItem: highlightedItemControlProp,
32
+ onFocus,
33
+ onKeyDown,
34
+ onBlur,
35
+ onMouseOver,
36
+ onMouseDown,
37
+ onSelect,
38
+ listRef: listRefProp,
39
+ ListProps,
40
+ ...restProps
41
+ } = props;
42
+ const targetWindow = window.useWindow();
43
+ styles.useComponentCssInjection({
44
+ testId: "salt-dropdown-next",
45
+ css: DropdownNext$1,
46
+ window: targetWindow
47
+ });
48
+ const listId = core.useId(ListProps == null ? void 0 : ListProps.id);
49
+ const dropdownId = core.useId(dropdownIdProp);
50
+ const listRef = React.useRef(null);
51
+ const setListRef = core.useForkRef(listRefProp, listRef);
52
+ const listProps = {
53
+ defaultSelected,
54
+ disabled,
55
+ ref: listRef,
56
+ id: listId,
57
+ onSelect,
58
+ selected: selectedControlProp,
59
+ highlightedItem: highlightedItemControlProp
60
+ };
61
+ const {
62
+ handlers,
63
+ activeDescendant,
64
+ selectedItem,
65
+ highlightedItem,
66
+ getListItems,
67
+ portalProps
68
+ } = useDropdownNext.useDropdownNext({
69
+ listProps,
70
+ placement,
71
+ openControlProp
72
+ });
73
+ const { open, floating, reference, getDropdownNextProps } = portalProps;
74
+ const {
75
+ focusHandler,
76
+ keyDownHandler,
77
+ blurHandler,
78
+ mouseOverHandler,
79
+ mouseDownHandler
80
+ } = handlers;
81
+ const triggerRef = core.useForkRef(ref, reference);
82
+ const getIcon = () => {
83
+ if (readOnly)
84
+ return;
85
+ const iconClassName = clsx.clsx(withBaseName("icon"), {
86
+ [withBaseName("disabled")]: disabled
87
+ });
88
+ return open ? /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
89
+ className: iconClassName
90
+ }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {
91
+ className: iconClassName
92
+ });
93
+ };
94
+ const handleFocus = (event) => {
95
+ if (disabled)
96
+ return;
97
+ focusHandler(event);
98
+ onFocus == null ? void 0 : onFocus(event);
99
+ };
100
+ const handleKeyDown = (event) => {
101
+ if (disabled || readOnly)
102
+ return;
103
+ keyDownHandler(event);
104
+ onKeyDown == null ? void 0 : onKeyDown(event);
105
+ };
106
+ const handleBlur = (event) => {
107
+ blurHandler();
108
+ onBlur == null ? void 0 : onBlur(event);
109
+ };
110
+ const handleMouseOver = (event) => {
111
+ mouseOverHandler();
112
+ onMouseOver == null ? void 0 : onMouseOver(event);
113
+ };
114
+ const handleMouseDown = (event) => {
115
+ if (disabled || readOnly)
116
+ return;
117
+ mouseDownHandler();
118
+ onMouseDown == null ? void 0 : onMouseDown(event);
119
+ };
120
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
121
+ className: clsx.clsx(withBaseName()),
122
+ children: [
123
+ /* @__PURE__ */ jsxRuntime.jsxs("button", {
124
+ id: dropdownId,
125
+ disabled,
126
+ onFocus: handleFocus,
127
+ onKeyDown: handleKeyDown,
128
+ onMouseOver: handleMouseOver,
129
+ onMouseDown: handleMouseDown,
130
+ onBlur: handleBlur,
131
+ value: selectedItem,
132
+ className: clsx.clsx(
133
+ withBaseName("button"),
134
+ withBaseName(variant),
135
+ {
136
+ [withBaseName("disabled")]: disabled,
137
+ [withBaseName("readOnly")]: readOnly
138
+ },
139
+ className
140
+ ),
141
+ role: "combobox",
142
+ "aria-haspopup": "listbox",
143
+ "aria-expanded": open,
144
+ "aria-activedescendant": activeDescendant,
145
+ tabIndex: disabled ? -1 : 0,
146
+ "aria-owns": listId,
147
+ "aria-controls": listId,
148
+ "aria-disabled": disabled,
149
+ ...restProps,
150
+ ref: triggerRef,
151
+ children: [
152
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
153
+ className: clsx.clsx(withBaseName("buttonText")),
154
+ children: selectedItem
155
+ }),
156
+ getIcon()
157
+ ]
158
+ }),
159
+ open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
160
+ children: /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, {
161
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
162
+ ref: floating,
163
+ ...getDropdownNextProps(),
164
+ children: /* @__PURE__ */ jsxRuntime.jsx(ListNext.ListNext, {
165
+ id: listId,
166
+ className: clsx.clsx(withBaseName("list"), ListProps == null ? void 0 : ListProps.className),
167
+ disableFocus: true,
168
+ disabled: disabled || (ListProps == null ? void 0 : ListProps.disabled),
169
+ selected: selectedItem,
170
+ highlightedItem,
171
+ ...ListProps,
172
+ ref: setListRef,
173
+ children: getListItems(source)
174
+ })
175
+ })
176
+ })
177
+ })
178
+ ]
179
+ });
180
+ });
181
+
182
+ exports.DropdownNext = DropdownNext;
183
+ //# sourceMappingURL=DropdownNext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport {\n makePrefixer,\n useId,\n useForkRef,\n UseFloatingUIProps,\n SaltProvider,\n} from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n useRef,\n forwardRef,\n HTMLAttributes,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n Ref,\n ForwardedRef,\n SyntheticEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport dropdownNextCss from \"./DropdownNext.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { FloatingPortal, Placement } from \"@floating-ui/react\";\nimport { useDropdownNext } from \"./useDropdownNext\";\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport interface DropdownNextProps\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"onSelect\"> {\n /**\n * If `true`, dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * Initially selected value for the dropdown, for use only in uncontrolled component.\n */\n defaultSelected?: string;\n /**\n * List of options when using a dropdown.\n */\n source: string[];\n /**\n * If `true`, dropdown is read only.\n */\n readOnly?: boolean;\n /**\n * Background styling variant. Defaults to `primary` .\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Placement of dropdown list. Defaults to `bottom` .\n */\n placement?: Placement;\n /**\n * Optional ref for the list component.\n */\n listRef?: Ref<HTMLUListElement>;\n /**\n * Additional props for dropdown list.\n */\n ListProps?: ListNextProps;\n /* Status open or close for use in controlled component. */\n open?: boolean;\n /**\n * Callback for list selection event\n */\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /**\n /* Selected prop for use in controlled component. */\n selected?: string;\n /* Highlighted item prop for use in controlled component. */\n highlightedItem?: string;\n}\n\nexport const DropdownNext = forwardRef(function DropdownNext(\n props: DropdownNextProps,\n ref: ForwardedRef<HTMLButtonElement>\n) {\n const {\n className,\n disabled,\n variant = \"primary\",\n id: dropdownIdProp,\n defaultSelected,\n readOnly,\n source,\n placement = \"bottom\",\n open: openControlProp,\n selected: selectedControlProp,\n highlightedItem: highlightedItemControlProp,\n onFocus,\n onKeyDown,\n onBlur,\n onMouseOver,\n onMouseDown,\n onSelect,\n listRef: listRefProp,\n ListProps,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-next\",\n css: dropdownNextCss,\n window: targetWindow,\n });\n\n const listId = useId(ListProps?.id);\n const dropdownId = useId(dropdownIdProp);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n defaultSelected,\n disabled,\n ref: listRef,\n id: listId,\n onSelect: onSelect,\n selected: selectedControlProp,\n highlightedItem: highlightedItemControlProp,\n };\n\n const {\n handlers,\n activeDescendant,\n selectedItem,\n highlightedItem,\n getListItems,\n portalProps,\n } = useDropdownNext({\n listProps,\n placement,\n openControlProp,\n });\n\n const { open, floating, reference, getDropdownNextProps } = portalProps;\n const {\n focusHandler,\n keyDownHandler,\n blurHandler,\n mouseOverHandler,\n mouseDownHandler,\n } = handlers;\n\n const triggerRef = useForkRef<HTMLButtonElement>(ref, reference);\n\n const getIcon = () => {\n if (readOnly) return;\n\n const iconClassName = clsx(withBaseName(\"icon\"), {\n [withBaseName(\"disabled\")]: disabled,\n });\n\n return open ? (\n <ChevronUpIcon className={iconClassName} />\n ) : (\n <ChevronDownIcon className={iconClassName} />\n );\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n if (disabled) return;\n focusHandler(event);\n onFocus?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) return;\n keyDownHandler(event);\n onKeyDown?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n blurHandler();\n onBlur?.(event);\n };\n\n const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {\n mouseOverHandler();\n onMouseOver?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) return;\n mouseDownHandler();\n onMouseDown?.(event);\n };\n\n return (\n <div className={clsx(withBaseName())}>\n <button\n id={dropdownId}\n disabled={disabled}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onMouseOver={handleMouseOver}\n onMouseDown={handleMouseDown}\n onBlur={handleBlur}\n value={selectedItem}\n className={clsx(\n withBaseName(\"button\"),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className\n )}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-activedescendant={activeDescendant}\n tabIndex={disabled ? -1 : 0}\n aria-owns={listId}\n aria-controls={listId}\n aria-disabled={disabled}\n {...restProps}\n ref={triggerRef}\n >\n <span className={clsx(withBaseName(\"buttonText\"))}>{selectedItem}</span>\n {getIcon()}\n </button>\n {open && (\n <FloatingPortal>\n <SaltProvider>\n <div ref={floating} {...getDropdownNextProps()}>\n <ListNext\n id={listId}\n className={clsx(withBaseName(\"list\"), ListProps?.className)}\n disableFocus\n disabled={disabled || ListProps?.disabled}\n selected={selectedItem}\n highlightedItem={highlightedItem}\n {...ListProps}\n ref={setListRef}\n >\n {getListItems(source)}\n </ListNext>\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownNextCss","useId","useRef","useForkRef","useDropdownNext","clsx","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","FloatingPortal","SaltProvider","ListNext"],"mappings":"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"}