playbook_ui 15.7.0.pre.alpha.PLAY2678emojimask13284 → 15.7.0.pre.alpha.PLAY2704multilevelselectsingledisabledoptions13404

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5671bd3842cbc616980cca133af25a4d32013d8bcf16c2472d5e5cda9d122943
-  data.tar.gz: 0c2ce0cd5554eb290beb880f6ad0ce84207c40ceaa428b947c6b9566947388ba
+  metadata.gz: 10b9d0d0359b00ce5f07f4b0d3f0e1dc2501722d51210e29c76ade6dfc9eca0e
+  data.tar.gz: 3b3389d7f5545d88ac712ef7c0ac7526d448089ff6b1e541214f7577ffb689ad
 SHA512:
-  metadata.gz: 769539b8947c986ca86ad41720be93617da036d335de3ffe9945afe26fcb05bc543d420124486ed2825b85e46ad83bb183ac922a9cbc3f70a1f318f987a5c53b
-  data.tar.gz: af02627b473d11689bf92429bf6bfe6dd7a11bfc443f641c48749ef56faeb0358f12779049e6b72ccb8b6486cca3a211ed7572113cbf65751dc2b9e96a4a7a79
+  metadata.gz: c4a79a82d7c87252941b881c6396d5b3f6884021cd54dbde70e44d75797b3be6f20130fd87a23d76d4efbad2fed8f8633d018f6289c8e7b108a53524f3af8161
+  data.tar.gz: 79b3ce7929fffbafdbc098cacd0763f6b4f7d9c56bd9674598fe5602129cbe9871c7000c5e4178b171c125dd77ee00246412f322da6e063f379da29cfe167b2a

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

@@ -30,10 +30,6 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
-      def auto_close_class
-        auto_close.present? ? " auto_close_#{auto_close}" : ""
-      end
-
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -42,6 +38,14 @@ module Playbook
         multi_line.present? ? "multi_line" : nil
       end
 
+      def auto_close_attribute
+        auto_close.present? ? { "pb-auto-close": auto_close } : {}
+      end
+
+      def data
+        Hash(prop(:data)).merge(auto_close_attribute)
+      end
+
       def icon_value
         icon || case status
                 when "success"
@@ -61,9 +65,7 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
       end
     end
   end

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

@@ -21,17 +21,12 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   }
 
   autoCloseToast(element) {
-    const classListValues = element.classList.value
-    const hasAutoCloseClass = classListValues.includes('auto_close')
-
-    if (hasAutoCloseClass) {
-      const classList = classListValues.split(' ')
-      const autoCloseValue = classList[classList.length - 1].split('_')[2]
-      const autoCloseIntValue = parseInt(autoCloseValue)
+    const autoCloseDataAttr = element.getAttribute('data-pb-auto-close')
 
+    if (autoCloseDataAttr) {
       setTimeout(() => {
         this.removeToast(element)
-      }, autoCloseIntValue)
+      }, parseInt(autoCloseDataAttr))
     }
   }
 }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -90,7 +90,7 @@
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
-  <%= form.text_field :example_text_field, props: { label: "emoji mask demo text input", emoji_mask: true } %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -98,7 +98,7 @@
   <%= form.search_field :example_search_field, props: { label: true } %>
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
-  <%= form.text_area :example_text_area, props: { label: "emoji mask demo textarea", emoji_mask: true } %>
+  <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>

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

@@ -358,6 +358,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     const { id, value: inputText } = e.target;
     // The radio button needs a unique ID, this grabs the ID before the hyphen
     const selectedItemID = id.match(/^[^-]*/)[0];
+
+    // Check if the item is disabled - if so, don't allow selection (safety check in addition to native disabled attribute)
+    const clickedItem = filterFormattedDataById(formattedData, selectedItemID);
+    if (clickedItem.length > 0 && clickedItem[0].disabled) {
+      return;
+    }
+    
     // Reset tree checked state, triggering useEffect
     const treeWithNoSelections = modifyRecursive(formattedData, false);
     // Update tree with single selection

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

@@ -1 +1 @@
-individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
+Individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

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

@@ -0,0 +1,135 @@
+<% treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-single-disabled-rails",
+    name: "single_disabled",
+    tree_data: treeData,
+    input_name: "Power",
+    variant: "single"
+}) %>

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

@@ -0,0 +1,147 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+];
+
+const MultiLevelSelectSingleDisabled = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-single-disabled"
+          inputName="Power"
+          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          treeData={treeData}
+          variant="single"
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectSingleDisabled;

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

@@ -0,0 +1 @@
+Individual items can be disabled by including `disabled: true` within the object on the treeData for the `single` variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.

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

@@ -15,6 +15,7 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_single_disabled: Disabled Options (Single Select)
 
   react:
   - multi_level_select_default: Default
@@ -33,3 +34,4 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_single_disabled: Disabled Options (Single Select)

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

@@ -14,3 +14,4 @@ export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level
 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 MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'