@digigov/ui 1.0.0-3bfc7d37 → 1.0.0-47312a12

package/navigation/Drawer/__stories__/WithHook.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { AdminAside, AdminContainer, AdminLayout, AdminMain, AdminTopSection, AdminHeader, AdminHeaderContent } from "../../../layouts/Admin";
+import { Drawer, DrawerHeading } from "./..";
+import { Button } from "../../../form/Button";
+import { NavListAuto } from "../../NavList";
+import { GovGRFooter } from "../../../govgr/Footer";
+import { GovGRLogo } from "../../../govgr/GovGRLogo";
+import { BurgerIcon } from "../../../icons";
+import { Heading } from "../../../typography/Heading";
+import { useDrawer } from "../hooks";
+var links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  menu: {
+    links: [{
+      name: 'Nav2.1',
+      href: '#',
+      label: 'Nav list item 2.1'
+    }, {
+      name: 'Nav2.2',
+      href: '#',
+      label: 'Nav list item 2.2'
+    }, {
+      name: 'Nav2.3',
+      href: '#',
+      label: 'Nav list item 2.3'
+    }, {
+      name: 'Nav2.4',
+      href: '#',
+      label: 'Nav list item 2.4'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(GovGRLogo, null);
+
+var _ref2 = /*#__PURE__*/React.createElement(BurgerIcon, null);
+
+var _ref3 = /*#__PURE__*/React.createElement(AdminTopSection, null);
+
+var _ref4 = /*#__PURE__*/React.createElement(Heading, {
+  size: "md"
+}, "Menu");
+
+var _ref5 = /*#__PURE__*/React.createElement(AdminMain, null);
+
+var _ref6 = /*#__PURE__*/React.createElement(GovGRFooter, null);
+
+export var WithHook = function WithHook() {
+  var _useDrawer = useDrawer(),
+      registerDrawer = _useDrawer.registerDrawer,
+      registerAction = _useDrawer.registerAction;
+
+  var layout = 'vertical';
+  var border = false;
+  var fixed = false;
+  return /*#__PURE__*/React.createElement(AdminLayout, null, /*#__PURE__*/React.createElement(AdminHeader, null, /*#__PURE__*/React.createElement(AdminHeaderContent, null, _ref, /*#__PURE__*/React.createElement(Button, _extends({}, registerAction('drawer-1', 'open'), {
+    className: "md:hidden",
+    color: "secondary",
+    style: {
+      marginBottom: 0
+    }
+  }), _ref2))), /*#__PURE__*/React.createElement(AdminContainer, null, /*#__PURE__*/React.createElement(AdminAside, null, _ref3, /*#__PURE__*/React.createElement(Drawer, registerDrawer('drawer-1', {
+    upRelative: "md",
+    direction: "left"
+  }), /*#__PURE__*/React.createElement(DrawerHeading, registerAction('drawer-1', 'close'), _ref4), /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border,
+    links: links,
+    fixed: fixed,
+    "aria-label": "Nav list",
+    role: "menu"
+  }))), _ref5), _ref6);
+};

package/navigation/Drawer/auto.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DrawerId, UseDrawerReturn } from './hooks';
+import { ButtonProps } from '@digigov/react-core/Button';
+import { DrawerProps } from '@digigov/ui/navigation/Drawer';
+import { DrawerHeadingProps } from '@digigov/ui/navigation/Drawer';
+export declare const DrawerContext: React.Context<UseDrawerReturn | null>;
+export interface DrawerHeadingAutoProps extends DrawerHeadingProps {
+    drawer: DrawerId;
+    open?: boolean;
+    close?: boolean;
+}
+export interface DrawerOpenButtonProps extends ButtonProps {
+    drawer: DrawerId;
+    open?: boolean;
+    close?: boolean;
+}
+export interface DrawerAutoProps extends DrawerProps {
+    id: string;
+    clickOutside?: boolean;
+    closeOnEscape?: boolean;
+}
+export declare const DrawerProvider: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useDrawerContext: () => UseDrawerReturn | null;
+export declare const DrawerAuto: React.ForwardRefExoticComponent<Pick<DrawerAutoProps, "children" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "direction" | "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" | "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" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "clickOutside" | "closeOnEscape" | "bgColor" | "upRelative"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerButtonAuto: React.ForwardRefExoticComponent<Pick<DrawerOpenButtonProps, "children" | "form" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "name" | "type" | "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" | "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" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "open" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "variant" | "dense" | "close" | "drawer"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DrawerHeadingAuto: React.ForwardRefExoticComponent<Pick<DrawerHeadingAutoProps, "children" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "direction" | "spacing" | "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" | "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" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "close" | "drawer" | "justifyContent" | "alignItems" | "alignContent" | "flexWrap" | "closeLabel"> & React.RefAttributes<HTMLDivElement>>;

package/navigation/Drawer/auto.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "direction", "upRelative"],
+    _excluded2 = ["drawer", "open", "close"],
+    _excluded3 = ["drawer"];
+import React, { useContext } from 'react';
+import { useDrawer } from "./hooks";
+import { Button } from '@digigov/react-core/Button';
+import { Drawer } from "./";
+import { DrawerHeading } from "./";
+export var DrawerContext = /*#__PURE__*/React.createContext(null);
+;
+export var DrawerProvider = function DrawerProvider(_ref) {
+  var children = _ref.children;
+  var modal = useDrawer();
+  return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
+    value: modal
+  }, children);
+};
+export var useDrawerContext = function useDrawerContext() {
+  var context = useContext(DrawerContext);
+  return context;
+};
+export var DrawerAuto = /*#__PURE__*/React.forwardRef(function DrawerAuto(_ref2) {
+  var id = _ref2.id,
+      _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? 'left' : _ref2$direction,
+      _ref2$upRelative = _ref2.upRelative,
+      upRelative = _ref2$upRelative === void 0 ? 'never' : _ref2$upRelative,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var context = useDrawerContext();
+
+  if (!context) {
+    throw new Error('DrawerAuto must be used within an DrawerProvider');
+  }
+
+  var registerDrawer = context.registerDrawer;
+  return /*#__PURE__*/React.createElement(Drawer, _extends({}, registerDrawer(id, {
+    upRelative: upRelative,
+    direction: direction
+  }), props), props.children);
+});
+export var DrawerButtonAuto = /*#__PURE__*/React.forwardRef(function DrawerButtonAuto(_ref3, ref) {
+  var forDrawer = _ref3.drawer,
+      open = _ref3.open,
+      close = _ref3.close,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  var context = useDrawerContext();
+
+  if (!context) {
+    throw new Error('DrawerButtonAuto must be used within an DrawerProvider');
+  }
+
+  var registerAction = context.registerAction;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, registerAction(forDrawer, open ? 'open' : 'close'), props));
+});
+export var DrawerHeadingAuto = /*#__PURE__*/React.forwardRef(function DrawerHeadingAuto(_ref4, ref) {
+  var forDrawer = _ref4.drawer,
+      props = _objectWithoutProperties(_ref4, _excluded3);
+
+  var context = useDrawerContext();
+
+  if (!context) {
+    throw new Error('DrawerHeadingAuto must be used within an DrawerProvider');
+  }
+
+  var registerAction = context.registerAction;
+  return /*#__PURE__*/React.createElement(DrawerHeading, _extends({
+    color: "secondary",
+    ref: ref
+  }, registerAction(forDrawer, 'close'), props));
+});

package/navigation/Drawer/hooks.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare type DrawerId = string | number;
+export interface UseDrawerReturn {
+    open: (id: DrawerId) => void;
+    close: () => void;
+    currentOpen: DrawerId | null;
+    registerDrawer: (id: DrawerId, options?: {
+        upRelative?: string;
+        direction?: string;
+    }) => {
+        open: boolean;
+        id: string;
+        ref?: React.RefObject<HTMLDivElement>;
+    };
+    registerAction: (id: DrawerId, type: 'open' | 'close') => {
+        onClick: () => void;
+        ref?: React.RefObject<any>;
+    };
+}
+export declare const useDrawer: () => UseDrawerReturn;

package/navigation/Drawer/hooks.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useRef, useCallback } from 'react';
+export var useDrawer = function useDrawer() {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentOpen = _useState2[0],
+      setCurrentOpen = _useState2[1];
+
+  var drawersRef = useRef(new Map());
+  var buttonsRef = useRef(new Map());
+  var open = useCallback(function (id) {
+    setCurrentOpen(id);
+  }, []);
+  var close = useCallback(function () {
+    setCurrentOpen(null);
+  }, []);
+  var registerDrawer = useCallback(function (id, options) {
+    var _drawersRef$current$g;
+
+    var drawerId = "drawer-".concat(id);
+
+    if (!((_drawersRef$current$g = drawersRef.current.get(id)) !== null && _drawersRef$current$g !== void 0 && _drawersRef$current$g.current)) {
+      drawersRef.current.set(id, /*#__PURE__*/React.createRef());
+    }
+
+    return _extends({
+      open: currentOpen === id,
+      id: drawerId,
+      ref: drawersRef.current.get(id)
+    }, options);
+  }, [currentOpen]);
+  var registerAction = useCallback(function (id, type) {
+    if (!buttonsRef.current.has(id)) {
+      buttonsRef.current.set(id, /*#__PURE__*/React.createRef());
+    }
+
+    return {
+      onClick: function onClick() {
+        return type === 'open' ? open(id) : close();
+      },
+      ref: buttonsRef.current.get(id)
+    };
+  }, [currentOpen]);
+  return {
+    open: open,
+    close: close,
+    currentOpen: currentOpen,
+    registerAction: registerAction,
+    registerDrawer: registerDrawer
+  };
+};

package/navigation/Drawer/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@digigov/react-core/Drawer';
 export * from '@digigov/react-core/DrawerHeading';
+export * from '@digigov/ui/navigation/Drawer/auto';
 import Drawer from '@digigov/react-core/Drawer';
 export default Drawer;

package/navigation/Drawer/index.js

@@ -1,44 +1,5 @@
-"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-core/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-core/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;
+export * from '@digigov/react-core/Drawer';
+export * from '@digigov/react-core/DrawerHeading';
+export * from "./auto";
+import Drawer from '@digigov/react-core/Drawer';
+export default Drawer;

package/navigation/Drawer/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/navigation/Drawer/index.js"
+}

package/navigation/Dropdown/Dropdown.stories.d.ts

@@ -7,6 +7,13 @@ declare namespace _default {
 }
 export default _default;
 export * from "./__stories__/Default";
+export * from "./__stories__/Secondary";
+export * from "./__stories__/Warning";
+export * from "./__stories__/Disabled";
+export * from "./__stories__/VariantLink";
 export * from "./__stories__/AlignRight";
 export * from "./__stories__/PlacementTop";
+export * from "./__stories__/WithIcons";
+export * from "./__stories__/ContentPosition";
+export * from "./__stories__/Dense";
 import Dropdown from "@digigov/ui/navigation/Dropdown";

package/navigation/Dropdown/Dropdown.stories.js

@@ -1,63 +1,19 @@
-"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/navigation/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 = {
+import Dropdown from "./";
+export default {
   title: 'Digigov UI/navigation/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"],
+  component: Dropdown,
   displayName: 'Dropdown'
 };
-exports["default"] = _default;
+export * from "./__stories__/Default";
+export * from "./__stories__/Secondary";
+export * from "./__stories__/Warning";
+export * from "./__stories__/Disabled";
+export * from "./__stories__/VariantLink";
+export * from "./__stories__/AlignRight";
+export * from "./__stories__/PlacementTop";
+export * from "./__stories__/WithIcons";
+export * from "./__stories__/ContentPosition";
+export * from "./__stories__/Dense";

package/navigation/Dropdown/Dropdown.stories.playwright.json

@@ -48,6 +48,22 @@
           "title": "Placement top action"
         }
       ]
+    },
+    "digigov-ui-navigation-dropdown--dense": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            }
+          ],
+          "id": "kQJa7FO9b7Y3",
+          "title": "Open dropdown action"
+        }
+      ]
     }
   }
 }

package/navigation/Dropdown/__stories__/AlignRight.js

@@ -1,66 +1,51 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.AlignRight = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Button = require("@digigov/ui/form/Button");
-
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-
-var _LabelContainer = require("@digigov/ui/form/LabelContainer");
-
-var _TextInput = require("@digigov/ui/form/TextInput");
-
-var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
-
-var _Dropdown = require("@digigov/ui/navigation/Dropdown");
-
-var _NavList = require("@digigov/ui/navigation/NavList");
-
-var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+import React from 'react';
+import { Button } from "../../../form/Button";
+import { FieldContainer } from "../../../form/FieldContainer";
+import { LabelContainer } from "../../../form/LabelContainer";
+import { LabelTitle } from "../../../form/LabelContainer";
+import { TextInput } from "../../../form/TextInput";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { Dropdown, DropdownButton, DropdownContent } from "./..";
+import { NavList, NavListItemAction } from "../../NavList";
+
+var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   align: "right"
-}, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+}, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
   "aria-controls": "menu2",
   arrow: true
-}, "\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+}, "\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(DropdownContent, {
   role: "menu",
   id: "menu2"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
+}, /*#__PURE__*/React.createElement(FieldContainer, {
   role: "menuitem"
-}, /*#__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, {
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
-}))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
+}))), /*#__PURE__*/React.createElement(SectionBreak, {
   role: "separator",
   paddingBottom: 0,
   paddingTop: 0
-}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+}), /*#__PURE__*/React.createElement(NavList, {
   layout: "vertical"
-}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
   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, {
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
   role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+}), /*#__PURE__*/React.createElement(Button, {
   role: "menuitem",
   color: "secondary"
 }, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
 
-var AlignRight = function AlignRight() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
+export var AlignRight = function AlignRight() {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'center',
@@ -68,7 +53,4 @@ var AlignRight = function AlignRight() {
     }
   }, _ref);
 };
-
-exports.AlignRight = AlignRight;
-var _default = AlignRight;
-exports["default"] = _default;
+export default AlignRight;

package/navigation/Dropdown/__stories__/ContentPosition.d.ts

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