@react-fabric/form 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/cjs/input/Field.js

@@ -8,17 +8,18 @@ var Field_module = require('../internal/Field.module.css');
 var FieldWrapper = require('../internal/FieldWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "noOutline", "plain"];
+var _excluded = ["children", "vertical", "noOutline", "plain"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Field = function Field(_ref) {
   var children = _ref.children,
+    vertical = _ref.vertical,
     noOutline = _ref.noOutline,
     plain = _ref.plain,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Field_module.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex flex-nowrap flex-1 rounded"),
+      className: classNames(Field_module.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex-1 rounded", !vertical && "flex flex-nowrap"),
       children: react.Children.map(children, function (child) {
         return child && /*#__PURE__*/react.cloneElement(child, {
           "data-inner": true

package/dist/cjs/input/Textarea.js

@@ -5,9 +5,11 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('react');
 var InputWrapper = require('../internal/InputWrapper.js');
+var eventHandlers = require('../utils/eventHandlers.js');
+require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "onChange"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "onChange", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Textarea = function Textarea(_ref) {
@@ -26,6 +28,7 @@ var Textarea = function Textarea(_ref) {
     maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
     variableRows = _ref.variableRows,
     onChange = _ref.onChange,
+    onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = react.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
@@ -79,7 +82,8 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
-      onChange: handleChange
+      onChange: handleChange,
+      onKeyDown: eventHandlers.handleEnter(onEnterPressed)
     })
   }));
 };

package/dist/esm/input/Field.js

@@ -8,17 +8,18 @@ import classes from '../internal/Field.module.css';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "noOutline", "plain"];
+var _excluded = ["children", "vertical", "noOutline", "plain"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Field = function Field(_ref) {
   var children = _ref.children,
+    vertical = _ref.vertical,
     noOutline = _ref.noOutline,
     plain = _ref.plain,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsx("div", {
-      className: classNames(classes.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex flex-nowrap flex-1 rounded"),
+      className: classNames(classes.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex-1 rounded", !vertical && "flex flex-nowrap"),
       children: Children.map(children, function (child) {
         return child && /*#__PURE__*/cloneElement(child, {
           "data-inner": true

package/dist/esm/input/Textarea.js

@@ -5,9 +5,11 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useState, useDeferredValue, useRef, useEffect, useCallback } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
+import { handleEnter } from '../utils/eventHandlers.js';
+import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "onChange"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "onChange", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Textarea = function Textarea(_ref) {
@@ -26,6 +28,7 @@ var Textarea = function Textarea(_ref) {
     maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
     variableRows = _ref.variableRows,
     onChange = _ref.onChange,
+    onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
@@ -79,7 +82,8 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
-      onChange: handleChange
+      onChange: handleChange,
+      onKeyDown: handleEnter(onEnterPressed)
     })
   }));
 };

package/dist/types/input/Field.d.ts

@@ -37,5 +37,6 @@ export interface FieldProps extends ChildrenProp, CssProp {
      * dont apply bg and outline
      */
     plain?: boolean;
+    vertical?: boolean;
 }
-export declare const Field: ({ children, noOutline, plain, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Field: ({ children, vertical, noOutline, plain, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Textarea.d.ts

@@ -1,6 +1,6 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type InputProps } from "../types";
-export interface TextareaProps extends Omit<InputProps, "onEnterPressed">, RefProp<HTMLTextAreaElement> {
+export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement> {
     /**
      * textarae rows
      */
@@ -14,4 +14,4 @@ export interface TextareaProps extends Omit<InputProps, "onEnterPressed">, RefPr
      */
     variableRows?: boolean;
 }
-export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, onChange, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.1",
+    "@react-fabric/core": "^1.0.0-beta.3",
     "@react-fabric/utilities": "^1.0.0-beta.1",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -60,5 +60,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "e0712d7ea2c945de876bef813b5d2dcec1218ed7"
+  "gitHead": "2ce2a968f48d6ffc338f5da3a0cf67232d0c6864"
 }

package/src/input/Field.tsx

@@ -69,9 +69,16 @@ export interface FieldProps extends ChildrenProp, CssProp {
    * dont apply bg and outline
    */
   plain?: boolean;
+  vertical?: boolean;
 }
 
-export const Field = ({ children, noOutline, plain, ...rest }: FieldProps) => {
+export const Field = ({
+  children,
+  vertical,
+  noOutline,
+  plain,
+  ...rest
+}: FieldProps) => {
   return (
     <FieldWrapper {...rest}>
       <div
@@ -79,7 +86,8 @@ export const Field = ({ children, noOutline, plain, ...rest }: FieldProps) => {
           classes.fieldGroup,
           !plain && !noOutline && "outline",
           !plain && "bg-base",
-          "flex flex-nowrap flex-1 rounded",
+          "flex-1 rounded",
+          !vertical && "flex flex-nowrap",
         )}
       >
         {Children.map(

package/src/input/Textarea.tsx

@@ -32,9 +32,10 @@ import {
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
 
 export interface TextareaProps
-  extends Omit<InputProps, "onEnterPressed">,
+  extends InputProps,
     RefProp<HTMLTextAreaElement> {
   /**
    * textarae rows
@@ -64,6 +65,7 @@ export const Textarea = ({
   maxRows = 12,
   variableRows,
   onChange,
+  onEnterPressed,
   ...rest
 }: TextareaProps) => {
   const [actualValue, setActualValue] = useState("");
@@ -121,6 +123,7 @@ export const Textarea = ({
         {...{ autoFocus }}
         value={actualValue}
         onChange={handleChange}
+        onKeyDown={handleEnter(onEnterPressed)}
       />
     </InputWrapper>
   );