@activecollab/components 1.0.222 → 1.0.223
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/cjs/components/Menu/Menu.js +9 -0
- package/dist/cjs/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
- package/dist/esm/components/Menu/Menu.js +9 -0
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/index.js +9 -0
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -54,6 +54,7 @@ var Menu = function Menu(_ref) {
|
|
|
54
54
|
childNode = _useState4[0],
|
|
55
55
|
setChildNode = _useState4[1];
|
|
56
56
|
var elementRef = (0, _react.useRef)(null);
|
|
57
|
+
var isOpenAtLeastOnce = (0, _react.useRef)(false);
|
|
57
58
|
(0, _react.useEffect)(function () {
|
|
58
59
|
setOpen(defaultOpen);
|
|
59
60
|
}, [defaultOpen]);
|
|
@@ -82,6 +83,14 @@ var Menu = function Menu(_ref) {
|
|
|
82
83
|
ref: handleRef,
|
|
83
84
|
onClick: handleOpen
|
|
84
85
|
};
|
|
86
|
+
(0, _react.useEffect)(function () {
|
|
87
|
+
if (open) {
|
|
88
|
+
isOpenAtLeastOnce.current = true;
|
|
89
|
+
} else if (!open && isOpenAtLeastOnce.current) {
|
|
90
|
+
var _elementRef$current;
|
|
91
|
+
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
|
|
92
|
+
}
|
|
93
|
+
}, [open]);
|
|
85
94
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, target && /*#__PURE__*/_react.default.cloneElement(target, targetProps), open ? /*#__PURE__*/_react.default.createElement(_Window.Window, {
|
|
86
95
|
onClose: handleClose,
|
|
87
96
|
disableScrollLock: !handleScroll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","useState","setOpen","childNode","setChildNode","elementRef","useRef","useEffect","handleRefRef","useForkRef","ref","undefined","handleRef","handleOpen","useCallback","event","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","React","cloneElement","classnames","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n /** Menu content */\n children: ReactNode;\n /** On menu element click */\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /** Handle scroll bar */\n handleScroll?: boolean;\n /** Disable Focus Lock */\n disableFocusLock?: boolean;\n /** Menu width mode */\n mode?: MenuMode;\n /** Should menu be open when it's mounted */\n open?: boolean;\n /** Callback triggered when modal has been opened */\n onOpen?: () => void;\n /** Callback triggered when modal has been closed */\n onClose?: () => void;\n /** Before close callback */\n onBeforeClose?: () => boolean;\n /** Position Menu */\n position?: Placement;\n /** Target element */\n target?: ElementWithRef<Element>;\n className?: string;\n /** Menu classes */\n menuClassName?: string;\n /** Popper class name*/\n popperClassName?: string;\n /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n backgroundElementClass?: string;\n /** Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element | null>();\n const elementRef = useRef<
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","useState","setOpen","childNode","setChildNode","elementRef","useRef","isOpenAtLeastOnce","useEffect","handleRefRef","useForkRef","ref","undefined","handleRef","handleOpen","useCallback","event","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","current","focus","React","cloneElement","classnames","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n /** Menu content */\n children: ReactNode;\n /** On menu element click */\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /** Handle scroll bar */\n handleScroll?: boolean;\n /** Disable Focus Lock */\n disableFocusLock?: boolean;\n /** Menu width mode */\n mode?: MenuMode;\n /** Should menu be open when it's mounted */\n open?: boolean;\n /** Callback triggered when modal has been opened */\n onOpen?: () => void;\n /** Callback triggered when modal has been closed */\n onClose?: () => void;\n /** Before close callback */\n onBeforeClose?: () => boolean;\n /** Position Menu */\n position?: Placement;\n /** Target element */\n target?: ElementWithRef<Element>;\n className?: string;\n /** Menu classes */\n menuClassName?: string;\n /** Popper class name*/\n popperClassName?: string;\n /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n backgroundElementClass?: string;\n /** Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element | null>();\n const elementRef = useRef<HTMLElement | null>(null);\n const isOpenAtLeastOnce = useRef(false);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleRefRef = useForkRef(\n target ? target.ref : undefined,\n setChildNode\n );\n const handleRef = useForkRef(handleRefRef, elementRef);\n\n const handleOpen = useCallback(\n (\n event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n ) => {\n event?.preventDefault();\n event?.stopPropagation();\n setOpen(true);\n typeof onOpen === \"function\" && onOpen();\n typeof target?.props?.onClick === \"function\" &&\n target.props.onClick(event);\n },\n [onOpen, target?.props]\n );\n\n const handleClose = useCallback(() => {\n if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n return;\n }\n setOpen(false);\n typeof onClose === \"function\" && onClose();\n }, [onClose, onBeforeClose]);\n\n const childProps = {\n forceClose: handleClose,\n };\n\n const targetProps = {\n open,\n ref: handleRef,\n onClick: handleOpen,\n };\n\n useEffect(() => {\n if (open) {\n isOpenAtLeastOnce.current = true;\n } else if (!open && isOpenAtLeastOnce.current) {\n elementRef.current?.focus();\n }\n }, [open]);\n\n return (\n <>\n {target && React.cloneElement(target, targetProps)}\n {open ? (\n <Window\n onClose={handleClose}\n disableScrollLock={!handleScroll}\n disableFocusLock={disableFocusLock}\n style={{\n position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n }}\n >\n <Overlay\n className={backgroundElementClass}\n onClick={handleClose}\n tabIndex={-1}\n disableBackgroundColor\n />\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={position}\n className={popperClassName}\n tabIndex={-1}\n >\n <StyledMenu\n className={classnames(\n \"c-simple-menu__paper\",\n `c-simple-menu__${mode}`,\n menuClassName,\n className\n )}\n $mode={mode}\n onMouseDown={onMenuClick}\n >\n <MenuContextProvider value={{ open, setOpen }}>\n {typeof children === \"function\"\n ? children(childProps)\n : children}\n </MenuContextProvider>\n </StyledMenu>\n </Popper>\n </Window>\n ) : null}\n </>\n );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,EAAE,EACF,SAAS,EACT,UAAU,EAIV,YAAY,EACZ,GAAG,EACJ,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,KAAK;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,EAAE,EACF,SAAS,EACT,UAAU,EAIV,YAAY,EACZ,GAAG,EACJ,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,KAAK;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CAuH1B,CAAC"}
|
|
@@ -36,6 +36,7 @@ export var Menu = function Menu(_ref) {
|
|
|
36
36
|
childNode = _useState2[0],
|
|
37
37
|
setChildNode = _useState2[1];
|
|
38
38
|
var elementRef = useRef(null);
|
|
39
|
+
var isOpenAtLeastOnce = useRef(false);
|
|
39
40
|
useEffect(function () {
|
|
40
41
|
setOpen(defaultOpen);
|
|
41
42
|
}, [defaultOpen]);
|
|
@@ -64,6 +65,14 @@ export var Menu = function Menu(_ref) {
|
|
|
64
65
|
ref: handleRef,
|
|
65
66
|
onClick: handleOpen
|
|
66
67
|
};
|
|
68
|
+
useEffect(function () {
|
|
69
|
+
if (open) {
|
|
70
|
+
isOpenAtLeastOnce.current = true;
|
|
71
|
+
} else if (!open && isOpenAtLeastOnce.current) {
|
|
72
|
+
var _elementRef$current;
|
|
73
|
+
(_elementRef$current = elementRef.current) == null ? void 0 : _elementRef$current.focus();
|
|
74
|
+
}
|
|
75
|
+
}, [open]);
|
|
67
76
|
return /*#__PURE__*/React.createElement(React.Fragment, null, target && /*#__PURE__*/React.cloneElement(target, targetProps), open ? /*#__PURE__*/React.createElement(Window, {
|
|
68
77
|
onClose: handleClose,
|
|
69
78
|
disableScrollLock: !handleScroll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","Popper","useForkRef","Overlay","Window","MenuContextProvider","StyledMenu","Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","cloneElement","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n /** Menu content */\n children: ReactNode;\n /** On menu element click */\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /** Handle scroll bar */\n handleScroll?: boolean;\n /** Disable Focus Lock */\n disableFocusLock?: boolean;\n /** Menu width mode */\n mode?: MenuMode;\n /** Should menu be open when it's mounted */\n open?: boolean;\n /** Callback triggered when modal has been opened */\n onOpen?: () => void;\n /** Callback triggered when modal has been closed */\n onClose?: () => void;\n /** Before close callback */\n onBeforeClose?: () => boolean;\n /** Position Menu */\n position?: Placement;\n /** Target element */\n target?: ElementWithRef<Element>;\n className?: string;\n /** Menu classes */\n menuClassName?: string;\n /** Popper class name*/\n popperClassName?: string;\n /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n backgroundElementClass?: string;\n /** Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element | null>();\n const elementRef = useRef<
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","Popper","useForkRef","Overlay","Window","MenuContextProvider","StyledMenu","Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","isOpenAtLeastOnce","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","current","focus","cloneElement","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n /** Menu content */\n children: ReactNode;\n /** On menu element click */\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /** Handle scroll bar */\n handleScroll?: boolean;\n /** Disable Focus Lock */\n disableFocusLock?: boolean;\n /** Menu width mode */\n mode?: MenuMode;\n /** Should menu be open when it's mounted */\n open?: boolean;\n /** Callback triggered when modal has been opened */\n onOpen?: () => void;\n /** Callback triggered when modal has been closed */\n onClose?: () => void;\n /** Before close callback */\n onBeforeClose?: () => boolean;\n /** Position Menu */\n position?: Placement;\n /** Target element */\n target?: ElementWithRef<Element>;\n className?: string;\n /** Menu classes */\n menuClassName?: string;\n /** Popper class name*/\n popperClassName?: string;\n /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n backgroundElementClass?: string;\n /** Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element | null>();\n const elementRef = useRef<HTMLElement | null>(null);\n const isOpenAtLeastOnce = useRef(false);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleRefRef = useForkRef(\n target ? target.ref : undefined,\n setChildNode\n );\n const handleRef = useForkRef(handleRefRef, elementRef);\n\n const handleOpen = useCallback(\n (\n event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n ) => {\n event?.preventDefault();\n event?.stopPropagation();\n setOpen(true);\n typeof onOpen === \"function\" && onOpen();\n typeof target?.props?.onClick === \"function\" &&\n target.props.onClick(event);\n },\n [onOpen, target?.props]\n );\n\n const handleClose = useCallback(() => {\n if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n return;\n }\n setOpen(false);\n typeof onClose === \"function\" && onClose();\n }, [onClose, onBeforeClose]);\n\n const childProps = {\n forceClose: handleClose,\n };\n\n const targetProps = {\n open,\n ref: handleRef,\n onClick: handleOpen,\n };\n\n useEffect(() => {\n if (open) {\n isOpenAtLeastOnce.current = true;\n } else if (!open && isOpenAtLeastOnce.current) {\n elementRef.current?.focus();\n }\n }, [open]);\n\n return (\n <>\n {target && React.cloneElement(target, targetProps)}\n {open ? (\n <Window\n onClose={handleClose}\n disableScrollLock={!handleScroll}\n disableFocusLock={disableFocusLock}\n style={{\n position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n }}\n >\n <Overlay\n className={backgroundElementClass}\n onClick={handleClose}\n tabIndex={-1}\n disableBackgroundColor\n />\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={position}\n className={popperClassName}\n tabIndex={-1}\n >\n <StyledMenu\n className={classnames(\n \"c-simple-menu__paper\",\n `c-simple-menu__${mode}`,\n menuClassName,\n className\n )}\n $mode={mode}\n onMouseDown={onMenuClick}\n >\n <MenuContextProvider value={{ open, setOpen }}>\n {typeof children === \"function\"\n ? children(childProps)\n : children}\n </MenuContextProvider>\n </StyledMenu>\n </Popper>\n </Window>\n ) : null}\n </>\n );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -753,6 +753,7 @@
|
|
|
753
753
|
childNode = _useState4[0],
|
|
754
754
|
setChildNode = _useState4[1];
|
|
755
755
|
var elementRef = React.useRef(null);
|
|
756
|
+
var isOpenAtLeastOnce = React.useRef(false);
|
|
756
757
|
React.useEffect(function () {
|
|
757
758
|
setOpen(defaultOpen);
|
|
758
759
|
}, [defaultOpen]);
|
|
@@ -781,6 +782,14 @@
|
|
|
781
782
|
ref: handleRef,
|
|
782
783
|
onClick: handleOpen
|
|
783
784
|
};
|
|
785
|
+
React.useEffect(function () {
|
|
786
|
+
if (open) {
|
|
787
|
+
isOpenAtLeastOnce.current = true;
|
|
788
|
+
} else if (!open && isOpenAtLeastOnce.current) {
|
|
789
|
+
var _elementRef$current;
|
|
790
|
+
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
|
|
791
|
+
}
|
|
792
|
+
}, [open]);
|
|
784
793
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, target && /*#__PURE__*/React__default["default"].cloneElement(target, targetProps), open ? /*#__PURE__*/React__default["default"].createElement(Window, {
|
|
785
794
|
onClose: handleClose,
|
|
786
795
|
disableScrollLock: !handleScroll,
|