@thecb/components 9.2.0-beta.6 → 9.2.0-beta.8

package/dist/index.d.ts

@@ -298,6 +298,101 @@ declare namespace index_d {
   };
 }
 
+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 UseToastProps {
+  timeout?: number;
+}
+
+interface UseToastResult {
+  isToastOpen: boolean;
+  toastVariant: "" | ToastVariants;
+  toastMessage: string;
+  showToast: ({
+    message,
+    variant,
+  }: {
+    message: string;
+    variant: ToastVariants;
+  }) => void;
+  hideToast: () => void;
+}
+
+declare function useToastNotification({
+  timeout,
+}: UseToastProps): UseToastResult;
+
+
+
+declare const index_useToastNotification: typeof useToastNotification;
+declare namespace index {
+  export {
+    index_useToastNotification as useToastNotification,
+  };
+}
+
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
 interface AlertProps {
@@ -382,65 +477,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;
@@ -1095,5 +1131,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, ToastNotification, ToastNotificationProps, 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, 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

package/dist/index.esm.js

@@ -25578,6 +25578,53 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
   return ref;
 };
 
+var initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
+
+var useToastNotification = function useToastNotification() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
+
+  var _useState = useState(initialToastState),
+      _useState2 = _slicedToArray(_useState, 2),
+      toastState = _useState2[0],
+      setToastState = _useState2[1];
+
+  useEffect$1(function () {
+    if (toastState.isOpen) {
+      setTimeout(function () {
+        setToastState(initialToastState);
+      }, timeout);
+    }
+  }, [timeout, toastState.isOpen]);
+
+  var showToast = function showToast(_ref2) {
+    var message = _ref2.message,
+        variant = _ref2.variant;
+    return setToastState({
+      isOpen: true,
+      variant: variant,
+      message: message
+    });
+  };
+
+  var hideToast = function hideToast() {
+    return setToastState(initialToastState);
+  };
+
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast: showToast,
+    hideToast: hideToast
+  };
+};
+
 
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -25586,7 +25633,8 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook
+  useOutsideClick: useOutsideClickHook,
+  useToastNotification: useToastNotification
 });
 
 var hoverColor$4 = "#116285";