@shopify/ui-extensions 2024.10.2 → 2025.1.0

package/src/surfaces/point-of-sale/components.ts

@@ -1,35 +1,46 @@
-export {ActionItem} from './components/ActionItem/ActionItem';
-export type {ActionItemProps} from './components/ActionItem/ActionItem';
-export {Badge} from './components/Badge/Badge';
+export {Badge} from './render/components/Badge/Badge';
 export type {
   BadgeProps,
   BadgeStatus,
   BadgeVariant,
-} from './components/Badge/Badge';
-export {Banner} from './components/Banner/Banner';
-export type {BannerProps, BannerVariant} from './components/Banner/Banner';
-export {Button} from './components/Button/Button';
-export type {ButtonProps, ButtonType} from './components/Button/Button';
-export {CameraScanner} from './components/CameraScanner/CameraScanner';
-export type {CameraScannerProps} from './components/CameraScanner/CameraScanner';
-export {DateField} from './components/DateField/DateField';
-export type {DateFieldProps} from './components/DateField/DateField';
-export {DatePicker} from './components/DatePicker/DatePicker';
-export type {DatePickerProps} from './components/DatePicker/DatePicker';
-export {Dialog} from './components/Dialog/Dialog';
-export type {DialogProps, DialogType} from './components/Dialog/Dialog';
-export {EmailField} from './components/EmailField/EmailField';
-export type {EmailFieldProps} from './components/EmailField/EmailField';
-export {FormattedTextField} from './components/FormattedTextField/FormattedTextField';
+} from './render/components/Badge/Badge';
+export {Banner} from './render/components/Banner/Banner';
+export type {
+  BannerProps,
+  BannerVariant,
+} from './render/components/Banner/Banner';
+export {Box} from './render/components/Box/Box';
+export type {BoxProps} from './render/components/Box/Box';
+export {Button} from './render/components/Button/Button';
+export type {ButtonProps, ButtonType} from './render/components/Button/Button';
+export {CameraScanner} from './render/components/CameraScanner/CameraScanner';
+export type {CameraScannerProps} from './render/components/CameraScanner/CameraScanner';
+export {DateField} from './render/components/DateField/DateField';
+export type {DateFieldProps} from './render/components/DateField/DateField';
+export {DatePicker} from './render/components/DatePicker/DatePicker';
+export type {DatePickerProps} from './render/components/DatePicker/DatePicker';
+export {Dialog} from './render/components/Dialog/Dialog';
+export type {DialogProps, DialogType} from './render/components/Dialog/Dialog';
+export {EmailField} from './render/components/EmailField/EmailField';
+export type {EmailFieldProps} from './render/components/EmailField/EmailField';
+export {FormattedTextField} from './render/components/FormattedTextField/FormattedTextField';
 export type {
   FormattedTextFieldProps,
   InputType,
-} from './components/FormattedTextField/FormattedTextField';
-export {Icon} from './components/Icon/Icon';
-export type {IconProps, IconName, IconSize} from './components/Icon/Icon';
-export {Image} from './components/Image/Image';
-export type {ImageProps} from './components/Image/Image';
-export {List} from './components/List/List';
+} from './render/components/FormattedTextField/FormattedTextField';
+export {Icon} from './render/components/Icon/Icon';
+export type {
+  IconProps,
+  IconName,
+  IconSize,
+} from './render/components/Icon/Icon';
+export {Image} from './render/components/Image/Image';
+export type {
+  ImageProps,
+  ImageSize,
+  FillResizeMode,
+} from './render/components/Image/Image';
+export {List} from './render/components/List/List';
 export type {
   ListProps,
   ListRow,
@@ -38,75 +49,98 @@ export type {
   ListRowLeftSide,
   ListRowRightSide,
   ListRowSubtitle,
-} from './components/List/List';
-export {Navigator} from './components/Navigator/Navigator';
-export type {NavigatorProps} from './components/Navigator/Navigator';
-export {NumberField} from './components/NumberField/NumberField';
-export type {NumberFieldProps} from './components/NumberField/NumberField';
-export {PinPad} from './components/PinPad/PinPad';
+} from './render/components/List/List';
+export {Navigator} from './render/components/Navigator/Navigator';
+export type {NavigatorProps} from './render/components/Navigator/Navigator';
+export {NumberField} from './render/components/NumberField/NumberField';
+export type {NumberFieldProps} from './render/components/NumberField/NumberField';
+export {PinPad} from './render/components/PinPad/PinPad';
 export type {
   PinPadProps,
   PinLength,
   PinPadActionType,
   PinValidationResult,
-} from './components/PinPad/PinPad';
-export {POSBlock} from './components/POSBlock/POSBlock';
-export type {POSBlockProps} from './components/POSBlock/POSBlock';
-export {POSBlockRow} from './components/POSBlock/POSBlockRow';
-export type {POSBlockRowProps} from './components/POSBlock/POSBlockRow';
-export {RadioButtonList} from './components/RadioButtonList/RadioButtonList';
-export type {RadioButtonListProps} from './components/RadioButtonList/RadioButtonList';
-export {Screen} from './components/Screen/Screen';
+} from './render/components/PinPad/PinPad';
+export {POSBlock} from './render/components/POSBlock/POSBlock';
+export type {POSBlockProps} from './render/components/POSBlock/POSBlock';
+export {POSBlockRow} from './render/components/POSBlock/POSBlockRow';
+export type {POSBlockRowProps} from './render/components/POSBlock/POSBlockRow';
+export {PrintPreview} from './render/components/PrintPreview/PrintPreview';
+export type {PrintPreviewProps} from './render/components/PrintPreview/PrintPreview';
+export {RadioButtonList} from './render/components/RadioButtonList/RadioButtonList';
+export type {RadioButtonListProps} from './render/components/RadioButtonList/RadioButtonList';
+export {Screen} from './render/components/Screen/Screen';
 export type {
   ScreenProps,
   ScreenPresentationProps,
   SecondaryActionProps,
-} from './components/Screen/Screen';
-export {ScrollView} from './components/ScrollView/ScrollView';
-export {SearchBar} from './components/SearchBar/SearchBar';
-export type {SearchBarProps} from './components/SearchBar/SearchBar';
-export {Section} from './components/Section/Section';
+} from './render/components/Screen/Screen';
+export {ScrollView} from './render/components/ScrollView/ScrollView';
+export {SearchBar} from './render/components/SearchBar/SearchBar';
+export type {SearchBarProps} from './render/components/SearchBar/SearchBar';
+export {Section} from './render/components/Section/Section';
 export type {
   SectionProps,
   SectionHeaderAction,
-} from './components/Section/Section';
-export {SegmentedControl} from './components/SegmentedControl/SegmentedControl';
+} from './render/components/Section/Section';
+export {SegmentedControl} from './render/components/SegmentedControl/SegmentedControl';
 export type {
   SegmentedControlProps,
   Segment,
-} from './components/SegmentedControl/SegmentedControl';
-export {Selectable} from './components/Selectable/Selectable';
-export type {SelectableProps} from './components/Selectable/Selectable';
+} from './render/components/SegmentedControl/SegmentedControl';
+export {Selectable} from './render/components/Selectable/Selectable';
+export type {SelectableProps} from './render/components/Selectable/Selectable';
 export type {
   VerticalSpacing,
   HorizontalSpacing,
-} from './components/Spacing/Spacing';
-export {Stack} from './components/Stack/Stack';
-export type {StackProps, Spacing} from './components/Stack/Stack';
-export {Stepper} from './components/Stepper/Stepper';
-export type {StepperProps} from './components/Stepper/Stepper';
-export {Text} from './components/Text/Text';
-export type {TextProps, ColorType, TextVariant} from './components/Text/Text';
-export {TextArea} from './components/TextArea/TextArea';
-export type {TextAreaProps} from './components/TextArea/TextArea';
-export {TextField} from './components/TextField/TextField';
-export type {
-  TextFieldProps,
+  Spacing,
+} from './render/components/shared/deprecated-types';
+export {Stack} from './render/components/Stack/Stack';
+export type {StackProps} from './render/components/Stack/Stack';
+export type {
+  SpacingKeyword,
+  ContentPosition,
+  ContentDistribution,
+} from './render/components/shared/inner-layouts';
+export {Stepper} from './render/components/Stepper/Stepper';
+export type {StepperProps} from './render/components/Stepper/Stepper';
+export {Text} from './render/components/Text/Text';
+export type {
+  TextProps,
+  ColorType,
+  TextVariant,
+} from './render/components/Text/Text';
+export {TextArea} from './render/components/TextArea/TextArea';
+export type {TextAreaProps} from './render/components/TextArea/TextArea';
+export {TextField} from './render/components/TextField/TextField';
+export type {
   NewTextFieldProps,
   ActionProps,
   InfoProps,
   SuccessProps,
   PasswordProps,
   EmbeddedElementProps,
-} from './components/TextField/TextField';
-export {Tile} from './components/Tile/Tile';
-export type {TileProps} from './components/Tile/Tile';
-export {TimeField} from './components/TimeField/TimeField';
-export type {TimeFieldProps} from './components/TimeField/TimeField';
-export {TimePicker} from './components/TimePicker/TimePicker';
-export type {TimePickerProps} from './components/TimePicker/TimePicker';
-export type {BaseTextFieldProps} from './components/shared/BaseTextField';
-export type {AutoCapitalizationType} from './components/shared/auto-capitalization-type';
-export type {InputAction, InputProps} from './components/shared/InputField';
-export {SectionHeader} from './components/SectionHeader/SectionHeader';
-export type {SectionHeaderProps} from './components/SectionHeader/SectionHeader';
+} from './render/components/TextField/TextField';
+export {Tile} from './render/components/Tile/Tile';
+export type {TileProps} from './render/components/Tile/Tile';
+export {TimeField} from './render/components/TimeField/TimeField';
+export type {TimeFieldProps} from './render/components/TimeField/TimeField';
+export {TimePicker} from './render/components/TimePicker/TimePicker';
+export type {TimePickerProps} from './render/components/TimePicker/TimePicker';
+export type {BaseTextFieldProps} from './render/components/shared/BaseTextField';
+export type {AutoCapitalizationType} from './render/components/shared/auto-capitalization-type';
+export type {
+  InputAction,
+  InputProps,
+} from './render/components/shared/InputField';
+export {SectionHeader} from './render/components/SectionHeader/SectionHeader';
+export type {SectionHeaderProps} from './render/components/SectionHeader/SectionHeader';
+
+export type {
+  PaddingProps,
+  SizingProps,
+  SizeUnits,
+  SizeUnitsOrAuto,
+  SizeUnitsOrNone,
+} from './render/components/shared/box';
+export type {SizeKeyword} from './render/components/shared/sizes';

package/src/surfaces/point-of-sale/globals.ts

@@ -9,10 +9,8 @@ export interface ShopifyGlobal {
 }
 
 declare global {
-  interface WorkerGlobalScope {
-    // conflicts with build/ts/globals.d.ts
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    readonly shopify: ShopifyGlobal;
-  }
+  // conflicts with build/ts/globals.d.ts
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const shopify: ShopifyGlobal;
 }

package/src/surfaces/point-of-sale/input.ts

@@ -0,0 +1,3 @@
+export type {BaseInput} from './run/input/BaseInput';
+
+export type {Device} from './types/device';

package/src/surfaces/point-of-sale/intent.ts

@@ -0,0 +1 @@
+export type {BaseIntent} from './run/intent/BaseIntent';

package/src/surfaces/point-of-sale/{api → render/api}/cart-api/cart-api.ts

@@ -2,11 +2,12 @@ import type {RemoteSubscribable} from '@remote-ui/async-subscription';
 import type {
   Address,
   Cart,
+  CartUpdateInput,
   Customer,
   CustomSale,
   SetLineItemDiscountInput,
   SetLineItemPropertiesInput,
-} from '../types/cart';
+} from '../../../types/cart';
 
 /**
  * Access and modify the merchant’s current cart.
@@ -15,17 +16,6 @@ export interface CartApi {
   cart: CartApiContent;
 }
 
-/**
- * @deprecated
- * PriceOverride is no longer supported. Code discounts are only supported at the Cart level.
- * Please migrate to using CartDiscountType and LineItemDiscountType as soon as possible.
- */
-export type DiscountType =
-  | 'Percentage'
-  | 'FixedAmount'
-  | 'PriceOverride'
-  | 'Code';
-
 export type CartDiscountType = 'Percentage' | 'FixedAmount' | 'Code';
 
 export type LineItemDiscountType = 'Percentage' | 'FixedAmount';
@@ -38,6 +28,12 @@ export interface CartApiContent {
    */
   subscribable: RemoteSubscribable<Cart>;
 
+  /** Bulk update the cart
+   * @param cartState the cart state to set
+   * @returns the updated cart
+   */
+  bulkCartUpdate(cartState: CartUpdateInput): Promise<Cart>;
+
   /** Apply a cart level discount
    * @param type the type of discount applied (example: 'Percentage')
    * @param title the title attributed with the discount
@@ -75,14 +71,16 @@ export interface CartApiContent {
 
   /** Add a custom sale to the cart
    * @param customSale the custom sale object to add to the cart
+   * @returns {string} the uuid of the line item added
    */
-  addCustomSale(customSale: CustomSale): Promise<void>;
+  addCustomSale(customSale: CustomSale): Promise<string>;
 
   /** Add a line item by variant ID to the cart
    * @param variantId the product variant's numeric ID to add to the cart
    * @param quantity the number of this variant to add to the cart
+   * @returns {string} the uuid of the line item added
    */
-  addLineItem(variantId: number, quantity: number): Promise<void>;
+  addLineItem(variantId: number, quantity: number): Promise<string>;
 
   /** Remove the line item at this uuid from the cart
    * @param uuid the uuid of the line item that should be removed

package/src/surfaces/point-of-sale/render/api/print-api/print-api.ts

@@ -0,0 +1,18 @@
+/**
+ * Access the print API for printing functionality
+ */
+export interface PrintApiContent {
+  /**
+   * Trigger a print dialog.
+   * @param src the source URL of the content to print. This URL must be a path of the app backend. Valid document types are text, HTML, image, and PDF.
+   * @returns Promise<void> that resolves when content is ready and native print dialog appears.
+   */
+  print(src: string): Promise<void>;
+}
+
+/**
+ * Interface for printing
+ */
+export interface PrintApi {
+  print: PrintApiContent;
+}

package/src/surfaces/point-of-sale/{api → render/api}/product-search-api/product-search-api.ts

@@ -1,6 +1,6 @@
-import type {MultipleResourceResult} from '../types/multiple-resource-result';
-import type {PaginatedResult} from '../types/paginated-result';
-import type {Product, ProductVariant} from '../types/product';
+import type {MultipleResourceResult} from '../../../types/multiple-resource-result';
+import type {PaginatedResult} from '../../../types/paginated-result';
+import type {Product, ProductVariant} from '../../../types/product';
 
 export type ProductSortType =
   | 'RECENTLY_ADDED'

package/src/surfaces/point-of-sale/{api → render/api}/session-api/session-api.ts

@@ -1,4 +1,4 @@
-import type {Session} from '../types/session';
+import type {Session} from '../../../types/session';
 
 export interface SessionApiContent {
   /**

package/src/surfaces/point-of-sale/render/api/standard/standard-api.ts

@@ -0,0 +1,17 @@
+import {ConnectivityApi} from '../connectivity-api/connectivity-api';
+import {DeviceApi} from '../device-api/device-api';
+import {LocaleApi} from '../locale-api/locale-api';
+import {SessionApi} from '../session-api/session-api';
+import {ToastApi} from '../toast-api/toast-api';
+import {ProductSearchApi} from '../product-search-api/product-search-api';
+import {PrintApi} from '../print-api/print-api';
+
+export type StandardApi<T> = {[key: string]: any} & {
+  extensionPoint: T;
+} & LocaleApi &
+  ToastApi &
+  SessionApi &
+  PrintApi &
+  ProductSearchApi &
+  DeviceApi &
+  ConnectivityApi;

package/src/surfaces/point-of-sale/render/components/Box/Box.ts

@@ -0,0 +1,6 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {PaddingProps, SizingProps} from '../shared/box';
+
+export interface BoxProps extends PaddingProps, SizingProps {}
+
+export const Box = createRemoteComponent<'Box', BoxProps>('Box');

package/src/surfaces/point-of-sale/{components → render/components}/FormattedTextField/FormattedTextField.ts

@@ -20,15 +20,6 @@ export interface FormattedTextFieldProps extends BaseTextFieldProps {
    * Dictates when the text should be auto-capitalized.
    */
   autoCapitalize?: AutoCapitalizationType;
-  /**
-   * **Warning:** This callback is currently broken and will not work as intended.
-   *
-   * Custom validator function to determine the validity of an entered value.
-   *
-   * @deprecated This callback will be removed in version 2025-01.
-   * Please update your code to avoid using this feature.
-   */
-  customValidator?: (text: string) => boolean;
 }
 
 export const FormattedTextField = createRemoteComponent<

package/src/surfaces/point-of-sale/render/components/Image/Image.ts

@@ -0,0 +1,31 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type ImageSize = 's' | 'm' | 'l' | 'xl';
+
+/**
+ * FillResizeMode will apply formatting to the image to fill the container.
+ *
+ * https://reactnative.dev/docs/image#resizemode
+ */
+export type FillResizeMode =
+  | 'cover'
+  | 'contain'
+  | 'stretch'
+  | 'repeat'
+  | 'center';
+
+export interface ImageProps {
+  /**
+   * The source of the image to be displayed.
+   */
+  src?: string;
+
+  /**
+   * The size or fill size of the image.
+   *
+   * @default 'l'
+   */
+  size?: ImageSize | FillResizeMode;
+}
+
+export const Image = createRemoteComponent<'Image', ImageProps>('Image');

package/src/surfaces/point-of-sale/{components → render/components}/List/List.ts

@@ -38,12 +38,6 @@ export interface ListRowLeftSide {
    * Subtitles can optionally be configured with colors by passing an object with a `content` and `color` properties.
    */
   subtitle?: [ListRowSubtitle, ListRowSubtitle?, ListRowSubtitle?];
-  /**
-   * @deprecated
-   * badge will be removed in version 2.0.0 in favor of badges.
-   * Please migrate to using badges as soon as possible.
-   */
-  badge?: BadgeProps;
   /**
    * Colored badges that are displayed underneath the `title` and `subtitles`.
    */

package/src/surfaces/point-of-sale/render/components/PrintPreview/PrintPreview.ts

@@ -0,0 +1,13 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface PrintPreviewProps {
+  /**
+   * The source to print.
+   */
+  src: string;
+}
+
+export const PrintPreview = createRemoteComponent<
+  'PrintPreview',
+  PrintPreviewProps
+>('PrintPreview');

package/src/surfaces/point-of-sale/render/components/Stack/Stack.ts

@@ -0,0 +1,122 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {PaddingProps, SizingProps} from '../shared/box';
+import {
+  ContentDistribution,
+  ContentPosition,
+  SpacingKeyword,
+  GapProps,
+} from '../shared/inner-layouts';
+import {
+  HorizontalSpacing,
+  Spacing,
+  VerticalSpacing,
+} from '../shared/deprecated-types';
+
+/**
+ *
+ * @deprecated Use the `block` or `inline` as a value instead.
+ */
+type DeprecatedStackDirection = 'vertical' | 'horizontal';
+
+export interface StackProps extends PaddingProps, SizingProps, GapProps {
+  /**
+   * Sets how the Stack's children are placed within the Stack.
+   * 'vertical' and 'horizontal' are deprecated. Using these values will use the Stack implementation from 2024-10.
+   *
+   * @default 'inline'
+   */
+  direction?: 'inline' | 'block' | DeprecatedStackDirection;
+
+  /**
+   * The alignment of the children along the main axis.
+   *
+   * @defaultValue 'flex-start'
+   * @deprecated Use the `justifyContent` prop instead.
+   */
+  alignment?: ContentPosition | ContentDistribution;
+
+  /**
+   * Aligns the Stack along the main axis.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+   * @default 'start'
+   */
+  justifyContent?: ContentPosition | ContentDistribution;
+
+  /**
+   * Aligns the Stack along the cross axis.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+   * @default 'start'
+   */
+  alignContent?: 'stretch' | ContentPosition | ContentDistribution;
+
+  /**
+   * Aligns the Stack's children along the cross axis.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+   * @default 'stretch'
+   */
+  alignItems?: 'stretch' | 'baseline' | ContentPosition;
+
+  /**
+   * The vertical padding around the stack.
+   * @deprecated Use the `paddingBlock` prop instead.
+   */
+  paddingVertical?: VerticalSpacing;
+
+  /**
+   * The horizontal padding around the stack.
+   * @deprecated Use the `paddingInline` prop instead.
+   */
+  paddingHorizontal?: HorizontalSpacing;
+
+  /**
+   * The spacing between each child in the stack.
+   * @defaultValue 1
+   * @deprecated Use the `gap` prop instead.
+   */
+  spacing?: Spacing;
+
+  /**
+   * The size of the gap between each child in the stack.
+   * @defaultValue '0'
+   */
+  gap?: SpacingKeyword;
+
+  /**
+   * Adjust spacing between elements in the block axis.
+   *
+   * This overrides the row value of `gap`.
+   *
+   * @default '' - meaning no override
+   */
+  rowGap?: SpacingKeyword | '';
+
+  /**
+   * Adjust spacing between elements in the inline axis.
+   *
+   * This overrides the column value of `gap`.
+   *
+   * @default '' - meaning no override
+   */
+  columnGap?: SpacingKeyword | '';
+
+  /**
+   * Whether the children should be stretched to fill the cross axis.
+   */
+  flexChildren?: boolean;
+
+  /**
+   * The flex value for the stack. Flex 1 will stretch the stack to fill the parent.
+   */
+  flex?: number;
+
+  /**
+   * Wrap behavior for the children of the stack.
+   * @deprecated Has no effect, content will always wrap.
+   */
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+}
+
+export const Stack = createRemoteComponent<'Stack', StackProps>('Stack');

package/src/surfaces/point-of-sale/{components → render/components}/TextField/TextField.ts

@@ -1,5 +1,4 @@
 import {createRemoteComponent} from '@remote-ui/core';
-import type {BaseTextFieldProps} from '../shared/BaseTextField';
 import type {InputProps} from '../shared/InputField';
 
 export interface ActionProps {
@@ -32,16 +31,6 @@ export type EmbeddedElementProps =
 
 export interface NewTextFieldProps extends InputProps {}
 
-/**
- * @deprecated
- * This TextField component will only support NewTextFieldProps in version 2.0.0.
- * Please migrate to using NewTextFieldProps as soon as possible.
- */
-export interface TextFieldProps extends BaseTextFieldProps {
-  rightElementStyle?: EmbeddedElementProps;
-}
-
-export const TextField = createRemoteComponent<
+export const TextField = createRemoteComponent<'TextField', NewTextFieldProps>(
   'TextField',
-  TextFieldProps | NewTextFieldProps
->('TextField');
+);