playbook_ui 14.15.0.pre.alpha.play1917lodashremoval2of36615 → 14.15.0.pre.rc.0

data/app/pb_kits/playbook/pb_date_picker/index.ts

@@ -1,38 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const DATE_PICKER_WRAPPER_SELECTOR = '[data-pb-date-picker]';
-const SELECT_VALIDATION_MESSAGE_CLASS = '.pb_body_kit_negative';
-
-export default class PbDatePicker extends PbEnhancedElement {
-  static get selector() {
-    return DATE_PICKER_WRAPPER_SELECTOR;
-  }
-
-  connect() {
-    this.setValidationMessage();
-  }
-
-  setValidationMessage() {
-    const validationMessage = this.element.dataset?.validationMessage;
-    const inputElement = this.element.querySelector("input");
-
-    if (validationMessage) {
-      const setErrorTextContent = (text, timeout) => {
-        setTimeout(() => {
-          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
-          if (errorMessageElement) {
-            errorMessageElement.textContent = text;
-          } else {
-            setErrorTextContent(text, 100);
-          }
-        }, timeout);
-      };
-
-      inputElement.addEventListener("change", (e) => {
-        if (!e.target.checkValidity()) {
-          setErrorTextContent(validationMessage, 300);
-        }
-      });
-    }
-  }
-}

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

@@ -1,75 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
-
-export default class PbDialog extends PbEnhancedElement {
-  static get selector() {
-    return DIALOG_WRAPPER_SELECTOR;
-  }
-
-  connect() {
-    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
-    window.addEventListener("turbo:frame-load", () => this.setupDialog())
-  }
-
-  setupDialog() {
-    const openTrigger = document.querySelectorAll("[data-open-dialog]");
-    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
-    const dialogs = document.querySelectorAll(".pb_dialog_rails")
-
-    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-    if (loadingButton) {
-      loadingButton.addEventListener("click", function () {
-        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
-        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
-        let currentClass = okayLoadingButton.className;
-        let cancelClass = cancelButton ? cancelButton.className : "";
-
-        let newClass = currentClass.replace("_enabled", "_disabled_loading");
-        let newCancelClass = cancelClass.replace("_enabled", "_disabled");
-
-        // Disable the buttons
-        okayLoadingButton.disabled = true;
-        if (cancelButton) cancelButton.disabled = true;
-
-        okayLoadingButton.className = newClass;
-        if (cancelButton) cancelButton.className = newCancelClass;
-      });
-    }
-
-    openTrigger.forEach((open) => {
-      open.addEventListener("click", () => {
-        var openTriggerData = open.dataset.openDialog;
-        var targetDialog = document.getElementById(openTriggerData)
-        if (targetDialog.open) return;
-        targetDialog.showModal();
-      });
-    });
-
-    closeTrigger.forEach((close) => {
-      close.addEventListener("click", () => {
-        var closeTriggerData = close.dataset.closeDialog;
-        document.getElementById(closeTriggerData).close();
-      });
-    });
-
-    // Close dialog box on outside click
-    dialogs.forEach((dialogElement) => {
-      dialogElement.addEventListener("mousedown", (event) => {
-        const dialogParentDataset = dialogElement.parentElement.dataset
-        if (dialogParentDataset.overlayClick === "overlay_close") return
-
-        const dialogModal = event.target.getBoundingClientRect()
-        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
-          event.clientX > dialogModal.right ||
-          event.clientY < dialogModal.top ||
-          event.clientY > dialogModal.bottom
-
-        if (clickedOutsideDialogModal) {
-          dialogElement.close()
-          event.stopPropagation()
-        }
-      })
-    })
-  }
-}

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb

@@ -1,8 +0,0 @@
-<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
-
-<%= pb_rails("drawer", props: { 
-    id:"drawer-3", 
-    behavior: "push"
-}) do  %>
-    Test me (Push Behavior)
-<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb

@@ -1,33 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-12", 
-        overlay: false,
-        border: "right"
-    }) do  %>
-        Test me (Border Right)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-13", 
-        overlay: false,
-        border: "left"
-    }) do  %>
-        Test me (Border Left)
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-14", 
-        overlay: false,
-        border: "full"
-    }) do  %>
-        Test me (Border Full)
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
-    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
-<% end %>
-
-<%= pb_rails("drawer", props: { 
-    id:"drawer-4", 
-    within_element: true,
-    placement: "bottom",
-    breakpoint: "md",
-    size: "full"
-}) do  %>
-    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
-        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
-    <% end %>
-    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
-        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-10", 
-        overlay: false
-    }) do  %>
-        Test me (No Overlay)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-11", 
-        placement: "right"
-    }) do  %>
-        Test me (Has Overlay)
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md

@@ -1 +0,0 @@
-Click the button to close the drawer when there is no overlay.

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb

@@ -1,49 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-5", 
-        size: "xs"
-    }) do  %>
-        XS 
-    <% end %>
-    
-    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-6", 
-        size: "sm",
-        placement: "right"
-    }) do  %>
-        This is a small drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-7", 
-        size: "md"
-    }) do  %>
-        This is a medium drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-8", 
-        size: "lg",
-        placement: "right"
-    }) do  %>
-        This is a large drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-9", 
-        size: "xl"
-    }) do  %>
-        This is an extra large drawer 
-    <% end %>
-<% end %>
-

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

@@ -1,257 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element"
-
-export default class PbDrawer extends PbEnhancedElement {
-  static get selector() {
-    return ".pb_drawer_wrapper"
-  }
-
-  connect() {
-    this.handleToggleClick = this.handleToggleClick.bind(this)
-    this.handleOutsideClick = this.handleOutsideClick.bind(this)
-    this.handleResize = this.handleResize.bind(this)
-
-    this._toggleTriggers = Array.from(document.querySelectorAll("[data-open-drawer]"))
-    this._toggleTriggers.forEach(el => {
-      el.addEventListener("click", this.handleToggleClick)
-    })
-
-    this._wrappers = Array.from(document.querySelectorAll(".pb_drawer_wrapper"))
-    this._wrappers.forEach(el => {
-      el.addEventListener("mousedown", this.handleOutsideClick)
-    })
-
-    this._withinElementDrawers = Array.from(
-      document.querySelectorAll(".pb_drawer_within_element_rails[data-breakpoint]")
-    )
-
-    window.addEventListener("resize", this.handleResize)
-    this.handleResize()
-  }
-
-  disconnect() {
-    this._toggleTriggers.forEach(el => {
-      el.removeEventListener("click", this.handleToggleClick)
-    })
-    this._wrappers.forEach(el => {
-      el.removeEventListener("mousedown", this.handleOutsideClick)
-    })
-    window.removeEventListener("resize", this.handleResize)
-  }
-
-  getOverlay(wrapper) {
-    if (wrapper.id && wrapper.id.startsWith("drawer-wrapper-")) {
-      const overlayId = wrapper.id.replace("drawer-wrapper-", "drawer-overlay-")
-      return document.getElementById(overlayId)
-    }
-    return wrapper.querySelector(".pb_drawer_overlay") || wrapper.querySelector(".pb_drawer_no_overlay")
-  }
-
-  handleToggleClick(event) {
-    const trigger = event.currentTarget
-    const drawerId = trigger.dataset.openDrawer
-    const dialog = document.getElementById(drawerId)
-    if (!dialog) return
-
-    if (dialog.classList.contains("pb_drawer_within_element_rails")) {
-      if (dialog.classList.contains("open")) {
-        this.closeWithinElementDrawer(dialog)
-        dialog.dataset.manualOpen = "false"
-      } else {
-        this.openWithinElementDrawer(dialog)
-        dialog.dataset.manualOpen = "true"
-      }
-      return
-    }
-
-    const wrapperId = `drawer-wrapper-${drawerId}`
-    const wrapper = document.getElementById(wrapperId)
-    if (!wrapper) return
-
-    if (wrapper !== this.element) return
-
-    if (wrapper.classList.contains("open")) {
-      this.closeDrawer(wrapper, dialog)
-      wrapper.dataset.manualOpen = "false"
-    } else {
-      this.openDrawer(wrapper, dialog)
-      wrapper.dataset.manualOpen = "true"
-    }
-  }
-
-  openWithinElementDrawer(dialog) {
-    if (dialog.classList.contains("open")) return
-    dialog.style.maxHeight = "0px"
-    dialog.offsetHeight
-    dialog.classList.add("open")
-    // Get trigger's height and add it to the final height
-    const trigger = document.querySelector(`[data-open-drawer="${dialog.id}"]`)
-    const triggerHeight = trigger ? trigger.offsetHeight : 0
-    const finalHeight = (dialog.scrollHeight + triggerHeight) + "px"
-    dialog.style.maxHeight = finalHeight
-    dialog.addEventListener("transitionend", function handleOpenEnd(e) {
-      if (e.propertyName === "max-height") {
-        dialog.style.maxHeight = "none"
-        dialog.removeEventListener("transitionend", handleOpenEnd)
-      }
-    })
-  }
-
-  closeWithinElementDrawer(dialog) {
-    if (!dialog.classList.contains("open")) return
-    const currentHeight = dialog.scrollHeight
-    dialog.style.maxHeight = currentHeight + "px"
-    dialog.offsetHeight
-    dialog.classList.remove("open")
-    dialog.style.maxHeight = "0px"
-    dialog.addEventListener("transitionend", function handleCloseEnd(e) {
-      if (e.propertyName === "max-height") {
-        dialog.removeEventListener("transitionend", handleCloseEnd)
-        dialog.style.maxHeight = "0px"
-      }
-    })
-  }
-
-  openDrawer(wrapper, dialog) {
-    const behavior = wrapper.dataset.behavior
-    const size = wrapper.dataset.size
-    const placement = wrapper.dataset.placement
-    this.handlePushOpen(behavior, size, placement)
-
-    wrapper.style.display = ""
-    const overlay = this.getOverlay(wrapper)
-    if (overlay) overlay.style.display = ""
-
-    wrapper.classList.add("open")
-    dialog.classList.add("open")
-  }
-
-  closeDrawer(wrapper, dialog) {
-    const behavior = wrapper.dataset.behavior
-    this.handlePushClose(behavior)
-
-    if (wrapper.className.includes("open")) wrapper.style.display = "none"
-    const overlay = this.getOverlay(wrapper)
-    if (overlay && wrapper.className.includes("open")) overlay.style.display = "none"
-
-    wrapper.classList.remove("open")
-    dialog.classList.remove("open")
-  }
-
-  handleOutsideClick(event) {
-    const wrapper = event.currentTarget
-    const dialog = wrapper.querySelector(".pb_drawer")
-    const overlay = this.getOverlay(wrapper)
-
-    if (dialog && dialog.classList.contains("pb_drawer_within_element_rails")) {
-      return
-    }
-
-    if (wrapper.dataset.overlayClick === "overlay_close" && event.target === overlay) {
-      this.closeDrawer(wrapper, dialog)
-      event.stopPropagation()
-      return
-    }
-
-    const dialogRect = dialog.getBoundingClientRect()
-    const clickedOutside =
-      event.clientX < dialogRect.left ||
-      event.clientX > dialogRect.right ||
-      event.clientY < dialogRect.top ||
-      event.clientY > dialogRect.bottom
-
-    if (clickedOutside) {
-      this.closeDrawer(wrapper, dialog)
-      event.stopPropagation()
-    }
-  }
-
-  handleResize() {
-    const breakpointValues = {
-      none: 0,
-      xs: 575,
-      sm: 768,
-      md: 992,
-      lg: 1200,
-      xl: 1400,
-    }
-
-    // Process wrappers
-    this._wrappers.forEach(wrapper => {
-      const bp = wrapper.dataset.breakpoint || "none"
-      if (bp === "none") return
-
-      const threshold = breakpointValues[bp] || 0
-      const dialog = wrapper.querySelector(".pb_drawer")
-      const trigger = dialog ? document.querySelector(`[data-open-drawer="${dialog.id}"]`) : null
-
-      if (window.innerWidth >= threshold) {
-        if (!wrapper.classList.contains("open")) {
-          this.openDrawer(wrapper, dialog)
-        }
-        if (trigger) trigger.style.display = "none"
-      } else {
-        if (trigger) trigger.style.display = ""
-        if (wrapper.classList.contains("open") && wrapper.dataset.manualOpen !== "true") {
-          this.closeDrawer(wrapper, dialog)
-        }
-      }
-    })
-
-    // Process within element drawers
-    this._withinElementDrawers.forEach(drawer => {
-      const bp = drawer.dataset.breakpoint || "none"
-      if (bp === "none") return
-
-      const threshold = breakpointValues[bp] || 0
-      const trigger = document.querySelector(`[data-open-drawer="${drawer.id}"]`)
-
-      if (window.innerWidth >= threshold) {
-        if (!drawer.classList.contains("open")) {
-          this.openWithinElementDrawer(drawer)
-        }
-        if (trigger) trigger.style.display = "none"
-      } else {
-        if (trigger) trigger.style.display = ""
-        if (drawer.classList.contains("open") && drawer.dataset.manualOpen !== "true") {
-          this.closeWithinElementDrawer(drawer)
-        }
-      }
-    })
-  }
-
-  handlePushOpen(behavior, size, placement) {
-    if (behavior !== "push") return
-
-    const sizeMap = {
-      xl: "365px",
-      lg: "300px",
-      md: "250px",
-      sm: "200px",
-      xs: "64px",
-      full: "100%",
-    }
-
-    const body = document.querySelector("body")
-    if (!body) return
-
-    if (placement === "left") {
-      body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`
-    } else if (placement === "right") {
-      body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`
-    }
-    body.classList.add("PBDrawer__Body--open")
-  }
-
-  handlePushClose(behavior) {
-    if (behavior !== "push") return
-
-    const body = document.querySelector("body")
-    if (!body) return
-
-    if (body.classList.contains("PBDrawer__Body--open")) {
-      body.classList.add("PBDrawer__Body--close")
-    }
-    body.style.cssText = ""
-    body.classList.remove("PBDrawer__Body--open")
-  }
-}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb

@@ -1,40 +0,0 @@
-<%
-  names = [
-    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    html_options: { style: { maxWidth: "240px" }},
-    id: "typeahead-form-pill",
-    is_multi: true,
-    options: names,
-    label: "Wrapped Within Typeahead",
-    pills: true,
-    wrapped: true,
-}) %>
-
-<%= pb_rails("caption", props: { text: "Form Pill Wrapped Text" }) %>
-<%= pb_rails("card", props: { max_width: "xs" })  do %>
-  <%= pb_rails("form_pill", props: {
-      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-      tabindex: 0,
-      wrapped: true,
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      icon: "badge-check",
-      text: "icon and a very long tag to show wrapped text",
-      tabindex: 0,
-      wrapped: true,
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      text: "form pill long tag no tooltip show wrapped text",
-      tabindex: 0,
-      wrapped: true,
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
-
-const names = [
-  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-]
-
-const FormPillWrapped = (props) => {
-  return (
-    <>
-      <Typeahead
-          htmlOptions={{ style: { maxWidth: "240px" } }}
-          isMulti
-          label="Wrapped Within Typeahead"
-          options={names}
-          wrapped
-          {...props}
-      />
-      <Caption text="Form Pill Wrapped Text"/>
-      <Card maxWidth="xs">
-        <FormPill
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
-            onClick={() => alert('Click!')}
-            tabIndex={0}
-            wrapped
-        />
-        <FormPill
-            icon="badge-check"
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="icon and a very long tag to show wrapped text"
-            wrapped
-        />
-        <FormPill
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="form pill with a very long tag to show wrapped text"
-            wrapped
-        />
-      </Card>
-    </>
-  )
-}
-
-export default FormPillWrapped

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md

@@ -1,3 +0,0 @@
-For Form Pills with longer text, the `wrapped` prop can be used to wrap the label within each Form Pill.
-
-**Note**: Avoid using the `wrapped` and `small` props together, as their styles conflict and may cause functionality issues.

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

@@ -1,72 +0,0 @@
-<% 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
-}) %>