playbook_ui 14.15.0 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6929

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/_date_picker.tsx

@@ -106,41 +106,41 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
-useEffect(() => {
-  datePickerHelper({
-    allowInput,
-    customQuickPickDates,
-    defaultDate,
-    disableDate,
-    disableRange,
-    disableWeekdays,
-    enableTime,
-    format,
-    hideIcon,
-    inLine,
-    maxDate,
-    minDate,
-    mode,
-    onChange,
-    onClose,
-    pickerId,
-    plugins,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    position,
-    positionElement,
-    selectionType,
-    showTimezone,
-    staticPosition,
-    thisRangesEndToday,
-    yearRange,
-    required: false,
-  }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+  useEffect(() => {
+    datePickerHelper({
+      allowInput,
+      customQuickPickDates,
+      defaultDate,
+      disableDate,
+      disableRange,
+      disableWeekdays,
+      enableTime,
+      format,
+      hideIcon,
+      inLine,
+      maxDate,
+      minDate,
+      mode,
+      onChange,
+      onClose,
+      pickerId,
+      plugins,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      position,
+      positionElement,
+      selectionType,
+      showTimezone,
+      staticPosition,
+      thisRangesEndToday,
+      yearRange,
+      required: false,
+    }, scrollContainer)
+  }, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
-  } 
+  }
   delete filteredProps?.position
 
   const classes = classnames(
@@ -221,7 +221,7 @@ useEffect(() => {
             {hideIcon && inLine ?
               <div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
                     id={`${pickerId}-icon-plus`}
                 >
                   <Icon
@@ -230,7 +230,7 @@ useEffect(() => {
                   />
                 </div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -44,7 +44,7 @@
     <% if object.hide_icon && object.inline %>
       <!-- Plus Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
           id="<%= object.picker_id %>-icon-plus"
       >
         <%= pb_rails("icon", props: {
@@ -55,7 +55,7 @@
 
       <!-- Angle Down Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
           id="<%= object.picker_id %>-angle-down"
       >
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -174,6 +174,21 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       yearInput.value = fp.currentYear?.toString()
   }
 
+  const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
+    const inputEl = fp.input
+
+    if (inputEl) {
+      const inlineDatePickerElem = inputEl.closest('.inline-date-picker')
+      if (inlineDatePickerElem) {
+        if (selectedDates && selectedDates.length > 0) {
+          inlineDatePickerElem.classList.add('show-angle-down-icon')
+        } else {
+          inlineDatePickerElem.classList.remove('show-angle-down-icon')
+        }
+      }
+    }
+  }
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -204,6 +219,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
+      handleDatePickerChange(fp, selectedDates)
       yearChangeHook(fp)
       onChange(dateStr, selectedDates)
     }],

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_inline.html.erb

@@ -4,14 +4,3 @@
   inline: true,
   picker_id: "date-picker-inline"
 }) %>
-
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", (event) => {
-    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
-    <!-- Display the angle-down icon when a date has been selected -->
-    const showAngleDownHandler = () => {
-      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
-    }
-    fpInline.config.onChange.push(showAngleDownHandler)
-  })
-<% end %>

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

@@ -3,19 +3,12 @@ import React from 'react'
 import DatePicker from '../_date_picker'
 
 const DatePickerInline = (props) => {
-  const showAngleDownHandler = (dateSelected) => {
-    if (dateSelected) {
-      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
-    }
-  }
-
   return (
     <div>
       <DatePicker
           className="inline-date-picker"
           hideIcon
           inLine
-          onChange={showAngleDownHandler}
           pickerId="date-picker-inline"
           {...props}
       />

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_picker/sass_partials/_inline_styles.scss

@@ -14,12 +14,12 @@
       opacity: 1;
     }
     &:not(:hover) {
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           color: $slate;
           display: inline-block;
@@ -33,12 +33,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $primary;
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $primary;
@@ -47,32 +47,34 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        #date-picker-inline-angle-down {
+        .date-picker-inline-angle-down.cal_icon_wrapper {
           svg {
             display: inline-block;
             color: $text_lt_light;
           }
         }
-        #date-picker-inline-icon-plus {
+        .date-picker-inline-icon-plus.cal_icon_wrapper {
           svg {
             display: none;
           }
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $primary;
         }
       }
     }
-    #date-picker-inline,
-    #date-picker-inline .active {
+    .date_picker_input.flatpickr-input,
+    .date_picker_input.flatpickr-input .active,
+    .text_input.flatpickr-input,
+    .text_input.flatpickr-input .active      {
       border: none;
       padding: 5px 5px 5px 10px;
       background-color: #FFF;
@@ -82,8 +84,8 @@
         box-shadow: none;
       }
     }
-    #date-picker-inline-angle-down,
-    #date-picker-inline-icon-plus {
+    .date-picker-inline-angle-down.cal_icon_wrapper,
+    .date-picker-inline-icon-plus.cal_icon_wrapper {
       height: 33px;
       border: none;
     }
@@ -96,12 +98,12 @@
 [class^=pb_date_picker_kit].dark {
   &.inline-date-picker {
     &:not(:hover) {
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
@@ -115,12 +117,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $white;
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
@@ -129,32 +131,34 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        #date-picker-inline-angle-down {
+        .date-picker-inline-angle-down.cal_icon_wrapper {
           svg {
             display: inline-block;
             color: $white;
           }
         }
-        #date-picker-inline-icon-plus {
+        .date-picker-inline-icon-plus.cal_icon_wrapper {
           svg {
             display: none;
           }
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
         }
       }
     }
-    #date-picker-inline,
-    #date-picker-inline .active {
+    .date_picker_input.flatpickr-input,
+    .date_picker_input.flatpickr-input .active,
+    .text_input.flatpickr-input,
+    .text_input.flatpickr-input .active {
       background-color: rgba($white,.10);
       border: none;
       padding: 5px 5px 5px 10px;
@@ -164,8 +168,8 @@
         box-shadow: none;
       }
     }
-    #date-picker-inline-angle-down,
-    #date-picker-inline-icon-plus {
+    .date-picker-inline-angle-down.cal_icon_wrapper,
+    .date-picker-inline-icon-plus.cal_icon_wrapper {
       height: 33px;
       border: none;
     }

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>