playbook_ui 14.9.0.pre.alpha.PLAY16264952 → 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { Table, Background, Icon } from 'playbook-ui'
-
-const TableWithCollapsibleWithNestedRows = (props) => {
-
-  const Content = () => {
-    return (
-      <Table 
-          borderRadius="none"
-          container={false}
-          size="sm" 
-          {...props}
-      >
-      <Background tag="tr" 
-          {...props}
-      >
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-      </Background>
-      </Table>
-    );
-  };
-
-    return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-          <Table.Header>{''}</Table.Header>
-        </Table.Row>
-
-      </Table.Head>
-      <Table.Body>
-        <Table.Row collapsible 
-            collapsibleContent={<Content/>}
-            collapsibleSideHighlight={false}
-        >
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
-            <Icon
-                color="primary"
-                fixedWidth
-                icon="chevron-down"
-            />}
-          </Table.Cell>
-
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithCollapsibleWithNestedRows

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md

@@ -1,3 +0,0 @@
-The `collapsibleContent` can display any content, including nested Table Rows. 
-
-Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default. 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx

@@ -1,120 +0,0 @@
-import React from 'react'
-import {Pill, Background, Table, Icon} from "playbook-ui"
-
-const TableWithCollapsibleWithNestedTable = (props) => {
-
-  const Content = () => {
-    return (
-        <Table 
-            borderRadius="none"
-            container={false} 
-            size="sm"
-            {...props}
-        >
-          <Table.Head>
-            <Background
-                tag="tr" 
-                {...props}
-            >
-              <Table.Header>{"Alt Header"}</Table.Header>
-              <Table.Header>{"Alt Header"}</Table.Header>
-              <Table.Header>{"Alt Header"}</Table.Header>
-              <Table.Header>{"Alt Header"}</Table.Header>
-            </Background>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>
-                  <Pill text="Pill" 
-                      variant="primary"
-                      {...props}
-                  />
-              </Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>
-                  <Pill text="Pill" 
-                      variant="primary"
-                      {...props}
-                  />
-              </Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>{"Expanded"}</Table.Cell>
-              <Table.Cell>
-                  <Pill text="Pill" 
-                      variant="primary"
-                      {...props}
-                  />
-              </Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-    );
-  };
-
-    return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-          <Table.Header>{''}</Table.Header>
-        </Table.Row>
-
-      </Table.Head>
-      <Table.Body>
-        <Table.Row collapsible 
-            collapsibleContent={<Content/>}
-            collapsibleSideHighlight={false}
-        >
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
-            <Icon
-                color="primary"
-                fixedWidth
-                icon="chevron-down"
-            />}
-          </Table.Cell>
-
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithCollapsibleWithNestedTable

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md

@@ -1 +0,0 @@
-The `collapsibleContent` can also be used to display nested Tables within each Row. 

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -1,35 +0,0 @@
-@import "../../tokens/colors";
-
-.table_collapsible_side_highlight {
-  border-left: 4px solid $primary;
-  &.dark {
-    border-left: 4px solid $active_dark;
-  }
-}
-
-[class^="pb_table"] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    &.table-card {
-      tbody,
-      .pb_table_tbody {
-        tr,
-        .pb_table_tr {
-          &.collapsible_table_row {
-            td,
-            .pb_table_td {
-              border-bottom-color: transparent;
-            }
-            &:hover {
-              td,
-              .pb_table_td {
-                border-bottom-color: darken($border_light, 10%);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,22 +0,0 @@
-import { UseFormRegister, FieldValues, RegisterOptions, Path } from 'react-hook-form'
-
-export type HookFormProps<T extends FieldValues = FieldValues> = {
-  register?: UseFormRegister<T>
-  rules?: RegisterOptions
-  name: Path<T>
-}
-
-export const withHookForm = <T extends FieldValues = FieldValues>(
-  props: HookFormProps<T>
-) => {
-  const { register, name, rules } = props
-  if (!register) return {}
-  
-  const registration = register(name, rules)
-  return {
-    onChange: registration.onChange,
-    onBlur: registration.onBlur,
-    ref: registration.ref,
-    name: registration.name,
-  }
-} 

data/app/pb_kits/playbook/utilities/withReactHookForm.tsx

@@ -1,64 +0,0 @@
-import React from "react"
-import {
-  FieldValues,
-  Path,
-  UseFormRegister,
-  RegisterOptions,
-} from "react-hook-form"
-
-export type WithReactHookFormProps<T extends FieldValues> = {
-  name: Path<T>
-  register?: UseFormRegister<T>
-  rules?: Omit<
-    RegisterOptions<T>,
-    "valueAsNumber" | "valueAsDate" | "setValueAs"
-  >
-  disabled?: boolean
-}
-
-function getDisplayName(WrappedComponent: React.ComponentType<any>): string {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
-}
-
-export function withReactHookForm<
-  P extends {
-    onChange?: (...args: any[]) => void
-    onBlur?: (...args: any[]) => void
-    ref?: any
-  },
-  T extends FieldValues = FieldValues
->(WrappedComponent: React.ComponentType<P>) {
-  const WithReactHookFormComponent = React.forwardRef<HTMLElement, P & WithReactHookFormProps<T>>(
-    (props, ref) => {
-      const { register, name, rules, disabled, ...rest } = props
-
-      if (!register) {
-        return (<WrappedComponent {...(rest as P)}
-            ref={ref}
-                />)
-      }
-
-      const fieldRegistration = register(name, rules)
-
-      const fieldProps = {
-        ...rest,
-        ...fieldRegistration,
-        disabled: disabled || (rest as any).disabled,
-        ref: ref || fieldRegistration.ref,
-        onChange: (...args: any[]) => {
-          fieldRegistration.onChange?.(...args)
-          ;(rest as P).onChange?.(...args)
-        },
-        onBlur: (...args: any[]) => {
-          fieldRegistration.onBlur?.(...args)
-          ;(rest as P).onBlur?.(...args)
-        },
-      }
-
-      return <WrappedComponent {...(fieldProps as P)} />
-    }
-  )
-
-  WithReactHookFormComponent.displayName = `WithReactHookForm(${getDisplayName(WrappedComponent)})`
-  return WithReactHookFormComponent
-}