@channel.io/bezier-react 1.4.0 → 1.6.0

package/dist/esm/components/Forms/Inputs/TextArea/TextArea.mjs

@@ -0,0 +1,101 @@
+import React__default, { forwardRef, useRef, useState, useMemo, useCallback, useLayoutEffect } from 'react';
+import useMergeRefs from '../../../../hooks/useMergeRefs.mjs';
+import { COMMON_IME_CONTROL_KEYS } from '../constants/CommonImeControlKeys.mjs';
+import useFormFieldProps from '../../useFormFieldProps.mjs';
+import useKeyboardActionLockerWhileComposing from '../../useKeyboardActionLockerWhileComposing.mjs';
+import { TextAreaHeight } from './TextArea.types.mjs';
+import { getTextAreaBgColorSemanticName } from './utils.mjs';
+import Styled from './TextArea.styled.mjs';
+
+const TEXT_AREA_TEST_ID = 'bezier-react-text-area';
+function TextArea({
+  interpolation,
+  wrapperInterpolation,
+  className,
+  wrapperClassName,
+  style,
+  wrapperStyle,
+  testId = TEXT_AREA_TEST_ID,
+  minRows = TextAreaHeight.Row6,
+  maxRows = TextAreaHeight.Row6,
+  autoFocus = false,
+  value = '',
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  ...rest
+}, forwardedRef) {
+  const {
+    disabled,
+    readOnly,
+    hasError,
+    ...ownProps
+  } = useFormFieldProps(rest);
+  const inputRef = useRef(null);
+  const mergedInputRef = useMergeRefs(inputRef, forwardedRef);
+  const activeInput = !disabled && !readOnly;
+  const [focused, setFocused] = useState(false);
+  const bgColorSemanticName = useMemo(() => getTextAreaBgColorSemanticName({
+    focused,
+    hasError,
+    readOnly
+  }), [focused, hasError, readOnly]);
+  const handleFocus = useCallback(event => {
+    if (!activeInput) {
+      return;
+    }
+    setFocused(true);
+    onFocus?.(event);
+  }, [onFocus, activeInput]);
+  const handleBlur = useCallback(event => {
+    setFocused(false);
+    onBlur?.(event);
+  }, [onBlur]);
+  const {
+    handleKeyDown,
+    handleKeyUp
+  } = useKeyboardActionLockerWhileComposing({
+    keysToLock: COMMON_IME_CONTROL_KEYS,
+    onKeyDown,
+    onKeyUp
+  });
+
+  // eslint-disable-next-line prefer-arrow-callback
+  useLayoutEffect(function initialAutoFocus() {
+    function setSelectionToEnd() {
+      inputRef.current?.setSelectionRange(inputRef.current?.value.length, inputRef.current?.value.length);
+    }
+    if (autoFocus) {
+      inputRef.current?.focus();
+      setSelectionToEnd();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Styled.Wrapper, {
+    className: className,
+    interpolation: interpolation,
+    focused: focused,
+    hasError: hasError,
+    disabled: disabled,
+    bgColor: bgColorSemanticName,
+    "data-testid": testId
+  }, /*#__PURE__*/React__default.createElement(Styled.TextAreaAutoSizeBase, Object.assign({}, ownProps, {
+    ref: mergedInputRef,
+    value: value,
+    disabled: disabled,
+    readOnly: readOnly,
+    maxRows: maxRows,
+    minRows: minRows,
+    onChange: onChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  })));
+}
+var TextArea$1 = /*#__PURE__*/forwardRef(TextArea);
+
+export { TEXT_AREA_TEST_ID, TextArea$1 as default };
+//# sourceMappingURL=TextArea.mjs.map

package/dist/esm/components/Forms/Inputs/TextArea/TextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.mjs","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { COMMON_IME_CONTROL_KEYS } from '~/src/components/Forms/Inputs/constants/CommonImeControlKeys'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport useKeyboardActionLockerWhileComposing from '~/src/components/Forms/useKeyboardActionLockerWhileComposing'\n\nimport type TextAreaProps from './TextArea.types'\nimport { TextAreaHeight } from './TextArea.types'\nimport { getTextAreaBgColorSemanticName } from './utils'\n\nimport Styled from './TextArea.styled'\n\nexport const TEXT_AREA_TEST_ID = 'bezier-react-text-area'\n\nfunction TextArea({\n  interpolation,\n  wrapperInterpolation,\n  className,\n  wrapperClassName,\n  style,\n  wrapperStyle,\n  testId = TEXT_AREA_TEST_ID,\n  minRows = TextAreaHeight.Row6,\n  maxRows = TextAreaHeight.Row6,\n  autoFocus = false,\n  value = '',\n  onFocus,\n  onBlur,\n  onChange,\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}: TextAreaProps,\nforwardedRef: Ref<HTMLTextAreaElement>,\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const inputRef = useRef<HTMLTextAreaElement | null>(null)\n  const mergedInputRef = useMergeRefs<HTMLTextAreaElement>(inputRef, forwardedRef)\n\n  const activeInput = !disabled && !readOnly\n\n  const [focused, setFocused] = useState(false)\n\n  const bgColorSemanticName = useMemo(() => (\n    getTextAreaBgColorSemanticName({\n      focused,\n      hasError,\n      readOnly,\n    })\n  ), [\n    focused,\n    hasError,\n    readOnly,\n  ])\n\n  const handleFocus = useCallback((event: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (!activeInput) { return }\n    setFocused(true)\n    onFocus?.(event)\n  }, [\n    onFocus,\n    activeInput,\n  ])\n\n  const handleBlur = useCallback((event: React.FocusEvent<HTMLTextAreaElement>) => {\n    setFocused(false)\n    onBlur?.(event)\n  }, [onBlur])\n\n  const {\n    handleKeyDown,\n    handleKeyUp,\n  } = useKeyboardActionLockerWhileComposing({\n    keysToLock: COMMON_IME_CONTROL_KEYS,\n    onKeyDown,\n    onKeyUp,\n  })\n\n  // eslint-disable-next-line prefer-arrow-callback\n  useLayoutEffect(function initialAutoFocus() {\n    function setSelectionToEnd() {\n      inputRef.current?.setSelectionRange(inputRef.current?.value.length, inputRef.current?.value.length)\n    }\n\n    if (autoFocus) {\n      inputRef.current?.focus()\n      setSelectionToEnd()\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <Styled.Wrapper\n      className={className}\n      interpolation={interpolation}\n      focused={focused}\n      hasError={hasError}\n      disabled={disabled}\n      bgColor={bgColorSemanticName}\n      data-testid={testId}\n    >\n      <Styled.TextAreaAutoSizeBase\n        {...ownProps}\n        ref={mergedInputRef}\n        value={value}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxRows={maxRows}\n        minRows={minRows}\n        onChange={onChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n      />\n    </Styled.Wrapper>\n  )\n}\n\nexport default forwardRef(TextArea)\n"],"names":["TEXT_AREA_TEST_ID","TextArea","interpolation","wrapperInterpolation","className","wrapperClassName","style","wrapperStyle","testId","minRows","TextAreaHeight","Row6","maxRows","autoFocus","value","onFocus","onBlur","onChange","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","activeInput","focused","setFocused","useState","bgColorSemanticName","useMemo","getTextAreaBgColorSemanticName","handleFocus","useCallback","event","handleBlur","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useLayoutEffect","initialAutoFocus","setSelectionToEnd","current","setSelectionRange","length","focus","React","createElement","Styled","Wrapper","bgColor","TextAreaAutoSizeBase","Object","assign","ref","forwardRef"],"mappings":"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"}

package/dist/esm/components/Forms/Inputs/TextArea/TextArea.styled.mjs

@@ -0,0 +1,41 @@
+import TextareaAutosize from '../../../../node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.mjs';
+import disabledOpacity from '../../../../constants/DisabledOpacity.mjs';
+import { inputWrapperStyle, focusedInputWrapperStyle, erroredInputWrapperStyle, inputTextStyle, inputPlaceholderStyle } from '../mixins.mjs';
+import { hideScrollbars } from '../../../../foundation/Mixins.mjs';
+import { styled as FoundationStyled } from '../../../../foundation/FoundationStyledComponent.mjs';
+import { Typography } from '../../../../foundation/Typography.mjs';
+
+const Wrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "TextAreastyled__Wrapper",
+  componentId: "sc-14a5gh6-0"
+})(["", ";box-sizing:border-box;display:flex;align-items:center;background-color:", ";opacity:", ";", " ", " ", " ", ";", ""], inputWrapperStyle, ({
+  foundation,
+  bgColor
+}) => foundation?.theme?.[bgColor], ({
+  disabled
+}) => disabled && disabledOpacity, ({
+  focused
+}) => focused && focusedInputWrapperStyle, ({
+  hasError
+}) => hasError && erroredInputWrapperStyle, ({
+  foundation
+}) => foundation?.rounding.round8, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow']), ({
+  interpolation
+}) => interpolation);
+const TextAreaAutoSizeBase = /*#__PURE__*/FoundationStyled(TextareaAutosize).withConfig({
+  displayName: "TextAreastyled__TextAreaAutoSizeBase",
+  componentId: "sc-14a5gh6-1"
+})(["box-sizing:border-box;width:100%;padding:8px 12px;margin:0;cursor:", ";resize:none;background:none;border:none;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'auto', hideScrollbars(), Typography.Size14, inputTextStyle, inputPlaceholderStyle, Typography.Size14, ({
+  interpolation
+}) => interpolation);
+var Styled = {
+  Wrapper,
+  TextAreaAutoSizeBase
+};
+
+export { Styled as default };
+//# sourceMappingURL=TextArea.styled.mjs.map

package/dist/esm/components/Forms/Inputs/TextArea/TextArea.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styled.mjs","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.styled.ts"],"sourcesContent":["import TextareaAutosize from 'react-textarea-autosize'\n\nimport {\n  type SemanticNames,\n  Typography,\n  hideScrollbars,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport {\n  erroredInputWrapperStyle,\n  focusedInputWrapperStyle,\n  inputPlaceholderStyle,\n  inputTextStyle,\n  inputWrapperStyle,\n} from '~/src/components/Forms/Inputs/mixins'\n\ninterface WrapperProps extends InterpolationProps {\n  focused: boolean\n  hasError?: boolean\n  bgColor: SemanticNames\n  disabled: boolean\n}\n\nconst Wrapper = styled.div<WrapperProps>`\n  ${inputWrapperStyle};\n\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background-color: ${({ foundation, bgColor }) => foundation?.theme?.[bgColor]};\n  opacity: ${({ disabled }) => disabled && DisabledOpacity};\n\n  ${({ focused }) => focused && focusedInputWrapperStyle}\n\n  ${({ hasError }) => hasError && erroredInputWrapperStyle}\n\n  ${({ foundation }) => foundation?.rounding.round8}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow'])};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface TextAreaAutoSizeBaseProps extends InterpolationProps {\n  disabled: boolean\n  readOnly: boolean\n}\n\nconst TextAreaAutoSizeBase = styled(TextareaAutosize)<TextAreaAutoSizeBaseProps>`\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 12px;\n  margin: 0;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};\n  resize: none;\n  background: none;\n  border: none;\n  outline: none;\n\n  ${hideScrollbars()}\n\n  ${Typography.Size14}\n\n  ${inputTextStyle}\n\n  ${inputPlaceholderStyle}\n\n  &::placeholder {\n    ${Typography.Size14}\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport default {\n  Wrapper,\n  TextAreaAutoSizeBase,\n}\n"],"names":["Wrapper","styled","div","withConfig","displayName","componentId","inputWrapperStyle","foundation","bgColor","theme","disabled","DisabledOpacity","focused","focusedInputWrapperStyle","hasError","erroredInputWrapperStyle","rounding","round8","transition","getTransitionsCSS","interpolation","TextAreaAutoSizeBase","TextareaAutosize","hideScrollbars","Typography","Size14","inputTextStyle","inputPlaceholderStyle"],"mappings":";;;;;;;AA2BA,MAAMA,OAAO,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACtBC,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,0EAAAA,EAAAA,WAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,iBAAiB,EAKC,CAAC;EAAEC,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGD,OAAO,CAAC,EAClE,CAAC;AAAEE,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,eAAe,EAEtD,CAAC;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKA,OAAO,IAAIC,wBAAwB,EAEpD,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,wBAAwB,EAEtD,CAAC;AAAER,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAES,QAAQ,CAACC,MAAM,EAE/C,CAAC;AAAEV,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEW,UAAU,EAAEC,iBAAiB,CAAC,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAE7F,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAOD,MAAMC,oBAAoB,gBAAGpB,gBAAM,CAACqB,gBAAgB,CAAC,CAAAnB,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oEAAA,EAAA,wDAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,kBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAKzC,CAAC;AAAEK,EAAAA,QAAAA;AAAS,CAAC,KAAMA,QAAQ,GAAG,aAAa,GAAG,MAAO,EAM7Da,cAAc,EAAE,EAEhBC,UAAU,CAACC,MAAM,EAEjBC,cAAc,EAEdC,qBAAqB,EAGnBH,UAAU,CAACC,MAAM,EAGnB,CAAC;AAAEL,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,aAAe;EACbpB,OAAO;AACPqB,EAAAA,oBAAAA;AACF,CAAC;;;;"}

package/dist/esm/components/Forms/Inputs/TextArea/TextArea.types.mjs

@@ -0,0 +1,12 @@
+let TextAreaHeight = /*#__PURE__*/function (TextAreaHeight) {
+  TextAreaHeight[TextAreaHeight["Row3"] = 3] = "Row3";
+  TextAreaHeight[TextAreaHeight["Row6"] = 6] = "Row6";
+  TextAreaHeight[TextAreaHeight["Row10"] = 10] = "Row10";
+  TextAreaHeight[TextAreaHeight["Row16"] = 16] = "Row16";
+  TextAreaHeight[TextAreaHeight["Row24"] = 24] = "Row24";
+  TextAreaHeight[TextAreaHeight["Row36"] = 36] = "Row36";
+  return TextAreaHeight;
+}({});
+
+export { TextAreaHeight };
+//# sourceMappingURL=TextArea.types.mjs.map

package/dist/esm/components/Forms/Inputs/TextArea/TextArea.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.types.mjs","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport type {\n  AdditionalStylableProps,\n  BezierComponentProps,\n} from '~/src/types/ComponentProps'\n\nimport { type FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport enum TextAreaHeight {\n  Row3 = 3,\n  Row6 = 6,\n  Row10 = 10,\n  Row16 = 16,\n  Row24 = 24,\n  Row36 = 36,\n}\n\ntype TextAreaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>\n\ninterface TextAreaOptions {\n  minRows?: TextAreaHeight\n  maxRows?: TextAreaHeight\n  autoFocus?: boolean\n  onFocus?: TextAreaChangeEventHandler\n  onBlur?: TextAreaChangeEventHandler\n  onChange?: TextAreaChangeEventHandler\n}\n\ntype OmittedTextareaHTMLAttributes = keyof FormComponentProps | 'onFocus' | 'onBlur'\n\nexport default interface TextAreaProps extends\n  BezierComponentProps,\n  FormComponentProps,\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, OmittedTextareaHTMLAttributes>,\n  AdditionalStylableProps<'wrapper'>,\n  TextAreaOptions {}\n"],"names":["TextAreaHeight"],"mappings":"AASYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/components/Forms/Inputs/TextArea/utils.mjs

@@ -0,0 +1,16 @@
+function getTextAreaBgColorSemanticName({
+  focused,
+  hasError,
+  readOnly
+}) {
+  if (readOnly) {
+    return 'bg-grey-lighter';
+  }
+  if (focused || hasError) {
+    return 'bg-white-normal';
+  }
+  return 'bg-grey-lightest';
+}
+
+export { getTextAreaBgColorSemanticName };
+//# sourceMappingURL=utils.mjs.map

package/dist/esm/components/Forms/Inputs/TextArea/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../../../../../../src/components/Forms/Inputs/TextArea/utils.ts"],"sourcesContent":["import { type SemanticNames } from '~/src/foundation'\n\ninterface CalculateBgColorProps {\n  focused: boolean\n  hasError: boolean\n  readOnly: boolean\n}\n\nexport function getTextAreaBgColorSemanticName({\n  focused,\n  hasError,\n  readOnly,\n}: CalculateBgColorProps): SemanticNames {\n  if (readOnly) { return 'bg-grey-lighter' }\n  if (focused || hasError) { return 'bg-white-normal' }\n  return 'bg-grey-lightest'\n}\n"],"names":["getTextAreaBgColorSemanticName","focused","hasError","readOnly"],"mappings":"AAQO,SAASA,8BAA8BA,CAAC;EAC7CC,OAAO;EACPC,QAAQ;AACRC,EAAAA,QAAAA;AACqB,CAAC,EAAiB;AACvC,EAAA,IAAIA,QAAQ,EAAE;AAAE,IAAA,OAAO,iBAAiB,CAAA;AAAC,GAAA;EACzC,IAAIF,OAAO,IAAIC,QAAQ,EAAE;AAAE,IAAA,OAAO,iBAAiB,CAAA;AAAC,GAAA;AACpD,EAAA,OAAO,kBAAkB,CAAA;AAC3B;;;;"}

package/dist/esm/components/Forms/Inputs/TextField/TextField.mjs

@@ -0,0 +1,277 @@
+import React__default, { forwardRef, useState, useMemo, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+import { CancelCircleFilledIcon } from '@channel.io/bezier-icons';
+import { window } from '../../../../utils/domUtils.mjs';
+import { toString } from '../../../../utils/stringUtils.mjs';
+import { isNil, isEmpty, isArray } from '../../../../utils/typeUtils.mjs';
+import { COMMON_IME_CONTROL_KEYS } from '../constants/CommonImeControlKeys.mjs';
+import useFormFieldProps from '../../useFormFieldProps.mjs';
+import useKeyboardActionLockerWhileComposing from '../../useKeyboardActionLockerWhileComposing.mjs';
+import { TextFieldType, TextFieldSize, TextFieldVariant } from './TextField.types.mjs';
+import { getProperTextFieldBgColor, getProperTextFieldBorderRadius } from './TextFieldUtils.mjs';
+import Styled from './TextField.styled.mjs';
+import { IconSize } from '../../../Icon/Icon.types.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
+import v4 from '../../../../node_modules/uuid/dist/esm-browser/v4.mjs';
+
+const TEXT_INPUT_TEST_ID = 'bezier-react-text-input';
+function TextFieldComponent({
+  name,
+  type,
+  size = TextFieldSize.M,
+  testId = TEXT_INPUT_TEST_ID,
+  autoFocus,
+  autoComplete = 'off',
+  variant = TextFieldVariant.Primary,
+  allowClear = false,
+  selectAllOnInit = false,
+  selectAllOnFocus = false,
+  leftContent,
+  rightContent,
+  withoutLeftContentWrapper = false,
+  withoutRightContentWrapper = false,
+  inputClassName,
+  inputInterpolation,
+  wrapperClassName,
+  wrapperInterpolation,
+  leftWrapperClassName,
+  leftWrapperInterpolation,
+  rightWrapperClassName,
+  rightWrapperInterpolation,
+  value,
+  onBlur,
+  onFocus,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  ...rest
+}, forwardedRef) {
+  const {
+    disabled,
+    readOnly,
+    hasError,
+    ...ownProps
+  } = useFormFieldProps(rest);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const wrapperBgColorSemanticName = useMemo(() => getProperTextFieldBgColor({
+    variant,
+    focused,
+    hasError,
+    readOnly
+  }), [variant, focused, hasError, readOnly]);
+  const wrapperBorderRadius = useMemo(() => getProperTextFieldBorderRadius({
+    size
+  }), [size]);
+  const focusTimeout = useRef();
+  const blurTimeout = useRef();
+  const normalizedValue = useMemo(() => isNil(value) ? undefined : toString(value), [value]);
+  const activeInput = !disabled && !readOnly;
+  const activeClear = activeInput && allowClear;
+  const inputRef = useRef(null);
+  const focus = useCallback(() => {
+    clearTimeout(focusTimeout.current);
+    focusTimeout.current = window.setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, []);
+  const blur = useCallback(() => {
+    clearTimeout(blurTimeout.current);
+    blurTimeout.current = window.setTimeout(() => {
+      inputRef.current?.blur();
+    }, 0);
+  }, []);
+  const setSelectionRange = useCallback((start, end, direction) => {
+    if (type && [TextFieldType.Number, TextFieldType.Email, TextFieldType.Hidden].includes(type)) {
+      return;
+    }
+    inputRef.current?.setSelectionRange(start || 0, end || 0, direction || 'none');
+  }, [type]);
+  const getSelectionRange = useCallback(() => [inputRef.current?.selectionStart || 0, inputRef.current?.selectionEnd || 0], []);
+  const selectAll = useCallback(() => {
+    focus();
+    if (inputRef.current) {
+      setSelectionRange(0, inputRef.current.value.length, 'backward');
+    }
+  }, [focus, setSelectionRange]);
+  const unselect = useCallback(() => {
+    focus();
+    if (inputRef.current) {
+      const valueLen = inputRef.current.value.length;
+      setSelectionRange(valueLen, valueLen);
+    }
+  }, [focus, setSelectionRange]);
+  const getBoundingClientRect = useCallback(() => {
+    if (inputRef.current) {
+      return inputRef.current.getBoundingClientRect();
+    }
+    return new DOMRect(undefined, undefined, 0, 0);
+  }, []);
+  const getDOMNode = useCallback(() => inputRef.current, []);
+  const handle = useMemo(() => ({
+    focus,
+    blur,
+    setSelectionRange,
+    getSelectionRange,
+    selectAll,
+    unselect,
+    getBoundingClientRect,
+    getDOMNode
+  }), [focus, blur, setSelectionRange, getSelectionRange, selectAll, unselect, getBoundingClientRect, getDOMNode]);
+  useImperativeHandle(forwardedRef, () => handle);
+  useEffect(() => {
+    if (autoFocus) {
+      focus();
+    }
+    if (selectAllOnInit) {
+      focus();
+      selectAll();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleFocus = useCallback(event => {
+    if (activeInput) {
+      setFocused(true);
+      if (selectAllOnFocus) {
+        selectAll();
+      }
+      if (onFocus) {
+        onFocus(event);
+      }
+    }
+  }, [selectAllOnFocus, selectAll, activeInput, onFocus]);
+  const handleBlur = useCallback(event => {
+    setFocused(false);
+    if (onBlur) {
+      onBlur(event);
+    }
+  }, [onBlur]);
+  const handleChange = useCallback(event => {
+    if (activeInput && onChange) {
+      onChange(event);
+    }
+  }, [activeInput, onChange]);
+  const {
+    handleKeyDown: handleKeyDownWrappedWithComposingLocker,
+    handleKeyUp: handleKeyUpWrappedWithComposingLocker
+  } = useKeyboardActionLockerWhileComposing({
+    keysToLock: COMMON_IME_CONTROL_KEYS,
+    onKeyDown,
+    onKeyUp
+  });
+  const handleKeyDown = useCallback(event => {
+    if (activeInput && handleKeyDownWrappedWithComposingLocker) {
+      handleKeyDownWrappedWithComposingLocker(event);
+    }
+  }, [activeInput, handleKeyDownWrappedWithComposingLocker]);
+  const handleKeyUp = useCallback(event => {
+    if (activeInput && handleKeyUpWrappedWithComposingLocker) {
+      handleKeyUpWrappedWithComposingLocker(event);
+    }
+  }, [activeInput, handleKeyUpWrappedWithComposingLocker]);
+  const handleClear = useCallback(() => {
+    const input = inputRef.current;
+    if (activeInput && input) {
+      const setValue = Object?.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+      const event = new Event('input', {
+        bubbles: true
+      });
+      setValue?.call(input, '');
+      input.dispatchEvent(event);
+    }
+  }, [activeInput]);
+  const renderLeftItem = useCallback(item => {
+    if ('icon' in item) {
+      return /*#__PURE__*/React__default.createElement(Styled.LeftIcon, {
+        source: item.icon,
+        size: IconSize.S,
+        color: item.iconColor ?? 'txt-black-dark',
+        clickable: !isNil(item.onClick),
+        onClick: item.onClick
+      });
+    }
+    return item;
+  }, []);
+  const LeftComponent = useMemo(() => {
+    if (isNil(leftContent)) {
+      return null;
+    }
+    const item = renderLeftItem(leftContent);
+    if (withoutLeftContentWrapper) {
+      return item;
+    }
+    return /*#__PURE__*/React__default.createElement(Styled.LeftContentWrapper, {
+      className: leftWrapperClassName,
+      interpolation: leftWrapperInterpolation
+    }, item);
+  }, [leftContent, withoutLeftContentWrapper, leftWrapperClassName, leftWrapperInterpolation, renderLeftItem]);
+  const renderRightItem = useCallback((item, key) => {
+    if ('icon' in item) {
+      return /*#__PURE__*/React__default.createElement(Styled.RightItemWrapper, {
+        key: key,
+        clickable: !isNil(item.onClick),
+        onClick: item.onClick
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        source: item.icon,
+        size: IconSize.XS,
+        color: item.iconColor ?? 'txt-black-dark'
+      }));
+    }
+    return /*#__PURE__*/React__default.cloneElement(item, {
+      key
+    });
+  }, []);
+  const RightComponent = useMemo(() => {
+    if (isNil(rightContent) || isEmpty(rightContent)) {
+      return null;
+    }
+    const items = isArray(rightContent) ? rightContent.map(item => renderRightItem(item, v4())) : renderRightItem(rightContent);
+    if (withoutRightContentWrapper) {
+      return items;
+    }
+    return /*#__PURE__*/React__default.createElement(Styled.RightContentWrapper, {
+      className: rightWrapperClassName,
+      interpolation: rightWrapperInterpolation
+    }, items);
+  }, [rightContent, withoutRightContentWrapper, rightWrapperClassName, rightWrapperInterpolation, renderRightItem]);
+  const ClearComponent = useMemo(() => /*#__PURE__*/React__default.createElement(Styled.ClearIconWrapper, {
+    onClick: handleClear
+  }, normalizedValue && normalizedValue.length > 0 && (focused || hovered) && /*#__PURE__*/React__default.createElement(Icon, {
+    source: CancelCircleFilledIcon,
+    size: IconSize.XS
+  })), [focused, handleClear, hovered, normalizedValue]);
+  return /*#__PURE__*/React__default.createElement(Styled.Wrapper, {
+    className: wrapperClassName,
+    variant: variant,
+    size: size,
+    bgColor: wrapperBgColorSemanticName,
+    borderRadius: wrapperBorderRadius,
+    hasError: hasError,
+    disabled: disabled,
+    focused: focused,
+    interpolation: wrapperInterpolation,
+    "data-testid": testId,
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    onMouseDown: focus
+  }, LeftComponent, /*#__PURE__*/React__default.createElement(Styled.Input, Object.assign({
+    type: type,
+    className: inputClassName,
+    interpolation: inputInterpolation,
+    ref: inputRef,
+    value: normalizedValue,
+    name: name,
+    size: size,
+    autoComplete: autoComplete,
+    readOnly: readOnly,
+    disabled: disabled,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  }, ownProps)), activeClear && ClearComponent, RightComponent);
+}
+var TextField = /*#__PURE__*/forwardRef(TextFieldComponent);
+
+export { TEXT_INPUT_TEST_ID, TextField as default };
+//# sourceMappingURL=TextField.mjs.map

package/dist/esm/components/Forms/Inputs/TextField/TextField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.mjs","sources":["../../../../../../src/components/Forms/Inputs/TextField/TextField.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { CancelCircleFilledIcon } from '@channel.io/bezier-icons'\nimport { v4 as uuid } from 'uuid'\n\nimport { window } from '~/src/utils/domUtils'\nimport { toString } from '~/src/utils/stringUtils'\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n} from '~/src/utils/typeUtils'\n\nimport { COMMON_IME_CONTROL_KEYS } from '~/src/components/Forms/Inputs/constants/CommonImeControlKeys'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport useKeyboardActionLockerWhileComposing from '~/src/components/Forms/useKeyboardActionLockerWhileComposing'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\n\nimport {\n  type SelectionRangeDirections,\n  type TextFieldItemProps,\n  type TextFieldProps,\n  type TextFieldRef,\n  TextFieldSize,\n  TextFieldType,\n  TextFieldVariant,\n} from './TextField.types'\nimport {\n  getProperTextFieldBgColor,\n  getProperTextFieldBorderRadius,\n} from './TextFieldUtils'\n\nimport Styled from './TextField.styled'\n\nexport const TEXT_INPUT_TEST_ID = 'bezier-react-text-input'\n\nfunction TextFieldComponent({\n  name,\n  type,\n  size = TextFieldSize.M,\n  testId = TEXT_INPUT_TEST_ID,\n  autoFocus,\n  autoComplete = 'off',\n  variant = TextFieldVariant.Primary,\n  allowClear = false,\n  selectAllOnInit = false,\n  selectAllOnFocus = false,\n  leftContent,\n  rightContent,\n  withoutLeftContentWrapper = false,\n  withoutRightContentWrapper = false,\n  inputClassName,\n  inputInterpolation,\n  wrapperClassName,\n  wrapperInterpolation,\n  leftWrapperClassName,\n  leftWrapperInterpolation,\n  rightWrapperClassName,\n  rightWrapperInterpolation,\n  value,\n  onBlur,\n  onFocus,\n  onChange,\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}: TextFieldProps,\nforwardedRef: Ref<TextFieldRef>,\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const [focused, setFocused] = useState(false)\n  const [hovered, setHovered] = useState(false)\n\n  const wrapperBgColorSemanticName = useMemo(() => (\n    getProperTextFieldBgColor({\n      variant,\n      focused,\n      hasError,\n      readOnly,\n    })\n  ), [\n    variant,\n    focused,\n    hasError,\n    readOnly,\n  ])\n\n  const wrapperBorderRadius = useMemo(() => (\n    getProperTextFieldBorderRadius({\n      size,\n    })\n  ), [size])\n\n  const focusTimeout = useRef<ReturnType<Window['setTimeout']>>()\n  const blurTimeout = useRef<ReturnType<Window['setTimeout']>>()\n\n  const normalizedValue = useMemo(() => (\n    isNil(value) ? undefined : toString(value)\n  ), [value])\n\n  const activeInput = !disabled && !readOnly\n  const activeClear = activeInput && allowClear\n\n  const inputRef = useRef<HTMLInputElement | null>(null)\n\n  const focus = useCallback(() => {\n    clearTimeout(focusTimeout.current)\n    focusTimeout.current = window.setTimeout(() => {\n      inputRef.current?.focus()\n    }, 0)\n  }, [])\n\n  const blur = useCallback(() => {\n    clearTimeout(blurTimeout.current)\n    blurTimeout.current = window.setTimeout(() => {\n      inputRef.current?.blur()\n    }, 0)\n  }, [])\n\n  const setSelectionRange = useCallback((start?: number, end?: number, direction?: SelectionRangeDirections) => {\n    if (type && [TextFieldType.Number, TextFieldType.Email, TextFieldType.Hidden].includes(type)) { return }\n    inputRef.current?.setSelectionRange(start || 0, end || 0, direction || 'none')\n  }, [type])\n\n  const getSelectionRange = useCallback((): [number, number] =>\n    [inputRef.current?.selectionStart || 0, inputRef.current?.selectionEnd || 0], [])\n\n  const selectAll = useCallback(() => {\n    focus()\n    if (inputRef.current) {\n      setSelectionRange(0, inputRef.current.value.length, 'backward')\n    }\n  }, [\n    focus,\n    setSelectionRange,\n  ])\n\n  const unselect = useCallback(() => {\n    focus()\n    if (inputRef.current) {\n      const valueLen = inputRef.current.value.length\n      setSelectionRange(valueLen, valueLen)\n    }\n  }, [\n    focus,\n    setSelectionRange,\n  ])\n\n  const getBoundingClientRect = useCallback((): DOMRect => {\n    if (inputRef.current) { return inputRef.current.getBoundingClientRect() }\n    return new DOMRect(undefined, undefined, 0, 0)\n  }, [])\n\n  const getDOMNode = useCallback(() => inputRef.current, [])\n\n  const handle = useMemo((): TextFieldRef => ({\n    focus,\n    blur,\n    setSelectionRange,\n    getSelectionRange,\n    selectAll,\n    unselect,\n    getBoundingClientRect,\n    getDOMNode,\n  }), [\n    focus,\n    blur,\n    setSelectionRange,\n    getSelectionRange,\n    selectAll,\n    unselect,\n    getBoundingClientRect,\n    getDOMNode,\n  ])\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  useEffect(() => {\n    if (autoFocus) {\n      focus()\n    }\n    if (selectAllOnInit) {\n      focus()\n      selectAll()\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const handleFocus = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n    if (activeInput) {\n      setFocused(true)\n      if (selectAllOnFocus) { selectAll() }\n      if (onFocus) { onFocus(event) }\n    }\n  }, [\n    selectAllOnFocus,\n    selectAll,\n    activeInput,\n    onFocus,\n  ])\n\n  const handleBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false)\n    if (onBlur) { onBlur(event) }\n  }, [onBlur])\n\n  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (activeInput && onChange) {\n      onChange(event)\n    }\n  }, [\n    activeInput,\n    onChange,\n  ])\n\n  const {\n    handleKeyDown: handleKeyDownWrappedWithComposingLocker,\n    handleKeyUp: handleKeyUpWrappedWithComposingLocker,\n  } = useKeyboardActionLockerWhileComposing({\n    keysToLock: COMMON_IME_CONTROL_KEYS,\n    onKeyDown,\n    onKeyUp,\n  })\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (activeInput && handleKeyDownWrappedWithComposingLocker) {\n      handleKeyDownWrappedWithComposingLocker(event)\n    }\n  }, [\n    activeInput,\n    handleKeyDownWrappedWithComposingLocker,\n  ])\n\n  const handleKeyUp = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (activeInput && handleKeyUpWrappedWithComposingLocker) {\n      handleKeyUpWrappedWithComposingLocker(event)\n    }\n  }, [\n    activeInput,\n    handleKeyUpWrappedWithComposingLocker,\n  ])\n\n  const handleClear = useCallback(() => {\n    const input = inputRef.current\n    if (activeInput && input) {\n      const setValue = Object?.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n      const event = new Event('input', { bubbles: true })\n      setValue?.call(input, '')\n      input.dispatchEvent(event)\n    }\n  }, [activeInput])\n\n  const renderLeftItem = useCallback((item: TextFieldItemProps) => {\n    if ('icon' in item) {\n      return (\n        <Styled.LeftIcon\n          source={item.icon}\n          size={IconSize.S}\n          color={item.iconColor ?? 'txt-black-dark'}\n          clickable={!isNil(item.onClick)}\n          onClick={item.onClick}\n        />\n      )\n    }\n\n    return item\n  }, [])\n\n  const LeftComponent = useMemo(() => {\n    if (isNil(leftContent)) {\n      return null\n    }\n\n    const item = renderLeftItem(leftContent)\n\n    if (withoutLeftContentWrapper) { return item }\n\n    return (\n      <Styled.LeftContentWrapper\n        className={leftWrapperClassName}\n        interpolation={leftWrapperInterpolation}\n      >\n        { item }\n      </Styled.LeftContentWrapper>\n    )\n  }, [\n    leftContent,\n    withoutLeftContentWrapper,\n    leftWrapperClassName,\n    leftWrapperInterpolation,\n    renderLeftItem,\n  ])\n\n  const renderRightItem = useCallback((item: TextFieldItemProps, key?: string) => {\n    if ('icon' in item) {\n      return (\n        <Styled.RightItemWrapper\n          key={key}\n          clickable={!isNil(item.onClick)}\n          onClick={item.onClick}\n        >\n          <Icon\n            source={item.icon}\n            size={IconSize.XS}\n            color={item.iconColor ?? 'txt-black-dark'}\n          />\n        </Styled.RightItemWrapper>\n      )\n    }\n\n    return React.cloneElement(\n      item, { key },\n    )\n  }, [])\n\n  const RightComponent = useMemo(() => {\n    if (isNil(rightContent) || isEmpty(rightContent)) {\n      return null\n    }\n\n    const items = isArray(rightContent)\n      ? rightContent.map((item) => renderRightItem(item, uuid()))\n      : renderRightItem(rightContent)\n\n    if (withoutRightContentWrapper) { return items }\n\n    return (\n      <Styled.RightContentWrapper\n        className={rightWrapperClassName}\n        interpolation={rightWrapperInterpolation}\n      >\n        { items }\n      </Styled.RightContentWrapper>\n    )\n  }, [\n    rightContent,\n    withoutRightContentWrapper,\n    rightWrapperClassName,\n    rightWrapperInterpolation,\n    renderRightItem,\n  ])\n\n  const ClearComponent = useMemo(() => (\n    <Styled.ClearIconWrapper\n      onClick={handleClear}\n    >\n      {\n        normalizedValue && normalizedValue.length > 0 && (focused || hovered) && (\n          <Icon\n            source={CancelCircleFilledIcon}\n            size={IconSize.XS}\n          />\n        )\n      }\n    </Styled.ClearIconWrapper>\n  ), [\n    focused,\n    handleClear,\n    hovered,\n    normalizedValue,\n  ])\n\n  return (\n    <Styled.Wrapper\n      className={wrapperClassName}\n      variant={variant}\n      size={size}\n      bgColor={wrapperBgColorSemanticName}\n      borderRadius={wrapperBorderRadius}\n      hasError={hasError}\n      disabled={disabled}\n      focused={focused}\n      interpolation={wrapperInterpolation}\n      data-testid={testId}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onMouseDown={focus}\n    >\n      { LeftComponent }\n      <Styled.Input\n        type={type}\n        className={inputClassName}\n        interpolation={inputInterpolation}\n        ref={inputRef}\n        value={normalizedValue}\n        name={name}\n        size={size}\n        autoComplete={autoComplete}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        {...ownProps}\n      />\n      { activeClear && ClearComponent }\n      { RightComponent }\n    </Styled.Wrapper>\n  )\n}\n\nexport default forwardRef(TextFieldComponent)\n"],"names":["TEXT_INPUT_TEST_ID","TextFieldComponent","name","type","size","TextFieldSize","M","testId","autoFocus","autoComplete","variant","TextFieldVariant","Primary","allowClear","selectAllOnInit","selectAllOnFocus","leftContent","rightContent","withoutLeftContentWrapper","withoutRightContentWrapper","inputClassName","inputInterpolation","wrapperClassName","wrapperInterpolation","leftWrapperClassName","leftWrapperInterpolation","rightWrapperClassName","rightWrapperInterpolation","value","onBlur","onFocus","onChange","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","focused","setFocused","useState","hovered","setHovered","wrapperBgColorSemanticName","useMemo","getProperTextFieldBgColor","wrapperBorderRadius","getProperTextFieldBorderRadius","focusTimeout","useRef","blurTimeout","normalizedValue","isNil","undefined","toString","activeInput","activeClear","inputRef","focus","useCallback","clearTimeout","current","window","setTimeout","blur","setSelectionRange","start","end","direction","TextFieldType","Number","Email","Hidden","includes","getSelectionRange","selectionStart","selectionEnd","selectAll","length","unselect","valueLen","getBoundingClientRect","DOMRect","getDOMNode","handle","useImperativeHandle","useEffect","handleFocus","event","handleBlur","handleChange","handleKeyDown","handleKeyDownWrappedWithComposingLocker","handleKeyUp","handleKeyUpWrappedWithComposingLocker","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","handleClear","input","setValue","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","Event","bubbles","call","dispatchEvent","renderLeftItem","item","React","createElement","Styled","LeftIcon","source","icon","IconSize","S","color","iconColor","clickable","onClick","LeftComponent","LeftContentWrapper","className","interpolation","renderRightItem","key","RightItemWrapper","Icon","XS","cloneElement","RightComponent","isEmpty","items","isArray","map","uuid","RightContentWrapper","ClearComponent","ClearIconWrapper","CancelCircleFilledIcon","Wrapper","bgColor","borderRadius","onMouseEnter","onMouseLeave","onMouseDown","Input","assign","ref","forwardRef"],"mappings":"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"}

package/dist/esm/components/Forms/Inputs/TextField/TextField.styled.mjs

@@ -0,0 +1,103 @@
+import disabledOpacity from '../../../../constants/DisabledOpacity.mjs';
+import { inputTextStyle, inputPlaceholderStyle, inputWrapperStyle, focusedInputWrapperStyle, erroredInputWrapperStyle } from '../mixins.mjs';
+import { TextFieldVariant, TextFieldSize } from './TextField.types.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
+import { css as FoundationCSS, styled as FoundationStyled } from '../../../../foundation/FoundationStyledComponent.mjs';
+import { Typography } from '../../../../foundation/Typography.mjs';
+
+const clickableElementStyle = FoundationCSS`
+  cursor: pointer;
+`;
+const Input = /*#__PURE__*/FoundationStyled.input.withConfig({
+  displayName: "TextFieldstyled__Input",
+  componentId: "sc-15z3hw-0"
+})(["width:100%;height:100%;padding:0;cursor:", ";background-color:transparent;border:none;outline:none;", " ", " ", " ", ""], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'auto', Typography.Size14, inputTextStyle, inputPlaceholderStyle, ({
+  interpolation
+}) => interpolation);
+const LeftIcon = /*#__PURE__*/FoundationStyled(Icon).withConfig({
+  displayName: "TextFieldstyled__LeftIcon",
+  componentId: "sc-15z3hw-1"
+})(["", ""], ({
+  clickable
+}) => clickable && clickableElementStyle);
+const LeftContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "TextFieldstyled__LeftContentWrapper",
+  componentId: "sc-15z3hw-2"
+})(["display:flex;align-items:center;padding-right:6px;", ""], ({
+  interpolation
+}) => interpolation);
+const RightContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "TextFieldstyled__RightContentWrapper",
+  componentId: "sc-15z3hw-3"
+})(["display:flex;align-items:center;padding-right:2px;", ""], ({
+  interpolation
+}) => interpolation);
+const RightItemWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "TextFieldstyled__RightItemWrapper",
+  componentId: "sc-15z3hw-4"
+})(["display:flex;align-items:center;justify-content:center;width:20px;height:20px;", " ", ""], ({
+  clickable
+}) => clickable && clickableElementStyle, ({
+  interpolation
+}) => interpolation);
+const ClearIconWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "TextFieldstyled__ClearIconWrapper",
+  componentId: "sc-15z3hw-5"
+})(["display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding-right:2px;color:", ";:hover{color:", ";}", ""], ({
+  foundation
+}) => foundation?.theme?.['txt-black-dark'], ({
+  foundation
+}) => foundation?.theme?.['txt-black-darker'], clickableElementStyle);
+function getInputTypography({
+  size
+}) {
+  switch (size) {
+    case TextFieldSize.XS:
+    case TextFieldSize.M:
+      return Typography.Size14;
+    case TextFieldSize.L:
+      return Typography.Size16;
+    case TextFieldSize.XL:
+      return Typography.Size18;
+    // NOTE: should never reach here
+    default:
+      return Typography.Size14;
+  }
+}
+const Wrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "TextFieldstyled__Wrapper",
+  componentId: "sc-15z3hw-6"
+})(["position:relative;box-sizing:border-box;display:flex;align-items:center;height:", "px;padding:0 12px;background-color:", ";", " opacity:", ";", " ", " ", " ", " ", " ", "{", "}"], ({
+  size
+}) => size, ({
+  foundation,
+  bgColor
+}) => foundation?.theme?.[bgColor], ({
+  borderRadius
+}) => borderRadius, ({
+  disabled
+}) => disabled && disabledOpacity, ({
+  variant
+}) => variant === TextFieldVariant.Primary && inputWrapperStyle, ({
+  focused
+}) => focused && focusedInputWrapperStyle, ({
+  hasError
+}) => hasError && erroredInputWrapperStyle, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow']), ({
+  interpolation
+}) => interpolation, Input, getInputTypography);
+var Styled = {
+  Input,
+  LeftIcon,
+  LeftContentWrapper,
+  RightItemWrapper,
+  RightContentWrapper,
+  ClearIconWrapper,
+  Wrapper
+};
+
+export { Styled as default };
+//# sourceMappingURL=TextField.styled.mjs.map