@fibery/ui-kit 1.40.3 → 1.41.0

package/src/dropdown-menu/index.tsx

@@ -5,6 +5,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {forwardRef} from "react";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
 import {mobileRootSelector} from "../mobile-styles";
+import {RadixPortalThemeProvider} from "../theme-provider";
 
 export const Root = (dropdownMenuProps: DropdownMenuPrimitive.DropdownMenuProps) => (
   <DropdownMenuPrimitive.Root dir="ltr" modal={false} {...dropdownMenuProps} />
@@ -133,16 +134,18 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(function Dropdow
 ) {
   return (
     <Wrap if={portalled} with={DropdownMenuPrimitive.Portal} container={container}>
-      <DropdownMenuPrimitive.Content
-        onKeyDown={onContentKeyDown}
-        ref={ref}
-        className={cx(dropdownMenuContentStyles, className)}
-        side="bottom"
-        align="start"
-        collisionPadding={collisionPadding}
-        sideOffset={space.s4}
-        {...rest}
-      />
+      <RadixPortalThemeProvider>
+        <DropdownMenuPrimitive.Content
+          onKeyDown={onContentKeyDown}
+          ref={ref}
+          className={cx(dropdownMenuContentStyles, className)}
+          side="bottom"
+          align="start"
+          collisionPadding={collisionPadding}
+          sideOffset={space.s4}
+          {...rest}
+        />
+      </RadixPortalThemeProvider>
     </Wrap>
   );
 });
@@ -155,12 +158,14 @@ export const SubContent = forwardRef<
 >(function DropdownMenuSubContent({className, collisionPadding = space.s12, container, ...rest}, ref) {
   return (
     <DropdownMenuPrimitive.Portal container={container}>
-      <DropdownMenuPrimitive.SubContent
-        ref={ref}
-        className={cx(dropdownMenuContentStyles, className)}
-        collisionPadding={collisionPadding}
-        {...rest}
-      />
+      <RadixPortalThemeProvider>
+        <DropdownMenuPrimitive.SubContent
+          ref={ref}
+          className={cx(dropdownMenuContentStyles, className)}
+          collisionPadding={collisionPadding}
+          {...rest}
+        />
+      </RadixPortalThemeProvider>
     </DropdownMenuPrimitive.Portal>
   );
 });

package/src/emoji-picker/app-icon-picker.tsx

@@ -1,7 +1,7 @@
 import {CustomEmoji, EmojiItem} from "@fibery/emoji-data";
 import {useCallback} from "react";
-import {cardTypeColors, getIconColor} from "../design-system";
-import {useThemeMode} from "../theme-provider";
+import {cardTypeColors} from "../design-system";
+import {useTheme} from "../theme-provider";
 import {$TSFixMe} from "../tsfixme";
 import {EmojiPickerContentWithColor, EmojiPickerContentWithColorProps} from "./emoji-picker-content-with-color";
 import {EmojiPickerContent} from "./primitives/content";
@@ -30,7 +30,7 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
   autoFocus = true,
   emojiSize = 20,
 }) => {
-  const themeMode = useThemeMode();
+  const theme = useTheme();
 
   const renderEmoji = useCallback<NonNullable<EmojiPickerContentWithColorProps["renderEmoji"]>>(
     ({emoji}) => (
@@ -39,14 +39,14 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
           display: "block",
           width: emojiSize,
           height: emojiSize,
-          fill: color ? getIconColor(themeMode, color) : undefined,
+          fill: color ? theme.fns.getIconColor(color) : undefined,
         }}
         viewBox="0 0 24 24"
       >
         <use href={(emoji as CustomEmoji).imageUrl} />
       </svg>
     ),
-    [color, themeMode, emojiSize]
+    [color, theme, emojiSize]
   );
 
   return (

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -2,8 +2,8 @@ import {css} from "@linaria/core";
 import {useRef, useState} from "react";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
-import {getIconColor, space, themeVars} from "../design-system";
-import {useThemeMode} from "../theme-provider";
+import {space, themeVars} from "../design-system";
+import {useTheme} from "../theme-provider";
 import {Tooltip} from "../tooltip";
 import {$TSFixMe} from "../tsfixme";
 import {EmojiPickerGrid, type EmojiPickerGridHandle, EmojiPickerGridProps} from "./primitives/grid";
@@ -18,8 +18,8 @@ const colorPickerWrapperCss = css`
 type ColorPickerCollapsibleTrigger = {opened: boolean; color?: string};
 
 const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = ({opened, color}) => {
-  const themeMode = useThemeMode();
-  const iconColor = color ? getIconColor(themeMode, color) : undefined;
+  const theme = useTheme();
+  const iconColor = color ? theme.fns.getIconColor(color) : undefined;
 
   const label = opened ? "Hide color picker" : "Show color picker";
 

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
-import {compact} from "lodash";
+import compact from "lodash/compact";
 import {Button} from "../button/button";
-import {colors, space} from "../design-system";
+import {space, themeVars} from "../design-system";
 import EmojiDelete from "../icons/react/EmojiDelete";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
@@ -11,7 +11,7 @@ import {useState} from "react";
 
 const tabNavRootStyle = css`
   padding: ${space.s4}px ${space.s12}px 0 ${space.s12}px;
-  box-shadow: inset 0 -1px ${colors.shades.opacity5};
+  box-shadow: inset 0 -1px ${themeVars.shades.opacity5};
 `;
 
 type TabKey = "icons" | "emojis";

package/src/favorites-icon.tsx

@@ -74,7 +74,7 @@ export const FavoritesIcon = ({
       onClick={onClick}
     >
       <IconButton
-        style={checked ? makeButtonColors(theme.favoritesIconColor, "ghost") : {}}
+        style={checked ? makeButtonColors(theme.favoritesIconColor, "ghost", theme) : {}}
         size={size || "medium"}
         onClick={handleChange}
         color="neutral"

package/src/fibermoji-placeholder.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import {css} from "@linaria/core";
 import {FC, useEffect, useRef} from "react";
 import {textStyles} from "./design-system";
@@ -38,12 +38,12 @@ const mouths = [
   `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16" fill="none"><g clip-path="url(#clip0_31_1134)"><path d="M4.23177 12.4853C2.41601 11.1761 1.06315 9.59547 0.249133 7.87572C-0.702621 5.86498 1.22002 4 3.51791 4L7 4C7.55229 4 8 4.44772 8 5V13.0522C8 13.7579 7.28869 14.2398 6.6548 13.9296C5.79179 13.5074 4.97984 13.0247 4.23177 12.4853Z" fill="currentColor"/><path d="M31.7509 7.87572C30.9369 9.59547 29.584 11.1761 27.7682 12.4853C27.0202 13.0247 26.2082 13.5074 25.3452 13.9296C24.7113 14.2398 24 13.7579 24 13.0522L24 5C24 4.44772 24.4477 4 25 4L28.4821 4C30.78 4 32.7026 5.86498 31.7509 7.87572Z" fill="currentColor"/><path d="M16 16C14.564 16 13.1472 15.8662 11.7816 15.6082C11.3227 15.5215 11 15.1143 11 14.6473V5C11 4.44772 11.4477 4 12 4L20 4C20.5523 4 21 4.44772 21 5V14.6473C21 15.1143 20.6773 15.5215 20.2184 15.6082C18.8528 15.8662 17.436 16 16 16Z" fill="currentColor"/></g><defs><clipPath id="clip0_31_1134"><rect width="32" height="16" fill="white"/></clipPath></defs></svg>`,
 ];
 
-export const getColors = _.memoize((v: string) => {
+export const getColors = memoize((v: string) => {
   const idx = Math.floor((cyrb53(v) / Math.pow(2, 53)) * colors.length);
   return colors[idx];
 });
 
-const getMouth = _.memoize((v: string) => {
+const getMouth = memoize((v: string) => {
   const salted = v + "::mouth"; // made mouths independent of colors
   const idx = Math.floor((cyrb53(salted) / Math.pow(2, 53)) * mouths.length);
   return mouths[idx];

package/src/field-container.tsx

@@ -20,18 +20,27 @@ type Props = {
   label?: string;
   collapsible?: boolean;
   collapsed?: boolean;
+  collapsedDefault?: boolean;
   onCollapseChange?: (collapsed: boolean) => void;
   badge?: ReactNode;
   children: ReactNode;
 };
 
-export const FieldContainer = ({label, collapsible = false, collapsed, onCollapseChange, badge, children}: Props) => {
+export const FieldContainer = ({
+  label,
+  collapsible = false,
+  collapsed,
+  collapsedDefault = true,
+  onCollapseChange,
+  badge,
+  children,
+}: Props) => {
   return (
     <CollapsibleSection
       label={label ? <div className={labelStyle}>{label}</div> : undefined}
       collapsible={collapsible}
       collapsed={collapsed}
-      collapsedDefault={true}
+      collapsedDefault={collapsedDefault}
       onCollapsedChange={onCollapseChange}
       badge={badge}
     >

package/src/file-item/file-icon.tsx

@@ -0,0 +1,169 @@
+import FileImage from "../icons/react/FileImage";
+import FileVideo from "../icons/react/FileVideo";
+import FileTable from "../icons/react/FileTable";
+import FileDocument from "../icons/react/FileDocument";
+import FileArchive from "../icons/react/FileArchive";
+import FilePresentation from "../icons/react/FilePresentation";
+import FileOther from "../icons/react/FileOther";
+
+export function getFileIconComponent(contentType?: string) {
+  if (!contentType) {
+    return FileOther;
+  }
+  if (contentType.startsWith("image/")) {
+    return FileImage;
+  }
+  if (contentType.startsWith("video/")) {
+    return FileVideo;
+  }
+  if (SheetsContentTypes.includes(contentType)) {
+    return FileTable;
+  }
+  if (ArchiveContentTypes.includes(contentType)) {
+    return FileArchive;
+  }
+  if (PresentationContentTypes.includes(contentType)) {
+    return FilePresentation;
+  }
+  if (DocumentContentTypes.includes(contentType) || contentType.startsWith("text/")) {
+    return FileDocument;
+  }
+
+  return FileOther;
+}
+
+export function FileIcon({contentType}: {contentType?: string}) {
+  const Component = getFileIconComponent(contentType);
+  return <Component />;
+}
+
+const ArchiveContentTypes = [
+  "application/zip",
+  "application/zip-compressed",
+  "application/x-zip",
+  "application/x-zip-compressed",
+  "multipart/x-zip",
+
+  "application/x-rar-compressed",
+  "application/vnd.rar",
+
+  "application/x-7z-compressed",
+
+  "application/gzip",
+  "application/x-gzip",
+
+  "application/x-tar",
+
+  "application/x-bzip",
+  "application/x-bzip2",
+  "application/x-bzip3",
+  "application/x-bzip4",
+
+  "application/x-xz",
+
+  "application/zstd",
+  "application/x-zstd",
+
+  "application/x-lzma",
+  "application/x-lzip",
+
+  "application/x-lzh",
+  "application/x-lha",
+
+  "application/x-iso9660-image",
+  "application/x-cd-image",
+
+  "application/x-apple-diskimage",
+
+  "application/x-arj",
+
+  "application/x-cpio",
+
+  "application/x-rpm",
+
+  "application/x-deb",
+  "application/vnd.debian.binary-package",
+
+  "application/x-compress",
+  "application/x-archive",
+  "application/vnd.android.package-archive",
+];
+
+const PresentationContentTypes = [
+  "application/x-iwork-keynote-sffkey",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+  "application/vnd.openxmlformats-officedocument.presentationml.template",
+  "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
+  "application/vnd.ms-powerpoint.slideshow.macroEnabled.12",
+  "application/vnd.ms-powerpoint.template.macroEnabled.12",
+  "application/vnd.oasis.opendocument.presentation",
+  "application/vnd.oasis.opendocument.presentation-template",
+  "application/vnd.apple.keynote",
+  "application/vnd.google-apps.presentation",
+  "application/pdf",
+  "application/vnd.sun.xml.impress",
+  "application/vnd.stardivision.impress",
+];
+
+const SheetsContentTypes = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
+  "application/vnd.ms-excel",
+  "application/vnd.ms-excel.sheet.macroEnabled.12",
+  "application/vnd.ms-excel.template.macroEnabled.12",
+  "application/vnd.ms-excel.addin.macroEnabled.12",
+  "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+  "application/vnd.oasis.opendocument.spreadsheet",
+  "application/vnd.oasis.opendocument.spreadsheet-template",
+  "application/vnd.apple.numbers",
+  "application/vnd.google-apps.spreadsheet",
+  "text/csv",
+  "text/x-comma-separated-values",
+  "application/csv",
+  "text/tab-separated-values",
+  "application/vnd.lotus-1-2-3",
+  "application/x-123",
+  "application/vnd.stardivision.calc",
+  "application/vnd.sun.xml.calc",
+  "application/x-dbase",
+  "application/x-iwork-numbers-sffnumbers",
+];
+
+const DocumentContentTypes = [
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.template",
+  "application/vnd.ms-word.document.macroEnabled.12",
+  "application/vnd.ms-word.template.macroEnabled.12",
+
+  "application/vnd.oasis.opendocument.text",
+  "application/vnd.oasis.opendocument.text-template",
+  "application/vnd.oasis.opendocument.text-master",
+  "application/vnd.oasis.opendocument.text-web",
+
+  "application/vnd.apple.pages",
+  "application/x-iwork-pages-sffpages",
+
+  "application/rtf",
+  "text/rtf",
+
+  "text/plain",
+  "text/markdown",
+  "text/html",
+
+  "application/vnd.google-apps.document",
+
+  "application/vnd.sun.xml.writer",
+  "application/vnd.sun.xml.writer.template",
+  "application/vnd.sun.xml.writer.global",
+
+  "application/vnd.stardivision.writer",
+  "application/vnd.stardivision.writer-global",
+
+  "application/x-mswrite",
+  "application/x-abiword",
+
+  "application/pdf",
+];

package/src/file-item/file-menu-items.tsx

@@ -0,0 +1,68 @@
+import {ReactNode} from "react";
+import {useToast} from "../toast/toast-provider";
+import {ActionsMenuItem, ActionsMenuSeparator} from "../actions-menu";
+import Link from "../icons/react/Link";
+import {copyUrlToClipboard} from "../copy-to-clipboard";
+import RicheditorOpenLink from "../icons/react/RicheditorOpenLink";
+import {isPhoneApp} from "../use-is-phone";
+import FileDownload from "../icons/react/FileDownload";
+import Pencil from "../icons/react/Pencil";
+import Delete from "../icons/react/Delete";
+import {UploadFileWithContent} from "./types";
+
+export function FileMenuItems({
+  file,
+  disabled,
+  onDownloadClick,
+  onRemoveClick,
+  onRenameClick,
+}: {
+  file: Pick<UploadFileWithContent, "uid" | "name" | "url" | "status">;
+  onDownloadClick?: () => void;
+  onRemoveClick?: () => void;
+  onRenameClick?: (data: {id: string; name: string}) => void;
+  disabled?: boolean;
+}): ReactNode {
+  const toast = useToast();
+
+  return (
+    <>
+      <ActionsMenuItem
+        Icon={Link}
+        onSelect={() => {
+          copyUrlToClipboard({url: `${window.origin}${file.url}`, label: file.name})
+            .then(() => toast.success({title: "Link copied to clipboard"}))
+            .catch((error) => toast.error({title: "Unable to copy link to clipboard", subTitle: error.message}));
+        }}
+      >
+        Copy file URL
+      </ActionsMenuItem>
+      <a href={file.url} target="_blank" rel="noopener noreferrer">
+        <ActionsMenuItem Icon={RicheditorOpenLink}>
+          {isPhoneApp() ? "Open in browser" : "Open in new tab"}
+        </ActionsMenuItem>
+      </a>
+      {isPhoneApp() ? (
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      ) : (
+        <a download={file.name} href={`${file.url}?attachment`}>
+          <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+        </a>
+      )}
+      {onRenameClick && file.status === "done" ? (
+        <>
+          <ActionsMenuSeparator />
+          <ActionsMenuItem Icon={Pencil} onSelect={() => onRenameClick?.({id: file.uid, name: file.name})}>
+            Rename
+          </ActionsMenuItem>
+        </>
+      ) : null}
+      <ActionsMenuSeparator />
+      <ActionsMenuItem Icon={Delete} onSelect={onRemoveClick} dangerous disabled={disabled}>
+        Delete
+      </ActionsMenuItem>
+    </>
+  );
+}

package/src/file-item/file-preview-actions.tsx

@@ -0,0 +1,38 @@
+import {isPhoneApp} from "../use-is-phone";
+import {ActionsMenuItem} from "../actions-menu";
+import RicheditorOpenLink from "../icons/react/RicheditorOpenLink";
+import FileDownload from "../icons/react/FileDownload";
+
+export 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">
+        <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
+      </a>
+      <a download={name} href={`${url}?attachment`}>
+        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+      </a>
+    </>
+  );
+}

package/src/file-item/file-title.tsx

@@ -0,0 +1,48 @@
+import {css, cx, LinariaClassName} from "@linaria/core";
+
+export function FileTitle({
+  title,
+  containerCss,
+  maxWidth,
+}: {
+  title: string;
+  containerCss?: LinariaClassName;
+  maxWidth?: number;
+}) {
+  const parts = title.split(".");
+  const ext = parts.length > 1 ? "." + parts[parts.length - 1] : "";
+  const name = title.substring(0, title.length - ext.length);
+
+  return (
+    <div
+      className={cx(
+        css`
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        `,
+        containerCss
+      )}
+      style={{maxWidth}}
+    >
+      <span
+        className={css`
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          /* ellipsis shows ONLY if this span overflows */
+          min-width: 0;
+        `}
+      >
+        {name}
+      </span>
+      <span
+        className={css`
+          flex: 0 0 auto;
+        `}
+      >
+        {ext}
+      </span>
+    </div>
+  );
+}

package/src/file-item/types.ts

@@ -0,0 +1,27 @@
+export type FiberyFile = {
+  "fibery/id": string;
+  "fibery/name": string;
+  "fibery/rank": number;
+  "fibery/content-type": string;
+  "fibery/secret": string;
+  "fibery/content-length": number;
+  "fibery/creation-date": string;
+};
+
+export type PreviewData = {
+  type: "image" | "video" | "iframe";
+  previewSrc: string | null;
+  originalSrc: string;
+  contentType: string;
+};
+
+export type UploadFileWithContent = {
+  uid: string;
+  name: string;
+  url: string;
+  status?: string;
+  contentType: string;
+  thumbnailUrl: string | null;
+  downloadUrl?: string | null;
+  previewData: null | PreviewData;
+};

package/src/file-item/use-register-in-image-gallery.tsx

@@ -0,0 +1,70 @@
+import {useCallback, useEffect, useState} from "react";
+import {useImagesGalleryMethods, useImagesGalleryRegistry} from "../images-gallery/images-gallery";
+import {FilePreviewActions} from "./file-preview-actions";
+import {PreviewData} from "./types";
+
+export function useRegisterInImageGallery({
+  preview,
+  name,
+  onDownloadClick,
+}: {
+  preview: PreviewData | null;
+  name: string;
+  onDownloadClick?: () => void;
+}) {
+  const [zoomed, setZoomed] = useState(false);
+  const imagesRegistry = useImagesGalleryRegistry();
+  const galleryMethods = useImagesGalleryMethods();
+
+  useEffect(() => {
+    if (!preview) {
+      return;
+    }
+
+    imagesRegistry.set(preview.originalSrc, {
+      type: preview.type,
+      src: preview.originalSrc,
+      label: name,
+      zoomed: false,
+      setZoomed,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
+    });
+  }, [imagesRegistry, name, preview, onDownloadClick]);
+
+  useEffect(() => {
+    if (!preview) {
+      return undefined;
+    }
+
+    if (zoomed) {
+      galleryMethods.setActivated(true);
+    }
+    const imageData = imagesRegistry.get(preview.originalSrc);
+    if (imageData) {
+      imageData.zoomed = zoomed;
+    } else {
+      imagesRegistry.set(preview.originalSrc, {
+        type: preview.type,
+        src: preview.originalSrc,
+        label: name,
+        zoomed,
+        setZoomed,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
+      });
+    }
+
+    return () => {
+      imagesRegistry.delete(preview.originalSrc);
+    };
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
+
+  const openGallery = useCallback(() => {
+    if (preview) {
+      setZoomed(true);
+    } else {
+      onDownloadClick?.();
+    }
+  }, [preview, onDownloadClick]);
+
+  return {openGallery};
+}