playbook_ui 14.22.0.pre.alpha.PLAY2248railstooltipclicktoopen8667 → 14.22.0.pre.alpha.PLAY2254datepickerdefaultdatenullvalueturbo8531

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c125bb33f1f9c6f0e5936cf252393e2b68d8ce63ada5d88579d50a82f23fecef
-  data.tar.gz: d0a7c335abf1f9a4b7a9bd957be7127cac499f8d2294cf5edf7c7cef1b563a10
+  metadata.gz: 6309b59e0af954ca138e0f06a9ebf1d9858a8c6b3ccd424c0b113e928bd90af5
+  data.tar.gz: 1a1145623c0ccb98891e58a510a31757c830ff161452d53a486ec3e0c284752f
 SHA512:
-  metadata.gz: c662b162bd4dff9ae51c5540a70297b581e46e91aad4a32479d46fdbb097f1323c0028603dc24f87de2f1d3c5ba1e4722f06e84a1ca9f48dedb2c4d6484609ae
-  data.tar.gz: 474a7cf2f5e56350eae8d5b1f4751eb8e321299111f1c620221fd336b4aa1e869ccf1740d6dd01ec4513d1463c5e137c57e47a080c4c0c2bdfe83f8af584d82c
+  metadata.gz: 566a51db19c7b610cbdf8993aa4b32e187c6864fd99ea64966a4dc743c90971a521a813f41247cf2b4c99d0aac1215a71bbe6bbb1a617bb4ea9dbe593044f875
+  data.tar.gz: '06945309f2910c52bf5a451ed759610d4897fced7373603dcfe8817fe2c6dde88c32cdd358dabb2a06e028dc452468464572392e2b892d9c0dbd6868ad09c43d'

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

@@ -20,7 +20,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
-}
+} 
 
 export const CustomCell = ({
   getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-
+    
     if (!expandedControl) {
       setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
@@ -46,8 +46,8 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
-      <Flex
-          alignItems="center"
+      <Flex 
+          alignItems="center" 
           columnGap="xs"
           justify="start"
           orientation="row"
@@ -71,11 +71,12 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play-down"
+                  icon="circle-play"
+                  rotation={90}
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"
+                  icon="circle-play"    
                />
             )}
           </button>

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

@@ -7,7 +7,6 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
-import Icon from "../../pb_icon/_icon"
 
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
@@ -33,19 +32,17 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
+  const { inlineRowLoading } = useContext(AdvancedTableContext)
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false
   const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
-  const hasSubrowsToSort = row.getParentRow()?.subRows
-
 
   return (
     <tr className="custom-row bg-silver">
       <td
           className={`custom-row-first-column ${
-            isChrome() ? "chrome-styles" : ""
+          isChrome() ? "chrome-styles" : ""
           }`}
           colSpan={1}
       >
@@ -53,39 +50,21 @@ export const SubRowHeaderRow = ({
         <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
           <Flex align="center" 
               columnGap="xs"
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-ignore
-              justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
           >
-            <Flex columnGap="xs">
-              {enableToggleExpansion === "all" && canExpand ? (
-                <ToggleIconButton onClick={onClick} 
-                    row={row} 
-                />
-              ) : null}
-              <Caption
-                  marginLeft={canExpand ? "none" : "xs"}
-                  text={subRowHeaders[row.depth - 1]}
+            {enableToggleExpansion === "all" && canExpand ? (
+              <ToggleIconButton onClick={onClick} 
+                  row={row}
               />
-            </Flex>
-            {customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
-              <button
-                  aria-label="Sort this group"
-                  className="sort-button-icon gray-icon"
-                  onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
-              >
-                <Icon 
-                    cursor="pointer" 
-                    fixedWidth 
-                    icon="sort" 
-                />
-              </button>
-            )}
+            ) : null}
+            <Caption
+                marginLeft={canExpand ? "none" : "xs"}
+                text={subRowHeaders[row.depth - 1]}
+            />
           </Flex>
         </div>
       </td>
 
       <td colSpan={numberOfColumns - 1} />
     </tr>
-  );
+  )
 }

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

@@ -87,7 +87,7 @@ export function useTableState({
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.header || column.label || "",
+          header: column.label || "",
           columns: buildColumns(column.columns, false),
         };
       }
@@ -95,7 +95,7 @@ export function useTableState({
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
-          header: column.header ?? column.label ?? "",
+          header: column.label || "",
         }),
       };
 

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

@@ -189,11 +189,6 @@
         box-sizing: border-box !important;
       }
     }
-    // Fixes for tooltip picking up th styling from Table kit
-    .pb_tooltip_kit {
-      font-weight: unset;
-      text-transform: unset;
-    }
   }
 
   .pb_advanced_table_body {

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

@@ -36,7 +36,6 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
-  customSort?:boolean;
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -68,7 +67,6 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -83,7 +81,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
-    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -98,7 +95,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
-    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
@@ -329,7 +325,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
-            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -341,7 +336,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
-            onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}

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

@@ -19,15 +19,14 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_column_styling_rails: Column Styling
-  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  # - advanced_table_column_styling_rails: Column Styling
+  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
-  - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -41,7 +40,6 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -38,5 +38,3 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.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'
-export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -30,11 +30,11 @@
                                     class="gray-icon expand-toggle-icon"
                                     data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex/flex_item") do %>       
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -82,11 +82,15 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // ===========================================================
 
   const defaultDateGetter = () => {
-    if (defaultDate === '') {
+    if (
+      defaultDate === '' ||
+      defaultDate === null ||
+      defaultDate === undefined ||
+      (typeof defaultDate === 'string' && defaultDate.trim() === '')
+    ) {
       return null
-    } else {
-      return defaultDate
     }
+    return defaultDate
   }
 
   const disabledWeekDays = () => {

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyLeftColumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx

@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
         >
             <thead>
                 <tr>
-                    <th data-sticky-id="a">{'Column 1'}</th>
+                    <th id="a">{'Column 1'}</th>
                     <th>{'Column 2'}</th>
                     <th>{'Column 3'}</th>
                     <th>{'Column 4'}</th>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
                     <th>{'Column 12'}</th>
                     <th>{'Column 13'}</th>
                     <th>{'Column 14'}</th>
-                    <th data-sticky-id="b">{'Column 15'}</th>
+                    <th id="b">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td data-sticky-id="a">{'Value 1'}</td>
+                    <td id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td data-sticky-id="b">{'Value 15'}</td>
+                    <td id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="a">{'Value 1'}</td>
+                    <td id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td data-sticky-id="b">{'Value 15'}</td>
+                    <td id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="a">{'Value 1'}</td>
+                    <td id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td data-sticky-id="b">{'Value 15'}</td>
+                    <td id="b">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md

@@ -1,3 +1,3 @@
 The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
 
-Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx

@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
         >
             <thead>
                 <tr>
-                    <th data-sticky-id="1">{'Column 1'}</th>
-                    <th data-sticky-id="2">{'Column 2'}</th>
-                    <th data-sticky-id="3">{'Column 3'}</th>
+                    <th id="1">{'Column 1'}</th>
+                    <th id="2">{'Column 2'}</th>
+                    <th id="3">{'Column 3'}</th>
                     <th>{'Column 4'}</th>
                     <th>{'Column 5'}</th>
                     <th>{'Column 6'}</th>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
             </thead>
             <tbody>
                 <tr>
-                    <td data-sticky-id="1">{'Value 1'}</td>
-                    <td data-sticky-id="2">{'Value 2'}</td>
-                    <td data-sticky-id="3">{'Value 3'}</td>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="1">{'Value 1'}</td>
-                    <td data-sticky-id="2">{'Value 2'}</td>
-                    <td data-sticky-id="3">{'Value 3'}</td>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="1">{'Value 1'}</td>
-                    <td data-sticky-id="2">{'Value 2'}</td>
-                    <td data-sticky-id="3">{'Value 3'}</td>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md

@@ -1,5 +1,5 @@
-The `stickyLeftColumn` prop expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
 
-Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx

@@ -22,9 +22,9 @@ const TableStickyRightColumns = () => {
                     <th>{'Column 10'}</th>
                     <th>{'Column 11'}</th>
                     <th>{'Column 12'}</th>
-                    <th data-sticky-id="13">{'Column 13'}</th>
-                    <th data-sticky-id="14">{'Column 14'}</th>
-                    <th data-sticky-id="15">{'Column 15'}</th>
+                    <th id="13">{'Column 13'}</th>
+                    <th id="14">{'Column 14'}</th>
+                    <th id="15">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
@@ -41,9 +41,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td data-sticky-id="13">{'Value 13'}</td>
-                    <td data-sticky-id="14">{'Value 14'}</td>
-                    <td data-sticky-id="15">{'Value 15'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
                 </tr>
                 <tr>
                     <td>{'Value 1'}</td>
@@ -58,9 +58,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td data-sticky-id="13">{'Value 13'}</td>
-                    <td data-sticky-id="14">{'Value 14'}</td>
-                    <td data-sticky-id="15">{'Value 15'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
                 </tr>
                 <tr>
                     <td>{'Value 1'}</td>
@@ -75,9 +75,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td data-sticky-id="13">{'Value 13'}</td>
-                    <td data-sticky-id="14">{'Value 14'}</td>
-                    <td data-sticky-id="15">{'Value 15'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md

@@ -1,5 +1,5 @@
-The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
+The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
 
-Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using the `stickyRightColumn` prop.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.

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

@@ -9,7 +9,6 @@ examples:
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
-  - tooltip_click_open: Click to Open
 
   react:
   - tooltip_default_react: Default

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -19,75 +19,60 @@ export default class PbTooltip extends PbEnhancedElement {
     }
     
     this.triggerElements.forEach((trigger) => {
-      const method = this.effectiveTriggerMethod
+      const method = this.triggerMethod
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        trigger.addEventListener('click', (e) => {
-          if (this.useClickToOpen) {
-            e.preventDefault()
-            if (this.isTooltipVisible()) {
-              this.hideTooltip()
-            } else {
-              this.showTooltip(trigger)
-            }
-          } else {
-            this.showTooltip(trigger)
-          }
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
         })
       } else {
-        if (!this.useClickToOpen) {
-          trigger.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
-            clearTimeout(this.mouseleaveTimeout)
-            this.currentTrigger = trigger
-            const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
-            this.mouseenterTimeout = setTimeout(() => {
-              this.showTooltip(trigger)
-              if (interactionEnabled) {
-                this.checkCloseTooltip(trigger)
-              }
-            }, delayOpen)
-          })
+        trigger.addEventListener('mouseenter', () => {
+          clearSafeZoneListener(this)
+          clearTimeout(this.mouseleaveTimeout)
+          this.currentTrigger = trigger
+          const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            if (interactionEnabled) {
+              this.checkCloseTooltip(trigger)
+            }
+          }, delayOpen)
+        })
 
-          trigger.addEventListener('mouseleave', () => {
-            clearTimeout(this.mouseenterTimeout)
-            if (this.delayClose) {
-              const delayClose = parseInt(this.delayClose)
-              this.mouseleaveTimeout = setTimeout(() => {
-                if (interactionEnabled) {
-                  this.attachSafeZoneListener()
-                } else {
-                  this.hideTooltip()
-                }
-              }, delayClose)
-            } else {
+        trigger.addEventListener('mouseleave', () => {
+          clearTimeout(this.mouseenterTimeout)
+          if (this.delayClose) {
+            const delayClose = parseInt(this.delayClose)
+            this.mouseleaveTimeout = setTimeout(() => {
               if (interactionEnabled) {
                 this.attachSafeZoneListener()
               } else {
                 this.hideTooltip()
               }
+            }, delayClose)
+          } else {
+            if (interactionEnabled) {
+              this.attachSafeZoneListener()
+            } else {
+              this.hideTooltip()
             }
-          })
+          }
+        })
 
-          if (interactionEnabled) {
-            this.tooltip.addEventListener('mouseenter', () => {
-              clearSafeZoneListener(this)
-            })
+        if (interactionEnabled) {
+          this.tooltip.addEventListener('mouseenter', () => {
+            clearSafeZoneListener(this)
+          })
 
-            this.tooltip.addEventListener('mouseleave', () => {
-              this.attachSafeZoneListener()
-            })
-          }
+          this.tooltip.addEventListener('mouseleave', () => {
+            this.attachSafeZoneListener()
+          })
         }
       }
     })
   }
 
-  isTooltipVisible() {
-    return this.tooltip && this.tooltip.classList.contains('show')
-  }
-
   attachSafeZoneListener() {
     clearSafeZoneListener(this)
     this.safeZoneHandler = (e) => {
@@ -160,7 +145,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.tooltip.classList.add('show')
 
-    if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
+    if (this.triggerMethod === 'click') {
       clearTimeout(this.autoHideTimeout)
       this.autoHideTimeout = setTimeout(() => {
         this.hideTooltip()
@@ -239,14 +224,6 @@ export default class PbTooltip extends PbEnhancedElement {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
 
-  get useClickToOpen() {
-    return this.element.dataset.pbTooltipUseClickToOpen === 'true'
-  }
-
-  get effectiveTriggerMethod() {
-    return this.useClickToOpen ? 'click' : this.triggerMethod
-  }
-
   get tooltipInteraction() {
     return this.element.dataset.pbTooltipInteraction === 'true'
   }