Merge branch 'release/v2.6.0' of https://github.com/ONLYOFFICE/DocSpace-client into release/v2.6.0

2024-07-16 13:35:27 +03:00 · 2024-07-16 13:35:27 +03:00 · ad6524e830
commit ad6524e830
parent 4e358f9970 5bf9ce6975
12 changed files with 79 additions and 42 deletions
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
@ -30,6 +30,7 @@ import styled from "styled-components";
 import RoomType from "@docspace/shared/components/room-type";
 import { RoomsTypeValues } from "@docspace/shared/utils/common";
 import { Backdrop } from "@docspace/shared/components/backdrop";
+import { Portal } from "@docspace/shared/components/portal";

 import { Base } from "@docspace/shared/themes";

@ -57,33 +58,38 @@ const DropdownMobile = ({
  open,
  onClose,
  chooseRoomType,
-  forсeHideDropdown,
+  forceHideDropdown,
 }) => {
  return (
-    <>
-      <Backdrop
-        visible={open}
-        onClick={onClose}
-        withBackground
-        withoutBlur={false}
-        isAside
-        zIndex={450}
-      />
-      {!forсeHideDropdown && (
-        <StyledDropdownMobile className="dropdown-mobile" isOpen={open}>
-          {RoomsTypeValues.map((roomType) => (
-            <RoomType
-              id={roomType}
-              t={t}
-              key={roomType}
-              roomType={roomType}
-              type="dropdownItem"
-              onClick={() => chooseRoomType(roomType)}
-            />
-          ))}
-        </StyledDropdownMobile>
-      )}
-    </>
+    <Portal
+      visible
+      element={
+        <>
+          <Backdrop
+            visible={open}
+            onClick={onClose}
+            withBackground
+            withoutBlur={false}
+            isAside
+            zIndex={450}
+          />
+          {!forceHideDropdown && (
+            <StyledDropdownMobile className="dropdown-mobile" isOpen={open}>
+              {RoomsTypeValues.map((roomType) => (
+                <RoomType
+                  id={roomType}
+                  t={t}
+                  key={roomType}
+                  roomType={roomType}
+                  type="dropdownItem"
+                  onClick={() => chooseRoomType(roomType)}
+                />
+              ))}
+            </StyledDropdownMobile>
+          )}
+        </>
+      }
+    />
  );
 };

--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js
@ -47,7 +47,7 @@ const RoomTypeDropdown = ({
  setRoomType,
  setIsScrollLocked,
  isDisabled,
-  forсeHideDropdown,
+  forceHideDropdown,
 }) => {
  const [isOpen, setIsOpen] = useState(false);

@ -69,11 +69,11 @@ const RoomTypeDropdown = ({
  };

  useEffect(() => {
-    if (forсeHideDropdown) {
+    if (forceHideDropdown) {
      setIsScrollLocked(false);
      setIsOpen(false);
    }
-  }, [forсeHideDropdown]);
+  }, [forceHideDropdown]);

  return (
    <StyledRoomTypeDropdown isOpen={isOpen}>
@ -92,7 +92,7 @@ const RoomTypeDropdown = ({
          open={isOpen}
          onClose={toggleDropdown}
          chooseRoomType={chooseRoomType}
-          forсeHideDropdown={forсeHideDropdown}
+          forceHideDropdown={forceHideDropdown}
        />
      ) : (
        <DropdownDesktop t={t} open={isOpen} chooseRoomType={chooseRoomType} />
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
@ -157,7 +157,7 @@ const SetRoomParams = ({
          setRoomType={setRoomType}
          setIsScrollLocked={setIsScrollLocked}
          isDisabled={isDisabled}
-          forсeHideDropdown={forceHideRoomTypeDropdown}
+          forceHideDropdown={forceHideRoomTypeDropdown}
        />
      )}
      {isEdit && (
--- a/packages/client/src/helpers/confirmRoute.js
+++ b/packages/client/src/helpers/confirmRoute.js
@ -91,7 +91,7 @@ const ConfirmRoute = ({
      if (doAuthenticated == AuthenticatedAction.Redirect)
        return window.location.replace(defaultPage);

-      if (doAuthenticated == AuthenticatedAction.Logout) logout();
+      if (doAuthenticated == AuthenticatedAction.Logout) logout(false);
    }

    const { search } = location;
--- a/packages/shared/components/color-theme/styled-components/iconButton.ts
+++ b/packages/shared/components/color-theme/styled-components/iconButton.ts
@ -43,7 +43,7 @@ const StyledIconTheme = styled(StyledIcon)<
    }
  }

-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
    &:hover {
      svg {
        path {
--- a/packages/shared/components/icon-button/IconButton.styled.ts
+++ b/packages/shared/components/icon-button/IconButton.styled.ts
@ -49,7 +49,7 @@ const StyledOuter = styled.div<IconButtonProps>`
        }
      }

-      @media (hover: hover) {
+      @media (hover: hover) and (pointer: fine) {
        &:hover {
          svg {
            path {
@ -76,7 +76,7 @@ const StyledOuter = styled.div<IconButtonProps>`
        }
      }

-      @media (hover: hover) {
+      @media (hover: hover) and (pointer: fine) {
        &:hover {
          svg {
            path {
--- a/packages/shared/components/selector/Selector.types.ts
+++ b/packages/shared/components/selector/Selector.types.ts
@ -26,7 +26,7 @@

 import React from "react";
 import { RoomsType, ShareAccessRights } from "../../enums";
-import { MergeTypes } from "../../types";
+import { MergeTypes, Nullable } from "../../types";

 import { TFileSecurity, TFolderSecurity } from "../../api/files/types";
 import { TRoomSecurity } from "../../api/rooms/types";
@ -524,6 +524,8 @@ export type Data = {
  renderCustomItem?: TRenderCustomItem;
  setInputItemVisible: (value: boolean) => void;
  inputItemVisible: boolean;
+  savedInputValue: Nullable<string>;
+  setSavedInputValue: (value: Nullable<string>) => void;
 };

 export interface ItemProps {
--- a/packages/shared/components/selector/sub-components/Body.tsx
+++ b/packages/shared/components/selector/sub-components/Body.tsx
@ -28,6 +28,8 @@ import React from "react";
 import InfiniteLoader from "react-window-infinite-loader";
 import { FixedSizeList as List } from "react-window";

+import { Nullable } from "../../../types";
+
 import { Scrollbar } from "../../scrollbar";
 import { Text } from "../../text";

@ -93,6 +95,8 @@ const Body = ({
  const { withSelectAll } = React.useContext(SelectAllContext);

  const [bodyHeight, setBodyHeight] = React.useState(0);
+  const [savedInputValue, setSavedInputValue] =
+    React.useState<Nullable<string>>(null);

  const bodyRef = React.useRef<HTMLDivElement>(null);
  const listOptionsRef = React.useRef<null | InfiniteLoader>(null);
@ -258,6 +262,8 @@ const Body = ({
                    renderCustomItem,
                    setInputItemVisible,
                    inputItemVisible,
+                    savedInputValue,
+                    setSavedInputValue,
                  }}
                  itemSize={48}
                  onItemsRendered={onItemsRendered}
--- a/packages/shared/components/selector/sub-components/InputItem.tsx
+++ b/packages/shared/components/selector/sub-components/InputItem.tsx
@ -30,6 +30,7 @@ import AcceptIconSvgUrl from "PUBLIC_DIR/images/selector.input.accept.svg?url";
 import CancelIconSvgUrl from "PUBLIC_DIR/images/selector.input.cancel.svg?url";

 import { RoomsType } from "../../../enums";
+import { Nullable } from "../../../types";

 import { InputSize, InputType, TextInput } from "../../text-input";
 import { IconButton } from "../../icon-button";
@ -51,6 +52,7 @@ const InputItem = ({
  placeholder,

  setInputItemVisible,
+  setSavedInputValue,
 }: {
  defaultInputValue: string;
  onAcceptInput: (value: string) => void;
@ -64,20 +66,30 @@ const InputItem = ({
  roomType?: RoomsType;

  setInputItemVisible: (value: boolean) => void;
+  setSavedInputValue: (value: Nullable<string>) => void;
 }) => {
  const [value, setValue] = React.useState(defaultInputValue);

  const requestRunning = React.useRef<boolean>(false);
+  const canceled = React.useRef<boolean>(false);
  const inputRef = React.useRef<HTMLInputElement | null>(null);

  const onAcceptInputAction = React.useCallback(async () => {
    if (requestRunning.current || !value) return;
-
+    setSavedInputValue(null);
    requestRunning.current = true;
+
    await onAcceptInput(value);

+    canceled.current = true;
    requestRunning.current = false;
-  }, [onAcceptInput, value]);
+  }, [onAcceptInput, setSavedInputValue, value]);
+
+  const onCancelInputAction = React.useCallback(() => {
+    canceled.current = true;
+    setSavedInputValue(null);
+    onCancelInput();
+  }, [onCancelInput, setSavedInputValue]);

  React.useEffect(() => {
    setInputItemVisible(true);
@ -87,10 +99,16 @@ const InputItem = ({
    };
  }, [setInputItemVisible]);

+  React.useEffect(() => {
+    return () => {
+      if (!canceled.current) setSavedInputValue(value);
+    };
+  }, [setSavedInputValue, value]);
+
  React.useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Enter") onAcceptInputAction();
-      else if (e.key === "Escape") onCancelInput();
+      else if (e.key === "Escape") onCancelInputAction();
    };

    window.addEventListener("keydown", onKeyDown);
@ -98,7 +116,7 @@ const InputItem = ({
    return () => {
      window.removeEventListener("keydown", onKeyDown);
    };
-  }, [onAcceptInputAction, onCancelInput]);
+  }, [onAcceptInputAction, onCancelInputAction]);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVal = e.target.value;
@ -151,7 +169,7 @@ const InputItem = ({
      <StyledInputWrapper onClick={onAcceptInputAction}>
        <IconButton iconName={AcceptIconSvgUrl} size={16} />
      </StyledInputWrapper>
-      <StyledInputWrapper onClick={onCancelInput}>
+      <StyledInputWrapper onClick={onCancelInputAction}>
        <IconButton iconName={CancelIconSvgUrl} size={16} />
      </StyledInputWrapper>
    </StyledItem>
--- a/packages/shared/components/selector/sub-components/Item.tsx
+++ b/packages/shared/components/selector/sub-components/Item.tsx
@ -69,6 +69,8 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
    renderCustomItem,
    setInputItemVisible,
    inputItemVisible,
+    savedInputValue,
+    setSavedInputValue,
  }: Data = data;
  const { t } = useTranslation(["Common"]);

@ -111,7 +113,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
    if (isInputItem) {
      return (
        <InputItem
-          defaultInputValue={defaultInputValue}
+          defaultInputValue={savedInputValue ?? defaultInputValue}
          onAcceptInput={onAcceptInput}
          onCancelInput={onCancelInput}
          style={style}
@ -119,6 +121,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
          roomType={roomType}
          icon={icon}
          setInputItemVisible={setInputItemVisible}
+          setSavedInputValue={setSavedInputValue}
          placeholder={placeholder}
        />
      );
--- a/packages/shared/components/tabs/Tabs.types.ts
+++ b/packages/shared/components/tabs/Tabs.types.ts
@ -48,6 +48,8 @@ export interface TabsProps {
  type?: TabsTypes;
  /** Tab indentation for sticky positioning. */
  stickyTop?: string;
+  /** Sets a tab class name */
+  className?: string;
  /** Sets a callback function that is triggered when the tab is selected. */
  onSelect?: (element: TTabItem) => void;
 }
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@ -2519,7 +2519,7 @@ const Dark: TTheme = {
        borderColor: "#292929",
        hoverBorderColor: "#fafafa",
        color: "#858585",
-        iconColor: "#e8e8e9",
+        iconColor: "#858585",
      },
    },