@gridui/input 1.1.3 → 1.1.4

package/dist/index.js

@@ -167,6 +167,7 @@ var useTextareaAutosize = (ref, enabled, maxHeight) => {
 };
 
 // src/textarea/textarea.tsx
+import { useScrollbars } from "@gridui/overlay";
 import { cn as cn5 } from "@gridui/style-utils";
 import { useImperativeHandle, useRef } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -187,12 +188,13 @@ var Textarea = (props) => {
   useImperativeHandle(ref, () => {
     return element.current;
   });
+  const scrollRef = useScrollbars({ ref: element });
   const resize = useTextareaAutosize(element, autoSize, maxHeight);
   return /* @__PURE__ */ jsx3(
     "textarea",
     {
       ...restProps,
-      ref: element,
+      ref: scrollRef,
       style,
       onInput: (event) => {
         resize();
@@ -202,7 +204,7 @@ var Textarea = (props) => {
         onChange?.(event);
         onValueChange?.(event.currentTarget.value);
       },
-      className: cn5(controlVariants({ size: controlSize }), autoSize ? "gridui-u-resize-none" : "gridui-u-resize-y", className)
+      className: cn5(controlVariants({ size: controlSize }), "gridui-u-overflow-auto", autoSize ? "gridui-u-resize-none" : "gridui-u-resize-y", className)
     }
   );
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shared/style.ts", "../src/input/input.tsx", "../src/label/style.ts", "../src/label/label.tsx", "../src/textarea/use-textarea-autosize.ts", "../src/textarea/textarea.tsx"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Input\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const controlStyles = cva(cn(\n    \"gridui-control\",\n    \"gridui-u-min-w-0 gridui-u-w-full gridui-u-box-border gridui-u-border gridui-u-border-solid gridui-u-border-border gridui-u-rounded-control gridui-u-text-foreground gridui-u-bg-background gridui-u-type-input\",\n    \"gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed\",\n    \"gridui-u-aria-invalid:border-danger-foreground\",\n));\n\nexport const controlStandardStyles = cva(cn(\n    \"gridui-control-standard\",\n    \"gridui-u-p-gridui-8 gridui-u-min-h-gridui-control\",\n));\n\nexport const controlSmallStyles = cva(cn(\n    \"gridui-control-small\",\n    \"gridui-u-py-gridui-4 gridui-u-px-gridui-8 gridui-u-min-h-gridui-control-small\",\n));\n\nexport const controlVariants = cva(controlStyles(), {\n    variants: {\n        size: {\n            standard: controlStandardStyles(),\n            small: controlSmallStyles(),\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Input\n * @description Input\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputProps = ComponentPropsWithRef<\"input\"> & {\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Input: FC<InputProps> = (props: InputProps) => {\n    const {\n        size,\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onValueChange,\n        ...restProps\n    } = props;\n    return (<input\n        {...restProps}\n        size={size}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const labelStyles = cva(cn(\n    \"gridui-label\",\n    \"gridui-u-inline-flex gridui-u-items-center gridui-u-gap-gridui-4 gridui-u-type-ui\",\n));\n\nexport const labelIconStyles = cva(\"gridui-u-inline-flex gridui-u-shrink-0 gridui-u-text-foreground gridui-u-[&>svg]:size-gridui-16\");\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Label\n */\n\nimport { labelIconStyles, labelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type LabelProps = ComponentPropsWithRef<\"label\"> & {\n    readonly icon?: ReactNode;\n};\n\nexport const Label: FC<LabelProps> = (props: LabelProps) => {\n    const { icon, children, className, ...restProps } = props;\n    return (<label\n        {...restProps}\n        className={cn(labelStyles(), className)}\n    >\n        {icon && (<span\n            aria-hidden=\"true\"\n            className={labelIconStyles()}\n        >\n            {icon}\n        </span>)}\n        {children}\n    </label>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Use Textarea Autosize\n */\n\nimport { type RefObject, useCallback, useEffect, useLayoutEffect } from \"react\";\n\nexport const useTextareaAutosize = (ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean, maxHeight?: number) => {\n    if (maxHeight !== undefined && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {\n        throw new Error(\"Textarea maxHeight must be finite and positive.\");\n    }\n    const resize = useCallback(() => {\n        const element = ref.current;\n        if (!enabled || !element || element.clientWidth === 0) {\n            return;\n        }\n        const style = getComputedStyle(element);\n        const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);\n        const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);\n        element.style.height = \"auto\";\n        const contentHeight = element.scrollHeight;\n        const height = style.boxSizing === \"border-box\" ? contentHeight + borders : contentHeight - padding;\n        const boundedHeight = Math.min(height, maxHeight ?? Number.POSITIVE_INFINITY);\n        element.style.height = `${boundedHeight}px`;\n        element.style.overflowY = height > boundedHeight ? \"auto\" : \"hidden\";\n    }, [\n        ref,\n        enabled,\n        maxHeight,\n    ]);\n    useLayoutEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        const originalHeight = element.style.height;\n        const originalOverflow = element.style.overflowY;\n        return () => {\n            element.style.height = originalHeight;\n            element.style.overflowY = originalOverflow;\n        };\n    }, [\n        ref,\n        enabled,\n    ]);\n    useLayoutEffect(() => {\n        resize();\n    });\n    useEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        let frame = 0;\n        let width = element.clientWidth;\n        const schedule = () => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(resize);\n        };\n        const observer = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(() => {\n            if (element.clientWidth !== width) {\n                width = element.clientWidth;\n                schedule();\n            }\n        });\n        observer?.observe(element);\n        // A capture listener follows the live form owner, including DOM reassociation.\n        const reset = (event: Event): void => {\n            if (event.target === element.form) {\n                schedule();\n            }\n        };\n        const document = element.ownerDocument;\n        document.addEventListener(\"reset\", reset, true);\n        return () => {\n            cancelAnimationFrame(frame);\n            observer?.disconnect();\n            document.removeEventListener(\"reset\", reset, true);\n        };\n    }, [\n        ref,\n        enabled,\n        resize,\n    ]);\n    return resize;\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Textarea\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { useTextareaAutosize } from \"./use-textarea-autosize\";\nimport { cn } from \"@gridui/style-utils\";\nimport { type ComponentPropsWithRef, type FC, useImperativeHandle, useRef } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithRef<\"textarea\"> & {\n    readonly autoSize?: boolean;\n    readonly maxHeight?: number;\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Textarea: FC<TextareaProps> = (props: TextareaProps) => {\n    const {\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onInput,\n        onValueChange,\n        ref,\n        autoSize = false,\n        maxHeight,\n        style,\n        ...restProps\n    } = props;\n    const element = useRef<HTMLTextAreaElement>(null);\n    // React attaches the native element before assigning imperative handles.\n    useImperativeHandle(ref, () => {\n        return element.current!;\n    });\n    const resize = useTextareaAutosize(element, autoSize, maxHeight);\n    return (<textarea\n        {...restProps}\n        ref={element}\n        style={style}\n        onInput={(event) => {\n            resize();\n            onInput?.(event);\n        }}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), autoSize ? \"gridui-u-resize-none\" : \"gridui-u-resize-y\", className)}\n    />);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Input\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const controlStyles = cva(cn(\n    \"gridui-control\",\n    \"gridui-u-min-w-0 gridui-u-w-full gridui-u-box-border gridui-u-border gridui-u-border-solid gridui-u-border-border gridui-u-rounded-control gridui-u-text-foreground gridui-u-bg-background gridui-u-type-input\",\n    \"gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed\",\n    \"gridui-u-aria-invalid:border-danger-foreground\",\n));\n\nexport const controlStandardStyles = cva(cn(\n    \"gridui-control-standard\",\n    \"gridui-u-p-gridui-8 gridui-u-min-h-gridui-control\",\n));\n\nexport const controlSmallStyles = cva(cn(\n    \"gridui-control-small\",\n    \"gridui-u-py-gridui-4 gridui-u-px-gridui-8 gridui-u-min-h-gridui-control-small\",\n));\n\nexport const controlVariants = cva(controlStyles(), {\n    variants: {\n        size: {\n            standard: controlStandardStyles(),\n            small: controlSmallStyles(),\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Input\n * @description Input\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputProps = ComponentPropsWithRef<\"input\"> & {\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Input: FC<InputProps> = (props: InputProps) => {\n    const {\n        size,\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onValueChange,\n        ...restProps\n    } = props;\n    return (<input\n        {...restProps}\n        size={size}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const labelStyles = cva(cn(\n    \"gridui-label\",\n    \"gridui-u-inline-flex gridui-u-items-center gridui-u-gap-gridui-4 gridui-u-type-ui\",\n));\n\nexport const labelIconStyles = cva(\"gridui-u-inline-flex gridui-u-shrink-0 gridui-u-text-foreground gridui-u-[&>svg]:size-gridui-16\");\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Label\n */\n\nimport { labelIconStyles, labelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type LabelProps = ComponentPropsWithRef<\"label\"> & {\n    readonly icon?: ReactNode;\n};\n\nexport const Label: FC<LabelProps> = (props: LabelProps) => {\n    const { icon, children, className, ...restProps } = props;\n    return (<label\n        {...restProps}\n        className={cn(labelStyles(), className)}\n    >\n        {icon && (<span\n            aria-hidden=\"true\"\n            className={labelIconStyles()}\n        >\n            {icon}\n        </span>)}\n        {children}\n    </label>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Use Textarea Autosize\n */\n\nimport { type RefObject, useCallback, useEffect, useLayoutEffect } from \"react\";\n\nexport const useTextareaAutosize = (ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean, maxHeight?: number) => {\n    if (maxHeight !== undefined && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {\n        throw new Error(\"Textarea maxHeight must be finite and positive.\");\n    }\n    const resize = useCallback(() => {\n        const element = ref.current;\n        if (!enabled || !element || element.clientWidth === 0) {\n            return;\n        }\n        const style = getComputedStyle(element);\n        const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);\n        const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);\n        element.style.height = \"auto\";\n        const contentHeight = element.scrollHeight;\n        const height = style.boxSizing === \"border-box\" ? contentHeight + borders : contentHeight - padding;\n        const boundedHeight = Math.min(height, maxHeight ?? Number.POSITIVE_INFINITY);\n        element.style.height = `${boundedHeight}px`;\n        element.style.overflowY = height > boundedHeight ? \"auto\" : \"hidden\";\n    }, [\n        ref,\n        enabled,\n        maxHeight,\n    ]);\n    useLayoutEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        const originalHeight = element.style.height;\n        const originalOverflow = element.style.overflowY;\n        return () => {\n            element.style.height = originalHeight;\n            element.style.overflowY = originalOverflow;\n        };\n    }, [\n        ref,\n        enabled,\n    ]);\n    useLayoutEffect(() => {\n        resize();\n    });\n    useEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        let frame = 0;\n        let width = element.clientWidth;\n        const schedule = () => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(resize);\n        };\n        const observer = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(() => {\n            if (element.clientWidth !== width) {\n                width = element.clientWidth;\n                schedule();\n            }\n        });\n        observer?.observe(element);\n        // A capture listener follows the live form owner, including DOM reassociation.\n        const reset = (event: Event): void => {\n            if (event.target === element.form) {\n                schedule();\n            }\n        };\n        const document = element.ownerDocument;\n        document.addEventListener(\"reset\", reset, true);\n        return () => {\n            cancelAnimationFrame(frame);\n            observer?.disconnect();\n            document.removeEventListener(\"reset\", reset, true);\n        };\n    }, [\n        ref,\n        enabled,\n        resize,\n    ]);\n    return resize;\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Textarea\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { useTextareaAutosize } from \"./use-textarea-autosize\";\nimport { useScrollbars } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport { type ComponentPropsWithRef, type FC, useImperativeHandle, useRef } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithRef<\"textarea\"> & {\n    readonly autoSize?: boolean;\n    readonly maxHeight?: number;\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Textarea: FC<TextareaProps> = (props: TextareaProps) => {\n    const {\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onInput,\n        onValueChange,\n        ref,\n        autoSize = false,\n        maxHeight,\n        style,\n        ...restProps\n    } = props;\n    const element = useRef<HTMLTextAreaElement>(null);\n    // React attaches the native element before assigning imperative handles.\n    useImperativeHandle(ref, () => {\n        return element.current!;\n    });\n    const scrollRef = useScrollbars({ ref: element });\n    const resize = useTextareaAutosize(element, autoSize, maxHeight);\n    return (<textarea\n        {...restProps}\n        ref={scrollRef}\n        style={style}\n        onInput={(event) => {\n            resize();\n            onInput?.(event);\n        }}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), \"gridui-u-overflow-auto\", autoSize ? \"gridui-u-resize-none\" : \"gridui-u-resize-y\", className)}\n    />);\n};\n"],
+  "mappings": "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",
   "names": ["cn", "cn", "cva", "cn", "jsx", "cn", "jsx"]
 }

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer utilities {
@@ -35,6 +35,9 @@
   .gridui-u-gap-gridui-4 {
     gap: var(--gridui-space-4);
   }
+  .gridui-u-overflow-auto {
+    overflow: auto;
+  }
   .gridui-u-rounded-control {
     border-radius: var(--gridui-control-radius);
   }
@@ -92,7 +95,7 @@
   initial-value: solid;
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-border-style: solid;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/input",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "GridUI React input",
   "license": "UNLICENSED",
   "type": "module",
@@ -27,8 +27,9 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
+    "@gridui/overlay": "^1.2.0",
     "@gridui/style-utils": "^2.2.0",
-    "@gridui/theme": "^2.5.0",
+    "@gridui/theme": "^2.5.1",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {
@@ -46,8 +47,6 @@
   },
   "scripts": {
     "build": "node ../../scripts/compilation/package.ts",
-    "compile": "tsc --project tsconfig.json",
-    "test": "jest",
-    "coverage": "jest --coverage"
+    "compile": "tsc --project tsconfig.json"
   }
 }