@ainias42/react-bootstrap-mobile 0.2.13 → 0.2.15

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

@@ -11,6 +11,7 @@ export type ButtonProps<ClickData> = RbmComponentProps<Override<HTMLAttributes<H
     disabled?: boolean;
     flavor?: Flavor;
     fullWidth?: boolean;
+    stopPropagation?: boolean;
     size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">;
 } & OptionalListener<'onClick', ClickData>>>;
-export declare const Button: <ClickData>({ children, className, disabled, size, fullWidth, flavor, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;
+export declare const Button: <ClickData>({ children, className, disabled, size, fullWidth, flavor, type, stopPropagation, ...props }: ButtonProps<ClickData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Controller/useYupResolver.d.ts

@@ -0,0 +1,11 @@
+import { AnyObject, InferType, Maybe, ObjectSchema } from 'yup';
+export declare function useYupResolver<ObjectType extends Maybe<AnyObject>>(validationSchema: ObjectSchema<ObjectType>, translate: (key: string, args?: Record<string, string | number>) => string): (data: InferType<ObjectSchema<ObjectType>>) => Promise<{
+    values: ObjectType extends AnyObject ? import("yup").MakePartial<ObjectType> extends infer T ? T extends import("yup").MakePartial<ObjectType> ? T extends {} ? { [k in keyof T]: T[k]; } : T : never : never : ObjectType;
+    errors: {};
+} | {
+    values: {};
+    errors: Record<string, {
+        type: string;
+        message: string;
+    }>;
+}>;

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

@@ -1,11 +1,18 @@
 import * as React from 'react';
 import { OptionalListener } from '../../Hooks/useListener';
 import { SelectOption } from '../Select/Select';
+import { ReactNode } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<{
     label?: string;
     options: SelectOption[];
     onChangeValue?: (newValues: string[]) => void;
     values: string[];
+    renderSelectableOptions?: (option: SelectOption, isActive: boolean, index: number, activeIndex: number) => ReactNode;
+    renderSelectedOption?: (option: SelectOption) => ReactNode;
+    showSelectedOptions?: boolean;
+    closeOnSelect?: boolean;
+    enableSearch?: boolean;
+    allowDeselect?: boolean;
 } & OptionalListener<'onChange', OnChangeData>>;
-export declare const SearchSelectInput: <OnChangeData>({ label, options, values, onChangeValue, className, style, }: SearchSelectInputProps<OnChangeData>) => React.JSX.Element;
+export declare const SearchSelectInput: <OnChangeData>({ label, options, values, onChangeValue, className, renderSelectableOptions, renderSelectedOption, showSelectedOptions, closeOnSelect, enableSearch, allowDeselect, style, }: SearchSelectInputProps<OnChangeData>) => React.JSX.Element;

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

@@ -5,5 +5,6 @@ import { Override } from '../../../TypeHelpers';
 import { OptionalListener } from '../../Hooks/useListener';
 export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, {
     value?: number;
+    stopPropagation?: boolean;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onChangeValue', OnChangeValueData, number> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
-export declare const Slider: <OnChangeData, OnChangeValueData, OnChangeDoneData>({ className, style, ...props }: SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData>) => React.JSX.Element;
+export declare const Slider: <OnChangeData, OnChangeValueData, OnChangeDoneData>({ className, style, stopPropagation, ...props }: SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData>) => React.JSX.Element;

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

@@ -10,5 +10,8 @@ export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<Override<InputH
     isLabelBeforeSwitch?: boolean;
     isDual?: boolean;
     error?: string;
+    classNameLabel?: string;
+    classNamePreLabel?: string;
+    stopPropagation?: boolean;
 } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>>>;
-export declare const Switch: <OnChangeCheckedData>({ children, label, preLabel, isLabelBeforeSwitch, isDual, id, className, style, error, onChange, ...props }: SwitchProps<OnChangeCheckedData>) => React.JSX.Element;
+export declare const Switch: <OnChangeCheckedData>({ children, label, preLabel, isLabelBeforeSwitch, isDual, stopPropagation, id, className, classNamePreLabel, classNameLabel, style, error, onChange, ...props }: SwitchProps<OnChangeCheckedData>) => React.JSX.Element;

package/dist/src/Components/SpoilerList/Spoiler/Spoiler.d.ts

@@ -7,10 +7,11 @@ export type SpoilerProps<OnClickData> = RbmComponentProps<{
     title: ReactChild;
     initialOpen?: boolean;
     open?: boolean;
+    onlyTitleToggles?: boolean;
     noClosingAnimation?: boolean;
     openIcon?: IconSource | null;
     closeIcon?: IconSource | null;
 } & OptionalListener<'onClick', OnClickData>>;
-declare function Spoiler<OnClickData>({ title, children, initialOpen, noClosingAnimation, openIcon, closeIcon, className, style, open, ...listenerProps }: SpoilerProps<OnClickData>): React.JSX.Element;
+declare function Spoiler<OnClickData>({ title, children, initialOpen, noClosingAnimation, openIcon, closeIcon, className, onlyTitleToggles, style, open, ...listenerProps }: SpoilerProps<OnClickData>): React.JSX.Element;
 declare const SpoilerMemo: typeof Spoiler;
 export { SpoilerMemo as Spoiler };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -101,6 +101,7 @@
     "react-table": "^7.8.0",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
-    "react-window-infinite-loader": "^1.0.9"
+    "react-window-infinite-loader": "^1.0.9",
+    "yup": "^1.6.1"
   }
 }

package/src/Components/Dialog/dialogBackground.scss

@@ -5,6 +5,7 @@
   overflow: auto;
 
   .title {
+    gap: 16px;
     margin: 0 0 0.8rem;
   }
 }

package/src/Components/FormElements/Button/Button.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Override } from '@ainias42/js-helper';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-
 import styles from './button.scss';
 import classNames from 'classnames';
 import { withMemo } from '../../../helper/withMemo';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, MouseEvent, useCallback } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { ButtonType } from "./ButtonType";
 import { Flavor } from "../../Flavor";
@@ -17,6 +16,7 @@ export type ButtonProps<ClickData> = RbmComponentProps<
         disabled?: boolean;
         flavor?: Flavor
         fullWidth?: boolean;
+        stopPropagation?: boolean;
         size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">
     } & OptionalListener<'onClick', ClickData>>
 >;
@@ -29,10 +29,18 @@ export const Button = withMemo(function Button<ClickData>({
                                                               fullWidth = false,
                                                               flavor = Flavor.Accent,
                                                               type = ButtonType.Primary,
+    stopPropagation = true,
                                                               ...props
                                                           }: ButtonProps<ClickData>) {
     const [onClick, otherProps] = useListenerWithExtractedProps<'onClick', ClickData>('onClick', props);
 
+    const realOnClick = useCallback((ev: MouseEvent) => {
+        if (stopPropagation) {
+            ev.stopPropagation();
+        }
+        onClick?.(ev);
+    }, [onClick, stopPropagation]);
+
     const classes = {
         [styles.primary]: type === ButtonType.Primary,
         [styles.secondary]: type === ButtonType.Secondary,
@@ -41,7 +49,7 @@ export const Button = withMemo(function Button<ClickData>({
     };
 
     return (
-        <button {...otherProps} disabled={disabled} type="button" onClick={onClick}
+        <button {...otherProps} disabled={disabled} type="button" onClick={realOnClick}
                 className={classNames(styles.button, {[styles.fullWidth]: fullWidth}, classes, flavor, className)}>
             {children}
         </button>

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useCallback, useRef, useState, MouseEvent, useMemo } from 'react';
-import { ColorResult, Sketch, SwatchPresetColor } from '@uiw/react-color';
+import { ColorResult, Sketch } from '@uiw/react-color';
 import { OptionalListener, useListener } from '../../Hooks/useListener';
 import { withMemo } from '../../../helper/withMemo';
 import styles from './colorInput.scss';

package/src/Components/FormElements/ColorInput/sharedSelectedColor.ts

@@ -45,7 +45,7 @@ export function useSharedSelectedColor(key: string|undefined, predefinedColors:
             // triggers rerender
             sharedSelectedColor[realKey].updateFunctions.forEach((u) => u());
         },
-        [numberSavedColors, realKey, shouldSaveToLocalStorage]
+        [numberSavedColors, predefinedColors, realKey, shouldSaveToLocalStorage]
     );
 
     useLayoutEffect(() => {

package/src/Components/FormElements/Controller/useYupResolver.ts

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { AnyObject, InferType, Maybe, ObjectSchema, ValidationError } from 'yup';
+
+// TODO set translate function from somewhere else
+export function useYupResolver<ObjectType extends Maybe<AnyObject>>(validationSchema: ObjectSchema<ObjectType>, translate: (key: string, args?: Record<string, string | number>) => string) {
+
+    return useCallback(
+        async (data: InferType<ObjectSchema<ObjectType>>) => {
+            try {
+                const values = await validationSchema.validate(data, {
+                    abortEarly: false,
+                });
+
+                return {
+                    values,
+                    errors: {},
+                };
+            } catch (errors) {
+                const reducedErrors = (errors.inner as ValidationError[]).reduce(
+                    (allErrors, currentError) => {
+                        if (currentError.path === undefined) {
+                            return allErrors;
+                        }
+
+                        let message = currentError.message as
+                            | string
+                            | {
+                            key: string;
+                            args?: Record<string, string | number>;
+                        };
+                        if (typeof message === 'object') {
+                            message = translate(message.key, message.args);
+                        } else {
+                            message = translate(message);
+                        }
+                        allErrors[currentError.path] = {
+                            type: currentError.type ?? 'validation',
+                            message,
+                        };
+                        return allErrors;
+                    },
+                    {} as Record<string, { type: string; message: string }>,
+                );
+
+                return {
+                    values: {},
+                    errors: reducedErrors,
+                };
+            }
+        },
+        [translate, validationSchema],
+    );
+}

package/src/Components/FormElements/SearchSelectInput/SearchSelectInput.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { OptionalListener } from '../../Hooks/useListener';
 import { SelectOption } from '../Select/Select';
 import classNames from 'classnames';
-import { ChangeEventHandler, KeyboardEvent, useCallback, useMemo, useRef, useState } from 'react';
+import { ChangeEventHandler, KeyboardEvent, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { ArrayHelper } from '@ainias42/js-helper';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { withMemo } from '../../../helper/withMemo';
@@ -22,147 +22,179 @@ export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<
         options: SelectOption[];
         onChangeValue?: (newValues: string[]) => void;
         values: string[];
+        renderSelectableOptions?: (option: SelectOption, isActive: boolean, index: number, activeIndex: number) => ReactNode,
+        renderSelectedOption?: (option: SelectOption) => ReactNode,
+        showSelectedOptions?: boolean;
+        closeOnSelect?: boolean;
+        enableSearch?: boolean;
+        allowDeselect?: boolean;
     } & OptionalListener<'onChange', OnChangeData>
 >;
 
 export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeData>({
-    label,
-    options,
-    values,
-    onChangeValue,
-    className,
-    style,
-}: SearchSelectInputProps<OnChangeData>) {
-    // Variables
-    const indexedOptions = useMemo(() => ArrayHelper.arrayToObject(options, (opt) => opt.value), [options]);
-
-    // Refs
-    const containerRef = useRef<HTMLLabelElement>(null);
-    const window = useWindow();
-
-    // States
-    const [searchText, setSearchText] = useState('');
-    const [suggestionsPosition, setSuggestionsPosition] = useState<
-        { top: number; left: number; right: number } | undefined
-    >(undefined);
-
-    const [selectedIndex, setSelectedIndex] = useState(0);
-
-    const selectableOptions = useMemo(() => {
-        if (!suggestionsPosition) {
-            return [];
-        }
-        return options.filter(
-            (option) => !values.includes(option.value) && option.label.toLowerCase().includes(searchText.toLowerCase())
-        );
-    }, [suggestionsPosition, options, searchText, values]);
-
-    // Selectors
-
-    // Callbacks
-    const updateSuggestionPosition = useCallback(() => {
-        if (!containerRef.current) {
-            return;
-        }
-        const { left, right, bottom: top } = containerRef.current.getBoundingClientRect();
-        setSuggestionsPosition({ top, left, right: (window?.innerWidth ?? 0) - right });
-    }, [window?.innerWidth]);
-
-    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
-        setSearchText(ev.target.value);
-        setSelectedIndex(0);
-    }, []);
-    const onFocus = useCallback(() => updateSuggestionPosition(), [updateSuggestionPosition]);
-
-    const toggleOption = useCallback(
-        (_: any, value: string) => {
-            const newValues = [...values];
-            const index = values.indexOf(value);
-            if (index === -1) {
-                newValues.push(value);
-            } else {
-                newValues.splice(index, 1);
+                                                                                       label,
+                                                                                       options,
+                                                                                       values,
+                                                                                       onChangeValue,
+                                                                                       className,
+                                                                                       renderSelectableOptions,
+                                                                                       renderSelectedOption,
+                                                                                       showSelectedOptions = false,
+                                                                                       closeOnSelect = false,
+                                                                                       enableSearch = true,
+    allowDeselect = true,
+                                                                                       style,
+                                                                                   }: SearchSelectInputProps<OnChangeData>) {
+        // Variables
+        const indexedOptions = useMemo(() => ArrayHelper.arrayToObject(options, (opt) => opt.value), [options]);
+
+        // Refs
+        const containerRef = useRef<HTMLLabelElement>(null);
+        const inputRef = useRef<HTMLInputElement>(null);
+        const window = useWindow();
+
+        // States
+        const [searchText, setSearchText] = useState('');
+        const [suggestionsPosition, setSuggestionsPosition] = useState<
+            { top: number; left: number; right: number } | undefined
+        >(undefined);
+
+        const [selectedIndex, setSelectedIndex] = useState(0);
+
+        const selectableOptions = useMemo(() => {
+            if (!suggestionsPosition) {
+                return [];
+            }
+            return options.filter(
+                (option) => (showSelectedOptions || !values.includes(option.value)) && (!enableSearch || option.label.toLowerCase().includes(searchText.toLowerCase()))
+            );
+        }, [suggestionsPosition, options, showSelectedOptions, values, enableSearch, searchText]);
+
+        // Selectors
+
+        // Callbacks
+        const updateSuggestionPosition = useCallback(() => {
+            if (!containerRef.current) {
+                return;
             }
-            setSearchText('');
+            const {left, right, bottom: top} = containerRef.current.getBoundingClientRect();
+            setSuggestionsPosition({top, left, right: (window?.innerWidth ?? 0) - right});
+        }, [window?.innerWidth]);
+
+        const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
+            if (!enableSearch){
+                return;
+            }
+            setSearchText(ev.target.value);
             setSelectedIndex(0);
-            onChangeValue?.(newValues);
-        },
-        [onChangeValue, values]
-    );
-
-    const onKeyPress = useCallback(
-        (e: KeyboardEvent<HTMLInputElement>) => {
-            console.log('Keypress', e.key);
-
-            if (e.key === 'Enter' && !e.defaultPrevented) {
-                if (selectedIndex < selectableOptions.length) {
-                    toggleOption(undefined, selectableOptions[selectedIndex].value);
+        }, [enableSearch]);
+        const onFocus = useCallback(() => updateSuggestionPosition(), [updateSuggestionPosition]);
+
+        const toggleOption = useCallback(
+            (_: any, value: string) => {
+                const newValues = [...values];
+                const index = values.indexOf(value);
+                if (index === -1) {
+                    newValues.push(value);
+                } else {
+                    newValues.splice(index, 1);
                 }
-            } else if (e.key === 'ArrowDown') {
-                setSelectedIndex((old) => {
-                    if (old + 1 >= selectableOptions.length) {
-                        return 0;
+                setSearchText('');
+                setSelectedIndex(0);
+                onChangeValue?.(newValues);
+                if (closeOnSelect) {
+                    if (containerRef.current?.contains(document.activeElement)) {
+                        inputRef.current?.focus();
+                        requestAnimationFrame(() => {
+                            inputRef.current?.blur();
+                        });
                     }
-                    return old + 1;
-                });
-            } else if (e.key === 'ArrowUp') {
-                setSelectedIndex((old) => {
-                    if (old - 1 < 0) {
-                        return Math.max(selectableOptions.length - 1, 0);
+                }
+            },
+            [closeOnSelect, onChangeValue, values]
+        );
+
+        const onKeyPress = useCallback(
+            (e: KeyboardEvent<HTMLInputElement>) => {
+                if (e.key === 'Enter' && !e.defaultPrevented) {
+                    if (selectedIndex < selectableOptions.length) {
+                        toggleOption(undefined, selectableOptions[selectedIndex].value);
                     }
-                    return old - 1;
-                });
-            }
-        },
-        [toggleOption, selectableOptions, selectedIndex]
-    );
+                } else if (e.key === 'ArrowDown') {
+                    setSelectedIndex((old) => {
+                        if (old + 1 >= selectableOptions.length) {
+                            return 0;
+                        }
+                        return old + 1;
+                    });
+                } else if (e.key === 'ArrowUp') {
+                    setSelectedIndex((old) => {
+                        if (old - 1 < 0) {
+                            return Math.max(selectableOptions.length - 1, 0);
+                        }
+                        return old - 1;
+                    });
+                }
+            },
+            [toggleOption, selectableOptions, selectedIndex]
+        );
+
+        // Effects
 
-    // Effects
+        // Other
 
-    // Other
+        // Render Functions
+        const renderOption = (value: string) => {
+            const option = indexedOptions[value];
+            if (!option) {
+                return null;
+            }
 
-    // Render Functions
-    const renderOption = (value: string) => {
-        if (!indexedOptions[value]) {
-            return null;
-        }
+            const element = renderSelectedOption?.(option) ?? <InlineBlock className={styles.tag}>
+                <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value]?.label}</Text>
+            </InlineBlock>;
+
+            const onClickProps = allowDeselect ? {onClick: toggleOption, onClickData: value} : {};
+
+            return (
+                <Clickable {...onClickProps} key={option.key} __allowChildren="all">
+                    {element}
+                </Clickable>
+            );
+        };
+        const renderSelectableOption = (opt: SelectOption, index: number) => {
+            const isActive = index === selectedIndex;
+            const element = renderSelectableOptions?.(opt, isActive, index, selectedIndex) ?? (
+                <Block className={classNames(styles.selectableOption, {[styles.active]: index === selectedIndex})}>
+                    <Text>{opt.label}</Text>
+                </Block>);
+
+            return <Clickable onClick={toggleOption} onClickData={opt.value} key={opt.key} __allowChildren="all">
+                {element}
+            </Clickable>;
+        };
 
         return (
-            <Clickable onClick={toggleOption} onClickData={value} key={indexedOptions[value]?.key}>
-                <InlineBlock className={styles.tag}>
-                    <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value]?.label}</Text>
+            // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            <label className={classNames(styles.input, className)} style={style} ref={containerRef}>
+                {label ? <span className={styles.label}>{label}</span> : null}
+                <Flex className={styles.inputContainer} horizontal={true}>
+                    <InlineBlock>{values.map(renderOption)}</InlineBlock>
+                    <Grow __allowChildren="html">
+                        <input
+                            ref={inputRef}
+                            className={classNames(styles.text, {[styles.disabled]: !enableSearch})}
+                            value={searchText}
+                            onChange={onChange}
+                            onKeyDown={onKeyPress}
+                            onFocus={onFocus}
+                        />
+                    </Grow>
+                </Flex>
+                <InlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
+                    {selectableOptions.map(renderSelectableOption)}
                 </InlineBlock>
-            </Clickable>
+            </label>
         );
-    };
-    const renderSelectableOption = (opt: SelectOption, index: number) => (
-        <Clickable onClick={toggleOption} onClickData={opt.value} key={opt.key}>
-            <Block className={classNames(styles.selectableOption, { [styles.active]: index === selectedIndex })}>
-                <Text>{opt.label}</Text>
-            </Block>
-        </Clickable>
-    );
-
-    return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.input, className)} style={style} ref={containerRef}>
-            {label ? <span className={styles.label}>{label}</span> : null}
-            <Flex className={styles.inputContainer} horizontal={true}>
-                <InlineBlock>{values.map(renderOption)}</InlineBlock>
-                <Grow __allowChildren="html">
-                    <input
-                        className={styles.text}
-                        value={searchText}
-                        onChange={onChange}
-                        onKeyDown={onKeyPress}
-                        onFocus={onFocus}
-                    />
-                </Grow>
-            </Flex>
-            <InlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
-                {selectableOptions.map(renderSelectableOption)}
-            </InlineBlock>
-        </label>
-    );
-},
-styles);
+    },
+    styles);

package/src/Components/FormElements/SearchSelectInput/seachSelectInput.scss

@@ -34,10 +34,15 @@
 
   .label {
     display: block;
-    font-weight: bold;
+    font-weight: var(--label-font-weight, bold);
   }
 
   .text {
+    &.disabled {
+      caret-color: transparent;
+      cursor: pointer;
+    }
+
     width: 100%;
     background-color: transparent;
     border: 0;

package/src/Components/FormElements/Slider/Slider.tsx

@@ -14,6 +14,7 @@ export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = Rbm
         Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>,
         {
             value?: number;
+            stopPropagation?: boolean;
         } & OptionalListener<'onChange', OnChangeData> &
             OptionalListener<'onChangeValue', OnChangeValueData, number> &
             OptionalListener<'onChangeDone', OnChangeDoneData>
@@ -23,6 +24,7 @@ export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = Rbm
 export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData, OnChangeDoneData>({
     className,
     style,
+    stopPropagation = true,
     ...props
 }: SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData>) {
     // Variables
@@ -57,6 +59,12 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
         [onChange, onChangeValue]
     );
 
+    const checkStopPropagation = useCallback((ev: React.MouseEvent) => {
+        if (stopPropagation) {
+            ev.stopPropagation();
+        }
+    }, [stopPropagation]);
+
     // Effects
     const innerRef = useOnChangeDone(onChangeDone) as MutableRefObject<HTMLInputElement|null>;
 
@@ -66,7 +74,7 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
 
     return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.slider, className)} style={style}>
+        <label className={classNames(styles.slider, className)} style={style} onClick={checkStopPropagation}>
             <input
                 type="range"
                 {...otherPropsWithoutData}