kelt-ui-kit-react 2.1.2 → 2.1.4

package/dist/tabs/Tabs.d.ts

@@ -15,4 +15,4 @@ export type TabsProps = {
     panelClassName?: string;
     keepMountedVisited?: boolean;
 };
-export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, keepMountedVisited, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, keepMountedVisited, }: TabsProps) => import('react/jsx-runtime').JSX.Element;

package/dist/tabs/Tabs.view.d.ts

@@ -1 +1 @@
-export declare const TabsView: () => import("react/jsx-runtime").JSX.Element;
+export declare const TabsView: () => import('react/jsx-runtime').JSX.Element;

package/dist/toaster/store/useToasterStore.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ToasterPosition = "top-right" | "top-center" | "bottom-right" | "bottom-center";
 type ToasterState = {
     title: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "private": false,
   "repository": {
     "type": "git",
@@ -11,13 +11,13 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@types/node": "^22.5.5",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^5.2.0",
     "bootstrap-icons": "^1.11.3",
     "jwt-decode": "^4.0.0",
     "react-date-picker": "^11.0.0",
     "styled-components": "^6.1.13",
-    "vite": "^5.4.6",
-    "vite-plugin-dts": "^4.2.2",
+    "vite": "^8.3.4",
+    "vite-plugin-dts": "^5.1.2",
     "vite-plugin-eslint": "^1.8.1",
     "web-vitals": "^2.1.4",
     "zustand": "^5.0.5"
@@ -25,7 +25,7 @@
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2 || ^7.0.0"
   },
   "scripts": {
     "dev": "vite",
@@ -57,8 +57,11 @@
   },
   "devDependencies": {
     "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
-    "typescript": "^4.9.5",
-    "vite-plugin-checker": "^0.8.0"
+    "react-router-dom": "^7.18.4",
+    "typescript": "^5.9.3",
+    "vite-plugin-checker": "^0.14.5"
+  },
+  "overrides": {
+    "postcss": "^8.5.30"
   }
-}
+}

package/src/select/Select.tsx

@@ -5,6 +5,9 @@ import { OverlayPanel, PositionOverlay } from "../overlayPanel/OverlayPanel";
 import "./select.css";
 import { SelectOptionInterface } from "./selectOption.interface";
 
+// Nombre d'options rendues à l'ouverture puis à chaque fin de scroll
+const OPTIONS_PAGE_SIZE = 50;
+
 export interface SelectProps {
   id?: string;
   label?: string;
@@ -55,6 +58,7 @@ export const Select = ({
   const hasAutoOpened = useRef(false);
   const optionsListRef = useRef<HTMLDivElement | null>(null);
   const [search, setSearch] = useState("");
+  const [visibleCount, setVisibleCount] = useState(OPTIONS_PAGE_SIZE);
 
   useEffect(() => {
     if (!showOverlay) setSearch("");
@@ -68,6 +72,11 @@ export const Select = ({
     return options.filter((option) => normalize(option.label).includes(term));
   }, [options, search, searchable]);
 
+  const optionsByValue = useMemo(
+    () => new Map(options.map((option) => [option.value, option])),
+    [options],
+  );
+
   useEffect(() => {
     if (!showOverlay) return;
     const timer = setTimeout(() => {
@@ -95,15 +104,38 @@ export const Select = ({
         : [];
   const hasSelection = selectedValues.some((v) => v !== "");
 
+  // Rendu progressif : on repart d'une page à chaque ouverture ou recherche,
+  // en allant au moins jusqu'à l'option sélectionnée en sélection simple
+  useEffect(() => {
+    if (!showOverlay) return;
+    const selectedIndex = multiple
+      ? -1
+      : filteredOptions.findIndex((option) => option.value === selectedValues[0]);
+    setVisibleCount(Math.max(OPTIONS_PAGE_SIZE, selectedIndex + 1));
+    optionsListRef.current?.scrollTo({ top: 0 });
+  }, [showOverlay, search]);
+
+  const visibleOptions = filteredOptions.slice(0, visibleCount);
+
+  const handleOptionsScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (
+      visibleCount < filteredOptions.length &&
+      scrollHeight - scrollTop - clientHeight < 100
+    ) {
+      setVisibleCount((count) => count + OPTIONS_PAGE_SIZE);
+    }
+  };
+
   const getDisplayValue = () => {
     if (selectedValues.length === 0) return placeholder || "";
     if (multiple) {
       const labels = selectedValues
-        .map((v) => options.find((opt) => opt.value === v)?.label)
+        .map((v) => optionsByValue.get(v)?.label)
         .filter((l): l is string => !!l);
       return labels.join(", ");
     }
-    const selected = options.find((opt) => opt.value === selectedValues[0]);
+    const selected = optionsByValue.get(selectedValues[0]);
     return selected?.label || "";
   };
 
@@ -200,11 +232,15 @@ export const Select = ({
                   />
                 </div>
               )}
-              <div className="select-overlay-options" ref={optionsListRef}>
+              <div
+                className="select-overlay-options"
+                ref={optionsListRef}
+                onScroll={handleOptionsScroll}
+              >
                 {searchable && filteredOptions.length === 0 && (
                   <div className="select-overlay-empty">Aucun résultat</div>
                 )}
-                {filteredOptions.map((option) => (
+                {visibleOptions.map((option) => (
                   <div
                     key={option.value}
                     aria-valuetext={option.label}

package/tsconfig.docs.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "target": "es2020",
+    "moduleResolution": "bundler",
     "rootDir": ".",
     "noEmit": true
   },

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/App.menu.tsx","./src/App.routes.tsx","./src/App.tsx","./src/index.ts","./src/main.tsx","./src/_core/hooks/HistoryProvider.tsx","./src/_core/hooks/ImageChecker.tsx","./src/_core/hooks/imageExist.tsx","./src/_core/hooks/isEAN13.tsx","./src/_core/hooks/objectToQueryParams.tsx","./src/_core/hooks/useCurrency.tsx","./src/_core/hooks/useDateutils.ts","./src/_core/hooks/useIsMobile.ts","./src/_core/hooks/useToken.tsx","./src/_core/hooks/useValidate.tsx","./src/_core/hooks/widgetSupport.tsx","./src/_core/type/generiqueType.tsx","./src/action/Action.view.tsx","./src/action/ButtonAction.tsx","./src/addressSearch/AddressSearch.tsx","./src/addressSearch/AddressSearch.view.tsx","./src/badge/Badge.tsx","./src/badge/Badge.view.tsx","./src/button/Button.tsx","./src/button/Button.view.tsx","./src/button/button.interface.tsx","./src/button/buttonActions/ButtonActions.tsx","./src/button/buttonFile/ButtonFile.tsx","./src/button/buttonFile/ButtonFile.view.tsx","./src/button/buttonFilters/ButtonFilters.tsx","./src/button/buttonImport/ButtonImport.tsx","./src/button/buttonImport/ButtonImport.view.tsx","./src/card/Card.tsx","./src/card/Card.view.tsx","./src/card/card.interface.tsx","./src/card/cardAction.interface.tsx","./src/card/cardAction/CardAction.tsx","./src/card/hook/useCardInteractions.tsx","./src/carousel/Carousel.tsx","./src/carousel/Carousel.view.tsx","./src/damier/Damier.tsx","./src/damier/Damier.view.tsx","./src/damier/damierCell/DamierCell.tsx","./src/damier/damierCell/damierCell.interface.tsx","./src/dataTable/DataTable.tsx","./src/dataTable/DataTable.view.tsx","./src/dataTable/dataTable.interface.ts","./src/dataTable/dataTable.utils.ts","./src/dataTable/useDataTableState.tsx","./src/dataTable/dataTableActions/DataTableAction.tsx","./src/dataTable/dataTableActions/DataTableActionMenu.tsx","./src/dataTable/dataTableColumn/DataTableColumn.tsx","./src/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.tsx","./src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.tsx","./src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.tsx","./src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.tsx","./src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.tsx","./src/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.tsx","./src/dataTable/dataTableFilters/DataTableFilters.tsx","./src/dataTable/dataTableLoading/DataTableLoading.tsx","./src/dataTable/dataTableRow/DataTableRow.tsx","./src/datePicker/DatePicker.tsx","./src/datePicker/DatePicker.view.tsx","./src/docs/ComponentDocs.tsx","./src/docs/catalog.ts","./src/docs/documentation.types.ts","./src/docs/virtual.d.ts","./src/expands/Expands.tsx","./src/expands/Expands.view.tsx","./src/expands/expand/expand.interface.tsx","./src/expands/expand/expand.tsx","./src/filAriane/FilAriane.tsx","./src/filAriane/FilAriane.view.tsx","./src/filAriane/filAriane.interface.tsx","./src/form/Form.tsx","./src/form/Form.view.tsx","./src/form/form.enum.ts","./src/form/form.interface.tsx","./src/form/input/Input.tsx","./src/form/inputNumber/InputNumber.tsx","./src/form/inputNumber/InputNumber.view.tsx","./src/form/inputPrice/InputPrice.tsx","./src/form/inputPrice/InputPrice.view.tsx","./src/form/textArea/TextArea.tsx","./src/form/textArea/TextArea.view.tsx","./src/geocoding/GeocodingService.ts","./src/geocoding/geocoding.interface.ts","./src/grid/Grid.tsx","./src/grid/Grid.view.tsx","./src/grid/grid.interface.tsx","./src/grid/col/Col.tsx","./src/grid/col/colStyled/ColStyled.tsx","./src/grid/container/Container.tsx","./src/grid/row/Row.tsx","./src/header/Header.tsx","./src/header/Header.view.tsx","./src/header/header.interface.tsx","./src/home/Home.tsx","./src/icon/Icon.tsx","./src/icon/Icons.view.tsx","./src/icon/icon.interface.tsx","./src/icon/iconSize.enum.ts","./src/loader/Loader.tsx","./src/loader/Loader.view.tsx","./src/menus/Menus.tsx","./src/menus/Menus.view.tsx","./src/menus/menu/Menu.tsx","./src/menus/menu/menu.interface.tsx","./src/message/Message.tsx","./src/message/Message.view.tsx","./src/modal/Modal.tsx","./src/modal/Modal.view.tsx","./src/notFound/NotFound.tsx","./src/overlayPanel/OverlayPanel.tsx","./src/overlayPanel/OverlayPanel.view.tsx","./src/overlayPanel/overlay.context.tsx","./src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx","./src/pdfViewer/PdfViewer.tsx","./src/pdfViewer/PdfViewer.view.tsx","./src/quantity/Quantity.tsx","./src/quantity/Quantity.view.tsx","./src/search/Search.tsx","./src/search/Search.view.tsx","./src/select/Select.tsx","./src/select/Select.view.tsx","./src/select/selectOption.interface.ts","./src/sidebar/Sidebar.tsx","./src/sidebar/Sidebar.view.tsx","./src/sidebarData/SidebarData.tsx","./src/sidebarData/SidebarData.view.tsx","./src/tabs/Tabs.tsx","./src/tabs/Tabs.view.tsx","./src/toaster/Toaster.tsx","./src/toaster/Toaster.view.tsx","./src/toaster/store/useToasterStore.tsx"],"version":"5.9.3"}

package/vite.config.ts

@@ -18,9 +18,10 @@ export default defineConfig(({ command, mode }) => ({
       formats: ["es"], // Génère un module ES
       name: "kelt-ui-kit-react",
       fileName: "index",
+      cssFileName: "style",
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      external: [/^react(\/.*)?$/, /^react-dom(\/.*)?$/, "react-router", "react-router-dom"],
     },
   },
 }));