@plone/volto 18.0.0-alpha.33 → 18.0.0-alpha.34

package/src/components/manage/Form/Form.jsx

@@ -52,6 +52,7 @@ import {
   resetMetadataFocus,
   setSidebarTab,
   setFormData,
+  setUIState,
 } from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
@@ -230,13 +231,17 @@ class Form extends Component {
       this.props.setFormData(formData);
     }
 
+    this.props.setUIState({
+      selected: selectedBlock,
+      multiSelected: [],
+      hovered: null,
+    });
+
     // Set initial state
     this.state = {
       formData,
       initialFormData,
       errors: {},
-      selected: selectedBlock,
-      multiSelected: [],
       isClient: false,
       // Ensure focus remain in field after change
       inFocus: {},
@@ -263,6 +268,12 @@ class Form extends Component {
     let errors = {};
     let activeIndex = 0;
 
+    if (!this.props.isFormSelected && prevProps.isFormSelected) {
+      this.props.setUIState({
+        selected: null,
+      });
+    }
+
     if (requestError && prevProps.requestError !== requestError) {
       errors =
         FormValidation.giveServerErrorsToCorrespondingFields(requestError);
@@ -376,15 +387,6 @@ class Form extends Component {
     this.setState({ isClient: true });
   }
 
-  static getDerivedStateFromProps(props, state) {
-    let newState = { ...state };
-    if (!props.isFormSelected) {
-      newState.selected = null;
-    }
-
-    return newState;
-  }
-
   /**
    * Change field handler
    * Remove errors for changed field
@@ -439,9 +441,9 @@ class Form extends Component {
 
       if (event.shiftKey) {
         const anchor =
-          this.state.multiSelected.length > 0
-            ? blocks_layout.indexOf(this.state.multiSelected[0])
-            : blocks_layout.indexOf(this.state.selected);
+          this.props.uiState.multiSelected.length > 0
+            ? blocks_layout.indexOf(this.props.uiState.multiSelected[0])
+            : blocks_layout.indexOf(this.props.uiState.selected);
         const focus = blocks_layout.indexOf(id);
 
         if (anchor === focus) {
@@ -451,15 +453,16 @@ class Form extends Component {
         } else {
           multiSelected = [...blocks_layout.slice(focus, anchor + 1)];
         }
+        window.getSelection().empty();
       }
 
       if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
-        multiSelected = this.state.multiSelected || [];
-        if (!this.state.multiSelected.includes(this.state.selected)) {
-          multiSelected = [...multiSelected, this.state.selected];
+        multiSelected = this.props.uiState.multiSelected || [];
+        if (!this.props.uiState.multiSelected.includes(this.state.selected)) {
+          multiSelected = [...multiSelected, this.props.uiState.selected];
           selected = null;
         }
-        if (this.state.multiSelected.includes(id)) {
+        if (this.props.uiState.multiSelected.includes(id)) {
           selected = null;
           multiSelected = without(multiSelected, id);
         } else {
@@ -468,9 +471,10 @@ class Form extends Component {
       }
     }
 
-    this.setState({
+    this.props.setUIState({
       selected,
       multiSelected,
+      gridSelected: null,
     });
 
     if (this.props.onSelectForm) {
@@ -660,141 +664,143 @@ class Form extends Component {
           />
 
           <Container>
-            <BlocksToolbar
-              formData={formData}
-              selectedBlock={this.state.selected}
-              selectedBlocks={this.state.multiSelected}
-              onChangeBlocks={(newBlockData) => {
-                const newFormData = {
-                  ...formData,
-                  ...newBlockData,
-                };
-                this.setState({
-                  formData: newFormData,
-                });
-                if (this.props.global) {
-                  this.props.setFormData(newFormData);
-                }
-              }}
-              onSetSelectedBlocks={(blockIds) =>
-                this.setState({ multiSelected: blockIds })
-              }
-              onSelectBlock={this.onSelectBlock}
-            />
-            <UndoToolbar
-              state={{
-                formData,
-                selected: this.state.selected,
-                multiSelected: this.state.multiSelected,
-              }}
-              enableHotKeys
-              onUndoRedo={({ state }) => {
-                if (this.props.global) {
-                  this.props.setFormData(state.formData);
+            <>
+              <BlocksToolbar
+                formData={formData}
+                selectedBlock={this.props.uiState.selected}
+                selectedBlocks={this.props.uiState.multiSelected}
+                onChangeBlocks={(newBlockData) => {
+                  const newFormData = {
+                    ...formData,
+                    ...newBlockData,
+                  };
+                  this.setState({
+                    formData: newFormData,
+                  });
+                  if (this.props.global) {
+                    this.props.setFormData(newFormData);
+                  }
+                }}
+                onSetSelectedBlocks={(blockIds) =>
+                  this.props.setUIState({ multiSelected: blockIds })
                 }
-                return this.setState(state);
-              }}
-            />
-            <BlocksForm
-              onChangeFormData={(newData) => {
-                const newFormData = {
-                  ...formData,
-                  ...newData,
-                };
-                this.setState({
-                  formData: newFormData,
-                });
-                if (this.props.global) {
-                  this.props.setFormData(newFormData);
-                }
-              }}
-              onChangeField={this.onChangeField}
-              onSelectBlock={this.onSelectBlock}
-              properties={formData}
-              navRoot={navRoot}
-              type={type}
-              pathname={this.props.pathname}
-              selectedBlock={this.state.selected}
-              multiSelected={this.state.multiSelected}
-              manage={this.props.isAdminForm}
-              allowedBlocks={this.props.allowedBlocks}
-              showRestricted={this.props.showRestricted}
-              editable={this.props.editable}
-              isMainForm={this.props.editable}
-              // Properties to pass to the BlocksForm to match the View ones
-              history={this.props.history}
-              location={this.props.location}
-              token={this.props.token}
-            />
-            {this.state.isClient &&
-              this.state.sidebarMetadataIsAvailable &&
-              this.props.editable &&
-              createPortal(
-                <UiForm
-                  method="post"
-                  onSubmit={this.onSubmit}
-                  error={keys(this.state.errors).length > 0}
-                >
-                  {schema &&
-                    map(schema.fieldsets, (fieldset) => (
-                      <Accordion
-                        fluid
-                        styled
-                        className="form"
-                        key={fieldset.title}
-                      >
-                        <div
-                          key={fieldset.id}
-                          id={`metadataform-fieldset-${fieldset.id}`}
+                onSelectBlock={this.onSelectBlock}
+              />
+              <UndoToolbar
+                state={{
+                  formData,
+                  selected: this.props.uiState.selected,
+                  multiSelected: this.props.uiState.multiSelected,
+                }}
+                enableHotKeys
+                onUndoRedo={({ state }) => {
+                  if (this.props.global) {
+                    this.props.setFormData(state.formData);
+                  }
+                  return this.setState(state);
+                }}
+              />
+              <BlocksForm
+                onChangeFormData={(newData) => {
+                  const newFormData = {
+                    ...formData,
+                    ...newData,
+                  };
+                  this.setState({
+                    formData: newFormData,
+                  });
+                  if (this.props.global) {
+                    this.props.setFormData(newFormData);
+                  }
+                }}
+                onChangeField={this.onChangeField}
+                onSelectBlock={this.onSelectBlock}
+                properties={formData}
+                navRoot={navRoot}
+                type={type}
+                pathname={this.props.pathname}
+                selectedBlock={this.props.uiState.selected}
+                multiSelected={this.props.uiState.multiSelected}
+                manage={this.props.isAdminForm}
+                allowedBlocks={this.props.allowedBlocks}
+                showRestricted={this.props.showRestricted}
+                editable={this.props.editable}
+                isMainForm={this.props.editable}
+                // Properties to pass to the BlocksForm to match the View ones
+                history={this.props.history}
+                location={this.props.location}
+                token={this.props.token}
+              />
+              {this.state.isClient &&
+                this.state.sidebarMetadataIsAvailable &&
+                this.props.editable &&
+                createPortal(
+                  <UiForm
+                    method="post"
+                    onSubmit={this.onSubmit}
+                    error={keys(this.state.errors).length > 0}
+                  >
+                    {schema &&
+                      map(schema.fieldsets, (fieldset) => (
+                        <Accordion
+                          fluid
+                          styled
+                          className="form"
+                          key={fieldset.title}
                         >
-                          <Accordion.Title
-                            active={metadataFieldsets.includes(fieldset.id)}
-                            index={fieldset.id}
-                            onClick={this.onToggleMetadataFieldset}
-                          >
-                            {fieldset.title}
-                            {metadataFieldsets.includes(fieldset.id) ? (
-                              <Icon name={upSVG} size="20px" />
-                            ) : (
-                              <Icon name={downSVG} size="20px" />
-                            )}
-                          </Accordion.Title>
-                          <Accordion.Content
-                            active={metadataFieldsets.includes(fieldset.id)}
+                          <div
+                            key={fieldset.id}
+                            id={`metadataform-fieldset-${fieldset.id}`}
                           >
-                            <Segment className="attached">
-                              {map(fieldset.fields, (field, index) => (
-                                <Field
-                                  {...schema.properties[field]}
-                                  id={field}
-                                  fieldSet={fieldset.title.toLowerCase()}
-                                  formData={formData}
-                                  focus={this.state.inFocus[field]}
-                                  value={formData?.[field]}
-                                  required={
-                                    schema.required.indexOf(field) !== -1
-                                  }
-                                  onChange={this.onChangeField}
-                                  onBlur={this.onBlurField}
-                                  onClick={this.onClickInput}
-                                  key={field}
-                                  error={this.state.errors[field]}
-                                />
-                              ))}
-                            </Segment>
-                          </Accordion.Content>
-                        </div>
-                      </Accordion>
-                    ))}
-                </UiForm>,
-                document.getElementById('sidebar-metadata'),
-              )}
-
-            <SlotRenderer
-              name="belowContent"
-              content={this.props.content}
-              navRoot={navRoot}
-            />
+                            <Accordion.Title
+                              active={metadataFieldsets.includes(fieldset.id)}
+                              index={fieldset.id}
+                              onClick={this.onToggleMetadataFieldset}
+                            >
+                              {fieldset.title}
+                              {metadataFieldsets.includes(fieldset.id) ? (
+                                <Icon name={upSVG} size="20px" />
+                              ) : (
+                                <Icon name={downSVG} size="20px" />
+                              )}
+                            </Accordion.Title>
+                            <Accordion.Content
+                              active={metadataFieldsets.includes(fieldset.id)}
+                            >
+                              <Segment className="attached">
+                                {map(fieldset.fields, (field, index) => (
+                                  <Field
+                                    {...schema.properties[field]}
+                                    id={field}
+                                    fieldSet={fieldset.title.toLowerCase()}
+                                    formData={formData}
+                                    focus={this.state.inFocus[field]}
+                                    value={formData?.[field]}
+                                    required={
+                                      schema.required.indexOf(field) !== -1
+                                    }
+                                    onChange={this.onChangeField}
+                                    onBlur={this.onBlurField}
+                                    onClick={this.onClickInput}
+                                    key={field}
+                                    error={this.state.errors[field]}
+                                  />
+                                ))}
+                              </Segment>
+                            </Accordion.Content>
+                          </div>
+                        </Accordion>
+                      ))}
+                  </UiForm>,
+                  document.getElementById('sidebar-metadata'),
+                )}
+
+              <SlotRenderer
+                name="belowContent"
+                content={this.props.content}
+                navRoot={navRoot}
+              />
+            </>
           </Container>
         </>
       )
@@ -964,6 +970,7 @@ export default compose(
     (state, props) => ({
       content: state.content.data,
       globalData: state.form?.global,
+      uiState: state.form?.ui,
       metadataFieldsets: state.sidebar?.metadataFieldsets,
       metadataFieldFocus: state.sidebar?.metadataFieldFocus,
     }),
@@ -971,6 +978,7 @@ export default compose(
       setMetadataFieldsets,
       setSidebarTab,
       setFormData,
+      setUIState,
       resetMetadataFocus,
     },
     null,

package/src/components/manage/Sidebar/Sidebar.jsx

@@ -34,12 +34,23 @@ const messages = defineMessages({
     id: 'Expand sidebar',
     defaultMessage: 'Expand sidebar',
   },
+  order: {
+    id: 'Order',
+    defaultMessage: 'Order',
+  },
 });
 
 const Sidebar = (props) => {
   const dispatch = useDispatch();
   const intl = useIntl();
-  const { cookies, content, documentTab, blockTab, settingsTab } = props;
+  const {
+    cookies,
+    content,
+    documentTab,
+    blockTab,
+    settingsTab,
+    orderTab = true,
+  } = props;
   const [expanded, setExpanded] = useState(
     cookies.get('sidebar_expanded') !== 'false',
   );
@@ -172,6 +183,22 @@ const Sidebar = (props) => {
                 </Tab.Pane>
               ),
             },
+            !!orderTab && {
+              menuItem: intl.formatMessage(messages.order),
+              pane: (
+                <Tab.Pane
+                  key="order"
+                  className="tab-wrapper"
+                  id="sidebar-order"
+                >
+                  <Icon
+                    className="tab-forbidden"
+                    name={forbiddenSVG}
+                    size="48px"
+                  />
+                </Tab.Pane>
+              ),
+            },
             !!settingsTab && {
               menuItem: intl.formatMessage(messages.settings),
               pane: (

package/src/components/manage/Widgets/InternalUrlWidget.jsx

@@ -15,13 +15,13 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
 
 /** Widget to edit urls
  *
- * This is the default widget used for the `remoteUrl` field. You can also use
+ * This is a widget used for getting and setting an internal url. You can also use
  * it by declaring a field like:
  *
  * ```jsx
  * {
  *  title: "URL",
- *  widget: 'url',
+ *  widget: 'internal_url',
  * }
  * ```
  */
@@ -35,20 +35,20 @@ export const InternalUrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    value,
   } = props;
   const inputId = `field-${id}`;
 
-  const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
+
   /**
    * Clear handler
    * @method clear
    * @param {Object} value Value
-   * @returns {undefined}
+   * @returns {string} Empty string
    */
   const clear = () => {
-    setValue('');
-    onChange(id, undefined);
+    onChange(id, '');
   };
 
   const onChangeValue = (_value) => {
@@ -63,8 +63,6 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    setValue(newValue);
-
     newValue = isInternalURL(newValue) ? flattenToAppURL(newValue) : newValue;
 
     if (!isInternalURL(newValue) && newValue.length > 0) {
@@ -75,7 +73,7 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    onChange(id, newValue === '' ? undefined : newValue);
+    onChange(id, newValue);
   };
 
   return (
@@ -89,12 +87,10 @@ export const InternalUrlWidget = (props) => {
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
+          onBlur={({ target }) => onBlur(id, target.value)}
           onClick={() => onClick()}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
+          minLength={minLength}
+          maxLength={maxLength}
           error={isInvalid}
         />
         {value?.length > 0 ? (

package/src/components/theme/FormattedDate/FormattedDate.jsx

@@ -18,13 +18,25 @@ const FormattedDate = ({
   const language = useSelector((state) => locale || state.intl.locale);
   const toDate = (d) => (typeof d === 'string' ? new Date(d) : d);
   const args = { date, long, includeTime, format, locale: language };
+  const new_date = new Date(toDate(date));
+  // Dat check taken from https://stackoverflow.com/questions/1353684/detecting-an-invalid-date-date-instance-in-javascript#1353711
+  if (Object.prototype.toString.call(new_date) === '[object Date]') {
+    // it is a date
+    if (isNaN(new_date)) {
+      // date object is not valid
+      return <span>bad date</span>;
+    }
+  } else {
+    // not a date object
+    return <span>not a date</span>;
+  }
 
   return (
     <time
       className={className}
       dateTime={date}
       title={new Intl.DateTimeFormat(language, long_date_format)
-        .format(new Date(toDate(date)))
+        .format(new_date)
         .replace('\u202F', ' ')}
     >
       {children

package/src/components/theme/Icon/Icon.jsx

@@ -12,10 +12,10 @@ const defaultSize = '36px';
  * @function Field
  * @param {Object} props Component properties.
  * @param {string} props.name Name source object.
- * @param {string} props.size Size of the Icon (in px).
- * @param {string} props.color Color of the Icon.
- * @param {string} props.className className to add to the component.
- * @param {string} props.title Title (a11y).
+ * @param {string} [props.size] Size of the Icon (in px).
+ * @param {string} [props.color] Color of the Icon.
+ * @param {string} [props.className] className to add to the component.
+ * @param {string} [props.title] Title (a11y).
  * @returns {string} Markup of the component.
  *
  * Use:

package/src/config/Loadables.jsx

@@ -1,5 +1,20 @@
 import loadable from '@loadable/component';
 
+// This is to make happy the types declaration extractor (tsc) that is not able to
+// extract one private method the types from `@dnd-kit` library:
+// error TS9006: Declaration emit for this file requires using private name
+// 'DefaultDropAnimationSideEffectsOptions' from module '".../node_modules/@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation"'.
+// An explicit type annotation may unblock declaration emit
+
+/**
+ * @typedef {Object} LoadableLib
+ * @property {() => Promise<any>} import
+ * @property {Object} [options]
+ */
+
+/**
+ * @type {{ [key: string]: LoadableLib }}
+ */
 export const loadables = {
   prettierStandalone: loadable.lib(() => import('prettier/standalone')),
   prettierParserHtml: loadable.lib(() => import('prettier/plugins/html')),
@@ -35,4 +50,7 @@ export const loadables = {
   reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
   rrule: loadable.lib(() => import('rrule')),
+  dndKitCore: loadable.lib(() => import('@dnd-kit/core')),
+  dndKitSortable: loadable.lib(() => import('@dnd-kit/sortable')),
+  dndKitUtilities: loadable.lib(() => import('@dnd-kit/utilities')),
 };

package/src/constants/ActionTypes.js

@@ -145,4 +145,5 @@ export const RESET_LOGIN_REQUEST = 'RESET_LOGIN_REQUEST';
 export const GET_SITE = 'GET_SITE';
 export const GET_NAVROOT = 'GET_NAVROOT';
 export const SET_FORM_DATA = 'SET_FORM_DATA';
+export const SET_UI_STATE = 'SET_UI_STATE';
 export const UPDATE_UPLOADED_FILES = 'UPDATE_UPLOADED_FILES';