feat: add multi choice options on chips

packages/ocean-core/src/components/_chips.scss

@@ -72,20 +72,38 @@
   }
 
   &__options {
-    -ms-overflow-style: none;
-    align-items: flex-start;
     background: $color-interface-light-pure;
     border: 1px solid $color-interface-light-down;
-    border-radius: 10px;
+    border-radius: $border-radius-sm;
+    box-shadow: $shadow-level-2;
     display: flex;
     flex-direction: column;
-    max-height: 200px;
-    overflow-y: auto;
-    padding: $spacing-inset-xxs;
+    padding: $spacing-inset-xxs 0;
     position: absolute;
-    scrollbar-width: none;
     top: 38px;
-    width: 220px;
+
+    &--content {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      max-height: 200px;
+      -ms-overflow-style: none;
+      overflow-y: auto;
+      scrollbar-width: none;
+      width: 220px;
+    }
+
+    &--content--columns-2 {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      width: 296px;
+    }
+
+    &--content--columns-3 {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      width: 436px;
+    }
 
     &::-webkit-scrollbar {
       display: none;
@@ -99,6 +117,7 @@
       display: flex;
       font-size: $font-size-xxs;
       font-weight: $font-weight-regular;
+      gap: $spacing-inline-xxs;
       min-height: 40px;
       padding: $spacing-stack-xxs 12px;
       width: 100%;
@@ -109,5 +128,14 @@
       border-radius: $border-radius-sm;
       color: $color-brand-primary-pure;
     }
+
+    &--footer {
+      border-top: $border-width-hairline solid $color-interface-light-down;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: $spacing-stack-xs $spacing-stack-xs $spacing-stack-xs
+        $spacing-stack-xxs;
+    }
   }
 }

packages/ocean-react/src/Chips/Chips.tsx

@@ -4,41 +4,51 @@ import { ChevronDown, ChevronUp } from '@useblu/ocean-icons-react';
 import Badge from '../Badge';
 import Options from './Options';
 
+export 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;
 }
 
 const Chips: React.FunctionComponent<IChips> = ({
   label,
-  counter,
   icon,
   disabled,
-  options,
+  defaultValue,
+  options = [],
+  multiChoice = false,
+  clearLabel = 'Limpar',
+  filterLabel = 'Filtrar',
+  initialCounter,
   onClick,
   onChange,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const [counter, setCounter] = React.useState<number>(0);
   const [selectionIsOpen, setSelectionIsOpen] = React.useState(false);
-  const [selectedOption, setSelectedOption] = React.useState<{
-    label: string;
-    value: any;
-  }>({
-    label: '',
-    value: null,
-  });
+  const [selectedOptions, setSelectedOptions] = React.useState<
+    ChipValue[] | ChipValue
+  >(defaultValue || multiChoice ? [] : { label: '', value: '' });
 
-  useEffect(() => {
-    function handleClickOutside(event: any) {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setSelectionIsOpen(false);
-      }
+  function handleClickOutside(event: TouchEvent | MouseEvent) {
+    const target = event.target as Node;
+
+    if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+      setSelectionIsOpen(false);
     }
+  }
+
+  useEffect(() => {
     // Bind the event listener
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -56,12 +66,59 @@ const Chips: React.FunctionComponent<IChips> = ({
     }
   };
 
-  const handleSelectOption = (labelProp: string, value: any) => {
-    setSelectedOption({ label: labelProp, value });
+  const handleSelectOption = (labelProp: string, value: string) => {
+    if (!multiChoice) {
+      setSelectedOptions({ label: labelProp, value });
+      setSelectionIsOpen(false);
+
+      if (onChange) {
+        onChange({ label: labelProp, value });
+      }
+
+      return;
+    }
+
+    if (Array.isArray(selectedOptions)) {
+      let copyOptions = [...selectedOptions];
+
+      if (selectedOptions.find((option) => option.value === value)) {
+        copyOptions = copyOptions.filter((option) => option.value !== value);
+      } else {
+        copyOptions.push({ label: labelProp, value });
+      }
+
+      setCounter(copyOptions.length);
+      setSelectedOptions(copyOptions);
+
+      if (onChange) {
+        onChange(copyOptions);
+      }
+    }
+  };
+
+  const displayValue = (): string => {
+    if (!Array.isArray(selectedOptions)) {
+      return selectedOptions.value ? selectedOptions.label : label;
+    }
+
+    return label;
+  };
+
+  const clearOptions = () => {
+    setSelectedOptions([]);
+    setCounter(0);
+    setSelectionIsOpen(false);
+
+    if (onChange) {
+      onChange([]);
+    }
+  };
+
+  const filterOptions = () => {
     setSelectionIsOpen(false);
 
     if (onChange) {
-      onChange({ label: labelProp, value });
+      onChange(selectedOptions);
     }
   };
 
@@ -74,23 +131,35 @@ const Chips: React.FunctionComponent<IChips> = ({
         className={classNames('ods-chips__button', {
           'ods-chips__button--disabled': disabled,
           'ods-chips__button--active':
-            selectionIsOpen || !!selectedOption.value,
+            selectionIsOpen ||
+            (Array.isArray(selectedOptions)
+              ? selectedOptions.length > 0
+              : selectedOptions?.value),
         })}
       >
         {icon || undefined}
-        <p className="ods-chips__label">
-          {selectedOption.value ? selectedOption.label : label}
-        </p>
-        {counter && (
+        <p className="ods-chips__label">{displayValue()}</p>
+        {(counter > 0 || initialCounter) && (
           <Badge color="brand" className="ods-chips__badge">
-            {counter}
+            {initialCounter ?? counter}
           </Badge>
         )}
         {options && options?.length > 0 && !selectionIsOpen && <ChevronDown />}
         {options && options?.length > 0 && selectionIsOpen && <ChevronUp />}
       </button>
       {selectionIsOpen && options && (
-        <Options options={options} onSelect={handleSelectOption} />
+        <Options
+          options={options}
+          onSelect={handleSelectOption}
+          selectedOptions={
+            Array.isArray(selectedOptions) ? selectedOptions : undefined
+          }
+          clearLabel={clearLabel}
+          filterLabel={filterLabel}
+          multiChoice={multiChoice}
+          clearOptions={clearOptions}
+          filterOptions={filterOptions}
+        />
       )}
     </div>
   );

packages/ocean-react/src/Chips/Options.tsx

@@ -1,24 +1,80 @@
 import React from 'react';
+import classNames from 'classnames';
+
+import Checkbox from '../Checkbox';
+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;
 }
 
-const Options: React.FunctionComponent<IOptions> = ({ options, onSelect }) => (
-  <div className="ods-chips__options">
-    {options.map(({ label, value }) => (
-      <button
-        key={label}
-        type="button"
-        value={value}
-        onClick={() => onSelect(label, value)}
-        className="ods-chips__options--option"
+const Options: React.FunctionComponent<IOptions> = ({
+  options,
+  selectedOptions = [],
+  clearLabel,
+  filterLabel,
+  multiChoice,
+  onSelect,
+  filterOptions,
+  clearOptions,
+}) => {
+  const columns = multiChoice ? Math.ceil(10 / 5) : 1;
+
+  return (
+    <div className="ods-chips__options" data-testid="ods-chips-option">
+      <div
+        className={classNames(
+          'ods-chips__options--content',
+          `ods-chips__options--content--columns-${columns}`
+        )}
       >
-        {label}
-      </button>
-    ))}
-  </div>
-);
+        {options.map(({ label, value }) => (
+          <button
+            key={label}
+            type="button"
+            value={value}
+            onClick={() => onSelect(label, value)}
+            className="ods-chips__options--option"
+          >
+            {multiChoice && (
+              <Checkbox
+                checked={
+                  !!selectedOptions.find((option) => option.value === value)
+                }
+                readOnly
+              />
+            )}
+            {label}
+          </button>
+        ))}
+      </div>
+      {multiChoice && (
+        <div className="ods-chips__options--footer">
+          <button
+            type="button"
+            onClick={clearOptions}
+            className="ods-btn ods-btn--sm ods-btn--text"
+          >
+            {clearLabel}
+          </button>
+          <button
+            type="button"
+            onClick={filterOptions}
+            className="ods-btn ods-btn--sm ods-btn--primary"
+          >
+            {filterLabel}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default Options;