allaw-ui 0.1.44 → 0.1.45

package/dist/components/atoms/inputs/Input.css

@@ -52,11 +52,19 @@
   flex-direction: column;
   align-items: flex-start;
   border-radius: 8px;
-  border: 1px solid rgba(114, 142, 167, 1);
+  border: 3px solid var(--grey-venom, #e6edf5);
   background: var(--Primary-Blanc, #fff);
   padding: 10px;
 }
 
+.Input-default .Input-input:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.Input-default .Input-input:focus-within {
+  border-color: var(--mid-grey, #728ea7);
+}
+
 .Input-default .Input-input input {
   width: 100%;
   border: none;
@@ -88,11 +96,19 @@
   flex-direction: column;
   align-items: flex-start;
   border-radius: 8px;
-  border: 1px solid rgba(114, 142, 167, 1);
+  border: 3px solid var(--grey-venom, #e6edf5);
   background: var(--Primary-Blanc, #fff);
   padding: 10px;
 }
 
+.Input-variation .Input-input:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.Input-variation .Input-input:focus-within {
+  border-color: var(--mid-grey, #728ea7);
+}
+
 .Input-variation .Input-input input {
   width: 100%;
   border: none;
@@ -143,11 +159,19 @@
   justify-content: space-between;
   align-items: center;
   border-radius: 8px;
-  border: 1px solid rgba(114, 142, 167, 1);
+  border: 3px solid var(--grey-venom, #e6edf5);
   background: var(--Primary-Blanc, #fff);
   padding: 10px;
 }
 
+.Input-password .Input-container:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.Input-password .Input-container:focus-within {
+  border-color: var(--mid-grey, #728ea7);
+}
+
 .Input-password .Input-input {
   display: flex;
   flex: 1;

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

@@ -0,0 +1,141 @@
+/* ComboBox.css */
+.combo-box-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.combo-box-title-container {
+  display: flex;
+  align-items: center;
+}
+
+.combo-box-required {
+  color: var(--dark-grey, #456073);
+}
+
+.combo-box-input-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.combo-box {
+  display: flex;
+  padding: 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  border-radius: 10px;
+  border: 3px solid var(--grey-venom, #e6edf5);
+  background: var(--Primary-Blanc, #fff);
+  cursor: pointer;
+  outline: none;
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  width: 100%;
+}
+
+.combo-box-chevron {
+  position: absolute;
+  right: 12px;
+  top: 5px;
+  color: var(--venom-grey-dark, #d1dce8);
+  cursor: pointer;
+  z-index: 1;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 14px;
+  padding-right: 14px;
+  transition: transform 0.3s ease-in-out;
+}
+
+.combo-box:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.combo-box-chevron:hover {
+  color: var(--mid-grey, #728ea7);
+}
+
+.allaw-icon-chevron {
+  transition: transform 0.3s ease-in-out;
+}
+
+.chevron-down {
+  transform: rotate(0deg);
+}
+
+.chevron-up {
+  transform: rotate(180deg);
+}
+
+.combo-box-list {
+  display: none;
+  flex-direction: column;
+  background: var(--secondary-light-grey, #f4f7fb);
+  border-radius: 12px;
+  margin-top: 8px;
+  padding: 3px 5px;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  max-height: 600px;
+  overflow-y: auto;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
+  scroll-behavior: auto;
+}
+
+.combo-box-pressed .combo-box-list {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.combo-box-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  margin: 2px 0;
+  cursor: pointer;
+  width: 100%;
+}
+
+.combo-box-item:hover {
+  background: var(--venom-grey-dark, #d1dce8);
+  border-radius: 8px;
+}
+
+.combo-box-item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.error-message {
+  padding-top: 4px;
+  padding-left: 14px;
+}
+
+.combo-box-item.highlighted {
+  background-color: var(--venom-grey-dark, #d1dce8);
+  border-radius: 8px;
+}
+
+.combo-box-hovered {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}

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

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

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

@@ -0,0 +1,149 @@
+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";
+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, onChange = _a.onChange, onError = _a.onError, _f = _a.openOnMount, openOnMount = _f === void 0 ? true : _f, title = _a.title;
+    var _g = useState(openOnMount), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = useState(""), inputValue = _h[0], setInputValue = _h[1];
+    var _j = useState(items), filteredItems = _j[0], setFilteredItems = _j[1];
+    var _k = useState(""), error = _k[0], setError = _k[1];
+    var _l = useState(false), isHovered = _l[0], setIsHovered = _l[1];
+    var _m = useState(-1), selectedIndex = _m[0], setSelectedIndex = _m[1];
+    var comboBoxRef = useRef(null);
+    var inputContainerRef = useRef(null);
+    var listRef = useRef(null);
+    var inputRef = useRef(null);
+    var chevronRef = useRef(null);
+    var _o = useState(true), isInputValid = _o[0], setIsInputValid = _o[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);
+        };
+    }, []);
+    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);
+    };
+    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);
+        onChange === null || onChange === void 0 ? void 0 : onChange(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: "semiBold", 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", { 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 && (React.createElement("div", { ref: listRef, className: "combo-box-list", style: { width: "100%" } }, 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))); }))),
+        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/index.d.ts

@@ -1,2 +1,4 @@
-export { default } from "./Select";
+export { default as Select } from "./Select";
 export type { SelectItem, SelectProps, SelectRef } from "./Select";
+export { default as ComboBox } from "./ComboBox";
+export type { ComboBoxProps, ComboBoxRef } from "./ComboBox";

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

@@ -1 +1,2 @@
-export { default } from "./Select";
+export { default as Select } from "./Select";
+export { default as ComboBox } from "./ComboBox";

package/dist/index.d.ts

@@ -21,6 +21,8 @@ export { default as RadioButton } from "./components/atoms/radios/RadioButton";
 export { default as SingleFilter } from "./components/atoms/filters/SingleFilter";
 export { default as Select } from "./components/atoms/selects/Select";
 export type { SelectItem, SelectProps, SelectRef, } from "./components/atoms/selects/Select";
+export { default as ComboBox } from "./components/atoms/selects/ComboBox";
+export type { ComboBoxProps, ComboBoxRef, } from "./components/atoms/selects/ComboBox";
 export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
 export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";
 export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";

package/dist/index.js

@@ -26,6 +26,7 @@ export { default as RadioButton } from "./components/atoms/radios/RadioButton";
 export { default as SingleFilter } from "./components/atoms/filters/SingleFilter";
 // Selects
 export { default as Select } from "./components/atoms/selects/Select";
+export { default as ComboBox } from "./components/atoms/selects/ComboBox";
 // Tags
 export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
 export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",