@doist/reactist 17.8.1 → 17.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/reactist.cjs.development.js +27 -23
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/new-components/box/box.js +4 -2
- package/es/new-components/box/box.js.map +1 -1
- package/es/new-components/box/gap.module.css.js +4 -0
- package/es/new-components/box/gap.module.css.js.map +1 -0
- package/es/new-components/columns/columns.js +4 -3
- package/es/new-components/columns/columns.js.map +1 -1
- package/es/new-components/columns/columns.module.css.js +1 -1
- package/es/new-components/inline/inline.js +3 -3
- package/es/new-components/inline/inline.js.map +1 -1
- package/es/new-components/stack/stack.js +12 -12
- package/es/new-components/stack/stack.js.map +1 -1
- package/es/new-components/tabs/tabs.js +3 -1
- package/es/new-components/tabs/tabs.js.map +1 -1
- package/es/new-components/tabs/tabs.module.css.js +1 -1
- package/lib/new-components/box/box.d.ts +1 -0
- package/lib/new-components/box/box.js +1 -1
- package/lib/new-components/box/box.js.map +1 -1
- package/lib/new-components/box/gap.module.css.js +2 -0
- package/lib/new-components/box/gap.module.css.js.map +1 -0
- package/lib/new-components/columns/columns.js +1 -1
- package/lib/new-components/columns/columns.js.map +1 -1
- package/lib/new-components/columns/columns.module.css.js +1 -1
- package/lib/new-components/inline/inline.js +1 -1
- package/lib/new-components/inline/inline.js.map +1 -1
- package/lib/new-components/stack/stack.js +1 -1
- package/lib/new-components/stack/stack.js.map +1 -1
- package/lib/new-components/tabs/tabs.d.ts +6 -6
- package/lib/new-components/tabs/tabs.js +1 -1
- package/lib/new-components/tabs/tabs.js.map +1 -1
- package/lib/new-components/tabs/tabs.module.css.js +1 -1
- package/package.json +1 -1
- package/styles/alert.css +2 -1
- package/styles/avatar.css +2 -1
- package/styles/badge.css +1 -0
- package/styles/base-button.css +1 -0
- package/styles/base-field.css +1 -1
- package/styles/box.css +2 -1
- package/styles/checkbox-field.css +1 -0
- package/styles/columns.css +2 -1
- package/styles/columns.module.css.css +1 -1
- package/styles/divider.css +1 -0
- package/styles/gap.module.css.css +1 -0
- package/styles/heading.css +1 -0
- package/styles/hidden-visually.css +1 -0
- package/styles/hidden.css +1 -0
- package/styles/loading.css +1 -0
- package/styles/modal.css +2 -2
- package/styles/notice.css +2 -1
- package/styles/password-field.css +1 -1
- package/styles/progress-bar.css +1 -0
- package/styles/reactist.css +3 -4
- package/styles/select-field.css +1 -1
- package/styles/static-toast.css +1 -1
- package/styles/switch-field.css +1 -1
- package/styles/tabs.css +3 -3
- package/styles/tabs.module.css.css +1 -1
- package/styles/text-area.css +1 -1
- package/styles/text-field.css +1 -1
- package/styles/text-link.css +1 -0
- package/styles/text.css +1 -0
- package/styles/use-toasts.css +1 -1
- package/es/new-components/inline/inline.module.css.js +0 -4
- package/es/new-components/inline/inline.module.css.js.map +0 -1
- package/es/new-components/stack/stack.module.css.js +0 -4
- package/es/new-components/stack/stack.module.css.js.map +0 -1
- package/lib/new-components/inline/inline.module.css.js +0 -2
- package/lib/new-components/inline/inline.module.css.js.map +0 -1
- package/lib/new-components/stack/stack.module.css.js +0 -2
- package/lib/new-components/stack/stack.module.css.js.map +0 -1
- package/styles/inline.css +0 -5
- package/styles/inline.module.css.css +0 -1
- package/styles/stack.css +0 -6
- package/styles/stack.module.css.css +0 -1
|
@@ -204,7 +204,9 @@ var modules_131405ac = {"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da
|
|
|
204
204
|
|
|
205
205
|
var modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","minWidth-small":"dd50fabd","minWidth-medium":"e7e2c808","minWidth-large":"_6abbe25e","minWidth-xlarge":"_54f479ac","maxWidth-xsmall":"_148492bc","maxWidth-small":"bd023b96","maxWidth-medium":"e102903f","maxWidth-large":"_0e8d76d7","maxWidth-xlarge":"_47a031d0","maxWidth-full":"cd4c8183","width-0":"_5f5959e8","width-full":"_8c75067a","width-auto":"_56a651f6","width-maxContent":"_26f87bb8","width-minContent":"_07a6ab44","width-fitContent":"a87016fa","width-xsmall":"_1a972e50","width-small":"c96d8261","width-medium":"f3829d42","width-large":"_2caef228","width-xlarge":"_069e1491"};
|
|
206
206
|
|
|
207
|
-
|
|
207
|
+
var modules_8b5c09cb = {"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
|
|
208
|
+
|
|
209
|
+
const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "gap", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
|
|
208
210
|
const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
|
|
209
211
|
var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
|
|
210
212
|
|
|
@@ -216,6 +218,7 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
|
|
|
216
218
|
flexWrap,
|
|
217
219
|
flexGrow,
|
|
218
220
|
flexShrink,
|
|
221
|
+
gap,
|
|
219
222
|
alignItems,
|
|
220
223
|
justifyContent,
|
|
221
224
|
alignSelf,
|
|
@@ -260,13 +263,13 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
|
|
|
260
263
|
className: classNames(className, modules_54d944f2.box, display ? getClassNames(modules_54d944f2, 'display', display) : null, position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_89b7671c, 'minWidth', String(minWidth)) : null, getClassNames(modules_89b7671c, 'maxWidth', maxWidth), getClassNames(modules_54d944f2, 'textAlign', textAlign), // padding
|
|
261
264
|
getClassNames(modules_b537a8ee, 'paddingTop', resolvedPaddingTop), getClassNames(modules_b537a8ee, 'paddingRight', resolvedPaddingRight), getClassNames(modules_b537a8ee, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_b537a8ee, 'paddingLeft', resolvedPaddingLeft), // margin
|
|
262
265
|
getClassNames(modules_131405ac, 'marginTop', resolvedMarginTop), getClassNames(modules_131405ac, 'marginRight', resolvedMarginRight), getClassNames(modules_131405ac, 'marginBottom', resolvedMarginBottom), getClassNames(modules_131405ac, 'marginLeft', resolvedMarginLeft), // flex props
|
|
263
|
-
omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, // other props
|
|
266
|
+
omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(modules_8b5c09cb, 'gap', gap) : null, // other props
|
|
264
267
|
getClassNames(modules_54d944f2, 'overflow', overflow), width != null ? getClassNames(modules_89b7671c, 'width', String(width)) : null, getClassNames(modules_54d944f2, 'height', height), getClassNames(modules_54d944f2, 'bg', background), borderRadius !== 'none' ? getClassNames(modules_54d944f2, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(modules_54d944f2, 'border', border) : null) || undefined,
|
|
265
268
|
ref
|
|
266
269
|
}), children);
|
|
267
270
|
});
|
|
268
271
|
|
|
269
|
-
var modules_67f2d07a = {"
|
|
272
|
+
var modules_67f2d07a = {"container":"eae3d34f","container-xsmall":"_9b4012c9","container-small":"e35e0320","container-medium":"_0703e67f","container-large":"_1cf15621","container-xlarge":"_1c7dff67","container-xxlarge":"_25bee9b6","columnWidth-content":"_4bb9987d","columnWidth-auto":"_9dd31975","columnWidth-1-2":"_38d11c0e","columnWidth-1-3":"_7ac225c6","columnWidth-2-3":"_9c340680","columnWidth-1-4":"_81cb99d2","columnWidth-3-4":"_10fd355f","columnWidth-1-5":"_3ee66520","columnWidth-2-5":"df1201a5","columnWidth-3-5":"f772e0b2","columnWidth-4-5":"_880cbbb1"};
|
|
270
273
|
|
|
271
274
|
const _excluded$1 = ["width", "children", "exceptionallySetClassName"],
|
|
272
275
|
_excluded2 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
|
|
@@ -279,11 +282,11 @@ const Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
|
|
|
279
282
|
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
280
283
|
|
|
281
284
|
return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
282
|
-
className: [exceptionallySetClassName,
|
|
285
|
+
className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-'))],
|
|
283
286
|
minWidth: 0,
|
|
284
|
-
width: width !== 'content' ? 'full' : undefined,
|
|
285
287
|
height: "full",
|
|
286
288
|
flexShrink: width === 'content' ? 0 : undefined,
|
|
289
|
+
flexGrow: width === 'auto' ? 1 : 0,
|
|
287
290
|
ref: ref
|
|
288
291
|
}), children);
|
|
289
292
|
});
|
|
@@ -299,8 +302,9 @@ const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
|
|
|
299
302
|
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
300
303
|
|
|
301
304
|
return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
302
|
-
className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, '
|
|
305
|
+
className: [exceptionallySetClassName, modules_67f2d07a.container, getClassNames(modules_67f2d07a, 'container', space)],
|
|
303
306
|
display: "flex",
|
|
307
|
+
gap: space,
|
|
304
308
|
flexDirection: collapseBelow === 'desktop' ? {
|
|
305
309
|
mobile: 'column',
|
|
306
310
|
tablet: 'column',
|
|
@@ -331,8 +335,6 @@ function Divider(_ref) {
|
|
|
331
335
|
}, props));
|
|
332
336
|
}
|
|
333
337
|
|
|
334
|
-
var modules_da5d5c21 = {"space-xsmall":"_6b1279e0","space-small":"_0d82c42d","space-medium":"_556714e1","space-large":"e90b43fb","space-xlarge":"a9c34345","space-xxlarge":"aa102efe","tablet-space-xsmall":"_34d16157","tablet-space-small":"c7e0e54f","tablet-space-medium":"_7f2a4e4b","tablet-space-large":"ae256487","tablet-space-xlarge":"e88be0f7","tablet-space-xxlarge":"dc7bcb18","desktop-space-xsmall":"_853f3012","desktop-space-small":"_3bfaf758","desktop-space-medium":"_36462a93","desktop-space-large":"e73081b7","desktop-space-xlarge":"e22ec9dd","desktop-space-xxlarge":"_4a20bd12"};
|
|
335
|
-
|
|
336
338
|
const _excluded$3 = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
|
|
337
339
|
const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
|
|
338
340
|
let {
|
|
@@ -349,36 +351,36 @@ const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
|
|
|
349
351
|
as: as,
|
|
350
352
|
display: "flex",
|
|
351
353
|
flexWrap: "wrap",
|
|
352
|
-
|
|
354
|
+
gap: space,
|
|
355
|
+
className: exceptionallySetClassName,
|
|
353
356
|
ref: ref,
|
|
354
357
|
alignItems: mapResponsiveProp(alignY, alignY => alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center'),
|
|
355
358
|
justifyContent: mapResponsiveProp(align, align => align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center')
|
|
356
359
|
}), children);
|
|
357
360
|
});
|
|
358
361
|
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
const _excluded$4 = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
|
|
362
|
+
const _excluded$4 = ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"];
|
|
362
363
|
const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
|
|
363
364
|
let {
|
|
364
365
|
as,
|
|
365
366
|
space,
|
|
366
|
-
align
|
|
367
|
+
align,
|
|
367
368
|
dividers = 'none',
|
|
369
|
+
width = 'full',
|
|
368
370
|
children,
|
|
369
371
|
exceptionallySetClassName
|
|
370
372
|
} = _ref,
|
|
371
373
|
props = _objectWithoutProperties(_ref, _excluded$4);
|
|
372
374
|
|
|
373
|
-
const
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
375
|
+
const alignItems = align === undefined ? undefined : mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center');
|
|
376
|
+
return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
377
|
+
display: "flex",
|
|
378
|
+
flexDirection: "column",
|
|
379
|
+
width: width,
|
|
380
|
+
alignItems: alignItems,
|
|
381
|
+
gap: space,
|
|
380
382
|
as: as,
|
|
381
|
-
className:
|
|
383
|
+
className: exceptionallySetClassName,
|
|
382
384
|
ref: ref
|
|
383
385
|
}), dividers !== 'none' ? React.Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
|
|
384
386
|
weight: dividers
|
|
@@ -2372,7 +2374,7 @@ function usePrevious(value) {
|
|
|
2372
2374
|
return ref.current;
|
|
2373
2375
|
}
|
|
2374
2376
|
|
|
2375
|
-
var modules_40c67f5b = {"tab":"
|
|
2377
|
+
var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
|
|
2376
2378
|
|
|
2377
2379
|
const _excluded$r = ["as", "children", "id", "exceptionallySetClassName"],
|
|
2378
2380
|
_excluded2$2 = ["children", "space"],
|
|
@@ -2417,6 +2419,7 @@ function Tabs({
|
|
|
2417
2419
|
* Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
|
|
2418
2420
|
*/
|
|
2419
2421
|
|
|
2422
|
+
|
|
2420
2423
|
const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
|
|
2421
2424
|
let {
|
|
2422
2425
|
as,
|
|
@@ -2475,7 +2478,7 @@ function TabList(_ref2) {
|
|
|
2475
2478
|
position: "relative",
|
|
2476
2479
|
width: "maxContent"
|
|
2477
2480
|
}, props), /*#__PURE__*/React.createElement(Box, {
|
|
2478
|
-
className:
|
|
2481
|
+
className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
|
|
2479
2482
|
}), /*#__PURE__*/React.createElement(Inline, {
|
|
2480
2483
|
space: space
|
|
2481
2484
|
}, children)))
|
|
@@ -2485,6 +2488,7 @@ function TabList(_ref2) {
|
|
|
2485
2488
|
* Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
|
|
2486
2489
|
*/
|
|
2487
2490
|
|
|
2491
|
+
|
|
2488
2492
|
const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
|
|
2489
2493
|
let {
|
|
2490
2494
|
children,
|