playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2215githubactionsdepupdate8717

data/app/pb_kits/playbook/pb_table/index.ts

@@ -64,8 +64,8 @@ export default class PbTable extends PbEnhancedElement {
 
     this.stickyLeftColumns.forEach((colId, index) => {
       const isLastColumn = index === this.stickyLeftColumns.length - 1;
-      const header = this.element.querySelector(`th[id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
       if (header) {
         header.classList.add('sticky');
@@ -125,8 +125,8 @@ export default class PbTable extends PbEnhancedElement {
 
     this.stickyRightColumnsReversed.forEach((colId, index) => {
       const isLastColumn = index === this.stickyRightColumns.length - 1;
-      const header = this.element.querySelector(`th[id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
       if (header) {
         header.classList.add('sticky');

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -22,6 +22,10 @@
               border-radius: 0 4px 0 0;
               border-width: 1px 1px 1px 0;
             }
+            &:only-child {
+              border-radius: 4px 4px 0 0;
+              border-width: 1px 1px 1px 1px;
+            }
           }
         }
       }
@@ -39,6 +43,9 @@
             &:last-child {
               border-width: 0 1px 1px 0;
             }
+            &:only-child {
+              border-width: 0 1px 1px 1px;
+            }
           }
 
           &:last-child {
@@ -53,6 +60,10 @@
                 border-radius: 0 0 4px 0;
                 border-width: 0 1px 1px 0;
               }
+              &:only-child {
+                border-radius: 0 0 4px 4px;
+                border-width: 0 1px 1px 1px;
+              }
             }
           }
         }

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -4,6 +4,10 @@
       border-right: 1px solid $border_light !important;
     }
 
+    thead tr:not(:first-child) th {
+      border-right: 1px solid $border_light !important;
+    }
+    
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -9,6 +9,7 @@ import {
   shift,
   useFloating,
   useHover,
+  useClick,
   useInteractions,
 } from "@floating-ui/react"
 
@@ -23,6 +24,7 @@ type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
   children: JSX.Element,
+  useClickToOpen?: boolean,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
   height?: string,
@@ -46,6 +48,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     aria = {},
     className,
     children,
+    useClickToOpen = false,
     data = {},
     delay = 0,
     height,
@@ -110,14 +113,21 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     placement: preferredPlacement
   })
 
+  const hover = useHover(context, {
+    delay,
+    handleClose: interaction ? safePolygon({
+      blockPointerEvents: false
+    }) : null,
+    enabled: !useClickToOpen // Disable hover when useClickToOpen is true
+  })
+
+  const click = useClick(context, {
+    enabled: useClickToOpen // Only enable click when useClickToOpen is true
+  })
 
-  const { getFloatingProps } = useInteractions([
-    useHover(context, {
-      delay,
-      handleClose: interaction ? safePolygon({
-        blockPointerEvents: false
-      }) : null
-    })
+  const { getFloatingProps, getReferenceProps } = useInteractions([
+    hover,
+    click
   ])
 
   const staticSide = {
@@ -142,22 +152,24 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   return (
     <>
       <div
-          className={`pb_tooltip_kit ${css}`}
-          ref={(element) => {
-            refs.setReference(element);
-            if (ref) {
-              if (typeof ref === "function") {
-                ref(element);
-              } else if (typeof ref === "object") {
-                ref.current = element;
+          {...getReferenceProps({
+            className: `pb_tooltip_kit ${css}`,
+            ref: (element) => {
+              refs.setReference(element);
+              if (ref) {
+                if (typeof ref === "function") {
+                  ref(element);
+                } else if (typeof ref === "object") {
+                  ref.current = element;
+                }
               }
-            }
-          }}
-          role="tooltip_trigger"
-          style={{ display: "inline-block" }}
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
+            },
+            role: "tooltip_trigger",
+            style: { display: "inline-block" },
+            ...ariaProps,
+            ...dataProps,
+            ...htmlProps,
+          })}
       >
         {children}
       </div>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Button from '../../pb_button/_button'
+import Tooltip from '../_tooltip'
+import Flex from '../../pb_flex/_flex'
+
+const TooltipClickOpen = (props) => {
+  return (
+    <Flex flexDirection='row'
+        gap='md'
+        wrap
+    >
+      <Tooltip
+          placement='top'
+          text='Tooltip Opened'
+          useClickToOpen
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Click to Open' />
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export default TooltipClickOpen

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md

@@ -0,0 +1 @@
+Set the prop `useClickToOpen` so that the tooltip will only appear when an item is clicked rather than hovered over.

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

@@ -18,3 +18,4 @@ examples:
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
+  - tooltip_click_open: Click to Open

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

@@ -5,3 +5,4 @@ export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'
+export { default as TooltipClickOpen } from './_tooltip_click_open'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb

@@ -0,0 +1,18 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-preserve-search-input",
+    is_multi: false,
+    label: "Colors",
+    options: options,
+    placeholder: "Select...",
+    preserve_search_input: true,
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md

@@ -0,0 +1 @@
+By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserve_search_input` prop in order to prevent text from being cleared when the field loses focus

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

@@ -15,6 +15,7 @@ examples:
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
     - typeahead_disabled: Disabled
+    - typeahead_preserve_input: Preserve Search Input
 
   react:
     - typeahead_default: Default

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -54,6 +54,8 @@ module Playbook
                                      default: nil
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :preserve_search_input, type: Playbook::Props::Boolean,
+                                   default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -103,6 +105,7 @@ module Playbook
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,
           disabled: disabled,
+          preserveSearchInput: preserve_search_input,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?