reshaped 3.7.0-canary.1 → 3.7.0-canary.10
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/CHANGELOG.md +15 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +11 -11
- package/dist/cjs/themes/_generator/definitions/figma.js +8 -0
- package/dist/cjs/themes/_generator/definitions/reshaped.js +8 -0
- package/dist/cjs/themes/_generator/definitions/slate.js +0 -1
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.d.ts +1 -1
- package/dist/cjs/themes/_generator/tokens/transforms.d.ts +1 -0
- package/dist/cjs/themes/_generator/tokens/transforms.js +2 -0
- package/dist/cjs/themes/_generator/tokens/types.d.ts +3 -1
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.d.ts +4 -0
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.js +11 -0
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.d.ts +4 -0
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.js +2 -0
- package/dist/cjs/themes/figma/theme.css +1 -1
- package/dist/cjs/themes/reshaped/theme.css +1 -1
- package/dist/cjs/themes/slate/theme.css +1 -1
- package/dist/cjs/utilities/string.js +5 -1
- package/dist/components/Actionable/Actionable.module.css +1 -1
- package/dist/components/Autocomplete/Autocomplete.js +7 -3
- package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -0
- package/dist/components/Carousel/Carousel.module.css +1 -1
- package/dist/components/Flyout/Flyout.constants.js +2 -2
- package/dist/components/Flyout/Flyout.module.css +1 -1
- package/dist/components/Flyout/Flyout.types.d.ts +2 -1
- package/dist/components/Flyout/FlyoutContent.js +2 -2
- package/dist/components/Flyout/FlyoutControlled.js +7 -4
- package/dist/components/Modal/Modal.module.css +1 -1
- package/dist/components/Modal/tests/Modal.stories.js +8 -0
- package/dist/components/Overlay/Overlay.js +1 -2
- package/dist/components/Overlay/Overlay.module.css +1 -1
- package/dist/components/Popover/Popover.types.d.ts +1 -1
- package/dist/components/Popover/tests/Popover.stories.d.ts +7 -2
- package/dist/components/Popover/tests/Popover.stories.js +55 -17
- package/dist/components/Reshaped/Reshaped.css +1 -1
- package/dist/components/Resizable/Resizable.module.css +1 -1
- package/dist/components/Table/Table.module.css +1 -1
- package/dist/components/Tabs/Tabs.module.css +1 -1
- package/dist/components/Tabs/Tabs.types.d.ts +1 -0
- package/dist/components/Tabs/TabsItem.js +2 -2
- package/dist/components/Tabs/TabsList.js +1 -1
- package/dist/components/Tabs/tests/Tabs.stories.d.ts +47 -10
- package/dist/components/Tabs/tests/Tabs.stories.js +481 -303
- package/dist/components/Text/Text.js +2 -2
- package/dist/components/Text/Text.module.css +1 -1
- package/dist/components/Text/Text.types.d.ts +1 -0
- package/dist/components/Text/tests/Text.stories.d.ts +7 -0
- package/dist/components/Text/tests/Text.stories.js +41 -0
- package/dist/components/TextArea/TextArea.module.css +1 -1
- package/dist/components/TextField/TextField.js +1 -1
- package/dist/components/Toast/Toast.module.css +1 -1
- package/dist/components/Tooltip/Tooltip.js +2 -2
- package/dist/components/Tooltip/Tooltip.types.d.ts +1 -0
- package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +1 -0
- package/dist/components/Tooltip/tests/Tooltip.stories.js +8 -0
- package/dist/components/View/View.js +2 -2
- package/dist/components/View/tests/View.stories.d.ts +4 -0
- package/dist/components/View/tests/View.stories.js +24 -1
- package/dist/hooks/_private/useIsDismissible.d.ts +0 -1
- package/dist/hooks/_private/useIsDismissible.js +12 -8
- package/dist/themes/_generator/definitions/figma.js +8 -0
- package/dist/themes/_generator/definitions/reshaped.js +8 -0
- package/dist/themes/_generator/definitions/slate.js +0 -1
- package/dist/themes/_generator/tokens/fontFamily/fontFamily.types.d.ts +1 -1
- package/dist/themes/_generator/tokens/transforms.d.ts +1 -0
- package/dist/themes/_generator/tokens/transforms.js +2 -0
- package/dist/themes/_generator/tokens/types.d.ts +3 -1
- package/dist/themes/_generator/tokens/zIndex/zIndex.transforms.d.ts +4 -0
- package/dist/themes/_generator/tokens/zIndex/zIndex.transforms.js +9 -0
- package/dist/themes/_generator/tokens/zIndex/zIndex.types.d.ts +4 -0
- package/dist/themes/_generator/tokens/zIndex/zIndex.types.js +1 -0
- package/dist/themes/figma/theme.css +1 -1
- package/dist/themes/reshaped/theme.css +1 -1
- package/dist/themes/slate/theme.css +1 -1
- package/dist/utilities/a11y/TrapFocus.js +5 -1
- package/dist/utilities/string.js +5 -1
- package/package.json +1 -1
- package/dist/components/Tabs/tests/Tabs.test.stories.d.ts +0 -27
- package/dist/components/Tabs/tests/Tabs.test.stories.js +0 -128
- package/dist/components/Text/tests/Text.test.stories.d.ts +0 -21
- package/dist/components/Text/tests/Text.test.stories.js +0 -49
|
@@ -26,7 +26,10 @@ const Demo = (props) => {
|
|
|
26
26
|
<Popover.Content>
|
|
27
27
|
<View gap={2} align="start">
|
|
28
28
|
Popover content
|
|
29
|
-
<
|
|
29
|
+
<View direction="row" gap={2}>
|
|
30
|
+
<Button onClick={() => { }}>Action 1</Button>
|
|
31
|
+
<Button onClick={() => { }}>Action 2</Button>
|
|
32
|
+
</View>
|
|
30
33
|
</View>
|
|
31
34
|
</Popover.Content>
|
|
32
35
|
</Popover>);
|
|
@@ -203,6 +206,22 @@ export const dismissible = {
|
|
|
203
206
|
await userEvent.click(trigger);
|
|
204
207
|
},
|
|
205
208
|
};
|
|
209
|
+
export const autoFocus = {
|
|
210
|
+
name: "autoFocus",
|
|
211
|
+
render: () => (<Example>
|
|
212
|
+
<Example.Item title="autoFocus=false">
|
|
213
|
+
<Demo autoFocus={false}/>
|
|
214
|
+
</Example.Item>
|
|
215
|
+
</Example>),
|
|
216
|
+
play: async ({ canvasElement }) => {
|
|
217
|
+
const canvas = within(canvasElement.ownerDocument.body);
|
|
218
|
+
const trigger = canvas.getAllByRole("button")[0];
|
|
219
|
+
await userEvent.click(trigger);
|
|
220
|
+
await waitFor(() => {
|
|
221
|
+
expect(document.activeElement).toHaveRole("dialog");
|
|
222
|
+
});
|
|
223
|
+
},
|
|
224
|
+
};
|
|
206
225
|
export const className = {
|
|
207
226
|
name: "className, attributes",
|
|
208
227
|
render: () => (<div data-testid="root">
|
|
@@ -221,6 +240,25 @@ export const className = {
|
|
|
221
240
|
expect(menu).toHaveClass("test-classname");
|
|
222
241
|
},
|
|
223
242
|
};
|
|
243
|
+
export const testNested = {
|
|
244
|
+
name: "test: nested",
|
|
245
|
+
render: () => (<Popover position="bottom">
|
|
246
|
+
<Popover.Trigger>
|
|
247
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
248
|
+
</Popover.Trigger>
|
|
249
|
+
<Popover.Content>
|
|
250
|
+
<View gap={2} align="start">
|
|
251
|
+
Popover content
|
|
252
|
+
<Popover>
|
|
253
|
+
<Popover.Trigger>
|
|
254
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
255
|
+
</Popover.Trigger>
|
|
256
|
+
<Popover.Content>Hello</Popover.Content>
|
|
257
|
+
</Popover>
|
|
258
|
+
</View>
|
|
259
|
+
</Popover.Content>
|
|
260
|
+
</Popover>),
|
|
261
|
+
};
|
|
224
262
|
export const testWithTooltip = {
|
|
225
263
|
name: "test: with tooltip",
|
|
226
264
|
render: () => (<View paddingTop={10}>
|
|
@@ -244,22 +282,7 @@ export const testWithTooltip = {
|
|
|
244
282
|
</Tooltip>
|
|
245
283
|
</View>),
|
|
246
284
|
};
|
|
247
|
-
export const
|
|
248
|
-
name: "variant [deprecated]",
|
|
249
|
-
render: () => (<Example>
|
|
250
|
-
<Example.Item title="variant: headless">
|
|
251
|
-
<Popover variant="headless" defaultActive position="bottom-start">
|
|
252
|
-
<Popover.Trigger>
|
|
253
|
-
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
254
|
-
</Popover.Trigger>
|
|
255
|
-
<Popover.Content>
|
|
256
|
-
<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
|
|
257
|
-
</Popover.Content>
|
|
258
|
-
</Popover>
|
|
259
|
-
</Example.Item>
|
|
260
|
-
</Example>),
|
|
261
|
-
};
|
|
262
|
-
export const teslContentEditable = {
|
|
285
|
+
export const testContentEditable = {
|
|
263
286
|
name: "test: contenteditable",
|
|
264
287
|
render: () => {
|
|
265
288
|
const [active, setActive] = useState(false);
|
|
@@ -299,3 +322,18 @@ export const teslContentEditable = {
|
|
|
299
322
|
</Popover>);
|
|
300
323
|
},
|
|
301
324
|
};
|
|
325
|
+
export const variant = {
|
|
326
|
+
name: "variant [deprecated]",
|
|
327
|
+
render: () => (<Example>
|
|
328
|
+
<Example.Item title="variant: headless">
|
|
329
|
+
<Popover variant="headless" defaultActive position="bottom-start">
|
|
330
|
+
<Popover.Trigger>
|
|
331
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
332
|
+
</Popover.Trigger>
|
|
333
|
+
<Popover.Content>
|
|
334
|
+
<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
|
|
335
|
+
</Popover.Content>
|
|
336
|
+
</Popover>
|
|
337
|
+
</Example.Item>
|
|
338
|
+
</Example>),
|
|
339
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@layer rs.reset{[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{isolation:isolate}.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative;z-index:var(--rs-z-index-
|
|
1
|
+
.root{isolation:isolate}.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative;z-index:var(--rs-z-index-relative)}.handle:after,.handle:before{border-radius:999px;content:"";position:absolute}.handle:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}.--variant-bordered .handle:after{background:var(--rs-color-border-neutral-faded)}.--variant-bordered .handle--dragging:after,.--variant-bordered .handle:hover:after,.--variant-borderless .handle:after,[data-rs-keyboard] .--variant-bordered .handle:focus:after{background:var(--rs-color-border-neutral)}.--variant-borderless .handle:after{opacity:0}.--variant-borderless .handle--dragging:after,.--variant-borderless .handle:hover:after,[data-rs-keyboard] .--variant-borderless .handle:focus:after{opacity:.6}body:has(.handle--dragging) .--variant-borderless .handle:not(.handle--dragging){opacity:0}body:has(.handle--dragging) .--variant-bordered .handle:not(.handle--dragging):after{background:var(--rs-color-border-neutral-faded)}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x6)}.--variant-borderless.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--variant-bordered.--direction-row>.handle:after{width:1px}.--direction-row>.item[data-rs-resizable-item-mounted]{max-width:var(--rs-resizable-max-size);min-width:var(--rs-resizable-min-size)}.--direction-column>.handle{cursor:ns-resize}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x6)}.--variant-borderless.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--variant-bordered.--direction-column>.handle:after{height:1px}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --rs-table-fade-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-table-fade-end{syntax:"<length>";initial-value:0;inherits:false}.root{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-table-fade-start),#000 calc(100% - var(--rs-table-fade-end)),transparent 100%);overflow:auto;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-table-fade-start,--rs-table-fade-end}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-focus-inset-shadow);outline:none;z-index:var(--rs-z-index-
|
|
1
|
+
@property --rs-table-fade-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-table-fade-end{syntax:"<length>";initial-value:0;inherits:false}.root{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-table-fade-start),#000 calc(100% - var(--rs-table-fade-end)),transparent 100%);overflow:auto;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-table-fade-start,--rs-table-fade-end}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-focus-inset-shadow);outline:none;z-index:var(--rs-z-index-relative)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),24%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}.--fade-start,[dir=rtl] .--fade-end{--rs-table-fade-start:var(--rs-unit-x4)}.--fade-end,[dir=rtl] .--fade-start{--rs-table-fade-end:var(--rs-unit-x4)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner
|
|
1
|
+
@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;border-radius:var(--rs-radius-medium)}@media (hover:hover) and (pointer:fine){.button:not(.button--disabled):hover{color:var(--rs-color-foreground-neutral-faded)}}.button.button--disabled{color:var(--rs-color-foreground-disabled)}.buttonContent{align-items:center;border-radius:var(--rs-radius-medium);box-sizing:border-box;display:flex;width:100%}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
|
|
@@ -11,7 +11,7 @@ import { findParent } from "../../utilities/dom/index.js";
|
|
|
11
11
|
import { useTabs } from "./TabsContext.js";
|
|
12
12
|
import s from "./Tabs.module.css";
|
|
13
13
|
const TabsItem = React.forwardRef((props, ref) => {
|
|
14
|
-
const { value, children, icon, href, attributes } = props;
|
|
14
|
+
const { value, children, icon, href, disabled, attributes } = props;
|
|
15
15
|
const { onChange, panelId, name, size, value: tabsValue, selection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs(value);
|
|
16
16
|
const itemRef = React.useRef(null);
|
|
17
17
|
const active = tabsValue === value;
|
|
@@ -60,7 +60,7 @@ const TabsItem = React.forwardRef((props, ref) => {
|
|
|
60
60
|
return;
|
|
61
61
|
updateRefs();
|
|
62
62
|
}, [active, updateRefs]);
|
|
63
|
-
return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
|
|
63
|
+
return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: [s.button, disabled && s["button--disabled"]], as: name ? "label" : undefined, attributes: {
|
|
64
64
|
...(!isFormControl && tabAttributes),
|
|
65
65
|
"aria-controls": panelId,
|
|
66
66
|
}, children: [name && (_jsx(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })), _jsxs("span", { className: s.buttonContent, children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: 4 }), children && (_jsx(Text, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", children: children }))] })] }) }));
|
|
@@ -26,7 +26,7 @@ const TabsList = (props) => {
|
|
|
26
26
|
const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
|
|
27
27
|
const [rtl] = useRTL();
|
|
28
28
|
const fadeSide = useFadeSide(elScrollableRef);
|
|
29
|
-
const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
|
|
29
|
+
const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], fadeSide && s["--scrollable"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
|
|
30
30
|
const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
|
|
31
31
|
const handleNextClick = () => {
|
|
32
32
|
elScrollableRef.current.scrollBy({
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { StoryObj } from "@storybook/react-vite";
|
|
3
|
+
import { fn } from "storybook/test";
|
|
2
4
|
declare const _default: {
|
|
3
5
|
title: string;
|
|
4
6
|
component: React.FC<import("./..").TabsProps> & {
|
|
@@ -13,13 +15,48 @@ declare const _default: {
|
|
|
13
15
|
};
|
|
14
16
|
};
|
|
15
17
|
export default _default;
|
|
16
|
-
export declare const
|
|
17
|
-
export declare const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
export declare const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
export declare const
|
|
18
|
+
export declare const base: StoryObj;
|
|
19
|
+
export declare const variant: {
|
|
20
|
+
name: string;
|
|
21
|
+
render: () => React.JSX.Element;
|
|
22
|
+
};
|
|
23
|
+
export declare const size: {
|
|
24
|
+
name: string;
|
|
25
|
+
render: () => React.JSX.Element;
|
|
26
|
+
};
|
|
27
|
+
export declare const direction: {
|
|
28
|
+
name: string;
|
|
29
|
+
render: () => React.JSX.Element;
|
|
30
|
+
};
|
|
31
|
+
export declare const icon: {
|
|
32
|
+
name: string;
|
|
33
|
+
render: () => React.JSX.Element;
|
|
34
|
+
};
|
|
35
|
+
export declare const equalWidth: {
|
|
36
|
+
name: string;
|
|
37
|
+
render: () => React.JSX.Element;
|
|
38
|
+
};
|
|
39
|
+
export declare const href: {
|
|
40
|
+
name: string;
|
|
41
|
+
render: () => React.JSX.Element;
|
|
42
|
+
};
|
|
43
|
+
export declare const disabled: StoryObj;
|
|
44
|
+
export declare const defaultValue: StoryObj<{
|
|
45
|
+
handleChange: ReturnType<typeof fn>;
|
|
46
|
+
}>;
|
|
47
|
+
export declare const value: StoryObj<{
|
|
48
|
+
handleChange: ReturnType<typeof fn>;
|
|
49
|
+
}>;
|
|
50
|
+
export declare const className: StoryObj;
|
|
51
|
+
export declare const testFocusableContent: {
|
|
52
|
+
name: string;
|
|
53
|
+
render: () => React.JSX.Element;
|
|
54
|
+
};
|
|
55
|
+
export declare const testComposition: {
|
|
56
|
+
name: string;
|
|
57
|
+
render: () => React.JSX.Element;
|
|
58
|
+
};
|
|
59
|
+
export declare const testEdgeCaseDom: {
|
|
60
|
+
name: string;
|
|
61
|
+
render: () => React.JSX.Element;
|
|
62
|
+
};
|