@bwp-web/components 1.1.2 → 1.3.0

package/dist/index.js

@@ -509,7 +509,7 @@ import {
   TextField,
   Typography
 } from "@mui/material";
-import { BiampRedLogo, SearchIcon } from "@bwp-web/assets";
+import { BiampRedLogo, ExternalLinkIcon, SearchIcon } from "@bwp-web/assets";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function BiampHeader({ children, sx, ...props }) {
   return /* @__PURE__ */ jsx3(
@@ -659,6 +659,7 @@ function BiampHeaderButton({
     }
   );
 }
+var POPOVER_MAX_WIDTH = 530;
 function BiampAppPopover({
   children,
   open,
@@ -669,9 +670,9 @@ function BiampAppPopover({
     Popover,
     {
       open,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: -8, horizontal: POPOVER_MAX_WIDTH - 4 },
       sx: { ...sx },
-      transformOrigin: { vertical: -4, horizontal: 150 },
       slotProps: {
         paper: {
           sx: {
@@ -680,7 +681,13 @@ function BiampAppPopover({
             outlineWidth: "0.6px",
             outlineStyle: "solid",
             outlineColor: ({ palette }) => palette.divider,
-            boxShadow: ({ palette }) => `0px 4px 24px 0px ${alpha(palette.common.black, 0.15)};`
+            boxShadow: ({ palette }) => `0px 4px 24px 0px ${alpha(palette.common.black, 0.15)};`,
+            maxWidth: POPOVER_MAX_WIDTH,
+            width: "100%",
+            p: 2,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2
           }
         }
       },
@@ -689,7 +696,7 @@ function BiampAppPopover({
     }
   );
 }
-function BiampAppDialog({
+function BiampBuildAppContent({
   children,
   sx,
   ...props
@@ -698,13 +705,9 @@ function BiampAppDialog({
     Box2,
     {
       sx: {
-        p: 2,
-        display: "inline-flex",
-        flexWrap: "wrap",
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
         gap: 1.5,
-        maxWidth: "284px",
-        borderRadius: "16px",
-        backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.common.white,
         ...sx
       },
       ...props,
@@ -712,64 +715,92 @@ function BiampAppDialog({
     }
   );
 }
-function BiampAppDialogItem({
+function BiampBuildAppContentItem({
+  image,
+  name,
+  description,
+  button,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    Stack3,
+    {
+      direction: "column",
+      position: "relative",
+      sx: {
+        p: 1.5,
+        borderRadius: 1.5,
+        outlineWidth: "1px",
+        outlineStyle: "solid",
+        outlineColor: ({ palette }) => palette.divider,
+        ...sx
+      },
+      ...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 }),
+        button && /* @__PURE__ */ jsx3(Box2, { position: "absolute", top: "12px", right: "12px", children: button })
+      ]
+    }
+  );
+}
+function BiampEndUserAppContent({
   children,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    Stack3,
+    {
+      direction: "column",
+      sx: {
+        gap: 1.5,
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+}
+function BiampEndUserAppContentItem({
+  image,
   name,
+  description,
+  href,
+  target,
   sx,
   ...props
 }) {
   return /* @__PURE__ */ jsxs2(
-    Box2,
+    Stack3,
     {
+      component: href ? "a" : "div",
+      href,
+      target,
+      direction: "row",
+      alignItems: "center",
       sx: {
-        width: "76px",
-        height: "89px",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        cursor: "pointer",
-        justifyContent: "center",
-        gap: "4px",
-        borderRadius: "12px",
-        border: "0.6px solid transparent",
-        transition: "background-color 0.2s ease, border-color 0.2s ease",
-        ":hover": {
-          backgroundColor: ({ palette }) => alpha(palette.info.main, 0.1),
-          borderColor: ({ palette }) => palette.info.main
-        },
+        gap: 1.5,
+        p: 1.5,
+        borderRadius: 1.5,
+        outlineWidth: "1px",
+        outlineStyle: "solid",
+        outlineColor: ({ palette }) => palette.divider,
+        textDecoration: "none",
+        color: "inherit",
+        cursor: href ? "pointer" : void 0,
         ...sx
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx3(
-          Box2,
-          {
-            sx: {
-              mt: "8px",
-              width: "54px",
-              height: "54px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Typography,
-          {
-            variant: "caption",
-            fontWeight: 600,
-            sx: {
-              textAlign: "center",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              maxWidth: "100%"
-            },
-            children: name
-          }
-        )
+        /* @__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(ExternalLinkIcon, { sx: { width: 16, height: 16, ml: "auto" } })
       ]
     }
   );
@@ -878,7 +909,9 @@ import {
   DropdownChevronDownIcon,
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
-import { flexRender } from "@tanstack/react-table";
+import {
+  flexRender
+} from "@tanstack/react-table";
 import React2, { useRef as useRef3 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
@@ -1012,6 +1045,15 @@ function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
   return status === "loading" || status === "ending";
 }
 
+// src/BiampTable/slotProps.ts
+function resolveSlot(slot, ctx) {
+  if (!slot) return void 0;
+  return typeof slot === "function" ? slot(ctx) : slot;
+}
+function mergeSx(...inputs) {
+  return inputs.filter((v) => Boolean(v)).flatMap((v) => Array.isArray(v) ? v : [v]);
+}
+
 // src/BiampTable/BiampTable.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var overlaySx = {
@@ -1082,24 +1124,38 @@ function BiampTableRowInner({
   enableExpanding,
   selectChildrenWithParent,
   getRowLabel,
-  hasExpandableRows
+  hasExpandableRows,
+  rowSlotProps,
+  cellSlotProps
 }) {
   const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
+  const resolvedRow = resolveSlot(rowSlotProps, { row });
+  const {
+    sx: userRowSx,
+    onClick: userRowOnClick,
+    onKeyDown: userRowOnKeyDown,
+    ...restRowProps
+  } = resolvedRow ?? {};
   return /* @__PURE__ */ jsxs5(
     TableRow,
     {
+      ...restRowProps,
       hover: clickable,
       selected: enableRowSelection ? isSelected : void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
-      sx: clickable ? rowCursorPointerSx : void 0,
-      onClick: clickable && onRowClick ? () => onRowClick(row.original) : void 0,
+      sx: mergeSx(clickable && rowCursorPointerSx, userRowSx),
+      onClick: clickable && onRowClick ? (e) => {
+        onRowClick(row.original);
+        userRowOnClick?.(e);
+      } : userRowOnClick,
       onKeyDown: clickable && onRowClick ? (e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           onRowClick(row.original);
         }
-      } : void 0,
+        userRowOnKeyDown?.(e);
+      } : userRowOnKeyDown,
       children: [
         enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: selectionCellSx, children: /* @__PURE__ */ jsx8(
           Checkbox,
@@ -1125,14 +1181,18 @@ function BiampTableRowInner({
             cell.column.columnDef.cell,
             cell.getContext()
           );
+          const resolvedCell = resolveSlot(cellSlotProps, { cell });
+          const { sx: userCellSx, ...restCellProps } = resolvedCell ?? {};
           return /* @__PURE__ */ jsx8(
             TableCell,
             {
+              ...restCellProps,
               "data-sticky": sticky || void 0,
-              sx: {
-                ...cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
-                pl: isExpandCell ? "6px" : "12px"
-              },
+              sx: mergeSx(
+                cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
+                { pl: isExpandCell ? "6px" : "12px" },
+                userCellSx
+              ),
               children: (() => {
                 if (sticky) return content;
                 const truncate = cell.column.columnDef.meta?.truncate ?? true;
@@ -1188,7 +1248,7 @@ 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.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel;
+  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.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel && prev.rowSlotProps === next.rowSlotProps && prev.cellSlotProps === next.cellSlotProps;
 }
 var BiampTableRow = React2.memo(
   BiampTableRowInner,
@@ -1206,9 +1266,14 @@ function BiampTable({
   hideSelectAll,
   selectChildrenWithParent = false,
   getRowLabel,
+  slotProps,
   sx,
   ...boxProps
 }) {
+  const { sx: userTableSx, ...restTableSlotProps } = slotProps?.table ?? {};
+  const { sx: userHeadSx, ...restHeadSlotProps } = slotProps?.head ?? {};
+  const { sx: userBodySx, ...restBodySlotProps } = slotProps?.body ?? {};
+  const { sx: userHeaderRowSx, ...restHeaderRowSlotProps } = slotProps?.headerRow ?? {};
   const tableMinWidth = table.getVisibleLeafColumns().reduce(
     (sum, col) => {
       const mw = col.columnDef.meta?.minWidth;
@@ -1240,73 +1305,98 @@ function BiampTable({
           MuiTable,
           {
             "aria-busy": showLoading || void 0,
-            sx: { minWidth: tableMinWidth, tableLayout: "auto" },
+            ...restTableSlotProps,
+            sx: mergeSx(
+              { minWidth: tableMinWidth, tableLayout: "auto" },
+              userTableSx
+            ),
             children: [
-              /* @__PURE__ */ jsx8(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(TableRow, { children: [
-                enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx8(
-                  Checkbox,
-                  {
-                    checked: table.getIsAllPageRowsSelected(),
-                    indeterminate: table.getIsSomePageRowsSelected(),
-                    onChange: table.getToggleAllPageRowsSelectedHandler(),
-                    sx: rows.length === 0 ? checkboxHiddenHeaderSx : void 0,
-                    slotProps: { input: { "aria-label": "Select all rows" } }
-                  }
-                ) }),
-                headerGroup.headers.map((header) => {
-                  const sticky = header.column.columnDef.meta?.sticky;
-                  return /* @__PURE__ */ jsx8(
-                    TableCell,
-                    {
-                      "data-sticky": sticky || void 0,
-                      sortDirection: header.column.getIsSorted() || false,
-                      ...header.column.getCanSort() && {
-                        "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
-                      },
-                      sx: cellSx(
-                        sticky,
-                        header.column.columnDef.meta?.minWidth,
-                        3
-                      ),
-                      children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx8(
-                        TableSortLabel,
+              /* @__PURE__ */ jsx8(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(
+                TableRow,
+                {
+                  ...restHeaderRowSlotProps,
+                  sx: mergeSx(userHeaderRowSx),
+                  children: [
+                    enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx8(
+                      Checkbox,
+                      {
+                        checked: table.getIsAllPageRowsSelected(),
+                        indeterminate: table.getIsSomePageRowsSelected(),
+                        onChange: table.getToggleAllPageRowsSelectedHandler(),
+                        sx: rows.length === 0 ? checkboxHiddenHeaderSx : void 0,
+                        slotProps: { input: { "aria-label": "Select all rows" } }
+                      }
+                    ) }),
+                    headerGroup.headers.map((header) => {
+                      const sticky = header.column.columnDef.meta?.sticky;
+                      const resolvedHeaderCell = resolveSlot(slotProps?.headerCell, {
+                        header
+                      });
+                      const { sx: userHeaderCellSx, ...restHeaderCellProps } = resolvedHeaderCell ?? {};
+                      return /* @__PURE__ */ jsx8(
+                        TableCell,
                         {
-                          active: !!header.column.getIsSorted(),
-                          direction: header.column.getIsSorted() || "asc",
-                          onClick: header.column.getToggleSortingHandler(),
-                          ...header.column.getIsSorted() && {
-                            IconComponent: header.column.getIsSorted() === "asc" ? DropdownChevronUpIcon : DropdownChevronDownIcon
+                          ...restHeaderCellProps,
+                          "data-sticky": sticky || void 0,
+                          sortDirection: header.column.getIsSorted() || false,
+                          ...header.column.getCanSort() && {
+                            "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
                           },
-                          children: flexRender(
+                          sx: mergeSx(
+                            cellSx(sticky, header.column.columnDef.meta?.minWidth, 3),
+                            userHeaderCellSx
+                          ),
+                          children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx8(
+                            TableSortLabel,
+                            {
+                              active: !!header.column.getIsSorted(),
+                              direction: header.column.getIsSorted() || "asc",
+                              onClick: header.column.getToggleSortingHandler(),
+                              ...header.column.getIsSorted() && {
+                                IconComponent: header.column.getIsSorted() === "asc" ? DropdownChevronUpIcon : DropdownChevronDownIcon
+                              },
+                              children: flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )
+                            }
+                          ) : flexRender(
                             header.column.columnDef.header,
                             header.getContext()
                           )
-                        }
-                      ) : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )
-                    },
-                    header.id
-                  );
-                })
-              ] }, headerGroup.id)) }),
-              /* @__PURE__ */ jsx8(TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => /* @__PURE__ */ jsx8(
-                BiampTableRow,
-                {
-                  row,
-                  isExpanded: row.getIsExpanded(),
-                  isSelected: row.getIsSelected(),
-                  onRowClick,
-                  isRowClickable,
-                  enableRowSelection,
-                  enableExpanding,
-                  selectChildrenWithParent,
-                  getRowLabel,
-                  hasExpandableRows
+                        },
+                        header.id
+                      );
+                    })
+                  ]
                 },
-                row.id
-              )) })
+                headerGroup.id
+              )) }),
+              /* @__PURE__ */ jsx8(
+                TableBody,
+                {
+                  ...restBodySlotProps,
+                  sx: mergeSx({ opacity: showLoading ? 0.3 : 1 }, userBodySx),
+                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx8(
+                    BiampTableRow,
+                    {
+                      row,
+                      isExpanded: row.getIsExpanded(),
+                      isSelected: row.getIsSelected(),
+                      onRowClick,
+                      isRowClickable,
+                      enableRowSelection,
+                      enableExpanding,
+                      selectChildrenWithParent,
+                      getRowLabel,
+                      hasExpandableRows,
+                      rowSlotProps: slotProps?.row,
+                      cellSlotProps: slotProps?.cell
+                    },
+                    row.id
+                  ))
+                }
+              )
             ]
           }
         ),
@@ -2922,13 +3012,15 @@ function DynamicSvgIcon({
 }
 export {
   BIAMP_TABLE_DEBOUNCE_DELAY,
-  BiampAppDialog,
-  BiampAppDialogItem,
   BiampAppPopover,
   BiampBanner,
   BiampBannerActions,
   BiampBannerContent,
   BiampBannerIcon,
+  BiampBuildAppContent,
+  BiampBuildAppContentItem,
+  BiampEndUserAppContent,
+  BiampEndUserAppContentItem,
   BiampGlobalSearch,
   BiampHeader,
   BiampHeaderActions,