sanity-plugin-internationalized-array 0.0.5 → 0.0.8

package/README.md

@@ -1,8 +1,10 @@
 # sanity-plugin-internationalized-array
 
-A helper function that renders a custom input component for writing localised fields of content into an array.
+> NOTE This is for the Studio v2 version of the plugin
+>
+> There is a [Studio v3 specific version in the studio-v3 branch](https://github.com/SimeonGriggs/sanity-plugin-internationalized-array/tree/studio-v3)
 
-**This an early proof-of-concept and should not yet be used without thorough testing.**
+A helper function that renders a custom input component for writing localized fields of content into an array.
 
 ![2022-07-13 12 53 29](https://user-images.githubusercontent.com/9684022/178729823-cbb1059f-4ae0-4ab0-900d-4f22b030c1d1.gif)
 
@@ -67,7 +69,7 @@ Follow the instructions inside the script and set the `_type` and field name you
 
 Please take a backup first!
 
-### Why store localised field data like this?
+### Why store localized 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.
 

package/lib/LanguageArray/Table.js

@@ -3,11 +3,9 @@
 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"));
 
@@ -16,7 +14,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _ui = require("@sanity/ui");
 
 var _excluded = ["children"],
-    _excluded2 = ["children"];
+    _excluded2 = ["children"],
+    _excluded3 = ["children"];
 
 var _templateObject, _templateObject2, _templateObject3;
 
@@ -26,47 +25,64 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 _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(TableWrapper, _extends({
-    as: "table"
-  }, rest), children);
-}
+  return /*#__PURE__*/_react.default.createElement(StyledTable, rest, children);
+} // Row
 
-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;
+
+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(Row, _extends({
-    as: "tr"
-  }, rest), children);
-}
+  return /*#__PURE__*/_react.default.createElement(StyledRow, rest, children);
+} // Cell
+
 
-var Cell = (0, _styledComponents.default)(_ui.Box)(() => (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: table-cell;\n    "]))));
-exports.Cell = 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,
-      style = props.style;
-  return /*#__PURE__*/_react.default.createElement(Cell, {
-    as: "td",
-    style: style
-  }, children);
+      rest = _objectWithoutProperties(props, _excluded3);
+
+  return /*#__PURE__*/_react.default.createElement(StyledCell, rest, children);
 }
 //# sourceMappingURL=Table.js.map

package/lib/LanguageArray/Table.js.map

@@ -1 +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"}
+{"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,10 +23,10 @@ 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 }; }
 
 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); }
@@ -37,7 +37,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 var schemaExample = {
   name: 'title',
-  type: 'localisedArray',
+  type: 'localizedArray',
   options: {
     languages: [{
       id: 'en',
@@ -72,7 +72,7 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
     [{
       _key: languageId
     }] : // Or one for every missing language
-    languages.filter(language => value !== null && value !== void 0 && value.length ? !value.find(v => v._key === language.id) : true).map(language => ({
+    languages.filter(language => value !== null && value !== void 0 && value.length ? !value.find(v => (v === null || v === void 0 ? void 0 : v._key) === language.id) : true).map(language => ({
       _key: language.id
     })); // Insert new items in the correct order
 
@@ -162,8 +162,6 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
     var _type$of;
 
     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
@@ -176,10 +174,11 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
         muted: true,
         size: 1
       }, item._key))), /*#__PURE__*/_react.default.createElement(_Table.TableCell, {
+        paddingRight: 2,
         style: {
           width: "100%"
         }
-      }, subType.fields.map((subTypeField, subTypeFieldIndex) => /*#__PURE__*/_react.default.createElement(_ValueInput.default, {
+      }, 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
@@ -197,17 +196,24 @@ var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomCo
         markers: [],
         compareValue: props.compareValue
       })))) : null);
-    })), (presence === null || presence === void 0 ? void 0 : presence.length) > 0 ? /*#__PURE__*/_react.default.createElement(_Table.TableCell, null, /*#__PURE__*/_react.default.createElement(_presence.FieldPresence, {
+    })), /*#__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(_Table.TableCell, null, /*#__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(_Table.TableCell, 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, {
     tone: "caution",
     disabled: languagesOutOfOrder.length > languages.length,

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","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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"}
+{"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: 'localizedArray',\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,IAAO,CAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEL,IAAH,MAAYE,QAAQ,CAACtB,EAAvC,CAAjB,GAA8D,IAFlE,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,9 +62,9 @@ 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)) : [];
+      var nonLanguageKeys = value !== null && value !== void 0 && value.length ? value.filter(item => !languages.find(language => (item === null || item === void 0 ? void 0 : item._key) === language.id)) : [];
 
       if (nonLanguageKeys.length) {
         return {
@@ -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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "0.0.5",
-  "description": "Store localised fields in an array to save on attributes",
+  "version": "0.0.8",
+  "description": "Store localized fields in an array to save on attributes",
   "main": "lib/index.js",
   "scripts": {
     "build": "sanipack build",

package/src/LanguageArray/Table.tsx

@@ -1,30 +1,44 @@
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {Box, Card} from '@sanity/ui'
+import {Box, BoxProps, Card, CardProps} from '@sanity/ui'
 
-export const TableWrapper = styled(Box)(
+// 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 = {
+type TableProps = BoxProps & {
   children: React.ReactNode
-  [key: string]: unknown
+  style?: React.CSSProperties
 }
 
 export function Table(props: TableProps) {
   const {children, ...rest} = props
 
-  return (
-    <TableWrapper as="table" {...rest}>
-      {children}
-    </TableWrapper>
-  )
+  return <StyledTable {...rest}>{children}</StyledTable>
+}
+
+// Row
+const RowWrapper = (props = {}) => {
+  return <Card as="tr" {...props} />
 }
 
-export const Row = styled(Card)(
+const StyledRow = styled(RowWrapper)(
   () =>
     css`
       display: table-row;
@@ -35,39 +49,40 @@ export const Row = styled(Card)(
     `
 )
 
-type TableRowProps = {
+type TableRowProps = CardProps & {
   children: React.ReactNode
-  [key: string]: unknown
+  style?: React.CSSProperties
 }
 
 export function TableRow(props: TableRowProps) {
   const {children, ...rest} = props
 
-  return (
-    <Row as="tr" {...rest}>
-      {children}
-    </Row>
-  )
+  return <StyledRow {...rest}>{children}</StyledRow>
+}
+
+// Cell
+const CellWrapper = (props = {}) => {
+  return <Box as="td" {...props} />
 }
 
-export const Cell = styled(Box)(
+const StyledCell = styled(CellWrapper)(
   () =>
     css`
       display: table-cell;
+
+      &:not([hidden]) {
+        display: table-cell;
+      }
     `
 )
 
-type TableCellProps = {
+type TableCellProps = BoxProps & {
   children: React.ReactNode
   style?: React.CSSProperties
 }
 
 export function TableCell(props: TableCellProps) {
-  const {children, style} = props
+  const {children, ...rest} = props
 
-  return (
-    <Cell as="td" style={style}>
-      {children}
-    </Cell>
-  )
+  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,12 +8,12 @@ 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',
-  type: 'localisedArray',
+  type: 'localizedArray',
   options: {
     languages: [
       {id: 'en', title: 'English'},
@@ -60,7 +60,7 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
         : // Or one for every missing language
           languages
             .filter((language) =>
-              value?.length ? !value.find((v) => v._key === language.id) : true
+              value?.length ? !value.find((v) => v?._key === language.id) : true
             )
             .map((language) => ({_key: language.id}))
 
@@ -188,8 +188,6 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
             <tbody>
               {value.map((item) => (
                 <TableRow
-                  paddingY={1}
-                  paddingX={2}
                   key={item._key}
                   tone={
                     // TODO: Move this logic somewhere else
@@ -213,9 +211,9 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
                                 </Label>
                               </Box>
                             </TableCell>
-                            <TableCell style={{width: `100%`}}>
+                            <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) =>
@@ -240,23 +238,25 @@ const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
                         ) : null}
                       </>
                     ))}
-                  {presence?.length > 0 ? (
-                    <TableCell>
-                      <FieldPresence maxAvatars={1} presence={presence} />
-                    </TableCell>
-                  ) : null}
-                  {invalidKeys.includes(item._key) ? (
-                    <TableCell>
-                      <FormFieldValidationStatus __unstable_markers={validationMarkers} />
-                    </TableCell>
-                  ) : null}
+
                   <TableCell>
-                    <Button
-                      mode="ghost"
-                      icon={RemoveIcon}
-                      tone="critical"
-                      onClick={() => handleUnsetByKey(item._key)}
-                    />
+                    <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>
               ))}

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,12 +34,12 @@ export function internationalizedArray(config: ArrayConfig) {
         },
       },
     ],
-    validation: (Rule) =>
+    validation: (Rule) => [
       Rule.max(languages.length).custom((value: Value[], context) => {
         const {languages} = context.type.options
 
         const nonLanguageKeys = value?.length
-          ? value.filter((item) => !languages.find((language) => item._key === language.id))
+          ? value.filter((item) => !languages.find((language) => item?._key === language.id))
           : []
 
         if (nonLanguageKeys.length) {
@@ -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"}