@thecb/components 11.6.3 → 11.6.4

package/dist/index.d.ts

@@ -681,6 +681,60 @@ interface CardProps {
 declare const Card: React.FC<Expand<CardProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface DropdownThemeValues {
+  selectedColor?: string;
+  hoverColor?: string;
+  focusColor?: string;
+}
+
+interface DropdownProps {
+  /** Placeholder text displayed when no value is selected */
+  placeholder?: string;
+  /** Array of options to display in the dropdown */
+  options: FormSelectOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Whether the dropdown is currently open */
+  isOpen?: boolean;
+  /** Whether the dropdown is in an error state */
+  isError?: boolean;
+  /** Callback fired when an option is selected */
+  onSelect: (value: string) => void;
+  /** Array of values that should be disabled */
+  disabledValues?: string[];
+  /** Callback fired when the dropdown is clicked */
+  onClick?: () => void;
+  /** Theme values for styling the dropdown */
+  themeValues?: DropdownThemeValues;
+  /** Maximum height of the dropdown content */
+  maxHeight?: string;
+  /** Whether the dropdown width should fit its content */
+  widthFitOptions?: boolean;
+  /** Whether the dropdown is disabled */
+  disabled?: boolean;
+  /** Whether to show title attributes on options */
+  hasTitles?: boolean;
+  /** Whether to auto-erase type-ahead input after timeout */
+  autoEraseTypeAhead?: boolean;
+  /** ID of the element that labels this dropdown */
+  ariaLabelledby?: string;
+  /** ID of the element that describes this dropdown */
+  ariaDescribedby?: string;
+  /** Autocomplete attribute value for browser autofill */
+  autocompleteValue?: string;
+  /** Whether to use smooth scrolling when scrolling to selected item */
+  smoothScroll?: boolean;
+  /** Whether the dropdown has an invalid value */
+  ariaInvalid?: boolean;
+  /** Whether the dropdown is required */
+  isRequired?: boolean;
+  /** Custom CSS styles */
+  extraStyles?: string;
+}
+
+declare const Dropdown: React.FC<Expand<DropdownProps> &
+  Omit<React.HTMLAttributes<HTMLElement>, "onSelect">>;
+
 type SortOrder = "asc" | "desc" | null;
 interface SortableTableHeadingProps {
   ariaControlsId: string;
@@ -1488,5 +1542,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, Badge, BadgeProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, CaretArrowDown, CaretArrowDownProps, CaretArrowUp, CaretArrowUpProps, CashieringImage, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, CloseIcon, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, FormTextarea, FormTextareaProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, MultiCartIcon, MultipleSelectFilter, MultipleSelectFilterProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PaydotImage, Popover, PopoverProps, PopupMenu, PopupMenuProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, Search, SearchProps, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, SortOrder, SortableTableHeading, SortableTableHeadingProps, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ToastVariants, TrashIconV2, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
+export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, Badge, BadgeProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, CaretArrowDown, CaretArrowDownProps, CaretArrowUp, CaretArrowUpProps, CashieringImage, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, CloseIcon, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, Dropdown, DropdownProps, DropdownThemeValues, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, FormTextarea, FormTextareaProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, MultiCartIcon, MultipleSelectFilter, MultipleSelectFilterProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PaydotImage, Popover, PopoverProps, PopupMenu, PopupMenuProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, Search, SearchProps, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, SortOrder, SortableTableHeading, SortableTableHeadingProps, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ToastVariants, TrashIconV2, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -23795,7 +23795,8 @@ var Dropdown = function Dropdown(_ref13) {
     _ref13$ariaInvalid = _ref13.ariaInvalid,
     ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
     _ref13$isRequired = _ref13.isRequired,
-    isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
+    isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired,
+    extraStyles = _ref13.extraStyles;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -23992,7 +23993,7 @@ var Dropdown = function Dropdown(_ref13) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     background: isOpen ? themeValues.hoverColor : WHITE,
-    extraStyles: "position: relative;",
+    extraStyles: "position: relative;".concat(extraStyles ? " ".concat(extraStyles) : ""),
     minWidth: "100%",
     onClick: function onClick() {
       if (!isOpen) {