@commercelayer/app-elements 0.0.44 → 0.0.45

package/dist/main.d.ts

@@ -1,15 +1,14 @@
 export { formatDate, getIsoDateAtDayEdge, getIsoDateAtDaysBefore, timeSeparator } from './helpers/date';
 export { downloadJsonAsFile } from './helpers/downloadJsonAsFile';
-export { formatDisplayName } from './helpers/name';
+export { computeFullname, formatDisplayName } from './helpers/name';
 export { formatResourceName } from './helpers/resources';
+export { useClickAway } from './hooks/useClickAway';
 export { useDelayShow } from './hooks/useDelayShow';
+export { useIsChanged } from './hooks/useIsChanged';
 export { useOverlayNavigation } from './hooks/useOverlayNavigation';
-export { CoreSdkProvider, useCoreSdkProvider } from './providers/CoreSdkProvider';
-export { useCoreApi } from './providers/CoreSdkProvider/useCoreApi';
+export { CoreSdkProvider, useCoreApi, useCoreSdkProvider } from './providers/CoreSdkProvider';
 export { ErrorBoundary } from './providers/ErrorBoundary';
-export { TokenProvider, useTokenProvider } from './providers/TokenProvider';
-export { MetaTags } from './providers/TokenProvider/MetaTags';
-export type { TokenProviderAllowedApp, TokenProviderPermissionItem, TokenProviderRoleActions, TokenProviderRolePermissions, TokenProviderTokenApplicationKind } from './providers/TokenProvider/types';
+export { MetaTags, TokenProvider, useTokenProvider, type TokenProviderAllowedApp, type TokenProviderPermissionItem, type TokenProviderRoleActions, type TokenProviderRolePermissions, type TokenProviderTokenApplicationKind } from './providers/TokenProvider';
 export { A } from './ui/atoms/A';
 export { Avatar } from './ui/atoms/Avatar';
 export { AvatarLetter } from './ui/atoms/AvatarLetter';
@@ -31,7 +30,7 @@ export { PageHeading } from './ui/atoms/PageHeading';
 export { Pagination } from './ui/atoms/Pagination';
 export { Progress } from './ui/atoms/Progress';
 export { RadialProgress } from './ui/atoms/RadialProgress';
-export { Skeleton } from './ui/atoms/Skeleton';
+export { Skeleton, SkeletonItem } from './ui/atoms/Skeleton';
 export { SkeletonTemplate, withSkeletonTemplate } from './ui/atoms/SkeletonTemplate';
 export { Spacer } from './ui/atoms/Spacer';
 export { Stack } from './ui/atoms/Stack';
@@ -58,8 +57,9 @@ export { InputFeedback } from './ui/forms/InputFeedback';
 export { InputFile } from './ui/forms/InputFile';
 export { InputJson } from './ui/forms/InputJson';
 export { InputReadonly } from './ui/forms/InputReadonly';
-export { InputSelect, flatSelectValues, getDefaultValueFromFlatten, isSingleValueSelected } from './ui/forms/InputSelect';
+export { InputSelect, flatSelectValues, getDefaultValueFromFlatten, isGroupedSelectValues, isSingleValueSelected } from './ui/forms/InputSelect';
 export type { SelectValue } from './ui/forms/InputSelect';
+export { InputSpinner } from './ui/forms/InputSpinner';
 export { InputTextArea } from './ui/forms/InputTextArea';
 export { InputToggleBox } from './ui/forms/InputToggleBox';
 export { InputToggleListBox } from './ui/forms/InputToggleListBox';

package/dist/main.js

@@ -1,4 +1,4 @@
-import { _ as o, ay as n, $ as i, a0 as l, a1 as u, a2 as d, a3 as g, a4 as p, a5 as m, az as b, a6 as S, aA as T, a7 as D, T as I, as as c, at as y, au as C, a8 as P, W as k, a9 as B, aa as L, ab as O, ac as f, aH as v, aI as A, aJ as R, aL as N, aM as h, aN as x, aO as F, aP as w, aQ as M, aR as E, aV as V, aW as H, aX as J, aY as G, ad as K, a$ as Q, b0 as U, b1 as W, b2 as X, b3 as Y, Z, b4 as _, ae as $, aB as j, af as q, aC as z, aD as aa, ag as ea, ah as sa, ai as ta, aZ as ra, b5 as oa, aE as na, b6 as ia, aF as la, b7 as ua, aj as da, ak as ga, am as pa, an as ma, ao as ba, ap as Sa, b8 as Ta, b9 as Da, aq as Ia, av as ca, ar as ya, aw as Ca, aG as Pa, a_ as ka, X as Ba, ax as La, N as Oa, aS as fa, aK as va, J as Aa, O as Ra, Q as Na, aT as ha, K as xa, L as Fa, ba as wa, bb as Ma, bc as Ea, bd as Va, be as Ha, bf as Ja, aU as Ga, M as Ka, V as Qa, U as Ua, R as Wa, S as Xa, Y as Ya, al as Za } from "./main-1d56d931.js";
+import { a1 as o, aC as n, a2 as i, a3 as l, a4 as u, a5 as d, a6 as p, a7 as g, a8 as b, aD as m, a9 as S, aE as T, aa as I, W as c, aw as D, ax as y, ay as C, ab as k, Z as P, ac as B, ad as L, ae as A, af as O, aL as f, aM as v, aN as h, aP as R, aQ as F, aR as N, aS as w, aT as x, aU as M, aV as V, a_ as E, a$ as H, b0 as J, b1 as G, b2 as j, ag as K, b5 as Q, b6 as U, b7 as W, b8 as X, b9 as Y, _ as Z, ba as _, ah as $, aF as q, ai as z, aG as aa, aH as ea, aj as sa, ak as ta, al as ra, b3 as oa, bb as na, aI as ia, bc as la, aJ as ua, bd as da, am as pa, an as ga, ao as ba, aq as ma, ar as Sa, as as Ta, at as Ia, be as ca, bf as Da, au as ya, az as Ca, av as ka, aA as Pa, aK as Ba, b4 as La, $ as Aa, aB as Oa, O as fa, N as va, aW as ha, aO as Ra, J as Fa, Q as Na, R as wa, aX as xa, K as Ma, L as Va, bg as Ea, bh as Ha, bi as Ja, bj as Ga, bk as ja, bl as Ka, aY as Qa, aZ as Ua, M as Wa, S as Xa, X as Ya, Y as Za, T as _a, U as $a, V as qa, a0 as za, ap as ae } from "./main-385de024.js";
 import "react";
 import "react-dom";
 import "@commercelayer/sdk";
@@ -9,37 +9,38 @@ export {
   l as AvatarLetter,
   u as Badge,
   d as BlockCode,
-  g as Button,
-  p as ButtonFilter,
-  m as Card,
-  b as CardDialog,
+  p as Button,
+  g as ButtonFilter,
+  b as Card,
+  m as CardDialog,
   S as Container,
   T as ContextMenu,
-  D as CopyToClipboard,
-  I as CoreSdkProvider,
-  c as DropdownMenu,
+  I as CopyToClipboard,
+  c as CoreSdkProvider,
+  D as DropdownMenu,
   y as DropdownMenuDivider,
   C as DropdownMenuItem,
-  P as EmptyState,
-  k as ErrorBoundary,
+  k as EmptyState,
+  P as ErrorBoundary,
   B as Grid,
   L as Hint,
-  O as Hr,
-  f as Icon,
-  v as Input,
-  A as InputCheckbox,
-  R as InputCurrency,
-  N as InputDate,
-  h as InputDateRange,
-  x as InputFeedback,
-  F as InputFile,
-  w as InputJson,
+  A as Hr,
+  O as Icon,
+  f as Input,
+  v as InputCheckbox,
+  h as InputCurrency,
+  R as InputDate,
+  F as InputDateRange,
+  N as InputFeedback,
+  w as InputFile,
+  x as InputJson,
   M as InputReadonly,
-  E as InputSelect,
-  V as InputTextArea,
-  H as InputToggleBox,
-  J as InputToggleListBox,
-  G as Label,
+  V as InputSelect,
+  E as InputSpinner,
+  H as InputTextArea,
+  J as InputToggleBox,
+  G as InputToggleListBox,
+  j as Label,
   K as Legend,
   Q as List,
   U as ListDetails,
@@ -49,56 +50,61 @@ export {
   Z as MetaTags,
   _ as OrderSummary,
   $ as Overlay,
-  j as PageError,
-  q as PageHeading,
-  z as PageLayout,
-  aa as PageSkeleton,
-  ea as Pagination,
-  sa as Progress,
-  ta as RadialProgress,
-  ra as RadioButtons,
-  oa as RelationshipSelector,
-  na as Report,
-  ia as ResourceList,
-  la as SearchBar,
-  ua as ShipmentParcels,
-  da as Skeleton,
-  ga as SkeletonTemplate,
-  pa as Spacer,
-  ma as Stack,
-  ba as StatusDot,
-  Sa as Tab,
-  Ta as Table,
+  q as PageError,
+  z as PageHeading,
+  aa as PageLayout,
+  ea as PageSkeleton,
+  sa as Pagination,
+  ta as Progress,
+  ra as RadialProgress,
+  oa as RadioButtons,
+  na as RelationshipSelector,
+  ia as Report,
+  la as ResourceList,
+  ua as SearchBar,
+  da as ShipmentParcels,
+  pa as Skeleton,
+  ga as SkeletonItem,
+  ba as SkeletonTemplate,
+  ma as Spacer,
+  Sa as Stack,
+  Ta as StatusDot,
+  Ia as Tab,
+  ca as Table,
   Da as TableData,
-  Ia as Tabs,
-  ca as Td,
-  ya as Text,
-  Ca as Th,
-  Pa as Timeline,
-  ka as ToggleButtons,
-  Ba as TokenProvider,
-  La as Tr,
-  Oa as downloadJsonAsFile,
-  fa as flatSelectValues,
-  va as formatCentsToCurrency,
-  Aa as formatDate,
-  Ra as formatDisplayName,
-  Na as formatResourceName,
-  ha as getDefaultValueFromFlatten,
-  xa as getIsoDateAtDayEdge,
-  Fa as getIsoDateAtDaysBefore,
-  wa as getOrderDisplayStatus,
-  Ma as getOrderFulfillmentStatusName,
-  Ea as getOrderPaymentStatusName,
-  Va as getOrderStatusName,
-  Ha as getOrderTransactionPastTense,
-  Ja as getOrderTriggerAttributeName,
-  Ga as isSingleValueSelected,
-  Ka as timeSeparator,
-  Qa as useCoreApi,
-  Ua as useCoreSdkProvider,
-  Wa as useDelayShow,
-  Xa as useOverlayNavigation,
-  Ya as useTokenProvider,
-  Za as withSkeletonTemplate
+  ya as Tabs,
+  Ca as Td,
+  ka as Text,
+  Pa as Th,
+  Ba as Timeline,
+  La as ToggleButtons,
+  Aa as TokenProvider,
+  Oa as Tr,
+  fa as computeFullname,
+  va as downloadJsonAsFile,
+  ha as flatSelectValues,
+  Ra as formatCentsToCurrency,
+  Fa as formatDate,
+  Na as formatDisplayName,
+  wa as formatResourceName,
+  xa as getDefaultValueFromFlatten,
+  Ma as getIsoDateAtDayEdge,
+  Va as getIsoDateAtDaysBefore,
+  Ea as getOrderDisplayStatus,
+  Ha as getOrderFulfillmentStatusName,
+  Ja as getOrderPaymentStatusName,
+  Ga as getOrderStatusName,
+  ja as getOrderTransactionPastTense,
+  Ka as getOrderTriggerAttributeName,
+  Qa as isGroupedSelectValues,
+  Ua as isSingleValueSelected,
+  Wa as timeSeparator,
+  Xa as useClickAway,
+  Ya as useCoreApi,
+  Za as useCoreSdkProvider,
+  _a as useDelayShow,
+  $a as useIsChanged,
+  qa as useOverlayNavigation,
+  za as useTokenProvider,
+  ae as withSkeletonTemplate
 };

package/dist/{overrides-122c2b7f.js → overrides-dcbb2cb2.js}

@@ -1,6 +1,6 @@
 import * as V from "react";
 import fe, { useLayoutEffect as yn, createContext as Et, forwardRef as Cr, useContext as Te, createElement as pe, Fragment as Ne, useRef as ue, useState as me, useMemo as Ce, useCallback as Y, Component as Ar, useEffect as En } from "react";
-import { H as yr } from "./main-1d56d931.js";
+import { H as yr } from "./main-385de024.js";
 import { createPortal as Er } from "react-dom";
 var Ue = {}, xr = {
   get exports() {

package/dist/providers/CoreSdkProvider/CoreSdkProvider.d.ts

@@ -0,0 +1,20 @@
+import { type CommerceLayerClient } from '@commercelayer/sdk';
+import { type ReactNode } from 'react';
+interface CoreSdkProviderValue {
+    /**
+     * Valid SDK client
+     */
+    sdkClient: CommerceLayerClient;
+}
+interface CoreSdkProviderProps {
+    /**
+     * Entire app content
+     */
+    children: ((props: CoreSdkProviderValue) => ReactNode) | ReactNode;
+}
+export declare const useCoreSdkProvider: () => CoreSdkProviderValue;
+export declare function CoreSdkProvider({ children }: CoreSdkProviderProps): JSX.Element | null;
+export declare namespace CoreSdkProvider {
+    var displayName: string;
+}
+export {};

package/dist/providers/CoreSdkProvider/index.d.ts

@@ -1,20 +1,2 @@
-import { type CommerceLayerClient } from '@commercelayer/sdk';
-import { type ReactNode } from 'react';
-interface CoreSdkProviderValue {
-    /**
-     * Valid SDK client
-     */
-    sdkClient: CommerceLayerClient;
-}
-interface CoreSdkProviderProps {
-    /**
-     * Entire app content
-     */
-    children: ((props: CoreSdkProviderValue) => ReactNode) | ReactNode;
-}
-export declare const useCoreSdkProvider: () => CoreSdkProviderValue;
-declare function CoreSdkProvider({ children }: CoreSdkProviderProps): JSX.Element | null;
-declare namespace CoreSdkProvider {
-    var displayName: string;
-}
-export { CoreSdkProvider };
+export { CoreSdkProvider, useCoreSdkProvider } from './CoreSdkProvider';
+export { useCoreApi } from './useCoreApi';

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

@@ -0,0 +1,68 @@
+import { type ReactNode } from 'react';
+import { type TokenProviderTokenApplicationKind } from '../TokenProvider';
+import { type Organization } from '@commercelayer/sdk';
+import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+import { type TokenProviderAllowedApp, type TokenProviderAuthSettings, type TokenProviderAuthUser, type TokenProviderRoleActions } from './types';
+export interface TokenProviderValue {
+    dashboardUrl?: string;
+    settings: TokenProviderAuthSettings;
+    user: TokenProviderAuthUser | null;
+    organization: Organization | null;
+    canUser: (action: TokenProviderRoleActions, resource: ListableResourceType) => boolean;
+    canAccess: (appSlug: TokenProviderAllowedApp) => boolean;
+    emitInvalidAuth: (reason: string) => void;
+}
+export interface TokenProviderProps {
+    /**
+     * Token kind (will be validated)
+     * Eg. `integration` or `webapp` but also `imports` or `orders` in case of dashboard-generated token
+     */
+    kind: TokenProviderTokenApplicationKind;
+    /**
+     * Slug of the current app. Can be one of imports, exports, webhooks, resources, orders or custom.
+     * Will be used to persist token for current app only.
+     */
+    appSlug: TokenProviderAllowedApp;
+    /**
+     * Base domain to be used for Commerce Layer API requests (eg. `commercelayer.io`)
+     */
+    domain?: string;
+    /**
+     * Callback invoked when token is not valid
+     */
+    onInvalidAuth?: (info: {
+        dashboardUrl: string;
+        reason: string;
+    }) => void;
+    /**
+     * Automatically redirect to dashboard to start re-authentication flow and return to app with fresh token
+     */
+    reauthenticateOnInvalidAuth?: boolean;
+    /**
+     * Element to be used as loader (eg: skeleton or spinner icon)
+     */
+    loadingElement?: ReactNode;
+    /**
+     * Element to display in case of invalid token
+     */
+    errorElement?: ReactNode;
+    /**
+     * skip domain slug validation when is dev mode
+     */
+    devMode: boolean;
+    /**
+     * Optional. In case you already have an access token, this will skip the retrieval of token from URL or localStorage.
+     * When undefined (default scenario), token is expected to be retrieved from `?accessToken=xxxx` query string or localStorage (in this order).
+     */
+    accessToken?: string;
+    /**
+     * Entire app content
+     */
+    children: ((props: TokenProviderValue) => ReactNode) | ReactNode;
+}
+export declare const AuthContext: import("react").Context<TokenProviderValue>;
+export declare const useTokenProvider: () => TokenProviderValue;
+export declare function TokenProvider({ appSlug, kind, domain, onInvalidAuth, reauthenticateOnInvalidAuth, loadingElement, errorElement, devMode, children, accessToken: accessTokenFromProp }: TokenProviderProps): JSX.Element;
+export declare namespace TokenProvider {
+    var displayName: string;
+}

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

@@ -1,73 +1,3 @@
-import { type ReactNode } from 'react';
-import { type TokenProviderTokenApplicationKind } from '../TokenProvider/types';
-import { type Organization } from '@commercelayer/sdk';
-import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
-import { type TokenProviderAllowedApp, type TokenProviderAuthSettings, type TokenProviderAuthUser, type TokenProviderRoleActions } from './types';
-interface TokenProviderValue {
-    dashboardUrl?: string;
-    settings: TokenProviderAuthSettings;
-    user: TokenProviderAuthUser | null;
-    organization: Organization | null;
-    canUser: (action: TokenProviderRoleActions, resource: ListableResourceType) => boolean;
-    canAccess: (appSlug: TokenProviderAllowedApp) => boolean;
-    emitInvalidAuth: (reason: string) => void;
-}
-export interface TokenProviderProps {
-    /**
-     * Token kind (will be validated)
-     * Eg. `integration` or `webapp` but also `imports` or `orders` in case of dashboard-generated token
-     */
-    kind: TokenProviderTokenApplicationKind;
-    /**
-     * Slug of the current app. Can be one of imports, exports, webhooks, resources, orders or custom.
-     * Will be used to persist token for current app only.
-     */
-    appSlug: TokenProviderAllowedApp;
-    /**
-     * Base domain to be used for Commerce Layer API requests (eg. `commercelayer.io`)
-     */
-    domain?: string;
-    /**
-     * Callback invoked when token is not valid
-     */
-    onInvalidAuth?: (info: {
-        dashboardUrl: string;
-        reason: string;
-    }) => void;
-    /**
-     * Automatically redirect to dashboard to start re-authentication flow and return to app with fresh token
-     */
-    reauthenticateOnInvalidAuth?: boolean;
-    /**
-     * Element to be used as loader (eg: skeleton or spinner icon)
-     */
-    loadingElement?: ReactNode;
-    /**
-     * Element to display in case of invalid token
-     */
-    errorElement?: ReactNode;
-    /**
-     * skip domain slug validation when is dev mode
-     */
-    devMode: boolean;
-    /**
-     * Optional. In case you already have an access token, this will skip the retrieval of token from URL or localStorage.
-     * When undefined (default scenario), token is expected to be retrieved from `?accessToken=xxxx` query string or localStorage (in this order).
-     */
-    accessToken?: string;
-    /**
-     * Entire app content
-     */
-    children: ((props: TokenProviderValue) => ReactNode) | ReactNode;
-}
-export declare const AuthContext: import("react").Context<TokenProviderValue>;
-export declare const useTokenProvider: () => TokenProviderValue;
-declare function MockTokenProvider({ children }: TokenProviderProps): JSX.Element;
-declare namespace MockTokenProvider {
-    var displayName: string;
-}
-declare function TokenProvider({ appSlug, kind, domain, onInvalidAuth, reauthenticateOnInvalidAuth, loadingElement, errorElement, devMode, children, accessToken: accessTokenFromProp }: TokenProviderProps): JSX.Element;
-declare namespace TokenProvider {
-    var displayName: string;
-}
-export { MockTokenProvider, TokenProvider };
+export { MetaTags } from './MetaTags';
+export { TokenProvider, useTokenProvider } from './TokenProvider';
+export { type TokenProviderAllowedApp, type TokenProviderPermissionItem, type TokenProviderRoleActions, type TokenProviderRolePermissions, type TokenProviderTokenApplicationKind } from './types';

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

@@ -1,4 +1,4 @@
-import { type TokenProviderAllowedApp } from '../TokenProvider/types';
+import { type TokenProviderAllowedApp } from '../TokenProvider';
 import { type Organization } from '@commercelayer/sdk';
 import { type TokenProviderAuthSettings, type TokenProviderAuthUser, type TokenProviderRolePermissions } from './types';
 interface TokenProviderInternalState {

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

@@ -1,4 +1,4 @@
-import { type TokenProviderAllowedApp, type TokenProviderTokenApplicationKind } from '../TokenProvider/types';
+import { type TokenProviderAllowedApp, type TokenProviderTokenApplicationKind } from '../TokenProvider';
 import { type Mode, type TokenProviderAuthUser, type TokenProviderRolePermissions } from './types';
 export declare function isTokenExpired({ accessToken, compareTo }: {
     accessToken: string;