playbook_ui 14.16.0.pre.alpha.play1881removelodash6986 → 14.16.0.pre.alpha.play1957inlinedatepickericonbugfix6872

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

@@ -14,79 +14,3 @@
     }
   }
 }
-// remove all outward facing borders from header
-.header-borderless > thead,
-.header-borderless > thead > tr,
-.header-borderless > thead > tr > th,
-.header-borderless > .pb_table_thead,
-.header-borderless > .pb_table_thead > .pb_table_tr,
-.header-borderless > .pb_table_thead .pb_table_th {
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-// remove bottom border (internal to table) on header cells - only light mode needs this redundancy handled likely due to a difference in the base scss and table-dark.scss
-.header-borderless:not(.table-dark) > thead > tr:last-child > th,
-.header-borderless:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
-  border-bottom: none !important;
-}
-
-// preserves top rounded corners to header at top of table-card for unnested card
-.header-borderless > thead > tr:first-child > th:first-child,
-.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
-  border-top-left-radius: $border_radius_md !important;
-}
-
-.header-borderless > thead > tr:first-child > th:last-child,
-.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
-  border-top-right-radius: $border_radius_md !important;
-}
-
-// ensures top border is from first row of body to prevent double borders
-.header-borderless > tbody > tr:first-child > td,
-.header-borderless > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
-  border-top: 1px solid $border_light !important;
-}
-
-// floating code - this carries over everything for header-borderless
-.header-floating > thead,
-.header-floating > thead > tr,
-.header-floating > thead > tr > th,
-.header-floating > .pb_table_thead,
-.header-floating > .pb_table_thead > .pb_table_tr,
-.header-floating > .pb_table_thead .pb_table_th {
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-.header-floating:not(.table-dark) > thead > tr:last-child > th,
-.header-floating:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
-  border-bottom: none !important;
-}
-
-.header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
-  border-top-left-radius: $border_radius_md !important;
-}
-
-.header-floating > thead > tr:first-child > th:last-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
-  border-top-right-radius: $border_radius_md !important;
-}
-
-.header-floating > tbody > tr:first-child > td,
-.header-floating > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
-  border-top: 1px solid $border_light !important;
-}
-
-// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
-.header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
-  border-top-left-radius: 0 !important; 
-} 
-.header-floating > thead > tr:first-child > th:last-child, 
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
-  border-top-right-radius: 0 !important; 
-}

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

@@ -1,7 +1,7 @@
-[class^=pb_table]:not(:has(colgroup)) {
+[class^=pb_table] {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -12,7 +12,6 @@ type TableHeadPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -24,7 +23,6 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -33,15 +31,7 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    "pb_table_thead", 
-    {
-      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
-      "pb_table_thead_floating": headerStyle === "floating",
-    },
-    globalProps(props), 
-    className
-  );
+  const classes = classnames("pb_table_thead", globalProps(props), className);
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -12,7 +12,6 @@ type TableHeaderPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -25,7 +24,6 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -35,15 +33,7 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    "pb_table_th", 
-    {
-      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
-      "pb_table_thead_floating": headerStyle === "floating",
-    },
-    globalProps(props), 
-    className
-  );
+  const classes = classnames("pb_table_th", globalProps(props), className);
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -22,7 +22,6 @@ type TableRowPropTypes = {
   dark?: boolean;
   dragId?: string;
   draggableItem?: boolean;
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   toggleCellId?: string;
@@ -42,7 +41,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     dark = false,
     dragId,
     draggableItem = false,
-    headerStyle = "default",
     htmlOptions = {},
     id,
     toggleCellId,
@@ -62,9 +60,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
-    {
-      "pb_table_tr_borderless_header": headerStyle === "borderless",
-    },
     collapsibleRow,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -167,20 +167,3 @@ test("Should have outerPadding class", () => {
   const kit = renderKit(Table, props, { outerPadding: "sm" })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card outer_padding_space_sm table-collapse-sm")
 })
-
-test("when headerStyle is default", () => {
-  const kit = renderKit(Table, props)
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card table-collapse-sm")
-  expect(kit).not.toHaveClass("header-borderless")
-  expect(kit).not.toHaveClass("header-floating")
-})
-
-test("when headerStyle is borderless", () => {
-  const kit = renderKit(Table, props, { headerStyle: "borderless" })
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-borderless table-collapse-sm")
-})
-
-test("when headerStyle is floating", () => {
-  const kit = renderKit(Table, props, { headerStyle: "floating" })
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-floating table-collapse-sm")
-})

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

@@ -0,0 +1,282 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+import { computePosition, offset, flip, shift, arrow, autoUpdate } from '@floating-ui/dom'
+
+const TOOLTIP_OFFSET = 20
+const TOOLTIP_TIMEOUT = 250
+const SAFE_ZONE_MARGIN = 1
+
+export default class PbTooltipFloatingUi extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-delay-open], [data-pb-tooltip-kit="true"][data-pb-tooltip-delay-close], [data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="true"]'
+  }
+
+  connect() {
+    if (this.tooltipInteraction) {
+      document.addEventListener('mousemove', (e) => {
+        this.lastMouseX = e.clientX
+        this.lastMouseY = e.clientY
+      })
+    }
+    
+    this.triggerElements.forEach((trigger) => {
+      const method = this.triggerMethod
+      const interactionEnabled = this.tooltipInteraction
+
+      if (method === 'click') {
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
+        })
+      } else {
+        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 {
+            if (interactionEnabled) {
+              this.attachSafeZoneListener()
+            } else {
+              this.hideTooltip()
+            }
+          }
+        })
+
+        if (interactionEnabled) {
+          this.tooltip.addEventListener('mouseenter', () => {
+            clearSafeZoneListener(this)
+          })
+
+          this.tooltip.addEventListener('mouseleave', () => {
+            this.attachSafeZoneListener()
+          })
+        }
+      }
+    })
+  }
+
+  attachSafeZoneListener() {
+    clearSafeZoneListener(this)
+    this.safeZoneHandler = (e) => {
+      if (!this.currentTrigger) return
+      const triggerRect = this.currentTrigger.getBoundingClientRect()
+      const tooltipRect = this.tooltip.getBoundingClientRect()
+      const safeRect = getSafeZone(triggerRect, tooltipRect, this.position, SAFE_ZONE_MARGIN)
+      if (!isPointInsideRect(e.clientX, e.clientY, safeRect)) {
+        this.hideTooltip()
+        clearSafeZoneListener(this)
+      }
+    }
+    document.addEventListener('mousemove', this.safeZoneHandler)
+  }
+
+  checkCloseTooltip(trigger) {
+    document.querySelector('body').addEventListener('click', ({ target }) => {
+      const isTooltip = target.closest(`#${this.tooltipId}`) === this.tooltip
+      const isTrigger = target.closest(this.triggerElementSelector) === trigger
+      if (isTrigger || isTooltip) {
+        this.checkCloseTooltip(trigger)
+      } else {
+        this.hideTooltip()
+      }
+    }, { once: true })
+  }
+
+  showTooltip(trigger) {
+    if (this.shouldShowTooltip === 'false') return
+
+    clearSafeZoneListener(this)
+
+    this.tooltip.style.opacity = '1'
+    this.tooltip.style.visibility = 'visible'
+    this.tooltip.style.pointerEvents = 'auto'
+
+    if (this.cleanup) {
+      this.cleanup()
+    }
+
+    const arrowElement = document.querySelector(`#${this.tooltipId}-arrow`)
+
+    this.cleanup = autoUpdate(trigger, this.tooltip, () => {
+      computePosition(trigger, this.tooltip, {
+        placement: this.position,
+        strategy: 'fixed',
+        middleware: [
+          offset({ mainAxis: TOOLTIP_OFFSET, crossAxis: 0 }),
+          flip(),
+          shift(),
+          arrow({ element: arrowElement })
+        ],
+      }).then(({ x, y, placement, middlewareData }) => {
+        Object.assign(this.tooltip.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+          position: 'fixed'
+        })
+        this.tooltip.setAttribute('data-popper-placement', placement)
+        if (arrowElement && middlewareData.arrow) {
+          const { x: arrowX, y: arrowY } = middlewareData.arrow
+          Object.assign(arrowElement.style, {
+            left: arrowX != null ? `${arrowX}px` : '',
+            top: arrowY != null ? `${arrowY}px` : '',
+            position: 'absolute'
+          })
+        }
+      })
+    })
+
+    this.tooltip.classList.add('show')
+
+    if (this.triggerMethod === 'click') {
+      clearTimeout(this.autoHideTimeout)
+      this.autoHideTimeout = setTimeout(() => {
+        this.hideTooltip()
+      }, 1000)
+    }
+  }
+
+  hideTooltip() {
+    if (!this.tooltip) return
+
+    this.tooltip.classList.add('fade_out')
+    setTimeout(() => {
+      if (this.cleanup) {
+        this.cleanup()
+        this.cleanup = null
+      }
+      this.tooltip.classList.remove('show')
+      this.tooltip.classList.remove('fade_out')
+      this.tooltip.style.opacity = '0'
+      this.tooltip.style.visibility = 'hidden'
+      this.tooltip.style.pointerEvents = 'none'
+      this.tooltip.style.position = ''
+      this.tooltip.style.top = ''
+      this.tooltip.style.left = ''
+      this.tooltip.style.transform = ''
+    }, TOOLTIP_TIMEOUT)
+  }
+
+  get triggerElements() {
+    let triggerEl
+    if (this.triggerElementId) {
+      triggerEl = document.querySelector(`#${this.triggerElementId}`)
+    } else if (this.triggerElementSelector) {
+      const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
+      triggerEl = selectorIsId
+        ? document.querySelector(this.triggerElementSelector)
+        : document.querySelectorAll(this.triggerElementSelector)
+    } else {
+      triggerEl = this.element
+    }
+    if (!triggerEl) {
+      console.error('Tooltip Kit: No valid trigger element found!')
+      return []
+    }
+    if (triggerEl.length === undefined) {
+      triggerEl = [triggerEl]
+    }
+    return triggerEl
+  }
+
+  get tooltip() {
+    return (this._tooltip = this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+  }
+
+  get position() {
+    return this.element.dataset.pbTooltipPosition
+  }
+
+  get triggerElementId() {
+    return this.element.dataset.pbTooltipTriggerElementId
+  }
+
+  get tooltipId() {
+    return this.element.dataset.pbTooltipTooltipId
+  }
+
+  get triggerElementSelector() {
+    return this.element.dataset.pbTooltipTriggerElementSelector
+  }
+
+  get shouldShowTooltip() {
+    return this.element.dataset.pbTooltipShowTooltip
+  }
+
+  get triggerMethod() {
+    return this.element.dataset.pbTooltipTriggerMethod || 'hover'
+  }
+
+  get tooltipInteraction() {
+    return this.element.dataset.pbTooltipInteraction === 'true'
+  }
+  
+  get delayOpen() {
+    return this.element.dataset.pbTooltipDelayOpen
+  }
+  
+  get delayClose() {
+    return this.element.dataset.pbTooltipDelayClose
+  }
+}
+
+function clearSafeZoneListener(context) {
+  if (context.safeZoneHandler) {
+    document.removeEventListener('mousemove', context.safeZoneHandler)
+    context.safeZoneHandler = null
+  }
+}
+
+function getSafeZone(triggerRect, tooltipRect, placement, margin) {
+  let safeRect = {}
+  if (placement.startsWith('top')) {
+    safeRect.left = triggerRect.left - margin
+    safeRect.right = triggerRect.right + margin
+    safeRect.top = tooltipRect.bottom - margin
+    safeRect.bottom = triggerRect.top + margin
+  } else if (placement.startsWith('bottom')) {
+    safeRect.left = triggerRect.left - margin
+    safeRect.right = triggerRect.right + margin
+    safeRect.top = triggerRect.bottom - margin
+    safeRect.bottom = tooltipRect.top + margin
+  } else if (placement.startsWith('left')) {
+    safeRect.top = triggerRect.top - margin
+    safeRect.bottom = triggerRect.bottom + margin
+    safeRect.left = tooltipRect.right - margin
+    safeRect.right = triggerRect.left + margin
+  } else if (placement.startsWith('right')) {
+    safeRect.top = triggerRect.top - margin
+    safeRect.bottom = triggerRect.bottom + margin
+    safeRect.left = triggerRect.right - margin
+    safeRect.right = tooltipRect.left + margin
+  } else {
+    safeRect = {
+      left: triggerRect.left - margin,
+      right: triggerRect.right + margin,
+      top: triggerRect.top - margin,
+      bottom: triggerRect.bottom + margin,
+    }
+  }
+  return safeRect
+}
+
+function isPointInsideRect(x, y, rect) {
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+}