playbook_ui 16.8.0.pre.alpha.play293416882 → 16.8.0.pre.alpha.play299216890

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1caeb431628b18480502df25ac193c5805acf46b88d5a43268fe923ac49ee33d
-  data.tar.gz: 38c003583580e19d571e70c4c5ea1d2e80d6f7bbbcbea996aa9d251c647f2410
+  metadata.gz: 55ce3fc93b65b84a7675452fc441dc46474669968c56a5170511fbab48f609a7
+  data.tar.gz: 3845a85642d2eca81306da516098d47e091e14c96f287b31cbaa9314371b23be
 SHA512:
-  metadata.gz: 2f3ce2910ea7cd2f3de885fe6dd0509d23f34d6429bad08f78bdadd5bf8bfced12860bc16810ead019728fb4781c33f251661833046135306f026d75d12eb69f
-  data.tar.gz: a03a5495e8c1752c6d9be8b1edd6d2f7ad943dacfe3070ddf130b6ef0f2994299bc6bb028dde7963a6d875b64cb4e830a8073f7903a9d2ca85e59af6630ec15a
+  metadata.gz: 6c35e16d11f45e25d82a5d945a755500eb142007a0d420f9b20c05f0941eb9a9629ddbc79c226e0eb996ec8a99dee17eb17a4115ebe40854a9bf15fa36367880
+  data.tar.gz: 53cef8d58713fd21817e3a37cc85f728610dc1700017a19e57e5abae1148b1d7a581fcc015023a32c5fe87b46756fb6292024deca70999605ee7be0116adc6b7

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

@@ -32,6 +32,7 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
+  yearAscending?: boolean,
   yearRange: number[],
   controlsStartId?: string,
     controlsEndId?: string,
@@ -70,6 +71,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
+    yearAscending,
     yearRange,
     controlsStartId,
     controlsEndId,
@@ -515,8 +517,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

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,32 +1,22 @@
-import React, { useEffect } from 'react'
+import React 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,
-  interactiveFilters = {},
-}: CurrentFiltersProps): React.ReactElement => {
+const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
   const displayableFilters = omitBy(filters, hiddenFilters)
 
   return (
@@ -45,50 +35,33 @@ const CurrentFilters = ({
       { !isEmpty(filters) &&
         <div className="filters">
           <div className="left_gradient" />
-            {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>
-                  }
+            {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}
+                  />
                 </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, InteractiveFilters } from './CurrentFilters'
+import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -17,7 +17,6 @@ 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,
@@ -29,7 +28,6 @@ const FilterDouble = ({
   sortOptions,
   sortValue,
   filters,
-  interactiveFilters,
   results,
   children,
   dark,
@@ -59,7 +57,6 @@ 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, InteractiveFilters } from './CurrentFilters'
+import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -16,7 +16,6 @@ import SortMenu, {
 export type FilterSingleProps = {
   children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
-  interactiveFilters?: InteractiveFilters,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
@@ -28,7 +27,6 @@ const FilterSingle = ({
   sortOptions,
   sortValue,
   filters,
-  interactiveFilters,
   results,
   children,
   dark,
@@ -62,7 +60,6 @@ const FilterSingle = ({
             <CurrentFilters
                 dark={dark}
                 filters={filters}
-                interactiveFilters={interactiveFilters}
             />
           </>
         }

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -1,6 +1,5 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
-@import "../tokens/border_radius";
 
 .pb_filter_sort_menu {
   li {
@@ -71,26 +70,6 @@
       padding-right: $space_xs;
       border-right: 1px solid $border_light !important;
     }
-
-    .filter.interactive {
-      padding-top: 2px;
-      padding-bottom: 2px;
-    }
-  }
-
-  // Interactive filter chip: clickable button that opens a popover whose
-  // contents are the editor for that filter type.
-  .pb_interactive_filter_trigger {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-    text-align: left;
-
-    &:focus-visible {
-      outline: $primary solid 2px;
-      outline-offset: -1px;
-    }
   }
 
   .maskContainer::after {
@@ -124,70 +103,4 @@
       opacity:0;
     }
   }
-}
-
-.pb_popover_tooltip.pb_interactive_filter_editor {
-  position: fixed;
-  top: 0;
-  left: 0;
-  margin: 0;
-}
-
-// Popover contents for an interactive filter.
-.pb_interactive_filter_editor {
-  min-width: 220px;
-
-  .pb_date_picker_kit {
-    margin-bottom: 0 !important;
-  }
-
-  // Select editor: option list. (Native HTML <select> can't be auto-opened
-  // without a user gesture in modern browsers, so we render options
-  // directly — one click on the chip = options visible.)
-  .pb_interactive_filter_options {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    border-radius: $border_rad_heavier;
-    border: 1px solid $border_light;
-    max-height: 280px;
-    overflow-y: auto;
-  }
-
-  .pb_interactive_filter_option {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $space_xs;
-    padding: $space_xs $space_sm;
-    cursor: pointer;
-    font-size: $font_base;
-    color: $text_lt_default;
-    transition: background-color 0.15s ease;
-    border-bottom: 1px solid $border_light;
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      background-color: rgba($primary, 0.08);
-    }
-
-    &.active {
-      background-color: $primary;
-      color: $white;
-    }
-  }
-
-  &.pb_interactive_filter_editor--date-picker {
-    // flatpickr inline mode renders directly into our wrapper; suppress its
-    // own shadow since the popover already provides the floating surface.
-    .flatpickr-calendar {
-      box-shadow: none;
-    }
-    .flatpickr-calendar.inline {
-      position: static;
-      top: 0;
-    }
-  }
-}
+}

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

@@ -12,7 +12,6 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_within_turbo_frames: Within Turbo Frames
-  - filter_interactive: Interactive Applied Filters
 
   react:
   - filter_default: Default
@@ -26,5 +25,4 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_sidebar: Sidebar
-  - filter_interactive_react: Interactive Applied Filters
 

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

@@ -8,5 +8,4 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
-export { default as FilterSidebar } from './_filter_sidebar.jsx'
-export { default as FilterInteractiveReact } from './_filter_interactive_react.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -18,87 +18,10 @@
                 </div>
               <% end %>
               <% object.filters&.each do |filter| %>
-                <% next unless filter[:name].present? %>
-                <% interactive_config = object.interactive_config_for(filter[:name]) %>
-                <% if interactive_config.present? %>
-                  <%
-                    chip_id        = "pb-interactive-filter-#{object.id || 'kit'}-#{filter[:name].to_s.parameterize}"
-                    popover_id     = "#{chip_id}-popover"
-                    type           = object.interactive_value(interactive_config, :type).to_s
-                    display_value  = object.interactive_display_value(interactive_config, filter[:value])
-                    is_date_picker = type == "date-picker"
-                    is_options     = %w[select dropdown].include?(type)
-
-                    chip_data_attrs = {
-                      "pb-interactive-filter" => "true",
-                      "pb-filter-name"        => filter[:name],
-                      "pb-filter-type"        => type,
-                      "pb-filter-popover-id"  => popover_id,
-                      "pb-filter-target"      => object.interactive_value(interactive_config, :target_input),
-                      "pb-filter-value"       => filter[:value],
-                      "pb-filter-auto-submit" => object.interactive_value(interactive_config, :auto_submit),
-                    }
-                    if is_date_picker
-                      chip_data_attrs.merge!(
-                        "pb-filter-date-format" => object.interactive_value(interactive_config, :format),
-                        "pb-filter-date-mode"   => object.interactive_value(interactive_config, :mode),
-                        "pb-filter-date-min"    => object.interactive_value(interactive_config, :min_date),
-                        "pb-filter-date-max"    => object.interactive_value(interactive_config, :max_date),
-                      )
-                    end
-                  %>
-                  <div class="filter interactive">
-                    <button type="button"
-                            class="pb_interactive_filter_trigger"
-                            id="<%= chip_id %>"
-                            <%= chip_data_attrs.compact_blank.map { |k, v| "data-#{k}=\"#{ERB::Util.html_escape(v)}\"" }.join(" ").html_safe %>>
-                      <div class="pb_interactive_filter_text">
-                        <%= pb_rails("caption", props: { text: filter[:name] }) %>
-                        <%= pb_rails("flex", props: { align_items: "center", gap: "xxs" }) do %>
-                          <%= pb_rails("title", props: {
-                            text: display_value.presence || "—",
-                            size: 4,
-                            data: { "pb-filter-value-display" => true },
-                          }) %>
-                          <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, size: "xs", color: "primary" }) %>
-                        <% end %>
-                      </div>
-                    </button>
-
-                    <%# Popover tooltip is moved to <body> in index.ts (connect)
-                        to escape the filter row's overflow-x clipping. We
-                        reuse pb_popover's CSS classes for visual consistency
-                        rather than using the popover kit directly because
-                        that kit doesn't portal its tooltip out of its DOM
-                        parent. %>
-                    <div class="pb_popover_tooltip hide pb_interactive_filter_editor pb_interactive_filter_editor--<%= type %>" id="<%= popover_id %>" role="tooltip">
-                      <div class="pb_popover_body">
-                        <% if is_options %>
-                          <ul class="pb_interactive_filter_options" role="listbox">
-                            <% object.interactive_options(interactive_config).each do |opt| %>
-                              <% opt_value = object.interactive_option_value(interactive_config, opt) %>
-                              <% is_active = opt_value.to_s == filter[:value].to_s %>
-                              <% opt_label = object.interactive_option_label(opt, opt_value) %>
-                              <li class="pb_interactive_filter_option<%= ' active' if is_active %>"
-                                  tabindex="0"
-                                  role="option"
-                                  aria-selected="<%= is_active %>"
-                                  data-pb-filter-option-value="<%= opt_value %>"
-                                  data-pb-filter-option-label="<%= opt_label %>">
-                                <span><%= opt_label %></span>
-                              </li>
-                            <% end %>
-                          </ul>
-                        <% elsif is_date_picker %>
-                          <div data-pb-filter-date-mount></div>
-                        <% end %>
-                      </div>
-                    </div>
-                  </div>
-                <% else %>
+                <% if filter[:name].present? %>
                   <div class="filter">
-                    <%= pb_rails("caption", props: { text: filter[:name] }) %>
-                    <%= pb_rails("title", props: { size: 4, tag: "h4", text: filter[:value] }) %>
+                    <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                    <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
                   </div>
                 <% end %>
               <% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require_relative "../pb_dropdown/quickpick_helper"
-
 module Playbook
   module PbFilter
     class Filter < Playbook::KitBase
@@ -19,64 +17,11 @@ module Playbook
                        default: "bottom-start"
       prop :popover_props, type: Playbook::Props::HashProp,
                            default: {}
-      prop :interactive_filters, type: Playbook::Props::HashArray, default: []
 
       def classname
         generate_classname("pb_filter_kit").rstrip
       end
 
-      def interactive_config_for(filter_name)
-        interactive_filters_index[filter_name.to_s]
-      end
-
-      def interactive_value(config, key)
-        return nil if config.nil?
-
-        config[key]
-      end
-
-      def interactive_options(config)
-        return [] if config.nil?
-
-        config = config.with_indifferent_access
-        if interactive_quickpick?(config) && Array(config[:options]).blank?
-          return Playbook::PbDropdown::QuickpickHelper.get_quickpick_options(
-            range_ends_today: config[:range_ends_today] || false,
-            custom_quick_pick_dates: config[:custom_quick_pick_dates] || {}
-          )
-        end
-
-        Array(config[:options])
-      end
-
-      def interactive_option_value(config, option)
-        config = config.with_indifferent_access
-        option = option.with_indifferent_access
-
-        if config[:type].to_s == "dropdown"
-          option[:id] || option[:value] || option[:label]
-        else
-          option[:value] || option[:text] || option[:label]
-        end
-      end
-
-      def interactive_option_label(option, fallback = nil)
-        option = option.with_indifferent_access
-        option[:label] || option[:text] || fallback
-      end
-
-      def interactive_display_value(config, raw_value)
-        return raw_value if config.nil?
-        return raw_value unless %w[select dropdown].include?(config[:type].to_s)
-
-        match = interactive_options(config).find do |opt|
-          interactive_option_value(config, opt).to_s == raw_value.to_s
-        end
-        return raw_value unless match
-
-        interactive_option_label(match, raw_value)
-      end
-
       def result_text
         case results
         when 1
@@ -106,22 +51,6 @@ module Playbook
           ""
         end
       end
-
-    private
-
-      def interactive_filters_index
-        @interactive_filters_index ||= Array(interactive_filters).each_with_object({}) do |entry, acc|
-          next unless entry.is_a?(Hash)
-
-          config = entry.with_indifferent_access
-          name = config[:name].to_s
-          acc[name] = config if name.present?
-        end
-      end
-
-      def interactive_quickpick?(config)
-        config[:type].to_s == "dropdown" && config[:variant].to_s == "quickpick"
-      end
     end
   end
 end