playbook_ui 12.35.0 → 12.36.0.pre.alpha.PLAY942collapsiblenav21035

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b982d7d15691df84bc2a32b4f67b5dab67cf90ab7f9fc072ebfd4d81b800684
-  data.tar.gz: 293f1da6a6611a18106a6f0f1a3cccf2edc2520657ff5f17f3e06a2b74de7839
+  metadata.gz: 6db34cdefea717b8e05435f34ffeca2768916aafc09c5fc75fe585cf29eeed83
+  data.tar.gz: '079ed7c7c64c2c7ee0825b84398cb909e08d08badd9cab8fb16870c4391210f0'
 SHA512:
-  metadata.gz: 46f096f0c12c8c764ab72c44ff5fd42f0bc8c547c6807a2ae06dae1e073c055abbbfae072144524ddeeba99e2397d7deaa81b9f64cb07b904b2582b636c4da9b
-  data.tar.gz: 992a01e77be2823afea2e8e8ece093d84114fb0e85a3e58bb1dc57a50d8ff4f86fb3ccaae38f16d8554de1334285463b155bb28b28c2bccbbb1969e21af4807e
+  metadata.gz: 96a3770480378c8930a578bf3c021aebcce6cf4dd8f45b9c6de753bfa67768334db24beede7c1f24d64b522cb4607c174bd7b120a4c24eada9d71c68427d70d0
+  data.tar.gz: 3708ce113f29d42deeaea57d6e166676fe51d9e9618a1d11383e82a2bf8658497b62dadd111ba2a2332ca5edf69f56cab283639da997399c07b3be04cda70093

data/app/pb_kits/playbook/index.js

@@ -129,4 +129,5 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as useCollapsible} from './pb_collapsible/useCollapsible'

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
+import  useCollapsible from './useCollapsible'
 
 import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -16,20 +17,15 @@ type CollapsibleProps = {
   className?: string,
   collapsed?: boolean,
   data?: object,
-  icon?: string | string[]
+  icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
-  iconSize?: IconSizes
+  iconSize?: IconSizes,
+  iconClick?: ()=> void,
+  onClick?: ()=> void,
   id?: string,
 }
 
-const useCollapsible = (initial = false) => {
-  const [collapsed, setCollapsed] = useState(initial)
 
-  return [
-    collapsed,
-    () => setCollapsed((t) => !t),
-  ]
-}
 
 const Collapsible = ({
   aria = {},
@@ -40,10 +36,17 @@ const Collapsible = ({
   icon,
   iconColor = 'default',
   iconSize,
+  iconClick,
+  onClick,
   id,
   ...props
 }: CollapsibleProps) => {
-  const [isCollapsed, collapse] = useCollapsible(collapsed)
+  const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
+
+  useEffect(()=> {
+   setIsCollapsed(collapsed)
+  },[collapsed])
+
   const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
 
   if (CollapsibleParent.length !== 2) {
@@ -62,9 +65,8 @@ const Collapsible = ({
     globalProps(props),
     className
   )
-
   return (
-    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, icon, iconSize, iconColor }}>
+    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, iconClick, onClick }}>
       <div
           {...ariaProps}
           {...dataProps}

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -33,7 +33,7 @@ type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   cursor?: string,
-
+  onClick?: ()=> void
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
@@ -42,9 +42,10 @@ type IconProps = {
   icon?: string[] | string
   iconColor?: IconColors
   iconSize?: IconSizes
+  iconClick?: ()=> void
 }
 
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
+const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconProps) => {
   const color = colorMap[iconColor]
 
   const showIcon = (icon: string |string[]) => {
@@ -54,6 +55,13 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
     return icon
   }
 
+  const handleIconClick = (e:any) => {
+    if (iconClick) {
+    e.stopPropagation();
+    iconClick()
+    }
+  }
+
   return (
     <>
       {collapsed ? (
@@ -61,6 +69,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
           className="icon_wrapper"
           key={icon ? showIcon(icon)[0] : "chevron-down"}
           style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
           <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
         </div>
@@ -69,6 +78,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
           className="icon_wrapper"
           key={icon ? showIcon(icon)[1] : "chevron-up"}
           style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
           <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
         </div>
@@ -83,13 +93,18 @@ const CollapsibleMain = ({
   cursor = 'pointer',
   ...props
 }: CollapsibleMainProps): React.ReactElement=> {
-  const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
+  const {collapsed, toggle, icon, iconSize, iconColor, iconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })
 
+  const handleCollapsibleClick = (e:any) => {
+    toggle();
+    onClick && onClick(e)
+  }
+
   return (
     <div className={classnames(mainCSS, className, mainSpacing)}>
-      <div onClick={context.collapse as (() => void)}>
+      <div onClick={(e)=>handleCollapsibleClick(e)}>
         <Flex
             spacing="between"
             vertical="center"
@@ -97,10 +112,11 @@ const CollapsibleMain = ({
           <FlexItem>{children}</FlexItem>
           <FlexItem>
             <ToggleIcon
-                collapsed={context.collapsed as () => void}
-                iconColor={context.iconColor as IconColors}
-                iconSize={context.iconSize as IconSizes}
-                icon={context.icon as string[] | string}
+                collapsed={collapsed as () => void}
+                iconColor={iconColor as IconColors}
+                iconSize={iconSize as IconSizes}
+                icon={icon as string[] | string}
+                iconClick={iconClick}
             />
             </FlexItem>
         </Flex>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -9,7 +9,7 @@
         <%= content.presence %>
       <% end %>
       <%= pb_rails("flex/flex_item") do %>
-        <div style="color: <%= object.icon_color %>">
+        <div style="color: <%= object.icon_color %>" class="icon_wrapper" >
         <% if object.icon.present? %>
           <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
           <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,8 +1,17 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible, useCollapsible, Button } from '../..'
 
-const CollapsibleIcons = () => (
-  <Collapsible icon={['plus','minus']}>
+const CollapsibleIcons = () => {
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+
+  return (
+  <>
+  <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
+        {isCollapsed ? "Expand" : "Collapse"}
+  </Button>
+  <Collapsible collapsed={isCollapsed}
+      icon={['plus','minus']}
+  >
     <Collapsible.Main>
       <div>{'Main Section'}</div>
     </Collapsible.Main>
@@ -14,6 +23,8 @@ const CollapsibleIcons = () => (
       </div>
     </Collapsible.Content>
   </Collapsible>
-)
+  </>
+  )
+}
 
 export default CollapsibleIcons

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

@@ -4,10 +4,10 @@ examples:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_icons: Custom Icons
 
   react:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_icons: Custom Icons

data/app/pb_kits/playbook/pb_collapsible/useCollapsible.tsx

@@ -0,0 +1,14 @@
+import {useState} from 'react';
+
+const useCollapsible = (initial= true) => {
+    const [collapsed, setCollapsed] = useState(initial)
+
+    const toggle = () => setCollapsed((prev) => !prev)
+      return [
+      collapsed,
+      toggle,
+      setCollapsed as any,
+    ]
+  }
+
+  export default useCollapsible

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -21,13 +21,17 @@ const dialogHelper = () => {
 
   // Close dialog box on outside click
   dialogs.forEach((dialogElement) => {
-    dialogElement.addEventListener("click", (event) => {
+    dialogElement.addEventListener("mousedown", (event) => {
       const dialogParentDataset = dialogElement.parentElement.dataset
       if (dialogParentDataset.overlayClick === "overlay_close") return
 
-      const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
+      const dialogModal = event.target.getBoundingClientRect()
+      const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+                                        event.clientX > dialogModal.right ||
+                                        event.clientY < dialogModal.top ||
+                                        event.clientY > dialogModal.bottom
 
-      if (clickedOutsideDialogBox) {
+      if (clickedOutsideDialogModal) {
         dialogElement.close()
         event.stopPropagation()
       }

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -1,6 +1,27 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+
 [class^="pb_nav_list"] {
+  .pb_collapsible_nav_item {
   .pb_collapsible_main_kit,
-  .pb_collapsible_content_kit {
+  .pb_collapsible_content_kit,
+  .pb_collapsible_kit {
     padding: 0 !important;
   }
+
+  .icon_wrapper {
+    border-radius: $border_radius_rounded;
+    width: 19px;
+    height: 19px;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $space_xs;
+    &:hover {
+      background-color: rgba($primary_action, $opacity_3);
+
+    }
+  }
+}
 }

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -14,15 +14,19 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
+  collapsibleClick?: () => void,
   data?: object,
   iconLeft?: string,
   iconRight?: string | string[],
+  iconRightClick?: () => void,
+  iconLeftClick?: () => void,
   id?: string,
   imageUrl?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
+  toggleCollapsed?: any
 } & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
@@ -32,22 +36,34 @@ const NavItem = (props: NavItemProps) => {
     children,
     className,
     collapsible,
+    collapsibleClick,
     data = {},
     iconLeft,
     iconRight,
+    iconRightClick,
+    iconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
+    toggleCollapsed
   } = props
 
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), globalProps(props), className)
+  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), collapsible ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
+
+
+  const handleIconClick = (e:any) => {
+    if (iconLeftClick) {
+    e.stopPropagation();
+    iconLeftClick()
+    }
+  }
 
   return (
     <li
@@ -58,7 +74,13 @@ const NavItem = (props: NavItemProps) => {
     >
       {
         collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
+            iconSize="xs" 
+            id={id}
+            collapsed={toggleCollapsed}
+            iconClick={iconRightClick}
+            onClick={collapsibleClick}
+          >
           <Collapsible.Main>
           <Tag
           className="pb_nav_list_item_link"
@@ -70,6 +92,7 @@ const NavItem = (props: NavItemProps) => {
             <div
               className="pb_nav_list_item_icon_section"
               key={imageUrl}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Image
                 className="pb_nav_img_wrapper"
@@ -82,6 +105,7 @@ const NavItem = (props: NavItemProps) => {
             <div
               className="pb_nav_list_item_icon_section"
               key={iconLeft}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Icon
                 className="pb_nav_list_item_icon_left"

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,83 +1,63 @@
-import React from "react";
-
-import Nav from "../_nav";
-import NavItem from "../_item";
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
 
 const CollapsibleNav = (props) => {
+  const navItems = ["Overview", "Albums", "Similar Artists"]
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const collapsibles = navItems.map(() => useCollapsible(true))
+
+  const handleMainClick = (index) => {
+    collapsibles.forEach(([, , setCollapsed], idx) => {
+      if (idx === index) {
+        setCollapsed(false)
+      } else {
+        setCollapsed(true)
+      }
+    })
+  }
+
+
+  const handleIconRightClick = (index) => {
+    const [isCollapsed, setCollapsed] = collapsibles[index]
+    setCollapsed(!isCollapsed)
+  }
+
   return (
-    <Nav variant="subtle">
-      <NavItem
-          collapsible 
-          iconLeft="city" 
-          link="#" 
-          text="Overview" 
-          {...props}
-      >
-        <NavItem
-            link="#" 
-            text="City"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="People"
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Business" 
-            {...props}
-        />
-      </NavItem>
-      <NavItem 
-          active 
-          collapsible 
-          iconLeft="theater-masks"
-          link="#" 
-          text="Albums" 
-          {...props}
-      >
-        <NavItem 
-            link="#" 
-            text="Entertainment" 
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Food" 
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Style" 
-            {...props}
-        />
-      </NavItem>
-      <NavItem 
-          collapsible 
-          iconLeft="city" 
-          link="#" 
-          text="Similar Artists" 
-          {...props}
-      >
-        <NavItem 
-            link="#" 
-            text="City"
-            {...props} 
-        />
-        <NavItem
-            link="#"
-            text="People"
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Business" 
-            {...props}
-        />
-      </NavItem>
-    </Nav>
-  );
-};
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsible
+                collapsibleClick={() => handleMainClick(index)}
+                iconLeft="chevron-down"
+                iconRightClick={() => handleIconRightClick(index)}
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                text={text}
+                toggleCollapsed={collapsed}
+                {...props}
+            >
+              <NavItem link="#" 
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
 
-export default CollapsibleNav;
+export default CollapsibleNav

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx

@@ -1,7 +1,5 @@
 import React from "react";
-
-import Nav from "../_nav";
-import NavItem from "../_item";
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNavCustomIcons = (props) => {
   return (
@@ -9,7 +7,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem
           collapsible 
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -34,7 +32,7 @@ const CollapsibleNavCustomIcons = (props) => {
           active 
           collapsible 
           iconLeft="theater-masks"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -58,7 +56,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem 
           collapsible 
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}

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

@@ -25,8 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
-  # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
+  - collapsible_nav: Subtle With Collapsible
+  - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -14,7 +14,11 @@ module Playbook
                     values: %w[_blank _self _parent _top],
                     default: "_self"
       def classname
-        generate_classname("pb_nav_list_kit_item", active_class)
+        if collapsible
+          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
+        else
+          generate_classname("pb_nav_list_kit_item", active_class)
+        end
       end
 
       def tag

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -17,6 +17,7 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
+import _uniqueId from 'lodash/uniqueId';
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -72,6 +73,7 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
+    targetId,
   } = props;
 
   const popoverSpacing =
@@ -123,6 +125,7 @@ const Popover = (props: PbPopoverProps) => {
                     popoverSpacing,
                     overflowHandling
                   )}
+                  id={targetId}
                   style={widthHeightStyles()}
               >
                 {children}
@@ -136,6 +139,7 @@ const Popover = (props: PbPopoverProps) => {
 };
 
 const PbReactPopover = (props: PbPopoverProps) => {
+  const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
     children,
@@ -163,25 +167,27 @@ const PbReactPopover = (props: PbPopoverProps) => {
       "click",
       ({ target }) => {
         const targetIsPopover =
-          (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
+          (target as HTMLElement).closest("#" + targetId) !==
           null;
         const targetIsReference =
-          (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
+          (target as HTMLElement).closest("#reference-" + targetId) !==
           null;
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover || targetIsReference) {
+            if (!targetIsPopover && !targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover || targetIsReference) {
+            if (targetIsPopover) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            shouldClosePopover(true);
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
         }
       },
@@ -200,6 +206,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
         offset={offset}
         placement={placement}
         referenceElement={referenceElement}
+        targetId={targetId}
         zIndex={zIndex}
         {...props}
     >
@@ -214,6 +221,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
           <PopperReference>
             {({ ref }) => (
               <span
+                  id={"reference-" + targetId}
                   className="pb_popover_reference_wrapper"
                   ref={ref}>
                 <reference.type {...reference.props} />