datocms-react-ui 0.3.14 → 0.3.19

package/dist/esm/Toolbar/Toolbar/index.d.ts

@@ -0,0 +1,91 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type ToolbarProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * - @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Buttons and actions
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarButton>
+ *       <BackIcon />
+ *     </ToolbarButton>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <Button buttonType="primary">Action</Button>
+ *     </ToolbarStack>
+ *     <ToolbarButton>
+ *       <SidebarLeftArrowIcon />
+ *     </ToolbarButton>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example With button group
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <ButtonGroup>
+ *         <ButtonGroupButton>First</ButtonGroupButton>
+ *         <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *         <ButtonGroupButton>Third</ButtonGroupButton>
+ *       </ButtonGroup>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export declare function Toolbar({ children, style, className, }: ToolbarProps): JSX.Element;

package/dist/esm/Toolbar/Toolbar/index.js

@@ -0,0 +1,92 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './styles.module.css.json';
+/**
+ * - @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Buttons and actions
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarButton>
+ *       <BackIcon />
+ *     </ToolbarButton>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <Button buttonType="primary">Action</Button>
+ *     </ToolbarStack>
+ *     <ToolbarButton>
+ *       <SidebarLeftArrowIcon />
+ *     </ToolbarButton>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example With button group
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <ButtonGroup>
+ *         <ButtonGroupButton>First</ButtonGroupButton>
+ *         <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *         <ButtonGroupButton>Third</ButtonGroupButton>
+ *       </ButtonGroup>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function Toolbar(_a) {
+    var children = _a.children, style = _a.style, className = _a.className;
+    return (React.createElement("div", { className: classNames(s['Toolbar'], className), style: style }, children));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAQzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,MAAM,UAAU,OAAO,CAAC,EAIT;QAHb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,CAAC,CAAC,SAAS,CAAC,EAEZ,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1 @@
+{ "Toolbar": "_Toolbar_1cwb8_1" }

package/dist/esm/Toolbar/index.d.ts

@@ -0,0 +1,8 @@
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';
+export { Button as ToolbarButton } from './Button';
+export type { ButtonProps as ToolbarButtonProps } from './Button';
+export { Title as ToolbarTitle } from './Title';
+export type { TitleProps as ToolbarTitleProps } from './Title';
+export { Stack as ToolbarStack } from './Stack';
+export type { StackProps as ToolbarStackProps } from './Stack';

package/dist/esm/Toolbar/index.js

@@ -0,0 +1,5 @@
+export { Toolbar } from './Toolbar';
+export { Button as ToolbarButton } from './Button';
+export { Title as ToolbarTitle } from './Title';
+export { Stack as ToolbarStack } from './Stack';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/generateStyleFromCtx/index.d.ts

@@ -0,0 +1,3 @@
+import { RenderProperties } from 'datocms-plugin-sdk';
+import { CSSProperties } from 'react';
+export declare function generateStyleFromCtx(ctx: RenderProperties): CSSProperties;

package/dist/esm/generateStyleFromCtx/index.js

@@ -0,0 +1,28 @@
+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);
+};
+function camelToDash(str) {
+    if (str != str.toLowerCase()) {
+        str = str.replace(/[A-Z]/g, function (m) { return '-' + m.toLowerCase(); });
+    }
+    return str;
+}
+export function generateStyleFromCtx(ctx) {
+    return 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(' '),
+    });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/generateStyleFromCtx/index.ts"],"names":[],"mappings":";;;;;;;;;;;AAGA,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;AAED,MAAM,UAAU,oBAAoB,CAAC,GAAqB;IACxD,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CACrC,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;AACJ,CAAC"}

package/dist/esm/icons.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export declare type IconProps = {
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function BackIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function SidebarLeftArrowIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function SidebarRightArrowIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function CaretDownIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function CaretUpIcon({ width, height, style, className, }: IconProps): JSX.Element;

package/dist/esm/icons.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export function BackIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z" })));
+}
+export function SidebarLeftArrowIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M152 412.5L3.5 264.5c-4.7-4.7-4.7-12.3 0-17L152 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L60.1 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H60.1L176 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM436 64h-8c-6.6 0-12 5.4-12 12v360c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12z" })));
+}
+export function SidebarRightArrowIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M296 99.5l148.5 148c4.7 4.7 4.7 12.3 0 17L296 412.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-115.4H76c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h311.9L272 123.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z" })));
+}
+export function CaretDownIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" })));
+}
+export function CaretUpIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z" })));
+}
+//# sourceMappingURL=icons.js.map

package/dist/esm/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAS7C,MAAM,UAAU,QAAQ,CAAC,EAKb;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,+QAA+Q,GAAQ,CAC3R,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EAKzB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,yUAAyU,GAAQ,CACrV,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EAK1B;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,4UAA4U,GAAQ,CACxV,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAKlB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,yHAAyH,GAAG,CAChI,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAKhB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,kKAAkK,GAAG,CACzK,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/index.d.ts

@@ -13,3 +13,9 @@ export * from './ContextInspector';
 export * from './Section';
 export * from './SelectInput';
 export * from './SelectField';
+export * from './ButtonGroup';
+export * from './Toolbar';
+export * from './Spinner';
+export * from './SidebarPanel';
+export * from './Dropdown';
+export * from './icons';

package/dist/esm/index.js

@@ -13,4 +13,10 @@ export * from './ContextInspector';
 export * from './Section';
 export * from './SelectInput';
 export * from './SelectField';
+export * from './ButtonGroup';
+export * from './Toolbar';
+export * from './Spinner';
+export * from './SidebarPanel';
+export * from './Dropdown';
+export * from './icons';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/esm/mergeRefs/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const mergeRefs: <T extends unknown>(...refs: import("react").Ref<T>[]) => (instance: T | null) => void;

package/dist/esm/mergeRefs/index.js

@@ -0,0 +1,15 @@
+export var mergeRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (element) {
+        return refs.forEach(function (ref) {
+            if (typeof ref === 'function')
+                ref(element);
+            else if (ref && typeof ref === 'object')
+                ref.current = element;
+        });
+    };
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/mergeRefs/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,SAAS,GAAG;IACvB,cAAuB;SAAvB,UAAuB,EAAvB,qBAAuB,EAAvB,IAAuB;QAAvB,yBAAuB;;IACE,OAAA,UAAC,OAAU;QACpC,OAAA,IAAI,CAAC,OAAO,CAAC,UAAC,GAAG;YACf,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC;iBACvC,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;gBACpC,GAAiC,CAAC,OAAO,GAAG,OAAO,CAAC;QACzD,CAAC,CAAC;IAJF,CAIE;AALuB,CAKvB,CAAC"}

package/dist/esm/useClickOutside/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useClickOutside<T extends HTMLElement>(handler: (event: MouseEvent | TouchEvent) => void): React.RefObject<T>;

package/dist/esm/useClickOutside/index.js

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useRef } from 'react';
+export default function useClickOutside(handler) {
+    var ref = useRef(null);
+    var handleClick = useCallback(function (event) {
+        event.target;
+        if (!ref.current || ref.current.contains(event.target)) {
+            return;
+        }
+        handler(event);
+    }, [handler]);
+    useEffect(function () {
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('touchstart', handleClick);
+        return function () {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('touchstart', handleClick);
+        };
+    }, [handleClick]);
+    return ref;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useClickOutside/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,OAAiD;IAEjD,IAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAE5B,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,KAA8B;QAC7B,KAAK,CAAC,MAAM,CAAC;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC9D,OAAO;SACR;QACD,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,SAAS,CAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QAErD,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/useMediaQuery/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function useMediaQuery(media: string): MediaQueryList;
+export declare type MediaQueryProps = {
+    media: string;
+    children: (mql: MediaQueryList) => JSX.Element;
+};
+export declare function MediaQuery({ media, children, }: MediaQueryProps): JSX.Element | null;
+export declare function useElementLayout(ref: React.MutableRefObject<Element>): DOMRect;

package/dist/esm/useMediaQuery/index.js

@@ -0,0 +1,140 @@
+import React from 'react';
+var list = {};
+export function useMediaQuery(media) {
+    var mediaQueryList = React.useMemo(function () {
+        // We have an existing mediaQueryList for media.
+        if (list[media]) {
+            return list[media].mql;
+        }
+        if (typeof window !== 'undefined') {
+            return matchMedia(media);
+        }
+        // Server: use a fallback.
+        return { matches: true, media: media };
+    }, [list, media]);
+    // Since the mediaQueryList is shared we use state to trigger re-renders.
+    // This is done with update({}) (a new object instance will force a re-rendering).
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _a = React.useState({}), _ = _a[0], update = _a[1];
+    React.useLayoutEffect(function () {
+        if (list[media]) {
+            list[media].notifiers.push(update);
+        }
+        else {
+            list[media] = {
+                mql: mediaQueryList,
+                notifiers: [update],
+                listener: function (mql) {
+                    var match = list[mql.media];
+                    if (match) {
+                        match.notifiers.forEach(function (updateFn) { return updateFn({}); });
+                    }
+                },
+            };
+            list[media].mql.addEventListener('change', list[media].listener);
+        }
+        return function () {
+            var notifierIndex = list[media].notifiers.indexOf(update);
+            if (notifierIndex > -1) {
+                // Remove `update`.
+                list[media].notifiers.splice(notifierIndex, 1);
+            }
+            if (list[media].notifiers.length === 0) {
+                list[media].mql.removeEventListener('change', list[media].listener);
+                delete list[media];
+            }
+        };
+    }, [list, media, mediaQueryList]);
+    return mediaQueryList;
+}
+export function MediaQuery(_a) {
+    var media = _a.media, children = _a.children;
+    var mql = useMediaQuery(media);
+    return typeof children === 'function' ? children(mql) : null;
+}
+var DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler';
+var supportsBorderBox = (function () {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    var e = document.body.appendChild(document.createElement('div'));
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    var observer = new ResizeObserver(function () { });
+    try {
+        observer.observe(e, { box: 'border-box' });
+        observer.unobserve(e);
+        return false;
+    }
+    catch (error) {
+        return true;
+    }
+    finally {
+        document.body.removeChild(e);
+    }
+})();
+var resizeObserver = null;
+function getResizeObserver() {
+    if (resizeObserver) {
+        return resizeObserver;
+    }
+    if (typeof ResizeObserver === 'undefined') {
+        return;
+    }
+    resizeObserver = new ResizeObserver(function (entries) {
+        entries.forEach(function (entry) {
+            var node = entry.target;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var onLayout = node[DOM_LAYOUT_HANDLER_NAME];
+            if (typeof onLayout !== 'function') {
+                return;
+            }
+            if (supportsBorderBox && entry.borderBoxSize) {
+                var boxSize_1 = entry.borderBoxSize[0] || entry.borderBoxSize;
+                onLayout(function (prevRect) {
+                    if (prevRect.width === boxSize_1.inlineSize &&
+                        prevRect.height === boxSize_1.blockSize) {
+                        return prevRect;
+                    }
+                    return new DOMRect(0, 0, boxSize_1.inlineSize, boxSize_1.blockSize);
+                });
+                return;
+            }
+            var elRect = entry.target.getBoundingClientRect();
+            onLayout(function (prevRect) {
+                if (prevRect.width === elRect.width &&
+                    prevRect.height === elRect.height) {
+                    return prevRect;
+                }
+                return new DOMRect(0, 0, elRect.width, elRect.height);
+            });
+        });
+    });
+    return resizeObserver;
+}
+export function useElementLayout(ref) {
+    var observer = getResizeObserver();
+    var _a = React.useState(new DOMRect()), rect = _a[0], setRect = _a[1];
+    React.useLayoutEffect(function () {
+        var node = ref.current;
+        if (node) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            node[DOM_LAYOUT_HANDLER_NAME] = setRect;
+        }
+        if (node && observer) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (typeof node[DOM_LAYOUT_HANDLER_NAME] === 'function') {
+                observer.observe(node, supportsBorderBox ? { box: 'border-box' } : undefined);
+            }
+            else {
+                observer.unobserve(node);
+            }
+        }
+        return function () {
+            if (node != null && observer != null) {
+                observer.unobserve(node);
+            }
+        };
+    }, [ref, observer]);
+    return rect;
+}
+//# sourceMappingURL=index.js.map

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

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

package/dist/types/ButtonGroup/Button/index.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+export declare type ButtonProps = {
+    children?: ReactNode;
+    className?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    style?: CSSProperties;
+    onClick?: MouseEventHandler;
+};
+export declare function Button({ children, style, className, selected, disabled, onClick, }: ButtonProps): JSX.Element;

package/dist/types/ButtonGroup/Group/index.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type GroupProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <ButtonGroup>
+ *     <ButtonGroupButton>First</ButtonGroupButton>
+ *     <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *     <ButtonGroupButton>Third</ButtonGroupButton>
+ *     <ButtonGroupButton disabled>Fourth</ButtonGroupButton>
+ *   </ButtonGroup>
+ * </Canvas>;
+ * ```
+ */
+export declare function Group({ children, style, className }: GroupProps): JSX.Element;

package/dist/types/ButtonGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { Group as ButtonGroup } from './Group';
+export type { GroupProps as ButtonGroupProps } from './Group';
+export { Button as ButtonGroupButton } from './Button';
+export type { ButtonProps as ButtonGroupButtonProps } from './Button';

package/dist/types/Canvas/index.d.ts

@@ -1,7 +1,10 @@
-import { ReactNode } from 'react';
-import { RenderProperties } from 'datocms-plugin-sdk';
+import React, { ReactNode } from 'react';
+import { RenderMethods, RenderProperties } from 'datocms-plugin-sdk';
+declare type BaseRenderPropertiesAndMethods = RenderProperties & RenderMethods;
+export declare const CtxContext: React.Context<BaseRenderPropertiesAndMethods | null>;
+export declare function useCtx<T extends BaseRenderPropertiesAndMethods>(): T;
 export declare type CanvasProps = {
-    ctx: RenderProperties;
+    ctx: BaseRenderPropertiesAndMethods;
     noAutoResizer?: boolean;
     children: ReactNode;
 };
@@ -497,3 +500,4 @@ export declare type CanvasProps = {
  * ```
  */
 export declare function Canvas({ ctx, children, noAutoResizer, }: CanvasProps): JSX.Element;
+export {};