sanity-plugin-internationalized-array 0.0.2 → 0.0.5

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,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Row = exports.Cell = void 0;
+exports.Table = Table;
+exports.TableCell = TableCell;
+exports.TableRow = TableRow;
+exports.TableWrapper = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ui = require("@sanity/ui");
+
+var _excluded = ["children"],
+    _excluded2 = ["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 _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); }
+
+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) } })); }
+
+var TableWrapper = (0, _styledComponents.default)(_ui.Box)(() => (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: table;\n    "]))));
+exports.TableWrapper = TableWrapper;
+
+function Table(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(TableWrapper, _extends({
+    as: "table"
+  }, rest), children);
+}
+
+var Row = (0, _styledComponents.default)(_ui.Card)(() => (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: table-row;\n\n      &:not([hidden]) {\n        display: table-row;\n      }\n    "]))));
+exports.Row = Row;
+
+function TableRow(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(Row, _extends({
+    as: "tr"
+  }, rest), children);
+}
+
+var Cell = (0, _styledComponents.default)(_ui.Box)(() => (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: table-cell;\n    "]))));
+exports.Cell = Cell;
+
+function TableCell(props) {
+  var children = props.children,
+      style = props.style;
+  return /*#__PURE__*/_react.default.createElement(Cell, {
+    as: "td",
+    style: style
+  }, children);
+}
+//# sourceMappingURL=Table.js.map

package/lib/LanguageArray/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":["TableWrapper","styled","Box","css","Table","props","children","rest","Row","Card","TableRow","Cell","TableCell","style"],"sources":["../../src/LanguageArray/Table.tsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {Box, Card} from '@sanity/ui'\n\nexport const TableWrapper = styled(Box)(\n  () =>\n    css`\n      display: table;\n    `\n)\n\ntype TableProps = {\n  children: React.ReactNode\n  [key: string]: unknown\n}\n\nexport function Table(props: TableProps) {\n  const {children, ...rest} = props\n\n  return (\n    <TableWrapper as=\"table\" {...rest}>\n      {children}\n    </TableWrapper>\n  )\n}\n\nexport const Row = styled(Card)(\n  () =>\n    css`\n      display: table-row;\n\n      &:not([hidden]) {\n        display: table-row;\n      }\n    `\n)\n\ntype TableRowProps = {\n  children: React.ReactNode\n  [key: string]: unknown\n}\n\nexport function TableRow(props: TableRowProps) {\n  const {children, ...rest} = props\n\n  return (\n    <Row as=\"tr\" {...rest}>\n      {children}\n    </Row>\n  )\n}\n\nexport const Cell = styled(Box)(\n  () =>\n    css`\n      display: table-cell;\n    `\n)\n\ntype TableCellProps = {\n  children: React.ReactNode\n  style?: React.CSSProperties\n}\n\nexport function TableCell(props: TableCellProps) {\n  const {children, style} = props\n\n  return (\n    <Cell as=\"td\" style={style}>\n      {children}\n    </Cell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,YAAY,GAAG,IAAAC,yBAAA,EAAOC,OAAP,EAC1B,UACEC,qBADF,mGAD0B,CAArB;;;AAYA,SAASC,KAAT,CAAeC,KAAf,EAAkC;EACvC,IAAOC,QAAP,GAA4BD,KAA5B,CAAOC,QAAP;EAAA,IAAoBC,IAApB,4BAA4BF,KAA5B;;EAEA,oBACE,6BAAC,YAAD;IAAc,EAAE,EAAC;EAAjB,GAA6BE,IAA7B,GACGD,QADH,CADF;AAKD;;AAEM,IAAME,GAAG,GAAG,IAAAP,yBAAA,EAAOQ,QAAP,EACjB,UACEN,qBADF,0KADiB,CAAZ;;;AAgBA,SAASO,QAAT,CAAkBL,KAAlB,EAAwC;EAC7C,IAAOC,QAAP,GAA4BD,KAA5B,CAAOC,QAAP;EAAA,IAAoBC,IAApB,4BAA4BF,KAA5B;;EAEA,oBACE,6BAAC,GAAD;IAAK,EAAE,EAAC;EAAR,GAAiBE,IAAjB,GACGD,QADH,CADF;AAKD;;AAEM,IAAMK,IAAI,GAAG,IAAAV,yBAAA,EAAOC,OAAP,EAClB,UACEC,qBADF,0GADkB,CAAb;;;AAYA,SAASS,SAAT,CAAmBP,KAAnB,EAA0C;EAC/C,IAAOC,QAAP,GAA0BD,KAA1B,CAAOC,QAAP;EAAA,IAAiBO,KAAjB,GAA0BR,KAA1B,CAAiBQ,KAAjB;EAEA,oBACE,6BAAC,IAAD;IAAM,EAAE,EAAC,IAAT;IAAc,KAAK,EAAEA;EAArB,GACGP,QADH,CADF;AAKD"}

package/lib/LanguageArray/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _sanityPluginNrknoOddUtils = require("@nrk/sanity-plugin-nrkno-odd-utils");
-
 var _ui = require("@sanity/ui");
 
 var _formBuilder = require("part:@sanity/form-builder");
@@ -21,8 +19,14 @@ var _components = require("@sanity/base/components");
 
 var _presence = require("@sanity/base/presence");
 
+var _FormBuilderInput = require("@sanity/form-builder/lib/FormBuilderInput");
+
 var _ValueInput = _interopRequireDefault(require("./ValueInput"));
 
+var _useUnsetInputComponent = require("./useUnsetInputComponent");
+
+var _Table = require("./Table");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -49,7 +53,7 @@ var DEFAULT_OPTIONS = {
   showNativeInput: false
 };
 var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomComponent(props, ref) {
-  var _type$options;
+  var _type$options, _type$title;
 
   var onChange = props.onChange,
       onBlur = props.onBlur,
@@ -58,7 +62,7 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
       markers = props.markers;
   var value = props === null || props === void 0 ? void 0 : props.value; // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop
 
-  var type = (0, _sanityPluginNrknoOddUtils.useUnsetInputComponent)(props.type);
+  var type = (0, _useUnsetInputComponent.useUnsetInputComponent)(props.type);
   var options = (_type$options = type === null || type === void 0 ? void 0 : type.options) !== null && _type$options !== void 0 ? _type$options : DEFAULT_OPTIONS;
   var languages = options.languages,
       showNativeInput = options.showNativeInput;
@@ -150,36 +154,32 @@ 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);
   return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
-    space: 2
-  }, (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 => {
+    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, 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, {
+    return /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
       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
-    }, /*#__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 => /*#__PURE__*/_react.default.createElement(_ValueInput.default, {
+      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, {
+        style: {
+          width: "100%"
+        }
+      }, subType.fields.map((subTypeField, subTypeFieldIndex) => /*#__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
@@ -187,26 +187,28 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
         onFocus: () => null,
         path: [{
           _key: item._key
-        }, subTypeField.name],
+        }, subTypeField.name] // focusPath={[{_key: item._key}, subTypeField.name]}
+        ,
         parent: item,
         readOnly: readOnly,
         type: subTypeField,
         value: item.value,
         level: props.level + 1,
-        markers: []
+        markers: [],
+        compareValue: props.compareValue
       })))) : null);
-    })), (presence === null || presence === void 0 ? void 0 : presence.length) > 0 ? /*#__PURE__*/_react.default.createElement(_presence.FieldPresence, {
+    })), (presence === null || presence === void 0 ? void 0 : presence.length) > 0 ? /*#__PURE__*/_react.default.createElement(_Table.TableCell, null, /*#__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(_Table.TableCell, null, /*#__PURE__*/_react.default.createElement(_components.FormFieldValidationStatus, {
       __unstable_markers: validationMarkers
-    }) : null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    })) : null, /*#__PURE__*/_react.default.createElement(_Table.TableCell, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
       mode: "ghost",
       icon: _icons.RemoveIcon,
       tone: "critical",
       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,
@@ -230,10 +232,12 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
     tone: "primary",
     mode: "ghost",
     disabled: readOnly || (value === null || value === void 0 ? void 0 : value.length) >= (languages === null || languages === void 0 ? void 0 : languages.length),
+    icon: _icons.AddIcon,
     text: value !== null && value !== void 0 && value.length ? "Add missing languages" : "Add all languages",
     onClick: () => handleAddLanguage()
-  })) : null, showNativeInput ? /*#__PURE__*/_react.default.createElement(_sanityPluginNrknoOddUtils.NestedFormBuilder, _extends({}, props, {
-    type: type
+  })) : null, showNativeInput ? /*#__PURE__*/_react.default.createElement(_FormBuilderInput.FormBuilderInput, _extends({}, props, {
+    type: type,
+    ref: ref
   })) : null);
 });
 

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","includes","undefined","of","subType","fields","subTypeField","level","RemoveIcon","RestoreIcon","Math","min","toUpperCase","AddIcon","withDocument"],"sources":["../../src/LanguageArray/index.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo} from 'react'\nimport {useUnsetInputComponent, NestedFormBuilder} from '@nrk/sanity-plugin-nrkno-odd-utils'\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'\n\nimport ValueInput from './ValueInput'\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={2}>\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) => (\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                                  parent={item}\n                                  readOnly={readOnly}\n                                  type={subTypeField}\n                                  value={item.value}\n                                  level={props.level + 1}\n                                  markers={[]}\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            text={value?.length ? `Add missing languages` : `Add all languages`}\n            onClick={() => handleAddLanguage()}\n          />\n        </Stack>\n      ) : null}\n\n      {showNativeInput ? <NestedFormBuilder {...props} type={type} /> : 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","subTypeFieldIndex","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, 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'\nimport {Table, TableCell, TableRow} from './Table'\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                  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                  {/* 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 style={{width: `100%`}}>\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={props.compareValue}\n                                />\n                              ))}\n                            </TableCell>\n                          </>\n                        ) : null}\n                      </>\n                    ))}\n                  {presence?.length > 0 ? (\n                    <TableCell>\n                      <FieldPresence maxAvatars={1} presence={presence} />\n                    </TableCell>\n                  ) : null}\n                  {invalidKeys.includes(item._key) ? (\n                    <TableCell>\n                      <FormFieldValidationStatus __unstable_markers={validationMarkers} />\n                    </TableCell>\n                  ) : null}\n                  <TableCell>\n                    <Button\n                      mode=\"ghost\"\n                      icon={RemoveIcon}\n                      tone=\"critical\"\n                      onClick={() => handleUnsetByKey(item._key)}\n                    />\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":"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"}

package/lib/LanguageArray/useUnsetInputComponent.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUnsetInputComponent = useUnsetInputComponent;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function useUnsetInputComponent(type, component) {
+  return _react.default.useMemo(() => unsetInputComponent(type, component), [type, component]);
+}
+
+function unsetInputComponent(type, component) {
+  var t = _objectSpread(_objectSpread({}, type), {}, {
+    inputComponent: type.inputComponent === component ? undefined : type.inputComponent
+  });
+
+  var typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined;
+  return _objectSpread(_objectSpread({}, t), {}, {
+    type: typeOfType
+  });
+}
+//# sourceMappingURL=useUnsetInputComponent.js.map

package/lib/LanguageArray/useUnsetInputComponent.js.map

@@ -0,0 +1 @@
+{"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"}

package/lib/index.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.internationalizedArray = void 0;
 
 var _internationalizedArray = require("./internationalizedArray");
 
-var _default = _internationalizedArray.internationalizedArray;
-exports.default = _default;
+var internationalizedArray = config => (0, _internationalizedArray.internationalizedArray)(config);
+
+exports.internationalizedArray = internationalizedArray;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["internationalizedArray"],"sources":["../src/index.ts"],"sourcesContent":["import {internationalizedArray} from './internationalizedArray'\n\nexport default internationalizedArray\n"],"mappings":";;;;;;;AAAA;;eAEeA,8C"}
+{"version":3,"file":"index.js","names":["internationalizedArray","config","helperFunction"],"sources":["../src/index.ts"],"sourcesContent":["import {internationalizedArray as helperFunction} from './internationalizedArray'\n\nexport const internationalizedArray = (config) => helperFunction(config)\n"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,sBAAsB,GAAIC,MAAD,IAAY,IAAAC,8CAAA,EAAeD,MAAf,CAA3C"}

package/lib/internationalizedArray.js

@@ -16,6 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function internationalizedArray(config) {
+  var _config$title, _config$group, _config$hidden, _config$readOnly;
+
   var _config$name = config.name,
       name = _config$name === void 0 ? "title" : _config$name,
       _config$type = config.type,
@@ -26,6 +28,10 @@ function internationalizedArray(config) {
       showNativeInput = _config$showNativeInp === void 0 ? false : _config$showNativeInp;
   return {
     name,
+    title: (_config$title = config === null || config === void 0 ? void 0 : config.title) !== null && _config$title !== void 0 ? _config$title : undefined,
+    group: (_config$group = config === null || config === void 0 ? void 0 : config.group) !== null && _config$group !== void 0 ? _config$group : undefined,
+    hidden: (_config$hidden = config === null || config === void 0 ? void 0 : config.hidden) !== null && _config$hidden !== void 0 ? _config$hidden : undefined,
+    readOnly: (_config$readOnly = config === null || config === void 0 ? void 0 : config.readOnly) !== null && _config$readOnly !== void 0 ? _config$readOnly : undefined,
     type: 'array',
     inputComponent: _LanguageArray.default,
     options: {

package/lib/internationalizedArray.js.map

@@ -1 +1 @@
-{"version":3,"file":"internationalizedArray.js","names":["internationalizedArray","config","name","type","languages","showNativeInput","inputComponent","LanguageArray","options","of","fields","preview","select","title","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    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","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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"}

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}\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":["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":""}

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.2",
+  "version": "0.0.5",
   "description": "Store localised fields in an array to save on attributes",
   "main": "lib/index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/sanity-io/sanity-plugin-internationalized-array.git"
+    "url": "git+ssh://git@github.com/SimeonGriggs/sanity-plugin-internationalized-array.git"
   },
   "keywords": [
     "sanity",
@@ -29,9 +29,9 @@
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "dependencies": {
-    "@nrk/sanity-plugin-nrkno-odd-utils": "^1.0.11",
     "@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",
@@ -54,7 +54,7 @@
     "typescript": "^4.7.4"
   },
   "bugs": {
-    "url": "https://github.com/sanity-io/sanity-plugin-internationalized-array/issues"
+    "url": "https://github.com/SimeonGriggs/sanity-plugin-internationalized-array/issues"
   },
-  "homepage": "https://github.com/sanity-io/sanity-plugin-internationalized-array#readme"
+  "homepage": "https://github.com/SimeonGriggs/sanity-plugin-internationalized-array#readme"
 }

package/src/LanguageArray/Table.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Box, Card} from '@sanity/ui'
+
+export const TableWrapper = styled(Box)(
+  () =>
+    css`
+      display: table;
+    `
+)
+
+type TableProps = {
+  children: React.ReactNode
+  [key: string]: unknown
+}
+
+export function Table(props: TableProps) {
+  const {children, ...rest} = props
+
+  return (
+    <TableWrapper as="table" {...rest}>
+      {children}
+    </TableWrapper>
+  )
+}
+
+export const Row = styled(Card)(
+  () =>
+    css`
+      display: table-row;
+
+      &:not([hidden]) {
+        display: table-row;
+      }
+    `
+)
+
+type TableRowProps = {
+  children: React.ReactNode
+  [key: string]: unknown
+}
+
+export function TableRow(props: TableRowProps) {
+  const {children, ...rest} = props
+
+  return (
+    <Row as="tr" {...rest}>
+      {children}
+    </Row>
+  )
+}
+
+export const Cell = styled(Box)(
+  () =>
+    css`
+      display: table-cell;
+    `
+)
+
+type TableCellProps = {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export function TableCell(props: TableCellProps) {
+  const {children, style} = props
+
+  return (
+    <Cell as="td" style={style}>
+      {children}
+    </Cell>
+  )
+}

package/src/LanguageArray/index.tsx

@@ -1,13 +1,15 @@
 import React, {forwardRef, useCallback, useMemo} from 'react'
-import {useUnsetInputComponent, NestedFormBuilder} from '@nrk/sanity-plugin-nrkno-odd-utils'
 import {Code, Text, Card, Label, Flex, Box, Stack, Button, Grid} 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'
 import {FormFieldValidationStatus} from '@sanity/base/components'
 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'
 
 const schemaExample = {
   name: 'title',
@@ -173,38 +175,47 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
     .map((item) => item._key)
 
   return (
-    <Stack space={2}>
+    <Stack space={3}>
+      <Box>
+        <Text size={1} weight="bold">
+          {type?.title ?? type.name}
+        </Text>
+      </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
+                  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
+                  }
+                >
                   {/* 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 style={{width: `100%`}}>
                               {/* There _should_ only be one field */}
-                              {subType.fields.map((subTypeField) => (
+                              {subType.fields.map((subTypeField, subTypeFieldIndex) => (
                                 <ValueInput
                                   key={subTypeField.name}
                                   onChange={(patchEvent) =>
@@ -214,35 +225,43 @@ 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]}
                                   parent={item}
                                   readOnly={readOnly}
                                   type={subTypeField}
                                   value={item.value}
                                   level={props.level + 1}
                                   markers={[]}
+                                  compareValue={props.compareValue}
                                 />
                               ))}
-                            </Box>
+                            </TableCell>
                           </>
                         ) : null}
-                      </Flex>
+                      </>
                     ))}
                   {presence?.length > 0 ? (
-                    <FieldPresence maxAvatars={1} presence={presence} />
+                    <TableCell>
+                      <FieldPresence maxAvatars={1} presence={presence} />
+                    </TableCell>
                   ) : null}
                   {invalidKeys.includes(item._key) ? (
-                    <FormFieldValidationStatus __unstable_markers={validationMarkers} />
+                    <TableCell>
+                      <FormFieldValidationStatus __unstable_markers={validationMarkers} />
+                    </TableCell>
                   ) : null}
-                  <Button
-                    mode="ghost"
-                    icon={RemoveIcon}
-                    tone="critical"
-                    onClick={() => handleUnsetByKey(item._key)}
-                  />
-                </Flex>
-              </Card>
-            ))}
-          </Stack>
+                  <TableCell>
+                    <Button
+                      mode="ghost"
+                      icon={RemoveIcon}
+                      tone="critical"
+                      onClick={() => handleUnsetByKey(item._key)}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </tbody>
+          </Table>
         </Card>
       ) : null}
 
@@ -277,13 +296,14 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
             tone="primary"
             mode="ghost"
             disabled={readOnly || value?.length >= languages?.length}
+            icon={AddIcon}
             text={value?.length ? `Add missing languages` : `Add all languages`}
             onClick={() => handleAddLanguage()}
           />
         </Stack>
       ) : null}
 
-      {showNativeInput ? <NestedFormBuilder {...props} type={type} /> : null}
+      {showNativeInput ? <FormBuilderInput {...props} type={type} ref={ref} /> : null}
     </Stack>
   )
 })

package/src/LanguageArray/useUnsetInputComponent.ts

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export function useUnsetInputComponent(type, component) {
+  return React.useMemo(() => unsetInputComponent(type, component), [type, component])
+}
+
+function unsetInputComponent(type, component) {
+  const t = {
+    ...type,
+    inputComponent: type.inputComponent === component ? undefined : type.inputComponent,
+  }
+  const typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined
+  return {
+    ...t,
+    type: typeOfType,
+  }
+}

package/src/index.ts

@@ -1,3 +1,3 @@
-import {internationalizedArray} from './internationalizedArray'
+import {internationalizedArray as helperFunction} from './internationalizedArray'
 
-export default internationalizedArray
+export const internationalizedArray = (config) => helperFunction(config)

package/src/internationalizedArray.ts

@@ -6,6 +6,10 @@ export function internationalizedArray(config: ArrayConfig) {
 
   return {
     name,
+    title: config?.title ?? undefined,
+    group: config?.group ?? undefined,
+    hidden: config?.hidden ?? undefined,
+    readOnly: config?.readOnly ?? undefined,
     type: 'array',
     inputComponent: LanguageArray,
     options: {

package/src/types.ts

@@ -1,6 +1,10 @@
 export type ArrayConfig = Options & {
   name: string
   type: 'string' | 'number' | 'boolean' | 'text'
+  title?: string
+  group?: string
+  hidden?: boolean | (() => boolean)
+  readOnly?: boolean | (() => boolean)
 }
 
 export type Value = {