@cloudscape-design/components 3.0.733 → 3.0.735

package/token-group/internal.js

@@ -8,25 +8,36 @@ import Option from '../internal/components/option';
 import TokenList from '../internal/components/token-list';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
+import { useListFocusController } from '../internal/hooks/use-list-focus-controller';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { Token } from './token';
+import tokenListStyles from '../internal/components/token-list/styles.css.js';
 import styles from './styles.css.js';
 export default function InternalTokenGroup(_a) {
     var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "readOnly", "__internalRootRef"]);
     checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);
-    const [removedItemIndex, setRemovedItemIndex] = useState(null);
+    const [nextFocusIndex, setNextFocusIndex] = useState(null);
+    const onFocusMoved = () => setNextFocusIndex(null);
+    const tokenListRef = useListFocusController({
+        nextFocusIndex,
+        onFocusMoved,
+        listItemSelector: `.${tokenListStyles['list-item']}`,
+        showMoreSelector: `.${tokenListStyles.toggle}`,
+    });
     const baseProps = getBaseProps(props);
     const hasItems = items.length > 0;
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, hasItems && styles['has-items'], disableOuterPadding && styles['no-padding']), ref: __internalRootRef }),
+    const mergedRef = useMergeRefs(__internalRootRef, tokenListRef);
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, hasItems && styles['has-items'], disableOuterPadding && styles['no-padding']), ref: mergedRef }),
         React.createElement(TokenList, { alignment: alignment, items: items, limit: limit, renderItem: (item, itemIndex) => (React.createElement(Token, { ariaLabel: item.label, dismissLabel: item.dismissLabel, onDismiss: () => {
                     fireNonCancelableEvent(onDismiss, { itemIndex });
-                    setRemovedItemIndex(itemIndex);
+                    setNextFocusIndex(itemIndex);
                 }, disabled: item.disabled, readOnly: readOnly },
-                React.createElement(Option, { option: item, isGenericGroup: false }))), i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, moveFocusNextToIndex: removedItemIndex, onExpandedClick: isExpanded => {
+                React.createElement(Option, { option: item, isGenericGroup: false }))), i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, onExpandedClick: isExpanded => {
                 if (isExpanded && limit) {
-                    setRemovedItemIndex(limit);
+                    setNextFocusIndex(limit);
                 }
                 else {
-                    setRemovedItemIndex(null);
+                    setNextFocusIndex(null);
                 }
             } })));
 }

package/token-group/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAIjE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAYjB;QAZiB,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,OAEO,EADrB,KAAK,cAXiC,wKAY1C,CADS;IAER,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE9E,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,QAAQ,IAAI,MAAM,CAAC,WAAW,CAAC,EAC/B,mBAAmB,IAAI,MAAM,CAAC,YAAY,CAAC,CAC5C,EACD,GAAG,EAAE,iBAAiB;QAEtB,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,KAAK,IACJ,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;oBACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,QAAQ;gBAElB,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,GAAI,CACzC,CACT,EACD,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,EAChD,sBAAsB,EAAE,sBAAsB,EAC9C,oBAAoB,EAAE,gBAAgB,EACtC,eAAe,EAAE,UAAU,CAAC,EAAE;gBAC5B,IAAI,UAAU,IAAI,KAAK,EAAE;oBACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC5B;qBAAM;oBACL,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC,GACD,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport { TokenGroupProps } from './interfaces';\nimport { Token } from './token';\n\nimport styles from './styles.css.js';\n\ntype InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n  alignment,\n  items,\n  onDismiss,\n  limit,\n  i18nStrings,\n  disableOuterPadding,\n  limitShowFewerAriaLabel,\n  limitShowMoreAriaLabel,\n  readOnly,\n  __internalRootRef,\n  ...props\n}: InternalTokenGroupProps) {\n  checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n  const [removedItemIndex, setRemovedItemIndex] = useState<null | number>(null);\n\n  const baseProps = getBaseProps(props);\n  const hasItems = items.length > 0;\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        hasItems && styles['has-items'],\n        disableOuterPadding && styles['no-padding']\n      )}\n      ref={__internalRootRef}\n    >\n      <TokenList\n        alignment={alignment}\n        items={items}\n        limit={limit}\n        renderItem={(item, itemIndex) => (\n          <Token\n            ariaLabel={item.label}\n            dismissLabel={item.dismissLabel}\n            onDismiss={() => {\n              fireNonCancelableEvent(onDismiss, { itemIndex });\n              setRemovedItemIndex(itemIndex);\n            }}\n            disabled={item.disabled}\n            readOnly={readOnly}\n          >\n            <Option option={item} isGenericGroup={false} />\n          </Token>\n        )}\n        i18nStrings={i18nStrings}\n        limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n        limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n        moveFocusNextToIndex={removedItemIndex}\n        onExpandedClick={isExpanded => {\n          if (isExpanded && limit) {\n            setRemovedItemIndex(limit);\n          } else {\n            setRemovedItemIndex(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.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 } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { TokenGroupProps } from './interfaces';\nimport { Token } from './token';\n\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n  alignment,\n  items,\n  onDismiss,\n  limit,\n  i18nStrings,\n  disableOuterPadding,\n  limitShowFewerAriaLabel,\n  limitShowMoreAriaLabel,\n  readOnly,\n  __internalRootRef,\n  ...props\n}: InternalTokenGroupProps) {\n  checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n  const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n  const onFocusMoved = () => setNextFocusIndex(null);\n  const tokenListRef = useListFocusController({\n    nextFocusIndex,\n    onFocusMoved,\n    listItemSelector: `.${tokenListStyles['list-item']}`,\n    showMoreSelector: `.${tokenListStyles.toggle}`,\n  });\n\n  const baseProps = getBaseProps(props);\n  const hasItems = items.length > 0;\n  const mergedRef = useMergeRefs(__internalRootRef, tokenListRef);\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        hasItems && styles['has-items'],\n        disableOuterPadding && styles['no-padding']\n      )}\n      ref={mergedRef}\n    >\n      <TokenList\n        alignment={alignment}\n        items={items}\n        limit={limit}\n        renderItem={(item, itemIndex) => (\n          <Token\n            ariaLabel={item.label}\n            dismissLabel={item.dismissLabel}\n            onDismiss={() => {\n              fireNonCancelableEvent(onDismiss, { itemIndex });\n              setNextFocusIndex(itemIndex);\n            }}\n            disabled={item.disabled}\n            readOnly={readOnly}\n          >\n            <Option option={item} isGenericGroup={false} />\n          </Token>\n        )}\n        i18nStrings={i18nStrings}\n        limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n        limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n        onExpandedClick={isExpanded => {\n          if (isExpanded && limit) {\n            setNextFocusIndex(limit);\n          } else {\n            setNextFocusIndex(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"]}

package/internal/components/token-list/token-focus-controller.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare function useTokenFocusController({ moveFocusNextToIndex }: {
-    moveFocusNextToIndex?: null | number;
-}): import("react").RefObject<HTMLDivElement>;
-//# sourceMappingURL=token-focus-controller.d.ts.map

package/internal/components/token-list/token-focus-controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"token-focus-controller.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/token-focus-controller.tsx"],"names":[],"mappings":";AAYA,wBAAgB,uBAAuB,CAAC,EAAE,oBAAoB,EAAE,EAAE;IAAE,oBAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,6CAqCzG"}

package/internal/components/token-list/token-focus-controller.js

@@ -1,43 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { useEffect, useRef } from 'react';
-import { getFirstFocusable } from '../focus-lock/utils.js';
-import styles from './styles.css.js';
-const tokenSelector = `.${styles['list-item']}`;
-const toggleButtonSelector = `.${styles.toggle}`;
-export function useTokenFocusController({ moveFocusNextToIndex }) {
-    const tokenListRef = useRef(null);
-    useEffect(() => {
-        var _a, _b;
-        if (moveFocusNextToIndex === undefined || moveFocusNextToIndex === null || tokenListRef.current === null) {
-            return;
-        }
-        const tokenElements = tokenListRef.current.querySelectorAll(tokenSelector);
-        const toggleButton = tokenListRef.current.querySelector(toggleButtonSelector);
-        let closestPrevIndex = Number.NEGATIVE_INFINITY;
-        let closestNextIndex = Number.POSITIVE_INFINITY;
-        for (let activeIndex = 0; activeIndex < tokenElements.length; activeIndex++) {
-            if (activeIndex < moveFocusNextToIndex) {
-                closestPrevIndex =
-                    moveFocusNextToIndex - activeIndex < moveFocusNextToIndex - closestPrevIndex ? activeIndex : closestPrevIndex;
-            }
-            else {
-                closestNextIndex =
-                    activeIndex - moveFocusNextToIndex < closestNextIndex - moveFocusNextToIndex ? activeIndex : closestNextIndex;
-            }
-        }
-        const nextElement = tokenElements[closestNextIndex];
-        const prevElement = tokenElements[closestPrevIndex];
-        if (nextElement instanceof HTMLElement) {
-            (_a = getFirstFocusable(nextElement)) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else if (prevElement instanceof HTMLElement) {
-            (_b = getFirstFocusable(prevElement)) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        else if (toggleButton instanceof HTMLElement) {
-            toggleButton.focus();
-        }
-    }, [moveFocusNextToIndex]);
-    return tokenListRef;
-}
-//# sourceMappingURL=token-focus-controller.js.map

package/internal/components/token-list/token-focus-controller.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"token-focus-controller.js","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/token-focus-controller.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;AAChD,MAAM,oBAAoB,GAAG,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;AAEjD,MAAM,UAAU,uBAAuB,CAAC,EAAE,oBAAoB,EAA4C;IACxG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,oBAAoB,KAAK,SAAS,IAAI,oBAAoB,KAAK,IAAI,IAAI,YAAY,CAAC,OAAO,KAAK,IAAI,EAAE;YACxG,OAAO;SACR;QAED,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC3E,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAE9E,IAAI,gBAAgB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAChD,IAAI,gBAAgB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAEhD,KAAK,IAAI,WAAW,GAAG,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;YAC3E,IAAI,WAAW,GAAG,oBAAoB,EAAE;gBACtC,gBAAgB;oBACd,oBAAoB,GAAG,WAAW,GAAG,oBAAoB,GAAG,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC;aACjH;iBAAM;gBACL,gBAAgB;oBACd,WAAW,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC;aACjH;SACF;QAED,MAAM,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEpD,IAAI,WAAW,YAAY,WAAW,EAAE;YACtC,MAAA,iBAAiB,CAAC,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;aAAM,IAAI,WAAW,YAAY,WAAW,EAAE;YAC7C,MAAA,iBAAiB,CAAC,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;aAAM,IAAI,YAAY,YAAY,WAAW,EAAE;YAC9C,YAAY,CAAC,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\n\nimport { getFirstFocusable } from '../focus-lock/utils.js';\n\nimport styles from './styles.css.js';\n\nconst tokenSelector = `.${styles['list-item']}`;\nconst toggleButtonSelector = `.${styles.toggle}`;\n\nexport function useTokenFocusController({ moveFocusNextToIndex }: { moveFocusNextToIndex?: null | number }) {\n  const tokenListRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (moveFocusNextToIndex === undefined || moveFocusNextToIndex === null || tokenListRef.current === null) {\n      return;\n    }\n\n    const tokenElements = tokenListRef.current.querySelectorAll(tokenSelector);\n    const toggleButton = tokenListRef.current.querySelector(toggleButtonSelector);\n\n    let closestPrevIndex = Number.NEGATIVE_INFINITY;\n    let closestNextIndex = Number.POSITIVE_INFINITY;\n\n    for (let activeIndex = 0; activeIndex < tokenElements.length; activeIndex++) {\n      if (activeIndex < moveFocusNextToIndex) {\n        closestPrevIndex =\n          moveFocusNextToIndex - activeIndex < moveFocusNextToIndex - closestPrevIndex ? activeIndex : closestPrevIndex;\n      } else {\n        closestNextIndex =\n          activeIndex - moveFocusNextToIndex < closestNextIndex - moveFocusNextToIndex ? activeIndex : closestNextIndex;\n      }\n    }\n\n    const nextElement = tokenElements[closestNextIndex];\n    const prevElement = tokenElements[closestPrevIndex];\n\n    if (nextElement instanceof HTMLElement) {\n      getFirstFocusable(nextElement)?.focus();\n    } else if (prevElement instanceof HTMLElement) {\n      getFirstFocusable(prevElement)?.focus();\n    } else if (toggleButton instanceof HTMLElement) {\n      toggleButton.focus();\n    }\n  }, [moveFocusNextToIndex]);\n\n  return tokenListRef;\n}\n"]}