@esri/calcite-components 5.2.0-next.5 → 5.2.0-next.50

package/dist/chunks/label.js

@@ -1,146 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { q as queryElementRoots, c as closestElementCrossShadowBoundary, p as isBefore } from "./dom.js";
-const labelClickEvent = "calciteInternalLabelClick";
-const labelConnectedEvent = "calciteInternalLabelConnected";
-const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
-const labelTagName = "calcite-label";
-const labelToLabelables = /* @__PURE__ */ new WeakMap();
-const onLabelClickMap = /* @__PURE__ */ new WeakMap();
-const onLabelConnectedMap = /* @__PURE__ */ new WeakMap();
-const onLabelDisconnectedMap = /* @__PURE__ */ new WeakMap();
-const unlabeledComponents = /* @__PURE__ */ new Set();
-const findLabelForComponent = (componentEl) => {
-  const { id } = componentEl;
-  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
-  if (forLabel) {
-    return forLabel;
-  }
-  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
-  if (!parentLabel || // labelable components within other custom elements are not considered labelable
-  hasAncestorCustomElements(parentLabel, componentEl)) {
-    return null;
-  }
-  return parentLabel;
-};
-function hasAncestorCustomElements(label, componentEl) {
-  let traversedElements;
-  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
-  const listener = ((event) => {
-    event.stopImmediatePropagation();
-    const composedPath = event.composedPath();
-    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
-  });
-  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
-  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
-  label.removeEventListener(customElementAncestorCheckEventType, listener);
-  const ancestorCustomElements = traversedElements.filter((el) => el !== componentEl && el !== label).filter((el) => el.tagName?.includes("-"));
-  return ancestorCustomElements.length > 0;
-}
-function connectLabel(component) {
-  if (!component) {
-    return;
-  }
-  const labelEl = findLabelForComponent(component.el);
-  if (labelEl && onLabelClickMap.has(labelEl) && labelEl === component.labelEl || !labelEl && unlabeledComponents.has(component)) {
-    return;
-  }
-  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
-  if (labelEl) {
-    component.labelEl = labelEl;
-    const labelables = labelToLabelables.get(labelEl) || [];
-    labelables.push(component);
-    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
-    if (!onLabelClickMap.has(component.labelEl)) {
-      onLabelClickMap.set(component.labelEl, onLabelClick);
-      component.labelEl.addEventListener(labelClickEvent, onLabelClick);
-    }
-    unlabeledComponents.delete(component);
-    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
-    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
-  } else if (!unlabeledComponents.has(component)) {
-    boundOnLabelDisconnected();
-    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
-  }
-}
-function disconnectLabel(component) {
-  if (!component) {
-    return;
-  }
-  unlabeledComponents.delete(component);
-  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
-  onLabelConnectedMap.delete(component);
-  onLabelDisconnectedMap.delete(component);
-  if (!component.labelEl) {
-    return;
-  }
-  const labelables = labelToLabelables.get(component.labelEl);
-  if (labelables.length === 1) {
-    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
-    onLabelClickMap.delete(component.labelEl);
-  }
-  labelToLabelables.set(
-    component.labelEl,
-    labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder)
-  );
-  component.labelEl = void 0;
-}
-function sortByDOMOrder(a, b) {
-  return isBefore(a.el, b.el) ? -1 : 1;
-}
 function getLabelText(component) {
   return component.label || component.labelEl?.textContent?.trim() || "";
 }
-function onLabelClick(event) {
-  const labelClickTarget = event.detail.sourceEvent.target;
-  const labelables = labelToLabelables.get(this);
-  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
-  const labelableChildClicked = clickedLabelable && labelables.includes(clickedLabelable);
-  if (labelableChildClicked) {
-    return;
-  }
-  const firstLabelable = labelables[0];
-  if (firstLabelable.disabled) {
-    return;
-  }
-  firstLabelable.onLabelClick(event);
-}
-function onLabelConnected() {
-  if (unlabeledComponents.has(this)) {
-    connectLabel(this);
-  }
-}
-function onLabelDisconnected() {
-  unlabeledComponents.add(this);
-  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
-  onLabelConnectedMap.set(this, boundOnLabelConnected);
-  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
-}
-async function associateExplicitLabelToUnlabeledComponent(label) {
-  await label.componentOnReady();
-  const alreadyLabeled = labelToLabelables.has(label);
-  if (alreadyLabeled) {
-    return;
-  }
-  const forComponentEl = label.for && label.ownerDocument?.getElementById(label.for);
-  if (!forComponentEl) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    for (const labelable of unlabeledComponents) {
-      if (labelable.el === forComponentEl) {
-        connectLabel(labelable);
-        break;
-      }
-    }
-  });
-}
 export {
-  associateExplicitLabelToUnlabeledComponent as a,
-  labelDisconnectedEvent as b,
-  connectLabel as c,
-  disconnectLabel as d,
-  getLabelText as g,
-  labelConnectedEvent as l
+  getLabelText as g
 };

package/dist/chunks/locale.js

@@ -275,7 +275,7 @@ class NumberStringFormat {
     this._group = this._actualGroup.trim().length === 0 || this._actualGroup == " " ? " " : this._actualGroup;
     this._decimal = options.locale === "bs" || options.locale === "mk" ? "," : parts.find((d) => d.type === "decimal").value;
     this._minusSign = parts.find((d) => d.type === "minusSign").value;
-    this._getDigitIndex = (d) => index.get(d);
+    this._getDigitIndex = (d) => `${index.get(d) ?? ""}`;
   }
   #normalizeDigitsAndSign(value) {
     return value.replace(new RegExp(`[${this._minusSign}]`, "g"), "-").replace(new RegExp(`[${this._digits.join("")}]`, "g"), this._getDigitIndex);

package/dist/chunks/manager.js

@@ -1,6 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
-import { q as queryElementRoots, v as getShadowRootNode, j as isPrimaryPointerButton, x as isKeyboardTriggeredClick } from "./dom.js";
+import { t as queryElementRoots, y as getShadowRootNode, l as isPrimaryPointerButton, z as isKeyboardTriggeredClick } from "./dom.js";
+import { l as logger } from "./runtime.js";
 import { i as isActivationKey } from "./key.js";
 import { t as toAriaBoolean } from "./aria.js";
 const useReferenceElement = (options) => {
@@ -38,7 +39,7 @@ const useReferenceElement = (options) => {
       component.referenceEl = getReferenceElement(component);
       const { el, referenceElement, referenceEl } = component;
       if (warn && referenceElement && !referenceEl) {
-        console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
+        logger.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
           el
         });
       }
@@ -171,7 +172,7 @@ const referenceElementManager = (options) => {
     clearHoverCloseTimeout();
   };
   const pathHasOpenHoverComponent = (components, composedPath) => {
-    return activeComponents?.some((component) => component?.open && composedPath.includes(component.el)) || components?.some((component) => component?.open && composedPath.includes(component.el));
+    return !!(activeComponents?.some((component) => component?.open && composedPath.includes(component.el)) || components?.some((component) => component?.open && composedPath.includes(component.el)));
   };
   const toggleHoverComponents = (components, open) => {
     components?.forEach((component) => component.open = open);
@@ -476,8 +477,8 @@ const referenceElementManager = (options) => {
       clearHoverTimeout();
     }
     if (options.click && "ariaControlsElements" in referenceEl) {
-      const newElements = referenceEl.ariaControlsElements?.filter((element) => element !== component.el);
-      referenceEl.ariaControlsElements = newElements?.length > 0 ? newElements : null;
+      const newElements = (referenceEl.ariaControlsElements ?? []).filter((element) => element !== component.el);
+      referenceEl.ariaControlsElements = newElements.length > 0 ? newElements : null;
     }
     if (options.click && "ariaExpanded" in referenceEl) {
       const hasRegisteredComponents = (updatedComponents?.length ?? 0) > 0;
@@ -489,8 +490,8 @@ const referenceElementManager = (options) => {
       }
     }
     if (options.hover && "ariaDescribedByElements" in referenceEl) {
-      const newElements = referenceEl.ariaDescribedByElements?.filter((element) => element !== component.el);
-      referenceEl.ariaDescribedByElements = newElements?.length > 0 ? newElements : null;
+      const newElements = (referenceEl.ariaDescribedByElements ?? []).filter((element) => element !== component.el);
+      referenceEl.ariaDescribedByElements = newElements.length > 0 ? newElements : null;
     }
   };
   return {

package/dist/chunks/math.js

@@ -3,7 +3,7 @@ const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
 const decimalPlaces = (value) => {
   const match = ("" + value).match(decimalNumberRegex);
-  if (!match || parseInt(match[1]) === 0) {
+  if (!match || parseInt(match[1], 10) === 0) {
     return 0;
   }
   return Math.max(

package/dist/chunks/openCloseComponent.js

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { o as whenTransitionDone } from "./dom.js";
+import { q as whenTransitionDone } from "./dom.js";
 function isOpen(component) {
   return component[component.openProp || "open"];
 }

package/dist/chunks/resources.js

@@ -3,7 +3,6 @@ const CSS = {
   button: "button",
   buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
-  indicatorText: "indicator-text",
   iconContainer: "icon-container",
   slotContainer: "slot-container",
   slotContainerHidden: "slot-container--hidden",

package/dist/chunks/resources2.js

@@ -1,24 +1,20 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-const CSS = {
-  menu: "menu",
-  defaultTrigger: "default-trigger"
-};
-const idPrefix = "calcite-action-menu";
-const IDS = {
-  button: (id) => `${idPrefix}-${id}-menu-button`,
-  menu: (id) => `${idPrefix}-${id}-menu`,
-  action: (id, actionId) => `${idPrefix}-${id}-action-${actionId}`
-};
 const SLOTS = {
-  tooltip: "tooltip",
-  trigger: "trigger"
+  menuActions: "menu-actions",
+  menuTooltip: "menu-tooltip"
 };
 const ICONS = {
   menu: "ellipsis"
 };
+const CSS = {
+  container: "container"
+};
+function isActionGroup(el) {
+  return el?.tagName === "CALCITE-ACTION-GROUP";
+}
 export {
   CSS as C,
-  IDS as I,
+  ICONS as I,
   SLOTS as S,
-  ICONS as a
+  isActionGroup as i
 };

package/dist/chunks/resources3.js

@@ -1,20 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+const CSS = {
+  menu: "menu",
+  defaultTrigger: "default-trigger"
+};
+const idPrefix = "calcite-action-menu";
+const IDS = {
+  button: (id) => `${idPrefix}-${id}-menu-button`,
+  menu: (id) => `${idPrefix}-${id}-menu`,
+  action: (id, actionId) => `${idPrefix}-${id}-action-${actionId}`
+};
 const SLOTS = {
-  menuActions: "menu-actions",
-  menuTooltip: "menu-tooltip"
+  tooltip: "tooltip",
+  trigger: "trigger"
 };
 const ICONS = {
   menu: "ellipsis"
 };
-const CSS = {
-  container: "container"
-};
-function isActionGroup(el) {
-  return el?.tagName === "CALCITE-ACTION-GROUP";
+function isActionMenu(el) {
+  return el?.tagName === "CALCITE-ACTION-MENU";
 }
 export {
   CSS as C,
-  ICONS as I,
+  IDS as I,
   SLOTS as S,
-  isActionGroup as i
+  ICONS as a,
+  isActionMenu as i
 };

package/dist/chunks/resources5.js

@@ -11,6 +11,7 @@ const CSS = {
   contentEnd: "content-end",
   contentStart: "content-start",
   description: "description",
+  hasSlottedContent: "has-slotted-content",
   header: "header",
   headerContainer: "header-container",
   headerHasContent: "header--has-content",
@@ -31,6 +32,7 @@ const SLOTS = {
   actionsEnd: "actions-end",
   contentEnd: "content-end",
   contentStart: "content-start",
+  children: "children",
   headerMenuActions: "header-menu-actions"
 };
 const ICONS = {

package/dist/chunks/responsive.js

@@ -1,7 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { d as calciteContainerSizeWidthXxs, e as calciteContainerSizeWidthXs, f as calciteContainerSizeWidthSm, g as calciteContainerSizeWidthMd } from "./global.js";
+import { calciteContainerSizeWidthXxs, calciteContainerSizeWidthXs, calciteContainerSizeWidthSm, calciteContainerSizeWidthMd, calciteContainerSizeWidthLg } from "@esri/calcite-design-tokens/dist/es6/global.js";
 const breakpoints = {
   width: {
+    large: cssLengthToNumber(calciteContainerSizeWidthLg.max),
     medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),
     small: cssLengthToNumber(calciteContainerSizeWidthSm.max),
     xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),
@@ -9,7 +10,7 @@ const breakpoints = {
   }
 };
 function cssLengthToNumber(length) {
-  return parseInt(length);
+  return parseInt(length, 10);
 }
 export {
   breakpoints as b

package/dist/chunks/runtime.js

@@ -14,7 +14,8 @@ const CSS_UTILITY = {
   calciteAnimateInUp: "calcite-animate__in-up",
   calciteAnimateInDown: "calcite-animate__in-down",
   calciteAnimateInRight: "calcite-animate__in-right",
-  calciteAnimateInLeft: "calcite-animate__in-left"
+  calciteAnimateInLeft: "calcite-animate__in-left",
+  screenReaderText: "screen-reader-text"
 };
 const DEBOUNCE = {
   filter: 250,
@@ -43,6 +44,51 @@ function initModeChangeEvent() {
     attributeFilter: ["class"]
   });
 }
+const loggedDeprecations = /* @__PURE__ */ new Set();
+const logLevels = {
+  trace: 0,
+  debug: 1,
+  info: 2,
+  warn: 4,
+  error: 8,
+  off: 10
+};
+function willLog(level) {
+  return level !== "off" && logLevels[level] >= logLevels[getConfig().logLevel];
+}
+function forwardToConsole(level, ...data) {
+  if (!willLog(level)) {
+    return;
+  }
+  const badgeTemplate = "%ccalcite";
+  const badgeStyle = "background: #007AC2; color: #fff; border-radius: 4px; padding: 2px 4px;";
+  console[level](badgeTemplate, badgeStyle, ...data);
+}
+let listFormatter;
+const logger = {
+  debug: (message, ...data) => forwardToConsole("debug", message, ...data),
+  info: (message, ...data) => forwardToConsole("info", message, ...data),
+  warn: (message, ...data) => forwardToConsole("warn", message, ...data),
+  error: (message, ...data) => forwardToConsole("error", message, ...data),
+  trace: (message, ...data) => forwardToConsole("trace", message, ...data),
+  deprecated
+};
+function deprecated(context, { component, name, suggested, removalVersion }) {
+  const key = `${context}:${context === "component" ? "" : component}${name}`;
+  const removalVersionText = removalVersion === "future" ? `a future version` : `v${removalVersion}`;
+  if (loggedDeprecations.has(key)) {
+    return;
+  }
+  loggedDeprecations.add(key);
+  let message = "";
+  message = context === "component" ? `This component is deprecated and will be removed in ${removalVersionText}.` : `The [${name}] ${context} is deprecated and will be removed in ${removalVersionText}.`;
+  if (suggested) {
+    listFormatter = new Intl.ListFormat("en", { style: "long", type: "disjunction" });
+    message += ` Use ${listFormatter.format([suggested].flat().map((suggestion) => `"${suggestion}"`))} instead.`;
+  }
+  const composed = `[${component.el.tagName.toLocaleLowerCase().slice("calcite-".length)}] - ${message}`;
+  forwardToConsole("warn", composed);
+}
 let effectiveConfig = void 0;
 const defaultConfig = {
   focusTrapStack: [],
@@ -60,15 +106,15 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.2.0-next.5";
-const buildDate = "2026-06-23";
-const revision = "d485744b5";
+const version = "5.2.0-next.50";
+const buildDate = "2026-08-13";
+const revision = "53f3794d6";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
     return;
   }
-  console.info(`Using Calcite Components ${version} [Date: ${buildDate}, Revision: ${revision}]`);
+  logger.info(`Using Calcite Components ${version} [Date: ${buildDate}, Revision: ${revision}]`);
   Object.defineProperty(config, "version", {
     value: version,
     writable: false
@@ -85,16 +131,17 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.5/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.50/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,
   DEBOUNCE as D,
-  getConfig as a,
-  resizeShiftStep as b,
+  resizeShiftStep as a,
+  getConfig as b,
   customElement as c,
   resizeStep as d,
   getAssetPath as g,
+  logger as l,
   runtime as r,
   setAssetPath as s
 };

package/dist/chunks/useFocusTrap.js

@@ -1,8 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { createFocusTrap } from "focus-trap";
-import { t as tabbableOptions, i as focusElement } from "./dom.js";
-import { a as getConfig } from "./runtime.js";
+import { v as tabbableOptions, k as focusElement } from "./dom.js";
+import { b as getConfig } from "./runtime.js";
 function getEffectiveContainerElements(targetEl, { focusTrapOptions }, extraContainers) {
   if (!focusTrapOptions?.extraContainers && !extraContainers) {
     return targetEl;

package/dist/chunks/useForm.js

@@ -42,9 +42,10 @@ function validate({
 }) {
   if (!Array.isArray(value)) {
     if (component && input.type === "radio") {
-      let group = component.elementInternals.form?.elements[component.name];
-      if (group?.length > 0) {
-        group = Array.from(group).filter(
+      const item = component.elementInternals.form?.elements.namedItem(component.name);
+      if (item) {
+        const elements = "length" in item ? Array.from(item) : [item];
+        const group = elements.filter(
           (element) => element.tagName === component.el.tagName
         );
         const isRequired = group.some((radioTypeElement) => radioTypeElement.required);
@@ -240,9 +241,10 @@ const useForm = (options) => {
         () => {
           clearValidationMessage(component, validationMessage);
           if (inputDelegate?.type === "radio") {
-            let group = component.elementInternals.form?.elements[component.name];
-            if (group?.length > 0) {
-              group = Array.from(group).filter(
+            const item = component.elementInternals.form?.elements.namedItem(component.name);
+            if (item) {
+              const elements = "length" in item ? Array.from(item) : [item];
+              const group = elements.filter(
                 (element) => element.tagName === component.el.tagName
               );
               const others = group.filter((radioTypeElement) => radioTypeElement !== component.el);

package/dist/chunks/useInlineEditable.js

@@ -0,0 +1,53 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { safeClassMap } from "@arcgis/lumina";
+import { nothing, html } from "lit";
+import { ref } from "lit/directives/ref.js";
+const CSS = {
+  container: "inline-editable--container",
+  enableEditing: "enable-editing",
+  confirmChanges: "confirm-changes",
+  cancelEditing: "cancel-editing"
+};
+const InlineEditableControls = ({ cancelEditingLabel, confirmChangesLabel, editingEnabled, enableEditingLabel, enableEditingButtonRef, loading, onCancelEditing, onConfirmChanges, onEnableEditing, scale, showControls }) => html`<div class=${safeClassMap(CSS.container)}>${!editingEnabled && html`<calcite-action .ariaLabel=${enableEditingLabel} class=${safeClassMap(CSS.enableEditing)} icon=pencil @click=${onEnableEditing} .scale=${scale} .text=${enableEditingLabel} title=${enableEditingLabel ?? nothing} type=button ${ref(enableEditingButtonRef)}></calcite-action>` || ""}${showControls && [
+  html`<calcite-action .ariaLabel=${confirmChangesLabel} class=${safeClassMap(CSS.confirmChanges)} icon=check .loading=${loading} @click=${onConfirmChanges} .scale=${scale} .text=${confirmChangesLabel} title=${confirmChangesLabel ?? nothing} type=button></calcite-action>`,
+  html`<calcite-action .ariaLabel=${cancelEditingLabel} class=${safeClassMap(CSS.cancelEditing)} icon=x @click=${onCancelEditing} .scale=${scale} .text=${cancelEditingLabel} title=${cancelEditingLabel ?? nothing} type=button></calcite-action>`
+] || ""}</div>`;
+class UseInlineEditable {
+  constructor(options) {
+    this.options = options;
+    this.valuePriorToEditing = "";
+  }
+  enable() {
+    this.valuePriorToEditing = this.options.getValue();
+    this.options.setEditingEnabled(true);
+    requestAnimationFrame(() => {
+      this.options.setFocus();
+    });
+    this.options.emitEnableEditingChange();
+  }
+  disable() {
+    this.options.setEditingEnabled(false);
+  }
+  cancelEditing() {
+    this.options.setValue(this.valuePriorToEditing);
+    this.disable();
+    this.options.emitCancel();
+  }
+  async confirm(afterConfirm, setLoading) {
+    this.options.emitConfirm();
+    try {
+      if (afterConfirm) {
+        setLoading?.(true);
+        await afterConfirm();
+        this.disable();
+      }
+    } finally {
+      setLoading?.(false);
+    }
+  }
+}
+export {
+  CSS as C,
+  InlineEditableControls as I,
+  UseInlineEditable as U
+};