playbook_ui 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780 → 16.8.0.pre.alpha.PLAY2945selectformblankselection16424

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31a01c81d8013032547d3d5fdecadec787d6f2f8d64591898561444dea9d1197
-  data.tar.gz: cce4942d95c7cd06969a18b909971122ee75b0d0e650df4bc3acfb497b53f489
+  metadata.gz: 051d8585a19ec6dbe0ad7a956006391f137fab3699a87ecdd8a72a31d064b581
+  data.tar.gz: 3abce6f7201b7db708d4fac79487a115f66827daa30a4cea1a0af61575309229
 SHA512:
-  metadata.gz: 54c76487f36cfd1f04cdf9b17b39233250edb2f6be394797f117b40089b3b45c5e3fe498b7c4c85c2b1a430c8b475a33a30f6afabdd819135f236b4f5b982af0
-  data.tar.gz: aa703b2f6075230c4b1bdb9dd6f5add9dcee7905292eb5167e34bbf7f5ce8c0ac8a3a031610da6e29f72286f3f0a3814de80ac92e2d8b2de6903a99a30c8c6a1
+  metadata.gz: c0974744f65ce5e1ec6baa822ed4adc1e763eedfc85c470e8ba7181c3651a4a685d45c4cfb93082558de059d7744438f2ce82929ebc5a9c04023b1105c0935d0
+  data.tar.gz: 44d6e614f5dcc91a0e7bbfd1a2e85a28e98c8e14994aac336d2cb3b3efccbed609706057455888cc4ad36fa76fbe11c6c4e06121cc8f35b4725b77b1f90a2a11

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

@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
@@ -95,7 +94,6 @@ const TableCellRenderer = ({
               )}
               key={`${cell.id}-data`}
               style={{
-                ...playbookColumnLayoutStylesFromMeta(column.columnDef),
                 left: isPinnedLeft
                   ? i === 1 // Accounting for set min-width for first column
                     ? '180px'

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

@@ -16,7 +16,6 @@ import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -199,7 +198,6 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
-          ...playbookColumnLayoutStylesFromMeta(header?.column?.columnDef),
           backgroundColor: headerBackgroundColor,
           color: headerFontColor,
           left: isPinnedLeft

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

@@ -19,7 +19,6 @@ import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
@@ -225,10 +224,7 @@ export const VirtualizedTableView = ({
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{
-                        ...playbookColumnLayoutStylesFromMeta(cell.column.columnDef),
-                        width: cellWidth,
-                      }}
+                      style={{ width: cellWidth }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -12,10 +12,6 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
-import {
-  buildPlaybookColumnLayoutStyles,
-  buildTanStackSizingFromColumn,
-} from "../Utilities/ColumnLayoutHelper";
 import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
@@ -109,31 +105,11 @@ export function useTableState({
           columns: buildColumns(column.columns, false),
         };
       }
-      const tanStackSizing = buildTanStackSizingFromColumn(column);
-      const layoutStyles = buildPlaybookColumnLayoutStyles(column, tanStackSizing);
-      const userMeta =
-        column.meta &&
-        typeof column.meta === "object" &&
-        !Array.isArray(column.meta)
-          ? column.meta
-          : {};
-      const hasLayoutStyles =
-        layoutStyles.width !== undefined ||
-        layoutStyles.minWidth !== undefined ||
-        layoutStyles.maxWidth !== undefined;
-
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.header ?? column.label ?? "",
           enableSorting: isFirstColumn || column.enableSort === true,
-          ...tanStackSizing,
-          meta: {
-            ...userMeta,
-            ...(hasLayoutStyles
-              ? { playbookColumnLayoutStyles: layoutStyles }
-              : {}),
-          },
         }),
       };
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -774,150 +774,6 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
-test("columnStyling minWidth, width, and maxWidth apply to header and body cells", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { minWidth: 240, width: 260, maxWidth: 400 },
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const yearHeader = screen.getByText("Year").closest("th");
-  expect(yearHeader).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
-
-  const yearCell = screen.getAllByText("2021")[0].closest("td");
-  expect(yearCell).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
-});
-
-test("columnStyling width only locks minWidth and maxWidth to the same value", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { width: 128 },
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const yearHeader = screen.getByText("Year").closest("th");
-  expect(yearHeader).toHaveStyle({
-    width: "128px",
-    minWidth: "128px",
-    maxWidth: "128px",
-  });
-});
-
-test("columnDefinitions size only locks minSize and maxSize to the same value", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      size: 200,
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
-  expect(enrollmentsHeader).toHaveStyle({
-    width: "200px",
-    minWidth: "200px",
-    maxWidth: "200px",
-  });
-});
-
-test("columnDefinitions size, minSize, and maxSize apply layout styles", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      size: 180,
-      minSize: 160,
-      maxSize: 320,
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
-  expect(enrollmentsHeader).toHaveStyle({
-    width: "180px",
-    minWidth: "160px",
-    maxWidth: "320px",
-  });
-
-  const enrollmentsCell = screen.getAllByText("20")[0].closest("td");
-  expect(enrollmentsCell).toHaveStyle({
-    width: "180px",
-    minWidth: "160px",
-    maxWidth: "320px",
-  });
-});
-
 test("columnStyling.fontColor sets cell font color", () => {
   const styledColumnDefs = [
     {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -10,7 +10,6 @@ const AdvancedTableColumnStyling = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { width: 124 },
     },
     {
       accessor: "newEnrollments",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -6,10 +6,4 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 3) `fontColor`: This will allow you to control the font color for a given column.
 
-4) Column width: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
-
-Fixed width: pass `width` only (or TanStack `size` only) and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
-
-See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
-
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -48,11 +40,11 @@ const AdvancedTableStickyHeader = (props) => {
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           responsive="none"
-          tableData={tableData}
+          tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md

@@ -1,7 +1,3 @@
 The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
 
-This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb

@@ -2,6 +2,7 @@
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -29,19 +30,4 @@
     }
 ] %>
 
-<% table_data = 15.times.map do |index|
-  {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
-
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md

@@ -1,7 +1,3 @@
 The `table_props` prop can also be used to render a sticky header for the Advanced Table.
 
-This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb

@@ -2,6 +2,7 @@
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -29,19 +30,4 @@
     }
 ] %>
 
-<% table_data = 15.times.map do |index|
-  {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
-
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -48,10 +40,11 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          tableData={tableData}
+          maxHeight="xs"
+          tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-Scroll inside the table preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,9 +1,7 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
-**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
+**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
-Expand the table above to see responsive behavior in action.
+Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -313,7 +313,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
+      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
       "type": "info"
     }
   },
@@ -2628,10 +2628,7 @@
               "quarter",
               "month",
               "day"
-            ],
-            "columnStyling": {
-              "width": 124
-            }
+            ]
           },
           {
             "accessor": "newEnrollments",

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -371,7 +371,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
+      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_styling.json

@@ -2,10 +2,7 @@
   {
     "accessor": "year",
     "label": "Year",
-    "cellAccessors": ["quarter", "month", "day"],
-    "columnStyling": {
-      "width": 124
-    }
+    "cellAccessors": ["quarter", "month", "day"]
   },
   {
     "accessor": "newEnrollments",

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

@@ -3,7 +3,6 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
-  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
@@ -53,7 +52,6 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
-  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell
@@ -82,7 +80,6 @@ examples:
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
-  - advanced_table_column_styling_width: Column Styling Width
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
   - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)

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

@@ -27,7 +27,6 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
-export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
 export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
@@ -38,7 +37,6 @@ export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_row
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
 export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
-export { default as AdvancedTableColumnStylingWidth } from './_advanced_table_column_styling_width.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -162,7 +162,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           {
             dragHandle ? (
               <Flex>
-                <span className="card_draggable_handle pb_draggable_handle">
+                <span className="card_draggable_handle">
                   <Icon
                       icon="grip-dots-vertical"
                       paddingRight="xs"

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,7 +4,7 @@
             <% if object.draggable_item %>
                 <%= pb_rails("flex", props: { align: "center" }) do %>
                     <% if object.drag_handle %>
-                        <span class="card_draggable_handle pb_draggable_handle">
+                        <span classname="card_draggable_handle">
                             <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
                         </span>
                     <% end %>

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -59,13 +59,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
-  const isAmountEmpty = (value: string | number): boolean => (
-    value === '' || value == null || (typeof value === 'string' && value.trim() === '')
-  )
-
   // Convert numeric input to string format
   const convertAmount = (input: string | number): string => {
     if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
       return input.toFixed(2)
     }
     return input
@@ -82,9 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [wholePart, decimalPart = '00'] = currencyAmount ? currencyAmount.split('.') : ['', '00']
-  const decimal = (decimalPart || '00').padEnd(2, '0').slice(0, 2)
-  const whole = currencyAmount === '' ? '' : (wholePart === '' ? '0' : wholePart)
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -138,7 +135,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <div>{nullDisplay}</div>
           ) : (
             <>
@@ -151,7 +148,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
             </>
           )
         ) : (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}