@activecollab/components 2.0.289 → 2.0.292
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/Input/InputSelect.js +3 -1
- package/dist/cjs/components/Input/InputSelect.js.map +1 -1
- package/dist/cjs/components/Select/OptionGroup/OptionGroup.js +3 -2
- package/dist/cjs/components/Select/OptionGroup/OptionGroup.js.map +1 -1
- package/dist/cjs/components/Select/OptionGroup/Styles.js +3 -1
- package/dist/cjs/components/Select/OptionGroup/Styles.js.map +1 -1
- package/dist/esm/components/Input/InputSelect.js +3 -1
- package/dist/esm/components/Input/InputSelect.js.map +1 -1
- package/dist/esm/components/Select/OptionGroup/OptionGroup.d.ts.map +1 -1
- package/dist/esm/components/Select/OptionGroup/OptionGroup.js +3 -2
- package/dist/esm/components/Select/OptionGroup/OptionGroup.js.map +1 -1
- package/dist/esm/components/Select/OptionGroup/Styles.d.ts +3 -1
- package/dist/esm/components/Select/OptionGroup/Styles.d.ts.map +1 -1
- package/dist/esm/components/Select/OptionGroup/Styles.js +1 -1
- package/dist/esm/components/Select/OptionGroup/Styles.js.map +1 -1
- package/dist/index.js +9 -4
- 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
|
@@ -31,7 +31,9 @@ var InputSelect = exports.InputSelect = function InputSelect(_ref) {
|
|
|
31
31
|
onChange: onChange,
|
|
32
32
|
forceCloseMenu: true,
|
|
33
33
|
disableSearch: !search,
|
|
34
|
-
target: /*#__PURE__*/_react.default.createElement(_StyledStyledButton,
|
|
34
|
+
target: /*#__PURE__*/_react.default.createElement(_StyledStyledButton, {
|
|
35
|
+
type: "button"
|
|
36
|
+
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledInputSelectTrigger, {
|
|
35
37
|
$disabled: disabled,
|
|
36
38
|
$size: size
|
|
37
39
|
}, selectedLabel ? selectedLabel : selected, size === "big" ? /*#__PURE__*/_react.default.createElement(_Icons.ArrowDownIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.js","names":["_react","_interopRequireDefault","require","_Styles","_Icons","_Select","_Styles2","e","__esModule","default","InputSelect","exports","_ref","onChange","size","selected","options","_ref$search","search","_ref$disabled","disabled","_ref$disabledInternal","disabledInternalSort","_ref$keepSameOptionsO","keepSameOptionsOrder","selectedLabel","renderOption","filterCriteria","createElement","Select","forceCloseMenu","disableSearch","target","_StyledStyledButton","StyledInputSelectTrigger","$disabled","$size","ArrowDownIcon","fill","ArrowDownSmallIcon","_styledComponents","StyledButton","withConfig","displayName","componentId"],"sources":["../../../../src/components/Input/InputSelect.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport { StyledInputSelectTrigger } from \"./Styles\";\nimport { ArrowDownIcon, ArrowDownSmallIcon } from \"../Icons\";\nimport { ElementWithRef, IOptionItemProps, Select } from \"../Select\";\nimport { StyledButton } from \"../Trigger/Styles\";\n\nexport interface InputSelectProps {\n onChange: (val: string | number | (string | number)[]) => void;\n size: string;\n selected: string;\n options: IOptionItemProps[];\n disabled?: boolean;\n search?: boolean;\n // @ToDo: Fix this\n disabledInternalSort?: boolean;\n keepSameOptionsOrder?: boolean;\n selectedLabel?: ReactNode;\n /** Set select target element */\n target?: ElementWithRef<Element>;\n /** Render option */\n renderOption?: (\n option: Record<string, ReactNode>,\n data: Record<string, unknown>\n ) => string | ReactElement;\n /** Custom filter function for additional filtering criteria */\n filterCriteria?: (option: IOptionItemProps, filter: string) => boolean;\n}\n\nexport const InputSelect: React.FC<InputSelectProps> = ({\n onChange,\n size,\n selected,\n options,\n search = false,\n disabled = false,\n disabledInternalSort = true,\n keepSameOptionsOrder = true,\n selectedLabel,\n renderOption,\n filterCriteria,\n}) => {\n return (\n <Select\n onChange={onChange}\n forceCloseMenu\n disableSearch={!search}\n target={\n <StyledButton css=\"flex-shrink:0\">\n <StyledInputSelectTrigger $disabled={disabled} $size={size}>\n {selectedLabel ? selectedLabel : selected}\n {size === \"big\" ? (\n <ArrowDownIcon fill=\"var(--color-theme-700)\" />\n ) : (\n <ArrowDownSmallIcon fill=\"var(--color-theme-700)\" />\n )}\n </StyledInputSelectTrigger>\n </StyledButton>\n }\n options={options}\n disabledInternalSort={disabledInternalSort}\n keepSameOptionsOrder={keepSameOptionsOrder}\n selected={selected}\n renderOption={renderOption}\n filterCriteria={filterCriteria}\n />\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAiD,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAwB1C,IAAMG,WAAuC,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAA1CA,WAAuCA,CAAAE,IAAA,EAY9C;EAAA,IAXJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,WAAA,GAAAL,IAAA,CACPM,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,aAAA,GAAAP,IAAA,CACdQ,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,qBAAA,GAAAT,IAAA,CAChBU,oBAAoB;IAApBA,oBAAoB,GAAAD,qBAAA,cAAG,IAAI,GAAAA,qBAAA;IAAAE,qBAAA,GAAAX,IAAA,CAC3BY,oBAAoB;IAApBA,oBAAoB,GAAAD,qBAAA,cAAG,IAAI,GAAAA,qBAAA;IAC3BE,aAAa,GAAAb,IAAA,CAAba,aAAa;IACbC,YAAY,GAAAd,IAAA,CAAZc,YAAY;IACZC,cAAc,GAAAf,IAAA,CAAde,cAAc;EAEd,oBACE3B,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAwB,MAAM;IACLhB,QAAQ,EAAEA,QAAS;IACnBiB,cAAc;IACdC,aAAa,EAAE,CAACb,MAAO;IACvBc,MAAM,eACJhC,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAAAK,mBAAA,
|
|
1
|
+
{"version":3,"file":"InputSelect.js","names":["_react","_interopRequireDefault","require","_Styles","_Icons","_Select","_Styles2","e","__esModule","default","InputSelect","exports","_ref","onChange","size","selected","options","_ref$search","search","_ref$disabled","disabled","_ref$disabledInternal","disabledInternalSort","_ref$keepSameOptionsO","keepSameOptionsOrder","selectedLabel","renderOption","filterCriteria","createElement","Select","forceCloseMenu","disableSearch","target","_StyledStyledButton","type","StyledInputSelectTrigger","$disabled","$size","ArrowDownIcon","fill","ArrowDownSmallIcon","_styledComponents","StyledButton","withConfig","displayName","componentId"],"sources":["../../../../src/components/Input/InputSelect.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport { StyledInputSelectTrigger } from \"./Styles\";\nimport { ArrowDownIcon, ArrowDownSmallIcon } from \"../Icons\";\nimport { ElementWithRef, IOptionItemProps, Select } from \"../Select\";\nimport { StyledButton } from \"../Trigger/Styles\";\n\nexport interface InputSelectProps {\n onChange: (val: string | number | (string | number)[]) => void;\n size: string;\n selected: string;\n options: IOptionItemProps[];\n disabled?: boolean;\n search?: boolean;\n // @ToDo: Fix this\n disabledInternalSort?: boolean;\n keepSameOptionsOrder?: boolean;\n selectedLabel?: ReactNode;\n /** Set select target element */\n target?: ElementWithRef<Element>;\n /** Render option */\n renderOption?: (\n option: Record<string, ReactNode>,\n data: Record<string, unknown>\n ) => string | ReactElement;\n /** Custom filter function for additional filtering criteria */\n filterCriteria?: (option: IOptionItemProps, filter: string) => boolean;\n}\n\nexport const InputSelect: React.FC<InputSelectProps> = ({\n onChange,\n size,\n selected,\n options,\n search = false,\n disabled = false,\n disabledInternalSort = true,\n keepSameOptionsOrder = true,\n selectedLabel,\n renderOption,\n filterCriteria,\n}) => {\n return (\n <Select\n onChange={onChange}\n forceCloseMenu\n disableSearch={!search}\n target={\n <StyledButton type=\"button\" css=\"flex-shrink:0\">\n <StyledInputSelectTrigger $disabled={disabled} $size={size}>\n {selectedLabel ? selectedLabel : selected}\n {size === \"big\" ? (\n <ArrowDownIcon fill=\"var(--color-theme-700)\" />\n ) : (\n <ArrowDownSmallIcon fill=\"var(--color-theme-700)\" />\n )}\n </StyledInputSelectTrigger>\n </StyledButton>\n }\n options={options}\n disabledInternalSort={disabledInternalSort}\n keepSameOptionsOrder={keepSameOptionsOrder}\n selected={selected}\n renderOption={renderOption}\n filterCriteria={filterCriteria}\n />\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAiD,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAwB1C,IAAMG,WAAuC,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAA1CA,WAAuCA,CAAAE,IAAA,EAY9C;EAAA,IAXJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,WAAA,GAAAL,IAAA,CACPM,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,aAAA,GAAAP,IAAA,CACdQ,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,qBAAA,GAAAT,IAAA,CAChBU,oBAAoB;IAApBA,oBAAoB,GAAAD,qBAAA,cAAG,IAAI,GAAAA,qBAAA;IAAAE,qBAAA,GAAAX,IAAA,CAC3BY,oBAAoB;IAApBA,oBAAoB,GAAAD,qBAAA,cAAG,IAAI,GAAAA,qBAAA;IAC3BE,aAAa,GAAAb,IAAA,CAAba,aAAa;IACbC,YAAY,GAAAd,IAAA,CAAZc,YAAY;IACZC,cAAc,GAAAf,IAAA,CAAde,cAAc;EAEd,oBACE3B,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAwB,MAAM;IACLhB,QAAQ,EAAEA,QAAS;IACnBiB,cAAc;IACdC,aAAa,EAAE,CAACb,MAAO;IACvBc,MAAM,eACJhC,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAAAK,mBAAA;MAAcC,IAAI,EAAC;IAAQ,gBACzBlC,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACzB,OAAA,CAAAgC,wBAAwB;MAACC,SAAS,EAAEhB,QAAS;MAACiB,KAAK,EAAEvB;IAAK,GACxDW,aAAa,GAAGA,aAAa,GAAGV,QAAQ,EACxCD,IAAI,KAAK,KAAK,gBACbd,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACxB,MAAA,CAAAkC,aAAa;MAACC,IAAI,EAAC;IAAwB,CAAE,CAAC,gBAE/CvC,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACxB,MAAA,CAAAoC,kBAAkB;MAACD,IAAI,EAAC;IAAwB,CAAE,CAE7B,CACd,CACf;IACDvB,OAAO,EAAEA,OAAQ;IACjBM,oBAAoB,EAAEA,oBAAqB;IAC3CE,oBAAoB,EAAEA,oBAAqB;IAC3CT,QAAQ,EAAEA,QAAS;IACnBW,YAAY,EAAEA,YAAa;IAC3BC,cAAc,EAAEA;EAAe,CAChC,CAAC;AAEN,CAAC;AAAC,IAAAM,mBAAA,OAAAQ,iBAAA,CAAAhC,OAAA,EAAAH,QAAA,CAAAoC,YAAA,EAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA","ignoreList":[]}
|
|
@@ -53,7 +53,7 @@ var OptionGroup = exports.OptionGroup = function OptionGroup(_ref) {
|
|
|
53
53
|
var handleClick = (0, _react.useCallback)(function (e) {
|
|
54
54
|
e.stopPropagation();
|
|
55
55
|
e.preventDefault();
|
|
56
|
-
if (onChange) {
|
|
56
|
+
if (onChange && type !== "single") {
|
|
57
57
|
if (isAllOptionsChecked) {
|
|
58
58
|
onChange(checked.filter(function (i) {
|
|
59
59
|
return allOptionValues.includes(i) === false;
|
|
@@ -66,9 +66,10 @@ var OptionGroup = exports.OptionGroup = function OptionGroup(_ref) {
|
|
|
66
66
|
onChange(unique);
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
}, [allOptionValues, checked, isAllOptionsChecked, onChange]);
|
|
69
|
+
}, [allOptionValues, checked, isAllOptionsChecked, onChange, type]);
|
|
70
70
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroupLi, {
|
|
71
71
|
key: id,
|
|
72
|
+
type: type,
|
|
72
73
|
className: (0, _classnames.default)("c-option-group", optionGroupClassName),
|
|
73
74
|
onClick: handleClick
|
|
74
75
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionGroup.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","OptionGroup","exports","_ref","id","name","options","type","hover","checked","onChange","setHover","optionGroupClassName","_ref$mixedOptions","mixedOptions","useEffect","_document$getElementB","document","getElementById","concat","focus","isAllOptionsChecked","useMemo","every","option","includes","handleHover","useCallback","undefined","allOptionValues","map","isMixed","some","item","handleClick","stopPropagation","preventDefault","filter","values","unique","pos","indexOf","createElement","StyledOptionGroupLi","key","className","classNames","onClick","StyledOptionGroup","StyledOptionGroupOption","onMouseEnter","StyledOptionGroupHeader","StyledOptionGroupHeaderName","weight","Checkbox","mixed","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC, ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledOptionGroup,\n StyledOptionGroupHeader,\n StyledOptionGroupOption,\n StyledOptionGroupLi,\n StyledOptionGroupHeaderName,\n} from \"./Styles\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport { IOptionItemProps } from \"../Option/Option\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n /** Options items list */\n options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n /** Select type: single or multiple */\n type?: \"single\" | \"multiple\";\n /** Value of hovered element */\n hover?: number | string | null;\n /** Filter for labels */\n filter?: string;\n /** Checked values */\n checked: (string | number)[];\n /** Mixed options values */\n mixedOptions: (string | number)[];\n /** onChange callback */\n onChange?: (e: (string | number)[]) => void;\n /** Set value of hovered element */\n setHover?: (e: number | string | undefined) => void;\n /** Render function */\n renderOptions?: (item: IOptionItemProps, index: number) => ReactNode;\n /** Value that represent class names */\n optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n id,\n name,\n options,\n type,\n hover,\n checked,\n onChange,\n setHover,\n optionGroupClassName,\n mixedOptions = [],\n}) => {\n useEffect(() => {\n if (hover === id && type !== \"single\") {\n document.getElementById(`${id}`)?.focus();\n }\n }, [hover, type, id]);\n\n const isAllOptionsChecked = useMemo(\n () => options.every((option) => checked.includes(option.id)),\n [options, checked]\n );\n\n const handleHover = useCallback(() => {\n if (setHover) {\n setHover(type === \"single\" ? undefined : id);\n }\n }, [setHover, type, id]);\n\n const allOptionValues = useMemo(\n () => options.map((option) => option.id),\n [options]\n );\n\n const isMixed: boolean = useMemo(() => {\n return (\n (options.some((option) => checked.includes(option.id)) ||\n mixedOptions.some((item) => allOptionValues.includes(item))) &&\n !isAllOptionsChecked\n );\n }, [allOptionValues, checked, isAllOptionsChecked, mixedOptions, options]);\n\n const handleClick = useCallback(\n (e) => {\n e.stopPropagation();\n e.preventDefault();\n if (onChange) {\n if (isAllOptionsChecked) {\n onChange(\n checked.filter((i) => allOptionValues.includes(i) === false)\n );\n } else {\n const values = [...checked, ...allOptionValues];\n const unique = values.filter((item, pos) => {\n return values.indexOf(item) === pos;\n });\n onChange(unique);\n }\n }\n },\n [allOptionValues, checked, isAllOptionsChecked, onChange]\n );\n\n return (\n <StyledOptionGroupLi\n key={id}\n className={classNames(\"c-option-group\", optionGroupClassName)}\n onClick={handleClick}\n >\n <StyledOptionGroup key={id}>\n <StyledOptionGroupOption\n onMouseEnter={handleHover}\n hover={hover === id && type === \"multiple\"}\n >\n <StyledOptionGroupHeader>\n <StyledOptionGroupHeaderName weight=\"bold\">\n {name}\n </StyledOptionGroupHeaderName>\n {type === \"multiple\" && (\n <Checkbox\n id={`${id}`}\n checked={isAllOptionsChecked}\n mixed={isMixed}\n onChange={handleClick}\n type=\"checkbox\"\n />\n )}\n </StyledOptionGroupHeader>\n </StyledOptionGroupOption>\n </StyledOptionGroup>\n </StyledOptionGroupLi>\n );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"OptionGroup.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","OptionGroup","exports","_ref","id","name","options","type","hover","checked","onChange","setHover","optionGroupClassName","_ref$mixedOptions","mixedOptions","useEffect","_document$getElementB","document","getElementById","concat","focus","isAllOptionsChecked","useMemo","every","option","includes","handleHover","useCallback","undefined","allOptionValues","map","isMixed","some","item","handleClick","stopPropagation","preventDefault","filter","values","unique","pos","indexOf","createElement","StyledOptionGroupLi","key","className","classNames","onClick","StyledOptionGroup","StyledOptionGroupOption","onMouseEnter","StyledOptionGroupHeader","StyledOptionGroupHeaderName","weight","Checkbox","mixed","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC, ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledOptionGroup,\n StyledOptionGroupHeader,\n StyledOptionGroupOption,\n StyledOptionGroupLi,\n StyledOptionGroupHeaderName,\n} from \"./Styles\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport { IOptionItemProps } from \"../Option/Option\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n /** Options items list */\n options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n /** Select type: single or multiple */\n type?: \"single\" | \"multiple\";\n /** Value of hovered element */\n hover?: number | string | null;\n /** Filter for labels */\n filter?: string;\n /** Checked values */\n checked: (string | number)[];\n /** Mixed options values */\n mixedOptions: (string | number)[];\n /** onChange callback */\n onChange?: (e: (string | number)[]) => void;\n /** Set value of hovered element */\n setHover?: (e: number | string | undefined) => void;\n /** Render function */\n renderOptions?: (item: IOptionItemProps, index: number) => ReactNode;\n /** Value that represent class names */\n optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n id,\n name,\n options,\n type,\n hover,\n checked,\n onChange,\n setHover,\n optionGroupClassName,\n mixedOptions = [],\n}) => {\n useEffect(() => {\n if (hover === id && type !== \"single\") {\n document.getElementById(`${id}`)?.focus();\n }\n }, [hover, type, id]);\n\n const isAllOptionsChecked = useMemo(\n () => options.every((option) => checked.includes(option.id)),\n [options, checked]\n );\n\n const handleHover = useCallback(() => {\n if (setHover) {\n setHover(type === \"single\" ? undefined : id);\n }\n }, [setHover, type, id]);\n\n const allOptionValues = useMemo(\n () => options.map((option) => option.id),\n [options]\n );\n\n const isMixed: boolean = useMemo(() => {\n return (\n (options.some((option) => checked.includes(option.id)) ||\n mixedOptions.some((item) => allOptionValues.includes(item))) &&\n !isAllOptionsChecked\n );\n }, [allOptionValues, checked, isAllOptionsChecked, mixedOptions, options]);\n\n const handleClick = useCallback(\n (e) => {\n e.stopPropagation();\n e.preventDefault();\n if (onChange && type !== \"single\") {\n if (isAllOptionsChecked) {\n onChange(\n checked.filter((i) => allOptionValues.includes(i) === false)\n );\n } else {\n const values = [...checked, ...allOptionValues];\n const unique = values.filter((item, pos) => {\n return values.indexOf(item) === pos;\n });\n onChange(unique);\n }\n }\n },\n [allOptionValues, checked, isAllOptionsChecked, onChange, type]\n );\n\n return (\n <StyledOptionGroupLi\n key={id}\n type={type}\n className={classNames(\"c-option-group\", optionGroupClassName)}\n onClick={handleClick}\n >\n <StyledOptionGroup key={id}>\n <StyledOptionGroupOption\n onMouseEnter={handleHover}\n hover={hover === id && type === \"multiple\"}\n >\n <StyledOptionGroupHeader>\n <StyledOptionGroupHeaderName weight=\"bold\">\n {name}\n </StyledOptionGroupHeaderName>\n {type === \"multiple\" && (\n <Checkbox\n id={`${id}`}\n checked={isAllOptionsChecked}\n mixed={isMixed}\n onChange={handleClick}\n type=\"checkbox\"\n />\n )}\n </StyledOptionGroupHeader>\n </StyledOptionGroupOption>\n </StyledOptionGroup>\n </StyledOptionGroupLi>\n );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,7 +12,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
12
12
|
var StyledOptionGroupLi = exports.StyledOptionGroupLi = _styledComponents.default.li.withConfig({
|
|
13
13
|
displayName: "Styles__StyledOptionGroupLi",
|
|
14
14
|
componentId: "sc-16v5afu-0"
|
|
15
|
-
})(["flex-direction:column;cursor:
|
|
15
|
+
})(["flex-direction:column;cursor:", ";"], function (props) {
|
|
16
|
+
return props.type === "single" ? "default" : "pointer";
|
|
17
|
+
});
|
|
16
18
|
var StyledOptionGroup = exports.StyledOptionGroup = _styledComponents.default.div.withConfig({
|
|
17
19
|
displayName: "Styles__StyledOptionGroup",
|
|
18
20
|
componentId: "sc-16v5afu-1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_Typography","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledOptionGroupLi","exports","styled","li","withConfig","displayName","componentId","StyledOptionGroup","div","FontStyle","BoxSizingStyle","StyledOptionGroupHeader","StyledOptionGroupHeaderName","Body2","StyledOptionGroupOption","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_Typography","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledOptionGroupLi","exports","styled","li","withConfig","displayName","componentId","props","type","StyledOptionGroup","div","FontStyle","BoxSizingStyle","StyledOptionGroupHeader","StyledOptionGroupHeaderName","Body2","StyledOptionGroupOption","hover","css"],"sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { Body2 } from \"../../Typography\";\n\nexport const StyledOptionGroupLi = styled.li<{ type?: \"single\" | \"multiple\" }>`\n flex-direction: column;\n cursor: ${(props) => (props.type === \"single\" ? \"default\" : \"pointer\")};\n`;\nexport const StyledOptionGroup = styled.div`\n ${tw`tw-select-none`}\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledOptionGroup.displayName = \"StyledOptionGroup\";\n\nexport const StyledOptionGroupHeader = styled.div`\n height: 28px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 16px;\n margin: 6px 0;\n * {\n margin: auto 0;\n }\n`;\n\nStyledOptionGroupHeader.displayName = \"StyledOptionGroupHeader\";\n\nexport const StyledOptionGroupHeaderName = styled(Body2)`\n padding-right: 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nStyledOptionGroupHeaderName.displayName = \"StyledOptionGroupHeaderName\";\n\nexport const StyledOptionGroupOption = styled.div<{ hover?: boolean }>`\n ${(props) =>\n props.hover &&\n css`\n background-color: var(--color-theme-200);\n `}\n`;\n\nStyledOptionGroupOption.displayName = \"StyledOptionGroupOption\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAyC,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,wBAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElC,IAAMmB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAEhC,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,CACvE;AACM,IAAMC,iBAAiB,GAAAR,OAAA,CAAAQ,iBAAA,GAAGP,yBAAM,CAACQ,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBACrC;EAAA;AAAe,CAAC,EAClBK,oBAAS,EACTC,8BAAc,CACjB;AAEDH,iBAAiB,CAACJ,WAAW,GAAG,mBAAmB;AAE5C,IAAMQ,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACQ,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+HAUhD;AAEDO,uBAAuB,CAACR,WAAW,GAAG,yBAAyB;AAExD,IAAMS,2BAA2B,GAAAb,OAAA,CAAAa,2BAAA,GAAG,IAAAZ,yBAAM,EAACa,iBAAK,CAAC,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qFAKvD;AAEDQ,2BAA2B,CAACT,WAAW,GAAG,6BAA6B;AAEhE,IAAMW,uBAAuB,GAAAf,OAAA,CAAAe,uBAAA,GAAGd,yBAAM,CAACQ,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC7C,UAACC,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,QACXC,qBAAG,+CAEF;AAAA,EACJ;AAEDF,uBAAuB,CAACX,WAAW,GAAG,yBAAyB","ignoreList":[]}
|
|
@@ -22,7 +22,9 @@ export const InputSelect = _ref => {
|
|
|
22
22
|
onChange: onChange,
|
|
23
23
|
forceCloseMenu: true,
|
|
24
24
|
disableSearch: !search,
|
|
25
|
-
target: /*#__PURE__*/React.createElement(_StyledStyledButton,
|
|
25
|
+
target: /*#__PURE__*/React.createElement(_StyledStyledButton, {
|
|
26
|
+
type: "button"
|
|
27
|
+
}, /*#__PURE__*/React.createElement(StyledInputSelectTrigger, {
|
|
26
28
|
$disabled: disabled,
|
|
27
29
|
$size: size
|
|
28
30
|
}, selectedLabel ? selectedLabel : selected, size === "big" ? /*#__PURE__*/React.createElement(ArrowDownIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.js","names":["React","StyledInputSelectTrigger","ArrowDownIcon","ArrowDownSmallIcon","Select","StyledButton","InputSelect","_ref","onChange","size","selected","options","search","disabled","disabledInternalSort","keepSameOptionsOrder","selectedLabel","renderOption","filterCriteria","createElement","forceCloseMenu","disableSearch","target","_StyledStyledButton","$disabled","$size","fill","_styled","withConfig","displayName","componentId"],"sources":["../../../../src/components/Input/InputSelect.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport { StyledInputSelectTrigger } from \"./Styles\";\nimport { ArrowDownIcon, ArrowDownSmallIcon } from \"../Icons\";\nimport { ElementWithRef, IOptionItemProps, Select } from \"../Select\";\nimport { StyledButton } from \"../Trigger/Styles\";\n\nexport interface InputSelectProps {\n onChange: (val: string | number | (string | number)[]) => void;\n size: string;\n selected: string;\n options: IOptionItemProps[];\n disabled?: boolean;\n search?: boolean;\n // @ToDo: Fix this\n disabledInternalSort?: boolean;\n keepSameOptionsOrder?: boolean;\n selectedLabel?: ReactNode;\n /** Set select target element */\n target?: ElementWithRef<Element>;\n /** Render option */\n renderOption?: (\n option: Record<string, ReactNode>,\n data: Record<string, unknown>\n ) => string | ReactElement;\n /** Custom filter function for additional filtering criteria */\n filterCriteria?: (option: IOptionItemProps, filter: string) => boolean;\n}\n\nexport const InputSelect: React.FC<InputSelectProps> = ({\n onChange,\n size,\n selected,\n options,\n search = false,\n disabled = false,\n disabledInternalSort = true,\n keepSameOptionsOrder = true,\n selectedLabel,\n renderOption,\n filterCriteria,\n}) => {\n return (\n <Select\n onChange={onChange}\n forceCloseMenu\n disableSearch={!search}\n target={\n <StyledButton css=\"flex-shrink:0\">\n <StyledInputSelectTrigger $disabled={disabled} $size={size}>\n {selectedLabel ? selectedLabel : selected}\n {size === \"big\" ? (\n <ArrowDownIcon fill=\"var(--color-theme-700)\" />\n ) : (\n <ArrowDownSmallIcon fill=\"var(--color-theme-700)\" />\n )}\n </StyledInputSelectTrigger>\n </StyledButton>\n }\n options={options}\n disabledInternalSort={disabledInternalSort}\n keepSameOptionsOrder={keepSameOptionsOrder}\n selected={selected}\n renderOption={renderOption}\n filterCriteria={filterCriteria}\n />\n );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAmC,OAAO;AAEtD,SAASC,wBAAwB,QAAQ,UAAU;AACnD,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,UAAU;AAC5D,SAA2CC,MAAM,QAAQ,WAAW;AACpE,SAASC,YAAY,QAAQ,mBAAmB;AAwBhD,OAAO,MAAMC,WAAuC,GAAGC,IAAA,IAYjD;EAAA,IAZkD;IACtDC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,OAAO;IACPC,MAAM,GAAG,KAAK;IACdC,QAAQ,GAAG,KAAK;IAChBC,oBAAoB,GAAG,IAAI;IAC3BC,oBAAoB,GAAG,IAAI;IAC3BC,aAAa;IACbC,YAAY;IACZC;EACF,CAAC,GAAAX,IAAA;EACC,oBACEP,KAAA,CAAAmB,aAAA,CAACf,MAAM;IACLI,QAAQ,EAAEA,QAAS;IACnBY,cAAc;IACdC,aAAa,EAAE,CAACT,MAAO;IACvBU,MAAM,eACJtB,KAAA,CAAAmB,aAAA,CAAAI,mBAAA,
|
|
1
|
+
{"version":3,"file":"InputSelect.js","names":["React","StyledInputSelectTrigger","ArrowDownIcon","ArrowDownSmallIcon","Select","StyledButton","InputSelect","_ref","onChange","size","selected","options","search","disabled","disabledInternalSort","keepSameOptionsOrder","selectedLabel","renderOption","filterCriteria","createElement","forceCloseMenu","disableSearch","target","_StyledStyledButton","type","$disabled","$size","fill","_styled","withConfig","displayName","componentId"],"sources":["../../../../src/components/Input/InputSelect.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport { StyledInputSelectTrigger } from \"./Styles\";\nimport { ArrowDownIcon, ArrowDownSmallIcon } from \"../Icons\";\nimport { ElementWithRef, IOptionItemProps, Select } from \"../Select\";\nimport { StyledButton } from \"../Trigger/Styles\";\n\nexport interface InputSelectProps {\n onChange: (val: string | number | (string | number)[]) => void;\n size: string;\n selected: string;\n options: IOptionItemProps[];\n disabled?: boolean;\n search?: boolean;\n // @ToDo: Fix this\n disabledInternalSort?: boolean;\n keepSameOptionsOrder?: boolean;\n selectedLabel?: ReactNode;\n /** Set select target element */\n target?: ElementWithRef<Element>;\n /** Render option */\n renderOption?: (\n option: Record<string, ReactNode>,\n data: Record<string, unknown>\n ) => string | ReactElement;\n /** Custom filter function for additional filtering criteria */\n filterCriteria?: (option: IOptionItemProps, filter: string) => boolean;\n}\n\nexport const InputSelect: React.FC<InputSelectProps> = ({\n onChange,\n size,\n selected,\n options,\n search = false,\n disabled = false,\n disabledInternalSort = true,\n keepSameOptionsOrder = true,\n selectedLabel,\n renderOption,\n filterCriteria,\n}) => {\n return (\n <Select\n onChange={onChange}\n forceCloseMenu\n disableSearch={!search}\n target={\n <StyledButton type=\"button\" css=\"flex-shrink:0\">\n <StyledInputSelectTrigger $disabled={disabled} $size={size}>\n {selectedLabel ? selectedLabel : selected}\n {size === \"big\" ? (\n <ArrowDownIcon fill=\"var(--color-theme-700)\" />\n ) : (\n <ArrowDownSmallIcon fill=\"var(--color-theme-700)\" />\n )}\n </StyledInputSelectTrigger>\n </StyledButton>\n }\n options={options}\n disabledInternalSort={disabledInternalSort}\n keepSameOptionsOrder={keepSameOptionsOrder}\n selected={selected}\n renderOption={renderOption}\n filterCriteria={filterCriteria}\n />\n );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAmC,OAAO;AAEtD,SAASC,wBAAwB,QAAQ,UAAU;AACnD,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,UAAU;AAC5D,SAA2CC,MAAM,QAAQ,WAAW;AACpE,SAASC,YAAY,QAAQ,mBAAmB;AAwBhD,OAAO,MAAMC,WAAuC,GAAGC,IAAA,IAYjD;EAAA,IAZkD;IACtDC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,OAAO;IACPC,MAAM,GAAG,KAAK;IACdC,QAAQ,GAAG,KAAK;IAChBC,oBAAoB,GAAG,IAAI;IAC3BC,oBAAoB,GAAG,IAAI;IAC3BC,aAAa;IACbC,YAAY;IACZC;EACF,CAAC,GAAAX,IAAA;EACC,oBACEP,KAAA,CAAAmB,aAAA,CAACf,MAAM;IACLI,QAAQ,EAAEA,QAAS;IACnBY,cAAc;IACdC,aAAa,EAAE,CAACT,MAAO;IACvBU,MAAM,eACJtB,KAAA,CAAAmB,aAAA,CAAAI,mBAAA;MAAcC,IAAI,EAAC;IAAQ,gBACzBxB,KAAA,CAAAmB,aAAA,CAAClB,wBAAwB;MAACwB,SAAS,EAAEZ,QAAS;MAACa,KAAK,EAAEjB;IAAK,GACxDO,aAAa,GAAGA,aAAa,GAAGN,QAAQ,EACxCD,IAAI,KAAK,KAAK,gBACbT,KAAA,CAAAmB,aAAA,CAACjB,aAAa;MAACyB,IAAI,EAAC;IAAwB,CAAE,CAAC,gBAE/C3B,KAAA,CAAAmB,aAAA,CAAChB,kBAAkB;MAACwB,IAAI,EAAC;IAAwB,CAAE,CAE7B,CACd,CACf;IACDhB,OAAO,EAAEA,OAAQ;IACjBG,oBAAoB,EAAEA,oBAAqB;IAC3CC,oBAAoB,EAAEA,oBAAqB;IAC3CL,QAAQ,EAAEA,QAAS;IACnBO,YAAY,EAAEA,YAAa;IAC3BC,cAAc,EAAEA;EAAe,CAChC,CAAC;AAEN,CAAC;AAAC,IAAAK,mBAAA,GAAAK,OAAA,CAAAvB,YAAA,EAAAwB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmC,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAY9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,UAAU,2BAA2B;IACnC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAClC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACrE,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B,iBAAiB,GAAG,2BAA2B,
|
|
1
|
+
{"version":3,"file":"OptionGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmC,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAY9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,UAAU,2BAA2B;IACnC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAClC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACrE,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B,iBAAiB,GAAG,2BAA2B,CA8FhD,CAAC"}
|
|
@@ -34,7 +34,7 @@ export const OptionGroup = _ref => {
|
|
|
34
34
|
const handleClick = useCallback(e => {
|
|
35
35
|
e.stopPropagation();
|
|
36
36
|
e.preventDefault();
|
|
37
|
-
if (onChange) {
|
|
37
|
+
if (onChange && type !== "single") {
|
|
38
38
|
if (isAllOptionsChecked) {
|
|
39
39
|
onChange(checked.filter(i => allOptionValues.includes(i) === false));
|
|
40
40
|
} else {
|
|
@@ -45,9 +45,10 @@ export const OptionGroup = _ref => {
|
|
|
45
45
|
onChange(unique);
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
}, [allOptionValues, checked, isAllOptionsChecked, onChange]);
|
|
48
|
+
}, [allOptionValues, checked, isAllOptionsChecked, onChange, type]);
|
|
49
49
|
return /*#__PURE__*/React.createElement(StyledOptionGroupLi, {
|
|
50
50
|
key: id,
|
|
51
|
+
type: type,
|
|
51
52
|
className: classNames("c-option-group", optionGroupClassName),
|
|
52
53
|
onClick: handleClick
|
|
53
54
|
}, /*#__PURE__*/React.createElement(StyledOptionGroup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionGroup.js","names":["React","useCallback","useEffect","useMemo","classNames","StyledOptionGroup","StyledOptionGroupHeader","StyledOptionGroupOption","StyledOptionGroupLi","StyledOptionGroupHeaderName","Checkbox","OptionGroup","_ref","id","name","options","type","hover","checked","onChange","setHover","optionGroupClassName","mixedOptions","_document$getElementB","document","getElementById","focus","isAllOptionsChecked","every","option","includes","handleHover","undefined","allOptionValues","map","isMixed","some","item","handleClick","e","stopPropagation","preventDefault","filter","i","values","unique","pos","indexOf","createElement","key","className","onClick","onMouseEnter","weight","mixed","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC, ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledOptionGroup,\n StyledOptionGroupHeader,\n StyledOptionGroupOption,\n StyledOptionGroupLi,\n StyledOptionGroupHeaderName,\n} from \"./Styles\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport { IOptionItemProps } from \"../Option/Option\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n /** Options items list */\n options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n /** Select type: single or multiple */\n type?: \"single\" | \"multiple\";\n /** Value of hovered element */\n hover?: number | string | null;\n /** Filter for labels */\n filter?: string;\n /** Checked values */\n checked: (string | number)[];\n /** Mixed options values */\n mixedOptions: (string | number)[];\n /** onChange callback */\n onChange?: (e: (string | number)[]) => void;\n /** Set value of hovered element */\n setHover?: (e: number | string | undefined) => void;\n /** Render function */\n renderOptions?: (item: IOptionItemProps, index: number) => ReactNode;\n /** Value that represent class names */\n optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n id,\n name,\n options,\n type,\n hover,\n checked,\n onChange,\n setHover,\n optionGroupClassName,\n mixedOptions = [],\n}) => {\n useEffect(() => {\n if (hover === id && type !== \"single\") {\n document.getElementById(`${id}`)?.focus();\n }\n }, [hover, type, id]);\n\n const isAllOptionsChecked = useMemo(\n () => options.every((option) => checked.includes(option.id)),\n [options, checked]\n );\n\n const handleHover = useCallback(() => {\n if (setHover) {\n setHover(type === \"single\" ? undefined : id);\n }\n }, [setHover, type, id]);\n\n const allOptionValues = useMemo(\n () => options.map((option) => option.id),\n [options]\n );\n\n const isMixed: boolean = useMemo(() => {\n return (\n (options.some((option) => checked.includes(option.id)) ||\n mixedOptions.some((item) => allOptionValues.includes(item))) &&\n !isAllOptionsChecked\n );\n }, [allOptionValues, checked, isAllOptionsChecked, mixedOptions, options]);\n\n const handleClick = useCallback(\n (e) => {\n e.stopPropagation();\n e.preventDefault();\n if (onChange) {\n if (isAllOptionsChecked) {\n onChange(\n checked.filter((i) => allOptionValues.includes(i) === false)\n );\n } else {\n const values = [...checked, ...allOptionValues];\n const unique = values.filter((item, pos) => {\n return values.indexOf(item) === pos;\n });\n onChange(unique);\n }\n }\n },\n [allOptionValues, checked, isAllOptionsChecked, onChange]\n );\n\n return (\n <StyledOptionGroupLi\n key={id}\n className={classNames(\"c-option-group\", optionGroupClassName)}\n onClick={handleClick}\n >\n <StyledOptionGroup key={id}>\n <StyledOptionGroupOption\n onMouseEnter={handleHover}\n hover={hover === id && type === \"multiple\"}\n >\n <StyledOptionGroupHeader>\n <StyledOptionGroupHeaderName weight=\"bold\">\n {name}\n </StyledOptionGroupHeaderName>\n {type === \"multiple\" && (\n <Checkbox\n id={`${id}`}\n checked={isAllOptionsChecked}\n mixed={isMixed}\n onChange={handleClick}\n type=\"checkbox\"\n />\n )}\n </StyledOptionGroupHeader>\n </StyledOptionGroupOption>\n </StyledOptionGroup>\n </StyledOptionGroupLi>\n );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAuB,OAAO;AAE7E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,iBAAiB,EACjBC,uBAAuB,EACvBC,uBAAuB,EACvBC,mBAAmB,EACnBC,2BAA2B,QACtB,UAAU;AACjB,SAASC,QAAQ,QAAQ,yBAAyB;AA6BlD,OAAO,MAAMC,WAEZ,GAAGC,IAAA,IAWE;EAAA,IAXD;IACHC,EAAE;IACFC,IAAI;IACJC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,oBAAoB;IACpBC,YAAY,GAAG;EACjB,CAAC,GAAAV,IAAA;EACCV,SAAS,CAAC,MAAM;IACd,IAAIe,KAAK,KAAKJ,EAAE,IAAIG,IAAI,KAAK,QAAQ,EAAE;MAAA,IAAAO,qBAAA;MACrC,CAAAA,qBAAA,GAAAC,QAAQ,CAACC,cAAc,MAAIZ,EAAI,CAAC,aAAhCU,qBAAA,CAAkCG,KAAK,CAAC,CAAC;IAC3C;EACF,CAAC,EAAE,CAACT,KAAK,EAAED,IAAI,EAAEH,EAAE,CAAC,CAAC;EAErB,MAAMc,mBAAmB,GAAGxB,OAAO,CACjC,MAAMY,OAAO,CAACa,KAAK,CAAEC,MAAM,IAAKX,OAAO,CAACY,QAAQ,CAACD,MAAM,CAAChB,EAAE,CAAC,CAAC,EAC5D,CAACE,OAAO,EAAEG,OAAO,CACnB,CAAC;EAED,MAAMa,WAAW,GAAG9B,WAAW,CAAC,MAAM;IACpC,IAAImB,QAAQ,EAAE;MACZA,QAAQ,CAACJ,IAAI,KAAK,QAAQ,GAAGgB,SAAS,GAAGnB,EAAE,CAAC;IAC9C;EACF,CAAC,EAAE,CAACO,QAAQ,EAAEJ,IAAI,EAAEH,EAAE,CAAC,CAAC;EAExB,MAAMoB,eAAe,GAAG9B,OAAO,CAC7B,MAAMY,OAAO,CAACmB,GAAG,CAAEL,MAAM,IAAKA,MAAM,CAAChB,EAAE,CAAC,EACxC,CAACE,OAAO,CACV,CAAC;EAED,MAAMoB,OAAgB,GAAGhC,OAAO,CAAC,MAAM;IACrC,OACE,CAACY,OAAO,CAACqB,IAAI,CAAEP,MAAM,IAAKX,OAAO,CAACY,QAAQ,CAACD,MAAM,CAAChB,EAAE,CAAC,CAAC,IACpDS,YAAY,CAACc,IAAI,CAAEC,IAAI,IAAKJ,eAAe,CAACH,QAAQ,CAACO,IAAI,CAAC,CAAC,KAC7D,CAACV,mBAAmB;EAExB,CAAC,EAAE,CAACM,eAAe,EAAEf,OAAO,EAAES,mBAAmB,EAAEL,YAAY,EAAEP,OAAO,CAAC,CAAC;EAE1E,MAAMuB,WAAW,GAAGrC,WAAW,CAC5BsC,CAAC,IAAK;IACLA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnBD,CAAC,CAACE,cAAc,CAAC,CAAC;IAClB,IAAItB,QAAQ,EAAE;
|
|
1
|
+
{"version":3,"file":"OptionGroup.js","names":["React","useCallback","useEffect","useMemo","classNames","StyledOptionGroup","StyledOptionGroupHeader","StyledOptionGroupOption","StyledOptionGroupLi","StyledOptionGroupHeaderName","Checkbox","OptionGroup","_ref","id","name","options","type","hover","checked","onChange","setHover","optionGroupClassName","mixedOptions","_document$getElementB","document","getElementById","focus","isAllOptionsChecked","every","option","includes","handleHover","undefined","allOptionValues","map","isMixed","some","item","handleClick","e","stopPropagation","preventDefault","filter","i","values","unique","pos","indexOf","createElement","key","className","onClick","onMouseEnter","weight","mixed","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC, ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledOptionGroup,\n StyledOptionGroupHeader,\n StyledOptionGroupOption,\n StyledOptionGroupLi,\n StyledOptionGroupHeaderName,\n} from \"./Styles\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport { IOptionItemProps } from \"../Option/Option\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n /** Options items list */\n options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n /** Select type: single or multiple */\n type?: \"single\" | \"multiple\";\n /** Value of hovered element */\n hover?: number | string | null;\n /** Filter for labels */\n filter?: string;\n /** Checked values */\n checked: (string | number)[];\n /** Mixed options values */\n mixedOptions: (string | number)[];\n /** onChange callback */\n onChange?: (e: (string | number)[]) => void;\n /** Set value of hovered element */\n setHover?: (e: number | string | undefined) => void;\n /** Render function */\n renderOptions?: (item: IOptionItemProps, index: number) => ReactNode;\n /** Value that represent class names */\n optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n id,\n name,\n options,\n type,\n hover,\n checked,\n onChange,\n setHover,\n optionGroupClassName,\n mixedOptions = [],\n}) => {\n useEffect(() => {\n if (hover === id && type !== \"single\") {\n document.getElementById(`${id}`)?.focus();\n }\n }, [hover, type, id]);\n\n const isAllOptionsChecked = useMemo(\n () => options.every((option) => checked.includes(option.id)),\n [options, checked]\n );\n\n const handleHover = useCallback(() => {\n if (setHover) {\n setHover(type === \"single\" ? undefined : id);\n }\n }, [setHover, type, id]);\n\n const allOptionValues = useMemo(\n () => options.map((option) => option.id),\n [options]\n );\n\n const isMixed: boolean = useMemo(() => {\n return (\n (options.some((option) => checked.includes(option.id)) ||\n mixedOptions.some((item) => allOptionValues.includes(item))) &&\n !isAllOptionsChecked\n );\n }, [allOptionValues, checked, isAllOptionsChecked, mixedOptions, options]);\n\n const handleClick = useCallback(\n (e) => {\n e.stopPropagation();\n e.preventDefault();\n if (onChange && type !== \"single\") {\n if (isAllOptionsChecked) {\n onChange(\n checked.filter((i) => allOptionValues.includes(i) === false)\n );\n } else {\n const values = [...checked, ...allOptionValues];\n const unique = values.filter((item, pos) => {\n return values.indexOf(item) === pos;\n });\n onChange(unique);\n }\n }\n },\n [allOptionValues, checked, isAllOptionsChecked, onChange, type]\n );\n\n return (\n <StyledOptionGroupLi\n key={id}\n type={type}\n className={classNames(\"c-option-group\", optionGroupClassName)}\n onClick={handleClick}\n >\n <StyledOptionGroup key={id}>\n <StyledOptionGroupOption\n onMouseEnter={handleHover}\n hover={hover === id && type === \"multiple\"}\n >\n <StyledOptionGroupHeader>\n <StyledOptionGroupHeaderName weight=\"bold\">\n {name}\n </StyledOptionGroupHeaderName>\n {type === \"multiple\" && (\n <Checkbox\n id={`${id}`}\n checked={isAllOptionsChecked}\n mixed={isMixed}\n onChange={handleClick}\n type=\"checkbox\"\n />\n )}\n </StyledOptionGroupHeader>\n </StyledOptionGroupOption>\n </StyledOptionGroup>\n </StyledOptionGroupLi>\n );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAuB,OAAO;AAE7E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,iBAAiB,EACjBC,uBAAuB,EACvBC,uBAAuB,EACvBC,mBAAmB,EACnBC,2BAA2B,QACtB,UAAU;AACjB,SAASC,QAAQ,QAAQ,yBAAyB;AA6BlD,OAAO,MAAMC,WAEZ,GAAGC,IAAA,IAWE;EAAA,IAXD;IACHC,EAAE;IACFC,IAAI;IACJC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,oBAAoB;IACpBC,YAAY,GAAG;EACjB,CAAC,GAAAV,IAAA;EACCV,SAAS,CAAC,MAAM;IACd,IAAIe,KAAK,KAAKJ,EAAE,IAAIG,IAAI,KAAK,QAAQ,EAAE;MAAA,IAAAO,qBAAA;MACrC,CAAAA,qBAAA,GAAAC,QAAQ,CAACC,cAAc,MAAIZ,EAAI,CAAC,aAAhCU,qBAAA,CAAkCG,KAAK,CAAC,CAAC;IAC3C;EACF,CAAC,EAAE,CAACT,KAAK,EAAED,IAAI,EAAEH,EAAE,CAAC,CAAC;EAErB,MAAMc,mBAAmB,GAAGxB,OAAO,CACjC,MAAMY,OAAO,CAACa,KAAK,CAAEC,MAAM,IAAKX,OAAO,CAACY,QAAQ,CAACD,MAAM,CAAChB,EAAE,CAAC,CAAC,EAC5D,CAACE,OAAO,EAAEG,OAAO,CACnB,CAAC;EAED,MAAMa,WAAW,GAAG9B,WAAW,CAAC,MAAM;IACpC,IAAImB,QAAQ,EAAE;MACZA,QAAQ,CAACJ,IAAI,KAAK,QAAQ,GAAGgB,SAAS,GAAGnB,EAAE,CAAC;IAC9C;EACF,CAAC,EAAE,CAACO,QAAQ,EAAEJ,IAAI,EAAEH,EAAE,CAAC,CAAC;EAExB,MAAMoB,eAAe,GAAG9B,OAAO,CAC7B,MAAMY,OAAO,CAACmB,GAAG,CAAEL,MAAM,IAAKA,MAAM,CAAChB,EAAE,CAAC,EACxC,CAACE,OAAO,CACV,CAAC;EAED,MAAMoB,OAAgB,GAAGhC,OAAO,CAAC,MAAM;IACrC,OACE,CAACY,OAAO,CAACqB,IAAI,CAAEP,MAAM,IAAKX,OAAO,CAACY,QAAQ,CAACD,MAAM,CAAChB,EAAE,CAAC,CAAC,IACpDS,YAAY,CAACc,IAAI,CAAEC,IAAI,IAAKJ,eAAe,CAACH,QAAQ,CAACO,IAAI,CAAC,CAAC,KAC7D,CAACV,mBAAmB;EAExB,CAAC,EAAE,CAACM,eAAe,EAAEf,OAAO,EAAES,mBAAmB,EAAEL,YAAY,EAAEP,OAAO,CAAC,CAAC;EAE1E,MAAMuB,WAAW,GAAGrC,WAAW,CAC5BsC,CAAC,IAAK;IACLA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnBD,CAAC,CAACE,cAAc,CAAC,CAAC;IAClB,IAAItB,QAAQ,IAAIH,IAAI,KAAK,QAAQ,EAAE;MACjC,IAAIW,mBAAmB,EAAE;QACvBR,QAAQ,CACND,OAAO,CAACwB,MAAM,CAAEC,CAAC,IAAKV,eAAe,CAACH,QAAQ,CAACa,CAAC,CAAC,KAAK,KAAK,CAC7D,CAAC;MACH,CAAC,MAAM;QACL,MAAMC,MAAM,GAAG,CAAC,GAAG1B,OAAO,EAAE,GAAGe,eAAe,CAAC;QAC/C,MAAMY,MAAM,GAAGD,MAAM,CAACF,MAAM,CAAC,CAACL,IAAI,EAAES,GAAG,KAAK;UAC1C,OAAOF,MAAM,CAACG,OAAO,CAACV,IAAI,CAAC,KAAKS,GAAG;QACrC,CAAC,CAAC;QACF3B,QAAQ,CAAC0B,MAAM,CAAC;MAClB;IACF;EACF,CAAC,EACD,CAACZ,eAAe,EAAEf,OAAO,EAAES,mBAAmB,EAAER,QAAQ,EAAEH,IAAI,CAChE,CAAC;EAED,oBACEhB,KAAA,CAAAgD,aAAA,CAACxC,mBAAmB;IAClByC,GAAG,EAAEpC,EAAG;IACRG,IAAI,EAAEA,IAAK;IACXkC,SAAS,EAAE9C,UAAU,CAAC,gBAAgB,EAAEiB,oBAAoB,CAAE;IAC9D8B,OAAO,EAAEb;EAAY,gBAErBtC,KAAA,CAAAgD,aAAA,CAAC3C,iBAAiB;IAAC4C,GAAG,EAAEpC;EAAG,gBACzBb,KAAA,CAAAgD,aAAA,CAACzC,uBAAuB;IACtB6C,YAAY,EAAErB,WAAY;IAC1Bd,KAAK,EAAEA,KAAK,KAAKJ,EAAE,IAAIG,IAAI,KAAK;EAAW,gBAE3ChB,KAAA,CAAAgD,aAAA,CAAC1C,uBAAuB,qBACtBN,KAAA,CAAAgD,aAAA,CAACvC,2BAA2B;IAAC4C,MAAM,EAAC;EAAM,GACvCvC,IAC0B,CAAC,EAC7BE,IAAI,KAAK,UAAU,iBAClBhB,KAAA,CAAAgD,aAAA,CAACtC,QAAQ;IACPG,EAAE,OAAKA,EAAK;IACZK,OAAO,EAAES,mBAAoB;IAC7B2B,KAAK,EAAEnB,OAAQ;IACfhB,QAAQ,EAAEmB,WAAY;IACtBtB,IAAI,EAAC;EAAU,CAChB,CAEoB,CACF,CACR,CACA,CAAC;AAE1B,CAAC;AAEDL,WAAW,CAAC4C,WAAW,GAAG,aAAa","ignoreList":[]}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
export declare const StyledOptionGroupLi: import("styled-components").StyledComponent<"li", any, {
|
|
1
|
+
export declare const StyledOptionGroupLi: import("styled-components").StyledComponent<"li", any, {
|
|
2
|
+
type?: "single" | "multiple";
|
|
3
|
+
}, never>;
|
|
2
4
|
export declare const StyledOptionGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
5
|
export declare const StyledOptionGroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
6
|
export declare const StyledOptionGroupHeaderName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").IBodyProps & Omit<import("../../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB;WAAsB,QAAQ,GAAG,UAAU;SAG1E,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEAUnC,CAAC;AAIF,eAAO,MAAM,2BAA2B,yQAKvC,CAAC;AAIF,eAAO,MAAM,uBAAuB;YAAwB,OAAO;SAMlE,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { Body2 } from "../../Typography";
|
|
|
5
5
|
export const StyledOptionGroupLi = styled.li.withConfig({
|
|
6
6
|
displayName: "Styles__StyledOptionGroupLi",
|
|
7
7
|
componentId: "sc-16v5afu-0"
|
|
8
|
-
})(["flex-direction:column;cursor:
|
|
8
|
+
})(["flex-direction:column;cursor:", ";"], props => props.type === "single" ? "default" : "pointer");
|
|
9
9
|
export const StyledOptionGroup = styled.div.withConfig({
|
|
10
10
|
displayName: "Styles__StyledOptionGroup",
|
|
11
11
|
componentId: "sc-16v5afu-1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Body2","StyledOptionGroupLi","li","withConfig","displayName","componentId","StyledOptionGroup","div","StyledOptionGroupHeader","StyledOptionGroupHeaderName","StyledOptionGroupOption","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Body2","StyledOptionGroupLi","li","withConfig","displayName","componentId","props","type","StyledOptionGroup","div","StyledOptionGroupHeader","StyledOptionGroupHeaderName","StyledOptionGroupOption","hover"],"sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { Body2 } from \"../../Typography\";\n\nexport const StyledOptionGroupLi = styled.li<{ type?: \"single\" | \"multiple\" }>`\n flex-direction: column;\n cursor: ${(props) => (props.type === \"single\" ? \"default\" : \"pointer\")};\n`;\nexport const StyledOptionGroup = styled.div`\n ${tw`tw-select-none`}\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledOptionGroup.displayName = \"StyledOptionGroup\";\n\nexport const StyledOptionGroupHeader = styled.div`\n height: 28px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 16px;\n margin: 6px 0;\n * {\n margin: auto 0;\n }\n`;\n\nStyledOptionGroupHeader.displayName = \"StyledOptionGroupHeader\";\n\nexport const StyledOptionGroupHeaderName = styled(Body2)`\n padding-right: 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nStyledOptionGroupHeaderName.displayName = \"StyledOptionGroupHeaderName\";\n\nexport const StyledOptionGroupOption = styled.div<{ hover?: boolean }>`\n ${(props) =>\n props.hover &&\n css`\n background-color: var(--color-theme-200);\n `}\n`;\n\nStyledOptionGroupOption.displayName = \"StyledOptionGroupOption\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,mBAAmB,GAAGL,MAAM,CAACM,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAE/BC,KAAK,IAAMA,KAAK,CAACC,IAAI,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAU,CACvE;AACD,OAAO,MAAMC,iBAAiB,GAAGZ,MAAM,CAACa,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBACrC;EAAA;AAAe,CAAC,EAClBN,SAAS,EACTD,cAAc,CACjB;AAEDU,iBAAiB,CAACJ,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMM,uBAAuB,GAAGd,MAAM,CAACa,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+HAUhD;AAEDK,uBAAuB,CAACN,WAAW,GAAG,yBAAyB;AAE/D,OAAO,MAAMO,2BAA2B,GAAGf,MAAM,CAACI,KAAK,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qFAKvD;AAEDM,2BAA2B,CAACP,WAAW,GAAG,6BAA6B;AAEvE,OAAO,MAAMQ,uBAAuB,GAAGhB,MAAM,CAACa,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC5CC,KAAK,IACNA,KAAK,CAACO,KAAK,IACXhB,GAAG,8CAEF,CACJ;AAEDe,uBAAuB,CAACR,WAAW,GAAG,yBAAyB","ignoreList":[]}
|
package/dist/index.js
CHANGED
|
@@ -17452,7 +17452,9 @@
|
|
|
17452
17452
|
var StyledOptionGroupLi = styled__default["default"].li.withConfig({
|
|
17453
17453
|
displayName: "Styles__StyledOptionGroupLi",
|
|
17454
17454
|
componentId: "sc-16v5afu-0"
|
|
17455
|
-
})(["flex-direction:column;cursor:
|
|
17455
|
+
})(["flex-direction:column;cursor:", ";"], function (props) {
|
|
17456
|
+
return props.type === "single" ? "default" : "pointer";
|
|
17457
|
+
});
|
|
17456
17458
|
var StyledOptionGroup = styled__default["default"].div.withConfig({
|
|
17457
17459
|
displayName: "Styles__StyledOptionGroup",
|
|
17458
17460
|
componentId: "sc-16v5afu-1"
|
|
@@ -17521,7 +17523,7 @@
|
|
|
17521
17523
|
var handleClick = React.useCallback(function (e) {
|
|
17522
17524
|
e.stopPropagation();
|
|
17523
17525
|
e.preventDefault();
|
|
17524
|
-
if (onChange) {
|
|
17526
|
+
if (onChange && type !== "single") {
|
|
17525
17527
|
if (isAllOptionsChecked) {
|
|
17526
17528
|
onChange(checked.filter(function (i) {
|
|
17527
17529
|
return allOptionValues.includes(i) === false;
|
|
@@ -17534,9 +17536,10 @@
|
|
|
17534
17536
|
onChange(unique);
|
|
17535
17537
|
}
|
|
17536
17538
|
}
|
|
17537
|
-
}, [allOptionValues, checked, isAllOptionsChecked, onChange]);
|
|
17539
|
+
}, [allOptionValues, checked, isAllOptionsChecked, onChange, type]);
|
|
17538
17540
|
return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupLi, {
|
|
17539
17541
|
key: id,
|
|
17542
|
+
type: type,
|
|
17540
17543
|
className: classNames__default["default"]("c-option-group", optionGroupClassName),
|
|
17541
17544
|
onClick: handleClick
|
|
17542
17545
|
}, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
|
|
@@ -19102,7 +19105,9 @@
|
|
|
19102
19105
|
onChange: onChange,
|
|
19103
19106
|
forceCloseMenu: true,
|
|
19104
19107
|
disableSearch: !search,
|
|
19105
|
-
target: /*#__PURE__*/React__default["default"].createElement(_StyledStyledButton,
|
|
19108
|
+
target: /*#__PURE__*/React__default["default"].createElement(_StyledStyledButton, {
|
|
19109
|
+
type: "button"
|
|
19110
|
+
}, /*#__PURE__*/React__default["default"].createElement(StyledInputSelectTrigger, {
|
|
19106
19111
|
$disabled: disabled,
|
|
19107
19112
|
$size: size
|
|
19108
19113
|
}, selectedLabel ? selectedLabel : selected, size === "big" ? /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon$1, {
|