@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.3

package/dist/Dropdown/DropdownButton.cjs

@@ -1,100 +1,75 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _Button = require("../Button");
-
 var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _common = require("../common");
-
 var _CommonStyling = require("./CommonStyling");
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id"];
-
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    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,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      dropdownOpen = _React$useState2[0],
-      setDropdownOpen = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    dropdownOpen = _React$useState2[0],
+    setDropdownOpen = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      activeDescendant = _React$useState4[0],
-      setActiveDescendant = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
   var _React$useState5 = React.useState([]),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      selectedValues = _React$useState6[0],
-      setSelectedValues = _React$useState6[1];
-
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    selectedValues = _React$useState6[0],
+    setSelectedValues = _React$useState6[1];
   var _React$useState7 = React.useState(null),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      focused = _React$useState8[0],
-      setFocused = _React$useState8[1];
-
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    focused = _React$useState8[0],
+    setFocused = _React$useState8[1];
   var _React$useState9 = React.useState(false),
-      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      keyboardNavigated = _React$useState10[0],
-      setKeyboardNavigated = _React$useState10[1];
-
+    _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+    keyboardNavigated = _React$useState10[0],
+    setKeyboardNavigated = _React$useState10[1];
   var dropdownRef = React.useRef(null);
   var containerRef = (0, _common.useFocusOutsideRef)(function () {
     return setDropdownOpen(false);
@@ -111,17 +86,15 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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':
@@ -134,7 +107,6 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           "aria-activedescendant": activeDescendant,
           action: function action(event) {
             setDropdownOpen(!dropdownOpen);
-
             if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
               setKeyboardNavigated(true);
             }
@@ -142,13 +114,11 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           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);
@@ -186,7 +156,6 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     className: className,
     ref: containerRef,

package/dist/Dropdown/DropdownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.cjs","names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          id,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      role=\"button\"\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          role=\"button\"\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}> \n      {renderButton()}\n      <DropdownContent\n        ref={dropdownRef}\n        ariaRolesType=\"menu\"\n        containerRef={containerRef}\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id={`${id}_dropdowncontent`}\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownButton.cjs","names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          id,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      role=\"button\"\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          role=\"button\"\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}> \n      {renderButton()}\n      <DropdownContent\n        ref={dropdownRef}\n        ariaRolesType=\"menu\"\n        containerRef={containerRef}\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id={`${id}_dropdowncontent`}\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownButton.js

@@ -2,20 +2,19 @@ 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"];
-
 var _templateObject;
-
 /**
  * Import React libraries.
  */
 import * as React from 'react';
+
 /**
  * Import custom components.
  */
-
 import { IconButton } from '../Button';
 import DropdownContent from './DropdownContent';
 import styled from 'styled-components';
+
 /**
  * Import custom types.
  */
@@ -28,58 +27,52 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var Wrapper = 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,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    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,
+    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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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);
@@ -96,17 +89,15 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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':
@@ -119,7 +110,6 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           "aria-activedescendant": activeDescendant,
           action: function action(event) {
             setDropdownOpen(!dropdownOpen);
-
             if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
               setKeyboardNavigated(true);
             }
@@ -127,13 +117,11 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           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);
@@ -171,7 +159,6 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
     }
   };
-
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: className,
     ref: containerRef,

package/dist/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          id,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      role=\"button\"\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          role=\"button\"\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}> \n      {renderButton()}\n      <DropdownContent\n        ref={dropdownRef}\n        ariaRolesType=\"menu\"\n        containerRef={containerRef}\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id={`${id}_dropdowncontent`}\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownButton.js","names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          id,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      role=\"button\"\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          role=\"button\"\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}> \n      {renderButton()}\n      <DropdownContent\n        ref={dropdownRef}\n        ariaRolesType=\"menu\"\n        containerRef={containerRef}\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id={`${id}_dropdowncontent`}\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}