playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, forwardRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -7,12 +7,9 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { cloneDeep } from "../utilities/object";
-
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
-import Body from "../pb_body/_body";
-import Caption from "../pb_caption/_caption";
+import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 
@@ -26,29 +23,18 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
-interface MultiLevelSelectComponent
-  extends React.ForwardRefExoticComponent<
-    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
-  > {
-  Options: typeof MultiLevelSelectOptions;
-}
-
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
   disabled?: boolean
-  error?: string
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
-  label?: string
   name?: string
-  required?: boolean
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
-  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
@@ -56,23 +42,19 @@ type MultiLevelSelectProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
-const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
+const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
     aria = {},
     className,
     data = {},
     disabled = false,
-    error,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
     name,
-    label,
-    required = false,
     returnAllSelected = false,
     treeData,
-    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
@@ -86,7 +68,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
-    error && "error",
     globalProps(props),
     className
   );
@@ -123,9 +104,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
       return;
     }
     return tree.map((item: { [key: string]: any }) => {
-      if (!item.disabled) {
-        item.checked = check;
-      }
+      item.checked = check;
       item.children = modifyRecursive(item.children, check);
       return item;
     });
@@ -136,16 +115,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     treeData: { [key: string]: any }[],
     selectedIds: string[],
     parent_id: string | null = null,
-    depth = 0,
-    parentDisabled = false
+    depth = 0
   ) => {
     if (!Array.isArray(treeData)) {
       return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
-      // An item is disabled if it is explicitly set as disabled or if its parent is disabled
-      const isDisabled = item.disabled || (parentDisabled && !returnAllSelected);
-
       const newItem = {
         ...item,
         checked: Boolean(
@@ -153,7 +128,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         ),
         parent_id,
         depth,
-        disabled: isDisabled,
       };
       if (newItem.children && newItem.children.length > 0) {
         const children =
@@ -164,8 +138,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
           children,
           selectedIds,
           newItem.id,
-          depth + 1,
-          isDisabled
+          depth + 1
         );
       }
       return newItem;
@@ -262,9 +235,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     return tree.map((item: any) => {
       if (item.id != id) item.children = modifyValue(id, item.children, check);
       else {
-        if (!item.disabled) {
-          item.checked = check;
-        }
+        item.checked = check;
+
         if (variant === "single") {
           // Single select: no children should be checked
           item.children = modifyRecursive(item.children, !check);
@@ -315,10 +287,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
-      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
-      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -344,10 +314,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
-      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
-      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -380,7 +348,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     setIsDropdownClosed(true);
 
     onSelect(selectedItem);
-    onChange({ target: { name, value: selectedItem } });
   };
 
   // Single select: reset the tree state upon typing
@@ -422,12 +389,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
+      (child: any) => child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
+        if (child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -449,12 +416,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         className={classes}
         id={id}
     >
-      {label &&
-        <Caption
-            marginBottom="xs"
-            text={label}
-        />
-      }
       <MultiLevelSelectContext.Provider value={{
           variant,
           inputName,
@@ -478,7 +439,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
-                      required={required}
                       type="hidden"
                       value={selectedItem.id}
                   />
@@ -493,20 +453,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
-                          required={required}
-                          type="hidden"
-                          value={item.id}
-                      />
-                    ))
-                  : null}
-
-                {!returnAllSelected
-                  ? defaultReturn.map((item) => (
-                      <input
-                          disabled={disabled}
-                          key={item.id} 
-                          name={`${name}[]`}
-                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -567,7 +513,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       } selected`
                     : "Start typing..."
                 }
-                required={required}
                 value={singleSelectedItem.value || filterItem}
             />
           </div>
@@ -600,18 +545,10 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         </div>
       </div>
       </MultiLevelSelectContext.Provider>
-      {error &&
-          <Body
-              dark={props.dark}
-              status="negative"
-              text={error}
-          />
-        }
     </div>
   );
-}) as MultiLevelSelectComponent;
+};
 
-MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 
 export default MultiLevelSelect;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb

@@ -66,7 +66,7 @@
 
 <%= pb_rails("multi_level_select", props: {
     disabled: true,
-    id: "multi-level-select-disabled-rails",
+    id: "multi-level-select-default-rails",
     name: "my_array",
     tree_data: treeData
 }) %>

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

@@ -8,17 +8,10 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
-  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_disabled: Disabled
 
   react:
   - multi_level_select_default: Default
-  - multi_level_select_react_hook: React Hook
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
@@ -26,10 +19,4 @@ examples:
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_with_children: Checkboxes With Children
   - multi_level_select_with_children_with_radios: Single Select With Children
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
-  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_disabled: Disabled

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

@@ -7,10 +7,3 @@ export { default as MultiLevelSelectColor } from './_multi_level_select_color.js
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
-export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'
-export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
-export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
-export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
-export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
-export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -26,12 +26,6 @@ module Playbook
                      default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :error, type: Playbook::Props::String,
-                   default: ""
-      prop :label, type: Playbook::Props::String,
-                   default: ""
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -39,18 +33,14 @@ module Playbook
 
       def multi_level_select_options
         {
-          data: data,
           disabled: disabled,
-          error: error,
           id: id,
           inputDisplay: input_display,
           name: name,
-          label: label,
           treeData: tree_data,
-          required: required,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          inputName: input_name,
+          input_name: input_name,
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,

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

@@ -118,7 +118,6 @@ const classes = classnames(
                     >
                         <input
                             checked={item.checked}
-                            disabled={item.disabled}
                             name={item.label}
                             onChange={(e) => {
                               handledropdownItemClick(e, !item.checked);

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx

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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx

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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import MultipleUsers from '../../pb_multiple_users/_multiple_users'
+import { Body, MultipleUsers } from 'playbook-ui'
 
 const MultipleUsersSize = (props) => {
   return (

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

@@ -42,9 +42,4 @@
       font-weight: $regular;
     }
   }
-
-  [class*="pb_nav_list_kit_item"],
-  [class*="pb_nav_list_item"] {
-    &:hover { cursor: pointer; }
-  }
 }

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -95,13 +95,11 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_right")
-    expect(icon).toBeInTheDocument()
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
 })
 
 test('should have a left icon', () => {
-    render(<NavDefault iconLeft="angle-up" />)
+    render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
-    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
-    expect(icon).toBeInTheDocument()
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
 })

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

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNav = (props) => {
   return (

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

@@ -1,8 +1,5 @@
 import React from "react"
-
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
+import { Nav, NavItem, useCollapsible } from "playbook-ui"
 
 const CollapsibleNavCustom = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

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

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNavItemSpacing = (props) => {
   return (

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

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNavNoIcon = (props) => {
   return (

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

@@ -1,6 +1,5 @@
 import React from "react"
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from "playbook-ui"
 
 const CollapsibleNavWithAllOptions = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

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

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const NavWithFontControl = (props) => {
   return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Table from '../../pb_table/_table'
-
+import {
+    Overlay,
+    Table,
+} from 'playbook-ui'
 
 const TableExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx

@@ -1,9 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from "react";
-
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import Table from '../../pb_table/_table'
+import { Overlay, Table, Button } from "playbook-ui";
 
 const TableExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -1,8 +1,10 @@
 import React, { forwardRef } from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
     return (

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import Table from '../../pb_table/_table'
-import Pagination from '../../pb_pagination/_pagination'
+import { Table, Pagination } from 'playbook-ui'
 
 
 import { data } from "./data";

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { Caption, Passphrase, ProgressSimple } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseBreached = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx

@@ -1,9 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import {Body, Caption, Passphrase, ProgressSimple} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseCommon = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
+import {Body, Passphrase} from 'playbook-ui'
 
 const PassphraseConfirmation = (props) => {
   const [input, setInput] = useState('')

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -1,11 +1,6 @@
 import React, { useState } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
-import Caption from '../../pb_caption/_caption'
-import TextInput from '../../pb_text_input/_text_input'
-
+import { Body, Caption, Passphrase, ProgressSimple, TextInput } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx

@@ -1,11 +1,7 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
 
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
-import TextInput from '../../pb_text_input/_text_input'
-
+import { Caption, Passphrase, ProgressSimple, TextInput} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseStrengthChange = (props) => {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -23,7 +23,6 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  hiddenInputs?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   initialCountry?: string,
@@ -73,7 +72,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
-    hiddenInputs = false,
     htmlOptions = {},
     id = "",
     initialCountry = "",
@@ -245,10 +243,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
-      hiddenInput: hiddenInputs ? () => ({
-        phone: `${name}_full`,
-        country: `${name}_country_code`,
-      }) : null,
     })
 
     itiRef.current = telInputInit;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-
-import Body from '../../pb_body/_body'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Body, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputAccessInputElement = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx

@@ -1,7 +1,5 @@
 import React, { useRef } from 'react'
-
-import Button from '../../pb_button/_button'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Button, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputClearField = (props) => {
     // 1. Create a ref - this accesses the kit's input element.