@activecollab/components 1.0.79 → 1.0.80
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 +4 -3
- package/dist/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/cjs/components/Popper/Popper.js +6 -3
- package/dist/cjs/components/Popper/Popper.js.map +1 -1
- package/dist/esm/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/esm/components/ComboBox/ComboBox.js +4 -3
- package/dist/esm/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/esm/components/Popper/Popper.d.ts +2 -0
- package/dist/esm/components/Popper/Popper.d.ts.map +1 -1
- package/dist/esm/components/Popper/Popper.js +6 -3
- package/dist/esm/components/Popper/Popper.js.map +1 -1
- package/dist/index.js +10 -6
- 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
|
@@ -181,7 +181,7 @@ var ComboBox = function ComboBox(_ref) {
|
|
|
181
181
|
document.removeEventListener("click", clickOutsideCallback);
|
|
182
182
|
};
|
|
183
183
|
}, [clickOutsideCallback]);
|
|
184
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
184
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBox, {
|
|
185
185
|
className: "c-combo-box",
|
|
186
186
|
$open: open,
|
|
187
187
|
$loading: loading,
|
|
@@ -203,13 +203,14 @@ var ComboBox = function ComboBox(_ref) {
|
|
|
203
203
|
size: "small"
|
|
204
204
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
|
|
205
205
|
$open: open
|
|
206
|
-
})) : null
|
|
206
|
+
})) : null, !disabled ? /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
|
|
207
207
|
anchorEl: comboBoxRef.current,
|
|
208
208
|
open: open,
|
|
209
209
|
placement: "bottom",
|
|
210
210
|
style: {
|
|
211
211
|
zIndex: 10
|
|
212
|
-
}
|
|
212
|
+
},
|
|
213
|
+
strategy: "fixed"
|
|
213
214
|
}, /*#__PURE__*/_react.default.createElement(_reactRemoveScroll.RemoveScroll, {
|
|
214
215
|
noIsolation: true,
|
|
215
216
|
allowPinchZoom: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["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","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 StyledComboBoxControls,\n} from \"./Styles\";\nimport { InputSize } from \"../Input\";\n\nexport interface 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 /** Combobox size */\n size?: InputSize;\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 = \"regular\",\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 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 <>\n <StyledComboBox\n className=\"c-combo-box\"\n $open={open}\n $loading={loading}\n ref={comboBoxRef}\n onClick={onOpen}\n onFocus={onOpen}\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 size={size}\n />\n {!disabled ? (\n <StyledComboBoxControls>\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 </StyledComboBoxControls>\n ) : null}\n </StyledComboBox>\n {!disabled ? (\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.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 </>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["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","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 StyledComboBoxControls,\n} from \"./Styles\";\nimport { InputSize } from \"../Input\";\n\nexport interface 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 /** Combobox size */\n size?: InputSize;\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 = \"regular\",\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 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 ref={comboBoxRef}\n onClick={onOpen}\n onFocus={onOpen}\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 size={size}\n />\n {!disabled ? (\n <StyledComboBoxControls>\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 </StyledComboBoxControls>\n ) : null}\n {!disabled ? (\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n strategy={\"fixed\"}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.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"}
|
|
@@ -13,7 +13,7 @@ var _core = require("@popperjs/core");
|
|
|
13
13
|
|
|
14
14
|
var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
|
|
15
15
|
|
|
16
|
-
var _excluded = ["children", "anchorEl", "open", "style", "transition", "placement"];
|
|
16
|
+
var _excluded = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
@@ -55,6 +55,8 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
55
55
|
transition = _ref$transition === void 0 ? false : _ref$transition,
|
|
56
56
|
_ref$placement = _ref.placement,
|
|
57
57
|
initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
|
|
58
|
+
_ref$strategy = _ref.strategy,
|
|
59
|
+
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
|
|
58
60
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
59
61
|
|
|
60
62
|
var _useState = (0, _react.useState)(true),
|
|
@@ -86,9 +88,10 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
86
88
|
|
|
87
89
|
popperRef.current = (0, _core.createPopper)(anchorEl, ownRef.current, {
|
|
88
90
|
placement: placement,
|
|
89
|
-
onFirstUpdate: handlePopperUpdate
|
|
91
|
+
onFirstUpdate: handlePopperUpdate,
|
|
92
|
+
strategy: strategy
|
|
90
93
|
});
|
|
91
|
-
}, [anchorEl, open, placement]);
|
|
94
|
+
}, [anchorEl, open, placement, strategy]);
|
|
92
95
|
|
|
93
96
|
var handleClose = function handleClose() {
|
|
94
97
|
if (!popperRef.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["Popper","ref","children","anchorEl","open","style","transition","placement","initialPlacement","rest","exited","setExited","setPlacement","ownRef","popperRef","handleInnerRef","handlePopperUpdate","data","handleOpen","current","destroy","onFirstUpdate","handleClose","handleRef","node","handleEnter","handleExited","update","childProps","transitionProps","in","onEnter","onExited","displayName"],"mappings":";;;;;;;;;AAAA;;AASA;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["Popper","ref","children","anchorEl","open","style","transition","placement","initialPlacement","strategy","rest","exited","setExited","setPlacement","ownRef","popperRef","handleInnerRef","handlePopperUpdate","data","handleOpen","current","destroy","onFirstUpdate","handleClose","handleRef","node","handleEnter","handleExited","update","childProps","transitionProps","in","onEnter","onExited","displayName"],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useRef,\n useEffect,\n useState,\n CSSProperties,\n HTMLAttributes,\n} from \"react\";\nimport {\n createPopper,\n Instance,\n PositioningStrategy,\n State,\n} from \"@popperjs/core\";\nimport { Placement } from \".\";\nimport useForkRef from \"../../utils/useForkRef\";\n\ninterface TransitionProps {\n in: boolean;\n onEnter: () => void;\n onExited: () => void;\n}\ninterface IChildProps {\n placement: Placement;\n transitionProps: Partial<TransitionProps>;\n}\n\ninterface PopperProps {\n /** Anchor Element. */\n anchorEl?: Element | null;\n /** Open */\n open?: boolean;\n /** Inline style */\n style?: CSSProperties;\n /** Child with transition */\n transition?: boolean;\n /** Placement */\n placement?: Placement;\n /** Strategy */\n strategy?: PositioningStrategy;\n}\n\nexport const Popper = forwardRef<\n HTMLDivElement,\n PopperProps & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n anchorEl,\n open = false,\n style,\n transition = false,\n placement: initialPlacement = \"bottom\",\n strategy = \"absolute\",\n ...rest\n },\n ref\n ) => {\n const [exited, setExited] = useState(true);\n const [placement, setPlacement] = useState(initialPlacement);\n const ownRef = useRef<HTMLDivElement | null>(null);\n const popperRef = useRef<Instance>();\n\n const handleInnerRef = useForkRef(ownRef, ref);\n\n const handlePopperUpdate = (data: Partial<State>): void => {\n setPlacement(data.placement || \"bottom\");\n };\n\n const handleOpen = useCallback(() => {\n if (!ownRef.current || !anchorEl || !open) {\n return;\n }\n\n if (popperRef.current) {\n popperRef.current.destroy();\n }\n\n popperRef.current = createPopper(anchorEl, ownRef.current, {\n placement,\n onFirstUpdate: handlePopperUpdate,\n strategy,\n });\n }, [anchorEl, open, placement, strategy]);\n\n const handleClose = (): void => {\n if (!popperRef.current) {\n return;\n }\n\n popperRef.current.destroy();\n };\n\n const handleRef = useCallback(\n (node: HTMLDivElement) => {\n handleInnerRef(node);\n handleOpen();\n },\n [handleOpen, handleInnerRef]\n );\n\n const handleEnter = (): void => {\n setExited(false);\n };\n\n const handleExited = (): void => {\n setExited(true);\n handleClose();\n };\n\n useEffect(() => {\n return (): void => {\n handleClose();\n };\n }, []);\n\n useEffect(() => {\n if (!open && !transition) {\n handleClose();\n }\n }, [open, transition]);\n\n useEffect(() => {\n if (popperRef.current) {\n popperRef.current.update();\n }\n });\n\n if (!open && (!transition || exited)) {\n return null;\n }\n\n const childProps: Partial<IChildProps> = { placement };\n\n if (transition) {\n childProps.transitionProps = {\n in: open,\n onEnter: handleEnter,\n onExited: handleExited,\n };\n }\n\n return (\n <div\n ref={handleRef}\n {...rest}\n style={{\n ...style,\n }}\n >\n {typeof children === \"function\" ? children(childProps) : children}\n </div>\n );\n }\n);\n\nPopper.displayName = \"Popper\";\n"],"file":"Popper.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAMH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAelE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,WAAW,cAAc;IAE7B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,GAAG,kBAAkB,
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAMH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAelE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,WAAW,cAAc;IAE7B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,GAAG,kBAAkB,CAuM5D,CAAC"}
|
|
@@ -136,7 +136,7 @@ export var ComboBox = function ComboBox(_ref) {
|
|
|
136
136
|
document.removeEventListener("click", clickOutsideCallback);
|
|
137
137
|
};
|
|
138
138
|
}, [clickOutsideCallback]);
|
|
139
|
-
return /*#__PURE__*/React.createElement(
|
|
139
|
+
return /*#__PURE__*/React.createElement(StyledComboBox, {
|
|
140
140
|
className: "c-combo-box",
|
|
141
141
|
$open: open,
|
|
142
142
|
$loading: loading,
|
|
@@ -158,13 +158,14 @@ export var ComboBox = function ComboBox(_ref) {
|
|
|
158
158
|
size: "small"
|
|
159
159
|
}, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
|
|
160
160
|
$open: open
|
|
161
|
-
})) : null
|
|
161
|
+
})) : null, !disabled ? /*#__PURE__*/React.createElement(Popper, {
|
|
162
162
|
anchorEl: comboBoxRef.current,
|
|
163
163
|
open: open,
|
|
164
164
|
placement: "bottom",
|
|
165
165
|
style: {
|
|
166
166
|
zIndex: 10
|
|
167
|
-
}
|
|
167
|
+
},
|
|
168
|
+
strategy: "fixed"
|
|
168
169
|
}, /*#__PURE__*/React.createElement(RemoveScroll, {
|
|
169
170
|
noIsolation: true,
|
|
170
171
|
allowPinchZoom: true
|
|
@@ -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","StyledComboBoxControls","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","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 StyledComboBoxControls,\n} from \"./Styles\";\nimport { InputSize } from \"../Input\";\n\nexport interface 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 /** Combobox size */\n size?: InputSize;\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 = \"regular\",\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 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 <>\n <StyledComboBox\n className=\"c-combo-box\"\n $open={open}\n $loading={loading}\n ref={comboBoxRef}\n onClick={onOpen}\n onFocus={onOpen}\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 size={size}\n />\n {!disabled ? (\n <StyledComboBoxControls>\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 </StyledComboBoxControls>\n ) : null}\n </StyledComboBox>\n {!disabled ? (\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.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 </>\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","StyledComboBoxControls","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","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 StyledComboBoxControls,\n} from \"./Styles\";\nimport { InputSize } from \"../Input\";\n\nexport interface 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 /** Combobox size */\n size?: InputSize;\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 = \"regular\",\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 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 ref={comboBoxRef}\n onClick={onOpen}\n onFocus={onOpen}\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 size={size}\n />\n {!disabled ? (\n <StyledComboBoxControls>\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 </StyledComboBoxControls>\n ) : null}\n {!disabled ? (\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n strategy={\"fixed\"}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.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,4 +1,5 @@
|
|
|
1
1
|
import React, { CSSProperties } from "react";
|
|
2
|
+
import { PositioningStrategy } from "@popperjs/core";
|
|
2
3
|
import { Placement } from ".";
|
|
3
4
|
interface PopperProps {
|
|
4
5
|
anchorEl?: Element | null;
|
|
@@ -6,6 +7,7 @@ interface PopperProps {
|
|
|
6
7
|
style?: CSSProperties;
|
|
7
8
|
transition?: boolean;
|
|
8
9
|
placement?: Placement;
|
|
10
|
+
strategy?: PositioningStrategy;
|
|
9
11
|
}
|
|
10
12
|
export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
11
13
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAEd,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAEd,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,mBAAmB,EAEpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,GAAG,CAAC;AAa9B,UAAU,WAAW;IAEnB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,2HAiHlB,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", "anchorEl", "open", "style", "transition", "placement"];
|
|
3
|
+
var _excluded = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
|
|
4
4
|
import React, { forwardRef, useCallback, useRef, useEffect, useState } from "react";
|
|
5
5
|
import { createPopper } from "@popperjs/core";
|
|
6
6
|
import useForkRef from "../../utils/useForkRef";
|
|
@@ -14,6 +14,8 @@ export var Popper = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
14
14
|
transition = _ref$transition === void 0 ? false : _ref$transition,
|
|
15
15
|
_ref$placement = _ref.placement,
|
|
16
16
|
initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
|
|
17
|
+
_ref$strategy = _ref.strategy,
|
|
18
|
+
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
|
|
17
19
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
18
20
|
|
|
19
21
|
var _useState = useState(true),
|
|
@@ -43,9 +45,10 @@ export var Popper = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
43
45
|
|
|
44
46
|
popperRef.current = createPopper(anchorEl, ownRef.current, {
|
|
45
47
|
placement: placement,
|
|
46
|
-
onFirstUpdate: handlePopperUpdate
|
|
48
|
+
onFirstUpdate: handlePopperUpdate,
|
|
49
|
+
strategy: strategy
|
|
47
50
|
});
|
|
48
|
-
}, [anchorEl, open, placement]);
|
|
51
|
+
}, [anchorEl, open, placement, strategy]);
|
|
49
52
|
|
|
50
53
|
var handleClose = function handleClose() {
|
|
51
54
|
if (!popperRef.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["React","forwardRef","useCallback","useRef","useEffect","useState","createPopper","useForkRef","Popper","ref","children","anchorEl","open","style","transition","placement","initialPlacement","rest","exited","setExited","setPlacement","ownRef","popperRef","handleInnerRef","handlePopperUpdate","data","handleOpen","current","destroy","onFirstUpdate","handleClose","handleRef","node","handleEnter","handleExited","update","childProps","transitionProps","in","onEnter","onExited","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IACEC,UADF,EAEEC,WAFF,EAGEC,MAHF,EAIEC,SAJF,EAKEC,QALF,QAQO,OARP;AASA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["React","forwardRef","useCallback","useRef","useEffect","useState","createPopper","useForkRef","Popper","ref","children","anchorEl","open","style","transition","placement","initialPlacement","strategy","rest","exited","setExited","setPlacement","ownRef","popperRef","handleInnerRef","handlePopperUpdate","data","handleOpen","current","destroy","onFirstUpdate","handleClose","handleRef","node","handleEnter","handleExited","update","childProps","transitionProps","in","onEnter","onExited","displayName"],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useRef,\n useEffect,\n useState,\n CSSProperties,\n HTMLAttributes,\n} from \"react\";\nimport {\n createPopper,\n Instance,\n PositioningStrategy,\n State,\n} from \"@popperjs/core\";\nimport { Placement } from \".\";\nimport useForkRef from \"../../utils/useForkRef\";\n\ninterface TransitionProps {\n in: boolean;\n onEnter: () => void;\n onExited: () => void;\n}\ninterface IChildProps {\n placement: Placement;\n transitionProps: Partial<TransitionProps>;\n}\n\ninterface PopperProps {\n /** Anchor Element. */\n anchorEl?: Element | null;\n /** Open */\n open?: boolean;\n /** Inline style */\n style?: CSSProperties;\n /** Child with transition */\n transition?: boolean;\n /** Placement */\n placement?: Placement;\n /** Strategy */\n strategy?: PositioningStrategy;\n}\n\nexport const Popper = forwardRef<\n HTMLDivElement,\n PopperProps & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n anchorEl,\n open = false,\n style,\n transition = false,\n placement: initialPlacement = \"bottom\",\n strategy = \"absolute\",\n ...rest\n },\n ref\n ) => {\n const [exited, setExited] = useState(true);\n const [placement, setPlacement] = useState(initialPlacement);\n const ownRef = useRef<HTMLDivElement | null>(null);\n const popperRef = useRef<Instance>();\n\n const handleInnerRef = useForkRef(ownRef, ref);\n\n const handlePopperUpdate = (data: Partial<State>): void => {\n setPlacement(data.placement || \"bottom\");\n };\n\n const handleOpen = useCallback(() => {\n if (!ownRef.current || !anchorEl || !open) {\n return;\n }\n\n if (popperRef.current) {\n popperRef.current.destroy();\n }\n\n popperRef.current = createPopper(anchorEl, ownRef.current, {\n placement,\n onFirstUpdate: handlePopperUpdate,\n strategy,\n });\n }, [anchorEl, open, placement, strategy]);\n\n const handleClose = (): void => {\n if (!popperRef.current) {\n return;\n }\n\n popperRef.current.destroy();\n };\n\n const handleRef = useCallback(\n (node: HTMLDivElement) => {\n handleInnerRef(node);\n handleOpen();\n },\n [handleOpen, handleInnerRef]\n );\n\n const handleEnter = (): void => {\n setExited(false);\n };\n\n const handleExited = (): void => {\n setExited(true);\n handleClose();\n };\n\n useEffect(() => {\n return (): void => {\n handleClose();\n };\n }, []);\n\n useEffect(() => {\n if (!open && !transition) {\n handleClose();\n }\n }, [open, transition]);\n\n useEffect(() => {\n if (popperRef.current) {\n popperRef.current.update();\n }\n });\n\n if (!open && (!transition || exited)) {\n return null;\n }\n\n const childProps: Partial<IChildProps> = { placement };\n\n if (transition) {\n childProps.transitionProps = {\n in: open,\n onEnter: handleEnter,\n onExited: handleExited,\n };\n }\n\n return (\n <div\n ref={handleRef}\n {...rest}\n style={{\n ...style,\n }}\n >\n {typeof children === \"function\" ? children(childProps) : children}\n </div>\n );\n }\n);\n\nPopper.displayName = \"Popper\";\n"],"file":"Popper.js"}
|
package/dist/index.js
CHANGED
|
@@ -449,7 +449,7 @@
|
|
|
449
449
|
}, [refA, refB]);
|
|
450
450
|
}
|
|
451
451
|
|
|
452
|
-
var _excluded$U = ["children", "anchorEl", "open", "style", "transition", "placement"];
|
|
452
|
+
var _excluded$U = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
|
|
453
453
|
var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
454
454
|
var children = _ref.children,
|
|
455
455
|
anchorEl = _ref.anchorEl,
|
|
@@ -460,6 +460,8 @@
|
|
|
460
460
|
transition = _ref$transition === void 0 ? false : _ref$transition,
|
|
461
461
|
_ref$placement = _ref.placement,
|
|
462
462
|
initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
|
|
463
|
+
_ref$strategy = _ref.strategy,
|
|
464
|
+
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
|
|
463
465
|
rest = _objectWithoutProperties(_ref, _excluded$U);
|
|
464
466
|
|
|
465
467
|
var _useState = React.useState(true),
|
|
@@ -491,9 +493,10 @@
|
|
|
491
493
|
|
|
492
494
|
popperRef.current = core.createPopper(anchorEl, ownRef.current, {
|
|
493
495
|
placement: placement,
|
|
494
|
-
onFirstUpdate: handlePopperUpdate
|
|
496
|
+
onFirstUpdate: handlePopperUpdate,
|
|
497
|
+
strategy: strategy
|
|
495
498
|
});
|
|
496
|
-
}, [anchorEl, open, placement]);
|
|
499
|
+
}, [anchorEl, open, placement, strategy]);
|
|
497
500
|
|
|
498
501
|
var handleClose = function handleClose() {
|
|
499
502
|
if (!popperRef.current) {
|
|
@@ -9938,7 +9941,7 @@
|
|
|
9938
9941
|
document.removeEventListener("click", clickOutsideCallback);
|
|
9939
9942
|
};
|
|
9940
9943
|
}, [clickOutsideCallback]);
|
|
9941
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
9944
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledComboBox, {
|
|
9942
9945
|
className: "c-combo-box",
|
|
9943
9946
|
$open: open,
|
|
9944
9947
|
$loading: loading,
|
|
@@ -9960,13 +9963,14 @@
|
|
|
9960
9963
|
size: "small"
|
|
9961
9964
|
}, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
|
|
9962
9965
|
$open: open
|
|
9963
|
-
})) : null
|
|
9966
|
+
})) : null, !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
|
|
9964
9967
|
anchorEl: comboBoxRef.current,
|
|
9965
9968
|
open: open,
|
|
9966
9969
|
placement: "bottom",
|
|
9967
9970
|
style: {
|
|
9968
9971
|
zIndex: 10
|
|
9969
|
-
}
|
|
9972
|
+
},
|
|
9973
|
+
strategy: "fixed"
|
|
9970
9974
|
}, /*#__PURE__*/React__default["default"].createElement(reactRemoveScroll.RemoveScroll, {
|
|
9971
9975
|
noIsolation: true,
|
|
9972
9976
|
allowPinchZoom: true
|