playbook_ui 14.16.0.pre.alpha.PLAY1929bracketlayout6957 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

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 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
             {hideIcon && inLine ?
               <div>
                 <div
-                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
+                    className={iconWrapperClass()}
                     id={`${pickerId}-icon-plus`}
                 >
                   <Icon
@@ -230,7 +230,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   />
                 </div>
                 <div
-                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
+                    className={iconWrapperClass()}
                     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 %> date-picker-inline-icon-plus"
+          class="<%= object.icon_wrapper_class %>"
           id="<%= object.picker_id %>-icon-plus"
       >
         <%= pb_rails("icon", props: {
@@ -55,7 +55,7 @@
 
       <!-- Angle Down Icon -->
       <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
+          class="<%= object.icon_wrapper_class %>"
           id="<%= object.picker_id %>-angle-down"
       >
         <%= pb_rails("icon", props: {

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

@@ -174,21 +174,6 @@ 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             |
   // ===========================================================
@@ -219,7 +204,6 @@ 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_inline.html.erb

@@ -4,3 +4,14 @@
   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,12 +3,19 @@ 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/sass_partials/_inline_styles.scss

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

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { isEmpty, omitBy, map } from '../../utilities/object'
+import { map } from 'lodash'
+import { isEmpty, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -45,12 +46,12 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                     dark={dark}
                     size={4}
                     tag="h4"
-                    text={`${name}`}
+                    text={name}
                 /> :
                 <div>
                   <Caption
                       dark={dark}
-                      text={`${name}`}
+                      text={name}
                   />
                   <Title
                       dark={dark}

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { find, partial, map } from  '../../utilities/object'
+import { map } from 'lodash'
+import { find, partial } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'
@@ -26,7 +27,7 @@ const directionIcon = (dir: Direction) => (
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
-    const next = nextValue(value, String(name))
+    const next = nextValue(value, name)
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from '../utilities/object'
+import { debounce } from 'lodash'
 
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -10,8 +10,6 @@ $list-header-height: $space_lg;
 $list-footer-height: $space_lg;
 $list-border-radius: $border_rad_lighter;
 $card-border-radius: $border_rad_lightest;
-$bracket-connector-width: 45px;
-$bracket-border-width: 4px;
 
 
 [class^=pb_layout_kit] {
@@ -170,62 +168,6 @@ $bracket-border-width: 4px;
     }
   }
 
-  &[class*=_bracket]{
-    display: flex;
-    overflow-x: scroll;
-
-    div.layout_round {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      flex-grow: 1;
-    }
-
-    .connector_container {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-    }
-    .right_connector {
-      border-top: $bracket-border-width solid $border_light;
-      width: $bracket-connector-width;
-      margin-left: $bracket-connector-width;
-    }
-
-    .layout_round .layout_game {
-      position: relative;
-    }
-
-    .half_box {
-      content: '';
-      position: absolute;
-      top: calc(50% - $bracket-border-width / 2);
-      height: calc(100% + $bracket-border-width);
-      width: $bracket-connector-width;
-      right: -$bracket-connector-width;
-      border-top-right-radius: $border_radius_lg;
-      border-bottom-right-radius: $border_radius_lg;
-      border-top: $bracket-border-width solid $border_light;
-      border-bottom: $bracket-border-width solid $border_light;
-      border-right: $bracket-border-width solid $border_light;
-    }
-
-    .layout_round_label {
-      display: none;
-    }
-
-    @media (max-width: $screen-md-max) {
-      flex-direction: column;
-      .layout_round_label {
-        display: block;
-      }
-      .layout_round .layout_game::after,
-      .connector_container,
-      .half_box {
-        display: none !important;
-      }
-    }
-  }
 
   &[class*=_sidebar]{
     $layout_sizes: (

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -4,9 +4,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 
-import { Round, RoundLabel } from "./subcomponents/_round";
-import Game from "./subcomponents/_game";
-
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
   children?: React.ReactChild[] | React.ReactChild,
@@ -21,7 +18,7 @@ type LayoutPropTypes = {
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
-  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry" | "bracket",
+  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
 } & GlobalProps
 
 type LayoutSideProps = {
@@ -143,7 +140,7 @@ const Layout = (props: LayoutPropTypes) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const layoutCss =
-    (layout == 'collection' || layout == 'bracket')
+    layout == 'collection'
       ? `pb_layout_kit_${layout}`
       : layout == 'kanban'
         ? `pb_layout_kit_${layout}${responsiveClass}`
@@ -154,9 +151,11 @@ const Layout = (props: LayoutPropTypes) => {
         })
 
   const layoutCollapseCss =
-    (layout == 'collection' || layout == 'kanban' || layout == 'bracket')
+    layout == 'collection'
       ? ''
-      : buildCss('layout', position, 'collapse', collapse)
+      : layout == 'kanban'
+        ? ''
+        : buildCss('layout', position, 'collapse', collapse)
 
   const layoutChildren = React.Children.toArray(children)
 
@@ -176,15 +175,6 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
-  const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
-    (child) => {
-      return (child as React.ReactElement).type === Layout.Round;
-    }
-  ).length : 0
-  const bracketChildren = nonSideChildren.map(child =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
-  )
-  
   const filteredProps = {...props}
   delete filteredProps?.position
 
@@ -206,7 +196,7 @@ const Layout = (props: LayoutPropTypes) => {
         style={dynamicInlineProps}
     >
       {subComponentTags('Side')}
-      {layout === 'bracket' ? bracketChildren : nonSideChildren}
+      {nonSideChildren}
     </div>
   )
 }
@@ -216,8 +206,5 @@ Layout.Body = Body
 Layout.Item = Item
 Layout.Header = Header
 Layout.Footer = Footer
-Layout.Round = Round
-Layout.Game = Game
-Layout.RoundLabel = RoundLabel
 
 export default Layout

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

@@ -18,5 +18,4 @@ examples:
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
   - layout_masonry: Masonry Layout
-  - layout_bracket: Bracket Layout
 

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

@@ -7,5 +7,4 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
 export { default as LayoutMasonry } from './_layout_masonry.jsx'
-export { default as LayoutBracket } from './_layout_bracket.jsx'
 

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -82,10 +82,6 @@ test("render all layout variants", () => {
       layout: "masonry",
       expected: "pb_layout_kit_masonry_size_md_left_light",
     },
-    {
-      layout: "bracket",
-      expected: "pb_layout_kit_bracket",
-    },
   ]
 
   testValues.forEach(({ layout, expected }) => {

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from "../../utilities/object" 
+import { debounce } from 'lodash'
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

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

@@ -7,12 +7,11 @@ 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";
 

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -32,12 +32,11 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[],
+  children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
-  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -62,7 +61,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
-    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -72,7 +70,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md"
+    maxWidth="md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -81,28 +79,12 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
-  const handleOnEditorReady = (editorInstance: Editor) => {
-    setEditor(editorInstance)
-    setTimeout(() => {
-      const oldId = editorInstance.element.getAttribute('input')
-      if (oldId) {
-        const hiddenInput = document.getElementById(oldId)
-        if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId  
-          hiddenInput.id = newId
-          editorInstance.element.setAttribute('input', newId)
-
-          if (inputOptions.name) {
-            hiddenInput.setAttribute('name', inputOptions.name as string)
-          }
-        }
-      }
-    })
-  }
+  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
+    element = editor?.element
 
   // DOM manipulation must wait for editor to be ready
-  if (editor && editor.element) {
-    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor) {
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
     // replace default trix "block code" button with "inline code" button
@@ -136,8 +118,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
 
   useEffect(() => {
-    if (!editor?.element) return
-    editor.element.addEventListener('click', ({ target }: Event) => {
+    if (!element) return
+    element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
@@ -146,7 +128,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [editor])
+  }, [element])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -155,7 +137,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props, { maxWidth }), className)
+  let css = classnames(globalProps(props, {maxWidth}), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,