@plone/volto 18.0.0-alpha.8 → 18.0.0

package/theme/themes/pastanaga/extras/objectbrowser-widget.less

@@ -41,3 +41,86 @@
     border: none !important;
   }
 }
+
+.object-browser {
+  .mode-switch {
+    margin-right: 8px;
+    cursor: pointer;
+    float: right;
+  }
+
+  header h2 {
+    margin: 2px 0 !important;
+  }
+
+  .searchResults {
+    margin-left: 20px;
+    font-size: 14px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+    text-rendering: optimizeLegibility;
+    text-size-adjust: 100%;
+  }
+
+  ul.object-listing {
+    padding: 0;
+  }
+
+  .image-wrapper {
+    display: block;
+    margin: 16px;
+    float: left;
+
+    img,
+    .icon-wrapper {
+      background-color: #edf1f2;
+      cursor: pointer;
+      outline: 0;
+    }
+
+    .selected {
+      outline: solid 3px #517776 !important;
+    }
+
+    img:hover,
+    .icon-wrapper:hover {
+      outline: solid 3px rgb(187, 198, 200);
+    }
+
+    .image-preview,
+    .image-preview:hover {
+      display: flex;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+
+      img {
+        width: 200px;
+        height: 200px;
+        object-fit: contain;
+      }
+    }
+
+    .image-preview,
+    .image-title {
+      cursor: pointer;
+      text-align: center;
+    }
+
+    .image-title {
+      margin-top: 5px;
+    }
+
+    .image-title-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .icon-wrapper {
+      display: flex;
+      padding: 46px;
+    }
+  }
+}

package/theme/themes/pastanaga/extras/sidebar.less

@@ -504,3 +504,152 @@
 .formtabs {
   flex-wrap: wrap;
 }
+
+// Order
+.tree-item-wrapper {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  margin-bottom: -1px;
+  list-style: none;
+
+  .text {
+    overflow: hidden;
+    flex-grow: 1;
+    padding-left: 0.5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.errored {
+      color: @red;
+    }
+  }
+
+  &.disable-interaction {
+    pointer-events: none;
+  }
+
+  &.disable-selection,
+  &.clone {
+    .text {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+
+  &.clone {
+    display: inline-block;
+    width: 375px;
+    height: 43px;
+    padding: 0;
+    pointer-events: none;
+
+    .tree-item {
+      box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
+    }
+  }
+
+  &.ghost {
+    &.indicator {
+      position: relative;
+      z-index: 1;
+      margin-bottom: -1px;
+      opacity: 1;
+
+      .tree-item {
+        position: relative;
+        height: 8px;
+        padding: 0;
+        border-color: #2389ff;
+        background-color: #56a1f8;
+
+        &:before {
+          position: absolute;
+          top: -4px;
+          left: -8px;
+          display: block;
+          width: 12px;
+          height: 12px;
+          border: 1px solid #2389ff;
+          border-radius: 50%;
+          background-color: #ffffff;
+          content: '';
+        }
+
+        > * {
+          height: 0;
+          /* Items are hidden using height and opacity to retain focus */
+          opacity: 0;
+        }
+      }
+    }
+
+    &:not(.indicator) {
+      opacity: 0.5;
+    }
+
+    .tree-item > * {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .tree-item {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    padding: var(--vertical-padding) 10px;
+    border: 1px solid #edf1f2;
+    background-color: #fff;
+    color: #222;
+    cursor: pointer;
+    --vertical-padding: 10px;
+
+    .delete {
+      visibility: hidden;
+    }
+
+    &.depth-0 {
+      border-left: solid 1px white;
+    }
+
+    &.hovered {
+      z-index: 99;
+      border: solid 1px #69b6fa;
+    }
+
+    &.selected {
+      z-index: 99;
+      border: solid 1px #2996da;
+
+      .delete {
+        visibility: visible;
+      }
+    }
+
+    &.multiSelected {
+      z-index: 99;
+      border: solid 1px #2996da;
+      background-color: rgba(120, 192, 215, 0.375);
+    }
+
+    .action {
+      border: 0;
+      margin-left: 8px;
+      background-color: transparent;
+      color: rgba(0, 0, 0, 0.6);
+
+      .icon {
+        vertical-align: middle;
+      }
+
+      &.delete {
+        cursor: pointer;
+      }
+
+      &.drag {
+        cursor: grab;
+      }
+    }
+  }
+}

package/theme/themes/pastanaga/extras/teaser.less

@@ -164,3 +164,56 @@
     }
   }
 }
+
+#sidebar-properties .ui.form {
+  .teaser.block.overwrite.actions {
+    display: flex;
+    flex-direction: column;
+
+    > div {
+      display: flex;
+      justify-content: space-between;
+
+      .ui.label {
+        padding-left: 0;
+        background: unset;
+        font-size: 15px;
+        text-transform: capitalize;
+      }
+    }
+
+    h3 {
+      text-transform: capitalize;
+    }
+
+    .ui.button:hover {
+      background: none !important;
+    }
+  }
+
+  .ui.message.warning:has(.teaser.block.overwrite.actions) {
+    display: block;
+  }
+}
+
+#sidebar-properties .ui.segment.attached.actions {
+  display: flex;
+  justify-content: center;
+  padding: 1.5em 1em;
+  border-top: none;
+
+  .ui.buttons.refresh.teaser button {
+    display: flex;
+    align-items: center;
+    padding: 0.5833em 0.833em;
+    background-color: #e8e8e8 !important;
+    color: rgba(0, 0, 0, 0.6) !important;
+    font-size: 0.85714286rem;
+    font-weight: bold;
+
+    svg {
+      padding: 0 0 0 0.5em;
+      margin-right: 0;
+    }
+  }
+}

package/theme/themes/pastanaga/extras/toolbar.less

@@ -129,7 +129,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
 
     .toolbar-handler {
-      button {
+      .toolbar-handler-button {
         opacity: 0.3;
       }
 
@@ -184,8 +184,8 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
         background: transparent;
         text-align: initial;
 
-        &:focus {
-          outline: none;
+        &:focus-visible {
+          outline: 1px auto;
         }
 
         &.ui {
@@ -243,7 +243,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
       width: 100%;
       justify-content: center;
 
-      button {
+      .toolbar-handler-button {
         width: @toolbarWidth;
         height: 20px;
         padding: 0;
@@ -283,16 +283,28 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
 
   .toolbar-content,
   .toolbar {
-    button {
+    button,
+    a {
       // Default reset for button
       padding: 0;
       border: 0;
       background: transparent;
+      box-shadow: unset !important; // Some buttons have double outlines due to default styles. Safely disable those styles here.
       cursor: pointer;
       text-align: initial;
 
-      &:focus {
-        outline: none;
+      svg {
+        display: block; // SVGs are inline by default, causing the spacing to be odd
+        margin: 0; // Some SVGs have margin set by default styles.
+      }
+
+      &:focus-visible {
+        outline: 2px solid black;
+        outline-offset: 2px;
+
+        &:has(.circled) {
+          border-radius: 50%;
+        }
       }
     }
   }
@@ -428,7 +440,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
         flex-direction: column;
         justify-content: center;
 
-        button {
+        .toolbar-handler-button {
           width: @toolbarWidthMin;
           height: @toolbarWidth;
 
@@ -752,3 +764,10 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
   }
 }
 // End Orphaned CSS
+
+// Toolbar handler color in homepage
+.contenttype-plone-site {
+  #toolbar .toolbar-handler .toolbar-handler-button:before {
+    background: @teal-blue;
+  }
+}

package/theme/themes/pastanaga/extras/widgets.less

@@ -153,3 +153,142 @@ body.babel-view .field.language-independent-field {
 .react-select__option {
   .word-break();
 }
+
+// makes sure event recurrence form buttons don't overflow when font is big
+.recurrence-form {
+  .byday-field {
+    .button {
+      flex-grow: 1;
+      padding-right: 0px;
+      padding-left: 0px;
+    }
+  }
+
+  .byyear-field {
+    .byyear-byday {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+  }
+}
+
+.image-widget {
+  container-type: inline-size;
+
+  .no-image-wrapper {
+    display: flex;
+    width: ~'min(100%, 450px)';
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .toolbar-inner {
+    display: flex;
+    width: ~'min(100%, 450px)';
+    height: 40px;
+    padding: 4px;
+    border-radius: 2px;
+    background-color: rgba(255, 255, 255, 0.975);
+    box-shadow:
+      0 0 8px rgba(0, 0, 0, 0.1),
+      0 2px 4px rgba(0, 0, 0, 0.05);
+
+    .ui.form & .ui.input input[type='text'] {
+      height: initial;
+    }
+
+    & > svg {
+      display: inline-block !important;
+      box-sizing: content-box;
+      padding: 4px;
+      margin-right: 4px;
+      color: @brown !important;
+    }
+
+    .ui.input {
+      width: 100%;
+      margin-left: 8px;
+    }
+
+    .ui.input > input {
+      padding: 0;
+      border: none;
+    }
+
+    .ui.icon.button {
+      padding: 4px;
+      border-radius: 1px;
+      margin-left: -3px;
+      color: @brown !important;
+
+      &:hover {
+        background-color: #edf1f2 !important;
+      }
+    }
+
+    .ui.buttons:first-child {
+      & .ui.icon.button {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @blueArctic: #e2f1fd;
+  @greySnow: #f3f5f7;
+  @greySmoke: #e4e8ec;
+
+  .image-widget-preview-wrapper {
+    position: relative;
+  }
+
+  .ui.basic.button.remove-block-button {
+    position: absolute;
+    z-index: 2;
+    top: 6px;
+    right: 2px;
+    background-color: transparent;
+    box-shadow: none;
+
+    .icon {
+      height: 18px !important;
+    }
+
+    .circled {
+      padding: 8px;
+      border: 1px solid @greySmoke;
+      background: @greySnow;
+
+      &:hover {
+        background-color: @greySmoke;
+      }
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .image-widget-filepath-preview {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    word-break: break-all;
+
+    a {
+      margin-left: 5px;
+    }
+  }
+}
+
+// ### FormFieldWrapper ###
+.language-independent-field .wrapper > label {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+
+  .languageIndependent-icon {
+    display: flex;
+    margin-left: 8px;
+  }
+}

package/theme/themes/pastanaga/modules/accordion.variables

@@ -34,14 +34,14 @@
 
 /* Styled Title */
 @styledTitleFontWeight: @normal;
-@styledTitleColor: @teal;
+@styledTitleColor: @textColor;
 @styledTitleBorder: none;
 
 /* Styled Title States */
 @styledTitleHoverBackground: @darkWhite;
-@styledTitleHoverColor: @teal;
+@styledTitleHoverColor: @textColor;
 @styledActiveTitleBackground: @darkWhite;
-@styledActiveTitleColor: @teal;
+@styledActiveTitleColor: @textColor;
 
 /* Styled Child Title States */
 

package/tsconfig.declarations.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
     "declaration": true,
     "emitDeclarationOnly": true,
@@ -8,9 +9,10 @@
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "preserveSymlinks": true,
+    "downlevelIteration": true,
     "paths": {
-      "@plone/volto/*": ["./src/*"],
+      "@plone/volto/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"]
 }

package/types/actions/aliases/aliases.d.ts

@@ -5,7 +5,7 @@
  * @param {Object} options Options data.
  * @returns {Object} Get aliases action.
  */
-export function getAliases(url: string, options: any): any;
+export function getAliases(url: string, options?: any): any;
 /**
  * Add alias function.
  * @function addAliases
@@ -22,3 +22,10 @@ export function addAliases(url: string, data: any): any;
  * @returns {Object} Remove alias action.
  */
 export function removeAliases(url: string, data: any): any;
+/**
+ * Upload aliases function.
+ * @function uploadAliases
+ * @param {Object} file CSV file.
+ * @returns {Object} Upload aliases action.
+ */
+export function uploadAliases(file: any): any;

package/types/actions/content/content.d.ts

@@ -1,3 +1,10 @@
+/**
+ * update uploaded files count function
+ * @function updateUploadedFiles
+ * @param {number} number of files uploaded
+ * @returns {Object} update uploaded files action
+ */
+export function updateUploadedFiles(uploadedFiles: any): any;
 /**
  * Create content function.
  * @function createContent

package/types/actions/form/form.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Set form data function.
+ * @function setFormData
+ * @param {Object} data New form data.
+ * @returns {Object} Set form data action.
+ */
+export function setFormData(data: any): any;
+/**
+ * Set ui state function.
+ * @function setUIState
+ * @param {Object} ui New ui state.
+ * @returns {Object} Set ui state action.
+ */
+export function setUIState(ui: any): any;

package/types/actions/form/form.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/actions/index.d.ts

@@ -10,7 +10,6 @@ export { listRoles } from "@plone/volto/actions/roles/roles";
 export { getTypes } from "@plone/volto/actions/types/types";
 export { getQuerystring } from "@plone/volto/actions/querystring/querystring";
 export { getQueryStringResults } from "@plone/volto/actions/querystringsearch/querystringsearch";
-export { setSidebarTab } from "@plone/volto/actions/sidebar/sidebar";
 export { loadLazyLibrary } from "@plone/volto/actions/lazyLibraries/lazyLibraries";
 export { getContextNavigation } from "@plone/volto/actions/contextNavigation/contextNavigation";
 export { authenticatedRole } from "@plone/volto/actions/authRole/authRole";
@@ -21,7 +20,7 @@ export { getNavroot } from "./navroot/navroot";
 export { copy, cut, copyContent, moveContent } from "@plone/volto/actions/clipboard/clipboard";
 export { installAddon, listAddons, uninstallAddon, upgradeAddon } from "./addons/addons";
 export { addComment, deleteComment, listComments, listMoreComments, updateComment } from "@plone/volto/actions/comments/comments";
-export { createContent, deleteContent, updateContent, getContent, orderContent, sortContent, resetContent, updateColumnsContent, lockContent, unlockContent, linkIntegrityCheck } from "@plone/volto/actions/content/content";
+export { createContent, deleteContent, updateContent, getContent, orderContent, sortContent, resetContent, updateColumnsContent, lockContent, unlockContent, linkIntegrityCheck, updateUploadedFiles } from "@plone/volto/actions/content/content";
 export { getControlpanel, postControlpanel, deleteControlpanel, listControlpanels, updateControlpanel, getSystemInformation, getDatabaseInformation } from "@plone/volto/actions/controlpanels/controlpanels";
 export { createGroup, deleteGroup, getGroup, listGroups, updateGroup } from "@plone/volto/actions/groups/groups";
 export { getHistory, revertHistory } from "@plone/volto/actions/history/history";
@@ -37,6 +36,8 @@ export { createUser, deleteUser, getUser, listUsers, setInitialPassword, resetPa
 export { login, loginRenew, logout, resetLoginRequest } from "@plone/volto/actions/userSession/userSession";
 export { getVocabulary, getVocabularyTokenTitle } from "@plone/volto/actions/vocabularies/vocabularies";
 export { getWorkflow, transitionWorkflow } from "@plone/volto/actions/workflow/workflow";
+export { setMetadataFieldsets, setMetadataFocus, resetMetadataFocus, setSidebarTab } from "@plone/volto/actions/sidebar/sidebar";
+export { setFormData, setUIState } from "@plone/volto/actions/form/form";
 export { deleteLinkTranslation, getTranslationLocator, linkTranslation } from "@plone/volto/actions/translations/translations";
 export { setBlocksClipboard, resetBlocksClipboard } from "@plone/volto/actions/blocksClipboard/blocksClipboard";
 export { changeLanguage, changeLanguageCookies } from "./language/language";

package/types/actions/sidebar/sidebar.d.ts

@@ -1,3 +1,24 @@
+/**
+ * Set metadata fieldsets function.
+ * @function setMetadataFieldsets
+ * @param {Array} fieldsets New fieldsets.
+ * @returns {Object} Set metadata fieldsets action.
+ */
+export function setMetadataFieldsets(fieldsets: any[]): any;
+/**
+ * Set metadata focus function.
+ * @function setMetadataFocus
+ * @param {String} fieldset Fieldset of the field.
+ * @param {String} field Field to set focus too.
+ * @returns {Object} Set metadata focus action.
+ */
+export function setMetadataFocus(fieldset: string, field: string): any;
+/**
+ * Resets metadata focus function.
+ * @function resetMetadataFocus
+ * @returns {Object} Set metadata focus action.
+ */
+export function resetMetadataFocus(): any;
 /**
  * Set sidebar tab function.
  * @function setSidebarTab