@koobiq/react-components 0.0.1-beta.16 → 0.0.1-beta.18

package/dist/components/Collections/Divider.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type DividerProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    children?: ReactNode;
+    key?: string | number;
+};
+export declare function Divider(_props: DividerProps): null;
+export declare namespace Divider {
+    var getCollectionNode: (props: DividerProps) => Generator<{
+        type: string;
+        textValue: string;
+        props: DividerProps;
+    }, void, unknown>;
+}

package/dist/components/Collections/Divider.js

@@ -0,0 +1,14 @@
+"use client";
+function Divider(_props) {
+  return null;
+}
+Divider.getCollectionNode = function* getCollectionNode(props) {
+  yield {
+    type: "divider",
+    textValue: "divider",
+    props
+  };
+};
+export {
+  Divider
+};

package/dist/components/Collections/Header.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type HeaderProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    children?: ReactNode;
+    key?: string | number;
+};
+export declare function Header(_props: HeaderProps): null;
+export declare namespace Header {
+    var getCollectionNode: (props: HeaderProps) => Generator<{
+        type: string;
+        textValue: string;
+        rendered: ReactNode;
+        props: HeaderProps;
+    }, void, unknown>;
+}

package/dist/components/Collections/Header.js

@@ -0,0 +1,16 @@
+"use client";
+function Header(_props) {
+  return null;
+}
+Header.getCollectionNode = function* getCollectionNode(props) {
+  const rendered = props.children;
+  yield {
+    type: "header",
+    textValue: "header",
+    rendered,
+    props
+  };
+};
+export {
+  Header
+};

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

@@ -1,2 +1,4 @@
 export * from './Section';
 export * from './Item';
+export * from './Divider';
+export * from './Header';

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -15,8 +15,8 @@ export declare const DialogCloseButton: import("react").ForwardRefExoticComponen
     startIcon?: import("react").ReactNode;
     endIcon?: import("react").ReactNode;
     'data-testid'?: string | number;
-    onHoverStart?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
-    onHoverEnd?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
+    onHoverStart?: (e: import("@react-types/shared").HoverEvent) => void;
+    onHoverEnd?: (e: import("@react-types/shared").HoverEvent) => void;
 } & {
     as?: "button" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,15 @@
+import { Pressable } from '@koobiq/react-core';
+import { Divider, Item, Section, Header } from '../Collections';
+import { ListItemText } from '../List';
+import type { MenuComponentProps } from './index';
+declare const MenuComponent: MenuComponentProps;
+type CompoundedComponent = typeof MenuComponent & {
+    Item: typeof Item;
+    Header: typeof Header;
+    Section: typeof Section;
+    Divider: typeof Divider;
+    ItemText: typeof ListItemText;
+    Control: typeof Pressable;
+};
+export declare const Menu: CompoundedComponent;
+export {};

package/dist/components/Menu/Menu.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useDOMRef, mergeProps, clsx, Pressable } from "@koobiq/react-core";
+import { useMenuTriggerState, useMenuTrigger } from "@koobiq/react-primitives";
+import s from "./Menu.module.css.js";
+import { MenuInner } from "./components/MenuInner/MenuInner.js";
+import { Header } from "../Collections/Header.js";
+import { Divider } from "../Collections/Divider.js";
+import { PopoverInner } from "../Popover/Popover.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
+function MenuRender(props, ref) {
+  const {
+    placement = "bottom start",
+    "data-testid": testId,
+    control,
+    style,
+    open,
+    anchorRef,
+    className,
+    slotProps,
+    ...otherProps
+  } = props;
+  const state = useMenuTriggerState({ ...props, isOpen: open });
+  const domRef = useDOMRef(ref);
+  const controlRef = useRef(null);
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    {},
+    state,
+    controlRef
+  );
+  const { isDisabled, ...otherMenuTriggerProps } = menuTriggerProps;
+  const popoverProps = mergeProps(
+    {
+      style,
+      state,
+      offset: 4,
+      size: "auto",
+      hideArrow: true,
+      popoverRef: domRef,
+      "data-testid": testId,
+      anchorRef: anchorRef || controlRef,
+      className: clsx(s.popover, className)
+    },
+    slotProps?.popover
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    control?.({
+      ref: controlRef,
+      disabled: isDisabled,
+      ...otherMenuTriggerProps
+    }),
+    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...otherProps, ...menuProps }) })
+  ] });
+}
+const MenuComponent = forwardRef(MenuRender);
+const Menu = MenuComponent;
+Menu.Item = Item;
+Menu.Section = Section;
+Menu.Header = Header;
+Menu.Divider = Divider;
+Menu.ItemText = ListItemText;
+Menu.Control = Pressable;
+export {
+  Menu
+};

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

@@ -0,0 +1,8 @@
+const popover = "kbq-menu-popover-e1857c";
+const s = {
+  popover
+};
+export {
+  s as default,
+  popover
+};

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

@@ -0,0 +1,3 @@
+import type { AriaMenuOptions } from '@koobiq/react-primitives';
+export type MenuInnerProps<T> = AriaMenuOptions<T>;
+export declare function MenuInner<T extends object>(props: MenuInnerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuInner/MenuInner.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import { useTreeState, useMenu } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./MenuInner.module.css.js";
+import { MenuSection } from "../MenuSection/MenuSection.js";
+import { Divider } from "../../../Divider/Divider.js";
+import { MenuItem } from "../MenuItem/MenuItem.js";
+const { list } = utilClasses;
+function MenuInner(props) {
+  const state = useTreeState(props);
+  const ref = useRef(null);
+  const { menuProps } = useMenu(props, state, ref);
+  const multiple = props.selectionMode === "multiple";
+  const renderItems = (treeState) => [...treeState.collection].map((item) => {
+    switch (item.type) {
+      case "header":
+        return /* @__PURE__ */ jsx("header", { role: "presentation", children: item.rendered }, item.key);
+      case "divider":
+        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+      case "item":
+        return /* @__PURE__ */ jsx(MenuItem, { item, state }, item.key);
+      case "section":
+        return /* @__PURE__ */ jsx(MenuSection, { section: item, state }, item.key);
+      default:
+        return null;
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...menuProps,
+      className: clsx(s.base, list),
+      ...multiple && { "aria-multiselectable": true },
+      ref,
+      children: renderItems(state)
+    }
+  );
+}
+export {
+  MenuInner
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-menuinner-0117f8";
+const divider = "kbq-menuinner-divider-acbe04";
+const s = {
+  base,
+  divider
+};
+export {
+  base,
+  s as default,
+  divider
+};

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

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

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

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

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,6 @@
+import type { Node, 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 { jsx, Fragment, jsxs } 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__ */ jsx(Fragment, { children: /* @__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,62 @@
+import type { ComponentRef, CSSProperties, ReactElement, Ref, RefObject } from 'react';
+import type { ButtonOptions, AriaMenuProps } from '@koobiq/react-primitives';
+import type { PopoverInnerProps, PopoverPropPlacement } from '../Popover';
+export type MenuPropControl = (props: ButtonOptions & {
+    ref?: Ref<HTMLButtonElement>;
+}) => ReactElement;
+export type MenuPropChildren<T extends object> = AriaMenuProps<T>['children'];
+export type MenuPropItems<T extends object> = AriaMenuProps<T>['items'];
+export declare const menuPropSelectionMode: readonly ["none", "single", "multiple"];
+export type MenuPropSelectionMode = (typeof menuPropSelectionMode)[number];
+export type MenuPropOnAction<T extends object> = AriaMenuProps<T>['onAction'];
+export type MenuPropSelected<T extends object> = AriaMenuProps<T>['selectedKeys'];
+export type MenuPropSelectionChange<T extends object> = AriaMenuProps<T>['onSelectionChange'];
+export type MenuPropDisabledKeys<T extends object> = AriaMenuProps<T>['disabledKeys'];
+export type MenuPropPlacement = PopoverPropPlacement;
+export type MenuProps<T extends object> = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The contents of the collection. */
+    children?: MenuPropChildren<T>;
+    /** The render function of the control for displaying the modal window. */
+    control?: MenuPropControl;
+    /** Whether the overlay is open by default (controlled). */
+    open?: 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;
+    /** Item objects in the collection. */
+    items?: MenuPropItems<T>;
+    /** The type of selection that is allowed in the collection. */
+    selectionMode?: MenuPropSelectionMode;
+    /**
+     * Handler that is called when a user performs an action on an item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: MenuPropOnAction<T>;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: MenuPropSelected<T>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: MenuPropSelectionChange<T>;
+    disabledKeys?: MenuPropDisabledKeys<T>;
+    /** 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?: PopoverInnerProps;
+    };
+};
+export type MenuComponentProps = <T extends object>(props: MenuProps<T>) => ReactElement | null;
+export type MenuRef = ComponentRef<'div'>;

package/dist/components/Menu/types.js

@@ -0,0 +1,4 @@
+const menuPropSelectionMode = ["none", "single", "multiple"];
+export {
+  menuPropSelectionMode
+};

package/dist/components/index.d.ts

@@ -26,4 +26,5 @@ export * from './List';
 export * from './AnimatedIcon';
 export * from './Select';
 export * from './Divider';
+export * from './Menu';
 export * from './layout';

package/dist/index.js

@@ -63,6 +63,8 @@ import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
 import { Select } from "./components/Select/Select.js";
 import { Divider } from "./components/Divider/Divider.js";
 import { dividerPropDisplay, dividerPropOrientation } from "./components/Divider/types.js";
+import { Menu } from "./components/Menu/Menu.js";
+import { menuPropSelectionMode } from "./components/Menu/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -87,6 +89,7 @@ export {
   Item as ListItem,
   ListItemText,
   Section as ListSection,
+  Menu,
   Modal,
   ModalContent,
   ModalFooter,
@@ -141,6 +144,7 @@ export {
   inputNumberPropVariant,
   inputPropVariant,
   listPropSelectionMode,
+  menuPropSelectionMode,
   modalPropSize,
   popoverPropPlacement,
   popoverPropSize,

package/dist/style.css

@@ -1450,16 +1450,13 @@
   background-color: var(--checkbox-bg-color);
   outline-offset: calc(-1 * var(--checkbox-outline-width) / 2);
   outline: var(--checkbox-outline-width) solid var(--checkbox-outline-color);
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   display: flex;
   position: relative;
 }
 
-.kbq-checkbox-checkbox-dbb3d9 > * {
-  flex-shrink: 0;
-}
-
 .kbq-checkbox-normal-646719 {
   --checkbox-size: var(--kbq-size-l);
   --checkbox-margin-block: var(--kbq-size-3xs);
@@ -2204,6 +2201,7 @@
   transition: background-color var(--kbq-transition-default), border var(--kbq-transition-default), outline-color var(--kbq-transition-default);
   outline-offset: calc(-1 * var(--radio-outline-width) / 2);
   outline: var(--radio-outline-width) solid var(--radio-outline-color);
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   display: flex;
@@ -2346,6 +2344,7 @@
   border-radius: var(--toggle-track-border-radius);
   outline: 2px solid var(--toggle-track-outline-color);
   transition: background-color var(--kbq-transition-default), outline-color var(--kbq-transition-default);
+  flex-shrink: 0;
   position: relative;
 }
 
@@ -2691,6 +2690,7 @@
   min-block-size: 48px;
   display: flex;
   position: relative;
+  overflow: hidden;
 }
 
 .kbq-dialog-container-a08202 {
@@ -3166,6 +3166,33 @@
   align-self: stretch;
   block-size: auto;
 }
+.kbq-menu-popover-e1857c {
+  border-radius: var(--kbq-size-s);
+  min-inline-size: 200px;
+  max-inline-size: 640px;
+}
+.kbq-menuinner-0117f8 {
+  padding: var(--kbq-size-xxs);
+  inline-size: 100%;
+}
+
+.kbq-menuinner-divider-acbe04 {
+  margin-inline: calc(var(--kbq-size-xxs) * -1);
+  inline-size: initial;
+}
+.kbq-menusection-6a5530 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: auto;
+}
+
+.kbq-menusection-heading-2be1f1 {
+  -webkit-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  padding: var(--kbq-size-s) var(--kbq-size-m);
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.16",
+  "version": "0.0.1-beta.18",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.16",
-    "@koobiq/react-icons": "0.0.1-beta.16",
-    "@koobiq/react-core": "0.0.1-beta.16",
-    "@koobiq/react-primitives": "0.0.1-beta.16"
+    "@koobiq/logger": "0.0.1-beta.18",
+    "@koobiq/react-primitives": "0.0.1-beta.18",
+    "@koobiq/react-core": "0.0.1-beta.18",
+    "@koobiq/react-icons": "0.0.1-beta.18"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",