@fibery/ui-kit 1.38.0 → 1.38.2

package/src/images-gallery-2/slide-buttons.tsx

@@ -0,0 +1,271 @@
+import {PhotoSwipe} from "photoswipe/lightbox";
+import {useEffect, useMemo, useState} from "react";
+import {css} from "@linaria/core";
+import {IconButton} from "../button/icon-button";
+import Back from "../icons/react/Back";
+import ArrowForward from "../icons/react/ArrowForward";
+import LoupeZoomIn from "../icons/react/LoupeZoomIn";
+import LoupeZoomOut from "../icons/react/LoupeZoomOut";
+import RicheditorOpenLink from "../icons/react/RicheditorOpenLink";
+import Link from "../icons/react/Link";
+import Close from "../icons/react/Close";
+import {colors, createInlineTheme, getThemeColors, space} from "../design-system";
+import {safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
+import {Button} from "../button/button";
+import {copyToClipboard} from "../copy-to-clipboard";
+import {ToastProvider, useToast} from "../toast/toast-provider";
+import {ToastQueue} from "../toast/toast-queue";
+import {ActionsMenu} from "../actions-menu";
+import {ActionsButtonCompact} from "../button/actions-button-compact";
+import {ThemeProvider} from "../theme-provider";
+import {ThemeMode} from "../theme-settings";
+
+const barClassName = css`
+  position: absolute;
+  top: calc(${space.s20}px + var(${safeAreaInsetTopVar}));
+  right: calc(${space.s20}px + var(${safeAreaInsetRightVar}));
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end; /* align content to the right */
+  gap: ${space.s8}px; /* space between children */
+`;
+
+const wrapper = css`
+  width: 100%;
+  height: 100%;
+`;
+
+type SlideState = {
+  currIndex: number;
+  numItems: number;
+  src: string;
+  actions?: React.ReactNode;
+};
+
+export function SlideButtons({
+  pswp,
+  toastQueue,
+  items,
+  uiHandlers,
+}: {
+  pswp: PhotoSwipe;
+  toastQueue: ToastQueue;
+  themeMode: ThemeMode;
+  items: {
+    src: string;
+    actions?: React.ReactNode;
+  }[];
+  uiHandlers: {
+    showUI: () => void;
+    setForceShowUI: (value: boolean) => void;
+  };
+}) {
+  const [slideState, setSliceState] = useState<SlideState>(getSlideData(pswp, items));
+  useEffect(() => {
+    const handler = () => {
+      setSliceState(getSlideData(pswp, items));
+    };
+    pswp.on("slideActivate", handler);
+
+    return () => {
+      pswp.off("slideActivate", handler);
+    };
+  }, [items, pswp]);
+
+  const {theme, styles} = useMemo(() => {
+    const theme = getThemeColors(colors.brandColors.blue, "dark");
+    return {theme, styles: createInlineTheme(theme, emptyArray)};
+  }, []);
+
+  return (
+    <ToastProvider toastQueue={toastQueue}>
+      <ThemeProvider theme={theme}>
+        <div style={styles} className={wrapper}>
+          <div className={barClassName}>
+            <CopyURLButton pswp={pswp} showUI={uiHandlers.showUI} />
+            <ZoomButton pswp={pswp} showUI={uiHandlers.showUI} />
+            {slideState.actions ? (
+              <SlideActionsMenu actions={slideState.actions} uiHandlers={uiHandlers} />
+            ) : (
+              <IconButton
+                size="medium"
+                color="neutral"
+                variant="soft"
+                onClick={() => {
+                  window.open(slideState.src, "_blank");
+                  uiHandlers.showUI();
+                }}
+              >
+                <RicheditorOpenLink />
+              </IconButton>
+            )}
+
+            <IconButton
+              onClick={() => {
+                pswp.close();
+                uiHandlers.showUI();
+              }}
+              size="medium"
+              color="neutral"
+              variant="soft"
+            >
+              <Close />
+            </IconButton>
+          </div>
+          <div className="pswp__button--arrow--prev pswp__button--arrow">
+            <IconButton
+              disabled={slideState.currIndex === 0}
+              onClick={() => {
+                pswp.prev();
+                uiHandlers.showUI();
+              }}
+              size="medium"
+              color="neutral"
+              variant="soft"
+            >
+              <Back />
+            </IconButton>
+          </div>
+          <div className="pswp__button--arrow--next pswp__button--arrow">
+            <IconButton
+              disabled={slideState.currIndex === slideState.numItems - 1}
+              onClick={() => {
+                pswp.next();
+                uiHandlers.showUI();
+              }}
+              size="medium"
+              color="neutral"
+              variant="soft"
+            >
+              <ArrowForward />
+            </IconButton>
+          </div>
+        </div>
+      </ThemeProvider>
+    </ToastProvider>
+  );
+}
+
+function SlideActionsMenu({
+  actions,
+  uiHandlers,
+}: {
+  actions?: React.ReactNode;
+  uiHandlers: {showUI: () => void; setForceShowUI: (value: boolean) => void};
+}) {
+  const [container, setContainer] = useState<HTMLDivElement | null>();
+
+  return (
+    <div>
+      <ActionsMenu
+        onOpenChange={(value) => {
+          uiHandlers.setForceShowUI(value);
+        }}
+        contentStyles={css`
+          margin-top: ${space.s8}px;
+        `}
+        container={container}
+        trigger={<ActionsButtonCompact size="medium" color="neutral" variant="soft" onClick={uiHandlers.showUI} />}
+      >
+        {actions}
+      </ActionsMenu>
+      <div ref={setContainer} />
+    </div>
+  );
+}
+
+function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
+  const [zoomed, setZoomed] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!pswp) {
+      return undefined;
+    }
+
+    function handleZoomChange() {
+      const slide = pswp.currSlide;
+      if (!slide) {
+        return;
+      }
+
+      setIsVisible(slide.zoomLevels.fit !== 1);
+
+      const zoomed = slide.currZoomLevel > slide.zoomLevels.fit;
+      setZoomed(zoomed);
+    }
+
+    pswp.on("afterInit", handleZoomChange);
+    pswp.on("zoomPanUpdate", handleZoomChange);
+
+    return () => {
+      pswp.off("afterInit", handleZoomChange);
+      pswp.off("zoomPanUpdate", handleZoomChange);
+    };
+  }, [pswp]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      onClick={() => {
+        setZoomed(!zoomed);
+        pswp.toggleZoom();
+        showUI();
+      }}
+      size="medium"
+      color="neutral"
+      variant="soft"
+    >
+      {zoomed ? <LoupeZoomOut /> : <LoupeZoomIn />}
+    </IconButton>
+  );
+}
+
+function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
+  const toast = useToast();
+  return (
+    <Button
+      onClick={() => {
+        showUI();
+        if (!pswp?.currSlide?.data.src) {
+          toast.error({title: "Unable to copy."});
+          return;
+        }
+
+        const src = new URL(pswp.currSlide.data.src, `${window.location}`).href;
+        if (src) {
+          copyToClipboard(src)
+            .then(() => {
+              toast.success({title: "Copied!"});
+            })
+            .catch(() => {
+              toast.error({title: "Unable to copy."});
+            });
+        }
+      }}
+      size="medium"
+      variant="soft"
+      color="neutral"
+      iconStart={<Link />}
+      type="button"
+    >
+      Copy file URL
+    </Button>
+  );
+}
+
+const emptyArray: string[] = [];
+
+function getSlideData(pswp: PhotoSwipe, items: {src: string; actions?: React.ReactNode}[]) {
+  return {
+    currIndex: pswp.currIndex,
+    numItems: pswp.getNumItems(),
+    src: items[pswp.currIndex].src,
+    actions: items[pswp.currIndex].actions,
+  };
+}

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

@@ -0,0 +1,35 @@
+import React, {ReactNode, useCallback} from "react";
+import "react-medium-image-zoom/dist/styles.css";
+
+type Props = {
+  zoomed: boolean;
+  onZoomedChange: (value: boolean) => void;
+  children: ReactNode;
+  className?: string;
+  openOnClick?: boolean;
+  zoomImg?: {src: string; alt?: string};
+  actions?: ReactNode;
+};
+
+export const ZoomV2 = (props: Props) => {
+  const {zoomed, onZoomedChange, children, className, openOnClick} = props;
+  const onClick = useCallback(() => {
+    if (zoomed) {
+      onZoomedChange(false);
+    } else if (openOnClick) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange, openOnClick]);
+
+  const onDoubleClick = useCallback(() => {
+    if (!zoomed) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange]);
+
+  return (
+    <div className={className} onClick={onClick} onDoubleClick={openOnClick ? undefined : onDoubleClick}>
+      {children}
+    </div>
+  );
+};

package/src/kbd.tsx

@@ -0,0 +1,46 @@
+import {css, cx} from "@linaria/core";
+import {border, lineHeight, space, textStyles, themeVars} from "./design-system";
+import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
+
+export const kbdCss = css`
+  ${{
+    ...textStyles.small,
+    ...textStyles.numeric.tabularOn,
+  }}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: ${space.s18}px;
+  height: ${space.s18}px;
+  padding: ${space.s2}px;
+  border-radius: ${border.radius4}px;
+  border: ${themeVars.shortcutBorder};
+  color: ${themeVars.shortcutTextColor};
+  line-height: ${lineHeight.nowrap};
+  white-space: nowrap;
+  user-select: none;
+`;
+
+export const Kbd = ({className, ...props}: React.ComponentProps<"kbd">): JSX.Element | null => {
+  const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
+  if (!isSupportHardwareKeyboard) {
+    return null;
+  }
+  return <kbd className={cx(kbdCss, className)} {...props} />;
+};
+
+export const KbdGroup = ({className, ...props}: React.ComponentProps<"kbd">) => {
+  return (
+    <kbd
+      className={cx(
+        className,
+        css`
+          display: flex;
+          align-items: center;
+          gap: ${space.s2}px;
+        `
+      )}
+      {...props}
+    />
+  );
+};

package/src/loading-sausage.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cn from "classnames";
 import _ from "lodash";
-import {memo, useRef} from "react";
+import {ComponentType, memo, ReactNode, useRef} from "react";
 import {space, themeVars} from "./design-system";
 
 const getRandomWithSeed = _.memoize((seed: number) => {
@@ -141,7 +141,7 @@ type SausageListProps = {
   amount?: number;
   minAmount?: number;
   maxAmount?: number;
-  WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element | null;
+  WrapperComponent?: ComponentType<{children: ReactNode}> | null;
 } & Omit<LoadingSausageProps, "index">;
 export const LoadingSausageList = memo<SausageListProps>(function LoadingSausageList({
   amount,

package/src/modal-menu/modal-menu-item.tsx

@@ -4,11 +4,12 @@ import {space, textStyles} from "../design-system";
 import {useModalMenu} from "./contexts/modal-menu-context";
 
 interface ModalMenuItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  disabled?: boolean;
   onSelect?: (event: Event) => void;
   children?: ReactNode;
 }
 
-export const ModalMenuItem = ({children, onSelect, ...otherProps}: ModalMenuItemProps) => {
+export const ModalMenuItem = ({children, disabled, onSelect, ...otherProps}: ModalMenuItemProps) => {
   const {onOpenChange} = useModalMenu();
 
   return (
@@ -20,10 +21,17 @@ export const ModalMenuItem = ({children, onSelect, ...otherProps}: ModalMenuItem
         css`
           ${textStyles.big}
           padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
-        `
+        `,
+        disabled &&
+          css`
+            opacity: 0.4;
+          `
       )}
       onClick={(event) => {
         otherProps.onClick?.(event);
+        if (disabled) {
+          return;
+        }
         const selectionEvent = new CustomEvent("modal-menu-select", {bubbles: true, cancelable: true});
         onSelect?.(selectionEvent);
         if (!selectionEvent.defaultPrevented) {

package/src/modal-menu/modal-menu-trigger.tsx

@@ -4,11 +4,20 @@ import {useModalMenu} from "./contexts/modal-menu-context";
 
 interface ModalMenuTriggerProps extends ComponentProps<"div"> {
   asChild?: boolean;
+  triggerEvent?: "click" | "context-menu";
   children: ReactHTMLElement<HTMLDivElement> | ReactNode;
 }
 
-export const ModalMenuTrigger = ({asChild, children, onClick, ...otherProps}: ModalMenuTriggerProps) => {
+export const ModalMenuTrigger = ({
+  asChild,
+  triggerEvent,
+  children,
+  onClick,
+  onContextMenu,
+  ...otherProps
+}: ModalMenuTriggerProps) => {
   const {open, onOpenChange} = useModalMenu();
+
   if (asChild) {
     const className = (children as ReactHTMLElement<HTMLDivElement>)?.props?.className;
     return cloneElement(children as ReactHTMLElement<HTMLDivElement>, {
@@ -16,7 +25,15 @@ export const ModalMenuTrigger = ({asChild, children, onClick, ...otherProps}: Mo
       className: cx(className, otherProps.className),
       onClick: (event) => {
         onClick?.(event);
-        onOpenChange(!open);
+        if (triggerEvent === "click") {
+          onOpenChange(!open);
+        }
+      },
+      onContextMenu: (event) => {
+        onContextMenu?.(event);
+        if (triggerEvent === "context-menu") {
+          onOpenChange(!open);
+        }
       },
     });
   }

package/src/notification-dot.tsx

@@ -10,14 +10,23 @@ const activityIndicatorStyle = css`
   }}
 `;
 
-export const NotificationDot = ({big = true, color = themeVars.active}: {big: boolean; color: string}) => {
+type PropsType = {
+  big?: boolean;
+  color?: string;
+  style?: Record<string, string | number | null>;
+};
+
+export const NotificationDot = ({big = true, color = themeVars.active, style}: PropsType) => {
   const size = big ? space.s6 : space.s4;
   const marginTop = big ? -6 : -1;
   const marginRight = big ? -1 : 0;
-  return (
-    <div
-      className={activityIndicatorStyle}
-      style={{backgroundColor: color, width: size, height: size, marginTop, marginRight}}
-    />
-  );
+  const styleObject = {
+    backgroundColor: color,
+    width: size,
+    height: size,
+    marginTop,
+    marginRight,
+    ...style,
+  };
+  return <div className={activityIndicatorStyle} style={styleObject} />;
 };

package/src/platform-symbols.ts

@@ -0,0 +1,9 @@
+import {isMac} from "./platform";
+
+export const ctrlSymbol = isMac ? "⌘" : "Ctrl";
+export const explicitCtrlSymbol = isMac ? "⌃" : "Ctrl";
+export const winSymbol = isMac ? "⌘" : "Win";
+export const shiftSymbol = isMac ? "⇧" : "⇧";
+export const altSymbol = isMac ? "⌥" : "Alt";
+export const deleteSymbol = isMac ? "⌫" : "Delete";
+export const enterSymbol = isMac ? "↵" : "↵";

package/src/platform.ts

@@ -1,4 +1,6 @@
 import {UAParser} from "ua-parser-js";
 
 export const isMac = navigator.platform.startsWith("Mac");
+export const isWindows = navigator.platform.startsWith("Win");
+export const isLinux = navigator.platform.startsWith("Linux");
 export const isMobile = new UAParser(navigator.userAgent).getDevice().type === "mobile";

package/src/popover/index.tsx

@@ -36,7 +36,7 @@ import {useTheme} from "../theme-provider";
 import {$TSFixMe} from "../tsfixme";
 import {useIsPhone} from "../use-is-phone";
 import {usePopupModifiers} from "./popup-modifiers-context";
-import {getMaxSize, observeWidth} from "./modifiers";
+import {applyMaxSize, makeMaxSizeModifier, observeWidth} from "./modifiers";
 import {isElementReference, Reference} from "./reference";
 import {basicPopupClassName, basicPopupContainerClassName, hidePopupWhenTriggerIsHiddenClassName} from "./styles";
 import {MobilePopupProvider, useMobilePopup} from "./mobile-popup-context";
@@ -249,13 +249,13 @@ const Trigger = ({asChild = false, reference, children}: TriggerProps) => {
     }
   }, [reference, setTriggerElement]);
 
-  if (reference) {
+  // Reference is passed
+  if (reference !== undefined) {
     return null;
   }
 
   if (asChild && isValidElement(children)) {
     return cloneElement(children, {
-      // @ts-expect-error: React.cloneElement typing does not include `ref`, but it's valid at runtime
       ref: setTriggerElement,
       "aria-expanded": open,
       "aria-haspopup": true,
@@ -307,6 +307,8 @@ type ContentProps = {
 
 export type ContentRef = {update: (() => Promise<unknown>) | null};
 
+const padding = space.s8;
+
 const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInner(
   {
     children,
@@ -341,23 +343,44 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
 
   // We get infinite popup renders if this is not in a separate memo
   const shrinkableModifiers = useMemo(() => {
-    return shrinkable ? getMaxSize(preventOverflowOptions) : [];
+    return shrinkable
+      ? [
+          makeMaxSizeModifier({
+            padding,
+            ...preventOverflowOptions,
+          }),
+          applyMaxSize,
+        ]
+      : [];
   }, [preventOverflowOptions, shrinkable]);
 
   const modifiers = useMemo(() => {
     return _.compact([
-      {name: "flip", options: {...popupModifiers.flipOptions, ...flipOptions}},
+      {
+        name: "flip",
+        options: {
+          padding,
+          ...popupModifiers.flipOptions,
+          ...flipOptions,
+        },
+      },
       {
         name: "preventOverflow",
         options: {
           tether: false,
-          padding: space.s6,
+          padding,
           ...popupModifiers.preventOverflowOptions,
           ...preventOverflowOptions,
         },
       },
-      {name: "offset", options: {offset: offset}},
-      !transform && {name: "computeStyles", options: {gpuAcceleration: false}},
+      {
+        name: "offset",
+        options: {offset},
+      },
+      !transform && {
+        name: "computeStyles",
+        options: {gpuAcceleration: false},
+      },
       observeWidth,
       ...shrinkableModifiers,
       ...additionalModifiers,

package/src/popover/modifiers.tsx

@@ -1,30 +1,37 @@
 import {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifiers/preventOverflow";
-import {$TSFixMe} from "../tsfixme";
-import {Modifier, ModifierArguments} from "@popperjs/core";
+import {Modifier, ModifierArguments, Placement, Boundary, RootBoundary, Padding, Context} from "@popperjs/core";
 import maxSize from "popper-max-size-modifier";
 import {getResizeListener} from "@fibery/helpers/utils/resize-listener";
 import {isElementReference} from "./reference";
 import _ from "lodash";
 
-type PopupModifier = Modifier<$TSFixMe, $TSFixMe>;
+type MaxSizeOptions = {
+  placement: Placement;
+  boundary: Boundary;
+  rootBoundary: RootBoundary;
+  elementContext: Context;
+  altBoundary: boolean;
+  padding: Padding;
+};
 
-export const getMaxSize = (overflowOptions: Partial<PreventOverflowOptions>): PopupModifier[] => [
-  {
+export const makeMaxSizeModifier = (options: Partial<PreventOverflowOptions>): Modifier<"maxSize", MaxSizeOptions> => {
+  return {
     ...maxSize,
-    options: overflowOptions,
-  },
-  {
-    name: "applyMaxSize",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: ["maxSize"],
-    fn({state}) {
-      const {width, height} = state.modifiersData.maxSize;
-      state.styles.popper.maxWidth = `${width}px`;
-      state.styles.popper.maxHeight = `${height}px`;
-    },
+    options,
+  };
+};
+
+export const applyMaxSize: Modifier<"applyMaxSize", Record<string, never>> = {
+  name: "applyMaxSize",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["maxSize"],
+  fn({state}) {
+    const {width, height} = state.modifiersData.maxSize;
+    state.styles.popper.maxWidth = `${width}px`;
+    state.styles.popper.maxHeight = `${height}px`;
   },
-];
+};
 
 const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) => void = ({state, instance}) => {
   const {popper, reference} = state.elements;
@@ -54,7 +61,7 @@ const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) =>
   };
 };
 
-export const observeWidth: PopupModifier = {
+export const observeWidth: Modifier<"observeWidth", Record<string, never>> = {
   name: "observeWidth",
   enabled: true,
   phase: "main",