@digigov/ui 0.26.2 → 0.26.4

package/app/QrCodeViewer/types.d.ts

@@ -0,0 +1,29 @@
+import type { CSSProperties } from 'react';
+import qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
+export declare type QRProps = {
+    value: string;
+    size?: number;
+    level?: string;
+    bgColor?: string;
+    fgColor?: string;
+    style?: CSSProperties;
+    includeMargin?: boolean;
+    imageSettings?: ImageSettings;
+};
+export declare type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
+export declare type QRPropsSVG = QRProps & React.SVGProps<SVGSVGElement>;
+export declare type Modules = ReturnType<qrcodegen.QrCode['getModules']>;
+export declare type Excavation = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export declare type ImageSettings = {
+    src: string;
+    height: number;
+    width: number;
+    excavate: boolean;
+    x?: number;
+    y?: number;
+};

package/app/QrCodeViewer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/app/QrCodeViewer/utils.d.ts

@@ -0,0 +1,11 @@
+import { Modules, Excavation, ImageSettings } from '@digigov/ui/app/QrCodeViewer/types';
+export declare const MARGIN_SIZE = 4;
+export declare function generatePath(modules: Modules, margin?: number): string;
+export declare function excavateModules(modules: Modules, excavation: Excavation): Modules;
+export declare function getImageSettings(cells: Modules, size: number, includeMargin: boolean, imageSettings?: ImageSettings): null | {
+    x: number;
+    y: number;
+    h: number;
+    w: number;
+    excavation: Excavation | null;
+};

package/app/QrCodeViewer/utils.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MARGIN_SIZE = void 0;
+exports.excavateModules = excavateModules;
+exports.generatePath = generatePath;
+exports.getImageSettings = getImageSettings;
+var DEFAULT_IMG_SCALE = 0.1;
+var MARGIN_SIZE = 4;
+exports.MARGIN_SIZE = MARGIN_SIZE;
+
+function generatePath(modules) {
+  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var ops = [];
+  modules.forEach(function (row, y) {
+    var start = null;
+    row.forEach(function (cell, x) {
+      if (!cell && start !== null) {
+        // M0 0h7v1H0z injects the space with the move and drops the comma,
+        // saving a char per operation
+        ops.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
+        start = null;
+        return;
+      } // end of row, clean up or skip
+
+
+      if (x === row.length - 1) {
+        if (!cell) {
+          // We would have closed the op above already so this can only mean
+          // 2+ light modules in a row.
+          return;
+        }
+
+        if (start === null) {
+          // Just a single dark module.
+          ops.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
+        } else {
+          // Otherwise finish the current line.
+          ops.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
+        }
+
+        return;
+      }
+
+      if (cell && start === null) {
+        start = x;
+      }
+    });
+  });
+  return ops.join('');
+} // We could just do this in generatePath, except that we want to support
+// non-Path2D canvas, so we need to keep it an explicit step.
+
+
+function excavateModules(modules, excavation) {
+  return modules.slice().map(function (row, y) {
+    if (y < excavation.y || y >= excavation.y + excavation.h) {
+      return row;
+    }
+
+    return row.map(function (cell, x) {
+      if (x < excavation.x || x >= excavation.x + excavation.w) {
+        return cell;
+      }
+
+      return false;
+    });
+  });
+}
+
+function getImageSettings(cells, size, includeMargin, imageSettings) {
+  if (imageSettings == null) {
+    return null;
+  }
+
+  var margin = includeMargin ? MARGIN_SIZE : 0;
+  var numCells = cells.length + margin * 2;
+  var defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+  var scale = numCells / size;
+  var w = (imageSettings.width || defaultSize) * scale;
+  var h = (imageSettings.height || defaultSize) * scale;
+  var x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
+  var y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
+  var excavation;
+
+  if (imageSettings.excavate) {
+    var floorX = Math.floor(x);
+    var floorY = Math.floor(y);
+    var ceilW = Math.ceil(w + x - floorX);
+    var ceilH = Math.ceil(h + y - floorY);
+    excavation = {
+      x: floorX,
+      y: floorY,
+      w: ceilW,
+      h: ceilH
+    };
+  }
+
+  return {
+    x: x,
+    y: y,
+    h: h,
+    w: w,
+    excavation: excavation
+  };
+}

package/app/index.d.ts

@@ -1,6 +1,7 @@
 export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
+export * from '@digigov/ui/app/QrCodeViewer';
 export * from '@digigov/ui/app/Header';
 export * from '@digigov/ui/app/i18n';
 export * from '@digigov/ui/app/I18nText';

package/app/index.js

@@ -43,6 +43,19 @@ Object.keys(_QrCodeScanner).forEach(function (key) {
   });
 });
 
+var _QrCodeViewer = require("@digigov/ui/app/QrCodeViewer");
+
+Object.keys(_QrCodeViewer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QrCodeViewer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _QrCodeViewer[key];
+    }
+  });
+});
+
 var _Header = require("@digigov/ui/app/Header");
 
 Object.keys(_Header).forEach(function (key) {

package/core/FileUpload/index.d.ts

@@ -1,3 +1,4 @@
 export * from '@digigov/react-core/FileUpload';
 import FileUpload from '@digigov/react-core/FileUpload';
+export * from '@digigov/react-core/FileUploadContainer';
 export default FileUpload;

package/core/FileUpload/index.js

@@ -22,6 +22,20 @@ Object.keys(_FileUpload).forEach(function (key) {
   });
 });
 
+var _FileUploadContainer = require("@digigov/react-core/FileUploadContainer");
+
+Object.keys(_FileUploadContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FileUploadContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FileUploadContainer[key];
+    }
+  });
+});
+
 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; }

package/es/admin/AutoComplete/index.js

@@ -572,16 +572,26 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         role: "listbox"
       }, options.map(function (option, index) {
         var showFocused = focused === -1 ? selected === index : focused === index;
-        var iosPosinsetHtml = isIosDevice() ? "<span id=".concat(id, "__option-suffix--").concat(index, " style=\"border:0;clip:rect(0 0 0 0);height:1px;") + 'marginBottom:-1px;marginRight:-1px;overflow:hidden;padding:0;position:absolute;' + 'whiteSpace:nowrap;width:1px">' + " ".concat(index + 1, " of ").concat(options.length, "</span>") : '';
+        var iosPosinsetHtml = isIosDevice() ? /*#__PURE__*/React.createElement("span", {
+          id: "".concat(id, "__option-suffix--").concat(index),
+          style: {
+            border: '0',
+            clip: 'rect(0 0 0 0)',
+            height: '1px',
+            marginBottom: '-1px',
+            marginRight: '-1px',
+            overflow: 'hidden',
+            padding: '0',
+            position: 'absolute',
+            whiteSpace: 'nowrap',
+            width: '1px'
+          }
+        }, index + 1, " \u03B1\u03C0\u03CC ", options.length) : '';
         return /*#__PURE__*/React.createElement(AutoCompleteResultListItem, {
           isFocused: showFocused,
           isHovered: hovered,
           index: index,
           "aria-selected": focused === index ? 'true' : 'false',
-          dangerouslySetInnerHTML: {
-            __html: _this7.templateSuggestion(option) + iosPosinsetHtml
-          },
-          id: "".concat(id, "__option--").concat(index),
           key: index,
           onBlur: function onBlur(event) {
             return _this7.handleOptionBlur(event, index);
@@ -600,7 +610,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           tabIndex: -1,
           "aria-posinset": index + 1,
           "aria-setsize": options.length
-        });
+        }, _this7.templateSuggestion(option), " ", iosPosinsetHtml);
       }), showNoOptionsFound && /*#__PURE__*/React.createElement(AutoCompleteNoResult, null, tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults())), /*#__PURE__*/React.createElement(AutoCompleteAssistiveHint, {
         id: assistiveHintID
       }, tAssistiveHint === null || tAssistiveHint === void 0 ? void 0 : tAssistiveHint()));

package/es/admin/CopyToClipboard/__stories__/Default.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { CopyToClipboard } from '@digigov/ui/admin';
+import { CopyToClipboard } from '@digigov/ui/admin/CopyToClipboard';
 import { Button } from '@digigov/ui';
 
 var _ref = /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "copied-text",
-  variant: "tooltipLeft",
+  variant: "tooltip-left",
   message: "text successfuly copied!",
   id: "copy-to-clipboard"
 }, /*#__PURE__*/React.createElement(Button, {

package/es/admin/CopyToClipboard/__stories__/MultipleCopies.js

@@ -59,7 +59,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Title, {
 
 var _ref4 = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "AAABBBFFFLLL",
-  variant: "tooltipLeft",
+  variant: "tooltip-left",
   message: "text successfuly copied!"
 }, /*#__PURE__*/React.createElement(Button, null, "\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7")), /*#__PURE__*/React.createElement(Button, {
   color: "secondary"
@@ -83,7 +83,7 @@ var _ref6 = /*#__PURE__*/React.createElement(Grid, {
   xs: 12
 }, /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "AAABBBFFFLLL",
-  variant: "tooltipLeft",
+  variant: "tooltip-left",
   message: "text successfuly copied!"
 }, /*#__PURE__*/React.createElement(Button, {
   color: "secondary"
@@ -108,7 +108,7 @@ export var MultipleCopies = function MultipleCopies() {
     }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
       return /*#__PURE__*/React.createElement(CopyToClipboard, {
         text: "MMMNNNKKKO",
-        variant: "tooltipRight",
+        variant: "tooltip-right",
         key: subIndex
       }, /*#__PURE__*/React.createElement(Button, {
         key: subIndex,

package/es/admin/CopyToClipboard/index.js

@@ -7,8 +7,10 @@ import { useTranslation } from '@digigov/ui/app';
 export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipboard(_ref, ref) {
   var text = _ref.text,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'tooltipRight' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'tooltip-right' : _ref$variant,
       message = _ref.message,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 3000 : _ref$timeout,
       children = _ref.children;
 
   var _useState = useState(false),
@@ -20,11 +22,11 @@ export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipbo
       t = _useTranslation.t;
 
   useEffect(function () {
-    var timeout = setTimeout(function () {
+    var timeoutInstance = setTimeout(function () {
       if (enabled) setEnabled(false);
-    }, 3000);
+    }, timeout);
     return function () {
-      return clearTimeout(timeout);
+      return clearTimeout(timeoutInstance);
     };
   }, [enabled]);
 

package/es/app/Footer/Footer.stories.js

@@ -9,4 +9,5 @@ export * from './__stories__/FooterWithLogo';
 export * from './__stories__/FooterWithLink';
 export * from './__stories__/DefaultCopyright';
 export * from './__stories__/FooterWithSecondaryNavigation';
-export * from './__stories__/FooterAllInclusive';
+export * from './__stories__/FooterAllInclusive';
+export * from './__stories__/YearCopyright';

package/es/app/Footer/__stories__/FooterWithLogo.js

@@ -11,7 +11,7 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
   src: logo1
 }), /*#__PURE__*/React.createElement(FooterImage, {
   src: logo2
-})), /*#__PURE__*/React.createElement(Copyright, null, "\xA9 Copyright 2021 - \u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
+})), /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://grnet.gr/",
   target: "_blank"
 }, ' ', "\u0395\u0394\u03A5\u03A4\u0395", ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {

package/es/app/Footer/__stories__/FooterWithSecondaryNavigation.js

@@ -18,7 +18,7 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
   size: "m"
 }), /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
   grow: true
-}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(Copyright, null, "\xA9 Copyright 2021 - \u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
+}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://grnet.gr/",
   target: "_blank"
 }, ' ', "\u0395\u0394\u03A5\u03A4\u0395", ' ', /*#__PURE__*/React.createElement(VisuallyHidden, null, "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {

package/es/app/Footer/__stories__/YearCopyright.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Copyright, { getCopyright } from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import Footer from '@digigov/ui/govgr/Footer';
+import { FooterMeta, FooterMetaItem, FooterContent, FooterInlineList, FooterInlineListItem, FooterLink, VisuallyHidden } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2");
+
+var _ref2 = /*#__PURE__*/React.createElement(FooterInlineList, null, /*#__PURE__*/React.createElement(FooterInlineListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
+  href: "#"
+}, " \u0391\u03BA\u03CC\u03BC\u03B1 \u03BC\u03B9\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/React.createElement(FooterInlineListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, " \u0391\u03BA\u03CC\u03BC\u03B1 \u03BC\u03B9\u03B1")));
+
+var _ref3 = /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null));
+
+export var YearCopyright = function YearCopyright() {
+  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
+    grow: true
+  }, /*#__PURE__*/React.createElement(FooterContent, null, _ref, _ref2, /*#__PURE__*/React.createElement(Copyright, {
+    copyright: getCopyright()
+  }))), _ref3));
+};
+export default YearCopyright;

package/es/app/QrCodeViewer/QRCode.stories.js

@@ -0,0 +1,8 @@
+/* eslint-disable digigov/no-relative-imports */
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+export default {
+  title: 'Digigov UI/app/QrCodeViewer',
+  component: QrCodeViewer
+};
+export * from './__stories__/Default';
+export * from './__stories__/Custom';

package/es/app/QrCodeViewer/__stories__/Custom.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+import logo from '@digigov/ui/govgr/images/greek-government-base64';
+export var Custom = function Custom() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(QrCodeViewer, {
+    value: "https://www.gov.gr/",
+    size: 126,
+    bgColor: '#ededed',
+    fgColor: '#003375',
+    level: 'H',
+    includeMargin: false,
+    imageSettings: {
+      src: "".concat(logo),
+      x: undefined,
+      y: undefined,
+      height: 35,
+      width: 50,
+      excavate: true
+    }
+  }));
+};
+export default Custom;

package/es/app/QrCodeViewer/__stories__/Default.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(QrCodeViewer, {
+  value: "https://www.gov.gr/"
+}));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/app/QrCodeViewer/index.js

@@ -0,0 +1,224 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "style", "imageSettings"],
+    _excluded2 = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "imageSettings"],
+    _excluded3 = ["renderAs"];
+import React, { useRef, useEffect, useState } from 'react';
+import qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
+import { generatePath, excavateModules, getImageSettings, MARGIN_SIZE } from '@digigov/ui/app/QrCodeViewer/utils';
+var DEFAULT_SIZE = 128;
+var DEFAULT_LEVEL = 'L';
+var DEFAULT_BGCOLOR = '#FFFFFF';
+var DEFAULT_FGCOLOR = '#000000';
+var DEFAULT_INCLUDEMARGIN = false;
+
+var SUPPORTS_PATH2D = function () {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e) {
+    return false;
+  }
+
+  return true;
+}();
+
+var ERROR_LEVEL_MAP = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH
+};
+
+function QrCodeViewerCanvas(props) {
+  var value = props.value,
+      _props$size = props.size,
+      size = _props$size === void 0 ? DEFAULT_SIZE : _props$size,
+      _props$level = props.level,
+      level = _props$level === void 0 ? DEFAULT_LEVEL : _props$level,
+      _props$bgColor = props.bgColor,
+      bgColor = _props$bgColor === void 0 ? DEFAULT_BGCOLOR : _props$bgColor,
+      _props$fgColor = props.fgColor,
+      fgColor = _props$fgColor === void 0 ? DEFAULT_FGCOLOR : _props$fgColor,
+      _props$includeMargin = props.includeMargin,
+      includeMargin = _props$includeMargin === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin,
+      style = props.style,
+      imageSettings = props.imageSettings,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var imgSrc = imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.src;
+
+  var _canvas = useRef(null);
+
+  var _image = useRef(null); // We're just using this state to trigger rerenders when images load. We
+  // Don't actually read the value anywhere. A smarter use of useEffect would
+  // depend on this value.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isImgLoaded = _useState2[0],
+      setIsImageLoaded = _useState2[1];
+
+  useEffect(function () {
+    // Always update the canvas. It's cheap enough and we want to be correct
+    // with the current state.
+    if (_canvas.current !== null) {
+      var canvas = _canvas.current;
+      var ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        return;
+      }
+
+      var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+      var margin = includeMargin ? MARGIN_SIZE : 0;
+      var numCells = cells.length + margin * 2;
+      var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+      var image = _image.current;
+      var haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
+
+      if (haveImageToRender && calculatedImageSettings) {
+        if (calculatedImageSettings.excavation != null) {
+          cells = excavateModules(cells, calculatedImageSettings.excavation);
+        }
+      } // We're going to scale this so that the number of drawable units
+      // matches the number of cells. This avoids rounding issues, but does
+      // result in some potentially unwanted single pixel issues between
+      // blocks, only in environments that don't support Path2D.
+
+
+      var pixelRatio = window.devicePixelRatio || 1;
+      canvas.height = canvas.width = size * pixelRatio;
+      var scale = size / numCells * pixelRatio;
+      ctx.scale(scale, scale); // Draw solid background, only paint dark modules.
+
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, numCells, numCells);
+      ctx.fillStyle = fgColor;
+
+      if (SUPPORTS_PATH2D) {
+        // $FlowFixMe: Path2D c'tor doesn't support args yet.
+        ctx.fill(new Path2D(generatePath(cells, margin)));
+      } else {
+        cells.forEach(function (row, rdx) {
+          row.forEach(function (cell, cdx) {
+            if (cell) {
+              ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+            }
+          });
+        });
+      }
+
+      if (haveImageToRender && calculatedImageSettings) {
+        if (image instanceof HTMLImageElement) {
+          ctx.drawImage(image, calculatedImageSettings.x + margin, calculatedImageSettings.y + margin, calculatedImageSettings.w, calculatedImageSettings.h);
+        }
+      }
+    }
+  }); // Ensure we mark image loaded as false here so we trigger updating the
+  // canvas in our other effect.
+
+  useEffect(function () {
+    setIsImageLoaded(false);
+  }, [imgSrc, isImgLoaded]);
+
+  var canvasStyle = _extends({
+    height: size,
+    width: size
+  }, style);
+
+  var img;
+
+  if (imgSrc != null) {
+    img = /*#__PURE__*/React.createElement("img", {
+      src: imgSrc,
+      key: imgSrc,
+      style: {
+        display: 'none'
+      },
+      onLoad: function onLoad() {
+        setIsImageLoaded(true);
+      },
+      ref: _image
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", _extends({
+    style: canvasStyle,
+    height: size,
+    width: size,
+    ref: _canvas
+  }, otherProps)), img);
+}
+
+function QrCodeViewerSVG(props) {
+  var value = props.value,
+      _props$size2 = props.size,
+      size = _props$size2 === void 0 ? DEFAULT_SIZE : _props$size2,
+      _props$level2 = props.level,
+      level = _props$level2 === void 0 ? DEFAULT_LEVEL : _props$level2,
+      _props$bgColor2 = props.bgColor,
+      bgColor = _props$bgColor2 === void 0 ? DEFAULT_BGCOLOR : _props$bgColor2,
+      _props$fgColor2 = props.fgColor,
+      fgColor = _props$fgColor2 === void 0 ? DEFAULT_FGCOLOR : _props$fgColor2,
+      _props$includeMargin2 = props.includeMargin,
+      includeMargin = _props$includeMargin2 === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin2,
+      imageSettings = props.imageSettings,
+      otherProps = _objectWithoutProperties(props, _excluded2);
+
+  var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+  var margin = includeMargin ? MARGIN_SIZE : 0;
+  var numCells = cells.length + margin * 2;
+  var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+  var image;
+
+  if (imageSettings != null && calculatedImageSettings != null) {
+    if (calculatedImageSettings.excavation != null) {
+      cells = excavateModules(cells, calculatedImageSettings.excavation);
+    }
+
+    image = /*#__PURE__*/React.createElement("image", {
+      xlinkHref: imageSettings.src,
+      height: calculatedImageSettings.h,
+      width: calculatedImageSettings.w,
+      x: calculatedImageSettings.x + margin,
+      y: calculatedImageSettings.y + margin,
+      preserveAspectRatio: "none"
+    });
+  } // Drawing strategy: instead of a rect per module, we're going to create a
+  // single path for the dark modules and layer that on top of a light rect,
+  // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
+  // way faster than DOM ops.
+  // For level 1, 441 nodes -> 2
+  // For level 40, 31329 -> 2
+
+
+  var fgPath = generatePath(cells, margin);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    height: size,
+    width: size,
+    viewBox: "0 0 ".concat(numCells, " ").concat(numCells)
+  }, otherProps), /*#__PURE__*/React.createElement("path", {
+    fill: bgColor,
+    d: "M0,0 h".concat(numCells, "v").concat(numCells, "H0z"),
+    shapeRendering: "crispEdges"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: fgColor,
+    d: fgPath,
+    shapeRendering: "crispEdges"
+  }), image);
+}
+
+export var QrCodeViewer = function QrCodeViewer(props) {
+  var renderAs = props.renderAs,
+      otherProps = _objectWithoutProperties(props, _excluded3);
+
+  if (renderAs === 'svg') {
+    return /*#__PURE__*/React.createElement(QrCodeViewerSVG, otherProps);
+  }
+
+  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, otherProps);
+};
+export default QrCodeViewer;