@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.
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js +6 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +1 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.js +177 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -0
- package/dist-cjs/combo-box-next/useComboBox.js +137 -0
- package/dist-cjs/combo-box-next/useComboBox.js.map +1 -0
- package/dist-cjs/combo-box-next/useComboboxPortal.js +69 -0
- package/dist-cjs/combo-box-next/useComboboxPortal.js.map +1 -0
- package/dist-cjs/combo-box-next/utils.js +40 -0
- package/dist-cjs/combo-box-next/utils.js.map +1 -0
- package/dist-cjs/dialog/Dialog.css.js +1 -1
- package/dist-cjs/dialog/Dialog.js +53 -56
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.css.js +1 -1
- package/dist-cjs/dialog/DialogActions.js +15 -17
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.css.js +6 -0
- package/dist-cjs/dialog/DialogCloseButton.css.js.map +1 -0
- package/dist-cjs/dialog/DialogCloseButton.js +39 -0
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -0
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/dialog/DialogContent.js +20 -29
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/{internal/DialogContext.js → DialogContext.js} +4 -0
- package/dist-cjs/dialog/DialogContext.js.map +1 -0
- package/dist-cjs/dialog/DialogTitle.css.js +1 -1
- package/dist-cjs/dialog/DialogTitle.js +40 -41
- package/dist-cjs/dialog/DialogTitle.js.map +1 -1
- package/dist-cjs/dialog/useDialog.js +31 -0
- package/dist-cjs/dialog/useDialog.js.map +1 -0
- package/dist-cjs/dropdown-next/DropdownNext.css.js +6 -0
- package/dist-cjs/dropdown-next/DropdownNext.css.js.map +1 -0
- package/dist-cjs/dropdown-next/DropdownNext.js +181 -0
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -0
- package/dist-cjs/dropdown-next/useDropdownNext.js +169 -0
- package/dist-cjs/dropdown-next/useDropdownNext.js.map +1 -0
- package/dist-cjs/index.js +15 -6
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list/Highlighter.js +1 -1
- package/dist-cjs/list/Highlighter.js.map +1 -1
- package/dist-cjs/list-next/useList.js.map +1 -1
- package/dist-cjs/logo/Logo.css.js +1 -1
- package/dist-cjs/logo/LogoImage.css.js +6 -0
- package/dist-cjs/logo/LogoImage.css.js.map +1 -0
- package/dist-cjs/logo/LogoImage.js +9 -0
- package/dist-cjs/logo/LogoImage.js.map +1 -1
- package/dist-cjs/logo/LogoSeparator.css.js +1 -1
- package/dist-cjs/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.js +96 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
- package/dist-es/combo-box-next/ComboBoxNext.css.js +4 -0
- package/dist-es/combo-box-next/ComboBoxNext.css.js.map +1 -0
- package/dist-es/combo-box-next/ComboBoxNext.js +173 -0
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -0
- package/dist-es/combo-box-next/useComboBox.js +133 -0
- package/dist-es/combo-box-next/useComboBox.js.map +1 -0
- package/dist-es/combo-box-next/useComboboxPortal.js +65 -0
- package/dist-es/combo-box-next/useComboboxPortal.js.map +1 -0
- package/dist-es/combo-box-next/utils.js +35 -0
- package/dist-es/combo-box-next/utils.js.map +1 -0
- package/dist-es/dialog/Dialog.css.js +1 -1
- package/dist-es/dialog/Dialog.js +53 -56
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.css.js +1 -1
- package/dist-es/dialog/DialogActions.js +15 -17
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.css.js +4 -0
- package/dist-es/dialog/DialogCloseButton.css.js.map +1 -0
- package/dist-es/dialog/DialogCloseButton.js +31 -0
- package/dist-es/dialog/DialogCloseButton.js.map +1 -0
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/dialog/DialogContent.js +20 -29
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogContext.js +9 -0
- package/dist-es/dialog/DialogContext.js.map +1 -0
- package/dist-es/dialog/DialogTitle.css.js +1 -1
- package/dist-es/dialog/DialogTitle.js +37 -42
- package/dist-es/dialog/DialogTitle.js.map +1 -1
- package/dist-es/dialog/useDialog.js +27 -0
- package/dist-es/dialog/useDialog.js.map +1 -0
- package/dist-es/dropdown-next/DropdownNext.css.js +4 -0
- package/dist-es/dropdown-next/DropdownNext.css.js.map +1 -0
- package/dist-es/dropdown-next/DropdownNext.js +177 -0
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -0
- package/dist-es/dropdown-next/useDropdownNext.js +165 -0
- package/dist-es/dropdown-next/useDropdownNext.js.map +1 -0
- package/dist-es/index.js +7 -3
- package/dist-es/index.js.map +1 -1
- package/dist-es/list/Highlighter.js +1 -1
- package/dist-es/list/Highlighter.js.map +1 -1
- package/dist-es/list-next/useList.js.map +1 -1
- package/dist-es/logo/Logo.css.js +1 -1
- package/dist-es/logo/LogoImage.css.js +4 -0
- package/dist-es/logo/LogoImage.css.js.map +1 -0
- package/dist-es/logo/LogoImage.js +9 -0
- package/dist-es/logo/LogoImage.js.map +1 -1
- package/dist-es/logo/LogoSeparator.css.js +1 -1
- package/dist-es/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.css.js +4 -0
- package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.js +92 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -0
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +70 -0
- package/dist-types/combo-box-next/index.d.ts +1 -0
- package/dist-types/combo-box-next/useComboBox.d.ts +34 -0
- package/dist-types/combo-box-next/useComboboxPortal.d.ts +15 -0
- package/dist-types/combo-box-next/utils.d.ts +8 -0
- package/dist-types/dialog/Dialog.d.ts +17 -12
- package/dist-types/dialog/DialogActions.d.ts +1 -3
- package/dist-types/dialog/DialogCloseButton.d.ts +3 -0
- package/dist-types/dialog/DialogContent.d.ts +1 -3
- package/dist-types/dialog/{internal/DialogContext.d.ts → DialogContext.d.ts} +5 -2
- package/dist-types/dialog/DialogTitle.d.ts +7 -8
- package/dist-types/dialog/index.d.ts +4 -2
- package/dist-types/dialog/useDialog.d.ts +27 -0
- package/dist-types/dropdown-next/DropdownNext.d.ts +42 -0
- package/dist-types/dropdown-next/index.d.ts +1 -0
- package/dist-types/dropdown-next/useDropdownNext.d.ts +31 -0
- package/dist-types/index.d.ts +3 -1
- package/dist-types/list-next/useList.d.ts +2 -3
- package/dist-types/navigation-item/ExpansionIcon.d.ts +3 -0
- package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
- package/dist-types/navigation-item/index.d.ts +1 -0
- package/package.json +4 -4
- package/dist-cjs/dialog/internal/DialogContext.js.map +0 -1
- package/dist-cjs/nav-item/ExpansionButton.js.map +0 -1
- package/dist-cjs/nav-item/NavItem.css.js +0 -6
- package/dist-cjs/nav-item/NavItem.css.js.map +0 -1
- package/dist-cjs/nav-item/NavItem.js +0 -88
- package/dist-cjs/nav-item/NavItem.js.map +0 -1
- package/dist-es/dialog/internal/DialogContext.js +0 -6
- package/dist-es/dialog/internal/DialogContext.js.map +0 -1
- package/dist-es/nav-item/ExpansionButton.js.map +0 -1
- package/dist-es/nav-item/NavItem.css.js +0 -4
- package/dist-es/nav-item/NavItem.css.js.map +0 -1
- package/dist-es/nav-item/NavItem.js +0 -84
- package/dist-es/nav-item/NavItem.js.map +0 -1
- package/dist-types/nav-item/ExpansionButton.d.ts +0 -3
- package/dist-types/nav-item/NavItem.d.ts +0 -45
- 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
|
|
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
|
package/dist-es/dialog/Dialog.js
CHANGED
|
@@ -1,83 +1,80 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { forwardRef, useState, useEffect, useMemo } from 'react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
onClose,
|
|
24
|
-
open: openProp,
|
|
17
|
+
open = true,
|
|
18
|
+
onOpenChange,
|
|
25
19
|
status,
|
|
26
|
-
|
|
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
|
|
38
|
-
const
|
|
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
|
-
|
|
41
|
-
|
|
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
|
-
}, [
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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 {
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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\";\
|
|
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 @@
|
|
|
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
|
|
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 {
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
|
-
import {
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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 {
|
|
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 @@
|
|
|
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
|
|
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
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
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 =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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 {
|
|
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":";;;;"}
|