@mmb-digital/ds-lilly 0.7.1 → 0.7.4

package/dist/ds-lilly.js

@@ -87067,7 +87067,7 @@ var Button_rest = (undefined && undefined.__rest) || function (s, e) {
 
 var Button = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["forwardRef"])(function (_a, ref) {
     var _b;
-    var _c = _a.allowEventPropagation, allowEventPropagation = _c === void 0 ? false : _c, ariaLabel = _a.ariaLabel, children = _a.children, color = _a.color, disabledTooltip = _a.disabledTooltip, disabledTooltipType = _a.disabledTooltipType, _d = _a.elementType, elementType = _d === void 0 ? 'button' : _d, isBlock = _a.isBlock, isDisabled = _a.isDisabled, isLoading = _a.isLoading, isRounded = _a.isRounded, isSmall = _a.isSmall, linkDownloadTitle = _a.linkDownloadTitle, linkUrl = _a.linkUrl, onClick = _a.onClick, onlyIconName = _a.onlyIconName, _e = _a.testId, testId = _e === void 0 ? 'Button' : _e, theme = _a.theme, title = _a.title, _f = _a.type, type = _f === void 0 ? 'filled' : _f, rest = Button_rest(_a, ["allowEventPropagation", "ariaLabel", "children", "color", "disabledTooltip", "disabledTooltipType", "elementType", "isBlock", "isDisabled", "isLoading", "isRounded", "isSmall", "linkDownloadTitle", "linkUrl", "onClick", "onlyIconName", "testId", "theme", "title", "type"]);
+    var _c = _a.allowEventPropagation, allowEventPropagation = _c === void 0 ? false : _c, ariaLabel = _a.ariaLabel, children = _a.children, color = _a.color, disabledTooltip = _a.disabledTooltip, disabledTooltipType = _a.disabledTooltipType, _d = _a.elementType, elementType = _d === void 0 ? 'button' : _d, isBlock = _a.isBlock, isDisabled = _a.isDisabled, isLoading = _a.isLoading, isRounded = _a.isRounded, isSmall = _a.isSmall, linkDownloadTitle = _a.linkDownloadTitle, linkUrl = _a.linkUrl, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onlyIconName = _a.onlyIconName, _e = _a.testId, testId = _e === void 0 ? 'Button' : _e, theme = _a.theme, title = _a.title, _f = _a.type, type = _f === void 0 ? 'filled' : _f, rest = Button_rest(_a, ["allowEventPropagation", "ariaLabel", "children", "color", "disabledTooltip", "disabledTooltipType", "elementType", "isBlock", "isDisabled", "isLoading", "isRounded", "isSmall", "linkDownloadTitle", "linkUrl", "onClick", "onKeyDown", "onlyIconName", "testId", "theme", "title", "type"]);
     var handleOnClick = function (event) {
         if (isDisabled || isLoading) {
             event.preventDefault();
@@ -87096,7 +87096,7 @@ var Button = Object(external_root_React_commonjs2_react_commonjs_react_amd_react
             _b["c-btn--" + type] = type !== 'filled',
             _b["c-btn--" + color] = color,
             _b['c-btn--onlyIcon'] = onlyIconName,
-            _b), theme), "data-testid": testId, disabled: (isDisabled || isLoading) && !disabledTooltip, download: linkDownloadTitle, href: linkUrl, title: title, type: linkUrl ? undefined : elementType, onClick: handleOnClick }, rest),
+            _b), theme), "data-testid": testId, disabled: (isDisabled || isLoading) && !disabledTooltip, download: linkDownloadTitle, href: linkUrl, title: title, type: linkUrl ? undefined : elementType, onClick: handleOnClick, onKeyDown: onKeyDown }, rest),
         isLoading && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "loading" }),
         onlyIconName ? (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(Icon, { name: onlyIconName }),
@@ -96384,13 +96384,17 @@ var Dropdown = function (_a) {
 // CONCATENATED MODULE: ./src/components/Components/Dropdown/_elements_/DropdownMenu.tsx
 
 
-var DropdownMenu = function (_a) {
+var DropdownMenu = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["forwardRef"])(function (_a, ref) {
     var _b;
     var activeDescendant = _a.activeDescendant, _c = _a.ariaHidden, ariaHidden = _c === void 0 ? false : _c, children = _a.children, id = _a.id, labelledBy = _a.labelledBy, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, role = _a.role, tabIndex = _a.tabIndex, testId = _a.testId, theme = _a.theme, title = _a.title;
     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,
         title && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-dropdown__title') }, title),
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("ul", { "aria-activedescendant": activeDescendant, "aria-hidden": ariaHidden, "aria-labelledby": labelledBy, className: classBinder_cx('c-dropdown__menu', (_b = {}, _b["c-dropdown__menu--categorised"] = title, _b), theme), "data-testid": testId, id: id, role: role, tabIndex: tabIndex, onBlur: onBlur, onKeyDown: onKeyDown }, children)));
-};
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("ul", { 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            ref: ref, "aria-activedescendant": activeDescendant, "aria-hidden": ariaHidden, "aria-labelledby": labelledBy, className: classBinder_cx('c-dropdown__menu', (_b = {}, _b["c-dropdown__menu--categorised"] = title, _b), theme), "data-testid": testId, id: id, role: role, tabIndex: tabIndex, onBlur: onBlur, onKeyDown: onKeyDown }, children)));
+});
+DropdownMenu.displayName = 'forwardRef(DropdownMenu)';
 
 // CONCATENATED MODULE: ./src/components/Components/Dropdown/_elements_/DropdownItem.tsx
 
@@ -96425,8 +96429,6 @@ var DropdownItem = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Components/CompactButtons/CompactButtons.tsx
-// TODO: enable eslint react-hooks/exhaustive-deps
-/* eslint-disable react-hooks/exhaustive-deps */
 var CompactButtons_assign = (undefined && undefined.__assign) || function () {
     CompactButtons_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -96456,10 +96458,32 @@ var CompactButtons = function (_a) {
     var background = _a.background, buttons = _a.buttons, isSmall = _a.isSmall, _b = _a.maxVisibleButtons, maxVisibleButtons = _b === void 0 ? buttons.length : _b, theme = _a.theme, _c = _a.type, type = _c === void 0 ? 'filled' : _c;
     var container = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])(null);
     var refs = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])([]);
+    var dropdownRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])();
     var width = useContainerDimensions(container).width;
     var _d = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isDropdownVisible = _d[0], setIsDropdownVisible = _d[1];
+    var _e = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(-1), focusedItemIndex = _e[0], setFocusedItemIndex = _e[1];
     var openerWidth = type === 'border' ? 40 : 56;
-    var toggleDropdownVisibility = function () { return setIsDropdownVisible(function (prev) { return !prev; }); };
+    var focusOpener = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function () {
+        var _a, _b;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        (_b = (_a = container.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('c-compact-buttons__opener')[0]) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [container]);
+    var focusDropdown = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function () {
+        var _a;
+        (_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [dropdownRef]);
+    var toggleDropdownVisibility = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function () {
+        if (!isDropdownVisible) {
+            setTimeout(function () {
+                focusDropdown();
+            });
+        }
+        else {
+            setFocusedItemIndex(-1);
+        }
+        setIsDropdownVisible(function (prev) { return !prev; });
+    }, [isDropdownVisible, focusDropdown, setFocusedItemIndex, setIsDropdownVisible]);
     var ends = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () {
         var offset = 0;
         return refs.current.map(function (ref) {
@@ -96468,11 +96492,92 @@ var CompactButtons = function (_a) {
             offset += buttonWidth;
             return end;
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [refs.current.length, width]);
-    var isButtonVisible = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (position) { return ends[position] + openerWidth <= width && position < maxVisibleButtons; }, [ends, width, maxVisibleButtons]);
+    var isButtonVisible = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (position) { return ends[position] + openerWidth <= width && position < maxVisibleButtons; }, [ends, width, maxVisibleButtons, openerWidth]);
     var registerButtonRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (pos) { return function (ref) {
         refs.current[pos] = ref;
     }; }, []);
+    var selectableItems = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () { return buttons.map(function (_a, i) {
+        var isDisabled = _a.isDisabled;
+        return (!isDisabled && !isButtonVisible(i) ? i : null);
+    }).filter(function (i) { return i !== null; }); }, [buttons, isButtonVisible]);
+    Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
+        var _a;
+        if (focusedItemIndex > -1) {
+            var item = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('c-compact-buttons__dropdown-item')[focusedItemIndex];
+            item === null || item === void 0 ? void 0 : item.focus();
+        }
+    }, [focusedItemIndex]);
+    var handleOptionKeyPress = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (event) {
+        var key = event.key;
+        switch (key) {
+            case KEYS.ArrowDown:
+                event.preventDefault();
+                if (focusedItemIndex === -1) {
+                    setFocusedItemIndex(0);
+                }
+                else if (selectableItems[focusedItemIndex + 1] !== undefined) {
+                    setFocusedItemIndex(focusedItemIndex + 1);
+                }
+                else {
+                    setFocusedItemIndex(-1);
+                    focusOpener();
+                }
+                break;
+            case KEYS.Tab:
+                setFocusedItemIndex(-1);
+                setIsDropdownVisible(false);
+                break;
+            case KEYS.ArrowUp:
+                event.preventDefault();
+                if (focusedItemIndex === -1) {
+                    setFocusedItemIndex(selectableItems.length - 1);
+                }
+                else if (selectableItems[focusedItemIndex - 1] !== undefined) {
+                    setFocusedItemIndex(focusedItemIndex - 1);
+                }
+                else {
+                    setFocusedItemIndex(-1);
+                    focusOpener();
+                }
+                break;
+            case KEYS.Home:
+                event.preventDefault();
+                setFocusedItemIndex(0);
+                break;
+            case KEYS.End:
+                event.preventDefault();
+                setFocusedItemIndex(selectableItems.length - 1);
+                break;
+        }
+    }, [setFocusedItemIndex, focusOpener, focusedItemIndex, selectableItems]);
+    var handleOpenerKeyPress = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (event) {
+        var key = event.key;
+        switch (key) {
+            case KEYS.ArrowDown:
+                event.preventDefault();
+                focusDropdown();
+                setFocusedItemIndex(0);
+                break;
+            case KEYS.ArrowUp:
+                event.preventDefault();
+                focusDropdown();
+                setFocusedItemIndex(selectableItems.length - 1);
+                break;
+            case KEYS.Tab:
+                setFocusedItemIndex(-1);
+                setIsDropdownVisible(false);
+                break;
+        }
+    }, [focusDropdown, setFocusedItemIndex, setIsDropdownVisible, selectableItems]);
+    var handleDropdownItemKeyPress = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (onClick) { return function (event) {
+        var key = event.key;
+        if (key === KEYS.Enter || key === KEYS.Space) {
+            event.preventDefault();
+            onClick && onClick(event);
+        }
+    }; }, []);
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { ref: container, className: "c-compact-buttons" },
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-compact-buttons__wrapper', "c-compact-buttons__wrapper--" + type, "c-compact-buttons__wrapper--" + background, theme) },
             buttons.map(function (_a, i) {
@@ -96485,16 +96590,16 @@ var CompactButtons = function (_a) {
                         label),
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("i", { className: "c-compact-buttons__button_separator" })));
             }),
-            !isButtonVisible(buttons.length - 1) && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Dropdown, { forceVisibility: isDropdownVisible, placement: "bottom-end", trigger: null, triggerComponent: external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { "aria-hidden": true, ariaLabel: "other", color: background, isSmall: isSmall, theme: "c-compact-buttons__button", type: type, onClick: toggleDropdownVisibility },
+            !isButtonVisible(buttons.length - 1) && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Dropdown, { forceVisibility: isDropdownVisible, placement: "bottom-end", trigger: null, triggerComponent: external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { "aria-hidden": true, ariaLabel: "other", color: background, isSmall: isSmall, theme: "c-compact-buttons__button c-compact-buttons__opener", type: type, onClick: toggleDropdownVisibility, onKeyDown: handleOpenerKeyPress },
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "other" }),
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: "c-compact-buttons__dropdown__opener" })), onVisibleChange: function (state) { return setIsDropdownVisible(state); } },
-                external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownMenu, { ariaHidden: true }, buttons.map(function (_a, i) {
+                external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownMenu, { ref: dropdownRef, tabIndex: 0, onKeyDown: handleOptionKeyPress }, buttons.map(function (_a, i) {
                     var allowEventPropagation = _a.allowEventPropagation, icon = _a.icon, isDisabled = _a.isDisabled, isLoading = _a.isLoading, key = _a.key, label = _a.label, onClick = _a.onClick, testId = _a.testId;
                     if (isButtonVisible(i))
                         return;
-                    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { key: key, allowEventPropagation: allowEventPropagation, iconName: icon, isDisabled: isDisabled, testId: testId + "-dropdown", theme: classBinder_cx('c-compact-buttons__dropdown-item', {
+                    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { key: key, allowEventPropagation: allowEventPropagation, iconName: icon, isDisabled: isDisabled, isFocused: selectableItems[focusedItemIndex] === i, tabIndex: 0, testId: testId + "-dropdown", theme: classBinder_cx('c-compact-buttons__dropdown-item', {
                             'c-compact-buttons__dropdown-item--disabled': isDisabled || isLoading
-                        }), onClick: onClick }, label));
+                        }), onClick: onClick, onKeyDown: handleDropdownItemKeyPress(onClick) }, label));
                 })))))));
 };
 
@@ -97732,11 +97837,12 @@ var IntegerInput = function (_a) {
     var hasChangedRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])(false);
     var numberMask = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () {
         return configureIntegerMask({
-            thousandSeparator: thousandSeparator,
+            allowLeadingZeros: allowLeadingZeros,
             allowNegative: allowNegative,
-            integerPlaces: integerPlaces
+            integerPlaces: integerPlaces,
+            thousandSeparator: thousandSeparator
         });
-    }, [thousandSeparator, allowNegative, integerPlaces]);
+    }, [allowLeadingZeros, allowNegative, integerPlaces, thousandSeparator]);
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
         if (Number.isNaN(value)) {
             return;

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

@@ -43,6 +43,8 @@ interface BasicButtonType extends ComponentPropsType, DisabledTooltipPropsType {
     target?: TargetType;
     /** Click event handler. */
     onClick?: (e: SyntheticEvent | KeyboardEvent) => void;
+    /** Key down event handler. */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
     /** Name of icon, that should be displayed stand alone. If you need icon and text (or something else) use children property. */
     onlyIconName?: never;
     /** Title of the button element */

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, SyntheticEvent } from 'react';
+import React, { ReactElement, ReactNode, SyntheticEvent } from 'react';
 import { IconNameType, TargetType } from '../../..';
 import { ComponentPropsType, DisabledTooltipPropsType } from '../../../utils';
 interface CompactButtonsButtonType extends ComponentPropsType, DisabledTooltipPropsType {
@@ -28,7 +28,7 @@ interface CompactButtonsButtonType extends ComponentPropsType, DisabledTooltipPr
     /** Target for link outside app. */
     target?: TargetType;
     /** Click event handler. */
-    onClick?: (e: SyntheticEvent | KeyboardEvent) => void;
+    onClick?: (e: SyntheticEvent | KeyboardEvent | React.KeyboardEvent) => void;
     /** Name of icon, that should be displayed stand alone. */
     onlyIconName?: never;
     /** Title of the button element */

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

@@ -15,5 +15,5 @@ export interface DropdownMenuPropsType extends ComponentPropsType {
     onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void;
     onBlur?: () => void;
 }
-export declare const DropdownMenu: ({ activeDescendant, ariaHidden, children, id, labelledBy, onBlur, onKeyDown, role, tabIndex, testId, theme, title }: DropdownMenuPropsType) => JSX.Element;
+export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuPropsType & React.RefAttributes<unknown>>;
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/package.json

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