@fibery/ui-kit 1.39.1 → 1.40.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 1.40.0
+
+### Minor Changes
+
+- 589e0f6: add new icon TypeId
+
 ## 1.39.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.39.1",
+  "version": "1.40.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -39,7 +39,6 @@
     "react-color": "2.19.3",
     "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",

package/src/button/select-button.tsx

@@ -34,10 +34,18 @@ export type SelectButtonProps = {
    * Should be used as an escape hatch for components like ui-kit/src/popup that don't set "aria-expanded"
    */
   open?: boolean;
-} & Omit<ButtonProps, "iconEnd">;
+} & ButtonProps;
 
 export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(function SelectButton(
-  {size = "medium", className, open, variant = "ghost", color = "neutral", ...rest},
+  {
+    size = "medium",
+    className,
+    open,
+    variant = "ghost",
+    iconEnd = <ArrowBottom className={iconSize[size]} />,
+    color = "neutral",
+    ...rest
+  },
   forwardedRef
 ) {
   return (
@@ -45,7 +53,7 @@ export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(fun
       ref={forwardedRef}
       aria-expanded={open}
       size={size}
-      iconEnd={<ArrowBottom className={iconSize[size]} />}
+      iconEnd={iconEnd}
       variant={variant}
       color={color}
       className={className}

package/src/collapsible/index.tsx

@@ -36,10 +36,10 @@ export const CollapsibleContent = styled(Collapsible.Content)`
 
   @media (prefers-reduced-motion: no-preference) {
     &[data-state="open"] {
-      animation: slideDown 150ms ease-out;
+      animation: slideDown 120ms ease-out;
     }
     &[data-state="closed"] {
-      animation: slideUp 150ms ease-out;
+      animation: slideUp 120ms ease-out;
     }
   }
 `;

package/src/command-menu/index.tsx

@@ -10,8 +10,10 @@ import Search from "../icons/react/Search";
 
 export const CommandMenuRoot = styled(CommandRoot)`
   display: flex;
-  height: 100%;
-  width: 100%;
+  :where(&) {
+    height: 100%;
+    width: 100%;
+  }
   flex-direction: column;
   overflow: hidden;
   border-radius: ${border.radius8}px;

package/src/copy-to-clipboard.ts

@@ -1 +1,11 @@
 export const copyToClipboard = (text: string) => window.navigator.clipboard.writeText(text);
+export const copyUrlToClipboard = ({url, label}: {url: string; label?: string}) => {
+  const htmlString = `<a href="${url}" target="_blank">${label || url}</a>`;
+
+  return window.navigator.clipboard.write([
+    new ClipboardItem({
+      "text/html": new Blob([htmlString], {type: "text/html"}),
+      "text/plain": url,
+    }),
+  ]);
+};

package/src/file-item-2.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import {css, cx} from "@linaria/core";
-import {useCallback, useEffect, useState} from "react";
+import {CSSProperties, useCallback, useEffect, useState} from "react";
 import {ActionsMenu, ActionsMenuItem, ActionsMenuSeparator} from "./actions-menu";
 import {ActionsButtonCompact} from "./button/actions-button-compact";
 import {border, colors, space, themeVars, fontSize, fontWeight, lineHeight} from "./design-system";
@@ -17,11 +17,12 @@ import Link from "./icons/react/Link";
 import RicheditorOpenLink from "./icons/react/RicheditorOpenLink";
 import Spinner from "./icons/react/Spinner";
 import AppWiki from "./icons/react/AppWiki";
-import {copyToClipboard} from "./copy-to-clipboard";
+import {copyUrlToClipboard} 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";
+import Pencil from "./icons/react/Pencil";
 
 const fileItemStyle = css`
   display: block;
@@ -30,13 +31,20 @@ const fileItemStyle = css`
   background-size: cover;
   text-decoration: none;
   border-radius: ${space.s8}px;
-  border: 1px solid ${themeVars.separatorColor};
   background-clip: padding-box;
   &:focus {
     text-decoration: none;
   }
 `;
 
+const thumbnailStyle = css`
+  border: 1px solid ${themeVars.separatorColor};
+`;
+
+const iconOnlyStyle = css`
+  border: 1px solid ${themeVars.colorBorderButtonOutlineNeutralDefault};
+`;
+
 const overlayStyle = css`
   width: 100%;
   height: 100%;
@@ -64,7 +72,15 @@ const fileOverlayStyle = css`
   background: transparent;
 `;
 
+const actionsButtonStyle = css`
+  position: absolute;
+  top: ${space.s8}px;
+  right: ${space.s8}px;
+  opacity: 0;
+`;
+
 export type FileItemType = {
+  uid: string;
   name: string;
   url: string;
   downloadUrl?: string | null;
@@ -82,6 +98,7 @@ export type FileItemProps = {
   data: FileItemType;
   onDownloadClick?: () => void;
   onRemoveClick?: (x: FileItemType) => void;
+  onRenameClick?: (x: {id: string; name: string}) => void;
   disabled?: boolean;
 };
 
@@ -89,7 +106,8 @@ export function FileItem(props: FileItemProps) {
   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 [isThumbnailLoadFailed, setIsThumbnailLoadFailed] = useState(false);
+  const isBackgroundReady = !isThumbnailLoadFailed && Boolean(thumbnailUrl && !isPending);
   const [isActionsOpened, setIsActionsOpened] = useState(false);
 
   const showFileIcon = !isPending && !isBackgroundReady;
@@ -106,6 +124,7 @@ export function FileItem(props: FileItemProps) {
     imagesRegistry.set(preview.originalSrc, {
       type: preview.type,
       src: preview.originalSrc,
+      label: name,
       zoomed: false,
       setZoomed,
       actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
@@ -127,6 +146,7 @@ export function FileItem(props: FileItemProps) {
       imagesRegistry.set(preview.originalSrc, {
         type: preview.type,
         src: preview.originalSrc,
+        label: name,
         zoomed,
         setZoomed,
         actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
@@ -143,63 +163,69 @@ export function FileItem(props: FileItemProps) {
   }, [preview, onDownloadClick]);
 
   return (
-    <div
-      className={cx(
-        css`
-          flex: 1 0 0;
-          height: 100%;
-        `,
-        isBackgroundReady &&
-          css`
-            &:hover .${overlayStyle} {
-              opacity: 1;
-              background-position: 0 0;
-              color: ${themeVars.whiteColor};
-              background-color: rgba(0, 0, 0, 0.6);
-            }
-          `,
-        isBackgroundReady &&
-          isActionsOpened &&
-          css`
-            .${overlayStyle} {
-              opacity: 1;
-              background-position: 0 0;
-              color: ${themeVars.whiteColor};
-              background-color: rgba(0, 0, 0, 0.6);
-            }
-          `
-      )}
-    >
+    <>
       <div
-        style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
-        onClick={onContainerClick}
         className={cx(
           css`
-            flex-shrink: 0;
+            flex: 1 0 0;
+            height: 100%;
           `,
-          fileItemStyle,
-          isPending &&
+          isBackgroundReady &&
+            css`
+              &:hover .${overlayStyle} {
+                opacity: 1;
+                background-position: 0 0;
+                color: ${themeVars.whiteColor};
+                background-color: rgba(0, 0, 0, 0.6);
+              }
+            `,
+          isBackgroundReady &&
+            isActionsOpened &&
+            css`
+              .${overlayStyle} {
+                opacity: 1;
+                background-position: 0 0;
+                color: ${themeVars.whiteColor};
+                background-color: rgba(0, 0, 0, 0.6);
+              }
+            `,
+          !isBackgroundReady &&
+            css`
+              &:hover .${overlayStyle} {
+                background-color: ${themeVars.colorBgMenuItemHover};
+              }
+              &:hover .${actionsButtonStyle} {
+                opacity: 1;
+              }
+            `,
+          !isBackgroundReady &&
+            isActionsOpened &&
             css`
-              ${{backgroundColor: themeVars.entityCardSelectedColor}}
+              .${overlayStyle} {
+                background-color: ${themeVars.colorBgMenuItemHover};
+              }
+              .${actionsButtonStyle} {
+                opacity: 1;
+              }
             `
         )}
       >
-        {isPending && (
-          <div
-            className={css`
-              display: flex;
-              flex-direction: column;
-              justify-content: center; /* centers vertically */
-              align-items: center; /* centers horizontally */
-              height: 100%;
-              width: 100%;
-            `}
-          >
-            <Spinner />
-          </div>
-        )}
-        {showFileIcon && (
-          <div className={cx(overlayStyle, fileOverlayStyle)}>
+        <div
+          style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+          onClick={onContainerClick}
+          className={cx(
+            css`
+              flex-shrink: 0;
+            `,
+            fileItemStyle,
+            showFileIcon ? iconOnlyStyle : thumbnailStyle,
+            isPending &&
+              css`
+                ${{backgroundColor: themeVars.entityCardSelectedColor}}
+              `
+          )}
+        >
+          {isPending && (
             <div
               className={css`
                 display: flex;
@@ -208,101 +234,122 @@ export function FileItem(props: FileItemProps) {
                 align-items: center; /* centers horizontally */
                 height: 100%;
                 width: 100%;
-                padding-top: ${space.s1}px;
-                gap: ${space.s2}px;
               `}
             >
-              <Icon containerSize={40} iconSize={40}>
-                <FileIcon contentType={contentType} />
-              </Icon>
+              <Spinner />
+            </div>
+          )}
+          {showFileIcon && (
+            <div className={cx(overlayStyle, fileOverlayStyle)}>
               <div
                 className={css`
-                  align-content: center;
-
                   display: flex;
-                  align-items: center;
-                  gap: 10px;
-                  flex-shrink: 0;
-                  color: ${themeVars.colorTextMenuItem};
-                  text-overflow: ellipsis;
-                  overflow: hidden;
+                  flex-direction: column;
+                  justify-content: center; /* centers vertically */
+                  align-items: center; /* centers horizontally */
+                  height: 100%;
+                  width: 100%;
+                  padding-top: ${space.s1}px;
+                  gap: ${space.s2}px;
                 `}
               >
-                <FileTitle
-                  title={name}
+                <Icon containerSize={40} iconSize={40}>
+                  <FileIcon contentType={contentType} />
+                </Icon>
+                <div
                   className={css`
-                    -webkit-line-clamp: 1;
-                    -webkit-box-orient: vertical;
-                    overflow: hidden;
+                    align-content: center;
+
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                    flex-shrink: 0;
+                    color: ${themeVars.colorTextMenuItem};
                     text-overflow: ellipsis;
+                    overflow: hidden;
                   `}
-                />
+                >
+                  <FileTitle
+                    title={name}
+                    className={css`
+                      -webkit-line-clamp: 1;
+                      -webkit-box-orient: vertical;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    `}
+                  />
+                </div>
               </div>
-            </div>
-            <div
-              className={css`
-                position: absolute;
-                top: ${space.s8}px;
-                right: ${space.s8}px;
-              `}
-            >
-              <FileActionsMenu
-                setIsActionsOpened={setIsActionsOpened}
-                data={props.data}
-                disabled={props.disabled}
-                isBackgroundReady={isBackgroundReady}
-                onDownloadClick={onDownloadClick}
-                onRemoveClick={onRemoveClick}
-              />
-            </div>
-          </div>
-        )}
-        {!isPending && !showFileIcon && (
-          <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
-            <div
-              className={css`
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between; /* Top + bottom placement */
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                box-sizing: border-box;
-                gap: ${space.s8}px;
-              `}
-            >
-              <div
-                className={css`
-                  align-self: flex-end;
-                `}
-              >
+              <div className={actionsButtonStyle}>
                 <FileActionsMenu
                   setIsActionsOpened={setIsActionsOpened}
                   data={props.data}
                   disabled={props.disabled}
-                  isBackgroundReady={isBackgroundReady}
                   onDownloadClick={onDownloadClick}
-                  onRemoveClick={props.onRemoveClick}
+                  onRemoveClick={onRemoveClick}
+                  onRenameClick={props.onRenameClick}
                 />
               </div>
+            </div>
+          )}
+          {!isPending && !showFileIcon && (
+            <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
               <div
                 className={css`
+                  position: relative;
                   display: flex;
-                  align-self: flex-start;
-                  align-items: flex-end;
-                  text-overflow: ellipsis;
-                  //overflow: hidden;
+                  flex-direction: column;
+                  justify-content: space-between; /* Top + bottom placement */
+                  width: 100%;
+                  height: 100%;
+                  overflow: hidden;
                   box-sizing: border-box;
+                  gap: ${space.s8}px;
                 `}
               >
-                <FileTitle title={name} />
+                <div
+                  className={css`
+                    align-self: flex-end;
+                  `}
+                >
+                  <FileActionsMenu
+                    setIsActionsOpened={setIsActionsOpened}
+                    data={props.data}
+                    disabled={props.disabled}
+                    actionsButtonStyle={
+                      isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined
+                    }
+                    onDownloadClick={onDownloadClick}
+                    onRemoveClick={props.onRemoveClick}
+                    onRenameClick={props.onRenameClick}
+                  />
+                </div>
+                <div
+                  className={css`
+                    display: flex;
+                    align-self: flex-start;
+                    align-items: flex-end;
+                    text-overflow: ellipsis;
+                    //overflow: hidden;
+                    box-sizing: border-box;
+                  `}
+                >
+                  <FileTitle title={name} />
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
+        {thumbnailUrl ? (
+          <img
+            style={{display: "none"}}
+            onError={() => setIsThumbnailLoadFailed(true)}
+            src={thumbnailUrl}
+            alt="invisible"
+          />
+        ) : null}
       </div>
-    </div>
+    </>
   );
 }
 
@@ -312,14 +359,16 @@ function FileActionsMenu({
   setIsActionsOpened,
   onDownloadClick,
   onRemoveClick,
-  isBackgroundReady,
+  onRenameClick,
+  actionsButtonStyle,
 }: {
   data: FileItemType;
   onDownloadClick?: () => void;
   onRemoveClick?: (data: FileItemType) => void;
+  onRenameClick?: (data: {id: string; name: string}) => void;
   disabled?: boolean;
   setIsActionsOpened: (val: boolean) => void;
-  isBackgroundReady: boolean;
+  actionsButtonStyle?: CSSProperties;
 }) {
   const toast = useToast();
 
@@ -331,14 +380,14 @@ function FileActionsMenu({
           className={css`
             z-index: 1;
           `}
-          style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
+          style={actionsButtonStyle}
         />
       }
     >
       <ActionsMenuItem
         Icon={Link}
         onSelect={() => {
-          copyToClipboard(`${window.origin}${data.url}`)
+          copyUrlToClipboard({url: `${window.origin}${data.url}`, label: data.name})
             .then(() => toast.success({title: "Link copied to clipboard"}))
             .catch((error) => toast.error({title: "Unable to copy link to clipboard", subTitle: error.message}));
         }}
@@ -359,6 +408,14 @@ function FileActionsMenu({
           <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
         </a>
       )}
+      {onRenameClick && data.status === "done" ? (
+        <>
+          <ActionsMenuSeparator />
+          <ActionsMenuItem Icon={Pencil} onSelect={() => onRenameClick?.({id: data.uid, name: data.name})}>
+            Rename
+          </ActionsMenuItem>
+        </>
+      ) : null}
       <ActionsMenuSeparator />
       <ActionsMenuItem Icon={Delete} onSelect={() => onRemoveClick?.(data)} dangerous disabled={disabled}>
         Delete
@@ -368,6 +425,10 @@ function FileActionsMenu({
 }
 
 function FileTitle({title, className}: {title: string; className?: string}) {
+  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(
@@ -383,7 +444,7 @@ function FileTitle({title, className}: {title: string; className?: string}) {
           overflow: hidden;
           font-size: ${fontSize.mini}px;
           font-weight: ${fontWeight.medium};
-          line-height: ${lineHeight.narrow};
+          line-height: ${lineHeight.heading};
           text-transform: none;
           text-overflow: ellipsis;
           -webkit-line-clamp: 1;
@@ -397,7 +458,33 @@ function FileTitle({title, className}: {title: string; className?: string}) {
         className
       )}
     >
-      {title}
+      <div
+        className={css`
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          max-width: 120px;
+        `}
+      >
+        <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>
     </div>
   );
 }
@@ -428,7 +515,10 @@ function FilePreviewActions({url, name, onDownloadClick}: {url: string; name: st
   );
 }
 
-function FileIcon({contentType}: {contentType: string}) {
+function FileIcon({contentType}: {contentType?: string}) {
+  if (!contentType) {
+    return <AppWiki />;
+  }
   if (contentType.startsWith("image/")) {
     return <FileImage />;
   }

package/src/file-item.tsx

@@ -111,6 +111,7 @@ export function FileItem(props: FileItemProps) {
     imagesRegistry.set(preview.originalSrc, {
       type: preview.type,
       src: preview.originalSrc,
+      label: name,
       contentType: preview.contentType,
       zoomed: false,
       setZoomed,
@@ -136,6 +137,7 @@ export function FileItem(props: FileItemProps) {
       imagesRegistry.set(preview.originalSrc, {
         type: preview.type,
         src: preview.originalSrc,
+        label: name,
         contentType: preview.contentType,
         zoomed,
         setZoomed,

package/src/guide-link.tsx

@@ -12,7 +12,7 @@ export const GuideLink: React.FC<GuideLinkProps> = ({href, children, size = "sma
   return (
     <a href={href} rel="noreferrer" target={"_blank"}>
       {children ? (
-        <Button iconStart={<HintIcon />} variant={variant} color="neutral" size={size}>
+        <Button iconStart={<HintIcon />} variant={variant} color="neutral" size={size} supportMobile>
           {children}
         </Button>
       ) : (

package/src/html-styles.ts

@@ -181,12 +181,8 @@ const htmlStyles = {
     paddingBottom: space.s24 + space.s4,
     paddingLeft: space.s12 + space.s4,
     paddingRight: space.s12 + space.s4,
-    backgroundColor: themeVars.codeBlockBgColor,
-    borderRadius: 6,
     ...textStyles.code,
-    "& *:last-child": {
-      marginBottom: 0,
-    },
+    marginBottom: 0,
   },
   "& code": {
     ...textStyles.code,
@@ -395,12 +391,8 @@ const smallHtmlStyles = {
     paddingBottom: space.s20 + space.s4,
     paddingLeft: space.s10 + space.s4,
     paddingRight: space.s10 + space.s4,
-    backgroundColor: themeVars.codeBlockBgColor,
-    borderRadius: 6,
     ...textStyles.code,
-    "& *:last-child": {
-      marginBottom: 0,
-    },
+    marginBottom: 0,
   },
   "& code": {
     ...textStyles.code,
@@ -596,8 +588,6 @@ const chatHtmlStyles = {
     paddingBottom: space.s20 + space.s4,
     paddingLeft: space.s10 + space.s4,
     paddingRight: space.s10 + space.s4,
-    backgroundColor: themeVars.codeBlockBgColor,
-    borderRadius: 6,
     ...textStyles.code,
     fontSize: typeSizes[5],
     "& *:last-child": {