allaw-ui 3.4.3 → 3.4.5

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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,136 @@
+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

@@ -0,0 +1,25 @@
+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;