@mirohq/design-system-tabs 1.2.43 → 1.2.44
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/main.js +6 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +7 -3
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +3 -3
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -226,15 +226,18 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
|
|
|
226
226
|
|
|
227
227
|
const Trigger = React.forwardRef(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {
|
|
228
228
|
const { variant, size, onValueChange } = React.useContext(TabsContext);
|
|
229
|
+
const isAriaDisabled = designSystemUtils.booleanify(restProps["aria-disabled"]);
|
|
229
230
|
const handleMouseDown = (e) => {
|
|
230
|
-
|
|
231
|
+
if (!isAriaDisabled) {
|
|
232
|
+
onMouseDown == null ? void 0 : onMouseDown(e);
|
|
233
|
+
}
|
|
231
234
|
if (restProps.disabled === true) {
|
|
232
235
|
return;
|
|
233
236
|
}
|
|
234
237
|
e.preventDefault();
|
|
235
238
|
};
|
|
236
239
|
const handleClick = (e) => {
|
|
237
|
-
if (restProps.disabled === true) {
|
|
240
|
+
if (restProps.disabled === true || isAriaDisabled) {
|
|
238
241
|
return;
|
|
239
242
|
}
|
|
240
243
|
onClick == null ? void 0 : onClick(e);
|
|
@@ -247,6 +250,7 @@ const Trigger = React.forwardRef(({ children, value, onClick, onMouseDown, ...re
|
|
|
247
250
|
size,
|
|
248
251
|
preventFocusOnPress: "auto",
|
|
249
252
|
role: "tab",
|
|
253
|
+
allowArrowsWhenAriaDisabled: true,
|
|
250
254
|
asChild: true,
|
|
251
255
|
ref: forwardRef,
|
|
252
256
|
variant,
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-interactive-secondary',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\n },\n },\n ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n\n '&[data-hovered]': {\n backgroundColor: '$background-interactive-surface-hover',\n color: '$text-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$tab-background-selected',\n color: '$text-on-interactive-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\n color: '$text-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus',\n borderRadius: '$button',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n borderBottom: '2px solid $border-interactive-secondary',\n\n '&[data-hovered]': {\n color: '$text-interactive-secondary-hover',\n borderBottom: '2px solid $border-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-interactive-selected',\n borderBottom: '2px solid $border-interactive-selected',\n },\n\n '&[data-pressed]': {\n color: '$text-interactive-secondary-pressed',\n borderBottom: '2px solid $border-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-on-disabled',\n borderBottom: '2px solid $border-disabled',\n },\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef, MouseEvent } from 'react'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n >\n <RadixTabs.Trigger\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n }\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","useControllableState"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-interactive-secondary',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\n },\n },\n ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n\n '&[data-hovered]': {\n backgroundColor: '$background-interactive-surface-hover',\n color: '$text-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$tab-background-selected',\n color: '$text-on-interactive-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\n color: '$text-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus',\n borderRadius: '$button',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n borderBottom: '2px solid $border-interactive-secondary',\n\n '&[data-hovered]': {\n color: '$text-interactive-secondary-hover',\n borderBottom: '2px solid $border-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-interactive-selected',\n borderBottom: '2px solid $border-interactive-selected',\n },\n\n '&[data-pressed]': {\n color: '$text-interactive-secondary-pressed',\n borderBottom: '2px solid $border-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-on-disabled',\n borderBottom: '2px solid $border-disabled',\n },\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef, MouseEvent } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = Omit<\n StyledTriggerProps,\n 'allowArrowsWhenAriaDisabled'\n> & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const isAriaDisabled = booleanify(restProps['aria-disabled'])\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n if (!isAriaDisabled) {\n onMouseDown?.(e)\n }\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true || isAriaDisabled) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n allowArrowsWhenAriaDisabled\n asChild\n ref={forwardRef}\n variant={variant}\n >\n <RadixTabs.Trigger\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n }\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","booleanify","useControllableState"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -4,7 +4,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { styled } from '@mirohq/design-system-stitches';
|
|
6
6
|
import { Primitive } from '@mirohq/design-system-primitive';
|
|
7
|
-
import { addPropsToChildren } from '@mirohq/design-system-utils';
|
|
7
|
+
import { addPropsToChildren, booleanify } from '@mirohq/design-system-utils';
|
|
8
8
|
import { isIconComponent } from '@mirohq/design-system-base-icon';
|
|
9
9
|
import { BaseButton, sizes } from '@mirohq/design-system-base-button';
|
|
10
10
|
import { focus } from '@mirohq/design-system-styles';
|
|
@@ -205,15 +205,18 @@ const TriggerStyled = styled(BaseButton, {
|
|
|
205
205
|
|
|
206
206
|
const Trigger = React.forwardRef(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {
|
|
207
207
|
const { variant, size, onValueChange } = React.useContext(TabsContext);
|
|
208
|
+
const isAriaDisabled = booleanify(restProps["aria-disabled"]);
|
|
208
209
|
const handleMouseDown = (e) => {
|
|
209
|
-
|
|
210
|
+
if (!isAriaDisabled) {
|
|
211
|
+
onMouseDown == null ? void 0 : onMouseDown(e);
|
|
212
|
+
}
|
|
210
213
|
if (restProps.disabled === true) {
|
|
211
214
|
return;
|
|
212
215
|
}
|
|
213
216
|
e.preventDefault();
|
|
214
217
|
};
|
|
215
218
|
const handleClick = (e) => {
|
|
216
|
-
if (restProps.disabled === true) {
|
|
219
|
+
if (restProps.disabled === true || isAriaDisabled) {
|
|
217
220
|
return;
|
|
218
221
|
}
|
|
219
222
|
onClick == null ? void 0 : onClick(e);
|
|
@@ -226,6 +229,7 @@ const Trigger = React.forwardRef(({ children, value, onClick, onMouseDown, ...re
|
|
|
226
229
|
size,
|
|
227
230
|
preventFocusOnPress: "auto",
|
|
228
231
|
role: "tab",
|
|
232
|
+
allowArrowsWhenAriaDisabled: true,
|
|
229
233
|
asChild: true,
|
|
230
234
|
ref: forwardRef,
|
|
231
235
|
variant,
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-interactive-secondary',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\n },\n },\n ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n\n '&[data-hovered]': {\n backgroundColor: '$background-interactive-surface-hover',\n color: '$text-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$tab-background-selected',\n color: '$text-on-interactive-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\n color: '$text-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus',\n borderRadius: '$button',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n borderBottom: '2px solid $border-interactive-secondary',\n\n '&[data-hovered]': {\n color: '$text-interactive-secondary-hover',\n borderBottom: '2px solid $border-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-interactive-selected',\n borderBottom: '2px solid $border-interactive-selected',\n },\n\n '&[data-pressed]': {\n color: '$text-interactive-secondary-pressed',\n borderBottom: '2px solid $border-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-on-disabled',\n borderBottom: '2px solid $border-disabled',\n },\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef, MouseEvent } from 'react'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n >\n <RadixTabs.Trigger\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n }\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-interactive-secondary',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\n },\n },\n ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n\n '&[data-hovered]': {\n backgroundColor: '$background-interactive-surface-hover',\n color: '$text-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$tab-background-selected',\n color: '$text-on-interactive-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\n color: '$text-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus',\n borderRadius: '$button',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n borderBottom: '2px solid $border-interactive-secondary',\n\n '&[data-hovered]': {\n color: '$text-interactive-secondary-hover',\n borderBottom: '2px solid $border-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-interactive-selected',\n borderBottom: '2px solid $border-interactive-selected',\n },\n\n '&[data-pressed]': {\n color: '$text-interactive-secondary-pressed',\n borderBottom: '2px solid $border-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-on-disabled',\n borderBottom: '2px solid $border-disabled',\n },\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef, MouseEvent } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = Omit<\n StyledTriggerProps,\n 'allowArrowsWhenAriaDisabled'\n> & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const isAriaDisabled = booleanify(restProps['aria-disabled'])\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n if (!isAriaDisabled) {\n onMouseDown?.(e)\n }\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true || isAriaDisabled) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n allowArrowsWhenAriaDisabled\n asChild\n ref={forwardRef}\n variant={variant}\n >\n <RadixTabs.Trigger\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n }\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -52,16 +52,16 @@ declare const List: React__default.ForwardRefExoticComponent<Omit<ListProps, "re
|
|
|
52
52
|
declare const StyledRoot: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<RadixTabs.TabsProps & React.RefAttributes<HTMLDivElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<RadixTabs.TabsProps & React.RefAttributes<HTMLDivElement>>, {}, {}>;
|
|
53
53
|
type StyledRootProps = StrictComponentProps<typeof StyledRoot>;
|
|
54
54
|
|
|
55
|
-
declare const TriggerStyled: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<Omit<_mirohq_design_system_base_button.
|
|
55
|
+
declare const TriggerStyled: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<Omit<_mirohq_design_system_base_button.BaseButtonInternalProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>>, "size" | "variant"> & TransformProps<{
|
|
56
56
|
variant?: "buttons" | "tabs" | undefined;
|
|
57
57
|
size?: "medium" | "large" | "x-large" | undefined;
|
|
58
|
-
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<Omit<_mirohq_design_system_base_button.
|
|
58
|
+
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<Omit<_mirohq_design_system_base_button.BaseButtonInternalProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
|
|
59
59
|
variant?: "buttons" | "tabs" | undefined;
|
|
60
60
|
size?: "medium" | "large" | "x-large" | undefined;
|
|
61
61
|
}, {}>;
|
|
62
62
|
type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>;
|
|
63
63
|
|
|
64
|
-
type TriggerProps = StyledTriggerProps & {
|
|
64
|
+
type TriggerProps = Omit<StyledTriggerProps, 'allowArrowsWhenAriaDisabled'> & {
|
|
65
65
|
/**
|
|
66
66
|
* A unique value that associates the trigger with a content.
|
|
67
67
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-tabs",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.44",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@radix-ui/react-tabs": "^1.0.0",
|
|
30
30
|
"@radix-ui/react-use-controllable-state": "1.1.1",
|
|
31
|
-
"@mirohq/design-system-base-button": "^1.2.
|
|
32
|
-
"@mirohq/design-system-primitive": "^2.2.1",
|
|
31
|
+
"@mirohq/design-system-base-button": "^1.2.41",
|
|
33
32
|
"@mirohq/design-system-base-icon": "^1.3.0",
|
|
34
33
|
"@mirohq/design-system-styles": "^3.2.35",
|
|
35
|
-
"@mirohq/design-system-
|
|
36
|
-
"@mirohq/design-system-utils": "^1.5.0"
|
|
34
|
+
"@mirohq/design-system-primitive": "^2.2.1",
|
|
35
|
+
"@mirohq/design-system-utils": "^1.5.0",
|
|
36
|
+
"@mirohq/design-system-stitches": "^3.3.35"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "rollup -c ../../../rollup.config.js",
|