playbook_ui 16.8.0.pre.alpha.PLAY2979dropdownmlsportaling16743 → 16.8.0.pre.alpha.PLAY2996textinputaddondisabled16519

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a167d02fbe513af8c3cc41cbb3eb27c92cc219b98e75c0f903f417e599e8b64
-  data.tar.gz: 5d4cbe31a22ac9a4370301b680c0780c2f4eb1f985a1c3ab3276eac6f3f44197
+  metadata.gz: c348f59ab52ef69c3ef59bc403d2668fb7f7a5a66a583de3a683226ac6283908
+  data.tar.gz: ddafa48bb94bcc9f78987d5e2975583f56dd5b0b3f6f00064c6a66e4f619c14f
 SHA512:
-  metadata.gz: 4cdc8fff0870b989c157a0e31d94ea0e61e841b4577aee8037d8f603e8c57b17a8107f832f7501904746ab787c51d54f5166e9e982c59c381a2f1d1927a996b1
-  data.tar.gz: f494b71788790eecb41a5f0e119ff8e1b9401651045dea7f434ede10da11a85e6e286c1b91b18eefde32d51276bdb91da9d79042c7cdb6be5f2079c7dd8043d2
+  metadata.gz: ac9a07a6a307138d16eaea199f4c0f30fc9e0f95eec7a4c62f1d17a9ec20b73dcc8fc82f8ec820bb2c73c808de9ede099ccd45896836552bb199ff701ba8d218
+  data.tar.gz: 8e8d11eca1654fe9f5b54e296d2650cca8340d9d6e1590560260cef62ba1b268161ed6acc86dce7fcb7beec30fe9c6528a1e9eb35cebbd8782410aca3f2cc13a

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/_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

@@ -52,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
@@ -81,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}

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,7 +68,7 @@ module Playbook
       end
 
       def title_text
-        if null_display && amount.blank?
+        if null_display
           null_display
         elsif swap_negative
           absolute_amount(abbr_or_format_amount)
@@ -125,7 +125,14 @@ module Playbook
       # Convert numeric input to string format
       def convert_amount(input)
         if input.is_a?(Numeric)
-          Kernel.format("%.2f", input)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
         else
           input.to_s
         end
@@ -135,7 +142,6 @@ module Playbook
         return "" if currency_amount.blank?
 
         value = currency_amount.split(".").first
-        value = "0" if value.blank?
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -146,8 +152,7 @@ module Playbook
       def decimal_value
         return "00" if currency_amount.blank?
 
-        fraction = currency_amount.split(".")[1] || "00"
-        fraction.ljust(2, "0")[0, 2]
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -178,48 +178,5 @@ test('handles numeric amounts correctly', () => {
   expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
   expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
   expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$0.00')
-})
-
-test('renders zero values with leading digit', () => {
-  render(
-    <>
-      <Currency
-          amount="0"
-          data={{ testid: 'test-string-zero' }}
-      />
-      <Currency
-          amount={0}
-          data={{ testid: 'test-numeric-zero' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-string-zero')).toHaveTextContent('$0.00')
-  expect(screen.getByTestId('test-numeric-zero')).toHaveTextContent('$0.00')
-})
-
-test('normalizes string zero with single decimal digit to .00', () => {
-  render(
-    <Currency
-        amount="0.0"
-        commaSeparator
-        data={{ testid: 'test-string-zero-single-decimal' }}
-    />
-  )
-
-  expect(screen.getByTestId('test-string-zero-single-decimal')).toHaveTextContent('$0.00')
-})
-
-test('nullDisplay only applies when amount is empty', () => {
-  render(
-    <Currency
-        amount="-.53"
-        data={{ testid: 'test-null-display-negative' }}
-        nullDisplay="$0.00"
-    />
-  )
-
-  expect(screen.getByTestId('test-null-display-negative')).toHaveTextContent('-$')
-  expect(screen.getByTestId('test-null-display-negative')).not.toHaveTextContent('$0.00')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
 })

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -79,57 +79,42 @@
 
   <%= javascript_tag do %>
     (function() {
-      const initQuickPickChangeListener = (input) => {
-        if (!<%= object.selection_type == "quickpick" %>) return
-        if (input.dataset.quickpickInitialized) return
-
-        input.dataset.quickpickInitialized = "true"
-        input.addEventListener("change", ({ target }) => {
-          const startDate = document.getElementById("<%= object.start_date_id %>")
-          const endDate = document.getElementById("<%= object.end_date_id %>")
-          const splittedValue = target.value.split(" to ")
-          startDate.value = splittedValue[0]
-          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-        })
-      }
-
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>")
-
-        if (!input || input._flatpickr) return true
-        if (typeof window.datePickerHelper !== "function") return false
-
-        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
-        initQuickPickChangeListener(input)
-
-        return true
-      }
-
-      let attempts = 0
-      const retryLoad = () => {
-        if (loadDatePicker()) return
+        const input = document.getElementById("<%= object.picker_id %>");
+        if (input && !input._flatpickr) {
+          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-        if (attempts++ < 20) {
-          setTimeout(retryLoad, 100)
+          if (<%= object.selection_type == "quickpick" %>) {
+            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+              const startDate = document.getElementById("<%= object.start_date_id %>")
+              const endDate = document.getElementById("<%= object.end_date_id %>")
+              const splittedValue = target.value.split(" to ")
+              startDate.value = splittedValue[0]
+              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+            })
+          }
         }
       }
 
+      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", retryLoad)
+        window.addEventListener("DOMContentLoaded", loadDatePicker)
       } else {
-        retryLoad()
+        loadDatePicker()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>")
+        const input = document.getElementById("<%= object.picker_id %>");
         if (input && !input._flatpickr) {
-          retryLoad()
+          loadDatePicker();
         }
-      }, 100)
+      }, 100);
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
+        window.addEventListener("<%= object.custom_event_type %>", () => {
+          loadDatePicker()
+        })
       }
     })()
   <% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={"fixed-" + pickerInstance}
+                        key={`fixed-${pickerInstance}`}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={"datePickerFixed-" + pickerInstance}
+                        pickerId={`datePickerFixed-${pickerInstance}`}
                         staticPosition={false}
                     />
                 </Dialog.Body>