@channel.io/bezier-react 3.4.2 → 3.5.0
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/ListItem/ListItem.js +7 -3
- package/dist/cjs/components/ListItem/ListItem.js.map +1 -1
- package/dist/cjs/components/OutlineItem/OutlineItem.js +6 -3
- package/dist/cjs/components/OutlineItem/OutlineItem.js.map +1 -1
- package/dist/esm/components/ListItem/ListItem.mjs +7 -3
- package/dist/esm/components/ListItem/ListItem.mjs.map +1 -1
- package/dist/esm/components/OutlineItem/OutlineItem.mjs +6 -3
- package/dist/esm/components/OutlineItem/OutlineItem.mjs.map +1 -1
- package/dist/types/components/ListItem/ListItem.d.ts +1 -3
- package/dist/types/components/ListItem/ListItem.d.ts.map +1 -1
- package/dist/types/components/OutlineItem/OutlineItem.d.ts +1 -1
- package/dist/types/components/OutlineItem/OutlineItem.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ListItem/ListItem.test.tsx +5 -0
- package/src/components/ListItem/ListItem.tsx +6 -5
- package/src/components/OutlineItem/OutlineItem.test.tsx +5 -0
- package/src/components/OutlineItem/OutlineItem.tsx +100 -96
|
@@ -8,6 +8,7 @@ var ListItem_module = require('./ListItem.module.scss.js');
|
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
var Icon = require('../Icon/Icon.js');
|
|
10
10
|
var Text = require('../Text/Text.js');
|
|
11
|
+
var BaseButton = require('../BaseButton/BaseButton.js');
|
|
11
12
|
|
|
12
13
|
function renderNewLineComponent(value) {
|
|
13
14
|
return value.split('\n').map((str, index) =>
|
|
@@ -37,8 +38,9 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem({
|
|
|
37
38
|
...rest
|
|
38
39
|
}, forwardedRef) {
|
|
39
40
|
const isLink = !type.isEmpty(href);
|
|
40
|
-
const
|
|
41
|
-
const
|
|
41
|
+
const isButton = !type.isNil(onClick);
|
|
42
|
+
const Comp = isLink ? 'a' : isButton ? BaseButton.BaseButton : as !== null && as !== void 0 ? as : 'div';
|
|
43
|
+
const clickable = isLink || clickableProp || isButton;
|
|
42
44
|
return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
|
|
43
45
|
...(isLink && {
|
|
44
46
|
href,
|
|
@@ -46,7 +48,9 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem({
|
|
|
46
48
|
target: '_blank',
|
|
47
49
|
rel: 'noopener noreferrer'
|
|
48
50
|
}),
|
|
49
|
-
className: index.default(ListItem_module.default.ListItem, ListItem_module.default[`size-${size}`], ListItem_module.default[`variant-${variant}`], disabled && ListItem_module.default.disabled, focused && ListItem_module.default.focused, active && ListItem_module.default.active, clickable && ListItem_module.default.clickable, className)
|
|
51
|
+
className: index.default(ListItem_module.default.ListItem, ListItem_module.default[`size-${size}`], ListItem_module.default[`variant-${variant}`], disabled && ListItem_module.default.disabled, focused && ListItem_module.default.focused, active && ListItem_module.default.active, clickable && ListItem_module.default.clickable, className)
|
|
52
|
+
// @ts-expect-error
|
|
53
|
+
,
|
|
50
54
|
ref: forwardedRef,
|
|
51
55
|
onClick: !disabled ? onClick : undefined,
|
|
52
56
|
"data-testid": LIST_ITEM_TEST_ID,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment, forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isEmpty, isNil, isString } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ListItemProps } from './ListItem.types'\n\nimport styles from './ListItem.module.scss'\n\
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment, forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isEmpty, isNil, isString } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ListItemProps } from './ListItem.types'\n\nimport styles from './ListItem.module.scss'\n\nfunction renderNewLineComponent(value: string) {\n return value.split('\\n').map((str, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>\n {index !== 0 && <br />}\n {str}\n </Fragment>\n ))\n}\n\nexport const LIST_ITEM_TEST_ID = 'bezier-list-item'\n\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(\n function ListItem(\n {\n className,\n as,\n variant = 'monochrome',\n size = 's',\n content,\n description,\n descriptionMaxLines,\n leftContent,\n rightContent,\n active = false,\n focused = false,\n disabled = false,\n clickable: clickableProp = false,\n href,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const isLink = !isEmpty(href)\n const isButton = !isNil(onClick)\n const Comp = isLink ? 'a' : isButton ? BaseButton : ((as ?? 'div') as 'div')\n const clickable = isLink || clickableProp || isButton\n\n return (\n <Comp\n {...(isLink && {\n href,\n draggable: false,\n target: '_blank',\n rel: 'noopener noreferrer',\n })}\n className={classNames(\n styles.ListItem,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n disabled && styles.disabled,\n focused && styles.focused,\n active && styles.active,\n clickable && styles.clickable,\n className\n )}\n // @ts-expect-error\n ref={forwardedRef}\n onClick={!disabled ? onClick : undefined}\n data-testid={LIST_ITEM_TEST_ID}\n {...rest}\n >\n <div className={styles.ListItemContent}>\n {!isNil(leftContent) && (\n <div className={styles.ListItemLeftContent}>\n {isBezierIcon(leftContent) ? (\n <Icon\n className={styles.ListItemLeftIcon}\n source={leftContent}\n size=\"s\"\n />\n ) : (\n leftContent\n )}\n </div>\n )}\n\n <div className={styles.ListItemTitle}>\n {isString(content) ? (\n <Text\n truncated\n typo={size === 'l' ? '16' : '14'}\n >\n {content}\n </Text>\n ) : (\n content\n )}\n </div>\n\n {description && (\n <div className={styles.ListItemDescription}>\n <Text\n typo=\"12\"\n color=\"txt-black-darker\"\n truncated={descriptionMaxLines}\n >\n {isString(description)\n ? renderNewLineComponent(description)\n : description}\n </Text>\n </div>\n )}\n </div>\n\n {rightContent && (\n <div className={styles.ListItemRightContent}>{rightContent}</div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["renderNewLineComponent","value","split","map","str","index","_jsxs","Fragment","children","_jsx","LIST_ITEM_TEST_ID","ListItem","forwardRef","className","as","variant","size","content","description","descriptionMaxLines","leftContent","rightContent","active","focused","disabled","clickable","clickableProp","href","onClick","rest","forwardedRef","isLink","isEmpty","isButton","isNil","Comp","BaseButton","draggable","target","rel","classNames","styles","ref","undefined","ListItemContent","ListItemLeftContent","isBezierIcon","Icon","ListItemLeftIcon","source","ListItemTitle","isString","Text","truncated","typo","ListItemDescription","color","ListItemRightContent"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ var OutlineItem_module = require('./OutlineItem.module.scss.js');
|
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
10
|
var Icon = require('../Icon/Icon.js');
|
|
11
11
|
var Text = require('../Text/Text.js');
|
|
12
|
+
var BaseButton = require('../BaseButton/BaseButton.js');
|
|
12
13
|
|
|
13
14
|
const [OutlineItemContextProvider, useOutlineItemContext] = react.createContext(undefined);
|
|
14
15
|
const DEFAULT_INDENT = 16;
|
|
@@ -34,8 +35,9 @@ const OutlineItem = /*#__PURE__*/React.forwardRef(function OutlineItem({
|
|
|
34
35
|
const isRoot = type.isNil(context);
|
|
35
36
|
const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT;
|
|
36
37
|
const isLink = !type.isEmpty(href);
|
|
37
|
-
const
|
|
38
|
-
const
|
|
38
|
+
const isButton = !type.isNil(onClick);
|
|
39
|
+
const Comp = isLink ? 'a' : isButton ? BaseButton.BaseButton : as !== null && as !== void 0 ? as : 'div';
|
|
40
|
+
const clickable = isLink || clickableProp || isButton;
|
|
39
41
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
40
42
|
children: [/*#__PURE__*/jsxRuntime.jsxs(Comp, {
|
|
41
43
|
...(isLink && {
|
|
@@ -43,12 +45,13 @@ const OutlineItem = /*#__PURE__*/React.forwardRef(function OutlineItem({
|
|
|
43
45
|
target: '_blank',
|
|
44
46
|
rel: 'noopener noreferrer'
|
|
45
47
|
}),
|
|
48
|
+
// @ts-expect-error
|
|
49
|
+
ref: forwardedRef,
|
|
46
50
|
style: {
|
|
47
51
|
...style,
|
|
48
52
|
'--b-outline-item-indent': `${indent}px`
|
|
49
53
|
},
|
|
50
54
|
className: index.default(OutlineItem_module.default.OutlineItem, active && OutlineItem_module.default.active, focused && OutlineItem_module.default.focused, clickable && OutlineItem_module.default.clickable, className),
|
|
51
|
-
ref: forwardedRef,
|
|
52
55
|
"data-testid": OUTLINE_ITEM_TEST_ID,
|
|
53
56
|
onClick: onClick,
|
|
54
57
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport {\n ChevronSmallDownIcon,\n ChevronSmallRightIcon,\n isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type OutlineItemContextProps,\n type OutlineItemProps,\n} from './OutlineItem.types'\n\nimport styles from './OutlineItem.module.scss'\n\nconst [OutlineItemContextProvider, useOutlineItemContext] = createContext<\n OutlineItemContextProps | undefined\n>(undefined)\n\nconst DEFAULT_INDENT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-outline-item'\n\nexport const OutlineItem = forwardRef
|
|
1
|
+
{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport {\n ChevronSmallDownIcon,\n ChevronSmallRightIcon,\n isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isEmpty, 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\nimport {\n type OutlineItemContextProps,\n type OutlineItemProps,\n} from './OutlineItem.types'\n\nimport styles from './OutlineItem.module.scss'\n\nconst [OutlineItemContextProvider, useOutlineItemContext] = createContext<\n OutlineItemContextProps | undefined\n>(undefined)\n\nconst DEFAULT_INDENT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-outline-item'\n\nexport const OutlineItem = forwardRef<HTMLElement, OutlineItemProps>(\n function OutlineItem(\n {\n children,\n style,\n className,\n as,\n open = false,\n disableChevron = false,\n active = false,\n focused = false,\n clickable: clickableProp = false,\n leftContent,\n content,\n rightContent,\n href,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const context = useOutlineItemContext()\n const isRoot = isNil(context)\n const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT\n\n const isLink = !isEmpty(href)\n const isButton = !isNil(onClick)\n const Comp = isLink ? 'a' : isButton ? BaseButton : ((as ?? 'div') as 'div')\n const clickable = isLink || clickableProp || isButton\n\n return (\n <>\n <Comp\n {...(isLink && {\n href,\n target: '_blank',\n rel: 'noopener noreferrer',\n })}\n // @ts-expect-error\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-outline-item-indent': `${indent}px`,\n } as React.CSSProperties\n }\n className={classNames(\n styles.OutlineItem,\n active && styles.active,\n focused && styles.focused,\n clickable && styles.clickable,\n className\n )}\n data-testid={OUTLINE_ITEM_TEST_ID}\n onClick={onClick}\n {...rest}\n >\n {!disableChevron && (\n <div className={styles.Chevron}>\n {!isNil(children) && (\n <Icon\n className={styles.Icon}\n source={open ? ChevronSmallDownIcon : ChevronSmallRightIcon}\n size=\"s\"\n color=\"txt-black-dark\"\n />\n )}\n </div>\n )}\n\n {leftContent && (\n <div className={styles.LeftContent}>\n {isBezierIcon(leftContent) ? (\n <Icon\n className={styles.Icon}\n size=\"s\"\n source={leftContent}\n color=\"txt-black-dark\"\n />\n ) : (\n leftContent\n )}\n </div>\n )}\n\n <Text\n className={styles.Content}\n typo=\"14\"\n truncated\n >\n {content}\n </Text>\n\n {rightContent}\n </Comp>\n\n <OutlineItemContextProvider\n value={useMemo(() => ({ indent }), [indent])}\n >\n {open && children}\n </OutlineItemContextProvider>\n </>\n )\n }\n)\n"],"names":["OutlineItemContextProvider","useOutlineItemContext","createContext","undefined","DEFAULT_INDENT","OUTLINE_ITEM_TEST_ID","OutlineItem","forwardRef","children","style","className","as","open","disableChevron","active","focused","clickable","clickableProp","leftContent","content","rightContent","href","onClick","rest","forwardedRef","context","isRoot","isNil","indent","isLink","isEmpty","isButton","Comp","BaseButton","_jsxs","_Fragment","target","rel","ref","classNames","styles","_jsx","Chevron","Icon","source","ChevronSmallDownIcon","ChevronSmallRightIcon","size","color","LeftContent","isBezierIcon","Text","Content","typo","truncated","value","useMemo"],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ import styles from './ListItem.module.scss.mjs';
|
|
|
6
6
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
7
|
import { Icon } from '../Icon/Icon.mjs';
|
|
8
8
|
import { Text } from '../Text/Text.mjs';
|
|
9
|
+
import { BaseButton } from '../BaseButton/BaseButton.mjs';
|
|
9
10
|
|
|
10
11
|
function renderNewLineComponent(value) {
|
|
11
12
|
return value.split('\n').map((str, index) =>
|
|
@@ -35,8 +36,9 @@ const ListItem = /*#__PURE__*/forwardRef(function ListItem({
|
|
|
35
36
|
...rest
|
|
36
37
|
}, forwardedRef) {
|
|
37
38
|
const isLink = !isEmpty(href);
|
|
38
|
-
const
|
|
39
|
-
const
|
|
39
|
+
const isButton = !isNil(onClick);
|
|
40
|
+
const Comp = isLink ? 'a' : isButton ? BaseButton : as !== null && as !== void 0 ? as : 'div';
|
|
41
|
+
const clickable = isLink || clickableProp || isButton;
|
|
40
42
|
return /*#__PURE__*/jsxs(Comp, {
|
|
41
43
|
...(isLink && {
|
|
42
44
|
href,
|
|
@@ -44,7 +46,9 @@ const ListItem = /*#__PURE__*/forwardRef(function ListItem({
|
|
|
44
46
|
target: '_blank',
|
|
45
47
|
rel: 'noopener noreferrer'
|
|
46
48
|
}),
|
|
47
|
-
className: classNames(styles.ListItem, styles[`size-${size}`], styles[`variant-${variant}`], disabled && styles.disabled, focused && styles.focused, active && styles.active, clickable && styles.clickable, className)
|
|
49
|
+
className: classNames(styles.ListItem, styles[`size-${size}`], styles[`variant-${variant}`], disabled && styles.disabled, focused && styles.focused, active && styles.active, clickable && styles.clickable, className)
|
|
50
|
+
// @ts-expect-error
|
|
51
|
+
,
|
|
48
52
|
ref: forwardedRef,
|
|
49
53
|
onClick: !disabled ? onClick : undefined,
|
|
50
54
|
"data-testid": LIST_ITEM_TEST_ID,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment, forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isEmpty, isNil, isString } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ListItemProps } from './ListItem.types'\n\nimport styles from './ListItem.module.scss'\n\
|
|
1
|
+
{"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment, forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isEmpty, isNil, isString } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ListItemProps } from './ListItem.types'\n\nimport styles from './ListItem.module.scss'\n\nfunction renderNewLineComponent(value: string) {\n return value.split('\\n').map((str, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>\n {index !== 0 && <br />}\n {str}\n </Fragment>\n ))\n}\n\nexport const LIST_ITEM_TEST_ID = 'bezier-list-item'\n\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(\n function ListItem(\n {\n className,\n as,\n variant = 'monochrome',\n size = 's',\n content,\n description,\n descriptionMaxLines,\n leftContent,\n rightContent,\n active = false,\n focused = false,\n disabled = false,\n clickable: clickableProp = false,\n href,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const isLink = !isEmpty(href)\n const isButton = !isNil(onClick)\n const Comp = isLink ? 'a' : isButton ? BaseButton : ((as ?? 'div') as 'div')\n const clickable = isLink || clickableProp || isButton\n\n return (\n <Comp\n {...(isLink && {\n href,\n draggable: false,\n target: '_blank',\n rel: 'noopener noreferrer',\n })}\n className={classNames(\n styles.ListItem,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n disabled && styles.disabled,\n focused && styles.focused,\n active && styles.active,\n clickable && styles.clickable,\n className\n )}\n // @ts-expect-error\n ref={forwardedRef}\n onClick={!disabled ? onClick : undefined}\n data-testid={LIST_ITEM_TEST_ID}\n {...rest}\n >\n <div className={styles.ListItemContent}>\n {!isNil(leftContent) && (\n <div className={styles.ListItemLeftContent}>\n {isBezierIcon(leftContent) ? (\n <Icon\n className={styles.ListItemLeftIcon}\n source={leftContent}\n size=\"s\"\n />\n ) : (\n leftContent\n )}\n </div>\n )}\n\n <div className={styles.ListItemTitle}>\n {isString(content) ? (\n <Text\n truncated\n typo={size === 'l' ? '16' : '14'}\n >\n {content}\n </Text>\n ) : (\n content\n )}\n </div>\n\n {description && (\n <div className={styles.ListItemDescription}>\n <Text\n typo=\"12\"\n color=\"txt-black-darker\"\n truncated={descriptionMaxLines}\n >\n {isString(description)\n ? renderNewLineComponent(description)\n : description}\n </Text>\n </div>\n )}\n </div>\n\n {rightContent && (\n <div className={styles.ListItemRightContent}>{rightContent}</div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["renderNewLineComponent","value","split","map","str","index","_jsxs","Fragment","children","_jsx","LIST_ITEM_TEST_ID","ListItem","forwardRef","className","as","variant","size","content","description","descriptionMaxLines","leftContent","rightContent","active","focused","disabled","clickable","clickableProp","href","onClick","rest","forwardedRef","isLink","isEmpty","isButton","isNil","Comp","BaseButton","draggable","target","rel","classNames","styles","ref","undefined","ListItemContent","ListItemLeftContent","isBezierIcon","Icon","ListItemLeftIcon","source","ListItemTitle","isString","Text","truncated","typo","ListItemDescription","color","ListItemRightContent"],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ import styles from './OutlineItem.module.scss.mjs';
|
|
|
7
7
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
8
8
|
import { Icon } from '../Icon/Icon.mjs';
|
|
9
9
|
import { Text } from '../Text/Text.mjs';
|
|
10
|
+
import { BaseButton } from '../BaseButton/BaseButton.mjs';
|
|
10
11
|
|
|
11
12
|
const [OutlineItemContextProvider, useOutlineItemContext] = createContext(undefined);
|
|
12
13
|
const DEFAULT_INDENT = 16;
|
|
@@ -32,8 +33,9 @@ const OutlineItem = /*#__PURE__*/forwardRef(function OutlineItem({
|
|
|
32
33
|
const isRoot = isNil(context);
|
|
33
34
|
const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT;
|
|
34
35
|
const isLink = !isEmpty(href);
|
|
35
|
-
const
|
|
36
|
-
const
|
|
36
|
+
const isButton = !isNil(onClick);
|
|
37
|
+
const Comp = isLink ? 'a' : isButton ? BaseButton : as !== null && as !== void 0 ? as : 'div';
|
|
38
|
+
const clickable = isLink || clickableProp || isButton;
|
|
37
39
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
38
40
|
children: [/*#__PURE__*/jsxs(Comp, {
|
|
39
41
|
...(isLink && {
|
|
@@ -41,12 +43,13 @@ const OutlineItem = /*#__PURE__*/forwardRef(function OutlineItem({
|
|
|
41
43
|
target: '_blank',
|
|
42
44
|
rel: 'noopener noreferrer'
|
|
43
45
|
}),
|
|
46
|
+
// @ts-expect-error
|
|
47
|
+
ref: forwardedRef,
|
|
44
48
|
style: {
|
|
45
49
|
...style,
|
|
46
50
|
'--b-outline-item-indent': `${indent}px`
|
|
47
51
|
},
|
|
48
52
|
className: classNames(styles.OutlineItem, active && styles.active, focused && styles.focused, clickable && styles.clickable, className),
|
|
49
|
-
ref: forwardedRef,
|
|
50
53
|
"data-testid": OUTLINE_ITEM_TEST_ID,
|
|
51
54
|
onClick: onClick,
|
|
52
55
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutlineItem.mjs","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport {\n ChevronSmallDownIcon,\n ChevronSmallRightIcon,\n isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type OutlineItemContextProps,\n type OutlineItemProps,\n} from './OutlineItem.types'\n\nimport styles from './OutlineItem.module.scss'\n\nconst [OutlineItemContextProvider, useOutlineItemContext] = createContext<\n OutlineItemContextProps | undefined\n>(undefined)\n\nconst DEFAULT_INDENT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-outline-item'\n\nexport const OutlineItem = forwardRef
|
|
1
|
+
{"version":3,"file":"OutlineItem.mjs","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport {\n ChevronSmallDownIcon,\n ChevronSmallRightIcon,\n isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isEmpty, 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\nimport {\n type OutlineItemContextProps,\n type OutlineItemProps,\n} from './OutlineItem.types'\n\nimport styles from './OutlineItem.module.scss'\n\nconst [OutlineItemContextProvider, useOutlineItemContext] = createContext<\n OutlineItemContextProps | undefined\n>(undefined)\n\nconst DEFAULT_INDENT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-outline-item'\n\nexport const OutlineItem = forwardRef<HTMLElement, OutlineItemProps>(\n function OutlineItem(\n {\n children,\n style,\n className,\n as,\n open = false,\n disableChevron = false,\n active = false,\n focused = false,\n clickable: clickableProp = false,\n leftContent,\n content,\n rightContent,\n href,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const context = useOutlineItemContext()\n const isRoot = isNil(context)\n const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT\n\n const isLink = !isEmpty(href)\n const isButton = !isNil(onClick)\n const Comp = isLink ? 'a' : isButton ? BaseButton : ((as ?? 'div') as 'div')\n const clickable = isLink || clickableProp || isButton\n\n return (\n <>\n <Comp\n {...(isLink && {\n href,\n target: '_blank',\n rel: 'noopener noreferrer',\n })}\n // @ts-expect-error\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-outline-item-indent': `${indent}px`,\n } as React.CSSProperties\n }\n className={classNames(\n styles.OutlineItem,\n active && styles.active,\n focused && styles.focused,\n clickable && styles.clickable,\n className\n )}\n data-testid={OUTLINE_ITEM_TEST_ID}\n onClick={onClick}\n {...rest}\n >\n {!disableChevron && (\n <div className={styles.Chevron}>\n {!isNil(children) && (\n <Icon\n className={styles.Icon}\n source={open ? ChevronSmallDownIcon : ChevronSmallRightIcon}\n size=\"s\"\n color=\"txt-black-dark\"\n />\n )}\n </div>\n )}\n\n {leftContent && (\n <div className={styles.LeftContent}>\n {isBezierIcon(leftContent) ? (\n <Icon\n className={styles.Icon}\n size=\"s\"\n source={leftContent}\n color=\"txt-black-dark\"\n />\n ) : (\n leftContent\n )}\n </div>\n )}\n\n <Text\n className={styles.Content}\n typo=\"14\"\n truncated\n >\n {content}\n </Text>\n\n {rightContent}\n </Comp>\n\n <OutlineItemContextProvider\n value={useMemo(() => ({ indent }), [indent])}\n >\n {open && children}\n </OutlineItemContextProvider>\n </>\n )\n }\n)\n"],"names":["OutlineItemContextProvider","useOutlineItemContext","createContext","undefined","DEFAULT_INDENT","OUTLINE_ITEM_TEST_ID","OutlineItem","forwardRef","children","style","className","as","open","disableChevron","active","focused","clickable","clickableProp","leftContent","content","rightContent","href","onClick","rest","forwardedRef","context","isRoot","isNil","indent","isLink","isEmpty","isButton","Comp","BaseButton","_jsxs","_Fragment","target","rel","ref","classNames","styles","_jsx","Chevron","Icon","source","ChevronSmallDownIcon","ChevronSmallRightIcon","size","color","LeftContent","isBezierIcon","Text","Content","typo","truncated","value","useMemo"],"mappings":"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"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { type ListItemProps } from './ListItem.types';
|
|
2
|
-
type ListItemRef = HTMLDivElement & HTMLAnchorElement;
|
|
3
2
|
export declare const LIST_ITEM_TEST_ID = "bezier-list-item";
|
|
4
|
-
export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<
|
|
5
|
-
export {};
|
|
3
|
+
export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLElement>>;
|
|
6
4
|
//# sourceMappingURL=ListItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAcrD,eAAO,MAAM,iBAAiB,qBAAqB,CAAA;AAEnD,eAAO,MAAM,QAAQ,uGAoGpB,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type OutlineItemProps } from './OutlineItem.types';
|
|
3
3
|
export declare const OUTLINE_ITEM_TEST_ID = "bezier-outline-item";
|
|
4
|
-
export declare const OutlineItem: React.ForwardRefExoticComponent<OutlineItemProps & React.RefAttributes<
|
|
4
|
+
export declare const OutlineItem: React.ForwardRefExoticComponent<OutlineItemProps & React.RefAttributes<HTMLElement>>;
|
|
5
5
|
//# sourceMappingURL=OutlineItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutlineItem.d.ts","sourceRoot":"","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"OutlineItem.d.ts","sourceRoot":"","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAA;AAU5B,eAAO,MAAM,oBAAoB,wBAAwB,CAAA;AAEzD,eAAO,MAAM,WAAW,sFAwGvB,CAAA"}
|
package/package.json
CHANGED
|
@@ -28,4 +28,9 @@ describe('ListItem', () => {
|
|
|
28
28
|
expect(rendered).toHaveAttribute('rel', 'noopener noreferrer')
|
|
29
29
|
expect(rendered).toHaveAttribute('target', '_blank')
|
|
30
30
|
})
|
|
31
|
+
|
|
32
|
+
it('should renders as button if onClick prop exists', () => {
|
|
33
|
+
const { getByRole } = renderComponent({ onClick: jest.fn() })
|
|
34
|
+
expect(getByRole('button')).toBeInTheDocument()
|
|
35
|
+
})
|
|
31
36
|
})
|
|
@@ -7,6 +7,7 @@ import classNames from 'classnames'
|
|
|
7
7
|
|
|
8
8
|
import { isEmpty, isNil, isString } from '~/src/utils/type'
|
|
9
9
|
|
|
10
|
+
import { BaseButton } from '~/src/components/BaseButton'
|
|
10
11
|
import { Icon } from '~/src/components/Icon'
|
|
11
12
|
import { Text } from '~/src/components/Text'
|
|
12
13
|
|
|
@@ -14,8 +15,6 @@ import { type ListItemProps } from './ListItem.types'
|
|
|
14
15
|
|
|
15
16
|
import styles from './ListItem.module.scss'
|
|
16
17
|
|
|
17
|
-
type ListItemRef = HTMLDivElement & HTMLAnchorElement
|
|
18
|
-
|
|
19
18
|
function renderNewLineComponent(value: string) {
|
|
20
19
|
return value.split('\n').map((str, index) => (
|
|
21
20
|
// eslint-disable-next-line react/no-array-index-key
|
|
@@ -28,7 +27,7 @@ function renderNewLineComponent(value: string) {
|
|
|
28
27
|
|
|
29
28
|
export const LIST_ITEM_TEST_ID = 'bezier-list-item'
|
|
30
29
|
|
|
31
|
-
export const ListItem = forwardRef<
|
|
30
|
+
export const ListItem = forwardRef<HTMLElement, ListItemProps>(
|
|
32
31
|
function ListItem(
|
|
33
32
|
{
|
|
34
33
|
className,
|
|
@@ -51,8 +50,9 @@ export const ListItem = forwardRef<ListItemRef, ListItemProps>(
|
|
|
51
50
|
forwardedRef
|
|
52
51
|
) {
|
|
53
52
|
const isLink = !isEmpty(href)
|
|
54
|
-
const
|
|
55
|
-
const
|
|
53
|
+
const isButton = !isNil(onClick)
|
|
54
|
+
const Comp = isLink ? 'a' : isButton ? BaseButton : ((as ?? 'div') as 'div')
|
|
55
|
+
const clickable = isLink || clickableProp || isButton
|
|
56
56
|
|
|
57
57
|
return (
|
|
58
58
|
<Comp
|
|
@@ -72,6 +72,7 @@ export const ListItem = forwardRef<ListItemRef, ListItemProps>(
|
|
|
72
72
|
clickable && styles.clickable,
|
|
73
73
|
className
|
|
74
74
|
)}
|
|
75
|
+
// @ts-expect-error
|
|
75
76
|
ref={forwardedRef}
|
|
76
77
|
onClick={!disabled ? onClick : undefined}
|
|
77
78
|
data-testid={LIST_ITEM_TEST_ID}
|
|
@@ -38,4 +38,9 @@ describe('OutlineItem', () => {
|
|
|
38
38
|
const siblingElements = outlineItem[0].nextSibling
|
|
39
39
|
expect(siblingElements).toBeNull()
|
|
40
40
|
})
|
|
41
|
+
|
|
42
|
+
it('should renders as button if onClick prop exists', () => {
|
|
43
|
+
const { getByRole } = renderComponent({ onClick: jest.fn() })
|
|
44
|
+
expect(getByRole('button')).toBeInTheDocument()
|
|
45
|
+
})
|
|
41
46
|
})
|
|
@@ -12,6 +12,7 @@ import classNames from 'classnames'
|
|
|
12
12
|
import { createContext } from '~/src/utils/react'
|
|
13
13
|
import { isEmpty, isNil } from '~/src/utils/type'
|
|
14
14
|
|
|
15
|
+
import { BaseButton } from '~/src/components/BaseButton'
|
|
15
16
|
import { Icon } from '~/src/components/Icon'
|
|
16
17
|
import { Text } from '~/src/components/Text'
|
|
17
18
|
|
|
@@ -30,105 +31,108 @@ const DEFAULT_INDENT = 16
|
|
|
30
31
|
|
|
31
32
|
export const OUTLINE_ITEM_TEST_ID = 'bezier-outline-item'
|
|
32
33
|
|
|
33
|
-
export const OutlineItem = forwardRef<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
)
|
|
56
|
-
|
|
57
|
-
const isRoot = isNil(context)
|
|
58
|
-
const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT
|
|
34
|
+
export const OutlineItem = forwardRef<HTMLElement, OutlineItemProps>(
|
|
35
|
+
function OutlineItem(
|
|
36
|
+
{
|
|
37
|
+
children,
|
|
38
|
+
style,
|
|
39
|
+
className,
|
|
40
|
+
as,
|
|
41
|
+
open = false,
|
|
42
|
+
disableChevron = false,
|
|
43
|
+
active = false,
|
|
44
|
+
focused = false,
|
|
45
|
+
clickable: clickableProp = false,
|
|
46
|
+
leftContent,
|
|
47
|
+
content,
|
|
48
|
+
rightContent,
|
|
49
|
+
href,
|
|
50
|
+
onClick,
|
|
51
|
+
...rest
|
|
52
|
+
},
|
|
53
|
+
forwardedRef
|
|
54
|
+
) {
|
|
55
|
+
const context = useOutlineItemContext()
|
|
56
|
+
const isRoot = isNil(context)
|
|
57
|
+
const indent = isRoot ? 0 : context.indent + DEFAULT_INDENT
|
|
59
58
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
const isLink = !isEmpty(href)
|
|
60
|
+
const isButton = !isNil(onClick)
|
|
61
|
+
const Comp = isLink ? 'a' : isButton ? BaseButton : ((as ?? 'div') as 'div')
|
|
62
|
+
const clickable = isLink || clickableProp || isButton
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
{
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
{
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
64
|
+
return (
|
|
65
|
+
<>
|
|
66
|
+
<Comp
|
|
67
|
+
{...(isLink && {
|
|
68
|
+
href,
|
|
69
|
+
target: '_blank',
|
|
70
|
+
rel: 'noopener noreferrer',
|
|
71
|
+
})}
|
|
72
|
+
// @ts-expect-error
|
|
73
|
+
ref={forwardedRef}
|
|
74
|
+
style={
|
|
75
|
+
{
|
|
76
|
+
...style,
|
|
77
|
+
'--b-outline-item-indent': `${indent}px`,
|
|
78
|
+
} as React.CSSProperties
|
|
79
|
+
}
|
|
80
|
+
className={classNames(
|
|
81
|
+
styles.OutlineItem,
|
|
82
|
+
active && styles.active,
|
|
83
|
+
focused && styles.focused,
|
|
84
|
+
clickable && styles.clickable,
|
|
85
|
+
className
|
|
86
|
+
)}
|
|
87
|
+
data-testid={OUTLINE_ITEM_TEST_ID}
|
|
88
|
+
onClick={onClick}
|
|
89
|
+
{...rest}
|
|
90
|
+
>
|
|
91
|
+
{!disableChevron && (
|
|
92
|
+
<div className={styles.Chevron}>
|
|
93
|
+
{!isNil(children) && (
|
|
94
|
+
<Icon
|
|
95
|
+
className={styles.Icon}
|
|
96
|
+
source={open ? ChevronSmallDownIcon : ChevronSmallRightIcon}
|
|
97
|
+
size="s"
|
|
98
|
+
color="txt-black-dark"
|
|
99
|
+
/>
|
|
100
|
+
)}
|
|
101
|
+
</div>
|
|
102
|
+
)}
|
|
102
103
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
104
|
+
{leftContent && (
|
|
105
|
+
<div className={styles.LeftContent}>
|
|
106
|
+
{isBezierIcon(leftContent) ? (
|
|
107
|
+
<Icon
|
|
108
|
+
className={styles.Icon}
|
|
109
|
+
size="s"
|
|
110
|
+
source={leftContent}
|
|
111
|
+
color="txt-black-dark"
|
|
112
|
+
/>
|
|
113
|
+
) : (
|
|
114
|
+
leftContent
|
|
115
|
+
)}
|
|
116
|
+
</div>
|
|
117
|
+
)}
|
|
117
118
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
119
|
+
<Text
|
|
120
|
+
className={styles.Content}
|
|
121
|
+
typo="14"
|
|
122
|
+
truncated
|
|
123
|
+
>
|
|
124
|
+
{content}
|
|
125
|
+
</Text>
|
|
125
126
|
|
|
126
|
-
|
|
127
|
-
|
|
127
|
+
{rightContent}
|
|
128
|
+
</Comp>
|
|
128
129
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
130
|
+
<OutlineItemContextProvider
|
|
131
|
+
value={useMemo(() => ({ indent }), [indent])}
|
|
132
|
+
>
|
|
133
|
+
{open && children}
|
|
134
|
+
</OutlineItemContextProvider>
|
|
135
|
+
</>
|
|
136
|
+
)
|
|
137
|
+
}
|
|
138
|
+
)
|