@datarobot/design-system 28.2.2

package/esm/typeahead/typeahead.js

@@ -0,0 +1,343 @@
+import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import classNames from 'classnames';
+import { PopperDropdownWrapper, DROPDOWN_PLACEMENT_TYPES } from '../dropdown';
+import TypeaheadOptionList, { getOptionId } from './typeahead-option-list';
+import { ItemComponents } from './item-component';
+import { MESSAGE_DISPLAY_LOCATION, ValidityMessages } from '../form-field';
+import { MESSAGE_TYPES } from '../message';
+import { Input } from '../input';
+import { useElementsSize } from '../hooks/use-elements-size';
+import { useVisibleOptions } from './use-visible-options';
+import { useTranslation } from '../hooks/use-translation';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultItem = /*#__PURE__*/_jsx(ItemComponents.DefaultItem, {
+  nameKey: "title"
+});
+let typeaheadId = 0;
+
+/** Searchable select
+ * [CAPITALIZATION] Use sentence case for options, label, and input text. Do not end with ellipses (...).
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+function Typeahead({
+  defaultValue = '',
+  onSearch = () => {},
+  optionComponent = defaultItem,
+  OptionList = TypeaheadOptionList,
+  onBlur = () => {},
+  onKeyDown = () => {},
+  onClear = () => {},
+  onSelect = () => {},
+  onDelete = () => {},
+  searchFields = [],
+  placement = DROPDOWN_PLACEMENT_TYPES.BOTTOM_START,
+  options = [],
+  items = [],
+  optionId,
+  optionLabel = 'label',
+  isMultiSelect = false,
+  focused = false,
+  isTouched = false,
+  forceShowAllOnFocus = false,
+  showAllOnFocus = false,
+  isDisabled = false,
+  disabledInfo,
+  isRequired = false,
+  isOptional = false,
+  isClearable = false,
+  optionalLabelText,
+  handleFocus = () => {},
+  placeholder = '',
+  containerRef,
+  inputRef: inputRefProp,
+  helperTextPosition,
+  testId = 'typeahead-input',
+  id = '',
+  label = '',
+  labelTestId,
+  ariaLabel,
+  validity,
+  validationTestId,
+  asyncValidation,
+  labelIcon,
+  labelIconTooltipText = '',
+  labelIconTestId = '',
+  dropdownContentClass,
+  wrapperClass,
+  fieldClass,
+  helperText,
+  autoComplete = 'on',
+  keepInvalidText = false,
+  formatSearchValue,
+  className,
+  autoFocus = false,
+  noItemsText
+}) {
+  const {
+    t
+  } = useTranslation();
+  const listId = useMemo(() => `typeahead-scrollable-container-${typeaheadId++}`, []);
+  const conditionallyUsedInputRef = useRef(null);
+  const inputRef = inputRefProp || conditionallyUsedInputRef;
+  const [searchValue, onSearchValueChange] = useState(defaultValue);
+  const [isOpen, toggleDropdown] = useState(false);
+  const [isShowAll, toggleShowAll] = useState(false);
+  const [openedWithKeyboard, setOpenedWithKeyboard] = useState(false);
+  const [isFocus, setFocus] = useState(focused);
+  const [touched, setIsTouched] = useState(isTouched);
+  const [active, setActive] = useState(null);
+  const validityType = validity?.type;
+  const isValidationFailed = validityType === MESSAGE_TYPES.ERROR;
+  const isValidationSucceeded = validityType === MESSAGE_TYPES.SUCCESS;
+  const isValidationWarned = validityType === MESSAGE_TYPES.WARNING;
+  const validityDisplayLocation = validity?.displayLocation ?? MESSAGE_DISPLAY_LOCATION.INLINE;
+  const showValidationResult = Boolean(validity?.value);
+
+  // Multiple select typeahead requires to take width of container element
+  const anchorRef = containerRef || inputRef;
+  const [width] = useElementsSize(anchorRef, true);
+  const openDropdown = () => toggleDropdown(true);
+  const closeDropdown = () => {
+    setOpenedWithKeyboard(false);
+    toggleDropdown(false);
+  };
+  const handleSelect = (option, isLastAvailableOption = false) => {
+    if (isMultiSelect) {
+      // If option SHOULD close dropdown OR selected option is the last
+      // option available, clear search value.
+      if (!option?.shouldNotCloseDropdown || isLastAvailableOption) {
+        onSearchValueChange('');
+      }
+    } else {
+      setFocus(false);
+      if (option) {
+        onSearchValueChange(String(option[optionLabel]));
+      }
+    }
+    if (isMultiSelect) {
+      onSelect(option);
+    } else if (String(option?.[optionLabel]) !== defaultValue) {
+      onSelect(option);
+    }
+    setIsTouched(true);
+    if (!option?.shouldNotCloseDropdown) {
+      toggleShowAll(false);
+      closeDropdown();
+      setActive(null);
+    }
+    if (!isMultiSelect) {
+      handleFocus(false);
+    }
+  };
+  const handleChange = event => {
+    onSearchValueChange(event.target.value);
+    onSearch(event.target.value);
+
+    // Toggle off all results when the user types
+    toggleShowAll(false);
+    openDropdown();
+    setIsTouched(true);
+  };
+  const handleKeyDown = event => {
+    const {
+      key,
+      target
+    } = event;
+
+    // eslint-disable-next-line default-case
+    switch (key) {
+      case 'ArrowDown':
+        if (!searchValue) {
+          toggleShowAll(true);
+          setOpenedWithKeyboard(true);
+          openDropdown();
+        }
+        break;
+      case 'Backspace':
+        {
+          if (isMultiSelect && !target.value && items.length) {
+            const item = [...items].pop();
+            if (item) {
+              onDelete(item, items.length - 1);
+            }
+          }
+          break;
+        }
+      case 'Tab':
+        // Release the focus if tabbing away
+        handleExit();
+        break;
+    }
+    onKeyDown(event, searchValue);
+  };
+  function handleExit() {
+    const isExact = !!searchValue && options.find(option => searchFields.some(key => option[key] === searchValue));
+    if (!keepInvalidText) {
+      if (isExact) {
+        handleSelect(isExact);
+      } else {
+        onSearchValueChange('');
+        onSearch('');
+        onClear();
+        if (!isMultiSelect) {
+          handleSelect();
+        }
+      }
+    }
+
+    // Remove focus from typeahead container & input
+    handleFocus(false);
+    setFocus(false);
+    closeDropdown();
+  }
+  const handleClear = () => {
+    onSearchValueChange('');
+    handleSelect();
+    onClear();
+  };
+  const showClearButton = isClearable && searchValue !== '' && !isDisabled;
+  const handleClickElsewhere = useCallback(event => {
+    // Handle focus to false if the click is outside of the typeahead container
+    if (!anchorRef.current?.contains(event.target)) {
+      if (isFocus || isMultiSelect) {
+        inputRef.current?.blur();
+        handleExit();
+      }
+    }
+  },
+  // searchValue in dependency array needed for proper clear logic
+  [isFocus, anchorRef, inputRef, searchValue]);
+  useEffect(() => {
+    // Click handler on elsewhere to not trigger toggleFocus after dropdown selection.
+    window.addEventListener('click', handleClickElsewhere);
+    return () => {
+      window.removeEventListener('click', handleClickElsewhere);
+    };
+  });
+  useEffect(() => {
+    if (!isDisabled) {
+      // Focus within input field if they click a surrounding element. This is implemented in the multi select typeahead
+      if (focused) {
+        inputRef.current?.focus();
+        if (!!searchValue) {
+          openDropdown();
+        }
+      }
+      if ((showAllOnFocus && searchValue === '' || forceShowAllOnFocus) && isFocus) {
+        toggleShowAll(true);
+        openDropdown();
+      }
+    }
+  }, [isDisabled, showAllOnFocus, forceShowAllOnFocus, isFocus, searchValue]);
+  useEffect(() => {
+    if (!focused) {
+      inputRef.current?.blur();
+      closeDropdown();
+    }
+    setFocus(focused);
+  }, [focused]);
+  useEffect(() => {
+    onSearchValueChange(defaultValue || '');
+  }, [defaultValue]);
+  useEffect(() => setIsTouched(isTouched), [isTouched]);
+  const PopperWrapper = useMemo(() => /*#__PURE__*/_jsx(PopperDropdownWrapper, {
+    closeDropdown: closeDropdown,
+    anchorRef: anchorRef.current,
+    open: isOpen,
+    contentClassName: classNames('typeahead-dropdown-content', dropdownContentClass),
+    placement: placement,
+    wrapperContentTestId: "typeahead-dropdown-content",
+    children: /*#__PURE__*/_jsx(OptionList, {
+      optionComponent: optionComponent,
+      searchFields: searchFields,
+      closeDropdown: closeDropdown,
+      searchValue: formatSearchValue && formatSearchValue(searchValue) || searchValue,
+      handleSelect: handleSelect,
+      handleMakeActive: activeId => setActive(activeId),
+      inputRef: inputRef,
+      optionId: optionId,
+      optionLabel: optionLabel,
+      options: options,
+      width: width,
+      showAll: isShowAll,
+      openedWithKeyboard: openedWithKeyboard,
+      items: items,
+      listId: listId,
+      noItemsText: noItemsText
+    })
+  }), [isOpen, width, searchValue, options, isShowAll]);
+  const {
+    isShowOptions
+  } = useVisibleOptions({
+    formatSearchValue,
+    searchValue,
+    options,
+    searchFields,
+    isShowAll
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Input, {
+      required: isRequired,
+      label: label,
+      isDisabled: isDisabled,
+      disabledInfo: disabledInfo,
+      isOptional: isOptional,
+      optionalLabelText: optionalLabelText ?? t('Optional'),
+      labelTestId: labelTestId,
+      labelIcon: labelIcon,
+      labelIconTooltipText: labelIconTooltipText,
+      labelIconTestId: labelIconTestId,
+      helperText: helperText,
+      helperTextPosition: helperTextPosition,
+      placeholder: placeholder,
+      "test-id": testId,
+      ref: inputRef,
+      value: searchValue,
+      onBlur: () => {
+        // clear state if input was cleared through ref
+        if (inputRef?.current?.value === '' && searchValue !== '') {
+          handleExit();
+        }
+        onBlur(searchValue);
+      },
+      onChange: handleChange,
+      asyncValidation: asyncValidation,
+      autoFocus: autoFocus,
+      onFocus: () => {
+        setFocus(true);
+        handleFocus(true);
+        setIsTouched(true);
+      },
+      onClear: showClearButton ? handleClear : undefined,
+      onKeyDown: handleKeyDown,
+      id: id,
+      autoComplete: autoComplete,
+      className: classNames(className, 'typeahead-input-group'),
+      wrapperClass: wrapperClass,
+      fieldClass: classNames(fieldClass, {
+        'is-failed': touched && showValidationResult && isValidationFailed,
+        'is-succeeded': touched && showValidationResult && isValidationSucceeded,
+        'is-warned': touched && showValidationResult && isValidationWarned,
+        'is-empty': searchValue === '' && touched && isRequired
+      }),
+      "aria-haspopup": "listbox",
+      "aria-label": ariaLabel ?? undefined,
+      ...(isOpen && active && {
+        'aria-activedescendant': getOptionId(active)
+      }),
+      ...(isShowOptions && {
+        role: 'combobox',
+        'aria-owns': listId,
+        'aria-controls': listId,
+        'aria-expanded': isOpen,
+        'aria-autocomplete': 'list'
+      })
+    }), touched && validity && showValidationResult && validityDisplayLocation === MESSAGE_DISPLAY_LOCATION.INLINE && /*#__PURE__*/_jsx(ValidityMessages, {
+      validationTestId: validationTestId,
+      validity: validity,
+      fieldId: id
+    }), PopperWrapper]
+  });
+}
+export default Typeahead;

package/esm/typeahead/use-visible-options.d.ts

@@ -0,0 +1,11 @@
+import { TypeaheadOption } from './typeahead';
+export declare const useVisibleOptions: ({ formatSearchValue, searchValue, options, searchFields, isShowAll, }: {
+    formatSearchValue?: ((value?: string) => string) | undefined;
+    searchValue?: string | undefined;
+    options: TypeaheadOption[];
+    searchFields?: string[] | undefined;
+    isShowAll: boolean;
+}) => {
+    visibleOptions: TypeaheadOption[];
+    isShowOptions: boolean;
+};

package/esm/typeahead/use-visible-options.js

@@ -0,0 +1,19 @@
+import { useFilterOptions, defaultFilter } from '../hooks/use-filter-options';
+const typeaheadOptionsFilter = (it, searchValue, searchFields, showAll) => {
+  return showAll || defaultFilter(it, searchValue, searchFields);
+};
+export const useVisibleOptions = ({
+  formatSearchValue,
+  searchValue,
+  options,
+  searchFields,
+  isShowAll
+}) => {
+  const formattedSearchValue = formatSearchValue && formatSearchValue(searchValue) || searchValue;
+  const visibleOptions = useFilterOptions(options, formattedSearchValue ?? '', searchFields ?? [], (it, searchVal, searchFlds) => typeaheadOptionsFilter(it, searchVal, searchFlds, isShowAll));
+  const isShowOptions = !(!isShowAll && !formattedSearchValue || !visibleOptions.length);
+  return {
+    visibleOptions,
+    isShowOptions
+  };
+};

package/esm/types.d.ts

@@ -0,0 +1,2 @@
+export type Func<TArgs extends any[], TResult> = (...args: TArgs) => TResult;
+export type ValueOf<T> = T[keyof T];

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/esm/vertical-collapsible-panel-group/index.d.ts

@@ -0,0 +1,3 @@
+import VerticalCollapsiblePanelGroup, { CollapsiblePanelItemType, VerticalCollapsiblePanelGroupProps } from './vertical-collapsible-panel-group';
+export type { VerticalCollapsiblePanelGroupProps, CollapsiblePanelItemType };
+export { VerticalCollapsiblePanelGroup };

package/esm/vertical-collapsible-panel-group/index.js

@@ -0,0 +1,2 @@
+import VerticalCollapsiblePanelGroup from './vertical-collapsible-panel-group';
+export { VerticalCollapsiblePanelGroup };

package/esm/vertical-collapsible-panel-group/vertical-collapsible-panel-group.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
+import './vertical-collapsible-panel-group.less';
+export type CollapsiblePanelItemType = {
+    /** unique id to be used for map loop */
+    id: string | number;
+    /** whether collapsible item should be disabled */
+    isDisabled?: boolean;
+    /** text to be used in collapsible panel header */
+    headerLabel?: string;
+    /** icon to be used in collapsible panel header */
+    headerIcon?: IconLookup;
+    /** info text that will make InfoIcon component to render in collapsible panel header */
+    headerInfoIconText?: string;
+    /** badge to be rendered next to collpasible header label */
+    headerBadge?: React.ReactElement;
+    /** test-id for collapsible panel header. will be passed to CollapsiblePnael component directly */
+    headerTestId?: string;
+    /** content to be displayed when collapsible panel is opened */
+    content: React.ReactElement;
+};
+export type VerticalCollapsiblePanelGroupProps = {
+    /** Array containing config for each collapsible panel */
+    collapsiblePanels: Array<CollapsiblePanelItemType>;
+    /** classname to be applied to container */
+    className?: string;
+    /** expandedItemId state is managed by the parent component */
+    expandedItemId: CollapsiblePanelItemType['id'] | null;
+    setExpandedItemId: (id: CollapsiblePanelItemType['id'] | null) => void;
+};
+/** Vertical container gathering several collapsible panels that do not overflow container when opened
+ * @uxr-only-supported
+ * @midnight-gray-supported
+ */
+export default function VerticalCollapsiblePanelGroup({ collapsiblePanels, expandedItemId, setExpandedItemId, className, }: VerticalCollapsiblePanelGroupProps): import("react/jsx-runtime").JSX.Element;

package/esm/vertical-collapsible-panel-group/vertical-collapsible-panel-group.js

@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import throttle from 'lodash-es/throttle';
+import { COLLAPSIBLE_PANEL_ACCENT_TYPES, CollapsiblePanel } from '../collapsible-panel';
+import { InfoIcon } from '../info-icon';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function VerticalCollapsiblePanelGroupHeader({
+  label,
+  icon,
+  badge,
+  infoText
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "vertical-collapsible-panel-group-header-container",
+    children: [icon ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
+      icon: icon
+    }) : null, /*#__PURE__*/_jsx("span", {
+      children: label
+    }), badge, infoText ? /*#__PURE__*/_jsx(InfoIcon, {
+      children: infoText
+    }) : null]
+  });
+}
+
+/** Vertical container gathering several collapsible panels that do not overflow container when opened
+ * @uxr-only-supported
+ * @midnight-gray-supported
+ */
+export default function VerticalCollapsiblePanelGroup({
+  collapsiblePanels = [],
+  expandedItemId,
+  setExpandedItemId,
+  className
+}) {
+  const containerRef = useRef(null);
+  const accordionsContainerRef = useRef(null);
+  const [maxHeight, setMaxHeight] = useState();
+  const toggleItem = useCallback(id => {
+    // if opened item clicked - close it, if closed item clicked - set currently opened item id to the passed id
+    const nextExpandedId = id === expandedItemId ? null : id;
+    // if expanded id is null (all items are closed) - calculate available space for the items
+    const newMaxHeight = expandedItemId ? maxHeight : containerRef?.current?.clientHeight - accordionsContainerRef?.current?.clientHeight;
+    setMaxHeight(newMaxHeight);
+    setExpandedItemId(nextExpandedId);
+  }, [expandedItemId]);
+  useEffect(() => {
+    const handler = throttle(() => {
+      // we are interested in changing anything only if we have opened accordion
+      if (expandedItemId) {
+        // calculate the difference between container and accordions container and add that diff to maxHeight
+        const heightDifference = containerRef?.current?.clientHeight - accordionsContainerRef?.current?.clientHeight;
+        setMaxHeight(maxHeight + heightDifference);
+      }
+    }, 200);
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, [expandedItemId, maxHeight]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames('vertical-collapsible-panel-group-container', className),
+    ref: containerRef,
+    "test-id": "vertical-collapsible-panel-group-container",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "accordions-container",
+      ref: accordionsContainerRef,
+      children: collapsiblePanels.map(collapsiblePanelItemConfig => {
+        const {
+          id,
+          isDisabled,
+          content,
+          headerLabel,
+          headerIcon,
+          headerBadge,
+          headerInfoIconText,
+          headerTestId
+        } = collapsiblePanelItemConfig;
+        return /*#__PURE__*/_jsx(CollapsiblePanel, {
+          expanded: expandedItemId === id,
+          isDisabled: isDisabled,
+          onChange: () => toggleItem(id),
+          accentType: COLLAPSIBLE_PANEL_ACCENT_TYPES.PANEL,
+          maxHeight: maxHeight,
+          headerTestId: headerTestId,
+          header: /*#__PURE__*/_jsx(VerticalCollapsiblePanelGroupHeader, {
+            label: headerLabel,
+            icon: headerIcon,
+            badge: headerBadge,
+            infoText: headerInfoIconText
+          }),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "vertical-collapsible-panel-group-content",
+            children: content
+          })
+        }, id);
+      })
+    })
+  });
+}

package/esm/vertical-timeline/index.d.ts

@@ -0,0 +1 @@
+export { VerticalTimeline } from './vertical-timeline';

package/esm/vertical-timeline/index.js

@@ -0,0 +1 @@
+export { VerticalTimeline } from './vertical-timeline';

package/esm/vertical-timeline/vertical-timeline-item.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
+export type VerticalTimelineItemProps = {
+    id: string;
+    testId?: string;
+    /** Custom icon to display on the left side of the item, withIcons should be set to true */
+    icon?: IconLookup;
+    /** Custom class for the icon */
+    iconClassName?: string;
+    title: React.ReactNode;
+    content?: React.ReactNode;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string) => void;
+};
+export declare function VerticalTimelineItem({ id, title, content, icon, iconClassName, testId, onSelect, isDisabled, isSelected, }: VerticalTimelineItemProps): import("react/jsx-runtime").JSX.Element;

package/esm/vertical-timeline/vertical-timeline-item.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { useNonNativeButtonAttrs } from '../hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function VerticalTimelineItem({
+  id,
+  title,
+  content,
+  icon,
+  iconClassName,
+  testId = `vertical-timeline-item-${id}-wrapper`,
+  onSelect,
+  isDisabled = false,
+  isSelected = false
+}) {
+  const isInteractive = onSelect && !isDisabled;
+  const nonNativeButtonAttrs = useNonNativeButtonAttrs({
+    isDisabled,
+    onClick: () => onSelect?.(id),
+    onKeyDown: () => onSelect?.(id)
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    id: id,
+    "test-id": testId,
+    className: classNames('vertical-timeline-item-wrapper', isInteractive && 'interactive', isSelected && 'selected', isDisabled && 'disabled', !!icon ? 'with-icons' : 'with-circles'),
+    ...(isInteractive && nonNativeButtonAttrs),
+    children: [!!icon ? /*#__PURE__*/_jsx("div", {
+      className: classNames('vertical-timeline-icon'),
+      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        "test-id": `vertical-timeline-item-${id}-icon`,
+        icon: icon,
+        className: iconClassName
+      })
+    }) : /*#__PURE__*/_jsx("div", {
+      className: "vertical-timeline-circle"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: classNames('vertical-timeline-item'),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "vertical-timeline-item-title",
+        children: title
+      }), content]
+    })]
+  });
+}

package/esm/vertical-timeline/vertical-timeline.d.ts

@@ -0,0 +1,19 @@
+import { VerticalTimelineItemProps } from './vertical-timeline-item';
+import './vertical-timeline.less';
+export type VerticalTimelineProps = {
+    /** List of vertical-timeline items */
+    items: VerticalTimelineItemProps[];
+    className?: string;
+    testId?: string;
+    /** Use icons instead of default circles (we don't allow a mix of circles and icons, for now) */
+    withIcons?: boolean;
+    /** Id of the selected item */
+    selected?: string | null;
+    /** Callback for item selection */
+    onSelect?: (id: string) => void;
+};
+/**
+ * VerticalTimeline component.
+ * @uxr-only-supported
+ */
+export declare function VerticalTimeline({ items, testId, onSelect, selected, withIcons, className, }: VerticalTimelineProps): import("react/jsx-runtime").JSX.Element;

package/esm/vertical-timeline/vertical-timeline.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import { VerticalTimelineItem } from './vertical-timeline-item';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_ICON = faPen;
+
+/**
+ * VerticalTimeline component.
+ * @uxr-only-supported
+ */
+export function VerticalTimeline({
+  items = [],
+  testId,
+  onSelect,
+  selected,
+  withIcons,
+  className
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    "test-id": testId,
+    className: classNames('vertical-timeline', className),
+    children: items.map(item => {
+      return /*#__PURE__*/_jsx(VerticalTimelineItem, {
+        ...item,
+        icon: withIcons ? item.icon || DEFAULT_ICON : undefined,
+        onSelect: onSelect,
+        isSelected: selected !== undefined && selected === item.id
+      }, item.id);
+    })
+  });
+}

package/esm/view-title/index.d.ts

@@ -0,0 +1,2 @@
+export type { ViewTitleProps } from './view-title';
+export { ViewTitle } from './view-title';

package/esm/view-title/index.js

@@ -0,0 +1 @@
+export { ViewTitle } from './view-title';

package/esm/view-title/view-title.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, ReactElement, ElementType } from 'react';
+import './view-title.less';
+export type ViewTitleProps = {
+    children: ReactNode;
+    customHtmlTag?: ElementType;
+    infoText?: ReactNode;
+    infoIconTestId: string;
+    docsLink?: ReactElement;
+    description?: ReactNode;
+};
+/** View Title. Most often uses for titling page sections. For example leaderboard tabs, etc
+ * [CAPITALIZATION] Use title case
+ */
+export declare const ViewTitle: ({ children, customHtmlTag: CustomHtmlTag, infoText, infoIconTestId, docsLink, description, }: ViewTitleProps) => import("react/jsx-runtime").JSX.Element;