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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/lib/components/ButtonDropdown/ButtonDropdown.js +2 -2
  3. package/lib/components/ButtonDropdown/ButtonDropdown.js.flow +3 -3
  4. package/lib/components/ButtonDropdown/SimpleButtonDropdown.js +3 -2
  5. package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow +4 -3
  6. package/lib/components/Dropdown/Dropdown.js +2 -2
  7. package/lib/components/Dropdown/Dropdown.js.flow +3 -3
  8. package/lib/components/Dropdown/SimpleDropdown.js +3 -2
  9. package/lib/components/Dropdown/SimpleDropdown.js.flow +4 -3
  10. package/lib/components/InlineDropdown/InlineDropdown.js +2 -2
  11. package/lib/components/InlineDropdown/InlineDropdown.js.flow +3 -3
  12. package/lib/components/InlineDropdown/SimpleInlineDropdown.js +3 -2
  13. package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow +4 -3
  14. package/lib/components/Menu/Menu.js.flow +1 -1
  15. package/lib/components/Menu/MenuOptionButton.js +1 -1
  16. package/lib/components/Menu/MenuOptionButton.js.flow +1 -1
  17. package/lib/components/OptionButton/OptionButton.js.flow +1 -1
  18. package/lib/components/OptionButton/SimpleOptionButton.js +3 -2
  19. package/lib/components/OptionButton/SimpleOptionButton.js.flow +4 -3
  20. package/lib/components/Tabs/TabList/TabDropdown.js +2 -2
  21. package/lib/components/Tabs/TabList/TabDropdown.js.flow +3 -3
  22. package/lib/components/Typeahead/SimpleTypeahead.js +3 -2
  23. package/lib/components/Typeahead/SimpleTypeahead.js.flow +4 -3
  24. package/lib/components/Typeahead/Typeahead.js +2 -2
  25. package/lib/components/Typeahead/Typeahead.js.flow +3 -3
  26. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  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.
4
4
 
5
+ ### [0.1.59](https://github.com/spaced-out/ui-design-system/compare/v0.1.58...v0.1.59) (2023-10-13)
6
+
7
+
8
+ ### Features
9
+
10
+ * 🤘 expose event for Menu selection for all menu derivatives ([ff9704c](https://github.com/spaced-out/ui-design-system/commit/ff9704c3116d6743cc26fee20be43a89a6095b0a))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * renamed story ([b2541ee](https://github.com/spaced-out/ui-design-system/commit/b2541ee368a69e357d28b9485135d09d86f2a54b))
16
+
5
17
  ### [0.1.58](https://github.com/spaced-out/ui-design-system/compare/v0.1.57...v0.1.58) (2023-10-09)
6
18
 
7
19
 
package/lib/components/ButtonDropdown/ButtonDropdown.js CHANGED
@@ -125,8 +125,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
125
125
  })
126
126
  }
127
127
  }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
128
- onSelect: option => {
129
- onOptionSelect && onOptionSelect(option);
128
+ onSelect: (option, e) => {
129
+ onOptionSelect && onOptionSelect(option, e);
130
130
  if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
131
131
  clickAway();
132
132
  }
package/lib/components/ButtonDropdown/ButtonDropdown.js.flow CHANGED
@@ -58,7 +58,7 @@ export type ButtonDropdownProps = {
58
58
  menu?: MenuProps,
59
59
  positionStrategy?: Strategy,
60
60
  anchorPosition?: AnchorType,
61
- onOptionSelect?: (option: MenuOption) => mixed,
61
+ onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
62
62
  onMenuOpen?: () => mixed,
63
63
  onMenuClose?: () => mixed,
64
64
  tooltip?: BaseTooltipProps,
@@ -176,8 +176,8 @@ export const ButtonDropdown: React$AbstractComponent<
176
176
  >
177
177
  <Menu
178
178
  {...menu}
179
- onSelect={(option) => {
180
- onOptionSelect && onOptionSelect(option);
179
+ onSelect={(option, e) => {
180
+ onOptionSelect && onOptionSelect(option, e);
181
181
  if (
182
182
  !menu.optionsVariant ||
183
183
  menu.optionsVariant === 'normal'
package/lib/components/ButtonDropdown/SimpleButtonDropdown.js CHANGED
@@ -35,7 +35,8 @@ const SimpleButtonDropdownBase = (props, ref) => {
35
35
  setButtonDropdownSelectedKeys(selectedKeys);
36
36
  setBtnText(newBtnText);
37
37
  }, [selectedKeys]);
38
- const handleOptionChange = selectedOption => {
38
+ const handleOptionChange = (selectedOption, e) => {
39
+ e?.stopPropagation();
39
40
  let newSelectedKeys = [];
40
41
  if (optionsVariant === 'checkbox') {
41
42
  newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, buttonDropdownSelectedKeys);
@@ -46,7 +47,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
46
47
  setButtonDropdownSelectedKeys(newSelectedKeys);
47
48
  setBtnText(newBtnText);
48
49
  setTimeout(() => {
49
- onOptionSelect?.(selectedOption);
50
+ onOptionSelect?.(selectedOption, e);
50
51
  });
51
52
  };
52
53
  React.useImperativeHandle(ref, () => ({
package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow CHANGED
@@ -40,7 +40,7 @@ export type SimpleButtonDropdownProps = {
40
40
  selectedKeys?: Array<string>,
41
41
 
42
42
  // events
43
- onOptionSelect?: (option: MenuOption) => mixed,
43
+ onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
44
44
  onMenuOpen?: () => mixed,
45
45
  onMenuClose?: () => mixed,
46
46
 
@@ -80,7 +80,8 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
80
80
  setBtnText(newBtnText);
81
81
  }, [selectedKeys]);
82
82
 
83
- const handleOptionChange = (selectedOption: MenuOption) => {
83
+ const handleOptionChange = (selectedOption: MenuOption, e) => {
84
+ e?.stopPropagation();
84
85
  let newSelectedKeys = [];
85
86
 
86
87
  if (optionsVariant === 'checkbox') {
@@ -101,7 +102,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
101
102
  setBtnText(newBtnText);
102
103
 
103
104
  setTimeout(() => {
104
- onOptionSelect?.(selectedOption);
105
+ onOptionSelect?.(selectedOption, e);
105
106
  });
106
107
  };
107
108
 
package/lib/components/Dropdown/Dropdown.js CHANGED
@@ -83,8 +83,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
83
83
  width: _size.sizeFluid
84
84
  }
85
85
  }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
86
- onSelect: option => {
87
- onChange && onChange(option);
86
+ onSelect: (option, e) => {
87
+ onChange && onChange(option, e);
88
88
  if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
89
89
  clickAway();
90
90
  }
package/lib/components/Dropdown/Dropdown.js.flow CHANGED
@@ -29,7 +29,7 @@ type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
29
29
  export type DropdownProps = {
30
30
  ...InputProps,
31
31
  classNames?: ClassNames,
32
- onChange?: (option: MenuOption) => mixed,
32
+ onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
33
33
  onMenuOpen?: () => mixed,
34
34
  onMenuClose?: () => mixed,
35
35
  dropdownInputText?: string,
@@ -105,8 +105,8 @@ export const Dropdown: React$AbstractComponent<
105
105
  >
106
106
  <Menu
107
107
  {...menu}
108
- onSelect={(option) => {
109
- onChange && onChange(option);
108
+ onSelect={(option, e) => {
109
+ onChange && onChange(option, e);
110
110
  if (
111
111
  !menu.optionsVariant ||
112
112
  menu.optionsVariant === 'normal'
package/lib/components/Dropdown/SimpleDropdown.js CHANGED
@@ -33,7 +33,8 @@ const SimpleDropdownBase = (props, ref) => {
33
33
  setDropdownSelectedKeys(selectedKeys);
34
34
  setDropdownInputText(newDropdownText);
35
35
  }, [selectedKeys]);
36
- const handleOptionChange = selectedOption => {
36
+ const handleOptionChange = (selectedOption, e) => {
37
+ e?.stopPropagation();
37
38
  let newSelectedKeys = [];
38
39
  if (optionsVariant === 'checkbox') {
39
40
  newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, dropdownSelectedKeys);
@@ -44,7 +45,7 @@ const SimpleDropdownBase = (props, ref) => {
44
45
  setDropdownSelectedKeys(newSelectedKeys);
45
46
  setDropdownInputText(newDropdownText);
46
47
  setTimeout(() => {
47
- onChange?.(selectedOption);
48
+ onChange?.(selectedOption, e);
48
49
  });
49
50
  };
50
51
  React.useImperativeHandle(ref, () => ({
package/lib/components/Dropdown/SimpleDropdown.js.flow CHANGED
@@ -35,7 +35,7 @@ export type SimpleDropdownProps = {
35
35
  selectedKeys?: Array<string>,
36
36
 
37
37
  // events
38
- onChange?: (option: MenuOption) => mixed,
38
+ onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
39
39
  onMenuOpen?: () => mixed,
40
40
  onMenuClose?: () => mixed,
41
41
 
@@ -73,7 +73,8 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
73
73
  setDropdownInputText(newDropdownText);
74
74
  }, [selectedKeys]);
75
75
 
76
- const handleOptionChange = (selectedOption: MenuOption) => {
76
+ const handleOptionChange = (selectedOption: MenuOption, e) => {
77
+ e?.stopPropagation();
77
78
  let newSelectedKeys = [];
78
79
 
79
80
  if (optionsVariant === 'checkbox') {
@@ -94,7 +95,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
94
95
  setDropdownInputText(newDropdownText);
95
96
 
96
97
  setTimeout(() => {
97
- onChange?.(selectedOption);
98
+ onChange?.(selectedOption, e);
98
99
  });
99
100
  };
100
101
 
package/lib/components/InlineDropdown/InlineDropdown.js CHANGED
@@ -88,8 +88,8 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
88
88
  left: x ?? _space.spaceNone
89
89
  }
90
90
  }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
91
- onSelect: option => {
92
- onOptionSelect && onOptionSelect(option);
91
+ onSelect: (option, e) => {
92
+ onOptionSelect && onOptionSelect(option, e);
93
93
  if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
94
94
  clickAway();
95
95
  }
package/lib/components/InlineDropdown/InlineDropdown.js.flow CHANGED
@@ -38,7 +38,7 @@ export type InlineDropdownProps = {
38
38
  classNames?: ClassNames,
39
39
  menu?: MenuProps,
40
40
  anchorPosition?: AnchorType,
41
- onOptionSelect?: (option: MenuOption) => mixed,
41
+ onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
42
42
  onMenuOpen?: () => mixed,
43
43
  onMenuClose?: () => mixed,
44
44
  size?: 'medium' | 'small' | 'extraSmall',
@@ -129,8 +129,8 @@ export const InlineDropdown: React$AbstractComponent<
129
129
  >
130
130
  <Menu
131
131
  {...menu}
132
- onSelect={(option) => {
133
- onOptionSelect && onOptionSelect(option);
132
+ onSelect={(option, e) => {
133
+ onOptionSelect && onOptionSelect(option, e);
134
134
  if (
135
135
  !menu.optionsVariant ||
136
136
  menu.optionsVariant === 'normal'
package/lib/components/InlineDropdown/SimpleInlineDropdown.js CHANGED
@@ -35,7 +35,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
35
35
  setInlineDropdownSelectedKeys(selectedKeys);
36
36
  setBtnText(newBtnText);
37
37
  }, [selectedKeys]);
38
- const handleOptionChange = selectedOption => {
38
+ const handleOptionChange = (selectedOption, e) => {
39
+ e?.stopPropagation();
39
40
  let newSelectedKeys = [];
40
41
  if (optionsVariant === 'checkbox') {
41
42
  newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, inlineDropdownSelectedKeys);
@@ -46,7 +47,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
46
47
  setInlineDropdownSelectedKeys(newSelectedKeys);
47
48
  setBtnText(newBtnText);
48
49
  setTimeout(() => {
49
- onOptionSelect?.(selectedOption);
50
+ onOptionSelect?.(selectedOption, e);
50
51
  });
51
52
  };
52
53
  React.useImperativeHandle(ref, () => ({
package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow CHANGED
@@ -37,7 +37,7 @@ export type SimpleInlineDropdownProps = {
37
37
  selectedKeys?: Array<string>,
38
38
 
39
39
  // events
40
- onOptionSelect?: (option: MenuOption) => mixed,
40
+ onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
41
41
  onMenuOpen?: () => mixed,
42
42
  onMenuClose?: () => mixed,
43
43
 
@@ -77,7 +77,8 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
77
77
  setBtnText(newBtnText);
78
78
  }, [selectedKeys]);
79
79
 
80
- const handleOptionChange = (selectedOption: MenuOption) => {
80
+ const handleOptionChange = (selectedOption: MenuOption, e) => {
81
+ e?.stopPropagation();
81
82
  let newSelectedKeys = [];
82
83
 
83
84
  if (optionsVariant === 'checkbox') {
@@ -98,7 +99,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
98
99
  setBtnText(newBtnText);
99
100
 
100
101
  setTimeout(() => {
101
- onOptionSelect?.(selectedOption);
102
+ onOptionSelect?.(selectedOption, e);
102
103
  });
103
104
  };
104
105
 
package/lib/components/Menu/Menu.js.flow CHANGED
@@ -49,7 +49,7 @@ export type MenuOption = {
49
49
  // Render first available option set
50
50
 
51
51
  export type BaseMenuProps = {
52
- onSelect?: (option: MenuOption) => mixed,
52
+ onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
53
53
  selectedOption?: ?MenuOption,
54
54
  optionsVariant?: MenuOptionsVariant,
55
55
  selectedKeys?: Array<string>,
package/lib/components/Menu/MenuOptionButton.js CHANGED
@@ -80,7 +80,7 @@ const MenuOptionButton = props => {
80
80
  [_MenuModule.default.withIconRight]: !!iconRight
81
81
  }, classNames?.option, optionClassNames?.wrapper),
82
82
  disabled: menuDisabled || disabled,
83
- onClick: () => onSelect && onSelect(option),
83
+ onClick: e => onSelect && onSelect(option, e),
84
84
  autoFocus: selectedOption?.key === key
85
85
  }, isLastItem ? {
86
86
  ref: lastMenuItemRef
package/lib/components/Menu/MenuOptionButton.js.flow CHANGED
@@ -98,7 +98,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
98
98
  optionClassNames?.wrapper,
99
99
  )}
100
100
  disabled={menuDisabled || disabled}
101
- onClick={() => onSelect && onSelect(option)}
101
+ onClick={(e) => onSelect && onSelect(option, e)}
102
102
  autoFocus={selectedOption?.key === key}
103
103
  {...(isLastItem ? {ref: lastMenuItemRef} : {})}
104
104
  >
package/lib/components/OptionButton/OptionButton.js.flow CHANGED
@@ -33,7 +33,7 @@ export type OptionButtonProps = {
33
33
  ...ButtonProps,
34
34
  menu?: MenuProps,
35
35
  anchorPosition?: AnchorType,
36
- onOptionSelect?: (option: MenuOption) => mixed,
36
+ onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
37
37
  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
38
38
  onMenuOpen?: () => mixed,
39
39
  onMenuClose?: () => mixed,
package/lib/components/OptionButton/SimpleOptionButton.js CHANGED
@@ -34,7 +34,8 @@ const SimpleOptionButtonBase = (props, ref) => {
34
34
  React.useEffect(() => {
35
35
  setOptionButtonSelectedKeys(selectedKeys);
36
36
  }, [selectedKeys]);
37
- const handleOptionChange = selectedOption => {
37
+ const handleOptionChange = (selectedOption, e) => {
38
+ e?.stopPropagation();
38
39
  let newSelectedKeys = [selectedOption.key];
39
40
  if (optionsVariant === 'checkbox') {
40
41
  newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, optionButtonSelectedKeys);
@@ -43,7 +44,7 @@ const SimpleOptionButtonBase = (props, ref) => {
43
44
  }
44
45
  setOptionButtonSelectedKeys(newSelectedKeys);
45
46
  setTimeout(() => {
46
- onOptionSelect?.(selectedOption);
47
+ onOptionSelect?.(selectedOption, e);
47
48
  });
48
49
  };
49
50
  React.useImperativeHandle(ref, () => ({
package/lib/components/OptionButton/SimpleOptionButton.js.flow CHANGED
@@ -42,7 +42,7 @@ export type SimpleOptionButtonProps = {
42
42
  selectedKeys?: Array<string>,
43
43
 
44
44
  // events
45
- onOptionSelect?: (option: MenuOption) => mixed,
45
+ onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
46
46
  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
47
47
  onMenuOpen?: () => mixed,
48
48
  onMenuClose?: () => mixed,
@@ -81,7 +81,8 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
81
81
  setOptionButtonSelectedKeys(selectedKeys);
82
82
  }, [selectedKeys]);
83
83
 
84
- const handleOptionChange = (selectedOption: MenuOption) => {
84
+ const handleOptionChange = (selectedOption: MenuOption, e) => {
85
+ e?.stopPropagation();
85
86
  let newSelectedKeys = [selectedOption.key];
86
87
 
87
88
  if (optionsVariant === 'checkbox') {
@@ -96,7 +97,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
96
97
  setOptionButtonSelectedKeys(newSelectedKeys);
97
98
 
98
99
  setTimeout(() => {
99
- onOptionSelect?.(selectedOption);
100
+ onOptionSelect?.(selectedOption, e);
100
101
  });
101
102
  };
102
103
 
package/lib/components/Tabs/TabList/TabDropdown.js CHANGED
@@ -69,8 +69,8 @@ const TabDropdown = _ref => {
69
69
  left: x ?? _space.spaceNone
70
70
  }
71
71
  }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, props.menu, {
72
- onSelect: option => {
73
- onOptionSelect && onOptionSelect(option);
72
+ onSelect: (option, e) => {
73
+ onOptionSelect && onOptionSelect(option, e);
74
74
  clickAway();
75
75
  },
76
76
  size: props.menu.size || size,
package/lib/components/Tabs/TabList/TabDropdown.js.flow CHANGED
@@ -35,7 +35,7 @@ export type TabDropdownProps = {
35
35
  tab: TabProps,
36
36
  menu: MenuProps,
37
37
  },
38
- onOptionSelect?: (option: MenuOption) => mixed,
38
+ onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
39
39
  classNames?: ClassNames,
40
40
  selected?: boolean,
41
41
  disabled?: boolean,
@@ -91,8 +91,8 @@ export const TabDropdown = ({
91
91
  >
92
92
  <Menu
93
93
  {...props.menu}
94
- onSelect={(option) => {
95
- onOptionSelect && onOptionSelect(option);
94
+ onSelect={(option, e) => {
95
+ onOptionSelect && onOptionSelect(option, e);
96
96
  clickAway();
97
97
  }}
98
98
  size={props.menu.size || size}
package/lib/components/Typeahead/SimpleTypeahead.js CHANGED
@@ -33,13 +33,14 @@ const SimpleTypeaheadBase = (props, ref) => {
33
33
  setTypeaheadSelectedKeys(selectedKeys);
34
34
  setTypeaheadInputText(newTypeaheadText);
35
35
  }, [selectedKeys]);
36
- const handleOptionChange = selectedOption => {
36
+ const handleOptionChange = (selectedOption, e) => {
37
+ e?.stopPropagation();
37
38
  const newSelectedKeys = [selectedOption.key];
38
39
  const newTypeaheadText = (0, _menu.getTextLabelFromSelectedKeys)(newSelectedKeys, options);
39
40
  setTypeaheadSelectedKeys(newSelectedKeys);
40
41
  setTypeaheadInputText(newTypeaheadText);
41
42
  setTimeout(() => {
42
- onSelect?.(selectedOption);
43
+ onSelect?.(selectedOption, e);
43
44
  });
44
45
  };
45
46
  React.useImperativeHandle(ref, () => ({
package/lib/components/Typeahead/SimpleTypeahead.js.flow CHANGED
@@ -32,7 +32,7 @@ export type SimpleTypeaheadProps = {
32
32
  selectedKeys?: Array<string>,
33
33
 
34
34
  // events
35
- onSelect?: (option: MenuOption) => mixed,
35
+ onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
36
36
  onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
37
37
  onMenuOpen?: () => mixed,
38
38
  onMenuClose?: () => mixed,
@@ -75,7 +75,8 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
75
75
  setTypeaheadInputText(newTypeaheadText);
76
76
  }, [selectedKeys]);
77
77
 
78
- const handleOptionChange = (selectedOption: MenuOption) => {
78
+ const handleOptionChange = (selectedOption: MenuOption, e) => {
79
+ e?.stopPropagation();
79
80
  const newSelectedKeys = [selectedOption.key];
80
81
 
81
82
  const newTypeaheadText = getTextLabelFromSelectedKeys(
@@ -87,7 +88,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
87
88
  setTypeaheadInputText(newTypeaheadText);
88
89
 
89
90
  setTimeout(() => {
90
- onSelect?.(selectedOption);
91
+ onSelect?.(selectedOption, e);
91
92
  });
92
93
  };
93
94
 
package/lib/components/Typeahead/Typeahead.js CHANGED
@@ -112,8 +112,8 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
112
112
  }
113
113
  }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
114
114
  options: filteredOptions,
115
- onSelect: option => {
116
- onSelect && onSelect(option);
115
+ onSelect: (option, e) => {
116
+ onSelect && onSelect(option, e);
117
117
  if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
118
118
  clickAway();
119
119
  }
package/lib/components/Typeahead/Typeahead.js.flow CHANGED
@@ -29,7 +29,7 @@ type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
29
29
  export type TypeaheadProps = {
30
30
  ...InputProps,
31
31
  classNames?: ClassNames,
32
- onSelect?: (option: MenuOption) => mixed,
32
+ onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
33
33
  onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
34
34
  onMenuOpen?: () => mixed,
35
35
  onMenuClose?: () => mixed,
@@ -148,8 +148,8 @@ export const Typeahead: React$AbstractComponent<
148
148
  <Menu
149
149
  {...menu}
150
150
  options={filteredOptions}
151
- onSelect={(option) => {
152
- onSelect && onSelect(option);
151
+ onSelect={(option, e) => {
152
+ onSelect && onSelect(option, e);
153
153
  if (
154
154
  !menu.optionsVariant ||
155
155
  menu.optionsVariant === 'normal'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.1.58",
3
+ "version": "0.1.59",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {