@fibery/ui-kit 1.38.2 → 1.39.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @fibery/ui-kit
 
+## 1.39.1
+
+### Patch Changes
+
+- 66dca07: add mode attribute for code block node
+
+## 1.39.0
+
+### Minor Changes
+
+- 004d205: make prosemirror code block node resizable
+
 ## 1.38.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.38.2",
+  "version": "1.39.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {

package/src/card-container.tsx

@@ -283,6 +283,8 @@ type Props = {
   after?: ReactNode;
   floating?: ReactNode;
   cover?: ReactNode;
+  // TODO: refactor. Extract Cover container
+  autoCoverHeight?: boolean;
   size: CardSize;
   contentStyle?: CSSProperties;
   backgroundColors?: string[] | null;
@@ -298,6 +300,7 @@ const cardContent = css`
 
 export const CardContainer = ({
   cover,
+  autoCoverHeight,
   before,
   title,
   after,
@@ -333,7 +336,7 @@ export const CardContainer = ({
       {showCover && (
         <div
           className={cx(coverClassName, hasContent && coverWithContentClassName)}
-          style={{height: coverHeightBySize[size] || 0}}
+          style={!autoCoverHeight ? {height: coverHeightBySize[size] || 0} : undefined}
         >
           {cover}
         </div>

package/src/collapsible-section.tsx

@@ -55,6 +55,7 @@ export const CollapsibleSection = ({
         headerCss,
         css`
           cursor: pointer;
+          user-select: none;
         `
       )}
       onClick={onToggle}

package/src/file-item-2.tsx

@@ -21,6 +21,7 @@ import {copyToClipboard} from "./copy-to-clipboard";
 import {useToast} from "./toast/toast-provider";
 import {Icon} from "./icons/Icon";
 import {useImagesGalleryMethods, useImagesGalleryRegistry} from "./images-gallery/images-gallery";
+import {isPhoneApp} from "./use-is-phone";
 
 const fileItemStyle = css`
   display: block;
@@ -79,12 +80,14 @@ export type FileItemType = {
 
 export type FileItemProps = {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (x: FileItemType) => void;
   disabled?: boolean;
 };
 
 export function FileItem(props: FileItemProps) {
-  const {name, url, thumbnailUrl, status, previewData: preview, contentType} = props.data;
+  const {onDownloadClick, onRemoveClick} = props;
+  const {name, thumbnailUrl, status, previewData: preview, contentType} = props.data;
   const isPending = status === "uploading" || status === "deleting";
   const isBackgroundReady = Boolean(thumbnailUrl && !isPending);
   const [isActionsOpened, setIsActionsOpened] = useState(false);
@@ -105,9 +108,9 @@ export function FileItem(props: FileItemProps) {
       src: preview.originalSrc,
       zoomed: false,
       setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
     });
-  }, [imagesRegistry, name, preview]);
+  }, [imagesRegistry, name, preview, onDownloadClick]);
 
   useEffect(() => {
     if (!preview) {
@@ -126,18 +129,18 @@ export function FileItem(props: FileItemProps) {
         src: preview.originalSrc,
         zoomed,
         setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
       });
     }
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
 
   const onContainerClick = useCallback(() => {
     if (preview) {
       setZoomed(true);
     } else {
-      stratFileDownload(url, name);
+      onDownloadClick?.();
     }
-  }, [name, preview, url]);
+  }, [preview, onDownloadClick]);
 
   return (
     <div
@@ -248,7 +251,8 @@ export function FileItem(props: FileItemProps) {
                 data={props.data}
                 disabled={props.disabled}
                 isBackgroundReady={isBackgroundReady}
-                onRemoveClick={props.onRemoveClick}
+                onDownloadClick={onDownloadClick}
+                onRemoveClick={onRemoveClick}
               />
             </div>
           </div>
@@ -278,6 +282,7 @@ export function FileItem(props: FileItemProps) {
                   data={props.data}
                   disabled={props.disabled}
                   isBackgroundReady={isBackgroundReady}
+                  onDownloadClick={onDownloadClick}
                   onRemoveClick={props.onRemoveClick}
                 />
               </div>
@@ -305,10 +310,12 @@ function FileActionsMenu({
   data,
   disabled,
   setIsActionsOpened,
+  onDownloadClick,
   onRemoveClick,
   isBackgroundReady,
 }: {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (data: FileItemType) => void;
   disabled?: boolean;
   setIsActionsOpened: (val: boolean) => void;
@@ -339,11 +346,19 @@ function FileActionsMenu({
         Copy file URL
       </ActionsMenuItem>
       <a href={data.url} target="_blank" rel="noopener noreferrer">
-        <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
-      </a>
-      <a download={data.name} href={`${data.url}?attachment`}>
-        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+        <ActionsMenuItem Icon={RicheditorOpenLink}>
+          {isPhoneApp() ? "Open in browser" : "Open in new tab"}
+        </ActionsMenuItem>
       </a>
+      {isPhoneApp() ? (
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      ) : (
+        <a download={data.name} href={`${data.url}?attachment`}>
+          <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+        </a>
+      )}
       <ActionsMenuSeparator />
       <ActionsMenuItem Icon={Delete} onSelect={() => onRemoveClick?.(data)} dangerous disabled={disabled}>
         Delete
@@ -387,7 +402,20 @@ function FileTitle({title, className}: {title: string; className?: string}) {
   );
 }
 
-function FilePreviewActions({url, name}: {url: string; name: string}) {
+function FilePreviewActions({url, name, onDownloadClick}: {url: string; name: string; onDownloadClick?: () => void}) {
+  if (isPhoneApp()) {
+    return (
+      <>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
+        </a>
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      </>
+    );
+  }
+
   return (
     <>
       <a href={url} target="_blank" rel="noopener noreferrer">
@@ -400,17 +428,6 @@ function FilePreviewActions({url, name}: {url: string; name: string}) {
   );
 }
 
-function stratFileDownload(url: string, filename: string) {
-  const a = document.createElement("a");
-  a.href = `${url}?attachment`;
-  a.download = filename;
-  a.style.display = "none";
-
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-}
-
 function FileIcon({contentType}: {contentType: string}) {
   if (contentType.startsWith("image/")) {
     return <FileImage />;

package/src/file-item.tsx

@@ -13,6 +13,7 @@ import Link from "./icons/react/Link";
 import Pencil from "./icons/react/Pencil";
 import {copyToClipboard} from "./copy-to-clipboard";
 import {useToast} from "./toast/toast-provider";
+import {isPhoneApp} from "./use-is-phone";
 
 const fileItemStyle = css`
   ${{
@@ -86,12 +87,14 @@ export type FileItemType = {
 
 export type FileItemProps = {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (x: FileItemType) => void;
   disabled?: boolean;
   onRenameClick?: (p: {id: string; name: string}) => void;
 };
 
 export function FileItem(props: FileItemProps) {
+  const {onDownloadClick, onRemoveClick} = props;
   const {name, url, thumbnailUrl, status, previewData: preview} = props.data;
   const isActive = status === "uploading" || status === "deleting";
   const isBackgroundReady = thumbnailUrl && !isActive;
@@ -111,12 +114,12 @@ export function FileItem(props: FileItemProps) {
       contentType: preview.contentType,
       zoomed: false,
       setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
     });
     return () => {
       imagesRegistry.delete(preview.originalSrc);
     };
-  }, [imagesRegistry, name, preview]);
+  }, [imagesRegistry, name, preview, onDownloadClick]);
 
   useEffect(() => {
     if (!preview) {
@@ -136,25 +139,18 @@ export function FileItem(props: FileItemProps) {
         contentType: preview.contentType,
         zoomed,
         setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
       });
     }
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
 
   const onContainerClick = useCallback(() => {
     if (preview) {
       setZoomed(true);
     } else {
-      const a = document.createElement("a");
-      a.href = `${url}?attachment`;
-      a.download = name;
-      a.style.display = "none";
-
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
+      onDownloadClick?.();
     }
-  }, [name, preview, url]);
+  }, [preview, onDownloadClick]);
 
   return (
     <div
@@ -211,9 +207,15 @@ export function FileItem(props: FileItemProps) {
                   <a href={url} target="_blank" rel="noopener noreferrer">
                     <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
                   </a>
-                  <a download={name} href={props.data.downloadUrl ?? url}>
-                    <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
-                  </a>
+                  {isPhoneApp() ? (
+                    <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+                      Download
+                    </ActionsMenuItem>
+                  ) : (
+                    <a download={name} href={props.data.downloadUrl ?? url}>
+                      <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+                    </a>
+                  )}
                   {props.onRenameClick && status === "done" ? (
                     <ActionsMenuItem
                       Icon={Pencil}
@@ -224,7 +226,7 @@ export function FileItem(props: FileItemProps) {
                   ) : null}
                   <ActionsMenuItem
                     Icon={Delete}
-                    onSelect={() => props.onRemoveClick?.(props.data)}
+                    onSelect={() => onRemoveClick?.(props.data)}
                     dangerous
                     disabled={props.disabled}
                   >
@@ -288,7 +290,20 @@ function resolveStatusText(status?: string) {
   return statusText;
 }
 
-function FilePreviewActions({url, name}: {url: string; name: string}) {
+function FilePreviewActions({url, name, onDownloadClick}: {url: string; name: string; onDownloadClick?: () => void}) {
+  if (isPhoneApp()) {
+    return (
+      <>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
+        </a>
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      </>
+    );
+  }
+
   return (
     <>
       <a href={url} target="_blank" rel="noopener noreferrer">

package/src/use-is-phone.tsx

@@ -24,25 +24,26 @@ function isVerticalMobileBreakpointDisabled() {
   return urlParams.has("no-vertical-mobile-breakpoint");
 }
 
-export const isPhoneApp = Boolean(
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore - injected by consumer app
-  window.__FIBERY_MOBILE_APP_API
-);
+export const isPhoneApp = () =>
+  Boolean(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    window.__FIBERY_MOBILE_APP_API
+  );
 
 export const phoneMediaQuery = isVerticalMobileBreakpointDisabled()
   ? "(max-width: 450px)"
   : "(max-width: 450px), (max-height: 450px)";
 
 export function isPhoneMode() {
-  return isPhoneApp || getMediaQueryList(phoneMediaQuery).matches;
+  return isPhoneApp() || getMediaQueryList(phoneMediaQuery).matches;
 }
 
 export function IsPhoneProvider({children}: {children: ReactNode}) {
   const isPhone = useIsMediaQueryMatched(phoneMediaQuery);
   useLayoutEffect(() => {
     const htmlElement = document.querySelector("html");
-    if (!htmlElement || isPhoneApp) {
+    if (!htmlElement || isPhoneApp()) {
       if (htmlElement) {
         htmlElement.classList.add(mobileRootClassName);
         return () => {
@@ -61,5 +62,5 @@ export function IsPhoneProvider({children}: {children: ReactNode}) {
       htmlElement.classList.remove(mobileRootClassName);
     };
   }, [isPhone]);
-  return <Provider value={isPhoneApp || isPhone}>{children}</Provider>;
+  return <Provider value={isPhoneApp() || isPhone}>{children}</Provider>;
 }

package/src/use-on-screen-keyboard-data.tsx

@@ -1,7 +1,7 @@
 import {ReactNode, useEffect, useState} from "react";
 import {createContext} from "@fibery/react/src/create-context";
 import _ from "lodash";
-import {useIsPhone} from "./use-is-phone";
+import {isPhoneApp} from "./use-is-phone";
 import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
 
 const defaultKeyboardHeight = 350;
@@ -17,13 +17,12 @@ const [IsOnScreenKeyboardOpenedValueProvider, useIsOnScreenKeyboardOpened] = cre
 );
 
 export function OnScreenKeyboardContextProvider({children}: {children: ReactNode}) {
-  const isPhone = useIsPhone();
   const [keyboardHeight, setKeyboardHeight] = useState<number>(defaultKeyboardHeight);
   const [keyboardVisible, setKeyboardVisible] = useState<boolean>(false);
   const [initialViewPortHeight] = useState(() => window.visualViewport?.height || 0);
   useEffect(() => {
     const viewport = window.visualViewport;
-    if (!viewport || !isPhone) {
+    if (!viewport || !isPhoneApp()) {
       return _.noop;
     }
 
@@ -55,7 +54,7 @@ export function OnScreenKeyboardContextProvider({children}: {children: ReactNode
     return () => {
       viewport.removeEventListener("resize", viewportHandler);
     };
-  }, [initialViewPortHeight, isPhone, keyboardHeight, keyboardVisible]);
+  }, [initialViewPortHeight, keyboardHeight, keyboardVisible]);
   return (
     <OnScreenKeyboardHeightValueProvider value={keyboardHeight}>
       <IsOnScreenKeyboardOpenedValueProvider value={keyboardVisible}>{children}</IsOnScreenKeyboardOpenedValueProvider>