@laerdal/life-react-components 1.8.0 → 1.9.0-dev.1

package/dist/Dropdown/DropdownButton.cjs

@@ -11,6 +11,8 @@ 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"));
@@ -23,8 +25,14 @@ 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"];
+
 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); }
@@ -46,8 +54,8 @@ var DropdownButton = function DropdownButton(_ref) {
       actionVariant = _ref.actionVariant,
       actionIcon = _ref.actionIcon,
       actionLoading = _ref.actionLoading,
-      width = _ref.width,
       size = _ref.size,
+      width = _ref.width,
       alignLeft = _ref.alignLeft,
       _ref$multiSelect = _ref.multiSelect,
       multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
@@ -56,7 +64,9 @@ var DropdownButton = function DropdownButton(_ref) {
       _ref$pinTopItem = _ref.pinTopItem,
       pinTopItem = _ref$pinTopItem === void 0 ? false : _ref$pinTopItem,
       maxHeight = _ref.maxHeight,
-      className = _ref.className;
+      className = _ref.className,
+      value = _ref.value,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
@@ -87,6 +97,12 @@ var DropdownButton = function DropdownButton(_ref) {
   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
@@ -98,26 +114,68 @@ var DropdownButton = function DropdownButton(_ref) {
    */
 
 
-  var renderIconButton = function renderIconButton() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-      variant: "secondary",
-      shape: "circular",
-      action: function action(event) {
-        setDropdownOpen(!dropdownOpen);
-
-        if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
-          setKeyboardNavigated(true);
-        }
-      },
-      disabled: disabled,
-      children: icon
-    });
+  var renderButton = function renderButton() {
+    switch (rest.type) {
+      case 'icon':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          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__*/(0, _jsxRuntime.jsx)(_CommonStyling.TextButtonDropdownWrapper, {
+          tabIndex: !disabled ? 0 : -1,
+          className: cls,
+          onMouseDown: _common.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__*/(0, _jsxRuntime.jsxs)(_CommonStyling.TextButtonDropdownContent, {
+            children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.TextButtonDropdownIcon, {
+              children: icon
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.TextButtonDropdownText, {
+              children: label
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.TextButtonDropdownArrow, {
+              children: dropdownOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
+                size: "24px"
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropDown, {
+                size: "24px"
+              })
+            })]
+          })
+        });
+    }
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     className: className,
     ref: containerRef,
-    children: [renderIconButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+    children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
       customizationProps: {
         itemsType: itemsType,
         action: action !== null && action !== void 0 ? action : function () {},
@@ -141,7 +199,7 @@ var DropdownButton = function DropdownButton(_ref) {
       setIsOpen: setDropdownOpen,
       outline: keyboardNavigated,
       filter: "",
-      selectedValues: itemsType == 'normal' ? [] : selectedValues,
+      selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues,
       setSelectedValues: setSelectedValues,
       messageOnNoResults: "No results",
       isButton: true,

package/dist/Dropdown/DropdownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","React","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderIconButton","event","detail","onValueUpdate"],"mappings":"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","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 {useClickOutsideRef, useFocusOutsideRef} from '../common';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          width,\n                          size,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\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\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\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 renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\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  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderIconButton()}\n      <DropdownContent\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        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={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.cjs"}
+{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","React","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"mappings":"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","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  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\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                          ...rest\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\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\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\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 variant=\"secondary\"\n                      shape=\"circular\"\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                                          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        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        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=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.cjs"}

package/dist/Dropdown/DropdownButton.d.ts

@@ -2,5 +2,5 @@
  * Import custom types.
  */
 import { DropdownButtonProps } from './DropdownButtonTypes';
-declare const DropdownButton: ({ items, icon, disabled, onClick, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, width, size, alignLeft, multiSelect, scrollable, pinTopItem, maxHeight, className }: DropdownButtonProps) => JSX.Element;
+declare const DropdownButton: ({ items, icon, disabled, onClick, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, size, width, alignLeft, multiSelect, scrollable, pinTopItem, maxHeight, className, value, ...rest }: DropdownButtonProps) => JSX.Element;
 export default DropdownButton;

package/dist/Dropdown/DropdownButton.js

@@ -1,5 +1,7 @@
 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"];
 
 var _templateObject;
 
@@ -18,7 +20,9 @@ import styled from 'styled-components';
  * Import custom types.
  */
 
-import { useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { TextButtonDropdownArrow, TextButtonDropdownContent, TextButtonDropdownIcon, TextButtonDropdownText, TextButtonDropdownWrapper } from './CommonStyling';
+import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"])));
@@ -36,8 +40,8 @@ var DropdownButton = function DropdownButton(_ref) {
       actionVariant = _ref.actionVariant,
       actionIcon = _ref.actionIcon,
       actionLoading = _ref.actionLoading,
-      width = _ref.width,
       size = _ref.size,
+      width = _ref.width,
       alignLeft = _ref.alignLeft,
       _ref$multiSelect = _ref.multiSelect,
       multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
@@ -46,7 +50,9 @@ var DropdownButton = function DropdownButton(_ref) {
       _ref$pinTopItem = _ref.pinTopItem,
       pinTopItem = _ref$pinTopItem === void 0 ? false : _ref$pinTopItem,
       maxHeight = _ref.maxHeight,
-      className = _ref.className;
+      className = _ref.className,
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
@@ -77,6 +83,12 @@ var DropdownButton = function DropdownButton(_ref) {
   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
@@ -88,26 +100,68 @@ var DropdownButton = function DropdownButton(_ref) {
    */
 
 
-  var renderIconButton = function renderIconButton() {
-    return /*#__PURE__*/_jsx(IconButton, {
-      variant: "secondary",
-      shape: "circular",
-      action: function action(event) {
-        setDropdownOpen(!dropdownOpen);
-
-        if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
-          setKeyboardNavigated(true);
-        }
-      },
-      disabled: disabled,
-      children: icon
-    });
+  var renderButton = function renderButton() {
+    switch (rest.type) {
+      case 'icon':
+        return /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          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(TextButtonDropdownWrapper, {
+          tabIndex: !disabled ? 0 : -1,
+          className: cls,
+          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(TextButtonDropdownContent, {
+            children: [icon && /*#__PURE__*/_jsx(TextButtonDropdownIcon, {
+              children: icon
+            }), /*#__PURE__*/_jsx(TextButtonDropdownText, {
+              children: label
+            }), /*#__PURE__*/_jsx(TextButtonDropdownArrow, {
+              children: dropdownOpen ? /*#__PURE__*/_jsx(ArrowDropUp, {
+                size: "24px"
+              }) : /*#__PURE__*/_jsx(ArrowDropDown, {
+                size: "24px"
+              })
+            })]
+          })
+        });
+    }
   };
 
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: className,
     ref: containerRef,
-    children: [renderIconButton(), /*#__PURE__*/_jsx(DropdownContent, {
+    children: [renderButton(), /*#__PURE__*/_jsx(DropdownContent, {
       customizationProps: {
         itemsType: itemsType,
         action: action !== null && action !== void 0 ? action : function () {},
@@ -131,7 +185,7 @@ var DropdownButton = function DropdownButton(_ref) {
       setIsOpen: setDropdownOpen,
       outline: keyboardNavigated,
       filter: "",
-      selectedValues: itemsType == 'normal' ? [] : selectedValues,
+      selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues,
       setSelectedValues: setSelectedValues,
       messageOnNoResults: "No results",
       isButton: true,

package/dist/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderIconButton","event","detail","onValueUpdate"],"mappings":"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","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 {useClickOutsideRef, useFocusOutsideRef} from '../common';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          width,\n                          size,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\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\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\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 renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\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  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderIconButton()}\n      <DropdownContent\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        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={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","onValueUpdate"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,EAAmCC,kBAAnC,EAAuDC,kBAAvD,QAAgF,WAAhF;AACA,SACEC,uBADF,EAEEC,yBAFF,EAGEC,sBAHF,EAIEC,sBAJF,EAKEC,yBALF,QAMO,iBANP;AAOA,SAAQC,aAAR,EAAuBC,WAAvB,QAAyC,kCAAzC;;;AAEA,IAAMC,OAAO,GAAGX,MAAM,CAACY,GAAV,wHAAb;;AAKA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAqB4B;AAAA,MApBzBC,KAoByB,QApBzBA,KAoByB;AAAA,MAnBzBC,IAmByB,QAnBzBA,IAmByB;AAAA,MAlBzBC,QAkByB,QAlBzBA,QAkByB;AAAA,MAjBzBC,OAiByB,QAjBzBA,OAiByB;AAAA,4BAhBzBC,SAgByB;AAAA,MAhBzBA,SAgByB,+BAhBb,QAgBa;AAAA,MAfzBC,MAeyB,QAfzBA,MAeyB;AAAA,8BAdzBC,WAcyB;AAAA,MAdzBA,WAcyB,iCAdX,EAcW;AAAA,MAbzBC,aAayB,QAbzBA,aAayB;AAAA,MAZzBC,UAYyB,QAZzBA,UAYyB;AAAA,MAXzBC,aAWyB,QAXzBA,aAWyB;AAAA,MAVzBC,IAUyB,QAVzBA,IAUyB;AAAA,MATzBC,KASyB,QATzBA,KASyB;AAAA,MARzBC,SAQyB,QARzBA,SAQyB;AAAA,8BAPzBC,WAOyB;AAAA,MAPzBA,WAOyB,iCAPX,KAOW;AAAA,6BANzBC,UAMyB;AAAA,MANzBA,UAMyB,gCANZ,KAMY;AAAA,6BALzBC,UAKyB;AAAA,MALzBA,UAKyB,gCALZ,KAKY;AAAA,MAJzBC,SAIyB,QAJzBA,SAIyB;AAAA,MAHzBC,SAGyB,QAHzBA,SAGyB;AAAA,MAFzBC,KAEyB,QAFzBA,KAEyB;AAAA,MADtBC,IACsB;;AACjD;AACA,wBAAwCpC,KAAK,CAACqC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAA4CvC,KAAK,CAACqC,QAAN,CAAyB,EAAzB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAA8BzC,KAAK,CAACqC,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOK,OAAP;AAAA,MAAgBC,UAAhB;;AACA,yBAAkD3C,KAAK,CAACqC,QAAN,CAAwB,KAAxB,CAAlD;AAAA;AAAA,MAAOO,iBAAP;AAAA,MAA0BC,oBAA1B;;AAEA,MAAMC,YAAY,GAAGzC,kBAAkB,CAAC;AAAA,WAAMkC,eAAe,CAAC,KAAD,CAArB;AAAA,GAAD,EAA+B,EAA/B,EAAmCjC,kBAAkB,CAAC;AAAA,WAAMiC,eAAe,CAAC,KAAD,CAArB;AAAA,GAAD,CAArD,CAAvC;AAEAvC,EAAAA,KAAK,CAAC+C,SAAN,CAAgB,YAAM;AACpB,KAACT,YAAD,IAAiBO,oBAAoB,CAAC,KAAD,CAArC;AACD,GAFD,EAEG,CAACP,YAAD,CAFH;AAIAtC,EAAAA,KAAK,CAAC+C,SAAN,CAAgB,YAAM;AACpB5B,IAAAA,QAAQ,IAAIoB,eAAe,CAAC,KAAD,CAA3B;AACD,GAFD,EAEG,CAACpB,QAAD,CAFH;AAIAnB,EAAAA,KAAK,CAAC+C,SAAN,CAAgB,YAAM;AACpBN,IAAAA,iBAAiB,CAACN,KAAK,IAAI,EAAV,CAAjB;AACD,GAFD,EAEG,CAACA,KAAD,CAFH;;AAIA,MAAMa,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,MAAD,EAAsB;AAC9C;AACA7B,IAAAA,OAAO,CAAC6B,MAAD,CAAP;AACD,GAHD;AAKA;AACF;AACA;AACA;;;AACE,MAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,YAAQd,IAAI,CAACe,IAAb;AACE,WAAK,MAAL;AACE,4BACE,KAAC,UAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AACY,UAAA,KAAK,EAAC,UADlB;AAEY,UAAA,MAAM,EAAE,gBAACC,KAAD,EAAgB;AACtBb,YAAAA,eAAe,CAAC,CAACD,YAAF,CAAf;;AACA,gBAAI,CAAAc,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,MAAkB,CAAtB,EAAyB;AACvBR,cAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD;AACF,WAPb;AAQY,UAAA,QAAQ,EAAE1B,QARtB;AAAA,oBASGD;AATH,UADF;;AAaF,WAAK,MAAL;AACE,YAAMoC,KAAK,GAAGlB,IAAI,CAACmB,SAAL,IAAkB,EAACf,cAAD,aAACA,cAAD,eAACA,cAAc,CAAEgB,MAAjB,CAAlB,GACVpB,IAAI,CAACkB,KADK,GAEVrC,KAAK,CAACwC,MAAN,CAAa,UAAAC,CAAC;AAAA,iBAAIlB,cAAc,CAACmB,QAAf,CAAwBD,CAAC,CAACvB,KAA1B,CAAJ;AAAA,SAAd,EAAoDyB,GAApD,CAAwD,UAAAF,CAAC;AAAA;;AAAA,oCAAIA,CAAC,CAACG,YAAN,6DAAsBH,CAAC,CAACvB,KAAxB;AAAA,SAAzD,EAAwF2B,IAAxF,CAA6F,IAA7F,CAFJ;AAGA,YAAMC,GAAG,aAAM5C,QAAQ,IAAI,UAAlB,cAAgCmB,YAAY,IAAI,UAAhD,cAA8DJ,SAA9D,CAAT;AACA,4BAAO,KAAC,yBAAD;AAA2B,UAAA,QAAQ,EAAE,CAACf,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAAtD;AAC2B,UAAA,SAAS,EAAE4C,GADtC;AAE2B,UAAA,WAAW,EAAE3D,yBAFxC;AAG2B,UAAA,SAAS,EAAE,mBAAA4D,CAAC,EAAI;AACd,gBAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCD,cAAAA,CAAC,CAACE,cAAF;AACAF,cAAAA,CAAC,CAACG,eAAF;AACA5B,cAAAA,eAAe,CAAC,CAACD,YAAF,CAAf;AACAO,cAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD;AACF,WAV5B;AAW2B,UAAA,OAAO,EAAE;AAAA,mBAAM,CAAC1B,QAAD,IAAaoB,eAAe,CAAC,CAACD,YAAF,CAAlC;AAAA,WAXpC;AAAA,iCAYL,MAAC,yBAAD;AAAA,uBACGpB,IAAI,iBAAI,KAAC,sBAAD;AAAA,wBAAyBA;AAAzB,cADX,eAEE,KAAC,sBAAD;AAAA,wBAAyBoC;AAAzB,cAFF,eAGE,KAAC,uBAAD;AAAA,wBAEIhB,YAAY,gBACR,KAAC,WAAD;AAAa,gBAAA,IAAI,EAAC;AAAlB,gBADQ,gBAER,KAAC,aAAD;AAAe,gBAAA,IAAI,EAAC;AAApB;AAJR,cAHF;AAAA;AAZK,UAAP;AApBJ;AA6CD,GA9CD;;AAgDA,sBACE,MAAC,OAAD;AAAS,IAAA,SAAS,EAAEJ,SAApB;AAA+B,IAAA,GAAG,EAAEY,YAApC;AAAA,eACGI,YAAY,EADf,eAEE,KAAC,eAAD;AACE,MAAA,kBAAkB,EAAE;AAClB7B,QAAAA,SAAS,EAAEA,SADO;AAElBC,QAAAA,MAAM,EAAEA,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAa,YAAM,CACxB,CAHiB;AAIlBC,QAAAA,WAAW,EAAEA,WAJK;AAKlBC,QAAAA,aAAa,EAAEA,aALG;AAMlB4C,QAAAA,aAAa,EAAEpB,iBANG;AAOlBlB,QAAAA,WAAW,EAAEA,WAPK;AAQlBL,QAAAA,UAAU,EAAEA,UARM;AASlBC,QAAAA,aAAa,EAAEA,aATG;AAUlBK,QAAAA,UAAU,EAAEA,UAVM;AAWlBC,QAAAA,UAAU,EAAEA,UAXM;AAYlBC,QAAAA,SAAS,EAAEA,SAZO;AAalBhB,QAAAA,KAAK,EAAEA;AAbW,OADtB;AAgBE,MAAA,OAAO,EAAEyB,OAhBX;AAiBE,MAAA,UAAU,EAAEC,UAjBd;AAkBE,MAAA,IAAI,EAAEhB,IAlBR;AAmBE,MAAA,KAAK,EAAEC,KAnBT;AAoBE,MAAA,SAAS,EAAEC,SApBb;AAqBE,MAAA,MAAM,EAAES,YArBV;AAsBE,MAAA,SAAS,EAAEC,eAtBb;AAuBE,MAAA,OAAO,EAAEK,iBAvBX;AAwBE,MAAA,MAAM,EAAC,EAxBT;AAyBE,MAAA,cAAc,EAAER,IAAI,CAACe,IAAL,KAAc,MAAd,IAAwB9B,SAAS,KAAK,QAAtC,GAAiD,EAAjD,GAAsDmB,cAzBxE;AA0BE,MAAA,iBAAiB,EAAEC,iBA1BrB;AA2BE,MAAA,kBAAkB,EAAC,YA3BrB;AA4BE,MAAA,QAAQ,EAAE,IA5BZ;AA6BE,MAAA,EAAE,EAAC;AA7BL,MAFF;AAAA,IADF;AAoCD,CAvID;;AAyIA,eAAezB,cAAf","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  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\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                          ...rest\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\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\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\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 variant=\"secondary\"\n                      shape=\"circular\"\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                                          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        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        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=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -1,10 +1,9 @@
 import { Size } from '../types';
 import { DropdownItem } from './DropdownContent';
-export interface DropdownButtonProps {
+export interface DropdownButtonBaseProps {
     items: DropdownItem[];
+    value?: string[];
     onClick: (value: string[]) => void;
-    icon?: React.ReactNode;
-    width?: string;
     disabled?: boolean;
     size?: Size;
     itemsType?: 'normal' | 'radio' | 'checkbox';
@@ -15,8 +14,20 @@ export interface DropdownButtonProps {
     actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
     multiSelect?: boolean;
     scrollable?: boolean;
-    pinTopItem?: boolean;
-    alignLeft?: boolean;
     maxHeight?: string;
+    pinTopItem?: boolean;
     className?: string;
+    icon?: React.ReactNode;
+    width?: string;
+    alignLeft?: boolean;
 }
+export declare type IconDropdownButtonProps = DropdownButtonBaseProps & {
+    type: 'icon';
+    icon: React.ReactNode;
+};
+export declare type TextDropdownButtonProps = DropdownButtonBaseProps & {
+    type: 'text';
+    label?: string;
+    keepLabel?: boolean;
+};
+export declare type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;