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

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 (144) hide show
  1. package/dist-cjs/combo-box-next/ComboBoxNext.css.js +6 -0
  2. package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +1 -0
  3. package/dist-cjs/combo-box-next/ComboBoxNext.js +177 -0
  4. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -0
  5. package/dist-cjs/combo-box-next/useComboBox.js +137 -0
  6. package/dist-cjs/combo-box-next/useComboBox.js.map +1 -0
  7. package/dist-cjs/combo-box-next/useComboboxPortal.js +69 -0
  8. package/dist-cjs/combo-box-next/useComboboxPortal.js.map +1 -0
  9. package/dist-cjs/combo-box-next/utils.js +40 -0
  10. package/dist-cjs/combo-box-next/utils.js.map +1 -0
  11. package/dist-cjs/dialog/Dialog.css.js +1 -1
  12. package/dist-cjs/dialog/Dialog.js +53 -56
  13. package/dist-cjs/dialog/Dialog.js.map +1 -1
  14. package/dist-cjs/dialog/DialogActions.css.js +1 -1
  15. package/dist-cjs/dialog/DialogActions.js +15 -17
  16. package/dist-cjs/dialog/DialogActions.js.map +1 -1
  17. package/dist-cjs/dialog/DialogCloseButton.css.js +6 -0
  18. package/dist-cjs/dialog/DialogCloseButton.css.js.map +1 -0
  19. package/dist-cjs/dialog/DialogCloseButton.js +39 -0
  20. package/dist-cjs/dialog/DialogCloseButton.js.map +1 -0
  21. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  22. package/dist-cjs/dialog/DialogContent.js +20 -29
  23. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  24. package/dist-cjs/dialog/{internal/DialogContext.js → DialogContext.js} +4 -0
  25. package/dist-cjs/dialog/DialogContext.js.map +1 -0
  26. package/dist-cjs/dialog/DialogTitle.css.js +1 -1
  27. package/dist-cjs/dialog/DialogTitle.js +40 -41
  28. package/dist-cjs/dialog/DialogTitle.js.map +1 -1
  29. package/dist-cjs/dialog/useDialog.js +31 -0
  30. package/dist-cjs/dialog/useDialog.js.map +1 -0
  31. package/dist-cjs/dropdown-next/DropdownNext.css.js +6 -0
  32. package/dist-cjs/dropdown-next/DropdownNext.css.js.map +1 -0
  33. package/dist-cjs/dropdown-next/DropdownNext.js +181 -0
  34. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -0
  35. package/dist-cjs/dropdown-next/useDropdownNext.js +169 -0
  36. package/dist-cjs/dropdown-next/useDropdownNext.js.map +1 -0
  37. package/dist-cjs/index.js +15 -6
  38. package/dist-cjs/index.js.map +1 -1
  39. package/dist-cjs/list/Highlighter.js +1 -1
  40. package/dist-cjs/list/Highlighter.js.map +1 -1
  41. package/dist-cjs/list-next/useList.js.map +1 -1
  42. package/dist-cjs/logo/Logo.css.js +1 -1
  43. package/dist-cjs/logo/LogoImage.css.js +6 -0
  44. package/dist-cjs/logo/LogoImage.css.js.map +1 -0
  45. package/dist-cjs/logo/LogoImage.js +9 -0
  46. package/dist-cjs/logo/LogoImage.js.map +1 -1
  47. package/dist-cjs/logo/LogoSeparator.css.js +1 -1
  48. package/dist-cjs/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
  49. package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
  50. package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
  51. package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
  52. package/dist-cjs/navigation-item/NavigationItem.js +96 -0
  53. package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
  54. package/dist-es/combo-box-next/ComboBoxNext.css.js +4 -0
  55. package/dist-es/combo-box-next/ComboBoxNext.css.js.map +1 -0
  56. package/dist-es/combo-box-next/ComboBoxNext.js +173 -0
  57. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -0
  58. package/dist-es/combo-box-next/useComboBox.js +133 -0
  59. package/dist-es/combo-box-next/useComboBox.js.map +1 -0
  60. package/dist-es/combo-box-next/useComboboxPortal.js +65 -0
  61. package/dist-es/combo-box-next/useComboboxPortal.js.map +1 -0
  62. package/dist-es/combo-box-next/utils.js +35 -0
  63. package/dist-es/combo-box-next/utils.js.map +1 -0
  64. package/dist-es/dialog/Dialog.css.js +1 -1
  65. package/dist-es/dialog/Dialog.js +53 -56
  66. package/dist-es/dialog/Dialog.js.map +1 -1
  67. package/dist-es/dialog/DialogActions.css.js +1 -1
  68. package/dist-es/dialog/DialogActions.js +15 -17
  69. package/dist-es/dialog/DialogActions.js.map +1 -1
  70. package/dist-es/dialog/DialogCloseButton.css.js +4 -0
  71. package/dist-es/dialog/DialogCloseButton.css.js.map +1 -0
  72. package/dist-es/dialog/DialogCloseButton.js +31 -0
  73. package/dist-es/dialog/DialogCloseButton.js.map +1 -0
  74. package/dist-es/dialog/DialogContent.css.js +1 -1
  75. package/dist-es/dialog/DialogContent.js +20 -29
  76. package/dist-es/dialog/DialogContent.js.map +1 -1
  77. package/dist-es/dialog/DialogContext.js +9 -0
  78. package/dist-es/dialog/DialogContext.js.map +1 -0
  79. package/dist-es/dialog/DialogTitle.css.js +1 -1
  80. package/dist-es/dialog/DialogTitle.js +37 -42
  81. package/dist-es/dialog/DialogTitle.js.map +1 -1
  82. package/dist-es/dialog/useDialog.js +27 -0
  83. package/dist-es/dialog/useDialog.js.map +1 -0
  84. package/dist-es/dropdown-next/DropdownNext.css.js +4 -0
  85. package/dist-es/dropdown-next/DropdownNext.css.js.map +1 -0
  86. package/dist-es/dropdown-next/DropdownNext.js +177 -0
  87. package/dist-es/dropdown-next/DropdownNext.js.map +1 -0
  88. package/dist-es/dropdown-next/useDropdownNext.js +165 -0
  89. package/dist-es/dropdown-next/useDropdownNext.js.map +1 -0
  90. package/dist-es/index.js +7 -3
  91. package/dist-es/index.js.map +1 -1
  92. package/dist-es/list/Highlighter.js +1 -1
  93. package/dist-es/list/Highlighter.js.map +1 -1
  94. package/dist-es/list-next/useList.js.map +1 -1
  95. package/dist-es/logo/Logo.css.js +1 -1
  96. package/dist-es/logo/LogoImage.css.js +4 -0
  97. package/dist-es/logo/LogoImage.css.js.map +1 -0
  98. package/dist-es/logo/LogoImage.js +9 -0
  99. package/dist-es/logo/LogoImage.js.map +1 -1
  100. package/dist-es/logo/LogoSeparator.css.js +1 -1
  101. package/dist-es/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
  102. package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
  103. package/dist-es/navigation-item/NavigationItem.css.js +4 -0
  104. package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
  105. package/dist-es/navigation-item/NavigationItem.js +92 -0
  106. package/dist-es/navigation-item/NavigationItem.js.map +1 -0
  107. package/dist-types/combo-box-next/ComboBoxNext.d.ts +70 -0
  108. package/dist-types/combo-box-next/index.d.ts +1 -0
  109. package/dist-types/combo-box-next/useComboBox.d.ts +34 -0
  110. package/dist-types/combo-box-next/useComboboxPortal.d.ts +15 -0
  111. package/dist-types/combo-box-next/utils.d.ts +8 -0
  112. package/dist-types/dialog/Dialog.d.ts +17 -12
  113. package/dist-types/dialog/DialogActions.d.ts +1 -3
  114. package/dist-types/dialog/DialogCloseButton.d.ts +3 -0
  115. package/dist-types/dialog/DialogContent.d.ts +1 -3
  116. package/dist-types/dialog/{internal/DialogContext.d.ts → DialogContext.d.ts} +5 -2
  117. package/dist-types/dialog/DialogTitle.d.ts +7 -8
  118. package/dist-types/dialog/index.d.ts +4 -2
  119. package/dist-types/dialog/useDialog.d.ts +27 -0
  120. package/dist-types/dropdown-next/DropdownNext.d.ts +42 -0
  121. package/dist-types/dropdown-next/index.d.ts +1 -0
  122. package/dist-types/dropdown-next/useDropdownNext.d.ts +31 -0
  123. package/dist-types/index.d.ts +3 -1
  124. package/dist-types/list-next/useList.d.ts +2 -3
  125. package/dist-types/navigation-item/ExpansionIcon.d.ts +3 -0
  126. package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
  127. package/dist-types/navigation-item/index.d.ts +1 -0
  128. package/package.json +4 -4
  129. package/dist-cjs/dialog/internal/DialogContext.js.map +0 -1
  130. package/dist-cjs/nav-item/ExpansionButton.js.map +0 -1
  131. package/dist-cjs/nav-item/NavItem.css.js +0 -6
  132. package/dist-cjs/nav-item/NavItem.css.js.map +0 -1
  133. package/dist-cjs/nav-item/NavItem.js +0 -88
  134. package/dist-cjs/nav-item/NavItem.js.map +0 -1
  135. package/dist-es/dialog/internal/DialogContext.js +0 -6
  136. package/dist-es/dialog/internal/DialogContext.js.map +0 -1
  137. package/dist-es/nav-item/ExpansionButton.js.map +0 -1
  138. package/dist-es/nav-item/NavItem.css.js +0 -4
  139. package/dist-es/nav-item/NavItem.css.js.map +0 -1
  140. package/dist-es/nav-item/NavItem.js +0 -84
  141. package/dist-es/nav-item/NavItem.js.map +0 -1
  142. package/dist-types/nav-item/ExpansionButton.d.ts +0 -3
  143. package/dist-types/nav-item/NavItem.d.ts +0 -45
  144. package/dist-types/nav-item/index.d.ts +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../src/combo-box-next/utils.tsx"],"sourcesContent":["import { ListItemNext, ListItemNextProps } from \"../list-next\";\nimport { Highlighter } from \"../list\";\n\nexport const defaultFilter = (source: string[], filterValue?: string) =>\n source.filter((item: string) =>\n !filterValue ? item : item.toLowerCase().includes(filterValue.toLowerCase())\n );\n\nexport interface ComboBoxItemProps<T> extends Omit<ListItemNextProps, \"value\"> {\n value: T;\n matchPattern?: RegExp | string;\n}\n\nexport const DefaultListItem = ({\n value,\n matchPattern,\n onMouseDown,\n ...rest\n}: ComboBoxItemProps<string>) => {\n return (\n <ListItemNext value={value} onMouseDown={onMouseDown} {...rest}>\n <Highlighter matchPattern={matchPattern} text={value} />\n </ListItemNext>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAGO,MAAM,aAAgB,GAAA,CAAC,MAAkB,EAAA,WAAA,KAC9C,MAAO,CAAA,MAAA;AAAA,EAAO,CAAC,IACb,KAAA,CAAC,WAAc,GAAA,IAAA,GAAO,IAAK,CAAA,WAAA,EAAc,CAAA,QAAA,CAAS,WAAY,CAAA,WAAA,EAAa,CAAA;AAC7E,EAAA;AAOK,MAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAiC,KAAA;AAC/B,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,KAAA;AAAA,IAAc,WAAA;AAAA,IAA2B,GAAG,IAAA;AAAA,IACxD,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,MAAY,YAAA;AAAA,MAA4B,IAAM,EAAA,KAAA;AAAA,KAAO,CAAA;AAAA,GACxD,CAAA,CAAA;AAEJ;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltDialog {\n --dialog-background: var(--saltDialog-background, var(--salt-container-primary-background));\n --dialog-borderBottomWidth: var(--saltDialog-borderBottomWidth, 2px);\n --dialog-borderColor: var(--saltDialog-borderColor, var(--salt-container-primary-borderColor));\n --dialog-borderStyle: var(--saltDialog-borderStyle, var(--salt-container-borderStyle));\n --dialog-borderWidth: var(--saltDialog-borderColor, var(--salt-size-border));\n --dialog-boxShadow: var(--saltDialog-boxShadow, var(--salt-overlayable-shadow-modal));\n --dialog-margin: var(--saltDialog-margin, var(--salt-size-container-spacing));\n --dialog-padding: var(--saltDialog-padding, var(--salt-size-container-spacing));\n}\n\n.saltDialog {\n background: var(--dialog-background);\n border-color: var(--dialog-borderColor);\n border-width: var(--dialog-borderWidth);\n border-style: var(--dialog-borderStyle);\n border-bottom-width: var(--dialog-borderBottomWidth);\n display: flex;\n flex-direction: column;\n inset: 0; /* what does this do ? */\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--dialog-padding);\n position: relative;\n box-shadow: var(--saltDialog-boxShadow, var(--dialog-boxShadow));\n margin: var(--saltDialog-margin, var(--dialog-margin));\n}\n";
1
+ var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n position: relative;\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 max-height: 100%;\n max-width: 100%;\n box-shadow: var(--salt-overlayable-shadow-modal);\n z-index: calc(var(--salt-zIndex-appHeader) - 1);\n overflow-y: auto;\n}\n\n.salt-density-high {\n --saltDialog-minWidth: 240px;\n}\n\n.salt-density-medium {\n --saltDialog-minWidth: 320px;\n}\n\n.salt-density-low {\n --saltDialog-minWidth: 400px;\n}\n\n.salt-density-touch {\n --saltDialog-minWidth: 480px;\n}\n\n/* Styles applied to Dialog background overlay */\n.saltDialog-overlay {\n background: var(--salt-overlayable-background);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--salt-spacing-100);\n z-index: var(--salt-zIndex-modal);\n}\n\n/* Styles applied to Dialog when any status prop is applied */\n.saltDialog-withStatus {\n border-width: var(--salt-size-border);\n border-style: var(--salt-container-borderStyle);\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@media screen and (min-width: 480px) {\n .saltDialog {\n min-width: var(--saltDialog-minWidth);\n }\n\n .saltDialog-overlay {\n padding: var(--salt-spacing-400);\n }\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Dialog.css.js.map
@@ -1,83 +1,80 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useId } from '@salt-ds/core';
2
+ import { forwardRef, useState, useEffect, useMemo } from 'react';
3
3
  import { clsx } from 'clsx';
4
- import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
5
- import { DialogContext } from './internal/DialogContext.js';
6
- import { Scrim } from '../scrim/Scrim.js';
7
- import '../scrim/ScrimContext.js';
8
- import { useWindow as useWindow$1 } from '../window/WindowContext.js';
9
- import '../window/ElectronWindow.js';
10
- import { Portal } from '../portal/Portal.js';
4
+ import { FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
5
+ import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
11
6
  import { useWindow } from '@salt-ds/window';
12
7
  import { useComponentCssInjection } from '@salt-ds/styles';
8
+ import { useDialog } from './useDialog.js';
13
9
  import css_248z from './Dialog.css.js';
10
+ import { DialogContext } from './DialogContext.js';
14
11
 
15
12
  const withBaseName = makePrefixer("saltDialog");
16
13
  const Dialog = forwardRef(function Dialog2(props, ref) {
17
14
  const {
18
- autoFocusRef,
19
15
  children,
20
16
  className,
21
- height,
22
- id,
23
- onClose,
24
- open: openProp,
17
+ open = true,
18
+ onOpenChange,
25
19
  status,
26
- width,
27
- enableBackdropClick,
28
- disablePortal,
20
+ initialFocus,
29
21
  ...rest
30
22
  } = props;
23
+ const dialogId = useId() || "dialog";
31
24
  const targetWindow = useWindow();
32
25
  useComponentCssInjection({
33
26
  testId: "salt-dialog",
34
27
  css: css_248z,
35
28
  window: targetWindow
36
29
  });
37
- const Window = useWindow$1();
38
- const [open, setOpen] = useState(openProp);
30
+ const [showComponent, setShowComponent] = useState(false);
31
+ const { floating, context, getFloatingProps } = useDialog({
32
+ open,
33
+ onOpenChange
34
+ });
35
+ const floatingRef = useForkRef(floating, ref);
39
36
  useEffect(() => {
40
- setOpen(openProp);
41
- }, [openProp]);
42
- const dialogId = useId();
43
- const handleClose = useCallback(() => {
44
- onClose == null ? void 0 : onClose();
45
- setOpen(false);
46
- }, [onClose, setOpen]);
47
- const handleBackdropClick = useCallback(() => {
48
- if (enableBackdropClick) {
49
- handleClose();
37
+ if (open && !showComponent) {
38
+ setShowComponent(true);
50
39
  }
51
- }, [enableBackdropClick, handleClose]);
52
- const contentElementRef = useRef(null);
53
- const setContentElement = useCallback((node) => {
54
- contentElementRef.current = node;
55
- }, []);
56
- if (!open) {
57
- return null;
58
- }
59
- return /* @__PURE__ */ jsx(DialogContext.Provider, {
60
- value: { status, dialogId, setContentElement },
61
- children: /* @__PURE__ */ jsx(Portal, {
62
- disablePortal,
63
- children: /* @__PURE__ */ jsx(Scrim, {
64
- autoFocusRef,
65
- fallbackFocusRef: contentElementRef,
66
- open,
67
- closeWithEscape: true,
68
- onBackDropClick: handleBackdropClick,
69
- onClose: handleClose,
70
- "aria-labelledby": `${dialogId}-heading`,
71
- "aria-describedby": `${dialogId}-body`,
72
- children: /* @__PURE__ */ jsx(Window, {
73
- id,
40
+ }, [open, showComponent]);
41
+ const contextValue = useMemo(
42
+ () => ({ dialogId, status }),
43
+ [dialogId, status]
44
+ );
45
+ return /* @__PURE__ */ jsx(FloatingPortal, {
46
+ children: showComponent && /* @__PURE__ */ jsx(FloatingOverlay, {
47
+ className: withBaseName("overlay"),
48
+ lockScroll: true,
49
+ children: /* @__PURE__ */ jsx(FloatingFocusManager, {
50
+ context,
51
+ modal: true,
52
+ initialFocus,
53
+ children: /* @__PURE__ */ jsx(DialogContext.Provider, {
54
+ value: contextValue,
74
55
  children: /* @__PURE__ */ jsx("div", {
56
+ id: dialogId,
57
+ className: clsx(
58
+ withBaseName(),
59
+ {
60
+ [withBaseName("enterAnimation")]: open,
61
+ [withBaseName("exitAnimation")]: !open,
62
+ [withBaseName("withStatus")]: status,
63
+ [withBaseName(status)]: status
64
+ },
65
+ className
66
+ ),
67
+ onAnimationEnd: () => {
68
+ if (!open && showComponent) {
69
+ setShowComponent(false);
70
+ }
71
+ },
72
+ ref: floatingRef,
73
+ "aria-labelledby": `${dialogId}-heading`,
74
+ "aria-describedby": `${dialogId}-description`,
75
+ "aria-modal": "true",
76
+ ...getFloatingProps(),
75
77
  ...rest,
76
- className: clsx(withBaseName(), className, {
77
- [withBaseName("infoShadow")]: status === "info"
78
- }),
79
- style: { width },
80
- ref,
81
78
  children
82
79
  })
83
80
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import { makePrefixer, useId, ValidationStatus } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\nimport { Scrim, ScrimProps } from \"../scrim\";\nimport { useWindow as usePortalWindow } from \"../window\";\nimport { Portal } from \"../portal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogCss from \"./Dialog.css\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n autoFocusRef?: ScrimProps[\"autoFocusRef\"];\n height?: string | number;\n onClose?: () => void;\n open?: boolean;\n status?: ValidationStatus;\n width?: string | number;\n enableBackdropClick?: boolean;\n disablePortal?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\n/**\n * The Dialog is a window that contains text and interactive components.\n * By default, Dialog is non-modal, but supports modal behaviour as well.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref\n) {\n const {\n autoFocusRef,\n children,\n className,\n height,\n id,\n onClose,\n open: openProp,\n status,\n width,\n enableBackdropClick,\n disablePortal,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const Window = usePortalWindow();\n const [open, setOpen] = useState(openProp);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n const dialogId = useId();\n\n const handleClose = useCallback(() => {\n onClose?.();\n setOpen(false);\n }, [onClose, setOpen]);\n\n const handleBackdropClick = useCallback(() => {\n if (enableBackdropClick) {\n handleClose();\n }\n }, [enableBackdropClick, handleClose]);\n\n const contentElementRef = useRef<HTMLDivElement | null>(null);\n\n const setContentElement = useCallback((node: HTMLDivElement) => {\n contentElementRef.current = node;\n }, []);\n\n if (!open) {\n return null;\n }\n\n return (\n <DialogContext.Provider value={{ status, dialogId, setContentElement }}>\n <Portal disablePortal={disablePortal}>\n <Scrim\n autoFocusRef={autoFocusRef}\n fallbackFocusRef={contentElementRef}\n open={open}\n closeWithEscape\n onBackDropClick={handleBackdropClick}\n onClose={handleClose}\n aria-labelledby={`${dialogId}-heading`}\n aria-describedby={`${dialogId}-body`}\n >\n <Window id={id}>\n <div\n {...rest}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"infoShadow\")]: status === \"info\",\n })}\n style={{ width }}\n ref={ref}\n >\n {children}\n </div>\n </Window>\n </Scrim>\n </Portal>\n </DialogContext.Provider>\n );\n});\n"],"names":["Dialog","dialogCss","usePortalWindow"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAMvC,MAAM,MAAS,GAAA,UAAA,CAAwC,SAASA,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,MAAA;AAAA,IACA,KAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAASC,WAAgB,EAAA,CAAA;AAC/B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,QAAQ,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAAA,GAClB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAA,MAAM,WAAW,KAAM,EAAA,CAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AACA,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,GACZ,EAAA,CAAC,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,mBAAA,GAAsB,YAAY,MAAM;AAC5C,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAY,WAAA,EAAA,CAAA;AAAA,KACd;AAAA,GACC,EAAA,CAAC,mBAAqB,EAAA,WAAW,CAAC,CAAA,CAAA;AAErC,EAAM,MAAA,iBAAA,GAAoB,OAA8B,IAAI,CAAA,CAAA;AAE5D,EAAM,MAAA,iBAAA,GAAoB,WAAY,CAAA,CAAC,IAAyB,KAAA;AAC9D,IAAA,iBAAA,CAAkB,OAAU,GAAA,IAAA,CAAA;AAAA,GAC9B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAA,GAAA,CAAC,cAAc,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA;AAAA,IACnE,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MAAO,aAAA;AAAA,MACN,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,YAAA;AAAA,QACA,gBAAkB,EAAA,iBAAA;AAAA,QAClB,IAAA;AAAA,QACA,eAAe,EAAA,IAAA;AAAA,QACf,eAAiB,EAAA,mBAAA;AAAA,QACjB,OAAS,EAAA,WAAA;AAAA,QACT,mBAAiB,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,QACpB,oBAAkB,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,QAErB,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UAAO,EAAA;AAAA,UACN,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,YACE,GAAG,IAAA;AAAA,YACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,cACzC,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAW,KAAA,MAAA;AAAA,aAC1C,CAAA;AAAA,YACD,KAAA,EAAO,EAAE,KAAM,EAAA;AAAA,YACf,GAAA;AAAA,YAEC,QAAA;AAAA,WACH,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
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} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n} from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useForkRef,\n useId,\n ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useDialog } from \"./useDialog\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\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 * Status indicator\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\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 = true,\n onOpenChange,\n status,\n initialFocus,\n ...rest\n } = props;\n const dialogId = useId() || \"dialog\";\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { floating, context, getFloatingProps } = useDialog({\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 const contextValue = useMemo(\n () => ({ dialogId, status }),\n [dialogId, status]\n );\n\n return (\n <FloatingPortal>\n {showComponent && (\n <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n <FloatingFocusManager\n context={context}\n modal\n initialFocus={initialFocus}\n >\n <DialogContext.Provider value={contextValue}>\n <div\n id={dialogId}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(\"withStatus\")]: status,\n [withBaseName(status as string)]: status,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n ref={floatingRef}\n aria-labelledby={`${dialogId}-heading`}\n aria-describedby={`${dialogId}-description`}\n aria-modal=\"true\"\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </div>\n </DialogContext.Provider>\n </FloatingFocusManager>\n </FloatingOverlay>\n )}\n </FloatingPortal>\n );\n});\n"],"names":["Dialog","dialogCss"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var css_248z = "";
1
+ 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";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=DialogActions.css.js.map
@@ -7,23 +7,21 @@ import { useComponentCssInjection } from '@salt-ds/styles';
7
7
  import css_248z from './DialogActions.css.js';
8
8
 
9
9
  const withBaseName = makePrefixer("saltDialogActions");
10
- const DialogActions = forwardRef(
11
- function DialogActions2(props, ref) {
12
- const targetWindow = useWindow();
13
- useComponentCssInjection({
14
- testId: "salt-dialog-actions",
15
- css: css_248z,
16
- window: targetWindow
17
- });
18
- const { className, children, ...rest } = props;
19
- return /* @__PURE__ */ jsx("div", {
20
- ...rest,
21
- className: clsx(withBaseName(), className),
22
- ref,
23
- children
24
- });
25
- }
26
- );
10
+ const DialogActions = forwardRef(function DialogActions2(props, ref) {
11
+ const { children, className, ...rest } = props;
12
+ const targetWindow = useWindow();
13
+ useComponentCssInjection({
14
+ testId: "salt-dialog-actions",
15
+ css: css_248z,
16
+ window: targetWindow
17
+ });
18
+ return /* @__PURE__ */ jsx("div", {
19
+ className: clsx(withBaseName(), className),
20
+ ...rest,
21
+ ref,
22
+ children
23
+ });
24
+ });
27
25
 
28
26
  export { DialogActions };
29
27
  //# sourceMappingURL=DialogActions.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n function DialogActions(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n const { className, children, ...rest } = props;\n\n return (\n <div {...rest} className={clsx(withBaseName(), className)} ref={ref}>\n {children}\n </div>\n );\n }\n);\n"],"names":["DialogActions","dialogActionsCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,IAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.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 dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n\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"],"names":["DialogActions","dialogActionsCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA,CAG3B,SAASA,cAAAA,CAAc,OAAO,GAAK,EAAA;AACnC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,IAAM,GAAA;AAAA,IACxD,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -0,0 +1,4 @@
1
+ var css_248z = ".saltButton.saltDialogCloseButton {\n position: absolute;\n top: 0;\n right: 0;\n}\n";
2
+
3
+ export { css_248z as default };
4
+ //# sourceMappingURL=DialogCloseButton.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DialogCloseButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,31 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import clsx from 'clsx';
4
+ import { makePrefixer, Button } from '@salt-ds/core';
5
+ import { useWindow } from '@salt-ds/window';
6
+ import { useComponentCssInjection } from '@salt-ds/styles';
7
+ import { CloseIcon } from '@salt-ds/icons';
8
+ import css_248z from './DialogCloseButton.css.js';
9
+
10
+ const withBaseName = makePrefixer("saltDialogCloseButton");
11
+ const DialogCloseButton = forwardRef(
12
+ function DialogCloseButton2({ className, ...rest }, ref) {
13
+ const targetWindow = useWindow();
14
+ useComponentCssInjection({
15
+ testId: "salt-dialog-close-button",
16
+ css: css_248z,
17
+ window: targetWindow
18
+ });
19
+ return /* @__PURE__ */ jsx(Button, {
20
+ ref,
21
+ "aria-label": "Close dialog",
22
+ variant: "secondary",
23
+ className: clsx(withBaseName(), className),
24
+ ...rest,
25
+ children: /* @__PURE__ */ jsx(CloseIcon, {})
26
+ });
27
+ }
28
+ );
29
+
30
+ export { DialogCloseButton };
31
+ //# sourceMappingURL=DialogCloseButton.js.map
@@ -0,0 +1 @@
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":["DialogCloseButton","dialogCloseButtonCss"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,SAASA,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,cAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,8BAAC,SAAU,EAAA,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltDialogContent {\n --dialog-content-fontSize: var(--saltDialog-content-fontSize, var(--salt-text-fontSize));\n --dialog-content-lineHeight: var(--saltDialog-content-lineHeight, var(--salt-text-lineHeight));\n --dialog-content-paddingTop: var(--saltDialog-content-paddingTop, calc(var(--salt-size-unit) * 2));\n --dialog-content-paddingBottom: var(--saltDialog-content-paddingBottom, var(--salt-size-container-spacing));\n --dialog-content-minHeight: var(--saltDialog-content-minHeight, var(--dialog-content-fontSize));\n --dialog-content-color: var(--saltDialog-content-color, var(--salt-text-primary-foreground));\n}\n\n.saltDialogContent {\n flex: 1 1 auto;\n overflow: visible;\n font-weight: var(--salt-text-fontWeight);\n font-size: var(--dialog-content-fontSize);\n padding-top: var(--dialog-content-paddingTop);\n padding-bottom: var(--dialog-content-paddingBottom);\n min-height: var(--dialog-content-minHeight);\n line-height: var(--dialog-content-lineHeight);\n color: var(--dialog-content-color);\n}\n\n.saltDialogContent-leftGutter {\n padding-left: 32px;\n}\n";
1
+ var css_248z = ".saltDialogContent {\n color: var(--salt-text-primary-foreground);\n padding-inline: var(--salt-spacing-300);\n flex: 1 1 auto;\n min-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n overflow-y: auto;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=DialogContent.css.js.map
@@ -1,39 +1,30 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useForkRef } from '@salt-ds/core';
2
+ import { forwardRef } from 'react';
3
3
  import { clsx } from 'clsx';
4
- import { forwardRef, useContext } from 'react';
5
- import { DialogContext } from './internal/DialogContext.js';
4
+ import { makePrefixer } from '@salt-ds/core';
6
5
  import { useWindow } from '@salt-ds/window';
7
6
  import { useComponentCssInjection } from '@salt-ds/styles';
8
7
  import css_248z from './DialogContent.css.js';
8
+ import { useDialogContext } from './DialogContext.js';
9
9
 
10
10
  const withBaseName = makePrefixer("saltDialogContent");
11
- const DialogContent = forwardRef(
12
- function DialogContent2(props, ref) {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "salt-dialog-content",
16
- css: css_248z,
17
- window: targetWindow
18
- });
19
- const { children, className, ...rest } = props;
20
- const { status, dialogId, setContentElement } = useContext(DialogContext);
21
- const handleRef = useForkRef(ref, setContentElement);
22
- return /* @__PURE__ */ jsx("div", {
23
- ...rest,
24
- className: clsx(
25
- withBaseName(),
26
- {
27
- [withBaseName("leftGutter")]: !!status
28
- },
29
- className
30
- ),
31
- id: `${dialogId}-body`,
32
- ref: handleRef,
33
- children
34
- });
35
- }
36
- );
11
+ const DialogContent = forwardRef(function DialogContent2(props, ref) {
12
+ const { children, className, ...rest } = props;
13
+ const { dialogId } = useDialogContext();
14
+ const targetWindow = useWindow();
15
+ useComponentCssInjection({
16
+ testId: "salt-dialog-content",
17
+ css: css_248z,
18
+ window: targetWindow
19
+ });
20
+ return /* @__PURE__ */ jsx("div", {
21
+ id: `${dialogId}-description`,
22
+ className: clsx(withBaseName(), className),
23
+ ...rest,
24
+ ref,
25
+ children
26
+ });
27
+ });
37
28
 
38
29
  export { DialogContent };
39
30
  //# 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":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;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,GAAI,WAAW,aAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,IAAA;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":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA,CAG3B,SAASA,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,GAAI,gBAAiB,EAAA,CAAA;AAEtC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,IAAI,CAAG,EAAA,QAAA,CAAA,YAAA,CAAA;AAAA,IACP,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACxC,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -0,0 +1,9 @@
1
+ import { createContext, useContext } from 'react';
2
+
3
+ const DialogContext = createContext({});
4
+ const useDialogContext = () => {
5
+ return useContext(DialogContext);
6
+ };
7
+
8
+ export { DialogContext, useDialogContext };
9
+ //# 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":[],"mappings":";;AAGa,MAAA,aAAA,GAAgB,aAG1B,CAAA,EAAE,EAAA;AAEE,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA,CAAA;AACjC;;;;"}
@@ -1,4 +1,4 @@
1
- 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";
1
+ 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";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=DialogTitle.css.js.map
@@ -1,51 +1,46 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, Button, StatusIndicator, H1 } from '@salt-ds/core';
3
- import { CloseIcon } from '@salt-ds/icons';
4
- import { clsx } from 'clsx';
5
- import { forwardRef, useContext } from 'react';
6
- import { DialogContext } from './internal/DialogContext.js';
2
+ import clsx from 'clsx';
3
+ import { makePrefixer, H2, StatusIndicator } from '@salt-ds/core';
4
+ import { useDialogContext } from './DialogContext.js';
7
5
  import { useWindow } from '@salt-ds/window';
8
6
  import { useComponentCssInjection } from '@salt-ds/styles';
9
7
  import css_248z from './DialogTitle.css.js';
10
8
 
11
9
  const withBaseName = makePrefixer("saltDialogTitle");
12
- const DialogTitle = forwardRef(
13
- function DialogTitle2(props, ref) {
14
- const targetWindow = useWindow();
15
- useComponentCssInjection({
16
- testId: "salt-dialog-title",
17
- css: css_248z,
18
- window: targetWindow
19
- });
20
- const { children, className, onClose, ...rest } = props;
21
- const { status, dialogId } = useContext(DialogContext);
22
- return /* @__PURE__ */ jsxs("div", {
23
- className: clsx(withBaseName(), className),
24
- ref,
25
- ...rest,
26
- children: [
27
- onClose && /* @__PURE__ */ jsx(Button, {
28
- className: withBaseName("close"),
29
- onClick: onClose,
30
- variant: "secondary",
31
- children: /* @__PURE__ */ jsx(CloseIcon, {
32
- "aria-label": "close dialog",
33
- className: withBaseName("closeIcon")
34
- })
35
- }),
36
- status && /* @__PURE__ */ jsx(StatusIndicator, {
37
- className: withBaseName("statusIndicator"),
38
- status
39
- }),
40
- /* @__PURE__ */ jsx(H1, {
41
- id: `${dialogId}-heading`,
42
- className: withBaseName("text"),
43
- children
44
- })
45
- ]
46
- });
47
- }
48
- );
10
+ const DialogTitle = ({
11
+ children,
12
+ className,
13
+ accent,
14
+ status: statusProp,
15
+ ...rest
16
+ }) => {
17
+ const { dialogId, status: statusContext } = useDialogContext();
18
+ const targetWindow = useWindow();
19
+ useComponentCssInjection({
20
+ testId: "salt-dialog-title",
21
+ css: css_248z,
22
+ window: targetWindow
23
+ });
24
+ const status = statusProp || statusContext;
25
+ return /* @__PURE__ */ jsxs(H2, {
26
+ id: `${dialogId}-heading`,
27
+ className: clsx(
28
+ withBaseName(),
29
+ {
30
+ [withBaseName("withAccent")]: accent && !status,
31
+ [withBaseName(status)]: !!status
32
+ },
33
+ className
34
+ ),
35
+ ...rest,
36
+ children: [
37
+ status && /* @__PURE__ */ jsx(StatusIndicator, {
38
+ status
39
+ }),
40
+ children
41
+ ]
42
+ });
43
+ };
49
44
 
50
45
  export { DialogTitle };
51
46
  //# 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":["DialogTitle","dialogTitleCss"],"mappings":";;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;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,GAAI,WAAW,aAAa,CAAA,CAAA;AAErD,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC5D,QAAA,EAAA;AAAA,QAAA,OAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,OAAS,EAAA,OAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,YAAW,EAAA,cAAA;AAAA,YACX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,WACrC,CAAA;AAAA,SACF,CAAA;AAAA,QAED,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UACzC,MAAA;AAAA,SACF,CAAA;AAAA,wBAED,GAAA,CAAA,EAAA,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":["dialogTitleCss"],"mappings":";;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,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,KAAkB,gBAAiB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAc,IAAA,aAAA,CAAA;AAE7B,EAAA,uBACG,IAAA,CAAA,EAAA,EAAA;AAAA,IACC,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,IACP,SAAW,EAAA,IAAA;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,oBAAW,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,27 @@
1
+ import { useClick, useRole, useDismiss, useInteractions } from '@floating-ui/react';
2
+ import { useFloatingUI } from '@salt-ds/core';
3
+
4
+ function useDialog(props) {
5
+ const { open, onOpenChange } = props;
6
+ const { context, floating } = useFloatingUI({
7
+ open,
8
+ onOpenChange
9
+ });
10
+ const click = useClick(context);
11
+ const role = useRole(context);
12
+ const dismiss = useDismiss(context);
13
+ const { getFloatingProps, getReferenceProps } = useInteractions([
14
+ role,
15
+ dismiss,
16
+ click
17
+ ]);
18
+ return {
19
+ getFloatingProps,
20
+ getReferenceProps,
21
+ floating,
22
+ context
23
+ };
24
+ }
25
+
26
+ export { useDialog };
27
+ //# 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":[],"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,GAAI,aAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQ,SAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAO,QAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAU,WAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAI,eAAgB,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;;;;"}
@@ -0,0 +1,4 @@
1
+ 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 {\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}\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";
2
+
3
+ export { css_248z as default };
4
+ //# sourceMappingURL=DropdownNext.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DropdownNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}