@channel.io/bezier-react 2.0.0-alpha.8 → 2.0.0-alpha.9

package/dist/cjs/components/Forms/Checkbox/Checkbox.js

@@ -2,10 +2,11 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
-var index$1 = require('../../../node_modules/classnames/index.js');
+var index$1 = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
+var index = require('../../../node_modules/classnames/index.js');
 var useId = require('../../../hooks/useId.js');
 var useFormFieldProps = require('../useFormFieldProps.js');
+var Form_module = require('../Form.module.scss.js');
 var Checkbox_module = require('./Checkbox.module.scss.js');
 var Icon = require('../../Icon/Icon.js');
 var Icon_types = require('../../Icon/Icon.types.js');
@@ -38,14 +39,14 @@ function CheckboxImpl({
   } = useFormFieldProps.default(rest);
   const id = useId.default(idProp ?? formFieldId, 'bezier-checkbox');
   return /*#__PURE__*/React.createElement("div", {
-    className: Checkbox_module.default.Container
-  }, /*#__PURE__*/React.createElement(index.Root, Object.assign({
-    className: index$1.default(Checkbox_module.default.Checkbox, className),
+    className: index.default(Checkbox_module.default.Container, Form_module.default['size-m'])
+  }, /*#__PURE__*/React.createElement(index$1.Root, Object.assign({
+    className: index.default(Checkbox_module.default.Checkbox, className),
     ref: forwardedRef,
     id: id,
     checked: checked,
     "data-invalid": formFieldProps['aria-invalid']
-  }, formFieldProps), /*#__PURE__*/React.createElement(index.Indicator, {
+  }, formFieldProps), /*#__PURE__*/React.createElement(index$1.Indicator, {
     asChild: true
     /* NOTE: To allow the icon to be rendered even if unchecked. */,
     forceMount: true

package/dist/cjs/components/Forms/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport {\n  CheckBoldIcon,\n  HyphenBoldIcon,\n} from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\n\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\n\nimport {\n  type CheckboxProps,\n  type CheckedState,\n} from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ntype CheckIconProps = {} | {\n  style: React.CSSProperties\n  'data-state': 'checked' | 'unchecked' | 'indeterminate'\n  'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(function CheckIcon(\n  props,\n  forwardedRef,\n) {\n  // eslint-disable-next-line react/destructuring-assignment\n  const state = props['data-state']\n  const isUnchecked = state === 'unchecked'\n  const isIndeterminate = state === 'indeterminate'\n\n  return (\n    <Icon\n      className={styles.CheckIcon}\n      ref={forwardedRef}\n      source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n      size={IconSize.XS}\n      color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n      {...props}\n    />\n  )\n})\n\nfunction CheckboxImpl<Checked extends CheckedState>({\n  children,\n  className,\n  checked,\n  id: idProp,\n  ...rest\n}: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const {\n    id: formFieldId,\n    hasError,\n    ...formFieldProps\n  } = useFormFieldProps(rest)\n\n  const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n\n  return (\n    <div className={styles.Container}>\n      <CheckboxPrimitive.Root\n        className={classNames(\n          styles.Checkbox,\n          className,\n        )}\n        ref={forwardedRef}\n        id={id}\n        checked={checked}\n        data-invalid={formFieldProps['aria-invalid']}\n        {...formFieldProps}\n      >\n        <CheckboxPrimitive.Indicator\n          asChild\n          /* NOTE: To allow the icon to be rendered even if unchecked. */\n          forceMount\n        >\n          <CheckIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n      { children && (\n        <label\n          className={styles.Label}\n          htmlFor={id}\n        >\n          { children }\n        </label>\n      ) }\n    </div>\n  )\n}\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * >\n *   Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n *   defaultChecked={true}\n * >\n *   Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <Checked extends CheckedState>(\n  props: CheckboxProps<Checked> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => ReturnType<typeof CheckboxImpl<Checked>>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","React","createElement","Icon","Object","assign","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","size","IconSize","XS","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","Container","CheckboxPrimitive","classNames","Checkbox","asChild","forceMount","Label","htmlFor"],"mappings":";;;;;;;;;;;;AA8BA;AACA,MAAMA,SAAS,gBAAGC,gBAAU,CAAgC,SAASD,SAASA,CAC5EE,KAAK,EACLC,YAAY,EACZ;AACA;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC,CAAA;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW,CAAA;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe,CAAA;EAEjD,oBACEG,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACHC,SAAS,EAAEC,uBAAM,CAACb,SAAU;AAC5Bc,IAAAA,GAAG,EAAEX,YAAa;AAClBY,IAAAA,MAAM,EAAE,CAACT,eAAe,GAAGU,yBAAa,GAAGC,0BAAe;IAC1DC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAEhB,WAAW,GAAG,eAAe,GAAG,2BAAA;GACnCH,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC,CAAC,CAAA;AAEF,SAASoB,YAAYA,CAA+B;EAClDC,QAAQ;EACRX,SAAS;EACTY,OAAO;AACPC,EAAAA,EAAE,EAAEC,MAAM;EACV,GAAGC,IAAAA;AACmB,CAAC,EAAExB,YAA0C,EAAE;EACrE,MAAM;AACJsB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC,cAAAA;AACL,GAAC,GAAGC,yBAAiB,CAACJ,IAAI,CAAC,CAAA;EAE3B,MAAMF,EAAE,GAAGO,aAAK,CAACN,MAAM,IAAIE,WAAW,EAAE,iBAAiB,CAAC,CAAA;EAE1D,oBACErB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKI,SAAS,EAAEC,uBAAM,CAACoB,SAAAA;GACrB1B,eAAAA,KAAA,CAAAC,aAAA,CAAC0B,UAAsB,EAAAxB,MAAA,CAAAC,MAAA,CAAA;IACrBC,SAAS,EAAEuB,eAAU,CACnBtB,uBAAM,CAACuB,QAAQ,EACfxB,SACF,CAAE;AACFE,IAAAA,GAAG,EAAEX,YAAa;AAClBsB,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;IACjB,cAAcM,EAAAA,cAAc,CAAC,cAAc,CAAA;GACvCA,EAAAA,cAAc,gBAElBvB,KAAA,CAAAC,aAAA,CAAC0B,eAA2B,EAAA;IAC1BG,OAAO,EAAA,IAAA;AACP;IACAC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEV/B,KAAA,CAAAC,aAAA,CAACR,SAAS,EAAE,IAAA,CACe,CACP,CAAC,EACvBuB,QAAQ,iBACRhB,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACEI,SAAS,EAAEC,uBAAM,CAAC0B,KAAM;AACxBC,IAAAA,OAAO,EAAEf,EAAAA;GAEPF,EAAAA,QACG,CAEN,CAAC,CAAA;AAEV,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaa,QAAQ,gBAAGnC,gBAAU,CAACqB,YAAY;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport {\n  CheckBoldIcon,\n  HyphenBoldIcon,\n} from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\n\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\n\n// eslint-disable-next-line no-restricted-imports\nimport formStyles from '../Form.module.scss'\n\nimport {\n  type CheckboxProps,\n  type CheckedState,\n} from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ntype CheckIconProps = {} | {\n  style: React.CSSProperties\n  'data-state': 'checked' | 'unchecked' | 'indeterminate'\n  'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(function CheckIcon(\n  props,\n  forwardedRef,\n) {\n  // eslint-disable-next-line react/destructuring-assignment\n  const state = props['data-state']\n  const isUnchecked = state === 'unchecked'\n  const isIndeterminate = state === 'indeterminate'\n\n  return (\n    <Icon\n      className={styles.CheckIcon}\n      ref={forwardedRef}\n      source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n      size={IconSize.XS}\n      color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n      {...props}\n    />\n  )\n})\n\nfunction CheckboxImpl<Checked extends CheckedState>({\n  children,\n  className,\n  checked,\n  id: idProp,\n  ...rest\n}: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const {\n    id: formFieldId,\n    hasError,\n    ...formFieldProps\n  } = useFormFieldProps(rest)\n\n  const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n\n  return (\n    <div className={classNames(\n      styles.Container,\n      formStyles['size-m'],\n    )}\n    >\n      <CheckboxPrimitive.Root\n        className={classNames(\n          styles.Checkbox,\n          className,\n        )}\n        ref={forwardedRef}\n        id={id}\n        checked={checked}\n        data-invalid={formFieldProps['aria-invalid']}\n        {...formFieldProps}\n      >\n        <CheckboxPrimitive.Indicator\n          asChild\n          /* NOTE: To allow the icon to be rendered even if unchecked. */\n          forceMount\n        >\n          <CheckIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n      { children && (\n        <label\n          className={styles.Label}\n          htmlFor={id}\n        >\n          { children }\n        </label>\n      ) }\n    </div>\n  )\n}\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * >\n *   Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n *   defaultChecked={true}\n * >\n *   Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <Checked extends CheckedState>(\n  props: CheckboxProps<Checked> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => ReturnType<typeof CheckboxImpl<Checked>>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","React","createElement","Icon","Object","assign","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","size","IconSize","XS","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","classNames","Container","formStyles","CheckboxPrimitive","Checkbox","asChild","forceMount","Label","htmlFor"],"mappings":";;;;;;;;;;;;;AAiCA;AACA,MAAMA,SAAS,gBAAGC,gBAAU,CAAgC,SAASD,SAASA,CAC5EE,KAAK,EACLC,YAAY,EACZ;AACA;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC,CAAA;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW,CAAA;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe,CAAA;EAEjD,oBACEG,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACHC,SAAS,EAAEC,uBAAM,CAACb,SAAU;AAC5Bc,IAAAA,GAAG,EAAEX,YAAa;AAClBY,IAAAA,MAAM,EAAE,CAACT,eAAe,GAAGU,yBAAa,GAAGC,0BAAe;IAC1DC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAEhB,WAAW,GAAG,eAAe,GAAG,2BAAA;GACnCH,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC,CAAC,CAAA;AAEF,SAASoB,YAAYA,CAA+B;EAClDC,QAAQ;EACRX,SAAS;EACTY,OAAO;AACPC,EAAAA,EAAE,EAAEC,MAAM;EACV,GAAGC,IAAAA;AACmB,CAAC,EAAExB,YAA0C,EAAE;EACrE,MAAM;AACJsB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC,cAAAA;AACL,GAAC,GAAGC,yBAAiB,CAACJ,IAAI,CAAC,CAAA;EAE3B,MAAMF,EAAE,GAAGO,aAAK,CAACN,MAAM,IAAIE,WAAW,EAAE,iBAAiB,CAAC,CAAA;EAE1D,oBACErB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKI,SAAS,EAAEqB,aAAU,CACxBpB,uBAAM,CAACqB,SAAS,EAChBC,mBAAU,CAAC,QAAQ,CACrB,CAAA;GAEE5B,eAAAA,KAAA,CAAAC,aAAA,CAAC4B,YAAsB,EAAA1B,MAAA,CAAAC,MAAA,CAAA;IACrBC,SAAS,EAAEqB,aAAU,CACnBpB,uBAAM,CAACwB,QAAQ,EACfzB,SACF,CAAE;AACFE,IAAAA,GAAG,EAAEX,YAAa;AAClBsB,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;IACjB,cAAcM,EAAAA,cAAc,CAAC,cAAc,CAAA;GACvCA,EAAAA,cAAc,gBAElBvB,KAAA,CAAAC,aAAA,CAAC4B,iBAA2B,EAAA;IAC1BE,OAAO,EAAA,IAAA;AACP;IACAC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEVhC,KAAA,CAAAC,aAAA,CAACR,SAAS,EAAE,IAAA,CACe,CACP,CAAC,EACvBuB,QAAQ,iBACRhB,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACEI,SAAS,EAAEC,uBAAM,CAAC2B,KAAM;AACxBC,IAAAA,OAAO,EAAEhB,EAAAA;GAEPF,EAAAA,QACG,CAEN,CAAC,CAAA;AAEV,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACac,QAAQ,gBAAGpC,gBAAU,CAACqB,YAAY;;;;"}

package/dist/cjs/components/Forms/Form.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var formStyles = {"size-xs":"b-Forms-size-xs_-eVKz","size-m":"b-Forms-size-m_ZeP-T","size-l":"b-Forms-size-l_5-J7F","size-xl":"b-Forms-size-xl_cOlFR"};
+
+exports.default = formStyles;
+//# sourceMappingURL=Form.module.scss.js.map

package/dist/cjs/components/Forms/Form.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/components/Forms/FormControl/FormControl.js

@@ -4,9 +4,8 @@ var React = require('react');
 var index = require('../../../node_modules/classnames/index.js');
 var useId = require('../../../hooks/useId.js');
 var props = require('../../../utils/props.js');
-var style = require('../../../utils/style.js');
 var type = require('../../../utils/type.js');
-var FormFieldSize = require('../FormFieldSize.js');
+var Form_module = require('../Form.module.scss.js');
 var FormControlContext = require('./FormControlContext.js');
 var FormControl_module = require('./FormControl.module.scss.js');
 var Stack = require('../../Stack/Stack.js');
@@ -40,8 +39,8 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
   id: idProp,
   testId = FORM_CONTROL_TEST_ID,
   labelPosition = 'top',
-  leftLabelWrapperHeight = FormFieldSize.default.M,
-  style: style$1,
+  size = 'm',
+  style,
   children,
   ...rest
 }, forwardedRef) {
@@ -74,16 +73,17 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
   const getLabelProps = React.useCallback(ownProps => ({
     id: labelId,
     htmlFor: fieldId,
-    className: index.default(FormControl_module.default.FormLabelWrapper, FormControl_module.default[`position-${labelPosition}`]),
+    className: index.default(FormControl_module.default.FormLabelWrapper, FormControl_module.default[`position-${labelPosition}`], Form_module.default[`size-${size}`]),
     typo: labelPosition === 'top' ? '13' : '14',
     ...ownProps
-  }), [fieldId, labelId, labelPosition]);
+  }), [fieldId, labelId, labelPosition, size]);
   const getFieldProps = React.useCallback(ownProps => ({
     id: fieldId,
+    size,
     'aria-describedby': groupNode ? undefined : describerId,
     ...formCommonProps,
     ...ownProps
-  }), [fieldId, describerId, formCommonProps, groupNode]);
+  }), [fieldId, describerId, size, formCommonProps, groupNode]);
   const getHelperTextProps = React.useCallback(ownProps => ({
     id: helperTextId,
     visible: type.isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,
@@ -110,12 +110,6 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
     getErrorMessageProps,
     ...formCommonProps
   }), [id, labelId, helperTextId, errorMessageId, getGroupProps, getLabelProps, getFieldProps, getHelperTextProps, getErrorMessageProps, formCommonProps]);
-
-  // TODO: fix to className when FormFieldSize can be shared
-  const containerStyle = React.useMemo(() => ({
-    ...style$1,
-    '--b-form-control-left-label-wrapper-height': style.px(leftLabelWrapperHeight)
-  }), [style$1, leftLabelWrapperHeight]);
   if (!children) {
     return null;
   }
@@ -123,7 +117,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
     value: contextValue
   }, /*#__PURE__*/React.createElement(Container, Object.assign({}, bezierProps, {
     ref: forwardedRef,
-    style: containerStyle,
+    style: style,
     testId: testId,
     labelPosition: labelPosition
   }), children));

package/dist/cjs/components/Forms/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { splitByBezierComponentProps } from '~/src/utils/props'\nimport { px } from '~/src/utils/style'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\n// eslint-disable-next-line no-restricted-imports\nimport FormFieldSize from '../FormFieldSize'\n\nimport {\n  type ContainerProps,\n  type ErrorMessagePropsGetter,\n  type FieldPropsGetter,\n  type FormControlProps,\n  type GroupPropsGetter,\n  type HelperTextPropsGetter,\n  type LabelPropsGetter,\n} from './FormControl.types'\nimport { FormControlContextProvider } from './FormControlContext'\n\nimport styles from './FormControl.module.scss'\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-react-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container({\n  labelPosition,\n  children,\n  testId,\n  className,\n  ...rest\n}, forwardedRef) {\n  switch (labelPosition) {\n    case 'top':\n      return (\n        <Stack\n          {...rest}\n          className={className}\n          ref={forwardedRef}\n          direction=\"vertical\"\n          testId={testId}\n        >\n          { children }\n        </Stack>\n      )\n\n    case 'left':\n    default:\n      return (\n        <div\n          {...rest}\n          ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n          className={classNames(\n            styles.Grid,\n            className,\n          )}\n          data-testid={testId}\n        >\n          { children }\n        </div>\n      )\n  }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(function FormControl({\n  id: idProp,\n  testId = FORM_CONTROL_TEST_ID,\n  labelPosition = 'top',\n  leftLabelWrapperHeight = FormFieldSize.M,\n  style,\n  children,\n  ...rest\n}, forwardedRef) {\n  const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n  const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(null)\n  const [errorMessageNode, setErrorMessageNode] = useState<HTMLElement | null>(null)\n\n  const id = useId(idProp, 'field')\n  const groupId = `${id}-group`\n  const labelId = `${id}-label`\n  const helperTextId = `${id}-help-text`\n  const errorMessageId = `${id}-error-message`\n\n  const fieldId = groupNode ? undefined : id\n\n  const describerId = useMemo(() => {\n    if (errorMessageNode) { return errorMessageId }\n    if (helperTextNode) { return helperTextId }\n    return undefined\n  }, [\n    errorMessageNode,\n    helperTextNode,\n    errorMessageId,\n    helperTextId,\n  ])\n\n  const [bezierProps, formCommonProps] = useMemo(() => splitByBezierComponentProps(rest), [rest])\n\n  const getGroupProps = useCallback<GroupPropsGetter>(ownProps => ({\n    id: groupId,\n    'aria-labelledby': labelId,\n    'aria-describedby': describerId,\n    ref: setGroupNode,\n    ...ownProps,\n  }), [\n    groupId,\n    labelId,\n    describerId,\n  ])\n\n  const getLabelProps = useCallback<LabelPropsGetter>(ownProps => ({\n    id: labelId,\n    htmlFor: fieldId,\n    className: classNames(styles.FormLabelWrapper, styles[`position-${labelPosition}`]),\n    typo: labelPosition === 'top' ? '13' : '14',\n    ...ownProps,\n  }), [\n    fieldId,\n    labelId,\n    labelPosition,\n  ])\n\n  const getFieldProps = useCallback<FieldPropsGetter>(ownProps => ({\n    id: fieldId,\n    'aria-describedby': groupNode ? undefined : describerId,\n    ...formCommonProps,\n    ...ownProps,\n  }), [\n    fieldId,\n    describerId,\n    formCommonProps,\n    groupNode,\n  ])\n\n  const getHelperTextProps = useCallback<HelperTextPropsGetter>(ownProps => ({\n    id: helperTextId,\n    visible: isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,\n    ref: setHelperTextNode,\n    className: classNames(styles.FormHelperTextWrapper, labelPosition === 'left' && styles['position-left']),\n    ...ownProps,\n  }), [\n    helperTextId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(ownProps => ({\n    id: errorMessageId,\n    visible: isNil(formCommonProps?.hasError) || formCommonProps?.hasError,\n    ref: setErrorMessageNode,\n    className: classNames(styles.FormHelperTextWrapper, labelPosition === 'left' && styles['position-left']),\n    ...ownProps,\n  }), [\n    errorMessageId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const contextValue = useMemo(() => ({\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    ...formCommonProps,\n  }), [\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    formCommonProps,\n  ])\n\n  // TODO: fix to className when FormFieldSize can be shared\n  const containerStyle = useMemo(() => ({\n    ...style,\n    '--b-form-control-left-label-wrapper-height': px(leftLabelWrapperHeight),\n  } as React.CSSProperties), [\n    style,\n    leftLabelWrapperHeight,\n  ])\n\n  if (!children) { return null }\n\n  return (\n    <FormControlContextProvider value={contextValue}>\n      <Container\n        {...bezierProps}\n        ref={forwardedRef}\n        style={containerStyle}\n        testId={testId}\n        labelPosition={labelPosition}\n      >\n        { children }\n      </Container>\n    </FormControlContextProvider>\n  )\n})\n"],"names":["FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","testId","className","rest","forwardedRef","React","createElement","Stack","Object","assign","ref","direction","classNames","styles","Grid","FormControl","id","idProp","leftLabelWrapperHeight","FormFieldSize","M","style","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","undefined","describerId","useMemo","bezierProps","formCommonProps","splitByBezierComponentProps","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","FormLabelWrapper","typo","getFieldProps","getHelperTextProps","visible","isNil","hasError","FormHelperTextWrapper","getErrorMessageProps","contextValue","containerStyle","px","FormControlContextProvider","value"],"mappings":";;;;;;;;;;;;;AAgCO,MAAMA,oBAAoB,GAAG,4BAA2B;AAE/D,MAAMC,SAAS,gBAAGC,gBAAU,CAA8B,SAASD,SAASA,CAAC;EAC3EE,aAAa;EACbC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,QAAQL,aAAa;AACnB,IAAA,KAAK,KAAK;MACR,oBACEM,KAAA,CAAAC,aAAA,CAACC,WAAK,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACAN,IAAI,EAAA;AACRD,QAAAA,SAAS,EAAEA,SAAU;AACrBQ,QAAAA,GAAG,EAAEN,YAAa;AAClBO,QAAAA,SAAS,EAAC,UAAU;AACpBV,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAAA,CAAA,EAEbD,QACG,CAAC,CAAA;AAGZ,IAAA,KAAK,MAAM,CAAA;AACX,IAAA;MACE,oBACEK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,MAAA,CAAAC,MAAA,KACMN,IAAI,EAAA;AACRO,QAAAA,GAAG,EAAEN,YAAmD;QACxDF,SAAS,EAAEU,aAAU,CACnBC,0BAAM,CAACC,IAAI,EACXZ,SACF,CAAE;QACF,aAAaD,EAAAA,MAAAA;AAAO,OAAA,CAAA,EAElBD,QACC,CAAC,CAAA;AAEZ,GAAA;AACF,CAAC,CAAC,CAAA;MAEWe,WAAW,gBAAGjB,gBAAU,CAAgC,SAASiB,WAAWA,CAAC;AACxFC,EAAAA,EAAE,EAAEC,MAAM;AACVhB,EAAAA,MAAM,GAAGL,oBAAoB;AAC7BG,EAAAA,aAAa,GAAG,KAAK;EACrBmB,sBAAsB,GAAGC,qBAAa,CAACC,CAAC;SACxCC,OAAK;EACLrB,QAAQ;EACR,GAAGG,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM,CAACkB,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;EACpE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGF,cAAQ,CAAqB,IAAI,CAAC,CAAA;EAC9E,MAAM,CAACG,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGJ,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAElF,EAAA,MAAMR,EAAE,GAAGa,aAAK,CAACZ,MAAM,EAAE,OAAO,CAAC,CAAA;AACjC,EAAA,MAAMa,OAAO,GAAI,CAAEd,EAAAA,EAAG,CAAO,MAAA,CAAA,CAAA;AAC7B,EAAA,MAAMe,OAAO,GAAI,CAAEf,EAAAA,EAAG,CAAO,MAAA,CAAA,CAAA;AAC7B,EAAA,MAAMgB,YAAY,GAAI,CAAEhB,EAAAA,EAAG,CAAW,UAAA,CAAA,CAAA;AACtC,EAAA,MAAMiB,cAAc,GAAI,CAAEjB,EAAAA,EAAG,CAAe,cAAA,CAAA,CAAA;AAE5C,EAAA,MAAMkB,OAAO,GAAGZ,SAAS,GAAGa,SAAS,GAAGnB,EAAE,CAAA;AAE1C,EAAA,MAAMoB,WAAW,GAAGC,aAAO,CAAC,MAAM;AAChC,IAAA,IAAIV,gBAAgB,EAAE;AAAE,MAAA,OAAOM,cAAc,CAAA;AAAC,KAAA;AAC9C,IAAA,IAAIR,cAAc,EAAE;AAAE,MAAA,OAAOO,YAAY,CAAA;AAAC,KAAA;AAC1C,IAAA,OAAOG,SAAS,CAAA;GACjB,EAAE,CACDR,gBAAgB,EAChBF,cAAc,EACdQ,cAAc,EACdD,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,MAAM,CAACM,WAAW,EAAEC,eAAe,CAAC,GAAGF,aAAO,CAAC,MAAMG,iCAA2B,CAACrC,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC,CAAA;AAE/F,EAAA,MAAMsC,aAAa,GAAGC,iBAAW,CAAmBC,QAAQ,KAAK;AAC/D3B,IAAAA,EAAE,EAAEc,OAAO;AACX,IAAA,iBAAiB,EAAEC,OAAO;AAC1B,IAAA,kBAAkB,EAAEK,WAAW;AAC/B1B,IAAAA,GAAG,EAAEa,YAAY;IACjB,GAAGoB,QAAAA;GACJ,CAAC,EAAE,CACFb,OAAO,EACPC,OAAO,EACPK,WAAW,CACZ,CAAC,CAAA;AAEF,EAAA,MAAMQ,aAAa,GAAGF,iBAAW,CAAmBC,QAAQ,KAAK;AAC/D3B,IAAAA,EAAE,EAAEe,OAAO;AACXc,IAAAA,OAAO,EAAEX,OAAO;AAChBhC,IAAAA,SAAS,EAAEU,aAAU,CAACC,0BAAM,CAACiC,gBAAgB,EAAEjC,0BAAM,CAAE,CAAA,SAAA,EAAWd,aAAc,CAAA,CAAC,CAAC,CAAC;AACnFgD,IAAAA,IAAI,EAAEhD,aAAa,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI;IAC3C,GAAG4C,QAAAA;GACJ,CAAC,EAAE,CACFT,OAAO,EACPH,OAAO,EACPhC,aAAa,CACd,CAAC,CAAA;AAEF,EAAA,MAAMiD,aAAa,GAAGN,iBAAW,CAAmBC,QAAQ,KAAK;AAC/D3B,IAAAA,EAAE,EAAEkB,OAAO;AACX,IAAA,kBAAkB,EAAEZ,SAAS,GAAGa,SAAS,GAAGC,WAAW;AACvD,IAAA,GAAGG,eAAe;IAClB,GAAGI,QAAAA;GACJ,CAAC,EAAE,CACFT,OAAO,EACPE,WAAW,EACXG,eAAe,EACfjB,SAAS,CACV,CAAC,CAAA;AAEF,EAAA,MAAM2B,kBAAkB,GAAGP,iBAAW,CAAwBC,QAAQ,KAAK;AACzE3B,IAAAA,EAAE,EAAEgB,YAAY;IAChBkB,OAAO,EAAEC,UAAK,CAACZ,eAAe,EAAEa,QAAQ,CAAC,IAAI,CAACb,eAAe,EAAEa,QAAQ;AACvE1C,IAAAA,GAAG,EAAEgB,iBAAiB;AACtBxB,IAAAA,SAAS,EAAEU,aAAU,CAACC,0BAAM,CAACwC,qBAAqB,EAAEtD,aAAa,KAAK,MAAM,IAAIc,0BAAM,CAAC,eAAe,CAAC,CAAC;IACxG,GAAG8B,QAAAA;GACJ,CAAC,EAAE,CACFX,YAAY,EACZjC,aAAa,EACbwC,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,MAAMe,oBAAoB,GAAGZ,iBAAW,CAA0BC,QAAQ,KAAK;AAC7E3B,IAAAA,EAAE,EAAEiB,cAAc;IAClBiB,OAAO,EAAEC,UAAK,CAACZ,eAAe,EAAEa,QAAQ,CAAC,IAAIb,eAAe,EAAEa,QAAQ;AACtE1C,IAAAA,GAAG,EAAEkB,mBAAmB;AACxB1B,IAAAA,SAAS,EAAEU,aAAU,CAACC,0BAAM,CAACwC,qBAAqB,EAAEtD,aAAa,KAAK,MAAM,IAAIc,0BAAM,CAAC,eAAe,CAAC,CAAC;IACxG,GAAG8B,QAAAA;GACJ,CAAC,EAAE,CACFV,cAAc,EACdlC,aAAa,EACbwC,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,MAAMgB,YAAY,GAAGlB,aAAO,CAAC,OAAO;IAClCrB,EAAE;IACFe,OAAO;IACPC,YAAY;IACZC,cAAc;IACdQ,aAAa;IACbG,aAAa;IACbI,aAAa;IACbC,kBAAkB;IAClBK,oBAAoB;IACpB,GAAGf,eAAAA;GACJ,CAAC,EAAE,CACFvB,EAAE,EACFe,OAAO,EACPC,YAAY,EACZC,cAAc,EACdQ,aAAa,EACbG,aAAa,EACbI,aAAa,EACbC,kBAAkB,EAClBK,oBAAoB,EACpBf,eAAe,CAChB,CAAC,CAAA;;AAEF;AACA,EAAA,MAAMiB,cAAc,GAAGnB,aAAO,CAAC,OAAO;AACpC,IAAA,GAAGhB,OAAK;IACR,4CAA4C,EAAEoC,QAAE,CAACvC,sBAAsB,CAAA;AACzE,GAAC,CAAwB,EAAE,CACzBG,OAAK,EACLH,sBAAsB,CACvB,CAAC,CAAA;EAEF,IAAI,CAAClB,QAAQ,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAE7B,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACoD,6CAA0B,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAAA;GACjClD,eAAAA,KAAA,CAAAC,aAAA,CAACT,SAAS,EAAAW,MAAA,CAAAC,MAAA,CAAA,EAAA,EACJ6B,WAAW,EAAA;AACf5B,IAAAA,GAAG,EAAEN,YAAa;AAClBiB,IAAAA,KAAK,EAAEmC,cAAe;AACtBvD,IAAAA,MAAM,EAAEA,MAAO;AACfF,IAAAA,aAAa,EAAEA,aAAAA;GAEbC,CAAAA,EAAAA,QACO,CACe,CAAC,CAAA;AAEjC,CAAC;;;;;"}
+{"version":3,"file":"FormControl.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { splitByBezierComponentProps } from '~/src/utils/props'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\n// eslint-disable-next-line no-restricted-imports\nimport formStyles from '../Form.module.scss'\n\nimport {\n  type ContainerProps,\n  type ErrorMessagePropsGetter,\n  type FieldPropsGetter,\n  type FormControlProps,\n  type GroupPropsGetter,\n  type HelperTextPropsGetter,\n  type LabelPropsGetter,\n} from './FormControl.types'\nimport { FormControlContextProvider } from './FormControlContext'\n\nimport styles from './FormControl.module.scss'\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-react-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container({\n  labelPosition,\n  children,\n  testId,\n  className,\n  ...rest\n}, forwardedRef) {\n  switch (labelPosition) {\n    case 'top':\n      return (\n        <Stack\n          {...rest}\n          className={className}\n          ref={forwardedRef}\n          direction=\"vertical\"\n          testId={testId}\n        >\n          { children }\n        </Stack>\n      )\n\n    case 'left':\n    default:\n      return (\n        <div\n          {...rest}\n          ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n          className={classNames(\n            styles.Grid,\n            className,\n          )}\n          data-testid={testId}\n        >\n          { children }\n        </div>\n      )\n  }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(function FormControl({\n  id: idProp,\n  testId = FORM_CONTROL_TEST_ID,\n  labelPosition = 'top',\n  size = 'm',\n  style,\n  children,\n  ...rest\n}, forwardedRef) {\n  const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n  const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(null)\n  const [errorMessageNode, setErrorMessageNode] = useState<HTMLElement | null>(null)\n\n  const id = useId(idProp, 'field')\n  const groupId = `${id}-group`\n  const labelId = `${id}-label`\n  const helperTextId = `${id}-help-text`\n  const errorMessageId = `${id}-error-message`\n\n  const fieldId = groupNode ? undefined : id\n\n  const describerId = useMemo(() => {\n    if (errorMessageNode) { return errorMessageId }\n    if (helperTextNode) { return helperTextId }\n    return undefined\n  }, [\n    errorMessageNode,\n    helperTextNode,\n    errorMessageId,\n    helperTextId,\n  ])\n\n  const [bezierProps, formCommonProps] = useMemo(() => splitByBezierComponentProps(rest), [rest])\n\n  const getGroupProps = useCallback<GroupPropsGetter>(ownProps => ({\n    id: groupId,\n    'aria-labelledby': labelId,\n    'aria-describedby': describerId,\n    ref: setGroupNode,\n    ...ownProps,\n  }), [\n    groupId,\n    labelId,\n    describerId,\n  ])\n\n  const getLabelProps = useCallback<LabelPropsGetter>(ownProps => ({\n    id: labelId,\n    htmlFor: fieldId,\n    className: classNames(\n      styles.FormLabelWrapper,\n      styles[`position-${labelPosition}`],\n      formStyles[`size-${size}`],\n    ),\n    typo: labelPosition === 'top' ? '13' : '14',\n    ...ownProps,\n  }), [\n    fieldId,\n    labelId,\n    labelPosition,\n    size,\n  ])\n\n  const getFieldProps = useCallback<FieldPropsGetter>(ownProps => ({\n    id: fieldId,\n    size,\n    'aria-describedby': groupNode ? undefined : describerId,\n    ...formCommonProps,\n    ...ownProps,\n  }), [\n    fieldId,\n    describerId,\n    size,\n    formCommonProps,\n    groupNode,\n  ])\n\n  const getHelperTextProps = useCallback<HelperTextPropsGetter>(ownProps => ({\n    id: helperTextId,\n    visible: isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,\n    ref: setHelperTextNode,\n    className: classNames(styles.FormHelperTextWrapper, labelPosition === 'left' && styles['position-left']),\n    ...ownProps,\n  }), [\n    helperTextId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(ownProps => ({\n    id: errorMessageId,\n    visible: isNil(formCommonProps?.hasError) || formCommonProps?.hasError,\n    ref: setErrorMessageNode,\n    className: classNames(styles.FormHelperTextWrapper, labelPosition === 'left' && styles['position-left']),\n    ...ownProps,\n  }), [\n    errorMessageId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const contextValue = useMemo(() => ({\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    ...formCommonProps,\n  }), [\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    formCommonProps,\n  ])\n\n  if (!children) { return null }\n\n  return (\n    <FormControlContextProvider value={contextValue}>\n      <Container\n        {...bezierProps}\n        ref={forwardedRef}\n        style={style}\n        testId={testId}\n        labelPosition={labelPosition}\n      >\n        { children }\n      </Container>\n    </FormControlContextProvider>\n  )\n})\n"],"names":["FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","testId","className","rest","forwardedRef","React","createElement","Stack","Object","assign","ref","direction","classNames","styles","Grid","FormControl","id","idProp","size","style","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","undefined","describerId","useMemo","bezierProps","formCommonProps","splitByBezierComponentProps","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","FormLabelWrapper","formStyles","typo","getFieldProps","getHelperTextProps","visible","isNil","hasError","FormHelperTextWrapper","getErrorMessageProps","contextValue","FormControlContextProvider","value"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/Select/Select.js

@@ -6,20 +6,20 @@ var index = require('../../../../node_modules/classnames/index.js');
 var props = require('../../../../utils/props.js');
 var type = require('../../../../utils/type.js');
 var useFormFieldProps = require('../../useFormFieldProps.js');
-var Overlay = require('../../../Overlay/Overlay.js');
-var Overlay_types = require('../../../Overlay/Overlay.types.js');
-var Select_types = require('./Select.types.js');
+var Form_module = require('../../Form.module.scss.js');
 var Select_module = require('./Select.module.scss.js');
 var Icon = require('../../../Icon/Icon.js');
 var Icon_types = require('../../../Icon/Icon.types.js');
 var Text = require('../../../Text/Text.js');
+var Overlay = require('../../../Overlay/Overlay.js');
+var Overlay_types = require('../../../Overlay/Overlay.types.js');
 
 const SELECT_DROPDOWN_TEST_ID = 'bezier-react-select-dropdown';
 const Select = /*#__PURE__*/React.forwardRef(function Select({
   children,
   style,
   className,
-  size = Select_types.SelectSize.M,
+  size: sizeProps,
   defaultFocus = false,
   placeholder = '',
   leftContent,
@@ -47,10 +47,12 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
     disabled,
     readOnly,
     hasError,
+    size: formFieldSize,
     ...ownProps
   } = useFormFieldProps.default(rest);
   const containerRef = React.useRef(null);
   const triggerRef = React.useRef(null);
+  const size = sizeProps ?? formFieldSize ?? 'm';
   const [isDropdownOpened, setIsDropdownOpened] = React.useState(false);
   const handleClickTrigger = React.useCallback(event => {
     if (!disabled && !readOnly) {
@@ -81,7 +83,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
     ref: containerRef,
     "data-testid": testId
   }, /*#__PURE__*/React.createElement("button", Object.assign({
-    className: index.default(Select_module.default.SelectTrigger, size && Select_module.default[`size-${size}`], hasError && Select_module.default.invalid, readOnly && Select_module.default.readonly, isDropdownOpened && Select_module.default.active),
+    className: index.default(Select_module.default.SelectTrigger, Form_module.default[`size-${size}`], hasError && Select_module.default.invalid, readOnly && Select_module.default.readonly, isDropdownOpened && Select_module.default.active),
     ref: triggerRef,
     type: "button",
     disabled: disabled,
@@ -109,7 +111,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
     size: Icon_types.IconSize.XS,
     color: readOnly ? 'txt-black-dark' : 'txt-black-darker',
     marginLeft: 6
-  })), /*#__PURE__*/React.createElement(Overlay.default, {
+  })), /*#__PURE__*/React.createElement(Overlay.Overlay, {
     style: dropdownStyle,
     className: index.default(Select_module.default.SelectDropdown, props.getZIndexClassName(dropdownZIndex), dropdownClassName),
     testId: dropdownTestId,

package/dist/cjs/components/Forms/Inputs/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Forms/Inputs/Select/Select.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { getZIndexClassName } from '~/src/utils/props'\nimport { isEmpty } from '~/src/utils/type'\n\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport {\n  Overlay,\n  OverlayPosition,\n} from '~/src/components/Overlay'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type SelectProps,\n  type SelectRef,\n  SelectSize,\n} from './Select.types'\n\nimport styles from './Select.module.scss'\n\nexport const SELECT_DROPDOWN_TEST_ID = 'bezier-react-select-dropdown'\n\nexport const Select = forwardRef<SelectRef, SelectProps>(function Select({\n  children,\n  style,\n  className,\n  size = SelectSize.M,\n  defaultFocus = false,\n  placeholder = '',\n  leftContent,\n  rightContent,\n  iconColor = 'txt-black-dark',\n  text,\n  textColor = 'txt-black-darkest',\n  withoutChevron = false,\n  dropdownStyle,\n  dropdownClassName,\n  dropdownContainer,\n  dropdownMarginX,\n  dropdownMarginY = 6,\n  dropdownZIndex = 'overlay',\n  dropdownPosition = OverlayPosition.BottomLeft,\n  testId = 'bezier-react-select-container',\n  triggerTestId = 'bezier-react-select-trigger',\n  triggerTextTestId = 'bezier-react-select-trigger-text',\n  dropdownTestId = SELECT_DROPDOWN_TEST_ID,\n  onClickTrigger,\n  onHideDropdown,\n  ...rest\n}, forwardedRef) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const [isDropdownOpened, setIsDropdownOpened] = useState(false)\n\n  const handleClickTrigger = useCallback((event: React.MouseEvent) => {\n    if (!disabled && !readOnly) {\n      setIsDropdownOpened(prevState => !prevState)\n      onClickTrigger?.(event)\n    }\n  }, [\n    disabled,\n    readOnly,\n    onClickTrigger,\n  ])\n\n  const handleHideDropdown = useCallback(() => {\n    setIsDropdownOpened(false)\n    onHideDropdown?.()\n  }, [onHideDropdown])\n\n  const getDOMNode = useCallback(() => triggerRef.current, [])\n\n  const handle = useMemo((): SelectRef => ({\n    handleClickTrigger,\n    handleHideDropdown,\n    getDOMNode,\n  }), [\n    handleClickTrigger,\n    handleHideDropdown,\n    getDOMNode,\n  ])\n\n  useEffect(function handleDefaultFocus() {\n    if (defaultFocus && !disabled && !readOnly) {\n      setIsDropdownOpened(true)\n    }\n  }, [\n    defaultFocus,\n    disabled,\n    readOnly,\n  ])\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  const hasContent = !isEmpty(text)\n\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles.SelectContainer,\n        className,\n      )}\n      ref={containerRef}\n      data-testid={testId}\n    >\n      <button\n        className={classNames(\n          styles.SelectTrigger,\n          size && styles[`size-${size}`],\n          hasError && styles.invalid,\n          readOnly && styles.readonly,\n          isDropdownOpened && styles.active,\n        )}\n        ref={triggerRef}\n        type=\"button\"\n        disabled={disabled}\n        data-testid={triggerTestId}\n        onClick={handleClickTrigger}\n        {...ownProps}\n      >\n        <div className={styles.SelectMainContent}>\n          { isBezierIcon(leftContent)\n            ? (\n              <Icon\n                source={leftContent}\n                size={IconSize.XS}\n                marginRight={6}\n                color={iconColor}\n              />\n            )\n            : leftContent }\n\n          <Text\n            testId={triggerTextTestId}\n            typo=\"14\"\n            truncated\n            color={hasContent ? textColor : 'txt-black-dark'}\n          >\n            { hasContent ? text : placeholder }\n          </Text>\n\n          { isBezierIcon(rightContent)\n            ? (\n              <Icon\n                source={rightContent}\n                size={IconSize.XS}\n                marginRight={6}\n                color={iconColor}\n              />\n            )\n            : rightContent }\n        </div>\n\n        { !withoutChevron && (\n          <Icon\n            source={isDropdownOpened ? ChevronUpIcon : ChevronDownIcon}\n            size={IconSize.XS}\n            color={readOnly ? 'txt-black-dark' : 'txt-black-darker'}\n            marginLeft={6}\n          />\n        ) }\n      </button>\n\n      <Overlay\n        style={dropdownStyle}\n        className={classNames(\n          styles.SelectDropdown,\n          getZIndexClassName(dropdownZIndex),\n          dropdownClassName,\n        )}\n        testId={dropdownTestId}\n        withTransition\n        show={isDropdownOpened && !disabled}\n        marginX={dropdownMarginX}\n        marginY={dropdownMarginY}\n        target={triggerRef.current}\n        container={dropdownContainer || containerRef.current}\n        position={dropdownPosition}\n        onHide={handleHideDropdown}\n      >\n        { children }\n      </Overlay>\n    </div>\n  )\n})\n"],"names":["SELECT_DROPDOWN_TEST_ID","Select","forwardRef","children","style","className","size","SelectSize","M","defaultFocus","placeholder","leftContent","rightContent","iconColor","text","textColor","withoutChevron","dropdownStyle","dropdownClassName","dropdownContainer","dropdownMarginX","dropdownMarginY","dropdownZIndex","dropdownPosition","OverlayPosition","BottomLeft","testId","triggerTestId","triggerTextTestId","dropdownTestId","onClickTrigger","onHideDropdown","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","containerRef","useRef","triggerRef","isDropdownOpened","setIsDropdownOpened","useState","handleClickTrigger","useCallback","event","prevState","handleHideDropdown","getDOMNode","current","handle","useMemo","useEffect","handleDefaultFocus","useImperativeHandle","hasContent","isEmpty","React","createElement","classNames","styles","SelectContainer","ref","Object","assign","SelectTrigger","invalid","readonly","active","type","onClick","SelectMainContent","isBezierIcon","Icon","source","IconSize","XS","marginRight","color","Text","typo","truncated","ChevronUpIcon","ChevronDownIcon","marginLeft","Overlay","SelectDropdown","getZIndexClassName","withTransition","show","marginX","marginY","target","container","position","onHide"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Forms/Inputs/Select/Select.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { getZIndexClassName } from '~/src/utils/props'\nimport { isEmpty } from '~/src/utils/type'\n\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport {\n  Overlay,\n  OverlayPosition,\n} from '~/src/components/Overlay'\nimport { Text } from '~/src/components/Text'\n\n// eslint-disable-next-line no-restricted-imports\nimport formStyles from '../../Form.module.scss'\n\nimport {\n  type SelectProps,\n  type SelectRef,\n} from './Select.types'\n\nimport styles from './Select.module.scss'\n\nexport const SELECT_DROPDOWN_TEST_ID = 'bezier-react-select-dropdown'\n\nexport const Select = forwardRef<SelectRef, SelectProps>(function Select({\n  children,\n  style,\n  className,\n  size: sizeProps,\n  defaultFocus = false,\n  placeholder = '',\n  leftContent,\n  rightContent,\n  iconColor = 'txt-black-dark',\n  text,\n  textColor = 'txt-black-darkest',\n  withoutChevron = false,\n  dropdownStyle,\n  dropdownClassName,\n  dropdownContainer,\n  dropdownMarginX,\n  dropdownMarginY = 6,\n  dropdownZIndex = 'overlay',\n  dropdownPosition = OverlayPosition.BottomLeft,\n  testId = 'bezier-react-select-container',\n  triggerTestId = 'bezier-react-select-trigger',\n  triggerTextTestId = 'bezier-react-select-trigger-text',\n  dropdownTestId = SELECT_DROPDOWN_TEST_ID,\n  onClickTrigger,\n  onHideDropdown,\n  ...rest\n}, forwardedRef) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    size: formFieldSize,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const size = sizeProps ?? formFieldSize ?? 'm'\n\n  const [isDropdownOpened, setIsDropdownOpened] = useState(false)\n\n  const handleClickTrigger = useCallback((event: React.MouseEvent) => {\n    if (!disabled && !readOnly) {\n      setIsDropdownOpened(prevState => !prevState)\n      onClickTrigger?.(event)\n    }\n  }, [\n    disabled,\n    readOnly,\n    onClickTrigger,\n  ])\n\n  const handleHideDropdown = useCallback(() => {\n    setIsDropdownOpened(false)\n    onHideDropdown?.()\n  }, [onHideDropdown])\n\n  const getDOMNode = useCallback(() => triggerRef.current, [])\n\n  const handle = useMemo((): SelectRef => ({\n    handleClickTrigger,\n    handleHideDropdown,\n    getDOMNode,\n  }), [\n    handleClickTrigger,\n    handleHideDropdown,\n    getDOMNode,\n  ])\n\n  useEffect(function handleDefaultFocus() {\n    if (defaultFocus && !disabled && !readOnly) {\n      setIsDropdownOpened(true)\n    }\n  }, [\n    defaultFocus,\n    disabled,\n    readOnly,\n  ])\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  const hasContent = !isEmpty(text)\n\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles.SelectContainer,\n        className,\n      )}\n      ref={containerRef}\n      data-testid={testId}\n    >\n      <button\n        className={classNames(\n          styles.SelectTrigger,\n          formStyles[`size-${size}`],\n          hasError && styles.invalid,\n          readOnly && styles.readonly,\n          isDropdownOpened && styles.active,\n        )}\n        ref={triggerRef}\n        type=\"button\"\n        disabled={disabled}\n        data-testid={triggerTestId}\n        onClick={handleClickTrigger}\n        {...ownProps}\n      >\n        <div className={styles.SelectMainContent}>\n          { isBezierIcon(leftContent)\n            ? (\n              <Icon\n                source={leftContent}\n                size={IconSize.XS}\n                marginRight={6}\n                color={iconColor}\n              />\n            )\n            : leftContent }\n\n          <Text\n            testId={triggerTextTestId}\n            typo=\"14\"\n            truncated\n            color={hasContent ? textColor : 'txt-black-dark'}\n          >\n            { hasContent ? text : placeholder }\n          </Text>\n\n          { isBezierIcon(rightContent)\n            ? (\n              <Icon\n                source={rightContent}\n                size={IconSize.XS}\n                marginRight={6}\n                color={iconColor}\n              />\n            )\n            : rightContent }\n        </div>\n\n        { !withoutChevron && (\n          <Icon\n            source={isDropdownOpened ? ChevronUpIcon : ChevronDownIcon}\n            size={IconSize.XS}\n            color={readOnly ? 'txt-black-dark' : 'txt-black-darker'}\n            marginLeft={6}\n          />\n        ) }\n      </button>\n\n      <Overlay\n        style={dropdownStyle}\n        className={classNames(\n          styles.SelectDropdown,\n          getZIndexClassName(dropdownZIndex),\n          dropdownClassName,\n        )}\n        testId={dropdownTestId}\n        withTransition\n        show={isDropdownOpened && !disabled}\n        marginX={dropdownMarginX}\n        marginY={dropdownMarginY}\n        target={triggerRef.current}\n        container={dropdownContainer || containerRef.current}\n        position={dropdownPosition}\n        onHide={handleHideDropdown}\n      >\n        { children }\n      </Overlay>\n    </div>\n  )\n})\n"],"names":["SELECT_DROPDOWN_TEST_ID","Select","forwardRef","children","style","className","size","sizeProps","defaultFocus","placeholder","leftContent","rightContent","iconColor","text","textColor","withoutChevron","dropdownStyle","dropdownClassName","dropdownContainer","dropdownMarginX","dropdownMarginY","dropdownZIndex","dropdownPosition","OverlayPosition","BottomLeft","testId","triggerTestId","triggerTextTestId","dropdownTestId","onClickTrigger","onHideDropdown","rest","forwardedRef","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","containerRef","useRef","triggerRef","isDropdownOpened","setIsDropdownOpened","useState","handleClickTrigger","useCallback","event","prevState","handleHideDropdown","getDOMNode","current","handle","useMemo","useEffect","handleDefaultFocus","useImperativeHandle","hasContent","isEmpty","React","createElement","classNames","styles","SelectContainer","ref","Object","assign","SelectTrigger","formStyles","invalid","readonly","active","type","onClick","SelectMainContent","isBezierIcon","Icon","source","IconSize","XS","marginRight","color","Text","typo","truncated","ChevronUpIcon","ChevronDownIcon","marginLeft","Overlay","SelectDropdown","getZIndexClassName","withTransition","show","marginX","marginY","target","container","position","onHide"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/Select/Select.module.scss.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"SelectContainer":"b-Select-SelectContainer_361FL","SelectTrigger":"b-Select-SelectTrigger_H40Io","size-28":"b-Select-size-28_cUWX8","size-36":"b-Select-size-36_LqiIy","size-44":"b-Select-size-44_m-5OK","size-54":"b-Select-size-54_qOYkf","readonly":"b-Select-readonly_DNRGC","invalid":"b-Select-invalid_-b1gk","active":"b-Select-active_LUwjy","SelectMainContent":"b-Select-SelectMainContent_krKVe","SelectDropdown":"b-Select-SelectDropdown_Fly8A"};
+var styles = {"SelectContainer":"b-Select-SelectContainer_361FL","SelectTrigger":"b-Select-SelectTrigger_H40Io","readonly":"b-Select-readonly_DNRGC","invalid":"b-Select-invalid_-b1gk","active":"b-Select-active_LUwjy","SelectMainContent":"b-Select-SelectMainContent_krKVe","SelectDropdown":"b-Select-SelectDropdown_Fly8A"};
 
 exports.default = styles;
 //# sourceMappingURL=Select.module.scss.js.map

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.js

@@ -4,11 +4,11 @@ var React = require('react');
 var index = require('../../../../node_modules/classnames/index.js');
 var reactTextareaAutosize_esm = require('../../../../node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.js');
 var useMergeRefs = require('../../../../hooks/useMergeRefs.js');
-var CommonImeControlKeys = require('../constants/CommonImeControlKeys.js');
 var useFormFieldProps = require('../../useFormFieldProps.js');
 var useKeyboardActionLockerWhileComposing = require('../../useKeyboardActionLockerWhileComposing.js');
 var TextArea_types = require('./TextArea.types.js');
 var TextArea_module = require('./TextArea.module.scss.js');
+var CommonImeControlKeys = require('../constants/CommonImeControlKeys.js');
 
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
   style,

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useLayoutEffect,\n  useRef,\n} from 'react'\n\nimport classNames from 'classnames'\nimport TextareaAutosize from 'react-textarea-autosize'\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'\n\nimport styles from './TextArea.module.scss'\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea({\n  style,\n  className,\n  testId = 'bezier-react-text-area',\n  minRows = TextAreaHeight.Row6,\n  maxRows = TextAreaHeight.Row6,\n  autoFocus = false,\n  value = '',\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}, forwardedRef) {\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(inputRef, forwardedRef)\n\n  const {\n    handleKeyDown,\n    handleKeyUp,\n  } = useKeyboardActionLockerWhileComposing({\n    keysToLock: COMMON_IME_CONTROL_KEYS,\n    onKeyDown,\n    onKeyUp,\n  })\n\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    <TextareaAutosize\n      {...ownProps}\n      style={style}\n      className={classNames(\n        styles.TextArea,\n        className,\n      )}\n      ref={mergedInputRef}\n      value={value}\n      disabled={disabled}\n      readOnly={readOnly}\n      maxRows={maxRows}\n      minRows={minRows}\n      data-testid={testId}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n    />\n  )\n})\n"],"names":["TextArea","forwardRef","style","className","testId","minRows","TextAreaHeight","Row6","maxRows","autoFocus","value","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useLayoutEffect","initialAutoFocus","setSelectionToEnd","current","setSelectionRange","length","focus","React","createElement","TextareaAutosize","Object","assign","classNames","styles","ref"],"mappings":";;;;;;;;;;;;MAoBaA,QAAQ,gBAAGC,gBAAU,CAAqC,SAASD,QAAQA,CAAC;EACvFE,KAAK;EACLC,SAAS;AACTC,EAAAA,MAAM,GAAG,wBAAwB;EACjCC,OAAO,GAAGC,6BAAc,CAACC,IAAI;EAC7BC,OAAO,GAAGF,6BAAc,CAACC,IAAI;AAC7BE,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,KAAK,GAAG,EAAE;EACVC,SAAS;EACTC,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM;IACJC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACR,GAAGC,QAAAA;AACL,GAAC,GAAGC,yBAAiB,CAACN,IAAI,CAAC,CAAA;AAE3B,EAAA,MAAMO,QAAQ,GAAGC,YAAM,CAA6B,IAAI,CAAC,CAAA;AACzD,EAAA,MAAMC,cAAc,GAAGC,oBAAY,CAACH,QAAQ,EAAEN,YAAY,CAAC,CAAA;EAE3D,MAAM;IACJU,aAAa;AACbC,IAAAA,WAAAA;GACD,GAAGC,6CAAqC,CAAC;AACxCC,IAAAA,UAAU,EAAEC,4CAAuB;IACnCjB,SAAS;AACTC,IAAAA,OAAAA;AACF,GAAC,CAAC,CAAA;AAEFiB,EAAAA,qBAAe,CAAC,SAASC,gBAAgBA,GAAG;IAC1C,SAASC,iBAAiBA,GAAG;MAC3BX,QAAQ,CAACY,OAAO,EAAEC,iBAAiB,CAACb,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAAM,EAAEd,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAAM,CAAC,CAAA;AACrG,KAAA;AAEA,IAAA,IAAIzB,SAAS,EAAE;AACbW,MAAAA,QAAQ,CAACY,OAAO,EAAEG,KAAK,EAAE,CAAA;AACzBJ,MAAAA,iBAAiB,EAAE,CAAA;AACrB,KAAA;AACF;GACC,EAAE,EAAE,CAAC,CAAA;EAEN,oBACEK,KAAA,CAAAC,aAAA,CAACC,iCAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACXtB,QAAQ,EAAA;AACZhB,IAAAA,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEsC,aAAU,CACnBC,uBAAM,CAAC1C,QAAQ,EACfG,SACF,CAAE;AACFwC,IAAAA,GAAG,EAAErB,cAAe;AACpBZ,IAAAA,KAAK,EAAEA,KAAM;AACbK,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBR,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaD,MAAO;AACpBO,IAAAA,SAAS,EAAEa,aAAc;AACzBZ,IAAAA,OAAO,EAAEa,WAAAA;AAAY,GAAA,CACtB,CAAC,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useLayoutEffect,\n  useRef,\n} from 'react'\n\nimport classNames from 'classnames'\nimport TextareaAutosize from 'react-textarea-autosize'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { COMMON_IME_CONTROL_KEYS } from '~/src/components/Forms'\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'\n\nimport styles from './TextArea.module.scss'\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea({\n  style,\n  className,\n  testId = 'bezier-react-text-area',\n  minRows = TextAreaHeight.Row6,\n  maxRows = TextAreaHeight.Row6,\n  autoFocus = false,\n  value = '',\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}, forwardedRef) {\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(inputRef, forwardedRef)\n\n  const {\n    handleKeyDown,\n    handleKeyUp,\n  } = useKeyboardActionLockerWhileComposing({\n    keysToLock: COMMON_IME_CONTROL_KEYS,\n    onKeyDown,\n    onKeyUp,\n  })\n\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    <TextareaAutosize\n      {...ownProps}\n      style={style}\n      className={classNames(\n        styles.TextArea,\n        className,\n      )}\n      ref={mergedInputRef}\n      value={value}\n      disabled={disabled}\n      readOnly={readOnly}\n      maxRows={maxRows}\n      minRows={minRows}\n      data-testid={testId}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n    />\n  )\n})\n"],"names":["TextArea","forwardRef","style","className","testId","minRows","TextAreaHeight","Row6","maxRows","autoFocus","value","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useLayoutEffect","initialAutoFocus","setSelectionToEnd","current","setSelectionRange","length","focus","React","createElement","TextareaAutosize","Object","assign","classNames","styles","ref"],"mappings":";;;;;;;;;;;;MAoBaA,QAAQ,gBAAGC,gBAAU,CAAqC,SAASD,QAAQA,CAAC;EACvFE,KAAK;EACLC,SAAS;AACTC,EAAAA,MAAM,GAAG,wBAAwB;EACjCC,OAAO,GAAGC,6BAAc,CAACC,IAAI;EAC7BC,OAAO,GAAGF,6BAAc,CAACC,IAAI;AAC7BE,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,KAAK,GAAG,EAAE;EACVC,SAAS;EACTC,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM;IACJC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACR,GAAGC,QAAAA;AACL,GAAC,GAAGC,yBAAiB,CAACN,IAAI,CAAC,CAAA;AAE3B,EAAA,MAAMO,QAAQ,GAAGC,YAAM,CAA6B,IAAI,CAAC,CAAA;AACzD,EAAA,MAAMC,cAAc,GAAGC,oBAAY,CAACH,QAAQ,EAAEN,YAAY,CAAC,CAAA;EAE3D,MAAM;IACJU,aAAa;AACbC,IAAAA,WAAAA;GACD,GAAGC,6CAAqC,CAAC;AACxCC,IAAAA,UAAU,EAAEC,4CAAuB;IACnCjB,SAAS;AACTC,IAAAA,OAAAA;AACF,GAAC,CAAC,CAAA;AAEFiB,EAAAA,qBAAe,CAAC,SAASC,gBAAgBA,GAAG;IAC1C,SAASC,iBAAiBA,GAAG;MAC3BX,QAAQ,CAACY,OAAO,EAAEC,iBAAiB,CAACb,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAAM,EAAEd,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAAM,CAAC,CAAA;AACrG,KAAA;AAEA,IAAA,IAAIzB,SAAS,EAAE;AACbW,MAAAA,QAAQ,CAACY,OAAO,EAAEG,KAAK,EAAE,CAAA;AACzBJ,MAAAA,iBAAiB,EAAE,CAAA;AACrB,KAAA;AACF;GACC,EAAE,EAAE,CAAC,CAAA;EAEN,oBACEK,KAAA,CAAAC,aAAA,CAACC,iCAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACXtB,QAAQ,EAAA;AACZhB,IAAAA,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEsC,aAAU,CACnBC,uBAAM,CAAC1C,QAAQ,EACfG,SACF,CAAE;AACFwC,IAAAA,GAAG,EAAErB,cAAe;AACpBZ,IAAAA,KAAK,EAAEA,KAAM;AACbK,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBR,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaD,MAAO;AACpBO,IAAAA,SAAS,EAAEa,aAAc;AACzBZ,IAAAA,OAAO,EAAEa,WAAAA;AAAY,GAAA,CACtB,CAAC,CAAA;AAEN,CAAC;;;;"}

package/dist/cjs/components/Forms/Inputs/TextField/TextField.js

@@ -6,17 +6,29 @@ var index = require('../../../../node_modules/classnames/index.js');
 var WindowProvider = require('../../../../providers/WindowProvider.js');
 var string = require('../../../../utils/string.js');
 var type = require('../../../../utils/type.js');
-var CommonImeControlKeys = require('../constants/CommonImeControlKeys.js');
 var useFormFieldProps = require('../../useFormFieldProps.js');
 var useKeyboardActionLockerWhileComposing = require('../../useKeyboardActionLockerWhileComposing.js');
+var Form_module = require('../../Form.module.scss.js');
 var TextField_types = require('./TextField.types.js');
 var TextField_module = require('./TextField.module.scss.js');
+var CommonImeControlKeys = require('../constants/CommonImeControlKeys.js');
 var Icon = require('../../../Icon/Icon.js');
 var Icon_types = require('../../../Icon/Icon.types.js');
 var v4 = require('../../../../node_modules/uuid/dist/esm-browser/v4.js');
 
 const TEXT_INPUT_TEST_ID = 'bezier-react-text-input';
 const TEXT_INPUT_CLEAR_ICON_TEST_ID = 'bezier-react-text-input-clear-icon';
+
+/**
+ * FIXME: This mapping constant was defined for UI consistency,
+ * and it should be removed with size attribute
+ */
+const INPUT_LENGTH_BY_SIZE = {
+  xs: 28,
+  m: 36,
+  l: 44,
+  xl: 54
+};
 function TextFieldLeftContent({
   children,
   wrapperStyle,
@@ -85,7 +97,7 @@ function TextFieldRightContent({
 }
 const TextField = /*#__PURE__*/React.forwardRef(function TextField({
   type: type$1,
-  size = TextField_types.TextFieldSize.M,
+  size: sizeProps,
   testId = TEXT_INPUT_TEST_ID,
   autoFocus,
   autoComplete = 'off',
@@ -119,6 +131,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField({
     disabled,
     readOnly,
     hasError,
+    size: formFieldSize,
     ...ownProps
   } = useFormFieldProps.default(rest);
   const focusTimeout = React.useRef();
@@ -126,6 +139,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField({
   const normalizedValue = type.isNil(value) ? undefined : string.toString(value);
   const activeInput = !disabled && !readOnly;
   const activeClear = activeInput && allowClear && !type.isEmpty(normalizedValue);
+  const size = sizeProps ?? formFieldSize ?? 'm';
   const inputRef = React.useRef(null);
   const focus = React.useCallback(() => {
     clearTimeout(focusTimeout.current);
@@ -237,7 +251,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField({
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", {
       style: wrapperStyle,
-      className: index.default(TextField_module.default.TextFieldWrapper, TextField_module.default[`variant-${variant}`], TextField_module.default[`size-${size}`], wrapperClassName),
+      className: index.default(TextField_module.default.TextFieldWrapper, TextField_module.default[`variant-${variant}`], TextField_module.default[`size-${size}`], Form_module.default[`size-${size}`], wrapperClassName),
       "data-testid": testId,
       onMouseDown: focus
     }, /*#__PURE__*/React.createElement(TextFieldLeftContent, {
@@ -254,7 +268,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField({
        * Invalid size attribute
        * FIXME: https://github.com/channel-io/bezier-react/issues/1053
        */,
-      size: size,
+      size: INPUT_LENGTH_BY_SIZE[size],
       autoComplete: autoComplete,
       readOnly: readOnly,
       disabled: disabled,

package/dist/cjs/components/Forms/Inputs/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../../../../src/components/Forms/Inputs/TextField/TextField.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { CancelCircleFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport { useWindow } from '~/src/providers/WindowProvider'\nimport { toString } from '~/src/utils/string'\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n} from '~/src/utils/type'\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'\n\nimport styles from './TextField.module.scss'\n\nexport const TEXT_INPUT_TEST_ID = 'bezier-react-text-input'\nexport const TEXT_INPUT_CLEAR_ICON_TEST_ID = 'bezier-react-text-input-clear-icon'\n\nfunction TextFieldLeftContent({\n  children,\n  wrapperStyle,\n  wrapperClassName,\n  withoutWrapper,\n}: {\n  children: TextFieldProps['leftContent']\n  wrapperStyle: TextFieldProps['leftWrapperStyle']\n  wrapperClassName: TextFieldProps['leftWrapperClassName']\n  withoutWrapper: TextFieldProps['withoutLeftContentWrapper']\n}) {\n  if (isNil(children)) {\n    return null\n  }\n\n  const Content = (() => {\n    if ('icon' in children) {\n      return (\n        <Icon\n          className={!isNil(children.onClick) ? styles.clickable : undefined}\n          source={children.icon}\n          size={IconSize.S}\n          color={children.iconColor ?? 'txt-black-dark'}\n          onClick={children.onClick}\n        />\n      )\n    }\n\n    return children\n  })()\n\n  if (withoutWrapper) { return Content }\n\n  return (\n    <div\n      style={wrapperStyle}\n      className={classNames(\n        styles.LeftContentWrapper,\n        wrapperClassName,\n      )}\n    >\n      { Content }\n    </div>\n  )\n}\n\nfunction TextFieldRightContent({\n  children,\n  wrapperStyle,\n  wrapperClassName,\n  withoutWrapper,\n}: {\n  children: TextFieldProps['rightContent']\n  wrapperStyle: TextFieldProps['rightWrapperStyle']\n  wrapperClassName: TextFieldProps['rightWrapperClassName']\n  withoutWrapper: TextFieldProps['withoutRightContentWrapper']\n}) {\n  const renderRightItem = useCallback((item: TextFieldItemProps, key?: string) => {\n    if ('icon' in item) {\n      const clickable = !isNil(item.onClick)\n      const Comp = clickable ? 'button' : 'div'\n\n      return (\n        <Comp\n          key={key}\n          type={clickable ? 'button' : undefined}\n          className={classNames(\n            styles.RightItemWrapper,\n            clickable && styles.clickable,\n          )}\n          onClick={item.onClick}\n        >\n          <Icon\n            source={item.icon}\n            size={IconSize.XS}\n            color={item.iconColor ?? 'txt-black-dark'}\n          />\n        </Comp>\n      )\n    }\n\n    return React.cloneElement(\n      item, { key },\n    )\n  }, [])\n\n  if (isNil(children) || isEmpty(children)) { return null }\n\n  const contents = isArray(children)\n    ? children.map((item) => renderRightItem(item, uuid()))\n    : renderRightItem(children)\n\n  if (withoutWrapper) {\n    return <>{ contents }</>\n  }\n\n  return (\n    <div\n      style={wrapperStyle}\n      className={classNames(\n        styles.RightContentWrapper,\n        wrapperClassName,\n      )}\n    >\n      { contents }\n    </div>\n  )\n}\n\nexport const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField({\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  style,\n  className,\n  wrapperStyle,\n  wrapperClassName,\n  leftWrapperStyle,\n  leftWrapperClassName,\n  rightWrapperStyle,\n  rightWrapperClassName,\n  value,\n  onFocus,\n  onChange,\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}, forwardedRef) {\n  const { window } = useWindow()\n\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const focusTimeout = useRef<ReturnType<Window['setTimeout']>>()\n  const blurTimeout = useRef<ReturnType<Window['setTimeout']>>()\n\n  const normalizedValue = isNil(value) ? undefined : toString(value)\n  const activeInput = !disabled && !readOnly\n  const activeClear = activeInput && allowClear && !isEmpty(normalizedValue)\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  }, [window])\n\n  const blur = useCallback(() => {\n    clearTimeout(blurTimeout.current)\n    blurTimeout.current = window.setTimeout(() => {\n      inputRef.current?.blur()\n    }, 0)\n  }, [window])\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) { return }\n    if (selectAllOnFocus) {\n      selectAll()\n    }\n    if (onFocus) {\n      onFocus(event)\n    }\n  }, [\n    selectAllOnFocus,\n    selectAll,\n    activeInput,\n    onFocus,\n  ])\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  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      style={wrapperStyle}\n      className={classNames(\n        styles.TextFieldWrapper,\n        styles[`variant-${variant}`],\n        styles[`size-${size}`],\n        wrapperClassName,\n      )}\n      data-testid={testId}\n      onMouseDown={focus}\n    >\n      <TextFieldLeftContent\n        wrapperStyle={leftWrapperStyle}\n        wrapperClassName={leftWrapperClassName}\n        withoutWrapper={withoutLeftContentWrapper}\n      >\n        { leftContent }\n      </TextFieldLeftContent>\n\n      <input\n        style={style}\n        className={classNames(\n          styles.TextFieldInput,\n          className,\n        )}\n        ref={inputRef}\n        type={type}\n        value={normalizedValue}\n        /**\n         * Invalid size attribute\n         * FIXME: https://github.com/channel-io/bezier-react/issues/1053\n         */\n        size={size}\n        autoComplete={autoComplete}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={handleFocus}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        {...ownProps}\n      />\n\n      { activeClear && (\n        <button\n          className={classNames(\n            styles.CloseIconWrapper,\n            styles.clickable,\n          )}\n          tabIndex={-1}\n          type=\"button\"\n          onClick={handleClear}\n        >\n          <Icon\n            className={styles.CloseIcon}\n            testId={TEXT_INPUT_CLEAR_ICON_TEST_ID}\n            source={CancelCircleFilledIcon}\n            size={IconSize.XS}\n          />\n        </button>\n      ) }\n\n      <TextFieldRightContent\n        wrapperStyle={rightWrapperStyle}\n        withoutWrapper={withoutRightContentWrapper}\n        wrapperClassName={rightWrapperClassName}\n      >\n        { rightContent }\n      </TextFieldRightContent>\n    </div>\n  )\n})\n"],"names":["TEXT_INPUT_TEST_ID","TEXT_INPUT_CLEAR_ICON_TEST_ID","TextFieldLeftContent","children","wrapperStyle","wrapperClassName","withoutWrapper","isNil","Content","React","createElement","Icon","className","onClick","styles","clickable","undefined","source","icon","size","IconSize","S","color","iconColor","style","classNames","LeftContentWrapper","TextFieldRightContent","renderRightItem","useCallback","item","key","Comp","type","RightItemWrapper","XS","cloneElement","isEmpty","contents","isArray","map","uuid","Fragment","RightContentWrapper","TextField","forwardRef","TextFieldSize","M","testId","autoFocus","autoComplete","variant","TextFieldVariant","Primary","allowClear","selectAllOnInit","selectAllOnFocus","leftContent","rightContent","withoutLeftContentWrapper","withoutRightContentWrapper","leftWrapperStyle","leftWrapperClassName","rightWrapperStyle","rightWrapperClassName","value","onFocus","onChange","onKeyDown","onKeyUp","rest","forwardedRef","window","useWindow","disabled","readOnly","hasError","ownProps","useFormFieldProps","focusTimeout","useRef","blurTimeout","normalizedValue","toString","activeInput","activeClear","inputRef","focus","clearTimeout","current","setTimeout","blur","setSelectionRange","start","end","direction","TextFieldType","Number","Email","Hidden","includes","getSelectionRange","selectionStart","selectionEnd","selectAll","length","unselect","valueLen","getBoundingClientRect","DOMRect","getDOMNode","handle","useMemo","useImperativeHandle","useEffect","handleFocus","event","handleChange","handleKeyDown","handleKeyDownWrappedWithComposingLocker","handleKeyUp","handleKeyUpWrappedWithComposingLocker","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","handleClear","input","setValue","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","Event","bubbles","call","dispatchEvent","TextFieldWrapper","onMouseDown","assign","TextFieldInput","ref","CloseIconWrapper","tabIndex","CloseIcon","CancelCircleFilledIcon"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../../../../src/components/Forms/Inputs/TextField/TextField.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { CancelCircleFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport { useWindow } from '~/src/providers/WindowProvider'\nimport { toString } from '~/src/utils/string'\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n} from '~/src/utils/type'\n\nimport {\n  COMMON_IME_CONTROL_KEYS,\n  type FormFieldSize,\n} from '~/src/components/Forms'\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\n// eslint-disable-next-line no-restricted-imports\nimport formStyles from '../../Form.module.scss'\n\nimport {\n  type SelectionRangeDirections,\n  type TextFieldItemProps,\n  type TextFieldProps,\n  type TextFieldRef,\n  TextFieldType,\n  TextFieldVariant,\n} from './TextField.types'\n\nimport styles from './TextField.module.scss'\n\nexport const TEXT_INPUT_TEST_ID = 'bezier-react-text-input'\nexport const TEXT_INPUT_CLEAR_ICON_TEST_ID = 'bezier-react-text-input-clear-icon'\n\n/**\n * FIXME: This mapping constant was defined for UI consistency,\n * and it should be removed with size attribute\n */\nconst INPUT_LENGTH_BY_SIZE: Record<FormFieldSize, number> = {\n  xs: 28,\n  m: 36,\n  l: 44,\n  xl: 54,\n}\n\nfunction TextFieldLeftContent({\n  children,\n  wrapperStyle,\n  wrapperClassName,\n  withoutWrapper,\n}: {\n  children: TextFieldProps['leftContent']\n  wrapperStyle: TextFieldProps['leftWrapperStyle']\n  wrapperClassName: TextFieldProps['leftWrapperClassName']\n  withoutWrapper: TextFieldProps['withoutLeftContentWrapper']\n}) {\n  if (isNil(children)) {\n    return null\n  }\n\n  const Content = (() => {\n    if ('icon' in children) {\n      return (\n        <Icon\n          className={!isNil(children.onClick) ? styles.clickable : undefined}\n          source={children.icon}\n          size={IconSize.S}\n          color={children.iconColor ?? 'txt-black-dark'}\n          onClick={children.onClick}\n        />\n      )\n    }\n\n    return children\n  })()\n\n  if (withoutWrapper) { return Content }\n\n  return (\n    <div\n      style={wrapperStyle}\n      className={classNames(\n        styles.LeftContentWrapper,\n        wrapperClassName,\n      )}\n    >\n      { Content }\n    </div>\n  )\n}\n\nfunction TextFieldRightContent({\n  children,\n  wrapperStyle,\n  wrapperClassName,\n  withoutWrapper,\n}: {\n  children: TextFieldProps['rightContent']\n  wrapperStyle: TextFieldProps['rightWrapperStyle']\n  wrapperClassName: TextFieldProps['rightWrapperClassName']\n  withoutWrapper: TextFieldProps['withoutRightContentWrapper']\n}) {\n  const renderRightItem = useCallback((item: TextFieldItemProps, key?: string) => {\n    if ('icon' in item) {\n      const clickable = !isNil(item.onClick)\n      const Comp = clickable ? 'button' : 'div'\n\n      return (\n        <Comp\n          key={key}\n          type={clickable ? 'button' : undefined}\n          className={classNames(\n            styles.RightItemWrapper,\n            clickable && styles.clickable,\n          )}\n          onClick={item.onClick}\n        >\n          <Icon\n            source={item.icon}\n            size={IconSize.XS}\n            color={item.iconColor ?? 'txt-black-dark'}\n          />\n        </Comp>\n      )\n    }\n\n    return React.cloneElement(\n      item, { key },\n    )\n  }, [])\n\n  if (isNil(children) || isEmpty(children)) { return null }\n\n  const contents = isArray(children)\n    ? children.map((item) => renderRightItem(item, uuid()))\n    : renderRightItem(children)\n\n  if (withoutWrapper) {\n    return <>{ contents }</>\n  }\n\n  return (\n    <div\n      style={wrapperStyle}\n      className={classNames(\n        styles.RightContentWrapper,\n        wrapperClassName,\n      )}\n    >\n      { contents }\n    </div>\n  )\n}\n\nexport const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField({\n  type,\n  size: sizeProps,\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  style,\n  className,\n  wrapperStyle,\n  wrapperClassName,\n  leftWrapperStyle,\n  leftWrapperClassName,\n  rightWrapperStyle,\n  rightWrapperClassName,\n  value,\n  onFocus,\n  onChange,\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}, forwardedRef) {\n  const { window } = useWindow()\n\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    size: formFieldSize,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const focusTimeout = useRef<ReturnType<Window['setTimeout']>>()\n  const blurTimeout = useRef<ReturnType<Window['setTimeout']>>()\n\n  const normalizedValue = isNil(value) ? undefined : toString(value)\n  const activeInput = !disabled && !readOnly\n  const activeClear = activeInput && allowClear && !isEmpty(normalizedValue)\n  const size = sizeProps ?? formFieldSize ?? 'm'\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  }, [window])\n\n  const blur = useCallback(() => {\n    clearTimeout(blurTimeout.current)\n    blurTimeout.current = window.setTimeout(() => {\n      inputRef.current?.blur()\n    }, 0)\n  }, [window])\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) { return }\n    if (selectAllOnFocus) {\n      selectAll()\n    }\n    if (onFocus) {\n      onFocus(event)\n    }\n  }, [\n    selectAllOnFocus,\n    selectAll,\n    activeInput,\n    onFocus,\n  ])\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  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      style={wrapperStyle}\n      className={classNames(\n        styles.TextFieldWrapper,\n        styles[`variant-${variant}`],\n        styles[`size-${size}`],\n        formStyles[`size-${size}`],\n        wrapperClassName,\n      )}\n      data-testid={testId}\n      onMouseDown={focus}\n    >\n      <TextFieldLeftContent\n        wrapperStyle={leftWrapperStyle}\n        wrapperClassName={leftWrapperClassName}\n        withoutWrapper={withoutLeftContentWrapper}\n      >\n        { leftContent }\n      </TextFieldLeftContent>\n\n      <input\n        style={style}\n        className={classNames(\n          styles.TextFieldInput,\n          className,\n        )}\n        ref={inputRef}\n        type={type}\n        value={normalizedValue}\n        /**\n         * Invalid size attribute\n         * FIXME: https://github.com/channel-io/bezier-react/issues/1053\n         */\n        size={INPUT_LENGTH_BY_SIZE[size]}\n        autoComplete={autoComplete}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={handleFocus}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        {...ownProps}\n      />\n\n      { activeClear && (\n        <button\n          className={classNames(\n            styles.CloseIconWrapper,\n            styles.clickable,\n          )}\n          tabIndex={-1}\n          type=\"button\"\n          onClick={handleClear}\n        >\n          <Icon\n            className={styles.CloseIcon}\n            testId={TEXT_INPUT_CLEAR_ICON_TEST_ID}\n            source={CancelCircleFilledIcon}\n            size={IconSize.XS}\n          />\n        </button>\n      ) }\n\n      <TextFieldRightContent\n        wrapperStyle={rightWrapperStyle}\n        withoutWrapper={withoutRightContentWrapper}\n        wrapperClassName={rightWrapperClassName}\n      >\n        { rightContent }\n      </TextFieldRightContent>\n    </div>\n  )\n})\n"],"names":["TEXT_INPUT_TEST_ID","TEXT_INPUT_CLEAR_ICON_TEST_ID","INPUT_LENGTH_BY_SIZE","xs","m","l","xl","TextFieldLeftContent","children","wrapperStyle","wrapperClassName","withoutWrapper","isNil","Content","React","createElement","Icon","className","onClick","styles","clickable","undefined","source","icon","size","IconSize","S","color","iconColor","style","classNames","LeftContentWrapper","TextFieldRightContent","renderRightItem","useCallback","item","key","Comp","type","RightItemWrapper","XS","cloneElement","isEmpty","contents","isArray","map","uuid","Fragment","RightContentWrapper","TextField","forwardRef","sizeProps","testId","autoFocus","autoComplete","variant","TextFieldVariant","Primary","allowClear","selectAllOnInit","selectAllOnFocus","leftContent","rightContent","withoutLeftContentWrapper","withoutRightContentWrapper","leftWrapperStyle","leftWrapperClassName","rightWrapperStyle","rightWrapperClassName","value","onFocus","onChange","onKeyDown","onKeyUp","rest","forwardedRef","window","useWindow","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","focusTimeout","useRef","blurTimeout","normalizedValue","toString","activeInput","activeClear","inputRef","focus","clearTimeout","current","setTimeout","blur","setSelectionRange","start","end","direction","TextFieldType","Number","Email","Hidden","includes","getSelectionRange","selectionStart","selectionEnd","selectAll","length","unselect","valueLen","getBoundingClientRect","DOMRect","getDOMNode","handle","useMemo","useImperativeHandle","useEffect","handleFocus","event","handleChange","handleKeyDown","handleKeyDownWrappedWithComposingLocker","handleKeyUp","handleKeyUpWrappedWithComposingLocker","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","handleClear","input","setValue","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","Event","bubbles","call","dispatchEvent","TextFieldWrapper","formStyles","onMouseDown","assign","TextFieldInput","ref","CloseIconWrapper","tabIndex","CloseIcon","CancelCircleFilledIcon"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/TextField/TextField.module.scss.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"TextFieldInput":"b-TextField-TextFieldInput_FfmAf","CloseIcon":"b-TextField-CloseIcon_FiQb0","TextFieldWrapper":"b-TextField-TextFieldWrapper_DDT7S","variant-secondary":"b-TextField-variant-secondary_TTH1M","size-28":"b-TextField-size-28_XMYwx","size-36":"b-TextField-size-36_i3ylq","size-44":"b-TextField-size-44_5UvIb","size-54":"b-TextField-size-54_fsYWa","variant-primary":"b-TextField-variant-primary_Iv8pv","clickable":"b-TextField-clickable_XiP5C","LeftContentWrapper":"b-TextField-LeftContentWrapper_ZmIa6","RightContentWrapper":"b-TextField-RightContentWrapper_bjYiI","RightItemWrapper":"b-TextField-RightItemWrapper_4Cxf2","CloseIconWrapper":"b-TextField-CloseIconWrapper_-Xp3Q"};
+var styles = {"TextFieldInput":"b-TextField-TextFieldInput_FfmAf","CloseIcon":"b-TextField-CloseIcon_FiQb0","TextFieldWrapper":"b-TextField-TextFieldWrapper_DDT7S","variant-secondary":"b-TextField-variant-secondary_TTH1M","size-l":"b-TextField-size-l_1lpzr","size-xl":"b-TextField-size-xl_rnkeU","variant-primary":"b-TextField-variant-primary_Iv8pv","clickable":"b-TextField-clickable_XiP5C","LeftContentWrapper":"b-TextField-LeftContentWrapper_ZmIa6","RightContentWrapper":"b-TextField-RightContentWrapper_bjYiI","RightItemWrapper":"b-TextField-RightItemWrapper_4Cxf2","CloseIconWrapper":"b-TextField-CloseIconWrapper_-Xp3Q"};
 
 exports.default = styles;
 //# sourceMappingURL=TextField.module.scss.js.map