@spaced-out/ui-design-system 0.1.58 → 0.1.60

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.60](https://github.com/spaced-out/ui-design-system/compare/v0.1.59...v0.1.60) (2023-10-16)
+
+
+### Bug Fixes
+
+* storybook upgrade ([#147](https://github.com/spaced-out/ui-design-system/issues/147)) ([38cb012](https://github.com/spaced-out/ui-design-system/commit/38cb012464a05ac26fb6bebe7299e06ebff4a65a))
+
+### [0.1.59](https://github.com/spaced-out/ui-design-system/compare/v0.1.58...v0.1.59) (2023-10-13)
+
+
+### Features
+
+* 🤘 expose event for Menu selection for all menu derivatives ([ff9704c](https://github.com/spaced-out/ui-design-system/commit/ff9704c3116d6743cc26fee20be43a89a6095b0a))
+
+
+### Bug Fixes
+
+* renamed story ([b2541ee](https://github.com/spaced-out/ui-design-system/commit/b2541ee368a69e357d28b9485135d09d86f2a54b))
+
 ### [0.1.58](https://github.com/spaced-out/ui-design-system/compare/v0.1.57...v0.1.58) (2023-10-09)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -125,8 +125,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         })
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      onSelect: option => {
-        onOptionSelect && onOptionSelect(option);
+      onSelect: (option, e) => {
+        onOptionSelect && onOptionSelect(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -58,7 +58,7 @@ export type ButtonDropdownProps = {
   menu?: MenuProps,
   positionStrategy?: Strategy,
   anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   tooltip?: BaseTooltipProps,
@@ -176,8 +176,8 @@ export const ButtonDropdown: React$AbstractComponent<
               >
                 <Menu
                   {...menu}
-                  onSelect={(option) => {
-                    onOptionSelect && onOptionSelect(option);
+                  onSelect={(option, e) => {
+                    onOptionSelect && onOptionSelect(option, e);
                     if (
                       !menu.optionsVariant ||
                       menu.optionsVariant === 'normal'

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -35,7 +35,8 @@ const SimpleButtonDropdownBase = (props, ref) => {
     setButtonDropdownSelectedKeys(selectedKeys);
     setBtnText(newBtnText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, buttonDropdownSelectedKeys);
@@ -46,7 +47,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
     setButtonDropdownSelectedKeys(newSelectedKeys);
     setBtnText(newBtnText);
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -40,7 +40,7 @@ export type SimpleButtonDropdownProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
 
@@ -80,7 +80,8 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     setBtnText(newBtnText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
 
     if (optionsVariant === 'checkbox') {
@@ -101,7 +102,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     setBtnText(newBtnText);
 
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Dropdown/Dropdown.js

@@ -83,8 +83,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         width: _size.sizeFluid
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      onSelect: option => {
-        onChange && onChange(option);
+      onSelect: (option, e) => {
+        onChange && onChange(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/Dropdown/Dropdown.js.flow

@@ -29,7 +29,7 @@ type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
 export type DropdownProps = {
   ...InputProps,
   classNames?: ClassNames,
-  onChange?: (option: MenuOption) => mixed,
+  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   dropdownInputText?: string,
@@ -105,8 +105,8 @@ export const Dropdown: React$AbstractComponent<
               >
                 <Menu
                   {...menu}
-                  onSelect={(option) => {
-                    onChange && onChange(option);
+                  onSelect={(option, e) => {
+                    onChange && onChange(option, e);
                     if (
                       !menu.optionsVariant ||
                       menu.optionsVariant === 'normal'

package/lib/components/Dropdown/SimpleDropdown.js

@@ -33,7 +33,8 @@ const SimpleDropdownBase = (props, ref) => {
     setDropdownSelectedKeys(selectedKeys);
     setDropdownInputText(newDropdownText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, dropdownSelectedKeys);
@@ -44,7 +45,7 @@ const SimpleDropdownBase = (props, ref) => {
     setDropdownSelectedKeys(newSelectedKeys);
     setDropdownInputText(newDropdownText);
     setTimeout(() => {
-      onChange?.(selectedOption);
+      onChange?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -35,7 +35,7 @@ export type SimpleDropdownProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onChange?: (option: MenuOption) => mixed,
+  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
 
@@ -73,7 +73,8 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     setDropdownInputText(newDropdownText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
 
     if (optionsVariant === 'checkbox') {
@@ -94,7 +95,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     setDropdownInputText(newDropdownText);
 
     setTimeout(() => {
-      onChange?.(selectedOption);
+      onChange?.(selectedOption, e);
     });
   };
 

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -88,8 +88,8 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         left: x ?? _space.spaceNone
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      onSelect: option => {
-        onOptionSelect && onOptionSelect(option);
+      onSelect: (option, e) => {
+        onOptionSelect && onOptionSelect(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -38,7 +38,7 @@ export type InlineDropdownProps = {
   classNames?: ClassNames,
   menu?: MenuProps,
   anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   size?: 'medium' | 'small' | 'extraSmall',
@@ -129,8 +129,8 @@ export const InlineDropdown: React$AbstractComponent<
               >
                 <Menu
                   {...menu}
-                  onSelect={(option) => {
-                    onOptionSelect && onOptionSelect(option);
+                  onSelect={(option, e) => {
+                    onOptionSelect && onOptionSelect(option, e);
                     if (
                       !menu.optionsVariant ||
                       menu.optionsVariant === 'normal'

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -35,7 +35,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
     setInlineDropdownSelectedKeys(selectedKeys);
     setBtnText(newBtnText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, inlineDropdownSelectedKeys);
@@ -46,7 +47,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     setInlineDropdownSelectedKeys(newSelectedKeys);
     setBtnText(newBtnText);
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow

@@ -37,7 +37,7 @@ export type SimpleInlineDropdownProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
 
@@ -77,7 +77,8 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     setBtnText(newBtnText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
 
     if (optionsVariant === 'checkbox') {
@@ -98,7 +99,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     setBtnText(newBtnText);
 
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Menu/Menu.js.flow

@@ -49,7 +49,7 @@ export type MenuOption = {
 // Render first available option set
 
 export type BaseMenuProps = {
-  onSelect?: (option: MenuOption) => mixed,
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   selectedOption?: ?MenuOption,
   optionsVariant?: MenuOptionsVariant,
   selectedKeys?: Array<string>,

package/lib/components/Menu/MenuOptionButton.js

@@ -80,7 +80,7 @@ const MenuOptionButton = props => {
       [_MenuModule.default.withIconRight]: !!iconRight
     }, classNames?.option, optionClassNames?.wrapper),
     disabled: menuDisabled || disabled,
-    onClick: () => onSelect && onSelect(option),
+    onClick: e => onSelect && onSelect(option, e),
     autoFocus: selectedOption?.key === key
   }, isLastItem ? {
     ref: lastMenuItemRef

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -98,7 +98,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
         optionClassNames?.wrapper,
       )}
       disabled={menuDisabled || disabled}
-      onClick={() => onSelect && onSelect(option)}
+      onClick={(e) => onSelect && onSelect(option, e)}
       autoFocus={selectedOption?.key === key}
       {...(isLastItem ? {ref: lastMenuItemRef} : {})}
     >

package/lib/components/OptionButton/OptionButton.js.flow

@@ -33,7 +33,7 @@ export type OptionButtonProps = {
   ...ButtonProps,
   menu?: MenuProps,
   anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -34,7 +34,8 @@ const SimpleOptionButtonBase = (props, ref) => {
   React.useEffect(() => {
     setOptionButtonSelectedKeys(selectedKeys);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [selectedOption.key];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, optionButtonSelectedKeys);
@@ -43,7 +44,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     }
     setOptionButtonSelectedKeys(newSelectedKeys);
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -42,7 +42,7 @@ export type SimpleOptionButtonProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
@@ -81,7 +81,8 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     setOptionButtonSelectedKeys(selectedKeys);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [selectedOption.key];
 
     if (optionsVariant === 'checkbox') {
@@ -96,7 +97,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     setOptionButtonSelectedKeys(newSelectedKeys);
 
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -69,8 +69,8 @@ const TabDropdown = _ref => {
         left: x ?? _space.spaceNone
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, props.menu, {
-      onSelect: option => {
-        onOptionSelect && onOptionSelect(option);
+      onSelect: (option, e) => {
+        onOptionSelect && onOptionSelect(option, e);
         clickAway();
       },
       size: props.menu.size || size,

package/lib/components/Tabs/TabList/TabDropdown.js.flow

@@ -35,7 +35,7 @@ export type TabDropdownProps = {
     tab: TabProps,
     menu: MenuProps,
   },
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   classNames?: ClassNames,
   selected?: boolean,
   disabled?: boolean,
@@ -91,8 +91,8 @@ export const TabDropdown = ({
             >
               <Menu
                 {...props.menu}
-                onSelect={(option) => {
-                  onOptionSelect && onOptionSelect(option);
+                onSelect={(option, e) => {
+                  onOptionSelect && onOptionSelect(option, e);
                   clickAway();
                 }}
                 size={props.menu.size || size}

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -33,13 +33,14 @@ const SimpleTypeaheadBase = (props, ref) => {
     setTypeaheadSelectedKeys(selectedKeys);
     setTypeaheadInputText(newTypeaheadText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     const newSelectedKeys = [selectedOption.key];
     const newTypeaheadText = (0, _menu.getTextLabelFromSelectedKeys)(newSelectedKeys, options);
     setTypeaheadSelectedKeys(newSelectedKeys);
     setTypeaheadInputText(newTypeaheadText);
     setTimeout(() => {
-      onSelect?.(selectedOption);
+      onSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -32,7 +32,7 @@ export type SimpleTypeaheadProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onSelect?: (option: MenuOption) => mixed,
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
@@ -75,7 +75,8 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     setTypeaheadInputText(newTypeaheadText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     const newSelectedKeys = [selectedOption.key];
 
     const newTypeaheadText = getTextLabelFromSelectedKeys(
@@ -87,7 +88,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     setTypeaheadInputText(newTypeaheadText);
 
     setTimeout(() => {
-      onSelect?.(selectedOption);
+      onSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Typeahead/Typeahead.js

@@ -112,8 +112,8 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: filteredOptions,
-      onSelect: option => {
-        onSelect && onSelect(option);
+      onSelect: (option, e) => {
+        onSelect && onSelect(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/Typeahead/Typeahead.js.flow

@@ -29,7 +29,7 @@ type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
 export type TypeaheadProps = {
   ...InputProps,
   classNames?: ClassNames,
-  onSelect?: (option: MenuOption) => mixed,
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
@@ -148,8 +148,8 @@ export const Typeahead: React$AbstractComponent<
                 <Menu
                   {...menu}
                   options={filteredOptions}
-                  onSelect={(option) => {
-                    onSelect && onSelect(option);
+                  onSelect={(option, e) => {
+                    onSelect && onSelect(option, e);
                     if (
                       !menu.optionsVariant ||
                         menu.optionsVariant === 'normal'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -59,16 +59,16 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^7.0.8",
-    "@storybook/addon-essentials": "^7.0.8",
-    "@storybook/addon-mdx-gfm": "^7.0.8",
-    "@storybook/addon-storysource": "^7.0.12",
-    "@storybook/addons": "^7.0.8",
-    "@storybook/react": "^7.0.8",
-    "@storybook/react-webpack5": "^7.0.8",
-    "@storybook/test-runner": "^0.10.0",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-mdx-gfm": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-react": "^2.0.0",
-    "@storybook/theming": "^7.0.8",
+    "@storybook/theming": "^7.4.6",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -86,7 +86,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^2.0.0",
     "flow-bin": "^0.184.0",
     "gulp": "^4.0.2",
@@ -105,7 +105,7 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^7.0.8",
+    "storybook": "^7.4.6",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"