@bwp-web/components 1.3.2 → 1.4.0

package/dist/index.cjs

@@ -492,34 +492,134 @@ function BiampWrapper({ children, sx, ...props }) {
 // src/BiampSidebar/BiampSidebar.tsx
 var import_material2 = require("@mui/material");
 var import_assets = require("@bwp-web/assets");
+var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var BiampSidebarContext = (0, import_react.createContext)({
+  expanded: false
+});
 function BiampSidebar({
   children,
   bottomLogoIcon,
+  bottomLogoText,
+  expandable = true,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Stack, { width: "48px", height: "100%", sx: { ...sx }, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Stack, { height: "100%", children }),
-    bottomLogoIcon ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_assets.BiampLogoIcon, { sx: { width: "48px", height: "15px" } })
-  ] });
+  const [internalExpanded, setInternalExpanded] = (0, import_react.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__ */ (0, import_jsx_runtime2.jsx)(BiampSidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_material2.Stack,
+    {
+      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__ */ (0, import_jsx_runtime2.jsx)(import_material2.Stack, { sx: { flex: 1, minHeight: 0 }, children }),
+        expandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          BiampSidebarIcon,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_assets.SquareRoundedArrowRightIcon,
+              {
+                sx: {
+                  transform: expanded ? "rotate(180deg)" : "none",
+                  transition: ({ transitions }) => transitions.create("transform", {
+                    duration: transitions.duration.shorter
+                  })
+                }
+              }
+            ),
+            name: "Collapse menu",
+            onClick: toggleExpanded
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material2.Stack,
+          {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            sx: { mt: 2, overflow: "hidden" },
+            children: [
+              bottomLogoIcon ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_assets.BiampLogoIcon,
+                {
+                  sx: { width: "48px", height: "15px", flexShrink: 0 }
+                }
+              ),
+              bottomLogoText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material2.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__ */ (0, import_jsx_runtime2.jsx)(import_material2.Stack, { height: "100%", sx: { gap: "4px", ...sx }, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material2.Stack,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        gap: "4px",
+        overflowY: "auto",
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
 }
 function BiampSidebarIcon({
   selected,
   icon,
   selectedIcon,
+  name,
   sx,
   ...props
 }) {
+  const { expanded } = (0, import_react.useContext)(BiampSidebarContext);
   const displayedSelectedIcon = selectedIcon ?? icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     import_material2.ListItemButton,
     {
       selected,
@@ -527,16 +627,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__ */ (0, import_jsx_runtime2.jsx)(
+          import_material2.Box,
+          {
+            sx: {
+              width: "48px",
+              height: "48px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: selected ? displayedSelectedIcon : icon
+          }
+        ),
+        name && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material2.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
+          }
+        )
+      ]
     }
   );
 }
@@ -568,6 +702,7 @@ function BiampSidebarComponent({
 
 // src/BiampHeader/BiampHeader.tsx
 var import_material3 = require("@mui/material");
+var import_react2 = require("react");
 var import_assets2 = require("@bwp-web/assets");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function BiampHeader({ children, sx, ...props }) {
@@ -810,12 +945,17 @@ function BiampEndUserAppContent({
   sx,
   ...props
 }) {
+  const isGrid = import_react2.Children.count(children) > 1;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_material3.Stack,
     {
       direction: "column",
       sx: {
         gap: 1.5,
+        ...isGrid && {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr"
+        },
         ...sx
       },
       ...props,
@@ -953,14 +1093,14 @@ function BiampLayout({
 var import_material9 = require("@mui/material");
 var import_assets6 = require("@bwp-web/assets");
 var import_react_table2 = require("@tanstack/react-table");
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/BiampTable/BiampTableEmptyState.tsx
 var import_assets3 = require("@bwp-web/assets");
 
 // src/BiampTable/BiampTableStatusMessage.tsx
 var import_material5 = require("@mui/material");
-var import_react = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function BiampTableStatusMessage({
   icon,
@@ -970,7 +1110,7 @@ function BiampTableStatusMessage({
   ...stackProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Stack, { alignItems: "center", gap: 1.5, ...stackProps, children: [
-    (0, import_react.cloneElement)(icon, {
+    (0, import_react3.cloneElement)(icon, {
       "aria-hidden": true,
       sx: { width: 56, height: 56, ...icon.props.sx }
     }),
@@ -1013,24 +1153,24 @@ function BiampTableErrorState({
 var import_material8 = require("@mui/material");
 var import_assets5 = require("@bwp-web/assets");
 var import_react_table = require("@tanstack/react-table");
-var import_react3 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/BiampTable/BiampTableTruncatedCell.tsx
 var import_material6 = require("@mui/material");
-var import_react2 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function BiampTableTruncatedCell({
   children
 }) {
-  const textRef = (0, import_react2.useRef)(null);
-  const [open, setOpen] = (0, import_react2.useState)(false);
-  const handleMouseEnter = (0, import_react2.useCallback)(() => {
+  const textRef = (0, import_react4.useRef)(null);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const handleMouseEnter = (0, import_react4.useCallback)(() => {
     const el = textRef.current;
     if (el && el.scrollWidth > el.clientWidth) {
       setOpen(true);
     }
   }, []);
-  const handleMouseLeave = (0, import_react2.useCallback)(() => {
+  const handleMouseLeave = (0, import_react4.useCallback)(() => {
     setOpen(false);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1424,23 +1564,23 @@ function BiampTableRowInner({
 function biampTableRowPropsAreEqual(prev, next) {
   return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.isExpanded === next.isExpanded && prev.row.getVisibleCells().length === next.row.getVisibleCells().length && prev.enableRowSelection === next.enableRowSelection && prev.enableExpanding === next.enableExpanding && prev.alwaysExpanded === next.alwaysExpanded && prev.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.showExpandGuidelines === next.showExpandGuidelines && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel && prev.customColor === next.customColor && prev.rowSlotProps === next.rowSlotProps && prev.cellSlotProps === next.cellSlotProps;
 }
-var BiampTableRow = import_react3.default.memo(
+var BiampTableRow = import_react5.default.memo(
   BiampTableRowInner,
   biampTableRowPropsAreEqual
 );
 
 // src/BiampTable/useLoadingDelay.ts
-var import_react4 = require("react");
+var import_react6 = require("react");
 function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
-  const [status, setStatus] = (0, import_react4.useState)("idle");
-  const timeoutRef = (0, import_react4.useRef)(null);
+  const [status, setStatus] = (0, import_react6.useState)("idle");
+  const timeoutRef = (0, import_react6.useRef)(null);
   function clearPending() {
     if (timeoutRef.current !== null) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (loading && status === "idle") {
       clearPending();
       timeoutRef.current = setTimeout(() => {
@@ -1456,7 +1596,7 @@ function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
       setStatus("idle");
     }
   }, [loading, delay, minDuration, status]);
-  (0, import_react4.useEffect)(() => clearPending, []);
+  (0, import_react6.useEffect)(() => clearPending, []);
   return status === "loading" || status === "ending";
 }
 
@@ -1510,8 +1650,8 @@ function BiampTable({
     },
     enableRowSelection ? 48 : 0
   );
-  const containerRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const containerRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     if (enableExpanding && alwaysExpanded) {
       table.toggleAllRowsExpanded(true);
     }
@@ -1819,7 +1959,7 @@ function BiampTableColumnVisibility({
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
 var import_assets7 = require("@bwp-web/assets");
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 var import_material13 = require("@mui/material");
@@ -1869,7 +2009,7 @@ function BiampTableToolbarColumnVisibility({
   showAllLabel,
   ...actionButtonProps
 }) {
-  const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react8.useState)(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
@@ -1896,7 +2036,7 @@ function BiampTableToolbarColumnVisibility({
 }
 
 // src/BiampTable/BiampTablePagination.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_material14 = require("@mui/material");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var positionMap = {
@@ -1914,14 +2054,14 @@ function BiampTablePagination({
   ...paginationProps
 }) {
   const rowCount = table.getRowCount();
-  const lastRowCountRef = (0, import_react7.useRef)(rowCount);
+  const lastRowCountRef = (0, import_react9.useRef)(rowCount);
   if (!loading && rowCount >= 0) {
     lastRowCountRef.current = rowCount;
   }
   const stableCount = loading ? lastRowCountRef.current : rowCount;
   const { pageSize, pageIndex } = table.getState().pagination;
   const maxPage = Math.max(0, Math.ceil(stableCount / pageSize) - 1);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!loading && pageIndex > maxPage) {
       table.setPageIndex(maxPage);
     }
@@ -2031,7 +2171,7 @@ function BiampTableToolbarExport({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 var import_material18 = require("@mui/material");
 var import_assets9 = require("@bwp-web/assets");
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function BiampTableToolbarFilters({
   activeFilterCount,
@@ -2046,8 +2186,8 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = (0, import_react8.useState)(false);
-  const titleId = (0, import_react8.useId)();
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const titleId = (0, import_react10.useId)();
   function handleClose() {
     onApply?.();
     setOpen(false);
@@ -2164,21 +2304,21 @@ function BiampTableToolbarFilters({
 // src/BiampTable/BiampTableToolbarSearch.tsx
 var import_material19 = require("@mui/material");
 var import_assets10 = require("@bwp-web/assets");
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/BiampTable/useDebouncedCallback.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
-  const timeoutRef = (0, import_react9.useRef)(null);
-  const callbackRef = (0, import_react9.useRef)(callback);
+  const timeoutRef = (0, import_react11.useRef)(null);
+  const callbackRef = (0, import_react11.useRef)(callback);
   callbackRef.current = callback;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  return (0, import_react9.useCallback)(
+  return (0, import_react11.useCallback)(
     (...args) => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(
@@ -2216,10 +2356,10 @@ function BiampTableToolbarSearch({
   ...textFieldProps
 }) {
   const isMobile = (0, import_material19.useMediaQuery)((t) => t.breakpoints.down("md"));
-  const [inputValue, setInputValue] = (0, import_react10.useState)(defaultValue);
-  const [isExpanded, setIsExpanded] = (0, import_react10.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react12.useState)(defaultValue);
+  const [isExpanded, setIsExpanded] = (0, import_react12.useState)(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {
@@ -2337,7 +2477,7 @@ function BiampTableToolbarSearch({
 
 // src/BiampTable/useBiampServerSideTable.ts
 var import_react_table3 = require("@tanstack/react-table");
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/BiampTable/serverSideTableUtils.ts
 function orderToSorting(order, fieldToColumnId) {
@@ -2415,28 +2555,28 @@ function useBiampServerSideTable({
   onExpandedChange,
   getSubRows
 }) {
-  const { defaultColumnVisibility, columnIdToField, fieldToColumnId } = (0, import_react11.useMemo)(
+  const { defaultColumnVisibility, columnIdToField, fieldToColumnId } = (0, import_react13.useMemo)(
     () => ({
       defaultColumnVisibility: getDefaultColumnVisibilityFromDefs(columns),
       ...getOrderFieldMappings(columns)
     }),
     [columns]
   );
-  const sorting = (0, import_react11.useMemo)(
+  const sorting = (0, import_react13.useMemo)(
     () => orderToSorting(order, fieldToColumnId),
     [order, fieldToColumnId]
   );
   const hasPagination = page != null && rowsPerPage != null;
-  const pagination = (0, import_react11.useMemo)(
+  const pagination = (0, import_react13.useMemo)(
     () => hasPagination ? { pageIndex: page, pageSize: rowsPerPage } : void 0,
     [hasPagination, page, rowsPerPage]
   );
   const hasSelection = selectedRowIds != null;
-  const rowSelection = (0, import_react11.useMemo)(
+  const rowSelection = (0, import_react13.useMemo)(
     () => hasSelection ? selectedIdsToRowSelection(selectedRowIds) : void 0,
     [hasSelection, selectedRowIds]
   );
-  const mergedVisibility = (0, import_react11.useMemo)(
+  const mergedVisibility = (0, import_react13.useMemo)(
     () => toVisibilityState({
       ...defaultColumnVisibility,
       ...columnVisibility
@@ -2643,11 +2783,11 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
 }
 
 // src/BiampGlobalSearch/BiampGlobalSearch.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_material23 = require("@mui/material");
 var import_assets12 = require("@bwp-web/assets");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SearchContext = (0, import_react12.createContext)({
+var SearchContext = (0, import_react14.createContext)({
   hasOptions: true,
   loading: false,
   noResultsText: "No results found",
@@ -2682,9 +2822,9 @@ function KeyCap({
     }
   );
 }
-var BiampGlobalSearchPaper = (0, import_react12.forwardRef)(
+var BiampGlobalSearchPaper = (0, import_react14.forwardRef)(
   function BiampGlobalSearchPaper2({ children, ...props }, ref) {
-    const { hasOptions, loading, noResultsText } = (0, import_react12.useContext)(SearchContext);
+    const { hasOptions, loading, noResultsText } = (0, import_react14.useContext)(SearchContext);
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material23.Paper, { ref, ...props, children: [
       hasOptions || loading ? children : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         import_material23.Typography,
@@ -2769,7 +2909,7 @@ function BiampGlobalSearchListItem({
   option,
   props: liProps
 }) {
-  const { query } = (0, import_react12.useContext)(SearchContext);
+  const { query } = (0, import_react14.useContext)(SearchContext);
   const { key, ...rest } = liProps;
   const maxChips = 3;
   const chips = option.associatedItems?.slice(0, maxChips) ?? [];
@@ -3051,7 +3191,7 @@ var getInitials = (name) => {
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
 var import_material25 = require("@mui/material");
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
@@ -3063,17 +3203,17 @@ function applyCurrentColor(svg) {
 function useDynamicSvgIcon(url, options = {}) {
   const { replaceColors = false, onLoad, onError } = options;
   const transform = replaceColors ? applyCurrentColor : (s) => s;
-  const [svgContent, setSvgContent] = (0, import_react13.useState)(() => {
+  const [svgContent, setSvgContent] = (0, import_react15.useState)(() => {
     const cached = svgCache.get(url);
     return cached ? transform(cached.innerContent) : null;
   });
-  const [svgViewBox, setSvgViewBox] = (0, import_react13.useState)(() => {
+  const [svgViewBox, setSvgViewBox] = (0, import_react15.useState)(() => {
     const cached = svgCache.get(url);
     return cached?.viewBox ?? null;
   });
-  const [loading, setLoading] = (0, import_react13.useState)(() => !svgCache.has(url));
-  const [error, setError] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
+  const [loading, setLoading] = (0, import_react15.useState)(() => !svgCache.has(url));
+  const [error, setError] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     if (!url) {
       setLoading(false);
       setError("No URL provided");