@thecb/components 9.3.0-beta.2 → 9.3.0

package/dist/index.d.ts

@@ -99,6 +99,7 @@ declare const COSMOS_RED: Color;
 declare const BLUSH_RED: Color;
 
 declare const ERROR_COLOR: Color;
+declare const ERROR_BACKGROUND_COLOR: Color;
 
 declare const ALERT_COLORS: {
   warn: ColorSet;
@@ -203,6 +204,7 @@ 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_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;
 declare const colors_d_PILL_COLORS: typeof PILL_COLORS;
 declare namespace colors_d {
@@ -282,6 +284,7 @@ declare namespace colors_d {
     colors_d_COSMOS_RED as COSMOS_RED,
     colors_d_BLUSH_RED as BLUSH_RED,
     colors_d_ERROR_COLOR as ERROR_COLOR,
+    colors_d_ERROR_BACKGROUND_COLOR as ERROR_BACKGROUND_COLOR,
     colors_d_ALERT_COLORS as ALERT_COLORS,
     colors_d_PILL_COLORS as PILL_COLORS,
   };
@@ -295,6 +298,155 @@ declare namespace index_d {
   };
 }
 
+/* 
+  Hook that assigns a click event listener to the main document element
+  Returns a ref to attach to another element (like an icon/button that triggers a popover)
+  If a click event gets captured by the document and the assigned element isn't the target
+  hook will run whatever handler is passed (eg a function that closes a popover)
+
+  See popover component for implementation
+
+*/
+
+declare const useOutsideClickHook = handler => {
+  const ref = useRef();
+
+  useEffect(() => {
+    const handleOutsideClick = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+
+      document.addEventListener("click", handleOutsideClick, true);
+
+      return () => {
+        document.removeEventListener("click", handleOutsideClick, true);
+      };
+    };
+  }, [ref]);
+
+  return ref;
+};
+
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+
+declare const useScrollTo = (id, top = 0, left = 0, behavior = "auto", delay) => {
+  let scrollItem;
+  if (delay) {
+    setTimeout(() => {
+      scrollItem = document.getElementById(id);
+      scrollItem?.scrollTo({ top, left, behavior });
+    }, delay);
+  } else {
+    scrollItem = document.getElementById(id);
+    scrollItem?.scrollTo({ top, left, behavior });
+  }
+};
+
+interface Field {
+  hasErrors: boolean;
+  dirty: boolean;
+  rawValue: string;
+}
+
+interface ReduxAction<T = string, P = {}> {
+  type: T;
+  payload?: P;
+}
+
+/**
+ * These types should be moved to and referenced from redux-freeform if it implements TypeScript
+ */
+
+type ValidatorFn = (value: string) => boolean;
+
+interface FieldActionPayload {
+  fieldName: string;
+  value?: string;
+  validator?: ValidatorFn;
+}
+
+type SetAction = ReduxAction<"field/SET", FieldActionPayload>;
+type AddValidatorAction = ReduxAction<
+  "field/ADD_VALIDATOR",
+  FieldActionPayload
+>;
+type RemoveValidatorAction = ReduxAction<
+  "field/REMOVE_VALIDATOR",
+  FieldActionPayload
+>;
+type ClearAction = ReduxAction<"field/CLEAR">;
+
+interface FieldActions {
+  set?: (fieldName: string) => (value: string) => SetAction;
+  addValidator?: (
+    fieldName: string
+  ) => (validator: ValidatorFn) => AddValidatorAction;
+  removeValidator?: (
+    fieldName: string
+  ) => (validator: ValidatorFn) => RemoveValidatorAction;
+  clear?: () => ClearAction;
+}
+
+interface FormSelectOption {
+  text?: string;
+  value?: string;
+}
+
+interface SearchableSelectOption {
+  name?: string;
+  value?: string;
+}
+
+interface ErrorMessageDictionary {
+  [fieldName: string]: string;
+}
+
+enum ToastVariants {
+  ERROR = "error",
+  SUCCESS = "success"
+}
+
+interface UseToastOptions {
+  timeout?: number;
+}
+
+interface UseToastResult {
+  isToastOpen: boolean;
+  toastVariant: string | ToastVariants;
+  toastMessage: string;
+  showToast: ({
+    message,
+    variant
+  }: {
+    message: string;
+    variant: string | ToastVariants;
+  }) => void;
+  hideToast: () => void;
+}
+
+declare function useToastNotification(
+  options?: UseToastOptions
+): UseToastResult;
+
+
+
+declare const index_useScrollTo: typeof useScrollTo;
+declare const index_useToastNotification: typeof useToastNotification;
+declare namespace index {
+  export {
+    useOutsideClickHook as useOutsideClick,
+    index_useScrollTo as useScrollTo,
+    index_useToastNotification as useToastNotification,
+  };
+}
+
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
 interface AlertProps {
@@ -379,65 +531,6 @@ interface CardProps {
 declare const Card: React.FC<Expand<CardProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-interface Field {
-  hasErrors: boolean;
-  dirty: boolean;
-  rawValue: string;
-}
-
-interface ReduxAction<T = string, P = {}> {
-  type: T;
-  payload?: P;
-}
-
-/**
- * These types should be moved to and referenced from redux-freeform if it implements TypeScript
- */
-
-type ValidatorFn = (value: string) => boolean;
-
-interface FieldActionPayload {
-  fieldName: string;
-  value?: string;
-  validator?: ValidatorFn;
-}
-
-type SetAction = ReduxAction<"field/SET", FieldActionPayload>;
-type AddValidatorAction = ReduxAction<
-  "field/ADD_VALIDATOR",
-  FieldActionPayload
->;
-type RemoveValidatorAction = ReduxAction<
-  "field/REMOVE_VALIDATOR",
-  FieldActionPayload
->;
-type ClearAction = ReduxAction<"field/CLEAR">;
-
-interface FieldActions {
-  set?: (fieldName: string) => (value: string) => SetAction;
-  addValidator?: (
-    fieldName: string
-  ) => (validator: ValidatorFn) => AddValidatorAction;
-  removeValidator?: (
-    fieldName: string
-  ) => (validator: ValidatorFn) => RemoveValidatorAction;
-  clear?: () => ClearAction;
-}
-
-interface FormSelectOption {
-  text?: string;
-  value?: string;
-}
-
-interface SearchableSelectOption {
-  name?: string;
-  value?: string;
-}
-
-interface ErrorMessageDictionary {
-  [fieldName: string]: string;
-}
-
 interface FormInputProps {
   extraStyles?: string;
   field?: Field;
@@ -638,6 +731,8 @@ interface XCircleIconSmallProps {
 declare const XCircleIconSmall: React.FC<Expand<XCircleIconSmallProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+declare const KebabMenuIcon: JSX.Element;
+
 interface BoxProps {
   autocompleteValue?: string;
   padding?: string;
@@ -1062,6 +1157,22 @@ interface RadioGroupProps {
 declare const RadioGroup: React.FC<Expand<RadioGroupProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface ToastNotificationProps {
+  variant?: string;
+  message: string;
+  toastOpen: boolean;
+  closeToastNotification: (event?: React.MouseEvent<HTMLElement>) => void;
+  extraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  childGap?: string;
+  backgroundColor?: string;
+}
+
+declare const ToastNotification: React.FC<Expand<ToastNotificationProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface DefaultPageTemplateProps {
   content: JSX.Element;
   header?: JSX.Element;
@@ -1076,5 +1187,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, 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, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, 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, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants };
+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, 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, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, 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, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
 //# sourceMappingURL=index.d.ts.map