@chayns-components/core 5.4.12 → 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/components/search-input/SearchInput.js

@@ -11,6 +11,7 @@ var _Input = _interopRequireWildcard(require("../input/Input"));
 var _SearchInput = require("./SearchInput.styles");
 var _styledComponents = require("styled-components");
 var _element = require("../../hooks/element");
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
@@ -23,15 +24,42 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
   shouldUseAbsolutePositioning = false,
   size = _Input.InputSize.Medium,
   value,
+  shouldEnableKeyboardHighlighting,
   width: widthValue
 }, ref) => {
   const [isSearchInputActive, setIsSearchInputActive] = (0, _react2.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = (0, _react2.useRef)(null);
   const pseudoRef = (0, _react2.useRef)(null);
+  const iconTriggerRef = (0, _react2.useRef)(null);
   const parentWidth = (0, _element.useElementSize)(pseudoRef);
   const theme = (0, _styledComponents.useTheme)();
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
   const handleBackIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(true), []);
+  const handleIconTriggerClick = (0, _react2.useCallback)(() => {
+    if (isSearchInputActive) {
+      handleBackIconClick();
+      return;
+    }
+    handleSearchIconClick();
+  }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);
+  const handleIconTriggerKeyDown = (0, _react2.useCallback)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleIconTriggerClick();
+    }
+  }, [handleIconTriggerClick]);
+  const handleInputKeyDown = (0, _react2.useCallback)(event => {
+    if (event.key === 'Escape') {
+      var _iconTriggerRef$curre;
+      event.preventDefault();
+      setIsSearchInputActive(false);
+      (_iconTriggerRef$curre = iconTriggerRef.current) === null || _iconTriggerRef$curre === void 0 || _iconTriggerRef$curre.focus();
+    }
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+  }, [onActiveChange, onKeyDown]);
   (0, _react2.useEffect)(() => {
     if (typeof onActiveChange === 'function') {
       onActiveChange(isSearchInputActive);
@@ -62,20 +90,12 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size,
-    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
-    onClick: () => {
-      if (shouldUseAbsolutePositioning) {
-        if (isSearchInputActive) {
-          handleBackIconClick();
-        } else {
-          handleSearchIconClick();
-        }
-      }
-    }
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning
   }, shouldUseAbsolutePositioning ? /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width
@@ -95,13 +115,21 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     }
   }, /*#__PURE__*/_react2.default.createElement(_Input.default, {
     onChange: onChange,
-    onKeyDown: onKeyDown,
+    onKeyDown: handleInputKeyDown,
     placeholder: placeholder,
     ref: inputRef,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldShowClearIcon: true,
     size: size,
     value: value
-  })), /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
+  })), /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInputIconTrigger, {
+    ref: iconTriggerRef,
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
+    tabIndex: 0,
+    onClick: handleIconTriggerClick,
+    onKeyDown: handleIconTriggerKeyDown,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+  }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
     },
@@ -116,26 +144,21 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     transition: {
       duration: 0.3
     },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
-    tabIndex: 0,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (isSearchInputActive) {
-          handleBackIconClick();
-        } else {
-          handleSearchIconClick();
-        }
-      }
-    }
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     key: "icon",
     color: iconColor,
     tabIndex: -1,
-    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
-  }))) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']
+  })))) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
+  }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInputIconTrigger, {
+    ref: iconTriggerRef,
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
+    tabIndex: 0,
+    onClick: handleIconTriggerClick,
+    onKeyDown: handleIconTriggerKeyDown,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
@@ -151,28 +174,17 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     transition: {
       duration: 0.3
     },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
-    tabIndex: 0,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (isSearchInputActive) {
-          handleBackIconClick();
-        } else {
-          handleSearchIconClick();
-        }
-      }
-    }
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     key: "icon",
     color: iconColor,
     tabIndex: -1,
-    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
-  })))), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']
+  }))))), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width: '100%'
@@ -196,9 +208,10 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
       icons: ['far fa-search']
     }),
     onChange: onChange,
-    onKeyDown: onKeyDown,
+    onKeyDown: handleInputKeyDown,
     placeholder: placeholder,
     ref: inputRef,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldShowClearIcon: true,
     size: size,
     value: value

package/lib/cjs/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","onClick","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","tabIndex","preventDefault","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                    onClick={() => {\n                        if (shouldUseAbsolutePositioning) {\n                            if (isSearchInputActive) {\n                                handleBackIconClick();\n                            } else {\n                                handleSearchIconClick();\n                            }\n                        }\n                    }}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledMotionSearchInputIconWrapperContent\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0, position: 'absolute' }}\n                                initial={{ opacity: 0 }}\n                                key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                transition={{ duration: 0.3 }}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        if (isSearchInputActive) {\n                                            handleBackIconClick();\n                                        } else {\n                                            handleSearchIconClick();\n                                        }\n                                    }\n                                }}\n                            >\n                                <Icon\n                                    key=\"icon\"\n                                    color={iconColor}\n                                    tabIndex={-1}\n                                    icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                    onClick={\n                                        isSearchInputActive\n                                            ? handleBackIconClick\n                                            : handleSearchIconClick\n                                    }\n                                />\n                            </StyledMotionSearchInputIconWrapperContent>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledMotionSearchInputIconWrapperContent\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0, position: 'absolute' }}\n                                        initial={{ opacity: 0 }}\n                                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                        transition={{ duration: 0.3 }}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onKeyDown={(e) => {\n                                            if (e.key === 'Enter') {\n                                                e.preventDefault();\n                                                if (isSearchInputActive) {\n                                                    handleBackIconClick();\n                                                } else {\n                                                    handleSearchIconClick();\n                                                }\n                                            }\n                                        }}\n                                    >\n                                        <Icon\n                                            key=\"icon\"\n                                            color={iconColor}\n                                            tabIndex={-1}\n                                            icons={\n                                                isSearchInputActive\n                                                    ? ['fa fa-arrow-left']\n                                                    : ['fa fa-search']\n                                            }\n                                            onClick={\n                                                isSearchInputActive\n                                                    ? handleBackIconClick\n                                                    : handleSearchIconClick\n                                            }\n                                        />\n                                    </StyledMotionSearchInputIconWrapperContent>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={onKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","iconTriggerRef","parentWidth","useElementSize","theme","useTheme","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleBackIconClick","useCallback","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","handleInputKeyDown","_iconTriggerRef$curre","current","focus","useEffect","_inputRef$current","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","$shouldShowKeyboardHighlighting","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","StyledSearchInputIconTrigger","id","tabIndex","onClick","StyledMotionSearchInputIconWrapperContent","position","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputIconTrigger,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            shouldEnableKeyboardHighlighting,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n        const iconTriggerRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        const handleIconTriggerClick = useCallback(() => {\n            if (isSearchInputActive) {\n                handleBackIconClick();\n                return;\n            }\n\n            handleSearchIconClick();\n        }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);\n\n        const handleIconTriggerKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLDivElement>) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    handleIconTriggerClick();\n                }\n            },\n            [handleIconTriggerClick],\n        );\n\n        const handleInputKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLInputElement>) => {\n                if (event.key === 'Escape') {\n                    event.preventDefault();\n                    setIsSearchInputActive(false);\n                    iconTriggerRef.current?.focus();\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n            },\n            [onActiveChange, onKeyDown],\n        );\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={handleInputKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldEnableKeyboardHighlighting={\n                                            shouldEnableKeyboardHighlighting\n                                        }\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledSearchInputIconTrigger\n                                ref={iconTriggerRef}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onClick={handleIconTriggerClick}\n                                onKeyDown={handleIconTriggerKeyDown}\n                                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            >\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                                >\n                                    <Icon\n                                        key=\"icon\"\n                                        color={iconColor}\n                                        tabIndex={-1}\n                                        icons={\n                                            isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']\n                                        }\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </StyledSearchInputIconTrigger>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledSearchInputIconTrigger\n                                        ref={iconTriggerRef}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onClick={handleIconTriggerClick}\n                                        onKeyDown={handleIconTriggerKeyDown}\n                                        $shouldShowKeyboardHighlighting={\n                                            shouldShowKeyboardHighlighting\n                                        }\n                                    >\n                                        <StyledMotionSearchInputIconWrapperContent\n                                            animate={{ opacity: 1 }}\n                                            exit={{ opacity: 0, position: 'absolute' }}\n                                            initial={{ opacity: 0 }}\n                                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                            transition={{ duration: 0.3 }}\n                                            $shouldShowKeyboardHighlighting={\n                                                shouldShowKeyboardHighlighting\n                                            }\n                                        >\n                                            <Icon\n                                                key=\"icon\"\n                                                color={iconColor}\n                                                tabIndex={-1}\n                                                icons={\n                                                    isSearchInputActive\n                                                        ? ['fa fa-arrow-left']\n                                                        : ['fa fa-search']\n                                                }\n                                            />\n                                        </StyledMotionSearchInputIconWrapperContent>\n                                    </StyledSearchInputIconTrigger>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        $shouldShowKeyboardHighlighting={\n                                            shouldShowKeyboardHighlighting\n                                        }\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={handleInputKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldEnableKeyboardHighlighting={\n                                                shouldEnableKeyboardHighlighting\n                                            }\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.styles.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchInputPseudoElement = exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
+exports.StyledSearchInputPseudoElement = exports.StyledSearchInputIconTrigger = exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
     display: flex;
@@ -50,12 +51,35 @@ const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputCon
             right: 0;
         `}
 
-    overflow: hidden;
+    overflow: ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};
 `;
 const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_react.motion.div)`
     display: flex;
     cursor: pointer;
 `;
+const StyledSearchInputIconTrigger = exports.StyledSearchInputIconTrigger = _styledComponents.default.div`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                transition: none;
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+                border-radius: 50%;
+                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);
+                outline-offset: 2px;
+            }
+        `}
+`;
 const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
     width: 18px;
 `;

package/lib/cjs/components/search-input/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchInput","exports","styled","div","$size","$shouldUseAbsolutePositioning","theme","css","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n                  cursor: pointer;\n\n                  @media (pointer: fine) {\n                      &:hover {\n                          background-color: ${theme[201]};\n                      }\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`\n    display: flex;\n    cursor: pointer;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,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;AASzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,GACvB,IAAAE,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CD,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACD,IAAAC,qBAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAGN,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAMM,MAAMM,qCAAqC,GAAAR,OAAA,CAAAQ,qCAAA,GAAG,IAAAP,yBAAM,EACvDQ,aAAM,CAACP,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7B,IAAAE,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AAEM,MAAMI,yCAAyC,GAAAV,OAAA,CAAAU,yCAAA,GAAG,IAAAT,yBAAM,EAACQ,aAAM,CAACP,GAAG,CAAC;AAC3E;AACA;AACA,CAAC;AAEM,MAAMS,kCAAkC,GAAAX,OAAA,CAAAW,kCAAA,GAAGV,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchInput","exports","styled","div","$size","$shouldUseAbsolutePositioning","theme","css","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","motion","$shouldShowKeyboardHighlighting","StyledMotionSearchInputIconWrapperContent","StyledSearchInputIconTrigger","keyboardFocusHighlightingRingCss","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n                  cursor: pointer;\n\n                  @media (pointer: fine) {\n                      &:hover {\n                          background-color: ${theme[201]};\n                      }\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};\n`;\n\ntype StyledMotionSearchInputIconWrapperContentProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(\n    motion.div,\n)<StyledMotionSearchInputIconWrapperContentProps>`\n    display: flex;\n    cursor: pointer;\n`;\n\ntype StyledSearchInputIconTriggerProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledSearchInputIconTrigger = styled.div<StyledSearchInputIconTriggerProps>`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    cursor: pointer;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n                border-radius: 50%;\n                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);\n                outline-offset: 2px;\n            }\n        `}\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/select-button/SelectButton.js

@@ -22,7 +22,8 @@ const SelectButton = ({
   additionalText = ', ##count## weitere',
   shouldShowSearch,
   selectAllText,
-  title
+  title,
+  shouldEnableKeyboardHighlighting
 }) => {
   const itemList = (0, _react.useMemo)(() => {
     const items = [];
@@ -84,7 +85,8 @@ const SelectButton = ({
     onClick: handleClick,
     isDisabled: isDisabled,
     isSecondary: true,
-    shouldShowTextAsRobotoMedium: false
+    shouldShowTextAsRobotoMedium: false,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }, internalButtonText));
 };
 SelectButton.displayName = 'SelectButton';