@adobe-commerce/elsie 1.9.0-beta.3 → 1.9.1-alpha-20260702101934

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @adobe-commerce/elsie
 
+## 1.9.1-alpha-20260702101934
+
+### Patch Changes
+
+- fa16e7d: fix(Picker): auto-select and emit the sole option when the control auto-disables, so single-option narrowing on configurable PDPs no longer leaves the value unselected and Add to Cart permanently disabled
+
+## 1.9.0
+
+### Minor Changes
+
+- af62897: Update minimum Node.js requirement to 22 LTS
+
+  Packages are now built with Node.js 22. `elsie` requires `>=22`; browser-only packages (`fetch-graphql`, `event-bus`, `recaptcha`, `storefront-design`, `build-tools`) do not declare an `engines` field as they do not run in Node.js.
+
+- 62adf1c: Reduce HTTP requests on page load through three bundling optimizations. The preact runtime is isolated in its own vendor chunk so it no longer co-locates into other chunks. Dropin API and internal component modules are consolidated into `chunks/api.js` and `chunks/components.js` respectively, replacing the previous pattern of one chunk file per function or component. All SVG icons are consolidated into a single `chunks/icons.js` chunk instead of one chunk per icon.
+
+  Drop-ins must be rebuilt against this release to get the reduced request footprint. No source changes are required.
+
+### Patch Changes
+
+- d2aacc7: Fix: GraphQL fragment source files are no longer incorrectly bundled into `chunks/api.js`. The `manualChunks` function now walks the full importer graph (with cycle protection) to determine whether an api-directory module is owned by the fragments barrel, so fragment files stay in the fragments output chunk even when accessed through intermediate sub-barrels.
+- 5c64620: Implement a new `fragment-import-redirect` build plugin that automatically detects and redirects any dropin source file that directly imports a fragment source file (bypassing the barrel). The import is silently redirected to the fragments barrel at build time and a warning is emitted identifying the file so it can be corrected in source. This ensures fragment constants always appear as local declarations in `fragments.js` regardless of how dropin source code references them.
+
 ## 1.9.0-beta.3
 
 ### Patch Changes
@@ -24,10 +47,6 @@
 
 ### Minor Changes
 
-- f55a79c: Migrate to Node.js 24 LTS
-
-  Minimum required Node.js version is now 24. Updated `engines.node` from `>=16`/`>=18` to `>=24` across all packages. Regenerated lockfile under Node 24. Updated CI workflows to use `storefront-workflows@v6` with Node 24 support.
-
 - 62adf1c: Reduce HTTP requests on page load through three bundling optimizations. The preact runtime is isolated in its own vendor chunk so it no longer co-locates into other chunks. Dropin API and internal component modules are consolidated into `chunks/api.js` and `chunks/components.js` respectively, replacing the previous pattern of one chunk file per function or component. All SVG icons are consolidated into a single `chunks/icons.js` chunk instead of one chunk per icon.
 
   Drop-ins must be rebuilt against this release to get the reduced request footprint. No source changes are required.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.9.0-beta.3",
+  "version": "1.9.1-alpha-20260702101934",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -28,11 +28,11 @@
     "postpublish": "node ./scripts/publish-tools.mjs"
   },
   "devDependencies": {
-    "@adobe-commerce/event-bus": "~1.1.0-beta.1",
-    "@adobe-commerce/fetch-graphql": "~1.3.0-beta.1",
-    "@adobe-commerce/recaptcha": "1.2.0-beta.1",
-    "@adobe-commerce/storefront-design": "~1.1.0-beta.1",
-    "@dropins/build-tools": "~1.2.0-beta.1",
+    "@adobe-commerce/event-bus": "~1.1.0",
+    "@adobe-commerce/fetch-graphql": "~1.3.0",
+    "@adobe-commerce/recaptcha": "1.2.0",
+    "@adobe-commerce/storefront-design": "~1.1.0",
+    "@dropins/build-tools": "~1.2.0",
     "preact": "~10.22.1",
     "vite-plugin-banner": "^0.8.0"
   },

package/src/components/Picker/Picker.tsx

@@ -11,7 +11,7 @@ import { Icon } from '@adobe-commerce/elsie/components';
 import { ChevronDown } from '@adobe-commerce/elsie/icons';
 import { classes } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes, useEffect, useState } from 'preact/compat';
+import { HTMLAttributes, useEffect, useRef, useState } from 'preact/compat';
 
 import '@adobe-commerce/elsie/components/Picker/Picker.css';
 
@@ -46,10 +46,13 @@ function findSelectedValue(
   defaultOption?: PickerOption,
   placeholder?: string,
   floatingLabel?: string,
-  firstAvailableOption?: PickerOption
+  firstAvailableOption?: PickerOption,
+  singleOption?: PickerOption
 ) {
   if (value) return value;
   if (defaultOption) return defaultOption.value;
+  // sole option wins over the placeholder so it stays selected, not blank
+  if (singleOption) return singleOption.value;
   if (placeholder || floatingLabel) return '';
   if (firstAvailableOption) return firstAvailableOption.value;
   return null;
@@ -75,17 +78,26 @@ export const Picker: FunctionComponent<PickerProps> = ({
   const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
   const isDisabled = disabled || options?.length === 1;
+  const selectRef = useRef<HTMLSelectElement>(null);
 
   // find the first option that is not disabled
   const firstAvailableOption = options?.find((option) => !option.disabled);
 
+  // the only selectable option when the picker auto-disables; a disabled
+  // <select> never fires change, so we must emit it ourselves (see below)
+  const singleOption =
+    !disabled && options?.length === 1 && !options[0]?.disabled
+      ? options[0]
+      : undefined;
+
   const [selectedValue, setSelectedValue] = useState<PickerValue>(() => {
     return findSelectedValue(
       value,
       defaultOption,
       placeholder,
       floatingLabel,
-      firstAvailableOption
+      firstAvailableOption,
+      singleOption
     );
   });
 
@@ -96,10 +108,32 @@ export const Picker: FunctionComponent<PickerProps> = ({
         defaultOption,
         placeholder,
         floatingLabel,
-        firstAvailableOption
+        firstAvailableOption,
+        singleOption
       )
     );
-  }, [value, defaultOption, placeholder, floatingLabel, firstAvailableOption]);
+  }, [
+    value,
+    defaultOption,
+    placeholder,
+    floatingLabel,
+    firstAvailableOption,
+    singleOption,
+  ]);
+
+  // commit the sole option to the consumer; skip once value has come back in.
+  // dispatch a real change event so handleOptionClick emits it: consumers get
+  // a genuine Event (some call preventDefault) identical to a user selection.
+  useEffect(() => {
+    if (!singleOption || value === singleOption.value) return;
+
+    const select = selectRef.current;
+    if (!select) return;
+
+    select.value = singleOption.value as string;
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [singleOption?.value, value]);
 
   const handleOptionClick = (event: Event) => {
     const { options, value } = event.target as HTMLSelectElement;
@@ -157,6 +191,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
       )}
 
       <select
+        ref={selectRef}
         id={uniqueId}
         className={classes([
           'dropin-picker__select',