RubyGems - playbook_ui - Versions diffs - 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209 → 15.3.0.pre.alpha.PLAY2565formkitsubmitfix11681 - Mend

playbook_ui 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209 → 15.3.0.pre.alpha.PLAY2565formkitsubmitfix11681

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (156) hide show

data/app/pb_kits/playbook/pb_currency/_currency.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ import Title from '../pb_title/_title'
 type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
-  amount: string | number,
+  amount: string,
   aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
@@ -59,19 +59,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
-  // Convert numeric input to string format
-  const convertAmount = (input: string | number): string => {
-    if (typeof input === 'number') {
-      if (input === 0 && !nullDisplay) {
-        return ""
-      }
-      return input.toFixed(2)
-    }
-    return input
-  }
-  const currencyAmount = convertAmount(amount)
   const emphasizedClass = emphasized ? '' : '_deemphasized'
   let variantClass
@@ -81,7 +68,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
-  const [whole, decimal = '00'] = currencyAmount.split('.')
+  const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -105,19 +92,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
-  const getMatchingDecimalAmount = decimals === "matching" ? currencyAmount : whole
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
   const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
     const [wholePart, decimalPart] = amount.split('.');
     const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
   const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = currencyAmount.startsWith("-") && swapNegative ? "-" : ""
+  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
   const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
   const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
@@ -165,7 +152,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {handleNegative}{symbol}
               </Body>
               <Title
                   className="pb_currency_value"
                   dark={dark}
@@ -173,7 +160,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {getAmount}
               </Title>
               <Body
                   className="unit"
                   color="light"

data/app/pb_kits/playbook/pb_currency/currency.rb CHANGED Viewed

@@ -17,7 +17,8 @@ module Playbook
       prop :symbol, type: Playbook::Props::String,
                     default: "$"
-      prop :amount, required: true
+      prop :amount, type: Playbook::Props::String,
+                    required: true
       prop :unit, type: Playbook::Props::String,
                   required: false
@@ -91,7 +92,7 @@ module Playbook
       end
       def negative_sign
-        currency_amount.starts_with?("-") && swap_negative ? "-" : ""
+        amount.starts_with?("-") && swap_negative ? "-" : ""
       end
       def body_props
@@ -116,32 +117,10 @@ module Playbook
         end
       end
-      def currency_amount
-        @currency_amount ||= convert_amount(amount)
-      end
     private
-      # Convert numeric input to string format
-      def convert_amount(input)
-        if input.is_a?(Numeric)
-          if input.zero? && null_display.nil?
-            ""
-          else
-            format("%.2f", input)
-          end
-        # Handle string representations of zero
-        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
-          ""
-        else
-          input.to_s
-        end
-      end
       def whole_value
-        return "" if currency_amount.blank?
-        value = currency_amount.split(".").first
+        value = amount.split(".").first
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -150,9 +129,7 @@ module Playbook
       end
       def decimal_value
-        return "00" if currency_amount.blank?
-        currency_amount.split(".")[1] || "00"
+        amount.split(".")[1] || "00"
       end
       def units_element
@@ -170,9 +147,7 @@ module Playbook
       end
       def abbreviated_value(index = 0..-2)
-        return "" if currency_amount.blank?
-        value = currency_amount.split(".").first.gsub(",", "").to_i
+        value = amount.split(".").first.gsub(",", "").to_i
         abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
         abbreviated_num[index]
       end
@@ -199,11 +174,9 @@ module Playbook
         if decimals == "matching"
           if comma_separator
-            return "" if currency_amount.blank?
-            number_with_delimiter(currency_amount.gsub(",", ""))
+            number_with_delimiter(amount.gsub(",", ""))
           else
-            currency_amount
+            amount
           end
         else
           whole_value

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.rb CHANGED Viewed

@@ -85,8 +85,6 @@ module Playbook
                              default: ""
       prop :sync_end_with, type: Playbook::Props::String,
                            default: ""
-      prop :cursor, type: Playbook::Props::String,
-                    default: "pointer"
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_picker/sass_partials/_quick_pick_styles.scss CHANGED Viewed

@@ -9,20 +9,29 @@ $pb_card_border_radius: $border_rad_heavier;
 // used to display dropdown on the left of the calender
 .quick-pick-drop-down {
-  width: 100%;
+  width: auto;
+  display: grid;
 }
 .quick-pick-ul {
+  padding: $space_xs 0px;
   margin: 0;
   list-style: none;
 }
 .nav-item {
   list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: $space_xs $space_sm;
 }
 .nav-item-link {
   text-decoration: none;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_light;
+  border-radius: $pb_card_border_radius;
   padding: $space_xs 14px;
   transition-property: color, background-color;
   transition-duration: 0.15s;
@@ -31,21 +40,15 @@ $pb_card_border_radius: $border_rad_heavier;
   color: $charcoal;
   font-size: $font_default;
   font-weight: $regular;
-  text-align: left;
-  border-bottom: 1px solid $border_light;
   &.active {
-    color: $white;
-    background-color: $primary;
-    &:hover {
-      background-color: $product_1_background;
-      color: $white;
-    }
+    border-width: 2px;
+    border-color: $primary;
   }
   @media (hover:hover) {
     &:hover {
       cursor: pointer;
-      background-color: $bg_light;
-      color: $primary;
+      box-shadow: $shadow-deep;
+      border-color: $slate;
     }
   }
 }
@@ -54,3 +57,19 @@ $pb_card_border_radius: $border_rad_heavier;
 .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
   display: none;
 }
+@media only screen and (max-width: 767px) {
+  .quick-pick-ul {
+    padding: $space_xs $space_xs;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  .nav-item {
+    margin: $space_xxs $space_xs;
+  }
+  .nav-item-link {
+    padding: $space_xs $space_xxs;
+  }
+}

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md CHANGED Viewed

	@@ -1 +1 @@
1	- You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](~~https://playbook.powerapp.cloud~~/~~token/colors~~) for reference.
1	+ You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

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

@@ -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 CHANGED Viewed

@@ -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/_dropdown_with_custom_active_style_options_react.md CHANGED Viewed

@@ -1,4 +1,4 @@
 The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
 `backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/global_props/colors) | **Default**: (no selection) is white
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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

@@ -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 CHANGED Viewed

@@ -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'