playbook_ui 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

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

@@ -5,6 +5,7 @@ examples:
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
+  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -30,8 +31,10 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_inline_editing: Inline Cell Editing

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

@@ -19,4 +19,6 @@ export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_tab
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
-export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
+export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 
 const AvatarBadgeComponentOverlay = (props) => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 
 const AvatarCircleIconComponentOverlay = (props) => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 
 const AvatarDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 
 const AvatarDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 
 const AvatarNoImage = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 
 const AvatarStatus = (props) => {
   return (

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import Background from '../../pb_background/_background'
+import Flex from "../../pb_flex/_flex"
 
 const BackgroundCategory = (props) => (
   <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
+import Background from '../../pb_background/_background'
 
 const BackgroundGradient = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react'
-import { Background } from 'playbook-ui'
-import { Card, Flex, FlexItem, Select, Title } from 'playbook-ui'
+import Background from "../../pb_background/_background"
+import Card from "../../pb_card/_card"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Select from "../../pb_select/_select"
+import Title from "../../pb_title/_title"
 
 const BackgroundImage = (props) => {
   const [transition, setTransition] = useState('')

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
+import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment as F } from 'react'
-import { Background } from 'playbook-ui'
+import Background from '../../pb_background/_background'
 
 const BackgroundSize = (props) => (
   <F>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import Background from '../../pb_background/_background'
+import Flex from "../../pb_flex/_flex"
 
 const BackgroundStatus = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import Background from '../../pb_background/_background'
+import Flex from "../../pb_flex/_flex"
 
 const BackgroundStatusSubtle = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
+import Background from '../../pb_background/_background'
 
 const BackgroundWhite = (props) => (
   <div>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph } from 'playbook-ui'
+import BarGraph from "../../pb_bar_graph/_bar_graph"
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph } from 'playbook-ui'
+import BarGraph from "../../pb_bar_graph/_bar_graph"
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { BarGraph, Title } from 'playbook-ui'
+
+import BarGraph from "../../pb_bar_graph/_bar_graph"
+import Title from "../../pb_title/_title"
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import Body from "../../pb_body/_body"
 
 const BodyBlock = (props) => {
     return (

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import Body from "../../pb_body/_body"
 
 const BodyBlock = (props) => {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import Body from "../../pb_body/_body"
 
 const BodyLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import Body from "../../pb_body/_body"
 
 const BodyStyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import BreadCrumbs from '../_bread_crumbs'
-import { Icon, Title } from 'playbook-ui'
+import Icon from "../../pb_icon/_icon"
+import Title from "../../pb_title/_title"
 import BreadCrumbItem from '../_bread_crumb_item'
 
 const Link = (props) => <BreadCrumbItem {...props} />

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import Button from "../../pb_button/_button"
 
 const ButtonAccessibility = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Button, Pill } from "playbook-ui";
+import Button from '../../pb_button/_button'
+import Pill from '../../pb_pill/_pill'
 
 const ButtonBlockContent = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "playbook-ui"
+import Button from "../../pb_button/_button"
 
 const ButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import Button from "../../pb_button/_button"
 
 const ButtonForm = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import Button from "../../pb_button/_button"
 
 const ButtonFullWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "playbook-ui"
+import Button from "../../pb_button/_button"
 
 const ButtonHover = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import Button from "../../pb_button/_button"
 
 const ButtonIconOptions = (props) => (
     <div>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import Button from "../../pb_button/_button"
 
 const ButtonLink = (props) => (
   <>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import Button from "../../pb_button/_button"
 
 const ButtonLoading = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import { Button } from "playbook-ui"
+import Button from "../../pb_button/_button"
 
 const ButtonReaction = (props) => {
 

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import Button from "../../pb_button/_button"
 
 const ButtonSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Button, ButtonToolbar } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import ButtonToolbar from '../../pb_button_toolbar/_button_toolbar'
 
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Button, ButtonToolbar } from 'playbook-ui'
+import { default as Button } from "../../pb_button/_button"
+import { default as ButtonToolbar } from "../../pb_button_toolbar/_button_toolbar"
 
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import Caption from "../../pb_caption/_caption"
 
 const CaptionBlock = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import Caption from "../../pb_caption/_caption"
 
 const CaptionColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import Caption from "../../pb_caption/_caption"
 
 const CaptionLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react'
-import { get } from 'lodash'
+import { get } from '../utilities/object'
+
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Title from '../../pb_title/_title'
-import { Body } from 'playbook-ui'
+import Body from "../../pb_body/_body"
 import Card from '../_card'
 
 const CardBackground = (props) => {

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, forwardRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +24,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = (props: CheckboxProps): React.ReactElement => {
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   const {
     aria = {},
     checked = false,
@@ -44,7 +44,15 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     value = '',
   } = props
 
-  const checkRef = useRef(null)
+  const internalRef = useRef<HTMLInputElement>(null)
+  const setRefs = (el: HTMLInputElement) => {
+    internalRef.current = el
+    if (typeof ref === 'function') {
+      ref(el)
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
+    }
+  }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -56,9 +64,9 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
   )
 
   useEffect(() => {
-    if (checkRef.current) {
-      checkRef.current.checked = checked
-      checkRef.current.indeterminate = indeterminate
+    if (internalRef.current) {
+      internalRef.current.checked = checked
+      internalRef.current.indeterminate = indeterminate
     }
   }, [indeterminate, checked])
 
@@ -72,7 +80,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
         disabled={disabled}
         name={name}
         onChange={onChange}
-        ref={checkRef}
+        ref={setRefs}
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
@@ -119,6 +127,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
       </Body>
     </label>
   )
-}
+})
 
+Checkbox.displayName = "Checkbox"
 export default Checkbox

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -106,3 +106,19 @@ test('has disabled attribute', () => {
   const input = kit.querySelector('input')
   expect(input).toHaveAttribute('disabled')
 }) 
+
+test('has ref in the input element', () => {
+  const ref = React.createRef()
+    render(
+      <Checkbox
+          data={{ testid: testId }}
+          name="checkbox-name"
+          ref={ref}
+          text="Checkbox"
+          value="check-box value"
+      />
+  )
+
+  expect(ref.current).not.toBeNull()
+  expect(ref.current?.tagName).toBe('INPUT')
+})

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Checkbox } from 'playbook-ui'
+import Checkbox from "../../pb_checkbox/_checkbox"
 
 const CheckboxError = (props) => {
   return (

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Checkbox, Table } from 'playbook-ui'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Table from '../../pb_table/_table'
 
 const CheckboxIndeterminate = (props) => {
   const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+import Button from '../../pb_button/_button'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Flex from '../../pb_flex/_flex'
+import Body from '../../pb_body/_body'
+
+const CheckboxReactHook = () => {
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      Small: false,
+      Medium: false,
+      Large: false,
+    },
+  })
+
+  const [submittedData, setSubmittedData] = useState({
+    Small: false,
+    Medium: false,
+    Large: false,
+  })
+
+  const onSubmit = (data) => {
+    setSubmittedData(data)
+  }
+
+  return (
+    <Flex orientation="row">
+      <Flex align="start"
+          orientation="column"
+          paddingRight="lg"
+      >
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Checkbox padding="xs"
+              text="Small"
+              {...register("Small")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Medium"
+              {...register("Medium")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Large"
+              {...register("Large")}
+          />
+          <br />
+          <Button htmlType="submit"
+              marginTop="sm"
+              text="submit"
+          />
+        </form>
+      </Flex>
+      <Flex align="start"
+          orientation="column"
+      >
+        <Body padding="xs"
+            text={`Small: ${submittedData.Small ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Large: ${submittedData.Large ? "true" : "false"}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md

@@ -0,0 +1 @@
+You can pass react hook props to the checkbox kit.

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

@@ -11,6 +11,7 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
+  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -21,4 +22,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""
-    
+    

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

@@ -1,5 +1,6 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
+export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import CircleChart from '../_circle_chart'
 
-import {Title} from 'playbook-ui'
+import Title from '../../pb_title/_title'
 
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CircleIconButton } from 'playbook-ui'
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
 
 const CircleIconButtonClick = (props) => (
   <div>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import Collapsible from "../../pb_collapsible/_collapsible"
 
 const CollapsibleColor = (props) => (
   <div>

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

@@ -1,6 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import Flex from '../../pb_flex/_flex'
+import Title from '../../pb_title/_title'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)