@digigov/ui 0.28.2 → 0.28.3

package/admin/Drawer/__stories__/Default.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Drawer = _interopRequireDefault(require("@digigov/ui/admin/Drawer"));
+
+var _List = require("@digigov/ui/core/List");
+
+var _Title = _interopRequireDefault(require("@digigov/ui/typography/Title"));
+
+var _admin = require("@digigov/react-extensions/admin");
+
+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; }
+
+function useDrawer() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function toggleDrawer() {
+    setOpen(!open);
+  }
+
+  return [open, toggleDrawer];
+}
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+  size: "md"
+}, "Menu");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_List.List, {
+  spaced: true
+}, /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, "List Item 1"), /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, "List Item 2"));
+
+var Default = function Default() {
+  var _useDrawer = useDrawer(),
+      _useDrawer2 = (0, _slicedToArray2["default"])(_useDrawer, 2),
+      open = _useDrawer2[0],
+      toggleDrawer = _useDrawer2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+    direction: "left",
+    open: open
+  }, /*#__PURE__*/_react["default"].createElement(_admin.DrawerHeading, {
+    onClick: function onClick() {
+      return toggleDrawer();
+    }
+  }, _ref), _ref2);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/admin/Drawer/index.d.ts

@@ -0,0 +1,4 @@
+export * from '@digigov/react-extensions/admin/Drawer';
+export * from '@digigov/react-extensions/admin/DrawerHeading';
+import Drawer from '@digigov/react-extensions/admin/Drawer';
+export default Drawer;

package/admin/Drawer/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Drawer = _interopRequireWildcard(require("@digigov/react-extensions/admin/Drawer"));
+
+Object.keys(_Drawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Drawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Drawer[key];
+    }
+  });
+});
+
+var _DrawerHeading = require("@digigov/react-extensions/admin/DrawerHeading");
+
+Object.keys(_DrawerHeading).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DrawerHeading[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DrawerHeading[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 = _Drawer["default"];
+exports["default"] = _default;

package/admin/Drawer/index.mdx

@@ -0,0 +1,16 @@
+---
+id: drawer
+title: Drawer
+---
+
+```bash
+import Drawer from '@digigov/ui/app/Drawer';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="admin/Drawer" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Drawer" />

package/admin/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,12 @@
+declare namespace _default {
+    export const title: string;
+    export const description: string;
+    export const link: string;
+    export { Dropdown as component };
+    export const displayName: string;
+}
+export default _default;
+export * from "./__stories__/Default";
+export * from "./__stories__/AlignRight";
+export * from "./__stories__/PlacementTop";
+import Dropdown from "@digigov/ui/admin/Dropdown";

package/admin/Dropdown/Dropdown.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Dropdown = _interopRequireDefault(require("@digigov/ui/admin/Dropdown"));
+
+var _Default = require("./__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+
+var _AlignRight = require("./__stories__/AlignRight");
+
+Object.keys(_AlignRight).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AlignRight[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AlignRight[key];
+    }
+  });
+});
+
+var _PlacementTop = require("./__stories__/PlacementTop");
+
+Object.keys(_PlacementTop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PlacementTop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PlacementTop[key];
+    }
+  });
+});
+
+/* eslint-disable digigov/no-relative-imports */
+var _default = {
+  title: 'Digigov UI/admin/Dropdown',
+  description: 'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
+  component: _Dropdown["default"],
+  displayName: 'Dropdown'
+};
+exports["default"] = _default;

package/admin/Dropdown/__stories__/AlignRight.d.ts

@@ -0,0 +1,2 @@
+export declare const AlignRight: () => JSX.Element;
+export default AlignRight;

package/admin/Dropdown/__stories__/AlignRight.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AlignRight = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
+
+var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+
+var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
+
+var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
+
+var _NavVertical = _interopRequireDefault(require("@digigov/react-core/NavVertical"));
+
+var _LabelTitle = require("@digigov/react-core/LabelTitle");
+
+var _TextInput = _interopRequireDefault(require("@digigov/ui/core/TextInput"));
+
+var _NavVerticalItem = _interopRequireDefault(require("@digigov/react-core/NavVerticalItem"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+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 _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+  align: "right",
+  open: true
+}, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+  role: "menuitem"
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+  name: "input-name"
+}))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_NavVertical["default"], {
+  role: "menu"
+}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+var AlignRight = function AlignRight() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, _ref);
+};
+
+exports.AlignRight = AlignRight;
+var _default = AlignRight;
+exports["default"] = _default;

package/admin/Dropdown/__stories__/Default.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => JSX.Element;
+export default Default;

package/admin/Dropdown/__stories__/Default.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
+
+var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+
+var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
+
+var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
+
+var _NavVertical = _interopRequireDefault(require("@digigov/react-core/NavVertical"));
+
+var _LabelTitle = require("@digigov/react-core/LabelTitle");
+
+var _TextInput = _interopRequireDefault(require("@digigov/ui/core/TextInput"));
+
+var _NavVerticalItem = _interopRequireDefault(require("@digigov/react-core/NavVerticalItem"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+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 _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+  open: true
+}, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+  role: "menuitem"
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+  name: "input-name"
+}))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_NavVertical["default"], {
+  role: "menu"
+}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+var Default = function Default() {
+  return _ref;
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/admin/Dropdown/__stories__/PlacementTop.d.ts

@@ -0,0 +1,2 @@
+export declare const PlacementTop: () => JSX.Element;
+export default PlacementTop;

package/admin/Dropdown/__stories__/PlacementTop.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PlacementTop = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
+
+var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+
+var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
+
+var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
+
+var _NavVertical = _interopRequireDefault(require("@digigov/react-core/NavVertical"));
+
+var _LabelTitle = require("@digigov/react-core/LabelTitle");
+
+var _TextInput = _interopRequireDefault(require("@digigov/ui/core/TextInput"));
+
+var _NavVerticalItem = _interopRequireDefault(require("@digigov/react-core/NavVerticalItem"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+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 _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+  placement: "top",
+  open: true
+}, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+  role: "menuitem"
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+  name: "input-name"
+}))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_NavVertical["default"], {
+  role: "menu"
+}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+var PlacementTop = function PlacementTop() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, _ref);
+};
+
+exports.PlacementTop = PlacementTop;
+var _default = PlacementTop;
+exports["default"] = _default;

package/admin/Dropdown/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import DropdownBase, { DropdownBaseProps } from '@digigov/react-extensions/admin/DropdownBase';
+export * from '@digigov/react-extensions/admin/DropdownButton';
+export * from '@digigov/react-extensions/admin/DropdownContent';
+export interface DropdownProps extends DropdownBaseProps {
+    /**
+     * Use closeBehaviour to set the way that the Dropdown will close.
+     */
+    closeBehaviour?: 'clickButton' | 'clickOutside';
+    /**
+     * Use float dropdown to set the dropdown to float over
+     * scroll bars and stay on a static position.
+     * This is mainly used to show actions in a long table.
+     */
+    float?: boolean;
+}
+/**
+ * Dropdown component is used for showing more options with a button.
+ */
+export declare const Dropdown: ({ closeBehaviour, float, ...props }: DropdownProps) => React.ReactElement;
+export { DropdownBase };
+export default Dropdown;

package/admin/Dropdown/index.js

@@ -0,0 +1,144 @@
+"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,
+  DropdownBase: true
+};
+exports.Dropdown = void 0;
+Object.defineProperty(exports, "DropdownBase", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownBase["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DropdownBase = _interopRequireDefault(require("@digigov/react-extensions/admin/DropdownBase"));
+
+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", "float"];
+
+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,
+      _ref$float = _ref["float"],
+      _float = _ref$float === void 0 ? false : _ref$float,
+      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);
+    }
+
+    var toggleFloat = function toggleFloat() {
+      var _innerRef$current;
+
+      var tbody = innerRef.current.closest('tbody');
+      var parentElement = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.parentElement;
+
+      if (innerRef.current.open) {
+        var _innerRef$current2;
+
+        tbody.style.position = 'static';
+        var rect = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.getBoundingClientRect();
+        var parentRect = parentElement.getBoundingClientRect();
+        innerRef.current.style.position = 'static'; // arbitrary spacing of 12 pixels because CSS
+
+        var top = rect.top + window.pageYOffset;
+        var left = rect.left + window.pageXOffset;
+        parentElement.style.height = "".concat(parentRect.height, "px");
+        parentElement.style.width = "".concat(parentRect.width, "px");
+        innerRef.current.style.top = "".concat(top, "px");
+        innerRef.current.style.left = "".concat(left, "px");
+        innerRef.current.style.position = "absolute";
+        innerRef.current.style.display = "block";
+        innerRef.current.style.background = 'white';
+      } else {
+        tbody.style.position = 'relative';
+        parentElement.style.height = '';
+        parentElement.style.width = '';
+        innerRef.current.style.top = "0";
+        innerRef.current.style.left = "0";
+        innerRef.current.style.position = "relative";
+        innerRef.current.style.display = "table-cell";
+        innerRef.current.style.background = 'transparent';
+      }
+    };
+
+    if (_float) {
+      innerRef.current.addEventListener('toggle', toggleFloat);
+    }
+
+    return function () {
+      if (closeBehaviour === 'clickOutside') {
+        document.removeEventListener('click', handleClickOutside, true);
+      }
+
+      if (_float) {
+        innerRef.current.removeEventListener('toggle', toggleFloat);
+      }
+    };
+  }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+
+  return /*#__PURE__*/_react["default"].createElement(_DropdownBase["default"], (0, _extends2["default"])({
+    ref: innerRef
+  }, props));
+};
+
+exports.Dropdown = Dropdown;
+var _default = Dropdown;
+exports["default"] = _default;