kelt-ui-kit-react 1.8.5 → 1.9.0

package/dist/damier/Damier.view.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../button/Button";
+import { Damier } from "./Damier";
+export var DamierView = function () {
+    var _a = useState(1), page = _a[0], setPage = _a[1];
+    var items = [
+        {
+            position: 2,
+            child: _jsx("div", { children: "2" }),
+        },
+        {
+            position: 12,
+            child: _jsx("div", { children: "12" }),
+        },
+        {
+            position: 83,
+            child: _jsx("div", { children: "82" }),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: function () { return setPage(page - 1); }, title: "previous" }), _jsx(Button, { onClick: function () { return setPage(page + 1); }, title: "next" }), _jsx(Damier, { damierCells: items, page: page })] }));
+};

package/dist/damier/damierCell/DamierCell.js

@@ -0,0 +1,21 @@
+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";
+export var DamierCell = function (_a) {
+    var cell = _a.cell, onClick = _a.onClick;
+    var handleClick = function () {
+        if (onClick) {
+            onClick(cell);
+        }
+    };
+    return (_jsx("div", __assign({ className: "cell", onClick: handleClick }, { children: cell.child })));
+};

package/dist/damier/damierCell/damierCell.interface.js

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

package/dist/dataTable/DataTable.js

@@ -0,0 +1,117 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { Input } from "../form/input/Input";
+import { Loader } from "../loader/Loader";
+import "./dataTable.css";
+import { DataTableAction } from "./dataTableActions/DataTableAction";
+import { DataTableColumn } from "./dataTableColumn/DataTableColumn";
+import { DataTableLoading } from "./dataTableLoading/DataTableLoading";
+import { DataTableRow } from "./dataTableRow/DataTableRow";
+export function DataTable(props) {
+    var id = props.id, name = props.name, className = props.className, children = props.children, element = props.element, _a = props.data, data = _a === void 0 ? [] : _a, _b = props.actions, actions = _b === void 0 ? [] : _b, _c = props.columns, columns = _c === void 0 ? [] : _c, loading = props.loading, onRowClick = props.onRowClick, onColumnClick = props.onColumnClick, onLoadMore = props.onLoadMore, emptyMessage = props.emptyMessage, hasMore = props.hasMore, onSelectionChange = props.onSelectionChange, _d = props.hideToggleAll, hideToggleAll = _d === void 0 ? false : _d, _e = props.limitSelect, limitSelect = _e === void 0 ? undefined : _e, getRowId = props.getRowId;
+    var loaderRef = useRef(null);
+    var _f = useState(new Set()), selectedRowIds = _f[0], setSelectedRowIds = _f[1];
+    var isInteractiveClick = useCallback(function (target) {
+        var element = target instanceof Element
+            ? target
+            : target instanceof Node
+                ? target.parentElement
+                : null;
+        if (!element) {
+            return false;
+        }
+        return Boolean(element.closest("input,button,a,select,textarea,label,option,[role='button'],[role='checkbox'],[role='option'],[contenteditable='true'],[data-stop-row-click='true']"));
+    }, []);
+    var toggleSelectAll = useCallback(function () {
+        if (selectedRowIds.size === data.length) {
+            setSelectedRowIds(new Set());
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
+        }
+        else {
+            var allIds = data.map(function (d) { var _a; return getRowId ? getRowId(d) : ((_a = d.id) !== null && _a !== void 0 ? _a : d); });
+            if (limitSelect && allIds.length > limitSelect) {
+                allIds = allIds.slice(0, limitSelect);
+            }
+            var newSelection_1 = new Set(allIds);
+            setSelectedRowIds(newSelection_1);
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(data.filter(function (d) { var _a; return newSelection_1.has(getRowId ? getRowId(d) : ((_a = d.id) !== null && _a !== void 0 ? _a : d)); }));
+        }
+    }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
+    var handleClickRow = useCallback(function (e, row) {
+        var _a, _b;
+        e.stopPropagation();
+        if (isInteractiveClick(e.target)) {
+            return;
+        }
+        var selectedText = typeof window !== "undefined"
+            ? (_b = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window)) === null || _b === void 0 ? void 0 : _b.toString().trim()
+            : "";
+        if (selectedText) {
+            return;
+        }
+        if (onRowClick) {
+            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+        }
+    }, [isInteractiveClick, onRowClick]);
+    var toggleRow = useCallback(function (e, row) {
+        var _a;
+        e.stopPropagation();
+        var rowId = getRowId ? getRowId(row) : ((_a = row.id) !== null && _a !== void 0 ? _a : row);
+        var newSelection = new Set(selectedRowIds);
+        if (newSelection.has(rowId)) {
+            newSelection.delete(rowId);
+        }
+        else {
+            if (limitSelect && newSelection.size >= limitSelect) {
+                // 🚫 limite atteinte
+                return;
+            }
+            newSelection.add(rowId);
+        }
+        setSelectedRowIds(newSelection);
+        var selectedItems = data.filter(function (d) { var _a; return newSelection.has(getRowId ? getRowId(d) : ((_a = d.id) !== null && _a !== void 0 ? _a : d)); });
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedItems);
+    }, [data, getRowId, limitSelect, onSelectionChange, selectedRowIds]);
+    useEffect(function () {
+        if (!onLoadMore || !hasMore)
+            return;
+        var observer = new IntersectionObserver(function (entries) {
+            if (entries[0].isIntersecting) {
+                onLoadMore();
+            }
+        }, {
+            root: null,
+            rootMargin: "0px",
+            threshold: 1.0,
+        });
+        if (loaderRef.current) {
+            observer.observe(loaderRef.current);
+        }
+        return function () {
+            if (loaderRef.current) {
+                observer.unobserve(loaderRef.current);
+            }
+        };
+    }, [onLoadMore, hasMore]);
+    return (_jsxs("div", __assign({ className: "data-table-container" }, { children: [name && _jsx("h2", __assign({ className: "mb-2" }, { children: name })), element, _jsxs("table", __assign({ className: "data-table ".concat(className ? className : ""), id: id }, { children: [_jsx("thead", { children: _jsxs("tr", { children: [onSelectionChange && (_jsx("th", __assign({ className: "select-cell ".concat(hideToggleAll ? "hidden" : ""), style: { width: "20px", textAlign: "center" } }, { children: _jsx(Input, { id: "select-th-".concat(id), name: "select-th-".concat(id), type: TypeInputEnum.CHECKBOX, checked: data.length > 0 && selectedRowIds.size === data.length, onChange: toggleSelectAll }) }))), columns.map(function (column, idx) { return (_jsx(DataTableColumn, { column: column, idx: idx, onColumnClick: onColumnClick }, idx)); }), actions.length > 0 && (_jsx("th", { style: {
+                                        width: "200px",
+                                    }, align: "right" }, "actions"))] }) }), _jsxs("tbody", { children: [loading ? (_jsx("tr", { children: _jsx("td", __assign({ align: "center", colSpan: columns.length + (actions.length > 0 ? 1 : 0) }, { children: _jsx("div", __assign({ className: "mt-3" }, { children: _jsx(Loader, { display: loading }) })) })) })) : (_jsx(_Fragment, {})), !loading &&
+                                data.map(function (row, rowIndex) {
+                                    var _a, _b;
+                                    return (_jsxs("tr", __assign({ className: rowIndex % 2 === 0 ? "even" : "odd", onClick: function (e) { return handleClickRow === null || handleClickRow === void 0 ? void 0 : handleClickRow(e, row); } }, { children: [onSelectionChange && (_jsx("td", __assign({ className: "select-cell", style: { textAlign: "center" }, onClick: function (e) { return e.stopPropagation(); } }, { children: _jsx(Input, { id: "select-row-".concat(rowIndex), name: "select-row-".concat(rowIndex), type: TypeInputEnum.CHECKBOX, disabled: limitSelect !== undefined &&
+                                                        selectedRowIds.size >= limitSelect &&
+                                                        !selectedRowIds.has(getRowId ? getRowId(row) : ((_a = row.id) !== null && _a !== void 0 ? _a : row)), checked: selectedRowIds.has(getRowId ? getRowId(row) : ((_b = row.id) !== null && _b !== void 0 ? _b : row)), onChange: function (e) { return toggleRow(e, row); } }) }))), columns.map(function (column, idx) { return (_jsx(DataTableRow, { column: column, idx: idx, row: row }, idx)); }), actions.length > 0 && (_jsx("td", __assign({ align: "right", onClick: function (e) { return e.stopPropagation(); } }, { children: _jsx("div", __assign({ className: "d-flex align-items-center justify-content-end" }, { children: actions.map(function (action, index) { return (_jsx(DataTableAction, { action: action, row: row, index: index }, index)); }) })) })))] }), rowIndex));
+                                }), !loading && data.length === 0 && (_jsx(DataTableLoading, { columns: columns, actions: actions, emptyMessage: emptyMessage }))] })] })), children, hasMore && (_jsx("div", __assign({ ref: loaderRef, className: "infinite-scroll-loader" }, { children: _jsx(Loader, { display: true }) })))] })));
+}

package/dist/dataTable/DataTable.view.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DataTable } from "./DataTable";
+export var DataTableView = function () {
+    var dataTableColumns = useMemo(function () {
+        return [
+            { id: "id", label: "ID", minWidth: 50, type: "number" },
+            {
+                id: "name",
+                label: "Name",
+                minWidth: 100,
+                editable: true,
+                type: "text",
+            },
+            { id: "age", label: "Age", minWidth: 50, type: "number" },
+        ];
+    }, []);
+    var data = useMemo(function () {
+        return [
+            { id: 1, name: "John Doe", age: 28 },
+            { id: 2, name: "Jane Smith", age: 34 },
+            { id: 3, name: "Alice Johnson", age: 45 },
+        ];
+    }, []);
+    var actions = useMemo(function () {
+        return [
+            {
+                id: "edit",
+                label: "Edit",
+                type: "button",
+                onClick: function (row) {
+                    console.log("Edit action clicked for row:", row);
+                },
+            },
+            {
+                id: "delete",
+                label: "Delete",
+                type: "button",
+                onClick: function (row) {
+                    console.log("Delete action clicked for row:", row);
+                },
+            },
+        ];
+    }, []);
+    return (_jsx(DataTable, { data: data, actions: actions, columns: dataTableColumns, id: "datatable-example", name: "DataTable", onSelectionChange: function (selectedRows) {
+            console.log("Selected Rows: ", selectedRows);
+        } }));
+};

package/dist/dataTable/dataTable.interface.d.ts

@@ -19,7 +19,10 @@ export interface dataTableColumnsInterface<T> {
     onEdit?: (value: any, row: T) => void;
     onDisable?: (row: T) => boolean;
     onRowStyle?: (row: T) => React.CSSProperties;
-    type: HTMLInputTypeAttribute | "select";
+    type: HTMLInputTypeAttribute | "select" | "image";
+    imageAlt?: (row: T) => string;
+    imageStyle?: React.CSSProperties;
+    imageSrc?: (row: T) => string;
 }
 export interface dataTableActionsInterface<T> {
     id: string;

package/dist/dataTable/dataTable.interface.js

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

package/dist/dataTable/dataTableActions/DataTableAction.js

@@ -0,0 +1,26 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../button/Button";
+import { Icon } from "../../icon/Icon";
+export var DataTableAction = function (_a) {
+    var _b;
+    var action = _a.action, row = _a.row, index = _a.index;
+    var title = action.label;
+    var display = action.shouldDisplay ? action.shouldDisplay(row) : true;
+    if (!display)
+        return null;
+    if (action.labelButton) {
+        title = action.labelButton ? action.labelButton(row) : action.label;
+    }
+    return (_jsxs(_Fragment, { children: [action.type === "button" && (_jsx(Button, { title: title, onClick: function () { return action.onClick(row); }, disabled: action.disabled, className: "data-table-action button--tertiary mr-2 w-100 ".concat(action.classIcon ? action.classIcon : "") }, "button-action-".concat(action.id, "-").concat(index))), action.type === "icon" && (_jsx("div", __assign({ className: "mr-2 ", onClick: function () { return action.onClick(row); } }, { children: _jsx(Icon, { classIcon: (_b = action.classIcon) !== null && _b !== void 0 ? _b : "" }, action.id) }), "icon-action-".concat(action.id, "-").concat(index)))] }));
+};

package/dist/dataTable/dataTableColumn/DataTableColumn.js

@@ -0,0 +1,21 @@
+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";
+export var DataTableColumn = function (_a) {
+    var column = _a.column, idx = _a.idx, onColumnClick = _a.onColumnClick;
+    return (_jsx("th", __assign({ style: {
+            minWidth: column.minWidth,
+            maxWidth: column.maxWidth,
+            width: column.width,
+            textAlign: column.align || "left",
+        }, onClick: function () { return onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(column); } }, { children: column.label }), "colonne-".concat(column.id, "-").concat(idx)));
+};

package/dist/dataTable/dataTableLoading/DataTableLoading.js

@@ -0,0 +1,16 @@
+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";
+export var DataTableLoading = function (_a) {
+    var columns = _a.columns, actions = _a.actions, emptyMessage = _a.emptyMessage;
+    return (_jsx("tr", { children: _jsx("td", __assign({ align: "center", colSpan: columns.length + (actions.length > 0 ? 1 : 0) }, { children: _jsx("div", __assign({ className: "mt-3" }, { children: emptyMessage || "Aucune donnée disponible" })) })) }));
+};

package/dist/dataTable/dataTableRow/DataTableRow.js

@@ -0,0 +1,39 @@
+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 { Icon } from "../..";
+import { Select } from "../../select/Select";
+export var DataTableRow = function (_a) {
+    var _b, _c, _d;
+    var column = _a.column, idx = _a.idx, row = _a.row;
+    var value = row[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
+    var style = column.onRowStyle ? column.onRowStyle(row) : {};
+    var isDisabled = (_c = (_b = column.onDisable) === null || _b === void 0 ? void 0 : _b.call(column, row)) !== null && _c !== void 0 ? _c : false;
+    return (_jsx("td", __assign({ className: "".concat(isDisabled ? "disabled" : ""), style: __assign({ minWidth: column.minWidth, textAlign: column.align || "left", maxWidth: column.maxWidth, width: column.width }, style) }, { children: column.type === "image" ? (value ? (_jsx("img", { src: column.imageSrc ? column.imageSrc(row) : "", alt: column.imageAlt ? column.imageAlt(row) : "", style: column.imageStyle })) : (_jsx(Icon, { classIcon: "bi-image" }))) : column.editable ? (column.type === "select" ? (_jsx("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: _jsx(Select, { style: {
+                    minWidth: column.minWidth,
+                    maxWidth: column.maxWidth,
+                    width: column.width,
+                }, options: (_d = column.options) !== null && _d !== void 0 ? _d : [], value: value, onChange: function (e) {
+                    if (column.onEdit) {
+                        column.onEdit(e, row);
+                    }
+                } }) }))) : (_jsx("input", { type: column.type, value: value, step: "0.01", style: {
+                textAlign: column.align || "left",
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                width: column.width,
+            }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
+                if (column.onEdit) {
+                    column.onEdit(e.target.value, row);
+                }
+            } }))) : column.format ? (column.format(value)) : (value) }), "row-".concat(column.id, "-").concat(idx)));
+};

package/dist/datePicker/DatePicker.js

@@ -0,0 +1,64 @@
+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, useEffect, useRef, useState } from "react";
+import Calendar from "react-calendar";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./datePicker.css"; // Assuming you have some styles for the DatePicker
+export var DatePicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange, maxDate = _a.maxDate, children = _a.children;
+    var _b = useState(value !== null && value !== void 0 ? value : new Date()), dateCalendar = _b[0], setDateCalendar = _b[1];
+    var _c = useState(false), showCalendar = _c[0], setShowCalendar = _c[1];
+    var calendarRef = useRef(null);
+    var handleChange = useCallback(function (val) {
+        setDateCalendar(val);
+        if (onChange) {
+            onChange(val);
+        }
+        setShowCalendar(false);
+    }, [onChange]);
+    var toggleCalendar = function () { return setShowCalendar(!showCalendar); };
+    var handleClickOutside = useCallback(function (event) {
+        if (calendarRef.current &&
+            !calendarRef.current.contains(event.target)) {
+            setShowCalendar(false);
+        }
+    }, []);
+    useEffect(function () {
+        if (showCalendar) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        // Nettoyage
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [showCalendar, handleClickOutside]);
+    var _d = useState(), currentMonth = _d[0], setCurrentMonth = _d[1];
+    var handleActiveStartDateChange = function (_a) {
+        var activeStartDate = _a.activeStartDate;
+        setCurrentMonth(activeStartDate);
+    };
+    return (_jsx("div", { children: _jsxs("div", __assign({ className: "calendar", ref: calendarRef }, { children: [children && _jsx("div", __assign({ onClick: toggleCalendar }, { children: children })), !children && (_jsx("button", __assign({ className: "calendar-button", onClick: toggleCalendar }, { children: _jsx(Icon, { classIcon: " bi-calendar4-event", size: IconSizeEnum.EXTRA_LARGE }) }))), showCalendar && (_jsxs("div", __assign({ className: "calendar-popup" }, { children: [_jsx("div", __assign({ onClick: function () { return setShowCalendar(false); }, className: "calendar-popup-close" }, { children: _jsx(Icon, { classIcon: "bi-x-lg close-icon", size: IconSizeEnum.EXTRA_SMALL }) })), _jsx(Calendar, { onActiveStartDateChange: handleActiveStartDateChange, maxDate: maxDate !== null && maxDate !== void 0 ? maxDate : new Date(), onChange: handleChange, value: dateCalendar, tileClassName: function (_a) {
+                                var day = _a.date, view = _a.view;
+                                if (view === "month" && currentMonth) {
+                                    var curr = currentMonth;
+                                    return day.getMonth() !== (curr === null || curr === void 0 ? void 0 : curr.getMonth())
+                                        ? "out-of-month"
+                                        : null;
+                                }
+                                return null;
+                            } })] })))] })) }));
+};

package/dist/datePicker/DatePicker.view.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker } from "./DatePicker";
+export var DatePickerView = function () {
+    return (_jsx("div", { children: _jsx(DatePicker, {}) }));
+};

package/dist/expands/Expands.js

@@ -0,0 +1,28 @@
+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 { useCallback, useEffect, useState } from "react";
+import { Expand } from "./expand/expand";
+import "./expands.css";
+export var Expands = function (props) {
+    var _a = useState(), currentExpand = _a[0], setCurrentExpand = _a[1];
+    var onChangeExpand = useCallback(function (item) {
+        if (props.onChange) {
+            props.onChange(item);
+        }
+        setCurrentExpand(item);
+    }, [setCurrentExpand, props.onChange]);
+    useEffect(function () {
+        setCurrentExpand(props.currentItem);
+    }, [props.currentItem, setCurrentExpand, document.activeElement]);
+    return (_jsx("div", __assign({ className: "expands ".concat(props.className || "") }, { children: props.items.map(function (item) { return (_jsx(Expand, { item: item, showArrow: props.showArrow, onChange: onChangeExpand, currentExpand: currentExpand }, item.id)); }) })));
+};

package/dist/expands/Expands.view.js

@@ -0,0 +1,67 @@
+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, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../button/Button";
+import { Search } from "../search/Search";
+import { Expands } from "./Expands";
+export var ExpandsView = function () {
+    var searchRef = useRef(null);
+    var _a = useState(2), currentId = _a[0], setCurrentId = _a[1];
+    var handleRefocus = function () {
+        var _a;
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focusInitialElement();
+    };
+    var mockItems = useMemo(function () { return [
+        {
+            id: 1,
+            title: "Client",
+            description: "Description 1",
+            headerContent: currentId === 1 && (_jsx(Search, { ref: searchRef, focus: true })),
+            footer: _jsx("button", { children: "Valider" }),
+        },
+        {
+            id: 2,
+            title: "Produits",
+            description: "Description 2",
+            headerContent: currentId === 2 && (_jsx(Search, { ref: searchRef, focus: true })),
+            content: (_jsx(Button, { title: "Go to produits", onClick: function () { return setCurrentId(3); } })),
+        },
+        {
+            id: 3,
+            title: "Total",
+            description: "Description 3",
+        },
+    ]; }, [currentId]);
+    var _b = useState(mockItems[0]), currentItem = _b[0], setCurrentItem = _b[1];
+    useEffect(function () {
+        setTimeout(function () {
+            var _a;
+            (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focusInitialElement();
+        }, 0);
+    }, [searchRef, currentItem]);
+    useEffect(function () {
+        var item = mockItems.find(function (item) { return item.id === currentId; });
+        if (item) {
+            setCurrentItem(item);
+        }
+    }, [currentId, setCurrentItem]);
+    var goToProduits = useCallback(function () {
+        setCurrentItem(mockItems[2]);
+    }, [setCurrentItem]);
+    var onChange = useCallback(function (item) {
+        if (item.id) {
+            setCurrentId(item.id);
+        }
+    }, [setCurrentId]);
+    return (_jsxs("div", __assign({ className: "d-flex flex-column", style: { height: "100%" } }, { children: [_jsxs("div", __assign({ className: "mb-2" }, { children: [_jsx(Button, { title: "Go to produits", onClick: goToProduits }), _jsx(Button, { onClick: handleRefocus, title: "Re-focus" })] })), _jsxs("div", __assign({ className: "flex-1" }, { children: [_jsx(Expands, { onChange: onChange, currentItem: currentItem, items: mockItems }), ";"] }))] })));
+};

package/dist/expands/expand/expand.interface.js

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

package/dist/expands/expand/expand.js

@@ -0,0 +1,40 @@
+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, useEffect, useState } from "react";
+import { Icon } from "../../icon/Icon";
+export var Expand = function (_a) {
+    var currentExpand = _a.currentExpand, item = _a.item, className = _a.className, _b = _a.showArrow, showArrow = _b === void 0 ? true : _b, onChange = _a.onChange;
+    var _c = useState(false), active = _c[0], setActive = _c[1];
+    useEffect(function () {
+        if (item && currentExpand) {
+            if (currentExpand.id === item.id) {
+                if (!active) {
+                    setActive(true);
+                }
+            }
+            else {
+                setActive(false);
+            }
+        }
+        else {
+            setActive(false);
+        }
+    }, [currentExpand, setActive, item]);
+    var handleChange = useCallback(function (e) {
+        e.stopPropagation();
+        if (onChange) {
+            onChange(item);
+        }
+    }, [onChange, item]);
+    return (_jsxs("div", __assign({ onClick: handleChange, className: "expand ".concat(active ? "expand--active" : "", " ").concat(className !== null && className !== void 0 ? className : "") }, { children: [_jsx("div", __assign({ className: "expand-header" }, { children: _jsx("div", __assign({ className: "expand-header-content" }, { children: _jsxs("div", __assign({ className: "expand-header-content-default" }, { children: [active && showArrow && (_jsx(Icon, { classIcon: "bi bi-chevron-down mr-2" })), !active && showArrow && (_jsx(Icon, { classIcon: "bi bi-chevron-right mr-2" })), _jsx("span", __assign({ className: "flex-1 expand-header-title-left" }, { children: item.title })), item.description && (_jsx("span", __assign({ className: "expand-header-title-right" }, { children: item.description })))] })) })) })), _jsxs("div", __assign({ className: "expand-body" }, { children: [_jsx("div", { children: item.headerContent }), item.content] })), item.footer && _jsx("div", __assign({ className: "expand-footer" }, { children: item.footer }))] })));
+};

package/dist/filAriane/FilAriane.js

@@ -0,0 +1,28 @@
+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 } from "react";
+import "./filAriane.css";
+export var FilAriane = function (_a) {
+    var filArianes = _a.filArianes, onClick = _a.onClick, currentFil = _a.currentFil, title = _a.title;
+    var handleClick = useCallback(function (e, fil) {
+        if (!(fil === null || fil === void 0 ? void 0 : fil.url)) {
+            e.preventDefault();
+        }
+        if (onClick) {
+            onClick(fil);
+        }
+    }, [onClick]);
+    return (_jsxs("div", __assign({ className: "filArianes" }, { children: [title && (_jsxs("small", __assign({ className: "filAriane font-weight-bold text-uppercase" }, { children: [title, " ", _jsx("i", { className: "filAriane-chevron bi bi-caret-right-fill" })] }))), filArianes === null || filArianes === void 0 ? void 0 : filArianes.map(function (filAriane, index) {
+                return (_jsxs("div", __assign({ className: "filAriane ".concat(filAriane.id === currentFil ? "filAriane--active" : "") }, { children: [_jsx("a", __assign({ href: filAriane.url || "#", onClick: function (e) { return handleClick(e, filAriane); } }, { children: filAriane.title })), !filAriane.isLast && (_jsx("i", { className: "filAriane-chevron bi bi-caret-right-fill" }))] }), index));
+            })] })));
+};

package/dist/filAriane/FilAriane.view.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FilAriane } from "./FilAriane";
+export var FilArianeView = function () {
+    var filArianes = [
+        {
+            id: 1,
+            title: "Home",
+            url: "/",
+            isCurrent: false,
+            isLast: false,
+        },
+        {
+            id: 2,
+            title: "Page",
+            url: "/page",
+            isCurrent: false,
+            isLast: false,
+        },
+        {
+            id: 3,
+            title: "Test",
+            url: "/page",
+            isCurrent: true,
+            isLast: true,
+        },
+    ];
+    return _jsx(FilAriane, { title: "test", filArianes: filArianes });
+};

package/dist/filAriane/filAriane.interface.js

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