@chayns-components/core 5.4.8-alpha.0 → 5.4.13-alpha.0

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.js","names":["_react","_interopRequireWildcard","require","_element","_uuid","_searchBox","_FilterButtons","_interopRequireDefault","_SearchBoxBody","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchBoxBody","forwardRef","filterButtons","selectedGroups","height","children","shouldShow","onGroupSelect","shouldHideFilterButtons","ref","hasScrolled","setHasScrolled","useState","currentGroupName","setCurrentGroupName","headRef","useRef","headSize","useElementSize","uuid","useUuid","headHeight","useMemo","useEffect","element","document","getElementById","length","getCurrentGroupName","handlePreventDefault","event","preventDefault","stopPropagation","handleScroll","useCallback","scrollTop","target","createElement","StyledSearchBoxBody","onClick","inert","undefined","StyledSearchBoxBodyHead","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","StyledSearchBoxBodyHeadGroupName","replace","StyledSearchBoxBodyContent","$height","$headHeight","key","id","className","tabIndex","onScroll","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    MouseEvent,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/element';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterButtons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    onGroupSelect?: (keys: string[]) => void;\n    shouldHideFilterButtons?: boolean;\n    shouldShow: boolean;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    (\n        {\n            filterButtons,\n            selectedGroups,\n            height,\n            children,\n            shouldShow,\n            onGroupSelect,\n            shouldHideFilterButtons,\n        },\n        ref,\n    ) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchBoxContent__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handlePreventDefault = (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledSearchBoxBody\n                    onClick={handlePreventDefault}\n                    ref={ref}\n                    inert={!shouldShow ? 'true' : undefined}\n                >\n                    {filterButtons && filterButtons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            {!shouldHideFilterButtons && (\n                                <FilterButtons\n                                    items={filterButtons}\n                                    size={0}\n                                    onSelect={onGroupSelect}\n                                    selectedItemIds={selectedGroups}\n                                />\n                            )}\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName.replace('_', '')}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchBoxContent__${uuid}`}\n                        className=\"chayns-scrollbar\"\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledSearchBoxBody>\n            ),\n            [\n                children,\n                currentGroupName,\n                filterButtons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                shouldHideFilterButtons,\n                shouldShow,\n                uuid,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.js","names":["_react","_interopRequireWildcard","require","_element","_uuid","_searchBox","_FilterButtons","_interopRequireDefault","_SearchBoxBody","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchBoxBody","forwardRef","filterButtons","selectedGroups","height","maxHeight","children","shouldShow","onGroupSelect","shouldHideFilterButtons","ref","hasScrolled","setHasScrolled","useState","currentGroupName","setCurrentGroupName","headRef","useRef","headSize","useElementSize","uuid","useUuid","headHeight","useMemo","useEffect","element","document","getElementById","length","getCurrentGroupName","handlePreventDefault","event","preventDefault","stopPropagation","handleScroll","useCallback","scrollTop","target","createElement","StyledSearchBoxBody","onClick","inert","undefined","StyledSearchBoxBodyHead","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","StyledSearchBoxBodyHeadGroupName","replace","StyledSearchBoxBodyContent","$height","$headHeight","$maxHeight","key","id","className","tabIndex","onScroll","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    MouseEvent,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/element';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterButtons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    maxHeight?: number;\n    onGroupSelect?: (keys: string[]) => void;\n    shouldHideFilterButtons?: boolean;\n    shouldShow: boolean;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    (\n        {\n            filterButtons,\n            selectedGroups,\n            height,\n            maxHeight = 300,\n            children,\n            shouldShow,\n            onGroupSelect,\n            shouldHideFilterButtons,\n        },\n        ref,\n    ) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchBoxContent__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handlePreventDefault = (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledSearchBoxBody\n                    onClick={handlePreventDefault}\n                    ref={ref}\n                    inert={!shouldShow ? 'true' : undefined}\n                >\n                    {filterButtons && filterButtons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            {!shouldHideFilterButtons && (\n                                <FilterButtons\n                                    items={filterButtons}\n                                    size={0}\n                                    onSelect={onGroupSelect}\n                                    selectedItemIds={selectedGroups}\n                                />\n                            )}\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName.replace('_', '')}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        $maxHeight={maxHeight}\n                        key=\"content\"\n                        id={`searchBoxContent__${uuid}`}\n                        className=\"chayns-scrollbar\"\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledSearchBoxBody>\n            ),\n            [\n                children,\n                currentGroupName,\n                filterButtons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                maxHeight,\n                ref,\n                selectedGroups,\n                shouldHideFilterButtons,\n                shouldShow,\n                uuid,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js

@@ -39,11 +39,13 @@ const StyledSearchBoxBodyContent = exports.StyledSearchBoxBodyContent = _styledC
     cursor: pointer;
     width: 100%;
     max-height: ${({
-  $headHeight
-}) => 300 - $headHeight}px;
+  $headHeight,
+  $maxHeight
+}) => $maxHeight - $headHeight}px;
     overflow-y: ${({
   $height,
-  $headHeight
-}) => $height + $headHeight <= 300 ? 'hidden' : 'auto'};
+  $headHeight,
+  $maxHeight
+}) => $height + $headHeight <= $maxHeight ? 'hidden' : 'auto'};
 `;
 //# sourceMappingURL=SearchBoxBody.styles.js.map

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxBody","exports","styled","div","StyledSearchBoxBodyHead","$hasGroupName","css","$hasScrolled","StyledSearchBoxBodyHeadGroupName","theme","text","StyledSearchBoxBodyContent","$headHeight","$height"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBoxBody = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n    color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAGzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAc,CAAC,KAChBA,aAAa,IACb,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAD,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAMM,MAAME,gCAAgC,GAAAP,OAAA,CAAAO,gCAAA,GAAGN,yBAAM,CAACC,GAA8C;AACrG,aAAa,CAAC;EAAEM;AAAiD,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA,CAAC;AAOM,MAAMC,0BAA0B,GAAAV,OAAA,CAAAU,0BAAA,GAAGT,yBAAM,CAACC,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAES;AAAY,CAAC,KAAK,GAAG,GAAGA,WAAW;AACxD,kBAAkB,CAAC;EAAEC,OAAO;EAAED;AAAY,CAAC,KAAMC,OAAO,GAAGD,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AAClG,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxBody","exports","styled","div","StyledSearchBoxBodyHead","$hasGroupName","css","$hasScrolled","StyledSearchBoxBodyHeadGroupName","theme","text","StyledSearchBoxBodyContent","$headHeight","$maxHeight","$height"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBoxBody = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n    color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n    $maxHeight: number;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight, $maxHeight }) => $maxHeight - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight, $maxHeight }) =>\n        $height + $headHeight <= $maxHeight ? 'hidden' : 'auto'};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAGzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAc,CAAC,KAChBA,aAAa,IACb,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAD,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAMM,MAAME,gCAAgC,GAAAP,OAAA,CAAAO,gCAAA,GAAGN,yBAAM,CAACC,GAA8C;AACrG,aAAa,CAAC;EAAEM;AAAiD,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA,CAAC;AAQM,MAAMC,0BAA0B,GAAAV,OAAA,CAAAU,0BAAA,GAAGT,yBAAM,CAACC,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAES,WAAW;EAAEC;AAAW,CAAC,KAAKA,UAAU,GAAGD,WAAW;AAC3E,kBAAkB,CAAC;EAAEE,OAAO;EAAEF,WAAW;EAAEC;AAAW,CAAC,KAC/CC,OAAO,GAAGF,WAAW,IAAIC,UAAU,GAAG,QAAQ,GAAG,MAAM;AAC/D,CAAC","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-item/SearchBoxItem.js

@@ -11,6 +11,7 @@ const SearchBoxItem = ({
   id,
   text,
   imageUrl,
+  shouldShowSmallItems,
   shouldShowRoundImage,
   onSelect,
   groupName,
@@ -37,10 +38,11 @@ const SearchBoxItem = ({
     src: imageUrl,
     $shouldShowRoundImage: shouldShowRoundImage
   }), /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, {
+    $shouldShowSmallItems: shouldShowSmallItems,
     dangerouslySetInnerHTML: {
       __html: text
     }
-  })), [handleClick, idString, imageUrl, shouldShowRoundImage, text, tabIndex]);
+  })), [handleClick, idString, imageUrl, shouldShowRoundImage, shouldShowSmallItems, text, tabIndex]);
 };
 SearchBoxItem.displayName = 'SearchBoxItem';
 var _default = exports.default = SearchBoxItem;

package/lib/cjs/components/search-box/search-box-item/SearchBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchBoxItem","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","tabIndex","handleClick","useCallback","event","preventDefault","stopPropagation","idString","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemImage","src","$shouldShowRoundImage","StyledSearchBoxItemText","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem, groupName?: ISearchBoxItems['groupName']) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowRoundImage?: boolean;\n    groupName?: ISearchBoxItems['groupName'];\n    tabIndex: number;\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowRoundImage,\n    onSelect,\n    groupName,\n    tabIndex,\n}) => {\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onSelect({ id: id === 'input-value' ? text : id, text, imageUrl }, groupName);\n        },\n        [onSelect, id, text, imageUrl, groupName],\n    );\n\n    let idString = `search-box-item__${id}`;\n\n    if (groupName) {\n        idString = `_${groupName}`;\n    }\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={idString} onClick={handleClick} tabIndex={tabIndex}>\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText dangerouslySetInnerHTML={{ __html: text }} />\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, idString, imageUrl, shouldShowRoundImage, text, tabIndex],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAIgC,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;AAYhC,MAAMkB,aAAqC,GAAGA,CAAC;EAC3CC,EAAE;EACFC,IAAI;EACJC,QAAQ;EACRC,oBAAoB;EACpBC,QAAQ;EACRC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC1BC,KAAiB,IAAK;IACnBA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvBP,QAAQ,CAAC;MAAEJ,EAAE,EAAEA,EAAE,KAAK,aAAa,GAAGC,IAAI,GAAGD,EAAE;MAAEC,IAAI;MAAEC;IAAS,CAAC,EAAEG,SAAS,CAAC;EACjF,CAAC,EACD,CAACD,QAAQ,EAAEJ,EAAE,EAAEC,IAAI,EAAEC,QAAQ,EAAEG,SAAS,CAC5C,CAAC;EAED,IAAIO,QAAQ,GAAG,oBAAoBZ,EAAE,EAAE;EAEvC,IAAIK,SAAS,EAAE;IACXO,QAAQ,GAAG,IAAIP,SAAS,EAAE;EAC9B;EAEA,OAAO,IAAAQ,cAAO,EACV,mBACIrC,MAAA,CAAAc,OAAA,CAAAwB,aAAA,CAACnC,cAAA,CAAAoC,mBAAmB;IAACf,EAAE,EAAEY,QAAS;IAACI,OAAO,EAAET,WAAY;IAACD,QAAQ,EAAEA;EAAS,GACvEJ,QAAQ,iBACL1B,MAAA,CAAAc,OAAA,CAAAwB,aAAA,CAACnC,cAAA,CAAAsC,wBAAwB;IACrBC,GAAG,EAAEhB,QAAS;IACdiB,qBAAqB,EAAEhB;EAAqB,CAC/C,CACJ,eACD3B,MAAA,CAAAc,OAAA,CAAAwB,aAAA,CAACnC,cAAA,CAAAyC,uBAAuB;IAACC,uBAAuB,EAAE;MAAEC,MAAM,EAAErB;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACM,WAAW,EAAEK,QAAQ,EAAEV,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,EAAEK,QAAQ,CAC1E,CAAC;AACL,CAAC;AAEDP,aAAa,CAACwB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnC,OAAA,GAE7BS,aAAa","ignoreList":[]}
+{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchBoxItem","id","text","imageUrl","shouldShowSmallItems","shouldShowRoundImage","onSelect","groupName","tabIndex","handleClick","useCallback","event","preventDefault","stopPropagation","idString","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemImage","src","$shouldShowRoundImage","StyledSearchBoxItemText","$shouldShowSmallItems","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem, groupName?: ISearchBoxItems['groupName']) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowSmallItems?: boolean;\n    shouldShowRoundImage?: boolean;\n    groupName?: ISearchBoxItems['groupName'];\n    tabIndex: number;\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowSmallItems,\n    shouldShowRoundImage,\n    onSelect,\n    groupName,\n    tabIndex,\n}) => {\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onSelect({ id: id === 'input-value' ? text : id, text, imageUrl }, groupName);\n        },\n        [onSelect, id, text, imageUrl, groupName],\n    );\n\n    let idString = `search-box-item__${id}`;\n\n    if (groupName) {\n        idString = `_${groupName}`;\n    }\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={idString} onClick={handleClick} tabIndex={tabIndex}>\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText\n                    $shouldShowSmallItems={shouldShowSmallItems}\n                    dangerouslySetInnerHTML={{ __html: text }}\n                />\n            </StyledSearchBoxItem>\n        ),\n        [\n            handleClick,\n            idString,\n            imageUrl,\n            shouldShowRoundImage,\n            shouldShowSmallItems,\n            text,\n            tabIndex,\n        ],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-item/SearchBoxItem.styles.js

@@ -42,7 +42,12 @@ const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledCompone
     color: ${({
   theme
 }) => theme.text};
-    margin: 5px 0 !important;
+    font-size: ${({
+  $shouldShowSmallItems
+}) => $shouldShowSmallItems ? '14px' : undefined};
+    margin: ${({
+  $shouldShowSmallItems
+}) => $shouldShowSmallItems ? '0 !important' : '5px 0 !important'};
 
     b {
         color: ${({

package/lib/cjs/components/search-box/search-box-item/SearchBoxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxItem","exports","styled","div","theme","StyledSearchBoxItemImage","img","$shouldShowRoundImage","css","StyledSearchBoxItemText","p","text","headline"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\n    }\n\n    &[tabindex='0'] {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\n    }\n`;\n\ntype StyledSearchBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledSearchBoxItemImage = styled.img<StyledSearchBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledSearchBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    margin: 5px 0 !important;\n\n    b {\n        color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.headline};\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAIzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACrF;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACrF;AACA,CAAC;AAIM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACI,GAAkC;AACjF;AACA,eAAe,CAAC;EAAEF;AAAqC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA;AACA,MAAM,CAAC;EAAEG;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACQ,CAA+B;AAC7E,aAAa,CAAC;EAAEN;AAAoC,CAAC,KAAKA,KAAK,CAACO,IAAI;AACpE;AACA;AACA;AACA,iBAAiB,CAAC;EAAEP;AAAoC,CAAC,KAAKA,KAAK,CAACQ,QAAQ;AAC5E;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxItem","exports","styled","div","theme","StyledSearchBoxItemImage","img","$shouldShowRoundImage","css","StyledSearchBoxItemText","p","text","$shouldShowSmallItems","undefined","headline"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\n    }\n\n    &[tabindex='0'] {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\n    }\n`;\n\ntype StyledSearchBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledSearchBoxItemImage = styled.img<StyledSearchBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledSearchBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<{ $shouldShowSmallItems?: boolean }>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    font-size: ${({ $shouldShowSmallItems }) => ($shouldShowSmallItems ? '14px' : undefined)};\n    margin: ${({ $shouldShowSmallItems }) =>\n        $shouldShowSmallItems ? '0 !important' : '5px 0 !important'};\n\n    b {\n        color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.headline};\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAIzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACrF;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACrF;AACA,CAAC;AAIM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACI,GAAkC;AACjF;AACA,eAAe,CAAC;EAAEF;AAAqC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA;AACA,MAAM,CAAC;EAAEG;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACQ,CAA+B;AAC7E,aAAa,CAAC;EAAEN;AAAoC,CAAC,KAAKA,KAAK,CAACO,IAAI;AACpE,iBAAiB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,MAAM,GAAGC,SAAU;AAC5F,cAAc,CAAC;EAAED;AAAsB,CAAC,KAChCA,qBAAqB,GAAG,cAAc,GAAG,kBAAkB;AACnE;AACA;AACA,iBAAiB,CAAC;EAAER;AAAoC,CAAC,KAAKA,KAAK,CAACU,QAAQ;AAC5E;AACA,CAAC","ignoreList":[]}

package/lib/cjs/utils/searchBox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchList = exports.getCurrentGroupName = void 0;
+exports.sortSearchBoxItems = exports.searchList = exports.getCurrentGroupName = void 0;
 const surroundWithBTag = (text, startIndex, length) => {
   const before = text.substring(0, startIndex);
   const highlighted = text.substring(startIndex, startIndex + length);
@@ -44,6 +44,24 @@ const getCurrentGroupName = element => {
   return currentGroupName;
 };
 exports.getCurrentGroupName = getCurrentGroupName;
+const sortSearchBoxItems = ({
+  searchString,
+  items
+}) => {
+  const lowercaseSearchString = searchString.toLowerCase();
+  return [...items].sort((a, b) => {
+    const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);
+    const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);
+    if (aStartsWithSearchString && !bStartsWithSearchString) {
+      return -1;
+    }
+    if (!aStartsWithSearchString && bStartsWithSearchString) {
+      return 1;
+    }
+    return a.text.localeCompare(b.text);
+  });
+};
+exports.sortSearchBoxItems = sortSearchBoxItems;
 const searchList = ({
   searchString,
   items
@@ -65,18 +83,10 @@ const searchList = ({
       }
     }
   });
-  matchingItems.sort((a, b) => {
-    const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);
-    const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);
-    if (aStartsWithSearchString && !bStartsWithSearchString) {
-      return -1;
-    }
-    if (!aStartsWithSearchString && bStartsWithSearchString) {
-      return 1;
-    }
-    return a.text.localeCompare(b.text);
+  return sortSearchBoxItems({
+    items: matchingItems,
+    searchString
   });
-  return matchingItems;
 };
 exports.searchList = searchList;
 //# sourceMappingURL=searchBox.js.map

package/lib/cjs/utils/searchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchBox.js","names":["surroundWithBTag","text","startIndex","length","before","substring","highlighted","after","getCurrentGroupName","element","hasChildrenFound","currentGroupName","top","parentTop","getBoundingClientRect","children","Array","from","forEach","child","y","childrenY","height","childrenHeight","id","sum","currentGroup","startsWith","nummer","split","pop","exports","searchList","searchString","items","matchingItems","lowercaseSearchString","toLowerCase","item","lowercaseText","includes","push","indexOf","highlightedText","sort","a","b","aStartsWithSearchString","bStartsWithSearchString","localeCompare"],"sources":["../../../src/utils/searchBox.ts"],"sourcesContent":["import type { ISearchBoxItem } from '../types/searchBox';\n\nconst surroundWithBTag = (text: string, startIndex: number, length: number) => {\n    const before = text.substring(0, startIndex);\n    const highlighted = text.substring(startIndex, startIndex + length);\n    const after = text.substring(startIndex + length);\n\n    return `${before}<b>${highlighted}</b>${after}`;\n};\n\nexport const getCurrentGroupName = (element: HTMLElement) => {\n    let hasChildrenFound = false;\n    let currentGroupName = '';\n\n    const { top: parentTop } = element.getBoundingClientRect();\n    const { children } = element;\n\n    Array.from(children).forEach((child) => {\n        if (hasChildrenFound) {\n            return;\n        }\n\n        const { y: childrenY, height: childrenHeight } = child.getBoundingClientRect();\n        const { id } = child;\n\n        const sum = childrenY + childrenHeight - parentTop;\n\n        if (sum >= 0) {\n            hasChildrenFound = true;\n            let currentGroup = id;\n\n            if (id.startsWith('search-box-item__')) {\n                const nummer = id.split('__')[1];\n                currentGroup = nummer?.split('_').pop() ?? '';\n            }\n\n            currentGroupName = currentGroup;\n        }\n    });\n\n    return currentGroupName;\n};\n\ninterface SearchListOptions {\n    items: ISearchBoxItem[];\n    searchString: string;\n}\n\nexport const searchList = ({ searchString, items }: SearchListOptions) => {\n    const matchingItems: ISearchBoxItem[] = [];\n\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    items.forEach((item) => {\n        const lowercaseText = item.text.toLowerCase();\n\n        if (lowercaseText.includes(lowercaseSearchString)) {\n            if (searchString === '') {\n                matchingItems.push(item);\n            } else {\n                const startIndex = lowercaseText.indexOf(lowercaseSearchString);\n                const highlightedText = surroundWithBTag(\n                    item.text,\n                    startIndex,\n                    searchString.length,\n                );\n                matchingItems.push({ ...item, text: highlightedText });\n            }\n        }\n    });\n\n    matchingItems.sort((a, b) => {\n        const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);\n        const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);\n\n        if (aStartsWithSearchString && !bStartsWithSearchString) {\n            return -1;\n        }\n        if (!aStartsWithSearchString && bStartsWithSearchString) {\n            return 1;\n        }\n        return a.text.localeCompare(b.text);\n    });\n\n    return matchingItems;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"searchBox.js","names":["surroundWithBTag","text","startIndex","length","before","substring","highlighted","after","getCurrentGroupName","element","hasChildrenFound","currentGroupName","top","parentTop","getBoundingClientRect","children","Array","from","forEach","child","y","childrenY","height","childrenHeight","id","sum","currentGroup","startsWith","nummer","split","pop","exports","sortSearchBoxItems","searchString","items","lowercaseSearchString","toLowerCase","sort","a","b","aStartsWithSearchString","bStartsWithSearchString","localeCompare","searchList","matchingItems","item","lowercaseText","includes","push","indexOf","highlightedText"],"sources":["../../../src/utils/searchBox.ts"],"sourcesContent":["import type { ISearchBoxItem } from '../types/searchBox';\n\nconst surroundWithBTag = (text: string, startIndex: number, length: number) => {\n    const before = text.substring(0, startIndex);\n    const highlighted = text.substring(startIndex, startIndex + length);\n    const after = text.substring(startIndex + length);\n\n    return `${before}<b>${highlighted}</b>${after}`;\n};\n\nexport const getCurrentGroupName = (element: HTMLElement) => {\n    let hasChildrenFound = false;\n    let currentGroupName = '';\n\n    const { top: parentTop } = element.getBoundingClientRect();\n    const { children } = element;\n\n    Array.from(children).forEach((child) => {\n        if (hasChildrenFound) {\n            return;\n        }\n\n        const { y: childrenY, height: childrenHeight } = child.getBoundingClientRect();\n        const { id } = child;\n\n        const sum = childrenY + childrenHeight - parentTop;\n\n        if (sum >= 0) {\n            hasChildrenFound = true;\n            let currentGroup = id;\n\n            if (id.startsWith('search-box-item__')) {\n                const nummer = id.split('__')[1];\n                currentGroup = nummer?.split('_').pop() ?? '';\n            }\n\n            currentGroupName = currentGroup;\n        }\n    });\n\n    return currentGroupName;\n};\n\ninterface SearchListOptions {\n    items: ISearchBoxItem[];\n    searchString: string;\n}\n\nexport const sortSearchBoxItems = ({ searchString, items }: SearchListOptions) => {\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    return [...items].sort((a, b) => {\n        const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);\n        const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);\n\n        if (aStartsWithSearchString && !bStartsWithSearchString) {\n            return -1;\n        }\n        if (!aStartsWithSearchString && bStartsWithSearchString) {\n            return 1;\n        }\n        return a.text.localeCompare(b.text);\n    });\n};\n\nexport const searchList = ({ searchString, items }: SearchListOptions) => {\n    const matchingItems: ISearchBoxItem[] = [];\n\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    items.forEach((item) => {\n        const lowercaseText = item.text.toLowerCase();\n\n        if (lowercaseText.includes(lowercaseSearchString)) {\n            if (searchString === '') {\n                matchingItems.push(item);\n            } else {\n                const startIndex = lowercaseText.indexOf(lowercaseSearchString);\n                const highlightedText = surroundWithBTag(\n                    item.text,\n                    startIndex,\n                    searchString.length,\n                );\n                matchingItems.push({ ...item, text: highlightedText });\n            }\n        }\n    });\n\n    return sortSearchBoxItems({ items: matchingItems, searchString });\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/radio-button/RadioButton.styles.js

@@ -115,7 +115,7 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
         `;
 }}
 `;
-export const StyledRadioButtonLabel = styled.p`
+export const StyledRadioButtonLabel = styled.div`
     color: ${({
   theme
 }) => theme.text};

package/lib/esm/components/radio-button/RadioButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","keyboardFocusHighlightingCircleRingCss","StyledRadioButton","span","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","div","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBox","input","$shouldShowKeyboardHighlighting","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","p","text","StyledLabelWrapper","StyledMotionRadioButtonChildren"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\ntype StyledRadioButtonWrapperProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledRadioButtonWrapper = styled.div<StyledRadioButtonWrapperProps>`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n    $isChecked: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    z-index: 1;\n    cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{\n    $isDisabled: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible + ${StyledRadioButtonPseudoCheckBox} {\n                transition: none;\n                ${keyboardFocusHighlightingCircleRingCss}\n            }\n        `}\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 20px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","keyboardFocusHighlightingCircleRingCss","StyledRadioButton","span","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","div","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBox","input","$shouldShowKeyboardHighlighting","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","text","StyledLabelWrapper","StyledMotionRadioButtonChildren"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\ntype StyledRadioButtonWrapperProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledRadioButtonWrapper = styled.div<StyledRadioButtonWrapperProps>`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n    $isChecked: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    z-index: 1;\n    cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{\n    $isDisabled: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible + ${StyledRadioButtonPseudoCheckBox} {\n                transition: none;\n                ${keyboardFocusHighlightingCircleRingCss}\n            }\n        `}\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.div<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 20px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-box/SearchBox.js

@@ -2,7 +2,7 @@ import { useDevice } from 'chayns-api';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 import { calculateContentHeight } from '../../utils/calculate';
-import { searchList } from '../../utils/searchBox';
+import { searchList, sortSearchBoxItems } from '../../utils/searchBox';
 import Icon from '../icon/Icon';
 import Input from '../input/Input';
 import GroupName from './group-name/GroupName';
@@ -13,6 +13,35 @@ import { StyledSearchBox, StyledSearchBoxHintText, StyledSearchBoxIcon, StyledSe
 import { useUuid } from '../../hooks/uuid';
 import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
 import TagInput from '../tag-input/TagInput';
+const filterSearchBoxItems = ({
+  customFilter,
+  items,
+  searchString,
+  shouldUseCustomFilterOnly
+}) => {
+  if (typeof customFilter !== 'function') {
+    return searchList({
+      items,
+      searchString
+    });
+  }
+  if (shouldUseCustomFilterOnly) {
+    const filteredItems = items.filter(customFilter);
+    return sortSearchBoxItems({
+      items: filteredItems,
+      searchString
+    });
+  }
+  return searchList({
+    items,
+    searchString
+  }).filter(customFilter);
+};
+const getDropdownSearchString = ({
+  selectedId,
+  shouldKeepSelectedItemPosition,
+  value
+}) => shouldKeepSelectedItemPosition && selectedId ? '' : value;
 const SearchBox = /*#__PURE__*/forwardRef(({
   container,
   customFilter,
@@ -20,6 +49,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   isInvalid = false,
   leftIcons,
   lists,
+  maxHeight = 300,
   onBlur,
   onChange,
   onKeyDown,
@@ -29,8 +59,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   hintText,
   selectedId,
   shouldAddInputToList = true,
+  shouldKeepSelectedItemPosition = false,
+  shouldUseCustomFilterOnly = false,
   shouldHideFilterButtons = false,
   shouldShowContentOnEmptyInput = true,
+  shouldShowSmallItems = false,
   shouldShowRoundImage,
   shouldShowToggleIcon = false,
   tagInputSettings,
@@ -55,6 +88,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   const isAnimatingRef = useRef(false);
   const shouldShowPresetValue = useRef(typeof presetValue === 'string' && presetValue !== '');
   const theme = useTheme();
+  const dropdownSearchString = getDropdownSearchString({
+    selectedId,
+    shouldKeepSelectedItemPosition,
+    value
+  });
   const {
     isTouch
   } = useDevice();
@@ -102,9 +140,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       list,
       groupName
     }) => {
-      const newList = searchList({
+      const newList = filterSearchBoxItems({
+        customFilter,
         items: list,
-        searchString: value
+        searchString: dropdownSearchString,
+        shouldUseCustomFilterOnly
       });
       if (newList.length > 0) {
         newMatchingItems.push({
@@ -125,15 +165,15 @@ const SearchBox = /*#__PURE__*/forwardRef(({
     }) => ({
       groupName,
       list: list.filter(item => {
-        if (typeof customFilter === 'function') {
-          return customFilter(item);
+        if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {
+          return true;
         }
-        return !(newMatchingItems.length === 1 && item.text === value);
+        return !(newMatchingItems.length === 1 && item.text === dropdownSearchString);
       })
     }));
     setMatchingListsItems(filteredMatchingListItems);
     return newLists;
-  }, [groups, lists, customFilter, shouldAddInputToList, value]);
+  }, [groups, lists, customFilter, dropdownSearchString, shouldAddInputToList, shouldUseCustomFilterOnly]);
   const handleOpen = useCallback(() => {
     setShouldShowBody(true);
   }, []);
@@ -217,9 +257,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
         list,
         groupName
       }) => {
-        const newList = searchList({
+        const newList = filterSearchBoxItems({
+          customFilter,
           items: list,
-          searchString: value
+          searchString: dropdownSearchString,
+          shouldUseCustomFilterOnly
         });
         if (newList.length > 0) {
           newMatchingItems.push({
@@ -240,10 +282,10 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       }) => ({
         groupName,
         list: list.filter(item => {
-          if (typeof customFilter === 'function') {
-            return customFilter(item);
+          if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {
+            return true;
           }
-          return !(newMatchingItems.length === 1 && item.text === value);
+          return !(newMatchingItems.length === 1 && item.text === dropdownSearchString);
         })
       }));
       setMatchingListsItems(filteredMatchingListItems);
@@ -251,7 +293,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
         handleOpen();
       }
     }
-  }, [shouldShowContentOnEmptyInput, activeList, shouldAddInputToList, hintText, value, customFilter, handleOpen]);
+  }, [shouldShowContentOnEmptyInput, activeList, shouldAddInputToList, hintText, dropdownSearchString, customFilter, shouldUseCustomFilterOnly, handleOpen]);
 
   /**
    * This function filters the lists by input
@@ -263,9 +305,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       list,
       groupName
     }) => {
-      const newList = searchList({
+      const newList = filterSearchBoxItems({
+        customFilter,
         items: list,
-        searchString: value
+        searchString: dropdownSearchString,
+        shouldUseCustomFilterOnly
       });
       if (newList.length > 0) {
         newMatchingItems.push({
@@ -293,7 +337,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
         });
       });
     }
-  }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, dropdownSearchString, customFilter, shouldUseCustomFilterOnly]);
   const handleClick = useCallback(() => {
     if (shouldShowBody) {
       handleClose();
@@ -326,9 +370,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       list,
       groupName
     }) => {
-      const newList = searchList({
+      const newList = filterSearchBoxItems({
+        customFilter,
         items: list,
-        searchString: event.target.value
+        searchString: event.target.value,
+        shouldUseCustomFilterOnly
       });
       if (newList.length > 0) {
         filteredLists.push({
@@ -357,7 +403,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
     if (typeof onChange === 'function') {
       onChange(event);
     }
-  }, [activeList, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
+  }, [activeList, customFilter, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput, shouldUseCustomFilterOnly]);
 
   /**
    * This function handles the blur event of the input
@@ -438,6 +484,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
           id: id,
           text: text,
           imageUrl: imageUrl,
+          shouldShowSmallItems: shouldShowSmallItems,
           shouldShowRoundImage: shouldShowRoundImage,
           onSelect: handleSelect,
           groupName: groupName,
@@ -449,12 +496,13 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
         id: "input-value",
         onSelect: handleSelect,
+        shouldShowSmallItems: shouldShowSmallItems,
         text: `<b>${inputToListValue}</b`,
         tabIndex: items.length === 0 ? 0 : -1
       }));
     }
     return items;
-  }, [hintText, matchingListsItems, shouldAddInputToList, inputToListValue, value, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
+  }, [hintText, matchingListsItems, shouldAddInputToList, inputToListValue, value, hasMultipleGroups, shouldShowSmallItems, shouldShowRoundImage, handleSelect]);
   useEffect(() => {
     const handleKeyDown = e => {
       if (!shouldShowBody || matchingListsItems.length === 0) {
@@ -585,13 +633,14 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(SearchBoxBody, {
     filterButtons: filterButtons,
     height: height,
+    maxHeight: maxHeight,
     shouldShow: shouldShowDropdown,
     key: `search-box-body-${uuid}`,
     onGroupSelect: handleFilterButtonsGroupSelect,
     ref: contentRef,
     selectedGroups: groups,
     shouldHideFilterButtons: shouldHideFilterButtons
-  }, content))), [container, content, dropdownDirection, filterButtons, groups, handleBlur, handleChange, handleClose, handleDropdownOutsideClick, handleFocus, height, isInvalid, leftElement, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowDropdown, shouldEnableKeyboardHighlighting, tagInputSettings, uuid, value]);
+  }, content))), [container, content, dropdownDirection, filterButtons, groups, handleBlur, handleChange, handleClose, handleDropdownOutsideClick, handleFocus, height, isInvalid, leftElement, maxHeight, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowDropdown, shouldEnableKeyboardHighlighting, tagInputSettings, uuid, value]);
 });
 SearchBox.displayName = 'SearchBox';
 export default SearchBox;