@shipengine/elements 0.16.0 → 0.16.1

package/components/add-funds-form/add-funds-form.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type AddFundsFormProvider = {
+    isCustomAmount?: boolean;
+    isSubmitted?: boolean;
+    isSubmitting?: boolean;
+    isValid?: boolean;
+    selectedAmount?: number;
+    submit?: () => void;
+};
+export type AddFundsFormProps = {
+    carrierId: string;
+    children?: (addFundsForm: AddFundsFormProvider) => React.ReactElement;
+    minimumAmount?: number;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+};
+/**
+ * Form for adding funds to a carrier's account.
+ *
+ * If a render child is provided, external control is assumed and the cancel / submit buttons are hidden.
+ */
+export declare const AddFundsForm: ({ carrierId, children, onCancel, onSuccess, minimumAmount, }: AddFundsFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/add-funds-form/add-funds-form.styles.d.ts

@@ -0,0 +1,6 @@
+type GetStylesProps = {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+export declare const getStyles: ({ isDisabled, isSelected }?: GetStylesProps) => Record<"chip" | "chipList" | "fundsInput", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;
+export {};

package/components/{organisms/manual-funding-form/manual-funding-schema.d.ts → add-funds-form/add-funds-schema.d.ts}

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export declare const manualFundingSchema: z.ZodObject<{
+export declare const getAddFundsSchema: (minimumAmount?: number) => z.ZodEffects<z.ZodObject<{
     funds: z.ZodObject<z.extendShape<{
         amount: z.ZodNumber;
         currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
@@ -22,6 +22,16 @@ export declare const manualFundingSchema: z.ZodObject<{
         amount: number;
         currency: import("@shipengine/api").Currency;
     };
+}>, {
+    amount: number;
+    currency: import("@shipengine/api").Currency;
+}, {
+    funds: {
+        amount: number;
+        currency: import("@shipengine/api").Currency;
+    };
 }>;
-export type ManualFundingFormFields = z.input<typeof manualFundingSchema>;
-export type ManualFundingFormPayload = z.output<typeof manualFundingSchema>;
+type AddFundsFormSchema = ReturnType<typeof getAddFundsSchema>;
+export type AddFundsFormFields = z.input<AddFundsFormSchema>;
+export type AddFundsFormPayload = z.output<AddFundsFormSchema>;
+export {};

package/components/add-funds-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./add-funds-form";
+export * from "./add-funds-schema";

package/components/auto-funding-form/auto-funding-form.d.ts

@@ -0,0 +1,8 @@
+export type AutoFundingFormProps = {
+    carrierId: string;
+};
+/**
+ * This form that allows users to enable or disable auto funding, and
+ * configure auto funding settings in ShipEngine API.
+ */
+export declare const AutoFundingForm: ({ carrierId }: AutoFundingFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/auto-funding-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./auto-funding-form";
+export * from "./auto-funding-schema";

package/components/carrier-balance/carrier-balance.d.ts

@@ -0,0 +1,4 @@
+export type CarrierBalanceProps = {
+    carrierId: string;
+};
+export declare const CarrierBalance: ({ carrierId }: CarrierBalanceProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/carrier-balance/carrier-balance.styles.d.ts

@@ -0,0 +1 @@
+export declare const getStyles: (balance?: number) => Record<"balanceText", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/carrier-balance/index.d.ts

@@ -0,0 +1 @@
+export * from "./carrier-balance";

package/components/field/create-field-controller.d.ts

@@ -10,6 +10,7 @@ export type FieldControllerProps<NP, TFieldValues extends FieldValues = FieldVal
     displayErrors?: boolean;
     displayLabel?: boolean;
     errors?: string[];
+    hint?: string;
     inputOnly?: boolean;
     isOptional?: boolean;
     label: string;
@@ -19,7 +20,7 @@ export type FieldControllerProps<NP, TFieldValues extends FieldValues = FieldVal
 type FieldControllerOptions = {
     inputOnly?: boolean;
 };
-export declare const createFieldController: <P>(options?: FieldControllerOptions) => <TFieldValues extends FieldValues = FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>({ children, control, defaultValue, displayErrors, displayLabel, errors: errorsProp, inputOnly, isOptional, label, labelWeight, name, nativeLabel, rules, shouldUnregister, subLabel, ...formInputProps }: FieldControllerProps<P, TFieldValues, TName>) => JSX.Element;
+export declare const createFieldController: <P>(options?: FieldControllerOptions) => <TFieldValues extends FieldValues = FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>({ children, control, defaultValue, displayErrors, displayLabel, errors: errorsProp, hint, inputOnly, isOptional, label, labelWeight, name, nativeLabel, rules, shouldUnregister, subLabel, ...formInputProps }: FieldControllerProps<P, TFieldValues, TName>) => JSX.Element;
 export type ControlledFieldProps = Parameters<ControlledField>[0];
 export type ControlledField<NP = object, CP = object, OK extends string = ""> = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(fieldProps: Omit<FieldControllerProps<NP, TFieldValues, TName>, "children" | OK> & CP) => JSX.Element;
 export {};

package/components/fund-and-purchase/fund-and-purchase.d.ts

@@ -0,0 +1,15 @@
+export type FundAndPurchaseProps = {
+    carrierId?: string;
+    className?: string;
+    disabled?: boolean;
+    isFundingRequired: boolean;
+    onPurchase: () => void;
+    onSave: () => Promise<void>;
+    purchaseAmount: number;
+};
+/**
+ * Fund and Purchase handles the label purchase submission UX, ensuring that a user
+ * has the necessary funds available and can add them if not. It allows a single button
+ * to submit the funding form followed by the purchase form.
+ */
+export declare const FundAndPurchase: ({ carrierId, className, disabled, isFundingRequired, onSave, purchaseAmount, onPurchase, }: FundAndPurchaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/fund-and-purchase/fund-and-purchase.styles.d.ts

@@ -0,0 +1 @@
+export declare const getStyles: (isCustomAmount?: boolean) => Record<"balanceText" | "container" | "formExtension" | "saveRateButton", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/fund-and-purchase/index.d.ts

@@ -0,0 +1 @@
+export * from "./fund-and-purchase";

package/components/index.d.ts

@@ -1,12 +1,21 @@
 export * as Templates from "./templates";
 export * from "./accordion";
+export * from "./add-funds-form";
+export * from "./auto-funding-form";
 export * from "./button-group";
+export * from "./carrier-balance";
 export * from "./cube";
 export * from "./error-boundary";
 export * from "./field";
 export * from "./field-label";
 export * from "./form-portal";
+export * from "./fund-and-purchase";
+export * from "./inline-label";
 export * from "./items-breakdown";
+export * from "./link-action";
 export * from "./loader";
+export * from "./manage-funding";
 export * from "./portal";
 export * from "./spacer";
+export * from "./spread";
+export * from "./story-notes";

package/components/inline-label/index.d.ts

@@ -0,0 +1 @@
+export * from "./inline-label";

package/components/inline-label/inline-label.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type InlineLabelProps = {
+    children: React.ReactElement;
+    label: string;
+};
+export declare const InlineLabel: ({ children, label }: InlineLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/link-action/index.d.ts

@@ -0,0 +1 @@
+export * from "./link-action";

package/components/link-action/link-action.d.ts

@@ -0,0 +1,12 @@
+import { IconNames } from "@packlink/brands";
+import { ILinkProps } from "@packlink/giger";
+declare const icons: {
+    readonly add: IconNames.ADD;
+    readonly download: IconNames.DOWNLOAD;
+};
+export type LinkActionProps = {
+    icon?: keyof typeof icons;
+    title: string;
+} & ILinkProps;
+export declare const LinkAction: ({ css, icon, isDisabled, isLoading, title, ...props }: LinkActionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/components/manage-funding/manage-funding.d.ts

@@ -0,0 +1,4 @@
+export type ManageFundingProps = {
+    carrierId: string;
+};
+export declare const ManageFunding: ({ carrierId }: ManageFundingProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/spread/index.d.ts

@@ -0,0 +1 @@
+export * from "./spread";

package/components/spread/spread.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type SpreadProps = {
+    children: [React.ReactNode, React.ReactNode];
+};
+export declare const Spread: ({ children }: SpreadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/story-notes/index.d.ts

@@ -0,0 +1 @@
+export * from "./story-notes";

package/components/story-notes/story-notes.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type StoryNotesProps = {
+    children: React.ReactNode;
+    notes: string[];
+};
+/**
+ * For relevant notes about Storybook stories
+ *
+ * Stopgap until we setup https://storybook.js.org/addons/@storybook/addon-docs
+ */
+export declare const StoryNotes: ({ children, notes }: StoryNotesProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/templates/index.d.ts

@@ -6,7 +6,6 @@ export * from "./address-preference-display";
 export * from "./carrier-recovery-form";
 export * from "./carrier-terms-form";
 export * from "./customs-item-form";
-export * from "./funding-methods";
 export * from "./label";
 export * from "./landing-page";
 export * from "./list-carriers";

package/components/templates/rate-form/rate-form.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: Record<"fundAndPurchase" | "ratesInterstitial" | "showMoreOrLessRatesButton", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/elements/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./configure-shipment";
 export * from "./list-carriers";
-export * from "./manage-funding";
 export * from "./manage-warehouses";
 export * from "./onboarding";
 export * from "./sales-order";

package/elements/index.d.ts

@@ -1,5 +1,4 @@
 export { Element as ListCarriers } from "./list-carriers";
-export { Element as ManageFunding } from "./manage-funding";
 export { Element as ManageWarehouses } from "./manage-warehouses";
 export { Element as PurchaseLabel } from "./purchase-label";
 export { Element as Onboarding } from "./onboarding";

package/hooks/use-nested-form.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export type NestedFormProps<T, U> = {
     formId: string;
     onCancel?: () => void;
-    onSubmit: (payload: U) => Promise<void>;
+    onSubmit: (payload: U) => Promise<void> | void;
 } & T;
 /**
  * Returns a nested form element that can be rendered within another form
@@ -16,7 +16,7 @@ export type NestedFormProps<T, U> = {
 export declare const useNestedForm: <T, U>(form: React.FC<NestedFormProps<T, U>>, props: {
     formId: string;
     onCancel?: (() => void) | undefined;
-    onSubmit: (payload: U) => Promise<void>;
+    onSubmit: (payload: U) => Promise<void> | void;
 } & T & {
     portalRef?: undefined;
 }) => readonly [import("@emotion/react/jsx-runtime").JSX.Element, boolean, React.DispatchWithoutAction];