@uva-glass/component-library 1.26.0 → 1.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/Drawer.css +1 -0
- package/dist/components/Drawer/Drawer.d.ts +10 -0
- package/dist/components/Drawer/Drawer.js +60 -0
- package/dist/components/Drawer/Drawer.js.map +1 -0
- package/dist/components/Drawer/Drawer.stories.d.ts +6 -0
- package/dist/components/Drawer/Drawer.stories.js +57 -0
- package/dist/components/Drawer/Drawer.stories.js.map +1 -0
- package/dist/components/Drawer/index.d.ts +1 -0
- package/dist/components/Drawer/index.js +5 -0
- package/dist/components/Drawer/index.js.map +1 -0
- package/dist/components/ModalDialog/ModalDialog.js +105 -8
- package/dist/components/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +8 -7
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/dist/components/ModalDialog/index.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +45 -43
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +45 -43
- package/dist/index.js.map +1 -1
- package/dist/useDialog-DDVWB2iX.js +1180 -0
- package/dist/useDialog-DDVWB2iX.js.map +1 -0
- package/package.json +1 -1
- package/dist/ModalDialog-B1c9QYLZ.js +0 -1276
- package/dist/ModalDialog-B1c9QYLZ.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._drawer_1ytb4_1{background-color:#fff;bottom:0;box-shadow:0 0 .75rem .25rem #0000001a;display:flex;flex-direction:column;left:10vw;max-width:90vw;min-width:25rem;padding:2.5rem 2rem;position:fixed;right:0;top:0;transform:translate(100%);transform-origin:right;transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}._drawer__content_1ytb4_22{max-height:calc(100vh - 7rem);overflow-y:auto}._drawer__header_1ytb4_32{display:flex;gap:2rem;justify-content:space-between;position:relative}._drawer__footer_1ytb4_39{gap:2rem;justify-content:flex-end;margin-top:auto}._drawer__heading_1ytb4_26{font-size:var(--font-size-s);line-height:var(--line-height-s);margin:.25rem 0 .5rem;padding-right:2rem}@media only screen and (min-width: 40rem){._drawer_1ytb4_1{left:auto;max-width:37.5rem}}._drawer--open_1ytb4_59{transform:translate(0);transition-duration:.25s}._drawer__buttons_1ytb4_64{display:flex;flex-flow:row wrap;gap:.75rem;justify-content:flex-end;margin:2.5rem 0 0}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
|
|
4
|
+
buttons?: ReactNode;
|
|
5
|
+
isOpen?: boolean;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
title: string;
|
|
8
|
+
closeButtonAriaValueText?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function Drawer({ buttons, children, isOpen, onClose, title, closeButtonAriaValueText, ...restProps }: PropsWithChildren<DrawerProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsx as r, jsxs as _ } from "react/jsx-runtime";
|
|
2
|
+
import { b as u, c as y, d as x, e as g, f as C, g as D } from "../../useDialog-DDVWB2iX.js";
|
|
3
|
+
import { c as N } from "../../clsx-DB4S2d7J.js";
|
|
4
|
+
import { useState as P, useRef as v, useEffect as j } from "react";
|
|
5
|
+
import { Backdrop as k } from "../Backdrop/Backdrop.js";
|
|
6
|
+
import { OverlayCloseButton as B } from "../OverlayCloseButton/OverlayCloseButton.js";
|
|
7
|
+
import '../../assets/Drawer.css';const R = "_drawer_1ytb4_1", T = "_drawer__content_1ytb4_22", E = "_drawer__header_1ytb4_32", F = "_drawer__footer_1ytb4_39", K = "_drawer__heading_1ytb4_26", S = "_drawer__buttons_1ytb4_64", e = {
|
|
8
|
+
drawer: R,
|
|
9
|
+
drawer__content: T,
|
|
10
|
+
drawer__header: E,
|
|
11
|
+
drawer__footer: F,
|
|
12
|
+
drawer__heading: K,
|
|
13
|
+
"drawer--open": "_drawer--open_1ytb4_59",
|
|
14
|
+
drawer__buttons: S
|
|
15
|
+
}, q = 200;
|
|
16
|
+
function L({
|
|
17
|
+
buttons: s,
|
|
18
|
+
children: n,
|
|
19
|
+
isOpen: a,
|
|
20
|
+
onClose: c,
|
|
21
|
+
title: l,
|
|
22
|
+
closeButtonAriaValueText: i = "Close",
|
|
23
|
+
...f
|
|
24
|
+
}) {
|
|
25
|
+
const [w, t] = P(e.drawer), { modalProps: b } = u({ isDisabled: !a }), o = v(null);
|
|
26
|
+
function d() {
|
|
27
|
+
t(e.drawer), globalThis.setTimeout(() => {
|
|
28
|
+
c();
|
|
29
|
+
}, q);
|
|
30
|
+
}
|
|
31
|
+
const { overlayProps: m, underlayProps: h } = y(
|
|
32
|
+
{ isDismissable: !0, isKeyboardDismissDisabled: !1, isOpen: a, onClose: d },
|
|
33
|
+
o
|
|
34
|
+
), { dialogProps: p, titleProps: $ } = x({}, o);
|
|
35
|
+
return g({ isDisabled: !a }), j(() => {
|
|
36
|
+
t(N(e.drawer, { [e["drawer--open"]]: a }));
|
|
37
|
+
}, [a]), /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(k, { ...h, children: /* @__PURE__ */ r(D, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ _(
|
|
38
|
+
"aside",
|
|
39
|
+
{
|
|
40
|
+
...b,
|
|
41
|
+
...m,
|
|
42
|
+
...p,
|
|
43
|
+
...f,
|
|
44
|
+
className: w,
|
|
45
|
+
ref: o,
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ _("header", { className: e.drawer__header, children: [
|
|
48
|
+
/* @__PURE__ */ r("h1", { className: e.drawer__heading, ...$, children: l }),
|
|
49
|
+
/* @__PURE__ */ r(B, { "aria-label": i, onClick: d })
|
|
50
|
+
] }),
|
|
51
|
+
/* @__PURE__ */ r("div", { className: e.drawer__content, children: n }),
|
|
52
|
+
s && /* @__PURE__ */ r("footer", { className: e.drawer__footer, children: /* @__PURE__ */ r("div", { className: e.drawer__buttons, children: s }) })
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
) }) }) });
|
|
56
|
+
}
|
|
57
|
+
export {
|
|
58
|
+
L as Drawer
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=Drawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Drawer.module.css';\n\nimport { Backdrop } from 'components/Backdrop/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {\n buttons?: ReactNode;\n isOpen?: boolean;\n onClose: () => void;\n title: string;\n closeButtonAriaValueText?: string;\n}\n\nconst closingDelay = 200;\n\nexport function Drawer({\n buttons,\n children,\n isOpen,\n onClose,\n title,\n closeButtonAriaValueText = 'Close',\n ...restProps\n}: PropsWithChildren<DrawerProps>) {\n const [containerClassNames, setContainerClassNames] = useState(styles.drawer);\n // Hide content outside the modal from screen readers.\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const contentRef = useRef<HTMLDivElement>(null);\n\n function onCloseDrawer() {\n setContainerClassNames(styles.drawer);\n\n globalThis.setTimeout(() => {\n onClose();\n }, closingDelay);\n }\n\n // Handle interacting outside the dialog and pressing\n // the Escape key to close the modal.\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable: true, isKeyboardDismissDisabled: false, isOpen, onClose: onCloseDrawer },\n contentRef\n );\n\n // Get props for the dialog and its title\n const { dialogProps, titleProps } = useDialog({}, contentRef);\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n // setting class name after render so that element can slide in after it is mounted and slide out\n // before it is unmounted\n setContainerClassNames(clsx(styles.drawer, { [styles['drawer--open']]: isOpen }));\n }, [isOpen]);\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n <FocusScope contain restoreFocus>\n <aside\n {...modalProps}\n {...overlayProps}\n {...dialogProps}\n {...restProps}\n className={containerClassNames}\n ref={contentRef}\n >\n <header className={styles.drawer__header}>\n <h1 className={styles.drawer__heading} {...titleProps}>\n {title}\n </h1>\n\n <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onCloseDrawer} />\n </header>\n\n <div className={styles.drawer__content}>{children}</div>\n\n {buttons && (\n <footer className={styles.drawer__footer}>\n <div className={styles.drawer__buttons}>{buttons}</div>\n </footer>\n )}\n </aside>\n </FocusScope>\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["closingDelay","Drawer","buttons","children","isOpen","onClose","title","closeButtonAriaValueText","restProps","containerClassNames","setContainerClassNames","useState","styles","modalProps","useModal","contentRef","useRef","onCloseDrawer","overlayProps","underlayProps","useOverlay","dialogProps","titleProps","useDialog","usePreventScroll","useEffect","clsx","jsx","OverlayContainer","Backdrop","FocusScope","jsxs","OverlayCloseButton"],"mappings":";;;;;;;;;;;;;;GAqBMA,IAAe;AAEd,SAASC,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GAAmC;AACjC,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAASC,EAAO,MAAM,GAEtE,EAAE,YAAAC,MAAeC,EAAS,EAAE,YAAY,CAACV,GAAQ,GACjDW,IAAaC,EAAuB,IAAI;AAE9C,WAASC,IAAgB;AACvB,IAAAP,EAAuBE,EAAO,MAAM,GAEpC,WAAW,WAAW,MAAM;AAClB,MAAAP;OACPL,CAAY;AAAA,EACjB;AAIM,QAAA,EAAE,cAAAkB,GAAc,eAAAC,EAAA,IAAkBC;AAAAA,IACtC,EAAE,eAAe,IAAM,2BAA2B,IAAO,QAAAhB,GAAQ,SAASa,EAAc;AAAA,IACxFF;AAAA,EAAA,GAII,EAAE,aAAAM,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIR,CAAU;AAE5DS,SAAAA,EAAiB,EAAE,YAAY,CAACpB,EAAQ,CAAA,GAExCqB,EAAU,MAAM;AAGS,IAAAf,EAAAgB,EAAKd,EAAO,QAAQ,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGR,EAAQ,CAAA,CAAC;AAAA,EAAA,GAC/E,CAACA,CAAM,CAAC,GAGT,gBAAAuB,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,GAAGV,GACZ,UAAA,gBAAAQ,EAACG,GAAW,EAAA,SAAO,IAAC,cAAY,IAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACH,GAAGK;AAAA,MACH,GAAGG;AAAA,MACH,GAAGb;AAAA,MACJ,WAAWC;AAAA,MACX,KAAKM;AAAA,MAEL,UAAA;AAAA,QAAC,gBAAAgB,EAAA,UAAA,EAAO,WAAWnB,EAAO,gBACxB,UAAA;AAAA,UAAA,gBAAAe,EAAC,QAAG,WAAWf,EAAO,iBAAkB,GAAGU,GACxC,UACHhB,GAAA;AAAA,UAEC,gBAAAqB,EAAAK,GAAA,EAAmB,cAAYzB,GAA0B,SAASU,GAAe;AAAA,QAAA,GACpF;AAAA,QAEC,gBAAAU,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAT,GAAS;AAAA,QAEjDD,KACC,gBAAAyB,EAAC,UAAO,EAAA,WAAWf,EAAO,gBACxB,UAAC,gBAAAe,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAV,EAAQ,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN,GACF,EACF,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { DrawerProps } from './Drawer';
|
|
2
|
+
|
|
3
|
+
declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, DrawerProps>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const DrawerExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
|
|
6
|
+
export declare const WithButtons: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { a as m } from "../../useDialog-DDVWB2iX.js";
|
|
3
|
+
import { f as p } from "../../index-DFUrxrKJ.js";
|
|
4
|
+
import { useState as c } from "react";
|
|
5
|
+
import { Drawer as n } from "./Drawer.js";
|
|
6
|
+
import { Button as t } from "../Button/Button.js";
|
|
7
|
+
import { ButtonGroup as u } from "../ButtonGroup/ButtonGroup.js";
|
|
8
|
+
const E = {
|
|
9
|
+
title: "Molecules/Drawer",
|
|
10
|
+
component: n,
|
|
11
|
+
argTypes: {
|
|
12
|
+
isOpen: {
|
|
13
|
+
table: {
|
|
14
|
+
disable: !0
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
buttons: {
|
|
18
|
+
table: {
|
|
19
|
+
disable: !0
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}, s = (l) => {
|
|
24
|
+
const [r, a] = c(!1);
|
|
25
|
+
return /* @__PURE__ */ o(m, { children: [
|
|
26
|
+
/* @__PURE__ */ e(t, { onClick: () => a(!r), variant: "primary", children: "Open drawer" }),
|
|
27
|
+
r && /* @__PURE__ */ e(
|
|
28
|
+
n,
|
|
29
|
+
{
|
|
30
|
+
...l,
|
|
31
|
+
isOpen: r,
|
|
32
|
+
onClose: () => (p()(), a(!r)),
|
|
33
|
+
children: "Example Drawer Content"
|
|
34
|
+
}
|
|
35
|
+
)
|
|
36
|
+
] });
|
|
37
|
+
}, i = {
|
|
38
|
+
title: "Example Title",
|
|
39
|
+
closeButtonAriaValueText: "Close"
|
|
40
|
+
}, d = s.bind({});
|
|
41
|
+
d.args = {
|
|
42
|
+
...i
|
|
43
|
+
};
|
|
44
|
+
const f = s.bind({});
|
|
45
|
+
f.args = {
|
|
46
|
+
...i,
|
|
47
|
+
buttons: /* @__PURE__ */ o(u, { children: [
|
|
48
|
+
/* @__PURE__ */ e(t, { variant: "primary", children: "Primary Example Button" }),
|
|
49
|
+
/* @__PURE__ */ e(t, { variant: "secondary", children: "Secondary Example Button" })
|
|
50
|
+
] })
|
|
51
|
+
};
|
|
52
|
+
export {
|
|
53
|
+
d as DrawerExample,
|
|
54
|
+
f as WithButtons,
|
|
55
|
+
E as default
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=Drawer.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.stories.js","sources":["../../../src/components/Drawer/Drawer.stories.tsx"],"sourcesContent":["import { OverlayProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { DrawerProps } from './Drawer';\n\nimport { Drawer } from './Drawer';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/Drawer',\n component: Drawer,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n} as Meta<DrawerProps>;\n\nconst Template: StoryFn<DrawerProps> = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <OverlayProvider>\n <Button onClick={() => setIsOpen(!isOpen)} variant=\"primary\">\n Open drawer\n </Button>\n {isOpen && (\n <Drawer\n {...args}\n isOpen={isOpen}\n onClose={() => {\n fn()();\n return setIsOpen(!isOpen);\n }}\n >\n Example Drawer Content\n </Drawer>\n )}\n </OverlayProvider>\n );\n};\n\nconst defaultArgs: Partial<DrawerProps> = {\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n};\n\nexport const DrawerExample = Template.bind({});\nDrawerExample.args = {\n ...defaultArgs,\n};\n\nexport const WithButtons = Template.bind({});\nWithButtons.args = {\n ...defaultArgs,\n buttons: (\n <ButtonGroup>\n <Button variant=\"primary\">Primary Example Button</Button>\n <Button variant=\"secondary\">Secondary Example Button</Button>\n </ButtonGroup>\n ),\n};\n"],"names":["Drawer_stories","Drawer","Template","args","isOpen","setIsOpen","useState","OverlayProvider","jsx","Button","fn","defaultArgs","DrawerExample","WithButtons","ButtonGroup"],"mappings":";;;;;;;AAaA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAiC,CAACC,MAAS;AAC/C,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACGC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAO,SAAS,MAAMJ,EAAU,CAACD,CAAM,GAAG,SAAQ,WAAU,UAE7D,cAAA,CAAA;AAAA,IACCA,KACC,gBAAAI;AAAA,MAACP;AAAA,MAAA;AAAA,QACE,GAAGE;AAAA,QACJ,QAAAC;AAAA,QACA,SAAS,OACPM,EAAK,EAAA,GACEL,EAAU,CAACD,CAAM;AAAA,QAE3B,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEMO,IAAoC;AAAA,EACxC,OAAO;AAAA,EACP,0BAA0B;AAC5B,GAEaC,IAAgBV,EAAS,KAAK,EAAE;AAC7CU,EAAc,OAAO;AAAA,EACnB,GAAGD;AACL;AAEO,MAAME,IAAcX,EAAS,KAAK,EAAE;AAC3CW,EAAY,OAAO;AAAA,EACjB,GAAGF;AAAA,EACH,2BACGG,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAN,EAAAC,GAAA,EAAO,SAAQ,WAAU,UAAsB,0BAAA;AAAA,IAC/C,gBAAAD,EAAAC,GAAA,EAAO,SAAQ,aAAY,UAAwB,4BAAA;AAAA,EAAA,GACtD;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Drawer';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,11 +1,108 @@
|
|
|
1
|
-
import "react/jsx-runtime";
|
|
2
|
-
import { M } from "../../
|
|
3
|
-
import "../../clsx-DB4S2d7J.js";
|
|
4
|
-
import "react";
|
|
5
|
-
import "../Backdrop/Backdrop.js";
|
|
6
|
-
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
7
|
-
import "../Spinner/Spinner.js";
|
|
1
|
+
import { jsx as a, Fragment as f, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { d as k, b as A, c as K, e as L, f as M, g as O } from "../../useDialog-DDVWB2iX.js";
|
|
3
|
+
import { c as l } from "../../clsx-DB4S2d7J.js";
|
|
4
|
+
import { useRef as S } from "react";
|
|
5
|
+
import { Backdrop as R } from "../Backdrop/Backdrop.js";
|
|
6
|
+
import { OverlayCloseButton as U } from "../OverlayCloseButton/OverlayCloseButton.js";
|
|
7
|
+
import { Spinner as q } from "../Spinner/Spinner.js";
|
|
8
|
+
import '../../assets/ModalDialog.css';const o = {
|
|
9
|
+
"modal-dialog": "_modal-dialog_14t7m_1",
|
|
10
|
+
"modal-dialog--padded": "_modal-dialog--padded_14t7m_18",
|
|
11
|
+
"modal-dialog__content": "_modal-dialog__content_14t7m_22",
|
|
12
|
+
"modal-dialog__children": "_modal-dialog__children_14t7m_32",
|
|
13
|
+
"modal-dialog__title": "_modal-dialog__title_14t7m_36",
|
|
14
|
+
"modal-dialog--confirm": "_modal-dialog--confirm_14t7m_43",
|
|
15
|
+
"modal-dialog__buttons": "_modal-dialog__buttons_14t7m_47",
|
|
16
|
+
"modal-dialog--buttons-border": "_modal-dialog--buttons-border_14t7m_60",
|
|
17
|
+
"modal-dialog__close": "_modal-dialog__close_14t7m_64",
|
|
18
|
+
"modal-dialog--slim": "_modal-dialog--slim_14t7m_82",
|
|
19
|
+
"modal-dialog--wide": "_modal-dialog--wide_14t7m_86",
|
|
20
|
+
"modal-dialog--content-with-buttons": "_modal-dialog--content-with-buttons_14t7m_100"
|
|
21
|
+
};
|
|
22
|
+
function W(p) {
|
|
23
|
+
const {
|
|
24
|
+
buttons: e,
|
|
25
|
+
children: u,
|
|
26
|
+
isDismissable: s = !0,
|
|
27
|
+
isKeyboardDismissDisabled: b = !s,
|
|
28
|
+
isLoading: h,
|
|
29
|
+
spinnerAriaValueText: $ = "Loading",
|
|
30
|
+
closeButtonAriaValueText: x = "Close",
|
|
31
|
+
isOpen: d,
|
|
32
|
+
noValidate: w = !1,
|
|
33
|
+
onClose: n,
|
|
34
|
+
onSubmit: v,
|
|
35
|
+
role: y = "dialog",
|
|
36
|
+
title: i,
|
|
37
|
+
headerContent: _,
|
|
38
|
+
variant: t = "dialog",
|
|
39
|
+
padded: c,
|
|
40
|
+
slim: D,
|
|
41
|
+
wide: N,
|
|
42
|
+
noButtonBorder: g = !1
|
|
43
|
+
} = p, m = S(null), { dialogProps: P, titleProps: B } = k({ role: y }, m), { modalProps: C } = A({ isDisabled: !d }), { overlayProps: V, underlayProps: F } = K(
|
|
44
|
+
{ isDismissable: s, isKeyboardDismissDisabled: b, isOpen: d, onClose: n },
|
|
45
|
+
m
|
|
46
|
+
);
|
|
47
|
+
L({ isDisabled: !d });
|
|
48
|
+
function T(j) {
|
|
49
|
+
j.stopPropagation();
|
|
50
|
+
}
|
|
51
|
+
return d ? /* @__PURE__ */ a(M, { children: /* @__PURE__ */ a(R, { ...F, children: h ? /* @__PURE__ */ a(q, { ariaValueText: $ }) : /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(O, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ r(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
...P,
|
|
55
|
+
...C,
|
|
56
|
+
...V,
|
|
57
|
+
className: l(o["modal-dialog"], {
|
|
58
|
+
[o["modal-dialog--confirm"]]: t === "confirm",
|
|
59
|
+
[o["modal-dialog--padded"]]: c,
|
|
60
|
+
[o["modal-dialog--slim"]]: D,
|
|
61
|
+
[o["modal-dialog--wide"]]: N
|
|
62
|
+
}),
|
|
63
|
+
onKeyUp: T,
|
|
64
|
+
role: "presentation",
|
|
65
|
+
ref: m,
|
|
66
|
+
children: [
|
|
67
|
+
(i || _) && t === "dialog" && /* @__PURE__ */ r(f, { children: [
|
|
68
|
+
i && /* @__PURE__ */ a("h1", { ...B, className: o["modal-dialog__title"], children: i }),
|
|
69
|
+
_,
|
|
70
|
+
t === "dialog" && /* @__PURE__ */ a("span", { className: o["modal-dialog__close"], children: /* @__PURE__ */ a(
|
|
71
|
+
U,
|
|
72
|
+
{
|
|
73
|
+
"aria-label": x,
|
|
74
|
+
onClick: n,
|
|
75
|
+
paddedModal: c
|
|
76
|
+
}
|
|
77
|
+
) })
|
|
78
|
+
] }),
|
|
79
|
+
/* @__PURE__ */ r(
|
|
80
|
+
"form",
|
|
81
|
+
{
|
|
82
|
+
className: l(o["modal-dialog__content"], {
|
|
83
|
+
[o["modal-dialog--content-with-buttons"]]: e
|
|
84
|
+
}),
|
|
85
|
+
onSubmit: v,
|
|
86
|
+
noValidate: w,
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ a("div", { className: l({ [o["modal-dialog__children"]]: !g }), children: u }),
|
|
89
|
+
e && /* @__PURE__ */ a(
|
|
90
|
+
"div",
|
|
91
|
+
{
|
|
92
|
+
className: l(o["modal-dialog__buttons"], {
|
|
93
|
+
[o["modal-dialog--buttons-border"]]: !g
|
|
94
|
+
}),
|
|
95
|
+
children: e
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
)
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
) }) }) }) }) : null;
|
|
104
|
+
}
|
|
8
105
|
export {
|
|
9
|
-
|
|
106
|
+
W as ModalDialog
|
|
10
107
|
};
|
|
11
108
|
//# sourceMappingURL=ModalDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames from 'clsx';\nimport { useRef } from 'react';\n\nimport type { AriaDialogProps } from '@react-types/dialog';\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n buttons?: ReactNode;\n isDismissable?: boolean;\n isKeyboardDismissDisabled?: boolean;\n isLoading?: boolean;\n spinnerAriaValueText?: string;\n closeButtonAriaValueText?: string;\n isOpen: boolean;\n noValidate?: boolean;\n onClose?(): void;\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n role?: AriaDialogProps['role'];\n title?: string;\n headerContent?: ReactNode;\n variant?: 'confirm' | 'dialog';\n padded?: boolean;\n slim?: boolean;\n wide?: boolean;\n noButtonBorder?: boolean;\n}\n\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n const {\n buttons,\n children,\n isDismissable = true,\n isKeyboardDismissDisabled = !isDismissable,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n role = 'dialog',\n title,\n headerContent,\n variant = 'dialog',\n padded,\n slim,\n wide,\n noButtonBorder = false,\n } = props;\n const ref = useRef<HTMLDivElement>(null);\n const { dialogProps, titleProps } = useDialog({ role }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n ref\n );\n\n usePreventScroll({ isDisabled: !isOpen });\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={classNames(styles['modal-dialog'], {\n [styles['modal-dialog--confirm']]: variant === 'confirm',\n [styles['modal-dialog--padded']]: padded,\n [styles['modal-dialog--slim']]: slim,\n [styles['modal-dialog--wide']]: wide,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && variant === 'dialog' && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['modal-dialog__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {variant === 'dialog' && (\n <span className={styles['modal-dialog__close']}>\n <OverlayCloseButton\n aria-label={closeButtonAriaValueText}\n onClick={onClose}\n paddedModal={padded}\n />\n </span>\n )}\n </>\n )}\n <form\n className={classNames(styles['modal-dialog__content'], {\n [styles['modal-dialog--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n >\n <div className={classNames({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n {buttons && (\n <div\n className={classNames(styles['modal-dialog__buttons'], {\n [styles['modal-dialog--buttons-border']]: !noButtonBorder,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","slim","wide","noButtonBorder","ref","useRef","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":"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"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
1
|
+
import { jsxs as l, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { $ as d } from "../../useDialog-DDVWB2iX.js";
|
|
3
3
|
import { f as o } from "../../index-DFUrxrKJ.js";
|
|
4
|
+
import { ModalDialog as a } from "./ModalDialog.js";
|
|
4
5
|
import { Button as t } from "../Button/Button.js";
|
|
5
6
|
import { ButtonGroup as s } from "../ButtonGroup/ButtonGroup.js";
|
|
6
7
|
import { FormField as m } from "../FormField/FormField.js";
|
|
7
8
|
import { InputField as p } from "../InputField/InputField.js";
|
|
8
9
|
import { Label as c } from "../Label/Label.js";
|
|
9
|
-
const
|
|
10
|
+
const v = {
|
|
10
11
|
title: "Molecules/ModalDialog",
|
|
11
|
-
component:
|
|
12
|
+
component: a,
|
|
12
13
|
argTypes: {
|
|
13
14
|
isOpen: {
|
|
14
15
|
table: {
|
|
@@ -38,7 +39,7 @@ const F = {
|
|
|
38
39
|
}
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
|
-
}, i = (n) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
|
|
42
|
+
}, i = (n) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(a, { ...n, children: /* @__PURE__ */ l(m, { outerSpace: !0, children: [
|
|
42
43
|
/* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
|
|
43
44
|
/* @__PURE__ */ e(p, { id: "text-field" })
|
|
44
45
|
] }) }) }), r = {
|
|
@@ -53,7 +54,7 @@ const F = {
|
|
|
53
54
|
noValidate: !1,
|
|
54
55
|
onSubmit: o(),
|
|
55
56
|
onClose: o(),
|
|
56
|
-
buttons: /* @__PURE__ */
|
|
57
|
+
buttons: /* @__PURE__ */ l(s, { reversed: !0, children: [
|
|
57
58
|
/* @__PURE__ */ e(t, { variant: "primary", onClick: o(), children: "OK" }),
|
|
58
59
|
/* @__PURE__ */ e(t, { variant: "secondary", onClick: o(), children: "Cancel" })
|
|
59
60
|
] }),
|
|
@@ -71,6 +72,6 @@ f.args = {
|
|
|
71
72
|
export {
|
|
72
73
|
f as Loading,
|
|
73
74
|
u as ModalDialogExample,
|
|
74
|
-
|
|
75
|
+
v as default
|
|
75
76
|
};
|
|
76
77
|
//# sourceMappingURL=ModalDialog.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n slim: false,\n wide: false,\n noButtonBorder: false,\n variant: 'dialog',\n role: 'dialog',\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n noValidate: false,\n onSubmit: fn(),\n onClose: fn(),\n buttons: (\n <ButtonGroup reversed>\n <Button variant=\"primary\" onClick={fn()}>\n OK\n </Button>\n <Button variant=\"secondary\" onClick={fn()}>\n Cancel\n </Button>\n </ButtonGroup>\n ),\n isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n ...defaultArgs,\n isLoading: true,\n spinnerAriaValueText: 'Loading',\n};\n"],"names":["ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n slim: false,\n wide: false,\n noButtonBorder: false,\n variant: 'dialog',\n role: 'dialog',\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n noValidate: false,\n onSubmit: fn(),\n onClose: fn(),\n buttons: (\n <ButtonGroup reversed>\n <Button variant=\"primary\" onClick={fn()}>\n OK\n </Button>\n <Button variant=\"secondary\" onClick={fn()}>\n Cancel\n </Button>\n </ButtonGroup>\n ),\n isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n ...defaultArgs,\n isLoading: true,\n spinnerAriaValueText: 'Loading',\n};\n"],"names":["ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading"],"mappings":";;;;;;;;;AAeA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,GAC9B,GACF,EACF,CAAA,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,KAAM,UAE3C,UAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,EAAE;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,EAAE;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;"}
|
|
@@ -5,10 +5,10 @@ import { Container as n } from "../storyComponents/Container/Container.js";
|
|
|
5
5
|
import "react";
|
|
6
6
|
import { Icon as m } from "../Icon/Icon.js";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
|
+
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
8
9
|
import "../IconButton/IconButton.js";
|
|
9
10
|
import "../Input/Input.js";
|
|
10
11
|
import "../InputField/InputField.js";
|
|
11
|
-
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
12
12
|
import { Repeater as i } from "../Repeater/Repeater.js";
|
|
13
13
|
import "../SelectListbox/SelectListbox.js";
|
|
14
14
|
import "../SelectListbox/SelectProvider.js";
|
package/dist/components/index.js
CHANGED
|
@@ -5,27 +5,28 @@ import { Button as a } from "./Button/Button.js";
|
|
|
5
5
|
import { ButtonGroup as n } from "./ButtonGroup/ButtonGroup.js";
|
|
6
6
|
import { Card as u } from "./Card/Card.js";
|
|
7
7
|
import { Checkbox as d } from "./Checkbox/Checkbox.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
8
|
+
import { Drawer as B } from "./Drawer/Drawer.js";
|
|
9
|
+
import { FieldHint as I } from "./FieldHint/FieldHint.js";
|
|
10
|
+
import { FormField as C } from "./FormField/FormField.js";
|
|
11
|
+
import { Icon as L } from "./Icon/Icon.js";
|
|
12
|
+
import { IconButton as g } from "./IconButton/IconButton.js";
|
|
13
|
+
import { InfoMessage as D } from "./InfoMessage/InfoMessage.js";
|
|
14
|
+
import { Input as v } from "./Input/Input.js";
|
|
15
|
+
import { InputField as R } from "./InputField/InputField.js";
|
|
16
|
+
import { Label as w } from "./Label/Label.js";
|
|
17
|
+
import { M as G } from "../MenuLink-CLEqkVVh.js";
|
|
18
|
+
import { MetaDataList as N } from "./MetaDataList/MetaDataList.js";
|
|
19
|
+
import { ModalDialog as T } from "./ModalDialog/ModalDialog.js";
|
|
20
|
+
import { OverlayCloseButton as q } from "./OverlayCloseButton/OverlayCloseButton.js";
|
|
21
|
+
import { ProgrammeCard as E } from "./ProgrammeCard/ProgrammeCard.js";
|
|
22
|
+
import { RadioButton as K } from "./RadioButton/RadioButton.js";
|
|
23
|
+
import { Repeater as U } from "./Repeater/Repeater.js";
|
|
24
|
+
import { SectionNotification as W } from "./SectionNotification/SectionNotification.js";
|
|
25
|
+
import { SelectListbox as Y } from "./SelectListbox/SelectListbox.js";
|
|
26
|
+
import { SelectProvider as _, useSelect as $ } from "./SelectListbox/SelectProvider.js";
|
|
27
|
+
import { Spinner as ro } from "./Spinner/Spinner.js";
|
|
28
|
+
import { StatusPill as eo } from "./StatusPill/StatusPill.js";
|
|
29
|
+
import { Tooltip as mo } from "./Tooltip/Tooltip.js";
|
|
29
30
|
export {
|
|
30
31
|
t as Accordion,
|
|
31
32
|
p as AppStatusBar,
|
|
@@ -34,27 +35,28 @@ export {
|
|
|
34
35
|
n as ButtonGroup,
|
|
35
36
|
u as Card,
|
|
36
37
|
d as Checkbox,
|
|
37
|
-
B as
|
|
38
|
-
|
|
39
|
-
C as
|
|
40
|
-
L as
|
|
41
|
-
g as
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
R as
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
E as
|
|
51
|
-
K as
|
|
52
|
-
U as
|
|
53
|
-
W as
|
|
54
|
-
Y as
|
|
55
|
-
|
|
56
|
-
ro as
|
|
57
|
-
eo as
|
|
58
|
-
|
|
38
|
+
B as Drawer,
|
|
39
|
+
I as FieldHint,
|
|
40
|
+
C as FormField,
|
|
41
|
+
L as Icon,
|
|
42
|
+
g as IconButton,
|
|
43
|
+
D as InfoMessage,
|
|
44
|
+
v as Input,
|
|
45
|
+
R as InputField,
|
|
46
|
+
w as Label,
|
|
47
|
+
G as MenuLink,
|
|
48
|
+
N as MetaDataList,
|
|
49
|
+
T as ModalDialog,
|
|
50
|
+
q as OverlayCloseButton,
|
|
51
|
+
E as ProgrammeCard,
|
|
52
|
+
K as RadioButton,
|
|
53
|
+
U as Repeater,
|
|
54
|
+
W as SectionNotification,
|
|
55
|
+
Y as SelectListbox,
|
|
56
|
+
_ as SelectProvider,
|
|
57
|
+
ro as Spinner,
|
|
58
|
+
eo as StatusPill,
|
|
59
|
+
mo as Tooltip,
|
|
60
|
+
$ as useSelect
|
|
59
61
|
};
|
|
60
62
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -5,27 +5,28 @@ import { Button as a } from "./components/Button/Button.js";
|
|
|
5
5
|
import { ButtonGroup as n } from "./components/ButtonGroup/ButtonGroup.js";
|
|
6
6
|
import { Card as u } from "./components/Card/Card.js";
|
|
7
7
|
import { Checkbox as d } from "./components/Checkbox/Checkbox.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
8
|
+
import { Drawer as B } from "./components/Drawer/Drawer.js";
|
|
9
|
+
import { FieldHint as I } from "./components/FieldHint/FieldHint.js";
|
|
10
|
+
import { FormField as C } from "./components/FormField/FormField.js";
|
|
11
|
+
import { Icon as L } from "./components/Icon/Icon.js";
|
|
12
|
+
import { IconButton as g } from "./components/IconButton/IconButton.js";
|
|
13
|
+
import { InfoMessage as D } from "./components/InfoMessage/InfoMessage.js";
|
|
14
|
+
import { Input as v } from "./components/Input/Input.js";
|
|
15
|
+
import { InputField as R } from "./components/InputField/InputField.js";
|
|
16
|
+
import { Label as w } from "./components/Label/Label.js";
|
|
17
|
+
import { M as G } from "./MenuLink-CLEqkVVh.js";
|
|
18
|
+
import { MetaDataList as N } from "./components/MetaDataList/MetaDataList.js";
|
|
19
|
+
import { ModalDialog as T } from "./components/ModalDialog/ModalDialog.js";
|
|
20
|
+
import { OverlayCloseButton as q } from "./components/OverlayCloseButton/OverlayCloseButton.js";
|
|
21
|
+
import { ProgrammeCard as E } from "./components/ProgrammeCard/ProgrammeCard.js";
|
|
22
|
+
import { RadioButton as K } from "./components/RadioButton/RadioButton.js";
|
|
23
|
+
import { Repeater as U } from "./components/Repeater/Repeater.js";
|
|
24
|
+
import { SectionNotification as W } from "./components/SectionNotification/SectionNotification.js";
|
|
25
|
+
import { SelectListbox as Y } from "./components/SelectListbox/SelectListbox.js";
|
|
26
|
+
import { SelectProvider as _, useSelect as $ } from "./components/SelectListbox/SelectProvider.js";
|
|
27
|
+
import { Spinner as ro } from "./components/Spinner/Spinner.js";
|
|
28
|
+
import { StatusPill as eo } from "./components/StatusPill/StatusPill.js";
|
|
29
|
+
import { Tooltip as mo } from "./components/Tooltip/Tooltip.js";
|
|
29
30
|
export {
|
|
30
31
|
t as Accordion,
|
|
31
32
|
p as AppStatusBar,
|
|
@@ -34,27 +35,28 @@ export {
|
|
|
34
35
|
n as ButtonGroup,
|
|
35
36
|
u as Card,
|
|
36
37
|
d as Checkbox,
|
|
37
|
-
B as
|
|
38
|
-
|
|
39
|
-
C as
|
|
40
|
-
L as
|
|
41
|
-
g as
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
R as
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
E as
|
|
51
|
-
K as
|
|
52
|
-
U as
|
|
53
|
-
W as
|
|
54
|
-
Y as
|
|
55
|
-
|
|
56
|
-
ro as
|
|
57
|
-
eo as
|
|
58
|
-
|
|
38
|
+
B as Drawer,
|
|
39
|
+
I as FieldHint,
|
|
40
|
+
C as FormField,
|
|
41
|
+
L as Icon,
|
|
42
|
+
g as IconButton,
|
|
43
|
+
D as InfoMessage,
|
|
44
|
+
v as Input,
|
|
45
|
+
R as InputField,
|
|
46
|
+
w as Label,
|
|
47
|
+
G as MenuLink,
|
|
48
|
+
N as MetaDataList,
|
|
49
|
+
T as ModalDialog,
|
|
50
|
+
q as OverlayCloseButton,
|
|
51
|
+
E as ProgrammeCard,
|
|
52
|
+
K as RadioButton,
|
|
53
|
+
U as Repeater,
|
|
54
|
+
W as SectionNotification,
|
|
55
|
+
Y as SelectListbox,
|
|
56
|
+
_ as SelectProvider,
|
|
57
|
+
ro as Spinner,
|
|
58
|
+
eo as StatusPill,
|
|
59
|
+
mo as Tooltip,
|
|
60
|
+
$ as useSelect
|
|
59
61
|
};
|
|
60
62
|
//# sourceMappingURL=index.js.map
|