allaw-ui 4.9.0 → 4.9.2

package/dist/components/atoms/buttons/FilterButtonPrimary.js

@@ -39,6 +39,7 @@ function FilterButtonPrimary(_a) {
             gap: "0.5rem",
             alignItems: "center",
             zIndex: zIndex,
+            fontFamily: "var(--font-open-sans)",
         }, onClick: function () { return onClick && onClick(); } }, props),
         React.createElement("i", { className: "allaw-icon-filter", style: { fontSize: "14px", color: "#25BEEB" } }),
         children));

package/dist/components/atoms/filters/SingleFilter.d.ts

@@ -1,16 +1,18 @@
 import React from "react";
 export type SingleFilterProps = {
-    defaultSelectedValue?: string;
+    defaultSelectedValue?: string | string[];
     filterData: {
         value: string;
         name: string;
     }[];
-    setFilter: (selectedValue: string) => void;
+    setFilter: (selectedValue: string | string[]) => void;
     children?: React.ReactNode;
     required?: boolean;
     showNumIndic?: boolean;
     showBackdrop?: boolean;
     isStatusTag?: boolean;
+    displaySelectedValue?: boolean;
+    multiSelect?: boolean;
 };
-declare const SingleFilter: ({ showNumIndic, required, defaultSelectedValue, filterData, setFilter, showBackdrop, children, ...props }: SingleFilterProps) => React.JSX.Element;
+declare const SingleFilter: ({ showNumIndic, required, defaultSelectedValue, filterData, setFilter, showBackdrop, children, displaySelectedValue, multiSelect, ...props }: SingleFilterProps) => React.JSX.Element;
 export default SingleFilter;

package/dist/components/atoms/filters/SingleFilter.js

@@ -20,20 +20,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import styles from "./SingleFilter.module.css";
 import { FilterButtonPrimary, PrimaryButton } from "../buttons";
 import { TinyInfo } from "../typography";
 import React, { useState, useEffect, useRef } from "react";
 var SingleFilter = function (_a) {
-    var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children"]);
-    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = useState(defaultSelectedValue || ""), selectedValue = _f[0], setSelectedValue = _f[1];
+    var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, _e = _a.displaySelectedValue, displaySelectedValue = _e === void 0 ? false : _e, _f = _a.multiSelect, multiSelect = _f === void 0 ? false : _f, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children", "displaySelectedValue", "multiSelect"]);
+    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = useState(defaultSelectedValue || (multiSelect ? [] : "")), selectedValue = _h[0], setSelectedValue = _h[1];
     var filterRef = useRef(null);
     useEffect(function () {
-        if (selectedValue) {
+        if (multiSelect
+            ? Array.isArray(selectedValue) && selectedValue.length > 0
+            : selectedValue) {
             setFilter(selectedValue);
         }
-    }, [selectedValue, setFilter]);
+    }, [selectedValue, setFilter, multiSelect]);
     useEffect(function () {
         var handleClickOutside = function (event) {
             if (filterRef.current &&
@@ -61,27 +72,61 @@ var SingleFilter = function (_a) {
     };
     var Item = function (_a) {
         var name = _a.name, value = _a.value;
-        return (React.createElement("button", { className: styles.item, onClick: function () {
+        var isSelected = multiSelect
+            ? Array.isArray(selectedValue) && selectedValue.includes(value)
+            : selectedValue === value;
+        var handleItemClick = function () {
+            if (multiSelect) {
+                var currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+                if (currentValues.includes(value)) {
+                    setSelectedValue(currentValues.filter(function (v) { return v !== value; }));
+                }
+                else {
+                    setSelectedValue(__spreadArray(__spreadArray([], currentValues, true), [value], false));
+                }
+            }
+            else {
                 setSelectedValue(value);
                 handleClose();
-            } },
+            }
+        };
+        return (React.createElement("button", { className: styles.item, onClick: handleItemClick },
             React.createElement("div", { className: styles.round },
-                React.createElement("div", { className: selectedValue === value ? styles.selected : styles.notSelected })),
+                React.createElement("div", { className: isSelected ? styles.selected : styles.notSelected })),
             React.createElement("span", null, name)));
     };
     var SmallItem = function (_a) {
         var name = _a.name, value = _a.value;
-        return (React.createElement("button", { className: styles.smallItem, onClick: function () {
+        var isSelected = multiSelect
+            ? Array.isArray(selectedValue) && selectedValue.includes(value)
+            : selectedValue === value;
+        var handleItemClick = function () {
+            if (multiSelect) {
+                var currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+                if (currentValues.includes(value)) {
+                    setSelectedValue(currentValues.filter(function (v) { return v !== value; }));
+                }
+                else {
+                    setSelectedValue(__spreadArray(__spreadArray([], currentValues, true), [value], false));
+                }
+            }
+            else {
                 setSelectedValue(value);
-            } },
+            }
+        };
+        return (React.createElement("button", { className: styles.smallItem, onClick: handleItemClick },
             React.createElement("div", { className: styles.round },
-                React.createElement("div", { className: selectedValue === value ? styles.selected : styles.notSelected })),
+                React.createElement("div", { className: isSelected ? styles.selected : styles.notSelected })),
             React.createElement("span", null, name)));
     };
     return (React.createElement("div", __assign({ className: styles.baseFilter, ref: filterRef }, props),
         React.createElement(FilterButtonPrimary, { onClick: handleButtonTap },
             children,
-            React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
+            React.createElement("p", { style: {
+                    color: "#25BEEB",
+                    fontWeight: "600",
+                    fontFamily: "var(--font-open-sans)",
+                } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
         isOpen && (React.createElement("div", { className: styles.options }, filterData &&
             filterData.length > 0 &&
             filterData.map(function (item, idx) { return (React.createElement(Item, { name: item.name, value: item.value, key: idx })); }))),

package/dist/components/atoms/filters/SingleFilter.stories.d.ts

@@ -4,4 +4,7 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
+export const WithDisplaySelectedValue: any;
+export const MultiSelectWithDisplaySelected: any;
+export const MultiSelectEmpty: any;
 import SingleFilter from "./SingleFilter";

package/dist/components/atoms/filters/SingleFilter.stories.js

@@ -18,7 +18,7 @@ export default {
 var Template = function (args) { return React.createElement(SingleFilter, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
-    defaultSelectedValue: "Option 1",
+    defaultSelectedValue: "option1",
     filterData: [
         { value: "option1", name: "Option 1" },
         { value: "option2", name: "Option 2" },
@@ -31,3 +31,54 @@ Default.args = {
     showBackdrop: true,
     isStatusTag: false,
 };
+export var WithDisplaySelectedValue = Template.bind({});
+WithDisplaySelectedValue.args = {
+    defaultSelectedValue: "option2",
+    filterData: [
+        { value: "option1", name: "Médecin généraliste" },
+        { value: "option2", name: "Cardiologue" },
+        { value: "option3", name: "Dermatologue" },
+    ],
+    setFilter: function (selectedValue) { return console.log("Selected value:", selectedValue); },
+    children: "Spécialité",
+    displaySelectedValue: true,
+    required: true,
+    showNumIndic: false,
+    showBackdrop: true,
+    isStatusTag: false,
+};
+export var MultiSelectWithDisplaySelected = Template.bind({});
+MultiSelectWithDisplaySelected.args = {
+    defaultSelectedValue: ["option1", "option3"],
+    filterData: [
+        { value: "option1", name: "Médecin généraliste" },
+        { value: "option2", name: "Cardiologue" },
+        { value: "option3", name: "Dermatologue" },
+        { value: "option4", name: "Pédiatre" },
+        { value: "option5", name: "Gynécologue" },
+    ],
+    setFilter: function (selectedValue) { return console.log("Selected values:", selectedValue); },
+    children: "Spécialités",
+    displaySelectedValue: true,
+    multiSelect: true,
+    required: true,
+    showNumIndic: true,
+    showBackdrop: true,
+    isStatusTag: false,
+};
+export var MultiSelectEmpty = Template.bind({});
+MultiSelectEmpty.args = {
+    filterData: [
+        { value: "option1", name: "Médecin généraliste" },
+        { value: "option2", name: "Cardiologue" },
+        { value: "option3", name: "Dermatologue" },
+    ],
+    setFilter: function (selectedValue) { return console.log("Selected values:", selectedValue); },
+    children: "Choisir spécialités",
+    displaySelectedValue: true,
+    multiSelect: true,
+    required: true,
+    showNumIndic: true,
+    showBackdrop: true,
+    isStatusTag: false,
+};

package/dist/styles/colors.css

@@ -35,4 +35,7 @@
   /* Background */
   --background-pro: #fcfdfd;
   --background-usager: #ffffff;
+
+  /* Fonts */
+  --font-open-sans: "Open Sans", "Helvetica Neue", Arial, sans-serif;
 }

package/dist/styles/global.css

@@ -3,7 +3,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
-/* @import "~typeface-open-sans/index.css"; */
+@import "~typeface-open-sans/index.css";
 @import "./colors.css";
 
 @import "./icons.css";

package/package.json

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