sanity-plugin-internationalized-array 0.0.4 → 0.0.7

package/README.md

@@ -25,13 +25,18 @@ export default {
   fields: [
     // ...all your other fields
     internationalizedArray({
-      name: "greeting", // required
-      type: "string", // required: string | text | number | boolean
+      // Required, the `name` of the outer array
+      name: "greeting",
+      // Required, the `type` of the inner field
+      // One of: string | text | number | boolean
+      type: "string",
+      // Required, must be an array of objects
       languages: [
         { id: "en", title: "English" },
         { id: "fr", title: "French" },
-      ], // required, must be an array of objects
-      showNativeInput: false, // optional: just for debugging
+      ],
+      // Optional: just for debugging
+      showNativeInput: false,
     }),
   ],
 };
@@ -54,24 +59,51 @@ Using GROQ filters you can query for a specific language key like so:
 }
 ```
 
+## Migrate from objects to arrays
+
+[See the migration script](https://github.com/SimeonGriggs/sanity-plugin-internationalized-array/blob/main/migrations/transformObjectToArray.js) inside `./migrations/transformObjectToArray.js` of this Repo.
+
+Follow the instructions inside the script and set the `_type` and field name you wish to target.
+
+Please take a backup first!
+
 ### Why store localised field data like this?
 
 The most popular way to store field-level translated content is in an object using the method prescribed in [@sanity/language-filter](https://www.npmjs.com/package/@sanity/language-filter). This works well and creates tidy object structures, but also create a unique field path for every unique field name, multiplied by the number of languages in your dataset.
 
-For most people, this won't become an issue. On a very large dataset with a lot of languages, the [Attribute Limit](https://www.sanity.io/docs/attribute-limit) can become a concern.
+For most people, this won't become an issue. On a very large dataset with a lot of languages, the [Attribute Limit](https://www.sanity.io/docs/attribute-limit) can become a concern. This plugin's arrays will use less attributes than an object once you have more than three languages.
 
-An object with the same content as above would look like this:
+The same content as above, plus a third language, structed as an `object` of `string` fields looks like this:
 
 ```json
 "greeting" {
   "en": "hello",
-  "fr": "bonjour"
+  "fr": "bonjour",
+  "es": "hola"
 }
 ```
 
-This creates three unique query paths. The array created by this plugin creates four.
+Which creates four unique query paths, one for the object and one for each language.
+
+```
+greeting
+greeting.en
+greeting.fr
+greeting.es
+```
+
+Every language you add to every object that uses this structure will add to the number of unique query paths.
+
+The array created by this plugin creates four query paths by default, but is not effected by the number of languages:
+
+```
+greeting
+greeting[]
+greeting[]._key
+greeting[].value
+```
 
-However, every language added to the object increases the number of attributes. Where the array method is limited only by the amount of data you can store in your dataset (heaps!).
+By using this plugin you can safely extend the number of languages without adding any additional query paths.
 
 ## License
 

package/lib/LanguageArray/Table.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = Table;
+exports.TableCell = TableCell;
+exports.TableRow = TableRow;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ui = require("@sanity/ui");
+
+var _excluded = ["children"],
+    _excluded2 = ["children"],
+    _excluded3 = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+// Wrappers required because of bug with passing down "as" prop
+// https://github.com/styled-components/styled-components/issues/2449
+// Table
+var TableWrapper = function TableWrapper() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/_react.default.createElement(_ui.Box, _extends({
+    as: "table"
+  }, props));
+};
+
+var StyledTable = (0, _styledComponents.default)(TableWrapper)(() => (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: table;\n      width: 100%;\n\n      &:not([hidden]) {\n        display: table;\n      }\n    "]))));
+
+function Table(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(StyledTable, rest, children);
+} // Row
+
+
+var RowWrapper = function RowWrapper() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/_react.default.createElement(_ui.Card, _extends({
+    as: "tr"
+  }, props));
+};
+
+var StyledRow = (0, _styledComponents.default)(RowWrapper)(() => (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: table-row;\n\n      &:not([hidden]) {\n        display: table-row;\n      }\n    "]))));
+
+function TableRow(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(StyledRow, rest, children);
+} // Cell
+
+
+var CellWrapper = function CellWrapper() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/_react.default.createElement(_ui.Box, _extends({
+    as: "td"
+  }, props));
+};
+
+var StyledCell = (0, _styledComponents.default)(CellWrapper)(() => (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: table-cell;\n\n      &:not([hidden]) {\n        display: table-cell;\n      }\n    "]))));
+
+function TableCell(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded3);
+
+  return /*#__PURE__*/_react.default.createElement(StyledCell, rest, children);
+}
+//# sourceMappingURL=Table.js.map

package/lib/LanguageArray/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":["TableWrapper","props","StyledTable","styled","css","Table","children","rest","RowWrapper","StyledRow","TableRow","CellWrapper","StyledCell","TableCell"],"sources":["../../src/LanguageArray/Table.tsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {Box, BoxProps, Card, CardProps} from '@sanity/ui'\n\n// Wrappers required because of bug with passing down \"as\" prop\n// https://github.com/styled-components/styled-components/issues/2449\n\n// Table\nconst TableWrapper = (props = {}) => {\n  return <Box as=\"table\" {...props} />\n}\n\nconst StyledTable = styled(TableWrapper)(\n  () =>\n    css`\n      display: table;\n      width: 100%;\n\n      &:not([hidden]) {\n        display: table;\n      }\n    `\n)\n\ntype TableProps = BoxProps & {\n  children: React.ReactNode\n  style?: React.CSSProperties\n}\n\nexport function Table(props: TableProps) {\n  const {children, ...rest} = props\n\n  return <StyledTable {...rest}>{children}</StyledTable>\n}\n\n// Row\nconst RowWrapper = (props = {}) => {\n  return <Card as=\"tr\" {...props} />\n}\n\nconst StyledRow = styled(RowWrapper)(\n  () =>\n    css`\n      display: table-row;\n\n      &:not([hidden]) {\n        display: table-row;\n      }\n    `\n)\n\ntype TableRowProps = CardProps & {\n  children: React.ReactNode\n  style?: React.CSSProperties\n}\n\nexport function TableRow(props: TableRowProps) {\n  const {children, ...rest} = props\n\n  return <StyledRow {...rest}>{children}</StyledRow>\n}\n\n// Cell\nconst CellWrapper = (props = {}) => {\n  return <Box as=\"td\" {...props} />\n}\n\nconst StyledCell = styled(CellWrapper)(\n  () =>\n    css`\n      display: table-cell;\n\n      &:not([hidden]) {\n        display: table-cell;\n      }\n    `\n)\n\ntype TableCellProps = BoxProps & {\n  children: React.ReactNode\n  style?: React.CSSProperties\n}\n\nexport function TableCell(props: TableCellProps) {\n  const {children, ...rest} = props\n\n  return <StyledCell {...rest}>{children}</StyledCell>\n}\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AAEA;AACA,IAAMA,YAAY,GAAG,SAAfA,YAAe,GAAgB;EAAA,IAAfC,KAAe,uEAAP,EAAO;EACnC,oBAAO,6BAAC,OAAD;IAAK,EAAE,EAAC;EAAR,GAAoBA,KAApB,EAAP;AACD,CAFD;;AAIA,IAAMC,WAAW,GAAG,IAAAC,yBAAA,EAAOH,YAAP,EAClB,UACEI,qBADF,oLADkB,CAApB;;AAiBO,SAASC,KAAT,CAAeJ,KAAf,EAAkC;EACvC,IAAOK,QAAP,GAA4BL,KAA5B,CAAOK,QAAP;EAAA,IAAoBC,IAApB,4BAA4BN,KAA5B;;EAEA,oBAAO,6BAAC,WAAD,EAAiBM,IAAjB,EAAwBD,QAAxB,CAAP;AACD,C,CAED;;;AACA,IAAME,UAAU,GAAG,SAAbA,UAAa,GAAgB;EAAA,IAAfP,KAAe,uEAAP,EAAO;EACjC,oBAAO,6BAAC,QAAD;IAAM,EAAE,EAAC;EAAT,GAAkBA,KAAlB,EAAP;AACD,CAFD;;AAIA,IAAMQ,SAAS,GAAG,IAAAN,yBAAA,EAAOK,UAAP,EAChB,UACEJ,qBADF,0KADgB,CAAlB;;AAgBO,SAASM,QAAT,CAAkBT,KAAlB,EAAwC;EAC7C,IAAOK,QAAP,GAA4BL,KAA5B,CAAOK,QAAP;EAAA,IAAoBC,IAApB,4BAA4BN,KAA5B;;EAEA,oBAAO,6BAAC,SAAD,EAAeM,IAAf,EAAsBD,QAAtB,CAAP;AACD,C,CAED;;;AACA,IAAMK,WAAW,GAAG,SAAdA,WAAc,GAAgB;EAAA,IAAfV,KAAe,uEAAP,EAAO;EAClC,oBAAO,6BAAC,OAAD;IAAK,EAAE,EAAC;EAAR,GAAiBA,KAAjB,EAAP;AACD,CAFD;;AAIA,IAAMW,UAAU,GAAG,IAAAT,yBAAA,EAAOQ,WAAP,EACjB,UACEP,qBADF,4KADiB,CAAnB;;AAgBO,SAASS,SAAT,CAAmBZ,KAAnB,EAA0C;EAC/C,IAAOK,QAAP,GAA4BL,KAA5B,CAAOK,QAAP;EAAA,IAAoBC,IAApB,4BAA4BN,KAA5B;;EAEA,oBAAO,6BAAC,UAAD,EAAgBM,IAAhB,EAAuBD,QAAvB,CAAP;AACD"}

package/lib/LanguageArray/index.js

@@ -23,7 +23,9 @@ var _FormBuilderInput = require("@sanity/form-builder/lib/FormBuilderInput");
 
 var _ValueInput = _interopRequireDefault(require("./ValueInput"));
 
-var _useUnsetInputComponent = require("./useUnsetInputComponent");
+var _Table = require("./Table");
+
+var _useUnsetInputComponent = require("../hooks/useUnsetInputComponent");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -151,76 +153,68 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
 
   var validationMarkers = markers !== null && markers !== void 0 && markers.length ? markers.filter(mark => mark.type === "validation") : [];
   var invalidKeys = validationMarkers.map(mark => mark.path).flat().map(item => item._key);
-  console.log(props);
   return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
     space: 3
   }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Text, {
     size: 1,
     weight: "bold"
-  }, (_type$title = type === null || type === void 0 ? void 0 : type.title) !== null && _type$title !== void 0 ? _type$title : type.name)), (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    padding: 1,
-    border: true,
-    radius: 1
-  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
-    space: 1
-  }, value.map(item => {
+  }, (_type$title = type === null || type === void 0 ? void 0 : type.title) !== null && _type$title !== void 0 ? _type$title : type.name)), (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/_react.default.createElement(_ui.Card, null, /*#__PURE__*/_react.default.createElement(_Table.Table, null, /*#__PURE__*/_react.default.createElement("tbody", null, value.map(item => {
     var _type$of;
 
-    return /*#__PURE__*/_react.default.createElement(_ui.Card, {
-      paddingY: 1,
-      paddingX: 2,
+    return /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
       key: item._key,
       tone: // TODO: Move this logic somewhere else
       invalidKeys.includes(item._key) ? "critical" : undefined || languagesOutOfOrder.find(l => l._key === item._key) ? "caution" : undefined
-    }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-      gap: 3,
-      align: "center"
     }, (type === null || type === void 0 ? void 0 : (_type$of = type.of) === null || _type$of === void 0 ? void 0 : _type$of.length) > 0 && (type === null || type === void 0 ? void 0 : type.of.map(subType => {
       var _subType$fields;
 
-      return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-        key: subType.name,
-        flex: 1,
-        align: "center",
-        gap: 2
-      }, (subType === null || subType === void 0 ? void 0 : (_subType$fields = subType.fields) === null || _subType$fields === void 0 ? void 0 : _subType$fields.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Label, null, item._key)), /*#__PURE__*/_react.default.createElement(_ui.Box, {
-        flex: 1
-      }, subType.fields.map((subTypeField, subTypeFieldIndex) => {
-        var _props$compareValue, _props$compareValue$f;
-
-        return /*#__PURE__*/_react.default.createElement(_ValueInput.default, {
-          key: subTypeField.name,
-          onChange: patchEvent => handleInnerValueChange(patchEvent, item._key),
-          onBlur: onBlur // We don't want the array item to open onFocus
-          ,
-          onFocus: () => null,
-          path: [{
-            _key: item._key
-          }, subTypeField.name],
-          focusPath: [{
-            _key: item._key
-          }, subTypeField.name],
-          parent: item,
-          readOnly: readOnly,
-          type: subTypeField,
-          value: item.value,
-          level: props.level + 1,
-          markers: [],
-          compareValue: props === null || props === void 0 ? void 0 : (_props$compareValue = props.compareValue) === null || _props$compareValue === void 0 ? void 0 : (_props$compareValue$f = _props$compareValue.find(c => c._key === item._key)) === null || _props$compareValue$f === void 0 ? void 0 : _props$compareValue$f.value
-        });
-      }))) : null);
-    })), (presence === null || presence === void 0 ? void 0 : presence.length) > 0 ? /*#__PURE__*/_react.default.createElement(_presence.FieldPresence, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (subType === null || subType === void 0 ? void 0 : (_subType$fields = subType.fields) === null || _subType$fields === void 0 ? void 0 : _subType$fields.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.TableCell, null, /*#__PURE__*/_react.default.createElement(_ui.Box, {
+        paddingRight: 2
+      }, /*#__PURE__*/_react.default.createElement(_ui.Label, {
+        muted: true,
+        size: 1
+      }, item._key))), /*#__PURE__*/_react.default.createElement(_Table.TableCell, {
+        paddingRight: 2,
+        style: {
+          width: "100%"
+        }
+      }, subType.fields.map(subTypeField => /*#__PURE__*/_react.default.createElement(_ValueInput.default, {
+        key: subTypeField.name,
+        onChange: patchEvent => handleInnerValueChange(patchEvent, item._key),
+        onBlur: onBlur // We don't want the array item to open onFocus
+        ,
+        onFocus: () => null,
+        path: [{
+          _key: item._key
+        }, subTypeField.name] // focusPath={[{_key: item._key}, subTypeField.name]}
+        ,
+        parent: item,
+        readOnly: readOnly,
+        type: subTypeField,
+        value: item.value,
+        level: props.level + 1,
+        markers: [],
+        compareValue: props.compareValue
+      })))) : null);
+    })), /*#__PURE__*/_react.default.createElement(_Table.TableCell, null, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      align: "center",
+      justify: "flex-end",
+      gap: 3
+    }, (presence === null || presence === void 0 ? void 0 : presence.length) > 0 ? /*#__PURE__*/_react.default.createElement(_presence.FieldPresence, {
       maxAvatars: 1,
       presence: presence
-    }) : null, invalidKeys.includes(item._key) ? /*#__PURE__*/_react.default.createElement(_components.FormFieldValidationStatus, {
+    }) : null, invalidKeys.includes(item._key) ? /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      paddingLeft: 2
+    }, /*#__PURE__*/_react.default.createElement(_components.FormFieldValidationStatus, {
       __unstable_markers: validationMarkers
-    }) : null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    })) : null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
       mode: "ghost",
       icon: _icons.RemoveIcon,
       tone: "critical",
+      disabled: readOnly,
       onClick: () => handleUnsetByKey(item._key)
-    })));
-  }))) : null, languagesOutOfOrder.length > 0 ? /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    }))));
+  })))) : null, languagesOutOfOrder.length > 0 ? /*#__PURE__*/_react.default.createElement(_ui.Button, {
     tone: "caution",
     disabled: languagesOutOfOrder.length > languages.length,
     icon: _icons.RestoreIcon,

package/lib/LanguageArray/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["schemaExample","name","type","options","languages","id","title","DEFAULT_OPTIONS","showNativeInput","LanguageArrayWrapper","forwardRef","CustomComponent","props","ref","onChange","onBlur","readOnly","presence","markers","value","useUnsetInputComponent","handleAddLanguage","useCallback","languageId","newItems","_key","filter","language","length","find","v","map","languagesInUse","insertions","item","languageIndex","findIndex","l","remainingLanguages","slice","nextLanguageIndex","r","push","splice","insert","PatchEvent","from","setIfMissing","handleUnsetByKey","unset","handleInnerValueChange","patchEvent","inputValue","patches","inputPath","set","handleRestoreOrder","updatedValue","reduce","acc","newIndex","languagesOutOfOrder","useMemo","vIndex","Boolean","languagesAreValid","every","JSON","stringify","validationMarkers","mark","invalidKeys","path","flat","console","log","includes","undefined","of","subType","fields","subTypeField","subTypeFieldIndex","level","compareValue","c","RemoveIcon","RestoreIcon","Math","min","toUpperCase","AddIcon","withDocument"],"sources":["../../src/LanguageArray/index.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo} from 'react'\nimport {Code, Text, Card, Label, Flex, Box, Stack, Button, Grid} from '@sanity/ui'\nimport {withDocument} from 'part:@sanity/form-builder'\nimport {PatchEvent, setIfMissing, insert, unset, set} from '@sanity/form-builder/PatchEvent'\nimport {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'\nimport {FormFieldValidationStatus} from '@sanity/base/components'\nimport {FieldPresence} from '@sanity/base/presence'\nimport {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'\n\nimport ValueInput from './ValueInput'\nimport {useUnsetInputComponent} from './useUnsetInputComponent'\n\nconst schemaExample = {\n  name: 'title',\n  type: 'localisedArray',\n  options: {\n    languages: [\n      {id: 'en', title: 'English'},\n      {id: 'no', title: 'Norsk'},\n    ],\n  },\n}\n\ntype Value = {\n  _key: string\n  value?: string\n}\n\ntype Language = {\n  id: string\n  title: string\n}\n\ntype Options = {\n  languages: Language[]\n  showNativeInput: boolean\n}\n\nconst DEFAULT_OPTIONS = {\n  languages: [],\n  showNativeInput: false,\n}\n\nconst LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {\n  const {onChange, onBlur, readOnly, presence, markers} = props\n  const value: Value[] = props?.value\n\n  // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop\n  const type = useUnsetInputComponent(props.type)\n  const options: Options = type?.options ?? DEFAULT_OPTIONS\n  const {languages, showNativeInput} = options\n\n  const handleAddLanguage = useCallback(\n    (languageId?: string) => {\n      // Create new items\n      const newItems = languageId\n        ? // Just one for this language\n          [{_key: languageId}]\n        : // Or one for every missing language\n          languages\n            .filter((language) =>\n              value?.length ? !value.find((v) => v._key === language.id) : true\n            )\n            .map((language) => ({_key: language.id}))\n\n      // Insert new items in the correct order\n      const languagesInUse = value?.length ? value.map((v) => v) : []\n\n      const insertions = newItems.map((item) => {\n        // What's the original index of this language?\n        const languageIndex = languages.findIndex((l) => item._key === l.id)\n\n        // What languages are there beyond that index?\n        const remainingLanguages = languages.slice(languageIndex + 1)\n\n        // So what is the index in the current value array of the next language in the language array?\n        const nextLanguageIndex = languagesInUse.findIndex((l) =>\n          remainingLanguages.find((r) => r.id === l._key)\n        )\n\n        // Keep local state up to date incase multiple insertions are being made\n        if (nextLanguageIndex < 0) {\n          languagesInUse.push(item)\n        } else {\n          languagesInUse.splice(nextLanguageIndex, 0, item)\n        }\n\n        return nextLanguageIndex < 0\n          ? // No next language (-1), add to end of array\n            insert([item], 'after', [nextLanguageIndex])\n          : // Next language found, insert before that\n            insert([item], 'before', [nextLanguageIndex])\n      })\n\n      onChange(PatchEvent.from(setIfMissing([]), ...insertions))\n    },\n    [languages, onChange, value]\n  )\n\n  const handleUnsetByKey = useCallback(\n    (_key) => {\n      onChange(PatchEvent.from(unset([{_key}])))\n    },\n    [onChange]\n  )\n\n  const handleInnerValueChange = useCallback(\n    (patchEvent: PatchEvent, _key: string) => {\n      const inputValue = patchEvent.patches[0]?.value\n      const inputPath = [{_key}, `value`]\n\n      onChange(PatchEvent.from(inputValue ? set(inputValue, inputPath) : unset(inputPath)))\n    },\n    [onChange]\n  )\n\n  // TODO: This is lazy, reordering and re-setting the whole array – it should be surgical\n  const handleRestoreOrder = useCallback(() => {\n    // Create a new value array in the correct order\n    const updatedValue = value.reduce((acc, v) => {\n      const newIndex = languages.findIndex((l) => l.id === v._key)\n\n      acc[newIndex] = v\n\n      return acc\n    }, [])\n\n    onChange(PatchEvent.from(unset(), set(updatedValue)))\n  }, [languages, onChange, value])\n\n  // Check languages are in the correct order\n  const languagesOutOfOrder = useMemo(() => {\n    if (!value?.length) {\n      return []\n    }\n\n    const languagesInUse = languages.filter((l) => value.find((v) => v._key === l.id))\n\n    return value\n      .map((v, vIndex) => (vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v))\n      .filter(Boolean)\n  }, [value, languages])\n\n  // Check options are supplied and valid\n  const languagesAreValid = useMemo(\n    () => languages?.length && languages.every((item) => item.id && item.title),\n    [languages]\n  )\n\n  if (!languagesAreValid) {\n    return (\n      <Card tone=\"caution\" border radius={2} padding={3}>\n        <Stack space={4}>\n          <Text>\n            An array of language objects must be passed into the <code>{type.name}</code> field as\n            options, each with an <code>id</code> and <code>title</code> field. Example:\n          </Text>\n          <Card padding={2} border radius={2}>\n            <Code size={1} language=\"javascript\">\n              {JSON.stringify(schemaExample, null, 2)}\n            </Code>\n          </Card>\n        </Stack>\n      </Card>\n    )\n  }\n\n  const validationMarkers = markers?.length\n    ? markers.filter((mark) => mark.type === `validation`)\n    : []\n  const invalidKeys = validationMarkers\n    .map((mark) => mark.path)\n    .flat()\n    .map((item) => item._key)\n  console.log(props)\n\n  return (\n    <Stack space={3}>\n      <Box>\n        <Text size={1} weight=\"bold\">\n          {type?.title ?? type.name}\n        </Text>\n      </Box>\n      {/* Loop over the values */}\n      {value?.length > 0 ? (\n        <Card padding={1} border radius={1}>\n          <Stack space={1}>\n            {value.map((item) => (\n              <Card\n                paddingY={1}\n                paddingX={2}\n                key={item._key}\n                tone={\n                  // TODO: Move this logic somewhere else\n                  invalidKeys.includes(item._key)\n                    ? `critical`\n                    : undefined || languagesOutOfOrder.find((l) => l._key === item._key)\n                    ? `caution`\n                    : undefined\n                }\n              >\n                <Flex gap={3} align=\"center\">\n                  {/* To render each individual field in this type */}\n                  {type?.of?.length > 0 &&\n                    type?.of.map((subType) => (\n                      <Flex key={subType.name} flex={1} align=\"center\" gap={2}>\n                        {subType?.fields?.length > 0 ? (\n                          <>\n                            <Box>\n                              <Label>{item._key}</Label>\n                            </Box>\n                            <Box flex={1}>\n                              {/* There _should_ only be one field */}\n                              {subType.fields.map((subTypeField, subTypeFieldIndex) => (\n                                <ValueInput\n                                  key={subTypeField.name}\n                                  onChange={(patchEvent) =>\n                                    handleInnerValueChange(patchEvent, item._key)\n                                  }\n                                  onBlur={onBlur}\n                                  // We don't want the array item to open onFocus\n                                  onFocus={() => null}\n                                  path={[{_key: item._key}, subTypeField.name]}\n                                  focusPath={[{_key: item._key}, subTypeField.name]}\n                                  parent={item}\n                                  readOnly={readOnly}\n                                  type={subTypeField}\n                                  value={item.value}\n                                  level={props.level + 1}\n                                  markers={[]}\n                                  compareValue={\n                                    props?.compareValue?.find((c) => c._key === item._key)?.value\n                                  }\n                                />\n                              ))}\n                            </Box>\n                          </>\n                        ) : null}\n                      </Flex>\n                    ))}\n                  {presence?.length > 0 ? (\n                    <FieldPresence maxAvatars={1} presence={presence} />\n                  ) : null}\n                  {invalidKeys.includes(item._key) ? (\n                    <FormFieldValidationStatus __unstable_markers={validationMarkers} />\n                  ) : null}\n                  <Button\n                    mode=\"ghost\"\n                    icon={RemoveIcon}\n                    tone=\"critical\"\n                    onClick={() => handleUnsetByKey(item._key)}\n                  />\n                </Flex>\n              </Card>\n            ))}\n          </Stack>\n        </Card>\n      ) : null}\n\n      {languagesOutOfOrder.length > 0 ? (\n        <Button\n          tone=\"caution\"\n          disabled={languagesOutOfOrder.length > languages.length}\n          icon={RestoreIcon}\n          onClick={() => handleRestoreOrder()}\n          text=\"Restore order of languages\"\n        />\n      ) : null}\n\n      {languages.length > 0 ? (\n        <Stack space={2}>\n          {/* No more than 5 columns */}\n          <Grid columns={Math.min(languages.length, 5)} gap={2}>\n            {languages.map((language) => (\n              <Button\n                key={language.id}\n                tone=\"primary\"\n                mode=\"ghost\"\n                fontSize={1}\n                disabled={readOnly || value?.find((item) => item._key === language.id)}\n                text={language.id.toUpperCase()}\n                icon={AddIcon}\n                onClick={() => handleAddLanguage(language.id)}\n              />\n            ))}\n          </Grid>\n          <Button\n            tone=\"primary\"\n            mode=\"ghost\"\n            disabled={readOnly || value?.length >= languages?.length}\n            icon={AddIcon}\n            text={value?.length ? `Add missing languages` : `Add all languages`}\n            onClick={() => handleAddLanguage()}\n          />\n        </Stack>\n      ) : null}\n\n      {showNativeInput ? <FormBuilderInput {...props} type={type} ref={ref} /> : null}\n    </Stack>\n  )\n})\n\nexport default withDocument(LanguageArrayWrapper)\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["schemaExample","name","type","options","languages","id","title","DEFAULT_OPTIONS","showNativeInput","LanguageArrayWrapper","forwardRef","CustomComponent","props","ref","onChange","onBlur","readOnly","presence","markers","value","useUnsetInputComponent","handleAddLanguage","useCallback","languageId","newItems","_key","filter","language","length","find","v","map","languagesInUse","insertions","item","languageIndex","findIndex","l","remainingLanguages","slice","nextLanguageIndex","r","push","splice","insert","PatchEvent","from","setIfMissing","handleUnsetByKey","unset","handleInnerValueChange","patchEvent","inputValue","patches","inputPath","set","handleRestoreOrder","updatedValue","reduce","acc","newIndex","languagesOutOfOrder","useMemo","vIndex","Boolean","languagesAreValid","every","JSON","stringify","validationMarkers","mark","invalidKeys","path","flat","includes","undefined","of","subType","fields","width","subTypeField","level","compareValue","RemoveIcon","RestoreIcon","Math","min","toUpperCase","AddIcon","withDocument"],"sources":["../../src/LanguageArray/index.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo} from 'react'\nimport {Code, Text, Card, Label, Box, Stack, Button, Grid, Flex} from '@sanity/ui'\nimport {withDocument} from 'part:@sanity/form-builder'\nimport {PatchEvent, setIfMissing, insert, unset, set} from '@sanity/form-builder/PatchEvent'\nimport {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'\nimport {FormFieldValidationStatus} from '@sanity/base/components'\nimport {FieldPresence} from '@sanity/base/presence'\nimport {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'\n\nimport ValueInput from './ValueInput'\nimport {Table, TableCell, TableRow} from './Table'\nimport {useUnsetInputComponent} from '../hooks/useUnsetInputComponent'\n\nconst schemaExample = {\n  name: 'title',\n  type: 'localisedArray',\n  options: {\n    languages: [\n      {id: 'en', title: 'English'},\n      {id: 'no', title: 'Norsk'},\n    ],\n  },\n}\n\ntype Value = {\n  _key: string\n  value?: string\n}\n\ntype Language = {\n  id: string\n  title: string\n}\n\ntype Options = {\n  languages: Language[]\n  showNativeInput: boolean\n}\n\nconst DEFAULT_OPTIONS = {\n  languages: [],\n  showNativeInput: false,\n}\n\nconst LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {\n  const {onChange, onBlur, readOnly, presence, markers} = props\n  const value: Value[] = props?.value\n\n  // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop\n  const type = useUnsetInputComponent(props.type)\n  const options: Options = type?.options ?? DEFAULT_OPTIONS\n  const {languages, showNativeInput} = options\n\n  const handleAddLanguage = useCallback(\n    (languageId?: string) => {\n      // Create new items\n      const newItems = languageId\n        ? // Just one for this language\n          [{_key: languageId}]\n        : // Or one for every missing language\n          languages\n            .filter((language) =>\n              value?.length ? !value.find((v) => v._key === language.id) : true\n            )\n            .map((language) => ({_key: language.id}))\n\n      // Insert new items in the correct order\n      const languagesInUse = value?.length ? value.map((v) => v) : []\n\n      const insertions = newItems.map((item) => {\n        // What's the original index of this language?\n        const languageIndex = languages.findIndex((l) => item._key === l.id)\n\n        // What languages are there beyond that index?\n        const remainingLanguages = languages.slice(languageIndex + 1)\n\n        // So what is the index in the current value array of the next language in the language array?\n        const nextLanguageIndex = languagesInUse.findIndex((l) =>\n          remainingLanguages.find((r) => r.id === l._key)\n        )\n\n        // Keep local state up to date incase multiple insertions are being made\n        if (nextLanguageIndex < 0) {\n          languagesInUse.push(item)\n        } else {\n          languagesInUse.splice(nextLanguageIndex, 0, item)\n        }\n\n        return nextLanguageIndex < 0\n          ? // No next language (-1), add to end of array\n            insert([item], 'after', [nextLanguageIndex])\n          : // Next language found, insert before that\n            insert([item], 'before', [nextLanguageIndex])\n      })\n\n      onChange(PatchEvent.from(setIfMissing([]), ...insertions))\n    },\n    [languages, onChange, value]\n  )\n\n  const handleUnsetByKey = useCallback(\n    (_key) => {\n      onChange(PatchEvent.from(unset([{_key}])))\n    },\n    [onChange]\n  )\n\n  const handleInnerValueChange = useCallback(\n    (patchEvent: PatchEvent, _key: string) => {\n      const inputValue = patchEvent.patches[0]?.value\n      const inputPath = [{_key}, `value`]\n\n      onChange(PatchEvent.from(inputValue ? set(inputValue, inputPath) : unset(inputPath)))\n    },\n    [onChange]\n  )\n\n  // TODO: This is lazy, reordering and re-setting the whole array – it should be surgical\n  const handleRestoreOrder = useCallback(() => {\n    // Create a new value array in the correct order\n    const updatedValue = value.reduce((acc, v) => {\n      const newIndex = languages.findIndex((l) => l.id === v._key)\n\n      acc[newIndex] = v\n\n      return acc\n    }, [])\n\n    onChange(PatchEvent.from(unset(), set(updatedValue)))\n  }, [languages, onChange, value])\n\n  // Check languages are in the correct order\n  const languagesOutOfOrder = useMemo(() => {\n    if (!value?.length) {\n      return []\n    }\n\n    const languagesInUse = languages.filter((l) => value.find((v) => v._key === l.id))\n\n    return value\n      .map((v, vIndex) => (vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v))\n      .filter(Boolean)\n  }, [value, languages])\n\n  // Check options are supplied and valid\n  const languagesAreValid = useMemo(\n    () => languages?.length && languages.every((item) => item.id && item.title),\n    [languages]\n  )\n\n  if (!languagesAreValid) {\n    return (\n      <Card tone=\"caution\" border radius={2} padding={3}>\n        <Stack space={4}>\n          <Text>\n            An array of language objects must be passed into the <code>{type.name}</code> field as\n            options, each with an <code>id</code> and <code>title</code> field. Example:\n          </Text>\n          <Card padding={2} border radius={2}>\n            <Code size={1} language=\"javascript\">\n              {JSON.stringify(schemaExample, null, 2)}\n            </Code>\n          </Card>\n        </Stack>\n      </Card>\n    )\n  }\n\n  const validationMarkers = markers?.length\n    ? markers.filter((mark) => mark.type === `validation`)\n    : []\n  const invalidKeys = validationMarkers\n    .map((mark) => mark.path)\n    .flat()\n    .map((item) => item._key)\n\n  return (\n    <Stack space={3}>\n      <Box>\n        <Text size={1} weight=\"bold\">\n          {type?.title ?? type.name}\n        </Text>\n      </Box>\n      {/* Loop over the values */}\n      {value?.length > 0 ? (\n        <Card>\n          <Table>\n            <tbody>\n              {value.map((item) => (\n                <TableRow\n                  key={item._key}\n                  tone={\n                    // TODO: Move this logic somewhere else\n                    invalidKeys.includes(item._key)\n                      ? `critical`\n                      : undefined || languagesOutOfOrder.find((l) => l._key === item._key)\n                      ? `caution`\n                      : undefined\n                  }\n                >\n                  {/* To render each individual field in this type */}\n                  {type?.of?.length > 0 &&\n                    type?.of.map((subType) => (\n                      <>\n                        {subType?.fields?.length > 0 ? (\n                          <>\n                            <TableCell>\n                              <Box paddingRight={2}>\n                                <Label muted size={1}>\n                                  {item._key}\n                                </Label>\n                              </Box>\n                            </TableCell>\n                            <TableCell paddingRight={2} style={{width: `100%`}}>\n                              {/* There _should_ only be one field */}\n                              {subType.fields.map((subTypeField) => (\n                                <ValueInput\n                                  key={subTypeField.name}\n                                  onChange={(patchEvent) =>\n                                    handleInnerValueChange(patchEvent, item._key)\n                                  }\n                                  onBlur={onBlur}\n                                  // We don't want the array item to open onFocus\n                                  onFocus={() => null}\n                                  path={[{_key: item._key}, subTypeField.name]}\n                                  // focusPath={[{_key: item._key}, subTypeField.name]}\n                                  parent={item}\n                                  readOnly={readOnly}\n                                  type={subTypeField}\n                                  value={item.value}\n                                  level={props.level + 1}\n                                  markers={[]}\n                                  compareValue={props.compareValue}\n                                />\n                              ))}\n                            </TableCell>\n                          </>\n                        ) : null}\n                      </>\n                    ))}\n\n                  <TableCell>\n                    <Flex align=\"center\" justify=\"flex-end\" gap={3}>\n                      {presence?.length > 0 ? (\n                        <FieldPresence maxAvatars={1} presence={presence} />\n                      ) : null}\n                      {invalidKeys.includes(item._key) ? (\n                        <Box paddingLeft={2}>\n                          <FormFieldValidationStatus __unstable_markers={validationMarkers} />\n                        </Box>\n                      ) : null}\n                      <Button\n                        mode=\"ghost\"\n                        icon={RemoveIcon}\n                        tone=\"critical\"\n                        disabled={readOnly}\n                        onClick={() => handleUnsetByKey(item._key)}\n                      />\n                    </Flex>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </tbody>\n          </Table>\n        </Card>\n      ) : null}\n\n      {languagesOutOfOrder.length > 0 ? (\n        <Button\n          tone=\"caution\"\n          disabled={languagesOutOfOrder.length > languages.length}\n          icon={RestoreIcon}\n          onClick={() => handleRestoreOrder()}\n          text=\"Restore order of languages\"\n        />\n      ) : null}\n\n      {languages.length > 0 ? (\n        <Stack space={2}>\n          {/* No more than 5 columns */}\n          <Grid columns={Math.min(languages.length, 5)} gap={2}>\n            {languages.map((language) => (\n              <Button\n                key={language.id}\n                tone=\"primary\"\n                mode=\"ghost\"\n                fontSize={1}\n                disabled={readOnly || value?.find((item) => item._key === language.id)}\n                text={language.id.toUpperCase()}\n                icon={AddIcon}\n                onClick={() => handleAddLanguage(language.id)}\n              />\n            ))}\n          </Grid>\n          <Button\n            tone=\"primary\"\n            mode=\"ghost\"\n            disabled={readOnly || value?.length >= languages?.length}\n            icon={AddIcon}\n            text={value?.length ? `Add missing languages` : `Add all languages`}\n            onClick={() => handleAddLanguage()}\n          />\n        </Stack>\n      ) : null}\n\n      {showNativeInput ? <FormBuilderInput {...props} type={type} ref={ref} /> : null}\n    </Stack>\n  )\n})\n\nexport default withDocument(LanguageArrayWrapper)\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,aAAa,GAAG;EACpBC,IAAI,EAAE,OADc;EAEpBC,IAAI,EAAE,gBAFc;EAGpBC,OAAO,EAAE;IACPC,SAAS,EAAE,CACT;MAACC,EAAE,EAAE,IAAL;MAAWC,KAAK,EAAE;IAAlB,CADS,EAET;MAACD,EAAE,EAAE,IAAL;MAAWC,KAAK,EAAE;IAAlB,CAFS;EADJ;AAHW,CAAtB;AA0BA,IAAMC,eAAe,GAAG;EACtBH,SAAS,EAAE,EADW;EAEtBI,eAAe,EAAE;AAFK,CAAxB;AAKA,IAAMC,oBAAoB,gBAAG,IAAAC,iBAAA,EAAW,SAASC,eAAT,CAAyBC,KAAzB,EAAgCC,GAAhC,EAAqC;EAAA;;EAC3E,IAAOC,QAAP,GAAwDF,KAAxD,CAAOE,QAAP;EAAA,IAAiBC,MAAjB,GAAwDH,KAAxD,CAAiBG,MAAjB;EAAA,IAAyBC,QAAzB,GAAwDJ,KAAxD,CAAyBI,QAAzB;EAAA,IAAmCC,QAAnC,GAAwDL,KAAxD,CAAmCK,QAAnC;EAAA,IAA6CC,OAA7C,GAAwDN,KAAxD,CAA6CM,OAA7C;EACA,IAAMC,KAAc,GAAGP,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEO,KAA9B,CAF2E,CAI3E;;EACA,IAAMjB,IAAI,GAAG,IAAAkB,8CAAA,EAAuBR,KAAK,CAACV,IAA7B,CAAb;EACA,IAAMC,OAAgB,oBAAGD,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEC,OAAT,yDAAoBI,eAA1C;EACA,IAAOH,SAAP,GAAqCD,OAArC,CAAOC,SAAP;EAAA,IAAkBI,eAAlB,GAAqCL,OAArC,CAAkBK,eAAlB;EAEA,IAAMa,iBAAiB,GAAG,IAAAC,kBAAA,EACvBC,UAAD,IAAyB;IACvB;IACA,IAAMC,QAAQ,GAAGD,UAAU,GACvB;IACA,CAAC;MAACE,IAAI,EAAEF;IAAP,CAAD,CAFuB,GAGvB;IACAnB,SAAS,CACNsB,MADH,CACWC,QAAD,IACNR,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAES,MAAP,GAAgB,CAACT,KAAK,CAACU,IAAN,CAAYC,CAAD,IAAOA,CAAC,CAACL,IAAF,KAAWE,QAAQ,CAACtB,EAAtC,CAAjB,GAA6D,IAFjE,EAIG0B,GAJH,CAIQJ,QAAD,KAAe;MAACF,IAAI,EAAEE,QAAQ,CAACtB;IAAhB,CAAf,CAJP,CAJJ,CAFuB,CAYvB;;IACA,IAAM2B,cAAc,GAAGb,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAES,MAAP,GAAgBT,KAAK,CAACY,GAAN,CAAWD,CAAD,IAAOA,CAAjB,CAAhB,GAAsC,EAA7D;IAEA,IAAMG,UAAU,GAAGT,QAAQ,CAACO,GAAT,CAAcG,IAAD,IAAU;MACxC;MACA,IAAMC,aAAa,GAAG/B,SAAS,CAACgC,SAAV,CAAqBC,CAAD,IAAOH,IAAI,CAACT,IAAL,KAAcY,CAAC,CAAChC,EAA3C,CAAtB,CAFwC,CAIxC;;MACA,IAAMiC,kBAAkB,GAAGlC,SAAS,CAACmC,KAAV,CAAgBJ,aAAa,GAAG,CAAhC,CAA3B,CALwC,CAOxC;;MACA,IAAMK,iBAAiB,GAAGR,cAAc,CAACI,SAAf,CAA0BC,CAAD,IACjDC,kBAAkB,CAACT,IAAnB,CAAyBY,CAAD,IAAOA,CAAC,CAACpC,EAAF,KAASgC,CAAC,CAACZ,IAA1C,CADwB,CAA1B,CARwC,CAYxC;;MACA,IAAIe,iBAAiB,GAAG,CAAxB,EAA2B;QACzBR,cAAc,CAACU,IAAf,CAAoBR,IAApB;MACD,CAFD,MAEO;QACLF,cAAc,CAACW,MAAf,CAAsBH,iBAAtB,EAAyC,CAAzC,EAA4CN,IAA5C;MACD;;MAED,OAAOM,iBAAiB,GAAG,CAApB,GACH;MACA,IAAAI,kBAAA,EAAO,CAACV,IAAD,CAAP,EAAe,OAAf,EAAwB,CAACM,iBAAD,CAAxB,CAFG,GAGH;MACA,IAAAI,kBAAA,EAAO,CAACV,IAAD,CAAP,EAAe,QAAf,EAAyB,CAACM,iBAAD,CAAzB,CAJJ;IAKD,CAxBkB,CAAnB;IA0BA1B,QAAQ,CAAC+B,sBAAA,CAAWC,IAAX,CAAgB,IAAAC,wBAAA,EAAa,EAAb,CAAhB,EAAkC,GAAGd,UAArC,CAAD,CAAR;EACD,CA3CuB,EA4CxB,CAAC7B,SAAD,EAAYU,QAAZ,EAAsBK,KAAtB,CA5CwB,CAA1B;EA+CA,IAAM6B,gBAAgB,GAAG,IAAA1B,kBAAA,EACtBG,IAAD,IAAU;IACRX,QAAQ,CAAC+B,sBAAA,CAAWC,IAAX,CAAgB,IAAAG,iBAAA,EAAM,CAAC;MAACxB;IAAD,CAAD,CAAN,CAAhB,CAAD,CAAR;EACD,CAHsB,EAIvB,CAACX,QAAD,CAJuB,CAAzB;EAOA,IAAMoC,sBAAsB,GAAG,IAAA5B,kBAAA,EAC7B,CAAC6B,UAAD,EAAyB1B,IAAzB,KAA0C;IAAA;;IACxC,IAAM2B,UAAU,2BAAGD,UAAU,CAACE,OAAX,CAAmB,CAAnB,CAAH,yDAAG,qBAAuBlC,KAA1C;IACA,IAAMmC,SAAS,GAAG,CAAC;MAAC7B;IAAD,CAAD,UAAlB;IAEAX,QAAQ,CAAC+B,sBAAA,CAAWC,IAAX,CAAgBM,UAAU,GAAG,IAAAG,eAAA,EAAIH,UAAJ,EAAgBE,SAAhB,CAAH,GAAgC,IAAAL,iBAAA,EAAMK,SAAN,CAA1D,CAAD,CAAR;EACD,CAN4B,EAO7B,CAACxC,QAAD,CAP6B,CAA/B,CA/D2E,CAyE3E;;EACA,IAAM0C,kBAAkB,GAAG,IAAAlC,kBAAA,EAAY,MAAM;IAC3C;IACA,IAAMmC,YAAY,GAAGtC,KAAK,CAACuC,MAAN,CAAa,CAACC,GAAD,EAAM7B,CAAN,KAAY;MAC5C,IAAM8B,QAAQ,GAAGxD,SAAS,CAACgC,SAAV,CAAqBC,CAAD,IAAOA,CAAC,CAAChC,EAAF,KAASyB,CAAC,CAACL,IAAtC,CAAjB;MAEAkC,GAAG,CAACC,QAAD,CAAH,GAAgB9B,CAAhB;MAEA,OAAO6B,GAAP;IACD,CANoB,EAMlB,EANkB,CAArB;IAQA7C,QAAQ,CAAC+B,sBAAA,CAAWC,IAAX,CAAgB,IAAAG,iBAAA,GAAhB,EAAyB,IAAAM,eAAA,EAAIE,YAAJ,CAAzB,CAAD,CAAR;EACD,CAX0B,EAWxB,CAACrD,SAAD,EAAYU,QAAZ,EAAsBK,KAAtB,CAXwB,CAA3B,CA1E2E,CAuF3E;;EACA,IAAM0C,mBAAmB,GAAG,IAAAC,cAAA,EAAQ,MAAM;IACxC,IAAI,EAAC3C,KAAD,aAACA,KAAD,eAACA,KAAK,CAAES,MAAR,CAAJ,EAAoB;MAClB,OAAO,EAAP;IACD;;IAED,IAAMI,cAAc,GAAG5B,SAAS,CAACsB,MAAV,CAAkBW,CAAD,IAAOlB,KAAK,CAACU,IAAN,CAAYC,CAAD,IAAOA,CAAC,CAACL,IAAF,KAAWY,CAAC,CAAChC,EAA/B,CAAxB,CAAvB;IAEA,OAAOc,KAAK,CACTY,GADI,CACA,CAACD,CAAD,EAAIiC,MAAJ,KAAgBA,MAAM,KAAK/B,cAAc,CAACI,SAAf,CAA0BC,CAAD,IAAOA,CAAC,CAAChC,EAAF,KAASyB,CAAC,CAACL,IAA3C,CAAX,GAA8D,IAA9D,GAAqEK,CADrF,EAEJJ,MAFI,CAEGsC,OAFH,CAAP;EAGD,CAV2B,EAUzB,CAAC7C,KAAD,EAAQf,SAAR,CAVyB,CAA5B,CAxF2E,CAoG3E;;EACA,IAAM6D,iBAAiB,GAAG,IAAAH,cAAA,EACxB,MAAM,CAAA1D,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEwB,MAAX,KAAqBxB,SAAS,CAAC8D,KAAV,CAAiBhC,IAAD,IAAUA,IAAI,CAAC7B,EAAL,IAAW6B,IAAI,CAAC5B,KAA1C,CADH,EAExB,CAACF,SAAD,CAFwB,CAA1B;;EAKA,IAAI,CAAC6D,iBAAL,EAAwB;IACtB,oBACE,6BAAC,QAAD;MAAM,IAAI,EAAC,SAAX;MAAqB,MAAM,MAA3B;MAA4B,MAAM,EAAE,CAApC;MAAuC,OAAO,EAAE;IAAhD,gBACE,6BAAC,SAAD;MAAO,KAAK,EAAE;IAAd,gBACE,6BAAC,QAAD,8EACuD,2CAAO/D,IAAI,CAACD,IAAZ,CADvD,mDAEwB,gDAFxB,wBAE4C,mDAF5C,qBADF,eAKE,6BAAC,QAAD;MAAM,OAAO,EAAE,CAAf;MAAkB,MAAM,MAAxB;MAAyB,MAAM,EAAE;IAAjC,gBACE,6BAAC,QAAD;MAAM,IAAI,EAAE,CAAZ;MAAe,QAAQ,EAAC;IAAxB,GACGkE,IAAI,CAACC,SAAL,CAAepE,aAAf,EAA8B,IAA9B,EAAoC,CAApC,CADH,CADF,CALF,CADF,CADF;EAeD;;EAED,IAAMqE,iBAAiB,GAAGnD,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEU,MAAT,GACtBV,OAAO,CAACQ,MAAR,CAAgB4C,IAAD,IAAUA,IAAI,CAACpE,IAAL,iBAAzB,CADsB,GAEtB,EAFJ;EAGA,IAAMqE,WAAW,GAAGF,iBAAiB,CAClCtC,GADiB,CACZuC,IAAD,IAAUA,IAAI,CAACE,IADF,EAEjBC,IAFiB,GAGjB1C,GAHiB,CAGZG,IAAD,IAAUA,IAAI,CAACT,IAHF,CAApB;EAKA,oBACE,6BAAC,SAAD;IAAO,KAAK,EAAE;EAAd,gBACE,6BAAC,OAAD,qBACE,6BAAC,QAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAC;EAAtB,kBACGvB,IADH,aACGA,IADH,uBACGA,IAAI,CAAEI,KADT,qDACkBJ,IAAI,CAACD,IADvB,CADF,CADF,EAOG,CAAAkB,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAES,MAAP,IAAgB,CAAhB,gBACC,6BAAC,QAAD,qBACE,6BAAC,YAAD,qBACE,4CACGT,KAAK,CAACY,GAAN,CAAWG,IAAD;IAAA;;IAAA,oBACT,6BAAC,eAAD;MACE,GAAG,EAAEA,IAAI,CAACT,IADZ;MAEE,IAAI,EACF;MACA8C,WAAW,CAACG,QAAZ,CAAqBxC,IAAI,CAACT,IAA1B,iBAEIkD,SAAS,IAAId,mBAAmB,CAAChC,IAApB,CAA0BQ,CAAD,IAAOA,CAAC,CAACZ,IAAF,KAAWS,IAAI,CAACT,IAAhD,CAAb,eAEAkD;IARR,GAYG,CAAAzE,IAAI,SAAJ,IAAAA,IAAI,WAAJ,wBAAAA,IAAI,CAAE0E,EAAN,sDAAUhD,MAAV,IAAmB,CAAnB,KACC1B,IADD,aACCA,IADD,uBACCA,IAAI,CAAE0E,EAAN,CAAS7C,GAAT,CAAc8C,OAAD;MAAA;;MAAA,oBACX,4DACG,CAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,+BAAAA,OAAO,CAAEC,MAAT,oEAAiBlD,MAAjB,IAA0B,CAA1B,gBACC,yEACE,6BAAC,gBAAD,qBACE,6BAAC,OAAD;QAAK,YAAY,EAAE;MAAnB,gBACE,6BAAC,SAAD;QAAO,KAAK,MAAZ;QAAa,IAAI,EAAE;MAAnB,GACGM,IAAI,CAACT,IADR,CADF,CADF,CADF,eAQE,6BAAC,gBAAD;QAAW,YAAY,EAAE,CAAzB;QAA4B,KAAK,EAAE;UAACsD,KAAK;QAAN;MAAnC,GAEGF,OAAO,CAACC,MAAR,CAAe/C,GAAf,CAAoBiD,YAAD,iBAClB,6BAAC,mBAAD;QACE,GAAG,EAAEA,YAAY,CAAC/E,IADpB;QAEE,QAAQ,EAAGkD,UAAD,IACRD,sBAAsB,CAACC,UAAD,EAAajB,IAAI,CAACT,IAAlB,CAH1B;QAKE,MAAM,EAAEV,MALV,CAME;QANF;QAOE,OAAO,EAAE,MAAM,IAPjB;QAQE,IAAI,EAAE,CAAC;UAACU,IAAI,EAAES,IAAI,CAACT;QAAZ,CAAD,EAAoBuD,YAAY,CAAC/E,IAAjC,CARR,CASE;QATF;QAUE,MAAM,EAAEiC,IAVV;QAWE,QAAQ,EAAElB,QAXZ;QAYE,IAAI,EAAEgE,YAZR;QAaE,KAAK,EAAE9C,IAAI,CAACf,KAbd;QAcE,KAAK,EAAEP,KAAK,CAACqE,KAAN,GAAc,CAdvB;QAeE,OAAO,EAAE,EAfX;QAgBE,YAAY,EAAErE,KAAK,CAACsE;MAhBtB,EADD,CAFH,CARF,CADD,GAiCG,IAlCN,CADW;IAAA,CAAb,CADD,CAZH,eAoDE,6BAAC,gBAAD,qBACE,6BAAC,QAAD;MAAM,KAAK,EAAC,QAAZ;MAAqB,OAAO,EAAC,UAA7B;MAAwC,GAAG,EAAE;IAA7C,GACG,CAAAjE,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEW,MAAV,IAAmB,CAAnB,gBACC,6BAAC,uBAAD;MAAe,UAAU,EAAE,CAA3B;MAA8B,QAAQ,EAAEX;IAAxC,EADD,GAEG,IAHN,EAIGsD,WAAW,CAACG,QAAZ,CAAqBxC,IAAI,CAACT,IAA1B,iBACC,6BAAC,OAAD;MAAK,WAAW,EAAE;IAAlB,gBACE,6BAAC,qCAAD;MAA2B,kBAAkB,EAAE4C;IAA/C,EADF,CADD,GAIG,IARN,eASE,6BAAC,UAAD;MACE,IAAI,EAAC,OADP;MAEE,IAAI,EAAEc,iBAFR;MAGE,IAAI,EAAC,UAHP;MAIE,QAAQ,EAAEnE,QAJZ;MAKE,OAAO,EAAE,MAAMgC,gBAAgB,CAACd,IAAI,CAACT,IAAN;IALjC,EATF,CADF,CApDF,CADS;EAAA,CAAV,CADH,CADF,CADF,CADD,GAiFG,IAxFN,EA0FGoC,mBAAmB,CAACjC,MAApB,GAA6B,CAA7B,gBACC,6BAAC,UAAD;IACE,IAAI,EAAC,SADP;IAEE,QAAQ,EAAEiC,mBAAmB,CAACjC,MAApB,GAA6BxB,SAAS,CAACwB,MAFnD;IAGE,IAAI,EAAEwD,kBAHR;IAIE,OAAO,EAAE,MAAM5B,kBAAkB,EAJnC;IAKE,IAAI,EAAC;EALP,EADD,GAQG,IAlGN,EAoGGpD,SAAS,CAACwB,MAAV,GAAmB,CAAnB,gBACC,6BAAC,SAAD;IAAO,KAAK,EAAE;EAAd,gBAEE,6BAAC,QAAD;IAAM,OAAO,EAAEyD,IAAI,CAACC,GAAL,CAASlF,SAAS,CAACwB,MAAnB,EAA2B,CAA3B,CAAf;IAA8C,GAAG,EAAE;EAAnD,GACGxB,SAAS,CAAC2B,GAAV,CAAeJ,QAAD,iBACb,6BAAC,UAAD;IACE,GAAG,EAAEA,QAAQ,CAACtB,EADhB;IAEE,IAAI,EAAC,SAFP;IAGE,IAAI,EAAC,OAHP;IAIE,QAAQ,EAAE,CAJZ;IAKE,QAAQ,EAAEW,QAAQ,KAAIG,KAAJ,aAAIA,KAAJ,uBAAIA,KAAK,CAAEU,IAAP,CAAaK,IAAD,IAAUA,IAAI,CAACT,IAAL,KAAcE,QAAQ,CAACtB,EAA7C,CAAJ,CALpB;IAME,IAAI,EAAEsB,QAAQ,CAACtB,EAAT,CAAYkF,WAAZ,EANR;IAOE,IAAI,EAAEC,cAPR;IAQE,OAAO,EAAE,MAAMnE,iBAAiB,CAACM,QAAQ,CAACtB,EAAV;EARlC,EADD,CADH,CAFF,eAgBE,6BAAC,UAAD;IACE,IAAI,EAAC,SADP;IAEE,IAAI,EAAC,OAFP;IAGE,QAAQ,EAAEW,QAAQ,IAAI,CAAAG,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAES,MAAP,MAAiBxB,SAAjB,aAAiBA,SAAjB,uBAAiBA,SAAS,CAAEwB,MAA5B,CAHxB;IAIE,IAAI,EAAE4D,cAJR;IAKE,IAAI,EAAErE,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAES,MAAP,gDALR;IAME,OAAO,EAAE,MAAMP,iBAAiB;EANlC,EAhBF,CADD,GA0BG,IA9HN,EAgIGb,eAAe,gBAAG,6BAAC,kCAAD,eAAsBI,KAAtB;IAA6B,IAAI,EAAEV,IAAnC;IAAyC,GAAG,EAAEW;EAA9C,GAAH,GAA2D,IAhI7E,CADF;AAoID,CAxQ4B,CAA7B;;eA0Qe,IAAA4E,yBAAA,EAAahF,oBAAb,C"}

package/lib/hooks/useUnsetInputComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUnsetInputComponent.js","names":["useUnsetInputComponent","type","component","React","useMemo","unsetInputComponent","t","inputComponent","undefined","typeOfType"],"sources":["../../src/hooks/useUnsetInputComponent.tsx"],"sourcesContent":["import React, {ReactNode} from 'react'\n\nexport function useUnsetInputComponent(type: unknown, component?: ReactNode) {\n  return React.useMemo(() => unsetInputComponent(type, component), [type, component])\n}\n\nfunction unsetInputComponent(type, component) {\n  const t = {\n    ...type,\n    inputComponent: type.inputComponent === component ? undefined : type.inputComponent,\n  }\n  const typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined\n  return {\n    ...t,\n    type: typeOfType,\n  }\n}\n"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAEO,SAASA,sBAAT,CAAgCC,IAAhC,EAA+CC,SAA/C,EAAsE;EAC3E,OAAOC,cAAA,CAAMC,OAAN,CAAc,MAAMC,mBAAmB,CAACJ,IAAD,EAAOC,SAAP,CAAvC,EAA0D,CAACD,IAAD,EAAOC,SAAP,CAA1D,CAAP;AACD;;AAED,SAASG,mBAAT,CAA6BJ,IAA7B,EAAmCC,SAAnC,EAA8C;EAC5C,IAAMI,CAAC,mCACFL,IADE;IAELM,cAAc,EAAEN,IAAI,CAACM,cAAL,KAAwBL,SAAxB,GAAoCM,SAApC,GAAgDP,IAAI,CAACM;EAFhE,EAAP;;EAIA,IAAME,UAAU,GAAGH,CAAC,CAACL,IAAF,GAASI,mBAAmB,CAACC,CAAC,CAACL,IAAH,EAASC,SAAT,CAA5B,GAAkDM,SAArE;EACA,uCACKF,CADL;IAEEL,IAAI,EAAEQ;EAFR;AAID"}

package/lib/internationalizedArray.js

@@ -26,6 +26,7 @@ function internationalizedArray(config) {
       languages = _config$languages === void 0 ? [] : _config$languages,
       _config$showNativeInp = config.showNativeInput,
       showNativeInput = _config$showNativeInp === void 0 ? false : _config$showNativeInp;
+  var configValidation = Array.isArray(config === null || config === void 0 ? void 0 : config.validation) ? config.validation : [config === null || config === void 0 ? void 0 : config.validation];
   return {
     name,
     title: (_config$title = config === null || config === void 0 ? void 0 : config.title) !== null && _config$title !== void 0 ? _config$title : undefined,
@@ -61,7 +62,7 @@ function internationalizedArray(config) {
 
       }
     }],
-    validation: Rule => Rule.max(languages.length).custom((value, context) => {
+    validation: Rule => [Rule.max(languages.length).custom((value, context) => {
       var languages = context.type.options.languages;
       var nonLanguageKeys = value !== null && value !== void 0 && value.length ? value.filter(item => !languages.find(language => item._key === language.id)) : [];
 
@@ -98,7 +99,7 @@ function internationalizedArray(config) {
       }
 
       return true;
-    })
+    }), ...configValidation]
   };
 }
 //# sourceMappingURL=internationalizedArray.js.map

package/lib/internationalizedArray.js.map

@@ -1 +1 @@
-{"version":3,"file":"internationalizedArray.js","names":["internationalizedArray","config","name","type","languages","showNativeInput","title","undefined","group","hidden","readOnly","inputComponent","LanguageArray","options","of","fields","preview","select","key","prepare","subtitle","toUpperCase","validation","Rule","max","length","custom","value","context","nonLanguageKeys","filter","item","find","language","_key","id","message","paths","map","valuesByLanguage","Boolean","reduce","acc","cur","duplicateValues","Object","values","flat"],"sources":["../src/internationalizedArray.ts"],"sourcesContent":["import {ArrayConfig, Value} from './types'\nimport LanguageArray from './LanguageArray'\n\nexport function internationalizedArray(config: ArrayConfig) {\n  const {name = `title`, type = `string`, languages = [], showNativeInput = false} = config\n\n  return {\n    name,\n    title: config?.title ?? undefined,\n    group: config?.group ?? undefined,\n    hidden: config?.hidden ?? undefined,\n    readOnly: config?.readOnly ?? undefined,\n    type: 'array',\n    inputComponent: LanguageArray,\n    options: {\n      languages,\n      showNativeInput,\n    },\n    of: [\n      {\n        type: 'object',\n        fields: [{name: 'value', type}],\n        preview: {\n          select: {title: 'value', key: '_key'},\n          prepare({title, key}) {\n            return {\n              title,\n              subtitle: key.toUpperCase(),\n            }\n          },\n        },\n      },\n    ],\n    validation: (Rule) =>\n      Rule.max(languages.length).custom((value: Value[], context) => {\n        const {languages} = context.type.options\n\n        const nonLanguageKeys = value?.length\n          ? value.filter((item) => !languages.find((language) => item._key === language.id))\n          : []\n\n        if (nonLanguageKeys.length) {\n          return {\n            message: `Array item keys must be valid languages registered to the field type`,\n            paths: nonLanguageKeys.map((item) => ({_key: item._key})),\n          }\n        }\n\n        // Ensure there's no duplicate `language` fields\n        const valuesByLanguage = value?.length\n          ? value\n              .filter((item) => Boolean(item?._key))\n              .reduce((acc, cur) => {\n                if (acc[cur._key]) {\n                  return {...acc, [cur._key]: [...acc[cur._key], cur]}\n                }\n\n                return {\n                  ...acc,\n                  [cur._key]: [cur],\n                }\n              }, {})\n          : {}\n\n        const duplicateValues = Object.values(valuesByLanguage)\n          .filter((item) => item?.length > 1)\n          .flat()\n\n        if (duplicateValues.length) {\n          return {\n            message: 'There can only be one field per language',\n            paths: duplicateValues.map((item) => ({_key: item._key})),\n          }\n        }\n\n        return true\n      }),\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"internationalizedArray.js","names":["internationalizedArray","config","name","type","languages","showNativeInput","configValidation","Array","isArray","validation","title","undefined","group","hidden","readOnly","inputComponent","LanguageArray","options","of","fields","preview","select","key","prepare","subtitle","toUpperCase","Rule","max","length","custom","value","context","nonLanguageKeys","filter","item","find","language","_key","id","message","paths","map","valuesByLanguage","Boolean","reduce","acc","cur","duplicateValues","Object","values","flat"],"sources":["../src/internationalizedArray.ts"],"sourcesContent":["import {ArrayConfig, Value} from './types'\nimport LanguageArray from './LanguageArray'\n\nexport function internationalizedArray(config: ArrayConfig) {\n  const {name = `title`, type = `string`, languages = [], showNativeInput = false} = config\n  const configValidation = Array.isArray(config?.validation)\n    ? config.validation\n    : [config?.validation]\n\n  return {\n    name,\n    title: config?.title ?? undefined,\n    group: config?.group ?? undefined,\n    hidden: config?.hidden ?? undefined,\n    readOnly: config?.readOnly ?? undefined,\n    type: 'array',\n    inputComponent: LanguageArray,\n    options: {\n      languages,\n      showNativeInput,\n    },\n    of: [\n      {\n        type: 'object',\n        fields: [{name: 'value', type}],\n        preview: {\n          select: {title: 'value', key: '_key'},\n          prepare({title, key}) {\n            return {\n              title,\n              subtitle: key.toUpperCase(),\n            }\n          },\n        },\n      },\n    ],\n    validation: (Rule) => [\n      Rule.max(languages.length).custom((value: Value[], context) => {\n        const {languages} = context.type.options\n\n        const nonLanguageKeys = value?.length\n          ? value.filter((item) => !languages.find((language) => item._key === language.id))\n          : []\n\n        if (nonLanguageKeys.length) {\n          return {\n            message: `Array item keys must be valid languages registered to the field type`,\n            paths: nonLanguageKeys.map((item) => ({_key: item._key})),\n          }\n        }\n\n        // Ensure there's no duplicate `language` fields\n        const valuesByLanguage = value?.length\n          ? value\n              .filter((item) => Boolean(item?._key))\n              .reduce((acc, cur) => {\n                if (acc[cur._key]) {\n                  return {...acc, [cur._key]: [...acc[cur._key], cur]}\n                }\n\n                return {\n                  ...acc,\n                  [cur._key]: [cur],\n                }\n              }, {})\n          : {}\n\n        const duplicateValues = Object.values(valuesByLanguage)\n          .filter((item) => item?.length > 1)\n          .flat()\n\n        if (duplicateValues.length) {\n          return {\n            message: 'There can only be one field per language',\n            paths: duplicateValues.map((item) => ({_key: item._key})),\n          }\n        }\n\n        return true\n      }),\n      ...configValidation,\n    ],\n  }\n}\n"],"mappings":"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"}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["export type ArrayConfig = Options & {\n  name: string\n  type: 'string' | 'number' | 'boolean' | 'text'\n  title?: string\n  group?: string\n  hidden?: boolean | (() => boolean)\n  readOnly?: boolean | (() => boolean)\n}\n\nexport type Value = {\n  _key: string\n  value?: string\n}\n\nexport type Language = {\n  id: string\n  title: string\n}\n\nexport type Options = {\n  languages: Language[]\n  showNativeInput: boolean\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["import {Rule} from '@sanity/types'\n\nexport type ArrayConfig = Options & {\n  name: string\n  type: 'string' | 'number' | 'boolean' | 'text'\n  title?: string\n  group?: string\n  hidden?: boolean | (() => boolean)\n  readOnly?: boolean | (() => boolean)\n  validation?: Rule | Rule[]\n}\n\nexport type Value = {\n  _key: string\n  value?: string\n}\n\nexport type Language = {\n  id: string\n  title: string\n}\n\nexport type Options = {\n  languages: Language[]\n  showNativeInput: boolean\n}\n"],"mappings":""}

package/migrations/transformObjectToArray.js

@@ -0,0 +1,94 @@
+/* eslint-disable no-console */
+import sanityClient from 'part:@sanity/base/client'
+
+const client = sanityClient.withConfig({apiVersion: `2022-07-14`})
+
+// Run this script with: `sanity exec --with-user-token migrations/transformObjectToArray.js`
+
+// This example shows how you may write a migration script that migrates an internationalized object
+// To an internationalized array
+
+// Transforms fields from:
+// "greeting" {
+//   "en": "hello",
+//   "fr": "bonjour"
+// }
+
+// To:
+// "greeting": [
+//   { "_key": "en", "value": "hello" },
+//   { "_key": "fr", "value": "bonjour" },
+// ]
+
+// This will migrate documents in batches of 100 and continue patching until no more documents are
+// returned from the query.
+//
+// This script can safely be run, even if documents are being concurrently modified by others.
+// If a document gets modified in the time between fetch => submit patch, this script will fail,
+// but can safely be re-run multiple times until it eventually runs out of documents to migrate.
+
+// A few things to note:
+// - This script will exit if any of the mutations fail due to a revision mismatch (which means the
+//   document was edited between fetch => update)
+// - The query must eventually return an empty set, or else this script will continue indefinitely
+
+// Fetching documents that matches the precondition for the migration.
+// NOTE: This query should eventually return an empty set of documents to mark the migration
+// as complete
+
+const TYPE = `presenter`
+const FIELD_NAME = `title`
+
+const fetchDocuments = () =>
+  client.fetch(
+    `*[_type == $type 
+        && defined(${FIELD_NAME}) 
+        && count(${FIELD_NAME}) == null
+    ][0...100] {_id, _rev, ${FIELD_NAME}}`,
+    {type: TYPE}
+  )
+
+const buildPatches = (docs) =>
+  docs.map((doc) => ({
+    id: doc._id,
+    patch: {
+      set: {
+        // Convert existing object to array
+        [FIELD_NAME]: Object.keys(doc[FIELD_NAME])
+          .filter((key) => key !== '_type')
+          .map((key) => ({
+            _key: key,
+            value: doc[FIELD_NAME][key],
+          })),
+      },
+      // this will cause the migration to fail if any of the documents has been
+      // modified since it was fetched.
+      ifRevisionID: doc._rev,
+    },
+  }))
+
+const createTransaction = (patches) =>
+  patches.reduce((tx, patch) => tx.patch(patch.id, patch.patch), client.transaction())
+
+const commitTransaction = (tx) => tx.commit()
+
+const migrateNextBatch = async () => {
+  const documents = await fetchDocuments()
+  const patches = buildPatches(documents)
+  if (patches.length === 0) {
+    console.log('No more documents to migrate!')
+    return null
+  }
+  console.log(
+    `Migrating batch:\n %s`,
+    patches.map((patch) => `${patch.id} => ${JSON.stringify(patch.patch)}`).join('\n')
+  )
+  const transaction = createTransaction(patches)
+  await commitTransaction(transaction)
+  return migrateNextBatch()
+}
+
+migrateNextBatch().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "Store localised fields in an array to save on attributes",
   "main": "lib/index.js",
   "scripts": {
@@ -30,7 +30,8 @@
   "license": "MIT",
   "dependencies": {
     "@sanity/icons": "^1.3.1",
-    "@sanity/ui": "^0.37.9"
+    "@sanity/ui": "^0.37.9",
+    "styled-components": "^5.3.5"
   },
   "peerDependencies": {
     "@sanity/base": "^2.30.1",

package/src/LanguageArray/Table.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Box, BoxProps, Card, CardProps} from '@sanity/ui'
+
+// Wrappers required because of bug with passing down "as" prop
+// https://github.com/styled-components/styled-components/issues/2449
+
+// Table
+const TableWrapper = (props = {}) => {
+  return <Box as="table" {...props} />
+}
+
+const StyledTable = styled(TableWrapper)(
+  () =>
+    css`
+      display: table;
+      width: 100%;
+
+      &:not([hidden]) {
+        display: table;
+      }
+    `
+)
+
+type TableProps = BoxProps & {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export function Table(props: TableProps) {
+  const {children, ...rest} = props
+
+  return <StyledTable {...rest}>{children}</StyledTable>
+}
+
+// Row
+const RowWrapper = (props = {}) => {
+  return <Card as="tr" {...props} />
+}
+
+const StyledRow = styled(RowWrapper)(
+  () =>
+    css`
+      display: table-row;
+
+      &:not([hidden]) {
+        display: table-row;
+      }
+    `
+)
+
+type TableRowProps = CardProps & {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export function TableRow(props: TableRowProps) {
+  const {children, ...rest} = props
+
+  return <StyledRow {...rest}>{children}</StyledRow>
+}
+
+// Cell
+const CellWrapper = (props = {}) => {
+  return <Box as="td" {...props} />
+}
+
+const StyledCell = styled(CellWrapper)(
+  () =>
+    css`
+      display: table-cell;
+
+      &:not([hidden]) {
+        display: table-cell;
+      }
+    `
+)
+
+type TableCellProps = BoxProps & {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export function TableCell(props: TableCellProps) {
+  const {children, ...rest} = props
+
+  return <StyledCell {...rest}>{children}</StyledCell>
+}

package/src/LanguageArray/index.tsx

@@ -1,5 +1,5 @@
 import React, {forwardRef, useCallback, useMemo} from 'react'
-import {Code, Text, Card, Label, Flex, Box, Stack, Button, Grid} from '@sanity/ui'
+import {Code, Text, Card, Label, Box, Stack, Button, Grid, Flex} from '@sanity/ui'
 import {withDocument} from 'part:@sanity/form-builder'
 import {PatchEvent, setIfMissing, insert, unset, set} from '@sanity/form-builder/PatchEvent'
 import {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'
@@ -8,7 +8,8 @@ import {FieldPresence} from '@sanity/base/presence'
 import {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'
 
 import ValueInput from './ValueInput'
-import {useUnsetInputComponent} from './useUnsetInputComponent'
+import {Table, TableCell, TableRow} from './Table'
+import {useUnsetInputComponent} from '../hooks/useUnsetInputComponent'
 
 const schemaExample = {
   name: 'title',
@@ -172,7 +173,6 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
     .map((mark) => mark.path)
     .flat()
     .map((item) => item._key)
-  console.log(props)
 
   return (
     <Stack space={3}>
@@ -183,35 +183,37 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
       </Box>
       {/* Loop over the values */}
       {value?.length > 0 ? (
-        <Card padding={1} border radius={1}>
-          <Stack space={1}>
-            {value.map((item) => (
-              <Card
-                paddingY={1}
-                paddingX={2}
-                key={item._key}
-                tone={
-                  // TODO: Move this logic somewhere else
-                  invalidKeys.includes(item._key)
-                    ? `critical`
-                    : undefined || languagesOutOfOrder.find((l) => l._key === item._key)
-                    ? `caution`
-                    : undefined
-                }
-              >
-                <Flex gap={3} align="center">
+        <Card>
+          <Table>
+            <tbody>
+              {value.map((item) => (
+                <TableRow
+                  key={item._key}
+                  tone={
+                    // TODO: Move this logic somewhere else
+                    invalidKeys.includes(item._key)
+                      ? `critical`
+                      : undefined || languagesOutOfOrder.find((l) => l._key === item._key)
+                      ? `caution`
+                      : undefined
+                  }
+                >
                   {/* To render each individual field in this type */}
                   {type?.of?.length > 0 &&
                     type?.of.map((subType) => (
-                      <Flex key={subType.name} flex={1} align="center" gap={2}>
+                      <>
                         {subType?.fields?.length > 0 ? (
                           <>
-                            <Box>
-                              <Label>{item._key}</Label>
-                            </Box>
-                            <Box flex={1}>
+                            <TableCell>
+                              <Box paddingRight={2}>
+                                <Label muted size={1}>
+                                  {item._key}
+                                </Label>
+                              </Box>
+                            </TableCell>
+                            <TableCell paddingRight={2} style={{width: `100%`}}>
                               {/* There _should_ only be one field */}
-                              {subType.fields.map((subTypeField, subTypeFieldIndex) => (
+                              {subType.fields.map((subTypeField) => (
                                 <ValueInput
                                   key={subTypeField.name}
                                   onChange={(patchEvent) =>
@@ -221,39 +223,45 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
                                   // We don't want the array item to open onFocus
                                   onFocus={() => null}
                                   path={[{_key: item._key}, subTypeField.name]}
-                                  focusPath={[{_key: item._key}, subTypeField.name]}
+                                  // focusPath={[{_key: item._key}, subTypeField.name]}
                                   parent={item}
                                   readOnly={readOnly}
                                   type={subTypeField}
                                   value={item.value}
                                   level={props.level + 1}
                                   markers={[]}
-                                  compareValue={
-                                    props?.compareValue?.find((c) => c._key === item._key)?.value
-                                  }
+                                  compareValue={props.compareValue}
                                 />
                               ))}
-                            </Box>
+                            </TableCell>
                           </>
                         ) : null}
-                      </Flex>
+                      </>
                     ))}
-                  {presence?.length > 0 ? (
-                    <FieldPresence maxAvatars={1} presence={presence} />
-                  ) : null}
-                  {invalidKeys.includes(item._key) ? (
-                    <FormFieldValidationStatus __unstable_markers={validationMarkers} />
-                  ) : null}
-                  <Button
-                    mode="ghost"
-                    icon={RemoveIcon}
-                    tone="critical"
-                    onClick={() => handleUnsetByKey(item._key)}
-                  />
-                </Flex>
-              </Card>
-            ))}
-          </Stack>
+
+                  <TableCell>
+                    <Flex align="center" justify="flex-end" gap={3}>
+                      {presence?.length > 0 ? (
+                        <FieldPresence maxAvatars={1} presence={presence} />
+                      ) : null}
+                      {invalidKeys.includes(item._key) ? (
+                        <Box paddingLeft={2}>
+                          <FormFieldValidationStatus __unstable_markers={validationMarkers} />
+                        </Box>
+                      ) : null}
+                      <Button
+                        mode="ghost"
+                        icon={RemoveIcon}
+                        tone="critical"
+                        disabled={readOnly}
+                        onClick={() => handleUnsetByKey(item._key)}
+                      />
+                    </Flex>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </tbody>
+          </Table>
         </Card>
       ) : null}
 

package/src/{LanguageArray/useUnsetInputComponent.ts → hooks/useUnsetInputComponent.tsx}

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, {ReactNode} from 'react'
 
-export function useUnsetInputComponent(type, component) {
+export function useUnsetInputComponent(type: unknown, component?: ReactNode) {
   return React.useMemo(() => unsetInputComponent(type, component), [type, component])
 }
 

package/src/internationalizedArray.ts

@@ -3,6 +3,9 @@ import LanguageArray from './LanguageArray'
 
 export function internationalizedArray(config: ArrayConfig) {
   const {name = `title`, type = `string`, languages = [], showNativeInput = false} = config
+  const configValidation = Array.isArray(config?.validation)
+    ? config.validation
+    : [config?.validation]
 
   return {
     name,
@@ -31,7 +34,7 @@ export function internationalizedArray(config: ArrayConfig) {
         },
       },
     ],
-    validation: (Rule) =>
+    validation: (Rule) => [
       Rule.max(languages.length).custom((value: Value[], context) => {
         const {languages} = context.type.options
 
@@ -75,5 +78,7 @@ export function internationalizedArray(config: ArrayConfig) {
 
         return true
       }),
+      ...configValidation,
+    ],
   }
 }

package/src/types.ts

@@ -1,3 +1,5 @@
+import {Rule} from '@sanity/types'
+
 export type ArrayConfig = Options & {
   name: string
   type: 'string' | 'number' | 'boolean' | 'text'
@@ -5,6 +7,7 @@ export type ArrayConfig = Options & {
   group?: string
   hidden?: boolean | (() => boolean)
   readOnly?: boolean | (() => boolean)
+  validation?: Rule | Rule[]
 }
 
 export type Value = {

package/lib/LanguageArray/useUnsetInputComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useUnsetInputComponent.js","names":["useUnsetInputComponent","type","component","React","useMemo","unsetInputComponent","t","inputComponent","undefined","typeOfType"],"sources":["../../src/LanguageArray/useUnsetInputComponent.ts"],"sourcesContent":["import React from 'react'\n\nexport function useUnsetInputComponent(type, component) {\n  return React.useMemo(() => unsetInputComponent(type, component), [type, component])\n}\n\nfunction unsetInputComponent(type, component) {\n  const t = {\n    ...type,\n    inputComponent: type.inputComponent === component ? undefined : type.inputComponent,\n  }\n  const typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined\n  return {\n    ...t,\n    type: typeOfType,\n  }\n}\n"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAEO,SAASA,sBAAT,CAAgCC,IAAhC,EAAsCC,SAAtC,EAAiD;EACtD,OAAOC,cAAA,CAAMC,OAAN,CAAc,MAAMC,mBAAmB,CAACJ,IAAD,EAAOC,SAAP,CAAvC,EAA0D,CAACD,IAAD,EAAOC,SAAP,CAA1D,CAAP;AACD;;AAED,SAASG,mBAAT,CAA6BJ,IAA7B,EAAmCC,SAAnC,EAA8C;EAC5C,IAAMI,CAAC,mCACFL,IADE;IAELM,cAAc,EAAEN,IAAI,CAACM,cAAL,KAAwBL,SAAxB,GAAoCM,SAApC,GAAgDP,IAAI,CAACM;EAFhE,EAAP;;EAIA,IAAME,UAAU,GAAGH,CAAC,CAACL,IAAF,GAASI,mBAAmB,CAACC,CAAC,CAACL,IAAH,EAASC,SAAT,CAA5B,GAAkDM,SAArE;EACA,uCACKF,CADL;IAEEL,IAAI,EAAEQ;EAFR;AAID"}