@datarobot/design-system 28.2.2

package/cjs/dropdown-menu/dropdown-selectbox-trigger.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _faChevronDown = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _tooltip = require("../tooltip");
+var _truncateWithTooltip = require("../truncate-with-tooltip");
+var _types = require("./types");
+var _button = require("../button");
+var _dropdownItemTitle = _interopRequireDefault(require("./dropdown-item-title"));
+var _formField = require("../form-field");
+var _useDropdownTrigger = require("./use-dropdown-trigger");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DefaultTriggerContent = function ({
+  options = [],
+  selectedItem,
+  defaultTriggerText,
+  isLarge = false
+}) {
+  if (selectedItem && isLarge) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownItemTitle.default, {
+      option: selectedItem
+    });
+  }
+  const triggerContent = getGenericTriggerContent(selectedItem, options);
+  if (triggerContent) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "selected-item-details",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: triggerContent
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+    className: "placeholder",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: defaultTriggerText
+    })
+  });
+};
+function getGenericTriggerContent(selectedItem, options) {
+  const selectedOptions = options.filter(option => option.isChecked).map(option => option.title);
+  if (selectedItem) {
+    return selectedItem.title;
+  }
+  if (selectedOptions.length) {
+    return selectedOptions.join(', ');
+  }
+  return null;
+}
+const DropdownSelectboxTrigger = /*#__PURE__*/(0, _react.forwardRef)(({
+  hasErrored,
+  hasSuccess,
+  hasWarnings,
+  isOpen,
+  isDisabled,
+  isOptional,
+  optionalLabelText,
+  onClick,
+  options,
+  selectedItem,
+  triggerOptions,
+  isSectioned = false,
+  selectbox
+}, ref) => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const {
+    defaultTriggerText,
+    labelText,
+    helperText,
+    triggerId,
+    triggerTestId,
+    triggerTooltip,
+    triggerAriaLabelText,
+    triggerTooltipPlacement,
+    triggerDynamicContent,
+    triggerOnClickHandler = () => {},
+    triggerClassName,
+    triggerTooltipDocLink,
+    required,
+    dropdownContentId,
+    triggerTabIndex = 0
+  } = triggerOptions || {};
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    onMouseClick,
+    onKeyDown
+  } = (0, _useDropdownTrigger.useDropdownTrigger)({
+    onClick,
+    triggerOnClickHandler,
+    isOpen
+  });
+  const buttonAriaLabelledBy = [labelText ? (0, _formField.getFormFieldLabelId)(triggerId) : '',
+  // announce label if exists
+  `selected-item-${triggerId}` // announce selected item content
+  ].filter(Boolean).join(' ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "selectbox",
+    children: [labelText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_formField.FormFieldLabel, {
+      id: triggerId,
+      label: labelText,
+      isOptional: isOptional,
+      optionalLabelText: optionalLabelText ?? t('Optional'),
+      isDisabled: isDisabled,
+      isRequired: required
+    }) : null, helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('helper-text', isDisabled && 'disabled'),
+      children: helperText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: _button.BUTTON_TYPES.BUTTON,
+      ref: ref,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onMouseClick,
+      onKeyDown: onKeyDown,
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      "aria-label": triggerAriaLabelText ?? undefined,
+      "aria-labelledby": buttonAriaLabelledBy
+      // used by a screen reader to announce menu content if menu has no focus (opened with mouse click)
+      ,
+      ...(isOpen && {
+        'aria-owns': dropdownContentId,
+        'aria-controls': dropdownContentId
+      }),
+      disabled: isDisabled,
+      "test-id": triggerTestId,
+      id: triggerId,
+      className: (0, _classnames.default)('dropdown-trigger dropdown-selectbox-trigger', triggerClassName, {
+        active: isOpen,
+        sm: selectbox?.size === _types.DROPDOWN_MENU_SELECTBOX_SIZES.SM,
+        lg: selectbox?.size === _types.DROPDOWN_MENU_SELECTBOX_SIZES.LG,
+        xl: selectbox?.size === _types.DROPDOWN_MENU_SELECTBOX_SIZES.XL,
+        error: hasErrored,
+        success: hasSuccess,
+        warnings: hasWarnings,
+        sectioned: isSectioned
+      }),
+      tabIndex: triggerTabIndex,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+        content: triggerTooltip,
+        placement: triggerTooltipPlacement,
+        delayType: _tooltip.TOOLTIP_DELAY_TYPES.SLOW,
+        docsLink: triggerTooltipDocLink,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          id: `selected-item-${triggerId}`,
+          className: "selected-item",
+          children: [typeof triggerDynamicContent === 'function' ? triggerDynamicContent({
+            isOpen
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultTriggerContent, {
+            options: options,
+            selectedItem: selectedItem,
+            defaultTriggerText: defaultTriggerText,
+            isLarge: selectbox?.size === _types.DROPDOWN_MENU_SELECTBOX_SIZES.XL || selectbox?.size === _types.DROPDOWN_MENU_SELECTBOX_SIZES.LG
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+            icon: _faChevronDown.faChevronDown,
+            className: (0, _classnames.default)('trigger-chevron-down', {
+              expanded: isOpen
+            })
+          })]
+        })
+      })
+    })]
+  });
+});
+DropdownSelectboxTrigger.displayName = 'DropdownSelectboxTrigger';
+var _default = exports.default = DropdownSelectboxTrigger;

package/cjs/dropdown-menu/dropdown-trigger.d.ts

@@ -0,0 +1,19 @@
+import React, { MouseEvent, KeyboardEvent } from 'react';
+import { DropdownSelectbox, DropdownSelectboxTriggerOptions, DropdownMenuOption, SelectboxSelectedItem } from './types';
+export type DropdownTriggerProps = {
+    hasErrored?: boolean;
+    hasSuccess?: boolean;
+    hasWarnings?: boolean;
+    isDisabled?: boolean;
+    selectbox?: DropdownSelectbox;
+    isOpen?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    selectedItem?: SelectboxSelectedItem;
+    options: Array<DropdownMenuOption>;
+    triggerOptions?: DropdownSelectboxTriggerOptions;
+    isSectioned: boolean;
+    isOptional?: boolean;
+    optionalLabelText?: string;
+};
+declare const DropdownTrigger: React.ForwardRefExoticComponent<DropdownTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default DropdownTrigger;

package/cjs/dropdown-menu/dropdown-trigger.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dropdownSelectboxTrigger = _interopRequireDefault(require("./dropdown-selectbox-trigger"));
+var _dropdownMenuTrigger = _interopRequireDefault(require("./dropdown-menu-trigger"));
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DropdownTrigger = /*#__PURE__*/(0, _react.forwardRef)(({
+  onClick,
+  isOpen,
+  isDisabled,
+  hasSuccess,
+  hasWarnings,
+  hasErrored,
+  options,
+  selectedItem,
+  selectbox,
+  triggerOptions,
+  isSectioned = false,
+  isOptional = false,
+  optionalLabelText
+}, ref) => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return selectbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownSelectboxTrigger.default, {
+    ref: ref,
+    onClick: onClick,
+    isOpen: isOpen,
+    options: options,
+    isDisabled: isDisabled,
+    hasErrored: hasErrored,
+    hasSuccess: hasSuccess,
+    hasWarnings: hasWarnings,
+    selectedItem: selectedItem,
+    triggerOptions: triggerOptions,
+    selectbox: selectbox,
+    isSectioned: isSectioned,
+    isOptional: isOptional,
+    optionalLabelText: optionalLabelText ?? t('Optional')
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenuTrigger.default, {
+    ref: ref,
+    onClick: onClick,
+    isOpen: isOpen,
+    isDisabled: isDisabled,
+    hasErrored: hasErrored,
+    hasSuccess: hasSuccess,
+    hasWarnings: hasWarnings,
+    selectedItem: selectedItem,
+    triggerOptions: triggerOptions
+  });
+});
+DropdownTrigger.displayName = 'DropdownTrigger';
+var _default = exports.default = DropdownTrigger;

package/cjs/dropdown-menu/index.d.ts

@@ -0,0 +1,26 @@
+import DropdownMenu, { DropdownMenuProps, DropdownMenuSelectbox } from './dropdown-menu';
+import DropdownItem, { DropdownItemProps } from './dropdown-item';
+import DropdownItemContent, { DropdownItemContentProps } from './dropdown-item-content';
+import DropdownTrigger, { DropdownTriggerProps } from './dropdown-trigger';
+import DropdownMenuTrigger, { DropdownMenuTriggerProps } from './dropdown-menu-trigger';
+import DropdownSelectboxTrigger, { DropdownSelectboxTriggerProps } from './dropdown-selectbox-trigger';
+import DropdownContentList, { DropdownSectionedContentList } from './dropdown-content-list';
+import DropdownMenuContent, { DropdownMenuContentProps, getMenuTreeNavigationAdapter } from './dropdown-menu-content';
+import MenuTrigger, { MenuTriggerProps } from './menu-trigger';
+import { DROPDOWN_MENU_SELECTBOX_SIZES, DropdownMenuSelectboxSize, DropdownMenuOption, DropdownFiles, DropdownSelectbox, LinkComponentType } from './types';
+declare const DROPDOWN_MENU_PLACEMENT_TYPES: {
+    readonly BOTTOM_END: "bottom-end";
+    readonly BOTTOM_START: "bottom-start";
+    readonly BOTTOM: "bottom";
+    readonly LEFT_END: "left-end";
+    readonly LEFT_START: "left-start";
+    readonly LEFT: "left";
+    readonly RIGHT_END: "right-end";
+    readonly RIGHT_START: "right-start";
+    readonly RIGHT: "right";
+    readonly TOP_END: "top-end";
+    readonly TOP_START: "top-start";
+    readonly TOP: "top";
+};
+export type { DropdownMenuSelectbox, DropdownMenuOption, DropdownFiles, DropdownSelectbox, DropdownMenuProps, DropdownItemProps, DropdownItemContentProps, DropdownTriggerProps, DropdownMenuTriggerProps, DropdownSelectboxTriggerProps, DropdownMenuContentProps, MenuTriggerProps, DropdownMenuSelectboxSize, LinkComponentType, };
+export { DropdownMenu, DropdownMenuContent, DropdownItem, DropdownTrigger, DropdownItemContent, DropdownMenuTrigger, MenuTrigger, DropdownContentList, DropdownSelectboxTrigger, DropdownSectionedContentList, DROPDOWN_MENU_SELECTBOX_SIZES, DROPDOWN_MENU_PLACEMENT_TYPES, getMenuTreeNavigationAdapter, };

package/cjs/dropdown-menu/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DROPDOWN_MENU_PLACEMENT_TYPES = void 0;
+Object.defineProperty(exports, "DROPDOWN_MENU_SELECTBOX_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _types.DROPDOWN_MENU_SELECTBOX_SIZES;
+  }
+});
+Object.defineProperty(exports, "DropdownContentList", {
+  enumerable: true,
+  get: function () {
+    return _dropdownContentList.default;
+  }
+});
+Object.defineProperty(exports, "DropdownItem", {
+  enumerable: true,
+  get: function () {
+    return _dropdownItem.default;
+  }
+});
+Object.defineProperty(exports, "DropdownItemContent", {
+  enumerable: true,
+  get: function () {
+    return _dropdownItemContent.default;
+  }
+});
+Object.defineProperty(exports, "DropdownMenu", {
+  enumerable: true,
+  get: function () {
+    return _dropdownMenu.default;
+  }
+});
+Object.defineProperty(exports, "DropdownMenuContent", {
+  enumerable: true,
+  get: function () {
+    return _dropdownMenuContent.default;
+  }
+});
+Object.defineProperty(exports, "DropdownMenuTrigger", {
+  enumerable: true,
+  get: function () {
+    return _dropdownMenuTrigger.default;
+  }
+});
+Object.defineProperty(exports, "DropdownSectionedContentList", {
+  enumerable: true,
+  get: function () {
+    return _dropdownContentList.DropdownSectionedContentList;
+  }
+});
+Object.defineProperty(exports, "DropdownSelectboxTrigger", {
+  enumerable: true,
+  get: function () {
+    return _dropdownSelectboxTrigger.default;
+  }
+});
+Object.defineProperty(exports, "DropdownTrigger", {
+  enumerable: true,
+  get: function () {
+    return _dropdownTrigger.default;
+  }
+});
+Object.defineProperty(exports, "MenuTrigger", {
+  enumerable: true,
+  get: function () {
+    return _menuTrigger.default;
+  }
+});
+Object.defineProperty(exports, "getMenuTreeNavigationAdapter", {
+  enumerable: true,
+  get: function () {
+    return _dropdownMenuContent.getMenuTreeNavigationAdapter;
+  }
+});
+var _dropdownMenu = _interopRequireDefault(require("./dropdown-menu"));
+var _dropdownItem = _interopRequireDefault(require("./dropdown-item"));
+var _dropdownItemContent = _interopRequireDefault(require("./dropdown-item-content"));
+var _dropdownTrigger = _interopRequireDefault(require("./dropdown-trigger"));
+var _dropdownMenuTrigger = _interopRequireDefault(require("./dropdown-menu-trigger"));
+var _dropdownSelectboxTrigger = _interopRequireDefault(require("./dropdown-selectbox-trigger"));
+var _dropdownContentList = _interopRequireWildcard(require("./dropdown-content-list"));
+var _dropdownMenuContent = _interopRequireWildcard(require("./dropdown-menu-content"));
+var _menuTrigger = _interopRequireDefault(require("./menu-trigger"));
+var _types = require("./types");
+var _dropdown = require("../dropdown");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DROPDOWN_MENU_PLACEMENT_TYPES = exports.DROPDOWN_MENU_PLACEMENT_TYPES = _dropdown.DROPDOWN_PLACEMENT_TYPES;

package/cjs/dropdown-menu/menu-trigger.d.ts

@@ -0,0 +1,10 @@
+import './menu-trigger.less';
+export type MenuTriggerProps = {
+    isOpen: boolean;
+    ariaTextClosedState?: string;
+    ariaTextOpenedState?: string;
+    testId?: string;
+    triggerText?: string;
+};
+declare const MenuTrigger: ({ isOpen, ariaTextClosedState, ariaTextOpenedState, triggerText, testId, }: MenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuTrigger;

package/cjs/dropdown-menu/menu-trigger.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
+var _faBars = require("@fortawesome/free-solid-svg-icons/faBars");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MenuTrigger = ({
+  isOpen,
+  ariaTextClosedState = '',
+  ariaTextOpenedState = '',
+  triggerText,
+  testId = ''
+}) => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const triggerTextWithDefault = typeof triggerText === 'undefined' ? t('Menu') : triggerText;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "menu-trigger",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: isOpen ? _faXmark.faXmark : _faBars.faBars,
+      "aria-label": isOpen ? ariaTextOpenedState : ariaTextClosedState,
+      "aria-hidden": "false"
+    }), triggerTextWithDefault ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      "test-id": testId,
+      children: triggerTextWithDefault
+    }) : null]
+  });
+};
+var _default = exports.default = MenuTrigger;

package/cjs/dropdown-menu/types.d.ts

@@ -0,0 +1,145 @@
+import { ChangeEvent, MouseEvent, ReactElement, ReactNode, ComponentProps, ComponentType } from 'react';
+import { IconProp, IconLookup } from '@fortawesome/fontawesome-svg-core';
+import { RadioButtonOption } from '../radio-button';
+import { TooltipPlacementsType, TooltipDelayType } from '../tooltip';
+import { AccentType, ButtonSize } from '../button';
+import { ValueOf } from '../types';
+export declare const DROPDOWN_MENU_SELECTBOX_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type DropdownMenuSelectboxSize = ValueOf<typeof DROPDOWN_MENU_SELECTBOX_SIZES>;
+export type DropdownOnClickValueType = MouseEvent<HTMLElement> | string | boolean;
+export type DropdownMenuOptionTooltip = Pick<DropdownMenuOption, 'tooltipPlacement' | 'tooltipText' | 'tooltipDocsLink' | 'tooltipTestId' | 'tooltipId'>;
+export type DropdownRadioOptionType = DropdownMenuOptionTooltip & RadioButtonOption & {
+    id: string;
+    key: string;
+    title: string;
+    subtext: string;
+    label: string;
+    activeItemId?: string;
+    privateKey?: string;
+};
+export type DropdownMenuOption = {
+    id?: string;
+    key: string | number;
+    testId?: string;
+    link?: string;
+    icon?: IconProp;
+    iconClass?: string;
+    className?: string;
+    /** Allow title to be a string or a React element.  */
+    title?: ReactNode;
+    /** description text positioned underneath the title */
+    subtext?: ReactNode;
+    /** If title prop is a React element, use searchableValue key to make search */
+    searchableValue?: string;
+    value?: string | number;
+    disabled?: boolean;
+    tooltipText?: ReactNode;
+    tooltipTestId?: string;
+    tooltipPlacement?: TooltipPlacementsType;
+    tooltipDocsLink?: ReactElement;
+    isChecked?: boolean;
+    /** File Upload */
+    isFileUpload?: boolean;
+    acceptedFiles?: Array<string>;
+    isMultiple?: boolean;
+    /** By default all options are shown and this prop is not required to be passed. isShown can be used for cases when there are specific conditions to showing items */
+    isShown?: boolean;
+    /** if true, dropdown will remain open after option click */
+    shouldNotCloseDropdown?: boolean;
+    isFolderUpload?: boolean;
+    level?: string;
+    privateKey?: string;
+    subOptions?: Array<DropdownMenuOption>;
+    radioOptions?: Array<DropdownRadioOptionType>;
+    redirect?: (e: DropdownOnClickValueType) => void;
+    isExternal?: boolean;
+    subItems?: Array<DropdownMenuOption>;
+    activeItemId?: string;
+    onOptionSelect?: () => void;
+    groupIdentifier?: string;
+    tooltipId?: string;
+    /** This has the highest priority. Use this override for custom links which does not align with standard approach */
+    LinkComponent?: LinkComponentType;
+};
+export type DropdownFiles = {
+    selectedFiles: FileList | null;
+};
+export type DropdownOnChangeValueType = DropdownOnClickValueType | ChangeEvent<HTMLInputElement>;
+export type DropdownOnMouseEnterValueType = MouseEvent<HTMLElement> | ChangeEvent<HTMLInputElement> | string;
+export type DropdownOnMouseLeaveValueType = MouseEvent<HTMLElement> | ChangeEvent<HTMLInputElement> | string;
+export type SelectboxSelectedItem = {
+    key: string | number;
+    /** Allow title to be a string or a React element.  */
+    title?: ReactNode;
+    /** In a selectbox, will be shown under the selected item title */
+    subtext?: ReactNode;
+};
+export type DropdownTriggerOnClickHandler = (menu: {
+    isOpen?: boolean;
+}, isKeyEvent?: boolean) => void;
+export interface DropdownTrigger {
+    /** Default trigger text or node to show if there are no options selected. */
+    defaultTriggerText?: ReactNode;
+    triggerClassName?: string;
+    triggerAriaLabelText?: string;
+    triggerDynamicContentWrapperClassName?: string;
+    /** A dynamic handler that provides an ability to put custom content into trigger button. If defined, selectedItem and defaultTriggerText would be ommited on render */
+    triggerDynamicContent?: (menu: {
+        isOpen?: boolean;
+    }) => ReactNode;
+    /** applies wide click area around the icon */
+    triggerIsIcon?: boolean;
+    /** A dynamic handler called every time dropdown is toggled */
+    triggerOnClickHandler?: DropdownTriggerOnClickHandler;
+    /** Trigger element id. */
+    triggerId?: string;
+    /** Trigger test id. */
+    triggerTestId?: string;
+    triggerTourId?: string;
+    triggerTooltip?: string;
+    /** Trigger tooltip placement */
+    triggerTooltipPlacement?: TooltipPlacementsType;
+    /** A link to docs that will be added to the trigger tooltip */
+    triggerTooltipDocLink?: ReactElement;
+    /** The label to display next to the dropdown, describing what is being selected. */
+    triggerHideChevron?: boolean;
+    labelText?: ReactNode;
+    selectedItemTestId?: string;
+    helperText?: string;
+    required?: boolean;
+    triggerAccentType?: AccentType;
+    triggerTooltipDelayType?: TooltipDelayType;
+    triggerTabIndex?: number;
+    triggerRightIcon?: IconLookup | null;
+    dropdownContentId?: string;
+    triggerButtonSize?: ButtonSize;
+}
+export interface DropdownSelectboxTriggerOptions extends DropdownTrigger {
+    helperText: string;
+    required: boolean;
+}
+export type TriggerContent = {
+    /** If provided, item's title will be shown instead of defaultTriggerText */
+    selectedItem: SelectboxSelectedItem;
+    /** Default trigger text or node to show if there are no options selected. */
+    defaultTriggerText: ReactNode;
+};
+export type DropdownSelectbox = {
+    size?: DropdownMenuSelectboxSize;
+    fitWidthToSelector?: string;
+};
+export declare const MENU_ROLE: {
+    MENUITEM: string;
+    MENUITEMCHECKBOX: string;
+    MENUITEMRADIO: string;
+};
+export type LinkComponentProps<T = ComponentProps<any>> = {
+    option: DropdownMenuOption;
+    disabled?: boolean;
+} & T;
+export type LinkComponentType = ComponentType<LinkComponentProps>;

package/cjs/dropdown-menu/types.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MENU_ROLE = exports.DROPDOWN_MENU_SELECTBOX_SIZES = void 0;
+const DROPDOWN_MENU_SELECTBOX_SIZES = exports.DROPDOWN_MENU_SELECTBOX_SIZES = {
+  SM: 'sm',
+  MD: 'md',
+  // The default size
+  LG: 'lg',
+  XL: 'xl'
+};
+const MENU_ROLE = exports.MENU_ROLE = {
+  MENUITEM: 'menuitem',
+  MENUITEMCHECKBOX: 'menuitemcheckbox',
+  MENUITEMRADIO: 'menuitemradio'
+};

package/cjs/dropdown-menu/upload-helper.d.ts

@@ -0,0 +1 @@
+export declare function supportsFolderUpload(): boolean;

package/cjs/dropdown-menu/upload-helper.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supportsFolderUpload = supportsFolderUpload;
+function supportsFolderUpload() {
+  const elem = document.createElement('input');
+  return ['mozdirectory', 'webkitdirectory'].some(attr => attr in elem);
+}

package/cjs/dropdown-menu/use-dropdown-trigger.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DropdownTriggerOnClickHandler } from './types';
+export type DropdownTriggerProps = {
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    triggerOnClickHandler?: DropdownTriggerOnClickHandler;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>, isKeyEvent?: boolean) => void;
+    isOpen?: boolean;
+};
+export declare const useDropdownTrigger: ({ onMouseEnter, onMouseLeave, onClick, triggerOnClickHandler, isOpen, }: DropdownTriggerProps) => {
+    onMouseEnter: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseLeave: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseClick: (event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+};

package/cjs/dropdown-menu/use-dropdown-trigger.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownTrigger = void 0;
+var _react = require("react");
+const useDropdownTrigger = ({
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  triggerOnClickHandler,
+  isOpen
+}) => {
+  // used to determine if mouse is being used
+  // some accessibility tools like NVDA will send onClick event instead of onKeyPress when used with keyboard
+  const isMouse = (0, _react.useRef)(false);
+  const onClickCallback = (0, _react.useCallback)(event => {
+    onClick?.(event, !isMouse.current);
+    if (typeof triggerOnClickHandler === 'function') {
+      triggerOnClickHandler({
+        isOpen
+      }, !isMouse.current);
+    }
+  }, [isOpen]);
+  const onMouseEnterFn = e => {
+    isMouse.current = true;
+    onMouseEnter?.(e);
+  };
+  const onMouseLeaveFn = e => {
+    isMouse.current = false;
+    onMouseLeave?.(e);
+  };
+  const onMouseClick = event => {
+    event.stopPropagation();
+    onClickCallback(event);
+  };
+  const onKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.stopPropagation();
+      event.preventDefault();
+      onClickCallback(event);
+    }
+  };
+  return {
+    onMouseEnter: onMouseEnterFn,
+    onMouseLeave: onMouseLeaveFn,
+    onMouseClick,
+    onKeyDown
+  };
+};
+exports.useDropdownTrigger = useDropdownTrigger;