@datarobot/design-system 28.2.2

package/cjs/sidebar-menu/sidebar-menu-item-edit-form.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarMenuItemEditForm = SidebarMenuItemEditForm;
+var _react = _interopRequireWildcard(require("react"));
+var _faSquareExclamation = require("@fortawesome/pro-solid-svg-icons/faSquareExclamation");
+var _input = require("../input");
+var _useFocusWithin = require("../hooks/use-focus-within");
+var _formField = require("../form-field");
+var _jsxRuntime = require("react/jsx-runtime");
+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 SidebarMenuItemEditForm({
+  initValue,
+  itemKey,
+  onExit,
+  onSubmit,
+  onChange,
+  level,
+  validity,
+  editItemInputPlaceholder
+}) {
+  const [value, setInputValue] = (0, _react.useState)(initValue);
+  const hasError = validity?.type === _formField.VALIDATION_RULE_TYPES.ERROR && Boolean(validity?.value);
+  const extraProps = {
+    validity: {
+      type: validity?.type,
+      value: hasError
+    },
+    rightIcon: hasError ? _faSquareExclamation.faSquareExclamation : null
+  };
+  const validationValues = (0, _formField.useDefaultValidationValues)();
+  const validityMessages = (0, _formField.getValidityMessages)({
+    validity,
+    validationValues
+  }).join('. ');
+  if (validityMessages) {
+    extraProps.iconTooltipText = validityMessages;
+  }
+  const handleCancel = (0, _react.useCallback)(() => {
+    setInputValue(initValue);
+    onExit();
+  }, [initValue]);
+  const handleSubmit = (0, _react.useCallback)(() => {
+    if (hasError) {
+      return;
+    }
+    onSubmit({
+      key: itemKey,
+      val: value,
+      level
+    });
+    onExit();
+  }, [value, validity]);
+  const handleKeyDown = (0, _react.useCallback)(e => {
+    if (e.key === 'Esc' || e.key === 'Escape') {
+      handleCancel();
+    }
+  }, [initValue]);
+  const focusWithinProps = (0, _useFocusWithin.useFocusWithin)({
+    onBlur: handleCancel
+  });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    (0, _jsxRuntime.jsx)("form", {
+      "test-id": `sidebar-menu-item-form-${itemKey}`,
+      onKeyDown: handleKeyDown,
+      onBlur: focusWithinProps.onBlur,
+      onSubmit: e => {
+        e.preventDefault();
+        handleSubmit();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
+        shouldDisplayControls: true,
+        fieldClass: "sidebar-menu-item-input",
+        className: "controllable-field",
+        placeholder: editItemInputPlaceholder,
+        autoFocus: true,
+        value: value,
+        onCancel: handleCancel,
+        onChange: e => {
+          setInputValue(e.target.value);
+          onChange?.({
+            key: itemKey,
+            val: e.target.value,
+            level
+          });
+        },
+        fieldTestId: `sidebar-menu-item-input-${itemKey}`,
+        onSubmit: handleSubmit,
+        inputSize: _input.INPUT_SIZES.SM,
+        ...extraProps
+      })
+    })
+  );
+}

package/cjs/sidebar-menu/sidebar-menu-item.d.ts

@@ -0,0 +1,40 @@
+import { ReactElement, MouseEvent } from 'react';
+import { LevelType, LinkComponentProps, OnClickHandler, SidebarMenuItemKey, SidebarMenuOptions, OnEditPayload, OnDeletePayload, OnChangePayload } from './types';
+import { FormFieldValidity } from '../form-field';
+type SidebarMenuItemProps = {
+    name: string;
+    itemKey: SidebarMenuItemKey;
+    expandedKeys: Array<SidebarMenuItemKey>;
+    testId: string;
+    level: number;
+    handleActiveItemChange: (event: MouseEvent, key: SidebarMenuItemKey) => void;
+    LinkComponent?: (props: LinkComponentProps & {
+        route?: string;
+    }) => ReactElement;
+    link?: string;
+    route?: string;
+    isExternal?: boolean;
+    isShown?: boolean;
+    isDisabled?: boolean;
+    onClick?: OnClickHandler;
+    hasErrors?: () => string;
+    subOptions?: Array<SidebarMenuOptions>;
+    activeKey?: SidebarMenuItemKey;
+    levels?: LevelType;
+    shouldShowActiveBgOnTopLevel: boolean;
+    onDelete?: ({ key, level }: OnDeletePayload) => void;
+    onEdit?: ({ key, val, level }: OnEditPayload) => void;
+    isEditable?: boolean;
+    isDeletable?: boolean;
+    onChange?: ({ key, val, level }: OnChangePayload) => void;
+    validity?: FormFieldValidity;
+    tooltipText?: string;
+    editItemInputPlaceholder: string;
+    value?: string;
+    deleteAriaLabel: string;
+    editAriaLabel: string;
+    helperText?: string;
+    shouldNotTruncate?: boolean;
+};
+export declare function SidebarMenuItem({ name, value, itemKey, level, testId, expandedKeys, activeKey, handleActiveItemChange, isExternal, isShown, isDisabled, isEditable, isDeletable, link, route, shouldShowActiveBgOnTopLevel, onDelete, onEdit, onChange, validity, levels, LinkComponent, subOptions, onClick, hasErrors, tooltipText, deleteAriaLabel, editAriaLabel, editItemInputPlaceholder, helperText, shouldNotTruncate, }: SidebarMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/cjs/sidebar-menu/sidebar-menu-item.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarMenuItem = SidebarMenuItem;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _truncateWithTooltip = require("../truncate-with-tooltip");
+var _tooltip = require("../tooltip");
+var _sidebarSubmenu = require("./sidebar-submenu");
+var _sidebarMenuLink = require("./sidebar-menu-link");
+var _sidebarMenuItemControls = require("./sidebar-menu-item-controls");
+var _sidebarMenuItemEditForm = require("./sidebar-menu-item-edit-form");
+var _utils = require("./utils");
+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); }
+function SidebarMenuItem({
+  name,
+  value,
+  itemKey,
+  level,
+  testId,
+  expandedKeys,
+  activeKey,
+  handleActiveItemChange,
+  isExternal,
+  isShown,
+  isDisabled,
+  isEditable,
+  isDeletable,
+  link,
+  route,
+  shouldShowActiveBgOnTopLevel,
+  onDelete,
+  onEdit,
+  onChange,
+  validity,
+  levels = _utils.defaultLevelsConfig,
+  LinkComponent = _sidebarMenuLink.SidebarMenuLink,
+  subOptions = [],
+  onClick = () => {},
+  hasErrors = () => '',
+  tooltipText = '',
+  deleteAriaLabel,
+  editAriaLabel,
+  editItemInputPlaceholder,
+  helperText,
+  shouldNotTruncate
+}) {
+  const [isEditMode, setIsEditMode] = (0, _react.useState)(false);
+  const onEnterEditMode = (0, _react.useCallback)(() => {
+    setIsEditMode(true);
+  }, []);
+  const onExitEditMode = (0, _react.useCallback)(() => {
+    setIsEditMode(false);
+  }, []);
+  const getNameMarginClass = (0, _react.useCallback)(() => {
+    if (onEdit && onDelete && isEditable && isDeletable) {
+      return 'margin-right-8';
+    }
+    if (onEdit && isEditable || onDelete && isDeletable) {
+      return 'margin-right-4';
+    }
+    return '';
+  }, [onEdit, onDelete, isEditable, isDeletable]);
+  if (isShown === false) {
+    return null;
+  }
+  const nameMarginClass = getNameMarginClass();
+  const levelsConfig = {
+    ..._utils.defaultLevelsConfig,
+    ...levels
+  };
+  const isCollapsible = !levelsConfig?.nonCollapsible?.includes(level);
+  const withActiveBackground = shouldShowActiveBgOnTopLevel ? level === 0 : expandedKeys[0] === itemKey;
+  const showSubmenu = !!subOptions.length && (!isCollapsible || expandedKeys.includes(itemKey));
+  const isActive = itemKey === activeKey || expandedKeys.includes(itemKey);
+  const isActionsPresent = !!(onEdit && isEditable) || !!(onDelete && isDeletable);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+    className: (0, _classnames.default)('sidebar-menu-item', `sidebar-menu-item-level-${level}`, isActionsPresent && 'with-actions'),
+    "test-id": testId,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('sidebar-menu-item-wrapper', {
+        'with-active-background': withActiveBackground,
+        'sidebar-menu-item-wrapper-disabled': isDisabled
+      }),
+      "test-id": `sidebar-menu-item-wrapper-${itemKey}`,
+      children: [!isEditMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LinkComponent, {
+          className: (0, _classnames.default)('sidebar-menu-link', {
+            active: isActive,
+            error: hasErrors()
+          }),
+          itemKey: itemKey,
+          onClick: (e, key) => {
+            onClick(e, key);
+            handleActiveItemChange(e, key);
+          },
+          hasErrors: hasErrors,
+          link: link,
+          route: route,
+          isExternal: isExternal,
+          isDisabled: isDisabled,
+          testId: `${testId}-link`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "sidebar-menu-item-container",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              className: "sidebar-menu-item-header",
+              children: [!tooltipText && shouldNotTruncate && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: (0, _classnames.default)(nameMarginClass, value && 'with-value'),
+                children: name
+              }), !tooltipText && !shouldNotTruncate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+                className: (0, _classnames.default)(nameMarginClass, value && 'with-value'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: name
+                })
+              }), tooltipText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+                content: tooltipText,
+                placement: "top",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: (0, _classnames.default)(nameMarginClass, {
+                    'sidebar-menu-link-name': !shouldNotTruncate
+                  }),
+                  children: name
+                })
+              }), !!value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+                className: (0, _classnames.default)('sidebar-menu-link-value', {
+                  'should-not-truncate': shouldNotTruncate
+                }),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: value
+                })
+              })]
+            }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "sidebar-menu-item-helper-text",
+              children: helperText
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarMenuItemControls.SidebarMenuItemControls, {
+          onDelete: onDelete,
+          onEdit: onEnterEditMode,
+          isEditable: !!isEditable,
+          isDeletable: !!isDeletable,
+          itemKey: itemKey,
+          level: level,
+          deleteAriaLabel: deleteAriaLabel,
+          editAriaLabel: editAriaLabel
+        })]
+      }), isEditMode && !!onEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarMenuItemEditForm.SidebarMenuItemEditForm, {
+        initValue: name,
+        onExit: onExitEditMode,
+        onSubmit: onEdit,
+        itemKey: itemKey,
+        level: level,
+        validity: validity,
+        onChange: onChange,
+        editItemInputPlaceholder: editItemInputPlaceholder
+      })]
+    }), showSubmenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarSubmenu.SidebarSubMenu, {
+      activeKey: activeKey,
+      expandedKeys: expandedKeys,
+      subOptions: subOptions,
+      level: level + 1,
+      levels: levels,
+      handleActiveItemChange: handleActiveItemChange,
+      testId: `${testId}-submenu`,
+      LinkComponent: LinkComponent,
+      shouldShowActiveBgOnTopLevel: shouldShowActiveBgOnTopLevel,
+      onDelete: onDelete,
+      onEdit: onEdit,
+      isEditable: isEditable,
+      isDeletable: isDeletable,
+      onChange: onChange,
+      deleteAriaLabel: deleteAriaLabel,
+      editAriaLabel: editAriaLabel,
+      editItemInputPlaceholder: editItemInputPlaceholder
+    })]
+  });
+}

package/cjs/sidebar-menu/sidebar-menu-link.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { OnClickHandler, SidebarMenuItemKey } from './types';
+export type SidebarMenuLinkProps = {
+    children: ReactNode;
+    testId: string;
+    onClick?: OnClickHandler;
+    itemKey: SidebarMenuItemKey;
+    hasErrors?: () => string;
+    className?: string;
+    link?: string;
+    isExternal?: boolean;
+    isDisabled?: boolean;
+    sectionErrorAriaLabel?: string;
+};
+export declare function SidebarMenuLink({ children, className, link, itemKey, testId, isExternal, onClick, hasErrors, sectionErrorAriaLabel, isDisabled, }: SidebarMenuLinkProps): import("react/jsx-runtime").JSX.Element;

package/cjs/sidebar-menu/sidebar-menu-link.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarMenuLink = SidebarMenuLink;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _faExclamationSquare = require("@fortawesome/pro-solid-svg-icons/faExclamationSquare");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _useNonNativeButtonAttrs = require("../hooks/use-non-native-button-attrs");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SidebarMenuLink({
+  children,
+  className,
+  link,
+  itemKey,
+  testId,
+  isExternal = false,
+  onClick = () => {},
+  hasErrors = () => '',
+  sectionErrorAriaLabel,
+  isDisabled = false
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+    className: (0, _classnames.default)(className, {
+      disabled: isDisabled
+    }),
+    href: link,
+    onClick: e => onClick(e, itemKey),
+    target: isExternal ? '_blank' : undefined,
+    rel: "noopener noreferrer",
+    "test-id": testId,
+    tabIndex: (0, _useNonNativeButtonAttrs.getTabIndex)(isDisabled),
+    children: [children, hasErrors() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faExclamationSquare.faExclamationSquare,
+      className: "sidebar-menu-link-error-icon",
+      "aria-label": sectionErrorAriaLabel ?? t('Section has errors'),
+      "aria-hidden": "false"
+    }) : null]
+  });
+}

package/cjs/sidebar-menu/sidebar-menu.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement, MouseEvent } from 'react';
+import { LevelType, SidebarMenuOptions, SidebarMenuItemKey, LinkComponentProps, OnEditPayload, OnDeletePayload, OnChangePayload } from './types';
+import './sidebar-menu.less';
+export type SidebarMenuProps = {
+    options: Array<SidebarMenuOptions>;
+    onSelect: (key: SidebarMenuItemKey, event: MouseEvent) => void;
+    /** Custom implementation of SidebarMenuLink */
+    LinkComponent?: (props: LinkComponentProps) => ReactElement;
+    activeKey: SidebarMenuItemKey;
+    className?: string;
+    testId?: string;
+    levels?: LevelType;
+    shouldShowActiveBgOnTopLevel?: boolean;
+    editItemInputPlaceholder?: string;
+    onDelete?: ({ key, level }: OnDeletePayload) => void;
+    onEdit?: ({ key, val, level }: OnEditPayload) => void;
+    onChange?: ({ key, val, level }: OnChangePayload) => void;
+    deleteAriaLabel?: string;
+    editAriaLabel?: string;
+};
+/** SidebarMenu enables navigation between different pages/pieces of content
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+export declare function SidebarMenu({ options, activeKey, onSelect, onDelete, onEdit, onChange, className, testId, LinkComponent, levels, shouldShowActiveBgOnTopLevel, editItemInputPlaceholder, deleteAriaLabel, editAriaLabel, }: SidebarMenuProps): import("react/jsx-runtime").JSX.Element;

package/cjs/sidebar-menu/sidebar-menu.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarMenu = SidebarMenu;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _sidebarMenuItem = require("./sidebar-menu-item");
+var _utils = require("./utils");
+var _sidebarMenuLink = require("./sidebar-menu-link");
+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); }
+/** SidebarMenu enables navigation between different pages/pieces of content
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+function SidebarMenu({
+  options,
+  activeKey,
+  onSelect,
+  onDelete,
+  onEdit,
+  onChange,
+  className,
+  testId = 'sidebar-menu',
+  LinkComponent = _sidebarMenuLink.SidebarMenuLink,
+  levels = _utils.defaultLevelsConfig,
+  shouldShowActiveBgOnTopLevel = true,
+  editItemInputPlaceholder,
+  deleteAriaLabel,
+  editAriaLabel
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const levelsConfig = {
+    ..._utils.defaultLevelsConfig,
+    ...levels
+  };
+  const flatOptions = (0, _react.useMemo)(() => (0, _utils.getFlatOptions)(options), [options]);
+  const activeAncestorKeys = (0, _react.useMemo)(() => (0, _utils.getAncestorKeys)(flatOptions, activeKey), [flatOptions, activeKey]);
+  const [expandedKeys, setExpandedKeys] = (0, _react.useState)([activeKey, ...activeAncestorKeys]);
+  (0, _react.useEffect)(() => {
+    setExpandedKeys([activeKey, ...activeAncestorKeys]);
+  }, [flatOptions, activeKey, activeAncestorKeys]);
+  const handleActiveItemChange = (0, _react.useCallback)((e, targetKey) => {
+    const option = flatOptions.find(({
+      key
+    }) => key === targetKey);
+    const isActive = targetKey === activeKey;
+    if (typeof levelsConfig !== 'undefined' && typeof option !== 'undefined' && levelsConfig?.nonSelectable?.includes(option.level)) {
+      return;
+    }
+    if (activeAncestorKeys.includes(targetKey)) {
+      setExpandedKeys((0, _utils.getAncestorKeys)(flatOptions, targetKey));
+    } else {
+      const isExpanded = expandedKeys.includes(targetKey);
+      setExpandedKeys(isExpanded ? (0, _utils.getAncestorKeys)(flatOptions, targetKey) : [targetKey, ...(0, _utils.getAncestorKeys)(flatOptions, targetKey)]);
+    }
+    if (!isActive) {
+      onSelect(targetKey, e);
+    }
+  }, [activeAncestorKeys, expandedKeys, flatOptions, activeKey]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    className: (0, _classnames.default)('sidebar-menu', className),
+    "test-id": testId,
+    children: options.map(({
+      key,
+      validity,
+      ...rest
+    }) => {
+      const optionTestId = rest.testId || key.toString();
+      return /*#__PURE__*/(0, _react.createElement)(_sidebarMenuItem.SidebarMenuItem, {
+        ...rest,
+        itemKey: key,
+        activeKey: activeKey,
+        expandedKeys: !expandedKeys ? [] : expandedKeys,
+        level: 0,
+        levels: levelsConfig,
+        key: key,
+        handleActiveItemChange: handleActiveItemChange,
+        testId: optionTestId,
+        LinkComponent: LinkComponent,
+        shouldShowActiveBgOnTopLevel: shouldShowActiveBgOnTopLevel,
+        onDelete: onDelete,
+        onEdit: onEdit,
+        onChange: onChange,
+        validity: validity,
+        editItemInputPlaceholder: editItemInputPlaceholder ?? t('Enter item value'),
+        deleteAriaLabel: deleteAriaLabel ?? t('Delete'),
+        editAriaLabel: editAriaLabel ?? t('Edit')
+      });
+    })
+  });
+}

package/cjs/sidebar-menu/sidebar-submenu.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement, MouseEvent } from 'react';
+import { LevelType, LinkComponentProps, SidebarMenuOptions, SidebarMenuItemKey, OnEditPayload, OnDeletePayload, OnChangePayload } from './types';
+type SidebarSubMenuProps = {
+    handleActiveItemChange: (e: MouseEvent, key: SidebarMenuItemKey) => void;
+    testId: string;
+    level: number;
+    expandedKeys: Array<SidebarMenuItemKey>;
+    activeKey?: SidebarMenuItemKey;
+    subOptions?: Array<SidebarMenuOptions>;
+    levels: LevelType;
+    LinkComponent: (props: LinkComponentProps) => ReactElement;
+    shouldShowActiveBgOnTopLevel: boolean;
+    editItemInputPlaceholder: string;
+    onDelete?: ({ key, level }: OnDeletePayload) => void;
+    onEdit?: ({ key, val, level }: OnEditPayload) => void;
+    onChange?: ({ key, val, level }: OnChangePayload) => void;
+    isEditable?: boolean;
+    isDeletable?: boolean;
+    deleteAriaLabel: string;
+    editAriaLabel: string;
+};
+export declare function SidebarSubMenu({ activeKey, expandedKeys, level, handleActiveItemChange, testId, onDelete, onEdit, onChange, shouldShowActiveBgOnTopLevel, levels, subOptions, LinkComponent, editItemInputPlaceholder, deleteAriaLabel, editAriaLabel, }: SidebarSubMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/sidebar-menu/sidebar-submenu.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarSubMenu = SidebarSubMenu;
+var _react = _interopRequireWildcard(require("react"));
+var _sidebarMenuItem = require("./sidebar-menu-item");
+var _sidebarMenuLink = require("./sidebar-menu-link");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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 SidebarSubMenu({
+  activeKey,
+  expandedKeys,
+  level,
+  handleActiveItemChange,
+  testId,
+  onDelete,
+  onEdit,
+  onChange,
+  shouldShowActiveBgOnTopLevel,
+  levels = _utils.defaultLevelsConfig,
+  subOptions = [],
+  LinkComponent = _sidebarMenuLink.SidebarMenuLink,
+  editItemInputPlaceholder,
+  deleteAriaLabel,
+  editAriaLabel
+}) {
+  const levelsConfig = {
+    ..._utils.defaultLevelsConfig,
+    ...levels
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    "test-id": testId,
+    className: "sidebar-sub-menu",
+    children: subOptions && subOptions.length >= 1 && subOptions.map(({
+      key,
+      validity,
+      ...rest
+    }) => {
+      const subOptionsTestId = rest.testId || key;
+      return /*#__PURE__*/(0, _react.createElement)(_sidebarMenuItem.SidebarMenuItem, {
+        ...rest,
+        key: key,
+        itemKey: key,
+        activeKey: activeKey,
+        expandedKeys: expandedKeys,
+        level: level,
+        levels: levelsConfig,
+        handleActiveItemChange: handleActiveItemChange,
+        testId: typeof subOptionsTestId === 'number' ? `${subOptionsTestId}` : subOptionsTestId,
+        LinkComponent: LinkComponent,
+        shouldShowActiveBgOnTopLevel: shouldShowActiveBgOnTopLevel,
+        onDelete: onDelete,
+        onEdit: onEdit,
+        onChange: onChange,
+        validity: validity,
+        editItemInputPlaceholder: editItemInputPlaceholder,
+        deleteAriaLabel: deleteAriaLabel,
+        editAriaLabel: editAriaLabel
+      });
+    })
+  });
+}

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

@@ -0,0 +1,67 @@
+import { MouseEvent } from 'react';
+import { SidebarMenuLinkProps } from './sidebar-menu-link';
+import { FormFieldValidity } from '../form-field';
+export type LevelType = {
+    /** All levels are collapsible by default */
+    nonCollapsible?: Array<number>;
+    /** All levels are selectable by default */
+    nonSelectable?: Array<number>;
+};
+export type SidebarMenuItemKey = string | number;
+export interface LinkComponentProps extends SidebarMenuLinkProps {
+    className: string;
+    testId: string;
+}
+export type OnClickHandler = (e: MouseEvent<HTMLAnchorElement>, key: number | string) => void;
+export type SidebarMenuOptions = {
+    /** Unique identifier of the item */
+    key: SidebarMenuItemKey;
+    /** Visible item name */
+    name: string;
+    className?: string;
+    /** Link to section/page used as href attr */
+    link?: string;
+    /** Link to section/page used as route, should be implemented with linkComponent */
+    route?: string;
+    /** Defines if navigation is external or no. Used to define anchor _target attr */
+    isExternal?: boolean;
+    isDisabled?: boolean;
+    isEditable?: boolean;
+    isDeletable?: boolean;
+    /** (event, key) => {} */
+    onClick?: OnClickHandler;
+    testId?: string;
+    subOptions?: SidebarMenuOptions[];
+    validity?: FormFieldValidity;
+    value?: string;
+    helperText?: string;
+    shouldNotTruncate?: boolean;
+};
+export interface SidebarMenuOptionsFlat extends SidebarMenuOptions {
+    parentKey?: SidebarMenuItemKey | null;
+    level: number;
+}
+export type OnEditPayload = {
+    key: SidebarMenuItemKey;
+    val: string;
+    level: number;
+};
+export type OnChangePayload = {
+    key: SidebarMenuItemKey;
+    val: string;
+    level: number;
+};
+export type OnDeletePayload = {
+    key: SidebarMenuItemKey;
+    level: number;
+};
+export type SidebarMenuItemControlsProps = {
+    onDelete?: ({ key, level }: OnDeletePayload) => void;
+    onEdit?: () => void;
+    itemKey: SidebarMenuItemKey;
+    isEditable: boolean;
+    isDeletable: boolean;
+    level: number;
+    deleteAriaLabel: string;
+    editAriaLabel: string;
+};

package/cjs/sidebar-menu/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/sidebar-menu/utils.d.ts

@@ -0,0 +1,5 @@
+import { LevelType, SidebarMenuOptions, SidebarMenuOptionsFlat } from './types';
+export declare const defaultLevelsConfig: LevelType;
+export declare function getFlatOptions(options?: Array<SidebarMenuOptions> | Array<SidebarMenuOptionsFlat>, parentKey?: string | number | null, level?: number): Array<SidebarMenuOptionsFlat> | any;
+export declare function getKeysSorted(flatOptions: Array<SidebarMenuOptionsFlat>): import("./types").SidebarMenuItemKey[];
+export declare function getAncestorKeys(flatOptions: Array<SidebarMenuOptionsFlat>, activeKey?: string | number): (string | number)[];