@os-design/core 1.0.185 → 1.0.187

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","forwardRef","ref","help","error","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","input","c","React","isValidElement","cloneElement","undefined","inputColorBorder","firstTypeIs","useCallback","component","firstChildHasType","skeleton","Checkbox","firstChild","Children","toArray","props","RadioGroup","Switch","TextArea","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport Checkbox from '../Checkbox';\nimport CheckboxSkeleton from '../CheckboxSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport InputSkeleton from '../InputSkeleton';\nimport RadioGroup from '../RadioGroup';\nimport RadioGroupSkeleton from '../RadioGroupSkeleton';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport firstChildHasType from './utils/firstChildHasType';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * The error message located at the bottom of the field.\n   * If specified, the field has a red border.\n   * @default undefined\n   */\n  error?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n  color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      error,\n      optional = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const input = useMemo(() => {\n      const c = React.isValidElement(children)\n        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': !!error,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!error) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, error, fieldId, help, helpId]);\n\n    const firstTypeIs = useCallback(\n      (component: React.FC) => firstChildHasType(children, component),\n      [children]\n    );\n\n    const skeleton = useMemo(() => {\n      if (firstTypeIs(Checkbox)) {\n        const firstChild = React.Children.toArray(children)[0];\n        return (\n          <CheckboxSkeleton>\n            {React.isValidElement(firstChild) && firstChild.props.children}\n          </CheckboxSkeleton>\n        );\n      }\n      if (firstTypeIs(RadioGroup)) return <RadioGroupSkeleton />;\n      if (firstTypeIs(Switch)) return <SwitchSkeleton />;\n      if (firstTypeIs(TextArea)) return <TextAreaSkeleton />;\n      return <InputSkeleton />;\n    }, [children, firstTypeIs]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? skeleton : input}\n        {error ? (\n          <Error aria-live='polite' id={helpId}>\n            {error}\n          </Error>\n        ) : (\n          help && <Help id={helpId}>{help}</Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","forwardRef","ref","help","error","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","input","c","React","isValidElement","cloneElement","undefined","inputColorBorder","firstTypeIs","useCallback","component","firstChildHasType","skeleton","Checkbox","firstChild","Children","toArray","props","RadioGroup","Switch","TextArea","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport Checkbox from '../Checkbox';\nimport CheckboxSkeleton from '../CheckboxSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport InputSkeleton from '../InputSkeleton';\nimport RadioGroup from '../RadioGroup';\nimport RadioGroupSkeleton from '../RadioGroupSkeleton';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport firstChildHasType from './utils/firstChildHasType';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * The error message located at the bottom of the field.\n   * If specified, the field has a red border.\n   * @default undefined\n   */\n  error?: string | null;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n  color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      error,\n      optional = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const input = useMemo(() => {\n      const c = React.isValidElement(children)\n        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': !!error,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!error) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, error, fieldId, help, helpId]);\n\n    const firstTypeIs = useCallback(\n      (component: React.FC) => firstChildHasType(children, component),\n      [children]\n    );\n\n    const skeleton = useMemo(() => {\n      if (firstTypeIs(Checkbox)) {\n        const firstChild = React.Children.toArray(children)[0];\n        return (\n          <CheckboxSkeleton>\n            {React.isValidElement(firstChild) && firstChild.props.children}\n          </CheckboxSkeleton>\n        );\n      }\n      if (firstTypeIs(RadioGroup)) return <RadioGroupSkeleton />;\n      if (firstTypeIs(Switch)) return <SwitchSkeleton />;\n      if (firstTypeIs(TextArea)) return <TextAreaSkeleton />;\n      return <InputSkeleton />;\n    }, [children, firstTypeIs]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? skeleton : input}\n        {error ? (\n          <Error aria-live='polite' id={helpId}>\n            {error}\n          </Error>\n        ) : (\n          help && <Help id={helpId}>{help}</Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}

package/dist/cjs/Input/index.js

@@ -109,32 +109,34 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var rightHasPaddingValue = (0, _react.useMemo)(function () {
     return loading ? true : rightHasPadding;
   }, [loading, rightHasPadding]);
+  var onFocus = (0, _react.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, _react.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__*/_react["default"].createElement(InputContainer, _extends({
     disabled: disabled,
     size: size,
     tabIndex: !disabled ? 0 : -1,
-    onFocus: function 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;
-      var focusableElements = (0, _getFocusableElements["default"])(innerContainerRef.current);
-      focusableElements[0].focus();
-    },
-    onKeyDown: function onKeyDown(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();
-      }
-    },
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
     ref: mergedContainerRef
   }, containerProps), left && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     overrides: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["hoverStyles","p","disabled","css","clr","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","styled","omitEmotionProps","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","transitionStyles","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","forwardRef","ref","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","useForwardedRef","innerContainerRef","mergedContainerRef","rightValue","useMemo","rightHasPaddingValue","e","target","current","focusableElements","getFocusableElements","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":["hoverStyles","p","disabled","css","clr","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","styled","omitEmotionProps","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","transitionStyles","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","forwardRef","ref","type","left","leftHasPadding","right","rightHasPadding","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/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/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 = 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 _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/esm/FormItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","ThemeOverrider","omitEmotionProps","React","forwardRef","useCallback","useContext","useMemo","Checkbox","CheckboxSkeleton","FormConfigContext","InputSkeleton","RadioGroup","RadioGroupSkeleton","Switch","SwitchSkeleton","TextArea","TextAreaSkeleton","firstChildHasType","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","help","error","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","input","c","isValidElement","cloneElement","undefined","inputColorBorder","firstTypeIs","component","skeleton","firstChild","Children","toArray","props","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport Checkbox from '../Checkbox';\nimport CheckboxSkeleton from '../CheckboxSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport InputSkeleton from '../InputSkeleton';\nimport RadioGroup from '../RadioGroup';\nimport RadioGroupSkeleton from '../RadioGroupSkeleton';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport firstChildHasType from './utils/firstChildHasType';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * The error message located at the bottom of the field.\n   * If specified, the field has a red border.\n   * @default undefined\n   */\n  error?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n  color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      error,\n      optional = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const input = useMemo(() => {\n      const c = React.isValidElement(children)\n        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': !!error,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!error) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, error, fieldId, help, helpId]);\n\n    const firstTypeIs = useCallback(\n      (component: React.FC) => firstChildHasType(children, component),\n      [children]\n    );\n\n    const skeleton = useMemo(() => {\n      if (firstTypeIs(Checkbox)) {\n        const firstChild = React.Children.toArray(children)[0];\n        return (\n          <CheckboxSkeleton>\n            {React.isValidElement(firstChild) && firstChild.props.children}\n          </CheckboxSkeleton>\n        );\n      }\n      if (firstTypeIs(RadioGroup)) return <RadioGroupSkeleton />;\n      if (firstTypeIs(Switch)) return <SwitchSkeleton />;\n      if (firstTypeIs(TextArea)) return <TextAreaSkeleton />;\n      return <InputSkeleton />;\n    }, [children, firstTypeIs]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? skeleton : input}\n        {error ? (\n          <Error aria-live='polite' id={helpId}>\n            {error}\n          </Error>\n        ) : (\n          help && <Help id={helpId}>{help}</Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","ThemeOverrider","omitEmotionProps","React","forwardRef","useCallback","useContext","useMemo","Checkbox","CheckboxSkeleton","FormConfigContext","InputSkeleton","RadioGroup","RadioGroupSkeleton","Switch","SwitchSkeleton","TextArea","TextAreaSkeleton","firstChildHasType","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","help","error","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","input","c","isValidElement","cloneElement","undefined","inputColorBorder","firstTypeIs","component","skeleton","firstChild","Children","toArray","props","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport Checkbox from '../Checkbox';\nimport CheckboxSkeleton from '../CheckboxSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport InputSkeleton from '../InputSkeleton';\nimport RadioGroup from '../RadioGroup';\nimport RadioGroupSkeleton from '../RadioGroupSkeleton';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport firstChildHasType from './utils/firstChildHasType';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * The error message located at the bottom of the field.\n   * If specified, the field has a red border.\n   * @default undefined\n   */\n  error?: string | null;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n  color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      error,\n      optional = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const input = useMemo(() => {\n      const c = React.isValidElement(children)\n        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': !!error,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!error) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, error, fieldId, help, helpId]);\n\n    const firstTypeIs = useCallback(\n      (component: React.FC) => firstChildHasType(children, component),\n      [children]\n    );\n\n    const skeleton = useMemo(() => {\n      if (firstTypeIs(Checkbox)) {\n        const firstChild = React.Children.toArray(children)[0];\n        return (\n          <CheckboxSkeleton>\n            {React.isValidElement(firstChild) && firstChild.props.children}\n          </CheckboxSkeleton>\n        );\n      }\n      if (firstTypeIs(RadioGroup)) return <RadioGroupSkeleton />;\n      if (firstTypeIs(Switch)) return <SwitchSkeleton />;\n      if (firstTypeIs(TextArea)) return <TextAreaSkeleton />;\n      return <InputSkeleton />;\n    }, [children, firstTypeIs]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? skeleton : input}\n        {error ? (\n          <Error aria-live='polite' id={helpId}>\n            {error}\n          </Error>\n        ) : (\n          help && <Help id={helpId}>{help}</Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}

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/FormItem/index.d.ts

@@ -4,7 +4,7 @@ type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface FormItemProps extends JsxDivProps, WithSize {
     label?: string;
     help?: string;
-    error?: string;
+    error?: string | null;
     optional?: boolean;
     loading?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAAuD,MAAM,OAAO,CAAC;AAa5E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,QAAQ;IAK1D,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgCD,QAAA,MAAM,QAAQ,sFAqFb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAAuD,MAAM,OAAO,CAAC;AAa5E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,QAAQ;IAK1D,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAKtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgCD,QAAA,MAAM,QAAQ,sFAqFb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

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.185",
+  "version": "1.0.187",
   "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": "7859a613f18e75724fea40b609aae6a1ff2b3873"
+  "gitHead": "5a682a07301c596be544275f4ce4864e02e08010"
 }