decap-cms-widget-object 3.1.5-beta.0 → 3.3.0

package/dist/esm/ObjectControl.js

@@ -1,20 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
-var _react2 = require("@emotion/react");
-var _immutable = require("immutable");
-var _decapCmsUiDefault = require("decap-cms-ui-default");
-var _decapCmsLibWidgets = require("decap-cms-lib-widgets");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { ClassNames } from '@emotion/react';
+import { List, Map } from 'immutable';
+import { colors, lengths, ObjectWidgetTopBar } from 'decap-cms-ui-default';
+import { stringTemplate } from 'decap-cms-lib-widgets';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 const styleStrings = {
   nestedObjectControl: `
     padding: 6px 14px 14px;
@@ -23,25 +17,35 @@ const styleStrings = {
     border-top-right-radius: 0;
   `,
   objectWidgetTopBarContainer: `
-    padding: ${_decapCmsUiDefault.lengths.objectWidgetTopBarContainerPadding};
+    padding: ${lengths.objectWidgetTopBarContainerPadding};
   `,
   collapsedObjectControl: `
     display: none;
   `
 };
-class ObjectControl extends _react.default.Component {
+export default class ObjectControl extends React.Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "componentValidate", {});
+    _defineProperty(this, "childRefs", {});
+    _defineProperty(this, "processControlRef", ref => {
+      var _this$props$controlRe, _this$props;
+      if (!ref) return;
+      const name = ref.props.field.get('name');
+      this.childRefs[name] = ref;
+      (_this$props$controlRe = (_this$props = this.props).controlRef) === null || _this$props$controlRe === void 0 ? void 0 : _this$props$controlRe.call(_this$props, ref);
+    });
     _defineProperty(this, "validate", () => {
       const {
         field
       } = this.props;
       let fields = field.get('field') || field.get('fields');
-      fields = _immutable.List.isList(fields) ? fields : (0, _immutable.List)([fields]);
+      fields = List.isList(fields) ? fields : List([fields]);
       fields.forEach(field => {
+        var _control$validate;
         if (field.get('widget') === 'hidden') return;
-        this.componentValidate[field.get('name')]();
+        const name = field.get('name');
+        const control = this.childRefs[name];
+        control === null || control === void 0 ? void 0 : (_control$validate = control.validate) === null || _control$validate === void 0 ? void 0 : _control$validate.call(control);
       });
     });
     _defineProperty(this, "handleCollapseToggle", () => {
@@ -62,7 +66,7 @@ class ObjectControl extends _react.default.Component {
       } = this.props;
       const label = field.get('label', field.get('name'));
       const summary = field.get('summary');
-      return summary ? _decapCmsLibWidgets.stringTemplate.compileStringTemplate(summary, null, '', value) : label;
+      return summary ? stringTemplate.compileStringTemplate(summary, null, '', value) : label;
     });
     this.state = {
       collapsed: props.field.get('collapsed', false)
@@ -87,21 +91,21 @@ class ObjectControl extends _react.default.Component {
       metadata,
       fieldsErrors,
       editorControl: EditorControl,
-      controlRef,
       parentIds,
       isFieldDuplicate,
       isFieldHidden,
       locale,
-      collapsed
+      collapsed,
+      forID
     } = this.props;
     if (field.get('widget') === 'hidden') {
       return null;
     }
     const fieldName = field.get('name');
-    const fieldValue = value && _immutable.Map.isMap(value) ? value.get(fieldName) : value;
+    const fieldValue = value && Map.isMap(value) ? value.get(fieldName) : value;
     const isDuplicate = isFieldDuplicate && isFieldDuplicate(field);
     const isHidden = isFieldHidden && isFieldHidden(field);
-    return (0, _react2.jsx)(EditorControl, {
+    return ___EmotionJSX(EditorControl, {
       key: key,
       field: field,
       value: fieldValue,
@@ -110,9 +114,8 @@ class ObjectControl extends _react.default.Component {
       fieldsMetaData: metadata,
       fieldsErrors: fieldsErrors,
       onValidate: onValidateObject,
-      processControlRef: controlRef && controlRef.bind(this),
-      controlRef: controlRef,
-      parentIds: parentIds,
+      controlRef: this.processControlRef,
+      parentIds: [...parentIds, forID],
       isDisabled: isDuplicate,
       isHidden: isHidden,
       isFieldDuplicate: isFieldDuplicate,
@@ -121,6 +124,27 @@ class ObjectControl extends _react.default.Component {
       isParentListCollapsed: collapsed
     });
   }
+  focus(path) {
+    if (this.state.collapsed) {
+      this.setState({
+        collapsed: false
+      }, () => {
+        if (path) {
+          const [fieldName, ...remainingPath] = path.split('.');
+          const field = this.childRefs[fieldName];
+          if (field !== null && field !== void 0 && field.focus) {
+            field.focus(remainingPath.join('.'));
+          }
+        }
+      });
+    } else if (path) {
+      const [fieldName, ...remainingPath] = path.split('.');
+      const field = this.childRefs[fieldName];
+      if (field !== null && field !== void 0 && field.focus) {
+        field.focus(remainingPath.join('.'));
+      }
+    }
+  }
   render() {
     const {
       field,
@@ -134,10 +158,10 @@ class ObjectControl extends _react.default.Component {
     const multiFields = field.get('fields');
     const singleField = field.get('field');
     if (multiFields || singleField) {
-      return (0, _react2.jsx)(_react2.ClassNames, null, ({
+      return ___EmotionJSX(ClassNames, null, ({
         css,
         cx
-      }) => (0, _react2.jsx)("div", {
+      }) => ___EmotionJSX("div", {
         id: forID,
         className: cx(classNameWrapper, css`
                   ${styleStrings.objectWidgetTopBarContainer}
@@ -147,15 +171,15 @@ class ObjectControl extends _react.default.Component {
                   `]: forList
         }, {
           [css`
-                    border-color: ${_decapCmsUiDefault.colors.textFieldBorder};
+                    border-color: ${colors.textFieldBorder};
                   `]: forList ? !hasError : false
         })
-      }, forList ? null : (0, _react2.jsx)(_decapCmsUiDefault.ObjectWidgetTopBar, {
+      }, forList ? null : ___EmotionJSX(ObjectWidgetTopBar, {
         collapsed: collapsed,
         onCollapseToggle: this.handleCollapseToggle,
         heading: collapsed && this.objectLabel(),
         t: t
-      }), (0, _react2.jsx)("div", {
+      }), ___EmotionJSX("div", {
         className: cx({
           [css`
                     ${styleStrings.collapsedObjectControl}
@@ -163,28 +187,27 @@ class ObjectControl extends _react.default.Component {
         })
       }, this.renderFields(multiFields, singleField))));
     }
-    return (0, _react2.jsx)("h3", null, "No field(s) defined for this widget");
+    return ___EmotionJSX("h3", null, "No field(s) defined for this widget");
   }
 }
-exports.default = ObjectControl;
 _defineProperty(ObjectControl, "propTypes", {
-  onChangeObject: _propTypes.default.func.isRequired,
-  onValidateObject: _propTypes.default.func,
-  value: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object, _propTypes.default.bool]),
-  field: _propTypes.default.object,
-  forID: _propTypes.default.string,
-  classNameWrapper: _propTypes.default.string.isRequired,
-  forList: _propTypes.default.bool,
-  controlRef: _propTypes.default.func,
-  editorControl: _propTypes.default.elementType.isRequired,
-  resolveWidget: _propTypes.default.func.isRequired,
-  clearFieldErrors: _propTypes.default.func.isRequired,
-  fieldsErrors: _reactImmutableProptypes.default.map,
-  hasError: _propTypes.default.bool,
-  t: _propTypes.default.func,
-  locale: _propTypes.default.string,
-  collapsed: _propTypes.default.bool
+  onChangeObject: PropTypes.func.isRequired,
+  onValidateObject: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.node, PropTypes.object, PropTypes.bool]),
+  field: PropTypes.object,
+  forID: PropTypes.string,
+  classNameWrapper: PropTypes.string.isRequired,
+  forList: PropTypes.bool,
+  controlRef: PropTypes.func,
+  editorControl: PropTypes.elementType.isRequired,
+  resolveWidget: PropTypes.func.isRequired,
+  clearFieldErrors: PropTypes.func.isRequired,
+  fieldsErrors: ImmutablePropTypes.map,
+  hasError: PropTypes.bool,
+  t: PropTypes.func,
+  locale: PropTypes.string,
+  collapsed: PropTypes.bool
 });
 _defineProperty(ObjectControl, "defaultProps", {
-  value: (0, _immutable.Map)()
+  value: Map()
 });

package/dist/esm/ObjectPreview.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _decapCmsUiDefault = require("decap-cms-ui-default");
-var _react2 = require("@emotion/react");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WidgetPreviewContainer } from 'decap-cms-ui-default';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 function ObjectPreview({
   field
 }) {
-  return (0, _react2.jsx)(_decapCmsUiDefault.WidgetPreviewContainer, null, field && field.get('fields') || field.get('field') || null);
+  return ___EmotionJSX(WidgetPreviewContainer, null, field && field.get('fields') || field.get('field') || null);
 }
 ObjectPreview.propTypes = {
-  field: _propTypes.default.node
+  field: PropTypes.node
 };
-var _default = exports.default = ObjectPreview;
+export default ObjectPreview;

package/dist/esm/index.js

@@ -1,29 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DecapCmsWidgetObject = void 0;
-var _ObjectControl = _interopRequireDefault(require("./ObjectControl"));
-var _ObjectPreview = _interopRequireDefault(require("./ObjectPreview"));
-var _schema = _interopRequireDefault(require("./schema"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import controlComponent from './ObjectControl';
+import previewComponent from './ObjectPreview';
+import schema from './schema';
 function Widget(opts = {}) {
   return _objectSpread({
     name: 'object',
-    controlComponent: _ObjectControl.default,
-    previewComponent: _ObjectPreview.default,
-    schema: _schema.default
+    controlComponent,
+    previewComponent,
+    schema
   }, opts);
 }
-const DecapCmsWidgetObject = exports.DecapCmsWidgetObject = {
+export const DecapCmsWidgetObject = {
   Widget,
-  controlComponent: _ObjectControl.default,
-  previewComponent: _ObjectPreview.default
+  controlComponent,
+  previewComponent
 };
-var _default = exports.default = DecapCmsWidgetObject;
+export default DecapCmsWidgetObject;

package/dist/esm/schema.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = exports.default = {
+export default {
   properties: {
     collapsed: {
       type: 'boolean'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-object",
   "description": "Widget for displaying an object of fields for Decap CMS.",
-  "version": "3.1.5-beta.0",
+  "version": "3.3.0",
   "homepage": "https://www.decapcms.org/docs/widgets/#object",
   "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-object",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
@@ -28,8 +28,8 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "17.x || 18.x",
+    "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   },
-  "gitHead": "0f91300093c3c074f50c7af8f20a4ad331806e62"
+  "gitHead": "e2165450e5963b2a8d76d4cf331319bf91f05d45"
 }

package/src/ObjectControl.js

@@ -22,7 +22,14 @@ const styleStrings = {
 };
 
 export default class ObjectControl extends React.Component {
-  componentValidate = {};
+  childRefs = {};
+
+  processControlRef = ref => {
+    if (!ref) return;
+    const name = ref.props.field.get('name');
+    this.childRefs[name] = ref;
+    this.props.controlRef?.(ref);
+  };
 
   static propTypes = {
     onChangeObject: PropTypes.func.isRequired,
@@ -70,7 +77,9 @@ export default class ObjectControl extends React.Component {
     fields = List.isList(fields) ? fields : List([fields]);
     fields.forEach(field => {
       if (field.get('widget') === 'hidden') return;
-      this.componentValidate[field.get('name')]();
+      const name = field.get('name');
+      const control = this.childRefs[name];
+      control?.validate?.();
     });
   };
 
@@ -83,12 +92,12 @@ export default class ObjectControl extends React.Component {
       metadata,
       fieldsErrors,
       editorControl: EditorControl,
-      controlRef,
       parentIds,
       isFieldDuplicate,
       isFieldHidden,
       locale,
       collapsed,
+      forID,
     } = this.props;
 
     if (field.get('widget') === 'hidden') {
@@ -110,9 +119,8 @@ export default class ObjectControl extends React.Component {
         fieldsMetaData={metadata}
         fieldsErrors={fieldsErrors}
         onValidate={onValidateObject}
-        processControlRef={controlRef && controlRef.bind(this)}
-        controlRef={controlRef}
-        parentIds={parentIds}
+        controlRef={this.processControlRef}
+        parentIds={[...parentIds, forID]}
         isDisabled={isDuplicate}
         isHidden={isHidden}
         isFieldDuplicate={isFieldDuplicate}
@@ -127,6 +135,26 @@ export default class ObjectControl extends React.Component {
     this.setState({ collapsed: !this.state.collapsed });
   };
 
+  focus(path) {
+    if (this.state.collapsed) {
+      this.setState({ collapsed: false }, () => {
+        if (path) {
+          const [fieldName, ...remainingPath] = path.split('.');
+          const field = this.childRefs[fieldName];
+          if (field?.focus) {
+            field.focus(remainingPath.join('.'));
+          }
+        }
+      });
+    } else if (path) {
+      const [fieldName, ...remainingPath] = path.split('.');
+      const field = this.childRefs[fieldName];
+      if (field?.focus) {
+        field.focus(remainingPath.join('.'));
+      }
+    }
+  }
+
   renderFields = (multiFields, singleField) => {
     if (multiFields) {
       return multiFields.map((f, idx) => this.controlFor(f, idx));