playbook_ui 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", scroll_bar_none: true }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayHideScrollBar = () => (
+    <>
+        <Overlay
+            color="card_light"
+            layout={{"x": "xl"}}
+            scrollBarNone
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayHideScrollBar

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md

@@ -0,0 +1 @@
+Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md

@@ -0,0 +1 @@
+Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
+
+const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            ref={ref} 
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+})
+
+const OverlayVerticalDynamicMultiDirectional = () => (
+    <>
+        <Overlay
+            color="card_light"
+            dynamic
+            layout={{"x": "xl"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayVerticalDynamicMultiDirectional

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md

@@ -0,0 +1 @@
+Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md

@@ -0,0 +1 @@
+Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar. You must also add a `ref` to the child that's being passed through the Overlay.

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

@@ -2,9 +2,13 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
+  - overlay_hide_scroll_bar: Hide Scroll Bar
 
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
+  - overlay_hide_scroll_bar: Hide Scroll Bar

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

@@ -1,3 +1,5 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
+export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
+export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'

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

@@ -0,0 +1,61 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const OVERLAY_SELECTOR = '[data-pb-overlay]'
+const OVERLAY_SCROLL_ELEMENT = '[data-overlay-scroll-element]'
+const PREVIOUS_OVERLAY_CLASSNAME = '[data-previous-overlay-classname]'
+const SUBSEQUENT_OVERLAY_CLASSNAME = '[data-subsequent-overlay-classname]'
+
+export default class PbOverlay extends PbEnhancedElement {
+    static get selector() {
+        return OVERLAY_SELECTOR
+    }
+
+    get target() {
+        return this.element.querySelector(OVERLAY_SCROLL_ELEMENT).children[0]
+    }
+
+    connect() {
+        this.handleOverlayDynamic()
+    }
+
+    handleOverlayDynamic() {
+        const isOverlayDynamic = this.element.dataset?.overlayDynamic
+
+        if (isOverlayDynamic) {
+            const previousOverlayElement = this.element.querySelector(PREVIOUS_OVERLAY_CLASSNAME)
+            const previousOverlayClassname = previousOverlayElement?.dataset?.previousOverlayClassname
+            const subsequentOverlayElement = this.element.querySelector(SUBSEQUENT_OVERLAY_CLASSNAME)
+            const subsequentOverlayClassname = subsequentOverlayElement?.dataset?.subsequentOverlayClassname
+
+            const handleScrollChange = (target) => {
+                const { scrollLeft, scrollWidth, clientWidth } = target
+                const isScrollAtStart = scrollLeft === 0
+                const isScrollAtEnd = scrollLeft + clientWidth >= scrollWidth - 1
+        
+                if (isScrollAtStart) {
+                    previousOverlayElement.classList.remove(previousOverlayClassname)
+                } else {
+                    previousOverlayElement.classList.add(previousOverlayClassname)
+                }
+        
+                if (isScrollAtEnd) {
+                    subsequentOverlayElement.classList.remove(subsequentOverlayClassname)
+                } else {
+                    subsequentOverlayElement.classList.add(subsequentOverlayClassname)
+                }
+            }
+
+            this.target.addEventListener('scroll', (event) => {
+                handleScrollChange(event.target)
+            })
+
+            handleScrollChange(this.target)
+        }
+    }
+
+    disconnect() {
+        if (this.element.dataset?.overlayDynamic) {
+            this.target.removeEventListener('scroll')
+        }
+    }
+}

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -16,12 +16,14 @@ id: object.id,
         <% end %>
 
     <% else %>
-        <div class="<%= previous_overlay_class_name %>"></div>
+        <div class="<%= previous_overlay_class_name %>" data-previous-overlay-classname="<%= previous_overlay_class_name %>"></div>
 
-        <%= content.presence %>
+        <div data-overlay-scroll-element="true">
+            <%= content.presence %>
+        </div>
 
         <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>"></div>
+            <div class="<%= subsequent_overlay_class_name %>" data-subsequent-overlay-classname="<%= subsequent_overlay_class_name %>"></div>
         <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -8,9 +8,13 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
+      prop :dynamic, type: Playbook::Props::Boolean,
+                     default: false
+      prop :scroll_bar_none, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
-        generate_classname("pb_overlay")
+        generate_classname("pb_overlay", hide_scroll_bar_class)
       end
 
       def position
@@ -105,6 +109,17 @@ module Playbook
           "bg_dark": "#0a0527",
         }
       end
+
+      def data_attributes
+        data ||= {}
+        data.merge!("data-pb-overlay" => true)
+        data.merge!("data-overlay-dynamic" => true) if dynamic
+        data
+      end
+
+      def hide_scroll_bar_class
+        scroll_bar_none ? " overlay-hide-scrollbar" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -64,3 +64,15 @@ test('should render children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveTextContent(props.children)
 })
+
+test('should add overlay-hide-scrollbar class when scrollBarNone is true', () => {
+    const props = {
+      children,
+      data: { testid: testId },
+      scrollBarNone: true
+    }
+  
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('overlay-hide-scrollbar')
+})

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { OverlayChildrenProps } from '../_overlay'
+import React, { useRef, useEffect, useState } from 'react';
+import { OverlayChildrenProps } from '../_overlay';
 
 const previousOverlayDirectionMap: { [key: string]: string } = {
     "x": "left",
@@ -15,11 +15,40 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     const {
         children,
         color,
+        dynamic,
         position,
         size,
     } = props
 
-    const hasSubsequentOverlay = position === "x" || position === "y"
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [isAtStart, setIsAtStart] = useState(true);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+
+
+    const handleScroll = () => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            const { scrollLeft, scrollWidth, clientWidth } = container;
+            const atStart = scrollLeft === 0;
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
+
+            setIsAtStart(atStart);
+            setIsAtEnd(atEnd);
+        }
+    };
+
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            container.addEventListener('scroll', handleScroll);
+            handleScroll();
+            return () => {
+                container.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, []);
+
+    const hasSubsequentOverlay = position === "x" || position === "y";
 
     const getPreviousOverlayDirection = () => {
         return hasSubsequentOverlay ? previousOverlayDirectionMap[position] : position
@@ -34,15 +63,24 @@ const OverlayToken = (props: OverlayChildrenProps) => {
 
     return (
         <>
-            <div className={previousOverlayClassName} />
-
-            {children}
-
-            { hasSubsequentOverlay &&
-                <div className={subsequentOverlayClassName} />
+            <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
+            {dynamic ? 
+                <div
+                    ref={scrollContainerRef}
+                    style={{
+                        overflowX: 'auto',     
+                    }}
+                >
+                    {children}
+                </div>
+                : 
+                    children
+                }
+            {hasSubsequentOverlay &&
+                <div className={dynamic ? isAtEnd ? '' : subsequentOverlayClassName : subsequentOverlayClassName} />
             }
         </>
     )
 }
 
-export default OverlayToken
+export default OverlayToken;

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

@@ -19,7 +19,7 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
-import { uniqueId } from 'lodash';
+import { uniqueId } from '../utilities/object';
 
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria_attributes,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,11 +1,7 @@
 <%= content_tag(:div,
 class: object.wrapper_classname,
 style: object.style) do %>
-  <%= content_tag(:div,
-  id: object.id,
-  data: object.data_values,
-  class: object.classname,
-  **combined_html_options) do %>
+  <%= pb_content_tag do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:ul,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:ul) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,10 +1,6 @@
-<%= content_tag(:li,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
-  <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
-    <div class="circle">
+<%= pb_content_tag(:li) do %>
+  <div class="box" style="max-width: min-content;">
+    <div class="circle" id="<%= object.tooltip_trigger_class %>" >
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
     </div>
     <% if object.tooltip.present? %>

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -1,6 +1,4 @@
-/*eslint-disable react/no-multi-comp */
-
-import React, { forwardRef, useRef } from 'react'
+import React, { useRef, forwardRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -10,7 +8,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type RadioProps = {
   aria?: { [key: string]: string },
   alignment?: string,
-  checked?: boolean,
+  checked?: boolean, // removed default assignment here
   children?: React.ReactChild[] | React.ReactChild,
   customChildren?: boolean,
   className?: string,
@@ -24,10 +22,10 @@ type RadioProps = {
   name?: string,
   value?: string,
   text?: string,
-  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 
-const Radio = ({
+const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   aria = {},
   alignment,
   children,
@@ -43,110 +41,123 @@ const Radio = ({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
+  checked,
   onChange = () => { void 0 },
   ...props
-}: RadioProps, ref: any) => {
-  const radioRef = useRef(null);
+}, ref) => {
+  const internalRef = useRef<HTMLInputElement>(null)
+  const setRefs = (el: HTMLInputElement) => {
+    internalRef.current = el
+    if (typeof ref === 'function') {
+      ref(el)
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
+    }
+  }
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_radio_kit', alignment),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  );
+  )
 
   const classesCustom = classnames(
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  );
+  )
+
+  const checkedProps = checked !== undefined ? { checked } : {}
 
-  const displayRadio = (props: RadioProps & any) => {
-    if (children && customChildren == false)
-      return (children)
+  const displayRadio = (inputProps: any) => {
+    if (children && customChildren === false)
+      return children
     else
-    return (
-    <input
-        disabled={disabled}
-        id={id}
-        name={name}
-        onChange={onChange}
-        ref={ref}
-        text={text}
-        type="radio"
-        value={value}
-        {...props}
-    />
-  )}
+      return (
+        <input
+            {...checkedProps}
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            ref={setRefs}
+            type="radio"
+            value={value}
+            {...inputProps}
+        />
+      )
+  }
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
     if (event) {
-      const target = event.target as HTMLElement;
+      const target = event.target as HTMLElement
       if (
         target.id === 'pb-radio-children-wrapper' ||
         target.closest('#pb-radio-children-wrapper')
       ) {
-        radioRef.current?.click();
+        internalRef.current?.click()
       }
     }
-  };
+  }
 
-  return (
-    customChildren ? (
-      <Flex 
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          align='center'
-          className={classesCustom}
-          cursor='pointer'
-          htmlFor={id}
-          htmlOptions={{
-            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              handleContainerClick(event);
-            }) as unknown as () => void
-          }}
-          id="radio-container"
-      >
-        <label className={buildCss('pb_radio_kit', alignment)}>
+  return customChildren ? (
+    <Flex
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        align="center"
+        className={classesCustom}
+        cursor="pointer"
+        htmlFor={id}
+        htmlOptions={{
+          onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            handleContainerClick(event)
+          }) as unknown as () => void
+        }}
+        id="radio-container"
+    >
+      <label className={buildCss('pb_radio_kit', alignment)}>
         <input
+            {...checkedProps}
             disabled={disabled}
             id={id}
             name={name}
             onChange={onChange}
-            ref={radioRef}
+            ref={setRefs}
             type="radio"
             value={value}
             {...props}
         />
-          <span className="pb_radio_button" />
-        </label>
-        <div id="pb-radio-children-wrapper"> {children} </div>
-      </Flex>
-    ) : (
-        <label
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            htmlFor={id}
-        >
-        <>{displayRadio(props)}</>
         <span className="pb_radio_button" />
-        <Body
-            dark={dark}
-            status={error ? 'negative' : null}
-            text={label}
-            variant={null}
-        />
       </label>
-    )
-  );
-};
+      <div id="pb-radio-children-wrapper"> {children} </div>
+    </Flex>
+  ) : (
+    <label
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        htmlFor={id}
+    >
+      {displayRadio(props)}
+      <span className="pb_radio_button" />
+      <Body
+          dark={dark}
+          status={error ? 'negative' : null}
+          text={label}
+          variant={null}
+      />
+    </label>
+  )
+})
 
-export default forwardRef(Radio);
+Radio.displayName = "Radio"
+export default Radio