@salt-ds/lab 1.0.0-alpha.33 → 1.0.0-alpha.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/salt-lab.css +101 -398
- package/dist-cjs/calendar/Calendar.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarCarousel.js +5 -29
- package/dist-cjs/calendar/internal/CalendarCarousel.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +18 -19
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +0 -2
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.js +74 -81
- package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarWeekHeader.css.js +1 -1
- package/dist-cjs/calendar/useCalendar.js +14 -8
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarDay.js +15 -5
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
- package/dist-cjs/calendar/useSelection.js.map +1 -1
- package/dist-cjs/combo-box-next/ComboBoxNext.js +36 -13
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-cjs/combo-box-next/useComboBoxNext.js +16 -15
- package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.js +7 -8
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-cjs/index.js +0 -18
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +3 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +16 -18
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/Option.js +10 -20
- package/dist-cjs/option/Option.js.map +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/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-es/calendar/Calendar.css.js +1 -1
- package/dist-es/calendar/internal/CalendarCarousel.css.js +1 -1
- package/dist-es/calendar/internal/CalendarCarousel.js +5 -29
- package/dist-es/calendar/internal/CalendarCarousel.js.map +1 -1
- package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +20 -21
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js +0 -2
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/internal/CalendarNavigation.css.js +1 -1
- package/dist-es/calendar/internal/CalendarNavigation.js +75 -82
- package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/internal/CalendarWeekHeader.css.js +1 -1
- package/dist-es/calendar/useCalendar.js +14 -8
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarDay.js +15 -5
- package/dist-es/calendar/useCalendarDay.js.map +1 -1
- package/dist-es/calendar/useSelection.js.map +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.js +36 -13
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-es/combo-box-next/useComboBoxNext.js +16 -15
- package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -1
- package/dist-es/dropdown-next/DropdownNext.js +8 -9
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-es/index.js +0 -8
- package/dist-es/index.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +3 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +16 -19
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/Option.js +11 -21
- package/dist-es/option/Option.js.map +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/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-types/calendar/internal/CalendarContext.d.ts +2 -2
- package/dist-types/calendar/internal/CalendarNavigation.d.ts +3 -7
- package/dist-types/calendar/useCalendarDay.d.ts +7 -4
- package/dist-types/calendar/useSelection.d.ts +4 -4
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -10
- package/dist-types/combo-box-next/useComboBoxNext.d.ts +6 -4
- package/dist-types/dropdown-next/DropdownNext.d.ts +49 -7
- package/dist-types/index.d.ts +0 -2
- package/dist-types/list-control/ListControlContext.d.ts +1 -1
- package/dist-types/list-control/ListControlState.d.ts +14 -12
- package/dist-types/option/Option.d.ts +0 -4
- package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
- package/dist-types/tabs-next/TabNextContext.d.ts +2 -2
- 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/DialogTitle.css.js +0 -6
- package/dist-cjs/dialog/DialogTitle.css.js.map +0 -1
- package/dist-cjs/dialog/DialogTitle.js +0 -67
- package/dist-cjs/dialog/DialogTitle.js.map +0 -1
- package/dist-cjs/drawer/Drawer.css.js +0 -6
- package/dist-cjs/drawer/Drawer.css.js.map +0 -1
- package/dist-cjs/drawer/Drawer.js +0 -104
- package/dist-cjs/drawer/Drawer.js.map +0 -1
- package/dist-cjs/drawer/DrawerCloseButton.css.js +0 -6
- package/dist-cjs/drawer/DrawerCloseButton.css.js.map +0 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +0 -44
- package/dist-cjs/drawer/DrawerCloseButton.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/DialogTitle.css.js +0 -4
- package/dist-es/dialog/DialogTitle.css.js.map +0 -1
- package/dist-es/dialog/DialogTitle.js +0 -59
- package/dist-es/dialog/DialogTitle.js.map +0 -1
- package/dist-es/drawer/Drawer.css.js +0 -4
- package/dist-es/drawer/Drawer.css.js.map +0 -1
- package/dist-es/drawer/Drawer.js +0 -100
- package/dist-es/drawer/Drawer.js.map +0 -1
- package/dist-es/drawer/DrawerCloseButton.css.js +0 -4
- package/dist-es/drawer/DrawerCloseButton.css.js.map +0 -1
- package/dist-es/drawer/DrawerCloseButton.js +0 -36
- package/dist-es/drawer/DrawerCloseButton.js.map +0 -1
- package/dist-types/calendar/useCalendar.d.ts +0 -60
- 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/DialogTitle.d.ts +0 -22
- package/dist-types/dialog/index.d.ts +0 -6
- package/dist-types/drawer/Drawer.d.ts +0 -28
- package/dist-types/drawer/DrawerCloseButton.d.ts +0 -2
- package/dist-types/drawer/index.d.ts +0 -2
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n useEffect,\n useMemo,\n useState,\n ComponentProps,\n ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useCurrentBreakpoint,\n useForkRef,\n ValidationStatus,\n Scrim,\n useId,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n children?: ReactNode;\n condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The status of the Dialog\n * */\n status?: ValidationStatus;\n /**\n * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n * Default value is 0 (first tabbable element).\n * */\n initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n /**\n * Size of the Dialog\n * */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n /**\n * Optional id prop\n * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n * */\n idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref\n) {\n const {\n children,\n className,\n open = false,\n onOpenChange,\n status,\n disableDismiss,\n size = \"medium\",\n disableScrim,\n idProp,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const currentbreakpoint = useCurrentBreakpoint();\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { context, floating, elements } = useFloatingUI({\n open,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent, setShowComponent]);\n\n const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n return (\n <DialogContext.Provider value={contextValue}>\n <ConditionalScrimWrapper condition={open && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={id}\n ref={floatingRef}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(size, currentbreakpoint),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(status as string)]: status,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n </DialogContext.Provider>\n );\n});\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltDialogActions {\n padding: var(--salt-spacing-300);\n padding-bottom: 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--salt-spacing-100);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=DialogActions.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogActions.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var core = require('@salt-ds/core');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var DialogActions$1 = require('./DialogActions.css.js');
|
|
12
|
-
|
|
13
|
-
const withBaseName = core.makePrefixer("saltDialogActions");
|
|
14
|
-
const DialogActions = React.forwardRef(
|
|
15
|
-
function DialogActions2(props, ref) {
|
|
16
|
-
const { children, className, ...rest } = props;
|
|
17
|
-
const targetWindow = window.useWindow();
|
|
18
|
-
styles.useComponentCssInjection({
|
|
19
|
-
testId: "salt-dialog-actions",
|
|
20
|
-
css: DialogActions$1,
|
|
21
|
-
window: targetWindow
|
|
22
|
-
});
|
|
23
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
24
|
-
className: clsx.clsx(withBaseName(), className),
|
|
25
|
-
...rest,
|
|
26
|
-
ref,
|
|
27
|
-
children
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
exports.DialogActions = DialogActions;
|
|
33
|
-
//# sourceMappingURL=DialogActions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Actions\n */\n children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogCloseButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var core = require('@salt-ds/core');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var icons = require('@salt-ds/icons');
|
|
12
|
-
var DialogCloseButton$1 = require('./DialogCloseButton.css.js');
|
|
13
|
-
|
|
14
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
|
|
17
|
-
|
|
18
|
-
const withBaseName = core.makePrefixer("saltDialogCloseButton");
|
|
19
|
-
const DialogCloseButton = React.forwardRef(
|
|
20
|
-
function DialogCloseButton2({ className, ...rest }, ref) {
|
|
21
|
-
const targetWindow = window.useWindow();
|
|
22
|
-
styles.useComponentCssInjection({
|
|
23
|
-
testId: "salt-dialog-close-button",
|
|
24
|
-
css: DialogCloseButton$1,
|
|
25
|
-
window: targetWindow
|
|
26
|
-
});
|
|
27
|
-
return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
28
|
-
ref,
|
|
29
|
-
"aria-label": "Close dialog",
|
|
30
|
-
variant: "secondary",
|
|
31
|
-
className: clsx__default["default"](withBaseName(), className),
|
|
32
|
-
...rest,
|
|
33
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
exports.DialogCloseButton = DialogCloseButton;
|
|
39
|
-
//# sourceMappingURL=DialogCloseButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DialogCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-close-button\",\n css: dialogCloseButtonCss,\n window: targetWindow,\n });\n\n return (\n <Button\n ref={ref}\n aria-label=\"Close dialog\"\n variant=\"secondary\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon />\n </Button>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogCloseButton","useWindow","useComponentCssInjection","dialogCloseButtonCss","jsx","Button","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAAC,gBAAA;AAAA,EAC/B,SAASC,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,mBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,cAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAAC,wBAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,yCAACC,eAAU,EAAA,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltDialogContent {\n color: var(--salt-content-primary-foreground);\n min-height: var(--salt-text-lineHeight);\n overflow-y: auto;\n background: var(--salt-container-primary-background);\n padding-bottom: var(--salt-spacing-50);\n\n margin-left: var(--salt-spacing-200);\n margin-right: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-100);\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n box-shadow: none;\n}\n\n.saltDialogContent-scroll {\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=DialogContent.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var core = require('@salt-ds/core');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var DialogContent$1 = require('./DialogContent.css.js');
|
|
12
|
-
|
|
13
|
-
const withBaseName = core.makePrefixer("saltDialogContent");
|
|
14
|
-
const DialogContent = React.forwardRef(
|
|
15
|
-
function DialogContent2(props, ref) {
|
|
16
|
-
const { children, className, ...rest } = props;
|
|
17
|
-
const [scrollTop, setScrollTop] = React.useState(0);
|
|
18
|
-
const handleScroll = (event) => {
|
|
19
|
-
setScrollTop(event.currentTarget.scrollTop);
|
|
20
|
-
};
|
|
21
|
-
const targetWindow = window.useWindow();
|
|
22
|
-
styles.useComponentCssInjection({
|
|
23
|
-
testId: "salt-dialog-content",
|
|
24
|
-
css: DialogContent$1,
|
|
25
|
-
window: targetWindow
|
|
26
|
-
});
|
|
27
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
30
|
-
className: clsx.clsx({ [withBaseName("scroll")]: scrollTop > 0 })
|
|
31
|
-
}),
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
33
|
-
className: clsx.clsx(withBaseName(), className),
|
|
34
|
-
onScroll: handleScroll,
|
|
35
|
-
...rest,
|
|
36
|
-
ref,
|
|
37
|
-
children
|
|
38
|
-
})
|
|
39
|
-
]
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
exports.DialogContent = DialogContent;
|
|
45
|
-
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Content\n */\n children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const [scrollTop, setScrollTop] = useState(0);\n\n const handleScroll = (event: React.UIEvent<HTMLElement>) => {\n setScrollTop(event.currentTarget.scrollTop);\n };\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n return (\n <>\n <div className={clsx({ [withBaseName(\"scroll\")]: scrollTop > 0 })} />\n <div\n className={clsx(withBaseName(), className)}\n onScroll={handleScroll}\n {...rest}\n ref={ref}\n >\n {children}\n </div>\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useState","useWindow","useComponentCssInjection","dialogContentCss","jsxs","Fragment","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AAC1D,MAAa,YAAA,CAAA,KAAA,CAAM,cAAc,SAAS,CAAA,CAAA;AAAA,KAC5C,CAAA;AAEA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAWC,UAAK,EAAE,CAAC,aAAa,QAAQ,CAAA,GAAI,SAAY,GAAA,CAAA,EAAG,CAAA;AAAA,SAAG,CAAA;AAAA,wBAClED,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,QAAU,EAAA,YAAA;AAAA,UACT,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
const DialogContext = React.createContext({
|
|
8
|
-
status: void 0,
|
|
9
|
-
id: ""
|
|
10
|
-
});
|
|
11
|
-
const useDialogContext = () => {
|
|
12
|
-
return React.useContext(DialogContext);
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
exports.DialogContext = DialogContext;
|
|
16
|
-
exports.useDialogContext = useDialogContext;
|
|
17
|
-
//# sourceMappingURL=DialogContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n status?: ValidationStatus;\n id: string | undefined;\n}>({\n status: undefined,\n id: \"\",\n});\n\nexport const useDialogContext = () => {\n return useContext(DialogContext);\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAGO,MAAM,gBAAgBA,mBAG1B,CAAA;AAAA,EACD,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,EAAI,EAAA,EAAA;AACN,CAAC,EAAA;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAOC,iBAAW,aAAa,CAAA,CAAA;AACjC;;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n padding-bottom: var(--salt-spacing-100);\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n box-sizing: border-box;\n}\n\n.saltDialogTitle-title {\n margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogTitle .saltStatusIndicator.saltIcon {\n --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogTitle-withAccent {\n position: relative;\n}\n\n.saltDialogTitle-withAccent::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: var(--salt-spacing-100);\n width: var(--salt-size-accent);\n background: var(--salt-accent-background);\n}\n\n.saltDialogTitle-error::before {\n background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogTitle-info::before {\n background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogTitle-success::before {\n background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogTitle-warning::before {\n background: var(--salt-status-warning-borderColor);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=DialogTitle.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogTitle.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var clsx = require('clsx');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var DialogContext = require('./DialogContext.js');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var DialogTitle$1 = require('./DialogTitle.css.js');
|
|
12
|
-
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
|
|
16
|
-
|
|
17
|
-
const withBaseName = core.makePrefixer("saltDialogTitle");
|
|
18
|
-
const DialogTitle = ({
|
|
19
|
-
className,
|
|
20
|
-
title,
|
|
21
|
-
subtitle,
|
|
22
|
-
disableAccent,
|
|
23
|
-
status: statusProp,
|
|
24
|
-
...rest
|
|
25
|
-
}) => {
|
|
26
|
-
const { status: statusContext, id } = DialogContext.useDialogContext();
|
|
27
|
-
const targetWindow = window.useWindow();
|
|
28
|
-
styles.useComponentCssInjection({
|
|
29
|
-
testId: "salt-dialog-title",
|
|
30
|
-
css: DialogTitle$1,
|
|
31
|
-
window: targetWindow
|
|
32
|
-
});
|
|
33
|
-
const status = statusProp != null ? statusProp : statusContext;
|
|
34
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
35
|
-
id,
|
|
36
|
-
className: clsx__default["default"](
|
|
37
|
-
withBaseName(),
|
|
38
|
-
{
|
|
39
|
-
[withBaseName("withAccent")]: !disableAccent && !status,
|
|
40
|
-
[withBaseName(status)]: !!status
|
|
41
|
-
},
|
|
42
|
-
className
|
|
43
|
-
),
|
|
44
|
-
...rest,
|
|
45
|
-
children: [
|
|
46
|
-
status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
|
|
47
|
-
status
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
50
|
-
children: [
|
|
51
|
-
subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
|
|
52
|
-
as: "label",
|
|
53
|
-
variant: "secondary",
|
|
54
|
-
children: subtitle
|
|
55
|
-
}),
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.H2, {
|
|
57
|
-
className: clsx__default["default"](withBaseName("title")),
|
|
58
|
-
children: title
|
|
59
|
-
})
|
|
60
|
-
]
|
|
61
|
-
})
|
|
62
|
-
]
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
exports.DialogTitle = DialogTitle;
|
|
67
|
-
//# sourceMappingURL=DialogTitle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n H2,\n StatusIndicator,\n ValidationStatus,\n makePrefixer,\n Text,\n} from \"@salt-ds/core\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\ninterface DialogTitleProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the Dialog Title in a H2 component\n */\n title: ReactNode;\n /**\n * Displays the Dialog Subtitle in a Label component\n **/\n subtitle?: ReactNode;\n\n className?: string;\n}\n\nexport const DialogTitle = ({\n className,\n title,\n subtitle,\n disableAccent,\n status: statusProp,\n ...rest\n}: DialogTitleProps) => {\n const { status: statusContext, id } = useDialogContext();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-title\",\n css: dialogTitleCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? (statusContext as ValidationStatus);\n\n return (\n <div\n id={id as string}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status)]: !!status,\n },\n className\n )}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <div>\n {subtitle && (\n <Text as={\"label\"} variant=\"secondary\">\n {subtitle}\n </Text>\n )}\n <H2 className={clsx(withBaseName(\"title\"))}>{title}</H2>\n </div>\n </div>\n );\n};\n"],"names":["makePrefixer","useDialogContext","useWindow","useComponentCssInjection","dialogTitleCss","jsxs","clsx","jsx","StatusIndicator","Text","H2"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAuB5C,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAOC,8BAAiB,EAAA,CAAA;AACvD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAe,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE9B,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAA;AAAA,IACA,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,QACjD,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAWC,cAAA,CAAAC,oBAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,sBAC3CH,eAAA,CAAA,KAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,UAAA,QAAA,oBACEE,cAAA,CAAAE,SAAA,EAAA;AAAA,YAAK,EAAI,EAAA,OAAA;AAAA,YAAS,OAAQ,EAAA,WAAA;AAAA,YACxB,QAAA,EAAA,QAAA;AAAA,WACH,CAAA;AAAA,0BAEDF,cAAA,CAAAG,OAAA,EAAA;AAAA,YAAG,SAAW,EAAAJ,wBAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,YAAI,QAAA,EAAA,KAAA;AAAA,WAAM,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n background: var(--drawer-background);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--salt-spacing-300);\n box-shadow: var(--salt-overlayable-shadow-modal);\n z-index: var(--salt-zIndex-drawer);\n position: fixed;\n top: 0;\n box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n left: 0;\n right: 0;\n bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n left: auto;\n right: 0;\n height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n left: 0;\n right: auto;\n height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-top);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=Drawer.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('@floating-ui/react');
|
|
9
|
-
var core = require('@salt-ds/core');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var styles = require('@salt-ds/styles');
|
|
12
|
-
var Drawer$1 = require('./Drawer.css.js');
|
|
13
|
-
|
|
14
|
-
const ConditionalScrimWrapper = ({
|
|
15
|
-
condition,
|
|
16
|
-
children
|
|
17
|
-
}) => {
|
|
18
|
-
return condition ? /* @__PURE__ */ jsxRuntime.jsxs(core.Scrim, {
|
|
19
|
-
fixed: true,
|
|
20
|
-
children: [
|
|
21
|
-
" ",
|
|
22
|
-
children,
|
|
23
|
-
" "
|
|
24
|
-
]
|
|
25
|
-
}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
26
|
-
children: [
|
|
27
|
-
children,
|
|
28
|
-
" "
|
|
29
|
-
]
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
const withBaseName = core.makePrefixer("saltDrawer");
|
|
33
|
-
const Drawer = React.forwardRef(function Drawer2(props, ref) {
|
|
34
|
-
var _a, _b;
|
|
35
|
-
const {
|
|
36
|
-
children,
|
|
37
|
-
className,
|
|
38
|
-
position = "left",
|
|
39
|
-
open = false,
|
|
40
|
-
onOpenChange,
|
|
41
|
-
variant = "primary",
|
|
42
|
-
disableDismiss,
|
|
43
|
-
disableScrim,
|
|
44
|
-
...rest
|
|
45
|
-
} = props;
|
|
46
|
-
const targetWindow = window.useWindow();
|
|
47
|
-
styles.useComponentCssInjection({
|
|
48
|
-
testId: "salt-drawer",
|
|
49
|
-
css: Drawer$1,
|
|
50
|
-
window: targetWindow
|
|
51
|
-
});
|
|
52
|
-
const [showComponent, setShowComponent] = React.useState(false);
|
|
53
|
-
const { Component: FloatingComponent } = core.useFloatingComponent();
|
|
54
|
-
const { context, floating, elements } = core.useFloatingUI({
|
|
55
|
-
open,
|
|
56
|
-
onOpenChange
|
|
57
|
-
});
|
|
58
|
-
const { getFloatingProps } = react.useInteractions([
|
|
59
|
-
react.useClick(context),
|
|
60
|
-
react.useDismiss(context, { enabled: !disableDismiss })
|
|
61
|
-
]);
|
|
62
|
-
const handleRef = core.useForkRef(floating, ref);
|
|
63
|
-
React.useEffect(() => {
|
|
64
|
-
if (open && !showComponent) {
|
|
65
|
-
setShowComponent(true);
|
|
66
|
-
}
|
|
67
|
-
if (!open && showComponent) {
|
|
68
|
-
const animate = setTimeout(() => {
|
|
69
|
-
setShowComponent(false);
|
|
70
|
-
}, 300);
|
|
71
|
-
return () => clearTimeout(animate);
|
|
72
|
-
}
|
|
73
|
-
}, [open, showComponent, setShowComponent]);
|
|
74
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ConditionalScrimWrapper, {
|
|
75
|
-
condition: open && !disableScrim,
|
|
76
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
|
|
77
|
-
open: showComponent,
|
|
78
|
-
ref: handleRef,
|
|
79
|
-
role: "dialog",
|
|
80
|
-
width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
|
|
81
|
-
height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
|
|
82
|
-
"aria-modal": "true",
|
|
83
|
-
focusManagerProps: {
|
|
84
|
-
context
|
|
85
|
-
},
|
|
86
|
-
className: clsx.clsx(
|
|
87
|
-
withBaseName(),
|
|
88
|
-
withBaseName(position),
|
|
89
|
-
{
|
|
90
|
-
[withBaseName("enterAnimation")]: open,
|
|
91
|
-
[withBaseName("exitAnimation")]: !open,
|
|
92
|
-
[withBaseName(variant)]: variant
|
|
93
|
-
},
|
|
94
|
-
className
|
|
95
|
-
),
|
|
96
|
-
...getFloatingProps(),
|
|
97
|
-
...rest,
|
|
98
|
-
children
|
|
99
|
-
})
|
|
100
|
-
});
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
exports.Drawer = Drawer;
|
|
104
|
-
//# sourceMappingURL=Drawer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n useEffect,\n useState,\n PropsWithChildren,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport {\n makePrefixer,\n Scrim,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n props,\n ref\n) {\n const {\n children,\n className,\n position = \"left\",\n open = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent, setShowComponent]);\n\n return (\n <ConditionalScrimWrapper condition={open && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n});\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,QAAA;AACF,CAAoC,KAAA;AAClC,EAAA,OAAO,4BAAaA,eAAA,CAAAC,UAAA,EAAA;AAAA,IAAM,KAAK,EAAA,IAAA;AAAA,IAAC,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE,QAAA;AAAA,MAAS,GAAA;AAAA,KAAA;AAAA,GAAC,CAAW,mBAAAD,eAAA,CAAAE,mBAAA,EAAA;AAAA,IAAG,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MAAS,GAAA;AAAA,KAAA;AAAA,GAAC,CAAA,CAAA;AACtE,CAAA,CAAA;AA6BA,MAAM,YAAA,GAAeC,kBAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,OACA,GACA,EAAA;AA/DF,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAgEE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,cAAA;AAAA,IACA,YAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AACxD,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA,CAAA;AAE9D,EAAA,MAAM,EAAE,OAAA,EAAS,QAAU,EAAA,QAAA,KAAaC,kBAAc,CAAA;AAAA,IACpD,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC3CC,eAAS,OAAO,CAAA;AAAA,IAChBC,iBAAW,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,gBAAgB,CAAA;AAAA,GACjD,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAEA,IAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,MAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAC/B,QAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,SACrB,GAAG,CAAA,CAAA;AACN,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA,CAAA;AAAA,KACnC;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAA,EAAe,gBAAgB,CAAC,CAAA,CAAA;AAE1C,EAAA,uBACGC,cAAA,CAAA,uBAAA,EAAA;AAAA,IAAwB,SAAA,EAAW,QAAQ,CAAC,YAAA;AAAA,IAC3C,QAAC,kBAAAA,cAAA,CAAA,iBAAA,EAAA;AAAA,MACC,IAAM,EAAA,aAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,IAAM,EAAA,QAAA;AAAA,MACN,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,MAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,MAC3B,YAAW,EAAA,MAAA;AAAA,MACX,iBAAmB,EAAA;AAAA,QACjB,OAAA;AAAA,OACF;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,QAAQ,CAAA;AAAA,QACrB;AAAA,UACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,UAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,UAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,gBAAiB,EAAA;AAAA,MACpB,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltDrawerCloseButton-container {\n position: relative;\n display: flex;\n justify-content: flex-end;\n}\n\n.saltButton-secondary.saltDrawerCloseButton {\n position: fixed;\n margin-top: calc(var(--salt-spacing-300) * -1);\n margin-right: calc(var(--salt-spacing-300) * -1);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=DrawerCloseButton.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerCloseButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var core = require('@salt-ds/core');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var icons = require('@salt-ds/icons');
|
|
12
|
-
var DrawerCloseButton$1 = require('./DrawerCloseButton.css.js');
|
|
13
|
-
|
|
14
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
|
|
17
|
-
|
|
18
|
-
const withBaseName = core.makePrefixer("saltDrawerCloseButton");
|
|
19
|
-
const DrawerCloseButton = React.forwardRef(
|
|
20
|
-
function DrawerCloseButton2({ className, ...rest }, ref) {
|
|
21
|
-
const targetWindow = window.useWindow();
|
|
22
|
-
styles.useComponentCssInjection({
|
|
23
|
-
testId: "salt-drawer-close-button",
|
|
24
|
-
css: DrawerCloseButton$1,
|
|
25
|
-
window: targetWindow
|
|
26
|
-
});
|
|
27
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
28
|
-
className: withBaseName("container"),
|
|
29
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
30
|
-
ref,
|
|
31
|
-
"aria-label": "Close Drawer",
|
|
32
|
-
variant: "secondary",
|
|
33
|
-
className: clsx__default["default"](withBaseName(), className),
|
|
34
|
-
...rest,
|
|
35
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
|
|
36
|
-
"aria-hidden": true
|
|
37
|
-
})
|
|
38
|
-
})
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
exports.DrawerCloseButton = DrawerCloseButton;
|
|
44
|
-
//# sourceMappingURL=DrawerCloseButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DrawerCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer-close-button\",\n css: drawerCloseButtonCss,\n window: targetWindow,\n });\n\n return (\n <div className={withBaseName(\"container\")}>\n <Button\n ref={ref}\n aria-label=\"Close Drawer\"\n variant=\"secondary\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DrawerCloseButton","useWindow","useComponentCssInjection","drawerCloseButtonCss","jsx","Button","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAAC,gBAAA;AAAA,EAC/B,SAASC,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,mBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACtC,QAAC,kBAAAA,cAAA,CAAAC,WAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAW,EAAA,cAAA;AAAA,QACX,OAAQ,EAAA,WAAA;AAAA,QACR,SAAW,EAAAC,wBAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAF,cAAA,CAAAG,eAAA,EAAA;AAAA,UAAU,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OACzB,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-spacing-300);\n padding-bottom: var(--salt-spacing-300);\n background: var(--salt-container-primary-background);\n box-shadow: var(--salt-overlayable-shadow-modal);\n overflow-y: auto;\n z-index: var(--salt-zIndex-drawer);\n height: min-content;\n border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);\n box-sizing: border-box;\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths */\n.saltDialog-small-xs {\n width: 100%;\n max-height: 48%;\n}\n\n.saltDialog-small-sm {\n width: 56%;\n max-height: 48%;\n}\n\n.saltDialog-small-md {\n width: 36%;\n max-height: 48%;\n}\n\n.saltDialog-small-lg {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-small-xl {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n width: 100%;\n max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n width: 84%;\n max-height: 72%;\n}\n\n.saltDialog-medium-md {\n width: 68%;\n max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-large-xs {\n width: 100%;\n max-height: 84%;\n}\n\n.saltDialog-large-sm {\n width: 96%;\n max-height: 84%;\n}\n\n.saltDialog-large-md {\n width: 84%;\n max-height: 84%;\n}\n\n.saltDialog-large-lg {\n width: 72%;\n max-height: 84%;\n}\n\n.saltDialog-large-xl {\n width: 72%;\n max-height: 84%;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=Dialog.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
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
|