npm - @chayns-components/core - Versions diffs - 5.4.7 → 5.4.8-alpha.0 - Mend

@chayns-components/core 5.4.7 → 5.4.8-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 (462) hide show

package/lib/cjs/components/file-select/FileSelect.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileSelect.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFileSelect","exports","styled","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","css","headline","StyledFileSelectContainer","text","$isImageSelection","StyledFileSelectText","p","StyledMotionFileSelectList","motion"],"sources":["../../../../src/components/file-select/FileSelect.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileSelect = styled.div``;\n\ntype StyledFileSelectWrapperProps = WithTheme<{\n $isDisabled?: boolean;\n}>;\n\nexport const StyledFileSelectWrapper = styled.div<StyledFileSelectWrapperProps>`\n display: flex;\n\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileSelectContainerProps = WithTheme<{\n $isImageSelection?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n $shouldShowBorder &&\n css`\n border-top: 1px solid ${theme.headline};\n `}\n`;\n\nexport const StyledFileSelectContainer = styled.div<StyledFileSelectContainerProps>`\n border: ${({ theme }: StyledFileSelectContainerProps) => theme.text} 1px dashed;\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 15px;\n justify-content: center;\n width: 100%;\n\n ${({ $isImageSelection }) =>\n $isImageSelection &&\n css`\n border-left: none;\n `}\n`;\n\ntype StyledFileSelectTextProps = WithTheme<unknown>;\n\nexport const StyledFileSelectText = styled.p<StyledFileSelectTextProps>`\n color: ${({ theme }: StyledFileSelectTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileSelectList = styled(motion.div)``;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;~~AAAgD~~,SAAAE,~~wBAAAC~~,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAH~~,uBAAA,YAAAA,~~CAAAC~~,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAGzC~~,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAMrC,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAAiC;AAC/E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;~~AAQM~~,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACC,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjB,IAAAE,qBAAG;AACX,oCAAoCD,KAAK,CAACE,QAAQ;AAClD,SAAS;AACT,CAAC;AAEM,MAAMC,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACC,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAIM,~~MAAMK~~,oBAAoB,~~GAAAb~~,OAAA,~~CAAAa~~,oBAAA,~~GAAGZ~~,yBAAM,~~CAACa~~,CAA4B;AACvE,aAAa,CAAC;~~EAAEP~~;AAAiC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACjE,CAAC;AAEM,~~MAAMI~~,0BAA0B,~~GAAAf~~,OAAA,~~CAAAe~~,0BAAA,GAAG,~~IAAAd~~,yBAAM,~~EAACe~~,aAAM,~~CAACd~~,GAAG,CAAC,EAAE","ignoreList":[]}
1	+ {"version":3,"file":"FileSelect.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFileSelect","exports","styled","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","css","headline","StyledFileSelectContainer","text","$isImageSelection","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledFileSelectText","p","StyledMotionFileSelectList","motion"],"sources":["../../../../src/components/file-select/FileSelect.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileSelect = styled.div``;\n\ntype StyledFileSelectWrapperProps = WithTheme<{\n $isDisabled?: boolean;\n}>;\n\nexport const StyledFileSelectWrapper = styled.div<StyledFileSelectWrapperProps>`\n display: flex;\n\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileSelectContainerProps = WithTheme<{\n $isImageSelection?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n $shouldShowBorder &&\n css`\n border-top: 1px solid ${theme.headline};\n `}\n`;\n\nexport const StyledFileSelectContainer = styled.div<StyledFileSelectContainerProps>`\n border: ${({ theme }: StyledFileSelectContainerProps) => theme.text} 1px dashed;\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 15px;\n justify-content: center;\n width: 100%;\n\n ${({ $isImageSelection }) =>\n $isImageSelection &&\n css`\n border-left: none;\n `}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledFileSelectTextProps = WithTheme<unknown>;\n\nexport const StyledFileSelectText = styled.p<StyledFileSelectTextProps>`\n color: ${({ theme }: StyledFileSelectTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileSelectList = styled(motion.div)``;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,0BAAA,GAAAH,OAAA;AAAgG,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzF,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAMrC,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAAiC;AAC/E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AASM,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACC,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjB,IAAAE,qBAAG;AACX,oCAAoCD,KAAK,CAACE,QAAQ;AAClD,SAAS;AACT,CAAC;AAEM,MAAMC,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACC,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAL,qBAAG;AACX;AACA;AACA,kBAAkBM,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,oBAAoB,GAAAf,OAAA,CAAAe,oBAAA,GAAGd,yBAAM,CAACe,CAA4B;AACvE,aAAa,CAAC;EAAET;AAAiC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACjE,CAAC;AAEM,MAAMM,0BAA0B,GAAAjB,OAAA,CAAAiB,0BAAA,GAAG,IAAAhB,yBAAM,EAACiB,aAAM,CAAChB,GAAG,CAAC,EAAE","ignoreList":[]}

package/lib/cjs/components/filter/Filter.js CHANGED Viewed

@@ -14,8 +14,11 @@ var _filter = require("../../types/filter");
 var _SearchInput = _interopRequireDefault(require("../search-input/SearchInput"));
 var _ContextMenu = _interopRequireDefault(require("../context-menu/ContextMenu"));
 var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
+var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, react/jsx-props-no-spreading */
 //
 const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
@@ -28,7 +31,8 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   checkboxConfig,
   comboboxConfig,
   onActiveChange,
-  rightIcons
+  rightIcons,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
@@ -37,7 +41,10 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   const iconRef = (0, _react.useRef)(null);
   const filterRef = (0, _react.useRef)(null);
   const searchRef = (0, _react.useRef)(null);
+  const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
   const contextMenuRef = (0, _react.useRef)(null);
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlightingEffective);
   const type = (0, _react.useMemo)(() => {
     if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
       return _filter.FilterType.ONLY_FILTER;
@@ -74,6 +81,7 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   const handleHide = (0, _react.useCallback)(() => {
     setIsOpen(false);
     if (type === _filter.FilterType.ONLY_SORT && contextMenuRef.current) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       contextMenuRef.current.hide();
     }
     if (type === _filter.FilterType.ONLY_SEARCH) {
@@ -95,6 +103,7 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
       setShouldFocus(true);
     }
     if (type === _filter.FilterType.ONLY_SORT && contextMenuRef.current) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       contextMenuRef.current.hide();
     }
     if (type === _filter.FilterType.ONLY_SEARCH) {
@@ -112,15 +121,25 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
       handleShow();
     }
   }, [handleHide, handleShow, isOpen]);
+  const handleIconKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleIconClick();
+    }
+  }, [handleIconClick]);
   const iconElement = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterIcon, {
     onClick: handleIconClick,
+    onKeyDown: handleIconKeyDown,
     $isOpen: isOpen,
     ref: iconRef,
+    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
+    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : -1,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: icons,
     size: 18
-  })), [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect]);
+  })), [handleIconClick, handleIconKeyDown, icons, isOpen, shouldEnableKeyboardHighlightingEffective, shouldShowKeyboardHighlighting, shouldShowRoundedHoverEffect]);
   const sortItems = (0, _react.useMemo)(() => {
     if (!sortConfig) {
       return [];
@@ -147,12 +166,12 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
     if (!comboboxConfig) {
       return null;
     }
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      _react.default.createElement(_ComboBox.default, comboboxConfig)
-    );
-  }, [comboboxConfig]);
+    return /*#__PURE__*/_react.default.createElement(_ComboBox.default
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , _extends({}, comboboxConfig, {
+      shouldEnableKeyboardHighlighting: comboboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlightingEffective
+    }));
+  }, [comboboxConfig, shouldEnableKeyboardHighlightingEffective]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilter, {
     ref: filterRef
   }, /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHead, null, ! /*#__PURE__*/(0, _react.isValidElement)(headline) ? /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHeadline, {
@@ -163,8 +182,18 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
     icons: rIcons,
     onClick
   }) => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterIcon, {
+    key: rIcons.join('-'),
     onClick: onClick,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClick();
+      }
+    },
     $isOpen: false,
+    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
+    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : -1,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: rIcons,
@@ -177,15 +206,20 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: searchRef,
     isActive: isSearchActive,
     value: searchConfig.searchValue,
-    onChange: ev => searchConfig.onSearchChange(ev.target.value)
+    onChange: ev => searchConfig.onSearchChange(ev.target.value),
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
   })), type === _filter.FilterType.ONLY_SORT && sortConfig && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     ref: contextMenuRef,
-    items: sortItems
-  }, iconElement), type === _filter.FilterType.ONLY_CHECKBOX && checkboxConfig &&
-  /*#__PURE__*/
+    items: sortItems,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
+  }, iconElement), type === _filter.FilterType.ONLY_CHECKBOX && checkboxConfig && /*#__PURE__*/_react.default.createElement(_Checkbox.default
   // eslint-disable-next-line react/jsx-props-no-spreading
-  _react.default.createElement(_Checkbox.default, checkboxConfig), type === _filter.FilterType.ONLY_COMBOBOX && comboboxElement), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterContentWrapper, {
-    ref: contentRef
+  , _extends({}, checkboxConfig, {
+    shouldEnableKeyboardHighlighting: checkboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlightingEffective
+  })), type === _filter.FilterType.ONLY_COMBOBOX && comboboxElement), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterContentWrapper, {
+    ref: contentRef,
+    inert: !isOpen ? 'true' : undefined,
+    "aria-hidden": !isOpen
   }, /*#__PURE__*/_react.default.createElement(_ExpandableContent.default, {
     isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_FilterContent.default, {
@@ -194,8 +228,9 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
     filterButtonConfig: filterButtonConfig,
     sortConfig: sortConfig,
     checkboxConfig: checkboxConfig,
-    comboboxConfig: comboboxConfig
-  })))), [headline, isSearchActive, type, rightIcons, iconElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, filterButtonConfig, comboboxConfig, comboboxElement, shouldShowRoundedHoverEffect]);
+    comboboxConfig: comboboxConfig,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
+  })))), [headline, isSearchActive, type, rightIcons, iconElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, shouldEnableKeyboardHighlightingEffective, filterButtonConfig, comboboxConfig, comboboxElement, shouldShowKeyboardHighlighting, shouldShowRoundedHoverEffect]);
 });
 Filter.displayName = 'Filter';
 var _default = exports.default = Filter;

package/lib/cjs/components/filter/Filter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FilterContent","_ComboBox","_filter","_SearchInput","_ContextMenu","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","contentRef","useRef","iconRef","filterRef","searchRef","contextMenuRef","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","useEffect","handleHide","useCallback","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","iconElement","createElement","StyledFilterIcon","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","comboboxElement","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","StyledFilterIconWrapper","rIcons","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n forwardRef,\n isValidElement,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledFilter,\n StyledFilterContentWrapper,\n StyledFilterHead,\n StyledFilterHeadline,\n StyledFilterHeadlineElement,\n StyledFilterIcon,\n StyledFilterIconWrapper,\n StyledFilterSearch,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FilterContent';\nimport ComboBox from '../combobox/ComboBox';\nimport {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n FilterRef,\n FilterType,\n SearchConfig,\n SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n icons: string[];\n onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n headline: ReactNode;\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n comboboxConfig?: ComboboxConfig;\n onActiveChange?: (isActive: boolean) => void;\n shouldShowRoundedHoverEffect?: boolean;\n rightIcons?: FilterRightIcon[];\n shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n (\n {\n headline,\n searchConfig,\n sortConfig,\n shouldAutoFocus = false,\n shouldShowRoundedHoverEffect = false,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n onActiveChange,\n rightIcons,\n },\n ref,\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isSearchActive, setIsSearchActive] = useState(false);\n const [shouldFocus, setShouldFocus] = useState(false);\n\n const contentRef = useRef<HTMLDivElement \| null>(null);\n const iconRef = useRef<HTMLDivElement \| null>(null);\n const filterRef = useRef<HTMLDivElement \| null>(null);\n const searchRef = useRef<InputRef \| null>(null);\n\n const contextMenuRef = useRef<ContextMenuRef>(null);\n\n const type = useMemo(() => {\n if (\n filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_FILTER;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SORT;\n }\n\n if (\n !filterButtonConfig &&\n searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SEARCH;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_CHECKBOX;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n comboboxConfig\n ) {\n return FilterType.ONLY_COMBOBOX;\n }\n\n return FilterType.MULTIPLE;\n }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n const icons = useMemo(() => {\n switch (type) {\n case FilterType.ONLY_FILTER:\n return ['fa fa-filter'];\n case FilterType.ONLY_SORT:\n return ['fa fa-arrow-up-arrow-down'];\n default:\n return ['fa fa-search'];\n }\n }, [type]);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isOpen);\n }\n }, [isOpen, onActiveChange]);\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(false);\n }\n }, [type]);\n\n useEffect(() => {\n if (shouldFocus) {\n searchRef.current?.focus();\n\n window.setTimeout(() => {\n setShouldFocus(false);\n }, 200);\n }\n }, [shouldFocus]);\n\n const handleShow = useCallback(() => {\n setIsOpen(true);\n\n if (shouldAutoFocus) {\n setShouldFocus(true);\n }\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(true);\n }\n }, [shouldAutoFocus, type]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n const handleIconClick = useCallback(() => {\n if (isOpen) {\n handleHide();\n } else {\n handleShow();\n }\n }, [handleHide, handleShow, isOpen]);\n\n const iconElement = useMemo(\n () => (\n <StyledFilterIcon\n onClick={handleIconClick}\n $isOpen={isOpen}\n ref={iconRef}\n $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n >\n <Icon icons={icons} size={18} />\n </StyledFilterIcon>\n ),\n [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n );\n\n const sortItems: ContextMenuItem[] = useMemo(() => {\n if (!sortConfig) {\n return [];\n }\n\n const { selectedItem, onSortChange } = sortConfig;\n\n return sortConfig.items.map(({ id, text }) => ({\n text,\n key: id.toString(),\n isSelected: id === selectedItem.id,\n icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n onClick: () => onSortChange({ text, id }),\n }));\n }, [sortConfig]);\n\n const comboboxElement = useMemo(() => {\n if (!comboboxConfig) {\n return null;\n }\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <ComboBox {...comboboxConfig} />\n );\n }, [comboboxConfig]);\n\n return useMemo(\n () => (\n <StyledFilter ref={filterRef}>\n <StyledFilterHead>\n {!isValidElement(headline) ? (\n <StyledFilterHeadline $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadline>\n ) : (\n <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadlineElement>\n )}\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterIconWrapper>\n {rightIcons &&\n rightIcons.map(({ icons: rIcons, onClick }) => (\n <StyledFilterIcon\n onClick={onClick}\n $isOpen={false}\n $shouldShowRoundedHoverEffect={\n shouldShowRoundedHoverEffect\n }\n >\n <Icon icons={rIcons} size={18} />\n </StyledFilterIcon>\n ))}\n {iconElement}\n </StyledFilterIconWrapper>\n )}\n {type === FilterType.ONLY_SEARCH && searchConfig && (\n <StyledFilterSearch>\n <SearchInput\n onActiveChange={(isActive) => {\n setIsSearchActive(isActive);\n setIsOpen(isActive);\n }}\n ref={searchRef}\n isActive={isSearchActive}\n value={searchConfig.searchValue}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n />\n </StyledFilterSearch>\n )}\n {type === FilterType.ONLY_SORT && sortConfig && (\n <ContextMenu ref={contextMenuRef} items={sortItems}>\n {iconElement}\n </ContextMenu>\n )}\n {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n {type === FilterType.ONLY_COMBOBOX && comboboxElement}\n </StyledFilterHead>\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterContentWrapper ref={contentRef}>\n <ExpandableContent isOpen={isOpen}>\n <FilterContent\n shouldAutoFocus={shouldFocus}\n searchConfig={searchConfig}\n filterButtonConfig={filterButtonConfig}\n sortConfig={sortConfig}\n checkboxConfig={checkboxConfig}\n comboboxConfig={comboboxConfig}\n />\n </ExpandableContent>\n </StyledFilterContentWrapper>\n )}\n </StyledFilter>\n ),\n [\n headline,\n isSearchActive,\n type,\n rightIcons,\n iconElement,\n searchConfig,\n sortConfig,\n sortItems,\n checkboxConfig,\n isOpen,\n shouldFocus,\n filterButtonConfig,\n comboboxConfig,\n comboboxElement,\n shouldShowRoundedHoverEffect,\n ],\n );\n },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FilterContent","_ComboBox","_filter","_SearchInput","_ContextMenu","_Checkbox","_useKeyboardFocusHighlighting","_ColorSchemeProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","shouldEnableKeyboardHighlighting","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","contentRef","useRef","iconRef","filterRef","searchRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","useEffect","handleHide","useCallback","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","handleIconKeyDown","event","key","preventDefault","iconElement","createElement","StyledFilterIcon","onClick","onKeyDown","$isOpen","role","undefined","tabIndex","$shouldShowKeyboardHighlighting","$shouldShowRoundedHoverEffect","size","sortItems","selectedItem","onSortChange","items","map","id","text","toString","isSelected","comboboxElement","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","StyledFilterIconWrapper","rIcons","join","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","inert","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, react/jsx-props-no-spreading */\nimport React, {\n forwardRef,\n isValidElement,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledFilter,\n StyledFilterContentWrapper,\n StyledFilterHead,\n StyledFilterHeadline,\n StyledFilterHeadlineElement,\n StyledFilterIcon,\n StyledFilterIconWrapper,\n StyledFilterSearch,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FilterContent';\nimport ComboBox from '../combobox/ComboBox';\nimport {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n FilterRef,\n FilterType,\n SearchConfig,\n SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport interface FilterRightIcon {\n icons: string[];\n onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n headline: ReactNode;\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n comboboxConfig?: ComboboxConfig;\n onActiveChange?: (isActive: boolean) => void;\n shouldShowRoundedHoverEffect?: boolean;\n rightIcons?: FilterRightIcon[];\n shouldAutoFocus?: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n (\n {\n headline,\n searchConfig,\n sortConfig,\n shouldAutoFocus = false,\n shouldShowRoundedHoverEffect = false,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n onActiveChange,\n rightIcons,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isSearchActive, setIsSearchActive] = useState(false);\n const [shouldFocus, setShouldFocus] = useState(false);\n\n const contentRef = useRef<HTMLDivElement \| null>(null);\n const iconRef = useRef<HTMLDivElement \| null>(null);\n const filterRef = useRef<HTMLDivElement \| null>(null);\n const searchRef = useRef<InputRef \| null>(null);\n\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ??\n colorScheme?.shouldEnableKeyboardHighlighting ??\n false;\n\n const contextMenuRef = useRef<ContextMenuRef>(null);\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective,\n );\n\n const type = useMemo(() => {\n if (\n filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_FILTER;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SORT;\n }\n\n if (\n !filterButtonConfig &&\n searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SEARCH;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_CHECKBOX;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n comboboxConfig\n ) {\n return FilterType.ONLY_COMBOBOX;\n }\n\n return FilterType.MULTIPLE;\n }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n const icons = useMemo(() => {\n switch (type) {\n case FilterType.ONLY_FILTER:\n return ['fa fa-filter'];\n case FilterType.ONLY_SORT:\n return ['fa fa-arrow-up-arrow-down'];\n default:\n return ['fa fa-search'];\n }\n }, [type]);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isOpen);\n }\n }, [isOpen, onActiveChange]);\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(false);\n }\n }, [type]);\n\n useEffect(() => {\n if (shouldFocus) {\n searchRef.current?.focus();\n\n window.setTimeout(() => {\n setShouldFocus(false);\n }, 200);\n }\n }, [shouldFocus]);\n\n const handleShow = useCallback(() => {\n setIsOpen(true);\n\n if (shouldAutoFocus) {\n setShouldFocus(true);\n }\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(true);\n }\n }, [shouldAutoFocus, type]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n const handleIconClick = useCallback(() => {\n if (isOpen) {\n handleHide();\n } else {\n handleShow();\n }\n }, [handleHide, handleShow, isOpen]);\n\n const handleIconKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleIconClick();\n }\n },\n [handleIconClick],\n );\n\n const iconElement = useMemo(\n () => (\n <StyledFilterIcon\n onClick={handleIconClick}\n onKeyDown={handleIconKeyDown}\n $isOpen={isOpen}\n ref={iconRef}\n role={shouldEnableKeyboardHighlightingEffective ? 'button' : undefined}\n tabIndex={shouldEnableKeyboardHighlightingEffective ? 0 : -1}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n >\n <Icon icons={icons} size={18} />\n </StyledFilterIcon>\n ),\n [\n handleIconClick,\n handleIconKeyDown,\n icons,\n isOpen,\n shouldEnableKeyboardHighlightingEffective,\n shouldShowKeyboardHighlighting,\n shouldShowRoundedHoverEffect,\n ],\n );\n\n const sortItems: ContextMenuItem[] = useMemo(() => {\n if (!sortConfig) {\n return [];\n }\n\n const { selectedItem, onSortChange } = sortConfig;\n\n return sortConfig.items.map(({ id, text }) => ({\n text,\n key: id.toString(),\n isSelected: id === selectedItem.id,\n icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n onClick: () => onSortChange({ text, id }),\n }));\n }, [sortConfig]);\n\n const comboboxElement = useMemo(() => {\n if (!comboboxConfig) {\n return null;\n }\n\n return (\n <ComboBox\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...comboboxConfig}\n shouldEnableKeyboardHighlighting={\n comboboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlightingEffective\n }\n />\n );\n }, [comboboxConfig, shouldEnableKeyboardHighlightingEffective]);\n\n return useMemo(\n () => (\n <StyledFilter ref={filterRef}>\n <StyledFilterHead>\n {!isValidElement(headline) ? (\n <StyledFilterHeadline $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadline>\n ) : (\n <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadlineElement>\n )}\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterIconWrapper>\n {rightIcons &&\n rightIcons.map(({ icons: rIcons, onClick }) => (\n <StyledFilterIcon\n key={rIcons.join('-')}\n onClick={onClick}\n onKeyDown={(event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick();\n }\n }}\n $isOpen={false}\n role={\n shouldEnableKeyboardHighlightingEffective\n ? 'button'\n : undefined\n }\n tabIndex={\n shouldEnableKeyboardHighlightingEffective ? 0 : -1\n }\n $shouldShowKeyboardHighlighting={\n shouldShowKeyboardHighlighting\n }\n $shouldShowRoundedHoverEffect={\n shouldShowRoundedHoverEffect\n }\n >\n <Icon icons={rIcons} size={18} />\n </StyledFilterIcon>\n ))}\n {iconElement}\n </StyledFilterIconWrapper>\n )}\n {type === FilterType.ONLY_SEARCH && searchConfig && (\n <StyledFilterSearch>\n <SearchInput\n onActiveChange={(isActive) => {\n setIsSearchActive(isActive);\n setIsOpen(isActive);\n }}\n ref={searchRef}\n isActive={isSearchActive}\n value={searchConfig.searchValue}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlightingEffective\n }\n />\n </StyledFilterSearch>\n )}\n {type === FilterType.ONLY_SORT && sortConfig && (\n <ContextMenu\n ref={contextMenuRef}\n items={sortItems}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlightingEffective\n }\n >\n {iconElement}\n </ContextMenu>\n )}\n {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n <Checkbox\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...checkboxConfig}\n shouldEnableKeyboardHighlighting={\n checkboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlightingEffective\n }\n />\n )}\n {type === FilterType.ONLY_COMBOBOX && comboboxElement}\n </StyledFilterHead>\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterContentWrapper\n ref={contentRef}\n inert={!isOpen ? 'true' : undefined}\n aria-hidden={!isOpen}\n >\n <ExpandableContent isOpen={isOpen}>\n <FilterContent\n shouldAutoFocus={shouldFocus}\n searchConfig={searchConfig}\n filterButtonConfig={filterButtonConfig}\n sortConfig={sortConfig}\n checkboxConfig={checkboxConfig}\n comboboxConfig={comboboxConfig}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlightingEffective\n }\n />\n </ExpandableContent>\n </StyledFilterContentWrapper>\n )}\n </StyledFilter>\n ),\n [\n headline,\n isSearchActive,\n type,\n rightIcons,\n iconElement,\n searchConfig,\n sortConfig,\n sortItems,\n checkboxConfig,\n isOpen,\n shouldFocus,\n shouldEnableKeyboardHighlightingEffective,\n filterButtonConfig,\n comboboxConfig,\n comboboxElement,\n shouldShowKeyboardHighlighting,\n shouldShowRoundedHoverEffect,\n ],\n );\n },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter/Filter.styles.js CHANGED Viewed

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionFilterBackground = exports.StyledFilterSearch = exports.StyledFilterIconWrapper = exports.StyledFilterIcon = exports.StyledFilterHeadlineElement = exports.StyledFilterHeadline = exports.StyledFilterHead = exports.StyledFilterContentWrapper = exports.StyledFilter = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = require("motion/react");
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledFilter = exports.StyledFilter = _styledComponents.default.div``;
 const StyledFilterHead = exports.StyledFilterHead = _styledComponents.default.div`
@@ -76,6 +77,14 @@ const StyledFilterIcon = exports.StyledFilterIcon = _styledComponents.default.di
   theme
 }) => theme['100']};
     }
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledMotionFilterBackground = exports.StyledMotionFilterBackground = (0, _styledComponents.default)(_react.motion.div)`
     width: 30px;

package/lib/cjs/components/filter/Filter.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Filter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilter","exports","styled","div","StyledFilterHead","StyledFilterHeadline","h1","$isSearchActive","StyledFilterHeadlineElement","StyledFilterIconWrapper","StyledFilterSearch","StyledFilterIcon","$shouldShowRoundedHoverEffect","$isOpen","css","theme","StyledMotionFilterBackground","motion","$top","$left","StyledFilterContentWrapper"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n\n position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ $isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n margin: 0;\n\n opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n transition: opacity 0.3s;\n`;\n\nexport const StyledFilterHeadlineElement = styled.div<StyledFilterHeadlineProps>`\n opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n transition: opacity 0.3s;\n`;\n\nexport const StyledFilterIconWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledFilterSearch = styled.div`\n position: absolute;\n width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n $isOpen: boolean;\n $shouldShowRoundedHoverEffect: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n cursor: pointer;\n\n aspect-ratio: 1;\n\n height: ${({ $shouldShowRoundedHoverEffect }) => ($shouldShowRoundedHoverEffect ? 42 : 30)}px;\n border-radius: ${({ $shouldShowRoundedHoverEffect }) =>\n $shouldShowRoundedHoverEffect ? 3 : 0}px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${({ $shouldShowRoundedHoverEffect, $isOpen }) =>\n $shouldShowRoundedHoverEffect &&\n $isOpen &&\n css`\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n `}\n\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: ${theme['100']};\n `}\n\n &:hover {\n background-color: ${({ theme }) => theme['100']};\n }\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n width: 30px;\n\n position: absolute;\n\n top: ${({ $top }) => $top}px;\n left: ${({ $left }) => $left}px;\n\n background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;~~AAAsC~~,SAAAD,~~wBAAAG~~,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAL~~,uBAAA,YAAAA,~~CAAAG~~,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAE/B~~,MAAMkB,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAEjC,MAAMC,gBAAgB,GAAAH,OAAA,CAAAG,gBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,oBAAoB,GAAAJ,OAAA,CAAAI,oBAAA,GAAGH,yBAAM,CAACI,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAA8B;AAChF,eAAe,CAAC;EAAEI;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAEM,MAAME,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACC,GAAG;AACjD;AACA;AACA,CAAC;AAEM,MAAMO,kBAAkB,GAAAT,OAAA,CAAAS,kBAAA,GAAGR,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA,CAAC;~~AAOM~~,MAAMQ,gBAAgB,GAAAV,OAAA,CAAAU,gBAAA,GAAGT,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAES;AAA8B,CAAC,KAAMA,6BAA6B,GAAG,EAAE,GAAG,EAAG;AAC9F,qBAAqB,CAAC;EAAEA;AAA8B,CAAC,KAC/CA,6BAA6B,GAAG,CAAC,GAAG,CAAC;AAC7C;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,6BAA6B;EAAEC;AAAQ,CAAC,KACzCD,6BAA6B,IAC7BC,OAAO,IACP,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAED,OAAO;EAAEE;AAAM,CAAC,KACjBF,OAAO,IACP,IAAAC,qBAAG;AACX,gCAAgCC,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA,CAAC;AAIM,MAAMC,4BAA4B,~~GAAAf~~,OAAA,~~CAAAe~~,4BAAA,GAAG,~~IAAAd~~,yBAAM,~~EAACe~~,aAAM,~~CAACd~~,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;~~EAAEe~~;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;~~EAAEJ~~;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAEM,~~MAAMK~~,0BAA0B,~~GAAAnB~~,OAAA,~~CAAAmB~~,0BAAA,~~GAAGlB~~,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}
1	+ {"version":3,"file":"Filter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilter","exports","styled","div","StyledFilterHead","StyledFilterHeadline","h1","$isSearchActive","StyledFilterHeadlineElement","StyledFilterIconWrapper","StyledFilterSearch","StyledFilterIcon","$shouldShowRoundedHoverEffect","$isOpen","css","theme","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledMotionFilterBackground","motion","$top","$left","StyledFilterContentWrapper"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n\n position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ $isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n margin: 0;\n\n opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n transition: opacity 0.3s;\n`;\n\nexport const StyledFilterHeadlineElement = styled.div<StyledFilterHeadlineProps>`\n opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n transition: opacity 0.3s;\n`;\n\nexport const StyledFilterIconWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledFilterSearch = styled.div`\n position: absolute;\n width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n $isOpen: boolean;\n $shouldShowRoundedHoverEffect: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n cursor: pointer;\n\n aspect-ratio: 1;\n\n height: ${({ $shouldShowRoundedHoverEffect }) => ($shouldShowRoundedHoverEffect ? 42 : 30)}px;\n border-radius: ${({ $shouldShowRoundedHoverEffect }) =>\n $shouldShowRoundedHoverEffect ? 3 : 0}px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${({ $shouldShowRoundedHoverEffect, $isOpen }) =>\n $shouldShowRoundedHoverEffect &&\n $isOpen &&\n css`\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n `}\n\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: ${theme['100']};\n `}\n\n &:hover {\n background-color: ${({ theme }) => theme['100']};\n }\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n width: 30px;\n\n position: absolute;\n\n top: ${({ $top }) => $top}px;\n left: ${({ $left }) => $left}px;\n\n background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AAAgG,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzF,MAAMkB,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAEjC,MAAMC,gBAAgB,GAAAH,OAAA,CAAAG,gBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,oBAAoB,GAAAJ,OAAA,CAAAI,oBAAA,GAAGH,yBAAM,CAACI,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAA8B;AAChF,eAAe,CAAC;EAAEI;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAEM,MAAME,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACC,GAAG;AACjD;AACA;AACA,CAAC;AAEM,MAAMO,kBAAkB,GAAAT,OAAA,CAAAS,kBAAA,GAAGR,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA,CAAC;AAQM,MAAMQ,gBAAgB,GAAAV,OAAA,CAAAU,gBAAA,GAAGT,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAES;AAA8B,CAAC,KAAMA,6BAA6B,GAAG,EAAE,GAAG,EAAG;AAC9F,qBAAqB,CAAC;EAAEA;AAA8B,CAAC,KAC/CA,6BAA6B,GAAG,CAAC,GAAG,CAAC;AAC7C;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,6BAA6B;EAAEC;AAAQ,CAAC,KACzCD,6BAA6B,IAC7BC,OAAO,IACP,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAED,OAAO;EAAEE;AAAM,CAAC,KACjBF,OAAO,IACP,IAAAC,qBAAG;AACX,gCAAgCC,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAF,qBAAG;AACX;AACA,kBAAkBG,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,4BAA4B,GAAAjB,OAAA,CAAAiB,4BAAA,GAAG,IAAAhB,yBAAM,EAACiB,aAAM,CAAChB,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEiB;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;EAAEN;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAEM,MAAMO,0BAA0B,GAAArB,OAAA,CAAAqB,0BAAA,GAAGpB,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}

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

@@ -16,13 +16,15 @@ var _textStrings = _interopRequireDefault(require("../../../constants/textString
 var _FilterContent2 = require("./FilterContent.utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 */
 const FilterContent = ({
   searchConfig,
   sortConfig,
   filterButtonConfig,
   checkboxConfig,
   comboboxConfig,
-  shouldAutoFocus
+  shouldAutoFocus,
+  shouldEnableKeyboardHighlighting
 }) => {
   const searchRef = (0, _react.useRef)(null);
   const ts = _textStrings.default.components.filter.filterContent;
@@ -60,7 +62,9 @@ const FilterContent = ({
     leftElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       icons: ['fa fa-search']
     })
-  }), filterButtonConfig && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, filterButtonConfig), sortConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
+  }), filterButtonConfig && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, _extends({}, filterButtonConfig, {
+    shouldEnableKeyboardHighlighting: filterButtonConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })), sortConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
     textstring: (0, _textstring.ttsToITextString)(ts.sort)
   })), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentControlWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, {
     lists: (0, _FilterContent2.getSortComboBoxLists)(sortConfig),
@@ -69,11 +73,16 @@ const FilterContent = ({
       text: sortConfig.selectedItem.text,
       value: sortConfig.selectedItem.id
     },
-    onSelect: handleSelectSortItem
-  }))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentControlWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, comboboxConfig))), checkboxConfig &&
+    onSelect: handleSelectSortItem,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentControlWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, _extends({}, comboboxConfig, {
+    shouldEnableKeyboardHighlighting: comboboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })))), checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  _react.default.createElement(_Checkbox.default, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, ts.input.placeholder, ts.sort]);
+  _react.default.createElement(_Checkbox.default, _extends({}, checkboxConfig, {
+    shouldEnableKeyboardHighlighting: checkboxConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+  })))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, shouldEnableKeyboardHighlighting, sortConfig, ts.input.placeholder, ts.sort]);
 };
 FilterContent.displayName = 'FilterContent';
 var _default = exports.default = FilterContent;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","_textstring","_textStrings","_FilterContent2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","searchRef","useRef","ts","textStrings","components","filter","filterContent","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","_searchRef$current","current","focus","useMemo","createElement","TextstringProvider","libraryName","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","Textstring","textstring","ttsToITextString","input","searchValue","shouldShowClearIcon","length","leftElement","icons","StyledFilterContentLabeledRow","StyledFilterContentLabel","sort","StyledFilterContentControlWrapper","lists","getSortComboBoxLists","selectedItem","onSelect","label","displayName","_default","exports"],"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","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","_textstring","_textStrings","_FilterContent2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","shouldEnableKeyboardHighlighting","searchRef","useRef","ts","textStrings","components","filter","filterContent","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","_searchRef$current","current","focus","useMemo","createElement","TextstringProvider","libraryName","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","Textstring","textstring","ttsToITextString","input","searchValue","shouldShowClearIcon","leftElement","icons","StyledFilterContentLabeledRow","StyledFilterContentLabel","sort","StyledFilterContentControlWrapper","lists","getSortComboBoxLists","selectedItem","onSelect","label","displayName","_default","exports"],"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":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,cAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,SAAA,GAAAH,sBAAA,CAAAH,OAAA;AACA,IAAAO,SAAA,GAAAJ,sBAAA,CAAAH,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,YAAA,GAAAN,sBAAA,CAAAH,OAAA;AAGA,IAAAU,eAAA,GAAAV,OAAA;AAA6D,SAAAG,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAhB,uBAAA,YAAAA,CAAAY,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,SAAAgB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAf,CAAA,aAAAN,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAG,CAAA,GAAAmB,SAAA,CAAAtB,CAAA,YAAAK,CAAA,IAAAF,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAZ,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAa,QAAA,CAAAK,KAAA,OAAAF,SAAA,KAjB7D;AAmBA,MAAMG,aAAqC,GAAGA,CAAC;EAC3CC,YAAY;EACZC,UAAU;EACVC,kBAAkB;EAClBC,cAAc;EACdC,cAAc;EACdC,eAAe;EACfC;AACJ,CAAC,KAAK;EACF,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAW,IAAI,CAAC;EAExC,MAAMC,EAAE,GAAGC,oBAAW,CAACC,UAAU,CAACC,MAAM,CAACC,aAAa;EAEtD,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EACnCC,IAA+B,IAAK;IACjC,IAAI,CAACA,IAAI,EAAE;MACP;IACJ;IAEA,MAAM;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAGF,IAAI;IAE5B,IAAIf,UAAU,EAAE;MACZA,UAAU,CAACkB,YAAY,CAAC;QAAEF,IAAI;QAAEG,EAAE,EAAEF;MAAM,CAAC,CAAC;IAChD;EACJ,CAAC,EACD,CAACjB,UAAU,CACf,CAAC;EAED,IAAAoB,gBAAS,EAAC,MAAM;IACZ,IAAIhB,eAAe,EAAE;MAAA,IAAAiB,kBAAA;MACjB,CAAAA,kBAAA,GAAAf,SAAS,CAACgB,OAAO,cAAAD,kBAAA,eAAjBA,kBAAA,CAAmBE,KAAK,CAAC,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACnB,eAAe,CAAC,CAAC;EAErB,OAAO,IAAAoB,cAAO,EACV,mBACIhE,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAACvD,WAAA,CAAAwD,kBAAkB;IAACC,WAAW,EAAC;EAAyB,gBACrDnE,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC9D,cAAA,CAAAiE,mBAAmB,QACf7B,YAAY,iBACTvC,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC7D,MAAA,CAAAW,OAAK;IACFsD,GAAG,EAAEvB,SAAU;IACfwB,QAAQ,EAAGC,EAAE,IAAKhC,YAAY,CAACiC,cAAc,CAACD,EAAE,CAACE,MAAM,CAAChB,KAAK,CAAE;IAC/DiB,WAAW,eACP1E,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAACvD,WAAA,CAAAiE,UAAU;MAACC,UAAU,EAAE,IAAAC,4BAAgB,EAAC7B,EAAE,CAAC8B,KAAK,CAACJ,WAAW;IAAE,CAAE,CACpE;IACDjB,KAAK,EAAElB,YAAY,CAACwC,WAAY;IAChCC,mBAAmB,EAAEzC,YAAY,CAACwC,WAAW,CAAC3C,MAAM,GAAG,CAAE;IACzD6C,WAAW,eAAEjF,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC3D,KAAA,CAAAS,OAAI;MAACmE,KAAK,EAAE,CAAC,cAAc;IAAE,CAAE;EAAE,CAClD,CACJ,EAEAzC,kBAAkB,iBACfzC,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC1D,cAAA,CAAAQ,OAAa,EAAAiB,QAAA,KACNS,kBAAkB;IACtBI,gCAAgC,EAC5BJ,kBAAkB,CAACI,gCAAgC,IACnDA;EACH,EACJ,CACJ,EACAL,UAAU,iBACPxC,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC9D,cAAA,CAAAgF,6BAA6B,qBAC1BnF,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC9D,cAAA,CAAAiF,wBAAwB,qBACrBpF,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAACvD,WAAA,CAAAiE,UAAU;IAACC,UAAU,EAAE,IAAAC,4BAAgB,EAAC7B,EAAE,CAACqC,IAAI;EAAE,CAAE,CAC9B,CAAC,eAC3BrF,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC9D,cAAA,CAAAmF,iCAAiC,qBAC9BtF,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAACzD,SAAA,CAAAO,OAAQ;IACLwE,KAAK,EAAE,IAAAC,oCAAoB,EAAChD,UAAU,CAAE;IACxCkC,WAAW,EAAC,EAAE;IACde,YAAY,EAAE;MACVjC,IAAI,EAAEhB,UAAU,CAACiD,YAAY,CAACjC,IAAI;MAClCC,KAAK,EAAEjB,UAAU,CAACiD,YAAY,CAAC9B;IACnC,CAAE;IACF+B,QAAQ,EAAErC,oBAAqB;IAC/BR,gCAAgC,EAC5BA;EACH,CACJ,CAC8B,CACR,CAClC,EACAF,cAAc,iBACX3C,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC9D,cAAA,CAAAgF,6BAA6B,qBAC1BnF,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC9D,cAAA,CAAAiF,wBAAwB,QACpBzC,cAAc,CAACgD,KACM,CAAC,eAC3B3F,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC9D,cAAA,CAAAmF,iCAAiC,qBAE9BtF,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAACzD,SAAA,CAAAO,OAAQ,EAAAiB,QAAA,KACDW,cAAc;IAClBE,gCAAgC,EAC5BF,cAAc,CAACE,gCAAgC,IAC/CA;EACH,EACJ,CAC8B,CACR,CAClC,EACAH,cAAc;EAAA;EACX;EACA1C,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAACxD,SAAA,CAAAM,OAAQ,EAAAiB,QAAA,KACDU,cAAc;IAClBG,gCAAgC,EAC5BH,cAAc,CAACG,gCAAgC,IAC/CA;EACH,EACJ,CAEY,CACL,CACvB,EACD,CACIH,cAAc,EACdC,cAAc,EACdF,kBAAkB,EAClBY,oBAAoB,EACpBd,YAAY,EACZM,gCAAgC,EAChCL,UAAU,EACVQ,EAAE,CAAC8B,KAAK,CAACJ,WAAW,EACpB1B,EAAE,CAACqC,IAAI,CAEf,CAAC;AACL,CAAC;AAED/C,aAAa,CAACsD,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/E,OAAA,GAE7BuB,aAAa","ignoreList":[]}

package/lib/cjs/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/cjs/components/filter-buttons/FilterButtons.js CHANGED Viewed

@@ -18,9 +18,22 @@ const FilterButtons = ({
   onSelect,
   items,
   shouldCalcCountForAll = false,
-  size = _filterButtons.FilterButtonSize.Normal
+  size = _filterButtons.FilterButtonSize.Normal,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [selectedIds, setSelectedIds] = (0, _react.useState)(['all']);
+  const [focusedId, setFocusedId] = (0, _react.useState)('all');
+  const buttonRefs = (0, _react.useRef)({});
+  const keyboardNavigationItems = (0, _react.useMemo)(() => [{
+    id: 'all',
+    isDisabled: false
+  }, ...items.map(({
+    id,
+    isDisabled
+  }) => ({
+    id,
+    isDisabled: Boolean(isDisabled)
+  }))], [items]);
   /**
    * This function set the selectedItemKey
@@ -49,6 +62,44 @@ const FilterButtons = ({
       onSelect(newIds.filter(selectedId => selectedId !== 'all'));
     }
   }, [onSelect, selectedIds]);
+  (0, _react.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 = (0, _react.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) {
+        var _buttonRefs$current$n;
+        setFocusedId(nextItem.id);
+        (_buttonRefs$current$n = buttonRefs.current[nextItem.id]) === null || _buttonRefs$current$n === void 0 || _buttonRefs$current$n.focus();
+        return;
+      }
+      attempts += 1;
+    }
+  }, [keyboardNavigationItems, shouldEnableKeyboardHighlighting]);
   const reactItems = (0, _react.useMemo)(() => {
     if (items.length === 0) {
       return null;
@@ -63,7 +114,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,
@@ -84,11 +142,18 @@ const FilterButtons = ({
         shape: _filterButtons.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 (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FilterButtons.StyledFilterButton, null, reactItems), [reactItems]);
 };
 FilterButtons.displayName = 'FilterButtons';