From 509051169a987a379facc62f49a3f39b000bae8c Mon Sep 17 00:00:00 2001 From: Gunka Artur Date: Tue, 11 Feb 2025 15:12:14 +0200 Subject: [PATCH 1/2] Updated the clsx package to the last version and changed the nodes for event listeners --- .gitignore | 1 - dist/index.d.ts | 336 + dist/index.js | 17 + dist/index.js.map | 1 + dist/index.mjs | 9 + dist/index.mjs.map | 1 + package-lock.json | 11265 +++++++++++++++++++++++++++++++++ package.json | 2 +- src/components/Item.tsx | 2 +- src/components/Menu.tsx | 15 +- src/components/RightSlot.tsx | 2 +- src/components/Submenu.tsx | 2 +- yarn.lock | 4343 ++++++++++--- 13 files changed, 15071 insertions(+), 925 deletions(-) create mode 100644 dist/index.d.ts create mode 100644 dist/index.js create mode 100644 dist/index.js.map create mode 100644 dist/index.mjs create mode 100644 dist/index.mjs.map create mode 100644 package-lock.json diff --git a/.gitignore b/.gitignore index 997356b5..414d50df 100644 --- a/.gitignore +++ b/.gitignore @@ -9,5 +9,4 @@ yarn-error.log* .docz .vscode .cache -dist *.log \ No newline at end of file diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 00000000..ef4aebc2 --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,336 @@ +import React$1, { ReactNode } from 'react'; + +declare type BuiltInOrString = T | (string & {}); +/** + * The event that triggered the context menu + */ +declare type HandlerParamsEvent = MouseEvent & TouchEvent & KeyboardEvent; +/** + * Pass the event handler. It's used to determine the position of the cursor + */ +declare type TriggerEvent = MouseEvent | TouchEvent | KeyboardEvent | React.MouseEvent | React.TouchEvent | React.KeyboardEvent; +declare type BooleanPredicate = boolean | ((args: HandlerParams) => boolean); +/** + * Unique id to identify the menu. Use to Trigger the corresponding menu + */ +declare type MenuId = string | number; +/** + * Used both by `PredicatParams` and `ItemParams` + */ +interface HandlerParams { + /** + * The id of the item when provided + */ + id?: string; + /** + * The event that triggered the context menu + */ + triggerEvent: HandlerParamsEvent; + /** + * Any props supplied when triggering the menu + */ + props?: Props; + /** + * Data object provided to item + */ + data?: Data; +} +/** + * Used in 2 cases: + * - When passing a boolean predicate to `disabled` + * - When passing a boolean predicate to `hidden` + * + * @param props The props passed when you called `show(e, {props: yourProps})` + * @param data The data defined on the `Item` + * @param triggerEvent The event that triggered the context menu + * + * ``` + * function isItemDisabled({ triggerEvent, props, data }: PredicateParams): boolean + * content + * ``` + */ +declare type PredicateParams = HandlerParams; +/** + * Callback when the `Item` is clicked. + * + * @param id The item id, when defined + * @param event The event that occured on the Item node + * @param props The props passed when you called `show(e, {props: yourProps})` + * @param data The data defined on the `Item` + * @param triggerEvent The event that triggered the context menu + * + * ``` + * function handleItemClick({ id, triggerEvent, event, props, data }: ItemParams){ + * // retrieve the id of the Item + * console.log(id) // item-id + * + * // access any other dom attribute + * console.log(event.currentTarget.dataset.foo) // 123 + * + * // access the props and the data + * console.log(props, data); + * + * // access the coordinate of the mouse when the menu has been displayed + * const { clientX, clientY } = triggerEvent; + * } + * + * Something + * ``` + */ +interface ItemParams extends HandlerParams { + event: React.MouseEvent | React.TouchEvent | React.KeyboardEvent | KeyboardEvent; +} +interface InternalProps { + /** + * INTERNAL USE ONLY: The event that triggered the context menu + */ + triggerEvent?: TriggerEvent; + /** + * INTERNAL USE ONLY: Passed to the Item onClick callback. Accessible via `props` + */ + propsFromTrigger?: any; +} +/** + * Theme is appended to `react-contexify__theme--${given theme}`. + * + * Built-in theme are `light` and `dark` + */ +declare type Theme = BuiltInOrString<'light' | 'dark'>; +/** + * Animation is appended to + * - `.react-contexify__will-enter--${given animation}` + * - `.react-contexify__will-leave--${given animation}` + * + * - To disable all animations you can pass `false` + * - To disable only the enter or the exit animation you can provide an object `{enter: false, exit: 'exitAnimation'}` + * - default is set to `fade` + * + * Built-in animations are `fade`, `scale`, `flip`, `slide` + */ +declare type MenuAnimation = Animation | false | { + enter: Animation | false; + exit: Animation | false; +}; +declare type Animation = BuiltInOrString<'fade' | 'scale' | 'flip' | 'slide'>; + +interface MenuProps extends Omit, 'id'> { + /** + * Unique id to identify the menu. Use to Trigger the corresponding menu + */ + id: MenuId; + /** + * Any valid node that can be rendered + */ + children: ReactNode; + /** + * Theme is appended to `contexify_theme-${given theme}`. + * + * Built-in theme are `light` and `dark` + */ + theme?: Theme; + /** + * Animation is appended to + * - `.contexify_willEnter-${given animation}` + * - `.contexify_willLeave-${given animation}` + * + * - To disable all animations you can pass `false` + * - To disable only the enter or the exit animation you can provide an object `{enter: false, exit: 'exitAnimation'}` + * + * - default is set to `fade` + */ + animation?: MenuAnimation; + /** + * Disables menu repositioning if outside screen. + * This may be neeeded in some cases when using custom position. + */ + disableBoundariesCheck?: boolean; + /** + * Prevents scrolling the window on when typing. Defaults to true. + */ + preventDefaultOnKeydown?: boolean; + /** + * Used to track menu visibility + */ + onVisibilityChange?: (isVisible: boolean) => void; +} +declare const Menu: React$1.FC; + +interface ItemProps extends InternalProps, Omit, 'hidden' | 'disabled' | 'onClick'> { + /** + * Any valid node that can be rendered + */ + children: ReactNode; + /** + * Passed to the `Item` onClick callback. Accessible via `data` + */ + data?: any; + /** + * Disable `Item`. If a function is used, a boolean must be returned + * + * @param id The item id, when defined + * @param props The props passed when you called `show(e, {props: yourProps})` + * @param data The data defined on the `Item` + * @param triggerEvent The event that triggered the context menu + * + * + * ``` + * function isItemDisabled({ triggerEvent, props, data }: PredicateParams): boolean + * content + * ``` + */ + disabled?: BooleanPredicate; + /** + * Hide the `Item`. If a function is used, a boolean must be returned + * + * @param id The item id, when defined + * @param props The props passed when you called `show(e, {props: yourProps})` + * @param data The data defined on the `Item` + * @param triggerEvent The event that triggered the context menu + * + * + * ``` + * function isItemHidden({ triggerEvent, props, data }: PredicateParams): boolean + * + * ``` + */ + hidden?: BooleanPredicate; + /** + * Callback when the `Item` is clicked. + * + * @param id The item id, when defined + * @param event The event that occured on the Item node + * @param props The props passed when you called `show(e, {props: yourProps})` + * @param data The data defined on the `Item` + * @param triggerEvent The event that triggered the context menu + * + * ``` + * function handleItemClick({ id, triggerEvent, event, props, data }: ItemParams){ + * // retrieve the id of the Item + * console.log(id) // item-id + * + * // access any other dom attribute + * console.log(event.currentTarget.dataset.foo) // 123 + * + * // access the props and the data + * console.log(props, data); + * + * // access the coordinate of the mouse when the menu has been displayed + * const { clientX, clientY } = triggerEvent; + * } + * + * Something + * ``` + */ + onClick?: (args: ItemParams) => void; + /** + * Let you implement keyboard shortcut for the menu item. It will trigger the + * `onClick` hander if the given callback returns `true` + * + * example: + * + * ``` + * function handleShortcut(e: React.KeyboardEvent){ + * // let's say we want to match ⌘ + c + * return e.metaKey && e.key === "c"; + * } + * + * Copy ⌘ C + * ``` + */ + keyMatcher?: (e: KeyboardEvent) => boolean; + /** + * Useful when using form input inside the Menu + * + * default: `true` + */ + closeOnClick?: boolean; + /** + * Let you specify another event for the `onClick` handler + * + * default: `onClick` + */ + handlerEvent?: BuiltInOrString<'onClick' | 'onMouseDown' | 'onMouseUp'>; +} +declare const Item: React$1.FC; + +interface SeparatorProps extends InternalProps { + /** + * Passed to the `Separator` hidden predicate. Accessible via `data` + */ + data?: any; + /** + * Hide the `Separator`. If a function is used, a boolean must be returned + * + * @param props The props passed when you called `show(e, {props: yourProps})` + * @param data The data defined on the `Separator` + * @param triggerEvent The event that triggered the context menu + * + * + * ``` + * function isSeparatorHidden({ triggerEvent, props, data }: PredicateParams): boolean + *