@moda/om 16.2.1 → 17.1.0

package/dist/src/components/Expandable/Expandable.d.ts

@@ -2,10 +2,12 @@ import React, { ReactNode } from 'react';
 import './Expandable.scss';
 export declare type ExpandableProps = React.HTMLAttributes<HTMLDivElement> & {
     name: string | ReactNode;
+    defaultExpanded?: boolean;
     expanded?: boolean;
     children: ReactNode;
     icon?: 'chevron' | 'plus-minus';
     virtual?: boolean;
     'data-testid'?: string;
+    onToggle?: () => void;
 };
 export declare const Expandable: React.FC<ExpandableProps>;

package/dist/src/components/Select/Select.d.ts

@@ -20,5 +20,6 @@ export declare type SelectProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'de
     searchable?: boolean;
     shiftIconLeftwards?: boolean;
     value?: string | undefined;
+    dataTestId?: string;
 };
 export declare const Select: React.FC<SelectProps>;

package/dist/src/components/Select/SelectOption.d.ts

@@ -6,5 +6,6 @@ export declare type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>
     selected: boolean;
     option: SelectableOption;
     onClick: (option: SelectableOption) => void;
+    dataTestId?: string;
 };
 export declare const SelectOption: React.FC<SelectOptionProps>;

package/dist/src/components/Select/SelectOptions.d.ts

@@ -9,5 +9,6 @@ export declare type SelectOptionsProps = Omit<React.HTMLAttributes<HTMLUListElem
     selectedOption?: SelectableOption | undefined;
     onFocus?(option: SelectableOption): void;
     onSelect(option: SelectableOption): void;
+    dataTestId?: string;
 };
 export declare const SelectOptions: React.FC<SelectOptionsProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "16.2.1",
+  "version": "17.1.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/Expandable/Expandable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, ReactNode } from 'react';
+import React, { useEffect, useCallback, useState, ReactNode } from 'react';
 import classNames from 'classnames';
 import ChevronDownIcon from '@moda/icons/chevron-down-12';
 import ChevronUpIcon from '@moda/icons/chevron-up-12';
@@ -7,11 +7,13 @@ import './Expandable.scss';
 
 export type ExpandableProps = React.HTMLAttributes<HTMLDivElement> & {
   name: string | ReactNode;
+  defaultExpanded?: boolean;
   expanded?: boolean;
   children: ReactNode;
   icon?: 'chevron' | 'plus-minus';
   virtual?: boolean;
   'data-testid'?: string;
+  onToggle?: () => void;
 };
 
 export const Expandable: React.FC<ExpandableProps> = ({
@@ -21,13 +23,22 @@ export const Expandable: React.FC<ExpandableProps> = ({
   virtual = false,
   icon = 'plus-minus',
   'data-testid': dataTestId,
+  defaultExpanded = false,
   // eslint-disable-next-line @typescript-eslint/naming-convention
-  expanded: __expanded__ = false,
+  expanded: __expanded__,
+  onToggle,
   ...rest
 }) => {
-  const [expanded, setExpanded] = useState(__expanded__);
+  const [expanded, setExpanded] = useState(defaultExpanded);
 
-  const handleClick = useCallback(() => setExpanded(expanded => !expanded), []);
+  useEffect(() => {
+    if (__expanded__ != null && __expanded__ !== expanded) setExpanded(__expanded__);
+  }, [expanded, __expanded__]);
+
+  const handleClick = useCallback(() => {
+    setExpanded(expanded => !expanded);
+    onToggle?.();
+  }, [onToggle]);
 
   return (
     <div

package/src/components/Select/Select.tsx

@@ -29,6 +29,7 @@ export type SelectProps = Omit<
   searchable?: boolean;
   shiftIconLeftwards?: boolean;
   value?: string | undefined;
+  dataTestId?: string;
 };
 
 export const Select: React.FC<SelectProps> = ({
@@ -48,6 +49,7 @@ export const Select: React.FC<SelectProps> = ({
   searchable,
   shiftIconLeftwards = false,
   value,
+  dataTestId,
   ...rest
 }) => {
   const { state, dispatch, Mode, selectRef } = useSelect({ value, defaultValue });
@@ -111,6 +113,7 @@ export const Select: React.FC<SelectProps> = ({
           className="Select__value"
           disabled={disabled}
           onClick={handleToggle}
+          data-test-id={dataTestId}
           aria-haspopup="listbox"
           aria-expanded={state.mode === Mode.Open}
           aria-labelledby={`Select__label--${idRef} Select__value--${idRef}`}
@@ -139,6 +142,7 @@ export const Select: React.FC<SelectProps> = ({
               'Select__options--up': dropDirection === 'up',
               'Select__options--down': dropDirection === 'down'
             })}
+            dataTestId={dataTestId}
             searchable={searchable}
             options={options}
             onSelect={handleSelect}

package/src/components/Select/SelectOption.tsx

@@ -9,6 +9,7 @@ export type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onCli
   selected: boolean;
   option: SelectableOption;
   onClick: (option: SelectableOption) => void;
+  dataTestId?: string;
 };
 
 export const SelectOption: React.FC<SelectOptionProps> = ({
@@ -16,7 +17,8 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   selected,
   option,
   onClick,
-  className
+  className,
+  dataTestId
 }) => {
   const ref = useRef<HTMLLIElement>(null);
 
@@ -43,6 +45,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
         'SelectOption--disabled': option.disabled
       })}
       onClick={handleClick}
+      data-test-id={dataTestId ? `${dataTestId}--${option.label.replace(' ', '-')}` : undefined}
       aria-label={option.label}
       aria-selected={selected}
       role="option"

package/src/components/Select/SelectOptions.tsx

@@ -19,6 +19,7 @@ export type SelectOptionsProps = Omit<
   selectedOption?: SelectableOption | undefined;
   onFocus?(option: SelectableOption): void;
   onSelect(option: SelectableOption): void;
+  dataTestId?: string;
 };
 
 export const SelectOptions: React.FC<SelectOptionsProps> = ({
@@ -30,6 +31,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
   onSelect,
   onFocus,
   className,
+  dataTestId,
   ...rest
 }) => {
   const [searchPhrase, setSearchPhrase] = useState('');
@@ -82,6 +84,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
             id={`SelectOption--${option.value}-${idRef}`}
             key={option.value}
             option={option}
+            dataTestId={dataTestId}
             active={activeOption?.value === option.value}
             selected={selectedOption?.value === option.value}
             onClick={onSelect}