@shopify/ui-extensions 2025.10.6 → 2026.1.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.10.6",
+  "version": "2026.1.0-rc.1",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",

package/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.html

@@ -11,7 +11,7 @@
     id="analytics-picker"
     value="2025-01-01--2025-01-31"
     view="2025-01"
-    onchange="console.log('Date range changed:', event.target.value)"
+    onchange="console.log('Date range changed:', event.currentTarget.value)"
   ></s-date-picker>
   <s-text id="selected-range">
     Selected range: 2025-01-01--2025-01-31
@@ -24,7 +24,7 @@
 
   // Handle picker changes
   picker.addEventListener('change', (event) => {
-    display.textContent = `Selected range: ${event.target.value}`;
+    display.textContent = `Selected range: ${event.currentTarget.value}`;
   });
 
   // Quick selection buttons

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

@@ -1,6 +1,6 @@
 <s-choice-list
-  onChange={(event) => console.log('onChange:', event.target.values)}
-  onInput={(event) => console.log('onInput:', event.target.values)}
+  onChange={(event) => console.log('onChange:', event.currentTarget.values)}
+  onInput={(event) => console.log('onInput:', event.currentTarget.values)}
 >
   <s-choice value="option1">Option 1</s-choice>
   <s-choice value="option2" disabled>Option 2 (disabled)</s-choice>

package/src/surfaces/point-of-sale/components/ChoiceList/examples/multiple-selection.jsx

@@ -1,7 +1,7 @@
 <s-choice-list 
   multiple
   values={['small', 'medium']}
-  onChange={(event) => console.log('Selected:', event.target.values)}
+  onChange={(event) => console.log('Selected:', event.currentTarget.values)}
 >
   <s-choice value="small">Small</s-choice>
   <s-choice value="medium">Medium</s-choice>

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

@@ -1,8 +1,8 @@
 <s-date-field 
   label="Order date"
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
-  onFocus={(event) => console.log('Focused with:', event.target.value)}
-  onBlur={(event) => console.log('Blurred with:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
+  onFocus={(event) => console.log('Focused with:', event.currentTarget.value)}
+  onBlur={(event) => console.log('Blurred with:', event.currentTarget.value)}
 />

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

@@ -5,6 +5,6 @@
   <s-date-picker
     id="date-picker"
     value="2024-10-26"
-    onChange={(event) => console.log('Date selected:', event.target.value)}
+    onChange={(event) => console.log('Date selected:', event.currentTarget.value)}
   />
 </>;

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

@@ -1,7 +1,7 @@
 <s-date-picker 
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />

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

@@ -5,6 +5,6 @@
   <s-date-spinner
     id="date-spinner"
     value="2024-10-26"
-    onChange={(event) => console.log('Date selected:', event.target.value)}
+    onChange={(event) => console.log('Date selected:', event.currentTarget.value)}
   />
 </>;

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

@@ -1,7 +1,7 @@
 <s-date-spinner 
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />

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

@@ -1,8 +1,8 @@
 <s-email-field
   label="Customer email"
   placeholder="customer@example.com"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />

package/src/surfaces/point-of-sale/components/NumberField/examples/controls-constraints.jsx

@@ -4,6 +4,6 @@
   min={1}
   max={100}
   controls
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
 />;

package/src/surfaces/point-of-sale/components/NumberField/examples/input-mode.jsx

@@ -3,13 +3,13 @@
     label="Price"
     placeholder="0.00"
     inputMode="decimal"
-    onInput={(event) => console.log('Value:', event.target.value)}
+    onInput={(event) => console.log('Value:', event.currentTarget.value)}
   />
 
   <s-number-field
     label="Stock count"
     placeholder="0"
     inputMode="numeric"
-    onInput={(event) => console.log('Value:', event.target.value)}
+    onInput={(event) => console.log('Value:', event.currentTarget.value)}
   />
 </s-stack>;

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

@@ -1,8 +1,8 @@
 <s-search-field
   placeholder="Search products..."
   value=""
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Search focused')}
   onBlur={(event) => console.log('Search blurred')}
 />

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

@@ -1,8 +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)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focused')}
   onBlur={(event) => console.log('Blurred')}
 />

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

@@ -3,5 +3,5 @@
   placeholder="Add special instructions..."
   rows={5}
   maxLength={500}
-  onInput={(event) => console.log('Characters:', event.target.value.length)}
+  onInput={(event) => console.log('Characters:', event.currentTarget.value.length)}
 />

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

@@ -7,5 +7,5 @@
   disabled={isProcessing}
   required
   maxLength={20}
-  onChange={(event) => setSku(event.target.value)}
+  onChange={(event) => setSku(event.currentTarget.value)}
 />

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

@@ -2,16 +2,16 @@
   label="Product SKU"
   placeholder="Enter SKU"
   onInput={(event) => {
-    console.log('Input:', event.target.value);
-    console.log('Current error:', event.target.error);
+    console.log('Input:', event.currentTarget.value);
+    console.log('Current error:', event.currentTarget.error);
   }}
   onFocus={(event) => {
-    console.log('Focused with value:', event.target.value);
+    console.log('Focused with value:', event.currentTarget.value);
   }}
   onBlur={(event) => {
-    console.log('Blurred with value:', event.target.value);
+    console.log('Blurred with value:', event.currentTarget.value);
   }}
   onChange={(event) => {
-    console.log('Changed to:', event.target.value);
+    console.log('Changed to:', event.currentTarget.value);
   }}
 />

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

@@ -1,8 +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)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focused')}
   onBlur={(event) => console.log('Blurred')}
 />

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

@@ -5,6 +5,6 @@
   <s-time-picker
     id="time-picker"
     value="14:30"
-    onChange={(event) => console.log('Time selected:', event.target.value)}
+    onChange={(event) => console.log('Time selected:', event.currentTarget.value)}
   />
 </>;

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

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

package/src/surfaces/point-of-sale/types/cart.ts

@@ -55,6 +55,33 @@ export interface LineItem {
    * The currently selected selling plan for this line item.
    */
   sellingPlan?: SellingPlan;
+  /**
+   * Bundle components for this line item. Only present for product bundles.
+   * Each component represents an individual item within the bundle with its own tax information.
+   */
+  components?: LineItemComponent[];
+}
+
+/**
+ * Represents a component of a product bundle line item.
+ * Bundle components contain the individual items that make up a bundle,
+ * each with their own pricing and tax information.
+ */
+export interface LineItemComponent {
+  /** The title/name of the component product */
+  title?: string;
+  /** The quantity of this component in the bundle */
+  quantity: number;
+  /** The price of this component */
+  price?: number;
+  /** Whether this component is taxable */
+  taxable: boolean;
+  /** Tax lines applied to this component */
+  taxLines: TaxLine[];
+  /** The variant ID of this component, if applicable */
+  variantId?: number;
+  /** The product ID of this component, if applicable */
+  productId?: number;
 }
 
 /**