@digigov/ui 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,6 +1,30 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Wed, 09 Mar 2022 13:21:47 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Apr 2022 12:32:51 GMT and should not be manually modified.
+
+## 0.16.0
+Thu, 14 Apr 2022 12:32:51 GMT
+
+### Minor changes
+
+- create I18nText component which translates complex sentences
+
+### Patches
+
+- add text translations in en and el locales
+
+## 0.15.1
+Wed, 30 Mar 2022 12:28:30 GMT
+
+_Version update only_
+
+## 0.15.0
+Thu, 17 Mar 2022 10:24:06 GMT
+
+### Minor changes
+
+- Integrate @digigov/react-extensions/Dropdown component
+- rename TableHeaderCell to TableHeadCell export
 
 ## 0.14.0
 Wed, 09 Mar 2022 13:21:47 GMT

package/admin/Dropdown/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DropdownProps as CoreDropdownProps } from '@digigov/react-extensions/admin/Dropdown';
+export * from '@digigov/react-extensions/admin/DropdownButton';
+export * from '@digigov/react-extensions/admin/DropdownContent';
+export interface DropdownProps extends CoreDropdownProps {
+    /**
+     * Use closeBehaviour to set the way that the Dropdown will close.
+     */
+    closeBehaviour?: 'clickButton' | 'clickOutside';
+}
+/**
+ * Dropdown component is used for showing more options with a button.
+ */
+export declare const Dropdown: ({ closeBehaviour, ...props }: DropdownProps) => React.ReactElement;
+export default Dropdown;

package/admin/Dropdown/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Dropdown: true
+};
+exports["default"] = exports.Dropdown = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Dropdown = _interopRequireDefault(require("@digigov/react-extensions/admin/Dropdown"));
+
+var _DropdownButton = require("@digigov/react-extensions/admin/DropdownButton");
+
+Object.keys(_DropdownButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DropdownButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownButton[key];
+    }
+  });
+});
+
+var _DropdownContent = require("@digigov/react-extensions/admin/DropdownContent");
+
+Object.keys(_DropdownContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DropdownContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownContent[key];
+    }
+  });
+});
+var _excluded = ["closeBehaviour"];
+
+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; }
+
+/**
+ * Dropdown component is used for showing more options with a button.
+ */
+var Dropdown = function Dropdown(_ref) {
+  var _ref$closeBehaviour = _ref.closeBehaviour,
+      closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var innerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (innerRef.current && !innerRef.current.contains(event.target)) {
+        innerRef.current.open = false;
+      }
+    };
+
+    if (closeBehaviour === 'clickOutside') {
+      document.addEventListener('click', handleClickOutside, true);
+    }
+
+    return function () {
+      if (closeBehaviour === 'clickOutside') {
+        document.removeEventListener('click', handleClickOutside, true);
+      }
+    };
+  }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+
+  return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], (0, _extends2["default"])({
+    ref: innerRef
+  }, props));
+};
+
+exports.Dropdown = Dropdown;
+var _default = Dropdown;
+exports["default"] = _default;

package/admin/index.d.ts

@@ -0,0 +1 @@
+export * from '@digigov/ui/admin/Dropdown';

package/admin/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Dropdown = require("@digigov/ui/admin/Dropdown");
+
+Object.keys(_Dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dropdown[key];
+    }
+  });
+});

package/api/APIErrors.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 export declare class APIErrors extends React.Component<{
-    fallback: React.ElementType<any>;
+    fallback: any;
 }> {
     state: {
         hasError: boolean;
         error: null;
     };
-    static getDerivedStateFromError(error: Error): object;
-    render(): React.ReactNode;
+    static getDerivedStateFromError(error: Error): Record<string, any>;
+    render(): any;
 }
 export default APIErrors;
 export declare class APIError extends Error {

package/app/I18nText.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface I18nTextProps {
+    children?: React.ReactNode;
+    i18nKey?: string;
+}
+export declare const I18nText: ({ i18nKey, children }: {
+    i18nKey: any;
+    children: any;
+}) => JSX.Element;
+export default I18nText;

package/app/I18nText.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.I18nText = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("@digigov/ui/app/i18n");
+
+var _app = require("@digigov/ui/app");
+
+var isObject = function isObject(value) {
+  return !!(value && (0, _typeof2["default"])(value) === 'object' && !Array.isArray(value));
+};
+
+var resultTranslate = function resultTranslate(translation, children) {
+  var parser = new DOMParser();
+  var childrenCloned = (0, _toConsumableArray2["default"])(children);
+  console.log('children cloned are', childrenCloned);
+  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+};
+
+var recursiveReplace = function recursiveReplace(original, translation) {
+  if (!Array.isArray(original)) {
+    original = [original];
+  }
+
+  original.forEach(function (element, i) {
+    if (typeof element === 'string' || typeof element === 'number') {
+      var text = [];
+      var regex = /{([^}]+)}/;
+
+      if (regex.test(translation[i].textContent)) {
+        var textArray = translation[i].textContent.split(' ');
+        console.log('textArray is', textArray);
+
+        if (textArray.length === 1) {
+          return false;
+        } else {
+          textArray.forEach(function (txt) {
+            if (!regex.test(txt)) {
+              text.push(txt);
+            } else {
+              text.push(original[i]);
+            }
+          });
+          return original[i] = text.join(' ');
+        }
+      } else {
+        return original[i] = translation[i].textContent;
+      }
+    }
+
+    if (isObject(element)) {
+      original[i] = /*#__PURE__*/_react["default"].cloneElement(original[i], (0, _extends2["default"])({}, original[i].props, {
+        children: recursiveReplace(original[i].props.children, translation[i].childNodes)
+      }));
+    }
+  });
+  return original;
+};
+
+var I18nText = function I18nText(_ref) {
+  var i18nKey = _ref.i18nKey,
+      children = _ref.children;
+  var translation = (0, _i18n.defaultTranslate)(i18nKey);
+  var result = resultTranslate(translation, children);
+
+  var _useTranslation = (0, _app.useTranslation)(),
+      Trans = _useTranslation.Trans;
+
+  if (Trans) {
+    return /*#__PURE__*/_react["default"].createElement(Trans, {
+      i18nKey: i18nKey
+    }, children);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, result);
+};
+
+exports.I18nText = I18nText;
+var _default = I18nText;
+exports["default"] = _default;

package/app/i18n.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 export interface I18NContextProps {
+    Trans?: any;
     t: (str: string) => string;
     children?: React.ReactNode;
     i18n?: any;
 }
+export declare const defaultTranslate: (key: any) => any;
 export declare const I18NContext: React.Context<I18NContextProps>;
 export declare const I18NProvider: React.FC<I18NContextProps>;
 export declare const useTranslation: () => I18NContextProps;

package/app/i18n.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTranslation = exports["default"] = exports.I18NProvider = exports.I18NContext = void 0;
+exports.useTranslation = exports.defaultTranslate = exports["default"] = exports.I18NProvider = exports.I18NContext = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -34,6 +34,8 @@ var defaultTranslate = function defaultTranslate(key) {
   }
 };
 
+exports.defaultTranslate = defaultTranslate;
+
 var I18NContext = /*#__PURE__*/_react["default"].createContext({
   t: defaultTranslate
 });

package/app/index.d.ts

@@ -3,3 +3,4 @@ export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/Header';
 export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/I18nText';

package/app/index.js

@@ -67,4 +67,17 @@ Object.keys(_i18n).forEach(function (key) {
       return _i18n[key];
     }
   });
+});
+
+var _I18nText = require("@digigov/ui/app/I18nText");
+
+Object.keys(_I18nText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _I18nText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _I18nText[key];
+    }
+  });
 });

package/core/PaginationLabel/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _PaginationLabel = _interopRequireDefault(require("@digigov/react-extensions/admin/PaginationLabel"));
 
-var _app = require("@digigov/ui/app");
+var _I18nText = require("@digigov/ui/app/I18nText");
 
 /**
  * PaginationLabel component is used for placing the pagination results label.
@@ -20,13 +20,11 @@ var PaginationLabel = /*#__PURE__*/_react["default"].forwardRef(function Paginat
   var start = _ref.start,
       end = _ref.end,
       total = _ref.total;
-
-  var _useTranslation = (0, _app.useTranslation)(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/_react["default"].createElement(_PaginationLabel["default"], {
     ref: ref
-  }, t('pagination.show'), " ", /*#__PURE__*/_react["default"].createElement("b", null, start), " ", t('pagination.to'), " ", /*#__PURE__*/_react["default"].createElement("b", null, end), ' ', t('pagination.of'), " ", /*#__PURE__*/_react["default"].createElement("b", null, total), " ", t('pagination.results'));
+  }, /*#__PURE__*/_react["default"].createElement(_I18nText.I18nText, {
+    i18nKey: "pagination.label"
+  }, "Showing ", /*#__PURE__*/_react["default"].createElement("b", null, start), " to ", /*#__PURE__*/_react["default"].createElement("b", null, end), " of ", /*#__PURE__*/_react["default"].createElement("b", null, total), " results."));
 });
 
 exports.PaginationLabel = PaginationLabel;

package/core/Table/index.d.ts

@@ -3,5 +3,5 @@ export * from '@digigov/react-core/TableBody';
 export * from '@digigov/react-core/TableCaption';
 export * from '@digigov/react-core/TableDataCell';
 export * from '@digigov/react-core/TableHead';
-export * from '@digigov/react-core/TableHeaderCell';
+export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';

package/core/Table/index.js

@@ -69,15 +69,15 @@ Object.keys(_TableHead).forEach(function (key) {
   });
 });
 
-var _TableHeaderCell = require("@digigov/react-core/TableHeaderCell");
+var _TableHeadCell = require("@digigov/react-core/TableHeadCell");
 
-Object.keys(_TableHeaderCell).forEach(function (key) {
+Object.keys(_TableHeadCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _TableHeaderCell[key]) return;
+  if (key in exports && exports[key] === _TableHeadCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _TableHeaderCell[key];
+      return _TableHeadCell[key];
     }
   });
 });

package/core/index.d.ts

@@ -1,18 +1,21 @@
 export { default as Button } from '@digigov/ui/core/Button';
 export * from '@digigov/ui/core/Button';
-export { default as WarningText } from '@digigov/ui/core/WarningText';
 export * from '@digigov/ui/core/Accordion';
 export * from '@digigov/ui/core/Blockquote';
+export * from '@digigov/ui/core/Breadcrumbs';
+export * from '@digigov/ui/core/Card';
 export * from '@digigov/ui/core/Details';
+export * from '@digigov/ui/core/Divider';
 export * from '@digigov/ui/core/ErrorSummary';
+export * from '@digigov/ui/core/Hidden';
 export * from '@digigov/ui/core/Link';
 export * from '@digigov/ui/core/List';
 export * from '@digigov/ui/core/NavList';
 export * from '@digigov/ui/core/ServiceBadge';
-export * from '@digigov/ui/core/SummaryList';
-export * from '@digigov/ui/core/Tabs';
 export * from '@digigov/ui/core/NotificationBanner';
+export * from '@digigov/ui/core/SummaryList';
 export * from '@digigov/ui/core/Table';
-export * from '@digigov/ui/core/Button';
-export * from '@digigov/ui/core/Divider';
+export * from '@digigov/ui/core/Tabs';
+export * from '@digigov/ui/core/VisuallyHidden';
+export { default as WarningText } from '@digigov/ui/core/WarningText';
 export * from '@digigov/ui/core/PaginationLabel';

package/core/index.js

@@ -38,8 +38,6 @@ Object.keys(_Button).forEach(function (key) {
   });
 });
 
-var _WarningText = _interopRequireDefault(require("@digigov/ui/core/WarningText"));
-
 var _Accordion = require("@digigov/ui/core/Accordion");
 
 Object.keys(_Accordion).forEach(function (key) {
@@ -68,6 +66,34 @@ Object.keys(_Blockquote).forEach(function (key) {
   });
 });
 
+var _Breadcrumbs = require("@digigov/ui/core/Breadcrumbs");
+
+Object.keys(_Breadcrumbs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Breadcrumbs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Breadcrumbs[key];
+    }
+  });
+});
+
+var _Card = require("@digigov/ui/core/Card");
+
+Object.keys(_Card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Card[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Card[key];
+    }
+  });
+});
+
 var _Details = require("@digigov/ui/core/Details");
 
 Object.keys(_Details).forEach(function (key) {
@@ -82,6 +108,20 @@ Object.keys(_Details).forEach(function (key) {
   });
 });
 
+var _Divider = require("@digigov/ui/core/Divider");
+
+Object.keys(_Divider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Divider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Divider[key];
+    }
+  });
+});
+
 var _ErrorSummary = require("@digigov/ui/core/ErrorSummary");
 
 Object.keys(_ErrorSummary).forEach(function (key) {
@@ -96,6 +136,20 @@ Object.keys(_ErrorSummary).forEach(function (key) {
   });
 });
 
+var _Hidden = require("@digigov/ui/core/Hidden");
+
+Object.keys(_Hidden).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Hidden[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Hidden[key];
+    }
+  });
+});
+
 var _Link = require("@digigov/ui/core/Link");
 
 Object.keys(_Link).forEach(function (key) {
@@ -152,76 +206,78 @@ Object.keys(_ServiceBadge).forEach(function (key) {
   });
 });
 
-var _SummaryList = require("@digigov/ui/core/SummaryList");
+var _NotificationBanner = require("@digigov/ui/core/NotificationBanner");
 
-Object.keys(_SummaryList).forEach(function (key) {
+Object.keys(_NotificationBanner).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SummaryList[key]) return;
+  if (key in exports && exports[key] === _NotificationBanner[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SummaryList[key];
+      return _NotificationBanner[key];
     }
   });
 });
 
-var _Tabs = require("@digigov/ui/core/Tabs");
+var _SummaryList = require("@digigov/ui/core/SummaryList");
 
-Object.keys(_Tabs).forEach(function (key) {
+Object.keys(_SummaryList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Tabs[key]) return;
+  if (key in exports && exports[key] === _SummaryList[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Tabs[key];
+      return _SummaryList[key];
     }
   });
 });
 
-var _NotificationBanner = require("@digigov/ui/core/NotificationBanner");
+var _Table = require("@digigov/ui/core/Table");
 
-Object.keys(_NotificationBanner).forEach(function (key) {
+Object.keys(_Table).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NotificationBanner[key]) return;
+  if (key in exports && exports[key] === _Table[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NotificationBanner[key];
+      return _Table[key];
     }
   });
 });
 
-var _Table = require("@digigov/ui/core/Table");
+var _Tabs = require("@digigov/ui/core/Tabs");
 
-Object.keys(_Table).forEach(function (key) {
+Object.keys(_Tabs).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Table[key]) return;
+  if (key in exports && exports[key] === _Tabs[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Table[key];
+      return _Tabs[key];
     }
   });
 });
 
-var _Divider = require("@digigov/ui/core/Divider");
+var _VisuallyHidden = require("@digigov/ui/core/VisuallyHidden");
 
-Object.keys(_Divider).forEach(function (key) {
+Object.keys(_VisuallyHidden).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Divider[key]) return;
+  if (key in exports && exports[key] === _VisuallyHidden[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Divider[key];
+      return _VisuallyHidden[key];
     }
   });
 });
 
+var _WarningText = _interopRequireDefault(require("@digigov/ui/core/WarningText"));
+
 var _PaginationLabel = require("@digigov/ui/core/PaginationLabel");
 
 Object.keys(_PaginationLabel).forEach(function (key) {

package/es/admin/Dropdown/index.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["closeBehaviour"];
+import React, { useEffect, useRef } from 'react';
+import CoreDropdown from '@digigov/react-extensions/admin/Dropdown';
+export * from '@digigov/react-extensions/admin/DropdownButton';
+export * from '@digigov/react-extensions/admin/DropdownContent';
+
+/**
+ * Dropdown component is used for showing more options with a button.
+ */
+export var Dropdown = function Dropdown(_ref) {
+  var _ref$closeBehaviour = _ref.closeBehaviour,
+      closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var innerRef = useRef();
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (innerRef.current && !innerRef.current.contains(event.target)) {
+        innerRef.current.open = false;
+      }
+    };
+
+    if (closeBehaviour === 'clickOutside') {
+      document.addEventListener('click', handleClickOutside, true);
+    }
+
+    return function () {
+      if (closeBehaviour === 'clickOutside') {
+        document.removeEventListener('click', handleClickOutside, true);
+      }
+    };
+  }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+
+  return /*#__PURE__*/React.createElement(CoreDropdown, _extends({
+    ref: innerRef
+  }, props));
+};
+export default Dropdown;

package/es/admin/index.js

@@ -0,0 +1 @@
+export * from '@digigov/ui/admin/Dropdown';

package/es/app/I18nText.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/typeof";
+import React from 'react';
+import { defaultTranslate } from '@digigov/ui/app/i18n';
+import { useTranslation } from '@digigov/ui/app';
+
+var isObject = function isObject(value) {
+  return !!(value && _typeof(value) === 'object' && !Array.isArray(value));
+};
+
+var resultTranslate = function resultTranslate(translation, children) {
+  var parser = new DOMParser();
+
+  var childrenCloned = _toConsumableArray(children);
+
+  console.log('children cloned are', childrenCloned);
+  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+};
+
+var recursiveReplace = function recursiveReplace(original, translation) {
+  if (!Array.isArray(original)) {
+    original = [original];
+  }
+
+  original.forEach(function (element, i) {
+    if (typeof element === 'string' || typeof element === 'number') {
+      var text = [];
+      var regex = /{([^}]+)}/;
+
+      if (regex.test(translation[i].textContent)) {
+        var textArray = translation[i].textContent.split(' ');
+        console.log('textArray is', textArray);
+
+        if (textArray.length === 1) {
+          return false;
+        } else {
+          textArray.forEach(function (txt) {
+            if (!regex.test(txt)) {
+              text.push(txt);
+            } else {
+              text.push(original[i]);
+            }
+          });
+          return original[i] = text.join(' ');
+        }
+      } else {
+        return original[i] = translation[i].textContent;
+      }
+    }
+
+    if (isObject(element)) {
+      original[i] = /*#__PURE__*/React.cloneElement(original[i], _extends({}, original[i].props, {
+        children: recursiveReplace(original[i].props.children, translation[i].childNodes)
+      }));
+    }
+  });
+  return original;
+};
+
+export var I18nText = function I18nText(_ref) {
+  var i18nKey = _ref.i18nKey,
+      children = _ref.children;
+  var translation = defaultTranslate(i18nKey);
+  var result = resultTranslate(translation, children);
+
+  var _useTranslation = useTranslation(),
+      Trans = _useTranslation.Trans;
+
+  if (Trans) {
+    return /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: i18nKey
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, result);
+};
+export default I18nText;

package/es/app/i18n.js

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["t", "children"];
 import React from 'react';
 import el from '@digigov/ui/locales/el';
-
-var defaultTranslate = function defaultTranslate(key) {
+export var defaultTranslate = function defaultTranslate(key) {
   try {
     if (key.split('.').length > 0) {
       return key.split('.').reduce(function (locale, path) {
@@ -20,7 +19,6 @@ var defaultTranslate = function defaultTranslate(key) {
     return key;
   }
 };
-
 export var I18NContext = /*#__PURE__*/React.createContext({
   t: defaultTranslate
 });

package/es/app/index.js

@@ -2,4 +2,5 @@ export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/Header';
-export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/I18nText';

package/es/core/PaginationLabel/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CorePaginationLabel from '@digigov/react-extensions/admin/PaginationLabel';
-import { useTranslation } from '@digigov/ui/app';
+import { I18nText } from '@digigov/ui/app/I18nText';
 
 /**
  * PaginationLabel component is used for placing the pagination results label.
@@ -9,12 +9,10 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
   var start = _ref.start,
       end = _ref.end,
       total = _ref.total;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/React.createElement(CorePaginationLabel, {
     ref: ref
-  }, t('pagination.show'), " ", /*#__PURE__*/React.createElement("b", null, start), " ", t('pagination.to'), " ", /*#__PURE__*/React.createElement("b", null, end), ' ', t('pagination.of'), " ", /*#__PURE__*/React.createElement("b", null, total), " ", t('pagination.results'));
+  }, /*#__PURE__*/React.createElement(I18nText, {
+    i18nKey: "pagination.label"
+  }, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results."));
 });
 export default PaginationLabel;

package/es/core/Table/index.js

@@ -3,5 +3,5 @@ export * from '@digigov/react-core/TableBody';
 export * from '@digigov/react-core/TableCaption';
 export * from '@digigov/react-core/TableDataCell';
 export * from '@digigov/react-core/TableHead';
-export * from '@digigov/react-core/TableHeaderCell';
+export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';

package/es/core/index.js

@@ -1,18 +1,21 @@
 export { default as Button } from '@digigov/ui/core/Button';
 export * from '@digigov/ui/core/Button';
-export { default as WarningText } from '@digigov/ui/core/WarningText';
 export * from '@digigov/ui/core/Accordion';
 export * from '@digigov/ui/core/Blockquote';
+export * from '@digigov/ui/core/Breadcrumbs';
+export * from '@digigov/ui/core/Card';
 export * from '@digigov/ui/core/Details';
+export * from '@digigov/ui/core/Divider';
 export * from '@digigov/ui/core/ErrorSummary';
+export * from '@digigov/ui/core/Hidden';
 export * from '@digigov/ui/core/Link';
 export * from '@digigov/ui/core/List';
 export * from '@digigov/ui/core/NavList';
 export * from '@digigov/ui/core/ServiceBadge';
-export * from '@digigov/ui/core/SummaryList';
-export * from '@digigov/ui/core/Tabs';
 export * from '@digigov/ui/core/NotificationBanner';
+export * from '@digigov/ui/core/SummaryList';
 export * from '@digigov/ui/core/Table';
-export * from '@digigov/ui/core/Button';
-export * from '@digigov/ui/core/Divider';
+export * from '@digigov/ui/core/Tabs';
+export * from '@digigov/ui/core/VisuallyHidden';
+export { default as WarningText } from '@digigov/ui/core/WarningText';
 export * from '@digigov/ui/core/PaginationLabel';

package/es/index.js

@@ -2,4 +2,5 @@ export * from '@digigov/ui/core';
 export * from '@digigov/ui/layouts';
 export * from '@digigov/ui/typography';
 export * from '@digigov/ui/app';
-export * from '@digigov/ui/govgr';
+export * from '@digigov/ui/govgr';
+export * from '@digigov/ui/admin';

package/es/locales/el.js

@@ -56,6 +56,13 @@ export default {
     show: 'Εμφανίζονται',
     to: 'έως',
     of: 'από',
-    results: 'αποτελέσματα'
+    results: 'αποτελέσματα',
+    label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα.'
+  },
+  upload: {
+    file: 'Αρχείο',
+    choose_file: 'Επιλογή αρχείου',
+    change_file: 'Αντικατάσταση αρχείου',
+    no_file: 'Δεν έχετε επιλέξει αρχείο'
   }
 };

package/es/locales/en.js

@@ -56,6 +56,13 @@ export default {
     show: 'Showing',
     to: 'to',
     of: 'of',
-    results: 'results'
+    results: 'results',
+    label: 'Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results'
+  },
+  upload: {
+    file: 'File',
+    choose_file: 'Choose file',
+    change_file: 'Change file',
+    no_file: 'You have not selected a file'
   }
 };

package/esm/admin/Dropdown/index.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["closeBehaviour"];
+import React, { useEffect, useRef } from 'react';
+import CoreDropdown from '@digigov/react-extensions/admin/Dropdown';
+export * from '@digigov/react-extensions/admin/DropdownButton';
+export * from '@digigov/react-extensions/admin/DropdownContent';
+
+/**
+ * Dropdown component is used for showing more options with a button.
+ */
+export var Dropdown = function Dropdown(_ref) {
+  var _ref$closeBehaviour = _ref.closeBehaviour,
+      closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var innerRef = useRef();
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (innerRef.current && !innerRef.current.contains(event.target)) {
+        innerRef.current.open = false;
+      }
+    };
+
+    if (closeBehaviour === 'clickOutside') {
+      document.addEventListener('click', handleClickOutside, true);
+    }
+
+    return function () {
+      if (closeBehaviour === 'clickOutside') {
+        document.removeEventListener('click', handleClickOutside, true);
+      }
+    };
+  }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+
+  return /*#__PURE__*/React.createElement(CoreDropdown, _extends({
+    ref: innerRef
+  }, props));
+};
+export default Dropdown;

package/esm/admin/index.js

@@ -0,0 +1 @@
+export * from '@digigov/ui/admin/Dropdown';

package/esm/app/I18nText.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/typeof";
+import React from 'react';
+import { defaultTranslate } from '@digigov/ui/app/i18n';
+import { useTranslation } from '@digigov/ui/app';
+
+var isObject = function isObject(value) {
+  return !!(value && _typeof(value) === 'object' && !Array.isArray(value));
+};
+
+var resultTranslate = function resultTranslate(translation, children) {
+  var parser = new DOMParser();
+
+  var childrenCloned = _toConsumableArray(children);
+
+  console.log('children cloned are', childrenCloned);
+  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+};
+
+var recursiveReplace = function recursiveReplace(original, translation) {
+  if (!Array.isArray(original)) {
+    original = [original];
+  }
+
+  original.forEach(function (element, i) {
+    if (typeof element === 'string' || typeof element === 'number') {
+      var text = [];
+      var regex = /{([^}]+)}/;
+
+      if (regex.test(translation[i].textContent)) {
+        var textArray = translation[i].textContent.split(' ');
+        console.log('textArray is', textArray);
+
+        if (textArray.length === 1) {
+          return false;
+        } else {
+          textArray.forEach(function (txt) {
+            if (!regex.test(txt)) {
+              text.push(txt);
+            } else {
+              text.push(original[i]);
+            }
+          });
+          return original[i] = text.join(' ');
+        }
+      } else {
+        return original[i] = translation[i].textContent;
+      }
+    }
+
+    if (isObject(element)) {
+      original[i] = /*#__PURE__*/React.cloneElement(original[i], _extends({}, original[i].props, {
+        children: recursiveReplace(original[i].props.children, translation[i].childNodes)
+      }));
+    }
+  });
+  return original;
+};
+
+export var I18nText = function I18nText(_ref) {
+  var i18nKey = _ref.i18nKey,
+      children = _ref.children;
+  var translation = defaultTranslate(i18nKey);
+  var result = resultTranslate(translation, children);
+
+  var _useTranslation = useTranslation(),
+      Trans = _useTranslation.Trans;
+
+  if (Trans) {
+    return /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: i18nKey
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, result);
+};
+export default I18nText;

package/esm/app/i18n.js

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["t", "children"];
 import React from 'react';
 import el from '@digigov/ui/locales/el';
-
-var defaultTranslate = function defaultTranslate(key) {
+export var defaultTranslate = function defaultTranslate(key) {
   try {
     if (key.split('.').length > 0) {
       return key.split('.').reduce(function (locale, path) {
@@ -20,7 +19,6 @@ var defaultTranslate = function defaultTranslate(key) {
     return key;
   }
 };
-
 export var I18NContext = /*#__PURE__*/React.createContext({
   t: defaultTranslate
 });

package/esm/app/index.js

@@ -2,4 +2,5 @@ export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/Header';
-export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/I18nText';

package/esm/core/PaginationLabel/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CorePaginationLabel from '@digigov/react-extensions/admin/PaginationLabel';
-import { useTranslation } from '@digigov/ui/app';
+import { I18nText } from '@digigov/ui/app/I18nText';
 
 /**
  * PaginationLabel component is used for placing the pagination results label.
@@ -9,12 +9,10 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
   var start = _ref.start,
       end = _ref.end,
       total = _ref.total;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/React.createElement(CorePaginationLabel, {
     ref: ref
-  }, t('pagination.show'), " ", /*#__PURE__*/React.createElement("b", null, start), " ", t('pagination.to'), " ", /*#__PURE__*/React.createElement("b", null, end), ' ', t('pagination.of'), " ", /*#__PURE__*/React.createElement("b", null, total), " ", t('pagination.results'));
+  }, /*#__PURE__*/React.createElement(I18nText, {
+    i18nKey: "pagination.label"
+  }, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results."));
 });
 export default PaginationLabel;

package/esm/core/Table/index.js

@@ -3,5 +3,5 @@ export * from '@digigov/react-core/TableBody';
 export * from '@digigov/react-core/TableCaption';
 export * from '@digigov/react-core/TableDataCell';
 export * from '@digigov/react-core/TableHead';
-export * from '@digigov/react-core/TableHeaderCell';
+export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';

package/esm/core/index.js

@@ -1,18 +1,21 @@
 export { default as Button } from '@digigov/ui/core/Button';
 export * from '@digigov/ui/core/Button';
-export { default as WarningText } from '@digigov/ui/core/WarningText';
 export * from '@digigov/ui/core/Accordion';
 export * from '@digigov/ui/core/Blockquote';
+export * from '@digigov/ui/core/Breadcrumbs';
+export * from '@digigov/ui/core/Card';
 export * from '@digigov/ui/core/Details';
+export * from '@digigov/ui/core/Divider';
 export * from '@digigov/ui/core/ErrorSummary';
+export * from '@digigov/ui/core/Hidden';
 export * from '@digigov/ui/core/Link';
 export * from '@digigov/ui/core/List';
 export * from '@digigov/ui/core/NavList';
 export * from '@digigov/ui/core/ServiceBadge';
-export * from '@digigov/ui/core/SummaryList';
-export * from '@digigov/ui/core/Tabs';
 export * from '@digigov/ui/core/NotificationBanner';
+export * from '@digigov/ui/core/SummaryList';
 export * from '@digigov/ui/core/Table';
-export * from '@digigov/ui/core/Button';
-export * from '@digigov/ui/core/Divider';
+export * from '@digigov/ui/core/Tabs';
+export * from '@digigov/ui/core/VisuallyHidden';
+export { default as WarningText } from '@digigov/ui/core/WarningText';
 export * from '@digigov/ui/core/PaginationLabel';

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.14.0
+/** @license Digigov v0.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,4 +7,5 @@ export * from '@digigov/ui/core';
 export * from '@digigov/ui/layouts';
 export * from '@digigov/ui/typography';
 export * from '@digigov/ui/app';
-export * from '@digigov/ui/govgr';
+export * from '@digigov/ui/govgr';
+export * from '@digigov/ui/admin';

package/esm/locales/el.js

@@ -56,6 +56,13 @@ export default {
     show: 'Εμφανίζονται',
     to: 'έως',
     of: 'από',
-    results: 'αποτελέσματα'
+    results: 'αποτελέσματα',
+    label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα.'
+  },
+  upload: {
+    file: 'Αρχείο',
+    choose_file: 'Επιλογή αρχείου',
+    change_file: 'Αντικατάσταση αρχείου',
+    no_file: 'Δεν έχετε επιλέξει αρχείο'
   }
 };

package/esm/locales/en.js

@@ -56,6 +56,13 @@ export default {
     show: 'Showing',
     to: 'to',
     of: 'of',
-    results: 'results'
+    results: 'results',
+    label: 'Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results'
+  },
+  upload: {
+    file: 'File',
+    choose_file: 'Choose file',
+    change_file: 'Change file',
+    no_file: 'You have not selected a file'
   }
 };

package/index.d.ts

@@ -3,3 +3,4 @@ export * from '@digigov/ui/layouts';
 export * from '@digigov/ui/typography';
 export * from '@digigov/ui/app';
 export * from '@digigov/ui/govgr';
+export * from '@digigov/ui/admin';

package/index.js

@@ -67,4 +67,17 @@ Object.keys(_govgr).forEach(function (key) {
       return _govgr[key];
     }
   });
+});
+
+var _admin = require("@digigov/ui/admin");
+
+Object.keys(_admin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _admin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _admin[key];
+    }
+  });
 });

package/locales/el.d.ts

@@ -57,6 +57,13 @@ declare const _default: {
         to: string;
         of: string;
         results: string;
+        label: string;
+    };
+    upload: {
+        file: string;
+        choose_file: string;
+        change_file: string;
+        no_file: string;
     };
 };
 export default _default;

package/locales/el.js

@@ -62,7 +62,14 @@ var _default = {
     show: 'Εμφανίζονται',
     to: 'έως',
     of: 'από',
-    results: 'αποτελέσματα'
+    results: 'αποτελέσματα',
+    label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα.'
+  },
+  upload: {
+    file: 'Αρχείο',
+    choose_file: 'Επιλογή αρχείου',
+    change_file: 'Αντικατάσταση αρχείου',
+    no_file: 'Δεν έχετε επιλέξει αρχείο'
   }
 };
 exports["default"] = _default;

package/locales/en.d.ts

@@ -57,6 +57,13 @@ declare const _default: {
         to: string;
         of: string;
         results: string;
+        label: string;
+    };
+    upload: {
+        file: string;
+        choose_file: string;
+        change_file: string;
+        no_file: string;
     };
 };
 export default _default;

package/locales/en.js

@@ -62,7 +62,14 @@ var _default = {
     show: 'Showing',
     to: 'to',
     of: 'of',
-    results: 'results'
+    results: 'results',
+    label: 'Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results'
+  },
+  upload: {
+    file: 'File',
+    choose_file: 'Choose file',
+    change_file: 'Change file',
+    no_file: 'You have not selected a file'
   }
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "@digigov reusable components toolkit",
   "module": "./esm/index.js",
   "publishConfig": {
@@ -18,8 +18,8 @@
     "clsx": "1.1.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@digigov/react-core": "0.6.5",
-    "@digigov/react-extensions": "0.6.0"
+    "@digigov/react-core": "0.10.1",
+    "@digigov/react-extensions": "0.9.2"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,