@bwp-web/components 1.3.2 → 1.4.0

package/dist/index.js

@@ -421,37 +421,138 @@ function BiampWrapper({ children, sx, ...props }) {
 import {
   Box,
   ListItemButton,
-  Stack as Stack2
+  Stack as Stack2,
+  Typography
 } from "@mui/material";
-import { BiampLogoIcon } from "@bwp-web/assets";
+import { BiampLogoIcon, SquareRoundedArrowRightIcon } from "@bwp-web/assets";
+import { createContext, useContext, useState } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BiampSidebarContext = createContext({
+  expanded: false
+});
 function BiampSidebar({
   children,
   bottomLogoIcon,
+  bottomLogoText,
+  expandable = true,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(Stack2, { width: "48px", height: "100%", sx: { ...sx }, ...props, children: [
-    /* @__PURE__ */ jsx2(Stack2, { height: "100%", children }),
-    bottomLogoIcon ?? /* @__PURE__ */ jsx2(BiampLogoIcon, { sx: { width: "48px", height: "15px" } })
-  ] });
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isControlled = expandedProp !== void 0;
+  const expanded = isControlled ? expandedProp : internalExpanded;
+  const toggleExpanded = () => {
+    const next = !expanded;
+    if (!isControlled) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  };
+  const width = expanded ? "240px" : "48px";
+  return /* @__PURE__ */ jsx2(BiampSidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsxs(
+    Stack2,
+    {
+      sx: {
+        width,
+        minWidth: width,
+        height: "100%",
+        overflowX: "hidden",
+        transition: ({ transitions }) => transitions.create(["width", "min-width"], {
+          easing: transitions.easing.sharp,
+          duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
+        }),
+        ...sx
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(Stack2, { sx: { flex: 1, minHeight: 0 }, children }),
+        expandable && /* @__PURE__ */ jsx2(
+          BiampSidebarIcon,
+          {
+            icon: /* @__PURE__ */ jsx2(
+              SquareRoundedArrowRightIcon,
+              {
+                sx: {
+                  transform: expanded ? "rotate(180deg)" : "none",
+                  transition: ({ transitions }) => transitions.create("transform", {
+                    duration: transitions.duration.shorter
+                  })
+                }
+              }
+            ),
+            name: "Collapse menu",
+            onClick: toggleExpanded
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack2,
+          {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            sx: { mt: 2, overflow: "hidden" },
+            children: [
+              bottomLogoIcon ?? /* @__PURE__ */ jsx2(
+                BiampLogoIcon,
+                {
+                  sx: { width: "48px", height: "15px", flexShrink: 0 }
+                }
+              ),
+              bottomLogoText && /* @__PURE__ */ jsx2(
+                Typography,
+                {
+                  variant: "caption",
+                  fontWeight: 500,
+                  color: "sidebar.main",
+                  noWrap: true,
+                  sx: {
+                    opacity: expanded ? 1 : 0,
+                    transition: ({ transitions }) => transitions.create("opacity", {
+                      duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
+                    })
+                  },
+                  children: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${bottomLogoText}`
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 }
 function BiampSidebarIconList({
   children,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(Stack2, { height: "100%", sx: { gap: "4px", ...sx }, ...props, children });
+  return /* @__PURE__ */ jsx2(
+    Stack2,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        gap: "4px",
+        overflowY: "auto",
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
 }
 function BiampSidebarIcon({
   selected,
   icon,
   selectedIcon,
+  name,
   sx,
   ...props
 }) {
+  const { expanded } = useContext(BiampSidebarContext);
   const displayedSelectedIcon = selectedIcon ?? icon;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs(
     ListItemButton,
     {
       selected,
@@ -459,16 +560,50 @@ function BiampSidebarIcon({
       disableRipple: true,
       sx: {
         minWidth: "48px",
-        maxWidth: "48px",
         minHeight: "48px",
         maxHeight: "48px",
         borderRadius: "8px",
-        justifyContent: "center",
+        justifyContent: "flex-start",
         alignItems: "center",
+        padding: 0,
+        overflow: "hidden",
+        color: "text.secondary",
         ...sx
       },
       ...props,
-      children: selected ? displayedSelectedIcon : icon
+      children: [
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            sx: {
+              width: "48px",
+              height: "48px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: selected ? displayedSelectedIcon : icon
+          }
+        ),
+        name && /* @__PURE__ */ jsx2(
+          Typography,
+          {
+            variant: "body1",
+            fontWeight: 600,
+            color: "inherit",
+            noWrap: true,
+            sx: {
+              pr: 2,
+              opacity: expanded ? 1 : 0,
+              transition: ({ transitions }) => transitions.create("opacity", {
+                duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
+              })
+            },
+            children: name
+          }
+        )
+      ]
     }
   );
 }
@@ -507,8 +642,9 @@ import {
   Popover,
   Stack as Stack3,
   TextField,
-  Typography
+  Typography as Typography2
 } from "@mui/material";
+import { Children } from "react";
 import { BiampRedLogo, ExternalLinkIcon, SearchIcon } from "@bwp-web/assets";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function BiampHeader({ children, sx, ...props }) {
@@ -558,8 +694,8 @@ function BiampHeaderTitle({
           }
         ),
         /* @__PURE__ */ jsxs2(Stack3, { direction: "row", gap: 0.5, children: [
-          title && /* @__PURE__ */ jsx3(Typography, { variant: "h4", children: title }),
-          subtitle && /* @__PURE__ */ jsx3(Typography, { variant: "h4", color: "text.secondary", children: subtitle })
+          title && /* @__PURE__ */ jsx3(Typography2, { variant: "h4", children: title }),
+          subtitle && /* @__PURE__ */ jsx3(Typography2, { variant: "h4", color: "text.secondary", children: subtitle })
         ] })
       ]
     }
@@ -739,8 +875,8 @@ function BiampBuildAppContentItem({
       ...props,
       children: [
         /* @__PURE__ */ jsx3(Box2, { sx: { width: 54, height: 54 }, mb: 0.5, children: image }),
-        /* @__PURE__ */ jsx3(Typography, { variant: "caption", fontWeight: 600, mb: 0.5, children: name }),
-        /* @__PURE__ */ jsx3(Typography, { variant: "caption", color: "text.secondary", children: description }),
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", fontWeight: 600, mb: 0.5, children: name }),
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "text.secondary", children: description }),
         button && /* @__PURE__ */ jsx3(Box2, { position: "absolute", top: "12px", right: "12px", children: button })
       ]
     }
@@ -751,12 +887,17 @@ function BiampEndUserAppContent({
   sx,
   ...props
 }) {
+  const isGrid = Children.count(children) > 1;
   return /* @__PURE__ */ jsx3(
     Stack3,
     {
       direction: "column",
       sx: {
         gap: 1.5,
+        ...isGrid && {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr"
+        },
         ...sx
       },
       ...props,
@@ -797,8 +938,8 @@ function BiampEndUserAppContentItem({
       children: [
         /* @__PURE__ */ jsx3(Box2, { sx: { width: 32, height: 32 }, children: image }),
         /* @__PURE__ */ jsxs2(Stack3, { direction: "column", children: [
-          /* @__PURE__ */ jsx3(Typography, { variant: "caption", fontWeight: 600, children: name }),
-          /* @__PURE__ */ jsx3(Typography, { variant: "caption", color: "text.secondary", children: description })
+          /* @__PURE__ */ jsx3(Typography2, { variant: "caption", fontWeight: 600, children: name }),
+          /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "text.secondary", children: description })
         ] }),
         /* @__PURE__ */ jsx3(ExternalLinkIcon, { sx: { width: 16, height: 16, ml: "auto" } })
       ]
@@ -915,7 +1056,7 @@ import { useEffect as useEffect2, useRef as useRef3 } from "react";
 import { NoResultsIcon } from "@bwp-web/assets";
 
 // src/BiampTable/BiampTableStatusMessage.tsx
-import { Stack as Stack5, Typography as Typography2 } from "@mui/material";
+import { Stack as Stack5, Typography as Typography3 } from "@mui/material";
 import { cloneElement } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function BiampTableStatusMessage({
@@ -930,8 +1071,8 @@ function BiampTableStatusMessage({
       "aria-hidden": true,
       sx: { width: 56, height: 56, ...icon.props.sx }
     }),
-    /* @__PURE__ */ jsx4(Typography2, { variant: "h2", children: title }),
-    description && /* @__PURE__ */ jsx4(Typography2, { variant: "body1", children: description }),
+    /* @__PURE__ */ jsx4(Typography3, { variant: "h2", children: title }),
+    description && /* @__PURE__ */ jsx4(Typography3, { variant: "body1", children: description }),
     children
   ] });
 }
@@ -979,13 +1120,13 @@ import React2 from "react";
 
 // src/BiampTable/BiampTableTruncatedCell.tsx
 import { Box as Box3, Tooltip } from "@mui/material";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState as useState2 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function BiampTableTruncatedCell({
   children
 }) {
   const textRef = useRef(null);
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState2(false);
   const handleMouseEnter = useCallback(() => {
     const el = textRef.current;
     if (el && el.scrollWidth > el.clientWidth) {
@@ -1392,9 +1533,9 @@ var BiampTableRow = React2.memo(
 );
 
 // src/BiampTable/useLoadingDelay.ts
-import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect, useRef as useRef2, useState as useState3 } from "react";
 function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
-  const [status, setStatus] = useState2("idle");
+  const [status, setStatus] = useState3("idle");
   const timeoutRef = useRef2(null);
   function clearPending() {
     if (timeoutRef.current !== null) {
@@ -1666,7 +1807,7 @@ import {
   List,
   ListItem,
   Popover as Popover2,
-  Typography as Typography3
+  Typography as Typography4
 } from "@mui/material";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function toVisibilityState(visibility) {
@@ -1747,7 +1888,7 @@ function BiampTableColumnVisibility({
                   slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
                 }
               ),
-              /* @__PURE__ */ jsx13(Typography3, { variant: "caption", fontWeight: 600, children: showAllLabel })
+              /* @__PURE__ */ jsx13(Typography4, { variant: "caption", fontWeight: 600, children: showAllLabel })
             ]
           }
         ),
@@ -1775,7 +1916,7 @@ function BiampTableColumnVisibility({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx13(Typography3, { variant: "caption", children: columnName })
+                    /* @__PURE__ */ jsx13(Typography4, { variant: "caption", children: columnName })
                   ]
                 },
                 column.id
@@ -1790,7 +1931,7 @@ function BiampTableColumnVisibility({
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
 import { ColumnsIcon } from "@bwp-web/assets";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 import {
@@ -1843,7 +1984,7 @@ function BiampTableToolbarColumnVisibility({
   showAllLabel,
   ...actionButtonProps
 }) {
-  const [anchorEl, setAnchorEl] = useState3(null);
+  const [anchorEl, setAnchorEl] = useState4(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
   return /* @__PURE__ */ jsxs8(Fragment2, { children: [
@@ -2010,10 +2151,10 @@ import {
   Divider as Divider2,
   Drawer,
   IconButton as IconButton4,
-  Typography as Typography4
+  Typography as Typography5
 } from "@mui/material";
 import { CloseIcon, FilterIcon } from "@bwp-web/assets";
-import { useId, useState as useState4 } from "react";
+import { useId, useState as useState5 } from "react";
 import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function BiampTableToolbarFilters({
   activeFilterCount,
@@ -2028,7 +2169,7 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   const titleId = useId();
   function handleClose() {
     onApply?.();
@@ -2074,7 +2215,7 @@ function BiampTableToolbarFilters({
                     px: 3.5,
                     py: 2.5,
                     children: [
-                      /* @__PURE__ */ jsxs9(Typography4, { id: titleId, variant: "h2", children: [
+                      /* @__PURE__ */ jsxs9(Typography5, { id: titleId, variant: "h2", children: [
                         title,
                         /* @__PURE__ */ jsx20(
                           Badge2,
@@ -2154,7 +2295,7 @@ import {
   useMediaQuery
 } from "@mui/material";
 import { CloseIcon as CloseIcon2, SearchIcon as SearchIcon2 } from "@bwp-web/assets";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/BiampTable/useDebouncedCallback.ts
 import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef5 } from "react";
@@ -2206,8 +2347,8 @@ function BiampTableToolbarSearch({
   ...textFieldProps
 }) {
   const isMobile = useMediaQuery((t) => t.breakpoints.down("md"));
-  const [inputValue, setInputValue] = useState5(defaultValue);
-  const [isExpanded, setIsExpanded] = useState5(false);
+  const [inputValue, setInputValue] = useState6(defaultValue);
+  const [isExpanded, setIsExpanded] = useState6(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
   useEffect5(() => {
     setInputValue(defaultValue);
@@ -2539,7 +2680,7 @@ function downloadCsv(csvContent, filename) {
 import {
   Box as Box12,
   Collapse as Collapse2,
-  Typography as Typography5
+  Typography as Typography6
 } from "@mui/material";
 import {
   ErrorStatusIcon,
@@ -2577,7 +2718,7 @@ function BiampBannerIcon({ severity, children }) {
   return /* @__PURE__ */ jsx22(Fragment4, { children: severity ? iconMapping[severity] : children });
 }
 function BiampBannerContent({ children, ...props }) {
-  return /* @__PURE__ */ jsx22(Typography5, { textAlign: "center", variant: "h3", ...props, children });
+  return /* @__PURE__ */ jsx22(Typography6, { textAlign: "center", variant: "h3", ...props, children });
 }
 function BiampBannerActions({ children, ...props }) {
   return /* @__PURE__ */ jsx22(Box12, { display: "flex", gap: 1, alignItems: "center", ...props, children });
@@ -2646,7 +2787,7 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
 }
 
 // src/BiampGlobalSearch/BiampGlobalSearch.tsx
-import { createContext, forwardRef, useContext } from "react";
+import { createContext as createContext2, forwardRef, useContext as useContext2 } from "react";
 import {
   Autocomplete,
   Box as Box13,
@@ -2654,11 +2795,11 @@ import {
   InputAdornment as InputAdornment3,
   Paper,
   TextField as TextField3,
-  Typography as Typography6
+  Typography as Typography7
 } from "@mui/material";
 import { KeyArrowDownIcon, KeyArrowUpIcon, SearchIcon as SearchIcon3 } from "@bwp-web/assets";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
-var SearchContext = createContext({
+var SearchContext = createContext2({
   hasOptions: true,
   loading: false,
   noResultsText: "No results found",
@@ -2695,10 +2836,10 @@ function KeyCap({
 }
 var BiampGlobalSearchPaper = forwardRef(
   function BiampGlobalSearchPaper2({ children, ...props }, ref) {
-    const { hasOptions, loading, noResultsText } = useContext(SearchContext);
+    const { hasOptions, loading, noResultsText } = useContext2(SearchContext);
     return /* @__PURE__ */ jsxs11(Paper, { ref, ...props, children: [
       hasOptions || loading ? children : /* @__PURE__ */ jsx25(
-        Typography6,
+        Typography7,
         {
           variant: "body2",
           color: "text.secondary",
@@ -2723,7 +2864,7 @@ var BiampGlobalSearchPaper = forwardRef(
                 /* @__PURE__ */ jsx25(KeyCap, { children: /* @__PURE__ */ jsx25(KeyArrowUpIcon, {}) })
               ] }),
               /* @__PURE__ */ jsx25(
-                Typography6,
+                Typography7,
                 {
                   variant: "caption",
                   fontWeight: (theme) => theme.typography.fontWeightMedium,
@@ -2735,7 +2876,7 @@ var BiampGlobalSearchPaper = forwardRef(
             /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               /* @__PURE__ */ jsx25(KeyCap, { variant: "text", children: "Enter" }),
               /* @__PURE__ */ jsx25(
-                Typography6,
+                Typography7,
                 {
                   variant: "caption",
                   fontWeight: (theme) => theme.typography.fontWeightMedium,
@@ -2780,7 +2921,7 @@ function BiampGlobalSearchListItem({
   option,
   props: liProps
 }) {
-  const { query } = useContext(SearchContext);
+  const { query } = useContext2(SearchContext);
   const { key, ...rest } = liProps;
   const maxChips = 3;
   const chips = option.associatedItems?.slice(0, maxChips) ?? [];
@@ -2811,9 +2952,9 @@ function BiampGlobalSearchListItem({
             children: option.icon
           }
         ),
-        /* @__PURE__ */ jsx25(Typography6, { variant: "body2", noWrap: true, sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx25(HighlightText, { text: option.title, query }) }),
+        /* @__PURE__ */ jsx25(Typography7, { variant: "body2", noWrap: true, sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx25(HighlightText, { text: option.title, query }) }),
         option.subtitle && /* @__PURE__ */ jsx25(
-          Typography6,
+          Typography7,
           {
             className: "hoverContent",
             variant: "body2",
@@ -2939,7 +3080,7 @@ function BiampGlobalSearch({
           loading,
           onChange: handleChange,
           onInputChange: handleInputChange,
-          loadingText: /* @__PURE__ */ jsx25(Typography6, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
+          loadingText: /* @__PURE__ */ jsx25(Typography7, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
           freeSolo: true,
           filterOptions: (x) => x,
           getOptionLabel: (option) => typeof option === "string" ? option : option.title,
@@ -3004,7 +3145,7 @@ function BiampGlobalSearch({
 
 // src/UserInitialsIcon/UserInitialsIcon.tsx
 var import_randomcolor = __toESM(require_randomColor(), 1);
-import { Box as Box14, Typography as Typography7 } from "@mui/material";
+import { Box as Box14, Typography as Typography8 } from "@mui/material";
 import { darken } from "@mui/material/styles";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var DEFAULT_SIZE = 40;
@@ -3039,7 +3180,7 @@ function UserInitialsIcon({
       sx: { ...sx },
       ...props,
       children: /* @__PURE__ */ jsx26(
-        Typography7,
+        Typography8,
         {
           variant: "h3",
           color: textColor,
@@ -3062,7 +3203,7 @@ var getInitials = (name) => {
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
 import { SvgIcon, Skeleton, Box as Box15 } from "@mui/material";
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
@@ -3074,16 +3215,16 @@ function applyCurrentColor(svg) {
 function useDynamicSvgIcon(url, options = {}) {
   const { replaceColors = false, onLoad, onError } = options;
   const transform = replaceColors ? applyCurrentColor : (s) => s;
-  const [svgContent, setSvgContent] = useState6(() => {
+  const [svgContent, setSvgContent] = useState7(() => {
     const cached = svgCache.get(url);
     return cached ? transform(cached.innerContent) : null;
   });
-  const [svgViewBox, setSvgViewBox] = useState6(() => {
+  const [svgViewBox, setSvgViewBox] = useState7(() => {
     const cached = svgCache.get(url);
     return cached?.viewBox ?? null;
   });
-  const [loading, setLoading] = useState6(() => !svgCache.has(url));
-  const [error, setError] = useState6(null);
+  const [loading, setLoading] = useState7(() => !svgCache.has(url));
+  const [error, setError] = useState7(null);
   useEffect6(() => {
     if (!url) {
       setLoading(false);