@commercelayer/app-elements 1.24.3 → 2.0.1

package/dist/ui/resources/ResourceAddress/ResourceAddressFormFields.d.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod';
 
-export declare const resourceAddressFormFieldsSchema: z.ZodObject<{
+export declare const resourceAddressFormFieldsSchema: z.ZodEffects<z.ZodObject<{
+    business: z.ZodDefault<z.ZodOptional<z.ZodNullable<z.ZodBoolean>>>;
     first_name: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     last_name: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     company: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -16,6 +17,7 @@ export declare const resourceAddressFormFieldsSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     city: string;
     country_code: string;
+    business: boolean | null;
     line_1: string;
     state_code: string;
     phone: string;
@@ -32,6 +34,35 @@ export declare const resourceAddressFormFieldsSchema: z.ZodObject<{
     line_1: string;
     state_code: string;
     phone: string;
+    business?: boolean | null | undefined;
+    first_name?: string | null | undefined;
+    last_name?: string | null | undefined;
+    company?: string | null | undefined;
+    line_2?: string | null | undefined;
+    zip_code?: string | null | undefined;
+    notes?: string | null | undefined;
+    billing_info?: string | null | undefined;
+}>, {
+    city: string;
+    country_code: string;
+    business: boolean | null;
+    line_1: string;
+    state_code: string;
+    phone: string;
+    first_name?: string | null | undefined;
+    last_name?: string | null | undefined;
+    company?: string | null | undefined;
+    line_2?: string | null | undefined;
+    zip_code?: string | null | undefined;
+    notes?: string | null | undefined;
+    billing_info?: string | null | undefined;
+}, {
+    city: string;
+    country_code: string;
+    line_1: string;
+    state_code: string;
+    phone: string;
+    business?: boolean | null | undefined;
     first_name?: string | null | undefined;
     last_name?: string | null | undefined;
     company?: string | null | undefined;
@@ -41,12 +72,36 @@ export declare const resourceAddressFormFieldsSchema: z.ZodObject<{
     billing_info?: string | null | undefined;
 }>;
 export interface ResourceAddressFormFieldsProps {
+    /**
+     * Optional namespace.
+     * @example If you set `name="address"` then all input names will be prepended by `address.` (e.g. `address.first_name`).
+     */
     name?: string;
+    /**
+     * Optional setting to define if given `Address` `billing_info` data is visible.
+     * @default false
+     */
     showBillingInfo?: boolean;
+    /**
+     * Optional setting to define if given `Address` `billing_info` data is visible.
+     * @default true
+     */
+    showNotes?: boolean;
+    /**
+     * Determines whether to show only business fields (`company`) or non-business fields (`first_name` and `last_name`).
+     *
+     * When `business` is set to **`true`** the `first_name` and `last_name` fields are hidden.
+     * When `business` is set to **`false`** the `company` field is hidden.
+     *
+     * @default false
+     */
+    showNameOrCompany?: boolean;
 }
 export declare const ResourceAddressFormFields: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     name?: string | undefined;
     showBillingInfo?: boolean | undefined;
+    showNotes?: boolean | undefined;
+    showNameOrCompany?: boolean | undefined;
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceAddress/useResourceAddressOverlay.d.ts

@@ -1,9 +1,10 @@
 import { Address } from '@commercelayer/sdk';
 
-export declare const useResourceAddressOverlay: ({ title, address, showBillingInfo, onUpdate }: {
+export declare const useResourceAddressOverlay: ({ title, address, showBillingInfo, showNotes, onUpdate }: {
     title?: string;
     address: Address;
     showBillingInfo?: boolean;
+    showNotes?: boolean;
     onUpdate?: (updatedAddress: Address) => void;
 }) => {
     ResourceAddressOverlay: () => false | import("react/jsx-runtime").JSX.Element;

package/dist/ui/resources/ResourceList/ResourceList.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
-import { QueryParamsList } from '@commercelayer/sdk';
+import { default as React, FC } from 'react';
+import { ListableResourceType, QueryParamsList } from '@commercelayer/sdk';
 import { FetcherResponse, Resource } from './infiniteFetcher';
 import { SkeletonTemplateProps } from '../../atoms/SkeletonTemplate';
 import { SectionProps } from '../../atoms/Section';
@@ -25,7 +24,7 @@ export interface ResourceListItemTemplate<TResource extends ListableResourceType
      */
     ItemTemplate: FC<ResourceListItemTemplateProps<TResource>>;
 }
-export type ResourceListProps<TResource extends ListableResourceType> = Pick<SectionProps, 'title' | 'actionButton'> & {
+export type ResourceListProps<TResource extends ListableResourceType> = Pick<SectionProps, 'actionButton'> & {
     /**
      * The resource type to be fetched in the list
      */
@@ -50,6 +49,14 @@ export type ResourceListProps<TResource extends ListableResourceType> = Pick<Sec
      * An element to be rendered when the list is empty.
      */
     emptyState: JSX.Element;
+    /**
+     * Title.
+     */
+    title?: ((recordCount: number | undefined) => React.ReactNode) | React.ReactNode;
+    /**
+     *
+     */
+    variant?: 'boxed';
 } & (ResourceListItemTemplate<TResource> | {
     /**
      * Children as a function to render a custom element.
@@ -63,6 +70,7 @@ export type ResourceListProps<TResource extends ListableResourceType> = Pick<Sec
     children: (childrenProps: {
         isLoading: boolean;
         data?: FetcherResponse<Resource<TResource>>;
+        isFirstLoading: boolean;
     }) => React.ReactNode;
 });
 /**
@@ -70,7 +78,7 @@ export type ResourceListProps<TResource extends ListableResourceType> = Pick<Sec
  * It's possible to specify a query to filter the list and either
  * a React component (`ItemTemplate`) to be used as item template for the list or a function as `children` to render a custom element.
  */
-export declare function ResourceList<TResource extends ListableResourceType>({ type, query, title, actionButton, emptyState, metricsQuery, ...props }: ResourceListProps<TResource>): JSX.Element;
+export declare function ResourceList<TResource extends ListableResourceType>({ type, query, title, variant, actionButton, emptyState, metricsQuery, ...props }: ResourceListProps<TResource>): JSX.Element;
 export declare namespace ResourceList {
     var displayName: string;
 }

package/dist/ui/resources/ResourceList/infiniteFetcher.d.ts

@@ -1,5 +1,4 @@
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
-import { CommerceLayerClient, QueryParamsList } from '@commercelayer/sdk';
+import { CommerceLayerClient, ListableResourceType, QueryParamsList } from '@commercelayer/sdk';
 import { MetricsApiClient } from './metricsApiClient';
 
 type ListResource<TResource extends ListableResourceType> = Awaited<ReturnType<CommerceLayerClient[TResource]['list']>>;

package/dist/ui/resources/ResourceList/metricsApiClient.d.ts

@@ -1,6 +1,5 @@
 import { Writable } from 'type-fest';
-import { ListMeta, ListResponse } from '@commercelayer/sdk/lib/cjs/resource';
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+import { ListableResourceType, ListMeta, ListResponse } from '@commercelayer/sdk';
 import { MetricsFilters } from '../useResourceFilters/adaptSdkToMetrics';
 import { Resource } from './infiniteFetcher';
 

package/dist/ui/resources/ResourceList/reducer.d.ts

@@ -1,5 +1,5 @@
 import { FetcherResponse, Resource } from './infiniteFetcher';
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+import { ListableResourceType } from '@commercelayer/sdk';
 
 interface ResourceListInternalState<TResource extends ListableResourceType> {
     isLoading: boolean;

package/dist/ui/resources/ResourceListItem/common.d.ts

@@ -8,8 +8,8 @@ export declare const ListItemDescription: import('../../atoms/SkeletonTemplate')
     isLoading?: boolean | undefined;
 }>;
 export declare const ListItemIcon: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
-    color: "none" | "green" | "orange" | "red" | "gray" | "lightGray" | "teal" | "white" | "black" | undefined;
-    icon: "download" | "package" | "tag" | "list" | "warning" | "info" | "x" | "airplaneTakeoff" | "appWindow" | "arrowBendDownRight" | "arrowCircleDown" | "arrowCircleUp" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowsLeftRight" | "arrowSquareOut" | "arrowUpRight" | "arrowUUpLeft" | "asteriskSimple" | "bank" | "bookOpenText" | "bracketsCurly" | "buildings" | "calculator" | "calendarBlank" | "calendarCheck" | "camera" | "caretDown" | "caretRight" | "chat" | "chatCircle" | "check" | "clipboardText" | "clockClockwise" | "cloudArrowUp" | "creditCard" | "currencyEur" | "dotsThree" | "envelopeSimple" | "eye" | "eyeSlash" | "flag" | "folderOpen" | "funnelSimple" | "gearFine" | "gift" | "gitFork" | "githubLogo" | "globe" | "globeSimple" | "googleLogo" | "hourglass" | "houseSimple" | "lifebuoy" | "lightbulbFilament" | "linkSimple" | "lockSimple" | "lockSimpleOpen" | "magnifyingGlass" | "mapPin" | "megaphoneSimple" | "minus" | "minusCircle" | "pencilSimple" | "percent" | "plus" | "printer" | "pulse" | "pushPin" | "puzzlePiece" | "question" | "receipt" | "rocketLaunch" | "seal" | "shapes" | "shield" | "shoppingBag" | "signOut" | "slackLogo" | "sliders" | "squaresFour" | "stack" | "storefront" | "suitcaseSimple" | "ticket" | "trash" | "treeStructure" | "truck" | "tShirt" | "upload" | "user" | "userCircle" | "userRectangle" | "users" | "warehouse" | "warningCircle" | "webhooksLogo" | "xCircle";
+    color: "none" | "black" | "gray" | "green" | "orange" | "red" | "teal" | "white" | "lightGray" | undefined;
+    icon: "x" | "airplaneTakeoff" | "appWindow" | "arrowBendDownRight" | "arrowCircleDown" | "arrowCircleUp" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowsLeftRight" | "arrowSquareOut" | "arrowUpRight" | "arrowUUpLeft" | "asteriskSimple" | "bank" | "bookOpenText" | "bracketsCurly" | "buildings" | "calculator" | "calendarBlank" | "calendarCheck" | "camera" | "caretDown" | "caretRight" | "chat" | "chatCircle" | "check" | "clipboardText" | "clockClockwise" | "cloudArrowUp" | "creditCard" | "currencyEur" | "dotsSixVertical" | "dotsThree" | "download" | "envelopeSimple" | "eye" | "eyeSlash" | "flag" | "folderOpen" | "funnelSimple" | "gearFine" | "gift" | "gitFork" | "githubLogo" | "globe" | "globeSimple" | "googleLogo" | "hourglass" | "houseSimple" | "info" | "lifebuoy" | "lightbulbFilament" | "linkSimple" | "list" | "lockSimple" | "lockSimpleOpen" | "magnifyingGlass" | "mapPin" | "megaphoneSimple" | "minus" | "minusCircle" | "package" | "pencilSimple" | "percent" | "plus" | "printer" | "pulse" | "pushPin" | "puzzlePiece" | "question" | "receipt" | "rocketLaunch" | "seal" | "shapes" | "shield" | "shoppingBag" | "signOut" | "slackLogo" | "sliders" | "squaresFour" | "stack" | "storefront" | "suitcaseSimple" | "tag" | "ticket" | "trash" | "treeStructure" | "truck" | "tShirt" | "upload" | "user" | "userCircle" | "userRectangle" | "users" | "warehouse" | "warning" | "warningCircle" | "webhooksLogo" | "xCircle";
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceMetadata/ResourceMetadata.d.ts

@@ -1,4 +1,4 @@
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+import { ListableResourceType } from '@commercelayer/sdk';
 
 export interface ResourceMetadataOverlay {
     /**

package/dist/ui/resources/ResourceMetadata/ResourceMetadataForm.d.ts

@@ -1,5 +1,5 @@
 import { ResourceMetadataProps } from './ResourceMetadata';
-import { Metadata } from '@commercelayer/sdk/lib/cjs/resource';
+import { Metadata } from '@commercelayer/sdk';
 
 interface ResourceMetadataFormValues {
     metadata: Metadata;

package/dist/ui/resources/ResourceTags.d.ts

@@ -1,4 +1,4 @@
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+import { ListableResourceType } from '@commercelayer/sdk';
 
 type TaggableResource = Extract<ListableResourceType, 'addresses' | 'bundles' | 'customers' | 'coupons' | 'gift_cards' | 'line_items' | 'orders' | 'returns' | 'sku_options' | 'skus' | 'shipments'>;
 interface TagsOverlay {

package/dist/ui/resources/useResourceFilters/adaptFormValuesToSdk.d.ts

@@ -1,5 +1,5 @@
 import { CurrencyRangeFieldValue, FiltersInstructions, UiFilterName, UiFilterValue } from './types';
-import { QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { QueryFilter } from '@commercelayer/sdk';
 
 export interface AdaptFormValuesToSdkParams<FilterFormValues> {
     formValues: FilterFormValues;

package/dist/ui/resources/useResourceFilters/adaptSdkToMetrics.d.ts

@@ -1,5 +1,4 @@
-import { QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+import { ListableResourceType, QueryFilter } from '@commercelayer/sdk';
 import { FiltersInstructions } from './types';
 
 export type CoreResourceEnabledInMetrics = 'orders' | 'returns';

package/dist/ui/resources/useResourceFilters/adaptSdkToUrlQuery.d.ts

@@ -1,4 +1,4 @@
-import { QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { QueryFilter } from '@commercelayer/sdk';
 import { FiltersInstructions } from './types';
 
 export interface AdaptSdkToUrlQueryParams {

package/dist/ui/resources/useResourceFilters/adaptUrlQueryToSdk.d.ts

@@ -1,5 +1,5 @@
 import { FiltersInstructions } from './types';
-import { QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { QueryFilter } from '@commercelayer/sdk';
 
 export interface AdaptUrlQueryToSdkParams {
     queryString: string;

package/dist/ui/resources/useResourceFilters/adapters.types.d.ts

@@ -6,7 +6,7 @@ import { AdaptSdkToUrlQueryParams } from './adaptSdkToUrlQuery';
 import { AdaptSdkToMetricsParams, MetricsFilters } from './adaptSdkToMetrics';
 import { AdaptFormValuesToUrlQueryParams } from './adaptFormValuesToUrlQuery';
 import { AdaptFormValuesToSdkParams } from './adaptFormValuesToSdk';
-import { QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { QueryFilter } from '@commercelayer/sdk';
 
 interface MakeFilterAdaptersParams {
     instructions: FiltersInstructions;

package/dist/ui/resources/useResourceFilters/useResourceFilters.d.ts

@@ -2,8 +2,7 @@ import { FiltersInstructions } from './types';
 import { makeFilterAdapters } from './adapters';
 import { FiltersNavProps } from './FiltersNav';
 import { FiltersFormProps } from './FiltersForm';
-import { QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
-import { ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+import { ListableResourceType, QueryFilter } from '@commercelayer/sdk';
 import { ResourceListItemTemplate } from '../ResourceList/ResourceList';
 import { ResourceListProps } from '../ResourceList';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "1.24.3",
+  "version": "2.0.1",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -27,7 +27,7 @@
     "pnpm": ">=7"
   },
   "dependencies": {
-    "@commercelayer/sdk": "5.37.0",
+    "@commercelayer/sdk": "6.0.2",
     "@types/lodash": "^4.17.0",
     "@types/react": "^18.2.78",
     "@types/react-datepicker": "^6.2.0",
@@ -78,7 +78,7 @@
     "wouter": "^3.1.2"
   },
   "peerDependencies": {
-    "@commercelayer/sdk": "^5.x",
+    "@commercelayer/sdk": "^6.x",
     "query-string": "^8.2.x",
     "react": "^18.2.x",
     "react-dom": "^18.2.x",