kelt-ui-kit-react 1.8.5 → 1.9.0

package/dist/search/Search.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { DynamicForm } from "../form/Form";
+import { TypeInputEnum } from "../form/form.enum";
+import { Icon } from "../icon/Icon";
+import "./search.css";
+export var Search = forwardRef(function (_a, ref) {
+    var children = _a.children, name = _a.name, placeholder = _a.placeholder, isVisible = _a.isVisible, focus = _a.focus, debounceTime = _a.debounceTime, handleChange = _a.handleChange, setIsVisible = _a.setIsVisible, id = _a.id;
+    var _b = useState(isVisible !== null && isVisible !== void 0 ? isVisible : false), isOpen = _b[0], setIsOpen = _b[1];
+    var debounceRef = useRef(null);
+    var formRef = useRef(null);
+    var initialValues = useMemo(function () { return [
+        {
+            value: "",
+            id: id,
+            name: name !== null && name !== void 0 ? name : "recherche",
+            placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Recherche",
+            type: TypeInputEnum.TEXT,
+            focus: focus,
+            icon: "bi-search",
+            className: "search-input",
+            autoComplete: "off",
+        },
+    ]; }, [placeholder, focus]);
+    useEffect(function () {
+        if (isVisible !== undefined) {
+            setIsOpen(isVisible);
+        }
+    }, [isVisible]);
+    var setShowSearch = useCallback(function (value) {
+        if (setIsVisible) {
+            setIsVisible(value);
+        }
+        setIsOpen(value);
+    }, [setIsVisible]);
+    var onChange = useCallback(function (values) {
+        if (!values || !values[name !== null && name !== void 0 ? name : "recherche"]) {
+            return setShowSearch(false);
+        }
+        setShowSearch(true);
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        debounceRef.current = setTimeout(function () {
+            if (handleChange) {
+                handleChange(values);
+            }
+        }, debounceTime !== null && debounceTime !== void 0 ? debounceTime : 500);
+    }, [setShowSearch, handleChange, debounceTime]);
+    var handleSubmit = useCallback(function (values) {
+        console.log("Form Submitted: ", values);
+    }, []);
+    // Expose clearInput et resetForm via le ref du parent
+    useImperativeHandle(ref, function () { return ({
+        clearInput: function (name) {
+            var _a;
+            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.clearInput(name);
+        },
+        resetForm: function () {
+            var _a;
+            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+        },
+        focusInitialElement: function () {
+            var _a;
+            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.focusInitialElement();
+        },
+    }); });
+    return (_jsxs("div", __assign({ className: "search" }, { children: [_jsx(DynamicForm, { ref: formRef, onSubmit: handleSubmit, onChange: onChange, hideSubmit: true, initialForm: initialValues }), isOpen && (_jsxs("div", __assign({ className: "search-result" }, { children: [_jsx("div", __assign({ className: "search-result-close" }, { children: _jsx("button", __assign({ className: "toggle-btn", onClick: function () { return setShowSearch(false); } }, { children: _jsx(Icon, { classIcon: "bi-x-lg" }) })) })), _jsx("div", __assign({ className: "search-result-content" }, { children: children }))] })))] })));
+});

package/dist/search/Search.view.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Search } from "./Search";
+export var SearchView = function () {
+    var onChange = function (values) {
+        console.log(values);
+    };
+    return (_jsx(Search, { focus: true, handleChange: onChange, children: _jsx("div", { children: "test" }) }));
+};

package/dist/select/Select.d.ts

@@ -5,6 +5,7 @@ export interface SelectProps {
     label?: string;
     title?: string;
     disabled?: boolean;
+    style?: React.CSSProperties;
     name?: string;
     defaultValue?: string | string[];
     multiple?: boolean;
@@ -16,4 +17,4 @@ export interface SelectProps {
     onChange?: (value: string) => void;
     placeholder?: string;
 }
-export declare const Select: ({ id, label, options, className, disabled, multiple, required, defaultValue, name, onChange, onChangeMultiple, value, placeholder, }: SelectProps) => JSX.Element;
+export declare const Select: ({ id, label, options, className, disabled, style, multiple, required, defaultValue, name, onChange, onChangeMultiple, value, placeholder, }: SelectProps) => JSX.Element;

package/dist/select/Select.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { Icon } from "../icon/Icon";
+import "./select.css";
+export var Select = function (_a) {
+    var _b;
+    var id = _a.id, label = _a.label, options = _a.options, className = _a.className, disabled = _a.disabled, style = _a.style, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, defaultValue = _a.defaultValue, name = _a.name, onChange = _a.onChange, onChangeMultiple = _a.onChangeMultiple, value = _a.value, placeholder = _a.placeholder;
+    var inputRefs = useRef({});
+    var handleChange = function (event) {
+        var selectedValue;
+        if (multiple) {
+            selectedValue = Array.from(event.target.selectedOptions, function (opt) { return opt.value; });
+            if (onChangeMultiple) {
+                onChangeMultiple(selectedValue);
+            }
+        }
+        else {
+            selectedValue = event.target.value;
+            if (onChange) {
+                onChange(selectedValue);
+            }
+        }
+    };
+    var resetValue = useCallback(function () {
+        if (onChange) {
+            onChange("");
+        }
+    }, [onChange]);
+    return (_jsxs("div", __assign({ id: id, className: "select-container ".concat(className ? className : "") }, { children: [label && (_jsx("label", __assign({ htmlFor: "select-".concat(id), className: "select-container-label" }, { children: label }))), _jsxs("select", __assign({ defaultValue: "", required: required, name: name, style: style, disabled: disabled, id: "select-".concat(id), className: "select-container-select", value: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : (multiple ? [] : ""), onChange: handleChange, multiple: multiple, ref: function (el) { return (inputRefs.current[id !== null && id !== void 0 ? id : "select"] = el); } }, { children: [placeholder && !defaultValue && !multiple && (_jsx("option", __assign({ selected: true, disabled: true, hidden: true, value: "" }, { children: placeholder }))), options.map(function (option, index) { return (_jsx("option", __assign({ value: option.value }, { children: option.label }), index)); })] })), value !== "" && placeholder && (_jsx("div", __assign({ className: "clear-btn", onClick: resetValue, "aria-label": "R\u00E9initialiser" }, { children: _jsx(Icon, { classIcon: "bi-x" }) })))] })));
+};

package/dist/select/Select.view.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Select } from "./Select";
+export var SelectView = function () {
+    var selectData = useMemo(function () {
+        return [
+            {
+                id: "select",
+                title: "Select",
+                className: "select-component",
+                options: [
+                    { value: "option1", label: "Option 1" },
+                    { value: "option2", label: "Option 2" },
+                    { value: "option3", label: "Option 3" },
+                ],
+            },
+            {
+                id: "select-disabled",
+                title: "Select Disabled",
+                className: "select-component",
+                disabled: true,
+                options: [
+                    { value: "option1", label: "Option 1" },
+                    { value: "option2", label: "Option 2" },
+                    { value: "option3", label: "Option 3" },
+                ],
+            },
+            {
+                id: "select-placeholder",
+                title: "Select Placeholder",
+                className: "select-component",
+                placeholder: "Select an option",
+                options: [
+                    { value: "option1", label: "Option 1" },
+                    { value: "option2", label: "Option 2" },
+                    { value: "option3", label: "Option 3" },
+                ],
+            },
+            {
+                id: "select-default-value",
+                title: "Select Default Value",
+                className: "select-component",
+                defaultValue: "option2",
+                options: [
+                    { value: "option1", label: "Option 1" },
+                    { value: "option2", label: "Option 2" },
+                    { value: "option3", label: "Option 3" },
+                ],
+            },
+            {
+                id: "select-value",
+                title: "Select Value",
+                className: "select-component",
+                value: "option3",
+                options: [
+                    { value: "option1", label: "Option 1" },
+                    { value: "option2", label: "Option 2" },
+                    { value: "option3", label: "Option 3" },
+                ],
+            },
+        ];
+    }, []);
+    return (_jsx(_Fragment, { children: selectData.map(function (data) { return (_jsx(Select, __assign({}, data), data.id)); }) }));
+};

package/dist/select/selectOption.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/sidebar/Sidebar.js

@@ -0,0 +1,132 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { Icon } from "../icon/Icon";
+import "./sidebar.css";
+var SWIPE_CLOSE_THRESHOLD = 60; // px à parcourir pour fermer
+var SWIPE_AXIS_LOCK_THRESHOLD = 10; // px pour déterminer l'axe du geste
+export var Sidebar = function (_a) {
+    var open = _a.open, children = _a.children, title = _a.title, onClose = _a.onClose, className = _a.className, id = _a.id, width = _a.width, _b = _a.closeOnClickOutside, closeOnClickOutside = _b === void 0 ? true : _b, _c = _a.displayOverlay, displayOverlay = _c === void 0 ? true : _c;
+    var _d = useState(open || false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = useState(0), dragX = _e[0], setDragX = _e[1];
+    var _f = useState(false), isDragging = _f[0], setIsDragging = _f[1];
+    var sidebarRef = useRef(null);
+    var rootRef = useRef(null);
+    var touchStartX = useRef(0);
+    var touchStartY = useRef(0);
+    var axisLocked = useRef(null);
+    // Créer le conteneur une seule fois
+    useEffect(function () {
+        if (!rootRef.current) {
+            rootRef.current = document.createElement("div");
+            rootRef.current.id = "sidebar-root-".concat(id || crypto.randomUUID());
+            document.body.appendChild(rootRef.current);
+        }
+        return function () {
+            // Nettoyage lors du démontage
+            if (rootRef.current && rootRef.current.parentNode) {
+                document.body.removeChild(rootRef.current);
+                rootRef.current = null;
+            }
+        };
+    }, [id]);
+    // Synchroniser l'état `isOpen` avec la prop `open`
+    useEffect(function () {
+        setIsOpen(open || false);
+    }, [open]);
+    var toggleSidebar = useCallback(function () {
+        setIsOpen(false);
+        if (onClose) {
+            onClose(false);
+        }
+    }, [onClose]);
+    var handleClickOutside = useCallback(function (event) {
+        if (!closeOnClickOutside)
+            return;
+        if (sidebarRef.current &&
+            !sidebarRef.current.contains(event.target)) {
+            toggleSidebar();
+        }
+    }, [toggleSidebar, closeOnClickOutside]);
+    var handleTouchStart = useCallback(function (event) {
+        var touch = event.touches[0];
+        touchStartX.current = touch.clientX;
+        touchStartY.current = touch.clientY;
+        axisLocked.current = null;
+        setIsDragging(false);
+        setDragX(0);
+    }, []);
+    var handleTouchMove = useCallback(function (event) {
+        if (!isOpen)
+            return;
+        var touch = event.touches[0];
+        var deltaX = touch.clientX - touchStartX.current;
+        var deltaY = touch.clientY - touchStartY.current;
+        // Détermine l'axe du geste une seule fois, dès qu'on a un déplacement suffisant
+        if (!axisLocked.current) {
+            if (Math.abs(deltaX) < SWIPE_AXIS_LOCK_THRESHOLD &&
+                Math.abs(deltaY) < SWIPE_AXIS_LOCK_THRESHOLD) {
+                return; // pas encore assez de mouvement pour trancher
+            }
+            axisLocked.current = Math.abs(deltaX) > Math.abs(deltaY) ? "x" : "y";
+        }
+        if (axisLocked.current !== "x")
+            return; // c'est un scroll vertical, on laisse faire
+        // On gère le swipe horizontal nous-mêmes : on empêche le scroll natif
+        // et on bloque le bounce/scroll de la page pendant le drag
+        event.preventDefault();
+        setIsDragging(true);
+        // On ne permet que le swipe vers la droite (fermeture), pas de drag négatif
+        setDragX(Math.max(0, deltaX));
+    }, [isOpen]);
+    var handleTouchEnd = useCallback(function (event) {
+        if (!isOpen) {
+            return;
+        }
+        if (axisLocked.current === "x") {
+            var touch = event.changedTouches[0];
+            var deltaX = touch.clientX - touchStartX.current;
+            if (deltaX > SWIPE_CLOSE_THRESHOLD) {
+                toggleSidebar();
+            }
+        }
+        setIsDragging(false);
+        setDragX(0);
+        axisLocked.current = null;
+    }, [isOpen, toggleSidebar]);
+    var handleOverlayTouchEnd = useCallback(function (event) {
+        event.preventDefault();
+        toggleSidebar();
+    }, [toggleSidebar]);
+    useEffect(function () {
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            document.addEventListener("touchstart", handleClickOutside, {
+                passive: true,
+            });
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("touchstart", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("touchstart", handleClickOutside);
+        };
+    }, [isOpen, handleClickOutside]);
+    if (!rootRef.current) {
+        return _jsx(_Fragment, {}); // Ne pas tenter de rendre si le conteneur n'existe pas
+    }
+    return ReactDOM.createPortal(_jsxs(_Fragment, { children: [isOpen && displayOverlay && (_jsx("div", { className: "overlay", onClick: toggleSidebar, onTouchEnd: handleOverlayTouchEnd })), _jsxs("div", __assign({ ref: sidebarRef, style: __assign(__assign({}, (width ? { width: width } : {})), { transform: dragX ? "translateX(".concat(dragX, "px)") : undefined, transition: isDragging ? "none" : undefined }), className: "sidebar ".concat(isOpen ? "open" : "closed", " ").concat(className !== null && className !== void 0 ? className : ""), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd }, { children: [_jsxs("div", __assign({ className: "sidebar-header" }, { children: [title && _jsx("h2", __assign({ className: "flex-1" }, { children: title })), _jsx("button", __assign({ className: "toggle-btn", onClick: toggleSidebar }, { children: _jsx(Icon, { classIcon: "bi-x-lg" }) }))] })), children && children] }))] }), rootRef.current);
+};

package/dist/sidebar/Sidebar.view.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { Sidebar } from "./Sidebar";
+export var SidebarView = function () {
+    var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
+    var onClick = useCallback(function () {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { title: "open me", onClick: onClick }), _jsx(Sidebar, { onClose: setIsOpen, title: "Menu", open: isOpen })] }));
+};

package/dist/sidebarData/SidebarData.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar } from "../sidebar/Sidebar";
+import "./sidebarData.css";
+export var SidebarData = function (props) {
+    return (_jsx(Sidebar, __assign({}, props, { className: "full sidebar-data ".concat(props.className) }, { children: props.children && (_jsx("div", __assign({ className: "sidebar-data-content ".concat(props.classNameContent, " ") }, { children: props.children }))) })));
+};

package/dist/sidebarData/SidebarData.view.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { SidebarData } from "./SidebarData";
+export var SidebarDataView = function () {
+    var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
+    var onClick = useCallback(function () {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    var onClose = useCallback(function () {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { title: "open me", onClick: onClick }), _jsx(SidebarData, { onClose: onClose, width: "20vw", title: "Infos", open: isOpen })] }));
+};