@cloudscape-design/components 3.0.755 → 3.0.757

package/token-group/internal.js

@@ -18,10 +18,12 @@ 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 [nextFocusIndex, setNextFocusIndex] = useState(null);
-    const onFocusMoved = () => setNextFocusIndex(null);
     const tokenListRef = useListFocusController({
         nextFocusIndex,
-        onFocusMoved,
+        onFocusMoved: target => {
+            target.focus();
+            setNextFocusIndex(null);
+        },
         listItemSelector: `.${tokenListStyles['list-item']}`,
         showMoreSelector: `.${tokenListStyles.toggle}`,
     });

package/token-group/internal.js.map

@@ -1 +1 @@
-{"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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\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            {...(item.disabled || readOnly\n              ? {}\n              : getAnalyticsMetadataAttribute({ detail: { position: `${itemIndex + 1}` } }))}\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"]}
+{"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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\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 tokenListRef = useListFocusController({\n    nextFocusIndex,\n    onFocusMoved: target => {\n      target.focus();\n      setNextFocusIndex(null);\n    },\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            {...(item.disabled || readOnly\n              ? {}\n              : getAnalyticsMetadataAttribute({ detail: { position: `${itemIndex + 1}` } }))}\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"]}