pentatrion-design 0.2.4 → 0.3.0

package/.editorconfig

@@ -0,0 +1,43 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+charset = utf-8
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.{js,ts,jsx,tsx}]
+indent_size = 2
+
+[*.vue]
+indent_size = 2
+
+[Makefile]
+indent_style = tab
+
+[docs/makefiles/*]
+indent_style = tab
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[.github/workflows/*.yml]
+indent_size = 2
+
+[{composer.json,composer.lock}]
+indent_size = 4
+
+[*.php]
+indent_size = 4
+
+[*.{css,scss}]
+indent_size = 2
+
+[*.json]
+indent_size = 2

package/.github/workflows/deploy-storybook.yml

@@ -0,0 +1,55 @@
+name: Deploy storybook
+
+on:
+  push:
+    branches: [gh-pages]
+
+permissions:
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+
+      - name: "Install JS dependencies"
+        run: "pnpm i --frozen-lockfile"
+
+      - name: Build storybook
+        run: pnpm run storybook-build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "storybook-static"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "arrowParens": "always",
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "useTabs": false,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "${workspaceFolder}/node_modules/.bin/storybook dev -p 6007",
+      "name": "pnpm run storybook",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,27 @@
+{
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,46 @@
+## 0.1.3
+
+autocomplete add autofocus option
+
+## 0.1.2
+
+fix file extension for imports and add tsc-alias
+
+## 0.0.14
+
+fix export .d.ts files
+
+## 0.0.13
+
+Pentatrion-design has its own repository !!
+
+## 0.0.12
+fix notificationsConsumer pointer event none
+
+## 0.0.11
+
+add input/button color
+fix notificationsProvider pointer event none
+
+## 0.0.10
+
+add textarea
+modal without size className for more flexibility
+tabs without border-radius for more flexibility
+
+## 0.0.9
+
+modal add ComponentProps to parent
+modal fix forwardRef to functional component
+
+## 0.0.8
+
+Range fix ComponentPropsWithRef import
+tsconfig remove extends from base
+
+## 0.0.3
+
+Range add component
+LinkButton add component
+fix Toggle cursor pointer
+ResizeArea add more Props

package/MIGRATION.md

@@ -0,0 +1,6 @@
+`text-xs` -> `text-body-xs`
+
+
+problème <Input range> -> hover scale
+
+problème input checkbox/radio hover state

package/README.md

@@ -6,7 +6,7 @@
 
 ## Prérequis
 
-Créez un nouveau projet Vite + React + TailwindCSS. [Official doc](https://tailwindcss.com/docs/guides/vite)
+Créez un nouveau projet Vite + React v19 + TailwindCSS v4. [Official doc](https://tailwindcss.com/docs/installation/using-vite)
 
 ```bash
 pnpm create vite my-app
@@ -16,115 +16,91 @@ pnpm create vite my-app
 
 cd my-app
 
-pnpm add -D tailwindcss postcss autoprefixer postcss-load-config prettier-plugin-tailwindcss
+# dépendances
+pnpm add -D tailwindcss @tailwindcss/vite prettier-plugin-tailwindcss
 
-# si vous utilisez le composant <input type="range" />
-pnpm add -D postcss-input-range
+pnpm add pentatrion-design
 ```
-
 Supprimer les fichiers inutiles
 
 ```
 .
-├── src
-│   ├── App.tsx
-│   ├── index.css
-│   ├── main.tsx
-│   └── vite-env.d.ts
-├── tailwind.config.js
-└── postcss.config.js
+└── src
+    ├── App.tsx
+    ├── index.css
+    ├── main.tsx
+    └── vite-env.d.ts
 ```
 
-Créer un fichier `tailwind.config.js` et `postcss.config.js`.
+Configuration de vite
 
-```js
-// tailwind.config.js
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import tailwindcss from "@tailwindcss/vite";
 
-/** @type {import('tailwindcss').Config} */
-const config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: ["class"],
-};
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+```
 
-export default config;
+Mettre à jour le fichier `src/index.css`
 
+```css
+/* src/index.css */
+@import "tailwindcss";
 
-// postcss.config.js
-/** @type {import("postcss-load-config").Config} */
-const config = {
-  plugins: {
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
+@source "./node_modules/pentatrion-design/dist/lib";
+@source "./node_modules/pentatrion-design/dist/components";
+@source "./node_modules/pentatrion-design/dist/hooks";
+@source "./node_modules/pentatrion-design/dist/redux";
 
-    // si vous utilisez le composant <input type="range" />
-    // bien le mettre en dernier car tailwind génère du contenu à transformer
-    "postcss-input-range": {}
-  },
-};
-export default config;
-```
+@import "pentatrion-design/tailwind/index.css";
 
-Mettre à jour le fichier `src/index.css`
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/**
- * ou bien on utilisera des imports pour faciliter l'intégration du design système
- */
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+/* facultatif */
+@import "pentatrion-design/tailwind/prose.css";
 ```
 
-```json
-// .prettierrc
-{
-  "plugins": ["prettier-plugin-tailwindcss"]
-}
-```
+si on désire plus de contrôle sur nos imports
 
-## Installation
+```css
+/* src/index.css */
+@import "tailwindcss";
 
+@source "./node_modules/pentatrion-design/dist/lib";
+@source "./node_modules/pentatrion-design/dist/components";
+@source "./node_modules/pentatrion-design/dist/hooks";
+@source "./node_modules/pentatrion-design/dist/redux";
 
-```bash
-pnpm add pentatrion-design
-```
+@import "pentatrion-design/tailwind/variants.css";
 
-Mettre à jour la configuration de tailwind.
+@import "pentatrion-design/tailwind/theme.css" layer(theme);
+@import "pentatrion-design/tailwind/base.css" layer(base);
 
-```diff
-// tailwind.config.js
-+ import { pentatrionTw } from "pentatrion-design/tailwind";
+@import "pentatrion-design/tailwind/components-input-outline.css" layer(components);
+@import "pentatrion-design/tailwind/components-range.css" layer(components);
+@import "pentatrion-design/tailwind/components-resize-area.css" layer(components);
+@import "pentatrion-design/tailwind/components-step.css" layer(components);
+@import "pentatrion-design/tailwind/components.css" layer(components);
 
-/** @type {import('tailwindcss').Config} */
-const config = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-+   "./node_modules/pentatrion-design/lib/**/*.js",
-+   "./node_modules/pentatrion-design/components/**/*.js",
-+   "./node_modules/pentatrion-design/hooks/**/*.js",
-+   "./node_modules/pentatrion-design/redux/**/*.js",
-  ],
-  darkMode: ["class"],
-+  plugins: [pentatrionTw()],
-};
+@import "pentatrion-design/tailwind/utilities.css";
+@import "pentatrion-design/tailwind/utilities-dialog.css" layer(utilities);
 
-export default config;
+@import "pentatrion-design/tailwind/prose.css";
+```
 
+```json
+// .prettierrc
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
 ```
 
 La dépendance `pentatrion-fonts` est optionnelle.
 
 Mettre à jour `src/App.tsx`
 ```tsx
-// import global
-import { Button } from "pentatrion-design";
-
-// import minimal
-import { Button } from "pentatrion-design/components/button";
+import { Button } from "pentatrion-design/button";
 
 import { useState } from "react"
 
@@ -143,25 +119,42 @@ function App() {
 export default App
 ```
 
-L'import minimal `import { Button } from "pentatrion-design/components/button";` est plus contraignant et n'est pas nécessaire si votre projet utilise toutes les dépendances de `pentatrion-design`. si par contre votre projet n'utilise que certains composants et n'utilise pas certains dépendances comme `react-sortablejs` il vaut mieux utiliser l'import `pentatrion-design/components/button`. Cela allégera le build (que notre compilateur fasse du tree shaking ou non).
+## VsCode
 
-## projet sans TypeScript
 
-pour faciliter l'expérience de développement, `pentatrion-design` fait référence par défaut aux fichiers TypeScript non compilés. Si votre projet n'utilise pas TypeScript il faudra faire référence au dossier `dist`
+Create a `.vscode/settings.json` file
 
-```js
-import { Button } from "pentatrion-design/dist";
+```json
+{
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
+}
 ```
 
-## VsCode
+## Développement avec watch
 
+anciennement dans le `package.json`. plus nécessaire pour le moment
 
-Create a `.vscode/settings.json` file
+```json
+{
+  "scripts": {
+    "dev:tsc": "tsc -w -p tsconfig.build.json",
+    "dev:alias": "tsc-alias -w -p tsconfig.build.json",
+    "dev": "run-p dev:tsc dev:alias",
+  }
+}
+```
+
+## Inclure le design-system dans un autre projet sans dépendance npm
 
+fichier `tsconfig.json`.
 ```json
 {
-  "files.associations": {
-    "*.css": "tailwindcss"
+  "compilerOptions": {
+    "paths": {
+      "pentatrion-design/*": ["./*"]
+    },
   }
 }
 ```

package/bin/change-version-and-publish.sh

@@ -0,0 +1,43 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$(dirname "$(readlink -f "$BASH_SOURCE")")"
+PROJECT_DIR="$(dirname "$SCRIPT_DIR")"
+
+set -e
+
+cd "$PROJECT_DIR"
+
+# Make sure the working directory is clear.
+if [[ ! -z "$(git status --porcelain)" ]]
+then
+    echo "Your working directory is dirty. Did you forget to commit your changes?"
+    exit 1
+fi
+
+VERSION_TYPE="$1"
+
+if [[ "$VERSION_TYPE" != "patch" && "$VERSION_TYPE" != "minor" && "$VERSION_TYPE" != "major" ]]; then
+  echo "Error version type must be 'patch', 'minor' or 'major'."
+  exit 1
+fi
+
+# vX.Y.Z
+VERSION=$(npm --no-git-tag-version --allow-same-version version $VERSION_TYPE)
+
+# we remove the v
+VERSION=${VERSION:1}
+
+
+pnpm build-for-publication
+
+git add .
+git commit -m "change pentatrion-design version v$VERSION"
+
+git tag -a "v$VERSION" -m "v$VERSION"
+
+git push origin
+
+cd "$PROJECT_DIR/dist"
+
+pnpm publish
+

package/dist/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode, ComponentProps, RefObject } from "react";
+import type { OptionLike, Option } from "../select/index.js";
+import { AutocompleteOptionProps } from "./AutocompleteOption.js";
+import { Placement } from "@floating-ui/react";
+import { ThemeColor } from "../../types.js";
+export interface AutocompleteProps<O extends OptionLike = Option> extends ComponentProps<"input"> {
+    icon?: boolean | ReactNode;
+    color?: ThemeColor;
+    /**
+     * render suffix only if selection and searchValue is empty
+     */
+    noSearchSuffix?: ReactNode;
+    suffix?: ReactNode;
+    placement?: Placement;
+    /**
+     * search string used as value for <input>
+     */
+    searchValue: string;
+    /**
+     * change handler when typing in the input
+     * or when clicking on an option (the label value is passed)
+     */
+    onChangeSearchValue: (value: string, selectionLabel: boolean) => void;
+    selection?: O | null;
+    /**
+     * select handler for a selection from the autocomplete's dropdown
+     * the option object is passed when clicking on an option
+     * null value is passed when typing a new character in the input search.
+     */
+    onChangeSelection: (option: O | null) => void;
+    options: O[];
+    autocompleteOptionComponent?: (props: AutocompleteOptionProps<O>) => ReactNode;
+    loading?: boolean;
+    clearSearchButton?: boolean;
+    selectOnFocus?: boolean;
+    ref?: RefObject<HTMLInputElement>;
+}
+export declare function Autocomplete<O extends OptionLike = Option>({ className, autoFocus, icon, color, noSearchSuffix, suffix, placement, placeholder, selection, onChangeSelection, autocompleteOptionComponent, loading, clearSearchButton, searchValue, onChangeSearchValue, options, selectOnFocus, readOnly, ref, ...rest }: AutocompleteProps<O>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/components/autocomplete/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,SAAS,EACT,cAAc,EAEd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAIL,SAAS,EAUV,MAAM,oBAAoB,CAAC;AAU5B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,UAAU,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC/F,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE3B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtE,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACrB;;;;OAIG;IACH,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb,2BAA2B,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAE/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,UAAU,GAAG,MAAM,EAAE,EAC1D,SAAS,EACT,SAAiB,EACjB,IAAW,EACX,KAAgB,EAChB,cAAc,EACd,MAAM,EACN,SAAoB,EACpB,WAAyB,EACzB,SAAgB,EAChB,iBAAiB,EACjB,2BAA2B,EAC3B,OAAe,EACf,iBAAyB,EACzB,WAAW,EACX,mBAAmB,EACnB,OAAO,EACP,aAAoB,EACpB,QAAgB,EAChB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAyNtB"}

package/dist/components/autocomplete/Autocomplete.js

@@ -0,0 +1,134 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, } from "react";
+import { AutocompleteOption } from "./AutocompleteOption.js";
+import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, } from "@floating-ui/react";
+import { AutocompleteContext } from "./useAutocompleteContext.js";
+import clsx from "clsx";
+import { useEffectEvent } from "../../hooks/index.js";
+import { getOptionLabel, getOptionValue } from "./util.js";
+import { Button } from "../button/index.js";
+import { Dialog } from "../dialog/index.js";
+import { Loader } from "../loader/index.js";
+import { inputConfig, sizeVariant } from "../input/Input.js";
+export function Autocomplete({ className, autoFocus = false, icon = true, color = "yellow", noSearchSuffix, suffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, ref, ...rest }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const onChangeSearchValueStable = useEffectEvent(onChangeSearchValue);
+    const onChangeSelectionStable = useEffectEvent(onChangeSelection);
+    const OptionComponent = autocompleteOptionComponent ?? AutocompleteOption;
+    const listRef = useRef([]);
+    const { refs, floatingStyles, context } = useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(5),
+            flip({ padding: 10 }),
+            size({
+                apply({ rects, elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        width: `${Math.max(130, rects.reference.width)}px`,
+                    });
+                    const firstChild = elements.floating.firstElementChild;
+                    if (firstChild) {
+                        firstChild.style.maxHeight = `${Math.min(availableHeight, 288)}px`;
+                    }
+                },
+                padding: 10,
+            }),
+        ],
+    });
+    const role = useRole(context, { role: "listbox" });
+    const dismiss = useDismiss(context);
+    const listNav = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        /* we want the real focus to stay on the input, so focus associated to active items is simulated */
+        virtual: true,
+        loop: true,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        role,
+        dismiss,
+        listNav,
+    ]);
+    function handleChangeSearchValue(e) {
+        const value = e.target.value;
+        onChangeSearchValueStable(value, false);
+        if (value !== searchValue && selection !== null) {
+            onChangeSelectionStable(null);
+            setActiveIndex(null);
+            return;
+        }
+        if (value) {
+            setIsOpen(true);
+            /**
+             * bug whith LazyAutocomplete activeIndex is set to 0 but the options array has immediately 0 elements
+             * so focus can't be set to the first Dom element.
+             */
+            setActiveIndex(listRef.current[0] ? 0 : null);
+        }
+        else {
+            setIsOpen(false);
+            setActiveIndex(null);
+        }
+    }
+    const handleSelect = useCallback((index) => {
+        if (index === null) {
+            onChangeSelectionStable(null);
+        }
+        else if (options[index]) {
+            const newSelection = options[index];
+            onChangeSelectionStable(newSelection);
+            onChangeSearchValueStable(getOptionLabel(newSelection), true);
+        }
+        setActiveIndex(null);
+        setIsOpen(false);
+    }, [options, onChangeSelectionStable, onChangeSearchValueStable]);
+    const autocompleteContext = useMemo(() => ({
+        activeIndex,
+        selection,
+        getItemProps,
+        handleSelect,
+    }), [activeIndex, selection, getItemProps, handleSelect]);
+    const showClearSearchButton = clearSearchButton && (searchValue.trim() !== "" || selection !== null);
+    return (_jsxs("div", { className: className, role: "combobox", children: [_jsxs("div", { className: clsx(inputConfig.container, sizeVariant.medium, readOnly && "readonly"), ref: refs.setReference, "data-color": color, children: [icon !== false && (_jsx("div", { className: "flex-center relative", children: _jsx(Loader, { loading: loading, size: "input", color: "gray", className: "mr-2", children: icon === true ? _jsx("i", { className: "fe-search text-body-md" }) : icon }) })), _jsx("input", { autoComplete: "off", autoFocus: autoFocus, spellCheck: "false", className: clsx(inputConfig.input, icon === false && "pl-4"), ref: ref, type: "search", readOnly: readOnly, value: searchValue, placeholder: placeholder, "aria-autocomplete": "list", ...getReferenceProps({
+                            onClick() {
+                                if (selectOnFocus) {
+                                    // it's better to listen onClick instead of onFocus. the event is triggered later and there
+                                    // was an issue if we listen on onFocus and user click on the text of the textarea with Firefox
+                                    document.activeElement?.select();
+                                }
+                            },
+                            onChange: handleChangeSearchValue,
+                            onMouseDown() {
+                                if (options.length === 0) {
+                                    return;
+                                }
+                                /**
+                                 * There is a already selection
+                                 * and the only element available is the selection,
+                                 * no need to display the dropdown.
+                                 */
+                                // if (options.length === 1 && options[0].value === selection?.value) {
+                                //   return;
+                                // }
+                                setIsOpen((isOpen) => !isOpen);
+                            },
+                            onKeyDown(e) {
+                                if (e.key === "Enter" && activeIndex != null) {
+                                    handleSelect(activeIndex);
+                                }
+                            },
+                        }), ...rest }), _jsxs("div", { className: "flex-center relative", children: [suffix, showClearSearchButton && (_jsx(Button, { size: "input", type: "button", withRipple: false, icon: true, color: "gray", variant: "text", onClick: () => {
+                                    setIsOpen(false);
+                                    onChangeSelectionStable(null);
+                                    setActiveIndex(null);
+                                    onChangeSearchValueStable("", true);
+                                }, children: _jsx("i", { className: "fe-cancel" }) })), icon === false && loading && _jsx(Loader, { size: "medium", color: "gray" }), !selection && searchValue === "" && noSearchSuffix] })] }), _jsx(FloatingPortal, { children: _jsx(AutocompleteContext.Provider, { value: autocompleteContext, children: isOpen && (_jsx(FloatingFocusManager, { disabled: selectOnFocus, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("div", { className: "z-dialog outline-hidden", ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: _jsx(Dialog, { placement: context.placement, className: "motion-safe:animate-fade-in-list overflow-auto", children: _jsx(FloatingList, { elementsRef: listRef, children: options.map((option) => {
+                                        return _createElement(OptionComponent, { ...option, key: getOptionValue(option) });
+                                    }) }) }) }) })) }) })] }));
+}

package/dist/components/autocomplete/AutocompleteOption.d.ts

@@ -0,0 +1,4 @@
+import { OptionLike } from "../select/index.js";
+export type AutocompleteOptionProps<O extends OptionLike> = O;
+export declare const AutocompleteOption: import("react").MemoExoticComponent<(<O extends OptionLike>(props: AutocompleteOptionProps<O>) => import("react/jsx-runtime").JSX.Element)>;
+//# sourceMappingURL=AutocompleteOption.d.ts.map

package/dist/components/autocomplete/AutocompleteOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteOption.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/AutocompleteOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAMvC,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,CAAC;AAE9D,eAAO,MAAM,kBAAkB,wCAAoC,CAAC,SAAS,UAAU,SAC9E,uBAAuB,CAAC,CAAC,CAAC,8CAyBjC,CAAC"}