@moda/om 16.2.1 → 16.3.0

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": "16.3.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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}