@doist/reactist 29.1.1 → 30.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (227) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/reactist.cjs.development.js +6749 -1832
  3. package/dist/reactist.cjs.development.js.map +1 -1
  4. package/dist/reactist.cjs.production.min.js +1 -1
  5. package/dist/reactist.cjs.production.min.js.map +1 -1
  6. package/es/avatar/avatar.js +106 -36
  7. package/es/avatar/avatar.js.map +1 -1
  8. package/es/avatar/utils.js +17 -19
  9. package/es/avatar/utils.js.map +1 -1
  10. package/es/badge/badge.js +50 -6
  11. package/es/badge/badge.js.map +1 -1
  12. package/es/banner/banner.js +384 -41
  13. package/es/banner/banner.js.map +1 -1
  14. package/es/base-field/base-field.js +367 -77
  15. package/es/base-field/base-field.js.map +1 -1
  16. package/es/box/box.js +139 -61
  17. package/es/box/box.js.map +1 -1
  18. package/es/button/button.js +346 -36
  19. package/es/button/button.js.map +1 -1
  20. package/es/checkbox-field/checkbox-field.js +71 -48
  21. package/es/checkbox-field/checkbox-field.js.map +1 -1
  22. package/es/checkbox-field/checkbox-icon.js +88 -28
  23. package/es/checkbox-field/checkbox-icon.js.map +1 -1
  24. package/es/checkbox-field/use-fork-ref.js +15 -20
  25. package/es/checkbox-field/use-fork-ref.js.map +1 -1
  26. package/es/columns/columns.js +46 -23
  27. package/es/columns/columns.js.map +1 -1
  28. package/es/components/color-picker/color-picker.js +190 -46
  29. package/es/components/color-picker/color-picker.js.map +1 -1
  30. package/es/components/deprecated-button/deprecated-button.js +102 -9
  31. package/es/components/deprecated-button/deprecated-button.js.map +1 -1
  32. package/es/components/deprecated-button/index.js +5 -2
  33. package/es/components/deprecated-button/index.js.map +1 -1
  34. package/es/components/deprecated-dropdown/dropdown.js +234 -134
  35. package/es/components/deprecated-dropdown/dropdown.js.map +1 -1
  36. package/es/components/deprecated-dropdown/index.js +4 -1
  37. package/es/components/deprecated-dropdown/index.js.map +1 -1
  38. package/es/components/deprecated-input/index.js +5 -2
  39. package/es/components/deprecated-input/index.js.map +1 -1
  40. package/es/components/deprecated-input/input.js +27 -4
  41. package/es/components/deprecated-input/input.js.map +1 -1
  42. package/es/components/deprecated-select/select.js +110 -7
  43. package/es/components/deprecated-select/select.js.map +1 -1
  44. package/es/components/key-capturer/key-capturer.js +190 -137
  45. package/es/components/key-capturer/key-capturer.js.map +1 -1
  46. package/es/components/keyboard-shortcut/keyboard-shortcut.js +65 -45
  47. package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  48. package/es/components/progress-bar/progress-bar.js +61 -9
  49. package/es/components/progress-bar/progress-bar.js.map +1 -1
  50. package/es/components/time/index.js +5 -2
  51. package/es/components/time/index.js.map +1 -1
  52. package/es/components/time/time-utils.js +59 -53
  53. package/es/components/time/time-utils.js.map +1 -1
  54. package/es/components/time/time.js +94 -91
  55. package/es/components/time/time.js.map +1 -1
  56. package/es/divider/divider.js +44 -5
  57. package/es/divider/divider.js.map +1 -1
  58. package/es/heading/heading.js +122 -20
  59. package/es/heading/heading.js.map +1 -1
  60. package/es/hidden/hidden.js +36 -30
  61. package/es/hidden/hidden.js.map +1 -1
  62. package/es/hidden-visually/hidden-visually.js +9 -4
  63. package/es/hidden-visually/hidden-visually.js.map +1 -1
  64. package/es/icons/alert-icon.js +145 -18
  65. package/es/icons/alert-icon.js.map +1 -1
  66. package/es/icons/banner-icon.js +213 -25
  67. package/es/icons/banner-icon.js.map +1 -1
  68. package/es/icons/close-icon.js +26 -3
  69. package/es/icons/close-icon.js.map +1 -1
  70. package/es/icons/password-hidden-icon.js +40 -6
  71. package/es/icons/password-hidden-icon.js.map +1 -1
  72. package/es/icons/password-visible-icon.js +33 -5
  73. package/es/icons/password-visible-icon.js.map +1 -1
  74. package/es/index.js +9 -9
  75. package/es/inline/inline.js +24 -9
  76. package/es/inline/inline.js.map +1 -1
  77. package/es/loading/loading.js +63 -17
  78. package/es/loading/loading.js.map +1 -1
  79. package/es/menu/menu.js +469 -92
  80. package/es/menu/menu.js.map +1 -1
  81. package/es/modal/modal.js +675 -112
  82. package/es/modal/modal.js.map +1 -1
  83. package/es/notice/notice.js +77 -10
  84. package/es/notice/notice.js.map +1 -1
  85. package/es/password-field/password-field.js +89 -11
  86. package/es/password-field/password-field.js.map +1 -1
  87. package/es/prose/prose.js +48 -9
  88. package/es/prose/prose.js.map +1 -1
  89. package/es/select-field/select-field.js +150 -19
  90. package/es/select-field/select-field.js.map +1 -1
  91. package/es/spinner/spinner.js +39 -6
  92. package/es/spinner/spinner.js.map +1 -1
  93. package/es/stack/stack.js +29 -17
  94. package/es/stack/stack.js.map +1 -1
  95. package/es/switch-field/switch-field.js +225 -42
  96. package/es/switch-field/switch-field.js.map +1 -1
  97. package/es/tabs/tabs.js +207 -109
  98. package/es/tabs/tabs.js.map +1 -1
  99. package/es/text/text.js +27 -17
  100. package/es/text/text.js.map +1 -1
  101. package/es/text-area/text-area.js +264 -54
  102. package/es/text-area/text-area.js.map +1 -1
  103. package/es/text-field/text-field.js +204 -31
  104. package/es/text-field/text-field.js.map +1 -1
  105. package/es/text-link/text-link.js +21 -10
  106. package/es/text-link/text-link.js.map +1 -1
  107. package/es/toast/static-toast.js +143 -25
  108. package/es/toast/static-toast.js.map +1 -1
  109. package/es/toast/toast-animation.js +159 -109
  110. package/es/toast/toast-animation.js.map +1 -1
  111. package/es/toast/use-toasts.js +309 -84
  112. package/es/toast/use-toasts.js.map +1 -1
  113. package/es/tooltip/tooltip.js +88 -32
  114. package/es/tooltip/tooltip.js.map +1 -1
  115. package/es/utils/common-helpers.js +12 -11
  116. package/es/utils/common-helpers.js.map +1 -1
  117. package/es/utils/polymorphism.js +84 -1
  118. package/es/utils/polymorphism.js.map +1 -1
  119. package/es/utils/responsive-props.js +43 -32
  120. package/es/utils/responsive-props.js.map +1 -1
  121. package/lib/avatar/avatar.js +109 -35
  122. package/lib/avatar/avatar.js.map +1 -1
  123. package/lib/avatar/utils.js +17 -19
  124. package/lib/avatar/utils.js.map +1 -1
  125. package/lib/badge/badge.js +53 -5
  126. package/lib/badge/badge.js.map +1 -1
  127. package/lib/banner/banner.js +385 -38
  128. package/lib/banner/banner.js.map +1 -1
  129. package/lib/base-field/base-field.js +366 -73
  130. package/lib/base-field/base-field.js.map +1 -1
  131. package/lib/box/box.js +141 -61
  132. package/lib/box/box.js.map +1 -1
  133. package/lib/button/button.js +347 -35
  134. package/lib/button/button.js.map +1 -1
  135. package/lib/checkbox-field/checkbox-field.js +73 -46
  136. package/lib/checkbox-field/checkbox-field.js.map +1 -1
  137. package/lib/checkbox-field/checkbox-icon.js +92 -28
  138. package/lib/checkbox-field/checkbox-icon.js.map +1 -1
  139. package/lib/checkbox-field/use-fork-ref.js +15 -20
  140. package/lib/checkbox-field/use-fork-ref.js.map +1 -1
  141. package/lib/columns/columns.js +49 -22
  142. package/lib/columns/columns.js.map +1 -1
  143. package/lib/components/color-picker/color-picker.js +189 -45
  144. package/lib/components/color-picker/color-picker.js.map +1 -1
  145. package/lib/components/deprecated-button/deprecated-button.js +104 -9
  146. package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
  147. package/lib/components/deprecated-dropdown/dropdown.js +235 -133
  148. package/lib/components/deprecated-dropdown/dropdown.js.map +1 -1
  149. package/lib/components/deprecated-input/input.js +28 -4
  150. package/lib/components/deprecated-input/input.js.map +1 -1
  151. package/lib/components/deprecated-select/select.js +112 -7
  152. package/lib/components/deprecated-select/select.js.map +1 -1
  153. package/lib/components/key-capturer/key-capturer.js +188 -135
  154. package/lib/components/key-capturer/key-capturer.js.map +1 -1
  155. package/lib/components/keyboard-shortcut/keyboard-shortcut.js +67 -45
  156. package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  157. package/lib/components/progress-bar/progress-bar.js +60 -8
  158. package/lib/components/progress-bar/progress-bar.js.map +1 -1
  159. package/lib/components/time/time-utils.js +59 -53
  160. package/lib/components/time/time-utils.js.map +1 -1
  161. package/lib/components/time/time.js +93 -90
  162. package/lib/components/time/time.js.map +1 -1
  163. package/lib/divider/divider.js +47 -4
  164. package/lib/divider/divider.js.map +1 -1
  165. package/lib/heading/heading.js +125 -19
  166. package/lib/heading/heading.js.map +1 -1
  167. package/lib/hidden/hidden.js +39 -29
  168. package/lib/hidden/hidden.js.map +1 -1
  169. package/lib/hidden-visually/hidden-visually.js +11 -3
  170. package/lib/hidden-visually/hidden-visually.js.map +1 -1
  171. package/lib/icons/alert-icon.js +149 -18
  172. package/lib/icons/alert-icon.js.map +1 -1
  173. package/lib/icons/banner-icon.js +217 -25
  174. package/lib/icons/banner-icon.js.map +1 -1
  175. package/lib/icons/close-icon.js +29 -3
  176. package/lib/icons/close-icon.js.map +1 -1
  177. package/lib/icons/password-hidden-icon.js +43 -6
  178. package/lib/icons/password-hidden-icon.js.map +1 -1
  179. package/lib/icons/password-visible-icon.js +36 -5
  180. package/lib/icons/password-visible-icon.js.map +1 -1
  181. package/lib/inline/inline.js +27 -8
  182. package/lib/inline/inline.js.map +1 -1
  183. package/lib/loading/loading.js +67 -17
  184. package/lib/loading/loading.js.map +1 -1
  185. package/lib/menu/menu.js +471 -91
  186. package/lib/menu/menu.js.map +1 -1
  187. package/lib/modal/modal.js +671 -106
  188. package/lib/modal/modal.js.map +1 -1
  189. package/lib/notice/notice.js +75 -8
  190. package/lib/notice/notice.js.map +1 -1
  191. package/lib/password-field/password-field.js +92 -10
  192. package/lib/password-field/password-field.js.map +1 -1
  193. package/lib/prose/prose.js +51 -8
  194. package/lib/prose/prose.js.map +1 -1
  195. package/lib/select-field/select-field.js +152 -17
  196. package/lib/select-field/select-field.js.map +1 -1
  197. package/lib/spinner/spinner.js +39 -6
  198. package/lib/spinner/spinner.js.map +1 -1
  199. package/lib/stack/stack.js +29 -15
  200. package/lib/stack/stack.js.map +1 -1
  201. package/lib/switch-field/switch-field.js +225 -38
  202. package/lib/switch-field/switch-field.js.map +1 -1
  203. package/lib/tabs/tabs.js +207 -107
  204. package/lib/tabs/tabs.js.map +1 -1
  205. package/lib/text/text.js +30 -16
  206. package/lib/text/text.js.map +1 -1
  207. package/lib/text-area/text-area.js +264 -52
  208. package/lib/text-area/text-area.js.map +1 -1
  209. package/lib/text-field/text-field.js +207 -30
  210. package/lib/text-field/text-field.js.map +1 -1
  211. package/lib/text-link/text-link.js +24 -9
  212. package/lib/text-link/text-link.js.map +1 -1
  213. package/lib/toast/static-toast.js +142 -22
  214. package/lib/toast/static-toast.js.map +1 -1
  215. package/lib/toast/toast-animation.js +158 -108
  216. package/lib/toast/toast-animation.js.map +1 -1
  217. package/lib/toast/use-toasts.js +310 -82
  218. package/lib/toast/use-toasts.js.map +1 -1
  219. package/lib/tooltip/tooltip.js +87 -31
  220. package/lib/tooltip/tooltip.js.map +1 -1
  221. package/lib/utils/common-helpers.js +12 -11
  222. package/lib/utils/common-helpers.js.map +1 -1
  223. package/lib/utils/polymorphism.js +84 -1
  224. package/lib/utils/polymorphism.js.map +1 -1
  225. package/lib/utils/responsive-props.js +43 -32
  226. package/lib/utils/responsive-props.js.map +1 -1
  227. package/package.json +12 -3
package/es/tabs/tabs.js CHANGED
@@ -1,146 +1,244 @@
1
- import { __rest, __assign } from 'tslib';
1
+ import _extends from '@babel/runtime/helpers/extends';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import { c } from 'react-compiler-runtime';
2
4
  import * as React from 'react';
3
- import { Tab as Tab$1, TabPanel as TabPanel$1, useTabStore, TabList as TabList$1 } from '@ariakit/react';
5
+ import { useTabStore, TabList as TabList$1, TabPanel as TabPanel$1, Tab as Tab$1 } from '@ariakit/react';
4
6
  import classNames from 'classnames';
7
+ import modules_40c67f5b from './tabs.module.css.js';
5
8
  import { Box } from '../box/box.js';
6
9
  import { Inline } from '../inline/inline.js';
7
- import modules_40c67f5b from './tabs.module.css.js';
8
10
 
9
- var TabsContext = React.createContext(null);
11
+ const _excluded = ["children", "space", "width", "align", "exceptionallySetClassName"],
12
+ _excluded2 = ["children", "id", "renderMode"];
13
+ const TabsContext = /*#__PURE__*/React.createContext(null);
10
14
  /**
11
15
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
12
16
  */
13
- function Tabs(_a) {
14
- var children = _a.children, selectedId = _a.selectedId, defaultSelectedId = _a.defaultSelectedId, _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, onSelectedIdChange = _a.onSelectedIdChange;
15
- var tabStore = useTabStore({
16
- defaultSelectedId: defaultSelectedId,
17
- selectedId: selectedId,
18
- setSelectedId: onSelectedIdChange,
19
- });
20
- var actualSelectedId = tabStore.useState('selectedId');
21
- var memoizedTabState = React.useMemo(function () { var _a; return ({ tabStore: tabStore, variant: variant, selectedId: (_a = selectedId !== null && selectedId !== void 0 ? selectedId : actualSelectedId) !== null && _a !== void 0 ? _a : null }); }, [variant, tabStore, selectedId, actualSelectedId]);
22
- return React.createElement(TabsContext.Provider, { value: memoizedTabState }, children);
17
+ function Tabs({
18
+ children,
19
+ selectedId,
20
+ defaultSelectedId,
21
+ variant = 'neutral',
22
+ onSelectedIdChange
23
+ }) {
24
+ const tabStore = useTabStore({
25
+ defaultSelectedId,
26
+ selectedId,
27
+ setSelectedId: onSelectedIdChange
28
+ });
29
+ const actualSelectedId = tabStore.useState('selectedId');
30
+ const memoizedTabState = React.useMemo(() => ({
31
+ tabStore,
32
+ variant,
33
+ selectedId: selectedId ?? actualSelectedId ?? null
34
+ }), [variant, tabStore, selectedId, actualSelectedId]);
35
+ return /*#__PURE__*/React.createElement(TabsContext.Provider, {
36
+ value: memoizedTabState
37
+ }, children);
23
38
  }
24
39
  /**
25
40
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
26
41
  */
27
- var Tab = React.forwardRef(function Tab(_a, ref) {
28
- var children = _a.children, id = _a.id, disabled = _a.disabled, exceptionallySetClassName = _a.exceptionallySetClassName, render = _a.render, onClick = _a.onClick;
29
- var tabContextValue = React.useContext(TabsContext);
30
- if (!tabContextValue)
31
- return null;
32
- var variant = tabContextValue.variant, tabStore = tabContextValue.tabStore;
33
- var className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-".concat(variant)]);
34
- return (React.createElement(Tab$1, { id: id, ref: ref, disabled: disabled, store: tabStore, render: render, className: className, onClick: onClick }, children));
42
+ const Tab = /*#__PURE__*/React.forwardRef(function Tab(t0, ref) {
43
+ const $ = c(12);
44
+ const {
45
+ children,
46
+ id,
47
+ disabled,
48
+ exceptionallySetClassName,
49
+ render,
50
+ onClick
51
+ } = t0;
52
+ const tabContextValue = React.useContext(TabsContext);
53
+ if (!tabContextValue) {
54
+ return null;
55
+ }
56
+ const {
57
+ variant,
58
+ tabStore
59
+ } = tabContextValue;
60
+ const t1 = modules_40c67f5b[`tab-${variant}`];
61
+ let t2;
62
+ if ($[0] !== exceptionallySetClassName || $[1] !== t1) {
63
+ t2 = classNames(exceptionallySetClassName, modules_40c67f5b.tab, t1);
64
+ $[0] = exceptionallySetClassName;
65
+ $[1] = t1;
66
+ $[2] = t2;
67
+ } else {
68
+ t2 = $[2];
69
+ }
70
+ const className = t2;
71
+ let t3;
72
+ if ($[3] !== children || $[4] !== className || $[5] !== disabled || $[6] !== id || $[7] !== onClick || $[8] !== ref || $[9] !== render || $[10] !== tabStore) {
73
+ t3 = /*#__PURE__*/React.createElement(Tab$1, {
74
+ id: id,
75
+ ref: ref,
76
+ disabled: disabled,
77
+ store: tabStore,
78
+ render: render,
79
+ className: className,
80
+ onClick: onClick
81
+ }, children);
82
+ $[3] = children;
83
+ $[4] = className;
84
+ $[5] = disabled;
85
+ $[6] = id;
86
+ $[7] = onClick;
87
+ $[8] = ref;
88
+ $[9] = render;
89
+ $[10] = tabStore;
90
+ $[11] = t3;
91
+ } else {
92
+ t3 = $[11];
93
+ }
94
+ return t3;
35
95
  });
36
96
  /**
37
97
  * A component used to group `<Tab>` elements together.
38
98
  */
39
- function TabList(_a) {
40
- var children = _a.children, space = _a.space, _b = _a.width, width = _b === void 0 ? 'maxContent' : _b, _c = _a.align, align = _c === void 0 ? 'start' : _c, exceptionallySetClassName = _a.exceptionallySetClassName, props = __rest(_a, ["children", "space", "width", "align", "exceptionallySetClassName"]);
41
- var tabListRef = React.useRef(null);
42
- var tabListPrevWidthRef = React.useRef(0);
43
- var tabContextValue = React.useContext(TabsContext);
44
- var _d = React.useState(null), selectedTabElement = _d[0], setSelectedTabElement = _d[1];
45
- var _e = React.useState({}), selectedTabStyle = _e[0], setSelectedTabStyle = _e[1];
46
- var selectedId = tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.tabStore.useState('selectedId');
47
- var updateSelectedTabPosition = React.useCallback(function updateSelectedTabPositionCallback() {
48
- if (!selectedId || !tabListRef.current) {
49
- return;
50
- }
51
- var tabs = tabListRef.current.querySelectorAll('[role="tab"]');
52
- var selectedTab = Array.from(tabs).find(function (tab) { return tab.getAttribute('id') === selectedId; });
53
- if (selectedTab) {
54
- setSelectedTabElement(selectedTab);
55
- setSelectedTabStyle({
56
- left: "".concat(selectedTab.offsetLeft, "px"),
57
- width: "".concat(selectedTab.offsetWidth, "px"),
58
- });
99
+ function TabList(_ref) {
100
+ let {
101
+ children,
102
+ space,
103
+ width = 'maxContent',
104
+ align = 'start',
105
+ exceptionallySetClassName
106
+ } = _ref,
107
+ props = _objectWithoutProperties(_ref, _excluded);
108
+ const tabListRef = React.useRef(null);
109
+ const tabListPrevWidthRef = React.useRef(0);
110
+ const tabContextValue = React.useContext(TabsContext);
111
+ const [selectedTabElement, setSelectedTabElement] = React.useState(null);
112
+ const [selectedTabStyle, setSelectedTabStyle] = React.useState({});
113
+ const selectedId = tabContextValue?.tabStore.useState('selectedId');
114
+ const updateSelectedTabPosition = React.useCallback(function updateSelectedTabPositionCallback() {
115
+ if (!selectedId || !tabListRef.current) {
116
+ return;
117
+ }
118
+ const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
119
+ const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
120
+ if (selectedTab) {
121
+ setSelectedTabElement(selectedTab);
122
+ setSelectedTabStyle({
123
+ left: `${selectedTab.offsetLeft}px`,
124
+ width: `${selectedTab.offsetWidth}px`
125
+ });
126
+ }
127
+ }, [selectedId]);
128
+ React.useEffect(function updateSelectedTabPositionOnTabChange() {
129
+ updateSelectedTabPosition();
130
+ },
131
+ // `selectedId` is a dependency to ensure the effect runs when the selected tab changes
132
+ [selectedId, updateSelectedTabPosition]);
133
+ React.useEffect(function observeTabListWidthChange() {
134
+ let animationFrameId = null;
135
+ const tabListObserver = new ResizeObserver(([entry]) => {
136
+ const width_0 = entry?.contentRect.width;
137
+ if (width_0 && tabListPrevWidthRef.current !== width_0) {
138
+ tabListPrevWidthRef.current = width_0;
139
+ if (animationFrameId !== null) {
140
+ cancelAnimationFrame(animationFrameId);
59
141
  }
60
- }, [selectedId]);
61
- React.useEffect(function updateSelectedTabPositionOnTabChange() {
62
- updateSelectedTabPosition();
63
- },
64
- // `selectedId` is a dependency to ensure the effect runs when the selected tab changes
65
- [selectedId, updateSelectedTabPosition]);
66
- React.useEffect(function observeTabListWidthChange() {
67
- var animationFrameId = null;
68
- var tabListObserver = new ResizeObserver(function (_a) {
69
- var entry = _a[0];
70
- var width = entry === null || entry === void 0 ? void 0 : entry.contentRect.width;
71
- if (width && tabListPrevWidthRef.current !== width) {
72
- tabListPrevWidthRef.current = width;
73
- if (animationFrameId !== null) {
74
- cancelAnimationFrame(animationFrameId);
75
- }
76
- animationFrameId = requestAnimationFrame(function () {
77
- updateSelectedTabPosition();
78
- animationFrameId = null;
79
- });
80
- }
142
+ animationFrameId = requestAnimationFrame(() => {
143
+ updateSelectedTabPosition();
144
+ animationFrameId = null;
81
145
  });
82
- if (tabListRef.current) {
83
- tabListObserver.observe(tabListRef.current);
84
- }
85
- return function cleanupResizeObserver() {
86
- if (animationFrameId) {
87
- cancelAnimationFrame(animationFrameId);
88
- }
89
- tabListObserver.disconnect();
90
- };
91
- }, [updateSelectedTabPosition]);
92
- if (!tabContextValue) {
93
- return null;
146
+ }
147
+ });
148
+ if (tabListRef.current) {
149
+ tabListObserver.observe(tabListRef.current);
94
150
  }
95
- var tabStore = tabContextValue.tabStore, variant = tabContextValue.variant;
96
- var justifyContentAlignMap = {
97
- start: 'flexStart',
98
- end: 'flexEnd',
99
- center: 'center',
151
+ return function cleanupResizeObserver() {
152
+ if (animationFrameId) {
153
+ cancelAnimationFrame(animationFrameId);
154
+ }
155
+ tabListObserver.disconnect();
100
156
  };
101
- return (
157
+ }, [updateSelectedTabPosition]);
158
+ if (!tabContextValue) {
159
+ return null;
160
+ }
161
+ const {
162
+ tabStore,
163
+ variant
164
+ } = tabContextValue;
165
+ const justifyContentAlignMap = {
166
+ start: 'flexStart',
167
+ end: 'flexEnd',
168
+ center: 'center'
169
+ };
170
+ return (
171
+ /*#__PURE__*/
102
172
  // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
103
173
  // negative margins from collapsing when used in a flex container which will render the
104
174
  // track with the wrong height
105
- React.createElement(Box, { display: "flex", justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align] },
106
- React.createElement(TabList$1, __assign({ store: tabStore, render: React.createElement(Box, { position: "relative", width: width, className: exceptionallySetClassName }), ref: tabListRef }, props),
107
- React.createElement(Box, { className: [modules_40c67f5b.track, modules_40c67f5b["track-".concat(variant)]] }),
108
- selectedTabElement ? (React.createElement(Box, { className: [modules_40c67f5b.selected, modules_40c67f5b["selected-".concat(variant)]], style: selectedTabStyle })) : null,
109
- React.createElement(Inline, { space: space, exceptionallySetClassName: classNames(width === 'full' ? modules_40c67f5b.fullTabList : null) }, children))));
175
+ React.createElement(Box, {
176
+ display: "flex",
177
+ justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align]
178
+ }, /*#__PURE__*/React.createElement(TabList$1, _extends({
179
+ store: tabStore,
180
+ render: /*#__PURE__*/React.createElement(Box, {
181
+ position: "relative",
182
+ width: width,
183
+ className: exceptionallySetClassName
184
+ }),
185
+ ref: tabListRef
186
+ }, props), /*#__PURE__*/React.createElement(Box, {
187
+ className: [modules_40c67f5b.track, modules_40c67f5b[`track-${variant}`]]
188
+ }), selectedTabElement ? /*#__PURE__*/React.createElement(Box, {
189
+ className: [modules_40c67f5b.selected, modules_40c67f5b[`selected-${variant}`]],
190
+ style: selectedTabStyle
191
+ }) : null, /*#__PURE__*/React.createElement(Inline, {
192
+ space: space,
193
+ exceptionallySetClassName: classNames(width === 'full' ? modules_40c67f5b.fullTabList : null)
194
+ }, children)))
195
+ );
110
196
  }
111
197
  /**
112
198
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
113
199
  * corresponding `<Tab>` component.
114
200
  */
115
- var TabPanel = React.forwardRef(function TabPanel(_a, ref) {
116
- var children = _a.children, id = _a.id, _b = _a.renderMode, renderMode = _b === void 0 ? 'always' : _b, props = __rest(_a, ["children", "id", "renderMode"]);
117
- var tabContextValue = React.useContext(TabsContext);
118
- var _c = React.useState(false), tabRendered = _c[0], setTabRendered = _c[1];
119
- var selectedId = tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.tabStore.useState('selectedId');
120
- var tabIsActive = selectedId === id;
121
- React.useEffect(function trackTabRenderedState() {
122
- if (!tabRendered && tabIsActive) {
123
- setTabRendered(true);
124
- }
125
- }, [tabRendered, tabIsActive]);
126
- if (!tabContextValue) {
127
- return null;
201
+ const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(_ref2, ref) {
202
+ let {
203
+ children,
204
+ id,
205
+ renderMode = 'always'
206
+ } = _ref2,
207
+ props = _objectWithoutProperties(_ref2, _excluded2);
208
+ const tabContextValue = React.useContext(TabsContext);
209
+ const [tabRendered, setTabRendered] = React.useState(false);
210
+ const selectedId = tabContextValue?.tabStore.useState('selectedId');
211
+ const tabIsActive = selectedId === id;
212
+ React.useEffect(function trackTabRenderedState() {
213
+ if (!tabRendered && tabIsActive) {
214
+ setTabRendered(true);
128
215
  }
129
- var tabStore = tabContextValue.tabStore;
130
- var shouldRender = renderMode === 'always' ||
131
- (renderMode === 'active' && tabIsActive) ||
132
- (renderMode === 'lazy' && (tabIsActive || tabRendered));
133
- return shouldRender ? (React.createElement(TabPanel$1, __assign({}, props, { tabId: id, store: tabStore, ref: ref }), children)) : null;
216
+ }, [tabRendered, tabIsActive]);
217
+ if (!tabContextValue) {
218
+ return null;
219
+ }
220
+ const {
221
+ tabStore
222
+ } = tabContextValue;
223
+ const shouldRender = renderMode === 'always' || renderMode === 'active' && tabIsActive || renderMode === 'lazy' && (tabIsActive || tabRendered);
224
+ return shouldRender ? /*#__PURE__*/React.createElement(TabPanel$1, _extends({}, props, {
225
+ tabId: id,
226
+ store: tabStore,
227
+ ref: ref
228
+ }), children) : null;
134
229
  });
135
230
  /**
136
231
  * Allows content to be rendered based on the current tab being selected while outside of the
137
232
  * TabPanel component. Can be placed freely within the main `<Tabs>` component.
138
233
  */
139
- function TabAwareSlot(_a) {
140
- var children = _a.children;
141
- var tabContextValue = React.useContext(TabsContext);
142
- var selectedId = tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.tabStore.useState('selectedId');
143
- return tabContextValue ? children({ selectedId: selectedId }) : null;
234
+ function TabAwareSlot({
235
+ children
236
+ }) {
237
+ const tabContextValue = React.useContext(TabsContext);
238
+ const selectedId = tabContextValue?.tabStore.useState('selectedId');
239
+ return tabContextValue ? children({
240
+ selectedId
241
+ }) : null;
144
242
  }
145
243
 
146
244
  export { Tab, TabAwareSlot, TabList, TabPanel, Tabs };
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":[null],"names":["styles","BaseTab","BaseTabList","BaseTabPanel"],"mappings":"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"}
1
+ {"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n Tab as BaseTab,\n TabList as BaseTabList,\n TabPanel as BaseTabPanel,\n useTabStore,\n} from '@ariakit/react'\nimport classNames from 'classnames'\n\nimport { Box } from '../box'\nimport { Inline } from '../inline'\n\nimport styles from './tabs.module.css'\n\nimport type {\n TabPanelProps as BaseTabPanelProps,\n TabProps as BaseTabProps,\n TabStore,\n} from '@ariakit/react'\nimport type { BoxJustifyContent } from '../box'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n /**\n * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n * components\n */\n children: React.ReactNode\n\n /**\n * Determines the look and feel of the tabs\n */\n variant?: 'themed' | 'neutral'\n\n /**\n * The id of the selected tab. Assigning a value makes this a controlled component\n */\n selectedId?: string | null\n\n /**\n * The tab to initially select. This can be used if the component should not\n * be a controlled component but needs to have a tab selected\n */\n defaultSelectedId?: string | null\n\n /**\n * Called with the tab id when a tab is selected\n */\n onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n children,\n selectedId,\n defaultSelectedId,\n variant = 'neutral',\n onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n const tabStore = useTabStore({\n defaultSelectedId,\n selectedId,\n setSelectedId: onSelectedIdChange,\n })\n const actualSelectedId = tabStore.useState('selectedId')\n\n const memoizedTabState = React.useMemo(\n () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n [variant, tabStore, selectedId, actualSelectedId],\n )\n return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps\n extends ObfuscatedClassName,\n Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\n /**\n * The content to render inside of the tab button\n */\n children: React.ReactNode\n\n /**\n * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n */\n id: string\n\n /**\n * Defines wether or not the tab is disabled.\n */\n disabled?: boolean\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n { children, id, disabled, exceptionallySetClassName, render, onClick },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n if (!tabContextValue) return null\n\n const { variant, tabStore } = tabContextValue\n const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n return (\n <BaseTab\n id={id}\n ref={ref}\n disabled={disabled}\n store={tabStore}\n render={render}\n className={className}\n onClick={onClick}\n >\n {children}\n </BaseTab>\n )\n})\n\ntype TabListProps = (\n | {\n /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n 'aria-label': string\n }\n | {\n /**\n * One or more element IDs used to label the tab list for assistive technologies. Required if\n * `aria-label` is omitted.\n */\n 'aria-labelledby': string\n }\n | {\n /**\n * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n */\n 'aria-hidden': boolean\n }\n) & {\n /**\n * A list of `<Tab>` elements\n */\n children: React.ReactNode\n\n /**\n * Controls the spacing between tabs\n */\n space?: Space\n\n /**\n * The width of the tab list.\n *\n * - `'maxContent'`: Each tab will be as wide as its content.\n * - `'full'`: Each tab will be as wide as the tab list.\n *\n * @default 'maxContent'\n */\n width?: 'maxContent' | 'full'\n\n /**\n * How to align the tabs within the tab list.\n *\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n children,\n space,\n width = 'maxContent',\n align = 'start',\n exceptionallySetClassName,\n ...props\n}: TabListProps): React.ReactElement | null {\n const tabListRef = React.useRef<HTMLDivElement | null>(null)\n const tabListPrevWidthRef = React.useRef(0)\n\n const tabContextValue = React.useContext(TabsContext)\n\n const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n\n const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n const updateSelectedTabPosition = React.useCallback(\n function updateSelectedTabPositionCallback() {\n if (!selectedId || !tabListRef.current) {\n return\n }\n\n const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n const selectedTab = Array.from(tabs).find(\n (tab) => tab.getAttribute('id') === selectedId,\n ) as HTMLElement | undefined\n\n if (selectedTab) {\n setSelectedTabElement(selectedTab)\n setSelectedTabStyle({\n left: `${selectedTab.offsetLeft}px`,\n width: `${selectedTab.offsetWidth}px`,\n })\n }\n },\n [selectedId],\n )\n\n React.useEffect(\n function updateSelectedTabPositionOnTabChange() {\n updateSelectedTabPosition()\n },\n // `selectedId` is a dependency to ensure the effect runs when the selected tab changes\n [selectedId, updateSelectedTabPosition],\n )\n\n React.useEffect(\n function observeTabListWidthChange() {\n let animationFrameId: number | null = null\n\n const tabListObserver = new ResizeObserver(([entry]) => {\n const width = entry?.contentRect.width\n\n if (width && tabListPrevWidthRef.current !== width) {\n tabListPrevWidthRef.current = width\n\n if (animationFrameId !== null) {\n cancelAnimationFrame(animationFrameId)\n }\n\n animationFrameId = requestAnimationFrame(() => {\n updateSelectedTabPosition()\n animationFrameId = null\n })\n }\n })\n\n if (tabListRef.current) {\n tabListObserver.observe(tabListRef.current)\n }\n\n return function cleanupResizeObserver() {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId)\n }\n\n tabListObserver.disconnect()\n }\n },\n [updateSelectedTabPosition],\n )\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabStore, variant } = tabContextValue\n\n const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n start: 'flexStart',\n end: 'flexEnd',\n center: 'center',\n }\n\n return (\n // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n // negative margins from collapsing when used in a flex container which will render the\n // track with the wrong height\n <Box\n display=\"flex\"\n justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n >\n <BaseTabList\n store={tabStore}\n render={\n <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n }\n ref={tabListRef}\n {...props}\n >\n <Box className={[styles.track, styles[`track-${variant}`]]} />\n {selectedTabElement ? (\n <Box\n className={[styles.selected, styles[`selected-${variant}`]]}\n style={selectedTabStyle}\n />\n ) : null}\n <Inline\n space={space}\n exceptionallySetClassName={classNames(\n width === 'full' ? styles.fullTabList : null,\n )}\n >\n {children}\n </Inline>\n </BaseTabList>\n </Box>\n )\n}\n\ninterface TabPanelProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Pick<BaseTabPanelProps, 'render'> {\n /** The content to be rendered inside the tab */\n children?: React.ReactNode\n\n /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n id: string\n\n /**\n * By default, the tab panel's content is always rendered even when they are not active. This\n * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n * once they are active until the entire Tabs tree is unmounted.\n */\n renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n { children, id, renderMode = 'always', ...props },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n const [tabRendered, setTabRendered] = React.useState(false)\n const selectedId = tabContextValue?.tabStore.useState('selectedId')\n const tabIsActive = selectedId === id\n\n React.useEffect(\n function trackTabRenderedState() {\n if (!tabRendered && tabIsActive) {\n setTabRendered(true)\n }\n },\n [tabRendered, tabIsActive],\n )\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabStore } = tabContextValue\n const shouldRender =\n renderMode === 'always' ||\n (renderMode === 'active' && tabIsActive) ||\n (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n return shouldRender ? (\n <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n {children}\n </BaseTabPanel>\n ) : null\n})\n\ntype TabAwareSlotProps = {\n /**\n * Render prop used to provide the content to be rendered inside the slot. The render prop will\n * be called with the current `selectedId`\n */\n children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n const selectedId = tabContextValue?.tabStore.useState('selectedId')\n return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, TabAwareSlot, TabList, TabPanel, Tabs }\n"],"names":["TabsContext","React","createContext","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","useMemo","createElement","Provider","value","Tab","forwardRef","t0","ref","$","_c","id","disabled","exceptionallySetClassName","render","onClick","tabContextValue","useContext","t1","styles","t2","classNames","tab","className","t3","BaseTab","TabList","_ref","space","width","align","props","_objectWithoutProperties","_excluded","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","updateSelectedTabPositionCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","useEffect","updateSelectedTabPositionOnTabChange","observeTabListWidthChange","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","cleanupResizeObserver","disconnect","justifyContentAlignMap","start","end","center","Box","display","justifyContent","BaseTabList","_extends","store","position","track","selected","style","Inline","fullTabList","TabPanel","_ref2","renderMode","_excluded2","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
package/es/text/text.js CHANGED
@@ -1,25 +1,35 @@
1
- import { __rest, __assign } from 'tslib';
1
+ import _extends from '@babel/runtime/helpers/extends';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
2
3
  import * as React from 'react';
3
- import { Box } from '../box/box.js';
4
4
  import { polymorphicComponent } from '../utils/polymorphism.js';
5
5
  import { getClassNames } from '../utils/responsive-props.js';
6
6
  import modules_a9637dd3 from './text.module.css.js';
7
+ import { Box } from '../box/box.js';
7
8
 
8
- var Text = polymorphicComponent(function Text(_a, ref) {
9
- var as = _a.as, _b = _a.size, size = _b === void 0 ? 'body' : _b, _c = _a.weight, weight = _c === void 0 ? 'regular' : _c, _d = _a.tone, tone = _d === void 0 ? 'normal' : _d, align = _a.align, children = _a.children, lineClamp = _a.lineClamp, exceptionallySetClassName = _a.exceptionallySetClassName, props = __rest(_a, ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"]);
10
- var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
11
- return (React.createElement(Box, __assign({}, props, { as: as, className: [
12
- exceptionallySetClassName,
13
- modules_a9637dd3.text,
14
- size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null,
15
- weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null,
16
- tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null,
17
- lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null,
18
- lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null,
19
- ], textAlign: align,
20
- // Prevents emojis from being cut-off
21
- // See https://github.com/Doist/reactist/pull/528
22
- paddingRight: lineClamp ? 'xsmall' : undefined, ref: ref }), children));
9
+ const _excluded = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
10
+ const Text = polymorphicComponent(function Text(_ref, ref) {
11
+ let {
12
+ as,
13
+ size = 'body',
14
+ weight = 'regular',
15
+ tone = 'normal',
16
+ align,
17
+ children,
18
+ lineClamp,
19
+ exceptionallySetClassName
20
+ } = _ref,
21
+ props = _objectWithoutProperties(_ref, _excluded);
22
+ const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1;
23
+ return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
24
+ as: as,
25
+ className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],
26
+ textAlign: align
27
+ // Prevents emojis from being cut-off
28
+ // See https://github.com/Doist/reactist/pull/528
29
+ ,
30
+ paddingRight: lineClamp ? 'xsmall' : undefined,
31
+ ref: ref
32
+ }), children);
23
33
  });
24
34
 
25
35
  export { Text };
@@ -1 +1 @@
1
- {"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":[null],"names":["styles"],"mappings":";;;;;;;AAqDM,IAAA,IAAI,GAAG,oBAAoB,CAAmB,SAAS,IAAI,CAC7D,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA,EACF,EAAa,GAAA,EAAA,CAAA,IAAA,EAAb,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,GAAA,EAAA,EACb,cAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,EAAe,GAAA,EAAA,CAAA,IAAA,EAAf,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAA,EAAA,EACf,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EACtB,KAAK,GAAA,MAAA,CAAA,EAAA,EATZ,+FAUC,CADW,CAAA;AAIZ,IAAA,IAAM,sBAAsB,GACxB,OAAO,SAAS,KAAK,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,CAAC,IAAI,CAAC,CAAA;IAEhF,QACI,KAAC,CAAA,aAAA,CAAA,GAAG,EACI,QAAA,CAAA,EAAA,EAAA,KAAK,EACT,EAAA,EAAE,EAAE,EAAE,EACN,SAAS,EAAE;YACP,yBAAyB;AACzB,YAAAA,gBAAM,CAAC,IAAI;AACX,YAAA,IAAI,KAAK,MAAM,GAAG,aAAa,CAACA,gBAAM,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;AAC5D,YAAA,MAAM,KAAK,SAAS,GAAG,aAAa,CAACA,gBAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,IAAI;AACrE,YAAA,IAAI,KAAK,QAAQ,GAAG,aAAa,CAACA,gBAAM,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;YAC9D,sBAAsB,GAAGA,gBAAM,CAAC,sBAAsB,GAAG,IAAI;AAC7D,YAAA,SAAS,GAAG,aAAa,CAACA,gBAAM,EAAE,WAAW,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI;SAC9E,EACD,SAAS,EAAE,KAAK;;;AAGhB,QAAA,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,EAC9C,GAAG,EAAE,GAAG,KAEP,QAAQ,CACP,EACT;AACL,CAAC;;;;"}
1
+ {"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames } from '../utils/responsive-props'\n\nimport styles from './text.module.css'\n\nimport type { BoxProps } from '../box'\nimport type { Tone } from '../utils/common-types'\n\ntype TextProps = {\n children: React.ReactNode\n /**\n * The size of the text.\n *\n * The supported values, from smaller size to larger size, are:\n * 'caption', 'copy', 'body', and 'subtitle'\n *\n * @default 'body'\n */\n size?: 'caption' | 'copy' | 'body' | 'subtitle'\n /**\n * The weight of the text font.\n *\n * @default 'regular'\n */\n weight?: 'regular' | 'semibold' | 'bold'\n /**\n * The tone (semantic color) of the text.\n *\n * @default 'normal'\n */\n tone?: Tone\n /**\n * Used to truncate the text to a given number of lines.\n *\n * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n * truncated. If the text fits without it being truncated, no ellipsis is added.\n *\n * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n *\n * @default undefined\n */\n lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n /**\n * How to align the text horizontally.\n *\n * @default 'start'\n */\n align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n {\n as,\n size = 'body',\n weight = 'regular',\n tone = 'normal',\n align,\n children,\n lineClamp,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const lineClampMultipleLines =\n typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n return (\n <Box\n {...props}\n as={as}\n className={[\n exceptionallySetClassName,\n styles.text,\n size !== 'body' ? getClassNames(styles, 'size', size) : null,\n weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n ]}\n textAlign={align}\n // Prevents emojis from being cut-off\n // See https://github.com/Doist/reactist/pull/528\n paddingRight={lineClamp ? 'xsmall' : undefined}\n ref={ref}\n >\n {children}\n </Box>\n )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","polymorphicComponent","_ref","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","_objectWithoutProperties","_excluded","lineClampMultipleLines","Number","React","createElement","Box","_extends","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":";;;;;;;;;AAqDMA,MAAAA,IAAI,GAAGC,oBAAoB,CAAmB,SAASD,IAAIA,CAAAE,IAAA,EAY7DC,GAAG,EACL;EAAA,IAZE;MACIC,EAAE;AACFC,MAAAA,IAAI,GAAG,MAAM;AACbC,MAAAA,MAAM,GAAG,SAAS;AAClBC,MAAAA,IAAI,GAAG,QAAQ;MACfC,KAAK;MACLC,QAAQ;MACRC,SAAS;AACTC,MAAAA,yBAAAA;AAEJ,KAAC,GAAAT,IAAA;AADMU,IAAAA,KAAK,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA,CAAA;AAIZ,EAAA,MAAMC,sBAAsB,GACxB,OAAOL,SAAS,KAAK,QAAQ,GAAGM,MAAM,CAACN,SAAS,CAAC,GAAG,CAAC,GAAG,CAACA,SAAS,IAAI,CAAC,IAAI,CAAC,CAAA;EAEhF,oBACIO,KAAA,CAAAC,aAAA,CAACC,GAAG,EAAAC,QAAA,KACIR,KAAK,EAAA;AACTR,IAAAA,EAAE,EAAEA,EAAG;AACPiB,IAAAA,SAAS,EAAE,CACPV,yBAAyB,EACzBW,gBAAM,CAACC,IAAI,EACXlB,IAAI,KAAK,MAAM,GAAGmB,aAAa,CAACF,gBAAM,EAAE,MAAM,EAAEjB,IAAI,CAAC,GAAG,IAAI,EAC5DC,MAAM,KAAK,SAAS,GAAGkB,aAAa,CAACF,gBAAM,EAAE,QAAQ,EAAEhB,MAAM,CAAC,GAAG,IAAI,EACrEC,IAAI,KAAK,QAAQ,GAAGiB,aAAa,CAACF,gBAAM,EAAE,MAAM,EAAEf,IAAI,CAAC,GAAG,IAAI,EAC9DQ,sBAAsB,GAAGO,gBAAM,CAACP,sBAAsB,GAAG,IAAI,EAC7DL,SAAS,GAAGc,aAAa,CAACF,gBAAM,EAAE,WAAW,EAAEZ,SAAS,CAACe,QAAQ,EAAE,CAAC,GAAG,IAAI,CAC7E;AACFC,IAAAA,SAAS,EAAElB,KAAAA;AACX;AACA;AAAA;AACAmB,IAAAA,YAAY,EAAEjB,SAAS,GAAG,QAAQ,GAAGkB,SAAU;AAC/CzB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,CAAA,EAERM,QACA,CAAC,CAAA;AAEd,CAAC;;;;"}