@mage-ui/components 1.0.50 → 1.0.52
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/components/index.d.mts +4 -11
- package/dist/components/navigations/breadcrumbs/Breadcrumbs.d.mts +11 -0
- package/dist/components/navigations/breadcrumbs/Breadcrumbs.d.mts.map +1 -1
- package/dist/components/navigations/breadcrumbs/Breadcrumbs.mjs +1 -1
- package/dist/components/navigations/breadcrumbs/Breadcrumbs.mjs.map +1 -1
- package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.d.mts +18 -0
- package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.d.mts.map +1 -0
- package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.mjs +2 -0
- package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.mjs.map +1 -0
- package/dist/components/overlays/index.d.mts +4 -11
- package/dist/components/overlays/modal/Modal.d.mts +23 -67
- package/dist/components/overlays/modal/Modal.d.mts.map +1 -1
- package/dist/components/overlays/modal/Modal.mjs +1 -1
- package/dist/components/overlays/modal/Modal.mjs.map +1 -1
- package/dist/components/overlays/modal/features/ModalAlert.d.mts +26 -0
- package/dist/components/overlays/modal/features/ModalAlert.d.mts.map +1 -0
- package/dist/components/overlays/modal/features/ModalAlert.mjs +2 -0
- package/dist/components/overlays/modal/features/ModalAlert.mjs.map +1 -0
- package/dist/components/overlays/modal/features/ModalConfirm.d.mts +35 -0
- package/dist/components/overlays/modal/features/ModalConfirm.d.mts.map +1 -0
- package/dist/components/overlays/modal/features/ModalConfirm.mjs +2 -0
- package/dist/components/overlays/modal/features/ModalConfirm.mjs.map +1 -0
- package/dist/components/overlays/modal/features/ModalDialog.d.mts +20 -0
- package/dist/components/overlays/modal/features/ModalDialog.d.mts.map +1 -0
- package/dist/components/overlays/modal/features/ModalDialog.mjs +2 -0
- package/dist/components/overlays/modal/features/ModalDialog.mjs.map +1 -0
- package/dist/components/overlays/modal/index.d.mts +23 -0
- package/dist/components/overlays/modal/index.d.mts.map +1 -0
- package/dist/components/overlays/modal/index.mjs +2 -0
- package/dist/components/overlays/modal/index.mjs.map +1 -0
- package/dist/components/overlays/modal/modal-core.mjs +2 -0
- package/dist/components/overlays/modal/modal-core.mjs.map +1 -0
- package/dist/components/overlays/modal/modal-primitives.mjs +2 -0
- package/dist/components/overlays/modal/modal-primitives.mjs.map +1 -0
- package/dist/components/overlays/modal/modal-registry.d.mts +12 -0
- package/dist/components/overlays/modal/modal-registry.d.mts.map +1 -0
- package/dist/components/overlays/modal/modal-registry.mjs +2 -0
- package/dist/components/overlays/modal/modal-registry.mjs.map +1 -0
- package/dist/components/overlays/modal/modal-types.d.mts +40 -0
- package/dist/components/overlays/modal/modal-types.d.mts.map +1 -0
- package/dist/index.d.mts +5 -12
- package/dist/index.mjs +1 -1
- package/dist/providers/MageUiProvider.d.mts.map +1 -1
- package/dist/providers/MageUiProvider.mjs +1 -1
- package/dist/providers/MageUiProvider.mjs.map +1 -1
- package/package.json +2 -2
- package/dist/components/overlays/modal/ModalContext.mjs +0 -2
- package/dist/components/overlays/modal/ModalContext.mjs.map +0 -1
- package/dist/components/overlays/modals/ModalsProvider.d.mts +0 -13
- package/dist/components/overlays/modals/ModalsProvider.d.mts.map +0 -1
- package/dist/components/overlays/modals/ModalsProvider.mjs +0 -2
- package/dist/components/overlays/modals/ModalsProvider.mjs.map +0 -1
- package/dist/components/overlays/modals/alert/ModalAlert.d.mts +0 -31
- package/dist/components/overlays/modals/alert/ModalAlert.d.mts.map +0 -1
- package/dist/components/overlays/modals/alert/ModalAlert.mjs +0 -2
- package/dist/components/overlays/modals/alert/ModalAlert.mjs.map +0 -1
- package/dist/components/overlays/modals/alert/alert.d.mts +0 -7
- package/dist/components/overlays/modals/alert/alert.d.mts.map +0 -1
- package/dist/components/overlays/modals/alert/alert.mjs +0 -2
- package/dist/components/overlays/modals/alert/alert.mjs.map +0 -1
- package/dist/components/overlays/modals/alert/alertById.d.mts +0 -7
- package/dist/components/overlays/modals/alert/alertById.d.mts.map +0 -1
- package/dist/components/overlays/modals/alert/alertById.mjs +0 -2
- package/dist/components/overlays/modals/alert/alertById.mjs.map +0 -1
- package/dist/components/overlays/modals/base/BaseModal.d.mts +0 -17
- package/dist/components/overlays/modals/base/BaseModal.d.mts.map +0 -1
- package/dist/components/overlays/modals/base/BaseModal.mjs +0 -2
- package/dist/components/overlays/modals/base/BaseModal.mjs.map +0 -1
- package/dist/components/overlays/modals/confirm/ModalConfirm.d.mts +0 -40
- package/dist/components/overlays/modals/confirm/ModalConfirm.d.mts.map +0 -1
- package/dist/components/overlays/modals/confirm/ModalConfirm.mjs +0 -2
- package/dist/components/overlays/modals/confirm/ModalConfirm.mjs.map +0 -1
- package/dist/components/overlays/modals/confirm/confirm.d.mts +0 -7
- package/dist/components/overlays/modals/confirm/confirm.d.mts.map +0 -1
- package/dist/components/overlays/modals/confirm/confirm.mjs +0 -2
- package/dist/components/overlays/modals/confirm/confirm.mjs.map +0 -1
- package/dist/components/overlays/modals/confirm/confirmById.d.mts +0 -7
- package/dist/components/overlays/modals/confirm/confirmById.d.mts.map +0 -1
- package/dist/components/overlays/modals/confirm/confirmById.mjs +0 -2
- package/dist/components/overlays/modals/confirm/confirmById.mjs.map +0 -1
- package/dist/components/overlays/modals/registry/createModal.d.mts +0 -15
- package/dist/components/overlays/modals/registry/createModal.d.mts.map +0 -1
- package/dist/components/overlays/modals/registry/createModal.mjs +0 -2
- package/dist/components/overlays/modals/registry/createModal.mjs.map +0 -1
- package/dist/components/overlays/modals/registry/openModalById.d.mts +0 -5
- package/dist/components/overlays/modals/registry/openModalById.d.mts.map +0 -1
- package/dist/components/overlays/modals/registry/openModalById.mjs +0 -2
- package/dist/components/overlays/modals/registry/openModalById.mjs.map +0 -1
- package/dist/components/overlays/modals/registry/registerModal.d.mts +0 -7
- package/dist/components/overlays/modals/registry/registerModal.d.mts.map +0 -1
- package/dist/components/overlays/modals/registry/registerModal.mjs +0 -2
- package/dist/components/overlays/modals/registry/registerModal.mjs.map +0 -1
|
@@ -62,17 +62,10 @@ import "./misc/index.mjs";
|
|
|
62
62
|
import { Breadcrumbs, BreadcrumbsProps } from "./navigations/breadcrumbs/Breadcrumbs.mjs";
|
|
63
63
|
import { Sidebar, SidebarClassNames, SidebarProps } from "./navigations/sidebars/sidebar/Sidebar.mjs";
|
|
64
64
|
import "./navigations/index.mjs";
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import { ModalConfirm, ModalConfirmClassNames, ModalConfirmPublicProps } from "./overlays/modals/confirm/ModalConfirm.mjs";
|
|
70
|
-
import { confirm } from "./overlays/modals/confirm/confirm.mjs";
|
|
71
|
-
import { confirmById } from "./overlays/modals/confirm/confirmById.mjs";
|
|
72
|
-
import { ModalsProvider, ModalsProviderProps } from "./overlays/modals/ModalsProvider.mjs";
|
|
73
|
-
import { ModalComponent, ModalInternalProps, createModal } from "./overlays/modals/registry/createModal.mjs";
|
|
74
|
-
import { openModalById } from "./overlays/modals/registry/openModalById.mjs";
|
|
75
|
-
import { registerModal } from "./overlays/modals/registry/registerModal.mjs";
|
|
65
|
+
import { ModalClassNames, ModalIntent, ModalProps, ModalRootProps } from "./overlays/modal/modal-types.mjs";
|
|
66
|
+
import { ModalRegistry, ModalRegistryEntry } from "./overlays/modal/modal-registry.mjs";
|
|
67
|
+
import { Modal } from "./overlays/modal/Modal.mjs";
|
|
68
|
+
import { Modals } from "./overlays/modal/index.mjs";
|
|
76
69
|
import { Toast, ToastOptions, ToastProviderProps } from "./overlays/toast/toast.mjs";
|
|
77
70
|
import { Tooltip, TooltipProps } from "./overlays/tooltip/Tooltip.mjs";
|
|
78
71
|
import "./overlays/index.mjs";
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BreadcrumbsBarProps } from "./BreadcrumbsBar.mjs";
|
|
1
2
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { ReactNode } from "react";
|
|
3
4
|
|
|
@@ -11,6 +12,7 @@ type BreadcrumbsProps = {
|
|
|
11
12
|
list?: string;
|
|
12
13
|
item?: string;
|
|
13
14
|
separator?: string;
|
|
15
|
+
current?: string;
|
|
14
16
|
};
|
|
15
17
|
children?: ReactNode;
|
|
16
18
|
};
|
|
@@ -26,6 +28,15 @@ declare const Breadcrumbs: {
|
|
|
26
28
|
}: ItemProps): ReactNode;
|
|
27
29
|
displayName: string;
|
|
28
30
|
};
|
|
31
|
+
Bar: {
|
|
32
|
+
({
|
|
33
|
+
backText,
|
|
34
|
+
classNames,
|
|
35
|
+
children,
|
|
36
|
+
onBack
|
|
37
|
+
}: BreadcrumbsBarProps): ReactNode;
|
|
38
|
+
displayName: string;
|
|
39
|
+
};
|
|
29
40
|
};
|
|
30
41
|
type ItemProps = {
|
|
31
42
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"mappings":";;;;;KAuBY,gBAAA;EACV,SAAA,GAAY,SAAA;EACZ,UAAA;IACE,WAAA;IACA,IAAA;IACA,OAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;IACA,OAAA;EAAA;EAEF,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,WAAA;EAAA;;;;KAIV,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;OAmFS,SAAA,GAAS,SAAA;;;;;;;;;;;;;KAJhC,SAAA;EACH,QAAA,EAAU,SAAA;AAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{BreadcrumbsBar as e}from"./BreadcrumbsBar.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{breadcrumbs as n,breadcrumbsCurrent as r,breadcrumbsItem as i,breadcrumbsList as a,breadcrumbsRoot as o,breadcrumbsSeparator as s,breadcrumbsWrapper as c}from"@mage-ui/styled-system/recipes";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{Children as f,Fragment as p,cloneElement as m,isValidElement as h}from"react";const g=({separator:e=`/`,children:r,classNames:f})=>{let p=_(r);return u(`nav`,{"aria-label":`breadcrumb`,className:t(f?.breadcrumbs??n(),f?.root??o()),children:u(`div`,{className:f?.wrapper??c(),children:u(`ol`,{className:f?.list??a(),children:p.map((t,n)=>d(`li`,{className:f?.item??i(),children:[n<p.length-1&&d(l,{children:[t,u(`span`,{"aria-hidden":`true`,className:f?.separator??s(),children:e})]}),n===p.length-1&&v(t,f)]},t.key??`breadcrumbs-item-${n}`))})})})},_=e=>f.toArray(e).flatMap(e=>h(e)?e.type===p?_(e.props.children):e.type===y?[e]:[]:[]),v=(e,t)=>{if(h(e)&&h(e.props.children)){let t=e.props.children;return m(t,{"aria-current":`page`,...t.props??{}})}return u(`span`,{"aria-current":`page`,className:t?.current??r(),children:e})},y=({children:e})=>e;y.displayName=`Breadcrumbs.Item`,g.Item=y,g.Bar=e;export{g as Breadcrumbs};
|
|
2
2
|
//# sourceMappingURL=Breadcrumbs.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.mjs","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n breadcrumbs,\n breadcrumbsCurrent,\n breadcrumbsItem,\n breadcrumbsList,\n breadcrumbsRoot,\n breadcrumbsSeparator,\n breadcrumbsWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nexport type BreadcrumbsProps = {\n separator?: ReactNode;\n classNames?: {\n breadcrumbs?: string;\n root?: string;\n wrapper?: string;\n list?: string;\n item?: string;\n separator?: string;\n };\n children?: ReactNode;\n};\n\nexport const Breadcrumbs = ({\n separator = '/',\n children,\n classNames,\n}: BreadcrumbsProps) => {\n return (\n <nav\n aria-label='breadcrumb'\n className={cx(\n classNames?.breadcrumbs ?? breadcrumbs(),\n classNames?.root ?? breadcrumbsRoot(),\n )}\n >\n <div className={classNames?.wrapper ?? breadcrumbsWrapper()}>\n <ol className={classNames?.list ?? breadcrumbsList()}>\n {
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.mjs","names":["Fragment"],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n Fragment,\n type HTMLAttributes,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n breadcrumbs,\n breadcrumbsCurrent,\n breadcrumbsItem,\n breadcrumbsList,\n breadcrumbsRoot,\n breadcrumbsSeparator,\n breadcrumbsWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { BreadcrumbsBar } from './BreadcrumbsBar';\n\nexport type BreadcrumbsProps = {\n separator?: ReactNode;\n classNames?: {\n breadcrumbs?: string;\n root?: string;\n wrapper?: string;\n list?: string;\n item?: string;\n separator?: string;\n current?: string;\n };\n children?: ReactNode;\n};\n\nexport const Breadcrumbs = ({\n separator = '/',\n children,\n classNames,\n}: BreadcrumbsProps) => {\n const items = getItems(children);\n\n return (\n <nav\n aria-label='breadcrumb'\n className={cx(\n classNames?.breadcrumbs ?? breadcrumbs(),\n classNames?.root ?? breadcrumbsRoot(),\n )}\n >\n <div className={classNames?.wrapper ?? breadcrumbsWrapper()}>\n <ol className={classNames?.list ?? breadcrumbsList()}>\n {items.map((child, index) => (\n <li\n key={child.key ?? `breadcrumbs-item-${index}`}\n className={classNames?.item ?? breadcrumbsItem()}\n >\n {index < items.length - 1 && (\n <>\n {child}\n <span\n aria-hidden='true'\n className={classNames?.separator ?? breadcrumbsSeparator()}\n >\n {separator}\n </span>\n </>\n )}\n {index === items.length - 1 && lastItem(child, classNames)}\n </li>\n ))}\n </ol>\n </div>\n </nav>\n );\n};\n\ntype Child = ReactElement<{ children?: ReactNode }>;\n\nconst getItems = (children: ReactNode): Child[] => {\n return Children.toArray(children).flatMap((child) => {\n if (!isValidElement<{ children?: ReactNode }>(child)) {\n return [];\n }\n\n if (child.type === Fragment) {\n return getItems(child.props.children);\n }\n\n if (child.type === Item) {\n return [child];\n }\n\n return [];\n });\n};\n\nconst lastItem = (\n child: Child,\n classNames?: BreadcrumbsProps['classNames'],\n) => {\n if (isValidElement(child) && isValidElement(child.props.children)) {\n const childChildren = child.props.children as Child;\n return cloneElement(childChildren, {\n 'aria-current': 'page',\n ...(childChildren.props ?? {}),\n } as HTMLAttributes<HTMLElement>);\n }\n return (\n <span\n aria-current='page'\n className={classNames?.current ?? breadcrumbsCurrent()}\n >\n {child}\n </span>\n );\n};\n\ntype ItemProps = {\n children: ReactNode;\n};\n\nconst Item = ({ children }: ItemProps) => {\n return children;\n};\n\nItem.displayName = 'Breadcrumbs.Item';\nBreadcrumbs.Item = Item;\nBreadcrumbs.Bar = BreadcrumbsBar;\n"],"mappings":"icAqCA,MAAa,GAAe,CAC1B,YAAY,IACZ,WACA,gBACsB,CACtB,IAAM,EAAQ,EAAS,EAAS,CAEhC,OACE,EAAC,MAAA,CACC,aAAW,aACX,UAAW,EACT,GAAY,aAAe,GAAa,CACxC,GAAY,MAAQ,GAAiB,CACtC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAoB,UACzD,EAAC,KAAA,CAAG,UAAW,GAAY,MAAQ,GAAiB,UACjD,EAAM,KAAK,EAAO,IACjB,EAAC,KAAA,CAEC,UAAW,GAAY,MAAQ,GAAiB,WAE/C,EAAQ,EAAM,OAAS,GACtB,EAAA,EAAA,CAAA,SAAA,CACG,EACD,EAAC,OAAA,CACC,cAAY,OACZ,UAAW,GAAY,WAAa,GAAsB,UAEzD,GACI,CAAA,CAAA,CACN,CAEJ,IAAU,EAAM,OAAS,GAAK,EAAS,EAAO,EAAW,CAAA,EAdrD,EAAM,KAAO,oBAAoB,IAenC,CACL,EACC,EACD,EACF,EAMJ,EAAY,GACT,EAAS,QAAQ,EAAS,CAAC,QAAS,GACpC,EAAyC,EAAM,CAIhD,EAAM,OAASA,EACV,EAAS,EAAM,MAAM,SAAS,CAGnC,EAAM,OAAS,EACV,CAAC,EAAM,CAGT,EAAE,CAXA,EAAE,CAYX,CAGE,GACJ,EACA,IACG,CACH,GAAI,EAAe,EAAM,EAAI,EAAe,EAAM,MAAM,SAAS,CAAE,CACjE,IAAM,EAAgB,EAAM,MAAM,SAClC,OAAO,EAAa,EAAe,CACjC,eAAgB,OAChB,GAAI,EAAc,OAAS,EAAE,CAC9B,CAAgC,CAEnC,OACE,EAAC,OAAA,CACC,eAAa,OACb,UAAW,GAAY,SAAW,GAAoB,UAErD,GACI,EAQL,GAAQ,CAAE,cACP,EAGT,EAAK,YAAc,mBACnB,EAAY,KAAO,EACnB,EAAY,IAAM"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/navigations/breadcrumbs/BreadcrumbsBar.d.ts
|
|
4
|
+
type BreadcrumbsBarProps = {
|
|
5
|
+
backText?: ReactNode;
|
|
6
|
+
classNames?: {
|
|
7
|
+
breadcrumbsBar?: string;
|
|
8
|
+
root?: string;
|
|
9
|
+
wrapper?: string;
|
|
10
|
+
divider?: string;
|
|
11
|
+
buttonBack?: string;
|
|
12
|
+
};
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
onBack?: () => void;
|
|
15
|
+
};
|
|
16
|
+
//#endregion
|
|
17
|
+
export { BreadcrumbsBarProps };
|
|
18
|
+
//# sourceMappingURL=BreadcrumbsBar.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbsBar.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/BreadcrumbsBar.tsx"],"mappings":";;;KAYY,mBAAA;EACV,QAAA,GAAW,SAAA;EACX,UAAA;IACE,cAAA;IACA,IAAA;IACA,OAAA;IACA,OAAA;IACA,UAAA;EAAA;EAEF,QAAA,GAAW,SAAA;EACX,MAAA;AAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{cx as e}from"@mage-ui/styled-system/css";import{breadcrumbsBar as t,breadcrumbsBarButtonBack as n,breadcrumbsBarDivider as r,breadcrumbsBarRoot as i,breadcrumbsBarWrapper as a}from"@mage-ui/styled-system/recipes";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Breadcrumbs as c,Button as l,Icon as u}from"@mage-ui/components";const d=({backText:d,classNames:f,children:p,onBack:m})=>o(`div`,{className:e(f?.breadcrumbsBar??t(),f?.root??i()),children:s(`div`,{className:f?.wrapper??a(),children:[o(l,{startSlot:o(u,{path:`/icons/sprite-mage.svg`,name:`breadcrumbs-back`}),classNames:{button:f?.buttonBack??n()},onClick:m,children:d}),o(`span`,{className:f?.divider??r()}),o(c,{separator:o(u,{path:`/icons/sprite-mage.svg`,name:`breadcrumbs-separator`}),children:p})]})});d.displayName=`Breadcrumbs.Bar`;export{d as BreadcrumbsBar};
|
|
2
|
+
//# sourceMappingURL=BreadcrumbsBar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbsBar.mjs","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/BreadcrumbsBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Breadcrumbs, Button, Icon } from '@mage-ui/components';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n breadcrumbsBar,\n breadcrumbsBarButtonBack,\n breadcrumbsBarDivider,\n breadcrumbsBarRoot,\n breadcrumbsBarWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nexport type BreadcrumbsBarProps = {\n backText?: ReactNode;\n classNames?: {\n breadcrumbsBar?: string;\n root?: string;\n wrapper?: string;\n divider?: string;\n buttonBack?: string;\n };\n children?: ReactNode;\n onBack?: () => void;\n};\n\nexport const BreadcrumbsBar = ({\n backText,\n classNames,\n children,\n onBack,\n}: BreadcrumbsBarProps): ReactNode => {\n return (\n <div\n className={cx(\n classNames?.breadcrumbsBar ?? breadcrumbsBar(),\n classNames?.root ?? breadcrumbsBarRoot(),\n )}\n >\n <div className={classNames?.wrapper ?? breadcrumbsBarWrapper()}>\n <Button\n startSlot={\n <Icon path='/icons/sprite-mage.svg' name='breadcrumbs-back' />\n }\n classNames={{\n button: classNames?.buttonBack ?? breadcrumbsBarButtonBack(),\n }}\n onClick={onBack}\n >\n {backText}\n </Button>\n <span className={classNames?.divider ?? breadcrumbsBarDivider()} />\n <Breadcrumbs\n separator={\n <Icon path='/icons/sprite-mage.svg' name='breadcrumbs-separator' />\n }\n >\n {children}\n </Breadcrumbs>\n </div>\n </div>\n );\n};\n\nBreadcrumbsBar.displayName = 'Breadcrumbs.Bar';\n"],"mappings":"sVAyBA,MAAa,GAAkB,CAC7B,WACA,aACA,WACA,YAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,gBAAkB,GAAgB,CAC9C,GAAY,MAAQ,GAAoB,CACzC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAuB,WAC5D,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,oBAAqB,CAEhE,WAAY,CACV,OAAQ,GAAY,YAAc,GAA0B,CAC7D,CACD,QAAS,WAER,GACM,CACT,EAAC,OAAA,CAAK,UAAW,GAAY,SAAW,GAAuB,CAAA,CAAI,CACnE,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,yBAA0B,CAGpE,YACW,GACV,EACF,CAIV,EAAe,YAAc"}
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { ModalConfirm, ModalConfirmClassNames, ModalConfirmPublicProps } from "./modals/confirm/ModalConfirm.mjs";
|
|
6
|
-
import { confirm } from "./modals/confirm/confirm.mjs";
|
|
7
|
-
import { confirmById } from "./modals/confirm/confirmById.mjs";
|
|
8
|
-
import { ModalsProvider, ModalsProviderProps } from "./modals/ModalsProvider.mjs";
|
|
9
|
-
import { ModalComponent, ModalInternalProps, createModal } from "./modals/registry/createModal.mjs";
|
|
10
|
-
import { openModalById } from "./modals/registry/openModalById.mjs";
|
|
11
|
-
import { registerModal } from "./modals/registry/registerModal.mjs";
|
|
1
|
+
import { ModalClassNames, ModalIntent, ModalProps, ModalRootProps } from "./modal/modal-types.mjs";
|
|
2
|
+
import { ModalRegistry, ModalRegistryEntry } from "./modal/modal-registry.mjs";
|
|
3
|
+
import { Modal } from "./modal/Modal.mjs";
|
|
4
|
+
import { Modals } from "./modal/index.mjs";
|
|
12
5
|
import { Toast, ToastOptions, ToastProviderProps } from "./toast/toast.mjs";
|
|
13
6
|
import { Tooltip, TooltipProps } from "./tooltip/Tooltip.mjs";
|
|
@@ -1,72 +1,31 @@
|
|
|
1
|
+
import { ModalClassNames, ModalIntent, ModalProps, ModalRootProps } from "./modal-types.mjs";
|
|
2
|
+
import { ModalRegistry, ModalRegistryEntry, registerModal } from "./modal-registry.mjs";
|
|
1
3
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
-
import
|
|
4
|
+
import * as react from "react";
|
|
5
|
+
import * as _ebay_nice_modal_react0 from "@ebay/nice-modal-react";
|
|
3
6
|
|
|
4
7
|
//#region src/components/overlays/modal/Modal.d.ts
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
classNames?: {
|
|
18
|
-
modal?: string;
|
|
19
|
-
root?: string;
|
|
20
|
-
overlay?: string;
|
|
21
|
-
inner?: string;
|
|
22
|
-
content?: string;
|
|
23
|
-
header?: string;
|
|
24
|
-
title?: string;
|
|
25
|
-
body?: string;
|
|
26
|
-
close?: string;
|
|
27
|
-
footer?: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
declare const Modal: {
|
|
31
|
-
({
|
|
32
|
-
opened,
|
|
33
|
-
onClose,
|
|
34
|
-
id,
|
|
35
|
-
title,
|
|
36
|
-
children,
|
|
37
|
-
centered,
|
|
38
|
-
withCloseButton,
|
|
39
|
-
closeOnClickOutside,
|
|
40
|
-
closeOnEscape,
|
|
41
|
-
withinPortal,
|
|
42
|
-
keepMounted,
|
|
43
|
-
classNames
|
|
44
|
-
}: ModalProps): react_jsx_runtime0.JSX.Element;
|
|
45
|
-
Root: {
|
|
46
|
-
({
|
|
47
|
-
opened,
|
|
48
|
-
onClose,
|
|
49
|
-
children,
|
|
50
|
-
id,
|
|
51
|
-
withinPortal,
|
|
52
|
-
keepMounted,
|
|
53
|
-
centered,
|
|
54
|
-
classNames,
|
|
55
|
-
intent
|
|
56
|
-
}: ModalRootProps): react_jsx_runtime0.JSX.Element;
|
|
57
|
-
displayName: string;
|
|
58
|
-
};
|
|
8
|
+
declare const Modal: (({
|
|
9
|
+
id,
|
|
10
|
+
...props
|
|
11
|
+
}: ModalProps) => react_jsx_runtime0.JSX.Element) & {
|
|
12
|
+
displayName: "Modal";
|
|
13
|
+
Provider: react.ComponentType<{
|
|
14
|
+
children: react.ReactNode;
|
|
15
|
+
modals?: ModalRegistry;
|
|
16
|
+
}>;
|
|
17
|
+
register: typeof registerModal;
|
|
18
|
+
show: typeof _ebay_nice_modal_react0.show;
|
|
19
|
+
hide: typeof _ebay_nice_modal_react0.hide;
|
|
59
20
|
Overlay: {
|
|
60
|
-
(
|
|
61
|
-
children?: never;
|
|
62
|
-
}): react_jsx_runtime0.JSX.Element;
|
|
21
|
+
(): react_jsx_runtime0.JSX.Element;
|
|
63
22
|
displayName: string;
|
|
64
23
|
};
|
|
65
24
|
Content: {
|
|
66
25
|
({
|
|
67
26
|
children
|
|
68
27
|
}: {
|
|
69
|
-
children: ReactNode;
|
|
28
|
+
children: react.ReactNode;
|
|
70
29
|
}): react_jsx_runtime0.JSX.Element;
|
|
71
30
|
displayName: string;
|
|
72
31
|
};
|
|
@@ -74,7 +33,7 @@ declare const Modal: {
|
|
|
74
33
|
({
|
|
75
34
|
children
|
|
76
35
|
}: {
|
|
77
|
-
children: ReactNode;
|
|
36
|
+
children: react.ReactNode;
|
|
78
37
|
}): react_jsx_runtime0.JSX.Element;
|
|
79
38
|
displayName: string;
|
|
80
39
|
};
|
|
@@ -82,7 +41,7 @@ declare const Modal: {
|
|
|
82
41
|
({
|
|
83
42
|
children
|
|
84
43
|
}: {
|
|
85
|
-
children: ReactNode;
|
|
44
|
+
children: react.ReactNode;
|
|
86
45
|
}): react_jsx_runtime0.JSX.Element;
|
|
87
46
|
displayName: string;
|
|
88
47
|
};
|
|
@@ -90,7 +49,7 @@ declare const Modal: {
|
|
|
90
49
|
({
|
|
91
50
|
children
|
|
92
51
|
}: {
|
|
93
|
-
children: ReactNode;
|
|
52
|
+
children: react.ReactNode;
|
|
94
53
|
}): react_jsx_runtime0.JSX.Element;
|
|
95
54
|
displayName: string;
|
|
96
55
|
};
|
|
@@ -103,13 +62,10 @@ declare const Modal: {
|
|
|
103
62
|
children,
|
|
104
63
|
className,
|
|
105
64
|
...props
|
|
106
|
-
}: HTMLAttributes<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
|
|
65
|
+
}: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
|
|
107
66
|
displayName: string;
|
|
108
67
|
};
|
|
109
68
|
};
|
|
110
|
-
type ModalRootProps = Omit<ModalProps, 'title' | 'withCloseButton'> & {
|
|
111
|
-
intent?: 'default' | 'info' | 'success' | 'warning' | 'danger';
|
|
112
|
-
};
|
|
113
69
|
//#endregion
|
|
114
|
-
export { Modal
|
|
70
|
+
export { Modal };
|
|
115
71
|
//# sourceMappingURL=Modal.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.mts","names":[],"sources":["../../../../src/components/overlays/modal/Modal.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Modal.d.mts","names":[],"sources":["../../../../src/components/overlays/modal/Modal.tsx"],"mappings":";;;;;;;cAsBa,KAAA;EAAK,EAAA;EAAA,GAAA;AAAA,GAAA,UAAA,KAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cAAA,KAAA,CAAA,SAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{ModalBody as e,ModalCloseButton as t,ModalContent as n,ModalFooter as r,ModalHeader as i,ModalOverlay as a,ModalTitle as o}from"./modal-primitives.mjs";import{ModalInner as s}from"./modal-core.mjs";import{ModalProvider as c,registerModal as l}from"./modal-registry.mjs";import u from"@ebay/nice-modal-react";const d=Object.assign(s,{displayName:`Modal`,Provider:c,register:l,show:u.show,hide:u.hide,Overlay:a,Content:n,Header:i,Body:e,Title:o,CloseButton:t,Footer:r});export{d as Modal};
|
|
2
2
|
//# sourceMappingURL=Modal.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.mjs","names":[
|
|
1
|
+
{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../../src/components/overlays/modal/Modal.tsx"],"sourcesContent":["import NiceModal from '@ebay/nice-modal-react';\n\nimport { ModalInner } from './modal-core';\nimport {\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from './modal-primitives';\nimport { ModalProvider, registerModal } from './modal-registry';\n\nexport type { ModalRegistry, ModalRegistryEntry } from './modal-registry';\nexport type {\n ModalClassNames,\n ModalIntent,\n ModalProps,\n ModalRootProps,\n} from './modal-types';\n\nexport const Modal = Object.assign(ModalInner, {\n displayName: 'Modal' as const,\n Provider: ModalProvider,\n register: registerModal,\n show: NiceModal.show,\n hide: NiceModal.hide,\n Overlay: ModalOverlay,\n Content: ModalContent,\n Header: ModalHeader,\n Body: ModalBody,\n Title: ModalTitle,\n CloseButton: ModalCloseButton,\n Footer: ModalFooter,\n});\n"],"mappings":"2TAsBA,MAAa,EAAQ,OAAO,OAAO,EAAY,CAC7C,YAAa,QACb,SAAU,EACV,SAAU,EACV,KAAM,EAAU,KAChB,KAAM,EAAU,KAChB,QAAS,EACT,QAAS,EACT,OAAQ,EACR,KAAM,EACN,MAAO,EACP,YAAa,EACb,OAAQ,EACT,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ModalClassNames } from "../modal-types.mjs";
|
|
2
|
+
import "../Modal.mjs";
|
|
3
|
+
import { ModalDialogProps } from "./ModalDialog.mjs";
|
|
4
|
+
import "react/jsx-runtime";
|
|
5
|
+
import { ReactNode } from "react";
|
|
6
|
+
|
|
7
|
+
//#region src/components/overlays/modal/features/ModalAlert.d.ts
|
|
8
|
+
type ModalAlertClassNames = ModalClassNames & {
|
|
9
|
+
footer?: string;
|
|
10
|
+
confirmButton?: {
|
|
11
|
+
button?: string;
|
|
12
|
+
root?: string;
|
|
13
|
+
inner?: string;
|
|
14
|
+
label?: string;
|
|
15
|
+
section?: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
type ModalAlertProps = Omit<ModalDialogProps, 'id' | 'footer'> & {
|
|
19
|
+
content?: ReactNode;
|
|
20
|
+
confirmLabel?: ReactNode;
|
|
21
|
+
onConfirm?: () => void;
|
|
22
|
+
classNames?: ModalAlertClassNames;
|
|
23
|
+
};
|
|
24
|
+
//#endregion
|
|
25
|
+
export { ModalAlertProps };
|
|
26
|
+
//# sourceMappingURL=ModalAlert.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalAlert.d.mts","names":[],"sources":["../../../../../src/components/overlays/modal/features/ModalAlert.tsx"],"mappings":";;;;;;;KAyBY,oBAAA,GAAuB,eAAA;EACjC,MAAA;EACA,aAAA;IACE,MAAA;IACA,IAAA;IACA,KAAA;IACA,KAAA;IACA,OAAA;EAAA;AAAA;AAAA,KAIQ,eAAA,GAAkB,IAAA,CAAK,gBAAA;EACjC,OAAA,GAAU,SAAA;EACV,YAAA,GAAe,SAAA;EACf,SAAA;EACA,UAAA,GAAa,oBAAA;AAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Button as e}from"../../../buttons/button/Button.mjs";import{ModalDialog as t}from"./ModalDialog.mjs";import{modalAlert as n,modalAlertBody as r,modalAlertButtonConfirm as i,modalAlertButtonConfirmInner as a,modalAlertButtonConfirmLabel as o,modalAlertButtonConfirmRoot as s,modalAlertButtonConfirmSection as c,modalAlertClose as l,modalAlertContent as u,modalAlertFooter as d,modalAlertHeader as f,modalAlertInner as p,modalAlertOverlay as m,modalAlertRoot as h,modalAlertTitle as g}from"@mage-ui/styled-system/recipes";import{jsx as _}from"react/jsx-runtime";import{useModal as v}from"@ebay/nice-modal-react";const y=({id:y})=>{let b=v(y),{title:x,content:S,confirmLabel:C=`Close`,onConfirm:w,classNames:T}=b.args;return _(t,{id:y,title:x,body:S,classNames:{modal:T?.modal??n(),root:T?.root??h(),overlay:T?.overlay??m(),inner:T?.inner??p(),content:T?.content??u(),header:T?.header??f(),title:T?.title??g(),close:T?.close??l(),body:T?.body??r(),footer:T?.footer??d()},footer:_(e,{onClick:()=>{w?.(),b.resolve(!0),b.hide()},classNames:{button:T?.confirmButton?.button??i(),root:T?.confirmButton?.root??s(),inner:T?.confirmButton?.inner??a(),label:T?.confirmButton?.label??o(),section:T?.confirmButton?.section??c()},children:C})})};export{y as ModalAlert};
|
|
2
|
+
//# sourceMappingURL=ModalAlert.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalAlert.mjs","names":[],"sources":["../../../../../src/components/overlays/modal/features/ModalAlert.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useModal } from '@ebay/nice-modal-react';\nimport {\n modalAlert,\n modalAlertBody,\n modalAlertButtonConfirm,\n modalAlertButtonConfirmInner,\n modalAlertButtonConfirmLabel,\n modalAlertButtonConfirmRoot,\n modalAlertButtonConfirmSection,\n modalAlertClose,\n modalAlertContent,\n modalAlertFooter,\n modalAlertHeader,\n modalAlertInner,\n modalAlertOverlay,\n modalAlertRoot,\n modalAlertTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Button } from '@/components/buttons';\n\nimport type { ModalClassNames } from '../Modal';\nimport { ModalDialog, type ModalDialogProps } from './ModalDialog';\n\nexport type ModalAlertClassNames = ModalClassNames & {\n footer?: string;\n confirmButton?: {\n button?: string;\n root?: string;\n inner?: string;\n label?: string;\n section?: string;\n };\n};\n\nexport type ModalAlertProps = Omit<ModalDialogProps, 'id' | 'footer'> & {\n content?: ReactNode;\n confirmLabel?: ReactNode;\n onConfirm?: () => void;\n classNames?: ModalAlertClassNames;\n};\n\ntype ModalAlertComponentProps = {\n id: string;\n} & Partial<ModalAlertProps>;\n\nexport const ModalAlert = ({ id }: ModalAlertComponentProps) => {\n const modal = useModal(id);\n\n const {\n title,\n content,\n confirmLabel = 'Close',\n onConfirm,\n classNames,\n } = modal.args as Partial<ModalAlertProps>;\n\n const handleConfirm = () => {\n onConfirm?.();\n modal.resolve(true);\n modal.hide();\n };\n\n const modalClassNames = {\n modal: classNames?.modal ?? modalAlert(),\n root: classNames?.root ?? modalAlertRoot(),\n overlay: classNames?.overlay ?? modalAlertOverlay(),\n inner: classNames?.inner ?? modalAlertInner(),\n content: classNames?.content ?? modalAlertContent(),\n header: classNames?.header ?? modalAlertHeader(),\n title: classNames?.title ?? modalAlertTitle(),\n close: classNames?.close ?? modalAlertClose(),\n body: classNames?.body ?? modalAlertBody(),\n footer: classNames?.footer ?? modalAlertFooter(),\n };\n\n const confirmButtonClassNames = {\n button: classNames?.confirmButton?.button ?? modalAlertButtonConfirm(),\n root: classNames?.confirmButton?.root ?? modalAlertButtonConfirmRoot(),\n inner: classNames?.confirmButton?.inner ?? modalAlertButtonConfirmInner(),\n label: classNames?.confirmButton?.label ?? modalAlertButtonConfirmLabel(),\n section:\n classNames?.confirmButton?.section ?? modalAlertButtonConfirmSection(),\n };\n\n return (\n <ModalDialog\n id={id}\n title={title}\n body={content}\n classNames={modalClassNames}\n footer={\n <Button onClick={handleConfirm} classNames={confirmButtonClassNames}>\n {confirmLabel}\n </Button>\n }\n />\n );\n};\n"],"mappings":"ymBA+CA,MAAa,GAAc,CAAE,QAAmC,CAC9D,IAAM,EAAQ,EAAS,EAAG,CAEpB,CACJ,QACA,UACA,eAAe,QACf,YACA,cACE,EAAM,KA8BV,OACE,EAAC,EAAA,CACK,KACG,QACP,KAAM,EACN,WA3BoB,CACtB,MAAO,GAAY,OAAS,GAAY,CACxC,KAAM,GAAY,MAAQ,GAAgB,CAC1C,QAAS,GAAY,SAAW,GAAmB,CACnD,MAAO,GAAY,OAAS,GAAiB,CAC7C,QAAS,GAAY,SAAW,GAAmB,CACnD,OAAQ,GAAY,QAAU,GAAkB,CAChD,MAAO,GAAY,OAAS,GAAiB,CAC7C,MAAO,GAAY,OAAS,GAAiB,CAC7C,KAAM,GAAY,MAAQ,GAAgB,CAC1C,OAAQ,GAAY,QAAU,GAAkB,CACjD,CAiBG,OACE,EAAC,EAAA,CAAO,YAnCc,CAC1B,KAAa,CACb,EAAM,QAAQ,GAAK,CACnB,EAAM,MAAM,EAgCwB,WAhBN,CAC9B,OAAQ,GAAY,eAAe,QAAU,GAAyB,CACtE,KAAM,GAAY,eAAe,MAAQ,GAA6B,CACtE,MAAO,GAAY,eAAe,OAAS,GAA8B,CACzE,MAAO,GAAY,eAAe,OAAS,GAA8B,CACzE,QACE,GAAY,eAAe,SAAW,GAAgC,CACzE,UAUQ,GACM,EAEX"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ModalClassNames } from "../modal-types.mjs";
|
|
2
|
+
import "../Modal.mjs";
|
|
3
|
+
import { ModalDialogProps } from "./ModalDialog.mjs";
|
|
4
|
+
import "react/jsx-runtime";
|
|
5
|
+
import { ReactNode } from "react";
|
|
6
|
+
|
|
7
|
+
//#region src/components/overlays/modal/features/ModalConfirm.d.ts
|
|
8
|
+
type ModalConfirmClassNames = ModalClassNames & {
|
|
9
|
+
footer?: string;
|
|
10
|
+
confirmButton?: {
|
|
11
|
+
button?: string;
|
|
12
|
+
root?: string;
|
|
13
|
+
inner?: string;
|
|
14
|
+
label?: string;
|
|
15
|
+
section?: string;
|
|
16
|
+
};
|
|
17
|
+
cancelButton?: {
|
|
18
|
+
button?: string;
|
|
19
|
+
root?: string;
|
|
20
|
+
inner?: string;
|
|
21
|
+
label?: string;
|
|
22
|
+
section?: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
type ModalConfirmProps = Omit<ModalDialogProps, 'id' | 'footer'> & {
|
|
26
|
+
content?: ReactNode;
|
|
27
|
+
confirmLabel?: ReactNode;
|
|
28
|
+
cancelLabel?: ReactNode;
|
|
29
|
+
onConfirm?: () => void;
|
|
30
|
+
onCancel?: () => void;
|
|
31
|
+
classNames?: ModalConfirmClassNames;
|
|
32
|
+
};
|
|
33
|
+
//#endregion
|
|
34
|
+
export { ModalConfirmProps };
|
|
35
|
+
//# sourceMappingURL=ModalConfirm.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalConfirm.d.mts","names":[],"sources":["../../../../../src/components/overlays/modal/features/ModalConfirm.tsx"],"mappings":";;;;;;;KA8BY,sBAAA,GAAyB,eAAA;EACnC,MAAA;EACA,aAAA;IACE,MAAA;IACA,IAAA;IACA,KAAA;IACA,KAAA;IACA,OAAA;EAAA;EAEF,YAAA;IACE,MAAA;IACA,IAAA;IACA,KAAA;IACA,KAAA;IACA,OAAA;EAAA;AAAA;AAAA,KAIQ,iBAAA,GAAoB,IAAA,CAAK,gBAAA;EACnC,OAAA,GAAU,SAAA;EACV,YAAA,GAAe,SAAA;EACf,WAAA,GAAc,SAAA;EACd,SAAA;EACA,QAAA;EACA,UAAA,GAAa,sBAAA;AAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Button as e}from"../../../buttons/button/Button.mjs";import{ModalDialog as t}from"./ModalDialog.mjs";import{modalConfirm as n,modalConfirmBody as r,modalConfirmButtonCancel as i,modalConfirmButtonCancelInner as a,modalConfirmButtonCancelLabel as o,modalConfirmButtonCancelRoot as s,modalConfirmButtonCancelSection as c,modalConfirmButtonConfirm as l,modalConfirmButtonConfirmInner as u,modalConfirmButtonConfirmLabel as d,modalConfirmButtonConfirmRoot as f,modalConfirmButtonConfirmSection as p,modalConfirmClose as m,modalConfirmContent as h,modalConfirmFooter as g,modalConfirmHeader as _,modalConfirmInner as v,modalConfirmOverlay as y,modalConfirmRoot as b,modalConfirmTitle as x}from"@mage-ui/styled-system/recipes";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{useModal as T}from"@ebay/nice-modal-react";const E=({id:E})=>{let D=T(E),{title:O,content:k,confirmLabel:A=`Confirm`,cancelLabel:j=`Cancel`,intent:M,onConfirm:N,onCancel:P,classNames:F}=D.args,I={modal:F?.modal??n(),root:F?.root??b(),overlay:F?.overlay??y(),inner:F?.inner??v(),content:F?.content??h(),header:F?.header??_(),title:F?.title??x(),close:F?.close??m(),body:F?.body??r(),footer:F?.footer??g()},L={button:F?.confirmButton?.button??l(),root:F?.confirmButton?.root??f(),inner:F?.confirmButton?.inner??u(),label:F?.confirmButton?.label??d(),section:F?.confirmButton?.section??p()},R={button:F?.cancelButton?.button??i(),root:F?.cancelButton?.root??s(),inner:F?.cancelButton?.inner??a(),label:F?.cancelButton?.label??o(),section:F?.cancelButton?.section??c()},z=()=>{N?.(),D.resolve(!0),D.hide()},B=()=>{P?.(),D.resolve(!1),D.hide()};return C(t,{id:E,title:O,body:k,intent:M,classNames:I,onClose:B,footer:w(S,{children:[C(e,{onClick:B,classNames:R,children:j}),C(e,{onClick:z,classNames:L,children:A})]})})};export{E as ModalConfirm};
|
|
2
|
+
//# sourceMappingURL=ModalConfirm.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalConfirm.mjs","names":[],"sources":["../../../../../src/components/overlays/modal/features/ModalConfirm.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useModal } from '@ebay/nice-modal-react';\nimport {\n modalConfirm,\n modalConfirmBody,\n modalConfirmButtonCancel,\n modalConfirmButtonCancelInner,\n modalConfirmButtonCancelLabel,\n modalConfirmButtonCancelRoot,\n modalConfirmButtonCancelSection,\n modalConfirmButtonConfirm,\n modalConfirmButtonConfirmInner,\n modalConfirmButtonConfirmLabel,\n modalConfirmButtonConfirmRoot,\n modalConfirmButtonConfirmSection,\n modalConfirmClose,\n modalConfirmContent,\n modalConfirmFooter,\n modalConfirmHeader,\n modalConfirmInner,\n modalConfirmOverlay,\n modalConfirmRoot,\n modalConfirmTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Button } from '@/components/buttons';\n\nimport type { ModalClassNames } from '../Modal';\nimport { ModalDialog, type ModalDialogProps } from './ModalDialog';\n\nexport type ModalConfirmClassNames = ModalClassNames & {\n footer?: string;\n confirmButton?: {\n button?: string;\n root?: string;\n inner?: string;\n label?: string;\n section?: string;\n };\n cancelButton?: {\n button?: string;\n root?: string;\n inner?: string;\n label?: string;\n section?: string;\n };\n};\n\nexport type ModalConfirmProps = Omit<ModalDialogProps, 'id' | 'footer'> & {\n content?: ReactNode;\n confirmLabel?: ReactNode;\n cancelLabel?: ReactNode;\n onConfirm?: () => void;\n onCancel?: () => void;\n classNames?: ModalConfirmClassNames;\n};\n\ntype ModalConfirmComponentProps = {\n id: string;\n} & Partial<ModalConfirmProps>;\n\nexport const ModalConfirm = ({ id }: ModalConfirmComponentProps) => {\n const modal = useModal(id);\n const {\n title,\n content,\n confirmLabel = 'Confirm',\n cancelLabel = 'Cancel',\n intent,\n onConfirm,\n onCancel,\n classNames,\n } = modal.args as Partial<ModalConfirmProps>;\n\n const modalClassNames = {\n modal: classNames?.modal ?? modalConfirm(),\n root: classNames?.root ?? modalConfirmRoot(),\n overlay: classNames?.overlay ?? modalConfirmOverlay(),\n inner: classNames?.inner ?? modalConfirmInner(),\n content: classNames?.content ?? modalConfirmContent(),\n header: classNames?.header ?? modalConfirmHeader(),\n title: classNames?.title ?? modalConfirmTitle(),\n close: classNames?.close ?? modalConfirmClose(),\n body: classNames?.body ?? modalConfirmBody(),\n footer: classNames?.footer ?? modalConfirmFooter(),\n };\n\n const confirmButtonClassNames = {\n button: classNames?.confirmButton?.button ?? modalConfirmButtonConfirm(),\n root: classNames?.confirmButton?.root ?? modalConfirmButtonConfirmRoot(),\n inner: classNames?.confirmButton?.inner ?? modalConfirmButtonConfirmInner(),\n label: classNames?.confirmButton?.label ?? modalConfirmButtonConfirmLabel(),\n section:\n classNames?.confirmButton?.section ?? modalConfirmButtonConfirmSection(),\n };\n\n const cancelButtonClassNames = {\n button: classNames?.cancelButton?.button ?? modalConfirmButtonCancel(),\n root: classNames?.cancelButton?.root ?? modalConfirmButtonCancelRoot(),\n inner: classNames?.cancelButton?.inner ?? modalConfirmButtonCancelInner(),\n label: classNames?.cancelButton?.label ?? modalConfirmButtonCancelLabel(),\n section:\n classNames?.cancelButton?.section ?? modalConfirmButtonCancelSection(),\n };\n\n const handleConfirm = () => {\n onConfirm?.();\n modal.resolve(true);\n modal.hide();\n };\n\n const handleCancel = () => {\n onCancel?.();\n modal.resolve(false);\n modal.hide();\n };\n\n return (\n <ModalDialog\n id={id}\n title={title}\n body={content}\n intent={intent}\n classNames={modalClassNames}\n onClose={handleCancel}\n footer={\n <>\n <Button onClick={handleCancel} classNames={cancelButtonClassNames}>\n {cancelLabel}\n </Button>\n\n <Button onClick={handleConfirm} classNames={confirmButtonClassNames}>\n {confirmLabel}\n </Button>\n </>\n }\n />\n );\n};\n"],"mappings":"00BA6DA,MAAa,GAAgB,CAAE,QAAqC,CAClE,IAAM,EAAQ,EAAS,EAAG,CACpB,CACJ,QACA,UACA,eAAe,UACf,cAAc,SACd,SACA,YACA,WACA,cACE,EAAM,KAEJ,EAAkB,CACtB,MAAO,GAAY,OAAS,GAAc,CAC1C,KAAM,GAAY,MAAQ,GAAkB,CAC5C,QAAS,GAAY,SAAW,GAAqB,CACrD,MAAO,GAAY,OAAS,GAAmB,CAC/C,QAAS,GAAY,SAAW,GAAqB,CACrD,OAAQ,GAAY,QAAU,GAAoB,CAClD,MAAO,GAAY,OAAS,GAAmB,CAC/C,MAAO,GAAY,OAAS,GAAmB,CAC/C,KAAM,GAAY,MAAQ,GAAkB,CAC5C,OAAQ,GAAY,QAAU,GAAoB,CACnD,CAEK,EAA0B,CAC9B,OAAQ,GAAY,eAAe,QAAU,GAA2B,CACxE,KAAM,GAAY,eAAe,MAAQ,GAA+B,CACxE,MAAO,GAAY,eAAe,OAAS,GAAgC,CAC3E,MAAO,GAAY,eAAe,OAAS,GAAgC,CAC3E,QACE,GAAY,eAAe,SAAW,GAAkC,CAC3E,CAEK,EAAyB,CAC7B,OAAQ,GAAY,cAAc,QAAU,GAA0B,CACtE,KAAM,GAAY,cAAc,MAAQ,GAA8B,CACtE,MAAO,GAAY,cAAc,OAAS,GAA+B,CACzE,MAAO,GAAY,cAAc,OAAS,GAA+B,CACzE,QACE,GAAY,cAAc,SAAW,GAAiC,CACzE,CAEK,MAAsB,CAC1B,KAAa,CACb,EAAM,QAAQ,GAAK,CACnB,EAAM,MAAM,EAGR,MAAqB,CACzB,KAAY,CACZ,EAAM,QAAQ,GAAM,CACpB,EAAM,MAAM,EAGd,OACE,EAAC,EAAA,CACK,KACG,QACP,KAAM,EACE,SACR,WAAY,EACZ,QAAS,EACT,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CAAO,QAAS,EAAc,WAAY,WACxC,GACM,CAET,EAAC,EAAA,CAAO,QAAS,EAAe,WAAY,WACzC,GACM,CAAA,CAAA,CACR,EAEL"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ModalClassNames, ModalIntent } from "../modal-types.mjs";
|
|
2
|
+
import "../Modal.mjs";
|
|
3
|
+
import "react/jsx-runtime";
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/overlays/modal/features/ModalDialog.d.ts
|
|
7
|
+
type ModalDialogProps = {
|
|
8
|
+
id: string;
|
|
9
|
+
title?: ReactNode;
|
|
10
|
+
body?: ReactNode;
|
|
11
|
+
intent?: ModalIntent;
|
|
12
|
+
footer?: ReactNode;
|
|
13
|
+
classNames?: ModalClassNames & {
|
|
14
|
+
footer?: string;
|
|
15
|
+
};
|
|
16
|
+
onClose?: () => void;
|
|
17
|
+
};
|
|
18
|
+
//#endregion
|
|
19
|
+
export { ModalDialogProps };
|
|
20
|
+
//# sourceMappingURL=ModalDialog.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalDialog.d.mts","names":[],"sources":["../../../../../src/components/overlays/modal/features/ModalDialog.tsx"],"mappings":";;;;;;KAIY,gBAAA;EACV,EAAA;EACA,KAAA,GAAQ,SAAA;EACR,IAAA,GAAO,SAAA;EACP,MAAA,GAAS,WAAA;EACT,MAAA,GAAS,SAAA;EACT,UAAA,GAAa,eAAA;IAAoB,MAAA;EAAA;EACjC,OAAA;AAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Modal as e}from"../Modal.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({title:r,body:i,footer:a,classNames:o,...s})=>n(e,{classNames:o,...s,children:[t(e.Overlay,{}),n(e.Content,{children:[n(e.Header,{children:[t(e.Title,{children:r}),t(e.CloseButton,{})]}),t(e.Body,{children:i}),t(e.Footer,{className:o?.footer,children:a})]})]});export{r as ModalDialog};
|
|
2
|
+
//# sourceMappingURL=ModalDialog.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalDialog.mjs","names":[],"sources":["../../../../../src/components/overlays/modal/features/ModalDialog.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Modal, type ModalClassNames, type ModalIntent } from '../Modal';\n\nexport type ModalDialogProps = {\n id: string;\n title?: ReactNode;\n body?: ReactNode;\n intent?: ModalIntent;\n footer?: ReactNode;\n classNames?: ModalClassNames & { footer?: string };\n onClose?: () => void;\n};\n\nexport const ModalDialog = ({\n title,\n body,\n footer,\n classNames,\n ...props\n}: ModalDialogProps) => {\n return (\n <Modal classNames={classNames} {...props}>\n <Modal.Overlay />\n <Modal.Content>\n <Modal.Header>\n <Modal.Title>{title}</Modal.Title>\n <Modal.CloseButton />\n </Modal.Header>\n\n <Modal.Body>{body}</Modal.Body>\n\n <Modal.Footer className={classNames?.footer}>{footer}</Modal.Footer>\n </Modal.Content>\n </Modal>\n );\n};\n"],"mappings":"uFAcA,MAAa,GAAe,CAC1B,QACA,OACA,SACA,aACA,GAAG,KAGD,EAAC,EAAA,CAAkB,aAAY,GAAI,YACjC,EAAC,EAAM,QAAA,EAAA,CAAU,CACjB,EAAC,EAAM,QAAA,CAAA,SAAA,CACL,EAAC,EAAM,OAAA,CAAA,SAAA,CACL,EAAC,EAAM,MAAA,CAAA,SAAO,EAAA,CAAoB,CAClC,EAAC,EAAM,YAAA,EAAA,CAAc,CAAA,CAAA,CACR,CAEf,EAAC,EAAM,KAAA,CAAA,SAAM,EAAA,CAAkB,CAE/B,EAAC,EAAM,OAAA,CAAO,UAAW,GAAY,gBAAS,GAAsB,GACtD,CAAA,EACV"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ModalClassNames, ModalIntent, ModalProps, ModalRootProps } from "./modal-types.mjs";
|
|
2
|
+
import { ModalRegistry, ModalRegistryEntry } from "./modal-registry.mjs";
|
|
3
|
+
import { Modal } from "./Modal.mjs";
|
|
4
|
+
import { ModalAlertProps } from "./features/ModalAlert.mjs";
|
|
5
|
+
import { ModalConfirmProps } from "./features/ModalConfirm.mjs";
|
|
6
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
7
|
+
|
|
8
|
+
//#region src/components/overlays/modal/index.d.ts
|
|
9
|
+
declare const Modals: {
|
|
10
|
+
readonly Alert: ({
|
|
11
|
+
id
|
|
12
|
+
}: {
|
|
13
|
+
id: string;
|
|
14
|
+
} & Partial<ModalAlertProps>) => react_jsx_runtime0.JSX.Element;
|
|
15
|
+
readonly Confirm: ({
|
|
16
|
+
id
|
|
17
|
+
}: {
|
|
18
|
+
id: string;
|
|
19
|
+
} & Partial<ModalConfirmProps>) => react_jsx_runtime0.JSX.Element;
|
|
20
|
+
};
|
|
21
|
+
//#endregion
|
|
22
|
+
export { Modals };
|
|
23
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/overlays/modal/index.ts"],"mappings":";;;;;;;;cAKa,MAAA;EAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/overlays/modal/index.ts"],"sourcesContent":["import { ModalAlert } from './features/ModalAlert';\nimport { ModalConfirm } from './features/ModalConfirm';\n\nexport * from './Modal';\n\nexport const Modals = {\n Alert: ModalAlert,\n Confirm: ModalConfirm,\n} as const;\n"],"mappings":"sJAKA,MAAa,EAAS,CACpB,MAAO,EACP,QAAS,EACV"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{ModalBody as e,ModalCloseButton as t,ModalContent as n,ModalHeader as r,ModalOverlay as i,ModalRoot as a,ModalTitle as o}from"./modal-primitives.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";import l,{useEffect as u,useState as d}from"react";import f,{unregister as p,useModal as m}from"@ebay/nice-modal-react";const h=[`Modal.Header`,`Modal.Body`,`Modal.Content`,`Modal.Overlay`,`Modal.Title`,`Modal.CloseButton`,`Modal.Footer`],g=({opened:u,onClose:d,centered:f,closeOnClickOutside:p,closeOnEscape:m,withinPortal:g,keepMounted:_,intent:v,classNames:y,title:b,withCloseButton:x=!0,children:S})=>{let C=l.Children.toArray(S).some(e=>{if(!l.isValidElement(e))return!1;let t=e.type;return t.displayName&&h.includes(t.displayName)}),w={opened:u,onClose:d,centered:f,closeOnClickOutside:p,closeOnEscape:m,withinPortal:g,keepMounted:_,intent:v,classNames:y};if(C)return s(a,{...w,children:S});let T=!!b||x;return c(a,{...w,children:[s(i,{}),c(n,{children:[T&&c(r,{children:[b&&s(o,{children:b}),x&&s(t,{})]}),s(e,{children:S})]})]})},_=f.create(({onClose:e,children:t,...n})=>{let r=m(),[i,a]=d(!1);return u(()=>{if(r.visible){let e=requestAnimationFrame(()=>{a(!0)});return()=>cancelAnimationFrame(e)}a(!1)},[r.visible]),s(g,{opened:i,onClose:()=>{e?.(),r.hide()},...n,children:t})}),v=({id:e,...t})=>(p(e),f.register(e,()=>s(_,{id:e,...t})),s(_,{id:e,...t}));export{v as ModalInner};
|
|
2
|
+
//# sourceMappingURL=modal-core.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-core.mjs","names":[],"sources":["../../../../src/components/overlays/modal/modal-core.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport NiceModal, { unregister, useModal } from '@ebay/nice-modal-react';\n\nimport {\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalHeader,\n ModalOverlay,\n ModalRoot,\n ModalTitle,\n} from './modal-primitives';\nimport type { ModalCoreProps, ModalProps } from './modal-types';\n\nconst SLOT_DISPLAY_NAMES = [\n 'Modal.Header',\n 'Modal.Body',\n 'Modal.Content',\n 'Modal.Overlay',\n 'Modal.Title',\n 'Modal.CloseButton',\n 'Modal.Footer',\n] as const;\n\nexport const ModalCore = ({\n opened,\n onClose,\n centered,\n closeOnClickOutside,\n closeOnEscape,\n withinPortal,\n keepMounted,\n intent,\n classNames,\n title,\n withCloseButton = true,\n children,\n}: ModalCoreProps) => {\n const hasSlots = React.Children.toArray(children).some((child) => {\n if (!React.isValidElement(child)) return false;\n const childType = child.type as { displayName?: string };\n return (\n childType.displayName &&\n SLOT_DISPLAY_NAMES.includes(\n childType.displayName as (typeof SLOT_DISPLAY_NAMES)[number],\n )\n );\n });\n\n const props = {\n opened,\n onClose,\n centered,\n closeOnClickOutside,\n closeOnEscape,\n withinPortal,\n keepMounted,\n intent,\n classNames,\n };\n\n if (hasSlots) {\n return <ModalRoot {...props}>{children}</ModalRoot>;\n }\n\n const hasHeader = !!title || withCloseButton;\n\n return (\n <ModalRoot {...props}>\n <ModalOverlay />\n <ModalContent>\n {hasHeader && (\n <ModalHeader>\n {title && <ModalTitle>{title}</ModalTitle>}\n {withCloseButton && <ModalCloseButton />}\n </ModalHeader>\n )}\n <ModalBody>{children}</ModalBody>\n </ModalContent>\n </ModalRoot>\n );\n};\n\nconst ModalInnerComponent = NiceModal.create<ModalProps>(\n ({ onClose, children, ...props }: ModalProps) => {\n const modal = useModal();\n const [isOpen, setIsOpen] = useState(false);\n\n useEffect(() => {\n if (modal.visible) {\n const raf = requestAnimationFrame(() => {\n setIsOpen(true);\n });\n return () => cancelAnimationFrame(raf);\n }\n\n setIsOpen(false);\n }, [modal.visible]);\n\n return (\n <ModalCore\n opened={isOpen}\n onClose={() => {\n onClose?.();\n modal.hide();\n }}\n {...props}\n >\n {children}\n </ModalCore>\n );\n },\n);\n\nexport const ModalInner = ({ id, ...props }: ModalProps) => {\n unregister(id);\n NiceModal.register(id, () => <ModalInnerComponent id={id} {...props} />);\n return <ModalInnerComponent id={id} {...props} />;\n};\n"],"mappings":"uUAeA,MAAM,EAAqB,CACzB,eACA,aACA,gBACA,gBACA,cACA,oBACA,eACD,CAEY,GAAa,CACxB,SACA,UACA,WACA,sBACA,gBACA,eACA,cACA,SACA,aACA,QACA,kBAAkB,GAClB,cACoB,CACpB,IAAM,EAAW,EAAM,SAAS,QAAQ,EAAS,CAAC,KAAM,GAAU,CAChE,GAAI,CAAC,EAAM,eAAe,EAAM,CAAE,MAAO,GACzC,IAAM,EAAY,EAAM,KACxB,OACE,EAAU,aACV,EAAmB,SACjB,EAAU,YACX,EAEH,CAEI,EAAQ,CACZ,SACA,UACA,WACA,sBACA,gBACA,eACA,cACA,SACA,aACD,CAED,GAAI,EACF,OAAO,EAAC,EAAA,CAAU,GAAI,EAAQ,YAAqB,CAGrD,IAAM,EAAY,CAAC,CAAC,GAAS,EAE7B,OACE,EAAC,EAAA,CAAU,GAAI,YACb,EAAC,EAAA,EAAA,CAAe,CAChB,EAAC,EAAA,CAAA,SAAA,CACE,GACC,EAAC,EAAA,CAAA,SAAA,CACE,GAAS,EAAC,EAAA,CAAA,SAAY,EAAA,CAAmB,CACzC,GAAmB,EAAC,EAAA,EAAA,CAAmB,CAAA,CAAA,CAC5B,CAEhB,EAAC,EAAA,CAAW,WAAA,CAAqB,CAAA,CAAA,CACpB,CAAA,EACL,EAIV,EAAsB,EAAU,QACnC,CAAE,UAAS,WAAU,GAAG,KAAwB,CAC/C,IAAM,EAAQ,GAAU,CAClB,CAAC,EAAQ,GAAa,EAAS,GAAM,CAa3C,OAXA,MAAgB,CACd,GAAI,EAAM,QAAS,CACjB,IAAM,EAAM,0BAA4B,CACtC,EAAU,GAAK,EACf,CACF,UAAa,qBAAqB,EAAI,CAGxC,EAAU,GAAM,EACf,CAAC,EAAM,QAAQ,CAAC,CAGjB,EAAC,EAAA,CACC,OAAQ,EACR,YAAe,CACb,KAAW,CACX,EAAM,MAAM,EAEd,GAAI,EAEH,YACS,EAGjB,CAEY,GAAc,CAAE,KAAI,GAAG,MAClC,EAAW,EAAG,CACd,EAAU,SAAS,MAAU,EAAC,EAAA,CAAwB,KAAI,GAAI,GAAS,CAAC,CACjE,EAAC,EAAA,CAAwB,KAAI,GAAI,GAAS"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{cx as e}from"@mage-ui/styled-system/css";import{modal as t,modalBody as n,modalClose as r,modalContent as i,modalFooter as a,modalHeader as o,modalInner as s,modalOverlay as c,modalRoot as l,modalTitle as u}from"@mage-ui/styled-system/recipes";import{Modal as d}from"@mantine/core";import{jsx as f}from"react/jsx-runtime";const p=({children:a,intent:p,classNames:m,...h})=>f(d.Root,{"data-intent":p,classNames:{root:e(m?.modal??t(),m?.root??l()),inner:m?.inner??s(),overlay:m?.overlay??c(),content:m?.content??i(),header:m?.header??o(),title:m?.title??u(),close:m?.close??r(),body:m?.body??n()},...h,children:a}),m=()=>f(d.Overlay,{}),h=({children:e})=>f(d.Content,{children:e}),g=({children:e})=>f(d.Header,{children:e}),_=({children:e})=>f(d.Body,{children:e}),v=({children:e})=>f(d.Title,{children:e}),y=()=>f(d.CloseButton,{}),b=({children:e,className:t,...n})=>f(`div`,{className:t??a(),...n,children:e});m.displayName=`Modal.Overlay`,h.displayName=`Modal.Content`,g.displayName=`Modal.Header`,_.displayName=`Modal.Body`,v.displayName=`Modal.Title`,y.displayName=`Modal.CloseButton`,b.displayName=`Modal.Footer`;export{_ as ModalBody,y as ModalCloseButton,h as ModalContent,b as ModalFooter,g as ModalHeader,m as ModalOverlay,p as ModalRoot,v as ModalTitle};
|
|
2
|
+
//# sourceMappingURL=modal-primitives.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-primitives.mjs","names":["MantineModal","modalRecipe"],"sources":["../../../../src/components/overlays/modal/modal-primitives.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n modalBody,\n modalClose,\n modalContent,\n modalFooter,\n modalHeader,\n modalInner,\n modalOverlay,\n modal as modalRecipe,\n modalRoot,\n modalTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Modal as MantineModal } from '@mantine/core';\n\nimport type { ModalRootProps } from './modal-types';\n\nexport const ModalRoot = ({\n children,\n intent,\n classNames,\n ...props\n}: ModalRootProps) => {\n return (\n <MantineModal.Root\n data-intent={intent}\n classNames={{\n root: cx(\n classNames?.modal ?? modalRecipe(),\n classNames?.root ?? modalRoot(),\n ),\n inner: classNames?.inner ?? modalInner(),\n overlay: classNames?.overlay ?? modalOverlay(),\n content: classNames?.content ?? modalContent(),\n header: classNames?.header ?? modalHeader(),\n title: classNames?.title ?? modalTitle(),\n close: classNames?.close ?? modalClose(),\n body: classNames?.body ?? modalBody(),\n }}\n {...props}\n >\n {children}\n </MantineModal.Root>\n );\n};\n\nexport const ModalOverlay = () => <MantineModal.Overlay />;\n\nexport const ModalContent = ({ children }: { children: ReactNode }) => (\n <MantineModal.Content>{children}</MantineModal.Content>\n);\n\nexport const ModalHeader = ({ children }: { children: ReactNode }) => (\n <MantineModal.Header>{children}</MantineModal.Header>\n);\n\nexport const ModalBody = ({ children }: { children: ReactNode }) => (\n <MantineModal.Body>{children}</MantineModal.Body>\n);\n\nexport const ModalTitle = ({ children }: { children: ReactNode }) => (\n <MantineModal.Title>{children}</MantineModal.Title>\n);\n\nexport const ModalCloseButton = () => <MantineModal.CloseButton />;\n\nexport const ModalFooter = ({\n children,\n className,\n ...props\n}: HTMLAttributes<HTMLDivElement>) => {\n return (\n <div className={className ?? modalFooter()} {...props}>\n {children}\n </div>\n );\n};\n\nModalOverlay.displayName = 'Modal.Overlay';\nModalContent.displayName = 'Modal.Content';\nModalHeader.displayName = 'Modal.Header';\nModalBody.displayName = 'Modal.Body';\nModalTitle.displayName = 'Modal.Title';\nModalCloseButton.displayName = 'Modal.CloseButton';\nModalFooter.displayName = 'Modal.Footer';\n"],"mappings":"yUAmBA,MAAa,GAAa,CACxB,WACA,SACA,aACA,GAAG,KAGD,EAACA,EAAa,KAAA,CACZ,cAAa,EACb,WAAY,CACV,KAAM,EACJ,GAAY,OAASC,GAAa,CAClC,GAAY,MAAQ,GAAW,CAChC,CACD,MAAO,GAAY,OAAS,GAAY,CACxC,QAAS,GAAY,SAAW,GAAc,CAC9C,QAAS,GAAY,SAAW,GAAc,CAC9C,OAAQ,GAAY,QAAU,GAAa,CAC3C,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,GAAY,CACxC,KAAM,GAAY,MAAQ,GAAW,CACtC,CACD,GAAI,EAEH,YACiB,CAIX,MAAqB,EAACD,EAAa,QAAA,EAAA,CAAU,CAE7C,GAAgB,CAAE,cAC7B,EAACA,EAAa,QAAA,CAAS,WAAA,CAAgC,CAG5C,GAAe,CAAE,cAC5B,EAACA,EAAa,OAAA,CAAQ,WAAA,CAA+B,CAG1C,GAAa,CAAE,cAC1B,EAACA,EAAa,KAAA,CAAM,WAAA,CAA6B,CAGtC,GAAc,CAAE,cAC3B,EAACA,EAAa,MAAA,CAAO,WAAA,CAA8B,CAGxC,MAAyB,EAACA,EAAa,YAAA,EAAA,CAAc,CAErD,GAAe,CAC1B,WACA,YACA,GAAG,KAGD,EAAC,MAAA,CAAI,UAAW,GAAa,GAAa,CAAE,GAAI,EAC7C,YACG,CAIV,EAAa,YAAc,gBAC3B,EAAa,YAAc,gBAC3B,EAAY,YAAc,eAC1B,EAAU,YAAc,aACxB,EAAW,YAAc,cACzB,EAAiB,YAAc,oBAC/B,EAAY,YAAc"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ModalProps } from "./modal-types.mjs";
|
|
2
|
+
import { ComponentType, ReactElement, ReactNode } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/overlays/modal/modal-registry.d.ts
|
|
5
|
+
type ModalRegistryEntry = ModalProps | ComponentType<{
|
|
6
|
+
id: string;
|
|
7
|
+
} & Record<string, unknown>> | ReactElement;
|
|
8
|
+
type ModalRegistry = Record<string, ModalRegistryEntry>;
|
|
9
|
+
declare function registerModal<T extends ModalRegistryEntry>(id: string, entry: T): T;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { ModalRegistry, ModalRegistryEntry, registerModal };
|
|
12
|
+
//# sourceMappingURL=modal-registry.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-registry.d.mts","names":[],"sources":["../../../../src/components/overlays/modal/modal-registry.tsx"],"mappings":";;;;KAYY,kBAAA,GACR,UAAA,GACA,aAAA;EAAgB,EAAA;AAAA,IAAe,MAAA,qBAC/B,YAAA;AAAA,KAEQ,aAAA,GAAgB,MAAA,SAAe,kBAAA;AAAA,iBAE3B,aAAA,WAAwB,kBAAA,CAAA,CACtC,EAAA,UACA,KAAA,EAAO,CAAA,GACN,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{ModalInner as e}from"./modal-core.mjs";import{jsx as t}from"react/jsx-runtime";import{isValidElement as n}from"react";import r,{unregister as i,useModal as a}from"@ebay/nice-modal-react";function o(o,s){i(o);let c=typeof s==`function`?({id:e,...n})=>{let r=a(e).args??{};return t(s,{id:e,...n,...r})}:()=>n(s)?s:t(e,{...s});return r.register(o,c),s}const s=({children:e,modals:n})=>(n&&Object.entries(n).forEach(([e,t])=>{o(e,t)}),t(r.Provider,{children:e}));export{s as ModalProvider,o as registerModal};
|
|
2
|
+
//# sourceMappingURL=modal-registry.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-registry.mjs","names":[],"sources":["../../../../src/components/overlays/modal/modal-registry.tsx"],"sourcesContent":["import {\n type ComponentType,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from 'react';\n\nimport NiceModal, { unregister, useModal } from '@ebay/nice-modal-react';\n\nimport { ModalInner } from './modal-core';\nimport type { ModalProps } from './modal-types';\n\nexport type ModalRegistryEntry =\n | ModalProps\n | ComponentType<{ id: string } & Record<string, unknown>>\n | ReactElement;\n\nexport type ModalRegistry = Record<string, ModalRegistryEntry>;\n\nexport function registerModal<T extends ModalRegistryEntry>(\n id: string,\n entry: T,\n): T {\n unregister(id);\n\n const modalComponent: ComponentType<\n { id: string } & Record<string, unknown>\n > =\n typeof entry === 'function'\n ? ({ id, ...props }: { id: string } & Record<string, unknown>) => {\n const modal = useModal(id);\n const args = (modal.args ?? {}) as Record<string, unknown>;\n const Component = entry as ComponentType<Record<string, unknown>>;\n return <Component id={id} {...props} {...args} />;\n }\n : () => (isValidElement(entry) ? entry : <ModalInner {...entry} />);\n\n NiceModal.register(id, modalComponent);\n return entry;\n}\n\nexport const ModalProvider: ComponentType<{\n children: ReactNode;\n modals?: ModalRegistry;\n}> = ({ children, modals }) => {\n if (modals) {\n Object.entries(modals).forEach(([id, modal]) => {\n registerModal(id, modal);\n });\n }\n\n return <NiceModal.Provider>{children}</NiceModal.Provider>;\n};\n"],"mappings":"kMAmBA,SAAgB,EACd,EACA,EACG,CACH,EAAW,EAAG,CAEd,IAAM,EAGJ,OAAO,GAAU,YACZ,CAAE,KAAI,GAAG,KAAsD,CAE9D,IAAM,EADQ,EAAS,EAAG,CACN,MAAQ,EAAE,CAE9B,OAAO,EADW,EAAA,CACI,KAAI,GAAI,EAAO,GAAI,GAAQ,MAE5C,EAAe,EAAM,CAAG,EAAQ,EAAC,EAAA,CAAW,GAAI,EAAA,CAAS,CAGtE,OADA,EAAU,SAAS,EAAI,EAAe,CAC/B,EAGT,MAAa,GAGP,CAAE,WAAU,aACZ,GACF,OAAO,QAAQ,EAAO,CAAC,SAAS,CAAC,EAAI,KAAW,CAC9C,EAAc,EAAI,EAAM,EACxB,CAGG,EAAC,EAAU,SAAA,CAAU,WAAA,CAA8B"}
|