datocms-react-ui 2.0.12 → 2.0.14

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

@@ -0,0 +1,238 @@
+import React from 'react';
+export declare type VerticalSplitProps = {
+    mode?: 'overlay' | 'split';
+    minSize?: number | string;
+    maxSize?: number | string;
+    size?: number | string;
+    primaryPane: 'left' | 'right';
+    isSecondaryCollapsed?: boolean;
+    allowResize?: boolean;
+    children: [React.ReactNode, React.ReactNode];
+    onDragFinished?: (newSize: number) => void;
+    onSecondaryToggle?: (secondaryExpanded: boolean) => void;
+};
+/**
+ * @example Resizable, left primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="left" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Resizable, right primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="right" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ *
+ * @example Overlay mode
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            mode="overlay"
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ */
+export declare function VerticalSplit({ mode, minSize, maxSize, size, primaryPane, children, allowResize, onDragFinished, onSecondaryToggle, isSecondaryCollapsed, }: VerticalSplitProps): JSX.Element;

package/dist/types/icons.d.ts

@@ -10,3 +10,6 @@ export declare function SidebarLeftArrowIcon({ width, height, style, className,
 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;
+export declare function ChevronsLeftIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function ChevronsRightIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function SidebarFlipIcon({ width, height, style, className, }: IconProps): JSX.Element;

package/dist/types/index.d.ts

@@ -6,8 +6,8 @@ export * from './Dropdown';
 export * from './FieldError';
 export * from './FieldGroup';
 export * from './FieldHint';
-export * from './Form';
 export * from './FieldWrapper';
+export * from './Form';
 export * from './FormLabel';
 export * from './icons';
 export * from './Section';
@@ -15,12 +15,14 @@ export * from './SelectField';
 export * from './SelectInput';
 export * from './SidebarPanel';
 export * from './Spinner';
+export * from './SplitView';
 export * from './SwitchField';
 export * from './SwitchInput';
-export * from './TextField';
-export * from './TextInput';
 export * from './TextareaField';
 export * from './TextareaInput';
+export * from './TextField';
+export * from './TextInput';
 export * from './Toolbar';
 export * from './useClickOutside';
 export * from './useMediaQuery';
+export * from './VerticalSplit';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
-    "datocms-plugin-sdk": "^2.0.12",
+    "datocms-plugin-sdk": "^2.0.13",
     "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.26.7"
   },
-  "gitHead": "e41647363072a1d6edec852553045af9ec797a1f"
+  "gitHead": "c5d75e63e19512c2f5a1cf317890351ee0b7b267"
 }

package/src/SplitView/SplitViewPane/index.tsx

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from 'react';
+import s from './styles.module.css.json';
+
+export type SplitViewPaneProps = {
+  maxSize?: number | string;
+  minSize?: number | string;
+  style?: React.CSSProperties;
+};
+
+export function SplitViewPane({
+  style,
+  children,
+}: PropsWithChildren<SplitViewPaneProps>) {
+  return (
+    <div className={s.SplitViewPane} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/SplitView/SplitViewPane/styles.module.css

@@ -0,0 +1,6 @@
+.SplitViewPane {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}

package/src/SplitView/SplitViewPane/styles.module.css.json

@@ -0,0 +1 @@
+{"SplitViewPane":"_SplitViewPane_1cl1f_1"}

package/src/SplitView/SplitViewSash/index.tsx

@@ -0,0 +1,99 @@
+import classNames from 'classnames';
+import React, { ReactNode, useState } from 'react';
+import s from './styles.module.css.json';
+
+export type SashAction = {
+  icon: ReactNode;
+  onClick: () => void;
+};
+
+type SplitViewSashProps = {
+  className?: string;
+  style: React.CSSProperties;
+  split: 'vertical' | 'horizontal';
+  allowResize?: boolean;
+  action?: SashAction;
+  onMouseDown: (x: number, y: number) => void;
+  onMouseMove: (x: number, y: number) => void;
+  onMouseUp: () => void;
+};
+
+export function SplitViewSash({
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  style,
+  split,
+  allowResize,
+  action,
+}: SplitViewSashProps) {
+  const [dragging, setDrag] = useState(false);
+
+  function handleMouseMove(e: MouseEvent) {
+    onMouseMove(e.pageX, e.pageY);
+  }
+
+  function handleMouseUp() {
+    setDrag(false);
+    onMouseUp();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    onMouseMove(e.touches[0].pageX, e.touches[0].pageY);
+  }
+
+  function handleTouchEnd() {
+    setDrag(false);
+    onMouseUp();
+    window.removeEventListener('touchmove', handleTouchMove);
+    window.removeEventListener('touchend', handleTouchEnd);
+  }
+
+  const actionEl = action?.icon && (
+    <div
+      className={s.SplitViewSash__content}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+      }}
+      onClick={() => {
+        action.onClick();
+      }}
+    >
+      <div className={s.SplitViewSash__content__button}>{action?.icon}</div>
+    </div>
+  );
+
+  return (
+    <div
+      role="Resizer"
+      className={classNames(
+        s.SplitViewSash,
+        split === 'vertical'
+          ? s['SplitViewSash--vertical']
+          : s['SplitViewSash--horizontal'],
+        !allowResize && s['SplitViewSash--no-resize'],
+        dragging && s['SplitViewSash--dragging'],
+      )}
+      onMouseDown={(e) => {
+        setDrag(true);
+        onMouseDown(e.pageX, e.pageY);
+
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+      }}
+      onTouchStart={(e) => {
+        e.preventDefault();
+        setDrag(true);
+        onMouseDown(e.touches[0].pageX, e.touches[0].pageY);
+
+        window.addEventListener('touchmove', handleTouchMove);
+        window.addEventListener('touchend', handleTouchEnd);
+      }}
+      style={style}
+    >
+      {actionEl}
+    </div>
+  );
+}

package/src/SplitView/SplitViewSash/styles.module.css

@@ -0,0 +1,68 @@
+.SplitViewSash {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  transition: background-color 0.2s 0.15s;
+  background-color: rgba(var(--light-color-components), 0);
+  width: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.SplitViewSash:hover,
+.SplitViewSash--dragging {
+  background-color: var(--light-color);
+}
+
+.SplitViewSash:hover:has(.SplitViewSash__content:hover),
+.SplitViewSash--dragging:has(.SplitViewSash__content:hover) {
+  background-color: transparent;
+}
+
+.SplitViewSash--no-resize {
+  pointer-events: none;
+}
+
+.SplitViewSash--vertical {
+  cursor: col-resize;
+}
+
+.SplitViewSash--horizontal {
+  cursor: row-resize;
+}
+
+.SplitViewSash__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 15px 0;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.SplitViewSash__content__button {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: var(--light-body-color);
+}
+
+.SplitViewSash__content__button svg {
+  display: block;
+  fill: currentColor;
+}
+
+.SplitViewSash__content:hover .SplitViewSash__content__button {
+  background: var(--light-bg-color);
+  color: var(--base-body-color);
+}

package/src/SplitView/SplitViewSash/styles.module.css.json

@@ -0,0 +1 @@
+{"SplitViewSash":"_SplitViewSash_tds51_1","SplitViewSash--dragging":"_SplitViewSash--dragging_tds51_15","SplitViewSash__content":"_SplitViewSash__content_tds51_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_tds51_24","SplitViewSash--vertical":"_SplitViewSash--vertical_tds51_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_tds51_32","SplitViewSash__content__button":"_SplitViewSash__content__button_tds51_46"}