dibk-design 2.4.0 → 2.5.1

package/dist/assets/svg/x-symbol.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path fill="#072938" stroke="#072938" stroke-linecap="round" stroke-width="3.23" d="m3.97 3.57 17.44 18.2m-17.44.01L21.41 3.57"/></svg>

package/dist/components/Dialog.js

@@ -7,13 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _xSymbol = _interopRequireDefault(require("../assets/svg/x-symbol.svg?url"));
 var _DialogModule = _interopRequireDefault(require("./Dialog.module.scss"));
+var _helpers = require("../functions/helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Dialog = function Dialog(props) {
-  var wrapperRef = (0, _react.useRef)();
-  var hiddenInputWrapperRef = (0, _react.useRef)();
+  var dialogRef = (0, _react.useRef)();
+  var wrapperRef = (0, _react.useCallback)(function (element) {
+    if (!!element) {
+      (0, _helpers.addFocusTrapInsideElement)(element);
+    }
+  }, []);
   (0, _react.useEffect)(function () {
     var keyDownFunction = function keyDownFunction(event) {
       switch (event.keyCode) {
@@ -25,31 +31,33 @@ var Dialog = function Dialog(props) {
       }
     };
     var handleClickOutside = function handleClickOutside(event) {
-      if (wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+      if (dialogRef !== null && dialogRef !== void 0 && dialogRef.current && !dialogRef.current.contains(event.target)) {
         props.onClickOutside();
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", keyDownFunction, false);
-    hiddenInputWrapperRef.current.tabIndex = -1;
-  }, [props]);
+  }, [props, wrapperRef]);
   return _react.default.createElement("div", {
-    className: "".concat(_DialogModule.default.dialogOverlay, " ").concat(props.hidden && _DialogModule.default.hidden)
+    className: "".concat(_DialogModule.default.dialogOverlay, " ").concat(props.hidden && _DialogModule.default.hidden),
+    ref: wrapperRef
   }, _react.default.createElement("div", {
-    ref: wrapperRef,
+    ref: dialogRef,
     className: "".concat(_DialogModule.default.dialogContent, " ").concat(props.noPadding ? _DialogModule.default.noPadding : ""),
     style: {
       maxWidth: props.maxWidth
     }
   }, props.closeButton ? _react.default.createElement("button", {
+    "aria-label": "Lukk dialog",
     onClick: props.onClickOutside,
     className: _DialogModule.default.closeButton
-  }) : "", _react.default.createElement("input", {
-    type: "button",
-    ref: hiddenInputWrapperRef,
-    className: _DialogModule.default.hidden,
-    autoFocus: true
-  }), props.children));
+  }, _react.default.createElement("img", {
+    src: _xSymbol.default,
+    alt: ""
+  })) : null, _react.default.createElement("div", {
+    "aria-live": "assertive",
+    role: "dialog"
+  }, props.children)));
 };
 Dialog.propTypes = {
   maxWidth: _propTypes.default.string,

package/dist/components/Dialog.module.scss

@@ -67,13 +67,9 @@
             &:hover {
                 text-decoration: none;
             }
-            &::after {
-                font-family: "Helvetica", "Arial", sans-serif;
-                display: inline-block;
-                content: "\00d7";
-                font-size: 30px;
-                line-height: 20px;
-                margin-left: 5px;
+            img {
+                width: 17px;
+                height: 17px;
             }
         }
     }

package/dist/functions/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cloneThroughFragments = exports.classNameArrayToClassNameString = void 0;
+exports.setFocusToElement = exports.getFocusableElementsInsideElement = exports.cloneThroughFragments = exports.classNameArrayToClassNameString = exports.addFocusTrapInsideElement = void 0;
 var _react = require("react");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -29,4 +29,38 @@ var cloneThroughFragments = function cloneThroughFragments(children) {
     return c;
   });
 };
-exports.cloneThroughFragments = cloneThroughFragments;
+exports.cloneThroughFragments = cloneThroughFragments;
+var setFocusToElement = function setFocusToElement(element) {
+  var autoFocusElement = document.createElement("button");
+  element.prepend(autoFocusElement);
+  autoFocusElement.focus();
+  autoFocusElement.remove();
+};
+exports.setFocusToElement = setFocusToElement;
+var getFocusableElementsInsideElement = function getFocusableElementsInsideElement(element) {
+  return Array.from(element.querySelectorAll('button, [href], input, [tabindex="0"]')).filter(function (resultElement) {
+    return resultElement;
+  });
+};
+exports.getFocusableElementsInsideElement = getFocusableElementsInsideElement;
+var addFocusTrapInsideElement = function addFocusTrapInsideElement(element) {
+  setFocusToElement(element);
+  var focusableElements = getFocusableElementsInsideElement(element);
+  var firstFocusableElement = focusableElements[0];
+  var lastFocusableElement = focusableElements[focusableElements.length - 1];
+  firstFocusableElement.onkeydown = function (event) {
+    if (event.keyCode === 9 && event.shiftKey) {
+      lastFocusableElement.focus();
+    }
+  };
+  lastFocusableElement.onclick = function () {
+    firstFocusableElement.focus();
+  };
+  lastFocusableElement.onkeydown = function (event) {
+    if (event.keyCode === 9 && !event.shiftKey) {
+      event.preventDefault();
+      firstFocusableElement.focus();
+    }
+  };
+};
+exports.addFocusTrapInsideElement = addFocusTrapInsideElement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dibk-design",
-    "version": "2.4.0",
+    "version": "2.5.1",
     "private": false,
     "main": "dist/index.js",
     "module": "dist/index.js",