@activecollab/components 1.0.339 → 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/Checkbox/Styles.js +1 -1
- package/dist/cjs/components/Checkbox/Styles.js.map +1 -1
- 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/cjs/components/Select/OptionGroup/OptionGroup.js +4 -1
- package/dist/cjs/components/Select/OptionGroup/OptionGroup.js.map +1 -1
- package/dist/esm/components/Checkbox/Styles.d.ts.map +1 -1
- package/dist/esm/components/Checkbox/Styles.js +1 -1
- package/dist/esm/components/Checkbox/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/esm/components/Select/OptionGroup/OptionGroup.d.ts.map +1 -1
- package/dist/esm/components/Select/OptionGroup/OptionGroup.js +4 -1
- package/dist/esm/components/Select/OptionGroup/OptionGroup.js.map +1 -1
- package/dist/index.js +8 -3
- 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
|
@@ -30,7 +30,7 @@ var StyledCheckbox = _styledComponents.default.div.withConfig({
|
|
|
30
30
|
}, StyledInput, StyledLabel, StyledInput, StyledLabel, StyledInput, StyledLabel, function (props) {
|
|
31
31
|
return props.isIndeterminate && (0, _styledComponents.css)(["stroke:transparent;"]);
|
|
32
32
|
}, function (props) {
|
|
33
|
-
return props.hover && (0, _styledComponents.css)(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput, StyledLabel);
|
|
33
|
+
return props.hover && !props.isIndeterminate && (0, _styledComponents.css)(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput, StyledLabel);
|
|
34
34
|
}, StyledInput, StyledLabel, function (props) {
|
|
35
35
|
return !props.isIndeterminate && (0, _styledComponents.css)(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
|
|
36
36
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledInput","styled","input","displayName","StyledLabel","label","StyledCheckbox","div","props","isIndeterminate","css","hover"],"sources":["../../../../src/components/Checkbox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport type { CheckBoxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n border: 0px;\n clip: rect(0px, 0px, 0px, 0px);\n cursor: pointer;\n height: 1px;\n margin: -1px;\n opacity: 0;\n overflow: hidden;\n padding: 0px;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<Partial<CheckBoxProps>>`\n height: 16px;\n width: 16px;\n position: relative;\n transition-duration: 0.2s;\n border-radius: 2px;\n\n path {\n transition-duration: 0.2s;\n stroke: transparent;\n stroke-dashoffset: 12;\n stroke-dasharray: 12;\n }\n svg {\n cursor: pointer;\n border-radius: 2px;\n fill: transparent;\n }\n\n rect {\n transition-duration: 0.2s;\n\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--color-theme-500);\n `}\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n\n ${StyledInput}:disabled ~ ${StyledLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${StyledInput}:focus ~ ${StyledLabel} {\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n // prettier-ignore\n &:not(.c-checkbox__controlled) ${StyledInput}:hover:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n stroke-width: 3px;\n }\n }\n\n ${(props) =>\n props.hover &&\n css`\n ${StyledInput}:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n `}\n\n ${StyledInput}:checked ~ ${StyledLabel} {\n path {\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--page-paper-main);\n stroke-dashoffset: 24;\n `}\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 19px;\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"mappings":";;;;;;;AAAA;AAAgD;AAAA;AAGzC,IAAMA,WAAW,GAAGC,yBAAM,CAACC,KAAK;EAAA;EAAA;AAAA,yKAYtC;AAAC;AACFF,WAAW,CAACG,WAAW,GAAG,aAAa;AAEhC,IAAMC,WAAW,GAAGH,yBAAM,CAACI,KAAK;EAAA;EAAA;AAAA,QAAE;AAAC;AAC1CD,WAAW,CAACD,WAAW,GAAG,aAAa;AAEhC,IAAMG,cAAc,GAAGL,yBAAM,CAACM,GAAG;EAAA;EAAA;AAAA,0qBAsBlC,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,eAAe,QACtBC,qBAAG,qCAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,eAAe,QACrBC,qBAAG,0BAEF;AAAA,GAGHV,WAAW,EAAeI,WAAW,EAKrCJ,WAAW,EAAYI,WAAW,EAQHJ,WAAW,EAA0BI,WAAW,EAQ3E,UAACI,KAAK;EAAA,OACVA,KAAK,CAACC,eAAe,QACrBC,qBAAG,0BAEF;AAAA,GAKD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,KAAK,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledInput","styled","input","displayName","StyledLabel","label","StyledCheckbox","div","props","isIndeterminate","css","hover"],"sources":["../../../../src/components/Checkbox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport type { CheckBoxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n border: 0px;\n clip: rect(0px, 0px, 0px, 0px);\n cursor: pointer;\n height: 1px;\n margin: -1px;\n opacity: 0;\n overflow: hidden;\n padding: 0px;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<Partial<CheckBoxProps>>`\n height: 16px;\n width: 16px;\n position: relative;\n transition-duration: 0.2s;\n border-radius: 2px;\n\n path {\n transition-duration: 0.2s;\n stroke: transparent;\n stroke-dashoffset: 12;\n stroke-dasharray: 12;\n }\n svg {\n cursor: pointer;\n border-radius: 2px;\n fill: transparent;\n }\n\n rect {\n transition-duration: 0.2s;\n\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--color-theme-500);\n `}\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n\n ${StyledInput}:disabled ~ ${StyledLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${StyledInput}:focus ~ ${StyledLabel} {\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n // prettier-ignore\n &:not(.c-checkbox__controlled) ${StyledInput}:hover:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n stroke-width: 3px;\n }\n }\n\n ${(props) =>\n props.hover &&\n !props.isIndeterminate &&\n css`\n ${StyledInput}:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n `}\n\n ${StyledInput}:checked ~ ${StyledLabel} {\n path {\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--page-paper-main);\n stroke-dashoffset: 24;\n `}\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 19px;\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"mappings":";;;;;;;AAAA;AAAgD;AAAA;AAGzC,IAAMA,WAAW,GAAGC,yBAAM,CAACC,KAAK;EAAA;EAAA;AAAA,yKAYtC;AAAC;AACFF,WAAW,CAACG,WAAW,GAAG,aAAa;AAEhC,IAAMC,WAAW,GAAGH,yBAAM,CAACI,KAAK;EAAA;EAAA;AAAA,QAAE;AAAC;AAC1CD,WAAW,CAACD,WAAW,GAAG,aAAa;AAEhC,IAAMG,cAAc,GAAGL,yBAAM,CAACM,GAAG;EAAA;EAAA;AAAA,0qBAsBlC,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,eAAe,QACtBC,qBAAG,qCAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,eAAe,QACrBC,qBAAG,0BAEF;AAAA,GAGHV,WAAW,EAAeI,WAAW,EAKrCJ,WAAW,EAAYI,WAAW,EAQHJ,WAAW,EAA0BI,WAAW,EAQ3E,UAACI,KAAK;EAAA,OACVA,KAAK,CAACC,eAAe,QACrBC,qBAAG,0BAEF;AAAA,GAKD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,KAAK,IACX,CAACH,KAAK,CAACC,eAAe,QACtBC,qBAAG,qJACCV,WAAW,EAAoBI,WAAW,CAU7C;AAAA,GAEDJ,WAAW,EAAcI,WAAW,EAEhC,UAACI,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,eAAe,QACtBC,qBAAG,0DAGF;AAAA,GAMD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,eAAe,QACrBC,qBAAG,0BAEF;AAAA,EAGR;AAAC;AACFJ,cAAc,CAACH,WAAW,GAAG,gBAAgB"}
|
|
@@ -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"}
|
|
@@ -48,10 +48,13 @@ var OptionGroup = function OptionGroup(_ref) {
|
|
|
48
48
|
});
|
|
49
49
|
}, [options, checked]);
|
|
50
50
|
var handleHover = (0, _react.useCallback)(function () {
|
|
51
|
+
if (options.some(function (option) {
|
|
52
|
+
return checked.includes(option.id);
|
|
53
|
+
})) return;
|
|
51
54
|
if (setHover) {
|
|
52
55
|
setHover(type === "single" ? undefined : id);
|
|
53
56
|
}
|
|
54
|
-
}, [setHover, type, id]);
|
|
57
|
+
}, [setHover, type, id, checked, options]);
|
|
55
58
|
var allOptionValues = (0, _react.useMemo)(function () {
|
|
56
59
|
return options.map(function (option) {
|
|
57
60
|
return option.id;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionGroup.js","names":["OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","useMemo","v","toLowerCase","includes","trim","useEffect","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","useCallback","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","classNames","
|
|
1
|
+
{"version":3,"file":"OptionGroup.js","names":["OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","useMemo","v","toLowerCase","includes","trim","useEffect","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","useCallback","some","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","classNames","index","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC } from \"react\";\nimport classNames from \"classnames\";\nimport { IOptionItemProps } from \"../Option/Option\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport {\n StyledOptionGroup,\n StyledOptionGroupHeader,\n StyledOptionGroupOption,\n StyledOptionGroupLi,\n StyledOptionGroupHeaderName,\n} from \"./Styles\";\nimport { List } from \"../../List\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n /** Options items list */\n options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n /** Select type: single or multiple */\n type?: \"single\" | \"multiple\";\n /** Value of hovered element */\n hover?: number | string | null;\n /** Filter for labels */\n filter?: string;\n /** Checked values */\n checked: (string | number)[];\n /** onChange callback */\n onChange?: (e: (string | number)[]) => void;\n /** Set value of hovered element */\n setHover?: (e: number | string | undefined) => void;\n /** Render function */\n renderOptions?: (item: IOptionItemProps, index: number) => void;\n /** Value that represent class names */\n optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n id,\n name,\n options,\n type,\n hover,\n filter,\n checked,\n onChange,\n setHover,\n renderOptions,\n optionGroupClassName,\n}) => {\n const list = useMemo(\n () =>\n filter\n ? options.filter((v) =>\n v.name.toLowerCase().includes(filter.trim().toLowerCase())\n )\n : options,\n [filter, options]\n );\n\n useEffect(() => {\n if (hover === id && type !== \"single\") {\n document.getElementById(`${id}`)?.focus();\n }\n }, [hover, type, id]);\n\n const isAllOptionsChecked = useMemo(\n () => options.every((option) => checked.includes(option.id)),\n [options, checked]\n );\n\n const handleHover = useCallback(() => {\n if (options.some((option) => checked.includes(option.id))) return;\n if (setHover) {\n setHover(type === \"single\" ? undefined : id);\n }\n }, [setHover, type, id, checked, options]);\n\n const allOptionValues = useMemo(\n () => options.map((option) => option.id),\n [options]\n );\n\n const handleClick = useCallback(\n (e) => {\n e.stopPropagation();\n if (onChange) {\n if (isAllOptionsChecked) {\n onChange(\n checked.filter((i) => allOptionValues.includes(i) === false)\n );\n } else {\n const values = [...checked, ...allOptionValues];\n const unique = values.filter((item, pos) => {\n return values.indexOf(item) === pos;\n });\n onChange(unique);\n }\n }\n },\n [allOptionValues, checked, isAllOptionsChecked, onChange]\n );\n\n return (\n <StyledOptionGroupLi\n key={id}\n className={classNames(\"c-option-group\", optionGroupClassName)}\n >\n <StyledOptionGroup key={id}>\n <StyledOptionGroupOption\n onMouseEnter={handleHover}\n hover={hover === id && type === \"multiple\"}\n >\n <StyledOptionGroupHeader>\n <StyledOptionGroupHeaderName weight=\"bold\">\n {name}\n </StyledOptionGroupHeaderName>\n {type === \"multiple\" && (\n <Checkbox\n id={`${id}`}\n checked={isAllOptionsChecked}\n isIndeterminate={\n options.some((option) => checked.includes(option.id)) &&\n !isAllOptionsChecked\n }\n onChange={handleClick}\n type=\"checkbox\"\n />\n )}\n </StyledOptionGroupHeader>\n </StyledOptionGroupOption>\n <List>\n {list.map((item: IOptionItemProps, index) => {\n return typeof renderOptions === \"function\"\n ? renderOptions(item, index)\n : item.name;\n })}\n </List>\n </StyledOptionGroup>\n </StyledOptionGroupLi>\n );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,eAAO,MAAM,WAAW,sEAYvB,CAAC;AAGF,eAAO,MAAM,WAAW,sEAAiB,CAAC;AAG1C,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,eAAO,MAAM,WAAW,sEAYvB,CAAC;AAGF,eAAO,MAAM,WAAW,sEAAiB,CAAC;AAG1C,eAAO,MAAM,cAAc,wFAqG1B,CAAC"}
|
|
@@ -19,7 +19,7 @@ export var StyledCheckbox = styled.div.withConfig({
|
|
|
19
19
|
}, StyledInput, StyledLabel, StyledInput, StyledLabel, StyledInput, StyledLabel, function (props) {
|
|
20
20
|
return props.isIndeterminate && css(["stroke:transparent;"]);
|
|
21
21
|
}, function (props) {
|
|
22
|
-
return props.hover && css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput, StyledLabel);
|
|
22
|
+
return props.hover && !props.isIndeterminate && css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput, StyledLabel);
|
|
23
23
|
}, StyledInput, StyledLabel, function (props) {
|
|
24
24
|
return !props.isIndeterminate && css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
|
|
25
25
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","StyledInput","input","displayName","StyledLabel","label","StyledCheckbox","div","props","isIndeterminate","hover"],"sources":["../../../../src/components/Checkbox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport type { CheckBoxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n border: 0px;\n clip: rect(0px, 0px, 0px, 0px);\n cursor: pointer;\n height: 1px;\n margin: -1px;\n opacity: 0;\n overflow: hidden;\n padding: 0px;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<Partial<CheckBoxProps>>`\n height: 16px;\n width: 16px;\n position: relative;\n transition-duration: 0.2s;\n border-radius: 2px;\n\n path {\n transition-duration: 0.2s;\n stroke: transparent;\n stroke-dashoffset: 12;\n stroke-dasharray: 12;\n }\n svg {\n cursor: pointer;\n border-radius: 2px;\n fill: transparent;\n }\n\n rect {\n transition-duration: 0.2s;\n\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--color-theme-500);\n `}\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n\n ${StyledInput}:disabled ~ ${StyledLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${StyledInput}:focus ~ ${StyledLabel} {\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n // prettier-ignore\n &:not(.c-checkbox__controlled) ${StyledInput}:hover:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n stroke-width: 3px;\n }\n }\n\n ${(props) =>\n props.hover &&\n css`\n ${StyledInput}:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n `}\n\n ${StyledInput}:checked ~ ${StyledLabel} {\n path {\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--page-paper-main);\n stroke-dashoffset: 24;\n `}\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 19px;\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,IAAMC,WAAW,GAAGF,MAAM,CAACG,KAAK;EAAA;EAAA;AAAA,yKAYtC;AACDD,WAAW,CAACE,WAAW,GAAG,aAAa;AAEvC,OAAO,IAAMC,WAAW,GAAGL,MAAM,CAACM,KAAK;EAAA;EAAA;AAAA,QAAE;AACzCD,WAAW,CAACD,WAAW,GAAG,aAAa;AAEvC,OAAO,IAAMG,cAAc,GAAGP,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,0qBAsBlC,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,eAAe,IACtBT,GAAG,oCAEF;AAAA,GAED,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACC,eAAe,IACrBT,GAAG,yBAEF;AAAA,GAGHC,WAAW,EAAeG,WAAW,EAKrCH,WAAW,EAAYG,WAAW,EAQHH,WAAW,EAA0BG,WAAW,EAQ3E,UAACI,KAAK;EAAA,OACVA,KAAK,CAACC,eAAe,IACrBT,GAAG,yBAEF;AAAA,GAKD,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACE,KAAK,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","StyledInput","input","displayName","StyledLabel","label","StyledCheckbox","div","props","isIndeterminate","hover"],"sources":["../../../../src/components/Checkbox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport type { CheckBoxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n border: 0px;\n clip: rect(0px, 0px, 0px, 0px);\n cursor: pointer;\n height: 1px;\n margin: -1px;\n opacity: 0;\n overflow: hidden;\n padding: 0px;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<Partial<CheckBoxProps>>`\n height: 16px;\n width: 16px;\n position: relative;\n transition-duration: 0.2s;\n border-radius: 2px;\n\n path {\n transition-duration: 0.2s;\n stroke: transparent;\n stroke-dashoffset: 12;\n stroke-dasharray: 12;\n }\n svg {\n cursor: pointer;\n border-radius: 2px;\n fill: transparent;\n }\n\n rect {\n transition-duration: 0.2s;\n\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--color-theme-500);\n `}\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n\n ${StyledInput}:disabled ~ ${StyledLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${StyledInput}:focus ~ ${StyledLabel} {\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n // prettier-ignore\n &:not(.c-checkbox__controlled) ${StyledInput}:hover:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n stroke-width: 3px;\n }\n }\n\n ${(props) =>\n props.hover &&\n !props.isIndeterminate &&\n css`\n ${StyledInput}:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n `}\n\n ${StyledInput}:checked ~ ${StyledLabel} {\n path {\n ${(props) =>\n !props.isIndeterminate &&\n css`\n stroke: var(--page-paper-main);\n stroke-dashoffset: 24;\n `}\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 19px;\n\n ${(props) =>\n props.isIndeterminate &&\n css`\n stroke: transparent;\n `}\n }\n }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,IAAMC,WAAW,GAAGF,MAAM,CAACG,KAAK;EAAA;EAAA;AAAA,yKAYtC;AACDD,WAAW,CAACE,WAAW,GAAG,aAAa;AAEvC,OAAO,IAAMC,WAAW,GAAGL,MAAM,CAACM,KAAK;EAAA;EAAA;AAAA,QAAE;AACzCD,WAAW,CAACD,WAAW,GAAG,aAAa;AAEvC,OAAO,IAAMG,cAAc,GAAGP,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,0qBAsBlC,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,eAAe,IACtBT,GAAG,oCAEF;AAAA,GAED,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACC,eAAe,IACrBT,GAAG,yBAEF;AAAA,GAGHC,WAAW,EAAeG,WAAW,EAKrCH,WAAW,EAAYG,WAAW,EAQHH,WAAW,EAA0BG,WAAW,EAQ3E,UAACI,KAAK;EAAA,OACVA,KAAK,CAACC,eAAe,IACrBT,GAAG,yBAEF;AAAA,GAKD,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACE,KAAK,IACX,CAACF,KAAK,CAACC,eAAe,IACtBT,GAAG,oJACCC,WAAW,EAAoBG,WAAW,CAU7C;AAAA,GAEDH,WAAW,EAAcG,WAAW,EAEhC,UAACI,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,eAAe,IACtBT,GAAG,yDAGF;AAAA,GAMD,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACC,eAAe,IACrBT,GAAG,yBAEF;AAAA,EAGR;AACDM,cAAc,CAACH,WAAW,GAAG,gBAAgB"}
|
|
@@ -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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmC,EAAE,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAWpD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,UAAU,2BAA2B;IACnC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B,iBAAiB,GAAG,2BAA2B,
|
|
1
|
+
{"version":3,"file":"OptionGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmC,EAAE,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAWpD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,UAAU,2BAA2B;IACnC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B,iBAAiB,GAAG,2BAA2B,CAyGhD,CAAC"}
|
|
@@ -32,10 +32,13 @@ export var OptionGroup = function OptionGroup(_ref) {
|
|
|
32
32
|
});
|
|
33
33
|
}, [options, checked]);
|
|
34
34
|
var handleHover = useCallback(function () {
|
|
35
|
+
if (options.some(function (option) {
|
|
36
|
+
return checked.includes(option.id);
|
|
37
|
+
})) return;
|
|
35
38
|
if (setHover) {
|
|
36
39
|
setHover(type === "single" ? undefined : id);
|
|
37
40
|
}
|
|
38
|
-
}, [setHover, type, id]);
|
|
41
|
+
}, [setHover, type, id, checked, options]);
|
|
39
42
|
var allOptionValues = useMemo(function () {
|
|
40
43
|
return options.map(function (option) {
|
|
41
44
|
return option.id;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionGroup.js","names":["React","useCallback","useEffect","useMemo","classNames","Checkbox","StyledOptionGroup","StyledOptionGroupHeader","StyledOptionGroupOption","StyledOptionGroupLi","StyledOptionGroupHeaderName","List","OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","v","toLowerCase","includes","trim","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","
|
|
1
|
+
{"version":3,"file":"OptionGroup.js","names":["React","useCallback","useEffect","useMemo","classNames","Checkbox","StyledOptionGroup","StyledOptionGroupHeader","StyledOptionGroupOption","StyledOptionGroupLi","StyledOptionGroupHeaderName","List","OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","v","toLowerCase","includes","trim","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","some","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","index","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC } from \"react\";\nimport classNames from \"classnames\";\nimport { IOptionItemProps } from \"../Option/Option\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport {\n StyledOptionGroup,\n StyledOptionGroupHeader,\n StyledOptionGroupOption,\n StyledOptionGroupLi,\n StyledOptionGroupHeaderName,\n} from \"./Styles\";\nimport { List } from \"../../List\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n /** Options items list */\n options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n /** Select type: single or multiple */\n type?: \"single\" | \"multiple\";\n /** Value of hovered element */\n hover?: number | string | null;\n /** Filter for labels */\n filter?: string;\n /** Checked values */\n checked: (string | number)[];\n /** onChange callback */\n onChange?: (e: (string | number)[]) => void;\n /** Set value of hovered element */\n setHover?: (e: number | string | undefined) => void;\n /** Render function */\n renderOptions?: (item: IOptionItemProps, index: number) => void;\n /** Value that represent class names */\n optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n id,\n name,\n options,\n type,\n hover,\n filter,\n checked,\n onChange,\n setHover,\n renderOptions,\n optionGroupClassName,\n}) => {\n const list = useMemo(\n () =>\n filter\n ? options.filter((v) =>\n v.name.toLowerCase().includes(filter.trim().toLowerCase())\n )\n : options,\n [filter, options]\n );\n\n useEffect(() => {\n if (hover === id && type !== \"single\") {\n document.getElementById(`${id}`)?.focus();\n }\n }, [hover, type, id]);\n\n const isAllOptionsChecked = useMemo(\n () => options.every((option) => checked.includes(option.id)),\n [options, checked]\n );\n\n const handleHover = useCallback(() => {\n if (options.some((option) => checked.includes(option.id))) return;\n if (setHover) {\n setHover(type === \"single\" ? undefined : id);\n }\n }, [setHover, type, id, checked, options]);\n\n const allOptionValues = useMemo(\n () => options.map((option) => option.id),\n [options]\n );\n\n const handleClick = useCallback(\n (e) => {\n e.stopPropagation();\n if (onChange) {\n if (isAllOptionsChecked) {\n onChange(\n checked.filter((i) => allOptionValues.includes(i) === false)\n );\n } else {\n const values = [...checked, ...allOptionValues];\n const unique = values.filter((item, pos) => {\n return values.indexOf(item) === pos;\n });\n onChange(unique);\n }\n }\n },\n [allOptionValues, checked, isAllOptionsChecked, onChange]\n );\n\n return (\n <StyledOptionGroupLi\n key={id}\n className={classNames(\"c-option-group\", optionGroupClassName)}\n >\n <StyledOptionGroup key={id}>\n <StyledOptionGroupOption\n onMouseEnter={handleHover}\n hover={hover === id && type === \"multiple\"}\n >\n <StyledOptionGroupHeader>\n <StyledOptionGroupHeaderName weight=\"bold\">\n {name}\n </StyledOptionGroupHeaderName>\n {type === \"multiple\" && (\n <Checkbox\n id={`${id}`}\n checked={isAllOptionsChecked}\n isIndeterminate={\n options.some((option) => checked.includes(option.id)) &&\n !isAllOptionsChecked\n }\n onChange={handleClick}\n type=\"checkbox\"\n />\n )}\n </StyledOptionGroupHeader>\n </StyledOptionGroupOption>\n <List>\n {list.map((item: IOptionItemProps, index) => {\n return typeof renderOptions === \"function\"\n ? renderOptions(item, index)\n : item.name;\n })}\n </List>\n </StyledOptionGroup>\n </StyledOptionGroupLi>\n );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":"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"}
|
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;"]);
|
|
@@ -10184,7 +10186,7 @@
|
|
|
10184
10186
|
}, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, function (props) {
|
|
10185
10187
|
return props.isIndeterminate && styled.css(["stroke:transparent;"]);
|
|
10186
10188
|
}, function (props) {
|
|
10187
|
-
return props.hover && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$3, StyledLabel);
|
|
10189
|
+
return props.hover && !props.isIndeterminate && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$3, StyledLabel);
|
|
10188
10190
|
}, StyledInput$3, StyledLabel, function (props) {
|
|
10189
10191
|
return !props.isIndeterminate && styled.css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
|
|
10190
10192
|
}, function (props) {
|
|
@@ -10380,10 +10382,13 @@
|
|
|
10380
10382
|
});
|
|
10381
10383
|
}, [options, checked]);
|
|
10382
10384
|
var handleHover = React.useCallback(function () {
|
|
10385
|
+
if (options.some(function (option) {
|
|
10386
|
+
return checked.includes(option.id);
|
|
10387
|
+
})) return;
|
|
10383
10388
|
if (setHover) {
|
|
10384
10389
|
setHover(type === "single" ? undefined : id);
|
|
10385
10390
|
}
|
|
10386
|
-
}, [setHover, type, id]);
|
|
10391
|
+
}, [setHover, type, id, checked, options]);
|
|
10387
10392
|
var allOptionValues = React.useMemo(function () {
|
|
10388
10393
|
return options.map(function (option) {
|
|
10389
10394
|
return option.id;
|