tinacms 3.1.2 → 3.2.0

package/dist/react.js

@@ -54,6 +54,15 @@ function useTina(props) {
           }
         }
         if (fieldName) {
+          if (lastHoveredField !== null) {
+            lastHoveredField = null;
+            if (isInTinaIframe) {
+              parent.postMessage(
+                { type: "field:hovered", fieldName: null },
+                window.location.origin
+              );
+            }
+          }
           if (isInTinaIframe) {
             parent.postMessage(
               { type: "field:selected", fieldName },
@@ -61,6 +70,40 @@ function useTina(props) {
             );
           }
         }
+      }, mouseEnterHandler = function(e) {
+        if (!(e.target instanceof Element)) {
+          return;
+        }
+        const attributeNames = e.target.getAttributeNames();
+        const tinaAttribute = attributeNames.find(
+          (name) => name.startsWith("data-tina-field")
+        );
+        let fieldName;
+        if (tinaAttribute) {
+          fieldName = e.target.getAttribute(tinaAttribute);
+        } else {
+          const ancestor = e.target.closest(
+            "[data-tina-field], [data-tina-field-overlay]"
+          );
+          if (ancestor) {
+            const attributeNames2 = ancestor.getAttributeNames();
+            const tinaAttribute2 = attributeNames2.find(
+              (name) => name.startsWith("data-tina-field")
+            );
+            if (tinaAttribute2) {
+              fieldName = ancestor.getAttribute(tinaAttribute2);
+            }
+          }
+        }
+        if (fieldName && fieldName !== lastHoveredField) {
+          lastHoveredField = fieldName;
+          if (isInTinaIframe) {
+            parent.postMessage(
+              { type: "field:hovered", fieldName },
+              window.location.origin
+            );
+          }
+        }
       };
       const style = document.createElement("style");
       style.type = "text/css";
@@ -74,6 +117,15 @@ function useTina(props) {
           outline: 2px solid rgba(34,150,254,1);
           cursor: pointer;
         }
+        [data-tina-field-focused] {
+          outline: 2px dashed #C2410C !important;
+          box-shadow: none !important;
+        }
+        [data-tina-field-focused]:hover {
+          box-shadow: inset 100vi 100vh rgba(194, 65, 12, 0.3) !important;
+          outline: 2px solid #C2410C !important;
+          cursor: pointer;
+        }
         [data-tina-field-overlay] {
           outline: 2px dashed rgba(34,150,254,0.5);
           position: relative;
@@ -94,12 +146,19 @@ function useTina(props) {
         [data-tina-field-overlay]:hover::after {
           opacity: 1;
         }
+        [data-tina-field-overlay][data-tina-field-focused]::after {
+          background-color: rgba(194, 65, 12, 0.3);
+          opacity: 1;
+        }
       `;
       document.head.appendChild(style);
       document.body.classList.add("__tina-quick-editing-enabled");
+      let lastHoveredField = null;
       document.addEventListener("click", mouseDownHandler, true);
+      document.addEventListener("mouseenter", mouseEnterHandler, true);
       return () => {
         document.removeEventListener("click", mouseDownHandler, true);
+        document.removeEventListener("mouseenter", mouseEnterHandler, true);
         document.body.classList.remove("__tina-quick-editing-enabled");
         style.remove();
       };
@@ -113,6 +172,7 @@ function useTina(props) {
       });
     }
   }, [id]);
+  const lastFocusedFieldRef = React.useRef(null);
   React.useEffect(() => {
     const { experimental___selectFormByFormId, ...rest } = props;
     parent.postMessage({ type: "open", ...rest, id }, window.location.origin);
@@ -142,6 +202,40 @@ function useTina(props) {
           );
         }
       }
+      if (event.data.type === "field:set-focused") {
+        const newFieldName = event.data.fieldName;
+        if (newFieldName === lastFocusedFieldRef.current) {
+          return;
+        }
+        lastFocusedFieldRef.current = newFieldName;
+        const allTinaFields = document.querySelectorAll("[data-tina-field]");
+        allTinaFields.forEach((el) => {
+          el.removeAttribute("data-tina-field-focused");
+        });
+        if (newFieldName) {
+          let targetElement = document.querySelector(
+            `[data-tina-field="${newFieldName}"]`
+          );
+          if (!targetElement) {
+            const allFields = Array.from(allTinaFields);
+            targetElement = allFields.find((el) => {
+              const fieldValue = el.getAttribute("data-tina-field");
+              return fieldValue && fieldValue.endsWith(newFieldName.split("---")[1]);
+            });
+          }
+          if (targetElement) {
+            targetElement.setAttribute("data-tina-field-focused", "true");
+            const rect = targetElement.getBoundingClientRect();
+            const isInViewport = rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
+            if (!isInViewport) {
+              targetElement.scrollIntoView({
+                behavior: "smooth",
+                block: "center"
+              });
+            }
+          }
+        }
+      }
     };
     window.addEventListener("message", handleMessage);
     return () => {

package/dist/toolkit/components/active-field-indicator.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
 export declare const ActiveFieldIndicator: () => React.JSX.Element;
+export declare const HoveredFieldIndicator: () => React.JSX.Element;

package/dist/toolkit/fields/components/password-field.d.ts

@@ -4,6 +4,6 @@ export interface PasswordFieldProps extends a {
     error?: boolean;
     ref?: any;
 }
-export declare const passwordFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
+export declare const passwordFieldClasses = "shadow-inner focus:shadow-outline focus:border-tina-orange-dark focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
 export declare const BasePasswordField: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/toolkit/fields/components/select.d.ts

@@ -18,6 +18,6 @@ export interface SelectProps {
     options?: (Option | string)[];
     className?: string;
 }
-export declare const selectFieldClasses = "shadow appearance-none h-full bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
+export declare const selectFieldClasses = "shadow appearance-none h-full bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-tina-orange-dark focus:border-tina-orange-dark sm:text-sm rounded";
 export declare const Select: React.FC<SelectProps>;
 export {};

package/dist/toolkit/fields/components/text-field.d.ts

@@ -4,6 +4,6 @@ export interface TextFieldProps extends a {
     error?: boolean;
     ref?: any;
 }
-export declare const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
+export declare const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-tina-orange-dark focus-visible:ring-0 focus:outline-none focus:ring-2 block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
 export declare const BaseTextField: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/toolkit/fields/plugins/wrap-field-with-meta.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FieldProps } from './field-props';
-import { Form } from '../../forms';
+import { Form, Field } from '../../forms';
 export type InputFieldType<ExtraFieldProps, InputProps> = FieldProps<InputProps> & ExtraFieldProps;
 export declare function wrapFieldsWithMeta<ExtraFieldProps = {}, InputProps = {}>(Field: React.FunctionComponent<InputFieldType<ExtraFieldProps, InputProps>> | React.ComponentClass<InputFieldType<ExtraFieldProps, InputProps>>): (props: InputFieldType<ExtraFieldProps, InputProps>) => React.JSX.Element;
 /**
@@ -21,11 +21,17 @@ interface FieldMetaProps extends React.HTMLAttributes<HTMLElement> {
     margin?: boolean;
     index?: number;
     tinaForm: Form;
+    field?: Field;
+    focusIntent?: boolean;
+    hoverIntent?: boolean;
 }
-export declare const FieldMeta: ({ name, label, description, error, margin, children, index, tinaForm, ...props }: FieldMetaProps) => React.JSX.Element;
-export declare const FieldWrapper: ({ margin, children, ...props }: {
+export declare const FieldMeta: ({ name, label, description, error, margin, children, index, tinaForm, field, focusIntent, hoverIntent, ...props }: FieldMetaProps) => React.JSX.Element;
+export declare const FieldWrapper: ({ margin, children, field, "data-tina-field-active": dataActive, "data-tina-field-hovering": dataHovering, ...props }: {
     margin: boolean;
     children: React.ReactNode;
+    field?: Field;
+    "data-tina-field-active"?: string;
+    "data-tina-field-hovering"?: string;
 } & Partial<React.ComponentPropsWithoutRef<"div">>) => React.JSX.Element;
 export interface FieldLabel extends React.HTMLAttributes<HTMLLabelElement> {
     children?: any | any[];

package/dist/toolkit/form-builder/fields-builder.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 export interface FieldsBuilderProps {
     form: Form;
     activeFieldName?: string;
+    hoveringFieldName?: string;
     fields: Field[];
     padding?: boolean;
 }
-export declare function FieldsBuilder({ form, fields, activeFieldName, padding, }: FieldsBuilderProps): React.JSX.Element;
-export declare const FieldsGroup: ({ padding, children, }: {
-    padding?: boolean;
+export declare function FieldsBuilder({ form, fields, activeFieldName, hoveringFieldName, padding, }: FieldsBuilderProps): React.JSX.Element;
+export declare const FieldsGroup: ({ children, }: {
     children?: any | any[];
 }) => React.JSX.Element;

package/dist/toolkit/form-builder/form-builder.d.ts

@@ -5,6 +5,7 @@ export interface FormBuilderProps {
     form: {
         tinaForm: Form;
         activeFieldName?: string;
+        hoveringFieldName?: string;
     };
     hideFooter?: boolean;
     label?: string;

package/dist/toolkit/forms/field.d.ts

@@ -15,14 +15,16 @@ export interface Field<F extends Field = AnyField> {
     defaultValue?: any;
     namespace?: string[];
     fields?: F[];
+    width?: 'full' | 'half';
     /**
      * Focus events can come from outside of the component, this is not
      * a guarantee that the given field will receive focus since that functionality
      * needs to be built on a per-component basis.
      *
-     * This is also a one-way stree. The "active field" for a given form isn't
+     * This is also a one-way street. The "active field" for a given form isn't
      * necessarily updated when a user clicks on a new field. So you can have a
      * field which is marked as the active field, and have focus on another field
      */
-    experimental_focusIntent?: boolean;
+    focusIntent?: boolean;
+    hoverIntent?: boolean;
 }

package/dist/toolkit/tina-state.d.ts

@@ -1,5 +1,24 @@
 import { Form } from './react-tinacms';
 import { TinaCMS } from './tina-cms';
+export declare const ACTION_TYPES: {
+    readonly FORMS_ADD: "forms:add";
+    readonly FORMS_REMOVE: "forms:remove";
+    readonly FORMS_CLEAR: "forms:clear";
+    readonly FORMS_SET_ACTIVE_FORM_ID: "forms:set-active-form-id";
+    readonly FORMS_SET_ACTIVE_FIELD_NAME: "forms:set-active-field-name";
+    readonly FORMS_SET_HOVERED_FIELD_NAME: "forms:set-hovered-field-name";
+    readonly FORM_LISTS_ADD: "form-lists:add";
+    readonly FORM_LISTS_REMOVE: "form-lists:remove";
+    readonly FORM_LISTS_CLEAR: "form-lists:clear";
+    readonly SET_EDIT_MODE: "set-edit-mode";
+    readonly INCREMENT_OPERATION_INDEX: "increment-operation-index";
+    readonly SET_QUICK_EDITING_SUPPORTED: "set-quick-editing-supported";
+    readonly SET_QUICK_EDITING_ENABLED: "set-quick-editing-enabled";
+    readonly TOGGLE_QUICK_EDITING_ENABLED: "toggle-quick-editing-enabled";
+    readonly TOGGLE_EDIT_STATE: "toggle-edit-state";
+    readonly SIDEBAR_SET_DISPLAY_STATE: "sidebar:set-display-state";
+    readonly SIDEBAR_SET_LOADING_STATE: "sidebar:set-loading-state";
+};
 type FormListItem = {
     type: 'document';
     path: string;
@@ -22,50 +41,56 @@ type Breadcrumb = {
     namespace: string[];
 };
 export type TinaAction = {
-    type: 'forms:add';
+    type: typeof ACTION_TYPES.FORMS_ADD;
     value: Form;
 } | {
-    type: 'forms:remove';
+    type: typeof ACTION_TYPES.FORMS_REMOVE;
     value: string;
 } | {
-    type: 'forms:clear';
+    type: typeof ACTION_TYPES.FORMS_CLEAR;
 } | {
-    type: 'form-lists:add';
+    type: typeof ACTION_TYPES.FORM_LISTS_ADD;
     value: FormList;
 } | {
-    type: 'form-lists:remove';
+    type: typeof ACTION_TYPES.FORM_LISTS_REMOVE;
     value: string;
 } | {
-    type: 'forms:set-active-form-id';
+    type: typeof ACTION_TYPES.FORMS_SET_ACTIVE_FORM_ID;
     value: string;
 } | {
-    type: 'forms:set-active-field-name';
+    type: typeof ACTION_TYPES.FORMS_SET_ACTIVE_FIELD_NAME;
     value: {
         formId: string;
         fieldName: string;
     };
 } | {
-    type: 'form-lists:clear';
+    type: typeof ACTION_TYPES.FORMS_SET_HOVERED_FIELD_NAME;
+    value: {
+        formId: string;
+        fieldName: string | null;
+    };
+} | {
+    type: typeof ACTION_TYPES.FORM_LISTS_CLEAR;
 } | {
-    type: 'set-edit-mode';
+    type: typeof ACTION_TYPES.SET_EDIT_MODE;
     value: 'visual' | 'basic';
 } | {
-    type: 'increment-operation-index';
+    type: typeof ACTION_TYPES.INCREMENT_OPERATION_INDEX;
 } | {
-    type: 'set-quick-editing-supported';
+    type: typeof ACTION_TYPES.SET_QUICK_EDITING_SUPPORTED;
     value: boolean;
 } | {
-    type: 'set-quick-editing-enabled';
+    type: typeof ACTION_TYPES.SET_QUICK_EDITING_ENABLED;
     value?: boolean;
 } | {
-    type: 'toggle-quick-editing-enabled';
+    type: typeof ACTION_TYPES.TOGGLE_QUICK_EDITING_ENABLED;
 } | {
-    type: 'toggle-edit-state';
+    type: typeof ACTION_TYPES.TOGGLE_EDIT_STATE;
 } | {
-    type: 'sidebar:set-display-state';
+    type: typeof ACTION_TYPES.SIDEBAR_SET_DISPLAY_STATE;
     value: TinaState['sidebarDisplayState'] | 'openOrFull';
 } | {
-    type: 'sidebar:set-loading-state';
+    type: typeof ACTION_TYPES.SIDEBAR_SET_LOADING_STATE;
     value: boolean;
 };
 export interface TinaState {
@@ -83,6 +108,7 @@ export interface TinaState {
     forms: {
         activeFieldName?: string | null;
         tinaForm: Form;
+        hoveringFieldName?: string | null;
     }[];
     formLists: FormList[];
     editingMode: 'visual' | 'basic';

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "cmdk": "^1.0.4",
     "color-string": "^1.9.1",
     "crypto-js": "^4.2.0",
-    "date-fns": "2.30.0",
+    "date-fns": "4.1.0",
     "es-toolkit": "^1.42.0",
     "final-form": "4.20.10",
     "final-form-arrays": "^3.1.0",
@@ -100,7 +100,7 @@
     "prop-types": "15.7.2",
     "react-colorful": "^5.6.1",
     "react-datetime": "^3.3.1",
-    "react-day-picker": "^9.11.1",
+    "react-day-picker": "^9.13.0",
     "react-dropzone": "14.2.3",
     "react-final-form": "^6.5.9",
     "react-icons": "^5.4.0",
@@ -110,9 +110,9 @@
     "webfontloader": "1.6.28",
     "yup": "^1.6.1",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "2.0.1",
-    "@tinacms/schema-tools": "2.1.0",
-    "@tinacms/search": "1.1.7"
+    "@tinacms/mdx": "2.0.2",
+    "@tinacms/search": "1.1.9",
+    "@tinacms/schema-tools": "2.2.0"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.8.1",