@nextui-org/react 1.0.2-beta.3 → 1.0.2-beta.5-dbg2

package/esm/input/input.js

@@ -1,318 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _collections = require("../utils/collections");
-
-var _inputProps = require("./input-props");
-
-var _assertion = require("../utils/assertion");
-
-var _useTheme = _interopRequireDefault(require("../use-theme"));
-
-var _useWarning = _interopRequireDefault(require("../use-warning"));
-
-var _input = require("./input.styles");
-
-var _clearIcon = _interopRequireDefault(require("../utils/clear-icon"));
-
-var _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-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 simulateChangeEvent = (el, event) => {
-  return { ...event,
-    target: el,
-    currentTarget: el
-  };
-};
-
-const preClass = 'nextui-input';
-
-const Input = /*#__PURE__*/_react.default.forwardRef(({
-  as: Component = 'input',
-  label,
-  labelPlaceholder,
-  labelLeft,
-  labelRight,
-  size,
-  helperText,
-  color,
-  helperColor,
-  status,
-  contentLeft,
-  contentRight,
-  contentClickable,
-  contentLeftStyling,
-  contentRightStyling,
-  onContentClick,
-  initialValue,
-  onChange,
-  readOnly,
-  value,
-  onClearClick,
-  clearable,
-  shadow,
-  animated,
-  required,
-  width: widthProp,
-  className,
-  onBlur,
-  onFocus,
-  autoComplete,
-  placeholder,
-  fullWidth,
-  borderWeight,
-  disabled,
-  bordered,
-  underlined,
-  rounded,
-  css,
-  ...props
-}, ref) => {
-  const inputRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, () => inputRef.current);
-  const [selfValue, setSelfValue] = (0, _react.useState)(initialValue);
-  const [hover, setHover] = (0, _react.useState)(false);
-  const {
-    isDark
-  } = (0, _useTheme.default)();
-  const isControlledComponent = (0, _react.useMemo)(() => value !== undefined, [value]);
-  const inputLabel = (0, _react.useMemo)(() => label || labelPlaceholder, [label, labelPlaceholder]);
-  const inputPlaceholder = (0, _react.useMemo)(() => labelPlaceholder ? '' : placeholder, [placeholder, labelPlaceholder]);
-  const width = (0, _react.useMemo)(() => {
-    if (fullWidth) return '100%';
-    if (widthProp) return widthProp;
-    return 'initial';
-  }, [fullWidth, widthProp]);
-
-  if (underlined && _assertion.__DEV__) {
-    bordered && (0, _useWarning.default)('Using underlined and bordered at the same time will have no effect.');
-    rounded && (0, _useWarning.default)('Using underlined and rounded at the same time will have no effect.');
-  }
-
-  const changeHandler = event => {
-    if (disabled || readOnly) return;
-    setSelfValue(event.target.value);
-    onChange && onChange(event);
-  };
-
-  const clearHandler = event => {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    setSelfValue('');
-    onClearClick && onClearClick(event);
-    /* istanbul ignore next */
-
-    if (!inputRef.current) return;
-    const changeEvent = simulateChangeEvent(inputRef.current, event);
-    changeEvent.target.value = '';
-    onChange && onChange(changeEvent);
-    inputRef.current.focus();
-  };
-
-  const focusHandler = e => {
-    setHover(true);
-    onFocus && onFocus(e);
-  };
-
-  const blurHandler = e => {
-    setHover(false);
-    onBlur && onBlur(e);
-  };
-
-  const contentClickHandler = (key, e) => {
-    if (disabled) return;
-    onContentClick && onContentClick(key, e);
-  };
-
-  (0, _react.useEffect)(() => {
-    if (isControlledComponent) {
-      setSelfValue(value);
-    }
-  });
-  const isTextarea = (0, _react.useMemo)(() => Component === 'textarea', [Component]);
-  const controlledValue = isControlledComponent ? {
-    value: selfValue
-  } : {
-    defaultValue: initialValue
-  };
-  const inputProps = { ...props,
-    ...controlledValue
-  };
-  const {
-    inputId,
-    labelId
-  } = (0, _react.useMemo)(() => {
-    const nextuiId = (0, _collections.getId)();
-    return {
-      inputId: inputProps.id || `${preClass}-${nextuiId}`,
-      labelId: !(0, _assertion.isEmpty)(inputProps.id) ? `${preClass}-label-${inputProps.id}` : `${preClass}-label-${nextuiId}`
-    };
-  }, [inputProps.id]);
-
-  if (inputLabel) {
-    inputProps['aria-labelledby'] = labelId;
-  }
-
-  const getState = (0, _react.useMemo)(() => {
-    return hover ? 'hover' : disabled ? 'disabled' : readOnly ? 'read-only' : selfValue ? 'with-value' : 'normal';
-  }, [hover, disabled, readOnly, selfValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_input.StyledInputMainContainer, {
-    color: color,
-    "data-state": getState,
-    helperColor: helperColor,
-    borderWeight: borderWeight,
-    status: status,
-    size: size,
-    rounded: rounded,
-    disabled: disabled,
-    css: {
-      width,
-      ...css
-    },
-    className: (0, _clsx.default)(`${preClass}-main-container`, `${preClass}-main-container--${getState}`),
-    children: [inputLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputBlockLabel, {
-      id: labelId,
-      className: `${preClass}-block-label`,
-      htmlFor: inputId,
-      isTextarea: isTextarea,
-      underlined: underlined,
-      animated: animated,
-      bordered: bordered,
-      rounded: rounded,
-      hasContentLeft: !!contentLeft,
-      withValue: !!selfValue,
-      asPlaceholder: !!labelPlaceholder,
-      focused: hover,
-      children: inputLabel
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputContainer, {
-      animated: animated,
-      isTextarea: isTextarea,
-      underlined: underlined,
-      isReadOnly: readOnly,
-      focused: hover,
-      className: (0, _clsx.default)(`${preClass}-container`, `${preClass}-container--${getState}`, {
-        [`${preClass}-container--input`]: !isTextarea,
-        [`${preClass}-container--textarea`]: isTextarea,
-        [`${preClass}-container--read-only`]: readOnly
-      }, className),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_input.StyledInputWrapper, {
-        as: inputLabel ? 'div' : 'label',
-        animated: animated,
-        bordered: bordered,
-        shadow: shadow,
-        disabled: disabled,
-        focused: hover,
-        isReadOnly: readOnly,
-        underlined: underlined,
-        isTextarea: isTextarea,
-        className: (0, _clsx.default)(`${preClass}-wrapper`, `${preClass}-wrapper--${getState}`, {
-          [`${preClass}-wrapper--bordered`]: bordered,
-          [`${preClass}-wrapper--underlined`]: underlined,
-          [`${preClass}-wrapper--shadow`]: shadow
-        }),
-        children: [!inputLabel && placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputPlaceholder, {
-          className: `${preClass}-placeholder`,
-          children: placeholder
-        }), labelLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputLabel, {
-          className: `${preClass}-label--left`,
-          isDefaultStatus: status === 'default',
-          underlined: underlined,
-          bordered: bordered,
-          isDark: isDark,
-          children: labelLeft
-        }), contentLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputContent, {
-          className: (0, _clsx.default)(`${preClass}-content`, `${preClass}-content--left`),
-          applyStyles: contentLeftStyling,
-          clickable: contentClickable,
-          onClick: e => contentClickHandler('left', e),
-          children: contentLeft
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInput, {
-          type: "text",
-          as: Component,
-          id: inputId,
-          ref: inputRef,
-          className: (0, _clsx.default)({
-            [`${preClass}`]: !isTextarea,
-            [`${preClass}-textarea`]: isTextarea,
-            [`${preClass}-disabled`]: disabled,
-            [`${preClass}-rounded`]: rounded,
-            [`${preClass}-${preClass}-right-content`]: contentRight,
-            [`${preClass}-left-content`]: contentLeft
-          }),
-          isTextarea: isTextarea,
-          focused: hover,
-          bordered: bordered,
-          placeholder: inputPlaceholder,
-          disabled: disabled,
-          readOnly: readOnly,
-          onFocus: focusHandler,
-          onBlur: blurHandler,
-          onChange: changeHandler,
-          autoComplete: autoComplete,
-          hasLeftContent: !!contentLeft,
-          hasRightContent: !!contentRight,
-          "data-state": getState,
-          "aria-placeholder": inputPlaceholder,
-          "aria-readonly": readOnly,
-          "aria-required": required,
-          "aria-multiline": isTextarea,
-          ...inputProps
-        }), clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputClearButton, {
-          type: "button",
-          className: `${preClass}-clear-button`,
-          animated: animated,
-          underlined: underlined,
-          visible: Boolean(selfValue),
-          hasContentRight: !!contentRight,
-          disabled: disabled || readOnly,
-          onClick: clearHandler,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearIcon.default, {
-            fill: "currentColor"
-          })
-        }), contentRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputContent, {
-          className: (0, _clsx.default)(`${preClass}-content`, `${preClass}-content--right`),
-          applyStyles: contentRightStyling,
-          clickable: contentClickable,
-          onClick: e => contentClickHandler('right', e),
-          children: contentRight
-        }), labelRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputLabel, {
-          className: `${preClass}-label--right`,
-          isDefaultStatus: status === 'default',
-          underlined: underlined,
-          bordered: bordered,
-          isRight: true,
-          isDark: isDark,
-          children: labelRight
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledHelperTextContainer, {
-      className: `${preClass}-helper-text-container`,
-      withValue: !!helperText,
-      children: helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledHelperText, {
-        className: `${preClass}-helper-text`,
-        children: helperText
-      })
-    })]
-  });
-});
-
-Input.displayName = 'NextUI - Input';
-Input.defaultProps = _inputProps.defaultProps;
-
-Input.toString = () => '.nextui-input';
-
-var _default = Input;
-exports.default = _default;
-module.exports = exports.default;
+import e,{useEffect as t,useImperativeHandle as a,useMemo as r,useRef as l,useState as n}from"react";import{useLabel as i}from"@react-aria/label";import{defaultProps as o}from"./input-props";import d from"../use-theme";import s from"../use-warning";import{StyledInput as c,StyledInputMainContainer as u,StyledInputContainer as p,StyledHelperTextContainer as m,StyledHelperText as h,StyledInputWrapper as f,StyledInputPlaceholder as b,StyledInputClearButton as $,StyledInputBlockLabel as g,StyledInputLabel as y,StyledInputContent as C}from"./input.styles";import x from"../utils/clear-icon";import w from"../utils/clsx";import{__DEV__ as N}from"../utils/assertion";import{jsx as v}from"react/jsx-runtime";import{jsxs as k}from"react/jsx-runtime";const S="nextui-input",R=e.forwardRef((({as:e="input",label:o,labelPlaceholder:R,labelLeft:I,labelRight:L,size:P,helperText:D,color:T,helperColor:B,status:j,contentLeft:F,contentRight:O,contentClickable:V,contentLeftStyling:U,contentRightStyling:W,onContentClick:q,initialValue:z,onChange:E,readOnly:A,value:G,onClearClick:H,clearable:J,shadow:K,animated:M,required:Q,width:X,className:Y,onBlur:Z,onFocus:_,autoComplete:ee,placeholder:te,fullWidth:ae,borderWeight:re,disabled:le,bordered:ne,underlined:ie,rounded:oe,css:de,...se},ce)=>{const ue=l(null);a(ce,(()=>ue.current));const[pe,me]=n(z),[he,fe]=n(!1),{isDark:be}=d(),$e=r((()=>void 0!==G),[G]),ge=r((()=>o||R),[o,R]),ye=r((()=>R?"":te),[te,R]),Ce=r((()=>ae?"100%":X||"initial"),[ae,X]);ie&&N&&(ne&&s("Using underlined and bordered at the same time will have no effect."),oe&&s("Using underlined and rounded at the same time will have no effect."));const xe=(e,t)=>{le||q&&q(e,t)};t((()=>{$e&&me(G)}));const we=r((()=>"textarea"===e),[e]),Ne={...se,...$e?{value:pe}:{defaultValue:z}},{labelProps:ve,fieldProps:ke}=i({...Ne,label:ge}),Se=r((()=>he?"hover":le?"disabled":A?"read-only":pe?"with-value":"normal"),[he,le,A,pe]);return k(u,{color:T,"data-state":Se,helperColor:B,borderWeight:re,status:j,size:P,rounded:oe,disabled:le,css:{width:Ce,...de},className:w(`${S}-main-container`,`${S}-main-container--${Se}`),children:[ge&&v(g,{id:ve.id,className:`${S}-block-label`,htmlFor:ve.htmlFor,isTextarea:we,underlined:ie,animated:M,bordered:ne,rounded:oe,hasContentLeft:!!F,withValue:!!pe,asPlaceholder:!!R,focused:he,children:ge}),v(p,{animated:M,isTextarea:we,underlined:ie,isReadOnly:A,focused:he,className:w(`${S}-container`,`${S}-container--${Se}`,{[`${S}-container--input`]:!we,[`${S}-container--textarea`]:we,[`${S}-container--read-only`]:A},Y),children:k(f,{as:ge?"div":"label",animated:M,bordered:ne,shadow:K,disabled:le,focused:he,isReadOnly:A,underlined:ie,isTextarea:we,className:w(`${S}-wrapper`,`${S}-wrapper--${Se}`,{[`${S}-wrapper--bordered`]:ne,[`${S}-wrapper--underlined`]:ie,[`${S}-wrapper--shadow`]:K}),children:[!ge&&te&&v(b,{className:`${S}-placeholder`,children:te}),I&&v(y,{className:`${S}-label--left`,isDefaultStatus:"default"===j,underlined:ie,bordered:ne,isDark:be,children:I}),F&&v(C,{className:w(`${S}-content`,`${S}-content--left`),applyStyles:U,clickable:V,onClick:e=>xe("left",e),children:F}),v(c,{type:"text",as:e,ref:ue,className:w({[`${S}`]:!we,[`${S}-textarea`]:we,[`${S}-disabled`]:le,[`${S}-rounded`]:oe,[`${S}-${S}-right-content`]:O,[`${S}-left-content`]:F}),isTextarea:we,focused:he,bordered:ne,placeholder:ye,disabled:le,readOnly:A,onFocus:e=>{fe(!0),_&&_(e)},onBlur:e=>{fe(!1),Z&&Z(e)},onChange:e=>{le||A||(me(e.target.value),E&&E(e))},autoComplete:ee,hasLeftContent:!!F,hasRightContent:!!O,"data-state":Se,"aria-placeholder":ye,"aria-readonly":A,"aria-required":Q,"aria-multiline":we,...Ne,...ke}),J&&v($,{type:"button",className:`${S}-clear-button`,animated:M,underlined:ie,visible:Boolean(pe),hasContentRight:!!O,disabled:le||A,onClick:e=>{if(e.preventDefault(),e.stopPropagation(),e.nativeEvent.stopImmediatePropagation(),me(""),H&&H(e),!ue.current)return;const t=((e,t)=>({...t,target:e,currentTarget:e}))(ue.current,e);t.target.value="",E&&E(t),ue.current.focus()},children:v(x,{fill:"currentColor"})}),O&&v(C,{className:w(`${S}-content`,`${S}-content--right`),applyStyles:W,clickable:V,onClick:e=>xe("right",e),children:O}),L&&v(y,{className:`${S}-label--right`,isDefaultStatus:"default"===j,underlined:ie,bordered:ne,isRight:!0,isDark:be,children:L})]})}),v(m,{className:`${S}-helper-text-container`,withValue:!!D,children:D&&v(h,{className:`${S}-helper-text`,children:D})})]})}));R.displayName="NextUI - Input",R.defaultProps=o,R.toString=()=>".nextui-input";export default R;