@chayns-components/core 5.2.8-alpha.0 → 5.2.8

package/lib/cjs/components/combobox/ComboBox.utils.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getComboBoxWidthResult = void 0;
+var _calculate = require("../../utils/calculate");
+var _ComboBox = require("./ComboBox.constants");
+const getPrefixWidth = (prefix, prefixMinWidth, functions, values) => {
+  if (!prefix) {
+    return 0;
+  }
+  const prefixTextWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+    list: [{
+      text: prefix,
+      value: 'prefix'
+    }],
+    functions,
+    values
+  });
+  return Math.max(prefixTextWidth + _ComboBox.COMBO_BOX_PREFIX_GAP_PX, prefixMinWidth ?? _ComboBox.COMBO_BOX_PREFIX_MIN_WIDTH_PX);
+};
+const clampToParentWidth = (width, parentWidth) => parentWidth > 0 ? Math.min(width, parentWidth) : width;
+const getComboBoxWidthResult = ({
+  functions,
+  internalSelectedItem,
+  lists,
+  parentWidth,
+  placeholder,
+  prefix,
+  prefixMinWidth,
+  selectedItem,
+  shouldDropDownUseMaxItemWidth,
+  shouldShowBigImage,
+  shouldShowClearIcon,
+  shouldUseCurrentItemWidth,
+  shouldUseFullWidth,
+  values
+}) => {
+  const allItems = lists.flatMap(list => list.list);
+  const effectiveSelectedItem = selectedItem ?? internalSelectedItem;
+  const maxItemWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+    list: [...allItems, {
+      text: placeholder,
+      value: 'placeholder'
+    }, ...(effectiveSelectedItem ? [effectiveSelectedItem] : [])],
+    functions,
+    shouldShowBigImage,
+    values
+  });
+  const prefixWidth = getPrefixWidth(prefix, prefixMinWidth, functions, values);
+  const triggerWidthBase = maxItemWidth + _ComboBox.COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + _ComboBox.COMBO_BOX_HEADER_BORDER_WIDTH_PX + _ComboBox.COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? _ComboBox.COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + _ComboBox.COMBO_BOX_ROUNDING_BUFFER_PX + prefixWidth;
+  const desiredBodyMinWidth = maxItemWidth + _ComboBox.COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX;
+  if (shouldDropDownUseMaxItemWidth) {
+    const width = clampToParentWidth(desiredBodyMinWidth, parentWidth);
+    return {
+      minWidth: width,
+      bodyMinWidth: width
+    };
+  }
+  if (shouldUseFullWidth) {
+    const width = clampToParentWidth(parentWidth, parentWidth);
+    return {
+      minWidth: width,
+      bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
+    };
+  }
+  if (shouldUseCurrentItemWidth && effectiveSelectedItem) {
+    const selectedItemWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+      list: [effectiveSelectedItem],
+      functions,
+      shouldShowBigImage,
+      values
+    });
+    const width = clampToParentWidth(selectedItemWidth + _ComboBox.COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + _ComboBox.COMBO_BOX_HEADER_BORDER_WIDTH_PX + _ComboBox.COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? _ComboBox.COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + _ComboBox.COMBO_BOX_ROUNDING_BUFFER_PX + prefixWidth, parentWidth);
+    return {
+      minWidth: width,
+      bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
+    };
+  }
+  const width = clampToParentWidth(triggerWidthBase, parentWidth);
+  return {
+    minWidth: width,
+    bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
+  };
+};
+exports.getComboBoxWidthResult = getComboBoxWidthResult;
+//# sourceMappingURL=ComboBox.utils.js.map

package/lib/cjs/components/combobox/ComboBox.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.utils.js","names":["_calculate","require","_ComboBox","getPrefixWidth","prefix","prefixMinWidth","functions","values","prefixTextWidth","calculateMaxComboBoxItemWidth","list","text","value","Math","max","COMBO_BOX_PREFIX_GAP_PX","COMBO_BOX_PREFIX_MIN_WIDTH_PX","clampToParentWidth","width","parentWidth","min","getComboBoxWidthResult","internalSelectedItem","lists","placeholder","selectedItem","shouldDropDownUseMaxItemWidth","shouldShowBigImage","shouldShowClearIcon","shouldUseCurrentItemWidth","shouldUseFullWidth","allItems","flatMap","effectiveSelectedItem","maxItemWidth","prefixWidth","triggerWidthBase","COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX","COMBO_BOX_HEADER_BORDER_WIDTH_PX","COMBO_BOX_ACTION_ICON_WIDTH_PX","COMBO_BOX_CLEAR_ICON_WIDTH_PX","COMBO_BOX_ROUNDING_BUFFER_PX","desiredBodyMinWidth","COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX","minWidth","bodyMinWidth","selectedItemWidth","exports"],"sources":["../../../../src/components/combobox/ComboBox.utils.ts"],"sourcesContent":["import type { ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport { calculateMaxComboBoxItemWidth } from '../../utils/calculate';\nimport type { IComboBoxItem, IComboBoxItems } from './ComboBox.types';\nimport {\n    COMBO_BOX_ACTION_ICON_WIDTH_PX,\n    COMBO_BOX_CLEAR_ICON_WIDTH_PX,\n    COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX,\n    COMBO_BOX_PREFIX_GAP_PX,\n    COMBO_BOX_PREFIX_MIN_WIDTH_PX,\n    COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX,\n    COMBO_BOX_HEADER_BORDER_WIDTH_PX,\n    COMBO_BOX_ROUNDING_BUFFER_PX,\n} from './ComboBox.constants';\n\nexport type ComboBoxWidthOptions = {\n    functions: ChaynsReactFunctions;\n    internalSelectedItem?: IComboBoxItem;\n    lists: IComboBoxItems[];\n    parentWidth: number;\n    placeholder: string;\n    prefix?: string;\n    prefixMinWidth?: number;\n    selectedItem?: IComboBoxItem;\n    shouldDropDownUseMaxItemWidth?: boolean;\n    shouldShowBigImage?: boolean;\n    shouldShowClearIcon?: boolean;\n    shouldUseCurrentItemWidth?: boolean;\n    shouldUseFullWidth?: boolean;\n    values: ChaynsReactValues;\n};\n\nexport type ComboBoxWidthResult = {\n    minWidth?: number;\n    bodyMinWidth: number;\n};\n\nconst getPrefixWidth = (\n    prefix: ComboBoxWidthOptions['prefix'],\n    prefixMinWidth: ComboBoxWidthOptions['prefixMinWidth'],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    if (!prefix) {\n        return 0;\n    }\n\n    const prefixTextWidth = calculateMaxComboBoxItemWidth({\n        list: [{ text: prefix, value: 'prefix' }],\n        functions,\n        values,\n    });\n\n    return Math.max(\n        prefixTextWidth + COMBO_BOX_PREFIX_GAP_PX,\n        prefixMinWidth ?? COMBO_BOX_PREFIX_MIN_WIDTH_PX,\n    );\n};\n\nconst clampToParentWidth = (width: number, parentWidth: number) =>\n    parentWidth > 0 ? Math.min(width, parentWidth) : width;\n\nexport const getComboBoxWidthResult = ({\n    functions,\n    internalSelectedItem,\n    lists,\n    parentWidth,\n    placeholder,\n    prefix,\n    prefixMinWidth,\n    selectedItem,\n    shouldDropDownUseMaxItemWidth,\n    shouldShowBigImage,\n    shouldShowClearIcon,\n    shouldUseCurrentItemWidth,\n    shouldUseFullWidth,\n    values,\n}: ComboBoxWidthOptions): ComboBoxWidthResult => {\n    const allItems = lists.flatMap((list) => list.list);\n    const effectiveSelectedItem = selectedItem ?? internalSelectedItem;\n\n    const maxItemWidth = calculateMaxComboBoxItemWidth({\n        list: [\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(effectiveSelectedItem ? [effectiveSelectedItem] : []),\n        ],\n        functions,\n        shouldShowBigImage,\n        values,\n    });\n\n    const prefixWidth = getPrefixWidth(prefix, prefixMinWidth, functions, values);\n    const triggerWidthBase =\n        maxItemWidth +\n        COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX +\n        COMBO_BOX_HEADER_BORDER_WIDTH_PX +\n        COMBO_BOX_ACTION_ICON_WIDTH_PX +\n        (shouldShowClearIcon ? COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) +\n        COMBO_BOX_ROUNDING_BUFFER_PX +\n        prefixWidth;\n\n    const desiredBodyMinWidth = maxItemWidth + COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX;\n\n    if (shouldDropDownUseMaxItemWidth) {\n        const width = clampToParentWidth(desiredBodyMinWidth, parentWidth);\n\n        return {\n            minWidth: width,\n            bodyMinWidth: width,\n        };\n    }\n\n    if (shouldUseFullWidth) {\n        const width = clampToParentWidth(parentWidth, parentWidth);\n\n        return {\n            minWidth: width,\n            bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth),\n        };\n    }\n\n    if (shouldUseCurrentItemWidth && effectiveSelectedItem) {\n        const selectedItemWidth = calculateMaxComboBoxItemWidth({\n            list: [effectiveSelectedItem],\n            functions,\n            shouldShowBigImage,\n            values,\n        });\n\n        const width = clampToParentWidth(\n            selectedItemWidth +\n                COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX +\n                COMBO_BOX_HEADER_BORDER_WIDTH_PX +\n                COMBO_BOX_ACTION_ICON_WIDTH_PX +\n                (shouldShowClearIcon ? COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) +\n                COMBO_BOX_ROUNDING_BUFFER_PX +\n                prefixWidth,\n            parentWidth,\n        );\n\n        return {\n            minWidth: width,\n            bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth),\n        };\n    }\n\n    const width = clampToParentWidth(triggerWidthBase, parentWidth);\n\n    return {\n        minWidth: width,\n        bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth),\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FILTER_CONTENT_ROW_GAP_PX = void 0;
+const FILTER_CONTENT_ROW_GAP_PX = exports.FILTER_CONTENT_ROW_GAP_PX = 10;
+//# sourceMappingURL=FilterContent.constants.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.constants.js","names":["FILTER_CONTENT_ROW_GAP_PX","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.constants.ts"],"sourcesContent":["export const FILTER_CONTENT_ROW_GAP_PX = 10;\n"],"mappings":";;;;;;AAAO,MAAMA,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,EAAE","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.js

@@ -13,9 +13,9 @@ var _ComboBox = _interopRequireDefault(require("../../combobox/ComboBox"));
 var _Checkbox = _interopRequireDefault(require("../../checkbox/Checkbox"));
 var _textstring = require("@chayns-components/textstring");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
+var _FilterContent2 = require("./FilterContent.utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const FilterContent = ({
   searchConfig,
   sortConfig,
@@ -24,9 +24,7 @@ const FilterContent = ({
   comboboxConfig,
   shouldAutoFocus
 }) => {
-  const sortTextRef = (0, _react.useRef)(null);
   const searchRef = (0, _react.useRef)(null);
-  const [sortTextWidth, setSortTextWidth] = (0, _react.useState)(0);
   const ts = _textStrings.default.components.filter.filterContent;
   const handleSelectSortItem = (0, _react.useCallback)(item => {
     if (!item) {
@@ -43,11 +41,6 @@ const FilterContent = ({
       });
     }
   }, [sortConfig]);
-  (0, _react.useEffect)(() => {
-    if (sortTextRef.current) {
-      setSortTextWidth(sortTextRef.current.clientWidth + 20);
-    }
-  }, []);
   (0, _react.useEffect)(() => {
     if (shouldAutoFocus) {
       var _searchRef$current;
@@ -67,34 +60,20 @@ const FilterContent = ({
     leftElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       icons: ['fa fa-search']
     })
-  }), filterButtonConfig && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, filterButtonConfig), sortConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterSort, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterSortText, {
-    ref: sortTextRef
-  }, /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
+  }), filterButtonConfig && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, filterButtonConfig), sortConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
     textstring: (0, _textstring.ttsToITextString)(ts.sort)
-  })), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxWrapper, {
-    $textWidth: sortTextWidth
-  }, /*#__PURE__*/_react.default.createElement(_ComboBox.default, {
-    lists: [{
-      list: sortConfig.items.map(({
-        text,
-        id
-      }) => ({
-        text,
-        value: id
-      }))
-    }],
+  })), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentControlWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, {
+    lists: (0, _FilterContent2.getSortComboBoxLists)(sortConfig),
     placeholder: "",
     selectedItem: {
       text: sortConfig.selectedItem.text,
       value: sortConfig.selectedItem.id
     },
     onSelect: handleSelectSortItem
-  }))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInline, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInlineLabel, null, comboboxConfig.label), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInlineComboboxWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, _extends({
-    shouldUseCurrentItemWidth: true
-  }, comboboxConfig)))), checkboxConfig &&
+  }))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentControlWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, comboboxConfig))), checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  _react.default.createElement(_Checkbox.default, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth, ts.input.placeholder, ts.sort]);
+  _react.default.createElement(_Checkbox.default, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, ts.input.placeholder, ts.sort]);
 };
 FilterContent.displayName = 'FilterContent';
 var _default = exports.default = FilterContent;

package/lib/cjs/components/filter/filter-content/FilterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","_textstring","_textStrings","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","sortTextRef","useRef","searchRef","sortTextWidth","setSortTextWidth","useState","ts","textStrings","components","filter","filterContent","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","current","clientWidth","_searchRef$current","focus","useMemo","createElement","TextstringProvider","libraryName","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","Textstring","textstring","ttsToITextString","input","searchValue","shouldShowClearIcon","leftElement","icons","StyledFilterSort","StyledFilterSortText","sort","StyledFilterComboboxWrapper","$textWidth","lists","list","items","map","selectedItem","onSelect","StyledFilterComboboxInline","StyledFilterComboboxInlineLabel","label","StyledFilterComboboxInlineComboboxWrapper","shouldUseCurrentItemWidth","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledFilterComboboxInline,\n    StyledFilterComboboxInlineComboboxWrapper,\n    StyledFilterComboboxInlineLabel,\n    StyledFilterComboboxWrapper,\n    StyledFilterContent,\n    StyledFilterSort,\n    StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\nexport type FilterContentProps = {\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    comboboxConfig?: ComboboxConfig;\n    shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    comboboxConfig,\n    shouldAutoFocus,\n}) => {\n    const sortTextRef = useRef<HTMLDivElement>(null);\n    const searchRef = useRef<InputRef>(null);\n\n    const [sortTextWidth, setSortTextWidth] = useState(0);\n\n    const ts = textStrings.components.filter.filterContent;\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (sortTextRef.current) {\n            setSortTextWidth(sortTextRef.current.clientWidth + 20);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <StyledFilterContent>\n                    {searchConfig && (\n                        <Input\n                            ref={searchRef}\n                            onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                            placeholder={\n                                <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n                            }\n                            value={searchConfig.searchValue}\n                            shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                            leftElement={<Icon icons={['fa fa-search']} />}\n                        />\n                    )}\n                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                    {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n                    {sortConfig && (\n                        <StyledFilterSort>\n                            <StyledFilterSortText ref={sortTextRef}>\n                                <Textstring textstring={ttsToITextString(ts.sort)} />\n                            </StyledFilterSortText>\n                            <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n                                <ComboBox\n                                    lists={[\n                                        {\n                                            list: sortConfig.items.map(({ text, id }) => ({\n                                                text,\n                                                value: id,\n                                            })),\n                                        },\n                                    ]}\n                                    placeholder=\"\"\n                                    selectedItem={{\n                                        text: sortConfig.selectedItem.text,\n                                        value: sortConfig.selectedItem.id,\n                                    }}\n                                    onSelect={handleSelectSortItem}\n                                />\n                            </StyledFilterComboboxWrapper>\n                        </StyledFilterSort>\n                    )}\n                    {comboboxConfig && (\n                        <StyledFilterComboboxInline>\n                            <StyledFilterComboboxInlineLabel>\n                                {comboboxConfig.label}\n                            </StyledFilterComboboxInlineLabel>\n                            <StyledFilterComboboxInlineComboboxWrapper>\n                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                                <ComboBox shouldUseCurrentItemWidth {...comboboxConfig} />\n                            </StyledFilterComboboxInlineComboboxWrapper>\n                        </StyledFilterComboboxInline>\n                    )}\n                    {checkboxConfig && (\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        <Checkbox {...checkboxConfig} />\n                    )}\n                </StyledFilterContent>\n            </TextstringProvider>\n        ),\n        [\n            checkboxConfig,\n            comboboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            sortConfig,\n            sortTextWidth,\n            ts.input.placeholder,\n            ts.sort,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","_textstring","_textStrings","_FilterContent2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","searchRef","useRef","ts","textStrings","components","filter","filterContent","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","_searchRef$current","current","focus","useMemo","createElement","TextstringProvider","libraryName","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","Textstring","textstring","ttsToITextString","input","searchValue","shouldShowClearIcon","length","leftElement","icons","StyledFilterContentLabeledRow","StyledFilterContentLabel","sort","StyledFilterContentControlWrapper","lists","getSortComboBoxLists","selectedItem","onSelect","label","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n    StyledFilterContentControlWrapper,\n    StyledFilterContentLabel,\n    StyledFilterContentLabeledRow,\n    StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    comboboxConfig,\n    shouldAutoFocus,\n}) => {\n    const searchRef = useRef<InputRef>(null);\n\n    const ts = textStrings.components.filter.filterContent;\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <StyledFilterContent>\n                    {searchConfig && (\n                        <Input\n                            ref={searchRef}\n                            onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                            placeholder={\n                                <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n                            }\n                            value={searchConfig.searchValue}\n                            shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                            leftElement={<Icon icons={['fa fa-search']} />}\n                        />\n                    )}\n                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                    {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n                    {sortConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                <Textstring textstring={ttsToITextString(ts.sort)} />\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                <ComboBox\n                                    lists={getSortComboBoxLists(sortConfig)}\n                                    placeholder=\"\"\n                                    selectedItem={{\n                                        text: sortConfig.selectedItem.text,\n                                        value: sortConfig.selectedItem.id,\n                                    }}\n                                    onSelect={handleSelectSortItem}\n                                />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {comboboxConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                {comboboxConfig.label}\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                                <ComboBox {...comboboxConfig} />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {checkboxConfig && (\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        <Checkbox {...checkboxConfig} />\n                    )}\n                </StyledFilterContent>\n            </TextstringProvider>\n        ),\n        [\n            checkboxConfig,\n            comboboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            sortConfig,\n            ts.input.placeholder,\n            ts.sort,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.styles.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFilterSortText = exports.StyledFilterSort = exports.StyledFilterContent = exports.StyledFilterComboboxWrapper = exports.StyledFilterComboboxInlineLabel = exports.StyledFilterComboboxInlineComboboxWrapper = exports.StyledFilterComboboxInline = void 0;
+exports.StyledFilterContentLabeledRow = exports.StyledFilterContentLabel = exports.StyledFilterContentControlWrapper = exports.StyledFilterContent = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _FilterContent = require("./FilterContent.constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledFilterContent = exports.StyledFilterContent = _styledComponents.default.div`
     background-color: ${({
@@ -17,36 +18,21 @@ const StyledFilterContent = exports.StyledFilterContent = _styledComponents.defa
     flex-direction: column;
     gap: 10px;
 `;
-const StyledFilterSort = exports.StyledFilterSort = _styledComponents.default.div`
+const StyledFilterContentLabeledRow = exports.StyledFilterContentLabeledRow = _styledComponents.default.div`
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-`;
-const StyledFilterSortText = exports.StyledFilterSortText = _styledComponents.default.div`
-    flex: 0 0 auto;
-`;
-const StyledFilterComboboxWrapper = exports.StyledFilterComboboxWrapper = _styledComponents.default.div`
-    display: flex;
-    justify-content: end;
-    
-    width: ${({
-  $textWidth
-}) => `calc(100% - ${$textWidth}px)`}}
-`;
-const StyledFilterComboboxInline = exports.StyledFilterComboboxInline = _styledComponents.default.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
+    gap: ${_FilterContent.FILTER_CONTENT_ROW_GAP_PX}px;
+    width: 100%;
+    min-width: 0;
 `;
-const StyledFilterComboboxInlineLabel = exports.StyledFilterComboboxInlineLabel = _styledComponents.default.div`
+const StyledFilterContentLabel = exports.StyledFilterContentLabel = _styledComponents.default.div`
     flex: 0 0 auto;
+    white-space: nowrap;
 `;
-const StyledFilterComboboxInlineComboboxWrapper = exports.StyledFilterComboboxInlineComboboxWrapper = _styledComponents.default.div`
+const StyledFilterContentControlWrapper = exports.StyledFilterContentControlWrapper = _styledComponents.default.div`
     display: flex;
-    justify-content: end;
     flex: 1 1 auto;
     min-width: 0;
+    justify-content: flex-end;
 `;
 //# sourceMappingURL=FilterContent.styles.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","StyledFilterComboboxInline","StyledFilterComboboxInlineLabel","StyledFilterComboboxInlineComboboxWrapper"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n    background-color: ${({ theme }) => theme['100']};\n\n    padding: 12px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n`;\n\nexport const StyledFilterSort = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n`;\n\nexport const StyledFilterSortText = styled.div`\n    flex: 0 0 auto;\n`;\n\ntype StyledFilterComboboxWrapperProps = WithTheme<{\n    $textWidth: number;\n}>;\n\nexport const StyledFilterComboboxWrapper = styled.div<StyledFilterComboboxWrapperProps>`\n    display: flex;\n    justify-content: end;\n    \n    width: ${({ $textWidth }) => `calc(100% - ${$textWidth}px)`}}\n`;\n\nexport const StyledFilterComboboxInline = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 10px;\n`;\n\nexport const StyledFilterComboboxInlineLabel = styled.div`\n    flex: 0 0 auto;\n`;\n\nexport const StyledFilterComboboxInlineComboboxWrapper = styled.div`\n    display: flex;\n    justify-content: end;\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gBAAgB,GAAAJ,OAAA,CAAAI,gBAAA,GAAGH,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMG,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC9C;AACA,CAAC;AAMM,MAAMI,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA,aAAa,CAAC;EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC;AAEM,MAAMC,0BAA0B,GAAAR,OAAA,CAAAQ,0BAAA,GAAGP,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMO,+BAA+B,GAAAT,OAAA,CAAAS,+BAAA,GAAGR,yBAAM,CAACC,GAAG;AACzD;AACA,CAAC;AAEM,MAAMQ,yCAAyC,GAAAV,OAAA,CAAAU,yCAAA,GAAGT,yBAAM,CAACC,GAAG;AACnE;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_FilterContent","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterContentLabeledRow","FILTER_CONTENT_ROW_GAP_PX","StyledFilterContentLabel","StyledFilterContentControlWrapper"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { FILTER_CONTENT_ROW_GAP_PX } from './FilterContent.constants';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n    background-color: ${({ theme }) => theme['100']};\n\n    padding: 12px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n`;\n\nexport const StyledFilterContentLabeledRow = styled.div`\n    display: flex;\n    align-items: center;\n    gap: ${FILTER_CONTENT_ROW_GAP_PX}px;\n    width: 100%;\n    min-width: 0;\n`;\n\nexport const StyledFilterContentLabel = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n\nexport const StyledFilterContentControlWrapper = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    justify-content: flex-end;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAAsE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAI/D,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACC,GAAG;AACvD;AACA;AACA,WAAWG,wCAAyB;AACpC;AACA;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAN,OAAA,CAAAM,wBAAA,GAAGL,yBAAM,CAACC,GAAG;AAClD;AACA;AACA,CAAC;AAEM,MAAMK,iCAAiC,GAAAP,OAAA,CAAAO,iCAAA,GAAGN,yBAAM,CAACC,GAAG;AAC3D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=FilterContent.types.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.types.js","names":[],"sources":["../../../../../src/components/filter/filter-content/FilterContent.types.ts"],"sourcesContent":["import type {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\n\n/**\n * Props for the `FilterContent` component.\n */\nexport type FilterContentProps = {\n    /**\n     * Search configuration for the optional search input.\n     */\n    searchConfig?: SearchConfig;\n    /**\n     * Configuration for the optional filter button group.\n     */\n    filterButtonConfig?: FilterButtonConfig;\n    /**\n     * Configuration for the optional sort combobox.\n     */\n    sortConfig?: SortConfig;\n    /**\n     * Configuration for the optional checkbox.\n     */\n    checkboxConfig?: CheckboxConfig;\n    /**\n     * Configuration for the optional labeled combobox.\n     */\n    comboboxConfig?: ComboboxConfig;\n    /**\n     * Whether the search input should receive focus when the filter opens.\n     */\n    shouldAutoFocus: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortComboBoxLists = void 0;
+const getSortComboBoxLists = sortConfig => [{
+  list: sortConfig.items.map(({
+    text,
+    id
+  }) => ({
+    text,
+    value: id
+  }))
+}];
+exports.getSortComboBoxLists = getSortComboBoxLists;
+//# sourceMappingURL=FilterContent.utils.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.utils.js","names":["getSortComboBoxLists","sortConfig","list","items","map","text","id","value","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.utils.ts"],"sourcesContent":["import type { IComboBoxItems } from '../../combobox/ComboBox.types';\nimport type { SortConfig } from '../../../types/filter';\n\nexport const getSortComboBoxLists = (sortConfig: SortConfig): IComboBoxItems[] => [\n    {\n        list: sortConfig.items.map(({ text, id }) => ({\n            text,\n            value: id,\n        })),\n    },\n];\n"],"mappings":";;;;;;AAGO,MAAMA,oBAAoB,GAAIC,UAAsB,IAAuB,CAC9E;EACIC,IAAI,EAAED,UAAU,CAACE,KAAK,CAACC,GAAG,CAAC,CAAC;IAAEC,IAAI;IAAEC;EAAG,CAAC,MAAM;IAC1CD,IAAI;IACJE,KAAK,EAAED;EACX,CAAC,CAAC;AACN,CAAC,CACJ;AAACE,OAAA,CAAAR,oBAAA,GAAAA,oBAAA","ignoreList":[]}

package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js

@@ -24,8 +24,6 @@ const StyledBaseSkeleton = exports.StyledBaseSkeleton = _styledComponents.defaul
 
     user-select: none;
 
-    white-space: nowrap;
-
     ${({
   $shouldUseNativeTag,
   $height

package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSkeleton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledBaseSkeleton","exports","styled","div","$borderRadius","$backgroundColor","$width","$shouldUseNativeTag","$height","css","StyledMotionBaseSkeletonShimmer","motion","$color","StyledMotionBaseSkeletonPulse"],"sources":["../../../../../src/components/skeleton/base-skeleton/BaseSkeleton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\n\ntype StyledBaseSkeletonProps = {\n    $borderRadius: number | string;\n    $backgroundColor: string;\n    $width: number | string;\n    $height: number | string;\n    $shouldUseNativeTag: boolean;\n};\n\nexport const StyledBaseSkeleton = styled.div<StyledBaseSkeletonProps>`\n    position: relative;\n    overflow: hidden;\n    border-radius: ${({ $borderRadius }) =>\n        `${$borderRadius}${typeof $borderRadius === 'number' ? 'px' : ''}`};\n\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n\n    width: ${({ $width }) => `${$width}${typeof $width === 'number' ? 'px' : ''}`};\n\n    user-select: none;\n\n    white-space: nowrap;\n\n    ${({ $shouldUseNativeTag, $height }) =>\n        $shouldUseNativeTag\n            ? css`\n                  color: transparent;\n              `\n            : css`\n                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};\n              `}\n`;\n\ntype StyledMotionBaseSkeletonShimmerProps = {\n    $color: string;\n};\n\nexport const StyledMotionBaseSkeletonShimmer = styled(\n    motion.div,\n)<StyledMotionBaseSkeletonShimmerProps>`\n    background: ${({ $color }) =>\n        `linear-gradient(\n            90deg,\n            transparent 0%,\n            ${$color} 50%,\n            transparent 100%\n        )`};\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    border-radius: 0;\n\n    will-change: transform;\n\n    opacity: 0.06;\n`;\n\ntype StyledMotionBaseSkeletonPulseProps = {\n    $color: string;\n};\n\nexport const StyledMotionBaseSkeletonPulse = styled(motion.div)<StyledMotionBaseSkeletonPulseProps>`\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n\n    opacity: 0.06;\n\n    background-color: ${({ $color }) => $color};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,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,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAU/B,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAc,CAAC,KAC/B,GAAGA,aAAa,GAAG,OAAOA,aAAa,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AAC1E;AACA,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAK,GAAGA,MAAM,GAAG,OAAOA,MAAM,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AACjF;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,mBAAmB;EAAEC;AAAQ,CAAC,KAC/BD,mBAAmB,GACb,IAAAE,qBAAG;AACjB;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB,4BAA4BD,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE;AAC7E,eAAe;AACf,CAAC;AAMM,MAAME,+BAA+B,GAAAT,OAAA,CAAAS,+BAAA,GAAG,IAAAR,yBAAM,EACjDS,aAAM,CAACR,GACX,CAAuC;AACvC,kBAAkB,CAAC;EAAES;AAAO,CAAC,KACrB;AACR;AACA;AACA,cAAcA,MAAM;AACpB;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,6BAA6B,GAAAZ,OAAA,CAAAY,6BAAA,GAAG,IAAAX,yBAAM,EAACS,aAAM,CAACR,GAAG,CAAqC;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAES;AAAO,CAAC,KAAKA,MAAM;AAC9C,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseSkeleton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledBaseSkeleton","exports","styled","div","$borderRadius","$backgroundColor","$width","$shouldUseNativeTag","$height","css","StyledMotionBaseSkeletonShimmer","motion","$color","StyledMotionBaseSkeletonPulse"],"sources":["../../../../../src/components/skeleton/base-skeleton/BaseSkeleton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\n\ntype StyledBaseSkeletonProps = {\n    $borderRadius: number | string;\n    $backgroundColor: string;\n    $width: number | string;\n    $height: number | string;\n    $shouldUseNativeTag: boolean;\n};\n\nexport const StyledBaseSkeleton = styled.div<StyledBaseSkeletonProps>`\n    position: relative;\n    overflow: hidden;\n    border-radius: ${({ $borderRadius }) =>\n        `${$borderRadius}${typeof $borderRadius === 'number' ? 'px' : ''}`};\n\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n\n    width: ${({ $width }) => `${$width}${typeof $width === 'number' ? 'px' : ''}`};\n\n    user-select: none;\n\n    ${({ $shouldUseNativeTag, $height }) =>\n        $shouldUseNativeTag\n            ? css`\n                  color: transparent;\n              `\n            : css`\n                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};\n              `}\n`;\n\ntype StyledMotionBaseSkeletonShimmerProps = {\n    $color: string;\n};\n\nexport const StyledMotionBaseSkeletonShimmer = styled(\n    motion.div,\n)<StyledMotionBaseSkeletonShimmerProps>`\n    background: ${({ $color }) =>\n        `linear-gradient(\n            90deg,\n            transparent 0%,\n            ${$color} 50%,\n            transparent 100%\n        )`};\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    border-radius: 0;\n\n    will-change: transform;\n\n    opacity: 0.06;\n`;\n\ntype StyledMotionBaseSkeletonPulseProps = {\n    $color: string;\n};\n\nexport const StyledMotionBaseSkeletonPulse = styled(motion.div)<StyledMotionBaseSkeletonPulseProps>`\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n\n    opacity: 0.06;\n\n    background-color: ${({ $color }) => $color};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,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,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAU/B,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAc,CAAC,KAC/B,GAAGA,aAAa,GAAG,OAAOA,aAAa,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AAC1E;AACA,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAK,GAAGA,MAAM,GAAG,OAAOA,MAAM,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AACjF;AACA;AACA;AACA,MAAM,CAAC;EAAEC,mBAAmB;EAAEC;AAAQ,CAAC,KAC/BD,mBAAmB,GACb,IAAAE,qBAAG;AACjB;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB,4BAA4BD,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE;AAC7E,eAAe;AACf,CAAC;AAMM,MAAME,+BAA+B,GAAAT,OAAA,CAAAS,+BAAA,GAAG,IAAAR,yBAAM,EACjDS,aAAM,CAACR,GACX,CAAuC;AACvC,kBAAkB,CAAC;EAAES;AAAO,CAAC,KACrB;AACR;AACA;AACA,cAAcA,MAAM;AACpB;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,6BAA6B,GAAAZ,OAAA,CAAAY,6BAAA,GAAG,IAAAX,yBAAM,EAACS,aAAM,CAACR,GAAG,CAAqC;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAES;AAAO,CAAC,KAAKA,MAAM;AAC9C,CAAC","ignoreList":[]}

package/lib/cjs/types/filter.js

@@ -4,6 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FilterType = void 0;
+/**
+ * Search configuration for the `Filter` component.
+ */
+/**
+ * Item configuration used by the sort dropdown.
+ */
+/**
+ * Sort configuration for the `Filter` component.
+ */
+/**
+ * Checkbox configuration for the `Filter` component.
+ */
+/**
+ * Filter button group configuration for the `Filter` component.
+ */
+/**
+ * Combobox configuration used by `FilterContent`.
+ */
+/**
+ * Ref interface for the `Filter` component.
+ */
+/**
+ * Different layout modes supported by the `Filter` component.
+ */
 let FilterType = exports.FilterType = /*#__PURE__*/function (FilterType) {
   FilterType[FilterType["ONLY_SEARCH"] = 0] = "ONLY_SEARCH";
   FilterType[FilterType["ONLY_FILTER"] = 1] = "ONLY_FILTER";

package/lib/cjs/types/filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.js","names":["FilterType","exports"],"sources":["../../../src/types/filter.ts"],"sourcesContent":["import { FilterButtonsProps } from '../components/filter-buttons/FilterButtons';\nimport { CheckboxProps } from '../components/checkbox/Checkbox';\nimport { ComboBoxProps } from '../components/combobox/ComboBox.types';\n\nexport interface SearchConfig {\n    onSearchChange: (search: string) => void;\n    searchValue: string;\n}\n\nexport interface SortItem {\n    text: string;\n    id: string | number;\n}\n\nexport interface SortConfig {\n    onSortChange: (item: SortItem) => void;\n    selectedItem: SortItem;\n    items: SortItem[];\n}\n\nexport type CheckboxConfig = CheckboxProps;\n\nexport type FilterButtonConfig = FilterButtonsProps;\n\nexport type ComboboxConfig = ComboBoxProps & { label: string };\n\nexport type FilterRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\nexport enum FilterType {\n    ONLY_SEARCH,\n    ONLY_FILTER,\n    ONLY_SORT,\n    ONLY_CHECKBOX,\n    ONLY_COMBOBOX,\n    MULTIPLE,\n}\n"],"mappings":";;;;;;IA+BYA,UAAU,GAAAC,OAAA,CAAAD,UAAA,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}
+{"version":3,"file":"filter.js","names":["FilterType","exports"],"sources":["../../../src/types/filter.ts"],"sourcesContent":["import { FilterButtonsProps } from '../components/filter-buttons/FilterButtons';\nimport { CheckboxProps } from '../components/checkbox/Checkbox';\nimport { ComboBoxProps } from '../components/combobox/ComboBox.types';\n\n/**\n * Search configuration for the `Filter` component.\n */\nexport interface SearchConfig {\n    /**\n     * Callback invoked whenever the search input changes.\n     */\n    onSearchChange: (search: string) => void;\n    /**\n     * Current search value.\n     */\n    searchValue: string;\n}\n\n/**\n * Item configuration used by the sort dropdown.\n */\nexport interface SortItem {\n    /**\n     * Display text of the item.\n     */\n    text: string;\n    /**\n     * Stable value or identifier of the item.\n     */\n    id: string | number;\n}\n\n/**\n * Sort configuration for the `Filter` component.\n */\nexport interface SortConfig {\n    /**\n     * Callback invoked when a sort item is selected.\n     */\n    onSortChange: (item: SortItem) => void;\n    /**\n     * Currently selected sort item.\n     */\n    selectedItem: SortItem;\n    /**\n     * Available sort items.\n     */\n    items: SortItem[];\n}\n\n/**\n * Checkbox configuration for the `Filter` component.\n */\nexport type CheckboxConfig = CheckboxProps;\n\n/**\n * Filter button group configuration for the `Filter` component.\n */\nexport type FilterButtonConfig = FilterButtonsProps;\n\n/**\n * Combobox configuration used by `FilterContent`.\n */\nexport type ComboboxConfig = ComboBoxProps & { label: string };\n\n/**\n * Ref interface for the `Filter` component.\n */\nexport type FilterRef = {\n    /**\n     * Hides the filter popup.\n     */\n    hide: VoidFunction;\n    /**\n     * Shows the filter popup.\n     */\n    show: VoidFunction;\n};\n\n/**\n * Different layout modes supported by the `Filter` component.\n */\nexport enum FilterType {\n    ONLY_SEARCH,\n    ONLY_FILTER,\n    ONLY_SORT,\n    ONLY_CHECKBOX,\n    ONLY_COMBOBOX,\n    MULTIPLE,\n}\n"],"mappings":";;;;;;AAIA;AACA;AACA;AAYA;AACA;AACA;AAYA;AACA;AACA;AAgBA;AACA;AACA;AAGA;AACA;AACA;AAGA;AACA;AACA;AAGA;AACA;AACA;AAYA;AACA;AACA;AAFA,IAGYA,UAAU,GAAAC,OAAA,CAAAD,UAAA,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.constants.js

@@ -0,0 +1,9 @@
+export const COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX = 20;
+export const COMBO_BOX_HEADER_BORDER_WIDTH_PX = 2;
+export const COMBO_BOX_ACTION_ICON_WIDTH_PX = 40;
+export const COMBO_BOX_CLEAR_ICON_WIDTH_PX = 40;
+export const COMBO_BOX_ROUNDING_BUFFER_PX = 1;
+export const COMBO_BOX_PREFIX_GAP_PX = 5;
+export const COMBO_BOX_PREFIX_MIN_WIDTH_PX = 32;
+export const COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX = COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + COMBO_BOX_HEADER_BORDER_WIDTH_PX + COMBO_BOX_ROUNDING_BUFFER_PX;
+//# sourceMappingURL=ComboBox.constants.js.map

package/lib/esm/components/combobox/ComboBox.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.constants.js","names":["COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX","COMBO_BOX_HEADER_BORDER_WIDTH_PX","COMBO_BOX_ACTION_ICON_WIDTH_PX","COMBO_BOX_CLEAR_ICON_WIDTH_PX","COMBO_BOX_ROUNDING_BUFFER_PX","COMBO_BOX_PREFIX_GAP_PX","COMBO_BOX_PREFIX_MIN_WIDTH_PX","COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX"],"sources":["../../../../src/components/combobox/ComboBox.constants.ts"],"sourcesContent":["export const COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX = 20;\nexport const COMBO_BOX_HEADER_BORDER_WIDTH_PX = 2;\nexport const COMBO_BOX_ACTION_ICON_WIDTH_PX = 40;\nexport const COMBO_BOX_CLEAR_ICON_WIDTH_PX = 40;\nexport const COMBO_BOX_ROUNDING_BUFFER_PX = 1;\n\nexport const COMBO_BOX_PREFIX_GAP_PX = 5;\nexport const COMBO_BOX_PREFIX_MIN_WIDTH_PX = 32;\n\nexport const COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX =\n    COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX +\n    COMBO_BOX_HEADER_BORDER_WIDTH_PX +\n    COMBO_BOX_ROUNDING_BUFFER_PX;\n"],"mappings":"AAAA,OAAO,MAAMA,sCAAsC,GAAG,EAAE;AACxD,OAAO,MAAMC,gCAAgC,GAAG,CAAC;AACjD,OAAO,MAAMC,8BAA8B,GAAG,EAAE;AAChD,OAAO,MAAMC,6BAA6B,GAAG,EAAE;AAC/C,OAAO,MAAMC,4BAA4B,GAAG,CAAC;AAE7C,OAAO,MAAMC,uBAAuB,GAAG,CAAC;AACxC,OAAO,MAAMC,6BAA6B,GAAG,EAAE;AAE/C,OAAO,MAAMC,wCAAwC,GACjDP,sCAAsC,GACtCC,gCAAgC,GAChCG,4BAA4B","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.js

@@ -1,6 +1,5 @@
 import { useFunctions, useValues } from 'chayns-api';
 import React, { forwardRef, Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { calculateMaxComboBoxItemWidth } from '../../utils/calculate';
 import { useIsTouch } from '../../utils/environment';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import Icon from '../icon/Icon';
@@ -10,6 +9,7 @@ import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
 import { DropdownDirection } from '../../types/dropdown';
 import { useElementSize } from '../../hooks/element';
 import { ComboBoxSize } from './ComboBox.types';
+import { getComboBoxWidthResult } from './ComboBox.utils';
 const ComboBox = /*#__PURE__*/forwardRef(({
   bodyWidth,
   direction = DropdownDirection.RIGHT,
@@ -54,10 +54,31 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   const isTouch = useIsTouch();
   const areaProvider = useContext(AreaContext);
   useEffect(() => {
-    if (shouldUseFullWidth && parentSize) {
-      setMinWidth(parentSize.width);
+    if (!parentSize) {
+      return;
     }
-  }, [parentSize, shouldUseFullWidth]);
+    const {
+      minWidth: calculatedMinWidth,
+      bodyMinWidth: calculatedBodyMinWidth
+    } = getComboBoxWidthResult({
+      functions,
+      internalSelectedItem,
+      lists,
+      parentWidth: parentSize.width,
+      placeholder,
+      prefix,
+      prefixMinWidth,
+      selectedItem,
+      shouldDropDownUseMaxItemWidth,
+      shouldShowBigImage,
+      shouldShowClearIcon,
+      shouldUseCurrentItemWidth,
+      shouldUseFullWidth,
+      values
+    });
+    setMinWidth(calculatedMinWidth);
+    setBodyMinWidth(calculatedBodyMinWidth);
+  }, [functions, internalSelectedItem, lists, parentSize, placeholder, prefix, prefixMinWidth, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const shouldDisableActions = useMemo(() => {
     if (!selectedItem) {
@@ -177,73 +198,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
 
-  /**
-   * This function calculates the greatest width
-   */
-  useEffect(() => {
-    const allItems = lists.flatMap(list => list.list);
-    let maxItemWidth = calculateMaxComboBoxItemWidth({
-      list: [...allItems, {
-        text: placeholder,
-        value: 'placeholder'
-      }, ...(selectedItem ? [selectedItem] : [])],
-      functions,
-      shouldShowBigImage,
-      values
-    });
-    if (shouldDropDownUseMaxItemWidth) {
-      maxItemWidth += 20 + 2 + 1; // 20px padding (left and right), 2px border, 1px puffer for rounding errors
-
-      setBodyMinWidth(maxItemWidth);
-      setMinWidth(maxItemWidth);
-      return;
-    }
-    const parentWidth = styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;
-    const paddingWidth = 20 + 2 + 40 + (shouldShowClearIcon ? 40 : 0) + 1; // padding + border + arrow icon + optional clear icon + 1px puffer for rounding errors
-
-    let prefixWidth = 0;
-    if (prefix) {
-      const prefixTextWidth = calculateMaxComboBoxItemWidth({
-        list: [{
-          text: prefix,
-          value: 'prefix'
-        }],
-        functions,
-        values
-      });
-      prefixWidth = Math.max(prefixTextWidth + 5, 32);
-    }
-    const calculatedWidth = maxItemWidth + paddingWidth + prefixWidth;
-    let tmpMinWidth = calculatedWidth;
-    let tmpBodyMinWidth = calculatedWidth;
-
-    // Full width settings
-    if (shouldUseFullWidth) {
-      tmpMinWidth = parentWidth;
-      tmpBodyMinWidth = parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;
-    }
-    // Current item width settings
-    else if (shouldUseCurrentItemWidth && internalSelectedItem) {
-      const internalSelectedItemWidth = calculateMaxComboBoxItemWidth({
-        list: [internalSelectedItem],
-        functions,
-        shouldShowBigImage,
-        values
-      });
-      const itemWidth = internalSelectedItemWidth + paddingWidth + prefixWidth;
-      tmpMinWidth = itemWidth;
-      tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
-    }
-    if (tmpMinWidth > parentWidth) {
-      tmpMinWidth = parentWidth;
-    }
-    if (tmpBodyMinWidth > parentWidth) {
-      tmpBodyMinWidth = parentWidth;
-    }
-    setMinWidth(tmpMinWidth);
-    setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
-  }, [functions, internalSelectedItem, lists, placeholder, prefix, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
-
   /**
    * This function sets the external selected item
    */
@@ -320,8 +274,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
-    $shouldUseFullWidth: shouldUseFullWidth,
-    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth
+    $shouldUseFullWidth: shouldUseFullWidth
   }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
     $direction: direction,
     onClick: handleHeaderClick,
@@ -373,13 +326,12 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     minBodyWidth: bodyWidth ?? bodyMinWidth,
     maxHeight: maxHeight
   }, /*#__PURE__*/React.createElement(StyledComboBoxBody, {
-    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
     $maxHeight: maxHeight,
     $minWidth: bodyWidth ?? bodyMinWidth,
     className: "chayns-scrollbar",
     ref: contentRef,
     tabIndex: 0
-  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, size, shouldShowTransparentBackground, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, prefixMinWidth, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, shouldCaptureEvents, handleClose, container, bodyMinWidth, maxHeight, comboBoxGroups]);
+  }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, maxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
 });
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;