@mmb-digital/ds-lilly 0.10.6 → 0.10.7

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 (3) hide show
  1. package/dist/ds-lilly.js +42 -26
  2. package/dist/types/src/components/Components/Dropdown/Dropdown.d.ts +5 -2
  3. package/package.json +1 -1
package/dist/ds-lilly.js CHANGED
@@ -97840,7 +97840,7 @@ var Dropdown_assign = (undefined && undefined.__assign) || function () {
97840
97840
 
97841
97841
  var SCROLL_DEVIATION = 16;
97842
97842
  var Dropdown = function (_a) {
97843
- var children = _a.children, closeOnOutsideClick = _a.closeOnOutsideClick, closeOnTriggerHidden = _a.closeOnTriggerHidden, _b = _a.delayHide, delayHide = _b === void 0 ? 200 : _b, delayShow = _a.delayShow, dropdownId = _a.dropdownId, forceVisibility = _a.forceVisibility, _c = _a.hasSameWidthAsTrigger, hasSameWidthAsTrigger = _c === void 0 ? false : _c, interactive = _a.interactive, _d = _a.isOpenByDefault, isOpenByDefault = _d === void 0 ? false : _d, onOutsideClick = _a.onOutsideClick, onScrollToEnd = _a.onScrollToEnd, onVisibleChange = _a.onVisibleChange, _e = _a.placement, placement = _e === void 0 ? 'auto' : _e, testId = _a.testId, theme = _a.theme, _f = _a.trigger, trigger = _f === void 0 ? 'focus' : _f, triggerComponent = _a.triggerComponent;
97843
+ var children = _a.children, closeOnOutsideClick = _a.closeOnOutsideClick, closeOnTriggerHidden = _a.closeOnTriggerHidden, _b = _a.delayHide, delayHide = _b === void 0 ? 200 : _b, delayShow = _a.delayShow, dropdownId = _a.dropdownId, forceVisibility = _a.forceVisibility, _c = _a.hasSameWidthAsTrigger, hasSameWidthAsTrigger = _c === void 0 ? false : _c, interactive = _a.interactive, _d = _a.isOpenByDefault, isOpenByDefault = _d === void 0 ? false : _d, onBlur = _a.onBlur, onOutsideClick = _a.onOutsideClick, onScrollToEnd = _a.onScrollToEnd, onVisibleChange = _a.onVisibleChange, _e = _a.placement, placement = _e === void 0 ? 'auto' : _e, tabIndex = _a.tabIndex, testId = _a.testId, theme = _a.theme, _f = _a.trigger, trigger = _f === void 0 ? 'focus' : _f, triggerComponent = _a.triggerComponent;
97844
97844
  var tooltipRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])();
97845
97845
  var _g = usePopperTooltip({
97846
97846
  closeOnOutsideClick: closeOnOutsideClick,
@@ -97870,9 +97870,9 @@ var Dropdown = function (_a) {
97870
97870
  return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
97871
97871
  Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["cloneElement"])(triggerComponent, { ref: setTriggerRef }),
97872
97872
  visible && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
97873
- external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", Dropdown_assign({ ref: setRef, "data-testid": testId }, getTooltipProps({
97873
+ external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", Dropdown_assign({ ref: setRef, "aria-expanded": "true", "data-testid": testId }, getTooltipProps({
97874
97874
  className: classBinder_cx('c-dropdown', { 'c-dropdown--fullWidth': hasSameWidthAsTrigger }, theme)
97875
- }), { id: dropdownId, onScroll: handleScroll }), children),
97875
+ }), { id: dropdownId, tabIndex: tabIndex, onBlur: onBlur, onScroll: handleScroll }), children),
97876
97876
  onOutsideClick && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "c-dropdown__outside", onClick: onOutsideClick })))));
97877
97877
  };
97878
97878
 
@@ -100429,7 +100429,6 @@ var Autocomplete2 = function (_a) {
100429
100429
  var handleCreateNewOption = function () {
100430
100430
  setButtonValue({ label: fulltextValue, value: fulltextValue });
100431
100431
  onCreateNewItem && onCreateNewItem(fulltextValue);
100432
- setTypingMode(false);
100433
100432
  };
100434
100433
  var handleBlur = function (item) {
100435
100434
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -100437,10 +100436,14 @@ var Autocomplete2 = function (_a) {
100437
100436
  onBlur && onBlur((item === null || item === void 0 ? void 0 : item.value) || undefined);
100438
100437
  };
100439
100438
  var handleOptionKeyPress = function (event) {
100440
- var ctrlKey = event.ctrlKey, key = event.key, metaKey = event.metaKey, target = event.target;
100439
+ var ctrlKey = event.ctrlKey, key = event.key, metaKey = event.metaKey, shiftKey = event.shiftKey, target = event.target;
100441
100440
  switch (key) {
100442
100441
  case KEYS.Enter:
100443
100442
  case KEYS.Tab:
100443
+ if (shiftKey) {
100444
+ handleComboBoxClick();
100445
+ return;
100446
+ }
100444
100447
  if (target.id === name + "_list-createNew") {
100445
100448
  handleCreateNewOption();
100446
100449
  }
@@ -100516,7 +100519,7 @@ var Autocomplete2 = function (_a) {
100516
100519
  event.preventDefault();
100517
100520
  break;
100518
100521
  default:
100519
- if (!(ctrlKey || metaKey)) {
100522
+ if (!(ctrlKey || metaKey) && key !== KEYS.Shift) {
100520
100523
  setFulltextValue(function (prev) { return "" + prev + key; });
100521
100524
  }
100522
100525
  break;
@@ -100735,7 +100738,7 @@ var Autocomplete2 = function (_a) {
100735
100738
  'f-control2--large': displayDetails,
100736
100739
  'f-autocomplete__trigger--loading': isLoading,
100737
100740
  'u-hide': typingMode
100738
- }), disabled: isDisabled, id: name + "_button", name: name, type: "button", onClick: handleComboBoxClick, onFocus: handleFocus },
100741
+ }), disabled: isDisabled, id: name + "_button", name: name, tabIndex: isDropdownVisible ? -1 : 0, type: "button", onClick: handleComboBoxClick, onFocus: handleFocus },
100739
100742
  isLoading && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "loading" }),
100740
100743
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx("f-control2__" + (buttonValue ? 'value' : 'placeholder')) }, buttonValue ? external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(SelectedOption, Autocomplete2_assign({ displayDetails: displayDetails }, buttonValue)) : placeholder),
100741
100744
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" })),
@@ -100743,7 +100746,7 @@ var Autocomplete2 = function (_a) {
100743
100746
  ? isCategorised(items)
100744
100747
  ? name + "_option-" + focusedCategoryIndex + "-" + focusedItemIndex
100745
100748
  : name + "_option-" + focusedItemIndex
100746
- : undefined, "aria-autocomplete": "list", "aria-controls": name + "_list", "aria-labelledby": name + "_label", autoComplete: "off", className: classBinder_cx('f-autocomplete__input'), disabled: isDisabled, id: name + "_input", name: name, placeholder: placeholder, type: "text", value: fulltextValue, onChange: handleFulltextChange, onKeyDown: handleFulltextKeyPress }),
100749
+ : undefined, "aria-autocomplete": "list", "aria-controls": name + "_list", "aria-labelledby": name + "_label", autoComplete: "off", className: classBinder_cx('f-autocomplete__input'), disabled: isDisabled, id: name + "_input", name: name, placeholder: placeholder, tabIndex: isDropdownVisible ? 0 : -1, type: "text", value: fulltextValue, onChange: handleFulltextChange, onKeyDown: handleFulltextKeyPress }),
100747
100750
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-invalid": !!error, className: classBinder_cx('f-autocomplete__button'), disabled: isDisabled, id: name + "_toggle_button", name: name, tabIndex: -1, type: "button", onClick: toggleDropdown },
100748
100751
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" })))), onScrollToEnd: handleScrollToEnd, onVisibleChange: handleDropdownVisibilityChange }, renderDropdownContent()))));
100749
100752
  };
@@ -109046,9 +109049,9 @@ var Select2 = function (_a) {
109046
109049
  var _a;
109047
109050
  var listElementId;
109048
109051
  if (currentItemPosition > -1) {
109049
- var _b = itemsIndex[currentItemPosition], category = _b.category, item = _b.item;
109050
- scrollToItem(item, category, true);
109051
- listElementId = isCategorised ? name + "_list-" + category : name + "_list";
109052
+ var _b = itemsIndex[currentItemPosition], category_1 = _b.category, item_1 = _b.item;
109053
+ scrollToItem(item_1, category_1, true);
109054
+ listElementId = isCategorised ? name + "_list-" + category_1 : name + "_list";
109052
109055
  }
109053
109056
  else {
109054
109057
  listElementId = isCategorised ? name + "_list-0" : name + "_list";
@@ -109116,8 +109119,13 @@ var Select2 = function (_a) {
109116
109119
  }
109117
109120
  };
109118
109121
  var handleOptionKeyPress = function (event) {
109119
- var key = event.key;
109122
+ var key = event.key, shiftKey = event.shiftKey;
109120
109123
  switch (key) {
109124
+ case KEYS.Tab:
109125
+ if (shiftKey) {
109126
+ handleComboBoxClick();
109127
+ }
109128
+ break;
109121
109129
  case KEYS.Enter:
109122
109130
  selectFocusedItem();
109123
109131
  handleComboBoxClick();
@@ -109125,18 +109133,18 @@ var Select2 = function (_a) {
109125
109133
  break;
109126
109134
  case KEYS.ArrowDown:
109127
109135
  {
109128
- var itemIndex = itemsIndex[currentItemPosition + 1];
109129
- if (itemIndex) {
109130
- handleFocusedItem(itemIndex.item, itemIndex.category);
109136
+ var itemIndex_1 = itemsIndex[currentItemPosition + 1];
109137
+ if (itemIndex_1) {
109138
+ handleFocusedItem(itemIndex_1.item, itemIndex_1.category);
109131
109139
  }
109132
109140
  event.preventDefault();
109133
109141
  }
109134
109142
  break;
109135
109143
  case KEYS.ArrowUp:
109136
109144
  {
109137
- var itemIndex = itemsIndex[currentItemPosition - 1];
109138
- if (itemIndex) {
109139
- handleFocusedItem(itemIndex.item, itemIndex.category);
109145
+ var itemIndex_2 = itemsIndex[currentItemPosition - 1];
109146
+ if (itemIndex_2) {
109147
+ handleFocusedItem(itemIndex_2.item, itemIndex_2.category);
109140
109148
  }
109141
109149
  event.preventDefault();
109142
109150
  }
@@ -109148,18 +109156,18 @@ var Select2 = function (_a) {
109148
109156
  break;
109149
109157
  case KEYS.Home:
109150
109158
  {
109151
- var itemIndex = itemsIndex[0];
109152
- if (itemIndex) {
109153
- handleFocusedItem(itemIndex.item, itemIndex.category);
109159
+ var itemIndex_3 = itemsIndex[0];
109160
+ if (itemIndex_3) {
109161
+ handleFocusedItem(itemIndex_3.item, itemIndex_3.category);
109154
109162
  }
109155
109163
  event.preventDefault();
109156
109164
  }
109157
109165
  break;
109158
109166
  case KEYS.End:
109159
109167
  {
109160
- var itemIndex = itemsIndex[itemsIndex.length - 1];
109161
- if (itemIndex) {
109162
- handleFocusedItem(itemIndex.item, itemIndex.category);
109168
+ var itemIndex_4 = itemsIndex[itemsIndex.length - 1];
109169
+ if (itemIndex_4) {
109170
+ handleFocusedItem(itemIndex_4.item, itemIndex_4.category);
109163
109171
  }
109164
109172
  event.preventDefault();
109165
109173
  }
@@ -109210,10 +109218,18 @@ var Select2 = function (_a) {
109210
109218
  name: name,
109211
109219
  warning: warning
109212
109220
  };
109221
+ var itemIndex = getItemIndexByValue(value);
109222
+ var category = itemIndex.category, item = itemIndex.item;
109223
+ var selectedItemLabel;
109224
+ if (item > -1) {
109225
+ selectedItemLabel = isCategorised
109226
+ ? items[category].items[item].label
109227
+ : items[item].label;
109228
+ }
109213
109229
  return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Select2_assign({ theme: classBinder_cx({ 'f-group2--open': isDropdownVisible }, theme) }, fromGroupProps),
109214
109230
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(contexts_Select2Context.Provider, { value: select2context },
109215
- external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Dropdown, { dropdownId: name + "_dropdown", forceVisibility: isDropdownVisible, hasSameWidthAsTrigger: hasFullWidthOptions, placement: "bottom-start", theme: dropdownTheme, trigger: null, triggerComponent: external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlWrap", "data-testid": testId, role: "combobox" },
109216
- external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-expanded": isDropdownVisible, "aria-haspopup": "listbox", "aria-invalid": !!error, "aria-labelledby": name + "_label " + name, className: classBinder_cx('f-control2 f-control2--select', { 'f-control2--large': displayDetails }), disabled: isDisabled, id: name + "_button", name: name, type: "button", onClick: handleComboBoxClick, onFocus: onFocus, onKeyDown: handleButtonKeyPress },
109231
+ external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Dropdown, { dropdownId: name + "_dropdown", forceVisibility: isDropdownVisible, hasSameWidthAsTrigger: hasFullWidthOptions, placement: "bottom-start", tabIndex: 0, theme: dropdownTheme, trigger: null, triggerComponent: external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlWrap", "data-testid": testId, role: "combobox" },
109232
+ external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-expanded": isDropdownVisible, "aria-haspopup": "listbox", "aria-invalid": !!error, "aria-label": selectedItemLabel, "aria-labelledby": name + "_label " + name, className: classBinder_cx('f-control2 f-control2--select', { 'f-control2--large': displayDetails }), disabled: isDisabled, id: name + "_button", name: name, type: "button", onClick: handleComboBoxClick, onFocus: onFocus, onKeyDown: handleButtonKeyPress },
109217
109233
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx("f-control2__" + (buttonValue ? 'value' : 'placeholder')) }, buttonValue ? buttonValue : placeholder),
109218
109234
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" }))), onVisibleChange: function (state) { return setIsDropdownVisible(state); } }, isCategorised ? external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2CategorisedOptions, null) : external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2Options, null)))));
109219
109235
  };
package/dist/types/src/components/Components/Dropdown/Dropdown.d.ts CHANGED
@@ -15,12 +15,14 @@ export interface DropdownPropsType extends ComponentPropsType {
15
15
  delayShow?: number;
16
16
  /** Dropdown menu element ID */
17
17
  dropdownId?: string;
18
+ forceVisibility?: boolean;
18
19
  /** Set to use same width as triggerComponent. */
19
20
  hasSameWidthAsTrigger?: boolean;
20
21
  /** If true, hovering the tooltip will keep it open. */
21
22
  interactive?: boolean;
22
23
  /** Flag default opened state. */
23
24
  isOpenByDefault?: boolean;
25
+ onBlur?: () => void;
24
26
  /** Optional handler for visibility. */
25
27
  onVisibleChange?: (state: boolean) => void;
26
28
  /** Optional handler for scroll to end of lists. */
@@ -29,11 +31,12 @@ export interface DropdownPropsType extends ComponentPropsType {
29
31
  onOutsideClick?: () => void;
30
32
  /** The preferred placement of the tooltip. */
31
33
  placement?: DropdownPlacement;
34
+ /** Component tab-index */
35
+ tabIndex?: number;
32
36
  /** Event(s) that trigger dropdown to open. */
33
37
  trigger?: TriggerType | TriggerType[] | null;
34
38
  /** Component that triggers dropdown menu. */
35
39
  triggerComponent: ReactElement;
36
- forceVisibility?: boolean;
37
40
  }
38
- export declare const Dropdown: ({ children, closeOnOutsideClick, closeOnTriggerHidden, delayHide, delayShow, dropdownId, forceVisibility, hasSameWidthAsTrigger, interactive, isOpenByDefault, onOutsideClick, onScrollToEnd, onVisibleChange, placement, testId, theme, trigger, triggerComponent }: DropdownPropsType) => JSX.Element;
41
+ export declare const Dropdown: ({ children, closeOnOutsideClick, closeOnTriggerHidden, delayHide, delayShow, dropdownId, forceVisibility, hasSameWidthAsTrigger, interactive, isOpenByDefault, onBlur, onOutsideClick, onScrollToEnd, onVisibleChange, placement, tabIndex, testId, theme, trigger, triggerComponent }: DropdownPropsType) => JSX.Element;
39
42
  //# sourceMappingURL=Dropdown.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mmb-digital/ds-lilly",
3
- "version": "0.10.6",
3
+ "version": "0.10.7",
4
4
  "description": "MMB LILLY design system",
5
5
  "license": "UNLICENSED",
6
6
  "sideEffects": false,