playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7130

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

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } 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 MultiLevelSelectError = (props) => {
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [errorState, setErrorState] = useState("Please make a valid selection");
+
+  useEffect(() => {
+    if (selectedItems.length === 0) {
+      setErrorState("Please make a valid selection");
+    } else {
+      setErrorState(null);
+    }
+  }, [selectedItems]);
+
+  return (
+    <div>
+      <MultiLevelSelect
+          error={errorState}
+          id="multiselect-error"
+          onSelect={(selectedNodes) => setSelectedItems(selectedNodes)}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectError;

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

@@ -0,0 +1,71 @@
+<% 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: {
+    id: "multi-level-select-label-rails",
+    label: "Select a department",
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.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 MultiLevelSelectDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-label'
+          label="Select a Department"
+          onSelect={(selectedNodes) =>
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectDefault;

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

@@ -8,6 +8,8 @@ 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_label: With Label
+  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
@@ -24,6 +26,8 @@ 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_label: With Label
+  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)

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

@@ -8,7 +8,9 @@ export { default as MultiLevelSelectWithChildren } from './_multi_level_select_w
 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'
+export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
 export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
-export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
+export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

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

@@ -0,0 +1,105 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const MULTI_LEVEL_SELECT_SELECTOR = "[data-multi_level_select_form]";
+
+export default class PbMultiLevelSelect extends PbEnhancedElement {
+  static get selector() {
+    return MULTI_LEVEL_SELECT_SELECTOR;
+  }
+
+  get target() {
+    return this.element.querySelector(".pb_body_kit_negative");
+  }
+
+  connect() {
+    this.addEventListeners();
+    this.observeHiddenInputs();
+    this.observeRogueErrorInsideInnerContainer();
+  }
+
+  addEventListeners() {
+    const inputElement = this.element.querySelector("input");
+
+    inputElement.addEventListener("invalid", () => {
+      this.handleErrorLabel(300);
+    });
+    inputElement.addEventListener("blur", () => {
+      this.justBlurred = true;
+
+      setTimeout(() => {
+        this.justBlurred = false;
+      }, 300);
+    });
+  }
+
+  handleErrorLabel(delay) {
+    setTimeout(() => {
+      const errorLabelElement = this.target;
+      const wrapper = this.element.querySelector(".wrapper");
+
+      if (errorLabelElement) {
+        errorLabelElement.remove();
+        if (wrapper) {
+          if (wrapper.querySelector(".pb_body_kit_negative")) {
+            wrapper.querySelector(".pb_body_kit_negative").remove();
+          }
+          wrapper.appendChild(errorLabelElement);
+        }
+        this.element.classList.add("error");
+      } else {
+        this.handleErrorLabel(100);
+      }
+    }, delay);
+  }
+
+  observeHiddenInputs() {
+    const container = this.element.querySelector(".input_inner_container");
+    if (!container) return;
+
+    this.mutationObserver = new MutationObserver(() => {
+      const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
+      if (hiddenInputs.length > 0) {
+        // At least one hidden input exists, so clear the error
+        this.clearError();
+      }
+    });
+
+    this.mutationObserver.observe(container, {
+      childList: true,
+    });
+  }
+
+  observeRogueErrorInsideInnerContainer() {
+    const container = this.element.querySelector(".input_inner_container");
+
+    this.rogueErrorObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (
+            node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains("pb_body_kit_negative")
+          ) {
+            if (this.justBlurred) {
+              node.remove();
+            }
+          }
+        }
+      }
+    });
+
+    this.rogueErrorObserver.observe(container, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  clearError(e) {
+    const errorLabelElement = this.target;
+
+    if (errorLabelElement) {
+      errorLabelElement.remove();
+      this.element.classList.remove("error");
+      this.element.querySelector("input").value = e.detail.value;
+    }
+  }
+}

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

@@ -26,6 +26,12 @@ module Playbook
                      default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :error, type: Playbook::Props::String,
+                   default: ""
+      prop :label, type: Playbook::Props::String,
+                   default: ""
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -33,11 +39,15 @@ module Playbook
 
       def multi_level_select_options
         {
+          data: data,
           disabled: disabled,
+          error: error,
           id: id,
           inputDisplay: input_display,
           name: name,
+          label: label,
           treeData: tree_data,
+          required: required,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
           inputName: input_name,

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -42,4 +42,9 @@
       font-weight: $regular;
     }
   }
+
+  [class*="pb_nav_list_kit_item"],
+  [class*="pb_nav_list_item"] {
+    &:hover { cursor: pointer; }
+  }
 }

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -95,11 +95,13 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_right")
+    expect(icon).toBeInTheDocument()
 })
 
 test('should have a left icon', () => {
-    render(<NavDefault iconLeft="users-class" />)
+    render(<NavDefault iconLeft="angle-up" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
+    expect(icon).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -32,11 +32,12 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[]
+  children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -61,6 +62,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
+    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -70,7 +72,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth="md"
+    maxWidth = "md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -79,12 +81,28 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
-  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
-    element = editor?.element
+  const handleOnEditorReady = (editorInstance: Editor) => {
+    setEditor(editorInstance)
+    setTimeout(() => {
+      const oldId = editorInstance.element.getAttribute('input')
+      if (oldId) {
+        const hiddenInput = document.getElementById(oldId)
+        if (hiddenInput) {
+          const newId = (inputOptions.id as string) || oldId  
+          hiddenInput.id = newId
+          editorInstance.element.setAttribute('input', newId)
+
+          if (inputOptions.name) {
+            hiddenInput.setAttribute('name', inputOptions.name as string)
+          }
+        }
+      }
+    })
+  }
 
   // DOM manipulation must wait for editor to be ready
-  if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor && editor.element) {
+    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
     // replace default trix "block code" button with "inline code" button
@@ -118,8 +136,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
 
   useEffect(() => {
-    if (!element) return
-    element.addEventListener('click', ({ target }: Event) => {
+    if (!editor?.element) return
+    editor.element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
@@ -128,7 +146,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [element])
+  }, [editor])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -137,7 +155,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props, {maxWidth}), className)
+  let css = classnames(globalProps(props, { maxWidth }), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,5 @@
 <%= react_component('RichTextEditor',
-  object.rich_text_options,
-  aria: object.aria,
-  data: object.data
-) %>
+                    object.rich_text_options,
+                    aria: object.aria,
+                    data: object.data
+                   ) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -20,6 +20,7 @@ module Playbook
       prop :value
       prop :template
       prop :placeholder
+      prop :input_options
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -49,6 +50,7 @@ module Playbook
           value: value,
           template: template,
           placeholder: placeholder,
+          inputOptions: input_options,
         }
       end
     end

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md

@@ -0,0 +1 @@
+To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js

@@ -19,23 +19,27 @@ test('it renders preset icon', () => {
     render(
       <StatChange
           change="increase"
+          id="preset-icon"
           value="28.4"
       />
     )
 
-    const kit = screen.getByLabelText('arrow-up icon')
-    expect(kit).toBeTruthy
+    const kit = document.querySelector('#preset-icon')
+    const icon = kit.querySelector(".pb_custom_icon")
+    expect(icon).toBeInTheDocument()
 })
 
 test('it renders custom icon', () => {
     render(
       <StatChange
           icon="chart-line-down"
+          id="custom-icon"
           value={6.1}
       />
 
     )
 
-    const kit = screen.getByLabelText('chart-line-down icon')
-    expect(kit).toBeTruthy
+    const kit = document.querySelector('#custom-icon')
+    const icon = kit.querySelector(".pb_custom_icon")
+    expect(icon).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -21,6 +21,7 @@ type TableProps = {
     data?: { [key: string]: string },
     dataTable: boolean,
     disableHover?: boolean,
+    headerStyle?: "default" | "borderless" | "floating"
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
@@ -46,6 +47,7 @@ const Table = (props: TableProps): React.ReactElement => {
         data = {},
         dataTable = false,
         disableHover = false,
+        headerStyle = "default",
         htmlOptions = {},
         id,
         outerPadding = '',
@@ -85,6 +87,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'sticky-left-column': stickyLeftColumn,
             'sticky-right-column': stickyRightColumn,
             'striped': striped,
+            'header-borderless': headerStyle === 'borderless',
+            'header-floating': headerStyle === 'floating',
             [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),