@decisiv/ui-components 2.0.1-alpha.199 → 2.0.1-alpha.200

package/lib/components/Modal/ResponsiveModalWrapper.js

@@ -56,7 +56,7 @@ var ResponsiveModalWrapper = function ResponsiveModalWrapper(_ref) {
       container = _useElement2[0],
       containerRef = _useElement2[1];
 
-  (0, _utils.useKeepFocusWithin)(container);
+  (0, _utils.useKeepFocusWithin)(container, onClose !== undefined);
   var uuid = (0, _useUniqueId.default)(id, 'modal-');
   var modalHeaderId = "modal-header-".concat(uuid);
   var modalContentId = "modal-content-".concat(uuid);

package/lib/components/Modal/utils.d.ts

@@ -1,4 +1,4 @@
 export declare function useReturnFocus(returnFocus: boolean): void;
 export declare function useElement(): [HTMLElement | null, (node: HTMLElement | null) => void];
-export declare function useKeepFocusWithin(container: HTMLElement | null): void;
+export declare function useKeepFocusWithin(container: HTMLElement | null, hasCloseButton: boolean): void;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/Modal/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/utils.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,CAWzD;AAUD,wBAAgB,UAAU,IAAI,CAC5B,WAAW,GAAG,IAAI,EAClB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CACnC,CAUA;AAoCD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAyDtE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/utils.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,CAWzD;AAUD,wBAAgB,UAAU,IAAI,CAC5B,WAAW,GAAG,IAAI,EAClB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CACnC,CAUA;AAoCD,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,cAAc,EAAE,OAAO,GACtB,IAAI,CA2DN"}

package/lib/components/Modal/utils.js

@@ -95,19 +95,21 @@ function useTabbableElements(container) {
  */
 
 
-function useKeepFocusWithin(container) {
+function useKeepFocusWithin(container, hasCloseButton) {
   var tabbableElements = useTabbableElements(container); // This effect should run only when the container changes from null to an element. Since
   // the component does not control the tabbable elements and they may be updated, we
   // don't want to automatically change the focus at any other time.
 
   (0, _react.useEffect)(function () {
     if (container && !(0, _isEmpty.default)(tabbableElements)) {
-      // The first tabbable element will be the close button, but that isn't where
-      // the user's focus should start. Instead, get the second tabbable element.
-      var secondTabbable = (0, _get.default)(tabbableElements, 1, {
+      // Determine where to set the initial focus within the modal:
+      // - If the modal includes a close button, it will be the first tabbable element. However, user focus should not start there. Instead, move the focus to the second tabbable element.
+      // - If there is no close button, set the focus to the first tabbable element.
+      var focusElementIndex = hasCloseButton ? 1 : 0;
+      var focusElement = (0, _get.default)(tabbableElements, focusElementIndex, {
         focus: function focus() {}
       });
-      secondTabbable.focus();
+      focusElement.focus();
     }
   }, [container]); // eslint-disable-line react-hooks/exhaustive-deps
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.199+f09cd92",
+  "version": "2.0.1-alpha.200+acba5d1",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "f09cd929f1f2639d02830db24dee2f900fcc3769"
+  "gitHead": "acba5d12cd37ed776d447166a107a5345394fdb1"
 }