playbook_ui 15.3.0.pre.alpha.PLAY2596datestackedcurrentyear12149 → 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -133,50 +133,3 @@ test('handles negative amounts correctly', () => {
   expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
   expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
 })
-
-test('handles numeric amounts correctly', () => {
-  render(
-    <>
-      <Currency
-          amount={320}
-          data={{ testid: 'test-numeric-default' }}
-      />
-      <Currency
-          abbreviate
-          amount={3200000}
-          data={{ testid: 'test-numeric-millions' }}
-      />
-      <Currency
-          amount={123456.78}
-          commaSeparator
-          data={{ testid: 'test-numeric-comma-decimals' }}
-      />
-      <Currency
-          amount={400.50}
-          data={{ testid: 'test-numeric-no-symbol' }}
-          symbol=""
-      />
-      <Currency
-          amount={500.55}
-          data={{ testid: 'test-numeric-medium-size' }}
-          size="md"
-      />
-      <Currency
-          amount={-600.70}
-          data={{ testid: 'test-numeric-negative' }}
-      />
-      <Currency
-          amount={0.00}
-          data={{ testid: 'test-numeric-null' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-numeric-default')).toHaveTextContent('$320')
-  expect(screen.getByTestId('test-numeric-millions')).toHaveTextContent('$3.2M')
-  expect(screen.getByTestId('test-numeric-comma-decimals')).toHaveTextContent('$123,456.78')
-  expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
-  expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
-  expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
-})

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: 342,
+  amount: "342",
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount={342}
+          amount="342"
           label="Light"
           marginBottom="md"
           size="sm"

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

@@ -350,14 +350,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncStartWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const element = document.querySelector(`#${syncStartWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
-        if (element?._dropdownRef?.current) {
-          element._dropdownRef.current.clearSelected();
-        } else {
-          const quickpick = element?._flatpickr;
-          quickpick?.clear();
-        }
+        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }
@@ -366,14 +360,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncEndWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const element = document.querySelector(`#${syncEndWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
-        if (element?._dropdownRef?.current) {
-          element._dropdownRef.current.clearSelected();
-        } else {
-          const quickpick = element?._flatpickr;
-          quickpick?.clear();
-        }
+        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }

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

@@ -48,8 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  # - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
-  - date_picker_and_dropdown_range: Range with Dropdown and 2 Date Pickers
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,5 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
-export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -19,7 +19,6 @@ type DateStackedProps = {
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
-  showCurrentYear?: boolean;
 };
 
 const sizes: {sm: 4, md: 3} = {
@@ -38,7 +37,6 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
     data={},
     htmlOptions={},
     size = "sm",
-    showCurrentYear = false,
   } = props;
   const classes = classnames(
     buildCss("pb_date_stacked_kit", align, size, {
@@ -57,7 +55,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
   return (
     <>
       {bold == false ? (
-        <div
+        <div 
             {...dataProps}
             {...htmlProps}
             className={classes}
@@ -70,10 +68,10 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                 text={DateTime.toDay(date).toString()}
             />
           </div>
-          {(currentYear != inputYear || showCurrentYear) && <Caption size="xs">{inputYear}</Caption>}
+          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div
+          <div 
               {...dataProps}
               {...htmlProps}
               className={classes}
@@ -91,7 +89,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                   size="4"
                   text={DateTime.toDay(date).toString()}
               />
-              {(currentYear != inputYear || showCurrentYear) && <Title size="4">{inputYear}</Title>}
+              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>
           </div>
       )}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -4,15 +4,16 @@
 
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("caption", props: { text: object.month }) %>
-        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
         <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
       </div>
 
     <% else %>
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
-        <%= pb_rails("title", props: { text: object.day, size: 4 }) %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
         <%= pb_rails("title", props: { text: object.year, size:4 }) %>
+
       </div>
 
     <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -16,8 +16,6 @@ module Playbook
                   default: false
       prop :bold, type: Playbook::Props::Boolean,
                   default: false
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       def classname
         generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
@@ -39,15 +37,11 @@ module Playbook
       end
 
       def year
-        if show_current_year
-          Playbook::PbKit::PbDateTime.new(date).to_year.to_s
-        else
-          current_year = DateTime.now.year.to_i
-          year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
-          if current_year != year
-            content_tag(:time, datetime: year) do
-              year.to_s
-            end
+        current_year = DateTime.now.year.to_i
+        year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
+        if current_year != year
+          content_tag(:time, datetime: year) do
+            year.to_s
           end
         end
       end

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -22,7 +22,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -36,7 +36,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -51,7 +51,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -66,7 +66,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="md"
+                size="md"      
             />
         )
 
@@ -80,7 +80,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -89,23 +89,6 @@ describe("DateStacked Kit", () => {
         expect(text.textContent).toEqual("2016")
     })
 
-    test("renders current year when showCurrentYear is true", () => {
-        render(
-            <DateStacked
-                align="left"
-                data={{ testid: testId }}
-                date={new Date()}
-                showCurrentYear
-                size="sm"
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_caption_kit_xs")
-        const currentYear = new Date().getFullYear()
-        expect(text.textContent).toEqual(`${currentYear}`)
-    })
-
     test("renders correct className when order reversed", () => {
         render(
             <DateStacked
@@ -113,7 +96,7 @@ describe("DateStacked Kit", () => {
                 data={{ testid: testId }}
                 date={futureDate}
                 reverse
-                size="sm"
+                size="sm"      
             />
         )
         const kit = screen.getByTestId(testId)
@@ -127,7 +110,7 @@ describe("DateStacked Kit", () => {
                 bold
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"
+                size="md"      
             />
         )
 
@@ -142,7 +125,7 @@ describe("DateStacked Kit", () => {
                 align="center"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"
+                size="md"      
             />
         )
 
@@ -156,7 +139,7 @@ describe("DateStacked Kit", () => {
                 align="right"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"
+                size="md"      
             />
         )
 

data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md

@@ -1 +1 @@
-Use to display the date, stacking month and day.
+Use to display the date, stacking month and day. Year will not show if it is the current year.

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - date_stacked_default: Default
   - date_stacked_not_current_year: Not Current Year
-  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
@@ -13,7 +12,6 @@ examples:
   react:
   - date_stacked_default: Default
   - date_stacked_not_current_year: Not Current Year
-  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold

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

@@ -1,7 +1,6 @@
 export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
 export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
-export { default as DateStackedCurrentYear } from './_date_stacked_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -12,7 +12,6 @@
 
 .pb_dropdown_default,
 .pb_dropdown_subtle,
-.pb_dropdown_quickpick,
 .pb_dropdown_default_separators_hidden,
 .pb_dropdown_subtle_separators_hidden {
   .dropdown_wrapper {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -12,7 +12,6 @@ import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
 import useDropdown from "./hooks/useDropdown";
-import  getQuickPickOptions from "./quickpick";
 
 import {
     separateChildComponents,
@@ -37,12 +36,9 @@ type DropdownProps = {
     label?: string;
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
-    options?: GenericObject;
+    options: GenericObject;
     separators?: boolean;
-    variant?: "default" | "subtle" | "quickpick";
-    rangeEndsToday?: boolean;
-    controlsStartId?: string;
-    controlsEndId?: string;
+    variant?: "default" | "subtle";
     activeStyle?: {
       backgroundColor?: string;
       fontColor?: string;
@@ -75,9 +71,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
-        rangeEndsToday = false,
-        controlsStartId,
-        controlsEndId,
         separators = true,
         variant = "default",
         activeStyle,
@@ -92,25 +85,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         globalProps(props),
         className
     );
-    // ------------- Quick Pick ---------------------------------
-    // Use QuickPick options when variant is "quickpick"
-    const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday) 
-        : (options || []);
-    // ----------------------------------------------------------
 
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
-      // Handle quickpick variant with string defaultValue (e.g., "This Month")
-      if (variant === "quickpick" && typeof defaultValue === "string" && defaultValue) {
-        const matchedOption = dropdownOptions.find(
-          (opt: GenericObject) => opt.label?.toLowerCase() === (defaultValue as string).toLowerCase()
-        );
-        return matchedOption || {};
-      }
-      
       if (multiSelect) {
         if (Array.isArray(defaultValue)) return defaultValue;
         return defaultValue && Object.keys(defaultValue).length
@@ -118,7 +97,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
           : [];
       }
       return defaultValue || {};
-    }, [multiSelect, defaultValue, variant, dropdownOptions]);
+    }, [multiSelect, defaultValue]);
 
     const [selected, setSelected] = useState<GenericObject | GenericObject[]>(
       initialSelected
@@ -172,7 +151,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     }, [isClosed])
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
-    const optionsWithBlankSelection = blankSelectionOption.concat(dropdownOptions);
+    const optionsWithBlankSelection = blankSelectionOption.concat(options);
 
     const availableOptions = useMemo(()=> {
         if (!multiSelect) return optionsWithBlankSelection;
@@ -224,21 +203,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                    setFilterItem("");
                    setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
-                   
-                   // Sync with DatePickers if this is a quickpick variant
-                   if (variant === "quickpick" && Array.isArray(clickedItem.value)) {
-                       const [start, end] = clickedItem.value;
-                       
-                       if (controlsStartId) {
-                           const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-                           startPicker?.setDate(start, true);
-                       }
-                       
-                       if (controlsEndId) {
-                           const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-                           endPicker?.setDate(end, true);
-                       }
-                   }
             }
              };
 
@@ -255,19 +219,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
-        
-        // Clear linked DatePickers as well if this is a quickpick variant with controls
-        if (variant === "quickpick") {
-          if (controlsStartId) {
-            const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-            startPicker?.clear();
-          }
-          
-          if (controlsEndId) {
-            const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-            endPicker?.clear();
-          }
-        }
       }
     };
 
@@ -281,8 +232,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         dark
     });
 
-    // Create an internal ref object that holds the imperative handle methods
-    const imperativeRef = useRef({
+    useImperativeHandle(ref, () => ({
       clearSelected: () => {
         if (multiSelect) {
           setSelected([]);
@@ -294,61 +244,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setFilterItem("");
         setIsDropDownClosed(true);
       },
-    });
-
-    // Update imperativeRef whenever dependencies change
-    // (needed for external clearing of normal Dropdown + DatePicker-synced QuickPick Dropdown)
-    useEffect(() => {
-      imperativeRef.current = {
-        clearSelected: () => {
-          if (multiSelect) {
-            setSelected([]);
-            onSelect && onSelect([]);
-          } else {
-            setSelected({});
-            onSelect && onSelect(null);
-          }
-          setFilterItem("");
-          setIsDropDownClosed(true);
-        },
-      };
-    }, [multiSelect, onSelect, setSelected, setFilterItem, setIsDropDownClosed]);
-
-    useImperativeHandle(ref, () => imperativeRef.current);
-
-    // Create a ref to the outer div to attach the dropdown ref for DatePicker sync
-    const outerDivRef = useRef<HTMLDivElement>(null);
-    
-    useEffect(() => {
-      // Attach the ref to the DOM element so DatePicker can access it
-      if (outerDivRef.current && variant === "quickpick" && id) {
-        (outerDivRef.current as any)._dropdownRef = imperativeRef;
-      }
-    }, [variant, id]);
-
-    // Sync defaultValue with DatePickers on mount when 3 input pattern is used
-    useEffect(() => {
-      if (variant === "quickpick" && initialSelected && typeof initialSelected === "object" && !Array.isArray(initialSelected)) {
-        const value = initialSelected.value;
-        
-        if (Array.isArray(value) && value.length === 2) {
-          const [start, end] = value;
-          
-          // Wait for DatePickers to be initialized
-          setTimeout(() => {
-            if (controlsStartId) {
-              const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-              startPicker?.setDate(start, true);
-            }
-            
-            if (controlsEndId) {
-              const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-              endPicker?.setDate(end, true);
-            }
-          }, 0);
-        }
-      }
-    }, [variant, initialSelected, controlsStartId, controlsEndId]);
+    }));
 
     return (
         <div {...ariaProps}
@@ -356,7 +252,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
-            ref={outerDivRef}
             style={{position: "relative"}}
         >
             <DropdownContext.Provider

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

@@ -49,9 +49,4 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
-  - dropdown_quickpick: Quick Pick Variant
-  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
-  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
-
 

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

@@ -22,8 +22,4 @@ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_sel
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
 export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
-export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
-export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
-export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'