@adobe-commerce/elsie 1.6.0-alpha1 → 1.6.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.6.0-alpha1",
+  "version": "1.6.0-alpha2",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.1",
-    "@adobe-commerce/fetch-graphql": "1.2.0-beta1",
-    "@adobe-commerce/recaptcha": "1.0.2-beta1",
+    "@adobe-commerce/fetch-graphql": "~1.2.0",
+    "@adobe-commerce/recaptcha": "~1.0.2",
     "@adobe-commerce/storefront-design": "~1.0.0",
     "@dropins/build-tools": "~1.0.1",
     "preact": "~10.22.1",

package/src/components/Field/Field.tsx

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import '@adobe-commerce/elsie/components/Field/Field.css';
-import { classes } from '@adobe-commerce/elsie/lib';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 
@@ -36,8 +36,23 @@ export const Field: FunctionComponent<FieldProps> = ({
 }) => {
   const id =
     children?.props?.id ?? `dropin-field-${Math.random().toString(36)}`;
-  const ChildComponent =
-    children && typeof children.type !== 'string' ? children.type : null;
+
+  let fieldContent: VNode | string | null = null;
+
+  if (children && typeof children !== 'string') {
+      fieldContent = (
+        <VComponent
+          node={children}
+          id={id}
+          key={children.key}
+          disabled={disabled}
+          size={size}
+          error={!!error}
+          success={!!success && !error}
+        />
+      );
+  }
+
 
   return (
     <div {...props} className={classes(['dropin-field', className])}>
@@ -55,17 +70,7 @@ export const Field: FunctionComponent<FieldProps> = ({
       )}
 
       <div className={classes(['dropin-field__content'])}>
-        {ChildComponent && children && (
-          <ChildComponent
-            {...children.props}
-            id={id}
-            key={children.key}
-            disabled={disabled}
-            size={size}
-            error={!!error}
-            success={!!success && !error}
-          />
-        )}
+        {fieldContent}
       </div>
 
       <div

package/src/lib/aem/configs.ts

@@ -23,6 +23,7 @@ interface Config {
 
 // Private state
 let config: Config | null = null;
+let options: { match?: (key: string) => boolean } | null = null;
 let rootPath: string | null = null;
 let rootConfig: ConfigRoot | null = null;
 
@@ -31,6 +32,7 @@ let rootConfig: ConfigRoot | null = null;
  */
 function resetConfig() {
   config = null;
+  options = null;
   rootPath = null;
   rootConfig = null;
 }
@@ -40,7 +42,7 @@ function resetConfig() {
  * @param {Object} [configObj=config] - The config object.
  * @returns {string} - The root path.
  */
-function getRootPath(configObj: Config | null = config, options?: { match?: (key: string) => boolean }): string {
+function getRootPath(configObj: Config | null = config, optionsObj: { match?: (key: string) => boolean } | null = options): string {
   if (!configObj) {
     console.warn('No config found. Please call initializeConfig() first.');
     return '/';
@@ -56,7 +58,7 @@ function getRootPath(configObj: Config | null = config, options?: { match?: (key
     .find(
       (key) =>
         window.location.pathname === key ||
-        (options?.match?.(key) ?? window.location.pathname.startsWith(key))
+        (optionsObj?.match?.(key) ?? window.location.pathname.startsWith(key))
     );
 
   return value ?? '/';
@@ -131,9 +133,10 @@ function applyConfigOverrides(
  * @param {Function} [options.match] - The function to match the path to the config.
  * @returns {Object} The initialized root configuration
  */
-function initializeConfig(configObj: Config, options?: { match?: (key: string) => boolean }): ConfigRoot {
+function initializeConfig(configObj: Config, optionsObj?: { match?: (key: string) => boolean }): ConfigRoot {
   config = configObj;
-  rootPath = getRootPath(config, { match: options?.match });
+  options = optionsObj ?? null;
+  rootPath = getRootPath(config, { match: optionsObj?.match });
   rootConfig = applyConfigOverrides(config, rootPath);
   return rootConfig;
 }