allaw-ui 3.4.1 → 3.4.2

package/dist/components/atoms/selects/ComboBox.js

@@ -1,172 +0,0 @@
-import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, } from "react";
-import "./ComboBox.css";
-import "../../../styles/global.css";
-import TinyInfo from "../typography/TinyInfo";
-import Paragraph from "../typography/Paragraph";
-import { createPortal } from "react-dom";
-function ComboBox(_a, ref) {
-    var items = _a.items, selectedItem = _a.selectedItem, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner..." : _b, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.showError, showError = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, onSelect = _a.onSelect, onChange = _a.onChange, onError = _a.onError, _f = _a.openOnMount, openOnMount = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleStyle, titleStyle = _g === void 0 ? "semiBold" : _g;
-    var _h = useState(openOnMount), isOpen = _h[0], setIsOpen = _h[1];
-    var _j = useState(""), inputValue = _j[0], setInputValue = _j[1];
-    var _k = useState(items), filteredItems = _k[0], setFilteredItems = _k[1];
-    var _l = useState(""), error = _l[0], setError = _l[1];
-    var _m = useState(false), isHovered = _m[0], setIsHovered = _m[1];
-    var _o = useState(-1), selectedIndex = _o[0], setSelectedIndex = _o[1];
-    var comboBoxRef = useRef(null);
-    var inputContainerRef = useRef(null);
-    var listRef = useRef(null);
-    var inputRef = useRef(null);
-    var chevronRef = useRef(null);
-    var _p = useState(true), isInputValid = _p[0], setIsInputValid = _p[1];
-    var _q = useState({
-        top: 0,
-        left: 0,
-        width: 0,
-    }), listPosition = _q[0], setListPosition = _q[1];
-    useEffect(function () {
-        if (selectedItem) {
-            var selectedItemData = items.find(function (item) { return item.value === selectedItem; });
-            setInputValue(selectedItemData ? selectedItemData.label : "");
-        }
-        else {
-            setInputValue("");
-        }
-        setFilteredItems(items);
-    }, [selectedItem, items]);
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (inputContainerRef.current &&
-                !inputContainerRef.current.contains(event.target) &&
-                listRef.current &&
-                !listRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
-    useEffect(function () {
-        if (isOpen && inputContainerRef.current) {
-            var rect = inputContainerRef.current.getBoundingClientRect();
-            setListPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-                width: rect.width,
-            });
-        }
-    }, [isOpen]);
-    var handleInputChange = function (event) {
-        var value = event.target.value;
-        setInputValue(value);
-        var filtered = items.filter(function (item) {
-            return item.label.toLowerCase().includes(value.toLowerCase());
-        });
-        setFilteredItems(filtered);
-        setIsInputValid(filtered.length > 0 || value === "");
-        setIsOpen(true);
-        onChange === null || onChange === void 0 ? void 0 : onChange(value);
-    };
-    var handleInputFocus = function () {
-        setIsOpen(true);
-    };
-    var handleSelect = function (item, index) {
-        // console.log("Élément sélectionné :", item);
-        setInputValue(item.label);
-        setSelectedIndex(index);
-        setFilteredItems(items);
-        setIsOpen(false);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
-        validateSelect(item.value);
-    };
-    var validateSelect = function (value) {
-        var isEmpty = value === "";
-        var errorMessage = isRequired && isEmpty ? "Ce champ est requis" : "";
-        // console.log("Validation de la sélection :", errorMessage);
-        setError(errorMessage);
-        onError === null || onError === void 0 ? void 0 : onError(errorMessage);
-        return !errorMessage;
-    };
-    useImperativeHandle(ref, function () { return ({
-        validate: function () { return validateSelect(inputValue); },
-    }); });
-    var handleChevronClick = function () {
-        if (!isInputValid) {
-            setInputValue("");
-            setFilteredItems(items);
-            setIsInputValid(true);
-        }
-        else {
-            setIsOpen(!isOpen);
-        }
-    };
-    var handleMouseEnter = function () {
-        setIsHovered(true);
-    };
-    var handleMouseLeave = function () {
-        setIsHovered(false);
-    };
-    var handleItemClick = function (item, index) {
-        // console.log("Clic sur l'élément :", item);
-        handleSelect(item, index);
-    };
-    var handleKeyDown = function (event) {
-        if (isOpen) {
-            switch (event.key) {
-                case "ArrowUp":
-                    event.preventDefault();
-                    setSelectedIndex(function (prevIndex) {
-                        return prevIndex <= 0 ? filteredItems.length - 1 : prevIndex - 1;
-                    });
-                    break;
-                case "ArrowDown":
-                    event.preventDefault();
-                    setSelectedIndex(function (prevIndex) {
-                        return prevIndex >= filteredItems.length - 1 ? 0 : prevIndex + 1;
-                    });
-                    break;
-                case "Enter":
-                    event.preventDefault();
-                    if (selectedIndex !== -1) {
-                        handleSelect(filteredItems[selectedIndex], selectedIndex);
-                    }
-                    break;
-                default:
-                    break;
-            }
-        }
-    };
-    useEffect(function () {
-        var handleKeyDownWrapper = function (event) {
-            if (inputRef.current && event.target === inputRef.current) {
-                handleKeyDown(event);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDownWrapper);
-        return function () {
-            document.removeEventListener("keydown", handleKeyDownWrapper);
-        };
-    }, [isOpen, filteredItems, selectedIndex]);
-    return (React.createElement("div", { ref: comboBoxRef, className: "combo-box-container ".concat(isOpen ? "combo-box-pressed" : "", " ").concat(isHovered ? "combo-box-hovered" : ""), style: { width: "".concat(width, "%") }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        title && (React.createElement("div", { className: "combo-box-title-container" },
-            React.createElement(Paragraph, { variant: titleStyle, color: "noir", text: title }),
-            isRequired && (React.createElement("span", { className: "combo-box-required" },
-                "\u00A0",
-                "*")))),
-        React.createElement("div", { ref: inputContainerRef, className: "combo-box-input-container" },
-            React.createElement("input", { "data-cy": "combo-box", ref: inputRef, className: "combo-box ".concat(isOpen ? "combo-box-pressed" : "combo-box-default", " ").concat(isHovered ? "combo-box-hovered" : ""), placeholder: placeholder, value: inputValue, onChange: handleInputChange, onFocus: handleInputFocus, style: { width: "100%" } }),
-            React.createElement("div", { ref: chevronRef, className: "combo-box-chevron ".concat(isHovered ? "combo-box-hovered" : ""), onClick: handleChevronClick },
-                React.createElement("i", { className: "allaw-icon-".concat(isInputValid ? "chevron-down" : "close") }))),
-        isOpen &&
-            filteredItems.length > 0 &&
-            createPortal(React.createElement("div", { ref: listRef, className: "combo-box-list", style: {
-                    top: "".concat(listPosition.top, "px"),
-                    left: "".concat(listPosition.left, "px"),
-                    width: "".concat(listPosition.width, "px"),
-                } }, filteredItems.map(function (item, index) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "combo-box-item ".concat(index === selectedIndex ? "highlighted" : ""), onClick: function () { return handleItemClick(item, index); } },
-                React.createElement("span", { className: "combo-box-item-text" }, item.label))); })), document.body),
-        isRequired && showError && error && (React.createElement("div", { className: "error-message" },
-            React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));
-}
-export default forwardRef(ComboBox);

package/dist/components/atoms/selects/ComboBox.stories.d.ts

@@ -1,116 +0,0 @@
-export const ActionsData: {};
-declare namespace _default {
-    export let title: string;
-    export { ComboBox as component };
-    export let tags: string[];
-    export let excludeStories: RegExp;
-    export let args: {};
-    export namespace argTypes {
-        export namespace items {
-            namespace control {
-                let type: string;
-            }
-        }
-        export namespace placeholder {
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-        }
-        export namespace isRequired {
-            export namespace control_2 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_2 as control };
-        }
-        export namespace selectedItem {
-            export namespace control_3 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_3 as control };
-        }
-        export namespace onChange {
-            namespace table {
-                let disable: boolean;
-            }
-        }
-        export namespace width {
-            export namespace control_4 {
-                let type_4: string;
-                export { type_4 as type };
-                export let min: number;
-                export let max: number;
-            }
-            export { control_4 as control };
-        }
-        export namespace openOnMount {
-            export namespace control_5 {
-                let type_5: string;
-                export { type_5 as type };
-            }
-            export { control_5 as control };
-        }
-        export namespace title_1 {
-            export namespace control_6 {
-                let type_6: string;
-                export { type_6 as type };
-            }
-            export { control_6 as control };
-        }
-        export { title_1 as title };
-        export namespace titleStyle {
-            export let options: string[];
-            export namespace control_7 {
-                let type_7: string;
-                export { type_7 as type };
-            }
-            export { control_7 as control };
-            export let description: string;
-            export namespace table_1 {
-                export namespace type_8 {
-                    let summary: string;
-                }
-                export { type_8 as type };
-                export namespace defaultValue {
-                    let summary_1: string;
-                    export { summary_1 as summary };
-                }
-            }
-            export { table_1 as table };
-        }
-    }
-    export namespace parameters {
-        namespace backgrounds {
-            let _default: string;
-            export { _default as default };
-            export let values: {
-                name: string;
-                value: string;
-            }[];
-        }
-        let layout: string;
-        namespace viewport {
-            namespace viewports {
-                namespace responsive {
-                    let name: string;
-                    namespace styles {
-                        let height: string;
-                    }
-                }
-            }
-            let defaultViewport: string;
-        }
-    }
-}
-export default _default;
-export const Default: any;
-export const Pressed: any;
-export const Required: any;
-export const CustomWidth: any;
-export const OpenOnMount: any;
-export const TitleMedium: any;
-export const TitleBold: any;
-import ComboBox from "./ComboBox";

package/dist/components/atoms/selects/ComboBox.stories.js

@@ -1,136 +0,0 @@
-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);
-};
-// ComboBox.stories.jsx
-import React, { useState } from "react";
-import ComboBox from "./ComboBox";
-import "../../../styles/global.css";
-export var ActionsData = {};
-export default {
-    title: "Components/Atoms/selects/ComboBox",
-    component: ComboBox,
-    tags: ["autodocs"],
-    excludeStories: /.*Data$/,
-    args: __assign({}, ActionsData),
-    argTypes: {
-        items: {
-            control: {
-                type: "array",
-            },
-        },
-        placeholder: {
-            control: {
-                type: "text",
-            },
-        },
-        isRequired: {
-            control: {
-                type: "boolean",
-            },
-        },
-        selectedItem: {
-            control: {
-                type: "text",
-            },
-        },
-        onChange: {
-            table: {
-                disable: true,
-            },
-        },
-        width: {
-            control: {
-                type: "number",
-                min: 1,
-                max: 100,
-            },
-        },
-        openOnMount: {
-            control: {
-                type: "boolean",
-            },
-        },
-        title: {
-            control: {
-                type: "text",
-            },
-        },
-        titleStyle: {
-            options: ["medium", "semiBold", "bold"],
-            control: { type: "select" },
-            description: "Style du titre (graisse de police)",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "semiBold" },
-            },
-        },
-    },
-    parameters: {
-        backgrounds: {
-            default: "light",
-            values: [
-                { name: "light", value: "#ffffff" },
-                { name: "grey", value: "#728ea7" },
-                { name: "figma", value: "#404040" },
-                { name: "dark", value: "#171e25" },
-            ],
-        },
-        layout: "padded",
-        viewport: {
-            viewports: {
-                responsive: {
-                    name: "Responsive",
-                    styles: {
-                        height: "360px",
-                    },
-                },
-            },
-            defaultViewport: "responsive",
-        },
-    },
-};
-var Template = function (args) {
-    var _a = useState(args.selectedItem), selected = _a[0], setSelected = _a[1];
-    var handleChange = function (newSelected) {
-        setSelected(newSelected);
-    };
-    return React.createElement(ComboBox, __assign({}, args, { selectedItem: selected, onChange: handleChange }));
-};
-export var Default = Template.bind({});
-Default.args = {
-    items: [
-        { label: "Lundi 12 août", value: "lundi-12-aout" },
-        { label: "Mardi 13 août", value: "mardi-13-aout" },
-        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
-        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
-        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
-        { label: "Samedi 17 août", value: "samedi-17-aout" },
-    ],
-    selectedItem: "lundi-12-aout", // Élément sélectionné par défaut
-    placeholder: "Sélectionner...",
-    isRequired: false,
-    width: 100,
-    openOnMount: true,
-    title: "Sélectionnez une date",
-    titleStyle: "semiBold",
-};
-export var Pressed = Template.bind({});
-Pressed.args = __assign(__assign({}, Default.args), { selectedItem: "lundi-12-aout" });
-export var Required = Template.bind({});
-Required.args = __assign(__assign({}, Default.args), { isRequired: true });
-export var CustomWidth = Template.bind({});
-CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });
-export var OpenOnMount = Template.bind({});
-OpenOnMount.args = __assign(__assign({}, Default.args), { openOnMount: true });
-export var TitleMedium = Template.bind({});
-TitleMedium.args = __assign(__assign({}, Default.args), { titleStyle: "medium" });
-export var TitleBold = Template.bind({});
-TitleBold.args = __assign(__assign({}, Default.args), { titleStyle: "bold" });

package/dist/components/atoms/selects/Select.d.ts

@@ -1,25 +0,0 @@
-import React from "react";
-import "../../../styles/global.css";
-export interface SelectItem {
-    label: string;
-    value: string;
-}
-export interface SelectProps<T extends string | string[]> {
-    items: SelectItem[];
-    selectedItem?: T;
-    placeholder?: string;
-    multiple?: boolean;
-    isRequired?: boolean;
-    showError?: boolean;
-    width?: number;
-    maxItems?: number;
-    onChange?: (selected: T) => void;
-    onError?: (error: string) => void;
-}
-export interface SelectRef {
-    validate: () => boolean;
-}
-declare const _default: <T extends string | string[]>(props: SelectProps<T> & {
-    ref?: React.Ref<SelectRef>;
-}) => React.ReactElement;
-export default _default;