@commercelayer/app-elements 1.15.1 → 1.15.3

package/dist/main.d.ts

@@ -17,7 +17,7 @@ export { CoreSdkProvider, useCoreApi, useCoreSdkProvider } from './providers/Cor
 export { ErrorBoundary } from './providers/ErrorBoundary';
 export { GTMProvider, useTagManager } from './providers/GTMProvider';
 export { MetaTags, TokenProvider, useTokenProvider, type TokenProviderAllowedApp, type TokenProviderPermissionItem, type TokenProviderRoleActions, type TokenProviderRolePermissions, type TokenProviderTokenApplicationKind } from './providers/TokenProvider';
-export { createApp, type ClAppProps } from './providers/createApp';
+export { createApp, type ClAppKey, type ClAppProps } from './providers/createApp';
 export { A, type AProps } from './ui/atoms/A';
 export { Alert, type AlertProps } from './ui/atoms/Alert';
 export { Avatar, type AvatarProps } from './ui/atoms/Avatar';

package/dist/main.js

@@ -1,5 +1,5 @@
 "use client";
-import { a2 as s, aI as t, a3 as o, a4 as r, a5 as n, a6 as u, a7 as i, a8 as p, a9 as l, aa as b, ab as c, aJ as d, ac as g, ad as S, T as m, aK as I, aL as k, aM as T, aN as D, ae as R, W as y, Y as h, af as C, ag as H, aO as P, a_ as A, a$ as f, b1 as B, b3 as F, b5 as v, b9 as L, bb as N, bg as O, bj as G, bl as w, bs as V, bu as x, bw as E, by as M, bA as W, bE as J, bF as U, ah as q, ai as z, b0 as K, b2 as Q, b4 as Y, b6 as Z, b8 as _, ba as $, bc as j, bd as X, be as aa, bf as ea, bh as sa, bi as ta, bk as oa, bm as ra, bt as na, bv as ua, bx as ia, bz as pa, bB as la, bC as ba, bD as ca, aP as da, aQ as ga, aR as Sa, aS as ma, _ as Ia, aT as ka, aj as Ta, aU as Da, aV as Ra, ak as ya, al as ha, am as Ca, an as Ha, aW as Pa, bI as Aa, bJ as fa, bK as Ba, bL as Fa, bM as va, bN as La, bO as Na, bP as Oa, ao as Ga, aX as wa, ap as Va, aq as xa, ar as Ea, as as Ma, au as Wa, av as Ja, aw as Ua, ax as qa, ay as za, aD as Ka, az as Qa, aY as Ya, aE as Za, aF as _a, aA as $a, aG as ja, aB as Xa, aZ as ae, $ as ee, aH as se, aC as te, z as oe, a1 as re, C as ne, D as ue, k as ie, y as pe, bn as le, b7 as be, l as ce, m as de, q as ge, A as Se, B as me, E as Ie, bR as ke, bS as Te, bo as De, s as Re, t as ye, u as he, bT as Ce, bU as He, bV as Pe, bW as Ae, bX as fe, F as Be, G as Fe, bY as ve, bZ as Le, b_ as Ne, b$ as Oe, H as Ge, J as we, c0 as Ve, c1 as xe, c2 as Ee, M as Me, N as We, e as Je, K as Ue, L as qe, h as ze, bp as Ke, bq as Qe, br as Ye, n as Ze, r as _e, bG as $e, v as je, x as Xe, O as as, U as es, V as ss, P as ts, Q as os, R as rs, S as ns, bQ as us, Z as is, a0 as ps, bH as ls, at as bs } from "./main-YIuQocCz.js";
+import { a2 as s, aI as t, a3 as o, a4 as r, a5 as n, a6 as u, a7 as i, a8 as p, a9 as l, aa as b, ab as c, aJ as d, ac as g, ad as S, T as m, aK as I, aL as k, aM as T, aN as D, ae as R, W as y, Y as h, af as C, ag as H, aO as P, a_ as A, a$ as f, b1 as B, b3 as F, b5 as v, b9 as L, bb as N, bg as O, bj as G, bl as w, bs as V, bu as x, bw as E, by as M, bA as W, bE as J, bF as U, ah as q, ai as z, b0 as K, b2 as Q, b4 as Y, b6 as Z, b8 as _, ba as $, bc as j, bd as X, be as aa, bf as ea, bh as sa, bi as ta, bk as oa, bm as ra, bt as na, bv as ua, bx as ia, bz as pa, bB as la, bC as ba, bD as ca, aP as da, aQ as ga, aR as Sa, aS as ma, _ as Ia, aT as ka, aj as Ta, aU as Da, aV as Ra, ak as ya, al as ha, am as Ca, an as Ha, aW as Pa, bI as Aa, bJ as fa, bK as Ba, bL as Fa, bM as va, bN as La, bO as Na, bP as Oa, ao as Ga, aX as wa, ap as Va, aq as xa, ar as Ea, as as Ma, au as Wa, av as Ja, aw as Ua, ax as qa, ay as za, aD as Ka, az as Qa, aY as Ya, aE as Za, aF as _a, aA as $a, aG as ja, aB as Xa, aZ as ae, $ as ee, aH as se, aC as te, z as oe, a1 as re, C as ne, D as ue, k as ie, y as pe, bn as le, b7 as be, l as ce, m as de, q as ge, A as Se, B as me, E as Ie, bR as ke, bS as Te, bo as De, s as Re, t as ye, u as he, bT as Ce, bU as He, bV as Pe, bW as Ae, bX as fe, F as Be, G as Fe, bY as ve, bZ as Le, b_ as Ne, b$ as Oe, H as Ge, J as we, c0 as Ve, c1 as xe, c2 as Ee, M as Me, N as We, e as Je, K as Ue, L as qe, h as ze, bp as Ke, bq as Qe, br as Ye, n as Ze, r as _e, bG as $e, v as je, x as Xe, O as as, U as es, V as ss, P as ts, Q as os, R as rs, S as ns, bQ as us, Z as is, a0 as ps, bH as ls, at as bs } from "./main-BY0B1QQT.js";
 export {
   s as A,
   t as ActionButtons,

package/dist/providers/TokenProvider/types.d.ts

@@ -1,5 +1,5 @@
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
-export type TokenProviderAllowedApp = 'bundles' | 'customers' | 'exports' | 'gift_cards' | 'imports' | 'inventory' | 'orders' | 'price_lists' | 'promotions' | 'returns' | 'shipments' | 'sku_lists' | 'skus' | 'stock_transfers' | 'subscriptions' | 'tags' | 'webhooks' | 'dashboard';
+export type TokenProviderAllowedApp = 'bundles' | 'customers' | 'exports' | 'gift_cards' | 'imports' | 'inventory' | 'orders' | 'price_lists' | 'promotions' | 'returns' | 'shipments' | 'sku_lists' | 'skus' | 'stock_transfers' | 'subscriptions' | 'tags' | 'webhooks' | 'dashboard' | 'resources';
 export type TokenProviderTokenApplicationKind = 'integration' | 'sales_channel' | 'webapp' | 'resources' | TokenProviderAllowedApp;
 export type TokenProviderRoleActions = 'create' | 'destroy' | 'read' | 'update';
 export type TokenProviderPermissionItem = Record<TokenProviderRoleActions, boolean>;

package/dist/providers/createApp.d.ts

@@ -1,7 +1,15 @@
 import { type FC } from 'react';
 import { type Root } from 'react-dom/client';
+import { type TokenProviderAllowedApp } from './TokenProvider';
+export type ClAppKey = `clApp_${TokenProviderAllowedApp}`;
+/**
+ * Method to mount the React application in the provider `node` with the set of options passed as `props`.
+ */
+type ClApp = Record<ClAppKey, {
+    init: (node?: HTMLElement, props?: ClAppProps) => Root | undefined;
+}>;
 declare global {
-    interface Window {
+    interface Window extends ClApp {
         clAppConfig: {
             /**
              * Specific domain to use for Commerce Layer API requests.
@@ -13,12 +21,6 @@ declare global {
              */
             gtmId?: string;
         };
-        /**
-         * Method to mount the React application in the provider `node` with the set of options passed as `props`.
-         */
-        clApp?: {
-            init: (node?: HTMLElement, props?: ClAppProps) => Root | undefined;
-        };
     }
 }
 export interface ClAppProps {
@@ -54,4 +56,5 @@ export interface ClAppProps {
  * The React application will them be mounted into the provided `node` element, when the `init` method is called.
  * @param children - The root component of the app.
  **/
-export declare function createApp(children: FC<ClAppProps>): void;
+export declare function createApp(children: FC<ClAppProps>, appSlug: TokenProviderAllowedApp): void;
+export {};

package/dist/ui/atoms/StatusIcon.d.ts

@@ -8,7 +8,7 @@ export interface StatusIconProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Background color, `none` for no background
      */
-    background?: 'green' | 'orange' | 'red' | 'gray' | 'teal' | 'white' | 'black' | 'none';
+    background?: 'green' | 'orange' | 'red' | 'gray' | 'lightGray' | 'teal' | 'white' | 'black' | 'none';
     /**
      * padding around the icon can bne: 'none' | 'small' | 'large'
      */

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type FilterItemOptions } from './types';
+interface FieldProps {
+    item: FilterItemOptions;
+}
+export declare function FieldOptions({ item }: FieldProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type FilterItemTextSearch } from './types';
+interface FieldProps {
+    item: FilterItemTextSearch;
+}
+export declare function FieldTextSearch({ item }: FieldProps): JSX.Element | null;
+export {};

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

@@ -9,8 +9,21 @@ export interface FiltersFormProps {
      * New queryString generated on submit to be used to navigate to the listing page
      */
     onSubmit: (queryString: string) => void;
+    /**
+     * By default, we strip out all filters that are not part of the `instructions` array.
+     * The option `predicateWhitelist` is used to whitelist a set of predicates that you want to use as filters.
+     *
+     * @example
+     * ```jsx
+     * useResourceFilters({
+     *   instructions,
+     *   predicateWhitelist: [ 'starts_at_lteq', 'expires_at_gteq', 'starts_at_gt', 'expires_at_lt' ]
+     * })
+     * ```
+     */
+    predicateWhitelist: string[];
 }
-declare function FiltersForm({ instructions, onSubmit }: FiltersFormProps): JSX.Element;
+declare function FiltersForm({ instructions, predicateWhitelist, onSubmit }: FiltersFormProps): JSX.Element;
 declare namespace FiltersForm {
     var displayName: string;
 }

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

@@ -21,5 +21,18 @@ export interface FiltersNavProps {
      * Implemented function should open the filters form.
      */
     onFilterClick: (queryString: string, filterPredicate?: string) => void;
+    /**
+     * By default, we strip out all filters that are not part of the `instructions` array.
+     * The option `predicateWhitelist` is used to whitelist a set of predicates that you want to use as filters.
+     *
+     * @example
+     * ```jsx
+     * useResourceFilters({
+     *   instructions,
+     *   predicateWhitelist: [ 'starts_at_lteq', 'expires_at_gteq', 'starts_at_gt', 'expires_at_lt' ]
+     * })
+     * ```
+     */
+    predicateWhitelist: string[];
 }
-export declare function FiltersNav({ instructions, onFilterClick: onBtnLabelClick, onUpdate, queryString }: FiltersNavProps): JSX.Element;
+export declare function FiltersNav({ instructions, onFilterClick: onBtnLabelClick, onUpdate, queryString, predicateWhitelist }: FiltersNavProps): JSX.Element;

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

@@ -20,8 +20,21 @@ export interface FilterSearchBarProps {
      * Input placeholder
      */
     placeholder?: string;
+    /**
+     * By default, we strip out all filters that are not part of the `instructions` array.
+     * The option `predicateWhitelist` is used to whitelist a set of predicates that you want to use as filters.
+     *
+     * @example
+     * ```jsx
+     * useResourceFilters({
+     *   instructions,
+     *   predicateWhitelist: [ 'starts_at_lteq', 'expires_at_gteq', 'starts_at_gt', 'expires_at_lt' ]
+     * })
+     * ```
+     */
+    predicateWhitelist: string[];
 }
-declare function FiltersSearchBar({ instructions, placeholder, onUpdate, queryString }: FilterSearchBarProps): JSX.Element;
+declare function FiltersSearchBar({ instructions, placeholder, onUpdate, queryString, predicateWhitelist }: FilterSearchBarProps): JSX.Element;
 declare namespace FiltersSearchBar {
     var displayName: string;
 }

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

@@ -4,13 +4,14 @@ export interface AdaptFormValuesToSdkParams<FilterFormValues> {
     formValues: FilterFormValues;
     timezone?: string;
     instructions: FiltersInstructions;
+    predicateWhitelist?: string[];
 }
 /**
  * Covert FilterFormValues in SDK filter object
  * @param formValues a valid FilterFormValues object
  * @returns an object of type QueryFilter to be used in the SDK stripping out empty or undefined values
  */
-export declare function adaptFormValuesToSdk<FilterFormValues extends Record<UiFilterName, UiFilterValue | CurrencyRangeFieldValue>>({ formValues, instructions, timezone }: AdaptFormValuesToSdkParams<FilterFormValues>): QueryFilter;
+export declare function adaptFormValuesToSdk<FilterFormValues extends Record<UiFilterName, UiFilterValue | CurrencyRangeFieldValue>>({ formValues, instructions, timezone, predicateWhitelist }: AdaptFormValuesToSdkParams<FilterFormValues>): QueryFilter;
 export declare function extractEnforcedValues(instructions: FiltersInstructions): QueryFilter;
 /**
  * Be sure to have all the default values

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

@@ -2,10 +2,11 @@ import { type FiltersInstructions, type FormFullValues, type UiFilterName, type
 export interface AdaptUrlQueryToFormValuesParams {
     queryString: string;
     instructions: FiltersInstructions;
+    predicateWhitelist?: string[];
 }
 /**
  * Covert query string in filters form values
  * @param qs url query string
  * @returns an object containing FilterFormValues
  */
-export declare function adaptUrlQueryToFormValues<FilterFormValues extends Record<UiFilterName, UiFilterValue>>({ queryString, instructions }: AdaptUrlQueryToFormValuesParams): FilterFormValues & FormFullValues;
+export declare function adaptUrlQueryToFormValues<FilterFormValues extends Record<UiFilterName, UiFilterValue>>({ queryString, instructions, predicateWhitelist }: AdaptUrlQueryToFormValuesParams): FilterFormValues & FormFullValues;

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

@@ -3,6 +3,7 @@ import { type FiltersInstructions } from './types';
 export interface AdaptUrlQueryToSdkParams {
     queryString: string;
     instructions: FiltersInstructions;
+    predicateWhitelist?: string[];
     timezone?: string;
 }
 /**
@@ -11,4 +12,4 @@ export interface AdaptUrlQueryToSdkParams {
  * @returns an object of type QueryFilter to be used in the SDK
  * stripping out empty or undefined values and enforcing default status_in when empty
  */
-export declare function adaptUrlQueryToSdk({ queryString, instructions, timezone }: AdaptUrlQueryToSdkParams): QueryFilter;
+export declare function adaptUrlQueryToSdk({ queryString, instructions, predicateWhitelist, timezone }: AdaptUrlQueryToSdkParams): QueryFilter;

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

@@ -2,10 +2,11 @@ import { type FiltersInstructions } from './types';
 export interface AdaptUrlQueryToUrlQueryParams {
     queryString: string;
     instructions: FiltersInstructions;
+    predicateWhitelist?: string[];
 }
 /**
  * Parse current URL query string to return a new query string that contains only valid form values
  * @param qs url query string
  * @returns an object of type QueryFilter to be used in the SDK stripping out empty or undefined values
  */
-export declare function adaptUrlQueryToUrlQuery({ queryString, instructions }: AdaptUrlQueryToUrlQueryParams): string;
+export declare function adaptUrlQueryToUrlQuery({ queryString, instructions, predicateWhitelist }: AdaptUrlQueryToUrlQueryParams): string;

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

@@ -7,6 +7,7 @@ import { type AdaptUrlQueryToUrlQueryParams } from './adaptUrlQueryToUrlQuery';
 import { type FiltersInstructions, type FormFullValues, type PageInfoFormValues, type TimeRangeFormValues, type UiFilterName, type UiFilterValue } from './types';
 interface MakeFilterAdaptersParams {
     instructions: FiltersInstructions;
+    predicateWhitelist: string[];
 }
 interface MakeFilterAdaptersReturn<FilterFormValues extends FormFullValues> {
     adaptFormValuesToUrlQuery: (params: Pick<AdaptFormValuesToUrlQueryParams<FormFullValues>, 'formValues'>) => string;
@@ -16,5 +17,5 @@ interface MakeFilterAdaptersReturn<FilterFormValues extends FormFullValues> {
     adaptUrlQueryToUrlQuery: (params: Pick<AdaptUrlQueryToUrlQueryParams, 'queryString'>) => string;
     validInstructions: FiltersInstructions;
 }
-export type MakeFiltersAdapters = <FilterFormValues extends Record<UiFilterName, UiFilterValue>>({ instructions }: MakeFilterAdaptersParams) => MakeFilterAdaptersReturn<FilterFormValues>;
+export type MakeFiltersAdapters = <FilterFormValues extends Record<UiFilterName, UiFilterValue>>({ instructions, predicateWhitelist }: MakeFilterAdaptersParams) => MakeFilterAdaptersReturn<FilterFormValues>;
 export {};

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

@@ -86,9 +86,11 @@ export interface FilterItemTextSearch extends Omit<BaseFilterItem, 'sdk'> {
     type: 'textSearch';
     render: {
         /**
-         * UI component to render
+         * UI component to render.
+         *
+         * ⚠️ You can have only one `searchBar` component.
          */
-        component: 'searchBar';
+        component: 'searchBar' | 'input';
     };
     sdk: Pick<BaseFilterItem['sdk'], 'predicate'>;
 }

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

@@ -12,6 +12,19 @@ interface UseResourceFiltersConfig {
      * Array of instruction items to build the filters behaviors
      */
     instructions: FiltersInstructions;
+    /**
+     * By default, we strip out all filters that are not part of the `instructions` array.
+     * The option `predicateWhitelist` is used to whitelist a set of predicates that you want to use as filters.
+     *
+     * @example
+     * ```jsx
+     * useResourceFilters({
+     *   instructions,
+     *   predicateWhitelist: [ 'starts_at_lteq', 'expires_at_gteq', 'starts_at_gt', 'expires_at_lt' ]
+     * })
+     * ```
+     */
+    predicateWhitelist?: string[];
 }
 interface UseResourceFiltersHook {
     /**
@@ -58,5 +71,5 @@ interface UseResourceFiltersHook {
      */
     viewTitle?: string;
 }
-export declare function useResourceFilters({ instructions }: UseResourceFiltersConfig): UseResourceFiltersHook;
+export declare function useResourceFilters({ instructions, predicateWhitelist }: UseResourceFiltersConfig): UseResourceFiltersHook;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "type": "module",
   "license": "MIT",
   "files": [

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { type FilterItemOptions, type FilterItemTextSearch } from './types';
-interface FieldProps {
-    item: FilterItemOptions | FilterItemTextSearch;
-}
-export declare function FieldItem({ item }: FieldProps): JSX.Element | null;
-export {};