@commercelayer/app-elements 1.8.2 → 1.9.0

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

@@ -1,8 +1,10 @@
+import { type IconProps } from '../../atoms/Icon';
 import React from 'react';
 import { variantCss } from './badgeVariants';
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Render a different variant. */
     variant: keyof typeof variantCss;
+    icon?: IconProps['name'];
     children: React.ReactNode;
 }
 /** Badges are used to highlight an item's status for quick recognition. */

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { type IconProps } from './Icon';
+import { type StatusIconProps } from './StatusIcon';
 export interface ButtonFilterProps extends React.HTMLAttributes<HTMLDivElement> {
     onClick?: () => void;
     onRemoveRequest?: () => void;
-    icon?: IconProps['name'];
+    icon?: StatusIconProps['name'];
     label: string;
 }
 declare function ButtonFilter({ onClick, onRemoveRequest, label, icon, className, ...rest }: ButtonFilterProps): JSX.Element;

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

@@ -1,11 +1,11 @@
 import { type ReactNode } from 'react';
-import { type IconProps } from './Icon';
+import { type StatusIconProps } from './StatusIcon';
 export interface EmptyStateProps {
     title: string;
     description?: ReactNode;
     action?: ReactNode;
     className?: string;
-    icon?: IconProps['name'];
+    icon?: StatusIconProps['name'];
 }
 declare function EmptyState({ title, description, action, icon, className, ...rest }: EmptyStateProps): JSX.Element;
 declare namespace EmptyState {

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

@@ -1,18 +1,11 @@
 /// <reference types="react" />
+import { type IconProps as PhosphorIconProps } from '@phosphor-icons/react';
 import { iconMapping } from './icons';
-export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IconProps extends PhosphorIconProps {
     /**
      * Name of the icon to display
      */
     name: keyof typeof iconMapping;
-    /**
-     * Background color, `none` for no background
-     */
-    background?: 'green' | 'orange' | 'red' | 'gray' | 'teal' | 'white' | 'black' | 'none';
-    /**
-     * padding around the icon can bne: 'none' | 'small' | 'large'
-     */
-    gap?: 'none' | 'small' | 'large';
 }
 /** `app-elements` provides a subset of [Phosphor Icons](https://phosphoricons.com/) out-of-the-box. */
 export declare const Icon: React.FC<IconProps>;

package/dist/ui/atoms/Icon/icons.d.ts

@@ -9,6 +9,8 @@ export declare const iconMapping: {
     readonly arrowsLeftRight: phosphor.Icon;
     readonly arrowUpRight: phosphor.Icon;
     readonly asterisk: phosphor.Icon;
+    readonly buildings: phosphor.Icon;
+    readonly caretDown: phosphor.Icon;
     readonly caretRight: phosphor.Icon;
     readonly chatCircle: phosphor.Icon;
     readonly check: phosphor.Icon;
@@ -23,20 +25,26 @@ export declare const iconMapping: {
     readonly google: phosphor.Icon;
     readonly home: phosphor.Icon;
     readonly hourglass: phosphor.Icon;
+    readonly lifebuoy: phosphor.Icon;
     readonly magnifyingGlass: phosphor.Icon;
     readonly minus: phosphor.Icon;
+    readonly minusCircle: phosphor.Icon;
     readonly package: phosphor.Icon;
     readonly pencilSimple: phosphor.Icon;
     readonly printer: phosphor.Icon;
+    readonly plus: phosphor.Icon;
     readonly pulse: phosphor.Icon;
     readonly resources: phosphor.Icon;
     readonly settings: phosphor.Icon;
     readonly shoppingBag: phosphor.Icon;
+    readonly signOut: phosphor.Icon;
     readonly team: phosphor.Icon;
     readonly truck: phosphor.Icon;
     readonly upload: phosphor.Icon;
     readonly user: phosphor.Icon;
+    readonly userCircle: phosphor.Icon;
     readonly warning: phosphor.Icon;
     readonly warningCircle: phosphor.Icon;
     readonly x: phosphor.Icon;
+    readonly xCircle: phosphor.Icon;
 };

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

@@ -1,5 +1,5 @@
 import { type SVGAttributes } from 'react';
-import { type IconProps } from './Icon';
+import { type StatusIconProps } from './StatusIcon';
 export interface RadialProgressProps extends SVGAttributes<SVGElement> {
     /**
      * Progress percentage express as number from 0 to 100.
@@ -15,7 +15,7 @@ export interface RadialProgressProps extends SVGAttributes<SVGElement> {
     /**
      * Optional icon to be rendered in the center of the circle
      */
-    icon?: IconProps['name'];
+    icon?: StatusIconProps['name'];
 }
 /**
  * Used to render a radial progress with a pending and a progress state. It also accepts an optional icon to be rendered in the center of the circle.

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { type iconMapping } from './Icon/icons';
+export interface StatusIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Name of the icon to display
+     */
+    name: keyof typeof iconMapping;
+    /**
+     * Background color, `none` for no background
+     */
+    background?: 'green' | 'orange' | 'red' | 'gray' | 'teal' | 'white' | 'black' | 'none';
+    /**
+     * padding around the icon can bne: 'none' | 'small' | 'large'
+     */
+    gap?: 'none' | 'small' | 'large';
+}
+export declare const StatusIcon: React.FC<StatusIconProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 type Props = Pick<FlexRowProps, 'children'> & {
     /**
      * Icon component
-     * Example: `<Icon>` or `<RadialProgress>` or `<Avatar>`
+     * Example: `<StatusIcon>` or `<RadialProgress>` or `<Avatar>`
      */
     icon?: JSX.Element;
 };

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface DropdownProps {
+import { type DropdownMenuProps } from '../../composite/Dropdown/DropdownMenu';
+export interface DropdownProps extends Pick<DropdownMenuProps, 'menuHeader' | 'menuPosition'> {
     /** The trigger for the dropdown menu. Can be a JSX Element or simply a `string`. */
     dropdownLabel?: React.ReactNode;
     /** List of links and actions. You can use a combination of `DropdownItem` and `DropdownDivider` components. */

package/dist/ui/composite/Dropdown/Dropdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/composite/Dropdown/DropdownDivider.d.ts

@@ -1,8 +1,5 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 export interface DropdownDividerProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
-export declare function DropdownDivider({ children, ...rest }: DropdownDividerProps): JSX.Element;
-export declare namespace DropdownDivider {
-    var displayName: string;
-}
+export declare const DropdownDivider: FC<DropdownDividerProps>;

package/dist/ui/composite/Dropdown/DropdownItem.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
+import { type IconProps } from '../../atoms/Icon/Icon';
+import { type FC } from 'react';
 export interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
     label: string;
-    icon?: React.ReactNode;
-}
-export declare function DropdownItem({ label, icon, ...rest }: DropdownItemProps): JSX.Element;
-export declare namespace DropdownItem {
-    var displayName: string;
+    icon?: IconProps['name'] | 'keep-space';
 }
+export declare const DropdownItem: FC<DropdownItemProps>;

package/dist/ui/composite/Dropdown/DropdownMenu.d.ts

@@ -1,10 +1,20 @@
-/// <reference types="react" />
-interface Props extends React.HTMLAttributes<HTMLElement> {
+import { type FC } from 'react';
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
+    /** Menu content */
     children?: React.ReactNode;
+    /** Set to `none` to hide the top arrow */
     arrow?: 'none';
+    /** Optional header for the dropdown menu */
+    menuHeader?: string;
+    /**
+     * Opening position of the dropdown menu
+     * @default bottom-right
+     */
+    menuPosition?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    /**
+     * If set, the arrow will be centered when trigger button is smaller than 50px
+     * Otherwise it will fallback to a default centering based on 32px trigger button
+     */
+    parentElementRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function DropdownMenu({ children, arrow, ...rest }: Props): JSX.Element;
-export declare namespace DropdownMenu {
-    var displayName: string;
-}
-export {};
+export declare const DropdownMenu: FC<DropdownMenuProps>;

package/dist/ui/composite/Dropdown/DropdownSearch.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export interface DropdownSearchProps {
+    /**
+     * Callback triggered when the user types in the search input.
+     * By default, this callback is debounced by 500ms.
+     */
+    onSearch: (hint: string) => void;
+    /**
+     * Debounce time in ms for the onSearch callback. Set to 0 to disable debounce.
+     * @default 500
+     */
+    debounceMs?: number;
+    /**
+     * Placeholder text for the input element
+     */
+    placeholder?: string;
+    /**
+     * Enable auto focus on the input element
+     */
+    autoFocus?: boolean;
+}
+/**
+ * This component renders an input as dropdown menu item with debounced `onSearch` callback.
+ */
+export declare const DropdownSearch: import("react").ForwardRefExoticComponent<DropdownSearchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/ui/composite/Dropdown/DropdownSearch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/composite/Dropdown/index.d.ts

@@ -1,3 +1,4 @@
 export { Dropdown, type DropdownProps } from './Dropdown';
 export { DropdownDivider, type DropdownDividerProps } from './DropdownDivider';
 export { DropdownItem, type DropdownItemProps } from './DropdownItem';
+export { DropdownSearch, type DropdownSearchProps } from './DropdownSearch';

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

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 type Props = Pick<FlexRowProps, 'alignItems' | 'children'> & {
     /**
      * Icon component
-     * Example: `<Icon>` or `<RadialProgress>` or `<Avatar>`
+     * Example: `<StatusIcon>` or `<RadialProgress>` or `<Avatar>`
      */
     icon?: JSX.Element;
     /**

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

@@ -8,7 +8,7 @@ export declare const ListItemDescription: import('../../atoms/SkeletonTemplate')
 }>;
 export declare const ListItemIcon: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     color: "none" | "green" | "orange" | "red" | "gray" | "teal" | "white" | "black" | undefined;
-    icon: "download" | "package" | "settings" | "arrowBendDownRight" | "apps" | "arrowCircleDown" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowsLeftRight" | "arrowUpRight" | "asterisk" | "caretRight" | "chatCircle" | "check" | "cloud" | "credentials" | "creditCard" | "eye" | "flag" | "funnel" | "github" | "google" | "home" | "hourglass" | "magnifyingGlass" | "minus" | "pencilSimple" | "printer" | "pulse" | "resources" | "shoppingBag" | "team" | "truck" | "upload" | "user" | "warning" | "warningCircle" | "x";
+    icon: "download" | "package" | "settings" | "x" | "arrowBendDownRight" | "apps" | "arrowCircleDown" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowsLeftRight" | "arrowUpRight" | "asterisk" | "buildings" | "caretDown" | "caretRight" | "chatCircle" | "check" | "cloud" | "credentials" | "creditCard" | "eye" | "flag" | "funnel" | "github" | "google" | "home" | "hourglass" | "lifebuoy" | "magnifyingGlass" | "minus" | "minusCircle" | "pencilSimple" | "printer" | "plus" | "pulse" | "resources" | "shoppingBag" | "signOut" | "team" | "truck" | "upload" | "user" | "userCircle" | "warning" | "warningCircle" | "xCircle";
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;

package/package.json

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