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

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

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","StyledFilterComboboxInline","StyledFilterComboboxInlineComboboxWrapper","StyledFilterComboboxInlineLabel","StyledFilterComboboxWrapper","StyledFilterContent","StyledFilterSort","StyledFilterSortText","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","sortTextRef","searchRef","sortTextWidth","setSortTextWidth","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","clientWidth","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","sort","$textWidth","lists","list","items","map","selectedItem","onSelect","label","_extends","shouldUseCurrentItemWidth","displayName"],"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","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","sort","lists","selectedItem","onSelect","label","displayName"],"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/esm/components/filter/filter-content/FilterContent.styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { FILTER_CONTENT_ROW_GAP_PX } from './FilterContent.constants';
 export const StyledFilterContent = styled.div`
     background-color: ${({
   theme
@@ -10,36 +11,21 @@ export const StyledFilterContent = styled.div`
     flex-direction: column;
     gap: 10px;
 `;
-export const StyledFilterSort = styled.div`
+export const StyledFilterContentLabeledRow = styled.div`
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-`;
-export const StyledFilterSortText = styled.div`
-    flex: 0 0 auto;
-`;
-export const StyledFilterComboboxWrapper = styled.div`
-    display: flex;
-    justify-content: end;
-    
-    width: ${({
-  $textWidth
-}) => `calc(100% - ${$textWidth}px)`}}
-`;
-export const StyledFilterComboboxInline = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
+    gap: ${FILTER_CONTENT_ROW_GAP_PX}px;
+    width: 100%;
+    min-width: 0;
 `;
-export const StyledFilterComboboxInlineLabel = styled.div`
+export const StyledFilterContentLabel = styled.div`
     flex: 0 0 auto;
+    white-space: nowrap;
 `;
-export const StyledFilterComboboxInlineComboboxWrapper = styled.div`
+export const StyledFilterContentControlWrapper = styled.div`
     display: flex;
-    justify-content: end;
     flex: 1 1 auto;
     min-width: 0;
+    justify-content: flex-end;
 `;
 //# sourceMappingURL=FilterContent.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.styles.js","names":["styled","StyledFilterContent","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,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,mBAAmB,GAAGD,MAAM,CAACE,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAGJ,MAAM,CAACE,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,oBAAoB,GAAGL,MAAM,CAACE,GAAG;AAC9C;AACA,CAAC;AAMD,OAAO,MAAMI,2BAA2B,GAAGN,MAAM,CAACE,GAAqC;AACvF;AACA;AACA;AACA,aAAa,CAAC;EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACE,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMO,+BAA+B,GAAGT,MAAM,CAACE,GAAG;AACzD;AACA,CAAC;AAED,OAAO,MAAMQ,yCAAyC,GAAGV,MAAM,CAACE,GAAG;AACnE;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"FilterContent.styles.js","names":["styled","FILTER_CONTENT_ROW_GAP_PX","StyledFilterContent","div","theme","StyledFilterContentLabeledRow","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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,yBAAyB,QAAQ,2BAA2B;AAIrE,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACG,GAAG;AACvD;AACA;AACA,WAAWF,yBAAyB;AACpC;AACA;AACA,CAAC;AAED,OAAO,MAAMK,wBAAwB,GAAGN,MAAM,CAACG,GAAG;AAClD;AACA;AACA,CAAC;AAED,OAAO,MAAMI,iCAAiC,GAAGP,MAAM,CAACG,GAAG;AAC3D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FilterContent.types.js.map

package/lib/esm/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/esm/components/filter/filter-content/FilterContent.utils.js

@@ -0,0 +1,10 @@
+export const getSortComboBoxLists = sortConfig => [{
+  list: sortConfig.items.map(({
+    text,
+    id
+  }) => ({
+    text,
+    value: id
+  }))
+}];
+//# sourceMappingURL=FilterContent.utils.js.map

package/lib/esm/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"],"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":"AAGA,OAAO,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","ignoreList":[]}

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

@@ -17,8 +17,6 @@ export const StyledBaseSkeleton = styled.div`
 
     user-select: none;
 
-    white-space: nowrap;
-
     ${({
   $shouldUseNativeTag,
   $height

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

@@ -1 +1 @@
-{"version":3,"file":"BaseSkeleton.styles.js","names":["styled","css","motion","StyledBaseSkeleton","div","$borderRadius","$backgroundColor","$width","$shouldUseNativeTag","$height","StyledMotionBaseSkeletonShimmer","$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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,cAAc;AAUrC,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,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,GACbP,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB,4BAA4BQ,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE;AAC7E,eAAe;AACf,CAAC;AAMD,OAAO,MAAMC,+BAA+B,GAAGV,MAAM,CACjDE,MAAM,CAACE,GACX,CAAuC;AACvC,kBAAkB,CAAC;EAAEO;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;AAMD,OAAO,MAAMC,6BAA6B,GAAGZ,MAAM,CAACE,MAAM,CAACE,GAAG,CAAqC;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEO;AAAO,CAAC,KAAKA,MAAM;AAC9C,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseSkeleton.styles.js","names":["styled","css","motion","StyledBaseSkeleton","div","$borderRadius","$backgroundColor","$width","$shouldUseNativeTag","$height","StyledMotionBaseSkeletonShimmer","$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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,cAAc;AAUrC,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,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,GACbP,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB,4BAA4BQ,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE;AAC7E,eAAe;AACf,CAAC;AAMD,OAAO,MAAMC,+BAA+B,GAAGV,MAAM,CACjDE,MAAM,CAACE,GACX,CAAuC;AACvC,kBAAkB,CAAC;EAAEO;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;AAMD,OAAO,MAAMC,6BAA6B,GAAGZ,MAAM,CAACE,MAAM,CAACE,GAAG,CAAqC;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEO;AAAO,CAAC,KAAKA,MAAM;AAC9C,CAAC","ignoreList":[]}

package/lib/esm/types/filter.js

@@ -1,3 +1,34 @@
+/**
+ * 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.
+ */
 export let FilterType = /*#__PURE__*/function (FilterType) {
   FilterType[FilterType["ONLY_SEARCH"] = 0] = "ONLY_SEARCH";
   FilterType[FilterType["ONLY_FILTER"] = 1] = "ONLY_FILTER";

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

@@ -1 +1 @@
-{"version":3,"file":"filter.js","names":["FilterType"],"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":"AA+BA,WAAYA,UAAU,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"],"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;AACA,WAAYA,UAAU,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/types/components/combobox/ComboBox.constants.d.ts

@@ -0,0 +1,8 @@
+export declare const COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX = 20;
+export declare const COMBO_BOX_HEADER_BORDER_WIDTH_PX = 2;
+export declare const COMBO_BOX_ACTION_ICON_WIDTH_PX = 40;
+export declare const COMBO_BOX_CLEAR_ICON_WIDTH_PX = 40;
+export declare const COMBO_BOX_ROUNDING_BUFFER_PX = 1;
+export declare const COMBO_BOX_PREFIX_GAP_PX = 5;
+export declare const COMBO_BOX_PREFIX_MIN_WIDTH_PX = 32;
+export declare const COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX: number;

package/lib/types/components/combobox/ComboBox.styles.d.ts

@@ -1,16 +1,14 @@
 import type { Theme } from '../color-scheme-provider/ColorSchemeProvider';
 import { DropdownDirection } from '../../types/dropdown';
 import { ComboBoxProps, ComboBoxSize } from './ComboBox.types';
-export declare const StyledComboBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldUseFullWidth" | "$minWidth" | "$shouldUseCurrentItemWidth"> & {
+export declare const StyledComboBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldUseFullWidth" | "$minWidth"> & {
     $minWidth?: number;
     $shouldUseFullWidth: ComboBoxProps["shouldUseFullWidth"];
-    $shouldUseCurrentItemWidth: ComboBoxProps["shouldUseCurrentItemWidth"];
 } & {
     theme: Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldUseFullWidth" | "$minWidth" | "$shouldUseCurrentItemWidth"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldUseFullWidth" | "$minWidth"> & {
     $minWidth?: number;
     $shouldUseFullWidth: ComboBoxProps["shouldUseFullWidth"];
-    $shouldUseCurrentItemWidth: ComboBoxProps["shouldUseCurrentItemWidth"];
 } & {
     theme: Theme;
 }, never>>> & string;
@@ -74,14 +72,12 @@ type StyledComboBoxIconWrapperProps = {
     $size: ComboBoxSize;
 };
 export declare const StyledComboBoxIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledComboBoxIconWrapperProps> & StyledComboBoxIconWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledComboBoxIconWrapperProps> & StyledComboBoxIconWrapperProps, never>>> & string;
-export declare const StyledComboBoxBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$maxHeight" | "$minWidth" | "$shouldUseCurrentItemWidth"> & {
-    $shouldUseCurrentItemWidth: boolean;
+export declare const StyledComboBoxBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$maxHeight" | "$minWidth"> & {
     $maxHeight: number;
     $minWidth: number;
 } & {
     theme: Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$maxHeight" | "$minWidth" | "$shouldUseCurrentItemWidth"> & {
-    $shouldUseCurrentItemWidth: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$maxHeight" | "$minWidth"> & {
     $maxHeight: number;
     $minWidth: number;
 } & {

package/lib/types/components/combobox/ComboBox.types.d.ts

@@ -1,55 +1,138 @@
 import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactHTML, ReactNode } from 'react';
 import { CSSPropertiesWithVars } from 'styled-components/dist/types';
 import { DropdownDirection } from '../../types/dropdown';
+/**
+ * Ref interface for the `ComboBox` component.
+ */
 export interface ComboBoxRef {
+    /**
+     * Hides the dropdown content.
+     */
     hide: VoidFunction;
+    /**
+     * Shows the dropdown content.
+     */
     show: VoidFunction;
 }
+/**
+ * A grouped list definition used by the `ComboBox` component.
+ */
 export interface IComboBoxItems {
+    /**
+     * Optional group label shown above the list.
+     */
     groupName?: string;
+    /**
+     * The items that should be rendered inside the group.
+     */
     list: Array<IComboBoxItem>;
+    /**
+     * Whether the items in this group should use round images.
+     */
     shouldShowRoundImage?: boolean;
 }
+/**
+ * Optional text styling configuration for a combobox item.
+ */
 export interface ComboBoxTextStyles {
+    /**
+     * The HTML tag that should be used for the text wrapper.
+     */
     tagName?: keyof ReactHTML;
+    /**
+     * Additional inline styles applied to the text wrapper.
+     */
     styles?: CSSPropertiesWithVars;
+    /**
+     * Additional class name applied to the text wrapper.
+     */
     className?: string;
 }
+/**
+ * Single selectable item configuration for the `ComboBox` component.
+ */
 export interface IComboBoxItem {
+    /**
+     * Optional icon classes rendered before the text.
+     */
     icons?: string[];
+    /**
+     * Optional background style used for the image placeholder.
+     */
     imageBackground?: CSSProperties['background'];
+    /**
+     * Optional image URL rendered for the item.
+     */
     imageUrl?: string;
+    /**
+     * Whether the item should be disabled.
+     */
     isDisabled?: boolean;
+    /**
+     * Optional element rendered on the right side of the item.
+     */
     rightElement?: ReactNode;
+    /**
+     * Optional secondary text rendered below the main text.
+     */
     subtext?: string;
+    /**
+     * Optional suffix element rendered after the text.
+     */
     suffixElement?: ReactNode;
+    /**
+     * Main label of the item.
+     */
     text: string;
+    /**
+     * Stable item value used for selection and matching.
+     */
     value: string | number;
+    /**
+     * Optional text styling overrides for the item label.
+     */
     textStyles?: ComboBoxTextStyles;
 }
+/**
+ * Available size variants for the `ComboBox` header.
+ */
 export declare enum ComboBoxSize {
+    /**
+     * Standard height and spacing.
+     */
     NORMAL = "normal",
+    /**
+     * Compact height and spacing.
+     */
     SMALL = "small"
 }
+/**
+ * Props for the `ComboBox` component.
+ */
 export type ComboBoxProps = {
     /**
      * The width of the body.
+     * @default undefined
      */
     bodyWidth?: number;
     /**
      * The element where the content of the `ComboBox` should be rendered via React Portal.
+     * @default undefined
      */
     container?: Element;
     /**
      * The direction in which the combobox should open.
+     * @default DropdownDirection.RIGHT
      */
     direction?: DropdownDirection;
     /**
      * The value of the optional input.
+     * @default undefined
      */
     inputValue?: string;
     /**
      * Whether the combobox should be disabled.
+     * @default false
      */
     isDisabled?: boolean;
     /**
@@ -58,30 +141,37 @@ export type ComboBoxProps = {
     lists: IComboBoxItems[];
     /**
      * The maximum height of the combobox content.
+     * @default 280
      */
     maxHeight?: number;
     /**
      * Function to be executed when the value of the optional input is changed.
+     * @default undefined
      */
     onInputChange?: ChangeEventHandler<HTMLInputElement>;
     /**
      * Function to be executed when the optional input lost its focus.
+     * @default undefined
      */
     onInputBlur?: FocusEventHandler<HTMLInputElement>;
     /**
      * Function to be executed when the optional input gets its focus.
+     * @default undefined
      */
     onInputFocus?: FocusEventHandler<HTMLInputElement>;
     /**
      * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.
+     * @default undefined
      */
     onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> | boolean | void;
     /**
      * Function to be executed when the content of the `ComboBox` is shown.
+     * @default undefined
      */
     onShow?: () => void;
     /**
      * Function to be executed when the content of the `ComboBox` is hidden.
+     * @default undefined
      */
     onHide?: () => void;
     /**
@@ -90,50 +180,62 @@ export type ComboBoxProps = {
     placeholder: string;
     /**
      * A prefix that should be displayed before the placeholder.
+     * @default undefined
      */
     prefix?: string;
     /**
      * An item that should be preselected.
+     * @default undefined
      */
     selectedItem?: IComboBoxItem;
     /**
      * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.
+     * @default false
      */
     shouldShowBigImage?: boolean;
     /**
      * If true, a clear icon is displayed at the end of the combo box if an item is selected.
+     * @default false
      */
     shouldShowClearIcon?: boolean;
     /**
      * Whether the background should be transparent.
+     * @default false
      */
     shouldShowTransparentBackground?: boolean;
     /**
      * If true, the images of the items are displayed in a round shape.
+     * @default false
      */
     shouldShowRoundImage?: boolean;
     /**
      * Whether the width of the ComboBox should be the width of the current item.
+     * @default false
      */
     shouldUseCurrentItemWidth?: boolean;
     /**
      * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.
+     * @default false
      */
     shouldUseFullWidth?: boolean;
     /**
      * If true, the dropdown will use the maximum width of the items.
+     * @default false
      */
     shouldDropDownUseMaxItemWidth?: boolean;
     /**
      * Whether the outside events should be captured.
+     * @default undefined
      */
     shouldCaptureEvents?: boolean;
     /**
      * The size of the ComboBox.
+     * @default ComboBoxSize.NORMAL
      */
     size?: ComboBoxSize;
     /**
      * Optional min width for the prefix element.
+     * @default undefined
      */
     prefixMinWidth?: number;
 };

package/lib/types/components/combobox/ComboBox.utils.d.ts

@@ -0,0 +1,23 @@
+import type { ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';
+import type { IComboBoxItem, IComboBoxItems } from './ComboBox.types';
+export type ComboBoxWidthOptions = {
+    functions: ChaynsReactFunctions;
+    internalSelectedItem?: IComboBoxItem;
+    lists: IComboBoxItems[];
+    parentWidth: number;
+    placeholder: string;
+    prefix?: string;
+    prefixMinWidth?: number;
+    selectedItem?: IComboBoxItem;
+    shouldDropDownUseMaxItemWidth?: boolean;
+    shouldShowBigImage?: boolean;
+    shouldShowClearIcon?: boolean;
+    shouldUseCurrentItemWidth?: boolean;
+    shouldUseFullWidth?: boolean;
+    values: ChaynsReactValues;
+};
+export type ComboBoxWidthResult = {
+    minWidth?: number;
+    bodyMinWidth: number;
+};
+export declare const getComboBoxWidthResult: ({ functions, internalSelectedItem, lists, parentWidth, placeholder, prefix, prefixMinWidth, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values, }: ComboBoxWidthOptions) => ComboBoxWidthResult;

package/lib/types/components/filter/filter-content/FilterContent.constants.d.ts

@@ -0,0 +1 @@
+export declare const FILTER_CONTENT_ROW_GAP_PX = 10;

package/lib/types/components/filter/filter-content/FilterContent.d.ts

@@ -1,12 +1,4 @@
 import { FC } from 'react';
-import { CheckboxConfig, ComboboxConfig, FilterButtonConfig, SearchConfig, SortConfig } from '../../../types/filter';
-export type FilterContentProps = {
-    searchConfig?: SearchConfig;
-    filterButtonConfig?: FilterButtonConfig;
-    sortConfig?: SortConfig;
-    checkboxConfig?: CheckboxConfig;
-    comboboxConfig?: ComboboxConfig;
-    shouldAutoFocus: boolean;
-};
+import type { FilterContentProps } from './FilterContent.types';
 declare const FilterContent: FC<FilterContentProps>;
 export default FilterContent;

package/lib/types/components/filter/filter-content/FilterContent.styles.d.ts

@@ -3,17 +3,6 @@ export declare const StyledFilterContent: import("styled-components/dist/types")
 }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
-export declare const StyledFilterSort: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledFilterSortText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledFilterComboboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$textWidth"> & {
-    $textWidth: number;
-} & {
-    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$textWidth"> & {
-    $textWidth: number;
-} & {
-    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>>> & string;
-export declare const StyledFilterComboboxInline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledFilterComboboxInlineLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledFilterComboboxInlineComboboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledFilterContentLabeledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledFilterContentLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledFilterContentControlWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/types/components/filter/filter-content/FilterContent.types.d.ts

@@ -0,0 +1,30 @@
+import type { CheckboxConfig, ComboboxConfig, FilterButtonConfig, SearchConfig, SortConfig } from '../../../types/filter';
+/**
+ * Props for the `FilterContent` component.
+ */
+export type FilterContentProps = {
+    /**
+     * Search configuration for the optional search input.
+     */
+    searchConfig?: SearchConfig;
+    /**
+     * Configuration for the optional filter button group.
+     */
+    filterButtonConfig?: FilterButtonConfig;
+    /**
+     * Configuration for the optional sort combobox.
+     */
+    sortConfig?: SortConfig;
+    /**
+     * Configuration for the optional checkbox.
+     */
+    checkboxConfig?: CheckboxConfig;
+    /**
+     * Configuration for the optional labeled combobox.
+     */
+    comboboxConfig?: ComboboxConfig;
+    /**
+     * Whether the search input should receive focus when the filter opens.
+     */
+    shouldAutoFocus: boolean;
+};

package/lib/types/components/filter/filter-content/FilterContent.utils.d.ts

@@ -0,0 +1,3 @@
+import type { IComboBoxItems } from '../../combobox/ComboBox.types';
+import type { SortConfig } from '../../../types/filter';
+export declare const getSortComboBoxLists: (sortConfig: SortConfig) => IComboBoxItems[];