datocms-react-ui 0.3.14 → 0.3.19

package/dist/cjs/Button/styles.module.css.json

@@ -1 +1 @@
-{ "button": "_button_ya5s7_1", "disabled": "_disabled_ya5s7_30", "buttonType-muted": "_buttonType-muted_ya5s7_36", "buttonType-primary": "_buttonType-primary_ya5s7_41", "buttonType-negative": "_buttonType-negative_ya5s7_62", "buttonSize-xxs": "_buttonSize-xxs_ya5s7_79", "buttonSize-xs": "_buttonSize-xs_ya5s7_84", "buttonSize-s": "_buttonSize-s_ya5s7_89", "buttonSize-m": "_buttonSize-m_ya5s7_94", "buttonSize-l": "_buttonSize-l_ya5s7_99", "buttonSize-xl": "_buttonSize-xl_ya5s7_104", "fullWidth": "_fullWidth_ya5s7_109", "button__leftIcon": "_button__leftIcon_ya5s7_115", "button__rightIcon": "_button__rightIcon_ya5s7_116" }
+{ "button": "_button_474wk_1", "disabled": "_disabled_474wk_30", "buttonType-muted": "_buttonType-muted_474wk_34", "buttonType-primary": "_buttonType-primary_474wk_50", "buttonType-negative": "_buttonType-negative_474wk_71", "buttonSize-xxs": "_buttonSize-xxs_474wk_88", "buttonSize-xs": "_buttonSize-xs_474wk_93", "buttonSize-s": "_buttonSize-s_474wk_98", "buttonSize-m": "_buttonSize-m_474wk_103", "buttonSize-l": "_buttonSize-l_474wk_108", "buttonSize-xl": "_buttonSize-xl_474wk_113", "fullWidth": "_fullWidth_474wk_118", "button__leftIcon": "_button__leftIcon_474wk_124", "button__rightIcon": "_button__rightIcon_474wk_125" }

package/dist/cjs/ButtonGroup/Button/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+function Button(_a) {
+    var _b;
+    var children = _a.children, style = _a.style, className = _a.className, selected = _a.selected, disabled = _a.disabled, onClick = _a.onClick;
+    return (react_1.default.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: (0, classnames_1.default)(styles_module_css_json_1.default['Button'], (_b = {},
+            _b[styles_module_css_json_1.default['Button--selected']] = selected,
+            _b[styles_module_css_json_1.default['Button--disabled']] = disabled,
+            _b), className), style: style }, children));
+}
+exports.Button = Button;
+//# sourceMappingURL=index.js.map

package/dist/cjs/ButtonGroup/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ButtonGroup/Button/index.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAoC;AACpC,gDAA2E;AAC3E,oFAAyC;AAWzC,SAAgB,MAAM,CAAC,EAOT;;QANZ,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,OAAO,CACL,0CACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAA,oBAAU,EACnB,gCAAC,CAAC,QAAQ,CAAC;YAET,GAAC,gCAAC,CAAC,kBAAkB,CAAC,IAAG,QAAQ;YACjC,GAAC,gCAAC,CAAC,kBAAkB,CAAC,IAAG,QAAQ;iBAEnC,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AA1BD,wBA0BC"}

package/dist/cjs/ButtonGroup/Button/styles.module.css.json

@@ -0,0 +1 @@
+{ "Button": "_Button_1h1w1_1", "Button--s": "_Button--s_1h1w1_32", "Button--disabled": "_Button--disabled_1h1w1_36", "Button--selected": "_Button--selected_1h1w1_45" }

package/dist/cjs/ButtonGroup/Group/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <ButtonGroup>
+ *     <ButtonGroupButton>First</ButtonGroupButton>
+ *     <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *     <ButtonGroupButton>Third</ButtonGroupButton>
+ *     <ButtonGroupButton disabled>Fourth</ButtonGroupButton>
+ *   </ButtonGroup>
+ * </Canvas>;
+ * ```
+ */
+function Group(_a) {
+    var children = _a.children, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Group'], className), style: style }, children));
+}
+exports.Group = Group;
+//# sourceMappingURL=index.js.map

package/dist/cjs/ButtonGroup/Group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ButtonGroup/Group/index.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAoC;AACpC,gDAAwD;AACxD,oFAAyC;AAQzC;;;;;;;;;;;;;GAaG;AACH,SAAgB,KAAK,CAAC,EAA0C;QAAxC,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA;IAChD,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAND,sBAMC"}

package/dist/cjs/ButtonGroup/Group/styles.module.css.json

@@ -0,0 +1 @@
+{ "Group": "_Group_10mj4_1" }

package/dist/cjs/ButtonGroup/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroupButton = exports.ButtonGroup = void 0;
+var Group_1 = require("./Group");
+Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return Group_1.Group; } });
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "ButtonGroupButton", { enumerable: true, get: function () { return Button_1.Button; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/ButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ButtonGroup/index.ts"],"names":[],"mappings":";;;AAAA,iCAA+C;AAAtC,oGAAA,KAAK,OAAe;AAE7B,mCAAuD;AAA9C,2GAAA,MAAM,OAAqB"}

package/dist/cjs/Canvas/index.js

@@ -1,15 +1,4 @@
 "use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -33,15 +22,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Canvas = void 0;
+exports.Canvas = exports.useCtx = exports.CtxContext = void 0;
 var react_1 = __importStar(require("react"));
 var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
-function camelToDash(str) {
-    if (str != str.toLowerCase()) {
-        str = str.replace(/[A-Z]/g, function (m) { return '-' + m.toLowerCase(); });
+var generateStyleFromCtx_1 = require("../generateStyleFromCtx");
+var classnames_1 = __importDefault(require("classnames"));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+exports.CtxContext = (0, react_1.createContext)(null);
+function useCtx() {
+    var ctx = (0, react_1.useContext)(exports.CtxContext);
+    if (!ctx) {
+        throw new Error('useCtx requires <Canvas />!');
     }
-    return str;
+    return ctx;
 }
+exports.useCtx = useCtx;
 /**
  * @example Color palette CSS variables
  *
@@ -540,20 +535,14 @@ function Canvas(_a) {
         if (mode !== 'renderPage' && !noAutoResizer) {
             var ctxWithAutoResizer_1 = ctx;
             ctxWithAutoResizer_1.startAutoResizer();
-            (function () {
+            return function () {
                 ctxWithAutoResizer_1.stopAutoResizer();
-            });
+            };
         }
+        return undefined;
     }, [mode, noAutoResizer]);
-    var style = Object.entries(ctx.theme).reduce(function (acc, _a) {
-        var _b;
-        var _c;
-        var k = _a[0], v = _a[1];
-        return __assign(__assign({}, acc), (_b = {}, _b["--" + camelToDash(k)] = v, _b["--" + camelToDash(k + "RgbComponents")] = ((_c = v.match(/rgb\((\d+, \d+, \d+)\)/)) === null || _c === void 0 ? void 0 : _c[1]) || undefined, _b));
-    }, {
-        padding: ctx.bodyPadding.map(function (p) { return p + "px"; }).join(' '),
-    });
-    return (react_1.default.createElement("div", { className: styles_module_css_json_1.default.canvas, style: style }, children));
+    return (react_1.default.createElement(exports.CtxContext.Provider, { value: ctx },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['themeVariables'], styles_module_css_json_1.default['canvas']), style: (0, generateStyleFromCtx_1.generateStyleFromCtx)(ctx) }, children)));
 }
 exports.Canvas = Canvas;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAEpD,oFAA8C;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,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,IAAA,iBAAS,EAAC;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,uCAAK,SAAS,EAAE,gCAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IACxC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AArCD,wBAqCC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+E;AAM/E,oFAAyC;AACzC,gEAA+D;AAC/D,0DAAoC;AAIpC,8DAA8D;AACjD,QAAA,UAAU,GAAG,IAAA,qBAAa,EACrC,IAAI,CACL,CAAC;AAEF,SAAgB,MAAM;IACpB,IAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,kBAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AARD,wBAQC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0eG;AAEH,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,IAAA,iBAAS,EAAC;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,8BAAC,kBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,gBAAgB,CAAC,EAAE,gCAAC,CAAC,QAAQ,CAAC,CAAC,EACvD,KAAK,EAAE,IAAA,2CAAoB,EAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC;AA9BD,wBA8BC"}

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

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

package/dist/cjs/Dropdown/Dropdown.js

@@ -0,0 +1,166 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+var react_1 = __importStar(require("react"));
+var useMediaQuery_1 = require("../useMediaQuery");
+var useClickOutside_1 = __importDefault(require("../useClickOutside"));
+var DropdownContext_1 = require("./DropdownContext");
+var styles_module_css_json_1 = __importDefault(require("./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>;
+ * ```
+ */
+function Dropdown(_a) {
+    var renderTrigger = _a.renderTrigger, children = _a.children;
+    var isClickOutsideEnabled = (0, react_1.useRef)();
+    var _b = (0, react_1.useState)(false), isOpen = _b[0], setOpen = _b[1];
+    (0, react_1.useEffect)(function () {
+        isClickOutsideEnabled.current = false;
+    }, []);
+    var handleClickOutside = (0, react_1.useCallback)(function (event) {
+        if (isClickOutsideEnabled.current &&
+            !event.target.closest(styles_module_css_json_1.default['Dropdown__menu']) &&
+            isOpen) {
+            setOpen(false);
+        }
+    }, [setOpen, isOpen, isClickOutsideEnabled]);
+    var outsideRef = (0, useClickOutside_1.default)(handleClickOutside);
+    var handleClose = (0, react_1.useCallback)(function () {
+        setOpen(false);
+    }, [setOpen]);
+    var handleToggle = (0, react_1.useCallback)(function () {
+        setOpen(function (open) { return !open; });
+    }, [setOpen]);
+    return (react_1.default.createElement(useMediaQuery_1.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_1.default.createElement(DropdownContext_1.DropdownContext.Provider, { value: { closeMenu: handleClose } },
+            react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown'], ref: outsideRef },
+                renderTrigger({ open: isOpen, onClick: handleToggle }),
+                isOpen && children)));
+    }));
+}
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=Dropdown.js.map

package/dist/cjs/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwE;AACxE,kDAA8C;AAC9C,uEAAiD;AACjD,qDAAoD;AACpD,oFAAyC;AAYzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqGG;AACH,SAAgB,QAAQ,CAAC,EAGT;QAFd,aAAa,mBAAA,EACb,QAAQ,cAAA;IAER,IAAM,qBAAqB,GAAG,IAAA,cAAM,GAAW,CAAC;IAC1C,IAAA,KAAoB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAlC,MAAM,QAAA,EAAE,OAAO,QAAmB,CAAC;IAE1C,IAAA,iBAAS,EAAC;QACR,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,UAAC,KAAK;QACJ,IACE,qBAAqB,CAAC,OAAO;YAC7B,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,gCAAC,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,IAAA,yBAAe,EAAiB,kBAAkB,CAAC,CAAC;IAEvE,IAAM,WAAW,GAAG,IAAA,mBAAW,EAAC;QAC9B,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAM,YAAY,GAAG,IAAA,mBAAW,EAAC;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,8BAAC,0BAAU,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,8BAAC,iCAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;YACzD,uCAAK,SAAS,EAAE,gCAAC,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;AApDD,4BAoDC"}

package/dist/cjs/Dropdown/DropdownContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownContext = void 0;
+var react_1 = require("react");
+exports.DropdownContext = (0, react_1.createContext)({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    closeMenu: function () { },
+});
+//# sourceMappingURL=DropdownContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownContext.js","sourceRoot":"","sources":["../../../src/Dropdown/DropdownContext.tsx"],"names":[],"mappings":";;;AAAA,+BAAsC;AAMzB,QAAA,eAAe,GAAG,IAAA,qBAAa,EAAsB;IAChE,gEAAgE;IAChE,SAAS,EAAE,cAAO,CAAC;CACpB,CAAC,CAAC"}

package/dist/cjs/Dropdown/Group.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 });
+exports.Group = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+var Group = function (_a) {
+    var children = _a.children, name = _a.name;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown__menu__group__title'] }, name),
+        react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown__menu__group__content'] }, children)));
+};
+exports.Group = Group;
+//# sourceMappingURL=Group.js.map

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

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

package/dist/cjs/Dropdown/Menu.js

@@ -0,0 +1,250 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+var react_1 = __importStar(require("react"));
+var scroll_into_view_if_needed_1 = __importDefault(require("scroll-into-view-if-needed"));
+var react_intersection_observer_1 = require("react-intersection-observer");
+var Portal_1 = require("./Portal");
+var useMediaQuery_1 = require("../useMediaQuery");
+var DropdownContext_1 = require("./DropdownContext");
+var Group_1 = require("./Group");
+var MenuContext_1 = require("./MenuContext");
+var Option_1 = require("./Option");
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+var mergeRefs_1 = require("../mergeRefs");
+var classnames_1 = __importDefault(require("classnames"));
+var MenuMobileContainer = function (_a) {
+    var children = _a.children;
+    return (react_1.default.createElement(Portal_1.Portal, null,
+        react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown__menu__mobile-container'], style: { zIndex: 1000 } },
+            react_1.default.createElement("div", { className: styles_module_css_json_1.default['Modal__backdrop'] }),
+            children)));
+};
+var MenuDesktopContainer = react_1.default.forwardRef(function (_a, ref) {
+    var children = _a.children;
+    return (react_1.default.createElement(Portal_1.Portal, null,
+        react_1.default.createElement("div", { className: styles_module_css_json_1.default['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('.' + styles_module_css_json_1.default['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';
+}
+var Menu = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? 'left' : _c;
+    var closeMenu = (0, react_1.useContext)(DropdownContext_1.DropdownContext).closeMenu;
+    var childrenArray = react_1.default.Children.toArray(children);
+    var _d = (0, react_1.useState)(''), searchTerm = _d[0], setSearchTerm = _d[1];
+    var _e = (0, react_1.useState)([]), options = _e[0], setOptions = _e[1];
+    var handleChange = (0, react_1.useCallback)(function (e) {
+        setSearchTerm(e.target.value);
+    }, [setSearchTerm]);
+    var anyGroup = childrenArray.some(function (child) {
+        return typeof child === 'object' && 'type' in child && child.type === Group_1.Group;
+    });
+    var matches = (0, useMediaQuery_1.useMediaQuery)('(max-width: 1024px)').matches;
+    var addOption = (0, react_1.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 = (0, react_1.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 = (0, react_1.useRef)(null);
+    var handleKeyDown = (0, react_1.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('.' + styles_module_css_json_1.default['Dropdown__menu__option--is-selected']);
+            var nextOption = void 0;
+            if (!selectedOption_1) {
+                nextOption = contentRef.current.querySelector('.' + styles_module_css_json_1.default['Dropdown__menu__option']);
+            }
+            else {
+                var elements = Array.from(contentRef.current.querySelectorAll('.' + styles_module_css_json_1.default['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(styles_module_css_json_1.default['Dropdown__menu__option--is-selected']);
+            }
+            if (nextOption) {
+                nextOption.classList.add(styles_module_css_json_1.default['Dropdown__menu__option--is-selected']);
+                (0, scroll_into_view_if_needed_1.default)(nextOption, {
+                    scrollMode: 'if-needed',
+                    behavior: 'auto',
+                });
+            }
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!contentRef.current) {
+                return;
+            }
+            var selectedOption = contentRef.current.querySelector('.' + styles_module_css_json_1.default['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 = (0, react_intersection_observer_1.useInView)({
+        threshold: 0,
+        rootMargin: '0px 0px 0px 0px',
+        triggerOnce: false,
+    }), observerRef = _f[0], inView = _f[1], entry = _f[2];
+    var parentRef = (0, react_1.createRef)();
+    var menuRef = (0, react_1.createRef)();
+    var reposition = (0, react_1.useCallback)(function () {
+        if (menuRef.current && parentRef.current) {
+            setPosition(menuRef.current, parentRef.current, alignment);
+        }
+    }, [menuRef, parentRef, alignment]);
+    (0, react_1.useEffect)(function () {
+        reposition();
+    }, [inView, entry === null || entry === void 0 ? void 0 : entry.intersectionRatio]);
+    (0, react_1.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]);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', reposition);
+        return function () { return window.removeEventListener('resize', reposition); };
+    }, [reposition]);
+    var Wrapper = matches ? MenuMobileContainer : MenuDesktopContainer;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: (0, mergeRefs_1.mergeRefs)(observerRef, parentRef), className: styles_module_css_json_1.default['Dropdown__spacer'] }),
+        react_1.default.createElement(Wrapper, { ref: menuRef },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Dropdown__menu'], (_b = {},
+                    _b[styles_module_css_json_1.default['Dropdown__menu--fullscreen']] = matches,
+                    _b)) },
+                options.length > 5 && (react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown__menu__search'] },
+                    react_1.default.createElement("input", { type: "text", value: searchTerm || '', onChange: handleChange, onKeyDown: handleKeyDown, placeholder: "Search...", autoFocus: true, className: styles_module_css_json_1.default['Dropdown__menu__search__input'] }))),
+                react_1.default.createElement(MenuContext_1.MenuContext.Provider, { value: { searchTerm: searchTerm, addOption: addOption, setClickHandlerForOption: setClickHandlerForOption } },
+                    react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown__menu__inner'], ref: contentRef }, anyGroup ? (children) : (react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown__menu__group__content'] }, children))))),
+            matches ? (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: styles_module_css_json_1.default['Dropdown__menu__inner'] },
+                    react_1.default.createElement(Option_1.Option, { closeMenuOnClick: true }, "Close")))) : null)));
+};
+exports.Menu = Menu;
+//# sourceMappingURL=Menu.js.map