@commercelayer/app-elements 0.1.0 → 0.2.0

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

@@ -21,7 +21,7 @@ export interface InputCurrencyRangeProps extends InputWrapperBaseProps {
     defaultCurrency?: Uppercase<CurrencyCode>;
     className?: string;
 }
-export declare function InputCurrencyRange({ fromCents, toCents, placeholders, onChange, label, hint, currencyList, defaultCurrency, className, feedback }: InputCurrencyRangeProps): JSX.Element;
+export declare function InputCurrencyRange({ fromCents, toCents, placeholders, onChange, label, hint, currencyList, inline, defaultCurrency, className, feedback }: InputCurrencyRangeProps): JSX.Element;
 export declare namespace InputCurrencyRange {
     var displayName: string;
 }

package/dist/ui/forms/InputSelect/{Async.d.ts → AsyncComponent.d.ts}

@@ -5,8 +5,5 @@ import { type InputSelectProps, type SelectValue } from './InputSelect';
 interface AsyncSelectComponentProps extends Omit<SetRequired<InputSelectProps, 'loadAsyncValues'>, 'label' | 'hint'> {
     styles: StylesConfig<SelectValue>;
 }
-export declare function AsyncSelectComponent({ onSelect, noOptionsMessage, initialValues, isOptionDisabled, loadAsyncValues, debounceMs, ...rest }: AsyncSelectComponentProps): JSX.Element;
-export declare namespace AsyncSelectComponent {
-    var displayName: string;
-}
+export declare const AsyncSelectComponent: React.FC<AsyncSelectComponentProps>;
 export {};

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

@@ -27,8 +27,5 @@ interface Props extends Omit<InputSelectProps, 'onSelect' | 'defaultValue'> {
  * Value to be stored in the field can be controlled from the `pathToValue` prop.
  * @see InputSelect
  */
-export declare function HookedInputSelect({ name, pathToValue, ...props }: Props): JSX.Element;
-export declare namespace HookedInputSelect {
-    var displayName: string;
-}
+export declare const HookedInputSelect: React.FC<Props>;
 export {};

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

@@ -1,6 +1,6 @@
 import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
 import { type FocusEventHandler } from 'react';
-import { type MultiValue, type SingleValue } from 'react-select';
+import { type MultiValue, type Options, type SingleValue } from 'react-select';
 export type GroupedSelectValues = Array<{
     label: string;
     options: SelectValue[];
@@ -12,80 +12,89 @@ export interface SelectValue {
 }
 export type PossibleSelectValue = MultiValue<SelectValue> | SingleValue<SelectValue>;
 export interface InputSelectProps extends InputWrapperBaseProps {
+    /**
+     * Initial values to populate the select options. It can be a flat array of values or a grouped array.
+     */
     initialValues: GroupedSelectValues | SelectValue[];
+    /**
+     * Selected value or values, in case of `isMulti`
+     */
     defaultValue?: SelectValue | SelectValue[];
+    /**
+     * Placeholder text to display when no value is selected
+     */
     placeholder?: string;
+    /**
+     * Controls loading UI state
+     */
     isLoading?: boolean;
+    /**
+     * Text to display when loading
+     */
     loadingText?: string;
+    /**
+     * Add a clear button (x) to the select to empty all selected values
+     */
     isClearable?: boolean;
+    /**
+     * Disable the select
+     */
     isDisabled?: boolean;
+    /**
+     * When `true` it's possible to type to narrow down the options
+     */
     isSearchable?: boolean;
+    /**
+     * Allow to select multiple values
+     */
     isMulti?: boolean;
-    isOptionDisabled?: () => boolean;
+    /**
+     * Custom rule to disable an option
+     */
+    isOptionDisabled?: (option: SelectValue, selectValue: Options<SelectValue>) => boolean;
+    /**
+     * Callback triggered when a value is selected.
+     */
     onSelect: (value: PossibleSelectValue) => void;
+    /**
+     * onBlur event handler
+     */
     onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * HTML name attribute for the input component
+     */
     name?: string;
+    /**
+     * When `true` the dropdown menu is always open
+     */
     menuIsOpen?: boolean;
+    /**
+     * Message to display when no options are found
+     */
     noOptionsMessage?: string;
+    /**
+     * css class name
+     */
     className?: string;
     /**
      * Function to load async values on search
      */
     loadAsyncValues?: (inputValue: string) => Promise<GroupedSelectValues | SelectValue[]>;
     /**
-     * Debounce time in milliseconds for async search
-     * Only works when `loadAsyncValues` is provided
+     * Debounce time in milliseconds for async search.
+     * It only works when `loadAsyncValues` is provided
      */
     debounceMs?: number;
 }
-export declare function InputSelect({ label, hint, feedback, menuIsOpen, initialValues, defaultValue, isClearable, isLoading, loadingText, placeholder, isDisabled, isOptionDisabled, isSearchable, onSelect, isMulti, onBlur, name, className, loadAsyncValues, debounceMs, noOptionsMessage, ...rest }: InputSelectProps): JSX.Element;
-export declare namespace InputSelect {
-    var displayName: string;
-}
 /**
- * Helper function to understand and refine type of a single selected value
- * @param selectedValue possible value returned from select component
- * @returns true if selected value is single, from this point TypeScript will treat this as `SelectValue` type
- */
-export declare function isSingleValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue;
-/**
- * Helper function to understand and refine type of a set of selected values
- * @param selectedValue possible value returned from select component
- * @returns true if selected value is an array of selected values, from this point TypeScript will treat this as `SelectValue[]` type
- */
-export declare function isMultiValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue[];
-/**
- * Type-guard to check if prop `initialValues` is a GroupedSelectValues or SelectValue
- */
-export declare function isGroupedSelectValues(initialValues?: GroupedSelectValues | SelectValue[]): initialValues is GroupedSelectValues;
-/**
- * Helper function to extract only a specific property from the `SelectValue`
- * @param selectedValue possible value returned from select component
- * @param pathToValue optional path.to.property. Default is `value`
- * @returns a string or an array of strings.
- * Examples:
- * ```
- * flatSelectValues({value: 'ABCD', label: 'T-Shirt XL'})
- * // returns 'ABCD'
+ * Advanced select component with support for async options loading and multi-select.
+ * It's a wrapper around `react-select` with a subset of props exposed.
+ *
+ * To enable async data fetching for loading options while typing, provide the `loadAsyncValues` prop.
+ * This function will be used to fetch new options while typing and the results will be displayed in the options menu.
+ *
+ * When `isSearchable` is `true`, it's possible to type to narrow down the options. The component will always be searchable when `loadAsyncValues` is provided.
+ * On both standard and async mode it can be set to select a single single value or multiple values.
  *
- * flatSelectValues([
- *   {value: 'ABCD', label: 'T-Shirt M'},
- *   {value: '1234', label: 'T-Shirt XL'},
- * ], 'label')
- * // returns ['T-Shirt M', 'T-Shirt XL']
- * ```
- */
-export declare function flatSelectValues(selectedValue: PossibleSelectValue, pathToValue?: string): null | string | Array<string | number>;
-/**
- * To be used when storing the flatten value and there is the need
- * to retrieve the `defaultValue` to pass as <InputSelect> prop
- * @param currentValue the current value that is being stored in app state
- * @param initialValues the array of SelectValue objects that should contain the `currentValue`
- * @param pathToValue optional path.to.property. Default is `value`
- * @returns the matched value or values, otherwise undefined.
  */
-export declare function getDefaultValueFromFlatten({ currentValue, initialValues, pathToValue }: {
-    currentValue?: string | Array<string | number> | null;
-    initialValues?: GroupedSelectValues | SelectValue[];
-    pathToValue?: string;
-}): SelectValue | SelectValue[] | undefined;
+export declare const InputSelect: React.FC<InputSelectProps>;

package/dist/ui/forms/InputSelect/{Select.d.ts → SelectComponent.d.ts}

@@ -4,8 +4,5 @@ import { type InputSelectProps, type SelectValue } from './InputSelect';
 interface SelectComponentProps extends Omit<InputSelectProps, 'loadAsyncValues' | 'label' | 'hint'> {
     styles: StylesConfig<SelectValue>;
 }
-export declare function SelectComponent({ onSelect, noOptionsMessage, isOptionDisabled, initialValues, ...rest }: SelectComponentProps): JSX.Element;
-export declare namespace SelectComponent {
-    var displayName: string;
-}
+export declare const SelectComponent: React.FC<SelectComponentProps>;
 export {};

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

@@ -1,2 +1,3 @@
 export { HookedInputSelect } from './HookedInputSelect';
-export { InputSelect, flatSelectValues, getDefaultValueFromFlatten, isGroupedSelectValues, isMultiValueSelected, isSingleValueSelected, type InputSelectProps, type SelectValue } from './InputSelect';
+export { InputSelect, type InputSelectProps, type SelectValue } from './InputSelect';
+export { flatSelectValues, getDefaultValueFromFlatten, isGroupedSelectValues, isMultiValueSelected, isSingleValueSelected } from './utils';

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

@@ -1,13 +1,17 @@
 /// <reference types="react" />
-import { type ClearIndicatorProps, type DropdownIndicatorProps, type MultiValueRemoveProps } from 'react-select';
+import { type ClearIndicatorProps, type DropdownIndicatorProps, type GroupBase, type MultiValueGenericProps, type MultiValueRemoveProps } from 'react-select';
 import { type SelectValue } from '.';
 declare function DropdownIndicator(props: DropdownIndicatorProps<SelectValue>): JSX.Element;
 declare function ClearIndicator(props: ClearIndicatorProps<SelectValue>): JSX.Element;
+declare function MultiValueContainer(props: MultiValueGenericProps<MultiValueGenericProps<SelectValue, boolean, GroupBase<SelectValue>>>): JSX.Element;
+declare function MultiValueLabel(props: MultiValueGenericProps<MultiValueGenericProps<SelectValue, boolean, GroupBase<SelectValue>>>): string;
 declare function MultiValueRemove(props: MultiValueRemoveProps<SelectValue>): JSX.Element;
 declare const selectComponentOverrides: {
     DropdownIndicator: typeof DropdownIndicator;
     IndicatorSeparator: () => null;
     ClearIndicator: typeof ClearIndicator;
+    MultiValueContainer: typeof MultiValueContainer;
+    MultiValueLabel: typeof MultiValueLabel;
     MultiValueRemove: typeof MultiValueRemove;
 };
 export default selectComponentOverrides;

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

@@ -0,0 +1,48 @@
+import { type GroupedSelectValues, type PossibleSelectValue, type SelectValue } from './InputSelect';
+/**
+ * Helper function to understand and refine type of a single selected value
+ * @param selectedValue possible value returned from select component
+ * @returns true if selected value is single, from this point TypeScript will treat this as `SelectValue` type
+ */
+export declare function isSingleValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue;
+/**
+ * Helper function to understand and refine type of a set of selected values
+ * @param selectedValue possible value returned from select component
+ * @returns true if selected value is an array of selected values, from this point TypeScript will treat this as `SelectValue[]` type
+ */
+export declare function isMultiValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue[];
+/**
+ * Type-guard to check if prop `initialValues` is a GroupedSelectValues or SelectValue
+ */
+export declare function isGroupedSelectValues(initialValues?: GroupedSelectValues | SelectValue[]): initialValues is GroupedSelectValues;
+/**
+ * Helper function to extract only a specific property from the `SelectValue`
+ * @param selectedValue possible value returned from select component
+ * @param pathToValue optional path.to.property. Default is `value`
+ * @returns a string or an array of strings.
+ * Examples:
+ * ```
+ * flatSelectValues({value: 'ABCD', label: 'T-Shirt XL'})
+ * // returns 'ABCD'
+ *
+ * flatSelectValues([
+ *   {value: 'ABCD', label: 'T-Shirt M'},
+ *   {value: '1234', label: 'T-Shirt XL'},
+ * ], 'label')
+ * // returns ['T-Shirt M', 'T-Shirt XL']
+ * ```
+ */
+export declare function flatSelectValues(selectedValue: PossibleSelectValue, pathToValue?: string): null | string | Array<string | number>;
+/**
+ * To be used when storing the flatten value and there is the need
+ * to retrieve the `defaultValue` to pass as <InputSelect> prop
+ * @param currentValue the current value that is being stored in app state
+ * @param initialValues the array of SelectValue objects that should contain the `currentValue`
+ * @param pathToValue optional path.to.property. Default is `value`
+ * @returns the matched value or values, otherwise undefined.
+ */
+export declare function getDefaultValueFromFlatten({ currentValue, initialValues, pathToValue }: {
+    currentValue?: string | Array<string | number> | null;
+    initialValues?: GroupedSelectValues | SelectValue[];
+    pathToValue?: string;
+}): SelectValue | SelectValue[] | undefined;

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

@@ -30,11 +30,22 @@ export interface InputWrapperProps extends InputWrapperBaseProps {
     className?: string;
     name?: string;
     children: React.ReactNode;
+    fieldset?: boolean;
 }
-declare function InputWrapper({ label, children, className, hint, feedback, name, inline, ...rest }: InputWrapperProps): JSX.Element;
-declare namespace InputWrapper {
-    var displayName: string;
-}
-export { InputWrapper };
+export declare const InputWrapper: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    className?: string | undefined;
+    name?: string | undefined;
+    children: React.ReactNode;
+    fieldset?: boolean | undefined;
+    label?: string | undefined;
+    hint?: {
+        icon?: HintProps['icon'];
+        text: HintProps['children'];
+    } | undefined;
+    feedback?: Omit<InputFeedbackProps, "className"> | undefined;
+    inline?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
 export declare function getFeedbackStyle(feedback?: Omit<InputFeedbackProps, 'className'>): Record<string, boolean>;
 export declare function getFeedbackCssInJs(variant?: InputFeedbackProps['variant']): Pick<CSSStyleDeclaration, 'borderColor' | 'borderWidth'>;

package/dist/ui/resources/{LineItems.d.ts → ResourceLineItems.d.ts}

@@ -1,6 +1,6 @@
 import type { LineItem, ParcelLineItem, StockLineItem } from '@commercelayer/sdk';
 type Item = LineItem | ParcelLineItem | StockLineItem;
-export declare const LineItems: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+export declare const ResourceLineItems: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     items: Item[];
     size?: "small" | "normal" | undefined;
     footer?: React.ReactNode;

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

@@ -5,7 +5,7 @@ import { type QueryParamsList } from '@commercelayer/sdk';
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
 import { type FC } from 'react';
 import { type Resource } from './infiniteFetcher';
-export interface ResourceListItemProps<TResource extends ListableResourceType> extends SkeletonTemplateProps<{
+export interface ResourceListItemTemplateProps<TResource extends ListableResourceType> extends SkeletonTemplateProps<{
     /**
      * The fetched resource
      */
@@ -17,13 +17,13 @@ export interface ResourceListItemProps<TResource extends ListableResourceType> e
     remove?: () => void;
 }> {
 }
-export interface ResourceListItem<TResource extends ListableResourceType> {
+export interface ResourceListItemTemplate<TResource extends ListableResourceType> {
     /**
      * A react component to be used to render each item in the list.
      * For best results, pass as `Item` a component already wrapped in a `SkeletonTemplate` (or `withSkeletonTemplate` HOC).
      * In this way the loading state will be handled automatically.
      */
-    Item: FC<ResourceListItemProps<TResource>>;
+    ItemTemplate: FC<ResourceListItemTemplateProps<TResource>>;
 }
 export type ResourceListProps<TResource extends ListableResourceType> = Pick<SectionProps, 'title' | 'actionButton'> & {
     /**
@@ -38,7 +38,7 @@ export type ResourceListProps<TResource extends ListableResourceType> = Pick<Sec
      * An element to be rendered when the list is empty.
      */
     emptyState: JSX.Element;
-} & (ResourceListItem<TResource> | {
+} & (ResourceListItemTemplate<TResource> | {
     /**
      * Children as a function to render a custom element.
      * @example
@@ -56,7 +56,7 @@ export type ResourceListProps<TResource extends ListableResourceType> = Pick<Sec
 /**
  * Renders a list of resources of a given type with infinite scrolling.
  * It's possible to specify a query to filter the list and either
- * a React component to be used as `Item` template for the list or a function as `children` to render a custom element.
+ * 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, ...props }: ResourceListProps<TResource>): JSX.Element;
 export declare namespace ResourceList {

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { type ResourceListItemType } from './types';
+export interface ResourceListItemProps {
+    /**
+     * Resource object used to generate list item content depending on its own type
+     */
+    resource: ResourceListItemType;
+    /**
+     * HTML tag to render
+     */
+    tag?: 'a' | 'div';
+    /**
+     * Optional onClick function
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => void;
+}
+/**
+ * This component generates a list item based on the requested resource data and type.
+ */
+export declare const ResourceListItem: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    resource: ResourceListItemType;
+    tag?: "a" | "div" | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => void) | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;