@commercelayer/app-elements 4.7.1 → 5.0.0

package/dist/ui/composite/PageLayout.d.ts

@@ -35,8 +35,8 @@ export declare const PageLayout: import('../atoms/SkeletonTemplate').SkeletonTem
     scrollToTop?: boolean | undefined;
     description?: ReactNode;
     title: ReactNode;
-    gap?: "none" | "only-top" | "only-bottom" | "both" | undefined;
     toolbar?: import('../atoms/PageHeading/PageHeadingToolbar').PageHeadingToolbarProps | undefined;
+    gap?: "none" | "only-top" | "only-bottom" | "both" | undefined;
     navigationButton?: {
         label: string;
         onClick: () => void;

package/dist/ui/composite/PageSkeleton.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 /**
  * This component renders a skeleton page layout simulating the presence of the common elements of an initial app page:
  * - page title,

package/dist/ui/composite/Report.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 interface ReportItem {
     label: string;
     count: ReactNode;

package/dist/ui/composite/Routes/Routes.d.ts

@@ -1,4 +1,5 @@
 import { ListableResourceType } from '@commercelayer/sdk';
+import { JSX } from 'react';
 import { RouteComponentProps } from 'wouter';
 import { GetParams } from './utils';
 /**

package/dist/ui/composite/TableData.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { JsonObject } from 'type-fest';
 export interface TableDataProps {
     /** Data to render in the table */

package/dist/ui/forms/CodeEditor/HookedCodeEditor.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { CodeEditorProps } from './CodeEditorComponent';
 export interface HookedCodeEditorProps extends Omit<CodeEditorProps, 'name'>, Required<Pick<CodeEditorProps, 'name'>> {
 }

package/dist/ui/forms/Form/HookedForm.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FieldValues, FormProviderProps } from 'react-hook-form';
 interface FormProps<T extends FieldValues> extends FormProviderProps<T> {
     /**

package/dist/ui/forms/Input/HookedInput.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputProps } from './Input';
 export interface HookedInputProps extends InputProps {
     /**

package/dist/ui/forms/InputCheckbox/HookedInputCheckbox.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputCheckboxProps } from './InputCheckbox';
 export interface HookedInputCheckboxProps extends Omit<InputCheckboxProps, 'onChange' | 'checked' | 'feedback' | 'defaultValue' | 'defaultChecked'> {
     /**

package/dist/ui/forms/InputCheckbox/InputCheckbox.d.ts

@@ -1,4 +1,5 @@
 import { InputWrapperBaseProps } from '../../internals/InputWrapper';
+import { JSX } from 'react';
 export interface InputCheckboxProps extends Omit<InputWrapperBaseProps, 'label' | 'inline'>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> {
     /**
      * Icon component

package/dist/ui/forms/InputCheckboxGroup/InputCheckboxGroupItem.d.ts

@@ -51,7 +51,7 @@ export declare const InputCheckboxGroupItem: import('../../atoms/SkeletonTemplat
         min: number;
         max: number;
     } | undefined;
-    icon?: JSX.Element | undefined;
+    icon?: import("react").JSX.Element | undefined;
     checked?: boolean | undefined | undefined;
     hideIconOnDesktop?: boolean | undefined;
     delayMs?: number | undefined;

package/dist/ui/forms/InputCurrency/HookedInputCurrency.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputCurrencyProps } from './InputCurrency';
 export interface HookedInputCurrencyProps extends Omit<InputCurrencyProps, 'onChange' | 'onBlur' | 'cents'> {
     /**

package/dist/ui/forms/InputCurrencyRange.d.ts

@@ -1,6 +1,7 @@
 import { CurrencyCode } from '../../helpers/currencies';
 import { InputCurrencyProps } from './InputCurrency';
 import { InputWrapperBaseProps } from '../internals/InputWrapper';
+import { JSX } from 'react';
 type Cents = InputCurrencyProps['cents'];
 export interface InputCurrencyRangeProps extends InputWrapperBaseProps {
     fromCents?: Cents;

package/dist/ui/forms/InputDate/HookedInputDate.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputDateProps } from './InputDateComponent';
 export interface HookedInputDateProps extends Omit<InputDateProps, 'onChange'> {
     /**

package/dist/ui/forms/InputDateRange/HookedInputDateRange.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputDateRangeProps } from './InputDateRange';
 export interface HookedInputDateRangeProps extends Omit<InputDateRangeProps, 'onChange' | 'value'> {
     /**

package/dist/ui/forms/InputFeedback.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 type FeedbackVariant = 'danger' | 'success' | 'warning';
 export interface InputFeedbackProps {
     message: string;

package/dist/ui/forms/InputJson.d.ts

@@ -1,4 +1,5 @@
 import { InputWrapperBaseProps } from '../internals/InputWrapper';
+import { JSX } from 'react';
 export interface InputJsonProps<JsonType> extends InputWrapperBaseProps {
     placeholder: object;
     validateFn: (json: any) => JsonType;

package/dist/ui/forms/InputRadioGroup/InputRadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, JSX, ReactNode } from 'react';
 interface OptionItem {
     /**
      * Item identifier, must be unique and will be used for the onChange callback

package/dist/ui/forms/InputResourceGroup/FullList.d.ts

@@ -1,5 +1,6 @@
 import { OverlayProps } from '../../internals/Overlay';
 import { ListableResourceType } from '@commercelayer/sdk';
+import { JSX } from 'react';
 export interface SortBy {
     attribute: string;
     direction: 'asc' | 'desc';

package/dist/ui/forms/InputSelect/overrides.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { ClearIndicatorProps, DropdownIndicatorProps, GroupBase, GroupHeadingProps, MenuListProps, MultiValueGenericProps } from 'react-select';
 import { InputSelectValue } from '.';
 declare function DropdownIndicator(props: DropdownIndicatorProps<InputSelectValue>): JSX.Element;

package/dist/ui/forms/InputSimpleSelect/HookedInputSimpleSelect.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputSimpleSelectProps } from './InputSimpleSelect';
 export interface HookedInputSimpleSelectProps extends InputSimpleSelectProps {
     /**

package/dist/ui/forms/InputSpinner/HookedInputSpinner.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputSpinnerProps } from './InputSpinner';
 export interface HookedInputSpinnerProps extends Omit<InputSpinnerProps, 'onChange' | 'defaultValues'> {
     /**

package/dist/ui/forms/InputSwitch/HookedInputSwitch.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputSwitchProps } from './InputSwitch';
 export interface HookedInputSwitchProps extends InputSwitchProps {
     /**

package/dist/ui/forms/InputTextArea/HookedInputTextArea.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputTextAreaProps } from './InputTextArea';
 export interface HookedInputTextAreaProps extends InputTextAreaProps {
     /**

package/dist/ui/forms/InputToggleButton/HookedInputToggleButton.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InputToggleButtonProps } from './InputToggleButton';
 export type HookedInputToggleButtonProps = Omit<InputToggleButtonProps, 'value' | 'onChange'> & {
     /**

package/dist/ui/forms/InputToggleButton/InputToggleButton.d.ts

@@ -1,4 +1,5 @@
 import { InputWrapperBaseProps } from '../../internals/InputWrapper';
+import { JSX } from 'react';
 import { Simplify } from 'type-fest';
 type ToggleButtonValue = string | boolean | number;
 interface ToggleButtonOption {

package/dist/ui/forms/Label.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     gap?: boolean;
 }

package/dist/ui/forms/Legend.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface LegendProps extends React.HTMLAttributes<HTMLLegendElement> {
     gap?: boolean;
 }

package/dist/ui/forms/ReactHookForm/HookedValidationApiError.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 interface ValidationApiErrorProps {
     /**
      * An error object returned from a failed API request.

package/dist/ui/forms/ReactHookForm/HookedValidationError.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 interface Props {
     /**
      * field name to match hook-form state

package/dist/ui/internals/FlexRow.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 export type FlexRowAlignItems = 'top' | 'bottom' | 'center';
 export interface FlexRowProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;

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

@@ -2,6 +2,7 @@ import { TokenProviderAuthUser } from '../../../providers/TokenProvider/types';
 import { ListItemProps } from '../../composite/ListItem';
 import { BuyXPayYPromotion, Customer, ExternalPromotion, FixedAmountPromotion, FixedPricePromotion, FlexPromotion, FreeGiftPromotion, FreeShippingPromotion, Order, PercentageDiscountPromotion, Return, Shipment, SkuListItem, StockTransfer } from '@commercelayer/sdk';
 import { t } from 'i18next';
+import { JSX } from 'react';
 export type ResourceListItemType = Order | Return | Customer | StockTransfer | SkuListItem | Shipment | BuyXPayYPromotion | ExternalPromotion | FixedAmountPromotion | FixedPricePromotion | FreeGiftPromotion | FreeShippingPromotion | PercentageDiscountPromotion | FlexPromotion;
 export interface ResourceListItemComponentProps {
     name: React.ReactNode;

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FilterItemCurrencyRange } from './types';
 interface FieldCurrencyRangeProps {
     item: FilterItemCurrencyRange;

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FilterItemOptions } from './types';
 interface FieldProps {
     item: FilterItemOptions;

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FilterItemTextSearch } from './types';
 interface FieldProps {
     item: FilterItemTextSearch;

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FilterItemTime } from './types';
 interface FieldTimeRangeProps {
     item: FilterItemTime;

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FiltersInstructions } from './types';
 export interface FiltersFormProps {
     /**

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FiltersInstructions } from './types';
 export interface FiltersNavProps {
     /**

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

@@ -1,4 +1,5 @@
 import { SearchBarProps } from '../../composite/SearchBar';
+import { JSX } from 'react';
 import { FiltersInstructions } from './types';
 export interface FilterSearchBarProps extends Pick<SearchBarProps, 'placeholder' | 'debounceMs'> {
     /**

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

@@ -1,6 +1,7 @@
 import { UseResourceListConfig } from '../useResourceList';
 import { ResourceListProps } from '../useResourceList/useResourceList';
 import { ListableResourceType, QueryFilter } from '@commercelayer/sdk';
+import { JSX } from 'react';
 import { FiltersFormProps } from './FiltersForm';
 import { FiltersNavProps } from './FiltersNav';
 import { makeFilterAdapters } from './adapters';

package/dist/ui/resources/useResourceList/VisibilityTrigger.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { default as React, JSX } from 'react';
 interface VisibilityTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
     rootMargin?: string;
     callback: (entry: IntersectionObserverEntry) => void;

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

@@ -32,7 +32,7 @@ export type ResourceListProps<TResource extends ListableResourceType> = Pick<Sec
      * When a string is provided, it will be rendered as inline text below title and actionButton.
      * When other ReactNode is provided, it will be rendered as a custom element and no title or actionButton will be shown.
      */
-    emptyState?: ReactNode;
+    emptyState?: Awaited<ReactNode>;
     /**
      * Title.
      */

package/dist/utils/children.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { JSX, ReactElement, ReactNode } from 'react';
 export declare function isFunctionComponent(reactNode: ReactNode): reactNode is ReactElement<any, React.FunctionComponent<any>>;
 /**
  * Checks if a ReactNode matches a specific component display name.

package/dist/utils/htmltags.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export declare function enforceAllowedTags<AllowedTags extends ReadonlyArray<keyof JSX.IntrinsicElements>, Tag extends AllowedTags[number], DefaultTag extends AllowedTags[number]>({ tag, allowedTags, defaultTag }: {
     tag?: Tag;
     allowedTags: AllowedTags;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "4.7.1",
+  "version": "5.0.0",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -28,26 +28,26 @@
   },
   "dependencies": {
     "@commercelayer/js-auth": "^6.7.1",
-    "@commercelayer/sdk": "6.32.0",
+    "@commercelayer/sdk": "6.33.0",
     "@monaco-editor/react": "4.7.0",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.3.18",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^19.0.10",
     "@types/react-datepicker": "^7.0.0",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.0.4",
     "classnames": "^2.5.1",
     "i18next": "^24.2.2",
     "i18next-resources-to-backend": "^1.2.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "pluralize": "^8.0.0",
     "query-string": "^9.1.1",
-    "react": "^18.3.1",
-    "react-currency-input-field": "^3.9.0",
-    "react-datepicker": "^7.6.0",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-currency-input-field": "^3.10.0",
+    "react-datepicker": "^8.1.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.4.0",
+    "react-i18next": "^15.4.1",
     "react-select": "^5.10.0",
     "react-tooltip": "^5.28.0",
     "swr": "^2.3.2",
@@ -56,7 +56,7 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@commercelayer/eslint-config-ts-react": "^1.4.5",
+    "@commercelayer/eslint-config-ts-react": "^2.2.0",
     "@hookform/resolvers": "^3.10.0",
     "@phosphor-icons/react": "v2.1.7",
     "@tailwindcss/forms": "^0.5.10",
@@ -73,14 +73,14 @@
     "date-fns-tz": "^3.2.0",
     "eslint": "^8.57.1",
     "jsdom": "^26.0.0",
-    "msw": "^2.7.0",
-    "postcss": "^8.5.2",
+    "msw": "^2.7.3",
+    "postcss": "^8.5.3",
     "react-gtm-module": "^2.0.11",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3",
-    "vite": "^6.1.0",
+    "vite": "^6.2.0",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.5",
+    "vitest": "^3.0.7",
     "wouter": "^3.6.0"
   },
   "peerDependencies": {