datocms-react-ui 0.3.15 → 0.3.20

package/dist/esm/Canvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0eG;AAEH,MAAM,UAAU,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,SAAS,CAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,CAAA;gBACE,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAA,CAAC;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAC5C,UAAC,GAAG,EAAE,EAAM;;;YAAL,CAAC,QAAA,EAAE,CAAC,QAAA;QACT,6BACK,GAAG,gBACL,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,KACzB,OAAK,WAAW,CAAI,CAAC,kBAAe,CAAG,IACtC,CAAA,MAAA,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,KAAI,SAAS,OACrD;IACJ,CAAC,EACD;QACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;KACxD,CACF,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IACxC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/E,OAAO,CAAC,MAAM,0BAA0B,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,8DAA8D;AAC9D,MAAM,CAAC,IAAM,UAAU,GAAG,aAAa,CACrC,IAAI,CACL,CAAC;AAEF,MAAM,UAAU,MAAM;IACpB,IAAM,GAAG,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0eG;AAEH,MAAM,UAAU,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,SAAS,CAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,OAAO;gBACL,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,6BACE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACvD,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC"}

package/dist/esm/Canvas/styles.module.css.json

@@ -1 +1 @@
-{ "canvas": "_canvas_1es76_1" }
+{ "themeVariables": "_themeVariables_ovgoa_1", "canvas": "_canvas_ovgoa_68" }

package/dist/esm/Dropdown/Dropdown.d.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+declare type RenderTriggerCtx = {
+    open: boolean;
+    onClick: () => void;
+};
+export declare type DropdownProps = {
+    renderTrigger: (ctx: RenderTriggerCtx) => JSX.Element;
+    children: React.ReactNode;
+};
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Options
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownOption onClick={() => {}}>Edit</DropdownOption>
+ *       <DropdownOption disabled onClick={() => {}}>
+ *         Duplicate
+ *       </DropdownOption>
+ *       <DropdownSeparator />
+ *       <DropdownOption red onClick={() => {}}>
+ *         Delete
+ *       </DropdownOption>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ *
+ * @example Option actions
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Fields
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownOption>
+ *         First option
+ *         <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
+ *         <DropdownOptionAction
+ *           red
+ *           icon={<TrashIcon />}
+ *           onClick={() => {}}
+ *         />
+ *       </DropdownOption>
+ *       <DropdownOption>
+ *         Second option
+ *         <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
+ *         <DropdownOptionAction
+ *           red
+ *           icon={<TrashIcon />}
+ *           onClick={() => {}}
+ *         />
+ *       </DropdownOption>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ *
+ * @example Option groups
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Fields
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownGroup name="Group 1">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *       <DropdownGroup name="Group 2">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *       <DropdownGroup name="Group 3">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ */
+export declare function Dropdown({ renderTrigger, children, }: DropdownProps): JSX.Element;
+export {};

package/dist/esm/Dropdown/Dropdown.js

@@ -0,0 +1,140 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { MediaQuery } from '../useMediaQuery';
+import useClickOutside from '../useClickOutside';
+import { DropdownContext } from './DropdownContext';
+import s from './styles.module.css.json';
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Options
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownOption onClick={() => {}}>Edit</DropdownOption>
+ *       <DropdownOption disabled onClick={() => {}}>
+ *         Duplicate
+ *       </DropdownOption>
+ *       <DropdownSeparator />
+ *       <DropdownOption red onClick={() => {}}>
+ *         Delete
+ *       </DropdownOption>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ *
+ * @example Option actions
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Fields
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownOption>
+ *         First option
+ *         <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
+ *         <DropdownOptionAction
+ *           red
+ *           icon={<TrashIcon />}
+ *           onClick={() => {}}
+ *         />
+ *       </DropdownOption>
+ *       <DropdownOption>
+ *         Second option
+ *         <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
+ *         <DropdownOptionAction
+ *           red
+ *           icon={<TrashIcon />}
+ *           onClick={() => {}}
+ *         />
+ *       </DropdownOption>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ *
+ * @example Option groups
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Fields
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownGroup name="Group 1">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *       <DropdownGroup name="Group 2">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *       <DropdownGroup name="Group 3">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ */
+export function Dropdown(_a) {
+    var renderTrigger = _a.renderTrigger, children = _a.children;
+    var isClickOutsideEnabled = useRef();
+    var _b = useState(false), isOpen = _b[0], setOpen = _b[1];
+    useEffect(function () {
+        isClickOutsideEnabled.current = false;
+    }, []);
+    var handleClickOutside = useCallback(function (event) {
+        if (isClickOutsideEnabled.current &&
+            !event.target.closest(s['Dropdown__menu']) &&
+            isOpen) {
+            setOpen(false);
+        }
+    }, [setOpen, isOpen, isClickOutsideEnabled]);
+    var outsideRef = useClickOutside(handleClickOutside);
+    var handleClose = useCallback(function () {
+        setOpen(false);
+    }, [setOpen]);
+    var handleToggle = useCallback(function () {
+        setOpen(function (open) { return !open; });
+    }, [setOpen]);
+    return (React.createElement(MediaQuery, { media: "(max-width: 1024px)" }, function (_a) {
+        var matches = _a.matches;
+        // In small devices click outside is disabled because
+        // the menu goes full screen and has a close button.
+        isClickOutsideEnabled.current = !matches;
+        return (React.createElement(DropdownContext.Provider, { value: { closeMenu: handleClose } },
+            React.createElement("div", { className: s['Dropdown'], ref: outsideRef },
+                renderTrigger({ open: isOpen, onClick: handleToggle }),
+                isOpen && children)));
+    }));
+}
+//# sourceMappingURL=Dropdown.js.map

package/dist/esm/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,eAAe,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAYzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqGG;AACH,MAAM,UAAU,QAAQ,CAAC,EAGT;QAFd,aAAa,mBAAA,EACb,QAAQ,cAAA;IAER,IAAM,qBAAqB,GAAG,MAAM,EAAW,CAAC;IAC1C,IAAA,KAAoB,QAAQ,CAAC,KAAK,CAAC,EAAlC,MAAM,QAAA,EAAE,OAAO,QAAmB,CAAC;IAE1C,SAAS,CAAC;QACR,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,kBAAkB,GAAG,WAAW,CACpC,UAAC,KAAK;QACJ,IACE,qBAAqB,CAAC,OAAO;YAC7B,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;YAC1C,MAAM,EACN;YACA,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,OAAO,EAAE,MAAM,EAAE,qBAAqB,CAAC,CACzC,CAAC;IAEF,IAAM,UAAU,GAAG,eAAe,CAAiB,kBAAkB,CAAC,CAAC;IAEvE,IAAM,WAAW,GAAG,WAAW,CAAC;QAC9B,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAM,YAAY,GAAG,WAAW,CAAC;QAC/B,OAAO,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,EAAL,CAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,oBAAC,UAAU,IAAC,KAAK,EAAC,qBAAqB,IACpC,UAAC,EAAW;YAAT,OAAO,aAAA;QACT,qDAAqD;QACrD,oDAAoD;QACpD,qBAAqB,CAAC,OAAO,GAAG,CAAC,OAAO,CAAC;QAEzC,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;YACzD,6BAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,UAAU;gBAC3C,aAAa,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;gBACtD,MAAM,IAAI,QAAQ,CACf,CACmB,CAC5B,CAAC;IACJ,CAAC,CACU,CACd,CAAC;AACJ,CAAC"}

package/dist/esm/Dropdown/DropdownContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type DropdownContextType = {
+    closeMenu: () => void;
+};
+export declare const DropdownContext: import("react").Context<DropdownContextType>;
+export {};

package/dist/esm/Dropdown/DropdownContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export var DropdownContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    closeMenu: function () { },
+});
+//# sourceMappingURL=DropdownContext.js.map

package/dist/esm/Dropdown/DropdownContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownContext.js","sourceRoot":"","sources":["../../../src/Dropdown/DropdownContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAMtC,MAAM,CAAC,IAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,gEAAgE;IAChE,SAAS,EAAE,cAAO,CAAC;CACpB,CAAC,CAAC"}

package/dist/esm/Dropdown/Group.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export declare type GroupProps = {
+    children: React.ReactNode;
+    name: ReactNode;
+};
+export declare const Group: ({ children, name }: GroupProps) => JSX.Element;

package/dist/esm/Dropdown/Group.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import s from './styles.module.css.json';
+export var Group = function (_a) {
+    var children = _a.children, name = _a.name;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: s['Dropdown__menu__group__title'] }, name),
+        React.createElement("div", { className: s['Dropdown__menu__group__content'] }, children)));
+};
+//# sourceMappingURL=Group.js.map

package/dist/esm/Dropdown/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../src/Dropdown/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAOzC,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAA8B;QAA5B,QAAQ,cAAA,EAAE,IAAI,UAAA;IACpC,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,CAAC,CAAC,8BAA8B,CAAC,IAAG,IAAI,CAAO;QAC/D,6BAAK,SAAS,EAAE,CAAC,CAAC,gCAAgC,CAAC,IAAG,QAAQ,CAAO,CACjE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/Dropdown/Menu.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type MenuProps = {
+    children: React.ReactNode;
+    alignment?: 'left' | 'right';
+};
+export declare const Menu: ({ children, alignment, }: MenuProps) => JSX.Element;

package/dist/esm/Dropdown/Menu.js

@@ -0,0 +1,224 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { createRef, useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useInView } from 'react-intersection-observer';
+import { Portal } from './Portal';
+import { useMediaQuery } from '../useMediaQuery';
+import { DropdownContext } from './DropdownContext';
+import { Group } from './Group';
+import { MenuContext } from './MenuContext';
+import { Option } from './Option';
+import s from './styles.module.css.json';
+import { mergeRefs } from '../mergeRefs';
+import classNames from 'classnames';
+var MenuMobileContainer = function (_a) {
+    var children = _a.children;
+    return (React.createElement(Portal, null,
+        React.createElement("div", { className: s['Dropdown__menu__mobile-container'], style: { zIndex: 1000 } },
+            React.createElement("div", { className: s['Modal__backdrop'] }),
+            children)));
+};
+var MenuDesktopContainer = React.forwardRef(function (_a, ref) {
+    var children = _a.children;
+    return (React.createElement(Portal, null,
+        React.createElement("div", { className: s['Dropdown__menu-container'], style: { zIndex: 1000 }, ref: ref }, children)));
+});
+function getAbsoluteHeight(el) {
+    var styles = window.getComputedStyle(el);
+    var margin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+    return Math.ceil(el.offsetHeight + margin);
+}
+function getAbsoluteWidth(el) {
+    var styles = window.getComputedStyle(el);
+    var margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+    return Math.ceil(el.offsetWidth + margin);
+}
+function setPosition(panel, parent, alignment) {
+    var rect = parent.getBoundingClientRect();
+    var height = getAbsoluteHeight(panel);
+    var parentWidth = getAbsoluteWidth(parent);
+    var width = getAbsoluteWidth(panel);
+    if (alignment === 'left') {
+        // eslint-disable-next-line no-param-reassign
+        panel.style.left = rect.left + window.pageXOffset + "px";
+    }
+    else {
+        // eslint-disable-next-line no-param-reassign
+        panel.style.left = rect.left + window.pageXOffset + parentWidth - width + "px";
+    }
+    var windowHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+    var menu = panel.querySelector('.' + s['Dropdown__menu']);
+    if (!menu) {
+        return;
+    }
+    var styles = window.getComputedStyle(menu);
+    var marginTop = parseFloat(styles.marginTop);
+    var fitsBelow = rect.bottom + height <= windowHeight;
+    var fitsAbove = rect.top - height > 0;
+    if (!fitsBelow && fitsAbove) {
+        // eslint-disable-next-line no-param-reassign
+        panel.style.top = rect.bottom - height + "px";
+    }
+    else if (fitsBelow) {
+        // eslint-disable-next-line no-param-reassign
+        panel.style.top = rect.bottom + "px";
+    }
+    else {
+        var spaceAbove = rect.top;
+        var spaceBelow = windowHeight - rect.bottom;
+        if (spaceBelow > spaceAbove) {
+            // eslint-disable-next-line no-param-reassign
+            panel.style.top = rect.bottom + "px";
+            menu.style.maxHeight = windowHeight - rect.bottom - marginTop - 10 + "px";
+        }
+        else {
+            // eslint-disable-next-line no-param-reassign
+            panel.style.top = "0px";
+            menu.style.maxHeight = rect.top - marginTop + "px";
+        }
+    }
+    // eslint-disable-next-line no-param-reassign
+    panel.style.visibility = 'visible';
+}
+export var Menu = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? 'left' : _c;
+    var closeMenu = useContext(DropdownContext).closeMenu;
+    var childrenArray = React.Children.toArray(children);
+    var _d = useState(''), searchTerm = _d[0], setSearchTerm = _d[1];
+    var _e = useState([]), options = _e[0], setOptions = _e[1];
+    var handleChange = useCallback(function (e) {
+        setSearchTerm(e.target.value);
+    }, [setSearchTerm]);
+    var anyGroup = childrenArray.some(function (child) {
+        return typeof child === 'object' && 'type' in child && child.type === Group;
+    });
+    var matches = useMediaQuery('(max-width: 1024px)').matches;
+    var addOption = useCallback(function (id) {
+        setOptions(function (old) { return __spreadArray(__spreadArray([], old, true), [{ id: id }], false); });
+        return function () {
+            setOptions(function (old) { return old.filter(function (x) { return x.id !== id; }); });
+        };
+    }, [setOptions]);
+    var setClickHandlerForOption = useCallback(function (id, handler) {
+        setOptions(function (old) {
+            return old.map(function (x) { return (x.id !== id ? x : __assign(__assign({}, x), { handler: handler })); });
+        });
+    }, [setOptions]);
+    var contentRef = useRef(null);
+    var handleKeyDown = useCallback(function (event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            closeMenu();
+        }
+        if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!contentRef.current) {
+                return;
+            }
+            var delta = event.key === 'ArrowUp' ? -1 : 1;
+            var selectedOption_1 = contentRef.current.querySelector('.' + s['Dropdown__menu__option--is-selected']);
+            var nextOption = void 0;
+            if (!selectedOption_1) {
+                nextOption = contentRef.current.querySelector('.' + s['Dropdown__menu__option']);
+            }
+            else {
+                var elements = Array.from(contentRef.current.querySelectorAll('.' + s['Dropdown__menu__option']));
+                var index = elements.findIndex(function (el) { return el === selectedOption_1; });
+                var nextIndex = index + delta < 0
+                    ? elements.length - 1
+                    : (index + delta) % elements.length;
+                nextOption = elements[nextIndex];
+                selectedOption_1.classList.remove(s['Dropdown__menu__option--is-selected']);
+            }
+            if (nextOption) {
+                nextOption.classList.add(s['Dropdown__menu__option--is-selected']);
+                scrollIntoView(nextOption, {
+                    scrollMode: 'if-needed',
+                    behavior: 'auto',
+                });
+            }
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!contentRef.current) {
+                return;
+            }
+            var selectedOption = contentRef.current.querySelector('.' + s['Dropdown__menu__option--is-selected']);
+            if (selectedOption) {
+                var id_1 = selectedOption.dataset.optionId;
+                var option = options.find(function (x) { return x.id === id_1; });
+                if (option && option.handler) {
+                    option.handler(event);
+                }
+            }
+        }
+    }, [options]);
+    var _f = useInView({
+        threshold: 0,
+        rootMargin: '0px 0px 0px 0px',
+        triggerOnce: false,
+    }), observerRef = _f[0], inView = _f[1], entry = _f[2];
+    var parentRef = createRef();
+    var menuRef = createRef();
+    var reposition = useCallback(function () {
+        if (menuRef.current && parentRef.current) {
+            setPosition(menuRef.current, parentRef.current, alignment);
+        }
+    }, [menuRef, parentRef, alignment]);
+    useEffect(function () {
+        reposition();
+    }, [inView, entry === null || entry === void 0 ? void 0 : entry.intersectionRatio]);
+    useEffect(function () {
+        if (menuRef.current && parentRef.current) {
+            var resizeObserver_1 = new ResizeObserver(reposition);
+            resizeObserver_1.observe(menuRef.current);
+            resizeObserver_1.observe(parentRef.current);
+            return function () {
+                resizeObserver_1.disconnect();
+            };
+        }
+        return undefined;
+    }, [menuRef, reposition]);
+    useEffect(function () {
+        window.addEventListener('resize', reposition);
+        return function () { return window.removeEventListener('resize', reposition); };
+    }, [reposition]);
+    var Wrapper = matches ? MenuMobileContainer : MenuDesktopContainer;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: mergeRefs(observerRef, parentRef), className: s['Dropdown__spacer'] }),
+        React.createElement(Wrapper, { ref: menuRef },
+            React.createElement("div", { className: classNames(s['Dropdown__menu'], (_b = {},
+                    _b[s['Dropdown__menu--fullscreen']] = matches,
+                    _b)) },
+                options.length > 5 && (React.createElement("div", { className: s['Dropdown__menu__search'] },
+                    React.createElement("input", { type: "text", value: searchTerm || '', onChange: handleChange, onKeyDown: handleKeyDown, placeholder: "Search...", autoFocus: true, className: s['Dropdown__menu__search__input'] }))),
+                React.createElement(MenuContext.Provider, { value: { searchTerm: searchTerm, addOption: addOption, setClickHandlerForOption: setClickHandlerForOption } },
+                    React.createElement("div", { className: s['Dropdown__menu__inner'], ref: contentRef }, anyGroup ? (children) : (React.createElement("div", { className: s['Dropdown__menu__group__content'] }, children))))),
+            matches ? (React.createElement("div", null,
+                React.createElement("div", { className: s['Dropdown__menu__inner'] },
+                    React.createElement(Option, { closeMenuOnClick: true }, "Close")))) : null)));
+};
+//# sourceMappingURL=Menu.js.map

package/dist/esm/Dropdown/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/Dropdown/Menu.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Dropdown/MenuContext.d.ts

@@ -0,0 +1,8 @@
+import { SyntheticEvent } from 'react';
+declare type Context = {
+    searchTerm: string;
+    addOption: (id: string) => void;
+    setClickHandlerForOption: (id: string, handler: (e: SyntheticEvent) => void) => void;
+};
+export declare const MenuContext: import("react").Context<Context>;
+export {};

package/dist/esm/Dropdown/MenuContext.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+export var MenuContext = createContext({
+    searchTerm: '',
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    addOption: function () { },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setClickHandlerForOption: function () { },
+});
+//# sourceMappingURL=MenuContext.js.map

package/dist/esm/Dropdown/MenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContext.js","sourceRoot":"","sources":["../../../src/Dropdown/MenuContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAWtD,MAAM,CAAC,IAAM,WAAW,GAAG,aAAa,CAAU;IAChD,UAAU,EAAE,EAAE;IACd,gEAAgE;IAChE,SAAS,EAAE,cAAO,CAAC;IACnB,gEAAgE;IAChE,wBAAwB,EAAE,cAAO,CAAC;CACnC,CAAC,CAAC"}

package/dist/esm/Dropdown/Option.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type OptionProps = {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    to?: string;
+    active?: boolean;
+    red?: boolean;
+    valid?: boolean;
+    invalid?: boolean;
+    children: React.ReactNode;
+    disabled?: boolean;
+    closeMenuOnClick?: boolean;
+};
+export declare const Option: ({ onClick, to, active, red, valid, invalid, children, disabled, closeMenuOnClick, }: OptionProps) => JSX.Element | null;