@os-design/core 1.0.186 → 1.0.189

package/dist/cjs/TextArea/index.js

@@ -5,50 +5,137 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _icons = require("@os-design/icons");
+var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
 var _Input = require("../Input");
-var _excluded = ["disabled", "size", "onChange"];
-var _templateObject, _templateObject2;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _getFocusableElements = _interopRequireDefault(require("../Input/utils/getFocusableElements"));
+var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "disabled", "loading", "containerRef", "containerProps", "size", "value", "onChange"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var TextAreaContainer = (0, _styled["default"])(_Input.InputContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "em;\n"])), function (p) {
   return p.theme.textAreaHeight;
 });
-var TextAreaField = (0, _styled["default"])(_Input.StyledInput.withComponent('textarea'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", "em;\n  padding-bottom: ", "em;\n  line-height: ", ";\n"])), function (p) {
+var TextAreaField = (0, _styled["default"])(_Input.StyledInput.withComponent('textarea'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", "em;\n  padding-bottom: ", "em;\n  line-height: ", ";\n  resize: none;\n"])), function (p) {
   return p.theme.textAreaPaddingVertical;
 }, function (p) {
   return p.theme.textAreaPaddingVertical;
 }, function (p) {
   return p.theme.lineHeight;
 });
+var Addon = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('hasPadding'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ", ";\n\n  svg {\n    transform: scale(1.2);\n  }\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.inputColorPlaceholder);
+});
+var LeftAddon = (0, _styled["default"])(Addon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-right: ", "em;\n  ", "\n"])), function (p) {
+  return p.theme.inputAddonPaddingHorizontal;
+}, function (p) {
+  return p.hasPadding && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-left: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
+});
+var RightAddon = (0, _styled["default"])(Addon)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-left: ", "em;\n  ", "\n"])), function (p) {
+  return p.theme.inputAddonPaddingHorizontal;
+}, function (p) {
+  return p.hasPadding && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      padding-right: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
+});
 
 /**
  * The multiline input component.
  */
-var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref$disabled = _ref.disabled,
+var TextArea = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
+  var left = _ref.left,
+    _ref$leftHasPadding = _ref.leftHasPadding,
+    leftHasPadding = _ref$leftHasPadding === void 0 ? false : _ref$leftHasPadding,
+    right = _ref.right,
+    _ref$rightHasPadding = _ref.rightHasPadding,
+    rightHasPadding = _ref$rightHasPadding === void 0 ? false : _ref$rightHasPadding,
+    _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    containerRef = _ref.containerRef,
+    _ref$containerProps = _ref.containerProps,
+    containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
     size = _ref.size,
+    value = _ref.value,
     _ref$onChange = _ref.onChange,
     _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(TextAreaContainer, {
+  var _useForwardedRef = (0, _utils.useForwardedRef)(containerRef),
+    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+    innerContainerRef = _useForwardedRef2[0],
+    mergedContainerRef = _useForwardedRef2[1];
+  var rightValue = (0, _react2.useMemo)(function () {
+    return loading ? /*#__PURE__*/_react2["default"].createElement(_icons.Loading, null) : right;
+  }, [loading, right]);
+  var rightHasPaddingValue = (0, _react2.useMemo)(function () {
+    return loading ? true : rightHasPadding;
+  }, [loading, rightHasPadding]);
+  var onFocus = (0, _react2.useCallback)(function (e) {
+    // Focus the next element if the container element was focused.
+    // The next element will be the input or button in the addon.
+    if (disabled || e.target !== innerContainerRef.current) return;
+    var focusableElements = (0, _getFocusableElements["default"])(innerContainerRef.current);
+    focusableElements[0].focus();
+  }, [disabled, innerContainerRef]);
+  var onKeyDown = (0, _react2.useCallback)(function (e) {
+    // Focus the previous element if the first element in the input
+    // container is focused and the Shift + Tab combination is pressed.
+    var focusableElements = (0, _getFocusableElements["default"])(document);
+    var inputFocusableElements = innerContainerRef.current ? (0, _getFocusableElements["default"])(innerContainerRef.current) : [];
+    var firstInputElementIsFocused = inputFocusableElements[0] === document.activeElement;
+    if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
+      var inputContainerIndex = focusableElements.findIndex(function (el) {
+        return el === innerContainerRef.current;
+      });
+      if (inputContainerIndex === 0) return;
+      var elementBeforeInputContainer = focusableElements[inputContainerIndex - 1];
+      elementBeforeInputContainer.focus();
+    }
+  }, [innerContainerRef]);
+  return /*#__PURE__*/_react2["default"].createElement(TextAreaContainer, _extends({
     disabled: disabled,
-    size: size
-  }, /*#__PURE__*/_react["default"].createElement(TextAreaField, _extends({
+    size: size,
+    tabIndex: !disabled ? 0 : -1,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    ref: mergedContainerRef
+  }, containerProps), left && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
+    overrides: {
+      buttonPaddingHorizontal: 0.8
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(LeftAddon, {
+    hasPadding: leftHasPadding
+  }, left)), /*#__PURE__*/_react2["default"].createElement(TextAreaField, _extends({
     disabled: disabled,
+    hasLeft: !!left,
+    hasRight: !!right,
+    value: value || '',
     onChange: function onChange(e) {
       return _onChange(e.target.value, e);
     }
   }, rest, {
     ref: ref
-  })));
+  })), rightValue && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
+    overrides: {
+      buttonPaddingHorizontal: 0.8
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(RightAddon, {
+    hasPadding: rightHasPaddingValue
+  }, rightValue)));
 });
 TextArea.displayName = 'TextArea';
 var _default = TextArea;

package/dist/cjs/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TextAreaContainer","styled","InputContainer","p","theme","textAreaHeight","TextAreaField","StyledInput","withComponent","textAreaPaddingVertical","lineHeight","TextArea","forwardRef","ref","disabled","size","onChange","rest","e","target","value","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { WithSize } from '@os-design/styles';\nimport { InputContainer, StyledInput } from '../Input';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ disabled = false, size, onChange = () => {}, ...rest }, ref) => (\n    <TextAreaContainer disabled={disabled} size={size}>\n      <TextAreaField\n        disabled={disabled}\n        onChange={(e) => onChange(e.target.value, e)}\n        {...rest}\n        ref={ref}\n      />\n    </TextAreaContainer>\n  )\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAuD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBvD,IAAMA,iBAAiB,GAAG,IAAAC,kBAAM,EAACC,qBAAc,CAAC,2FACpC,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,cAAc;AAAA,EACxC;AAED,IAAMC,aAAa,GAAG,IAAAL,kBAAM,EAACM,kBAAW,CAACC,aAAa,CAAC,UAAU,CAAC,CAAC,mJAClD,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,uBAAuB;AAAA,GACnC,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,uBAAuB;AAAA,GACzC,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACM,UAAU;AAAA,EACzC;;AAED;AACA;AACA;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAA2DC,GAAG;EAAA,yBAA3DC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,qBAAEC,QAAQ;IAARA,SAAQ,8BAAG,YAAM,CAAC,CAAC;IAAKC,IAAI;EAAA,oBACrD,gCAAC,iBAAiB;IAAC,QAAQ,EAAEH,QAAS;IAAC,IAAI,EAAEC;EAAK,gBAChD,gCAAC,aAAa;IACZ,QAAQ,EAAED,QAAS;IACnB,QAAQ,EAAE,kBAACI,CAAC;MAAA,OAAKF,SAAQ,CAACE,CAAC,CAACC,MAAM,CAACC,KAAK,EAAEF,CAAC,CAAC;IAAA;EAAC,GACzCD,IAAI;IACR,GAAG,EAAEJ;EAAI,GACT,CACgB;AAAA,CACrB,CACF;AAEDF,QAAQ,CAACU,WAAW,GAAG,UAAU;AAAC,eAEnBV,QAAQ;AAAA"}
+{"version":3,"file":"index.js","names":["TextAreaContainer","styled","InputContainer","p","theme","textAreaHeight","TextAreaField","StyledInput","withComponent","textAreaPaddingVertical","lineHeight","Addon","omitEmotionProps","clr","inputColorPlaceholder","LeftAddon","inputAddonPaddingHorizontal","hasPadding","css","inputPaddingHorizontal","RightAddon","TextArea","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","disabled","loading","containerRef","containerProps","size","value","onChange","rest","useForwardedRef","innerContainerRef","mergedContainerRef","rightValue","useMemo","rightHasPaddingValue","onFocus","useCallback","e","target","current","focusableElements","getFocusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { InputContainer, StyledInput } from '../Input';\nimport getFocusableElements from '../Input/utils/getFocusableElements';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the textarea container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the textarea container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n  resize: none;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <TextAreaContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <TextAreaField\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </TextAreaContainer>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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"}

package/dist/cjs/TimePicker/index.js

@@ -19,7 +19,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

package/dist/cjs/message/styles.js

@@ -8,7 +8,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var containerStyles = {
   position: 'fixed',

package/dist/esm/Input/index.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
 import { omitEmotionProps, useForwardedRef } from '@os-design/utils';
 import styled from '@emotion/styled';
@@ -121,30 +121,32 @@ const Input = /*#__PURE__*/forwardRef(({
   const [innerContainerRef, mergedContainerRef] = useForwardedRef(containerRef);
   const rightValue = useMemo(() => loading ? /*#__PURE__*/React.createElement(Loading, null) : right, [loading, right]);
   const rightHasPaddingValue = useMemo(() => loading ? true : rightHasPadding, [loading, rightHasPadding]);
+  const onFocus = useCallback(e => {
+    // Focus the next element if the container element was focused.
+    // The next element will be the input or button in the addon.
+    if (disabled || e.target !== innerContainerRef.current) return;
+    const focusableElements = getFocusableElements(innerContainerRef.current);
+    focusableElements[0].focus();
+  }, [disabled, innerContainerRef]);
+  const onKeyDown = useCallback(e => {
+    // Focus the previous element if the first element in the input
+    // container is focused and the Shift + Tab combination is pressed.
+    const focusableElements = getFocusableElements(document);
+    const inputFocusableElements = innerContainerRef.current ? getFocusableElements(innerContainerRef.current) : [];
+    const firstInputElementIsFocused = inputFocusableElements[0] === document.activeElement;
+    if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
+      const inputContainerIndex = focusableElements.findIndex(el => el === innerContainerRef.current);
+      if (inputContainerIndex === 0) return;
+      const elementBeforeInputContainer = focusableElements[inputContainerIndex - 1];
+      elementBeforeInputContainer.focus();
+    }
+  }, [innerContainerRef]);
   return /*#__PURE__*/React.createElement(InputContainer, _extends({
     disabled: disabled,
     size: size,
     tabIndex: !disabled ? 0 : -1,
-    onFocus: e => {
-      // Focus the next element if the container element was focused.
-      // The next element will be the input or button in the addon.
-      if (disabled || e.target !== innerContainerRef.current) return;
-      const focusableElements = getFocusableElements(innerContainerRef.current);
-      focusableElements[0].focus();
-    },
-    onKeyDown: e => {
-      // Focus the previous element if the first element in the input
-      // container is focused and the Shift + Tab combination is pressed.
-      const focusableElements = getFocusableElements(document);
-      const inputFocusableElements = innerContainerRef.current ? getFocusableElements(innerContainerRef.current) : [];
-      const firstInputElementIsFocused = inputFocusableElements[0] === document.activeElement;
-      if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
-        const inputContainerIndex = focusableElements.findIndex(el => el === innerContainerRef.current);
-        if (inputContainerIndex === 0) return;
-        const elementBeforeInputContainer = focusableElements[inputContainerIndex - 1];
-        elementBeforeInputContainer.focus();
-      }
-    },
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
     ref: mergedContainerRef
   }, containerProps), left && /*#__PURE__*/React.createElement(ThemeOverrider, {
     overrides: {

package/dist/esm/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedRef","styled","clr","ThemeOverrider","css","Loading","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedRef","styled","clr","ThemeOverrider","css","Loading","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","onFocus","e","target","current","focusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/dist/esm/TextArea/index.js

@@ -1,7 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Loading } from '@os-design/icons';
+import { clr, ThemeOverrider } from '@os-design/theming';
+import { omitEmotionProps, useForwardedRef } from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { InputContainer, StyledInput } from '../Input';
+import getFocusableElements from '../Input/utils/getFocusableElements';
 const TextAreaContainer = styled(InputContainer)`
   height: ${p => p.theme.textAreaHeight}em;
 `;
@@ -9,25 +14,100 @@ const TextAreaField = styled(StyledInput.withComponent('textarea'))`
   padding-top: ${p => p.theme.textAreaPaddingVertical}em;
   padding-bottom: ${p => p.theme.textAreaPaddingVertical}em;
   line-height: ${p => p.theme.lineHeight};
+  resize: none;
+`;
+const Addon = styled('span', omitEmotionProps('hasPadding'))`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  color: ${p => clr(p.theme.inputColorPlaceholder)};
+
+  svg {
+    transform: scale(1.2);
+  }
+`;
+const LeftAddon = styled(Addon)`
+  padding-right: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-left: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+const RightAddon = styled(Addon)`
+  padding-left: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-right: ${p.theme.inputPaddingHorizontal}em;
+    `}
 `;
 
 /**
  * The multiline input component.
  */
 const TextArea = /*#__PURE__*/forwardRef(({
+  left,
+  leftHasPadding = false,
+  right,
+  rightHasPadding = false,
   disabled = false,
+  loading = false,
+  containerRef,
+  containerProps = {},
   size,
+  value,
   onChange = () => {},
   ...rest
-}, ref) => /*#__PURE__*/React.createElement(TextAreaContainer, {
-  disabled: disabled,
-  size: size
-}, /*#__PURE__*/React.createElement(TextAreaField, _extends({
-  disabled: disabled,
-  onChange: e => onChange(e.target.value, e)
-}, rest, {
-  ref: ref
-}))));
+}, ref) => {
+  const [innerContainerRef, mergedContainerRef] = useForwardedRef(containerRef);
+  const rightValue = useMemo(() => loading ? /*#__PURE__*/React.createElement(Loading, null) : right, [loading, right]);
+  const rightHasPaddingValue = useMemo(() => loading ? true : rightHasPadding, [loading, rightHasPadding]);
+  const onFocus = useCallback(e => {
+    // Focus the next element if the container element was focused.
+    // The next element will be the input or button in the addon.
+    if (disabled || e.target !== innerContainerRef.current) return;
+    const focusableElements = getFocusableElements(innerContainerRef.current);
+    focusableElements[0].focus();
+  }, [disabled, innerContainerRef]);
+  const onKeyDown = useCallback(e => {
+    // Focus the previous element if the first element in the input
+    // container is focused and the Shift + Tab combination is pressed.
+    const focusableElements = getFocusableElements(document);
+    const inputFocusableElements = innerContainerRef.current ? getFocusableElements(innerContainerRef.current) : [];
+    const firstInputElementIsFocused = inputFocusableElements[0] === document.activeElement;
+    if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
+      const inputContainerIndex = focusableElements.findIndex(el => el === innerContainerRef.current);
+      if (inputContainerIndex === 0) return;
+      const elementBeforeInputContainer = focusableElements[inputContainerIndex - 1];
+      elementBeforeInputContainer.focus();
+    }
+  }, [innerContainerRef]);
+  return /*#__PURE__*/React.createElement(TextAreaContainer, _extends({
+    disabled: disabled,
+    size: size,
+    tabIndex: !disabled ? 0 : -1,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    ref: mergedContainerRef
+  }, containerProps), left && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: {
+      buttonPaddingHorizontal: 0.8
+    }
+  }, /*#__PURE__*/React.createElement(LeftAddon, {
+    hasPadding: leftHasPadding
+  }, left)), /*#__PURE__*/React.createElement(TextAreaField, _extends({
+    disabled: disabled,
+    hasLeft: !!left,
+    hasRight: !!right,
+    value: value || '',
+    onChange: e => onChange(e.target.value, e)
+  }, rest, {
+    ref: ref
+  })), rightValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: {
+      buttonPaddingHorizontal: 0.8
+    }
+  }, /*#__PURE__*/React.createElement(RightAddon, {
+    hasPadding: rightHasPaddingValue
+  }, rightValue)));
+});
 TextArea.displayName = 'TextArea';
 export default TextArea;
 //# sourceMappingURL=index.js.map

package/dist/esm/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","InputContainer","StyledInput","TextAreaContainer","p","theme","textAreaHeight","TextAreaField","withComponent","textAreaPaddingVertical","lineHeight","TextArea","disabled","size","onChange","rest","ref","e","target","value","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { WithSize } from '@os-design/styles';\nimport { InputContainer, StyledInput } from '../Input';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ disabled = false, size, onChange = () => {}, ...rest }, ref) => (\n    <TextAreaContainer disabled={disabled} size={size}>\n      <TextAreaField\n        disabled={disabled}\n        onChange={(e) => onChange(e.target.value, e)}\n        {...rest}\n        ref={ref}\n      />\n    </TextAreaContainer>\n  )\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAiBC,UAAU,QAAQ,OAAO;AACtD,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,cAAc,EAAEC,WAAW,QAAQ,UAAU;AAwBtD,MAAMC,iBAAiB,GAAGH,MAAM,CAACC,cAAc,CAAE;AACjD,YAAaG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,cAAe;AAC1C,CAAC;AAED,MAAMC,aAAa,GAAGP,MAAM,CAACE,WAAW,CAACM,aAAa,CAAC,UAAU,CAAC,CAAE;AACpE,iBAAkBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,uBAAwB;AACxD,oBAAqBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,uBAAwB;AAC3D,iBAAkBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,UAAW;AAC3C,CAAC;;AAED;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGZ,UAAU,CACzB,CAAC;EAAEa,QAAQ,GAAG,KAAK;EAAEC,IAAI;EAAEC,QAAQ,GAAG,MAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC5D,oBAAC,iBAAiB;EAAC,QAAQ,EAAEJ,QAAS;EAAC,IAAI,EAAEC;AAAK,gBAChD,oBAAC,aAAa;EACZ,QAAQ,EAAED,QAAS;EACnB,QAAQ,EAAGK,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,MAAM,CAACC,KAAK,EAAEF,CAAC;AAAE,GACzCF,IAAI;EACR,GAAG,EAAEC;AAAI,GACT,CAEL,CACF;AAEDL,QAAQ,CAACS,WAAW,GAAG,UAAU;AAEjC,eAAeT,QAAQ"}
+{"version":3,"file":"index.js","names":["css","styled","Loading","clr","ThemeOverrider","omitEmotionProps","useForwardedRef","React","forwardRef","useCallback","useMemo","InputContainer","StyledInput","getFocusableElements","TextAreaContainer","p","theme","textAreaHeight","TextAreaField","withComponent","textAreaPaddingVertical","lineHeight","Addon","inputColorPlaceholder","LeftAddon","inputAddonPaddingHorizontal","hasPadding","inputPaddingHorizontal","RightAddon","TextArea","left","leftHasPadding","right","rightHasPadding","disabled","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","onFocus","e","target","current","focusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { InputContainer, StyledInput } from '../Input';\nimport getFocusableElements from '../Input/utils/getFocusableElements';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the textarea container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the textarea container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n  resize: none;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <TextAreaContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <TextAreaField\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </TextAreaContainer>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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"}

package/dist/types/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAC9E,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IAKzD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAK7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAK5C,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAK9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAsCD,KAAK,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AACjE,eAAO,MAAM,cAAc;;;2GAqB1B,CAAC;AAcF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;;iHAoBvB,CAAC;AAqCF,QAAA,MAAM,KAAK,qFA+FV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EAEX,YAAY,EAKb,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IAKzD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAK7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAK5C,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAK9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAsCD,KAAK,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AACjE,eAAO,MAAM,cAAc;;;2GAqB1B,CAAC;AAcF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;;iHAoBvB,CAAC;AAqCF,QAAA,MAAM,KAAK,qFAyGV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/types/TextArea/index.d.ts

@@ -1,8 +1,15 @@
-import React, { ChangeEvent } from 'react';
 import { WithSize } from '@os-design/styles';
+import React, { ChangeEvent, ForwardedRef } from 'react';
 type JsxTextAreaProps = Omit<JSX.IntrinsicElements['textarea'], 'value' | 'onChange' | 'ref'>;
 export interface TextAreaProps extends JsxTextAreaProps, WithSize {
+    left?: React.ReactNode;
+    leftHasPadding?: boolean;
+    right?: React.ReactNode;
+    rightHasPadding?: boolean;
     disabled?: boolean;
+    loading?: boolean;
+    containerRef?: ForwardedRef<HTMLDivElement>;
+    containerProps?: JSX.IntrinsicElements['div'];
     value?: string;
     onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
 }

package/dist/types/TextArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,KAAK,gBAAgB,GAAG,IAAI,CAC1B,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EACjC,OAAO,GAAG,UAAU,GAAG,KAAK,CAC7B,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,QAAQ;IAK/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACzE;AAeD,QAAA,MAAM,QAAQ,2FAWb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextArea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,KAAK,EAAE,EACZ,WAAW,EAEX,YAAY,EAKb,MAAM,OAAO,CAAC;AAIf,KAAK,gBAAgB,GAAG,IAAI,CAC1B,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EACjC,OAAO,GAAG,UAAU,GAAG,KAAK,CAC7B,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,QAAQ;IAK/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAK5C,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAK9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACzE;AAgDD,QAAA,MAAM,QAAQ,2FAuGb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.186",
+  "version": "1.0.189",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -58,5 +58,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "2dbd5dc78c987a313373c4f7e5e72061ab73a514"
+  "gitHead": "1a496123c39b4fc9aa20dbd67baea0e93787553f"
 }