@commercelayer/app-elements 1.8.3 → 1.9.1

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

@@ -1,11 +1,20 @@
-/// <reference types="react" />
-import { type IconProps as PhosphorIconProps } from '@phosphor-icons/react';
+import { type ComponentPropsWithRef } from 'react';
 import { iconMapping } from './icons';
-export interface IconProps extends PhosphorIconProps {
+type IconWeight = 'regular' | 'bold';
+export interface IconProps extends ComponentPropsWithRef<'svg'> {
     /**
      * Name of the icon to display
      */
     name: keyof typeof iconMapping;
+    /**
+     * Size in CSS units or a number of pixels.
+     */
+    size?: string | number;
+    /**
+     * Weight of the icon
+     */
+    weight?: IconWeight;
 }
 /** `app-elements` provides a subset of [Phosphor Icons](https://phosphoricons.com/) out-of-the-box. */
 export declare const Icon: React.FC<IconProps>;
+export {};

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

@@ -1,7 +1,8 @@
 import * as phosphor from '@phosphor-icons/react';
 export declare const iconMapping: {
-    readonly arrowBendDownRight: phosphor.Icon;
     readonly apps: phosphor.Icon;
+    readonly appWindow: phosphor.Icon;
+    readonly arrowBendDownRight: phosphor.Icon;
     readonly arrowCircleDown: phosphor.Icon;
     readonly arrowClockwise: phosphor.Icon;
     readonly arrowDown: phosphor.Icon;
@@ -9,6 +10,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;
@@ -20,23 +23,29 @@ export declare const iconMapping: {
     readonly flag: phosphor.Icon;
     readonly funnel: phosphor.Icon;
     readonly github: phosphor.Icon;
+    readonly globe: phosphor.Icon;
     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 plus: phosphor.Icon;
     readonly printer: phosphor.Icon;
     readonly pulse: phosphor.Icon;
+    readonly puzzle: 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/atoms/PageHeading.d.ts

@@ -9,11 +9,6 @@ export interface PageHeadingProps {
      * A short text that helps to describe the page
      */
     description?: ReactNode;
-    /**
-     * Optional callback that will be called when "go back" button is pressed
-     * If missing, the "go back" button will not be shown
-     */
-    onGoBack?: () => void;
     /**
      * If `true` removes element vertical paddings
      */
@@ -26,12 +21,24 @@ export interface PageHeadingProps {
      * When set, it will render a badge (default as warning variant) above the title
      */
     badgeVariant?: BadgeProps['variant'];
+    /**
+     * When set, it will render a navigation (eg: go back) button on the left side of the first row
+     */
+    navigationButton?: {
+        label: string;
+        onClick: () => void;
+        /**
+         * Button icon
+         * @default arrowLeft
+         */
+        icon?: 'x' | 'arrowLeft';
+    };
     /**
      * When set, it will render a button on the right side of the first row
      */
     actionButton?: React.ReactNode;
 }
-declare function PageHeading({ gap, badgeLabel, onGoBack, title, description, badgeVariant, actionButton, ...rest }: PageHeadingProps): JSX.Element;
+declare function PageHeading({ gap, badgeLabel, navigationButton, title, description, badgeVariant, actionButton, ...rest }: PageHeadingProps): JSX.Element;
 declare namespace PageHeading {
     var displayName: string;
 }

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

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+/**
+ * This component lets the window scrolls back to top once the window.location.pathname is changed
+ */
+export declare const ScrollToTop: FC;

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/PageError.d.ts

@@ -1,14 +1,10 @@
 /// <reference types="react" />
-export interface PageErrorProps {
+import { type PageHeadingProps } from '../atoms/PageHeading';
+export interface PageErrorProps extends Pick<PageHeadingProps, 'navigationButton'> {
     /**
      * Main page title wrapped in a h1 element
      */
     pageTitle?: string;
-    /**
-     * Optional callback that will be called when "go back" button is pressed
-     * If missing, the "go back" button will not be shown
-     */
-    onGoBack?: () => void;
     /**
      * The name of the error to be show above the detailed message text.
      * Example: 'Not Found'
@@ -24,7 +20,7 @@ export interface PageErrorProps {
      */
     actionButton?: JSX.Element;
 }
-export declare function PageError({ pageTitle, onGoBack, errorName, errorDescription, actionButton, ...rest }: PageErrorProps): JSX.Element;
+export declare function PageError({ pageTitle, navigationButton, errorName, errorDescription, actionButton, ...rest }: PageErrorProps): JSX.Element;
 export declare namespace PageError {
     var displayName: string;
 }

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

@@ -1,7 +1,7 @@
 import type { ContainerProps } from '../atoms/Container';
 import { type PageHeadingProps } from '../atoms/PageHeading';
 import { type ReactNode } from 'react';
-export interface PageLayoutProps extends Pick<PageHeadingProps, 'title' | 'description' | 'onGoBack' | 'actionButton' | 'gap'>, Pick<ContainerProps, 'minHeight'> {
+export interface PageLayoutProps extends Pick<PageHeadingProps, 'title' | 'description' | 'navigationButton' | 'actionButton' | 'gap'>, Pick<ContainerProps, 'minHeight'> {
     /**
      * Page content
      */
@@ -10,8 +10,12 @@ export interface PageLayoutProps extends Pick<PageHeadingProps, 'title' | 'descr
      * When mode is `test`, it will render a `TEST DATA` Badge to inform user api is working in test mode.
      */
     mode?: 'test' | 'live';
+    /**
+     * Optional prop to enable scroll to top behavior on location change
+     */
+    scrollToTop?: boolean;
 }
-export declare function PageLayout({ title, description, onGoBack, children, actionButton, mode, gap, minHeight, ...rest }: PageLayoutProps): JSX.Element;
+export declare function PageLayout({ title, description, navigationButton, children, actionButton, mode, gap, minHeight, scrollToTop, ...rest }: PageLayoutProps): JSX.Element;
 export declare namespace PageLayout {
     var displayName: string;
 }

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" | "apps" | "appWindow" | "arrowBendDownRight" | "arrowCircleDown" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowsLeftRight" | "arrowUpRight" | "asterisk" | "buildings" | "caretDown" | "caretRight" | "chatCircle" | "check" | "cloud" | "credentials" | "creditCard" | "eye" | "flag" | "funnel" | "github" | "globe" | "google" | "home" | "hourglass" | "lifebuoy" | "magnifyingGlass" | "minus" | "minusCircle" | "pencilSimple" | "plus" | "printer" | "pulse" | "puzzle" | "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.1",
   "type": "module",
   "license": "MIT",
   "files": [