pentatrion-design 0.0.19 → 0.1.0

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,9 +9,9 @@ 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: (e) => {
                     if (readOnly) {
-                        document.activeElement?.select();
+                        e.target?.select();
                     }
                 }, ...rest }), suffix && (_jsx("div", { className: clsx([
                     "relative flex-center",

package/components/resize-area/ResizeArea.d.ts

@@ -1,8 +1,9 @@
-import { ComponentProps } from "react";
+import { ComponentProps, RefObject } from "react";
 interface Props extends ComponentProps<"div"> {
     name: string;
     position: "top" | "bottom" | "left" | "right";
     initialValue?: number;
+    container?: RefObject<HTMLDivElement>;
 }
-export declare function ResizeArea({ name, position, initialValue, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ResizeArea({ name, position, initialValue, className, container, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/resize-area/ResizeArea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect } from "react";
 import clsx from "clsx";
-export function ResizeArea({ name, position, initialValue, className, ...rest }) {
+export function ResizeArea({ name, position, initialValue, className, container, ...rest }) {
     useEffect(() => {
         const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
         if (initialValue) {
@@ -20,25 +20,26 @@ export function ResizeArea({ name, position, initialValue, className, ...rest })
     const handlePointerMove = useCallback((e) => {
         const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
         let cssVarValue;
+        const containerRect = (container?.current || document.documentElement).getBoundingClientRect();
         switch (position) {
             case "top":
-                cssVarValue = document.documentElement.clientHeight - e.pageY;
+                cssVarValue = containerRect.bottom - e.pageY;
                 break;
             case "right":
-                cssVarValue = e.pageX;
+                cssVarValue = e.pageX - containerRect.left;
                 break;
             case "left":
-                cssVarValue = document.documentElement.clientWidth - e.pageX;
+                cssVarValue = containerRect.right - e.pageX;
                 break;
             case "bottom":
-                cssVarValue = e.pageY;
+                cssVarValue = e.pageY - containerRect.top;
                 break;
         }
         document.documentElement.style.setProperty(cssVarName, `${cssVarValue}px`);
         return () => {
             document.documentElement.style.removeProperty(cssVarName);
         };
-    }, [name, position]);
+    }, [name, position, container]);
     const handlePointerUp = useCallback(() => {
         const handler = handlePointerMove;
         document.removeEventListener("pointermove", handler);

package/components/textarea/Textarea.js

@@ -2,9 +2,9 @@ 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, 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 w-full min-w-0 appearance-none rounded-2xl bg-transparent p-2 outline-offset-[-1px] filter-none", disabled && "disabled", readOnly && "readonly"), readOnly: readOnly, onFocus: () => {
+    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, onFocus: (e) => {
                     if (readOnly) {
-                        document.activeElement?.select();
+                        e.target.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.19",
+  "version": "0.1.0",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",

package/tailwind/base.js

@@ -15,9 +15,12 @@ export const base = {
     ":focus-visible": {
         "@apply rounded outline outline-2 outline-offset-2 outline-yellow-5": {},
     },
-    "textarea:read-only": {
+    "textarea[readonly],.readonly": {
         "@apply bg-gray-1": {},
     },
+    ":is(input,textarea)[readonly]": {
+        color: "rgb(var(--color-gray-6))",
+    },
     'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration': {
         display: "none",
     },

package/tailwind/components.js

@@ -230,9 +230,6 @@ export const components = {
             opacity: "0.5",
         },
     },
-    ":is(input,textarea)[readonly]": {
-        color: "rgb(var(--color-gray-6))",
-    },
     ".option": {
         "@apply flex w-full px-2 h-8 items-center text-left relative cursor-pointer first:rounded-t-2xl last:rounded-b-2xl hover:bg-gray-1 focus-full:text-gray-8 outline-none": {},
         "&[disabled]": { color: "rgb(var(--color-gray-6))", pointerEvents: "none" },