@commercelayer/app-elements 1.8.3 → 1.9.0

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,24 @@ 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;

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/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" | "x" | "arrowBendDownRight" | "apps" | "arrowCircleDown" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowsLeftRight" | "arrowUpRight" | "asterisk" | "caretRight" | "chatCircle" | "check" | "cloud" | "credentials" | "creditCard" | "eye" | "flag" | "funnel" | "github" | "google" | "home" | "hourglass" | "magnifyingGlass" | "minus" | "minusCircle" | "pencilSimple" | "printer" | "pulse" | "resources" | "shoppingBag" | "team" | "truck" | "upload" | "user" | "warning" | "warningCircle" | "xCircle";
+    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.3",
+  "version": "1.9.0",
   "type": "module",
   "license": "MIT",
   "files": [