@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Dropdown/DropdownButton.js

@@ -1,107 +1,210 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"];
+var _templateObject;
 /**
  * Import React libraries.
- */
-import * as React from 'react';
+ */
+import * as React from 'react';
+
 /**
  * Import custom components.
- */
-import { IconButton } from '../Button';
-import DropdownContent from './DropdownContent';
-import styled from 'styled-components';
-import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } from '../common';
-import { DropdownButtonTextArrow, DropdownButtonTextContent, DropdownButtonTextIcon, DropdownButtonTextStyles, DropdownButtonTextWrapper } from './CommonStyling';
-import { SystemIcons } from '../icons';
-export var DropdownButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
-var DropdownButton = React.forwardRef(function (_a, ref) {
-    var items = _a.items, icon = _a.icon, disabled = _a.disabled, onClick = _a.onClick, _b = _a.itemsType, itemsType = _b === void 0 ? 'normal' : _b, action = _a.action, _c = _a.actionLabel, actionLabel = _c === void 0 ? '' : _c, actionVariant = _a.actionVariant, actionIcon = _a.actionIcon, actionLoading = _a.actionLoading, size = _a.size, width = _a.width, alignLeft = _a.alignLeft, _d = _a.multiSelect, multiSelect = _d === void 0 ? false : _d, _e = _a.scrollable, scrollable = _e === void 0 ? false : _e, _f = _a.pinTopItem, pinTopItem = _f === void 0 ? false : _f, maxHeight = _a.maxHeight, className = _a.className, value = _a.value, id = _a.id, dataTestId = _a.dataTestId, rest = __rest(_a, ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"]);
-    // Globally used variables within the view.
-    var _g = React.useState(false), dropdownOpen = _g[0], setDropdownOpen = _g[1];
-    var _h = React.useState(), activeDescendant = _h[0], setActiveDescendant = _h[1];
-    var _j = React.useState([]), selectedValues = _j[0], setSelectedValues = _j[1];
-    var _k = React.useState(null), focused = _k[0], setFocused = _k[1];
-    var _l = React.useState(false), keyboardNavigated = _l[0], setKeyboardNavigated = _l[1];
-    var dropdownRef = React.useRef(null);
-    var containerRef = useFocusOutsideRef(function () { return setDropdownOpen(false); }, [dropdownRef]);
-    useClickOutsideRef(function () { return setDropdownOpen(false); }, [], containerRef);
-    React.useEffect(function () {
-        !dropdownOpen && setKeyboardNavigated(false);
-    }, [dropdownOpen]);
-    React.useEffect(function () {
-        disabled && setDropdownOpen(false);
-    }, [disabled]);
-    React.useEffect(function () {
-        setSelectedValues(value || []);
-    }, [value]);
-    var handleValueSelect = function (values) {
-        // Do all required actions
-        onClick(values);
-    };
-    /**
-     * Renders Icon Button dropdown menu.
-     * @returns HTML View for the Icon button dropdown menu.
-     */
-    var renderButton = function () {
-        switch (rest.type) {
-            case 'icon':
-                return (React.createElement(IconButton, { ref: ref, variant: "secondary", shape: "circular", role: "button", tooltip: rest.tooltip, id: id, "data-testid": dataTestId, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, action: function (event) {
-                        setDropdownOpen(!dropdownOpen);
-                        if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
-                            setKeyboardNavigated(true);
-                        }
-                    }, disabled: disabled }, icon));
-            case 'text':
-                var label = rest.keepLabel || !(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length)
-                    ? rest.label
-                    : items.filter(function (a) { return selectedValues.includes(a.value); }).map(function (a) { var _a; return (_a = a.displayLabel) !== null && _a !== void 0 ? _a : a.value; }).join(', ');
-                var cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
-                return React.createElement(DropdownButtonTextWrapper, { tabIndex: !disabled ? 0 : -1, className: cls, role: "button", id: id, "data-testid": dataTestId, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, onMouseDown: defaultOnMouseDownHandler, onKeyDown: function (e) {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setDropdownOpen(!dropdownOpen);
-                            setKeyboardNavigated(true);
-                        }
-                    }, onClick: function () { return !disabled && setDropdownOpen(!dropdownOpen); } },
-                    React.createElement(DropdownButtonTextContent, null,
-                        icon && React.createElement(DropdownButtonTextIcon, null, icon),
-                        React.createElement(DropdownButtonTextStyles, null, label),
-                        React.createElement(DropdownButtonTextArrow, null, dropdownOpen
-                            ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px" })
-                            : React.createElement(SystemIcons.ArrowDropDown, { size: "24px" }))));
-        }
-    };
-    return (React.createElement(DropdownButtonContainer, { className: className, ref: containerRef },
-        renderButton(),
-        React.createElement(DropdownContent, { ref: dropdownRef, ariaRolesType: "menu", containerRef: containerRef, customizationProps: {
-                itemsType: itemsType,
-                action: action !== null && action !== void 0 ? action : (function () {
-                }),
-                actionLabel: actionLabel,
-                actionVariant: actionVariant,
-                onValueUpdate: handleValueSelect,
-                multiSelect: multiSelect,
-                actionIcon: actionIcon,
-                actionLoading: actionLoading,
-                scrollable: scrollable,
-                pinTopItem: pinTopItem,
-                maxHeight: maxHeight,
-                items: items
-            }, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, focused: focused, setFocused: setFocused, size: size, width: width, alignLeft: alignLeft, isOpen: dropdownOpen, setIsOpen: setDropdownOpen, outline: keyboardNavigated, filter: "", selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues, setSelectedValues: setSelectedValues, messageOnNoResults: "No results", isButton: true, id: "".concat(id, "_dropdowncontent") })));
-});
-export default DropdownButton;
-var templateObject_1;
+ */
+import { IconButton } from '../Button';
+import DropdownContent from './DropdownContent';
+import styled from 'styled-components';
+
+/**
+ * Import custom types.
+ */
+
+import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { DropdownButtonTextArrow, DropdownButtonTextContent, DropdownButtonTextIcon, DropdownButtonTextStyles, DropdownButtonTextWrapper } from './CommonStyling';
+import { SystemIcons } from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DropdownButtonContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
+var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var items = _ref.items,
+    icon = _ref.icon,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    _ref$itemsType = _ref.itemsType,
+    itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
+    action = _ref.action,
+    _ref$actionLabel = _ref.actionLabel,
+    actionLabel = _ref$actionLabel === void 0 ? '' : _ref$actionLabel,
+    actionVariant = _ref.actionVariant,
+    actionIcon = _ref.actionIcon,
+    actionLoading = _ref.actionLoading,
+    size = _ref.size,
+    width = _ref.width,
+    alignLeft = _ref.alignLeft,
+    _ref$multiSelect = _ref.multiSelect,
+    multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+    _ref$pinTopItem = _ref.pinTopItem,
+    pinTopItem = _ref$pinTopItem === void 0 ? false : _ref$pinTopItem,
+    maxHeight = _ref.maxHeight,
+    className = _ref.className,
+    value = _ref.value,
+    id = _ref.id,
+    dataTestId = _ref.dataTestId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // Globally used variables within the view.
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dropdownOpen = _React$useState2[0],
+    setDropdownOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    selectedValues = _React$useState6[0],
+    setSelectedValues = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    focused = _React$useState8[0],
+    setFocused = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    keyboardNavigated = _React$useState10[0],
+    setKeyboardNavigated = _React$useState10[1];
+  var dropdownRef = React.useRef(null);
+  var containerRef = useFocusOutsideRef(function () {
+    return setDropdownOpen(false);
+  }, [dropdownRef]);
+  useClickOutsideRef(function () {
+    return setDropdownOpen(false);
+  }, [], containerRef);
+  React.useEffect(function () {
+    !dropdownOpen && setKeyboardNavigated(false);
+  }, [dropdownOpen]);
+  React.useEffect(function () {
+    disabled && setDropdownOpen(false);
+  }, [disabled]);
+  React.useEffect(function () {
+    setSelectedValues(value || []);
+  }, [value]);
+  var handleValueSelect = function handleValueSelect(values) {
+    // Do all required actions
+    onClick(values);
+  };
+
+  /**
+   * Renders Icon Button dropdown menu.
+   * @returns HTML View for the Icon button dropdown menu.
+   */
+  var renderButton = function renderButton() {
+    switch (rest.type) {
+      case 'icon':
+        return /*#__PURE__*/_jsx(IconButton, {
+          ref: ref,
+          variant: "secondary",
+          shape: "circular",
+          role: "button",
+          tooltip: rest.tooltip,
+          id: id,
+          "data-testid": dataTestId,
+          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-activedescendant": activeDescendant,
+          action: function action(event) {
+            setDropdownOpen(!dropdownOpen);
+            if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
+              setKeyboardNavigated(true);
+            }
+          },
+          disabled: disabled,
+          children: icon
+        });
+      case 'text':
+        var label = rest.keepLabel || !(selectedValues !== null && selectedValues !== void 0 && selectedValues.length) ? rest.label : items.filter(function (a) {
+          return selectedValues.includes(a.value);
+        }).map(function (a) {
+          var _a$displayLabel;
+          return (_a$displayLabel = a.displayLabel) !== null && _a$displayLabel !== void 0 ? _a$displayLabel : a.value;
+        }).join(', ');
+        var cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
+        return /*#__PURE__*/_jsx(DropdownButtonTextWrapper, {
+          tabIndex: !disabled ? 0 : -1,
+          className: cls,
+          role: "button",
+          id: id,
+          "data-testid": dataTestId,
+          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-activedescendant": activeDescendant,
+          onMouseDown: defaultOnMouseDownHandler,
+          onKeyDown: function onKeyDown(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+              setDropdownOpen(!dropdownOpen);
+              setKeyboardNavigated(true);
+            }
+          },
+          onClick: function onClick() {
+            return !disabled && setDropdownOpen(!dropdownOpen);
+          },
+          children: /*#__PURE__*/_jsxs(DropdownButtonTextContent, {
+            children: [icon && /*#__PURE__*/_jsx(DropdownButtonTextIcon, {
+              children: icon
+            }), /*#__PURE__*/_jsx(DropdownButtonTextStyles, {
+              children: label
+            }), /*#__PURE__*/_jsx(DropdownButtonTextArrow, {
+              children: dropdownOpen ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
+                size: "24px"
+              }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
+                size: "24px"
+              })
+            })]
+          })
+        });
+    }
+  };
+  return /*#__PURE__*/_jsxs(DropdownButtonContainer, {
+    className: className,
+    ref: containerRef,
+    children: [renderButton(), /*#__PURE__*/_jsx(DropdownContent, {
+      ref: dropdownRef,
+      ariaRolesType: "menu",
+      containerRef: containerRef,
+      customizationProps: {
+        itemsType: itemsType,
+        action: action !== null && action !== void 0 ? action : function () {},
+        actionLabel: actionLabel,
+        actionVariant: actionVariant,
+        onValueUpdate: handleValueSelect,
+        multiSelect: multiSelect,
+        actionIcon: actionIcon,
+        actionLoading: actionLoading,
+        scrollable: scrollable,
+        pinTopItem: pinTopItem,
+        maxHeight: maxHeight,
+        items: items
+      },
+      onActiveDescendantChanged: function onActiveDescendantChanged(e) {
+        return setActiveDescendant(e);
+      },
+      focused: focused,
+      setFocused: setFocused,
+      size: size,
+      width: width,
+      alignLeft: alignLeft,
+      isOpen: dropdownOpen,
+      setIsOpen: setDropdownOpen,
+      outline: keyboardNavigated,
+      filter: "",
+      selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues,
+      setSelectedValues: setSelectedValues,
+      messageOnNoResults: "No results",
+      isButton: true,
+      id: "".concat(id, "_dropdowncontent")
+    })]
+  });
+});
+export default DropdownButton;
+//# sourceMappingURL=DropdownButton.js.map

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -45,7 +45,7 @@ export interface DropdownButtonBaseProps extends Testable {
     /** Optional. If set, then dropdown content will be aligned with the left edge of the button, otherwise with the right edge. */
     alignLeft?: boolean;
 }
-export declare type IconDropdownButtonProps = DropdownButtonBaseProps & {
+export type IconDropdownButtonProps = DropdownButtonBaseProps & {
     /** Icon type of the dropdown button. */
     type: 'icon';
     /** Required. Icon to be shown with the component. */
@@ -53,7 +53,7 @@ export declare type IconDropdownButtonProps = DropdownButtonBaseProps & {
     /** Optional. Tooltip to be shown with the component. */
     tooltip?: TooltipProps;
 };
-export declare type TextDropdownButtonProps = DropdownButtonBaseProps & {
+export type TextDropdownButtonProps = DropdownButtonBaseProps & {
     /** Text drodown button type. */
     type: 'text';
     /** Optional. Label to be shown with the dropdown button if none of the items in the dropdown is selected. */
@@ -61,4 +61,4 @@ export declare type TextDropdownButtonProps = DropdownButtonBaseProps & {
     /** Optional. If set to true, then 'label' will be shown even if user selects items in the dropdown. */
     keepLabel?: boolean;
 };
-export declare type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;
+export type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;

package/dist/Dropdown/DropdownButtonTypes.js

@@ -1 +1,2 @@
-export {};
+export {};
+//# sourceMappingURL=DropdownButtonTypes.js.map