@ainias42/react-bootstrap-mobile 0.1.18 → 0.1.19

package/dist/src/Components/FormElements/ColorInput/ColorInput.d.ts

@@ -11,7 +11,8 @@ export type ColorInputProps<OnChangeData> = {
     disableAlpha?: boolean;
     presetColors?: string[];
     sharedColorKey?: string;
+    disabled?: boolean;
 } & OptionalListener<'onChange', OnChangeData>;
-declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, sharedColorKey, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
+declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, sharedColorKey, disabled, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
 declare const ColorInputMemo: typeof ColorInput;
 export { ColorInputMemo as ColorInput };

package/dist/src/Components/Layout/InlineBlock.d.ts

@@ -2,6 +2,8 @@
 /// <reference types="react" />
 import { RbmComponentProps } from '../RbmComponentProps';
 import { ViewWithoutListenersProps } from './ViewWithoutListeners';
-export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<ViewWithoutListenersProps<AsType>>;
+export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<ViewWithoutListenersProps<AsType> & {
+    id?: string;
+}>;
 declare const InlineBlockMemo: import("../../helper/withForwardRef").RefComponent<InlineBlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLLinkElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
 export { InlineBlockMemo as InlineBlock };

package/dist/src/Components/Menu/HoverMenu.d.ts

@@ -3,7 +3,7 @@ import { RbmChildWithoutString, RbmComponentProps, WithNoStringAndChildrenProps
 export type HoverMenuProps = RbmComponentProps<{
     items: RbmChildWithoutString;
     openToSide?: boolean;
-    onClick?: () => void;
+    onClick?: () => void | boolean;
     onClose?: () => void;
 }, WithNoStringAndChildrenProps>;
 export declare const HoverMenu: ({ children, items, className, style, onClick, onClose, openToSide }: HoverMenuProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {

package/src/Components/FormElements/ColorInput/ColorInput.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { useCallback, useRef, useState, MouseEvent, useEffect, useLayoutEffect } from 'react';
-import { Color, ColorChangeHandler, ColorResult, SketchPicker } from 'react-color';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
-import { withMemo } from '../../../helper/withMemo';
+import {useCallback, useRef, useState, MouseEvent, useEffect, useLayoutEffect} from 'react';
+import {Color, ColorChangeHandler, ColorResult, SketchPicker} from 'react-color';
+import {OptionalListener, useListener} from '../../Hooks/useListener';
+import {withMemo} from '../../../helper/withMemo';
 
 import styles from './colorInput.scss';
-import { useSharedSelectedColor } from './sharedSelectedColor';
+import {useSharedSelectedColor} from './sharedSelectedColor';
+import {Menu} from "../../Menu/Menu";
 
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;
@@ -18,6 +19,7 @@ export type ColorInputProps<OnChangeData> = {
     disableAlpha?: boolean;
     presetColors?: string[];
     sharedColorKey?: string;
+    disabled?: boolean
 } & OptionalListener<'onChange', OnChangeData>;
 
 function convertToHex(color: { r: number; g: number; b: number; a?: number }, disableAlpha?: boolean) {
@@ -33,31 +35,32 @@ function convertToHex(color: { r: number; g: number; b: number; a?: number }, di
 }
 
 function ColorInput<OnChangeData>({
-    defaultValue,
-    value,
-    label,
-    onChangeColor,
-    onChangeColorComplete,
-    onOpen,
-    onClose,
-    disableAlpha,
-    presetColors,
-    sharedColorKey,
-    ...otherProps
-}: ColorInputProps<OnChangeData>) {
+                                      defaultValue,
+                                      value,
+                                      label,
+                                      onChangeColor,
+                                      onChangeColorComplete,
+                                      onOpen,
+                                      onClose,
+                                      disableAlpha,
+                                      presetColors,
+                                      sharedColorKey = "default",
+    disabled,
+                                      ...otherProps
+                                  }: ColorInputProps<OnChangeData>) {
     // Variables
     // useStyles(styles);
 
     // Refs
-    const containerRef = useRef<HTMLDivElement>(null);
     const modalRef = useRef<HTMLDivElement>(null);
 
     // States
     const [color, setColor] = useState<string>(value ?? defaultValue ?? '#000000FF');
     const [isOpen, setIsOpen] = useState(false);
-    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [position, setPosition] = useState({x: 0, y: 0});
 
-    const { colors, addColor } = useSharedSelectedColor(sharedColorKey);
+    const {colors, addColor} = useSharedSelectedColor(sharedColorKey);
+    const realIsOpen = disabled !== true && isOpen;
 
     const colVal: Color = value ?? color;
     // Selectors
@@ -86,24 +89,26 @@ function ColorInput<OnChangeData>({
         [disableAlpha, onChangeColorComplete]
     );
 
-    const onContainerClick = useCallback(
-        (e: MouseEvent) => {
-            if (e.target === containerRef?.current) {
-                setIsOpen(false);
-                addColor(colVal);
-                onClose?.(colVal);
-            }
+    const onMenuClose = useCallback(
+        () => {
+            setIsOpen(false);
+            addColor(colVal);
+            onClose?.(colVal);
         },
         [addColor, colVal, onClose]
     );
 
     const openElement = useCallback(
         (e: MouseEvent) => {
+            if (disabled){
+                return;
+            }
+
             setIsOpen(true);
-            setPosition({ x: e.clientX, y: e.clientY });
+            setPosition({x: e.clientX, y: e.clientY});
             onOpen?.(colVal);
         },
-        [colVal, onOpen]
+        [colVal, disabled, onOpen]
     );
 
     // Effects
@@ -114,10 +119,12 @@ function ColorInput<OnChangeData>({
         const dimension = modalRef.current.getBoundingClientRect();
         if (dimension.right > window.innerWidth || dimension.bottom > window.innerHeight) {
             const newPosition = {
-                x: Math.max(0, Math.min(window.innerWidth - dimension.width, position.x)),
-                y: Math.max(0, Math.min(window.innerHeight - dimension.height, position.y)),
+                x: Math.max(0, Math.min(window.innerWidth - dimension.width - 3, position.x)),
+                y: Math.max(0, Math.min(window.innerHeight - dimension.height - 3, position.y)),
             };
-            setPosition(newPosition);
+            if (newPosition.x !== position.x || newPosition.y !== position.y) {
+                setPosition(newPosition);
+            }
         }
     }, [position]);
 
@@ -126,9 +133,7 @@ function ColorInput<OnChangeData>({
     // Render Functions
     return (
         <span className={styles.colorInput}>
-            {isOpen ? (
-                <div onClick={onContainerClick} className={styles.modalContainer} ref={containerRef}>
-                    <div className={styles.modal} style={{ top: position.y, left: position.x }} ref={modalRef}>
+            <Menu x={position.x} y={position.y} isOpen={realIsOpen} onClose={onMenuClose}>
                         <SketchPicker
                             color={colVal}
                             onChange={onChange}
@@ -136,17 +141,15 @@ function ColorInput<OnChangeData>({
                             disableAlpha={disableAlpha}
                             presetColors={presetColors ?? colors}
                         />
-                    </div>
-                </div>
-            ) : null}
+            </Menu>
             <span onClick={openElement} className={styles.label}>
                 {label}
             </span>
-            <span onClick={openElement} style={{ backgroundColor: colVal }} className={styles.preview} />
+            <span onClick={openElement} style={{backgroundColor: colVal}} className={styles.preview}/>
         </span>
     );
 }
 
 // Need ColorInputMemo for autocompletion of phpstorm
 const ColorInputMemo = withMemo(ColorInput, styles);
-export { ColorInputMemo as ColorInput };
+export {ColorInputMemo as ColorInput};

package/src/Components/FormElements/Select/Select.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { ChangeEventHandler, SelectHTMLAttributes, useCallback } from 'react';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
+import {OptionalListener, useListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
 
 import styles from './select.scss';
 import { withMemo } from '../../../helper/withMemo';
@@ -46,7 +46,7 @@ export const Select = withMemo(function Select<OnChangeData>({
     // Selectors
 
     // Callbacks
-    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
+    const [onChangeWithData, propsWithoutData] = useListenerWithExtractedProps<'onChange', OnChangeData>('onChange', otherProps);
     const onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
         (e) => {
             onChangeValue?.(e.target.value);
@@ -65,7 +65,7 @@ export const Select = withMemo(function Select<OnChangeData>({
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
         <label className={classNames(styles.select, { [styles.inline]: inline, [styles.small]: small }, className)} style={style}>
             {label ? <span className={styles.label}>{label}</span> : null}
-            <select {...otherProps} className={styles.input} onChange={onChange}>
+            <select {...propsWithoutData} className={styles.input} onChange={onChange}>
                 {options.map((option) => (
                     <option value={option.value} key={option.key ?? option.value}>
                         {option.label}

package/src/Components/Hooks/useKeyListener.ts

@@ -39,7 +39,7 @@ export function useKeyUpListener(
     useEffect(() => {
         const lowercaseKey = key.toLowerCase();
         const keyListener = (e: KeyboardEvent) => {
-            if (e.key.toLowerCase() === lowercaseKey && (!ignoreFormElements || !isFormElement(e.target))) {
+            if ((e.key === "Meta" || e.key.toLowerCase() === lowercaseKey) && (!ignoreFormElements || !isFormElement(e.target))) {
                 listener(e);
             }
         };

package/src/Components/Layout/InlineBlock.tsx

@@ -8,7 +8,9 @@ import { ComponentRef, ForwardedRef } from 'react';
 import { withForwardRef } from '../../helper/withForwardRef';
 
 export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
-    ViewWithoutListenersProps<AsType>
+    ViewWithoutListenersProps<AsType> & {
+    id?: string
+}
 >;
 
 function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(

package/src/Components/Menu/HoverMenu.tsx

@@ -9,7 +9,7 @@ import {Menu} from "./Menu";
 export type HoverMenuProps = RbmComponentProps<{
     items: RbmChildWithoutString,
     openToSide?: boolean;
-    onClick?: () => void;
+    onClick?: () => void | boolean;
     onClose?: () => void;
 }, WithNoStringAndChildrenProps>;
 
@@ -19,7 +19,7 @@ export const HoverMenu = withMemo(function HoverMenu({
                                                          className,
                                                          style,
                                                          onClick,
-    onClose,
+                                                         onClose,
                                                          openToSide
                                                      }: HoverMenuProps) {
     // Refs
@@ -58,6 +58,12 @@ export const HoverMenu = withMemo(function HoverMenu({
         setIsOpen(true);
     }, [recalculatePosition]);
 
+    const onClickInner = useCallback(() => {
+        if (onClick?.() !== false) {
+            open();
+        }
+    }, [onClick, open]);
+
     // Effects
 
     // Other
@@ -68,14 +74,15 @@ export const HoverMenu = withMemo(function HoverMenu({
         onMouseEnter={open}
         onMouseLeave={close}
         useReactOnMouseLeave={true}
-        onClick={onClick}
+        onClick={onClickInner}
         className={classNames(styles.hoverMenu, {[styles.open]: isOpen}, className)}
         style={style}
         ref={hoverItemRef}
         __allowChildren="all"
     >
         {children}
-        <Menu x={position.x} y={position.y} isOpen={true} onClose={close} offsetX={offset.x} offsetY={offset.y} className={classNames({[styles.hidden]: !isOpen})}>
+        <Menu x={position.x} y={position.y} isOpen={true} onClose={close} offsetX={offset.x} offsetY={offset.y}
+              className={classNames({[styles.hidden]: !isOpen})}>
             {items}
         </Menu>
     </Clickable>;