@mmb-digital/ds-lilly 0.10.5 → 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 +43 -28
  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
 
@@ -98309,10 +98309,9 @@ var ContentTableRow = Object(external_root_React_commonjs2_react_commonjs_react_
98309
98309
  subtitle)); }))),
98310
98310
  hasSubtitleTag && !isMobileDeviceView && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Tag, { iconBackground: subtitleTagIconBackgroundColor, iconName: subtitleTagIconName, imageUrl: subtitleTagIconImageUrl }, subtitleTagText))))),
98311
98311
  contentColumns.map(function (_a, i) {
98312
- var _b;
98313
98312
  var alignContent = _a.alignContent, hideOnExpand = _a.hideOnExpand, hideOnMobile = _a.hideOnMobile;
98314
98313
  return !(isMobileDeviceView && hideOnMobile) ? (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("td", { key: i, className: classBinder_cx('c-contentTableRow__column', getTextAlignClass(alignContent)) },
98315
- external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx({ 'c-contentTableRow__column--hidden': hideOnExpand && isOpened }) }, (_b = columns[i]) === null || _b === void 0 ? void 0 : _b.map(function (columnContent) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Text, { key: columnContent === null || columnContent === void 0 ? void 0 : columnContent.toString(), component: "div", size: "xSmall", theme: "c-contentTableRow__param", type: "secondary" }, columnContent)); })))) : null;
98314
+ external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx({ 'c-contentTableRow__column--hidden': hideOnExpand && isOpened }) }, columns[i]))) : null;
98316
98315
  }),
98317
98316
  amountColumn && !(isMobileDeviceView && amountColumn.hideOnMobile) && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("td", { className: classBinder_cx('c-contentTableRow__column c-contentTableRow__amountColumn', getTextAlignClass(amountColumn.alignContent)) },
98318
98317
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx({ 'c-contentTableRow__column--hidden': amountColumn.hideOnExpand && isOpened }) },
@@ -100430,7 +100429,6 @@ var Autocomplete2 = function (_a) {
100430
100429
  var handleCreateNewOption = function () {
100431
100430
  setButtonValue({ label: fulltextValue, value: fulltextValue });
100432
100431
  onCreateNewItem && onCreateNewItem(fulltextValue);
100433
- setTypingMode(false);
100434
100432
  };
100435
100433
  var handleBlur = function (item) {
100436
100434
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -100438,10 +100436,14 @@ var Autocomplete2 = function (_a) {
100438
100436
  onBlur && onBlur((item === null || item === void 0 ? void 0 : item.value) || undefined);
100439
100437
  };
100440
100438
  var handleOptionKeyPress = function (event) {
100441
- 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;
100442
100440
  switch (key) {
100443
100441
  case KEYS.Enter:
100444
100442
  case KEYS.Tab:
100443
+ if (shiftKey) {
100444
+ handleComboBoxClick();
100445
+ return;
100446
+ }
100445
100447
  if (target.id === name + "_list-createNew") {
100446
100448
  handleCreateNewOption();
100447
100449
  }
@@ -100517,7 +100519,7 @@ var Autocomplete2 = function (_a) {
100517
100519
  event.preventDefault();
100518
100520
  break;
100519
100521
  default:
100520
- if (!(ctrlKey || metaKey)) {
100522
+ if (!(ctrlKey || metaKey) && key !== KEYS.Shift) {
100521
100523
  setFulltextValue(function (prev) { return "" + prev + key; });
100522
100524
  }
100523
100525
  break;
@@ -100736,7 +100738,7 @@ var Autocomplete2 = function (_a) {
100736
100738
  'f-control2--large': displayDetails,
100737
100739
  'f-autocomplete__trigger--loading': isLoading,
100738
100740
  'u-hide': typingMode
100739
- }), 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 },
100740
100742
  isLoading && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "loading" }),
100741
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),
100742
100744
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" })),
@@ -100744,7 +100746,7 @@ var Autocomplete2 = function (_a) {
100744
100746
  ? isCategorised(items)
100745
100747
  ? name + "_option-" + focusedCategoryIndex + "-" + focusedItemIndex
100746
100748
  : name + "_option-" + focusedItemIndex
100747
- : 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 }),
100748
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 },
100749
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()))));
100750
100752
  };
@@ -109047,9 +109049,9 @@ var Select2 = function (_a) {
109047
109049
  var _a;
109048
109050
  var listElementId;
109049
109051
  if (currentItemPosition > -1) {
109050
- var _b = itemsIndex[currentItemPosition], category = _b.category, item = _b.item;
109051
- scrollToItem(item, category, true);
109052
- 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";
109053
109055
  }
109054
109056
  else {
109055
109057
  listElementId = isCategorised ? name + "_list-0" : name + "_list";
@@ -109117,8 +109119,13 @@ var Select2 = function (_a) {
109117
109119
  }
109118
109120
  };
109119
109121
  var handleOptionKeyPress = function (event) {
109120
- var key = event.key;
109122
+ var key = event.key, shiftKey = event.shiftKey;
109121
109123
  switch (key) {
109124
+ case KEYS.Tab:
109125
+ if (shiftKey) {
109126
+ handleComboBoxClick();
109127
+ }
109128
+ break;
109122
109129
  case KEYS.Enter:
109123
109130
  selectFocusedItem();
109124
109131
  handleComboBoxClick();
@@ -109126,18 +109133,18 @@ var Select2 = function (_a) {
109126
109133
  break;
109127
109134
  case KEYS.ArrowDown:
109128
109135
  {
109129
- var itemIndex = itemsIndex[currentItemPosition + 1];
109130
- if (itemIndex) {
109131
- handleFocusedItem(itemIndex.item, itemIndex.category);
109136
+ var itemIndex_1 = itemsIndex[currentItemPosition + 1];
109137
+ if (itemIndex_1) {
109138
+ handleFocusedItem(itemIndex_1.item, itemIndex_1.category);
109132
109139
  }
109133
109140
  event.preventDefault();
109134
109141
  }
109135
109142
  break;
109136
109143
  case KEYS.ArrowUp:
109137
109144
  {
109138
- var itemIndex = itemsIndex[currentItemPosition - 1];
109139
- if (itemIndex) {
109140
- handleFocusedItem(itemIndex.item, itemIndex.category);
109145
+ var itemIndex_2 = itemsIndex[currentItemPosition - 1];
109146
+ if (itemIndex_2) {
109147
+ handleFocusedItem(itemIndex_2.item, itemIndex_2.category);
109141
109148
  }
109142
109149
  event.preventDefault();
109143
109150
  }
@@ -109149,18 +109156,18 @@ var Select2 = function (_a) {
109149
109156
  break;
109150
109157
  case KEYS.Home:
109151
109158
  {
109152
- var itemIndex = itemsIndex[0];
109153
- if (itemIndex) {
109154
- handleFocusedItem(itemIndex.item, itemIndex.category);
109159
+ var itemIndex_3 = itemsIndex[0];
109160
+ if (itemIndex_3) {
109161
+ handleFocusedItem(itemIndex_3.item, itemIndex_3.category);
109155
109162
  }
109156
109163
  event.preventDefault();
109157
109164
  }
109158
109165
  break;
109159
109166
  case KEYS.End:
109160
109167
  {
109161
- var itemIndex = itemsIndex[itemsIndex.length - 1];
109162
- if (itemIndex) {
109163
- 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);
109164
109171
  }
109165
109172
  event.preventDefault();
109166
109173
  }
@@ -109211,10 +109218,18 @@ var Select2 = function (_a) {
109211
109218
  name: name,
109212
109219
  warning: warning
109213
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
+ }
109214
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),
109215
109230
  external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(contexts_Select2Context.Provider, { value: select2context },
109216
- 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" },
109217
- 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 },
109218
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),
109219
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)))));
109220
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.5",
3
+ "version": "0.10.7",
4
4
  "description": "MMB LILLY design system",
5
5
  "license": "UNLICENSED",
6
6
  "sideEffects": false,