@k2b/ui 0.1.0-rc.0

package/dist/browser/inputs/AutocompleteEditor.js

@@ -0,0 +1,610 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__placeholder aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status role=status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i>Loading suggestions`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div popover=manual class=k2b-autocomplete__options role=presentation><div class=k2b-autocomplete__listbox role=listbox><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete><div class=k2b-autocomplete__surface><!$><!/><div class=k2b-autocomplete__preview aria-hidden=true></div><textarea class=k2b-autocomplete__input></textarea></div><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status data-error=true role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><span></span><button type=button>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__option role=option><span></span><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<small>`);
+import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { useUiMessages } from "../intl/messages";
+import { buildSuggestContext, createCompletionBehaviorState, detectQuery, displayLabel, plainTextHighlight, renderWithOverlay, resolveSuggestions } from "./completion";
+import { resolveMaybeAccessor } from "./field-contract";
+export function AutocompleteEditor(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.id);
+  let textarea;
+  let preview;
+  let dropdown;
+  let currentAbort = null;
+  let currentTimer = null;
+  let overlayFrame;
+  let overlayInitialized = false;
+  let renderPendingOverlay;
+  const completionBehavior = createCompletionBehaviorState();
+  const [composing, setComposing] = createSignal(false);
+  const [localValue, setLocalValue] = createSignal(resolveMaybeAccessor(props.value) ?? "");
+  const error = () => resolveMaybeAccessor(props.error);
+  const [state, setState] = createSignal(null);
+  const [loading, setLoading] = createSignal(false);
+  const [completionError, setCompletionError] = createSignal(null);
+  const [dropdownOpen, setDropdownOpen] = createSignal(false);
+  const completionId = createUniqueId();
+  const listboxId = `${meta.controlId}-${completionId}-suggestions`;
+  const optionId = index => `${listboxId}-${index}`;
+  const useOverlay = createMemo(() => Boolean(props.highlight));
+  const activeSuggestion = () => {
+    const current = state();
+    return current?.suggestions[current.selectedIndex] ?? null;
+  };
+  createEffect(() => {
+    const incoming = resolveMaybeAccessor(props.value);
+    if (incoming !== undefined && incoming !== null && incoming !== untrack(localValue)) {
+      setLocalValue(incoming);
+    }
+  });
+  createEffect(() => {
+    const target = localValue();
+    if (!composing() && textarea && textarea.value !== target) {
+      textarea.value = target;
+    }
+  });
+  const suggestionGhost = (current, suggestion) => {
+    const edit = suggestion.textEdit;
+    if (!edit) {
+      return {
+        at: current.context.end,
+        text: suggestion.text.slice(current.context.text.length)
+      };
+    }
+    if (edit.end !== current.context.end) return undefined;
+    const replacing = localValue().slice(edit.start, edit.end);
+    if (!edit.text.toLowerCase().startsWith(replacing.toLowerCase())) {
+      return undefined;
+    }
+    return {
+      at: edit.end,
+      text: edit.text.slice(replacing.length)
+    };
+  };
+  createEffect(() => {
+    if (!preview) {
+      if (overlayFrame !== undefined) cancelAnimationFrame(overlayFrame);
+      overlayFrame = undefined;
+      renderPendingOverlay = undefined;
+      overlayInitialized = false;
+      return;
+    }
+    const value = localValue();
+    const highlighter = props.highlight ?? plainTextHighlight;
+    const current = state();
+    const active = activeSuggestion();
+    const ghost = current && active ? suggestionGhost(current, active) : undefined;
+    const anchor = current ? {
+      at: current.context.start
+    } : undefined;
+    renderPendingOverlay = () => {
+      if (!preview) return;
+      preview.innerHTML = renderWithOverlay(value, highlighter, {
+        ghost,
+        anchor
+      });
+      if (textarea) {
+        preview.scrollTop = textarea.scrollTop;
+        preview.scrollLeft = textarea.scrollLeft;
+      }
+      if (dropdown?.matches(":popover-open")) positionDropdown();
+    };
+    if (!overlayInitialized) {
+      overlayInitialized = true;
+      renderPendingOverlay();
+      renderPendingOverlay = undefined;
+      return;
+    }
+    if (overlayFrame !== undefined) return;
+    overlayFrame = requestAnimationFrame(() => {
+      overlayFrame = undefined;
+      const render = renderPendingOverlay;
+      renderPendingOverlay = undefined;
+      render?.();
+    });
+  });
+  const closeDropdown = () => {
+    if (dropdown?.matches(":popover-open")) dropdown.hidePopover();
+    setDropdownOpen(false);
+  };
+  const clearCompletion = () => {
+    currentAbort?.abort();
+    currentAbort = null;
+    if (currentTimer) clearTimeout(currentTimer);
+    currentTimer = null;
+    setState(null);
+    setLoading(false);
+    setCompletionError(null);
+    closeDropdown();
+  };
+  const positionDropdown = () => {
+    if (!dropdown?.isConnected || !textarea?.isConnected) return;
+    const anchor = preview?.querySelector("[data-completion-anchor]");
+    const rect = anchor?.getBoundingClientRect() ?? textarea.getBoundingClientRect();
+    const maxHeight = 260;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openAbove = spaceBelow < maxHeight && rect.top > spaceBelow;
+    const width = Math.min(280, window.innerWidth - 16);
+    const left = Math.min(rect.left, window.innerWidth - width - 8);
+    dropdown.style.setProperty("left", `${Math.max(8, left)}px`, "important");
+    dropdown.style.setProperty("width", `${width}px`, "important");
+    if (openAbove) {
+      dropdown.style.setProperty("top", "auto", "important");
+      dropdown.style.setProperty("bottom", `${window.innerHeight - rect.top + 4}px`, "important");
+    } else {
+      dropdown.style.setProperty("top", `${rect.bottom + 4}px`, "important");
+      dropdown.style.setProperty("bottom", "auto", "important");
+    }
+    if (!dropdown.matches(":popover-open")) dropdown.showPopover();
+  };
+  const isAbortError = error => error instanceof DOMException ? error.name === "AbortError" : Boolean(error && typeof error === "object" && "name" in error && error.name === "AbortError");
+  const applySuggestionList = (context, suggestions) => {
+    const currentText = localValue();
+    const normalized = context.text.toLowerCase();
+    const usable = suggestions.filter(suggestion => {
+      if (suggestion.textEdit) {
+        const {
+          start,
+          end,
+          text
+        } = suggestion.textEdit;
+        return Number.isInteger(start) && Number.isInteger(end) && start >= 0 && end >= start && end <= currentText.length && currentText.slice(start, end) !== text;
+      }
+      return suggestion.text.toLowerCase().startsWith(normalized) && suggestion.text.length > context.text.length;
+    });
+    if (usable.length === 0) {
+      clearCompletion();
+      return;
+    }
+    const previous = activeSuggestion()?.text;
+    const retained = previous ? usable.findIndex(suggestion => suggestion.text === previous) : -1;
+    setState({
+      context,
+      suggestions: usable,
+      selectedIndex: retained >= 0 ? retained : 0
+    });
+    if (context.completion.dropdown) {
+      setDropdownOpen(true);
+      queueMicrotask(positionDropdown);
+    } else {
+      closeDropdown();
+    }
+  };
+  const runAsync = async (context, promise, signal) => {
+    try {
+      const suggestions = await promise;
+      if (signal.aborted) return;
+      setLoading(false);
+      applySuggestionList(context, suggestions);
+    } catch (error) {
+      if (signal.aborted || isAbortError(error)) return;
+      setLoading(false);
+      setCompletionError(error instanceof Error ? error.message : messages().suggestionsCouldNotLoad);
+      setDropdownOpen(true);
+      queueMicrotask(positionDropdown);
+    }
+  };
+  const startResolution = (context, signal) => {
+    if (signal.aborted || !textarea) return;
+    setCompletionError(null);
+    setLoading(true);
+    setDropdownOpen(true);
+    queueMicrotask(positionDropdown);
+    try {
+      const result = resolveSuggestions(context.completion, context.query, buildSuggestContext(textarea, context), signal);
+      if (result.kind === "sync") {
+        setLoading(false);
+        applySuggestionList(context, result.data);
+      } else {
+        void runAsync(context, result.promise, signal);
+      }
+    } catch (error) {
+      if (signal.aborted || isAbortError(error)) return;
+      setLoading(false);
+      setCompletionError(error instanceof Error ? error.message : messages().suggestionsCouldNotLoad);
+      setDropdownOpen(true);
+      queueMicrotask(positionDropdown);
+    }
+  };
+  const recomputeCompletion = () => {
+    if (!textarea) return;
+    const context = detectQuery(textarea, props.completions);
+    if (!context) {
+      clearCompletion();
+      return;
+    }
+    currentAbort?.abort();
+    if (currentTimer) clearTimeout(currentTimer);
+    currentTimer = null;
+    currentAbort = new AbortController();
+    const current = state();
+    if (current && (current.context.start !== context.start || current.context.end !== context.end || current.context.text !== context.text || current.context.completion !== context.completion)) {
+      setState(null);
+      closeDropdown();
+    }
+    setCompletionError(null);
+    const delay = Math.max(0, context.completion.debounceMs ?? 0);
+    if (delay === 0) {
+      startResolution(context, currentAbort.signal);
+    } else {
+      setLoading(false);
+      if (!state()) closeDropdown();
+      const signal = currentAbort.signal;
+      currentTimer = setTimeout(() => {
+        currentTimer = null;
+        startResolution(context, signal);
+      }, delay);
+    }
+  };
+  const retryCompletion = () => {
+    if (!textarea) return;
+    const context = detectQuery(textarea, props.completions);
+    if (!context) return clearCompletion();
+    currentAbort?.abort();
+    if (currentTimer) clearTimeout(currentTimer);
+    currentTimer = null;
+    currentAbort = new AbortController();
+    startResolution(context, currentAbort.signal);
+  };
+  const activateSuggestion = (index = state()?.selectedIndex ?? -1) => {
+    const current = state();
+    const active = current?.suggestions[index];
+    if (!textarea || !current || !active) return false;
+    if (!active.textEdit && active.text === current.context.text) {
+      clearCompletion();
+      return false;
+    }
+    const applied = completionBehavior.applySuggestion(textarea, current.context, active, {
+      trackExpansion: props.restoreExpansionOnBackspace ?? true
+    });
+    clearCompletion();
+    if (applied) queueMicrotask(recomputeCompletion);
+    return applied;
+  };
+  const moveSelection = direction => {
+    const current = state();
+    if (!current || current.suggestions.length === 0) return;
+    setState({
+      ...current,
+      selectedIndex: (current.selectedIndex + direction + current.suggestions.length) % current.suggestions.length
+    });
+  };
+  onMount(() => {
+    const selectionChange = () => {
+      if (document.activeElement === textarea) recomputeCompletion();
+    };
+    // Reposition an OPEN popover only. Calling `positionDropdown` blindly
+    // would `showPopover()` a dropdown that is deliberately closed (a
+    // ghost-only completion keeps state without a dropdown).
+    const reposition = () => {
+      if (dropdown?.matches(":popover-open")) positionDropdown();
+    };
+    document.addEventListener("selectionchange", selectionChange);
+    window.addEventListener("resize", reposition);
+    onCleanup(() => {
+      document.removeEventListener("selectionchange", selectionChange);
+      window.removeEventListener("resize", reposition);
+      if (dropdown?.matches(":popover-open")) dropdown.hidePopover();
+      currentAbort?.abort();
+      if (currentTimer) clearTimeout(currentTimer);
+      if (overlayFrame !== undefined) cancelAnimationFrame(overlayFrame);
+      overlayFrame = undefined;
+      renderPendingOverlay = undefined;
+      completionBehavior.reset();
+    });
+  });
+  const onInput = event => {
+    if (event.inputType.startsWith("insert") && completionBehavior.tryExpand(event.currentTarget, props.completions)) {
+      return;
+    }
+    setLocalValue(event.currentTarget.value);
+    props.onValueChange?.(event.currentTarget.value);
+    recomputeCompletion();
+  };
+  const onKeyDown = event => {
+    if (!textarea || event.isComposing) return;
+    if ((props.restoreExpansionOnBackspace ?? true) && event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey && completionBehavior.tryRestore(textarea)) {
+      event.preventDefault();
+      return;
+    }
+    const current = state();
+    const dropdownCompletion = current?.context.completion.dropdown === true;
+    if (current && dropdownCompletion && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      moveSelection(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+      if (current && dropdownCompletion && dropdownOpen()) {
+        event.preventDefault();
+        activateSuggestion();
+        return;
+      }
+      if (props.singleLine) {
+        event.preventDefault();
+        props.onSubmit?.();
+        return;
+      }
+    }
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && !props.singleLine && props.onSubmit) {
+      event.preventDefault();
+      props.onSubmit();
+      return;
+    }
+    if (event.key === "Tab" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && current) {
+      event.preventDefault();
+      activateSuggestion();
+      return;
+    }
+    if (event.key === "Escape") {
+      if (current) {
+        event.preventDefault();
+        clearCompletion();
+      } else if ((props.completions?.length ?? 0) > 0) {
+        event.preventDefault();
+        textarea.blur();
+      }
+    }
+  };
+  const surfaceStyle = () => ({
+    "--k2b-editor-lines": String(props.lines ?? 3)
+  });
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    get fill() {
+      return _$memo(() => !!props.fill)() && !props.singleLine;
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$4),
+        _el$2 = _el$.firstChild,
+        _el$6 = _el$2.firstChild,
+        [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
+        _el$4 = _el$7.nextSibling,
+        _el$5 = _el$4.nextSibling,
+        _el$15 = _el$2.nextSibling,
+        [_el$16, _co$5] = _$getNextMarker(_el$15.nextSibling);
+      _$insert(_el$2, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!!localValue())() && props.placeholder;
+        },
+        get children() {
+          var _el$3 = _$getNextElement(_tmpl$);
+          _$insert(_el$3, () => props.placeholder);
+          return _el$3;
+        }
+      }), _el$7, _co$);
+      var _ref$ = preview;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$4) : preview = _el$4;
+      _el$5.addEventListener("blur", event => {
+        const next = event.relatedTarget;
+        if (next && dropdown?.contains(next)) return;
+        completionBehavior.reset();
+        clearCompletion();
+      });
+      _el$5.addEventListener("compositionend", () => setComposing(false));
+      _el$5.addEventListener("compositionstart", () => setComposing(true));
+      _el$5.addEventListener("scroll", event => {
+        if (preview) {
+          preview.scrollTop = event.currentTarget.scrollTop;
+          preview.scrollLeft = event.currentTarget.scrollLeft;
+        }
+        if (dropdown?.matches(":popover-open")) positionDropdown();
+      });
+      _el$5.$$keydown = onKeyDown;
+      _el$5.addEventListener("change", event => props.onValueCommit?.(event.currentTarget.value));
+      _el$5.$$input = onInput;
+      _$use(element => {
+        textarea = element;
+        props.textareaRef?.(element);
+      }, _el$5);
+      _$spread(_el$5, _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        get name() {
+          return props.name;
+        },
+        get disabled() {
+          return props.disabled;
+        },
+        get required() {
+          return props.required;
+        },
+        get spellcheck() {
+          return props.spellcheck ?? false;
+        },
+        get maxLength() {
+          return props.maxLength;
+        },
+        get rows() {
+          return _$memo(() => !!props.singleLine)() ? 1 : props.lines ?? 3;
+        }
+      }, () => fieldControlAria(meta, props), {
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "list",
+        get ["aria-controls"]() {
+          return dropdownOpen() ? listboxId : undefined;
+        },
+        get ["aria-activedescendant"]() {
+          return _$memo(() => !!(dropdownOpen() && state()))() ? optionId(state().selectedIndex) : undefined;
+        }
+      }), false, false);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return state() || loading() || completionError();
+        },
+        get children() {
+          var _el$8 = _$getNextElement(_tmpl$3),
+            _el$9 = _el$8.firstChild,
+            _el$1 = _el$9.firstChild,
+            [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling),
+            _el$11 = _el$10.nextSibling,
+            [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling),
+            _el$13 = _el$12.nextSibling,
+            [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling);
+          var _ref$2 = dropdown;
+          typeof _ref$2 === "function" ? _$use(_ref$2, _el$8) : dropdown = _el$8;
+          _$setAttribute(_el$9, "id", listboxId);
+          _$insert(_el$9, _$createComponent(Show, {
+            get when() {
+              return loading();
+            },
+            get children() {
+              return _$getNextElement(_tmpl$2);
+            }
+          }), _el$10, _co$2);
+          _$insert(_el$9, _$createComponent(Show, {
+            get when() {
+              return completionError();
+            },
+            children: message => (() => {
+              var _el$17 = _$getNextElement(_tmpl$5),
+                _el$18 = _el$17.firstChild,
+                _el$19 = _el$18.nextSibling,
+                _el$20 = _el$19.nextSibling;
+              _$insert(_el$19, message);
+              _el$20.$$click = retryCompletion;
+              _el$20.$$mousedown = event => event.preventDefault();
+              _$insert(_el$20, () => messages().retry);
+              _$runHydrationEvents();
+              return _el$17;
+            })()
+          }), _el$12, _co$3);
+          _$insert(_el$9, _$createComponent(For, {
+            get each() {
+              return state()?.suggestions ?? [];
+            },
+            children: (suggestion, index) => // biome-ignore lint/a11y/useKeyWithClickEvents: the owning textarea handles keyboard activation through aria-activedescendant.
+            (() => {
+              var _el$21 = _$getNextElement(_tmpl$6),
+                _el$22 = _el$21.firstChild,
+                _el$23 = _el$22.nextSibling,
+                [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling);
+              _el$21.$$click = () => {
+                activateSuggestion(index());
+                textarea?.focus();
+              };
+              _el$21.$$mousedown = event => {
+                event.preventDefault();
+              };
+              _el$21.addEventListener("mouseenter", () => {
+                const current = state();
+                if (current) {
+                  setState({
+                    ...current,
+                    selectedIndex: index()
+                  });
+                }
+              });
+              _$insert(_el$22, () => displayLabel(suggestion, state().context.completion));
+              _$insert(_el$21, _$createComponent(Show, {
+                get when() {
+                  return suggestion.hint;
+                },
+                children: hint => (() => {
+                  var _el$25 = _$getNextElement(_tmpl$7);
+                  _$insert(_el$25, hint);
+                  return _el$25;
+                })()
+              }), _el$24, _co$6);
+              _$effect(_p$ => {
+                var _v$0 = optionId(index()),
+                  _v$1 = index() === state()?.selectedIndex,
+                  _v$10 = loading() ? "true" : undefined;
+                _v$0 !== _p$.e && _$setAttribute(_el$21, "id", _p$.e = _v$0);
+                _v$1 !== _p$.t && _$setAttribute(_el$21, "aria-selected", _p$.t = _v$1);
+                _v$10 !== _p$.a && _$setAttribute(_el$21, "data-loading", _p$.a = _v$10);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              _$runHydrationEvents();
+              return _el$21;
+            })()
+          }), _el$14, _co$4);
+          _$effect(_p$ => {
+            var _v$ = messages().completionSuggestions,
+              _v$2 = messages().suggestions;
+            _v$ !== _p$.e && _$setAttribute(_el$8, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setAttribute(_el$9, "aria-label", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$8;
+        }
+      }), _el$16, _co$5);
+      _$effect(_p$ => {
+        var _v$3 = useOverlay() ? "true" : undefined,
+          _v$4 = props.singleLine ? "true" : undefined,
+          _v$5 = props.fill && !props.singleLine ? "true" : undefined,
+          _v$6 = props.disabled ? "true" : undefined,
+          _v$7 = error() ? "true" : undefined,
+          _v$8 = props.variant === "paper" ? "paper" : undefined,
+          _v$9 = surfaceStyle();
+        _v$3 !== _p$.e && _$setAttribute(_el$, "data-overlay", _p$.e = _v$3);
+        _v$4 !== _p$.t && _$setAttribute(_el$, "data-single-line", _p$.t = _v$4);
+        _v$5 !== _p$.a && _$setAttribute(_el$, "data-fill", _p$.a = _v$5);
+        _v$6 !== _p$.o && _$setAttribute(_el$, "data-disabled", _p$.o = _v$6);
+        _v$7 !== _p$.i && _$setAttribute(_el$, "data-invalid", _p$.i = _v$7);
+        _v$8 !== _p$.n && _$setAttribute(_el$, "data-variant", _p$.n = _v$8);
+        _p$.s = _$style(_el$, _v$9, _p$.s);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined
+      });
+      _$runHydrationEvents();
+      return _el$;
+    }
+  });
+}
+export { abbreviations } from "./completion";
+_$delegateEvents(["input", "keydown", "mousedown", "click"]);
+//# sourceMappingURL=AutocompleteEditor.js.map