playbook_ui 12.6.0.pre.alpha.sectionseparator1 → 12.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54b4b391e78f2f58e670391168634c536434667a6e53d4ae31e803f738ee5a1d
-  data.tar.gz: 871163ff18b7cc73cd8591158fbff9aedb2cbfa647c95a68e5921ccd319fede0
+  metadata.gz: 127ac17d49b80d6d30ec216a6f2e0a7e81908664c6a85b1341bdce717f12699a
+  data.tar.gz: e15e17d77315240d2c81ea9df13c84d5b6633c55ac9f19a4e0b5ed24e5b2df1e
 SHA512:
-  metadata.gz: 4ab7c44f1c8cdd068026bedde9b01b656e4b209bf0997ff539857867c5d5a1cd591a153084716f983b8749d643ecf8a747fde4b05600260e0312b3d02e004d7a
-  data.tar.gz: 918ca1022a5c4c4ea45436892b8fc5608b10bf06a3d0fbcb495b5f2e8f63bb2ff144b15e039eec1bd6d1ea433680c398a5324829b1f31a5afd619273c7a75271
+  metadata.gz: b7089e126a6c6340ccde8c062ad95411bf8c3470cefce3c9309bb591e0efc0a5fac5f56b3984c37ca0f12bd8710c3e7a646f1d77405ec3b2f3d412b3d69de452
+  data.tar.gz: b7abd953f3e8c3215b7b142790c5ac6fd15e99b0b44cf3a425dfa7b7c41db5e1f19f9696a363305f055a76d4c7cd2ab8d8387004465eeb90016350c839cad40a

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -5,8 +5,7 @@
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
-
-
+@import "./sass_partials/input_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -20,8 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  &:focus, :focus-within {
-    div.cal_icon_wrapper, input.text_input{
+  &:focus,
+  :focus-within {
+    div.cal_icon_wrapper,
+    input.date_picker_input {
       @include transition_default;
       border-color: $primary;
     }
@@ -33,18 +34,20 @@
   @import "./sass_partials/header_styles";
   @import "./sass_partials/overrides";
 
-  .text_input.flatpickr-input {
+  .date_picker_input.flatpickr-input {
     text-overflow: ellipsis;
     padding-right: $space_xl + 10 !important;
   }
+
   // Calendar Shadow and Border
   .flatpickr-calendar {
     box-shadow: $shadow_deeper;
     border: 1px solid $border_light;
   }
+
   // Hide Caret
   &:before,
   &:after {
     content: none;
   }
-}
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -5,13 +5,13 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
-
 import Icon from '../pb_icon/_icon'
-import TextInput from '../pb_text_input/_text_input'
+import Caption from '../pb_caption/_caption'
+import Body from '../pb_body/_body'
 
 type DatePickerProps = {
   allowInput?: boolean,
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -27,15 +27,15 @@ type DatePickerProps = {
   hideLabel?: boolean,
   id?: string,
   inLine?: boolean,
-  inputAria?: {[key: string]: string},
-  inputData?: {[key: string]: string},
-  inputOnChange?: (arg: string) => void,
+  inputAria?: { [key: string]: string },
+  inputData?: { [key: string]: string },
+  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: ArrayLike<Node> | Node | string,
+  pickerId?: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -68,8 +68,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     id,
     inLine = false,
-    inputAria,
-    inputData,
+    inputAria = {},
+    inputData = {},
     inputOnChange,
     inputValue,
     label = 'Date Picker',
@@ -87,11 +87,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
-    yearRange = [ 1900, 2100 ],
+    yearRange = [1900, 2100],
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const inputAriaProps = buildAriaProps(inputAria)
+  const inputDataProps = buildDataProps(inputData)
+
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
     globalProps(props),
@@ -128,13 +131,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
-    if (dark){
+    if (dark) {
       base += ' dark'
     }
-    if (hideLabel){
+    if (hideLabel) {
       base += ' no_label_shift'
     }
-    if (error){
+    if (error) {
       base += ' error'
     }
     return base
@@ -142,61 +145,75 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
-      <div className="input_wrapper">
-        <TextInput
-            aria={inputAria}
+      <div
+        {...inputAriaProps}
+        {...inputDataProps}
+        className="input_wrapper">
+
+        <Caption
+          className="pb_date_picker_kit_label"
+          text={hideLabel ? null : label}
+        />
+
+        <div className="date_picker_input_wrapper">
+          <input
             autoComplete="off"
-            dark={dark}
-            data={inputData}
+            className="date_picker_input"
             disabled={disableInput}
-            error={error}
             id={pickerId}
-            label={hideLabel ? null : label}
             name={name}
             onChange={inputOnChange}
             placeholder={placeholder}
             value={inputValue}
-        />
+          />
 
-        { !hideIcon &&
+          {error && <Body
+            status="negative"
+            text={error}
+            variant={null}
+          />
+          }
+        </div>
+
+        {!hideIcon &&
           <div
-              className={iconWrapperClass()}
-              id={`cal-icon-${pickerId}`}
+            className={iconWrapperClass()}
+            id={`cal-icon-${pickerId}`}
           >
-          <Icon
+            <Icon
               className="cal_icon"
               icon="calendar-alt"
-          />
-        </div>
+            />
+          </div>
         }
 
-        { hideIcon && inLine ? 
+        {hideIcon && inLine ?
           <div>
             <div
-                className={iconWrapperClass()}
-                id={`${pickerId}-icon-plus`}
+              className={iconWrapperClass()}
+              id={`${pickerId}-icon-plus`}
             >
               <Icon
-                  className="date-picker-plus-icon"
-                  icon="plus"
+                className="date-picker-plus-icon"
+                icon="plus"
               />
             </div>
             <div
-                className={iconWrapperClass()}
-                id={`${pickerId}-angle-down`}
+              className={iconWrapperClass()}
+              id={`${pickerId}-angle-down`}
             >
-                <Icon
-                    className="angle_down_icon"
-                    icon="angle-down" 
-                />
+              <Icon
+                className="angle_down_icon"
+                icon="angle-down"
+              />
             </div>
-          </div>  
-        : null }
+          </div>
+          : null}
       </div>
     </div>
   )

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

@@ -112,6 +112,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // ===========================================================
 
   flatpickr(`#${pickerId}`, {
+    allowInput,
     closeOnSelect,
     disableMobile: true,
     dateFormat: getDateFormat(),

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

@@ -0,0 +1 @@
+<%= pb_rails("date_picker", props: { allow_input: true, picker_id: "date-picker-allow-input"}) %>

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerAllowInput = (props) => (
+    <>
+        <DatePicker
+            allowInput
+            pickerId="date-picker-allow-input"
+            {...props}
+        />
+    </>
+)
+
+export default DatePickerAllowInput

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

@@ -0,0 +1 @@
+Setting the `allowInput` prop to true permits users to key values directly into the input. This prop is set to false by default.

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

@@ -4,6 +4,7 @@ examples:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
   - date_picker_default_date: Default Date
+  - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
@@ -22,11 +23,11 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
 
-
   react:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
   - date_picker_default_date: Default Date
+  - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_on_change: onChange

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

@@ -18,3 +18,4 @@ export { default as DatePickerTime } from './_date_picker_time.jsx'
 export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
+export { default as DatePickerAllowInput } from './_date_picker_allow_input'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -0,0 +1,68 @@
+@import "../../pb_textarea/textarea_mixin";
+
+[class^=pb_date_picker_kit] {
+  margin-bottom: $space_sm;
+
+  .pb_date_picker_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+
+  .date_picker_input_wrapper {
+    display: block;
+
+    input::placeholder,
+    .date_picker_input .placeholder {
+      @include pb_body_light;
+    }
+
+    input,
+    .date_picker_input {
+      max-height: 45px;
+      @include pb_textarea_light;
+      overflow: hidden;
+    }
+
+    input:hover,
+    .date_picker_input:hover {
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+
+    input:focus,
+    .date_picker_input:focus,
+    input:-webkit-autofill:focus,
+    .date_picker_input:-webkit-autofill:focus {
+      @include pb_textarea_focus;
+      @include transition_default;
+      border-color: $primary;
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+  }
+
+  &.error {
+    .date_picker_input_wrapper {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+
+      input,
+      .date_picker_input {
+        border-color: $error;
+      }
+    }
+  }
+
+  &.inline {
+    .date_picker_input_wrapper input::placeholder,
+    .date_picker_input_wrapper .date_picker_input .placeholder {
+      opacity: 1;
+    }
+
+    &:not(:hover) {
+      .date_picker_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+}

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

@@ -12,11 +12,18 @@ type MultiLevelSelectProps = {
   id?: string;
   treeData?: { [key: string]: string }[];
   onChange?: any;
-  onSelect?: (SelectedNodes: { [key: string]: any }) => void;
+  onSelect?: (prop: { [key: string]: any }) => void;
 };
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
-  const { aria = {}, className, data = {}, id, treeData, onSelect } = props;
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    treeData,
+    onSelect = () => {},
+  } = props;
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -28,6 +35,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const [formattedData, setFormattedData] = useState(treeData);
   const [selectedItems, setSelectedItems] = useState([]);
+  const [checkedData, setCheckedData] = useState([]);
 
   const onChange = (currentNode: { [key: string]: any }) => {
     const updatedData = formattedData.map((item: any) => {
@@ -62,16 +70,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const uniqueSelected = selected.filter(
       (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
     );
-    onSelect(uniqueSelected);
+    setCheckedData(uniqueSelected);
   }, [selectedItems]);
 
+  useEffect(() => {
+    let el = document.getElementById("pb_data_wrapper");
+
+    if (el) {
+      el.setAttribute("data-tree", JSON.stringify(checkedData));
+    }
+
+    onSelect(checkedData);
+  }, [checkedData]);
+
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
       <MultiSelectHelper
         treeData={formattedData}
         id={id}
         onChange={onChange}
-        onSelect={onSelect}
         {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  }] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "default-multi-level-select",
+    tree_data:treeData
+    }) %>
+
+

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md

@@ -1,3 +1,5 @@
 The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
 
-The `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
+For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
+
+For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.

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

@@ -1,5 +1,6 @@
 examples:
-  
+  rails:
+  - multi_level_select_default: Default
   
   react:
   - multi_level_select_default: Default

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -0,0 +1,3 @@
+<div id="pb_data_wrapper" data-tree="">
+<%= react_component("MultiLevelSelect", object.multi_level_select_options ) %>
+</div>

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbMultiLevelSelect
+    class MultiLevelSelect < Playbook::KitBase
+      prop :tree_data, type: Playbook::Props::Array,
+                       default: []
+
+      def classname
+        generate_classname("pb_multi_level_select")
+      end
+
+      def multi_level_select_options
+        {
+          id: id,
+          treeData: tree_data,
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -29,10 +29,9 @@ test('should render custom class', () => {
       <MultiLevelSelect
           className='custom-class'
           data={{ testid: testId}}
-          onSelect={()=> console.log("hello")}
           treeData={treeData}
       /> 
-  ) 
+  )
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass('custom-class')

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

@@ -1,16 +1,46 @@
 @import "../tokens/colors";
 
+$transform-rotate-deg: 135deg;
+$input-max-width: 284px;
+$dropdown-min-width: 340px;
+$flag-min-resolution: 192dpi;
+
 .pb_phone_number_input {
   input::placeholder {
     color: $focus_input_light;
   }
 
+  .text_input {
+    max-width: $input-max-width;
+  }
+
+  .dropdown_open {
+    .text_input {
+      border-color: $primary !important;
+    }
+
+    .iti__selected-flag:focus-visible {
+      outline-style: none;
+    }
+  }
+
   .iti__country {
     padding: 5px 10px 5px 16px;
+    transition: $transition_default;
   }
 
   .iti__selected-flag {
-    padding: 0 6px 0 16px;
+    padding: 0 $space_xxs 0 $space_sm;
+
+    &[aria-expanded="true"] {
+      color: $primary_action;
+    }
+
+    &:focus-visible {
+      outline-style: solid;
+      border-radius: $space_xxs 0px 0px $space_xxs;
+      outline-color: $primary;
+    }
   }
 
   .iti__country.iti__highlight {
@@ -31,6 +61,11 @@
 
   .iti__flag {
     background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
+    border-radius: 1px;
+  }
+
+  .iti--separate-dial-code {
+    width: 100%;
   }
 
   .iti--separate-dial-code .iti__selected-flag {
@@ -52,49 +87,50 @@
 
   .iti__arrow::before {
     border-style: solid;
-    border-width: 0.1em 0.1em 0 0;
+    border-width: 1px 1px 0 0;
     content: '';
     display: inline-block;
-    height: 0.6em;
-    left: 0.1em;
+    height: $space_xxs + 1px;
+    left: 1px;
     position: relative;
     vertical-align: top;
-    width: 0.6em;
-    top: 10px;
-    transform: rotate(135deg);
-    font-size: 0.5em;
+    width: $space_xxs + 1px;
+    top: $space_xs + 2px;
+    transform: rotate($transform-rotate-deg);
     color: $slate;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-45deg);
-    top: 12px;
+    transform: rotate(-($transform-rotate-deg/3));
+    top: $space_xs + 4px;
+    color: $primary_action;
   }
 
   .iti__active::after {
     float: right;
     content: "";
-    margin-top: 5px;
-    transform: rotate(45deg);
-    height: 12px;
-    width: 6px;
+    margin-top: $space_xxs + 1px;
+    transform: rotate($transform-rotate-deg/3);
+    height: $space_xs + 4px;
+    width: $space_xxs + 2px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 1px;
   }
 
   .iti__country-list {
-    min-width: 340px;
+    min-width: $dropdown-min-width;
     border-radius: $border_radius_md;
     border: 1px solid $border_light;
     box-shadow: $shadow_deep;
+    margin-top: 1px;
   }
 
   .iti__divider {
     border-bottom: 1px solid $border_light;
   }
   
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
     }

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

@@ -1,11 +1,12 @@
 /* @flow */
-import React, { useEffect, useRef, useState } from "react"
-import classnames from "classnames"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
-import intlTelInput from "intl-tel-input"
-import "intl-tel-input/build/css/intlTelInput.css"
-import TextInput from "../pb_text_input/_text_input"
+import React, { useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/css/intlTelInput.css'
+import TextInput from '../pb_text_input/_text_input'
+import 'intl-tel-input/build/js/utils.js'
 
 declare global {
   interface Window {
@@ -50,7 +51,7 @@ const formatAllCountries = () => {
 formatAllCountries()
 
 const containOnlyNumbers = (value: string) => {
-  return /^(\++)*(\d+)$/.test(value)
+  return /^[()+\-\ .\d]*$/g.test(value)
 }
 
 const PhoneNumberInput = (props: PhoneNumberInputProps) => {
@@ -85,7 +86,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState("")
+  const [error, setError] = useState('')
+  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -133,18 +135,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-      utilsScript:
-        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
-      separateDialCode: true,
-      preferredCountries,
-      allowDropdown: !disabled,
-      initialCountry,
-      onlyCountries,
-    })
-
-    inputRef.current.addEventListener("countrychange", () =>
-      validateTooLongNumber(telInputInit)
+        separateDialCode: true,
+        preferredCountries,
+        allowDropdown: !disabled,
+        initialCountry,
+        onlyCountries,
+      }
     )
+    
+    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
     setItiInit(telInputInit)
   }, [])
@@ -152,6 +153,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   return (
     <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
+        className={dropDownIsOpen ? 'dropdown_open' : ''}
         disabled={disabled}
         error={error}
         id={id}

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -3,6 +3,25 @@
 	text-align: center;
 	user-select: none;
 
+  .buffer > [class*=pb_selectable_icon_kit]::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .buffer > [class*=pb_selectable_icon_kit] {
+    @media (hover:hover) {
+      &:hover * {
+            transition: transform $transition_short ease;
+            transform: translateY(-2px);
+          }
+      }
+  }
+
+
 	input[type="checkbox"],
 	input[type="radio"] {
 

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -13,7 +13,6 @@
     dark: object.dark,
     input_options: object.input_options
   }) do %>
-
     <%= pb_rails("selectable_icon", props: {
       icon: object.icon,
       inputs: "disabled",
@@ -26,6 +25,5 @@
       color: "light",
       dark: object.dark
     }) %>
-
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -5,6 +5,7 @@
 	text-align: center;
 	cursor: pointer;
 	transition: all $transition_short ease;
+
 	@media (hover:hover) {
 		&:hover * {
 			transition: transform $transition_short ease;
@@ -81,3 +82,5 @@
 		}
  	}
 }
+
+

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -1,16 +1,18 @@
 import React, { useRef, useState } from "react"
-import classnames from "classnames"
+
 import {
-  Placement,
-  offset,
-  arrow,
-  shift,
-  useFloating,
+  arrow, 
+  flip, 
+  offset, 
+  Placement, 
+  safePolygon, 
+  shift, 
+  useFloating, 
+  useHover, 
   useInteractions,
-  useHover,
-  flip,
-  safePolygon,
 } from "@floating-ui/react-dom-interactions"
+
+import classnames from "classnames"
 import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
@@ -18,12 +20,13 @@ import Flex from "../pb_flex/_flex"
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
+  children: JSX.Element,
   data?: { [key: string]: string },
-  text: string,
+  delay?: number | Partial<{open: number; close: number}>,
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
-  children: JSX.Element,
+  text: string,
   zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
@@ -33,10 +36,11 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     className,
     children,
     data = {},
+    delay = 0,
     icon = null,
     interaction = false,
-    text,
     placement: preferredPlacement = "top",
+    text,
     zIndex,
     ...rest
   } = props
@@ -45,53 +49,55 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
 
   const css = classnames(
-    globalProps({...rest}),
-    className
+    className,
+    globalProps({...rest})
   )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
   const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
+
     context,
-    placement,
+    floating,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    placement,
+    reference,
+    strategy,
+    x,
+    y,
   } = useFloating({
-    placement: preferredPlacement,
-    open,
-    onOpenChange(open) {
-      setOpen(open)
-    },
     middleware: [
-      offset(10),
-      shift(),
+      arrow({
+        element: arrowRef,
+      }),
       flip({
         fallbackPlacements: ["top", "right", "bottom", "left"],
         fallbackStrategy: "initialPlacement",
         flipAlignment: false,
       }),
-      arrow({
-        element: arrowRef,
-      }),
+      offset(10),
+      shift()
     ],
+    open,
+    onOpenChange(open) {
+      setOpen(open)
+    },
+    placement: preferredPlacement
   })
 
   const { getFloatingProps } = useInteractions([
     useHover(context, {
+      delay,
       handleClose: interaction ? safePolygon({
         blockPointerEvents: false
-      }) : null,
+      }) : null
     })
   ])
 
   const staticSide = {
-    top: "bottom",
-    right: "left",
     bottom: "top",
     left: "right",
+    right: "left",
+    top: "bottom",
   }[placement.split("-")[0]]
 
   return (
@@ -109,9 +115,9 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
       {open && (
         <div
             {...getFloatingProps({
-              role: "tooltip",
-              ref: floating,
               className: `tooltip_tooltip ${placement} visible`,
+              ref: floating,
+              role: "tooltip",
               style: {
                 position: strategy,
                 top: y ?? 0,

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -0,0 +1,56 @@
+// @flow
+
+import React from 'react'
+import { Button, Tooltip, Flex, FlexItem } from '../..';
+
+const TooltipDelay = (props) => {
+
+  return (
+   <Flex 
+       flexDirection='row'
+       gap='md'
+       justifyContent='center'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip 
+          delay={1000}
+          placement='top' 
+          text="1s open/close delay" 
+          zIndex={10}
+          {...props}
+      >
+        <Button text="1s delay"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          delay={{
+            open: 1000
+          }}
+          placement='top' 
+          text="1s open delay" 
+          zIndex={10}
+          {...props}
+      >
+        <Button text="Open only"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          delay={{
+            close: 1000
+          }}
+          placement='top' 
+          text="1s close delay" 
+          zIndex={10}
+          {...props}
+      >
+        <Button text="Close only"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipDelay

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md

@@ -0,0 +1,5 @@
+Waits for the specified time when the event listener runs before triggering the tooltip.
+
+The `delay` accepts `number` in `ms` or an `object` with `open` and `close` properties.
+
+The `default` is `0`.

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

@@ -11,3 +11,4 @@ examples:
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
   - tooltip_icon: Tooltip with Icon
+  - tooltip_delay: Delay

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

@@ -2,3 +2,4 @@ export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
 export { default as TooltipIcon } from './_tooltip_icon'
+export { default as TooltipDelay } from './_tooltip_delay'

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -13,6 +13,7 @@ import DistributionBar from './pb_distribution_bar/_distribution_bar'
 import Gauge from './pb_gauge/_gauge'
 import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
+import MultiLevelSelect from './pb_multi_level_select/_multi_level_select'
 import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
 import TreemapChart from './pb_treemap_chart/_treemap_chart'
@@ -27,6 +28,7 @@ WebpackerReact.registerComponents({
   DialogFooter,
   DialogHeader,
   DistributionBar,
+  MultiLevelSelect,
   Legend,
   LineGraph,
   Passphrase,

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.6.0"
-  VERSION = "12.6.0.pre.alpha.sectionseparator1"
+  VERSION = "12.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.6.0.pre.alpha.sectionseparator1
+  version: 12.7.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-07 00:00:00.000000000 Z
+date: 2023-03-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -694,6 +694,9 @@ files:
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker.test.js
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
@@ -754,6 +757,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
@@ -1418,11 +1422,14 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
 - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
 - app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
 - app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts
+- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
 - app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
 - app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
@@ -2154,6 +2161,8 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
@@ -2439,9 +2448,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key: