@adobe-commerce/elsie 1.4.1-alpha100 → 1.4.1-alpha101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.4.1-alpha100",
+  "version": "1.4.1-alpha101",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Picker/Picker.tsx

@@ -8,12 +8,13 @@
  *******************************************************************/
 
 import { Icon } from '@adobe-commerce/elsie/components';
-import '@adobe-commerce/elsie/components/Picker/Picker.css';
 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 '@adobe-commerce/elsie/components/Picker/Picker.css';
+
 type PickerValue = string | null;
 
 export interface PickerOption {
@@ -68,9 +69,10 @@ export const Picker: FunctionComponent<PickerProps> = ({
   defaultOption,
   icon,
   className,
+  id,
   ...props
 }) => {
-  const id = props?.id || name || `dropin-picker-${Math.random().toString(36)}`;
+  const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
 
   // find the first option that is not disabled
@@ -154,7 +156,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
       )}
 
       <select
-        id={id}
+        id={uniqueId}
         className={classes([
           'dropin-picker__select',
           `dropin-picker__select--${variant}`,

package/src/components/TextSwatch/TextSwatch.tsx

@@ -94,7 +94,7 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
     }
   }, [label]);
 
-  const key = useMemo(() => `${name}_${id}_${Math.random().toString(36)}`, [name, id]);
+  const uniqueId = useMemo(() => id ?? `${name}_${id}_${Math.random().toString(36)}`, [name, id]);
 
   return (
     <div
@@ -104,7 +104,7 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
       <input
         type={multi ? 'checkbox' : 'radio'}
         name={name}
-        id={key}
+        id={uniqueId}
         value={value}
         aria-label={handleAriaLabel()}
         checked={selected}
@@ -119,7 +119,7 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
         ])}
       />
       <label
-        htmlFor={key}
+        htmlFor={uniqueId}
         ref={spanRef}
         className={classes([
           'dropin-text-swatch__label',