onekijs-ui 0.21.4 → 0.21.9

package/dist/components/contextmenu/components/ContextMenuComponent.d.ts

@@ -0,0 +1,4 @@
+import { ContextMenuProps } from '../typings';
+import { FCC } from 'onekijs-framework';
+declare const ContextMenuComponent: FCC<ContextMenuProps>;
+export default ContextMenuComponent;

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

@@ -0,0 +1,2 @@
+declare const ContextMenu: import("styled-components").StyledComponent<import("onekijs-framework").FCC<import("./typings").ContextMenuProps>, import("styled-components").DefaultTheme, {}, never>;
+export default ContextMenu;

package/dist/components/contextmenu/style.d.ts

@@ -0,0 +1,4 @@
+import { ComponentStyle } from '../../styles/typings';
+import { ContextMenuProps } from './typings';
+declare const contextMenuStyle: ComponentStyle<ContextMenuProps>;
+export default contextMenuStyle;

package/dist/components/contextmenu/typings.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type ContextMenuProps = {
+    className?: string;
+    refElement: HTMLElement | React.RefObject<HTMLDivElement>;
+    offsetX?: number;
+    offsetY?: number;
+};

package/dist/components/icon/util.d.ts

@@ -42,16 +42,16 @@ export declare const getIconDivProps: (props: IconProps) => {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
@@ -83,52 +83,52 @@ export declare const getIconDivProps: (props: IconProps) => {
     inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: (boolean | "true" | "false") | undefined;
-    'aria-autocomplete'?: "none" | "inline" | "both" | "list" | undefined;
+    'aria-atomic'?: (boolean | "false" | "true") | undefined;
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
     'aria-braillelabel'?: string | undefined;
     'aria-brailleroledescription'?: string | undefined;
-    'aria-busy'?: (boolean | "true" | "false") | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-busy'?: (boolean | "false" | "true") | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "date" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-disabled'?: (boolean | "false" | "true") | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-expanded'?: (boolean | "false" | "true") | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "true" | "false" | "tree" | undefined;
-    'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: (boolean | "false" | "true") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: (boolean | "false" | "true") | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: (boolean | "true" | "false") | undefined;
-    'aria-multiline'?: (boolean | "true" | "false") | undefined;
-    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-modal'?: (boolean | "false" | "true") | undefined;
+    'aria-multiline'?: (boolean | "false" | "true") | undefined;
+    'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: (boolean | "false" | "true") | undefined;
     'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-required'?: (boolean | "false" | "true") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowindextext'?: string | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-selected'?: (boolean | "false" | "true") | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;

package/dist/index.d.ts

@@ -40,6 +40,11 @@ export { default as Dropdown } from './components/dropdown';
 export { default as DropdownComponent } from './components/dropdown/components/DropdownComponent';
 export { default as useDropdown } from './components/dropdown/hooks/useDropdown';
 export { default as dropdownStyle } from './components/dropdown/style';
+export { DropdownComponentProps, DropdownProps, DropdownWidthModifier } from './components/dropdown/typings';
+export { default as ContextMenu } from './components/contextmenu';
+export { default as ContextMenuComponent } from './components/contextmenu/components/ContextMenuComponent';
+export { default as contextMenuStyle } from './components/contextmenu/style';
+export { ContextMenuProps } from './components/contextmenu/typings';
 export { default as FieldDescription } from './components/field/FieldDescription';
 export { default as FieldDisplayer } from './components/field/FieldDisplayer';
 export { default as FieldHelp } from './components/field/FieldHelp';

package/dist/index.js

@@ -4117,6 +4117,86 @@ const useDashoardBodyPanel = () => {
     return state.body;
 };
 
+const contextMenuStyle = () => {
+    return styled.css `
+    ${preflight()}
+    ${zIndex(9999)}
+  `;
+};
+
+const ContextMenuComponent = ({ refElement, className, children, offsetX = 0, offsetY = 0 }) => {
+    const [visible, setVisible] = React.useState(false);
+    // State for the anchor (the mouse coordinates) and the menu element
+    const [virtualElement, setVirtualElement] = React.useState(null);
+    const [popperElement, setPopperElement] = React.useState(null);
+    // Initialize Popper with a virtual reference
+    const { styles, attributes } = reactPopper.usePopper(virtualElement, popperElement, {
+        placement: 'bottom-start',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [offsetX, offsetY], // Slight offset so the menu isn't directly under the cursor
+                },
+            },
+        ],
+    });
+    // Handle the right-click event
+    const handleContextMenu = React.useCallback((e) => {
+        e.preventDefault(); // Prevent the browser's default context menu
+        const x = e.clientX;
+        const y = e.clientY;
+        // Define a VirtualElement object that implements getBoundingClientRect
+        const newVirtualElement = {
+            getBoundingClientRect: () => ({
+                width: 0,
+                height: 0,
+                top: y,
+                right: x,
+                bottom: y,
+                left: x,
+                x: x,
+                y: y,
+                toJSON: () => { }
+            }),
+        };
+        setVirtualElement(newVirtualElement);
+        setVisible(true);
+    }, []);
+    // Close the menu on left click or scroll
+    React.useEffect(() => {
+        const closeMenu = () => setVisible(false);
+        window.addEventListener('click', closeMenu);
+        window.addEventListener('scroll', closeMenu);
+        if (refElement instanceof HTMLElement) {
+            refElement.addEventListener('contextmenu', handleContextMenu);
+        }
+        else if (refElement.current !== null) {
+            refElement.current.addEventListener('contextmenu', handleContextMenu);
+        }
+        return () => {
+            window.removeEventListener('click', closeMenu);
+            window.removeEventListener('scroll', closeMenu);
+            if (refElement instanceof HTMLElement) {
+                refElement.removeEventListener('contextmenu', handleContextMenu);
+            }
+            else if (refElement.current !== null) {
+                refElement.current.removeEventListener('contextmenu', handleContextMenu);
+            }
+        };
+    }, []);
+    if (visible) {
+        return (React.createElement("div", { ref: setPopperElement, className: addClassname('o-context-menu', className), style: {
+                ...styles.popper,
+            }, ...attributes.popper }, children));
+    }
+    return null;
+};
+
+const ContextMenu = styled(ContextMenuComponent) `
+  ${contextMenuStyle}
+`;
+
 const IconComponent$8 = ({ className, onClick }) => {
     return (React.createElement("div", { className: className, onClick: onClick },
         React.createElement("svg", { className: "o-icon-close-all-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
@@ -14083,6 +14163,8 @@ exports.CheckboxCellComponent = CheckboxCellComponent;
 exports.CheckboxComponent = CheckboxComponent;
 exports.CloseAllIcon = CloseAllIcon;
 exports.Col = Col;
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuComponent = ContextMenuComponent;
 exports.ControlledSelectComponent = ControlledSelectComponent;
 exports.ControlledTimerComponent = ControlledTimerComponent;
 exports.ControlledWizardComponent = ControlledWizardComponent;
@@ -14318,6 +14400,7 @@ exports.columnSpan = columnSpan;
 exports.columnWidth = columnWidth;
 exports.columns = columns;
 exports.container = container;
+exports.contextMenuStyle = contextMenuStyle;
 exports.cssProperty = cssProperty;
 exports.cursor = cursor;
 exports.darken = darken;