@mmb-digital/ds-lilly 0.10.6 → 0.10.8

package/dist/ds-lilly.js

@@ -97840,7 +97840,7 @@ var Dropdown_assign = (undefined && undefined.__assign) || function () {
 
 var SCROLL_DEVIATION = 16;
 var Dropdown = function (_a) {
-    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;
+    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;
     var tooltipRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])();
     var _g = usePopperTooltip({
         closeOnOutsideClick: closeOnOutsideClick,
@@ -97870,9 +97870,9 @@ var Dropdown = function (_a) {
     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,
         Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["cloneElement"])(triggerComponent, { ref: setTriggerRef }),
         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,
-            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", Dropdown_assign({ ref: setRef, "data-testid": testId }, getTooltipProps({
+            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({
                 className: classBinder_cx('c-dropdown', { 'c-dropdown--fullWidth': hasSameWidthAsTrigger }, theme)
-            }), { id: dropdownId, onScroll: handleScroll }), children),
+            }), { id: dropdownId, tabIndex: tabIndex, onBlur: onBlur, onScroll: handleScroll }), children),
             onOutsideClick && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "c-dropdown__outside", onClick: onOutsideClick })))));
 };
 
@@ -99600,7 +99600,7 @@ var Label2 = function (_a) {
 
 
 var FormGroup2 = function (_a) {
-    var charCounter = _a.charCounter, children = _a.children, disabledTooltip = _a.disabledTooltip, _b = _a.disabledTooltipOffset, disabledTooltipOffset = _b === void 0 ? 6 : _b, disabledTooltipType = _a.disabledTooltipType, error = _a.error, _c = _a.hasError, hasError = _c === void 0 ? false : _c, _d = _a.hasWarning, hasWarning = _d === void 0 ? false : _d, help = _a.help, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, theme = _a.theme, warning = _a.warning;
+    var charCounter = _a.charCounter, children = _a.children, disabledTooltip = _a.disabledTooltip, _b = _a.disabledTooltipOffset, disabledTooltipOffset = _b === void 0 ? 6 : _b, disabledTooltipType = _a.disabledTooltipType, error = _a.error, _c = _a.hasError, hasError = _c === void 0 ? false : _c, _d = _a.hasWarning, hasWarning = _d === void 0 ? false : _d, help = _a.help, isDisabled = _a.isDisabled, label = _a.label, labelFor = _a.labelFor, labelTooltip = _a.labelTooltip, name = _a.name, theme = _a.theme, warning = _a.warning;
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-group2', { 'f-group2--disabled': isDisabled, 'f-group2--error': hasError, 'f-group2--warning': hasWarning }, theme) },
         withDisabledTooltip({
             isDisabled: isDisabled,
@@ -99608,7 +99608,7 @@ var FormGroup2 = function (_a) {
             disabledTooltipOffset: disabledTooltipOffset,
             disabledTooltipType: disabledTooltipType
         })(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: "disabled-tooltip-wrapper" },
-            label && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Label2, { htmlFor: name, identifier: name + "_label", labelTooltip: labelTooltip }, label)),
+            label && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Label2, { htmlFor: labelFor || name, identifier: name + "_label", labelTooltip: labelTooltip }, label)),
             children)),
         charCounter && charCounter.max > 0 && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-controlCounter', { 'f-controlCounter--error': charCounter.length > charCounter.max }) }, (charCounter.length || 0) + " / " + charCounter.max)),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { "aria-live": "assertive", className: "f-validationMsg f-validationMsg--invalid", id: name + "_errorMessage" }, error || warning),
@@ -100429,7 +100429,6 @@ var Autocomplete2 = function (_a) {
     var handleCreateNewOption = function () {
         setButtonValue({ label: fulltextValue, value: fulltextValue });
         onCreateNewItem && onCreateNewItem(fulltextValue);
-        setTypingMode(false);
     };
     var handleBlur = function (item) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -100437,10 +100436,14 @@ var Autocomplete2 = function (_a) {
         onBlur && onBlur((item === null || item === void 0 ? void 0 : item.value) || undefined);
     };
     var handleOptionKeyPress = function (event) {
-        var ctrlKey = event.ctrlKey, key = event.key, metaKey = event.metaKey, target = event.target;
+        var ctrlKey = event.ctrlKey, key = event.key, metaKey = event.metaKey, shiftKey = event.shiftKey, target = event.target;
         switch (key) {
             case KEYS.Enter:
             case KEYS.Tab:
+                if (shiftKey) {
+                    handleComboBoxClick();
+                    return;
+                }
                 if (target.id === name + "_list-createNew") {
                     handleCreateNewOption();
                 }
@@ -100516,7 +100519,7 @@ var Autocomplete2 = function (_a) {
                 event.preventDefault();
                 break;
             default:
-                if (!(ctrlKey || metaKey)) {
+                if (!(ctrlKey || metaKey) && key !== KEYS.Shift) {
                     setFulltextValue(function (prev) { return "" + prev + key; });
                 }
                 break;
@@ -100723,6 +100726,7 @@ var Autocomplete2 = function (_a) {
         help: help,
         isDisabled: isDisabled,
         label: label,
+        labelFor: name + "_button",
         labelTooltip: labelTooltip,
         name: name,
         warning: warning
@@ -100735,7 +100739,7 @@ var Autocomplete2 = function (_a) {
                                 'f-control2--large': displayDetails,
                                 'f-autocomplete__trigger--loading': isLoading,
                                 'u-hide': typingMode
-                            }), disabled: isDisabled, id: name + "_button", name: name, type: "button", onClick: handleComboBoxClick, onFocus: handleFocus },
+                            }), disabled: isDisabled, id: name + "_button", name: name, tabIndex: isDropdownVisible ? -1 : 0, type: "button", onClick: handleComboBoxClick, onFocus: handleFocus },
                             isLoading && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "loading" }),
                             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),
                             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 +100747,7 @@ var Autocomplete2 = function (_a) {
                                 ? isCategorised(items)
                                     ? name + "_option-" + focusedCategoryIndex + "-" + focusedItemIndex
                                     : name + "_option-" + focusedItemIndex
-                                : 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 }),
+                                : undefined, "aria-autocomplete": "list", "aria-controls": name + "_list", "aria-labelledby": name + "_label", autoComplete: "off", className: classBinder_cx('f-autocomplete__input', { 'u-hide': !isDropdownVisible }), disabled: isDisabled, id: name + "_input", name: name, placeholder: placeholder, tabIndex: isDropdownVisible ? 0 : -1, type: "text", value: fulltextValue, onChange: handleFulltextChange, onKeyDown: handleFulltextKeyPress }),
                         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 },
                             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()))));
 };
@@ -109046,9 +109050,9 @@ var Select2 = function (_a) {
                 var _a;
                 var listElementId;
                 if (currentItemPosition > -1) {
-                    var _b = itemsIndex[currentItemPosition], category = _b.category, item = _b.item;
-                    scrollToItem(item, category, true);
-                    listElementId = isCategorised ? name + "_list-" + category : name + "_list";
+                    var _b = itemsIndex[currentItemPosition], category_1 = _b.category, item_1 = _b.item;
+                    scrollToItem(item_1, category_1, true);
+                    listElementId = isCategorised ? name + "_list-" + category_1 : name + "_list";
                 }
                 else {
                     listElementId = isCategorised ? name + "_list-0" : name + "_list";
@@ -109116,8 +109120,13 @@ var Select2 = function (_a) {
         }
     };
     var handleOptionKeyPress = function (event) {
-        var key = event.key;
+        var key = event.key, shiftKey = event.shiftKey;
         switch (key) {
+            case KEYS.Tab:
+                if (shiftKey) {
+                    handleComboBoxClick();
+                }
+                break;
             case KEYS.Enter:
                 selectFocusedItem();
                 handleComboBoxClick();
@@ -109125,18 +109134,18 @@ var Select2 = function (_a) {
                 break;
             case KEYS.ArrowDown:
                 {
-                    var itemIndex = itemsIndex[currentItemPosition + 1];
-                    if (itemIndex) {
-                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    var itemIndex_1 = itemsIndex[currentItemPosition + 1];
+                    if (itemIndex_1) {
+                        handleFocusedItem(itemIndex_1.item, itemIndex_1.category);
                     }
                     event.preventDefault();
                 }
                 break;
             case KEYS.ArrowUp:
                 {
-                    var itemIndex = itemsIndex[currentItemPosition - 1];
-                    if (itemIndex) {
-                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    var itemIndex_2 = itemsIndex[currentItemPosition - 1];
+                    if (itemIndex_2) {
+                        handleFocusedItem(itemIndex_2.item, itemIndex_2.category);
                     }
                     event.preventDefault();
                 }
@@ -109148,18 +109157,18 @@ var Select2 = function (_a) {
                 break;
             case KEYS.Home:
                 {
-                    var itemIndex = itemsIndex[0];
-                    if (itemIndex) {
-                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    var itemIndex_3 = itemsIndex[0];
+                    if (itemIndex_3) {
+                        handleFocusedItem(itemIndex_3.item, itemIndex_3.category);
                     }
                     event.preventDefault();
                 }
                 break;
             case KEYS.End:
                 {
-                    var itemIndex = itemsIndex[itemsIndex.length - 1];
-                    if (itemIndex) {
-                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    var itemIndex_4 = itemsIndex[itemsIndex.length - 1];
+                    if (itemIndex_4) {
+                        handleFocusedItem(itemIndex_4.item, itemIndex_4.category);
                     }
                     event.preventDefault();
                 }
@@ -109206,14 +109215,23 @@ var Select2 = function (_a) {
         help: help,
         isDisabled: isDisabled,
         label: label,
+        labelFor: name + "_button",
         labelTooltip: labelTooltip,
         name: name,
         warning: warning
     };
+    var itemIndex = getItemIndexByValue(value);
+    var category = itemIndex.category, item = itemIndex.item;
+    var selectedItemLabel;
+    if (item > -1) {
+        selectedItemLabel = isCategorised
+            ? items[category].items[item].label
+            : items[item].label;
+    }
     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),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(contexts_Select2Context.Provider, { value: select2context },
-            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" },
-                    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 },
+            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" },
+                    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 },
                         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),
                         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)))));
 };

package/dist/types/src/components/Components/Dropdown/Dropdown.d.ts

@@ -15,12 +15,14 @@ export interface DropdownPropsType extends ComponentPropsType {
     delayShow?: number;
     /** Dropdown menu element ID */
     dropdownId?: string;
+    forceVisibility?: boolean;
     /** Set to use same width as triggerComponent. */
     hasSameWidthAsTrigger?: boolean;
     /** If true, hovering the tooltip will keep it open. */
     interactive?: boolean;
     /** Flag default opened state. */
     isOpenByDefault?: boolean;
+    onBlur?: () => void;
     /** Optional handler for visibility. */
     onVisibleChange?: (state: boolean) => void;
     /** Optional handler for scroll to end of lists. */
@@ -29,11 +31,12 @@ export interface DropdownPropsType extends ComponentPropsType {
     onOutsideClick?: () => void;
     /** The preferred placement of the tooltip. */
     placement?: DropdownPlacement;
+    /** Component tab-index */
+    tabIndex?: number;
     /** Event(s) that trigger dropdown to open. */
     trigger?: TriggerType | TriggerType[] | null;
     /** Component that triggers dropdown menu. */
     triggerComponent: ReactElement;
-    forceVisibility?: boolean;
 }
-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;
+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;
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/types/src/components/Form/FormGroup2/FormGroup2.d.ts

@@ -15,6 +15,8 @@ export interface FormGroup2PropsType extends ComponentPropsType, DisabledTooltip
     isDisabled?: boolean;
     /** Form field label. */
     label?: ReactNode;
+    /** htmlFor attribute for label (name is used by default) */
+    labelFor?: string;
     /** Content of additional label tooltip. */
     labelTooltip?: ReactNode;
     /** Defines counter of maximum characters to be inserted. */
@@ -27,5 +29,5 @@ export interface FormGroup2PropsType extends ComponentPropsType, DisabledTooltip
     /** Warning message shown in component warning state */
     warning?: string;
 }
-export declare const FormGroup2: ({ charCounter, children, disabledTooltip, disabledTooltipOffset, disabledTooltipType, error, hasError, hasWarning, help, isDisabled, label, labelTooltip, name, theme, warning }: FormGroup2PropsType) => JSX.Element;
+export declare const FormGroup2: ({ charCounter, children, disabledTooltip, disabledTooltipOffset, disabledTooltipType, error, hasError, hasWarning, help, isDisabled, label, labelFor, labelTooltip, name, theme, warning }: FormGroup2PropsType) => JSX.Element;
 //# sourceMappingURL=FormGroup2.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/ds-lilly",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,