playbook_ui 14.5.0.pre.alpha.PBNTR374multilevelselectPOC3946 → 14.5.0.pre.alpha.PBNTR606multilevelselectreset4035

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 650696e840933991a498e8b6af55eaef10722d1f4e6c8f00255a6bd6454c38cd
-  data.tar.gz: e3d5c195a361cd5685bf6c197ab1b22e3fd2113660b704bcc3fa640027612cae
+  metadata.gz: 0ac1d308be087420aa261bc98d4426758ede289c17ce212986640dfe2a91ead9
+  data.tar.gz: 69012507d1a2108c08b12bc1033f6b80256ed4d760e75942ecfb63935192ba14
 SHA512:
-  metadata.gz: 80c9d2340f45cb1bfcf86ca304b0d613d5e5c2387293b0a7fdebeec9f9da184bbb1c5e7ec1aa8caaf6b4d82d4fd9b4d0225b4f9aa02882e0d6bcd7d0774fadfa
-  data.tar.gz: 3027bb6d7df594ef4cd455c135c31a91a8418d9e12b5cf0c515f2ce2152bf4e2a6753eb87efb606c79780b95b7d5ef625aabd7674696ffb0e2269a3b17762da1
+  metadata.gz: 11e1d28af538f892e85fe0712d407bd952974007fe9694226517dd483fdc262eb09df2ee1dd44b47a7df396806f660102ed211dfbed50da82852aee526c3c0fe
+  data.tar.gz: 990e9168c014f6e06108e5fec5c6efe98349282fd80440b74696b784c82b2fd49c05330e93c7ab8b4e2377bb7d148b42c386aa157fddbeac43712d61b1250ce8

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -47,9 +47,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
+
+  const filteredProps: FormPillProps = {...props}
+  delete filteredProps.truncate
+
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(props),
+    globalProps(filteredProps),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
@@ -77,6 +81,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -92,6 +97,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
           <Icon
               className="pb_form_pill_icon"
@@ -111,6 +117,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_tag"
               size={4}
               text={text}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -119,6 +126,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
             className="pb_form_pill_tag"
             size={4}
             text={text}
+            truncate={props.truncate}
         />
       )}
       <div

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

@@ -0,0 +1,19 @@
+<%
+  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: "Names",
+    pills: true,
+    truncate: 1,
+}) %>

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+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 FormPillTruncatedText = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" }}}
+          isMulti
+          label="Names"
+          options={names}
+          truncate={1}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default FormPillTruncatedText

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

@@ -0,0 +1 @@
+For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -11,6 +12,7 @@ examples:
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
+export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'

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

@@ -202,6 +202,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (id) {
+      // Attach the clear function to the window, scoped by the id
+      (window as any)[`clearMultiLevelSelect_${id}`] = () => {
+        const resetData = modifyRecursive(formattedData, false);
+        setFormattedData(resetData);
+        setReturnedArray([]);
+        setDefaultReturn([]);
+        setSingleSelectedItem({ id: [], value: "", item: [] });
+        onSelect([]);
+      };
+      return () => {
+        delete (window as any)[`clearMultiLevelSelect_${id}`];
+      };
+    }
+  }, [formattedData, id, onSelect]);
+
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
     id: string,
@@ -367,7 +384,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      child => child.type === MultiLevelSelect.Options
+      (child: any) => child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
@@ -378,7 +395,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         return null;
       });
     } else {
-      // If nochildren, use the default rendering
+      // If no children, use the default rendering
       return (
         <MultiLevelSelectOptions items={items} />
       );

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

@@ -0,0 +1,93 @@
+<% 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-reset-example",
+    name: "my_array",
+    tree_data: treeData,
+    return_all_selected: true
+}) %>
+
+<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
+
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
+
+    exampleResetButton.addEventListener("click", () => {
+        clearMultiLevelSelectById('multi-level-select-reset-example');
+      });
+    function clearMultiLevelSelectById(id) {
+      const clearFunction = window[`clearMultiLevelSelect_${id}`];
+      if (clearFunction) {
+        clearFunction();
+      } else {
+        console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
+      }
+    }
+  })
+</script>

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

@@ -90,13 +90,11 @@ const MultiLevelSelectWithChildren = (props) => {
       >
         <MultiLevelSelect.Options>
         {(item) => (
-          <div>
-            <Badge 
-                marginLeft="sm"
-                text={item.status} 
-                variant={item.status === "active" ? "success" : "warning"} 
-            />
-          </div>
+          <Badge 
+              marginLeft="sm"
+              text={item.status} 
+              variant={item.status === "active" ? "success" : "warning"} 
+          />
         )}
         </MultiLevelSelect.Options>
       </MultiLevelSelect>

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

@@ -0,0 +1 @@
+The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.

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

@@ -91,13 +91,11 @@ const MultiLevelSelectWithChildrenWithRadios = (props) => {
       >
         <MultiLevelSelect.Options>
           {(item) => (
-            <div>
-              <Badge 
-                  marginLeft="sm"
-                  text={item.status} 
-                  variant={item.status === "active" ? "success" : "warning"} 
-              />
-            </div>
+            <Badge 
+                marginLeft="sm"
+                text={item.status} 
+                variant={item.status === "active" ? "success" : "warning"} 
+            />
           )}
         </MultiLevelSelect.Options>
       </MultiLevelSelect>

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

@@ -0,0 +1 @@
+The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels. 

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

@@ -7,6 +7,7 @@ examples:
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
+  - multi_level_select_reset: Reset Selection
 
   react:
   - multi_level_select_default: Default

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

@@ -136,12 +136,15 @@ const Typeahead = ({
     }
   }
 
+  const filteredProps: TypeaheadProps = {...props}
+  delete filteredProps.truncate
+
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
     `mb_${marginBottom}`,
-    globalProps(props),
+    globalProps(filteredProps),
     className
   )
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -16,7 +16,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor } = props.selectProps
+  const { dark, multiKit, pillColor, truncate } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -51,6 +51,7 @@ const MultiValue = (props: Props) => {
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
+            truncate={truncate}
             {...props}
         />
       }
@@ -64,6 +65,7 @@ const MultiValue = (props: Props) => {
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
+            truncate={truncate}
             {...props}
         />
       }

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

@@ -65,10 +65,10 @@ module Playbook
       def typeahead_react_options
         base_options = {
           className: classname,
-          pillColor: pill_color,
           dark: dark,
           defaultValue: default_options,
           error: error,
+          htmlOptions: html_options,
           id: id,
           inline: inline,
           isMulti: is_multi,
@@ -77,8 +77,10 @@ module Playbook
           multiKit: multi_kit,
           name: name,
           options: options,
+          pillColor: pill_color,
           placeholder: placeholder,
           plusIcon: plus_icon,
+          truncate: truncate,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?