@chayns-components/core 5.0.0-beta.396 → 5.0.0-beta.398

package/lib/components/accordion/Accordion.js

@@ -53,6 +53,12 @@ const Accordion = _ref => {
   const isInitialRenderRef = (0, _react.useRef)(true);
   const isInGroup = typeof updateOpenAccordionUuid === 'function';
   const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
+  const onCloseRef = (0, _react.useRef)(onClose);
+  const onOpenRef = (0, _react.useRef)(onOpen);
+  (0, _react.useEffect)(() => {
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [onClose, onOpen]);
   const handleHeadClick = (0, _react.useCallback)(() => {
     if (isDisabled) {
       return;
@@ -74,13 +80,13 @@ const Accordion = _ref => {
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
     } else if (isOpen) {
-      if (typeof onOpen === 'function') {
-        onOpen();
+      if (typeof onOpenRef.current === 'function') {
+        onOpenRef.current();
       }
-    } else if (typeof onClose === 'function') {
-      onClose();
+    } else if (typeof onCloseRef.current === 'function') {
+      onCloseRef.current();
     }
-  }, [isOpen, onClose, onOpen]);
+  }, [isOpen]);
   (0, _react.useEffect)(() => {
     if (isDefaultOpen) {
       if (typeof updateOpenAccordionUuid === 'function') {

package/lib/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldForceBackground","shouldHideBackground","title","titleElement","shouldRenderClosed","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","handleHeadClick","useCallback","currentIsAccordionOpen","useEffect","current","shouldOnlyOpen","accordionContextProviderValue","useMemo","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","displayName","_default"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside.\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    isWrapped = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    title,\n    titleElement,\n    shouldRenderClosed = false,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpen === 'function') {\n                onOpen();\n            }\n        } else if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            isOpen={isOpen}\n            isParentWrapped={isParentWrapped}\n            isWrapped={isWrapped}\n            shouldForceBackground={shouldForceBackground}\n            shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldForceBackground","shouldHideBackground","title","titleElement","shouldRenderClosed","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","useMemo","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","displayName","_default"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside.\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    isWrapped = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    title,\n    titleElement,\n    shouldRenderClosed = false,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            isOpen={isOpen}\n            isParentWrapped={isParentWrapped}\n            isWrapped={isWrapped}\n            shouldForceBackground={shouldForceBackground}\n            shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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"}

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

@@ -48,6 +48,7 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
   } = _ref5;
   return minWidth;
 }}px;
+    transition: background-color 0.2s ease-in-out;
 
     ${_ref6 => {
   let {
@@ -76,7 +77,7 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
   } = _ref7;
   return !isMobile && !isDisabled && (0, _styledComponents.css)`
             &:hover {
-                background-color: ${theme['secondary-101']};
+                background-color: ${theme['secondary-102']};
             }
         `;
 }}
@@ -120,7 +121,7 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
   let {
     theme
   } = _ref11;
-  return theme['001'];
+  return theme['101'];
 }};
     display: flex;
     position: absolute;
@@ -152,29 +153,23 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
   } = _ref15;
   return height <= 300 ? 'hidden' : 'auto';
 }};
-    box-shadow: 0 0 0 1px rgba(${_ref16 => {
+
+    ${_ref16 => {
   let {
+    direction,
     theme
   } = _ref16;
-  return theme['009-rgb'];
-}}, 0.08)
-        inset;
-
-    ${_ref17 => {
-  let {
-    direction
-  } = _ref17;
   if (direction === _comboBox.ComboBoxDirection.BOTTOM) {
     return (0, _styledComponents.css)`
                 border-bottom-left-radius: 3px;
                 border-bottom-right-radius: 3px;
-                border-top: none;
+                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
             `;
   }
   return (0, _styledComponents.css)`
             border-top-left-radius: 3px;
             border-top-right-radius: 3px;
-            border-bottom: none;
+            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
         `;
 }}
 

package/lib/components/combobox/ComboBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","isDisabled","_ref2","theme","_ref3","_ref4","minWidth","_ref5","_ref6","isOpen","direction","ComboBoxDirection","BOTTOM","css","_ref7","isMobile","StyledComboBoxPlaceholder","_ref8","text","StyledComboBoxPlaceholderImage","img","_ref9","_ref10","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref11","_ref12","_ref13","_ref14","maxHeight","_ref15","height","_ref16","_ref17"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\nimport { is } from 'date-fns/locale';\n\nexport const StyledComboBox = styled.div`\n    user-select: none;\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    isMobile: boolean;\n    isOpen: boolean;\n    minWidth: number;\n    direction: ComboBoxDirection;\n    isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'not-allowed')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n\n    ${({ isOpen, direction }) => {\n        if (isOpen) {\n            return direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ isMobile, isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !isMobile &&\n        !isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-101']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => 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\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    height: number;\n    minWidth: number;\n    maxHeight: CSSProperties['maxHeight'];\n    direction: ComboBoxDirection;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['001']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledComboBoxBodyProps) => theme['009-rgb']}, 0.08)\n        inset;\n\n    ${({ direction }) => {\n        if (direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                border-top: none;\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            border-bottom: none;\n        `;\n    }}\n\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: rgba(160, 160, 160, 1);\n    }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","isDisabled","_ref2","theme","_ref3","_ref4","minWidth","_ref5","_ref6","isOpen","direction","ComboBoxDirection","BOTTOM","css","_ref7","isMobile","StyledComboBoxPlaceholder","_ref8","text","StyledComboBoxPlaceholderImage","img","_ref9","_ref10","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref11","_ref12","_ref13","_ref14","maxHeight","_ref15","height","_ref16"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\nexport const StyledComboBox = styled.div`\n    user-select: none;\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    isMobile: boolean;\n    isOpen: boolean;\n    minWidth: number;\n    direction: ComboBoxDirection;\n    isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'not-allowed')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ isOpen, direction }) => {\n        if (isOpen) {\n            return direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ isMobile, isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !isMobile &&\n        !isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => 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\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    height: number;\n    minWidth: number;\n    maxHeight: CSSProperties['maxHeight'];\n    direction: ComboBoxDirection;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n\n    ${({ direction, theme }) => {\n        if (direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n        `;\n    }}\n\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: rgba(160, 160, 160, 1);\n    }\n`;\n"],"mappings":"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"}

package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js

@@ -14,7 +14,7 @@ const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.defaul
     theme,
     isSelected
   } = _ref;
-  return isSelected && theme['secondary-102'];
+  return isSelected && theme['secondary-103'];
 }};
     color: ${_ref2 => {
   let {
@@ -25,6 +25,7 @@ const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.defaul
     display: flex;
     gap: 10px;
     padding: 4px 10px;
+    transition: background-color 0.2s ease-in-out;
 
     ${_ref3 => {
   let {
@@ -33,7 +34,7 @@ const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.defaul
   } = _ref3;
   return !isMobile && (0, _styledComponents.css)`
             &:hover {
-                background-color: ${theme['secondary-101']};
+                background-color: ${theme['secondary-102']};
             }
         `;
 }}

package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","_ref","theme","isSelected","_ref2","text","_ref3","isMobile","css","StyledComboBoxItemImage","img","_ref4","_ref5","shouldShowRoundImage"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './ComboBoxItem';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    isMobile: boolean;\n    isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, isSelected }: StyledComboBoxItemProps) =>\n        isSelected && theme['secondary-102']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 4px 10px;\n\n    ${({ isMobile, theme }: StyledComboBoxItemProps) =>\n        !isMobile &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-101']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<Pick<ComboBoxItemProps, 'shouldShowRoundImage'>>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => 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"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMY,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACtE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAoC,CAAC,GAAAF,IAAA;EAAA,OAC/DE,UAAU,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACT,IAAAC,qBAAG,CAAC;AACZ;AACA,oCAAoCN,KAAK,CAAC,eAAe,CAAE;AAC3D;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAIM,MAAMO,uBAAuB,GAAAX,OAAA,CAAAW,uBAAA,GAAGV,yBAAM,CAACW,GAAkC;AAChF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAET;EAAoC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA,MAAMU,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvBC,oBAAoB,IACpB,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}
+{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","_ref","theme","isSelected","_ref2","text","_ref3","isMobile","css","StyledComboBoxItemImage","img","_ref4","_ref5","shouldShowRoundImage"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './ComboBoxItem';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    isMobile: boolean;\n    isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, isSelected }: StyledComboBoxItemProps) =>\n        isSelected && theme['secondary-103']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 4px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ isMobile, theme }: StyledComboBoxItemProps) =>\n        !isMobile &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<Pick<ComboBoxItemProps, 'shouldShowRoundImage'>>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => 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"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMY,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACtE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAoC,CAAC,GAAAF,IAAA;EAAA,OAC/DE,UAAU,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACT,IAAAC,qBAAG,CAAC;AACZ;AACA,oCAAoCN,KAAK,CAAC,eAAe,CAAE;AAC3D;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAIM,MAAMO,uBAAuB,GAAAX,OAAA,CAAAW,uBAAA,GAAGV,yBAAM,CAACW,GAAkC;AAChF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAET;EAAoC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA,MAAMU,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvBC,oBAAoB,IACpB,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}

package/lib/components/search-box/SearchBox.d.ts

@@ -25,6 +25,10 @@ export type SearchBoxProps = {
      * Control the selected item. If you use this prop, make sure to update it when the user selects an item.
      */
     selectedId?: string;
+    /**
+     * Whether the full list of items should be displayed if the input is empty.
+     */
+    shouldShowContentOnEmptyInput?: boolean;
 };
 declare const SearchBox: FC<SearchBoxProps>;
 export default SearchBox;

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

@@ -21,13 +21,15 @@ const SearchBox = _ref => {
     onChange,
     onBlur,
     onSelect,
-    selectedId
+    selectedId,
+    shouldShowContentOnEmptyInput = true
   } = _ref;
   const [matchingItems, setMatchingItems] = (0, _react.useState)([]);
   const [value, setValue] = (0, _react.useState)('');
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const [height, setHeight] = (0, _react.useState)(0);
   const [width, setWidth] = (0, _react.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
   const boxRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
   const inputRef = (0, _react.useRef)(null);
@@ -87,6 +89,19 @@ const SearchBox = _ref => {
     }
   }, [list, selectedId]);
 
+  /**
+   * This function sets the items on focus if shouldShowContentOnEmptyInput
+   */
+  const handleFocus = (0, _react.useCallback)(() => {
+    if (shouldShowContentOnEmptyInput) {
+      setMatchingItems((0, _utils.searchList)({
+        items: list,
+        searchString: value
+      }));
+      setIsAnimating(true);
+    }
+  }, [list, shouldShowContentOnEmptyInput, value]);
+
   /**
    * This function handles changes of the input
    */
@@ -95,13 +110,17 @@ const SearchBox = _ref => {
       items: list,
       searchString: event.target.value
     });
-    setMatchingItems(searchedItems);
-    setIsAnimating(searchedItems.length !== 0);
+    if (!shouldShowContentOnEmptyInput && !event.target.value) {
+      setMatchingItems([]);
+    } else {
+      setMatchingItems(searchedItems);
+      setIsAnimating(searchedItems.length !== 0);
+    }
     setValue(event.target.value);
     if (typeof onChange === 'function') {
       onChange(event);
     }
-  }, [list, onChange]);
+  }, [list, onChange, shouldShowContentOnEmptyInput]);
 
   /**
    * This function handles the blur event of the input
@@ -139,6 +158,53 @@ const SearchBox = _ref => {
     });
     return items;
   }, [handleSelect, matchingItems]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = e => {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const children = contentRef.current?.children;
+        if (children && children.length > 0) {
+          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          setFocusedIndex(newIndex);
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        const element = contentRef.current?.children[focusedIndex];
+        if (!element) {
+          return;
+        }
+        const {
+          id,
+          textContent
+        } = element;
+        handleSelect({
+          id: id.replace('search-box-item__', ''),
+          text: textContent ?? ''
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSelect]);
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    if (event.keyCode === 27) {
+      setMatchingItems([]);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
     ref: boxRef
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -147,6 +213,7 @@ const SearchBox = _ref => {
     ref: inputRef,
     onChange: handleChange,
     onBlur: handleBlur,
+    onFocus: handleFocus,
     placeholder: placeholder,
     value: value
   })), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
@@ -172,7 +239,7 @@ const SearchBox = _ref => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: contentRef
-  }, content)))), [content, handleBlur, handleChange, height, isAnimating, placeholder, value, width]);
+  }, content)))), [content, handleBlur, handleChange, handleFocus, height, isAnimating, placeholder, value, width]);
 };
 SearchBox.displayName = 'SearchBox';
 var _default = exports.default = SearchBox;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","_utils","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","boxRef","useRef","contentRef","inputRef","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleChange","searchedItems","searchList","items","searchString","length","handleBlur","handleSelect","item","content","useMemo","sort","b","localeCompare","forEach","_ref4","push","createElement","key","StyledSearchBox","ref","AnimatePresence","initial","StyledMotionSearchBoxBody","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\nimport type { ISearchBoxItem } from './types';\nimport { searchList } from './utils';\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n};\n\nconst SearchBox: FC<SearchBoxProps> = (\n    {\n        placeholder,\n        list,\n        onChange,\n        onBlur,\n        onSelect,\n        selectedId\n    }) => {\n    const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n    const [value, setValue] = useState('');\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState(0);\n\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    /**\n     * This function closes the list of items\n     */\n    const handleOutsideClick = useCallback(\n        (event: MouseEvent) => {\n            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [boxRef]\n    );\n\n    /**\n     * This hook listens for clicks\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleOutsideClick);\n\n        return () => {\n            document.removeEventListener('click', handleOutsideClick);\n        };\n    }, [handleOutsideClick, boxRef]);\n\n    /**\n     * This hook calculates the height\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n    }, [list, placeholder]);\n\n    /**\n     * This hook calculates the width\n     */\n    useEffect(() => {\n        const input = document.getElementById('search_box_input');\n\n        if (input) {\n            setWidth(input.offsetWidth);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (selectedId) {\n            const selectedItem = list.find(({ id }) => id === selectedId);\n\n            if (selectedItem) {\n                setValue(selectedItem.text);\n            }\n        }\n    }, [list, selectedId]);\n\n    /**\n     * This function handles changes of the input\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n            setMatchingItems(searchedItems);\n            setIsAnimating(searchedItems.length !== 0);\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange]\n    );\n\n    /**\n     * This function handles the blur event of the input\n     */\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n        },\n        [onBlur]\n    );\n\n    /**\n     * This function handles the item selection\n     */\n    const handleSelect = useCallback(\n        (item: ISearchBoxItem) => {\n            setValue(item.text);\n            setIsAnimating(false);\n\n            if (typeof onSelect === 'function') {\n                onSelect(item);\n            }\n        },\n        [onSelect]\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n        matchingItems.forEach(({ id, text }) => {\n            items.push(<SearchBoxItem key={id} text={text} id={id} onSelect={handleSelect}/>);\n        });\n\n        return items;\n    }, [handleSelect, matchingItems]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBox ref={boxRef}>\n                <div id=\"search_box_input\">\n                    <Input\n                        ref={inputRef}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\n                        key=\"content\"\n                        height={height}\n                        width={width}\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={\n                            isAnimating\n                                ? { height: 'fit-content', opacity: 1 }\n                                : { height: 0, opacity: 0 }\n                        }\n                        transition={{\n                            duration: 0.2,\n                            type: 'tween',\n                        }}\n                    >\n                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [content, handleBlur, handleChange, height, isAnimating, placeholder, value, width]\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","_utils","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","useRef","contentRef","inputRef","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","searchList","items","searchString","handleChange","searchedItems","length","handleBlur","handleSelect","item","content","useMemo","sort","b","localeCompare","forEach","_ref4","push","createElement","key","handleKeyDown","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","StyledSearchBox","ref","onFocus","AnimatePresence","initial","StyledMotionSearchBoxBody","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\nimport type { ISearchBoxItem } from './types';\nimport { searchList } from './utils';\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = ({\n    placeholder,\n    list,\n    onChange,\n    onBlur,\n    onSelect,\n    selectedId,\n    shouldShowContentOnEmptyInput = true,\n}) => {\n    const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n    const [value, setValue] = useState('');\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    /**\n     * This function closes the list of items\n     */\n    const handleOutsideClick = useCallback(\n        (event: MouseEvent) => {\n            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [boxRef]\n    );\n\n    /**\n     * This hook listens for clicks\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleOutsideClick);\n\n        return () => {\n            document.removeEventListener('click', handleOutsideClick);\n        };\n    }, [handleOutsideClick, boxRef]);\n\n    /**\n     * This hook calculates the height\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n    }, [list, placeholder]);\n\n    /**\n     * This hook calculates the width\n     */\n    useEffect(() => {\n        const input = document.getElementById('search_box_input');\n\n        if (input) {\n            setWidth(input.offsetWidth);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (selectedId) {\n            const selectedItem = list.find(({ id }) => id === selectedId);\n\n            if (selectedItem) {\n                setValue(selectedItem.text);\n            }\n        }\n    }, [list, selectedId]);\n\n    /**\n     * This function sets the items on focus if shouldShowContentOnEmptyInput\n     */\n    const handleFocus = useCallback(() => {\n        if (shouldShowContentOnEmptyInput) {\n            setMatchingItems(searchList({ items: list, searchString: value }));\n            setIsAnimating(true);\n        }\n    }, [list, shouldShowContentOnEmptyInput, value]);\n\n    /**\n     * This function handles changes of the input\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n            if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                setMatchingItems([]);\n            } else {\n                setMatchingItems(searchedItems);\n                setIsAnimating(searchedItems.length !== 0);\n            }\n\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange, shouldShowContentOnEmptyInput]\n    );\n\n    /**\n     * This function handles the blur event of the input\n     */\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n        },\n        [onBlur]\n    );\n\n    /**\n     * This function handles the item selection\n     */\n    const handleSelect = useCallback(\n        (item: ISearchBoxItem) => {\n            setValue(item.text);\n            setIsAnimating(false);\n\n            if (typeof onSelect === 'function') {\n                onSelect(item);\n            }\n        },\n        [onSelect]\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n        matchingItems.forEach(({ id, text }) => {\n            items.push(<SearchBoxItem key={id} text={text} id={id} onSelect={handleSelect} />);\n        });\n\n        return items;\n    }, [handleSelect, matchingItems]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id, textContent } = element;\n\n                handleSelect({ id: id.replace('search-box-item__', ''), text: textContent ?? '' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.keyCode === 27) {\n            setMatchingItems([]);\n        }\n    }, []);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.addEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBox ref={boxRef}>\n                <div id=\"search_box_input\">\n                    <Input\n                        ref={inputRef}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\n                        key=\"content\"\n                        height={height}\n                        width={width}\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={\n                            isAnimating\n                                ? { height: 'fit-content', opacity: 1 }\n                                : { height: 0, opacity: 0 }\n                        }\n                        transition={{\n                            duration: 0.2,\n                            type: 'tween',\n                        }}\n                    >\n                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [\n            content,\n            handleBlur,\n            handleChange,\n            handleFocus,\n            height,\n            isAnimating,\n            placeholder,\n            value,\n            width,\n        ]\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}

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

@@ -21,8 +21,9 @@ const SearchBoxItem = _ref => {
     });
   }, [id, onSelect, text]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItem, {
+    id: `search-box-item__${id}`,
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, null, text)), [handleClick, text]);
+  }, /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, null, text)), [handleClick, id, text]);
 };
 SearchBoxItem.displayName = 'SearchBoxItem';
 var _default = exports.default = SearchBoxItem;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBoxItem","_ref","id","text","onSelect","handleClick","useCallback","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemText","displayName","_default","exports"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem } from '../types';\nimport { StyledSearchBoxItem, StyledSearchBoxItemText } from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({ id, text, onSelect }) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text });\n    }, [id, onSelect, text]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem onClick={handleClick}>\n                <StyledSearchBoxItemText>{text}</StyledSearchBoxItemText>\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, text]\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAAsF,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQtF,MAAMY,aAAqC,GAAGC,IAAA,IAA4B;EAAA,IAA3B;IAAEC,EAAE;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAAH,IAAA;EACjE,MAAMI,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCF,QAAQ,CAAC;MAAEF,EAAE;MAAEC;IAAK,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACD,EAAE,EAAEE,QAAQ,EAAED,IAAI,CAAC,CAAC;EAExB,OAAO,IAAAI,cAAO,EACV,mBACIhC,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAA+B,mBAAmB;IAACC,OAAO,EAAEL;EAAY,gBACtC9B,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAAiC,uBAAuB,QAAER,IAA8B,CACvC,CACxB,EACD,CAACE,WAAW,EAAEF,IAAI,CACtB,CAAC;AACL,CAAC;AAEDH,aAAa,CAACY,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7B,OAAA,GAE7Be,aAAa"}
+{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBoxItem","_ref","id","text","onSelect","handleClick","useCallback","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemText","displayName","_default","exports"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem } from '../types';\nimport { StyledSearchBoxItem, StyledSearchBoxItemText } from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({ id, text, onSelect }) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text });\n    }, [id, onSelect, text]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={`search-box-item__${id}`} onClick={handleClick}>\n                <StyledSearchBoxItemText>{text}</StyledSearchBoxItemText>\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, id, text]\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAAsF,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQtF,MAAMY,aAAqC,GAAGC,IAAA,IAA4B;EAAA,IAA3B;IAAEC,EAAE;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAAH,IAAA;EACjE,MAAMI,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCF,QAAQ,CAAC;MAAEF,EAAE;MAAEC;IAAK,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACD,EAAE,EAAEE,QAAQ,EAAED,IAAI,CAAC,CAAC;EAExB,OAAO,IAAAI,cAAO,EACV,mBACIhC,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAA+B,mBAAmB;IAACP,EAAE,EAAG,oBAAmBA,EAAG,EAAE;IAACQ,OAAO,EAAEL;EAAY,gBACpE9B,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAAiC,uBAAuB,QAAER,IAA8B,CACvC,CACxB,EACD,CAACE,WAAW,EAAEH,EAAE,EAAEC,IAAI,CAC1B,CAAC;AACL,CAAC;AAEDH,aAAa,CAACY,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7B,OAAA,GAE7Be,aAAa"}

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

@@ -13,14 +13,23 @@ const StyledSearchBoxItem = exports.StyledSearchBoxItem = _styledComponents.defa
     theme
   } = _ref;
   return theme['secondary-103'];
+}};
+    }
+
+    &:focus {
+        background: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['secondary-103'];
 }};
     }
 `;
 const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledComponents.default.p`
-    color: ${_ref2 => {
+    color: ${_ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme.text;
 }};
     margin: 5px;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledSearchBoxItem","exports","styled","div","_ref","theme","StyledSearchBoxItemText","p","_ref2","text"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA,CAAC;AAIM,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACK,CAAgC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAEH;EAAoC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AACrE;AACA,CAAC"}
+{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledSearchBoxItem","exports","styled","div","_ref","theme","_ref2","StyledSearchBoxItemText","p","_ref3","text"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n\n    &:focus {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA;AACA;AACA,sBAAsBC,KAAA;EAAA,IAAC;IAAED;EAAgC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA,CAAC;AAIM,MAAME,uBAAuB,GAAAN,OAAA,CAAAM,uBAAA,GAAGL,yBAAM,CAACM,CAAgC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAEJ;EAAoC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACK,IAAI;AAAA,CAAC;AACrE;AACA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.396",
+    "version": "5.0.0-beta.398",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -35,10 +35,10 @@
     "devDependencies": {
         "@babel/cli": "^7.23.4",
         "@babel/core": "^7.23.7",
-        "@babel/preset-env": "^7.23.7",
+        "@babel/preset-env": "^7.23.8",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.46",
+        "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.7",
@@ -46,7 +46,7 @@
         "lerna": "^8.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "styled-components": "^6.1.6",
+        "styled-components": "^6.1.8",
         "typescript": "^5.3.3"
     },
     "dependencies": {
@@ -54,11 +54,11 @@
         "@chayns/uac-service": "^0.0.46",
         "@types/react-syntax-highlighter": "^15.5.11",
         "babel-prettier-parser": "^0.10.8",
-        "chayns-api": "^1.0.44",
+        "chayns-api": "^1.0.45",
         "clsx": "^2.1.0",
         "date-fns": "^2.30.0",
-        "framer-motion": "^10.17.8",
-        "prettier": "^3.1.1",
+        "framer-motion": "^10.18.0",
+        "prettier": "^3.2.3",
         "react-syntax-highlighter": "^15.5.0",
         "uuid": "^9.0.1"
     },
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b9fb37523d8f6b01348ad0e75ebf2175624d0a75"
+    "gitHead": "94bdafe2a185876107e107674aff56cb91a42a66"
 }