@superdispatch/ui-lab 0.13.0 → 0.16.0-alpha.0

package/dist-src/v5/description-item/DescriptionItem.js

@@ -0,0 +1,75 @@
+import { v5 } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { TextBox } from "../text-box/TextBox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var {
+  Color,
+  Column,
+  Columns,
+  Inline,
+  isEmptyReactNode,
+  useUID
+} = v5;
+
+function descriptionItemIconMixin(size) {
+  return css(["width:", "px;height:", "px;& > .MuiSvgIcon-root{font-size:", "px;}"], size, size + 4, size);
+}
+
+var DescriptionItemIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DescriptionItem__DescriptionItemIcon",
+  componentId: "SD__sc-l1c918-0"
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
+});
+export var DescriptionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    icon,
+    wrap,
+    inset,
+    label,
+    children,
+    fallback,
+    id: idProp,
+    'aria-label': ariaLabel
+  } = _ref2;
+  var id = useUID(idProp);
+  var labelID = "".concat(id, "-label");
+  var isEmptyChildren = isEmptyReactNode(children);
+  return /*#__PURE__*/_jsxs(Columns, {
+    id: id,
+    ref: ref,
+    space: "xsmall",
+    "aria-label": ariaLabel,
+    children: [!!(icon || inset) && /*#__PURE__*/_jsx(Column, {
+      width: "content",
+      children: /*#__PURE__*/_jsx(DescriptionItemIcon, {
+        children: icon
+      })
+    }), /*#__PURE__*/_jsx(Column, {
+      width: "adaptive",
+      children: /*#__PURE__*/_jsxs(Inline, {
+        space: "xxsmall",
+        noWrap: !wrap,
+        children: [!!label && /*#__PURE__*/_jsx(TextBox, {
+          as: "label",
+          id: labelID,
+          color: "secondary",
+          children: label
+        }), /*#__PURE__*/_jsx(TextBox, {
+          as: "div",
+          noWrap: !wrap,
+          wrapOverflow: !!wrap,
+          "aria-labelledby": label == null ? undefined : labelID,
+          color: isEmptyChildren && label == null ? 'secondary' : 'primary',
+          children: isEmptyChildren ? fallback : children
+        })]
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "DescriptionItem";

package/dist-src/v5/file-drop-zone/FileDropZone.js

@@ -0,0 +1,132 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+import { mdiUpload } from '@mdi/js';
+import { Error } from '@mui/icons-material';
+import { CircularProgress, SvgIcon } from '@mui/material';
+import { v5 } from '@superdispatch/ui';
+import { forwardRef, Suspense } from 'react';
+import Dropzone from 'react-dropzone';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var {
+  CardButton,
+  Color,
+  Column,
+  Columns
+} = v5;
+export function toBytes(input, unit) {
+  if (unit === 'gb') return input * (1 << 30);
+  if (unit === 'mb') return input * (1 << 20);
+  return input * (1 << 10);
+}
+var KILOBYTE = 1024;
+var BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+export function formatBytes(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  var unitIndex = Math.floor(Math.log(bytes) / Math.log(KILOBYTE));
+  var unit = BYTE_UNITS[unitIndex];
+  return "".concat((bytes / Math.pow(KILOBYTE, unitIndex)).toFixed(2), " ").concat(unit);
+}
+var StyledCardButton = /*#__PURE__*/styled(CardButton).withConfig({
+  displayName: "FileDropZone__StyledCardButton",
+  componentId: "SD__sc-neqvyq-0"
+})(_ref => {
+  var {
+    status
+  } = _ref;
+  return {
+    backgroundColor: status === 'active' ? Color.Blue50 : undefined
+  };
+});
+
+function UploadRejection(_ref2) {
+  var {
+    maxSize,
+    rejection
+  } = _ref2;
+  var [error] = rejection.errors;
+  if (!error) return null;
+  return /*#__PURE__*/_jsxs(Columns, {
+    align: "center",
+    children: [/*#__PURE__*/_jsx(Column, {
+      width: "content",
+      children: /*#__PURE__*/_jsx(Error, {})
+    }), /*#__PURE__*/_jsx(Column, {
+      children: error.code === 'file-too-large' ? maxSize == null ? 'Attachment size is too large' : "Attachment size should be less than ".concat(formatBytes(maxSize)) : error.message
+    })]
+  });
+}
+
+export var FileDropZone = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+    // CardButton
+    disabled = false,
+    children: _children = 'Upload Attachments',
+    hintText = 'or Drag & Drop files',
+    startIcon = /*#__PURE__*/_jsx(SvgIcon, {
+      children: /*#__PURE__*/_jsx("path", {
+        d: mdiUpload
+      })
+    }),
+    fallback = /*#__PURE__*/_jsx(CardButton, {
+      ref: ref,
+      disabled: true,
+      startIcon: /*#__PURE__*/_jsx(CircularProgress, {
+        size: "1em",
+        color: "inherit"
+      }),
+      children: "Loading dependencies\u2026"
+    }),
+    // Dropzone
+    accept,
+    maxSize = Infinity,
+    maxFiles = Infinity,
+    onDropRejected: _onDropRejected,
+    onDropAccepted: _onDropAccepted
+  } = props,
+      dropzoneProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: fallback,
+    children: /*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
+      accept: accept,
+      maxSize: maxSize,
+      maxFiles: maxFiles,
+      disabled: disabled,
+      onDropAccepted: files => {
+        _onDropAccepted === null || _onDropAccepted === void 0 ? void 0 : _onDropAccepted(files);
+      },
+      onDropRejected: fileRejections => {
+        _onDropRejected === null || _onDropRejected === void 0 ? void 0 : _onDropRejected(fileRejections);
+      },
+      children: _ref3 => {
+        var {
+          isDragActive,
+          isDragReject,
+          getRootProps,
+          getInputProps,
+          fileRejections: [fileRejection]
+        } = _ref3;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps())), /*#__PURE__*/_jsx(StyledCardButton, _objectSpread(_objectSpread({}, getRootProps()), {}, {
+            ref: ref,
+            hint: hintText,
+            disabled: disabled,
+            startIcon: startIcon,
+            status: isDragActive ? 'active' : isDragReject ? 'error' : 'idle',
+            error: !!fileRejection && /*#__PURE__*/_jsx(UploadRejection, {
+              accept: accept,
+              maxSize: maxSize,
+              rejection: fileRejection
+            }),
+            children: _children
+          }))]
+        });
+      }
+    }))
+  });
+});
+if (process.env.NODE_ENV !== "production") FileDropZone.displayName = "FileDropZone";

package/dist-src/v5/file-list-item/FileListItem.js

@@ -0,0 +1,136 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { mdiFilePdfBox, mdiTextBox } from '@mdi/js';
+import { CheckCircle, Delete, Error, Image, Refresh } from '@mui/icons-material';
+import { CircularProgress, IconButton, Link, SvgIcon, Tooltip } from '@mui/material';
+import { v5 } from '@superdispatch/ui';
+import { forwardRef, memo, useState } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var {
+  Color,
+  Column,
+  Columns,
+  useResponsiveValue,
+  useUID
+} = v5;
+var FileListItemName = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FileListItem__FileListItemName",
+  componentId: "SD__sc-1pro30e-0"
+})(["overflow:hidden;line-height:22px;white-space:nowrap;text-overflow:ellipsis;"]);
+var FileListItemProgress = /*#__PURE__*/styled(CircularProgress).withConfig({
+  displayName: "FileListItem__FileListItemProgress",
+  componentId: "SD__sc-1pro30e-1"
+})(["font-size:24px;", "{font-size:14px;}"], _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.breakpoints.up('sm');
+});
+var PdfIcon = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+  children: /*#__PURE__*/_jsx("path", {
+    d: mdiFilePdfBox
+  })
+})));
+var TextBoxIcon = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+  children: /*#__PURE__*/_jsx("path", {
+    d: mdiTextBox
+  })
+})));
+var PDF_FILE_PATTERN = /\.pdf$/;
+var IMAGE_FILE_PATTERN = /\.(gif|png|jpg|jpeg)$/;
+
+function getFileType(name) {
+  if (PDF_FILE_PATTERN.exec(name)) return 'pdf';
+  if (IMAGE_FILE_PATTERN.exec(name)) return 'image';
+  return 'unknown';
+}
+
+export var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    url,
+    name,
+    status,
+    onRetry,
+    onDelete
+  } = _ref2;
+  var uid = useUID();
+  var fileType = getFileType(name);
+  var [isHoveredState, setIsHovered] = useState(false);
+  var isHovered = useResponsiveValue(true, isHoveredState);
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    onMouseOver: () => {
+      setIsHovered(true);
+    },
+    onMouseLeave: () => {
+      setIsHovered(false);
+    },
+    children: /*#__PURE__*/_jsxs(Columns, {
+      align: "center",
+      space: "xsmall",
+      children: [/*#__PURE__*/_jsx(Column, {
+        width: "content",
+        children: status === 'error' ? /*#__PURE__*/_jsx(Error, {
+          color: "error",
+          fontSize: "small"
+        }) : fileType === 'pdf' ? /*#__PURE__*/_jsx(PdfIcon, {
+          color: "action",
+          fontSize: "small"
+        }) : fileType === 'image' ? /*#__PURE__*/_jsx(Image, {
+          color: "action",
+          fontSize: "small"
+        }) : /*#__PURE__*/_jsx(TextBoxIcon, {
+          color: "action",
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/_jsx(Column, {
+        width: "fluid",
+        children: /*#__PURE__*/_jsx(FileListItemName, {
+          id: uid,
+          children: !url ? name : /*#__PURE__*/_jsx(Link, {
+            href: url,
+            noWrap: true,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: name
+          })
+        })
+      }), status === 'error' && /*#__PURE__*/_jsx(Column, {
+        width: "content",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Retry",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: onRetry,
+            children: /*#__PURE__*/_jsx(Refresh, {
+              fontSize: "small"
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx(Column, {
+        width: "content",
+        children: status === 'loading' ? /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          disabled: true,
+          children: /*#__PURE__*/_jsx(FileListItemProgress, {
+            size: "1em"
+          })
+        }) : /*#__PURE__*/_jsx(Tooltip, {
+          title: "Delete",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: onDelete,
+            children: !isHovered && status === 'success' ? /*#__PURE__*/_jsx(CheckCircle, {
+              fontSize: "small",
+              htmlColor: Color.Green300
+            }) : /*#__PURE__*/_jsx(Delete, {
+              fontSize: "small"
+            })
+          })
+        })
+      })]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") FileListItem.displayName = "FileListItem";

package/dist-src/v5/index.js

@@ -0,0 +1,16 @@
+export * from "./alert/Alert.js";
+export * from "./banner/Banner.js";
+export * from "./box/Box.js";
+export * from "./button-area/ButtonArea.js";
+export * from "./button/Button.js";
+export * from "./description-item/DescriptionItem.js";
+export * from "./file-drop-zone/FileDropZone.js";
+export * from "./file-list-item/FileListItem.js";
+export * from "./sidebar/Sidebar.js";
+export * from "./sidebar/SidebarContainer.js";
+export * from "./sidebar/SidebarDivider.js";
+export * from "./sidebar/SidebarMenuItem.js";
+export * from "./sidebar/SidebarMenuItemAction.js";
+export * from "./sidebar/SidebarMenuItemAvatar.js";
+export * from "./sidebar/SidebarSubheader.js";
+export * from "./text-box/TextBox.js";

package/dist-src/v5/sidebar/Sidebar.js

@@ -0,0 +1,66 @@
+import { v5 } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { TextBox } from "../text-box/TextBox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var {
+  Color,
+  Column,
+  Columns,
+  useUID
+} = v5;
+var SidebarRoot = /*#__PURE__*/styled.aside.withConfig({
+  displayName: "Sidebar__SidebarRoot",
+  componentId: "SD__sc-14hfb05-0"
+})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;width:240px;height:100vh;background-color:", ";border-right:1px solid ", ";"], Color.White, Color.Silver400);
+var SidebarHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Sidebar__SidebarHeader",
+  componentId: "SD__sc-14hfb05-1"
+})(["top:0;z-index:1;position:sticky;padding-left:24px;padding-right:24px;padding-bottom:8px;background-color:", ";"], Color.White);
+var SidebarTitle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Sidebar__SidebarTitle",
+  componentId: "SD__sc-14hfb05-2"
+})(["height:64px;max-height:64px;display:flex;align-items:center;"]);
+export var Sidebar = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    title,
+    count,
+    header,
+    children,
+    id: idProp
+  } = _ref;
+  var id = useUID(idProp);
+  var titleID = "".concat(id, "-title");
+  return /*#__PURE__*/_jsxs(SidebarRoot, {
+    id: id,
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs(SidebarHeader, {
+      children: [/*#__PURE__*/_jsx(SidebarTitle, {
+        children: /*#__PURE__*/_jsxs(Columns, {
+          space: "xsmall",
+          align: "center",
+          children: [/*#__PURE__*/_jsx(Column, {
+            width: "fluid",
+            children: /*#__PURE__*/_jsx(TextBox, {
+              variant: "heading-2",
+              noWrap: true,
+              id: titleID,
+              children: title
+            })
+          }), !!count && /*#__PURE__*/_jsx(Column, {
+            width: "content",
+            children: /*#__PURE__*/_jsx(TextBox, {
+              color: "secondary",
+              children: count
+            })
+          })]
+        })
+      }), header]
+    }), /*#__PURE__*/_jsx("div", {
+      "aria-labelledby": titleID,
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") Sidebar.displayName = "Sidebar";

package/dist-src/v5/sidebar/SidebarContainer.js

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SidebarContainerRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarContainer__SidebarContainerRoot",
+  componentId: "SD__sc-6u6mqe-0"
+})(["display:flex;height:inherit;max-height:inherit;min-height:inherit;"]);
+var SidebarContainerContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarContainer__SidebarContainerContent",
+  componentId: "SD__sc-6u6mqe-1"
+})(["height:inherit;max-height:inherit;min-height:inherit;width:calc(100% - 240px);min-width:calc(100% - 240px);max-width:calc(100% - 240px);"]);
+export var SidebarContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    sidebar,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsxs(SidebarContainerRoot, {
+    ref: ref,
+    children: [sidebar, /*#__PURE__*/_jsx(SidebarContainerContent, {
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "SidebarContainer";

package/dist-src/v5/sidebar/SidebarDivider.js

@@ -0,0 +1,15 @@
+import { Divider } from '@mui/material';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SidebarDividerRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarDivider__SidebarDividerRoot",
+  componentId: "SD__sc-182lunj-0"
+})(["padding:20px 24px;"]);
+export var SidebarDivider = /*#__PURE__*/forwardRef((_, ref) => {
+  return /*#__PURE__*/_jsx(SidebarDividerRoot, {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Divider, {})
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarDivider.displayName = "SidebarDivider";

package/dist-src/v5/sidebar/SidebarMenuItem.js

@@ -0,0 +1,124 @@
+import { OpenInNew } from '@mui/icons-material';
+import { ButtonBase } from '@mui/material';
+import { v5 } from '@superdispatch/ui';
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { TextBox } from "../text-box/TextBox.js";
+import { SidebarMenuItemContextProvider } from "./SidebarMenuItemContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var {
+  Color,
+  Column,
+  Columns,
+  Inline
+} = v5;
+var SidebarMenuItemRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarMenuItem__SidebarMenuItemRoot",
+  componentId: "SD__sc-1srwx2n-0"
+})(_ref => {
+  var {
+    hasAvatar
+  } = _ref;
+  var height = hasAvatar ? 48 : 40;
+  return css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}}"], height, height, Color.Silver200, Color.Blue300);
+});
+var SidebarMenuItemBadge = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarMenuItem__SidebarMenuItemBadge",
+  componentId: "SD__sc-1srwx2n-1"
+})(["font-size:12px;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";.MuiButtonBase-root[aria-current='true'] &{color:", ";background-color:", ";}"], Color.Dark500, Color.Silver300, Color.White, Color.Dark450);
+var SidebarMenuItemSecondaryAction = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarMenuItem__SidebarMenuItemSecondaryAction",
+  componentId: "SD__sc-1srwx2n-2"
+})(["top:50%;right:24px;position:absolute;transform:translate3d(0,-50%,0);"]);
+export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    action,
+    avatar,
+    onClick,
+    external,
+    children,
+    disabled,
+    selected,
+    secondaryActions,
+    badge: badgeProp
+  } = _ref2;
+  var [hovered, setHovered] = useState(false);
+  var actionsRef = useRef(null);
+  var actionsPlaceholderRef = useRef(null);
+  useLayoutEffect(() => {
+    if (actionsRef.current && actionsPlaceholderRef.current) {
+      actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
+    }
+  });
+  var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
+  return /*#__PURE__*/_jsxs(SidebarMenuItemRoot, {
+    ref: ref,
+    hasAvatar: !!avatar,
+    onMouseEnter: () => {
+      setHovered(true);
+    },
+    onMouseLeave: () => {
+      setHovered(false);
+    },
+    children: [/*#__PURE__*/_jsx(ButtonBase, {
+      onClick: onClick,
+      disabled: disabled,
+      "aria-current": selected,
+      children: /*#__PURE__*/_jsxs(Columns, {
+        align: "center",
+        space: "xsmall",
+        children: [/*#__PURE__*/_jsx(Column, {
+          children: /*#__PURE__*/_jsx(Columns, {
+            align: "center",
+            space: "xsmall",
+            children: /*#__PURE__*/_jsx(Column, {
+              width: "fluid",
+              children: /*#__PURE__*/_jsxs(Columns, {
+                align: "center",
+                space: "xsmall",
+                children: [!!avatar && /*#__PURE__*/_jsx(SidebarMenuItemContextProvider, {
+                  hovered: hovered,
+                  disabled: disabled,
+                  children: /*#__PURE__*/_jsx(Column, {
+                    width: "content",
+                    children: avatar
+                  })
+                }), /*#__PURE__*/_jsx(Column, {
+                  width: "adaptive",
+                  children: /*#__PURE__*/_jsx(TextBox, {
+                    variant: selected ? 'body-semibold' : 'body',
+                    noWrap: true,
+                    children: children
+                  })
+                }), external && /*#__PURE__*/_jsx(Column, {
+                  width: "content",
+                  children: /*#__PURE__*/_jsx(OpenInNew, {
+                    color: "action",
+                    fontSize: "small"
+                  })
+                })]
+              })
+            })
+          })
+        }), !!badge && /*#__PURE__*/_jsx(Column, {
+          width: "content",
+          children: /*#__PURE__*/_jsx(SidebarMenuItemBadge, {
+            children: badge
+          })
+        }), (!!action || !!secondaryActions) && /*#__PURE__*/_jsx(Column, {
+          width: "content",
+          children: /*#__PURE__*/_jsx("div", {
+            ref: actionsPlaceholderRef
+          })
+        })]
+      })
+    }), (!!action || !!secondaryActions) && /*#__PURE__*/_jsx(SidebarMenuItemSecondaryAction, {
+      ref: actionsRef,
+      children: /*#__PURE__*/_jsxs(Inline, {
+        children: [hovered && secondaryActions, action]
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "SidebarMenuItem";

package/dist-src/v5/sidebar/SidebarMenuItemAction.js

@@ -0,0 +1,26 @@
+import { IconButton, Tooltip } from '@mui/material';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SidebarMenuItemActionRoot = /*#__PURE__*/styled(IconButton).withConfig({
+  displayName: "SidebarMenuItemAction__SidebarMenuItemActionRoot",
+  componentId: "SD__sc-4la7tu-0"
+})(["& .MuiSvgIcon-root{font-size:16px;}"]);
+export var SidebarMenuItemAction = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    title,
+    placement,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
+    placement: placement,
+    children: /*#__PURE__*/_jsx(SidebarMenuItemActionRoot, {
+      ref: ref,
+      size: "small",
+      edge: "end",
+      children: children
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItemAction.displayName = "SidebarMenuItemAction";

package/dist-src/v5/sidebar/SidebarMenuItemAvatar.js

@@ -0,0 +1,53 @@
+import { Avatar, Checkbox } from '@mui/material';
+import { forwardRef, useMemo } from 'react';
+import styled from 'styled-components';
+import { useSidebarMenuItemContext } from "./SidebarMenuItemContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function stopPropagation(event) {
+  event.stopPropagation();
+}
+
+var SidebarMenuItemAvatarCheckbox = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarMenuItemAvatar__SidebarMenuItemAvatarCheckbox",
+  componentId: "SD__sc-bfi0pv-0"
+})(["margin:-5px;"]);
+export var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    value,
+    onChange: _onChange
+  } = _ref;
+  var {
+    hovered,
+    disabled
+  } = useSidebarMenuItemContext();
+  var initials = useMemo(() => {
+    var matches = children.match(/\b\w/g) || [];
+    var first = matches.shift() || '';
+    var last = matches.pop() || '';
+    return (first + last).toUpperCase();
+  }, [children]);
+
+  if (value === true || hovered && value != null) {
+    return /*#__PURE__*/_jsx(SidebarMenuItemAvatarCheckbox, {
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        color: "primary",
+        checked: value,
+        disabled: disabled,
+        onMouseDown: stopPropagation,
+        onTouchStart: stopPropagation,
+        onChange: (_, checked) => {
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
+        }
+      })
+    });
+  }
+
+  return /*#__PURE__*/_jsx(Avatar, {
+    ref: ref,
+    "aria-hidden": true,
+    children: initials
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItemAvatar.displayName = "SidebarMenuItemAvatar";