@fibery/ui-kit 1.39.1 → 1.40.0

package/src/{images-gallery-2 → images-gallery}/slide-buttons.tsx

@@ -12,13 +12,14 @@ 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 {copyUrlToClipboard} 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";
+import {useIsPhone} from "../use-is-phone";
 
 const barClassName = css`
   position: absolute;
@@ -79,18 +80,20 @@ export function SlideButtons({
     return {theme, styles: createInlineTheme(theme, emptyArray)};
   }, []);
 
+  const isPhone = useIsPhone();
+
   return (
     <ToastProvider toastQueue={toastQueue}>
       <ThemeProvider theme={theme}>
         <div style={styles} className={wrapper}>
           <div className={barClassName}>
-            <CopyURLButton pswp={pswp} showUI={uiHandlers.showUI} />
+            {slideState.src ? <CopyURLButton pswp={pswp} showUI={uiHandlers.showUI} /> : null}
             <ZoomButton pswp={pswp} showUI={uiHandlers.showUI} />
             {slideState.actions ? (
               <SlideActionsMenu actions={slideState.actions} uiHandlers={uiHandlers} />
-            ) : (
+            ) : slideState.src ? (
               <IconButton
-                size="medium"
+                size={isPhone ? "large" : "medium"}
                 color="neutral"
                 variant="soft"
                 onClick={() => {
@@ -100,14 +103,14 @@ export function SlideButtons({
               >
                 <RicheditorOpenLink />
               </IconButton>
-            )}
+            ) : null}
 
             <IconButton
               onClick={() => {
                 pswp.close();
                 uiHandlers.showUI();
               }}
-              size="medium"
+              size={isPhone ? "large" : "medium"}
               color="neutral"
               variant="soft"
             >
@@ -121,7 +124,7 @@ export function SlideButtons({
                 pswp.prev();
                 uiHandlers.showUI();
               }}
-              size="medium"
+              size={isPhone ? "large" : "medium"}
               color="neutral"
               variant="soft"
             >
@@ -135,7 +138,7 @@ export function SlideButtons({
                 pswp.next();
                 uiHandlers.showUI();
               }}
-              size="medium"
+              size={isPhone ? "large" : "medium"}
               color="neutral"
               variant="soft"
             >
@@ -156,7 +159,7 @@ function SlideActionsMenu({
   uiHandlers: {showUI: () => void; setForceShowUI: (value: boolean) => void};
 }) {
   const [container, setContainer] = useState<HTMLDivElement | null>();
-
+  const isPhone = useIsPhone();
   return (
     <div>
       <ActionsMenu
@@ -167,7 +170,14 @@ function SlideActionsMenu({
           margin-top: ${space.s8}px;
         `}
         container={container}
-        trigger={<ActionsButtonCompact size="medium" color="neutral" variant="soft" onClick={uiHandlers.showUI} />}
+        trigger={
+          <ActionsButtonCompact
+            size={isPhone ? "large" : "medium"}
+            color="neutral"
+            variant="soft"
+            onClick={uiHandlers.showUI}
+          />
+        }
       >
         {actions}
       </ActionsMenu>
@@ -179,6 +189,7 @@ function SlideActionsMenu({
 function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const [zoomed, setZoomed] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
+  const isPhone = useIsPhone();
 
   useEffect(() => {
     if (!pswp) {
@@ -217,7 +228,7 @@ function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
         pswp.toggleZoom();
         showUI();
       }}
-      size="medium"
+      size={isPhone ? "large" : "medium"}
       color="neutral"
       variant="soft"
     >
@@ -228,6 +239,7 @@ function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
 
 function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const toast = useToast();
+  const isPhone = useIsPhone();
   return (
     <Button
       onClick={() => {
@@ -239,7 +251,7 @@ function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
 
         const src = new URL(pswp.currSlide.data.src, `${window.location}`).href;
         if (src) {
-          copyToClipboard(src)
+          copyUrlToClipboard({url: src, label: pswp.currSlide.data.label})
             .then(() => {
               toast.success({title: "Copied!"});
             })
@@ -248,7 +260,7 @@ function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
             });
         }
       }}
-      size="medium"
+      size={isPhone ? "large" : "medium"}
       variant="soft"
       color="neutral"
       iconStart={<Link />}

package/src/images-gallery/zoom.tsx

@@ -1,75 +1,4 @@
-import {css} from "@linaria/core";
 import React, {ReactNode, useCallback} from "react";
-import {Controlled} from "react-medium-image-zoom";
-import "react-medium-image-zoom/dist/styles.css";
-import {themeVars} from "../design-system";
-import {IconButton} from "../button/icon-button";
-import Close from "../icons/react/Close";
-import {Controls, useImagesGalleryMethods, useImagesGalleryState} from "./images-gallery";
-import {useIsPhone} from "../use-is-phone";
-import {ZoomV2} from "../images-gallery-2/zoom";
-
-const dialogCss = css`
-  :global() {
-    [data-rmiz-modal-overlay="hidden"] {
-      background-color: transparent;
-    }
-    [data-rmiz-modal-overlay="visible"] {
-      background-color: ${themeVars.colorBgEditorImageZoomed};
-    }
-    [data-rmiz-content="found"] > img {
-      cursor: auto;
-    }
-  }
-`;
-
-type ModalState = "LOADED" | "LOADING" | "UNLOADED" | "UNLOADING";
-
-const ZoomContent = ({
-  img,
-  modalState,
-  onUnzoom,
-}: {
-  img: React.ReactElement | null;
-  modalState: ModalState;
-  onUnzoom: (e: Event) => void;
-}) => {
-  const imagesGalleryMethods = useImagesGalleryMethods();
-  const isPhone = useIsPhone();
-
-  const button = modalState === "LOADED" && (
-    <IconButton
-      size={isPhone ? "xLarge" : "small"}
-      color="neutral"
-      variant="ghost"
-      className={css`
-        position: absolute;
-        inset: 20px 20px auto auto;
-        z-index: 1;
-      `}
-      onClick={onUnzoom as () => void}
-    >
-      <Close />
-    </IconButton>
-  );
-  return (
-    <>
-      <div
-        onMouseMove={() => {
-          imagesGalleryMethods.setVisible(true);
-        }}
-        className={css`
-          position: absolute;
-          inset: 0;
-        `}
-      >
-        {img}
-        {button}
-      </div>
-      <Controls />
-    </>
-  );
-};
 
 type Props = {
   zoomed: boolean;
@@ -78,11 +7,11 @@ type Props = {
   className?: string;
   openOnClick?: boolean;
   zoomImg?: {src: string; alt?: string};
+  actions?: ReactNode;
 };
 
-export const ZoomV1 = (props: Props) => {
-  const {zoomed, onZoomedChange, children, className, openOnClick, zoomImg} = props;
-  const imagesGalleryMethods = useImagesGalleryMethods();
+export function Zoom(props: Props) {
+  const {zoomed, onZoomedChange, children, className, openOnClick} = props;
   const onClick = useCallback(() => {
     if (zoomed) {
       onZoomedChange(false);
@@ -99,25 +28,7 @@ export const ZoomV1 = (props: Props) => {
 
   return (
     <div className={className} onClick={onClick} onDoubleClick={openOnClick ? undefined : onDoubleClick}>
-      <Controlled
-        zoomImg={zoomImg}
-        onZoomChange={imagesGalleryMethods.update}
-        classDialog={dialogCss}
-        isZoomed={zoomed}
-        ZoomContent={ZoomContent}
-      >
-        {children}
-      </Controlled>
+      {children}
     </div>
   );
-};
-
-export const Zoom = (props: Props) => {
-  const {version} = useImagesGalleryState();
-
-  if (version === "1") {
-    return <ZoomV1 {...props} />;
-  }
-
-  return <ZoomV2 {...props} />;
-};
+}

package/src/popover/index.tsx

@@ -121,9 +121,11 @@ export function MobilePopup({
       >
         {contextTitle ?? title}
       </div>
-      <IconButton onClick={onClose} size="xLarge">
-        <CloseIcon />
-      </IconButton>
+      {onClose && (
+        <IconButton onClick={onClose} size="xLarge">
+          <CloseIcon />
+        </IconButton>
+      )}
     </>
   );
 

package/src/select/components/menu-list-virtualized.tsx

@@ -1,6 +1,16 @@
 import {css} from "@linaria/core";
 import _, {isFunction, isObject} from "lodash";
-import {Children, ComponentType, CSSProperties, ReactNode, useContext, useEffect, useRef, useState} from "react";
+import {
+  Children,
+  ComponentType,
+  CSSProperties,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
 import {ItemContent, Virtuoso, VirtuosoHandle} from "react-virtuoso";
 import {layout} from "../../../src/design-system";
@@ -23,12 +33,8 @@ const components = {
   Header: Spacer,
 };
 
-const OPTION_HEIGHT = layout.menuItemHeight;
-// this code is logic stolen from windowed-select SCROLL_INTO_VIEW_CHECK_FIX prevents list scrolling when focusing
-// partially visible option. set to 0 to scroll into view any partially hidden focused option every time
-// windowed select default is .33. We've got some precision here, can go with .2
+// Threshold to determine when to scroll: if focused item is less than this visible, scroll it into view
 const MINIMAL_VISIBLE_PORTION_TO_SCROLL_INTO_VIEW = 0.2;
-const SCROLL_INTO_VIEW_CHECK_FIX = OPTION_HEIGHT - OPTION_HEIGHT * MINIMAL_VISIBLE_PORTION_TO_SCROLL_INTO_VIEW;
 function isGroupChild<Option, isMulty extends boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
   props: unknown
 ): props is GroupProps<Option, isMulty, Group> {
@@ -77,45 +83,64 @@ export function MenuListVirtualized<
   const isPhone = useIsPhone();
   const {inPopover} = useSelectControlSettings();
   const virtuoso = useRef<VirtuosoHandle>(null);
-
-  // options props come non-filtered, and we have insufficient info (props) to render groups and options from here.
-  // Also, you never know what contents also possible as list content.
-  // that's why it is better working with children and find options and groups among them (hope internal API does not change)
-  // The best strategy to scroll to index and to evade height calculations is to
-  // deconstruct group into it's header and children (options) and render then side by side without group-wrapping div
-  // then we just use integrated scrollToIndex fromVirtuoso API to scroll to desired option (most reliable variant)
-  // that's why Group is just a dummy component that does nothing: to minimize impact of Group component being rendered inside ReactSelect
-  const renderGroup = (Component: ComponentType<GroupHeadingProps>, headingProps: GroupProps["headingProps"]) => {
-    const content = selectProps.formatGroupLabel
-      ? selectProps.formatGroupLabel(headingProps.data as Group)
-      : headingProps.data.label;
-    return content ? (
-      <Component
-        cx={cx}
-        selectProps={selectProps as unknown as GroupHeadingProps["selectProps"]}
-        theme={theme}
-        getStyles={getStyles}
-        {...headingProps}
-      >
-        {content}
-      </Component>
-    ) : null;
-  };
   const select = useContext(ReactSelectRefContext);
   const [initialFocusedOption, setInitialFocusedOption] = useState<Option | null>(null);
+  const scrollTimeoutRef = useRef<number | undefined>();
+
+  // Get the appropriate item height based on device
+  const itemHeight = isPhone ? layout.mobileMenuItemHeight : layout.menuItemHeight;
+  const scrollThreshold = itemHeight * MINIMAL_VISIBLE_PORTION_TO_SCROLL_INTO_VIEW;
+
+  // Render group heading
+  const renderGroup = useMemo(
+    () => (Component: ComponentType<GroupHeadingProps>, headingProps: GroupProps["headingProps"]) => {
+      const content = selectProps.formatGroupLabel
+        ? selectProps.formatGroupLabel(headingProps.data as Group)
+        : headingProps.data.label;
+      return content ? (
+        <Component
+          cx={cx}
+          selectProps={selectProps as unknown as GroupHeadingProps["selectProps"]}
+          theme={theme}
+          getStyles={getStyles}
+          {...headingProps}
+        >
+          {content}
+        </Component>
+      ) : null;
+    },
+    [cx, getStyles, selectProps, theme]
+  );
+
+  // Flatten children to handle groups
+  const flattenChildren = useMemo(() => flattenGroupChildren(children, renderGroup), [children, renderGroup]);
+
+  // Calculate menu height
+  const menuHeight = useMemo(
+    () => Math.min(flattenChildren.length * itemHeight + PADDING_BLOCK_HEIGHT * 2, maxHeight),
+    [flattenChildren.length, itemHeight, maxHeight]
+  );
 
-  const flattenChildren = flattenGroupChildren(children, renderGroup);
-  //fix for select not having focused option when open. if no focused item present, at least first option must be focused.
-  //Unfortunately, we can not rely on select focusedOption to determine option that should be focused initially:
-  //to mark selected option react-select uses value field of Option object.
-  //to define initially focused option react select uses whole Option object reference equality which is not always the case
-  //if select value is not exactly same object as option, we end up having initially focusedOption being just first option.
-  //fix below ensures that initial focusedOption is always selectedOption in cost of one more rerender
+  // Find index of focused option in flattened children
+  const focusedIndex = useMemo(() => {
+    if (!focusedOption) {
+      return -1;
+    }
+    return flattenChildren.findIndex((child) => {
+      if (isObject(child) && "props" in child && isObject(child.props) && "data" in child.props) {
+        return child.props.data === focusedOption;
+      }
+      return false;
+    });
+  }, [focusedOption, flattenChildren]);
+
+  // Initialize focused option on mount
   useEffect(() => {
     if (select.current && flattenChildren.length && !initialFocusedOption) {
       let firstExistingOption: unknown;
       let selectedOption: unknown;
-      //if an options exists, but there is no focused option, looking for first selected / existing option
+
+      // Find first selected option or first available option
       for (let i = 0; i < flattenChildren.length; i++) {
         const child = flattenChildren[i];
         if (
@@ -126,10 +151,8 @@ export function MenuListVirtualized<
           child.props.type === "option" &&
           "isSelected" in child.props
         ) {
-          //well it is an option, check if it has data (just for ts and be sure)
           if ("data" in child.props && isObject(child.props.data)) {
             if ("isSelected" in child.props && child.props.isSelected) {
-              //setting selected option data as focused option, wrapping up
               selectedOption = child.props.data;
               break;
             }
@@ -139,68 +162,84 @@ export function MenuListVirtualized<
           }
         }
       }
-      if (selectedOption) {
-        setInitialFocusedOption(selectedOption as Option);
-        select.current.setState({focusedOption: selectedOption});
-      } else if (firstExistingOption) {
-        setInitialFocusedOption(firstExistingOption as Option);
-        select.current.setState({focusedOption: firstExistingOption});
+
+      const optionToFocus = selectedOption || firstExistingOption;
+      if (optionToFocus) {
+        setInitialFocusedOption(optionToFocus as Option);
+        select.current.setState({focusedOption: optionToFocus});
       }
     }
   }, [flattenChildren, initialFocusedOption, select]);
-  const menuHeight = Math.min(flattenChildren.length * layout.menuItemHeight + PADDING_BLOCK_HEIGHT * 2, maxHeight);
-  //scrolling to focused option
+
+  // Handle scroll to focused option on keyboard navigation
   useEffect(() => {
-    let to: number | undefined;
-    if (initialFocusedOption && focusedOption && virtuoso.current) {
-      const index = flattenChildren.findIndex((child) => {
-        if (isObject(child) && "props" in child) {
-          if (isObject(child.props) && "data" in child.props) {
-            return child.props.data === focusedOption;
-          }
+    // Clear any pending scroll timeout
+    if (scrollTimeoutRef.current) {
+      window.cancelAnimationFrame(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = undefined;
+    }
+
+    // Only scroll if we have an initial focused option and current focused option
+    if (initialFocusedOption && focusedOption && focusedIndex >= 0 && virtuoso.current) {
+      // Use requestAnimationFrame for smooth scrolling aligned with browser rendering
+      scrollTimeoutRef.current = window.requestAnimationFrame(() => {
+        if (!virtuoso.current) {
+          return;
         }
-        return false;
-      });
-      if (index >= 0) {
-        const focusedOptionPosition = index * OPTION_HEIGHT;
+
         virtuoso.current.getState((state) => {
-          to = window.setTimeout(() => {
-            if (!virtuoso.current) {
-              return;
-            }
-            if (state.scrollTop - SCROLL_INTO_VIEW_CHECK_FIX > focusedOptionPosition) {
-              virtuoso.current.scrollToIndex({index: index, behavior: "auto"});
-            } else if (
-              state.scrollTop + menuHeight <
-              focusedOptionPosition + OPTION_HEIGHT - SCROLL_INTO_VIEW_CHECK_FIX
-            ) {
-              virtuoso.current.scrollToIndex({
-                index: index,
-                align: "end",
-                behavior: "auto",
-              });
-            }
-          }, 1);
-          // this just makes it smooth. Because of constant rerendering (or IDK why) Virtuoso state and actual scroll
-          // value desync, like actual element do not scroll last frame, this stabilises the behaviour and force sync it
-          virtuoso.current?.scrollTo({top: state.scrollTop});
+          const focusedItemTop = focusedIndex * itemHeight + PADDING_BLOCK_HEIGHT;
+          const focusedItemBottom = focusedItemTop + itemHeight;
+          const viewportTop = state.scrollTop;
+          const viewportBottom = state.scrollTop + menuHeight - PADDING_BLOCK_HEIGHT;
+
+          // Check if item is cut off at the top (even partially)
+          const isTopCutOff = focusedItemTop < viewportTop;
+          // Check if item is cut off at the bottom (even partially)
+          const isBottomCutOff = focusedItemBottom > viewportBottom;
+
+          // Calculate how much of the item is visible
+          const visibleTop = Math.max(focusedItemTop, viewportTop);
+          const visibleBottom = Math.min(focusedItemBottom, viewportBottom);
+          const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+
+          // Scroll if item is cut off and not sufficiently visible
+          if (isTopCutOff && visibleHeight < itemHeight - scrollThreshold) {
+            // Item is cut off at the top and less than threshold is hidden
+            virtuoso.current?.scrollToIndex({
+              index: focusedIndex,
+              align: "start",
+              behavior: "auto",
+            });
+          } else if (isBottomCutOff && visibleHeight < itemHeight - scrollThreshold) {
+            // Item is cut off at the bottom and less than threshold is hidden
+            virtuoso.current?.scrollToIndex({
+              index: focusedIndex,
+              align: "end",
+              behavior: "auto",
+            });
+          }
         });
-      }
+      }) as unknown as number;
     }
+
     return () => {
-      window.clearTimeout(to);
+      if (scrollTimeoutRef.current) {
+        window.cancelAnimationFrame(scrollTimeoutRef.current);
+        scrollTimeoutRef.current = undefined;
+      }
     };
-  }, [focusedOption, flattenChildren, menuHeight, initialFocusedOption, virtuoso]);
+  }, [focusedOption, focusedIndex, initialFocusedOption, itemHeight, menuHeight, scrollThreshold]);
 
   return (
     // Needed for correct display inside portals and etc.
     <div style={getStyles("menuList", props) as CSSProperties}>
       <Virtuoso
         ref={virtuoso}
-        // in reality only HTMLDiveElement | null will appear here. We do not use Virtuoso's useWindowScroll prop
+        // in reality only HTMLDivElement | null will appear here. We do not use Virtuoso's useWindowScroll prop
         scrollerRef={innerRef as (ref: HTMLElement | Window | null) => void}
         style={isPhone && inPopover ? undefined : {height: menuHeight}}
-        fixedItemHeight={isPhone ? layout.mobileMenuItemHeight : layout.menuItemHeight}
+        fixedItemHeight={itemHeight}
         data={flattenChildren}
         totalCount={flattenChildren.length}
         itemContent={drawListElement}

package/src/select/components/menu.tsx

@@ -1,6 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {CSSObjectWithLabel, MenuProps, components} from "react-select";
-import {border, themeVars} from "../../design-system";
+import {border, space, themeVars} from "../../design-system";
 import {GroupBase} from "../index";
 
 export const MenuListNulledStyles: CSSObjectWithLabel = {
@@ -11,8 +11,10 @@ export const MenuNulledStyles: CSSObjectWithLabel = {
   backgroundColor: "",
   borderRadius: "",
   boxShadow: "",
-  paddingTop: "",
-  paddingBottom: "",
+  marginTop: 0,
+  marginBottom: 0,
+  paddingTop: space.s8,
+  paddingBottom: space.s8,
 };
 
 const menuCss = css`

package/src/table.tsx

@@ -1,6 +1,7 @@
 import {PureComponent, ReactNode} from "react";
 import {border, space, themeVars} from "./design-system";
 import {css, cx} from "@linaria/core";
+import {mobileRootSelector} from "./mobile-styles";
 
 const tableStyle = css`
   ${{
@@ -18,18 +19,20 @@ export class Table extends PureComponent<{children: ReactNode}> {
     return <div className={tableStyle}>{children}</div>;
   }
 }
+const minWidthProperty = "--fibery-min-column-width";
 
 const rowStyle = css`
-  ${{
-    display: "grid",
-    gridTemplateColumns: "1fr minmax(140px, 7fr) 3fr minmax(140px, 3fr) 32px",
-    borderRadius: border.radius6,
-    padding: space.s6,
-    paddingLeft: space.s12,
-    marginBottom: space.s8,
-    alignItems: "center",
-    color: themeVars.textColor,
-  }}
+  ${minWidthProperty}: 140px;
+  ${mobileRootSelector} & {
+    ${minWidthProperty}: 120px;
+  }
+  display: grid;
+  grid-template-columns: 1fr minmax(var(${minWidthProperty}), 7fr) 3fr minmax(var(${minWidthProperty}), 3fr) 32px;
+  border-radius: ${border.radius6}px;
+  padding: ${space.s6}px ${space.s6}px ${space.s12}px ${space.s6}px;
+  margin-bottom: ${space.s8}px;
+  align-items: center;
+  color: ${themeVars.textColor};
 `;
 
 const cellSingleLineStyle = css`

package/src/toggle-button/toggle-button.tsx

@@ -55,6 +55,11 @@ export const toggleButtonCss = css`
     &:is(:active, [aria-expanded="true"]) {
       background-color: ${themeVars.colorBgReactionsHover};
       border-color: ${themeVars.colorBorderReactionsHover};
+
+      &:is([aria-pressed="true"], [aria-checked="true"]) {
+        background-color: ${themeVars.colorBgReactionsSelectedHover};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
     }
   }