@useblu/ocean-react 1.53.0 → 1.54.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.54.0](https://github.com/ocean-ds/ocean-web/compare/v1.53.0...v1.54.0) (2024-03-25)
+
+### Features
+
+- add multi choice options on chips ([#1092](https://github.com/ocean-ds/ocean-web/issues/1092)) ([fc239e5](https://github.com/ocean-ds/ocean-web/commit/fc239e5e66b556c2c1580aab1735077e378e17c7))
+
 # [1.53.0](https://github.com/ocean-ds/ocean-web/compare/v1.52.2...v1.53.0) (2024-03-21)
 
 ### Features

package/Chips/Chips.d.ts

@@ -1,15 +1,20 @@
 import React from 'react';
+export declare type ChipValue = {
+    label: string;
+    value: string;
+};
 interface IChips {
     label: string;
-    counter?: string | number;
     icon?: React.ReactNode;
     disabled?: boolean;
-    options?: Array<{
-        label: string;
-        value: any;
-    }>;
+    multiChoice?: boolean;
+    options?: ChipValue[];
+    defaultValue?: ChipValue;
+    clearLabel?: string;
+    filterLabel?: string;
+    initialCounter?: number;
     onClick?: () => void;
-    onChange?: (value: any) => void;
+    onChange?: (value: ChipValue[] | ChipValue) => void;
 }
 declare const Chips: React.FunctionComponent<IChips>;
 export default Chips;

package/Chips/Chips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../src/Chips/Chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAgF1C,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../src/Chips/Chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,oBAAY,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzD,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CA+I1C,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/Chips/Options.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
+import { ChipValue } from './Chips';
 interface IOptions {
-    options: Array<{
-        label: string;
-        value: any;
-    }>;
-    onSelect: (label: string, value: any) => void;
+    options: Array<ChipValue>;
+    selectedOptions?: ChipValue[];
+    clearLabel: string;
+    filterLabel: string;
+    multiChoice: boolean;
+    onSelect: (label: string, value: string) => void;
+    filterOptions: () => void;
+    clearOptions: () => void;
 }
 declare const Options: React.FunctionComponent<IOptions>;
 export default Options;

package/Chips/Options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["../../src/Chips/Options.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,QAAQ;IAChB,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAc9C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["../../src/Chips/Options.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,UAAU,QAAQ;IAChB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CA4D9C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/index.es.js

@@ -46421,27 +46421,33 @@ var CardListItem = function (_a) {
 };
 
 var Options = function (_a) {
-    var options = _a.options, onSelect = _a.onSelect;
-    return (e.createElement("div", { className: "ods-chips__options" }, options.map(function (_a) {
-        var label = _a.label, value = _a.value;
-        return (e.createElement("button", { key: label, type: "button", value: value, onClick: function () { return onSelect(label, value); }, className: "ods-chips__options--option" }, label));
-    })));
+    var options = _a.options, _b = _a.selectedOptions, selectedOptions = _b === void 0 ? [] : _b, clearLabel = _a.clearLabel, filterLabel = _a.filterLabel, multiChoice = _a.multiChoice, onSelect = _a.onSelect, filterOptions = _a.filterOptions, clearOptions = _a.clearOptions;
+    var columns = multiChoice ? Math.ceil(10 / 5) : 1;
+    return (e.createElement("div", { className: "ods-chips__options", "data-testid": "ods-chips-option" },
+        e.createElement("div", { className: classNames('ods-chips__options--content', "ods-chips__options--content--columns-".concat(columns)) }, options.map(function (_a) {
+            var label = _a.label, value = _a.value;
+            return (e.createElement("button", { key: label, type: "button", value: value, onClick: function () { return onSelect(label, value); }, className: "ods-chips__options--option" },
+                multiChoice && (e.createElement(Checkbox, { checked: !!selectedOptions.find(function (option) { return option.value === value; }), readOnly: true })),
+                label));
+        })),
+        multiChoice && (e.createElement("div", { className: "ods-chips__options--footer" },
+            e.createElement("button", { type: "button", onClick: clearOptions, className: "ods-btn ods-btn--sm ods-btn--text" }, clearLabel),
+            e.createElement("button", { type: "button", onClick: filterOptions, className: "ods-btn ods-btn--sm ods-btn--primary" }, filterLabel)))));
 };
 
 var Chips = function (_a) {
-    var label = _a.label, counter = _a.counter, icon = _a.icon, disabled = _a.disabled, options = _a.options, onClick = _a.onClick, onChange = _a.onChange;
+    var label = _a.label, icon = _a.icon, disabled = _a.disabled, defaultValue = _a.defaultValue, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.multiChoice, multiChoice = _c === void 0 ? false : _c, _d = _a.clearLabel, clearLabel = _d === void 0 ? 'Limpar' : _d, _e = _a.filterLabel, filterLabel = _e === void 0 ? 'Filtrar' : _e, initialCounter = _a.initialCounter, onClick = _a.onClick, onChange = _a.onChange;
     var wrapperRef = useRef(null);
-    var _b = e.useState(false), selectionIsOpen = _b[0], setSelectionIsOpen = _b[1];
-    var _c = e.useState({
-        label: '',
-        value: null
-    }), selectedOption = _c[0], setSelectedOption = _c[1];
-    useEffect(function () {
-        function handleClickOutside(event) {
-            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-                setSelectionIsOpen(false);
-            }
+    var _f = e.useState(0), counter = _f[0], setCounter = _f[1];
+    var _g = e.useState(false), selectionIsOpen = _g[0], setSelectionIsOpen = _g[1];
+    var _h = e.useState(defaultValue || multiChoice ? [] : { label: '', value: '' }), selectedOptions = _h[0], setSelectedOptions = _h[1];
+    function handleClickOutside(event) {
+        var target = event.target;
+        if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+            setSelectionIsOpen(false);
         }
+    }
+    useEffect(function () {
         document.addEventListener('mousedown', handleClickOutside);
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
@@ -46456,23 +46462,63 @@ var Chips = function (_a) {
         }
     };
     var handleSelectOption = function (labelProp, value) {
-        setSelectedOption({ label: labelProp, value: value });
+        if (!multiChoice) {
+            setSelectedOptions({ label: labelProp, value: value });
+            setSelectionIsOpen(false);
+            if (onChange) {
+                onChange({ label: labelProp, value: value });
+            }
+            return;
+        }
+        if (Array.isArray(selectedOptions)) {
+            var copyOptions = __spreadArray$1([], selectedOptions, true);
+            if (selectedOptions.find(function (option) { return option.value === value; })) {
+                copyOptions = copyOptions.filter(function (option) { return option.value !== value; });
+            }
+            else {
+                copyOptions.push({ label: labelProp, value: value });
+            }
+            setCounter(copyOptions.length);
+            setSelectedOptions(copyOptions);
+            if (onChange) {
+                onChange(copyOptions);
+            }
+        }
+    };
+    var displayValue = function () {
+        if (!Array.isArray(selectedOptions)) {
+            return selectedOptions.value ? selectedOptions.label : label;
+        }
+        return label;
+    };
+    var clearOptions = function () {
+        setSelectedOptions([]);
+        setCounter(0);
+        setSelectionIsOpen(false);
+        if (onChange) {
+            onChange([]);
+        }
+    };
+    var filterOptions = function () {
         setSelectionIsOpen(false);
         if (onChange) {
-            onChange({ label: labelProp, value: value });
+            onChange(selectedOptions);
         }
     };
     return (e.createElement("div", { className: "ods-chips", ref: wrapperRef },
         e.createElement("button", { type: "button", onClick: handleClickChips, disabled: disabled, className: classNames('ods-chips__button', {
                 'ods-chips__button--disabled': disabled,
-                'ods-chips__button--active': selectionIsOpen || !!selectedOption.value
+                'ods-chips__button--active': selectionIsOpen ||
+                    (Array.isArray(selectedOptions)
+                        ? selectedOptions.length > 0
+                        : selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.value)
             }) },
             icon || undefined,
-            e.createElement("p", { className: "ods-chips__label" }, selectedOption.value ? selectedOption.label : label),
-            counter && (e.createElement(Badge, { color: "brand", className: "ods-chips__badge" }, counter)),
+            e.createElement("p", { className: "ods-chips__label" }, displayValue()),
+            (counter > 0 || initialCounter) && (e.createElement(Badge, { color: "brand", className: "ods-chips__badge" }, initialCounter !== null && initialCounter !== void 0 ? initialCounter : counter)),
             options && (options === null || options === void 0 ? void 0 : options.length) > 0 && !selectionIsOpen && e.createElement(J, null),
             options && (options === null || options === void 0 ? void 0 : options.length) > 0 && selectionIsOpen && e.createElement(re, null)),
-        selectionIsOpen && options && (e.createElement(Options, { options: options, onSelect: handleSelectOption }))));
+        selectionIsOpen && options && (e.createElement(Options, { options: options, onSelect: handleSelectOption, selectedOptions: Array.isArray(selectedOptions) ? selectedOptions : undefined, clearLabel: clearLabel, filterLabel: filterLabel, multiChoice: multiChoice, clearOptions: clearOptions, filterOptions: filterOptions }))));
 };
 Chips.displayName = 'Chips';