playbook_ui 12.28.0.pre.alpha.PLAY837MapCustomButton868 → 12.28.0.pre.alpha.PLAY863multilevelv2877

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a11d84418c9c01374cd74d38a154f76d034ff440cd3a8580ffdace764232279e
-  data.tar.gz: fbf756271614a013e06861498022157b2a6c585f7402a6d14c2c1a34052745cd
+  metadata.gz: 38047c5569efd483fd4bf468bbc7e6efcb0d00bd9ee58c5642a1a85f5dc604e5
+  data.tar.gz: 01aec461e47f2c9358fd8d48df613f5fa9a1d5b16868303f7eea484a12b30a2a
 SHA512:
-  metadata.gz: 366d06de731005646685950b3bd763a791716076d22bb077265dee3ed18727fb7d6eefdc5063e1cb02b4246fee19cf8d692260294fd2c91c422cff8fec7dc0d6
-  data.tar.gz: ca19bd5db001368a141c1fa553313170d5fdc6ec1badb596160027f9c105cb97f7e117f9c3915b8cd039d7e8c0014dac4ba816a93e6f3cdbb90cbdb7860f6cd2
+  metadata.gz: c4bc00025114468a460da3f40747336fdb9d6ccbfac567b3070ccb2deed0a2926d5d37c4ef628b9f04ea640aa0147336913de17b0470fb0fc8d53c6a7b9fa5c0
+  data.tar.gz: af0d665dd1a5169751af394fa88b165304d7facd8260968a47285c03c973cbeb941081739fcd6013c7b0c8ddcb5780e7584fbc6dc43cf3ae5fbaa1ca24f9f032

data/app/pb_kits/playbook/index.js

@@ -60,7 +60,6 @@ export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Map} from './pb_map/_map'
-export { default as MapCustomButton } from './pb_map/_map_custom_button'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -5,21 +5,6 @@
 @import "./_pb_map_button_mixin.scss";
 
 [class*="pb_map"] {
-  .pb_map-custom-button {
-    @include pb_map_button;
-    position: relative;
-    margin-top: $space_xs;
-    box-shadow: $shadow_deep;
-    .pb_icon_kit {
-      width: $space_sm - 2;
-      height: $space_sm;
-    }
-
-    .pb_button_content {
-      height: $space_sm;
-    }
-  }
-
   .mapboxgl-map,
   .maplibregl-map {
     font-family: $font_family_base !important;
@@ -200,7 +185,7 @@
     }
     .map-zoom-in-button,
     .map-zoom-out-button,
-    .map-flyto-button, .pb_map-custom-button {
+    .map-flyto-button {
       @include pb_map_button_dark;
     }
 

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -3,7 +3,9 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
-import MapControls from './_map_controls';
+import Flex  from "../pb_flex/_flex"
+import Icon from '../pb_icon/_icon'
+import Button from '../pb_button/_button'
 
 type MapProps = {
   aria?: { [key: string]: string },
@@ -45,13 +47,29 @@ const Map = (props: MapProps) => {
     >
       {
         zoomBtns ? (
-          <Map.Controls
-          flyTo={flyTo}
-          flyToClick={flyToClick}
-          zoomBtns={zoomBtns}
-          zoomInClick={zoomInClick}
-          zoomOutClick={zoomOutClick}
-          />
+          <Flex className="custom-nav-control" orientation='column'>
+            <div className="custom-nav-control-zoom">
+              <Button className='map-zoom-in-button'
+                  onClick={zoomInClick}
+              >
+                    <Icon icon="plus"/>
+              </Button>
+              <Button className='map-zoom-out-button'
+                 onClick={zoomOutClick}
+              >
+                    <Icon icon="minus"/>
+              </Button>
+            </div>
+            {
+              flyTo ? (
+                <Button className='map-flyto-button'
+                  onClick={flyToClick}
+                >
+                      <Icon icon="eye"/>
+                </Button>
+              ) : null
+            }
+         </Flex>
          ) : null
       }
       {children}
@@ -59,5 +77,4 @@ const Map = (props: MapProps) => {
   )
 }
 
-Map.Controls = MapControls
 export default Map

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

@@ -4,4 +4,3 @@ examples:
   react:
   - map_default: Default
   - map_with_plugin: Map With Polygon Draw Plugin
-  - map_with_custom_button: Map With Custom Button

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

@@ -1,3 +1,2 @@
 export { default as MapDefault } from './_map_default.jsx'
 export { default as MapWithPlugin } from './_map_with_plugin.jsx'
-export {default as MapWithCustomButton} from './_map_with_custom_button.jsx'

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

@@ -6,11 +6,11 @@ export const getAncestorsOfUnchecked = (
   if (item.parent_id) {
     const ancestor = filterFormattedDataById(data, item.parent_id);
     ancestor[0].checked = false;
-    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
   }
   return data;
 };
-  
+
 //function is going over formattedData and returning all objects that match the
 //id of the clicked item from the dropdown
 export const filterFormattedDataById = (
@@ -20,9 +20,9 @@ export const filterFormattedDataById = (
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
-      if (item.id.toLowerCase() === (term.toLowerCase())) {
+      if (item.id.toLowerCase() === term.toLowerCase()) {
         matched.push(item);
-        return
+        return;
       }
 
       if (item.children && item.children.length > 0) {
@@ -75,24 +75,29 @@ export const getCheckedItems = (
   });
   return checkedItems;
 };
-    
-export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
+
+export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
   const checkedDefault: { [key: string]: any }[] = [];
 
-  const traverseTree = (items:{ [key: string]: any }[]) => {
+  const traverseTree = (items: { [key: string]: any }[]) => {
     if (!Array.isArray(items)) {
       return;
     }
-    items.forEach((item:{ [key: string]: any }) => {
+    items.forEach((item: { [key: string]: any }) => {
       if (item.checked) {
         if (item.children && item.children.length > 0) {
-          const uncheckedChildren = item.children.filter((child:{ [key: string]: any }) => !child.checked);
+          const uncheckedChildren = item.children.filter(
+            (child: { [key: string]: any }) => !child.checked
+          );
           if (uncheckedChildren.length === 0) {
             checkedDefault.push(item);
             return;
           }
         } else {
-          const parent = items.find((parentItem:{ [key: string]: any }) => parentItem.id === item.parentId);
+          const parent = items.find(
+            (parentItem: { [key: string]: any }) =>
+              parentItem.id === item.parentId
+          );
           if (!parent || !parent.checked) {
             checkedDefault.push(item);
           }
@@ -112,23 +117,47 @@ export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
 
 export const recursiveCheckParent = (
   item: { [key: string]: any },
-  data:any
+  data: any
 ) => {
   if (item.parent_id !== null) {
-  const parent = filterFormattedDataById(data, item.parent_id);
-  const allChildrenChecked = parent[0].children.every(
-    (child: { [key: string]: any }) => child.checked
-  );
-  if (allChildrenChecked) {
-    parent[0].checked = true;
-    const parentHasParent = parent[0].parent_id !== null;
-    if (parentHasParent) {
-      recursiveCheckParent(
-        parent[0],
-        data
-      );
+    const parent = filterFormattedDataById(data, item.parent_id);
+    const allChildrenChecked = parent[0].children.every(
+      (child: { [key: string]: any }) => child.checked
+    );
+    if (allChildrenChecked) {
+      parent[0].checked = true;
+      const parentHasParent = parent[0].parent_id !== null;
+      if (parentHasParent) {
+        recursiveCheckParent(parent[0], data);
+      }
+    }
+  }
+  return data;
+};
+
+export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
+  let expandedItems: any[] = [];
+
+  const traverse = (items: string | any[], ancestors: any[] = []) => {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const itemAncestors = [...ancestors, item];
+
+      if (item.expanded) {
+        expandedItems.push(item.id);
+      }
+      if (Array.isArray(item.children)) {
+        const hasCheckedChildren = item.children.some(
+          (child: { [key: string]: string }) => child.checked
+        );
+        if (hasCheckedChildren) {
+          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+        }
+        traverse(item.children, itemAncestors);
+      }
     }
-}
-}
-return data;
-}
+  };
+
+  traverse(treeData);
+  return expandedItems;
+};

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

@@ -23,7 +23,7 @@
     .input_wrapper {
       background-color: $white;
       cursor: pointer;
-      padding: $space_xs + 4 $space_sm;
+      padding: $space_xs + 1 $space_sm;
       border: 1px solid #e4e8f0;
       border-radius: $border_rad_heavier;
       display: flex;
@@ -36,7 +36,6 @@
       input {
         border: none;
         font-family: $font_family_base;
-        padding: $space_xs;
         &:focus {
           outline: none;
         }

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

@@ -15,6 +15,7 @@ import {
   getCheckedItems,
   getDefaultCheckedItems,
   recursiveCheckParent,
+  getExpandedItems,
 } from "./_helper_functions"
 
 type MultiLevelSelectProps = {
@@ -22,6 +23,7 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   id?: string
+  inputDisplay?: "pills" | "none"
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
@@ -34,6 +36,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
+    inputDisplay = "pills",
     name,
     returnAllSelected = false,
     treeData,
@@ -50,26 +53,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const dropdownRef = useRef(null)
 
-
-  const getExpandedItems = (treeData: { [key: string]: string }[]) => {
-    let expandedItems: any[] = [];
-    
-    const traverse = (items: string | any[]) => {
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (item.expanded) {
-          expandedItems.push(item.id);
-        }
-        if (Array.isArray(item.children)) {
-          traverse(item.children);
-        }
-      }
-    }
-  
-    traverse(treeData);
-    return expandedItems;
-  }
-
   //state for whether dropdown is open or closed
   const [isClosed, setIsClosed] = useState(true)
   //state from onchange for textinput, to use for filtering to create typeahead
@@ -174,8 +157,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree
   }
 
-
-
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
@@ -331,7 +312,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 ))
               : null}
 
-            {returnedArray.length !== 0 && returnAllSelected
+            {returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
               ? returnedArray.map((item, index) => (
                   <FormPill
                     key={index}
@@ -342,7 +323,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 ))
               : null}
             {!returnAllSelected &&
-              defaultReturn.length !== 0 &&
+              defaultReturn.length !== 0 && inputDisplay === "pills" ?
               defaultReturn.map((item, index) => (
                 <FormPill
                   key={index}
@@ -350,9 +331,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                   size='small'
                   onClick={(event: any) => handlePillClose(event, item)}
                 />
-              ))}
-            {returnedArray.length !== 0 && returnAllSelected && <br />}
-            {defaultReturn.length !== 0 && !returnAllSelected && <br />}
+              ))
+              : null
+            }
+            {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
+            {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
             <input
               id='multiselect_input'
               onChange={(e) => {
@@ -365,11 +348,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
           {isClosed ? (
             <div key='chevron-down'>
-              <Icon icon='chevron-down' />
+              <Icon icon='chevron-down' size="xs"/>
             </div>
           ) : (
             <div key='chevron-up'>
-              <Icon icon='chevron-up' />
+              <Icon icon='chevron-up' size="xs"/>
             </div>
           )}
         </div>

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -9,6 +9,9 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :input_display, type: Playbook::Props::Enum,
+                           values: %w[pills none],
+                           default: "pills"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -17,6 +20,7 @@ module Playbook
       def multi_level_select_options
         {
           id: id,
+          inputDisplay: input_display,
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,