playbook_ui 14.16.0.pre.rc.6 → 14.16.0

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.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: {
+    error: "Please make a valid selection",
+    id: "multi-level-select-error-rails",
+    name: "my_array",
+    tree_data: treeData
+}) %>

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_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
+import { merge } from '../utilities/object'
 
 type TreemapChartProps = {
   chartData: {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -126,6 +126,9 @@
         color: $text_lt_default;
       }
       &__control {
+        &--is-disabled {
+          background-color: shade($white, 5%);
+        }
         &--is-focused {
           @include pb_textarea_focus;
           @include transition_default;
@@ -252,6 +255,7 @@
           color: $text_dk_default;
         }
         &__control {
+        
           &--is-focused {
             @include pb_textarea_focus;
             @include transition_default;

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -38,6 +38,7 @@ type TypeaheadProps = {
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
+  disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -79,6 +80,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   createable,
   error = "",
   data = {},
+  disabled = false,
   getOptionLabel,
   getOptionValue,
   htmlOptions = {},
@@ -205,6 +207,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       <Tag
           classNamePrefix="typeahead-kit-select"
           error={error}
+          isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}
       />

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-disabled",
+    disabled: true,
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadDisabled = (props) => {
+  return (
+    <Typeahead
+        disabled
+        label="Colors"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadDisabled

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

@@ -14,6 +14,7 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
+    - typeahead_disabled: Disabled
 
   react:
     - typeahead_default: Default
@@ -32,3 +33,4 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_disabled: Disabled

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

@@ -14,3 +14,4 @@ export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
+export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -52,6 +52,8 @@ module Playbook
                                 default: {}
       prop :search_context_selector, type: Playbook::Props::String,
                                      default: nil
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -100,6 +102,7 @@ module Playbook
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,
+          disabled: disabled,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?