@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Dropdown/DropdownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.cjs","names":["React","_interopRequireWildcard","require","_Button","_DropdownContent","_interopRequireDefault","_styledComponents","_common","_CommonStyling","_icons","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DropdownButtonContainer","exports","styled","div","_taggedTemplateLiteral2","DropdownButton","forwardRef","_ref","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","dataTestId","rest","_objectWithoutProperties2","dropdownOpen","setDropdownOpen","useState","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","jsx","IconButton","variant","shape","role","tooltip","concat","event","detail","children","label","keepLabel","length","filter","includes","map","_a$displayLabel","displayLabel","join","cls","DropdownButtonTextWrapper","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","preventDefault","stopPropagation","jsxs","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextStyles","DropdownButtonTextArrow","SystemIcons","ArrowDropUp","ArrowDropDown","ariaRolesType","customizationProps","onValueUpdate","onActiveDescendantChanged","isOpen","setIsOpen","outline","messageOnNoResults","isButton","_default"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {IconButton} from '../Button';\r\nimport DropdownContent from './DropdownContent';\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {DropdownButtonProps} from './DropdownButtonTypes';\r\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\r\nimport {\r\n  DropdownButtonTextArrow,\r\n  DropdownButtonTextContent,\r\n  DropdownButtonTextIcon,\r\n  DropdownButtonTextStyles,\r\n  DropdownButtonTextWrapper\r\n} from './CommonStyling';\r\nimport {SystemIcons} from '../icons';\r\n\r\nexport const DropdownButtonContainer = styled.div`\r\n  display: inline-block;\r\n`;\r\n\r\nconst DropdownButton = React.forwardRef( ({\r\n                          items,\r\n                          icon,\r\n                          disabled,\r\n                          onClick,\r\n                          itemsType = 'normal',\r\n                          action,\r\n                          actionLabel = '',\r\n                          actionVariant,\r\n                          actionIcon,\r\n                          actionLoading,\r\n                          size,\r\n                          width,\r\n                          alignLeft,\r\n                          multiSelect = false,\r\n                          scrollable = false,\r\n                          pinTopItem = false,\r\n                          maxHeight,\r\n                          className,\r\n                          value,\r\n                          id,\r\n                          dataTestId,\r\n                          ...rest\r\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  // Globally used variables within the view.\r\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\r\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\r\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\r\n\r\n  React.useEffect(() => {\r\n    !dropdownOpen && setKeyboardNavigated(false)\r\n  }, [dropdownOpen]);\r\n\r\n  React.useEffect(() => {\r\n    disabled && setDropdownOpen(false)\r\n  }, [disabled]);\r\n\r\n  React.useEffect(() => {\r\n    setSelectedValues(value || []);\r\n  }, [value]);\r\n\r\n  const handleValueSelect = (values: string[]) => {\r\n    // Do all required actions\r\n    onClick(values);\r\n  };\r\n\r\n  /**\r\n   * Renders Icon Button dropdown menu.\r\n   * @returns HTML View for the Icon button dropdown menu.\r\n   */\r\n  const renderButton = () => {\r\n    switch (rest.type) {\r\n      case 'icon':\r\n        return (\r\n          <IconButton ref={ref}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      role=\"button\"\r\n                      tooltip={rest.tooltip}\r\n                      id={id}\r\n                      aria-expanded={dropdownOpen}\r\n                      data-testid={dataTestId}\r\n                      aria-controls={`${id}_dropdowncontent`}\r\n                      aria-activedescendant={activeDescendant}\r\n                      \r\n                      action={(event: any) => {\r\n                        setDropdownOpen(!dropdownOpen);\r\n                        if (event?.detail !== 1) {\r\n                          setKeyboardNavigated(true);\r\n                        }\r\n                      }}\r\n                      disabled={disabled}>\r\n            {icon}\r\n          </IconButton>\r\n        );\r\n      case 'text':\r\n        const label = rest.keepLabel || !selectedValues?.length\r\n          ? rest.label\r\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\r\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\r\n        return <DropdownButtonTextWrapper tabIndex={!disabled ? 0 : -1}\r\n                                          className={cls}\r\n                                          role=\"button\"\r\n                                          id={id}\r\n                                          data-testid={dataTestId}\r\n                                          aria-expanded={dropdownOpen}\r\n                                          aria-controls={`${id}_dropdowncontent`}\r\n                                          aria-activedescendant={activeDescendant}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyDown={e => {\r\n                                            if (e.key === 'Enter' || e.key === ' ') {\r\n                                              e.preventDefault();\r\n                                              e.stopPropagation();\r\n                                              setDropdownOpen(!dropdownOpen);\r\n                                              setKeyboardNavigated(true);\r\n                                            }\r\n                                          }}\r\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\r\n          <DropdownButtonTextContent>\r\n            {icon && <DropdownButtonTextIcon>{icon}</DropdownButtonTextIcon>}\r\n            <DropdownButtonTextStyles>{label}</DropdownButtonTextStyles>\r\n            <DropdownButtonTextArrow>\r\n              {\r\n                dropdownOpen\r\n                  ? <SystemIcons.ArrowDropUp aria-label='Expanded' size=\"24px\"/>\r\n                  : <SystemIcons.ArrowDropDown aria-label='Collapsed' size=\"24px\"/>\r\n              }\r\n            </DropdownButtonTextArrow>\r\n          </DropdownButtonTextContent>\r\n        </DropdownButtonTextWrapper>\r\n    }\r\n  };\r\n\r\n  return (\r\n    <DropdownButtonContainer className={className} ref={containerRef}> \r\n      {renderButton()}\r\n      <DropdownContent\r\n        ref={dropdownRef}\r\n        ariaRolesType=\"menu\"\r\n        containerRef={containerRef}\r\n        customizationProps={{\r\n          itemsType: itemsType,\r\n          action: action ?? (() => {\r\n          }),\r\n          actionLabel: actionLabel,\r\n          actionVariant: actionVariant,\r\n          onValueUpdate: handleValueSelect,\r\n          multiSelect: multiSelect,\r\n          actionIcon: actionIcon,\r\n          actionLoading: actionLoading,\r\n          scrollable: scrollable,\r\n          pinTopItem: pinTopItem,\r\n          maxHeight: maxHeight,\r\n          items: items\r\n        }}\r\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n        focused={focused}\r\n        setFocused={setFocused}\r\n        size={size}\r\n        width={width}\r\n        alignLeft={alignLeft}\r\n        isOpen={dropdownOpen}\r\n        setIsOpen={setDropdownOpen}\r\n        outline={keyboardNavigated}\r\n        filter=\"\"\r\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\r\n        setSelectedValues={setSelectedValues}\r\n        messageOnNoResults=\"No results\"\r\n        isButton={true}\r\n        id={`${id}_dropdowncontent`}\r\n      />\r\n    </DropdownButtonContainer>\r\n  );\r\n});\r\n\r\nexport default DropdownButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropdownButton.cjs","names":["React","_interopRequireWildcard","require","_Button","_DropdownContent","_interopRequireDefault","_styledComponents","_common","_CommonStyling","_icons","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DropdownButtonContainer","exports","styled","div","DropdownButton","forwardRef","_ref","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","dataTestId","rest","_objectWithoutProperties2","dropdownOpen","setDropdownOpen","useState","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","jsx","IconButton","variant","shape","role","tooltip","event","detail","children","label","keepLabel","length","filter","includes","map","displayLabel","join","cls","DropdownButtonTextWrapper","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","preventDefault","stopPropagation","jsxs","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextStyles","DropdownButtonTextArrow","SystemIcons","ArrowDropUp","ArrowDropDown","ariaRolesType","customizationProps","onValueUpdate","onActiveDescendantChanged","isOpen","setIsOpen","outline","messageOnNoResults","isButton","_default"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {IconButton} from '../Button';\r\nimport DropdownContent from './DropdownContent';\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {DropdownButtonProps} from './DropdownButtonTypes';\r\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\r\nimport {\r\n  DropdownButtonTextArrow,\r\n  DropdownButtonTextContent,\r\n  DropdownButtonTextIcon,\r\n  DropdownButtonTextStyles,\r\n  DropdownButtonTextWrapper\r\n} from './CommonStyling';\r\nimport {SystemIcons} from '../icons';\r\n\r\nexport const DropdownButtonContainer = styled.div`\r\n  display: inline-block;\r\n`;\r\n\r\nconst DropdownButton = React.forwardRef( ({\r\n                          items,\r\n                          icon,\r\n                          disabled,\r\n                          onClick,\r\n                          itemsType = 'normal',\r\n                          action,\r\n                          actionLabel = '',\r\n                          actionVariant,\r\n                          actionIcon,\r\n                          actionLoading,\r\n                          size,\r\n                          width,\r\n                          alignLeft,\r\n                          multiSelect = false,\r\n                          scrollable = false,\r\n                          pinTopItem = false,\r\n                          maxHeight,\r\n                          className,\r\n                          value,\r\n                          id,\r\n                          dataTestId,\r\n                          ...rest\r\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  // Globally used variables within the view.\r\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\r\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\r\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\r\n\r\n  React.useEffect(() => {\r\n    !dropdownOpen && setKeyboardNavigated(false)\r\n  }, [dropdownOpen]);\r\n\r\n  React.useEffect(() => {\r\n    disabled && setDropdownOpen(false)\r\n  }, [disabled]);\r\n\r\n  React.useEffect(() => {\r\n    setSelectedValues(value || []);\r\n  }, [value]);\r\n\r\n  const handleValueSelect = (values: string[]) => {\r\n    // Do all required actions\r\n    onClick(values);\r\n  };\r\n\r\n  /**\r\n   * Renders Icon Button dropdown menu.\r\n   * @returns HTML View for the Icon button dropdown menu.\r\n   */\r\n  const renderButton = () => {\r\n    switch (rest.type) {\r\n      case 'icon':\r\n        return (\r\n          <IconButton ref={ref}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      role=\"button\"\r\n                      tooltip={rest.tooltip}\r\n                      id={id}\r\n                      aria-expanded={dropdownOpen}\r\n                      data-testid={dataTestId}\r\n                      aria-controls={`${id}_dropdowncontent`}\r\n                      aria-activedescendant={activeDescendant}\r\n                      \r\n                      action={(event: any) => {\r\n                        setDropdownOpen(!dropdownOpen);\r\n                        if (event?.detail !== 1) {\r\n                          setKeyboardNavigated(true);\r\n                        }\r\n                      }}\r\n                      disabled={disabled}>\r\n            {icon}\r\n          </IconButton>\r\n        );\r\n      case 'text':\r\n        const label = rest.keepLabel || !selectedValues?.length\r\n          ? rest.label\r\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\r\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\r\n        return <DropdownButtonTextWrapper tabIndex={!disabled ? 0 : -1}\r\n                                          className={cls}\r\n                                          role=\"button\"\r\n                                          id={id}\r\n                                          data-testid={dataTestId}\r\n                                          aria-expanded={dropdownOpen}\r\n                                          aria-controls={`${id}_dropdowncontent`}\r\n                                          aria-activedescendant={activeDescendant}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyDown={e => {\r\n                                            if (e.key === 'Enter' || e.key === ' ') {\r\n                                              e.preventDefault();\r\n                                              e.stopPropagation();\r\n                                              setDropdownOpen(!dropdownOpen);\r\n                                              setKeyboardNavigated(true);\r\n                                            }\r\n                                          }}\r\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\r\n          <DropdownButtonTextContent>\r\n            {icon && <DropdownButtonTextIcon>{icon}</DropdownButtonTextIcon>}\r\n            <DropdownButtonTextStyles>{label}</DropdownButtonTextStyles>\r\n            <DropdownButtonTextArrow>\r\n              {\r\n                dropdownOpen\r\n                  ? <SystemIcons.ArrowDropUp aria-label='Expanded' size=\"24px\"/>\r\n                  : <SystemIcons.ArrowDropDown aria-label='Collapsed' size=\"24px\"/>\r\n              }\r\n            </DropdownButtonTextArrow>\r\n          </DropdownButtonTextContent>\r\n        </DropdownButtonTextWrapper>\r\n    }\r\n  };\r\n\r\n  return (\r\n    <DropdownButtonContainer className={className} ref={containerRef}> \r\n      {renderButton()}\r\n      <DropdownContent\r\n        ref={dropdownRef}\r\n        ariaRolesType=\"menu\"\r\n        containerRef={containerRef}\r\n        customizationProps={{\r\n          itemsType: itemsType,\r\n          action: action ?? (() => {\r\n          }),\r\n          actionLabel: actionLabel,\r\n          actionVariant: actionVariant,\r\n          onValueUpdate: handleValueSelect,\r\n          multiSelect: multiSelect,\r\n          actionIcon: actionIcon,\r\n          actionLoading: actionLoading,\r\n          scrollable: scrollable,\r\n          pinTopItem: pinTopItem,\r\n          maxHeight: maxHeight,\r\n          items: items\r\n        }}\r\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n        focused={focused}\r\n        setFocused={setFocused}\r\n        size={size}\r\n        width={width}\r\n        alignLeft={alignLeft}\r\n        isOpen={dropdownOpen}\r\n        setIsOpen={setDropdownOpen}\r\n        outline={keyboardNavigated}\r\n        filter=\"\"\r\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\r\n        setSelectedValues={setSelectedValues}\r\n        messageOnNoResults=\"No results\"\r\n        isButton={true}\r\n        id={`${id}_dropdowncontent`}\r\n      />\r\n    </DropdownButtonContainer>\r\n  );\r\n});\r\n\r\nexport default DropdownButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Dropdown/DropdownButton.d.ts

@@ -1,11 +1,11 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { DropdownButtonProps } from './DropdownButtonTypes';
-export declare const DropdownButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default DropdownButton;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom types.
+ */
+import { DropdownButtonProps } from './DropdownButtonTypes';
+export declare const DropdownButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default DropdownButton;

package/dist/Dropdown/DropdownButton.js

@@ -1,7 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 const _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.
  */
@@ -22,7 +20,9 @@ import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } fro
 import { DropdownButtonTextArrow, DropdownButtonTextContent, DropdownButtonTextIcon, DropdownButtonTextStyles, DropdownButtonTextWrapper } from './CommonStyling';
 import { SystemIcons } from '../icons';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const DropdownButtonContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
+export const DropdownButtonContainer = styled.div`
+  display: inline-block;
+`;
 const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       items,
@@ -87,11 +87,11 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           id: id,
           "aria-expanded": dropdownOpen,
           "data-testid": dataTestId,
-          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-controls": `${id}_dropdowncontent`,
           "aria-activedescendant": activeDescendant,
           action: event => {
             setDropdownOpen(!dropdownOpen);
-            if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
+            if (event?.detail !== 1) {
               setKeyboardNavigated(true);
             }
           },
@@ -99,11 +99,8 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: icon
         });
       case 'text':
-        const label = rest.keepLabel || !(selectedValues !== null && selectedValues !== void 0 && selectedValues.length) ? rest.label : items.filter(a => selectedValues.includes(a.value)).map(a => {
-          var _a$displayLabel;
-          return (_a$displayLabel = a.displayLabel) !== null && _a$displayLabel !== void 0 ? _a$displayLabel : a.value;
-        }).join(', ');
-        const cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
+        const label = rest.keepLabel || !selectedValues?.length ? rest.label : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');
+        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;
         return /*#__PURE__*/_jsx(DropdownButtonTextWrapper, {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
@@ -111,7 +108,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           id: id,
           "data-testid": dataTestId,
           "aria-expanded": dropdownOpen,
-          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-controls": `${id}_dropdowncontent`,
           "aria-activedescendant": activeDescendant,
           onMouseDown: defaultOnMouseDownHandler,
           onKeyDown: e => {
@@ -150,7 +147,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
-        action: action !== null && action !== void 0 ? action : () => {},
+        action: action ?? (() => {}),
         actionLabel: actionLabel,
         actionVariant: actionVariant,
         onValueUpdate: handleValueSelect,
@@ -176,7 +173,7 @@ const DropdownButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       setSelectedValues: setSelectedValues,
       messageOnNoResults: "No results",
       isButton: true,
-      id: "".concat(id, "_dropdowncontent")
+      id: `${id}_dropdowncontent`
     })]
   });
 });

package/dist/Dropdown/DropdownButton.js.map

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

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -1,64 +1,63 @@
-/// <reference types="react" />
-import { Size, Testable } from '../types';
-import { DropdownItem } from './DropdownContent';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
-export interface DropdownButtonBaseProps extends Testable {
-    /** Optional. Id of the top level component, button or text wrapper, depending on 'type'. */
-    id?: string;
-    /** Required. Array of items to be shown in the dropdown. */
-    items: DropdownItem[];
-    /** Optional. Currently selected items. */
-    value?: string[];
-    /** Optional. Handler to be called, provides array of values of currently selected items. */
-    onClick: (value: string[]) => void;
-    /** Optional. If disabled user can not interact with the button. */
-    disabled?: boolean;
-    /** Optional. Size of the items in the dropdown content, does not affect button itself. */
-    size?: Size.Small | Size.Medium | Size.Large;
-    /** Optional. Type of the items to be shown in the dropdown. */
-    itemsType?: 'normal' | 'radio' | 'checkbox';
-    /** Optional. Handler of the extra action item to be shown in the dropdown content. */
-    action?: () => void;
-    /** Optional. Label of the extra action item to be shown in the dropdown content. */
-    actionLabel?: string;
-    /** Optional. Icon of the extra action item to be shown in the dropdown content. */
-    actionIcon?: React.ReactNode;
-    /** Optional. Loading state of the extra action item to be shown in the dropdown content. */
-    actionLoading?: boolean;
-    /** Optional. Button variant of the extra action item in the dropdown contnet. */
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    /** Optional. If set, then user can select multiple items in the dropdown. */
-    multiSelect?: boolean;
-    /** Optional. If set, then dropdown content is scrollable. */
-    scrollable?: boolean;
-    /** Optional. Maximum height of the dropdown content container. */
-    maxHeight?: string;
-    /** Optional. If this flag is set, multiselect flag is set and checkbox or radio item types are used, then
-     *  will show extra item in the top that will allow to 'Select all' items. */
-    pinTopItem?: boolean;
-    /** Optional. Custom classname to set on the top level container of the component */
-    className?: string;
-    /** Optional. Icon of the component, is required if type 'icon' is used. */
-    icon?: React.ReactNode;
-    /** Optional. Sets width of the dropdown container. */
-    width?: string;
-    /** Optional. If set, then dropdown content will be aligned with the left edge of the button, otherwise with the right edge. */
-    alignLeft?: boolean;
-}
-export type IconDropdownButtonProps = DropdownButtonBaseProps & {
-    /** Icon type of the dropdown button. */
-    type: 'icon';
-    /** Required. Icon to be shown with the component. */
-    icon: React.ReactNode;
-    /** Optional. Tooltip to be shown with the component. */
-    tooltip?: TooltipProps;
-};
-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. */
-    label?: string;
-    /** Optional. If set to true, then 'label' will be shown even if user selects items in the dropdown. */
-    keepLabel?: boolean;
-};
-export type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;
+import { Size, Testable } from '../types';
+import { DropdownItem } from './DropdownContent';
+import { TooltipProps } from "../Tooltips/TooltipTypes";
+export interface DropdownButtonBaseProps extends Testable {
+    /** Optional. Id of the top level component, button or text wrapper, depending on 'type'. */
+    id?: string;
+    /** Required. Array of items to be shown in the dropdown. */
+    items: DropdownItem[];
+    /** Optional. Currently selected items. */
+    value?: string[];
+    /** Optional. Handler to be called, provides array of values of currently selected items. */
+    onClick: (value: string[]) => void;
+    /** Optional. If disabled user can not interact with the button. */
+    disabled?: boolean;
+    /** Optional. Size of the items in the dropdown content, does not affect button itself. */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Optional. Type of the items to be shown in the dropdown. */
+    itemsType?: 'normal' | 'radio' | 'checkbox';
+    /** Optional. Handler of the extra action item to be shown in the dropdown content. */
+    action?: () => void;
+    /** Optional. Label of the extra action item to be shown in the dropdown content. */
+    actionLabel?: string;
+    /** Optional. Icon of the extra action item to be shown in the dropdown content. */
+    actionIcon?: React.ReactNode;
+    /** Optional. Loading state of the extra action item to be shown in the dropdown content. */
+    actionLoading?: boolean;
+    /** Optional. Button variant of the extra action item in the dropdown contnet. */
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    /** Optional. If set, then user can select multiple items in the dropdown. */
+    multiSelect?: boolean;
+    /** Optional. If set, then dropdown content is scrollable. */
+    scrollable?: boolean;
+    /** Optional. Maximum height of the dropdown content container. */
+    maxHeight?: string;
+    /** Optional. If this flag is set, multiselect flag is set and checkbox or radio item types are used, then
+     *  will show extra item in the top that will allow to 'Select all' items. */
+    pinTopItem?: boolean;
+    /** Optional. Custom classname to set on the top level container of the component */
+    className?: string;
+    /** Optional. Icon of the component, is required if type 'icon' is used. */
+    icon?: React.ReactNode;
+    /** Optional. Sets width of the dropdown container. */
+    width?: string;
+    /** Optional. If set, then dropdown content will be aligned with the left edge of the button, otherwise with the right edge. */
+    alignLeft?: boolean;
+}
+export type IconDropdownButtonProps = DropdownButtonBaseProps & {
+    /** Icon type of the dropdown button. */
+    type: 'icon';
+    /** Required. Icon to be shown with the component. */
+    icon: React.ReactNode;
+    /** Optional. Tooltip to be shown with the component. */
+    tooltip?: TooltipProps;
+};
+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. */
+    label?: string;
+    /** Optional. If set to true, then 'label' will be shown even if user selects items in the dropdown. */
+    keepLabel?: boolean;
+};
+export type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;