@digigov/ui 0.30.3 → 0.32.0

package/CHANGELOG.md

@@ -1,6 +1,33 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Wed, 22 Feb 2023 15:41:06 GMT and should not be manually modified.
+This log was last generated on Tue, 02 May 2023 09:16:06 GMT and should not be manually modified.
+
+## 0.32.0
+Tue, 02 May 2023 09:16:06 GMT
+
+### Minor changes
+
+- Remove unused nav props
+
+### Patches
+
+- Add otp validation translates
+- Update NavList stories
+
+## 0.31.0
+Mon, 03 Apr 2023 11:13:15 GMT
+
+### Minor changes
+
+- Split useTogglable hooks into Nav and Tab
+- rename and implement navListAuto components
+- Create hooks for changing theme options and add ThemeOptions component and example
+- Import ChipKeyValue component
+-  Remove FilterSectionHorizontal component and rename FilterHeadingSection to FilterHeading
+
+### Patches
+
+- add React.forwardRef to Modal QrCodeViewer components
 
 ## 0.30.1
 Wed, 22 Feb 2023 15:41:06 GMT

package/admin/AccessibilityMenu/index.d.ts

@@ -0,0 +1,13 @@
+export * from '@digigov/react-extensions/admin/AccessibilityMenu';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuContent';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuHeader';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuBody';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuList';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuListItem';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuOptionButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
+export * from '@digigov/react-core/AccessibilityIcon';
+export * from '@digigov/react-core/AccessibilityTextIcon';
+import AccessibilityMenu from '@digigov/react-extensions/admin/AccessibilityMenu';
+export default AccessibilityMenu;

package/admin/AccessibilityMenu/index.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _AccessibilityMenu = _interopRequireWildcard(require("@digigov/react-extensions/admin/AccessibilityMenu"));
+
+Object.keys(_AccessibilityMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenu[key];
+    }
+  });
+});
+
+var _AccessibilityMenuButton = require("@digigov/react-extensions/admin/AccessibilityMenuButton");
+
+Object.keys(_AccessibilityMenuButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuButton[key];
+    }
+  });
+});
+
+var _AccessibilityMenuContent = require("@digigov/react-extensions/admin/AccessibilityMenuContent");
+
+Object.keys(_AccessibilityMenuContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuContent[key];
+    }
+  });
+});
+
+var _AccessibilityMenuHeader = require("@digigov/react-extensions/admin/AccessibilityMenuHeader");
+
+Object.keys(_AccessibilityMenuHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuHeader[key];
+    }
+  });
+});
+
+var _AccessibilityMenuBody = require("@digigov/react-extensions/admin/AccessibilityMenuBody");
+
+Object.keys(_AccessibilityMenuBody).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuBody[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuBody[key];
+    }
+  });
+});
+
+var _AccessibilityMenuList = require("@digigov/react-extensions/admin/AccessibilityMenuList");
+
+Object.keys(_AccessibilityMenuList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuList[key];
+    }
+  });
+});
+
+var _AccessibilityMenuListItem = require("@digigov/react-extensions/admin/AccessibilityMenuListItem");
+
+Object.keys(_AccessibilityMenuListItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuListItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuListItem[key];
+    }
+  });
+});
+
+var _AccessibilityMenuOptionButton = require("@digigov/react-extensions/admin/AccessibilityMenuOptionButton");
+
+Object.keys(_AccessibilityMenuOptionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuOptionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuOptionButton[key];
+    }
+  });
+});
+
+var _AccessibilityMenuSteps = require("@digigov/react-extensions/admin/AccessibilityMenuSteps");
+
+Object.keys(_AccessibilityMenuSteps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityMenuSteps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityMenuSteps[key];
+    }
+  });
+});
+
+var _AccessibilityIcon = require("@digigov/react-core/AccessibilityIcon");
+
+Object.keys(_AccessibilityIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityIcon[key];
+    }
+  });
+});
+
+var _AccessibilityTextIcon = require("@digigov/react-core/AccessibilityTextIcon");
+
+Object.keys(_AccessibilityTextIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AccessibilityTextIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AccessibilityTextIcon[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; }
+
+var _default = _AccessibilityMenu["default"];
+exports["default"] = _default;

package/admin/AutoComplete/index.d.ts

@@ -44,7 +44,7 @@ export declare type State = {
     selected: any;
     ariaHint: boolean;
 };
-export declare type ΝewQueryProps = {
+export declare type NewQueryProps = {
     menuOpen?: boolean;
     query?: string;
 };
@@ -78,7 +78,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     hasAutoselect(): boolean;
     templateInputValue(value: string): string;
     templateSuggestion(value: string): string;
-    handleComponentBlur(newState: ΝewQueryProps): void;
+    handleComponentBlur(newState: NewQueryProps): void;
     handleListMouseLeave(): void;
     handleOptionBlur(event: React.FocusEvent<HTMLLIElement>, index: number): void;
     handleInputBlur(): void;

package/admin/Chip/index.d.ts

@@ -3,5 +3,6 @@ export * from '@digigov/react-extensions/admin/ChipHeading';
 export * from '@digigov/react-extensions/admin/ChipSection';
 export * from '@digigov/react-extensions/admin/ChipSectionHorizontal';
 export * from '@digigov/react-extensions/admin/ChipSectionWrapper';
+export * from '@digigov/react-extensions/admin/ChipKeyValue';
 import Chip from '@digigov/react-extensions/admin/Chip';
 export default Chip;

package/admin/Chip/index.js

@@ -78,6 +78,20 @@ Object.keys(_ChipSectionWrapper).forEach(function (key) {
   });
 });
 
+var _ChipKeyValue = require("@digigov/react-extensions/admin/ChipKeyValue");
+
+Object.keys(_ChipKeyValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChipKeyValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ChipKeyValue[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/admin/CopyToClipboard/CopyToClipboard.stories.playwright.json

@@ -12,7 +12,7 @@
               }
             }
           ],
-          "id": "BSaIJR2CMZJU",
+          "id": "slm0qFzUIkGw",
           "title": "Click button"
         }
       ]
@@ -28,7 +28,7 @@
               }
             }
           ],
-          "id": "T50MBtHpfRog",
+          "id": "dTykMmK3AzLT",
           "title": "Click button"
         }
       ]

package/admin/Drawer/__stories__/Default.js

@@ -85,13 +85,19 @@ var Default = function Default() {
 
   var _useNavList = (0, _useNavList2.useNavList)(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return (0, _extends2["default"])({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return (0, _extends2["default"])({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return (0, _extends2["default"])({}, registerLink(name));
   };
 
   var layout = 'vertical';
+  var border = false;
   return /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
     direction: "left",
     open: open
@@ -102,31 +108,32 @@ var Default = function Default() {
   }, _ref), /*#__PURE__*/_react["default"].createElement(_NavList.NavListAuto, {
     layout: layout,
     links: links,
-    "aria-label": "Nav list",
-    role: "menu"
+    border: border,
+    "aria-label": "Nav list"
   }, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: key
     }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
-      layout: layout,
       link: item,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, (0, _extends2["default"])({
       layout: layout
     }, container(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
       layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, {
-      layout: layout
-    }, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, {
-      layout: layout
+    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, null, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, {
+      role: "menu"
     }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
       return (0, _NavList.isNavListItemLinkInterface)(subMenu) && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentListItem, {
-        key: menuIndex
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/admin/Dropdown/__stories__/AlignRight.js

@@ -41,7 +41,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
   role: "menu"
@@ -55,7 +54,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   role: "menuitem"

package/admin/Dropdown/__stories__/Default.js

@@ -40,7 +40,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
   role: "menu"
@@ -54,7 +53,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   role: "menuitem"

package/admin/Dropdown/__stories__/PlacementTop.js

@@ -41,7 +41,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
   role: "menu"
@@ -55,7 +54,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   role: "menuitem"

package/admin/FilterSection/index.d.ts

@@ -1,6 +1,5 @@
 export * from '@digigov/react-extensions/admin/FilterSection';
-export * from '@digigov/react-extensions/admin/FilterSectionHorizontal';
-export * from '@digigov/react-extensions/admin/FilterHeadingSection';
+export * from '@digigov/react-extensions/admin/FilterHeading';
 export * from '@digigov/react-extensions/admin/FilterContent';
 export * from '@digigov/react-extensions/admin/FilterOptionsSection';
 export * from '@digigov/react-extensions/admin/FilterSelectedHeading';

package/admin/FilterSection/index.js

@@ -22,30 +22,16 @@ Object.keys(_FilterSection).forEach(function (key) {
   });
 });
 
-var _FilterSectionHorizontal = require("@digigov/react-extensions/admin/FilterSectionHorizontal");
+var _FilterHeading = require("@digigov/react-extensions/admin/FilterHeading");
 
-Object.keys(_FilterSectionHorizontal).forEach(function (key) {
+Object.keys(_FilterHeading).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _FilterSectionHorizontal[key]) return;
+  if (key in exports && exports[key] === _FilterHeading[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _FilterSectionHorizontal[key];
-    }
-  });
-});
-
-var _FilterHeadingSection = require("@digigov/react-extensions/admin/FilterHeadingSection");
-
-Object.keys(_FilterHeadingSection).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _FilterHeadingSection[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _FilterHeadingSection[key];
+      return _FilterHeading[key];
     }
   });
 });

package/admin/Modal/index.d.ts

@@ -13,6 +13,6 @@ export declare const useModal: () => {
     modalProps: ModalProps;
     modalData: any;
 };
-export declare const Modal: (props: ModalProps) => React.ReactElement | null;
-export declare const ModalBase: ({ open, children, onEscape, ...props }: ModalProps) => React.ReactElement;
+export declare const Modal: React.ForwardRefExoticComponent<Pick<ModalProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "open" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "onEscape"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalBase: React.ForwardRefExoticComponent<Pick<ModalProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "open" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "onEscape"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/admin/Modal/index.js

@@ -14,10 +14,10 @@ var _exportNames = {
 };
 exports.useModal = exports["default"] = exports.ModalBase = exports.Modal = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _ModalContainer = _interopRequireWildcard(require("@digigov/react-extensions/admin/ModalContainer"));
@@ -123,21 +123,25 @@ var useModal = function useModal() {
 
 exports.useModal = useModal;
 
-var Modal = function Modal(props) {
+var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref) {
+  var props = (0, _extends2["default"])({}, _ref);
+
   if (props.open) {
-    return /*#__PURE__*/_react["default"].createElement(ModalBase, props);
+    return /*#__PURE__*/_react["default"].createElement(ModalBase, (0, _extends2["default"])({
+      ref: ref
+    }, props));
   } else {
     return null;
   }
-};
+});
 
 exports.Modal = Modal;
 
-var ModalBase = function ModalBase(_ref) {
-  var open = _ref.open,
-      children = _ref.children,
-      onEscape = _ref.onEscape,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var ModalBase = /*#__PURE__*/_react["default"].forwardRef(function ModalBase(_ref2, ref) {
+  var open = _ref2.open,
+      children = _ref2.children,
+      onEscape = _ref2.onEscape,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var firstModalElement = (0, _react.useRef)();
   var lastModalElement = (0, _react.useRef)();
   var handleFocus = (0, _react.useCallback)(function () {
@@ -153,7 +157,8 @@ var ModalBase = function ModalBase(_ref) {
   }, [open]);
   return /*#__PURE__*/_react["default"].createElement(_ModalContainer["default"], (0, _extends2["default"])({
     open: open,
-    role: "dialog"
+    role: "dialog",
+    ref: ref
   }, props, {
     "aria-hidden": "false",
     "aria-modal": "true"
@@ -166,7 +171,7 @@ var ModalBase = function ModalBase(_ref) {
     ref: lastModalElement,
     "aria-hidden": "true"
   }));
-};
+});
 
 exports.ModalBase = ModalBase;
 var _default = Modal;

package/admin/Pagination/__stories__/Default.js

@@ -15,7 +15,7 @@ var _SvgIcon = require("@digigov/ui/core/SvgIcon");
 
 var _Link = require("@digigov/ui/core/Link");
 
-var _Divider = require("@digigov/ui/core/Divider");
+var _SectionBreak = require("@digigov/ui/core/SectionBreak");
 
 var _i18n = require("@digigov/ui/app/i18n");
 
@@ -43,8 +43,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination,
   direction: "right"
 })))));
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true,
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   size: "l"
 });
 
@@ -74,8 +73,7 @@ var _ref3 = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination,
   direction: "right"
 })))));
 
-var _ref4 = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true,
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   size: "l"
 });
 
@@ -103,8 +101,7 @@ var _ref5 = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination,
   direction: "right"
 })))));
 
-var _ref6 = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true,
+var _ref6 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   size: "l"
 });
 

package/admin/Pagination/__stories__/PaginationSmall.js

@@ -15,7 +15,7 @@ var _SvgIcon = require("@digigov/ui/core/SvgIcon");
 
 var _Link = require("@digigov/ui/core/Link");
 
-var _Divider = require("@digigov/ui/core/Divider");
+var _SectionBreak = require("@digigov/ui/core/SectionBreak");
 
 var _i18n = require("@digigov/ui/app/i18n");
 
@@ -35,8 +35,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination,
   direction: "right"
 })))));
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true,
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   size: "l"
 });
 

package/app/Footer/__stories__/FooterAllInclusive.js

@@ -28,6 +28,7 @@ var _grnetLogoBase = _interopRequireDefault(require("@digigov/ui/govgr/images/gr
 var _ref = /*#__PURE__*/_react["default"].createElement(_Footer.Footer, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterNavigation, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterSection, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterHeading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03BC\u03B5\u03BD\u03BF\u03CD"), /*#__PURE__*/_react["default"].createElement(_Footer.FooterList, {
   columns: 2
 }, /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")))), /*#__PURE__*/_react["default"].createElement(_Footer.FooterSection, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterHeading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03AC\u03BB\u03BB\u03BF \u03BC\u03B5\u03BD\u03BF\u03CD"), /*#__PURE__*/_react["default"].createElement(_Footer.FooterList, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"))))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
+  visible: false,
   size: "m"
 }), /*#__PURE__*/_react["default"].createElement(_Footer.FooterMeta, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterMetaItem, {
   grow: true

package/app/Footer/__stories__/FooterWithSecondaryNavigation.js

@@ -30,6 +30,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Footer.Footer, null, /*
 }, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")))), /*#__PURE__*/_react["default"].createElement(_Footer.FooterSection, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterHeading, {
   size: "m"
 }, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03AC\u03BB\u03BB\u03BF \u03BC\u03B5\u03BD\u03BF\u03CD size m"), /*#__PURE__*/_react["default"].createElement(_Footer.FooterList, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/_react["default"].createElement(_Footer.FooterListItem, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"))))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
+  visible: false,
   size: "m"
 }), /*#__PURE__*/_react["default"].createElement(_Footer.FooterMeta, null, /*#__PURE__*/_react["default"].createElement(_Footer.FooterMetaItem, {
   grow: true