@astral/ui 4.65.1 → 4.67.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/components/DashboardSidebar/SidebarNav/SidebarNav.js +2 -1
- package/components/DashboardSidebar/SidebarNav/constants.d.ts +3 -0
- package/components/DashboardSidebar/SidebarNav/constants.js +4 -0
- package/components/DashboardSidebar/SidebarNav/index.d.ts +1 -0
- package/components/DashboardSidebar/SidebarNav/index.js +1 -0
- package/components/DashboardSidebar/useLogic/hooks/index.d.ts +1 -0
- package/components/DashboardSidebar/useLogic/hooks/index.js +1 -0
- package/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/index.d.ts +1 -0
- package/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/index.js +1 -0
- package/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/useCloseSidebarOnMobile.d.ts +1 -0
- package/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/useCloseSidebarOnMobile.js +30 -0
- package/components/DashboardSidebar/useLogic/useLogic.js +2 -0
- package/components/NavMenu/index.d.ts +1 -0
- package/components/NavMenu/index.js +1 -0
- package/components/NewPopover/NewPopover.d.ts +2 -0
- package/components/NewPopover/NewPopover.js +23 -0
- package/components/NewPopover/constants.d.ts +6 -0
- package/components/NewPopover/constants.js +7 -0
- package/components/NewPopover/index.d.ts +2 -0
- package/components/NewPopover/index.js +1 -0
- package/components/NewPopover/public.d.ts +2 -0
- package/components/NewPopover/public.js +1 -0
- package/components/NewPopover/styles.d.ts +12 -0
- package/components/NewPopover/styles.js +80 -0
- package/components/NewPopover/types.d.ts +53 -0
- package/components/NewPopover/types.js +1 -0
- package/components/NewPopover/useLogic/index.d.ts +1 -0
- package/components/NewPopover/useLogic/index.js +1 -0
- package/components/NewPopover/useLogic/useLogic.d.ts +11 -0
- package/components/NewPopover/useLogic/useLogic.js +54 -0
- package/components/NewPopover/utils/index.d.ts +1 -0
- package/components/NewPopover/utils/index.js +1 -0
- package/components/NewPopover/utils/resolveAnchorNode.d.ts +6 -0
- package/components/NewPopover/utils/resolveAnchorNode.js +8 -0
- package/components/Popover/Popover.d.ts +4 -8
- package/components/Popover/Popover.js +3 -0
- package/components/Popover/index.d.ts +1 -0
- package/components/Popover/index.js +1 -0
- package/components/Popover/public.d.ts +2 -1
- package/components/Popover/public.js +1 -1
- package/components/Popover/types.d.ts +8 -0
- package/components/Popover/types.js +1 -0
- package/components/index.d.ts +0 -1
- package/components/index.js +0 -1
- package/components/useClickAwayEffect/useClickAwayEffect.d.ts +6 -1
- package/components/useClickAwayEffect/useClickAwayEffect.js +19 -9
- package/components/useFocusTrapEffect/index.d.ts +1 -0
- package/components/useFocusTrapEffect/index.js +1 -0
- package/components/useFocusTrapEffect/useFocusTrapEffect.d.ts +17 -0
- package/components/useFocusTrapEffect/useFocusTrapEffect.js +24 -0
- package/node/components/DashboardSidebar/SidebarNav/SidebarNav.js +2 -1
- package/node/components/DashboardSidebar/SidebarNav/constants.d.ts +3 -0
- package/node/components/DashboardSidebar/SidebarNav/constants.js +7 -0
- package/node/components/DashboardSidebar/SidebarNav/index.d.ts +1 -0
- package/node/components/DashboardSidebar/SidebarNav/index.js +3 -0
- package/node/components/DashboardSidebar/useLogic/hooks/index.d.ts +1 -0
- package/node/components/DashboardSidebar/useLogic/hooks/index.js +17 -0
- package/node/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/index.d.ts +1 -0
- package/node/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/index.js +17 -0
- package/node/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/useCloseSidebarOnMobile.d.ts +1 -0
- package/node/components/DashboardSidebar/useLogic/hooks/useCloseSidebarOnMobile/useCloseSidebarOnMobile.js +34 -0
- package/node/components/DashboardSidebar/useLogic/useLogic.js +2 -0
- package/node/components/NavMenu/index.d.ts +1 -0
- package/node/components/NavMenu/index.js +3 -0
- package/node/components/NewPopover/NewPopover.d.ts +2 -0
- package/node/components/NewPopover/NewPopover.js +27 -0
- package/node/components/NewPopover/constants.d.ts +6 -0
- package/node/components/NewPopover/constants.js +10 -0
- package/node/components/NewPopover/index.d.ts +2 -0
- package/node/components/NewPopover/index.js +5 -0
- package/node/components/NewPopover/public.d.ts +2 -0
- package/node/components/NewPopover/public.js +5 -0
- package/node/components/NewPopover/styles.d.ts +12 -0
- package/node/components/NewPopover/styles.js +86 -0
- package/node/components/NewPopover/types.d.ts +53 -0
- package/node/components/NewPopover/types.js +2 -0
- package/node/components/NewPopover/useLogic/index.d.ts +1 -0
- package/node/components/NewPopover/useLogic/index.js +17 -0
- package/node/components/NewPopover/useLogic/useLogic.d.ts +11 -0
- package/node/components/NewPopover/useLogic/useLogic.js +58 -0
- package/node/components/NewPopover/utils/index.d.ts +1 -0
- package/node/components/NewPopover/utils/index.js +17 -0
- package/node/components/NewPopover/utils/resolveAnchorNode.d.ts +6 -0
- package/node/components/NewPopover/utils/resolveAnchorNode.js +12 -0
- package/node/components/Popover/Popover.d.ts +4 -8
- package/node/components/Popover/Popover.js +3 -0
- package/node/components/Popover/index.d.ts +1 -0
- package/node/components/Popover/index.js +1 -0
- package/node/components/Popover/public.d.ts +2 -1
- package/node/components/Popover/public.js +3 -15
- package/node/components/Popover/types.d.ts +8 -0
- package/node/components/Popover/types.js +2 -0
- package/node/components/index.d.ts +0 -1
- package/node/components/index.js +0 -1
- package/node/components/useClickAwayEffect/useClickAwayEffect.d.ts +6 -1
- package/node/components/useClickAwayEffect/useClickAwayEffect.js +19 -9
- package/node/components/useFocusTrapEffect/index.d.ts +1 -0
- package/node/components/useFocusTrapEffect/index.js +17 -0
- package/node/components/useFocusTrapEffect/useFocusTrapEffect.d.ts +17 -0
- package/node/components/useFocusTrapEffect/useFocusTrapEffect.js +28 -0
- package/package.json +3 -2
|
@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.sidebarNavClassnames = void 0;
|
|
17
18
|
__exportStar(require("./SidebarNav"), exports);
|
|
19
|
+
var constants_1 = require("./constants");
|
|
20
|
+
Object.defineProperty(exports, "sidebarNavClassnames", { enumerable: true, get: function () { return constants_1.sidebarNavClassnames; } });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useCloseSidebarOnMobile';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./useCloseSidebarOnMobile"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useCloseSidebarOnMobile';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./useCloseSidebarOnMobile"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useCloseSidebarOnMobile: () => void;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useCloseSidebarOnMobile = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const DashboardSidebarProvider_1 = require("../../../../DashboardSidebarProvider");
|
|
6
|
+
const NavMenu_1 = require("../../../../NavMenu");
|
|
7
|
+
const useViewportType_1 = require("../../../../useViewportType");
|
|
8
|
+
const SidebarNav_1 = require("../../../SidebarNav");
|
|
9
|
+
const useCloseSidebarOnMobile = () => {
|
|
10
|
+
const { isMobile } = (0, useViewportType_1.useViewportType)();
|
|
11
|
+
const { collapsedIn, onToggleSidebar } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
|
|
12
|
+
const handleMenuListItemClick = () => {
|
|
13
|
+
onToggleSidebar(false);
|
|
14
|
+
};
|
|
15
|
+
(0, react_1.useEffect)(() => {
|
|
16
|
+
if (!isMobile || !collapsedIn) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const sidebarNavElement = document.querySelector(`.${SidebarNav_1.sidebarNavClassnames.root}`);
|
|
20
|
+
if (!sidebarNavElement) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
const listItems = sidebarNavElement.querySelectorAll(`.${NavMenu_1.navMenuItemButtonClassnames.root}:not(.${NavMenu_1.navMenuItemButtonClassnames.hasGroup})`);
|
|
24
|
+
listItems.forEach((item) => {
|
|
25
|
+
item.addEventListener('click', handleMenuListItemClick);
|
|
26
|
+
});
|
|
27
|
+
return () => {
|
|
28
|
+
listItems.forEach((item) => {
|
|
29
|
+
item.removeEventListener('click', handleMenuListItemClick);
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
}, [isMobile, collapsedIn]);
|
|
33
|
+
};
|
|
34
|
+
exports.useCloseSidebarOnMobile = useCloseSidebarOnMobile;
|
|
@@ -10,11 +10,13 @@ const useTheme_1 = require("../../theme/hooks/useTheme");
|
|
|
10
10
|
const useViewportType_1 = require("../../useViewportType");
|
|
11
11
|
const classNames_1 = require("../../utils/classNames");
|
|
12
12
|
const constants_1 = require("../constants");
|
|
13
|
+
const hooks_1 = require("./hooks");
|
|
13
14
|
const useLogic = (props) => {
|
|
14
15
|
const { className, menu, header, isLoading } = props;
|
|
15
16
|
const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
|
|
16
17
|
const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, hasProfileRef, mobileHeaderPriorityFeature, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
|
|
17
18
|
const { isMobile } = (0, useViewportType_1.useViewportType)();
|
|
19
|
+
(0, hooks_1.useCloseSidebarOnMobile)();
|
|
18
20
|
const hoverTimerRef = (0, react_1.useRef)(null);
|
|
19
21
|
const theme = (0, useTheme_1.useTheme)();
|
|
20
22
|
const onMouseEnter = () => {
|
|
@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.navMenuItemButtonClassnames = void 0;
|
|
17
18
|
__exportStar(require("./NavMenu"), exports);
|
|
19
|
+
var Item_1 = require("./Item");
|
|
20
|
+
Object.defineProperty(exports, "navMenuItemButtonClassnames", { enumerable: true, get: function () { return Item_1.navMenuItemButtonClassnames; } });
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.NewPopover = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const BottomDrawer_1 = require("../BottomDrawer");
|
|
6
|
+
const classNames_1 = require("../utils/classNames");
|
|
7
|
+
const cva_1 = require("../utils/cva");
|
|
8
|
+
const constants_1 = require("./constants");
|
|
9
|
+
const styles_1 = require("./styles");
|
|
10
|
+
const useLogic_1 = require("./useLogic");
|
|
11
|
+
const animatedWrapperCva = (0, cva_1.cva)(constants_1.popoverClassnames.animatedWrapper, {
|
|
12
|
+
variants: {
|
|
13
|
+
isOpen: {
|
|
14
|
+
true: constants_1.popoverClassnames.animatedWrapperOpen,
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, }) => {
|
|
19
|
+
const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, } = (0, useLogic_1.useLogic)({ isOpen, anchorEl, onClose, disableAutoFocus });
|
|
20
|
+
if (isMobile) {
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
|
|
22
|
+
disableAutoFocus,
|
|
23
|
+
}, children: children }));
|
|
24
|
+
}
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopper, { className: constants_1.popoverClassnames.root, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, children: (0, jsx_runtime_1.jsx)(styles_1.AnimatedWrapper, { className: (0, classNames_1.classNames)(className, animatedWrapperCva({ isOpen: isOpened })), style: style, onAnimationEnd: handleAnimationEnd, children: (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { ref: setContainerRef, tabIndex: -1, className: constants_1.popoverClassnames.innerContainer, children: children }) }) }));
|
|
26
|
+
};
|
|
27
|
+
exports.NewPopover = NewPopover;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.popoverClassnames = void 0;
|
|
4
|
+
const createUIKitClassname_1 = require("../utils/createUIKitClassname");
|
|
5
|
+
exports.popoverClassnames = {
|
|
6
|
+
root: (0, createUIKitClassname_1.createUIKitClassname)('popover'),
|
|
7
|
+
innerContainer: (0, createUIKitClassname_1.createUIKitClassname)('popover__inner-container'),
|
|
8
|
+
animatedWrapper: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper'),
|
|
9
|
+
animatedWrapperOpen: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper_is-open'),
|
|
10
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.NewPopover = void 0;
|
|
4
|
+
var NewPopover_1 = require("./NewPopover");
|
|
5
|
+
Object.defineProperty(exports, "NewPopover", { enumerable: true, get: function () { return NewPopover_1.NewPopover; } });
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.NewPopover = void 0;
|
|
4
|
+
var NewPopover_1 = require("./NewPopover");
|
|
5
|
+
Object.defineProperty(exports, "NewPopover", { enumerable: true, get: function () { return NewPopover_1.NewPopover; } });
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledMuiPopper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/Popper").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
}, {}, {}>;
|
|
5
|
+
export declare const AnimatedWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
|
|
6
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
7
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
8
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
+
export declare const InnerContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
|
|
10
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
11
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
12
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.InnerContainer = exports.AnimatedWrapper = exports.StyledMuiPopper = void 0;
|
|
7
|
+
const Popper_1 = __importDefault(require("@mui/material/Popper"));
|
|
8
|
+
const styled_1 = require("../styled");
|
|
9
|
+
const constants_1 = require("./constants");
|
|
10
|
+
exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
|
|
11
|
+
&.${constants_1.popoverClassnames.root} {
|
|
12
|
+
z-index: ${({ theme }) => theme.zIndex.tooltip};
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&&[data-popper-placement*='top'] .${constants_1.popoverClassnames.animatedWrapper} {
|
|
16
|
+
transform-origin: bottom center;
|
|
17
|
+
|
|
18
|
+
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&&[data-popper-placement*='bottom'] .${constants_1.popoverClassnames.animatedWrapper} {
|
|
22
|
+
transform-origin: top center;
|
|
23
|
+
|
|
24
|
+
margin-top: ${({ theme }) => theme.spacing(2)};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&&[data-popper-placement*='left'] .${constants_1.popoverClassnames.animatedWrapper} {
|
|
28
|
+
transform-origin: right center;
|
|
29
|
+
|
|
30
|
+
margin-right: ${({ theme }) => theme.spacing(2)};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&&[data-popper-placement*='right'] .${constants_1.popoverClassnames.animatedWrapper} {
|
|
34
|
+
transform-origin: left center;
|
|
35
|
+
|
|
36
|
+
margin-left: ${({ theme }) => theme.spacing(2)};
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
exports.AnimatedWrapper = styled_1.styled.div `
|
|
40
|
+
animation: popover-grow-out
|
|
41
|
+
${({ theme }) => theme.transitions.duration.enteringScreen}ms
|
|
42
|
+
${({ theme }) => theme.transitions.easing.easeInOut} forwards;
|
|
43
|
+
|
|
44
|
+
&.${constants_1.popoverClassnames.animatedWrapperOpen} {
|
|
45
|
+
animation: popover-grow-in
|
|
46
|
+
${({ theme }) => theme.transitions.duration.enteringScreen}ms
|
|
47
|
+
${({ theme }) => theme.transitions.easing.easeInOut} forwards;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@keyframes popover-grow-in {
|
|
51
|
+
from {
|
|
52
|
+
transform: scale(0.75, 0.5625);
|
|
53
|
+
|
|
54
|
+
opacity: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
to {
|
|
58
|
+
transform: none;
|
|
59
|
+
|
|
60
|
+
opacity: 1;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@keyframes popover-grow-out {
|
|
65
|
+
from {
|
|
66
|
+
transform: none;
|
|
67
|
+
|
|
68
|
+
opacity: 1;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
to {
|
|
72
|
+
transform: scale(0.75, 0.5625);
|
|
73
|
+
|
|
74
|
+
opacity: 0;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
`;
|
|
78
|
+
exports.InnerContainer = styled_1.styled.div `
|
|
79
|
+
&.${constants_1.popoverClassnames.innerContainer} {
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
|
|
82
|
+
background: ${({ theme }) => theme.palette.background.paper};
|
|
83
|
+
border-radius: ${({ theme }) => theme.shape.medium};
|
|
84
|
+
box-shadow: ${({ theme }) => theme.elevation[200]};
|
|
85
|
+
}
|
|
86
|
+
`;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
export type NewPopoverOnClose = (event: Event | SyntheticEvent) => void;
|
|
3
|
+
export type NewPopoverPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
|
|
4
|
+
type NewPopoverVirtualElement = {
|
|
5
|
+
getBoundingClientRect: () => DOMRect;
|
|
6
|
+
};
|
|
7
|
+
export type NewPopoverAnchorEl = null | NewPopoverVirtualElement | HTMLElement | (() => HTMLElement) | (() => NewPopoverVirtualElement);
|
|
8
|
+
export type NewPopoverProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Якорь позиционирования
|
|
11
|
+
*/
|
|
12
|
+
anchorEl?: NewPopoverAnchorEl;
|
|
13
|
+
/**
|
|
14
|
+
* Показывать popover. Если не передан — видимость определяется наличием anchorEl.
|
|
15
|
+
*/
|
|
16
|
+
isOpen?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Позиция относительно anchor
|
|
19
|
+
* @default 'bottom'
|
|
20
|
+
*/
|
|
21
|
+
placement?: NewPopoverPlacement;
|
|
22
|
+
/**
|
|
23
|
+
* Контент popover
|
|
24
|
+
*/
|
|
25
|
+
children?: ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* className корневого popper
|
|
28
|
+
*/
|
|
29
|
+
className?: string;
|
|
30
|
+
/**
|
|
31
|
+
* style корневого popper
|
|
32
|
+
*/
|
|
33
|
+
style?: CSSProperties;
|
|
34
|
+
/**
|
|
35
|
+
* Заголовок для отображения в мобильной версии
|
|
36
|
+
*/
|
|
37
|
+
title?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Обработчик закрытия компонента
|
|
40
|
+
*/
|
|
41
|
+
onClose?: NewPopoverOnClose;
|
|
42
|
+
/**
|
|
43
|
+
* Рендерить popper внутри родителя, без portal
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
disablePortal?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Отключить автофокус при открытии popover (десктоп)
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
disableAutoFocus?: boolean;
|
|
52
|
+
};
|
|
53
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useLogic';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./useLogic"), exports);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type NewPopoverProps } from '../types';
|
|
2
|
+
type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus'>;
|
|
3
|
+
export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, }: UseLogicParams) => {
|
|
4
|
+
isMobile: boolean;
|
|
5
|
+
isOpened: boolean;
|
|
6
|
+
shouldRender: boolean;
|
|
7
|
+
handleAnimationEnd: () => void;
|
|
8
|
+
handleClose: (event: Event) => void;
|
|
9
|
+
setContainerRef: (node: HTMLDivElement | null) => void;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useLogic = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const useClickAwayEffect_1 = require("../../useClickAwayEffect");
|
|
6
|
+
const useEscapeClickEffect_1 = require("../../useEscapeClickEffect");
|
|
7
|
+
const useFocusTrapEffect_1 = require("../../useFocusTrapEffect");
|
|
8
|
+
const usePopoverAnimation_1 = require("../../usePopoverAnimation");
|
|
9
|
+
const useViewportType_1 = require("../../useViewportType");
|
|
10
|
+
const utils_1 = require("../utils");
|
|
11
|
+
const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
|
|
12
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
13
|
+
const [isContainerMounted, setIsContainerMounted] = (0, react_1.useState)(false);
|
|
14
|
+
const setContainerRef = (0, react_1.useCallback)((node) => {
|
|
15
|
+
containerRef.current = node;
|
|
16
|
+
setIsContainerMounted(Boolean(node));
|
|
17
|
+
}, []);
|
|
18
|
+
const isOpened = isOpen ?? Boolean(anchorEl);
|
|
19
|
+
const isControlled = isOpen !== undefined;
|
|
20
|
+
const { isMobile } = (0, useViewportType_1.useViewportType)();
|
|
21
|
+
const { shouldRender, handleAnimationEnd } = (0, usePopoverAnimation_1.usePopoverAnimation)(isOpened);
|
|
22
|
+
const isEffectActive = !isMobile && isOpened && isContainerMounted;
|
|
23
|
+
const anchorNode = (0, react_1.useMemo)(() => (0, utils_1.resolveAnchorNode)(anchorEl), [anchorEl]);
|
|
24
|
+
const excludeNodes = (0, react_1.useMemo)(() => [anchorNode], [anchorNode]);
|
|
25
|
+
const handleClose = (event) => {
|
|
26
|
+
onClose?.(event);
|
|
27
|
+
};
|
|
28
|
+
(0, useClickAwayEffect_1.useClickAwayEffect)({
|
|
29
|
+
ref: containerRef,
|
|
30
|
+
onClickAway: handleClose,
|
|
31
|
+
isActive: isEffectActive && !isControlled,
|
|
32
|
+
preventBubbling: true,
|
|
33
|
+
excludeNodes,
|
|
34
|
+
});
|
|
35
|
+
(0, useEscapeClickEffect_1.useEscapeClickEffect)({
|
|
36
|
+
onEscape: handleClose,
|
|
37
|
+
isActive: isEffectActive,
|
|
38
|
+
preventBubbling: true,
|
|
39
|
+
});
|
|
40
|
+
(0, useFocusTrapEffect_1.useFocusTrapEffect)({
|
|
41
|
+
ref: containerRef,
|
|
42
|
+
isActive: isEffectActive && !disableAutoFocus,
|
|
43
|
+
returnFocusOnDeactivate: true,
|
|
44
|
+
escapeDeactivates: false,
|
|
45
|
+
clickOutsideDeactivates: false,
|
|
46
|
+
allowOutsideClick: true,
|
|
47
|
+
fallbackFocus: () => containerRef.current || document.body,
|
|
48
|
+
});
|
|
49
|
+
return {
|
|
50
|
+
isMobile,
|
|
51
|
+
isOpened,
|
|
52
|
+
shouldRender,
|
|
53
|
+
handleAnimationEnd,
|
|
54
|
+
handleClose,
|
|
55
|
+
setContainerRef,
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
exports.useLogic = useLogic;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './resolveAnchorNode';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./resolveAnchorNode"), exports);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.resolveAnchorNode = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Резолвит anchorEl в DOM-ноду, если это возможно.
|
|
6
|
+
* Для virtual-элементов вернёт null.
|
|
7
|
+
*/
|
|
8
|
+
const resolveAnchorNode = (anchorEl) => {
|
|
9
|
+
const value = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
|
|
10
|
+
return value instanceof Node ? value : null;
|
|
11
|
+
};
|
|
12
|
+
exports.resolveAnchorNode = resolveAnchorNode;
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
import type { PopoverProps
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* Заголовок для отображения в мобильной версии
|
|
6
|
-
*/
|
|
7
|
-
title?: string;
|
|
8
|
-
};
|
|
1
|
+
import type { PopoverProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Причина отказа от поддержки: MUI Popover использует backdrop, который перехватывает первый внешний клик и создает UX-эффект "двойного клика". Используйте компонент `NewPopover`.
|
|
4
|
+
*/
|
|
9
5
|
export declare const Popover: ({ children, onClose, open, title, className, ...restProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,6 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const BottomDrawer_1 = require("../BottomDrawer");
|
|
6
6
|
const useViewportType_1 = require("../useViewportType");
|
|
7
7
|
const styles_1 = require("./styles");
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Причина отказа от поддержки: MUI Popover использует backdrop, который перехватывает первый внешний клик и создает UX-эффект "двойного клика". Используйте компонент `NewPopover`.
|
|
10
|
+
*/
|
|
8
11
|
const Popover = ({ children, onClose, open, title, className, ...restProps }) => {
|
|
9
12
|
const { isMobile } = (0, useViewportType_1.useViewportType)();
|
|
10
13
|
if (isMobile) {
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Popover } from './Popover';
|
|
2
|
+
export type { PopoverProps } from './types';
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
3
|
+
exports.Popover = void 0;
|
|
4
|
+
var Popover_1 = require("./Popover");
|
|
5
|
+
Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { PopoverProps as MuiPopoverProps } from '@mui/material/Popover';
|
|
2
|
+
import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
|
|
3
|
+
export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
|
|
4
|
+
/**
|
|
5
|
+
* Заголовок для отображения в мобильной версии
|
|
6
|
+
*/
|
|
7
|
+
title?: string;
|
|
8
|
+
};
|
|
@@ -20,7 +20,6 @@ export * from './Checkbox';
|
|
|
20
20
|
export * from './CheckboxField';
|
|
21
21
|
export * from './Chevron';
|
|
22
22
|
export * from './ClickAwayListener';
|
|
23
|
-
export * from './ClickAwayListener';
|
|
24
23
|
export { CodeField, type CodeFieldProps } from './CodeField';
|
|
25
24
|
export * from './CollapsableAlert';
|
|
26
25
|
export * from './Collapse';
|
package/node/components/index.js
CHANGED
|
@@ -53,7 +53,6 @@ __exportStar(require("./Checkbox"), exports);
|
|
|
53
53
|
__exportStar(require("./CheckboxField"), exports);
|
|
54
54
|
__exportStar(require("./Chevron"), exports);
|
|
55
55
|
__exportStar(require("./ClickAwayListener"), exports);
|
|
56
|
-
__exportStar(require("./ClickAwayListener"), exports);
|
|
57
56
|
var CodeField_1 = require("./CodeField");
|
|
58
57
|
Object.defineProperty(exports, "CodeField", { enumerable: true, get: function () { return CodeField_1.CodeField; } });
|
|
59
58
|
__exportStar(require("./CollapsableAlert"), exports);
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type RefObject } from 'react';
|
|
2
2
|
import { type CloseEventReason } from '../types/CloseEventReason';
|
|
3
|
+
export type ExcludedNode = Node | RefObject<Node | null> | null | undefined;
|
|
3
4
|
export type UseClickAwayListenerOptions = {
|
|
4
5
|
/**
|
|
5
6
|
* реф на дом ноду, клик вне которой надо отслеживать
|
|
@@ -17,9 +18,13 @@ export type UseClickAwayListenerOptions = {
|
|
|
17
18
|
* флаг необходимости предотвращать всплытие, подойдет когда используется внутри модалки
|
|
18
19
|
*/
|
|
19
20
|
preventBubbling?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Ноды (или рефы), клик по которым не приводит к срабатыванию onClickAway
|
|
23
|
+
*/
|
|
24
|
+
excludeNodes?: ExcludedNode[];
|
|
20
25
|
};
|
|
21
26
|
/**
|
|
22
27
|
* хук позволяющий подписаться на клик вне указанного рефа,
|
|
23
28
|
* подойдет для использования в кастомных попперах
|
|
24
29
|
*/
|
|
25
|
-
export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, }: UseClickAwayListenerOptions) => void;
|
|
30
|
+
export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, excludeNodes, }: UseClickAwayListenerOptions) => void;
|