datocms-react-ui 1.0.1 → 1.1.0

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export declare type SidebarPanelProps = {
     title?: ReactNode;
     startOpen?: boolean;

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { FormLabelProps, SwitchInputProps } from '..';
+import { type ReactNode } from 'react';
+import { type FormLabelProps, type SwitchInputProps } from '..';
 declare type SwitchFieldProps = {
     id: string;
     name: string;

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { FormLabelProps, TextInputProps } from '..';
+import { type ReactNode } from 'react';
+import { type FormLabelProps, type TextInputProps } from '..';
 declare type TextFieldProps = {
     id: string;
     name: string;

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

@@ -1,4 +1,5 @@
-import React, { RefObject } from 'react';
+import React from 'react';
+import { type RefObject } from 'react';
 export declare type TextInputChangeEventHandler = (newValue: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 export declare type TextInputProps = {
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'url' | 'date' | 'time';

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { FormLabelProps, TextareaInputProps } from '..';
+import { type ReactNode } from 'react';
+import { type FormLabelProps, type TextareaInputProps } from '..';
 declare type TextareaFieldProps = {
     id: string;
     name: string;

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

@@ -1,4 +1,5 @@
-import React, { RefObject } from 'react';
+import React from 'react';
+import { type RefObject } from 'react';
 export declare type TextareaInputChangeEventHandler = (newValue: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
 export declare type TextareaInputProps = {
     name?: string;

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

@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { type CSSProperties, type MouseEventHandler, type ReactNode } from 'react';
 export declare type ButtonProps = {
     children?: ReactNode;
     className?: string;

package/dist/types/Toolbar/Stack/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export declare type StackProps = {
     children?: ReactNode;
     className?: string;

package/dist/types/Toolbar/Title/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export declare type TitleProps = {
     children?: ReactNode;
     className?: string;

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export declare type ToolbarProps = {
     children?: ReactNode;
     className?: string;

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

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

package/dist/types/icons.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 export declare type IconProps = {
     width?: string | number;
     height?: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
-    "datocms-plugin-sdk": "^1.0.1",
+    "datocms-plugin-sdk": "^1.1.0",
     "react-intersection-observer": "^8.31.0",
     "react-select": "^5.2.1",
     "scroll-into-view-if-needed": "^2.2.20"
@@ -57,5 +57,5 @@
     "postcss-nested": "^5.0.6",
     "typedoc": "^0.23.20"
   },
-  "gitHead": "c9263fd5eaa3e84244ff55314521d24ebf5813a1"
+  "gitHead": "fa6d8ee19dcbc6553af5bf1a74dcca5d50db21e7"
 }

package/src/Button/index.tsx

@@ -1,5 +1,6 @@
-import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 import cn from 'classnames';
+import React from 'react';
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 import styles from './styles.module.css.json';
 
 export type ButtonProps = {
@@ -107,12 +108,10 @@ export function Button({
       onClick={onClick}
       style={style}
     >
-      {leftIcon && (
-        <span className={styles['button__leftIcon']}>{leftIcon}</span>
-      )}
+      {leftIcon && <span className={styles.button__leftIcon}>{leftIcon}</span>}
       {children && <span>{children}</span>}
       {rightIcon && (
-        <span className={styles['button__rightIcon']}>{rightIcon}</span>
+        <span className={styles.button__rightIcon}>{rightIcon}</span>
       )}
     </button>
   );
@@ -161,12 +160,10 @@ export function ButtonLink({
       style={style}
       onClick={onClick}
     >
-      {leftIcon && (
-        <span className={styles['button__leftIcon']}>{leftIcon}</span>
-      )}
+      {leftIcon && <span className={styles.button__leftIcon}>{leftIcon}</span>}
       {children && <span>{children}</span>}
       {rightIcon && (
-        <span className={styles['button__rightIcon']}>{rightIcon}</span>
+        <span className={styles.button__rightIcon}>{rightIcon}</span>
       )}
     </a>
   );

package/src/ButtonGroup/Button/index.tsx

@@ -1,5 +1,9 @@
 import classNames from 'classnames';
-import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import React, {
+  type CSSProperties,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
 import s from './styles.module.css.json';
 
 export type ButtonProps = {
@@ -25,7 +29,7 @@ export function Button({
       onClick={onClick}
       disabled={disabled}
       className={classNames(
-        s['Button'],
+        s.Button,
         {
           [s['Button--selected']]: selected,
           [s['Button--disabled']]: disabled,

package/src/ButtonGroup/Group/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { type CSSProperties, type ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 export type GroupProps = {
@@ -24,7 +24,7 @@ export type GroupProps = {
  */
 export function Group({ children, style, className }: GroupProps): JSX.Element {
   return (
-    <div className={classNames(s['Group'], className)} style={style}>
+    <div className={classNames(s.Group, className)} style={style}>
       {children}
     </div>
   );

package/src/Canvas/index.tsx

@@ -1,12 +1,17 @@
-import React, { createContext, ReactNode, useContext, useEffect } from 'react';
-import {
+import classNames from 'classnames';
+import type {
   RenderMethods,
   RenderProperties,
   SizingUtilities,
 } from 'datocms-plugin-sdk';
-import s from './styles.module.css.json';
+import React, {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+} from 'react';
 import { generateStyleFromCtx } from '../generateStyleFromCtx';
-import classNames from 'classnames';
+import s from './styles.module.css.json';
 
 type BaseRenderPropertiesAndMethods = RenderProperties & RenderMethods;
 
@@ -550,7 +555,7 @@ export function Canvas({
   return (
     <CtxContext.Provider value={ctx}>
       <div
-        className={classNames(s['themeVariables'], s['canvas'])}
+        className={classNames(s.themeVariables, s.canvas)}
         style={generateStyleFromCtx(ctx)}
       >
         {children}

package/src/ContextInspector/index.tsx

@@ -99,7 +99,7 @@ function buildCtx(manifest: any, definition: any): any {
   if (definition.type.type === 'intersection') {
     let result: any[] = [];
 
-    definition.type.types.forEach((elementInIntersection: any) => {
+    for (const elementInIntersection of definition.type.types) {
       if (elementInIntersection.type === 'reference') {
         const innerDefinition = findChildrenById(
           manifest,
@@ -107,7 +107,7 @@ function buildCtx(manifest: any, definition: any): any {
         );
         result = [...result, buildCtx(manifest, innerDefinition)];
       }
-    });
+    }
 
     return result.flat().filter((x) => x);
   }
@@ -128,11 +128,7 @@ function buildCtx(manifest: any, definition: any): any {
       name: definition.name,
       description: findShortText(definition),
       properties: properties.map((child: any) => {
-        if (
-          child.type &&
-          child.type.declaration &&
-          child.type.declaration.signatures
-        ) {
+        if (child.type?.declaration?.signatures) {
           child.signatures = child.type.declaration.signatures;
         }
 
@@ -176,6 +172,7 @@ const ExpandablePane = ({ children, label }: any) => {
   return (
     <div className={s.panel}>
       <button
+        type="button"
         className={s.panelHandle}
         onClick={() => setOpen((open) => !open)}
       >
@@ -249,81 +246,80 @@ export function ContextInspector(): JSX.Element {
 
   return (
     <div className={s.inspector}>
-      {groups &&
-        groups.map((group) => {
-          const name = group.name
-            .replace('AdditionalMethods', 'Methods')
-            .replace('AdditionalProperties', 'Properties')
-            .replace('Methods', ' methods')
-            .replace('Properties', ' properties')
-            .replace('Utilities', ' utilities');
-
-          return (
-            <ExpandablePane label={`${name}`} key={name}>
-              <div className={s.groupDescription}>{group.description}</div>
-              <div className={s.propertyGroup}>
-                {(group.properties || []).map((item: any) => (
-                  <div key={item.name} className={s.propertyOrMethod}>
-                    <div className={s.propertyOrMethodBody}>
-                      <a
-                        className={s.propertyOrMethodName}
-                        href={`${baseUrl}#L${item.lineNumber}`}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {item.name}
-                        {item.type === 'function' ? '()' : ''}
-                      </a>
-
-                      <div>{item.description}</div>
-                    </div>
-                    {item.type === 'property' && (
-                      <div className={s.propertyOrMethodExample}>
-                        <pre>
-                          {JSON.stringify((ctx as any)[item.name], null, 2)}
-                        </pre>
-                        <div className={s.propertyOrMethodExampleActions}>
-                          <Button
-                            type="button"
-                            buttonSize="xxs"
-                            onClick={handleCopy.bind(
-                              null,
-                              JSON.stringify((ctx as any)[item.name], null, 2),
-                            )}
-                          >
-                            Copy value
-                          </Button>
-                        </div>
+      {groups?.map((group) => {
+        const name = group.name
+          .replace('AdditionalMethods', 'Methods')
+          .replace('AdditionalProperties', 'Properties')
+          .replace('Methods', ' methods')
+          .replace('Properties', ' properties')
+          .replace('Utilities', ' utilities');
+
+        return (
+          <ExpandablePane label={`${name}`} key={name}>
+            <div className={s.groupDescription}>{group.description}</div>
+            <div className={s.propertyGroup}>
+              {(group.properties || []).map((item: any) => (
+                <div key={item.name} className={s.propertyOrMethod}>
+                  <div className={s.propertyOrMethodBody}>
+                    <a
+                      className={s.propertyOrMethodName}
+                      href={`${baseUrl}#L${item.lineNumber}`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {item.name}
+                      {item.type === 'function' ? '()' : ''}
+                    </a>
+
+                    <div>{item.description}</div>
+                  </div>
+                  {item.type === 'property' && (
+                    <div className={s.propertyOrMethodExample}>
+                      <pre>
+                        {JSON.stringify((ctx as any)[item.name], null, 2)}
+                      </pre>
+                      <div className={s.propertyOrMethodExampleActions}>
+                        <Button
+                          type="button"
+                          buttonSize="xxs"
+                          onClick={handleCopy.bind(
+                            null,
+                            JSON.stringify((ctx as any)[item.name], null, 2),
+                          )}
+                        >
+                          Copy value
+                        </Button>
                       </div>
-                    )}
-                    {item.example && (
-                      <div className={s.propertyOrMethodExample}>
-                        <pre>{item.example}</pre>
-                        <div className={s.propertyOrMethodExampleActions}>
-                          <Button
-                            type="button"
-                            buttonSize="xxs"
-                            buttonType="primary"
-                            onClick={handleRun.bind(null, item.example)}
-                          >
-                            Run example
-                          </Button>
-                          <Button
-                            type="button"
-                            buttonSize="xxs"
-                            onClick={handleCopy.bind(null, item.example)}
-                          >
-                            Copy example
-                          </Button>
-                        </div>
+                    </div>
+                  )}
+                  {item.example && (
+                    <div className={s.propertyOrMethodExample}>
+                      <pre>{item.example}</pre>
+                      <div className={s.propertyOrMethodExampleActions}>
+                        <Button
+                          type="button"
+                          buttonSize="xxs"
+                          buttonType="primary"
+                          onClick={handleRun.bind(null, item.example)}
+                        >
+                          Run example
+                        </Button>
+                        <Button
+                          type="button"
+                          buttonSize="xxs"
+                          onClick={handleCopy.bind(null, item.example)}
+                        >
+                          Copy example
+                        </Button>
                       </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </ExpandablePane>
-          );
-        })}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </ExpandablePane>
+        );
+      })}
     </div>
   );
 }

package/src/Dropdown/Dropdown.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
+import { useCallback, useState } from 'react';
 import { useClickOutside } from '../useClickOutside';
 import { DropdownContext } from './DropdownContext';
 import s from './styles.module.css.json';
@@ -123,7 +124,7 @@ export function Dropdown({
 
   const handleClickOutside = useCallback(
     (event) => {
-      if (!event.target.closest('.' + s['Dropdown__menu']) && isOpen) {
+      if (!event.target.closest(`.${s.Dropdown__menu}`) && isOpen) {
         setOpen(false);
       }
     },
@@ -142,7 +143,7 @@ export function Dropdown({
 
   return (
     <DropdownContext.Provider value={{ closeMenu: handleClose }}>
-      <div className={s['Dropdown']} ref={outsideRef}>
+      <div className={s.Dropdown} ref={outsideRef}>
         {renderTrigger({ open: isOpen, onClick: handleToggle })}
         {isOpen && children}
       </div>

package/src/Dropdown/Group.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 export type GroupProps = {
@@ -9,8 +10,8 @@ export type GroupProps = {
 export const Group = ({ children, name }: GroupProps): JSX.Element => {
   return (
     <div>
-      <div className={s['Dropdown__menu__group__title']}>{name}</div>
-      <div className={s['Dropdown__menu__group__content']}>{children}</div>
+      <div className={s.Dropdown__menu__group__title}>{name}</div>
+      <div className={s.Dropdown__menu__group__content}>{children}</div>
     </div>
   );
 };

package/src/Dropdown/Menu.tsx

@@ -1,20 +1,20 @@
 import React, {
   createRef,
-  SyntheticEvent,
+  type SyntheticEvent,
   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 scrollIntoView from 'scroll-into-view-if-needed';
+import { mergeRefs } from '../mergeRefs';
 import { DropdownContext } from './DropdownContext';
 import { Group } from './Group';
 import { MenuContext } from './MenuContext';
+import { Portal } from './Portal';
 import s from './styles.module.css.json';
-import { mergeRefs } from '../mergeRefs';
 
 const MenuDesktopContainer = React.forwardRef<
   HTMLDivElement,
@@ -33,13 +33,17 @@ const MenuDesktopContainer = React.forwardRef<
 
 function getAbsoluteHeight(el: HTMLElement) {
   const styles = window.getComputedStyle(el);
-  const margin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+  const margin =
+    Number.parseFloat(styles.marginTop) +
+    Number.parseFloat(styles.marginBottom);
   return Math.ceil(el.offsetHeight + margin);
 }
 
 function getAbsoluteWidth(el: HTMLElement) {
   const styles = window.getComputedStyle(el);
-  const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+  const margin =
+    Number.parseFloat(styles.marginLeft) +
+    Number.parseFloat(styles.marginRight);
   return Math.ceil(el.offsetWidth + margin);
 }
 
@@ -68,14 +72,14 @@ function setPosition(
     window.innerHeight || 0,
   );
 
-  const menu = panel.querySelector<HTMLElement>('.' + s['Dropdown__menu']);
+  const menu = panel.querySelector<HTMLElement>(`.${s.Dropdown__menu}`);
 
   if (!menu) {
     return;
   }
 
   const styles = window.getComputedStyle(menu);
-  const marginTop = parseFloat(styles.marginTop);
+  const marginTop = Number.parseFloat(styles.marginTop);
 
   const fitsBelow = rect.bottom + height <= windowHeight;
   const fitsAbove = rect.top - height > 0;
@@ -96,7 +100,7 @@ function setPosition(
       menu.style.maxHeight = `${windowHeight - rect.bottom - marginTop - 10}px`;
     } else {
       // eslint-disable-next-line no-param-reassign
-      panel.style.top = `0px`;
+      panel.style.top = '0px';
       menu.style.maxHeight = `${rect.top - marginTop}px`;
     }
   }
@@ -178,20 +182,18 @@ export const Menu = ({
         const delta = event.key === 'ArrowUp' ? -1 : 1;
 
         const selectedOption = contentRef.current.querySelector(
-          '.' + s['Dropdown__menu__option--is-selected'],
+          `.${s['Dropdown__menu__option--is-selected']}`,
         );
 
-        let nextOption;
+        let nextOption: Element | null;
 
         if (!selectedOption) {
           nextOption = contentRef.current.querySelector(
-            '.' + s['Dropdown__menu__option'],
+            `.${s.Dropdown__menu__option}`,
           );
         } else {
           const elements = Array.from(
-            contentRef.current.querySelectorAll(
-              '.' + s['Dropdown__menu__option'],
-            ),
+            contentRef.current.querySelectorAll(`.${s.Dropdown__menu__option}`),
           );
           const index = elements.findIndex((el) => el === selectedOption);
           const nextIndex =
@@ -223,13 +225,13 @@ export const Menu = ({
         }
 
         const selectedOption = contentRef.current.querySelector(
-          '.' + s['Dropdown__menu__option--is-selected'],
+          `.${s['Dropdown__menu__option--is-selected']}`,
         );
 
         if (selectedOption) {
           const id = (selectedOption as HTMLButtonElement).dataset.optionId;
           const option = options.find((x) => x.id === id);
-          if (option && option.handler) {
+          if (option?.handler) {
             option.handler(event);
           }
         }
@@ -280,31 +282,30 @@ export const Menu = ({
     <>
       <div
         ref={mergeRefs(observerRef, parentRef)}
-        className={s['Dropdown__spacer']}
+        className={s.Dropdown__spacer}
       />
       <MenuDesktopContainer ref={menuRef}>
-        <div className={s['Dropdown__menu']}>
+        <div className={s.Dropdown__menu}>
           {options.length > 5 && (
-            <div className={s['Dropdown__menu__search']}>
+            <div className={s.Dropdown__menu__search}>
               <input
                 type="text"
                 value={searchTerm || ''}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 placeholder="Search..."
-                autoFocus
-                className={s['Dropdown__menu__search__input']}
+                className={s.Dropdown__menu__search__input}
               />
             </div>
           )}
           <MenuContext.Provider
             value={{ searchTerm, addOption, setClickHandlerForOption }}
           >
-            <div className={s['Dropdown__menu__inner']} ref={contentRef}>
+            <div className={s.Dropdown__menu__inner} ref={contentRef}>
               {anyGroup ? (
                 children
               ) : (
-                <div className={s['Dropdown__menu__group__content']}>
+                <div className={s.Dropdown__menu__group__content}>
                   {children}
                 </div>
               )}

package/src/Dropdown/MenuContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, SyntheticEvent } from 'react';
+import { type SyntheticEvent, createContext } from 'react';
 
 type Context = {
   searchTerm: string;

package/src/Dropdown/Option.tsx

@@ -118,21 +118,21 @@ export const Option = ({
     <>
       <button
         type="button"
-        className={s['Dropdown__menu__option__content']}
+        className={s.Dropdown__menu__option__content}
         ref={contentRef}
         onClick={handleClick}
       >
         {notButtons}
       </button>
       {buttons.length > 0 && (
-        <div className={s['Dropdown__menu__option__icons']}>{buttons}</div>
+        <div className={s.Dropdown__menu__option__icons}>{buttons}</div>
       )}
     </>
   );
 
   return (
     <div
-      className={classNames(s['Dropdown__menu__option'], {
+      className={classNames(s.Dropdown__menu__option, {
         [s['Dropdown__menu__option--is-active']]: active,
         [s['Dropdown__menu__option--is-disabled']]: disabled,
         [s['Dropdown__menu__option--is-valid']]: valid,