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

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

@@ -1,17 +1,22 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import AccordionGroup from '../accordion/accordion-group/AccordionGroup';
 import { StyledSetupWizard } from './SetupWizard.styles';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 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
 }, ref) => {
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const [selectedId, setSelectedId] = useState(0);
   const [activeId, setActiveId] = useState(0);
   const [allIds, setAllIds] = useState([]);
@@ -59,8 +64,9 @@ const SetupWizard = /*#__PURE__*/forwardRef(({
     selectedId,
     updateSelectedId,
     activeId,
-    updateActiveId
-  }), [activeId, selectedId, updateActiveId, updateSelectedId]);
+    updateActiveId,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
+  }), [activeId, selectedId, shouldEnableKeyboardHighlightingEffective, 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","useColorScheme","SetupWizardContext","createContext","selectedId","undefined","updateSelectedId","activeId","updateActiveId","shouldEnableKeyboardHighlighting","displayName","SetupWizard","children","isWrapped","ref","colorScheme","shouldEnableKeyboardHighlightingEffective","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';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\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 }, ref) => {\n        const colorScheme = useColorScheme();\n        const shouldEnableKeyboardHighlightingEffective =\n            shouldEnableKeyboardHighlighting ??\n            colorScheme?.shouldEnableKeyboardHighlighting ??\n            false;\n\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: shouldEnableKeyboardHighlightingEffective,\n            }),\n            [\n                activeId,\n                selectedId,\n                shouldEnableKeyboardHighlightingEffective,\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 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';

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

@@ -1 +1 @@
-{"version":3,"file":"SharingBar.js","names":["React","useCallback","useRef","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingContextMenu","SharingBar","label","link","popupAlignment","container","contextMenuRef","handleSharingBarClick","event","preventDefault","stopPropagation","current","show","createElement","onClick","icons","ref","alignment","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import React, { FC, MouseEventHandler, useCallback, useRef } from 'react';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSharingBar,\n    StyledSharingBarIconWrapper,\n    StyledSharingBarText,\n} from './SharingBar.styles';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\n\nexport type SharingBarProps = {\n    /**\n     * The element where the content of the `SharingBar` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The label that should be displayed.\n     */\n    label: string;\n    /**\n     * The link that should be shared.\n     */\n    link: string;\n    /**\n     * The alignment of the sharing options.\n     */\n    popupAlignment: ContextMenuAlignment;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({ label, link, popupAlignment, container }) => {\n    const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n\n    const handleSharingBarClick = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        contextMenuRef.current?.show();\n    }, []);\n\n    return (\n        <StyledSharingBar onClick={handleSharingBarClick}>\n            <StyledSharingBarIconWrapper>\n                <Icon icons={['fa fa-share-nodes']} />\n            </StyledSharingBarIconWrapper>\n            <SharingContextMenu\n                link={link}\n                ref={contextMenuRef}\n                alignment={popupAlignment}\n                container={container}\n            >\n                {null}\n            </SharingContextMenu>\n            <StyledSharingBarText>{label}</StyledSharingBarText>\n        </StyledSharingBar>\n    );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA2BC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AACzE,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,gBAAgB,EAChBC,2BAA2B,EAC3BC,oBAAoB,QACjB,qBAAqB;AAE5B,OAAOC,kBAAkB,MAAM,4CAA4C;AAqB3E,MAAMC,UAA+B,GAAGA,CAAC;EAAEC,KAAK;EAAEC,IAAI;EAAEC,cAAc;EAAEC;AAAU,CAAC,KAAK;EACpF,MAAMC,cAAc,GAAGX,MAAM,CAA6C,IAAI,CAAC;EAE/E,MAAMY,qBAAqB,GAAGb,WAAW,CAAqCc,KAAK,IAAK;IACpFA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvBJ,cAAc,CAACK,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACInB,KAAA,CAAAoB,aAAA,CAAChB,gBAAgB;IAACiB,OAAO,EAAEP;EAAsB,gBAC7Cd,KAAA,CAAAoB,aAAA,CAACf,2BAA2B,qBACxBL,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACmB,KAAK,EAAE,CAAC,mBAAmB;EAAE,CAAE,CACZ,CAAC,eAC9BtB,KAAA,CAAAoB,aAAA,CAACb,kBAAkB;IACfG,IAAI,EAAEA,IAAK;IACXa,GAAG,EAAEV,cAAe;IACpBW,SAAS,EAAEb,cAAe;IAC1BC,SAAS,EAAEA;EAAU,GAEpB,IACe,CAAC,eACrBZ,KAAA,CAAAoB,aAAA,CAACd,oBAAoB,QAAEG,KAA4B,CACrC,CAAC;AAE3B,CAAC;AAEDD,UAAU,CAACiB,WAAW,GAAG,YAAY;AAErC,eAAejB,UAAU","ignoreList":[]}
+{"version":3,"file":"SharingBar.js","names":["React","useCallback","useRef","useKeyboardFocusHighlighting","useColorScheme","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingContextMenu","SharingBar","label","link","popupAlignment","container","shouldEnableKeyboardHighlighting","colorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","shouldShowKeyboardHighlighting","showContextMenu","current","show","handleSharingBarClick","event","preventDefault","stopPropagation","handleKeyDown","currentTarget","target","key","createElement","onClick","onKeyDown","undefined","tabIndex","role","icons","ref","alignment","shouldDisableClick","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, MouseEventHandler, useCallback, useRef } from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSharingBar,\n    StyledSharingBarIconWrapper,\n    StyledSharingBarText,\n} from './SharingBar.styles';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\n\nexport type SharingBarProps = {\n    /**\n     * The element where the content of the `SharingBar` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The label that should be displayed.\n     */\n    label: string;\n    /**\n     * The link that should be shared.\n     */\n    link: string;\n    /**\n     * The alignment of the sharing options.\n     */\n    popupAlignment: ContextMenuAlignment;\n    /**\n     * Enables keyboard-only focus highlighting and keyboard interaction.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({\n    label,\n    link,\n    popupAlignment,\n    container,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective,\n    );\n\n    const showContextMenu = useCallback(() => {\n        contextMenuRef.current?.show();\n    }, []);\n\n    const handleSharingBarClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            showContextMenu();\n        },\n        [showContextMenu],\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.currentTarget !== event.target) {\n                return;\n            }\n\n            if (event.key !== 'Enter' && event.key !== ' ') {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            showContextMenu();\n        },\n        [showContextMenu],\n    );\n\n    return (\n        <StyledSharingBar\n            onClick={handleSharingBarClick}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            tabIndex={shouldEnableKeyboardHighlightingEffective ? 0 : undefined}\n            role={shouldEnableKeyboardHighlightingEffective ? 'button' : undefined}\n            data-should-show-keyboard-highlighting={\n                shouldShowKeyboardHighlighting ? 'true' : undefined\n            }\n        >\n            <StyledSharingBarIconWrapper>\n                <Icon icons={['fa fa-share-nodes']} />\n            </StyledSharingBarIconWrapper>\n            <SharingContextMenu\n                link={link}\n                ref={contextMenuRef}\n                alignment={popupAlignment}\n                container={container}\n                shouldDisableClick\n            >\n                {null}\n            </SharingContextMenu>\n            <StyledSharingBarText>{label}</StyledSharingBarText>\n        </StyledSharingBar>\n    );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAiDC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC/F,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,cAAc,QAAQ,8CAA8C;AAC7E,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,gBAAgB,EAChBC,2BAA2B,EAC3BC,oBAAoB,QACjB,qBAAqB;AAE5B,OAAOC,kBAAkB,MAAM,4CAA4C;AAyB3E,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,KAAK;EACLC,IAAI;EACJC,cAAc;EACdC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGZ,cAAc,CAAC,CAAC;EACpC,MAAMa,yCAAyC,GAC3CF,gCAAgC,IAAIC,WAAW,EAAED,gCAAgC,IAAI,KAAK;EAE9F,MAAMG,cAAc,GAAGhB,MAAM,CAA6C,IAAI,CAAC;EAC/E,MAAMiB,8BAA8B,GAAGhB,4BAA4B,CAC/Dc,yCACJ,CAAC;EAED,MAAMG,eAAe,GAAGnB,WAAW,CAAC,MAAM;IACtCiB,cAAc,CAACG,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,qBAAqB,GAAGtB,WAAW,CACpCuB,KAAK,IAAK;IACPA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvBN,eAAe,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,eAAe,CACpB,CAAC;EAED,MAAMO,aAAa,GAAG1B,WAAW,CAC5BuB,KAAK,IAAK;IACP,IAAIA,KAAK,CAACI,aAAa,KAAKJ,KAAK,CAACK,MAAM,EAAE;MACtC;IACJ;IAEA,IAAIL,KAAK,CAACM,GAAG,KAAK,OAAO,IAAIN,KAAK,CAACM,GAAG,KAAK,GAAG,EAAE;MAC5C;IACJ;IAEAN,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IACvBN,eAAe,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,eAAe,CACpB,CAAC;EAED,oBACIpB,KAAA,CAAA+B,aAAA,CAACzB,gBAAgB;IACb0B,OAAO,EAAET,qBAAsB;IAC/BU,SAAS,EAAEhB,yCAAyC,GAAGU,aAAa,GAAGO,SAAU;IACjFC,QAAQ,EAAElB,yCAAyC,GAAG,CAAC,GAAGiB,SAAU;IACpEE,IAAI,EAAEnB,yCAAyC,GAAG,QAAQ,GAAGiB,SAAU;IACvE,0CACIf,8BAA8B,GAAG,MAAM,GAAGe;EAC7C,gBAEDlC,KAAA,CAAA+B,aAAA,CAACxB,2BAA2B,qBACxBP,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAACgC,KAAK,EAAE,CAAC,mBAAmB;EAAE,CAAE,CACZ,CAAC,eAC9BrC,KAAA,CAAA+B,aAAA,CAACtB,kBAAkB;IACfG,IAAI,EAAEA,IAAK;IACX0B,GAAG,EAAEpB,cAAe;IACpBqB,SAAS,EAAE1B,cAAe;IAC1BC,SAAS,EAAEA,SAAU;IACrB0B,kBAAkB;EAAA,GAEjB,IACe,CAAC,eACrBxC,KAAA,CAAA+B,aAAA,CAACvB,oBAAoB,QAAEG,KAA4B,CACrC,CAAC;AAE3B,CAAC;AAEDD,UAAU,CAAC+B,WAAW,GAAG,YAAY;AAErC,eAAe/B,UAAU","ignoreList":[]}

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

@@ -1,9 +1,14 @@
 import styled from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSharingBar = styled.div`
     cursor: pointer;
     display: flex;
     align-items: center;
     width: fit-content;
+
+    &[data-should-show-keyboard-highlighting='true']:focus-visible {
+        ${keyboardFocusHighlightingRingCss}
+    }
 `;
 export const StyledSharingBarIconWrapper = styled.div`
     margin-right: -4px;

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

@@ -1 +1 @@
-{"version":3,"file":"SharingBar.styles.js","names":["styled","StyledSharingBar","div","StyledSharingBarIconWrapper","StyledSharingBarText","p","theme","text"],"sources":["../../../../src/components/sharing-bar/SharingBar.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSharingBar = styled.div`\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    width: fit-content;\n`;\n\nexport const StyledSharingBarIconWrapper = styled.div`\n    margin-right: -4px;\n`;\n\ntype StyledSharingBarTextProps = WithTheme<unknown>;\n\nexport const StyledSharingBarText = styled.p<StyledSharingBarTextProps>`\n    color: ${({ theme }: StyledSharingBarTextProps) => theme.text};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,gBAAgB,GAAGD,MAAM,CAACE,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAG;AACrD;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGJ,MAAM,CAACK,CAA4B;AACvE,aAAa,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjE,CAAC","ignoreList":[]}
+{"version":3,"file":"SharingBar.styles.js","names":["styled","keyboardFocusHighlightingRingCss","StyledSharingBar","div","StyledSharingBarIconWrapper","StyledSharingBarText","p","theme","text"],"sources":["../../../../src/components/sharing-bar/SharingBar.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledSharingBar = styled.div`\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    width: fit-content;\n\n    &[data-should-show-keyboard-highlighting='true']:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n\nexport const StyledSharingBarIconWrapper = styled.div`\n    margin-right: -4px;\n`;\n\ntype StyledSharingBarTextProps = WithTheme<unknown>;\n\nexport const StyledSharingBarText = styled.p<StyledSharingBarTextProps>`\n    color: ${({ theme }: StyledSharingBarTextProps) => theme.text};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,UAAUF,gCAAgC;AAC1C;AACA,CAAC;AAED,OAAO,MAAMG,2BAA2B,GAAGJ,MAAM,CAACG,GAAG;AACrD;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGL,MAAM,CAACM,CAA4B;AACvE,aAAa,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjE,CAAC","ignoreList":[]}

package/lib/esm/components/sharing-button/SharingButton.js

@@ -7,7 +7,8 @@ const SharingButton = ({
   alignment,
   container,
   children,
-  isDisabled
+  isDisabled,
+  shouldEnableKeyboardHighlighting
 }) => {
   const contextMenuRef = React.useRef(null);
   const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);
@@ -30,7 +31,8 @@ const SharingButton = ({
     onHide: handleOnHide
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleButtonClick,
-    isDisabled: isButtonDisabled || isDisabled
+    isDisabled: isButtonDisabled || isDisabled,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }, children)));
 };
 export default SharingButton;

package/lib/esm/components/sharing-button/SharingButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharingButton.js","names":["React","SharingContextMenu","StyledSharingButtonContainer","Button","SharingButton","link","alignment","container","children","isDisabled","contextMenuRef","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","current","show","handleOnShow","handleOnHide","createElement","ref","shouldDisableClick","onShow","onHide","onClick"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n    SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n    Pick<SharingContextMenuProps, 'link' | 'alignment' | 'container'> &\n        Pick<ButtonProps, 'isDisabled'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n    link,\n    alignment,\n    container,\n    children,\n    isDisabled,\n}) => {\n    const contextMenuRef = React.useRef<ContextMenuRef>(null);\n    const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n    const handleButtonClick = () => {\n        contextMenuRef.current?.show();\n    };\n\n    const handleOnShow = () => {\n        setIsButtonDisabled(true);\n    };\n\n    const handleOnHide = () => {\n        setIsButtonDisabled(false);\n    };\n\n    return (\n        <StyledSharingButtonContainer>\n            <SharingContextMenu\n                link={link}\n                alignment={alignment}\n                container={container}\n                ref={contextMenuRef}\n                shouldDisableClick\n                onShow={handleOnShow}\n                onHide={handleOnHide}\n            >\n                <Button onClick={handleButtonClick} isDisabled={isButtonDisabled || isDisabled}>\n                    {children}\n                </Button>\n            </SharingContextMenu>\n        </StyledSharingButtonContainer>\n    );\n};\n\nexport default SharingButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAgD,OAAO;AAEnE,OAAOC,kBAAkB,MAElB,4CAA4C;AACnD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAOC,MAAM,MAAM,kBAAkB;AAQrC,MAAMC,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGV,KAAK,CAACW,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BL,cAAc,CAACM,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBL,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACIb,KAAA,CAAAoB,aAAA,CAAClB,4BAA4B,qBACzBF,KAAA,CAAAoB,aAAA,CAACnB,kBAAkB;IACfI,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBc,GAAG,EAAEX,cAAe;IACpBY,kBAAkB;IAClBC,MAAM,EAAEL,YAAa;IACrBM,MAAM,EAAEL;EAAa,gBAErBnB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;IAACsB,OAAO,EAAEV,iBAAkB;IAACN,UAAU,EAAEG,gBAAgB,IAAIH;EAAW,GAC1ED,QACG,CACQ,CACM,CAAC;AAEvC,CAAC;AAED,eAAeJ,aAAa","ignoreList":[]}
+{"version":3,"file":"SharingButton.js","names":["React","SharingContextMenu","StyledSharingButtonContainer","Button","SharingButton","link","alignment","container","children","isDisabled","shouldEnableKeyboardHighlighting","contextMenuRef","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","current","show","handleOnShow","handleOnHide","createElement","ref","shouldDisableClick","onShow","onHide","onClick"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n    SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n    Pick<SharingContextMenuProps, 'link' | 'alignment' | 'container'> &\n        Pick<ButtonProps, 'isDisabled' | 'shouldEnableKeyboardHighlighting'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n    link,\n    alignment,\n    container,\n    children,\n    isDisabled,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const contextMenuRef = React.useRef<ContextMenuRef>(null);\n    const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n    const handleButtonClick = () => {\n        contextMenuRef.current?.show();\n    };\n\n    const handleOnShow = () => {\n        setIsButtonDisabled(true);\n    };\n\n    const handleOnHide = () => {\n        setIsButtonDisabled(false);\n    };\n\n    return (\n        <StyledSharingButtonContainer>\n            <SharingContextMenu\n                link={link}\n                alignment={alignment}\n                container={container}\n                ref={contextMenuRef}\n                shouldDisableClick\n                onShow={handleOnShow}\n                onHide={handleOnHide}\n            >\n                <Button\n                    onClick={handleButtonClick}\n                    isDisabled={isButtonDisabled || isDisabled}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                >\n                    {children}\n                </Button>\n            </SharingContextMenu>\n        </StyledSharingButtonContainer>\n    );\n};\n\nexport default SharingButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAgD,OAAO;AAEnE,OAAOC,kBAAkB,MAElB,4CAA4C;AACnD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAOC,MAAM,MAAM,kBAAkB;AAQrC,MAAMC,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,UAAU;EACVC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGX,KAAK,CAACY,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BL,cAAc,CAACM,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBL,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACId,KAAA,CAAAqB,aAAA,CAACnB,4BAA4B,qBACzBF,KAAA,CAAAqB,aAAA,CAACpB,kBAAkB;IACfI,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBe,GAAG,EAAEX,cAAe;IACpBY,kBAAkB;IAClBC,MAAM,EAAEL,YAAa;IACrBM,MAAM,EAAEL;EAAa,gBAErBpB,KAAA,CAAAqB,aAAA,CAAClB,MAAM;IACHuB,OAAO,EAAEV,iBAAkB;IAC3BP,UAAU,EAAEI,gBAAgB,IAAIJ,UAAW;IAC3CC,gCAAgC,EAAEA;EAAiC,GAElEF,QACG,CACQ,CACM,CAAC;AAEvC,CAAC;AAED,eAAeJ,aAAa","ignoreList":[]}

package/lib/esm/components/sharing-context-menu/SharingContextMenu.js

@@ -8,6 +8,7 @@ import ContextMenu from '../context-menu/ContextMenu';
 const SharingContextMenu = /*#__PURE__*/forwardRef(({
   link,
   children,
+  shouldEnableKeyboardHighlighting,
   ...contextMenuProps
 }, ref) => {
   const isTouch = useIsTouch();
@@ -90,7 +91,8 @@ const SharingContextMenu = /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line react/jsx-props-no-spreading
     React.createElement(ContextMenu, _extends({
       items: contextMenuItems,
-      ref: ref
+      ref: ref,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
     }, contextMenuProps), children)
   );
 });

package/lib/esm/components/sharing-context-menu/SharingContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharingContextMenu.js","names":["getSite","React","forwardRef","useCallback","SHAREPROVIDER","useIsTouch","copyToClipboard","shareWithApp","shareWithUrl","ContextMenu","SharingContextMenu","link","children","contextMenuProps","ref","isTouch","handleImageDownload","url","replace","encodeURIComponent","color","handleShare","key","trim","contextMenuItems","icons","onClick","text","createElement","_extends","items","displayName"],"sources":["../../../../src/components/sharing-context-menu/SharingContextMenu.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { forwardRef, useCallback } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport { useIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport { ContextMenuProps, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport type SharingContextMenuProps = {\n    /**\n     * The link that should be shared.\n     */\n    link: string;\n} & Omit<ContextMenuProps, 'items'>;\n\nconst SharingContextMenu = forwardRef<ContextMenuRef, SharingContextMenuProps>(\n    ({ link, children, ...contextMenuProps }, ref) => {\n        const isTouch = useIsTouch();\n\n        const handleImageDownload = useCallback(() => {\n            shareWithUrl(\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                SHAREPROVIDER[5].url\n                    .replace('{url}', encodeURIComponent(link))\n                    .replace('{linkText}', 'Teilen')\n                    .replace('{color}', getSite().color.replace('#', '')),\n            );\n        }, [link]);\n\n        const handleShare = useCallback(\n            (key: string) => {\n                switch (key) {\n                    case 'whatsapp':\n                        shareWithUrl(\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            SHAREPROVIDER[0].url.replace(\n                                '{url}',\n                                encodeURIComponent(`${link}`.trim()),\n                            ),\n                        );\n                        break;\n                    case 'facebook':\n                        shareWithUrl(\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)),\n                        );\n                        break;\n                    case 'twitter':\n                        shareWithUrl(\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            SHAREPROVIDER[4].url\n                                .replace('{url}', encodeURIComponent(link))\n                                .replace('{linkText}', ''),\n                        );\n                        break;\n                    case 'mail':\n                        if (isTouch) {\n                            shareWithApp(`${link}`.trim());\n                        } else {\n                            shareWithUrl(\n                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                                // @ts-ignore\n                                SHAREPROVIDER[2].url.replace(\n                                    '{url}',\n                                    encodeURIComponent(`${link}`.trim()),\n                                ),\n                            );\n                        }\n                        break;\n                    case 'copy':\n                        copyToClipboard(link);\n                        break;\n                    default:\n                        break;\n                }\n            },\n            [link, isTouch],\n        );\n\n        const contextMenuItems = [\n            {\n                icons: ['fa fa-copy'],\n                key: 'copy',\n                onClick: () => handleShare('copy'),\n                text: 'Zwischenablage',\n            },\n            {\n                icons: ['fa-solid fa-brands fa-whatsapp'],\n                key: 'whatsapp',\n                onClick: () => handleShare('whatsapp'),\n                text: 'Whatsapp',\n            },\n            {\n                icons: ['fa-solid fa-brands fa-facebook-f'],\n                key: 'facebook',\n                onClick: () => handleShare('facebook'),\n                text: 'Facebook',\n            },\n            {\n                icons: ['fa-solid fa-brands fa-x-twitter'],\n                key: 'twitter',\n                onClick: () => handleShare('twitter'),\n                text: 'X',\n            },\n            {\n                icons: ['fa fa-envelope'],\n                key: 'mail',\n                onClick: () => handleShare('mail'),\n                text: 'Mail',\n            },\n            {\n                icons: ['fa fa-qrcode'],\n                key: 'callingCode',\n                onClick: handleImageDownload,\n                text: 'Calling Code herunterladen',\n            },\n        ];\n\n        return (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <ContextMenu items={contextMenuItems} ref={ref} {...contextMenuProps}>\n                {children}\n            </ContextMenu>\n        );\n    },\n);\n\nSharingContextMenu.displayName = 'SharingContextMenu';\n\nexport default SharingContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SharingContextMenu.js","names":["getSite","React","forwardRef","useCallback","SHAREPROVIDER","useIsTouch","copyToClipboard","shareWithApp","shareWithUrl","ContextMenu","SharingContextMenu","link","children","shouldEnableKeyboardHighlighting","contextMenuProps","ref","isTouch","handleImageDownload","url","replace","encodeURIComponent","color","handleShare","key","trim","contextMenuItems","icons","onClick","text","createElement","_extends","items","displayName"],"sources":["../../../../src/components/sharing-context-menu/SharingContextMenu.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { forwardRef, useCallback } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport { useIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport { ContextMenuProps, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport type SharingContextMenuProps = {\n    /**\n     * The link that should be shared.\n     */\n    link: string;\n    /**\n     * Enables keyboard-only focus highlighting for the context menu trigger.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n} & Omit<ContextMenuProps, 'items' | 'shouldEnableKeyboardHighlighting'>;\n\nconst SharingContextMenu = forwardRef<ContextMenuRef, SharingContextMenuProps>(\n    ({ link, children, shouldEnableKeyboardHighlighting, ...contextMenuProps }, ref) => {\n        const isTouch = useIsTouch();\n\n        const handleImageDownload = useCallback(() => {\n            shareWithUrl(\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                SHAREPROVIDER[5].url\n                    .replace('{url}', encodeURIComponent(link))\n                    .replace('{linkText}', 'Teilen')\n                    .replace('{color}', getSite().color.replace('#', '')),\n            );\n        }, [link]);\n\n        const handleShare = useCallback(\n            (key: string) => {\n                switch (key) {\n                    case 'whatsapp':\n                        shareWithUrl(\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            SHAREPROVIDER[0].url.replace(\n                                '{url}',\n                                encodeURIComponent(`${link}`.trim()),\n                            ),\n                        );\n                        break;\n                    case 'facebook':\n                        shareWithUrl(\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)),\n                        );\n                        break;\n                    case 'twitter':\n                        shareWithUrl(\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            SHAREPROVIDER[4].url\n                                .replace('{url}', encodeURIComponent(link))\n                                .replace('{linkText}', ''),\n                        );\n                        break;\n                    case 'mail':\n                        if (isTouch) {\n                            shareWithApp(`${link}`.trim());\n                        } else {\n                            shareWithUrl(\n                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                                // @ts-ignore\n                                SHAREPROVIDER[2].url.replace(\n                                    '{url}',\n                                    encodeURIComponent(`${link}`.trim()),\n                                ),\n                            );\n                        }\n                        break;\n                    case 'copy':\n                        copyToClipboard(link);\n                        break;\n                    default:\n                        break;\n                }\n            },\n            [link, isTouch],\n        );\n\n        const contextMenuItems = [\n            {\n                icons: ['fa fa-copy'],\n                key: 'copy',\n                onClick: () => handleShare('copy'),\n                text: 'Zwischenablage',\n            },\n            {\n                icons: ['fa-solid fa-brands fa-whatsapp'],\n                key: 'whatsapp',\n                onClick: () => handleShare('whatsapp'),\n                text: 'Whatsapp',\n            },\n            {\n                icons: ['fa-solid fa-brands fa-facebook-f'],\n                key: 'facebook',\n                onClick: () => handleShare('facebook'),\n                text: 'Facebook',\n            },\n            {\n                icons: ['fa-solid fa-brands fa-x-twitter'],\n                key: 'twitter',\n                onClick: () => handleShare('twitter'),\n                text: 'X',\n            },\n            {\n                icons: ['fa fa-envelope'],\n                key: 'mail',\n                onClick: () => handleShare('mail'),\n                text: 'Mail',\n            },\n            {\n                icons: ['fa fa-qrcode'],\n                key: 'callingCode',\n                onClick: handleImageDownload,\n                text: 'Calling Code herunterladen',\n            },\n        ];\n\n        return (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <ContextMenu\n                items={contextMenuItems}\n                ref={ref}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                {...contextMenuProps}\n            >\n                {children}\n            </ContextMenu>\n        );\n    },\n);\n\nSharingContextMenu.displayName = 'SharingContextMenu';\n\nexport default SharingContextMenu;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/signature/Signature.js

@@ -12,7 +12,8 @@ const Signature = /*#__PURE__*/forwardRef(({
   onUnsubscribe,
   onSubscribe,
   buttonText,
-  isDisabled
+  isDisabled,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [signatureUrl, setSignatureUrl] = useState(undefined);
   const [hasSubscribed, setHasSubscribed] = useState(false);
@@ -83,13 +84,15 @@ const Signature = /*#__PURE__*/forwardRef(({
   }), [handleDelete, handleEdit]);
   return /*#__PURE__*/React.createElement(StyledSignature, null, !hasSubscribed ? /*#__PURE__*/React.createElement(Button, {
     isDisabled: isDisabled,
-    onClick: handleClick
+    onClick: handleClick,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }, buttonText) : /*#__PURE__*/React.createElement(StyledSignatureImageWrapper, null, /*#__PURE__*/React.createElement(StyledSignatureImage, {
     src: signatureUrl
   }), /*#__PURE__*/React.createElement(StyledSignatureDeleteIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     icons: ['ts-wrong'],
     size: 20,
-    onClick: handleUnSubscribe
+    onClick: handleUnSubscribe,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }))));
 });
 Signature.displayName = 'Signature';

package/lib/esm/components/signature/Signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"Signature.js","names":["createDialog","DialogType","React","forwardRef","useCallback","useEffect","useImperativeHandle","useState","deleteUserSignature","getUserSignature","putUserSignature","Button","Icon","StyledSignature","StyledSignatureDeleteIconWrapper","StyledSignatureImage","StyledSignatureImageWrapper","Signature","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","ref","signatureUrl","setSignatureUrl","undefined","hasSubscribed","setHasSubscribed","loadUserSignature","then","signature","handleCallDialog","shouldSubscribe","result","buttonType","type","SIGNATURE","open","success","handleEdit","handleDelete","handleClick","handleUnSubscribe","edit","delete","createElement","onClick","src","icons","size","displayName"],"sources":["../../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signatureUrl: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: (signatureUrl: string) => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\ninterface SignatureDialogResult {\n    buttonType: number;\n    result?: string;\n}\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const { result, buttonType } = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (buttonType === 1 && result) {\n                    await putUserSignature(result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe(result);\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setHasSubscribed(false);\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe(signatureUrl);\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Signature.js","names":["createDialog","DialogType","React","forwardRef","useCallback","useEffect","useImperativeHandle","useState","deleteUserSignature","getUserSignature","putUserSignature","Button","Icon","StyledSignature","StyledSignatureDeleteIconWrapper","StyledSignatureImage","StyledSignatureImageWrapper","Signature","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","shouldEnableKeyboardHighlighting","ref","signatureUrl","setSignatureUrl","undefined","hasSubscribed","setHasSubscribed","loadUserSignature","then","signature","handleCallDialog","shouldSubscribe","result","buttonType","type","SIGNATURE","open","success","handleEdit","handleDelete","handleClick","handleUnSubscribe","edit","delete","createElement","onClick","src","icons","size","displayName"],"sources":["../../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for interactive controls.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signatureUrl: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: (signatureUrl: string) => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\ninterface SignatureDialogResult {\n    buttonType: number;\n    result?: string;\n}\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    (\n        {\n            onEdit,\n            onRemove,\n            onUnsubscribe,\n            onSubscribe,\n            buttonText,\n            isDisabled,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const { result, buttonType } = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (buttonType === 1 && result) {\n                    await putUserSignature(result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe(result);\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setHasSubscribed(false);\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe(signatureUrl);\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button\n                        isDisabled={isDisabled}\n                        onClick={handleClick}\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    >\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon\n                                icons={['ts-wrong']}\n                                size={20}\n                                onClick={handleUnSubscribe}\n                                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                            />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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","ignoreList":[]}