@mmb-digital/ds-lilly 0.10.7 → 0.10.9

package/dist/ds-lilly.js

@@ -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),
@@ -100726,6 +100726,7 @@ var Autocomplete2 = function (_a) {
         help: help,
         isDisabled: isDisabled,
         label: label,
+        labelFor: name + "_button",
         labelTooltip: labelTooltip,
         name: name,
         warning: warning
@@ -100746,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, tabIndex: isDropdownVisible ? 0 : -1, 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()))));
 };
@@ -109043,6 +109044,7 @@ var Select2 = function (_a) {
             (_f = document.getElementById(itemElementId)) === null || _f === void 0 ? void 0 : _f.scrollIntoView({ block: 'nearest' });
         }
     }, [isCategorised, name]);
+    var focusSelect = function () { return setTimeout(function () { var _a; return (_a = document.getElementById(name + "_button")) === null || _a === void 0 ? void 0 : _a.focus(); }); };
     var handleComboBoxClick = function () {
         if (!isDropdownVisible) {
             setTimeout(function () {
@@ -109060,7 +109062,7 @@ var Select2 = function (_a) {
             }, 100);
         }
         if (isDropdownVisible) {
-            setTimeout(function () { var _a; return (_a = document.getElementById(name + "_button")) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+            focusSelect();
         }
         setIsDropdownVisible(!isDropdownVisible);
     };
@@ -109076,10 +109078,12 @@ var Select2 = function (_a) {
     var handleOptionClick = function (item) {
         propagateChange(item);
         setIsDropdownVisible(false);
+        focusSelect();
     };
     var handleEmptyOptionClick = function () {
         propagateChange();
         setIsDropdownVisible(false);
+        focusSelect();
     };
     var selectFocusedItem = function () {
         var itemIndex = itemsIndex[currentItemPosition];
@@ -109214,6 +109218,7 @@ var Select2 = function (_a) {
         help: help,
         isDisabled: isDisabled,
         label: label,
+        labelFor: name + "_button",
         labelTooltip: labelTooltip,
         name: name,
         warning: warning

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.7",
+  "version": "0.10.9",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,