@shopify/ui-extensions 2025.10.0-rc.45 → 2025.10.0-rc.46

package/src/surfaces/point-of-sale/components/Text/examples/default.html

@@ -1,6 +1,3 @@
-<s-text>Text</s-text>
-<s-text color="subdued">Text</s-text>
-<s-text tone="info">Text</s-text>
-<s-text tone="success">Text</s-text>
-<s-text tone="warning">Text</s-text>
-<s-text tone="critical">Text</s-text>
+<s-text>
+  <s-text type="strong">Name:</s-text> Jane Doe
+</s-text>

package/src/surfaces/point-of-sale/components/TextArea/examples/accessory-slot.jsx

@@ -0,0 +1,9 @@
+<s-text-area
+  label="Product description"
+  placeholder="Enter product details..."
+  value="This is a sample product description"
+>
+  <s-button slot="accessory" onClick={() => console.log('Clear')}>
+    Clear
+  </s-button>
+</s-text-area>;

package/src/surfaces/point-of-sale/components/TextArea/examples/default.html

@@ -1 +1,4 @@
-<s-text-area label="Add note" placeholder="Enter a custom note" value="Custom note" ></s-text-area>
+<s-text-area 
+  label="Shipping address" 
+  value="1776 Barnes Street, Orlando, FL 32801"
+/>

package/src/surfaces/point-of-sale/components/TextArea/examples/event-handling.jsx

@@ -0,0 +1,8 @@
+<s-text-area
+  label="Customer feedback"
+  placeholder="Enter feedback..."
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focused')}
+  onBlur={(event) => console.log('Blurred')}
+/>

package/src/surfaces/point-of-sale/components/TextArea/examples/rows-configuration.jsx

@@ -0,0 +1,7 @@
+<s-text-area
+  label="Order notes"
+  placeholder="Add special instructions..."
+  rows={5}
+  maxLength={500}
+  onInput={(event) => console.log('Characters:', event.target.value.length)}
+/>

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

@@ -55,10 +55,17 @@ export interface TextAreaJSXProps
     | 'maxLength'
     | 'rows'
   > {
+  /** Function called when the user makes any changes in the field. */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called after editing completes (typically on blur). */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element loses focus. */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element receives focus. */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Additional content to be displayed in the field. Commonly used to display clickable text.
+   */
   accessory?: ComponentChild;
 }
 declare global {

package/src/surfaces/point-of-sale/components/TextField/examples/accessory-slot.jsx

@@ -0,0 +1,5 @@
+<s-text-field label="Discount code" value="SUMMER2024">
+  <s-button slot="accessory" onClick={() => console.log('Apply discount')}>
+    Apply
+  </s-button>
+</s-text-field>;

package/src/surfaces/point-of-sale/components/TextField/examples/common-props.jsx

@@ -0,0 +1,11 @@
+<s-text-field
+  label="Product SKU"
+  value={sku}
+  placeholder="Enter SKU"
+  details="Use format: ABC-123"
+  error={hasError ? "SKU already exists" : undefined}
+  disabled={isProcessing}
+  required
+  maxLength={20}
+  onChange={(event) => setSku(event.target.value)}
+/>

package/src/surfaces/point-of-sale/components/TextField/examples/default.html

@@ -1,3 +1,5 @@
-<s-text-field label="Label" required value=""></s-text-field>
-<s-text-field label="Label" required value="Content"></s-text-field>
-<s-text-field label="Label" required value="Content" error="Error message"></s-text-field>
+<s-text-field
+  label="Store name" 
+  value="Snowdevil" 
+  required
+/>

package/src/surfaces/point-of-sale/components/TextField/examples/event-handling.jsx

@@ -0,0 +1,17 @@
+<s-text-field
+  label="Product SKU"
+  placeholder="Enter SKU"
+  onInput={(event) => {
+    console.log('Input:', event.target.value);
+    console.log('Current error:', event.target.error);
+  }}
+  onFocus={(event) => {
+    console.log('Focused with value:', event.target.value);
+  }}
+  onBlur={(event) => {
+    console.log('Blurred with value:', event.target.value);
+  }}
+  onChange={(event) => {
+    console.log('Changed to:', event.target.value);
+  }}
+/>

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

@@ -54,10 +54,25 @@ export interface TextFieldJSXProps
     | 'required'
     | 'maxLength'
   > {
+  /**
+   * Function called when the user makes any changes in the field.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Function called after editing completes (typically on blur).
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Function called when the element loses focus.
+   */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Function called when the element receives focus.
+   */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Additional content to be displayed in the field. Commonly used to display clickable text.
+   */
   accessory?: ComponentChild;
 }
 declare global {

package/src/surfaces/point-of-sale/components/Tile/examples/default.html

@@ -1,5 +1,2 @@
-<s-tile heading="Title" subheading="Subtitle" itemCount={2} tone="accent"></s-tile>
-
-<s-tile heading="Title" subheading="Subtitle" tone="accent"></s-tile>
-
-<s-tile heading="Title" subheading="Subtitle" disabled></s-tile>
+<s-tile heading="Extension title" subheading="Subtitle" />
+<s-tile heading="Extension title" subheading="Subtitle" tone="accent" />

package/src/surfaces/point-of-sale/components/TimeField/examples/default.html

@@ -1,12 +1,4 @@
 <s-time-field
   label="Time"
   value="11:42"
-  details="Select a time">
-</s-time-field>
-
-<s-time-field
-  label="Time"
-  value="11:42"
-  details="Select a time"
-  error="Time out of range">
-</s-time-field>
+/>

package/src/surfaces/point-of-sale/components/TimeField/examples/event-handling.jsx

@@ -0,0 +1,8 @@
+<s-time-field
+  label="Appointment time"
+  value="14:30"
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focused')}
+  onBlur={(event) => console.log('Blurred')}
+/>

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

@@ -42,10 +42,14 @@ export interface TimeFieldJSXProps
     TimeFieldProps,
     'id' | 'label' | 'disabled' | 'value' | 'error' | 'details'
   > {
-  onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called when the user makes any changes in the field. */
+  onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called after editing completes (typically on blur). */
+  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element loses focus. */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element receives focus. */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/src/surfaces/point-of-sale/components/TimePicker/examples/command-system.jsx

@@ -0,0 +1,10 @@
+<>
+  <s-button command="--show" commandFor="time-picker">
+    Select Time
+  </s-button>
+  <s-time-picker
+    id="time-picker"
+    value="14:30"
+    onChange={(event) => console.log('Time selected:', event.target.value)}
+  />
+</>;

package/src/surfaces/point-of-sale/components/TimePicker/examples/default.html

@@ -1,4 +1,7 @@
 <s-button command="--show" commandFor="time-picker">
   Show
 </s-button>
-<s-time-picker value="9:41" id="time-picker" onChange={onTimeChange} />
+<s-time-picker
+  value="9:41"
+  id="time-picker"
+/>

package/src/surfaces/point-of-sale/components/TimePicker/examples/event-handling.jsx

@@ -0,0 +1,7 @@
+<s-time-picker
+  value="14:30"
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focused')}
+  onBlur={(event) => console.log('Blurred')}
+/>

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

@@ -39,10 +39,14 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-time-picker';
 export interface TimePickerJSXProps
   extends Pick<TimePickerProps, 'id' | 'value'> {
+  /** Function called when the user selects a time from the picker. */
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called when the user selects a time from the picker that is different to the current value. */
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called when the time picker is dismissed. */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called when the time picker is revealed. */
   onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
 }
 declare global {
   interface HTMLElementTagNameMap {