@plone/volto 16.0.0-alpha.4 → 16.0.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 16.0.0-alpha.5 (2022-05-25)
+
+### Bugfix
+
+- Fix regression, compound lang names (eg. `pt-BR`) no longer working @sneridagh
+
 ## 16.0.0-alpha.4 (2022-05-22)
 
 ### Breaking
@@ -11,6 +17,7 @@
 
 - Added viewableInBrowserObjects setting to use in alternative to downloadableObjects, if you want to view file in browser intstead downloading. @giuliaghisini
 - Disable already chosen criteria in querystring widget @kreafox
+- Added X-Forwarded-* headers to superagent requests. @mamico
 
 ### Bugfix
 
@@ -39,6 +46,7 @@
 
 ### Feature
 
+- Add default widget views for all type of fields and improve the DefaultView @ionlizarazu
 - added configurable identifier field for password reset in config.js. @giuliaghisini
 - Add `expandToBackendURL` helper @sneridagh
 

package/cypress/support/commands.js

@@ -4,7 +4,8 @@ import { getIfExists } from '../helpers';
 const HOSTNAME = Cypress.env('BACKEND_HOST') || 'localhost';
 const GUILLOTINA_API_URL = `http://${HOSTNAME}:8081/db/web`;
 const PLONE_SITE_ID = Cypress.env('SITE_ID') || 'plone';
-const PLONE_API_URL = Cypress.env('API_PATH') || `http://${HOSTNAME}:55001/${PLONE_SITE_ID}`;
+const PLONE_API_URL =
+  Cypress.env('API_PATH') || `http://${HOSTNAME}:55001/${PLONE_SITE_ID}`;
 
 // --- AUTOLOGIN -------------------------------------------------------------
 Cypress.Commands.add('autologin', (usr, pass) => {

package/locales/ca/LC_MESSAGES/volto.po

@@ -3331,6 +3331,7 @@ msgstr "El més utilitzat"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3608,6 +3609,7 @@ msgstr "Visiteu el lloc web extern"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/de/LC_MESSAGES/volto.po

@@ -3337,6 +3337,7 @@ msgstr "Häufig genutzt"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3614,6 +3615,7 @@ msgstr "Externe Webseite besuchen"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -3322,6 +3322,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3599,6 +3600,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/es/LC_MESSAGES/volto.po

@@ -3332,6 +3332,7 @@ msgstr "Más usado"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr "no"
@@ -3609,6 +3610,7 @@ msgstr "Visitar web externa"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr "sí"

package/locales/eu/LC_MESSAGES/volto.po

@@ -3329,6 +3329,7 @@ msgstr "Gehien erabilia"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr "ez"
@@ -3606,6 +3607,7 @@ msgstr "Webgunea ikusi"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr "bai"

package/locales/fr/LC_MESSAGES/volto.po

@@ -3339,6 +3339,7 @@ msgstr "souvent utilisé"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3616,6 +3617,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/it/LC_MESSAGES/volto.po

@@ -3322,6 +3322,7 @@ msgstr "Più usati"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr "No"
@@ -3599,6 +3600,7 @@ msgstr "Visita il sito web"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr "Sì"

package/locales/ja/LC_MESSAGES/volto.po

@@ -3330,6 +3330,7 @@ msgstr "よく使う物"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3607,6 +3608,7 @@ msgstr "外部サイトを表示"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/nl/LC_MESSAGES/volto.po

@@ -3341,6 +3341,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3618,6 +3619,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/pt/LC_MESSAGES/volto.po

@@ -3330,6 +3330,7 @@ msgstr "maisUsado"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3607,6 +3608,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -3332,6 +3332,7 @@ msgstr "Mais usados"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3609,6 +3610,7 @@ msgstr "Visitar site externo"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -3322,6 +3322,7 @@ msgstr "Cele mai utilizate"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr "nu"
@@ -3599,6 +3600,7 @@ msgstr "Vizitează site extern"
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr "da"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2022-05-10T12:12:59.220Z\n"
+"POT-Creation-Date: 2022-05-22T09:33:42.265Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -3324,6 +3324,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: No
 msgid "no"
 msgstr ""
@@ -3601,6 +3602,7 @@ msgstr ""
 
 #: components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry
 #: components/manage/Blocks/Search/components/ToggleFacetFilterListEntry
+#: components/theme/Widgets/BooleanWidget
 # defaultMessage: Yes
 msgid "yes"
 msgstr ""

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.0.0-alpha.4",
+  "version": "16.0.0-alpha.5",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -34,15 +34,11 @@
     "start-spa": "razzle start --type=spa",
     "build": "razzle build",
     "build-spa": "razzle build --type=spa",
-    "build:clean": "rm -rf build dist",
-    "dist:clean": "rm -rf build/messages && find build -name '*.map' -exec rm -rf {} \\;",
-    "build:dist": "yarn build:clean && yarn build && yarn dist:clean && mv build dist",
     "test": "razzle test --env=jest-environment-jsdom-sixteen --maxWorkers=50%",
     "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test --env=jest-environment-jsdom-sixteen",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "start:prod": "NODE_ENV=production node build/server.js",
-    "start:dist": "NODE_ENV=production BUILD_DIR=dist node dist/server.js",
     "prettier": "./node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,ts,tsx,json}'",
     "prettier:fix": "./node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,ts,tsx,json}'",
     "stylelint": "./node_modules/.bin/stylelint 'theme/**/*.{css,less}' 'src/**/*.{css,less}'",
@@ -177,8 +173,7 @@
     "hooks": {
       "before:bump": [
         "yarn i18n",
-        "yarn build:dist",
-        "git add locales dist"
+        "git add locales"
       ],
       "after:bump": "node changelogupdater.js bump ${version}",
       "after:release": "node changelogupdater.js back ${version} && git commit -am 'Back to development' && git push"

package/src/components/manage/Widgets/AlignWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Align = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Align',
+  title: 'Edit Widgets/Align',
   component: AlignWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/ArrayWidget.stories.jsx

@@ -154,7 +154,7 @@ ManyOptions500.args = {
 };
 
 export default {
-  title: 'Widgets/Array',
+  title: 'Edit Widgets/Array',
   component: ArrayWidgetComponent,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/CheckboxWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Checkbox = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Checkbox',
+  title: 'Edit Widgets/Checkbox',
   component: CheckboxWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/DatetimeWidget.stories.jsx

@@ -9,7 +9,7 @@ export const Datetime = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Datetime',
+  title: 'Edit Widgets/Datetime',
   component: DatetimeWidgetComponent,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/EmailWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Email = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Email',
+  title: 'Edit Widgets/Email',
   component: EmailWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/FileWidget.stories.jsx

@@ -8,7 +8,7 @@ export const File = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/File',
+  title: 'Edit Widgets/File',
   component: FileWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/IdWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Text = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Id',
+  title: 'Edit Widgets/Id',
   component: IdWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/NumberWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Number = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Number',
+  title: 'Edit Widgets/Number',
   component: NumberWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/ObjectBrowserWidget.stories.js

@@ -190,7 +190,7 @@ const ObjectBrowserWidget = (args) => {
 };
 
 export default {
-  title: 'Widgets/Object Browser',
+  title: 'Edit Widgets/Object Browser',
   argTypes: {
     selectableTypes: {
       name: 'widgetOptions.pattern_options.selectableTypes',

package/src/components/manage/Widgets/ObjectListWidget.stories.js

@@ -206,7 +206,7 @@ SchemaExtender.args = {
 };
 
 export default {
-  title: 'Widgets/Object List (JSON)',
+  title: 'Edit Widgets/Object List (JSON)',
   component: ObjectListWidgetDefault,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/ObjectWidget.stories.jsx

@@ -126,7 +126,7 @@ MultipleFieldsets.args = {
 };
 
 export default {
-  title: 'Widgets/Object (JSON)',
+  title: 'Edit Widgets/Object (JSON)',
   component: ObjectWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/PasswordWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Password = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Password',
+  title: 'Edit Widgets/Password',
   component: PasswordWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/QueryWidget.stories.jsx

@@ -1640,7 +1640,7 @@ export const Query = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Query',
+  title: 'Edit Widgets/Query',
   component: QuerystringWidgetComponent,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/SelectAutocompleteWidget.stories.jsx

@@ -134,7 +134,7 @@ ManyOptions1000.args = {
 };
 
 export default {
-  title: 'Widgets/SelectAutocomplete Widget',
+  title: 'Edit Widgets/SelectAutocomplete Widget',
   component: SelectAutoCompleteComponent,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/SelectWidget.stories.jsx

@@ -246,7 +246,7 @@ CustomOptions.args = {
 };
 
 export default {
-  title: 'Widgets/Select Widget',
+  title: 'Edit Widgets/Select Widget',
   component: SelectWidgetComponent,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/TextWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Text = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Text',
+  title: 'Edit Widgets/Text',
   component: TextWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/TextareaWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Textarea = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Textarea',
+  title: 'Edit Widgets/Textarea',
   component: TextareaWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/TokenWidget.stories.jsx

@@ -119,7 +119,7 @@ Disabled.args = {
 };
 
 export default {
-  title: 'Widgets/Token',
+  title: 'Edit Widgets/Token',
   component: TokenWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/UrlWidget.stories.jsx

@@ -9,7 +9,7 @@ export const Url = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Url',
+  title: 'Edit Widgets/Url',
   component: UrlWidget,
   decorators: [
     (Story) => (

package/src/components/manage/Widgets/VocabularyTermsWidget.stories.js

@@ -36,7 +36,7 @@ export const VocabularyTerms = WidgetStory.bind({
 VocabularyTerms.args = {};
 
 export default {
-  title: 'Widgets/VocabularyTerms',
+  title: 'Edit Widgets/VocabularyTerms',
   component: VocabularyTermsWidget,
   argTypes: {},
   decorators: [

package/src/components/manage/Widgets/WysiwygWidget.stories.jsx

@@ -8,7 +8,7 @@ export const Wysiwyg = WidgetStory.bind({
 });
 
 export default {
-  title: 'Widgets/Wysiwyg',
+  title: 'Edit Widgets/Wysiwyg',
   component: WysiwygWidget,
   decorators: [
     (Story) => (

package/src/components/theme/View/DefaultView.jsx

@@ -7,10 +7,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 
-import { Container, Image } from 'semantic-ui-react';
-import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+import { Container, Segment, Grid, Label } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+import { getSchema } from '@plone/volto/actions';
+import { getWidget } from '@plone/volto/helpers/Widget/utils';
 import RenderBlocks from './RenderBlocks';
 
+import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+import { useDispatch, useSelector } from 'react-redux';
+
 /**
  * Component to display the default view.
  * @function DefaultView
@@ -20,6 +25,24 @@ import RenderBlocks from './RenderBlocks';
 const DefaultView = (props) => {
   const { content, location } = props;
   const path = getBaseUrl(location?.pathname || '');
+  const dispatch = useDispatch();
+  const { views } = config.widgets;
+  const contentSchema = useSelector((state) => state.schema?.schema);
+  const fieldsetsToExclude = [
+    'categorization',
+    'dates',
+    'ownership',
+    'settings',
+  ];
+  const fieldsets = contentSchema?.fieldsets.filter(
+    (fs) => !fieldsetsToExclude.includes(fs.id),
+  );
+
+  React.useEffect(() => {
+    !hasBlocksData(content) &&
+      dispatch(getSchema(content['@type'], location.pathname));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return hasBlocksData(content) ? (
     <div id="page-document" className="ui container">
@@ -27,30 +50,35 @@ const DefaultView = (props) => {
     </div>
   ) : (
     <Container id="page-document">
-      <h1 className="documentFirstHeading">{content.title}</h1>
-      {content.description && (
-        <p className="documentDescription">{content.description}</p>
-      )}
-      {content.image && (
-        <Image
-          className="document-image"
-          src={content.image.scales.thumb.download}
-          floated="right"
-        />
-      )}
-      {content.remoteUrl && (
-        <span>
-          The link address is:
-          <a href={content.remoteUrl}>{content.remoteUrl}</a>
-        </span>
-      )}
-      {content.text && (
-        <div
-          dangerouslySetInnerHTML={{
-            __html: content.text.data,
-          }}
-        />
-      )}
+      {fieldsets?.map((fs) => {
+        return (
+          <>
+            {fs.id !== 'default' && <h2>{fs.title}</h2>}
+            {fs.fields?.map((f, key) => {
+              let field = {
+                ...contentSchema?.properties[f],
+                id: f,
+                widget: getWidget(f, contentSchema?.properties[f]),
+              };
+              let Widget = views?.getWidget(field);
+              return f !== 'title' ? (
+                <Grid celled="internally" key={key}>
+                  <Grid.Row>
+                    <Label>{field.title}:</Label>
+                  </Grid.Row>
+                  <Grid.Row>
+                    <Segment basic>
+                      <Widget value={content[f]} />
+                    </Segment>
+                  </Grid.Row>
+                </Grid>
+              ) : (
+                <Widget key={key} value={content[f]} />
+              );
+            })}
+          </>
+        );
+      })}
     </Container>
   );
 };

package/src/components/theme/Widgets/ArrayWidget.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+
+const ArrayWidget = ({ value, children, className }) =>
+  value ? (
+    <span className={cx(className, 'array', 'widget')}>
+      {value.map((item, key) => (
+        <>
+          {key ? ', ' : ''}
+          <span key={item.token || item.title || item}>
+            {children
+              ? children(item.title || item.token || item)
+              : item.title || item.token || item}
+          </span>
+        </>
+      ))}
+    </span>
+  ) : (
+    ''
+  );
+
+export default ArrayWidget;