playbook_ui 16.9.0 → 16.10.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1bf2d157b05e934cbfa3297c60f74cabb576373b5cb3b4a2b61d48df0ed27a3
-  data.tar.gz: 91635a39004a1f4169780f5065c21207b407308d0509d88710e9ad55b5eefc3c
+  metadata.gz: 0c56cffd7ae20d303e7ebfb111960cd77e6b3ef3020867b335b91ad0743ec88c
+  data.tar.gz: 12ed387ffcb0607f46a4ef6f231bb7823b5b3c81f7a988783b8b652491ef29cf
 SHA512:
-  metadata.gz: f9d9fe0b6fea54f0eb1a347d9dd1b7d6c4d7a930825e5818c781c406edd89d444675b5772e3cba27e4d4de5f60acdf6e536a7f98dd905d91669dc95d616db777
-  data.tar.gz: 37fa1f6e6c2610ecfd26f259be1e048053c37a562511007f05efb577cc3659ba9745518ff9214d63e92da275b45210228d86fe2f3e2500e5e91b1f5f9edc404c
+  metadata.gz: dc097cb2fe1d11fefe23ea335188808e0a15abcf214e0de13c7f8b6f1320974af4f1d33c813bf46c3650007ab0e903e838e91738ae8cb48c93c9875f28ccfc66
+  data.tar.gz: 2ef66b6d238eb564c593ceb9eaad541f898a5bbad90afd2c834b53dfbcf4624ce56e350eae499b674f7cccece8ff40d1c50201838529782fbf330a92c920b86a

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

@@ -87,6 +87,7 @@ type DatePickerProps = {
   thisRangesEndToday?: boolean,
   timeFormat?: string,
   type?: string,
+  yearAscending?: boolean,
   yearRange?: number[],
   controlsStartId?: string,
     controlsEndId?: string,
@@ -140,6 +141,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     showTimezone = false,
     staticPosition = true,
     thisRangesEndToday = false,
+    yearAscending = false,
     yearRange = [1900, 2100],
     controlsStartId,
     controlsEndId,
@@ -199,6 +201,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       showTimezone,
       staticPosition,
       thisRangesEndToday,
+      yearAscending,
       yearRange,
       controlsStartId,
       controlsEndId,

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

@@ -89,6 +89,8 @@ module Playbook
                            default: ""
       prop :cursor, type: Playbook::Props::String,
                     default: "pointer"
+      prop :year_ascending, type: Playbook::Props::Boolean,
+                            default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -122,6 +124,7 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
+          yearAscending: year_ascending,
           controlsStartId: controls_start_id,
           controlsEndId: controls_end_id,
           syncStartWith: sync_start_with,

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

@@ -7,7 +7,10 @@ import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
 import { getAllIcons } from '../utilities/icons/allicons';
 
-const angleDown = getAllIcons().angleDown.string
+const { angleDown, angleLeft, angleRight } = getAllIcons()
+const angleDownString = angleDown.string
+const angleLeftString = angleLeft.string
+const angleRightString = angleRight.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -32,6 +35,7 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
+  yearAscending?: boolean,
   yearRange: number[],
   controlsStartId?: string,
     controlsEndId?: string,
@@ -70,6 +74,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
+    yearAscending,
     yearRange,
     controlsStartId,
     controlsEndId,
@@ -365,7 +370,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate: effectiveMaxDate,
     minDate: effectiveMinDate,
     mode,
-    nextArrow: '<i class="far fa-angle-right"></i>',
+    nextArrow: `<div style="height: 14px;">${angleRightString}</div>`,
     onOpen: [(_selectedDates, _dateStr, fp) => {
       // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
       if (hasOutOfRangeDefault) {
@@ -437,7 +442,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
     position,
     positionElement: getPositionElement(positionElement),
-    prevArrow: '<i class="far fa-angle-left"></i>',
+    prevArrow: `<div style="height: 14px;">${angleLeftString}</div>`,
     static: staticPosition,
   })
 
@@ -515,8 +520,14 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // create html option tags for desired years
   let years = ''
-  for (let year = setMaxYear; year >= setMinYear; year--) {
-    years += `<option value="${year}">${year}</option>`
+  if (yearAscending) {
+    for (let year = setMinYear; year <= setMaxYear; year++) {
+      years += `<option value="${year}">${year}</option>`
+    }
+  } else {
+    for (let year = setMaxYear; year >= setMinYear; year--) {
+      years += `<option value="${year}">${year}</option>`
+    }
   }
 
   // variablize each dropdown selector
@@ -651,12 +662,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   // Adding dropdown icons to year and month select
-  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
+  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDownString}</i>`)
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
-  // if (picker.weekElements[0].parentElement){
-  //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
-  // }
+    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDownString}</i>`)}
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerYearAsc = (props) => (
+  <div>
+    <DatePicker
+        pickerId="date-picker-date-asc"
+        yearAscending
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerYearAsc

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

@@ -0,0 +1 @@
+`yearAscending`/`year_ascending` is a boolean prop that if set to true, will render the years in the year dropdown in chronological order. This prop is set to false by default. 

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -16,6 +16,7 @@
     "showTimezone": false,
     "staticPosition": true,
     "thisRangesEndToday": false,
+    "yearAscending": false,
     "controlsStartId": "",
     "controlsEndId": "",
     "syncStartWith": "",

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

@@ -23,6 +23,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_year_asc: Year Ascending
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
@@ -58,6 +59,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_year_asc: Year Ascending
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only

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

@@ -30,3 +30,4 @@ export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
 export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
 export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";
+export { default as DatePickerYearAsc } from './_date_picker_year_asc.jsx'

data/app/pb_kits/playbook/pb_date_picker/kit.schema.json

@@ -257,6 +257,14 @@
         "react"
       ]
     },
+    "yearAscending": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "yearRange": {
       "type": "array",
       "platforms": [

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

@@ -1,22 +1,32 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { isEmpty, omitBy, map } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
 import Title from '../../pb_title/_title'
+import InteractiveFilter, { InteractiveFilterConfig } from './InteractiveFilter'
 
 export type FilterDescription = {
   [key: string]: string | null | boolean,
 }
 
+export type InteractiveFilters = {
+  [key: string]: InteractiveFilterConfig,
+}
+
 export type CurrentFiltersProps = {
   dark: boolean,
   filters: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
 }
 
 const hiddenFilters = (value: any) => isEmpty(value) && value !== true
 
-const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
+const CurrentFilters = ({
+  dark,
+  filters,
+  interactiveFilters = {},
+}: CurrentFiltersProps): React.ReactElement => {
   const displayableFilters = omitBy(filters, hiddenFilters)
 
   return (
@@ -35,33 +45,50 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
       { !isEmpty(filters) &&
         <div className="filters">
           <div className="left_gradient" />
-            {map(displayableFilters, (value, name) => (
-              <div
-                  className="filter"
-                  key={`filter-${name}`}
-              >
-                { value === true ?
-                <Title
-                    dark={dark}
-                    size={4}
-                    tag="h4"
-                    text={`${name}`}
-                /> :
-                <div>
-                  <Caption
-                      dark={dark}
-                      text={`${name}`}
-                  />
-                  <Title
-                      dark={dark}
-                      size={4}
-                      tag="h4"
-                      text={value}
-                  />
+            {map(displayableFilters, (value, name) => {
+              const interactiveConfig = interactiveFilters[name]
+              return (
+                <div
+                    className={`filter${interactiveConfig ? ' interactive' : ''}`}
+                    key={`filter-${name}`}
+                >
+                  { interactiveConfig ?
+                    <InteractiveFilter
+                        config={interactiveConfig}
+                        dark={dark}
+                        editorValue={interactiveConfig.editorValue}
+                        name={String(name)}
+                        value={
+                          interactiveConfig.value !== undefined
+                            ? interactiveConfig.value
+                            : value === true
+                              ? ''
+                              : (value as string)
+                        }
+                    /> :
+                    value === true ?
+                    <Title
+                        dark={dark}
+                        size={4}
+                        tag="h4"
+                        text={`${name}`}
+                    /> :
+                    <div>
+                      <Caption
+                          dark={dark}
+                          text={`${name}`}
+                      />
+                      <Title
+                          dark={dark}
+                          size={4}
+                          tag="h4"
+                          text={value}
+                      />
+                    </div>
+                  }
                 </div>
-                }
-              </div>
-            ))}
+              )
+            })}
           <div className="right_gradient" />
         </div>
       }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import CurrentFilters, { FilterDescription, InteractiveFilters } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -17,6 +17,7 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 export type FilterDoubleProps = {
   children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
@@ -28,6 +29,7 @@ const FilterDouble = ({
   sortOptions,
   sortValue,
   filters,
+  interactiveFilters,
   results,
   children,
   dark,
@@ -57,6 +59,7 @@ const FilterDouble = ({
       <CurrentFilters
           dark={dark}
           filters={filters}
+          interactiveFilters={interactiveFilters}
       />
     </Flex>
     <SectionSeparator dark={dark} />

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

@@ -3,7 +3,7 @@ import { isEmpty } from '../../utilities/object'
 
 import Flex from '../../pb_flex/_flex'
 
-import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import CurrentFilters, { FilterDescription, InteractiveFilters } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -16,6 +16,7 @@ import SortMenu, {
 export type FilterSingleProps = {
   children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
@@ -27,6 +28,7 @@ const FilterSingle = ({
   sortOptions,
   sortValue,
   filters,
+  interactiveFilters,
   results,
   children,
   dark,
@@ -60,6 +62,7 @@ const FilterSingle = ({
             <CurrentFilters
                 dark={dark}
                 filters={filters}
+                interactiveFilters={interactiveFilters}
             />
           </>
         }

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

@@ -0,0 +1,277 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import flatpickr from 'flatpickr'
+import { Instance } from 'flatpickr/dist/types/instance'
+
+import Flex from '../../pb_flex/_flex'
+import Caption from '../../pb_caption/_caption'
+import Icon from '../../pb_icon/_icon'
+import PbReactPopover from '../../pb_popover/_popover'
+import getQuickPickOptions from '../../pb_dropdown/quickpick'
+import { uniqueId } from '../../utilities/object'
+import Title from '../../pb_title/_title'
+
+export type SelectInteractiveConfig = {
+  type: 'select',
+  options: { value: string, text?: string }[],
+  value?: string,
+  /** Draft value for the inline editor active state (chip label uses `value`). */
+  editorValue?: string,
+  onChange: (value: string) => void,
+}
+
+export type DropdownInteractiveConfig = {
+  type: 'dropdown',
+  options?: { value?: string, label: string, id?: string }[],
+  variant?: 'default' | 'quickpick',
+  rangeEndsToday?: boolean,
+  customQuickPickDates?: {
+    override?: boolean,
+    dates: {
+      label: string,
+      value: string[] | { timePeriod: string, amount: number },
+    }[],
+  },
+  value?: string,
+  editorValue?: string,
+  onChange: (value: string) => void,
+}
+
+export type DatePickerInteractiveConfig = {
+  type: 'date-picker',
+  value?: string,
+  editorValue?: string,
+  onChange: (value: string) => void,
+  format?: string,
+  minDate?: string,
+  maxDate?: string,
+  mode?: 'single' | 'range' | 'multiple',
+}
+
+export type InteractiveFilterConfig =
+  | SelectInteractiveConfig
+  | DropdownInteractiveConfig
+  | DatePickerInteractiveConfig
+
+const dropdownOptionsFor = (
+  config: DropdownInteractiveConfig
+): { value: string, label: string }[] => {
+  if (config.variant === 'quickpick' && !config.options?.length) {
+    return getQuickPickOptions(
+      config.rangeEndsToday,
+      config.customQuickPickDates
+    ).map((opt) => ({
+      value: opt.id || opt.label,
+      label: opt.label,
+    }))
+  }
+
+  return (config.options || []).map((opt) => ({
+    value: opt.id || opt.value || opt.label,
+    label: opt.label,
+  }))
+}
+
+type InteractiveFilterProps = {
+  dark?: boolean,
+  name: string,
+  value: string,
+  editorValue?: string,
+  config: InteractiveFilterConfig,
+}
+
+const labelFor = (
+  config: InteractiveFilterConfig,
+  value: string
+): string => {
+  if (config.type === 'select') {
+    const match = config.options.find((opt) => opt.value === value)
+    if (match) return match.text || match.value
+  }
+  if (config.type === 'dropdown') {
+    const match = dropdownOptionsFor(config).find((opt) => opt.value === value)
+    if (match) return match.label || match.value
+  }
+  return value
+}
+
+type ChipVisualProps = {
+  dark: boolean,
+  name: string,
+  displayValue: string,
+}
+
+const ChipVisual = ({
+  dark,
+  name,
+  displayValue,
+}: ChipVisualProps): React.ReactElement => (
+  <div className="pb_interactive_filter_container">
+    <Caption
+        dark={dark}
+        text={name}
+    />
+    <Flex
+        alignItems="center"
+        gap="xxs"
+    >
+      <Title
+          dark={dark}
+          size={4}
+          text={displayValue || '—'}
+      />
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="angle-down"
+          size="xs"
+      />
+    </Flex>
+  </div>
+)
+
+type InlineCalendarProps = {
+  calendarValue: string,
+  config: DatePickerInteractiveConfig,
+  onSinglePick: () => void,
+}
+
+const InlineCalendar = ({
+  calendarValue,
+  config,
+  onSinglePick,
+}: InlineCalendarProps): React.ReactElement => {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+    const fp = flatpickr(containerRef.current, {
+      inline: true,
+      defaultDate: calendarValue || undefined,
+      mode: config.mode || 'single',
+      dateFormat: config.format || 'm/d/Y',
+      minDate: config.minDate,
+      maxDate: config.maxDate,
+      nextArrow: '<i class="far fa-angle-right"></i>',
+      prevArrow: '<i class="far fa-angle-left"></i>',
+      onChange: (_selectedDates, dateStr) => {
+        config.onChange(dateStr)
+        if ((config.mode || 'single') === 'single') onSinglePick()
+      },
+    }) as Instance
+    return () => fp.destroy()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [calendarValue])
+
+  return <div ref={containerRef} />
+}
+
+const InteractiveFilter = ({
+  dark = false,
+  name,
+  value,
+  editorValue,
+  config,
+}: InteractiveFilterProps): React.ReactElement => {
+  const [open, setOpen] = useState(false)
+  const pickerId = useMemo(() => uniqueId('interactive-filter-date-'), [])
+  const displayValue = labelFor(config, value)
+  const activeValue =
+    editorValue ??
+    config.editorValue ??
+    value
+
+  const renderEditor = () => {
+    switch (config.type) {
+      case 'select':
+      case 'dropdown': {
+        const options =
+          config.type === 'dropdown'
+            ? dropdownOptionsFor(config)
+            : config.options.map((opt) => ({
+                value: opt.value,
+                label: opt.text || opt.value,
+              }))
+        return (
+          <ul
+              className="pb_interactive_filter_options"
+              role="listbox"
+          >
+            {options.map((option) => {
+              const isActive = option.value === activeValue
+              return (
+                <li
+                    aria-selected={isActive}
+                    className={`pb_interactive_filter_option${
+                      isActive ? ' active' : ''
+                    }`}
+                    key={option.value}
+                    onClick={() => {
+                      config.onChange(option.value)
+                      setOpen(false)
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault()
+                        config.onChange(option.value)
+                        setOpen(false)
+                      }
+                    }}
+                    role="option"
+                    tabIndex={0}
+                >
+                  <span>{option.label}</span>
+                </li>
+              )
+            })}
+          </ul>
+        )
+      }
+
+      case 'date-picker':
+        return (
+          <InlineCalendar
+              calendarValue={activeValue}
+              config={config}
+              onSinglePick={() => setOpen(false)}
+          />
+        )
+    }
+  }
+
+  const trigger = (
+    <button
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        className={`pb_interactive_filter_trigger${dark ? ' dark' : ''}`}
+        data-picker-id={pickerId}
+        onClick={() => setOpen((prev) => !prev)}
+        type="button"
+    >
+      <ChipVisual
+          dark={dark}
+          displayValue={displayValue}
+          name={name}
+      />
+    </button>
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        placement="bottom-start"
+        reference={trigger}
+        shouldClosePopover={() => setOpen(false)}
+        show={open}
+        zIndex={10}
+    >
+      <div
+          className={`pb_interactive_filter_editor pb_interactive_filter_editor--${config.type}`}
+      >
+        {renderEditor()}
+      </div>
+    </PbReactPopover>
+  )
+}
+
+export default InteractiveFilter