pentatrion-design 0.0.18 → 0.0.20

package/components/autocomplete/Autocomplete.js

@@ -96,8 +96,10 @@ export const Autocomplete = forwardRef(function Autocomplete({ className, icon =
     }), [activeIndex, selection, getItemProps, handleSelect]);
     const showClearSearchButton = clearSearchButton && (searchValue.trim() !== "" || selection !== null);
     return (_jsxs("div", { className: className, children: [_jsxs("div", { className: clsx(inputConfig.container, readOnly && "readonly"), ref: refs.setReference, "data-color": color, children: [icon !== false && (_jsxs("div", { className: "relative flex-center", children: [loading && _jsx(Loader, { size: "medium", color: "gray", className: "absolute left-0 top-0" }), icon === true ? (_jsx("span", { className: "h-8 w-8 flex-center", children: _jsx("i", { className: "fe-search" }) })) : (icon)] })), _jsx("input", { spellCheck: "false", className: clsx(inputConfig.input, icon === false && "pl-4"), ref: inputRef, type: "search", readOnly: readOnly, value: searchValue, placeholder: placeholder, "aria-autocomplete": "list", ...getReferenceProps({
-                            onFocus() {
+                            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();
                                 }
                             },

package/components/input/Input.js

@@ -9,7 +9,7 @@ export const Input = forwardRef(({ variant = "normal", color = "yellow", disable
     return (_jsxs("div", { "data-color": color, "data-variant": variant, className: clsx(inputConfig.container, disabled && "disabled", readOnly && "readonly", className), children: [prefix && (_jsx("div", { className: clsx([
                     "relative flex-center",
                     typeof prefix === "string" && "mx-2 select-none text-gray-6",
-                ]), children: prefix })), _jsx("input", { ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, onFocus: () => {
+                ]), children: prefix })), _jsx("input", { ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, onClick: () => {
                     if (readOnly) {
                         document.activeElement?.select();
                     }

package/components/textarea/Textarea.d.ts

@@ -1,7 +1,8 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import type { ThemeColor } from "../../types";
 export interface TextareaProps extends ComponentProps<"textarea"> {
     variant?: "normal" | "ghost";
     color?: ThemeColor;
+    action?: ReactNode;
 }
 export declare const Textarea: (props: TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;

package/components/textarea/Textarea.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
-export const Textarea = forwardRef(function Textarea({ variant = "normal", color = "yellow", disabled = false, className, ...rest }, ref) {
-    return (_jsx("textarea", { "data-color": color, "data-variant": variant, ref: ref, className: clsx("p8n-textarea min-w-0 appearance-none rounded-2xl bg-transparent p-2 outline-offset-[-1px] filter-none", disabled && "disabled", className), disabled: disabled, ...rest }));
+export const Textarea = forwardRef(function Textarea({ variant = "normal", color = "yellow", disabled = false, className, readOnly, action, ...rest }, ref) {
+    return (_jsxs("div", { className: clsx("relative block", className), children: [_jsx("textarea", { "data-color": color, "data-variant": variant, ref: ref, className: clsx("p8n-textarea h-full w-full min-w-0 appearance-none rounded-2xl bg-transparent p-2 outline-offset-[-1px] filter-none", disabled && "disabled", readOnly && "readonly"), readOnly: readOnly, onClick: () => {
+                    if (readOnly) {
+                        // 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();
+                    }
+                }, disabled: disabled, ...rest }), action && _jsx("div", { className: "absolute right-1 top-1", children: action })] }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pentatrion-design",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",

package/tailwind/components.js

@@ -230,7 +230,7 @@ export const components = {
             opacity: "0.5",
         },
     },
-    "input[readonly]": {
+    ":is(input,textarea)[readonly]": {
         color: "rgb(var(--color-gray-6))",
     },
     ".option": {

package/tailwind/pentatrionTw.js

@@ -42,16 +42,14 @@ export const pentatrionTw = plugin.withOptions(function (options = {}) {
         options.vars !== false && addBase(vars);
         options.base !== false && addBase(base);
         options.components !== false && addComponents(components);
-        options.componentsInputOutline !== false &&
-            addComponents(componentsInputOutline);
-        options.componentsResizeArea !== false &&
-            addComponents(componentsResizeArea);
+        options.componentsInputOutline !== false && addComponents(componentsInputOutline);
+        options.componentsResizeArea !== false && addComponents(componentsResizeArea);
         options.componentsStep !== false && addComponents(componentsStep);
         options.utilities !== false && addUtilities(utilities);
         options.utilitiesDialog !== false && addUtilities(utilitiesDialog);
         addVariant("active-full", ["&:active", "&.active"]);
-        // addVariant("focus-full", ["&:focus-within", "&.focus", "&:focus"]);
-        addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus"]);
+        // dbl :focus:focus else :hover will have priority to focus-full variant.
+        addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus:focus"]);
     };
 }, function () {
     return {