@activecollab/components 1.0.41 → 1.0.44
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 +6 -3
- package/dist/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/cjs/components/ComboBox/Styles.js +5 -1
- package/dist/cjs/components/ComboBox/Styles.js.map +1 -1
- package/dist/cjs/components/Header/Header.js +4 -1
- package/dist/cjs/components/Header/Header.js.map +1 -1
- package/dist/cjs/components/Header/Styles.js +11 -3
- package/dist/cjs/components/Header/Styles.js.map +1 -1
- package/dist/cjs/components/Icons/collection/InsertLink.js +31 -0
- package/dist/cjs/components/Icons/collection/InsertLink.js.map +1 -0
- package/dist/cjs/components/Icons/collection/Note.js +31 -0
- package/dist/cjs/components/Icons/collection/Note.js.map +1 -0
- package/dist/cjs/components/Icons/collection/Settings.js +31 -0
- package/dist/cjs/components/Icons/collection/Settings.js.map +1 -0
- package/dist/cjs/components/Icons/collection/index.js +24 -0
- package/dist/cjs/components/Icons/collection/index.js.map +1 -1
- package/dist/esm/components/ComboBox/ComboBox.d.ts +1 -0
- package/dist/esm/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/esm/components/ComboBox/ComboBox.js +6 -3
- package/dist/esm/components/ComboBox/ComboBox.js.map +1 -1
- package/dist/esm/components/ComboBox/Styles.d.ts +3 -1
- package/dist/esm/components/ComboBox/Styles.d.ts.map +1 -1
- package/dist/esm/components/ComboBox/Styles.js +5 -1
- package/dist/esm/components/ComboBox/Styles.js.map +1 -1
- package/dist/esm/components/Header/Header.d.ts +1 -0
- package/dist/esm/components/Header/Header.d.ts.map +1 -1
- package/dist/esm/components/Header/Header.js +4 -1
- package/dist/esm/components/Header/Header.js.map +1 -1
- package/dist/esm/components/Header/Styles.d.ts +3 -1
- package/dist/esm/components/Header/Styles.d.ts.map +1 -1
- package/dist/esm/components/Header/Styles.js +6 -2
- package/dist/esm/components/Header/Styles.js.map +1 -1
- package/dist/esm/components/Icons/collection/InsertLink.d.ts +4 -0
- package/dist/esm/components/Icons/collection/InsertLink.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/InsertLink.js +18 -0
- package/dist/esm/components/Icons/collection/InsertLink.js.map +1 -0
- package/dist/esm/components/Icons/collection/Note.d.ts +4 -0
- package/dist/esm/components/Icons/collection/Note.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/Note.js +18 -0
- package/dist/esm/components/Icons/collection/Note.js.map +1 -0
- package/dist/esm/components/Icons/collection/Settings.d.ts +4 -0
- package/dist/esm/components/Icons/collection/Settings.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/Settings.js +18 -0
- package/dist/esm/components/Icons/collection/Settings.js.map +1 -0
- package/dist/esm/components/Icons/collection/index.d.ts +3 -0
- package/dist/esm/components/Icons/collection/index.d.ts.map +1 -1
- package/dist/esm/components/Icons/collection/index.js +3 -0
- package/dist/esm/components/Icons/collection/index.js.map +1 -1
- package/dist/index.js +71 -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
|
@@ -27,7 +27,7 @@ var _OptionContent = require("../Select/OptionContent/OptionContent");
|
|
|
27
27
|
|
|
28
28
|
var _Styles = require("./Styles");
|
|
29
29
|
|
|
30
|
-
var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled"];
|
|
30
|
+
var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size"];
|
|
31
31
|
|
|
32
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
33
33
|
|
|
@@ -67,6 +67,7 @@ var ComboBox = function ComboBox(_ref) {
|
|
|
67
67
|
handleEmptyAction = _ref.handleEmptyAction,
|
|
68
68
|
_ref$disabled = _ref.disabled,
|
|
69
69
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
70
|
+
size = _ref.size,
|
|
70
71
|
prop = _objectWithoutProperties(_ref, _excluded);
|
|
71
72
|
|
|
72
73
|
var selectedName = (0, _react.useMemo)(function () {
|
|
@@ -184,11 +185,13 @@ var ComboBox = function ComboBox(_ref) {
|
|
|
184
185
|
onKeyDown: handleOnKeyDown,
|
|
185
186
|
onChange: handleOnChange,
|
|
186
187
|
placeholder: placeholder,
|
|
187
|
-
disabled: disabled
|
|
188
|
+
disabled: disabled,
|
|
189
|
+
$size: size
|
|
188
190
|
}), !disabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : selected ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
189
191
|
onMouseDown: handleMouseDown,
|
|
190
192
|
onClick: handleDeselect,
|
|
191
|
-
variant: "text gray"
|
|
193
|
+
variant: "text gray",
|
|
194
|
+
size: size
|
|
192
195
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
|
|
193
196
|
$open: open
|
|
194
197
|
})) : null), !disabled ? /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","current","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBox,\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n /** Set selected items */\n selected?: string | number;\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (e: string | number) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n}\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 ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n\n const [open, setOpen] = useState(false);\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n },\n [open, selectedName]\n );\n\n const formRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n if (selectedValue) {\n onChange?.(selectedValue);\n setOpen(false);\n }\n },\n [onChange]\n );\n\n const onClose = useCallback(() => {\n setTimeout(() => {\n setOpen(false);\n }, 200);\n setValue(selectedName);\n }, [selectedName]);\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback((option, props) => {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n }, []);\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n onChange?.(\"\");\n setOpen(false);\n },\n [onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledComboBox className=\"c-combo-box\" $open={open} $loading={loading}>\n <StyledComboBoxWrapper\n onClick={onOpen}\n onFocus={onOpen}\n onBlur={onClose}\n ref={formRef}\n $loading={loading}\n >\n <StyledComboBoxInput\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n />\n {!disabled ? (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n ) : null}\n </StyledComboBoxWrapper>\n {!disabled ? (\n <Popper\n anchorEl={formRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={formRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type=\"single\"\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </StyledComboBox>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","current","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBox,\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n /** Set selected items */\n selected?: string | number;\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (e: string | number) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n\n const [open, setOpen] = useState(false);\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n },\n [open, selectedName]\n );\n\n const formRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n if (selectedValue) {\n onChange?.(selectedValue);\n setOpen(false);\n }\n },\n [onChange]\n );\n\n const onClose = useCallback(() => {\n setTimeout(() => {\n setOpen(false);\n }, 200);\n setValue(selectedName);\n }, [selectedName]);\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback((option, props) => {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n }, []);\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n onChange?.(\"\");\n setOpen(false);\n },\n [onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledComboBox className=\"c-combo-box\" $open={open} $loading={loading}>\n <StyledComboBoxWrapper\n onClick={onOpen}\n onFocus={onOpen}\n onBlur={onClose}\n ref={formRef}\n $loading={loading}\n >\n <StyledComboBoxInput\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n $size={size}\n />\n {!disabled ? (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size={size}\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n ) : null}\n </StyledComboBoxWrapper>\n {!disabled ? (\n <Popper\n anchorEl={formRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={formRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type=\"single\"\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </StyledComboBox>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
|
|
@@ -60,7 +60,11 @@ StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpa
|
|
|
60
60
|
var StyledComboBoxInput = (0, _styledComponents.default)(_Input.Input).withConfig({
|
|
61
61
|
displayName: "Styles__StyledComboBoxInput",
|
|
62
62
|
componentId: "sc-5qvkpb-4"
|
|
63
|
-
})(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;"])
|
|
63
|
+
})(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;", " ", ""], function (props) {
|
|
64
|
+
return props.$size == "small" && (0, _styledComponents.css)(["height:24px;"]);
|
|
65
|
+
}, function (props) {
|
|
66
|
+
return props.$size == "big" && (0, _styledComponents.css)(["height:40px;"]);
|
|
67
|
+
});
|
|
64
68
|
exports.StyledComboBoxInput = StyledComboBoxInput;
|
|
65
69
|
StyledComboBoxInput.displayName = "StyledComboBoxInput";
|
|
66
70
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBox","styled","div","FontStyle","BoxSizingStyle","props","$open","css","$loading","displayName","StyledComboBoxWrapper","StyledIconDefaults","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","StyledComboBoxInput","Input","StyledComboBoxList","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAOO,IAAMA,cAAc,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,6LAOvBC,oBAPuB,EAQvBC,8BARuB,EAUvB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,yCADA;AAAA,CAVuB,EAgBvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,QACAD,qBADA,uBADA;AAAA,CAhBuB,CAApB;;;AAuBPP,cAAc,CAACS,WAAf,GAA6B,gBAA7B;;AAEO,IAAMC,qBAAqB,GAAGT,0BAAOC,GAAV;AAAA;AAAA;AAAA,oEAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,QACAD,qBADA,2BADA;AAAA,CAN8B,CAA3B;;;AAaPG,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,IAAME,kBAAkB,OAAGJ,qBAAH,oCAAxB;AAKO,IAAMK,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,2IACrCF,kBADqC,EAOrCD,qBAPqC,CAAlC;;AAaPE,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEO,IAAMK,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,yFAG/CJ,kBAH+C,EAQ/C,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,8BADA;AAAA,CAR+C,CAA5C;;AAePO,sCAAsC,CAACL,WAAvC,GACE,wCADF;AAGO,IAAMO,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBox","styled","div","FontStyle","BoxSizingStyle","props","$open","css","$loading","displayName","StyledComboBoxWrapper","StyledIconDefaults","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","StyledComboBoxInput","Input","$size","StyledComboBoxList","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAOO,IAAMA,cAAc,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,6LAOvBC,oBAPuB,EAQvBC,8BARuB,EAUvB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,yCADA;AAAA,CAVuB,EAgBvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,QACAD,qBADA,uBADA;AAAA,CAhBuB,CAApB;;;AAuBPP,cAAc,CAACS,WAAf,GAA6B,gBAA7B;;AAEO,IAAMC,qBAAqB,GAAGT,0BAAOC,GAAV;AAAA;AAAA;AAAA,oEAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,QACAD,qBADA,2BADA;AAAA,CAN8B,CAA3B;;;AAaPG,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,IAAME,kBAAkB,OAAGJ,qBAAH,oCAAxB;AAKO,IAAMK,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,2IACrCF,kBADqC,EAOrCD,qBAPqC,CAAlC;;AAaPE,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEO,IAAMK,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,yFAG/CJ,kBAH+C,EAQ/C,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,8BADA;AAAA,CAR+C,CAA5C;;AAePO,sCAAsC,CAACL,WAAvC,GACE,wCADF;AAGO,IAAMO,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,6GAM5B,UAACZ,KAAD;AAAA,SACAA,KAAK,CAACa,KAAN,IAAe,OAAf,QACAX,qBADA,mBADA;AAAA,CAN4B,EAW5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACa,KAAN,IAAe,KAAf,QACAX,qBADA,mBADA;AAAA,CAX4B,CAAzB;;AAkBPS,mBAAmB,CAACP,WAApB,GAAkC,qBAAlC;;AAEO,IAAMU,kBAAkB,GAAGlB,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACG,KAAD;AAAA,mBAAcA,KAAK,CAACe,MAApB;AAAA,CAPoB,CAAxB;;;AAUPD,kBAAkB,CAACV,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledComboBoxProps {\n $open?: boolean;\n $loading?: boolean;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n border: 1px solid var(--border-primary);\n border-radius: 10px;\n color: var(--color-theme-900);\n font-size: 14px;\n background-color: var(--input-background-color);\n cursor: text;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$open &&\n css`\n border-color: var(--color-primary);\n `}\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxWrapper = styled.div<{ $loading?: boolean }>`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n\n ${(props) =>\n props.$loading &&\n css`\n pointer-events: none;\n `}\n`;\n\nStyledComboBoxWrapper.displayName = \"StyledComboBoxWrapper\";\n\nconst StyledIconDefaults = css`\n flex-shrink: 0;\n cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n ${StyledIconDefaults}\n opacity: 0;\n transition-property: all;\n transition-duration: 0.2s;\n transition-delay: 0.5s;\n\n ${StyledComboBoxWrapper}:hover & {\n opacity: 1;\n transition-delay: 0s;\n }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n ${StyledIconDefaults}\n margin: 0 4px 0 0;\n color: var(--color-theme-600);\n transform: rotate(180deg);\n\n ${(props) =>\n props.$open &&\n css`\n transform: rotate(0deg);\n `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $size?: string }>`\n overflow: hidden;\n text-overflow: ellipsis;\n background-color: transparent;\n border: none;\n width: 100%;\n ${(props) =>\n props.$size == \"small\" &&\n css`\n height: 24px;\n `}\n ${(props) =>\n props.$size == \"big\" &&\n css`\n height: 40px;\n `}\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n min-width: 260px;\n background-color: var(--page-paper-main);\n border-radius: 8px;\n border: 1px solid var(--border-primary);\n box-shadow: var(--shadow-tertiary);\n margin: 8px 0;\n width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}
|
|
@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
13
13
|
|
|
14
14
|
var _Styles = require("./Styles");
|
|
15
15
|
|
|
16
|
-
var _excluded = ["className", "children"];
|
|
16
|
+
var _excluded = ["className", "size", "children"];
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
@@ -29,12 +29,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
29
29
|
|
|
30
30
|
var Header = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
31
31
|
var className = _ref.className,
|
|
32
|
+
_ref$size = _ref.size,
|
|
33
|
+
size = _ref$size === void 0 ? "small" : _ref$size,
|
|
32
34
|
children = _ref.children,
|
|
33
35
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
34
36
|
|
|
35
37
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledHeader, _extends({
|
|
36
38
|
type: "paper-2",
|
|
37
39
|
className: (0, _classnames.default)("c-header", className),
|
|
40
|
+
size: size,
|
|
38
41
|
ref: ref
|
|
39
42
|
}, rest), children);
|
|
40
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"names":["Header","ref","className","children","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"names":["Header","ref","className","size","children","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWO,IAAMA,MAAM,gBAAG,uBACpB,gBAOEC,GAPF,EAQK;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,uBALDC,IAKC;AAAA,MALDA,IAKC,0BALM,OAKN;AAAA,MAJDC,QAIC,QAJDA,QAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,oBAAD;AACE,IAAA,IAAI,EAAE,SADR;AAEE,IAAA,SAAS,EAAE,yBAAW,UAAX,EAAuBH,SAAvB,CAFb;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,GAAG,EAAEF;AAJP,KAKMI,IALN,GAOGD,QAPH,CADF;AAWD,CArBmB,CAAf;;AAwBPJ,MAAM,CAACM,WAAP,GAAqB,QAArB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledHeader } from \"./Styles\";\n\ninterface IHeaderProps {\n /** CSS classes. */\n className?: string;\n /** Size */\n size?: \"small\" | \"big\";\n /** Children */\n children: ReactNode;\n}\n\nexport const Header = forwardRef(\n (\n {\n className,\n size = \"small\",\n children,\n ...rest\n }: HTMLAttributes<HTMLDivElement> & IHeaderProps,\n ref: Ref<HTMLDivElement> | null | undefined\n ) => {\n return (\n <StyledHeader\n type={\"paper-2\"}\n className={classNames(\"c-header\", className)}\n size={size}\n ref={ref}\n {...rest}\n >\n {children}\n </StyledHeader>\n );\n }\n);\n\nHeader.displayName = \"Header\";\n"],"file":"Header.js"}
|
|
@@ -1,20 +1,28 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
8
|
exports.StyledHeader = void 0;
|
|
7
9
|
|
|
8
|
-
var _styledComponents =
|
|
10
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
11
|
|
|
10
12
|
var _Paper = require("../Paper");
|
|
11
13
|
|
|
12
|
-
function
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
17
|
|
|
14
18
|
var StyledHeader = (0, _styledComponents.default)(_Paper.Paper).withConfig({
|
|
15
19
|
displayName: "Styles__StyledHeader",
|
|
16
20
|
componentId: "sc-xrlqib-0"
|
|
17
|
-
})(["
|
|
21
|
+
})(["", " ", " padding:0 1rem;display:flex;overflow:hidden;min-width:350px;@media screen and (max-width:350px){overflow:auto;}"], function (props) {
|
|
22
|
+
return props.size === "big" && (0, _styledComponents.css)(["height:140px;"]);
|
|
23
|
+
}, function (props) {
|
|
24
|
+
return props.size === "small" && (0, _styledComponents.css)(["height:4rem;"]);
|
|
25
|
+
});
|
|
18
26
|
exports.StyledHeader = StyledHeader;
|
|
19
27
|
StyledHeader.displayName = "StyledHeader";
|
|
20
28
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Header/Styles.ts"],"names":["StyledHeader","Paper","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Header/Styles.ts"],"names":["StyledHeader","Paper","props","size","css","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAEO,IAAMA,YAAY,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,kIACrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAe,KAAf,QACAC,qBADA,oBADA;AAAA,CADqB,EAOrB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAe,OAAf,QACAC,qBADA,mBADA;AAAA,CAPqB,CAAlB;;AAuBPJ,YAAY,CAACK,WAAb,GAA2B,cAA3B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Paper } from \"../Paper\";\n\nexport const StyledHeader = styled(Paper)<{ size?: string }>`\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 140px;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 4rem;\n `}\n\n padding: 0 1rem;\n display: flex;\n overflow: hidden;\n min-width: 350px;\n\n @media screen and (max-width: 350px) {\n overflow: auto;\n }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"file":"Styles.js"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
13
|
+
|
|
14
|
+
var InsertLinkIcon = /*#__PURE__*/_react.default.forwardRef(function (props, svgRef) {
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement("svg", _extends({
|
|
16
|
+
width: 24,
|
|
17
|
+
height: 24,
|
|
18
|
+
viewBox: "0 0 24 24",
|
|
19
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20
|
+
fill: "var(--color-theme-600)",
|
|
21
|
+
ref: svgRef
|
|
22
|
+
}, props), /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1ZM8 13h8v-2H8v2Zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5Z",
|
|
24
|
+
fillRule: "evenodd"
|
|
25
|
+
}));
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
InsertLinkIcon.displayName = "InsertLinkIcon";
|
|
29
|
+
var _default = InsertLinkIcon;
|
|
30
|
+
exports.default = _default;
|
|
31
|
+
//# sourceMappingURL=InsertLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Icons/collection/InsertLink.tsx"],"names":["InsertLinkIcon","React","forwardRef","props","svgRef","displayName"],"mappings":";;;;;;;AAAA;;;;;;AACA,IAAMA,cAAc,gBAAGC,eAAMC,UAAN,CACrB,UAACC,KAAD,EAAuCC,MAAvC;AAAA,sBACE;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,OAAO,EAAC,WAHV;AAIE,IAAA,KAAK,EAAC,4BAJR;AAKE,IAAA,IAAI,EAAC,wBALP;AAME,IAAA,GAAG,EAAEA;AANP,KAOMD,KAPN,gBASE;AACE,IAAA,CAAC,EAAC,2NADJ;AAEE,IAAA,QAAQ,EAAC;AAFX,IATF,CADF;AAAA,CADqB,CAAvB;;AAkBAH,cAAc,CAACK,WAAf,GAA6B,gBAA7B;eACeL,c","sourcesContent":["import React from \"react\";\nconst InsertLinkIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"var(--color-theme-600)\"\n ref={svgRef}\n {...props}\n >\n <path\n d=\"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1ZM8 13h8v-2H8v2Zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5Z\"\n fillRule=\"evenodd\"\n />\n </svg>\n )\n);\nInsertLinkIcon.displayName = \"InsertLinkIcon\";\nexport default InsertLinkIcon;\n"],"file":"InsertLink.js"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
13
|
+
|
|
14
|
+
var NoteIcon = /*#__PURE__*/_react.default.forwardRef(function (props, svgRef) {
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement("svg", _extends({
|
|
16
|
+
width: 24,
|
|
17
|
+
height: 24,
|
|
18
|
+
viewBox: "0 0 24 24",
|
|
19
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20
|
+
fill: "var(--color-theme-600)",
|
|
21
|
+
ref: svgRef
|
|
22
|
+
}, props), /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M19 5v9h-5v5H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10l6-6V5c0-1.1-.9-2-2-2Zm-7 10H7v-2h5v2Zm5-4H7V7h10v2Z",
|
|
24
|
+
fillRule: "evenodd"
|
|
25
|
+
}));
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
NoteIcon.displayName = "NoteIcon";
|
|
29
|
+
var _default = NoteIcon;
|
|
30
|
+
exports.default = _default;
|
|
31
|
+
//# sourceMappingURL=Note.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Icons/collection/Note.tsx"],"names":["NoteIcon","React","forwardRef","props","svgRef","displayName"],"mappings":";;;;;;;AAAA;;;;;;AACA,IAAMA,QAAQ,gBAAGC,eAAMC,UAAN,CACf,UAACC,KAAD,EAAuCC,MAAvC;AAAA,sBACE;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,OAAO,EAAC,WAHV;AAIE,IAAA,KAAK,EAAC,4BAJR;AAKE,IAAA,IAAI,EAAC,wBALP;AAME,IAAA,GAAG,EAAEA;AANP,KAOMD,KAPN,gBASE;AACE,IAAA,CAAC,EAAC,mHADJ;AAEE,IAAA,QAAQ,EAAC;AAFX,IATF,CADF;AAAA,CADe,CAAjB;;AAkBAH,QAAQ,CAACK,WAAT,GAAuB,UAAvB;eACeL,Q","sourcesContent":["import React from \"react\";\nconst NoteIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"var(--color-theme-600)\"\n ref={svgRef}\n {...props}\n >\n <path\n d=\"M19 5v9h-5v5H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10l6-6V5c0-1.1-.9-2-2-2Zm-7 10H7v-2h5v2Zm5-4H7V7h10v2Z\"\n fillRule=\"evenodd\"\n />\n </svg>\n )\n);\nNoteIcon.displayName = \"NoteIcon\";\nexport default NoteIcon;\n"],"file":"Note.js"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
13
|
+
|
|
14
|
+
var SettingsIcon = /*#__PURE__*/_react.default.forwardRef(function (props, svgRef) {
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement("svg", _extends({
|
|
16
|
+
width: 24,
|
|
17
|
+
height: 24,
|
|
18
|
+
viewBox: "0 0 24 24",
|
|
19
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20
|
+
fill: "var(--color-theme-600)",
|
|
21
|
+
ref: svgRef
|
|
22
|
+
}, props), /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M4.14 16H3a1 1 0 0 0 0 2h1.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H21a1 1 0 0 0 0-2h-9.14c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3ZM6 17c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2ZM16 3c-1.86 0-3.41 1.28-3.86 3H3a1 1 0 1 0 0 2h9.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H21a1 1 0 0 0 0-2h-1.14c-.45-1.72-2-3-3.86-3Zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Z",
|
|
24
|
+
fillRule: "evenodd"
|
|
25
|
+
}));
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
SettingsIcon.displayName = "SettingsIcon";
|
|
29
|
+
var _default = SettingsIcon;
|
|
30
|
+
exports.default = _default;
|
|
31
|
+
//# sourceMappingURL=Settings.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Icons/collection/Settings.tsx"],"names":["SettingsIcon","React","forwardRef","props","svgRef","displayName"],"mappings":";;;;;;;AAAA;;;;;;AACA,IAAMA,YAAY,gBAAGC,eAAMC,UAAN,CACnB,UAACC,KAAD,EAAuCC,MAAvC;AAAA,sBACE;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,OAAO,EAAC,WAHV;AAIE,IAAA,KAAK,EAAC,4BAJR;AAKE,IAAA,IAAI,EAAC,wBALP;AAME,IAAA,GAAG,EAAEA;AANP,KAOMD,KAPN,gBASE;AACE,IAAA,CAAC,EAAC,2XADJ;AAEE,IAAA,QAAQ,EAAC;AAFX,IATF,CADF;AAAA,CADmB,CAArB;;AAkBAH,YAAY,CAACK,WAAb,GAA2B,cAA3B;eACeL,Y","sourcesContent":["import React from \"react\";\nconst SettingsIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"var(--color-theme-600)\"\n ref={svgRef}\n {...props}\n >\n <path\n d=\"M4.14 16H3a1 1 0 0 0 0 2h1.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H21a1 1 0 0 0 0-2h-9.14c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3ZM6 17c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2ZM16 3c-1.86 0-3.41 1.28-3.86 3H3a1 1 0 1 0 0 2h9.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H21a1 1 0 0 0 0-2h-1.14c-.45-1.72-2-3-3.86-3Zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Z\"\n fillRule=\"evenodd\"\n />\n </svg>\n )\n);\nSettingsIcon.displayName = \"SettingsIcon\";\nexport default SettingsIcon;\n"],"file":"Settings.js"}
|
|
@@ -429,6 +429,12 @@ Object.defineProperty(exports, "InfoSmallIcon", {
|
|
|
429
429
|
return _InfoSmall.default;
|
|
430
430
|
}
|
|
431
431
|
});
|
|
432
|
+
Object.defineProperty(exports, "InsertLinkIcon", {
|
|
433
|
+
enumerable: true,
|
|
434
|
+
get: function get() {
|
|
435
|
+
return _InsertLink.default;
|
|
436
|
+
}
|
|
437
|
+
});
|
|
432
438
|
Object.defineProperty(exports, "IntegrationsIcon", {
|
|
433
439
|
enumerable: true,
|
|
434
440
|
get: function get() {
|
|
@@ -513,6 +519,12 @@ Object.defineProperty(exports, "NoteAddIcon", {
|
|
|
513
519
|
return _NoteAdd.default;
|
|
514
520
|
}
|
|
515
521
|
});
|
|
522
|
+
Object.defineProperty(exports, "NoteIcon", {
|
|
523
|
+
enumerable: true,
|
|
524
|
+
get: function get() {
|
|
525
|
+
return _Note.default;
|
|
526
|
+
}
|
|
527
|
+
});
|
|
516
528
|
Object.defineProperty(exports, "NotificationBellIcon", {
|
|
517
529
|
enumerable: true,
|
|
518
530
|
get: function get() {
|
|
@@ -669,6 +681,12 @@ Object.defineProperty(exports, "SendFilledIcon", {
|
|
|
669
681
|
return _SendFilled.default;
|
|
670
682
|
}
|
|
671
683
|
});
|
|
684
|
+
Object.defineProperty(exports, "SettingsIcon", {
|
|
685
|
+
enumerable: true,
|
|
686
|
+
get: function get() {
|
|
687
|
+
return _Settings.default;
|
|
688
|
+
}
|
|
689
|
+
});
|
|
672
690
|
Object.defineProperty(exports, "SortGeneralIcon", {
|
|
673
691
|
enumerable: true,
|
|
674
692
|
get: function get() {
|
|
@@ -920,6 +938,8 @@ var _InfoSmall = _interopRequireDefault(require("./InfoSmall"));
|
|
|
920
938
|
|
|
921
939
|
var _Info = _interopRequireDefault(require("./Info"));
|
|
922
940
|
|
|
941
|
+
var _InsertLink = _interopRequireDefault(require("./InsertLink"));
|
|
942
|
+
|
|
923
943
|
var _Integrations = _interopRequireDefault(require("./Integrations"));
|
|
924
944
|
|
|
925
945
|
var _Invoices = _interopRequireDefault(require("./Invoices"));
|
|
@@ -948,6 +968,8 @@ var _MyWork = _interopRequireDefault(require("./MyWork"));
|
|
|
948
968
|
|
|
949
969
|
var _NoteAdd = _interopRequireDefault(require("./NoteAdd"));
|
|
950
970
|
|
|
971
|
+
var _Note = _interopRequireDefault(require("./Note"));
|
|
972
|
+
|
|
951
973
|
var _NotificationBell = _interopRequireDefault(require("./NotificationBell"));
|
|
952
974
|
|
|
953
975
|
var _OpenExpanded = _interopRequireDefault(require("./OpenExpanded"));
|
|
@@ -1000,6 +1022,8 @@ var _SendBlank = _interopRequireDefault(require("./SendBlank"));
|
|
|
1000
1022
|
|
|
1001
1023
|
var _SendFilled = _interopRequireDefault(require("./SendFilled"));
|
|
1002
1024
|
|
|
1025
|
+
var _Settings = _interopRequireDefault(require("./Settings"));
|
|
1026
|
+
|
|
1003
1027
|
var _SortGeneral = _interopRequireDefault(require("./SortGeneral"));
|
|
1004
1028
|
|
|
1005
1029
|
var _SortIcon = _interopRequireDefault(require("./SortIcon"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Icons/collection/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Icons/collection/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as ActivityIcon } from \"./Activity\";\nexport { default as AddCrossTinyIcon } from \"./AddCrossTiny\";\nexport { default as AddCrossIcon } from \"./AddCross\";\nexport { default as ArrowBackIcon } from \"./ArrowBack\";\nexport { default as ArrowCollapseMultipleIcon } from \"./ArrowCollapseMultiple\";\nexport { default as ArrowExpandeMultipleIcon } from \"./ArrowExpandeMultiple\";\nexport { default as ArrowLeftBoxIcon } from \"./ArrowLeftBox\";\nexport { default as ArrowRefreshIcon } from \"./ArrowRefresh\";\nexport { default as AssignIcon } from \"./Assign\";\nexport { default as AttachmentIcon } from \"./Attachment\";\nexport { default as BackIcon } from \"./Back\";\nexport { default as BellOffSmallIcon } from \"./BellOffSmall\";\nexport { default as BellOffIcon } from \"./BellOff\";\nexport { default as BudgetAlertIcon } from \"./BudgetAlert\";\nexport { default as BudgetNoAlertIcon } from \"./BudgetNoAlert\";\nexport { default as CalendarAddXIcon } from \"./CalendarAddX\";\nexport { default as CalendarEmptyIcon } from \"./CalendarEmpty\";\nexport { default as CalendarIcon } from \"./Calendar\";\nexport { default as CancelCrossIcon } from \"./CancelCross\";\nexport { default as CaretLeftIcon } from \"./CaretLeft\";\nexport { default as CaretRightIcon } from \"./CaretRight\";\nexport { default as ChatIcon } from \"./Chat\";\nexport { default as CheckIcon } from \"./Check\";\nexport { default as CheckboxBlankTogglerIcon } from \"./CheckboxBlankToggler\";\nexport { default as CheckboxIcon } from \"./Checkbox\";\nexport { default as ChecklistSmallIcon } from \"./ChecklistSmall\";\nexport { default as ChecklistIcon } from \"./Checklist\";\nexport { default as CircleMultipleIcon } from \"./CircleMultiple\";\nexport { default as ClockAddIcon } from \"./ClockAdd\";\nexport { default as ClockSmallIcon } from \"./ClockSmall\";\nexport { default as ClockStopwatchSmallIcon } from \"./ClockStopwatchSmall\";\nexport { default as ClockStopwatchIcon } from \"./ClockStopwatch\";\nexport { default as ClockIcon } from \"./Clock\";\nexport { default as CloseSmallIcon } from \"./CloseSmall\";\nexport { default as CollapsIcon } from \"./CollapsIcon\";\nexport { default as CollapseAllIcon } from \"./CollapseAll\";\nexport { default as CollapseExpandSingleIcon } from \"./CollapseExpandSingle\";\nexport { default as CommentIcon } from \"./Comment\";\nexport { default as CommentsIcon } from \"./Comments\";\nexport { default as ComputerIcon } from \"./Computer\";\nexport { default as CrownBlankIcon } from \"./CrownBlank\";\nexport { default as CrownSelectedIcon } from \"./CrownSelected\";\nexport { default as DependencySmallIcon } from \"./DependencySmall\";\nexport { default as DependencyIcon } from \"./Dependency\";\nexport { default as DiscussionAddIcon } from \"./DiscussionAdd\";\nexport { default as DollarCheckmarkSmallIcon } from \"./DollarCheckmarkSmall\";\nexport { default as DollarCheckmarkIcon } from \"./DollarCheckmark\";\nexport { default as DollarClockSmallIcon } from \"./DollarClockSmall\";\nexport { default as DollarClockIcon } from \"./DollarClock\";\nexport { default as DollarOffSmallIcon } from \"./DollarOffSmall\";\nexport { default as DollarOffIcon } from \"./DollarOff\";\nexport { default as DollarSmallIcon } from \"./DollarSmall\";\nexport { default as DollarIcon } from \"./Dollar\";\nexport { default as DownloadIcon } from \"./Download\";\nexport { default as DriveIcon } from \"./Drive\";\nexport { default as DropboxIcon } from \"./Dropbox\";\nexport { default as DuplicateIcon } from \"./Duplicate\";\nexport { default as EditIcon } from \"./Edit\";\nexport { default as EmojiIcon } from \"./Emoji\";\nexport { default as EstimatesIcon } from \"./Estimates\";\nexport { default as ExpandAllIcon } from \"./ExpandAll\";\nexport { default as ExpenseAddIcon } from \"./ExpenseAdd\";\nexport { default as ExportIcon } from \"./Export\";\nexport { default as EyeOffSmallIcon } from \"./EyeOffSmall\";\nexport { default as EyeOffIcon } from \"./EyeOff\";\nexport { default as EyeSmallIcon } from \"./EyeSmall\";\nexport { default as EyeIcon } from \"./Eye\";\nexport { default as FilterIcon } from \"./Filter\";\nexport { default as HelpIcon } from \"./Help\";\nexport { default as InfoSmallIcon } from \"./InfoSmall\";\nexport { default as InfoIcon } from \"./Info\";\nexport { default as InsertLinkIcon } from \"./InsertLink\";\nexport { default as IntegrationsIcon } from \"./Integrations\";\nexport { default as InvoicesIcon } from \"./Invoices\";\nexport { default as LabelsIcon } from \"./Labels\";\nexport { default as LockSmallIcon } from \"./LockSmall\";\nexport { default as LockIcon } from \"./Lock\";\nexport { default as MarkerIcon } from \"./Marker\";\nexport { default as MenuNavIcon } from \"./MenuNavIcon\";\nexport { default as MessageAddIcon } from \"./MessageAdd\";\nexport { default as MessageSmallIcon } from \"./MessageSmall\";\nexport { default as MessageIcon } from \"./Message\";\nexport { default as MinusIcon } from \"./Minus\";\nexport { default as MoveTriggerIcon } from \"./MoveTrigger\";\nexport { default as MyWorkIcon } from \"./MyWork\";\nexport { default as NoteAddIcon } from \"./NoteAdd\";\nexport { default as NoteIcon } from \"./Note\";\nexport { default as NotificationBellIcon } from \"./NotificationBell\";\nexport { default as OpenExpandedIcon } from \"./OpenExpanded\";\nexport { default as OrderFirstIcon } from \"./OrderFirst\";\nexport { default as PaidSmallIcon } from \"./PaidSmall\";\nexport { default as PauseIcon } from \"./PauseIcon\";\nexport { default as PencilSmallIcon } from \"./PencilSmall\";\nexport { default as PencilIcon } from \"./Pencil\";\nexport { default as PendingPaymentSmallIcon } from \"./PendingPaymentSmall\";\nexport { default as PeopleIcon } from \"./People\";\nexport { default as PersonPlusIcon } from \"./PersonPlus\";\nexport { default as PersonIcon } from \"./Person\";\nexport { default as PlayIcon } from \"./PlayIcon\";\nexport { default as ProjectAddIcon } from \"./ProjectAdd\";\nexport { default as ProjectTemplateIcon } from \"./ProjectTemplate\";\nexport { default as ProjectsIcon } from \"./Projects\";\nexport { default as RadioBlankIcon } from \"./RadioBlank\";\nexport { default as RadioButtonIcon } from \"./RadioButton\";\nexport { default as RearangeIcon } from \"./Rearange\";\nexport { default as RearrangeSmallIcon } from \"./RearrangeSmall\";\nexport { default as RecurringCheckmarkSmallIcon } from \"./RecurringCheckmarkSmall\";\nexport { default as RecurringCheckmarkIcon } from \"./RecurringCheckmark\";\nexport { default as ReportTimeIcon } from \"./ReportTime\";\nexport { default as ReportsIcon } from \"./Reports\";\nexport { default as SearchIcon } from \"./Search\";\nexport { default as SendBlankIcon } from \"./SendBlank\";\nexport { default as SendFilledIcon } from \"./SendFilled\";\nexport { default as SettingsIcon } from \"./Settings\";\nexport { default as SortGeneralIcon } from \"./SortGeneral\";\nexport { default as SortIcon } from \"./SortIcon\";\nexport { default as StarIcon } from \"./Star\";\nexport { default as TaskAddIcon } from \"./TaskAdd\";\nexport { default as TaskListAddIcon } from \"./TaskListAdd\";\nexport { default as TextFormatGeneralAltIcon } from \"./TextFormatGeneralAlt\";\nexport { default as ThumbUpOutlineIcon } from \"./ThumbUpOutline\";\nexport { default as TrashIcon } from \"./Trash\";\nexport { default as TreeDotsIcon } from \"./TreeDots\";\nexport { default as ViewGridIcon } from \"./ViewGrid\";\nexport { default as ViewListIcon } from \"./ViewList\";\nexport { default as ViewTimelineIcon } from \"./ViewTimeline\";\nexport { default as VolumeHighIcon } from \"./VolumeHigh\";\nexport { default as VolumeOffIcon } from \"./VolumeOff\";\nexport { default as WarningTriangleSmallIcon } from \"./WarningTriangleSmall\";\nexport { default as WarningTriangleIcon } from \"./WarningTriangle\";\nexport { default as WarningIcon } from \"./Warning\";\nexport { default as WorkloadIcon } from \"./Workload\";\n"],"file":"index.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;AAgBlE,UAAU,cAAc;IAEtB,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;
|
|
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;AAgBlE,UAAU,cAAc;IAEtB,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,KAAK,GAAG,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,GAAG,kBAAkB,CAuL5D,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 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled"];
|
|
3
|
+
var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size"];
|
|
4
4
|
import React, { useCallback, useState, useEffect, useRef, useMemo } from "react";
|
|
5
5
|
import { RadioButton } from "../RadioButton";
|
|
6
6
|
import { Autocomplete } from "../Autocomplete";
|
|
@@ -25,6 +25,7 @@ export var ComboBox = function ComboBox(_ref) {
|
|
|
25
25
|
handleEmptyAction = _ref.handleEmptyAction,
|
|
26
26
|
_ref$disabled = _ref.disabled,
|
|
27
27
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
28
|
+
size = _ref.size,
|
|
28
29
|
prop = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
29
30
|
|
|
30
31
|
var selectedName = useMemo(function () {
|
|
@@ -139,11 +140,13 @@ export var ComboBox = function ComboBox(_ref) {
|
|
|
139
140
|
onKeyDown: handleOnKeyDown,
|
|
140
141
|
onChange: handleOnChange,
|
|
141
142
|
placeholder: placeholder,
|
|
142
|
-
disabled: disabled
|
|
143
|
+
disabled: disabled,
|
|
144
|
+
$size: size
|
|
143
145
|
}), !disabled ? /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(Button, {
|
|
144
146
|
onMouseDown: handleMouseDown,
|
|
145
147
|
onClick: handleDeselect,
|
|
146
|
-
variant: "text gray"
|
|
148
|
+
variant: "text gray",
|
|
149
|
+
size: size
|
|
147
150
|
}, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
|
|
148
151
|
$open: open
|
|
149
152
|
})) : null), !disabled ? /*#__PURE__*/React.createElement(Popper, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxWrapper","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","current","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBox,\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n /** Set selected items */\n selected?: string | number;\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (e: string | number) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n}\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 ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n\n const [open, setOpen] = useState(false);\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n },\n [open, selectedName]\n );\n\n const formRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n if (selectedValue) {\n onChange?.(selectedValue);\n setOpen(false);\n }\n },\n [onChange]\n );\n\n const onClose = useCallback(() => {\n setTimeout(() => {\n setOpen(false);\n }, 200);\n setValue(selectedName);\n }, [selectedName]);\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback((option, props) => {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n }, []);\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n onChange?.(\"\");\n setOpen(false);\n },\n [onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledComboBox className=\"c-combo-box\" $open={open} $loading={loading}>\n <StyledComboBoxWrapper\n onClick={onOpen}\n onFocus={onOpen}\n onBlur={onClose}\n ref={formRef}\n $loading={loading}\n >\n <StyledComboBoxInput\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n />\n {!disabled ? (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n ) : null}\n </StyledComboBoxWrapper>\n {!disabled ? (\n <Popper\n anchorEl={formRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={formRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type=\"single\"\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </StyledComboBox>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxWrapper","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","current","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBox,\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n /** Set selected items */\n selected?: string | number;\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (e: string | number) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n\n const [open, setOpen] = useState(false);\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n },\n [open, selectedName]\n );\n\n const formRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n if (selectedValue) {\n onChange?.(selectedValue);\n setOpen(false);\n }\n },\n [onChange]\n );\n\n const onClose = useCallback(() => {\n setTimeout(() => {\n setOpen(false);\n }, 200);\n setValue(selectedName);\n }, [selectedName]);\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback((option, props) => {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n }, []);\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n onChange?.(\"\");\n setOpen(false);\n },\n [onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledComboBox className=\"c-combo-box\" $open={open} $loading={loading}>\n <StyledComboBoxWrapper\n onClick={onOpen}\n onFocus={onOpen}\n onBlur={onClose}\n ref={formRef}\n $loading={loading}\n >\n <StyledComboBoxInput\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n $size={size}\n />\n {!disabled ? (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size={size}\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n ) : null}\n </StyledComboBoxWrapper>\n {!disabled ? (\n <Popper\n anchorEl={formRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={formRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type=\"single\"\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </StyledComboBox>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
|
|
@@ -11,7 +11,9 @@ export declare const StyledComboBoxCloseSmallIcon: import("styled-components").S
|
|
|
11
11
|
export declare const StyledComboBoxCollapseExpandSingleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {
|
|
12
12
|
$open?: boolean | undefined;
|
|
13
13
|
}, never>;
|
|
14
|
-
export declare const StyledComboBoxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>, any, {
|
|
14
|
+
export declare const StyledComboBoxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>, any, {
|
|
15
|
+
$size?: string | undefined;
|
|
16
|
+
}, never>;
|
|
15
17
|
export declare const StyledComboBoxList: import("styled-components").StyledComponent<"div", any, {
|
|
16
18
|
$width?: number | undefined;
|
|
17
19
|
}, never>;
|