playbook_ui 12.26.0 → 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f05ba004408818dfcba9bd10157c3c88af1dd4d310795c061f333b5945fc4f5a
-  data.tar.gz: e0634afd89ddd77122ed2a6fedf1a0af05dbc0a07e93dccae55b1e2227303cbc
+  metadata.gz: 64a2a354bbc83b538372e2d6c2fce8ef6cc717dab74cb0ff5c6e4703fdd39a34
+  data.tar.gz: e4978419bb744d0f5638c2d172fa9e63dec96d46de9387db50a8286ec615bbe2
 SHA512:
-  metadata.gz: d9c746e3c5e9e738c378c47f109c3c7ac8f069da5d04fca517dc58128053d6b02a75b0ba2d244d1f070348f856d8348438721f59708afd9b9be90ba82f66267f
-  data.tar.gz: '050496ad839d51a4fc1e6440d9356f578cb3613b788770ffbd703b99c1f1f14d1e060e6dd7b7bc1fb878c61f5f1a697b0a8df3ddb55b8f0ee4085d047a6be9a8'
+  metadata.gz: b7311804701a200d8c822d1658f8b085973a8eb277d7b4f5180c18c27334a5bb7be3da262e80d8b07db62ea2caa6bc88bc5ee8dcdc237b78c24eac8897cdf6b4
+  data.tar.gz: b178b398c5b61d199f6fab3589d3b8a4e311ac7ea404c8ff045983691eb6713335164243068db66b55d887e25b4bc45efa83421326f211baa8270789ffd30fde

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,9 +39,10 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week",
+  selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
   staticPosition: boolean,
+  thisRangesEndToday?: boolean,
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
@@ -88,6 +89,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
+    thisRangesEndToday = false,
     yearRange = [1900, 2100],
   } = props
 
@@ -96,46 +98,47 @@ 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,
+    thisRangesEndToday,
+    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 +153,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

@@ -21,6 +21,12 @@
         required: object.required,
       }) %>
     <% end %>
+
+    <% if object.selection_type == "quickpick" %>
+      <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
+      <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
+    <% end %>
+
     <% if !object.hide_icon %>
       <div
           class="<%= object.icon_wrapper_class %>"
@@ -61,7 +67,17 @@
 
   <%= javascript_tag do %>
     window.addEventListener("DOMContentLoaded", () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+
+      if (<%= object.selection_type == "quickpick" %>) {
+        document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+          const startDate = document.getElementById("<%= object.start_date_id %>")
+          const endDate = document.getElementById("<%= object.end_date_id %>")
+          const splittedValue = target.value.split(" → ")
+          startDate.value = splittedValue[0]
+          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        })
+      }
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -19,6 +19,10 @@ module Playbook
                               default: []
       prop :enable_time, type: Playbook::Props::Boolean,
                          default: false
+      prop :end_date_id, type: Playbook::Props::String,
+                         default: "end_date_id"
+      prop :end_date_name, type: Playbook::Props::String,
+                           default: "end_date_name"
       prop :error, type: Playbook::Props::String
       prop :format, type: Playbook::Props::String,
                     default: "m/d/Y"
@@ -43,20 +47,26 @@ module Playbook
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
-      prop :plugins, type: Playbook::Props::Boolean,
-                     default: false,
-                     deprecated: true
+      prop :plugins,  type: Playbook::Props::Boolean,
+                      default: false,
+                      deprecated: true
       prop :position, type: Playbook::Props::String,
                       default: "auto"
       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
+      prop :start_date_id, type: Playbook::Props::String,
+                           default: "start_date_id"
+      prop :start_date_name, type: Playbook::Props::String,
+                             default: "start_date_name"
       prop :static_position, type: Playbook::Props::Boolean,
                              default: true
+      prop :this_ranges_end_today, type: Playbook::Props::Boolean,
+                                   default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -88,6 +98,7 @@ module Playbook
           selectionType: selection_type,
           showTimezone: show_timezone,
           staticPosition: static_position,
+          thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
         }.to_json.html_safe
       end

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,87 @@ 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().endOf('year').format('MM/DD/YYYY'))
+    })
+
+  })
+  test('shows DatePicker QuickPick ranges ending today', async () => {
+    const testId = 'datepicker-quick-pick-ends-today'
+    render(
+      <DatePicker
+          allowInput
+          data={{ testid: testId }}
+          mode="range"
+          pickerId="date-picker-quick-pick"
+          placeholder="mm/dd/yyyy → mm/dd/yyyy"
+          selectionType="quickpick"
+          thisRangesEndToday
+      />
+    )
+
+    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 thisYear = within(kit).getByText('This year')
+
+    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,10 +20,11 @@ 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,
+  thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
   yearRange: number[]
@@ -51,6 +53,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     selectionType,
     showTimezone,
     staticPosition = true,
+    thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
@@ -89,19 +92,24 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const setPlugins = () => {
-    let pluginList = []
+  const setPlugins = (thisRangesEndToday: boolean) => {
+    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(thisRangesEndToday))
     }
 
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
 
+
     return pluginList
   }
 
@@ -144,6 +152,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
+    locale: {
+      rangeSeparator: ' → '
+    },
     maxDate,
     minDate,
     mode,
@@ -164,17 +175,40 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setPlugins(),
+    plugins: setPlugins(thisRangesEndToday),
     position,
     positionElement: getPositionElement(positionElement),
     prevArrow: '<i class="far fa-angle-left"></i>',
     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_rails.html.erb

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

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

@@ -0,0 +1,3 @@
+This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
+
+Like all other date pickers, the quick pick does require a `picker_id`.

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

@@ -0,0 +1,12 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  end_date_id: "range-limit-end-date",
+  end_date_name: "range-limit-end-date",
+  mode: "range",
+  picker_id: "thisRangesEndToday",
+  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "range-limit-start-date",
+  start_date_name: "range-limit-start-date",
+  this_ranges_end_today: true
+}) %>

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

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

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

@@ -0,0 +1 @@
+Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.

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

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

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

@@ -0,0 +1 @@
+Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.