@es-joy/jsoe 0.5.1 → 0.6.1

package/src/fundamentalTypes/arrayType.js

@@ -18,6 +18,14 @@ import {
 /**
  * @typedef {() => HTMLInputElement[]} InputsExceedingLength
  */
+/**
+ * @typedef {() => (HTMLSelectElement & {
+ *   $getValue: import('../typeChoices.js').GetValue
+ * })[]} GetMapKeySelects
+ */
+/**
+ * @typedef {() => void} ValidateMapKey
+ */
 /**
  * @callback GetPropertyInputs
  * @returns {HTMLInputElement[]}
@@ -31,7 +39,8 @@ import {
  * @typedef {() => HTMLDivElement & {
  *   $inputsExceedingLength: InputsExceedingLength,
  *   $getPropertyInputs: GetPropertyInputs,
- *   $redrawMoveArrows: RedrawMoveArrows
+ *   $redrawMoveArrows: RedrawMoveArrows,
+ *   $getMapKeySelects: GetMapKeySelects
  * }} GetArrayItems
  */
 /**
@@ -48,6 +57,26 @@ import {
  * @typedef {() => HTMLInputElement|undefined} GetPropertyInput
  */
 
+/**
+ * @typedef {any} AnyValue
+ */
+
+/**
+ * Algorithm used for checking key identity in `Map`'s.
+ * @param {AnyValue} x
+ * @param {AnyValue} y
+ * @returns {boolean}
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value-zero_equality
+ */
+function sameValueZero (x, y) {
+  if (typeof x === 'number' && typeof y === 'number') {
+    // x and y are equal (may be -0 and 0) or they are both NaN
+    // eslint-disable-next-line no-self-compare -- Not pointless with -0
+    return x === y || (x !== x && y !== y);
+  }
+  return x === y;
+}
+
 /**
  * @type {import('../types.js').TypeObject & {sparse?: boolean|undefined}}
  */
@@ -87,7 +116,11 @@ const arrayType = {
     const checkEnd = (beginOnly) => {
       if (beginOnly && endMatchTypeObjs.length) {
         const endMatch = stringVal.match(
-          /** @type {RegExp} */ (endMatchTypeObjs.slice(-1)[0].stringRegexEnd)
+          /** @type {RegExp} */ (
+            /** @type {import('../types.js').TypeObject} */ (
+              endMatchTypeObjs.at(-1)
+            ).stringRegexEnd
+          )
         );
         if (endMatch) {
           endMatchTypeObjs.pop(); // Safe now to extract
@@ -139,7 +172,14 @@ const arrayType = {
       if (sparse && idx && idx > retObj.length - 1) {
         retObj.length = idx + 1;
       }
-      return {value: retObj, remnant: stringVal};
+      return {
+        value: this.set && Array.isArray(retObj)
+          ? new Set(retObj)
+          : this.map
+            ? new Map(/** @type {Array<any>} */ (retObj))
+            : retObj,
+        remnant: stringVal
+      };
     }
 
     /**
@@ -178,7 +218,7 @@ const arrayType = {
       }
       // console.log('vvv', stringVal, beginOnly, v);
       if (assign) {
-        // eslint-disable-next-line max-len -- Long
+        // eslint-disable-next-line @stylistic/max-len -- Long
         /** @type {{[key: string]: import('../formats.js').StructuredCloneValue}} */ (
           retObj
         )[pr] = v;
@@ -193,8 +233,13 @@ const arrayType = {
   },
   getValue ({root, stateObj = {}, currentPath = ''}) {
     const top = currentPath === '';
-    const arrayItems = /** @type {HTMLElement} */ ($e(root, '.arrayItems'));
-    const fieldsets = arrayItems.children;
+    const arrayItems =
+      /**
+       * @type {HTMLElement & {
+       *   $getMapKeySelects: GetMapKeySelects
+       * }}
+       */ ($e(root, '.arrayItems'));
+    const fieldsets = [...arrayItems.children];
 
     /**
      * @type {({[key: string]: any})|any[]}
@@ -216,7 +261,7 @@ const arrayType = {
     /**
      * @param {HTMLDivElement} root
      * @param {string} currentPathPart
-     * @returns {[boolean, boolean?]}
+     * @returns {[boolean, any?]}
      */
     const getValOrRef = (root, currentPathPart) => {
       const value = Types.getValueForRoot(
@@ -229,26 +274,33 @@ const arrayType = {
       }
       return [true, value];
     };
-    [...fieldsets].forEach((fieldset) => {
-      const legend = fieldset.firstElementChild;
-      const propVal = getPropertyValueFromLegend(
-        /** @type {HTMLLegendElement} */ (legend)
+    fieldsets.forEach((fieldset) => {
+      const legend = /** @type {HTMLLegendElement} */ (
+        fieldset.firstElementChild
       );
+      const propVal = getPropertyValueFromLegend(legend);
       const root = /** @type {HTMLDivElement} */ (
-        $e(/** @type {HTMLElement} */ (fieldset), 'div[data-type]')
+        DOM.filterChildElements(
+          /** @type {HTMLFieldSetElement} */
+          (fieldset),
+          [
+            '.typeContainer',
+            'div[data-type]'
+          ]
+        )[0]
       );
       /* istanbul ignore if -- Should err first? */
       if (!root) {
         return;
       }
 
-      const objectProperty = $e(/** @type {HTMLElement} */ (legend), 'input');
+      const objectProperty = DOM.filterChildElements(legend, ['input']);
       const [isVal, value] = getValOrRef(
         root,
         propVal
       );
       if (isVal) {
-        if (objectProperty) {
+        if (objectProperty.length) {
           /** @type {{[key: string]: any}} */ (ret)[propVal] = value;
         } else {
           ret.push(value);
@@ -264,11 +316,12 @@ const arrayType = {
               path: referentPath,
               obj: ret
             });
-
           const referencePathJsonPtr = getJSONPointerParts(referencePath);
           const referenceFinalPathPart = referencePathJsonPtr.pop();
           const referenceParentObj = referencePathJsonPtr.reduce(
-            (obj, pathPart) => reduceJSONPointerParts(obj, pathPart),
+            (obj, pathPart) => {
+              return reduceJSONPointerParts(obj, pathPart);
+            },
             ret
           );
           /** @type {{[key: string]: any}} */ (referenceParentObj)[
@@ -277,7 +330,14 @@ const arrayType = {
         }
       );
     }
-    return ret;
+    return this.set && Array.isArray(ret)
+      ? new Set(ret)
+      : this.map
+        ? new Map(arrayItems.$getMapKeySelects().map((select, idx) => {
+          const key = select.$getValue();
+          return [key, /** @type {any[]} */ (ret)[idx]];
+        }))
+        : ret;
   },
 
   // Try to keep in sync with basic structure of `editUI`
@@ -285,11 +345,13 @@ const arrayType = {
     // const {sparse} = this;
     let itemIndex = -1;
 
+    const parentType = type;
+
     /**
      * @param {{
      *   itemIndex: number,
      *   typeNamespace?: string,
-     *   propName: string
+     *   propName?: string
      * }} cfg
      * @returns {import('jamilih').JamilihArray}
      */
@@ -308,7 +370,7 @@ const arrayType = {
         }, [
           propName !== undefined
             ? propName
-            // eslint-disable-next-line max-len -- Long
+            // eslint-disable-next-line @stylistic/max-len -- Long
             /* istanbul ignore next -- Won't reach here as typeson will always give keypath? */
             : itemIndex
         ]]
@@ -321,7 +383,7 @@ const arrayType = {
         $custom: {
           /**
            * @param {{
-           *   propName: name,
+           *   propName: string,
            *   type: import('../types.js').AvailableType,
            *   value: import('../formats.js').StructuredCloneValue,
            *   bringIntoFocus: boolean,
@@ -335,6 +397,37 @@ const arrayType = {
             propName, type, value, bringIntoFocus,
             schemaContent, schemaState
           }) {
+            if (parentType === 'map') {
+              const root = Types.getUIForModeAndType({
+                resultType,
+                readonly: true,
+                typeNamespace, type, topRoot,
+                bringIntoFocus,
+                format, schemaContent, schemaState,
+                value,
+                hasValue: true // type === 'sparseArrays' && value
+              });
+              if (propName === '0') {
+                const fieldset = this.$addMapElement();
+                this._lastFieldset = fieldset;
+                const keyFieldset = /** @type {HTMLFieldSetElement} */ (jml(
+                  'fieldset', [
+                    ['legend', ['Key']]
+                  ], fieldset
+                ));
+                jml(root, keyFieldset);
+              } else { // propName === '1'
+                const valueFieldset = /** @type {HTMLFieldSetElement} */ (jml(
+                  'fieldset', [
+                    ['legend', ['Value']]
+                  ], this._lastFieldset
+                ));
+                this._lastFieldset = null;
+                jml(root, valueFieldset);
+              }
+              return root;
+            }
+
             const fieldset = this.$addArrayElement({propName});
             const root = Types.getUIForModeAndType({
               resultType,
@@ -348,6 +441,27 @@ const arrayType = {
             jml(root, fieldset);
             return root;
           },
+          /**
+           * @returns {HTMLFieldSetElement}
+           */
+          $addMapElement () {
+            itemIndex++;
+            const arrayItems = this.$getArrayItems();
+            // const className = `${type}Item`;
+            const fieldset = /** @type {HTMLFieldSetElement} */ (
+              jml('fieldset', [
+                buildLegend({
+                  // className,
+                  // type,
+                  // arrayItems,
+                  itemIndex,
+                  typeNamespace,
+                  propName: undefined
+                })
+              ], arrayItems)
+            );
+            return fieldset;
+          },
           /**
            * @param {{propName: string}} cfg
            * @returns {HTMLFieldSetElement}
@@ -378,9 +492,7 @@ const arrayType = {
         DOM.initialCaps(/** @type {import('../types.js').AvailableType} */ (
           type
         )).replace(/s$/u, ''), nbsp.repeat(2),
-        // Why is this necessary
-        /** @type {import('jamilih').JamilihArray} */
-        (['button', {$on: {click (/** @type {Event} */ e) {
+        ['button', {$on: {click (/** @type {Event} */ e) {
           e.preventDefault();
           const {target} = e;
           const arrayContents = /** @type {HTMLDivElement} */ ($e(
@@ -392,13 +504,19 @@ const arrayType = {
           /** @type {HTMLElement} */ (
             target
           ).textContent = arrayContents.hidden ? '+' : '-';
-        }}}, ['-']]),
+        }}}, ['-']],
         ['div', {class: 'arrayContents'}, [
           this.array
             ? ['div', [
-              'Array length: ',
+              type === 'set'
+                ? 'Set size: '
+                : type === 'map'
+                  ? 'Map size: '
+                  : 'Array length: ',
               ['span', [
-                (value && value.length) || 0
+                (value && (type === 'set' || type === 'map')
+                  ? value.size
+                  : value.length) || 0
               ]]
             ]]
             : '',
@@ -418,13 +536,17 @@ const arrayType = {
   //    an array (or object if called by that method) and we handle the
   //    population of the array in the callback
   editUI ({
-    typeNamespace, buildTypeChoices, format, resultType,
-    type, topRoot, value, bringIntoFocus = true
+    typeNamespace, buildTypeChoices, format, // resultType,
+    type, arrayState, topRoot, value, bringIntoFocus = true
   }) {
     const {sparse} = this;
+    // eslint-disable-next-line consistent-this
+    const parentTypeObject = this;
     const itemAdjust = type === 'object' ? 1 : 0;
     let itemIndex = itemAdjust - 1;
-    const editableProperties = type !== 'array';
+    const editableProperties = type !== 'array' &&
+      type !== 'set' && type !== 'map';
+    const mapProperties = type === 'map';
 
     /**
      * @param {HTMLInputElement} input
@@ -471,14 +593,14 @@ const arrayType = {
         swapCountElem.textContent = base;
         baseCountElem.textContent = swap;
       } else {
-        // eslint-disable-next-line max-len -- Long
+        // eslint-disable-next-line @stylistic/max-len -- Long
         const swapCountElem = /** @type {HTMLInputElement & {$parseInt: ParseInt}} */
           (/**
            * @type {HTMLFieldSetElement & {$getPropertyInput: GetPropertyInput}}
            */ (
               group
             ).$getPropertyInput());
-        // eslint-disable-next-line max-len -- Long
+        // eslint-disable-next-line @stylistic/max-len -- Long
         const baseCountElem = /** @type {HTMLInputElement & {$parseInt: ParseInt}} */
           (/**
            * @type {HTMLFieldSetElement & {$getPropertyInput: GetPropertyInput}}
@@ -602,6 +724,7 @@ const arrayType = {
      *   $inputsExceedingLength: InputsExceedingLength,
      *   $getPropertyInputs: GetPropertyInputs,
      *   $redrawMoveArrows: RedrawMoveArrows
+     *   $getMapKeySelects: GetMapKeySelects
      * }} ArrayItems
      */
 
@@ -652,12 +775,82 @@ const arrayType = {
             'input'
           )
         );
-        const highest = inputsExceedingLength.map(
+        const highest = /** @type {number} */ (inputsExceedingLength.map(
           (i) => Number.parseInt(i.value)
-        ).sort().slice(-1)[0];
+        ).sort().at(-1));
         arrLengthInput.value = String(highest + 1);
         return this.$validateLength(true);
       };
+      if (mapProperties) {
+        const keyTypeSelection =
+          /** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+            buildTypeChoices
+          )({
+            format: 'structuredCloning',
+            typeNamespace: 'key-type-choices-only'
+          });
+        return ['legend', [
+          'Key ',
+          ['span', {
+            dataset: {prop: 'true'},
+            className
+          }, [String(itemIndex)]],
+          ':',
+          nbsp.repeat(2),
+
+          ['span', {
+            class: 'mapKey',
+            $on: {
+              change: [function () {
+                /**
+                 * @type {HTMLSpanElement & {
+                 *   $validateMapKey: ValidateMapKey
+                 * }}
+                 */
+                (this).$validateMapKey();
+
+                // Needed?
+                Types.validateAllReferences({
+                  // eslint-disable-next-line object-shorthand -- TS
+                  topRoot: /** @type {HTMLDivElement} */ (topRoot)
+                });
+              }, true]
+            },
+            $custom: {
+              /** @type {ValidateMapKey} */
+              $validateMapKey () {
+                const selects = arrayItems.$getMapKeySelects();
+
+                setTimeout(() => {
+                  const values = selects.map((select) => {
+                    return select.$getValue();
+                  });
+
+                  const dupeIndex = values.findLastIndex((value, idx) => {
+                    return values.some((val, index) => {
+                      return idx !== index && sameValueZero(value, val);
+                    });
+                  });
+
+                  if (dupeIndex === -1) {
+                    return;
+                  }
+                  const select = selects[dupeIndex];
+                  /* istanbul ignore if -- Should exist */
+                  if (!select) {
+                    return;
+                  }
+
+                  select.setCustomValidity(
+                    'Duplicate Map key value'
+                  );
+                  select.reportValidity();
+                });
+              }
+            }
+          }, keyTypeSelection.domArray]
+        ]];
+      }
       if (editableProperties) {
         return /** @type {import('jamilih').JamilihArray} */ (['legend', [
           sparse
@@ -752,7 +945,7 @@ const arrayType = {
                   el.closest('fieldset')
                 );
                 const thisFieldset = getFieldset(this);
-                // eslint-disable-next-line max-len -- Long
+                // eslint-disable-next-line @stylistic/max-len -- Long
                 const intVal = /** @type {HTMLInputElement & {$parseInt: ParseInt}} */ (
                   this
                 ).$parseInt();
@@ -825,7 +1018,7 @@ const arrayType = {
                   const method = latest ? 'after' : 'before';
                   // Ensure move *after* splice that will occur after this
                   setTimeout(() => {
-                    /* c8 ignore next 3 */
+                    /* istanbul ignore if */
                     if (!nearest) {
                       return;
                     }
@@ -879,7 +1072,7 @@ const arrayType = {
      */
     const decrementItemIndex = (arrayItems) => {
       if (sparse) {
-        // eslint-disable-next-line max-len -- Long
+        // eslint-disable-next-line @stylistic/max-len -- Long
         itemIndex = /** @type {(HTMLInputElement & {$parseInt: ParseInt})[]} */ (
           arrayItems.$getPropertyInputs()
         ).reduce(
@@ -908,7 +1101,8 @@ const arrayType = {
      * @type {AddArrayElement}
      * @this {HTMLButtonElement & {
      *   $getArrayItems: GetArrayItems,
-     *   $addArrayElement: AddArrayElement
+     *   $addArrayElement: AddArrayElement,
+     *   $getMapKeySelects?: GetMapKeySelects
      * }}
      */
     const $addArrayElement = function ({propName, splice, alwaysFocus}) {
@@ -923,9 +1117,9 @@ const arrayType = {
         } else if (typeof splice === 'number') {
           itemIndex = splice + 1;
         } else if (typeof splice !== 'string') {
-          // eslint-disable-next-line max-len -- Long
+          // eslint-disable-next-line @stylistic/max-len -- Long
           itemIndex = /** @type {(HTMLInputElement & {$parseInt: ParseInt})[]} */ (
-            // eslint-disable-next-line max-len -- Long
+            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$getPropertyInputs: GetPropertyInputs}} */
             (arrayItems).$getPropertyInputs()
           ).reduce(
@@ -941,27 +1135,84 @@ const arrayType = {
       }
       const thisButton = this; // eslint-disable-line consistent-this
       const className = `${type}Item`;
-      const fieldset = /** @type {HTMLFieldSetElement} */ (jml('fieldset', {
-        $custom: {
-          /** @type {GetPropertyInput} */
-          $getPropertyInput () {
-            return /** @type {HTMLInputElement} */ (DOM.filterChildElements(
-              /** @type {HTMLFieldSetElement} */ (this),
-              ['legend', `input.propertyName-${typeNamespace}`]
-            ).pop());
-          }
-        }
-      }, [
-        buildLegend({
-          className,
-          splice,
-          itemIndex,
-          // type,
-          typeNamespace,
-          arrayItems,
-          propName
-        })
-      ], arrayItems));
+      const fieldset =
+        /** @type {HTMLFieldSetElement} */ (
+          jml('fieldset',
+            {
+              $on: {
+                change: [() => {
+                  if (type !== 'set') {
+                    return;
+                  }
+                  setTimeout(() => {
+                    const root = div;
+                    const values = /** @type {any[]} */ (
+                      parentTypeObject.getValue.call({
+                        ...parentTypeObject,
+                        set: false
+                      }, {root})
+                    );
+                    // console.log('values', values);
+
+                    const dupeIndex = values.findLastIndex((value, idx) => {
+                      return values.some((val, index) => {
+                        return idx !== index && value === val;
+                      });
+                    });
+
+                    if (dupeIndex === -1) {
+                      return;
+                    }
+                    const fieldsets = arrayItems.children;
+                    const controls = [...fieldsets].map((fieldset) => {
+                      const root = /** @type {HTMLDivElement} */ (
+                        $e(fieldset, 'div[data-type]')
+                      );
+                      /* istanbul ignore if -- Should err first? */
+                      if (!root) {
+                        return null;
+                      }
+                      return Types.getFormControlForRoot(root);
+                    });
+
+                    const control = controls[dupeIndex];
+                    /* istanbul ignore if -- Should exist */
+                    if (!control) {
+                      return;
+                    }
+
+                    control.setCustomValidity(
+                      'Duplicate Set value'
+                    );
+                    control.reportValidity();
+                  });
+                }, true]
+              },
+              $custom: {
+                /** @type {GetPropertyInput} */
+                $getPropertyInput () {
+                  return /** @type {HTMLInputElement} */ (
+                    DOM.filterChildElements(
+                      /** @type {HTMLFieldSetElement} */ (this),
+                      ['legend', `input.propertyName-${typeNamespace}`]
+                    ).pop()
+                  );
+                }
+              }
+            },
+            [
+              buildLegend({
+                className,
+                splice,
+                itemIndex,
+                // type,
+                typeNamespace,
+                arrayItems,
+                propName
+              })
+            ],
+            arrayItems)
+        );
       // We must ensure fieldset is built before passing it
       jml({'#': [
         ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
@@ -970,9 +1221,9 @@ const arrayType = {
           // resultType,
           // eslint-disable-next-line object-shorthand -- TS
           topRoot: /** @type {HTMLDivElement} */ (topRoot),
-          // eslint-disable-next-line object-shorthand, max-len -- TS
+          // eslint-disable-next-line object-shorthand, @stylistic/max-len -- TS
           format: /** @type {import('../formats.js').AvailableFormat} */ (format),
-          state: type,
+          state: arrayState ?? type,
           // itemIndex,
           typeNamespace
         }).domArray),
@@ -1032,7 +1283,6 @@ const arrayType = {
          */
         ([
           'button',
-          // @ts-ignore Can't seem to force optional Event
           {
             $on: {
               click (/** @type {Event} */ e) {
@@ -1139,15 +1389,15 @@ const arrayType = {
            * @this {HTMLDivElement}
            */
           $getArrayItems () {
-            return (/**
-               * @type {HTMLDivElement & {
-               *   $inputsExceedingLength: InputsExceedingLength,
-               *   $getPropertyInputs: GetPropertyInputs,
-               *   $redrawMoveArrows: RedrawMoveArrows
-               * }}
-               */
-              (this.previousElementSibling)
-            );
+            const prevSibling = /**
+             * @type {HTMLDivElement & {
+             *   $inputsExceedingLength: InputsExceedingLength,
+             *   $getPropertyInputs: GetPropertyInputs,
+             *   $redrawMoveArrows: RedrawMoveArrows,
+             *   $getMapKeySelects: GetMapKeySelects
+             * }}
+             */ (this.previousElementSibling);
+            return prevSibling;
           }
         },
         $on: {click () {
@@ -1234,6 +1484,29 @@ const arrayType = {
         $swapGroup, $redrawMoveArrows, $getArrayLength,
         $inputsExceedingLength,
 
+        /**
+         * Only relevant for maps.
+         * @type {GetMapKeySelects}
+         * @this {HTMLDivElement}
+         */
+        $getMapKeySelects () {
+          const selects =
+            /**
+             * @type {(HTMLSelectElement & {
+             *   $getValue: import('../typeChoices.js').GetValue}
+             * )[]}
+             */ (DOM.filterChildElements(
+              this,
+              [
+                'fieldset',
+                'legend:first-child',
+                'span.mapKey',
+                'select.typeChoices-key-type-choices-only'
+              ]
+            ));
+          return selects;
+        },
+
         /**
          * @type {GetPropertyInputs}
          * @this {HTMLDivElement}
@@ -1266,11 +1539,10 @@ const arrayType = {
         addArrayElement,
         ['button', {$on: {click () {
           const arrayContents = /** @type {HTMLElement} */ (
-            // @ts-ignore Erring out of IDE
             this.closest('.arrayContents')
           );
           const arrayItems =
-            // eslint-disable-next-line max-len -- Long
+            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$getPropertyInputs: GetPropertyInputs;}} */ (
               $e(/** @type {HTMLElement} */ (arrayContents), '.arrayItems')
             );
@@ -1278,7 +1550,7 @@ const arrayType = {
           if (lastElement) {
             lastElement.remove();
             decrementItemIndex(arrayItems);
-            // eslint-disable-next-line max-len -- Long
+            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$redrawMoveArrows: RedrawMoveArrows}} */ (
               $e(/** @type {HTMLElement} */ (arrayContents), '.arrayItems')
             ).$redrawMoveArrows();
@@ -1292,7 +1564,7 @@ const arrayType = {
         // We could only add this when there was more than one
         ['button', {$on: {click () {
           const arrayItems =
-            // eslint-disable-next-line max-len -- Long
+            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$getPropertyInputs: GetPropertyInputs}} */ ($e(
               /** @type {HTMLElement} */ (
                 /** @type {HTMLElement} */ (this).closest('.arrayContents')
@@ -1314,26 +1586,57 @@ const arrayType = {
       ]]
     );
 
+    const parentType = type;
+
     const div = /** @type {HTMLDivElement} */ (
       jml('div', /** @type {import('jamilih').JamilihAttributes} */ ({
         dataset: {type},
         // is: 'array-or-object-editor',
         $custom: {
-          // eslint-disable-next-line max-len -- Long
+          // eslint-disable-next-line @stylistic/max-len -- Long
           /** @type {import('../formats/structuredCloning.js').AddAndSetArrayElement} */
           $addAndSetArrayElement ({
-            propName, type, value, bringIntoFocus
+            propName, type, value, bringIntoFocus, setAValue
             // , schemaContent, schemaState
           }) {
-            this.$addArrayElement({propName});
+            if (parentType === 'map') {
+              if (propName === '0') {
+                this.$addArrayElement({propName});
+                const arrayItems = this.$getArrayItems();
+                const keyTypeChoices = /**
+                 * @type {HTMLSelectElement & {
+                 *   $setType: import('../typeChoices.js').SetType,
+                 *   $getTypeRoot: import('../formatAndTypeChoices.js').
+                 *     TypeRootGetter
+                 * }}
+                */ (DOM.filterChildElements(
+                    arrayItems,
+                    ['fieldset:last-of-type', 'legend', '.mapKey', 'select']
+                  )[0]);
+                keyTypeChoices.$setType({
+                  type, baseValue: value, bringIntoFocus
+                });
+
+                // The key may itself be a map, etc.
+                return keyTypeChoices.$getTypeRoot();
+              }
+            } else {
+              this.$addArrayElement({propName});
+            }
             const typeChoices = this.$getTypeChoices();
             typeChoices.$setType({type, baseValue: value, bringIntoFocus});
             const root = typeChoices.$getTypeRoot();
-            const typeObj = /** @type {import('../types.js').TypeObject} */ (
-              Types.availableTypes[type]
-            );
-            if (typeObj.setValue) {
-              typeObj.setValue({root, value});
+            // If run for all, causes problems with running `Error.cause`
+            //   type twice and is inefficient;
+            //   currently put behind `setAValue` as we need to set a value
+            //   from `errorsSpecialType`
+            if (setAValue) {
+              const typeObj = /** @type {import('../types.js').TypeObject} */ (
+                Types.availableTypes[type]
+              );
+              if (typeObj.setValue) {
+                typeObj.setValue({root, value});
+              }
             }
             Types.validate({type, root, topRoot});
             return root;
@@ -1345,8 +1648,8 @@ const arrayType = {
 
           /** @type {GetAddArrayElement} */
           $getAddArrayElement () {
-            const el = this
-              .lastElementChild.firstElementChild.nextElementSibling;
+            const el = this.
+              lastElementChild.firstElementChild.nextElementSibling;
             return sparse ? el.nextElementSibling : el;
           },
           /**
@@ -1374,7 +1677,7 @@ const arrayType = {
             const arrayItems = this.$getArrayItems();
             return $e(
               arrayItems.lastElementChild,
-              `.typeChoices-${typeNamespace}`
+              `fieldset > .typeChoices-${typeNamespace}` // Avoid keys
             );
           }
         },