playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71565d1e911bd318cffad56ff64e34bab539bc740f5138b68d1f1896c1a6808e
-  data.tar.gz: '0278d976d8320ee5013b5cc1cb9ae03349ba1948317c315624291a4ef1c9c93a'
+  metadata.gz: eff3466f7d7b7331a54b52048a74934ec03a46032d326e50c137db881587d3e4
+  data.tar.gz: 19a871abeb1b74093975dca63b9b9e5488523c8f506f1feb5234a4cde018ec61
 SHA512:
-  metadata.gz: 01c0a50b86ab971669772bfffb39f010929ca496ded033027592aac11de73efb74f40a13b24705a379bba1e81df2b0e4a863415ab1c51b281a1b313a967cd216
-  data.tar.gz: e0703c831017c9f2adb8b05f0eeb61a934142e52beca288c37fa3ee08d6268a6db7198e146e2efb743238a5a5245b7bd54b1a5e0f2c5c7518eb63a8fed94e114
+  metadata.gz: b0367cc5e1ed7fd1a31f93e46a411771588713a4198525ab15c6e46e6bae719f7841cf7747339a9981be95a193a3212abe6fddf99b2b2eee8cbd63e5f8983061
+  data.tar.gz: 9e28b93aa593760bc059c10182adfbd3a8ef53e9cf881a1d80360c6d67119dd3f6c7c83d329c2b28c5283075e077fe6ecd09037dad784d778c81abd8b6ce34f1

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

@@ -36,9 +36,10 @@
       vertical-align: top;
       width: 0.6em;
       top: 10px;
+      transform: rotate(135deg);
       font-size: 0.5em;
 
-      transform: rotate(45deg);
+      transform: rotate(-45deg);
       top: 12px;
     }
 

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
+import { findItemById, checkIt, unCheckIt } from "./helper_functions";
 import MultiSelectHelper from "./_multi_select_helper";
 
 type MultiLevelSelectProps = {
@@ -42,31 +42,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedData = formattedData.map((item: any) => {
       if (item.id === currentNode._id) {
         if (currentNode.checked) {
-          checkIt(item, selectedItems, setSelectedItems, false);
+          checkIt(item, selectedItems, setSelectedItems);
         } else {
-          unCheckIt(item, selectedItems, setSelectedItems, false);
+          unCheckIt(item, selectedItems, setSelectedItems);
         }
       } else if (item.children) {
         const foundItem = findItemById(item.children, currentNode._id);
         if (foundItem) {
           if (currentNode.checked) {
-            checkIt(foundItem, selectedItems, setSelectedItems, false);
-            if (currentNode._parent) {
-              const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
-              parents.forEach((item:string) => {
-               const ancestor = findItemById(formattedData,item)
-               ancestor.expanded = true
-              });
-             }
+            checkIt(foundItem, selectedItems, setSelectedItems);
           } else {
-            unCheckIt(foundItem, selectedItems, setSelectedItems, false);
-            if (currentNode._parent) {
-             const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
-             parents.forEach((item:string) => {
-              const ancestor = findItemById(formattedData,item)
-              ancestor.expanded = true
-             });
-            }
+            unCheckIt(foundItem, selectedItems, setSelectedItems);
           }
         }
       }
@@ -106,18 +92,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         treeData={formattedData}
         onChange={(
           // @ts-ignore
-          selectedNodes: { [key: string]: any }[],
+          selectedNodes: { [key: string]: any }[], 
           currentNode: { [key: string]: any }[]
         ) => {
           setCheckedData(currentNode);
           onSelect(currentNode);
-
         }}
         id={id}
         {...props}
       />
     );
-  }, [formattedData])
+  }, [formattedData]);
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -19,20 +19,19 @@ export const findItemById = (
 export const checkIt = (
   foundItem: { [key: string]: any },
   selectedItems: any[],
-  setSelectedItems: Function,
-  expand: boolean
+  setSelectedItems: Function
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = true;
-  foundItem.expanded = expand;
+  foundItem.expanded = true;
   selectedItems.push(foundItem);
 
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      checkIt(x, selectedItems, setSelectedItems, expand);
+      checkIt(x, selectedItems, setSelectedItems);
     });
   }
 
@@ -42,46 +41,20 @@ export const checkIt = (
 export const unCheckIt = (
   foundItem: { [key: string]: any },
   selectedItems: any,
-  setSelectedItems: any,
-  expand: boolean
+  setSelectedItems: any
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = false;
-  foundItem.expanded = false;
   const newSelectedItems = selectedItems.filter(
     (item: any) => item.id !== foundItem.id
   );
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      unCheckIt(x, selectedItems, setSelectedItems, expand);
+      unCheckIt(x, selectedItems, setSelectedItems);
     });
   }
   setSelectedItems([...newSelectedItems]);
 };
-
-
-export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
-  for (let i = 0; i < items.length; i++) {
-    const item:any = items[i];
-    if (item.id === itemId) {
-      // item found in current level of items array
-      return [...ancestors, item.id];
-    }
-    if (item.children && item.children.length > 0) {
-      // recursively search through children
-      const foundAncestors = getParentAndAncestorsIds(
-        itemId,
-        item.children,
-        [...ancestors, item.id]
-      );
-      if (foundAncestors) {
-        return foundAncestors;
-      }
-    }
-  }
-  // item not found in this level of items array or its children
-  return null;
-}

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

@@ -11,8 +11,12 @@ export default class PbTable extends PbEnhancedElement {
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      var headers = [].map.call(table.querySelectorAll('th'), (header: Element) => {
-        return header.textContent.replace(/\r?\n|\r/, '')
+      let headers: string[] = [];
+      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        let colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+        }
       });
 
       // for each row in tbody

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -6,7 +6,7 @@ import {
   offset, 
   Placement, 
   safePolygon, 
-  shift, 
+  shift,
   useFloating, 
   useHover, 
   useInteractions,
@@ -17,9 +17,6 @@ import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
-
-
-
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
@@ -29,8 +26,8 @@ type TooltipProps = {
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
+  position?: "absolute" | "fixed";
   text: string,
-  zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
 const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -43,6 +40,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     icon = null,
     interaction = false,
     placement: preferredPlacement = "top",
+    position = "absolute",
     text,
     zIndex,
     ...rest
@@ -50,24 +48,26 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
 
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
-
+  
   const css = classnames(
     globalProps({...rest}),
     className,
   )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
-  const {
 
+
+  const {
     context,
     floating,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
     reference,
     strategy,
     x,
     y,
   } = useFloating({
+    strategy: position,
     middleware: [
       arrow({
         element: arrowRef,
@@ -87,6 +87,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement
   })
 
+
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -142,7 +143,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
               className="arrow_bg"
               ref={arrowRef}
               style={{
-                position: strategy,
+                position: "absolute",
                 left: arrowX != null ? `${arrowX}px` : "",
                 top: arrowY != null ? `${arrowY}px` : "",
                 [staticSide]: "-5px",
@@ -154,4 +155,4 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
   )
 }
 
-export default Tooltip
+export default Tooltip

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -65,3 +65,32 @@ test("closes on mouseleave", async () => {
 
   cleanup();
 });
+
+test("has default position absolute", async () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
+    cleanup();
+  })
+
+  cleanup();
+});
+
+test("has position fixed", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        position="fixed"
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "fixed"});
+    cleanup();
+  })
+
+  cleanup();
+});

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -68,7 +68,7 @@ $background_colors: (
 
 /* Card colors ------------------*/
 $card_light:          $white !default;
-$card_dark:           rgba($white, $opacity_1) !default;
+$card_dark:           mix(white, $bg_dark, 10%)  !default;
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
@@ -109,16 +109,18 @@ $focus_input_colors: (
 
 /* Border colors ----------------------*/
 $border_light:        #E4E8F0 !default;
-$border_dark:         rgba($white, $opacity_1) !default;
+$border_dark:         mix(white, $bg_dark, 20%) !default;
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 
 /* Shadow colors ----------------------*/
-$shadow:        rgba(#3C6AAC, $opacity_2) !default;
+$shadow:             rgba(#3C6AAC, $opacity_2) !default;
+$shadow_dark:        $bg_dark !default;
 $shadow_colors: (
   shadow:       $shadow,
+  shadow_dark:       $shadow_dark,
 );
 
 /* Text colors ------------------------*/