@cloudscape-design/components 3.0.0

package/tabs/tab-header-bar.js

@@ -0,0 +1,217 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { InternalButton } from '../button/internal';
+import useFocusVisible from '../internal/hooks/focus-visible';
+import { useContainerQuery } from '../internal/hooks/container-queries';
+import { KeyCode } from '../internal/keycode';
+import { onPaginationClick, hasHorizontalOverflow, hasLeftOverflow, hasRightOverflow, scrollIntoView, } from './scroll-utils';
+import { isPlainLeftClick } from '../internal/events';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+export function TabHeaderBar(_a) {
+    var _b, _c, _d;
+    var onChange = _a.onChange, activeTabId = _a.activeTabId, tabs = _a.tabs, variant = _a.variant, idNamespace = _a.idNamespace, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby;
+    var focusVisible = useFocusVisible();
+    var headerBarRef = useRef(null);
+    var activeTabHeaderRef = useRef(null);
+    var leftOverflowButton = useRef(null);
+    var isVisualRefresh = useVisualRefresh(headerBarRef);
+    var _e = useContainerQuery(function (rect) { return rect.width; }), widthChange = _e[0], containerRef = _e[1];
+    var tabRefs = useRef(new Map());
+    var _f = useState(false), horizontalOverflow = _f[0], setHorizontalOverflow = _f[1];
+    var _g = useState(false), leftOverflow = _g[0], setLeftOverflow = _g[1];
+    var _h = useState(false), rightOverflow = _h[0], setRightOverflow = _h[1];
+    useEffect(function () {
+        if (headerBarRef.current) {
+            setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));
+            setLeftOverflow(hasLeftOverflow(headerBarRef.current));
+            setRightOverflow(hasRightOverflow(headerBarRef.current));
+        }
+    }, [widthChange, tabs]);
+    var scrollIntoViewIfPossible = function (smooth) {
+        if (!activeTabId) {
+            return;
+        }
+        var activeTabRef = tabRefs.current.get(activeTabId);
+        if (activeTabRef && headerBarRef.current) {
+            scrollIntoView(activeTabRef, headerBarRef.current, smooth);
+        }
+    };
+    useEffect(function () {
+        // Delay scrollIntoView as the position is depending on parent elements
+        // (effects are called inside-out in the component tree).
+        // Wait one frame to allow parents to complete it's calculation.
+        requestAnimationFrame(function () {
+            scrollIntoViewIfPossible(false);
+        });
+        // Non-smooth scrolling should not be called upon activeId change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [horizontalOverflow, widthChange, tabs.length]);
+    useEffect(function () {
+        scrollIntoViewIfPossible(true);
+        // Smooth scrolling should only be called upon activeId change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeTabId]);
+    useEffect(function () {
+        var _a, _b;
+        /*
+         When the selected tab changes and we are currently already focused on a tab,
+         move the focus to the newly selected tab.
+        */
+        if ((_a = headerBarRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) {
+            if (document.activeElement !== activeTabHeaderRef.current) {
+                (_b = activeTabHeaderRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+            }
+        }
+    }, [activeTabId]);
+    var onScroll = function () {
+        if (headerBarRef.current) {
+            setLeftOverflow(hasLeftOverflow(headerBarRef.current));
+            setRightOverflow(hasRightOverflow(headerBarRef.current));
+        }
+    };
+    var classes = clsx((_b = {},
+        _b[styles['tabs-header']] = true,
+        _b[styles['tabs-header-with-divider']] = variant === 'default' || isVisualRefresh,
+        _b));
+    var leftButtonClasses = clsx((_c = {},
+        _c[styles['pagination-button']] = true,
+        _c[styles['pagination-button-left']] = true,
+        _c[styles['pagination-button-left-scrollable']] = leftOverflow,
+        _c));
+    var rightButtonClasses = clsx((_d = {},
+        _d[styles['pagination-button']] = true,
+        _d[styles['pagination-button-right']] = true,
+        _d[styles['pagination-button-right-scrollable']] = rightOverflow,
+        _d));
+    var paginationButtonAttributes = {
+        'aria-hidden': true,
+        tabIndex: -1
+    };
+    return (React.createElement("span", { className: classes, ref: containerRef },
+        horizontalOverflow && (React.createElement("span", { ref: leftOverflowButton, className: leftButtonClasses },
+            React.createElement(InternalButton, { variant: "icon", iconName: "angle-left", __nativeAttributes: paginationButtonAttributes, disabled: !leftOverflow, onClick: function () { return onPaginationClick(headerBarRef, -1); } }))),
+        React.createElement("ul", { role: "tablist", className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll }, tabs.map(renderTabHeader)),
+        horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
+            React.createElement(InternalButton, { variant: "icon", iconName: "angle-right", __nativeAttributes: paginationButtonAttributes, disabled: !rightOverflow, onClick: function () { return onPaginationClick(headerBarRef, 1); } })))));
+    function renderTabHeader(tab) {
+        var _a;
+        var enabledTabsWithCurrentTab = tabs.filter(function (tab) { return !tab.disabled || tab.id === activeTabId; });
+        var highlightTab = function (enabledTabIndex) {
+            var tab = enabledTabsWithCurrentTab[enabledTabIndex];
+            if (tab.id === activeTabId) {
+                return;
+            }
+            onChange({ activeTabId: tab.id, activeTabHref: tab.href });
+        };
+        var handleKeyDown = function (event) {
+            var keyCode = event.keyCode;
+            var specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
+            if (specialKeys.indexOf(keyCode) === -1) {
+                return;
+            }
+            event.preventDefault();
+            var activeIndex = enabledTabsWithCurrentTab.indexOf(tab);
+            switch (keyCode) {
+                case KeyCode.right:
+                    if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {
+                        highlightTab(0);
+                    }
+                    else {
+                        highlightTab(activeIndex + 1);
+                    }
+                    return;
+                case KeyCode.left:
+                    if (activeIndex === 0) {
+                        highlightTab(enabledTabsWithCurrentTab.length - 1);
+                    }
+                    else {
+                        highlightTab(activeIndex - 1);
+                    }
+                    return;
+                case KeyCode.end:
+                    highlightTab(enabledTabsWithCurrentTab.length - 1);
+                    return;
+                case KeyCode.home:
+                    highlightTab(0);
+                    return;
+                case KeyCode.pageDown:
+                    if (rightOverflow) {
+                        onPaginationClick(headerBarRef, 1);
+                    }
+                    return;
+                case KeyCode.pageUp:
+                    if (leftOverflow) {
+                        onPaginationClick(headerBarRef, -1);
+                    }
+                    return;
+            }
+        };
+        var clickTab = function (event) {
+            if (tab.disabled) {
+                event.preventDefault();
+                return;
+            }
+            // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab
+            var specialKey = !isPlainLeftClick(event);
+            if (specialKey && tab.href) {
+                return;
+            }
+            event.preventDefault();
+            // for browsers that do not focus buttons on button click
+            if (!tab.href) {
+                var clickedTabRef = tabRefs.current.get(tab.id);
+                if (clickedTabRef) {
+                    var childElement = clickedTabRef.firstChild;
+                    if (childElement && childElement !== document.activeElement) {
+                        childElement.focus({ preventScroll: true });
+                    }
+                }
+            }
+            if (tab.id === activeTabId) {
+                return;
+            }
+            onChange({ activeTabId: tab.id, activeTabHref: tab.href });
+        };
+        var classes = clsx((_a = {},
+            _a[styles['tabs-tab-link']] = true,
+            _a[styles.refresh] = isVisualRefresh,
+            _a[styles['tabs-tab-active']] = activeTabId === tab.id && !tab.disabled,
+            _a[styles['tabs-tab-disabled']] = tab.disabled,
+            _a));
+        var commonProps = __assign(__assign({ className: classes }, focusVisible), { role: 'tab', 'aria-selected': tab.id === activeTabId, 'aria-controls': "".concat(idNamespace, "-").concat(tab.id, "-panel"), 'data-testid': tab.id, children: React.createElement("span", { className: styles['tabs-tab-label'] }, tab.label) });
+        if (tab.disabled) {
+            commonProps['aria-disabled'] = 'true';
+        }
+        else {
+            commonProps.onClick = clickTab;
+        }
+        if (tab.id === activeTabId) {
+            commonProps.ref = activeTabHeaderRef;
+            commonProps.tabIndex = 0;
+            commonProps.onKeyDown = function (event) { return handleKeyDown(event); };
+        }
+        else {
+            commonProps.tabIndex = -1;
+        }
+        var trigger = null;
+        if (tab.href) {
+            var anchorProps = commonProps;
+            anchorProps.href = tab.href;
+            trigger = React.createElement("a", __assign({}, anchorProps));
+        }
+        else {
+            var buttonProps = commonProps;
+            buttonProps.type = 'button';
+            if (tab.disabled) {
+                buttonProps.disabled = true;
+            }
+            trigger = React.createElement("button", __assign({}, buttonProps));
+        }
+        return (React.createElement("li", { ref: function (element) { return tabRefs.current.set(tab.id, element); }, className: styles['tabs-tab'], role: "presentation", key: tab.id }, trigger));
+    }
+}
+//# sourceMappingURL=tab-header-bar.js.map

package/tabs/tab-header-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasLeftOverflow,\n  hasRightOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n}: TabHeaderBarProps) {\n  const focusVisible = useFocusVisible();\n\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const leftOverflowButton = useRef<HTMLElement>(null);\n\n  const isVisualRefresh = useVisualRefresh(headerBarRef);\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [leftOverflow, setLeftOverflow] = useState(false);\n  const [rightOverflow, setRightOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && headerBarRef.current) {\n      scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: leftOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: rightOverflow,\n  });\n\n  const paginationButtonAttributes = {\n    'aria-hidden': true,\n    tabIndex: -1,\n  };\n\n  return (\n    <span className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={leftOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!leftOverflow}\n            onClick={() => onPaginationClick(headerBarRef, -1)}\n          />\n        </span>\n      )}\n      <ul\n        role=\"tablist\"\n        className={styles['tabs-header-list']}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        ref={headerBarRef}\n        onScroll={onScroll}\n      >\n        {tabs.map(renderTabHeader)}\n      </ul>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!rightOverflow}\n            onClick={() => onPaginationClick(headerBarRef, 1)}\n          />\n        </span>\n      )}\n    </span>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n    const highlightTab = function (enabledTabIndex: number) {\n      const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const handleKeyDown = function (\n      event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n    ) {\n      const { keyCode } = event;\n      const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n      if (specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n      switch (keyCode) {\n        case KeyCode.right:\n          if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n            highlightTab(0);\n          } else {\n            highlightTab(activeIndex + 1);\n          }\n          return;\n        case KeyCode.left:\n          if (activeIndex === 0) {\n            highlightTab(enabledTabsWithCurrentTab.length - 1);\n          } else {\n            highlightTab(activeIndex - 1);\n          }\n          return;\n        case KeyCode.end:\n          highlightTab(enabledTabsWithCurrentTab.length - 1);\n          return;\n        case KeyCode.home:\n          highlightTab(0);\n          return;\n        case KeyCode.pageDown:\n          if (rightOverflow) {\n            onPaginationClick(headerBarRef, 1);\n          }\n          return;\n        case KeyCode.pageUp:\n          if (leftOverflow) {\n            onPaginationClick(headerBarRef, -1);\n          }\n          return;\n      }\n    };\n\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id);\n        if (clickedTabRef) {\n          const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n          if (childElement && childElement !== document.activeElement) {\n            childElement.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      ...focusVisible,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    if (tab.id === activeTabId) {\n      commonProps.ref = activeTabHeaderRef;\n      commonProps.tabIndex = 0;\n      commonProps.onKeyDown = (\n        event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n      ) => handleKeyDown(event);\n    } else {\n      commonProps.tabIndex = -1;\n    }\n\n    let trigger = null;\n    if (tab.href) {\n      const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n      anchorProps.href = tab.href;\n      trigger = <a {...anchorProps} />;\n    } else {\n      const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n      buttonProps.type = 'button';\n      if (tab.disabled) {\n        buttonProps.disabled = true;\n      }\n      trigger = <button {...buttonProps} />;\n    }\n\n    return (\n      <li\n        ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n        className={styles['tabs-tab']}\n        role=\"presentation\"\n        key={tab.id}\n      >\n        {trigger}\n      </li>\n    );\n  }\n}\n"]}

package/tag-editor/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TagEditorProps } from './interfaces';
+export { TagEditorProps };
+declare const TagEditor: React.ForwardRefExoticComponent<TagEditorProps & React.RefAttributes<TagEditorProps.Ref>>;
+export default TagEditor;
+//# sourceMappingURL=index.d.ts.map

package/tag-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tag-editor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAgBlG,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAS1B,QAAA,MAAM,SAAS,2FAgPd,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/tag-editor/index.js

@@ -0,0 +1,153 @@
+import { __assign, __rest, __spreadArray } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import { useStableEventHandler } from '../internal/hooks/use-stable-event-handler';
+import InternalAttributeEditor from '../attribute-editor/internal';
+import InternalStatusIndicator from '../status-indicator/internal';
+import InternalBox from '../box/internal';
+import { FormFieldError } from '../form-field/internal';
+import { TagControl, UndoButton } from './internal';
+import { validate } from './validation';
+import { findIndex, useMemoizedArray } from './utils';
+import styles from './styles.css.js';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+var isItemRemovable = function (_a) {
+    var tag = _a.tag;
+    return !tag.markedForRemoval;
+};
+var TagEditor = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.tags, tags = _d === void 0 ? [] : _d, i18nStrings = _a.i18nStrings, _e = _a.loading, loading = _e === void 0 ? false : _e, _f = _a.tagLimit, tagLimit = _f === void 0 ? 50 : _f, allowedCharacterPattern = _a.allowedCharacterPattern, keysRequest = _a.keysRequest, valuesRequest = _a.valuesRequest, onChange = _a.onChange, restProps = __rest(_a, ["tags", "i18nStrings", "loading", "tagLimit", "allowedCharacterPattern", "keysRequest", "valuesRequest", "onChange"]);
+    var baseComponentProps = useBaseComponent('TagEditor');
+    var remainingTags = tagLimit - tags.filter(function (tag) { return !tag.markedForRemoval; }).length;
+    var attributeEditorRef = useRef(null);
+    var keyInputRefs = useRef([]);
+    var valueInputRefs = useRef([]);
+    var undoButtonRefs = useRef([]);
+    var initialKeyOptionsRef = useRef([]);
+    var keyDirtyStateRef = useRef([]);
+    var focusEventRef = useRef();
+    useLayoutEffect(function () {
+        var _a;
+        (_a = focusEventRef.current) === null || _a === void 0 ? void 0 : _a.apply(undefined);
+        focusEventRef.current = undefined;
+    });
+    var errors = validate(tags, keyDirtyStateRef.current, i18nStrings, allowedCharacterPattern ? new RegExp(allowedCharacterPattern) : undefined);
+    var internalTags = useMemoizedArray(tags.map(function (tag, i) { return ({ tag: tag, error: errors[i] }); }), function (prev, next) {
+        var _a, _b, _c, _d;
+        return prev.tag === next.tag && ((_a = prev.error) === null || _a === void 0 ? void 0 : _a.key) === ((_b = next.error) === null || _b === void 0 ? void 0 : _b.key) && ((_c = prev.error) === null || _c === void 0 ? void 0 : _c.value) === ((_d = next.error) === null || _d === void 0 ? void 0 : _d.value);
+    });
+    useImperativeHandle(ref, function () { return ({
+        focus: function () {
+            var _a, _b;
+            var errorIndex = findIndex(internalTags, function (_a) {
+                var error = _a.error;
+                return (error === null || error === void 0 ? void 0 : error.key) || (error === null || error === void 0 ? void 0 : error.value);
+            });
+            if (errorIndex !== -1) {
+                var refArray = ((_a = internalTags[errorIndex].error) === null || _a === void 0 ? void 0 : _a.key) ? keyInputRefs : valueInputRefs;
+                (_b = refArray.current[errorIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }); }, [internalTags]);
+    var validateAndFire = useCallback(function (newTags) {
+        fireNonCancelableEvent(onChange, {
+            tags: newTags,
+            valid: !validate(newTags, keyDirtyStateRef.current, i18nStrings, allowedCharacterPattern ? new RegExp(allowedCharacterPattern) : undefined).some(function (error) { return error; })
+        });
+    }, [onChange, i18nStrings, allowedCharacterPattern]);
+    var onAddButtonClick = function () {
+        validateAndFire(__spreadArray(__spreadArray([], tags, true), [{ key: '', value: '', existing: false }], false));
+        focusEventRef.current = function () {
+            var _a;
+            (_a = keyInputRefs.current[tags.length]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    };
+    var onRemoveButtonClick = useStableEventHandler(function (_a) {
+        var _b;
+        var detail = _a.detail;
+        var existing = tags[detail.itemIndex].existing;
+        validateAndFire(__spreadArray(__spreadArray(__spreadArray([], tags.slice(0, detail.itemIndex), true), (existing ? [__assign(__assign({}, tags[detail.itemIndex]), { markedForRemoval: true })] : []), true), tags.slice(detail.itemIndex + 1), true));
+        if (existing) {
+            focusEventRef.current = function () {
+                var _a;
+                (_a = undoButtonRefs.current[detail.itemIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            };
+        }
+        else {
+            keyDirtyStateRef.current.splice(detail.itemIndex, 1);
+            (_b = keyInputRefs.current[detail.itemIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    });
+    var onKeyChange = useStableEventHandler(function (value, row) {
+        keyDirtyStateRef.current[row] = true;
+        validateAndFire(__spreadArray(__spreadArray(__spreadArray([], tags.slice(0, row), true), [__assign(__assign({}, tags[row]), { key: value })], false), tags.slice(row + 1), true));
+    });
+    var onKeyBlur = useStableEventHandler(function (row) {
+        keyDirtyStateRef.current[row] = true;
+        // Force re-render by providing a new array reference
+        validateAndFire(__spreadArray([], tags, true));
+    });
+    var onValueChange = useStableEventHandler(function (value, row) {
+        validateAndFire(__spreadArray(__spreadArray(__spreadArray([], tags.slice(0, row), true), [__assign(__assign({}, tags[row]), { value: value })], false), tags.slice(row + 1), true));
+    });
+    var onUndoRemoval = useStableEventHandler(function (row) {
+        validateAndFire(__spreadArray(__spreadArray(__spreadArray([], tags.slice(0, row), true), [__assign(__assign({}, tags[row]), { markedForRemoval: false })], false), tags.slice(row + 1), true));
+        focusEventRef.current = function () {
+            var _a;
+            (_a = attributeEditorRef.current) === null || _a === void 0 ? void 0 : _a.focusRemoveButton(row);
+        };
+    });
+    var definition = useMemo(function () { return [
+        {
+            label: i18nStrings.keyHeader,
+            control: function (_a, row) {
+                var tag = _a.tag;
+                return (React.createElement(TagControl, { row: row, value: tag.key, readOnly: tag.existing, limit: 200, defaultOptions: [], placeholder: i18nStrings.keyPlaceholder, errorText: i18nStrings.keysSuggestionError, loadingText: i18nStrings.keysSuggestionLoading, suggestionText: i18nStrings.keySuggestion, tooManySuggestionText: i18nStrings.tooManyKeysSuggestion, enteredTextLabel: i18nStrings.enteredKeyLabel, onRequest: keysRequest, onChange: onKeyChange, onBlur: onKeyBlur, initialOptionsRef: initialKeyOptionsRef, ref: function (ref) {
+                        keyInputRefs.current[row] = ref;
+                    } }));
+            },
+            errorText: function (_a) {
+                var error = _a.error;
+                return error === null || error === void 0 ? void 0 : error.key;
+            }
+        },
+        {
+            label: (React.createElement(React.Fragment, null,
+                i18nStrings.valueHeader,
+                " - ",
+                React.createElement("i", null, i18nStrings.optional))),
+            control: function (_a, row) {
+                var _b;
+                var tag = _a.tag;
+                return tag.markedForRemoval ? (React.createElement("div", { role: "alert" },
+                    React.createElement(InternalBox, { margin: { top: 'xxs' } },
+                        i18nStrings.undoPrompt,
+                        ' ',
+                        React.createElement(UndoButton, { onClick: function () { return onUndoRemoval(row); }, ref: function (elem) {
+                                undoButtonRefs.current[row] = elem;
+                            } }, i18nStrings.undoButton)))) : (React.createElement(TagControl, { row: row, value: tag.value, readOnly: false, limit: 200, defaultOptions: (_b = tag.valueSuggestionOptions) !== null && _b !== void 0 ? _b : [], placeholder: i18nStrings.valuePlaceholder, errorText: i18nStrings.valuesSuggestionError, loadingText: i18nStrings.valuesSuggestionLoading, suggestionText: i18nStrings.valueSuggestion, tooManySuggestionText: i18nStrings.tooManyValuesSuggestion, enteredTextLabel: i18nStrings.enteredValueLabel, filteringKey: tag.key, onRequest: valuesRequest && (function (value) { return valuesRequest(tag.key, value); }), onChange: onValueChange, ref: function (ref) {
+                        valueInputRefs.current[row] = ref;
+                    } }));
+            },
+            errorText: function (_a) {
+                var error = _a.error;
+                return error === null || error === void 0 ? void 0 : error.value;
+            }
+        },
+    ]; }, [i18nStrings, keysRequest, onKeyChange, onKeyBlur, valuesRequest, onValueChange, onUndoRemoval]);
+    if (loading) {
+        return (React.createElement("div", { className: styles.root, ref: baseComponentProps.__internalRootRef },
+            React.createElement(InternalStatusIndicator, { className: styles.loading, type: "loading" }, i18nStrings.loading)));
+    }
+    var baseProps = getBaseProps(restProps);
+    return (React.createElement(InternalAttributeEditor, __assign({}, baseProps, baseComponentProps, { ref: attributeEditorRef, className: clsx(styles.root, baseProps.className), items: internalTags, isItemRemovable: isItemRemovable, onAddButtonClick: onAddButtonClick, onRemoveButtonClick: onRemoveButtonClick, addButtonText: i18nStrings.addButton, removeButtonText: i18nStrings.removeButton, disableAddButton: remainingTags <= 0, empty: i18nStrings.emptyTags, additionalInfo: React.createElement("div", { "aria-live": "polite" }, remainingTags < 0 ? (React.createElement(FormFieldError, null, (_b = i18nStrings.tagLimitExceeded(tagLimit)) !== null && _b !== void 0 ? _b : '')) : remainingTags === 0 ? ((_c = i18nStrings.tagLimitReached(tagLimit)) !== null && _c !== void 0 ? _c : '') : (i18nStrings.tagLimit(remainingTags))), definition: definition })));
+});
+applyDisplayName(TagEditor, 'TagEditor');
+export default TagEditor;
+//# sourceMappingURL=index.js.map

package/tag-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tag-editor/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent, NonCancelableCustomEvent } from '../internal/events';\nimport { useStableEventHandler } from '../internal/hooks/use-stable-event-handler';\n\nimport { InputProps } from '../input/interfaces';\nimport { AutosuggestProps } from '../autosuggest/interfaces';\nimport { AttributeEditorProps } from '../attribute-editor/interfaces';\nimport InternalAttributeEditor from '../attribute-editor/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport InternalBox from '../box/internal';\nimport { FormFieldError } from '../form-field/internal';\n\nimport { TagControl, UndoButton } from './internal';\nimport { TagEditorProps } from './interfaces';\nimport { validate, ValidationError } from './validation';\nimport { findIndex, useMemoizedArray } from './utils';\n\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { TagEditorProps };\n\ninterface InternalTag {\n  tag: TagEditorProps.Tag;\n  error?: ValidationError;\n}\n\nconst isItemRemovable = ({ tag }: InternalTag) => !tag.markedForRemoval;\n\nconst TagEditor = React.forwardRef(\n  (\n    {\n      tags = [],\n      i18nStrings,\n      loading = false,\n      tagLimit = 50,\n      allowedCharacterPattern,\n      keysRequest,\n      valuesRequest,\n      onChange,\n      ...restProps\n    }: TagEditorProps,\n    ref: React.Ref<TagEditorProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('TagEditor');\n\n    const remainingTags = tagLimit - tags.filter(tag => !tag.markedForRemoval).length;\n\n    const attributeEditorRef = useRef<AttributeEditorProps.Ref>(null);\n    const keyInputRefs = useRef<(InputProps.Ref | undefined | null)[]>([]);\n    const valueInputRefs = useRef<(InputProps.Ref | undefined | null)[]>([]);\n    const undoButtonRefs = useRef<(HTMLAnchorElement | undefined | null)[]>([]);\n\n    const initialKeyOptionsRef = useRef<AutosuggestProps.Options>([]);\n    const keyDirtyStateRef = useRef<boolean[]>([]);\n    const focusEventRef = useRef<() => void>();\n\n    useLayoutEffect(() => {\n      focusEventRef.current?.apply(undefined);\n      focusEventRef.current = undefined;\n    });\n\n    const errors = validate(\n      tags,\n      keyDirtyStateRef.current,\n      i18nStrings,\n      allowedCharacterPattern ? new RegExp(allowedCharacterPattern) : undefined\n    );\n\n    const internalTags = useMemoizedArray(\n      tags.map((tag, i) => ({ tag, error: errors[i] })),\n      (prev, next) => {\n        return prev.tag === next.tag && prev.error?.key === next.error?.key && prev.error?.value === next.error?.value;\n      }\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        focus() {\n          const errorIndex = findIndex(internalTags, ({ error }) => error?.key || error?.value);\n          if (errorIndex !== -1) {\n            const refArray = internalTags[errorIndex].error?.key ? keyInputRefs : valueInputRefs;\n            refArray.current[errorIndex]?.focus();\n          }\n        },\n      }),\n      [internalTags]\n    );\n\n    const validateAndFire = useCallback(\n      (newTags: ReadonlyArray<TagEditorProps.Tag>) => {\n        fireNonCancelableEvent(onChange, {\n          tags: newTags,\n          valid: !validate(\n            newTags,\n            keyDirtyStateRef.current,\n            i18nStrings,\n            allowedCharacterPattern ? new RegExp(allowedCharacterPattern) : undefined\n          ).some(error => error),\n        });\n      },\n      [onChange, i18nStrings, allowedCharacterPattern]\n    );\n\n    const onAddButtonClick = () => {\n      validateAndFire([...tags, { key: '', value: '', existing: false }]);\n      focusEventRef.current = () => {\n        keyInputRefs.current[tags.length]?.focus();\n      };\n    };\n\n    const onRemoveButtonClick = useStableEventHandler(\n      ({ detail }: NonCancelableCustomEvent<AttributeEditorProps.RemoveButtonClickDetail>) => {\n        const existing = tags[detail.itemIndex].existing;\n        validateAndFire([\n          ...tags.slice(0, detail.itemIndex),\n          ...(existing ? [{ ...tags[detail.itemIndex], markedForRemoval: true }] : []),\n          ...tags.slice(detail.itemIndex + 1),\n        ]);\n        if (existing) {\n          focusEventRef.current = () => {\n            undoButtonRefs.current[detail.itemIndex]?.focus();\n          };\n        } else {\n          keyDirtyStateRef.current.splice(detail.itemIndex, 1);\n          keyInputRefs.current[detail.itemIndex]?.focus();\n        }\n      }\n    );\n\n    const onKeyChange = useStableEventHandler((value: string, row: number) => {\n      keyDirtyStateRef.current[row] = true;\n      validateAndFire([...tags.slice(0, row), { ...tags[row], key: value }, ...tags.slice(row + 1)]);\n    });\n\n    const onKeyBlur = useStableEventHandler((row: number) => {\n      keyDirtyStateRef.current[row] = true;\n      // Force re-render by providing a new array reference\n      validateAndFire([...tags]);\n    });\n\n    const onValueChange = useStableEventHandler((value: string, row: number) => {\n      validateAndFire([...tags.slice(0, row), { ...tags[row], value }, ...tags.slice(row + 1)]);\n    });\n\n    const onUndoRemoval = useStableEventHandler((row: number) => {\n      validateAndFire([...tags.slice(0, row), { ...tags[row], markedForRemoval: false }, ...tags.slice(row + 1)]);\n      focusEventRef.current = () => {\n        attributeEditorRef.current?.focusRemoveButton(row);\n      };\n    });\n\n    const definition = useMemo(\n      () => [\n        {\n          label: i18nStrings.keyHeader,\n          control: ({ tag }: InternalTag, row: number) => (\n            <TagControl\n              row={row}\n              value={tag.key}\n              readOnly={tag.existing}\n              limit={200}\n              defaultOptions={[]}\n              placeholder={i18nStrings.keyPlaceholder}\n              errorText={i18nStrings.keysSuggestionError}\n              loadingText={i18nStrings.keysSuggestionLoading}\n              suggestionText={i18nStrings.keySuggestion}\n              tooManySuggestionText={i18nStrings.tooManyKeysSuggestion}\n              enteredTextLabel={i18nStrings.enteredKeyLabel}\n              onRequest={keysRequest}\n              onChange={onKeyChange}\n              onBlur={onKeyBlur}\n              initialOptionsRef={initialKeyOptionsRef}\n              ref={ref => {\n                keyInputRefs.current[row] = ref;\n              }}\n            />\n          ),\n          errorText: ({ error }: InternalTag) => error?.key,\n        },\n        {\n          label: (\n            <>\n              {i18nStrings.valueHeader} - <i>{i18nStrings.optional}</i>\n            </>\n          ),\n          control: ({ tag }: InternalTag, row: number) =>\n            tag.markedForRemoval ? (\n              <div role=\"alert\">\n                <InternalBox margin={{ top: 'xxs' }}>\n                  {i18nStrings.undoPrompt}{' '}\n                  <UndoButton\n                    onClick={() => onUndoRemoval(row)}\n                    ref={elem => {\n                      undoButtonRefs.current[row] = elem;\n                    }}\n                  >\n                    {i18nStrings.undoButton}\n                  </UndoButton>\n                </InternalBox>\n              </div>\n            ) : (\n              <TagControl\n                row={row}\n                value={tag.value}\n                readOnly={false}\n                limit={200}\n                defaultOptions={tag.valueSuggestionOptions ?? []}\n                placeholder={i18nStrings.valuePlaceholder}\n                errorText={i18nStrings.valuesSuggestionError}\n                loadingText={i18nStrings.valuesSuggestionLoading}\n                suggestionText={i18nStrings.valueSuggestion}\n                tooManySuggestionText={i18nStrings.tooManyValuesSuggestion}\n                enteredTextLabel={i18nStrings.enteredValueLabel}\n                filteringKey={tag.key}\n                onRequest={valuesRequest && (value => valuesRequest(tag.key, value))}\n                onChange={onValueChange}\n                ref={ref => {\n                  valueInputRefs.current[row] = ref;\n                }}\n              />\n            ),\n          errorText: ({ error }: InternalTag) => error?.value,\n        },\n      ],\n      [i18nStrings, keysRequest, onKeyChange, onKeyBlur, valuesRequest, onValueChange, onUndoRemoval]\n    );\n\n    if (loading) {\n      return (\n        <div className={styles.root} ref={baseComponentProps.__internalRootRef}>\n          <InternalStatusIndicator className={styles.loading} type=\"loading\">\n            {i18nStrings.loading}\n          </InternalStatusIndicator>\n        </div>\n      );\n    }\n\n    const baseProps = getBaseProps(restProps);\n    return (\n      <InternalAttributeEditor<InternalTag>\n        {...baseProps}\n        {...baseComponentProps}\n        ref={attributeEditorRef}\n        className={clsx(styles.root, baseProps.className)}\n        items={internalTags}\n        isItemRemovable={isItemRemovable}\n        onAddButtonClick={onAddButtonClick}\n        onRemoveButtonClick={onRemoveButtonClick}\n        addButtonText={i18nStrings.addButton}\n        removeButtonText={i18nStrings.removeButton}\n        disableAddButton={remainingTags <= 0}\n        empty={i18nStrings.emptyTags}\n        additionalInfo={\n          <div aria-live=\"polite\">\n            {remainingTags < 0 ? (\n              <FormFieldError>{i18nStrings.tagLimitExceeded(tagLimit) ?? ''}</FormFieldError>\n            ) : remainingTags === 0 ? (\n              i18nStrings.tagLimitReached(tagLimit) ?? ''\n            ) : (\n              i18nStrings.tagLimit(remainingTags)\n            )}\n          </div>\n        }\n        definition={definition}\n      />\n    );\n  }\n);\n\napplyDisplayName(TagEditor, 'TagEditor');\nexport default TagEditor;\n"]}

package/tag-editor/interfaces.d.ts

@@ -0,0 +1,124 @@
+import { BaseComponentProps } from '../internal/base-component';
+import { AutosuggestProps } from '../autosuggest/interfaces';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface TagEditorProps extends BaseComponentProps {
+    /**
+     * Specifies an array of tags that are displayed to the user. Each tag item has the following properties:
+     * - `key` (string) - The key of the tag that's displayed in the corresponding key field.
+     * - `value` (string) - The value of the tag that's displayed in the corresponding value field.
+     * - `existing` (boolean) - Specifies if this is an existing tag for the resource.
+     *      When set to `true`, if the tag is deleted its `markedForRemoval` property is to `true`.
+     *      When set to `false`, deletion of the tag removes the tag from the `tags` list.
+     * - `markedForRemoval` (boolean) - Specifies if this tag has been marked for removal.
+     *      This property is set to `true` by the component when a user removes an existing tag.
+     *      The item will remain in the `tags` list. When set to `true`, the user is presented with the option to undo the removal operation.
+     * - `valueSuggestionOptions` (Array<AutosuggestProps.Option>) - An array of autosuggest suggestion options associated with the specified tag key.
+     */
+    tags?: ReadonlyArray<TagEditorProps.Tag>;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     */
+    i18nStrings: TagEditorProps.I18nStrings;
+    /**
+     * Renders the component in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the maximum number of tags that a customer can add.
+     */
+    tagLimit?: number;
+    /**
+     * Specifies a regular expression string that overrides the default acceptable
+     * character validation. You should use this property only when absolutely necessary.
+     */
+    allowedCharacterPattern?: string;
+    /**
+     * Specifies a function that returns all the keys for a resource.
+     * The expected return type of the function should be a promise that
+     * resolves to a list of strings of all the keys (for example, `['key1', 'key2']`).
+     */
+    keysRequest?: (key: string) => Promise<ReadonlyArray<string>>;
+    /**
+     * Specifies a function that returns all the values for a specified key
+     * of a resource. The expected return type of the function should be a promise
+     * that resolves to a list of strings of all the values (for example, `['value1', 'value2']`).
+     *
+     * You should return a rejected promise when the `key` parameter is an empty string.
+     */
+    valuesRequest?: (key: string, value: string) => Promise<ReadonlyArray<string>>;
+    /**
+     * Called when any tag operation occurs.
+     * The event `detail` object contains the full updated state of `tags`,
+     * and whether the component is in a `valid` state.
+     */
+    onChange?: NonCancelableEventHandler<TagEditorProps.ChangeDetail>;
+}
+export declare namespace TagEditorProps {
+    interface Tag {
+        /**
+         * The key of the tag that will be displayed in the corresponding key field.
+         */
+        key: string;
+        /**
+         * The value of the tag that will be displayed in the corresponding value field.
+         */
+        value: string;
+        /**
+         * Whether this is an existing tag for the resource. If set to `true`, deletion of the tag will set the `markedForRemoval` property to `true`. If set to `false`, deletion of the tag will remove the tag from the `tags` list.
+         */
+        existing: boolean;
+        /**
+         * Whether this tag has been marked for removal. This property will be set to `true` by the component when a user tries to remove an existing tag. The item will remain in the `tags` list. When set to `true`, the user will be presented with the option to undo the removal operation.
+         */
+        markedForRemoval?: boolean;
+        /**
+         * An array of suggested values for the specified tag key.
+         */
+        valueSuggestionOptions?: ReadonlyArray<AutosuggestProps.Option>;
+    }
+    interface I18nStrings {
+        keyPlaceholder: string;
+        valuePlaceholder: string;
+        addButton: string;
+        removeButton: string;
+        undoButton: string;
+        undoPrompt: string;
+        loading: string;
+        keyHeader: string;
+        valueHeader: string;
+        optional: string;
+        keySuggestion: string;
+        valueSuggestion: string;
+        tooManyKeysSuggestion: string;
+        tooManyValuesSuggestion: string;
+        emptyTags: string;
+        keysSuggestionLoading: string;
+        keysSuggestionError: string;
+        valuesSuggestionError: string;
+        valuesSuggestionLoading: string;
+        emptyKeyError: string;
+        maxKeyCharLengthError: string;
+        maxValueCharLengthError: string;
+        duplicateKeyError: string;
+        invalidKeyError: string;
+        invalidValueError: string;
+        awsPrefixError: string;
+        tagLimit: (availableTags: number) => string;
+        tagLimitReached: (tagLimit: number) => string;
+        tagLimitExceeded: (tagLimit: number) => string;
+        enteredKeyLabel: (enteredText: string) => string;
+        enteredValueLabel: (enteredText: string) => string;
+    }
+    interface ChangeDetail {
+        tags: ReadonlyArray<TagEditorProps.Tag>;
+        valid: boolean;
+    }
+    interface Ref {
+        /**
+         * Focuses the first error within the component.
+         * If no error is present, no element is focused.
+         */
+        focus(): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/tag-editor/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tag-editor/interfaces.tsx"],"names":[],"mappings":"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"}

package/tag-editor/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/tag-editor/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tag-editor/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { AutosuggestProps } from '../autosuggest/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TagEditorProps extends BaseComponentProps {\n  /**\n   * Specifies an array of tags that are displayed to the user. Each tag item has the following properties:\n   * - `key` (string) - The key of the tag that's displayed in the corresponding key field.\n   * - `value` (string) - The value of the tag that's displayed in the corresponding value field.\n   * - `existing` (boolean) - Specifies if this is an existing tag for the resource.\n   *      When set to `true`, if the tag is deleted its `markedForRemoval` property is to `true`.\n   *      When set to `false`, deletion of the tag removes the tag from the `tags` list.\n   * - `markedForRemoval` (boolean) - Specifies if this tag has been marked for removal.\n   *      This property is set to `true` by the component when a user removes an existing tag.\n   *      The item will remain in the `tags` list. When set to `true`, the user is presented with the option to undo the removal operation.\n   * - `valueSuggestionOptions` (Array<AutosuggestProps.Option>) - An array of autosuggest suggestion options associated with the specified tag key.\n   */\n  tags?: ReadonlyArray<TagEditorProps.Tag>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings: TagEditorProps.I18nStrings;\n\n  /**\n   * Renders the component in a loading state.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the maximum number of tags that a customer can add.\n   */\n  tagLimit?: number;\n\n  /**\n   * Specifies a regular expression string that overrides the default acceptable\n   * character validation. You should use this property only when absolutely necessary.\n   */\n  allowedCharacterPattern?: string;\n\n  /**\n   * Specifies a function that returns all the keys for a resource.\n   * The expected return type of the function should be a promise that\n   * resolves to a list of strings of all the keys (for example, `['key1', 'key2']`).\n   */\n  keysRequest?: (key: string) => Promise<ReadonlyArray<string>>;\n\n  /**\n   * Specifies a function that returns all the values for a specified key\n   * of a resource. The expected return type of the function should be a promise\n   * that resolves to a list of strings of all the values (for example, `['value1', 'value2']`).\n   *\n   * You should return a rejected promise when the `key` parameter is an empty string.\n   */\n  valuesRequest?: (key: string, value: string) => Promise<ReadonlyArray<string>>;\n\n  /**\n   * Called when any tag operation occurs.\n   * The event `detail` object contains the full updated state of `tags`,\n   * and whether the component is in a `valid` state.\n   */\n  onChange?: NonCancelableEventHandler<TagEditorProps.ChangeDetail>;\n}\n\nexport namespace TagEditorProps {\n  export interface Tag {\n    /**\n     * The key of the tag that will be displayed in the corresponding key field.\n     */\n    key: string;\n\n    /**\n     * The value of the tag that will be displayed in the corresponding value field.\n     */\n    value: string;\n\n    /**\n     * Whether this is an existing tag for the resource. If set to `true`, deletion of the tag will set the `markedForRemoval` property to `true`. If set to `false`, deletion of the tag will remove the tag from the `tags` list.\n     */\n    existing: boolean;\n\n    /**\n     * Whether this tag has been marked for removal. This property will be set to `true` by the component when a user tries to remove an existing tag. The item will remain in the `tags` list. When set to `true`, the user will be presented with the option to undo the removal operation.\n     */\n    markedForRemoval?: boolean;\n\n    /**\n     * An array of suggested values for the specified tag key.\n     */\n    valueSuggestionOptions?: ReadonlyArray<AutosuggestProps.Option>;\n  }\n\n  export interface I18nStrings {\n    keyPlaceholder: string;\n    valuePlaceholder: string;\n    addButton: string;\n    removeButton: string;\n    undoButton: string;\n    undoPrompt: string;\n    loading: string;\n    keyHeader: string;\n    valueHeader: string;\n    optional: string;\n    keySuggestion: string;\n    valueSuggestion: string;\n    tooManyKeysSuggestion: string;\n    tooManyValuesSuggestion: string;\n    emptyTags: string;\n    keysSuggestionLoading: string;\n    keysSuggestionError: string;\n    valuesSuggestionError: string;\n    valuesSuggestionLoading: string;\n    emptyKeyError: string;\n    maxKeyCharLengthError: string;\n    maxValueCharLengthError: string;\n    duplicateKeyError: string;\n    invalidKeyError: string;\n    invalidValueError: string;\n    awsPrefixError: string;\n    tagLimit: (availableTags: number) => string;\n    tagLimitReached: (tagLimit: number) => string;\n    tagLimitExceeded: (tagLimit: number) => string;\n    enteredKeyLabel: (enteredText: string) => string;\n    enteredValueLabel: (enteredText: string) => string;\n  }\n\n  export interface ChangeDetail {\n    tags: ReadonlyArray<TagEditorProps.Tag>;\n    valid: boolean;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the first error within the component.\n     * If no error is present, no element is focused.\n     */\n    focus(): void;\n  }\n}\n"]}