@koobiq/react-components 0.0.1-beta.9 → 0.1.0

package/dist/components/Menu/components/MenuItem/MenuItem.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useHover, usePress, clsx, mergeProps } from "@koobiq/react-core";
+import { useMenuItem } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+const { listItem } = utilClasses;
+const textVariant = utilClasses.typography;
+function MenuItem({ item, state }) {
+  const ref = useRef(null);
+  const {
+    menuItemProps,
+    isSelected: selected,
+    isDisabled: disabled,
+    isFocusVisible: focusVisible
+  } = useMenuItem({ key: item.key }, state, ref);
+  const { hoverProps, isHovered: hovered } = useHover({ isDisabled: disabled });
+  const { isPressed: pressed, pressProps } = usePress({ isDisabled: disabled });
+  const Tag = item.props.href ? "a" : "li";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...mergeProps(menuItemProps, hoverProps, pressProps),
+      "data-hovered": hovered,
+      "data-pressed": pressed,
+      "data-selected": selected,
+      "data-focus-visible": focusVisible,
+      className: clsx(listItem, textVariant["text-normal"]),
+      ref,
+      children: item.rendered
+    }
+  );
+}
+export {
+  MenuItem
+};

package/dist/components/Menu/components/MenuItem/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuItem';

package/dist/components/Menu/components/MenuSection/MenuSection.d.ts

@@ -0,0 +1,7 @@
+import type { Node } from '@koobiq/react-core';
+import type { TreeState } from '@koobiq/react-primitives';
+export type MenuSectionProps<T> = {
+    section: Node<T>;
+    state: TreeState<T>;
+};
+export declare function MenuSection<T>({ section, state }: MenuSectionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuSection/MenuSection.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMenuSection } from "@koobiq/react-primitives";
+import s from "./MenuSection.module.css.js";
+import { MenuItem } from "../MenuItem/MenuItem.js";
+import { Typography } from "../../../Typography/Typography.js";
+function MenuSection({ section, state }) {
+  const { itemProps, headingProps, groupProps } = useMenuSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  return /* @__PURE__ */ jsxs("li", { ...itemProps, children: [
+    section.rendered && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        display: "block",
+        variant: "caps-compact-strong",
+        color: "contrast-secondary",
+        className: s.heading,
+        ...headingProps,
+        children: section.rendered
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { ...groupProps, className: s.base, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(MenuItem, { item: node, state }, node.key)) })
+  ] });
+}
+export {
+  MenuSection
+};

package/dist/components/Menu/components/MenuSection/MenuSection.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-menusection-6a5530";
+const heading = "kbq-menusection-heading-2be1f1";
+const s = {
+  base,
+  heading
+};
+export {
+  base,
+  s as default,
+  heading
+};

package/dist/components/Menu/components/MenuSection/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuSection';

package/dist/components/Menu/components/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuInner';

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Menu';
+export * from './types';

package/dist/components/Menu/types.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref, RefObject } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { ButtonOptions, AriaMenuProps } from '@koobiq/react-primitives';
+import type { PopoverProps, PopoverPropPlacement } from '../Popover';
+export type MenuPropControl = (props: ButtonOptions & {
+    ref?: Ref<HTMLButtonElement>;
+}) => ReactElement;
+export type MenuPropPlacement = PopoverPropPlacement;
+type MenuDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+};
+export type MenuProps<T> = ExtendableProps<{
+    /** Whether the overlay is open by default (controlled). */
+    isOpen?: boolean;
+    /** Whether the overlay is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the overlay's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The render function of the control for displaying the modal window. */
+    control?: MenuPropControl;
+    /** The ref for the element which the popover positions itself with respect to. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**
+     * The placement of the element with respect to its anchor element.
+     * @default 'bottom start'
+     */
+    placement?: MenuPropPlacement;
+    /** Ref to the popover. */
+    ref?: Ref<HTMLDivElement>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverProps;
+        list?: ComponentPropsWithRef<'ul'>;
+    };
+} & MenuDeprecatedProps, AriaMenuProps<T>>;
+export type MenuComponent = <T>(props: MenuProps<T>) => ReactElement | null;
+export type MenuRef = ComponentRef<'div'>;
+export {};

package/dist/components/Modal/Modal.d.ts

@@ -1,2 +1,33 @@
-import type { ModalProps } from './types';
-export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type BackdropProps } from '../Backdrop';
+import { Dialog, type DialogProps } from '../Dialog';
+declare const ModalComponent: import("react").ForwardRefExoticComponent<{
+    size?: import("./types").ModalPropSize;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    children?: import("./types").ModalPropContent;
+    control?: import("./types").ModalPropControl;
+    hideCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalContainer?: Element;
+    disableExitOnClickOutside?: boolean;
+    disableExitOnEscapeKeyDown?: boolean;
+    hideBackdrop?: boolean;
+    className?: string;
+    'data-testid'?: string | number;
+    disableFocusManagement?: boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    slotProps?: {
+        dialog?: DialogProps;
+        backdrop?: BackdropProps;
+        modal?: import("react").ComponentPropsWithRef<"div">;
+    };
+} & {
+    open?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof ModalComponent & {
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
+};
+export declare const Modal: CompoundedComponent;
+export {};

package/dist/components/Modal/Modal.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, cloneElement, isValidElement } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useBoolean, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useOverlayTriggerState, useOverlayTrigger, useModalOverlay, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import s from "./Modal.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const Modal = forwardRef((props, ref) => {
+const ModalComponent = forwardRef((props, ref) => {
   const {
     size = "medium",
     hideCloseButton = false,
@@ -17,7 +18,8 @@ const Modal = forwardRef((props, ref) => {
     defaultOpen,
     hideBackdrop,
     onOpenChange,
-    open: openProp,
+    open,
+    isOpen: isOpenProp,
     portalContainer,
     disableFocusManagement,
     disableExitOnClickOutside,
@@ -25,19 +27,25 @@ const Modal = forwardRef((props, ref) => {
     shouldCloseOnInteractOutside,
     ...other
   } = props;
+  const isOpen = isOpenProp ?? open;
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Modal: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
   const state = useOverlayTriggerState({
-    isOpen: openProp,
+    isOpen,
     onOpenChange,
     defaultOpen,
     ...other
   });
-  const { isOpen: openState, close } = state;
-  const [opened, { on, off }] = useBoolean(openState);
+  const { isOpen: isOpenState, close } = state;
+  const [isOpened, { on, off }] = useBoolean(isOpenState);
   const modalRef = useDOMRef(null);
   const containerRef = useDOMRef(ref);
   const { triggerProps, overlayProps } = useOverlayTrigger(
     { type: "dialog" },
-    { ...state, isOpen: openState }
+    { ...state, isOpen: isOpenState }
   );
   const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
     {
@@ -46,7 +54,7 @@ const Modal = forwardRef((props, ref) => {
       isDismissable: !disableExitOnClickOutside,
       isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
     },
-    { ...state, isOpen: opened },
+    { ...state, isOpen: isOpened },
     modalRef
   );
   const resolvedChildren = () => {
@@ -64,7 +72,7 @@ const Modal = forwardRef((props, ref) => {
     other
   );
   const backdropProps = mergeProps(
-    { open: openState && !hideBackdrop },
+    { isOpen: isOpenState && !hideBackdrop },
     underlayProps,
     slotProps?.backdrop
   );
@@ -85,20 +93,15 @@ const Modal = forwardRef((props, ref) => {
     },
     slotProps?.modal
   );
-  const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    control?.({
-      onClick: onPress,
-      disabled: isDisabled,
-      ...otherTriggerProps
-    }),
+    control?.(triggerProps),
     /* @__PURE__ */ jsx(
       Transition,
       {
         onEnter: on,
         timeout: 300,
         onExited: off,
-        in: openState,
+        in: isOpenState,
         nodeRef: containerRef,
         unmountOnExit: true,
         appear: true,
@@ -117,7 +120,11 @@ const Modal = forwardRef((props, ref) => {
     )
   ] });
 });
-Modal.displayName = "Modal";
+ModalComponent.displayName = "Modal";
+const Modal = ModalComponent;
+Modal.Header = Dialog.Header;
+Modal.Body = Dialog.Body;
+Modal.Footer = Dialog.Footer;
 export {
   Modal
 };

package/dist/components/Modal/index.d.ts

@@ -1,4 +1,17 @@
 export * from './Modal';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as ModalHeader, DialogContent as ModalContent, DialogFooter as ModalFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Header` instead.
+ */
+export declare const ModalHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Body` instead.
+ */
+export declare const ModalContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Footer` instead.
+ */
+export declare const ModalFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from "../Dialog/Dialog.js";
+const ModalHeader = Dialog.Header;
+const ModalContent = Dialog.Body;
+const ModalFooter = Dialog.Footer;
+export {
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+};

package/dist/components/Modal/types.d.ts

@@ -8,14 +8,22 @@ export type ModalPropContent = ReactNode | ((props: {
     close(): void;
 }) => ReactElement);
 export type ModalPropControl = (props: ButtonOptions) => ReactElement;
+type ModalDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+};
 export type ModalProps = {
     /**
      * Component width size.
-     * @default medium
-     * */
+     * @default 'medium'
+     */
     size?: ModalPropSize;
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: boolean;
     /** The default open state. Use when the component is not controlled. */
     defaultOpen?: boolean;
     /** The content of the component. */
@@ -25,7 +33,7 @@ export type ModalProps = {
     /**
      * If `true`, the close button isn't shown.
      * @default false
-     * */
+     */
     hideCloseButton?: boolean;
     /** Handler that is called when the modal's open state changes. */
     onOpenChange?: (open: boolean) => void;
@@ -71,5 +79,6 @@ export type ModalProps = {
         backdrop?: BackdropProps;
         modal?: ComponentPropsWithRef<'div'>;
     };
-};
+} & ModalDeprecatedProps;
 export type ModalRef = ComponentRef<'div'>;
+export {};

package/dist/components/Popover/Popover.d.ts

@@ -1,2 +1,42 @@
-import type { PopoverProps } from './types';
-export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+import { Dialog } from '../Dialog';
+declare const PopoverComponent: import("react").ForwardRefExoticComponent<{
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    children?: import("./types").PopoverPropContent;
+    control?: import("./types").PopoverPropControl;
+    size?: import("./types").PopoverPropSize;
+    hideCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalContainer?: Element;
+    disableExitOnEscapeKeyDown?: boolean;
+    className?: string;
+    style?: import("react").CSSProperties;
+    'data-testid'?: string | number;
+    disableFocusManagement?: boolean;
+    placement?: import("./types").PopoverPropPlacement;
+    anchorRef?: import("react").RefObject<HTMLElement | null>;
+    hideArrow?: boolean;
+    isNonModal?: boolean;
+    arrowBoundaryOffset?: number;
+    containerPadding?: number;
+    offset?: number;
+    crossOffset?: number;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    type?: import("./types").PopoverPropType;
+    maxBlockSize?: number;
+    slotProps?: {
+        dialog?: import("../Dialog").DialogProps;
+        arrow?: import("react").ComponentPropsWithRef<"div">;
+        backdrop?: import("react").ComponentPropsWithRef<"div">;
+        transition?: Partial<import("react-transition-group/Transition").TransitionProps<HTMLElement>>;
+    };
+} & {
+    open?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof PopoverComponent & {
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
+};
+export declare const Popover: CompoundedComponent;
+export {};

package/dist/components/Popover/Popover.js

@@ -1,157 +1,39 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, cloneElement, isValidElement } from "react";
-import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
-import { useOverlayTriggerState, useOverlayTrigger, usePopover, Overlay } from "@koobiq/react-primitives";
-import { Transition } from "react-transition-group";
-import s from "./Popover.module.css.js";
-import { normalizeInlineSize } from "./utils.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
+import { useOverlayTriggerState } from "@koobiq/react-primitives";
+import { PopoverInner } from "./PopoverInner.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const Popover = forwardRef(
+const PopoverComponent = forwardRef(
   (props, ref) => {
     const {
-      offset = 0,
-      size = "medium",
-      crossOffset = 0,
-      hideArrow = false,
-      containerPadding = 12,
-      arrowBoundaryOffset = 20,
-      placement: placementProp = "top",
-      control,
-      children,
-      anchorRef,
-      slotProps,
-      className,
-      isNonModal,
-      defaultOpen,
+      open,
+      isOpen: isOpenProp,
       onOpenChange,
-      open: openProp,
-      portalContainer,
-      hideCloseButton,
-      disableFocusManagement,
-      disableExitOnEscapeKeyDown,
-      shouldCloseOnInteractOutside,
+      defaultOpen,
       ...other
     } = props;
-    const showArrow = !hideArrow;
-    const domRef = useDOMRef(ref);
-    const controlRef = useRef(null);
+    const isOpen = isOpenProp ?? open;
+    if (process.env.NODE_ENV !== "production" && "open" in props) {
+      deprecate(
+        'Popover: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+      );
+    }
     const state = useOverlayTriggerState({
-      defaultOpen,
+      isOpen,
       onOpenChange,
-      isOpen: openProp,
+      defaultOpen,
       ...other
     });
-    const openState = state.isOpen;
-    const [opened, { on, off }] = useBoolean(openState);
-    const { triggerProps, overlayProps } = useOverlayTrigger(
-      { type: "dialog" },
-      { ...state, isOpen: openState }
-    );
-    const {
-      popoverProps,
-      underlayProps,
-      arrowProps: arrowPropsCommon,
-      placement
-    } = usePopover(
-      {
-        ...props,
-        offset,
-        isNonModal,
-        crossOffset,
-        maxHeight: 480,
-        containerPadding,
-        popoverRef: domRef,
-        arrowBoundaryOffset,
-        placement: placementProp,
-        shouldCloseOnInteractOutside,
-        triggerRef: anchorRef || controlRef,
-        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
-      },
-      { ...state, isOpen: openState || opened }
-    );
-    const resolvedChildren = () => {
-      if (typeof children === "function")
-        return cloneElement(children({ close: state.close }), overlayProps);
-      if (isValidElement(children)) return cloneElement(children, overlayProps);
-      return children;
-    };
-    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
-    const arrowProps = mergeProps(
-      { className: s.arrow },
-      arrowPropsCommon,
-      slotProps?.arrow
-    );
-    const dialogProps = mergeProps(
-      {
-        role: "dialog",
-        hideCloseButton,
-        className: s.dialog,
-        onClose: state.close
-      },
-      slotProps?.dialog
-    );
-    const backdropProps = mergeProps(
-      {
-        className: s.underlay
-      },
-      slotProps?.backdrop,
-      underlayProps
-    );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      control?.({
-        ref: controlRef,
-        onClick: onPress,
-        disabled: isDisabled,
-        ...otherTriggerProps
-      }),
-      /* @__PURE__ */ jsx(
-        Transition,
-        {
-          onEnter: on,
-          timeout: 300,
-          onExited: off,
-          in: openState,
-          nodeRef: domRef,
-          unmountOnExit: true,
-          appear: true,
-          children: (transition) => /* @__PURE__ */ jsxs(
-            Overlay,
-            {
-              portalContainer,
-              disableFocusManagement,
-              children: [
-                /* @__PURE__ */ jsx("div", { ...backdropProps }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    ref: domRef,
-                    "data-size": size,
-                    "data-arrow": showArrow,
-                    "data-placement": placement,
-                    "data-transition": transition,
-                    className: clsx(s.base, s[size], className),
-                    ...mergeProps(popoverProps, other),
-                    style: {
-                      ...popoverProps.style,
-                      "--popover-inline-size": normalizeInlineSize(size)
-                    },
-                    children: [
-                      showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
-                      /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        },
-        placement
-      )
-    ] });
+    return /* @__PURE__ */ jsx(PopoverInner, { popoverRef: ref, ...other, state });
   }
 );
-Popover.displayName = "Popover";
+PopoverComponent.displayName = "Popover";
+const Popover = PopoverComponent;
+Popover.Header = Dialog.Header;
+Popover.Body = Dialog.Body;
+Popover.Footer = Dialog.Footer;
 export {
   Popover
 };

package/dist/components/Popover/Popover.module.css.js

@@ -1,9 +1,11 @@
 const base = "kbq-popover-f14dc5";
+const container = "kbq-popover-container-332b0b";
 const arrow = "kbq-popover-arrow-3bdadb";
 const underlay = "kbq-popover-underlay-9c5b07";
 const dialog = "kbq-popover-dialog-e39a6d";
 const s = {
   base,
+  container,
   arrow,
   underlay,
   dialog
@@ -11,6 +13,7 @@ const s = {
 export {
   arrow,
   base,
+  container,
   s as default,
   dialog,
   underlay

package/dist/components/Popover/PopoverInner.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import type { PopoverInnerProps } from './types';
+export declare const PopoverInner: FC<PopoverInnerProps>;