base

plane-src/packages/ui/src/hooks/use-auto-resize-textarea.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useLayoutEffect } from "react";
+
+export const useAutoResizeTextArea = (
+  textAreaRef: React.RefObject<HTMLTextAreaElement>,
+  value: string | number | readonly string[]
+) => {
+  useLayoutEffect(() => {
+    const textArea = textAreaRef.current;
+    if (!textArea) return;
+
+    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+    textArea.style.height = "0px";
+    const scrollHeight = textArea.scrollHeight;
+    textArea.style.height = scrollHeight + "px";
+  }, [textAreaRef, value]);
+};

plane-src/packages/ui/src/hooks/use-dropdown-key-down.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+
+type TUseDropdownKeyDown = {
+  (
+    onOpen: () => void,
+    onClose: () => void,
+    isOpen: boolean,
+    selectActiveItem?: () => void
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+export const useDropdownKeyDown: TUseDropdownKeyDown = (onOpen, onClose, isOpen, selectActiveItem?) => {
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+        if (!isOpen) {
+          event.stopPropagation();
+          onOpen();
+        } else {
+          selectActiveItem && selectActiveItem();
+        }
+      } else if (event.key === "Escape" && isOpen) {
+        event.stopPropagation();
+        onClose();
+      }
+    },
+    [isOpen, onOpen, onClose]
+  );
+
+  return handleKeyDown;
+};

plane-src/packages/ui/src/hooks/use-dropdown-key-pressed.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+
+type TUseDropdownKeyPressed = {
+  (
+    onEnterKeyDown: () => void,
+    onEscKeyDown: () => void,
+    stopPropagation?: boolean
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+export const useDropdownKeyPressed: TUseDropdownKeyPressed = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => {
+  const stopEventPropagation = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [stopPropagation]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === "Enter") {
+        stopEventPropagation(event);
+        onEnterKeyDown();
+      } else if (event.key === "Escape") {
+        stopEventPropagation(event);
+        onEscKeyDown();
+      } else if (event.key === "Tab") onEscKeyDown();
+    },
+    [onEnterKeyDown, onEscKeyDown, stopEventPropagation]
+  );
+
+  return handleKeyDown;
+};

plane-src/packages/ui/src/hooks/use-platform-os.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const usePlatformOS = () => {
+  const userAgent = window.navigator.userAgent;
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+
+  return { isMobile };
+};