@edifice.io/react 2.2.3-develop-b2school.20250422110318 → 2.2.3-develop-b2school.20250425104325

package/dist/components/List/List.d.ts

@@ -25,7 +25,13 @@ export type ListProps<T> = {
      * Custom class name
      */
     className?: string;
+    /**
+     * Toolbar options
+     */
+    toolbarOptions?: {
+        shouldHideLabelsOnMobile?: boolean;
+    };
 };
 export declare const List: <T extends {
     _id: string;
-}>({ items, isCheckable, data, renderNode, onSelectedItems, className, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+}>({ items, isCheckable, data, renderNode, onSelectedItems, className, toolbarOptions, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/List.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useMediaQuery } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import { useEffect, Fragment as Fragment$1 } from "react";
 import { useCheckable } from "../../hooks/useCheckable/useCheckable.js";
+import useBreakpoint from "../../hooks/useBreakpoint/useBreakpoint.js";
 import Checkbox from "../Checkbox/Checkbox.js";
 import { Toolbar } from "../Toolbar/Toolbar.js";
 const List = ({
@@ -11,7 +11,8 @@ const List = ({
   data,
   renderNode,
   onSelectedItems,
-  className
+  className,
+  toolbarOptions
 }) => {
   const {
     selectedItems,
@@ -19,7 +20,9 @@ const List = ({
     isIndeterminate,
     handleOnSelectAllItems,
     handleOnSelectItem
-  } = useCheckable(data), isDesktopDevice = useMediaQuery("only screen and (min-width: 1024px)");
+  } = useCheckable(data), {
+    lg
+  } = useBreakpoint();
   return useEffect(() => {
     selectedItems && (onSelectedItems == null || onSelectedItems(selectedItems));
   }, [onSelectedItems, selectedItems]), /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -33,8 +36,8 @@ const List = ({
             ")"
           ] })
         ] }),
-        items && /* @__PURE__ */ jsx(Toolbar, { items, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
-          "px-0 ms-auto": !isDesktopDevice
+        items && /* @__PURE__ */ jsx(Toolbar, { items, shouldHideLabelsOnMobile: toolbarOptions == null ? void 0 : toolbarOptions.shouldHideLabelsOnMobile, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
+          "px-0 ms-auto": !lg
         }) })
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "border-top" })

package/dist/components/Toolbar/Toolbar.d.ts

@@ -71,6 +71,10 @@ export interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {
      * Accept optional children
      */
     children?: ReactNode;
+    /**
+     * Hide labels on mobile
+     */
+    shouldHideLabelsOnMobile?: boolean;
 }
 export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Toolbar;

package/dist/components/Toolbar/Toolbar.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useEffect, createElement } from "react";
 import clsx from "clsx";
+import useBreakpoint from "../../hooks/useBreakpoint/useBreakpoint.js";
 import { mergeRefs } from "../../utilities/refs/ref.js";
 import Tooltip from "../Tooltip/Tooltip.js";
 import Button from "../Button/Button.js";
@@ -12,9 +13,12 @@ const Toolbar = /* @__PURE__ */ forwardRef(({
   align = "space",
   isBlock = !1,
   ariaControls,
-  className
+  className,
+  shouldHideLabelsOnMobile = !1
 }, ref) => {
-  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), classes = clsx("toolbar z-1000 bg-white", className, {
+  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), {
+    lg
+  } = useBreakpoint(), classes = clsx("toolbar z-1000 bg-white", className, {
     default: variant === "default",
     "no-shadow": variant === "no-shadow",
     "d-flex": isBlock,
@@ -57,11 +61,12 @@ const Toolbar = /* @__PURE__ */ forwardRef(({
   };
   return /* @__PURE__ */ jsx("div", { ref: mergeRefs(ref, divToolbarRef), className: classes, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": ariaControls, onFocus: handleFocus, onBlur: handleBlur, children: items.map((item, index) => {
     if (item.visibility === "hide") return null;
+    const hideLabel = shouldHideLabelsOnMobile && !lg;
     switch (item.type) {
       case "divider":
         return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
       case "button":
-        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+        return /* @__PURE__ */ jsx(Tooltip, { message: hideLabel ? renderTooltipMessage(item) : void 0, placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, children: !hideLabel && item.props.children, "aria-label": item.name, key: item.name ?? index, color: item.props.color || "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "icon":
         return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(IconButton, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: item.props.variant ? item.props.variant : "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "dropdown":

package/dist/hooks/useWorkspaceFolders/useWorkspaceFolders.js

@@ -2,10 +2,14 @@ import { odeServices } from "@edifice.io/client";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { useMemo, useCallback } from "react";
 import { useEdificeClient } from "../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useTranslation } from "react-i18next";
+import useToast from "../useToast/useToast.js";
 function useWorkspaceFolders() {
   const queryClient = useQueryClient(), {
     user
-  } = useEdificeClient(), {
+  } = useEdificeClient(), toast = useToast(), {
+    t
+  } = useTranslation(), {
     data: ownerWorkspaceData = [],
     isLoading: isLoadingOwner
   } = useQuery({
@@ -22,10 +26,12 @@ function useWorkspaceFolders() {
       folderName,
       folderParentId
     }) => odeServices.workspace().createFolder(folderName, folderParentId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["workspace", "folders"]
-      });
+    onSuccess: (newFolder) => {
+      const queryKey = ["workspace", "folders", newFolder.isShared ? "shared" : "owner"];
+      queryClient.setQueryData(queryKey, (oldFolders) => [...oldFolders, newFolder]);
+    },
+    onError: () => {
+      toast.error(t("e400"));
     }
   }), folders = useMemo(() => [...ownerWorkspaceData, ...sharedWorkspaceData], [ownerWorkspaceData, sharedWorkspaceData]), canCopyFileIntoFolder = useCallback((folderId) => {
     var _a;

package/dist/modules/modals/ConfirmModal/ConfirmModal.js

@@ -23,7 +23,7 @@ function ConfirmModal({
     "yes/no": t("no"),
     "ok/cancel": t("cancel")
   };
-  return console.log("size:", size), /* @__PURE__ */ jsxs(Modal, { isOpen, onModalClose: onCancel, id, size, children: [
+  return /* @__PURE__ */ jsxs(Modal, { isOpen, onModalClose: onCancel, id, size, children: [
     /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: header }),
     /* @__PURE__ */ jsx(Modal.Body, { children: body }),
     /* @__PURE__ */ jsxs(Modal.Footer, { children: [

package/dist/modules/multimedia/WorkspaceFolders/WorkspaceFolders.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import SvgIconFolderAdd from "../../icons/components/IconFolderAdd.js";
 import NewFolderForm from "./components/NewFolderForm.js";
@@ -21,27 +21,32 @@ function WorkspaceFolders({
   } = useWorkspaceFolders(), {
     foldersTree,
     filterTree
-  } = useWorkspaceFoldersTree(folders), [shouldExpandAllNodes, setShouldExpandAllNodes] = useState(!1), [searchValue, setSearchValue] = useState(""), [selectedFolderId, setSelectedFolderId] = useState(void 0), [showNewFolderForm, setShowNewFolderForm] = useState(!1), [canCreateFolderIntoSelectedFolder, setCanCreateFolderIntoSelectedFolder] = useState(!1), handleSearchChange = (e) => {
+  } = useWorkspaceFoldersTree(folders), [searchValue, setSearchValue] = useState(""), [selectedFolderId, setSelectedFolderId] = useState(void 0), [showNewFolderForm, setShowNewFolderForm] = useState(!1), [canCreateFolderIntoSelectedFolder, setCanCreateFolderIntoSelectedFolder] = useState(!1), selectedFolderIdForAPI = selectedFolderId === WORKSPACE_USER_FOLDER_ID || !selectedFolderId ? "" : selectedFolderId;
+  useEffect(() => {
+    if (selectedFolderId) {
+      const canCopyFileInto = selectedFolderId === WORKSPACE_USER_FOLDER_ID || canCopyFileIntoFolder(selectedFolderId) && selectedFolderId !== WORKSPACE_SHARED_FOLDER_ID;
+      setCanCreateFolderIntoSelectedFolder(canCopyFileInto), onFolderSelected(selectedFolderIdForAPI, canCopyFileInto);
+    }
+  }, [selectedFolderId]);
+  const handleSearchChange = (e) => {
     setSearchValue(e.target.value);
   }, handleSearchSubmit = () => {
-    filterTree(searchValue), setShouldExpandAllNodes(searchValue !== "");
+    filterTree(searchValue);
   }, handleFolderSelected = (folderId) => {
-    setShowNewFolderForm(!1);
-    const newSelectedFolderId = folderId === WORKSPACE_USER_FOLDER_ID ? "" : folderId;
-    setSelectedFolderId(newSelectedFolderId);
-    const canCopyFileInto = folderId === WORKSPACE_USER_FOLDER_ID || canCopyFileIntoFolder(folderId) && folderId !== WORKSPACE_SHARED_FOLDER_ID;
-    setCanCreateFolderIntoSelectedFolder(canCopyFileInto), onFolderSelected(newSelectedFolderId, canCopyFileInto);
+    setShowNewFolderForm(!1), setSelectedFolderId(folderId);
   }, handleNewFolderClick = () => {
     setShowNewFolderForm(!0);
+  }, handleNewFolderCreated = (folderId) => {
+    handleFolderSelected(folderId);
   };
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12", children: [
     /* @__PURE__ */ jsx("p", { children: t("attachments.add.to.folder.modal.description") }),
     /* @__PURE__ */ jsx(SearchBar, { onChange: handleSearchChange, isVariant: !1, placeholder: t("search"), onClick: handleSearchSubmit }),
     /* @__PURE__ */ jsxs("div", { className: "border border-gray-400 rounded", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-12", children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, className: "justify-content-center" }) : /* @__PURE__ */ jsx(Tree, { nodes: foldersTree, onTreeItemClick: handleFolderSelected, shouldExpandAllNodes }) }),
+      /* @__PURE__ */ jsx("div", { className: "p-12", children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, className: "justify-content-center" }) : /* @__PURE__ */ jsx(Tree, { nodes: foldersTree, onTreeItemClick: handleFolderSelected, selectedNodeId: selectedFolderId }) }),
       /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end border-top border-gray-400 px-8 py-4 ", children: [
         !showNewFolderForm && /* @__PURE__ */ jsx(Button, { color: "primary", variant: "ghost", leftIcon: /* @__PURE__ */ jsx(SvgIconFolderAdd, {}), onClick: handleNewFolderClick, disabled: !canCreateFolderIntoSelectedFolder, children: t("workspace.folder.create") }),
-        showNewFolderForm && selectedFolderId !== void 0 && /* @__PURE__ */ jsx(NewFolderForm, { onClose: () => setShowNewFolderForm(!1), folderParentId: selectedFolderId })
+        showNewFolderForm && selectedFolderId !== void 0 && /* @__PURE__ */ jsx(NewFolderForm, { onClose: () => setShowNewFolderForm(!1), folderParentId: selectedFolderIdForAPI, onFolderCreated: handleNewFolderCreated })
       ] })
     ] })
   ] }) });

package/dist/modules/multimedia/WorkspaceFolders/components/NewFolderForm.d.ts

@@ -7,6 +7,10 @@ type Props = {
      * Parent folder ID where the new folder will be created
      */
     folderParentId: string;
+    /**
+     * Function called when the new folder is created
+     */
+    onFolderCreated: (folderId: string) => void;
 };
-export default function NewFolderForm({ onClose, folderParentId }: Props): import("react/jsx-runtime").JSX.Element;
+export default function NewFolderForm({ onClose, folderParentId, onFolderCreated, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/multimedia/WorkspaceFolders/components/NewFolderForm.js

@@ -7,7 +7,8 @@ import FormControl from "../../../../components/Form/FormControl.js";
 import Button from "../../../../components/Button/Button.js";
 function NewFolderForm({
   onClose,
-  folderParentId
+  folderParentId,
+  onFolderCreated
 }) {
   const {
     t
@@ -24,13 +25,13 @@ function NewFolderForm({
       folderName,
       folderParentId
     }, {
-      onSuccess: () => {
-        onClose();
+      onSuccess: (newFolder) => {
+        newFolder._id && onFolderCreated(newFolder._id), onClose();
       }
     });
   }, children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-4 flex-row", children: [
     /* @__PURE__ */ jsx(FormControl, { id: "modalWorkspaceNewFolderForm", isRequired: !0, children: /* @__PURE__ */ jsx(FormControl.Input, { ref: refInputName, size: "md", type: "text", placeholder: t("folder.new.name.label") }) }),
-    /* @__PURE__ */ jsx(Button, { type: "submit", color: "primary", variant: "ghost", isLoading: createFolderMutation.isPending, leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}) })
+    /* @__PURE__ */ jsx(Button, { type: "submit", color: "primary", variant: "ghost", disabled: createFolderMutation.isPending, isLoading: createFolderMutation.isPending, leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}) })
   ] }) });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.2.3-develop-b2school.20250422110318",
+  "version": "2.2.3-develop-b2school.20250425104325",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.2.3-develop-b2school.20250422110318",
-    "@edifice.io/tiptap-extensions": "2.2.3-develop-b2school.20250422110318",
-    "@edifice.io/utilities": "2.2.3-develop-b2school.20250422110318"
+    "@edifice.io/bootstrap": "2.2.3-develop-b2school.20250425104325",
+    "@edifice.io/tiptap-extensions": "2.2.3-develop-b2school.20250425104325",
+    "@edifice.io/utilities": "2.2.3-develop-b2school.20250425104325"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -151,8 +151,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.2.3-develop-b2school.20250422110318",
-    "@edifice.io/config": "2.2.3-develop-b2school.20250422110318"
+    "@edifice.io/client": "2.2.3-develop-b2school.20250425104325",
+    "@edifice.io/config": "2.2.3-develop-b2school.20250425104325"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",

package/dist/hooks/useWorkspaceFolders/useWorkspaceFolders.d.ts

@@ -1,10 +0,0 @@
-declare function useWorkspaceFolders(): {
-    folders: import('@edifice.io/client').WorkspaceElement[];
-    createFolderMutation: import('../../node_modules/@tanstack/react-query').UseMutationResult<any, Error, {
-        folderName: string;
-        folderParentId?: string;
-    }, unknown>;
-    canCopyFileIntoFolder: (folderId: string) => boolean;
-    isLoading: boolean;
-};
-export default useWorkspaceFolders;