@fibery/ui-kit 1.38.1 → 1.38.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @fibery/ui-kit
 
+## 1.38.2
+
+### Patch Changes
+
+- 91fc1ea: Bump react to 18.3.1
+- Updated dependencies [91fc1ea]
+  - @fibery/react@1.4.6
+
 ## 1.38.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.38.1",
+  "version": "1.38.2",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -37,23 +37,23 @@
     "rc-input-number": "8.5.0",
     "rc-progress": "3.4.1",
     "react-color": "2.19.3",
-    "react-day-picker": "8.1.4",
+    "react-day-picker": "8.10.1",
     "react-intersection-observer": "9.3.5",
     "react-medium-image-zoom": "5.2.10",
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
-    "react-virtuoso": "4.6.0",
-    "screenfull": "6.0.1",
+    "react-virtuoso": "4.14.1",
+    "screenfull": "6.0.2",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
     "@fibery/emoji-data": "2.7.1",
     "@fibery/helpers": "1.3.4",
-    "@fibery/react": "1.4.5"
+    "@fibery/react": "1.4.6"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",
@@ -69,16 +69,16 @@
     "@types/jest": "30.0.0",
     "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@wyw-in-js/babel-preset": "0.5.5",
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
     "glob": "7.1.7",
     "jest": "30.2.0",
     "jest-junit": "16.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
     "typescript": "5.9.3",

package/src/button/button.tsx

@@ -145,9 +145,8 @@ const buttonSize = {
     }
   `,
   xLarge: css`
-    font-size: ${textStyles.heading3.fontSize}px;
+    font-size: ${textStyles.heading4.fontSize}px;
     line-height: 20px;
-    letter-spacing: ${textStyles.heading3.letterSpacing};
 
     border-radius: ${border.radius6}px;
     min-height: ${xLargeButtonHeight}px;

package/src/card-container.tsx

@@ -256,7 +256,7 @@ const coverClassName = css`
 `;
 
 const coverWithContentClassName = css`
-  border-bottom: ${themeVars.shortcutBorderColor};
+  border-bottom: ${themeVars.shortcutBorder};
   margin-bottom: 0;
 `;
 

package/src/collapsible/index.tsx

@@ -1,6 +1,8 @@
 import {styled} from "@linaria/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
+export type CollapsibleRootProps = Collapsible.CollapsibleProps;
+
 export const CollapsibleRoot = Collapsible.Root;
 
 export const CollapsibleTrigger = Collapsible.Trigger;
@@ -34,10 +36,10 @@ export const CollapsibleContent = styled(Collapsible.Content)`
 
   @media (prefers-reduced-motion: no-preference) {
     &[data-state="open"] {
-      animation: slideDown 200ms ease-out;
+      animation: slideDown 150ms ease-out;
     }
     &[data-state="closed"] {
-      animation: slideUp 200ms ease-out;
+      animation: slideUp 150ms ease-out;
     }
   }
 `;

package/src/design-system.ts

@@ -299,10 +299,11 @@ export const themeColors = {
   ],
   entityNodeBgColor: [slate.slate2, slateDark.slate3],
   shortcutTextColor: [slate.slate9, slateDark.slate11],
-  shortcutBorderColor: [
+  shortcutBorder: [
     `1px solid ${getOpacities(slate.slate8).opacity50}`,
     `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
   ],
+  shortcutBorderColor: [getOpacities(slate.slate8).opacity50, getOpacities(slateDark.slate10).opacity20],
 
   // Input
   inputBgColor: [whiteA.whiteA0, slateDark.slate2],

package/src/fibermoji-placeholder.tsx

@@ -38,7 +38,7 @@ 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>`,
 ];
 
-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];
 });
@@ -58,7 +58,6 @@ interface FibermojiPlaceholderProps {
 
 export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({size, radius = "50%", title}) => {
   const eyes = useRef<HTMLDivElement>(null);
-
   const [fg, bg] = getColors(title ?? "unknown");
   const mouth = getMouth(title ?? "unknown");
   const letters = abbreviateName(title).split("");

package/src/file-item-2.tsx

@@ -1,11 +1,18 @@
+/* eslint-disable max-lines */
 import {css, cx} from "@linaria/core";
 import {useCallback, useEffect, useState} from "react";
 import {ActionsMenu, ActionsMenuItem, ActionsMenuSeparator} from "./actions-menu";
 import {ActionsButtonCompact} from "./button/actions-button-compact";
-import {border, colors, space, themeVars} from "./design-system";
+import {border, colors, space, themeVars, fontSize, fontWeight, lineHeight} from "./design-system";
 import {makeButtonColors} from "./button/make-button-colors";
 import Delete from "./icons/react/Delete";
 import FileDownload from "./icons/react/FileDownload";
+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 Link from "./icons/react/Link";
 import RicheditorOpenLink from "./icons/react/RicheditorOpenLink";
 import Spinner from "./icons/react/Spinner";
@@ -47,8 +54,8 @@ const imageOverlayStyle = css`
   border-radius: ${border.radius6}px;
   &:hover {
     background-position: 0 0;
-    color: ${themeVars.inversedTextColor},
-  },
+    color: ${themeVars.inversedTextColor};
+  }
 `;
 
 const fileOverlayStyle = css`
@@ -61,6 +68,7 @@ export type FileItemType = {
   url: string;
   downloadUrl?: string | null;
   thumbnailUrl: string | null;
+  contentType: string;
   previewData: null | {
     type: "image" | "video" | "iframe";
     previewSrc: string | null;
@@ -76,7 +84,7 @@ export type FileItemProps = {
 };
 
 export function FileItem(props: FileItemProps) {
-  const {name, url, thumbnailUrl, status, previewData: preview} = props.data;
+  const {name, url, thumbnailUrl, status, previewData: preview, contentType} = props.data;
   const isPending = status === "uploading" || status === "deleting";
   const isBackgroundReady = Boolean(thumbnailUrl && !isPending);
   const [isActionsOpened, setIsActionsOpened] = useState(false);
@@ -97,8 +105,9 @@ export function FileItem(props: FileItemProps) {
       src: preview.originalSrc,
       zoomed: false,
       setZoomed,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
     });
-  }, [imagesRegistry, preview]);
+  }, [imagesRegistry, name, preview]);
 
   useEffect(() => {
     if (!preview) {
@@ -117,9 +126,10 @@ export function FileItem(props: FileItemProps) {
         src: preview.originalSrc,
         zoomed,
         setZoomed,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
       });
     }
-  }, [galleryMethods, zoomed, preview, imagesRegistry]);
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
 
   const onContainerClick = useCallback(() => {
     if (preview) {
@@ -141,7 +151,7 @@ export function FileItem(props: FileItemProps) {
             &:hover .${overlayStyle} {
               opacity: 1;
               background-position: 0 0;
-              color: ${themeVars.inversedTextColor};
+              color: ${themeVars.whiteColor};
               background-color: rgba(0, 0, 0, 0.6);
             }
           `,
@@ -151,7 +161,7 @@ export function FileItem(props: FileItemProps) {
             .${overlayStyle} {
               opacity: 1;
               background-position: 0 0;
-              color: ${themeVars.inversedTextColor};
+              color: ${themeVars.whiteColor};
               background-color: rgba(0, 0, 0, 0.6);
             }
           `
@@ -200,7 +210,7 @@ export function FileItem(props: FileItemProps) {
               `}
             >
               <Icon containerSize={40} iconSize={40}>
-                <AppWiki />
+                <FileIcon contentType={contentType} />
               </Icon>
               <div
                 className={css`
@@ -279,8 +289,6 @@ export function FileItem(props: FileItemProps) {
                   text-overflow: ellipsis;
                   //overflow: hidden;
                   box-sizing: border-box;
-
-                  color: ${themeVars.colorBgSidebar};
                 `}
               >
                 <FileTitle title={name} />
@@ -354,18 +362,13 @@ function FileTitle({title, className}: {title: string; className?: string}) {
           padding: ${space.s2}px ${space.s5}px;
           height: 100%;
           vertical-align: top;
-
           text-align: center;
           justify-content: center;
-
           word-break: break-word;
           overflow: hidden;
-          /* UI/Heading/H8 (reg-400, up) */
-          font-family: Inter;
-          font-size: 10px;
-          font-style: normal;
-          font-weight: 500;
-          line-height: 125%; /* 12.5px */
+          font-size: ${fontSize.mini}px;
+          font-weight: ${fontWeight.medium};
+          line-height: ${lineHeight.narrow};
           text-transform: none;
           text-overflow: ellipsis;
           -webkit-line-clamp: 1;
@@ -384,6 +387,19 @@ function FileTitle({title, className}: {title: string; className?: string}) {
   );
 }
 
+function FilePreviewActions({url, name}: {url: string; name: string}) {
+  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>
+    </>
+  );
+}
+
 function stratFileDownload(url: string, filename: string) {
   const a = document.createElement("a");
   a.href = `${url}?attachment`;
@@ -395,14 +411,156 @@ function stratFileDownload(url: string, filename: string) {
   document.body.removeChild(a);
 }
 
-// const long = `long text long text long text long text long text long text long text long text long text long text long
-//       long text long text long text long text long text long text long text long text long text long text long text long
-//       text long text long text long text long text long text long text long text long text long text long text long text
-//       long text long text long text long text long text long text long text long text long text long text long text long
-//       text long text long text long text long text long text long text long text long text long text long text long text
-//       long text long text long text long text long text long text long text long text long text long text long text long
-//       text long text long text long text long text long text long text long text long text long text long text long text
-//       long text long text long text long text long text long text long text long text long text long text long text long
-//       text long text long text long text long text long text long text long text long text long text long text long text
-//       long text long text long text long text long text long text long text
-// `;
+function FileIcon({contentType}: {contentType: string}) {
+  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 <AppWiki />;
+}
+
+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",
+];