@aloudata/aloudata-design 3.0.21 → 3.0.23
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/App/index.d.ts +3 -0
- package/dist/App/index.js +15 -10
- package/dist/App/index.js.map +1 -1
- package/dist/Button/index.d.ts +1 -1
- package/dist/Button/index.js +10 -10
- package/dist/Button/index.js.map +1 -1
- package/dist/Checkbox/index.js +2 -2
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Drawer/index.js +2 -8
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Dropdown/index.js +8 -5
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Form/index.js +5 -5
- package/dist/Form/index.js.map +1 -1
- package/dist/Input/components/Input/index.js +2 -2
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/Input/components/TextArea/index.js +2 -2
- package/dist/Input/components/TextArea/index.js.map +1 -1
- package/dist/Menu/index.js +9 -7
- package/dist/Menu/index.js.map +1 -1
- package/dist/Modal/index.d.ts +4 -1
- package/dist/Modal/index.js +63 -22
- package/dist/Modal/index.js.map +1 -1
- package/dist/Popconfirm/index.js +1 -1
- package/dist/Select/BaseSelect.js +3 -2
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Select/hooks/useOptions.js +4 -1
- package/dist/Select/hooks/useOptions.js.map +1 -1
- package/dist/Select/index.js +1 -1
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/interface.d.ts +1 -0
- package/dist/Tour/index.js +1 -1
- package/dist/Typography/index.js +5 -5
- package/dist/Typography/index.js.map +1 -1
- package/dist/_utils/floatingLayer.js +1 -1
- package/dist/_utils/overlayCoordinator.d.ts +14 -0
- package/dist/_utils/overlayCoordinator.js +151 -0
- package/dist/_utils/overlayCoordinator.js.map +1 -0
- package/dist/aloudata-design.css +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +5 -5
- package/dist/theme/contract/baselineResolvedTokenValueManifest.d.ts +22 -0
- package/dist/theme/contract/baselineResolvedTokenValueManifest.js +2 -0
- package/dist/theme/contract/darkResolvedTokenValueManifest.d.ts +5 -0
- package/dist/theme/contract/darkResolvedTokenValueManifest.js +2 -0
- package/dist/theme/contract/resolvedTokenValueManifest.d.ts +3 -0
- package/dist/theme/contract/resolvedTokenValueManifest.js +2 -0
- package/dist/theme/contract/tokenOutputContract.js +2 -45
- package/dist/theme/contract/tokenOutputContract.js.map +1 -1
- package/dist/theme/generator/baselineTokenValueDelivery.d.ts +21 -0
- package/dist/theme/generator/baselineTokenValueDelivery.js +2 -0
- package/dist/theme/index.d.ts +4 -4
- package/dist/theme/runtime/colorValueMode/dark.d.ts +1 -0
- package/dist/theme/runtime/colorValueMode/dark.js +2 -0
- package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.d.ts +3 -0
- package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js +125 -0
- package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js.map +1 -0
- package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.d.ts +3 -0
- package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js +125 -0
- package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js.map +1 -0
- package/dist/theme/runtime/colorValueMode/index.d.ts +2 -1
- package/dist/theme/runtime/colorValueMode/index.js +13 -7
- package/dist/theme/runtime/colorValueMode/index.js.map +1 -1
- package/dist/theme/runtime/colorValueMode/registry.d.ts +14 -5
- package/dist/theme/runtime/colorValueMode/registry.js +15 -8
- package/dist/theme/runtime/colorValueMode/registry.js.map +1 -1
- package/dist/theme/runtime/colorValueMode/v3.d.ts +1 -98
- package/dist/theme/runtime/colorValueMode/v3.js +2 -230
- package/dist/theme/runtime/initAldTheme.js +5 -0
- package/dist/theme/runtime/initAldTheme.js.map +1 -1
- package/dist/theme/typography/index.d.ts +75 -0
- package/dist/theme/typography/index.js +2 -0
- package/dist/theme/typography.d.ts +2 -0
- package/package.json +6 -3
- package/dist/theme/runtime/colorValueMode/v3.js.map +0 -1
package/dist/Typography/index.js
CHANGED
|
@@ -36,7 +36,7 @@ function CopyButton({ copyable, children }) {
|
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
38
|
var Typography = ({ className, style, children }) => /* @__PURE__ */ jsx("article", {
|
|
39
|
-
className: cn("ald-typography", className),
|
|
39
|
+
className: cn("ald-typography tw-text-typography-body-reading", className),
|
|
40
40
|
style,
|
|
41
41
|
children
|
|
42
42
|
});
|
|
@@ -50,7 +50,7 @@ Typography.Text = ({ className, style, children, strong, italic, underline, code
|
|
|
50
50
|
if (italic) content = /* @__PURE__ */ jsx("i", { children: content });
|
|
51
51
|
if (strong) content = /* @__PURE__ */ jsx("strong", { children: content });
|
|
52
52
|
return /* @__PURE__ */ jsxs("span", {
|
|
53
|
-
className: cn("ald-typography-text", disabled && "tw-cursor-not-allowed tw-opacity-50", type === "secondary" && "tw-text-[var(--content-secondary)]", type === "success" && "tw-text-[var(--content-positive-primary)]", type === "warning" && "tw-text-[var(--content-warning-primary)]", type === "danger" && "tw-text-[var(--content-negative-primary)]", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
|
|
53
|
+
className: cn("ald-typography-text tw-text-typography-body-reading", disabled && "tw-cursor-not-allowed tw-opacity-50", type === "secondary" && "tw-text-[var(--content-secondary)]", type === "success" && "tw-text-[var(--content-positive-primary)]", type === "warning" && "tw-text-[var(--content-warning-primary)]", type === "danger" && "tw-text-[var(--content-negative-primary)]", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
|
|
54
54
|
style: {
|
|
55
55
|
...style,
|
|
56
56
|
...ellipsisRows ? {
|
|
@@ -68,7 +68,7 @@ Typography.Text = ({ className, style, children, strong, italic, underline, code
|
|
|
68
68
|
};
|
|
69
69
|
Typography.Title = ({ className, style, children, level = 1, ellipsis, ...rest }) => {
|
|
70
70
|
return /* @__PURE__ */ jsx(`h${level}`, {
|
|
71
|
-
className: cn("ald-typography-title tw-
|
|
71
|
+
className: cn("ald-typography-title tw-text-[var(--content-primary)] tw-text-typography-heading", Boolean(ellipsis) && "tw-truncate", className),
|
|
72
72
|
style,
|
|
73
73
|
...rest,
|
|
74
74
|
children
|
|
@@ -78,7 +78,7 @@ Typography.Paragraph = ({ className, style, children, ellipsis, copyable, ...res
|
|
|
78
78
|
const isEllipsis = Boolean(ellipsis);
|
|
79
79
|
const ellipsisRows = typeof ellipsis === "object" ? ellipsis.rows : void 0;
|
|
80
80
|
return /* @__PURE__ */ jsxs("div", {
|
|
81
|
-
className: cn("ald-typography-paragraph", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
|
|
81
|
+
className: cn("ald-typography-paragraph tw-text-typography-body-reading", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
|
|
82
82
|
style: {
|
|
83
83
|
...style,
|
|
84
84
|
...ellipsisRows ? {
|
|
@@ -95,7 +95,7 @@ Typography.Paragraph = ({ className, style, children, ellipsis, copyable, ...res
|
|
|
95
95
|
});
|
|
96
96
|
};
|
|
97
97
|
Typography.Link = ({ className, style, children, href, target, ...rest }) => /* @__PURE__ */ jsx("a", {
|
|
98
|
-
className: cn("ald-typography-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]", className),
|
|
98
|
+
className: cn("ald-typography-link tw-text-[var(--content-brand-secondary)] tw-text-typography-body-reading hover:tw-text-[var(--content-brand-primary)]", className),
|
|
99
99
|
style,
|
|
100
100
|
href,
|
|
101
101
|
target,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Typography/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TypographyProps {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\ninterface TypographyComponent extends React.FC<TypographyProps> {\n Text: React.FC<TextProps>;\n Title: React.FC<TitleProps>;\n Paragraph: React.FC<ParagraphProps>;\n Link: React.FC<LinkProps>;\n}\n\ninterface CopyableConfig {\n text?: string;\n onCopy?: () => void;\n tooltips?: [React.ReactNode, React.ReactNode];\n}\n\ntype EllipsisConfig = boolean | { rows?: number };\n\ninterface TextProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'type'> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n strong?: boolean;\n italic?: boolean;\n underline?: boolean;\n delete?: boolean;\n code?: boolean;\n disabled?: boolean;\n type?: 'secondary' | 'success' | 'warning' | 'danger';\n ellipsis?: EllipsisConfig;\n copyable?: boolean | CopyableConfig;\n}\n\ninterface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n level?: 1 | 2 | 3 | 4 | 5;\n ellipsis?: EllipsisConfig;\n}\n\ninterface ParagraphProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n ellipsis?: EllipsisConfig;\n copyable?: boolean | CopyableConfig;\n}\n\ninterface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n href?: string;\n target?: string;\n}\n\nfunction CopyButton({\n copyable,\n children,\n}: {\n copyable: boolean | CopyableConfig;\n children: React.ReactNode;\n}) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = useCallback(() => {\n const config =\n typeof copyable === 'object' ? copyable : ({} as CopyableConfig);\n const textToCopy =\n config.text ?? (typeof children === 'string' ? children : '');\n navigator.clipboard.writeText(String(textToCopy)).then(() => {\n setCopied(true);\n config.onCopy?.();\n setTimeout(() => setCopied(false), 2000);\n });\n }, [copyable, children]);\n\n return (\n <span\n role=\"button\"\n tabIndex={0}\n className=\"ald-typography-copy tw-ml-1 tw-inline-flex tw-cursor-pointer tw-align-middle tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]\"\n onClick={handleCopy}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') handleCopy();\n }}\n aria-label=\"Copy\"\n >\n {copied ? (\n <span className=\"tw-text-xs tw-text-[var(--content-positive-primary)]\">\n Copied!\n </span>\n ) : (\n <svg\n viewBox=\"0 0 16 16\"\n width=\"1em\"\n height=\"1em\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z\" />\n <path d=\"M2 4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1v1H2z\" />\n </svg>\n )}\n </span>\n );\n}\n\nconst Typography: TypographyComponent = ({ className, style, children }) => (\n <article
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Typography/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TypographyProps {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\ninterface TypographyComponent extends React.FC<TypographyProps> {\n Text: React.FC<TextProps>;\n Title: React.FC<TitleProps>;\n Paragraph: React.FC<ParagraphProps>;\n Link: React.FC<LinkProps>;\n}\n\ninterface CopyableConfig {\n text?: string;\n onCopy?: () => void;\n tooltips?: [React.ReactNode, React.ReactNode];\n}\n\ntype EllipsisConfig = boolean | { rows?: number };\n\ninterface TextProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'type'> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n strong?: boolean;\n italic?: boolean;\n underline?: boolean;\n delete?: boolean;\n code?: boolean;\n disabled?: boolean;\n type?: 'secondary' | 'success' | 'warning' | 'danger';\n ellipsis?: EllipsisConfig;\n copyable?: boolean | CopyableConfig;\n}\n\ninterface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n level?: 1 | 2 | 3 | 4 | 5;\n ellipsis?: EllipsisConfig;\n}\n\ninterface ParagraphProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n ellipsis?: EllipsisConfig;\n copyable?: boolean | CopyableConfig;\n}\n\ninterface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n href?: string;\n target?: string;\n}\n\nfunction CopyButton({\n copyable,\n children,\n}: {\n copyable: boolean | CopyableConfig;\n children: React.ReactNode;\n}) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = useCallback(() => {\n const config =\n typeof copyable === 'object' ? copyable : ({} as CopyableConfig);\n const textToCopy =\n config.text ?? (typeof children === 'string' ? children : '');\n navigator.clipboard.writeText(String(textToCopy)).then(() => {\n setCopied(true);\n config.onCopy?.();\n setTimeout(() => setCopied(false), 2000);\n });\n }, [copyable, children]);\n\n return (\n <span\n role=\"button\"\n tabIndex={0}\n className=\"ald-typography-copy tw-ml-1 tw-inline-flex tw-cursor-pointer tw-align-middle tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]\"\n onClick={handleCopy}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') handleCopy();\n }}\n aria-label=\"Copy\"\n >\n {copied ? (\n <span className=\"tw-text-xs tw-text-[var(--content-positive-primary)]\">\n Copied!\n </span>\n ) : (\n <svg\n viewBox=\"0 0 16 16\"\n width=\"1em\"\n height=\"1em\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z\" />\n <path d=\"M2 4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1v1H2z\" />\n </svg>\n )}\n </span>\n );\n}\n\nconst Typography: TypographyComponent = ({ className, style, children }) => (\n <article\n className={cn('ald-typography tw-text-typography-body-reading', className)}\n style={style}\n >\n {children}\n </article>\n);\n\nTypography.Text = ({\n className,\n style,\n children,\n strong,\n italic,\n underline,\n code,\n disabled,\n type,\n ellipsis,\n copyable,\n delete: del,\n ...rest\n}) => {\n const isEllipsis = Boolean(ellipsis);\n const ellipsisRows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\n let content: React.ReactNode = children;\n if (code) content = <code>{content}</code>;\n if (del) content = <del>{content}</del>;\n if (underline) content = <u>{content}</u>;\n if (italic) content = <i>{content}</i>;\n if (strong) content = <strong>{content}</strong>;\n\n return (\n <span\n className={cn(\n 'ald-typography-text tw-text-typography-body-reading',\n disabled && 'tw-cursor-not-allowed tw-opacity-50',\n type === 'secondary' && 'tw-text-[var(--content-secondary)]',\n type === 'success' && 'tw-text-[var(--content-positive-primary)]',\n type === 'warning' && 'tw-text-[var(--content-warning-primary)]',\n type === 'danger' && 'tw-text-[var(--content-negative-primary)]',\n isEllipsis && (ellipsisRows ? 'tw-overflow-hidden' : 'tw-truncate'),\n className,\n )}\n style={{\n ...style,\n ...(ellipsisRows\n ? {\n display: '-webkit-box',\n WebkitLineClamp: ellipsisRows,\n WebkitBoxOrient: 'vertical',\n }\n : {}),\n }}\n {...rest}\n >\n {content}\n {copyable && <CopyButton copyable={copyable}>{children}</CopyButton>}\n </span>\n );\n};\n\nTypography.Title = ({\n className,\n style,\n children,\n level = 1,\n ellipsis,\n ...rest\n}) => {\n const Tag = `h${level}` as React.ElementType;\n const isEllipsis = Boolean(ellipsis);\n return (\n <Tag\n className={cn(\n 'ald-typography-title tw-text-[var(--content-primary)] tw-text-typography-heading',\n isEllipsis && 'tw-truncate',\n className,\n )}\n style={style}\n {...rest}\n >\n {children}\n </Tag>\n );\n};\n\nTypography.Paragraph = ({\n className,\n style,\n children,\n ellipsis,\n copyable,\n ...rest\n}) => {\n const isEllipsis = Boolean(ellipsis);\n const ellipsisRows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\n\n return (\n <div\n className={cn(\n 'ald-typography-paragraph tw-text-typography-body-reading',\n isEllipsis && (ellipsisRows ? 'tw-overflow-hidden' : 'tw-truncate'),\n className,\n )}\n style={{\n ...style,\n ...(ellipsisRows\n ? {\n display: '-webkit-box',\n WebkitLineClamp: ellipsisRows,\n WebkitBoxOrient: 'vertical',\n }\n : {}),\n }}\n {...rest}\n >\n {children}\n {copyable && <CopyButton copyable={copyable}>{children}</CopyButton>}\n </div>\n );\n};\n\nTypography.Link = ({ className, style, children, href, target, ...rest }) => (\n <a\n className={cn(\n 'ald-typography-link tw-text-[var(--content-brand-secondary)] tw-text-typography-body-reading hover:tw-text-[var(--content-brand-primary)]',\n className,\n )}\n style={style}\n href={href}\n target={target}\n {...rest}\n >\n {children}\n </a>\n);\n\nexport default Typography;\n"],"mappings":"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"}
|
|
@@ -25,6 +25,6 @@ function FloatingLayerProvider({ children, value }) {
|
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
27
|
//#endregion
|
|
28
|
-
export { FloatingLayerProvider, useFloatingLayer, useFloatingPopupZIndex };
|
|
28
|
+
export { FLOATING_LAYER_BASE_Z_INDEX, FloatingLayerProvider, useFloatingLayer, useFloatingPopupZIndex };
|
|
29
29
|
|
|
30
30
|
//# sourceMappingURL=floatingLayer.js.map
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface ModalLayer {
|
|
3
|
+
id: number;
|
|
4
|
+
maskZIndex: number;
|
|
5
|
+
contentZIndex: number;
|
|
6
|
+
isTop: boolean;
|
|
7
|
+
}
|
|
8
|
+
export declare function useModalLayer(open: boolean, requestedZIndex?: number): ModalLayer;
|
|
9
|
+
export declare function useTopModalContentZIndex(): number;
|
|
10
|
+
export declare function useBodyScrollLock(locked: boolean): void;
|
|
11
|
+
export declare function ModalLayerProvider({ id, children, }: {
|
|
12
|
+
id: number;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { FLOATING_LAYER_BASE_Z_INDEX } from "./floatingLayer.js";
|
|
2
|
+
import { createContext, useContext, useLayoutEffect, useRef, useSyncExternalStore } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/_utils/overlayCoordinator.tsx
|
|
5
|
+
var ModalLayerContext = createContext(void 0);
|
|
6
|
+
var entries = /* @__PURE__ */ new Map();
|
|
7
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
8
|
+
var bodyScrollLockOwners = /* @__PURE__ */ new Set();
|
|
9
|
+
var nextId = 0;
|
|
10
|
+
var nextOpenedAt = 0;
|
|
11
|
+
var version = 0;
|
|
12
|
+
var bodyScrollLocked = false;
|
|
13
|
+
var previousBodyOverflow = "";
|
|
14
|
+
function getOrderedEntries() {
|
|
15
|
+
const orderedByOpen = Array.from(entries.values()).sort((left, right) => left.openedAt - right.openedAt);
|
|
16
|
+
const ordered = [];
|
|
17
|
+
const visited = /* @__PURE__ */ new Set();
|
|
18
|
+
const visit = (entry) => {
|
|
19
|
+
if (visited.has(entry.id)) return;
|
|
20
|
+
const parent = entry.parentId ? entries.get(entry.parentId) : void 0;
|
|
21
|
+
if (parent) visit(parent);
|
|
22
|
+
visited.add(entry.id);
|
|
23
|
+
ordered.push(entry);
|
|
24
|
+
};
|
|
25
|
+
orderedByOpen.forEach(visit);
|
|
26
|
+
return ordered;
|
|
27
|
+
}
|
|
28
|
+
function notify() {
|
|
29
|
+
version += 1;
|
|
30
|
+
listeners.forEach((listener) => listener());
|
|
31
|
+
}
|
|
32
|
+
function updateLayers() {
|
|
33
|
+
let nextZIndex = FLOATING_LAYER_BASE_Z_INDEX;
|
|
34
|
+
getOrderedEntries().forEach((entry) => {
|
|
35
|
+
entry.maskZIndex = Math.max(entry.requestedZIndex, nextZIndex);
|
|
36
|
+
entry.contentZIndex = entry.maskZIndex + 1;
|
|
37
|
+
nextZIndex = entry.maskZIndex + 10;
|
|
38
|
+
});
|
|
39
|
+
notify();
|
|
40
|
+
}
|
|
41
|
+
function acquireBodyScrollLock(owner) {
|
|
42
|
+
if (typeof document === "undefined") return;
|
|
43
|
+
if (bodyScrollLockOwners.has(owner)) return;
|
|
44
|
+
if (!bodyScrollLocked) {
|
|
45
|
+
previousBodyOverflow = document.body.style.overflow;
|
|
46
|
+
bodyScrollLocked = true;
|
|
47
|
+
}
|
|
48
|
+
bodyScrollLockOwners.add(owner);
|
|
49
|
+
document.body.style.overflow = "hidden";
|
|
50
|
+
}
|
|
51
|
+
function releaseBodyScrollLock(owner) {
|
|
52
|
+
if (typeof document === "undefined") return;
|
|
53
|
+
bodyScrollLockOwners.delete(owner);
|
|
54
|
+
if (bodyScrollLocked && bodyScrollLockOwners.size === 0) {
|
|
55
|
+
document.body.style.overflow = previousBodyOverflow;
|
|
56
|
+
bodyScrollLocked = false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function registerModal(id, requestedZIndex, parentId) {
|
|
60
|
+
entries.set(id, {
|
|
61
|
+
id,
|
|
62
|
+
parentId,
|
|
63
|
+
requestedZIndex,
|
|
64
|
+
openedAt: ++nextOpenedAt,
|
|
65
|
+
maskZIndex: requestedZIndex,
|
|
66
|
+
contentZIndex: requestedZIndex + 1
|
|
67
|
+
});
|
|
68
|
+
acquireBodyScrollLock(id);
|
|
69
|
+
updateLayers();
|
|
70
|
+
}
|
|
71
|
+
function unregisterModal(id) {
|
|
72
|
+
if (!entries.delete(id)) return;
|
|
73
|
+
releaseBodyScrollLock(id);
|
|
74
|
+
updateLayers();
|
|
75
|
+
}
|
|
76
|
+
function updateModal(id, requestedZIndex, parentId) {
|
|
77
|
+
const entry = entries.get(id);
|
|
78
|
+
if (!entry || entry.requestedZIndex === requestedZIndex && entry.parentId === parentId) return;
|
|
79
|
+
entry.requestedZIndex = requestedZIndex;
|
|
80
|
+
entry.parentId = parentId;
|
|
81
|
+
updateLayers();
|
|
82
|
+
}
|
|
83
|
+
function subscribe(listener) {
|
|
84
|
+
listeners.add(listener);
|
|
85
|
+
return () => listeners.delete(listener);
|
|
86
|
+
}
|
|
87
|
+
function getVersion() {
|
|
88
|
+
return version;
|
|
89
|
+
}
|
|
90
|
+
function useModalLayer(open, requestedZIndex = FLOATING_LAYER_BASE_Z_INDEX) {
|
|
91
|
+
const parentId = useContext(ModalLayerContext);
|
|
92
|
+
const idRef = useRef();
|
|
93
|
+
const layerOptionsRef = useRef({
|
|
94
|
+
parentId,
|
|
95
|
+
requestedZIndex
|
|
96
|
+
});
|
|
97
|
+
layerOptionsRef.current = {
|
|
98
|
+
parentId,
|
|
99
|
+
requestedZIndex
|
|
100
|
+
};
|
|
101
|
+
if (!idRef.current) idRef.current = ++nextId;
|
|
102
|
+
const id = idRef.current;
|
|
103
|
+
useSyncExternalStore(subscribe, getVersion, getVersion);
|
|
104
|
+
useLayoutEffect(() => {
|
|
105
|
+
if (!open) return;
|
|
106
|
+
registerModal(id, layerOptionsRef.current.requestedZIndex, layerOptionsRef.current.parentId);
|
|
107
|
+
return () => unregisterModal(id);
|
|
108
|
+
}, [id, open]);
|
|
109
|
+
useLayoutEffect(() => {
|
|
110
|
+
if (open) updateModal(id, requestedZIndex, parentId);
|
|
111
|
+
}, [
|
|
112
|
+
id,
|
|
113
|
+
open,
|
|
114
|
+
parentId,
|
|
115
|
+
requestedZIndex
|
|
116
|
+
]);
|
|
117
|
+
const entry = entries.get(id);
|
|
118
|
+
const ordered = getOrderedEntries();
|
|
119
|
+
const topEntry = ordered[ordered.length - 1];
|
|
120
|
+
return {
|
|
121
|
+
id,
|
|
122
|
+
maskZIndex: entry?.maskZIndex ?? requestedZIndex,
|
|
123
|
+
contentZIndex: entry?.contentZIndex ?? requestedZIndex + 1,
|
|
124
|
+
isTop: entry ? topEntry?.id === id : true
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
function useTopModalContentZIndex() {
|
|
128
|
+
useSyncExternalStore(subscribe, getVersion, getVersion);
|
|
129
|
+
const ordered = getOrderedEntries();
|
|
130
|
+
return ordered[ordered.length - 1]?.contentZIndex;
|
|
131
|
+
}
|
|
132
|
+
function useBodyScrollLock(locked) {
|
|
133
|
+
const ownerRef = useRef();
|
|
134
|
+
if (!ownerRef.current) ownerRef.current = Symbol("body-scroll-lock");
|
|
135
|
+
useLayoutEffect(() => {
|
|
136
|
+
if (!locked) return;
|
|
137
|
+
const owner = ownerRef.current;
|
|
138
|
+
acquireBodyScrollLock(owner);
|
|
139
|
+
return () => releaseBodyScrollLock(owner);
|
|
140
|
+
}, [locked]);
|
|
141
|
+
}
|
|
142
|
+
function ModalLayerProvider({ id, children }) {
|
|
143
|
+
return /* @__PURE__ */ jsx(ModalLayerContext.Provider, {
|
|
144
|
+
value: id,
|
|
145
|
+
children
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
//#endregion
|
|
149
|
+
export { ModalLayerProvider, useBodyScrollLock, useModalLayer, useTopModalContentZIndex };
|
|
150
|
+
|
|
151
|
+
//# sourceMappingURL=overlayCoordinator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overlayCoordinator.js","names":[],"sources":["../../src/_utils/overlayCoordinator.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n useLayoutEffect,\n useRef,\n useSyncExternalStore,\n} from 'react';\nimport {\n FLOATING_LAYER_BASE_Z_INDEX,\n FLOATING_LAYER_STEP,\n} from './floatingLayer';\n\ninterface ModalLayerEntry {\n id: number;\n parentId?: number;\n requestedZIndex: number;\n openedAt: number;\n maskZIndex: number;\n contentZIndex: number;\n}\n\nexport interface ModalLayer {\n id: number;\n maskZIndex: number;\n contentZIndex: number;\n isTop: boolean;\n}\n\nconst ModalLayerContext = createContext<number | undefined>(undefined);\nconst entries = new Map<number, ModalLayerEntry>();\nconst listeners = new Set<() => void>();\nconst bodyScrollLockOwners = new Set<unknown>();\nlet nextId = 0;\nlet nextOpenedAt = 0;\nlet version = 0;\nlet bodyScrollLocked = false;\nlet previousBodyOverflow = '';\n\nfunction getOrderedEntries() {\n const orderedByOpen = Array.from(entries.values()).sort(\n (left, right) => left.openedAt - right.openedAt,\n );\n const ordered: ModalLayerEntry[] = [];\n const visited = new Set<number>();\n\n const visit = (entry: ModalLayerEntry) => {\n if (visited.has(entry.id)) return;\n const parent = entry.parentId ? entries.get(entry.parentId) : undefined;\n if (parent) visit(parent);\n visited.add(entry.id);\n ordered.push(entry);\n };\n\n orderedByOpen.forEach(visit);\n return ordered;\n}\n\nfunction notify() {\n version += 1;\n listeners.forEach((listener) => listener());\n}\n\nfunction updateLayers() {\n let nextZIndex = FLOATING_LAYER_BASE_Z_INDEX;\n getOrderedEntries().forEach((entry) => {\n entry.maskZIndex = Math.max(entry.requestedZIndex, nextZIndex);\n entry.contentZIndex = entry.maskZIndex + 1;\n nextZIndex = entry.maskZIndex + FLOATING_LAYER_STEP;\n });\n notify();\n}\n\nfunction acquireBodyScrollLock(owner: unknown) {\n if (typeof document === 'undefined') return;\n if (bodyScrollLockOwners.has(owner)) return;\n if (!bodyScrollLocked) {\n previousBodyOverflow = document.body.style.overflow;\n bodyScrollLocked = true;\n }\n bodyScrollLockOwners.add(owner);\n document.body.style.overflow = 'hidden';\n}\n\nfunction releaseBodyScrollLock(owner: unknown) {\n if (typeof document === 'undefined') return;\n bodyScrollLockOwners.delete(owner);\n if (bodyScrollLocked && bodyScrollLockOwners.size === 0) {\n document.body.style.overflow = previousBodyOverflow;\n bodyScrollLocked = false;\n }\n}\n\nfunction registerModal(id: number, requestedZIndex: number, parentId?: number) {\n entries.set(id, {\n id,\n parentId,\n requestedZIndex,\n openedAt: ++nextOpenedAt,\n maskZIndex: requestedZIndex,\n contentZIndex: requestedZIndex + 1,\n });\n acquireBodyScrollLock(id);\n updateLayers();\n}\n\nfunction unregisterModal(id: number) {\n if (!entries.delete(id)) return;\n releaseBodyScrollLock(id);\n updateLayers();\n}\n\nfunction updateModal(id: number, requestedZIndex: number, parentId?: number) {\n const entry = entries.get(id);\n if (\n !entry ||\n (entry.requestedZIndex === requestedZIndex && entry.parentId === parentId)\n )\n return;\n entry.requestedZIndex = requestedZIndex;\n entry.parentId = parentId;\n updateLayers();\n}\n\nfunction subscribe(listener: () => void) {\n listeners.add(listener);\n return () => listeners.delete(listener);\n}\n\nfunction getVersion() {\n return version;\n}\n\nexport function useModalLayer(\n open: boolean,\n requestedZIndex = FLOATING_LAYER_BASE_Z_INDEX,\n): ModalLayer {\n const parentId = useContext(ModalLayerContext);\n const idRef = useRef<number>();\n const layerOptionsRef = useRef({ parentId, requestedZIndex });\n layerOptionsRef.current = { parentId, requestedZIndex };\n if (!idRef.current) idRef.current = ++nextId;\n const id = idRef.current;\n\n useSyncExternalStore(subscribe, getVersion, getVersion);\n\n useLayoutEffect(() => {\n if (!open) return;\n registerModal(\n id,\n layerOptionsRef.current.requestedZIndex,\n layerOptionsRef.current.parentId,\n );\n return () => unregisterModal(id);\n }, [id, open]);\n\n useLayoutEffect(() => {\n if (open) updateModal(id, requestedZIndex, parentId);\n }, [id, open, parentId, requestedZIndex]);\n\n const entry = entries.get(id);\n const ordered = getOrderedEntries();\n const topEntry = ordered[ordered.length - 1];\n\n return {\n id,\n maskZIndex: entry?.maskZIndex ?? requestedZIndex,\n contentZIndex: entry?.contentZIndex ?? requestedZIndex + 1,\n isTop: entry ? topEntry?.id === id : true,\n };\n}\n\nexport function useTopModalContentZIndex() {\n useSyncExternalStore(subscribe, getVersion, getVersion);\n const ordered = getOrderedEntries();\n return ordered[ordered.length - 1]?.contentZIndex;\n}\n\nexport function useBodyScrollLock(locked: boolean) {\n const ownerRef = useRef<symbol>();\n if (!ownerRef.current) ownerRef.current = Symbol('body-scroll-lock');\n\n useLayoutEffect(() => {\n if (!locked) return;\n const owner = ownerRef.current!;\n acquireBodyScrollLock(owner);\n return () => releaseBodyScrollLock(owner);\n }, [locked]);\n}\n\nexport function ModalLayerProvider({\n id,\n children,\n}: {\n id: number;\n children: React.ReactNode;\n}) {\n return (\n <ModalLayerContext.Provider value={id}>\n {children}\n </ModalLayerContext.Provider>\n );\n}\n"],"mappings":"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"}
|