@superblocksteam/library 2.0.0-next.32 → 2.0.0-next.33

package/dist/{index-RG7SFiT3.js → index-BrVR4QxR.js}

@@ -2690,14 +2690,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CnJzd6Xx.js"
+            "./allPathsLoader-BY9j7WyS.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-ZzgI9e09.js"
+            "./splitPathsBySizeLoader-BLG5xgfE.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -114804,6 +114804,178 @@ var KeyValuePropertyType = /* @__PURE__ */ ((KeyValuePropertyType2) => {
   KeyValuePropertyType2["EMAIL"] = "email";
   return KeyValuePropertyType2;
 })(KeyValuePropertyType || {});
+const DEFAULT_TABLE_DATA = [
+  {
+    photo: "https://cdn.superblocks.com/sample-data/rachel_kim",
+    name: "Rachel Kim",
+    email: "rachel.kim89@gmail.com",
+    role: "Vendor Partner",
+    company: "Urban Threads Co.",
+    status: "Active",
+    date_joined: "2023-04-12",
+    last_activity: "2025-06-07T16:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/daniel_vargas",
+    name: "Daniel Vargas",
+    email: "dvargas1984@yahoo.com",
+    role: "Logistics Contact",
+    company: "Vargas Freight Ltd.",
+    status: "Pending",
+    date_joined: "2024-01-23",
+    last_activity: "2025-05-30T13:45:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/sophie_liu",
+    name: "Sophie Liu",
+    email: "sophie.liu.personal@gmail.com",
+    role: "Retail Manager",
+    company: "Modern Goods",
+    status: "Active",
+    date_joined: "2022-09-10",
+    last_activity: "2025-06-08T09:03:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/omar_el-sayed",
+    name: "Omar El-Sayed",
+    email: "omarsayed78@hotmail.com",
+    role: "Accounts Payable",
+    company: "Sayed Textiles",
+    status: "Inactive",
+    date_joined: "2021-06-05",
+    last_activity: "2024-12-18T11:40:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/grace_nguyen",
+    name: "Grace Nguyen",
+    email: "gracenguyen23@icloud.com",
+    role: "Product Supplier",
+    company: "Green Earth Supplies",
+    status: "Active",
+    date_joined: "2023-11-03",
+    last_activity: "2025-06-08T17:28:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/alex_romero",
+    name: "Alex Romero",
+    email: "alex.romero@gmail.com",
+    role: "Client Account Owner",
+    company: "Romero & Co.",
+    status: "Suspended",
+    date_joined: "2022-02-28",
+    last_activity: "2025-03-11T08:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/lena_schmidt",
+    name: "Lena Schmidt",
+    email: "lena_schmidt92@gmx.de",
+    role: "Wholesale Contact",
+    company: "Schmidt Imports",
+    status: "Active",
+    date_joined: "2021-12-01",
+    last_activity: "2025-06-06T21:10:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/devon_price",
+    name: "Devon Price",
+    email: "devon.price22@aol.com",
+    role: "Fulfillment Liaison",
+    company: "DepotLink",
+    status: "Active",
+    date_joined: "2024-05-17",
+    last_activity: "2025-06-08T10:42:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/isabella_rossi",
+    name: "Isabella Rossi",
+    email: "bella.rossi@gmail.com",
+    role: "Procurement Agent",
+    company: "Rossi Global Sourcing",
+    status: "Pending",
+    date_joined: "2023-07-19",
+    last_activity: "2025-05-29T14:05:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/tariq_khan",
+    name: "Tariq Khan",
+    email: "tariq.khan92@protonmail.com",
+    role: "International Ops Lead",
+    company: "CrossPort Trade Inc.",
+    status: "Active",
+    date_joined: "2022-11-08",
+    last_activity: "2025-06-08T16:11:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/emily_zhang",
+    name: "Emily Zhang",
+    email: "emilyzhang.home@gmail.com",
+    role: "Logistics Coordinator",
+    company: "Zhang Export Ltd.",
+    status: "Active",
+    date_joined: "2023-03-12",
+    last_activity: "2025-06-08T19:02:00Z"
+  }
+];
+const DEFAULT_TABLE_COLUMNS = {
+  name: {
+    columnType: "text",
+    label: "Name"
+  },
+  email: {
+    columnType: "email",
+    label: "Email"
+  },
+  role: {
+    columnType: "text",
+    label: "Role"
+  },
+  company: {
+    columnType: "text",
+    label: "Company"
+  },
+  status: {
+    columnType: "tags",
+    tagDisplayConfig: {
+      Active: {
+        color: "#14CDB733"
+      },
+      Pending: {
+        color: "#FF9F3533"
+      },
+      Inactive: {
+        color: "#a6a0a033"
+      },
+      Suspended: {
+        color: "#FF62A433"
+      }
+    },
+    label: "Status"
+  },
+  date_joined: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DD",
+    outputFormat: "MM-DD-YYYY",
+    label: "Date joined"
+  },
+  last_activity: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DDTHH:mm:ssZ",
+    outputFormat: "MM-DD-YYYY",
+    label: "Last activity"
+  },
+  photo: {
+    columnType: "image",
+    label: "Photo"
+  }
+};
+const DEFAULT_TABLE_KEYS = Object.keys(DEFAULT_TABLE_COLUMNS);
+const CLEARED_TABLE_COLUMNS = DEFAULT_TABLE_KEYS.reduce(
+  (acc, key2) => {
+    acc[key2] = void 0;
+    return acc;
+  },
+  {}
+);
 function getParentInfo(parent) {
   const parentComponentMeta = getEditStore().runtimeEntitiesManager.getAnyEditorWidgetMeta(parent.id);
   const isParentGridLike = isWidgetGrid(parentComponentMeta);
@@ -115049,6 +115221,12 @@ function getComponentBaseProperties(componentType, parentInfo) {
     case "SbSection":
       children = getSectionChildren();
       break;
+    case "SbTable":
+      properties2.tableData = Property.Static(DEFAULT_TABLE_DATA);
+      properties2.columns = Property.Static(DEFAULT_TABLE_COLUMNS);
+      properties2.header = Property.Static("Customers");
+      properties2.searchPlaceholder = Property.Static("Search...");
+      break;
   }
   return {
     properties: properties2,
@@ -136644,10 +136822,6 @@ const HeaderCellContentWrapper = qe$1.div`
   var _a2, _b2;
   return ((_a2 = props == null ? void 0 : props.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[(_b2 = props == null ? void 0 : props.columnProperties) == null ? void 0 : _b2.horizontalAlign];
 }};
-
-  span {
-    ${({ shouldCapitalize }) => shouldCapitalize && `text-transform: capitalize;`}
-  }
 `;
 const TableIconWrapper = qe$1.div`
   width: ${(props) => props.tableSizes.TABLE_FOOTER_HEIGHT}px;
@@ -143842,14 +144016,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-V4FREx0I.js"
+            "./allPathsLoader-CwKpLPZa.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-D_n88SPK.js"
+            "./splitPathsBySizeLoader-BcyuYAqD.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -154822,7 +154996,7 @@ function getPageSize(props) {
   const compactMode = getCompactMode(props.compactMode);
   const componentHeight = ((_a2 = props == null ? void 0 : props.height) == null ? void 0 : _a2.mode) === "px" ? (_b2 = props == null ? void 0 : props.height) == null ? void 0 : _b2.value : (((_c2 = props == null ? void 0 : props.height) == null ? void 0 : _c2.value) ?? 0) * 12;
   const tableSizes = TABLE_SIZES[compactMode];
-  const headerHeight = props.isSearchable || props.tableHeader || ((_d2 = props.hiddenColumns) == null ? void 0 : _d2.length) > 0 ? tableSizes.TABLE_HEADER_HEIGHT : 0;
+  const headerHeight = props.isSearchable || props.header || ((_d2 = props.hiddenColumns) == null ? void 0 : _d2.length) > 0 ? tableSizes.TABLE_HEADER_HEIGHT : 0;
   const scrollbarSize = 8;
   const mainHeight = (componentHeight ?? 100) - headerHeight - scrollbarSize - tableSizes.TABLE_FOOTER_HEIGHT - tableSizes.COLUMN_HEADER_HEIGHT;
   const pageSize = Math.floor(mainHeight / (tableSizes.ROW_HEIGHT + 1));
@@ -155024,20 +155198,22 @@ function getFilteredTableData(props) {
       });
     }
   };
+  const searchText = props.searchText ?? "";
   const getSearchKey = () => {
-    if (props.searchText && (!props.onSearchTextChanged || props.enableClientSideSearch)) {
-      return props.searchText.toLowerCase();
+    if (searchText && props.enableClientSideSearch !== false) {
+      return searchText.toLowerCase();
     }
     return "";
   };
+  const filters = props.filters;
   const finalTableData = sortedTableData.filter((item) => {
     var _a3;
     const searchFound = getSearchKey() ? Object.values(item).join(", ").toLowerCase().includes(getSearchKey()) : true;
     if (!searchFound) return false;
     for (const [columnName, { byValue, condition }] of Object.entries(
-      ((_a3 = props.filters) == null ? void 0 : _a3.byColumn) ?? {}
+      (filters == null ? void 0 : filters.byColumn) ?? {}
     )) {
-      const column2 = props.columns[columnName];
+      const column2 = ((_a3 = props.columns) == null ? void 0 : _a3[columnName]) ?? {};
       const value = item[columnName];
       if (byValue) {
         const columnType = column2 && column2.columnType ? column2.columnType : "text";
@@ -155145,12 +155321,53 @@ function getFilteredTableData(props) {
 }
 const propertiesDefinition$9 = {
   general: Section.category(PropsPanelCategory.Content).children({
-    tableHeader: Prop.string().readAndWrite().default("").propertiesPanel({
+    header: Prop.string().readAndWrite().default("").propertiesPanel({
       label: "Header",
       placeholder: "Table name",
       helpText: "A header displayed at the top of the table"
     }),
-    tableData: Prop.array().readable().propertiesPanel({
+    tableData: Prop.array().onEdit(({ sourceId, updates, widgetMeta }) => {
+      try {
+        const [previousWidget, newWidget] = getPreviousAndCurrentWidgetProps(updates, widgetMeta);
+        if (lodashExports.isEqual(previousWidget == null ? void 0 : previousWidget.tableData, DEFAULT_TABLE_DATA)) {
+          let updatedTableData = newWidget == null ? void 0 : newWidget.tableData;
+          if (typeof updatedTableData === "string") {
+            updatedTableData = JSON.parse(updatedTableData);
+          }
+          if (!Array.isArray(updatedTableData) || typeof updatedTableData[0] !== "object") {
+            return {
+              [sourceId]: {
+                props: {
+                  columns: Property.Static({})
+                },
+                meta: {}
+              }
+            };
+          }
+          const colKeys = Object.keys(updatedTableData[0] ?? {});
+          if (!lodashExports.isEqual(colKeys, DEFAULT_TABLE_KEYS)) {
+            return {
+              [sourceId]: {
+                props: {
+                  columns: Property.Static(CLEARED_TABLE_COLUMNS)
+                },
+                meta: {}
+              }
+            };
+          }
+        }
+        return {};
+      } catch (_e2) {
+        return {
+          [sourceId]: {
+            props: {
+              columns: Property.Static(CLEARED_TABLE_COLUMNS)
+            },
+            meta: {}
+          }
+        };
+      }
+    }).readable().propertiesPanel({
       label: "Data",
       placeholder: '[{ "col1": "val1" }]',
       isJSConvertible: false,
@@ -155183,8 +155400,15 @@ const propertiesDefinition$9 = {
       helpText: "Enable per column filtering"
     }),
     defaultFilters: Prop.any().readAndWrite().propertiesPanel({
-      label: "Filters",
-      helpText: "Allows specifying the filters that will be used on page load"
+      controlType: "COMPUTED_CODE_EDITOR",
+      label: "Default filters",
+      visibility: "SHOW_NAME",
+      isJSConvertible: false,
+      isRemovable: true,
+      helpText: "Allows specifying the filters that will be used on page load",
+      isVisible: function() {
+        return this.isFilterable && this.pageType !== PaginationTypes.SERVER_SIDE;
+      }
     }),
     // enableRowInsertion: Prop.boolean()
     //   .readAndWrite()
@@ -155235,14 +155459,17 @@ const propertiesDefinition$9 = {
       ]
     }),
     defaultSort: Prop.composite({
-      // TODO: default should be dynamic based on the columns
-      column: Prop.string().default("name").propertiesPanel({
+      column: Prop.string().propertiesPanel({
         label: "Column",
         controlType: "SELECT_TABLE_COLUMN"
       }),
       asc: Prop.boolean().default(true).propertiesPanel({
         label: "Order",
-        controlType: "RADIO_BUTTON_GROUP"
+        controlType: "RADIO_BUTTON_GROUP",
+        options: [
+          { label: "Ascending", value: true },
+          { label: "Descending", value: false }
+        ]
       })
     }).propertiesPanel({
       label: "Default sort",
@@ -155255,7 +155482,10 @@ const propertiesDefinition$9 = {
     }),
     defaultSearchText: Prop.string().readAndWrite().propertiesPanel({
       label: "Default search",
-      helpText: "Sets the default search text"
+      helpText: "Sets the default search text",
+      isVisible: function() {
+        return this.enableClientSideSearch !== false;
+      }
     }),
     searchPlaceholder: Prop.string().readAndWrite().propertiesPanel({
       label: "Search placeholder",
@@ -155410,12 +155640,20 @@ const propertiesDefinition$9 = {
     // editedRowIndices: Prop.any().readable().default(getEditedRowIndices),
   }),
   meta: Section.category(PropsPanelCategory.Meta).children({
-    selectedRowIndex: Prop.number().readable(),
+    selectedRowIndex: Prop.number().readable().default(function() {
+      return this.defaultSelectedRow;
+    }),
     selectedRowIndices: Prop.any().readable(),
     pageNo: Prop.number().readable().default(() => 1),
-    sortedColumn: Prop.any().readable(),
-    searchText: Prop.string().readable(),
-    filters: Prop.any().readable(),
+    sortedColumn: Prop.any().readable().default(function() {
+      return this.defaultSort;
+    }),
+    searchText: Prop.string().readable().default(function() {
+      return this.defaultSearchText ?? "";
+    }),
+    filters: Prop.any().readable().default(function() {
+      return this.defaultFilters;
+    }),
     hiddenColumns: Prop.any().readable(),
     columnFreezes: Prop.any().readable(),
     tagsColorAssignment: Prop.any().readable()
@@ -164887,11 +165125,11 @@ const TableDataDownload = ({
   columns,
   tableSizes,
   widgetName,
-  tableHeader,
+  header,
   tableCellTextStyle
 }) => {
   const [selected, setSelected] = React__default.useState(false);
-  const tableName = tableHeader ? tableHeader : widgetName;
+  const tableName = header ? header : widgetName;
   const fileName = tableName;
   const handleSelectMenu = useCallback(() => {
     setSelected(true);
@@ -165228,7 +165466,7 @@ const TableFooter = ({
   tableColumns,
   tableData,
   filteredOrderMap,
-  tableHeader,
+  header,
   tableSizes,
   borderColor,
   updatePageNo,
@@ -165392,7 +165630,7 @@ const TableFooter = ({
           columns: tableColumns,
           widgetName,
           tableSizes,
-          tableHeader,
+          header,
           tableCellTextStyle
         }
       ),
@@ -167493,7 +167731,7 @@ const DescendingIcon = qe$1(SvgSort)`
   }
 `;
 const TableHeaderCell = (props) => {
-  var _a2, _b2, _c2;
+  var _a2;
   const { column: column2, selectRows } = props;
   const resizingColumnId = useRef("");
   const handleSortColumn = () => {
@@ -167510,7 +167748,6 @@ const TableHeaderCell = (props) => {
     defaultTextStyleVariant: TABLE_COLUMN_HEADER_DEFAULT_TYPOGRAPHY,
     textStyle: props.columnHeaderProps
   });
-  const columnHeaderTextStyleHasTextTransform = ((_a2 = columnHeaderStyleProps == null ? void 0 : columnHeaderStyleProps.style) == null ? void 0 : _a2.textTransform) !== void 0 && ((_b2 = columnHeaderStyleProps == null ? void 0 : columnHeaderStyleProps.style) == null ? void 0 : _b2.textTransform) !== "none";
   const { setColumnFilter } = props;
   const setFilter = useCallback(
     (filter2) => {
@@ -167572,7 +167809,6 @@ const TableHeaderCell = (props) => {
       HeaderCellContentWrapper,
       {
         columnProperties: props.columnProperties,
-        shouldCapitalize: !columnHeaderTextStyleHasTextTransform && props.columnName === column2.id,
         style: columnHeaderStyleProps.style,
         className: `${getTextCssClassFromVariant(
           columnHeaderStyleProps.textStyleVariant
@@ -167598,23 +167834,23 @@ const TableHeaderCell = (props) => {
           e3.stopPropagation();
         },
         onDragOver: (e3) => {
-          var _a3, _b3;
+          var _a3, _b2;
           if (props.columnIndex !== props.mutableHeaderDragRef.current && props.mutableHeaderDragRef.current !== -1) {
             if (props.mutableHeaderDragRef.current > props.columnIndex) {
               (_a3 = parentRef.current) == null ? void 0 : _a3.classList.add("highlight-left");
             } else if (props.mutableHeaderDragRef.current < props.columnIndex) {
-              (_b3 = parentRef.current) == null ? void 0 : _b3.classList.add("highlight-right");
+              (_b2 = parentRef.current) == null ? void 0 : _b2.classList.add("highlight-right");
             }
           }
           e3.preventDefault();
         },
         onDragEnter: (e3) => {
-          var _a3, _b3;
+          var _a3, _b2;
           if (props.columnIndex !== props.mutableHeaderDragRef.current && props.mutableHeaderDragRef.current !== -1) {
             if (props.mutableHeaderDragRef.current > props.columnIndex) {
               (_a3 = parentRef.current) == null ? void 0 : _a3.classList.add("highlight-left");
             } else if (props.mutableHeaderDragRef.current < props.columnIndex) {
-              (_b3 = parentRef.current) == null ? void 0 : _b3.classList.add("highlight-right");
+              (_b2 = parentRef.current) == null ? void 0 : _b2.classList.add("highlight-right");
             }
           }
           e3.preventDefault();
@@ -167666,7 +167902,7 @@ const TableHeaderCell = (props) => {
         isFrozen: getIsColumnFrozen(
           props.column.id,
           props.columnFreezes,
-          (_c2 = props.columnProperties) == null ? void 0 : _c2.isFrozen
+          (_a2 = props.columnProperties) == null ? void 0 : _a2.isFrozen
         ),
         theme: props.theme,
         updateProperty: props.updateProperty
@@ -168281,7 +168517,7 @@ const Table = (props) => {
   const selectedRowIndices = props.selectedRowIndices || [];
   const canDelete = props.isDeletionEnabled && (selectedRowIndices.length > 0 || selectedRowIndex != null && selectedRowIndex >= 0);
   const hasFooter = props.pageType !== PaginationTypes.NONE || props.isDownloadable || props.numEdits != null && props.numEdits > 0 || props.isInsertionEnabled || canDelete;
-  const hasHeader = props.isSearchable || !lodashExports.isEmpty(props.tableHeader) || props.hiddenColumns && ((_a2 = props.hiddenColumns) == null ? void 0 : _a2.length) > 0;
+  const hasHeader = props.isSearchable || !lodashExports.isEmpty(props.header) || props.hiddenColumns && ((_a2 = props.hiddenColumns) == null ? void 0 : _a2.length) > 0;
   const pageSize = props.pageType === PaginationTypes.NONE ? props.tableData.length : props.pageSize;
   const pageCount = Math.ceil(props.tableData.length / pageSize) || 1;
   const currentPageIndex = props.pageNo < pageCount ? props.pageNo : 0;
@@ -168879,7 +169115,7 @@ const Table = (props) => {
             searchKey: props.searchKey,
             tableSizes,
             compactMode: getCompactMode(props.compactMode),
-            title: props.tableHeader,
+            title: props.header,
             columns: props.columns,
             hiddenColumns: props.hiddenColumns,
             searchPlaceholder: props.searchPlaceholder,
@@ -169032,7 +169268,7 @@ const Table = (props) => {
             tableColumns: props.columns,
             tableData: props.tableData,
             filteredOrderMap: props.filteredOrderMap,
-            tableHeader: props.tableHeader,
+            header: props.header,
             tableSizes,
             updatePageNo: props.updatePageNo,
             widgetName: props.widgetName,
@@ -170657,7 +170893,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
         isSearchable: this.props.isSearchable,
         isDownloadable: this.props.isDownloadable,
         isFilterable: this.props.isFilterable,
-        tableHeader: this.props.tableHeader,
+        header: this.props.header,
         hiddenColumns: this.props.hiddenColumns ?? [],
         columnFreezes: this.props.columnFreezes ?? {},
         numEdits,
@@ -170951,13 +171187,12 @@ const SbTable = registerSbComponent(
         ...props,
         enableRowInsertion: false,
         enableRowDeletion: false,
-        defaultSearchText: props.defaultSearchText ?? "",
         searchPlaceholder: props.searchPlaceholder ?? "",
         searchText: props.searchText ?? "",
         pageType: props.pageType,
         columns: transformedColumns,
-        defaultFilters: props.defaultFilters ?? EMPTY_OBJ,
-        tableHeader: props.tableHeader ?? "",
+        filters: props.filters ?? EMPTY_OBJ,
+        header: props.header ?? "",
         tableData: props.tableData ?? EMPTY_ARRAY,
         currentEditDropdownSearchText: props.currentEditDropdownSearchText,
         selectedRowIndices: props.selectedRowIndices ?? EMPTY_ARRAY,
@@ -190292,4 +190527,4 @@ export {
   copyToClipboard as y,
   navigateTo as z
 };
-//# sourceMappingURL=index-RG7SFiT3.js.map
+//# sourceMappingURL=index-BrVR4QxR.js.map