npm - @chayns-components/core - Versions diffs - 5.3.10 → 5.3.11-alpha.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (451) hide show

package/lib/esm/components/filter/filter-content/FilterContent.js CHANGED Viewed

@@ -1,3 +1,5 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { StyledFilterContentControlWrapper, StyledFilterContentLabel, StyledFilterContentLabeledRow, StyledFilterContent } from './FilterContent.styles';
 import Input from '../../input/Input';
@@ -14,7 +16,8 @@ const FilterContent = ({
   filterButtonConfig,
   checkboxConfig,
   comboboxConfig,
-  shouldAutoFocus
+  shouldAutoFocus,
+  shouldEnableKeyboardHighlighting
 }) => {
   const searchRef = useRef(null);
   const ts = textStrings.components.filter.filterContent;
@@ -51,7 +54,9 @@ const FilterContent = ({
     leftElement: /*#__PURE__*/React.createElement(Icon, {
       icons: ['fa fa-search']
     })
-  }), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, filterButtonConfig), sortConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, /*#__PURE__*/React.createElement(Textstring, {
+  }), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, _extends({}, filterButtonConfig, {
+    shouldEnableKeyboardHighlighting: filterButtonConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })), sortConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, /*#__PURE__*/React.createElement(Textstring, {
     textstring: ttsToITextString(ts.sort)
   })), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, {
     lists: getSortComboBoxLists(sortConfig),
@@ -60,11 +65,16 @@ const FilterContent = ({
       text: sortConfig.selectedItem.text,
       value: sortConfig.selectedItem.id
     },
-    onSelect: handleSelectSortItem
-  }))), comboboxConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, comboboxConfig))), checkboxConfig &&
+    onSelect: handleSelectSortItem,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }))), comboboxConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, _extends({}, comboboxConfig, {
+    shouldEnableKeyboardHighlighting: comboboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })))), checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  React.createElement(Checkbox, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, ts.input.placeholder, ts.sort]);
+  React.createElement(Checkbox, _extends({}, checkboxConfig, {
+    shouldEnableKeyboardHighlighting: checkboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, shouldEnableKeyboardHighlighting, sortConfig, ts.input.placeholder, ts.sort]);
 };
 FilterContent.displayName = 'FilterContent';
 export default FilterContent;

package/lib/esm/components/filter/filter-content/FilterContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","sort","lists","selectedItem","onSelect","label","displayName"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n StyledFilterContentControlWrapper,\n StyledFilterContentLabel,\n StyledFilterContentLabeledRow,\n StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n shouldAutoFocus,\n}) => {\n const searchRef = useRef<InputRef>(null);\n\n const ts = textStrings.components.filter.filterContent;\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem \| undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder={\n <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n }\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/* eslint-disable-next-line react/jsx-props-no-spreading /}\n {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n {sortConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n <Textstring textstring={ttsToITextString(ts.sort)} />\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n <ComboBox\n lists={getSortComboBoxLists(sortConfig)}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {comboboxConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n {comboboxConfig.label}\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n {/ eslint-disable-next-line react/jsx-props-no-spreading */}\n <ComboBox {...comboboxConfig} />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n </StyledFilterContent>\n </TextstringProvider>\n ),\n [\n checkboxConfig,\n comboboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n sortConfig,\n ts.input.placeholder,\n ts.sort,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","shouldEnableKeyboardHighlighting","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","_extends","sort","lists","selectedItem","onSelect","label","displayName"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading /\nimport React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n StyledFilterContentControlWrapper,\n StyledFilterContentLabel,\n StyledFilterContentLabeledRow,\n StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n shouldAutoFocus,\n shouldEnableKeyboardHighlighting,\n}) => {\n const searchRef = useRef<InputRef>(null);\n\n const ts = textStrings.components.filter.filterContent;\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem \| undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder={\n <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n }\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/ eslint-disable-next-line react/jsx-props-no-spreading /}\n {filterButtonConfig && (\n <FilterButtons\n {...filterButtonConfig}\n shouldEnableKeyboardHighlighting={\n filterButtonConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n )}\n {sortConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n <Textstring textstring={ttsToITextString(ts.sort)} />\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n <ComboBox\n lists={getSortComboBoxLists(sortConfig)}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {comboboxConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n {comboboxConfig.label}\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n {/ eslint-disable-next-line react/jsx-props-no-spreading */}\n <ComboBox\n {...comboboxConfig}\n shouldEnableKeyboardHighlighting={\n comboboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox\n {...checkboxConfig}\n shouldEnableKeyboardHighlighting={\n checkboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n )}\n </StyledFilterContent>\n </TextstringProvider>\n ),\n [\n checkboxConfig,\n comboboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n shouldEnableKeyboardHighlighting,\n sortConfig,\n ts.input.placeholder,\n ts.sort,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/filter/filter-content/FilterContent.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterContent.types.js","names":[],"sources":["../../../../../src/components/filter/filter-content/FilterContent.types.ts"],"sourcesContent":["import type {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n SearchConfig,\n SortConfig,\n} from '../../../types/filter';\n\n/*\n Props for the `FilterContent` component.\n /\nexport type FilterContentProps = {\n /\n Search configuration for the optional search input.\n /\n searchConfig?: SearchConfig;\n /\n Configuration for the optional filter button group.\n /\n filterButtonConfig?: FilterButtonConfig;\n /\n Configuration for the optional sort combobox.\n /\n sortConfig?: SortConfig;\n /\n Configuration for the optional checkbox.\n /\n checkboxConfig?: CheckboxConfig;\n /\n Configuration for the optional labeled combobox.\n /\n comboboxConfig?: ComboboxConfig;\n /\n Whether the search input should receive focus when the filter opens.\n */\n shouldAutoFocus: boolean;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"FilterContent.types.js","names":[],"sources":["../../../../../src/components/filter/filter-content/FilterContent.types.ts"],"sourcesContent":["import type {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n SearchConfig,\n SortConfig,\n} from '../../../types/filter';\n\n/*\n Props for the `FilterContent` component.\n /\nexport type FilterContentProps = {\n /\n Search configuration for the optional search input.\n /\n searchConfig?: SearchConfig;\n /\n Configuration for the optional filter button group.\n /\n filterButtonConfig?: FilterButtonConfig;\n /\n Configuration for the optional sort combobox.\n /\n sortConfig?: SortConfig;\n /\n Configuration for the optional checkbox.\n /\n checkboxConfig?: CheckboxConfig;\n /\n Configuration for the optional labeled combobox.\n /\n comboboxConfig?: ComboboxConfig;\n /\n Whether the search input should receive focus when the filter opens.\n /\n shouldAutoFocus: boolean;\n /\n Enables keyboard-only focus highlighting for controls that support it.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/filter-buttons/FilterButtons.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FilterButtonItemShape, FilterButtonSize } from '../../types/filterButtons';
 import FilterButton from './filter-button/FilterButton';
 import { StyledFilterButton } from './FilterButtons.styles';
@@ -10,9 +10,22 @@ const FilterButtons = ({
   onSelect,
   items,
   shouldCalcCountForAll = false,
-  size = FilterButtonSize.Normal
+  size = FilterButtonSize.Normal,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [selectedIds, setSelectedIds] = useState(['all']);
+  const [focusedId, setFocusedId] = useState('all');
+  const buttonRefs = useRef({});
+  const keyboardNavigationItems = useMemo(() => [{
+    id: 'all',
+    isDisabled: false
+  }, ...items.map(({
+    id,
+    isDisabled
+  }) => ({
+    id,
+    isDisabled: Boolean(isDisabled)
+  }))], [items]);
   /**
    * This function set the selectedItemKey
@@ -41,6 +54,43 @@ const FilterButtons = ({
       onSelect(newIds.filter(selectedId => selectedId !== 'all'));
     }
   }, [onSelect, selectedIds]);
+  useEffect(() => {
+    const currentFocusedItem = keyboardNavigationItems.find(({
+      id
+    }) => id === focusedId);
+    if (currentFocusedItem && !currentFocusedItem.isDisabled) {
+      return;
+    }
+    const nextFocusable = keyboardNavigationItems.find(({
+      isDisabled
+    }) => !isDisabled);
+    if (nextFocusable) {
+      setFocusedId(nextFocusable.id);
+    }
+  }, [focusedId, keyboardNavigationItems]);
+  const handleArrowNavigate = useCallback((currentId, direction) => {
+    if (!shouldEnableKeyboardHighlighting || keyboardNavigationItems.length < 2) {
+      return;
+    }
+    const startIndex = keyboardNavigationItems.findIndex(({
+      id
+    }) => id === currentId);
+    if (startIndex < 0) {
+      return;
+    }
+    let attempts = 0;
+    let nextIndex = startIndex;
+    while (attempts < keyboardNavigationItems.length) {
+      nextIndex = (nextIndex + direction + keyboardNavigationItems.length) % keyboardNavigationItems.length;
+      const nextItem = keyboardNavigationItems[nextIndex];
+      if (nextItem && !nextItem.isDisabled) {
+        setFocusedId(nextItem.id);
+        buttonRefs.current[nextItem.id]?.focus();
+        return;
+      }
+      attempts += 1;
+    }
+  }, [keyboardNavigationItems, shouldEnableKeyboardHighlighting]);
   const reactItems = useMemo(() => {
     if (items.length === 0) {
       return null;
@@ -55,7 +105,14 @@ const FilterButtons = ({
       count: allButtonCount,
       isSelected: selectedIds.includes('all') || Array.isArray(selectedIds) && selectedIds.length === 0,
       size: size,
-      onSelect: handleSelect
+      onSelect: handleSelect,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+      onArrowNavigate: handleArrowNavigate,
+      onFocus: setFocusedId,
+      tabIndex: 0,
+      buttonRef: element => {
+        buttonRefs.current.all = element;
+      }
     }))];
     items.forEach(({
       icons,
@@ -76,11 +133,18 @@ const FilterButtons = ({
         shape: FilterButtonItemShape.Round,
         size: size,
         text: text,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+        onArrowNavigate: handleArrowNavigate,
+        onFocus: setFocusedId,
+        tabIndex: isDisabled ? -1 : 0,
+        buttonRef: element => {
+          buttonRefs.current[id] = element;
+        }
       }));
     });
     return array;
-  }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);
+  }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, shouldEnableKeyboardHighlighting, handleArrowNavigate, size]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButton, null, reactItems), [reactItems]);
 };
 FilterButtons.displayName = 'FilterButtons';

package/lib/esm/components/filter-buttons/FilterButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","AllButton","TextstringProvider","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","selectedIds","setSelectedIds","handleSelect","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","libraryName","isSelected","Array","isArray","forEach","icons","text","color","isDisabled","push","key","shape","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\nimport { AllButton } from './all-button/AllButton';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport type FilterButtonsProps = {\n /*\n The number that should be displayed as count in the \"all\" button.\n /\n allCount?: number;\n /\n The items that should be displayed.\n /\n items: IFilterButtonItem[];\n /\n A function that should be executed when an item is selected.\n /\n onSelect?: (keys: string[]) => void;\n /\n The keys of items that should be selected.\n /\n selectedItemIds?: string[];\n /\n If true, the count of all items will be shown in the \"all\" button.\n /\n shouldCalcCountForAll?: boolean;\n /\n The size auf the filter buttons. Use the FilterButtonSize enum.\n /\n size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n /\n This function set the selectedItemKey\n /\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /\n Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count \|\| 0), 0);\n }\n\n const array: ReactElement[] = [\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <AllButton\n count={allButtonCount}\n isSelected={\n selectedIds.includes('all') \|\|\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n size={size}\n onSelect={handleSelect}\n />\n </TextstringProvider>,\n ];\n\n items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n isDisabled={isDisabled}\n />,\n );\n });\n\n return array;\n }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","AllButton","TextstringProvider","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","shouldEnableKeyboardHighlighting","selectedIds","setSelectedIds","focusedId","setFocusedId","buttonRefs","keyboardNavigationItems","id","isDisabled","map","Boolean","handleSelect","newIds","includes","filter","filteredId","length","selectedId","currentFocusedItem","find","nextFocusable","handleArrowNavigate","currentId","direction","startIndex","findIndex","attempts","nextIndex","nextItem","current","focus","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","libraryName","isSelected","Array","isArray","onArrowNavigate","onFocus","tabIndex","buttonRef","element","all","forEach","icons","text","color","push","key","shape","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\nimport { AllButton } from './all-button/AllButton';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport type FilterButtonsProps = {\n /*\n The number that should be displayed as count in the \"all\" button.\n /\n allCount?: number;\n /\n The items that should be displayed.\n /\n items: IFilterButtonItem[];\n /\n A function that should be executed when an item is selected.\n /\n onSelect?: (keys: string[]) => void;\n /\n The keys of items that should be selected.\n /\n selectedItemIds?: string[];\n /\n If true, the count of all items will be shown in the \"all\" button.\n /\n shouldCalcCountForAll?: boolean;\n /\n The size auf the filter buttons. Use the FilterButtonSize enum.\n /\n size?: FilterButtonSize;\n /\n Enables keyboard-only focus highlighting for filter buttons.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n const [focusedId, setFocusedId] = useState<string>('all');\n const buttonRefs = useRef<Record<string, HTMLDivElement \| null>>({});\n\n const keyboardNavigationItems = useMemo(\n () => [\n { id: 'all', isDisabled: false },\n ...items.map(({ id, isDisabled }) => ({ id, isDisabled: Boolean(isDisabled) })),\n ],\n [items],\n );\n\n /\n This function set the selectedItemKey\n /\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /\n Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n useEffect(() => {\n const currentFocusedItem = keyboardNavigationItems.find(({ id }) => id === focusedId);\n\n if (currentFocusedItem && !currentFocusedItem.isDisabled) {\n return;\n }\n\n const nextFocusable = keyboardNavigationItems.find(({ isDisabled }) => !isDisabled);\n\n if (nextFocusable) {\n setFocusedId(nextFocusable.id);\n }\n }, [focusedId, keyboardNavigationItems]);\n\n const handleArrowNavigate = useCallback(\n (currentId: string, direction: -1 \| 1) => {\n if (!shouldEnableKeyboardHighlighting \|\| keyboardNavigationItems.length < 2) {\n return;\n }\n\n const startIndex = keyboardNavigationItems.findIndex(({ id }) => id === currentId);\n\n if (startIndex < 0) {\n return;\n }\n\n let attempts = 0;\n let nextIndex = startIndex;\n\n while (attempts < keyboardNavigationItems.length) {\n nextIndex =\n (nextIndex + direction + keyboardNavigationItems.length) %\n keyboardNavigationItems.length;\n\n const nextItem = keyboardNavigationItems[nextIndex];\n\n if (nextItem && !nextItem.isDisabled) {\n setFocusedId(nextItem.id);\n buttonRefs.current[nextItem.id]?.focus();\n return;\n }\n\n attempts += 1;\n }\n },\n [keyboardNavigationItems, shouldEnableKeyboardHighlighting],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count \|\| 0), 0);\n }\n\n const array: ReactElement[] = [\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <AllButton\n count={allButtonCount}\n isSelected={\n selectedIds.includes('all') \|\|\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n size={size}\n onSelect={handleSelect}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n onArrowNavigate={handleArrowNavigate}\n onFocus={setFocusedId}\n tabIndex={0}\n buttonRef={(element) => {\n buttonRefs.current.all = element;\n }}\n />\n </TextstringProvider>,\n ];\n\n items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n isDisabled={isDisabled}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n onArrowNavigate={handleArrowNavigate}\n onFocus={setFocusedId}\n tabIndex={isDisabled ? -1 : 0}\n buttonRef={(element) => {\n buttonRefs.current[id] = element;\n }}\n />,\n );\n });\n\n return array;\n }, [\n allCount,\n handleSelect,\n items,\n selectedIds,\n shouldCalcCountForAll,\n shouldEnableKeyboardHighlighting,\n handleArrowNavigate,\n size,\n ]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/filter-buttons/filter-button/FilterButton.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../../icon/Icon';
 import { StyledFilterButtonItem, StyledFilterButtonItemBorder, StyledFilterButtonItemLabel, StyledFilterButtonItemLabelCount, StyledFilterButtonItemLabelText, StyledMotionFilterButtonItemBackground } from './FilterButton.styles';
 const FilterButton = ({
@@ -11,8 +12,14 @@ const FilterButton = ({
   isSelected,
   id,
   isDisabled,
+  shouldEnableKeyboardHighlighting,
+  tabIndex,
+  onFocus,
+  onArrowNavigate,
+  buttonRef,
   onSelect
 }) => {
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const handleClick = useCallback(event => {
     if (isDisabled) {
       return;
@@ -21,11 +28,42 @@ const FilterButton = ({
     event.stopPropagation();
     onSelect(id);
   }, [id, isDisabled, onSelect]);
+  const handleKeyDown = useCallback(event => {
+    if (isDisabled) {
+      return;
+    }
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      onArrowNavigate?.(id, 1);
+      return;
+    }
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      onArrowNavigate?.(id, -1);
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onSelect(id);
+    }
+  }, [id, isDisabled, onArrowNavigate, onSelect]);
+  const handleFocus = useCallback(() => {
+    onFocus?.(id);
+  }, [id, onFocus]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButtonItem, {
+    ref: buttonRef,
+    $shape: shape,
     $isSelected: isSelected,
     $isDisabled: isDisabled,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $size: size,
-    onClick: handleClick
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    role: shouldEnableKeyboardHighlighting ? 'button' : undefined,
+    tabIndex: !isDisabled ? tabIndex ?? 0 : -1,
+    "aria-pressed": shouldEnableKeyboardHighlighting ? isSelected : undefined,
+    "aria-disabled": shouldEnableKeyboardHighlighting ? isDisabled : undefined
   }, /*#__PURE__*/React.createElement(StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/React.createElement(Icon, {
     icons: icons,
     size: 15
@@ -37,7 +75,7 @@ const FilterButton = ({
     $isSelected: isSelected,
     $shape: shape,
     $color: color
-  })), [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text]);
+  })), [color, buttonRef, count, handleClick, handleFocus, handleKeyDown, icons, isDisabled, isSelected, shape, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting, size, tabIndex, text]);
 };
 FilterButton.displayName = 'FilterButton';
 export default FilterButton;

package/lib/esm/components/filter-buttons/filter-button/FilterButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","icons","size","shape","text","color","count","isSelected","id","isDisabled","onSelect","handleClick","event","preventDefault","stopPropagation","createElement","$isSelected","$isDisabled","$size","onClick","~~toLocaleString~~","~~$shape~~","$color","displayName"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEvent, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n isDisabled?: boolean;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n isDisabled,\n onSelect,\n}) => {\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (isDisabled) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n onSelect(id);\n },\n [id, isDisabled, onSelect],\n );\n\n return useMemo(\n () => (\n <StyledFilterButtonItem\n $isSelected={isSelected}\n $isDisabled={isDisabled}\n $size={size}\n onClick={handleClick}\n >\n <StyledFilterButtonItemLabel>\n {icons && <Icon icons={icons} size={15} />}\n <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n {typeof count === 'number' && (\n <StyledFilterButtonItemLabelCount>\n {count.toLocaleString()}\n </StyledFilterButtonItemLabelCount>\n )}\n </StyledFilterButtonItemLabel>\n <StyledFilterButtonItemBorder\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n <StyledMotionFilterButtonItemBackground\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n </StyledFilterButtonItem>\n ),\n [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"AAAA,OAAOA,KAAK,~~IAAmCC~~,WAAW,~~EAAEC~~,OAAO,~~QAAQ~~,OAAO;~~AAElF~~,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SACIC,sBAAsB,EACtBC,4BAA4B,EAC5BC,2BAA2B,EAC3BC,gCAAgC,EAChCC,+BAA+B,EAC/BC,sCAAsC,QACnC,uBAAuB;~~AAe9B~~,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,EAAE;EACFC,UAAU;EACVC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,~~GAAGpB~~,WAAW,~~CAC1BqB~~,KAAiB,IAAK;IACnB,~~IAAIH~~,UAAU,EAAE;MACZ;IACJ;~~IAEAG~~,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;~~IAEvBJ~~,QAAQ,~~CAACF~~,EAAE,CAAC;EAChB,CAAC,EACD,CAACA,EAAE,EAAEC,UAAU,~~EAAEC~~,QAAQ,CAC7B,CAAC;EAED,~~OAAOlB~~,OAAO,CACV,mBACIF,KAAA,~~CAAAyB~~,aAAA,~~CAACrB~~,sBAAsB;~~IACnBsB~~,WAAW,~~EAAET~~,UAAW;~~IACxBU~~,WAAW,~~EAAER~~,UAAW;~~IACxBS~~,KAAK,~~EAAEhB~~,IAAK;~~IACZiB~~,OAAO,~~EAAER~~;~~EAAY~~,~~gBAErBrB~~,KAAA,~~CAAAyB~~,aAAA,~~CAACnB~~,2BAA2B,QACvBK,KAAK,~~iBAAIX~~,KAAA,~~CAAAyB~~,aAAA,~~CAACtB~~,IAAI;IAACQ,KAAK,EAAEA,KAAM;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,~~eAC1CZ~~,KAAA,~~CAAAyB~~,aAAA,~~CAACjB~~,+BAA+B,QAAEM,IAAsC,CAAC,EACxE,OAAOE,KAAK,KAAK,QAAQ,~~iBACtBhB~~,KAAA,~~CAAAyB~~,aAAA,~~CAAClB~~,gCAAgC,QAC5BS,KAAK,~~CAACc~~,cAAc,CAAC,CACQ,CAEb,CAAC,~~eAC9B9B~~,KAAA,~~CAAAyB~~,aAAA,~~CAACpB~~,4BAA4B;~~IACzBqB~~,WAAW,~~EAAET~~,UAAW;~~IACxBc~~,MAAM,~~EAAElB~~,KAAM;~~IACdmB~~,MAAM,~~EAAEjB~~;EAAM,CACjB,CAAC,~~eACFf~~,KAAA,~~CAAAyB~~,aAAA,~~CAAChB~~,sCAAsC;~~IACnCiB~~,WAAW,~~EAAET~~,UAAW;~~IACxBc~~,MAAM,~~EAAElB~~,KAAM;~~IACdmB~~,MAAM,~~EAAEjB~~;EAAM,CACjB,CACmB,CAC3B,EACD,~~CAACA~~,KAAK,~~EAAEC~~,KAAK,~~EAAEK~~,WAAW,~~EAAEV~~,KAAK,~~EAAEQ~~,UAAU,~~EAAEF~~,UAAU,~~EAAEJ~~,KAAK,~~EAAED~~,IAAI,~~EAAEE~~,IAAI,~~CAChF~~,CAAC;AACL,CAAC;AAEDJ,YAAY,~~CAACuB~~,WAAW,GAAG,cAAc;AAEzC,~~eAAevB~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","useKeyboardFocusHighlighting","Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","icons","size","shape","text","color","count","isSelected","id","isDisabled","shouldEnableKeyboardHighlighting","tabIndex","onFocus","onArrowNavigate","buttonRef","onSelect","shouldShowKeyboardHighlighting","handleClick","event","preventDefault","stopPropagation","handleKeyDown","key","handleFocus","createElement","ref","$shape","$isSelected","$isDisabled","$shouldShowKeyboardHighlighting","$size","onClick","onKeyDown","role","undefined","toLocaleString","$color","displayName"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEvent,\n useCallback,\n useMemo,\n} from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n isDisabled?: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n tabIndex?: number;\n onFocus?: (id: string) => void;\n onArrowNavigate?: (id: string, direction: -1 \| 1) => void;\n buttonRef?: (element: HTMLDivElement \| null) => void;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n isDisabled,\n shouldEnableKeyboardHighlighting,\n tabIndex,\n onFocus,\n onArrowNavigate,\n buttonRef,\n onSelect,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (isDisabled) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n onSelect(id);\n },\n [id, isDisabled, onSelect],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (isDisabled) {\n return;\n }\n\n if (event.key === 'ArrowRight' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n onArrowNavigate?.(id, 1);\n return;\n }\n\n if (event.key === 'ArrowLeft' \|\| event.key === 'ArrowUp') {\n event.preventDefault();\n onArrowNavigate?.(id, -1);\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onSelect(id);\n }\n },\n [id, isDisabled, onArrowNavigate, onSelect],\n );\n\n const handleFocus = useCallback(() => {\n onFocus?.(id);\n }, [id, onFocus]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem\n ref={buttonRef}\n $shape={shape}\n $isSelected={isSelected}\n $isDisabled={isDisabled}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $size={size}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n role={shouldEnableKeyboardHighlighting ? 'button' : undefined}\n tabIndex={!isDisabled ? (tabIndex ?? 0) : -1}\n aria-pressed={shouldEnableKeyboardHighlighting ? isSelected : undefined}\n aria-disabled={shouldEnableKeyboardHighlighting ? isDisabled : undefined}\n >\n <StyledFilterButtonItemLabel>\n {icons && <Icon icons={icons} size={15} />}\n <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n {typeof count === 'number' && (\n <StyledFilterButtonItemLabelCount>\n {count.toLocaleString()}\n </StyledFilterButtonItemLabelCount>\n )}\n </StyledFilterButtonItemLabel>\n <StyledFilterButtonItemBorder\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n <StyledMotionFilterButtonItemBackground\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n </StyledFilterButtonItem>\n ),\n [\n color,\n buttonRef,\n count,\n handleClick,\n handleFocus,\n handleKeyDown,\n icons,\n isDisabled,\n isSelected,\n shape,\n shouldEnableKeyboardHighlighting,\n shouldShowKeyboardHighlighting,\n size,\n tabIndex,\n text,\n ],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
+import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledFilterButtonItem = styled.div`
     position: relative;
     line-height: 1;
@@ -27,6 +28,16 @@ export const StyledFilterButtonItem = styled.div`
                 opacity: 0.2;
             `}
     }
+    ${({
+  $shouldShowKeyboardHighlighting,
+  $shape
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss};
+                border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;
+            }
+        `}
 `;
 export const StyledFilterButtonItemLabel = styled.div`
     display: flex;

package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","$isDisabled","$size","Normal","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$~~shape","Round","$~~color","headline","StyledMotionFilterButtonItemBackground"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n $size: FilterButtonSize;\n $isSelected: boolean;\n $isDisabled?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n line-height: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n &:hover > div:last-child {\n ${({ $isSelected, $isDisabled }) =>\n !$isSelected &&\n !$isDisabled &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;~~AAStF~~,OAAO,MAAMC,sBAAsB,~~GAAGJ~~,MAAM,~~CAACK~~,GAAgC;AAC7E;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA,eAAe,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,~~KAAKJ~~,gBAAgB,~~CAACK~~,MAAM,GAAG,UAAU,GAAG,SAAU;AAC1F;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,IAAI,GAAG,GAAI;AAC9D;AACA;AACA,UAAU,CAAC;EAAEG,WAAW;EAAEH;AAAY,CAAC,KAC3B,CAACG,WAAW,IACZ,CAACH,WAAW,~~IACZL~~,GAAG;AACf;AACA,aAAa;AACb;AACA,CAAC;AAED,OAAO,~~MAAMS~~,2BAA2B,~~GAAGV~~,MAAM,~~CAACK~~,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,~~MAAMM~~,+BAA+B,~~GAAGX~~,MAAM,~~CAACY~~,CAAuC;AAC7F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,~~GAAGf~~,MAAM,~~CAACY~~,CAAwC;AAC/F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAME,4BAA4B,~~GAAGhB~~,MAAM,~~CAACK~~,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;~~EAAEY~~;AAAO,CAAC,KAAMA,MAAM,~~KAAKf~~,qBAAqB,~~CAACgB~~,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF;AACA,MAAM,CAAC;~~EAAEC~~,MAAM;~~EAAEN~~,KAAK;~~EAAEJ~~;AAA+C,CAAC,KAChE,CAACA,WAAW,~~IACZR~~,GAAG;AACX;AACA;AACA,~~4BAA4BkB~~,MAAM,~~IAAIN~~,KAAK,~~CAACO~~,QAAQ;AACpD,SAAS;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,~~GAAGrB~~,MAAM,CACxDD,MAAM,~~CAACM~~,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEI;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,qBAAqB,CAAC;~~EAAEQ~~;AAAO,CAAC,KAAMA,MAAM,~~KAAKf~~,qBAAqB,~~CAACgB~~,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF,wBAAwB,CAAC;~~EAAEC~~,MAAM;~~EAAEN~~;AAA6C,CAAC,~~KACzEM~~,MAAM,~~IAAIN~~,KAAK,~~CAACO~~,QAAQ;AAChC,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","keyboardFocusHighlightingRingCss","StyledFilterButtonItem","div","$isDisabled","$size","Normal","$isSelected","$shouldShowKeyboardHighlighting","$shape","Round","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$color","headline","StyledMotionFilterButtonItemBackground"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n $size: FilterButtonSize;\n $shape: FilterButtonItemShape;\n $isSelected: boolean;\n $isDisabled?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n line-height: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n &:hover > div:last-child {\n ${({ $isSelected, $isDisabled }) =>\n !$isSelected &&\n !$isDisabled &&\n css`\n opacity: 0.2;\n `}\n }\n\n ${({ $shouldShowKeyboardHighlighting, $shape }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss};\n border-radius: ${$shape === FilterButtonItemShape.Round ? 100 : 3}px;\n }\n `}\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAEtF,SAASC,gCAAgC,QAAQ,iDAAiD;AAUlG,OAAO,MAAMC,sBAAsB,GAAGL,MAAM,CAACM,GAAgC;AAC7E;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA,eAAe,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAKL,gBAAgB,CAACM,MAAM,GAAG,UAAU,GAAG,SAAU;AAC1F;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,IAAI,GAAG,GAAI;AAC9D;AACA;AACA,UAAU,CAAC;EAAEG,WAAW;EAAEH;AAAY,CAAC,KAC3B,CAACG,WAAW,IACZ,CAACH,WAAW,IACZN,GAAG;AACf;AACA,aAAa;AACb;AACA;AACA,MAAM,CAAC;EAAEU,+BAA+B;EAAEC;AAAO,CAAC,KAC1CD,+BAA+B,IAC/BV,GAAG;AACX;AACA,kBAAkBG,gCAAgC;AAClD,iCAAiCQ,MAAM,KAAKV,qBAAqB,CAACW,KAAK,GAAG,GAAG,GAAG,CAAC;AACjF;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGd,MAAM,CAACM,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMS,+BAA+B,GAAGf,MAAM,CAACgB,CAAuC;AAC7F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGnB,MAAM,CAACgB,CAAwC;AAC/F,aAAa,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAME,4BAA4B,GAAGpB,MAAM,CAACM,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEM;AAAO,CAAC,KAAMA,MAAM,KAAKV,qBAAqB,CAACW,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF;AACA,MAAM,CAAC;EAAEQ,MAAM;EAAEJ,KAAK;EAAEP;AAA+C,CAAC,KAChE,CAACA,WAAW,IACZT,GAAG;AACX;AACA;AACA,4BAA4BoB,MAAM,IAAIJ,KAAK,CAACK,QAAQ;AACpD,SAAS;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAGvB,MAAM,CACxDD,MAAM,CAACO,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEI;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,qBAAqB,CAAC;EAAEE;AAAO,CAAC,KAAMA,MAAM,KAAKV,qBAAqB,CAACW,KAAK,GAAG,GAAG,GAAG,CAAE;AACvF,wBAAwB,CAAC;EAAEQ,MAAM;EAAEJ;AAA6C,CAAC,KACzEI,MAAM,IAAIJ,KAAK,CAACK,QAAQ;AAChC,CAAC","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.js CHANGED Viewed

@@ -1,15 +1,29 @@
 import React, { useCallback, useState } from 'react';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
 const GridImage = ({
   background,
   images,
   shouldShowRoundImage,
   size,
-  onClick
+  onClick,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
   const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);
   const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  const handleKeyDown = useCallback(event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick?.(event);
+    }
+  }, [isClickable, onClick]);
   const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);
   const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);
   const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
@@ -17,8 +31,12 @@ const GridImage = ({
   return /*#__PURE__*/React.createElement(StyledGridImage, {
     $background: background,
     $shouldShowRoundImage: shouldShowRoundImage,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $size: size,
-    onClick: typeof onClick === 'function' ? onClick : undefined
+    onClick: isClickable ? onClick : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isClickable ? 'button' : undefined
   }, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,

package/lib/esm/components/grid-image/GridImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.js","names":["React","useCallback","useState","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$background","$shouldShowRoundImage","$size","undefined","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n}) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={~~typeof~~ onClick ~~===~~ ~~'function'~~ ? ~~onClick~~ : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,~~IAA0CC~~,WAAW,~~EAAEC~~,QAAQ,~~QAAQ~~,OAAO;~~AAC1F~~,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;~~AAyB3B~~,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,~~GAAGZ~~,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,~~CAACa~~,sBAAsB,EAAEC,yBAAyB,CAAC,~~GAAGd~~,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,~~CAACe~~,yBAAyB,EAAEC,4BAA4B,CAAC,~~GAAGhB~~,QAAQ,CAAC,KAAK,CAAC;EAEjF,~~MAAMiB~~,qBAAqB,~~GAAGlB~~,WAAW,CAAC,~~MAAMa~~,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,~~MAAMM~~,yBAAyB,~~GAAGnB~~,WAAW,CAAC,~~MAAMe~~,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,~~MAAMK~~,4BAA4B,~~GAAGpB~~,WAAW,CAAC,~~MAAMiB~~,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,~~MAAMI~~,iBAAiB,GACnB,~~CAACT~~,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,~~oBACIjB~~,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,eAAe;~~IACZoB~~,WAAW,~~EAAEhB~~,UAAW;~~IACxBiB~~,qBAAqB,~~EAAEf~~,oBAAqB;~~IAC5CgB~~,KAAK,~~EAAEf~~,IAAK;IACZC,OAAO,~~EAAE~~,~~OAAOA~~,OAAO,~~KAAK~~,~~UAAU~~,~~GAAGA~~,~~OAAO~~,~~GAAGe~~;EAAU,~~gBAE7D3B~~,KAAA,~~CAAAuB~~,aAAA,~~CAAClB~~,mBAAmB;~~IAChBuB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAEV~~,qBAAsB;~~IAC9BO~~,KAAK,~~EAAEf~~,IAAK;~~IACZmB~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFT~~,KAAA,~~CAAAuB~~,aAAA,~~CAACjB~~,uBAAuB;~~IACpBsB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAET~~,yBAA0B;~~IAClCM~~,KAAK,~~EAAEf~~,IAAK;~~IACZmB~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,~~eACFT~~,KAAA,~~CAAAuB~~,aAAA,~~CAACpB~~,0BAA0B;~~IACvByB~~,SAAS,~~EAAEN~~,iBAAkB;~~IAC7BO~~,MAAM,~~EAAER~~,4BAA6B;~~IACrCS~~,GAAG,~~EAAErB~~,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,~~CAACwB~~,WAAW,GAAG,WAAW;AAEnC,~~eAAexB~~,SAAS","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.js","names":["React","useCallback","useState","useKeyboardFocusHighlighting","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$background","$shouldShowRoundImage","$shouldShowKeyboardHighlighting","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n SyntheticEvent,\n useCallback,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n /\n size: number;\n /\n Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.styles.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledGridImage = styled.div`
     background: ${({
   $background,
@@ -20,6 +21,14 @@ export const StyledGridImage = styled.div`
   $size
 }) => $size}px;
     flex: 0 0 auto;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledGridLeftImage = styled.img`
     border-right: ${({

package/lib/esm/components/grid-image/GridImage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,~~MAAM~~,mBAAmB;~~AAStC~~,OAAO,MAAMC,eAAe,~~GAAGD~~,MAAM,~~CAACE~~,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA,CAAC;AAOD,OAAO,~~MAAMC~~,mBAAmB,~~GAAGR~~,MAAM,~~CAACS~~,GAA6B;AACvE,oBAAoB,CAAC;~~EAAEF~~;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;~~EAAEG~~;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,uBAAuB,~~GAAGX~~,MAAM,~~CAACS~~,GAAiC;AAC/E,qBAAqB,CAAC;~~EAAEF~~;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;~~EAAEG~~;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAME,0BAA0B,~~GAAGZ~~,MAAM,~~CAACS~~,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","$shouldShowKeyboardHighlighting","StyledGridLeftImage","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAS/F,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BT,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMS,mBAAmB,GAAGX,MAAM,CAACY,GAA6B;AACvE,oBAAoB,CAAC;EAAEH;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,uBAAuB,GAAGd,MAAM,CAACY,GAAiC;AAC/E,qBAAqB,CAAC;EAAEH;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAME,0BAA0B,GAAGf,MAAM,CAACY,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}