playbook_ui 13.34.0 → 13.34.1.pre.alpha.PLAY14633399

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -6,7 +6,7 @@ import {
   ListItem,
   PbReactPopover,
   Flex,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -4,7 +4,7 @@ import {
   Button,
   PbReactPopover,
   Title,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -3,7 +3,7 @@ import {
   Body,
   Button,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen, fireEvent } from "../utilities/test-utils";
-import { Button, PbReactPopover } from "..";
+import { Button, PbReactPopover } from "playbook-ui";
 
 const testId = "popover-kit";
 

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -21,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: $pb_progress_simple_height/2;
+  border-radius: calc($pb_progress_simple_height/2);
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -42,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: $pb_progress_simple_height/2;
+    border-radius: calc($pb_progress_simple_height/2);
     background: $primary;
   }
 

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleAlign = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, ProgressSimple } from '../..'
+import { Flex, ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleFlex = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleMuted = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleValue = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleVariants = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleValue = () => {
   return (

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Radio } from '../../'
+import { Flex, Radio } from 'playbook-ui'
 
 const RadioAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/_dedupe_trix_toolbar.js

@@ -0,0 +1,6 @@
+if (window?.customElements) {
+  const customElemDef = window.customElements.define
+  window.customElements.define = (name, cl, conf) => {
+    if (!customElements.get(name)) customElemDef.call(window.customElements, name, cl, conf)
+  }
+}

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -106,7 +106,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: $space_xs / 2;
+      margin: calc($space_xs / 2);
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -116,7 +116,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: $space_xs / 2;
+      padding: calc($space_xs / 2);
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
+import { TrixEditor } from 'react-trix'
+
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
-try {
-  const Trix = require('trix')
-  Trix.config.textAttributes.inlineCode = {
-    tagName: 'code',
-    inheritable: true,
-  }
-} catch (_e) { /* do nothing */ }
+import Trix from 'trix'
+import './_dedupe_trix_toolbar'
+
+Trix.config.textAttributes.inlineCode = {
+  tagName: 'code',
+  inheritable: true,
+}
 
-import { TrixEditor } from "react-trix"
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../..'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../..'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -3,7 +3,7 @@ import {
   Button,
   Card,
   RichTextEditor,
-} from '../../'
+} from 'playbook-ui'
 
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
@@ -21,7 +21,7 @@ const RichTextEditorPreview = (props) => {
           onChange={handleChange}
           {...props}
       />
-      <If condition={showPreview}>
+      {showPreview && (
         <Card marginTop="md">
           <div
               className="trix-content"
@@ -30,9 +30,10 @@ const RichTextEditorPreview = (props) => {
               id="preview-content"
           />
         </Card>
-        <Else />
+      )}
+      {!showPreview && (
         <div />
-      </If>
+      )}
       <Button
           id="preview-button"
           marginTop="md"

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor, Select } from '../../'
+import { RichTextEditor, Select } from 'playbook-ui'
 import { changelog, release } from './templates.js'
 
 const RichTextEditorTemplates = (props) => {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
-import { RichTextEditor } from "../..";
+import { RichTextEditor } from "playbook-ui";
 
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";

data/app/pb_kits/playbook/pb_rich_text_editor/types.d.ts

@@ -0,0 +1 @@
+declare module '@haxtheweb/deduping-fix';

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator, Card, Caption } from '../../'
+import { SectionSeparator, Card, Caption } from 'playbook-ui'
 
 const children = (
     <Card

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

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

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
       > select:first-child {
         border-color: $error;

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectError = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInline = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInlineCompact = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInlineShowArrow = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,7 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent; 
+    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
+      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -($pb_selectable_card_indicator_size/2);
-      right: -($pb_selectable_card_indicator_size/2);
+      top: -(calc($pb_selectable_card_indicator_size/2));
+      right: -(calc($pb_selectable_card_indicator_size/2));
       opacity: 0;
     }
   }

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, {useRef} from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Body, SelectableCard, Title } from '../..'
+import { Body, SelectableCard, Title } from 'playbook-ui'
 
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { render, screen } from '../utilities/test-utils'
 import SelectableCard from './_selectable_card'
-import { Body, Title, Image } from '../'
+import { Body, Title, Image } from 'playbook-ui'
 
 const SelectableCardMultiSelect = () => {
   const [selected, setSelected] = useState(true)

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

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

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

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

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

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

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

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

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

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

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

@@ -33,7 +33,7 @@ type TableProps = {
     verticalBorder?: boolean,
 } & GlobalProps
 
-const Table = (props: TableProps) => {
+const Table = (props: TableProps): React.ReactElement => {
     const {
         aria = {},
         children,

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

@@ -1,19 +1,19 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector() {
+  static get selector(): string {
     return '.table-responsive-collapse'
   }
 
-  connect() {
+  connect(): void {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      let headers: string[] = [];
+      const headers: string[] = [];
       [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        let colSpan = header.colSpan
+        const colSpan = header.colSpan
         for (let i = 0; i < colSpan; i++) {
           headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableBody = (props: TableBodyPropTypes) => {
+const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -18,7 +18,7 @@ type TableCellPropTypes = {
   text?: string
 };
 
-const TableCell = (props: TableCellPropTypes) => {
+const TableCell = (props: TableCellPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableHead = (props: TableHeadPropTypes) => {
+const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -18,7 +18,7 @@ type TableHeaderPropTypes = {
   text?: string;
 };
 
-const TableHeader = (props: TableHeaderPropTypes) => {
+const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -19,7 +19,7 @@ type TableRowPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableRow = (props: TableRowPropTypes) => {
+const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React from "react";
 import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -101,7 +101,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
       input,
       .text_input {

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -107,7 +107,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-    />)
+     />)
   )
 
   const addOnInput = (

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
-  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',
@@ -92,9 +92,9 @@ const TextInputDefault = (props) => {
           {...props}
       />
 
-      <If condition={firstName !== ''}>
-        {`First name is: ${firstName}`}
-      </If>
+      {firstName !== '' && (
+        <React.Fragment>{`First name is: ${firstName}`}</React.Fragment>
+      )}
     </div>
   )
 }