@datarobot/design-system 28.2.2

package/esm/dropdown-button/index.d.ts

@@ -0,0 +1,3 @@
+import DropdownButton, { DropdownButtonProps } from './dropdown-button';
+export type { DropdownButtonProps };
+export { DropdownButton };

package/esm/dropdown-button/index.js

@@ -0,0 +1,2 @@
+import DropdownButton from './dropdown-button';
+export { DropdownButton };

package/esm/dropdown-carousel/dropdown-carousel.d.ts

@@ -0,0 +1,16 @@
+import { DropdownMenuOption } from '../dropdown-menu';
+import './dropdown-carousel.less';
+export type DropdownCarouselProps = {
+    isDisabled?: boolean;
+    onSelect?: (option?: DropdownMenuOption) => void;
+    options?: DropdownMenuOption[];
+    selectedKey?: string | number;
+    testId?: string;
+    previousText?: string;
+    nextText?: string;
+};
+/** DropdownCarousel allows navigate through different views
+ * [CAPITALIZATION] Use title case for labels, no colon at the end
+ * [CAPITALIZATION] Use sentence case for selection
+ */
+export declare const DropdownCarousel: ({ selectedKey, options, isDisabled, onSelect, testId, previousText, nextText, }: DropdownCarouselProps) => import("react/jsx-runtime").JSX.Element | null;

package/esm/dropdown-carousel/dropdown-carousel.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { DropdownMenu } from '../dropdown-menu';
+import { useTranslation } from '../hooks/use-translation';
+import { DROPDOWN_PLACEMENT_TYPES as DROPDOWN_CAROUSEL_PLACEMENT_TYPES } from '../dropdown/types';
+import { BUTTON_TYPES } from '../button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* USAGE EXAMPLE
+  <DropdownCarousel
+    isDisabled={isDisabled}
+    onSelect={onSelect}
+    options={options}
+    selectedKey={selectedKey}
+  />
+*/
+
+/** DropdownCarousel allows navigate through different views
+ * [CAPITALIZATION] Use title case for labels, no colon at the end
+ * [CAPITALIZATION] Use sentence case for selection
+ */
+export const DropdownCarousel = ({
+  selectedKey,
+  options = [],
+  isDisabled = false,
+  onSelect = () => {},
+  testId = 'dropdown-carousel',
+  previousText,
+  nextText
+}) => {
+  const {
+    t
+  } = useTranslation();
+
+  // empty list
+  if (!options.length) {
+    return null;
+  }
+  const availableOptionsCount = options.filter(option => !option.disabled).length;
+  const isNavigationDisabled = availableOptionsCount <= 1 || isDisabled;
+  const currentIndex = options.findIndex(option => option.key === selectedKey) || 0;
+  const lastIndex = options.length - 1;
+  const handleOnClick = optionIndex => {
+    if (isNavigationDisabled) {
+      return;
+    }
+    onSelect(options[optionIndex]);
+  };
+  const getPrevIndex = (index = currentIndex) => {
+    const prev = index > 0 ? index - 1 : lastIndex;
+    return options[prev].disabled ? getPrevIndex(prev) : prev;
+  };
+  const getNextIndex = (index = currentIndex) => {
+    const next = (index + 1) % options.length;
+    return options[next].disabled ? getNextIndex(next) : next;
+  };
+  const prevIndex = isNavigationDisabled ? currentIndex : getPrevIndex();
+  const nextIndex = isNavigationDisabled ? currentIndex : getNextIndex();
+  return /*#__PURE__*/_jsxs("menu", {
+    className: "dropdown-carousel",
+    "test-id": testId,
+    children: [/*#__PURE__*/_jsx("button", {
+      "aria-label": isNavigationDisabled ? previousText ?? t('Previous') : String(options[prevIndex].title),
+      className: "button command dropdown-carousel-arrow-button",
+      "test-id": "dropdown-carousel-prev",
+      onClick: () => handleOnClick(prevIndex),
+      disabled: isNavigationDisabled,
+      type: BUTTON_TYPES.BUTTON,
+      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: faChevronLeft
+      })
+    }), /*#__PURE__*/_jsx(DropdownMenu, {
+      options: options,
+      selectedKey: selectedKey,
+      onSelect: onSelect,
+      placement: DROPDOWN_CAROUSEL_PLACEMENT_TYPES.BOTTOM,
+      triggerTestId: "dropdown-carousel-label",
+      triggerClassName: "dropdown-carousel-label",
+      contentTestId: "dropdown-carousel-content",
+      isDisabled: isDisabled
+    }), /*#__PURE__*/_jsx("button", {
+      "aria-label": isNavigationDisabled ? nextText ?? t('Next') : String(options[nextIndex].title),
+      className: "button command dropdown-carousel-arrow-button",
+      "test-id": "dropdown-carousel-next",
+      onClick: () => handleOnClick(nextIndex),
+      disabled: isNavigationDisabled,
+      type: BUTTON_TYPES.BUTTON,
+      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: faChevronRight
+      })
+    })]
+  });
+};

package/esm/dropdown-carousel/index.d.ts

@@ -0,0 +1,3 @@
+export type { DropdownCarouselProps } from './dropdown-carousel';
+export { DropdownCarousel } from './dropdown-carousel';
+export { DROPDOWN_PLACEMENT_TYPES as DROPDOWN_CAROUSEL_PLACEMENT_TYPES } from '../dropdown/types';

package/esm/dropdown-carousel/index.js

@@ -0,0 +1,2 @@
+export { DropdownCarousel } from './dropdown-carousel';
+export { DROPDOWN_PLACEMENT_TYPES as DROPDOWN_CAROUSEL_PLACEMENT_TYPES } from '../dropdown/types';

package/esm/dropdown-menu/default-link-component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DefaultLinkComponent: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/esm/dropdown-menu/default-link-component.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MENU_ROLE } from './types';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultLinkComponent = /*#__PURE__*/React.forwardRef(({
+  onMouseEnter,
+  onMouseLeave,
+  onKeyDown,
+  onClick,
+  option,
+  children,
+  disabled,
+  ...rest
+}, ref) => {
+  const {
+    className,
+    isExternal,
+    link,
+    testId
+  } = option;
+  const handleClick = e => {
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    onClick?.(e);
+  };
+  return /*#__PURE__*/_jsx("a", {
+    className: className,
+    ref: ref,
+    rel: "noopener noreferrer",
+    "test-id": testId,
+    onClick: handleClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onKeyDown: onKeyDown,
+    target: isExternal ? '_blank' : undefined,
+    href: disabled ? undefined : link,
+    role: MENU_ROLE.MENUITEM,
+    ...rest,
+    children: children
+  });
+});
+DefaultLinkComponent.displayName = 'LinkComponent';

package/esm/dropdown-menu/dropdown-content-list.d.ts

@@ -0,0 +1,28 @@
+import { DropdownMenuMultiLevelOptionsProps } from './dropdown-menu-multi-level-options';
+import { DropdownFiles, DropdownMenuOption, DropdownOnChangeValueType, LinkComponentType } from './types';
+export type DropdownContentListProps = {
+    /** Dropdown options to be displayed. */
+    options: Array<DropdownMenuOption>;
+    /** The selected option key value (if one is selected) */
+    selectedKey?: string | number;
+    /** dropdown container test id */
+    contentTestId?: string;
+    /** Called when a selection is made */
+    onSelect: (option: DropdownMenuOption, files?: DropdownFiles) => void;
+    /** Callback to close dropdown */
+    onCloseDropdown: (value?: DropdownOnChangeValueType) => void;
+    /** Specifies content css class */
+    contentClassName?: string;
+    /** Allows for aria label to be associated with the component */
+    labelledBy?: string;
+    LinkComponent: LinkComponentType;
+};
+type DropdownSectionedContentListProps = DropdownContentListProps & {
+    isMultiLevelSectioned?: boolean;
+    multiLevelProps?: Omit<DropdownMenuMultiLevelOptionsProps, 'option' | 'onSelect' | 'closeDropdown'>;
+};
+/** Dropdown content list with section titles */
+export declare const DropdownSectionedContentList: ({ options, selectedKey, contentTestId, contentClassName, onSelect, onCloseDropdown, labelledBy, isMultiLevelSectioned, multiLevelProps, LinkComponent, }: DropdownSectionedContentListProps) => import("react/jsx-runtime").JSX.Element;
+/** Dropdown content list */
+declare const DropdownContentList: ({ options, selectedKey, contentTestId, onSelect, onCloseDropdown, contentClassName, labelledBy, LinkComponent, }: DropdownContentListProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownContentList;

package/esm/dropdown-menu/dropdown-content-list.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import classnames from 'classnames';
+import isNil from 'lodash-es/isNil';
+import DropdownItem from './dropdown-item';
+import DropdownMenuMultiLevelOptions from './dropdown-menu-multi-level-options';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Dropdown content list with section titles */
+export const DropdownSectionedContentList = ({
+  options,
+  selectedKey,
+  contentTestId,
+  contentClassName,
+  onSelect,
+  onCloseDropdown,
+  labelledBy,
+  isMultiLevelSectioned,
+  multiLevelProps,
+  LinkComponent
+}) => {
+  const shouldRenderMultiLevel = isMultiLevelSectioned && !!multiLevelProps;
+  return /*#__PURE__*/_jsx("ul", {
+    className: classnames('dropdown-menu-list sectioned', contentClassName),
+    role: "menu",
+    "test-id": contentTestId,
+    "aria-labelledby": labelledBy,
+    tabIndex: -1,
+    children: options.map((option, index) => {
+      return option.isShown !== false && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [(option.title || index !== 0) && /*#__PURE__*/_jsx("li", {
+          className: classnames('title uppercased', option.title && 'extra-padding-bottom'),
+          "test-id": option.testId,
+          role: "separator",
+          children: option.title
+        }, index), shouldRenderMultiLevel ? option.subOptions?.map((subOption, i) => /*#__PURE__*/_jsx(DropdownMenuMultiLevelOptions, {
+          onSelect: onSelect,
+          closeDropdown: onCloseDropdown,
+          option: subOption,
+          ...multiLevelProps
+        }, subOption.key || `${i}-${subOption.title}`)) : option.subOptions?.map((subOption, i) => /*#__PURE__*/_jsx(DropdownItem, {
+          option: subOption,
+          selectedKey: selectedKey,
+          onCloseDropdown: onCloseDropdown,
+          onSelect: onSelect,
+          LinkComponent: LinkComponent
+        }, isNil(subOption.key) ? i : subOption.key))]
+      }, index);
+    })
+  });
+};
+
+/** Dropdown content list */
+const DropdownContentList = ({
+  options,
+  selectedKey,
+  contentTestId,
+  onSelect,
+  onCloseDropdown,
+  contentClassName,
+  labelledBy,
+  LinkComponent
+}) => {
+  return /*#__PURE__*/_jsx("ul", {
+    className: classnames('dropdown-menu-list', contentClassName),
+    role: "menu",
+    "test-id": contentTestId,
+    "aria-labelledby": labelledBy,
+    tabIndex: -1,
+    children: options.map((option, index) => /*#__PURE__*/_jsx(DropdownItem, {
+      option: option,
+      selectedKey: selectedKey,
+      onCloseDropdown: onCloseDropdown,
+      onSelect: onSelect,
+      LinkComponent: LinkComponent
+    }, isNil(option.key) ? index : option.key))
+  });
+};
+export default DropdownContentList;

package/esm/dropdown-menu/dropdown-item-button.d.ts

@@ -0,0 +1,12 @@
+import { DropdownOnChangeValueType, DropdownOnMouseEnterValueType, DropdownOnMouseLeaveValueType, DropdownMenuOption } from './types';
+export type DropdownItemButtonProps = {
+    option: DropdownMenuOption;
+    /** In a multilevel dropdown, option that triggers sublevel to expand */
+    isMultiLevelHandler?: boolean;
+    onClick?: (e?: DropdownOnChangeValueType | DropdownMenuOption) => void;
+    onMouseEnter?: (e: DropdownOnMouseEnterValueType) => void;
+    onMouseLeave?: (e: DropdownOnMouseLeaveValueType) => void;
+    onCloseDropdown: (value: DropdownOnChangeValueType) => void;
+};
+declare const DropdownItemButton: ({ option, onClick, onMouseLeave, onMouseEnter, onCloseDropdown, isMultiLevelHandler, }: DropdownItemButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownItemButton;

package/esm/dropdown-menu/dropdown-item-button.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useTreeNodeNavigation } from '../hooks';
+import { getKeyActionFnMenu } from '../hooks/use-tree-navigation/utils';
+import { MENU_ROLE } from './types';
+import DropdownItemTitle from './dropdown-item-title';
+import DropdownItemTooltip from './dropdown-item-tooltip';
+import { BUTTON_TYPES } from '../button';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DropdownItemButton = ({
+  option,
+  onClick,
+  onMouseLeave = () => {},
+  onMouseEnter = () => {},
+  onCloseDropdown = () => {},
+  isMultiLevelHandler
+}) => {
+  const {
+    testId,
+    disabled
+  } = option;
+  const {
+    treeItemAttrs,
+    ref: setRefCallback,
+    node
+  } = useTreeNodeNavigation({
+    id: option.privateKey || option.key,
+    getKeyActionFn: getKeyActionFnMenu,
+    onCustomButtonKeyDown: button => {
+      return onCloseDropdown(String(button));
+    },
+    onToggleSelected: isSelected => {
+      if (isSelected) {
+        onClick?.(option);
+      }
+    },
+    ignoreKeys: null
+  });
+  return /*#__PURE__*/_jsx(DropdownItemTooltip, {
+    option: option,
+    children: /*#__PURE__*/_jsx("button", {
+      ref: setRefCallback,
+      role: MENU_ROLE.MENUITEM,
+      "test-id": testId,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      disabled: disabled,
+      type: BUTTON_TYPES.BUTTON,
+      onKeyDown: treeItemAttrs.onKeyDown,
+      "aria-haspopup": isMultiLevelHandler,
+      ...(isMultiLevelHandler && {
+        'aria-expanded': node.isExpanded
+      }),
+      children: /*#__PURE__*/_jsx(DropdownItemTitle, {
+        option: option,
+        isMultiLevelHandler: isMultiLevelHandler
+      })
+    })
+  });
+};
+export default DropdownItemButton;

package/esm/dropdown-menu/dropdown-item-checkbox.d.ts

@@ -0,0 +1,8 @@
+import { DropdownOnChangeValueType, DropdownMenuOption } from './types';
+export type DropdownItemCheckboxProps = {
+    option: DropdownMenuOption;
+    onChange: (e?: DropdownOnChangeValueType | boolean) => void;
+    onCloseDropdown?: (value?: DropdownOnChangeValueType) => void;
+};
+declare const DropdownItemCheckbox: ({ option, onChange, onCloseDropdown, }: DropdownItemCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownItemCheckbox;

package/esm/dropdown-menu/dropdown-item-checkbox.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Checkbox } from '../checkbox';
+import { MENU_ROLE } from './types';
+import { useTreeNodeNavigation } from '../hooks';
+import { getKeyActionFnMenu } from '../hooks/use-tree-navigation/utils';
+import DropdownItemTooltip from './dropdown-item-tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DropdownItemCheckbox = ({
+  option,
+  onChange,
+  onCloseDropdown = () => {}
+}) => {
+  const {
+    disabled,
+    id,
+    isChecked = false,
+    title,
+    testId,
+    tooltipPlacement,
+    tooltipText,
+    subtext
+  } = option;
+  const {
+    treeItemAttrs,
+    ref: setRefCallback
+  } = useTreeNodeNavigation({
+    id: option.privateKey || option.key,
+    isSelected: isChecked,
+    getKeyActionFn: getKeyActionFnMenu,
+    onCustomButtonKeyDown: () => onCloseDropdown(),
+    onToggleSelected: onChange,
+    ignoreKeys: null
+  });
+  return (
+    /*#__PURE__*/
+    // div around Checkbox is needed to comply with the dropdown-item layout.
+    // this way we can keep css simple and avoid overrides.
+    _jsx(DropdownItemTooltip, {
+      option: option,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "checkbox-item",
+        children: /*#__PURE__*/_jsx(Checkbox, {
+          ref: setRefCallback,
+          isTruncatable: true,
+          id: id,
+          testId: testId,
+          isChecked: isChecked,
+          onChange: onChange,
+          labelText: title,
+          subtext: subtext ? String(subtext) : undefined,
+          isDisabled: disabled,
+          tooltipPlacement: tooltipPlacement,
+          onKeyDown: treeItemAttrs.onKeyDown,
+          role: MENU_ROLE.MENUITEMCHECKBOX,
+          hasParentTooltip: !!tooltipText
+        })
+      })
+    })
+  );
+};
+export default DropdownItemCheckbox;

package/esm/dropdown-menu/dropdown-item-content.d.ts

@@ -0,0 +1,14 @@
+import { DropdownFiles, DropdownOnMouseEnterValueType, DropdownOnMouseLeaveValueType, DropdownMenuOption, DropdownOnChangeValueType, LinkComponentType } from './types';
+import './dropdown-item-content.less';
+export type DropdownItemContentProps = {
+    option: DropdownMenuOption;
+    /** In a multilevel dropdown, option that triggers sublevel to expand */
+    isMultiLevelHandler?: boolean;
+    onSelect: (option: DropdownMenuOption, files?: DropdownFiles) => void;
+    onMouseEnter: (value?: DropdownOnMouseEnterValueType) => void;
+    onMouseLeave: (value: DropdownOnMouseLeaveValueType) => void;
+    onCloseDropdown: (value?: DropdownOnChangeValueType) => void;
+    LinkComponent: LinkComponentType;
+};
+declare const DropdownItemContent: ({ option, onSelect, onMouseEnter, onMouseLeave, onCloseDropdown, isMultiLevelHandler, LinkComponent, }: DropdownItemContentProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownItemContent;

package/esm/dropdown-menu/dropdown-item-content.js

@@ -0,0 +1,111 @@
+import React, { useRef, useEffect } from 'react';
+import DropdownItemButton from './dropdown-item-button';
+import DropdownItemCheckbox from './dropdown-item-checkbox';
+import DropdownItemLink from './dropdown-item-link';
+import DropdownItemFileUpload from './dropdown-item-fileupload';
+import { DropdownItemRadioButton } from './dropdown-item-radio-button';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DropdownItemContent = ({
+  option,
+  onSelect,
+  onMouseEnter = () => {},
+  onMouseLeave = () => {},
+  onCloseDropdown = () => {},
+  isMultiLevelHandler,
+  LinkComponent
+}) => {
+  const {
+    isChecked,
+    isFileUpload,
+    isFolderUpload,
+    link,
+    radioOptions
+  } = option;
+  const closeDropdownTimoutRef = useRef();
+  function onClick(value, files) {
+    // this is only the case for a Link and it is here to prevent double action: onKeydown + onClick
+    if (closeDropdownTimoutRef.current) {
+      return;
+    }
+    if (isMultiLevelHandler) {
+      onMouseEnter(option.level);
+      return;
+    }
+    if (onSelect) {
+      if (files) {
+        onSelect(option, files);
+      } else {
+        onSelect(option);
+      }
+    }
+    onMouseLeave(value);
+    if (option.shouldNotCloseDropdown) {
+      return;
+    }
+
+    // delay the closing of the dropdown to allow for the click event to be handled
+    if (option.link) {
+      closeDropdownTimoutRef.current = setTimeout(() => {
+        onCloseDropdown(value);
+        closeDropdownTimoutRef.current = null;
+      });
+      return;
+    }
+    return onCloseDropdown(value);
+  }
+  useEffect(() => () => {
+    if (closeDropdownTimoutRef.current) {
+      clearTimeout(closeDropdownTimoutRef.current);
+    }
+  }, []);
+  if (radioOptions) {
+    return /*#__PURE__*/_jsx("ul", {
+      role: "group",
+      className: "radio-group",
+      children: radioOptions.map(o => /*#__PURE__*/_jsx(DropdownItemRadioButton, {
+        groupIdentifier: option.groupIdentifier,
+        option: {
+          ...o,
+          activeItemId: option.activeItemId
+        },
+        onChange: () => {
+          onClick(null, o.id);
+        },
+        onCloseDropdown: onCloseDropdown
+      }, o.id))
+    });
+  }
+  if (link) {
+    return /*#__PURE__*/_jsx(DropdownItemLink, {
+      option: option,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onCloseDropdown: onCloseDropdown,
+      LinkComponent: LinkComponent
+    });
+  }
+  if (isChecked !== undefined) {
+    return /*#__PURE__*/_jsx(DropdownItemCheckbox, {
+      option: option,
+      onChange: onClick,
+      onCloseDropdown: onCloseDropdown
+    });
+  }
+  if (isFileUpload || isFolderUpload) {
+    return /*#__PURE__*/_jsx(DropdownItemFileUpload, {
+      option: option,
+      onSelect: onClick,
+      onCloseDropdown: onCloseDropdown
+    });
+  }
+  return /*#__PURE__*/_jsx(DropdownItemButton, {
+    option: option,
+    onClick: onClick,
+    isMultiLevelHandler: isMultiLevelHandler,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onCloseDropdown: onCloseDropdown
+  });
+};
+export default DropdownItemContent;

package/esm/dropdown-menu/dropdown-item-fileupload.d.ts

@@ -0,0 +1,9 @@
+import { DropdownFiles, DropdownOnChangeValueType, DropdownMenuOption } from './types';
+import './dropdown-item-fileupload.less';
+export type DropdownItemFileUploadProps = {
+    option: DropdownMenuOption;
+    onSelect?: (option: DropdownOnChangeValueType | DropdownMenuOption, files: DropdownFiles) => void;
+    onCloseDropdown?: () => void;
+};
+declare const DropdownItemFileUpload: ({ option, onSelect, onCloseDropdown, }: DropdownItemFileUploadProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DropdownItemFileUpload;

package/esm/dropdown-menu/dropdown-item-fileupload.js

@@ -0,0 +1,80 @@
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { supportsFolderUpload } from './upload-helper';
+import DropdownItemTitle from './dropdown-item-title';
+import { useTreeNodeNavigation } from '../hooks/use-tree-navigation/use-tree-node-navigation';
+import { getKeyActionFnMenu } from '../hooks/use-tree-navigation/utils';
+import DropdownItemTooltip from './dropdown-item-tooltip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isFolderUploadSupported = supportsFolderUpload();
+const DropdownItemFileUpload = ({
+  option,
+  onSelect = () => {},
+  onCloseDropdown = () => {}
+}) => {
+  const {
+    disabled,
+    id,
+    testId,
+    acceptedFiles = [],
+    isMultiple = false,
+    isFolderUpload = false
+  } = option;
+  const accept = acceptedFiles ? acceptedFiles.join(', ') : '*';
+  const labelRef = useRef(null);
+  const handleFileSelection = e => {
+    if (typeof e === 'boolean') {
+      labelRef.current?.click();
+    } else {
+      e?.preventDefault?.();
+      if (e?.target?.files) {
+        onSelect(option, {
+          selectedFiles: e.target.files
+        });
+      }
+    }
+  };
+  const {
+    treeItemAttrs,
+    ref: setRefCallback
+  } = useTreeNodeNavigation({
+    id: option.privateKey || option.key,
+    getKeyActionFn: getKeyActionFnMenu,
+    onCustomButtonKeyDown: onCloseDropdown,
+    onToggleSelected: handleFileSelection,
+    ignoreKeys: null
+  });
+  if (isFolderUpload && !isFolderUploadSupported) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(DropdownItemTooltip, {
+    option: option,
+    children: /*#__PURE__*/_jsxs("label", {
+      "test-id": testId,
+      htmlFor: id,
+      className: classnames('drop-file-upload-label truncated-drop-item', {
+        disabled
+      }),
+      ref: labelRef,
+      children: [/*#__PURE__*/_jsx(DropdownItemTitle, {
+        option: option
+      }), /*#__PURE__*/_jsx("input", {
+        className: "drop-file-upload-input",
+        "test-id": `drop-file-upload-input-${id}`,
+        ref: setRefCallback,
+        type: "file",
+        id: id,
+        disabled: disabled,
+        onChange: handleFileSelection,
+        accept: accept,
+        multiple: isMultiple
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ,
+        webkitdirectory: isFolderUpload && isFolderUpload.toString() || null,
+        onKeyDown: treeItemAttrs.onKeyDown
+      })]
+    })
+  });
+};
+export default DropdownItemFileUpload;

package/esm/dropdown-menu/dropdown-item-link.d.ts

@@ -0,0 +1,11 @@
+import { DropdownOnClickValueType, DropdownOnMouseEnterValueType, DropdownOnMouseLeaveValueType, DropdownOnChangeValueType, DropdownMenuOption, LinkComponentType } from './types';
+export type DropdownItemLinkProps = {
+    option: DropdownMenuOption;
+    onClick?: (value: DropdownOnClickValueType | boolean) => void;
+    onMouseEnter?: (value: DropdownOnMouseEnterValueType) => void;
+    onMouseLeave?: (value: DropdownOnMouseLeaveValueType) => void;
+    onCloseDropdown?: (value?: DropdownOnChangeValueType) => void;
+    LinkComponent: LinkComponentType;
+};
+declare const DropdownItemLink: ({ option, onClick, onMouseLeave, onMouseEnter, onCloseDropdown, LinkComponent: PropsLinkComponent, }: DropdownItemLinkProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownItemLink;