@salt-ds/lab 1.0.0-alpha.34 → 1.0.0-alpha.36
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/css/salt-lab.css +253 -192
- 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 +31 -3
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.js +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-cjs/index.js +0 -14
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/OptionList.css.js +1 -1
- package/dist-cjs/overlay/Overlay.css.js +1 -1
- package/dist-cjs/overlay/Overlay.js +1 -7
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +18 -24
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelBase.js +2 -4
- package/dist-cjs/overlay/OverlayPanelBase.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +6 -0
- package/dist-cjs/pill-input/PillInput.css.js.map +1 -0
- package/dist-cjs/pill-input/PillInput.js +256 -0
- package/dist-cjs/pill-input/PillInput.js.map +1 -0
- package/dist-cjs/pill-input/useTruncatePills.js +85 -0
- package/dist-cjs/pill-input/useTruncatePills.js.map +1 -0
- package/dist-cjs/tabs/Tab.js +1 -1
- package/dist-cjs/tabs/Tab.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextContext.js.map +1 -1
- package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabstripNext.js +23 -21
- package/dist-cjs/tabs-next/TabstripNext.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +40 -0
- package/dist-cjs/utils/useValueEffect.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 +32 -4
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-es/dropdown-next/DropdownNext.js +1 -1
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-es/index.js +0 -6
- package/dist-es/index.js.map +1 -1
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/OptionList.css.js +1 -1
- package/dist-es/overlay/Overlay.css.js +1 -1
- package/dist-es/overlay/Overlay.js +1 -7
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.js +19 -25
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelBase.js +2 -4
- package/dist-es/overlay/OverlayPanelBase.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +4 -0
- package/dist-es/pill-input/PillInput.css.js.map +1 -0
- package/dist-es/pill-input/PillInput.js +252 -0
- package/dist-es/pill-input/PillInput.js.map +1 -0
- package/dist-es/pill-input/useTruncatePills.js +81 -0
- package/dist-es/pill-input/useTruncatePills.js.map +1 -0
- package/dist-es/tabs/Tab.js +1 -1
- package/dist-es/tabs/Tab.js.map +1 -1
- package/dist-es/tabs-next/TabNextContext.js.map +1 -1
- package/dist-es/tabs-next/TabstripNext.css.js +1 -1
- package/dist-es/tabs-next/TabstripNext.js +23 -21
- package/dist-es/tabs-next/TabstripNext.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +36 -0
- package/dist-es/utils/useValueEffect.js.map +1 -0
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +3 -3
- package/dist-types/index.d.ts +0 -1
- package/dist-types/pill-input/PillInput.d.ts +48 -0
- package/dist-types/pill-input/index.d.ts +1 -0
- package/dist-types/pill-input/useTruncatePills.d.ts +8 -0
- package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
- package/dist-types/tabs-next/TabNextContext.d.ts +2 -2
- package/dist-types/utils/useValueEffect.d.ts +4 -0
- package/package.json +2 -2
- package/dist-cjs/dialog/Dialog.css.js +0 -6
- package/dist-cjs/dialog/Dialog.css.js.map +0 -1
- package/dist-cjs/dialog/Dialog.js +0 -115
- package/dist-cjs/dialog/Dialog.js.map +0 -1
- package/dist-cjs/dialog/DialogActions.css.js +0 -6
- package/dist-cjs/dialog/DialogActions.css.js.map +0 -1
- package/dist-cjs/dialog/DialogActions.js +0 -33
- package/dist-cjs/dialog/DialogActions.js.map +0 -1
- package/dist-cjs/dialog/DialogCloseButton.css.js +0 -6
- package/dist-cjs/dialog/DialogCloseButton.css.js.map +0 -1
- package/dist-cjs/dialog/DialogCloseButton.js +0 -39
- package/dist-cjs/dialog/DialogCloseButton.js.map +0 -1
- package/dist-cjs/dialog/DialogContent.css.js +0 -6
- package/dist-cjs/dialog/DialogContent.css.js.map +0 -1
- package/dist-cjs/dialog/DialogContent.js +0 -45
- package/dist-cjs/dialog/DialogContent.js.map +0 -1
- package/dist-cjs/dialog/DialogContext.js +0 -17
- package/dist-cjs/dialog/DialogContext.js.map +0 -1
- package/dist-cjs/dialog/DialogHeader.css.js +0 -6
- package/dist-cjs/dialog/DialogHeader.css.js.map +0 -1
- package/dist-cjs/dialog/DialogHeader.js +0 -67
- package/dist-cjs/dialog/DialogHeader.js.map +0 -1
- package/dist-es/dialog/Dialog.css.js +0 -4
- package/dist-es/dialog/Dialog.css.js.map +0 -1
- package/dist-es/dialog/Dialog.js +0 -110
- package/dist-es/dialog/Dialog.js.map +0 -1
- package/dist-es/dialog/DialogActions.css.js +0 -4
- package/dist-es/dialog/DialogActions.css.js.map +0 -1
- package/dist-es/dialog/DialogActions.js +0 -29
- package/dist-es/dialog/DialogActions.js.map +0 -1
- package/dist-es/dialog/DialogCloseButton.css.js +0 -4
- package/dist-es/dialog/DialogCloseButton.css.js.map +0 -1
- package/dist-es/dialog/DialogCloseButton.js +0 -31
- package/dist-es/dialog/DialogCloseButton.js.map +0 -1
- package/dist-es/dialog/DialogContent.css.js +0 -4
- package/dist-es/dialog/DialogContent.css.js.map +0 -1
- package/dist-es/dialog/DialogContent.js +0 -41
- package/dist-es/dialog/DialogContent.js.map +0 -1
- package/dist-es/dialog/DialogContext.js +0 -12
- package/dist-es/dialog/DialogContext.js.map +0 -1
- package/dist-es/dialog/DialogHeader.css.js +0 -4
- package/dist-es/dialog/DialogHeader.css.js.map +0 -1
- package/dist-es/dialog/DialogHeader.js +0 -59
- package/dist-es/dialog/DialogHeader.js.map +0 -1
- package/dist-types/dialog/Dialog.d.ts +0 -46
- package/dist-types/dialog/DialogActions.d.ts +0 -8
- package/dist-types/dialog/DialogCloseButton.d.ts +0 -2
- package/dist-types/dialog/DialogContent.d.ts +0 -8
- package/dist-types/dialog/DialogContext.d.ts +0 -8
- package/dist-types/dialog/DialogHeader.d.ts +0 -22
- package/dist-types/dialog/index.d.ts +0 -6
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var clsx = require('clsx');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var DialogContext = require('./DialogContext.js');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var DialogHeader$1 = require('./DialogHeader.css.js');
|
|
12
|
-
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
|
|
16
|
-
|
|
17
|
-
const withBaseName = core.makePrefixer("saltDialogHeader");
|
|
18
|
-
const DialogHeader = ({
|
|
19
|
-
className,
|
|
20
|
-
header,
|
|
21
|
-
preheader,
|
|
22
|
-
disableAccent,
|
|
23
|
-
status: statusProp,
|
|
24
|
-
...rest
|
|
25
|
-
}) => {
|
|
26
|
-
const { status: statusContext, id } = DialogContext.useDialogContext();
|
|
27
|
-
const targetWindow = window.useWindow();
|
|
28
|
-
styles.useComponentCssInjection({
|
|
29
|
-
testId: "salt-dialog-header",
|
|
30
|
-
css: DialogHeader$1,
|
|
31
|
-
window: targetWindow
|
|
32
|
-
});
|
|
33
|
-
const status = statusProp != null ? statusProp : statusContext;
|
|
34
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
35
|
-
id,
|
|
36
|
-
className: clsx__default["default"](
|
|
37
|
-
withBaseName(),
|
|
38
|
-
{
|
|
39
|
-
[withBaseName("withAccent")]: !disableAccent && !status,
|
|
40
|
-
[withBaseName(status)]: !!status
|
|
41
|
-
},
|
|
42
|
-
className
|
|
43
|
-
),
|
|
44
|
-
...rest,
|
|
45
|
-
children: [
|
|
46
|
-
status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
|
|
47
|
-
status
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsxs(core.H2, {
|
|
50
|
-
className: withBaseName("header"),
|
|
51
|
-
children: [
|
|
52
|
-
preheader && /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
|
|
53
|
-
variant: "secondary",
|
|
54
|
-
className: withBaseName("preheader"),
|
|
55
|
-
children: preheader
|
|
56
|
-
}),
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
58
|
-
children: header
|
|
59
|
-
})
|
|
60
|
-
]
|
|
61
|
-
})
|
|
62
|
-
]
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
exports.DialogHeader = DialogHeader;
|
|
67
|
-
//# sourceMappingURL=DialogHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n H2,\n StatusIndicator,\n ValidationStatus,\n makePrefixer,\n Text,\n} from \"@salt-ds/core\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\ninterface DialogTitleProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Dialog\n */\n header: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n\n className?: string;\n}\n\nexport const DialogHeader = ({\n className,\n header,\n preheader,\n disableAccent,\n status: statusProp,\n ...rest\n}: DialogTitleProps) => {\n const { status: statusContext, id } = useDialogContext();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-header\",\n css: dialogTitleCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? (statusContext as ValidationStatus);\n\n return (\n <div\n id={id}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status)]: !!status,\n },\n className\n )}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <H2 className={withBaseName(\"header\")}>\n {preheader && (\n <Text variant=\"secondary\" className={withBaseName(\"preheader\")}>\n {preheader}\n </Text>\n )}\n <div>{header}</div>\n </H2>\n </div>\n );\n};\n"],"names":["makePrefixer","useDialogContext","useWindow","useComponentCssInjection","dialogTitleCss","jsxs","clsx","jsx","StatusIndicator","H2","Text"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAsB7C,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAOC,8BAAiB,EAAA,CAAA;AACvD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAe,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE9B,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAA;AAAA,IACA,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,QACjD,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAWC,cAAA,CAAAC,oBAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,sBAC3CH,eAAA,CAAAI,OAAA,EAAA;AAAA,QAAG,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QACjC,QAAA,EAAA;AAAA,UAAA,SAAA,oBACEF,cAAA,CAAAG,SAAA,EAAA;AAAA,YAAK,OAAQ,EAAA,WAAA;AAAA,YAAY,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YAC1D,QAAA,EAAA,SAAA;AAAA,WACH,CAAA;AAAA,0BAEDH,cAAA,CAAA,KAAA,EAAA;AAAA,YAAK,QAAA,EAAA,MAAA;AAAA,WAAO,CAAA;AAAA,SAAA;AAAA,OACf,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-spacing-300);\n padding-bottom: var(--salt-spacing-300);\n background: var(--salt-container-primary-background);\n box-shadow: var(--salt-overlayable-shadow-modal);\n overflow-y: auto;\n z-index: var(--salt-zIndex-drawer);\n height: min-content;\n border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner, 0);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths */\n.saltDialog-small-xs {\n width: 100%;\n max-height: 48%;\n}\n\n.saltDialog-small-sm {\n width: 56%;\n max-height: 48%;\n}\n\n.saltDialog-small-md {\n width: 36%;\n max-height: 48%;\n}\n\n.saltDialog-small-lg {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-small-xl {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n width: 100%;\n max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n width: 84%;\n max-height: 72%;\n}\n\n.saltDialog-medium-md {\n width: 68%;\n max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-large-xs {\n width: 100%;\n max-height: 84%;\n}\n\n.saltDialog-large-sm {\n width: 96%;\n max-height: 84%;\n}\n\n.saltDialog-large-md {\n width: 84%;\n max-height: 84%;\n}\n\n.saltDialog-large-lg {\n width: 72%;\n max-height: 84%;\n}\n\n.saltDialog-large-xl {\n width: 72%;\n max-height: 84%;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=Dialog.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/dist-es/dialog/Dialog.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useState, useEffect, useMemo } from 'react';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { useInteractions, useClick, useDismiss } from '@floating-ui/react';
|
|
5
|
-
import { makePrefixer, useId, useCurrentBreakpoint, useFloatingUI, useFloatingComponent, useForkRef, Scrim } from '@salt-ds/core';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
|
-
import css_248z from './Dialog.css.js';
|
|
9
|
-
import { DialogContext } from './DialogContext.js';
|
|
10
|
-
|
|
11
|
-
const ConditionalScrimWrapper = ({
|
|
12
|
-
condition,
|
|
13
|
-
children
|
|
14
|
-
}) => {
|
|
15
|
-
return condition ? /* @__PURE__ */ jsx(Scrim, {
|
|
16
|
-
fixed: true,
|
|
17
|
-
children
|
|
18
|
-
}) : /* @__PURE__ */ jsxs(Fragment, {
|
|
19
|
-
children: [
|
|
20
|
-
children,
|
|
21
|
-
" "
|
|
22
|
-
]
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
const withBaseName = makePrefixer("saltDialog");
|
|
26
|
-
const Dialog = forwardRef(function Dialog2(props, ref) {
|
|
27
|
-
var _a, _b;
|
|
28
|
-
const {
|
|
29
|
-
children,
|
|
30
|
-
className,
|
|
31
|
-
open = false,
|
|
32
|
-
onOpenChange,
|
|
33
|
-
status,
|
|
34
|
-
disableDismiss,
|
|
35
|
-
size = "medium",
|
|
36
|
-
disableScrim,
|
|
37
|
-
idProp,
|
|
38
|
-
...rest
|
|
39
|
-
} = props;
|
|
40
|
-
const targetWindow = useWindow();
|
|
41
|
-
useComponentCssInjection({
|
|
42
|
-
testId: "salt-dialog",
|
|
43
|
-
css: css_248z,
|
|
44
|
-
window: targetWindow
|
|
45
|
-
});
|
|
46
|
-
const id = useId(idProp);
|
|
47
|
-
const currentbreakpoint = useCurrentBreakpoint();
|
|
48
|
-
const [showComponent, setShowComponent] = useState(false);
|
|
49
|
-
const { context, floating, elements } = useFloatingUI({
|
|
50
|
-
open,
|
|
51
|
-
onOpenChange
|
|
52
|
-
});
|
|
53
|
-
const { getFloatingProps } = useInteractions([
|
|
54
|
-
useClick(context),
|
|
55
|
-
useDismiss(context, { enabled: !disableDismiss })
|
|
56
|
-
]);
|
|
57
|
-
const { Component: FloatingComponent } = useFloatingComponent();
|
|
58
|
-
const floatingRef = useForkRef(floating, ref);
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
if (open && !showComponent) {
|
|
61
|
-
setShowComponent(true);
|
|
62
|
-
}
|
|
63
|
-
if (!open && showComponent) {
|
|
64
|
-
const animate = setTimeout(() => {
|
|
65
|
-
setShowComponent(false);
|
|
66
|
-
}, 300);
|
|
67
|
-
return () => clearTimeout(animate);
|
|
68
|
-
}
|
|
69
|
-
}, [open, showComponent, setShowComponent]);
|
|
70
|
-
const contextValue = useMemo(() => ({ status, id }), [status, id]);
|
|
71
|
-
return /* @__PURE__ */ jsx(DialogContext.Provider, {
|
|
72
|
-
value: contextValue,
|
|
73
|
-
children: /* @__PURE__ */ jsx(ConditionalScrimWrapper, {
|
|
74
|
-
condition: open && !disableScrim,
|
|
75
|
-
children: /* @__PURE__ */ jsx(FloatingComponent, {
|
|
76
|
-
open: showComponent,
|
|
77
|
-
role: "dialog",
|
|
78
|
-
"aria-modal": "true",
|
|
79
|
-
"aria-labelledby": id,
|
|
80
|
-
ref: floatingRef,
|
|
81
|
-
width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
|
|
82
|
-
height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
|
|
83
|
-
focusManagerProps: {
|
|
84
|
-
context
|
|
85
|
-
},
|
|
86
|
-
className: clsx(
|
|
87
|
-
withBaseName(),
|
|
88
|
-
withBaseName(size, currentbreakpoint),
|
|
89
|
-
{
|
|
90
|
-
[withBaseName("enterAnimation")]: open,
|
|
91
|
-
[withBaseName("exitAnimation")]: !open,
|
|
92
|
-
[withBaseName(status)]: status
|
|
93
|
-
},
|
|
94
|
-
className
|
|
95
|
-
),
|
|
96
|
-
onAnimationEnd: () => {
|
|
97
|
-
if (!open && showComponent) {
|
|
98
|
-
setShowComponent(false);
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
...getFloatingProps(),
|
|
102
|
-
...rest,
|
|
103
|
-
children
|
|
104
|
-
})
|
|
105
|
-
})
|
|
106
|
-
});
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
export { ConditionalScrimWrapper, Dialog };
|
|
110
|
-
//# sourceMappingURL=Dialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n useEffect,\n useMemo,\n useState,\n ComponentProps,\n ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useCurrentBreakpoint,\n useForkRef,\n ValidationStatus,\n Scrim,\n useId,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n children?: ReactNode;\n condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The status of the Dialog\n * */\n status?: ValidationStatus;\n /**\n * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n * Default value is 0 (first tabbable element).\n * */\n initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n /**\n * Size of the Dialog\n * */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n /**\n * Optional id prop\n * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n * */\n idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref\n) {\n const {\n children,\n className,\n open = false,\n onOpenChange,\n status,\n disableDismiss,\n size = \"medium\",\n disableScrim,\n idProp,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const currentbreakpoint = useCurrentBreakpoint();\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { context, floating, elements } = useFloatingUI({\n open,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent, setShowComponent]);\n\n const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n return (\n <DialogContext.Provider value={contextValue}>\n <ConditionalScrimWrapper condition={open && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={id}\n ref={floatingRef}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(size, currentbreakpoint),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(status as string)]: status,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n </DialogContext.Provider>\n );\n});\n"],"names":["Dialog","dialogCss"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogActions.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
5
|
-
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
|
-
import css_248z from './DialogActions.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltDialogActions");
|
|
10
|
-
const DialogActions = forwardRef(
|
|
11
|
-
function DialogActions2(props, ref) {
|
|
12
|
-
const { children, className, ...rest } = props;
|
|
13
|
-
const targetWindow = useWindow();
|
|
14
|
-
useComponentCssInjection({
|
|
15
|
-
testId: "salt-dialog-actions",
|
|
16
|
-
css: css_248z,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
return /* @__PURE__ */ jsx("div", {
|
|
20
|
-
className: clsx(withBaseName(), className),
|
|
21
|
-
...rest,
|
|
22
|
-
ref,
|
|
23
|
-
children
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
export { DialogActions };
|
|
29
|
-
//# sourceMappingURL=DialogActions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Actions\n */\n children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n {children}\n </div>\n );\n }\n);\n"],"names":["DialogActions","dialogActionsCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,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,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogCloseButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,31 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DialogCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-close-button\",\n css: dialogCloseButtonCss,\n window: targetWindow,\n });\n\n return (\n <Button\n ref={ref}\n aria-label=\"Close dialog\"\n variant=\"secondary\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon />\n </Button>\n );\n }\n);\n"],"names":["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 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltDialogContent {\n color: var(--salt-content-primary-foreground);\n min-height: var(--salt-text-lineHeight);\n overflow-y: auto;\n background: var(--salt-container-primary-background);\n padding-bottom: var(--salt-spacing-50);\n\n margin-left: var(--salt-spacing-200);\n margin-right: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-100);\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n box-shadow: none;\n}\n\n.saltDialogContent-scroll {\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=DialogContent.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useState } from 'react';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
5
|
-
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
|
-
import css_248z from './DialogContent.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltDialogContent");
|
|
10
|
-
const DialogContent = forwardRef(
|
|
11
|
-
function DialogContent2(props, ref) {
|
|
12
|
-
const { children, className, ...rest } = props;
|
|
13
|
-
const [scrollTop, setScrollTop] = useState(0);
|
|
14
|
-
const handleScroll = (event) => {
|
|
15
|
-
setScrollTop(event.currentTarget.scrollTop);
|
|
16
|
-
};
|
|
17
|
-
const targetWindow = useWindow();
|
|
18
|
-
useComponentCssInjection({
|
|
19
|
-
testId: "salt-dialog-content",
|
|
20
|
-
css: css_248z,
|
|
21
|
-
window: targetWindow
|
|
22
|
-
});
|
|
23
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
24
|
-
children: [
|
|
25
|
-
/* @__PURE__ */ jsx("div", {
|
|
26
|
-
className: clsx({ [withBaseName("scroll")]: scrollTop > 0 })
|
|
27
|
-
}),
|
|
28
|
-
/* @__PURE__ */ jsx("div", {
|
|
29
|
-
className: clsx(withBaseName(), className),
|
|
30
|
-
onScroll: handleScroll,
|
|
31
|
-
...rest,
|
|
32
|
-
ref,
|
|
33
|
-
children
|
|
34
|
-
})
|
|
35
|
-
]
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
export { DialogContent };
|
|
41
|
-
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Content\n */\n children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const [scrollTop, setScrollTop] = useState(0);\n\n const handleScroll = (event: React.UIEvent<HTMLElement>) => {\n setScrollTop(event.currentTarget.scrollTop);\n };\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n return (\n <>\n <div className={clsx({ [withBaseName(\"scroll\")]: scrollTop > 0 })} />\n <div\n className={clsx(withBaseName(), className)}\n onScroll={handleScroll}\n {...rest}\n ref={ref}\n >\n {children}\n </div>\n </>\n );\n }\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AAC1D,MAAa,YAAA,CAAA,KAAA,CAAM,cAAc,SAAS,CAAA,CAAA;AAAA,KAC5C,CAAA;AAEA,IAAA,MAAM,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,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,KAAK,EAAE,CAAC,aAAa,QAAQ,CAAA,GAAI,SAAY,GAAA,CAAA,EAAG,CAAA;AAAA,SAAG,CAAA;AAAA,wBAClE,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,QAAU,EAAA,YAAA;AAAA,UACT,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext } from 'react';
|
|
2
|
-
|
|
3
|
-
const DialogContext = createContext({
|
|
4
|
-
status: void 0,
|
|
5
|
-
id: ""
|
|
6
|
-
});
|
|
7
|
-
const useDialogContext = () => {
|
|
8
|
-
return useContext(DialogContext);
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export { DialogContext, useDialogContext };
|
|
12
|
-
//# sourceMappingURL=DialogContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n status?: ValidationStatus;\n id: string | undefined;\n}>({\n status: undefined,\n id: \"\",\n});\n\nexport const useDialogContext = () => {\n return useContext(DialogContext);\n};\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,aAG1B,CAAA;AAAA,EACD,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,EAAI,EAAA,EAAA;AACN,CAAC,EAAA;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA,CAAA;AACjC;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n padding-bottom: var(--salt-spacing-100);\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n box-sizing: border-box;\n}\n\n.saltDialogHeader-header {\n margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogHeader-withAccent {\n position: relative;\n}\n\n.saltDialogHeader-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.saltDialogHeader-error::before {\n background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogHeader-info::before {\n background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogHeader-success::before {\n background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogHeader-warning::before {\n background: var(--salt-status-warning-borderColor);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=DialogHeader.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { makePrefixer, StatusIndicator, H2, Text } from '@salt-ds/core';
|
|
4
|
-
import { useDialogContext } from './DialogContext.js';
|
|
5
|
-
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
|
-
import css_248z from './DialogHeader.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltDialogHeader");
|
|
10
|
-
const DialogHeader = ({
|
|
11
|
-
className,
|
|
12
|
-
header,
|
|
13
|
-
preheader,
|
|
14
|
-
disableAccent,
|
|
15
|
-
status: statusProp,
|
|
16
|
-
...rest
|
|
17
|
-
}) => {
|
|
18
|
-
const { status: statusContext, id } = useDialogContext();
|
|
19
|
-
const targetWindow = useWindow();
|
|
20
|
-
useComponentCssInjection({
|
|
21
|
-
testId: "salt-dialog-header",
|
|
22
|
-
css: css_248z,
|
|
23
|
-
window: targetWindow
|
|
24
|
-
});
|
|
25
|
-
const status = statusProp != null ? statusProp : statusContext;
|
|
26
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
27
|
-
id,
|
|
28
|
-
className: clsx(
|
|
29
|
-
withBaseName(),
|
|
30
|
-
{
|
|
31
|
-
[withBaseName("withAccent")]: !disableAccent && !status,
|
|
32
|
-
[withBaseName(status)]: !!status
|
|
33
|
-
},
|
|
34
|
-
className
|
|
35
|
-
),
|
|
36
|
-
...rest,
|
|
37
|
-
children: [
|
|
38
|
-
status && /* @__PURE__ */ jsx(StatusIndicator, {
|
|
39
|
-
status
|
|
40
|
-
}),
|
|
41
|
-
/* @__PURE__ */ jsxs(H2, {
|
|
42
|
-
className: withBaseName("header"),
|
|
43
|
-
children: [
|
|
44
|
-
preheader && /* @__PURE__ */ jsx(Text, {
|
|
45
|
-
variant: "secondary",
|
|
46
|
-
className: withBaseName("preheader"),
|
|
47
|
-
children: preheader
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsx("div", {
|
|
50
|
-
children: header
|
|
51
|
-
})
|
|
52
|
-
]
|
|
53
|
-
})
|
|
54
|
-
]
|
|
55
|
-
});
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export { DialogHeader };
|
|
59
|
-
//# sourceMappingURL=DialogHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n H2,\n StatusIndicator,\n ValidationStatus,\n makePrefixer,\n Text,\n} from \"@salt-ds/core\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\ninterface DialogTitleProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Dialog\n */\n header: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n\n className?: string;\n}\n\nexport const DialogHeader = ({\n className,\n header,\n preheader,\n disableAccent,\n status: statusProp,\n ...rest\n}: DialogTitleProps) => {\n const { status: statusContext, id } = useDialogContext();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-header\",\n css: dialogTitleCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? (statusContext as ValidationStatus);\n\n return (\n <div\n id={id}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status)]: !!status,\n },\n className\n )}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <H2 className={withBaseName(\"header\")}>\n {preheader && (\n <Text variant=\"secondary\" className={withBaseName(\"preheader\")}>\n {preheader}\n </Text>\n )}\n <div>{header}</div>\n </H2>\n </div>\n );\n};\n"],"names":["dialogTitleCss"],"mappings":";;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAsB7C,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAO,gBAAiB,EAAA,CAAA;AACvD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAe,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE9B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,QACjD,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAW,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,sBAC3C,IAAA,CAAA,EAAA,EAAA;AAAA,QAAG,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QACjC,QAAA,EAAA;AAAA,UAAA,SAAA,oBACE,GAAA,CAAA,IAAA,EAAA;AAAA,YAAK,OAAQ,EAAA,WAAA;AAAA,YAAY,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YAC1D,QAAA,EAAA,SAAA;AAAA,WACH,CAAA;AAAA,0BAED,GAAA,CAAA,KAAA,EAAA;AAAA,YAAK,QAAA,EAAA,MAAA;AAAA,WAAO,CAAA;AAAA,SAAA;AAAA,OACf,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes, ComponentProps, ReactNode } from "react";
|
|
2
|
-
import { FloatingFocusManager } from "@floating-ui/react";
|
|
3
|
-
import { ValidationStatus } from "@salt-ds/core";
|
|
4
|
-
interface ConditionalScrimWrapperProps {
|
|
5
|
-
children?: ReactNode;
|
|
6
|
-
condition: boolean;
|
|
7
|
-
}
|
|
8
|
-
export declare const ConditionalScrimWrapper: ({ condition, children, }: ConditionalScrimWrapperProps) => JSX.Element;
|
|
9
|
-
export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
|
-
/**
|
|
11
|
-
* Display or hide the component.
|
|
12
|
-
*/
|
|
13
|
-
open?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Callback function triggered when open state changes.
|
|
16
|
-
*/
|
|
17
|
-
onOpenChange?: (open: boolean) => void;
|
|
18
|
-
/**
|
|
19
|
-
* The status of the Dialog
|
|
20
|
-
* */
|
|
21
|
-
status?: ValidationStatus;
|
|
22
|
-
/**
|
|
23
|
-
* Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.
|
|
24
|
-
* Default value is 0 (first tabbable element).
|
|
25
|
-
* */
|
|
26
|
-
initialFocus?: ComponentProps<typeof FloatingFocusManager>["initialFocus"];
|
|
27
|
-
/**
|
|
28
|
-
* Size of the Dialog
|
|
29
|
-
* */
|
|
30
|
-
size?: "small" | "medium" | "large";
|
|
31
|
-
/**
|
|
32
|
-
* Prevent the dialog closing on click away
|
|
33
|
-
* */
|
|
34
|
-
disableDismiss?: boolean;
|
|
35
|
-
/**
|
|
36
|
-
* Prevent Scrim from rendering
|
|
37
|
-
* */
|
|
38
|
-
disableScrim?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Optional id prop
|
|
41
|
-
* Used for accessibility purposes to announce the title and subtitle when using a screen reader
|
|
42
|
-
* */
|
|
43
|
-
idProp?: string;
|
|
44
|
-
}
|
|
45
|
-
export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
46
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes, ReactNode } from "react";
|
|
2
|
-
export interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
/**
|
|
4
|
-
* The content of Dialog Actions
|
|
5
|
-
*/
|
|
6
|
-
children?: ReactNode;
|
|
7
|
-
}
|
|
8
|
-
export declare const DialogActions: import("react").ForwardRefExoticComponent<DialogActionsProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes, ReactNode } from "react";
|
|
2
|
-
export interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
/**
|
|
4
|
-
* The content of Dialog Content
|
|
5
|
-
*/
|
|
6
|
-
children?: ReactNode;
|
|
7
|
-
}
|
|
8
|
-
export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export declare const DialogContext: import("react").Context<{
|
|
2
|
-
status?: "error" | "warning" | "success" | "info" | undefined;
|
|
3
|
-
id: string | undefined;
|
|
4
|
-
}>;
|
|
5
|
-
export declare const useDialogContext: () => {
|
|
6
|
-
status?: "error" | "warning" | "success" | "info" | undefined;
|
|
7
|
-
id: string | undefined;
|
|
8
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ReactNode, ComponentPropsWithoutRef } from "react";
|
|
2
|
-
import { ValidationStatus } from "@salt-ds/core";
|
|
3
|
-
interface DialogTitleProps extends ComponentPropsWithoutRef<"div"> {
|
|
4
|
-
/**
|
|
5
|
-
* The status of the Dialog
|
|
6
|
-
*/
|
|
7
|
-
status?: ValidationStatus | undefined;
|
|
8
|
-
/**
|
|
9
|
-
* Displays the accent bar in the Dialog Title */
|
|
10
|
-
disableAccent?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Displays the header at the top of the Dialog
|
|
13
|
-
*/
|
|
14
|
-
header: ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* Displays the preheader just above the header
|
|
17
|
-
**/
|
|
18
|
-
preheader?: ReactNode;
|
|
19
|
-
className?: string;
|
|
20
|
-
}
|
|
21
|
-
export declare const DialogHeader: ({ className, header, preheader, disableAccent, status: statusProp, ...rest }: DialogTitleProps) => JSX.Element;
|
|
22
|
-
export {};
|