playbook_ui 16.3.0 → 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356

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

@@ -5,4 +5,5 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
-export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'
+export { default as FixedConfirmationToastNavMargin } from './_fixed_confirmation_toast_nav_margin.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -21,6 +21,8 @@ module Playbook
                       default: nil
       prop :auto_close, type: Playbook::Props::Number
       prop :icon, type: Playbook::Props::String
+      prop :nav_margin_top, type: Playbook::Props::Boolean,
+                            default: false
 
       def show_text?
         text.present?
@@ -46,6 +48,10 @@ module Playbook
         Hash(prop(:data)).merge(auto_close_attribute)
       end
 
+      def nav_margin_top_class
+        nav_margin_top.present? ? " nav_margin_top" : ""
+      end
+
       def icon_value
         icon || case status
                 when "success"
@@ -65,7 +71,7 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + nav_margin_top_class + default_z_index
       end
     end
   end

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -112,7 +112,13 @@ module Playbook
       end
 
       def render_svg
-        doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
+        source = asset_path || icon || custom_icon
+        content = if source.to_s.include?("://")
+                    URI.open(source, "User-Agent" => "Playbook-Icon-Kit/1.0 (https://github.com/powerhome/playbook)", &:read) # rubocop:disable Security/Open
+                  else
+                    URI.open(source, &:read) # rubocop:disable Security/Open
+                  end
+        doc = Nokogiri::XML(content)
         svg = doc.at_css("svg")
         return "" unless svg
 

data/app/pb_kits/playbook/pb_list/_list_mixin.scss

@@ -21,14 +21,14 @@
       width: 20px;
       flex: 0 0 20px;
       text-align: left;
-      color: $text_lighter;
+      color: $text_lt_lighter;
       font-weight: $bold;
       margin-right: $space-sm;
     }
   }
 
   li {
-    border-bottom: 1px solid $input_border_default;
+    border-bottom: 1px solid $border_light;
     padding: $space-sm 0;
     display: flex;
     align-items: left;
@@ -69,14 +69,14 @@
 }
 @mixin pb_list_dark {
   color: $white;
-  border-bottom: 1px solid $input_border_default_dark;
+  border-bottom: 1px solid $border_dark;
 
   &:last-child {
     border-bottom: 0;
   }
 
   &:before {
-    color: $text_lighter_dark;
+    color: $text_dk_light;
   }
 }
 @mixin pb_list_large {

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

@@ -102,7 +102,7 @@ export const getDefaultCheckedItems = (
         } else {
           const parent = items.find(
             (parentItem: { [key: string]: any }) =>
-              parentItem.id === item.parentId
+              parentItem.id === item.parent_id
           );
           if (!parent || !parent.checked) {
             checkedDefault.push(item);

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

@@ -51,6 +51,7 @@ type MultiLevelSelectProps = {
   treeData?: { [key: string]: string }[] | any;
   onChange?: (event: { target: { name?: string; value: any } }) => void;
   onSelect?: (prop: { [key: string]: any }) => void;
+  placeholder?: string;
   selectedIds?: string[] | any;
   variant?: "multi" | "single";
   wrapped?: boolean;
@@ -100,6 +101,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       treeData,
       onChange = () => null,
       onSelect = () => null,
+      placeholder: placeholderText = "Start typing...",
       selectedIds,
       variant = "multi",
       wrapped,
@@ -179,6 +181,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       parent_id: string | null = null,
       depth = 0,
       parentDisabled = false,
+      ancestorChecked = false
     ) => {
       if (!Array.isArray(treeData)) {
         return;
@@ -188,28 +191,36 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
         const isDisabled =
           item.disabled || (parentDisabled && !returnAllSelected);
 
+          const explicitlySelected = Boolean(
+            selectedIds && selectedIds?.length && selectedIds.includes(item.id)
+          );
+
+          const checked =
+          !isDisabled &&
+          (explicitlySelected || (ancestorChecked && !returnAllSelected && variant !== "single"))
+
         const newItem = {
           ...item,
-          checked: Boolean(
-            selectedIds && selectedIds.length && selectedIds.includes(item.id),
-          ),
+          checked: checked,
           parent_id,
           depth,
           disabled: isDisabled,
         };
         if (newItem.children && newItem.children.length > 0) {
-          const children =
-            item.checked && !returnAllSelected
-              ? modifyRecursive(item.children, true)
-              : item.children;
-          newItem.children = addCheckedAndParentProperty(
-            children,
-            selectedIds,
-            newItem.id,
-            depth + 1,
-            isDisabled,
-          );
-        }
+        // if this node is checked (by explicit selection or ancestor cascade),
+        // and we're in default, cascade to descendants
+        const cascadeToChildren =
+        checked && !returnAllSelected && variant !== "single"
+
+        newItem.children = addCheckedAndParentProperty(
+          newItem.children,
+          selectedIds,
+          newItem.id,
+          depth + 1,
+          isDisabled,
+          cascadeToChildren
+        )
+      }
         return newItem;
       });
     };
@@ -666,7 +677,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
                       ? `${itemsSelectedLength()} ${
                           itemsSelectedLength() === 1 ? "item" : "items"
                         } selected`
-                      : "Start typing..."
+                      : placeholderText
                   }
                     required={required}
                     value={singleSelectedItem.value || filterItem}

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

@@ -0,0 +1,109 @@
+<%
+  tree_base = [{
+      label: "Power Home Remodeling",
+      value: "powerHomeRemodeling",
+      id: "100",
+      expanded: true,
+      children: [
+        {
+          label: "People",
+          value: "people",
+          id: "101",
+          expanded: true,
+          children: [
+            {
+              label: "Talent Acquisition",
+              value: "talentAcquisition",
+              id: "102",
+            },
+            {
+              label: "Business Affairs",
+              value: "business Affairs",
+              id: "103",
+              children: [
+                {
+                  label: "Initiatives",
+                  value: "initiatives",
+                  id: "104",
+                },
+                {
+                  label: "Learning & Development",
+                  value: "learningAndDevelopment",
+                  id: "105",
+                },
+              ],
+            },
+            {
+              label: "People Experience",
+              value: "peopleExperience",
+              id: "106",
+            },
+          ],
+        },
+        {
+          label: "Contact Center",
+          value: "contactCenter",
+          id: "107",
+          children: [
+            {
+              label: "Appointment Management",
+              value: "appointmentManagement",
+              id: "108",
+            },
+            {
+              label: "Customer Service",
+              value: "customerService",
+              id: "109",
+            },
+            {
+              label: "Energy",
+              value: "energy",
+              id: "110",
+            },
+          ],
+        },
+      ],
+  }]
+
+  prefix_mls_ids = nil
+  prefix_mls_ids = ->(nodes, pfx) {
+    nodes.map do |n|
+      h = n.dup
+      h[:id] = "#{pfx}#{n[:id]}"
+      h[:children] = prefix_mls_ids.call(n[:children], pfx) if n[:children].present?
+      h
+    end
+  }
+
+  tree_multi = prefix_mls_ids.call(tree_base, "phm_")
+  tree_return_all = prefix_mls_ids.call(tree_base, "phr_")
+  tree_single = prefix_mls_ids.call(tree_base, "phs_")
+%>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-multi-rails",
+  label: "Multi (default)",
+  margin_bottom: "sm",
+  name: "placeholder_multi",
+  tree_data: tree_multi,
+  placeholder: "Search or choose options…",
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-return-all-rails",
+  label: "Multi (return all selected)",
+  margin_bottom: "sm",
+  name: "placeholder_return_all",
+  placeholder: "Departments...",
+  return_all_selected: true,
+  tree_data: tree_return_all,
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-single-rails",
+  label: "Single",
+  name: "placeholder_single",
+  placeholder: "Select one option…",
+  tree_data: tree_single,
+  variant: "single",
+}) %>

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

@@ -0,0 +1,127 @@
+import React from "react";
+
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeTemplate = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+function prefixTreeIds(nodes, prefix) {
+  return nodes.map((node) => ({
+    ...node,
+    id: `${prefix}${node.id}`,
+    children:
+      node.children && node.children.length > 0
+        ? prefixTreeIds(node.children, prefix)
+        : node.children,
+  }));
+}
+
+const treeDataMulti = prefixTreeIds(treeTemplate, "phm_");
+const treeDataReturnAll = prefixTreeIds(treeTemplate, "phr_");
+const treeDataSingle = prefixTreeIds(treeTemplate, "phs_");
+
+const MultiLevelSelectPlaceholder = () => (
+  <>
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-multi"
+        label="Multi (default)"
+        marginBottom="sm"
+        name="placeholder_multi"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — default", selectedNodes)
+        }
+        placeholder="Search or choose options…"
+        treeData={treeDataMulti}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-return-all"
+        label="Multi (return all selected)"
+        marginBottom="sm"
+        name="placeholder_return_all"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — return all selected", selectedNodes)
+        }
+        placeholder="Departments..."
+        returnAllSelected
+        treeData={treeDataReturnAll}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-single"
+        label="Single"
+        name="placeholder_single"
+        onSelect={(selectedNodes) =>
+          console.log("Single", selectedNodes)
+        }
+        placeholder="Select one option…"
+        treeData={treeDataSingle}
+        variant="single"
+    />
+  </>
+);
+
+export default MultiLevelSelectPlaceholder;

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

@@ -0,0 +1 @@
+Use the `placeholder` prop to customize the initial text shown in the input when nothing is selected. The default is `Start typing...`.

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

@@ -18,6 +18,7 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
+    - multi_level_select_placeholder: Placeholder
 
   react:
     - multi_level_select_default: Default
@@ -40,3 +41,4 @@ examples:
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
     - multi_level_select_react_reset_key: Reset with Key (React)
+    - multi_level_select_placeholder: Placeholder

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

@@ -18,3 +18,4 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
 export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
+export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.jsx"

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

@@ -32,6 +32,8 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
+      prop :placeholder, type: Playbook::Props::String,
+                         default: "Start typing..."
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
       prop :show_checked_children, type: Playbook::Props::Boolean,
@@ -50,6 +52,7 @@ module Playbook
           inputDisplay: input_display,
           name: name,
           label: label,
+          placeholder: placeholder,
           treeData: tree_data,
           required: required,
           requiredIndicator: required_indicator,

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -173,6 +173,33 @@ describe('MultiLevelSelect', () => {
     expect(label).toHaveTextContent("Select Location")
     expect(label).not.toHaveTextContent("*")
   })
+
+  test('should use default placeholder when none is passed', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="mls-placeholder-default"
+          treeData={treeData}
+      />
+    )
+    expect(
+      screen.getByPlaceholderText('Start typing...')
+    ).toBeInTheDocument()
+  })
+
+  test('should use custom placeholder when passed', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="mls-placeholder-custom"
+          placeholder="Choose items…"
+          treeData={treeData}
+      />
+    )
+    expect(
+      screen.getByPlaceholderText('Choose items…')
+    ).toBeInTheDocument()
+  })
 })
 
 describe('MultiLevelSelect multi variant', () => {

data/app/pb_kits/playbook/pb_popover/docs/_popover_placement.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
+
+const ROWS = [
+  [
+    { placement: 'top', label: 'Top' },
+    { placement: 'top-start', label: 'Top start' },
+    { placement: 'top-end', label: 'Top end' },
+  ],
+  [
+    { placement: 'bottom', label: 'Bottom' },
+    { placement: 'bottom-start', label: 'Bottom start' },
+    { placement: 'bottom-end', label: 'Bottom end' },
+  ],
+  [
+    { placement: 'left', label: 'Left' },
+    { placement: 'left-start', label: 'Left start' },
+    { placement: 'left-end', label: 'Left end' },
+  ],
+  [
+    { placement: 'right', label: 'Right' },
+    { placement: 'right-start', label: 'Right start' },
+    { placement: 'right-end', label: 'Right end' },
+  ],
+]
+
+const PopoverPlacement = (props) => {
+  const [open, setOpen] = useState({})
+
+  const isOpen = (placement) => open[placement] === true
+  const setOpenFor = (placement) => (value) => setOpen((prev) => ({ ...prev, [placement]: value }))
+  const toggle = (placement) => setOpenFor(placement)(!isOpen(placement))
+  const handleShouldClose = (placement) => (shouldClose) => {
+    if (shouldClose) setOpenFor(placement)(false)
+  }
+
+  return (
+    <>
+      {ROWS.map((placements, rowIndex) => (
+        <Flex
+            justify="around"
+            key={placements[0].placement}
+            marginBottom={rowIndex < ROWS.length - 1 ? 'sm' : undefined}
+            orientation="row"
+            wrap
+            {...props}
+        >
+          {placements.map(({ placement, label }) => {
+            const trigger = (
+              <Button
+                  key={placement}
+                  onClick={() => toggle(placement)}
+                  text={label}
+                  variant="secondary"
+              />
+            )
+            return (
+              <PbReactPopover
+                  closeOnClick="outside"
+                  key={placement}
+                  offset
+                  placement={placement}
+                  reference={trigger}
+                  shouldClosePopover={handleShouldClose(placement)}
+                  show={isOpen(placement)}
+                  {...props}
+              >
+                {`Popover: ${label.toLowerCase()}`}
+              </PbReactPopover>
+            )
+          })}
+        </Flex>
+      ))}
+    </>
+  )
+}
+
+export default PopoverPlacement

data/app/pb_kits/playbook/pb_popover/docs/_popover_placement_react.md

@@ -0,0 +1 @@
+Use the `placement` prop to control where the popover appears relative to its trigger. Valid values include `top`, `bottom`, `left`, `right`, and aligned variants such as `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, and `right-end`.