@plone/volto 17.0.0-alpha.0 → 17.0.0-alpha.10

package/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx

@@ -9,8 +9,6 @@ import { listGroups } from '@plone/volto/actions';
 import { Icon, Toast } from '@plone/volto/components';
 import { updateGroup, listUsers } from '@plone/volto/actions';
 
-import add from '@plone/volto/icons/add.svg';
-import remove from '@plone/volto/icons/remove.svg';
 import down_key from '@plone/volto/icons/down-key.svg';
 
 const ListingTemplate = ({
@@ -116,7 +114,7 @@ const ListingTemplate = ({
     }
   }, [dispatch, query_group, show_matrix_options, groups_filter]);
 
-  const onSelectOptionHandler = (item, selectedvalue, checked, singleClick) => {
+  const onSelectOptionHandler = (selectedvalue, checked, singleClick) => {
     singleClick = singleClick ?? false;
     let group = selectedvalue.y;
     let username = selectedvalue.x;
@@ -150,17 +148,14 @@ const ListingTemplate = ({
       });
   };
 
-  const onSelectAllHandler = (mtxoption, checked) => {
-    let elements = document.querySelectorAll(`div.checkbox_${mtxoption} input`);
-    let identifier;
+  const onSelectAllHandler = (group, items_ids, checked) => {
     let usersgroupmapping = {};
-    elements.forEach((element) => {
-      identifier = element.name.split('_-_');
-      usersgroupmapping[identifier[1]] = checked ? true : false;
+    items_ids.forEach((el) => {
+      usersgroupmapping[el] = checked ? true : false;
     });
 
     dispatch(
-      updateGroup(identifier[2], {
+      updateGroup(group, {
         users: usersgroupmapping,
       }),
     )
@@ -188,93 +183,68 @@ const ListingTemplate = ({
     <div className="administration_matrix">
       {matrix_options && matrix_options?.length > 0 && (
         <div className="label-options">
-          {matrix_options?.map((matrix_option) => (
-            <div
-              className="label-options-label inclined"
-              key={matrix_option.value}
-            >
-              <div>
-                <span className="label">{matrix_option.label}</span>
+          <div className="target-labels">
+            <div>
+              <h3>{items.length} users</h3>
+            </div>
+            <div>
+              {matrix_options?.map((matrix_option) => (
+                <div
+                  className="label-options-label inclined"
+                  key={matrix_option.value}
+                >
+                  <div>
+                    <span className="label">{matrix_option.label}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="listing-row selectall" key="selectall">
+            <div className="listing-item">
+              <div />
+              <div className="matrix_options">
+                {matrix_options?.map((matrix_option) => (
+                  <div key={matrix_option.value}>
+                    <Checkbox
+                      className="toggle-target"
+                      defaultChecked={false}
+                      onChange={(event, { checked }) =>
+                        onSelectAllHandler(
+                          matrix_option.value,
+                          items.map((el) => el.id),
+                          checked,
+                        )
+                      }
+                    />
+                  </div>
+                ))}
               </div>
             </div>
-          ))}
+          </div>
         </div>
       )}
 
       <div className="items">
         {items.length > 0 ? (
           <>
-            <div className="listing-row selectall" key="selectall">
-              <div className="listing-item">
-                <div />
-                <div className="matrix_options">
-                  {matrix_options?.map((matrix_option) => (
-                    <div key={matrix_option.value}>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, true)
-                        }
-                        className="add-button"
-                        aria-label={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={add}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, false)
-                        }
-                        className="remove-button"
-                        aria-label={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={remove}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <h3>{items.length} users </h3>
             {items.map((item) => (
-              <div className="listing-row" key={item.id}>
+              <div
+                className="listing-row"
+                key={item.id}
+                id={`source-row-${item.id}`}
+              >
                 <div className="listing-item" key={item['@id']}>
                   <div>
-                    <h4>
-                      {item.fullname} ({item.id})
+                    <h4 title={`${item.fullname} ${item.id}`}>
+                      {item.fullname?.length > 25
+                        ? item.fullname.slice(0, 22) + '...'
+                        : item.fullname || item.id}
                     </h4>
                   </div>
                   <div className="matrix_options">
                     {matrix_options?.map((matrix_option) => (
                       <Checkbox
-                        name={`member_-_${item.id}_-_${matrix_option.value}`}
                         className={`checkbox_${matrix_option.value}`}
                         key={matrix_option.value}
                         title={matrix_option.title}
@@ -283,7 +253,6 @@ const ListingTemplate = ({
                           .includes(matrix_option.value)}
                         onChange={(event, { checked }) => {
                           onSelectOptionHandler(
-                            item,
                             { y: matrix_option.value, x: item.id },
                             checked,
                             true,

package/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx

@@ -122,83 +122,87 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
 
   return (
     <div className="controlpanel_matrix">
-      <div className="controlpanel_search_y">
-        <Form className="search_users" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchUser"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchUsers)}
-              onChange={onChangeSearchUsers}
-              onKeyDown={onChangeSearchUsers}
-              id="user-search-input"
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_search_wrapper">
+        <div className="controlpanel_search_y">
+          <Form className="search_users" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchUser"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchUsers)}
+                onChange={onChangeSearchUsers}
+                onKeyDown={onChangeSearchUsers}
+                id="user-search-input"
+              />
+            </Form.Field>
+          </Form>
+        </div>
+        <div className="controlpanel_search_x">
+          <Form className="search_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroup"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroups}
+                onKeyDown={onChangeSearchGroups}
+                id="group-search-input"
+              />
+            </Form.Field>
+            <Form.Field>
+              <Checkbox
+                name="addJoinedGroups"
+                label={intl.formatMessage(messages.addJoinedGroups)}
+                title={intl.formatMessage(messages.addJoinedGroups)}
+                defaultChecked={false}
+                onChange={(event, { checked }) => {
+                  onToggleJoinedGroups(checked);
+                }}
+              />
+            </Form.Field>
+          </Form>
+        </div>
       </div>
-      <div className="controlpanel_search_x">
-        <Form className="search_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroup"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroups}
-              onKeyDown={onChangeSearchGroups}
-              id="group-search-input"
-            />
-          </Form.Field>
-          <Form.Field>
-            <Checkbox
-              name="addJoinedGroups"
-              label={intl.formatMessage(messages.addJoinedGroups)}
-              title={intl.formatMessage(messages.addJoinedGroups)}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onToggleJoinedGroups(checked);
-              }}
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_listing_wrapper">
+        <div className="controlpanel_filter">
+          <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
+          <Form className="search_filter_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroupFilter"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroupsFilter}
+                onKeyDown={onChangeSearchGroupsFilter}
+                id="groupfilter-search-input"
+              />
+            </Form.Field>
+          </Form>
+          {(!many_groups || query_group_filter.length > 1) &&
+            filter_options?.map((filter_option) => (
+              <Form.Field>
+                <Checkbox
+                  name={`filter_option_${filter_option.value}`}
+                  key={filter_option.value}
+                  title={filter_option.label}
+                  label={filter_option.label}
+                  defaultChecked={false}
+                  onChange={(event, { checked }) => {
+                    onSelectOptionHandler(filter_option, checked);
+                  }}
+                />
+              </Form.Field>
+            ))}
+        </div>
+        <UserGroupMembershipListing
+          query_user={query_user}
+          query_group={query_group}
+          groups_filter={groups_filter}
+          add_joined_groups={add_joined_groups}
+          many_users={many_users}
+          many_groups={many_groups}
+        />
       </div>
-      <div className="controlpanel_filter">
-        <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
-
-        <Form className="search_filter_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroupFilter"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroupsFilter}
-              onKeyDown={onChangeSearchGroupsFilter}
-              id="groupfilter-search-input"
-            />
-          </Form.Field>
-        </Form>
-
-        {(!many_groups || query_group_filter.length > 1) &&
-          filter_options?.map((filter_option) => (
-            <Checkbox
-              name={`filter_option_${filter_option.value}`}
-              key={filter_option.value}
-              title={filter_option.label}
-              label={filter_option.label}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onSelectOptionHandler(filter_option, checked);
-              }}
-            />
-          ))}
-      </div>
-      <UserGroupMembershipListing
-        query_user={query_user}
-        query_group={query_group}
-        groups_filter={groups_filter}
-        add_joined_groups={add_joined_groups}
-        many_users={many_users}
-        many_groups={many_groups}
-      />
     </div>
   );
 };

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { v4 as uuid } from 'uuid';
 
-const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
+const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex, uid) => {
   // Because of the margin rendering rules, there is no easy
   // way to calculate the offset of the placeholder.
   //
@@ -13,12 +13,16 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
   //
   // To get a placeholder that looks good in all cases, we
   // fill up the space between the previous and the next element.
-  const childrenArray = [...draggedDOM.parentNode.children];
+  const queryAttr = 'data-rbd-droppable-id';
+  const domQuery = `[${queryAttr}='${uid}']`;
+  const parentDOM = document.querySelector(domQuery);
+
+  const childrenArray = [...parentDOM.children];
   // Remove the source element
   childrenArray.splice(sourceIndex, 1);
   // Also remove the placeholder that the library always inserts at the end
   childrenArray.splice(-1, 1);
-  const parentRect = draggedDOM.parentNode.getBoundingClientRect();
+  const parentRect = parentDOM.getBoundingClientRect();
   const prevNode = childrenArray[destinationIndex - 1];
   const nextNode = childrenArray[destinationIndex];
   let top, bottom;
@@ -40,9 +44,7 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
   return {
     clientY: top,
     clientHeight: bottom - top,
-    clientX: parseFloat(
-      window.getComputedStyle(draggedDOM.parentNode).paddingLeft,
-    ),
+    clientX: parseFloat(window.getComputedStyle(parentDOM).paddingLeft),
     clientWidth: draggedDOM.clientWidth,
   };
 };
@@ -63,17 +65,22 @@ const DragDropList = (props) => {
   // queueing timed action
   const timer = useRef(null);
 
-  const onDragStart = React.useCallback((event) => {
-    clearTimeout(timer.current);
-    const queryAttr = 'data-rbd-draggable-id';
-    const domQuery = `[${queryAttr}='${event.draggableId}']`;
-    const draggedDOM = document.querySelector(domQuery);
-    if (!draggedDOM) {
-      return;
-    }
-    const sourceIndex = event.source.index;
-    setPlaceholderProps(getPlaceholder(draggedDOM, sourceIndex, sourceIndex));
-  }, []);
+  const onDragStart = React.useCallback(
+    (event) => {
+      clearTimeout(timer.current);
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${event.draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = event.source.index;
+      setPlaceholderProps(
+        getPlaceholder(draggedDOM, sourceIndex, sourceIndex, uid),
+      );
+    },
+    [uid],
+  );
 
   const onDragEnd = React.useCallback(
     (result) => {
@@ -84,30 +91,33 @@ const DragDropList = (props) => {
     [onMoveItem],
   );
 
-  const onDragUpdate = React.useCallback((update) => {
-    clearTimeout(timer.current);
-    setPlaceholderProps({});
-    if (!update.destination) {
-      return;
-    }
-    const draggableId = update.draggableId;
-    const queryAttr = 'data-rbd-draggable-id';
-    const domQuery = `[${queryAttr}='${draggableId}']`;
-    const draggedDOM = document.querySelector(domQuery);
-    if (!draggedDOM) {
-      return;
-    }
-    const sourceIndex = update.source.index;
-    const destinationIndex = update.destination.index;
-    // Wait until the animations have finished, to make it look good.
-    timer.current = setTimeout(
-      () =>
-        setPlaceholderProps(
-          getPlaceholder(draggedDOM, sourceIndex, destinationIndex),
-        ),
-      250,
-    );
-  }, []);
+  const onDragUpdate = React.useCallback(
+    (update) => {
+      clearTimeout(timer.current);
+      setPlaceholderProps({});
+      if (!update.destination) {
+        return;
+      }
+      const draggableId = update.draggableId;
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = update.source.index;
+      const destinationIndex = update.destination.index;
+      // Wait until the animations have finished, to make it look good.
+      timer.current = setTimeout(
+        () =>
+          setPlaceholderProps(
+            getPlaceholder(draggedDOM, sourceIndex, destinationIndex, uid),
+          ),
+        250,
+      );
+    },
+    [uid],
+  );
 
   const AsDomComponent = as;
   return (
@@ -116,7 +126,18 @@ const DragDropList = (props) => {
       onDragUpdate={onDragUpdate}
       onDragEnd={onDragEnd}
     >
-      <Droppable droppableId={uid}>
+      <Droppable
+        droppableId={uid}
+        renderClone={(provided, snapshot, rubric) => {
+          const index = rubric.source.index;
+          return children({
+            child: childList[index][1],
+            childId: childList[index][0],
+            index,
+            draginfo: provided,
+          });
+        }}
+      >
         {(provided, snapshot) => (
           <AsDomComponent
             ref={provided.innerRef}

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

@@ -177,7 +177,11 @@ export class BlocksToolbarComponent extends React.Component {
           ''
         )}
         {selectedBlock && (blocksClipboard?.cut || blocksClipboard?.copy) && (
-          <Plug pluggable="main.toolbar.bottom" id="block-paste-btn">
+          <Plug
+            pluggable="main.toolbar.bottom"
+            id="block-paste-btn"
+            dependencies={[selectedBlock]}
+          >
             <button
               aria-label={intl.formatMessage(messages.pasteBlocks)}
               onClick={this.pasteBlocks}

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

@@ -31,7 +31,7 @@ import { Portal } from 'react-portal';
 import { connect } from 'react-redux';
 import {
   Button,
-  Container,
+  Container as SemanticContainer,
   Form as UiForm,
   Message,
   Segment,
@@ -258,7 +258,11 @@ class Form extends Component {
    * Tab selection is done only by setting activeIndex in state
    */
   onTabChange(e, { activeIndex }) {
-    this.setState({ activeIndex });
+    const defaultFocus = this.props.schema.fieldsets[activeIndex].fields[0];
+    this.setState({
+      activeIndex,
+      ...(defaultFocus ? { inFocus: { [defaultFocus]: true } } : {}),
+    });
   }
 
   /**
@@ -541,12 +545,14 @@ class Form extends Component {
     const { schema: originalSchema, onCancel, onSubmit } = this.props;
     const { formData } = this.state;
     const schema = this.removeBlocksLayoutFields(originalSchema);
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
     return this.props.visual ? (
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up
       this.state.isClient && (
-        <div className="ui container">
+        <Container>
           <BlocksToolbar
             formData={this.state.formData}
             selectedBlock={this.state.selected}
@@ -635,7 +641,7 @@ class Form extends Component {
               </UiForm>
             </Portal>
           )}
-        </div>
+        </Container>
       )
     ) : (
       <Container>
@@ -686,7 +692,7 @@ class Form extends Component {
                             id={field}
                             formData={this.state.formData}
                             fieldSet={item.title.toLowerCase()}
-                            focus={index === 0}
+                            focus={this.state.inFocus[field]}
                             value={this.state.formData?.[field]}
                             required={schema.required.indexOf(field) !== -1}
                             onChange={this.onChangeField}

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

@@ -4,13 +4,21 @@ import { Accordion, Segment, Message } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import AnimateHeight from 'react-animate-height';
 import { keys, map, isEqual } from 'lodash';
-
+import { useAtom } from 'jotai';
+import { inlineFormFieldsetsState } from './InlineFormState';
+import {
+  insertInArray,
+  removeFromArray,
+  arrayRange,
+} from '@plone/volto/helpers/Utils/Utils';
 import { Field, Icon } from '@plone/volto/components';
 import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   editValues: {
     id: 'Edit values',
@@ -70,12 +78,34 @@ const InlineForm = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const [currentActiveFieldset, setCurrentActiveFieldset] = React.useState(0);
+  const [currentActiveFieldset, setCurrentActiveFieldset] = useAtom(
+    inlineFormFieldsetsState({
+      name: block,
+      fielsetList: other,
+      initialState: config.settings.blockSettingsTabFieldsetsInitialStateOpen
+        ? arrayRange(0, other.length - 1, 1)
+        : [],
+    }),
+  );
+
   function handleCurrentActiveFieldset(e, blockProps) {
     const { index } = blockProps;
-    const newIndex = currentActiveFieldset === index ? -1 : index;
-
-    setCurrentActiveFieldset(newIndex);
+    if (currentActiveFieldset.includes(index)) {
+      setCurrentActiveFieldset(
+        removeFromArray(
+          currentActiveFieldset,
+          currentActiveFieldset.indexOf(index),
+        ),
+      );
+    } else {
+      setCurrentActiveFieldset(
+        insertInArray(
+          currentActiveFieldset,
+          index,
+          currentActiveFieldset.length + 1,
+        ),
+      );
+    }
   }
 
   return (
@@ -136,22 +166,22 @@ const InlineForm = (props) => {
         <Accordion fluid styled className="form" key={fieldset.id}>
           <div key={fieldset.id} id={`blockform-fieldset-${fieldset.id}`}>
             <Accordion.Title
-              active={currentActiveFieldset === index}
+              active={currentActiveFieldset.includes(index)}
               index={index}
               onClick={handleCurrentActiveFieldset}
             >
               {fieldset.title && <>{fieldset.title}</>}
-              {currentActiveFieldset === index ? (
+              {currentActiveFieldset.includes(index) ? (
                 <Icon name={upSVG} size="20px" />
               ) : (
                 <Icon name={downSVG} size="20px" />
               )}
             </Accordion.Title>
-            <Accordion.Content active={currentActiveFieldset === index}>
+            <Accordion.Content active={currentActiveFieldset.includes(index)}>
               <AnimateHeight
                 animateOpacity
                 duration={500}
-                height={currentActiveFieldset === index ? 'auto' : 0}
+                height={currentActiveFieldset.includes(index) ? 'auto' : 0}
               >
                 <Segment className="attached">
                   {map(fieldset.fields, (field) => (

package/src/components/manage/Form/InlineFormState.js

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { isEqual } from 'lodash';
+
+export const inlineFormFieldsetsState = atomFamily(
+  ({ name, initialState }) => atom(initialState),
+  (a, b) => a.name === b.name && isEqual(a.fielsetList, b.fielsetList),
+);