playbook_ui 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869 → 12.28.0.pre.alpha.PLAY814removemomentjs871

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 82e433c24e21afe2944802e1f5b3fefcd9ce14bb80d16e921b840ffa17af9964
-  data.tar.gz: 7d938398f20fdc13722ef2266f5c99d7a3a2f0073d0faa1d7ce50a9a4d8ca9a9
+  metadata.gz: 6bff4ae5eea63203df312bfe5084059ccbf7c03b00e21191e8febfdadef69e40
+  data.tar.gz: 4b2d45e698f7101b05145fe30247ceb58c007e91e9e8d239ce2ee81c9715bc99
 SHA512:
-  metadata.gz: b726fb7794e22996636f02afec98351f9eb839a30fda4c94d07335d66906eee93c43114f16136f6787910f8071537ee505f9f17df3e8d1cea93f07904b4774d3
-  data.tar.gz: 1cebf83e37e54eb3f3fbaf4b771a13650e2b3fee5656e94cec407b78d678353c1075693d433eebdcf6f7ef51836ec0e7d6142c53884360e4f4c973ba8d0ea786
+  metadata.gz: '082571f8a9154aae27eea5c8087db5c24d1b9439cdbe8f699a5a9c8fdf72ea8d9ed8840595d4160500586ccbe73a6720ef3d221a464e971f825fff22b78abcc9'
+  data.tar.gz: 861ab41ccc20069e20fba759b72f8ea0d04cef37aa843ffa8ec4df6725b07a5a76ed10f90120dd3e90e1074cd86b53fa0c196a50a507b8aaa5f18885e79d6ea6

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
-import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
-  value: string | Date;
+  value: Date;
 };
 
 const PbDate = (props: PbDateProps) => {
@@ -37,12 +37,11 @@ const PbDate = (props: PbDateProps) => {
     value,
   } = props;
 
-  const dateTimestamp = new DateTime({ value: value });
-  const weekday = dateTimestamp.toWeekday();
-  const month = dateTimestamp.toMonth();
-  const day = dateTimestamp.toDay();
-  const year = dateTimestamp.toYear();
-  const currentYear = new Date().getFullYear().toString();
+  const weekday = DateTime.toWeekday(value);
+  const month = DateTime.toMonth(value);
+  const day = DateTime.toDay(value);
+  const year = DateTime.toYear(value);
+  const currentYear = new Date().getFullYear();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

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

@@ -6,7 +6,6 @@
 @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 {
@@ -27,32 +26,7 @@
       @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?: string,
+  inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,10 +39,9 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week"| "quickpick",
+  selectionType?: "month" | "week",
   showTimezone?: boolean,
   staticPosition: boolean,
-  thisRangesEndToday?: boolean,
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
@@ -89,7 +88,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
-    thisRangesEndToday = false,
     yearRange = [1900, 2100],
   } = props
 
@@ -98,47 +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,
-    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) {
@@ -153,84 +150,80 @@ useEffect(() => {
     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>
+        <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>
-              </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,12 +21,6 @@
         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 %>"
@@ -67,17 +61,7 @@
 
   <%= javascript_tag do %>
     window.addEventListener("DOMContentLoaded", () => {
-      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(" to ")
-          startDate.value = splittedValue[0]
-          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-        })
-      }
+        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -19,10 +19,6 @@ 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"
@@ -47,26 +43,20 @@ 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 quickpick none],
+                            values: %w[week month 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,
@@ -98,7 +88,6 @@ 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,6 +1,5 @@
 /* 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'
@@ -11,6 +10,7 @@ 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,87 +158,4 @@ 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 to mm/dd/yyyy"
-          selectionType="quickpick"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const input = within(kit).getByPlaceholderText('mm/dd/yyyy to 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') + " to " + 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 to mm/dd/yyyy"
-          selectionType="quickpick"
-          thisRangesEndToday
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const input = within(kit).getByPlaceholderText('mm/dd/yyyy to 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') + " to " + moment().format('MM/DD/YYYY'))
-    })
-
-  })
 })

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

@@ -3,7 +3,6 @@ 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
@@ -20,11 +19,10 @@ 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[]
@@ -53,7 +51,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     selectionType,
     showTimezone,
     staticPosition = true,
-    thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
@@ -92,24 +89,19 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const setPlugins = (thisRangesEndToday: boolean) => {
-    const pluginList = []
+  const setPlugins = () => {
+    let 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
   }
 
@@ -152,9 +144,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
-    locale: {
-      rangeSeparator: ' to '
-    },
     maxDate,
     minDate,
     mode,
@@ -175,40 +164,17 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setPlugins(thisRangesEndToday),
+    plugins: setPlugins(),
     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/example.yml

@@ -8,8 +8,6 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
-  - date_picker_quick_pick_rails: Range (Quick Pick)
-  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -35,8 +33,6 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
-  - date_picker_quick_pick_react: Range (Quick Pick)
-  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - 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,6 +19,4 @@ 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 DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
-export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

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

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