lecom-ui 4.1.9 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_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,30 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Primitive } from '../../react-primitive/dist/index.js';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// packages/react/separator/src/separator.tsx
|
|
6
|
+
var NAME = "Separator";
|
|
7
|
+
var DEFAULT_ORIENTATION = "horizontal";
|
|
8
|
+
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
9
|
+
var Separator = React.forwardRef((props, forwardedRef) => {
|
|
10
|
+
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
|
|
11
|
+
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
12
|
+
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
13
|
+
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
14
|
+
return /* @__PURE__ */ jsx(
|
|
15
|
+
Primitive.div,
|
|
16
|
+
{
|
|
17
|
+
"data-orientation": orientation,
|
|
18
|
+
...semanticProps,
|
|
19
|
+
...domProps,
|
|
20
|
+
ref: forwardedRef
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
});
|
|
24
|
+
Separator.displayName = NAME;
|
|
25
|
+
function isValidOrientation(orientation) {
|
|
26
|
+
return ORIENTATIONS.includes(orientation);
|
|
27
|
+
}
|
|
28
|
+
var Root = Separator;
|
|
29
|
+
|
|
30
|
+
export { Root, Separator };
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { composeRefs } from '../../react-compose-refs/dist/index.js';
|
|
3
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// packages/react/slot/src/slot.tsx
|
|
6
|
+
var Slot = React.forwardRef((props, forwardedRef) => {
|
|
7
|
+
const { children, ...slotProps } = props;
|
|
8
|
+
const childrenArray = React.Children.toArray(children);
|
|
9
|
+
const slottable = childrenArray.find(isSlottable);
|
|
10
|
+
if (slottable) {
|
|
11
|
+
const newElement = slottable.props.children;
|
|
12
|
+
const newChildren = childrenArray.map((child) => {
|
|
13
|
+
if (child === slottable) {
|
|
14
|
+
if (React.Children.count(newElement) > 1) return React.Children.only(null);
|
|
15
|
+
return React.isValidElement(newElement) ? newElement.props.children : null;
|
|
16
|
+
} else {
|
|
17
|
+
return child;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
|
|
21
|
+
}
|
|
22
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
|
23
|
+
});
|
|
24
|
+
Slot.displayName = "Slot";
|
|
25
|
+
var SlotClone = React.forwardRef((props, forwardedRef) => {
|
|
26
|
+
const { children, ...slotProps } = props;
|
|
27
|
+
if (React.isValidElement(children)) {
|
|
28
|
+
const childrenRef = getElementRef(children);
|
|
29
|
+
const props2 = mergeProps(slotProps, children.props);
|
|
30
|
+
if (children.type !== React.Fragment) {
|
|
31
|
+
props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
|
|
32
|
+
}
|
|
33
|
+
return React.cloneElement(children, props2);
|
|
34
|
+
}
|
|
35
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
|
36
|
+
});
|
|
37
|
+
SlotClone.displayName = "SlotClone";
|
|
38
|
+
var Slottable = ({ children }) => {
|
|
39
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
40
|
+
};
|
|
41
|
+
function isSlottable(child) {
|
|
42
|
+
return React.isValidElement(child) && child.type === Slottable;
|
|
43
|
+
}
|
|
44
|
+
function mergeProps(slotProps, childProps) {
|
|
45
|
+
const overrideProps = { ...childProps };
|
|
46
|
+
for (const propName in childProps) {
|
|
47
|
+
const slotPropValue = slotProps[propName];
|
|
48
|
+
const childPropValue = childProps[propName];
|
|
49
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
|
50
|
+
if (isHandler) {
|
|
51
|
+
if (slotPropValue && childPropValue) {
|
|
52
|
+
overrideProps[propName] = (...args) => {
|
|
53
|
+
childPropValue(...args);
|
|
54
|
+
slotPropValue(...args);
|
|
55
|
+
};
|
|
56
|
+
} else if (slotPropValue) {
|
|
57
|
+
overrideProps[propName] = slotPropValue;
|
|
58
|
+
}
|
|
59
|
+
} else if (propName === "style") {
|
|
60
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
61
|
+
} else if (propName === "className") {
|
|
62
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return { ...slotProps, ...overrideProps };
|
|
66
|
+
}
|
|
67
|
+
function getElementRef(element) {
|
|
68
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
69
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
70
|
+
if (mayWarn) {
|
|
71
|
+
return element.ref;
|
|
72
|
+
}
|
|
73
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
74
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
75
|
+
if (mayWarn) {
|
|
76
|
+
return element.props.ref;
|
|
77
|
+
}
|
|
78
|
+
return element.props.ref || element.ref;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export { Slot, Slottable };
|
|
@@ -0,0 +1,476 @@
|
|
|
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 } from '../../react-context/dist/index.js';
|
|
5
|
+
import { DismissableLayer } from '../../react-dismissable-layer/dist/index.js';
|
|
6
|
+
import { useId } from '../../react-id/dist/index.js';
|
|
7
|
+
import { createPopperScope, Arrow, Content, Root as Root2, Anchor } from '../../react-popper/dist/index.js';
|
|
8
|
+
import { Presence } from '../../react-presence/dist/index.js';
|
|
9
|
+
import { Primitive } from '../../react-primitive/dist/index.js';
|
|
10
|
+
import { Slottable } from '../../react-slot/dist/index.js';
|
|
11
|
+
import { useControllableState } from '../../react-use-controllable-state/dist/index.js';
|
|
12
|
+
import { Root } from '../../react-visually-hidden/dist/index.js';
|
|
13
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
14
|
+
|
|
15
|
+
var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
|
|
16
|
+
createPopperScope
|
|
17
|
+
]);
|
|
18
|
+
var usePopperScope = createPopperScope();
|
|
19
|
+
var PROVIDER_NAME = "TooltipProvider";
|
|
20
|
+
var DEFAULT_DELAY_DURATION = 700;
|
|
21
|
+
var TOOLTIP_OPEN = "tooltip.open";
|
|
22
|
+
var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
|
|
23
|
+
var TooltipProvider = (props) => {
|
|
24
|
+
const {
|
|
25
|
+
__scopeTooltip,
|
|
26
|
+
delayDuration = DEFAULT_DELAY_DURATION,
|
|
27
|
+
skipDelayDuration = 300,
|
|
28
|
+
disableHoverableContent = false,
|
|
29
|
+
children
|
|
30
|
+
} = props;
|
|
31
|
+
const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
|
|
32
|
+
const isPointerInTransitRef = React.useRef(false);
|
|
33
|
+
const skipDelayTimerRef = React.useRef(0);
|
|
34
|
+
React.useEffect(() => {
|
|
35
|
+
const skipDelayTimer = skipDelayTimerRef.current;
|
|
36
|
+
return () => window.clearTimeout(skipDelayTimer);
|
|
37
|
+
}, []);
|
|
38
|
+
return /* @__PURE__ */ jsx(
|
|
39
|
+
TooltipProviderContextProvider,
|
|
40
|
+
{
|
|
41
|
+
scope: __scopeTooltip,
|
|
42
|
+
isOpenDelayed,
|
|
43
|
+
delayDuration,
|
|
44
|
+
onOpen: React.useCallback(() => {
|
|
45
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
46
|
+
setIsOpenDelayed(false);
|
|
47
|
+
}, []),
|
|
48
|
+
onClose: React.useCallback(() => {
|
|
49
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
50
|
+
skipDelayTimerRef.current = window.setTimeout(
|
|
51
|
+
() => setIsOpenDelayed(true),
|
|
52
|
+
skipDelayDuration
|
|
53
|
+
);
|
|
54
|
+
}, [skipDelayDuration]),
|
|
55
|
+
isPointerInTransitRef,
|
|
56
|
+
onPointerInTransitChange: React.useCallback((inTransit) => {
|
|
57
|
+
isPointerInTransitRef.current = inTransit;
|
|
58
|
+
}, []),
|
|
59
|
+
disableHoverableContent,
|
|
60
|
+
children
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
TooltipProvider.displayName = PROVIDER_NAME;
|
|
65
|
+
var TOOLTIP_NAME = "Tooltip";
|
|
66
|
+
var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
|
|
67
|
+
var Tooltip = (props) => {
|
|
68
|
+
const {
|
|
69
|
+
__scopeTooltip,
|
|
70
|
+
children,
|
|
71
|
+
open: openProp,
|
|
72
|
+
defaultOpen = false,
|
|
73
|
+
onOpenChange,
|
|
74
|
+
disableHoverableContent: disableHoverableContentProp,
|
|
75
|
+
delayDuration: delayDurationProp
|
|
76
|
+
} = props;
|
|
77
|
+
const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
|
|
78
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
79
|
+
const [trigger, setTrigger] = React.useState(null);
|
|
80
|
+
const contentId = useId();
|
|
81
|
+
const openTimerRef = React.useRef(0);
|
|
82
|
+
const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
|
|
83
|
+
const delayDuration = delayDurationProp ?? providerContext.delayDuration;
|
|
84
|
+
const wasOpenDelayedRef = React.useRef(false);
|
|
85
|
+
const [open = false, setOpen] = useControllableState({
|
|
86
|
+
prop: openProp,
|
|
87
|
+
defaultProp: defaultOpen,
|
|
88
|
+
onChange: (open2) => {
|
|
89
|
+
if (open2) {
|
|
90
|
+
providerContext.onOpen();
|
|
91
|
+
document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
|
|
92
|
+
} else {
|
|
93
|
+
providerContext.onClose();
|
|
94
|
+
}
|
|
95
|
+
onOpenChange?.(open2);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
const stateAttribute = React.useMemo(() => {
|
|
99
|
+
return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
|
|
100
|
+
}, [open]);
|
|
101
|
+
const handleOpen = React.useCallback(() => {
|
|
102
|
+
window.clearTimeout(openTimerRef.current);
|
|
103
|
+
openTimerRef.current = 0;
|
|
104
|
+
wasOpenDelayedRef.current = false;
|
|
105
|
+
setOpen(true);
|
|
106
|
+
}, [setOpen]);
|
|
107
|
+
const handleClose = React.useCallback(() => {
|
|
108
|
+
window.clearTimeout(openTimerRef.current);
|
|
109
|
+
openTimerRef.current = 0;
|
|
110
|
+
setOpen(false);
|
|
111
|
+
}, [setOpen]);
|
|
112
|
+
const handleDelayedOpen = React.useCallback(() => {
|
|
113
|
+
window.clearTimeout(openTimerRef.current);
|
|
114
|
+
openTimerRef.current = window.setTimeout(() => {
|
|
115
|
+
wasOpenDelayedRef.current = true;
|
|
116
|
+
setOpen(true);
|
|
117
|
+
openTimerRef.current = 0;
|
|
118
|
+
}, delayDuration);
|
|
119
|
+
}, [delayDuration, setOpen]);
|
|
120
|
+
React.useEffect(() => {
|
|
121
|
+
return () => {
|
|
122
|
+
if (openTimerRef.current) {
|
|
123
|
+
window.clearTimeout(openTimerRef.current);
|
|
124
|
+
openTimerRef.current = 0;
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
}, []);
|
|
128
|
+
return /* @__PURE__ */ jsx(Root2, { ...popperScope, children: /* @__PURE__ */ jsx(
|
|
129
|
+
TooltipContextProvider,
|
|
130
|
+
{
|
|
131
|
+
scope: __scopeTooltip,
|
|
132
|
+
contentId,
|
|
133
|
+
open,
|
|
134
|
+
stateAttribute,
|
|
135
|
+
trigger,
|
|
136
|
+
onTriggerChange: setTrigger,
|
|
137
|
+
onTriggerEnter: React.useCallback(() => {
|
|
138
|
+
if (providerContext.isOpenDelayed) handleDelayedOpen();
|
|
139
|
+
else handleOpen();
|
|
140
|
+
}, [providerContext.isOpenDelayed, handleDelayedOpen, handleOpen]),
|
|
141
|
+
onTriggerLeave: React.useCallback(() => {
|
|
142
|
+
if (disableHoverableContent) {
|
|
143
|
+
handleClose();
|
|
144
|
+
} else {
|
|
145
|
+
window.clearTimeout(openTimerRef.current);
|
|
146
|
+
openTimerRef.current = 0;
|
|
147
|
+
}
|
|
148
|
+
}, [handleClose, disableHoverableContent]),
|
|
149
|
+
onOpen: handleOpen,
|
|
150
|
+
onClose: handleClose,
|
|
151
|
+
disableHoverableContent,
|
|
152
|
+
children
|
|
153
|
+
}
|
|
154
|
+
) });
|
|
155
|
+
};
|
|
156
|
+
Tooltip.displayName = TOOLTIP_NAME;
|
|
157
|
+
var TRIGGER_NAME = "TooltipTrigger";
|
|
158
|
+
var TooltipTrigger = React.forwardRef(
|
|
159
|
+
(props, forwardedRef) => {
|
|
160
|
+
const { __scopeTooltip, ...triggerProps } = props;
|
|
161
|
+
const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
|
|
162
|
+
const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);
|
|
163
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
164
|
+
const ref = React.useRef(null);
|
|
165
|
+
const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);
|
|
166
|
+
const isPointerDownRef = React.useRef(false);
|
|
167
|
+
const hasPointerMoveOpenedRef = React.useRef(false);
|
|
168
|
+
const handlePointerUp = React.useCallback(() => isPointerDownRef.current = false, []);
|
|
169
|
+
React.useEffect(() => {
|
|
170
|
+
return () => document.removeEventListener("pointerup", handlePointerUp);
|
|
171
|
+
}, [handlePointerUp]);
|
|
172
|
+
return /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
|
|
173
|
+
Primitive.button,
|
|
174
|
+
{
|
|
175
|
+
"aria-describedby": context.open ? context.contentId : void 0,
|
|
176
|
+
"data-state": context.stateAttribute,
|
|
177
|
+
...triggerProps,
|
|
178
|
+
ref: composedRefs,
|
|
179
|
+
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
180
|
+
if (event.pointerType === "touch") return;
|
|
181
|
+
if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
|
|
182
|
+
context.onTriggerEnter();
|
|
183
|
+
hasPointerMoveOpenedRef.current = true;
|
|
184
|
+
}
|
|
185
|
+
}),
|
|
186
|
+
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
|
|
187
|
+
context.onTriggerLeave();
|
|
188
|
+
hasPointerMoveOpenedRef.current = false;
|
|
189
|
+
}),
|
|
190
|
+
onPointerDown: composeEventHandlers(props.onPointerDown, () => {
|
|
191
|
+
isPointerDownRef.current = true;
|
|
192
|
+
document.addEventListener("pointerup", handlePointerUp, { once: true });
|
|
193
|
+
}),
|
|
194
|
+
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
195
|
+
if (!isPointerDownRef.current) context.onOpen();
|
|
196
|
+
}),
|
|
197
|
+
onBlur: composeEventHandlers(props.onBlur, context.onClose),
|
|
198
|
+
onClick: composeEventHandlers(props.onClick, context.onClose)
|
|
199
|
+
}
|
|
200
|
+
) });
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
TooltipTrigger.displayName = TRIGGER_NAME;
|
|
204
|
+
var PORTAL_NAME = "TooltipPortal";
|
|
205
|
+
var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
|
|
206
|
+
forceMount: void 0
|
|
207
|
+
});
|
|
208
|
+
var CONTENT_NAME = "TooltipContent";
|
|
209
|
+
var TooltipContent = React.forwardRef(
|
|
210
|
+
(props, forwardedRef) => {
|
|
211
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
|
|
212
|
+
const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
|
|
213
|
+
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
214
|
+
return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? /* @__PURE__ */ jsx(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
|
|
215
|
+
}
|
|
216
|
+
);
|
|
217
|
+
var TooltipContentHoverable = React.forwardRef((props, forwardedRef) => {
|
|
218
|
+
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
219
|
+
const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);
|
|
220
|
+
const ref = React.useRef(null);
|
|
221
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
222
|
+
const [pointerGraceArea, setPointerGraceArea] = React.useState(null);
|
|
223
|
+
const { trigger, onClose } = context;
|
|
224
|
+
const content = ref.current;
|
|
225
|
+
const { onPointerInTransitChange } = providerContext;
|
|
226
|
+
const handleRemoveGraceArea = React.useCallback(() => {
|
|
227
|
+
setPointerGraceArea(null);
|
|
228
|
+
onPointerInTransitChange(false);
|
|
229
|
+
}, [onPointerInTransitChange]);
|
|
230
|
+
const handleCreateGraceArea = React.useCallback(
|
|
231
|
+
(event, hoverTarget) => {
|
|
232
|
+
const currentTarget = event.currentTarget;
|
|
233
|
+
const exitPoint = { x: event.clientX, y: event.clientY };
|
|
234
|
+
const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
|
|
235
|
+
const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
|
|
236
|
+
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
|
|
237
|
+
const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
|
|
238
|
+
setPointerGraceArea(graceArea);
|
|
239
|
+
onPointerInTransitChange(true);
|
|
240
|
+
},
|
|
241
|
+
[onPointerInTransitChange]
|
|
242
|
+
);
|
|
243
|
+
React.useEffect(() => {
|
|
244
|
+
return () => handleRemoveGraceArea();
|
|
245
|
+
}, [handleRemoveGraceArea]);
|
|
246
|
+
React.useEffect(() => {
|
|
247
|
+
if (trigger && content) {
|
|
248
|
+
const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
|
|
249
|
+
const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
|
|
250
|
+
trigger.addEventListener("pointerleave", handleTriggerLeave);
|
|
251
|
+
content.addEventListener("pointerleave", handleContentLeave);
|
|
252
|
+
return () => {
|
|
253
|
+
trigger.removeEventListener("pointerleave", handleTriggerLeave);
|
|
254
|
+
content.removeEventListener("pointerleave", handleContentLeave);
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
}, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);
|
|
258
|
+
React.useEffect(() => {
|
|
259
|
+
if (pointerGraceArea) {
|
|
260
|
+
const handleTrackPointerGrace = (event) => {
|
|
261
|
+
const target = event.target;
|
|
262
|
+
const pointerPosition = { x: event.clientX, y: event.clientY };
|
|
263
|
+
const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
|
|
264
|
+
const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
|
|
265
|
+
if (hasEnteredTarget) {
|
|
266
|
+
handleRemoveGraceArea();
|
|
267
|
+
} else if (isPointerOutsideGraceArea) {
|
|
268
|
+
handleRemoveGraceArea();
|
|
269
|
+
onClose();
|
|
270
|
+
}
|
|
271
|
+
};
|
|
272
|
+
document.addEventListener("pointermove", handleTrackPointerGrace);
|
|
273
|
+
return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
|
|
274
|
+
}
|
|
275
|
+
}, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
|
|
276
|
+
return /* @__PURE__ */ jsx(TooltipContentImpl, { ...props, ref: composedRefs });
|
|
277
|
+
});
|
|
278
|
+
var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
|
|
279
|
+
var TooltipContentImpl = React.forwardRef(
|
|
280
|
+
(props, forwardedRef) => {
|
|
281
|
+
const {
|
|
282
|
+
__scopeTooltip,
|
|
283
|
+
children,
|
|
284
|
+
"aria-label": ariaLabel,
|
|
285
|
+
onEscapeKeyDown,
|
|
286
|
+
onPointerDownOutside,
|
|
287
|
+
...contentProps
|
|
288
|
+
} = props;
|
|
289
|
+
const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
|
|
290
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
291
|
+
const { onClose } = context;
|
|
292
|
+
React.useEffect(() => {
|
|
293
|
+
document.addEventListener(TOOLTIP_OPEN, onClose);
|
|
294
|
+
return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
|
|
295
|
+
}, [onClose]);
|
|
296
|
+
React.useEffect(() => {
|
|
297
|
+
if (context.trigger) {
|
|
298
|
+
const handleScroll = (event) => {
|
|
299
|
+
const target = event.target;
|
|
300
|
+
if (target?.contains(context.trigger)) onClose();
|
|
301
|
+
};
|
|
302
|
+
window.addEventListener("scroll", handleScroll, { capture: true });
|
|
303
|
+
return () => window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
304
|
+
}
|
|
305
|
+
}, [context.trigger, onClose]);
|
|
306
|
+
return /* @__PURE__ */ jsx(
|
|
307
|
+
DismissableLayer,
|
|
308
|
+
{
|
|
309
|
+
asChild: true,
|
|
310
|
+
disableOutsidePointerEvents: false,
|
|
311
|
+
onEscapeKeyDown,
|
|
312
|
+
onPointerDownOutside,
|
|
313
|
+
onFocusOutside: (event) => event.preventDefault(),
|
|
314
|
+
onDismiss: onClose,
|
|
315
|
+
children: /* @__PURE__ */ jsxs(
|
|
316
|
+
Content,
|
|
317
|
+
{
|
|
318
|
+
"data-state": context.stateAttribute,
|
|
319
|
+
...popperScope,
|
|
320
|
+
...contentProps,
|
|
321
|
+
ref: forwardedRef,
|
|
322
|
+
style: {
|
|
323
|
+
...contentProps.style,
|
|
324
|
+
// re-namespace exposed content custom properties
|
|
325
|
+
...{
|
|
326
|
+
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
327
|
+
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
|
|
328
|
+
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
|
|
329
|
+
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
|
|
330
|
+
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
children: [
|
|
334
|
+
/* @__PURE__ */ jsx(Slottable, { children }),
|
|
335
|
+
/* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
|
|
336
|
+
]
|
|
337
|
+
}
|
|
338
|
+
)
|
|
339
|
+
}
|
|
340
|
+
);
|
|
341
|
+
}
|
|
342
|
+
);
|
|
343
|
+
TooltipContent.displayName = CONTENT_NAME;
|
|
344
|
+
var ARROW_NAME = "TooltipArrow";
|
|
345
|
+
var TooltipArrow = React.forwardRef(
|
|
346
|
+
(props, forwardedRef) => {
|
|
347
|
+
const { __scopeTooltip, ...arrowProps } = props;
|
|
348
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
349
|
+
const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
|
|
350
|
+
ARROW_NAME,
|
|
351
|
+
__scopeTooltip
|
|
352
|
+
);
|
|
353
|
+
return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
354
|
+
}
|
|
355
|
+
);
|
|
356
|
+
TooltipArrow.displayName = ARROW_NAME;
|
|
357
|
+
function getExitSideFromRect(point, rect) {
|
|
358
|
+
const top = Math.abs(rect.top - point.y);
|
|
359
|
+
const bottom = Math.abs(rect.bottom - point.y);
|
|
360
|
+
const right = Math.abs(rect.right - point.x);
|
|
361
|
+
const left = Math.abs(rect.left - point.x);
|
|
362
|
+
switch (Math.min(top, bottom, right, left)) {
|
|
363
|
+
case left:
|
|
364
|
+
return "left";
|
|
365
|
+
case right:
|
|
366
|
+
return "right";
|
|
367
|
+
case top:
|
|
368
|
+
return "top";
|
|
369
|
+
case bottom:
|
|
370
|
+
return "bottom";
|
|
371
|
+
default:
|
|
372
|
+
throw new Error("unreachable");
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
|
|
376
|
+
const paddedExitPoints = [];
|
|
377
|
+
switch (exitSide) {
|
|
378
|
+
case "top":
|
|
379
|
+
paddedExitPoints.push(
|
|
380
|
+
{ x: exitPoint.x - padding, y: exitPoint.y + padding },
|
|
381
|
+
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
382
|
+
);
|
|
383
|
+
break;
|
|
384
|
+
case "bottom":
|
|
385
|
+
paddedExitPoints.push(
|
|
386
|
+
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
387
|
+
{ x: exitPoint.x + padding, y: exitPoint.y - padding }
|
|
388
|
+
);
|
|
389
|
+
break;
|
|
390
|
+
case "left":
|
|
391
|
+
paddedExitPoints.push(
|
|
392
|
+
{ x: exitPoint.x + padding, y: exitPoint.y - padding },
|
|
393
|
+
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
394
|
+
);
|
|
395
|
+
break;
|
|
396
|
+
case "right":
|
|
397
|
+
paddedExitPoints.push(
|
|
398
|
+
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
399
|
+
{ x: exitPoint.x - padding, y: exitPoint.y + padding }
|
|
400
|
+
);
|
|
401
|
+
break;
|
|
402
|
+
}
|
|
403
|
+
return paddedExitPoints;
|
|
404
|
+
}
|
|
405
|
+
function getPointsFromRect(rect) {
|
|
406
|
+
const { top, right, bottom, left } = rect;
|
|
407
|
+
return [
|
|
408
|
+
{ x: left, y: top },
|
|
409
|
+
{ x: right, y: top },
|
|
410
|
+
{ x: right, y: bottom },
|
|
411
|
+
{ x: left, y: bottom }
|
|
412
|
+
];
|
|
413
|
+
}
|
|
414
|
+
function isPointInPolygon(point, polygon) {
|
|
415
|
+
const { x, y } = point;
|
|
416
|
+
let inside = false;
|
|
417
|
+
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
418
|
+
const xi = polygon[i].x;
|
|
419
|
+
const yi = polygon[i].y;
|
|
420
|
+
const xj = polygon[j].x;
|
|
421
|
+
const yj = polygon[j].y;
|
|
422
|
+
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
423
|
+
if (intersect) inside = !inside;
|
|
424
|
+
}
|
|
425
|
+
return inside;
|
|
426
|
+
}
|
|
427
|
+
function getHull(points) {
|
|
428
|
+
const newPoints = points.slice();
|
|
429
|
+
newPoints.sort((a, b) => {
|
|
430
|
+
if (a.x < b.x) return -1;
|
|
431
|
+
else if (a.x > b.x) return 1;
|
|
432
|
+
else if (a.y < b.y) return -1;
|
|
433
|
+
else if (a.y > b.y) return 1;
|
|
434
|
+
else return 0;
|
|
435
|
+
});
|
|
436
|
+
return getHullPresorted(newPoints);
|
|
437
|
+
}
|
|
438
|
+
function getHullPresorted(points) {
|
|
439
|
+
if (points.length <= 1) return points.slice();
|
|
440
|
+
const upperHull = [];
|
|
441
|
+
for (let i = 0; i < points.length; i++) {
|
|
442
|
+
const p = points[i];
|
|
443
|
+
while (upperHull.length >= 2) {
|
|
444
|
+
const q = upperHull[upperHull.length - 1];
|
|
445
|
+
const r = upperHull[upperHull.length - 2];
|
|
446
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
|
|
447
|
+
else break;
|
|
448
|
+
}
|
|
449
|
+
upperHull.push(p);
|
|
450
|
+
}
|
|
451
|
+
upperHull.pop();
|
|
452
|
+
const lowerHull = [];
|
|
453
|
+
for (let i = points.length - 1; i >= 0; i--) {
|
|
454
|
+
const p = points[i];
|
|
455
|
+
while (lowerHull.length >= 2) {
|
|
456
|
+
const q = lowerHull[lowerHull.length - 1];
|
|
457
|
+
const r = lowerHull[lowerHull.length - 2];
|
|
458
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
|
|
459
|
+
else break;
|
|
460
|
+
}
|
|
461
|
+
lowerHull.push(p);
|
|
462
|
+
}
|
|
463
|
+
lowerHull.pop();
|
|
464
|
+
if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
|
|
465
|
+
return upperHull;
|
|
466
|
+
} else {
|
|
467
|
+
return upperHull.concat(lowerHull);
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
var Provider = TooltipProvider;
|
|
471
|
+
var Root3 = Tooltip;
|
|
472
|
+
var Trigger = TooltipTrigger;
|
|
473
|
+
var Content2 = TooltipContent;
|
|
474
|
+
var Arrow2 = TooltipArrow;
|
|
475
|
+
|
|
476
|
+
export { Arrow2 as Arrow, Content2 as Content, Provider, Root3 as Root, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, Trigger, createTooltipScope };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
// packages/react/use-callback-ref/src/useCallbackRef.tsx
|
|
4
|
+
function useCallbackRef(callback) {
|
|
5
|
+
const callbackRef = React.useRef(callback);
|
|
6
|
+
React.useEffect(() => {
|
|
7
|
+
callbackRef.current = callback;
|
|
8
|
+
});
|
|
9
|
+
return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { useCallbackRef };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useCallbackRef } from '../../react-use-callback-ref/dist/index.js';
|
|
3
|
+
|
|
4
|
+
// packages/react/use-controllable-state/src/useControllableState.tsx
|
|
5
|
+
function useControllableState({
|
|
6
|
+
prop,
|
|
7
|
+
defaultProp,
|
|
8
|
+
onChange = () => {
|
|
9
|
+
}
|
|
10
|
+
}) {
|
|
11
|
+
const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
|
|
12
|
+
const isControlled = prop !== void 0;
|
|
13
|
+
const value = isControlled ? prop : uncontrolledProp;
|
|
14
|
+
const handleChange = useCallbackRef(onChange);
|
|
15
|
+
const setValue = React.useCallback(
|
|
16
|
+
(nextValue) => {
|
|
17
|
+
if (isControlled) {
|
|
18
|
+
const setter = nextValue;
|
|
19
|
+
const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
|
|
20
|
+
if (value2 !== prop) handleChange(value2);
|
|
21
|
+
} else {
|
|
22
|
+
setUncontrolledProp(nextValue);
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
[isControlled, prop, setUncontrolledProp, handleChange]
|
|
26
|
+
);
|
|
27
|
+
return [value, setValue];
|
|
28
|
+
}
|
|
29
|
+
function useUncontrolledState({
|
|
30
|
+
defaultProp,
|
|
31
|
+
onChange
|
|
32
|
+
}) {
|
|
33
|
+
const uncontrolledState = React.useState(defaultProp);
|
|
34
|
+
const [value] = uncontrolledState;
|
|
35
|
+
const prevValueRef = React.useRef(value);
|
|
36
|
+
const handleChange = useCallbackRef(onChange);
|
|
37
|
+
React.useEffect(() => {
|
|
38
|
+
if (prevValueRef.current !== value) {
|
|
39
|
+
handleChange(value);
|
|
40
|
+
prevValueRef.current = value;
|
|
41
|
+
}
|
|
42
|
+
}, [value, prevValueRef, handleChange]);
|
|
43
|
+
return uncontrolledState;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export { useControllableState };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useCallbackRef } from '../../react-use-callback-ref/dist/index.js';
|
|
3
|
+
|
|
4
|
+
// packages/react/use-escape-keydown/src/useEscapeKeydown.tsx
|
|
5
|
+
function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
|
|
6
|
+
const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
|
|
7
|
+
React.useEffect(() => {
|
|
8
|
+
const handleKeyDown = (event) => {
|
|
9
|
+
if (event.key === "Escape") {
|
|
10
|
+
onEscapeKeyDown(event);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
14
|
+
return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
15
|
+
}, [onEscapeKeyDown, ownerDocument]);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { useEscapeKeydown };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
// packages/react/use-previous/src/usePrevious.tsx
|
|
4
|
+
function usePrevious(value) {
|
|
5
|
+
const ref = React.useRef({ value, previous: value });
|
|
6
|
+
return React.useMemo(() => {
|
|
7
|
+
if (ref.current.value !== value) {
|
|
8
|
+
ref.current.previous = ref.current.value;
|
|
9
|
+
ref.current.value = value;
|
|
10
|
+
}
|
|
11
|
+
return ref.current.previous;
|
|
12
|
+
}, [value]);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { usePrevious };
|