@channel.io/bezier-react 3.1.3 → 3.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/AlphaAvatar/Avatar.js +0 -2
- package/dist/cjs/components/AlphaAvatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.js +0 -2
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Badge/Badge.js +0 -1
- package/dist/cjs/components/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.js +2 -0
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/Divider/Divider.js +1 -1
- package/dist/cjs/components/Divider/Divider.js.map +1 -1
- package/dist/cjs/components/Emoji/Emoji.js +0 -1
- package/dist/cjs/components/Emoji/Emoji.js.map +1 -1
- package/dist/cjs/components/FormControl/FormControl.js +0 -1
- package/dist/cjs/components/FormControl/FormControl.js.map +1 -1
- package/dist/cjs/components/FormHelperText/FormHelperText.js +4 -2
- package/dist/cjs/components/FormHelperText/FormHelperText.js.map +1 -1
- package/dist/cjs/components/NavGroup/NavGroup.js +4 -2
- package/dist/cjs/components/NavGroup/NavGroup.js.map +1 -1
- package/dist/cjs/components/NavItem/NavItem.js +4 -2
- package/dist/cjs/components/NavItem/NavItem.js.map +1 -1
- package/dist/cjs/components/Switch/Switch.js +0 -1
- package/dist/cjs/components/Switch/Switch.js.map +1 -1
- package/dist/cjs/components/Tag/Tag.js +5 -2
- package/dist/cjs/components/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/TextField/TextField.js +5 -2
- package/dist/cjs/components/TextField/TextField.js.map +1 -1
- package/dist/esm/components/AlphaAvatar/Avatar.mjs +1 -1
- package/dist/esm/components/AlphaAvatar/Avatar.mjs.map +1 -1
- package/dist/esm/components/Avatar/Avatar.mjs +1 -1
- package/dist/esm/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/esm/components/Badge/Badge.mjs +1 -1
- package/dist/esm/components/Badge/Badge.mjs.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.mjs +2 -0
- package/dist/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/esm/components/Divider/Divider.mjs +2 -1
- package/dist/esm/components/Divider/Divider.mjs.map +1 -1
- package/dist/esm/components/Emoji/Emoji.mjs +1 -1
- package/dist/esm/components/Emoji/Emoji.mjs.map +1 -1
- package/dist/esm/components/FormControl/FormControl.mjs +1 -1
- package/dist/esm/components/FormControl/FormControl.mjs.map +1 -1
- package/dist/esm/components/FormHelperText/FormHelperText.mjs +5 -1
- package/dist/esm/components/FormHelperText/FormHelperText.mjs.map +1 -1
- package/dist/esm/components/NavGroup/NavGroup.mjs +5 -1
- package/dist/esm/components/NavGroup/NavGroup.mjs.map +1 -1
- package/dist/esm/components/NavItem/NavItem.mjs +5 -1
- package/dist/esm/components/NavItem/NavItem.mjs.map +1 -1
- package/dist/esm/components/Switch/Switch.mjs +1 -1
- package/dist/esm/components/Switch/Switch.mjs.map +1 -1
- package/dist/esm/components/Tag/Tag.mjs +6 -1
- package/dist/esm/components/Tag/Tag.mjs.map +1 -1
- package/dist/esm/components/TextField/TextField.mjs +6 -1
- package/dist/esm/components/TextField/TextField.mjs.map +1 -1
- package/dist/types/components/AlphaAvatar/Avatar.d.ts +0 -2
- package/dist/types/components/AlphaAvatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/Avatar/Avatar.d.ts +0 -2
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/Badge/Badge.d.ts +0 -1
- package/dist/types/components/Badge/Badge.d.ts.map +1 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts +2 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/components/Divider/Divider.d.ts +0 -1
- package/dist/types/components/Divider/Divider.d.ts.map +1 -1
- package/dist/types/components/Emoji/Emoji.d.ts +0 -1
- package/dist/types/components/Emoji/Emoji.d.ts.map +1 -1
- package/dist/types/components/FormControl/FormControl.d.ts +0 -1
- package/dist/types/components/FormControl/FormControl.d.ts.map +1 -1
- package/dist/types/components/FormHelperText/FormHelperText.d.ts +0 -2
- package/dist/types/components/FormHelperText/FormHelperText.d.ts.map +1 -1
- package/dist/types/components/NavGroup/NavGroup.d.ts +0 -2
- package/dist/types/components/NavGroup/NavGroup.d.ts.map +1 -1
- package/dist/types/components/NavItem/NavItem.d.ts +0 -2
- package/dist/types/components/NavItem/NavItem.d.ts.map +1 -1
- package/dist/types/components/Switch/Switch.d.ts +0 -1
- package/dist/types/components/Switch/Switch.d.ts.map +1 -1
- package/dist/types/components/Tag/Tag.d.ts +0 -2
- package/dist/types/components/Tag/Tag.d.ts.map +1 -1
- package/dist/types/components/TextField/TextField.d.ts +0 -2
- package/dist/types/components/TextField/TextField.d.ts.map +1 -1
- package/package.json +2 -3
- package/src/components/AlphaAvatar/Avatar.test.tsx +1 -71
- package/src/components/AlphaAvatar/Avatar.tsx +2 -2
- package/src/components/AlphaAvatarGroup/AvatarGroup.test.tsx +0 -12
- package/src/components/Avatar/Avatar.test.tsx +1 -71
- package/src/components/Avatar/Avatar.tsx +2 -2
- package/src/components/AvatarGroup/AvatarGroup.test.tsx +0 -12
- package/src/components/Badge/Badge.tsx +2 -2
- package/src/components/Checkbox/Checkbox.tsx +6 -1
- package/src/components/Divider/Divider.test.tsx +11 -12
- package/src/components/Divider/Divider.tsx +5 -1
- package/src/components/Emoji/Emoji.tsx +4 -1
- package/src/components/FormControl/FormControl.test.tsx +1 -39
- package/src/components/FormControl/FormControl.tsx +1 -1
- package/src/components/FormHelperText/FormHelperText.test.tsx +11 -30
- package/src/components/FormHelperText/FormHelperText.tsx +9 -2
- package/src/components/FormLabel/FormLabel.test.tsx +0 -7
- package/src/components/Help/Help.test.tsx +0 -14
- package/src/components/LegacyTooltip/LegacyTooltip.test.tsx +0 -12
- package/src/components/Modal/Modal.test.tsx +8 -1
- package/src/components/NavGroup/NavGroup.tsx +9 -2
- package/src/components/NavItem/NavItem.tsx +9 -2
- package/src/components/Slider/Slider.test.tsx +1 -8
- package/src/components/SmoothCornersBox/SmoothCornersBox.test.tsx +0 -5
- package/src/components/Switch/Switch.test.tsx +17 -17
- package/src/components/Switch/Switch.tsx +4 -1
- package/src/components/Tag/Tag.test.tsx +11 -15
- package/src/components/Tag/Tag.tsx +10 -2
- package/src/components/TextField/TextField.test.tsx +5 -5
- package/src/components/TextField/TextField.tsx +10 -2
- package/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap +0 -93
- package/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +0 -215
- package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap +0 -93
- package/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +0 -215
- package/src/components/Badge/Badge.test.tsx +0 -27
- package/src/components/Badge/__snapshots__/Badge.test.tsx.snap +0 -8
- package/src/components/Emoji/Emoji.test.tsx +0 -32
- package/src/components/Emoji/__snapshots__/Emoji.test.tsx.snap +0 -11
- package/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap +0 -249
- package/src/components/FormGroup/FormGroup.test.tsx +0 -24
- package/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap +0 -10
- package/src/components/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap +0 -24
- package/src/components/FormLabel/__snapshots__/FormLabel.test.tsx.snap +0 -11
- package/src/components/Help/__snapshots__/Help.test.tsx.snap +0 -21
- package/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap +0 -37
- package/src/components/NavGroup/NavGroup.test.tsx +0 -75
- package/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap +0 -121
- package/src/components/NavItem/NavItem.test.tsx +0 -66
- package/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap +0 -75
- package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +0 -50
- package/src/components/SmoothCornersBox/__snapshots__/SmoothCornersBox.test.tsx.snap +0 -11
- package/src/components/Tag/__snapshots__/Tag.test.tsx.snap +0 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["'use client'\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react'\nimport * as React from 'react'\n\nimport { CancelCircleFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport {\n COMMON_IME_CONTROL_KEYS,\n useKeyboardActionLockerWhileComposing,\n} from '~/src/hooks/useKeyboardActionLockerWhileComposing'\nimport { type FormFieldSize } from '~/src/types/props'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { toString } from '~/src/utils/string'\nimport { isArray, isEmpty, isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { useWindow } from '~/src/components/WindowProvider'\n\nimport {\n type SelectionRangeDirections,\n type TextFieldItemProps,\n type TextFieldProps,\n type TextFieldRef,\n} from './TextField.types'\n\nimport styles from './TextField.module.scss'\n\nexport const TEXT_INPUT_TEST_ID = 'bezier-text-input'\nexport const TEXT_INPUT_CLEAR_ICON_TEST_ID = 'bezier-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=\"s\"\n color={children.iconColor ?? 'txt-black-dark'}\n onClick={children.onClick}\n />\n )\n }\n\n return children\n })()\n\n if (withoutWrapper) {\n return Content\n }\n\n return (\n <div\n style={wrapperStyle}\n className={classNames(styles.LeftContentWrapper, wrapperClassName)}\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(\n (item: TextFieldItemProps, key?: string) => {\n if ('icon' in item) {\n const Comp = !isNil(item.onClick) ? BaseButton : 'div'\n\n return (\n <Comp\n key={key}\n className={styles.RightItemWrapper}\n onClick={item.onClick}\n >\n <Icon\n source={item.icon}\n size=\"xs\"\n color={item.iconColor ?? 'txt-black-dark'}\n />\n </Comp>\n )\n }\n\n return React.cloneElement(item, { key })\n },\n []\n )\n\n if (isNil(children) || isEmpty(children)) {\n return null\n }\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(styles.RightContentWrapper, wrapperClassName)}\n >\n {contents}\n </div>\n )\n}\n\nexport const TextField = forwardRef<TextFieldRef, TextFieldProps>(\n function TextField(\n {\n type,\n size: sizeProps,\n autoFocus,\n autoComplete = 'off',\n variant = '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 },\n forwardedRef\n ) {\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']>>(undefined)\n const blurTimeout = useRef<ReturnType<Window['setTimeout']>>(undefined)\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(\n (start?: number, end?: number, direction?: SelectionRangeDirections) => {\n if (type && ['number', 'email', 'hidden'].includes(type)) {\n return\n }\n inputRef.current?.setSelectionRange(\n start || 0,\n end || 0,\n direction || 'none'\n )\n },\n [type]\n )\n\n const getSelectionRange = useCallback(\n (): [number, number] => [\n inputRef.current?.selectionStart || 0,\n inputRef.current?.selectionEnd || 0,\n ],\n []\n )\n\n const selectAll = useCallback(() => {\n focus()\n if (inputRef.current) {\n setSelectionRange(0, inputRef.current.value.length, 'backward')\n }\n }, [focus, setSelectionRange])\n\n const unselect = useCallback(() => {\n focus()\n if (inputRef.current) {\n const valueLen = inputRef.current.value.length\n setSelectionRange(valueLen, valueLen)\n }\n }, [focus, setSelectionRange])\n\n const getBoundingClientRect = useCallback((): DOMRect => {\n if (inputRef.current) {\n return inputRef.current.getBoundingClientRect()\n }\n return new DOMRect(undefined, undefined, 0, 0)\n }, [])\n\n const getDOMNode = useCallback(() => inputRef.current, [])\n\n const handle = useMemo(\n (): TextFieldRef => ({\n focus,\n blur,\n setSelectionRange,\n getSelectionRange,\n selectAll,\n unselect,\n getBoundingClientRect,\n getDOMNode,\n }),\n [\n focus,\n blur,\n setSelectionRange,\n getSelectionRange,\n selectAll,\n unselect,\n getBoundingClientRect,\n getDOMNode,\n ]\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(\n (event: React.FocusEvent<HTMLInputElement>) => {\n if (!activeInput) {\n return\n }\n if (selectAllOnFocus) {\n selectAll()\n }\n if (onFocus) {\n onFocus(event)\n }\n },\n [selectAllOnFocus, selectAll, activeInput, onFocus]\n )\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (activeInput && onChange) {\n onChange(event)\n }\n },\n [activeInput, 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(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (activeInput && handleKeyDownWrappedWithComposingLocker) {\n handleKeyDownWrappedWithComposingLocker(event)\n }\n },\n [activeInput, handleKeyDownWrappedWithComposingLocker]\n )\n\n const handleKeyUp = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (activeInput && handleKeyUpWrappedWithComposingLocker) {\n handleKeyUpWrappedWithComposingLocker(event)\n }\n },\n [activeInput, handleKeyUpWrappedWithComposingLocker]\n )\n\n const handleClear = useCallback(() => {\n const input = inputRef.current\n if (activeInput && input) {\n const setValue = Object?.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value'\n )?.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 getFormFieldSizeClassName(size),\n wrapperClassName\n )}\n data-testid={TEXT_INPUT_TEST_ID}\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(styles.TextFieldInput, className)}\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 <BaseButton\n className={styles.CloseIconWrapper}\n tabIndex={0}\n onClick={handleClear}\n >\n <Icon\n className={styles.CloseIcon}\n data-testid={TEXT_INPUT_CLEAR_ICON_TEST_ID}\n source={CancelCircleFilledIcon}\n size=\"xs\"\n />\n </BaseButton>\n )}\n\n <TextFieldRightContent\n wrapperStyle={rightWrapperStyle}\n withoutWrapper={withoutRightContentWrapper}\n wrapperClassName={rightWrapperClassName}\n >\n {rightContent}\n </TextFieldRightContent>\n </div>\n )\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","_children$iconColor","_jsx","Icon","className","onClick","styles","clickable","undefined","source","icon","size","color","iconColor","style","classNames","LeftContentWrapper","TextFieldRightContent","renderRightItem","useCallback","item","key","_item$iconColor","Comp","BaseButton","RightItemWrapper","React","cloneElement","isEmpty","contents","isArray","map","uuid","_Fragment","RightContentWrapper","TextField","forwardRef","type","sizeProps","autoFocus","autoComplete","variant","allowClear","selectAllOnInit","selectAllOnFocus","leftContent","rightContent","withoutLeftContentWrapper","withoutRightContentWrapper","leftWrapperStyle","leftWrapperClassName","rightWrapperStyle","rightWrapperClassName","value","onFocus","onChange","onKeyDown","onKeyUp","rest","forwardedRef","_ref","window","useWindow","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","focusTimeout","useRef","blurTimeout","normalizedValue","toString","activeInput","activeClear","inputRef","focus","clearTimeout","current","setTimeout","_inputRef$current","blur","_inputRef$current2","setSelectionRange","start","end","direction","_inputRef$current3","includes","getSelectionRange","_inputRef$current4","_inputRef$current5","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","_Object$getOwnPropert","setValue","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","Event","bubbles","call","dispatchEvent","_jsxs","TextFieldWrapper","getFormFieldSizeClassName","onMouseDown","TextFieldInput","ref","CloseIconWrapper","tabIndex","CloseIcon","CancelCircleFilledIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextField.js","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["'use client'\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react'\nimport * as React from 'react'\n\nimport { CancelCircleFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport {\n COMMON_IME_CONTROL_KEYS,\n useKeyboardActionLockerWhileComposing,\n} from '~/src/hooks/useKeyboardActionLockerWhileComposing'\nimport { type FormFieldSize } from '~/src/types/props'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { toString } from '~/src/utils/string'\nimport { isArray, isEmpty, isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { useWindow } from '~/src/components/WindowProvider'\n\nimport {\n type SelectionRangeDirections,\n type TextFieldItemProps,\n type TextFieldProps,\n type TextFieldRef,\n} from './TextField.types'\n\nimport styles from './TextField.module.scss'\n\n/**\n * @deprecated\n */\nconst TEXT_INPUT_TEST_ID = 'bezier-text-input'\n\n/**\n * @deprecated\n */\nconst TEXT_INPUT_CLEAR_ICON_TEST_ID = 'bezier-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=\"s\"\n color={children.iconColor ?? 'txt-black-dark'}\n onClick={children.onClick}\n />\n )\n }\n\n return children\n })()\n\n if (withoutWrapper) {\n return Content\n }\n\n return (\n <div\n style={wrapperStyle}\n className={classNames(styles.LeftContentWrapper, wrapperClassName)}\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(\n (item: TextFieldItemProps, key?: string) => {\n if ('icon' in item) {\n const Comp = !isNil(item.onClick) ? BaseButton : 'div'\n\n return (\n <Comp\n key={key}\n className={styles.RightItemWrapper}\n onClick={item.onClick}\n >\n <Icon\n source={item.icon}\n size=\"xs\"\n color={item.iconColor ?? 'txt-black-dark'}\n />\n </Comp>\n )\n }\n\n return React.cloneElement(item, { key })\n },\n []\n )\n\n if (isNil(children) || isEmpty(children)) {\n return null\n }\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(styles.RightContentWrapper, wrapperClassName)}\n >\n {contents}\n </div>\n )\n}\n\nexport const TextField = forwardRef<TextFieldRef, TextFieldProps>(\n function TextField(\n {\n type,\n size: sizeProps,\n autoFocus,\n autoComplete = 'off',\n variant = '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 },\n forwardedRef\n ) {\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']>>(undefined)\n const blurTimeout = useRef<ReturnType<Window['setTimeout']>>(undefined)\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(\n (start?: number, end?: number, direction?: SelectionRangeDirections) => {\n if (type && ['number', 'email', 'hidden'].includes(type)) {\n return\n }\n inputRef.current?.setSelectionRange(\n start || 0,\n end || 0,\n direction || 'none'\n )\n },\n [type]\n )\n\n const getSelectionRange = useCallback(\n (): [number, number] => [\n inputRef.current?.selectionStart || 0,\n inputRef.current?.selectionEnd || 0,\n ],\n []\n )\n\n const selectAll = useCallback(() => {\n focus()\n if (inputRef.current) {\n setSelectionRange(0, inputRef.current.value.length, 'backward')\n }\n }, [focus, setSelectionRange])\n\n const unselect = useCallback(() => {\n focus()\n if (inputRef.current) {\n const valueLen = inputRef.current.value.length\n setSelectionRange(valueLen, valueLen)\n }\n }, [focus, setSelectionRange])\n\n const getBoundingClientRect = useCallback((): DOMRect => {\n if (inputRef.current) {\n return inputRef.current.getBoundingClientRect()\n }\n return new DOMRect(undefined, undefined, 0, 0)\n }, [])\n\n const getDOMNode = useCallback(() => inputRef.current, [])\n\n const handle = useMemo(\n (): TextFieldRef => ({\n focus,\n blur,\n setSelectionRange,\n getSelectionRange,\n selectAll,\n unselect,\n getBoundingClientRect,\n getDOMNode,\n }),\n [\n focus,\n blur,\n setSelectionRange,\n getSelectionRange,\n selectAll,\n unselect,\n getBoundingClientRect,\n getDOMNode,\n ]\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(\n (event: React.FocusEvent<HTMLInputElement>) => {\n if (!activeInput) {\n return\n }\n if (selectAllOnFocus) {\n selectAll()\n }\n if (onFocus) {\n onFocus(event)\n }\n },\n [selectAllOnFocus, selectAll, activeInput, onFocus]\n )\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (activeInput && onChange) {\n onChange(event)\n }\n },\n [activeInput, 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(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (activeInput && handleKeyDownWrappedWithComposingLocker) {\n handleKeyDownWrappedWithComposingLocker(event)\n }\n },\n [activeInput, handleKeyDownWrappedWithComposingLocker]\n )\n\n const handleKeyUp = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (activeInput && handleKeyUpWrappedWithComposingLocker) {\n handleKeyUpWrappedWithComposingLocker(event)\n }\n },\n [activeInput, handleKeyUpWrappedWithComposingLocker]\n )\n\n const handleClear = useCallback(() => {\n const input = inputRef.current\n if (activeInput && input) {\n const setValue = Object?.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value'\n )?.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 getFormFieldSizeClassName(size),\n wrapperClassName\n )}\n data-testid={TEXT_INPUT_TEST_ID}\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(styles.TextFieldInput, className)}\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 <BaseButton\n className={styles.CloseIconWrapper}\n tabIndex={0}\n onClick={handleClear}\n aria-label=\"Clear input\"\n >\n <Icon\n className={styles.CloseIcon}\n data-testid={TEXT_INPUT_CLEAR_ICON_TEST_ID}\n source={CancelCircleFilledIcon}\n size=\"xs\"\n />\n </BaseButton>\n )}\n\n <TextFieldRightContent\n wrapperStyle={rightWrapperStyle}\n withoutWrapper={withoutRightContentWrapper}\n wrapperClassName={rightWrapperClassName}\n >\n {rightContent}\n </TextFieldRightContent>\n </div>\n )\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","_children$iconColor","_jsx","Icon","className","onClick","styles","clickable","undefined","source","icon","size","color","iconColor","style","classNames","LeftContentWrapper","TextFieldRightContent","renderRightItem","useCallback","item","key","_item$iconColor","Comp","BaseButton","RightItemWrapper","React","cloneElement","isEmpty","contents","isArray","map","uuid","_Fragment","RightContentWrapper","TextField","forwardRef","type","sizeProps","autoFocus","autoComplete","variant","allowClear","selectAllOnInit","selectAllOnFocus","leftContent","rightContent","withoutLeftContentWrapper","withoutRightContentWrapper","leftWrapperStyle","leftWrapperClassName","rightWrapperStyle","rightWrapperClassName","value","onFocus","onChange","onKeyDown","onKeyUp","rest","forwardedRef","_ref","window","useWindow","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","focusTimeout","useRef","blurTimeout","normalizedValue","toString","activeInput","activeClear","inputRef","focus","clearTimeout","current","setTimeout","_inputRef$current","blur","_inputRef$current2","setSelectionRange","start","end","direction","_inputRef$current3","includes","getSelectionRange","_inputRef$current4","_inputRef$current5","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","_Object$getOwnPropert","setValue","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","Event","bubbles","call","dispatchEvent","_jsxs","TextFieldWrapper","getFormFieldSizeClassName","onMouseDown","TextFieldInput","ref","CloseIconWrapper","tabIndex","CloseIcon","CancelCircleFilledIcon"],"mappings":"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"}
|
|
@@ -117,5 +117,5 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar({
|
|
|
117
117
|
});
|
|
118
118
|
});
|
|
119
119
|
|
|
120
|
-
export {
|
|
120
|
+
export { AVATAR_WRAPPER_TEST_ID, Avatar, useAvatarRadiusToken };
|
|
121
121
|
//# sourceMappingURL=Avatar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n const spreadRadius = (() => {\n switch (size) {\n case '90':\n return 3\n case '120':\n return 4\n default:\n return 2\n }\n })()\n\n return {\n spreadRadius,\n color: 'bg-white-high',\n }\n}\n\nexport function useAvatarRadiusToken() {\n // TODO: Replace this with useAlphaTokens\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n const spreadRadius = (() => {\n switch (size) {\n case '90':\n return 3\n case '120':\n return 4\n default:\n return 2\n }\n })()\n\n return {\n spreadRadius,\n color: 'bg-white-high',\n }\n}\n\nexport function useAvatarRadiusToken() {\n // TODO: Replace this with useAlphaTokens\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size: sizeProps = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const avatarGroupContext = useAvatarContext()\n const size = avatarGroupContext?.size ?? sizeProps\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) ||\n (children && !isValidElement(children))\n ) {\n return null\n }\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={getStatusSize(size)}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? getShadow(size) : undefined}\n backgroundColor=\"bg-white-normal\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","_avatarGroupContext$s","avatarGroupContext","useAvatarContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
|
|
@@ -100,5 +100,5 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar({
|
|
|
100
100
|
});
|
|
101
101
|
});
|
|
102
102
|
|
|
103
|
-
export {
|
|
103
|
+
export { AVATAR_WRAPPER_TEST_ID, Avatar, useAvatarRadiusToken };
|
|
104
104
|
//# sourceMappingURL=Avatar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'bg-white-high',\n}\n\nexport function useAvatarRadiusToken() {\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'bg-white-high',\n}\n\nexport function useAvatarRadiusToken() {\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) ||\n (children && !isValidElement(children))\n ) {\n return null\n }\n\n const statusSize: StatusSize = (() => {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n })()\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={statusSize}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? shadow : undefined}\n backgroundColor=\"bg-white-normal\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["shadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","statusSize","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\
|
|
1
|
+
{"version":3,"file":"Badge.mjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\nconst BADGE_TEST_ID = 'bezier-badge'\n\n/**\n * `Badge` is a component for representing badge, which consists of text and icon.\n * @example\n * ```tsx\n * <Badge\n * size=\"xs\"\n * variant=\"blue\"\n * icon={AppleIcon}\n * >\n * Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(\n forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n { size = 'm', variant = 'default', truncated, icon, children, ...rest },\n forwardedRef\n ) {\n return (\n <BaseTagBadge\n ref={forwardedRef}\n size={size}\n variant={variant}\n data-testid={BADGE_TEST_ID}\n {...rest}\n >\n {icon && (\n <Icon\n source={icon}\n size=\"xs\"\n />\n )}\n\n {!isEmpty(children) && (\n <BaseTagBadgeText\n size={size}\n marginHorizontal={3}\n truncated={truncated}\n >\n {children}\n </BaseTagBadgeText>\n )}\n </BaseTagBadge>\n )\n })\n)\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","truncated","icon","children","rest","forwardedRef","_jsxs","BaseTagBadge","ref","_jsx","Icon","source","isEmpty","BaseTagBadgeText","marginHorizontal"],"mappings":";;;;;;AAWA,MAAMA,aAAa,GAAG,cAAc;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,IAAI,cACvBC,UAAU,CAA6B,SAASF,KAAKA,CACnD;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACvEC,YAAY,EACZ;EACA,oBACEC,IAAA,CAACC,YAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBN,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaL,aAAc;AAAA,IAAA,GACvBS,IAAI;AAAAD,IAAAA,QAAA,EAEPD,CAAAA,IAAI,iBACHO,GAAA,CAACC,IAAI,EAAA;AACHC,MAAAA,MAAM,EAAET,IAAK;AACbH,MAAAA,IAAI,EAAC;KACN,CACF,EAEA,CAACa,OAAO,CAACT,QAAQ,CAAC,iBACjBM,GAAA,CAACI,gBAAgB,EAAA;AACfd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,gBAAgB,EAAE,CAAE;AACpBb,MAAAA,SAAS,EAAEA,SAAU;AAAAE,MAAAA,QAAA,EAEpBA;AAAQ,KACO,CACnB;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;"}
|
|
@@ -71,6 +71,8 @@ function CheckboxImpl({
|
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
/* NOTE: This is a workaround to avoid infinite type recursion when directly using `ReturnType` */
|
|
75
|
+
|
|
74
76
|
/**
|
|
75
77
|
* `Checkbox` is a control that allows the user to toggle between checked and not checked.
|
|
76
78
|
* It can be used with labels or standalone.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type CheckboxProps, type CheckedState } from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ninterface 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>(\n function CheckIcon(props, forwardedRef) {\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=\"xs\"\n color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n {...props}\n />\n )\n }\n)\n\nfunction CheckboxImpl<Checked extends CheckedState>(\n { children, className, checked, id: idProp, ...rest }: CheckboxProps<Checked>,\n forwardedRef: React.Ref<HTMLButtonElement>\n) {\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\n className={classNames(styles.Container, getFormFieldSizeClassName('m'))}\n >\n <CheckboxPrimitive.Root\n asChild\n className={classNames(styles.Checkbox, className)}\n ref={forwardedRef}\n id={id}\n checked={checked}\n data-invalid={formFieldProps['aria-invalid']}\n {...formFieldProps}\n >\n <BaseButton>\n <CheckboxPrimitive.Indicator\n asChild\n /* NOTE: To allow the icon to be rendered even if unchecked. */\n forceMount\n >\n {/* @ts-expect-error */}\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </BaseButton>\n </CheckboxPrimitive.Root>\n {children && (\n <Text\n as=\"label\"\n // TODO: Apply polymorphic types to `as` prop.\n // @ts-expect-error\n htmlFor={id}\n className={styles.Label}\n typo=\"14\"\n color=\"txt-black-darkest\"\n >\n {children}\n </Text>\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 * @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 <\n Checked extends CheckedState,\n>(\n props: CheckboxProps<Checked> & {\n ref?: React.ForwardedRef<HTMLButtonElement>\n }\n) =>
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type CheckboxProps, type CheckedState } from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ninterface 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>(\n function CheckIcon(props, forwardedRef) {\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=\"xs\"\n color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n {...props}\n />\n )\n }\n)\n\nfunction CheckboxImpl<Checked extends CheckedState>(\n { children, className, checked, id: idProp, ...rest }: CheckboxProps<Checked>,\n forwardedRef: React.Ref<HTMLButtonElement>\n) {\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\n className={classNames(styles.Container, getFormFieldSizeClassName('m'))}\n >\n <CheckboxPrimitive.Root\n asChild\n className={classNames(styles.Checkbox, className)}\n ref={forwardedRef}\n id={id}\n checked={checked}\n data-invalid={formFieldProps['aria-invalid']}\n {...formFieldProps}\n >\n <BaseButton>\n <CheckboxPrimitive.Indicator\n asChild\n /* NOTE: To allow the icon to be rendered even if unchecked. */\n forceMount\n >\n {/* @ts-expect-error */}\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </BaseButton>\n </CheckboxPrimitive.Root>\n {children && (\n <Text\n as=\"label\"\n // TODO: Apply polymorphic types to `as` prop.\n // @ts-expect-error\n htmlFor={id}\n className={styles.Label}\n typo=\"14\"\n color=\"txt-black-darkest\"\n >\n {children}\n </Text>\n )}\n </div>\n )\n}\n\n/* NOTE: This is a workaround to avoid infinite type recursion when directly using `ReturnType` */\ntype ReturnTypeOfCheckboxImpl<Checked extends CheckedState> = ReturnType<\n typeof CheckboxImpl<Checked>\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 * @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 <\n Checked extends CheckedState,\n>(\n props: CheckboxProps<Checked> & {\n ref?: React.ForwardedRef<HTMLButtonElement>\n }\n) => ReturnTypeOfCheckboxImpl<Checked>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","_jsx","Icon","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","size","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","_jsxs","classNames","Container","getFormFieldSizeClassName","CheckboxPrimitive","asChild","Checkbox","BaseButton","forceMount","Text","as","htmlFor","Label","typo"],"mappings":";;;;;;;;;;;;;AA0BA;AACA,MAAMA,SAAS,gBAAGC,UAAU,CAC1B,SAASD,SAASA,CAACE,KAAK,EAAEC,YAAY,EAAE;AACtC;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe;EAEjD,oBACEG,GAAA,CAACC,IAAI,EAAA;IACHC,SAAS,EAAEC,MAAM,CAACV,SAAU;AAC5BW,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,MAAM,EAAE,CAACN,eAAe,GAAGO,aAAa,GAAGC,cAAe;AAC1DC,IAAAA,IAAI,EAAC,IAAI;AACTC,IAAAA,KAAK,EAAEX,WAAW,GAAG,eAAe,GAAG,2BAA4B;IAAA,GAC/DH;AAAK,GACV,CAAC;AAEN,CACF,CAAC;AAED,SAASe,YAAYA,CACnB;EAAEC,QAAQ;EAAET,SAAS;EAAEU,OAAO;AAAEC,EAAAA,EAAE,EAAEC,MAAM;EAAE,GAAGC;AAA6B,CAAC,EAC7EnB,YAA0C,EAC1C;EACA,MAAM;AACJiB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC;AACL,GAAC,GAAGC,iBAAiB,CAACJ,IAAI,CAAC;AAE3B,EAAA,MAAMF,EAAE,GAAGO,KAAK,CAACN,MAAM,KAAA,IAAA,IAANA,MAAM,KAAA,KAAA,CAAA,GAANA,MAAM,GAAIE,WAAW,EAAE,iBAAiB,CAAC;AAE1D,EAAA,oBACEK,IAAA,CAAA,KAAA,EAAA;IACEnB,SAAS,EAAEoB,UAAU,CAACnB,MAAM,CAACoB,SAAS,EAAEC,yBAAyB,CAAC,GAAG,CAAC,CAAE;AAAAb,IAAAA,QAAA,EAExEX,cAAAA,GAAA,CAACyB,IAAsB,EAAA;MACrBC,OAAO,EAAA,IAAA;MACPxB,SAAS,EAAEoB,UAAU,CAACnB,MAAM,CAACwB,QAAQ,EAAEzB,SAAS,CAAE;AAClDE,MAAAA,GAAG,EAAER,YAAa;AAClBiB,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,OAAO,EAAEA,OAAQ;MACjB,cAAcM,EAAAA,cAAc,CAAC,cAAc,CAAE;AAAA,MAAA,GACzCA,cAAc;MAAAP,QAAA,eAElBX,GAAA,CAAC4B,UAAU,EAAA;AAAAjB,QAAAA,QAAA,eACTX,GAAA,CAACyB,SAA2B,EAAA;UAC1BC,OAAO,EAAA;AACP;UACAG,UAAU,EAAA,IAAA;AAAAlB,UAAAA,QAAA,eAGVX,GAAA,CAACP,SAAS,EAAE,EAAA;SACe;OACnB;AAAC,KACS,CAAC,EACxBkB,QAAQ,iBACPX,GAAA,CAAC8B,IAAI,EAAA;AACHC,MAAAA,EAAE,EAAC;AACH;AACA;AAAA;AACAC,MAAAA,OAAO,EAAEnB,EAAG;MACZX,SAAS,EAAEC,MAAM,CAAC8B,KAAM;AACxBC,MAAAA,IAAI,EAAC,IAAI;AACTzB,MAAAA,KAAK,EAAC,mBAAmB;AAAAE,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACE,CAAC;AAEV;;AAEA;;AAKA;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;MACagB,QAAQ,gBAAGjC,UAAU,CAACgB,YAAY;;;;"}
|
|
@@ -33,10 +33,11 @@ const Divider = /*#__PURE__*/forwardRef(({
|
|
|
33
33
|
ref: forwardedRef,
|
|
34
34
|
style: style,
|
|
35
35
|
className: classNames(dividerStyles.Divider, dividerStyles.variables, dividerStyles[orientation], withoutIndent && dividerStyles['without-indent'], withoutParallelIndent && dividerStyles['without-parallel-indent'], withoutSideIndent && dividerStyles['without-side-indent'], className),
|
|
36
|
+
role: "separator",
|
|
36
37
|
"data-testid": DIVIDER_TEST_ID,
|
|
37
38
|
...rest
|
|
38
39
|
})
|
|
39
40
|
}));
|
|
40
41
|
|
|
41
|
-
export {
|
|
42
|
+
export { Divider };
|
|
42
43
|
//# sourceMappingURL=Divider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.mjs","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport classNames from 'classnames'\n\nimport { type DividerProps } from './Divider.types'\n\nimport styles from './Divider.module.scss'\n\
|
|
1
|
+
{"version":3,"file":"Divider.mjs","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport classNames from 'classnames'\n\nimport { type DividerProps } from './Divider.types'\n\nimport styles from './Divider.module.scss'\n\n/**\n * @deprecated\n */\nconst DIVIDER_TEST_ID = 'bezier-divider'\n\n/**\n * `Divider` is a component to visually or semantically separate content.\n * @example\n *\n * ```tsx\n * <Divider\n * withoutSideIndent\n * />\n * ```\n */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n (\n {\n orientation = 'horizontal',\n decorative,\n withoutSideIndent = false,\n withoutParallelIndent = false,\n withoutIndent = false,\n style,\n className,\n ...rest\n },\n forwardedRef\n ) => (\n <SeparatorPrimitive.Root\n asChild\n orientation={orientation}\n decorative={decorative}\n >\n <div\n ref={forwardedRef}\n style={style}\n className={classNames(\n styles.Divider,\n styles.variables,\n styles[orientation],\n withoutIndent && styles['without-indent'],\n withoutParallelIndent && styles['without-parallel-indent'],\n withoutSideIndent && styles['without-side-indent'],\n className\n )}\n role=\"separator\"\n data-testid={DIVIDER_TEST_ID}\n {...rest}\n />\n </SeparatorPrimitive.Root>\n )\n)\n"],"names":["DIVIDER_TEST_ID","Divider","forwardRef","orientation","decorative","withoutSideIndent","withoutParallelIndent","withoutIndent","style","className","rest","forwardedRef","_jsx","SeparatorPrimitive","asChild","children","ref","classNames","styles","variables","role"],"mappings":";;;;;;AAcA,MAAMA,eAAe,GAAG,gBAAgB;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,OAAO,gBAAGC,UAAU,CAC/B,CACE;AACEC,EAAAA,WAAW,GAAG,YAAY;EAC1BC,UAAU;AACVC,EAAAA,iBAAiB,GAAG,KAAK;AACzBC,EAAAA,qBAAqB,GAAG,KAAK;AAC7BC,EAAAA,aAAa,GAAG,KAAK;EACrBC,KAAK;EACLC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,kBAEZC,GAAA,CAACC,IAAuB,EAAA;EACtBC,OAAO,EAAA,IAAA;AACPX,EAAAA,WAAW,EAAEA,WAAY;AACzBC,EAAAA,UAAU,EAAEA,UAAW;AAAAW,EAAAA,QAAA,eAEvBH,GAAA,CAAA,KAAA,EAAA;AACEI,IAAAA,GAAG,EAAEL,YAAa;AAClBH,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEQ,UAAU,CACnBC,aAAM,CAACjB,OAAO,EACdiB,aAAM,CAACC,SAAS,EAChBD,aAAM,CAACf,WAAW,CAAC,EACnBI,aAAa,IAAIW,aAAM,CAAC,gBAAgB,CAAC,EACzCZ,qBAAqB,IAAIY,aAAM,CAAC,yBAAyB,CAAC,EAC1Db,iBAAiB,IAAIa,aAAM,CAAC,qBAAqB,CAAC,EAClDT,SACF,CAAE;AACFW,IAAAA,IAAI,EAAC,WAAW;AAChB,IAAA,aAAA,EAAapB,eAAgB;IAAA,GACzBU;GACL;AAAC,CACqB,CAE7B;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Emoji.mjs","sources":["../../../../src/components/Emoji/Emoji.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSProperties, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isDev } from '~/src/utils/assert'\nimport { cssUrl } from '~/src/utils/style'\n\nimport { type EmojiProps } from './Emoji.types'\n\nimport styles from './Emoji.module.scss'\n\
|
|
1
|
+
{"version":3,"file":"Emoji.mjs","sources":["../../../../src/components/Emoji/Emoji.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSProperties, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isDev } from '~/src/utils/assert'\nimport { cssUrl } from '~/src/utils/style'\n\nimport { type EmojiProps } from './Emoji.types'\n\nimport styles from './Emoji.module.scss'\n\n/**\n * @deprecated\n */\nconst EMOJI_TEST_ID = 'bezier-emoji'\n\nconst getEmojiUrl = (name: EmojiProps['name'], size: '160' | '80' | '44') => {\n return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${encodeURIComponent(name)}.png`\n}\n\n/**\n * `Emoji` is a component for representing emoji with variant size.\n * @example\n * ```tsx\n * <Emoji\n * name=\"A\"\n * size=\"20\"\n * />\n * ```\n */\nexport const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(\n { style, imageUrl, className, name, size = '24', ...rest },\n forwardedRef\n) {\n const assetSize = Number(size) >= 60 ? '160' : '80'\n\n return (\n <div\n ref={forwardedRef}\n role=\"img\"\n aria-description={name}\n style={\n {\n '--b-emoji-background-image': cssUrl(\n imageUrl ?? getEmojiUrl(name, assetSize)\n ),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Emoji, styles[`size-${size}`], className)}\n data-testid={EMOJI_TEST_ID}\n {...rest}\n />\n )\n})\n"],"names":["EMOJI_TEST_ID","getEmojiUrl","name","size","isDev","encodeURIComponent","Emoji","forwardRef","style","imageUrl","className","rest","forwardedRef","assetSize","Number","_jsx","ref","role","cssUrl","classNames","styles"],"mappings":";;;;;;;AAgBA,MAAMA,aAAa,GAAG,cAAc;AAEpC,MAAMC,WAAW,GAAGA,CAACC,IAAwB,EAAEC,IAAyB,KAAK;AAC3E,EAAA,OAAO,CAAaC,UAAAA,EAAAA,KAAK,EAAE,GAAG,MAAM,GAAG,EAAE,CAAA,+BAAA,EAAkCD,IAAI,CAAIE,CAAAA,EAAAA,kBAAkB,CAACH,IAAI,CAAC,CAAM,IAAA,CAAA;AACnH,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaI,KAAK,gBAAGC,UAAU,CAA6B,SAASD,KAAKA,CACxE;EAAEE,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAER,IAAI;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAE,GAAGQ;AAAK,CAAC,EAC1DC,YAAY,EACZ;EACA,MAAMC,SAAS,GAAGC,MAAM,CAACX,IAAI,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,IAAI;AAEnD,EAAA,oBACEY,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,kBAAA,EAAkBf,IAAK;AACvBM,IAAAA,KAAK,EACH;AACE,MAAA,4BAA4B,EAAEU,MAAM,CAClCT,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAARA,QAAQ,GAAIR,WAAW,CAACC,IAAI,EAAEW,SAAS,CACzC,CAAC;MACD,GAAGL;KAEN;AACDE,IAAAA,SAAS,EAAES,UAAU,CAACC,MAAM,CAACd,KAAK,EAAEc,MAAM,CAAC,QAAQjB,IAAI,CAAA,CAAE,CAAC,EAAEO,SAAS,CAAE;AACvE,IAAA,aAAA,EAAaV,aAAc;IAAA,GACvBW;AAAI,GACT,CAAC;AAEN,CAAC;;;;"}
|
|
@@ -163,5 +163,5 @@ function useFormFieldProps(props) {
|
|
|
163
163
|
return formFieldProps;
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
-
export {
|
|
166
|
+
export { FormControl, useFormControlContext, useFormFieldProps };
|
|
167
167
|
//# sourceMappingURL=FormControl.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControl.mjs","sources":["../../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport {\n type FormFieldProps,\n type FormFieldSize,\n type SizeProps,\n} from '~/src/types/props'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { ariaAttr } from '~/src/utils/aria'\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\nimport {\n type ContainerProps,\n type ErrorMessagePropsGetter,\n type FieldPropsGetter,\n type FormControlContextValue,\n type FormControlProps,\n type GroupPropsGetter,\n type HelperTextPropsGetter,\n type LabelPropsGetter,\n} from './FormControl.types'\n\nimport styles from './FormControl.module.scss'\n\nconst [FormControlContextProvider, useFormControlContext] = createContext<\n FormControlContextValue | undefined\n>(undefined)\n\nexport { useFormControlContext }\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container(\n { labelPosition, children, className, ...rest },\n forwardedRef\n) {\n switch (labelPosition) {\n case 'top':\n return (\n <Stack\n className={className}\n ref={forwardedRef}\n direction=\"vertical\"\n {...rest}\n >\n {children}\n </Stack>\n )\n\n case 'left':\n default:\n return (\n <div\n ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n className={classNames(styles.Grid, className)}\n {...rest}\n >\n {children}\n </div>\n )\n }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(\n function FormControl(\n {\n children,\n id: idProp,\n labelPosition = 'top',\n size = 'm',\n hasError,\n required,\n readOnly,\n disabled,\n ...rest\n },\n forwardedRef\n ) {\n const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(\n null\n )\n const [errorMessageNode, setErrorMessageNode] =\n 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) {\n return errorMessageId\n }\n if (helperTextNode) {\n return helperTextId\n }\n return undefined\n }, [errorMessageNode, helperTextNode, errorMessageId, helperTextId])\n\n const getGroupProps = useCallback<GroupPropsGetter>(\n (ownProps) => ({\n id: groupId,\n 'aria-labelledby': labelId,\n 'aria-describedby': describerId,\n ref: setGroupNode,\n ...ownProps,\n }),\n [groupId, labelId, describerId]\n )\n\n const getLabelProps = useCallback<LabelPropsGetter>(\n (ownProps) => ({\n id: labelId,\n htmlFor: fieldId,\n className: classNames(\n styles.FormLabelWrapper,\n styles[`position-${labelPosition}`],\n getFormFieldSizeClassName(size)\n ),\n typo: labelPosition === 'top' ? '13' : '14',\n ...ownProps,\n }),\n [fieldId, labelId, labelPosition, size]\n )\n\n const getFieldProps = useCallback<FieldPropsGetter>(\n (ownProps) => ({\n id: fieldId,\n size,\n 'aria-describedby': groupNode ? undefined : describerId,\n hasError,\n required,\n readOnly,\n disabled,\n ...ownProps,\n }),\n [\n fieldId,\n describerId,\n size,\n hasError,\n required,\n readOnly,\n disabled,\n groupNode,\n ]\n )\n\n const getHelperTextProps = useCallback<HelperTextPropsGetter>(\n (ownProps) => ({\n id: helperTextId,\n visible: isNil(hasError) || !hasError,\n ref: setHelperTextNode,\n className: classNames(\n styles.FormHelperTextWrapper,\n labelPosition === 'left' && styles['position-left']\n ),\n ...ownProps,\n }),\n [helperTextId, labelPosition, hasError]\n )\n\n const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(\n (ownProps) => ({\n id: errorMessageId,\n visible: isNil(hasError) || hasError,\n ref: setErrorMessageNode,\n className: classNames(\n styles.FormHelperTextWrapper,\n labelPosition === 'left' && styles['position-left']\n ),\n ...ownProps,\n }),\n [errorMessageId, labelPosition, hasError]\n )\n\n const contextValue = useMemo(\n () => ({\n id,\n labelId,\n helperTextId,\n errorMessageId,\n getGroupProps,\n getLabelProps,\n getFieldProps,\n getHelperTextProps,\n getErrorMessageProps,\n hasError,\n required,\n readOnly,\n disabled,\n }),\n [\n id,\n labelId,\n helperTextId,\n errorMessageId,\n getGroupProps,\n getLabelProps,\n getFieldProps,\n getHelperTextProps,\n getErrorMessageProps,\n hasError,\n required,\n readOnly,\n disabled,\n ]\n )\n\n if (!children) {\n return null\n }\n\n return (\n <FormControlContextProvider value={contextValue}>\n <Container\n {...rest}\n ref={forwardedRef}\n labelPosition={labelPosition}\n data-testid={FORM_CONTROL_TEST_ID}\n >\n {children}\n </Container>\n </FormControlContextProvider>\n )\n }\n)\n\nexport function useFormFieldProps<\n Props extends FormFieldProps & SizeProps<FormFieldSize>,\n>(props?: Props) {\n const contextValue = useFormControlContext()\n\n const formFieldProps = useMemo(() => {\n const mergedProps = contextValue?.getFieldProps(props) ?? { ...props }\n\n const {\n disabled = false,\n readOnly = false,\n required = false,\n hasError = false,\n size = undefined,\n ...rest\n } = mergedProps\n\n return {\n ...rest,\n 'aria-disabled': ariaAttr(disabled),\n 'aria-invalid': ariaAttr(hasError),\n 'aria-required': ariaAttr(required),\n 'aria-readonly': ariaAttr(readOnly),\n size,\n disabled,\n hasError,\n required,\n readOnly,\n }\n }, [props, contextValue])\n\n return formFieldProps as typeof formFieldProps & Props\n}\n"],"names":["FormControlContextProvider","useFormControlContext","createContext","undefined","FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","className","rest","forwardedRef","_jsx","Stack","ref","direction","classNames","styles","Grid","FormControl","id","idProp","size","hasError","required","readOnly","disabled","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","describerId","useMemo","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","FormLabelWrapper","getFormFieldSizeClassName","typo","getFieldProps","getHelperTextProps","visible","isNil","FormHelperTextWrapper","getErrorMessageProps","contextValue","value","useFormFieldProps","props","formFieldProps","_contextValue$getFiel","mergedProps","ariaAttr"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormControl.mjs","sources":["../../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport {\n type FormFieldProps,\n type FormFieldSize,\n type SizeProps,\n} from '~/src/types/props'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { ariaAttr } from '~/src/utils/aria'\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\nimport {\n type ContainerProps,\n type ErrorMessagePropsGetter,\n type FieldPropsGetter,\n type FormControlContextValue,\n type FormControlProps,\n type GroupPropsGetter,\n type HelperTextPropsGetter,\n type LabelPropsGetter,\n} from './FormControl.types'\n\nimport styles from './FormControl.module.scss'\n\nconst [FormControlContextProvider, useFormControlContext] = createContext<\n FormControlContextValue | undefined\n>(undefined)\n\nexport { useFormControlContext }\n\nconst FORM_CONTROL_TEST_ID = 'bezier-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container(\n { labelPosition, children, className, ...rest },\n forwardedRef\n) {\n switch (labelPosition) {\n case 'top':\n return (\n <Stack\n className={className}\n ref={forwardedRef}\n direction=\"vertical\"\n {...rest}\n >\n {children}\n </Stack>\n )\n\n case 'left':\n default:\n return (\n <div\n ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n className={classNames(styles.Grid, className)}\n {...rest}\n >\n {children}\n </div>\n )\n }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(\n function FormControl(\n {\n children,\n id: idProp,\n labelPosition = 'top',\n size = 'm',\n hasError,\n required,\n readOnly,\n disabled,\n ...rest\n },\n forwardedRef\n ) {\n const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(\n null\n )\n const [errorMessageNode, setErrorMessageNode] =\n 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) {\n return errorMessageId\n }\n if (helperTextNode) {\n return helperTextId\n }\n return undefined\n }, [errorMessageNode, helperTextNode, errorMessageId, helperTextId])\n\n const getGroupProps = useCallback<GroupPropsGetter>(\n (ownProps) => ({\n id: groupId,\n 'aria-labelledby': labelId,\n 'aria-describedby': describerId,\n ref: setGroupNode,\n ...ownProps,\n }),\n [groupId, labelId, describerId]\n )\n\n const getLabelProps = useCallback<LabelPropsGetter>(\n (ownProps) => ({\n id: labelId,\n htmlFor: fieldId,\n className: classNames(\n styles.FormLabelWrapper,\n styles[`position-${labelPosition}`],\n getFormFieldSizeClassName(size)\n ),\n typo: labelPosition === 'top' ? '13' : '14',\n ...ownProps,\n }),\n [fieldId, labelId, labelPosition, size]\n )\n\n const getFieldProps = useCallback<FieldPropsGetter>(\n (ownProps) => ({\n id: fieldId,\n size,\n 'aria-describedby': groupNode ? undefined : describerId,\n hasError,\n required,\n readOnly,\n disabled,\n ...ownProps,\n }),\n [\n fieldId,\n describerId,\n size,\n hasError,\n required,\n readOnly,\n disabled,\n groupNode,\n ]\n )\n\n const getHelperTextProps = useCallback<HelperTextPropsGetter>(\n (ownProps) => ({\n id: helperTextId,\n visible: isNil(hasError) || !hasError,\n ref: setHelperTextNode,\n className: classNames(\n styles.FormHelperTextWrapper,\n labelPosition === 'left' && styles['position-left']\n ),\n ...ownProps,\n }),\n [helperTextId, labelPosition, hasError]\n )\n\n const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(\n (ownProps) => ({\n id: errorMessageId,\n visible: isNil(hasError) || hasError,\n ref: setErrorMessageNode,\n className: classNames(\n styles.FormHelperTextWrapper,\n labelPosition === 'left' && styles['position-left']\n ),\n ...ownProps,\n }),\n [errorMessageId, labelPosition, hasError]\n )\n\n const contextValue = useMemo(\n () => ({\n id,\n labelId,\n helperTextId,\n errorMessageId,\n getGroupProps,\n getLabelProps,\n getFieldProps,\n getHelperTextProps,\n getErrorMessageProps,\n hasError,\n required,\n readOnly,\n disabled,\n }),\n [\n id,\n labelId,\n helperTextId,\n errorMessageId,\n getGroupProps,\n getLabelProps,\n getFieldProps,\n getHelperTextProps,\n getErrorMessageProps,\n hasError,\n required,\n readOnly,\n disabled,\n ]\n )\n\n if (!children) {\n return null\n }\n\n return (\n <FormControlContextProvider value={contextValue}>\n <Container\n {...rest}\n ref={forwardedRef}\n labelPosition={labelPosition}\n data-testid={FORM_CONTROL_TEST_ID}\n >\n {children}\n </Container>\n </FormControlContextProvider>\n )\n }\n)\n\nexport function useFormFieldProps<\n Props extends FormFieldProps & SizeProps<FormFieldSize>,\n>(props?: Props) {\n const contextValue = useFormControlContext()\n\n const formFieldProps = useMemo(() => {\n const mergedProps = contextValue?.getFieldProps(props) ?? { ...props }\n\n const {\n disabled = false,\n readOnly = false,\n required = false,\n hasError = false,\n size = undefined,\n ...rest\n } = mergedProps\n\n return {\n ...rest,\n 'aria-disabled': ariaAttr(disabled),\n 'aria-invalid': ariaAttr(hasError),\n 'aria-required': ariaAttr(required),\n 'aria-readonly': ariaAttr(readOnly),\n size,\n disabled,\n hasError,\n required,\n readOnly,\n }\n }, [props, contextValue])\n\n return formFieldProps as typeof formFieldProps & Props\n}\n"],"names":["FormControlContextProvider","useFormControlContext","createContext","undefined","FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","className","rest","forwardedRef","_jsx","Stack","ref","direction","classNames","styles","Grid","FormControl","id","idProp","size","hasError","required","readOnly","disabled","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","describerId","useMemo","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","FormLabelWrapper","getFormFieldSizeClassName","typo","getFieldProps","getHelperTextProps","visible","isNil","FormHelperTextWrapper","getErrorMessageProps","contextValue","value","useFormFieldProps","props","formFieldProps","_contextValue$getFiel","mergedProps","ariaAttr"],"mappings":"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"}
|
|
@@ -9,6 +9,10 @@ import { useFormControlContext } from '../FormControl/FormControl.mjs';
|
|
|
9
9
|
import { Text } from '../Text/Text.mjs';
|
|
10
10
|
|
|
11
11
|
const FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated
|
|
15
|
+
*/
|
|
12
16
|
const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message';
|
|
13
17
|
const BaseHelperText = /*#__PURE__*/forwardRef(function BaseHelperText(props, forwardedRef) {
|
|
14
18
|
var _getProps;
|
|
@@ -112,5 +116,5 @@ const FormErrorMessage = /*#__PURE__*/forwardRef(function FormErrorMessage(props
|
|
|
112
116
|
});
|
|
113
117
|
});
|
|
114
118
|
|
|
115
|
-
export {
|
|
119
|
+
export { FormErrorMessage, FormHelperText };
|
|
116
120
|
//# sourceMappingURL=FormHelperText.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormHelperText.mjs","sources":["../../../../src/components/FormHelperText/FormHelperText.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/function'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Text } from '~/src/components/Text'\n\nimport type {\n BaseHelperTextProps,\n FormErrorMessageProps,\n FormHelperTextProps,\n} from './FormHelperText.types'\n\nimport styles from './FormHelperText.module.scss'\n\
|
|
1
|
+
{"version":3,"file":"FormHelperText.mjs","sources":["../../../../src/components/FormHelperText/FormHelperText.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/function'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Text } from '~/src/components/Text'\n\nimport type {\n BaseHelperTextProps,\n FormErrorMessageProps,\n FormHelperTextProps,\n} from './FormHelperText.types'\n\nimport styles from './FormHelperText.module.scss'\n\n/**\n * @deprecated\n */\nconst FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text'\n\n/**\n * @deprecated\n */\nconst FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message'\n\nconst BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(\n function BaseHelperText(props, forwardedRef) {\n const { type, typo = '13', children, className, ...rest } = props\n\n const contextValue = useFormControlContext()\n const getProps =\n type === 'info'\n ? contextValue?.getHelperTextProps\n : contextValue?.getErrorMessageProps\n\n const {\n visible,\n ref,\n className: formControlClassName,\n ...ownProps\n } = getProps?.(rest) ?? {\n visible: true,\n ref: noop,\n className: undefined,\n ...rest,\n }\n\n const mergedRef = useMergeRefs(ref, forwardedRef)\n\n if (isEmpty(children) || !visible) {\n return null\n }\n\n return (\n <Text\n ref={mergedRef}\n as=\"p\"\n className={classNames(\n styles.FormHelperText,\n formControlClassName,\n className\n )}\n typo={typo}\n align=\"left\"\n {...ownProps}\n >\n {children}\n </Text>\n )\n }\n)\n\n/**\n * `FormHelperText` is a component to show the description of the input element.\n * `FormControl` component can handle its layout by `position` props.\n * @example\n * ```tsx\n * <FormControl position=\"top\">\n * <FormLabel>\n * Password\n * </FormLabel>\n * <TextField />\n * <FormHelperText>\n * Please use at least 6 characters\n * </FormHelperText>\n * </FormControl>\n * ```\n */\nexport const FormHelperText = forwardRef<HTMLSpanElement, FormHelperTextProps>(\n function FormHelperText(props, forwardedRef) {\n const { color = 'txt-black-dark', children, ...rest } = props\n\n return (\n <BaseHelperText\n type=\"info\"\n ref={forwardedRef}\n color={color}\n data-testid={FORM_HELPER_TEXT_TEST_ID}\n {...rest}\n >\n {children}\n </BaseHelperText>\n )\n }\n)\n\n/**\n * `FormErrorMessage` is a component to show error message when form values are invalid.\n * It should be used with `FormControl` component.\n * @example\n * ```tsx\n * <FormControl>\n * <FormLabel>\n * Password\n * </FormLabel>\n * <TextField />\n * <FormErrorMessage>\n * Password should be at least 6 characters\n * </FormErrorMessage>\n * </FormControl>\n * ```\n */\nexport const FormErrorMessage = forwardRef<\n HTMLSpanElement,\n FormErrorMessageProps\n>(function FormErrorMessage(props, forwardedRef) {\n const { color = 'bgtxt-orange-normal', children, ...rest } = props\n\n return (\n <BaseHelperText\n aria-live=\"polite\"\n type=\"error\"\n ref={forwardedRef}\n color={color}\n data-testid={FORM_ERROR_MESSAGE_TEST_ID}\n {...rest}\n >\n {children}\n </BaseHelperText>\n )\n})\n"],"names":["FORM_HELPER_TEXT_TEST_ID","FORM_ERROR_MESSAGE_TEST_ID","BaseHelperText","forwardRef","props","forwardedRef","_getProps","type","typo","children","className","rest","contextValue","useFormControlContext","getProps","getHelperTextProps","getErrorMessageProps","visible","ref","formControlClassName","ownProps","noop","undefined","mergedRef","useMergeRefs","isEmpty","_jsx","Text","as","classNames","styles","FormHelperText","align","color","FormErrorMessage"],"mappings":"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"}
|
|
@@ -10,6 +10,10 @@ import { Icon } from '../Icon/Icon.mjs';
|
|
|
10
10
|
import { Text } from '../Text/Text.mjs';
|
|
11
11
|
|
|
12
12
|
const NAV_GROUP_TEST_ID = 'bezier-nav-group';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated
|
|
16
|
+
*/
|
|
13
17
|
const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-nav-group-left-icon';
|
|
14
18
|
const NavGroup = /*#__PURE__*/forwardRef(function NavGroup({
|
|
15
19
|
name,
|
|
@@ -74,5 +78,5 @@ const NavGroup = /*#__PURE__*/forwardRef(function NavGroup({
|
|
|
74
78
|
});
|
|
75
79
|
});
|
|
76
80
|
|
|
77
|
-
export {
|
|
81
|
+
export { NavGroup };
|
|
78
82
|
//# sourceMappingURL=NavGroup.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavGroup.mjs","sources":["../../../../src/components/NavGroup/NavGroup.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport {\n ChevronSmallDownIcon,\n ChevronSmallRightIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\n// eslint-disable-next-line no-restricted-imports\nimport commonStyles from '../NavItem/NavItem.module.scss'\n\nimport type { NavGroupProps } from './NavGroup.types'\n\nimport styles from './NavGroup.module.scss'\n\
|
|
1
|
+
{"version":3,"file":"NavGroup.mjs","sources":["../../../../src/components/NavGroup/NavGroup.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport {\n ChevronSmallDownIcon,\n ChevronSmallRightIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\n// eslint-disable-next-line no-restricted-imports\nimport commonStyles from '../NavItem/NavItem.module.scss'\n\nimport type { NavGroupProps } from './NavGroup.types'\n\nimport styles from './NavGroup.module.scss'\n\n/**\n * @deprecated\n */\nconst NAV_GROUP_TEST_ID = 'bezier-nav-group'\n\n/**\n * @deprecated\n */\nconst NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-nav-group-left-icon'\n\nexport const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(\n function NavGroup(\n {\n name,\n className,\n children,\n content,\n rightContent,\n leftContent,\n open,\n active,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const handleClickItem = (e?: React.MouseEvent) => {\n onClick?.(e, name)\n }\n\n const hasChildren = !isNil(children)\n const chevronIconSource = open\n ? ChevronSmallDownIcon\n : ChevronSmallRightIcon\n const ariaName = `${name}Menu`\n\n return (\n <li\n className={commonStyles.Wrapper}\n role=\"none\"\n >\n <BaseButton\n ref={forwardedRef}\n className={classNames(\n commonStyles.Item,\n active && commonStyles.active,\n className\n )}\n role=\"menuitem\"\n aria-haspopup={hasChildren}\n aria-expanded={open}\n aria-controls={ariaName}\n onClick={handleClickItem}\n data-testid={NAV_GROUP_TEST_ID}\n {...rest}\n >\n <div className={commonStyles.LeftIconWrapper}>\n <Icon\n source={leftContent}\n size=\"s\"\n color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n data-testid={NAV_GROUP_LEFT_ICON_TEST_ID}\n />\n </div>\n\n <Text\n typo=\"14\"\n truncated\n >\n {content}\n </Text>\n\n {hasChildren && (\n <div className={styles.ChevronWrapper}>\n <Icon\n source={chevronIconSource}\n size=\"s\"\n color=\"txt-black-dark\"\n />\n </div>\n )}\n\n {rightContent && (\n <div className={commonStyles.RightContentWrapper}>\n {rightContent}\n </div>\n )}\n </BaseButton>\n\n {open && (\n <ul\n className={styles.ChildrenWrapper}\n role=\"menu\"\n id={ariaName}\n >\n {open && children}\n </ul>\n )}\n </li>\n )\n }\n)\n"],"names":["NAV_GROUP_TEST_ID","NAV_GROUP_LEFT_ICON_TEST_ID","NavGroup","forwardRef","name","className","children","content","rightContent","leftContent","open","active","onClick","rest","forwardedRef","handleClickItem","e","hasChildren","isNil","chevronIconSource","ChevronSmallDownIcon","ChevronSmallRightIcon","ariaName","_jsxs","commonStyles","Wrapper","role","BaseButton","ref","classNames","Item","_jsx","LeftIconWrapper","Icon","source","size","color","Text","typo","truncated","styles","ChevronWrapper","RightContentWrapper","ChildrenWrapper","id"],"mappings":";;;;;;;;;;;AA0BA,MAAMA,iBAAiB,GAAG,kBAAkB;;AAE5C;AACA;AACA;AACA,MAAMC,2BAA2B,GAAG,4BAA4B;MAEnDC,QAAQ,gBAAGC,UAAU,CAChC,SAASD,QAAQA,CACf;EACEE,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,YAAY;EACZC,WAAW;EACXC,IAAI;EACJC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,eAAe,GAAIC,CAAoB,IAAK;IAChDJ,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,CAAGI,CAAC,EAAEZ,IAAI,CAAC;GACnB;AAED,EAAA,MAAMa,WAAW,GAAG,CAACC,KAAK,CAACZ,QAAQ,CAAC;AACpC,EAAA,MAAMa,iBAAiB,GAAGT,IAAI,GAC1BU,oBAAoB,GACpBC,qBAAqB;AACzB,EAAA,MAAMC,QAAQ,GAAG,CAAGlB,EAAAA,IAAI,CAAM,IAAA,CAAA;AAE9B,EAAA,oBACEmB,IAAA,CAAA,IAAA,EAAA;IACElB,SAAS,EAAEmB,MAAY,CAACC,OAAQ;AAChCC,IAAAA,IAAI,EAAC,MAAM;IAAApB,QAAA,EAAA,cAEXiB,IAAA,CAACI,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAEd,YAAa;AAClBT,MAAAA,SAAS,EAAEwB,UAAU,CACnBL,MAAY,CAACM,IAAI,EACjBnB,MAAM,IAAIa,MAAY,CAACb,MAAM,EAC7BN,SACF,CAAE;AACFqB,MAAAA,IAAI,EAAC,UAAU;AACf,MAAA,eAAA,EAAeT,WAAY;AAC3B,MAAA,eAAA,EAAeP,IAAK;AACpB,MAAA,eAAA,EAAeY,QAAS;AACxBV,MAAAA,OAAO,EAAEG,eAAgB;AACzB,MAAA,aAAA,EAAaf,iBAAkB;AAAA,MAAA,GAC3Ba,IAAI;AAAAP,MAAAA,QAAA,gBAERyB,GAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAEmB,MAAY,CAACQ,eAAgB;QAAA1B,QAAA,eAC3CyB,GAAA,CAACE,IAAI,EAAA;AACHC,UAAAA,MAAM,EAAEzB,WAAY;AACpB0B,UAAAA,IAAI,EAAC,GAAG;AACRC,UAAAA,KAAK,EAAEzB,MAAM,GAAG,mBAAmB,GAAG,gBAAiB;UACvD,aAAaV,EAAAA;SACd;AAAC,OACC,CAAC,eAEN8B,GAAA,CAACM,IAAI,EAAA;AACHC,QAAAA,IAAI,EAAC,IAAI;QACTC,SAAS,EAAA,IAAA;AAAAjC,QAAAA,QAAA,EAERC;AAAO,OACJ,CAAC,EAENU,WAAW,iBACVc,GAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAEmC,QAAM,CAACC,cAAe;QAAAnC,QAAA,eACpCyB,GAAA,CAACE,IAAI,EAAA;AACHC,UAAAA,MAAM,EAAEf,iBAAkB;AAC1BgB,UAAAA,IAAI,EAAC,GAAG;AACRC,UAAAA,KAAK,EAAC;SACP;AAAC,OACC,CACN,EAEA5B,YAAY,iBACXuB,GAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAEmB,MAAY,CAACkB,mBAAoB;AAAApC,QAAAA,QAAA,EAC9CE;AAAY,OACV,CACN;AAAA,KACS,CAAC,EAEZE,IAAI,iBACHqB,GAAA,CAAA,IAAA,EAAA;MACE1B,SAAS,EAAEmC,QAAM,CAACG,eAAgB;AAClCjB,MAAAA,IAAI,EAAC,MAAM;AACXkB,MAAAA,EAAE,EAAEtB,QAAS;MAAAhB,QAAA,EAEZI,IAAI,IAAIJ;AAAQ,KACf,CACL;AAAA,GACC,CAAC;AAET,CACF;;;;"}
|
|
@@ -6,6 +6,10 @@ import { Icon } from '../Icon/Icon.mjs';
|
|
|
6
6
|
import { Text } from '../Text/Text.mjs';
|
|
7
7
|
|
|
8
8
|
const NAV_ITEM_TEST_ID = 'bezier-nav-item';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated
|
|
12
|
+
*/
|
|
9
13
|
const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-nav-item-left-icon';
|
|
10
14
|
|
|
11
15
|
/**
|
|
@@ -68,5 +72,5 @@ const NavItem = /*#__PURE__*/forwardRef(function NavItem({
|
|
|
68
72
|
});
|
|
69
73
|
});
|
|
70
74
|
|
|
71
|
-
export {
|
|
75
|
+
export { NavItem };
|
|
72
76
|
//# sourceMappingURL=NavItem.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.mjs","sources":["../../../../src/components/NavItem/NavItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport type { NavItemProps } from './NavItem.types'\n\nimport styles from './NavItem.module.scss'\n\
|
|
1
|
+
{"version":3,"file":"NavItem.mjs","sources":["../../../../src/components/NavItem/NavItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport type { NavItemProps } from './NavItem.types'\n\nimport styles from './NavItem.module.scss'\n\n/**\n * @deprecated\n */\nconst NAV_ITEM_TEST_ID = 'bezier-nav-item'\n\n/**\n * @deprecated\n */\nconst NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-nav-item-left-icon'\n\n/**\n * `NavItem` is a component for an item where you can navigate to another link.\n * @example\n * ```tsx\n * <NavItem\n * name=\"channel\"\n * content=\"https://channel.io\"\n * href=\"_parent\"\n * />\n * ```\n */\nexport const NavItem = forwardRef<HTMLAnchorElement, NavItemProps>(\n function NavItem(\n {\n name,\n style,\n className,\n content,\n href,\n target = '_self',\n rightContent,\n leftContent,\n active,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const handleClickItem = (e?: React.MouseEvent) => {\n onClick?.(e, name)\n }\n\n return (\n <li\n className={styles.Wrapper}\n role=\"none\"\n >\n <a\n ref={forwardedRef}\n style={style}\n className={classNames(\n styles.Item,\n active && styles.active,\n className\n )}\n href={href}\n target={target}\n role=\"menuitem\"\n onClick={handleClickItem}\n data-testid={NAV_ITEM_TEST_ID}\n {...rest}\n >\n <div className={styles.LeftIconWrapper}>\n {leftContent && (\n <Icon\n data-testid={NAV_ITEM_LEFT_ICON_TEST_ID}\n source={leftContent}\n size=\"s\"\n color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n />\n )}\n </div>\n\n <Text\n typo=\"14\"\n truncated\n >\n {content}\n </Text>\n\n {rightContent && (\n <div className={styles.RightContentWrapper}>{rightContent}</div>\n )}\n </a>\n </li>\n )\n }\n)\n"],"names":["NAV_ITEM_TEST_ID","NAV_ITEM_LEFT_ICON_TEST_ID","NavItem","forwardRef","name","style","className","content","href","target","rightContent","leftContent","active","onClick","rest","forwardedRef","handleClickItem","e","_jsx","styles","Wrapper","role","children","_jsxs","ref","classNames","Item","LeftIconWrapper","Icon","source","size","color","Text","typo","truncated","RightContentWrapper"],"mappings":";;;;;;;AAgBA,MAAMA,gBAAgB,GAAG,iBAAiB;;AAE1C;AACA;AACA;AACA,MAAMC,0BAA0B,GAAG,2BAA2B;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,OAAO,gBAAGC,UAAU,CAC/B,SAASD,OAAOA,CACd;EACEE,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,IAAI;AACJC,EAAAA,MAAM,GAAG,OAAO;EAChBC,YAAY;EACZC,WAAW;EACXC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,eAAe,GAAIC,CAAoB,IAAK;IAChDJ,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,CAAGI,CAAC,EAAEb,IAAI,CAAC;GACnB;AAED,EAAA,oBACEc,GAAA,CAAA,IAAA,EAAA;IACEZ,SAAS,EAAEa,MAAM,CAACC,OAAQ;AAC1BC,IAAAA,IAAI,EAAC,MAAM;AAAAC,IAAAA,QAAA,eAEXC,IAAA,CAAA,GAAA,EAAA;AACEC,MAAAA,GAAG,EAAET,YAAa;AAClBV,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,SAAS,EAAEmB,UAAU,CACnBN,MAAM,CAACO,IAAI,EACXd,MAAM,IAAIO,MAAM,CAACP,MAAM,EACvBN,SACF,CAAE;AACFE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,MAAM,EAAEA,MAAO;AACfY,MAAAA,IAAI,EAAC,UAAU;AACfR,MAAAA,OAAO,EAAEG,eAAgB;AACzB,MAAA,aAAA,EAAahB,gBAAiB;AAAA,MAAA,GAC1Bc,IAAI;AAAAQ,MAAAA,QAAA,gBAERJ,GAAA,CAAA,KAAA,EAAA;QAAKZ,SAAS,EAAEa,MAAM,CAACQ,eAAgB;AAAAL,QAAAA,QAAA,EACpCX,WAAW,iBACVO,GAAA,CAACU,IAAI,EAAA;AACH,UAAA,aAAA,EAAa3B,0BAA2B;AACxC4B,UAAAA,MAAM,EAAElB,WAAY;AACpBmB,UAAAA,IAAI,EAAC,GAAG;AACRC,UAAAA,KAAK,EAAEnB,MAAM,GAAG,mBAAmB,GAAG;SACvC;AACF,OACE,CAAC,eAENM,GAAA,CAACc,IAAI,EAAA;AACHC,QAAAA,IAAI,EAAC,IAAI;QACTC,SAAS,EAAA,IAAA;AAAAZ,QAAAA,QAAA,EAERf;AAAO,OACJ,CAAC,EAENG,YAAY,iBACXQ,GAAA,CAAA,KAAA,EAAA;QAAKZ,SAAS,EAAEa,MAAM,CAACgB,mBAAoB;AAAAb,QAAAA,QAAA,EAAEZ;AAAY,OAAM,CAChE;KACA;AAAC,GACF,CAAC;AAET,CACF;;;;"}
|