playbook_ui 14.15.0 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

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

@@ -1,6 +1,9 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import { Button, Checkbox, Flex, Body } from "playbook-ui"
+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({

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

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)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.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 CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { Collapsible, useCollapsible, Button } from 'playbook-ui'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import Button from '../../pb_button/_button'
 
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from 'playbook-ui'
+import Contact from "../../pb_contact/_contact"
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from 'playbook-ui'
+import Contact from "../../pb_contact/_contact"
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { CopyButton, Textarea } from 'playbook-ui'
+
+import CopyButton from '../../pb_copy_button/_copy_button'
+import Textarea from '../../pb_textarea/_textarea'
 
 const CopyButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
+
+import CopyButton from '../../pb_copy_button/_copy_button'
+import Body from '../../pb_body/_body'
+import TextInput from '../../pb_text_input/_text_input'
+import Textarea from '../../pb_textarea/_textarea'
 
 const CopyButtonFrom = (props) => {
   const [text, setText] = useState("Copy this text input text")

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Currency } from 'playbook-ui'
+import Currency from "../../pb_currency/_currency"
 
 const CurrencyNullDisplay = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Currency, Title } from 'playbook-ui'
+
+import Currency from '../../pb_currency/_currency'
+import Title from '../../pb_title/_title'
 
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Date as FormattedDate } from 'playbook-ui'
+
+import FormattedDate from '../../pb_date/_date'
 
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
+
+import FormattedDate from '../../pb_date/_date'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
 
 const DateDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
+
+import Caption from '../../pb_caption/_caption'
+import FormattedDate from '../../pb_date/_date'
+import Title from '../../pb_title/_title'
 
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Date as FormattedDate } from 'playbook-ui'
+
+import FormattedDate from '../../pb_date/_date'
 
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md

@@ -1 +1,3 @@
-You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
+
+Use `window.addEventListener("DOMContentLoaded", () => {})`, not `document.addEventListener("DOMContentLoaded", () => {})`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "date-picker-onchange",
+  margin_bottom: "lg"
+}) %>
+<%= pb_rails("caption", props: { text: "Date Object" }) %>
+<%= pb_rails("body", props: {
+  label: "Date Object",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onchange-object",
+}) %>
+<%= pb_rails("caption", props: { text: "Date String" }) %>
+<%= pb_rails("body", props: {
+  label: "Date String",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onchange-string",
+}) %>
+
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-onchange")._flatpickr
+
+    <%# Define Hook %>
+    const changeHook = (selectedDates, dateStr) => {
+      const object = document.querySelector('#date-picker-onchange-object')
+      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
+
+      const string = document.querySelector('#date-picker-onchange-string')
+      string.textContent = dateStr
+    }
+    
+    <%# Push one or more hooks to onChange config array %>
+    fp.config.onChange.push(changeHook)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { DatePicker, LabelValue } from 'playbook-ui'
+
+import DatePicker from '../../pb_date_picker/_date_picker'
+import LabelValue from '../../pb_label_value/_label_value'
 
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "date-picker-onclose",
+  margin_bottom: "lg"
+}) %>
+<%= pb_rails("caption", props: { text: "Date Object" }) %>
+<%= pb_rails("body", props: {
+  label: "Date Object",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onclose-object",
+}) %>
+<%= pb_rails("caption", props: { text: "Date String" }) %>
+<%= pb_rails("body", props: {
+  label: "Date String",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onclose-string",
+}) %>
+
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-onclose")._flatpickr
+
+    <%# Define Hook %>
+    const closeHook = (selectedDates, dateStr) => {
+      const object = document.querySelector('#date-picker-onclose-object')
+      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
+
+      const string = document.querySelector('#date-picker-onclose-string')
+      string.textContent = dateStr
+    }
+    
+    <%# Push one or more hooks to onClose config array %>
+    fp.config.onClose.push(closeHook)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import { DatePicker,LabelValue } from 'playbook-ui'
+
+import DatePicker from '../../pb_date_picker/_date_picker'
+import LabelValue from '../../pb_label_value/_label_value'
 
 
 const DatePickerOnClose = (props) => {

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

@@ -7,6 +7,8 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
+  - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
   # - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

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

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

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

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

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

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

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

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

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

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

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

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,4 +1,8 @@
-<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
+<div
+    class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
+    data-pb-dialog-wrapper="true"
+    data-overlay-click= <%= object.overlay_close %>
+>
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
@@ -33,8 +37,3 @@
             <%= content %>
     <% end %>
 </div>
-
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => dialogHelper())
-    window.addEventListener("turbo:frame-load", () => dialogHelper())
-<% end %>

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,3 +1,5 @@
+// Three places in Nitro depend on this function inside the window scope.
+// We will keep this file until we remove this dependency from Nitro.
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
-import {
-  Body,
-  Button,
-  Caption,
-  Dialog,
-  RichTextEditor,
-  Typeahead,
-} from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import Caption from '../../pb_caption/_caption'
+import Dialog from '../../pb_dialog/_dialog'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+
 
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-import {
-  Body,
-  Button,
-  Caption,
-  Dialog,
-  Flex,
-  RichTextEditor,
-  Typeahead,
-} from "playbook-ui";
+
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
+import Caption from '../../pb_caption/_caption'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-import {
-  Body,
-  Button,
-  Caption,
-  Dialog,
-  Flex,
-  RichTextEditor,
-  Typeahead,
-} from "playbook-ui";
+
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
+import Caption from '../../pb_caption/_caption'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogLoading = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogScrollable = () => {
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -1,6 +1,8 @@
 
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex} from "playbook-ui"
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -1,7 +1,10 @@
 /* eslint-disable react/jsx-handler-names */
 
 import React, { useState } from "react"
-import { Button, Dialog, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)