@fibery/ui-kit 2.0.0 → 2.0.1

package/src/popover/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {usePointerDownOutside} from "@fibery/react/src/use-pointer-down-outside";
@@ -8,7 +7,6 @@ import {Options as FlipOptions} from "@popperjs/core/lib/modifiers/flip";
 import {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifiers/preventOverflow";
 import cx from "classnames";
 import compact from "lodash/compact";
-import noop from "lodash/noop";
 import {
   cloneElement,
   CSSProperties,
@@ -36,13 +34,13 @@ import {MobilePopoverProvider} from "./mobile-popover-context";
 import {usePopupStackContext} from "./popup-stack-context";
 import {composeRefs, useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {createContext} from "@fibery/react/src/create-context";
-import {Wrap} from "@fibery/react/src/wrap";
 import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {getElementRef} from "./get-element-ref";
 import {MobilePopover} from "./mobile-popover";
 import {FocusScope, FocusScopeProps} from "@radix-ui/react-focus-scope";
 
 type PopoverContextValue = {
+  contentId: string;
   open: boolean;
   disabled?: boolean;
   onOpen?: () => unknown;
@@ -55,7 +53,7 @@ type PopoverContextValue = {
 
 const [PopoverProvider, usePopoverContext] = createContext<PopoverContextValue>("PopoverContext");
 
-type RootProps = {
+type PopoverRootProps = {
   children: ReactNode;
   open: boolean;
   disabled?: boolean;
@@ -68,9 +66,9 @@ type RootProps = {
   setPopupElement?: (value: HTMLDivElement | null) => void;
 };
 
-const Root = ({children, open, disabled = false, onOpen, onClose, ...rest}: RootProps) => {
-  const id = useId();
-  const {registerEscapeCallback, registerPopup} = usePopupStackContext();
+const Root = (props: PopoverRootProps) => {
+  const {children, open, disabled = false, onOpen, onClose, ...rest} = props;
+  const contentId = useId();
 
   const [triggerElement, setTriggerElement] = useControllableState<Reference>({
     value: rest.triggerElement,
@@ -84,55 +82,9 @@ const Root = ({children, open, disabled = false, onOpen, onClose, ...rest}: Root
   const composedSetTriggerElement = useComposedRefs(setTriggerElement, rest.setTriggerElement);
   const composedSetPopupElement = useComposedRefs(setPopupElement, rest.setPopupElement);
 
-  useEffect(() => {
-    let unregister: () => void;
-    if (registerPopup && open) {
-      unregister = registerPopup(id);
-    }
-    return () => {
-      unregister?.();
-    };
-  }, [registerPopup, id, open]);
-
-  useEffect(() => {
-    if (triggerElement && open) {
-      // Note: We don't check defaultPrevented because react-select and similar
-      // components call preventDefault() on all keydown events. We also don't
-      // expose onEscapeKeyDown prop to let consumers prevent default close behavior.
-      const onKeyDown = (evt: KeyboardEvent) => {
-        if (evt.key === "Escape") {
-          onClose?.(evt);
-          if (isElementReference(triggerElement)) {
-            triggerElement.focus();
-          }
-          evt.preventDefault();
-          evt.stopPropagation();
-        }
-      };
-
-      if (registerEscapeCallback) {
-        registerEscapeCallback(id, onKeyDown);
-      } else {
-        document.addEventListener("keydown", onKeyDown);
-      }
-
-      // if popup was opened but nothing was focused inside it we should catch 'Escape' key from trigger as well
-      // otherwise it can be caught by navigation panel
-      "addEventListener" in triggerElement && triggerElement.addEventListener("keydown", onKeyDown);
-
-      return () => {
-        if (!registerEscapeCallback) {
-          document.removeEventListener("keydown", onKeyDown);
-        }
-
-        "removeEventListener" in triggerElement && triggerElement.removeEventListener("keydown", onKeyDown);
-      };
-    }
-    return () => {};
-  }, [onClose, open, triggerElement, registerEscapeCallback, id]);
-
   const contextValue = useMemo(() => {
     return {
+      contentId,
       disabled,
       triggerElement,
       setTriggerElement: composedSetTriggerElement,
@@ -143,6 +95,7 @@ const Root = ({children, open, disabled = false, onOpen, onClose, ...rest}: Root
       onOpen,
     };
   }, [
+    contentId,
     disabled,
     triggerElement,
     composedSetTriggerElement,
@@ -173,18 +126,18 @@ const Backdrop = ({className}: {className?: string}) => {
   );
 };
 
-type PortalProps = {
+type PopoverPortalProps = {
   getPopupContainer?: () => HTMLElement;
   children: ReactNode;
 };
 
-const Portal = ({getPopupContainer, children}: PortalProps) => {
+const Portal = ({getPopupContainer, children}: PopoverPortalProps) => {
   const popupModifiers = usePopupModifiers();
   const getPopupContainerResult = getPopupContainer ?? popupModifiers.getPopupContainer;
   return createPortal(children, getPopupContainerResult());
 };
 
-type TriggerProps = {
+type PopoverTriggerProps = {
   asChild?: boolean;
   /** Custom reference element for popover positioning. Use when the trigger element differs from the anchor point (e.g., virtual/detached elements). */
   reference?: Reference;
@@ -192,16 +145,9 @@ type TriggerProps = {
   triggerEvent?: "mousedown" | "click";
 } & React.ComponentPropsWithoutRef<"div">;
 
-const Trigger = ({
-  asChild = false,
-  reference,
-  children,
-  triggerEvent = "mousedown",
-  onMouseDown,
-  onClick,
-  ...props
-}: TriggerProps) => {
-  const {setTriggerElement, disabled, open, onOpen, onClose} = usePopoverContext();
+const Trigger = forwardRef<HTMLDivElement, PopoverTriggerProps>((props, ref) => {
+  const {asChild = false, reference, children, triggerEvent = "mousedown", onMouseDown, onClick, ...rest} = props;
+  const {contentId, setTriggerElement, disabled, open, onOpen, onClose} = usePopoverContext();
 
   const onToggle = (e: React.MouseEvent<HTMLElement>) => {
     if (disabled) {
@@ -229,6 +175,8 @@ const Trigger = ({
     }
   }, [reference, setTriggerElement]);
 
+  const composedRef = useComposedRefs(ref, setTriggerElement);
+
   // Reference is passed
   if (reference !== undefined) {
     return null;
@@ -238,23 +186,24 @@ const Trigger = ({
     const childrenRef = getElementRef(children);
 
     return cloneElement(children, {
+      "aria-haspopup": "dialog",
       "aria-expanded": open,
-      "aria-haspopup": true,
-      ...props,
-      ref: composeRefs(setTriggerElement, childrenRef),
-      className: cx(children.props.className, props.className),
+      "aria-controls": contentId,
+      ...rest,
+      ref: composeRefs(composedRef, childrenRef),
+      className: cx(children.props.className, rest.className),
       ...triggerEventHandlers,
     });
   }
 
   return (
-    <div ref={setTriggerElement} {...triggerEventHandlers} {...props}>
+    <div ref={composedRef} {...triggerEventHandlers} {...rest}>
       {children}
     </div>
   );
-};
+});
 
-type ContentProps = {
+type PopoverContentProps = {
   children: ReactNode;
   placement?: Placement;
   popupStyle?: $TSFixMe;
@@ -296,12 +245,12 @@ type ContentProps = {
    * Can be prevented.
    */
   onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
-};
+} & React.ComponentProps<"div">;
 
 export type ContentRef = {update: (() => Promise<unknown>) | null};
 
-const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
-  {
+const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
+  const {
     children,
     placement,
     popupStyle,
@@ -323,16 +272,62 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
     fixStackingContextAfterOpen = false,
     transform,
     onFirstUpdate,
-    onMouseLeave,
     onOpenAutoFocus,
     onCloseAutoFocus,
-  },
-  ref
-) {
-  const {open, onClose, triggerElement, popupElement, setPopupElement} = usePopoverContext();
+    ...rest
+  } = props;
+  const {contentId, open, onClose, triggerElement, popupElement, setPopupElement} = usePopoverContext();
 
   const popupModifiers = usePopupModifiers();
   const isPhone = useIsPhone();
+  const {registerEscapeCallback, registerPopup} = usePopupStackContext();
+
+  useEffect(() => {
+    let unregister: () => void;
+    if (registerPopup && open) {
+      unregister = registerPopup(contentId);
+    }
+    return () => {
+      unregister?.();
+    };
+  }, [registerPopup, contentId, open]);
+
+  useEffect(() => {
+    if (triggerElement && open) {
+      // Note: We don't check defaultPrevented because react-select and similar
+      // components call preventDefault() on all keydown events. We also don't
+      // expose onEscapeKeyDown prop to let consumers prevent default close behavior.
+      const onKeyDown = (evt: KeyboardEvent) => {
+        if (evt.key === "Escape") {
+          onClose?.(evt);
+          if (isElementReference(triggerElement)) {
+            triggerElement.focus();
+          }
+          evt.preventDefault();
+          evt.stopPropagation();
+        }
+      };
+
+      if (registerEscapeCallback) {
+        registerEscapeCallback(contentId, onKeyDown);
+      } else {
+        document.addEventListener("keydown", onKeyDown);
+      }
+
+      // if popup was opened but nothing was focused inside it we should catch 'Escape' key from trigger as well
+      // otherwise it can be caught by navigation panel
+      "addEventListener" in triggerElement && triggerElement.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        if (!registerEscapeCallback) {
+          document.removeEventListener("keydown", onKeyDown);
+        }
+
+        "removeEventListener" in triggerElement && triggerElement.removeEventListener("keydown", onKeyDown);
+      };
+    }
+    return () => {};
+  }, [onClose, open, triggerElement, registerEscapeCallback, contentId]);
 
   // We get infinite popup renders if this is not in a separate memo
   const shrinkableModifiers = useMemo(() => {
@@ -418,9 +413,7 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
     }
   };
 
-  const contentStyles = useMemo(() => {
-    return {...styles.popper, ...popupStyle};
-  }, [popupStyle, styles.popper]);
+  const contentStyles = useMemo(() => ({...styles.popper, ...popupStyle}), [popupStyle, styles.popper]);
 
   if (!open) {
     return null;
@@ -469,13 +462,15 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
       >
         <div
           role="dialog"
+          id={contentId}
           ref={setPopupElement}
+          {...rest}
           className={cx(
+            rest.className,
             basicPopupContainerClassName,
             hidePopupWhenTriggerIsHidden && hidePopupWhenTriggerIsHiddenClassName,
             popupContainerClassName
           )}
-          onMouseLeave={onMouseLeave}
           onClick={stopPropagation}
           {...attributes.popper}
           onPointerDownCapture={onPointerDownCapture}
@@ -490,123 +485,16 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
   );
 });
 
-export {createPopper};
-
-export type {Placement, State, Reference, RootProps, TriggerProps, ContentProps};
-
-export const Popover = {
-  Root,
-  Trigger,
-  Portal,
-  Content,
-};
+const Popover = {Root, Trigger, Portal, Content};
 
-export type PopoverOldProps = Pick<RootProps, "children" | "open" | "onOpen" | "onClose" | "disabled"> &
-  ContentProps &
-  Pick<PortalProps, "getPopupContainer"> & {
-    trigger?: ReactNode;
-    triggerDomElement?: Reference;
-    renderInPortal?: boolean;
-  };
+export {createPopper, Popover};
 
-/**
- * @deprecated Use the new `Popover` compound component instead.
- *
- * The `PopoverOld` component is deprecated and will be removed in a future version.
- * Please migrate to the new `Popover` API which provides better composition and flexibility:
- *
- * @example
- * ```tsx
- * // Instead of PopoverOld:
- * <PopoverOld
- *   trigger={<button>Click me</button>}
- *   open={isOpen}
- *   onOpen={() => setIsOpen(true)}
- *   onClose={() => setIsOpen(false)}
- * >
- *   <div>Popover content</div>
- * </PopoverOld>
- *
- * // Use Popover compound components:
- * <Popover.Root
- *   open={isOpen}
- *   onOpen={() => setIsOpen(true)}
- *   onClose={() => setIsOpen(false)}
- * >
- *   <Popover.Trigger asChild triggerEvent="click">
- *     <button>Click me</button>
- *   </Popover.Trigger>
- *   <Popover.Portal>
- *     <Popover.Content>
- *       <div>Popover content</div>
- *     </Popover.Content>
- *   </Popover.Portal>
- * </Popover.Root>
- * ```
- */
-export const PopoverOld = ({
-  trigger,
-  triggerDomElement,
-  children,
-  placement,
-  open,
-  popupStyle,
-  popupContainerClassName,
-  popupClassName,
-  renderInPortal,
-  offset = [0, 0],
-  disabled = false,
-  onMouseLeave,
-  renderBackdrop,
-  backdropClassName,
-  preventOverflowOptions = {},
-  flipOptions = {},
-  additionalModifiers = [],
-  hidePopupWhenTriggerIsHidden = true,
-  shrinkable,
-  onOpen = noop,
-  onClose = noop,
-  supportMobile = false,
-  title = "",
-  mobilePopupStyle,
-  mobilePopupContentClassName,
-  getPopupContainer,
-  fixStackingContextAfterOpen = false,
-  onFirstUpdate,
-  transform,
-}: PopoverOldProps) => {
-  return (
-    <Popover.Root open={open} disabled={disabled} onOpen={onOpen} onClose={onClose}>
-      {triggerDomElement ? (
-        <Popover.Trigger reference={triggerDomElement}></Popover.Trigger>
-      ) : (
-        <Popover.Trigger>{trigger}</Popover.Trigger>
-      )}
-      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
-        <Popover.Content
-          children={children}
-          placement={placement}
-          popupStyle={popupStyle}
-          popupContainerClassName={popupContainerClassName}
-          popupClassName={popupClassName}
-          offset={offset}
-          onMouseLeave={onMouseLeave}
-          renderBackdrop={renderBackdrop}
-          backdropClassName={backdropClassName}
-          preventOverflowOptions={preventOverflowOptions}
-          flipOptions={flipOptions}
-          additionalModifiers={additionalModifiers}
-          hidePopupWhenTriggerIsHidden={hidePopupWhenTriggerIsHidden}
-          shrinkable={shrinkable}
-          supportMobile={supportMobile}
-          title={title}
-          mobilePopupStyle={mobilePopupStyle}
-          mobilePopupContentClassName={mobilePopupContentClassName}
-          fixStackingContextAfterOpen={fixStackingContextAfterOpen}
-          onFirstUpdate={onFirstUpdate}
-          transform={transform}
-        />
-      </Wrap>
-    </Popover.Root>
-  );
+export type {
+  Placement,
+  State,
+  Reference,
+  PopoverRootProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+  PopoverPortalProps,
 };

package/src/popover/popover-old.tsx

@@ -0,0 +1,113 @@
+import noop from "lodash/noop";
+import {Wrap} from "@fibery/react/src/wrap";
+import {Popover, PopoverContentProps, PopoverPortalProps, PopoverRootProps, Reference} from "./index";
+import {ReactNode} from "react";
+
+export type PopoverOldProps = Pick<PopoverRootProps, "children" | "open" | "onOpen" | "onClose" | "disabled"> &
+  PopoverContentProps &
+  Pick<PopoverPortalProps, "getPopupContainer"> & {
+    trigger?: ReactNode;
+    triggerDomElement?: Reference;
+    renderInPortal?: boolean;
+  };
+/**
+ * @deprecated Use the new `Popover` compound component instead.
+ *
+ * The `PopoverOld` component is deprecated and will be removed in a future version.
+ * Please migrate to the new `Popover` API which provides better composition and flexibility:
+ *
+ * @example
+ * ```tsx
+ * // Instead of PopoverOld:
+ * <PopoverOld
+ *   trigger={<button>Click me</button>}
+ *   open={isOpen}
+ *   onOpen={() => setIsOpen(true)}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <div>Popover content</div>
+ * </PopoverOld>
+ *
+ * // Use Popover compound components:
+ * <Popover.Root
+ *   open={isOpen}
+ *   onOpen={() => setIsOpen(true)}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Popover.Trigger asChild triggerEvent="click">
+ *     <button>Click me</button>
+ *   </Popover.Trigger>
+ *   <Popover.Portal>
+ *     <Popover.Content>
+ *       <div>Popover content</div>
+ *     </Popover.Content>
+ *   </Popover.Portal>
+ * </Popover.Root>
+ * ```
+ */
+export const PopoverOld = ({
+  trigger,
+  triggerDomElement,
+  children,
+  placement,
+  open,
+  popupStyle,
+  popupContainerClassName,
+  popupClassName,
+  renderInPortal,
+  offset = [0, 0],
+  disabled = false,
+  onMouseLeave,
+  renderBackdrop,
+  backdropClassName,
+  preventOverflowOptions = {},
+  flipOptions = {},
+  additionalModifiers = [],
+  hidePopupWhenTriggerIsHidden = true,
+  shrinkable,
+  onOpen = noop,
+  onClose = noop,
+  supportMobile = false,
+  title = "",
+  mobilePopupStyle,
+  mobilePopupContentClassName,
+  getPopupContainer,
+  fixStackingContextAfterOpen = false,
+  onFirstUpdate,
+  transform,
+}: PopoverOldProps) => {
+  return (
+    <Popover.Root open={open} disabled={disabled} onOpen={onOpen} onClose={onClose}>
+      {triggerDomElement ? (
+        <Popover.Trigger reference={triggerDomElement}></Popover.Trigger>
+      ) : (
+        <Popover.Trigger>{trigger}</Popover.Trigger>
+      )}
+      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
+        <Popover.Content
+          children={children}
+          placement={placement}
+          popupStyle={popupStyle}
+          popupContainerClassName={popupContainerClassName}
+          popupClassName={popupClassName}
+          offset={offset}
+          onMouseLeave={onMouseLeave}
+          renderBackdrop={renderBackdrop}
+          backdropClassName={backdropClassName}
+          preventOverflowOptions={preventOverflowOptions}
+          flipOptions={flipOptions}
+          additionalModifiers={additionalModifiers}
+          hidePopupWhenTriggerIsHidden={hidePopupWhenTriggerIsHidden}
+          shrinkable={shrinkable}
+          supportMobile={supportMobile}
+          title={title}
+          mobilePopupStyle={mobilePopupStyle}
+          mobilePopupContentClassName={mobilePopupContentClassName}
+          fixStackingContextAfterOpen={fixStackingContextAfterOpen}
+          onFirstUpdate={onFirstUpdate}
+          transform={transform}
+        />
+      </Wrap>
+    </Popover.Root>
+  );
+};

package/src/popover/popup-modifiers-context.ts

@@ -2,7 +2,7 @@ import {createContext} from "@fibery/react/src/create-context";
 import {getPopupContainerElement} from "../utils-dom";
 import {$TSFixMe} from "../tsfixme";
 import {Modifier} from "react-popper";
-import {PopoverOldProps} from "./index";
+import {PopoverOldProps} from "./popover-old";
 
 export const [PopupModifiersProvider, usePopupModifiers] = createContext<{
   getPopupContainer: () => HTMLElement;

package/src/scale-generator.ts

@@ -14,7 +14,7 @@ export type OneBasedScale<T> = readonly [
   step09: T,
   step10: T,
   step11: T,
-  step12: T
+  step12: T,
 ];
 
 export type ZeroBasedScale<T> = readonly [
@@ -29,7 +29,7 @@ export type ZeroBasedScale<T> = readonly [
   step09: T,
   step10: T,
   step11: T,
-  step12: T
+  step12: T,
 ];
 
 export function zeroBasedFromOneBased<T>(scale: OneBasedScale<T>) {

package/src/select/components/clear-indicator.tsx

@@ -5,7 +5,7 @@ import RemoveIcon from "../../icons/react/Remove";
 export function ClearIndicator<
   TOption,
   IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
+  Group extends GroupBase<TOption> = GroupBase<TOption>,
 >({
   innerProps,
   selectProps,

package/src/select/components/drop-down-indicator.tsx

@@ -14,7 +14,7 @@ const expanderStyle = css`
 export function AlwaysVisibleDropdownIndicator<
   TOption,
   IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
+  Group extends GroupBase<TOption> = GroupBase<TOption>,
 >(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
   return (
     <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
@@ -26,7 +26,7 @@ export function AlwaysVisibleDropdownIndicator<
 export function DropdownIndicator<
   TOption,
   IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
+  Group extends GroupBase<TOption> = GroupBase<TOption>,
 >(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
   if (props.selectProps.isDisabled) {
     return null;

package/src/select/components/group-heading.tsx

@@ -59,7 +59,7 @@ const GroupDivider = () => (
 export function GroupHeading<
   Option,
   IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 >({children, ...props}: GroupHeadingProps<Option, IsMulti, Group>) {
   if (props.data.separator) {
     return <GroupDivider />;
@@ -91,7 +91,7 @@ export function GroupHeading<
 export function GroupSeparator<
   Option,
   IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 >({...props}: GroupHeadingProps<Option, IsMulti, Group>) {
   // Hide separators when searching
   if (!props.data.separator || props.selectProps.inputValue) {

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

@@ -67,7 +67,7 @@ const drawListElement: ItemContent<ReactNode, never> = (index, child) => child;
 export function MenuListVirtualized<
   Option,
   IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 >(props: MenuListProps<Option, IsMulti, Group>) {
   const {children, focusedOption, innerRef, maxHeight, theme, getStyles, cx, selectProps} = props;
   const isPhone = useIsPhone();

package/src/select/components/option.tsx

@@ -51,7 +51,7 @@ const OptionWithTextContent = css`
 export function OptionSlow<
   Option,
   IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  Group extends GroupBase<Option> = GroupBase<Option>,
 >({children, ...rest}: OptionProps<Option, IsMulti, Group>) {
   const {isDisabled, isSelected, isFocused} = rest;
   const isPureText = useMemo(() => isPureTextChildren(children), [children]);