decap-cms-ui-default 3.6.0 → 3.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-ui-default",
   "description": "Default UI components for Decap CMS.",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-ui-default",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
   "license": "MIT",
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "react-aria-menubutton": "^7.0.0",
+    "react-immutable-proptypes": "^2.1.0",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
@@ -27,5 +28,5 @@
     "prop-types": "^15.7.2",
     "react": "^19.1.0"
   },
-  "gitHead": "45c9f5b9a1a12f74321ce4658b71ec88d6365ec1"
+  "gitHead": "567a80101f4846853701ad7d8abdc29b5e4fab56"
 }

package/src/DropDown/getCoords.js

@@ -0,0 +1,68 @@
+/** @typedef {'left' | 'right' | 'center' | undefined} Position */
+
+/**
+ * Calculate relative co-ordinates for a dropdown to position it below a reference element.
+ * @param {{ reference: DOMRect; target: DOMRect; viewport: DOMRect; dropdownPosition: Position }} options
+ */
+export function getCoords({ reference, target, dropdownPosition, viewport }) {
+  let { x, y } = computeCoordsFromPlacement({ reference, target, dropdownPosition });
+  ({ x, y } = constrain({ x, y, viewport, target }));
+  return relativize({ x, y, reference });
+}
+
+/**
+ * @param {{ reference: DOMRect; target: DOMRect; dropdownPosition: Position }} options
+ * @returns {{ x: number; y: number }} co-ordinates
+ */
+function computeCoordsFromPlacement({ reference, target, dropdownPosition }) {
+  const commonAlign = reference.width / 2 - target.width / 2;
+
+  const coords = {
+    x: reference.x + commonAlign,
+    y: reference.y + reference.height,
+  };
+
+  switch (dropdownPosition) {
+    case 'left':
+      coords.x -= commonAlign;
+      break;
+    case 'right':
+      coords.x += commonAlign;
+      break;
+    default:
+  }
+
+  return coords;
+}
+
+/**
+ * Constrain co-ordinates within the viewport.
+ * @param {{ x: number; y: number, viewport: DOMRect, target: DOMRect }} options
+ */
+function constrain({ x, y, viewport, target }) {
+  const overflow = {
+    left: x,
+    right: x + target.width - viewport.width,
+  };
+
+  x = clamp(x - overflow.left, x, x - overflow.right);
+
+  return { x, y };
+}
+
+/**
+ * @param {number} min
+ * @param {number} value
+ * @param {number} max
+ */
+function clamp(min, value, max) {
+  return Math.min(Math.max(min, value), max);
+}
+
+/**
+ * Convert absolute viewport co-ordinates into element-relative co-ordinates.
+ * @param {{ x: number; y: number; reference: DOMRect }} options
+ */
+function relativize({ x, y, reference }) {
+  return { x: x - reference.x, y: y - reference.y };
+}

package/src/DropDown/useDropDownCoords.js

@@ -0,0 +1,110 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { getCoords } from './getCoords';
+
+/**
+ * @type {{ callbacks: Map<Function, Function>; observer?: ResizeObserver; viewport?: DOMRect; raf?: number }}
+ */
+const viewportState = { callbacks: new Map() };
+
+/** @type {ResizeObserverCallback} */
+function onResize([entry]) {
+  viewportState.viewport = entry.contentRect;
+  if (viewportState.raf) cancelAnimationFrame(viewportState.raf);
+  viewportState.raf = requestAnimationFrame(() => {
+    viewportState.callbacks.forEach(cb => cb(viewportState.viewport));
+  });
+}
+
+/**
+ * Initializes a `ResizeObserver` to track viewport changes and notify subscribers.
+ * We cache this single observer to avoid the overhead of creating a new one for every dropdown.
+ */
+function initObserver() {
+  if (!viewportState.observer && typeof ResizeObserver !== 'undefined') {
+    viewportState.observer = new ResizeObserver(onResize);
+    viewportState.observer.observe(document.documentElement);
+  }
+}
+
+/**
+ * Registers a callback to be called with the viewport rect on changes.
+ * @param {(viewport: DOMRect | undefined) => void} callback
+ * @returns {() => void} An unsubscribe function to stop listening for viewport changes.
+ */
+function subscribeToViewportRect(callback) {
+  initObserver();
+  callback(viewportState.viewport);
+  viewportState.callbacks.set(callback, callback);
+
+  // Unsubscribe function that cleans up the callback and also the observer if no-one is listening anymore.
+  return () => {
+    viewportState.callbacks.delete(callback);
+    if (viewportState.callbacks.size === 0 && viewportState.observer) {
+      viewportState.observer.disconnect();
+      delete viewportState.observer;
+    }
+  };
+}
+
+/** React hook providing the DOMRect of the viewport. */
+function useViewportRect() {
+  const [viewport, setViewport] = useState(/** @type {DOMRect | undefined} */ (undefined));
+  useEffect(() => subscribeToViewportRect(setViewport), []);
+  return viewport;
+}
+
+/**
+ * Get co-ordinates for a dropdown based on its source element and the viewport.
+ * @param {{ dropdownPosition?: import('./getCoords').Position; open?: boolean }} options
+ *
+ * @example
+ * const [open, setOpen] = useState(false);
+ * const { refs, coords } = useDropDownCoords({ dropdownPosition: 'right', open });
+ *
+ * return (
+ *   <div style={{ position: 'relative' }}>
+ *     // Pass the source ref to the button to attach to.
+ *     <button ref={refs.source} onClick={() => setOpen(!open)}>
+ *       Open Dropdown
+ *     </button>
+ *     <ul
+ *       // Pass the dropdown ref to the dropdown menu to measure it.
+ *       ref={refs.dropdown}
+ *       style={{
+ *         position: 'absolute',
+ *         // Use the calculated co-ordinates to position the dropdown.
+ *         left: coords.x,
+ *         top: coords.y,
+ *         display: open ? 'block' : 'none'
+ *       }}>
+ *       ...
+ *     </ul>
+ *   </div>
+ * );
+ */
+export function useDropDownCoords({ dropdownPosition = 'left', open } = {}) {
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const viewport = useViewportRect();
+  const source = useRef(/** @type {HTMLElement | null} */ (null));
+  const dropdown = useRef(/** @type {HTMLElement | null} */ (null));
+
+  useLayoutEffect(() => {
+    if (!open || !viewport || !source.current || !dropdown.current) {
+      return;
+    }
+
+    const { x, y } = getCoords({
+      reference: source.current.getBoundingClientRect(),
+      target: dropdown.current.getBoundingClientRect(),
+      viewport,
+      dropdownPosition,
+    });
+
+    setX(x);
+    setY(y);
+  }, [dropdownPosition, source.current, dropdown.current, viewport, open]);
+
+  return { refs: { source, dropdown }, coords: { x, y } };
+}

package/src/Dropdown.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
 
+import { useDropDownCoords } from './DropDown/useDropDownCoords';
 import { colors, buttons, components, zIndex } from './styles';
 import Icon from './Icon';
 
@@ -11,6 +12,7 @@ const StyledWrapper = styled(Wrapper)`
   position: relative;
   font-size: 14px;
   user-select: none;
+  touch-action: manipulation;
 `;
 
 const StyledDropdownButton = styled(DropdownButton)`
@@ -20,6 +22,7 @@ const StyledDropdownButton = styled(DropdownButton)`
   padding-left: 20px;
   padding-right: 40px;
   position: relative;
+  white-space: nowrap;
 
   &:after {
     ${components.caretDown};
@@ -44,8 +47,7 @@ const DropdownList = styled.ul`
   ${props => css`
     width: ${props.width};
     top: ${props.top};
-    left: ${props.position === 'left' ? 0 : 'auto'};
-    right: ${props.position === 'right' ? 0 : 'auto'};
+    left: ${props.left};
   `};
 `;
 
@@ -91,15 +93,23 @@ function Dropdown({
   className,
   children,
 }) {
+  const [open, setOpen] = useState(false);
+  const { coords, refs } = useDropDownCoords({ dropdownPosition, open });
   return (
     <StyledWrapper
       closeOnSelection={closeOnSelection}
       onSelection={handler => handler()}
+      onMenuToggle={({ isOpen }) => setOpen(isOpen)}
       className={className}
     >
-      {renderButton()}
+      <div ref={refs.source}>{renderButton()}</div>
       <Menu>
-        <DropdownList width={dropdownWidth} top={dropdownTopOverlap} position={dropdownPosition}>
+        <DropdownList
+          ref={refs.dropdown}
+          width={dropdownWidth}
+          top={dropdownTopOverlap}
+          left={coords.x + 'px'}
+        >
           {children}
         </DropdownList>
       </Menu>

package/src/Icon/images/_index.js

@@ -11,6 +11,8 @@ import iconCircle from './circle.svg';
 import iconClose from './close.svg';
 import iconCode from './code.svg';
 import iconCodeBlock from './code-block.svg';
+import iconCopy from './copy.svg';
+import iconDownload from './download.svg';
 import iconDragHandle from './drag-handle.svg';
 import iconEye from './eye.svg';
 import iconFolder from './folder.svg';
@@ -63,6 +65,8 @@ const images = {
   close: iconClose,
   code: iconCode,
   'code-block': iconCodeBlock,
+  copy: iconCopy,
+  download: iconDownload,
   'drag-handle': iconDragHandle,
   eye: iconEye,
   folder: iconFolder,

package/src/Icon/images/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z"/></svg>

package/src/Icon/images/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z"/></svg>

package/src/styles.js

@@ -94,6 +94,7 @@ const lengths = {
   borderWidth: '2px',
   topCardWidth: '682px',
   pageMargin: '28px 18px',
+  pageMarginMobile: '12px 8px',
   objectWidgetTopBarContainerPadding: '0 14px 14px',
 };
 
@@ -313,12 +314,16 @@ const components = {
     width: ${lengths.topCardWidth};
     max-width: 100%;
     padding: 18px 20px;
-    margin-bottom: 28px;
+    margin-bottom: 22px;
   `,
   cardTopHeading: css`
-    font-size: 22px;
+    font-size: 20px;
+    line-height: 24px;
+    @media (min-width: 500px) {
+      font-size: 22px;
+      line-height: 26px;
+    }
     font-weight: 600;
-    line-height: 37px;
     margin: 0;
     padding: 0;
   `,
@@ -327,6 +332,7 @@ const components = {
     color: ${colors.text};
     font-size: 14px;
     margin-top: 8px;
+    margin-bottom: 0;
   `,
   objectWidgetTopBarContainer: css`
     padding: ${lengths.objectWidgetTopBarContainerPadding};