@chayns-components/core 5.3.9 → 5.3.11-alpha.0

package/lib/esm/components/search-input/SearchInput.js

@@ -2,9 +2,10 @@ import { AnimatePresence } from 'motion/react';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import Icon from '../icon/Icon';
 import Input, { InputSize } from '../input/Input';
-import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputPseudoElement } from './SearchInput.styles';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputIconTrigger, StyledSearchInputPseudoElement } from './SearchInput.styles';
 import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/element';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const SearchInput = /*#__PURE__*/forwardRef(({
   iconColor,
   isActive,
@@ -15,6 +16,7 @@ const SearchInput = /*#__PURE__*/forwardRef(({
   shouldUseAbsolutePositioning = false,
   size = InputSize.Medium,
   value,
+  shouldEnableKeyboardHighlighting,
   width: widthValue
 }, ref) => {
   const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
@@ -22,8 +24,22 @@ const SearchInput = /*#__PURE__*/forwardRef(({
   const pseudoRef = useRef(null);
   const parentWidth = useElementSize(pseudoRef);
   const theme = useTheme();
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
   const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
+  const handleIconTriggerClick = useCallback(() => {
+    if (isSearchInputActive) {
+      handleBackIconClick();
+      return;
+    }
+    handleSearchIconClick();
+  }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);
+  const handleIconTriggerKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleIconTriggerClick();
+    }
+  }, [handleIconTriggerClick]);
   useEffect(() => {
     if (typeof onActiveChange === 'function') {
       onActiveChange(isSearchInputActive);
@@ -47,20 +63,12 @@ const SearchInput = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size,
-    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
-    onClick: () => {
-      if (shouldUseAbsolutePositioning) {
-        if (isSearchInputActive) {
-          handleBackIconClick();
-        } else {
-          handleSearchIconClick();
-        }
-      }
-    }
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning
   }, shouldUseAbsolutePositioning ? /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width
@@ -83,10 +91,17 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     ref: inputRef,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldShowClearIcon: true,
     size: size,
     value: value
-  })), /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
+  })), /*#__PURE__*/React.createElement(StyledSearchInputIconTrigger, {
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
+    tabIndex: 0,
+    onClick: handleIconTriggerClick,
+    onKeyDown: handleIconTriggerKeyDown,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
     },
@@ -101,26 +116,20 @@ const SearchInput = /*#__PURE__*/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__*/React.createElement(Icon, {
     key: "icon",
     color: iconColor,
     tabIndex: -1,
-    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
+  }, /*#__PURE__*/React.createElement(StyledSearchInputIconTrigger, {
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
+    tabIndex: 0,
+    onClick: handleIconTriggerClick,
+    onKeyDown: handleIconTriggerKeyDown,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
@@ -136,28 +145,17 @@ const SearchInput = /*#__PURE__*/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__*/React.createElement(Icon, {
     key: "icon",
     color: iconColor,
     tabIndex: -1,
-    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
-  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']
+  }))))), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width: '100%'
@@ -184,6 +182,7 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     ref: inputRef,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldShowClearIcon: true,
     size: size,
     value: value

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","position","id","tabIndex","e","preventDefault","color","icons","leftElement","text","displayName"],"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":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputIconTrigger","StyledSearchInputPseudoElement","useTheme","useElementSize","useKeyboardFocusHighlighting","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","shouldShowKeyboardHighlighting","handleBackIconClick","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","initial","$shouldShowKeyboardHighlighting","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","id","tabIndex","onClick","position","color","icons","leftElement","text","displayName"],"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\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        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={onKeyDown}\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                                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                                        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={onKeyDown}\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/esm/components/search-input/SearchInput.styles.js

@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSearchInput = styled.div`
     display: flex;
     align-items: center;
@@ -43,12 +44,34 @@ export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
             right: 0;
         `}
 
-    overflow: hidden;
+    overflow: ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};
 `;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
     cursor: pointer;
 `;
+export const StyledSearchInputIconTrigger = styled.div`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);
+                outline-offset: 2px;
+            }
+        `}
+`;
 export const StyledMotionSearchInputIconWrapper = styled.div`
     width: 18px;
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","css","StyledSearchInput","div","$size","$shouldUseAbsolutePositioning","theme","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","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,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,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,GACvBJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CK,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMM,8BAA8B,GAAGP,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMK,qCAAqC,GAAGR,MAAM,CACvDD,MAAM,CAACI,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7BJ,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AAED,OAAO,MAAMQ,yCAAyC,GAAGT,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC3E;AACA;AACA,CAAC;AAED,OAAO,MAAMO,kCAAkC,GAAGV,MAAM,CAACG,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledSearchInput","div","$size","$shouldUseAbsolutePositioning","theme","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","$shouldShowKeyboardHighlighting","StyledMotionSearchInputIconWrapperContent","StyledSearchInputIconTrigger","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                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":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,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,GACvBL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CM,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACDN,GAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMO,8BAA8B,GAAGR,MAAM,CAACI,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMK,qCAAqC,GAAGT,MAAM,CACvDD,MAAM,CAACK,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7BL,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA,gBAAgB,CAAC;EAAES;AAAgC,CAAC,KAC5CA,+BAA+B,GAAG,SAAS,GAAG,QAAQ;AAC9D,CAAC;AAMD,OAAO,MAAMC,yCAAyC,GAAGX,MAAM,CAC3DD,MAAM,CAACK,GACX,CAAiD;AACjD;AACA;AACA,CAAC;AAMD,OAAO,MAAMQ,4BAA4B,GAAGZ,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEM;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BT,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,kCAAkC,GAAGb,MAAM,CAACI,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}

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

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

package/lib/esm/components/select-button/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","undefined","type","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n    /**\n     * Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n     */\n    additionalText?: string;\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * A list of item that could be selected.\n     */\n    list: SelectButtonItem[];\n    /**\n     * The maximum number of items displayed in the button text.\n     */\n    maxDisplayedItems?: number;\n    /**\n     * Function to be executed after an item is selected.\n     */\n    onSelect?: (ids: (number | string)[]) => void;\n    /**\n     * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n     */\n    selectAllText?: string;\n    /**\n     * The id of an item that should be preselected.\n     */\n    selectedItemIds?: (number | string)[];\n    /**\n     * Whether more than one item should be selectable.\n     */\n    shouldAllowMultiSelect?: boolean;\n    /**\n     * Whether the button text should be displayed also if items are selected.\n     */\n    shouldShowButtonTextWithSelection?: boolean;\n    /**\n     * Whether the search should be displayed inside the dialog.\n     */\n    shouldShowSearch?: boolean;\n    /**\n     * The title of the dialog.\n     */\n    title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n    buttonText,\n    isDisabled,\n    list,\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    shouldShowButtonTextWithSelection,\n    maxDisplayedItems = 3,\n    additionalText = ', ##count## weitere',\n    shouldShowSearch,\n    selectAllText,\n    title,\n}) => {\n    const itemList = useMemo(() => {\n        const items: DialogSelectListItemType[] = [];\n\n        list.forEach(({ text, id }) => {\n            const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n            items.push({\n                name: text,\n                id,\n                isSelected,\n            });\n        });\n\n        return items;\n    }, [list, selectedItemIds]);\n\n    const internalButtonText = useMemo(() => {\n        if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n            return buttonText;\n        }\n\n        let addedCount = 0;\n        let newText = '';\n\n        const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n        list.forEach(({ text, id }) => {\n            if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n                addedCount++;\n                newText += newText.length === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        if (additionalCount >= 1) {\n            newText += additionalText.replace('##count##', String(additionalCount));\n        }\n\n        return newText;\n    }, [\n        additionalText,\n        buttonText,\n        list,\n        maxDisplayedItems,\n        selectedItemIds,\n        shouldShowButtonTextWithSelection,\n    ]);\n\n    const handleClick = () => {\n        void createDialog({\n            text: title ? `[h1]${title}[/h1]` : undefined,\n            type: DialogType.SELECT,\n            list: itemList,\n            multiselect: shouldAllowMultiSelect,\n            quickfind: shouldShowSearch,\n            selectAllCheckbox: selectAllText,\n        })\n            .open()\n            .then((result) => {\n                // Ignore because there is no type\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n                    // Ignore because there is no type\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    onSelect(result.result);\n                }\n            });\n    };\n\n    return (\n        <StyledSelectButton>\n            <Button\n                onClick={handleClick}\n                isDisabled={isDisabled}\n                isSecondary\n                shouldShowTextAsRobotoMedium={false}\n            >\n                {internalButtonText}\n            </Button>\n        </StyledSelectButton>\n    );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","shouldEnableKeyboardHighlighting","itemList","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","undefined","type","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n    /**\n     * Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n     */\n    additionalText?: string;\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * A list of item that could be selected.\n     */\n    list: SelectButtonItem[];\n    /**\n     * The maximum number of items displayed in the button text.\n     */\n    maxDisplayedItems?: number;\n    /**\n     * Function to be executed after an item is selected.\n     */\n    onSelect?: (ids: (number | string)[]) => void;\n    /**\n     * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n     */\n    selectAllText?: string;\n    /**\n     * The id of an item that should be preselected.\n     */\n    selectedItemIds?: (number | string)[];\n    /**\n     * Whether more than one item should be selectable.\n     */\n    shouldAllowMultiSelect?: boolean;\n    /**\n     * Whether the button text should be displayed also if items are selected.\n     */\n    shouldShowButtonTextWithSelection?: boolean;\n    /**\n     * Whether the search should be displayed inside the dialog.\n     */\n    shouldShowSearch?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * The title of the dialog.\n     */\n    title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n    buttonText,\n    isDisabled,\n    list,\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    shouldShowButtonTextWithSelection,\n    maxDisplayedItems = 3,\n    additionalText = ', ##count## weitere',\n    shouldShowSearch,\n    selectAllText,\n    title,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const itemList = useMemo(() => {\n        const items: DialogSelectListItemType[] = [];\n\n        list.forEach(({ text, id }) => {\n            const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n            items.push({\n                name: text,\n                id,\n                isSelected,\n            });\n        });\n\n        return items;\n    }, [list, selectedItemIds]);\n\n    const internalButtonText = useMemo(() => {\n        if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n            return buttonText;\n        }\n\n        let addedCount = 0;\n        let newText = '';\n\n        const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n        list.forEach(({ text, id }) => {\n            if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n                addedCount++;\n                newText += newText.length === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        if (additionalCount >= 1) {\n            newText += additionalText.replace('##count##', String(additionalCount));\n        }\n\n        return newText;\n    }, [\n        additionalText,\n        buttonText,\n        list,\n        maxDisplayedItems,\n        selectedItemIds,\n        shouldShowButtonTextWithSelection,\n    ]);\n\n    const handleClick = () => {\n        void createDialog({\n            text: title ? `[h1]${title}[/h1]` : undefined,\n            type: DialogType.SELECT,\n            list: itemList,\n            multiselect: shouldAllowMultiSelect,\n            quickfind: shouldShowSearch,\n            selectAllCheckbox: selectAllText,\n        })\n            .open()\n            .then((result) => {\n                // Ignore because there is no type\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n                    // Ignore because there is no type\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    onSelect(result.result);\n                }\n            });\n    };\n\n    return (\n        <StyledSelectButton>\n            <Button\n                onClick={handleClick}\n                isDisabled={isDisabled}\n                isSecondary\n                shouldShowTextAsRobotoMedium={false}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                {internalButtonText}\n            </Button>\n        </StyledSelectButton>\n    );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/setup-wizard/SetupWizard.js

@@ -5,12 +5,14 @@ export const SetupWizardContext = /*#__PURE__*/React.createContext({
   selectedId: undefined,
   updateSelectedId: undefined,
   activeId: undefined,
-  updateActiveId: undefined
+  updateActiveId: undefined,
+  shouldEnableKeyboardHighlighting: false
 });
 SetupWizardContext.displayName = 'SetupWizardContext';
 const SetupWizard = /*#__PURE__*/forwardRef(({
   children,
-  isWrapped
+  isWrapped,
+  shouldEnableKeyboardHighlighting = false
 }, ref) => {
   const [selectedId, setSelectedId] = useState(0);
   const [activeId, setActiveId] = useState(0);
@@ -59,8 +61,9 @@ const SetupWizard = /*#__PURE__*/forwardRef(({
     selectedId,
     updateSelectedId,
     activeId,
-    updateActiveId
-  }), [activeId, selectedId, updateActiveId, updateSelectedId]);
+    updateActiveId,
+    shouldEnableKeyboardHighlighting
+  }), [activeId, selectedId, shouldEnableKeyboardHighlighting, updateActiveId, updateSelectedId]);
   return useMemo(() => /*#__PURE__*/React.createElement(SetupWizardContext.Provider, {
     value: providerValue
   }, /*#__PURE__*/React.createElement(StyledSetupWizard, null, /*#__PURE__*/React.createElement(AccordionGroup, {

package/lib/esm/components/setup-wizard/SetupWizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SetupWizard.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","AccordionGroup","StyledSetupWizard","SetupWizardContext","createContext","selectedId","undefined","updateSelectedId","activeId","updateActiveId","displayName","SetupWizard","children","isWrapped","ref","setSelectedId","setActiveId","allIds","setAllIds","Children","map","child","prevState","props","id","handleNext","stepId","index","findIndex","numberAtIndex","handleReset","next","reset","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/setup-wizard/SetupWizard.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useState,\n} from 'react';\nimport AccordionGroup from '../accordion/accordion-group/AccordionGroup';\nimport type { SetupWizardItemProps } from './setup-wizard-item/SetupWizardItem';\nimport { StyledSetupWizard } from './SetupWizard.styles';\n\ntype UpdateSelectedId = (id: number) => void;\ntype UpdateActiveId = (id: number) => void;\n\ninterface SetupWizardContextProps {\n    selectedId: number | undefined;\n    updateSelectedId?: UpdateSelectedId;\n    activeId: number | undefined;\n    updateActiveId?: UpdateActiveId;\n}\n\nexport const SetupWizardContext = React.createContext<SetupWizardContextProps>({\n    selectedId: undefined,\n    updateSelectedId: undefined,\n    activeId: undefined,\n    updateActiveId: undefined,\n});\n\nSetupWizardContext.displayName = 'SetupWizardContext';\n\nexport interface SetupWizardRef {\n    next: (stepId?: number) => void;\n    reset: () => void;\n}\n\nexport type SetupWizardProps = {\n    /**\n     * The steps of the setup. Use the SetupWizardItem component.\n     */\n    children: ReactElement<SetupWizardItemProps> | ReactElement<SetupWizardItemProps>[];\n    /**\n     * This value must be set if the SetupWizard is inside an Accordion.\n     */\n    isWrapped?: boolean;\n};\n\nconst SetupWizard = forwardRef<SetupWizardRef, SetupWizardProps>(({ children, isWrapped }, ref) => {\n    const [selectedId, setSelectedId] = useState<SetupWizardContextProps['selectedId']>(0);\n    const [activeId, setActiveId] = useState<SetupWizardContextProps['activeId']>(0);\n    const [allIds, setAllIds] = useState<number[]>([]);\n\n    useEffect(() => {\n        React.Children.map(children, (child: ReactElement<SetupWizardItemProps>) => {\n            setAllIds((prevState) => [...prevState, child.props.id]);\n        });\n    }, [children]);\n\n    const updateSelectedId = useCallback<UpdateSelectedId>(\n        (id) => {\n            setSelectedId(id);\n        },\n        [setSelectedId],\n    );\n\n    const updateActiveId = useCallback<UpdateSelectedId>(\n        (id) => {\n            setActiveId(id);\n        },\n        [setActiveId],\n    );\n\n    const handleNext = useCallback(\n        (stepId: number | undefined) => {\n            if (typeof stepId === 'number') {\n                updateSelectedId(stepId);\n\n                if (typeof activeId === 'number' && stepId > activeId) {\n                    updateActiveId(stepId);\n                }\n            } else {\n                const index = allIds.findIndex((id) => id === selectedId);\n\n                if (index < 0) {\n                    return;\n                }\n\n                const numberAtIndex = allIds[index + 1];\n\n                if (!numberAtIndex) {\n                    return;\n                }\n\n                updateSelectedId(numberAtIndex);\n\n                if (typeof activeId === 'number' && numberAtIndex > activeId) {\n                    updateActiveId(numberAtIndex);\n                }\n            }\n        },\n        [activeId, allIds, selectedId, updateActiveId, updateSelectedId],\n    );\n\n    const handleReset = useCallback(() => {\n        updateSelectedId(0);\n        updateActiveId(0);\n    }, [updateActiveId, updateSelectedId]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            next: handleNext,\n            reset: handleReset,\n        }),\n        [handleNext, handleReset],\n    );\n\n    const providerValue = useMemo<SetupWizardContextProps>(\n        () => ({\n            selectedId,\n            updateSelectedId,\n            activeId,\n            updateActiveId,\n        }),\n        [activeId, selectedId, updateActiveId, updateSelectedId],\n    );\n\n    return useMemo(\n        () => (\n            <SetupWizardContext.Provider value={providerValue}>\n                <StyledSetupWizard>\n                    <AccordionGroup isWrapped={isWrapped}>{children}</AccordionGroup>\n                </StyledSetupWizard>\n            </SetupWizardContext.Provider>\n        ),\n        [children, isWrapped, providerValue],\n    );\n});\n\nSetupWizard.displayName = 'SetupWizard';\n\nexport default SetupWizard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SetupWizard.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","AccordionGroup","StyledSetupWizard","SetupWizardContext","createContext","selectedId","undefined","updateSelectedId","activeId","updateActiveId","shouldEnableKeyboardHighlighting","displayName","SetupWizard","children","isWrapped","ref","setSelectedId","setActiveId","allIds","setAllIds","Children","map","child","prevState","props","id","handleNext","stepId","index","findIndex","numberAtIndex","handleReset","next","reset","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/setup-wizard/SetupWizard.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useState,\n} from 'react';\nimport AccordionGroup from '../accordion/accordion-group/AccordionGroup';\nimport type { SetupWizardItemProps } from './setup-wizard-item/SetupWizardItem';\nimport { StyledSetupWizard } from './SetupWizard.styles';\n\ntype UpdateSelectedId = (id: number) => void;\ntype UpdateActiveId = (id: number) => void;\n\ninterface SetupWizardContextProps {\n    selectedId: number | undefined;\n    updateSelectedId?: UpdateSelectedId;\n    activeId: number | undefined;\n    updateActiveId?: UpdateActiveId;\n    shouldEnableKeyboardHighlighting: boolean;\n}\n\nexport const SetupWizardContext = React.createContext<SetupWizardContextProps>({\n    selectedId: undefined,\n    updateSelectedId: undefined,\n    activeId: undefined,\n    updateActiveId: undefined,\n    shouldEnableKeyboardHighlighting: false,\n});\n\nSetupWizardContext.displayName = 'SetupWizardContext';\n\nexport interface SetupWizardRef {\n    next: (stepId?: number) => void;\n    reset: () => void;\n}\n\nexport type SetupWizardProps = {\n    /**\n     * The steps of the setup. Use the SetupWizardItem component.\n     */\n    children: ReactElement<SetupWizardItemProps> | ReactElement<SetupWizardItemProps>[];\n    /**\n     * This value must be set if the SetupWizard is inside an Accordion.\n     */\n    isWrapped?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for setup wizard items.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst SetupWizard = forwardRef<SetupWizardRef, SetupWizardProps>(\n    ({ children, isWrapped, shouldEnableKeyboardHighlighting = false }, ref) => {\n        const [selectedId, setSelectedId] = useState<SetupWizardContextProps['selectedId']>(0);\n        const [activeId, setActiveId] = useState<SetupWizardContextProps['activeId']>(0);\n        const [allIds, setAllIds] = useState<number[]>([]);\n\n        useEffect(() => {\n            React.Children.map(children, (child: ReactElement<SetupWizardItemProps>) => {\n                setAllIds((prevState) => [...prevState, child.props.id]);\n            });\n        }, [children]);\n\n        const updateSelectedId = useCallback<UpdateSelectedId>(\n            (id) => {\n                setSelectedId(id);\n            },\n            [setSelectedId],\n        );\n\n        const updateActiveId = useCallback<UpdateSelectedId>(\n            (id) => {\n                setActiveId(id);\n            },\n            [setActiveId],\n        );\n\n        const handleNext = useCallback(\n            (stepId: number | undefined) => {\n                if (typeof stepId === 'number') {\n                    updateSelectedId(stepId);\n\n                    if (typeof activeId === 'number' && stepId > activeId) {\n                        updateActiveId(stepId);\n                    }\n                } else {\n                    const index = allIds.findIndex((id) => id === selectedId);\n\n                    if (index < 0) {\n                        return;\n                    }\n\n                    const numberAtIndex = allIds[index + 1];\n\n                    if (!numberAtIndex) {\n                        return;\n                    }\n\n                    updateSelectedId(numberAtIndex);\n\n                    if (typeof activeId === 'number' && numberAtIndex > activeId) {\n                        updateActiveId(numberAtIndex);\n                    }\n                }\n            },\n            [activeId, allIds, selectedId, updateActiveId, updateSelectedId],\n        );\n\n        const handleReset = useCallback(() => {\n            updateSelectedId(0);\n            updateActiveId(0);\n        }, [updateActiveId, updateSelectedId]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                next: handleNext,\n                reset: handleReset,\n            }),\n            [handleNext, handleReset],\n        );\n\n        const providerValue = useMemo<SetupWizardContextProps>(\n            () => ({\n                selectedId,\n                updateSelectedId,\n                activeId,\n                updateActiveId,\n                shouldEnableKeyboardHighlighting,\n            }),\n            [\n                activeId,\n                selectedId,\n                shouldEnableKeyboardHighlighting,\n                updateActiveId,\n                updateSelectedId,\n            ],\n        );\n\n        return useMemo(\n            () => (\n                <SetupWizardContext.Provider value={providerValue}>\n                    <StyledSetupWizard>\n                        <AccordionGroup isWrapped={isWrapped}>{children}</AccordionGroup>\n                    </StyledSetupWizard>\n                </SetupWizardContext.Provider>\n            ),\n            [children, isWrapped, providerValue],\n        );\n    },\n);\n\nSetupWizard.displayName = 'SetupWizard';\n\nexport default SetupWizard;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js

@@ -14,7 +14,8 @@ const SetupWizardItem = ({
   const {
     selectedId,
     updateSelectedId,
-    activeId
+    activeId,
+    shouldEnableKeyboardHighlighting
   } = useContext(SetupWizardContext);
   const [shouldOpen, setShouldOpen] = useState(false);
   const initialRender = useRef(0);
@@ -51,8 +52,9 @@ const SetupWizardItem = ({
     title: `${step}. ${title}`,
     isOpened: shouldOpen,
     isDisabled: shouldBeDisabled,
-    rightElement: rightElement
-  }, /*#__PURE__*/React.createElement(AccordionContent, null, children)), [handleAccordionOpen, step, title, shouldOpen, shouldBeDisabled, rightElement, children]);
+    rightElement: rightElement,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }, /*#__PURE__*/React.createElement(AccordionContent, null, children)), [children, handleAccordionOpen, rightElement, shouldBeDisabled, shouldEnableKeyboardHighlighting, shouldOpen, step, title]);
 };
 SetupWizardItem.displayName = 'SetupWizardItem';
 export default SetupWizardItem;

package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SetupWizardItem.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","Accordion","AccordionContent","Badge","Icon","SetupWizardContext","StyledSetupWizardItemBadge","SetupWizardItem","children","step","title","id","selectedId","updateSelectedId","activeId","shouldOpen","setShouldOpen","initialRender","current","timeout","setTimeout","clearTimeout","shouldBeDisabled","rightElement","createElement","icons","handleAccordionOpen","onOpen","isOpened","isDisabled","displayName"],"sources":["../../../../../src/components/setup-wizard/setup-wizard-item/SetupWizardItem.tsx"],"sourcesContent":["import React, {\n    FC,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Accordion from '../../accordion/Accordion';\nimport AccordionContent from '../../accordion/accordion-content/AccordionContent';\nimport Badge from '../../badge/Badge';\nimport Icon from '../../icon/Icon';\nimport { SetupWizardContext } from '../SetupWizard';\nimport { StyledSetupWizardItemBadge } from './SetupWizardItem.styles';\n\nexport type SetupWizardItemProps = {\n    /**\n     * The content that should be displayed inside the item.\n     */\n    children: ReactNode;\n    /**\n     * The id of the item.\n     */\n    id: number;\n    /**\n     * The step of the item.\n     */\n    step: number;\n    /**\n     * The title of the item.\n     */\n    title: string;\n};\n\nconst SetupWizardItem: FC<SetupWizardItemProps> = ({ children, step, title, id }) => {\n    const { selectedId, updateSelectedId, activeId } = useContext(SetupWizardContext);\n\n    const [shouldOpen, setShouldOpen] = useState<boolean>(false);\n\n    const initialRender = useRef(0);\n\n    useEffect(() => {\n        initialRender.current++;\n    }, []);\n\n    useEffect(() => {\n        const timeout = setTimeout(() => {\n            setShouldOpen(id === selectedId);\n        }, 5);\n\n        return () => clearTimeout(timeout);\n    }, [id, selectedId]);\n\n    const shouldBeDisabled = useMemo(() => {\n        if (typeof activeId === 'number' && activeId === id) {\n            return false;\n        }\n\n        return typeof activeId === 'number' && activeId < id;\n    }, [activeId, id]);\n\n    const rightElement = useMemo(() => {\n        if (activeId && id < activeId) {\n            return (\n                <Badge>\n                    <StyledSetupWizardItemBadge>\n                        <Icon icons={['ts-check']} />\n                    </StyledSetupWizardItemBadge>\n                </Badge>\n            );\n        }\n\n        return null;\n    }, [activeId, id]);\n\n    const handleAccordionOpen = useCallback(() => {\n        if (typeof updateSelectedId === 'function') {\n            updateSelectedId(id);\n        }\n    }, [id, updateSelectedId]);\n\n    return useMemo(\n        () => (\n            <Accordion\n                onOpen={handleAccordionOpen}\n                title={`${step}. ${title}`}\n                isOpened={shouldOpen}\n                isDisabled={shouldBeDisabled}\n                rightElement={rightElement}\n            >\n                <AccordionContent>{children}</AccordionContent>\n            </Accordion>\n        ),\n        [handleAccordionOpen, step, title, shouldOpen, shouldBeDisabled, rightElement, children],\n    );\n};\n\nSetupWizardItem.displayName = 'SetupWizardItem';\n\nexport default SetupWizardItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAGRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,gBAAgB,MAAM,oDAAoD;AACjF,OAAOC,KAAK,MAAM,mBAAmB;AACrC,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SAASC,kBAAkB,QAAQ,gBAAgB;AACnD,SAASC,0BAA0B,QAAQ,0BAA0B;AAqBrE,MAAMC,eAAyC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAG,CAAC,KAAK;EACjF,MAAM;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAS,CAAC,GAAGlB,UAAU,CAACS,kBAAkB,CAAC;EAEjF,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGhB,QAAQ,CAAU,KAAK,CAAC;EAE5D,MAAMiB,aAAa,GAAGlB,MAAM,CAAC,CAAC,CAAC;EAE/BF,SAAS,CAAC,MAAM;IACZoB,aAAa,CAACC,OAAO,EAAE;EAC3B,CAAC,EAAE,EAAE,CAAC;EAENrB,SAAS,CAAC,MAAM;IACZ,MAAMsB,OAAO,GAAGC,UAAU,CAAC,MAAM;MAC7BJ,aAAa,CAACL,EAAE,KAAKC,UAAU,CAAC;IACpC,CAAC,EAAE,CAAC,CAAC;IAEL,OAAO,MAAMS,YAAY,CAACF,OAAO,CAAC;EACtC,CAAC,EAAE,CAACR,EAAE,EAAEC,UAAU,CAAC,CAAC;EAEpB,MAAMU,gBAAgB,GAAGxB,OAAO,CAAC,MAAM;IACnC,IAAI,OAAOgB,QAAQ,KAAK,QAAQ,IAAIA,QAAQ,KAAKH,EAAE,EAAE;MACjD,OAAO,KAAK;IAChB;IAEA,OAAO,OAAOG,QAAQ,KAAK,QAAQ,IAAIA,QAAQ,GAAGH,EAAE;EACxD,CAAC,EAAE,CAACG,QAAQ,EAAEH,EAAE,CAAC,CAAC;EAElB,MAAMY,YAAY,GAAGzB,OAAO,CAAC,MAAM;IAC/B,IAAIgB,QAAQ,IAAIH,EAAE,GAAGG,QAAQ,EAAE;MAC3B,oBACIpB,KAAA,CAAA8B,aAAA,CAACrB,KAAK,qBACFT,KAAA,CAAA8B,aAAA,CAAClB,0BAA0B,qBACvBZ,KAAA,CAAA8B,aAAA,CAACpB,IAAI;QAACqB,KAAK,EAAE,CAAC,UAAU;MAAE,CAAE,CACJ,CACzB,CAAC;IAEhB;IAEA,OAAO,IAAI;EACf,CAAC,EAAE,CAACX,QAAQ,EAAEH,EAAE,CAAC,CAAC;EAElB,MAAMe,mBAAmB,GAAG/B,WAAW,CAAC,MAAM;IAC1C,IAAI,OAAOkB,gBAAgB,KAAK,UAAU,EAAE;MACxCA,gBAAgB,CAACF,EAAE,CAAC;IACxB;EACJ,CAAC,EAAE,CAACA,EAAE,EAAEE,gBAAgB,CAAC,CAAC;EAE1B,OAAOf,OAAO,CACV,mBACIJ,KAAA,CAAA8B,aAAA,CAACvB,SAAS;IACN0B,MAAM,EAAED,mBAAoB;IAC5BhB,KAAK,EAAE,GAAGD,IAAI,KAAKC,KAAK,EAAG;IAC3BkB,QAAQ,EAAEb,UAAW;IACrBc,UAAU,EAAEP,gBAAiB;IAC7BC,YAAY,EAAEA;EAAa,gBAE3B7B,KAAA,CAAA8B,aAAA,CAACtB,gBAAgB,QAAEM,QAA2B,CACvC,CACd,EACD,CAACkB,mBAAmB,EAAEjB,IAAI,EAAEC,KAAK,EAAEK,UAAU,EAAEO,gBAAgB,EAAEC,YAAY,EAAEf,QAAQ,CAC3F,CAAC;AACL,CAAC;AAEDD,eAAe,CAACuB,WAAW,GAAG,iBAAiB;AAE/C,eAAevB,eAAe","ignoreList":[]}
+{"version":3,"file":"SetupWizardItem.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","Accordion","AccordionContent","Badge","Icon","SetupWizardContext","StyledSetupWizardItemBadge","SetupWizardItem","children","step","title","id","selectedId","updateSelectedId","activeId","shouldEnableKeyboardHighlighting","shouldOpen","setShouldOpen","initialRender","current","timeout","setTimeout","clearTimeout","shouldBeDisabled","rightElement","createElement","icons","handleAccordionOpen","onOpen","isOpened","isDisabled","displayName"],"sources":["../../../../../src/components/setup-wizard/setup-wizard-item/SetupWizardItem.tsx"],"sourcesContent":["import React, {\n    FC,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Accordion from '../../accordion/Accordion';\nimport AccordionContent from '../../accordion/accordion-content/AccordionContent';\nimport Badge from '../../badge/Badge';\nimport Icon from '../../icon/Icon';\nimport { SetupWizardContext } from '../SetupWizard';\nimport { StyledSetupWizardItemBadge } from './SetupWizardItem.styles';\n\nexport type SetupWizardItemProps = {\n    /**\n     * The content that should be displayed inside the item.\n     */\n    children: ReactNode;\n    /**\n     * The id of the item.\n     */\n    id: number;\n    /**\n     * The step of the item.\n     */\n    step: number;\n    /**\n     * The title of the item.\n     */\n    title: string;\n};\n\nconst SetupWizardItem: FC<SetupWizardItemProps> = ({ children, step, title, id }) => {\n    const { selectedId, updateSelectedId, activeId, shouldEnableKeyboardHighlighting } =\n        useContext(SetupWizardContext);\n\n    const [shouldOpen, setShouldOpen] = useState<boolean>(false);\n\n    const initialRender = useRef(0);\n\n    useEffect(() => {\n        initialRender.current++;\n    }, []);\n\n    useEffect(() => {\n        const timeout = setTimeout(() => {\n            setShouldOpen(id === selectedId);\n        }, 5);\n\n        return () => clearTimeout(timeout);\n    }, [id, selectedId]);\n\n    const shouldBeDisabled = useMemo(() => {\n        if (typeof activeId === 'number' && activeId === id) {\n            return false;\n        }\n\n        return typeof activeId === 'number' && activeId < id;\n    }, [activeId, id]);\n\n    const rightElement = useMemo(() => {\n        if (activeId && id < activeId) {\n            return (\n                <Badge>\n                    <StyledSetupWizardItemBadge>\n                        <Icon icons={['ts-check']} />\n                    </StyledSetupWizardItemBadge>\n                </Badge>\n            );\n        }\n\n        return null;\n    }, [activeId, id]);\n\n    const handleAccordionOpen = useCallback(() => {\n        if (typeof updateSelectedId === 'function') {\n            updateSelectedId(id);\n        }\n    }, [id, updateSelectedId]);\n\n    return useMemo(\n        () => (\n            <Accordion\n                onOpen={handleAccordionOpen}\n                title={`${step}. ${title}`}\n                isOpened={shouldOpen}\n                isDisabled={shouldBeDisabled}\n                rightElement={rightElement}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                <AccordionContent>{children}</AccordionContent>\n            </Accordion>\n        ),\n        [\n            children,\n            handleAccordionOpen,\n            rightElement,\n            shouldBeDisabled,\n            shouldEnableKeyboardHighlighting,\n            shouldOpen,\n            step,\n            title,\n        ],\n    );\n};\n\nSetupWizardItem.displayName = 'SetupWizardItem';\n\nexport default SetupWizardItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/sharing-bar/SharingBar.js

@@ -1,4 +1,6 @@
 import React, { useCallback, useRef } from 'react';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import Icon from '../icon/Icon';
 import { StyledSharingBar, StyledSharingBarIconWrapper, StyledSharingBarText } from './SharingBar.styles';
 import SharingContextMenu from '../sharing-context-menu/SharingContextMenu';
@@ -6,23 +8,46 @@ const SharingBar = ({
   label,
   link,
   popupAlignment,
-  container
+  container,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const contextMenuRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
+  const showContextMenu = useCallback(() => {
+    contextMenuRef.current?.show();
+  }, []);
   const handleSharingBarClick = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
-    contextMenuRef.current?.show();
-  }, []);
+    showContextMenu();
+  }, [showContextMenu]);
+  const handleKeyDown = useCallback(event => {
+    if (event.currentTarget !== event.target) {
+      return;
+    }
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    showContextMenu();
+  }, [showContextMenu]);
   return /*#__PURE__*/React.createElement(StyledSharingBar, {
-    onClick: handleSharingBarClick
+    onClick: handleSharingBarClick,
+    onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
+    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : undefined,
+    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
+    "data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting ? 'true' : undefined
   }, /*#__PURE__*/React.createElement(StyledSharingBarIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa-solid fa-share-nodes']
   })), /*#__PURE__*/React.createElement(SharingContextMenu, {
     link: link,
     ref: contextMenuRef,
     alignment: popupAlignment,
-    container: container
+    container: container,
+    shouldDisableClick: true
   }, null), /*#__PURE__*/React.createElement(StyledSharingBarText, null, label));
 };
 SharingBar.displayName = 'SharingBar';