@squiz/resource-browser-ui-lib - npm Package Compare versions

Comparing version 0.2.0-rc.0 to 0.3.0-rc.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [0.3.0-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-ui-lib@0.2.0-rc.0...@squiz/resource-browser-ui-lib@0.3.0-rc.0) (2024-05-07)
+
+### Features
+
+-   **prodam-132:** add optional searchbar to checkbox filter ([9fbcc5e](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/commit/9fbcc5e304280bddc443d0fcf8480cd7e7123e20))
+
 # [0.2.0-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-ui-lib@0.1.1-rc.0...@squiz/resource-browser-ui-lib@0.2.0-rc.0) (2024-05-06)
@@ -8,0 +14,0 @@

lib/CheckboxFilter/CheckboxFilter.js

@@ -29,7 +29,10 @@ "use strict";
 const sds_1 = require("@squiz/sds");
+const dxp_console_support_1 = require("@squiz/dxp-console-support");
+;
 const CheckboxFilter = (props) => {
-    const { filterOptions, id, name, setFilterOptions } = props;
+    const { emptyText, enableSearch, filterOptions, headingLevel, icon, id, listHeight, name, setFilterOptions } = props;
     const filterRef = (0, react_1.useRef)(null);
     // Cache value to reset filters when cleared
     const [cacheKey, setCacheKey] = (0, react_1.useState)('');
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
     const selectedCount = (0, react_1.useMemo)(() => {
@@ -39,2 +42,29 @@ const selectedOptions = filterOptions.filter((option) => option.checked);
     }, [filterOptions]);
+    const matchingOptions = (0, react_1.useMemo)(() => {
+        const optionsWithKeywords = filterOptions.map((option) => {
+            // Only filter by _keywords if option is unchecked
+            if (option.checked) {
+                return option;
+            }
+            return ({ ...option, _keywords: option.label });
+        });
+        return (0, dxp_console_support_1.filterByKeyword)(optionsWithKeywords, searchValue).map((item) => {
+            const { _keywords, ...option } = item;
+            return option;
+        });
+    }, [filterOptions, searchValue]);
+    const checkboxListCallback = (callbackOptions) => {
+        const optionMap = new Map();
+        for (const option of callbackOptions) {
+            optionMap.set(option.key, option);
+        }
+        const updatedOptions = structuredClone(filterOptions).map((item) => {
+            if (optionMap.has(item.key)) {
+                const updatedItem = optionMap.get(item.key);
+                return { ...item, checked: updatedItem.checked };
+            }
+            return item;
+        });
+        setFilterOptions(updatedOptions);
+    };
     const clearFilter = () => {
@@ -47,10 +77,24 @@ const uncheckedOptions = structuredClone(filterOptions).map((item) => {
     };
+    // Re-render CheckboxList any time the search value changes,
+    // so that the 'checked' states do not get out of sync.
+    (0, react_1.useEffect)(() => {
+        setCacheKey(new Date().toISOString());
+    }, [searchValue]);
+    const getCheckboxList = () => {
+        if (!matchingOptions.length) {
+            return (react_1.default.createElement(sds_1.SdsText, { classes: "checkbox-filter__empty", fontSize: sds_1.SdsTextSize.Medium, fontWeight: sds_1.SdsTextWeight.Semibold, text: emptyText ?? `No matching items.` }));
+        }
+        return (react_1.default.createElement(sds_1.CheckboxList, { "aria-label": name, checkboxListCallback: checkboxListCallback, fieldLabel: name, hideLabel: true, key: cacheKey, id: id, name: name, options: matchingOptions, ref: filterRef, role: "group" }));
+    };
     const filterHeadingText = selectedCount > 0 ? `${name} (${selectedCount})` : name;
+    const listStyles = listHeight ? { height: `${listHeight}px` } : {};
     return (react_1.default.createElement("div", { className: "checkbox-filter" },
         react_1.default.createElement("div", { className: "checkbox-filter__header" },
-            react_1.default.createElement(sds_1.SdsHeading, { level: 4, text: filterHeadingText }),
+            react_1.default.createElement(sds_1.SdsHeading, { classes: "checkbox-filter__heading", customTag: `h${headingLevel}`, level: 4, text: filterHeadingText }),
             react_1.default.createElement(sds_1.Link, { classes: "checkbox-filter__clear", customClick: clearFilter, hideIcon: true, text: "Clear", type: sds_1.LINK_TYPE_BUTTON })),
+        enableSearch && (react_1.default.createElement("div", { className: "checkbox-filter__search" },
+            react_1.default.createElement(sds_1.SearchFilter, { customIcon: icon, filterValue: searchValue, label: `Filter ${name.toLowerCase()}`, placeholder: `Filter ${name.toLowerCase()}`, setFilterValue: setSearchValue }))),
         react_1.default.createElement(sds_1.Divider, null),
-        react_1.default.createElement(sds_1.CheckboxList, { checkboxListCallback: setFilterOptions, classes: "checkbox-filter__options", fieldLabel: name, hideLabel: true, key: cacheKey, id: id, name: name, options: filterOptions, ref: filterRef })));
+        react_1.default.createElement("div", { className: "checkbox-filter__options", style: listStyles }, getCheckboxList())));
 };
 exports.CheckboxFilter = CheckboxFilter;

lib/CheckboxFilter/types.d.ts

@@ -1,7 +0,7 @@
-import { FormControlOption } from '@squiz/sds';
-export interface CheckboxFilterProps {
+import { FormControlOption, SdsHeadingProps } from '@squiz/sds';
+import { Filter } from '../FilterList/types';
+export interface CheckboxFilterProps extends Omit<Filter, 'type' | 'values'> {
     filterOptions: Array<FormControlOption>;
-    id: string;
-    name: string;
+    headingLevel: SdsHeadingProps['level'];
     setFilterOptions(updatedOptions: Array<FormControlOption>): void;
 }

package.json

 {
     "name": "@squiz/resource-browser-ui-lib",
-    "version": "0.2.0-rc.0",
+    "version": "0.3.0-rc.0",
     "main": "lib/index.js",
@@ -16,2 +16,3 @@ "types": "lib/index.d.ts",
     "dependencies": {
+        "@squiz/dxp-console-support": "^1.1.4",
         "@squiz/sds": "^1.0.0-alpha.44"
@@ -54,3 +55,3 @@ },
     },
-    "gitHead": "cdb24cd908b3af4b07c819f1b55449dda43b50be"
+    "gitHead": "3e8fc8e95a0f20cbccf41359a2cfda5007b6c535"
 }

src/CheckboxFilter/types.ts

@@ -1,8 +0,9 @@
-import { FormControlOption } from '@squiz/sds';
+import React from 'react';
+import { FormControlOption, SdsHeadingProps } from '@squiz/sds';
+import { Filter } from '../FilterList/types';
 
-export interface CheckboxFilterProps {
+export interface CheckboxFilterProps extends Omit<Filter, 'type' | 'values'> {
     filterOptions: Array<FormControlOption>;
-    id: string;
-    name: string;
+    headingLevel: SdsHeadingProps['level'];
     setFilterOptions(updatedOptions: Array<FormControlOption>): void;
 }

src/FilterList/types.ts

@@ -1,6 +0,8 @@
-import { FormControlOption } from '@squiz/sds';
+import React from 'react';
+import { FormControlOption, SdsHeadingProps } from '@squiz/sds';
 
 export interface FilterListProps {
     filters: Array<Filter>;
-    heading: string;
+    headingLevel: SdsHeadingProps['level'];
+    headingText: string;
     setFilters(updatedFilters: Array<Filter>): void;
@@ -10,3 +12,7 @@ }
 export interface Filter {
+    emptyText?: string;
+    enableSearch?: boolean;
+    icon?: React.JSX.Element;
     id: string;
+    listHeight?: number;
     name: string;
@@ -13,0 +19,0 @@ type: FilterType;

No alert changes

Improved metrics

Total package byte prevSize

56281

increased by27.83%

Number of package files

46

increased by4.55%

Lines of code

1140

increased by31.03%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@squiz/dxp-console-support@^1.1.4