@moda/om 21.6.0 → 21.6.2

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

@@ -2,9 +2,10 @@ import React from 'react';
 import { TextColor } from '../Text';
 import './Select.scss';
 export type SelectExtraOption = {
-    callback: () => void;
+    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.0",
+  "version": "21.6.2",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -76,11 +76,11 @@
     "@eslint/js": "^9.31.0",
     "@moda/rollup-plugin-postcss": "^4.0.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@storybook/addon-links": "^9.0.17",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
     "@storybook/addons": "^7.6.17",
     "@storybook/react": "^9.0.17",
     "@storybook/react-webpack5": "^9.0.17",

package/src/components/Select/Select.tsx

@@ -11,7 +11,12 @@ import { useSelect } from './useSelect';
 
 import './Select.scss';
 
-export type SelectExtraOption = { callback: () => void; disabled?: boolean; label: string };
+export type SelectExtraOption = {
+  callback: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  label: string;
+  closeOnClick?: boolean;
+};
 
 export type SelectableOption = {
   value: string;
@@ -177,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>