@activecollab/components 1.0.340 → 1.0.341
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.map +1 -1
- package/dist/cjs/components/Menu/Styles.js +3 -1
- package/dist/cjs/components/Menu/Styles.js.map +1 -1
- package/dist/esm/components/Menu/Menu.d.ts +1 -1
- package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/Styles.d.ts.map +1 -1
- package/dist/esm/components/Menu/Styles.js +3 -1
- package/dist/esm/components/Menu/Styles.js.map +1 -1
- package/dist/index.js +3 -1
- 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
|
@@ -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","onPopperOpen","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 /** Popper on open */\n onPopperOpen?: (...args) => void;\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 onPopperOpen,\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 isOpenAtLeastOnce.current = false;\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 afterWrite={onPopperOpen}\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":";;;;;;;AAAA;AAWA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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","onPopperOpen","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\n// source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\" | (string & {});\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 /** Popper on open */\n onPopperOpen?: (...args) => void;\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 onPopperOpen,\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 isOpenAtLeastOnce.current = false;\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 afterWrite={onPopperOpen}\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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"}
|
|
@@ -14,13 +14,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
14
14
|
var StyledMenu = (0, _styledComponents.default)(_Bubble.Bubble).withConfig({
|
|
15
15
|
displayName: "Styles__StyledMenu",
|
|
16
16
|
componentId: "sc-8fhkp-0"
|
|
17
|
-
})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
|
|
17
|
+
})(["", " ", " ", " width:", ";color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
|
|
18
18
|
"backgroundColor": "var(--page-paper-main)",
|
|
19
19
|
"borderColor": "var(--border-primary)",
|
|
20
20
|
"marginTop": "0.25rem",
|
|
21
21
|
"marginBottom": "0.25rem",
|
|
22
22
|
"overflow": "auto"
|
|
23
23
|
}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
24
|
+
return props.$mode;
|
|
25
|
+
}, function (props) {
|
|
24
26
|
return props.$mode === "normal" && (0, _styledComponents.css)(["width:260px;"]);
|
|
25
27
|
}, function (props) {
|
|
26
28
|
return props.$mode === "wider" && (0, _styledComponents.css)(["width:350px;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledMenu","styled","Bubble","FontStyle","BoxSizingStyle","props","$mode","css","displayName","StyledMenuFooter","div","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n ${tw`tw-bg-page-paper-main tw-border-border-primary tw-my-1 tw-overflow-auto`}\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n color: var(--color-theme-700);\n a:focus,\n a:active {\n outline: none;\n }\n\n ${(props) =>\n props.$mode === \"normal\" &&\n css`\n width: 260px;\n `}\n\n ${(props) =>\n props.$mode === \"wider\" &&\n css`\n width: 350px;\n `}\n\n ${(props) =>\n props.$mode === \"tiny\" &&\n css`\n width: 180px;\n `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n ${tw`tw-flex tw-px-2 tw-py-1`}\n\n display: flex;\n border-top: 1px solid var(--border-primary);\n height: 32px;\n align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n border-bottom: 1px solid var(--border-primary);\n height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAyC;AAAA;AAElC,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,cAAM,CAAC;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledMenu","styled","Bubble","FontStyle","BoxSizingStyle","props","$mode","css","displayName","StyledMenuFooter","div","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n ${tw`tw-bg-page-paper-main tw-border-border-primary tw-my-1 tw-overflow-auto`}\n\n ${FontStyle}\n ${BoxSizingStyle}\n \n width: ${(props) => props.$mode};\n\n color: var(--color-theme-700);\n a:focus,\n a:active {\n outline: none;\n }\n\n ${(props) =>\n props.$mode === \"normal\" &&\n css`\n width: 260px;\n `}\n\n ${(props) =>\n props.$mode === \"wider\" &&\n css`\n width: 350px;\n `}\n\n ${(props) =>\n props.$mode === \"tiny\" &&\n css`\n width: 180px;\n `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n ${tw`tw-flex tw-px-2 tw-py-1`}\n\n display: flex;\n border-top: 1px solid var(--border-primary);\n height: 32px;\n align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n border-bottom: 1px solid var(--border-primary);\n height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAyC;AAAA;AAElC,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,cAAM,CAAC;EAAA;EAAA;AAAA,6GAClC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwE,CAAC,EAE3EC,oBAAS,EACTC,8BAAc,EAEP,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,KAAK;AAAA,GAQ7B,UAACD,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,QACxBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,MAAM,QACtBC,qBAAG,mBAEF;AAAA,EACJ;AAAC;AACFP,UAAU,CAACQ,WAAW,GAAG,YAAY;AAE9B,IAAMC,gBAAgB,GAAGR,yBAAM,CAACS,GAAG;EAAA;EAAA;AAAA,qGACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwB,CAAC,CAM9B;AAAC;AACFD,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAE1C,IAAMG,gBAAgB,GAAGV,yBAAM,CAACS,GAAG;EAAA;EAAA;AAAA,wEACpC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2D,CAAC,CAIjE;AAAC;AACFC,gBAAgB,CAACH,WAAW,GAAG,kBAAkB"}
|
|
@@ -3,7 +3,7 @@ import { Placement } from "@popperjs/core";
|
|
|
3
3
|
interface ElementWithRef<T> extends ReactElement {
|
|
4
4
|
ref?: Ref<T>;
|
|
5
5
|
}
|
|
6
|
-
export declare type MenuMode = "normal" | "wider" | "tiny";
|
|
6
|
+
export declare type MenuMode = "normal" | "wider" | "tiny" | (string & {});
|
|
7
7
|
export interface IMenu {
|
|
8
8
|
/** Menu content */
|
|
9
9
|
children: ReactNode;
|
|
@@ -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;
|
|
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;AAID,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEnE,MAAM,WAAW,KAAK;IACpB,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACvD,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;IAC9B,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6FAA6F;IAC7F,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6CAA6C;IAC7C,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,qBAAqB;IACrB,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,OAAA,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CA0H1B,CAAC"}
|
|
@@ -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","onPopperOpen","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 /** Popper on open */\n onPopperOpen?: (...args) => void;\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 onPopperOpen,\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 isOpenAtLeastOnce.current = false;\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 afterWrite={onPopperOpen}\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":"AAAA,OAAOA,KAAK,IACVC,MAAM,EAINC,QAAQ,EACRC,WAAW,EACXC,SAAS,QAGJ,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,mBAAmB,QAAQ,WAAW;AAC/C,SAASC,UAAU,QAAQ,UAAU;
|
|
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","onPopperOpen","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\n// source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\" | (string & {});\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 /** Popper on open */\n onPopperOpen?: (...args) => void;\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 onPopperOpen,\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 isOpenAtLeastOnce.current = false;\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 afterWrite={onPopperOpen}\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":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,UAAU;WAA2B,MAAM;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,UAAU;WAA2B,MAAM;SA+BvD,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAO5B,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAK5B,CAAC"}
|
|
@@ -5,13 +5,15 @@ import { FontStyle } from "../FontStyle";
|
|
|
5
5
|
export var StyledMenu = styled(Bubble).withConfig({
|
|
6
6
|
displayName: "Styles__StyledMenu",
|
|
7
7
|
componentId: "sc-8fhkp-0"
|
|
8
|
-
})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
|
|
8
|
+
})(["", " ", " ", " width:", ";color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
|
|
9
9
|
"backgroundColor": "var(--page-paper-main)",
|
|
10
10
|
"borderColor": "var(--border-primary)",
|
|
11
11
|
"marginTop": "0.25rem",
|
|
12
12
|
"marginBottom": "0.25rem",
|
|
13
13
|
"overflow": "auto"
|
|
14
14
|
}, FontStyle, BoxSizingStyle, function (props) {
|
|
15
|
+
return props.$mode;
|
|
16
|
+
}, function (props) {
|
|
15
17
|
return props.$mode === "normal" && css(["width:260px;"]);
|
|
16
18
|
}, function (props) {
|
|
17
19
|
return props.$mode === "wider" && css(["width:350px;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Bubble","FontStyle","StyledMenu","props","$mode","displayName","StyledMenuFooter","div","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n ${tw`tw-bg-page-paper-main tw-border-border-primary tw-my-1 tw-overflow-auto`}\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n color: var(--color-theme-700);\n a:focus,\n a:active {\n outline: none;\n }\n\n ${(props) =>\n props.$mode === \"normal\" &&\n css`\n width: 260px;\n `}\n\n ${(props) =>\n props.$mode === \"wider\" &&\n css`\n width: 350px;\n `}\n\n ${(props) =>\n props.$mode === \"tiny\" &&\n css`\n width: 180px;\n `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n ${tw`tw-flex tw-px-2 tw-py-1`}\n\n display: flex;\n border-top: 1px solid var(--border-primary);\n height: 32px;\n align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n border-bottom: 1px solid var(--border-primary);\n height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,UAAU,GAAGL,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Bubble","FontStyle","StyledMenu","props","$mode","displayName","StyledMenuFooter","div","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n ${tw`tw-bg-page-paper-main tw-border-border-primary tw-my-1 tw-overflow-auto`}\n\n ${FontStyle}\n ${BoxSizingStyle}\n \n width: ${(props) => props.$mode};\n\n color: var(--color-theme-700);\n a:focus,\n a:active {\n outline: none;\n }\n\n ${(props) =>\n props.$mode === \"normal\" &&\n css`\n width: 260px;\n `}\n\n ${(props) =>\n props.$mode === \"wider\" &&\n css`\n width: 350px;\n `}\n\n ${(props) =>\n props.$mode === \"tiny\" &&\n css`\n width: 180px;\n `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n ${tw`tw-flex tw-px-2 tw-py-1`}\n\n display: flex;\n border-top: 1px solid var(--border-primary);\n height: 32px;\n align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n border-bottom: 1px solid var(--border-primary);\n height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,UAAU,GAAGL,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,6GAClC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwE,CAAC,EAE3EC,SAAS,EACTF,cAAc,EAEP,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACC,KAAK;AAAA,GAQ7B,UAACD,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBN,GAAG,kBAEF;AAAA,EACJ;AACDI,UAAU,CAACG,WAAW,GAAG,YAAY;AAErC,OAAO,IAAMC,gBAAgB,GAAGT,MAAM,CAACU,GAAG;EAAA;EAAA;AAAA,qGACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwB,CAAC,CAM9B;AACDD,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,OAAO,IAAMG,gBAAgB,GAAGX,MAAM,CAACU,GAAG;EAAA;EAAA;AAAA,wEACpC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2D,CAAC,CAIjE;AACDC,gBAAgB,CAACH,WAAW,GAAG,kBAAkB"}
|
package/dist/index.js
CHANGED
|
@@ -729,13 +729,15 @@
|
|
|
729
729
|
var StyledMenu$2 = styled__default["default"](Bubble).withConfig({
|
|
730
730
|
displayName: "Styles__StyledMenu",
|
|
731
731
|
componentId: "sc-8fhkp-0"
|
|
732
|
-
})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
|
|
732
|
+
})(["", " ", " ", " width:", ";color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
|
|
733
733
|
"backgroundColor": "var(--page-paper-main)",
|
|
734
734
|
"borderColor": "var(--border-primary)",
|
|
735
735
|
"marginTop": "0.25rem",
|
|
736
736
|
"marginBottom": "0.25rem",
|
|
737
737
|
"overflow": "auto"
|
|
738
738
|
}, FontStyle, BoxSizingStyle, function (props) {
|
|
739
|
+
return props.$mode;
|
|
740
|
+
}, function (props) {
|
|
739
741
|
return props.$mode === "normal" && styled.css(["width:260px;"]);
|
|
740
742
|
}, function (props) {
|
|
741
743
|
return props.$mode === "wider" && styled.css(["width:350px;"]);
|