@salt-ds/lab 1.0.0-alpha.33 → 1.0.0-alpha.35

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 (182) hide show
  1. package/css/salt-lab.css +101 -398
  2. package/dist-cjs/calendar/Calendar.css.js +1 -1
  3. package/dist-cjs/calendar/internal/CalendarCarousel.css.js +1 -1
  4. package/dist-cjs/calendar/internal/CalendarCarousel.js +5 -29
  5. package/dist-cjs/calendar/internal/CalendarCarousel.js.map +1 -1
  6. package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
  7. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  8. package/dist-cjs/calendar/internal/CalendarDay.js +18 -19
  9. package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
  10. package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
  11. package/dist-cjs/calendar/internal/CalendarMonth.js +0 -2
  12. package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
  13. package/dist-cjs/calendar/internal/CalendarNavigation.css.js +1 -1
  14. package/dist-cjs/calendar/internal/CalendarNavigation.js +74 -81
  15. package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
  16. package/dist-cjs/calendar/internal/CalendarWeekHeader.css.js +1 -1
  17. package/dist-cjs/calendar/useCalendar.js +14 -8
  18. package/dist-cjs/calendar/useCalendar.js.map +1 -1
  19. package/dist-cjs/calendar/useCalendarDay.js +15 -5
  20. package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
  21. package/dist-cjs/calendar/useSelection.js.map +1 -1
  22. package/dist-cjs/combo-box-next/ComboBoxNext.js +36 -13
  23. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  24. package/dist-cjs/combo-box-next/useComboBoxNext.js +16 -15
  25. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -1
  26. package/dist-cjs/dropdown-next/DropdownNext.js +7 -8
  27. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  28. package/dist-cjs/index.js +0 -18
  29. package/dist-cjs/index.js.map +1 -1
  30. package/dist-cjs/list-control/ListControlContext.js +3 -1
  31. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  32. package/dist-cjs/list-control/ListControlState.js +16 -18
  33. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  34. package/dist-cjs/option/Option.css.js +1 -1
  35. package/dist-cjs/option/Option.js +10 -20
  36. package/dist-cjs/option/Option.js.map +1 -1
  37. package/dist-cjs/overlay/Overlay.css.js +1 -1
  38. package/dist-cjs/overlay/Overlay.js +1 -7
  39. package/dist-cjs/overlay/Overlay.js.map +1 -1
  40. package/dist-cjs/overlay/OverlayPanel.js +18 -24
  41. package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
  42. package/dist-cjs/overlay/OverlayPanelBase.js +2 -4
  43. package/dist-cjs/overlay/OverlayPanelBase.js.map +1 -1
  44. package/dist-cjs/tabs/Tab.js +1 -1
  45. package/dist-cjs/tabs/Tab.js.map +1 -1
  46. package/dist-cjs/tabs-next/TabNextContext.js.map +1 -1
  47. package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
  48. package/dist-cjs/tabs-next/TabstripNext.js +23 -21
  49. package/dist-cjs/tabs-next/TabstripNext.js.map +1 -1
  50. package/dist-es/calendar/Calendar.css.js +1 -1
  51. package/dist-es/calendar/internal/CalendarCarousel.css.js +1 -1
  52. package/dist-es/calendar/internal/CalendarCarousel.js +5 -29
  53. package/dist-es/calendar/internal/CalendarCarousel.js.map +1 -1
  54. package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
  55. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  56. package/dist-es/calendar/internal/CalendarDay.js +20 -21
  57. package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
  58. package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
  59. package/dist-es/calendar/internal/CalendarMonth.js +0 -2
  60. package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
  61. package/dist-es/calendar/internal/CalendarNavigation.css.js +1 -1
  62. package/dist-es/calendar/internal/CalendarNavigation.js +75 -82
  63. package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
  64. package/dist-es/calendar/internal/CalendarWeekHeader.css.js +1 -1
  65. package/dist-es/calendar/useCalendar.js +14 -8
  66. package/dist-es/calendar/useCalendar.js.map +1 -1
  67. package/dist-es/calendar/useCalendarDay.js +15 -5
  68. package/dist-es/calendar/useCalendarDay.js.map +1 -1
  69. package/dist-es/calendar/useSelection.js.map +1 -1
  70. package/dist-es/combo-box-next/ComboBoxNext.js +36 -13
  71. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  72. package/dist-es/combo-box-next/useComboBoxNext.js +16 -15
  73. package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -1
  74. package/dist-es/dropdown-next/DropdownNext.js +8 -9
  75. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  76. package/dist-es/index.js +0 -8
  77. package/dist-es/index.js.map +1 -1
  78. package/dist-es/list-control/ListControlContext.js +3 -1
  79. package/dist-es/list-control/ListControlContext.js.map +1 -1
  80. package/dist-es/list-control/ListControlState.js +16 -19
  81. package/dist-es/list-control/ListControlState.js.map +1 -1
  82. package/dist-es/option/Option.css.js +1 -1
  83. package/dist-es/option/Option.js +11 -21
  84. package/dist-es/option/Option.js.map +1 -1
  85. package/dist-es/overlay/Overlay.css.js +1 -1
  86. package/dist-es/overlay/Overlay.js +1 -7
  87. package/dist-es/overlay/Overlay.js.map +1 -1
  88. package/dist-es/overlay/OverlayPanel.js +19 -25
  89. package/dist-es/overlay/OverlayPanel.js.map +1 -1
  90. package/dist-es/overlay/OverlayPanelBase.js +2 -4
  91. package/dist-es/overlay/OverlayPanelBase.js.map +1 -1
  92. package/dist-es/tabs/Tab.js +1 -1
  93. package/dist-es/tabs/Tab.js.map +1 -1
  94. package/dist-es/tabs-next/TabNextContext.js.map +1 -1
  95. package/dist-es/tabs-next/TabstripNext.css.js +1 -1
  96. package/dist-es/tabs-next/TabstripNext.js +23 -21
  97. package/dist-es/tabs-next/TabstripNext.js.map +1 -1
  98. package/dist-types/calendar/internal/CalendarContext.d.ts +2 -2
  99. package/dist-types/calendar/internal/CalendarNavigation.d.ts +3 -7
  100. package/dist-types/calendar/useCalendarDay.d.ts +7 -4
  101. package/dist-types/calendar/useSelection.d.ts +4 -4
  102. package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -10
  103. package/dist-types/combo-box-next/useComboBoxNext.d.ts +6 -4
  104. package/dist-types/dropdown-next/DropdownNext.d.ts +49 -7
  105. package/dist-types/index.d.ts +0 -2
  106. package/dist-types/list-control/ListControlContext.d.ts +1 -1
  107. package/dist-types/list-control/ListControlState.d.ts +14 -12
  108. package/dist-types/option/Option.d.ts +0 -4
  109. package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
  110. package/dist-types/tabs-next/TabNextContext.d.ts +2 -2
  111. package/package.json +2 -2
  112. package/dist-cjs/dialog/Dialog.css.js +0 -6
  113. package/dist-cjs/dialog/Dialog.css.js.map +0 -1
  114. package/dist-cjs/dialog/Dialog.js +0 -115
  115. package/dist-cjs/dialog/Dialog.js.map +0 -1
  116. package/dist-cjs/dialog/DialogActions.css.js +0 -6
  117. package/dist-cjs/dialog/DialogActions.css.js.map +0 -1
  118. package/dist-cjs/dialog/DialogActions.js +0 -33
  119. package/dist-cjs/dialog/DialogActions.js.map +0 -1
  120. package/dist-cjs/dialog/DialogCloseButton.css.js +0 -6
  121. package/dist-cjs/dialog/DialogCloseButton.css.js.map +0 -1
  122. package/dist-cjs/dialog/DialogCloseButton.js +0 -39
  123. package/dist-cjs/dialog/DialogCloseButton.js.map +0 -1
  124. package/dist-cjs/dialog/DialogContent.css.js +0 -6
  125. package/dist-cjs/dialog/DialogContent.css.js.map +0 -1
  126. package/dist-cjs/dialog/DialogContent.js +0 -45
  127. package/dist-cjs/dialog/DialogContent.js.map +0 -1
  128. package/dist-cjs/dialog/DialogContext.js +0 -17
  129. package/dist-cjs/dialog/DialogContext.js.map +0 -1
  130. package/dist-cjs/dialog/DialogTitle.css.js +0 -6
  131. package/dist-cjs/dialog/DialogTitle.css.js.map +0 -1
  132. package/dist-cjs/dialog/DialogTitle.js +0 -67
  133. package/dist-cjs/dialog/DialogTitle.js.map +0 -1
  134. package/dist-cjs/drawer/Drawer.css.js +0 -6
  135. package/dist-cjs/drawer/Drawer.css.js.map +0 -1
  136. package/dist-cjs/drawer/Drawer.js +0 -104
  137. package/dist-cjs/drawer/Drawer.js.map +0 -1
  138. package/dist-cjs/drawer/DrawerCloseButton.css.js +0 -6
  139. package/dist-cjs/drawer/DrawerCloseButton.css.js.map +0 -1
  140. package/dist-cjs/drawer/DrawerCloseButton.js +0 -44
  141. package/dist-cjs/drawer/DrawerCloseButton.js.map +0 -1
  142. package/dist-es/dialog/Dialog.css.js +0 -4
  143. package/dist-es/dialog/Dialog.css.js.map +0 -1
  144. package/dist-es/dialog/Dialog.js +0 -110
  145. package/dist-es/dialog/Dialog.js.map +0 -1
  146. package/dist-es/dialog/DialogActions.css.js +0 -4
  147. package/dist-es/dialog/DialogActions.css.js.map +0 -1
  148. package/dist-es/dialog/DialogActions.js +0 -29
  149. package/dist-es/dialog/DialogActions.js.map +0 -1
  150. package/dist-es/dialog/DialogCloseButton.css.js +0 -4
  151. package/dist-es/dialog/DialogCloseButton.css.js.map +0 -1
  152. package/dist-es/dialog/DialogCloseButton.js +0 -31
  153. package/dist-es/dialog/DialogCloseButton.js.map +0 -1
  154. package/dist-es/dialog/DialogContent.css.js +0 -4
  155. package/dist-es/dialog/DialogContent.css.js.map +0 -1
  156. package/dist-es/dialog/DialogContent.js +0 -41
  157. package/dist-es/dialog/DialogContent.js.map +0 -1
  158. package/dist-es/dialog/DialogContext.js +0 -12
  159. package/dist-es/dialog/DialogContext.js.map +0 -1
  160. package/dist-es/dialog/DialogTitle.css.js +0 -4
  161. package/dist-es/dialog/DialogTitle.css.js.map +0 -1
  162. package/dist-es/dialog/DialogTitle.js +0 -59
  163. package/dist-es/dialog/DialogTitle.js.map +0 -1
  164. package/dist-es/drawer/Drawer.css.js +0 -4
  165. package/dist-es/drawer/Drawer.css.js.map +0 -1
  166. package/dist-es/drawer/Drawer.js +0 -100
  167. package/dist-es/drawer/Drawer.js.map +0 -1
  168. package/dist-es/drawer/DrawerCloseButton.css.js +0 -4
  169. package/dist-es/drawer/DrawerCloseButton.css.js.map +0 -1
  170. package/dist-es/drawer/DrawerCloseButton.js +0 -36
  171. package/dist-es/drawer/DrawerCloseButton.js.map +0 -1
  172. package/dist-types/calendar/useCalendar.d.ts +0 -60
  173. package/dist-types/dialog/Dialog.d.ts +0 -46
  174. package/dist-types/dialog/DialogActions.d.ts +0 -8
  175. package/dist-types/dialog/DialogCloseButton.d.ts +0 -2
  176. package/dist-types/dialog/DialogContent.d.ts +0 -8
  177. package/dist-types/dialog/DialogContext.d.ts +0 -8
  178. package/dist-types/dialog/DialogTitle.d.ts +0 -22
  179. package/dist-types/dialog/index.d.ts +0 -6
  180. package/dist-types/drawer/Drawer.d.ts +0 -28
  181. package/dist-types/drawer/DrawerCloseButton.d.ts +0 -2
  182. package/dist-types/drawer/index.d.ts +0 -2
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n useEffect,\n useMemo,\n useState,\n ComponentProps,\n ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useCurrentBreakpoint,\n useForkRef,\n ValidationStatus,\n Scrim,\n useId,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n children?: ReactNode;\n condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\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 * The status of the Dialog\n * */\n status?: ValidationStatus;\n /**\n * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n * Default value is 0 (first tabbable element).\n * */\n initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n /**\n * Size of the Dialog\n * */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n /**\n * Optional id prop\n * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n * */\n idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref\n) {\n const {\n children,\n className,\n open = false,\n onOpenChange,\n status,\n disableDismiss,\n size = \"medium\",\n disableScrim,\n idProp,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const currentbreakpoint = useCurrentBreakpoint();\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { context, floating, elements } = useFloatingUI({\n open,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent, setShowComponent]);\n\n const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n return (\n <DialogContext.Provider value={contextValue}>\n <ConditionalScrimWrapper condition={open && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={id}\n ref={floatingRef}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(size, currentbreakpoint),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(status as string)]: status,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n </DialogContext.Provider>\n );\n});\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltDialogActions {\n padding: var(--salt-spacing-300);\n padding-bottom: 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--salt-spacing-100);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=DialogActions.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogActions.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,33 +0,0 @@
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 = require('@salt-ds/window');
10
- var styles = require('@salt-ds/styles');
11
- var DialogActions$1 = require('./DialogActions.css.js');
12
-
13
- const withBaseName = core.makePrefixer("saltDialogActions");
14
- const DialogActions = React.forwardRef(
15
- function DialogActions2(props, ref) {
16
- const { children, className, ...rest } = props;
17
- const targetWindow = window.useWindow();
18
- styles.useComponentCssInjection({
19
- testId: "salt-dialog-actions",
20
- css: DialogActions$1,
21
- window: targetWindow
22
- });
23
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
24
- className: clsx.clsx(withBaseName(), className),
25
- ...rest,
26
- ref,
27
- children
28
- });
29
- }
30
- );
31
-
32
- exports.DialogActions = DialogActions;
33
- //# sourceMappingURL=DialogActions.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } 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 dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Actions\n */\n children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,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,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltButton.saltDialogCloseButton {\n position: absolute;\n top: 0;\n right: 0;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=DialogCloseButton.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogCloseButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,39 +0,0 @@
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 = require('@salt-ds/window');
10
- var styles = require('@salt-ds/styles');
11
- var icons = require('@salt-ds/icons');
12
- var DialogCloseButton$1 = require('./DialogCloseButton.css.js');
13
-
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
17
-
18
- const withBaseName = core.makePrefixer("saltDialogCloseButton");
19
- const DialogCloseButton = React.forwardRef(
20
- function DialogCloseButton2({ className, ...rest }, ref) {
21
- const targetWindow = window.useWindow();
22
- styles.useComponentCssInjection({
23
- testId: "salt-dialog-close-button",
24
- css: DialogCloseButton$1,
25
- window: targetWindow
26
- });
27
- return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
28
- ref,
29
- "aria-label": "Close dialog",
30
- variant: "secondary",
31
- className: clsx__default["default"](withBaseName(), className),
32
- ...rest,
33
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
34
- });
35
- }
36
- );
37
-
38
- exports.DialogCloseButton = DialogCloseButton;
39
- //# sourceMappingURL=DialogCloseButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DialogCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-close-button\",\n css: dialogCloseButtonCss,\n window: targetWindow,\n });\n\n return (\n <Button\n ref={ref}\n aria-label=\"Close dialog\"\n variant=\"secondary\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon />\n </Button>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogCloseButton","useWindow","useComponentCssInjection","dialogCloseButtonCss","jsx","Button","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAAC,gBAAA;AAAA,EAC/B,SAASC,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,mBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,cAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAAC,wBAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,yCAACC,eAAU,EAAA,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltDialogContent {\n color: var(--salt-content-primary-foreground);\n min-height: var(--salt-text-lineHeight);\n overflow-y: auto;\n background: var(--salt-container-primary-background);\n padding-bottom: var(--salt-spacing-50);\n\n margin-left: var(--salt-spacing-200);\n margin-right: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-100);\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n box-shadow: none;\n}\n\n.saltDialogContent-scroll {\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=DialogContent.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,45 +0,0 @@
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 = require('@salt-ds/window');
10
- var styles = require('@salt-ds/styles');
11
- var DialogContent$1 = require('./DialogContent.css.js');
12
-
13
- const withBaseName = core.makePrefixer("saltDialogContent");
14
- const DialogContent = React.forwardRef(
15
- function DialogContent2(props, ref) {
16
- const { children, className, ...rest } = props;
17
- const [scrollTop, setScrollTop] = React.useState(0);
18
- const handleScroll = (event) => {
19
- setScrollTop(event.currentTarget.scrollTop);
20
- };
21
- const targetWindow = window.useWindow();
22
- styles.useComponentCssInjection({
23
- testId: "salt-dialog-content",
24
- css: DialogContent$1,
25
- window: targetWindow
26
- });
27
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
28
- children: [
29
- /* @__PURE__ */ jsxRuntime.jsx("div", {
30
- className: clsx.clsx({ [withBaseName("scroll")]: scrollTop > 0 })
31
- }),
32
- /* @__PURE__ */ jsxRuntime.jsx("div", {
33
- className: clsx.clsx(withBaseName(), className),
34
- onScroll: handleScroll,
35
- ...rest,
36
- ref,
37
- children
38
- })
39
- ]
40
- });
41
- }
42
- );
43
-
44
- exports.DialogContent = DialogContent;
45
- //# sourceMappingURL=DialogContent.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode, useState } 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\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Content\n */\n children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const [scrollTop, setScrollTop] = useState(0);\n\n const handleScroll = (event: React.UIEvent<HTMLElement>) => {\n setScrollTop(event.currentTarget.scrollTop);\n };\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n return (\n <>\n <div className={clsx({ [withBaseName(\"scroll\")]: scrollTop > 0 })} />\n <div\n className={clsx(withBaseName(), className)}\n onScroll={handleScroll}\n {...rest}\n ref={ref}\n >\n {children}\n </div>\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useState","useWindow","useComponentCssInjection","dialogContentCss","jsxs","Fragment","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AAC1D,MAAa,YAAA,CAAA,KAAA,CAAM,cAAc,SAAS,CAAA,CAAA;AAAA,KAC5C,CAAA;AAEA,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,IACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAWC,UAAK,EAAE,CAAC,aAAa,QAAQ,CAAA,GAAI,SAAY,GAAA,CAAA,EAAG,CAAA;AAAA,SAAG,CAAA;AAAA,wBAClED,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,QAAU,EAAA,YAAA;AAAA,UACT,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,17 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
-
7
- const DialogContext = React.createContext({
8
- status: void 0,
9
- id: ""
10
- });
11
- const useDialogContext = () => {
12
- return React.useContext(DialogContext);
13
- };
14
-
15
- exports.DialogContext = DialogContext;
16
- exports.useDialogContext = useDialogContext;
17
- //# sourceMappingURL=DialogContext.js.map
@@ -1 +0,0 @@
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 status?: ValidationStatus;\n id: string | undefined;\n}>({\n status: undefined,\n id: \"\",\n});\n\nexport const useDialogContext = () => {\n return useContext(DialogContext);\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAGO,MAAM,gBAAgBA,mBAG1B,CAAA;AAAA,EACD,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,EAAI,EAAA,EAAA;AACN,CAAC,EAAA;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAOC,iBAAW,aAAa,CAAA,CAAA;AACjC;;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n padding-bottom: var(--salt-spacing-100);\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n box-sizing: border-box;\n}\n\n.saltDialogTitle-title {\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
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=DialogTitle.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogTitle.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,67 +0,0 @@
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 core = require('@salt-ds/core');
8
- var DialogContext = require('./DialogContext.js');
9
- var window = require('@salt-ds/window');
10
- var styles = require('@salt-ds/styles');
11
- var DialogTitle$1 = require('./DialogTitle.css.js');
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
-
17
- const withBaseName = core.makePrefixer("saltDialogTitle");
18
- const DialogTitle = ({
19
- className,
20
- title,
21
- subtitle,
22
- disableAccent,
23
- status: statusProp,
24
- ...rest
25
- }) => {
26
- const { status: statusContext, id } = DialogContext.useDialogContext();
27
- const targetWindow = window.useWindow();
28
- styles.useComponentCssInjection({
29
- testId: "salt-dialog-title",
30
- css: DialogTitle$1,
31
- window: targetWindow
32
- });
33
- const status = statusProp != null ? statusProp : statusContext;
34
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
35
- id,
36
- className: clsx__default["default"](
37
- withBaseName(),
38
- {
39
- [withBaseName("withAccent")]: !disableAccent && !status,
40
- [withBaseName(status)]: !!status
41
- },
42
- className
43
- ),
44
- ...rest,
45
- children: [
46
- status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
47
- status
48
- }),
49
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
50
- children: [
51
- subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
52
- as: "label",
53
- variant: "secondary",
54
- children: subtitle
55
- }),
56
- /* @__PURE__ */ jsxRuntime.jsx(core.H2, {
57
- className: clsx__default["default"](withBaseName("title")),
58
- children: title
59
- })
60
- ]
61
- })
62
- ]
63
- });
64
- };
65
-
66
- exports.DialogTitle = DialogTitle;
67
- //# sourceMappingURL=DialogTitle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n H2,\n StatusIndicator,\n ValidationStatus,\n makePrefixer,\n Text,\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\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the Dialog Title in a H2 component\n */\n title: ReactNode;\n /**\n * Displays the Dialog Subtitle in a Label component\n **/\n subtitle?: ReactNode;\n\n className?: string;\n}\n\nexport const DialogTitle = ({\n className,\n title,\n subtitle,\n disableAccent,\n status: statusProp,\n ...rest\n}: DialogTitleProps) => {\n const { status: statusContext, id } = 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 as ValidationStatus);\n\n return (\n <div\n id={id as string}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status)]: !!status,\n },\n className\n )}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <div>\n {subtitle && (\n <Text as={\"label\"} variant=\"secondary\">\n {subtitle}\n </Text>\n )}\n <H2 className={clsx(withBaseName(\"title\"))}>{title}</H2>\n </div>\n </div>\n );\n};\n"],"names":["makePrefixer","useDialogContext","useWindow","useComponentCssInjection","dialogTitleCss","jsxs","clsx","jsx","StatusIndicator","Text","H2"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAuB5C,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAOC,8BAAiB,EAAA,CAAA;AACvD,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,UAAe,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE9B,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAA;AAAA,IACA,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,QACjD,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC5B;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,sBAC3CH,eAAA,CAAA,KAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,UAAA,QAAA,oBACEE,cAAA,CAAAE,SAAA,EAAA;AAAA,YAAK,EAAI,EAAA,OAAA;AAAA,YAAS,OAAQ,EAAA,WAAA;AAAA,YACxB,QAAA,EAAA,QAAA;AAAA,WACH,CAAA;AAAA,0BAEDF,cAAA,CAAAG,OAAA,EAAA;AAAA,YAAG,SAAW,EAAAJ,wBAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,YAAI,QAAA,EAAA,KAAA;AAAA,WAAM,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n background: var(--drawer-background);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--salt-spacing-300);\n box-shadow: var(--salt-overlayable-shadow-modal);\n z-index: var(--salt-zIndex-drawer);\n position: fixed;\n top: 0;\n box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n left: 0;\n right: 0;\n bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n left: auto;\n right: 0;\n height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n left: 0;\n right: auto;\n height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-top);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=Drawer.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,104 +0,0 @@
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 react = require('@floating-ui/react');
9
- var core = require('@salt-ds/core');
10
- var window = require('@salt-ds/window');
11
- var styles = require('@salt-ds/styles');
12
- var Drawer$1 = require('./Drawer.css.js');
13
-
14
- const ConditionalScrimWrapper = ({
15
- condition,
16
- children
17
- }) => {
18
- return condition ? /* @__PURE__ */ jsxRuntime.jsxs(core.Scrim, {
19
- fixed: true,
20
- children: [
21
- " ",
22
- children,
23
- " "
24
- ]
25
- }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
26
- children: [
27
- children,
28
- " "
29
- ]
30
- });
31
- };
32
- const withBaseName = core.makePrefixer("saltDrawer");
33
- const Drawer = React.forwardRef(function Drawer2(props, ref) {
34
- var _a, _b;
35
- const {
36
- children,
37
- className,
38
- position = "left",
39
- open = false,
40
- onOpenChange,
41
- variant = "primary",
42
- disableDismiss,
43
- disableScrim,
44
- ...rest
45
- } = props;
46
- const targetWindow = window.useWindow();
47
- styles.useComponentCssInjection({
48
- testId: "salt-drawer",
49
- css: Drawer$1,
50
- window: targetWindow
51
- });
52
- const [showComponent, setShowComponent] = React.useState(false);
53
- const { Component: FloatingComponent } = core.useFloatingComponent();
54
- const { context, floating, elements } = core.useFloatingUI({
55
- open,
56
- onOpenChange
57
- });
58
- const { getFloatingProps } = react.useInteractions([
59
- react.useClick(context),
60
- react.useDismiss(context, { enabled: !disableDismiss })
61
- ]);
62
- const handleRef = core.useForkRef(floating, ref);
63
- React.useEffect(() => {
64
- if (open && !showComponent) {
65
- setShowComponent(true);
66
- }
67
- if (!open && showComponent) {
68
- const animate = setTimeout(() => {
69
- setShowComponent(false);
70
- }, 300);
71
- return () => clearTimeout(animate);
72
- }
73
- }, [open, showComponent, setShowComponent]);
74
- return /* @__PURE__ */ jsxRuntime.jsx(ConditionalScrimWrapper, {
75
- condition: open && !disableScrim,
76
- children: /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
77
- open: showComponent,
78
- ref: handleRef,
79
- role: "dialog",
80
- width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
81
- height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
82
- "aria-modal": "true",
83
- focusManagerProps: {
84
- context
85
- },
86
- className: clsx.clsx(
87
- withBaseName(),
88
- withBaseName(position),
89
- {
90
- [withBaseName("enterAnimation")]: open,
91
- [withBaseName("exitAnimation")]: !open,
92
- [withBaseName(variant)]: variant
93
- },
94
- className
95
- ),
96
- ...getFloatingProps(),
97
- ...rest,
98
- children
99
- })
100
- });
101
- });
102
-
103
- exports.Drawer = Drawer;
104
- //# sourceMappingURL=Drawer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n useEffect,\n useState,\n PropsWithChildren,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport {\n makePrefixer,\n Scrim,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\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 = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\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 const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent, setShowComponent]);\n\n return (\n <ConditionalScrimWrapper condition={open && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\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 {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n});\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltDrawerCloseButton-container {\n position: relative;\n display: flex;\n justify-content: flex-end;\n}\n\n.saltButton-secondary.saltDrawerCloseButton {\n position: fixed;\n margin-top: calc(var(--salt-spacing-300) * -1);\n margin-right: calc(var(--salt-spacing-300) * -1);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=DrawerCloseButton.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DrawerCloseButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,44 +0,0 @@
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 = require('@salt-ds/window');
10
- var styles = require('@salt-ds/styles');
11
- var icons = require('@salt-ds/icons');
12
- var DrawerCloseButton$1 = require('./DrawerCloseButton.css.js');
13
-
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
17
-
18
- const withBaseName = core.makePrefixer("saltDrawerCloseButton");
19
- const DrawerCloseButton = React.forwardRef(
20
- function DrawerCloseButton2({ className, ...rest }, ref) {
21
- const targetWindow = window.useWindow();
22
- styles.useComponentCssInjection({
23
- testId: "salt-drawer-close-button",
24
- css: DrawerCloseButton$1,
25
- window: targetWindow
26
- });
27
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
28
- className: withBaseName("container"),
29
- children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
30
- ref,
31
- "aria-label": "Close Drawer",
32
- variant: "secondary",
33
- className: clsx__default["default"](withBaseName(), className),
34
- ...rest,
35
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
36
- "aria-hidden": true
37
- })
38
- })
39
- });
40
- }
41
- );
42
-
43
- exports.DrawerCloseButton = DrawerCloseButton;
44
- //# sourceMappingURL=DrawerCloseButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DrawerCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer-close-button\",\n css: drawerCloseButtonCss,\n window: targetWindow,\n });\n\n return (\n <div className={withBaseName(\"container\")}>\n <Button\n ref={ref}\n aria-label=\"Close Drawer\"\n variant=\"secondary\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DrawerCloseButton","useWindow","useComponentCssInjection","drawerCloseButtonCss","jsx","Button","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAAC,gBAAA;AAAA,EAC/B,SAASC,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,mBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACtC,QAAC,kBAAAA,cAAA,CAAAC,WAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAW,EAAA,cAAA;AAAA,QACX,OAAQ,EAAA,WAAA;AAAA,QACR,SAAW,EAAAC,wBAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAF,cAAA,CAAAG,eAAA,EAAA;AAAA,UAAU,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OACzB,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-spacing-300);\n padding-bottom: var(--salt-spacing-300);\n background: var(--salt-container-primary-background);\n box-shadow: var(--salt-overlayable-shadow-modal);\n overflow-y: auto;\n z-index: var(--salt-zIndex-drawer);\n height: min-content;\n border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);\n box-sizing: border-box;\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths */\n.saltDialog-small-xs {\n width: 100%;\n max-height: 48%;\n}\n\n.saltDialog-small-sm {\n width: 56%;\n max-height: 48%;\n}\n\n.saltDialog-small-md {\n width: 36%;\n max-height: 48%;\n}\n\n.saltDialog-small-lg {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-small-xl {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n width: 100%;\n max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n width: 84%;\n max-height: 72%;\n}\n\n.saltDialog-medium-md {\n width: 68%;\n max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-large-xs {\n width: 100%;\n max-height: 84%;\n}\n\n.saltDialog-large-sm {\n width: 96%;\n max-height: 84%;\n}\n\n.saltDialog-large-md {\n width: 84%;\n max-height: 84%;\n}\n\n.saltDialog-large-lg {\n width: 72%;\n max-height: 84%;\n}\n\n.saltDialog-large-xl {\n width: 72%;\n max-height: 84%;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=Dialog.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,110 +0,0 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { forwardRef, useState, useEffect, useMemo } from 'react';
3
- import { clsx } from 'clsx';
4
- import { useInteractions, useClick, useDismiss } from '@floating-ui/react';
5
- import { makePrefixer, useId, useCurrentBreakpoint, useFloatingUI, useFloatingComponent, useForkRef, Scrim } from '@salt-ds/core';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './Dialog.css.js';
9
- import { DialogContext } from './DialogContext.js';
10
-
11
- const ConditionalScrimWrapper = ({
12
- condition,
13
- children
14
- }) => {
15
- return condition ? /* @__PURE__ */ jsx(Scrim, {
16
- fixed: true,
17
- children
18
- }) : /* @__PURE__ */ jsxs(Fragment, {
19
- children: [
20
- children,
21
- " "
22
- ]
23
- });
24
- };
25
- const withBaseName = makePrefixer("saltDialog");
26
- const Dialog = forwardRef(function Dialog2(props, ref) {
27
- var _a, _b;
28
- const {
29
- children,
30
- className,
31
- open = false,
32
- onOpenChange,
33
- status,
34
- disableDismiss,
35
- size = "medium",
36
- disableScrim,
37
- idProp,
38
- ...rest
39
- } = props;
40
- const targetWindow = useWindow();
41
- useComponentCssInjection({
42
- testId: "salt-dialog",
43
- css: css_248z,
44
- window: targetWindow
45
- });
46
- const id = useId(idProp);
47
- const currentbreakpoint = useCurrentBreakpoint();
48
- const [showComponent, setShowComponent] = useState(false);
49
- const { context, floating, elements } = useFloatingUI({
50
- open,
51
- onOpenChange
52
- });
53
- const { getFloatingProps } = useInteractions([
54
- useClick(context),
55
- useDismiss(context, { enabled: !disableDismiss })
56
- ]);
57
- const { Component: FloatingComponent } = useFloatingComponent();
58
- const floatingRef = useForkRef(floating, ref);
59
- useEffect(() => {
60
- if (open && !showComponent) {
61
- setShowComponent(true);
62
- }
63
- if (!open && showComponent) {
64
- const animate = setTimeout(() => {
65
- setShowComponent(false);
66
- }, 300);
67
- return () => clearTimeout(animate);
68
- }
69
- }, [open, showComponent, setShowComponent]);
70
- const contextValue = useMemo(() => ({ status, id }), [status, id]);
71
- return /* @__PURE__ */ jsx(DialogContext.Provider, {
72
- value: contextValue,
73
- children: /* @__PURE__ */ jsx(ConditionalScrimWrapper, {
74
- condition: open && !disableScrim,
75
- children: /* @__PURE__ */ jsx(FloatingComponent, {
76
- open: showComponent,
77
- role: "dialog",
78
- "aria-modal": "true",
79
- "aria-labelledby": id,
80
- ref: floatingRef,
81
- width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
82
- height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
83
- focusManagerProps: {
84
- context
85
- },
86
- className: clsx(
87
- withBaseName(),
88
- withBaseName(size, currentbreakpoint),
89
- {
90
- [withBaseName("enterAnimation")]: open,
91
- [withBaseName("exitAnimation")]: !open,
92
- [withBaseName(status)]: status
93
- },
94
- className
95
- ),
96
- onAnimationEnd: () => {
97
- if (!open && showComponent) {
98
- setShowComponent(false);
99
- }
100
- },
101
- ...getFloatingProps(),
102
- ...rest,
103
- children
104
- })
105
- })
106
- });
107
- });
108
-
109
- export { ConditionalScrimWrapper, Dialog };
110
- //# sourceMappingURL=Dialog.js.map