@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.
@@ -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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBox, {
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), !disabled ? /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
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;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,IAAMA,MAAM,gBAAG,uBAIpB,gBAUEC,GAVF,EAWK;AAAA,MATDC,QASC,QATDA,QASC;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,uBAPDC,IAOC;AAAA,MAPDA,IAOC,0BAPM,KAON;AAAA,MANDC,KAMC,QANDA,KAMC;AAAA,6BALDC,UAKC;AAAA,MALDA,UAKC,gCALY,KAKZ;AAAA,4BAJDC,SAIC;AAAA,MAJUC,gBAIV,+BAJ6B,QAI7B;AAAA,MAHEC,IAGF;;AACH,kBAA4B,qBAAS,IAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,mBAAkC,qBAASH,gBAAT,CAAlC;AAAA;AAAA,MAAOD,SAAP;AAAA,MAAkBK,YAAlB;;AACA,MAAMC,MAAM,GAAG,mBAA8B,IAA9B,CAAf;AACA,MAAMC,SAAS,GAAG,oBAAlB;AAEA,MAAMC,cAAc,GAAG,yBAAWF,MAAX,EAAmBZ,GAAnB,CAAvB;;AAEA,MAAMe,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,IAAD,EAAgC;AACzDL,IAAAA,YAAY,CAACK,IAAI,CAACV,SAAL,IAAkB,QAAnB,CAAZ;AACD,GAFD;;AAIA,MAAMW,UAAU,GAAG,wBAAY,YAAM;AACnC,QAAI,CAACL,MAAM,CAACM,OAAR,IAAmB,CAAChB,QAApB,IAAgC,CAACC,IAArC,EAA2C;AACzC;AACD;;AAED,QAAIU,SAAS,CAACK,OAAd,EAAuB;AACrBL,MAAAA,SAAS,CAACK,OAAV,CAAkBC,OAAlB;AACD;;AAEDN,IAAAA,SAAS,CAACK,OAAV,GAAoB,wBAAahB,QAAb,EAAuBU,MAAM,CAACM,OAA9B,EAAuC;AACzDZ,MAAAA,SAAS,EAATA,SADyD;AAEzDc,MAAAA,aAAa,EAAEL;AAF0C,KAAvC,CAApB;AAID,GAbkB,EAahB,CAACb,QAAD,EAAWC,IAAX,EAAiBG,SAAjB,CAbgB,CAAnB;;AAeA,MAAMe,WAAW,GAAG,SAAdA,WAAc,GAAY;AAC9B,QAAI,CAACR,SAAS,CAACK,OAAf,EAAwB;AACtB;AACD;;AAEDL,IAAAA,SAAS,CAACK,OAAV,CAAkBC,OAAlB;AACD,GAND;;AAQA,MAAMG,SAAS,GAAG,wBAChB,UAACC,IAAD,EAA0B;AACxBT,IAAAA,cAAc,CAACS,IAAD,CAAd;AACAN,IAAAA,UAAU;AACX,GAJe,EAKhB,CAACA,UAAD,EAAaH,cAAb,CALgB,CAAlB;;AAQA,MAAMU,WAAW,GAAG,SAAdA,WAAc,GAAY;AAC9Bd,IAAAA,SAAS,CAAC,KAAD,CAAT;AACD,GAFD;;AAIA,MAAMe,YAAY,GAAG,SAAfA,YAAe,GAAY;AAC/Bf,IAAAA,SAAS,CAAC,IAAD,CAAT;AACAW,IAAAA,WAAW;AACZ,GAHD;;AAKA,wBAAU,YAAM;AACd,WAAO,YAAY;AACjBA,MAAAA,WAAW;AACZ,KAFD;AAGD,GAJD,EAIG,EAJH;AAMA,wBAAU,YAAM;AACd,QAAI,CAAClB,IAAD,IAAS,CAACE,UAAd,EAA0B;AACxBgB,MAAAA,WAAW;AACZ;AACF,GAJD,EAIG,CAAClB,IAAD,EAAOE,UAAP,CAJH;AAMA,wBAAU,YAAM;AACd,QAAIQ,SAAS,CAACK,OAAd,EAAuB;AACrBL,MAAAA,SAAS,CAACK,OAAV,CAAkBQ,MAAlB;AACD;AACF,GAJD;;AAMA,MAAI,CAACvB,IAAD,KAAU,CAACE,UAAD,IAAeI,MAAzB,CAAJ,EAAsC;AACpC,WAAO,IAAP;AACD;;AAED,MAAMkB,UAAgC,GAAG;AAAErB,IAAAA,SAAS,EAATA;AAAF,GAAzC;;AAEA,MAAID,UAAJ,EAAgB;AACdsB,IAAAA,UAAU,CAACC,eAAX,GAA6B;AAC3BC,MAAAA,EAAE,EAAE1B,IADuB;AAE3B2B,MAAAA,OAAO,EAAEN,WAFkB;AAG3BO,MAAAA,QAAQ,EAAEN;AAHiB,KAA7B;AAKD;;AAED,sBACE;AACE,IAAA,GAAG,EAAEH;AADP,KAEMd,IAFN;AAGE,IAAA,KAAK,oBACAJ,KADA;AAHP,MAOG,OAAOH,QAAP,KAAoB,UAApB,GAAiCA,QAAQ,CAAC0B,UAAD,CAAzC,GAAwD1B,QAP3D,CADF;AAWD,CA9GmB,CAAf;;AAiHPF,MAAM,CAACiC,WAAP,GAAqB,QAArB","sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useRef,\n useEffect,\n useState,\n CSSProperties,\n HTMLAttributes,\n} from \"react\";\nimport { createPopper, Instance, State } 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}\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 ...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 });\n }, [anchorEl, open, placement]);\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
+ {"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,CAwM5D,CAAC"}
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(React.Fragment, null, /*#__PURE__*/React.createElement(StyledComboBox, {
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), !disabled ? /*#__PURE__*/React.createElement(Popper, {
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;AAEf,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;CACvB;AAED,eAAO,MAAM,MAAM,2HA+GlB,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":"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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 { createPopper, Instance, State } 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}\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 ...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 });\n }, [anchorEl, open, placement]);\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
+ {"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(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledComboBox, {
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), !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
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