@shipengine/elements 0.15.0 → 0.16.0

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

@@ -11,13 +11,15 @@ export type FieldControllerProps<NP, TFieldValues extends FieldValues = FieldVal
     displayLabel?: boolean;
     errors?: string[];
     inputOnly?: boolean;
+    isOptional?: boolean;
     label: string;
     labelWeight?: FieldLabelProps["weight"];
+    nativeLabel?: boolean;
 } & Omit<FieldLabelProps, "children" | "weight"> & Omit<UseControllerProps<TFieldValues, TName>, "defaultValue"> & ControlledFormInputProps<NP>;
 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, label, labelWeight, name, 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, 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/field/credit-card-input/credit-card-input.d.ts

@@ -0,0 +1,3 @@
+import { InputProps as NativeInputProps } from "@packlink/giger";
+import { ControlledField } from "../create-field-controller";
+export declare const CreditCardInput: ControlledField<NativeInputProps>;

package/components/field/credit-card-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./credit-card-input";

package/components/field/fields.d.ts

@@ -1,3 +1,4 @@
+export * from "./credit-card-input";
 export * from "./checkbox-input";
 export * from "./date-picker";
 export * from "./input-group";

package/components/field/money-input/hooks/use-utils.d.ts

@@ -1,4 +1,4 @@
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 type UseUtils = {
     getCurrencySymbol: (currency: SE.Currency) => string | undefined;
 };

package/components/field/money-input/money-input.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from "@packlink/giger";
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 import { ControlledField } from "../create-field-controller";
 export declare const transform: {
     in: ({ amount, currency }?: Partial<{

package/components/field/rate-card/cost-breakdown/cost-breakdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 export interface CostBreakdownProps {
     confirmationAmount?: SE.Money;
     insuranceAmount?: SE.Money;

package/components/form-portal/form-portal.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Interpolation, Theme } from "@emotion/react";
+declare const variants: readonly ["well"];
+type FormPortalProps = {
+    children: React.ReactNode;
+    css?: Interpolation<Theme>;
+    id: `${string}-form`;
+    onSubmit: (e: React.SyntheticEvent) => Promise<void> | void;
+    variant?: typeof variants[number];
+};
+/**
+ * A drop-in replacement for the `<form>` tag that allows nested forms.
+ *
+ * Via portals, the <form> tag is mounted as a sibling of the app root. The form's
+ * interface is then mounted back at the point of use.
+ */
+export declare const FormPortal: ({ css, children, id, onSubmit, variant }: FormPortalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/components/form-portal/index.d.ts

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

package/components/index.d.ts

@@ -5,6 +5,7 @@ export * from "./cube";
 export * from "./error-boundary";
 export * from "./field";
 export * from "./field-label";
+export * from "./form-portal";
 export * from "./items-breakdown";
 export * from "./loader";
 export * from "./portal";

package/components/items-breakdown/items-breakdown.d.ts

@@ -1,4 +1,4 @@
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 export type Item = {
     detail: string;
     name: string;

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

@@ -1,9 +1,10 @@
-import { CarrierAutoFunding } from "@shipengine/types";
+import { SE } from "@shipengine/api";
 import { AutoFundingFormPayload } from "./auto-funding-schema";
 export type AutoFundingFormProps = {
-    defaultValues: CarrierAutoFunding;
+    defaultValues?: SE.CarrierAutoFundingSettings;
     errorMessage?: string;
     hasError: boolean;
+    isInteger?: boolean;
     isLoading: boolean;
     onSubmit: (payload: AutoFundingFormPayload) => Promise<void> | void;
     onToggle: (enabled: boolean) => Promise<void> | void;
@@ -12,4 +13,4 @@ export type AutoFundingFormProps = {
  * This form that allows users to enable or disable auto funding, and
  * configure auto funding settings in ShipEngine API.
  */
-export declare const AutoFundingForm: ({ defaultValues, errorMessage, hasError, isLoading, onSubmit, onToggle, }: AutoFundingFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AutoFundingForm: ({ defaultValues, errorMessage, hasError, isInteger, isLoading, onSubmit, onToggle, }: AutoFundingFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

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

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

@@ -3,50 +3,50 @@ export declare const autoFundingSchema: z.ZodObject<{
     isEnabled: z.ZodBoolean;
     lowBalancePurchaseThreshold: z.ZodObject<z.extendShape<{
         amount: z.ZodNumber;
-        currency: z.ZodNativeEnum<typeof import("dist/shipengine-types/src").Currency>;
+        currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
     }, {
         amount: z.ZodNumber;
     }>, "strip", z.ZodTypeAny, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }>;
     maximumPurchasesPerDay: z.ZodNumber;
     purchaseAmount: z.ZodObject<z.extendShape<{
         amount: z.ZodNumber;
-        currency: z.ZodNativeEnum<typeof import("dist/shipengine-types/src").Currency>;
+        currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
     }, {
         amount: z.ZodNumber;
     }>, "strip", z.ZodTypeAny, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }>;
 }, "strip", z.ZodTypeAny, {
     isEnabled: boolean;
     lowBalancePurchaseThreshold: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
     maximumPurchasesPerDay: number;
     purchaseAmount: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
 }, {
     isEnabled: boolean;
     lowBalancePurchaseThreshold: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
     maximumPurchasesPerDay: number;
     purchaseAmount: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
 }>;
 export type AutoFundingFormFields = z.input<typeof autoFundingSchema>;

package/components/organisms/manual-funding-form/manual-funding-form.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import React from "react";
 import { ManualFundingFormPayload } from "./manual-funding-schema";
 export type ManualFundingFormProps<T = undefined> = {
     currentBalance: number;
     errorMessage?: string;
     hasError: boolean;
     isLoading: boolean;
+    onCancel: () => Promise<void> | void;
     onSubmit: (payload: ManualFundingFormPayload) => Promise<void> | void;
     requiredAmount?: number;
 } & ({
@@ -14,4 +15,4 @@ export type ManualFundingFormProps<T = undefined> = {
     formId?: string;
     portalRef?: never;
 });
-export declare const ManualFundingForm: <T extends Element>({ currentBalance, errorMessage, formId, hasError, isLoading, onSubmit, portalRef, requiredAmount, }: ManualFundingFormProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ManualFundingForm: <T extends Element>({ currentBalance, errorMessage, formId, hasError, isLoading, onCancel, onSubmit, portalRef, requiredAmount, }: ManualFundingFormProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/organisms/manual-funding-form/manual-funding-schema.d.ts

@@ -2,25 +2,25 @@ import { z } from "zod";
 export declare const manualFundingSchema: z.ZodObject<{
     funds: z.ZodObject<z.extendShape<{
         amount: z.ZodNumber;
-        currency: z.ZodNativeEnum<typeof import("dist/shipengine-types/src").Currency>;
+        currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
     }, {
         amount: z.ZodNumber;
     }>, "strip", z.ZodTypeAny, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }>;
 }, "strip", z.ZodTypeAny, {
     funds: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
 }, {
     funds: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
 }>;
 export type ManualFundingFormFields = z.input<typeof manualFundingSchema>;

package/components/portal/portal.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export type PortalProps<T> = {
     children: React.ReactNode;
-    target?: React.RefObject<T> | HTMLElement;
+    target?: React.RefObject<T> | HTMLElement | null;
 };
 /**
  * A no-frills wrapper around React.createPortal for more elegant DOM composition

package/components/settings-card/settings-card.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 export type SettingsCardProps = {
+    accessoryAction?: {
+        action: () => void;
+        name: string;
+    };
     cardAction: {
         action: () => void;
         name: string;
@@ -7,5 +11,6 @@ export type SettingsCardProps = {
     children?: React.ReactNode;
     subtitle?: string;
     title: string | JSX.Element;
+    verticallyAligned?: boolean;
 };
-export declare const SettingsCard: ({ cardAction, children, subtitle, title }: SettingsCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SettingsCard: ({ accessoryAction, cardAction, children, subtitle, title, verticallyAligned, }: SettingsCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/settings-card/settings-card.styles.d.ts

@@ -1,6 +1 @@
-import { SerializedStyles } from "@emotion/react";
-import { Theme } from "@packlink/brands";
-export declare const getSettingsCardContainerStyles: (theme: Theme) => SerializedStyles;
-export declare const getSettingsCardHeaderStyles: (theme: Theme) => SerializedStyles;
-export declare const getSettingsCardTitleStyles: (theme: Theme) => SerializedStyles;
-export declare const getSettingsCardBodyStyles: (theme: Theme) => SerializedStyles;
+export declare const styles: Record<"body" | "container" | "header" | "title" | "verticalContainer", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;