playbook_ui 14.11.1.pre.alpha.PBNTR440enableglobalpropspbformwith5624 → 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f35175e4ed002f1acdb9b596580402ebf1036878d40f7af3b35109eda6f21ae7
-  data.tar.gz: 006a82eedc5317af6e8e1ea5725238b44020f5107bf98790ada7b1fceb92cb3a
+  metadata.gz: 10a0e4cb9340097b9e793ab5a4c3cf062ccb0f33df36fc321495215cbcdf89ce
+  data.tar.gz: 63b345af0b4b60033d485c080600f2c57bccc4de2eeb3259f2ce68bf9fe28b79
 SHA512:
-  metadata.gz: 60312028c3cb012d7c5371960ad4f3744fb14070ddf5aa90c6c8e9ae92dbd4dfe4729a4999ab000e4ed4c0af55f786a2e12bbac71862df82b1cc5be4fc7fe180
-  data.tar.gz: 5c30e6228ffa4a1dfbcfb19346d5be9b6e8ef63e01e9ef15466e4124ba11164d092ef0b1872d45590cc9a3c48061a98d4e86232e59bf85e997717f69888ee3f5
+  metadata.gz: cafe574e0d494c8a4466dcbf01e2c7502701bf3be1cf19f3419505fa6812b6613eddd2a60d6d092a30c4ca489bf67dc32a75a3c53975d32dbd01375745f634d7
+  data.tar.gz: b3a6601c23e7426a97a5c28b9d613c500ce905dc49b381769714419c6ae6478ad78bba36243d489ea666a38b03e7d23c3871cf894b19622cfa4f6b44bffa1224

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -109,7 +108,6 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -8,7 +8,6 @@ import { GlobalProps } from "../../utilities/globalProps"
 import Flex from "../../pb_flex/_flex"
 import FlexItem from "../../pb_flex/_flex_item"
 import Icon from "../../pb_icon/_icon"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
@@ -18,7 +17,6 @@ interface CustomCellProps {
   row: Row<GenericObject>
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
-  selectableRows?: boolean
 } 
 
 export const CustomCell = ({
@@ -27,9 +25,8 @@ export const CustomCell = ({
   row,
   value,
   customRenderer,
-  selectableRows,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
@@ -44,23 +41,10 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
-      <Flex 
-          alignItems="center" 
+      <Flex alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows ? "end" : "start"}
           orientation="row"
       >
-        {
-          selectableRows && hasAnySubRows && (
-          <Checkbox
-              checked={row.getIsSelected()}
-              disabled={!row.getCanSelect()}
-              indeterminate={row.getIsSomeSelected()}
-              name={row.id}
-              onChange={row.getToggleSelectedHandler()}
-          />
-          )
-        }
         {renderButton ? (
           <button
               className="gray-icon expand-toggle-icon"

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

@@ -1,13 +1,12 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header, Table } from "@tanstack/react-table"
+import { flexRender, Header } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
 import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
@@ -25,7 +24,6 @@ type TableHeaderCellProps = {
   isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
-  table?: Table<GenericObject>
 } & GlobalProps
 
 export const TableHeaderCell = ({
@@ -37,13 +35,9 @@ export const TableHeaderCell = ({
   isPinnedLeft = false,
   loading,
   sortIcon,
-  table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
-    useContext(AdvancedTableContext);
+  const { sortControl, responsive } = useContext(AdvancedTableContext)
 
-  type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
-  
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
       const sortIsDesc = header?.column.getIsSorted() === "desc"
@@ -65,7 +59,6 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
@@ -89,14 +82,8 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-  let justifyHeader:justifyTypes;
+const justifyHeader = isLeafColumn ? "end" : "center"
 
-  if (header?.index === 0 && hasAnySubRows) {
-    justifyHeader = enableSorting ? "between" : "start";
-  } else {
-    justifyHeader = isLeafColumn ? "end" : "center";
-  }
-  
   return (
     <th
         align="right"
@@ -115,18 +102,9 @@ const isToggleExpansionEnabled =
       ) : (
         <Flex
             alignItems="center"
-            justify={justifyHeader}
+            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
         >
-          {
-            selectableRows && header?.index === 0 && hasAnySubRows && (
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            )
-          }
-          {isToggleExpansionEnabled && hasAnySubRows && (
+          {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 

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

@@ -9,7 +9,6 @@ import { globalProps } from "../../utilities/globalProps"
 import { isChrome } from "../Utilities/BrowserCheck"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -43,8 +42,6 @@ export const TableBody = ({
     loading,
     responsive,
     table,
-    selectableRows,
-    hasAnySubRows
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -68,7 +65,7 @@ export const TableBody = ({
           const numberOfColumns = table.getAllFlatColumns().length
           const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
           const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
-          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white"
+
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
               {isFirstChildofSubrow && subRowHeaders && (
@@ -82,23 +79,11 @@ export const TableBody = ({
                 />
               )}
             <tr
-                className={`${rowColor} ${
+                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
                   row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
               }`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
             >
-              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
-              {selectableRows && !hasAnySubRows && (
-                  <td className="checkbox-cell">
-                    <Checkbox
-                        checked={row.getIsSelected()}
-                        disabled={!row.getCanSelect()}
-                        indeterminate={row.getIsSomeSelected()}
-                        name={row.id}
-                        onChange={row.getToggleSelectedHandler()}
-                    />
-                  </td>
-                )}
               {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

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

@@ -7,10 +7,8 @@ import { GenericObject } from "../../types"
 import { buildCss } from "../../utilities/props"
 import { globalProps } from "../../utilities/globalProps"
 
-import Checkbox from "../../pb_checkbox/_checkbox"
-
 import { TableHeaderCell } from "../Components/TableHeaderCell"
-import { isChrome } from "../Utilities/BrowserCheck"
+
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 type TableHeaderProps = {
@@ -36,10 +34,6 @@ export const TableHeader = ({
     handleExpandOrCollapse,
     loading,
     table,
-    hasAnySubRows,
-    showActionsBar,
-    selectableRows,
-    responsive
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -50,12 +44,6 @@ export const TableHeader = ({
 
   const columnPinning = table.getState().columnPinning;
 
-  const customCellClassnames = classnames(
-    "table-header-cells-custom",
-    `${showActionsBar && "header-cells-with-actions"}`,
-    `${isChrome() ? "chrome-styles" : ""}`,
-    `${responsive === "scroll" && "pinned-left"}`,
-  );
   return (
     <>
       <thead className={classes}
@@ -64,15 +52,6 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
-            {!hasAnySubRows && selectableRows && (
-              <th className={customCellClassnames}>
-                <Checkbox
-                    checked={table?.getIsAllRowsSelected()}
-                    indeterminate={table?.getIsSomeRowsSelected()}
-                    onChange={table?.getToggleAllRowsSelectedHandler()}
-                />
-              </th>
-            )}
             {headerGroup.headers.map(header => {
               const isPinnedLeft = columnPinning.left.includes(header.id)
               return (
@@ -86,7 +65,6 @@ export const TableHeader = ({
                     key={`${header.id}-header`}
                     loading={loading}
                     sortIcon={sortIcon}
-                    table={table}
                 />
               )
             })}

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

@@ -23,20 +23,10 @@
     background-color: $white;
   }
 
-  .bg-row-selection {
-    background-color: $info_subtle;
-  }
-
   .full-width {
     width: 100%;
   }
 
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-  }
-
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -57,16 +47,6 @@
     th[colspan]:not([colspan="1"]) {
       border-right: 1px solid $border_light !important;
     }
-    .table-header-cells-custom {
-      text-align:center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
-        padding-left: 0px;
-      }
-    }
-    .header-cells-with-actions {
-      border-top-left-radius: 0px !important;
-      border-top-right-radius: 0px !important;
-    }
   }
 
   .pb_advanced_table_body {
@@ -79,14 +59,6 @@
     tr .pb_table_td:last-child {
       padding-right: 8px !important;
     }
-
-    .checkbox-cell {
-      display: flex;
-      justify-content: center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
-        padding-left: 0px;
-      }
-    }
   }
 
 
@@ -144,7 +116,6 @@
 
   // Vertical separator
   .table-header-cells:first-child,
-  .table-header-cells-custom:first-child,
   td:first-child,
   .pb_table_td:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;

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

@@ -12,17 +12,12 @@ import {
   Row,
   useReactTable,
   Getter,
-  RowSelectionState
 } from "@tanstack/react-table"
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
 
 import Table from "../pb_table/_table"
-import Card from "../pb_card/_card"
-import Caption from "../pb_caption/_caption"
-import Flex from "../pb_flex/_flex"
-import FlexItem from "../pb_flex/_flex_item"
 
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
@@ -35,7 +30,6 @@ import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
-  actions?: React.ReactNode[] | React.ReactNode
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -53,20 +47,16 @@ type AdvancedTableProps = {
   pagination?: boolean,
   paginationProps?: GenericObject
   responsive?: "scroll" | "none",
-  selectableRows?: boolean,
-  showActionsBar?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
-  onRowSelectionChange?: (arg: RowSelectionState) => void
 } & GlobalProps
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
-    actions,
     children,
     className,
     columnDefinitions,
@@ -84,14 +74,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     pagination = false,
     paginationProps,
     responsive = "scroll",
-    showActionsBar = true,
-    selectableRows,
     sortControl,
     tableData,
     tableOptions,
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
-    onRowSelectionChange,
   } = props
 
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(
@@ -109,9 +96,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
-  //Row Selection
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
   //Create cells for columns, with customization for first column
   const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
@@ -132,7 +116,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                     getValue={getValue}
                     onRowToggleClick={onRowToggleClick}
                     row={row}
-                    selectableRows={selectableRows}
                 />
           )
         }
@@ -145,7 +128,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
-                selectableRows={selectableRows}
                 value={accessorValue} 
             />
           ) : (
@@ -207,13 +189,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     },
   ]
 
-  const customState = () => {
-    if (sortControl && selectableRows) {
-      return { state: { expanded, sorting, rowSelection } }
-    } else if (sortControl) {
+  const expandAndSortState = () => {
+    if (sortControl) {
       return { state: { expanded, sorting } }
-    } else if (selectableRows) {
-      return { state: { expanded, rowSelection } }
     } else {
       return { state: { expanded } }
     }
@@ -241,24 +219,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
     sortDescFirst: true,
-    onRowSelectionChange: setRowSelection,
-    getRowId: selectableRows ? row => row.id : undefined,
-    ...customState(),
-    ...paginationInitializer,
+    ...expandAndSortState(),
+    ... paginationInitializer,
     ...tableOptions,
   })
 
   const tableRows = table.getRowModel()
 
-  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
-  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
-
-  useEffect(() => {
-    if (onRowSelectionChange) {
-      onRowSelectionChange(table.getState().rowSelection)
-    }
-  } , [table.getState().rowSelection, onRowSelectionChange])
-
   // Set table row count for loading state
   const updateLoadingStateRowCount = useCallback(() => {
     const rowsCount = table.getRowModel().rows.length
@@ -317,9 +284,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             sortControl,
             table,
             toggleExpansionIcon,
-            showActionsBar,
-            selectableRows,
-            hasAnySubRows
           }}
       >
         <>
@@ -333,27 +297,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          {
-            selectableRows && showActionsBar && (
-              <Card className="row-selection-actions-card"
-                  padding="xs"
-              >
-                <Flex alignItems="center"
-                    justify="between"
-                >
-                    <Caption color="light"
-                        paddingLeft="xs"
-                        size="xs"
-                    >
-                      {selectedRowsLength} Selected
-                    </Caption>
-                    <FlexItem>
-                    {actions}
-                    </FlexItem>
-                </Flex>
-              </Card>
-            )
-          }
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

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

@@ -40,7 +40,6 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

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

@@ -47,7 +47,6 @@ const AdvancedTablePaginationWithProps = (props) => {
           columnDefinitions={columnDefinitions}
           pagination
           paginationProps={paginationProps}
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

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

@@ -1,3 +1,3 @@
-`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
 
-The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.

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

@@ -27,8 +27,3 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  # - advanced_table_no_subrows: Table with No Subrows
-  - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
-  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -13,9 +13,4 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 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'
-export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
-export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
-export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
-export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,6 @@
-<%= pb_content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options) do %>
+<%= content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:label) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

@@ -1,5 +1,3 @@
-<%= pb_content_tag(
-  object.tag
-) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.rb

@@ -3,9 +3,6 @@
 module Playbook
   module PbCollapsible
     class Collapsible < Playbook::KitBase
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col],
-                 default: "div"
       def classname
         generate_classname("pb_collapsible_kit")
       end

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

@@ -1,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>
@@ -64,30 +68,29 @@
   </div>
 
   <%= javascript_tag do %>
-    (function() {
-      const loadDatePicker = () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+    const loadDatePicker = () => {
+      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-        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]
-          })
-        }
+      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]
+        })
       }
+    }
 
-      window.addEventListener("DOMContentLoaded", () => {
-        loadDatePicker()
+    window.addEventListener("DOMContentLoaded", () => {
+      loadDatePicker();
+    });
+    
+    if (<%= !object.custom_event_listener.empty? %>) {
+      window.addEventListener("<%= object.custom_event_listener %>", () => {
+        console.log("Custom Event listener fired");
+        loadDatePicker();
       })
-
-      if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", () => {
-          loadDatePicker()
-        })
-      }
-    })()
+    }
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -73,8 +73,8 @@ module Playbook
                       default: false
       prop :year_range, type: Playbook::Props::Array,
                         default: [1900, 2100]
-      prop :custom_event_type, type: Playbook::Props::String,
-                               default: ""
+      prop :custom_event_listener, type: Playbook::Props::String,
+                                   default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"