@mittwald/flow-react-components 0.2.0-alpha.876 → 0.2.0-alpha.877
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/CHANGELOG.md +10 -0
- package/dist/assets/doc-properties.json +5821 -5764
- package/dist/js/packages/components/src/components/Modal/Modal.mjs +7 -4
- package/dist/js/packages/components/src/components/Modal/Modal.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Overlay/Overlay.mjs +2 -0
- package/dist/js/packages/components/src/components/Overlay/Overlay.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs +7 -2
- package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map +1 -1
- package/dist/types/components/Modal/Modal.d.ts.map +1 -1
- package/dist/types/components/Modal/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/Overlay/Overlay.d.ts +2 -1
- package/dist/types/components/Overlay/Overlay.d.ts.map +1 -1
- package/dist/types/components/Overlay/components/OverlayContent.d.ts +2 -1
- package/dist/types/components/Overlay/components/OverlayContent.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
|
-
import { Suspense } from 'react';
|
|
4
|
+
import { useId, Suspense } from 'react';
|
|
5
5
|
import styles from './Modal.module.scss.mjs';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
|
|
@@ -48,6 +48,7 @@ const Modal = flowComponent("Modal", (props) => {
|
|
|
48
48
|
offCanvasOrientation === "left" && styles["left"],
|
|
49
49
|
className
|
|
50
50
|
);
|
|
51
|
+
const generatedId = useId();
|
|
51
52
|
const header = (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
53
|
children2,
|
|
53
54
|
/* @__PURE__ */ jsx(Action, { closeModal: { bypassConfirmation: true }, children: /* @__PURE__ */ jsx(
|
|
@@ -69,7 +70,8 @@ const Modal = flowComponent("Modal", (props) => {
|
|
|
69
70
|
Heading: { level: nestedHeadingLevel },
|
|
70
71
|
Section: {
|
|
71
72
|
Header: { Heading: { level: nestedHeadingLevel } },
|
|
72
|
-
Heading: { level: nestedHeadingLevel }
|
|
73
|
+
Heading: { level: nestedHeadingLevel },
|
|
74
|
+
hideSeparator: true
|
|
73
75
|
},
|
|
74
76
|
Header: { Heading: { level: nestedHeadingLevel } }
|
|
75
77
|
};
|
|
@@ -89,8 +91,8 @@ const Modal = flowComponent("Modal", (props) => {
|
|
|
89
91
|
Heading: {
|
|
90
92
|
className: styles.header,
|
|
91
93
|
level: 2,
|
|
92
|
-
|
|
93
|
-
|
|
94
|
+
children: dynamic((props2) => header(props2.children)),
|
|
95
|
+
id: generatedId
|
|
94
96
|
},
|
|
95
97
|
ActionGroup: {
|
|
96
98
|
className: styles.actionGroup,
|
|
@@ -132,6 +134,7 @@ const Modal = flowComponent("Modal", (props) => {
|
|
|
132
134
|
className: rootClassName,
|
|
133
135
|
controller,
|
|
134
136
|
ref,
|
|
137
|
+
"aria-labelledby": generatedId,
|
|
135
138
|
...overlayProps,
|
|
136
139
|
children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: offCanvas, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(OffCanvasSuspenseFallback, {}), children }) }) })
|
|
137
140
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.mjs","sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /** The size of the modal. @default \"s\" */\n size?: \"s\" | \"m\" | \"l\";\n /** Whether the modal should be displayed as an off canvas. */\n offCanvas?: boolean;\n /**\n * Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n */\n offCanvasOrientation?: \"left\" | \"right\";\n /** An overlay controller to control the modal state. */\n controller?: OverlayController;\n /**\n * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n */\n slot?: string;\n /** Whether the modal can be closed by clicking outside of it. */\n isDismissable?: boolean;\n /** Whether the close button should be visible */\n showCloseButton?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n className,\n );\n\n const header = (children: ReactNode) => (\n <>\n {children}\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n
|
|
1
|
+
{"version":3,"file":"Modal.mjs","sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /** The size of the modal. @default \"s\" */\n size?: \"s\" | \"m\" | \"l\";\n /** Whether the modal should be displayed as an off canvas. */\n offCanvas?: boolean;\n /**\n * Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n */\n offCanvasOrientation?: \"left\" | \"right\";\n /** An overlay controller to control the modal state. */\n controller?: OverlayController;\n /**\n * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n */\n slot?: string;\n /** Whether the modal can be closed by clicking outside of it. */\n isDismissable?: boolean;\n /** Whether the close button should be visible */\n showCloseButton?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n className,\n );\n\n const generatedId = useId();\n\n const header = (children: ReactNode) => (\n <>\n {children}\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n hideSeparator: true,\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n children: dynamic((props) => header(props.children)),\n id: generatedId,\n },\n ActionGroup: {\n className: styles.actionGroup,\n spacing: \"m\",\n Action: {\n closeModal: dynamic((props) => {\n if (props.closeModal === undefined) {\n return;\n }\n if (props.closeModal === true) {\n return { bypassConfirmation: true };\n }\n return {\n bypassConfirmation: true,\n ...props.closeModal,\n };\n }),\n closeOverlay: dynamic((props) => {\n if (props.closeOverlay === undefined) {\n return;\n }\n if (\n props.closeOverlay instanceof OverlayController ||\n typeof props.closeOverlay === \"string\"\n ) {\n return {\n bypassConfirmation: true,\n overlay: props.closeOverlay,\n };\n }\n return {\n bypassConfirmation: true,\n ...props.closeOverlay,\n };\n }),\n },\n },\n };\n\n return (\n <Overlay\n className={rootClassName}\n controller={controller}\n ref={ref}\n aria-labelledby={generatedId}\n {...overlayProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={offCanvas}>\n <Suspense fallback={<OffCanvasSuspenseFallback />}>\n {children}\n </Suspense>\n </Wrap>\n </PropsContextProvider>\n </Overlay>\n );\n});\n\nexport default Modal;\n"],"names":["children","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,IAAA,GAAO,GAAA;AAAA,IACP,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA;AAAA,IACA,oBAAA,GAAuB,OAAA;AAAA,IACvB,eAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,OAAO,CAAA;AAEpE,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,SAAA,GAAY,MAAA,CAAO,SAAA,GAAY,MAAA,CAAO,KAAA;AAAA,IACtC,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IACrB,oBAAA,KAAyB,MAAA,IAAU,MAAA,CAAO,MAAM,CAAA;AAAA,IAChD;AAAA,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,EAAA,MAAM,MAAA,GAAS,CAACA,SAAAA,qBACd,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAAA,SAAAA;AAAA,wBACA,MAAA,EAAA,EAAO,UAAA,EAAY,EAAE,kBAAA,EAAoB,MAAK,EAC7C,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,OAAO,CAAA;AAAA,QAC1C,SAAA,EAAW,IAAA;AAAA,UACT,MAAA,CAAO,WAAA;AAAA,UACP,oBAAoB,IAAA,GAChB,MAAA,CAAO,gBACP,eAAA,KAAoB,KAAA,GAClB,OAAO,YAAA,GACP;AAAA,SACR;AAAA,QAEA,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,KACb,EACF;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,MAAM,kBAAA,GAAqB,CAAA;AAE3B,EAAA,MAAM,kBAAA,GAAmC;AAAA,IACvC,OAAA,EAAS,EAAE,KAAA,EAAO,kBAAA,EAAmB;AAAA,IACrC,OAAA,EAAS;AAAA,MACP,QAAQ,EAAE,OAAA,EAAS,EAAE,KAAA,EAAO,oBAAmB,EAAE;AAAA,MACjD,OAAA,EAAS,EAAE,KAAA,EAAO,kBAAA,EAAmB;AAAA,MACrC,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,QAAQ,EAAE,OAAA,EAAS,EAAE,KAAA,EAAO,oBAAmB;AAAE,GACnD;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,GAAG,kBAAA;AAAA,MACH,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,GAAG,kBAAA;AAAA,MACH,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,MACR,CAAA,EAAG,CAAC,CAAC,CAAA;AAAA,MACL,WAAW,MAAA,CAAO,YAAA;AAAA,MAClB,WAAW,EAAE,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,iBAAiB,SAAA,EAAU;AAAA,MACrE,QAAA,sBAAW,iBAAA,EAAA,EAAkB;AAAA,KAC/B;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,KAAA,EAAO,CAAA;AAAA,MACP,UAAU,OAAA,CAAQ,CAACC,WAAU,MAAA,CAAOA,MAAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,MACnD,EAAA,EAAI;AAAA,KACN;AAAA,IACA,WAAA,EAAa;AAAA,MACX,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,OAAA,EAAS,GAAA;AAAA,MACT,MAAA,EAAQ;AAAA,QACN,UAAA,EAAY,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC7B,UAAA,IAAIA,MAAAA,CAAM,eAAe,MAAA,EAAW;AAClC,YAAA;AAAA,UACF;AACA,UAAA,IAAIA,MAAAA,CAAM,eAAe,IAAA,EAAM;AAC7B,YAAA,OAAO,EAAE,oBAAoB,IAAA,EAAK;AAAA,UACpC;AACA,UAAA,OAAO;AAAA,YACL,kBAAA,EAAoB,IAAA;AAAA,YACpB,GAAGA,MAAAA,CAAM;AAAA,WACX;AAAA,QACF,CAAC,CAAA;AAAA,QACD,YAAA,EAAc,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC/B,UAAA,IAAIA,MAAAA,CAAM,iBAAiB,MAAA,EAAW;AACpC,YAAA;AAAA,UACF;AACA,UAAA,IACEA,OAAM,YAAA,YAAwB,iBAAA,IAC9B,OAAOA,MAAAA,CAAM,iBAAiB,QAAA,EAC9B;AACA,YAAA,OAAO;AAAA,cACL,kBAAA,EAAoB,IAAA;AAAA,cACpB,SAASA,MAAAA,CAAM;AAAA,aACjB;AAAA,UACF;AACA,UAAA,OAAO;AAAA,YACL,kBAAA,EAAoB,IAAA;AAAA,YACpB,GAAGA,MAAAA,CAAM;AAAA,WACX;AAAA,QACF,CAAC;AAAA;AACH;AACF,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACX,UAAA;AAAA,MACA,GAAA;AAAA,MACA,iBAAA,EAAiB,WAAA;AAAA,MAChB,GAAG,YAAA;AAAA,MAEJ,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,QAAK,EAAA,EAAI,SAAA,EACR,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,0BAAU,GAAA,CAAC,yBAAA,EAAA,EAA0B,CAAA,EAC5C,QAAA,EACH,GACF,CAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -23,6 +23,7 @@ const Overlay = (props) => {
|
|
|
23
23
|
isDefaultOpen,
|
|
24
24
|
isOpen: isOpenFromProps,
|
|
25
25
|
ref,
|
|
26
|
+
"aria-labelledby": ariaLabelledBy,
|
|
26
27
|
...controllerOptions
|
|
27
28
|
} = props;
|
|
28
29
|
const controllerFromContext = useOverlayController(overlayType, {
|
|
@@ -41,6 +42,7 @@ const Overlay = (props) => {
|
|
|
41
42
|
ref,
|
|
42
43
|
isDismissable,
|
|
43
44
|
className: rootClassName,
|
|
45
|
+
"aria-labelledby": ariaLabelledBy,
|
|
44
46
|
children: /* @__PURE__ */ jsx(OverlayContextProvider, { type: "Modal", controller, children })
|
|
45
47
|
}
|
|
46
48
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.mjs","sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n OverlayCloseHandler,\n OverlayOpenHandler,\n OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\n\nexport interface OverlayProps
|
|
1
|
+
{"version":3,"file":"Overlay.mjs","sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n OverlayCloseHandler,\n OverlayOpenHandler,\n OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\nimport type * as Aria from \"react-aria-components\";\n\nexport interface OverlayProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n /** The controller to control the overlay state. */\n controller?: OverlayController;\n /** Whether the overlay can be closed by clicking outside of it. */\n isDismissable?: boolean;\n /** Whether the overlay is a modal or a light box. */\n overlayType?: \"Modal\" | \"LightBox\";\n isOpen?: boolean;\n isDefaultOpen?: boolean;\n onOpen?: OverlayOpenHandler;\n onClose?: OverlayCloseHandler;\n onOpenChange?: OverlayOpenStateHandler;\n}\n\nexport const Overlay: FC<OverlayProps> = (props) => {\n const {\n controller: controllerFromProps,\n children,\n isDismissable = true,\n className,\n overlayType = \"Modal\",\n isDefaultOpen,\n isOpen: isOpenFromProps,\n ref,\n \"aria-labelledby\": ariaLabelledBy,\n ...controllerOptions\n } = props;\n\n const controllerFromContext = useOverlayController(overlayType, {\n reuseControllerFromContext: true,\n isDefaultOpen,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n controller.useUpdateOptions(controllerOptions);\n\n const isOpen = isOpenFromProps ?? controller.useIsOpen();\n\n const rootClassName = clsx(styles.overlay, className);\n\n return (\n <OverlayContentView\n onOpenChange={controller.setOpen}\n isOpen={isOpen}\n ref={ref}\n isDismissable={isDismissable}\n className={rootClassName}\n aria-labelledby={ariaLabelledBy}\n >\n <OverlayContextProvider type=\"Modal\" controller={controller}>\n {children}\n </OverlayContextProvider>\n </OverlayContentView>\n );\n};\n\nexport default Overlay;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkCO,MAAM,OAAA,GAA4B,CAAC,KAAA,KAAU;AAClD,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,mBAAA;AAAA,IACZ,QAAA;AAAA,IACA,aAAA,GAAgB,IAAA;AAAA,IAChB,SAAA;AAAA,IACA,WAAA,GAAc,OAAA;AAAA,IACd,aAAA;AAAA,IACA,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,WAAA,EAAa;AAAA,IAC9D,0BAAA,EAA4B,IAAA;AAAA,IAC5B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAa,mBAAA,IAAuB,qBAAA;AAC1C,EAAA,UAAA,CAAW,iBAAiB,iBAAiB,CAAA;AAE7C,EAAA,MAAM,MAAA,GAAS,eAAA,IAAmB,UAAA,CAAW,SAAA,EAAU;AAEvD,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAEpD,EAAA,uBACE,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,cAAc,UAAA,CAAW,OAAA;AAAA,MACzB,MAAA;AAAA,MACA,GAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX,iBAAA,EAAiB,cAAA;AAAA,MAEjB,QAAA,kBAAA,GAAA,CAAC,sBAAA,EAAA,EAAuB,IAAA,EAAK,OAAA,EAAQ,YAClC,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -8,11 +8,16 @@ import styles from '../Overlay.module.scss.mjs';
|
|
|
8
8
|
import DivView from '../../../views/DivView.mjs';
|
|
9
9
|
|
|
10
10
|
const OverlayContent = (props) => {
|
|
11
|
-
const {
|
|
11
|
+
const {
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
"aria-labelledby": ariaLabelledBy,
|
|
15
|
+
...restProps
|
|
16
|
+
} = props;
|
|
12
17
|
const Fallback = () => {
|
|
13
18
|
return /* @__PURE__ */ jsx(DivView, { className: styles.suspense, children: /* @__PURE__ */ jsx(OverlaySuspenseFallback, { ...restProps }) });
|
|
14
19
|
};
|
|
15
|
-
return /* @__PURE__ */ jsx(Aria.ModalOverlay, { ...restProps, className, children: /* @__PURE__ */ jsx(DivView, { children: /* @__PURE__ */ jsx(Aria.Modal, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, {}), children: /* @__PURE__ */ jsx(Aria.Dialog, { children }) }) }) }) });
|
|
20
|
+
return /* @__PURE__ */ jsx(Aria.ModalOverlay, { ...restProps, className, children: /* @__PURE__ */ jsx(DivView, { children: /* @__PURE__ */ jsx(Aria.Modal, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, {}), children: /* @__PURE__ */ jsx(Aria.Dialog, { "aria-labelledby": ariaLabelledBy, children }) }) }) }) });
|
|
16
21
|
};
|
|
17
22
|
|
|
18
23
|
export { OverlayContent };
|
package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayContent.mjs","sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\n\nexport interface OverlayContentProps\n extends
|
|
1
|
+
{"version":3,"file":"OverlayContent.mjs","sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n return (\n <Aria.ModalOverlay {...restProps} className={className}>\n <DivView>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n );\n};\n\nexport default OverlayContent;\n"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,uBACE,GAAA,CAAC,WAAQ,SAAA,EAAW,MAAA,CAAO,UACzB,QAAA,kBAAA,GAAA,CAAC,uBAAA,EAAA,EAAyB,GAAG,SAAA,EAAW,CAAA,EAC1C,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EAAmB,GAAG,SAAA,EAAW,SAAA,EAChC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,kBAAU,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,MAAA,EAAL,EAAY,iBAAA,EAAiB,cAAA,EAC3B,QAAA,EACH,CAAA,EACF,CAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAQhF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAQ5D,KAAK,qBAAqB,GAAG,IAAI,CAC/B,YAAY,EACZ,QAAQ,GAAG,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,CACnE,CAAC;AAEF,MAAM,WAAW,UACf,SACE,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB;IACvB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC,wDAAwD;IACxD,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,+FAqIhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modal/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,KAAuB,MAAM,oBAAoB,CAAC;AAmBzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAiD5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA0CtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqC9B,CAAC;AAUF,eAAO,MAAM,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modal/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,KAAuB,MAAM,oBAAoB,CAAC;AAmBzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAiD5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA0CtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqC9B,CAAC;AAUF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkEzB,CAAC"}
|
|
@@ -2,7 +2,8 @@ import { FC, PropsWithChildren, Ref } from 'react';
|
|
|
2
2
|
import { OverlayController } from '../../lib/controller';
|
|
3
3
|
import { PropsWithClassName } from '../../lib/types/props';
|
|
4
4
|
import { OverlayCloseHandler, OverlayOpenHandler, OverlayOpenStateHandler } from '../../lib/controller/overlay/OverlayController';
|
|
5
|
-
|
|
5
|
+
import type * as Aria from "react-aria-components";
|
|
6
|
+
export interface OverlayProps extends PropsWithChildren, PropsWithClassName, Pick<Aria.DialogProps, "aria-labelledby"> {
|
|
6
7
|
ref?: Ref<HTMLDivElement>;
|
|
7
8
|
/** The controller to control the overlay state. */
|
|
8
9
|
controller?: OverlayController;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,4CAA4C,CAAC;
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAEnD,MAAM,WAAW,YACf,SACE,iBAAiB,EACjB,kBAAkB,EAClB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,mDAAmD;IACnD,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,YAAY,CAAC,EAAE,uBAAuB,CAAC;CACxC;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAwCpC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FC, PropsWithChildren, Ref } from 'react';
|
|
2
2
|
import { PropsWithClassName } from '../../../lib/types/props';
|
|
3
|
-
|
|
3
|
+
import * as Aria from "react-aria-components";
|
|
4
|
+
export interface OverlayContentProps extends PropsWithChildren, PropsWithClassName, Pick<Aria.DialogProps, "aria-labelledby"> {
|
|
4
5
|
ref?: Ref<HTMLDivElement>;
|
|
5
6
|
onOpenChange: (isOpen: boolean) => void;
|
|
6
7
|
isDismissable?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Overlay/components/OverlayContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Overlay/components/OverlayContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,GAAG,EAAY,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAK5D,MAAM,WAAW,mBACf,SACE,iBAAiB,EACjB,kBAAkB,EAClB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA6BlD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.877",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
"@internationalized/string": "^3.2.9",
|
|
64
64
|
"@internationalized/string-compiler": "^3.4.1",
|
|
65
65
|
"@lezer/highlight": "^1.2.3",
|
|
66
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
66
|
+
"@mittwald/flow-icons": "0.2.0-alpha.877",
|
|
67
67
|
"@mittwald/password-tools-js": "3.0.0-alpha.30",
|
|
68
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
68
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.877",
|
|
69
69
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
70
70
|
"@react-aria/form": "^3.2.1",
|
|
71
71
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"@lezer/generator": "^1.8.0",
|
|
121
121
|
"@lezer/lr": "^1.4.10",
|
|
122
122
|
"@mittwald/flow-core": "",
|
|
123
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
123
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.877",
|
|
124
124
|
"@mittwald/flow-icons-base": "",
|
|
125
125
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
126
126
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
},
|
|
176
176
|
"peerDependencies": {
|
|
177
177
|
"@internationalized/date": "^3.12.2",
|
|
178
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
178
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.876",
|
|
179
179
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
180
180
|
"next": "^16.2.3",
|
|
181
181
|
"react": "^19.2.0",
|
|
@@ -196,5 +196,5 @@
|
|
|
196
196
|
"optional": true
|
|
197
197
|
}
|
|
198
198
|
},
|
|
199
|
-
"gitHead": "
|
|
199
|
+
"gitHead": "b30248ccb92401149ae5658e5b4faab4957dcb04"
|
|
200
200
|
}
|