playbook_ui 13.16.0.pre.alpha.PLAY12002127 → 13.16.0.pre.alpha.fonttest1972

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

@@ -86,50 +86,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     item: []
   })
 
-  const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
-    if (!Array.isArray(tree)) {
-      return
-    }
-    return tree.map((item: { [key: string]: any }) => {
-      item.checked = check
-      item.children = modifyRecursive(item.children, check)
-      return item
-    })
-  }
-
-   // Function to map over data and add parent_id + depth property to each item
-  const addCheckedAndParentProperty = (
-    treeData: { [key: string]: any }[],
-    selectedIds: string[],
-    parent_id: string = null,
-    depth = 0,
-  ) => {
-    if (!Array.isArray(treeData)) {
-      return
-    }
-    return treeData.map((item: { [key: string]: any } | any) => {
-      const newItem = {
-        ...item,
-        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
-        parent_id,
-        depth,
-      }
-      if (newItem.children && newItem.children.length > 0) {
-        const children =
-          item.checked && !returnAllSelected
-            ? modifyRecursive(item.children, true)
-            : item.children
-        newItem.children = addCheckedAndParentProperty(
-          children,
-          selectedIds,
-          newItem.id,
-          depth + 1
-        )
-      }
-      return newItem
-    })
-  }
-
   useEffect(() => {
     const formattedData = addCheckedAndParentProperty(
       treeData,
@@ -183,7 +139,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }, [])
 
-
+  const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
+    if (!Array.isArray(tree)) {
+      return
+    }
+    return tree.map((item: { [key: string]: any }) => {
+      item.checked = check
+      item.children = modifyRecursive(item.children, check)
+      return item
+    })
+  }
 
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
@@ -241,7 +206,38 @@ 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 }[],
+    selectedIds: string[],
+    parent_id: string = null,
+    depth = 0,
+  ) => {
+    if (!Array.isArray(treeData)) {
+      return
+    }
+    return treeData.map((item: { [key: string]: any } | any) => {
+      const newItem = {
+        ...item,
+        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
+        parent_id,
+        depth,
+      }
+      if (newItem.children && newItem.children.length > 0) {
+        const children =
+          item.checked && !returnAllSelected
+            ? modifyRecursive(item.children, true)
+            : item.children
+        newItem.children = addCheckedAndParentProperty(
+          children,
+          selectedIds,
+          newItem.id,
+          depth + 1
+        )
+      }
+      return newItem
+    })
+  }
 
   // Click event for x on form pill
   const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
-            {...userObject}
-            className="pb_multiple_users_stacked_item"
-            dark={dark}
-            key={index}
-            size="xs"
+          {...userObject}
+          className="pb_multiple_users_stacked_item"
+          dark={dark}
+          key={index}
+          size="xs"
         />
       )
     })
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
       return users.slice(1, 2).map((userObject, index) => {
         return (
           <Avatar
-              {...userObject}
-              className="pb_multiple_users_stacked_item second_item"
-              dark={dark}
-              key={index}
-              size="xs"
+            {...userObject}
+            className="pb_multiple_users_stacked_item second_item"
+            dark={dark}
+            key={index}
+            size="xs"
           />
         )
       })
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     if (moreThanTwo === true) {
       return (
         <Badge
-            className="pb_multiple_users_stacked_item second_item"
-            dark={dark}
-            rounded
-            text={`+${users.length - displayCount()}`}
-            variant="primary"
+          className="pb_multiple_users_stacked_item second_item"
+          dark={dark}
+          rounded
+          text={`+${users.length - displayCount()}`}
+          variant="primary"
         />
       )
     }
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {firstUser()}
       {secondUser()}

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

@@ -18,7 +18,7 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode;
   className?: string;
   collapsible?: boolean;
-  data?: Record<string, unknown>;
+  data?: object;
   dark?: boolean;
   fontSize?: "normal" | "small";
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -76,7 +76,7 @@ const NavItem = (props: NavItemProps) => {
     id,
     imageUrl,
     link,
-    onClick,
+    onClick = () => {},
     target = "_self",
     text = "",
     collapsibleTrail,
@@ -205,49 +205,46 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
       {collapsible ? (
         <>
           <Collapsible
-              className={collapsibleClasses}
-              collapsed={collapsed}
-              icon={iconRight && iconRight}
-              iconSize="xs"
-              id={id}
-              onClick={onClick}
-              onIconClick={onIconRightClick}
+            className={collapsibleClasses}
+            icon={iconRight && iconRight}
+            iconSize="xs"
+            id={id}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
           >
             <Collapsible.Main
-                className={globalProps({ ...finalItemSpacing })}
-                dark={dark}
-            >
+            className={globalProps({ ...finalItemSpacing })}
+            dark={dark}>
               <Tag
-                  {...ariaProps}
-                  {...dataProps}
-                  {...htmlProps}
-                  className={classes}
-                  href={link}
-                  id={id}
-                  target={target}
+                {...ariaProps}
+                {...dataProps}
+                {...htmlProps}
+                className={classes}
+                id={id}
+                href={link}
+                target={target}
               >
                 {imageUrl && (
                   <div
-                      className="pb_nav_list_item_icon_section_collapsible"
-                      key={imageUrl}
-                      onClick={(e) => handleIconClick(e)}
+                    className="pb_nav_list_item_icon_section_collapsible"
+                    key={imageUrl}
+                    onClick={(e) => handleIconClick(e)}
                   >
-                    <Image className="pb_nav_img_wrapper"
-                        url={imageUrl}
-                    />
+                    <Image className="pb_nav_img_wrapper" url={imageUrl} />
                   </div>
                 )}
 
                 {iconLeft && (
                   <div
-                      className="pb_nav_list_item_icon_section_collapsible"
-                      key={iconLeft}
-                      onClick={(e) => handleIconClick(e)}
+                    className="pb_nav_list_item_icon_section_collapsible"
+                    key={iconLeft}
+                    onClick={(e) => handleIconClick(e)}
                   >
                     <Icon
-                        className="pb_nav_list_item_icon_left_collapsible"
-                        fixedWidth
-                        icon={iconLeft}
+                      className="pb_nav_list_item_icon_left_collapsible"
+                      fixedWidth
+                      icon={iconLeft}
                     />
                   </div>
                 )}
@@ -261,33 +258,27 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
         </>
       ) : (
         <Tag
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            href={link}
-            id={id}
-            onClick={onClick}
-            target={target}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+          href={link}
+          onClick={onClick}
+          target={target}
         >
           {imageUrl && (
-            <div className="pb_nav_list_item_icon_section"
-                key={imageUrl}
-            >
-              <Image className="pb_nav_img_wrapper"
-                  url={imageUrl}
-              />
+            <div className="pb_nav_list_item_icon_section" key={imageUrl}>
+              <Image className="pb_nav_img_wrapper" url={imageUrl} />
             </div>
           )}
 
           {iconLeft && (
-            <div className="pb_nav_list_item_icon_section"
-                key={iconLeft}
-            >
+            <div className="pb_nav_list_item_icon_section" key={iconLeft}>
               <Icon
-                  className="pb_nav_list_item_icon_left"
-                  fixedWidth
-                  icon={iconLeft}
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
               />
             </div>
           )}
@@ -296,13 +287,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
           {iconRight && (
             <div
-                className="pb_nav_list_item_icon_section"
-                key={iconRight as string}
+              className="pb_nav_list_item_icon_section"
+              key={iconRight as string}
             >
               <Icon
-                  className="pb_nav_list_item_icon_right"
-                  fixedWidth
-                  icon={iconRight as string}
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight as string}
               />
             </div>
           )}

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

@@ -12,12 +12,12 @@ type NavProps = {
   borderless?: boolean,
   children?: React.ReactNode[] | React.ReactNode,
   className?: string | string[],
-  data?: Record<string, unknown>,
+  data?: object,
   dark?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  onClick?: () => void,
+  onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
   link?: string,
   title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
   itemSpacing?: SpacingObject
 } & GlobalProps
 
-const Nav = (props: NavProps): React.ReactElement => {
+const Nav = (props: NavProps) => {
   const {
     aria = {},
     borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps): React.ReactElement => {
     htmlOptions = {},
     id,
     link = '#',
-    onClick,
+    onClick = () => { },
     orientation = 'vertical',
     title = '',
     variant = 'normal',
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
 
   return (
     <nav
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={cardCss}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={cardCss}
+      id={id}
     >
       {title &&
         <div className="pb_nav_list_title">
           <a
-              className="pb_nav_list_item_link_text"
-              href={link}
-              onClick={onClick}
+            className="pb_nav_list_item_link_text"
+            href={link}
+            onClick={onClick}
           >
             <Caption
-                dark={dark}
-                size="md"
-                text={`${title}`}
+              dark={dark}
+              size="md"
+              text={`${title}`}
             />
           </a>
         </div>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -3,10 +3,12 @@
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
-<%= javascript_tag do %>
-    document.addEventListener('DOMContentLoaded', function () {
-        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+<% content_for(:pb_js) do %>
+    <%= javascript_tag do %>
+        document.addEventListener('DOMContentLoaded', function () {
+            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+            })
         })
-    })
+    <% end %>
 <% end %>

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

@@ -171,27 +171,29 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
 
     document.body.addEventListener(
       "click",
-      (e: MouseEvent) => {
-        const target = e.target as HTMLElement
-
+      ({ target }) => {
         const targetIsPopover =
-          target.closest("#" + targetId) !== null;
+          (target as HTMLElement).closest("#" + targetId) !==
+          null;
         const targetIsReference =
-          target.closest("#reference-" + targetId) !== null;
-
-        const shouldClose = () => {
-          setTimeout(() => shouldClosePopover(true), 0);
-        }
+          (target as HTMLElement).closest("#reference-" + targetId) !==
+          null;
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) shouldClose();
+            if (!targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
           case "inside":
-            if (targetIsPopover) shouldClose();
+            if (targetIsPopover) {
+              shouldClosePopover(true);
+            }
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
         }
       },

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

@@ -5,7 +5,6 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_actionable_content: With Actionable Content
 
   react:
     - popover_default: Default
@@ -13,4 +12,4 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_actionable_content: With Actionable Content
+    

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

@@ -3,4 +3,3 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
-export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import PbTable from '.'
 
 type TableProps = {
@@ -9,19 +9,19 @@ type TableProps = {
   children: React.ReactNode[] | React.ReactNode,
   className: string,
   collapse?: "sm" | "md" | "lg",
-  container?: boolean,
+  container: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
   dataTable: boolean,
-  disableHover?: boolean,
+  disableHover: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  responsive?: "collapse" | "scroll" | "none",
-  singleLine?: boolean,
-  size?: "sm" | "md" | "lg",
+  responsive: "collapse" | "scroll" | "none",
+  singleLine: boolean,
+  size: "sm" | "md" | "lg",
   sticky?: boolean,
   verticalBorder?: boolean,
-} & GlobalProps
+}
 
 const Table = (props: TableProps) => {
   const {
@@ -56,29 +56,29 @@ const Table = (props: TableProps) => {
 
   return (
     <table
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(
-          'pb_table',
-          `table-${size}`,
-          `table-responsive-${responsive}`,
-          {
-            'table-card': container,
-            'table-dark': dark,
-            'data_table': dataTable,
-            'single-line': singleLine,
-            'no-hover': disableHover,
-            'sticky-header': sticky,
-          },
-          globalProps(props),
-          tableCollapseCss,
-          verticalBorderCss,
-          className
-        )}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classnames(
+        'pb_table',
+        `table-${size}`,
+        `table-responsive-${responsive}`,
+        {
+          'table-card': container,
+          'table-dark': dark,
+          'data_table': dataTable,
+          'single-line': singleLine,
+          'no-hover': disableHover,
+          'sticky-header': sticky,
+        },
+        globalProps(props),
+        tableCollapseCss,
+        verticalBorderCss,
+        className
+      )}
+      id={id}
     >
-        {children}
+      {children}
     </table>
   )
 }

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

@@ -148,7 +148,7 @@
     .placeholder {
       position: absolute;
       margin-right: 2px;
-      margin-left: 10px;
+      margin-left: 2px;
       top: 50%;
       transform: translateY(-50%);
       box-sizing: border-box;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -73,10 +73,8 @@ const TypeaheadWithHighlight = (props) => {
     Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
-    SingleValue: ({ ...props }) => (
-      <components.SingleValue {...props}>
-        <span>{props.data.name}</span>
-      </components.SingleValue>
+    SingleValue: ({ data }: any) => (
+      <span>{data.name}</span>
     )
   }
 

data/app/pb_kits/playbook/playbook-doc.js

@@ -4,7 +4,6 @@ import WebpackerReact from 'webpacker-react'
 
 // KIT EXAMPLES
 import 'pb_form/pb_form_validation'
-import * as AdvancedTable from 'pb_advanced_table/docs'
 import * as Avatar from 'pb_avatar/docs'
 import * as AvatarActionButton from 'pb_avatar_action_button/docs'
 import * as Background from 'pb_background/docs'
@@ -106,7 +105,6 @@ import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
 WebpackerReact.registerComponents({
-  ...AdvancedTable,
   ...Avatar,
   ...AvatarActionButton,
   ...Background,

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -17,7 +17,7 @@ type AlignContent = {
 }
 
 type AlignItems = {
-  alignItems?: Alignment | ("flexStart" | "flexEnd" | "stretch" | "baseline")
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 
 type AlignSelf = {

data/dist/menu.yml

@@ -43,9 +43,6 @@ kits:
       - name: "table"
         platforms: *web
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. 
-      - name: "advanced_table"
-        platforms: *react_only
-        description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting. 
       - name: "list"
         platforms: *web
         description: Lists display a vertical set of related content.
@@ -357,4 +354,4 @@ kits:
         description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.