playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,5 @@
 <%= pb_content_tag(:div,
-    class: object.classname + object.error_class,
-    'data-pb-date-picker' => true,
-    'data-validation-message' => object.validation_message,
-      ) do %>
+    class: object.classname + object.error_class) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -75,8 +75,6 @@ module Playbook
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
-      prop :validation_message, type: Playbook::Props::String,
-                                default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

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

@@ -1,3 +1 @@
-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", () => {})`.
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).

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

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

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

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

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

@@ -7,8 +7,6 @@ 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 '../../pb_date_range_stacked/_date_range_stacked'
+import { DateRangeStacked } from 'playbook-ui'
 
 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 '../../pb_date_year_stacked/_date_year_stacked'
+import { DateYearStacked } from 'playbook-ui'
 
 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 '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 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 '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 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 '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 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 '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 const DetailStyled = (props) => (
   <>

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

@@ -1,8 +1,4 @@
-<div
-    class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
-    data-pb-dialog-wrapper="true"
-    data-overlay-click= <%= object.overlay_close %>
->
+<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" 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 }) %>
@@ -37,3 +33,8 @@
             <%= 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,5 +1,3 @@
-// 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,11 +1,12 @@
 import React, { useState } from 'react'
-
-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'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  RichTextEditor,
+  Typeahead,
+} from 'playbook-ui'
 
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

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

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

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

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-
-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'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

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

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-
-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'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -60,20 +60,6 @@ module Playbook
                                            .gsub("'../..'", "'playbook-ui'")
                                            .gsub(%r{from "../.*}, "from 'playbook-ui'")
                                            .gsub(%r{from '../.*}, "from 'playbook-ui'")
-        stringified_code = stringified_code.gsub(/import\s+(\w+)\s+from\s+['"]playbook-ui['"]/) do
-          "import { #{::Regexp.last_match(1)} } from 'playbook-ui'"
-        end
-        stringified_code = stringified_code.gsub("import { FormattedDate }", "import { Date as FormattedDate }")
-        # Combine separate playbook-ui import statements into one
-        imports = stringified_code.scan(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/)
-        components = imports.flatten.join(", ").split(",").map(&:strip).uniq
-        if components.any?
-          new_import_statement = "import { #{components.join(', ')} } from 'playbook-ui'"
-          stringified_code.gsub!(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/, "")
-          stringified_code = stringified_code.sub(/import\s+React[\s\S]+?\n/, "\\0\n#{new_import_statement}")
-        end
-        # Replace several empty lines with one empty line
-        stringified_code.gsub!(/\n\s*\n{2,}/, "\n\n")
         stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
         if stringified_code.include?("props: { ")
           stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,10 +1,5 @@
 import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-
+import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Badge from '../../pb_badge/_badge'
-import Title from '../../pb_title/_title'
-import Caption from '../../pb_caption/_caption'
-import Card from '../../pb_card/_card'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
+import {
+  Flex,
+  Caption,
+  Card,
+  FlexItem,
+  Badge,
+  Avatar,
+  Title,
+  Body,
+  Draggable,
+  DraggableProvider,
+} from "playbook-ui";
 
 // Initial groups to drag between
 const containers = ["To Do", "In Progress", "Done"];

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Badge from '../../pb_badge/_badge'
-import Title from '../../pb_title/_title'
-import Icon from '../../pb_icon/_icon'
-import Caption from '../../pb_caption/_caption'
-import Card from '../../pb_card/_card'
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-
-import { DraggableProvider } from '../../pb_draggable/context'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { DraggableProvider, List, ListItem } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-
-import SelectableList from '../../pb_selectable_list/_selectable_list'
-import { DraggableProvider } from '../../pb_draggable/context'
+import { SelectableList, DraggableProvider } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx

@@ -1,10 +1,5 @@
 import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-import Table from '../../pb_table/_table'
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -134,11 +134,11 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
-.pb_drawer_lg_left .pb_drawer {
+.pb_drawer_lg_left.pb_drawer {
   transform: translateX(-100%);
 }
 
-.pb_drawer_lg_right .pb_drawer {
+.pb_drawer_lg_right.pb_drawer {
   transform: translateX(100%);
 }
 
@@ -157,34 +157,6 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
 
- &.pb_drawer_within_element_rails {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-
-    // Use max-height for a smooth accordion-like animation
-    max-height: 0;
-    transition: max-height $animation-duration ease-in-out;
-    z-index: 1;
-
-    &.open {
-      max-height: 1000px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -325,6 +297,7 @@ body.PBDrawer__Body--close {
     display: flex;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
+    opacity: 0;
     animation: overlayFade $animation-duration ease-in-out forwards;
     
     &[class*="_left"]{
@@ -352,23 +325,10 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
-    display: flex;
     z-index: $z-index;
     opacity: 1;
     pointer-events: none;
 
-    &[class*="_right"]{
-      justify-content: flex-end;
-    }
-
-    &[class*="_left"]{
-      justify-content: flex-start;
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
     &_before_close {
       height: 0;
     }

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react"
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui"
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui";
 
 const DrawerBorders = () => {
   // Individual state variables for each drawer size
@@ -44,7 +41,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border right  
@@ -55,7 +52,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border left
@@ -66,7 +63,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border full