playbook_ui 14.5.0.pre.alpha.PBNTR568dropdowncleaning4044 → 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9cb0ea44d9446ba7cc273398bef4f9f09b5a76fad2113f6f96053ac07b8a5e66
-  data.tar.gz: b6fde3a92aa4bf941013e82af30a68c7b0f53e13e102dc3c01cd4136f57328c3
+  metadata.gz: 3c69ef4f757b7b9151cfcaba9de63b00d96ffae1f4d025b641c8da490837f472
+  data.tar.gz: c97c0a78b71fe319d903c2dfe0fc9e58bd1d7fdcab51eaff4cfa622c9fd53129
 SHA512:
-  metadata.gz: eac329d0bcbab107ae7231915f187416fd871962d444dc4172688e9946e6a588360b14c3c972aab664824bb69c69c9db4ba15704c0d80b64f22bf01833487082
-  data.tar.gz: f4772c6c2f546659cb6c572c69985109297ac2b392ddb6eb92d4ae9ab313e11413f7e9395f93c90078725731a53ebf6ffc6520ffa99f6c81288b8d825caf1c58
+  metadata.gz: 2852e96631890324a8179f30761e7edb5d39757e56e0c28aae06c033c357cbec9bcc385f796e9f09fe8ab9720fb0890b54c18918dc822279e4546bf3f53fc2b3
+  data.tar.gz: 58315e2d91a473d953d152cda638dca0d9e5322dec8c799ed48048f6bf36a8e8a99ded832024ff5df39efcb12fd27eb4785b020b0a8c71eceef833a7d7125228

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md

@@ -0,0 +1 @@
+To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx

@@ -34,6 +34,7 @@ const FilterDouble = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
@@ -49,6 +50,7 @@ const FilterDouble = ({
           maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
+          popoverProps={popoverProps}
       >
           {children}
       </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -33,6 +33,7 @@ const FilterSingle = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterSingleProps): React.ReactElement => {
   return (
@@ -52,6 +53,7 @@ const FilterSingle = ({
                 maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
+                popoverProps={popoverProps}
             >
             {children}
             </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
+import { GenericObject } from '../../types'
 
 type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
@@ -9,8 +10,9 @@ type FiltersPopoverProps = {
   maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
+  popoverProps?: GenericObject,
 }
-const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -33,6 +35,7 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
+        {...popoverProps}
     >
         <div className="pb-form">
           {typeof children === 'function'

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx

@@ -13,6 +13,7 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
+    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
+    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results && title) {
+    if (results != null && results >=0 && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results) {
+    } else if (results !=null && results >=0 ) {
       return (
         <>
           {justResults()}

data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_custom_width_rails",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { width: "250px" },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+const FilterCustomWidth = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
+  ]
+
+  const popoverProps = {
+    width: "250px"
+  }
+
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        popoverProps={popoverProps}
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
+              {...props}
+          />
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
+              {...props}
+          />
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  )
+}
+
+export default FilterCustomWidth

data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md

@@ -0,0 +1 @@
+Filter can leverage `popover_props` to set a custom width to the popover, without affecting the Filter size. 

data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md

@@ -0,0 +1 @@
+Filter can leverage `popoverProps` to set a custom width to the popover, without affecting the Filter size. 

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={1}
+          results={0}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line

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

@@ -9,6 +9,7 @@ examples:
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
+  - filter_custom_width: Custom Width for Popover Inside of Filter
   - filter_placement: Filter Placement
 
   react:
@@ -20,4 +21,6 @@ examples:
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
+  - filter_custom_width: Custom Width for Popover Inside of Filter
   - filter_placement: Filter Placement
+

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

@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
+export { default as FilterCustomWidth } from './_filter_custom_width.jsx'

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -71,13 +71,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -15,6 +15,8 @@ module Playbook
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                        default: "bottom-start"
+      prop :popover_props, type: Playbook::Props::HashProp,
+                           default: {}
 
       def classname
         generate_classname("pb_filter_kit").rstrip

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,

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_reset.md

@@ -0,0 +1 @@
+In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work. 

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