@channel.io/bezier-react 2.0.6 → 2.0.7

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.
Files changed (156) hide show
  1. package/dist/cjs/components/AlphaAvatar/Avatar.js.map +1 -1
  2. package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.js.map +1 -1
  3. package/dist/cjs/components/AlphaButton/Button.js.map +1 -1
  4. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map +1 -1
  5. package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map +1 -1
  6. package/dist/cjs/components/AlphaIconButton/IconButton.js.map +1 -1
  7. package/dist/cjs/components/AlphaSpinner/Spinner.js +38 -0
  8. package/dist/cjs/components/AlphaSpinner/Spinner.js.map +1 -0
  9. package/dist/cjs/components/AlphaSpinner/Spinner.module.scss.js +8 -0
  10. package/dist/cjs/components/AlphaSpinner/Spinner.module.scss.js.map +1 -0
  11. package/dist/cjs/components/AutoFocus/AutoFocus.js +2 -1
  12. package/dist/cjs/components/AutoFocus/AutoFocus.js.map +1 -1
  13. package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
  14. package/dist/cjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
  15. package/dist/cjs/components/Banner/Banner.js.map +1 -1
  16. package/dist/cjs/components/BaseTagBadge/BaseTagBadge.js +3 -2
  17. package/dist/cjs/components/BaseTagBadge/BaseTagBadge.js.map +1 -1
  18. package/dist/cjs/components/Box/Box.js.map +1 -1
  19. package/dist/cjs/components/Button/Button.js.map +1 -1
  20. package/dist/cjs/components/Center/Center.js.map +1 -1
  21. package/dist/cjs/components/CheckableAvatar/CheckableAvatar.js.map +1 -1
  22. package/dist/cjs/components/Emoji/Emoji.js.map +1 -1
  23. package/dist/cjs/components/FeatureProvider/FeatureProvider.js +2 -1
  24. package/dist/cjs/components/FeatureProvider/FeatureProvider.js.map +1 -1
  25. package/dist/cjs/components/FeatureProvider/SmoothCornersFeature/smoothCornersScript.js.map +1 -1
  26. package/dist/cjs/components/FormControl/FormControl.js.map +1 -1
  27. package/dist/cjs/components/LegacyStack/LegacyStack/LegacyStack.js.map +1 -1
  28. package/dist/cjs/components/LegacyStack/LegacyStackItem/LegacyStackItem.js.map +1 -1
  29. package/dist/cjs/components/LegacyTooltip/utils.js.map +1 -1
  30. package/dist/cjs/components/ListItem/ListItem.js.map +1 -1
  31. package/dist/cjs/components/Modal/Modal.js.map +1 -1
  32. package/dist/cjs/components/NavGroup/NavGroup.js.map +1 -1
  33. package/dist/cjs/components/OutlineItem/OutlineItem.js.map +1 -1
  34. package/dist/cjs/components/Overlay/Overlay.js +3 -2
  35. package/dist/cjs/components/Overlay/Overlay.js.map +1 -1
  36. package/dist/cjs/components/Overlay/utils.js.map +1 -1
  37. package/dist/cjs/components/ProgressBar/ProgressBar.js.map +1 -1
  38. package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map +1 -1
  39. package/dist/cjs/components/Slider/Slider.js.map +1 -1
  40. package/dist/cjs/components/SmoothCornersBox/SmoothCornersBox.js.map +1 -1
  41. package/dist/cjs/components/Spinner/Spinner.js.map +1 -1
  42. package/dist/cjs/components/Stack/Stack.js.map +1 -1
  43. package/dist/cjs/components/Status/Status.js.map +1 -1
  44. package/dist/cjs/components/Switch/Switch.js.map +1 -1
  45. package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
  46. package/dist/cjs/components/Text/Text.js.map +1 -1
  47. package/dist/cjs/components/TextArea/TextArea.js +2 -1
  48. package/dist/cjs/components/TextArea/TextArea.js.map +1 -1
  49. package/dist/cjs/components/TextField/TextField.js.map +1 -1
  50. package/dist/cjs/components/Toast/Toast.js +3 -2
  51. package/dist/cjs/components/Toast/Toast.js.map +1 -1
  52. package/dist/cjs/hooks/useIsomorphicLayoutEffect.js +13 -0
  53. package/dist/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  54. package/dist/cjs/hooks/useMergeRefs.js.map +1 -1
  55. package/dist/cjs/index.js +4 -2
  56. package/dist/cjs/index.js.map +1 -1
  57. package/dist/cjs/styles.css +1 -1
  58. package/dist/cjs/types/props-helpers.js.map +1 -1
  59. package/dist/cjs/utils/react.js.map +1 -1
  60. package/dist/cjs/utils/string.js.map +1 -1
  61. package/dist/cjs/utils/style.js.map +1 -1
  62. package/dist/esm/components/AlphaAvatar/Avatar.mjs.map +1 -1
  63. package/dist/esm/components/AlphaAvatarGroup/AvatarGroup.mjs.map +1 -1
  64. package/dist/esm/components/AlphaButton/Button.mjs.map +1 -1
  65. package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs.map +1 -1
  66. package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs.map +1 -1
  67. package/dist/esm/components/AlphaIconButton/IconButton.mjs.map +1 -1
  68. package/dist/esm/components/AlphaSpinner/Spinner.mjs +35 -0
  69. package/dist/esm/components/AlphaSpinner/Spinner.mjs.map +1 -0
  70. package/dist/esm/components/AlphaSpinner/Spinner.module.scss.mjs +4 -0
  71. package/dist/esm/components/AlphaSpinner/Spinner.module.scss.mjs.map +1 -0
  72. package/dist/esm/components/AutoFocus/AutoFocus.mjs +3 -2
  73. package/dist/esm/components/AutoFocus/AutoFocus.mjs.map +1 -1
  74. package/dist/esm/components/Avatar/Avatar.mjs.map +1 -1
  75. package/dist/esm/components/AvatarGroup/AvatarGroup.mjs.map +1 -1
  76. package/dist/esm/components/Banner/Banner.mjs.map +1 -1
  77. package/dist/esm/components/BaseTagBadge/BaseTagBadge.mjs +3 -2
  78. package/dist/esm/components/BaseTagBadge/BaseTagBadge.mjs.map +1 -1
  79. package/dist/esm/components/Box/Box.mjs.map +1 -1
  80. package/dist/esm/components/Button/Button.mjs.map +1 -1
  81. package/dist/esm/components/Center/Center.mjs.map +1 -1
  82. package/dist/esm/components/CheckableAvatar/CheckableAvatar.mjs.map +1 -1
  83. package/dist/esm/components/Emoji/Emoji.mjs.map +1 -1
  84. package/dist/esm/components/FeatureProvider/FeatureProvider.mjs +3 -2
  85. package/dist/esm/components/FeatureProvider/FeatureProvider.mjs.map +1 -1
  86. package/dist/esm/components/FeatureProvider/SmoothCornersFeature/smoothCornersScript.mjs.map +1 -1
  87. package/dist/esm/components/FormControl/FormControl.mjs.map +1 -1
  88. package/dist/esm/components/LegacyStack/LegacyStack/LegacyStack.mjs.map +1 -1
  89. package/dist/esm/components/LegacyStack/LegacyStackItem/LegacyStackItem.mjs.map +1 -1
  90. package/dist/esm/components/LegacyTooltip/utils.mjs.map +1 -1
  91. package/dist/esm/components/ListItem/ListItem.mjs.map +1 -1
  92. package/dist/esm/components/Modal/Modal.mjs.map +1 -1
  93. package/dist/esm/components/NavGroup/NavGroup.mjs.map +1 -1
  94. package/dist/esm/components/OutlineItem/OutlineItem.mjs.map +1 -1
  95. package/dist/esm/components/Overlay/Overlay.mjs +4 -3
  96. package/dist/esm/components/Overlay/Overlay.mjs.map +1 -1
  97. package/dist/esm/components/Overlay/utils.mjs.map +1 -1
  98. package/dist/esm/components/ProgressBar/ProgressBar.mjs.map +1 -1
  99. package/dist/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
  100. package/dist/esm/components/Slider/Slider.mjs.map +1 -1
  101. package/dist/esm/components/SmoothCornersBox/SmoothCornersBox.mjs.map +1 -1
  102. package/dist/esm/components/Spinner/Spinner.mjs.map +1 -1
  103. package/dist/esm/components/Stack/Stack.mjs.map +1 -1
  104. package/dist/esm/components/Status/Status.mjs.map +1 -1
  105. package/dist/esm/components/Switch/Switch.mjs.map +1 -1
  106. package/dist/esm/components/Tabs/Tabs.mjs.map +1 -1
  107. package/dist/esm/components/Text/Text.mjs.map +1 -1
  108. package/dist/esm/components/TextArea/TextArea.mjs +3 -2
  109. package/dist/esm/components/TextArea/TextArea.mjs.map +1 -1
  110. package/dist/esm/components/TextField/TextField.mjs.map +1 -1
  111. package/dist/esm/components/Toast/Toast.mjs +3 -2
  112. package/dist/esm/components/Toast/Toast.mjs.map +1 -1
  113. package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs +11 -0
  114. package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs.map +1 -0
  115. package/dist/esm/hooks/useMergeRefs.mjs.map +1 -1
  116. package/dist/esm/index.mjs +1 -0
  117. package/dist/esm/index.mjs.map +1 -1
  118. package/dist/esm/styles.css +1 -1
  119. package/dist/esm/types/props-helpers.mjs.map +1 -1
  120. package/dist/esm/utils/react.mjs.map +1 -1
  121. package/dist/esm/utils/string.mjs.map +1 -1
  122. package/dist/esm/utils/style.mjs.map +1 -1
  123. package/dist/types/components/AlphaSpinner/Spinner.d.ts +5 -0
  124. package/dist/types/components/AlphaSpinner/Spinner.d.ts.map +1 -0
  125. package/dist/types/components/AlphaSpinner/Spinner.types.d.ts +13 -0
  126. package/dist/types/components/AlphaSpinner/Spinner.types.d.ts.map +1 -0
  127. package/dist/types/components/AlphaSpinner/index.d.ts +3 -0
  128. package/dist/types/components/AlphaSpinner/index.d.ts.map +1 -0
  129. package/dist/types/components/AutoFocus/AutoFocus.d.ts.map +1 -1
  130. package/dist/types/components/BaseTagBadge/BaseTagBadge.d.ts.map +1 -1
  131. package/dist/types/components/FeatureProvider/FeatureProvider.d.ts.map +1 -1
  132. package/dist/types/components/Icon/Icon.types.d.ts +1 -1
  133. package/dist/types/components/Overlay/Overlay.d.ts.map +1 -1
  134. package/dist/types/components/TextArea/TextArea.d.ts.map +1 -1
  135. package/dist/types/components/Toast/Toast.d.ts.map +1 -1
  136. package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts +8 -0
  137. package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  138. package/dist/types/index.d.ts +1 -0
  139. package/dist/types/index.d.ts.map +1 -1
  140. package/package.json +1 -1
  141. package/src/components/AlphaSpinner/AlphaSpinner.stories.tsx +23 -0
  142. package/src/components/AlphaSpinner/Spinner.module.scss +66 -0
  143. package/src/components/AlphaSpinner/Spinner.test.tsx +34 -0
  144. package/src/components/AlphaSpinner/Spinner.tsx +50 -0
  145. package/src/components/AlphaSpinner/Spinner.types.ts +21 -0
  146. package/src/components/AlphaSpinner/index.ts +2 -0
  147. package/src/components/AutoFocus/AutoFocus.tsx +3 -2
  148. package/src/components/BaseTagBadge/BaseTagBadge.tsx +2 -1
  149. package/src/components/FeatureProvider/FeatureProvider.tsx +3 -2
  150. package/src/components/Icon/Icon.types.ts +1 -1
  151. package/src/components/Overlay/Overlay.tsx +3 -3
  152. package/src/components/TextArea/TextArea.tsx +3 -2
  153. package/src/components/Toast/Toast.module.scss +1 -1
  154. package/src/components/Toast/Toast.tsx +1 -2
  155. package/src/hooks/useIsomorphicLayoutEffect.ts +9 -0
  156. package/src/index.ts +1 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Overlay.js","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useLayoutEffect,\n useReducer,\n useRef,\n useState,\n} from 'react'\nimport ReactDOM from 'react-dom'\n\nimport classNames from 'classnames'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { useModalContainerContext } from '~/src/components/Modal'\nimport { ThemeProvider, useThemeName } from '~/src/components/ThemeProvider'\nimport { useWindow } from '~/src/components/WindowProvider'\n\nimport type {\n ContainerRectAttr,\n OverlayProps,\n TargetRectAttr,\n} from './Overlay.types'\nimport { getOverlayStyle } from './utils'\n\nimport styles from './Overlay.module.scss'\n\nexport const CONTAINER_TEST_ID = 'bezier-container'\nexport const OVERLAY_TEST_ID = 'bezier-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n function Overlay(\n {\n children,\n style,\n className,\n show = false,\n container: givenContainer,\n target,\n position = 'left-center',\n marginX = 0,\n marginY = 0,\n keepInContainer = false,\n withTransition = false,\n enableClickOutside = false,\n containerStyle,\n containerClassName,\n onHide,\n onTransitionEnd,\n ...rest\n },\n forwardedRef\n ) {\n const { window, document, rootElement } = useWindow()\n\n const [shouldRender, setShouldRender] = useState(false)\n const [shouldShow, setShouldShow] = useState(false)\n\n const containerRect = useRef<ContainerRectAttr | null>(null)\n const targetRect = useRef<TargetRectAttr | null>(null)\n\n const [, forceUpdate] = useReducer((x) => !x, true)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const overlayRef = useRef<HTMLDivElement>(null)\n const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n const modalContainer = useModalContainerContext()\n const hasContainer = Boolean(givenContainer || modalContainer)\n const container = givenContainer ?? modalContainer ?? rootElement\n\n const handleOverlayForceUpdate = useCallback(() => {\n forceUpdate()\n }, [])\n\n const handleContainerRect = useCallback(() => {\n const {\n width: containerWidth,\n height: containerHeight,\n top: containerTop,\n left: containerLeft,\n } = container.getBoundingClientRect()\n\n containerRect.current = {\n containerWidth,\n containerHeight,\n containerTop,\n containerLeft,\n scrollTop: hasContainer ? container.scrollTop : 0,\n scrollLeft: hasContainer ? container.scrollLeft : 0,\n }\n }, [container, hasContainer])\n\n useLayoutEffect(\n function initContainerRect() {\n if (show) {\n handleContainerRect()\n }\n },\n [show, handleContainerRect]\n )\n\n const handleTargetRect = useCallback(() => {\n if (!target) {\n return\n }\n const {\n width: targetWidth,\n height: targetHeight,\n top: targetTop,\n left: targetLeft,\n } = target.getBoundingClientRect()\n const { clientTop, clientLeft } = target\n\n targetRect.current = {\n targetWidth,\n targetHeight,\n targetTop,\n targetLeft,\n clientTop,\n clientLeft,\n }\n }, [target])\n\n useLayoutEffect(\n function initTargetRect() {\n if (show) {\n handleTargetRect()\n }\n },\n [show, handleTargetRect]\n )\n\n const handleTransitionEnd = useCallback<\n React.TransitionEventHandler<HTMLDivElement>\n >(\n (event) => {\n onTransitionEnd?.(event)\n if (!show) {\n setShouldRender(false)\n }\n },\n [show, onTransitionEnd]\n )\n\n const handleBlockMouseWheel = useCallback(\n (event: HTMLElementEventMap['wheel']) => {\n event.stopPropagation()\n },\n []\n )\n\n const handleHideOverlay = useCallback(\n (event: MouseEvent) => {\n /**\n * NOTE: Type checking with instanceof makes it difficult to handle cases where the window object is different.\n */\n if (\n !event.target ||\n !(event.target as HTMLElement).closest(`.${styles.Overlay}`)\n ) {\n onHide?.()\n\n if (!enableClickOutside) {\n event.stopPropagation()\n }\n }\n },\n [enableClickOutside, onHide]\n )\n\n const handleKeydown = useCallback(\n (event: HTMLElementEventMap['keyup']) => {\n if (event.key === ESCAPE_KEY) {\n onHide?.()\n }\n },\n [onHide]\n )\n\n useEventHandler(document, 'click', handleHideOverlay, show, true)\n useEventHandler(document, 'keydown', handleKeydown, show)\n useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n useEffect(() => {\n handleOverlayForceUpdate()\n }, [children, handleOverlayForceUpdate])\n\n /**\n * Case 1: show === true\n * show -> shouldRender -> shouldShow\n * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n *\n * Case 2: show === false\n * show -> shouldShow -> (...) -> shouldRender\n * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n * Case 2-1: withTransition === true\n * shouldShow -> onTransitionEnd -> shouldRender\n * onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n * Case 2-2: withTransition === false\n * shouldShow && shouldRender\n * transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n */\n useEffect(() => {\n if (show) {\n if (shouldRender) {\n window.requestAnimationFrame(() => setShouldShow(true))\n } else {\n window.requestAnimationFrame(() => setShouldRender(true))\n }\n }\n\n if (!show) {\n window.requestAnimationFrame(() => setShouldShow(false))\n\n if (!withTransition) {\n window.requestAnimationFrame(() => setShouldRender(false))\n }\n }\n }, [show, withTransition, shouldRender, shouldShow, window])\n\n const themeName = useThemeName()\n\n if (!shouldRender) {\n return null\n }\n\n const Content = (\n <ThemeProvider themeName={themeName}>\n <div\n className={classNames(\n styles.Overlay,\n !shouldShow && styles.hidden,\n withTransition && styles.transition,\n className\n )}\n style={{\n ...style,\n ...getOverlayStyle({\n containerRect: containerRect.current,\n targetRect: targetRect.current,\n overlay: overlayRef.current,\n position,\n marginX,\n marginY,\n keepInContainer,\n show: shouldShow,\n }),\n }}\n ref={mergedRef}\n data-testid={OVERLAY_TEST_ID}\n onTransitionEnd={handleTransitionEnd}\n {...rest}\n >\n {children}\n </div>\n </ThemeProvider>\n )\n\n return ReactDOM.createPortal(\n hasContainer ? (\n Content\n ) : (\n <div\n style={containerStyle}\n className={classNames(\n styles.OverlayContainer,\n !show && styles.hidden,\n containerClassName\n )}\n ref={containerRef}\n data-testid={CONTAINER_TEST_ID}\n >\n <div className={styles.OverlayWrapper}>{Content}</div>\n </div>\n ),\n container\n )\n }\n)\n"],"names":["CONTAINER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","forwardRef","children","style","className","show","container","givenContainer","target","position","marginX","marginY","keepInContainer","withTransition","enableClickOutside","containerStyle","containerClassName","onHide","onTransitionEnd","rest","forwardedRef","window","document","rootElement","useWindow","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","modalContainer","useModalContainerContext","hasContainer","Boolean","handleOverlayForceUpdate","useCallback","handleContainerRect","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","styles","handleKeydown","key","useEventHandler","useEffect","requestAnimationFrame","themeName","useThemeName","Content","React","createElement","ThemeProvider","Object","assign","classNames","hidden","transition","getOverlayStyle","overlay","ref","ReactDOM","createPortal","OverlayContainer","OverlayWrapper"],"mappings":"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"}
1
+ {"version":3,"file":"Overlay.js","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useReducer,\n useRef,\n useState,\n} from 'react'\nimport ReactDOM from 'react-dom'\n\nimport classNames from 'classnames'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { useModalContainerContext } from '~/src/components/Modal'\nimport { ThemeProvider, useThemeName } from '~/src/components/ThemeProvider'\nimport { useWindow } from '~/src/components/WindowProvider'\n\nimport type {\n ContainerRectAttr,\n OverlayProps,\n TargetRectAttr,\n} from './Overlay.types'\nimport { getOverlayStyle } from './utils'\n\nimport styles from './Overlay.module.scss'\n\nexport const CONTAINER_TEST_ID = 'bezier-container'\nexport const OVERLAY_TEST_ID = 'bezier-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n function Overlay(\n {\n children,\n style,\n className,\n show = false,\n container: givenContainer,\n target,\n position = 'left-center',\n marginX = 0,\n marginY = 0,\n keepInContainer = false,\n withTransition = false,\n enableClickOutside = false,\n containerStyle,\n containerClassName,\n onHide,\n onTransitionEnd,\n ...rest\n },\n forwardedRef\n ) {\n const { window, document, rootElement } = useWindow()\n\n const [shouldRender, setShouldRender] = useState(false)\n const [shouldShow, setShouldShow] = useState(false)\n\n const containerRect = useRef<ContainerRectAttr | null>(null)\n const targetRect = useRef<TargetRectAttr | null>(null)\n\n const [, forceUpdate] = useReducer((x) => !x, true)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const overlayRef = useRef<HTMLDivElement>(null)\n const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n const modalContainer = useModalContainerContext()\n const hasContainer = Boolean(givenContainer || modalContainer)\n const container = givenContainer ?? modalContainer ?? rootElement\n\n const handleOverlayForceUpdate = useCallback(() => {\n forceUpdate()\n }, [])\n\n const handleContainerRect = useCallback(() => {\n const {\n width: containerWidth,\n height: containerHeight,\n top: containerTop,\n left: containerLeft,\n } = container.getBoundingClientRect()\n\n containerRect.current = {\n containerWidth,\n containerHeight,\n containerTop,\n containerLeft,\n scrollTop: hasContainer ? container.scrollTop : 0,\n scrollLeft: hasContainer ? container.scrollLeft : 0,\n }\n }, [container, hasContainer])\n\n useIsomorphicLayoutEffect(\n function initContainerRect() {\n if (show) {\n handleContainerRect()\n }\n },\n [show, handleContainerRect]\n )\n\n const handleTargetRect = useCallback(() => {\n if (!target) {\n return\n }\n const {\n width: targetWidth,\n height: targetHeight,\n top: targetTop,\n left: targetLeft,\n } = target.getBoundingClientRect()\n const { clientTop, clientLeft } = target\n\n targetRect.current = {\n targetWidth,\n targetHeight,\n targetTop,\n targetLeft,\n clientTop,\n clientLeft,\n }\n }, [target])\n\n useIsomorphicLayoutEffect(\n function initTargetRect() {\n if (show) {\n handleTargetRect()\n }\n },\n [show, handleTargetRect]\n )\n\n const handleTransitionEnd = useCallback<\n React.TransitionEventHandler<HTMLDivElement>\n >(\n (event) => {\n onTransitionEnd?.(event)\n if (!show) {\n setShouldRender(false)\n }\n },\n [show, onTransitionEnd]\n )\n\n const handleBlockMouseWheel = useCallback(\n (event: HTMLElementEventMap['wheel']) => {\n event.stopPropagation()\n },\n []\n )\n\n const handleHideOverlay = useCallback(\n (event: MouseEvent) => {\n /**\n * NOTE: Type checking with instanceof makes it difficult to handle cases where the window object is different.\n */\n if (\n !event.target ||\n !(event.target as HTMLElement).closest(`.${styles.Overlay}`)\n ) {\n onHide?.()\n\n if (!enableClickOutside) {\n event.stopPropagation()\n }\n }\n },\n [enableClickOutside, onHide]\n )\n\n const handleKeydown = useCallback(\n (event: HTMLElementEventMap['keyup']) => {\n if (event.key === ESCAPE_KEY) {\n onHide?.()\n }\n },\n [onHide]\n )\n\n useEventHandler(document, 'click', handleHideOverlay, show, true)\n useEventHandler(document, 'keydown', handleKeydown, show)\n useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n useEffect(() => {\n handleOverlayForceUpdate()\n }, [children, handleOverlayForceUpdate])\n\n /**\n * Case 1: show === true\n * show -> shouldRender -> shouldShow\n * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n *\n * Case 2: show === false\n * show -> shouldShow -> (...) -> shouldRender\n * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n * Case 2-1: withTransition === true\n * shouldShow -> onTransitionEnd -> shouldRender\n * onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n * Case 2-2: withTransition === false\n * shouldShow && shouldRender\n * transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n */\n useEffect(() => {\n if (show) {\n if (shouldRender) {\n window.requestAnimationFrame(() => setShouldShow(true))\n } else {\n window.requestAnimationFrame(() => setShouldRender(true))\n }\n }\n\n if (!show) {\n window.requestAnimationFrame(() => setShouldShow(false))\n\n if (!withTransition) {\n window.requestAnimationFrame(() => setShouldRender(false))\n }\n }\n }, [show, withTransition, shouldRender, shouldShow, window])\n\n const themeName = useThemeName()\n\n if (!shouldRender) {\n return null\n }\n\n const Content = (\n <ThemeProvider themeName={themeName}>\n <div\n className={classNames(\n styles.Overlay,\n !shouldShow && styles.hidden,\n withTransition && styles.transition,\n className\n )}\n style={{\n ...style,\n ...getOverlayStyle({\n containerRect: containerRect.current,\n targetRect: targetRect.current,\n overlay: overlayRef.current,\n position,\n marginX,\n marginY,\n keepInContainer,\n show: shouldShow,\n }),\n }}\n ref={mergedRef}\n data-testid={OVERLAY_TEST_ID}\n onTransitionEnd={handleTransitionEnd}\n {...rest}\n >\n {children}\n </div>\n </ThemeProvider>\n )\n\n return ReactDOM.createPortal(\n hasContainer ? (\n Content\n ) : (\n <div\n style={containerStyle}\n className={classNames(\n styles.OverlayContainer,\n !show && styles.hidden,\n containerClassName\n )}\n ref={containerRef}\n data-testid={CONTAINER_TEST_ID}\n >\n <div className={styles.OverlayWrapper}>{Content}</div>\n </div>\n ),\n container\n )\n }\n)\n"],"names":["CONTAINER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","forwardRef","children","style","className","show","container","givenContainer","target","position","marginX","marginY","keepInContainer","withTransition","enableClickOutside","containerStyle","containerClassName","onHide","onTransitionEnd","rest","forwardedRef","window","document","rootElement","useWindow","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","modalContainer","useModalContainerContext","hasContainer","Boolean","handleOverlayForceUpdate","useCallback","handleContainerRect","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useIsomorphicLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","styles","handleKeydown","key","useEventHandler","useEffect","requestAnimationFrame","themeName","useThemeName","Content","React","createElement","ThemeProvider","Object","assign","classNames","hidden","transition","getOverlayStyle","overlay","ref","ReactDOM","createPortal","OverlayContainer","OverlayWrapper"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../src/components/Overlay/utils.ts"],"sourcesContent":["import {\n type ContainerRectAttr,\n type OverlayPosition,\n type TargetRectAttr,\n} from './Overlay.types'\n\nconst TOP_POSITION_OFFSET = 10\n\ninterface GetOverlayPositionArgs {\n containerRect: ContainerRectAttr\n targetRect: TargetRectAttr\n show: boolean\n}\n\nexport function getOverlayPosition({\n containerRect,\n targetRect,\n show,\n}: GetOverlayPositionArgs) {\n const { containerTop, containerLeft, scrollTop, scrollLeft } = containerRect\n const { targetTop, targetLeft, clientTop, clientLeft } = targetRect\n\n const top = targetTop - clientTop - containerTop + scrollTop\n const left = targetLeft - clientLeft - containerLeft + scrollLeft\n\n return {\n top: show ? top : top - TOP_POSITION_OFFSET,\n left,\n }\n}\n\ninterface GetOverlayTranslatationArgs {\n containerRect: ContainerRectAttr\n targetRect: TargetRectAttr | null\n overlay: HTMLElement | null\n position: OverlayPosition\n marginX: number\n marginY: number\n keepInContainer: boolean\n}\n\nexport function getOverlayTranslation({\n containerRect,\n targetRect,\n overlay,\n position,\n marginX,\n marginY,\n keepInContainer,\n}: GetOverlayTranslatationArgs) {\n if (containerRect && targetRect && overlay) {\n const { containerWidth, containerHeight, containerTop, containerLeft } =\n containerRect\n const { targetWidth, targetHeight, targetTop, targetLeft } = targetRect\n const { width: overlayWidth, height: overlayHeight } =\n overlay.getBoundingClientRect()\n\n let translateX = 0\n let translateY = 0\n\n // pre position\n switch (position) {\n case 'top-center':\n case 'top-left':\n case 'top-right':\n translateY -= overlayHeight + marginY\n translateX += marginX\n break\n case 'right-center':\n case 'right-top':\n case 'right-bottom':\n translateX += targetWidth + marginX\n translateY += marginY\n break\n case 'bottom-center':\n case 'bottom-left':\n case 'bottom-right':\n translateY += targetHeight + marginY\n translateX += marginX\n break\n case 'left-center':\n case 'left-top':\n case 'left-bottom':\n translateX -= overlayWidth + marginX\n translateY += marginY\n break\n }\n\n switch (position) {\n // post position\n case 'top-center':\n case 'bottom-center':\n translateX -= overlayWidth / 2 - targetWidth / 2\n break\n case 'top-right':\n case 'bottom-right':\n translateX -= overlayWidth - targetWidth\n break\n case 'right-center':\n case 'left-center':\n translateY -= overlayHeight / 2 - targetHeight / 2\n break\n case 'right-bottom':\n case 'left-bottom':\n translateY -= overlayHeight - targetHeight\n break\n\n // inner position\n case 'inner-left-top':\n translateX = marginX\n translateY = marginY\n break\n case 'inner-left-bottom':\n translateX = marginX\n translateY = targetHeight - overlayHeight + marginY\n break\n case 'inner-right-top':\n translateX = targetWidth - overlayWidth + marginX\n translateY = marginY\n break\n case 'inner-right-bottom':\n translateX = targetWidth - overlayWidth + marginX\n translateY = targetHeight - overlayHeight + marginY\n break\n }\n\n if (keepInContainer) {\n const isOverTop = targetTop + translateY < containerTop\n const isOverBottom =\n targetTop + translateY + overlayHeight > containerTop + containerHeight\n const isOverLeft = targetLeft + translateX < containerLeft\n const isOverRight =\n targetLeft + translateX + overlayWidth > containerLeft + containerWidth\n\n const topSpace = targetTop - containerTop\n const bottomSpace =\n containerTop + containerHeight - (targetTop + targetHeight)\n const leftSpace = targetLeft - containerLeft\n const rightSpace =\n containerLeft + containerWidth - (targetLeft + targetWidth)\n\n if (isOverTop) {\n translateY =\n topSpace > bottomSpace\n ? translateY\n : targetHeight - translateY - overlayHeight\n } else if (isOverBottom) {\n translateY =\n bottomSpace > topSpace\n ? translateY\n : targetHeight - translateY - overlayHeight\n }\n if (isOverLeft) {\n translateX =\n leftSpace > rightSpace\n ? translateX\n : targetWidth - translateX - overlayWidth\n } else if (isOverRight) {\n translateX =\n rightSpace > leftSpace\n ? translateX\n : targetWidth - translateX - overlayWidth\n }\n }\n\n return {\n translateX: Math.round(translateX),\n translateY: Math.round(translateY),\n }\n }\n return {\n translateX: 0,\n translateY: 0,\n }\n}\n\ninterface GetOverlayStyleArgs {\n containerRect: ContainerRectAttr | null\n targetRect: TargetRectAttr | null\n overlay: HTMLElement | null\n position: OverlayPosition\n marginX: number\n marginY: number\n keepInContainer: boolean\n show: boolean\n}\n\nexport function getOverlayStyle({\n containerRect,\n targetRect,\n overlay,\n position,\n marginX,\n marginY,\n keepInContainer,\n show,\n}: GetOverlayStyleArgs) {\n if (containerRect && targetRect) {\n const { top, left } = getOverlayPosition({\n containerRect,\n targetRect,\n show,\n })\n const { translateX, translateY } = getOverlayTranslation({\n containerRect,\n targetRect,\n overlay,\n position,\n marginX,\n marginY,\n keepInContainer,\n })\n\n return {\n top: `${top}px`,\n left: `${left}px`,\n transform: `translateX(${translateX}px) translateY(${translateY}px)`,\n }\n }\n\n return {}\n}\n"],"names":["TOP_POSITION_OFFSET","getOverlayPosition","containerRect","targetRect","show","containerTop","containerLeft","scrollTop","scrollLeft","targetTop","targetLeft","clientTop","clientLeft","top","left","getOverlayTranslation","overlay","position","marginX","marginY","keepInContainer","containerWidth","containerHeight","targetWidth","targetHeight","width","overlayWidth","height","overlayHeight","getBoundingClientRect","translateX","translateY","isOverTop","isOverBottom","isOverLeft","isOverRight","topSpace","bottomSpace","leftSpace","rightSpace","Math","round","getOverlayStyle","transform"],"mappings":"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"}
1
+ {"version":3,"file":"utils.js","sources":["../../../../src/components/Overlay/utils.ts"],"sourcesContent":["import {\n type ContainerRectAttr,\n type OverlayPosition,\n type TargetRectAttr,\n} from './Overlay.types'\n\nconst TOP_POSITION_OFFSET = 10\n\ninterface GetOverlayPositionArgs {\n containerRect: ContainerRectAttr\n targetRect: TargetRectAttr\n show: boolean\n}\n\nexport function getOverlayPosition({\n containerRect,\n targetRect,\n show,\n}: GetOverlayPositionArgs) {\n const { containerTop, containerLeft, scrollTop, scrollLeft } = containerRect\n const { targetTop, targetLeft, clientTop, clientLeft } = targetRect\n\n const top = targetTop - clientTop - containerTop + scrollTop\n const left = targetLeft - clientLeft - containerLeft + scrollLeft\n\n return {\n top: show ? top : top - TOP_POSITION_OFFSET,\n left,\n }\n}\n\ninterface GetOverlayTranslatationArgs {\n containerRect: ContainerRectAttr\n targetRect: TargetRectAttr | null\n overlay: HTMLElement | null\n position: OverlayPosition\n marginX: number\n marginY: number\n keepInContainer: boolean\n}\n\nexport function getOverlayTranslation({\n containerRect,\n targetRect,\n overlay,\n position,\n marginX,\n marginY,\n keepInContainer,\n}: GetOverlayTranslatationArgs) {\n if (containerRect && targetRect && overlay) {\n const { containerWidth, containerHeight, containerTop, containerLeft } =\n containerRect\n const { targetWidth, targetHeight, targetTop, targetLeft } = targetRect\n const { width: overlayWidth, height: overlayHeight } =\n overlay.getBoundingClientRect()\n\n let translateX = 0\n let translateY = 0\n\n // pre position\n switch (position) {\n case 'top-center':\n case 'top-left':\n case 'top-right':\n translateY -= overlayHeight + marginY\n translateX += marginX\n break\n case 'right-center':\n case 'right-top':\n case 'right-bottom':\n translateX += targetWidth + marginX\n translateY += marginY\n break\n case 'bottom-center':\n case 'bottom-left':\n case 'bottom-right':\n translateY += targetHeight + marginY\n translateX += marginX\n break\n case 'left-center':\n case 'left-top':\n case 'left-bottom':\n translateX -= overlayWidth + marginX\n translateY += marginY\n break\n }\n\n switch (position) {\n // post position\n case 'top-center':\n case 'bottom-center':\n translateX -= overlayWidth / 2 - targetWidth / 2\n break\n case 'top-right':\n case 'bottom-right':\n translateX -= overlayWidth - targetWidth\n break\n case 'right-center':\n case 'left-center':\n translateY -= overlayHeight / 2 - targetHeight / 2\n break\n case 'right-bottom':\n case 'left-bottom':\n translateY -= overlayHeight - targetHeight\n break\n\n // inner position\n case 'inner-left-top':\n translateX = marginX\n translateY = marginY\n break\n case 'inner-left-bottom':\n translateX = marginX\n translateY = targetHeight - overlayHeight + marginY\n break\n case 'inner-right-top':\n translateX = targetWidth - overlayWidth + marginX\n translateY = marginY\n break\n case 'inner-right-bottom':\n translateX = targetWidth - overlayWidth + marginX\n translateY = targetHeight - overlayHeight + marginY\n break\n }\n\n if (keepInContainer) {\n const isOverTop = targetTop + translateY < containerTop\n const isOverBottom =\n targetTop + translateY + overlayHeight > containerTop + containerHeight\n const isOverLeft = targetLeft + translateX < containerLeft\n const isOverRight =\n targetLeft + translateX + overlayWidth > containerLeft + containerWidth\n\n const topSpace = targetTop - containerTop\n const bottomSpace =\n containerTop + containerHeight - (targetTop + targetHeight)\n const leftSpace = targetLeft - containerLeft\n const rightSpace =\n containerLeft + containerWidth - (targetLeft + targetWidth)\n\n if (isOverTop) {\n translateY =\n topSpace > bottomSpace\n ? translateY\n : targetHeight - translateY - overlayHeight\n } else if (isOverBottom) {\n translateY =\n bottomSpace > topSpace\n ? translateY\n : targetHeight - translateY - overlayHeight\n }\n if (isOverLeft) {\n translateX =\n leftSpace > rightSpace\n ? translateX\n : targetWidth - translateX - overlayWidth\n } else if (isOverRight) {\n translateX =\n rightSpace > leftSpace\n ? translateX\n : targetWidth - translateX - overlayWidth\n }\n }\n\n return {\n translateX: Math.round(translateX),\n translateY: Math.round(translateY),\n }\n }\n return {\n translateX: 0,\n translateY: 0,\n }\n}\n\ninterface GetOverlayStyleArgs {\n containerRect: ContainerRectAttr | null\n targetRect: TargetRectAttr | null\n overlay: HTMLElement | null\n position: OverlayPosition\n marginX: number\n marginY: number\n keepInContainer: boolean\n show: boolean\n}\n\nexport function getOverlayStyle({\n containerRect,\n targetRect,\n overlay,\n position,\n marginX,\n marginY,\n keepInContainer,\n show,\n}: GetOverlayStyleArgs) {\n if (containerRect && targetRect) {\n const { top, left } = getOverlayPosition({\n containerRect,\n targetRect,\n show,\n })\n const { translateX, translateY } = getOverlayTranslation({\n containerRect,\n targetRect,\n overlay,\n position,\n marginX,\n marginY,\n keepInContainer,\n })\n\n return {\n top: `${top}px`,\n left: `${left}px`,\n transform: `translateX(${translateX}px) translateY(${translateY}px)`,\n }\n }\n\n return {}\n}\n"],"names":["TOP_POSITION_OFFSET","getOverlayPosition","containerRect","targetRect","show","containerTop","containerLeft","scrollTop","scrollLeft","targetTop","targetLeft","clientTop","clientLeft","top","left","getOverlayTranslation","overlay","position","marginX","marginY","keepInContainer","containerWidth","containerHeight","targetWidth","targetHeight","width","overlayWidth","height","overlayHeight","getBoundingClientRect","translateX","translateY","isOverTop","isOverBottom","isOverLeft","isOverRight","topSpace","bottomSpace","leftSpace","rightSpace","Math","round","getOverlayStyle","transform"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { clamp } from '~/src/utils/number'\nimport { cssDimension } from '~/src/utils/style'\n\nimport { useThemeName } from '~/src/components/ThemeProvider'\n\nimport type { ProgressBarProps } from './ProgressBar.types'\n\nimport styles from './ProgressBar.module.scss'\n\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n function ProgressBar(\n {\n style,\n className,\n size = 'm',\n variant = 'green',\n width = 36,\n value = 0,\n ...rest\n },\n forwardedRef\n ) {\n const clampedValue = clamp(value, 0, 1)\n\n return (\n <div\n style={\n {\n '--b-progress-bar-width': cssDimension(width),\n '--b-progress-bar-value': clampedValue,\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.ProgressBar,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n className\n )}\n ref={forwardedRef}\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={1}\n aria-valuenow={clampedValue}\n data-testid=\"bezier-progress-bar\"\n {...rest}\n >\n <div\n className={classNames(\n styles.ProgressBarActive,\n useThemeName() === 'dark' && styles['dark-theme']\n )}\n />\n </div>\n )\n }\n)\n"],"names":["ProgressBar","forwardRef","style","className","size","variant","width","value","rest","forwardedRef","clampedValue","clamp","React","createElement","Object","assign","cssDimension","classNames","styles","ref","role","ProgressBarActive","useThemeName"],"mappings":";;;;;;;;;MAaaA,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;SACEE,OAAK;EACLC,SAAS;AACTC,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,OAAO,GAAG,OAAO;AACjBC,EAAAA,KAAK,GAAG,EAAE;AACVC,EAAAA,KAAK,GAAG,CAAC;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,YAAY,GAAGC,YAAK,CAACJ,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAEvC,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEb,IAAAA,KAAK,EACH;AACE,MAAA,wBAAwB,EAAEc,kBAAY,CAACV,KAAK,CAAC;AAC7C,MAAA,wBAAwB,EAAEI,YAAY;MACtC,GAAGR,OAAAA;KAEN;IACDC,SAAS,EAAEc,aAAU,CACnBC,0BAAM,CAAClB,WAAW,EAClBkB,0BAAM,CAAE,CAAOd,KAAAA,EAAAA,IAAK,EAAC,CAAC,EACtBc,0BAAM,CAAE,CAAA,QAAA,EAAUb,OAAQ,CAAC,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFgB,IAAAA,GAAG,EAAEV,YAAa;AAClBW,IAAAA,IAAI,EAAC,aAAa;AAClB,IAAA,eAAA,EAAe,CAAE;AACjB,IAAA,eAAA,EAAe,CAAE;AACjB,IAAA,eAAA,EAAeV,YAAa;IAC5B,aAAY,EAAA,qBAAA;AAAqB,GAAA,EAC7BF,IAAI,CAAA,eAERI,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,SAAS,EAAEc,aAAU,CACnBC,0BAAM,CAACG,iBAAiB,EACxBC,0BAAY,EAAE,KAAK,MAAM,IAAIJ,0BAAM,CAAC,YAAY,CAClD,CAAA;AAAE,GACH,CACE,CAAC,CAAA;AAEV,CACF;;;;"}
1
+ {"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { clamp } from '~/src/utils/number'\nimport { cssDimension } from '~/src/utils/style'\n\nimport { useThemeName } from '~/src/components/ThemeProvider'\n\nimport type { ProgressBarProps } from './ProgressBar.types'\n\nimport styles from './ProgressBar.module.scss'\n\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n function ProgressBar(\n {\n style,\n className,\n size = 'm',\n variant = 'green',\n width = 36,\n value = 0,\n ...rest\n },\n forwardedRef\n ) {\n const clampedValue = clamp(value, 0, 1)\n\n return (\n <div\n style={\n {\n '--b-progress-bar-width': cssDimension(width),\n '--b-progress-bar-value': clampedValue,\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.ProgressBar,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n className\n )}\n ref={forwardedRef}\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={1}\n aria-valuenow={clampedValue}\n data-testid=\"bezier-progress-bar\"\n {...rest}\n >\n <div\n className={classNames(\n styles.ProgressBarActive,\n useThemeName() === 'dark' && styles['dark-theme']\n )}\n />\n </div>\n )\n }\n)\n"],"names":["ProgressBar","forwardRef","style","className","size","variant","width","value","rest","forwardedRef","clampedValue","clamp","React","createElement","Object","assign","cssDimension","classNames","styles","ref","role","ProgressBarActive","useThemeName"],"mappings":";;;;;;;;;MAaaA,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;SACEE,OAAK;EACLC,SAAS;AACTC,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,OAAO,GAAG,OAAO;AACjBC,EAAAA,KAAK,GAAG,EAAE;AACVC,EAAAA,KAAK,GAAG,CAAC;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,YAAY,GAAGC,YAAK,CAACJ,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAEvC,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEb,IAAAA,KAAK,EACH;AACE,MAAA,wBAAwB,EAAEc,kBAAY,CAACV,KAAK,CAAC;AAC7C,MAAA,wBAAwB,EAAEI,YAAY;MACtC,GAAGR,OAAAA;KAEN;IACDC,SAAS,EAAEc,aAAU,CACnBC,0BAAM,CAAClB,WAAW,EAClBkB,0BAAM,CAAC,CAAQd,KAAAA,EAAAA,IAAI,EAAE,CAAC,EACtBc,0BAAM,CAAC,CAAA,QAAA,EAAWb,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFgB,IAAAA,GAAG,EAAEV,YAAa;AAClBW,IAAAA,IAAI,EAAC,aAAa;AAClB,IAAA,eAAA,EAAe,CAAE;AACjB,IAAA,eAAA,EAAe,CAAE;AACjB,IAAA,eAAA,EAAeV,YAAa;IAC5B,aAAY,EAAA,qBAAA;AAAqB,GAAA,EAC7BF,IAAI,CAAA,eAERI,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,SAAS,EAAEc,aAAU,CACnBC,0BAAM,CAACG,iBAAiB,EACxBC,0BAAY,EAAE,KAAK,MAAM,IAAIJ,0BAAM,CAAC,YAAY,CAClD,CAAA;AAAE,GACH,CACE,CAAC,CAAA;AAEV,CACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.js","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, {\n type ForwardedRef,\n forwardRef,\n useEffect,\n useMemo,\n useState,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport classNames from 'classnames'\n\nimport { ariaAttr } from '~/src/utils/aria'\nimport { createContext } from '~/src/utils/react'\nimport { cssDimension } from '~/src/utils/style'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Divider } from '~/src/components/Divider'\nimport dividerStyles from '~/src/components/Divider/Divider.module.scss'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { HStack } from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type SegmentedControlItemListProps,\n type SegmentedControlItemProps,\n type SegmentedControlProps,\n type SegmentedControlRadioGroupProps,\n type SegmentedControlTabContentProps,\n type SegmentedControlTabListProps,\n type SegmentedControlTabsProps,\n type SegmentedControlType,\n} from './SegmentedControl.types'\n\nimport styles from './SegmentedControl.module.scss'\n\ntype SegmentedControlContextValue = Required<\n Pick<\n SegmentedControlProps<SegmentedControlType, string>,\n 'type' | 'size' | 'width'\n >\n>\n\nconst [SegmentedControlContextProvider, useSegmentedControlContext] =\n createContext<SegmentedControlContextValue | null>(null, 'SegmentedControl')\n\ntype SegmentedControlItemListContextValue = {\n setSelectedItemIndex: (index: number | null) => void\n}\n\nconst [SegmentedControlItemContextProvider, useSegmentedControlItemContext] =\n createContext<number | null>(null, 'SegmentedControlItem')\n\nconst [\n SegmentedControlItemListContextProvider,\n useSegmentedControlItemListContext,\n] = createContext<SegmentedControlItemListContextValue | null>(\n null,\n 'SegmentedControlItemList'\n)\n\nfunction SegmentedControlItemListImpl<\n Type extends SegmentedControlType,\n Value extends string,\n>(\n {\n children,\n style,\n className,\n ...rest\n }: SegmentedControlItemListProps<Type, Value>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(\n null\n )\n\n const { type, size, width } = useSegmentedControlContext(\n 'SegmentedControlItemList'\n )\n\n const contextValue: SegmentedControlItemListContextValue = useMemo(\n () => ({\n setSelectedItemIndex,\n }),\n []\n )\n\n const SegmentedControlItemList =\n type === 'radiogroup' ? RadioGroupPrimitive.Root : TabsPrimitive.List\n\n return (\n <SegmentedControlItemList\n asChild\n ref={forwardedRef}\n {...rest}\n >\n <div\n style={\n {\n '--b-segmented-control-width': cssDimension(width),\n '--b-segmented-control-item-index': selectedItemIndex,\n '--b-segmented-control-item-count': React.Children.count(children),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.SegmentedControl,\n styles[`size-${size}`],\n className\n )}\n >\n <SegmentedControlItemListContextProvider value={contextValue}>\n {React.Children.map(children, (child, index) => (\n <>\n {index !== 0 && (\n <Divider\n withoutParallelIndent\n orientation=\"vertical\"\n />\n )}\n <SegmentedControlItemContextProvider value={index}>\n {child}\n </SegmentedControlItemContextProvider>\n </>\n ))}\n {!isNil(selectedItemIndex) && (\n <div\n className={classNames(\n styles.SegmentedControlIndicator,\n dividerStyles.variables\n )}\n />\n )}\n </SegmentedControlItemListContextProvider>\n </div>\n </SegmentedControlItemList>\n )\n}\n\nconst SegmentedControlItemList = forwardRef(SegmentedControlItemListImpl) as <\n Type extends SegmentedControlType,\n Value extends string,\n>(\n props: SegmentedControlItemListProps<Type, Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\nfunction SegmentedControlRadioGroupImpl<Value extends string>(\n { children, size, ...rest }: SegmentedControlRadioGroupProps<Value>,\n forwardedRef: React.Ref<HTMLDivElement>\n) {\n const { hasError, ...ownProps } = useFormFieldProps(rest)\n return (\n <SegmentedControlItemList\n ref={forwardedRef}\n {...ownProps}\n size={size}\n >\n {children}\n </SegmentedControlItemList>\n )\n}\n\nconst SegmentedControlRadioGroup = forwardRef(\n SegmentedControlRadioGroupImpl\n) as <Value extends string>(\n props: SegmentedControlRadioGroupProps<Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabList` is the component that wraps `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabList = SegmentedControlItemList as (\n props: SegmentedControlTabListProps & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabContent` is the component that wraps the content that corresponds to a specific value of `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabContent = TabsPrimitive.Content as <\n Value extends string,\n>(\n props: SegmentedControlTabContentProps<Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\nconst SegmentedControlTabs = TabsPrimitive.Root as <Value extends string>(\n props: SegmentedControlTabsProps<Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\nfunction SegmentedControlImpl<\n Type extends SegmentedControlType,\n Value extends string,\n>(\n {\n type = 'radiogroup' as Type,\n size = 'm',\n width = '100%',\n onValueChange,\n children,\n ...rest\n }: SegmentedControlProps<Type, Value>,\n forwardedRef: React.Ref<HTMLDivElement>\n) {\n const SegmentedControlRoot =\n type === 'radiogroup' ? SegmentedControlRadioGroup : SegmentedControlTabs\n\n const contextValue = useMemo(\n () => ({\n type,\n size,\n width,\n }),\n [type, size, width]\n )\n\n return (\n <SegmentedControlContextProvider value={contextValue}>\n <SegmentedControlRoot\n ref={forwardedRef}\n onValueChange={onValueChange}\n {...rest}\n >\n {children}\n </SegmentedControlRoot>\n </SegmentedControlContextProvider>\n )\n}\n\n/**\n * `SegmentedControl` is component that looks like a combination of a radio and a button.\n * They can be used in place of tabs and as input elements in modals.\n * If you have more than five items, use a different element, such as a dropdown.\n *\n * `SegmentedControl` can be used as a radio group, tabs element depending on its `type`.\n * @example\n *\n * ```tsx\n * // Anatomy of the SegmentedControl type=\"radiogroup\"\n * <SegmentedControl type=\"radiogroup\">\n * <SegmentedControlItem />\n * </SegmentedControl>\n *\n * // Anatomy of the SegmentedControl type=\"tabs\"\n * <SegmentedControl type=\"tabs\">\n * <SegmentedControlTabList>\n * <SegmentedControlItem />\n * </SegmentedControlTabList>\n *\n * <SegmentedControlTabContent />\n * </SegmentedControl>\n * ```\n */\nexport const SegmentedControl = forwardRef(SegmentedControlImpl) as <\n Type extends SegmentedControlType,\n Value extends string,\n>(\n props: SegmentedControlProps<Type, Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\n/**\n * NOTE: (@ed) A property injected at runtime by the radix-ui lib.\n */\ntype ItemProps<Type extends SegmentedControlType> = (Type extends 'radiogroup'\n ? { 'data-state'?: 'unchecked' | 'checked' }\n : { 'data-state'?: 'inactive' | 'active' }) &\n React.HTMLAttributes<HTMLButtonElement> &\n Partial<SegmentedControlItemProps<Type>>\n\nconst Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(\n function Item(\n { children, leftContent, rightContent, className, ...rest },\n forwardedRef\n ) {\n const { type, size } = useSegmentedControlContext('SegmentedControlItem')\n const { setSelectedItemIndex } = useSegmentedControlItemListContext(\n 'SegmentedControlItem'\n )\n const index = useSegmentedControlItemContext('SegmentedControlItem')\n\n const checked =\n type === 'radiogroup'\n ? (rest as ItemProps<typeof type>)?.['data-state'] === 'checked'\n : (rest as ItemProps<typeof type>)?.['data-state'] === 'active'\n\n useEffect(\n function setSelectedItem() {\n if (checked) {\n setSelectedItemIndex(index)\n }\n },\n [checked, index, setSelectedItemIndex]\n )\n\n return (\n <BaseButton\n {...rest}\n ref={forwardedRef}\n data-checked={ariaAttr(checked)}\n className={classNames(styles.SegmentedControlItem, className)}\n >\n <HStack\n className={styles.SegmentedControlItemContainer}\n align=\"center\"\n spacing={2}\n >\n {leftContent}\n <Text\n className={styles.SegmentedControlItemLabel}\n bold\n truncated\n typo={size === 'xs' ? '13' : '14'}\n >\n {children}\n </Text>\n {rightContent}\n </HStack>\n </BaseButton>\n )\n }\n)\n\nfunction SegmentedControlItemImpl<Value extends string>(\n { children, ...rest }: SegmentedControlItemProps<Value>,\n forwardedRef: React.Ref<HTMLButtonElement>\n) {\n const { type } = useSegmentedControlContext('SegmentedControlItem')\n\n const SegmentedControlItem =\n type === 'radiogroup' ? RadioGroupPrimitive.Item : TabsPrimitive.Trigger\n\n return (\n <SegmentedControlItem\n asChild\n ref={forwardedRef}\n {...rest}\n >\n <Item>{children}</Item>\n </SegmentedControlItem>\n )\n}\n\n/**\n * `SegmentedControlItem` component is each item in `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `radiogroup`, this component acts as a radio item.\n * In this case, it must be used as a child of `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `tabs`, this component acts as a tab item.\n * In this case, it must be used as a child of `SegmentedControlTabList`.\n */\nexport const SegmentedControlItem = forwardRef(SegmentedControlItemImpl) as <\n Value extends string,\n>(\n props: SegmentedControlItemProps<Value> & {\n ref?: React.ForwardedRef<HTMLButtonElement>\n }\n) => JSX.Element\n"],"names":["SegmentedControlContextProvider","useSegmentedControlContext","createContext","SegmentedControlItemContextProvider","useSegmentedControlItemContext","SegmentedControlItemListContextProvider","useSegmentedControlItemListContext","SegmentedControlItemListImpl","children","style","className","rest","forwardedRef","selectedItemIndex","setSelectedItemIndex","useState","type","size","width","contextValue","useMemo","SegmentedControlItemList","RadioGroupPrimitive","TabsPrimitive","React","createElement","Object","assign","asChild","ref","cssDimension","Children","count","classNames","styles","SegmentedControl","value","map","child","index","Fragment","Divider","withoutParallelIndent","orientation","isNil","SegmentedControlIndicator","dividerStyles","variables","forwardRef","SegmentedControlRadioGroupImpl","hasError","ownProps","useFormFieldProps","SegmentedControlRadioGroup","SegmentedControlTabList","SegmentedControlTabContent","SegmentedControlTabs","SegmentedControlImpl","onValueChange","SegmentedControlRoot","Item","leftContent","rightContent","checked","useEffect","setSelectedItem","BaseButton","ariaAttr","SegmentedControlItem","HStack","SegmentedControlItemContainer","align","spacing","Text","SegmentedControlItemLabel","bold","truncated","typo","SegmentedControlItemImpl"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,MAAM,CAACA,+BAA+B,EAAEC,0BAA0B,CAAC,GACjEC,mBAAa,CAAsC,IAAI,EAAE,kBAAkB,CAAC,CAAA;AAM9E,MAAM,CAACC,mCAAmC,EAAEC,8BAA8B,CAAC,GACzEF,mBAAa,CAAgB,IAAI,EAAE,sBAAsB,CAAC,CAAA;AAE5D,MAAM,CACJG,uCAAuC,EACvCC,kCAAkC,CACnC,GAAGJ,mBAAa,CACf,IAAI,EACJ,0BACF,CAAC,CAAA;AAED,SAASK,4BAA4BA,CAInC;EACEC,QAAQ;SACRC,OAAK;EACLC,SAAS;EACT,GAAGC,IAAAA;AACuC,CAAC,EAC7CC,YAA0C,EAC1C;EACA,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CACxD,IACF,CAAC,CAAA;EAED,MAAM;UAAEC,MAAI;IAAEC,IAAI;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAGjB,0BAA0B,CACtD,0BACF,CAAC,CAAA;AAED,EAAA,MAAMkB,YAAkD,GAAGC,aAAO,CAChE,OAAO;AACLN,IAAAA,oBAAAA;GACD,CAAC,EACF,EACF,CAAC,CAAA;AAED,EAAA,MAAMO,wBAAwB,GAC5BL,MAAI,KAAK,YAAY,GAAGM,YAAwB,GAAGC,UAAkB,CAAA;EAEvE,oBACEC,KAAA,CAAAC,aAAA,CAACJ,wBAAwB,EAAAK,MAAA,CAAAC,MAAA,CAAA;IACvBC,OAAO,EAAA,IAAA;AACPC,IAAAA,GAAG,EAAEjB,YAAAA;AAAa,GAAA,EACdD,IAAI,CAAA,eAERa,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEhB,IAAAA,KAAK,EACH;AACE,MAAA,6BAA6B,EAAEqB,kBAAY,CAACZ,KAAK,CAAC;AAClD,MAAA,kCAAkC,EAAEL,iBAAiB;MACrD,kCAAkC,EAAEW,KAAK,CAACO,QAAQ,CAACC,KAAK,CAACxB,QAAQ,CAAC;MAClE,GAAGC,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEuB,eAAU,CACnBC,+BAAM,CAACC,gBAAgB,EACvBD,+BAAM,CAAE,CAAOjB,KAAAA,EAAAA,IAAK,CAAC,CAAA,CAAC,EACtBP,SACF,CAAA;AAAE,GAAA,eAEFc,KAAA,CAAAC,aAAA,CAACpB,uCAAuC,EAAA;AAAC+B,IAAAA,KAAK,EAAEjB,YAAAA;AAAa,GAAA,EAC1DK,KAAK,CAACO,QAAQ,CAACM,GAAG,CAAC7B,QAAQ,EAAE,CAAC8B,KAAK,EAAEC,KAAK,kBACzCf,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAgB,QAAA,EACGD,IAAAA,EAAAA,KAAK,KAAK,CAAC,iBACVf,KAAA,CAAAC,aAAA,CAACgB,eAAO,EAAA;IACNC,qBAAqB,EAAA,IAAA;AACrBC,IAAAA,WAAW,EAAC,UAAA;AAAU,GACvB,CACF,eACDnB,KAAA,CAAAC,aAAA,CAACtB,mCAAmC,EAAA;AAACiC,IAAAA,KAAK,EAAEG,KAAAA;AAAM,GAAA,EAC/CD,KACkC,CACrC,CACH,CAAC,EACD,CAACM,UAAK,CAAC/B,iBAAiB,CAAC,iBACxBW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEf,SAAS,EAAEuB,eAAU,CACnBC,+BAAM,CAACW,yBAAyB,EAChCC,sBAAa,CAACC,SAChB,CAAA;GACD,CAEoC,CACtC,CACmB,CAAC,CAAA;AAE/B,CAAA;AAEA,MAAM1B,wBAAwB,gBAAG2B,gBAAU,CAACzC,4BAA4B,CAOxD,CAAA;AAEhB,SAAS0C,8BAA8BA,CACrC;EAAEzC,QAAQ;EAAES,IAAI;EAAE,GAAGN,IAAAA;AAA6C,CAAC,EACnEC,YAAuC,EACvC;EACA,MAAM;IAAEsC,QAAQ;IAAE,GAAGC,QAAAA;AAAS,GAAC,GAAGC,6BAAiB,CAACzC,IAAI,CAAC,CAAA;EACzD,oBACEa,KAAA,CAAAC,aAAA,CAACJ,wBAAwB,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACvBE,IAAAA,GAAG,EAAEjB,YAAAA;AAAa,GAAA,EACduC,QAAQ,EAAA;AACZlC,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,CAAA,EAEVT,QACuB,CAAC,CAAA;AAE/B,CAAA;AAEA,MAAM6C,0BAA0B,gBAAGL,gBAAU,CAC3CC,8BACF,CAIgB,CAAA;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACO,MAAMK,uBAAuB,GAAGjC,yBAIvB;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACakC,MAAAA,0BAA0B,GAAGhC,cAM1B;AAEhB,MAAMiC,oBAAoB,GAAGjC,UAIb,CAAA;AAEhB,SAASkC,oBAAoBA,CAI3B;AACEzC,EAAAA,IAAI,GAAG,YAAoB;AAC3BC,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,KAAK,GAAG,MAAM;EACdwC,aAAa;EACblD,QAAQ;EACR,GAAGG,IAAAA;AAC+B,CAAC,EACrCC,YAAuC,EACvC;EACA,MAAM+C,oBAAoB,GACxB3C,IAAI,KAAK,YAAY,GAAGqC,0BAA0B,GAAGG,oBAAoB,CAAA;AAE3E,EAAA,MAAMrC,YAAY,GAAGC,aAAO,CAC1B,OAAO;IACLJ,IAAI;IACJC,IAAI;AACJC,IAAAA,KAAAA;GACD,CAAC,EACF,CAACF,IAAI,EAAEC,IAAI,EAAEC,KAAK,CACpB,CAAC,CAAA;AAED,EAAA,oBACEM,KAAA,CAAAC,aAAA,CAACzB,+BAA+B,EAAA;AAACoC,IAAAA,KAAK,EAAEjB,YAAAA;GACtCK,eAAAA,KAAA,CAAAC,aAAA,CAACkC,oBAAoB,EAAAjC,MAAA,CAAAC,MAAA,CAAA;AACnBE,IAAAA,GAAG,EAAEjB,YAAa;AAClB8C,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,EACzB/C,IAAI,CAAA,EAEPH,QACmB,CACS,CAAC,CAAA;AAEtC,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACa2B,gBAAgB,gBAAGa,gBAAU,CAACS,oBAAoB,EAO/C;;AAEhB;AACA;AACA;;AAOA,MAAMG,IAAI,gBAAGZ,gBAAU,CACrB,SAASY,IAAIA,CACX;EAAEpD,QAAQ;EAAEqD,WAAW;EAAEC,YAAY;EAAEpD,SAAS;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAC3DC,YAAY,EACZ;EACA,MAAM;IAAEI,IAAI;AAAEC,IAAAA,IAAAA;AAAK,GAAC,GAAGhB,0BAA0B,CAAC,sBAAsB,CAAC,CAAA;EACzE,MAAM;AAAEa,IAAAA,oBAAAA;AAAqB,GAAC,GAAGR,kCAAkC,CACjE,sBACF,CAAC,CAAA;AACD,EAAA,MAAMiC,KAAK,GAAGnC,8BAA8B,CAAC,sBAAsB,CAAC,CAAA;AAEpE,EAAA,MAAM2D,OAAO,GACX/C,IAAI,KAAK,YAAY,GAChBL,IAAI,GAA8B,YAAY,CAAC,KAAK,SAAS,GAC7DA,IAAI,GAA8B,YAAY,CAAC,KAAK,QAAQ,CAAA;AAEnEqD,EAAAA,eAAS,CACP,SAASC,eAAeA,GAAG;AACzB,IAAA,IAAIF,OAAO,EAAE;MACXjD,oBAAoB,CAACyB,KAAK,CAAC,CAAA;AAC7B,KAAA;GACD,EACD,CAACwB,OAAO,EAAExB,KAAK,EAAEzB,oBAAoB,CACvC,CAAC,CAAA;EAED,oBACEU,KAAA,CAAAC,aAAA,CAACyC,qBAAU,EAAAxC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACLhB,IAAI,EAAA;AACRkB,IAAAA,GAAG,EAAEjB,YAAa;IAClB,cAAcuD,EAAAA,aAAQ,CAACJ,OAAO,CAAE;AAChCrD,IAAAA,SAAS,EAAEuB,eAAU,CAACC,+BAAM,CAACkC,oBAAoB,EAAE1D,SAAS,CAAA;AAAE,GAAA,CAAA,eAE9Dc,KAAA,CAAAC,aAAA,CAAC4C,YAAM,EAAA;IACL3D,SAAS,EAAEwB,+BAAM,CAACoC,6BAA8B;AAChDC,IAAAA,KAAK,EAAC,QAAQ;AACdC,IAAAA,OAAO,EAAE,CAAA;AAAE,GAAA,EAEVX,WAAW,eACZrC,KAAA,CAAAC,aAAA,CAACgD,SAAI,EAAA;IACH/D,SAAS,EAAEwB,+BAAM,CAACwC,yBAA0B;IAC5CC,IAAI,EAAA,IAAA;IACJC,SAAS,EAAA,IAAA;AACTC,IAAAA,IAAI,EAAE5D,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAA;AAAK,GAAA,EAEjCT,QACG,CAAC,EACNsD,YACK,CACE,CAAC,CAAA;AAEjB,CACF,CAAC,CAAA;AAED,SAASgB,wBAAwBA,CAC/B;EAAEtE,QAAQ;EAAE,GAAGG,IAAAA;AAAuC,CAAC,EACvDC,YAA0C,EAC1C;EACA,MAAM;AAAEI,IAAAA,IAAAA;AAAK,GAAC,GAAGf,0BAA0B,CAAC,sBAAsB,CAAC,CAAA;AAEnE,EAAA,MAAMmE,oBAAoB,GACxBpD,IAAI,KAAK,YAAY,GAAGM,YAAwB,GAAGC,aAAqB,CAAA;EAE1E,oBACEC,KAAA,CAAAC,aAAA,CAAC2C,oBAAoB,EAAA1C,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPC,IAAAA,GAAG,EAAEjB,YAAAA;GACDD,EAAAA,IAAI,CAERa,eAAAA,KAAA,CAAAC,aAAA,CAACmC,IAAI,EAAA,IAAA,EAAEpD,QAAe,CACF,CAAC,CAAA;AAE3B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACa4D,oBAAoB,gBAAGpB,gBAAU,CAAC8B,wBAAwB;;;;;;;"}
1
+ {"version":3,"file":"SegmentedControl.js","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, {\n type ForwardedRef,\n forwardRef,\n useEffect,\n useMemo,\n useState,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport classNames from 'classnames'\n\nimport { ariaAttr } from '~/src/utils/aria'\nimport { createContext } from '~/src/utils/react'\nimport { cssDimension } from '~/src/utils/style'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Divider } from '~/src/components/Divider'\nimport dividerStyles from '~/src/components/Divider/Divider.module.scss'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { HStack } from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type SegmentedControlItemListProps,\n type SegmentedControlItemProps,\n type SegmentedControlProps,\n type SegmentedControlRadioGroupProps,\n type SegmentedControlTabContentProps,\n type SegmentedControlTabListProps,\n type SegmentedControlTabsProps,\n type SegmentedControlType,\n} from './SegmentedControl.types'\n\nimport styles from './SegmentedControl.module.scss'\n\ntype SegmentedControlContextValue = Required<\n Pick<\n SegmentedControlProps<SegmentedControlType, string>,\n 'type' | 'size' | 'width'\n >\n>\n\nconst [SegmentedControlContextProvider, useSegmentedControlContext] =\n createContext<SegmentedControlContextValue | null>(null, 'SegmentedControl')\n\ntype SegmentedControlItemListContextValue = {\n setSelectedItemIndex: (index: number | null) => void\n}\n\nconst [SegmentedControlItemContextProvider, useSegmentedControlItemContext] =\n createContext<number | null>(null, 'SegmentedControlItem')\n\nconst [\n SegmentedControlItemListContextProvider,\n useSegmentedControlItemListContext,\n] = createContext<SegmentedControlItemListContextValue | null>(\n null,\n 'SegmentedControlItemList'\n)\n\nfunction SegmentedControlItemListImpl<\n Type extends SegmentedControlType,\n Value extends string,\n>(\n {\n children,\n style,\n className,\n ...rest\n }: SegmentedControlItemListProps<Type, Value>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(\n null\n )\n\n const { type, size, width } = useSegmentedControlContext(\n 'SegmentedControlItemList'\n )\n\n const contextValue: SegmentedControlItemListContextValue = useMemo(\n () => ({\n setSelectedItemIndex,\n }),\n []\n )\n\n const SegmentedControlItemList =\n type === 'radiogroup' ? RadioGroupPrimitive.Root : TabsPrimitive.List\n\n return (\n <SegmentedControlItemList\n asChild\n ref={forwardedRef}\n {...rest}\n >\n <div\n style={\n {\n '--b-segmented-control-width': cssDimension(width),\n '--b-segmented-control-item-index': selectedItemIndex,\n '--b-segmented-control-item-count': React.Children.count(children),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.SegmentedControl,\n styles[`size-${size}`],\n className\n )}\n >\n <SegmentedControlItemListContextProvider value={contextValue}>\n {React.Children.map(children, (child, index) => (\n <>\n {index !== 0 && (\n <Divider\n withoutParallelIndent\n orientation=\"vertical\"\n />\n )}\n <SegmentedControlItemContextProvider value={index}>\n {child}\n </SegmentedControlItemContextProvider>\n </>\n ))}\n {!isNil(selectedItemIndex) && (\n <div\n className={classNames(\n styles.SegmentedControlIndicator,\n dividerStyles.variables\n )}\n />\n )}\n </SegmentedControlItemListContextProvider>\n </div>\n </SegmentedControlItemList>\n )\n}\n\nconst SegmentedControlItemList = forwardRef(SegmentedControlItemListImpl) as <\n Type extends SegmentedControlType,\n Value extends string,\n>(\n props: SegmentedControlItemListProps<Type, Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\nfunction SegmentedControlRadioGroupImpl<Value extends string>(\n { children, size, ...rest }: SegmentedControlRadioGroupProps<Value>,\n forwardedRef: React.Ref<HTMLDivElement>\n) {\n const { hasError, ...ownProps } = useFormFieldProps(rest)\n return (\n <SegmentedControlItemList\n ref={forwardedRef}\n {...ownProps}\n size={size}\n >\n {children}\n </SegmentedControlItemList>\n )\n}\n\nconst SegmentedControlRadioGroup = forwardRef(\n SegmentedControlRadioGroupImpl\n) as <Value extends string>(\n props: SegmentedControlRadioGroupProps<Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabList` is the component that wraps `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabList = SegmentedControlItemList as (\n props: SegmentedControlTabListProps & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabContent` is the component that wraps the content that corresponds to a specific value of `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabContent = TabsPrimitive.Content as <\n Value extends string,\n>(\n props: SegmentedControlTabContentProps<Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\nconst SegmentedControlTabs = TabsPrimitive.Root as <Value extends string>(\n props: SegmentedControlTabsProps<Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\nfunction SegmentedControlImpl<\n Type extends SegmentedControlType,\n Value extends string,\n>(\n {\n type = 'radiogroup' as Type,\n size = 'm',\n width = '100%',\n onValueChange,\n children,\n ...rest\n }: SegmentedControlProps<Type, Value>,\n forwardedRef: React.Ref<HTMLDivElement>\n) {\n const SegmentedControlRoot =\n type === 'radiogroup' ? SegmentedControlRadioGroup : SegmentedControlTabs\n\n const contextValue = useMemo(\n () => ({\n type,\n size,\n width,\n }),\n [type, size, width]\n )\n\n return (\n <SegmentedControlContextProvider value={contextValue}>\n <SegmentedControlRoot\n ref={forwardedRef}\n onValueChange={onValueChange}\n {...rest}\n >\n {children}\n </SegmentedControlRoot>\n </SegmentedControlContextProvider>\n )\n}\n\n/**\n * `SegmentedControl` is component that looks like a combination of a radio and a button.\n * They can be used in place of tabs and as input elements in modals.\n * If you have more than five items, use a different element, such as a dropdown.\n *\n * `SegmentedControl` can be used as a radio group, tabs element depending on its `type`.\n * @example\n *\n * ```tsx\n * // Anatomy of the SegmentedControl type=\"radiogroup\"\n * <SegmentedControl type=\"radiogroup\">\n * <SegmentedControlItem />\n * </SegmentedControl>\n *\n * // Anatomy of the SegmentedControl type=\"tabs\"\n * <SegmentedControl type=\"tabs\">\n * <SegmentedControlTabList>\n * <SegmentedControlItem />\n * </SegmentedControlTabList>\n *\n * <SegmentedControlTabContent />\n * </SegmentedControl>\n * ```\n */\nexport const SegmentedControl = forwardRef(SegmentedControlImpl) as <\n Type extends SegmentedControlType,\n Value extends string,\n>(\n props: SegmentedControlProps<Type, Value> & {\n ref?: React.ForwardedRef<HTMLDivElement>\n }\n) => JSX.Element\n\n/**\n * NOTE: (@ed) A property injected at runtime by the radix-ui lib.\n */\ntype ItemProps<Type extends SegmentedControlType> = (Type extends 'radiogroup'\n ? { 'data-state'?: 'unchecked' | 'checked' }\n : { 'data-state'?: 'inactive' | 'active' }) &\n React.HTMLAttributes<HTMLButtonElement> &\n Partial<SegmentedControlItemProps<Type>>\n\nconst Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(\n function Item(\n { children, leftContent, rightContent, className, ...rest },\n forwardedRef\n ) {\n const { type, size } = useSegmentedControlContext('SegmentedControlItem')\n const { setSelectedItemIndex } = useSegmentedControlItemListContext(\n 'SegmentedControlItem'\n )\n const index = useSegmentedControlItemContext('SegmentedControlItem')\n\n const checked =\n type === 'radiogroup'\n ? (rest as ItemProps<typeof type>)?.['data-state'] === 'checked'\n : (rest as ItemProps<typeof type>)?.['data-state'] === 'active'\n\n useEffect(\n function setSelectedItem() {\n if (checked) {\n setSelectedItemIndex(index)\n }\n },\n [checked, index, setSelectedItemIndex]\n )\n\n return (\n <BaseButton\n {...rest}\n ref={forwardedRef}\n data-checked={ariaAttr(checked)}\n className={classNames(styles.SegmentedControlItem, className)}\n >\n <HStack\n className={styles.SegmentedControlItemContainer}\n align=\"center\"\n spacing={2}\n >\n {leftContent}\n <Text\n className={styles.SegmentedControlItemLabel}\n bold\n truncated\n typo={size === 'xs' ? '13' : '14'}\n >\n {children}\n </Text>\n {rightContent}\n </HStack>\n </BaseButton>\n )\n }\n)\n\nfunction SegmentedControlItemImpl<Value extends string>(\n { children, ...rest }: SegmentedControlItemProps<Value>,\n forwardedRef: React.Ref<HTMLButtonElement>\n) {\n const { type } = useSegmentedControlContext('SegmentedControlItem')\n\n const SegmentedControlItem =\n type === 'radiogroup' ? RadioGroupPrimitive.Item : TabsPrimitive.Trigger\n\n return (\n <SegmentedControlItem\n asChild\n ref={forwardedRef}\n {...rest}\n >\n <Item>{children}</Item>\n </SegmentedControlItem>\n )\n}\n\n/**\n * `SegmentedControlItem` component is each item in `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `radiogroup`, this component acts as a radio item.\n * In this case, it must be used as a child of `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `tabs`, this component acts as a tab item.\n * In this case, it must be used as a child of `SegmentedControlTabList`.\n */\nexport const SegmentedControlItem = forwardRef(SegmentedControlItemImpl) as <\n Value extends string,\n>(\n props: SegmentedControlItemProps<Value> & {\n ref?: React.ForwardedRef<HTMLButtonElement>\n }\n) => JSX.Element\n"],"names":["SegmentedControlContextProvider","useSegmentedControlContext","createContext","SegmentedControlItemContextProvider","useSegmentedControlItemContext","SegmentedControlItemListContextProvider","useSegmentedControlItemListContext","SegmentedControlItemListImpl","children","style","className","rest","forwardedRef","selectedItemIndex","setSelectedItemIndex","useState","type","size","width","contextValue","useMemo","SegmentedControlItemList","RadioGroupPrimitive","TabsPrimitive","React","createElement","Object","assign","asChild","ref","cssDimension","Children","count","classNames","styles","SegmentedControl","value","map","child","index","Fragment","Divider","withoutParallelIndent","orientation","isNil","SegmentedControlIndicator","dividerStyles","variables","forwardRef","SegmentedControlRadioGroupImpl","hasError","ownProps","useFormFieldProps","SegmentedControlRadioGroup","SegmentedControlTabList","SegmentedControlTabContent","SegmentedControlTabs","SegmentedControlImpl","onValueChange","SegmentedControlRoot","Item","leftContent","rightContent","checked","useEffect","setSelectedItem","BaseButton","ariaAttr","SegmentedControlItem","HStack","SegmentedControlItemContainer","align","spacing","Text","SegmentedControlItemLabel","bold","truncated","typo","SegmentedControlItemImpl"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,MAAM,CAACA,+BAA+B,EAAEC,0BAA0B,CAAC,GACjEC,mBAAa,CAAsC,IAAI,EAAE,kBAAkB,CAAC,CAAA;AAM9E,MAAM,CAACC,mCAAmC,EAAEC,8BAA8B,CAAC,GACzEF,mBAAa,CAAgB,IAAI,EAAE,sBAAsB,CAAC,CAAA;AAE5D,MAAM,CACJG,uCAAuC,EACvCC,kCAAkC,CACnC,GAAGJ,mBAAa,CACf,IAAI,EACJ,0BACF,CAAC,CAAA;AAED,SAASK,4BAA4BA,CAInC;EACEC,QAAQ;SACRC,OAAK;EACLC,SAAS;EACT,GAAGC,IAAAA;AACuC,CAAC,EAC7CC,YAA0C,EAC1C;EACA,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CACxD,IACF,CAAC,CAAA;EAED,MAAM;UAAEC,MAAI;IAAEC,IAAI;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAGjB,0BAA0B,CACtD,0BACF,CAAC,CAAA;AAED,EAAA,MAAMkB,YAAkD,GAAGC,aAAO,CAChE,OAAO;AACLN,IAAAA,oBAAAA;GACD,CAAC,EACF,EACF,CAAC,CAAA;AAED,EAAA,MAAMO,wBAAwB,GAC5BL,MAAI,KAAK,YAAY,GAAGM,YAAwB,GAAGC,UAAkB,CAAA;EAEvE,oBACEC,KAAA,CAAAC,aAAA,CAACJ,wBAAwB,EAAAK,MAAA,CAAAC,MAAA,CAAA;IACvBC,OAAO,EAAA,IAAA;AACPC,IAAAA,GAAG,EAAEjB,YAAAA;AAAa,GAAA,EACdD,IAAI,CAAA,eAERa,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEhB,IAAAA,KAAK,EACH;AACE,MAAA,6BAA6B,EAAEqB,kBAAY,CAACZ,KAAK,CAAC;AAClD,MAAA,kCAAkC,EAAEL,iBAAiB;MACrD,kCAAkC,EAAEW,KAAK,CAACO,QAAQ,CAACC,KAAK,CAACxB,QAAQ,CAAC;MAClE,GAAGC,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEuB,eAAU,CACnBC,+BAAM,CAACC,gBAAgB,EACvBD,+BAAM,CAAC,CAAQjB,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EACtBP,SACF,CAAA;AAAE,GAAA,eAEFc,KAAA,CAAAC,aAAA,CAACpB,uCAAuC,EAAA;AAAC+B,IAAAA,KAAK,EAAEjB,YAAAA;AAAa,GAAA,EAC1DK,KAAK,CAACO,QAAQ,CAACM,GAAG,CAAC7B,QAAQ,EAAE,CAAC8B,KAAK,EAAEC,KAAK,kBACzCf,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAgB,QAAA,EACGD,IAAAA,EAAAA,KAAK,KAAK,CAAC,iBACVf,KAAA,CAAAC,aAAA,CAACgB,eAAO,EAAA;IACNC,qBAAqB,EAAA,IAAA;AACrBC,IAAAA,WAAW,EAAC,UAAA;AAAU,GACvB,CACF,eACDnB,KAAA,CAAAC,aAAA,CAACtB,mCAAmC,EAAA;AAACiC,IAAAA,KAAK,EAAEG,KAAAA;AAAM,GAAA,EAC/CD,KACkC,CACrC,CACH,CAAC,EACD,CAACM,UAAK,CAAC/B,iBAAiB,CAAC,iBACxBW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEf,SAAS,EAAEuB,eAAU,CACnBC,+BAAM,CAACW,yBAAyB,EAChCC,sBAAa,CAACC,SAChB,CAAA;GACD,CAEoC,CACtC,CACmB,CAAC,CAAA;AAE/B,CAAA;AAEA,MAAM1B,wBAAwB,gBAAG2B,gBAAU,CAACzC,4BAA4B,CAOxD,CAAA;AAEhB,SAAS0C,8BAA8BA,CACrC;EAAEzC,QAAQ;EAAES,IAAI;EAAE,GAAGN,IAAAA;AAA6C,CAAC,EACnEC,YAAuC,EACvC;EACA,MAAM;IAAEsC,QAAQ;IAAE,GAAGC,QAAAA;AAAS,GAAC,GAAGC,6BAAiB,CAACzC,IAAI,CAAC,CAAA;EACzD,oBACEa,KAAA,CAAAC,aAAA,CAACJ,wBAAwB,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACvBE,IAAAA,GAAG,EAAEjB,YAAAA;AAAa,GAAA,EACduC,QAAQ,EAAA;AACZlC,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,CAAA,EAEVT,QACuB,CAAC,CAAA;AAE/B,CAAA;AAEA,MAAM6C,0BAA0B,gBAAGL,gBAAU,CAC3CC,8BACF,CAIgB,CAAA;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACO,MAAMK,uBAAuB,GAAGjC,yBAIvB;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACakC,MAAAA,0BAA0B,GAAGhC,cAM1B;AAEhB,MAAMiC,oBAAoB,GAAGjC,UAIb,CAAA;AAEhB,SAASkC,oBAAoBA,CAI3B;AACEzC,EAAAA,IAAI,GAAG,YAAoB;AAC3BC,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,KAAK,GAAG,MAAM;EACdwC,aAAa;EACblD,QAAQ;EACR,GAAGG,IAAAA;AAC+B,CAAC,EACrCC,YAAuC,EACvC;EACA,MAAM+C,oBAAoB,GACxB3C,IAAI,KAAK,YAAY,GAAGqC,0BAA0B,GAAGG,oBAAoB,CAAA;AAE3E,EAAA,MAAMrC,YAAY,GAAGC,aAAO,CAC1B,OAAO;IACLJ,IAAI;IACJC,IAAI;AACJC,IAAAA,KAAAA;GACD,CAAC,EACF,CAACF,IAAI,EAAEC,IAAI,EAAEC,KAAK,CACpB,CAAC,CAAA;AAED,EAAA,oBACEM,KAAA,CAAAC,aAAA,CAACzB,+BAA+B,EAAA;AAACoC,IAAAA,KAAK,EAAEjB,YAAAA;GACtCK,eAAAA,KAAA,CAAAC,aAAA,CAACkC,oBAAoB,EAAAjC,MAAA,CAAAC,MAAA,CAAA;AACnBE,IAAAA,GAAG,EAAEjB,YAAa;AAClB8C,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,EACzB/C,IAAI,CAAA,EAEPH,QACmB,CACS,CAAC,CAAA;AAEtC,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACa2B,gBAAgB,gBAAGa,gBAAU,CAACS,oBAAoB,EAO/C;;AAEhB;AACA;AACA;;AAOA,MAAMG,IAAI,gBAAGZ,gBAAU,CACrB,SAASY,IAAIA,CACX;EAAEpD,QAAQ;EAAEqD,WAAW;EAAEC,YAAY;EAAEpD,SAAS;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAC3DC,YAAY,EACZ;EACA,MAAM;IAAEI,IAAI;AAAEC,IAAAA,IAAAA;AAAK,GAAC,GAAGhB,0BAA0B,CAAC,sBAAsB,CAAC,CAAA;EACzE,MAAM;AAAEa,IAAAA,oBAAAA;AAAqB,GAAC,GAAGR,kCAAkC,CACjE,sBACF,CAAC,CAAA;AACD,EAAA,MAAMiC,KAAK,GAAGnC,8BAA8B,CAAC,sBAAsB,CAAC,CAAA;AAEpE,EAAA,MAAM2D,OAAO,GACX/C,IAAI,KAAK,YAAY,GAChBL,IAAI,GAA8B,YAAY,CAAC,KAAK,SAAS,GAC7DA,IAAI,GAA8B,YAAY,CAAC,KAAK,QAAQ,CAAA;AAEnEqD,EAAAA,eAAS,CACP,SAASC,eAAeA,GAAG;AACzB,IAAA,IAAIF,OAAO,EAAE;MACXjD,oBAAoB,CAACyB,KAAK,CAAC,CAAA;AAC7B,KAAA;GACD,EACD,CAACwB,OAAO,EAAExB,KAAK,EAAEzB,oBAAoB,CACvC,CAAC,CAAA;EAED,oBACEU,KAAA,CAAAC,aAAA,CAACyC,qBAAU,EAAAxC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACLhB,IAAI,EAAA;AACRkB,IAAAA,GAAG,EAAEjB,YAAa;IAClB,cAAcuD,EAAAA,aAAQ,CAACJ,OAAO,CAAE;AAChCrD,IAAAA,SAAS,EAAEuB,eAAU,CAACC,+BAAM,CAACkC,oBAAoB,EAAE1D,SAAS,CAAA;AAAE,GAAA,CAAA,eAE9Dc,KAAA,CAAAC,aAAA,CAAC4C,YAAM,EAAA;IACL3D,SAAS,EAAEwB,+BAAM,CAACoC,6BAA8B;AAChDC,IAAAA,KAAK,EAAC,QAAQ;AACdC,IAAAA,OAAO,EAAE,CAAA;AAAE,GAAA,EAEVX,WAAW,eACZrC,KAAA,CAAAC,aAAA,CAACgD,SAAI,EAAA;IACH/D,SAAS,EAAEwB,+BAAM,CAACwC,yBAA0B;IAC5CC,IAAI,EAAA,IAAA;IACJC,SAAS,EAAA,IAAA;AACTC,IAAAA,IAAI,EAAE5D,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAA;AAAK,GAAA,EAEjCT,QACG,CAAC,EACNsD,YACK,CACE,CAAC,CAAA;AAEjB,CACF,CAAC,CAAA;AAED,SAASgB,wBAAwBA,CAC/B;EAAEtE,QAAQ;EAAE,GAAGG,IAAAA;AAAuC,CAAC,EACvDC,YAA0C,EAC1C;EACA,MAAM;AAAEI,IAAAA,IAAAA;AAAK,GAAC,GAAGf,0BAA0B,CAAC,sBAAsB,CAAC,CAAA;AAEnE,EAAA,MAAMmE,oBAAoB,GACxBpD,IAAI,KAAK,YAAY,GAAGM,YAAwB,GAAGC,aAAqB,CAAA;EAE1E,oBACEC,KAAA,CAAAC,aAAA,CAAC2C,oBAAoB,EAAA1C,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPC,IAAAA,GAAG,EAAEjB,YAAAA;GACDD,EAAAA,IAAI,CAERa,eAAAA,KAAA,CAAAC,aAAA,CAACmC,IAAI,EAAA,IAAA,EAAEpD,QAAe,CACF,CAAC,CAAA;AAE3B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACa4D,oBAAoB,gBAAGpB,gBAAU,CAAC8B,wBAAwB;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, memo } from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport classNames from 'classnames'\n\nimport { cssDimension } from '~/src/utils/style'\n\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type SliderProps } from './Slider.types'\n\nimport styles from './Slider.module.scss'\n\nexport const SLIDER_TEST_ID = 'bezier-slider'\n\nconst SliderGuide = memo<Record<'min' | 'max' | 'value', number>>(\n function SliderGuide({ min, max, value }) {\n return (\n <div\n className={styles.SliderGuide}\n style={\n {\n '--b-slider-guide-left': `${(value / (max - min)) * 100}%`,\n } as React.CSSProperties\n }\n />\n )\n }\n)\n\n/* NOTE: Props are injected at runtime by `SliderPrimitive.Thumb`. */\nconst SliderThumb = forwardRef<\n HTMLDivElement,\n Pick<SliderProps, 'disableTooltip'> & React.HTMLAttributes<HTMLDivElement>\n>(function SliderThumb({ disableTooltip, ...rest }, forwardedRef) {\n const value = rest?.['aria-valuenow']\n\n if (disableTooltip) {\n return (\n <div\n ref={forwardedRef}\n className={styles.SliderThumb}\n {...rest}\n />\n )\n }\n\n return (\n <Tooltip\n content={value}\n offset={6}\n placement=\"top-center\"\n onPointerDownOutside={(e) => e.preventDefault()}\n >\n <div\n ref={forwardedRef}\n className={styles.SliderThumb}\n {...rest}\n />\n </Tooltip>\n )\n})\n\n/**\n * An input component where the user selects a value from within a given range.\n * The value of the slider is shown in a tooltip, and in some cases you can add a guide scale.\n * @example\n *\n * ```tsx\n * const [value, setValue] = useState([1])\n * // Controlled\n * <Slider\n * value={value}\n * onValueChange={setValue}\n * />\n * // Uncontrolled\n * <Slider defaultValue={[1]} />\n * ```\n */\nexport const Slider = forwardRef<HTMLSpanElement, SliderProps>(function Slider(\n {\n className,\n style,\n width = 36,\n guide,\n defaultValue = [0],\n value,\n disabled = false,\n min = 0,\n max = 10,\n step = 1,\n minStepsBetweenThumbs = 0,\n dir = 'ltr',\n disableTooltip = false,\n ...rest\n },\n forwardedRef\n) {\n const targetValue = value || defaultValue\n\n return (\n <SliderPrimitive.Root\n style={\n {\n '--b-slider-width': cssDimension(width),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Slider, className)}\n ref={forwardedRef}\n orientation=\"horizontal\"\n defaultValue={defaultValue}\n value={value}\n disabled={disabled}\n min={min}\n max={max}\n step={step}\n dir={dir}\n minStepsBetweenThumbs={minStepsBetweenThumbs}\n data-testid={SLIDER_TEST_ID}\n {...rest}\n >\n <SliderPrimitive.Track className={styles.SliderPrimitiveTrack}>\n <SliderPrimitive.Range className={styles.SliderPrimitiveRange} />\n\n {guide && (\n <div className={styles.GuideContainer}>\n {guide.map((guideValue) => (\n <SliderGuide\n key={`slider-guide-${guideValue}`}\n min={min}\n max={max}\n value={guideValue}\n />\n ))}\n </div>\n )}\n </SliderPrimitive.Track>\n\n {targetValue.map((_, i) => (\n <SliderPrimitive.Thumb\n // eslint-disable-next-line react/no-array-index-key\n key={`slider-thumb-${i}`}\n asChild\n >\n <SliderThumb disableTooltip={disableTooltip} />\n </SliderPrimitive.Thumb>\n ))}\n </SliderPrimitive.Root>\n )\n})\n"],"names":["SLIDER_TEST_ID","SliderGuide","memo","min","max","value","React","createElement","className","styles","style","SliderThumb","forwardRef","disableTooltip","rest","forwardedRef","Object","assign","ref","Tooltip","content","offset","placement","onPointerDownOutside","e","preventDefault","Slider","width","guide","defaultValue","disabled","step","minStepsBetweenThumbs","dir","targetValue","SliderPrimitive","cssDimension","classNames","orientation","SliderPrimitiveTrack","SliderPrimitiveRange","GuideContainer","map","guideValue","key","_","i","asChild"],"mappings":"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"}
1
+ {"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, memo } from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport classNames from 'classnames'\n\nimport { cssDimension } from '~/src/utils/style'\n\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type SliderProps } from './Slider.types'\n\nimport styles from './Slider.module.scss'\n\nexport const SLIDER_TEST_ID = 'bezier-slider'\n\nconst SliderGuide = memo<Record<'min' | 'max' | 'value', number>>(\n function SliderGuide({ min, max, value }) {\n return (\n <div\n className={styles.SliderGuide}\n style={\n {\n '--b-slider-guide-left': `${(value / (max - min)) * 100}%`,\n } as React.CSSProperties\n }\n />\n )\n }\n)\n\n/* NOTE: Props are injected at runtime by `SliderPrimitive.Thumb`. */\nconst SliderThumb = forwardRef<\n HTMLDivElement,\n Pick<SliderProps, 'disableTooltip'> & React.HTMLAttributes<HTMLDivElement>\n>(function SliderThumb({ disableTooltip, ...rest }, forwardedRef) {\n const value = rest?.['aria-valuenow']\n\n if (disableTooltip) {\n return (\n <div\n ref={forwardedRef}\n className={styles.SliderThumb}\n {...rest}\n />\n )\n }\n\n return (\n <Tooltip\n content={value}\n offset={6}\n placement=\"top-center\"\n onPointerDownOutside={(e) => e.preventDefault()}\n >\n <div\n ref={forwardedRef}\n className={styles.SliderThumb}\n {...rest}\n />\n </Tooltip>\n )\n})\n\n/**\n * An input component where the user selects a value from within a given range.\n * The value of the slider is shown in a tooltip, and in some cases you can add a guide scale.\n * @example\n *\n * ```tsx\n * const [value, setValue] = useState([1])\n * // Controlled\n * <Slider\n * value={value}\n * onValueChange={setValue}\n * />\n * // Uncontrolled\n * <Slider defaultValue={[1]} />\n * ```\n */\nexport const Slider = forwardRef<HTMLSpanElement, SliderProps>(function Slider(\n {\n className,\n style,\n width = 36,\n guide,\n defaultValue = [0],\n value,\n disabled = false,\n min = 0,\n max = 10,\n step = 1,\n minStepsBetweenThumbs = 0,\n dir = 'ltr',\n disableTooltip = false,\n ...rest\n },\n forwardedRef\n) {\n const targetValue = value || defaultValue\n\n return (\n <SliderPrimitive.Root\n style={\n {\n '--b-slider-width': cssDimension(width),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Slider, className)}\n ref={forwardedRef}\n orientation=\"horizontal\"\n defaultValue={defaultValue}\n value={value}\n disabled={disabled}\n min={min}\n max={max}\n step={step}\n dir={dir}\n minStepsBetweenThumbs={minStepsBetweenThumbs}\n data-testid={SLIDER_TEST_ID}\n {...rest}\n >\n <SliderPrimitive.Track className={styles.SliderPrimitiveTrack}>\n <SliderPrimitive.Range className={styles.SliderPrimitiveRange} />\n\n {guide && (\n <div className={styles.GuideContainer}>\n {guide.map((guideValue) => (\n <SliderGuide\n key={`slider-guide-${guideValue}`}\n min={min}\n max={max}\n value={guideValue}\n />\n ))}\n </div>\n )}\n </SliderPrimitive.Track>\n\n {targetValue.map((_, i) => (\n <SliderPrimitive.Thumb\n // eslint-disable-next-line react/no-array-index-key\n key={`slider-thumb-${i}`}\n asChild\n >\n <SliderThumb disableTooltip={disableTooltip} />\n </SliderPrimitive.Thumb>\n ))}\n </SliderPrimitive.Root>\n )\n})\n"],"names":["SLIDER_TEST_ID","SliderGuide","memo","min","max","value","React","createElement","className","styles","style","SliderThumb","forwardRef","disableTooltip","rest","forwardedRef","Object","assign","ref","Tooltip","content","offset","placement","onPointerDownOutside","e","preventDefault","Slider","width","guide","defaultValue","disabled","step","minStepsBetweenThumbs","dir","targetValue","SliderPrimitive","cssDimension","classNames","orientation","SliderPrimitiveTrack","SliderPrimitiveRange","GuideContainer","map","guideValue","key","_","i","asChild"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"SmoothCornersBox.js","sources":["../../../../src/components/SmoothCornersBox/SmoothCornersBox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssUrl, cssVar, px } from '~/src/utils/style'\n\nimport { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'\n\nimport { type SmoothCornersBoxProps } from './SmoothCornersBox.types'\n\nimport styles from './SmoothCornersBox.module.scss'\n\n/**\n * `SmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n * @example\n *\n * ```tsx\n * <AppProvider features={[SmoothCornersFeature]}>\n * <SmoothCornersBox />\n * </AppProvider>\n * ```\n */\nexport const SmoothCornersBox = forwardRef<\n HTMLDivElement,\n SmoothCornersBoxProps\n>(function SmoothCornersBox(\n {\n children,\n style,\n className,\n disabled,\n borderRadius,\n margin,\n shadow,\n backgroundColor,\n backgroundImage,\n ...rest\n },\n forwardedRef\n) {\n const shadowBlurRadius = shadow?.blurRadius ?? 0\n const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-smooth-corners-box-border-radius': borderRadius,\n '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),\n '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),\n '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,\n '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n '--b-smooth-corners-box-shadow-color': cssVar(shadow?.color),\n /**\n * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.\n * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}\n */\n '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,\n '--b-smooth-corners-box-margin': `${margin ?? 0}px`,\n '--b-smooth-corners-box-background-color': cssVar(backgroundColor),\n '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),\n } as React.CSSProperties\n }\n className={classNames(styles.SmoothCornersBox, className)}\n data-state={\n useFeatureFlag(FeatureType.SmoothCorners) && !disabled\n ? 'enabled'\n : 'disabled'\n }\n >\n {children}\n </div>\n )\n})\n"],"names":["SmoothCornersBox","forwardRef","children","style","className","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","rest","forwardedRef","shadowBlurRadius","blurRadius","shadowSpreadRadius","spreadRadius","React","createElement","Object","assign","ref","px","offsetX","offsetY","cssVar","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,gBAAgB,gBAAGC,gBAAU,CAGxC,SAASD,gBAAgBA,CACzB;EACEE,QAAQ;SACRC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;EACf,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,gBAAgB,GAAGL,MAAM,EAAEM,UAAU,IAAI,CAAC,CAAA;AAChD,EAAA,MAAMC,kBAAkB,GAAGP,MAAM,EAAEQ,YAAY,IAAI,CAAC,CAAA;EAEpD,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,KACMT,IAAI,EAAA;AACRU,IAAAA,GAAG,EAAET,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,OAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;AACpD,MAAA,wCAAwC,EAAEgB,QAAE,CAACd,MAAM,EAAEe,OAAO,CAAC;AAC7D,MAAA,wCAAwC,EAAED,QAAE,CAACd,MAAM,EAAEgB,OAAO,CAAC;MAC7D,2CAA2C,EAAG,CAAEX,EAAAA,gBAAiB,CAAG,EAAA,CAAA;MACpE,6CAA6C,EAAG,CAAEE,EAAAA,kBAAmB,CAAG,EAAA,CAAA;AACxE,MAAA,qCAAqC,EAAEU,YAAM,CAACjB,MAAM,EAAEkB,KAAK,CAAC;AAC5D;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAG,CAAA,EAAEC,IAAI,CAACC,GAAG,CAACf,gBAAgB,EAAEE,kBAAkB,CAAC,GAAG,CAAE,CAAG,EAAA,CAAA;AAC3F,MAAA,+BAA+B,EAAG,CAAA,EAAER,MAAM,IAAI,CAAE,CAAG,EAAA,CAAA;AACnD,MAAA,yCAAyC,EAAEkB,YAAM,CAAChB,eAAe,CAAC;MAClE,yCAAyC,EAAEoB,YAAM,CAACnB,eAAe,CAAA;KAEpE;IACDN,SAAS,EAAE0B,aAAU,CAACC,+BAAM,CAAC/B,gBAAgB,EAAEI,SAAS,CAAE;IAC1D,YACE4B,EAAAA,8BAAc,CAACC,iCAAW,CAACC,aAAa,CAAC,IAAI,CAAC7B,QAAQ,GAClD,SAAS,GACT,UAAA;AACL,GAAA,CAAA,EAEAH,QACE,CAAC,CAAA;AAEV,CAAC;;;;"}
1
+ {"version":3,"file":"SmoothCornersBox.js","sources":["../../../../src/components/SmoothCornersBox/SmoothCornersBox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssUrl, cssVar, px } from '~/src/utils/style'\n\nimport { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'\n\nimport { type SmoothCornersBoxProps } from './SmoothCornersBox.types'\n\nimport styles from './SmoothCornersBox.module.scss'\n\n/**\n * `SmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n * @example\n *\n * ```tsx\n * <AppProvider features={[SmoothCornersFeature]}>\n * <SmoothCornersBox />\n * </AppProvider>\n * ```\n */\nexport const SmoothCornersBox = forwardRef<\n HTMLDivElement,\n SmoothCornersBoxProps\n>(function SmoothCornersBox(\n {\n children,\n style,\n className,\n disabled,\n borderRadius,\n margin,\n shadow,\n backgroundColor,\n backgroundImage,\n ...rest\n },\n forwardedRef\n) {\n const shadowBlurRadius = shadow?.blurRadius ?? 0\n const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-smooth-corners-box-border-radius': borderRadius,\n '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),\n '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),\n '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,\n '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n '--b-smooth-corners-box-shadow-color': cssVar(shadow?.color),\n /**\n * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.\n * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}\n */\n '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,\n '--b-smooth-corners-box-margin': `${margin ?? 0}px`,\n '--b-smooth-corners-box-background-color': cssVar(backgroundColor),\n '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),\n } as React.CSSProperties\n }\n className={classNames(styles.SmoothCornersBox, className)}\n data-state={\n useFeatureFlag(FeatureType.SmoothCorners) && !disabled\n ? 'enabled'\n : 'disabled'\n }\n >\n {children}\n </div>\n )\n})\n"],"names":["SmoothCornersBox","forwardRef","children","style","className","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","rest","forwardedRef","shadowBlurRadius","blurRadius","shadowSpreadRadius","spreadRadius","React","createElement","Object","assign","ref","px","offsetX","offsetY","cssVar","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,gBAAgB,gBAAGC,gBAAU,CAGxC,SAASD,gBAAgBA,CACzB;EACEE,QAAQ;SACRC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;EACf,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,gBAAgB,GAAGL,MAAM,EAAEM,UAAU,IAAI,CAAC,CAAA;AAChD,EAAA,MAAMC,kBAAkB,GAAGP,MAAM,EAAEQ,YAAY,IAAI,CAAC,CAAA;EAEpD,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,KACMT,IAAI,EAAA;AACRU,IAAAA,GAAG,EAAET,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,OAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;AACpD,MAAA,wCAAwC,EAAEgB,QAAE,CAACd,MAAM,EAAEe,OAAO,CAAC;AAC7D,MAAA,wCAAwC,EAAED,QAAE,CAACd,MAAM,EAAEgB,OAAO,CAAC;MAC7D,2CAA2C,EAAE,CAAGX,EAAAA,gBAAgB,CAAI,EAAA,CAAA;MACpE,6CAA6C,EAAE,CAAGE,EAAAA,kBAAkB,CAAI,EAAA,CAAA;AACxE,MAAA,qCAAqC,EAAEU,YAAM,CAACjB,MAAM,EAAEkB,KAAK,CAAC;AAC5D;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAE,CAAA,EAAGC,IAAI,CAACC,GAAG,CAACf,gBAAgB,EAAEE,kBAAkB,CAAC,GAAG,CAAC,CAAI,EAAA,CAAA;AAC3F,MAAA,+BAA+B,EAAE,CAAA,EAAGR,MAAM,IAAI,CAAC,CAAI,EAAA,CAAA;AACnD,MAAA,yCAAyC,EAAEkB,YAAM,CAAChB,eAAe,CAAC;MAClE,yCAAyC,EAAEoB,YAAM,CAACnB,eAAe,CAAA;KAEpE;IACDN,SAAS,EAAE0B,aAAU,CAACC,+BAAM,CAAC/B,gBAAgB,EAAEI,SAAS,CAAE;IAC1D,YACE4B,EAAAA,8BAAc,CAACC,iCAAW,CAACC,aAAa,CAAC,IAAI,CAAC7B,QAAQ,GAClD,SAAS,GACT,UAAA;AACL,GAAA,CAAA,EAEAH,QACE,CAAC,CAAA;AAEV,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssVar } from '~/src/utils/style'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n { style, className, size = 'm', color, ...rest },\n forwardedRef\n ) {\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n '--b-spinner-color': cssVar(color),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Spinner,\n styles[`size-${size}`],\n className\n )}\n key=\"spinner\"\n data-testid={SPINNER_TEST_ID}\n />\n )\n }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","style","className","size","color","rest","forwardedRef","React","createElement","Object","assign","ref","cssVar","classNames","styles","key"],"mappings":";;;;;;;AAUO,MAAMA,eAAe,GAAG,iBAAgB;MAElCC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;SAAEE,OAAK;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAChDC,YAAY,EACZ;EACA,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,KACML,IAAI,EAAA;AACRM,IAAAA,GAAG,EAAEL,YAAa;AAClBL,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEW,YAAM,CAACR,KAAK,CAAC;MAClC,GAAGH,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEW,aAAU,CACnBC,sBAAM,CAACf,OAAO,EACde,sBAAM,CAAE,QAAOX,IAAK,CAAA,CAAC,CAAC,EACtBD,SACF,CAAE;AACFa,IAAAA,GAAG,EAAC,SAAS;IACb,aAAajB,EAAAA,eAAAA;AAAgB,GAAA,CAC9B,CAAC,CAAA;AAEN,CACF;;;;;"}
1
+ {"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssVar } from '~/src/utils/style'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n { style, className, size = 'm', color, ...rest },\n forwardedRef\n ) {\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n '--b-spinner-color': cssVar(color),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Spinner,\n styles[`size-${size}`],\n className\n )}\n key=\"spinner\"\n data-testid={SPINNER_TEST_ID}\n />\n )\n }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","style","className","size","color","rest","forwardedRef","React","createElement","Object","assign","ref","cssVar","classNames","styles","key"],"mappings":";;;;;;;AAUO,MAAMA,eAAe,GAAG,iBAAgB;MAElCC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;SAAEE,OAAK;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAChDC,YAAY,EACZ;EACA,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,KACML,IAAI,EAAA;AACRM,IAAAA,GAAG,EAAEL,YAAa;AAClBL,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEW,YAAM,CAACR,KAAK,CAAC;MAClC,GAAGH,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEW,aAAU,CACnBC,sBAAM,CAACf,OAAO,EACde,sBAAM,CAAC,QAAQX,IAAI,CAAA,CAAE,CAAC,EACtBD,SACF,CAAE;AACFa,IAAAA,GAAG,EAAC,SAAS;IACb,aAAajB,EAAAA,eAAAA;AAAgB,GAAA,CAC9B,CAAC,CAAA;AAEN,CACF;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Stack.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n getLayoutStyles,\n getMarginStyles,\n splitByLayoutProps,\n splitByMarginProps,\n} from '~/src/types/props-helpers'\nimport { cssDimension } from '~/src/utils/style'\n\nimport type { HStackProps, StackProps, VStackProps } from './Stack.types'\n\nimport styles from './Stack.module.scss'\n\n/**\n * `Stack` is a layout component used to group elements together and apply a space between them.\n * @example\n *\n * ```tsx\n * <Stack\n * direction=\"horizontal\"\n * spacing={6}\n * >\n * <div>{ ... }</div>\n * <div>{ ... }</div>\n * </Stack>\n * ```\n */\nexport const Stack = forwardRef<HTMLElement, StackProps>(\n function Stack(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)\n const marginStyles = getMarginStyles(marginProps)\n const layoutStyles = getLayoutStyles(layoutProps)\n\n const {\n children,\n style,\n className,\n as = 'div',\n display = 'flex',\n direction,\n justify,\n align,\n spacing,\n reverse,\n wrap,\n ...rest\n } = layoutRest\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-stack-spacing': cssDimension(spacing),\n ...marginStyles.style,\n ...layoutStyles.style,\n ...style,\n },\n className: classNames(\n styles.Stack,\n display && styles[`display-${display}`],\n direction && styles[`direction-${direction}`],\n justify && styles[`justify-${justify}`],\n align && styles[`align-${align}`],\n reverse && styles.reverse,\n wrap && styles.wrap,\n marginStyles.className,\n layoutStyles.className,\n className\n ),\n 'data-testid': 'bezier-stack',\n ...rest,\n },\n children\n )\n }\n)\n\n/**\n * `HStack` is a shorthand component equivalent to `Stack` with a horizontal direction property.\n * @see Stack\n */\nexport const HStack = forwardRef<HTMLElement, HStackProps>(\n function HStack(props, forwardedRef) {\n return createElement(Stack, {\n ...props,\n direction: 'horizontal',\n ref: forwardedRef,\n })\n }\n)\n\n/**\n * `VStack` is a shorthand component equivalent to `Stack` with a vertical direction property.\n * @see Stack\n */\nexport const VStack = forwardRef<HTMLElement, VStackProps>(\n function VStack(props, forwardedRef) {\n return createElement(Stack, {\n ...props,\n direction: 'vertical',\n ref: forwardedRef,\n })\n }\n)\n"],"names":["Stack","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","layoutProps","layoutRest","splitByLayoutProps","marginStyles","getMarginStyles","layoutStyles","getLayoutStyles","children","style","className","as","display","direction","justify","align","spacing","reverse","wrap","rest","createElement","ref","cssDimension","classNames","styles","HStack","VStack"],"mappings":";;;;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,KAAK,gBAAGC,gBAAU,CAC7B,SAASD,KAAKA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAClC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC,CAAA;EAC3D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,UAAU,CAAC,CAAA;AAChE,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACP,WAAW,CAAC,CAAA;AACjD,EAAA,MAAMQ,YAAY,GAAGC,4BAAe,CAACN,WAAW,CAAC,CAAA;EAEjD,MAAM;IACJO,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;AACVC,IAAAA,OAAO,GAAG,MAAM;IAChBC,SAAS;IACTC,OAAO;IACPC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPC,IAAI;IACJ,GAAGC,IAAAA;AACL,GAAC,GAAGjB,UAAU,CAAA;EAEd,oBAAOkB,mBAAa,CAClBT,EAAE,EACF;AACEU,IAAAA,GAAG,EAAExB,YAAY;AACjBY,IAAAA,KAAK,EAAE;AACL,MAAA,mBAAmB,EAAEa,kBAAY,CAACN,OAAO,CAAC;MAC1C,GAAGZ,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA,OAAAA;KACJ;AACDC,IAAAA,SAAS,EAAEa,aAAU,CACnBC,oBAAM,CAAC9B,KAAK,EACZkB,OAAO,IAAIY,oBAAM,CAAE,CAAA,QAAA,EAAUZ,OAAQ,CAAC,CAAA,CAAC,EACvCC,SAAS,IAAIW,oBAAM,CAAE,CAAA,UAAA,EAAYX,SAAU,CAAA,CAAC,CAAC,EAC7CC,OAAO,IAAIU,oBAAM,CAAE,WAAUV,OAAQ,CAAA,CAAC,CAAC,EACvCC,KAAK,IAAIS,oBAAM,CAAE,CAAQT,MAAAA,EAAAA,KAAM,CAAC,CAAA,CAAC,EACjCE,OAAO,IAAIO,oBAAM,CAACP,OAAO,EACzBC,IAAI,IAAIM,oBAAM,CAACN,IAAI,EACnBd,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,cAAc;IAC7B,GAAGS,IAAAA;GACJ,EACDX,QACF,CAAC,CAAA;AACH,CACF,EAAC;;AAED;AACA;AACA;AACA;AACO,MAAMiB,MAAM,gBAAG9B,gBAAU,CAC9B,SAAS8B,MAAMA,CAAC7B,KAAK,EAAEC,YAAY,EAAE;EACnC,oBAAOuB,mBAAa,CAAC1B,KAAK,EAAE;AAC1B,IAAA,GAAGE,KAAK;AACRiB,IAAAA,SAAS,EAAE,YAAY;AACvBQ,IAAAA,GAAG,EAAExB,YAAAA;AACP,GAAC,CAAC,CAAA;AACJ,CACF,EAAC;;AAED;AACA;AACA;AACA;AACO,MAAM6B,MAAM,gBAAG/B,gBAAU,CAC9B,SAAS+B,MAAMA,CAAC9B,KAAK,EAAEC,YAAY,EAAE;EACnC,oBAAOuB,mBAAa,CAAC1B,KAAK,EAAE;AAC1B,IAAA,GAAGE,KAAK;AACRiB,IAAAA,SAAS,EAAE,UAAU;AACrBQ,IAAAA,GAAG,EAAExB,YAAAA;AACP,GAAC,CAAC,CAAA;AACJ,CACF;;;;;;"}
1
+ {"version":3,"file":"Stack.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n getLayoutStyles,\n getMarginStyles,\n splitByLayoutProps,\n splitByMarginProps,\n} from '~/src/types/props-helpers'\nimport { cssDimension } from '~/src/utils/style'\n\nimport type { HStackProps, StackProps, VStackProps } from './Stack.types'\n\nimport styles from './Stack.module.scss'\n\n/**\n * `Stack` is a layout component used to group elements together and apply a space between them.\n * @example\n *\n * ```tsx\n * <Stack\n * direction=\"horizontal\"\n * spacing={6}\n * >\n * <div>{ ... }</div>\n * <div>{ ... }</div>\n * </Stack>\n * ```\n */\nexport const Stack = forwardRef<HTMLElement, StackProps>(\n function Stack(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)\n const marginStyles = getMarginStyles(marginProps)\n const layoutStyles = getLayoutStyles(layoutProps)\n\n const {\n children,\n style,\n className,\n as = 'div',\n display = 'flex',\n direction,\n justify,\n align,\n spacing,\n reverse,\n wrap,\n ...rest\n } = layoutRest\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-stack-spacing': cssDimension(spacing),\n ...marginStyles.style,\n ...layoutStyles.style,\n ...style,\n },\n className: classNames(\n styles.Stack,\n display && styles[`display-${display}`],\n direction && styles[`direction-${direction}`],\n justify && styles[`justify-${justify}`],\n align && styles[`align-${align}`],\n reverse && styles.reverse,\n wrap && styles.wrap,\n marginStyles.className,\n layoutStyles.className,\n className\n ),\n 'data-testid': 'bezier-stack',\n ...rest,\n },\n children\n )\n }\n)\n\n/**\n * `HStack` is a shorthand component equivalent to `Stack` with a horizontal direction property.\n * @see Stack\n */\nexport const HStack = forwardRef<HTMLElement, HStackProps>(\n function HStack(props, forwardedRef) {\n return createElement(Stack, {\n ...props,\n direction: 'horizontal',\n ref: forwardedRef,\n })\n }\n)\n\n/**\n * `VStack` is a shorthand component equivalent to `Stack` with a vertical direction property.\n * @see Stack\n */\nexport const VStack = forwardRef<HTMLElement, VStackProps>(\n function VStack(props, forwardedRef) {\n return createElement(Stack, {\n ...props,\n direction: 'vertical',\n ref: forwardedRef,\n })\n }\n)\n"],"names":["Stack","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","layoutProps","layoutRest","splitByLayoutProps","marginStyles","getMarginStyles","layoutStyles","getLayoutStyles","children","style","className","as","display","direction","justify","align","spacing","reverse","wrap","rest","createElement","ref","cssDimension","classNames","styles","HStack","VStack"],"mappings":";;;;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,KAAK,gBAAGC,gBAAU,CAC7B,SAASD,KAAKA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAClC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC,CAAA;EAC3D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,UAAU,CAAC,CAAA;AAChE,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACP,WAAW,CAAC,CAAA;AACjD,EAAA,MAAMQ,YAAY,GAAGC,4BAAe,CAACN,WAAW,CAAC,CAAA;EAEjD,MAAM;IACJO,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;AACVC,IAAAA,OAAO,GAAG,MAAM;IAChBC,SAAS;IACTC,OAAO;IACPC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPC,IAAI;IACJ,GAAGC,IAAAA;AACL,GAAC,GAAGjB,UAAU,CAAA;EAEd,oBAAOkB,mBAAa,CAClBT,EAAE,EACF;AACEU,IAAAA,GAAG,EAAExB,YAAY;AACjBY,IAAAA,KAAK,EAAE;AACL,MAAA,mBAAmB,EAAEa,kBAAY,CAACN,OAAO,CAAC;MAC1C,GAAGZ,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA,OAAAA;KACJ;AACDC,IAAAA,SAAS,EAAEa,aAAU,CACnBC,oBAAM,CAAC9B,KAAK,EACZkB,OAAO,IAAIY,oBAAM,CAAC,CAAA,QAAA,EAAWZ,OAAO,CAAE,CAAA,CAAC,EACvCC,SAAS,IAAIW,oBAAM,CAAC,CAAA,UAAA,EAAaX,SAAS,CAAA,CAAE,CAAC,EAC7CC,OAAO,IAAIU,oBAAM,CAAC,WAAWV,OAAO,CAAA,CAAE,CAAC,EACvCC,KAAK,IAAIS,oBAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCE,OAAO,IAAIO,oBAAM,CAACP,OAAO,EACzBC,IAAI,IAAIM,oBAAM,CAACN,IAAI,EACnBd,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,cAAc;IAC7B,GAAGS,IAAAA;GACJ,EACDX,QACF,CAAC,CAAA;AACH,CACF,EAAC;;AAED;AACA;AACA;AACA;AACO,MAAMiB,MAAM,gBAAG9B,gBAAU,CAC9B,SAAS8B,MAAMA,CAAC7B,KAAK,EAAEC,YAAY,EAAE;EACnC,oBAAOuB,mBAAa,CAAC1B,KAAK,EAAE;AAC1B,IAAA,GAAGE,KAAK;AACRiB,IAAAA,SAAS,EAAE,YAAY;AACvBQ,IAAAA,GAAG,EAAExB,YAAAA;AACP,GAAC,CAAC,CAAA;AACJ,CACF,EAAC;;AAED;AACA;AACA;AACA;AACO,MAAM6B,MAAM,gBAAG/B,gBAAU,CAC9B,SAAS+B,MAAMA,CAAC9B,KAAK,EAAEC,YAAY,EAAE;EACnC,oBAAOuB,mBAAa,CAAC1B,KAAK,EAAE;AAC1B,IAAA,GAAGE,KAAK;AACRiB,IAAAA,SAAS,EAAE,UAAU;AACrBQ,IAAAA,GAAG,EAAExB,YAAAA;AACP,GAAC,CAAC,CAAA;AACJ,CACF;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Status.js","sources":["../../../../src/components/Status/Status.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, memo } from 'react'\n\nimport { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusProps, type StatusType } from './Status.types'\n\nimport styles from './Status.module.scss'\n\nconst statusTypesWithIcon: Readonly<StatusType[]> = [\n 'online-crescent',\n 'offline-crescent',\n 'lock',\n]\n\nconst statusColor: Readonly<Record<StatusType, SemanticColor>> = {\n online: 'bgtxt-green-normal',\n offline: 'bg-black-dark',\n 'online-crescent': 'bgtxt-green-normal',\n 'offline-crescent': 'bgtxt-yellow-normal',\n lock: 'txt-black-darker',\n}\n\n/**\n * `Status` is a component to indicate user status.\n */\nexport const Status = memo(\n forwardRef<HTMLDivElement, StatusProps>(function Status(\n { type, size = 'm', style, className, ...rest },\n forwardedRef\n ) {\n const withIcon = statusTypesWithIcon.includes(type)\n const backgroundColor = withIcon ? 'bg-white-high' : statusColor[type]\n\n return (\n <div\n ref={forwardedRef}\n style={\n {\n '--b-status-bg-color': cssVar(backgroundColor),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Status, styles[`size-${size}`], className)}\n {...rest}\n >\n {withIcon && (\n <Icon\n source={type === 'lock' ? LockIcon : MoonFilledIcon}\n size={size === 'm' ? 'xxxs' : 'xs'}\n color={statusColor[type]}\n className={styles.Icon}\n />\n )}\n </div>\n )\n })\n)\n"],"names":["statusTypesWithIcon","statusColor","online","offline","lock","Status","memo","forwardRef","type","size","style","className","rest","forwardedRef","withIcon","includes","backgroundColor","React","createElement","Object","assign","ref","cssVar","classNames","styles","Icon","source","LockIcon","MoonFilledIcon","color"],"mappings":";;;;;;;;;AAcA,MAAMA,mBAA2C,GAAG,CAClD,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,CACP,CAAA;AAED,MAAMC,WAAwD,GAAG;AAC/DC,EAAAA,MAAM,EAAE,oBAAoB;AAC5BC,EAAAA,OAAO,EAAE,eAAe;AACxB,EAAA,iBAAiB,EAAE,oBAAoB;AACvC,EAAA,kBAAkB,EAAE,qBAAqB;AACzCC,EAAAA,IAAI,EAAE,kBAAA;AACR,CAAC,CAAA;;AAED;AACA;AACA;AACO,MAAMC,MAAM,gBAAGC,UAAI,eACxBC,gBAAU,CAA8B,SAASF,MAAMA,CACrD;EAAEG,IAAI;AAAEC,EAAAA,IAAI,GAAG,GAAG;SAAEC,OAAK;EAAEC,SAAS;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAC/CC,YAAY,EACZ;AACA,EAAA,MAAMC,QAAQ,GAAGd,mBAAmB,CAACe,QAAQ,CAACP,IAAI,CAAC,CAAA;EACnD,MAAMQ,eAAe,GAAGF,QAAQ,GAAG,eAAe,GAAGb,WAAW,CAACO,IAAI,CAAC,CAAA;AAEtE,EAAA,oBACES,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAER,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEY,YAAM,CAACN,eAAe,CAAC;MAC9C,GAAGN,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEY,aAAU,CAACC,qBAAM,CAACnB,MAAM,EAAEmB,qBAAM,CAAE,CAAOf,KAAAA,EAAAA,IAAK,CAAC,CAAA,CAAC,EAAEE,SAAS,CAAA;GAClEC,EAAAA,IAAI,GAEPE,QAAQ,iBACPG,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAElB,IAAI,KAAK,MAAM,GAAGmB,oBAAQ,GAAGC,0BAAe;AACpDnB,IAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCoB,IAAAA,KAAK,EAAE5B,WAAW,CAACO,IAAI,CAAE;IACzBG,SAAS,EAAEa,qBAAM,CAACC,IAAAA;AAAK,GACxB,CAEA,CAAC,CAAA;AAEV,CAAC,CACH;;;;"}
1
+ {"version":3,"file":"Status.js","sources":["../../../../src/components/Status/Status.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, memo } from 'react'\n\nimport { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusProps, type StatusType } from './Status.types'\n\nimport styles from './Status.module.scss'\n\nconst statusTypesWithIcon: Readonly<StatusType[]> = [\n 'online-crescent',\n 'offline-crescent',\n 'lock',\n]\n\nconst statusColor: Readonly<Record<StatusType, SemanticColor>> = {\n online: 'bgtxt-green-normal',\n offline: 'bg-black-dark',\n 'online-crescent': 'bgtxt-green-normal',\n 'offline-crescent': 'bgtxt-yellow-normal',\n lock: 'txt-black-darker',\n}\n\n/**\n * `Status` is a component to indicate user status.\n */\nexport const Status = memo(\n forwardRef<HTMLDivElement, StatusProps>(function Status(\n { type, size = 'm', style, className, ...rest },\n forwardedRef\n ) {\n const withIcon = statusTypesWithIcon.includes(type)\n const backgroundColor = withIcon ? 'bg-white-high' : statusColor[type]\n\n return (\n <div\n ref={forwardedRef}\n style={\n {\n '--b-status-bg-color': cssVar(backgroundColor),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Status, styles[`size-${size}`], className)}\n {...rest}\n >\n {withIcon && (\n <Icon\n source={type === 'lock' ? LockIcon : MoonFilledIcon}\n size={size === 'm' ? 'xxxs' : 'xs'}\n color={statusColor[type]}\n className={styles.Icon}\n />\n )}\n </div>\n )\n })\n)\n"],"names":["statusTypesWithIcon","statusColor","online","offline","lock","Status","memo","forwardRef","type","size","style","className","rest","forwardedRef","withIcon","includes","backgroundColor","React","createElement","Object","assign","ref","cssVar","classNames","styles","Icon","source","LockIcon","MoonFilledIcon","color"],"mappings":";;;;;;;;;AAcA,MAAMA,mBAA2C,GAAG,CAClD,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,CACP,CAAA;AAED,MAAMC,WAAwD,GAAG;AAC/DC,EAAAA,MAAM,EAAE,oBAAoB;AAC5BC,EAAAA,OAAO,EAAE,eAAe;AACxB,EAAA,iBAAiB,EAAE,oBAAoB;AACvC,EAAA,kBAAkB,EAAE,qBAAqB;AACzCC,EAAAA,IAAI,EAAE,kBAAA;AACR,CAAC,CAAA;;AAED;AACA;AACA;AACO,MAAMC,MAAM,gBAAGC,UAAI,eACxBC,gBAAU,CAA8B,SAASF,MAAMA,CACrD;EAAEG,IAAI;AAAEC,EAAAA,IAAI,GAAG,GAAG;SAAEC,OAAK;EAAEC,SAAS;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAC/CC,YAAY,EACZ;AACA,EAAA,MAAMC,QAAQ,GAAGd,mBAAmB,CAACe,QAAQ,CAACP,IAAI,CAAC,CAAA;EACnD,MAAMQ,eAAe,GAAGF,QAAQ,GAAG,eAAe,GAAGb,WAAW,CAACO,IAAI,CAAC,CAAA;AAEtE,EAAA,oBACES,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAER,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEY,YAAM,CAACN,eAAe,CAAC;MAC9C,GAAGN,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEY,aAAU,CAACC,qBAAM,CAACnB,MAAM,EAAEmB,qBAAM,CAAC,CAAQf,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EAAEE,SAAS,CAAA;GAClEC,EAAAA,IAAI,GAEPE,QAAQ,iBACPG,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAElB,IAAI,KAAK,MAAM,GAAGmB,oBAAQ,GAAGC,0BAAe;AACpDnB,IAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCoB,IAAAA,KAAK,EAAE5B,WAAW,CAACO,IAAI,CAAE;IACzBG,SAAS,EAAEa,qBAAM,CAACC,IAAAA;AAAK,GACxB,CAEA,CAAC,CAAA;AAEV,CAAC,CACH;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport classNames from 'classnames'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport { type SwitchProps } from './Switch.types'\n\nimport styles from './Switch.module.scss'\n\nexport const SWITCH_TEST_ID = 'bezier-switch'\n\n/**\n * `Switch` is an input component where user can toggle checked state of the element.\n * @example\n * ```tsx\n * <Switch\n * size=\"m\"\n * checked\n * />\n * ```\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n function Switch(\n {\n checked,\n defaultChecked = false,\n onCheckedChange,\n size = 'm',\n className,\n ...rest\n },\n forwardedRef\n ) {\n const { disabled, required, hasError, ...ownProps } =\n useFormFieldProps(rest)\n\n return (\n <SwitchPrimitive.Root\n asChild\n checked={checked}\n defaultChecked={defaultChecked}\n onCheckedChange={onCheckedChange}\n required={required}\n disabled={disabled}\n data-testid={SWITCH_TEST_ID}\n {...ownProps}\n >\n <BaseButton\n ref={forwardedRef}\n className={classNames(\n styles.Switch,\n styles[`size-${size}`],\n className\n )}\n >\n <SwitchPrimitive.Thumb asChild>\n <span className={styles.SwitchThumb} />\n </SwitchPrimitive.Thumb>\n </BaseButton>\n </SwitchPrimitive.Root>\n )\n }\n)\n"],"names":["SWITCH_TEST_ID","Switch","forwardRef","checked","defaultChecked","onCheckedChange","size","className","rest","forwardedRef","disabled","required","hasError","ownProps","useFormFieldProps","React","createElement","SwitchPrimitive","Object","assign","asChild","BaseButton","ref","classNames","styles","SwitchThumb"],"mappings":";;;;;;;;;AAYO,MAAMA,cAAc,GAAG,gBAAe;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,gBAAU,CAC9B,SAASD,MAAMA,CACb;EACEE,OAAO;AACPC,EAAAA,cAAc,GAAG,KAAK;EACtBC,eAAe;AACfC,EAAAA,IAAI,GAAG,GAAG;EACVC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC,QAAAA;AAAS,GAAC,GACjDC,6BAAiB,CAACN,IAAI,CAAC,CAAA;EAEzB,oBACEO,KAAA,CAAAC,aAAA,CAACC,UAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPjB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,eAAe,EAAEA,eAAgB;AACjCM,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAS;IACnB,aAAaV,EAAAA,cAAAA;AAAe,GAAA,EACxBa,QAAQ,CAEZE,eAAAA,KAAA,CAAAC,aAAA,CAACK,qBAAU,EAAA;AACTC,IAAAA,GAAG,EAAEb,YAAa;AAClBF,IAAAA,SAAS,EAAEgB,eAAU,CACnBC,qBAAM,CAACvB,MAAM,EACbuB,qBAAM,CAAE,CAAOlB,KAAAA,EAAAA,IAAK,CAAC,CAAA,CAAC,EACtBC,SACF,CAAA;AAAE,GAAA,eAEFQ,KAAA,CAAAC,aAAA,CAACC,WAAqB,EAAA;IAACG,OAAO,EAAA,IAAA;GAC5BL,eAAAA,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMT,SAAS,EAAEiB,qBAAM,CAACC,WAAAA;GAAc,CACjB,CACb,CACQ,CAAC,CAAA;AAE3B,CACF;;;;;"}
1
+ {"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport classNames from 'classnames'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport { type SwitchProps } from './Switch.types'\n\nimport styles from './Switch.module.scss'\n\nexport const SWITCH_TEST_ID = 'bezier-switch'\n\n/**\n * `Switch` is an input component where user can toggle checked state of the element.\n * @example\n * ```tsx\n * <Switch\n * size=\"m\"\n * checked\n * />\n * ```\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n function Switch(\n {\n checked,\n defaultChecked = false,\n onCheckedChange,\n size = 'm',\n className,\n ...rest\n },\n forwardedRef\n ) {\n const { disabled, required, hasError, ...ownProps } =\n useFormFieldProps(rest)\n\n return (\n <SwitchPrimitive.Root\n asChild\n checked={checked}\n defaultChecked={defaultChecked}\n onCheckedChange={onCheckedChange}\n required={required}\n disabled={disabled}\n data-testid={SWITCH_TEST_ID}\n {...ownProps}\n >\n <BaseButton\n ref={forwardedRef}\n className={classNames(\n styles.Switch,\n styles[`size-${size}`],\n className\n )}\n >\n <SwitchPrimitive.Thumb asChild>\n <span className={styles.SwitchThumb} />\n </SwitchPrimitive.Thumb>\n </BaseButton>\n </SwitchPrimitive.Root>\n )\n }\n)\n"],"names":["SWITCH_TEST_ID","Switch","forwardRef","checked","defaultChecked","onCheckedChange","size","className","rest","forwardedRef","disabled","required","hasError","ownProps","useFormFieldProps","React","createElement","SwitchPrimitive","Object","assign","asChild","BaseButton","ref","classNames","styles","SwitchThumb"],"mappings":";;;;;;;;;AAYO,MAAMA,cAAc,GAAG,gBAAe;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,gBAAU,CAC9B,SAASD,MAAMA,CACb;EACEE,OAAO;AACPC,EAAAA,cAAc,GAAG,KAAK;EACtBC,eAAe;AACfC,EAAAA,IAAI,GAAG,GAAG;EACVC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC,QAAAA;AAAS,GAAC,GACjDC,6BAAiB,CAACN,IAAI,CAAC,CAAA;EAEzB,oBACEO,KAAA,CAAAC,aAAA,CAACC,UAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPjB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,eAAe,EAAEA,eAAgB;AACjCM,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAS;IACnB,aAAaV,EAAAA,cAAAA;AAAe,GAAA,EACxBa,QAAQ,CAEZE,eAAAA,KAAA,CAAAC,aAAA,CAACK,qBAAU,EAAA;AACTC,IAAAA,GAAG,EAAEb,YAAa;AAClBF,IAAAA,SAAS,EAAEgB,eAAU,CACnBC,qBAAM,CAACvB,MAAM,EACbuB,qBAAM,CAAC,CAAQlB,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EACtBC,SACF,CAAA;AAAE,GAAA,eAEFQ,KAAA,CAAAC,aAAA,CAACC,WAAqB,EAAA;IAACG,OAAO,EAAA,IAAA;GAC5BL,eAAAA,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMT,SAAS,EAAEiB,qBAAM,CAACC,WAAAA;GAAc,CACjB,CACb,CACQ,CAAC,CAAA;AAE3B,CACF;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n type TabActionElement,\n type TabActionProps,\n type TabActionsProps,\n type TabContentProps,\n type TabItemProps,\n type TabItemsProps,\n type TabListContextValue,\n type TabListProps,\n type TabSize,\n type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n * <TabList>\n * <TabItems>\n * <TabItem />\n * <TabItems />\n * <TabActions>\n * <TabAction />\n * </TabActions>\n * </TabList>\n * <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n { className, activationMode = 'automatic', dir, children, ...rest },\n forwardedRef\n) {\n return (\n <TabsPrimitive.Root\n className={classNames(styles.Tabs, className)}\n activationMode={activationMode}\n ref={forwardedRef}\n dir={dir as 'ltr' | 'rtl'}\n {...rest}\n >\n {children}\n </TabsPrimitive.Root>\n )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n createContext<TabListContextValue>({\n size: 'm',\n })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n const heightContextValue = useMemo(\n () => ({\n size,\n }),\n [size]\n )\n\n return (\n <TabListContextProvider value={heightContextValue}>\n <div\n className={classNames(\n styles.TabList,\n styles[`size-${size}`],\n className\n )}\n ref={forwardedRef}\n {...rest}\n >\n {children}\n </div>\n </TabListContextProvider>\n )\n }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n function TabItems({ className, children, ...rest }, forwardedRef) {\n return (\n <TabsPrimitive.TabsList\n className={classNames(styles.TabItems, className)}\n ref={forwardedRef}\n {...rest}\n >\n {children}\n </TabsPrimitive.TabsList>\n )\n }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n return (\n {\n l: 'l',\n m: 'm',\n s: 's',\n } as const\n )[size]\n}\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n function TabItem(\n { className, disabled, value, children, ...rest },\n forwardedRef\n ) {\n const { size } = useTabListContext()\n\n if (typeof children !== 'string') {\n return null\n }\n\n return (\n <TabsPrimitive.TabsTrigger\n disabled={disabled}\n value={value}\n asChild\n >\n <Button\n className={classNames(styles.TabItem, className)}\n disabled={disabled}\n text={children}\n size={getButtonSizeBy(size)}\n colorVariant=\"monochrome-light\"\n styleVariant=\"tertiary\"\n ref={forwardedRef}\n {...rest}\n />\n </TabsPrimitive.TabsTrigger>\n )\n }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n function TabContent({ children, value, ...rest }, forwardedRef) {\n return (\n <TabsPrimitive.Content\n value={value}\n ref={forwardedRef}\n {...rest}\n >\n {children}\n </TabsPrimitive.Content>\n )\n }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n * It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n return (\n <ToolbarPrimitive.Root\n className={classNames(styles.TabActions, className)}\n aria-label=\"More actions\"\n ref={forwardedRef}\n dir={dir as 'ltr' | 'rtl'}\n {...rest}\n >\n {children}\n </ToolbarPrimitive.Root>\n )\n }\n)\n\nfunction getTypoBy(size: TabSize) {\n return (\n {\n l: '14',\n m: '14',\n s: '13',\n } as const\n )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n return (\n {\n l: 's',\n m: 'xs',\n s: 'xs',\n } as const\n )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n TabActionElement<string | undefined>,\n TabActionProps<string | undefined>\n>(function TabAction(\n { className: classNameProp, href, children, onClick, ...rest },\n forwardedRef\n) {\n const { size } = useTabListContext()\n const className = classNames(\n styles.TabAction,\n styles[`size-${size}`],\n classNameProp\n )\n\n return isNil(href) ? (\n <ToolbarPrimitive.Button\n asChild\n className={className}\n onClick={onClick}\n ref={forwardedRef}\n {...rest}\n >\n <BaseButton>\n <Text\n bold\n typo={getTypoBy(size)}\n >\n {children}\n </Text>\n </BaseButton>\n </ToolbarPrimitive.Button>\n ) : (\n <ToolbarPrimitive.Link\n className={className}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n // @ts-expect-error\n ref={forwardedRef}\n {...rest}\n >\n <Text\n bold\n typo={getTypoBy(size)}\n >\n {children}\n </Text>\n <Icon\n source={OpenInNewIcon}\n size={getIconSizeBy(size)}\n marginLeft={5}\n />\n </ToolbarPrimitive.Link>\n )\n}) as <Link extends string | undefined>(\n props: TabActionProps<Link> & {\n ref?: React.ForwardedRef<TabActionElement<Link>>\n }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","React","createElement","TabsPrimitive","Object","assign","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","TabItem","disabled","asChild","Button","text","colorVariant","styleVariant","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","BaseButton","Text","bold","typo","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n type TabActionElement,\n type TabActionProps,\n type TabActionsProps,\n type TabContentProps,\n type TabItemProps,\n type TabItemsProps,\n type TabListContextValue,\n type TabListProps,\n type TabSize,\n type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n * <TabList>\n * <TabItems>\n * <TabItem />\n * <TabItems />\n * <TabActions>\n * <TabAction />\n * </TabActions>\n * </TabList>\n * <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n { className, activationMode = 'automatic', dir, children, ...rest },\n forwardedRef\n) {\n return (\n <TabsPrimitive.Root\n className={classNames(styles.Tabs, className)}\n activationMode={activationMode}\n ref={forwardedRef}\n dir={dir as 'ltr' | 'rtl'}\n {...rest}\n >\n {children}\n </TabsPrimitive.Root>\n )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n createContext<TabListContextValue>({\n size: 'm',\n })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n const heightContextValue = useMemo(\n () => ({\n size,\n }),\n [size]\n )\n\n return (\n <TabListContextProvider value={heightContextValue}>\n <div\n className={classNames(\n styles.TabList,\n styles[`size-${size}`],\n className\n )}\n ref={forwardedRef}\n {...rest}\n >\n {children}\n </div>\n </TabListContextProvider>\n )\n }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n function TabItems({ className, children, ...rest }, forwardedRef) {\n return (\n <TabsPrimitive.TabsList\n className={classNames(styles.TabItems, className)}\n ref={forwardedRef}\n {...rest}\n >\n {children}\n </TabsPrimitive.TabsList>\n )\n }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n return (\n {\n l: 'l',\n m: 'm',\n s: 's',\n } as const\n )[size]\n}\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n function TabItem(\n { className, disabled, value, children, ...rest },\n forwardedRef\n ) {\n const { size } = useTabListContext()\n\n if (typeof children !== 'string') {\n return null\n }\n\n return (\n <TabsPrimitive.TabsTrigger\n disabled={disabled}\n value={value}\n asChild\n >\n <Button\n className={classNames(styles.TabItem, className)}\n disabled={disabled}\n text={children}\n size={getButtonSizeBy(size)}\n colorVariant=\"monochrome-light\"\n styleVariant=\"tertiary\"\n ref={forwardedRef}\n {...rest}\n />\n </TabsPrimitive.TabsTrigger>\n )\n }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n function TabContent({ children, value, ...rest }, forwardedRef) {\n return (\n <TabsPrimitive.Content\n value={value}\n ref={forwardedRef}\n {...rest}\n >\n {children}\n </TabsPrimitive.Content>\n )\n }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n * It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n return (\n <ToolbarPrimitive.Root\n className={classNames(styles.TabActions, className)}\n aria-label=\"More actions\"\n ref={forwardedRef}\n dir={dir as 'ltr' | 'rtl'}\n {...rest}\n >\n {children}\n </ToolbarPrimitive.Root>\n )\n }\n)\n\nfunction getTypoBy(size: TabSize) {\n return (\n {\n l: '14',\n m: '14',\n s: '13',\n } as const\n )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n return (\n {\n l: 's',\n m: 'xs',\n s: 'xs',\n } as const\n )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n TabActionElement<string | undefined>,\n TabActionProps<string | undefined>\n>(function TabAction(\n { className: classNameProp, href, children, onClick, ...rest },\n forwardedRef\n) {\n const { size } = useTabListContext()\n const className = classNames(\n styles.TabAction,\n styles[`size-${size}`],\n classNameProp\n )\n\n return isNil(href) ? (\n <ToolbarPrimitive.Button\n asChild\n className={className}\n onClick={onClick}\n ref={forwardedRef}\n {...rest}\n >\n <BaseButton>\n <Text\n bold\n typo={getTypoBy(size)}\n >\n {children}\n </Text>\n </BaseButton>\n </ToolbarPrimitive.Button>\n ) : (\n <ToolbarPrimitive.Link\n className={className}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n // @ts-expect-error\n ref={forwardedRef}\n {...rest}\n >\n <Text\n bold\n typo={getTypoBy(size)}\n >\n {children}\n </Text>\n <Icon\n source={OpenInNewIcon}\n size={getIconSizeBy(size)}\n marginLeft={5}\n />\n </ToolbarPrimitive.Link>\n )\n}) as <Link extends string | undefined>(\n props: TabActionProps<Link> & {\n ref?: React.ForwardedRef<TabActionElement<Link>>\n }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","React","createElement","TabsPrimitive","Object","assign","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","TabItem","disabled","asChild","Button","text","colorVariant","styleVariant","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","BaseButton","Text","bold","typo","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { tokenCssVar } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/**\n * `Text` is a component for representing the typography of a design system.\n * @example\n *\n * ```tsx\n * <Text\n * typo=\"15\"\n * color=\"txt-black-darkest\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': tokenCssVar(color),\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","tokenCssVar","undefined","classNames","styles"],"mappings":";;;;;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC,CAAA;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC,CAAA;EAEjD,MAAM;IACJK,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC,IAAAA;AACL,GAAC,GAAGd,UAAU,CAAA;EACd,MAAMe,oBAAoB,GAAGC,aAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC,CAAA;EAElE,oBAAOK,mBAAa,CAClBV,EAAE,EACF;AACEW,IAAAA,GAAG,EAAEpB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEc,iBAAW,CAACV,KAAK,CAAC;AACpC,MAAA,qBAAqB,EAAEM,oBAAoB,GAAGH,SAAS,GAAGQ,SAAS;MACnE,GAAGlB,YAAY,CAACG,KAAK;MACrB,GAAGA,OAAAA;KACJ;IACDC,SAAS,EAAEe,aAAU,CACnBC,mBAAM,CAAC3B,IAAI,EACX2B,mBAAM,CAAE,CAAA,KAAA,EAAOd,IAAK,CAAA,CAAC,CAAC,EACtBE,IAAI,IAAIY,mBAAM,CAACZ,IAAI,EACnBC,MAAM,IAAIW,mBAAM,CAACX,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdU,mBAAM,CAACV,SAAS,GAChBG,oBAAoB,IAAIO,mBAAM,CAAC,sBAAsB,CAAC,EAC1DT,KAAK,IAAIS,mBAAM,CAAE,CAAQT,MAAAA,EAAAA,KAAM,CAAC,CAAA,CAAC,EACjCX,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,aAAa;IAC5B,GAAGQ,IAAAA;GACJ,EACDV,QACF,CAAC,CAAA;AACH,CACF;;;;"}
1
+ {"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { tokenCssVar } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/**\n * `Text` is a component for representing the typography of a design system.\n * @example\n *\n * ```tsx\n * <Text\n * typo=\"15\"\n * color=\"txt-black-darkest\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': tokenCssVar(color),\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","tokenCssVar","undefined","classNames","styles"],"mappings":";;;;;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC,CAAA;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC,CAAA;EAEjD,MAAM;IACJK,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC,IAAAA;AACL,GAAC,GAAGd,UAAU,CAAA;EACd,MAAMe,oBAAoB,GAAGC,aAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC,CAAA;EAElE,oBAAOK,mBAAa,CAClBV,EAAE,EACF;AACEW,IAAAA,GAAG,EAAEpB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEc,iBAAW,CAACV,KAAK,CAAC;AACpC,MAAA,qBAAqB,EAAEM,oBAAoB,GAAGH,SAAS,GAAGQ,SAAS;MACnE,GAAGlB,YAAY,CAACG,KAAK;MACrB,GAAGA,OAAAA;KACJ;IACDC,SAAS,EAAEe,aAAU,CACnBC,mBAAM,CAAC3B,IAAI,EACX2B,mBAAM,CAAC,CAAA,KAAA,EAAQd,IAAI,CAAA,CAAE,CAAC,EACtBE,IAAI,IAAIY,mBAAM,CAACZ,IAAI,EACnBC,MAAM,IAAIW,mBAAM,CAACX,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdU,mBAAM,CAACV,SAAS,GAChBG,oBAAoB,IAAIO,mBAAM,CAAC,sBAAsB,CAAC,EAC1DT,KAAK,IAAIS,mBAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,aAAa;IAC5B,GAAGQ,IAAAA;GACJ,EACDV,QACF,CAAC,CAAA;AACH,CACF;;;;"}
@@ -3,6 +3,7 @@
3
3
  var React = require('react');
4
4
  var index = require('../../node_modules/classnames/index.js');
5
5
  var reactTextareaAutosize_esm = require('../../node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.js');
6
+ var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
6
7
  var useKeyboardActionLockerWhileComposing = require('../../hooks/useKeyboardActionLockerWhileComposing.js');
7
8
  var useMergeRefs = require('../../hooks/useMergeRefs.js');
8
9
  var TextArea_module = require('./TextArea.module.scss.js');
@@ -35,7 +36,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
35
36
  onKeyDown,
36
37
  onKeyUp
37
38
  });
38
- React.useLayoutEffect(function initialAutoFocus() {
39
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function initialAutoFocus() {
39
40
  function setSelectionToEnd() {
40
41
  inputRef.current?.setSelectionRange(inputRef.current?.value.length, inputRef.current?.value.length);
41
42
  }
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef } from 'react'\n\nimport classNames from 'classnames'\nimport TextareaAutosize from 'react-textarea-autosize'\n\nimport {\n COMMON_IME_CONTROL_KEYS,\n useKeyboardActionLockerWhileComposing,\n} from '~/src/hooks/useKeyboardActionLockerWhileComposing'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport type { TextAreaProps } from './TextArea.types'\n\nimport styles from './TextArea.module.scss'\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n function TextArea(\n {\n style,\n className,\n minRows = 6,\n maxRows = 6,\n autoFocus = false,\n value = '',\n onKeyDown,\n onKeyUp,\n ...rest\n },\n forwardedRef\n ) {\n const { disabled, readOnly, hasError, ...ownProps } =\n useFormFieldProps(rest)\n\n const inputRef = useRef<HTMLTextAreaElement | null>(null)\n const mergedInputRef = useMergeRefs(inputRef, forwardedRef)\n\n const { handleKeyDown, handleKeyUp } =\n useKeyboardActionLockerWhileComposing({\n keysToLock: COMMON_IME_CONTROL_KEYS,\n onKeyDown,\n onKeyUp,\n })\n\n useLayoutEffect(function initialAutoFocus() {\n function setSelectionToEnd() {\n inputRef.current?.setSelectionRange(\n inputRef.current?.value.length,\n inputRef.current?.value.length\n )\n }\n\n if (autoFocus) {\n inputRef.current?.focus()\n setSelectionToEnd()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return (\n <TextareaAutosize\n {...ownProps}\n style={style}\n className={classNames(styles.TextArea, className)}\n ref={mergedInputRef}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n maxRows={maxRows}\n minRows={minRows}\n data-testid=\"bezier-text-area\"\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n />\n )\n }\n)\n"],"names":["TextArea","forwardRef","style","className","minRows","maxRows","autoFocus","value","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useLayoutEffect","initialAutoFocus","setSelectionToEnd","current","setSelectionRange","length","focus","React","createElement","TextareaAutosize","Object","assign","classNames","styles","ref"],"mappings":";;;;;;;;;;MAiBaA,QAAQ,gBAAGC,gBAAU,CAChC,SAASD,QAAQA,CACf;EACEE,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,KAAK,GAAG,EAAE;EACVC,SAAS;EACTC,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC,QAAAA;AAAS,GAAC,GACjDC,6BAAiB,CAACN,IAAI,CAAC,CAAA;AAEzB,EAAA,MAAMO,QAAQ,GAAGC,YAAM,CAA6B,IAAI,CAAC,CAAA;AACzD,EAAA,MAAMC,cAAc,GAAGC,oBAAY,CAACH,QAAQ,EAAEN,YAAY,CAAC,CAAA;EAE3D,MAAM;IAAEU,aAAa;AAAEC,IAAAA,WAAAA;GAAa,GAClCC,2EAAqC,CAAC;AACpCC,IAAAA,UAAU,EAAEC,6DAAuB;IACnCjB,SAAS;AACTC,IAAAA,OAAAA;AACF,GAAC,CAAC,CAAA;AAEJiB,EAAAA,qBAAe,CAAC,SAASC,gBAAgBA,GAAG;IAC1C,SAASC,iBAAiBA,GAAG;MAC3BX,QAAQ,CAACY,OAAO,EAAEC,iBAAiB,CACjCb,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAAM,EAC9Bd,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAC1B,CAAC,CAAA;AACH,KAAA;AAEA,IAAA,IAAIzB,SAAS,EAAE;AACbW,MAAAA,QAAQ,CAACY,OAAO,EAAEG,KAAK,EAAE,CAAA;AACzBJ,MAAAA,iBAAiB,EAAE,CAAA;AACrB,KAAA;AACA;GACD,EAAE,EAAE,CAAC,CAAA;EAEN,oBACEK,KAAA,CAAAC,aAAA,CAACC,iCAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACXtB,QAAQ,EAAA;AACZb,IAAAA,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEmC,aAAU,CAACC,uBAAM,CAACvC,QAAQ,EAAEG,SAAS,CAAE;AAClDqC,IAAAA,GAAG,EAAErB,cAAe;AACpBZ,IAAAA,KAAK,EAAEA,KAAM;AACbK,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBR,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAY,kBAAkB;AAC9BI,IAAAA,SAAS,EAAEa,aAAc;AACzBZ,IAAAA,OAAO,EAAEa,WAAAA;AAAY,GAAA,CACtB,CAAC,CAAA;AAEN,CACF;;;;"}
1
+ {"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react'\n\nimport classNames from 'classnames'\nimport TextareaAutosize from 'react-textarea-autosize'\n\nimport { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'\nimport {\n COMMON_IME_CONTROL_KEYS,\n useKeyboardActionLockerWhileComposing,\n} from '~/src/hooks/useKeyboardActionLockerWhileComposing'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport type { TextAreaProps } from './TextArea.types'\n\nimport styles from './TextArea.module.scss'\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n function TextArea(\n {\n style,\n className,\n minRows = 6,\n maxRows = 6,\n autoFocus = false,\n value = '',\n onKeyDown,\n onKeyUp,\n ...rest\n },\n forwardedRef\n ) {\n const { disabled, readOnly, hasError, ...ownProps } =\n useFormFieldProps(rest)\n\n const inputRef = useRef<HTMLTextAreaElement | null>(null)\n const mergedInputRef = useMergeRefs(inputRef, forwardedRef)\n\n const { handleKeyDown, handleKeyUp } =\n useKeyboardActionLockerWhileComposing({\n keysToLock: COMMON_IME_CONTROL_KEYS,\n onKeyDown,\n onKeyUp,\n })\n\n useIsomorphicLayoutEffect(function initialAutoFocus() {\n function setSelectionToEnd() {\n inputRef.current?.setSelectionRange(\n inputRef.current?.value.length,\n inputRef.current?.value.length\n )\n }\n\n if (autoFocus) {\n inputRef.current?.focus()\n setSelectionToEnd()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return (\n <TextareaAutosize\n {...ownProps}\n style={style}\n className={classNames(styles.TextArea, className)}\n ref={mergedInputRef}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n maxRows={maxRows}\n minRows={minRows}\n data-testid=\"bezier-text-area\"\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n />\n )\n }\n)\n"],"names":["TextArea","forwardRef","style","className","minRows","maxRows","autoFocus","value","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useIsomorphicLayoutEffect","initialAutoFocus","setSelectionToEnd","current","setSelectionRange","length","focus","React","createElement","TextareaAutosize","Object","assign","classNames","styles","ref"],"mappings":";;;;;;;;;;;MAkBaA,QAAQ,gBAAGC,gBAAU,CAChC,SAASD,QAAQA,CACf;EACEE,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,KAAK,GAAG,EAAE;EACVC,SAAS;EACTC,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC,QAAAA;AAAS,GAAC,GACjDC,6BAAiB,CAACN,IAAI,CAAC,CAAA;AAEzB,EAAA,MAAMO,QAAQ,GAAGC,YAAM,CAA6B,IAAI,CAAC,CAAA;AACzD,EAAA,MAAMC,cAAc,GAAGC,oBAAY,CAACH,QAAQ,EAAEN,YAAY,CAAC,CAAA;EAE3D,MAAM;IAAEU,aAAa;AAAEC,IAAAA,WAAAA;GAAa,GAClCC,2EAAqC,CAAC;AACpCC,IAAAA,UAAU,EAAEC,6DAAuB;IACnCjB,SAAS;AACTC,IAAAA,OAAAA;AACF,GAAC,CAAC,CAAA;AAEJiB,EAAAA,mDAAyB,CAAC,SAASC,gBAAgBA,GAAG;IACpD,SAASC,iBAAiBA,GAAG;MAC3BX,QAAQ,CAACY,OAAO,EAAEC,iBAAiB,CACjCb,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAAM,EAC9Bd,QAAQ,CAACY,OAAO,EAAEtB,KAAK,CAACwB,MAC1B,CAAC,CAAA;AACH,KAAA;AAEA,IAAA,IAAIzB,SAAS,EAAE;AACbW,MAAAA,QAAQ,CAACY,OAAO,EAAEG,KAAK,EAAE,CAAA;AACzBJ,MAAAA,iBAAiB,EAAE,CAAA;AACrB,KAAA;AACA;GACD,EAAE,EAAE,CAAC,CAAA;EAEN,oBACEK,KAAA,CAAAC,aAAA,CAACC,iCAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACXtB,QAAQ,EAAA;AACZb,IAAAA,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEmC,aAAU,CAACC,uBAAM,CAACvC,QAAQ,EAAEG,SAAS,CAAE;AAClDqC,IAAAA,GAAG,EAAErB,cAAe;AACpBZ,IAAAA,KAAK,EAAEA,KAAM;AACbK,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBR,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAY,kBAAkB;AAC9BI,IAAAA,SAAS,EAAEa,aAAc;AACzBZ,IAAAA,OAAO,EAAEa,WAAAA;AAAY,GAAA,CACtB,CAAC,CAAA;AAEN,CACF;;;;"}