@esri/solutions-components 0.8.2 → 0.8.3

package/dist/components/spatial-ref2.js

@@ -5,9 +5,8 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import './solution-resource.js';
-import './index3.js';
-import './interfaces.js';
+import { h as updateItemResource, j as convertItemResourceToStorageResource, S as SolutionTemplateFormatVersion, k as addItemResource, u as updateItem, E as EFileType, l as removeItemResource } from './index3.js';
+import { f as EUpdateType } from './interfaces.js';
 import { d as defineCustomElement$6 } from './checkbox.js';
 import { d as defineCustomElement$5 } from './icon.js';
 import { d as defineCustomElement$4 } from './input.js';
@@ -40,6 +39,266 @@ import { d as defineCustomElement$1 } from './tree-item.js';
 function nodeListToArray(nodeList) {
     return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
+/**
+ * Saves any updated templates to the current solution item
+ *
+ * @param templates the updated templates array
+ * @param thumbnailurl url for the items thumbnail
+ * @param id for the solution item
+ * @param data the current solution items data
+ * @param authentication credentials for the request
+ * @param translations translated strings for messages
+ *
+ * @returns a promise that will resolve with a success true/false response
+ */
+async function save(id, data, models, authentication, translations) {
+    const itemInfo = { id };
+    const params = {
+        text: data
+    };
+    await _updateResources(id, models, data, authentication);
+    // TODO compare data with the source data in the model...should be able to
+    // understand if it has changes
+    // TODO...only update if has changes
+    const updateResults = await updateItem(itemInfo, authentication, undefined, params);
+    return Promise.resolve({
+        success: updateResults.success,
+        message: updateResults.success ? translations.editsSaved : translations.saveFailed
+    });
+}
+/**
+ * Updates the solutions thumbnail and data resources
+ *
+ * @param solutionId id for the solution
+ * @param models the models for the solutions templates
+ * @param data the current data object for the solution
+ * @param authentication credentials for the request
+ *
+ * @returns a promise that will resolve with response results
+ */
+async function _updateResources(solutionId, models, data, authentication) {
+    return new Promise((resolve, reject) => {
+        const promises = [];
+        Object.keys(models).forEach(itemId => {
+            const model = models[itemId];
+            promises.push(_updateThumbnailResource(solutionId, model, data, authentication));
+            _updateFileResources(solutionId, model, data, promises, authentication);
+        });
+        if (promises.length > 0) {
+            Promise.all(promises).then(resolve, reject);
+        }
+        else {
+            resolve({ success: true });
+        }
+    });
+}
+/**
+ * Updates the solutions thumbnail and data resources
+ *
+ * @param solutionId id for the solution
+ * @param model the model for the current solution template
+ * @param authentication credentials for the request
+ *
+ * @returns a promise that will resolve with response results
+ */
+function _updateThumbnailResource(solutionId, model, data, authentication) {
+    return new Promise((resolve, reject) => {
+        if (model.thumbnailNew) {
+            if (model.thumbnailOrigin) {
+                const name = model.thumbnailOrigin.name;
+                const opts = {
+                    id: solutionId,
+                    authentication,
+                    resource: model.thumbnailNew,
+                    name
+                };
+                const resources = model.resources.filter(r => r.endsWith(name));
+                if (resources.length === 1) {
+                    const nameParts = resources[0].split("/");
+                    if (nameParts.length === 2) {
+                        opts.prefix = nameParts[0];
+                    }
+                }
+                updateItemResource(opts).then(resolve, reject);
+            }
+            else {
+                // if the item does not have an origin thumb we need to add rather than update
+                const resourceFilePath = {
+                    type: EFileType.Thumbnail,
+                    folder: null,
+                    filename: model.thumbnailNew.name,
+                    url: "",
+                    blob: model.thumbnailNew,
+                    updateType: EUpdateType.Add
+                };
+                _add(solutionId, model, data, resourceFilePath, authentication, true).then(resolve, reject);
+            }
+        }
+        else {
+            resolve({ success: true });
+        }
+    });
+}
+/**
+ * Updates the solutions data resources
+ *
+ * This function will update the provided promises argument by adding add/remove/update promises
+ *
+ * @param solutionId id for the solution
+ * @param model the model for the current solution template
+ * @param data the current data object for the solution
+ * @param promises list of add/remove/update promises
+ * @param authentication credentials for the request
+ */
+function _updateFileResources(solutionId, model, data, promises, authentication) {
+    // add/remove/update resources
+    model.resourceFilePaths.forEach(resourceFilePath => {
+        switch (resourceFilePath.updateType) {
+            case EUpdateType.Add:
+                promises.push(_add(solutionId, model, data, resourceFilePath, authentication));
+                break;
+            case EUpdateType.Remove:
+                promises.push(_remove(solutionId, model, data, resourceFilePath, authentication));
+                break;
+            case EUpdateType.Update:
+                promises.push(_update(solutionId, model, resourceFilePath, authentication));
+                break;
+            default:
+                break;
+        }
+    });
+}
+/**
+ * Generates add resource request
+ *
+ * @param solutionId id for the solution
+ * @param model the model for the current solution template
+ * @param data the current data object for the solution
+ * @param resourceFilePath resource file info
+ * @param authentication credentials for the request
+ *
+ * @returns a promise that will resolve to a response with success true/false
+ */
+function _add(solutionId, model, data, resourceFilePath, authentication, isThumbnail = false) {
+    return new Promise((resolve, reject) => {
+        const storageName = convertItemResourceToStorageResource(model.itemId + isThumbnail.toString() ? "_info_thumbnail" :
+            (resourceFilePath.blob.name === resourceFilePath.filename
+                ? "_info_data"
+                : "_info_dataz"), resourceFilePath.blob.name, SolutionTemplateFormatVersion);
+        const opts = {
+            id: solutionId,
+            authentication,
+            resource: resourceFilePath.blob,
+            name: storageName.filename,
+            params: {}
+        };
+        if (storageName.folder) {
+            opts.params = {
+                resourcesPrefix: storageName.folder
+            };
+        }
+        addItemResource(opts).then(results => {
+            var _a;
+            if (results.success) {
+                _updateTemplateResourcePaths(data, model.itemId, EUpdateType.Add, ((_a = opts.params) === null || _a === void 0 ? void 0 : _a.resourcesPrefix) ? `${opts.params.resourcesPrefix}/${opts.name}` : opts.name, "");
+            }
+            resolve(results);
+        }, reject);
+    });
+}
+/**
+ * Generates add resource request
+ *
+ * @param solutionId id for the solution
+ * @param model the model for the current solution template
+ * @param data the current data object for the solution
+ * @param resourceFilePath resource file info
+ * @param authentication credentials for the request
+ *
+ * @returns a promise that will resolve to a response with success true/false
+ */
+function _remove(solutionId, model, data, resourceFilePath, authentication) {
+    return new Promise((resolve, reject) => {
+        const name = resourceFilePath.filename;
+        const resources = model.resources.filter(r => r.endsWith(name));
+        if (resources.length > 0) {
+            const opts = {
+                id: solutionId,
+                authentication,
+                resource: resources[0]
+            };
+            removeItemResource(opts).then(results => {
+                if (results.success) {
+                    _updateTemplateResourcePaths(data, model.itemId, EUpdateType.Remove, resources[0], "");
+                }
+                resolve(results);
+            }, reject);
+        }
+        else {
+            resolve({ success: false });
+        }
+    });
+}
+/**
+ * Generates update resource request
+ *
+ * @param solutionId id for the solution
+ * @param model the model for the current solution template
+ * @param resourceFilePath resource file info
+ * @param authentication credentials for the request
+ *
+ * @returns a promise that will resolve to a response with success true/false
+ */
+function _update(solutionId, model, resourceFilePath, authentication) {
+    const sourceFileName = resourceFilePath.sourceFileName;
+    const opts = {
+        id: solutionId,
+        authentication,
+        resource: resourceFilePath.blob,
+        name: sourceFileName
+    };
+    const resources = model.resources.filter(r => r.endsWith(sourceFileName));
+    if (resources.length === 1) {
+        const nameParts = resources[0].split("/");
+        if (nameParts.length === 2) {
+            opts.prefix = nameParts[0];
+        }
+    }
+    return updateItemResource(opts);
+}
+/**
+ * Update the resources paths for a given template
+ *
+ * This function will update the provided data argument with any new or removed resource paths
+ *
+ * @param data the current data object for the solution
+ * @param id the id of the current template
+ * @param updateType add/update/remove
+ * @param path the resource prefix/name
+ * @param sourceFileName from the current resourceFilePath
+ *
+ */
+function _updateTemplateResourcePaths(data, id, updateType, path, sourceFileName) {
+    data.templates = data.templates.map(t => {
+        if (t.itemId === id) {
+            switch (updateType) {
+                case EUpdateType.Add:
+                    t.resources.push(path);
+                    break;
+                case EUpdateType.Update:
+                    t.resources = t.resources.filter(r => r.indexOf(sourceFileName) < 0);
+                    t.resources.push(path);
+                    break;
+                case EUpdateType.Remove:
+                    t.resources = t.resources.filter(r => r.indexOf(path) < 0);
+                    break;
+                default:
+                    break;
+            }
+        }
+        return t;
+    });
+}
 
 /** @license
  * Copyright 2022 Esri
@@ -21377,6 +21636,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(SpatialRef);
 
 export { SpatialRef as S, defineCustomElement as d, nodeListToArray as n };

package/dist/components/stack.js

@@ -104,6 +104,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(Stack);
 
 export { SLOTS as S, Stack as a, defineCustomElement as d };

package/dist/components/store-manager.js

@@ -75,7 +75,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
+defineCustomElement$1(StoreManager$1);
 
 const StoreManager = StoreManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/store.js

@@ -81,6 +81,7 @@ async function getMergedEffect(presetLayerEffect, featureLayerView, type) {
 
 const InteractiveLegendStore = createStore({ data: {}, relationshipRampExpandStates: {} });
 const interactiveLegendState = InteractiveLegendStore.state;
+const onInteractiveLegendChange = InteractiveLegendStore.onChange;
 const store = InteractiveLegendStore;
 
 export { getMergedEffect as g, interactiveLegendState as i, store as s };

package/dist/components/switch.js

@@ -129,6 +129,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(Switch);
 
 export { Switch as S, defineCustomElement as d };

package/dist/components/t9n.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { Build, getAssetPath } from '@stencil/core/internal/client';
+import { getAssetPath, Build } from '@stencil/core/internal/client';
 import { g as getSupportedLocale } from './locale2.js';
 
 /*!

package/dist/components/tab-nav.js

@@ -282,6 +282,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(TabNav);
 
 export { TabNav as T, defineCustomElement as d };

package/dist/components/tab-title.js

@@ -328,6 +328,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(TabTitle);
 
 export { TabTitle as T, defineCustomElement as d };

package/dist/components/tab.js

@@ -125,6 +125,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(Tab);
 
 export { Tab as T, defineCustomElement as d };

package/dist/components/table-cell.js

@@ -185,6 +185,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(TableCell);
 
 export { TableCell as T, defineCustomElement as d };

package/dist/components/table-header.js

@@ -206,6 +206,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(TableHeader);
 
 export { TableHeader as T, defineCustomElement as d };

package/dist/components/tabs.js

@@ -195,6 +195,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(Tabs);
 
 export { Tabs as T, defineCustomElement as d };

package/dist/components/time-picker.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { n as numberKeys } from './key.js';
-import { n as numberStringFormatter, b as getDateTimeFormat, i as isValidNumber, e as getSupportedNumberingSystem, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { e as getSupportedNumberingSystem, b as getDateTimeFormat, n as numberStringFormatter, i as isValidNumber, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { d as decimalPlaces, g as getDecimals } from './math.js';
 import { g as getIconScale } from './component.js';
@@ -1149,6 +1149,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(TimePicker);
 
 export { TimePicker as T, formatTimePart as a, defineCustomElement as d, formatTimeString as f, isValidTime as i, localizeTimeString as l, toISOTimeString as t };

package/dist/components/tooltip.js

@@ -462,6 +462,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(Tooltip);
 
 export { Tooltip as T, defineCustomElement as d };

package/dist/components/tree-item.js

@@ -331,6 +331,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(TreeItem);
 
 export { TreeItem as T, defineCustomElement as d };

package/dist/components/tree.js

@@ -326,6 +326,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(Tree);
 
 export { Tree as T, defineCustomElement as d };

package/dist/components/utils.js

@@ -18,6 +18,11 @@ const opacityToAlpha = (opacity) => Number((opacity / 100).toFixed(2));
 function isValidHex(hex, hasAlpha = false) {
     return isShorthandHex(hex, hasAlpha) || isLonghandHex(hex, hasAlpha);
 }
+function canConvertToHexa(hex) {
+    const validHex = isValidHex(hex, false);
+    const validHexa = isValidHex(hex, true);
+    return !validHexa && validHex;
+}
 function evaluateHex(hex, length, pattern) {
     if (!hex) {
         return false;
@@ -200,4 +205,4 @@ function toNonAlphaMode(mode) {
     return nonAlphaMode;
 }
 
-export { CSSColorMode as C, hexify as a, alphaCompatible as b, alphaToOpacity as c, colorEqual as d, normalizeAlpha as e, normalizeColor as f, toAlphaMode as g, hexToRGB as h, isValidHex as i, isLonghandHex as j, hexChar as k, normalizeHex as n, opacityToAlpha as o, parseMode as p, rgbToHex as r, toNonAlphaMode as t };
+export { CSSColorMode as C, hexify as a, alphaCompatible as b, alphaToOpacity as c, normalizeColor as d, colorEqual as e, toNonAlphaMode as f, normalizeAlpha as g, hexToRGB as h, isValidHex as i, isLonghandHex as j, hexChar as k, normalizeHex as n, opacityToAlpha as o, parseMode as p, rgbToHex as r, toAlphaMode as t };

package/dist/components/utils2.js

@@ -52,4 +52,4 @@ function isSingleLike(selectionMode) {
     return selectionMode.includes("single");
 }
 
-export { CSS as C, ComboboxChildSelector as a, getItemChildren as b, ComboboxItem as c, ComboboxItemGroup as d, getAncestors as e, getDepth as f, getItemAncestors as g, hasActiveChildren as h, isSingleLike as i };
+export { ComboboxItemGroup as C, CSS as a, ComboboxChildSelector as b, getItemChildren as c, ComboboxItem as d, getAncestors as e, getDepth as f, getItemAncestors as g, hasActiveChildren as h, isSingleLike as i };

package/dist/components/utils4.js

@@ -49,6 +49,7 @@ const LanguageTranslatorStore = createStore({
   portalItemResourceT9n: null,
 });
 const languageTranslatorState = LanguageTranslatorStore.state;
+const onLanguageTranslatorChange = LanguageTranslatorStore.onChange;
 const store = LanguageTranslatorStore;
 
 function generateUIData(appSettings, locales) {
@@ -101,6 +102,17 @@ function getUIDataKeys() {
   });
   return settingKeys;
 }
+async function getPortalItemResourceT9nData(resource) {
+  if (!resource)
+    return null;
+  try {
+    const t9nData = await resource.fetch();
+    return Promise.resolve(t9nData);
+  }
+  catch (_a) {
+    return Promise.resolve(null);
+  }
+}
 function getT9nData(locale, data) {
   const portalItemResourceT9n = store.get('portalItemResourceT9n');
   let dataToWrite;

package/dist/components/value-list-item.js

@@ -199,6 +199,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(ValueListItem);
 
 export { ValueListItem as V, defineCustomElement as d };

package/dist/components/value-list.js

@@ -26,6 +26,9 @@ var ICON_TYPES;
 (function (ICON_TYPES) {
     ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
+const TEXT = {
+    filterResults: "Filter results",
+};
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -347,6 +350,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
+defineCustomElement(ValueList);
 
 export { ValueList as V, defineCustomElement as d };

package/dist/esm/ExpandToggle-22fd2faa.js

@@ -0,0 +1,110 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { i as forceUpdate, h } from './index-bdfaac50.js';
+import { a as getElementDir } from './dom-b91aa537.js';
+import { S as SLOTS } from './resources-b0e2b809.js';
+import { S as SLOTS$1 } from './resources-20074cb1.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const overflowActionsDebounceInMs = 150;
+const groupBufferPx = 2;
+const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
+const geActionDimensions = (actions) => {
+    const actionsNotSlotted = actions.filter((action) => action.slot !== SLOTS.menuActions);
+    const actionLen = actionsNotSlotted?.length;
+    return {
+        actionWidth: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientWidth || 0)) : 0,
+        actionHeight: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientHeight || 0)) : 0,
+    };
+};
+const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
+    const maxContainerPx = layout === "horizontal" ? width : height;
+    const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
+    return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
+};
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount, }) => {
+    return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
+};
+const queryActions = (el) => {
+    return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS$1.trigger : true);
+};
+const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
+    let needToSlotCount = overflowCount;
+    actionGroups.reverse().forEach((group) => {
+        let slottedWithinGroupCount = 0;
+        const groupActions = queryActions(group).reverse();
+        groupActions.forEach((groupAction) => {
+            if (groupAction.slot === SLOTS.menuActions) {
+                groupAction.removeAttribute("slot");
+                groupAction.textEnabled = expanded;
+            }
+        });
+        if (needToSlotCount > 0) {
+            groupActions.some((groupAction) => {
+                const unslottedActions = groupActions.filter((action) => !action.slot);
+                if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
+                    groupAction.textEnabled = true;
+                    groupAction.setAttribute("slot", SLOTS.menuActions);
+                    slottedWithinGroupCount++;
+                    if (slottedWithinGroupCount > 1) {
+                        needToSlotCount--;
+                    }
+                }
+                return needToSlotCount < 1;
+            });
+        }
+        forceUpdate(group);
+    });
+};
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const ICONS = {
+    chevronsLeft: "chevrons-left",
+    chevronsRight: "chevrons-right",
+};
+function getCalcitePosition(position, el) {
+    return position || el.closest("calcite-shell-panel")?.position || "start";
+}
+function toggleChildActionText({ el, expanded, }) {
+    queryActions(el)
+        .filter((el) => el.slot !== SLOTS.menuActions)
+        .forEach((action) => (action.textEnabled = expanded));
+    el.querySelectorAll("calcite-action-group, calcite-action-menu").forEach((el) => (el.expanded = expanded));
+}
+const setTooltipReference = ({ tooltip, referenceElement, expanded, ref, }) => {
+    if (tooltip) {
+        tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
+    }
+    if (ref) {
+        ref(referenceElement);
+    }
+    return referenceElement;
+};
+const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position, tooltip, ref, scale, }) => {
+    const rtl = getElementDir(el) === "rtl";
+    const text = expanded ? collapseText : expandText;
+    const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
+    if (rtl) {
+        icons.reverse();
+    }
+    const end = getCalcitePosition(position, el) === "end";
+    const expandIcon = end ? icons[1] : icons[0];
+    const collapseIcon = end ? icons[0] : icons[1];
+    const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, scale: scale, text: text, textEnabled: expanded, title: !expanded && !tooltip ? text : null,
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+        ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }) }));
+    return actionNode;
+};
+
+export { ExpandToggle as E, getOverflowCount as a, overflowActionsDebounceInMs as b, geActionDimensions as g, overflowActions as o, queryActions as q, toggleChildActionText as t };

package/dist/esm/FloatingArrow-de6fd1c7.js

@@ -0,0 +1,48 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { h } from './index-bdfaac50.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    arrow: "calcite-floating-ui-arrow",
+    arrowStroke: "calcite-floating-ui-arrow__stroke",
+};
+const DEFAULTS = {
+    width: 12,
+    height: 6,
+    strokeWidth: 1,
+};
+/**
+ * Renders a SVG element to be used as a floating-ui arrow.
+ *
+ * This functional component should be rendered inside a `FloatingUIComponent` when it needs an arrow element.
+ *
+ * @param floatingLayout.floatingLayout
+ * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.
+ *
+ * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/main/src/utils/floating-ui.ts)
+ * @param floatingLayout.key
+ * @param floatingLayout.ref
+ */
+const FloatingArrow = ({ floatingLayout, key, ref, }) => {
+    const { width, height, strokeWidth } = DEFAULTS;
+    const svgX = width / 2;
+    const isVertical = floatingLayout === "vertical";
+    const dValue = "M0,0" +
+        ` H${width}` +
+        ` L${width - svgX},${height}` +
+        ` Q${svgX},${height} ${svgX},${height}` +
+        " Z";
+    return (h("svg", { "aria-hidden": "true", class: CSS.arrow, height: width, key: key, viewBox: `0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`, width: width + (isVertical ? strokeWidth : 0),
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+        ref: ref }, strokeWidth > 0 && (h("path", { class: CSS.arrowStroke, d: dValue, fill: "none", "stroke-width": strokeWidth + 1 })), h("path", { d: dValue, stroke: "none" })));
+};
+
+export { FloatingArrow as F };