@moda/om 21.6.1 → 21.6.2

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

@@ -5,6 +5,7 @@ export type SelectExtraOption = {
     callback: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     disabled?: boolean;
     label: string;
+    closeOnClick?: boolean;
 };
 export type SelectableOption = {
     value: string;

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

@@ -11,5 +11,6 @@ export type SelectOptionsProps = Omit<React.HTMLAttributes<HTMLUListElement>, 'o
     onSelect(option: SelectableOption): void;
     dataTestId?: string;
     extraOption?: SelectExtraOption;
+    onCloseDropdown?: () => void;
 };
 export declare const SelectOptions: React.FC<SelectOptionsProps>;

package/package.json

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

package/src/components/Select/Select.tsx

@@ -15,6 +15,7 @@ export type SelectExtraOption = {
   callback: (event?: React.MouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
   label: string;
+  closeOnClick?: boolean;
 };
 
 export type SelectableOption = {
@@ -181,6 +182,7 @@ export const Select: React.FC<SelectProps> = ({
             onFocus={handleFocus}
             selectedOption={selected}
             extraOption={extraOption}
+            onCloseDropdown={() => dispatch({ type: 'CLOSE' })}
           />
         )}
       </div>

package/src/components/Select/SelectOptions.tsx

@@ -23,6 +23,7 @@ export type SelectOptionsProps = Omit<
   onSelect(option: SelectableOption): void;
   dataTestId?: string;
   extraOption?: SelectExtraOption;
+  onCloseDropdown?: () => void;
 };
 
 export const SelectOptions: React.FC<SelectOptionsProps> = ({
@@ -36,6 +37,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
   className,
   dataTestId,
   extraOption,
+  onCloseDropdown,
   ...rest
 }) => {
   const [searchPhrase, setSearchPhrase] = useState('');
@@ -100,7 +102,12 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
           <ControlLink
             className='SelectOptions__extra-option'
             disabled={extraOption.disabled}
-            onClick={extraOption.callback}
+            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+              extraOption.callback(event);
+              if (extraOption.closeOnClick) {
+                onCloseDropdown?.();
+              }
+            }}
           >
             {extraOption.label}
           </ControlLink>