@channel.io/bezier-react 2.0.0 → 2.0.2
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/AlphaDialogPrimitive/DialogPrimitive.js.map +1 -0
- package/dist/cjs/components/AlphaTooltipPrimitive/TooltipPrimitive.js.map +1 -0
- package/dist/cjs/components/FormHelperText/FormHelperText.js +2 -1
- package/dist/cjs/components/FormHelperText/FormHelperText.js.map +1 -1
- package/dist/cjs/components/FormLabel/FormLabel.js +3 -2
- package/dist/cjs/components/FormLabel/FormLabel.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.js +1 -1
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/index.js +16 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/packages/bezier-tokens/dist/esm/index.js.map +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/{cjs/alpha-components/DialogPrimitive/DialogPrimitive.js.map → esm/components/AlphaDialogPrimitive/DialogPrimitive.mjs.map} +1 -1
- package/dist/{cjs/alpha-components/TooltipPrimitive/TooltipPrimitive.js.map → esm/components/AlphaTooltipPrimitive/TooltipPrimitive.mjs.map} +1 -1
- package/dist/esm/components/FormHelperText/FormHelperText.mjs +2 -1
- package/dist/esm/components/FormHelperText/FormHelperText.mjs.map +1 -1
- package/dist/esm/components/FormLabel/FormLabel.mjs +3 -2
- package/dist/esm/components/FormLabel/FormLabel.mjs.map +1 -1
- package/dist/esm/components/Modal/Modal.mjs +1 -1
- package/dist/esm/components/Modal/Modal.mjs.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.mjs +1 -1
- package/dist/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/dist/esm/index.mjs +2 -0
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/packages/bezier-tokens/dist/esm/index.mjs.map +1 -1
- package/dist/esm/styles.css +1 -1
- package/dist/types/components/AlphaDialogPrimitive/DialogPrimitive.d.ts.map +1 -0
- package/dist/types/components/AlphaDialogPrimitive/DialogPrimitive.types.d.ts.map +1 -0
- package/dist/types/components/AlphaDialogPrimitive/index.d.ts +3 -0
- package/dist/types/components/AlphaDialogPrimitive/index.d.ts.map +1 -0
- package/dist/types/components/AlphaTooltipPrimitive/TooltipPrimitive.d.ts.map +1 -0
- package/dist/types/components/AlphaTooltipPrimitive/TooltipPrimitive.types.d.ts.map +1 -0
- package/dist/types/components/AlphaTooltipPrimitive/index.d.ts +3 -0
- package/dist/types/components/AlphaTooltipPrimitive/index.d.ts.map +1 -0
- package/dist/types/components/FormHelperText/FormHelperText.d.ts.map +1 -1
- package/dist/types/components/FormLabel/FormLabel.d.ts.map +1 -1
- package/dist/types/components/Modal/Modal.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +2 -14
- package/src/{alpha-components/DialogPrimitive/DialogPrimitive.mdx → components/AlphaDialogPrimitive/AlphaDialogPrimitive.mdx} +1 -1
- package/src/components/AlphaDialogPrimitive/index.ts +20 -0
- package/src/{alpha-components/TooltipPrimitive/TooltipPrimitive.mdx → components/AlphaTooltipPrimitive/AlphaTooltipPrimitive.mdx} +1 -1
- package/src/components/AlphaTooltipPrimitive/index.ts +16 -0
- package/src/components/FormHelperText/FormHelperText.tsx +6 -2
- package/src/components/FormLabel/FormLabel.tsx +4 -2
- package/src/components/Modal/Modal.tsx +31 -25
- package/src/components/Tooltip/Tooltip.tsx +19 -17
- package/src/index.ts +2 -0
- package/src/stories/alpha-color.mdx +107 -0
- package/src/stories/alpha-shadow.mdx +100 -0
- package/src/styles/_tokens.scss +2 -1
- package/dist/cjs/alpha-components/index.js +0 -22
- package/dist/cjs/alpha-components/index.js.map +0 -1
- package/dist/esm/alpha-components/DialogPrimitive/DialogPrimitive.mjs.map +0 -1
- package/dist/esm/alpha-components/TooltipPrimitive/TooltipPrimitive.mjs.map +0 -1
- package/dist/esm/alpha-components/index.mjs +0 -3
- package/dist/esm/alpha-components/index.mjs.map +0 -1
- package/dist/types/alpha-components/DialogPrimitive/DialogPrimitive.d.ts.map +0 -1
- package/dist/types/alpha-components/DialogPrimitive/DialogPrimitive.types.d.ts.map +0 -1
- package/dist/types/alpha-components/DialogPrimitive/index.d.ts +0 -3
- package/dist/types/alpha-components/DialogPrimitive/index.d.ts.map +0 -1
- package/dist/types/alpha-components/TooltipPrimitive/TooltipPrimitive.d.ts.map +0 -1
- package/dist/types/alpha-components/TooltipPrimitive/TooltipPrimitive.types.d.ts.map +0 -1
- package/dist/types/alpha-components/TooltipPrimitive/index.d.ts +0 -3
- package/dist/types/alpha-components/TooltipPrimitive/index.d.ts.map +0 -1
- package/dist/types/alpha-components/index.d.ts +0 -3
- package/dist/types/alpha-components/index.d.ts.map +0 -1
- package/src/alpha-components/DialogPrimitive/index.ts +0 -20
- package/src/alpha-components/TooltipPrimitive/index.ts +0 -16
- package/src/alpha-components/index.ts +0 -2
- /package/dist/cjs/{alpha-components/DialogPrimitive → components/AlphaDialogPrimitive}/DialogPrimitive.js +0 -0
- /package/dist/cjs/{alpha-components/TooltipPrimitive → components/AlphaTooltipPrimitive}/TooltipPrimitive.js +0 -0
- /package/dist/esm/{alpha-components/DialogPrimitive → components/AlphaDialogPrimitive}/DialogPrimitive.mjs +0 -0
- /package/dist/esm/{alpha-components/TooltipPrimitive → components/AlphaTooltipPrimitive}/TooltipPrimitive.mjs +0 -0
- /package/dist/types/{alpha-components/DialogPrimitive → components/AlphaDialogPrimitive}/DialogPrimitive.d.ts +0 -0
- /package/dist/types/{alpha-components/DialogPrimitive → components/AlphaDialogPrimitive}/DialogPrimitive.types.d.ts +0 -0
- /package/dist/types/{alpha-components/TooltipPrimitive → components/AlphaTooltipPrimitive}/TooltipPrimitive.d.ts +0 -0
- /package/dist/types/{alpha-components/TooltipPrimitive → components/AlphaTooltipPrimitive}/TooltipPrimitive.types.d.ts +0 -0
- /package/src/{alpha-components/DialogPrimitive/DialogPrimitive.stories.tsx → components/AlphaDialogPrimitive/AlphaDialogPrimitive.stories.tsx} +0 -0
- /package/src/{alpha-components/DialogPrimitive → components/AlphaDialogPrimitive}/DialogPrimitive.tsx +0 -0
- /package/src/{alpha-components/DialogPrimitive → components/AlphaDialogPrimitive}/DialogPrimitive.types.ts +0 -0
- /package/src/{alpha-components/TooltipPrimitive/TooltipPrimitive.stories.tsx → components/AlphaTooltipPrimitive/AlphaTooltipPrimitive.stories.tsx} +0 -0
- /package/src/{alpha-components/TooltipPrimitive → components/AlphaTooltipPrimitive}/TooltipPrimitive.tsx +0 -0
- /package/src/{alpha-components/TooltipPrimitive → components/AlphaTooltipPrimitive}/TooltipPrimitive.types.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogPrimitive.js","sources":["../../../../src/components/AlphaDialogPrimitive/DialogPrimitive.tsx"],"sourcesContent":["import {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n} from '@radix-ui/react-dialog'\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#root}\n */\nexport const DialogPrimitive = Dialog\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#close}\n */\nexport const DialogPrimitiveClose = DialogClose\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#content}\n */\nexport const DialogPrimitiveContent = DialogContent\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#description}\n */\nexport const DialogPrimitiveDescription = DialogDescription\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#overlay}\n */\nexport const DialogPrimitiveOverlay = DialogOverlay\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#portal}\n */\nexport const DialogPrimitivePortal = DialogPortal\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#title}\n */\nexport const DialogPrimitiveTitle = DialogTitle\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#trigger}\n */\nexport const DialogPrimitiveTrigger = DialogTrigger\n"],"names":["DialogPrimitive","Dialog","DialogPrimitiveClose","DialogClose","DialogPrimitiveContent","DialogContent","DialogPrimitiveDescription","DialogDescription","DialogPrimitiveOverlay","DialogOverlay","DialogPrimitivePortal","DialogPortal","DialogPrimitiveTitle","DialogTitle","DialogPrimitiveTrigger","DialogTrigger"],"mappings":";;;;AAWA;AACA;AACA;AACO,MAAMA,eAAe,GAAGC,aAAM;;AAErC;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGC,kBAAW;;AAE/C;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,0BAA0B,GAAGC,wBAAiB;;AAE3D;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,qBAAqB,GAAGC,mBAAY;;AAEjD;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGC,kBAAW;;AAE/C;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TooltipPrimitive.js","sources":["../../../../src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx"],"sourcesContent":["import {\n Tooltip,\n TooltipArrow,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from '@radix-ui/react-tooltip'\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#provider}\n */\nexport const TooltipPrimitiveProvider = TooltipProvider\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#root}\n */\nexport const TooltipPrimitive = Tooltip\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#trigger}\n */\nexport const TooltipPrimitiveTrigger = TooltipTrigger\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#portal}\n */\nexport const TooltipPrimitivePortal = TooltipPortal\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#content}\n */\nexport const TooltipPrimitiveContent = TooltipContent\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#arrow}\n */\nexport const TooltipPrimitiveArrow = TooltipArrow\n"],"names":["TooltipPrimitiveProvider","TooltipProvider","TooltipPrimitive","Tooltip","TooltipPrimitiveTrigger","TooltipTrigger","TooltipPrimitivePortal","TooltipPortal","TooltipPrimitiveContent","TooltipContent","TooltipPrimitiveArrow","TooltipArrow"],"mappings":";;;;AASA;AACA;AACA;AACO,MAAMA,wBAAwB,GAAGC,sBAAe;;AAEvD;AACA;AACA;AACO,MAAMC,gBAAgB,GAAGC,cAAO;;AAEvC;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGC,qBAAc;;AAErD;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGC,qBAAc;;AAErD;AACA;AACA;AACO,MAAMC,qBAAqB,GAAGC;;;;;;;;;"}
|
|
@@ -16,6 +16,7 @@ const BaseHelperText = /*#__PURE__*/React.forwardRef(function BaseHelperText(pro
|
|
|
16
16
|
type: type$1,
|
|
17
17
|
typo = '13',
|
|
18
18
|
children,
|
|
19
|
+
className,
|
|
19
20
|
...rest
|
|
20
21
|
} = props;
|
|
21
22
|
const contextValue = FormControl.useFormControlContext();
|
|
@@ -38,7 +39,7 @@ const BaseHelperText = /*#__PURE__*/React.forwardRef(function BaseHelperText(pro
|
|
|
38
39
|
return /*#__PURE__*/React.createElement(Text.Text, Object.assign({
|
|
39
40
|
ref: mergedRef,
|
|
40
41
|
as: "p",
|
|
41
|
-
className: index.default(FormHelperText_module.default.FormHelperText, formControlClassName),
|
|
42
|
+
className: index.default(FormHelperText_module.default.FormHelperText, formControlClassName, className),
|
|
42
43
|
typo: typo,
|
|
43
44
|
align: "left"
|
|
44
45
|
}, ownProps), children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormHelperText.js","sources":["../../../../src/components/FormHelperText/FormHelperText.tsx"],"sourcesContent":["import React, { 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\nexport const FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text'\nexport const 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, ...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(styles.FormHelperText
|
|
1
|
+
{"version":3,"file":"FormHelperText.js","sources":["../../../../src/components/FormHelperText/FormHelperText.tsx"],"sourcesContent":["import React, { 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\nexport const FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text'\nexport const 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","type","typo","children","className","rest","contextValue","useFormControlContext","getProps","getHelperTextProps","getErrorMessageProps","visible","ref","formControlClassName","ownProps","noop","undefined","mergedRef","useMergeRefs","isEmpty","React","createElement","Text","Object","assign","as","classNames","styles","FormHelperText","align","color","FormErrorMessage"],"mappings":"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"}
|
|
@@ -30,6 +30,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(props, forwar
|
|
|
30
30
|
help,
|
|
31
31
|
bold = true,
|
|
32
32
|
color = 'txt-black-darkest',
|
|
33
|
+
className,
|
|
33
34
|
children,
|
|
34
35
|
...rest
|
|
35
36
|
} = props;
|
|
@@ -58,7 +59,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(props, forwar
|
|
|
58
59
|
return /*#__PURE__*/React.createElement(Help.Help, null, help);
|
|
59
60
|
})();
|
|
60
61
|
const LabelComponent = /*#__PURE__*/React.createElement(Text.Text, Object.assign({
|
|
61
|
-
className: index.default(FormLabel_module.default.LabelText, !HelpComponent && formControlClassName),
|
|
62
|
+
className: index.default(FormLabel_module.default.LabelText, !HelpComponent && formControlClassName, className),
|
|
62
63
|
ref: forwardedRef,
|
|
63
64
|
as: "label",
|
|
64
65
|
align: "left",
|
|
@@ -72,7 +73,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(props, forwar
|
|
|
72
73
|
return !HelpComponent ? LabelComponent : /*#__PURE__*/React.createElement(LegacyHStack.LegacyHStack, {
|
|
73
74
|
align: "center",
|
|
74
75
|
spacing: 6,
|
|
75
|
-
className:
|
|
76
|
+
className: formControlClassName
|
|
76
77
|
}, /*#__PURE__*/React.createElement(LegacyStackItem.LegacyStackItem, {
|
|
77
78
|
shrink: true,
|
|
78
79
|
weight: 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Help } from '~/src/components/Help'\nimport { HELP_DISPLAY_NAME } from '~/src/components/Help/Help'\nimport { LegacyHStack, LegacyStackItem } from '~/src/components/LegacyStack'\nimport { Text } from '~/src/components/Text'\n\nimport { type FormLabelProps } from './FormLabel.types'\n\nimport styles from './FormLabel.module.scss'\n\nexport const FORM_LABEL_TEST_ID = 'bezier-form-label'\n\n/**\n * `FormLabel` is a component to show label.\n * `FormControl` component can handle its layout by `position` props.\n * @example\n * ```tsx\n * <FormControl position=\"top\">\n * <FormLabel>\n * Name\n * </FormLabel>\n * <TextField />\n * </FormControl>\n * ```\n */\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(\n function FormLabel(props, forwardedRef) {\n const {\n help,\n bold = true,\n color = 'txt-black-darkest',\n children,\n ...rest\n } = props\n\n const contextValue = useFormControlContext()\n const { className: formControlClassName, ...ownProps } =\n contextValue?.getLabelProps(rest) ?? {\n typo: '13',\n className: undefined,\n ...rest,\n }\n\n const HelpComponent = (() => {\n if (isEmpty(help)) {\n return null\n }\n\n if (React.isValidElement(help)) {\n // FIXME(@bora): string, JSXElementCostructor 타입에 displayName 속성이 존재하지 않음, 임시로 any 타입으로 설정\n const { displayName } = help?.type as any\n if (displayName === HELP_DISPLAY_NAME) {\n return help\n }\n }\n\n return <Help>{help}</Help>\n })()\n\n const LabelComponent = (\n <Text\n className={classNames(\n styles.LabelText,\n !HelpComponent && formControlClassName\n )}\n ref={forwardedRef}\n as=\"label\"\n align=\"left\"\n bold={bold}\n color={color}\n data-testid={FORM_LABEL_TEST_ID}\n {...ownProps}\n >\n {children}\n </Text>\n )\n\n if (isEmpty(children)) {\n return null\n }\n\n return !HelpComponent ? (\n LabelComponent\n ) : (\n <LegacyHStack\n align=\"center\"\n spacing={6}\n className={
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Help } from '~/src/components/Help'\nimport { HELP_DISPLAY_NAME } from '~/src/components/Help/Help'\nimport { LegacyHStack, LegacyStackItem } from '~/src/components/LegacyStack'\nimport { Text } from '~/src/components/Text'\n\nimport { type FormLabelProps } from './FormLabel.types'\n\nimport styles from './FormLabel.module.scss'\n\nexport const FORM_LABEL_TEST_ID = 'bezier-form-label'\n\n/**\n * `FormLabel` is a component to show label.\n * `FormControl` component can handle its layout by `position` props.\n * @example\n * ```tsx\n * <FormControl position=\"top\">\n * <FormLabel>\n * Name\n * </FormLabel>\n * <TextField />\n * </FormControl>\n * ```\n */\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(\n function FormLabel(props, forwardedRef) {\n const {\n help,\n bold = true,\n color = 'txt-black-darkest',\n className,\n children,\n ...rest\n } = props\n\n const contextValue = useFormControlContext()\n const { className: formControlClassName, ...ownProps } =\n contextValue?.getLabelProps(rest) ?? {\n typo: '13',\n className: undefined,\n ...rest,\n }\n\n const HelpComponent = (() => {\n if (isEmpty(help)) {\n return null\n }\n\n if (React.isValidElement(help)) {\n // FIXME(@bora): string, JSXElementCostructor 타입에 displayName 속성이 존재하지 않음, 임시로 any 타입으로 설정\n const { displayName } = help?.type as any\n if (displayName === HELP_DISPLAY_NAME) {\n return help\n }\n }\n\n return <Help>{help}</Help>\n })()\n\n const LabelComponent = (\n <Text\n className={classNames(\n styles.LabelText,\n !HelpComponent && formControlClassName,\n className\n )}\n ref={forwardedRef}\n as=\"label\"\n align=\"left\"\n bold={bold}\n color={color}\n data-testid={FORM_LABEL_TEST_ID}\n {...ownProps}\n >\n {children}\n </Text>\n )\n\n if (isEmpty(children)) {\n return null\n }\n\n return !HelpComponent ? (\n LabelComponent\n ) : (\n <LegacyHStack\n align=\"center\"\n spacing={6}\n className={formControlClassName}\n >\n <LegacyStackItem\n shrink\n weight={1}\n >\n {LabelComponent}\n </LegacyStackItem>\n <LegacyStackItem>{HelpComponent}</LegacyStackItem>\n </LegacyHStack>\n )\n }\n)\n"],"names":["FORM_LABEL_TEST_ID","FormLabel","forwardRef","props","forwardedRef","help","bold","color","className","children","rest","contextValue","useFormControlContext","formControlClassName","ownProps","getLabelProps","typo","undefined","HelpComponent","isEmpty","React","isValidElement","displayName","type","HELP_DISPLAY_NAME","createElement","Help","LabelComponent","Text","Object","assign","classNames","styles","LabelText","ref","as","align","LegacyHStack","spacing","LegacyStackItem","shrink","weight"],"mappings":";;;;;;;;;;;;AAgBO,MAAMA,kBAAkB,GAAG,oBAAmB;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,SAAS,gBAAGC,gBAAU,CACjC,SAASD,SAASA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACtC,MAAM;IACJC,IAAI;AACJC,IAAAA,IAAI,GAAG,IAAI;AACXC,IAAAA,KAAK,GAAG,mBAAmB;IAC3BC,SAAS;IACTC,QAAQ;IACR,GAAGC,IAAAA;AACL,GAAC,GAAGP,KAAK,CAAA;AAET,EAAA,MAAMQ,YAAY,GAAGC,iCAAqB,EAAE,CAAA;EAC5C,MAAM;AAAEJ,IAAAA,SAAS,EAAEK,oBAAoB;IAAE,GAAGC,QAAAA;AAAS,GAAC,GACpDH,YAAY,EAAEI,aAAa,CAACL,IAAI,CAAC,IAAI;AACnCM,IAAAA,IAAI,EAAE,IAAI;AACVR,IAAAA,SAAS,EAAES,SAAS;IACpB,GAAGP,IAAAA;GACJ,CAAA;EAEH,MAAMQ,aAAa,GAAG,CAAC,MAAM;AAC3B,IAAA,IAAIC,YAAO,CAACd,IAAI,CAAC,EAAE;AACjB,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AAEA,IAAA,kBAAIe,KAAK,CAACC,cAAc,CAAChB,IAAI,CAAC,EAAE;AAC9B;MACA,MAAM;AAAEiB,QAAAA,WAAAA;OAAa,GAAGjB,IAAI,EAAEkB,IAAW,CAAA;MACzC,IAAID,WAAW,KAAKE,sBAAiB,EAAE;AACrC,QAAA,OAAOnB,IAAI,CAAA;AACb,OAAA;AACF,KAAA;AAEA,IAAA,oBAAOe,KAAA,CAAAK,aAAA,CAACC,SAAI,EAAA,IAAA,EAAErB,IAAW,CAAC,CAAA;AAC5B,GAAC,GAAG,CAAA;EAEJ,MAAMsB,cAAc,gBAClBP,KAAA,CAAAK,aAAA,CAACG,SAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHtB,IAAAA,SAAS,EAAEuB,aAAU,CACnBC,wBAAM,CAACC,SAAS,EAChB,CAACf,aAAa,IAAIL,oBAAoB,EACtCL,SACF,CAAE;AACF0B,IAAAA,GAAG,EAAE9B,YAAa;AAClB+B,IAAAA,EAAE,EAAC,OAAO;AACVC,IAAAA,KAAK,EAAC,MAAM;AACZ9B,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;IACb,aAAaP,EAAAA,kBAAAA;GACTc,EAAAA,QAAQ,CAEXL,EAAAA,QACG,CACP,CAAA;AAED,EAAA,IAAIU,YAAO,CAACV,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EAEA,OAAO,CAACS,aAAa,GACnBS,cAAc,gBAEdP,KAAA,CAAAK,aAAA,CAACY,yBAAY,EAAA;AACXD,IAAAA,KAAK,EAAC,QAAQ;AACdE,IAAAA,OAAO,EAAE,CAAE;AACX9B,IAAAA,SAAS,EAAEK,oBAAAA;AAAqB,GAAA,eAEhCO,KAAA,CAAAK,aAAA,CAACc,+BAAe,EAAA;IACdC,MAAM,EAAA,IAAA;AACNC,IAAAA,MAAM,EAAE,CAAA;GAEPd,EAAAA,cACc,CAAC,eAClBP,KAAA,CAAAK,aAAA,CAACc,+BAAe,EAAA,IAAA,EAAErB,aAA+B,CACrC,CACf,CAAA;AACH,CACF;;;;;"}
|
|
@@ -9,7 +9,7 @@ var react = require('../../utils/react.js');
|
|
|
9
9
|
var style = require('../../utils/style.js');
|
|
10
10
|
var type = require('../../utils/type.js');
|
|
11
11
|
var Modal_module = require('./Modal.module.scss.js');
|
|
12
|
-
var DialogPrimitive = require('
|
|
12
|
+
var DialogPrimitive = require('../AlphaDialogPrimitive/DialogPrimitive.js');
|
|
13
13
|
var WindowProvider = require('../WindowProvider/WindowProvider.js');
|
|
14
14
|
var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
|
|
15
15
|
var Button = require('../Button/Button.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react'\n\nimport { CancelIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { getZIndexClassName } from '~/src/types/props-helpers'\nimport { createContext } from '~/src/utils/react'\nimport { cssDimension } from '~/src/utils/style'\nimport { isNil, isNumber } from '~/src/utils/type'\n\nimport {\n DialogPrimitive,\n DialogPrimitiveClose,\n DialogPrimitiveContent,\n DialogPrimitiveDescription,\n DialogPrimitiveOverlay,\n DialogPrimitivePortal,\n type DialogPrimitiveProps,\n DialogPrimitiveTitle,\n DialogPrimitiveTrigger,\n} from '~/src/alpha-components/DialogPrimitive'\nimport { Button } from '~/src/components/Button'\nimport { Text } from '~/src/components/Text'\nimport { ThemeProvider, useThemeName } from '~/src/components/ThemeProvider'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\nimport { useRootElement } from '~/src/components/WindowProvider'\n\nimport {\n type ModalBodyProps,\n type ModalCloseProps,\n type ModalContentProps,\n type ModalContentPropsContextValue,\n type ModalFooterProps,\n type ModalHeaderProps,\n type ModalProps,\n type ModalTitleSize,\n type ModalTriggerProps,\n} from './Modal.types'\n\nimport styles from './Modal.module.scss'\n\nconst [ModalContainerContextProvider, useModalContainerContext] = createContext<\n HTMLElement | undefined\n>(undefined)\n\nexport { useModalContainerContext }\n\nconst [ModalContentPropsContextProvider, useModalContentPropsContext] =\n createContext<ModalContentPropsContextValue>({\n showCloseIcon: false,\n })\n\n/**\n * `Modal` is a dialog that appears on top of the page.\n *\n * `Modal` is a context of the Modal-related components. It doesn't render any DOM node.\n * It controls the visibility of the entire component and provides\n * handlers and accessibility properties to Modal-related components.\n * @example\n *\n * ```tsx\n * // Anatomy of the Modal\n * <Modal>\n * <ModalTrigger />\n * <ModalContent>\n * <ModalHeader />\n * <ModalBody />\n * <ModalFooter />\n * </ModalContent>\n * </Modal>\n * ```\n */\nexport function Modal({\n children,\n show,\n defaultShow,\n onShow,\n onHide,\n}: ModalProps) {\n const onOpenChange = useCallback<\n NonNullable<DialogPrimitiveProps['onOpenChange']>\n >(\n (open) => {\n const callback = open ? onShow : onHide\n callback?.()\n },\n [onShow, onHide]\n )\n\n return (\n <DialogPrimitive\n open={show}\n defaultOpen={defaultShow}\n onOpenChange={onOpenChange}\n >\n {children}\n </DialogPrimitive>\n )\n}\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n function ModalContent(\n {\n children,\n style,\n className,\n container: givenContainer,\n showCloseIcon = false,\n preventHideOnOutsideClick = false,\n width = 'max-content',\n height = 'fit-content',\n zIndex = 'modal',\n collisionPadding = { top: 40, bottom: 40 },\n ...rest\n },\n forwardedRef\n ) {\n const rootElement = useRootElement()\n const container = givenContainer ?? rootElement\n const [contentContainer, setContentContainer] = useState<HTMLElement>()\n\n const contentRef = useMergeRefs(\n forwardedRef,\n useCallback((node: HTMLElement | null) => {\n setContentContainer(node ?? undefined)\n }, [])\n )\n\n const overlayStyle = (() => {\n const padding = (() => {\n if (isNumber(collisionPadding)) {\n return `${collisionPadding}px`\n }\n\n const { top, right, bottom, left } = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...collisionPadding,\n }\n\n return `${top}px ${right}px ${bottom}px ${left}px`\n })()\n\n return {\n '--b-modal-collision-padding': padding,\n } as React.CSSProperties\n })()\n\n const propsContextValue = useMemo(\n (): ModalContentPropsContextValue => ({\n showCloseIcon,\n }),\n [showCloseIcon]\n )\n\n return (\n <DialogPrimitivePortal container={container}>\n <ThemeProvider themeName={useThemeName()}>\n <DialogPrimitiveOverlay\n style={overlayStyle}\n className={classNames(\n styles.ModalOverlay,\n getZIndexClassName(zIndex)\n )}\n >\n <DialogPrimitiveContent\n asChild\n onPointerDownOutside={(e) => {\n if (preventHideOnOutsideClick) {\n e.preventDefault()\n }\n }}\n onInteractOutside={(e) => {\n if (preventHideOnOutsideClick) {\n e.preventDefault()\n }\n }}\n >\n <div\n aria-modal=\"true\"\n ref={contentRef}\n style={\n {\n '--b-modal-width': cssDimension(width),\n '--b-modal-height': cssDimension(height),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(styles.ModalContent, className)}\n {...rest}\n >\n <section className={styles.ModalSection}>\n <ModalContainerContextProvider value={contentContainer}>\n <ModalContentPropsContextProvider value={propsContextValue}>\n {children}\n </ModalContentPropsContextProvider>\n </ModalContainerContextProvider>\n\n {/* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */}\n {showCloseIcon && (\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n <ModalClose>\n <Button\n className={styles.CloseIconButton}\n size=\"m\"\n leftContent={CancelIcon}\n colorVariant=\"monochrome-dark\"\n styleVariant=\"tertiary\"\n />\n </ModalClose>\n )}\n </section>\n </div>\n </DialogPrimitiveContent>\n </DialogPrimitiveOverlay>\n </ThemeProvider>\n </DialogPrimitivePortal>\n )\n }\n)\n\nfunction getTitleTypo(size: ModalTitleSize) {\n return (\n {\n l: '24',\n m: '16',\n } as const\n )[size]\n}\n\nfunction ModalHeaderTitle({\n children,\n size,\n subtitle,\n}: React.PropsWithChildren<\n Pick<ModalHeaderProps, 'subtitle'> & {\n size: NonNullable<ModalHeaderProps['titleSize']>\n }\n>) {\n const Title = (\n <Text\n className={styles.Title}\n as=\"h2\"\n typo={getTitleTypo(size)}\n bold\n color=\"txt-black-darkest\"\n >\n {children}\n </Text>\n )\n\n return (\n <DialogPrimitiveTitle asChild>\n {!isNil(subtitle) ? (\n <hgroup\n className={styles.HeadingGroup}\n role=\"group\"\n aria-roledescription=\"Heading group\"\n >\n {Title}\n\n <Text\n aria-roledescription=\"subtitle\"\n as=\"p\"\n bold\n color=\"txt-black-dark\"\n typo=\"13\"\n >\n {subtitle}\n </Text>\n </hgroup>\n ) : (\n Title\n )}\n </DialogPrimitiveTitle>\n )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef<HTMLElement, ModalHeaderProps>(\n function ModalHeader(\n {\n className,\n title,\n subtitle,\n description,\n titleSize = 'l',\n hidden = false,\n ...rest\n },\n forwardedRef\n ) {\n const { showCloseIcon } = useModalContentPropsContext()\n const hasTitleArea = title || showCloseIcon\n const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n return (\n <Hidden>\n <header\n ref={forwardedRef}\n className={classNames(\n styles.ModalHeader,\n hidden && styles.hidden,\n className\n )}\n {...rest}\n >\n {hasTitleArea && (\n <div className={styles.TitleContainer}>\n {title && (\n <ModalHeaderTitle\n size={titleSize}\n subtitle={subtitle}\n >\n {title}\n </ModalHeaderTitle>\n )}\n\n {showCloseIcon && (\n <Button\n className={styles.CloseIconButtonSpacer}\n as=\"div\"\n size=\"m\"\n />\n )}\n </div>\n )}\n\n {description && (\n <DialogPrimitiveDescription asChild>\n <Text\n as=\"p\"\n color=\"txt-black-darkest\"\n typo=\"15\"\n >\n {description}\n </Text>\n </DialogPrimitiveDescription>\n )}\n </header>\n </Hidden>\n )\n }\n)\n\n/**\n * `ModalBody` is a simple wrapper of the main modal content.\n */\nexport const ModalBody = forwardRef(function ModalBody(\n { children, className, ...rest }: ModalBodyProps,\n forwardedRef: React.Ref<HTMLDivElement>\n) {\n return (\n <div\n ref={forwardedRef}\n className={classNames(styles.ModalBody, className)}\n {...rest}\n >\n {children}\n </div>\n )\n})\n\n/**\n * `ModalFooter` is a simple wrapper of the footer of the modal content.\n * Usually, it contains the action buttons of the modal.\n */\nexport const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(\n function ModalFooter(\n { className, leftContent, rightContent, ...rest },\n forwardedRef\n ) {\n return (\n <footer\n ref={forwardedRef}\n className={classNames(styles.ModalFooter, className)}\n {...rest}\n >\n {leftContent && (\n <div className={styles.FooterLeftContent}>{leftContent}</div>\n )}\n\n {rightContent && (\n <div className={styles.FooterRightContent}>{rightContent}</div>\n )}\n </footer>\n )\n }\n)\n\n/**\n * `ModalTrigger` is a button that opens the modal. **It doesn't render any DOM node.**\n * It passes the handler that opens the modal and accessibility properties to the children.\n *\n * It **must** be placed outside of the `ModalContent`.\n */\nexport function ModalTrigger({ children }: ModalTriggerProps) {\n return <DialogPrimitiveTrigger asChild>{children}</DialogPrimitiveTrigger>\n}\n\n/**\n * `ModalClose` is a button that closes the modal. **It doesn't render any DOM node.**\n * It passes the handler that closes the modal to the children.\n */\nexport function ModalClose({ children }: ModalCloseProps) {\n return <DialogPrimitiveClose asChild>{children}</DialogPrimitiveClose>\n}\n"],"names":["ModalContainerContextProvider","useModalContainerContext","createContext","undefined","ModalContentPropsContextProvider","useModalContentPropsContext","showCloseIcon","Modal","children","show","defaultShow","onShow","onHide","onOpenChange","useCallback","open","callback","React","createElement","DialogPrimitive","defaultOpen","ModalContent","forwardRef","style","className","container","givenContainer","preventHideOnOutsideClick","width","height","zIndex","collisionPadding","top","bottom","rest","forwardedRef","rootElement","useRootElement","contentContainer","setContentContainer","useState","contentRef","useMergeRefs","node","overlayStyle","padding","isNumber","right","left","propsContextValue","useMemo","DialogPrimitivePortal","ThemeProvider","themeName","useThemeName","DialogPrimitiveOverlay","classNames","styles","ModalOverlay","getZIndexClassName","DialogPrimitiveContent","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","Object","assign","ref","cssDimension","ModalSection","value","ModalClose","Button","CloseIconButton","size","leftContent","CancelIcon","colorVariant","styleVariant","getTitleTypo","l","m","ModalHeaderTitle","subtitle","Title","Text","as","typo","bold","color","DialogPrimitiveTitle","isNil","HeadingGroup","role","ModalHeader","title","description","titleSize","hidden","hasTitleArea","Hidden","VisuallyHidden","Fragment","TitleContainer","CloseIconButtonSpacer","DialogPrimitiveDescription","ModalBody","ModalFooter","rightContent","FooterLeftContent","FooterRightContent","ModalTrigger","DialogPrimitiveTrigger","DialogPrimitiveClose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react'\n\nimport { CancelIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { getZIndexClassName } from '~/src/types/props-helpers'\nimport { createContext } from '~/src/utils/react'\nimport { cssDimension } from '~/src/utils/style'\nimport { isNil, isNumber } from '~/src/utils/type'\n\nimport {\n AlphaDialogPrimitive,\n AlphaDialogPrimitiveClose,\n AlphaDialogPrimitiveContent,\n AlphaDialogPrimitiveDescription,\n AlphaDialogPrimitiveOverlay,\n AlphaDialogPrimitivePortal,\n type AlphaDialogPrimitiveProps,\n AlphaDialogPrimitiveTitle,\n AlphaDialogPrimitiveTrigger,\n} from '~/src/components/AlphaDialogPrimitive'\nimport { Button } from '~/src/components/Button'\nimport { Text } from '~/src/components/Text'\nimport { ThemeProvider, useThemeName } from '~/src/components/ThemeProvider'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\nimport { useRootElement } from '~/src/components/WindowProvider'\n\nimport {\n type ModalBodyProps,\n type ModalCloseProps,\n type ModalContentProps,\n type ModalContentPropsContextValue,\n type ModalFooterProps,\n type ModalHeaderProps,\n type ModalProps,\n type ModalTitleSize,\n type ModalTriggerProps,\n} from './Modal.types'\n\nimport styles from './Modal.module.scss'\n\nconst [ModalContainerContextProvider, useModalContainerContext] = createContext<\n HTMLElement | undefined\n>(undefined)\n\nexport { useModalContainerContext }\n\nconst [ModalContentPropsContextProvider, useModalContentPropsContext] =\n createContext<ModalContentPropsContextValue>({\n showCloseIcon: false,\n })\n\n/**\n * `Modal` is a dialog that appears on top of the page.\n *\n * `Modal` is a context of the Modal-related components. It doesn't render any DOM node.\n * It controls the visibility of the entire component and provides\n * handlers and accessibility properties to Modal-related components.\n * @example\n *\n * ```tsx\n * // Anatomy of the Modal\n * <Modal>\n * <ModalTrigger />\n * <ModalContent>\n * <ModalHeader />\n * <ModalBody />\n * <ModalFooter />\n * </ModalContent>\n * </Modal>\n * ```\n */\nexport function Modal({\n children,\n show,\n defaultShow,\n onShow,\n onHide,\n}: ModalProps) {\n const onOpenChange = useCallback<\n NonNullable<AlphaDialogPrimitiveProps['onOpenChange']>\n >(\n (open) => {\n const callback = open ? onShow : onHide\n callback?.()\n },\n [onShow, onHide]\n )\n\n return (\n <AlphaDialogPrimitive\n open={show}\n defaultOpen={defaultShow}\n onOpenChange={onOpenChange}\n >\n {children}\n </AlphaDialogPrimitive>\n )\n}\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n function ModalContent(\n {\n children,\n style,\n className,\n container: givenContainer,\n showCloseIcon = false,\n preventHideOnOutsideClick = false,\n width = 'max-content',\n height = 'fit-content',\n zIndex = 'modal',\n collisionPadding = { top: 40, bottom: 40 },\n ...rest\n },\n forwardedRef\n ) {\n const rootElement = useRootElement()\n const container = givenContainer ?? rootElement\n const [contentContainer, setContentContainer] = useState<HTMLElement>()\n\n const contentRef = useMergeRefs(\n forwardedRef,\n useCallback((node: HTMLElement | null) => {\n setContentContainer(node ?? undefined)\n }, [])\n )\n\n const overlayStyle = (() => {\n const padding = (() => {\n if (isNumber(collisionPadding)) {\n return `${collisionPadding}px`\n }\n\n const { top, right, bottom, left } = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...collisionPadding,\n }\n\n return `${top}px ${right}px ${bottom}px ${left}px`\n })()\n\n return {\n '--b-modal-collision-padding': padding,\n } as React.CSSProperties\n })()\n\n const propsContextValue = useMemo(\n (): ModalContentPropsContextValue => ({\n showCloseIcon,\n }),\n [showCloseIcon]\n )\n\n return (\n <AlphaDialogPrimitivePortal container={container}>\n <ThemeProvider themeName={useThemeName()}>\n <AlphaDialogPrimitiveOverlay\n style={overlayStyle}\n className={classNames(\n styles.ModalOverlay,\n getZIndexClassName(zIndex)\n )}\n >\n <AlphaDialogPrimitiveContent\n asChild\n onPointerDownOutside={(e) => {\n if (preventHideOnOutsideClick) {\n e.preventDefault()\n }\n }}\n onInteractOutside={(e) => {\n if (preventHideOnOutsideClick) {\n e.preventDefault()\n }\n }}\n >\n <div\n aria-modal=\"true\"\n ref={contentRef}\n style={\n {\n '--b-modal-width': cssDimension(width),\n '--b-modal-height': cssDimension(height),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(styles.ModalContent, className)}\n {...rest}\n >\n <section className={styles.ModalSection}>\n <ModalContainerContextProvider value={contentContainer}>\n <ModalContentPropsContextProvider value={propsContextValue}>\n {children}\n </ModalContentPropsContextProvider>\n </ModalContainerContextProvider>\n\n {/* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */}\n {showCloseIcon && (\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n <ModalClose>\n <Button\n className={styles.CloseIconButton}\n size=\"m\"\n leftContent={CancelIcon}\n colorVariant=\"monochrome-dark\"\n styleVariant=\"tertiary\"\n />\n </ModalClose>\n )}\n </section>\n </div>\n </AlphaDialogPrimitiveContent>\n </AlphaDialogPrimitiveOverlay>\n </ThemeProvider>\n </AlphaDialogPrimitivePortal>\n )\n }\n)\n\nfunction getTitleTypo(size: ModalTitleSize) {\n return (\n {\n l: '24',\n m: '16',\n } as const\n )[size]\n}\n\nfunction ModalHeaderTitle({\n children,\n size,\n subtitle,\n}: React.PropsWithChildren<\n Pick<ModalHeaderProps, 'subtitle'> & {\n size: NonNullable<ModalHeaderProps['titleSize']>\n }\n>) {\n const Title = (\n <Text\n className={styles.Title}\n as=\"h2\"\n typo={getTitleTypo(size)}\n bold\n color=\"txt-black-darkest\"\n >\n {children}\n </Text>\n )\n\n return (\n <AlphaDialogPrimitiveTitle asChild>\n {!isNil(subtitle) ? (\n <hgroup\n className={styles.HeadingGroup}\n role=\"group\"\n aria-roledescription=\"Heading group\"\n >\n {Title}\n\n <Text\n aria-roledescription=\"subtitle\"\n as=\"p\"\n bold\n color=\"txt-black-dark\"\n typo=\"13\"\n >\n {subtitle}\n </Text>\n </hgroup>\n ) : (\n Title\n )}\n </AlphaDialogPrimitiveTitle>\n )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef<HTMLElement, ModalHeaderProps>(\n function ModalHeader(\n {\n className,\n title,\n subtitle,\n description,\n titleSize = 'l',\n hidden = false,\n ...rest\n },\n forwardedRef\n ) {\n const { showCloseIcon } = useModalContentPropsContext()\n const hasTitleArea = title || showCloseIcon\n const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n return (\n <Hidden>\n <header\n ref={forwardedRef}\n className={classNames(\n styles.ModalHeader,\n hidden && styles.hidden,\n className\n )}\n {...rest}\n >\n {hasTitleArea && (\n <div className={styles.TitleContainer}>\n {title && (\n <ModalHeaderTitle\n size={titleSize}\n subtitle={subtitle}\n >\n {title}\n </ModalHeaderTitle>\n )}\n\n {showCloseIcon && (\n <Button\n className={styles.CloseIconButtonSpacer}\n as=\"div\"\n size=\"m\"\n />\n )}\n </div>\n )}\n\n {description && (\n <AlphaDialogPrimitiveDescription asChild>\n <Text\n as=\"p\"\n color=\"txt-black-darkest\"\n typo=\"15\"\n >\n {description}\n </Text>\n </AlphaDialogPrimitiveDescription>\n )}\n </header>\n </Hidden>\n )\n }\n)\n\n/**\n * `ModalBody` is a simple wrapper of the main modal content.\n */\nexport const ModalBody = forwardRef(function ModalBody(\n { children, className, ...rest }: ModalBodyProps,\n forwardedRef: React.Ref<HTMLDivElement>\n) {\n return (\n <div\n ref={forwardedRef}\n className={classNames(styles.ModalBody, className)}\n {...rest}\n >\n {children}\n </div>\n )\n})\n\n/**\n * `ModalFooter` is a simple wrapper of the footer of the modal content.\n * Usually, it contains the action buttons of the modal.\n */\nexport const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(\n function ModalFooter(\n { className, leftContent, rightContent, ...rest },\n forwardedRef\n ) {\n return (\n <footer\n ref={forwardedRef}\n className={classNames(styles.ModalFooter, className)}\n {...rest}\n >\n {leftContent && (\n <div className={styles.FooterLeftContent}>{leftContent}</div>\n )}\n\n {rightContent && (\n <div className={styles.FooterRightContent}>{rightContent}</div>\n )}\n </footer>\n )\n }\n)\n\n/**\n * `ModalTrigger` is a button that opens the modal. **It doesn't render any DOM node.**\n * It passes the handler that opens the modal and accessibility properties to the children.\n *\n * It **must** be placed outside of the `ModalContent`.\n */\nexport function ModalTrigger({ children }: ModalTriggerProps) {\n return (\n <AlphaDialogPrimitiveTrigger asChild>\n {children}\n </AlphaDialogPrimitiveTrigger>\n )\n}\n\n/**\n * `ModalClose` is a button that closes the modal. **It doesn't render any DOM node.**\n * It passes the handler that closes the modal to the children.\n */\nexport function ModalClose({ children }: ModalCloseProps) {\n return (\n <AlphaDialogPrimitiveClose asChild>{children}</AlphaDialogPrimitiveClose>\n )\n}\n"],"names":["ModalContainerContextProvider","useModalContainerContext","createContext","undefined","ModalContentPropsContextProvider","useModalContentPropsContext","showCloseIcon","Modal","children","show","defaultShow","onShow","onHide","onOpenChange","useCallback","open","callback","React","createElement","AlphaDialogPrimitive","defaultOpen","ModalContent","forwardRef","style","className","container","givenContainer","preventHideOnOutsideClick","width","height","zIndex","collisionPadding","top","bottom","rest","forwardedRef","rootElement","useRootElement","contentContainer","setContentContainer","useState","contentRef","useMergeRefs","node","overlayStyle","padding","isNumber","right","left","propsContextValue","useMemo","AlphaDialogPrimitivePortal","ThemeProvider","themeName","useThemeName","AlphaDialogPrimitiveOverlay","classNames","styles","ModalOverlay","getZIndexClassName","AlphaDialogPrimitiveContent","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","Object","assign","ref","cssDimension","ModalSection","value","ModalClose","Button","CloseIconButton","size","leftContent","CancelIcon","colorVariant","styleVariant","getTitleTypo","l","m","ModalHeaderTitle","subtitle","Title","Text","as","typo","bold","color","AlphaDialogPrimitiveTitle","isNil","HeadingGroup","role","ModalHeader","title","description","titleSize","hidden","hasTitleArea","Hidden","VisuallyHidden","Fragment","TitleContainer","CloseIconButtonSpacer","AlphaDialogPrimitiveDescription","ModalBody","ModalFooter","rightContent","FooterLeftContent","FooterRightContent","ModalTrigger","AlphaDialogPrimitiveTrigger","AlphaDialogPrimitiveClose"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var type = require('../../utils/type.js');
|
|
5
5
|
var Tooltip_module = require('./Tooltip.module.scss.js');
|
|
6
6
|
var WindowProvider = require('../WindowProvider/WindowProvider.js');
|
|
7
|
-
var TooltipPrimitive = require('
|
|
7
|
+
var TooltipPrimitive = require('../AlphaTooltipPrimitive/TooltipPrimitive.js');
|
|
8
8
|
var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
|
|
9
9
|
var Stack = require('../Stack/Stack.js');
|
|
10
10
|
var Text = require('../Text/Text.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n TooltipPrimitive,\n TooltipPrimitiveContent,\n type TooltipPrimitiveContentProps,\n TooltipPrimitivePortal,\n TooltipPrimitiveProvider,\n TooltipPrimitiveTrigger,\n} from '~/src/alpha-components/TooltipPrimitive'\nimport { Icon } from '~/src/components/Icon'\nimport { HStack } from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\nimport { InvertedThemeProvider } from '~/src/components/ThemeProvider'\nimport { useRootElement } from '~/src/components/WindowProvider'\n\nimport { type TooltipPosition, type TooltipProps } from './Tooltip.types'\n\nimport styles from './Tooltip.module.scss'\n\nfunction getSideAndAlign(\n placement: TooltipPosition\n): Pick<TooltipPrimitiveContentProps, 'side' | 'align'> {\n switch (placement) {\n case 'top-center':\n return {\n side: 'top',\n align: 'center',\n }\n case 'top-left':\n return {\n side: 'top',\n align: 'start',\n }\n case 'top-right':\n return {\n side: 'top',\n align: 'end',\n }\n case 'right-center':\n return {\n side: 'right',\n align: 'center',\n }\n case 'right-top':\n return {\n side: 'right',\n align: 'start',\n }\n case 'right-bottom':\n return {\n side: 'right',\n align: 'end',\n }\n case 'bottom-center':\n return {\n side: 'bottom',\n align: 'center',\n }\n case 'bottom-left':\n return {\n side: 'bottom',\n align: 'start',\n }\n case 'bottom-right':\n return {\n side: 'bottom',\n align: 'end',\n }\n case 'left-center':\n return {\n side: 'left',\n align: 'center',\n }\n case 'left-top':\n return {\n side: 'left',\n align: 'start',\n }\n case 'left-bottom':\n return {\n side: 'left',\n align: 'end',\n }\n default:\n // NOTE: should not reach here\n return {\n side: undefined,\n align: undefined,\n }\n }\n}\n\n/**\n * `Tooltip` is a component that shows additional information when the mouse hovers or the keyboard is focused.\n *\n * Components that pass to children **must spread props and forward ref.**\n * @example\n * ```tsx\n * // Your component must spread props and forward ref.\n * const Button = React.forwardRef((props, forwardedRef) => (<button {...props} ref={forwardedRef} />))\n * // Then, you can use `Tooltip` with your component.\n * <Tooltip content=\"Ta-da!\">\n * <Button>Hover me</Button>\n * </Tooltip>\n * ```\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(\n {\n children,\n defaultShow,\n onShow: onShowProp,\n onHide: onHideProp,\n disabled,\n title,\n content,\n description,\n icon,\n placement = 'bottom-center',\n offset = 4,\n container: containerProp,\n keepInContainer = true,\n allowHover = false,\n delayShow = 0,\n delayHide = 0,\n ...rest\n },\n forwardedRef\n ) {\n const [show, setShow] = useState<boolean>(defaultShow ?? false)\n const timeoutRef = useRef<NodeJS.Timeout>()\n\n const rootElement = useRootElement()\n const container = containerProp ?? rootElement\n\n const shouldBeHidden = useMemo(\n () => disabled || isEmpty(content),\n [disabled, content]\n )\n\n const onShow = useCallback(() => {\n setShow(true)\n onShowProp?.()\n }, [onShowProp])\n\n const onHide = useCallback(() => {\n setShow(false)\n onHideProp?.()\n }, [onHideProp])\n\n useEffect(\n function forceHide() {\n if (shouldBeHidden) {\n onHide()\n }\n },\n [shouldBeHidden, onHide]\n )\n\n useEffect(\n function cleanUpTimeout() {\n return function cleanUp() {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n }\n },\n [shouldBeHidden]\n )\n\n const onOpenChange = useCallback(\n (open: boolean) => {\n if (shouldBeHidden) {\n return\n }\n\n if (open) {\n onShow()\n return\n }\n\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n timeoutRef.current = undefined\n }\n\n if (delayHide > 0) {\n timeoutRef.current = setTimeout(() => {\n onHide()\n }, delayHide)\n return\n }\n\n onHide()\n },\n [shouldBeHidden, delayHide, onShow, onHide]\n )\n\n return (\n <TooltipPrimitiveProvider skipDelayDuration={0}>\n <TooltipPrimitive\n open={show}\n defaultOpen={defaultShow}\n delayDuration={delayShow}\n disableHoverableContent={!allowHover}\n onOpenChange={onOpenChange}\n >\n <TooltipPrimitiveTrigger asChild>{children}</TooltipPrimitiveTrigger>\n\n <TooltipPrimitivePortal container={container}>\n <InvertedThemeProvider>\n <TooltipPrimitiveContent\n {...rest}\n {...getSideAndAlign(placement)}\n asChild\n ref={forwardedRef}\n sideOffset={offset}\n avoidCollisions={keepInContainer}\n collisionPadding={8}\n hideWhenDetached\n >\n <HStack\n spacing={4}\n className={styles.Tooltip}\n >\n <div className={styles.TooltipContainer}>\n {title && (\n <Text\n typo=\"13\"\n bold\n marginBottom={2}\n color=\"txt-black-darkest\"\n >\n {title}\n </Text>\n )}\n\n <Text\n color=\"txt-black-darkest\"\n className={styles.TooltipContent}\n truncated={20}\n typo=\"13\"\n >\n {content}\n </Text>\n\n {description && (\n <Text\n typo=\"12\"\n color=\"txt-black-dark\"\n >\n {description}\n </Text>\n )}\n </div>\n\n {icon && (\n <Icon\n size=\"xs\"\n color=\"txt-black-darkest\"\n source={icon}\n className={styles.Icon}\n />\n )}\n </HStack>\n </TooltipPrimitiveContent>\n </InvertedThemeProvider>\n </TooltipPrimitivePortal>\n </TooltipPrimitive>\n </TooltipPrimitiveProvider>\n )\n }\n)\n"],"names":["getSideAndAlign","placement","side","align","undefined","Tooltip","forwardRef","children","defaultShow","onShow","onShowProp","onHide","onHideProp","disabled","title","content","description","icon","offset","container","containerProp","keepInContainer","allowHover","delayShow","delayHide","rest","forwardedRef","show","setShow","useState","timeoutRef","useRef","rootElement","useRootElement","shouldBeHidden","useMemo","isEmpty","useCallback","useEffect","forceHide","cleanUpTimeout","cleanUp","current","clearTimeout","onOpenChange","open","setTimeout","React","createElement","TooltipPrimitiveProvider","skipDelayDuration","TooltipPrimitive","defaultOpen","delayDuration","disableHoverableContent","TooltipPrimitiveTrigger","asChild","TooltipPrimitivePortal","InvertedThemeProvider","TooltipPrimitiveContent","Object","assign","ref","sideOffset","avoidCollisions","collisionPadding","hideWhenDetached","HStack","spacing","className","styles","TooltipContainer","Text","typo","bold","marginBottom","color","TooltipContent","truncated","Icon","size","source"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n AlphaTooltipPrimitive,\n AlphaTooltipPrimitiveContent,\n type AlphaTooltipPrimitiveContentProps,\n AlphaTooltipPrimitivePortal,\n AlphaTooltipPrimitiveProvider,\n AlphaTooltipPrimitiveTrigger,\n} from '~/src/components/AlphaTooltipPrimitive'\nimport { Icon } from '~/src/components/Icon'\nimport { HStack } from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\nimport { InvertedThemeProvider } from '~/src/components/ThemeProvider'\nimport { useRootElement } from '~/src/components/WindowProvider'\n\nimport { type TooltipPosition, type TooltipProps } from './Tooltip.types'\n\nimport styles from './Tooltip.module.scss'\n\nfunction getSideAndAlign(\n placement: TooltipPosition\n): Pick<AlphaTooltipPrimitiveContentProps, 'side' | 'align'> {\n switch (placement) {\n case 'top-center':\n return {\n side: 'top',\n align: 'center',\n }\n case 'top-left':\n return {\n side: 'top',\n align: 'start',\n }\n case 'top-right':\n return {\n side: 'top',\n align: 'end',\n }\n case 'right-center':\n return {\n side: 'right',\n align: 'center',\n }\n case 'right-top':\n return {\n side: 'right',\n align: 'start',\n }\n case 'right-bottom':\n return {\n side: 'right',\n align: 'end',\n }\n case 'bottom-center':\n return {\n side: 'bottom',\n align: 'center',\n }\n case 'bottom-left':\n return {\n side: 'bottom',\n align: 'start',\n }\n case 'bottom-right':\n return {\n side: 'bottom',\n align: 'end',\n }\n case 'left-center':\n return {\n side: 'left',\n align: 'center',\n }\n case 'left-top':\n return {\n side: 'left',\n align: 'start',\n }\n case 'left-bottom':\n return {\n side: 'left',\n align: 'end',\n }\n default:\n // NOTE: should not reach here\n return {\n side: undefined,\n align: undefined,\n }\n }\n}\n\n/**\n * `Tooltip` is a component that shows additional information when the mouse hovers or the keyboard is focused.\n *\n * Components that pass to children **must spread props and forward ref.**\n * @example\n * ```tsx\n * // Your component must spread props and forward ref.\n * const Button = React.forwardRef((props, forwardedRef) => (<button {...props} ref={forwardedRef} />))\n * // Then, you can use `Tooltip` with your component.\n * <Tooltip content=\"Ta-da!\">\n * <Button>Hover me</Button>\n * </Tooltip>\n * ```\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(\n {\n children,\n defaultShow,\n onShow: onShowProp,\n onHide: onHideProp,\n disabled,\n title,\n content,\n description,\n icon,\n placement = 'bottom-center',\n offset = 4,\n container: containerProp,\n keepInContainer = true,\n allowHover = false,\n delayShow = 0,\n delayHide = 0,\n ...rest\n },\n forwardedRef\n ) {\n const [show, setShow] = useState<boolean>(defaultShow ?? false)\n const timeoutRef = useRef<NodeJS.Timeout>()\n\n const rootElement = useRootElement()\n const container = containerProp ?? rootElement\n\n const shouldBeHidden = useMemo(\n () => disabled || isEmpty(content),\n [disabled, content]\n )\n\n const onShow = useCallback(() => {\n setShow(true)\n onShowProp?.()\n }, [onShowProp])\n\n const onHide = useCallback(() => {\n setShow(false)\n onHideProp?.()\n }, [onHideProp])\n\n useEffect(\n function forceHide() {\n if (shouldBeHidden) {\n onHide()\n }\n },\n [shouldBeHidden, onHide]\n )\n\n useEffect(\n function cleanUpTimeout() {\n return function cleanUp() {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n }\n },\n [shouldBeHidden]\n )\n\n const onOpenChange = useCallback(\n (open: boolean) => {\n if (shouldBeHidden) {\n return\n }\n\n if (open) {\n onShow()\n return\n }\n\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n timeoutRef.current = undefined\n }\n\n if (delayHide > 0) {\n timeoutRef.current = setTimeout(() => {\n onHide()\n }, delayHide)\n return\n }\n\n onHide()\n },\n [shouldBeHidden, delayHide, onShow, onHide]\n )\n\n return (\n <AlphaTooltipPrimitiveProvider skipDelayDuration={0}>\n <AlphaTooltipPrimitive\n open={show}\n defaultOpen={defaultShow}\n delayDuration={delayShow}\n disableHoverableContent={!allowHover}\n onOpenChange={onOpenChange}\n >\n <AlphaTooltipPrimitiveTrigger asChild>\n {children}\n </AlphaTooltipPrimitiveTrigger>\n\n <AlphaTooltipPrimitivePortal container={container}>\n <InvertedThemeProvider>\n <AlphaTooltipPrimitiveContent\n {...rest}\n {...getSideAndAlign(placement)}\n asChild\n ref={forwardedRef}\n sideOffset={offset}\n avoidCollisions={keepInContainer}\n collisionPadding={8}\n hideWhenDetached\n >\n <HStack\n spacing={4}\n className={styles.Tooltip}\n >\n <div className={styles.TooltipContainer}>\n {title && (\n <Text\n typo=\"13\"\n bold\n marginBottom={2}\n color=\"txt-black-darkest\"\n >\n {title}\n </Text>\n )}\n\n <Text\n color=\"txt-black-darkest\"\n className={styles.TooltipContent}\n truncated={20}\n typo=\"13\"\n >\n {content}\n </Text>\n\n {description && (\n <Text\n typo=\"12\"\n color=\"txt-black-dark\"\n >\n {description}\n </Text>\n )}\n </div>\n\n {icon && (\n <Icon\n size=\"xs\"\n color=\"txt-black-darkest\"\n source={icon}\n className={styles.Icon}\n />\n )}\n </HStack>\n </AlphaTooltipPrimitiveContent>\n </InvertedThemeProvider>\n </AlphaTooltipPrimitivePortal>\n </AlphaTooltipPrimitive>\n </AlphaTooltipPrimitiveProvider>\n )\n }\n)\n"],"names":["getSideAndAlign","placement","side","align","undefined","Tooltip","forwardRef","children","defaultShow","onShow","onShowProp","onHide","onHideProp","disabled","title","content","description","icon","offset","container","containerProp","keepInContainer","allowHover","delayShow","delayHide","rest","forwardedRef","show","setShow","useState","timeoutRef","useRef","rootElement","useRootElement","shouldBeHidden","useMemo","isEmpty","useCallback","useEffect","forceHide","cleanUpTimeout","cleanUp","current","clearTimeout","onOpenChange","open","setTimeout","React","createElement","AlphaTooltipPrimitiveProvider","skipDelayDuration","AlphaTooltipPrimitive","defaultOpen","delayDuration","disableHoverableContent","AlphaTooltipPrimitiveTrigger","asChild","AlphaTooltipPrimitivePortal","InvertedThemeProvider","AlphaTooltipPrimitiveContent","Object","assign","ref","sideOffset","avoidCollisions","collisionPadding","hideWhenDetached","HStack","spacing","className","styles","TooltipContainer","Text","typo","bold","marginBottom","color","TooltipContent","truncated","Icon","size","source"],"mappings":"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"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./packages/bezier-tokens/dist/esm/index.js');
|
|
4
4
|
var useKeyboardActionLockerWhileComposing = require('./hooks/useKeyboardActionLockerWhileComposing.js');
|
|
5
|
+
var DialogPrimitive = require('./components/AlphaDialogPrimitive/DialogPrimitive.js');
|
|
6
|
+
var TooltipPrimitive = require('./components/AlphaTooltipPrimitive/TooltipPrimitive.js');
|
|
5
7
|
var AppProvider = require('./components/AppProvider/AppProvider.js');
|
|
6
8
|
var AutoFocus = require('./components/AutoFocus/AutoFocus.js');
|
|
7
9
|
var Avatar = require('./components/Avatar/Avatar.js');
|
|
@@ -68,6 +70,20 @@ var WindowProvider = require('./components/WindowProvider/WindowProvider.js');
|
|
|
68
70
|
exports.tokens = index.tokens;
|
|
69
71
|
exports.COMMON_IME_CONTROL_KEYS = useKeyboardActionLockerWhileComposing.COMMON_IME_CONTROL_KEYS;
|
|
70
72
|
exports.useKeyboardActionLockerWhileComposing = useKeyboardActionLockerWhileComposing.useKeyboardActionLockerWhileComposing;
|
|
73
|
+
exports.AlphaDialogPrimitive = DialogPrimitive.DialogPrimitive;
|
|
74
|
+
exports.AlphaDialogPrimitiveClose = DialogPrimitive.DialogPrimitiveClose;
|
|
75
|
+
exports.AlphaDialogPrimitiveContent = DialogPrimitive.DialogPrimitiveContent;
|
|
76
|
+
exports.AlphaDialogPrimitiveDescription = DialogPrimitive.DialogPrimitiveDescription;
|
|
77
|
+
exports.AlphaDialogPrimitiveOverlay = DialogPrimitive.DialogPrimitiveOverlay;
|
|
78
|
+
exports.AlphaDialogPrimitivePortal = DialogPrimitive.DialogPrimitivePortal;
|
|
79
|
+
exports.AlphaDialogPrimitiveTitle = DialogPrimitive.DialogPrimitiveTitle;
|
|
80
|
+
exports.AlphaDialogPrimitiveTrigger = DialogPrimitive.DialogPrimitiveTrigger;
|
|
81
|
+
exports.AlphaTooltipPrimitive = TooltipPrimitive.TooltipPrimitive;
|
|
82
|
+
exports.AlphaTooltipPrimitiveArrow = TooltipPrimitive.TooltipPrimitiveArrow;
|
|
83
|
+
exports.AlphaTooltipPrimitiveContent = TooltipPrimitive.TooltipPrimitiveContent;
|
|
84
|
+
exports.AlphaTooltipPrimitivePortal = TooltipPrimitive.TooltipPrimitivePortal;
|
|
85
|
+
exports.AlphaTooltipPrimitiveProvider = TooltipPrimitive.TooltipPrimitiveProvider;
|
|
86
|
+
exports.AlphaTooltipPrimitiveTrigger = TooltipPrimitive.TooltipPrimitiveTrigger;
|
|
71
87
|
exports.AppProvider = AppProvider.AppProvider;
|
|
72
88
|
exports.AutoFocus = AutoFocus.AutoFocus;
|
|
73
89
|
exports.Avatar = Avatar.Avatar;
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../../bezier-tokens/dist/esm/index.mjs"],"sourcesContent":["import darkTheme from './darkTheme.mjs';\nimport global from './global.mjs';\nimport lightTheme from './lightTheme.mjs';\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../../bezier-tokens/dist/esm/index.mjs"],"sourcesContent":["import darkTheme from './darkTheme.mjs';\nimport global from './global.mjs';\nimport lightTheme from './lightTheme.mjs';\nexport const tokens = Object.freeze({\n darkTheme,\n global,\n lightTheme,\n});\n"],"names":["tokens","Object","freeze","darkTheme","global","lightTheme"],"mappings":";;;;;;MAGaA,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC;aAClCC,iBAAS;UACTC,cAAM;AACNC,cAAAA,kBAAAA;AACF,CAAC;;;;"}
|