playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71565d1e911bd318cffad56ff64e34bab539bc740f5138b68d1f1896c1a6808e
-  data.tar.gz: '0278d976d8320ee5013b5cc1cb9ae03349ba1948317c315624291a4ef1c9c93a'
+  metadata.gz: 453164dea66b229cdd84038a46f6178bf1008bbf17b5838d2f319e94f1f8fd55
+  data.tar.gz: 8cec3bedef3f08dda63bae0c5faa319542743c9c0e9ebaeef085d868510925e1
 SHA512:
-  metadata.gz: 01c0a50b86ab971669772bfffb39f010929ca496ded033027592aac11de73efb74f40a13b24705a379bba1e81df2b0e4a863415ab1c51b281a1b313a967cd216
-  data.tar.gz: e0703c831017c9f2adb8b05f0eeb61a934142e52beca288c37fa3ee08d6268a6db7198e146e2efb743238a5a5245b7bd54b1a5e0f2c5c7518eb63a8fed94e114
+  metadata.gz: e3982d4582e7c91ec22107b1bd2288f943dd22fe8d054060d56d4193e067a5041a0947e02a940f9873457c7566db4a1ec020858d2bee8aa78985e2430e7c7a6b
+  data.tar.gz: 4af1dfb8a83b8e74411aac7bf618f0f5f946facb7636e560eb87918aec8210ebb91a644d8ede92fbab461d61ba20d125f660a8f5497cd9fd8622af8e39dc2b72

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

@@ -6,6 +6,7 @@
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
 @import "./sass_partials/input_styles";
+@import "./sass_partials/quick_pick_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -26,7 +27,32 @@
       @include transition_default;
       border-color: $primary;
     }
+    .add-on-card {
+      border-color: $primary;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .add-on-card {
+        cursor: pointer;
+        background-color: rgba($focus_input_light,$opacity_5);
+      }
+    }
+  }
+  .text_input_wrapper_add_on .add-on-icon {
+    color: $text_lt_light
   }
+
+  .text_input_wrapper_add_on .add-on-right .text_input{
+    cursor: pointer;
+  }
+  
+}
+
+
+.pb_popover_reference_wrapper {
+  display: unset !important
 }
 
 .flatpickr-calendar {

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

@@ -30,7 +30,7 @@ type DatePickerProps = {
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  inputValue?: any,
+  inputValue?: string,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week",
+  selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeFormat?: string,
@@ -96,46 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+useEffect(() => {
+  datePickerHelper({
+    allowInput,
+    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,
+    yearRange,
+    required: false,
+  }, scrollContainer)
+})
   const filteredProps = {...props}
   delete filteredProps?.position
 
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
     className
   )
-
-  useEffect(() => {
-    datePickerHelper({
-      allowInput,
-      defaultDate,
-      disableDate,
-      disableRange,
-      disableWeekdays,
-      enableTime,
-      format,
-      hideIcon,
-      inLine,
-      maxDate,
-      minDate,
-      mode,
-      onChange,
-      onClose,
-      pickerId,
-      plugins,
-      // @ts-ignore
-      position,
-      positionElement,
-      selectionType,
-      showTimezone,
-      staticPosition,
-      yearRange,
-      required: false,
-    }, scrollContainer)
-  })
-
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -150,80 +150,84 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     return base
   }
 
+
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <div
-        {...inputAriaProps}
-        {...inputDataProps}
-        className="input_wrapper">
+          {...inputAriaProps}
+          {...inputDataProps}
+          className="input_wrapper"
+      >
 
         <Caption
-          className="pb_date_picker_kit_label"
-          text={hideLabel ? null : label}
+            className="pb_date_picker_kit_label"
+            text={hideLabel ? null : label}
         />
-
-        <div className="date_picker_input_wrapper">
-          <input
-            autoComplete="off"
-            className="date_picker_input"
-            disabled={disableInput}
-            id={pickerId}
-            name={name}
-            onChange={inputOnChange}
-            placeholder={placeholder}
-            value={inputValue}
-          />
-
-          {error && <Body
-            status="negative"
-            text={error}
-            variant={null}
-          />
-          }
-        </div>
-
-        {!hideIcon &&
-          <div
-            className={iconWrapperClass()}
-            id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-              className="cal_icon"
-              icon="calendar-alt"
-            />
-          </div>
-        }
-
-        {hideIcon && inLine ?
-          <div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
-            >
-              <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
-              />
-            </div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
-            >
-              <Icon
-                className="angle_down_icon"
-                icon="angle-down"
+          <>
+            <div className="date_picker_input_wrapper">
+              <input
+                  autoComplete="off"
+                  className="date_picker_input"
+                  disabled={disableInput}
+                  id={pickerId}
+                  name={name}
+                  onChange={inputOnChange}
+                  placeholder={placeholder}
+                  value={inputValue}
               />
+
+              {error &&
+                  <Body
+                      status="negative"
+                      text={error}
+                      variant={null}
+                  />
+              }
             </div>
-          </div>
-          : null}
+
+            {!hideIcon &&
+              <div
+                  className={iconWrapperClass()}
+                  id={`cal-icon-${pickerId}`}
+              >
+                <Icon
+                    className="cal_icon"
+                    icon="calendar-alt"
+                />
+              </div>
+            }
+
+            {hideIcon && inLine ?
+              <div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-icon-plus`}
+                >
+                  <Icon
+                      className="date-picker-plus-icon"
+                      icon="plus"
+                  />
+                </div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-angle-down`}
+                >
+                  <Icon
+                      className="angle_down_icon"
+                      icon="angle-down"
+                  />
+                </div>
+              </div>
+              : null
+            }
+          </>
       </div>
     </div>
   )
 }
-
 export default DatePicker

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

@@ -61,7 +61,8 @@
 
   <%= javascript_tag do %>
     window.addEventListener("DOMContentLoaded", () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
+
   <% end %>
-<% end %>
+<% end %>

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

@@ -51,7 +51,7 @@ module Playbook
       prop :position_element, type: Playbook::Props::String
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
-                            values: %w[week month none],
+                            values: %w[week month quickpick none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react'
+import moment from 'moment'
 import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
 
 import DatePicker from './_date_picker'
@@ -10,7 +11,6 @@ import { getTimezoneText } from './plugins/timeSelect'
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 
-
 describe('DatePicker Kit', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,4 +158,47 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue('01/01/2020 at 12:00 PM')
     })
   })
+  test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
+    const testId = 'datepicker-quick-pick'
+    render(
+      <DatePicker
+          allowInput
+          data={{ testid: testId }}
+          mode="range"
+          pickerId="date-picker-quick-pick"
+          placeholder="mm/dd/yyyy → mm/dd/yyyy"
+          selectionType="quickpick"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
+
+    fireEvent(
+      input,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    const today = within(kit).getByText('Today')
+    const thisYear = within(kit).getByText('This year')
+    await waitFor(() => {
+      expect(today).toBeInTheDocument()
+      expect(thisYear).toBeInTheDocument()
+    })
+
+    fireEvent(
+      thisYear,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+
+    await waitFor(() => {
+      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().format('MM/DD/YYYY'))
+    })
+
+  })
 })

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

@@ -3,6 +3,7 @@ import { BaseOptions } from 'flatpickr/dist/types/options'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
+import quickPickPlugin from './plugins/quickPick'
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -19,8 +20,8 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
+  selectionType?: "month" | "week" | "quickpick" | "",
   onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
-  selectionType?: "month" | "week" | "",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeCaption?: string,
@@ -90,18 +91,23 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   const setPlugins = () => {
-    let pluginList = []
+    const pluginList = []
 
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
+
+    } else if (selectionType === "quickpick") {
+    //------- QUICKPICK VARIANT PLUGIN -------------//
+    pluginList.push(quickPickPlugin())
     }
 
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
 
+
     return pluginList
   }
 
@@ -144,6 +150,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
+    locale: {
+      rangeSeparator: ' → '
+    },
     maxDate,
     minDate,
     mode,
@@ -171,10 +180,33 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     static: staticPosition,
   })
 
+
   // ===========================================================
   //                 Additional JS Functionality               |
   // ===========================================================
 
+  // opens flatpickr instance when calander icon is clicked so we can have a hover state on icon
+  // window.addEventListener("DOMContentLoaded", (event) => {
+  //   event.preventDefault();
+  //   function attachIconClickHandler() {
+  //     const variantArr = document.querySelectorAll(`#cal-icon-${pickerId}`)
+  //     if (!variantArr) {
+  //       setTimeout(attachIconClickHandler, 100);
+  //       return;
+  //     }
+
+  //     const instance = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
+  //     variantArr.forEach((icon) => {
+  //       icon.addEventListener("click", function(event) {
+  //         event.preventDefault();
+  //         instance.open()
+  //       });
+  //     })
+  //   }
+
+  //   attachIconClickHandler();
+  // });
+
   // Assign dynamically sourced flatpickr instance to variable
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`

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

@@ -0,0 +1,8 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  mode: "range",
+  picker_id: "date-picker-quick-pick",
+  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
+  selection_type: "quickpick"
+}) %>
+

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPick = (props) => (
+  <div>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="date-picker-quick-pick"
+        placeholder="mm/dd/yyyy → mm/dd/yyyy"
+        selectionType="quickpick"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerQuickPick

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

@@ -8,6 +8,7 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
+  - date_picker_quick_pick: Range (Quick Pick)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -33,6 +34,7 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
+  - date_picker_quick_pick: Range (Quick Pick)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -19,4 +19,5 @@ 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'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPick } from './_date_picker_quick_pick'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -0,0 +1,161 @@
+import moment from 'moment'
+
+type FpTypes = {
+  setDate: (arg0: any, arg1: boolean) => void,
+  config: { [key: string]: string },
+  clear: (arg0: boolean, arg1: boolean) => void,
+  close: () => void,
+  calendarContainer?: {
+    classList: { add: (arg0: string) => void };
+    prepend: (arg0: HTMLDivElement) => void;
+    append: (arg0: HTMLDivElement) => void;
+  },
+  loadedPlugins: string[],
+};
+
+type pluginDataType = {
+  ranges: { [key: string]: Date[] },
+  rangesNav: HTMLUListElement,
+  rangesButtons: [] | any,
+}
+
+const quickPickPlugin = () => {
+  return function (fp: FpTypes & any): any {
+
+    let activeLabel = ""
+
+  // variable that holds the ranges available
+  const ranges = {
+      'Today': [new Date(), new Date()],
+      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
+      'This week': [moment().startOf('week').toDate(), moment().endOf('week').toDate()],
+      'This month': [moment().startOf('month').toDate(), new Date()],
+      'This quarter': [moment().startOf('quarter').toDate(), new Date()],
+      'This year': [moment().startOf('year').toDate(), new Date()],
+      'Last week': [
+          moment().subtract(1, 'week').startOf('week').toDate(),
+          moment().subtract(1, 'week').endOf('week').toDate()
+      ],
+      'Last month': [
+          moment().subtract(1, 'month').startOf('month').toDate(),
+          moment().subtract(1, 'month').endOf('month').toDate()
+      ],
+      'Last quarter': [
+          moment().subtract(1, 'quarter').startOf('quarter').toDate(),
+          moment().subtract(1, 'quarter').endOf('quarter').toDate()
+      ],
+      'Last year': [
+          moment().subtract(1, 'year').startOf('year').toDate(),
+          moment().subtract(1, 'year').endOf('year').toDate()
+      ]
+    }
+    //creating the ul element for the nav dropdown and giving it classnames
+    const rangesNav = document.createElement('ul');
+
+    // creating the pluginData object that will hold the properties of this plugin
+    const pluginData: pluginDataType = {
+      ranges: ranges,
+      rangesNav: rangesNav,
+      rangesButtons: [],
+    };
+
+  /**
+ *    @param {string} label
+ *    @returns HTML Element
+ */
+
+  //funciton for creating the range buttons in the nav
+  const addRangeButton = (label: string) => {
+
+    // creating new elements to mimick selectable card component
+    const div2 = document.createElement('div');
+    div2.className = "nav-item-link"
+    div2.innerHTML = label;
+
+    pluginData.rangesButtons[label] = div2;
+
+    // create li elements inside the dropdown
+    const item = document.createElement('li');
+    item.className = "nav-item";
+
+    // append those nav items to the li items
+    item.appendChild(pluginData.rangesButtons[label]);
+
+    // append the li item to the ul rangeNav prop
+    pluginData.rangesNav.appendChild(item);
+
+    // return the ranges buton prop
+    return pluginData.rangesButtons[label];
+  };
+
+  const selectActiveRangeButton = (selectedDates: Array<string>) => {
+    const current = pluginData.rangesNav.querySelector('.active');
+
+    if (current) {
+      current.classList.remove('active');
+    }
+    /** conditional statment to extract start and end dates from selectedDates,
+    *   then loop through ranges prop in pluginData
+    *   and check if chosen dates equal to a date in the ranges prop
+    *   if they are equal, add the active class
+    */
+    if (selectedDates.length > 0) {
+      pluginData.rangesButtons[activeLabel].classList.add('active');
+    }
+  }
+
+
+    return {
+      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      onReady(selectedDates: Array<string>) {
+        // loop through the ranges and create an anchor tag for each range and add an event listiner to set the date when user clicks on a date range
+        for (const [label, range] of Object.entries(pluginData.ranges)) {
+          addRangeButton(label).addEventListener('click', function () {
+
+              const start = moment(range[0]).toDate();
+              const end = moment(range[1]).toDate();
+
+              if (!start) {
+                fp.clear();
+              }
+              else {
+                activeLabel = label
+                fp.setDate([start, end], true);
+                fp.close();
+              }
+
+            });
+        }
+
+        // conditional to check if there is a dropdown to add it to the calendar container and git it the classes it needs
+        if (pluginData.rangesNav.children.length > 0) {
+
+          fp.calendarContainer.prepend(pluginData.rangesNav);
+          pluginData.rangesNav.classList.add('quick-pick-ul')
+          fp.calendarContainer.classList.add('quick-pick-drop-down');
+
+        /**
+         *
+         * @param {Array} selectedDates
+         */
+
+          // function to give the active butto the active class
+          selectActiveRangeButton(selectedDates);
+        }
+
+      },
+      onValueUpdate(selectedDates: Array<string>) {
+        selectActiveRangeButton(selectedDates);
+      },
+
+      // onClose(selectedDates: Array<string>) {
+      //   // set the input value to the selected dates when the dropdown is closed
+      //   // if (!selectedDates[1]) {
+      //   //   fp.input.value = fp.formatDate(this.selectedDates[0], fp.config.dateFormat) + ' → ' + fp.formatDate(this.selectedDates[1], fp.config.dateFormat);
+      //   // }
+      // }
+    };
+  };
+}
+
+export default quickPickPlugin;

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

@@ -1,3 +1,4 @@
+@import "../../tokens/colors";
 // Calendar Icon Styles
 .cal_icon_wrapper {
   pointer-events: none;
@@ -13,8 +14,8 @@
   padding-left: $space_sm - 1;
   color: $text_lt_light;
   @media (hover: hover) {
-    &:hover {
-      cursor: pointer;
+    &:hover{
+      background-color: rgba($focus_input_light,$opacity_5);
     }
   }
   &.dark {

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

@@ -0,0 +1,75 @@
+@import "../../tokens/animation-curves";
+@import "../../tokens/colors";
+@import "../../tokens/typography";
+@import "../../tokens/titles";
+@import "../../tokens/spacing";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
+
+// used to display dropdown on the left of the calender
+.quick-pick-drop-down {
+  width: auto;
+  display: grid;
+}
+
+.quick-pick-ul {
+  padding: $space_xs 0px;
+  margin: 0;
+  list-style: none;
+}
+
+.nav-item {
+  list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: $space_xs $space_sm;
+}
+
+.nav-item-link {
+  text-decoration: none;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_light;
+  border-radius: $pb_card_border_radius;
+  padding: $space_xs 14px;
+  transition-property: color, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: $bezier;
+  line-height: 1.4;
+  color: $charcoal;
+  font-size: $font_default;
+  font-weight: $regular;
+  &.active {
+    border-width: 2px;
+    border-color: $primary;
+  }
+  @media (hover:hover) {
+    &:hover {
+      cursor: pointer;
+      box-shadow: $shadow-deep;
+      border-color: $slate;
+    }
+  }
+}
+
+// Hide the calendar
+.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
+  display: none;
+}
+
+@media only screen and (max-width: 767px) {
+  .quick-pick-ul {
+    padding: $space_xs $space_xs;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .nav-item {
+    margin: $space_xxs $space_xs;
+  }
+
+  .nav-item-link {
+    padding: $space_xs $space_xxs;
+  }
+}

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

@@ -36,9 +36,10 @@
       vertical-align: top;
       width: 0.6em;
       top: 10px;
+      transform: rotate(135deg);
       font-size: 0.5em;
 
-      transform: rotate(45deg);
+      transform: rotate(-45deg);
       top: 12px;
     }
 

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
+import { findItemById, checkIt, unCheckIt } from "./helper_functions";
 import MultiSelectHelper from "./_multi_select_helper";
 
 type MultiLevelSelectProps = {
@@ -42,31 +42,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedData = formattedData.map((item: any) => {
       if (item.id === currentNode._id) {
         if (currentNode.checked) {
-          checkIt(item, selectedItems, setSelectedItems, false);
+          checkIt(item, selectedItems, setSelectedItems);
         } else {
-          unCheckIt(item, selectedItems, setSelectedItems, false);
+          unCheckIt(item, selectedItems, setSelectedItems);
         }
       } else if (item.children) {
         const foundItem = findItemById(item.children, currentNode._id);
         if (foundItem) {
           if (currentNode.checked) {
-            checkIt(foundItem, selectedItems, setSelectedItems, false);
-            if (currentNode._parent) {
-              const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
-              parents.forEach((item:string) => {
-               const ancestor = findItemById(formattedData,item)
-               ancestor.expanded = true
-              });
-             }
+            checkIt(foundItem, selectedItems, setSelectedItems);
           } else {
-            unCheckIt(foundItem, selectedItems, setSelectedItems, false);
-            if (currentNode._parent) {
-             const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
-             parents.forEach((item:string) => {
-              const ancestor = findItemById(formattedData,item)
-              ancestor.expanded = true
-             });
-            }
+            unCheckIt(foundItem, selectedItems, setSelectedItems);
           }
         }
       }
@@ -106,18 +92,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         treeData={formattedData}
         onChange={(
           // @ts-ignore
-          selectedNodes: { [key: string]: any }[],
+          selectedNodes: { [key: string]: any }[], 
           currentNode: { [key: string]: any }[]
         ) => {
           setCheckedData(currentNode);
           onSelect(currentNode);
-
         }}
         id={id}
         {...props}
       />
     );
-  }, [formattedData])
+  }, [formattedData]);
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -19,20 +19,19 @@ export const findItemById = (
 export const checkIt = (
   foundItem: { [key: string]: any },
   selectedItems: any[],
-  setSelectedItems: Function,
-  expand: boolean
+  setSelectedItems: Function
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = true;
-  foundItem.expanded = expand;
+  foundItem.expanded = true;
   selectedItems.push(foundItem);
 
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      checkIt(x, selectedItems, setSelectedItems, expand);
+      checkIt(x, selectedItems, setSelectedItems);
     });
   }
 
@@ -42,46 +41,20 @@ export const checkIt = (
 export const unCheckIt = (
   foundItem: { [key: string]: any },
   selectedItems: any,
-  setSelectedItems: any,
-  expand: boolean
+  setSelectedItems: any
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = false;
-  foundItem.expanded = false;
   const newSelectedItems = selectedItems.filter(
     (item: any) => item.id !== foundItem.id
   );
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      unCheckIt(x, selectedItems, setSelectedItems, expand);
+      unCheckIt(x, selectedItems, setSelectedItems);
     });
   }
   setSelectedItems([...newSelectedItems]);
 };
-
-
-export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
-  for (let i = 0; i < items.length; i++) {
-    const item:any = items[i];
-    if (item.id === itemId) {
-      // item found in current level of items array
-      return [...ancestors, item.id];
-    }
-    if (item.children && item.children.length > 0) {
-      // recursively search through children
-      const foundAncestors = getParentAndAncestorsIds(
-        itemId,
-        item.children,
-        [...ancestors, item.id]
-      );
-      if (foundAncestors) {
-        return foundAncestors;
-      }
-    }
-  }
-  // item not found in this level of items array or its children
-  return null;
-}

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
-        
+
         {iconRight &&
           <div
             className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-       letter-spacing: normal;
+      letter-spacing: normal;
     }
   }
 }

data/app/pb_kits/playbook/pb_table/index.ts

@@ -11,8 +11,12 @@ export default class PbTable extends PbEnhancedElement {
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      var headers = [].map.call(table.querySelectorAll('th'), (header: Element) => {
-        return header.textContent.replace(/\r?\n|\r/, '')
+      let headers: string[] = [];
+      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        let colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+        }
       });
 
       // for each row in tbody

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

@@ -6,7 +6,7 @@ import {
   offset, 
   Placement, 
   safePolygon, 
-  shift, 
+  shift,
   useFloating, 
   useHover, 
   useInteractions,
@@ -17,9 +17,6 @@ import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
-
-
-
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
@@ -29,8 +26,8 @@ type TooltipProps = {
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
+  position?: "absolute" | "fixed";
   text: string,
-  zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
 const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -43,6 +40,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     icon = null,
     interaction = false,
     placement: preferredPlacement = "top",
+    position = "absolute",
     text,
     zIndex,
     ...rest
@@ -50,24 +48,26 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
 
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
-
+  
   const css = classnames(
     globalProps({...rest}),
     className,
   )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
-  const {
 
+
+  const {
     context,
     floating,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
     reference,
     strategy,
     x,
     y,
   } = useFloating({
+    strategy: position,
     middleware: [
       arrow({
         element: arrowRef,
@@ -87,6 +87,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement
   })
 
+
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -142,7 +143,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
               className="arrow_bg"
               ref={arrowRef}
               style={{
-                position: strategy,
+                position: "absolute",
                 left: arrowX != null ? `${arrowX}px` : "",
                 top: arrowY != null ? `${arrowY}px` : "",
                 [staticSide]: "-5px",
@@ -154,4 +155,4 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
   )
 }
 
-export default Tooltip
+export default Tooltip

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -65,3 +65,32 @@ test("closes on mouseleave", async () => {
 
   cleanup();
 });
+
+test("has default position absolute", async () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
+    cleanup();
+  })
+
+  cleanup();
+});
+
+test("has position fixed", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        position="fixed"
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "fixed"});
+    cleanup();
+  })
+
+  cleanup();
+});

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -68,7 +68,7 @@ $background_colors: (
 
 /* Card colors ------------------*/
 $card_light:          $white !default;
-$card_dark:           rgba($white, $opacity_1) !default;
+$card_dark:           mix(white, $bg_dark, 10%)  !default;
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
@@ -109,16 +109,18 @@ $focus_input_colors: (
 
 /* Border colors ----------------------*/
 $border_light:        #E4E8F0 !default;
-$border_dark:         rgba($white, $opacity_1) !default;
+$border_dark:         mix(white, $bg_dark, 20%) !default;
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 
 /* Shadow colors ----------------------*/
-$shadow:        rgba(#3C6AAC, $opacity_2) !default;
+$shadow:             rgba(#3C6AAC, $opacity_2) !default;
+$shadow_dark:        $bg_dark !default;
 $shadow_colors: (
   shadow:       $shadow,
+  shadow_dark:       $shadow_dark,
 );
 
 /* Text colors ------------------------*/

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.18.0"
-  VERSION = "12.18.0.pre.alpha.play786multilevelselectimprovements627"
+  PREVIOUS_VERSION = "12.19.0"
+  VERSION = "12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.18.0.pre.alpha.play786multilevelselectimprovements627
+  version: 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-09 00:00:00.000000000 Z
+date: 2023-05-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -745,6 +745,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -759,6 +761,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_description.md
 - app/pb_kits/playbook/pb_date_picker/docs/example.yml
 - app/pb_kits/playbook/pb_date_picker/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
 - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -768,6 +771,7 @@ files:
 - 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/_quick_pick_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss