@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, HTMLAttributes } from 'react';
 
 type Color = string;
 
@@ -67,6 +67,7 @@ declare const ROYAL_BLUE_VIVID: Color;
 declare const ASTRAL_BLUE: Color;
 declare const SAPPHIRE_BLUE: Color;
 declare const PEACOCK_BLUE: Color;
+declare const HAWKES_BLUE: Color;
 
 // GREEN
 declare const FOREST_GREEN: Color;
@@ -98,6 +99,9 @@ declare const FANTASY_RED: Color;
 declare const COSMOS_RED: Color;
 declare const BLUSH_RED: Color;
 
+// PURPLE
+declare const LUCKY_POINT: Color;
+
 declare const ERROR_COLOR: Color;
 declare const ERROR_BACKGROUND_COLOR: Color;
 
@@ -181,6 +185,7 @@ declare const colors_d_ROYAL_BLUE_VIVID: typeof ROYAL_BLUE_VIVID;
 declare const colors_d_ASTRAL_BLUE: typeof ASTRAL_BLUE;
 declare const colors_d_SAPPHIRE_BLUE: typeof SAPPHIRE_BLUE;
 declare const colors_d_PEACOCK_BLUE: typeof PEACOCK_BLUE;
+declare const colors_d_HAWKES_BLUE: typeof HAWKES_BLUE;
 declare const colors_d_FOREST_GREEN: typeof FOREST_GREEN;
 declare const colors_d_MEADOW_GREEN: typeof MEADOW_GREEN;
 declare const colors_d_POLAR_GREEN: typeof POLAR_GREEN;
@@ -203,6 +208,7 @@ declare const colors_d_RASPBERRY: typeof RASPBERRY;
 declare const colors_d_FANTASY_RED: typeof FANTASY_RED;
 declare const colors_d_COSMOS_RED: typeof COSMOS_RED;
 declare const colors_d_BLUSH_RED: typeof BLUSH_RED;
+declare const colors_d_LUCKY_POINT: typeof LUCKY_POINT;
 declare const colors_d_ERROR_COLOR: typeof ERROR_COLOR;
 declare const colors_d_ERROR_BACKGROUND_COLOR: typeof ERROR_BACKGROUND_COLOR;
 declare const colors_d_ALERT_COLORS: typeof ALERT_COLORS;
@@ -261,6 +267,7 @@ declare namespace colors_d {
     colors_d_ASTRAL_BLUE as ASTRAL_BLUE,
     colors_d_SAPPHIRE_BLUE as SAPPHIRE_BLUE,
     colors_d_PEACOCK_BLUE as PEACOCK_BLUE,
+    colors_d_HAWKES_BLUE as HAWKES_BLUE,
     colors_d_FOREST_GREEN as FOREST_GREEN,
     colors_d_MEADOW_GREEN as MEADOW_GREEN,
     colors_d_POLAR_GREEN as POLAR_GREEN,
@@ -283,6 +290,7 @@ declare namespace colors_d {
     colors_d_FANTASY_RED as FANTASY_RED,
     colors_d_COSMOS_RED as COSMOS_RED,
     colors_d_BLUSH_RED as BLUSH_RED,
+    colors_d_LUCKY_POINT as LUCKY_POINT,
     colors_d_ERROR_COLOR as ERROR_COLOR,
     colors_d_ERROR_BACKGROUND_COLOR as ERROR_BACKGROUND_COLOR,
     colors_d_ALERT_COLORS as ALERT_COLORS,
@@ -372,12 +380,11 @@ declare const useOutsideClickHook = handler => {
       if (ref.current && !ref.current.contains(e.target)) {
         handler();
       }
+    };
 
-      document.addEventListener("click", handleOutsideClick, true);
-
-      return () => {
-        document.removeEventListener("click", handleOutsideClick, true);
-      };
+    document.addEventListener("click", handleOutsideClick, true);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick, true);
     };
   }, [ref]);
 
@@ -491,15 +498,83 @@ declare function useToastNotification(
   options?: UseToastOptions
 ): UseToastResult;
 
+declare function useConditionallyAddValidator(
+  condition,
+  validatorFn,
+  addValidator,
+  removeValidator
+) {
+  useEffect(() => {
+    if (condition) {
+      addValidator(validatorFn());
+    }
+    return () => {
+      // Remove validator when component unmounts
+      removeValidator(validatorFn());
+    };
+  }, [condition, addValidator, removeValidator]);
+}
+
+/**
+ * A custom hook to dynamically load the Cloudflare Turnstile script.
+ *
+ * @param {string} verifyURL - The URL of the Turnstile verification script.
+ */
+declare const useTurnstileScript = verifyURL => {
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [scriptError, setScriptError] = useState(false);
+
+  const handleScriptError = () => {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      setScriptLoaded(false);
+      return;
+    }
+    if (window.turnstile && window.turnstile.render) {
+      setScriptLoaded(true);
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = `${verifyURL}?render=explicit`;
+    script.onload = () => {
+      setScriptLoaded(true);
+    };
+    script.onerror = () => {
+      handleScriptError();
+    };
+    script.onabort = () => {
+      handleScriptError();
+    };
+    script.defer = true;
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    return () => {
+      setScriptLoaded(false);
+      setScriptError(false);
+    };
+  }, [verifyURL]);
+
+  return { scriptLoaded, scriptError };
+};
+
 
 
 declare const index_useScrollTo: typeof useScrollTo;
 declare const index_useToastNotification: typeof useToastNotification;
+declare const index_useConditionallyAddValidator: typeof useConditionallyAddValidator;
+declare const index_useTurnstileScript: typeof useTurnstileScript;
 declare namespace index {
   export {
     useOutsideClickHook as useOutsideClick,
     index_useScrollTo as useScrollTo,
     index_useToastNotification as useToastNotification,
+    index_useConditionallyAddValidator as useConditionallyAddValidator,
+    index_useTurnstileScript as useTurnstileScript,
   };
 }
 
@@ -528,6 +603,25 @@ interface AlertProps {
 declare const Alert: React.FC<Expand<AlertProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface BadgeProps {
+  label: string;
+  Icon?: JSX.Element;
+  iconOnLeft?: boolean;
+  variant?:
+    | "info"
+    | "warn"
+    | "primary"
+    | "primaryHeadline"
+    | "secondary"
+    | "secondaryHeadline"
+    | "success"
+    | "disabled";
+  id?: string;
+  extraStyles?: string;
+}
+
+declare const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;
+
 interface ButtonWithActionProps {
   action?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
@@ -539,6 +633,7 @@ interface ButtonWithActionProps {
   contentOverride?: boolean;
   extraStyles?: string;
   tabIndex?: string;
+  loadingColor?: string;
 }
 
 declare const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
@@ -557,8 +652,10 @@ declare const ButtonWithLink: React.FC<Expand<ButtonWithLinkProps> &
   React.HTMLAttributes<HTMLElement>>;
 
 interface CardProps {
-  text?: string;
+  text?: string | React.ReactNode;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -576,17 +673,89 @@ interface CardProps {
     | "revert"
     | "revert-layer"
     | "unset";
+  hasContentBackgroundColor?: string;
   headerAs?: string;
   headerText?: string;
   headerVariant?: string;
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 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;
+  disabled?: boolean; // Useful if you want to render the component while data is fetching
+  displayName: string; // The name displayed in the <th> element
+  onSortChange: () => void;
+  sortOrder: SortOrder;
+  extraStyles?: string;
+}
+
+declare const SortableTableHeading: React.FC<Expand<SortableTableHeadingProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface FormInputProps {
   extraStyles?: string;
   field?: Field;
@@ -600,18 +769,51 @@ interface FormInputProps {
   showErrors?: boolean;
   type?: string;
   formatter?: string | null;
-  decorator?: boolean;
+  decorator?: string;
   themeValues?: object;
   background?: string;
   customHeight?: string;
   autocompleteValue?: string;
   removeFromValue?: RegExp;
   dataQa?: string | null;
+  isRequired?: boolean;
+  errorFieldExtraStyles?: string;
+  showFieldErrorRow?: boolean;
+  labelTextVariant?: string;
+  errorTextVariant?: string;
 }
 
 declare const FormInput: React.FC<Expand<FormInputProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface FormTextareaProps {
+  extraStyles?: string;
+  field?: Field;
+  fieldActions?: FieldActions;
+  disabled?: boolean;
+  errorMessages?: ErrorMessageDictionary;
+  helperModal?: boolean;
+  labelTextWhenNoError?: string;
+  showErrors?: boolean;
+  themeValues?: object;
+  customHeight?: string;
+  removeFromValue?: RegExp;
+  dataQa?: string | null;
+  isRequired?: boolean;
+  errorFieldExtraStyles?: string;
+  showFieldErrorRow?: boolean;
+  labelTextVariant?: string;
+  errorTextVariant?: string;
+  resize?: "none" | "horizontal" | "vertical" | "both";
+  rows?: number;
+  cols?: number;
+  placeholder?: string;
+  maxLength?: number;
+}
+
+declare const FormTextarea: React.FC<Expand<FormTextareaProps> &
+  React.HTMLAttributes<HTMLTextAreaElement>>;
+
 interface FormSelectProps {
   disabled?: boolean;
   dropdownMaxHeight?: string;
@@ -629,6 +831,9 @@ interface FormSelectProps {
   smoothScroll?: boolean;
   dataQa?: string | null;
   widthFitOptions?: boolean;
+  isRequired?: boolean;
+  labelTextVariant?: string;
+  errorLabelTextVariant?: string;
 }
 
 declare const FormSelect: React.FC<Expand<FormSelectProps> &
@@ -691,6 +896,20 @@ interface BankIconLargeProps {
 declare const BankIconLarge: React.FC<Expand<BankIconLargeProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface CaretArrowDownProps {
+  color?: string;
+}
+
+declare const CaretArrowDown: React.FC<Expand<CaretArrowDownProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+interface CaretArrowUpProps {
+  color?: string;
+}
+
+declare const CaretArrowUp: React.FC<Expand<CaretArrowUpProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface ChargebackIconMediumProps {
   color?: string;
   iconIndex?: number;
@@ -755,7 +974,7 @@ declare const StandardCheckoutImage: JSX.Element;
 
 declare const KioskImage: JSX.Element;
 
-declare const PointOfSaleImage: JSX.Element;
+declare const CashieringImage: JSX.Element;
 
 interface SuccessfulIconMediumProps {
   iconIndex?: number;
@@ -795,6 +1014,8 @@ declare const CloseIcon: JSX.Element;
 
 declare const TrashIconV2: JSX.Element;
 
+declare const PaydotImage: JSX.Element;
+
 interface BoxProps {
   autocompleteValue?: string;
   padding?: string;
@@ -913,6 +1134,7 @@ interface ExternalLinkProps {
   weight?: string;
   extraStyles?: string;
   variant?: string;
+  containerTabIndex?: string;
   tabIndex?: string;
   dataQa?: string;
   ariaLabel?: string;
@@ -993,6 +1215,30 @@ interface ParagraphProps {
 declare const Paragraph: React.FC<Expand<ParagraphProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+// Keys within this array will be referenced based on the
+// `valuesToSearchFor` array.
+type FlexibleObjectArray = Array<{ [key: string]: any }>;
+
+interface SearchProps {
+  field: Field;
+  fieldActions: FieldActions;
+  dataset: FlexibleObjectArray;
+  disableFilter?: boolean;
+  valuesToSearchFor: string[];
+  onSearchCallback: () => void;
+  onClearCallback: () => void;
+  disabled?: boolean;
+  placeholder?: string;
+  searchOnKeypress?: boolean;
+  width?: string;
+  autocompleteValue?: string;
+  themeValues?: object;
+  extraStyles?: string;
+}
+
+declare const Search: React.FC<Expand<SearchProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface SearchableSelectProps {
   autocompleteValue?: boolean;
   items: SearchableSelectOption[];
@@ -1107,7 +1353,7 @@ interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string;
+  title?: string | JSX.Element;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;
@@ -1122,7 +1368,7 @@ interface CollapsibleSectionProps {
 }
 
 declare const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  Omit<React.HTMLAttributes<HTMLElement>, "title">>; // ommitting title prop to avoid conflicts with component's title prop
 
 interface CopyableProps {
   content: string;
@@ -1218,6 +1464,7 @@ interface RadioGroupProps {
   handleChange?: () => void;
   heading?: ReactNode;
   headingText: string;
+  headingFontSize?: string;
 }
 
 declare const RadioGroup: React.FC<Expand<RadioGroupProps> &
@@ -1262,6 +1509,33 @@ interface PopupMenuProps {
 declare const PopupMenu: React.FC<Expand<PopupMenuProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface MultipleSelectFilterProps {
+  actions: FieldActions;
+  autocompleteValue?: boolean;
+  btnContentOverride?: JSX.Element;
+  btnExtraStyles?: string;
+  disabled: boolean;
+  dropdownExtraStyles?: string;
+  extraStyles?: string;
+  fields: {
+    searchTerm: Field;
+  };
+  filterLabel?: string;
+  icon?: JSX.Element;
+  maxSelections?: number;
+  name: string;
+  onApply?: () => void;
+  onClear?: () => void;
+  options: SearchableSelectOption[];
+  placeholder?: string;
+  searchable?: boolean;
+  themeValues?: any[];
+  truncateBtnTextWidth?: string;
+}
+
+declare const MultipleSelectFilter: React.FC<Expand<MultipleSelectFilterProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface DefaultPageTemplateProps {
   content: JSX.Element;
   header?: JSX.Element;
@@ -1276,5 +1550,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, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, 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, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, MultiCartIcon, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, PopupMenu, PopupMenuProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, 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