playbook_ui 16.7.0.pre.alpha.PLAY2929typeaheadportaling16241 → 16.7.0.pre.alpha.PLAY2932datepickerinlineproponly16247

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6aa67ece251fe80ebd27b359f4cb7ea330ed5bcb65cded47798133bd36ab9545
-  data.tar.gz: 89b2b5123a265f27195554e8ca3109e5cfd1d5dca787a81bb91c7167adff338a
+  metadata.gz: 565d8cd7eb822030903f71d51b92426f330b7baeecf691207f1a82b3950ff41a
+  data.tar.gz: c6478e1ae1e8b441d59206c3abd47a63a1e231eed35eebf357bcd2849e17df0b
 SHA512:
-  metadata.gz: ce7dde4b77fed71f1a176569933fcbd000b777a4fc133a5748dca7f72f57b8f771f4dc92e061f49df3f1a1efc22e5b4153fc00e6c66e11b42e4a4ab41bb3a05d
-  data.tar.gz: d5da0c81eb76cfae6a364631f4837c26e3bb3c7d4708eceda232e0ee61ac536ec4b521e0fe94639208d502871c9d164202a6fcfd15d2e85ed2711e41bd5773b4
+  metadata.gz: bbd0f4ace6597d6849ced75952307d949e895541c6347b56cc9c1777e8972e97e6a0589bfbe66736c23e3f37047356fa221014ce3bcd7b09554bf3e46819200b
+  data.tar.gz: f0160cd0552d3c0764ee4c968cd0aa4d921ed85ad396aa33b0ae8d6fb79e66f985d3ef77d9739c325d09095d8807b62ae5dcac2b7d951cb99339367425cd6636

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -180,6 +180,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
+    inLine && 'inline-date-picker',
     className
   )
 
@@ -262,7 +263,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               }
             </div>
 
-            {!hideIcon &&
+            {!hideIcon && !inLine &&
               <div
                   className={iconWrapperClass()}
                   id={`cal-icon-${pickerId}`}
@@ -274,7 +275,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               </div>
             }
 
-            {hideIcon && inLine ?
+            {inLine ?
               <div>
                 <div
                     className={`${iconWrapperClass()} date-picker-inline-icon-plus`}

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

@@ -39,7 +39,7 @@
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
 
-    <% if !object.hide_icon %>
+    <% if !object.hide_icon && !object.inline %>
       <div
           class="<%= object.icon_wrapper_class %>"
           id="cal-icon-<%= object.picker_id %>"
@@ -52,7 +52,7 @@
     <% end %>
 
     <!-- Inline -->
-    <% if object.hide_icon && object.inline %>
+    <% if object.inline %>
       <!-- Plus Icon -->
       <div
           class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"

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

@@ -92,7 +92,8 @@ module Playbook
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_date_picker_kit") + default_margin_bottom
+        inline_class = inline ? " inline-date-picker" : ""
+        generate_classname("pb_date_picker_kit") + default_margin_bottom + inline_class
       end
 
       def date_picker_config

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -40,6 +40,37 @@ describe('DatePicker Kit', () => {
     expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
   })
 
+  test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
+    const testId = 'datepicker-inline-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          inLine
+          pickerId="date-picker-inline-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('inline-date-picker')
+    expect(kit.querySelector('#cal-icon-date-picker-inline-only')).not.toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-icon-plus')).toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-angle-down')).toBeInTheDocument()
+  })
+
+  test('hideIcon without inLine does not render inline control icons', () => {
+    const testId = 'datepicker-hide-icon-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          hideIcon
+          pickerId="date-picker-hide-icon-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector('#date-picker-hide-icon-only-icon-plus')).not.toBeInTheDocument()
+  })
+
   test('shows DatePicker date format m/d/Y', async () => {
     const testId = 'datepicker-date'
     render(

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -1,6 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  classname: "inline-date-picker",
-  hide_icon: true,
   inline: true,
   picker_id: "date-picker-inline"
 }) %>

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

@@ -6,8 +6,6 @@ const DatePickerInline = (props) => {
   return (
     <div>
       <DatePicker
-          className="inline-date-picker"
-          hideIcon
           inLine
           pickerId="date-picker-inline"
           {...props}

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -113,9 +113,7 @@
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "className": "inline-date-picker",
-        "inLine": true,
-        "hideIcon": true
+        "inLine": true
       }
     },
     {

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.overrides.json

@@ -88,9 +88,7 @@
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "className": "inline-date-picker",
-        "inLine": true,
-        "hideIcon": true
+        "inLine": true
       }
     },
     {

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -151,33 +151,11 @@
   border-radius: $border_radius_md;
   max-height: calc(100vh - #{$gutter * 2});
   max-width: calc(100vw - #{$gutter * 2});
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: visible;
+  overflow: auto;
   animation-name: modalFadeIn;
   animation-duration: $animation-duration;
   outline: none;
   animation-timing-function: $easeInOutQuint;
-
-  .pb_dialog_scroll_region {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .pb_dialog_floating_root {
-    flex: 0 0 auto;
-    min-height: 0;
-    pointer-events: none;
-    position: relative;
-    z-index: 1;
-  }
-
-  .pb_dialog_floating_root > * {
-    pointer-events: auto;
-  }
 }
 
 // Left placement animations
@@ -606,35 +584,4 @@
     border: none;
     cursor: pointer;
   }
-
-  // Rails native dialog: scroll region + floating portal host for portaled form inputs
-  dialog.pb_dialog_rails:not([open]) {
-    display: none !important;
-  }
-
-  .pb_dialog_rails[open] {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    overflow: visible;
-  }
-
-  .pb_dialog_scroll_region {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .pb_dialog_floating_root {
-    flex: 0 0 auto;
-    min-height: 0;
-    pointer-events: none;
-    position: relative;
-    z-index: 1;
-  }
-
-  .pb_dialog_floating_root > * {
-    pointer-events: auto;
-  }
 }

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
 /* eslint-disable react/no-multi-comp */
 
-import React, { useState, useCallback } from "react";
+import React, { useState } from "react";
 import classnames from "classnames";
 import Modal from "react-modal";
 
@@ -16,7 +16,7 @@ import DialogBody from "./child_kits/_dialog_body";
 import Flex from "../pb_flex/_flex";
 import IconCircle from "../pb_icon_circle/_icon_circle";
 import Title from "../pb_title/_title";
-import { DialogContext, DialogContextValue } from "./_dialog_context";
+import { DialogContext } from "./_dialog_context";
 
 type DialogProps = {
   aria?: { [key: string]: string };
@@ -101,20 +101,12 @@ const Dialog = (props: DialogProps): React.ReactElement => {
   const [triggerOpened, setTriggerOpened] = useState(false),
     modalIsOpened = trigger ? triggerOpened : opened;
 
-  const [selectMenuPortalTarget, setSelectMenuPortalTarget] =
-    useState<HTMLElement | null>(null);
-
-  const floatingRootRefCallback = useCallback((node: HTMLElement | null) => {
-    setSelectMenuPortalTarget(node);
-  }, []);
-
-  const api: DialogContextValue = {
+  const api = {
     onClose: trigger
       ? function () {
           setTriggerOpened(false);
         }
       : onClose,
-    selectMenuPortalTarget,
   };
 
   if (trigger) {
@@ -195,7 +187,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
             style={{ content: dynamicInlineProps }}
         >
-          <div className="pb_dialog_scroll_region">
+          <>
             {title && !status ? <Dialog.Header closeable={closeable}>{title}</Dialog.Header> : null}
             {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
             {status && (
@@ -246,13 +238,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               </Dialog.Footer>
             ) : null}
             {children}
-          </div>
-          {/* No aria-hidden: portaled form inputs with dropdowns live here and must remain interactive. */}
-          <div
-              className="pb_dialog_floating_root"
-              data-pb-dialog-floating-root="true"
-              ref={floatingRootRefCallback}
-          />
+          </>
         </Modal>
       </div>
     </DialogContext.Provider>

data/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx

@@ -1,9 +1,3 @@
-import React from "react"
+import React from 'react'
 
-export type DialogContextValue = {
-  onClose?: () => void
-  // Mount point for form inputs with dropdowns so they escape dialog scroll/overflow.
-  selectMenuPortalTarget?: HTMLElement | null
-}
-
-export const DialogContext = React.createContext<DialogContextValue | null>(null)
+export const DialogContext = React.createContext(null)

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -56,7 +56,7 @@ const DialogHeader = (props: DialogHeaderProps): React.ReactElement => {
         {children}
         {closeable &&
           <CloseIcon
-              onClose={api?.onClose}
+              onClose={api.onClose}
           />
         }
         

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -13,7 +13,6 @@
     <% end %>
 >
     <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
-            <div class="pb_dialog_scroll_region">
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id, closeable: object.closeable }) %>
             <% end %>
@@ -45,8 +44,5 @@
             <% end %>
 
             <%= content %>
-            </div>
-            <%# No aria-hidden: portaled form inputs with dropdowns live here and must remain interactive. %>
-            <div class="pb_dialog_floating_root" data-pb-dialog-floating-root="true"></div>
     <% end %>
 </div>

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -1,10 +1,6 @@
 import React, {useState} from 'react'
 import { render, cleanup, waitFor, fireEvent, screen } from "../utilities/test-utils";
 import { Dialog, Button } from 'playbook-ui'
-import {
-  resolveDialogFloatingPortalHost,
-  resolveTypeaheadMenuPortalHost,
-} from "../utilities/floatingPortalHosts"
 
 const text="Hello Body Text, Nice to meet ya."
 const title="Header Title is the Title Prop"
@@ -51,23 +47,6 @@ test('renders the component when clicked', async () => {
   cleanup()
 })
 
-test('renders scroll region and floating root for portaled inputs (Typeahead, etc.)', async () => {
-  const { queryByText } = render(<DialogTest />)
-
-  fireEvent.click(queryByText('Open Dialog'))
-
-  await waitFor(() =>
-    expect(queryByText("Header Title is the Title Prop")).toBeInTheDocument(),
-  )
-
-  expect(document.querySelector('.pb_dialog_scroll_region')).toBeInTheDocument()
-  expect(
-    document.querySelector('[data-pb-dialog-floating-root="true"]'),
-  ).toBeInTheDocument()
-
-  cleanup()
-})
-
 test("renders the title and body text", async () => {
 
   const { queryByText } = render(<DialogTest />);
@@ -164,72 +143,3 @@ test('renders dialog without close button when closeable is false', async () =>
 
   cleanup()
 })
-
-describe('Dialog floating portal host (Typeahead)', () => {
-  beforeEach(() => {
-    document.body.innerHTML = ''
-  })
-
-  test('resolveDialogFloatingPortalHost returns null outside dialog, modal, or popover', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    expect(resolveDialogFloatingPortalHost(div)).toBeNull()
-  })
-
-  test('resolveDialogFloatingPortalHost returns floating root inside native dialog', () => {
-    const dialog = document.createElement('dialog')
-    const scroll = document.createElement('div')
-    scroll.className = 'pb_dialog_scroll_region'
-    const floating = document.createElement('div')
-    floating.setAttribute('data-pb-dialog-floating-root', 'true')
-    const inner = document.createElement('div')
-    dialog.appendChild(scroll)
-    dialog.appendChild(floating)
-    dialog.appendChild(inner)
-    document.body.appendChild(dialog)
-
-    expect(resolveDialogFloatingPortalHost(inner)).toBe(floating)
-  })
-
-  test('resolveDialogFloatingPortalHost falls back to dialog when floating root missing', () => {
-    const dialog = document.createElement('dialog')
-    const inner = document.createElement('div')
-    dialog.appendChild(inner)
-    document.body.appendChild(dialog)
-
-    expect(resolveDialogFloatingPortalHost(inner)).toBe(dialog)
-  })
-
-  test('resolveDialogFloatingPortalHost returns floating root inside .pb_dialog', () => {
-    const shell = document.createElement('div')
-    shell.className = 'pb_dialog'
-    const floating = document.createElement('div')
-    floating.setAttribute('data-pb-dialog-floating-root', 'true')
-    const inner = document.createElement('div')
-    shell.appendChild(floating)
-    shell.appendChild(inner)
-    document.body.appendChild(shell)
-
-    expect(resolveDialogFloatingPortalHost(inner)).toBe(floating)
-  })
-
-  test('resolveTypeaheadMenuPortalHost uses dialog floating root when inside dialog', () => {
-    const dialog = document.createElement('dialog')
-    const floating = document.createElement('div')
-    floating.setAttribute('data-pb-dialog-floating-root', 'true')
-    const kit = document.createElement('div')
-    dialog.appendChild(floating)
-    dialog.appendChild(kit)
-    document.body.appendChild(dialog)
-
-    expect(resolveTypeaheadMenuPortalHost(kit, null)).toBe(floating)
-  })
-
-  test('resolveTypeaheadMenuPortalHost uses context target when host not in tree', () => {
-    const host = document.createElement('div')
-    const kit = document.createElement('div')
-    document.body.appendChild(kit)
-
-    expect(resolveTypeaheadMenuPortalHost(kit, host)).toBe(host)
-  })
-})

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -47,31 +47,7 @@
   background-color: $white;
   border: 0;
   box-shadow: $shadow_deeper;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  max-height: inherit;
 }
-
-.pb_popover_scroll_region {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.pb_popover_floating_root {
-  flex: 0 0 auto;
-  min-height: 0;
-  pointer-events: none;
-  position: relative;
-  z-index: 1;
-}
-
-.pb_popover_floating_root > * {
-  pointer-events: auto;
-}
-
 .overflow_handling {
   overflow: auto;
 }

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -20,8 +20,6 @@ import {
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from '../utilities/object';
-import { DialogContext, DialogContextValue } from "../pb_dialog/_dialog_context";
-import { targetIsInsidePortaledFloatingKit } from "../utilities/floatingPortalHosts";
 
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
@@ -114,17 +112,6 @@ const Popover = (props: PbPopoverProps) => {
       : filteredGlobalProps
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
-
-  const [selectMenuPortalTarget, setSelectMenuPortalTarget] =
-    useState<HTMLElement | null>(null);
-  const floatingRootRef = useCallback((node: HTMLElement | null) => {
-    setSelectMenuPortalTarget(node);
-  }, []);
-
-  const menuPortalApi: DialogContextValue = useMemo(
-    () => ({ selectMenuPortalTarget }),
-    [selectMenuPortalTarget],
-  );
   const widthHeightStyles = () => {
     return Object.assign(
       {},
@@ -165,28 +152,17 @@ const Popover = (props: PbPopoverProps) => {
             <div
                 className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
             >
-            <div
-                className={classnames("pb_popover_body", popoverSpacing)}
-                id={targetId}
-                style={widthHeightStyles()}
-            >
-              <DialogContext.Provider value={menuPortalApi}>
-                <div
-                    className={classnames(
-                      "pb_popover_scroll_region",
-                      overflowHandling,
-                    )}
-                >
-                  {children}
-                </div>
-                <div
-                    aria-hidden="true"
-                    className="pb_popover_floating_root"
-                    data-pb-dialog-floating-root="true"
-                    ref={floatingRootRef}
-                />
-              </DialogContext.Provider>
-            </div>
+              <div
+                  className={classnames(
+                    "pb_popover_body",
+                    popoverSpacing,
+                    overflowHandling
+                  )}
+                  id={targetId}
+                  style={widthHeightStyles()}
+              >
+                {children}
+              </div>
             </div>
           </div>
         );
@@ -238,8 +214,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
       const target = e.target as HTMLElement
 
       const targetIsPopover =
-        target.closest("#" + targetId) !== null ||
-        targetIsInsidePortaledFloatingKit(target);
+        target.closest("#" + targetId) !== null;
       const targetIsReference =
         target.closest("#reference-" + targetId) !== null;
 
@@ -252,11 +227,9 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
           if (!targetIsPopover && !targetIsReference) shouldClose();
           break;
         case "inside":
-          if (targetIsInsidePortaledFloatingKit(target)) return
           if (targetIsPopover) shouldClose();
           break;
         case "any":
-          if (targetIsInsidePortaledFloatingKit(target)) return
           if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
           break;
       }
@@ -314,7 +287,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
                 )}
             </>
           ) : (
-            popoverComponent
+            { popoverComponent }
           ))}
       </>
     </PopperManager>

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

@@ -1,6 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 import { createPopper, Instance, Placement } from '@popperjs/core'
-import { targetIsInsidePortaledFloatingKit } from '../utilities/floatingPortalHosts'
 
 const POPOVER_OFFSET_Y = [0, 20]
 
@@ -62,20 +61,17 @@ export default class PbPopover extends PbEnhancedElement {
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
-      const t = target as HTMLElement
-      const isTooltipElement = t.closest(`#${this.tooltipId}`) !== null
-      const isTriggerElement = t.closest(`#${this.triggerElementId}`) !== null
-      const isPortaledKit = targetIsInsidePortaledFloatingKit(t)
+      const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
+      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        if (isPortaledKit) return
         if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
           this.hideTooltip()
         }
         break
       case 'outside':
-        if (!isTooltipElement && !isTriggerElement && !isPortaledKit) {
+        if (!isTooltipElement && !isTriggerElement) {
           this.hideTooltip()
         }
         break

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,10 +1,7 @@
 <%= pb_content_tag do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
-      <div class="pb_popover_scroll_region">
-        <%= content.presence %>
-      </div>
-      <div class="pb_popover_floating_root" data-pb-dialog-floating-root="true" aria-hidden="true"></div>
+      <%= content.presence %>
     </div>
   </div>
 <% end %>