playbook_ui 14.9.0.pre.alpha.PBNTR767advancedtablemultiheadercolumns5136 → 14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5120

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e0587b55894626bf9c1b536de994c6be32b554343ab23d48fbce936348df99c
-  data.tar.gz: c27323f03b333905152b3f074197c3a151e3e64adf7c145a486e060d59e1168a
+  metadata.gz: da8a7920b5da846030bda1d8bcb3c18037bf19595c200269f9db7dd51764c766
+  data.tar.gz: 8a07e7da151e04fc89634772bd5ec1cd1ef27a8aef0b69858df3063485701a6f
 SHA512:
-  metadata.gz: e2743697539265ab20f86e4a9ee8399c71ab490d02a22a14098f65c6002a8c598a81cfb429e086aa720e4008be1693ac5c467e44243abf9b5fbe31feaed54f4a
-  data.tar.gz: eb592ba87c70fc8b736db3ce899a78447d4b7f2a78e2949067b063f588c0cfdea52f2936614147bc4c52a613242be414c44d50c5b59c00c4c28db04d0fb7e5f2
+  metadata.gz: 39185b19e732294072ed4b0f2b331d12a6f897f8803b46651af31b95589087da685e8a2f72f1d5ae93b80159176d406d154fb35751fab93fc5fe3a96ca51cf07
+  data.tar.gz: bfd1b02747edb49bfafe7601fd23bc6e38c898439f7e85b363920a46344468a06da31bd776f4a51c5670e393c28523d65d636fb089ded77314b84c55b65f4c4a

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -40,59 +40,46 @@ export const TableHeaderCell = ({
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
-      const sortIsDesc = header?.column.getIsSorted() === "desc"
+      const sortIsDesc = header.column.getIsSorted() === "desc"
       sortIsDesc
         ? sortControl.onChange({ desc: true })
         : sortControl.onChange({ desc: false })
     } else {
-      header?.column.getToggleSortingHandler()(event)
+      header.column.getToggleSortingHandler()(event)
     }
   }
 
-  const isLeafColumn =
-  header?.column.getLeafColumns().length === 1 &&
-  header?.column.getLeafColumns()[0].id === header.column.id
-
-  const isLastHeaderCell =
-    header?.column.parent?.columns.at(-1) === header?.column ||
-    (header?.colSpan > 1 && header?.column.parent !== undefined);
- 
-const cellClassName = classnames(
-  "table-header-cells",
-  `${isChrome() ? "chrome-styles" : ""}`,
+const cellClassName = classnames("table-header-cells", 
+  `${isChrome() ? "chrome-styles" : ""}`, 
   `${enableSorting ? "table-header-cells-active" : ""}`,
-  { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : ""
-); 
+  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
+)
 
 const cellId = `${loading ? 
-    `loading-${header?.id}`
-    : `${header?.id}`
+    `loading-${header.id}`
+    : `${header.id}`
 }`
 
 const isToggleExpansionEnabledLoading =
-  header?.index === 0 &&
+  header.index === 0 &&
   loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
   
 const isToggleExpansionEnabled =
-  header?.index === 0 &&
+  header.index === 0 &&
   !loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-const justifyHeader = isLeafColumn ? "end" : "center"
-
   return (
     <th
         align="right"
         className={cellClassName}
-        colSpan={header?.colSpan}
         id={cellId}
-        key={`${header?.id}-header`}
+        key={`${header.id}-header`}
     >
-      {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
+      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
         <Flex alignItems="center">
           {headerChildren}
           <div>
@@ -102,7 +89,7 @@ const justifyHeader = isLeafColumn ? "end" : "center"
       ) : (
         <Flex
             alignItems="center"
-            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
+            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
           {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
@@ -113,11 +100,11 @@ const justifyHeader = isLeafColumn ? "end" : "center"
             )}
 
           <Flex
-              className={`${header?.index === 0 &&
+              className={`${header.index === 0 &&
                 enableSorting &&
                 "header-sort-button pb_th_link"}`}
-              cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
-              {...(header?.index === 0 &&
+              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header.index === 0 &&
                 enableSorting && {
                   htmlOptions: {
                     onClick: (event: React.MouseEvent) => toggleSortButton(event),
@@ -129,14 +116,14 @@ const justifyHeader = isLeafColumn ? "end" : "center"
                     tabIndex: 0,
                   },
                 })}
-              justify={header?.index === 0 && enableSorting ? "between" : "none"}
+              justify={header.index === 0 && enableSorting ? "between" : "none"}
               paddingLeft={enableSorting ? "xxs" : "xs"}
           >
             <div>
-              {flexRender(header?.column.columnDef.header, header?.getContext())}
+              {flexRender(header.column.columnDef.header, header.getContext())}
             </div>
 
-            {header?.index === 0 &&
+            {header.index === 0 &&
               header.column.getCanSort() &&
               enableSorting &&
               (loading ? (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -86,7 +86,6 @@ export const TableBody = ({
             >
               {row.getVisibleCells().map((cell, i) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id)
-                const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id
 
                 return (
                   <td
@@ -94,8 +93,7 @@ export const TableBody = ({
                       className={classnames(
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left',
-                        isLastCell && 'last-cell',
+                        isPinnedLeft && 'pinned-left'
                       )}
                       key={`${cell.id}-data`}
                   >

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,43 +31,6 @@
     min-width: 180px;
   }
 
-  .pb_advanced_table_header {
-    > tr:not(:first-child) {
-      .last-header-cell {
-        border-right: 1px solid $border_light !important;
-      }
-    
-      th {
-        border-radius: 0px !important;
-        border-width: 0 0 1px 0 !important;
-      }
-      th:first-child {
-        border-left-width: 1px !important;
-        @media only screen and (max-width: $screen-xl-min) {
-          border-left-width: 0 !important;
-        }
-      }
-      th:last-child {
-        border-right-width: 1px !important;
-        @media only screen and (max-width: $screen-xl-min) {
-          border-right-width: 0 !important;
-        }
-      }
-    }
-    th[colspan]:not([colspan="1"]) {
-      border-right: 1px solid $border_light;
-    }
-
-  
-  }
-
-  .pb_advanced_table_body {
-    .last-cell {
-      border-right: 1px solid $border_light !important;
-    }
-  }
-
-
   .table-header-cells-active:first-child {
     color: $primary !important;
   }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -142,41 +142,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
     return columnCells
   }
-
-  const buildColumns = (columnDefinitions: GenericObject[]): any => {
-    return (
-      columnDefinitions &&
+//Create column array in format needed by Tanstack
+  const columns =
+    columnDefinitions &&
       columnDefinitions.map((column, index) => {
-        //Checking to see if grouped column or not
-        if (column.columns && column.columns.length > 0) {
-          return {
-            header: column.label || "",
-            columns: buildColumns(column.columns),
-          };
-        } else {
-          // Define the base column structure
-          const columnStructure = {
-            ...columnHelper.accessor(column.accessor, {
-              header: column.label || "",
-            }),
-          };
-
-          if (column.cellAccessors || column.customRenderer) {
-            columnStructure.cell = createCellFunction(
-              column.cellAccessors,
-              column.customRenderer,
-              index
-            );
-          }
+      // Define the base column structure
+      const columnStructure = {
+        ...columnHelper.accessor(column.accessor, {
+          header: column.label,
+        }),
+      }
 
-          return columnStructure;
-        }
-      })
-    );
-  };
+  if (column.cellAccessors || column.customRenderer) {
+    columnStructure.cell = createCellFunction(
+      column.cellAccessors,
+      column.customRenderer,
+      index
+    )
+  }
 
-  //Create column array in format needed by Tanstack
-  const columns = buildColumns(columnDefinitions);
+  return columnStructure
+})
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -21,5 +21,3 @@ examples:
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
-  - advanced_table_column_headers: Multi-Header Columns
-  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -12,5 +12,3 @@ export { default as AdvancedTableResponsive } from './_advanced_table_responsive
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
-export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -123,6 +123,11 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
   const childInput = children ? children.type === "input" : undefined
 
+  let formattedValue = value.toString()
+  if (isMaskedInput) {
+    formattedValue = INPUTMASKS[mask].format(formattedValue)
+  }
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -138,7 +143,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         ref={ref}
         required={required}
         type={type}
-        value={value}
+        value={formattedValue}
      />)
   )