@datarobot/design-system 28.2.2

package/esm/dropdown-menu/dropdown-menu-multi-level-list.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import debounce from 'lodash-es/debounce';
+import classnames from 'classnames';
+import { DropdownSectionedContentList } from './dropdown-content-list';
+import DropdownMenuMultiLevelOptions from './dropdown-menu-multi-level-options';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DELAY = 300;
+
+// this will create leveling system for top level items and their subItems
+// to enable effective comparisson strategy
+// top items will have level:1, level:2, level:3
+// while their children will be assigned a number that contains parents index and the children's index
+// in the subItems collection after a . (like 1.0, 1.1, 1.2, etc)
+const setLevels = (options, baseIndex) => {
+  return options.map((option, i) => {
+    // index can start with 1, check has to be explicit
+    const index = i + 1;
+    const level = baseIndex === undefined ? `${index}` : `${baseIndex}.${index}`;
+    const newOption = {
+      ...option,
+      level
+    };
+    if (newOption.subOptions && newOption.subOptions.length > 0) {
+      newOption.subOptions = setLevels(newOption.subOptions, level);
+    }
+    if (newOption.subItems && newOption.subItems.length > 0) {
+      newOption.subItems = setLevels(newOption.subItems, level);
+    }
+    return newOption;
+  });
+};
+const DropdownMenuMultiLevelList = ({
+  options,
+  onSelect,
+  closeDropdown,
+  selectedOption,
+  contentTestId,
+  contentClassName,
+  isMultiLevelSectioned,
+  LinkComponent
+}) => {
+  const preparedOptions = useMemo(() => setLevels(options), [options]);
+  const [state, setState] = useState({
+    level: null,
+    isSubLevelOpen: false
+  });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const debouncedFunc = debounce(setState, DELAY, {
+    trailing: true
+  });
+  const debouncedSet = useRef();
+  useEffect(() => {
+    debouncedSet.current = debounce(setState, DELAY, {
+      trailing: true
+    });
+    return () => {
+      debouncedSet.current?.cancel?.();
+    };
+  }, []);
+  const handleMouseEnter = level => {
+    return debouncedSet.current && debouncedSet.current({
+      level: level || null,
+      isSubLevelOpen: true
+    });
+  };
+  const handleMouseLeave = () => {
+    return debouncedSet.current && debouncedSet.current({
+      level: null,
+      isSubLevelOpen: true
+    });
+  };
+
+  // this will trigger reopening nested menu on option click insted of closing the whole menu
+  const handleSubLevelClose = () => {
+    setState({
+      level: null,
+      isSubLevelOpen: false
+    });
+  };
+  const multiLevelProps = {
+    state,
+    selectedOption,
+    handleSubLevelClose,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    LinkComponent
+  };
+  return isMultiLevelSectioned ? /*#__PURE__*/_jsx(DropdownSectionedContentList, {
+    isMultiLevelSectioned: isMultiLevelSectioned,
+    options: preparedOptions,
+    onSelect: onSelect,
+    onCloseDropdown: closeDropdown,
+    multiLevelProps: multiLevelProps,
+    contentClassName: contentClassName,
+    LinkComponent: LinkComponent
+  }) : /*#__PURE__*/_jsx("ul", {
+    className: classnames('dropdown-menu-list', contentClassName),
+    role: "menu",
+    "test-id": contentTestId,
+    tabIndex: -1,
+    children: preparedOptions.map(option => /*#__PURE__*/_jsx(DropdownMenuMultiLevelOptions, {
+      onSelect: onSelect,
+      closeDropdown: closeDropdown,
+      option: option,
+      ...multiLevelProps
+    }, option.key))
+  });
+};
+export default DropdownMenuMultiLevelList;

package/esm/dropdown-menu/dropdown-menu-multi-level-options.d.ts

@@ -0,0 +1,19 @@
+import { DropdownPlacementTypes } from '../dropdown';
+import { DropdownFiles, DropdownMenuOption, DropdownOnChangeValueType, LinkComponentType } from './types';
+export type DropdownMenuMultiLevelOptionsProps = {
+    option: DropdownMenuOption;
+    selectedOption?: DropdownMenuOption;
+    placement?: DropdownPlacementTypes;
+    onSelect: (option: DropdownMenuOption, files?: DropdownFiles) => void;
+    closeDropdown: (value?: DropdownOnChangeValueType) => void;
+    onMouseEnter: (optionLevel?: string) => void;
+    onMouseLeave: (optionLevel?: string) => void;
+    handleSubLevelClose: () => void;
+    state: {
+        level: string | null;
+        isSubLevelOpen: boolean;
+    };
+    LinkComponent: LinkComponentType;
+};
+declare const DropdownMenuMultiLevelOptions: ({ closeDropdown, option, placement, onSelect, selectedOption, onMouseEnter, onMouseLeave, handleSubLevelClose, state, LinkComponent, }: DropdownMenuMultiLevelOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownMenuMultiLevelOptions;

package/esm/dropdown-menu/dropdown-menu-multi-level-options.js

@@ -0,0 +1,103 @@
+import React, { useRef, useState, useEffect } from 'react';
+import classname from 'classnames';
+import { PopperDropdownWrapper } from '../dropdown';
+import DropdownItem from './dropdown-item';
+import { useTreeNodeNavigation } from '../hooks';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DropdownMenuMultiLevelOptions = ({
+  closeDropdown,
+  option,
+  placement = 'right-start',
+  onSelect,
+  selectedOption,
+  onMouseEnter,
+  onMouseLeave,
+  handleSubLevelClose,
+  state,
+  LinkComponent
+}) => {
+  const menuItemRef = useRef(null);
+  const preventOuterMouseLeave = useRef(false);
+  const [isOpen, setIsOpen] = useState(option.level === state.level ? state.isSubLevelOpen : false);
+  const selectedKey = selectedOption && selectedOption.key;
+  const handleMouseEnter = () => {
+    return onMouseEnter(option.level);
+  };
+  const handleMouseLeave = () => {
+    return onMouseLeave(option.level);
+  };
+  const handleSubItemsMouseEnter = () => {
+    menuItemRef?.current?.classList.add('hovered-item');
+    return onMouseEnter(option.level);
+  };
+  const handleSubItemsMouseLeave = () => {
+    menuItemRef.current?.classList.remove('hovered-item');
+    if (!preventOuterMouseLeave.current) {
+      return onMouseLeave(option.level);
+    }
+  };
+  const handleCloseDropdown = () => {
+    closeDropdown();
+  };
+  const {
+    node
+  } = useTreeNodeNavigation({
+    id: option.privateKey || option.key,
+    onToggleExpanded: isExpanded => {
+      setIsOpen(isExpanded);
+    }
+  });
+  useEffect(() => {
+    setIsOpen(option.level === state.level ? state.isSubLevelOpen : node.isExpanded);
+    if (option.subItems && option.subItems.some(val => val.isFileUpload)) {
+      preventOuterMouseLeave.current = true;
+    }
+  }, [option, state, node]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DropdownItem, {
+      option: option,
+      ref: menuItemRef,
+      onCloseDropdown: closeDropdown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onSelect: onSelect,
+      selectedKey: selectedKey,
+      isMultiLevelHandler: !!option.subItems,
+      LinkComponent: LinkComponent
+    }), option.subItems && /*#__PURE__*/_jsx("div", {
+      onMouseEnter: handleSubItemsMouseEnter,
+      onMouseLeave: handleSubItemsMouseLeave,
+      children: /*#__PURE__*/_jsx(PopperDropdownWrapper, {
+        contentClassName: classname('dropdown-content ', {
+          'outside-click-listener-ignore': preventOuterMouseLeave.current
+        }),
+        closeDropdown: handleSubLevelClose,
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [-13, 0]
+          }
+        }],
+        anchorRef: menuItemRef.current,
+        open: isOpen,
+        placement: placement,
+        wrapperContentTestId: `${option.testId}-wrapper`,
+        children: /*#__PURE__*/_jsx("ul", {
+          role: "menu",
+          className: "dropdown-menu-list",
+          tabIndex: -1,
+          children: option.subItems.map(subItem => {
+            return /*#__PURE__*/_jsx(DropdownItem, {
+              option: subItem,
+              onSelect: onSelect,
+              selectedKey: selectedKey,
+              onCloseDropdown: handleCloseDropdown,
+              LinkComponent: LinkComponent
+            }, subItem.key);
+          })
+        })
+      })
+    })]
+  });
+};
+export default DropdownMenuMultiLevelOptions;

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

@@ -0,0 +1,23 @@
+import React, { KeyboardEvent, MouseEvent } from 'react';
+import { DropdownTrigger, SelectboxSelectedItem } from './types';
+import './dropdown-trigger.less';
+export interface TriggerOptions extends DropdownTrigger {
+    selectedItemTestId: string;
+    /** Hides trigger chevron. Especially useful for cases when menu trigger is an icon, (e.g. burger) */
+    triggerHideChevron: boolean;
+}
+export type DropdownMenuTriggerProps = {
+    hasErrored?: boolean;
+    hasSuccess?: boolean;
+    hasWarnings?: boolean;
+    isDisabled?: boolean;
+    /**  handler that represents whether dropdown is currently open */
+    isOpen?: boolean;
+    /**  action to perform on trigger click */
+    onClick?: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, isKeyEvent?: boolean) => void;
+    /** If provided, item's title will be shown instead of defaultTriggerText */
+    selectedItem?: SelectboxSelectedItem;
+    triggerOptions?: DropdownTrigger;
+};
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default DropdownMenuTrigger;

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

@@ -0,0 +1,119 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { TruncateWithTooltip } from '../truncate-with-tooltip';
+import { Tooltip, TOOLTIP_DELAY_TYPES } from '../tooltip';
+import { ACCENT_TYPES, BUTTON_TYPES, Button } from '../button';
+import { useDropdownTrigger } from './use-dropdown-trigger';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultTriggerContent = ({
+  selectedItem,
+  defaultTriggerText
+}) => /*#__PURE__*/_jsx(TruncateWithTooltip, {
+  children: /*#__PURE__*/_jsx("span", {
+    children: selectedItem?.title ?? defaultTriggerText
+  })
+});
+const DropdownMenuTrigger = /*#__PURE__*/forwardRef(({
+  onClick,
+  isOpen,
+  isDisabled,
+  hasErrored,
+  hasSuccess,
+  hasWarnings,
+  selectedItem,
+  triggerOptions = {}
+}, ref) => {
+  const {
+    labelText,
+    defaultTriggerText,
+    triggerId,
+    triggerTestId,
+    triggerTourId,
+    selectedItemTestId,
+    triggerTooltip,
+    triggerTooltipPlacement,
+    triggerDynamicContentWrapperClassName = 'selected-item',
+    triggerDynamicContent,
+    triggerOnClickHandler,
+    triggerClassName,
+    triggerIsIcon,
+    triggerHideChevron,
+    triggerTooltipDocLink,
+    triggerAriaLabelText,
+    dropdownContentId,
+    triggerTooltipDelayType = TOOLTIP_DELAY_TYPES.SLOW,
+    triggerAccentType = ACCENT_TYPES.COMMAND,
+    triggerTabIndex = 0,
+    triggerButtonSize
+  } = triggerOptions;
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    onMouseClick,
+    onKeyDown
+  } = useDropdownTrigger({
+    onClick,
+    triggerOnClickHandler,
+    isOpen
+  });
+  return /*#__PURE__*/_jsxs(Button, {
+    accentType: triggerIsIcon ? ACCENT_TYPES.ROUND_ICON : triggerAccentType,
+    type: BUTTON_TYPES.BUTTON,
+    ref: ref,
+    className: classNames('dropdown-trigger dropdown-menu-trigger', triggerClassName, {
+      active: isOpen,
+      error: hasErrored,
+      success: hasSuccess,
+      warning: hasWarnings
+    }),
+    "tour-id": triggerTourId,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onMouseClick,
+    onKeyDown: onKeyDown,
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-label": triggerAriaLabelText ?? undefined
+    // 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
+    }),
+    isDisabled: isDisabled,
+    testId: triggerTestId,
+    id: triggerId,
+    hasCustomButtonContent: true,
+    tabIndex: triggerTabIndex,
+    size: triggerButtonSize,
+    children: [labelText && /*#__PURE__*/_jsx("span", {
+      className: "dropdown-trigger-label",
+      children: labelText
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      content: triggerTooltip,
+      placement: triggerTooltipPlacement,
+      delayType: triggerTooltipDelayType,
+      docsLink: triggerTooltipDocLink,
+      children: /*#__PURE__*/_jsxs("span", {
+        className: triggerDynamicContentWrapperClassName,
+        "test-id": selectedItemTestId,
+        children: [typeof triggerDynamicContent === 'function' ? triggerDynamicContent({
+          isOpen
+        }) : /*#__PURE__*/_jsx(DefaultTriggerContent, {
+          selectedItem: selectedItem,
+          defaultTriggerText: defaultTriggerText
+        }), !triggerHideChevron ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faChevronDown,
+          "test-id": "chevron-down",
+          className: classNames('trigger-chevron-down', {
+            expanded: isOpen
+          })
+        }) : null]
+      })
+    })]
+  });
+});
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+export default DropdownMenuTrigger;

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

@@ -0,0 +1,116 @@
+import { ReactElement, ReactNode } from 'react';
+import { DropdownProps } from '../dropdown';
+import { DropdownFiles, DropdownMenuOption, DropdownSelectbox, DropdownMenuSelectboxSize, LinkComponentType } from './types';
+import { AccentType, ButtonSize } from '../button';
+import { DROPDOWN_PLACEMENT_TYPES } from '../dropdown/types';
+import { TooltipPlacementsType, TooltipDelayType } from '../tooltip';
+import { ValueOf } from '../types';
+import './dropdown.less';
+export type DropdownMenuSelectbox = boolean | {
+    size?: DropdownMenuSelectboxSize;
+    fitWidthToSelector?: string;
+};
+export type DropdownMenuProps = {
+    /** dropdown container test id */
+    contentTestId?: string;
+    /** dropdown wrapper container test id */
+    wrapperContentTestId?: string;
+    /** Dropdown options to be displayed. */
+    options: Array<DropdownMenuOption>;
+    /** Called when a selection is made. Not required, since dropdown can consist of a list of anchor tags, in which case onSelect can be redundant */
+    onSelect?: (option: DropdownMenuOption, files?: DropdownFiles) => void;
+    /** If provided, will be used to find selected item's title to be shown instead of defaultTriggerText and used to highlight it in the list of available options */
+    selectedKey?: string | number;
+    /** Where to position dropdown, default is bottom-end */
+    placement?: ValueOf<typeof DROPDOWN_PLACEMENT_TYPES>;
+    /** Disables dropdown from mouse interactions and applies respective styles */
+    isDisabled?: boolean;
+    /** if true, will add a search field at the top of the popout container. Multilevel dropdowns do not support search */
+    isSearchable?: boolean | null;
+    /** Called when a change has been made to the search field, for integrating with APIs. If provided, will not filter the list of options. If provided, will always show the searchbox */
+    onSearch?: (search?: string) => void;
+    /** Defines a limit of searchable items. Once the limit is passed, search input is shown. */
+    minSearchableItems?: number;
+    /** Handler for external validation */
+    hasErrored?: boolean;
+    hasSuccess?: boolean;
+    hasWarnings?: boolean;
+    /** Set of options for selectbox, can be a boolean true in case no other options are needed  */
+    selectbox?: DropdownSelectbox | boolean;
+    /** Dropdown option positioned separately from the list at the top bottom and separated with a divider line. if list of options does not fit into the allocated dropdown container this option will be always visible and positioned outside of the scrollable container */
+    footerOption?: DropdownMenuOption;
+    /** Default trigger text to show if there are no options selected. */
+    defaultTriggerText?: string;
+    triggerClassName?: 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?: ({ isOpen }: {
+        isOpen?: boolean;
+    }) => ReactNode;
+    /** applies wide click area around the icon */
+    triggerIsIcon?: boolean;
+    /** A dynamic handler called every time dropdown is toggled */
+    triggerOnClickHandler?: ({ isOpen }: {
+        isOpen?: boolean;
+    }, isKeyEvent?: boolean) => void;
+    /** Trigger element id. */
+    triggerId?: string;
+    /** Trigger test id. */
+    triggerTestId?: string;
+    triggerAccentType?: AccentType;
+    triggerTooltipDelayType?: TooltipDelayType;
+    triggerTooltip?: string;
+    triggerAriaLabelText?: string;
+    triggerTourId?: string;
+    /** Trigger tooltip placement */
+    triggerTooltipPlacement?: TooltipPlacementsType;
+    /** A link to docs that will be added to the trigger tooltip */
+    triggerTooltipDocLink?: ReactElement;
+    /** Hides trigger chevron. Especially useful for cases when menu trigger is an icon, (e.g. burger) */
+    triggerHideChevron?: boolean;
+    /** tab-index of the trigger button fo cases when we need to override default value set by the browser */
+    triggerTabIndex?: number;
+    triggerButtonSize?: ButtonSize;
+    /** Specifies content css class */
+    contentClassName?: string;
+    /** Specifies text to be displayed on label */
+    labelText?: ReactNode;
+    /** adds an asterisk after the labelText */
+    required?: boolean;
+    /** Specifies text to be displayed as helper text */
+    helperText?: string;
+    /** Specifies text to be displayed if there options is empty */
+    noResultsText?: ReactNode;
+    /** Specifies test id for selected item */
+    selectedItemTestId?: string;
+    /** Boolean to specify if the menu should destroy on scroll of the window */
+    destroyOnScroll?: boolean;
+    isMultiLevel?: boolean;
+    isMultiLevelSectioned?: boolean;
+    isOptional?: boolean;
+    optionalLabelText?: string;
+    /** Specifies text to be displayed as a search placeholder text */
+    searchPlaceholderText?: string;
+    /** Specifies autocomplete attribute of a search input */
+    searchAutoComplete?: string;
+    /** Whether the default options list and search query should reset when dropdown is closed */
+    setDefaultOptionsListOnClose?: boolean;
+    /** Render func that displays content between Search and ListItems */
+    renderCustomDropdownHeader?: () => ReactNode;
+    /** Specifies value for Search */
+    searchQuery?: string;
+    onClose?: () => void;
+    onOpen?: (openedWithKeyboard: boolean) => void;
+    dropdownProps?: Partial<DropdownProps>;
+    dropdownMenuContentProps?: Partial<DropdownMenuProps>;
+    /** Link implementation for DropdownItemLink. Pass component which integrates with your routing library. Default value is just an `<a>` */
+    LinkComponent?: LinkComponentType;
+};
+/** Powerful dropdown component aimed at supporting standard dropdown usages in the app
+ * [CAPITALIZATION] Use title case for labels, no colon at the end
+ * [CAPITALIZATION] Use sentence case for selection
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+declare const DropdownMenu: ({ options: originalOptions, footerOption: originalFooterOption, triggerId, triggerTestId, triggerTourId, contentTestId, wrapperContentTestId, selectedItemTestId, defaultTriggerText, labelText, helperText, noResultsText, selectedKey, contentClassName, triggerClassName, triggerIsIcon, triggerTooltip, triggerAriaLabelText, triggerTooltipPlacement, triggerDynamicContentWrapperClassName, triggerDynamicContent, triggerAccentType, triggerTooltipDelayType, triggerOnClickHandler, triggerTooltipDocLink, triggerHideChevron, triggerTabIndex, triggerButtonSize, placement, selectbox, isSearchable, searchPlaceholderText, searchAutoComplete, isDisabled, hasErrored, hasSuccess, hasWarnings, isOptional, optionalLabelText, minSearchableItems, onSelect, onSearch, setDefaultOptionsListOnClose, destroyOnScroll, isMultiLevel, isMultiLevelSectioned, required, onOpen, onClose, renderCustomDropdownHeader, searchQuery: searchQueryValue, dropdownProps, dropdownMenuContentProps, LinkComponent, }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownMenu;