@koine/react 1.0.26 → 1.0.29

package/Menu/MenuMui.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { type HTMLMotionProps } from "framer-motion";
+import { useMenu } from "@mui/base/MenuUnstyled";
+import { type PopperChildrenProps } from "react-popper";
+/**
+ * Props we control, cannot be overriden from implementers
+ */
+declare type MenuButtonOwnProps = {
+    "aria-controls"?: string;
+    "aria-haspopup": true | "true";
+    "aria-expanded"?: true | "true";
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => unknown;
+};
+declare type MenuButtonProps = Omit<React.ComponentPropsWithRef<"button">, keyof MenuButtonOwnProps> & MenuButtonOwnProps;
+export declare type MenuItemsProps = {
+    /**
+     * Closes the parent menu
+     */
+    close: () => unknown;
+};
+/**
+ * Props we control, cannot be overriden from implementers
+ */
+declare type MenuOwnProps = ReturnType<typeof useMenu>["getListboxProps"] & {
+    onKeyDown: (event: React.KeyboardEvent) => unknown;
+    style: React.StyleHTMLAttributes<HTMLDivElement>;
+};
+export declare type MenuProps = Omit<Omit<HTMLMotionProps<"div">, "children"> & {
+    placement?: PopperChildrenProps["placement"];
+    Button: (props: MenuButtonProps) => JSX.Element;
+    children: (props: MenuItemsProps) => React.ReactNode;
+}, keyof MenuOwnProps>;
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<unknown>>;
+export default Menu;

package/Menu/MenuMui.js

@@ -0,0 +1,76 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import { unstable_useEventCallback as useEventCallback } from "@mui/utils";
+import { motion as m, AnimatePresence, } from "framer-motion";
+import { useMenu, MenuUnstyledContext, } from "@mui/base/MenuUnstyled";
+import ModalUnstyled from "@mui/base/ModalUnstyled";
+import ClickAwayListener from "@mui/base/ClickAwayListener";
+import { usePopper } from "react-popper";
+import { clsx } from "@koine/utils/clsx";
+var MenuRoot = m.div;
+var MenuBackdrop = function () { return _jsx("div", { className: "fixed inset-0" }); };
+export var Menu = forwardRef(function Menu(props, ref) {
+    var Button = props.Button, placement = props.placement, children = props.children, className = props.className, htmlAttributes = __rest(props, ["Button", "placement", "children", "className"]);
+    var id = useId();
+    var buttonRef = useRef(null);
+    var menuActions = useRef(null);
+    var _a = useState(null), popperElement = _a[0], setPopperElement = _a[1];
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var open = Boolean(anchorEl);
+    var styles = usePopper(anchorEl, popperElement, {
+        placement: placement,
+        // strategy: "absolute",
+    }).styles;
+    var _c = useMenu({
+        listboxId: id,
+        // @ts-expect-error fix if we are going to use all this...
+        listboxRef: setPopperElement,
+        // these two make the Tab key behaviour correct, closing the menu on Tab
+        // press and re-focusing the Button trigger element
+        open: open,
+        onClose: function () { return setAnchorEl(null); },
+    }), registerItem = _c.registerItem, unregisterItem = _c.unregisterItem, getListboxProps = _c.getListboxProps, getItemProps = _c.getItemProps, getItemState = _c.getItemState;
+    var contextValue = {
+        registerItem: registerItem,
+        unregisterItem: unregisterItem,
+        getItemState: getItemState,
+        getItemProps: getItemProps,
+        open: open,
+    };
+    var handleButtonClick = function (event) {
+        if (open) {
+            setAnchorEl(null);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    var handleButtonKeyDown = function (event) {
+        var _a;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            setAnchorEl(event.currentTarget);
+            if (event.key === "ArrowUp") {
+                (_a = menuActions.current) === null || _a === void 0 ? void 0 : _a.highlightLastItem();
+            }
+        }
+    };
+    var close = useEventCallback(function () {
+        var _a;
+        setAnchorEl(null);
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+    var renderChildren = useMemo(function () {
+        var childrenProps = { close: close };
+        return children(childrenProps);
+    }, [children, close]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, id: id, "aria-haspopup": "true", "aria-controls": open ? id : undefined, "aria-expanded": open ? "true" : undefined, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown }), _jsx(AnimatePresence, { children: open && (_jsx(ModalUnstyled, __assign({ BackdropComponent: MenuBackdrop, onClose: close, onBackdropClick: close, open: open }, { children: _jsx("div", { children: _jsx(ClickAwayListener, __assign({ onClickAway: close }, { children: _jsx(MenuRoot, __assign({ initial: {
+                                    opacity: 0,
+                                }, animate: {
+                                    opacity: 1,
+                                }, exit: {
+                                    opacity: 0,
+                                }, className: clsx(className), style: styles["popper"] }, htmlAttributes, getListboxProps(), { "aria-labelledby": id }, { children: _jsx(MenuUnstyledContext.Provider, __assign({ value: contextValue }, { children: renderChildren })) })) })) }) }))) })] }));
+});
+export default Menu;

package/MenuItem/MenuItemMui.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type MenuItemsProps } from "../Menu/MenuMui";
+import { Polymorphic } from "../typings";
+export declare type MenuItemProps = React.PropsWithChildren<Partial<MenuItemsProps>>;
+export declare const MenuItem: Polymorphic.ComponentForwarded<"button", MenuItemProps>;
+export default MenuItem;

package/MenuItem/MenuItemMui.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useMenuItem } from "@mui/base/MenuItemUnstyled";
+// import { useMenuItem } from "./useMenuItem";
+import { clsx } from "@koine/utils/clsx";
+export var MenuItem = forwardRef(function MenuItem(props, ref) {
+    var _a = props.as, As = _a === void 0 ? "button" : _a, children = props.children, className = props.className, disabledProp = props.disabled, other = __rest(props, ["as", "children", "className", "disabled"]);
+    var _b = useMenuItem({
+        ref: ref,
+        disabled: disabledProp,
+    }), getRootProps = _b.getRootProps, disabled = _b.disabled, focusVisible = _b.focusVisible;
+    return (_jsx(As, __assign({ className: clsx(focusVisible && "", disabled && "", className) }, getRootProps(other), { children: children })));
+});
+export default MenuItem;

package/MenuItem/useMenuItem.d.ts

@@ -0,0 +1,11 @@
+import { UseMenuItemParameters } from "@mui/base/MenuItemUnstyled";
+export declare function useMenuItem(props: UseMenuItemParameters): {
+    getRootProps: (other?: Record<string, any>) => {
+        tabIndex: any;
+        id: any;
+        role: string;
+    };
+    disabled: boolean;
+    ref: import("react").Ref<any>;
+};
+export default useMenuItem;

package/MenuItem/useMenuItem.js

@@ -0,0 +1,58 @@
+import { __assign } from "tslib";
+import { useCallback, useContext, useEffect, useId, useRef, useState, } from "react";
+import { unstable_useForkRef as useForkRef } from "@mui/utils";
+import { MenuUnstyledContext } from "@mui/base/MenuUnstyled";
+// import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
+export function useMenuItem(props) {
+    var _a;
+    var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.ref, label = props.label;
+    var id = useId();
+    var menuContext = useContext(MenuUnstyledContext);
+    var itemRef = useRef(null);
+    var handleRef = useForkRef(itemRef, ref);
+    if (menuContext === null) {
+        throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
+    }
+    var registerItem = menuContext.registerItem, unregisterItem = menuContext.unregisterItem, open = menuContext.open;
+    useEffect(function () {
+        registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
+        return function () { return unregisterItem(id); };
+    }, [id, registerItem, unregisterItem, disabled, ref, label]);
+    // const { getRootProps: getButtonProps, focusVisible } = useButton({
+    //   disabled,
+    //   focusableWhenDisabled: true,
+    //   ref: handleRef,
+    // });
+    // Ensure the menu item is focused when highlighted
+    var _c = useState(false), focusRequested = _c[0], requestFocus = _c[1];
+    var focusIfRequested = useCallback(function () {
+        if (focusRequested && itemRef.current != null) {
+            itemRef.current.focus();
+            requestFocus(false);
+        }
+    }, [focusRequested]);
+    useEffect(function () {
+        focusIfRequested();
+    });
+    // useDebugValue({ id, disabled, label });
+    var itemState = menuContext.getItemState(id !== null && id !== void 0 ? id : "");
+    var highlighted = (itemState !== null && itemState !== void 0 ? itemState : { highlighted: false }).highlighted;
+    useEffect(function () {
+        requestFocus(highlighted && open);
+    }, [highlighted, open]);
+    return {
+        getRootProps: function (other) {
+            var optionProps = menuContext.getItemProps(id, other);
+            return __assign(__assign({}, other), { 
+                // ...getButtonProps(other),
+                // @ts-expect-error type from @mui/base is not specific
+                tabIndex: optionProps.tabIndex, 
+                // @ts-expect-error type from @mui/base is not specific
+                id: optionProps.id, role: "menuitem" });
+        },
+        disabled: (_a = itemState === null || itemState === void 0 ? void 0 : itemState.disabled) !== null && _a !== void 0 ? _a : false,
+        // focusVisible,
+        ref: handleRef,
+    };
+}
+export default useMenuItem;

package/node/Menu/MenuMui.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var utils_1 = require("@mui/utils");
+var framer_motion_1 = require("framer-motion");
+var MenuUnstyled_1 = require("@mui/base/MenuUnstyled");
+var ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
+var ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/base/ClickAwayListener"));
+var react_popper_1 = require("react-popper");
+var clsx_1 = require("@koine/utils/clsx");
+var MenuRoot = framer_motion_1.motion.div;
+var MenuBackdrop = function () { return (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0" }); };
+exports.Menu = (0, react_1.forwardRef)(function Menu(props, ref) {
+    var Button = props.Button, placement = props.placement, children = props.children, className = props.className, htmlAttributes = tslib_1.__rest(props, ["Button", "placement", "children", "className"]);
+    var id = (0, react_1.useId)();
+    var buttonRef = (0, react_1.useRef)(null);
+    var menuActions = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(null), popperElement = _a[0], setPopperElement = _a[1];
+    var _b = (0, react_1.useState)(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var open = Boolean(anchorEl);
+    var styles = (0, react_popper_1.usePopper)(anchorEl, popperElement, {
+        placement: placement,
+        // strategy: "absolute",
+    }).styles;
+    var _c = (0, MenuUnstyled_1.useMenu)({
+        listboxId: id,
+        // @ts-expect-error fix if we are going to use all this...
+        listboxRef: setPopperElement,
+        // these two make the Tab key behaviour correct, closing the menu on Tab
+        // press and re-focusing the Button trigger element
+        open: open,
+        onClose: function () { return setAnchorEl(null); },
+    }), registerItem = _c.registerItem, unregisterItem = _c.unregisterItem, getListboxProps = _c.getListboxProps, getItemProps = _c.getItemProps, getItemState = _c.getItemState;
+    var contextValue = {
+        registerItem: registerItem,
+        unregisterItem: unregisterItem,
+        getItemState: getItemState,
+        getItemProps: getItemProps,
+        open: open,
+    };
+    var handleButtonClick = function (event) {
+        if (open) {
+            setAnchorEl(null);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    var handleButtonKeyDown = function (event) {
+        var _a;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            setAnchorEl(event.currentTarget);
+            if (event.key === "ArrowUp") {
+                (_a = menuActions.current) === null || _a === void 0 ? void 0 : _a.highlightLastItem();
+            }
+        }
+    };
+    var close = (0, utils_1.unstable_useEventCallback)(function () {
+        var _a;
+        setAnchorEl(null);
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+    var renderChildren = (0, react_1.useMemo)(function () {
+        var childrenProps = { close: close };
+        return children(childrenProps);
+    }, [children, close]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button, { ref: buttonRef, id: id, "aria-haspopup": "true", "aria-controls": open ? id : undefined, "aria-expanded": open ? "true" : undefined, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && ((0, jsx_runtime_1.jsx)(ModalUnstyled_1.default, tslib_1.__assign({ BackdropComponent: MenuBackdrop, onClose: close, onBackdropClick: close, open: open }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, tslib_1.__assign({ onClickAway: close }, { children: (0, jsx_runtime_1.jsx)(MenuRoot, tslib_1.__assign({ initial: {
+                                    opacity: 0,
+                                }, animate: {
+                                    opacity: 1,
+                                }, exit: {
+                                    opacity: 0,
+                                }, className: (0, clsx_1.clsx)(className), style: styles["popper"] }, htmlAttributes, getListboxProps(), { "aria-labelledby": id }, { children: (0, jsx_runtime_1.jsx)(MenuUnstyled_1.MenuUnstyledContext.Provider, tslib_1.__assign({ value: contextValue }, { children: renderChildren })) })) })) }) }))) })] }));
+});
+exports.default = exports.Menu;

package/node/MenuItem/MenuItemMui.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var MenuItemUnstyled_1 = require("@mui/base/MenuItemUnstyled");
+// import { useMenuItem } from "./useMenuItem";
+var clsx_1 = require("@koine/utils/clsx");
+exports.MenuItem = (0, react_1.forwardRef)(function MenuItem(props, ref) {
+    var _a = props.as, As = _a === void 0 ? "button" : _a, children = props.children, className = props.className, disabledProp = props.disabled, other = tslib_1.__rest(props, ["as", "children", "className", "disabled"]);
+    var _b = (0, MenuItemUnstyled_1.useMenuItem)({
+        ref: ref,
+        disabled: disabledProp,
+    }), getRootProps = _b.getRootProps, disabled = _b.disabled, focusVisible = _b.focusVisible;
+    return ((0, jsx_runtime_1.jsx)(As, tslib_1.__assign({ className: (0, clsx_1.clsx)(focusVisible && "", disabled && "", className) }, getRootProps(other), { children: children })));
+});
+exports.default = exports.MenuItem;

package/node/MenuItem/useMenuItem.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var utils_1 = require("@mui/utils");
+var MenuUnstyled_1 = require("@mui/base/MenuUnstyled");
+// import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
+function useMenuItem(props) {
+    var _a;
+    var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.ref, label = props.label;
+    var id = (0, react_1.useId)();
+    var menuContext = (0, react_1.useContext)(MenuUnstyled_1.MenuUnstyledContext);
+    var itemRef = (0, react_1.useRef)(null);
+    var handleRef = (0, utils_1.unstable_useForkRef)(itemRef, ref);
+    if (menuContext === null) {
+        throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
+    }
+    var registerItem = menuContext.registerItem, unregisterItem = menuContext.unregisterItem, open = menuContext.open;
+    (0, react_1.useEffect)(function () {
+        registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
+        return function () { return unregisterItem(id); };
+    }, [id, registerItem, unregisterItem, disabled, ref, label]);
+    // const { getRootProps: getButtonProps, focusVisible } = useButton({
+    //   disabled,
+    //   focusableWhenDisabled: true,
+    //   ref: handleRef,
+    // });
+    // Ensure the menu item is focused when highlighted
+    var _c = (0, react_1.useState)(false), focusRequested = _c[0], requestFocus = _c[1];
+    var focusIfRequested = (0, react_1.useCallback)(function () {
+        if (focusRequested && itemRef.current != null) {
+            itemRef.current.focus();
+            requestFocus(false);
+        }
+    }, [focusRequested]);
+    (0, react_1.useEffect)(function () {
+        focusIfRequested();
+    });
+    // useDebugValue({ id, disabled, label });
+    var itemState = menuContext.getItemState(id !== null && id !== void 0 ? id : "");
+    var highlighted = (itemState !== null && itemState !== void 0 ? itemState : { highlighted: false }).highlighted;
+    (0, react_1.useEffect)(function () {
+        requestFocus(highlighted && open);
+    }, [highlighted, open]);
+    return {
+        getRootProps: function (other) {
+            var optionProps = menuContext.getItemProps(id, other);
+            return tslib_1.__assign(tslib_1.__assign({}, other), { 
+                // ...getButtonProps(other),
+                // @ts-expect-error type from @mui/base is not specific
+                tabIndex: optionProps.tabIndex, 
+                // @ts-expect-error type from @mui/base is not specific
+                id: optionProps.id, role: "menuitem" });
+        },
+        disabled: (_a = itemState === null || itemState === void 0 ? void 0 : itemState.disabled) !== null && _a !== void 0 ? _a : false,
+        // focusVisible,
+        ref: handleRef,
+    };
+}
+exports.useMenuItem = useMenuItem;
+exports.default = useMenuItem;

package/package.json

@@ -9,7 +9,7 @@
     "framer-motion": "^6.3.10",
     "react": "^16.8 || ^17 || ^18",
     "@mui/base": "^5.0.0-alpha.83",
-    "@koine/utils": "1.0.26",
+    "@koine/utils": "1.0.29",
     "react-icons": "^4.4.0",
     "date-fns": "^2.28.0",
     "react-swipeable": "^7.0.0",
@@ -18,9 +18,10 @@
     "yup": "^0.32.11",
     "react-hook-form": "^7.31.3",
     "type-fest": "^2.13.0",
+    "react-popper": "^2.3.0",
     "tslib": "^2.4.0"
   },
-  "version": "1.0.26",
+  "version": "1.0.29",
   "module": "./index.js",
   "types": "./index.d.ts"
 }

package/typings.d.ts

@@ -19,3 +19,80 @@ declare module "styled-components" {
  * `ReactSomeFeature` accessible anywhere from `Koine.ReactSomeFeature`
  */
 declare namespace Koine {}
+
+/**
+ * React Polymorphic components type utilities
+ *
+ * @resources
+ * - [Polymorphic types from Radix UI in Wanda System](https://github.com/wonderflow-bv/wanda/blob/main/packages/react-components/src/types/polymorphic/index.ts)
+ * - [TypeScript + React: Typing Generic forwardRefs](https://fettblog.eu/typescript-react-generic-forward-refs/)
+ * - [React with Typescript -- Generics while using React.forwardRef](https://stackoverflow.com/a/58473012/1938970)
+ * - [How to write a generic that extracts the prop types of the component that passed in](https://stackoverflow.com/a/57846897/1938970)
+ * - [React TS Generic component to pass generic props to children](https://stackoverflow.com/a/68442669/1938970)
+ * - [About custom ref prop](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)
+ * - [forwardRef performance](https://github.com/facebook/react/issues/13456)
+ * - [React docs: Exposing DOM Refs to Parent Components](https://github.com/facebook/react/issues/13456)
+ */
+declare namespace Polymorphic {
+  type AsProp<TComponent extends React.ElementType> = {
+    as?: TComponent;
+  };
+
+  type ComponentTypes =
+    | React.ComponentClass<any>
+    | React.FunctionComponent<any>
+    | keyof JSX.IntrinsicElements;
+
+  type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+
+  type ForwardRefExoticComponent<TComponent, TOwnProps> =
+    React.ForwardRefExoticComponent<
+      Merge<
+        TComponent extends React.ElementType
+          ? React.ComponentPropsWithRef<TComponent>
+          : never,
+        TOwnProps & { as?: TComponent }
+      >
+    >;
+
+  type InferProps<TComponent extends ComponentTypes> =
+    TComponent extends React.ComponentClass<infer IProps>
+      ? IProps
+      : TComponent extends React.FunctionComponent<infer IProps>
+      ? IProps
+      : TComponent extends React.ForwardRefExoticComponent<infer IProps>
+      ? IProps
+      : TComponent extends keyof JSX.IntrinsicElements
+      ? React.ComponentPropsWithoutRef<TComponent>
+      : never;
+
+  type Ref<TComponent extends React.ElementType> =
+    React.ComponentPropsWithRef<TComponent>["ref"];
+
+  type Props<
+    TComponent extends React.ElementType,
+    TProps = {}
+  > = /* Omit< */ InferProps<TComponent> /* , keyof Props> */ &
+    AsProp<TComponent> &
+    TProps;
+
+  type PropsWithRef<TComponent extends React.ElementType, TProps = {}> = Props<
+    TComponent,
+    TProps
+  > & {
+    ref?: Ref<TComponent>;
+  };
+
+  interface ComponentForwarded<TComponent, TProps = {}>
+    extends ForwardRefExoticComponent<TComponent, TProps> {
+    <As = TComponent>(
+      props: As extends ""
+        ? { as: keyof JSX.IntrinsicElements }
+        : As extends React.ComponentType<infer P>
+        ? Merge<P, TProps & { as: As }>
+        : As extends keyof JSX.IntrinsicElements
+        ? Merge<JSX.IntrinsicElements[As], TProps & { as: As }>
+        : never
+    ): React.ReactElement | null;
+  }
+}