@fibery/ui-kit 1.40.0 → 1.40.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 1.40.1
+
+### Patch Changes
+
+- f44f43b: add asChild to <Button/>
+
 ## 1.40.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.40.0",
+  "version": "1.40.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -11,6 +11,7 @@
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-navigation-menu": "1.2.1",
+    "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
@@ -57,10 +58,10 @@
   "devDependencies": {
     "@babel/core": "7.28.5",
     "@babel/runtime": "7.28.4",
-    "@testing-library/dom": "8.19.1",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/react": "16.3.1",
+    "@testing-library/user-event": "14.6.1",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/history": "4.7.11",
@@ -82,8 +83,8 @@
     "svgo": "2.8.0",
     "typescript": "5.9.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.1",
-    "@fibery/eslint-config": "8.6.2"
+    "@fibery/eslint-config": "8.6.2",
+    "@fibery/babel-preset": "7.4.1"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/appIcons.json

@@ -13063,6 +13063,16 @@
     "imageUrl": "https://images-temp.fibery.io/ui/appIcons/linear.svg",
     "file": "linear.svg"
   },
+  {
+    "name": "Stripe",
+    "short_names": ["stripe"],
+    "customCategory": "Integrations",
+    "text": "",
+    "emoticons": [],
+    "keywords": ["logo", "brand", "integration", "stripe"],
+    "imageUrl": "https://images-temp.fibery.io/ui/appIcons/stripe.svg",
+    "file": "stripe.svg"
+  },
   {
     "name": "Openion",
     "short_names": ["openion"],

package/src/box.tsx

@@ -296,7 +296,7 @@ const defaultRadius = {
   rb: border.radius6,
   lb: border.radius6,
 };
-type Props = HTMLProps<HTMLDivElement> & {
+export type BoxProps = HTMLProps<HTMLDivElement> & {
   as?: React.ElementType;
 } & {
   ref?: Ref<HTMLDivElement>;
@@ -342,7 +342,7 @@ type Props = HTMLProps<HTMLDivElement> & {
  * Fibery system card-like container with all mouse, focus and selected states support.
  * States described at: https://www.figma.com/file/Qff2eEFvZhjpxSqeFD5n58/FI---UI-Projects?type=design&node-id=4085%3A30506&mode=design&t=UvkBPcZSg5hKi86D-1
  */
-export const Box = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const {
     selected,
     done,

package/src/button/base-button.tsx

@@ -1,4 +1,5 @@
 import {css, CSSProperties, cx} from "@linaria/core";
+import {Slot} from "@radix-ui/react-slot";
 import {forwardRef} from "react";
 import {themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";
@@ -12,6 +13,7 @@ export type BaseButtonProps = {
   color?: ButtonColor;
   pressed?: boolean;
   supportMobile?: boolean;
+  asChild?: boolean;
 } & React.ComponentPropsWithRef<"button">;
 
 export const xLargeButtonHeight = 40;
@@ -36,6 +38,7 @@ export const baseButton = css`
 
   @media (any-hover: hover) {
     &:hover:not(:disabled) {
+      color: var(--fibery-button-text-color);
       background-color: var(--fibery-button-hover-color);
     }
   }
@@ -112,13 +115,25 @@ const getColors = (variant: ButtonVariant, color: ButtonColor) => {
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
   (
-    {variant = "solid", color = "accent", type = "button", className, children, style, pressed, ...buttonProps},
+    {
+      variant = "solid",
+      color = "accent",
+      type = "button",
+      className,
+      children,
+      style,
+      pressed,
+      asChild,
+      ...buttonProps
+    },
     ref
   ) => {
     const colors = getColors(variant, color);
 
+    const Component = asChild ? Slot : "button";
+
     return (
-      <button
+      <Component
         style={{...colors, ...style}}
         aria-pressed={pressed || buttonProps["aria-pressed"]}
         data-variant={variant}
@@ -129,7 +144,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
         {...buttonProps}
       >
         {children}
-      </button>
+      </Component>
     );
   }
 );

package/src/button/button.tsx

@@ -1,11 +1,12 @@
 import {css, cx} from "@linaria/core";
+import {Slot, Slottable} from "@radix-ui/react-slot";
 import {forwardRef} from "react";
 import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
-import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
-import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 import {useIsPhone} from "../use-is-phone";
+import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
+import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
 
 export type ButtonProps = {
   size?: ButtonSize;
@@ -193,12 +194,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       shortcut,
       fullWidth,
+      asChild,
       ...buttonProps
     },
     ref
   ) => {
     const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
     const isPhone = useIsPhone();
+
+    const Component = asChild ? Slot : "button";
+
     return (
       <BaseButton
         ref={ref}
@@ -213,12 +218,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           iconEnd && withIconEnd,
           !children && withoutChildren
         )}
+        asChild
         {...buttonProps}
       >
-        {pending ? <SpinnerIcon /> : iconStart}
-        {children}
-        {iconEnd}
-        {shortcut && isSupportHardwareKeyboard ? <span className={shortcutContainer}>{shortcut}</span> : null}
+        <Component>
+          {pending ? <SpinnerIcon /> : iconStart}
+          <Slottable>{children}</Slottable>
+          {iconEnd}
+          {shortcut && isSupportHardwareKeyboard ? <span className={shortcutContainer}>{shortcut}</span> : null}
+        </Component>
       </BaseButton>
     );
   }

package/src/button/icon-button.tsx

@@ -9,7 +9,10 @@ import {useIsPhone} from "../use-is-phone";
 export type IconButtonProps = {
   size?: ButtonSize;
   pending?: boolean;
-} & BaseButtonProps;
+
+  /** NOTE: it won't work properly together with `pending` prop. TODO: figure out how to use Slottable correctly (position spinner as absolute above?) */
+  asChild?: boolean;
+} & Omit<BaseButtonProps, "asChild">;
 
 export const iconButton = css`
   display: flex;

package/src/dot.tsx

@@ -0,0 +1,36 @@
+import {css, CSSProperties, cx} from "@linaria/core";
+import {space, themeVars} from "./design-system";
+import {useMemo} from "react";
+
+const dotColorVar = "--fibery-dot-color";
+
+const dotCss = css`
+  background-color: var(${dotColorVar});
+  border-radius: 50%;
+
+  &[data-size="small"] {
+    width: ${space.s4}px;
+    height: ${space.s4}px;
+  }
+
+  &[data-size="medium"] {
+    width: ${space.s6}px;
+    height: ${space.s6}px;
+  }
+`;
+
+type Props = {
+  className?: string;
+  color?: string;
+  size?: "small" | "medium";
+} & React.ComponentProps<"div">;
+
+export const Dot = ({className, color = themeVars.active, size = "small", style, ...props}: Props) => {
+  const colors: CSSProperties = useMemo(() => {
+    return {
+      [dotColorVar]: color,
+    };
+  }, [color]);
+
+  return <div className={cx(className, dotCss)} style={{...colors, ...style}} data-size={size} {...props} />;
+};

package/src/file-item-2.tsx

@@ -102,6 +102,8 @@ export type FileItemProps = {
   disabled?: boolean;
 };
 
+export const minFileTileWidth = 120;
+
 export function FileItem(props: FileItemProps) {
   const {onDownloadClick, onRemoveClick} = props;
   const {name, thumbnailUrl, status, previewData: preview, contentType} = props.data;
@@ -133,7 +135,7 @@ export function FileItem(props: FileItemProps) {
 
   useEffect(() => {
     if (!preview) {
-      return;
+      return undefined;
     }
 
     if (zoomed) {
@@ -152,6 +154,10 @@ export function FileItem(props: FileItemProps) {
         actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
       });
     }
+
+    return () => {
+      imagesRegistry.delete(preview.originalSrc);
+    };
   }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
 
   const onContainerClick = useCallback(() => {
@@ -169,6 +175,7 @@ export function FileItem(props: FileItemProps) {
           css`
             flex: 1 0 0;
             height: 100%;
+            min-width: ${minFileTileWidth}px;
           `,
           isBackgroundReady &&
             css`
@@ -258,10 +265,9 @@ export function FileItem(props: FileItemProps) {
                 </Icon>
                 <div
                   className={css`
-                    align-content: center;
-
                     display: flex;
-                    align-items: center;
+                    width: 100%;
+                    justify-content: center;
                     gap: 10px;
                     flex-shrink: 0;
                     color: ${themeVars.colorTextMenuItem};
@@ -272,8 +278,6 @@ export function FileItem(props: FileItemProps) {
                   <FileTitle
                     title={name}
                     className={css`
-                      -webkit-line-clamp: 1;
-                      -webkit-box-orient: vertical;
                       overflow: hidden;
                       text-overflow: ellipsis;
                     `}
@@ -327,10 +331,10 @@ export function FileItem(props: FileItemProps) {
                 <div
                   className={css`
                     display: flex;
+                    width: 100%;
                     align-self: flex-start;
                     align-items: flex-end;
                     text-overflow: ellipsis;
-                    //overflow: hidden;
                     box-sizing: border-box;
                   `}
                 >
@@ -440,16 +444,12 @@ function FileTitle({title, className}: {title: string; className?: string}) {
           vertical-align: top;
           text-align: center;
           justify-content: center;
-          word-break: break-word;
           overflow: hidden;
           font-size: ${fontSize.mini}px;
           font-weight: ${fontWeight.medium};
           line-height: ${lineHeight.heading};
           text-transform: none;
           text-overflow: ellipsis;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-
           &:hover {
             text-decoration: none;
             color: inherit;
@@ -463,7 +463,7 @@ function FileTitle({title, className}: {title: string; className?: string}) {
           display: flex;
           min-width: 0;
           align-items: center;
-          max-width: 120px;
+          max-width: 180px;
         `}
       >
         <span

package/src/html-styles.ts

@@ -142,7 +142,7 @@ const htmlStyles = {
     paddingTop: space.s3,
     paddingBottom: space.s3,
     ...textStyles.big,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& .fibery-rich-text-check-item": {
     marginTop: space.s3,
@@ -150,7 +150,7 @@ const htmlStyles = {
     paddingTop: space.s3,
     paddingBottom: space.s3,
     ...textStyles.big,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& table": {
     marginTop: space.s8,
@@ -167,7 +167,7 @@ const htmlStyles = {
       paddingTop: space.s3,
       paddingBottom: space.s3,
       ...textStyles.big,
-      lineHeight: lineHeight.text,
+      lineHeight: lineHeight.regular,
     },
   },
   "& .code-block": {
@@ -223,14 +223,12 @@ const htmlStyles = {
     },
   },
   "& > *:first-child": {
-    marginTop: 0,
+    marginTop: space.s3,
     paddingTop: space.s3,
     paddingBottom: space.s3,
   },
   "& > *:last-child": {
-    marginBottom: 0,
-    paddingTop: space.s3,
-    paddingBottom: space.s3,
+    marginBottom: space.s3,
   },
   "& > .fibery-rich-text-image-block:last-child": {
     marginBottom: space.s4,
@@ -352,7 +350,7 @@ const smallHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& .fibery-rich-text-check-item": {
     marginTop: space.s2,
@@ -360,7 +358,7 @@ const smallHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& table": {
     marginTop: space.s6,
@@ -377,7 +375,7 @@ const smallHtmlStyles = {
       paddingTop: space.s2,
       paddingBottom: space.s2,
       ...textStyles.regular,
-      lineHeight: lineHeight.text,
+      lineHeight: lineHeight.regular,
     },
   },
   "& .code-block": {
@@ -439,8 +437,6 @@ const smallHtmlStyles = {
   },
   "& > *:last-child": {
     marginBottom: 0,
-    paddingTop: space.s2,
-    paddingBottom: space.s2,
   },
   "& > .fibery-rich-text-image-block:last-child": {
     marginBottom: space.s2,
@@ -546,7 +542,7 @@ const chatHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
     [`${mobileRootSelector} &`]: {
       ...textStyles.big,
     },
@@ -557,7 +553,7 @@ const chatHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& table": {
     marginTop: space.s4,
@@ -574,7 +570,7 @@ const chatHtmlStyles = {
       paddingTop: space.s2,
       paddingBottom: space.s2,
       ...textStyles.regular,
-      lineHeight: lineHeight.text,
+      lineHeight: lineHeight.regular,
     },
   },
   "& .code-block": {

package/src/icons/ast/QuickFilter.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const QuickFilter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.25 2A2.75 2.75 0 0 1 18 4.75v10.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25V4.75A2.75 2.75 0 0 1 4.75 2h10.5ZM4.75 3.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75Zm6.5 8.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5h2.5Zm1-2.75a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5Zm1-2.75a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h6.5Z","fill":"#000"},"children":[]}],"metadata":""}]},"name":"quick-filter"};
+
+export default QuickFilter;

package/src/icons/ast/QuickFilterPersonal.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const QuickFilterPersonal: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M2.75 11.25a.75.75 0 0 1 .75.75v3.25c0 .69.56 1.25 1.25 1.25H8A.75.75 0 0 1 8 18H4.75A2.75 2.75 0 0 1 2 15.25V12a.75.75 0 0 1 .75-.75Zm14.5 0A.75.75 0 0 1 18 12v3.25A2.75 2.75 0 0 1 15.25 18H12a.75.75 0 0 1 0-1.5h3.25c.69 0 1.25-.56 1.25-1.25V12a.75.75 0 0 1 .75-.75Zm-6 .75a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5h2.5Zm1-2.75a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5ZM8 2a.75.75 0 0 1 0 1.5H4.75c-.69 0-1.25.56-1.25 1.25V8A.75.75 0 0 1 2 8V4.75A2.75 2.75 0 0 1 4.75 2H8Zm7.25 0A2.75 2.75 0 0 1 18 4.75V8a.75.75 0 0 1-1.5 0V4.75c0-.69-.56-1.25-1.25-1.25H12A.75.75 0 0 1 12 2h3.25Zm-2 4.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h6.5Z","fill":"#000"},"children":[]}],"metadata":""}]},"name":"quick-filter-personal"};
+
+export default QuickFilterPersonal;

package/src/icons/ast/index.tsx

@@ -246,6 +246,8 @@ export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
+export { default as QuickFilterPersonal } from './QuickFilterPersonal';
+export { default as QuickFilter } from './QuickFilter';
 export { default as ReadOnly } from './ReadOnly';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';

package/src/icons/react/QuickFilter.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import QuickFilterSvg from '../ast/QuickFilter';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const QuickFilter = forwardRef<SVGSVGElement, IconBaseProps>(function QuickFilter(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={QuickFilterSvg} />});
+
+export default QuickFilter;

package/src/icons/react/QuickFilterPersonal.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import QuickFilterPersonalSvg from '../ast/QuickFilterPersonal';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const QuickFilterPersonal = forwardRef<SVGSVGElement, IconBaseProps>(function QuickFilterPersonal(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={QuickFilterPersonalSvg} />});
+
+export default QuickFilterPersonal;

package/src/icons/react/index.tsx

@@ -246,6 +246,8 @@ export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
+export { default as QuickFilterPersonal } from './QuickFilterPersonal';
+export { default as QuickFilter } from './QuickFilter';
 export { default as ReadOnly } from './ReadOnly';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';

package/src/icons/svg/quick-filter-personal.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.75 11.25C3.16421 11.25 3.5 11.5858 3.5 12V15.25C3.5 15.9404 4.05964 16.5 4.75 16.5H8C8.41421 16.5 8.75 16.8358 8.75 17.25C8.75 17.6642 8.41421 18 8 18H4.75C3.23122 18 2 16.7688 2 15.25V12C2 11.5858 2.33579 11.25 2.75 11.25ZM17.25 11.25C17.6642 11.25 18 11.5858 18 12V15.25C18 16.7688 16.7688 18 15.25 18H12C11.5858 18 11.25 17.6642 11.25 17.25C11.25 16.8358 11.5858 16.5 12 16.5H15.25C15.9404 16.5 16.5 15.9404 16.5 15.25V12C16.5 11.5858 16.8358 11.25 17.25 11.25ZM11.25 12C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H8.75C8.33579 13.5 8 13.1642 8 12.75C8 12.3358 8.33579 12 8.75 12H11.25ZM12.25 9.25C12.6642 9.25 13 9.58579 13 10C13 10.4142 12.6642 10.75 12.25 10.75H7.75C7.33579 10.75 7 10.4142 7 10C7 9.58579 7.33579 9.25 7.75 9.25H12.25ZM8 2C8.41421 2 8.75 2.33579 8.75 2.75C8.75 3.16421 8.41421 3.5 8 3.5H4.75C4.05964 3.5 3.5 4.05964 3.5 4.75V8C3.5 8.41421 3.16421 8.75 2.75 8.75C2.33579 8.75 2 8.41421 2 8V4.75C2 3.23122 3.23122 2 4.75 2H8ZM15.25 2C16.7688 2 18 3.23122 18 4.75V8C18 8.41421 17.6642 8.75 17.25 8.75C16.8358 8.75 16.5 8.41421 16.5 8V4.75C16.5 4.05964 15.9404 3.5 15.25 3.5H12C11.5858 3.5 11.25 3.16421 11.25 2.75C11.25 2.33579 11.5858 2 12 2H15.25ZM13.25 6.5C13.6642 6.5 14 6.83579 14 7.25C14 7.66421 13.6642 8 13.25 8H6.75C6.33579 8 6 7.66421 6 7.25C6 6.83579 6.33579 6.5 6.75 6.5H13.25Z" fill="black"/>
+</svg>

package/src/icons/svg/quick-filter.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.25 2C16.7688 2 18 3.23122 18 4.75V15.25C18 16.7688 16.7688 18 15.25 18H4.75C3.23122 18 2 16.7688 2 15.25V4.75C2 3.23122 3.23122 2 4.75 2H15.25ZM4.75 3.5C4.05964 3.5 3.5 4.05964 3.5 4.75V15.25C3.5 15.9404 4.05964 16.5 4.75 16.5H15.25C15.9404 16.5 16.5 15.9404 16.5 15.25V4.75C16.5 4.05964 15.9404 3.5 15.25 3.5H4.75ZM11.25 12C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H8.75C8.33579 13.5 8 13.1642 8 12.75C8 12.3358 8.33579 12 8.75 12H11.25ZM12.25 9.25C12.6642 9.25 13 9.58579 13 10C13 10.4142 12.6642 10.75 12.25 10.75H7.75C7.33579 10.75 7 10.4142 7 10C7 9.58579 7.33579 9.25 7.75 9.25H12.25ZM13.25 6.5C13.6642 6.5 14 6.83579 14 7.25C14 7.66421 13.6642 8 13.25 8H6.75C6.33579 8 6 7.66421 6 7.25C6 6.83579 6.33579 6.5 6.75 6.5H13.25Z" fill="black"/>
+</svg>

package/src/images-gallery/get-gallery-src.ts

@@ -0,0 +1,71 @@
+import {thumbnailsMimeTypesWhiteList} from "./thumbnails-mime-types-white-list";
+
+export function getGallerySrc({
+  src,
+  contentType,
+  contentLength,
+  isPhone,
+}: {
+  src: string;
+  contentType: string;
+  contentLength: number;
+  isPhone: boolean;
+}): null | {
+  type: "iframe" | "video" | "image";
+  src: string;
+} {
+  const isFiberyFile = src?.startsWith("/api/files");
+
+  if (!isPhone && isFiberyFile && contentType?.startsWith("text/") && contentLength < 2 * 1024 * 1024) {
+    const url = new URL(src, `${window.location}`);
+    url.searchParams.append("plain-text", "true");
+
+    return {
+      type: "iframe",
+      src: url.href,
+    };
+  }
+
+  if (!contentType || !thumbnailsMimeTypesWhiteList.has(contentType)) {
+    return null;
+  }
+
+  if (ImageContentTypes.includes(contentType)) {
+    return {
+      type: "image",
+      src,
+    };
+  }
+
+  if (VideoContentTypes.includes(contentType)) {
+    return {
+      type: "video",
+      src,
+    };
+  }
+
+  if (!isPhone && IframeContentTypes.includes(contentType)) {
+    return {
+      type: "iframe",
+      src: new URL(src, `${window.location}`).href,
+    };
+  }
+
+  return null;
+}
+
+const ImageContentTypes = [
+  "image/apng",
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/avif",
+  "image/gif",
+  "image/x-icon",
+  "image/bmp",
+  "image/tiff",
+  "image/svg+xml",
+];
+
+const VideoContentTypes = ["video/mp4", "video/quicktime"];
+const IframeContentTypes = ["application/pdf"];

package/src/images-gallery/images-gallery.tsx

@@ -340,7 +340,7 @@ export function createPhotoSwipeLightbox(
   return photoSwipeLightbox;
 }
 
-function initGallery(
+export function initGallery(
   imagesRegistry: Registry,
   {toastQueue, themeMode, isPhone}: {toastQueue: ToastQueue; themeMode: ThemeMode; isPhone: boolean}
 ) {

package/src/images-gallery/thumbnails-mime-types-white-list.ts

@@ -0,0 +1,17 @@
+export const thumbnailsMimeTypesWhiteList = new Set([
+  "image/apng",
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/avif",
+  "image/gif",
+  "image/x-icon",
+  "image/bmp",
+  "image/tiff",
+  "image/heic",
+  "image/svg+xml",
+  "video/mp4",
+  "video/quicktime",
+  "application/pdf",
+  "image/vnd.adobe.photoshop",
+]);