playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, forwardRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -23,10 +23,18 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
+interface MultiLevelSelectComponent
+  extends React.ForwardRefExoticComponent<
+    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
+  > {
+  Options: typeof MultiLevelSelectOptions;
+}
+
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
+  disabled?: boolean
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
@@ -34,17 +42,20 @@ type MultiLevelSelectProps = {
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
+  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
+  wrapped?: boolean
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
-const MultiLevelSelect = (props: MultiLevelSelectProps) => {
+const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
   const {
     aria = {},
     className,
     data = {},
+    disabled = false,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
@@ -52,10 +63,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     name,
     returnAllSelected = false,
     treeData,
+    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
     children,
+    wrapped,
     pillColor = "primary"
   } = props
 
@@ -283,8 +296,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -292,7 +307,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const handleInputWrapperClick = (e: any) => {
     if (
       e.target.id === "multiselect_input" ||
-      e.target.classList.contains("pb_form_pill_tag")
+      e.target.classList.contains("pb_form_pill_tag") ||
+      disabled
     ) {
       return;
     }
@@ -309,8 +325,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -343,6 +361,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     setIsDropdownClosed(true);
 
     onSelect(selectedItem);
+    onChange({ target: { name, value: selectedItem } });
   };
 
   // Single select: reset the tree state upon typing
@@ -384,12 +403,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child: any) => child.type === MultiLevelSelect.Options
+      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (child.type === MultiLevelSelect.Options) {
+        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -421,16 +440,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           handledropdownItemClick,
           filterItem,
       }}>
-      <div className="wrapper" 
+      <div className="wrapper"
           ref={dropdownRef}
       >
-        <div className="input_wrapper" 
+        <div className="input_wrapper"
             onClick={handleInputWrapperClick}
         >
           <div className="input_inner_container">
             {variant === "single" && defaultReturn.length !== 0
               ? defaultReturn.map((selectedItem) => (
                   <input
+                      disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
                       type="hidden"
@@ -444,6 +464,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 {returnAllSelected && returnedArray.length !== 0
                   ? returnedArray.map((item) => (
                       <input
+                          disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
                           type="hidden"
@@ -452,6 +473,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     ))
                   : null}
 
+                {!returnAllSelected
+                  ? defaultReturn.map((item) => (
+                      <input
+                          disabled={disabled}
+                          key={item.id} 
+                          name={`${name}[]`}
+                          type="hidden"
+                          value={item.id}
+                      />
+                    ))
+                  : null}
+
                 {returnAllSelected &&
                 returnedArray.length !== 0 &&
                 inputDisplay === "pills"
@@ -461,6 +494,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
+                          wrapped={wrapped}
                       />
                     ))
                   : null}
@@ -474,6 +508,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
+                          wrapped={wrapped}
                       />
                     ))
                   : null}
@@ -489,6 +524,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             )}
 
             <input
+                disabled={disabled}
                 id="multiselect_input"
                 onChange={(e) => {
                   variant === "single"
@@ -537,8 +573,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       </MultiLevelSelectContext.Provider>
     </div>
   );
-};
+}) as MultiLevelSelectComponent;
 
+MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 
 export default MultiLevelSelect;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    disabled: true,
+    id: "multi-level-select-default-rails",
+    name: "my_array",
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+    {
+        label: "Power Home Remodeling",
+        value: "Power Home Remodeling",
+        id: "powerhome1",
+        expanded: true,
+        children: [
+            {
+                label: "People",
+                value: "People",
+                id: "people1",
+                expanded: true,
+                children: [
+                    {
+                        label: "Talent Acquisition",
+                        value: "Talent Acquisition",
+                        id: "talent1",
+                    },
+                    {
+                        label: "Business Affairs",
+                        value: "Business Affairs",
+                        id: "business1",
+                        children: [
+                            {
+                                label: "Initiatives",
+                                value: "Initiatives",
+                                id: "initiative1",
+                            },
+                            {
+                                label: "Learning & Development",
+                                value: "Learning & Development",
+                                id: "development1",
+                            },
+                        ],
+                    },
+                    {
+                        label: "People Experience",
+                        value: "People Experience",
+                        id: "experience1",
+                    },
+                ],
+            },
+            {
+                label: "Contact Center",
+                value: "Contact Center",
+                id: "contact1",
+                children: [
+                    {
+                        label: "Appointment Management",
+                        value: "Appointment Management",
+                        id: "appointment1",
+                    },
+                    {
+                        label: "Customer Service",
+                        value: "Customer Service",
+                        id: "customer1",
+                    },
+                    {
+                        label: "Energy",
+                        value: "Energy",
+                        id: "energy1",
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+const MultiLevelSelectDisabled = (props) => {
+    return (
+        <>
+            <MultiLevelSelect
+                disabled
+                id='multiselect-default'
+                onSelect={(selectedNodes) =>
+                    console.log(
+                        "Selected Items",
+                        selectedNodes
+                    )
+                }
+                treeData={treeData}
+                {...props}
+            />
+        </>
+    )
+};
+
+export default MultiLevelSelectDisabled

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx

@@ -0,0 +1,91 @@
+import React from "react"
+import MultiLevelSelect from "../_multi_level_select"
+import { useForm } from "react-hook-form"
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const MultiLevelSelectReactHook = (props) => {
+  const { register, watch } = useForm()
+  const selectedItems = watch("departments")
+  selectedItems && console.log("Selected Items", selectedItems)
+
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-default"
+          marginBottom="md"
+          treeData={treeData}
+          {...register("departments")}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultiLevelSelectReactHook

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.

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

@@ -8,9 +8,11 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
+  - multi_level_select_disabled: Disabled
 
   react:
   - multi_level_select_default: Default
+  - multi_level_select_react_hook: React Hook
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
@@ -18,4 +20,4 @@ examples:
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_with_children: Checkboxes With Children
   - multi_level_select_with_children_with_radios: Single Select With Children
-
+  - multi_level_select_disabled: Disabled

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

@@ -6,3 +6,5 @@ export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_sele
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
+export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
+export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -22,6 +22,10 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
                         default: "primary"
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -29,15 +33,17 @@ module Playbook
 
       def multi_level_select_options
         {
+          disabled: disabled,
           id: id,
           inputDisplay: input_display,
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          input_name: input_name,
+          inputName: input_name,
           variant: variant,
           pillColor: pill_color,
+          wrapped: wrapped,
         }
       end
     end

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -69,4 +69,17 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
+  
+  &.overlay-hide-scrollbar {
+    & [class*="overflow_x_auto"],
+    & [class*="overflow_y_auto"],
+    & [class*="overflow_auto"] {
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+      
+      -ms-overflow-style: none !important;
+      scrollbar-width: none !important;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -11,6 +11,7 @@ export type OverlayChildrenProps = {
     dynamic?: boolean,
     position: string,
     size: string,
+    scrollBarNone?: boolean,
 }
 
 type OverlayProps = {
@@ -23,6 +24,8 @@ type OverlayProps = {
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
+    scrollBarNone?: boolean,
+    
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -36,11 +39,12 @@ const Overlay = (props: OverlayProps) => {
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
+        scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
+    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -68,12 +72,14 @@ const Overlay = (props: OverlayProps) => {
                     children,
                     color,
                     position: getPosition(),
+                    scrollBarNone,
                     size: getSize()
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
                     position: getPosition(),
+                    scrollBarNone,
                     size: getSize()
                 })
             }

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.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/example.yml

@@ -4,8 +4,11 @@ examples:
   - 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

@@ -2,3 +2,4 @@ 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'