@cloudscape-design/components 3.0.1296 → 3.0.1297

package/internal/base-component/styles.scoped.css

@@ -2244,5 +2244,5 @@
   }
 }
 :root {
-  --awsui-version-info-6f1df813: true;
+  --awsui-version-info-ea35614b: true;
 }

package/internal/components/focus-lock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAO7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAyED,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AA0ED,wBAA2C"}

package/internal/components/focus-lock/index.js

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import TabTrap from '../tab-trap/index';
 import { getFirstFocusable, getLastFocusable } from './utils';
@@ -56,10 +57,11 @@ function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, r
     }, [restoreFocus]);
     useImperativeHandle(ref, () => ({ focusFirst }));
     const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);
+    const isFocusInside = (event) => nodeBelongs(containerRef.current, event.relatedTarget);
     return (React.createElement(React.Fragment, null,
-        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: focusLast }),
+        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: event => (isFocusInside(event) ? focusLast() : focusFirst()) }),
         React.createElement("div", { className: className, ref: mergedRef }, children),
-        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: focusFirst })));
+        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: event => (isFocusInside(event) ? focusFirst() : focusLast()) })));
 }
 export default React.forwardRef(FocusLock);
 //# sourceMappingURL=index.js.map

package/internal/components/focus-lock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/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, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n  className?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n  /**\n   * Focuses the first element in the component.\n   */\n  focusFirst(): void;\n}\n\nfunction FocusLock(\n  { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n  ref: React.Ref<FocusLockRef>\n) {\n  const restoreFocusTargetRef = useRef<HTMLOrSVGElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const focusFirst = () => {\n    if (containerRef.current) {\n      getFirstFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  const focusLast = () => {\n    if (containerRef.current) {\n      getLastFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  // Captures focus when `autoFocus` is set, and the component is mounted or\n  // `disabled` changes from true to false.\n  useEffect(() => {\n    const assignRestoreFocusTarget = () => {\n      if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n        restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n      }\n    };\n    if (autoFocus && !disabled) {\n      assignRestoreFocusTarget();\n      focusFirst();\n    }\n  }, [autoFocus, disabled]);\n\n  // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n  const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n  useEffect(() => {\n    if (previouslyDisabled !== !!disabled) {\n      setPreviouslyDisabled(!!disabled);\n      if (restoreFocus && disabled) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    }\n  }, [previouslyDisabled, disabled, restoreFocus]);\n\n  // Restore focus if `restoreFocus` is set and the component is unmounted.\n  // Using a callback ref for this is safer than using useEffect cleanups.\n  const restoreFocusHandler = useCallback(\n    (elem: HTMLDivElement | null) => {\n      if (elem === null && restoreFocus) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    },\n    [restoreFocus]\n  );\n\n  useImperativeHandle(ref, () => ({ focusFirst }));\n  const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n  return (\n    <>\n      <TabTrap disabled={disabled} focusNextCallback={focusLast} />\n      <div className={className} ref={mergedRef}>\n        {children}\n      </div>\n      <TabTrap disabled={disabled} focusNextCallback={focusFirst} />\n    </>\n  );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/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, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n  className?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n  /**\n   * Focuses the first element in the component.\n   */\n  focusFirst(): void;\n}\n\nfunction FocusLock(\n  { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n  ref: React.Ref<FocusLockRef>\n) {\n  const restoreFocusTargetRef = useRef<HTMLOrSVGElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const focusFirst = () => {\n    if (containerRef.current) {\n      getFirstFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  const focusLast = () => {\n    if (containerRef.current) {\n      getLastFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  // Captures focus when `autoFocus` is set, and the component is mounted or\n  // `disabled` changes from true to false.\n  useEffect(() => {\n    const assignRestoreFocusTarget = () => {\n      if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n        restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n      }\n    };\n    if (autoFocus && !disabled) {\n      assignRestoreFocusTarget();\n      focusFirst();\n    }\n  }, [autoFocus, disabled]);\n\n  // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n  const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n  useEffect(() => {\n    if (previouslyDisabled !== !!disabled) {\n      setPreviouslyDisabled(!!disabled);\n      if (restoreFocus && disabled) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    }\n  }, [previouslyDisabled, disabled, restoreFocus]);\n\n  // Restore focus if `restoreFocus` is set and the component is unmounted.\n  // Using a callback ref for this is safer than using useEffect cleanups.\n  const restoreFocusHandler = useCallback(\n    (elem: HTMLDivElement | null) => {\n      if (elem === null && restoreFocus) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    },\n    [restoreFocus]\n  );\n\n  useImperativeHandle(ref, () => ({ focusFirst }));\n  const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n  const isFocusInside = (event: React.FocusEvent) => nodeBelongs(containerRef.current, event.relatedTarget);\n  return (\n    <>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusLast() : focusFirst())} />\n      <div className={className} ref={mergedRef}>\n        {children}\n      </div>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusFirst() : focusLast())} />\n    </>\n  );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (6f1df813)";
-export var GIT_SHA = "6f1df813";
+export var PACKAGE_VERSION = "3.0.0 (ea35614b)";
+export var GIT_SHA = "ea35614b";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (6f1df813)",
-  "GIT_SHA": "6f1df813",
+  "PACKAGE_VERSION": "3.0.0 (ea35614b)",
+  "GIT_SHA": "ea35614b",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6f1df81380f2d4a269fe203c8ddd1fcdf2d4b25d"
+  "commit": "ea35614bd6bd46630d623af0efab032bc03b7e01"
 }

package/package.json

@@ -165,7 +165,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.1296",
+  "version": "3.0.1297",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"