lecom-ui 4.1.9 → 4.2.1
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/_virtual/_commonjsHelpers.js +5 -0
- package/dist/_virtual/index.js +7 -0
- package/dist/components/Accordion/Accordion.js +40 -37
- package/dist/components/Button/Button.js +10 -9
- package/dist/components/Button/CustomButton.js +6 -5
- package/dist/components/Card/Card.js +7 -6
- package/dist/components/Checkbox/Checkbox.js +35 -30
- package/dist/components/CustomIcon/Icons/CadastroFacil.js +15 -5
- package/dist/components/CustomIcon/Icons/LogoLecom.js +15 -12
- package/dist/components/CustomIcon/Icons/LogoLecomBrand.js +8 -5
- package/dist/components/CustomIcon/Icons/ModoTeste.js +13 -5
- package/dist/components/CustomIcon/Icons/Rpa.js +17 -5
- package/dist/components/DataTable/DataTable.js +33 -158
- package/dist/components/Dialog/Dialog.js +40 -31
- package/dist/components/DropdownMenu/DropdownMenu.js +55 -46
- package/dist/components/Header/Header.js +51 -35
- package/dist/components/Header/HelpMenu.js +52 -41
- package/dist/components/Header/ImgBrand.js +5 -8
- package/dist/components/Header/ModulesMenu.js +63 -50
- package/dist/components/Header/SocialMenu.js +5 -6
- package/dist/components/Header/UserMenu.js +81 -51
- package/dist/components/Input/Input.js +11 -2
- package/dist/components/Layout/Layout.js +62 -45
- package/dist/components/Notification/Notification.js +9 -8
- package/dist/components/Notification/NotificationBase.js +5 -5
- package/dist/components/Notification/NotificationCallout.js +33 -27
- package/dist/components/Notification/NotificationCloseButton.js +4 -3
- package/dist/components/Notification/NotificationContent.js +24 -18
- package/dist/components/Notification/NotificationIcon.js +9 -6
- package/dist/components/Notification/NotificationInline.js +23 -20
- package/dist/components/Notification/NotificationToast.js +28 -25
- package/dist/components/Notification/useNotificationToast.js +0 -1
- package/dist/components/Popover/Popover.js +8 -7
- package/dist/components/ScrollArea/ScrollArea.js +18 -15
- package/dist/components/Select/Select.js +63 -54
- package/dist/components/Separator/Separator.js +5 -4
- package/dist/components/Sheet/Sheet.js +35 -26
- package/dist/components/Sidebar/Sidebar.js +112 -95
- package/dist/components/Skeleton/Skeleton.js +2 -2
- package/dist/components/Table/Table.js +15 -26
- package/dist/components/Tag/Tag.js +6 -5
- package/dist/components/Tooltip/Tooltip.js +17 -15
- package/dist/components/Typography/Typography.js +6 -7
- package/dist/hooks/use-mobile.js +1 -1
- package/dist/i18n/index.js +4 -53
- package/dist/i18n/locales/en_us.js +4 -3
- package/dist/i18n/locales/es_es.js +4 -3
- package/dist/i18n/locales/index.js +4 -4
- package/dist/i18n/locales/pt_br.js +4 -3
- package/dist/index.d.ts +108 -304
- package/dist/index.js +1 -12
- package/dist/lib/utils.js +2 -2
- package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +806 -0
- package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +726 -0
- package/dist/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +347 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +154 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +136 -0
- package/dist/node_modules/@radix-ui/number/dist/index.js +6 -0
- package/dist/node_modules/@radix-ui/primitive/dist/index.js +11 -0
- package/dist/node_modules/@radix-ui/react-accordion/dist/index.js +303 -0
- package/dist/node_modules/@radix-ui/react-arrow/dist/index.js +25 -0
- package/dist/node_modules/@radix-ui/react-checkbox/dist/index.js +157 -0
- package/dist/node_modules/@radix-ui/react-collapsible/dist/index.js +144 -0
- package/dist/node_modules/@radix-ui/react-collection/dist/index.js +68 -0
- package/dist/node_modules/@radix-ui/react-compose-refs/dist/index.js +39 -0
- package/dist/node_modules/@radix-ui/react-context/dist/index.js +79 -0
- package/dist/node_modules/@radix-ui/react-dialog/dist/index.js +319 -0
- package/dist/node_modules/@radix-ui/react-direction/dist/index.js +11 -0
- package/dist/node_modules/@radix-ui/react-dismissable-layer/dist/index.js +211 -0
- package/dist/node_modules/@radix-ui/react-dropdown-menu/dist/index.js +265 -0
- package/dist/node_modules/@radix-ui/react-focus-guards/dist/index.js +29 -0
- package/dist/node_modules/@radix-ui/react-focus-scope/dist/index.js +207 -0
- package/dist/node_modules/@radix-ui/react-id/dist/index.js +15 -0
- package/dist/node_modules/@radix-ui/react-menu/dist/index.js +831 -0
- package/dist/node_modules/@radix-ui/react-popover/dist/index.js +296 -0
- package/dist/node_modules/@radix-ui/react-popper/dist/index.js +278 -0
- package/dist/node_modules/@radix-ui/react-portal/dist/index.js +17 -0
- package/dist/node_modules/@radix-ui/react-presence/dist/index.js +130 -0
- package/dist/node_modules/@radix-ui/react-primitive/dist/index.js +41 -0
- package/dist/node_modules/@radix-ui/react-roving-focus/dist/index.js +220 -0
- package/dist/node_modules/@radix-ui/react-scroll-area/dist/index.js +718 -0
- package/dist/node_modules/@radix-ui/react-select/dist/index.js +1143 -0
- package/dist/node_modules/@radix-ui/react-separator/dist/index.js +30 -0
- package/dist/node_modules/@radix-ui/react-slot/dist/index.js +81 -0
- package/dist/node_modules/@radix-ui/react-tooltip/dist/index.js +476 -0
- package/dist/node_modules/@radix-ui/react-use-callback-ref/dist/index.js +12 -0
- package/dist/node_modules/@radix-ui/react-use-controllable-state/dist/index.js +46 -0
- package/dist/node_modules/@radix-ui/react-use-escape-keydown/dist/index.js +18 -0
- package/dist/node_modules/@radix-ui/react-use-layout-effect/dist/index.js +7 -0
- package/dist/node_modules/@radix-ui/react-use-previous/dist/index.js +15 -0
- package/dist/node_modules/@radix-ui/react-use-size/dist/index.js +40 -0
- package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.js +35 -0
- package/dist/node_modules/@tanstack/react-table/build/lib/index.js +74 -0
- package/dist/node_modules/@tanstack/table-core/build/lib/index.js +3023 -0
- package/dist/node_modules/aria-hidden/dist/es2015/index.js +136 -0
- package/dist/node_modules/class-variance-authority/dist/index.js +44 -0
- package/dist/node_modules/clsx/dist/clsx.js +3 -0
- package/dist/node_modules/get-nonce/dist/es2015/index.js +8 -0
- package/dist/node_modules/hex-color-opacity/lib/index.js +22 -0
- package/dist/node_modules/i18next/dist/esm/i18next.js +2228 -0
- package/dist/node_modules/lucide-react/dist/esm/Icon.js +44 -0
- package/dist/node_modules/lucide-react/dist/esm/createLucideIcon.js +26 -0
- package/dist/node_modules/lucide-react/dist/esm/defaultAttributes.js +20 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/check.js +13 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/chevron-down.js +15 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/chevron-right.js +15 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/chevron-up.js +13 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/circle-alert.js +17 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/circle-check.js +16 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/circle-help.js +17 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/circle.js +15 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/info.js +17 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/menu.js +17 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/message-square.js +15 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/minus.js +13 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/panel-left.js +16 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/triangle-alert.js +23 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/user.js +16 -0
- package/dist/node_modules/lucide-react/dist/esm/icons/x.js +16 -0
- package/dist/node_modules/lucide-react/dist/esm/shared/src/utils.js +13 -0
- package/dist/node_modules/react-i18next/dist/es/context.js +18 -0
- package/dist/node_modules/react-i18next/dist/es/defaults.js +21 -0
- package/dist/node_modules/react-i18next/dist/es/i18nInstance.js +7 -0
- package/dist/node_modules/react-i18next/dist/es/initReactI18next.js +12 -0
- package/dist/node_modules/react-i18next/dist/es/unescape.js +27 -0
- package/dist/node_modules/react-i18next/dist/es/useTranslation.js +112 -0
- package/dist/node_modules/react-i18next/dist/es/utils.js +63 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/Combination.js +9 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/SideEffect.js +160 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/UI.js +38 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js +21 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/handleScroll.js +109 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/medium.js +5 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/sidecar.js +7 -0
- package/dist/node_modules/react-remove-scroll-bar/dist/es2015/component.js +56 -0
- package/dist/node_modules/react-remove-scroll-bar/dist/es2015/constants.js +10 -0
- package/dist/node_modules/react-remove-scroll-bar/dist/es2015/utils.js +31 -0
- package/dist/node_modules/react-style-singleton/dist/es2015/component.js +19 -0
- package/dist/node_modules/react-style-singleton/dist/es2015/hook.js +25 -0
- package/dist/node_modules/react-style-singleton/dist/es2015/singleton.js +51 -0
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +2493 -0
- package/dist/node_modules/tslib/tslib.es6.js +56 -0
- package/dist/node_modules/use-callback-ref/dist/es2015/assignRef.js +24 -0
- package/dist/node_modules/use-callback-ref/dist/es2015/useMergeRef.js +48 -0
- package/dist/node_modules/use-callback-ref/dist/es2015/useRef.js +42 -0
- package/dist/node_modules/use-color-luminance/index.es.js +105 -0
- package/dist/node_modules/use-sidecar/dist/es2015/exports.js +21 -0
- package/dist/node_modules/use-sidecar/dist/es2015/medium.js +77 -0
- package/dist/plugin/typographies.ts +146 -152
- package/dist/style.min.css +1 -1
- package/dist/utils/cookie.js +9 -6
- package/package.json +11 -3
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { createContextScope } from '../../react-context/dist/index.js';
|
|
3
|
+
import { useComposedRefs } from '../../react-compose-refs/dist/index.js';
|
|
4
|
+
import { Slot } from '../../react-slot/dist/index.js';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function createCollection(name) {
|
|
8
|
+
const PROVIDER_NAME = name + "CollectionProvider";
|
|
9
|
+
const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
|
|
10
|
+
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
|
|
11
|
+
PROVIDER_NAME,
|
|
12
|
+
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
|
|
13
|
+
);
|
|
14
|
+
const CollectionProvider = (props) => {
|
|
15
|
+
const { scope, children } = props;
|
|
16
|
+
const ref = React__default.useRef(null);
|
|
17
|
+
const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
|
|
18
|
+
return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
|
|
19
|
+
};
|
|
20
|
+
CollectionProvider.displayName = PROVIDER_NAME;
|
|
21
|
+
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
22
|
+
const CollectionSlot = React__default.forwardRef(
|
|
23
|
+
(props, forwardedRef) => {
|
|
24
|
+
const { scope, children } = props;
|
|
25
|
+
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
26
|
+
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
27
|
+
return /* @__PURE__ */ jsx(Slot, { ref: composedRefs, children });
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
31
|
+
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
|
|
32
|
+
const ITEM_DATA_ATTR = "data-radix-collection-item";
|
|
33
|
+
const CollectionItemSlot = React__default.forwardRef(
|
|
34
|
+
(props, forwardedRef) => {
|
|
35
|
+
const { scope, children, ...itemData } = props;
|
|
36
|
+
const ref = React__default.useRef(null);
|
|
37
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
38
|
+
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
|
|
39
|
+
React__default.useEffect(() => {
|
|
40
|
+
context.itemMap.set(ref, { ref, ...itemData });
|
|
41
|
+
return () => void context.itemMap.delete(ref);
|
|
42
|
+
});
|
|
43
|
+
return /* @__PURE__ */ jsx(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
47
|
+
function useCollection(scope) {
|
|
48
|
+
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
49
|
+
const getItems = React__default.useCallback(() => {
|
|
50
|
+
const collectionNode = context.collectionRef.current;
|
|
51
|
+
if (!collectionNode) return [];
|
|
52
|
+
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
|
|
53
|
+
const items = Array.from(context.itemMap.values());
|
|
54
|
+
const orderedItems = items.sort(
|
|
55
|
+
(a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
|
|
56
|
+
);
|
|
57
|
+
return orderedItems;
|
|
58
|
+
}, [context.collectionRef, context.itemMap]);
|
|
59
|
+
return getItems;
|
|
60
|
+
}
|
|
61
|
+
return [
|
|
62
|
+
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
63
|
+
useCollection,
|
|
64
|
+
createCollectionScope
|
|
65
|
+
];
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export { createCollection };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
// packages/react/compose-refs/src/composeRefs.tsx
|
|
4
|
+
function setRef(ref, value) {
|
|
5
|
+
if (typeof ref === "function") {
|
|
6
|
+
return ref(value);
|
|
7
|
+
} else if (ref !== null && ref !== void 0) {
|
|
8
|
+
ref.current = value;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
function composeRefs(...refs) {
|
|
12
|
+
return (node) => {
|
|
13
|
+
let hasCleanup = false;
|
|
14
|
+
const cleanups = refs.map((ref) => {
|
|
15
|
+
const cleanup = setRef(ref, node);
|
|
16
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
17
|
+
hasCleanup = true;
|
|
18
|
+
}
|
|
19
|
+
return cleanup;
|
|
20
|
+
});
|
|
21
|
+
if (hasCleanup) {
|
|
22
|
+
return () => {
|
|
23
|
+
for (let i = 0; i < cleanups.length; i++) {
|
|
24
|
+
const cleanup = cleanups[i];
|
|
25
|
+
if (typeof cleanup == "function") {
|
|
26
|
+
cleanup();
|
|
27
|
+
} else {
|
|
28
|
+
setRef(refs[i], null);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
function useComposedRefs(...refs) {
|
|
36
|
+
return React.useCallback(composeRefs(...refs), refs);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export { composeRefs, useComposedRefs };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
// packages/react/context/src/createContext.tsx
|
|
5
|
+
function createContext2(rootComponentName, defaultContext) {
|
|
6
|
+
const Context = React.createContext(defaultContext);
|
|
7
|
+
const Provider = (props) => {
|
|
8
|
+
const { children, ...context } = props;
|
|
9
|
+
const value = React.useMemo(() => context, Object.values(context));
|
|
10
|
+
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
|
|
11
|
+
};
|
|
12
|
+
Provider.displayName = rootComponentName + "Provider";
|
|
13
|
+
function useContext2(consumerName) {
|
|
14
|
+
const context = React.useContext(Context);
|
|
15
|
+
if (context) return context;
|
|
16
|
+
if (defaultContext !== void 0) return defaultContext;
|
|
17
|
+
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
18
|
+
}
|
|
19
|
+
return [Provider, useContext2];
|
|
20
|
+
}
|
|
21
|
+
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
22
|
+
let defaultContexts = [];
|
|
23
|
+
function createContext3(rootComponentName, defaultContext) {
|
|
24
|
+
const BaseContext = React.createContext(defaultContext);
|
|
25
|
+
const index = defaultContexts.length;
|
|
26
|
+
defaultContexts = [...defaultContexts, defaultContext];
|
|
27
|
+
const Provider = (props) => {
|
|
28
|
+
const { scope, children, ...context } = props;
|
|
29
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
30
|
+
const value = React.useMemo(() => context, Object.values(context));
|
|
31
|
+
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
|
|
32
|
+
};
|
|
33
|
+
Provider.displayName = rootComponentName + "Provider";
|
|
34
|
+
function useContext2(consumerName, scope) {
|
|
35
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
36
|
+
const context = React.useContext(Context);
|
|
37
|
+
if (context) return context;
|
|
38
|
+
if (defaultContext !== void 0) return defaultContext;
|
|
39
|
+
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
40
|
+
}
|
|
41
|
+
return [Provider, useContext2];
|
|
42
|
+
}
|
|
43
|
+
const createScope = () => {
|
|
44
|
+
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
45
|
+
return React.createContext(defaultContext);
|
|
46
|
+
});
|
|
47
|
+
return function useScope(scope) {
|
|
48
|
+
const contexts = scope?.[scopeName] || scopeContexts;
|
|
49
|
+
return React.useMemo(
|
|
50
|
+
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
51
|
+
[scope, contexts]
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
createScope.scopeName = scopeName;
|
|
56
|
+
return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
57
|
+
}
|
|
58
|
+
function composeContextScopes(...scopes) {
|
|
59
|
+
const baseScope = scopes[0];
|
|
60
|
+
if (scopes.length === 1) return baseScope;
|
|
61
|
+
const createScope = () => {
|
|
62
|
+
const scopeHooks = scopes.map((createScope2) => ({
|
|
63
|
+
useScope: createScope2(),
|
|
64
|
+
scopeName: createScope2.scopeName
|
|
65
|
+
}));
|
|
66
|
+
return function useComposedScopes(overrideScopes) {
|
|
67
|
+
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
68
|
+
const scopeProps = useScope(overrideScopes);
|
|
69
|
+
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
70
|
+
return { ...nextScopes2, ...currentScope };
|
|
71
|
+
}, {});
|
|
72
|
+
return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
createScope.scopeName = baseScope.scopeName;
|
|
76
|
+
return createScope;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export { createContext2 as createContext, createContextScope };
|
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { composeEventHandlers } from '../../primitive/dist/index.js';
|
|
3
|
+
import { useComposedRefs } from '../../react-compose-refs/dist/index.js';
|
|
4
|
+
import { createContextScope, createContext as createContext2 } from '../../react-context/dist/index.js';
|
|
5
|
+
import { useId } from '../../react-id/dist/index.js';
|
|
6
|
+
import { useControllableState } from '../../react-use-controllable-state/dist/index.js';
|
|
7
|
+
import { DismissableLayer } from '../../react-dismissable-layer/dist/index.js';
|
|
8
|
+
import { FocusScope } from '../../react-focus-scope/dist/index.js';
|
|
9
|
+
import { Portal as Portal$1 } from '../../react-portal/dist/index.js';
|
|
10
|
+
import { Presence } from '../../react-presence/dist/index.js';
|
|
11
|
+
import { Primitive } from '../../react-primitive/dist/index.js';
|
|
12
|
+
import { useFocusGuards } from '../../react-focus-guards/dist/index.js';
|
|
13
|
+
import ReactRemoveScroll from '../../../react-remove-scroll/dist/es2015/Combination.js';
|
|
14
|
+
import { hideOthers } from '../../../aria-hidden/dist/es2015/index.js';
|
|
15
|
+
import { Slot } from '../../react-slot/dist/index.js';
|
|
16
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
17
|
+
|
|
18
|
+
var DIALOG_NAME = "Dialog";
|
|
19
|
+
var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
|
|
20
|
+
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
|
21
|
+
var Dialog = (props) => {
|
|
22
|
+
const {
|
|
23
|
+
__scopeDialog,
|
|
24
|
+
children,
|
|
25
|
+
open: openProp,
|
|
26
|
+
defaultOpen,
|
|
27
|
+
onOpenChange,
|
|
28
|
+
modal = true
|
|
29
|
+
} = props;
|
|
30
|
+
const triggerRef = React.useRef(null);
|
|
31
|
+
const contentRef = React.useRef(null);
|
|
32
|
+
const [open = false, setOpen] = useControllableState({
|
|
33
|
+
prop: openProp,
|
|
34
|
+
defaultProp: defaultOpen,
|
|
35
|
+
onChange: onOpenChange
|
|
36
|
+
});
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
DialogProvider,
|
|
39
|
+
{
|
|
40
|
+
scope: __scopeDialog,
|
|
41
|
+
triggerRef,
|
|
42
|
+
contentRef,
|
|
43
|
+
contentId: useId(),
|
|
44
|
+
titleId: useId(),
|
|
45
|
+
descriptionId: useId(),
|
|
46
|
+
open,
|
|
47
|
+
onOpenChange: setOpen,
|
|
48
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
49
|
+
modal,
|
|
50
|
+
children
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
Dialog.displayName = DIALOG_NAME;
|
|
55
|
+
var TRIGGER_NAME = "DialogTrigger";
|
|
56
|
+
var DialogTrigger = React.forwardRef(
|
|
57
|
+
(props, forwardedRef) => {
|
|
58
|
+
const { __scopeDialog, ...triggerProps } = props;
|
|
59
|
+
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
|
|
60
|
+
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
61
|
+
return /* @__PURE__ */ jsx(
|
|
62
|
+
Primitive.button,
|
|
63
|
+
{
|
|
64
|
+
type: "button",
|
|
65
|
+
"aria-haspopup": "dialog",
|
|
66
|
+
"aria-expanded": context.open,
|
|
67
|
+
"aria-controls": context.contentId,
|
|
68
|
+
"data-state": getState(context.open),
|
|
69
|
+
...triggerProps,
|
|
70
|
+
ref: composedTriggerRef,
|
|
71
|
+
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
DialogTrigger.displayName = TRIGGER_NAME;
|
|
77
|
+
var PORTAL_NAME = "DialogPortal";
|
|
78
|
+
var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
|
|
79
|
+
forceMount: void 0
|
|
80
|
+
});
|
|
81
|
+
var DialogPortal = (props) => {
|
|
82
|
+
const { __scopeDialog, forceMount, children, container } = props;
|
|
83
|
+
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
84
|
+
return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$1, { asChild: true, container, children: child }) })) });
|
|
85
|
+
};
|
|
86
|
+
DialogPortal.displayName = PORTAL_NAME;
|
|
87
|
+
var OVERLAY_NAME = "DialogOverlay";
|
|
88
|
+
var DialogOverlay = React.forwardRef(
|
|
89
|
+
(props, forwardedRef) => {
|
|
90
|
+
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
|
91
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
92
|
+
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
|
93
|
+
return context.modal ? /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
DialogOverlay.displayName = OVERLAY_NAME;
|
|
97
|
+
var DialogOverlayImpl = React.forwardRef(
|
|
98
|
+
(props, forwardedRef) => {
|
|
99
|
+
const { __scopeDialog, ...overlayProps } = props;
|
|
100
|
+
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
101
|
+
return (
|
|
102
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
103
|
+
// ie. when `Overlay` and `Content` are siblings
|
|
104
|
+
/* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
|
|
105
|
+
Primitive.div,
|
|
106
|
+
{
|
|
107
|
+
"data-state": getState(context.open),
|
|
108
|
+
...overlayProps,
|
|
109
|
+
ref: forwardedRef,
|
|
110
|
+
style: { pointerEvents: "auto", ...overlayProps.style }
|
|
111
|
+
}
|
|
112
|
+
) })
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
);
|
|
116
|
+
var CONTENT_NAME = "DialogContent";
|
|
117
|
+
var DialogContent = React.forwardRef(
|
|
118
|
+
(props, forwardedRef) => {
|
|
119
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
|
|
120
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
121
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
122
|
+
return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
|
123
|
+
}
|
|
124
|
+
);
|
|
125
|
+
DialogContent.displayName = CONTENT_NAME;
|
|
126
|
+
var DialogContentModal = React.forwardRef(
|
|
127
|
+
(props, forwardedRef) => {
|
|
128
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
129
|
+
const contentRef = React.useRef(null);
|
|
130
|
+
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
131
|
+
React.useEffect(() => {
|
|
132
|
+
const content = contentRef.current;
|
|
133
|
+
if (content) return hideOthers(content);
|
|
134
|
+
}, []);
|
|
135
|
+
return /* @__PURE__ */ jsx(
|
|
136
|
+
DialogContentImpl,
|
|
137
|
+
{
|
|
138
|
+
...props,
|
|
139
|
+
ref: composedRefs,
|
|
140
|
+
trapFocus: context.open,
|
|
141
|
+
disableOutsidePointerEvents: true,
|
|
142
|
+
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
143
|
+
event.preventDefault();
|
|
144
|
+
context.triggerRef.current?.focus();
|
|
145
|
+
}),
|
|
146
|
+
onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
|
|
147
|
+
const originalEvent = event.detail.originalEvent;
|
|
148
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
149
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
150
|
+
if (isRightClick) event.preventDefault();
|
|
151
|
+
}),
|
|
152
|
+
onFocusOutside: composeEventHandlers(
|
|
153
|
+
props.onFocusOutside,
|
|
154
|
+
(event) => event.preventDefault()
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
var DialogContentNonModal = React.forwardRef(
|
|
161
|
+
(props, forwardedRef) => {
|
|
162
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
163
|
+
const hasInteractedOutsideRef = React.useRef(false);
|
|
164
|
+
const hasPointerDownOutsideRef = React.useRef(false);
|
|
165
|
+
return /* @__PURE__ */ jsx(
|
|
166
|
+
DialogContentImpl,
|
|
167
|
+
{
|
|
168
|
+
...props,
|
|
169
|
+
ref: forwardedRef,
|
|
170
|
+
trapFocus: false,
|
|
171
|
+
disableOutsidePointerEvents: false,
|
|
172
|
+
onCloseAutoFocus: (event) => {
|
|
173
|
+
props.onCloseAutoFocus?.(event);
|
|
174
|
+
if (!event.defaultPrevented) {
|
|
175
|
+
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
176
|
+
event.preventDefault();
|
|
177
|
+
}
|
|
178
|
+
hasInteractedOutsideRef.current = false;
|
|
179
|
+
hasPointerDownOutsideRef.current = false;
|
|
180
|
+
},
|
|
181
|
+
onInteractOutside: (event) => {
|
|
182
|
+
props.onInteractOutside?.(event);
|
|
183
|
+
if (!event.defaultPrevented) {
|
|
184
|
+
hasInteractedOutsideRef.current = true;
|
|
185
|
+
if (event.detail.originalEvent.type === "pointerdown") {
|
|
186
|
+
hasPointerDownOutsideRef.current = true;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
const target = event.target;
|
|
190
|
+
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
|
191
|
+
if (targetIsTrigger) event.preventDefault();
|
|
192
|
+
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
|
193
|
+
event.preventDefault();
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
);
|
|
200
|
+
var DialogContentImpl = React.forwardRef(
|
|
201
|
+
(props, forwardedRef) => {
|
|
202
|
+
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
|
|
203
|
+
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
204
|
+
const contentRef = React.useRef(null);
|
|
205
|
+
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
206
|
+
useFocusGuards();
|
|
207
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
208
|
+
/* @__PURE__ */ jsx(
|
|
209
|
+
FocusScope,
|
|
210
|
+
{
|
|
211
|
+
asChild: true,
|
|
212
|
+
loop: true,
|
|
213
|
+
trapped: trapFocus,
|
|
214
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
215
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
216
|
+
children: /* @__PURE__ */ jsx(
|
|
217
|
+
DismissableLayer,
|
|
218
|
+
{
|
|
219
|
+
role: "dialog",
|
|
220
|
+
id: context.contentId,
|
|
221
|
+
"aria-describedby": context.descriptionId,
|
|
222
|
+
"aria-labelledby": context.titleId,
|
|
223
|
+
"data-state": getState(context.open),
|
|
224
|
+
...contentProps,
|
|
225
|
+
ref: composedRefs,
|
|
226
|
+
onDismiss: () => context.onOpenChange(false)
|
|
227
|
+
}
|
|
228
|
+
)
|
|
229
|
+
}
|
|
230
|
+
),
|
|
231
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
232
|
+
/* @__PURE__ */ jsx(TitleWarning, { titleId: context.titleId }),
|
|
233
|
+
/* @__PURE__ */ jsx(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
|
|
234
|
+
] })
|
|
235
|
+
] });
|
|
236
|
+
}
|
|
237
|
+
);
|
|
238
|
+
var TITLE_NAME = "DialogTitle";
|
|
239
|
+
var DialogTitle = React.forwardRef(
|
|
240
|
+
(props, forwardedRef) => {
|
|
241
|
+
const { __scopeDialog, ...titleProps } = props;
|
|
242
|
+
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
243
|
+
return /* @__PURE__ */ jsx(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
|
244
|
+
}
|
|
245
|
+
);
|
|
246
|
+
DialogTitle.displayName = TITLE_NAME;
|
|
247
|
+
var DESCRIPTION_NAME = "DialogDescription";
|
|
248
|
+
var DialogDescription = React.forwardRef(
|
|
249
|
+
(props, forwardedRef) => {
|
|
250
|
+
const { __scopeDialog, ...descriptionProps } = props;
|
|
251
|
+
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
252
|
+
return /* @__PURE__ */ jsx(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
|
|
253
|
+
}
|
|
254
|
+
);
|
|
255
|
+
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
256
|
+
var CLOSE_NAME = "DialogClose";
|
|
257
|
+
var DialogClose = React.forwardRef(
|
|
258
|
+
(props, forwardedRef) => {
|
|
259
|
+
const { __scopeDialog, ...closeProps } = props;
|
|
260
|
+
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
261
|
+
return /* @__PURE__ */ jsx(
|
|
262
|
+
Primitive.button,
|
|
263
|
+
{
|
|
264
|
+
type: "button",
|
|
265
|
+
...closeProps,
|
|
266
|
+
ref: forwardedRef,
|
|
267
|
+
onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
}
|
|
271
|
+
);
|
|
272
|
+
DialogClose.displayName = CLOSE_NAME;
|
|
273
|
+
function getState(open) {
|
|
274
|
+
return open ? "open" : "closed";
|
|
275
|
+
}
|
|
276
|
+
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
277
|
+
var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
|
|
278
|
+
contentName: CONTENT_NAME,
|
|
279
|
+
titleName: TITLE_NAME,
|
|
280
|
+
docsSlug: "dialog"
|
|
281
|
+
});
|
|
282
|
+
var TitleWarning = ({ titleId }) => {
|
|
283
|
+
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
|
284
|
+
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
|
285
|
+
|
|
286
|
+
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
287
|
+
|
|
288
|
+
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
|
289
|
+
React.useEffect(() => {
|
|
290
|
+
if (titleId) {
|
|
291
|
+
const hasTitle = document.getElementById(titleId);
|
|
292
|
+
if (!hasTitle) console.error(MESSAGE);
|
|
293
|
+
}
|
|
294
|
+
}, [MESSAGE, titleId]);
|
|
295
|
+
return null;
|
|
296
|
+
};
|
|
297
|
+
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
|
298
|
+
var DescriptionWarning = ({ contentRef, descriptionId }) => {
|
|
299
|
+
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
|
300
|
+
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
|
301
|
+
React.useEffect(() => {
|
|
302
|
+
const describedById = contentRef.current?.getAttribute("aria-describedby");
|
|
303
|
+
if (descriptionId && describedById) {
|
|
304
|
+
const hasDescription = document.getElementById(descriptionId);
|
|
305
|
+
if (!hasDescription) console.warn(MESSAGE);
|
|
306
|
+
}
|
|
307
|
+
}, [MESSAGE, contentRef, descriptionId]);
|
|
308
|
+
return null;
|
|
309
|
+
};
|
|
310
|
+
var Root = Dialog;
|
|
311
|
+
var Trigger = DialogTrigger;
|
|
312
|
+
var Portal = DialogPortal;
|
|
313
|
+
var Overlay = DialogOverlay;
|
|
314
|
+
var Content = DialogContent;
|
|
315
|
+
var Title = DialogTitle;
|
|
316
|
+
var Description = DialogDescription;
|
|
317
|
+
var Close = DialogClose;
|
|
318
|
+
|
|
319
|
+
export { Close, Content, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Overlay, Portal, Root, Title, Trigger, WarningProvider, createDialogScope };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
// packages/react/direction/src/Direction.tsx
|
|
5
|
+
var DirectionContext = React.createContext(void 0);
|
|
6
|
+
function useDirection(localDir) {
|
|
7
|
+
const globalDir = React.useContext(DirectionContext);
|
|
8
|
+
return localDir || globalDir || "ltr";
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export { useDirection };
|