@via-profit/ui-kit 0.7.0 → 0.9.0

package/HintPopover/HintPopoverContainer.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
+const appear = (0, react_2.keyframes) `
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const StyledContainer = styled_1.default.div `
+  box-sizing: border-box;
+  max-width: 22em;
+  padding: 0.7em 0.9em;
+  font-size: 0.875rem;
+  font-weight: normal;
+  line-height: 1.45;
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: break-word;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.6}em;
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
+  animation: ${appear} 120ms ease-out;
+
+  & p {
+    margin: 0 0 0.5em;
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+/**
+ * The bubble with the content of the hint
+ */
+const HintPopoverContainer = (props, ref) => react_1.default.createElement(StyledContainer, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(HintPopoverContainer);

package/HintPopover/index.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { AnchorPos } from '../Popper';
+import { HintPopoverButtonProps } from './HintPopoverButton';
+import { HintPopoverContainerProps } from './HintPopoverContainer';
+export type HintPopoverProps = {
+    /**
+     * The content of the hint: the text, the paragraphs, the list
+     */
+    readonly children: React.ReactNode;
+    /**
+     * The name of the button for the screen readers and its tooltip: what the hint is about.
+     * Pass it in the language of your interface
+     * Default: `Hint`
+     */
+    readonly label?: string;
+    /**
+     * Replaces the «?» icon of the button
+     */
+    readonly icon?: React.ReactNode;
+    /**
+     * The preferred placement. If there is no room, the hint moves to the opposite side
+     * Default: `bottom-start`
+     */
+    readonly placement?: AnchorPos;
+    /**
+     * The state of the controlled hint. Pass it together with `onOpenChange`
+     * Default: undefined
+     */
+    readonly isOpen?: boolean;
+    /**
+     * Called when the hint wants to be opened or closed
+     */
+    readonly onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Default: 6
+     */
+    readonly offset?: number;
+    /**
+     * Default: `theme.zIndex.modal + 1`, so the hint is shown above the modal windows too
+     */
+    readonly zIndex?: number;
+    /**
+     * The id of the hint element
+     * Default: generated
+     */
+    readonly id?: string;
+    readonly overrides?: HintPopoverOverrides;
+};
+export interface HintPopoverOverrides {
+    /**
+     * The «?» button
+     */
+    readonly Button?: React.ComponentType<HintPopoverButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The bubble with the content
+     */
+    readonly Container?: React.ComponentType<HintPopoverContainerProps & React.RefAttributes<HTMLDivElement>>;
+}
+/**
+ * «?» next to a field, a button or a title: the explanation in the popper by the click.
+ * For what is needed sometimes; what everybody must know goes into InfoNote.
+ * Closes by the outside click and by Escape, Escape returns the focus to the button
+ */
+declare const HintPopover: React.FC<HintPopoverProps>;
+export * from './HintPopoverButton';
+export * from './HintPopoverContainer';
+export default HintPopover;

package/HintPopover/index.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const Popper_1 = __importDefault(require("../Popper"));
+const ClickOutside_1 = __importDefault(require("../ClickOutside"));
+const HintPopoverButton_1 = __importDefault(require("./HintPopoverButton"));
+const HintPopoverContainer_1 = __importDefault(require("./HintPopoverContainer"));
+/**
+ * «?» next to a field, a button or a title: the explanation in the popper by the click.
+ * For what is needed sometimes; what everybody must know goes into InfoNote.
+ * Closes by the outside click and by Escape, Escape returns the focus to the button
+ */
+const HintPopover = props => {
+    const { children, label = 'Hint', icon, placement = 'bottom-start', isOpen, onOpenChange, offset = 6, zIndex, id, overrides, } = props;
+    const theme = (0, react_2.useTheme)();
+    const generatedId = `hint-popover-${react_1.default.useId().replace(/:/g, '')}`;
+    const hintId = id || generatedId;
+    const [button, setButton] = react_1.default.useState(null);
+    const [internalOpen, setInternalOpen] = react_1.default.useState(false);
+    const isControlled = typeof isOpen !== 'undefined';
+    const open = isControlled ? Boolean(isOpen) : internalOpen;
+    const overridesMap = react_1.default.useMemo(() => ({
+        Button: (overrides === null || overrides === void 0 ? void 0 : overrides.Button) || HintPopoverButton_1.default,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || HintPopoverContainer_1.default,
+    }), [overrides]);
+    const setOpen = react_1.default.useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
+    react_1.default.useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setOpen(false);
+                button === null || button === void 0 ? void 0 : button.focus();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open, setOpen, button]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(overridesMap.Button, { ref: setButton, title: label, "aria-label": label, "aria-expanded": open, "aria-controls": open ? hintId : undefined, onClick: () => setOpen(!open) }, icon),
+        react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => open && setOpen(false), ignoreElements: [button] },
+            react_1.default.createElement(Popper_1.default, { isOpen: open, anchorElement: button, anchorPos: placement, autoFlip: true, offset: offset, viewportMargin: 8, zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 1, id: hintId },
+                react_1.default.createElement(overridesMap.Container, null, children)))));
+};
+__exportStar(require("./HintPopoverButton"), exports);
+__exportStar(require("./HintPopoverContainer"), exports);
+exports.default = HintPopover;

package/InfoNote/InfoNoteContainer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Theme } from '@emotion/react';
+import type { InfoNoteVariant } from './index';
+export type InfoNoteContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly variant: InfoNoteVariant;
+};
+/**
+ * The color of the variant: the border, the icon and the tint of the background
+ */
+export declare const variantColor: (theme: Theme, variant: InfoNoteVariant) => import("../Color").default;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly variant: InfoNoteVariant;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/InfoNote/InfoNoteContainer.js

@@ -0,0 +1,56 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.variantColor = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * The color of the variant: the border, the icon and the tint of the background
+ */
+const variantColor = (theme, variant) => {
+    switch (variant) {
+        case 'success':
+            return theme.color.success;
+        case 'warning':
+            return theme.color.warning;
+        case 'error':
+            return theme.color.error;
+        default:
+            return theme.color.accentPrimary;
+    }
+};
+exports.variantColor = variantColor;
+const StyledContainer = styled_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.6em;
+  align-items: flex-start;
+  padding: 0.6em 0.8em;
+  font-size: 0.875em;
+  line-height: 1.4;
+  overflow-wrap: break-word;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.6}em;
+  border-left: 3px solid ${({ theme, $variant }) => (0, exports.variantColor)(theme, $variant).toString()};
+  background-color: ${({ theme, $variant }) => (0, exports.variantColor)(theme, $variant)
+    .alpha($variant === 'warning' ? 0.14 : 0.1)
+    .toString()};
+`;
+const InfoNoteContainer = (props, ref) => {
+    const { variant, children } = props, nativeProps = __rest(props, ["variant", "children"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { "$variant": variant, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(InfoNoteContainer);

package/InfoNote/InfoNoteContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type InfoNoteContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<InfoNoteContentProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/InfoNote/InfoNoteContent.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledContent = styled_1.default.div `
+  flex: 1;
+  min-width: 0;
+`;
+/**
+ * The title and the text, to the right of the icon
+ */
+const InfoNoteContent = (props, ref) => react_1.default.createElement(StyledContent, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(InfoNoteContent);

package/InfoNote/InfoNoteIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { InfoNoteVariant } from './index';
+export type InfoNoteIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly variant: InfoNoteVariant;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly variant: InfoNoteVariant;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/InfoNote/InfoNoteIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const InfoNoteContainer_1 = require("./InfoNoteContainer");
+const StyledIcon = styled_1.default.span `
+  flex: none;
+  display: inline-flex;
+  font-size: 1.15em;
+  color: ${({ theme, $variant }) => (0, InfoNoteContainer_1.variantColor)(theme, $variant).toString()};
+`;
+const Path = styled_1.default.path `
+  fill: currentColor;
+`;
+/**
+ * The paths of the default icons, 24×24: the circle with «i», the check, the triangle with «!»
+ * and the circle with «!»
+ */
+const PATHS = {
+    info: 'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z',
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z',
+    warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
+    error: 'M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z',
+};
+/**
+ * The icon of the variant. `children` replaces the default icon
+ */
+const InfoNoteIcon = (props, ref) => {
+    const { variant, children } = props, nativeProps = __rest(props, ["variant", "children"]);
+    return (react_1.default.createElement(StyledIcon, Object.assign({}, nativeProps, { "$variant": variant, "aria-hidden": true, ref: ref }), children !== null && children !== void 0 ? children : (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" },
+        react_1.default.createElement(Path, { d: PATHS[variant] })))));
+};
+exports.default = react_1.default.forwardRef(InfoNoteIcon);

package/InfoNote/InfoNoteTitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type InfoNoteTitleProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<InfoNoteTitleProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/InfoNote/InfoNoteTitle.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledTitle = styled_1.default.div `
+  font-weight: 600;
+  margin-bottom: 0.15em;
+`;
+const InfoNoteTitle = (props, ref) => react_1.default.createElement(StyledTitle, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(InfoNoteTitle);

package/InfoNote/index.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { InfoNoteContainerProps } from './InfoNoteContainer';
+import { InfoNoteIconProps } from './InfoNoteIcon';
+import { InfoNoteTitleProps } from './InfoNoteTitle';
+import { InfoNoteContentProps } from './InfoNoteContent';
+/**
+ * `info` — what is important to know, `success` — what is done, `warning` — where it is easy
+ * to make a mistake, `error` — what went wrong
+ */
+export type InfoNoteVariant = 'info' | 'success' | 'warning' | 'error';
+export type InfoNoteProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /**
+     * Default: `info`
+     */
+    readonly variant?: InfoNoteVariant;
+    /**
+     * The short first line in bold
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * Replaces the icon of the variant. `false` — no icon
+     */
+    readonly icon?: React.ReactNode;
+    readonly children?: React.ReactNode;
+    readonly overrides?: InfoNoteOverrides;
+};
+export interface InfoNoteOverrides {
+    /**
+     * The block: the colored border and the background
+     */
+    readonly Container?: React.ComponentType<InfoNoteContainerProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The icon of the variant
+     */
+    readonly Icon?: React.ComponentType<InfoNoteIconProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The title. Rendered only with `title`
+     */
+    readonly Title?: React.ComponentType<InfoNoteTitleProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The title and the text, to the right of the icon
+     */
+    readonly Content?: React.ComponentType<InfoNoteContentProps & React.RefAttributes<HTMLDivElement>>;
+}
+export * from './InfoNoteContainer';
+export * from './InfoNoteIcon';
+export * from './InfoNoteTitle';
+export * from './InfoNoteContent';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /**
+     * Default: `info`
+     */
+    readonly variant?: InfoNoteVariant;
+    /**
+     * The short first line in bold
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * Replaces the icon of the variant. `false` — no icon
+     */
+    readonly icon?: React.ReactNode;
+    readonly children?: React.ReactNode;
+    readonly overrides?: InfoNoteOverrides;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/InfoNote/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const InfoNoteContainer_1 = __importDefault(require("./InfoNoteContainer"));
+const InfoNoteIcon_1 = __importDefault(require("./InfoNoteIcon"));
+const InfoNoteTitle_1 = __importDefault(require("./InfoNoteTitle"));
+const InfoNoteContent_1 = __importDefault(require("./InfoNoteContent"));
+/**
+ * The short text in the form or the card which must be seen right here, without a click:
+ * «only the completed orders get into the revision». The longer explanation which is needed
+ * sometimes goes into HintPopover
+ */
+const InfoNote = (props, ref) => {
+    const { variant = 'info', title, icon, children, overrides } = props, nativeProps = __rest(props, ["variant", "title", "icon", "children", "overrides"]);
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || InfoNoteContainer_1.default,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || InfoNoteIcon_1.default,
+        Title: (overrides === null || overrides === void 0 ? void 0 : overrides.Title) || InfoNoteTitle_1.default,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || InfoNoteContent_1.default,
+    }), [overrides]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({ role: "note" }, nativeProps, { variant: variant, ref: ref }),
+        icon !== false && react_1.default.createElement(overridesMap.Icon, { variant: variant }, icon),
+        react_1.default.createElement(overridesMap.Content, null,
+            title && react_1.default.createElement(overridesMap.Title, null, title),
+            children)));
+};
+__exportStar(require("./InfoNoteContainer"), exports);
+__exportStar(require("./InfoNoteIcon"), exports);
+__exportStar(require("./InfoNoteTitle"), exports);
+__exportStar(require("./InfoNoteContent"), exports);
+exports.default = react_1.default.forwardRef(InfoNote);

package/Modal/Drawer/DrawerInner.d.ts

@@ -13,6 +13,12 @@ export type DrawerInnerProps = ModalInnerProps & React.RefAttributes<HTMLDivElem
      * **Default:** `bottom`
      */
     readonly anchor: AnchorVariant;
+    /**
+     * Close the drawer by a swipe towards its edge\
+     * \
+     * **Default:** `false`
+     */
+    readonly swipeToClose?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<DrawerInnerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Modal/Drawer/DrawerInner.js

@@ -18,6 +18,84 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const ModalInner_1 = __importDefault(require("../BaseModal/ModalInner"));
+const useSwipeToClose_1 = __importDefault(require("./useSwipeToClose"));
+/**
+ * The grip on the side facing the page: shows that the drawer can be swiped
+ * and lets a mouse drag it (elsewhere the mouse selects the text)
+ */
+const DrawerHandle = styled_1.default.div `
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &::before {
+    content: '';
+    border-radius: 1em;
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.24).toString()};
+  }
+
+  ${({ $anchor }) => {
+    switch ($anchor) {
+        case 'top':
+            return (0, react_2.css) `
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4em;
+          height: 1.25em;
+          &::before {
+            width: 2.5em;
+            height: 0.25em;
+          }
+        `;
+        case 'left':
+            return (0, react_2.css) `
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 1.25em;
+          height: 4em;
+          &::before {
+            width: 0.25em;
+            height: 2.5em;
+          }
+        `;
+        case 'right':
+            return (0, react_2.css) `
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 1.25em;
+          height: 4em;
+          &::before {
+            width: 0.25em;
+            height: 2.5em;
+          }
+        `;
+        case 'bottom':
+        default:
+            return (0, react_2.css) `
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4em;
+          height: 1.25em;
+          &::before {
+            width: 2.5em;
+            height: 0.25em;
+          }
+        `;
+    }
+}}
+`;
 const StyledDrawerBottomInner = (0, styled_1.default)(ModalInner_1.default) `
   position: fixed;
   margin: 0;
@@ -131,7 +209,16 @@ const StyledDrawerLeftInner = (0, styled_1.default)(ModalInner_1.default) `
     `}
 `;
 const DrawerInner = (props, ref) => {
-    const { children, isOpen, anchor, onRequestClose, dialogID } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID"]);
+    const { children, isOpen, anchor, onRequestClose, dialogID, swipeToClose } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID", "swipeToClose"]);
+    const elementRef = react_1.default.useRef(null);
+    react_1.default.useImperativeHandle(ref, () => elementRef.current);
+    const swipeHandlers = (0, useSwipeToClose_1.default)({
+        elementRef,
+        enabled: Boolean(swipeToClose),
+        isOpen,
+        anchor,
+        onClose: onRequestClose,
+    });
     const Element = react_1.default.useMemo(() => {
         switch (anchor) {
             case 'top':
@@ -145,6 +232,8 @@ const DrawerInner = (props, ref) => {
                 return StyledDrawerBottomInner;
         }
     }, [anchor]);
-    return (react_1.default.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, swipeHandlers, { ref: elementRef }),
+        swipeToClose && react_1.default.createElement(DrawerHandle, { "$anchor": anchor, "data-drawer-handle": true, "aria-hidden": "true" }),
+        children));
 };
 exports.default = react_1.default.forwardRef(DrawerInner);

package/Modal/Drawer/index.d.ts

@@ -41,6 +41,14 @@ export interface DrawerProps extends Omit<BaseModalProps, 'overrides'> {
      * **Default**: `'Close'`
      */
     readonly closeButtonLabel?: string;
+    /**
+     * Close the drawer by a swipe towards its edge: down for `bottom`, left for `left` and so on.
+     * A short swipe returns the drawer back. The content scrolls first, the drawer follows
+     * the finger when the content is at its edge. A mouse drags the drawer by the handle\
+     * \
+     * **Default:** `false`
+     */
+    readonly swipeToClose?: boolean;
     /**
      * Overridable components map
      */

package/Modal/Drawer/index.js

@@ -57,7 +57,7 @@ const DrawerFooter_1 = __importDefault(require("./DrawerFooter"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
 const Drawer = props => {
-    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
+    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides, swipeToClose } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides", "swipeToClose"]);
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||
@@ -67,8 +67,8 @@ const Drawer = props => {
     // Created once: a component created during the render is a new type on every render,
     // so React would remount the whole drawer content (inputs lose the focus and the state)
     const Inner = React.useMemo(() => React.forwardRef(function Inner(innerProps, ref) {
-        return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
-    }), [anchor, dialogID, hasTitle]);
+        return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, swipeToClose: swipeToClose, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
+    }), [anchor, dialogID, hasTitle, swipeToClose]);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || DrawerContainer_1.default,
         Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || DrawerHeader_1.default,