@sanity/form-builder/lib/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.js

Sanity form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CrossDatasetReferenceInput = void 0;
var _react = _interopRequireWildcard(require("react"));
var _types = require("@sanity/types");
var _icons = require("@sanity/icons");
var _rxjs = require("rxjs");
var _autoId = require("@reach/auto-id");
var _operators = require("rxjs/operators");
var _ui = require("@sanity/ui");
var _components = require("@sanity/base/components");
var _internal = require("@sanity/base/_internal");
var _reactRx = require("react-rx");
var _paths = require("@sanity/util/paths");
var _PatchEvent = _interopRequireWildcard(require("../../PatchEvent"));
var _empty = require("../../utils/empty");
var _useDidUpdate = require("../../hooks/useDidUpdate");
var _AlertStrip = require("../../AlertStrip");
var _useOnClickOutside = require("../../hooks/useOnClickOutside");
var _getProjectId = require("./utils/getProjectId");
var _OptionPreview = require("./OptionPreview");
var _useReferenceInfo = require("./useReferenceInfo");
var _PreviewReferenceValue = require("./PreviewReferenceValue");
var _ReferenceAutocomplete = require("./ReferenceAutocomplete");
var _PreviewCard = require("./PreviewCard");
var _DisabledFeatureWarning = require("./DisabledFeatureWarning");
var _useFeatureEnabled = require("./useFeatureEnabled");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable complexity */ /* eslint-disable max-nested-callbacks,no-nested-ternary */
var INITIAL_SEARCH_STATE = {
  hits: [],
  isLoading: false
};
var NO_FILTER = () => true;
function nonNullable(v) {
  return v !== null;
}
var REF_PATH = ['_ref'];
var CROSS_DATASET_FEATUREKEY = 'crossDatasetReferences';
var CrossDatasetReferenceInput = /*#__PURE__*/(0, _react.forwardRef)(function CrossDatasetReferenceInput(props, forwardedRef) {
  var _type$studioUrl, _loadableReferenceInf, _loadableReferenceInf2;
  var type = props.type,
    value = props.value,
    level = props.level,
    markers = props.markers,
    readOnly = props.readOnly,
    onSearch = props.onSearch,
    onChange = props.onChange,
    presence = props.presence,
    _props$focusPath = props.focusPath,
    focusPath = _props$focusPath === void 0 ? _empty.EMPTY_ARRAY : _props$focusPath,
    onFocus = props.onFocus,
    onBlur = props.onBlur,
    compareValue = props.compareValue,
    getReferenceInfo = props.getReferenceInfo;
  var projectId = (0, _react.useMemo)(() => (0, _getProjectId.getProjectId)(), []);
  var _useState = (0, _react.useState)(INITIAL_SEARCH_STATE),
    _useState2 = _slicedToArray(_useState, 2),
    searchState = _useState2[0],
    setSearchState = _useState2[1];
  var handleChange = (0, _react.useCallback)(id => {
    if (!id) {
      onChange(_PatchEvent.default.from((0, _PatchEvent.unset)()));
      onFocus === null || onFocus === void 0 ? void 0 : onFocus([]);
      return;
    }
    var hit = searchState.hits.find(h => h.id === id);
    if (!hit) {
      throw new Error('Selected an item that wasnt part of the result set');
    }
    onChange(_PatchEvent.default.from((0, _PatchEvent.set)({
      _type: type.name,
      _ref: (0, _internal.getPublishedId)(id),
      _projectId: projectId,
      _dataset: type.dataset,
      _weak: type.weak,
      // persist _key between mutations if the value is in an array
      _key: value === null || value === void 0 ? void 0 : value._key
    })));
    onFocus === null || onFocus === void 0 ? void 0 : onFocus([]);
  }, [value === null || value === void 0 ? void 0 : value._key, searchState.hits, type.name, type.dataset, type.weak, projectId, onChange, onFocus]);
  var handleClear = (0, _react.useCallback)(() => {
    onChange(_PatchEvent.default.from((0, _PatchEvent.unset)()));
  }, [onChange]);
  var handleAutocompleteKeyDown = (0, _react.useCallback)(event => {
    // escape
    if (event.keyCode === 27) {
      onFocus === null || onFocus === void 0 ? void 0 : onFocus([]);
    }
  }, [onFocus]);
  var getReferenceInfoMemo = (0, _react.useCallback)(id => getReferenceInfo(id, type), [getReferenceInfo, type]);
  var refDoc = (0, _react.useMemo)(() => ({
    _id: value === null || value === void 0 ? void 0 : value._ref
  }), [value === null || value === void 0 ? void 0 : value._ref]);
  var loadableReferenceInfo = (0, _useReferenceInfo.useReferenceInfo)(refDoc, getReferenceInfoMemo);
  var featureInfo = (0, _useFeatureEnabled.useFeatureEnabled)(CROSS_DATASET_FEATUREKEY);
  var autocompletePopoverReferenceElementRef = (0, _react.useRef)();

  // --- focus handling
  var hasFocusAtRef = focusPath.length === 1 && focusPath[0] === '_ref';
  var focusElementRef = (0, _ui.useForwardedRef)(forwardedRef);
  (0, _useDidUpdate.useDidUpdate)({
    hasFocusAt: hasFocusAtRef,
    ref: value === null || value === void 0 ? void 0 : value._ref
  }, (prev, current) => {
    var refUpdated = prev.ref !== current.ref;
    var focusAtUpdated = prev.hasFocusAt !== current.hasFocusAt;
    if ((focusAtUpdated || refUpdated) && current.hasFocusAt) {
      var _focusElementRef$curr;
      // if search mode changed and we're having focus always ensure the
      // ref element gets focus
      (_focusElementRef$curr = focusElementRef.current) === null || _focusElementRef$curr === void 0 ? void 0 : _focusElementRef$curr.focus();
    }
  });
  var weakIs = value !== null && value !== void 0 && value._weak ? 'weak' : 'strong';
  var weakShouldBe = type.weak === true ? 'weak' : 'strong';
  var hasRef = Boolean(value === null || value === void 0 ? void 0 : value._ref);
  var handleFixStrengthMismatch = (0, _react.useCallback)(() => {
    onChange(_PatchEvent.default.from(type.weak === true ? (0, _PatchEvent.set)(true, ['_weak']) : (0, _PatchEvent.unset)(['_weak'])));
  }, [onChange, type]);
  var _useToast = (0, _ui.useToast)(),
    push = _useToast.push;
  var errors = (0, _react.useMemo)(() => markers.filter(_types.isValidationErrorMarker), [markers]);
  var handleFocus = (0, _react.useCallback)(event => {
    if (onFocus && event.currentTarget === focusElementRef.current) {
      onFocus([_paths.FOCUS_TERMINATOR]);
    }
  }, [onFocus, focusElementRef]);
  var handleAutocompleteFocus = (0, _react.useCallback)(event => {
    if (onFocus && event.currentTarget === focusElementRef.current) {
      onFocus(['_ref']);
    }
  }, [onFocus, focusElementRef]);
  var handleQueryChange = (0, _reactRx.useObservableCallback)(inputValue$ => {
    return inputValue$.pipe((0, _operators.filter)(nonNullable), (0, _operators.distinctUntilChanged)(), (0, _operators.switchMap)(searchString => (0, _rxjs.concat)((0, _rxjs.of)({
      isLoading: true
    }), onSearch(searchString).pipe((0, _operators.map)(hits => ({
      hits,
      searchString,
      isLoading: false
    })), (0, _operators.catchError)(error => {
      push({
        title: 'Reference search failed',
        description: error.message,
        status: 'error',
        id: "reference-search-fail-".concat(inputId)
      });
      console.error(error);
      return (0, _rxjs.of)({
        hits: []
      });
    })))), (0, _operators.scan)((prevState, nextState) => _objectSpread(_objectSpread({}, prevState), nextState), INITIAL_SEARCH_STATE), (0, _operators.tap)(setSearchState));
  }, []);
  var handleAutocompleteOpenButtonClick = (0, _react.useCallback)(() => {
    handleQueryChange('');
  }, [handleQueryChange]);
  var showWeakRefMismatch = !loadableReferenceInfo.isLoading && hasRef && weakIs !== weakShouldBe;
  var inputId = (0, _autoId.useId)();
  var studioUrl = (value === null || value === void 0 ? void 0 : value._ref) && ((_type$studioUrl = type.studioUrl) === null || _type$studioUrl === void 0 ? void 0 : _type$studioUrl.call(type, {
    id: value === null || value === void 0 ? void 0 : value._ref,
    type: loadableReferenceInfo === null || loadableReferenceInfo === void 0 || (_loadableReferenceInf = loadableReferenceInfo.result) === null || _loadableReferenceInf === void 0 ? void 0 : _loadableReferenceInf.type
  })) || null;
  var renderOption = (0, _react.useCallback)(option => {
    return /*#__PURE__*/_react.default.createElement(_PreviewCard.PreviewCard, {
      forwardedAs: "button",
      type: "button",
      radius: 2
    }, /*#__PURE__*/_react.default.createElement(_ui.Box, {
      paddingX: 3,
      paddingY: 1
    }, /*#__PURE__*/_react.default.createElement(_OptionPreview.OptionPreview, {
      referenceType: type,
      document: option.hit.published,
      getReferenceInfo: getReferenceInfoMemo
    })));
  }, [type, getReferenceInfoMemo]);
  var preview = (_loadableReferenceInf2 = loadableReferenceInfo.result) === null || _loadableReferenceInf2 === void 0 ? void 0 : _loadableReferenceInf2.preview.published;
  var isEditing = hasFocusAtRef || !(value !== null && value !== void 0 && value._ref);

  // --- click outside handling
  var clickOutsideBoundaryRef = (0, _react.useRef)();
  var autocompletePortalRef = (0, _react.useRef)();
  var createButtonMenuPortalRef = (0, _react.useRef)();
  (0, _useOnClickOutside.useOnClickOutside)([clickOutsideBoundaryRef, autocompletePortalRef, createButtonMenuPortalRef], () => {
    if (hasFocusAtRef) {
      onFocus === null || onFocus === void 0 ? void 0 : onFocus([]);
    }
  });
  return /*#__PURE__*/_react.default.createElement(_components.FormField, {
    __unstable_markers: markers,
    __unstable_presence: presence,
    __unstable_changeIndicator: false,
    inputId: inputId,
    title: type.title,
    level: level,
    description: type.description
  }, !featureInfo.isLoading && !featureInfo.enabled && /*#__PURE__*/_react.default.createElement(_DisabledFeatureWarning.DisabledFeatureWarning, {
    value: value,
    onClearValue: handleClear
  }), (featureInfo.isLoading || featureInfo.enabled) && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
    space: 1,
    marginBottom: isEditing ? 0 : 0
  }, isEditing ? /*#__PURE__*/_react.default.createElement(_ui.Stack, {
    space: 2,
    ref: clickOutsideBoundaryRef
  }, /*#__PURE__*/_react.default.createElement(_components.ChangeIndicatorForFieldPath, {
    path: REF_PATH,
    hasFocus: (focusPath === null || focusPath === void 0 ? void 0 : focusPath[0]) === '_ref',
    isChanged: (value === null || value === void 0 ? void 0 : value._ref) !== (compareValue === null || compareValue === void 0 ? void 0 : compareValue._ref)
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: autocompletePopoverReferenceElementRef
  }, /*#__PURE__*/_react.default.createElement(_ReferenceAutocomplete.ReferenceAutocomplete, {
    "data-testid": "autocomplete",
    loading: searchState.isLoading,
    ref: focusElementRef,
    referenceElement: autocompletePopoverReferenceElementRef.current,
    portalRef: autocompletePortalRef,
    id: inputId || '',
    options: searchState.hits.map(hit => ({
      value: hit.id,
      hit: hit
    })),
    onFocus: handleAutocompleteFocus,
    onBlur: onBlur,
    radius: 1,
    placeholder: "Type to search",
    onKeyDown: handleAutocompleteKeyDown,
    readOnly: readOnly,
    disabled: loadableReferenceInfo.isLoading,
    onQueryChange: handleQueryChange,
    searchString: searchState.searchString,
    onChange: handleChange,
    filterOption: NO_FILTER,
    renderOption: renderOption,
    openButton: {
      onClick: handleAutocompleteOpenButtonClick
    }
  })))) : /*#__PURE__*/_react.default.createElement(_components.ChangeIndicatorForFieldPath, {
    path: REF_PATH,
    hasFocus: (focusPath === null || focusPath === void 0 ? void 0 : focusPath[0]) === '_ref',
    isChanged: (value === null || value === void 0 ? void 0 : value._ref) !== (compareValue === null || compareValue === void 0 ? void 0 : compareValue._ref)
  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
    padding: 0,
    border: true,
    flex: 1,
    radius: 1,
    tone: readOnly ? 'transparent' : loadableReferenceInfo.error || errors.length > 0 ? 'critical' : 'default'
  }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
    align: "center",
    padding: 1
  }, studioUrl ? /*#__PURE__*/_react.default.createElement(_PreviewCard.PreviewCard, {
    forwardedAs: "a",
    target: "_blank",
    rel: "noopener noreferrer",
    href: studioUrl,
    "data-as": "a",
    flex: 1,
    padding: 1,
    paddingRight: 3,
    radius: 2,
    tone: "inherit",
    __unstable_focusRing: true,
    tabIndex: 0,
    onFocus: handleFocus,
    ref: focusElementRef
  }, /*#__PURE__*/_react.default.createElement(_PreviewReferenceValue.PreviewReferenceValue, {
    value: value,
    referenceInfo: loadableReferenceInfo,
    showStudioUrlIcon: true,
    hasStudioUrl: !!studioUrl,
    type: type
  })) : /*#__PURE__*/_react.default.createElement(_PreviewCard.PreviewCard, {
    flex: 1,
    padding: 1,
    paddingRight: 3,
    radius: 2,
    tone: "inherit",
    __unstable_focusRing: true,
    tabIndex: 0,
    onFocus: handleFocus,
    ref: focusElementRef
  }, /*#__PURE__*/_react.default.createElement(_PreviewReferenceValue.PreviewReferenceValue, {
    value: value,
    referenceInfo: loadableReferenceInfo,
    showStudioUrlIcon: true,
    type: type
  })), /*#__PURE__*/_react.default.createElement(_ui.Inline, {
    paddingX: 1
  }, /*#__PURE__*/_react.default.createElement(_ui.MenuButton, {
    button: /*#__PURE__*/_react.default.createElement(_ui.Button, {
      padding: 2,
      mode: "bleed",
      icon: _icons.EllipsisVerticalIcon,
      "data-testid": "menu-button"
    }),
    id: "".concat(inputId, "-menuButton"),
    menu: /*#__PURE__*/_react.default.createElement(_ui.Menu, null, !readOnly && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
      text: "Clear",
      tone: "critical",
      icon: _icons.ResetIcon,
      "data-testid": "menu-item-clear",
      onClick: handleClear
    }), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
      text: "Replace",
      icon: _icons.SyncIcon,
      "data-testid": "menu-item-replace",
      onClick: () => {
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(['_ref']);
      }
    }))),
    placement: "right",
    popover: {
      portal: true,
      tone: 'default'
    }
  }))), showWeakRefMismatch && /*#__PURE__*/_react.default.createElement(_AlertStrip.AlertStrip, {
    padding: 1,
    title: "Reference strength mismatch",
    status: "warning",
    "data-testid": "alert-reference-strength-mismatch"
  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
    space: 3
  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
    as: "p",
    muted: true,
    size: 1
  }, "This reference is ", /*#__PURE__*/_react.default.createElement("em", null, weakIs), ", but according to the current schema it should be ", /*#__PURE__*/_react.default.createElement("em", null, weakShouldBe, ".")), /*#__PURE__*/_react.default.createElement(_ui.Text, {
    as: "p",
    muted: true,
    size: 1
  }, type.weak ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "It will not be possible to delete the \"", preview === null || preview === void 0 ? void 0 : preview.title, "\"-document without first removing this reference.") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "This makes it possible to delete the \"", preview === null || preview === void 0 ? void 0 : preview.title, "\"-document without first deleting this reference, leaving this field referencing a nonexisting document.")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
    onClick: handleFixStrengthMismatch,
    text: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Convert to ", weakShouldBe, " reference"),
    tone: "caution"
  }))), loadableReferenceInfo.error && /*#__PURE__*/_react.default.createElement(_AlertStrip.AlertStrip, {
    padding: 1,
    title: "Unable to load reference metadata",
    status: "warning",
    "data-testid": "alert-reference-info-failed"
  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
    space: 3
  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
    as: "p",
    muted: true,
    size: 1
  }, "Error: ", loadableReferenceInfo.error.message), /*#__PURE__*/_react.default.createElement(_ui.Button, {
    onClick: loadableReferenceInfo.retry,
    text: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Retry"),
    tone: "primary"
  })))))));
});
exports.CrossDatasetReferenceInput = CrossDatasetReferenceInput;