@activecollab/components 1.0.66 → 1.0.69
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/ComboBox/ComboBox.js +15 -3
- package/dist/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/cjs/components/GlobalStyle.js +1 -1
- package/dist/cjs/components/GlobalStyle.js.map +1 -1
- package/dist/cjs/components/Menu/Menu.js +5 -2
- package/dist/cjs/components/Menu/Menu.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.js +5 -2
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/Overlay/Overlay.js.map +1 -1
- package/dist/cjs/components/Sheet/Sheet.js +5 -2
- package/dist/cjs/components/Sheet/Sheet.js.map +1 -1
- package/dist/cjs/components/Window/Window.js +13 -2
- package/dist/cjs/components/Window/Window.js.map +1 -1
- package/dist/esm/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/esm/components/ComboBox/ComboBox.js +15 -3
- package/dist/esm/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/esm/components/GlobalStyle.js +1 -1
- package/dist/esm/components/GlobalStyle.js.map +1 -1
- package/dist/esm/components/Menu/Menu.d.ts +1 -0
- package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
- package/dist/esm/components/Menu/Menu.js +5 -2
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Modal/Modal.d.ts +1 -0
- package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
- package/dist/esm/components/Modal/Modal.js +5 -2
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Overlay/Overlay.d.ts +2 -2
- package/dist/esm/components/Overlay/Overlay.d.ts.map +1 -1
- package/dist/esm/components/Overlay/Overlay.js.map +1 -1
- package/dist/esm/components/Sheet/Sheet.d.ts +1 -0
- package/dist/esm/components/Sheet/Sheet.d.ts.map +1 -1
- package/dist/esm/components/Sheet/Sheet.js +5 -2
- package/dist/esm/components/Sheet/Sheet.js.map +1 -1
- package/dist/esm/components/Window/Window.d.ts +3 -3
- package/dist/esm/components/Window/Window.d.ts.map +1 -1
- package/dist/esm/components/Window/Window.js +13 -2
- package/dist/esm/components/Window/Window.js.map +1 -1
- package/dist/index.js +44 -12
- 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,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxWrapper","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","current","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBox,\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n /** Set selected items */\n selected?: string | number;\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (e: string | number) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n\n const [open, setOpen] = useState(false);\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n },\n [open, selectedName]\n );\n\n const formRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n if (selectedValue) {\n onChange?.(selectedValue);\n setOpen(false);\n }\n },\n [onChange]\n );\n\n const onClose = useCallback(() => {\n setTimeout(() => {\n setOpen(false);\n }, 200);\n setValue(selectedName);\n }, [selectedName]);\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback((option, props) => {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n }, []);\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n onChange?.(\"\");\n setOpen(false);\n },\n [onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledComboBox\n className=\"c-combo-box\"\n $open={open}\n $loading={loading}\n $size={size}\n >\n <StyledComboBoxWrapper\n onClick={onOpen}\n onFocus={onOpen}\n onBlur={onClose}\n ref={formRef}\n $loading={loading}\n >\n <StyledComboBoxInput\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n />\n {!disabled ? (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size={size}\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n ) : null}\n </StyledComboBoxWrapper>\n {!disabled ? (\n <Popper\n anchorEl={formRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={formRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type=\"single\"\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </StyledComboBox>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxWrapper","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","clickOutsideCallback","event","current","contains","document","addEventListener","removeEventListener","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBox,\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n /** Set selected items */\n selected?: string | number;\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (e: string | number) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n\n const [open, setOpen] = useState(false);\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n },\n [open, selectedName]\n );\n\n const formRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n if (selectedValue) {\n onChange?.(selectedValue);\n setOpen(false);\n }\n },\n [onChange]\n );\n\n const onClose = useCallback(() => {\n setTimeout(() => {\n setOpen(false);\n }, 200);\n setValue(selectedName);\n }, [selectedName]);\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback((option, props) => {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n }, []);\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n onChange?.(\"\");\n setOpen(false);\n },\n [onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n const clickOutsideCallback = useCallback(\n (event) => {\n if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {\n onClose();\n }\n },\n [onClose]\n );\n\n useEffect(() => {\n document.addEventListener(`click`, clickOutsideCallback);\n return () => {\n document.removeEventListener(`click`, clickOutsideCallback);\n };\n }, [clickOutsideCallback]);\n\n return (\n <StyledComboBox\n className=\"c-combo-box\"\n $open={open}\n $loading={loading}\n $size={size}\n ref={comboBoxRef}\n >\n <StyledComboBoxWrapper\n onClick={onOpen}\n onFocus={onOpen}\n ref={formRef}\n $loading={loading}\n >\n <StyledComboBoxInput\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n />\n {!disabled ? (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size=\"small\"\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n ) : null}\n </StyledComboBoxWrapper>\n {!disabled ? (\n <Popper\n anchorEl={formRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={formRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type=\"single\"\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </StyledComboBox>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { createGlobalStyle } from "styled-components";
|
|
2
|
-
export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#
|
|
2
|
+
export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}"]);
|
|
3
3
|
//# sourceMappingURL=GlobalStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["createGlobalStyle","GlobalStyle"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,mBAAlC;AAEA,OAAO,IAAMC,WAAW,GAAGD,iBAAH,mjNAAjB","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n :root {\n --color-primary: #5d2bff;\n --color-secondary: #5d2bff;\n\n --color-theme-100: #ffffff;\n --color-theme-200: #f6f6f9;\n --color-theme-300: #ebebee;\n --color-theme-400: #d7d7da;\n --color-theme-500: #b9b9bd;\n --color-theme-600: #89898e;\n --color-theme-700: #6d6d73;\n --color-theme-800: #5b5b61;\n --color-theme-900: #303037;\n\n --color-primary-200: rgba(93, 43, 255, 0.05);\n --color-primary-300: rgba(93, 43, 255, 0.1);\n --color-primary-400: rgba(93, 43, 255, 0.25);\n --color-primary-500: rgba(93, 43, 255, 0.5);\n --color-primary-600: rgba(93, 43, 255, 0.75);\n --color-primary-700: #5d2bff;\n --color-primary-800: #4a21cd;\n --color-primary-900: #32178b;\n\n --color-secondary-200: rgba(93, 43, 255, 0.05);\n --color-secondary-300: rgba(93, 43, 255, 0.1);\n --color-secondary-400: rgba(93, 43, 255, 0.25);\n --color-secondary-500: rgba(93, 43, 255, 0.5);\n --color-secondary-600: rgba(93, 43, 255, 0.75);\n --color-secondary-700: #5d2bff;\n --color-secondary-800: #4a21cd;\n --color-secondary-900: #32178b;\n\n --color-primary-opaque-300: #efeaff;\n --color-primary-opaque-400: #d6caff;\n\n --color-secondary-opaque-300: #efeaff;\n --color-secondary-opaque-400: #d6caff;\n\n --color-sucess-green: #64cd93;\n\n --body-bg-main: rgb(244, 245, 247);\n --body-bg-main-transparent: rgba(244, 245, 247, 0);\n --page-paper-main: #ffffff;\n --border-primary: #d7d7da;\n\n --note-bg: #fff9f1;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n 0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n 0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n 0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n --page-paper-main-shadow: rgba(\n 255,\n 255,\n 255,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(244, 245, 247, 0.6);\n\n --highlight-dark: rgba(0, 0, 0, 0.03);\n\n --input-background-color: #ffffff;\n\n --red-alert: rgb(237, 97, 97);\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --ac-br-4: 4px;\n\n --ac-br-6: 6px;\n\n --ac-br-8: 8px;\n\n --ac-br-rounded: 999px;\n }\n\n .cupcake {\n --color-primary: #29bcdd;\n --color-secondary: #fe6fa7;\n\n --color-primary-200: rgba(41, 188, 221, 0.07);\n --color-primary-300: rgba(41, 188, 221, 0.12);\n --color-primary-400: rgba(41, 188, 221, 0.26);\n --color-primary-500: rgba(41, 188, 221, 0.52);\n --color-primary-600: rgba(41, 188, 221, 0.75);\n --color-primary-700: #29bcdd;\n --color-primary-800: #219fbb;\n --color-primary-900: #1a768b;\n\n --color-secondary-200: rgba(254, 111, 167, 0.07);\n --color-secondary-300: rgba(254, 111, 167, 0.13);\n --color-secondary-400: rgba(254, 111, 167, 0.27);\n --color-secondary-500: rgba(254, 111, 167, 0.52);\n --color-secondary-600: rgba(254, 111, 167, 0.75);\n --color-secondary-700: #fe6fa7;\n --color-secondary-800: #dd6091;\n --color-secondary-900: #ab496f;\n\n --color-primary-opaque-300: #e5f7fb;\n --color-primary-opaque-400: #c8eef6;\n\n --color-secondary-opaque-300: #ffecf4;\n --color-secondary-opaque-400: #ffd8e7;\n }\n\n .classic {\n --color-primary: #4182f2;\n --color-secondary: #4182f2;\n\n --color-primary-200: rgba(65, 130, 242, 0.07);\n --color-primary-300: rgba(65, 130, 242, 0.13);\n --color-primary-400: rgba(65, 130, 242, 0.26);\n --color-primary-500: rgba(65, 130, 242, 0.52);\n --color-primary-600: rgba(65, 130, 242, 0.75);\n --color-primary-700: #4182f2;\n --color-primary-800: #356bc8;\n --color-primary-900: #244a8a;\n\n --color-secondary-200: rgba(65, 130, 242, 0.07);\n --color-secondary-300: rgba(65, 130, 242, 0.13);\n --color-secondary-400: rgba(65, 130, 242, 0.26);\n --color-secondary-500: rgba(65, 130, 242, 0.52);\n --color-secondary-600: rgba(65, 130, 242, 0.75);\n --color-secondary-700: #4182f2;\n --color-secondary-800: #356bc8;\n --color-secondary-900: #244a8a;\n\n --color-primary-opaque-300: #e6effd;\n --color-primary-opaque-400: #cedffc;\n\n --color-secondary-opaque-300: #e6effd;\n --color-secondary-opaque-400: #cedffc;\n }\n\n .neon {\n --color-primary: #67ffc8;\n --color-secondary: #67ffc8;\n\n --color-theme-100: #000000;\n --color-theme-200: #31333e;\n --color-theme-300: #2b2d37;\n --color-theme-400: #1f2024;\n --color-theme-500: #
|
|
1
|
+
{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["createGlobalStyle","GlobalStyle"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,mBAAlC;AAEA,OAAO,IAAMC,WAAW,GAAGD,iBAAH,mjNAAjB","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n :root {\n --color-primary: #5d2bff;\n --color-secondary: #5d2bff;\n\n --color-theme-100: #ffffff;\n --color-theme-200: #f6f6f9;\n --color-theme-300: #ebebee;\n --color-theme-400: #d7d7da;\n --color-theme-500: #b9b9bd;\n --color-theme-600: #89898e;\n --color-theme-700: #6d6d73;\n --color-theme-800: #5b5b61;\n --color-theme-900: #303037;\n\n --color-primary-200: rgba(93, 43, 255, 0.05);\n --color-primary-300: rgba(93, 43, 255, 0.1);\n --color-primary-400: rgba(93, 43, 255, 0.25);\n --color-primary-500: rgba(93, 43, 255, 0.5);\n --color-primary-600: rgba(93, 43, 255, 0.75);\n --color-primary-700: #5d2bff;\n --color-primary-800: #4a21cd;\n --color-primary-900: #32178b;\n\n --color-secondary-200: rgba(93, 43, 255, 0.05);\n --color-secondary-300: rgba(93, 43, 255, 0.1);\n --color-secondary-400: rgba(93, 43, 255, 0.25);\n --color-secondary-500: rgba(93, 43, 255, 0.5);\n --color-secondary-600: rgba(93, 43, 255, 0.75);\n --color-secondary-700: #5d2bff;\n --color-secondary-800: #4a21cd;\n --color-secondary-900: #32178b;\n\n --color-primary-opaque-300: #efeaff;\n --color-primary-opaque-400: #d6caff;\n\n --color-secondary-opaque-300: #efeaff;\n --color-secondary-opaque-400: #d6caff;\n\n --color-sucess-green: #64cd93;\n\n --body-bg-main: rgb(244, 245, 247);\n --body-bg-main-transparent: rgba(244, 245, 247, 0);\n --page-paper-main: #ffffff;\n --border-primary: #d7d7da;\n\n --note-bg: #fff9f1;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n 0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n 0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n 0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n --page-paper-main-shadow: rgba(\n 255,\n 255,\n 255,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(244, 245, 247, 0.6);\n\n --highlight-dark: rgba(0, 0, 0, 0.03);\n\n --input-background-color: #ffffff;\n\n --red-alert: rgb(237, 97, 97);\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --ac-br-4: 4px;\n\n --ac-br-6: 6px;\n\n --ac-br-8: 8px;\n\n --ac-br-rounded: 999px;\n }\n\n .cupcake {\n --color-primary: #29bcdd;\n --color-secondary: #fe6fa7;\n\n --color-primary-200: rgba(41, 188, 221, 0.07);\n --color-primary-300: rgba(41, 188, 221, 0.12);\n --color-primary-400: rgba(41, 188, 221, 0.26);\n --color-primary-500: rgba(41, 188, 221, 0.52);\n --color-primary-600: rgba(41, 188, 221, 0.75);\n --color-primary-700: #29bcdd;\n --color-primary-800: #219fbb;\n --color-primary-900: #1a768b;\n\n --color-secondary-200: rgba(254, 111, 167, 0.07);\n --color-secondary-300: rgba(254, 111, 167, 0.13);\n --color-secondary-400: rgba(254, 111, 167, 0.27);\n --color-secondary-500: rgba(254, 111, 167, 0.52);\n --color-secondary-600: rgba(254, 111, 167, 0.75);\n --color-secondary-700: #fe6fa7;\n --color-secondary-800: #dd6091;\n --color-secondary-900: #ab496f;\n\n --color-primary-opaque-300: #e5f7fb;\n --color-primary-opaque-400: #c8eef6;\n\n --color-secondary-opaque-300: #ffecf4;\n --color-secondary-opaque-400: #ffd8e7;\n }\n\n .classic {\n --color-primary: #4182f2;\n --color-secondary: #4182f2;\n\n --color-primary-200: rgba(65, 130, 242, 0.07);\n --color-primary-300: rgba(65, 130, 242, 0.13);\n --color-primary-400: rgba(65, 130, 242, 0.26);\n --color-primary-500: rgba(65, 130, 242, 0.52);\n --color-primary-600: rgba(65, 130, 242, 0.75);\n --color-primary-700: #4182f2;\n --color-primary-800: #356bc8;\n --color-primary-900: #244a8a;\n\n --color-secondary-200: rgba(65, 130, 242, 0.07);\n --color-secondary-300: rgba(65, 130, 242, 0.13);\n --color-secondary-400: rgba(65, 130, 242, 0.26);\n --color-secondary-500: rgba(65, 130, 242, 0.52);\n --color-secondary-600: rgba(65, 130, 242, 0.75);\n --color-secondary-700: #4182f2;\n --color-secondary-800: #356bc8;\n --color-secondary-900: #244a8a;\n\n --color-primary-opaque-300: #e6effd;\n --color-primary-opaque-400: #cedffc;\n\n --color-secondary-opaque-300: #e6effd;\n --color-secondary-opaque-400: #cedffc;\n }\n\n .neon {\n --color-primary: #67ffc8;\n --color-secondary: #67ffc8;\n\n --color-theme-100: #000000;\n --color-theme-200: #31333e;\n --color-theme-300: #2b2d37;\n --color-theme-400: #1f2024;\n --color-theme-500: #6D6D73;\n --color-theme-600: #89898e;\n --color-theme-700: #b0b0b5;\n --color-theme-800: #dfdfe5;\n --color-theme-900: #ffffff;\n\n --color-primary-200: rgba(103, 255, 200, 0.05);\n --color-primary-300: rgba(103, 255, 200, 0.1);\n --color-primary-400: rgba(103, 255, 200, 0.25);\n --color-primary-500: rgba(103, 255, 200, 0.5);\n --color-primary-600: rgba(103, 255, 200, 0.75);\n --color-primary-700: #67ffc8;\n --color-primary-800: #a5ffdf;\n --color-primary-900: #d0fdec;\n\n --color-secondary-200: rgba(103, 255, 200, 0.05);\n --color-secondary-300: rgba(103, 255, 200, 0.1);\n --color-secondary-400: rgba(103, 255, 200, 0.25);\n --color-secondary-500: rgba(103, 255, 200, 0.5);\n --color-secondary-600: rgba(103, 255, 200, 0.75);\n --color-secondary-700: #67ffc8;\n --color-secondary-800: #a5ffdf;\n --color-secondary-900: #d0fdec;\n\n --color-primary-opaque-300: #3b4e51;\n --color-primary-opaque-400: #436b64;\n\n --color-secondary-opaque-300: #3b4e51;\n --color-secondary-opaque-400: #436b64;\n\n --body-bg-main: rgb(44, 46, 56);\n --body-bg-main-transparent: rgba(44, 46, 56, 0);\n --page-paper-main: #373a44;\n --border-primary: #1f2024;\n\n --note-bg: #464545;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(\n 55,\n 58,\n 68,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(44, 46, 56, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #2c2e38;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n }\n\n .ac-shadow,\n .ac-shadow--raised {\n &--lg {\n box-shadow: var(--shadow-primary);\n }\n &--sm {\n box-shadow: var(--shadow-tertiary);\n }\n }\n\n .ac-shadow--raised {\n &--lg {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-primary-hover);\n }\n }\n &--sm {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-tertiary-hover);\n }\n }\n }\n\n .ac-shadow-optimized--sm {\n position: relative;\n box-shadow: var(--shadow-tertiary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-tertiary);\n opacity: 0;\n border-radius: var(--ac-br-6);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-shadow-optimized--lg {\n position: relative;\n box-shadow: var(--shadow-primary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-primary);\n opacity: 0;\n border-radius: var(--ac-br-8);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-border-radius {\n &-4 {\n border-radius: var(--ac-br-4);\n }\n\n &-6 {\n border-radius: var(--ac-br-6);\n }\n\n &-8 {\n border-radius: var(--ac-br-8);\n }\n\n &-rounded {\n border-radius: var(--ac-br-rounded);\n }\n }\n\n`;\n"],"file":"GlobalStyle.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,EAAE,EACF,SAAS,EACT,UAAU,EAIV,YAAY,EACZ,GAAG,EACJ,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,KAAK;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,0BAA0B,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,EAAE,EACF,SAAS,EACT,UAAU,EAIV,YAAY,EACZ,GAAG,EACJ,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,KAAK;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CA2G1B,CAAC"}
|
|
@@ -28,7 +28,9 @@ export var Menu = function Menu(_ref) {
|
|
|
28
28
|
popperClassName = _ref.popperClassName,
|
|
29
29
|
backgroundElementClass = _ref.backgroundElementClass,
|
|
30
30
|
_ref$windowAbsolutely = _ref.windowAbsolutelyPositioned,
|
|
31
|
-
windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely
|
|
31
|
+
windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely,
|
|
32
|
+
_ref$preventClickEven = _ref.preventClickEventBubbling,
|
|
33
|
+
preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven;
|
|
32
34
|
|
|
33
35
|
var _useState = useState(defaultOpen),
|
|
34
36
|
open = _useState[0],
|
|
@@ -71,7 +73,8 @@ export var Menu = function Menu(_ref) {
|
|
|
71
73
|
disableFocusLock: disableFocusLock,
|
|
72
74
|
style: {
|
|
73
75
|
position: windowAbsolutelyPositioned ? "absolute" : "fixed"
|
|
74
|
-
}
|
|
76
|
+
},
|
|
77
|
+
preventClickEventBubbling: preventClickEventBubbling
|
|
75
78
|
}, /*#__PURE__*/React.createElement(Overlay, {
|
|
76
79
|
className: backgroundElementClass,
|
|
77
80
|
onClick: handleClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Menu/Menu.tsx"],"names":["React","useRef","useState","useCallback","useEffect","classnames","Popper","useForkRef","Overlay","Window","MenuContextProvider","StyledMenu","Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","handleClose","childProps","forceClose","targetProps","onClick","cloneElement","displayName"],"mappings":"AAAA,OAAOA,KAAP,IACEC,MADF,EAKEC,QALF,EAMEC,WANF,EAOEC,SAPF,QAUO,OAVP;AAWA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,SAASC,OAAT,QAAwB,YAAxB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,SAASC,mBAAT,QAAoC,WAApC;AACA,SAASC,UAAT,QAA2B,UAA3B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Menu/Menu.tsx"],"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","preventClickEventBubbling","setOpen","childNode","setChildNode","elementRef","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","handleClose","childProps","forceClose","targetProps","onClick","cloneElement","displayName"],"mappings":"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","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 /** Prevents click event from bubbling to parent elements */\n preventClickEventBubbling?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n preventClickEventBubbling = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element | null>();\n const elementRef = useRef<Element | null>(null);\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 (event: Pick<MouseEvent<Element>, \"preventDefault\">) => {\n event && event.preventDefault();\n setOpen(true);\n typeof onOpen === \"function\" && onOpen();\n },\n [onOpen]\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 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 preventClickEventBubbling={preventClickEventBubbling}\n >\n <Overlay\n className={backgroundElementClass}\n onClick={handleClose}\n tabIndex={-1}\n disableBackgroundColor\n />\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={position}\n className={popperClassName}\n tabIndex={-1}\n >\n <StyledMenu\n className={classnames(\n \"c-simple-menu__paper\",\n `c-simple-menu__${mode}`,\n menuClassName,\n className\n )}\n $mode={mode}\n onMouseDown={onMenuClick}\n >\n <MenuContextProvider value={{ open, setOpen }}>\n {typeof children === \"function\"\n ? children(childProps)\n : children}\n </MenuContextProvider>\n </StyledMenu>\n </Popper>\n </Window>\n ) : null}\n </>\n );\n};\n\nMenu.displayName = \"Menu\";\n"],"file":"Menu.js"}
|
|
@@ -7,6 +7,7 @@ interface IModal {
|
|
|
7
7
|
disableBackgroundColor?: boolean;
|
|
8
8
|
onClose?: () => void;
|
|
9
9
|
children: ReactElement;
|
|
10
|
+
preventClickEventBubbling?: boolean;
|
|
10
11
|
}
|
|
11
12
|
export declare const Modal: React.ForwardRefExoticComponent<IModal & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
12
13
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAMf,UAAU,MAAM;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAMf,UAAU,MAAM;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;IACvB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAQD,eAAO,MAAM,KAAK,sHAkGjB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
|
|
3
|
+
var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "preventClickEventBubbling", "open", "onClose"];
|
|
4
4
|
import React, { forwardRef, useRef, cloneElement, useMemo, useCallback, useState, useEffect } from "react";
|
|
5
5
|
import { Window } from "../Window";
|
|
6
6
|
import useForkRef from "../../utils/useForkRef";
|
|
@@ -21,6 +21,8 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
21
21
|
disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
|
|
22
22
|
_ref$disableBackgroun2 = _ref.disableBackgroundColor,
|
|
23
23
|
disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
|
|
24
|
+
_ref$preventClickEven = _ref.preventClickEventBubbling,
|
|
25
|
+
preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
|
|
24
26
|
_ref$open = _ref.open,
|
|
25
27
|
defaultOpen = _ref$open === void 0 ? false : _ref$open,
|
|
26
28
|
onClose = _ref.onClose,
|
|
@@ -84,7 +86,8 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
84
86
|
ref: handleRef,
|
|
85
87
|
onClose: handleClose,
|
|
86
88
|
disableFocusLock: disableFocusLock,
|
|
87
|
-
disableScrollLock: disableScrollLock
|
|
89
|
+
disableScrollLock: disableScrollLock,
|
|
90
|
+
preventClickEventBubbling: preventClickEventBubbling
|
|
88
91
|
}), open ? /*#__PURE__*/React.createElement(Overlay, {
|
|
89
92
|
onClick: handleBackgroundClick,
|
|
90
93
|
disableBackgroundColor: disableBackgroundColor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","Overlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","open","defaultOpen","onClose","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IACEC,UADF,EAGEC,MAHF,EAIEC,YAJF,EAKEC,OALF,EAMEC,WANF,EAQEC,QARF,EASEC,SATF,QAWO,OAXP;AAYA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,SAASC,OAAT,QAAwB,YAAxB;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","Overlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","preventClickEventBubbling","open","defaultOpen","onClose","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n HTMLAttributes,\n useRef,\n cloneElement,\n useMemo,\n useCallback,\n ReactElement,\n useState,\n useEffect,\n MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\ninterface IModal {\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n open?: boolean;\n disableBackgroundClick?: boolean;\n disableBackgroundColor?: boolean;\n onClose?: () => void;\n children: ReactElement;\n preventClickEventBubbling?: boolean;\n}\n\nconst getHasTransition = (children): boolean => {\n return children.props\n ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n : false;\n};\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n IModal & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundClick = false,\n disableBackgroundColor = false,\n preventClickEventBubbling = false,\n open: defaultOpen = false,\n onClose,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n\n const hasTransition = useMemo(() => {\n return getHasTransition(children);\n }, [children]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n if (!hasTransition) {\n typeof onClose === \"function\" && onClose();\n }\n }, [hasTransition, onClose]);\n\n const handleBackgroundClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (!disableBackgroundClick) {\n event.preventDefault();\n handleClose();\n }\n },\n [disableBackgroundClick, handleClose]\n );\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const childProps = useMemo(() => {\n let props = {};\n\n // It's a Transition like component\n if (hasTransition && children) {\n props = {\n onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n onExited: createChainedFunction(\n handleExited,\n children.props.onExited\n ),\n in: open,\n };\n }\n\n return props;\n }, [children, handleEnter, handleExited, hasTransition, open]);\n\n if (!open && (!hasTransition || exited)) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n preventClickEventBubbling={preventClickEventBubbling}\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n {cloneElement(children, childProps)}\n </Window>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n"],"file":"Modal.js"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { FC } from "react";
|
|
2
|
-
export interface IOverlay
|
|
2
|
+
export interface IOverlay {
|
|
3
3
|
disableBackgroundColor?: boolean;
|
|
4
4
|
}
|
|
5
|
-
export declare const Overlay: FC<IOverlay
|
|
5
|
+
export declare const Overlay: FC<IOverlay & Omit<React.ComponentPropsWithoutRef<"div">, keyof IOverlay>>;
|
|
6
6
|
//# sourceMappingURL=Overlay.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,WAAW,QAAQ;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CACtB,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,QAAQ,CAAC,CASvE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":["React","classnames","StyledOverlay","Overlay","className","disableBackgroundColor","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,MAA0B,OAA1B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,UAA9B;AAMA,OAAO,IAAMC,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":["React","classnames","StyledOverlay","Overlay","className","disableBackgroundColor","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,MAA0B,OAA1B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,UAA9B;AAMA,OAAO,IAAMC,OAEZ,GAAG,SAFSA,OAET,OAA4D;AAAA,MAAzDC,SAAyD,QAAzDA,SAAyD;AAAA,mCAA9CC,sBAA8C;AAAA,MAA9CA,sBAA8C,sCAArB,KAAqB;AAAA,MAAXC,IAAW;;AAC9D,sBACE,oBAAC,aAAD;AACE,IAAA,SAAS,EAAEL,UAAU,CAAC,WAAD,EAAcG,SAAd,CADvB;AAEE,IAAA,uBAAuB,EAAEC;AAF3B,KAGMC,IAHN,EADF;AAOD,CAVM;AAYPH,OAAO,CAACI,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { FC } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledOverlay } from \"./Styles\";\n\nexport interface IOverlay {\n disableBackgroundColor?: boolean;\n}\n\nexport const Overlay: FC<\n IOverlay & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IOverlay>\n> = ({ className, disableBackgroundColor = false, ...rest }) => {\n return (\n <StyledOverlay\n className={classnames(\"c-overlay\", className)}\n $disableBackgroundColor={disableBackgroundColor}\n {...rest}\n />\n );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"file":"Overlay.js"}
|
|
@@ -12,6 +12,7 @@ interface ISheet {
|
|
|
12
12
|
bodyStyle?: CSSProperties;
|
|
13
13
|
bodyClassName?: string;
|
|
14
14
|
disableBackgroundClick?: boolean;
|
|
15
|
+
preventClickEventBubbling?: boolean;
|
|
15
16
|
}
|
|
16
17
|
export declare const Sheet: React.ForwardRefExoticComponent<ISheet & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
17
18
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAef,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAef,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,KAAK,sHAsIjB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
|
|
3
|
+
var _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick", "preventClickEventBubbling"];
|
|
4
4
|
import React, { useRef, useCallback, useEffect, forwardRef, useState } from "react";
|
|
5
5
|
import { Transition } from "react-transition-group";
|
|
6
6
|
import { Window } from "../Window";
|
|
@@ -31,6 +31,8 @@ export var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
31
31
|
bodyClassName = _ref.bodyClassName,
|
|
32
32
|
_ref$disableBackgroun2 = _ref.disableBackgroundClick,
|
|
33
33
|
disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
|
|
34
|
+
_ref$preventClickEven = _ref.preventClickEventBubbling,
|
|
35
|
+
preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
|
|
34
36
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
35
37
|
|
|
36
38
|
var _useState = useState(defaultOpen),
|
|
@@ -71,7 +73,8 @@ export var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
71
73
|
ref: handleRef,
|
|
72
74
|
onClose: handleClose,
|
|
73
75
|
disableFocusLock: disableFocusLock,
|
|
74
|
-
disableScrollLock: disableScrollLock
|
|
76
|
+
disableScrollLock: disableScrollLock,
|
|
77
|
+
preventClickEventBubbling: preventClickEventBubbling
|
|
75
78
|
}), open ? /*#__PURE__*/React.createElement(Overlay, {
|
|
76
79
|
onClick: handleBackgroundClick,
|
|
77
80
|
disableBackgroundColor: disableBackgroundColor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":["React","useRef","useCallback","useEffect","forwardRef","useState","Transition","Window","classnames","useForkRef","StyledAnimatedSpan","StyledCssTransition","StyledSheetIcons","StyledSheetWrapper","StyledSheetWrapperPaper","Overlay","Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","innerRef","handleRef","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IACEC,MADF,EAEEC,WAFF,EAGEC,SAHF,EAIEC,UAJF,EAMEC,QANF,QAUO,OAVP;AAYA,SAASC,UAAT,QAA2B,wBAA3B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,SACEC,kBADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,kBAJF,EAKEC,uBALF,QAMO,UANP;AAOA,SAASC,OAAT,QAAwB,YAAxB;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":["React","useRef","useCallback","useEffect","forwardRef","useState","Transition","Window","classnames","useForkRef","StyledAnimatedSpan","StyledCssTransition","StyledSheetIcons","StyledSheetWrapper","StyledSheetWrapperPaper","Overlay","Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","preventClickEventBubbling","rest","setOpen","exited","setExited","innerRef","handleRef","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":"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","sourcesContent":["import React, {\n useRef,\n useCallback,\n useEffect,\n forwardRef,\n HTMLAttributes,\n useState,\n CSSProperties,\n ReactElement,\n MouseEvent,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport {\n StyledAnimatedSpan,\n StyledCssTransition,\n StyledSheetIcons,\n StyledSheetWrapper,\n StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\n\ninterface ISheet {\n onClose?: () => void;\n controls?: JSX.Element[];\n open?: boolean;\n animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n position?: \"center\" | \"left\" | \"right\";\n mode?: \"normal\" | \"stretch\";\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableBackgroundColor?: boolean;\n bodyStyle?: CSSProperties;\n bodyClassName?: string;\n disableBackgroundClick?: boolean;\n preventClickEventBubbling?: boolean;\n}\n\nexport const Sheet = forwardRef<\n HTMLDivElement,\n ISheet & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n onClose,\n controls = [],\n open: defaultOpen = false,\n animation = \"top\",\n position = \"center\",\n mode = \"normal\",\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundColor = false,\n bodyStyle,\n bodyClassName,\n disableBackgroundClick = false,\n preventClickEventBubbling = false,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n\n const handleRef = useForkRef(innerRef, ref);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleBackgroundClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (!disableBackgroundClick) {\n event.preventDefault();\n handleClose();\n }\n },\n [disableBackgroundClick, handleClose]\n );\n\n if (!open && exited) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n preventClickEventBubbling={preventClickEventBubbling}\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n <StyledSheetWrapper\n className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n style={bodyStyle}\n $position={position}\n $mode={mode}\n >\n {controls.length ? (\n <StyledSheetIcons>\n {controls.map((item, index) => {\n const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n const control = index + 1;\n const durationOut =\n controls.length > maxDurationOut\n ? maxDurationOut\n : maxDurationOut - control;\n const durationIn = control >= maxDurationIn ? 1 : control;\n return (\n <Transition\n appear\n in={open}\n timeout={maxDurationIn * 100}\n key={`c-sheet-control-${index}`}\n >\n {(state): ReactElement => (\n <StyledAnimatedSpan\n $state={state}\n $mode={mode}\n $maxDurationIn={maxDurationIn / 10}\n $maxDurationOut={maxDurationOut / 10}\n $durationOut={durationOut / 10}\n $durationIn={durationIn / 10}\n >\n {item}\n </StyledAnimatedSpan>\n )}\n </Transition>\n );\n })}\n </StyledSheetIcons>\n ) : null}\n <StyledCssTransition\n appear\n in={open}\n timeout={400}\n classNames={\"c-sheet__animation\"}\n $direction={animation}\n onEnter={handleEnter}\n onExited={handleExited}\n >\n <StyledSheetWrapperPaper className=\"c-sheet__wrapper__paper\">\n {children}\n </StyledSheetWrapperPaper>\n </StyledCssTransition>\n </StyledSheetWrapper>\n </Window>\n );\n }\n);\n\nSheet.displayName = \"Sheet\";\n"],"file":"Sheet.js"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
interface IWindow {
|
|
2
|
+
export interface IWindow {
|
|
3
3
|
onClose?: () => void;
|
|
4
4
|
disableFocusLock?: boolean;
|
|
5
5
|
disableScrollLock?: boolean;
|
|
6
|
+
preventClickEventBubbling?: boolean;
|
|
6
7
|
}
|
|
7
|
-
export declare const Window: React.ForwardRefExoticComponent<IWindow & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
-
export {};
|
|
8
|
+
export declare const Window: React.ForwardRefExoticComponent<IWindow & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, keyof IWindow> & React.RefAttributes<HTMLDivElement>>;
|
|
9
9
|
//# sourceMappingURL=Window.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../../src/components/Window/Window.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../../src/components/Window/Window.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAID,eAAO,MAAM,MAAM,+OAmFlB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock"];
|
|
3
|
+
var _excluded = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
|
|
4
4
|
import React, { useCallback, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
import classnames from "classnames";
|
|
6
6
|
import FocusLock from "react-focus-lock";
|
|
@@ -21,6 +21,9 @@ export var Window = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
21
21
|
disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
|
|
22
22
|
_ref$disableScrollLoc = _ref.disableScrollLock,
|
|
23
23
|
disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
|
|
24
|
+
_ref$preventClickEven = _ref.preventClickEventBubbling,
|
|
25
|
+
preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
|
|
26
|
+
onClick = _ref.onClick,
|
|
24
27
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
25
28
|
|
|
26
29
|
var innerRef = useRef(null);
|
|
@@ -49,6 +52,13 @@ export var Window = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
49
52
|
}; // Dependency is empty because we only want to call onClose when component is unmounted
|
|
50
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
54
|
}, []);
|
|
55
|
+
var handleClick = useCallback(function (event) {
|
|
56
|
+
if (preventClickEventBubbling) {
|
|
57
|
+
event == null ? void 0 : event.stopPropagation();
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
typeof onClick === "function" && onClick(event);
|
|
61
|
+
}, [onClick, preventClickEventBubbling]);
|
|
52
62
|
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusLock, {
|
|
53
63
|
returnFocus: returnFocus,
|
|
54
64
|
disabled: disableFocusLock
|
|
@@ -63,7 +73,8 @@ export var Window = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
63
73
|
}, style),
|
|
64
74
|
onKeyDown: handleKeyDown,
|
|
65
75
|
tabIndex: 0,
|
|
66
|
-
className: classnames("c-window", className)
|
|
76
|
+
className: classnames("c-window", className),
|
|
77
|
+
onClick: handleClick
|
|
67
78
|
}), children))));
|
|
68
79
|
});
|
|
69
80
|
Window.displayName = "Window";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Window/Window.tsx"],"names":["React","useCallback","useRef","useEffect","forwardRef","classnames","FocusLock","Portal","useLayerContext","useForkRef","RemoveScroll","StyledWindow","returnFocus","preventScroll","Window","ref","children","onClose","className","style","onKeyDown","disableFocusLock","disableScrollLock","rest","innerRef","handleRef","zIndex","handleKeyDown","event","defaultPrevented","key","preventDefault","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IACEC,WADF,EAEEC,MAFF,EAGEC,SAHF,EAIEC,UAJF,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Window/Window.tsx"],"names":["React","useCallback","useRef","useEffect","forwardRef","classnames","FocusLock","Portal","useLayerContext","useForkRef","RemoveScroll","StyledWindow","returnFocus","preventScroll","Window","ref","children","onClose","className","style","onKeyDown","disableFocusLock","disableScrollLock","preventClickEventBubbling","onClick","rest","innerRef","handleRef","zIndex","handleKeyDown","event","defaultPrevented","key","preventDefault","handleClick","stopPropagation","displayName"],"mappings":"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","sourcesContent":["import React, {\n useCallback,\n useRef,\n useEffect,\n forwardRef,\n KeyboardEvent,\n} from \"react\";\nimport classnames from \"classnames\";\nimport FocusLock from \"react-focus-lock\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { StyledWindow } from \"./Style\";\n\nexport interface IWindow {\n onClose?: () => void;\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n preventClickEventBubbling?: boolean;\n}\n\nconst returnFocus = { preventScroll: true };\n\nexport const Window = forwardRef<\n HTMLDivElement,\n IWindow & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IWindow>\n>(\n (\n {\n children,\n onClose,\n className,\n style,\n onKeyDown,\n disableFocusLock = false,\n disableScrollLock = false,\n preventClickEventBubbling = false,\n onClick,\n ...rest\n },\n ref\n ) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n const { zIndex = 1300 } = useLayerContext();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (\n !event.defaultPrevented &&\n (event.key === \"Esc\" || event.key === \"Escape\")\n ) {\n event.preventDefault();\n if (onClose) {\n onClose();\n }\n }\n if (typeof onKeyDown === \"function\") {\n onKeyDown(event);\n }\n },\n [onClose, onKeyDown]\n );\n\n useEffect(() => {\n return (): void => {\n typeof onClose === \"function\" && onClose();\n };\n // Dependency is empty because we only want to call onClose when component is unmounted\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleClick = useCallback(\n (event) => {\n if (preventClickEventBubbling) {\n event?.stopPropagation();\n }\n typeof onClick === \"function\" && onClick(event);\n },\n [onClick, preventClickEventBubbling]\n );\n\n return (\n <Portal>\n <FocusLock returnFocus={returnFocus} disabled={disableFocusLock}>\n <RemoveScroll\n forwardProps\n ref={handleRef}\n enabled={!disableScrollLock}\n noIsolation\n >\n <StyledWindow\n {...rest}\n style={{ zIndex, ...style }}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n className={classnames(\"c-window\", className)}\n onClick={handleClick}\n >\n {children}\n </StyledWindow>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n );\n }\n);\n\nWindow.displayName = \"Window\";\n"],"file":"Window.js"}
|