@nextui-org/react 1.0.2-alpha.2 → 1.0.2-beta.4

package/esm/textarea/textarea.js

@@ -1,126 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _input = _interopRequireDefault(require("../input"));
-
-var _useResize = _interopRequireDefault(require("../use-resize"));
-
-var _useWarning = _interopRequireDefault(require("../use-warning"));
-
-var _propTypes = require("../utils/prop-types");
-
-var _assertion = require("../utils/assertion");
-
-var _utils = require("./utils");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const defaultProps = {
-  minRows: 3,
-  maxRows: 6,
-  cacheMeasurements: true,
-  initialValue: ''
-};
-
-const Textarea = /*#__PURE__*/_react.default.forwardRef((textareaProps, ref) => {
-  const textareaRef = (0, _react.useRef)(null);
-
-  const heightRef = _react.default.useRef(0);
-
-  const measurementsCacheRef = _react.default.useRef();
-
-  const {
-    cacheMeasurements,
-    rows,
-    maxRows,
-    minRows,
-    onChange,
-    onHeightChange,
-    css,
-    ...props
-  } = textareaProps;
-  Object.keys(props).forEach(propNameKey => {
-    if (_propTypes.excludedInputPropsForTextarea.indexOf(propNameKey) > -1) {
-      // @ts-ignored
-      delete props[propNameKey];
-    }
-  });
-  const isControlled = props.value !== undefined;
-
-  if (_assertion.__DEV__ && props.style) {
-    if ('maxHeight' in props.style) {
-      (0, _useWarning.default)('Using `style.maxHeight` for <Textarea/> is not supported. Please use `maxRows`.');
-    }
-
-    if ('minHeight' in props.style) {
-      (0, _useWarning.default)('Using `style.minHeight` for <Textarea/> is not supported. Please use `minRows`.');
-    }
-  }
-
-  (0, _react.useImperativeHandle)(ref, () => textareaRef.current);
-
-  const resizeTextarea = () => {
-    const node = textareaRef.current;
-    const nodeSizingData = cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : (0, _utils.getSizingData)(node);
-
-    if (!nodeSizingData) {
-      return;
-    }
-
-    measurementsCacheRef.current = nodeSizingData;
-    const [height, rowHeight] = (0, _utils.calculateNodeHeight)(nodeSizingData, node.value || node.placeholder || 'x', rows || minRows, rows || maxRows);
-
-    if (heightRef.current !== height) {
-      heightRef.current = height;
-      node.style.setProperty('height', `${height}px`, 'important');
-      onHeightChange && onHeightChange(height, {
-        rowHeight
-      });
-    }
-  };
-
-  const handleChange = event => {
-    if (!isControlled) {
-      resizeTextarea();
-    }
-
-    onChange && onChange(event);
-  };
-
-  if (typeof document !== 'undefined') {
-    (0, _react.useLayoutEffect)(resizeTextarea);
-    (0, _useResize.default)(resizeTextarea);
-  }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
-    as: "textarea",
-    ref: textareaRef,
-    onChange: handleChange,
-    css: { ...css
-    },
-    ...props
-  });
-});
-
-if (_assertion.__DEV__) {
-  Textarea.displayName = 'NextUI - Textarea';
-}
-
-Textarea.toString = () => '.nextui-textarea';
-
-var _default = (0, _withDefaults.default)(Textarea, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import e,{useRef as t,useImperativeHandle as r,useLayoutEffect as s}from"react";import o from"../utils/with-defaults";import i from"../input";import n from"../use-resize";import a from"../use-warning";import{excludedInputPropsForTextarea as m}from"../utils/prop-types";import{__DEV__ as u}from"../utils/assertion";import{calculateNodeHeight as c,getSizingData as l}from"./utils";import{jsx as p}from"react/jsx-runtime";const f=e.forwardRef(((o,f)=>{const x=t(null),h=e.useRef(0),g=e.useRef(),{cacheMeasurements:d,rows:w,maxRows:y,minRows:R,onChange:H,onHeightChange:j,css:v,...C}=o;Object.keys(C).forEach((e=>{m.indexOf(e)>-1&&delete C[e]}));const P=void 0!==C.value;u&&C.style&&("maxHeight"in C.style&&a("Using `style.maxHeight` for <Textarea/> is not supported. Please use `maxRows`."),"minHeight"in C.style&&a("Using `style.minHeight` for <Textarea/> is not supported. Please use `minRows`.")),r(f,(()=>x.current));const T=()=>{const e=x.current,t=d&&g.current?g.current:l(e);if(!t)return;g.current=t;const[r,s]=c(t,e.value||e.placeholder||"x",w||R,w||y);h.current!==r&&(h.current=r,e.style.setProperty("height",`${r}px`,"important"),j&&j(r,{rowHeight:s}))};return"undefined"!=typeof document&&(s(T),n(T)),p(i,{as:"textarea",ref:x,onChange:e=>{P||T(),H&&H(e)},css:{...v},...C})}));u&&(f.displayName="NextUI - Textarea"),f.toString=()=>".nextui-textarea";export default o(f,{minRows:3,maxRows:6,cacheMeasurements:!0,initialValue:""});

package/esm/textarea/utils.js

@@ -1,126 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getSizingData = exports.forceHiddenStyles = exports.calculateNodeHeight = void 0;
-
-var _collections = require("../utils/collections");
-
-const SIZING_STYLE = ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'boxSizing', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'letterSpacing', 'lineHeight', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'tabSize', 'textIndent', 'textRendering', 'textTransform', 'width', 'wordBreak'];
-const HIDDEN_TEXTAREA_STYLE = {
-  'min-height': '0',
-  'max-height': 'none',
-  height: '0',
-  visibility: 'hidden',
-  overflow: 'hidden',
-  position: 'absolute',
-  'z-index': '-1000',
-  top: '0',
-  right: '0'
-};
-const isIE = typeof document !== 'undefined' ? !!document.documentElement.currentStyle : false;
-
-const forceHiddenStyles = node => {
-  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(key => {
-    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');
-  });
-};
-
-exports.forceHiddenStyles = forceHiddenStyles;
-
-const getSizingData = node => {
-  const style = window.getComputedStyle(node);
-
-  if (style === null) {
-    return null;
-  }
-
-  const sizingStyle = (0, _collections.pick)(SIZING_STYLE, style);
-  const {
-    boxSizing
-  } = sizingStyle; // probably node is detached from DOM, can't read computed dimensions
-
-  if (boxSizing === '') {
-    return null;
-  } // IE (Edge has already correct behaviour) returns content width as computed width
-  // so we need to add manually padding and border widths
-
-
-  if (isIE && boxSizing === 'border-box') {
-    sizingStyle.width = parseFloat(sizingStyle.width) + parseFloat(sizingStyle.borderRightWidth) + parseFloat(sizingStyle.borderLeftWidth) + parseFloat(sizingStyle.paddingRight) + parseFloat(sizingStyle.paddingLeft) + 'px';
-  }
-
-  const paddingSize = parseFloat(sizingStyle.paddingBottom) + parseFloat(sizingStyle.paddingTop);
-  const borderSize = parseFloat(sizingStyle.borderBottomWidth) + parseFloat(sizingStyle.borderTopWidth);
-  return {
-    sizingStyle,
-    paddingSize,
-    borderSize
-  };
-}; // TODO: use labelled tuples once they are avaiable:
-//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
-// https://github.com/microsoft/TypeScript/issues/28259
-
-
-exports.getSizingData = getSizingData;
-let hiddenTextarea = null;
-
-const getHeight = (node, sizingData) => {
-  const height = node.scrollHeight;
-
-  if (sizingData.sizingStyle.boxSizing === 'border-box') {
-    // border-box: add border, since height = content + padding + border
-    return height + sizingData.borderSize;
-  } // remove padding, since height = content
-
-
-  return height - sizingData.paddingSize;
-};
-
-const calculateNodeHeight = (sizingData, value, minRows = 1, maxRows = Infinity) => {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement('textarea');
-    hiddenTextarea.setAttribute('tabindex', '-1');
-    hiddenTextarea.setAttribute('aria-hidden', 'true');
-    forceHiddenStyles(hiddenTextarea);
-  }
-
-  if (hiddenTextarea.parentNode === null) {
-    document.body.appendChild(hiddenTextarea);
-  }
-
-  const {
-    paddingSize,
-    borderSize,
-    sizingStyle
-  } = sizingData;
-  const {
-    boxSizing
-  } = sizingStyle;
-  Object.keys(sizingStyle).forEach(_key => {
-    const key = _key;
-    hiddenTextarea.style[key] = sizingStyle[key];
-  });
-  forceHiddenStyles(hiddenTextarea);
-  hiddenTextarea.value = value;
-  let height = getHeight(hiddenTextarea, sizingData); // measure height of a textarea with a single row
-
-  hiddenTextarea.value = 'x';
-  const rowHeight = hiddenTextarea.scrollHeight - paddingSize;
-  let minHeight = rowHeight * minRows;
-
-  if (boxSizing === 'border-box') {
-    minHeight = minHeight + paddingSize + borderSize;
-  }
-
-  height = Math.max(minHeight, height);
-  let maxHeight = rowHeight * maxRows;
-
-  if (boxSizing === 'border-box') {
-    maxHeight = maxHeight + paddingSize + borderSize;
-  }
-
-  height = Math.min(maxHeight, height);
-  return [height, rowHeight];
-};
-
-exports.calculateNodeHeight = calculateNodeHeight;
+import{pick as t}from"../utils/collections";const e=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","boxSizing","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","paddingBottom","paddingLeft","paddingRight","paddingTop","tabSize","textIndent","textRendering","textTransform","width","wordBreak"],o={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0"},i="undefined"!=typeof document&&!!document.documentElement.currentStyle;export const forceHiddenStyles=t=>{Object.keys(o).forEach((e=>{t.style.setProperty(e,o[e],"important")}))};export const getSizingData=o=>{const r=window.getComputedStyle(o);if(null===r)return null;const d=t(e,r),{boxSizing:n}=d;if(""===n)return null;i&&"border-box"===n&&(d.width=parseFloat(d.width)+parseFloat(d.borderRightWidth)+parseFloat(d.borderLeftWidth)+parseFloat(d.paddingRight)+parseFloat(d.paddingLeft)+"px");return{sizingStyle:d,paddingSize:parseFloat(d.paddingBottom)+parseFloat(d.paddingTop),borderSize:parseFloat(d.borderBottomWidth)+parseFloat(d.borderTopWidth)}};let r=null;export const calculateNodeHeight=(t,e,o=1,i=1/0)=>{r||(r=document.createElement("textarea"),r.setAttribute("tabindex","-1"),r.setAttribute("aria-hidden","true"),forceHiddenStyles(r)),null===r.parentNode&&document.body.appendChild(r);const{paddingSize:d,borderSize:n,sizingStyle:a}=t,{boxSizing:l}=a;Object.keys(a).forEach((t=>{const e=t;r.style[e]=a[e]})),forceHiddenStyles(r),r.value=e;let s=((t,e)=>{const o=t.scrollHeight;return"border-box"===e.sizingStyle.boxSizing?o+e.borderSize:o-e.paddingSize})(r,t);r.value="x";const p=r.scrollHeight-d;let g=p*o;"border-box"===l&&(g=g+d+n),s=Math.max(g,s);let h=p*i;return"border-box"===l&&(h=h+d+n),s=Math.min(h,s),[s,p]};