@cloudscape-design/components-themeable 3.0.1 → 3.0.4

package/internal/template/split-panel/index.js

@@ -1,208 +0,0 @@
-import { __assign, __rest } from "tslib";
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
-import clsx from 'clsx';
-import { InternalButton } from '../button/internal';
-import { getBaseProps } from '../internal/base-component';
-import { useSplitPanelContext } from '../internal/context/split-panel-context';
-import useFocusVisible from '../internal/hooks/focus-visible';
-import { applyDisplayName } from '../internal/utils/apply-display-name';
-import ResizeHandler from './icons/resize-handler';
-import PreferencesModal from './preferences-modal';
-import { useMouseEvents } from './utils/use-mouse-events';
-import { useKeyboardEvents } from './utils/use-keyboard-events';
-import styles from './styles.css.js';
-import useBaseComponent from '../internal/hooks/use-base-component';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import { AppLayoutDomContext } from '../internal/context/app-layout-context';
-import { getLimitedValue } from './utils/size-utils';
-import { Transition } from '../internal/components/transition';
-import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
-var MIN_HEIGHT = 160;
-var MIN_WIDTH = 280;
-var TransitionContentSide = function (_a) {
-    var _b, _c;
-    var baseProps = _a.baseProps, isOpen = _a.isOpen, splitPanelRef = _a.splitPanelRef, topOffset = _a.topOffset, bottomOffset = _a.bottomOffset, cappedSize = _a.cappedSize, isRefresh = _a.isRefresh, onToggle = _a.onToggle, i18nStrings = _a.i18nStrings, relativeSize = _a.relativeSize, onKeyDown = _a.onKeyDown, onSliderMouseDown = _a.onSliderMouseDown, focusVisible = _a.focusVisible, toggleRef = _a.toggleRef, paneHeader = _a.paneHeader, wrappedChildren = _a.wrappedChildren;
-    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.drawer, styles.root, styles['position-side'], (_b = {},
-            _b[styles['drawer-closed']] = !isOpen,
-            _b)), ref: splitPanelRef }),
-        React.createElement("aside", { style: {
-                top: topOffset,
-                bottom: bottomOffset,
-                width: isOpen ? cappedSize : undefined,
-                maxWidth: isRefresh ? '100%' : undefined
-            }, className: clsx(styles['drawer-content-side'], (_c = {},
-                _c[styles.refresh] = isRefresh,
-                _c)), onClick: function () { return !isOpen && onToggle(); } },
-            isOpen ? (React.createElement("div", { className: styles['slider-wrapper-side'] },
-                React.createElement("div", __assign({ role: "slider", tabIndex: 0, "aria-label": i18nStrings.resizeHandleAriaLabel, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(styles.slider, styles['slider-side']), onKeyDown: onKeyDown, onMouseDown: onSliderMouseDown }, focusVisible),
-                    React.createElement(ResizeHandler, { className: clsx(styles['slider-icon'], styles['slider-icon-side']) })))) : (React.createElement(InternalButton, { className: clsx(styles['open-button'], styles['open-button-side']), iconName: "angle-left", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: isRefresh ? null : toggleRef })),
-            React.createElement("div", { className: styles['content-side'], "aria-hidden": !isOpen },
-                React.createElement("div", { className: clsx(styles['pane-header-wrapper-side']) }, paneHeader),
-                React.createElement("hr", { className: styles['header-divider'] }),
-                React.createElement("div", { className: clsx(styles['pane-content-wrapper-side']) }, wrappedChildren)))));
-};
-var TransitionContentBottom = function (_a) {
-    var _b, _c;
-    var baseProps = _a.baseProps, isOpen = _a.isOpen, splitPanelRef = _a.splitPanelRef, bottomOffset = _a.bottomOffset, cappedSize = _a.cappedSize, isRefresh = _a.isRefresh, onToggle = _a.onToggle, i18nStrings = _a.i18nStrings, relativeSize = _a.relativeSize, onKeyDown = _a.onKeyDown, onSliderMouseDown = _a.onSliderMouseDown, focusVisible = _a.focusVisible, paneHeader = _a.paneHeader, wrappedChildren = _a.wrappedChildren, isMobile = _a.isMobile, disableContentPaddings = _a.disableContentPaddings, state = _a.state, leftOffset = _a.leftOffset, rightOffset = _a.rightOffset, transitioningElementRef = _a.transitioningElementRef, centeredMaxWidthClasses = _a.centeredMaxWidthClasses, splitPanelHeaderRef = _a.splitPanelHeaderRef, appLayoutMaxWidth = _a.appLayoutMaxWidth;
-    var transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);
-    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.drawer, styles['position-bottom'], (_b = {},
-            _b[styles['drawer-closed']] = !isOpen,
-            _b[styles['drawer-mobile']] = isMobile,
-            _b[styles['drawer-disable-content-paddings']] = disableContentPaddings,
-            _b[styles.animating] = isRefresh && (state === 'entering' || state === 'exiting'),
-            _b[styles.refresh] = isRefresh,
-            _b)), onClick: function () { return !isOpen && onToggle(); }, style: {
-            bottom: bottomOffset,
-            left: leftOffset,
-            right: rightOffset,
-            height: isOpen ? cappedSize : undefined
-        }, ref: transitionContentBottomRef }),
-        isOpen && (React.createElement("div", { className: styles['slider-wrapper-bottom'] },
-            React.createElement("div", __assign({ role: "slider", tabIndex: 0, "aria-label": i18nStrings.resizeHandleAriaLabel, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(styles.slider, styles['slider-bottom']), onKeyDown: onKeyDown, onMouseDown: onSliderMouseDown }, focusVisible),
-                React.createElement(ResizeHandler, { className: clsx(styles['slider-icon'], styles['slider-icon-bottom']) })))),
-        React.createElement("div", { className: styles['drawer-content-bottom'] },
-            React.createElement("div", { className: clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses), ref: splitPanelHeaderRef }, paneHeader),
-            React.createElement("div", { className: clsx(styles['content-bottom'], centeredMaxWidthClasses), "aria-hidden": !isOpen },
-                React.createElement("div", { className: clsx((_c = {}, _c[styles['content-bottom-max-width']] = isRefresh, _c)), style: appLayoutMaxWidth }, wrappedChildren)))));
-};
-export default function SplitPanel(_a) {
-    var _b;
-    var header = _a.header, children = _a.children, _c = _a.hidePreferencesButton, hidePreferencesButton = _c === void 0 ? false : _c, i18nStrings = _a.i18nStrings, restProps = __rest(_a, ["header", "children", "hidePreferencesButton", "i18nStrings"]);
-    var __internalRootRef = useBaseComponent('SplitPanel').__internalRootRef;
-    var _d = useSplitPanelContext(), size = _d.size, getMaxWidth = _d.getMaxWidth, getMaxHeight = _d.getMaxHeight, position = _d.position, topOffset = _d.topOffset, bottomOffset = _d.bottomOffset, leftOffset = _d.leftOffset, rightOffset = _d.rightOffset, disableContentPaddings = _d.disableContentPaddings, contentWidthStyles = _d.contentWidthStyles, contentWrapperPaddings = _d.contentWrapperPaddings, isCopy = _d.isCopy, isOpen = _d.isOpen, isMobile = _d.isMobile, isRefresh = _d.isRefresh, isForcedPosition = _d.isForcedPosition, splitPanelRef = _d.splitPanelRef, splitPanelHeaderRef = _d.splitPanelHeaderRef, lastInteraction = _d.lastInteraction, onPreferencesChange = _d.onPreferencesChange, onResize = _d.onResize, onToggle = _d.onToggle, reportSize = _d.reportSize, setOpenButtonAriaLabel = _d.setOpenButtonAriaLabel;
-    var baseProps = getBaseProps(restProps);
-    var focusVisible = useFocusVisible();
-    var _e = useState(false), isPreferencesOpen = _e[0], setPreferencesOpen = _e[1];
-    var _f = useState(0), relativeSize = _f[0], setRelativeSize = _f[1];
-    var _g = useState(size), maxSize = _g[0], setMaxSize = _g[1];
-    var minSize = position === 'bottom' ? MIN_HEIGHT : MIN_WIDTH;
-    var cappedSize = getLimitedValue(minSize, size, maxSize);
-    var appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;
-    useEffect(function () {
-        setOpenButtonAriaLabel === null || setOpenButtonAriaLabel === void 0 ? void 0 : setOpenButtonAriaLabel(i18nStrings.openButtonAriaLabel);
-    }, [setOpenButtonAriaLabel, i18nStrings.openButtonAriaLabel]);
-    useEffect(function () {
-        // effects are called inside out in the components tree
-        // wait one frame to allow app-layout to complete its calculations
-        var handle = requestAnimationFrame(function () {
-            var maxSize = position === 'bottom' ? getMaxHeight() : getMaxWidth();
-            setRelativeSize((size / maxSize) * 100);
-            setMaxSize(maxSize);
-        });
-        return function () { return cancelAnimationFrame(handle); };
-    }, [size, position, getMaxHeight, getMaxWidth]);
-    useEffect(function () {
-        reportSize(cappedSize);
-    }, [reportSize, cappedSize]);
-    useEffect(function () {
-        var handler = function () { return setMaxSize(position === 'bottom' ? getMaxHeight() : getMaxWidth()); };
-        window.addEventListener('resize', handler);
-        return function () { return window.removeEventListener('resize', handler); };
-    }, [position, getMaxWidth, getMaxHeight]);
-    var setSidePanelWidth = function (width) {
-        var maxWidth = getMaxWidth();
-        var size = getLimitedValue(MIN_WIDTH, width, maxWidth);
-        if (isOpen && maxWidth >= MIN_WIDTH) {
-            onResize({ size: size });
-        }
-    };
-    var setBottomPanelHeight = function (height) {
-        var maxHeight = getMaxHeight();
-        var size = getLimitedValue(MIN_HEIGHT, height, maxHeight);
-        if (isOpen && maxHeight >= MIN_HEIGHT) {
-            onResize({ size: size });
-        }
-    };
-    var splitPanelRefObject = useRef(null);
-    var sizeControlProps = {
-        position: position,
-        splitPanelRef: splitPanelRefObject,
-        setSidePanelWidth: setSidePanelWidth,
-        setBottomPanelHeight: setBottomPanelHeight
-    };
-    var onSliderMouseDown = useMouseEvents(sizeControlProps);
-    var onKeyDown = useKeyboardEvents(sizeControlProps);
-    var toggleRef = useRef(null);
-    var closeRef = useRef(null);
-    var preferencesRef = useRef(null);
-    useEffectOnUpdate(function () {
-        var _a, _b, _c;
-        switch (lastInteraction === null || lastInteraction === void 0 ? void 0 : lastInteraction.type) {
-            case 'open':
-                return (_a = closeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            case 'close':
-                return (_b = toggleRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-            case 'position':
-                return (_c = preferencesRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-            default:
-                return;
-        }
-    }, [lastInteraction]);
-    var wrappedChildren = (React.createElement(AppLayoutDomContext.RootProvider, { value: {
-            stickyOffsetTop: topOffset,
-            stickyOffsetBottom: bottomOffset
-        } }, children));
-    var paneHeader = (React.createElement("div", { className: styles.header, style: appLayoutMaxWidth },
-        React.createElement("h2", { className: styles['header-text'] }, header),
-        React.createElement("div", { className: styles['header-actions'] },
-            !hidePreferencesButton && isOpen && (React.createElement(React.Fragment, null,
-                React.createElement(InternalButton, { className: styles['preferences-button'], iconName: "settings", variant: "icon", onClick: function () { return setPreferencesOpen(true); }, formAction: "none", ariaLabel: i18nStrings.preferencesTitle, ref: preferencesRef }),
-                React.createElement("span", { className: styles.divider }))),
-            isOpen ? (React.createElement(InternalButton, { className: styles['close-button'], iconName: isRefresh && position === 'side' ? 'angle-right' : isRefresh ? 'angle-down' : 'close', variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18nStrings.closeButtonAriaLabel, ref: closeRef })) : position === 'side' ? null : (React.createElement(InternalButton, { className: styles['open-button'], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: toggleRef })))));
-    /*
-      This effect forces the browser to recalculate the layout
-      whenever the split panel might have moved.
-  
-      This is needed as a workaround for a bug in Safari, which does
-      not automatically calculate the new position of the split panel
-      _content_ when the split panel moves.
-    */
-    useLayoutEffect(function () {
-        var root = __internalRootRef.current;
-        if (root) {
-            var property = 'transform';
-            var temporaryValue = 'translateZ(0)';
-            var valueBefore = root.style[property];
-            root.style[property] = temporaryValue;
-            // This line forces the browser to recalculate the layout
-            void root.offsetHeight;
-            root.style[property] = valueBefore;
-        }
-    }, [rightOffset, __internalRootRef]);
-    var mergedRef = useMergeRefs(splitPanelRef, splitPanelRefObject, __internalRootRef);
-    /**
-     * The AppLayout factor moved the circular buttons out of the
-     * SplitPanel and into the Tools component. This conditional
-     * is still needed for the early return to prevent execution
-     * of the following code.
-     */
-    if (isRefresh && (!isOpen || isCopy) && position === 'side') {
-        return React.createElement(React.Fragment, null);
-    }
-    var centeredMaxWidthClasses = clsx((_b = {},
-        _b[styles['pane-bottom-center-align']] = isRefresh,
-        _b[styles['pane-bottom-content-nav-padding']] = contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedNav,
-        _b[styles['pane-bottom-content-tools-padding']] = contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedTools,
-        _b));
-    return (React.createElement(Transition, { "in": isOpen !== null && isOpen !== void 0 ? isOpen : false }, function (state, transitioningElementRef) { return (React.createElement(React.Fragment, null,
-        position === 'side' && (React.createElement(TransitionContentSide, { baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, topOffset: topOffset, bottomOffset: bottomOffset, cappedSize: cappedSize, isRefresh: isRefresh, onToggle: onToggle, i18nStrings: i18nStrings, relativeSize: relativeSize, onKeyDown: onKeyDown, onSliderMouseDown: onSliderMouseDown, focusVisible: focusVisible, toggleRef: toggleRef, paneHeader: paneHeader, wrappedChildren: wrappedChildren })),
-        position === 'bottom' && (React.createElement(TransitionContentBottom, { baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, bottomOffset: bottomOffset, cappedSize: cappedSize, isRefresh: isRefresh, onToggle: onToggle, i18nStrings: i18nStrings, relativeSize: relativeSize, onKeyDown: onKeyDown, onSliderMouseDown: onSliderMouseDown, focusVisible: focusVisible, paneHeader: paneHeader, wrappedChildren: wrappedChildren, isMobile: isMobile, disableContentPaddings: disableContentPaddings, state: state, leftOffset: leftOffset, rightOffset: rightOffset, transitioningElementRef: transitioningElementRef, centeredMaxWidthClasses: centeredMaxWidthClasses, splitPanelHeaderRef: splitPanelHeaderRef, appLayoutMaxWidth: appLayoutMaxWidth })),
-        isPreferencesOpen && (React.createElement(PreferencesModal, { visible: true, preferences: { position: position }, disabledSidePosition: position === 'bottom' && isForcedPosition, isRefresh: isRefresh, i18nStrings: {
-                header: i18nStrings.preferencesTitle,
-                confirm: i18nStrings.preferencesConfirm,
-                cancel: i18nStrings.preferencesCancel,
-                positionLabel: i18nStrings.preferencesPositionLabel,
-                positionDescription: i18nStrings.preferencesPositionDescription,
-                positionBottom: i18nStrings.preferencesPositionBottom,
-                positionSide: i18nStrings.preferencesPositionSide
-            }, onConfirm: function (preferences) {
-                onPreferencesChange(__assign({}, preferences));
-                setPreferencesOpen(false);
-            }, onDismiss: function () {
-                setPreferencesOpen(false);
-            } })))); }));
-}
-applyDisplayName(SplitPanel, 'SplitPanel');
-//# sourceMappingURL=index.js.map

package/internal/template/split-panel/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split-panel/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, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps, BaseComponentProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\n\nimport { SplitPanelProps, SizeControlProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { useMouseEvents } from './utils/use-mouse-events';\nimport { useKeyboardEvents } from './utils/use-keyboard-events';\n\nimport styles from './styles.css.js';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { AppLayoutDomContext } from '../internal/context/app-layout-context';\nimport { getLimitedValue } from './utils/size-utils';\nimport { Transition, TransitionStatus } from '../internal/components/transition';\nimport { ButtonProps } from '../button/interfaces';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\n\nexport { SplitPanelProps };\n\nconst MIN_HEIGHT = 160;\nconst MIN_WIDTH = 280;\ninterface TransitionContentProps {\n  baseProps: BaseComponentProps;\n  isOpen?: boolean;\n  splitPanelRef?: React.Ref<any>;\n  bottomOffset: number;\n  cappedSize: number;\n  isRefresh: boolean;\n  onToggle: () => void;\n  i18nStrings: SplitPanelProps.I18nStrings;\n  relativeSize: number;\n  onKeyDown: (event: React.KeyboardEvent<Element>) => void;\n  onSliderMouseDown: () => void;\n  focusVisible: { 'data-awsui-focus-visible': true } | { 'data-awsui-focus-visible'?: undefined };\n  paneHeader: JSX.Element;\n  wrappedChildren: JSX.Element;\n}\n\ninterface TransitionContentSideProps extends TransitionContentProps {\n  topOffset: number;\n  toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nconst TransitionContentSide = ({\n  baseProps,\n  isOpen,\n  splitPanelRef,\n  topOffset,\n  bottomOffset,\n  cappedSize,\n  isRefresh,\n  onToggle,\n  i18nStrings,\n  relativeSize,\n  onKeyDown,\n  onSliderMouseDown,\n  focusVisible,\n  toggleRef,\n  paneHeader,\n  wrappedChildren,\n}: TransitionContentSideProps) => {\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles.root, styles['position-side'], {\n        [styles['drawer-closed']]: !isOpen,\n      })}\n      ref={splitPanelRef}\n    >\n      <aside\n        style={{\n          top: topOffset,\n          bottom: bottomOffset,\n          width: isOpen ? cappedSize : undefined,\n          maxWidth: isRefresh ? '100%' : undefined,\n        }}\n        className={clsx(styles['drawer-content-side'], {\n          [styles.refresh]: isRefresh,\n        })}\n        onClick={() => !isOpen && onToggle()}\n      >\n        {isOpen ? (\n          <div className={styles['slider-wrapper-side']}>\n            <div\n              role=\"slider\"\n              tabIndex={0}\n              aria-label={i18nStrings.resizeHandleAriaLabel}\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={relativeSize}\n              className={clsx(styles.slider, styles['slider-side'])}\n              onKeyDown={onKeyDown}\n              onMouseDown={onSliderMouseDown}\n              {...focusVisible}\n            >\n              <ResizeHandler className={clsx(styles['slider-icon'], styles['slider-icon-side'])} />\n            </div>\n          </div>\n        ) : (\n          <InternalButton\n            className={clsx(styles['open-button'], styles['open-button-side'])}\n            iconName=\"angle-left\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={i18nStrings.openButtonAriaLabel}\n            ref={isRefresh ? null : toggleRef}\n          />\n        )}\n        <div className={styles['content-side']} aria-hidden={!isOpen}>\n          <div className={clsx(styles['pane-header-wrapper-side'])}>{paneHeader}</div>\n          <hr className={styles['header-divider']} />\n          <div className={clsx(styles['pane-content-wrapper-side'])}>{wrappedChildren}</div>\n        </div>\n      </aside>\n    </div>\n  );\n};\n\ninterface TransitionContentBottomProps extends TransitionContentProps {\n  isMobile: boolean;\n  disableContentPaddings?: boolean;\n  state: TransitionStatus;\n  leftOffset: number;\n  rightOffset: number;\n  transitioningElementRef: React.Ref<any>;\n  centeredMaxWidthClasses: string;\n  splitPanelHeaderRef?: React.Ref<any>;\n  appLayoutMaxWidth: React.CSSProperties | undefined;\n}\n\nconst TransitionContentBottom = ({\n  baseProps,\n  isOpen,\n  splitPanelRef,\n  bottomOffset,\n  cappedSize,\n  isRefresh,\n  onToggle,\n  i18nStrings,\n  relativeSize,\n  onKeyDown,\n  onSliderMouseDown,\n  focusVisible,\n  paneHeader,\n  wrappedChildren,\n  isMobile,\n  disableContentPaddings,\n  state,\n  leftOffset,\n  rightOffset,\n  transitioningElementRef,\n  centeredMaxWidthClasses,\n  splitPanelHeaderRef,\n  appLayoutMaxWidth,\n}: TransitionContentBottomProps) => {\n  const transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.drawer, styles['position-bottom'], {\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['drawer-disable-content-paddings']]: disableContentPaddings,\n        [styles.animating]: isRefresh && (state === 'entering' || state === 'exiting'),\n        [styles.refresh]: isRefresh,\n      })}\n      onClick={() => !isOpen && onToggle()}\n      style={{\n        bottom: bottomOffset,\n        left: leftOffset,\n        right: rightOffset,\n        height: isOpen ? cappedSize : undefined,\n      }}\n      ref={transitionContentBottomRef}\n    >\n      {isOpen && (\n        <div className={styles['slider-wrapper-bottom']}>\n          <div\n            role=\"slider\"\n            tabIndex={0}\n            aria-label={i18nStrings.resizeHandleAriaLabel}\n            aria-valuemax={100}\n            aria-valuemin={0}\n            aria-valuenow={relativeSize}\n            className={clsx(styles.slider, styles['slider-bottom'])}\n            onKeyDown={onKeyDown}\n            onMouseDown={onSliderMouseDown}\n            {...focusVisible}\n          >\n            <ResizeHandler className={clsx(styles['slider-icon'], styles['slider-icon-bottom'])} />\n          </div>\n        </div>\n      )}\n      <div className={styles['drawer-content-bottom']}>\n        <div className={clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses)} ref={splitPanelHeaderRef}>\n          {paneHeader}\n        </div>\n        <div className={clsx(styles['content-bottom'], centeredMaxWidthClasses)} aria-hidden={!isOpen}>\n          <div className={clsx({ [styles['content-bottom-max-width']]: isRefresh })} style={appLayoutMaxWidth}>\n            {wrappedChildren}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default function SplitPanel({\n  header,\n  children,\n  hidePreferencesButton = false,\n  i18nStrings,\n  ...restProps\n}: SplitPanelProps) {\n  const { __internalRootRef } = useBaseComponent('SplitPanel');\n  const {\n    size,\n    getMaxWidth,\n    getMaxHeight,\n    position,\n    topOffset,\n    bottomOffset,\n    leftOffset,\n    rightOffset,\n    disableContentPaddings,\n    contentWidthStyles,\n    contentWrapperPaddings,\n    isCopy,\n    isOpen,\n    isMobile,\n    isRefresh,\n    isForcedPosition,\n    splitPanelRef,\n    splitPanelHeaderRef,\n    lastInteraction,\n    onPreferencesChange,\n    onResize,\n    onToggle,\n    reportSize,\n    setOpenButtonAriaLabel,\n  } = useSplitPanelContext();\n  const baseProps = getBaseProps(restProps);\n  const focusVisible = useFocusVisible();\n  const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n  const [relativeSize, setRelativeSize] = useState(0);\n  const [maxSize, setMaxSize] = useState(size);\n  const minSize = position === 'bottom' ? MIN_HEIGHT : MIN_WIDTH;\n  const cappedSize = getLimitedValue(minSize, size, maxSize);\n  const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n  useEffect(() => {\n    setOpenButtonAriaLabel?.(i18nStrings.openButtonAriaLabel);\n  }, [setOpenButtonAriaLabel, i18nStrings.openButtonAriaLabel]);\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = position === 'bottom' ? getMaxHeight() : getMaxWidth();\n      setRelativeSize((size / maxSize) * 100);\n      setMaxSize(maxSize);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [size, position, getMaxHeight, getMaxWidth]);\n\n  useEffect(() => {\n    reportSize(cappedSize);\n  }, [reportSize, cappedSize]);\n\n  useEffect(() => {\n    const handler = () => setMaxSize(position === 'bottom' ? getMaxHeight() : getMaxWidth());\n    window.addEventListener('resize', handler);\n    return () => window.removeEventListener('resize', handler);\n  }, [position, getMaxWidth, getMaxHeight]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = getMaxWidth();\n    const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n\n    if (isOpen && maxWidth >= MIN_WIDTH) {\n      onResize({ size });\n    }\n  };\n\n  const setBottomPanelHeight = (height: number) => {\n    const maxHeight = getMaxHeight();\n    const size = getLimitedValue(MIN_HEIGHT, height, maxHeight);\n\n    if (isOpen && maxHeight >= MIN_HEIGHT) {\n      onResize({ size });\n    }\n  };\n\n  const splitPanelRefObject = useRef(null);\n  const sizeControlProps: SizeControlProps = {\n    position,\n    splitPanelRef: splitPanelRefObject,\n    setSidePanelWidth,\n    setBottomPanelHeight,\n  };\n  const onSliderMouseDown = useMouseEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const toggleRef = useRef<ButtonProps.Ref>(null);\n  const closeRef = useRef<ButtonProps.Ref>(null);\n  const preferencesRef = useRef<ButtonProps.Ref>(null);\n\n  useEffectOnUpdate(() => {\n    switch (lastInteraction?.type) {\n      case 'open':\n        return closeRef.current?.focus();\n      case 'close':\n        return toggleRef.current?.focus();\n      case 'position':\n        return preferencesRef.current?.focus();\n      default:\n        return;\n    }\n  }, [lastInteraction]);\n\n  const wrappedChildren = (\n    <AppLayoutDomContext.RootProvider\n      value={{\n        stickyOffsetTop: topOffset,\n        stickyOffsetBottom: bottomOffset,\n      }}\n    >\n      {children}\n    </AppLayoutDomContext.RootProvider>\n  );\n\n  const paneHeader = (\n    <div className={styles.header} style={appLayoutMaxWidth}>\n      <h2 className={styles['header-text']}>{header}</h2>\n      <div className={styles['header-actions']}>\n        {!hidePreferencesButton && isOpen && (\n          <>\n            <InternalButton\n              className={styles['preferences-button']}\n              iconName=\"settings\"\n              variant=\"icon\"\n              onClick={() => setPreferencesOpen(true)}\n              formAction=\"none\"\n              ariaLabel={i18nStrings.preferencesTitle}\n              ref={preferencesRef}\n            />\n            <span className={styles.divider} />\n          </>\n        )}\n\n        {isOpen ? (\n          <InternalButton\n            className={styles['close-button']}\n            iconName={isRefresh && position === 'side' ? 'angle-right' : isRefresh ? 'angle-down' : 'close'}\n            variant=\"icon\"\n            onClick={onToggle}\n            formAction=\"none\"\n            ariaLabel={i18nStrings.closeButtonAriaLabel}\n            ref={closeRef}\n          />\n        ) : position === 'side' ? null : (\n          <InternalButton\n            className={styles['open-button']}\n            iconName=\"angle-up\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={i18nStrings.openButtonAriaLabel}\n            ref={toggleRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  /*\n    This effect forces the browser to recalculate the layout\n    whenever the split panel might have moved.\n\n    This is needed as a workaround for a bug in Safari, which does\n    not automatically calculate the new position of the split panel\n    _content_ when the split panel moves.\n  */\n  useLayoutEffect(() => {\n    const root = __internalRootRef.current;\n\n    if (root) {\n      const property = 'transform';\n      const temporaryValue = 'translateZ(0)';\n\n      const valueBefore = root.style[property];\n      root.style[property] = temporaryValue;\n\n      // This line forces the browser to recalculate the layout\n      void root.offsetHeight;\n\n      root.style[property] = valueBefore;\n    }\n  }, [rightOffset, __internalRootRef]);\n\n  const mergedRef = useMergeRefs(splitPanelRef, splitPanelRefObject, __internalRootRef);\n\n  /**\n   * The AppLayout factor moved the circular buttons out of the\n   * SplitPanel and into the Tools component. This conditional\n   * is still needed for the early return to prevent execution\n   * of the following code.\n   */\n  if (isRefresh && (!isOpen || isCopy) && position === 'side') {\n    return <></>;\n  }\n\n  const centeredMaxWidthClasses = clsx({\n    [styles['pane-bottom-center-align']]: isRefresh,\n    [styles['pane-bottom-content-nav-padding']]: contentWrapperPaddings?.closedNav,\n    [styles['pane-bottom-content-tools-padding']]: contentWrapperPaddings?.closedTools,\n  });\n\n  return (\n    <Transition in={isOpen ?? false}>\n      {(state, transitioningElementRef) => (\n        <>\n          {position === 'side' && (\n            <TransitionContentSide\n              baseProps={baseProps}\n              isOpen={isOpen}\n              splitPanelRef={mergedRef}\n              topOffset={topOffset}\n              bottomOffset={bottomOffset}\n              cappedSize={cappedSize}\n              isRefresh={isRefresh}\n              onToggle={onToggle}\n              i18nStrings={i18nStrings}\n              relativeSize={relativeSize}\n              onKeyDown={onKeyDown}\n              onSliderMouseDown={onSliderMouseDown}\n              focusVisible={focusVisible}\n              toggleRef={toggleRef}\n              paneHeader={paneHeader}\n              wrappedChildren={wrappedChildren}\n            ></TransitionContentSide>\n          )}\n\n          {position === 'bottom' && (\n            <TransitionContentBottom\n              baseProps={baseProps}\n              isOpen={isOpen}\n              splitPanelRef={mergedRef}\n              bottomOffset={bottomOffset}\n              cappedSize={cappedSize}\n              isRefresh={isRefresh}\n              onToggle={onToggle}\n              i18nStrings={i18nStrings}\n              relativeSize={relativeSize}\n              onKeyDown={onKeyDown}\n              onSliderMouseDown={onSliderMouseDown}\n              focusVisible={focusVisible}\n              paneHeader={paneHeader}\n              wrappedChildren={wrappedChildren}\n              isMobile={isMobile}\n              disableContentPaddings={disableContentPaddings}\n              state={state}\n              leftOffset={leftOffset}\n              rightOffset={rightOffset}\n              transitioningElementRef={transitioningElementRef}\n              centeredMaxWidthClasses={centeredMaxWidthClasses}\n              splitPanelHeaderRef={splitPanelHeaderRef}\n              appLayoutMaxWidth={appLayoutMaxWidth}\n            ></TransitionContentBottom>\n          )}\n          {isPreferencesOpen && (\n            <PreferencesModal\n              visible={true}\n              preferences={{ position }}\n              disabledSidePosition={position === 'bottom' && isForcedPosition}\n              isRefresh={isRefresh}\n              i18nStrings={{\n                header: i18nStrings.preferencesTitle,\n                confirm: i18nStrings.preferencesConfirm,\n                cancel: i18nStrings.preferencesCancel,\n                positionLabel: i18nStrings.preferencesPositionLabel,\n                positionDescription: i18nStrings.preferencesPositionDescription,\n                positionBottom: i18nStrings.preferencesPositionBottom,\n                positionSide: i18nStrings.preferencesPositionSide,\n              }}\n              onConfirm={preferences => {\n                onPreferencesChange({ ...preferences });\n                setPreferencesOpen(false);\n              }}\n              onDismiss={() => {\n                setPreferencesOpen(false);\n              }}\n            />\n          )}\n        </>\n      )}\n    </Transition>\n  );\n}\n\napplyDisplayName(SplitPanel, 'SplitPanel');\n"]}

package/internal/template/split-panel/utils/size-utils.d.ts

@@ -1,7 +0,0 @@
-export declare const MAIN_PANEL_MIN_HEIGHT = 250;
-/**
- * Estimate a default split panel size for the first render based on the document size.
- */
-export declare function getSplitPanelDefaultSize(position: 'side' | 'bottom'): number;
-export declare function getLimitedValue(min: number, value: number, max: number): number;
-//# sourceMappingURL=size-utils.d.ts.map

package/internal/template/split-panel/utils/size-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"size-utils.d.ts","sourceRoot":"","sources":["../../../../src/split-panel/utils/size-utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,UAKnE;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAWtE"}

package/internal/template/split-panel/utils/size-utils.js

@@ -1,25 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-export var MAIN_PANEL_MIN_HEIGHT = 250; // approximate height of breadcrumb, table header, and the first table row
-/**
- * Estimate a default split panel size for the first render based on the document size.
- */
-export function getSplitPanelDefaultSize(position) {
-    if (typeof document === 'undefined') {
-        return 0; // render the split panel in its minimum possible size
-    }
-    return position === 'side' ? document.documentElement.clientWidth / 3 : document.documentElement.clientHeight / 2;
-}
-export function getLimitedValue(min, value, max) {
-    if (min > max) {
-        return min;
-    }
-    if (value < min) {
-        return min;
-    }
-    if (value > max) {
-        return max;
-    }
-    return value;
-}
-//# sourceMappingURL=size-utils.js.map

package/internal/template/split-panel/utils/size-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"size-utils.js","sourceRoot":"","sources":["../../../../src/split-panel/utils/size-utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAC,IAAM,qBAAqB,GAAG,GAAG,CAAC,CAAC,0EAA0E;AACpH;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,QAA2B;IAClE,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;QACnC,OAAO,CAAC,CAAC,CAAC,sDAAsD;KACjE;IACD,OAAO,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC;AACpH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,GAAW,EAAE,KAAa,EAAE,GAAW;IACrE,IAAI,GAAG,GAAG,GAAG,EAAE;QACb,OAAO,GAAG,CAAC;KACZ;IACD,IAAI,KAAK,GAAG,GAAG,EAAE;QACf,OAAO,GAAG,CAAC;KACZ;IACD,IAAI,KAAK,GAAG,GAAG,EAAE;QACf,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport const MAIN_PANEL_MIN_HEIGHT = 250; // approximate height of breadcrumb, table header, and the first table row\n/**\n * Estimate a default split panel size for the first render based on the document size.\n */\nexport function getSplitPanelDefaultSize(position: 'side' | 'bottom') {\n  if (typeof document === 'undefined') {\n    return 0; // render the split panel in its minimum possible size\n  }\n  return position === 'side' ? document.documentElement.clientWidth / 3 : document.documentElement.clientHeight / 2;\n}\n\nexport function getLimitedValue(min: number, value: number, max: number) {\n  if (min > max) {\n    return min;\n  }\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n}\n"]}

package/internal/template/tag-editor/index.js

@@ -1,153 +0,0 @@
-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/internal/template/tag-editor/index.js.map

@@ -1 +0,0 @@
-{"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"]}