playbook_ui 14.15.0 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6929

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

@@ -8,10 +8,17 @@ 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_disabled: Disabled
+  - 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)
 
   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
@@ -19,4 +26,10 @@ 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_disabled: Disabled
+  - 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)

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

@@ -7,3 +7,10 @@ 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/index.js

@@ -0,0 +1,105 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const MULTI_LEVEL_SELECT_SELECTOR = "[data-multi_level_select_form]";
+
+export default class PbMultiLevelSelect extends PbEnhancedElement {
+  static get selector() {
+    return MULTI_LEVEL_SELECT_SELECTOR;
+  }
+
+  get target() {
+    return this.element.querySelector(".pb_body_kit_negative");
+  }
+
+  connect() {
+    this.addEventListeners();
+    this.observeHiddenInputs();
+    this.observeRogueErrorInsideInnerContainer();
+  }
+
+  addEventListeners() {
+    const inputElement = this.element.querySelector("input");
+
+    inputElement.addEventListener("invalid", () => {
+      this.handleErrorLabel(300);
+    });
+    inputElement.addEventListener("blur", () => {
+      this.justBlurred = true;
+
+      setTimeout(() => {
+        this.justBlurred = false;
+      }, 300);
+    });
+  }
+
+  handleErrorLabel(delay) {
+    setTimeout(() => {
+      const errorLabelElement = this.target;
+      const wrapper = this.element.querySelector(".wrapper");
+
+      if (errorLabelElement) {
+        errorLabelElement.remove();
+        if (wrapper) {
+          if (wrapper.querySelector(".pb_body_kit_negative")) {
+            wrapper.querySelector(".pb_body_kit_negative").remove();
+          }
+          wrapper.appendChild(errorLabelElement);
+        }
+        this.element.classList.add("error");
+      } else {
+        this.handleErrorLabel(100);
+      }
+    }, delay);
+  }
+
+  observeHiddenInputs() {
+    const container = this.element.querySelector(".input_inner_container");
+    if (!container) return;
+
+    this.mutationObserver = new MutationObserver(() => {
+      const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
+      if (hiddenInputs.length > 0) {
+        // At least one hidden input exists, so clear the error
+        this.clearError();
+      }
+    });
+
+    this.mutationObserver.observe(container, {
+      childList: true,
+    });
+  }
+
+  observeRogueErrorInsideInnerContainer() {
+    const container = this.element.querySelector(".input_inner_container");
+
+    this.rogueErrorObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (
+            node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains("pb_body_kit_negative")
+          ) {
+            if (this.justBlurred) {
+              node.remove();
+            }
+          }
+        }
+      }
+    });
+
+    this.rogueErrorObserver.observe(container, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  clearError(e) {
+    const errorLabelElement = this.target;
+
+    if (errorLabelElement) {
+      errorLabelElement.remove();
+      this.element.classList.remove("error");
+      this.element.querySelector("input").value = e.detail.value;
+    }
+  }
+}

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

@@ -26,6 +26,12 @@ 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")
@@ -33,14 +39,18 @@ 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,
-          input_name: input_name,
+          inputName: input_name,
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,

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

@@ -118,6 +118,7 @@ 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 'playbook-ui'
+import MultipleUsers from '../../pb_multiple_users/_multiple_users'
 
 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 'playbook-ui'
+import MultipleUsers from '../../pb_multiple_users/_multiple_users'
 
 const MultipleUsersReverse = (props) => {
   return (

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { Nav, NavItem } from 'playbook-ui'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
 
 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,
-    Table,
-} from 'playbook-ui'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Table from '../../pb_table/_table'
+
 
 const TableExample = () => {
     return (

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

@@ -1,10 +1,9 @@
 import React from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
+
+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'
 
 const InlineCardsExample = () => {
     return (

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

@@ -1,10 +1,8 @@
 import React from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
+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'
 
 const InlineCardsExample = () => {
     return (

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

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

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

@@ -1,10 +1,8 @@
 import React, { forwardRef } from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
+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'
 
 const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
     return (

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

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

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

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

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

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react'
 
-import {Body, Caption, Passphrase, ProgressSimple} from 'playbook-ui'
+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 zxcvbn from 'zxcvbn'
 
 const PassphraseCommon = (props) => {

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

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

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

@@ -1,6 +1,11 @@
 import React, { useState } from 'react'
 
-import { Body, Caption, Passphrase, ProgressSimple, TextInput } from 'playbook-ui'
+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 zxcvbn from 'zxcvbn'
 
 

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

@@ -1,7 +1,11 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
 
-import { Caption, Passphrase, ProgressSimple, TextInput} from 'playbook-ui'
+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 zxcvbn from 'zxcvbn'
 
 const PassphraseStrengthChange = (props) => {

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

@@ -23,6 +23,7 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
+  hiddenInputs?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   initialCountry?: string,
@@ -72,6 +73,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
+    hiddenInputs = false,
     htmlOptions = {},
     id = "",
     initialCountry = "",
@@ -243,6 +245,10 @@ 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,5 +1,7 @@
 import React, { useEffect, useRef } from 'react'
-import { Body, PhoneNumberInput } from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 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,5 +1,7 @@
 import React, { useRef } from 'react'
-import { Button, PhoneNumberInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 const PhoneNumberInputClearField = (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_default.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("phone_number_input", props: {
-    id: "hello"
+    id: "hello",
 }) %>

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

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

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

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { PhoneNumberInput, Body } from "playbook-ui";
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 const PhoneNumberInputFormat = (props) => {
     const [phoneNumber, setPhoneNumber] = useState("");

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

@@ -0,0 +1,5 @@
+<%= pb_rails("phone_number_input", props: {
+    hidden_inputs: true,
+    id: "hidden_inputs",
+    name: "hidden_inputs",
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md

@@ -0,0 +1 @@
+The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.

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

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

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

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

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

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

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

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Button, FixedConfirmationToast, PhoneNumberInput } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");

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

@@ -16,4 +16,6 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
-  - phone_number_input_format: Format as You Type
+  - phone_number_input_format: Format as You Type
+  - phone_number_input_hidden_inputs: Hidden Inputs
+  

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -23,6 +23,8 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
+      prop :hidden_inputs, type: Playbook::Props::Boolean,
+                           default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -35,6 +37,7 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
+          hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,
           name: name,

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

@@ -84,7 +84,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props;
 
   const items = globalProps(props).split(' ')
-  const filteredItems = items.filter(item => !item.includes('min_width'))
+  const filteredItems = items.filter(item => !item.includes('min-width') && !item.includes('width'))
   const filteredGlobalProps = filteredItems.join(' ')
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps

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

@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
-import {
-  Body,
-  Button,
-  CircleIconButton,
-  Flex,
-  PbReactPopover,
-} from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
 
 const PopoverActionableContent = (props) => {
   const [showPopover, setShowPopover] = useState(false)

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

@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
-import {
-  Button,
-  Flex,
-  PbReactPopover,
-} from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
 
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)

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

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
-import {
-  Body,
-  CircleIconButton,
-  Flex,
-  PbReactPopover,
-} from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
 
 const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)