@fibery/ui-kit 1.25.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -69,8 +69,8 @@
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/emoji-data": "2.3.0",
-    "@fibery/react": "1.3.0",
-    "@fibery/helpers": "1.2.0"
+    "@fibery/helpers": "1.2.0",
+    "@fibery/react": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/lists/list-row-surface.tsx

@@ -1,11 +1,12 @@
-import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
+import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode, useId} from "react";
 import {border, colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
 import {css, cx} from "@linaria/core";
 import {ActionsMenuItemProps} from "../actions-menu/actions-menu-item";
 import {useActionsMenuContext} from "../actions-menu";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
-import {useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
+import {useActiveDangerousRow, useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
 import _ from "lodash";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 
 interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
@@ -19,11 +20,7 @@ export interface ListRowSurfaceProps extends ListRowSurfaceBase {
 }
 interface ActionMenuItemSurfaceProps
   extends Omit<ActionsMenuItemProps, "description">,
-    Omit<ListRowSurfaceProps, "children" | "darker" | "onSelect"> {
-  id?: string;
-  showWarning?: boolean;
-  onSelect?: (e: Event) => void;
-}
+    Omit<ListRowSurfaceProps, "children" | "darker" | "onSelect" | "id"> {}
 export const NATUAL_HOVER_CLASS = "natural-hover";
 export const NATUAL_FOCUS_CLASS = "natural-focus";
 export const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
@@ -227,27 +224,14 @@ export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
   }
 );
 export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSurfaceProps>(
-  (
-    {
-      testId,
-      className,
-      loading,
-      id,
-      selected,
-      hovered,
-      focused,
-      title,
-      disabled,
-      children,
-      dangerous,
-      showWarning,
-      onSelect = _.noop,
-    },
-    ref
-  ) => {
+  ({testId, className, loading, selected, hovered, focused, title, disabled, children, dangerous, ...props}, ref) => {
+    const id = useId();
+    const activeDangerousRow = useActiveDangerousRow();
+    const showWarning = activeDangerousRow === id;
+    const onSelect = useCallbackRef(props.onSelect || _.noop);
     const {MenuPrimitive} = useActionsMenuContext();
     const setActiveDangerousRow = useSetActiveDangerousRow();
-    const handleSelect = async (e: Event) => {
+    const handleSelect = (e: Event) => {
       e.stopPropagation();
 
       if (loading || !id) {

package/src/select/custom-select-partials/menu-list-virtualized.tsx

@@ -1,6 +1,6 @@
 import {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
 import {ItemContent, Virtuoso, VirtuosoHandle} from "react-virtuoso";
-import {Children, ComponentType, ReactNode, useContext, useEffect, useRef} from "react";
+import {Children, ComponentType, CSSProperties, ReactNode, useContext, useEffect, useRef, useState} from "react";
 import {GroupBase, ReactSelectRefContext} from "../util";
 import {layout} from "../../../src/design-system";
 import _, {isFunction, isObject} from "lodash";
@@ -54,17 +54,10 @@ export function MenuListVirtualized<
   Option,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
->({
-  children,
-  focusedOption,
-  innerRef,
-  maxHeight,
-  theme,
-  getStyles,
-  cx,
-  selectProps,
-}: MenuListProps<Option, IsMulti, Group>) {
+>(props: MenuListProps<Option, IsMulti, Group>) {
+  const {children, focusedOption, innerRef, maxHeight, theme, getStyles, cx, selectProps} = props;
   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)
@@ -89,11 +82,17 @@ export function MenuListVirtualized<
     ) : null;
   };
   const select = useContext(ReactSelectRefContext);
+  const [initialFocusedOption, setInitialFocusedOption] = useState<Option | null>(null);
 
   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.
-  if (select.current && flattenChildren.length && !focusedOption) {
-    let fitstExistingOption: unknown;
+  //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
+  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
     for (let i = 0; i < flattenChildren.length; i++) {
@@ -113,23 +112,25 @@ export function MenuListVirtualized<
             selectedOption = child.props.data;
             break;
           }
-          if (!fitstExistingOption) {
-            fitstExistingOption = child.props.data;
+          if (!firstExistingOption) {
+            firstExistingOption = child.props.data;
           }
         }
       }
     }
     if (selectedOption) {
+      setInitialFocusedOption(selectedOption as Option);
       select.current.setState({focusedOption: selectedOption});
-    } else if (fitstExistingOption) {
-      select.current.setState({focusedOption: fitstExistingOption});
+    } else if (firstExistingOption) {
+      setInitialFocusedOption(firstExistingOption as Option);
+      select.current.setState({focusedOption: firstExistingOption});
     }
   }
   const menuHeight = Math.min(flattenChildren.length * layout.menuItemHeight, maxHeight);
   //scrolling to focused option
   useEffect(() => {
     let to: ReturnType<typeof setTimeout> | undefined;
-    if (focusedOption && virtuoso.current) {
+    if (initialFocusedOption && focusedOption && virtuoso.current) {
       const index = flattenChildren.findIndex((child) => {
         if (isObject(child) && "props" in child) {
           if (isObject(child.props) && "data" in child.props) {
@@ -167,10 +168,10 @@ export function MenuListVirtualized<
     return () => {
       clearTimeout(to);
     };
-  }, [focusedOption, flattenChildren, menuHeight, virtuoso]);
+  }, [focusedOption, flattenChildren, menuHeight, initialFocusedOption, virtuoso]);
   return (
     // Needed for correct display inside portals and etc.
-    <div>
+    <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

package/src/select/custom-select-partials/no-option-message.tsx

@@ -10,11 +10,11 @@ const noOptionMessageClass = css`
 `;
 const noOptionMessageContentClass = css`
   padding: 0 ${space.s6}px;
-  line-height: ${layout.menuItemHeight}px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   ${{...textStyles.regular}}
+  line-height: ${layout.menuItemHeight}px;
 `;
 
 export const NoOptionsMessage = ({children}: {children: ReactNode}) => {

package/src/error-alert.tsx

@@ -1,57 +0,0 @@
-import {css} from "@linaria/core";
-import {layout, border, space, textStyles, themeVars} from "./design-system";
-import {Button} from "./button/button";
-import CloseIcon from "./icons/react/Close";
-import {useTheme} from "./theme-provider";
-
-const errorAlert = css`
-  background-color: ${themeVars.errorBgColor};
-  padding: ${space.s8}px ${space.s12}px;
-  min-height: ${layout.itemHeight}px;
-  border-radius: ${border.radius6}px;
-  display: flex;
-  gap: ${space.s6}px;
-  align-items: center;
-`;
-
-const messageStyle = css`
-  ${textStyles.heading5};
-  color: ${themeVars.errorTextColor};
-`;
-
-const descriptionStyle = css`
-  ${textStyles.regular};
-  color: ${themeVars.errorTextColor};
-`;
-
-export function ErrorAlert({
-  message,
-  description,
-  closable,
-  onClose,
-}: {
-  message: string;
-  description?: React.ReactNode;
-  closable?: boolean;
-  onClose?: () => void;
-}): JSX.Element {
-  const theme = useTheme();
-  const buttonColor = theme.errorButtonColor;
-  return (
-    <div className={errorAlert}>
-      <div
-        className={css`
-          flex-grow: 2;
-        `}
-      >
-        <div className={messageStyle}>{message}</div>
-        {description ? <div className={descriptionStyle}>{description}</div> : null}
-      </div>
-      {closable && onClose ? (
-        <div>
-          <Button borderless onClick={onClose} color={buttonColor} Icon={CloseIcon} width={24} />
-        </div>
-      ) : null}
-    </div>
-  );
-}