@redsift/design-system 12.6.6 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CONTRIBUTING.md +20 -8
  2. package/_internal/AppContainer.js +1 -1
  3. package/_internal/AppContainer.js.map +1 -1
  4. package/_internal/Button2.js +1 -1
  5. package/_internal/Button2.js.map +1 -1
  6. package/_internal/Checkbox2.js +8 -3
  7. package/_internal/Checkbox2.js.map +1 -1
  8. package/_internal/DetailedCard.js +17 -1352
  9. package/_internal/DetailedCard.js.map +1 -1
  10. package/_internal/DetailedCardCollapsibleSectionItems.js +14 -4
  11. package/_internal/DetailedCardCollapsibleSectionItems.js.map +1 -1
  12. package/_internal/DetailedCardSection.js +4 -2
  13. package/_internal/DetailedCardSection.js.map +1 -1
  14. package/_internal/IconButton.js +1 -1
  15. package/_internal/IconButton.js.map +1 -1
  16. package/_internal/Item2.js +2 -2
  17. package/_internal/Item2.js.map +1 -1
  18. package/_internal/LinkButton.js +1 -1
  19. package/_internal/LinkButton.js.map +1 -1
  20. package/_internal/Listbox2.js +5 -5
  21. package/_internal/Listbox2.js.map +1 -1
  22. package/_internal/NumberField.js +2 -0
  23. package/_internal/NumberField.js.map +1 -1
  24. package/_internal/Radio2.js +14 -7
  25. package/_internal/Radio2.js.map +1 -1
  26. package/_internal/RadioGroup.js +6 -1
  27. package/_internal/RadioGroup.js.map +1 -1
  28. package/_internal/SideNavigationMenu.js +9 -4
  29. package/_internal/SideNavigationMenu.js.map +1 -1
  30. package/_internal/SideNavigationMenuItem.js +2 -2
  31. package/_internal/SideNavigationMenuItem.js.map +1 -1
  32. package/_internal/Switch2.js +8 -3
  33. package/_internal/Switch2.js.map +1 -1
  34. package/_internal/Tabs2.js.map +1 -1
  35. package/_internal/TextArea.js +5 -1
  36. package/_internal/TextArea.js.map +1 -1
  37. package/_internal/TextField.js +5 -1
  38. package/_internal/TextField.js.map +1 -1
  39. package/_internal/context.js.map +1 -1
  40. package/_internal/filterComponents.js +3 -0
  41. package/_internal/filterComponents.js.map +1 -1
  42. package/_internal/getElementRef.js +25 -0
  43. package/_internal/getElementRef.js.map +1 -0
  44. package/_internal/getTextWidth.js +32 -0
  45. package/_internal/getTextWidth.js.map +1 -0
  46. package/_internal/isComponent.js +3 -0
  47. package/_internal/isComponent.js.map +1 -1
  48. package/_internal/reactVersion.js +14 -0
  49. package/_internal/reactVersion.js.map +1 -0
  50. package/_internal/styles4.js +72 -72
  51. package/_internal/styles4.js.map +1 -1
  52. package/_internal/types.js.map +1 -1
  53. package/_internal/useFocusOnListItem.js +1 -1
  54. package/_internal/useFocusOnListItem.js.map +1 -1
  55. package/_internal/useId.js +1 -1
  56. package/_internal/useId.js.map +1 -1
  57. package/_internal/useListboxItem.js.map +1 -1
  58. package/_internal/useSideNavigationMenuBar.js +2 -2
  59. package/_internal/useSideNavigationMenuBar.js.map +1 -1
  60. package/_internal/warnIfNoAccessibleLabelFound.js.map +1 -1
  61. package/index.d.ts +48 -24
  62. package/index.js +3 -31
  63. package/index.js.map +1 -1
  64. package/package.json +18 -26
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavigationMenuItem.js","sources":["../../src/components/side-navigation-menu-bar/types.ts","../../src/components/side-navigation-menu-bar/context.ts","../../src/components/side-navigation-menu/context.ts","../../src/components/side-navigation-menu-item/styles.ts","../../src/components/side-navigation-menu-item/SideNavigationMenuItem.tsx"],"sourcesContent":["import { ComponentProps, Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport { SideNavigationMenuProps } from '../side-navigation-menu';\nimport { SideNavigationMenuItemProps } from '../side-navigation-menu-item';\nimport { Theme, ValueOf } from '../../types';\n\n/**\n * Component variant.\n */\nexport const SideNavigationMenuBarVariant = {\n shrinked: 'shrinked',\n standard: 'standard',\n} as const;\nexport type SideNavigationMenuBarVariant = ValueOf<typeof SideNavigationMenuBarVariant>;\n\n/**\n * Context props.\n */\nexport type SideNavigationMenuBarContextProps = {\n /** Side navigation variant. */\n sideNavigationMenuBarVariant: SideNavigationMenuBarVariant;\n /** Change side navigation variant. */\n setSideNavigationMenuBarVariant: Dispatch<SetStateAction<SideNavigationMenuBarVariant>>;\n /** Current open menu, used to close other menu when canHaveMultipleMenuOpenAtOnce is false. */\n currentOpenMenuId?: string;\n /** Change current open menu id. */\n setCurrentOpenMenuId?: Dispatch<SetStateAction<string | undefined>>;\n /** Whether or not opening a menu closes the others. */\n canHaveMultipleMenuOpenAtOnce?: boolean;\n /** Whether all menus should be expanded by default. */\n defaultExpandAll?: boolean;\n /** When set, persists menu expand/collapse states in localStorage using this key as prefix. */\n storageKey?: string;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuBarProps extends ComponentProps<'nav'> {\n /** Whether or not opening a menu closes the others. */\n canHaveMultipleMenuOpenAtOnce?: boolean;\n /**\n * Whether all menus should be expanded by default.\n * When true, automatically enables `canHaveMultipleMenuOpenAtOnce`.\n */\n defaultExpandAll?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Custom props to pass to the list. */\n menubarProps?: ComponentProps<'ul'>;\n /** Custom ref to pass to the list. */\n menubarRef?: MutableRefObject<HTMLUListElement>;\n /**\n * When set, persists menu expand/collapse states in localStorage using this key as prefix.\n * Each menu is identified by its `aria-label` prop.\n */\n storageKey?: string;\n /** Theme. */\n theme?: Theme;\n /**\n * Variant.\n * @default 'standard'\n */\n variant?: SideNavigationMenuBarVariant;\n}\n\nexport type StyledSideNavigationMenuBarProps = Omit<SideNavigationMenuBarProps, 'isDisabled'> & {\n $isDisabled: SideNavigationMenuBarProps['isDisabled'];\n $marginTop?: number;\n $variant: SideNavigationMenuBarProps['variant'];\n $theme: SideNavigationMenuBarProps['theme'];\n};\n\n/**\n * Hook props.\n */\nexport interface MenuItem extends Omit<SideNavigationMenuItemProps, 'children'> {\n title: string;\n}\nexport interface Menu extends Omit<SideNavigationMenuProps, 'children'> {\n title: string;\n children: MenuItem[];\n}\nexport type MenuBarItems = (Menu | MenuItem)[];\n","import React from 'react';\nimport { SideNavigationMenuBarContextProps } from './types';\n\nexport const SideNavigationMenuBarContext =\n React.createContext<SideNavigationMenuBarContextProps>(null!);\n","import React from 'react';\nimport { SideNavigationMenuContextProps } from './types';\n\nexport const SideNavigationMenuContext =\n React.createContext<SideNavigationMenuContextProps>(null!);\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuItemProps } from './types';\nimport { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar';\nimport { Theme } from '../../types';\n\nexport const StyledSideNavigationMenuItemIndicatorContainer = styled.div`\n min-width: 4px;\n`;\n\nexport const StyledSideNavigationMenuItemIndicator = styled.div<{ $theme: Theme; $height?: number }>`\n position: relative;\n width: 4px;\n height: ${({ $height }) => $height ?? 40}px;\n border-radius: 0px 4px 4px 0px;\n transition: height 300ms ease-out;\n background-color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-side-navigation-current-marker)`};\n`;\n\nexport const StyledSideNavigationMenuItemBorder = styled.div`\n position: relative;\n width: 100%;\n height: 1px;\n background-color: var(--redsift-color-neutral-light-grey);\n margin-left: 62px;\n margin-top: -1px;\n`;\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuItem = styled.a<StyledSideNavigationMenuItemProps>`\n /**\n * Common style\n */\n ${({ $isDisabled, $theme, $color }) =>\n !$isDisabled\n ? css`\n & {\n color: ${$color\n ? $color\n : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting)`};\n }\n `\n : css`\n & {\n color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);\n }\n `}\n align-items: center;\n border-radius: 0 4px 4px 0;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: 14px;\n font-weight: var(--redsift-typography-body-font-weight);\n gap: 8px;\n line-height: var(--redsift-typography-body-line-height);\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n width: 100%;\n\n &:hover,\n &:focus-visible {\n outline: none;\n\n ${({ $isDisabled, $theme, $color }) =>\n !$isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);\n & {\n color: ${$color\n ? $color\n : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover)`};\n }\n `\n : ''}\n }\n\n :active {\n ${({ $isDisabled, $theme }) =>\n !$isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);\n `\n : ''}\n }\n\n ${({ $variant }) => css`\n @media (prefers-reduced-motion: no-preference) {\n :focus-visible {\n > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n outline: 2px solid var(--redsift-color-primary-n);\n transition: outline-offset 75ms ease-out;\n }\n\n :not(:active):focus-visible {\n > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n transition-duration: 0.25s;\n }\n }\n }\n\n :not(:active):focus-visible {\n > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n outline-offset: 0.25rem;\n }\n }\n }\n\n .content {\n transition: opacity 300ms ease-out;\n opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};\n overflow: hidden;\n white-space: nowrap;\n }\n `}\n\n ${({ $hasIcon, $isSecondLevel, $variant, $theme }) =>\n !$isSecondLevel\n ? css`\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-${$theme}-components-side-navigation-background);\n height: 40px;\n margin-bottom: 4px;\n margin-left: -4px;\n transition: padding 300ms ease-out;\n padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};\n\n .redsift-icon.first {\n box-sizing: unset;\n }\n `\n : `\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-secondary);\n font-size: var(--redsift-typography-caption-font-size);\n padding-bottom: 4px;\n padding-left: ${$hasIcon ? '18px' : '54px'};\n padding-right: 0;\n padding-top: 4px;\n border-radius: 0;\n\n .redsift-icon.first {\n box-sizing: unset;\n margin-right: 8px;\n }\n `}\n`;\n","import React, { forwardRef, MutableRefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { Icon, IconSize } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context';\nimport { SideNavigationMenuContext } from '../side-navigation-menu/context';\nimport {\n StyledSideNavigationMenuItem,\n StyledSideNavigationMenuItemBorder,\n StyledSideNavigationMenuItemIndicator,\n StyledSideNavigationMenuItemIndicatorContainer,\n} from './styles';\nimport { SideNavigationMenuItemProps } from './types';\nimport { Badge, BadgeVariant } from '../badge';\nimport { Flexbox } from '../flexbox';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'SideNavigationMenuItem';\nconst CLASSNAME = 'redsift-side-navigation-menu-item';\n\n/**\n * The SideNavigationMenuItem component.\n */\nexport const SideNavigationMenuItem: Comp<SideNavigationMenuItemProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const menuItemRef = ref || useRef<HTMLAnchorElement>();\n\n const {\n as,\n badge,\n badgeProps,\n children,\n className,\n color,\n hasBorder,\n href,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(),\n isCurrent,\n isDisabled,\n isSecondLevel,\n onClick,\n onKeyDown,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props, [children], 'SideNavigationMenuItem');\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const sideNavigationMenuContext = useContext(SideNavigationMenuContext);\n const theme = useTheme(propsTheme);\n const { menuItems } = sideNavigationMenuContext || {};\n\n // Register menu item for arrow key navigation within disclosure\n React.useEffect(() => {\n if (!menuItems) {\n return;\n }\n\n const menuItemNode = (menuItemRef as MutableRefObject<HTMLAnchorElement>).current;\n\n if (menuItemNode) {\n menuItems.add(menuItemNode);\n }\n\n return () => {\n menuItems.delete(menuItemNode);\n };\n }, [menuItems]);\n\n const sideNavigationVariant = sideNavigationMenuBarContext?.sideNavigationMenuBarVariant;\n\n return (\n <Flexbox flexDirection=\"column\" gap=\"0px\">\n <Flexbox flexDirection=\"row\" gap=\"0px\">\n {!isSecondLevel ? (\n <StyledSideNavigationMenuItemIndicatorContainer>\n {isCurrent ? <StyledSideNavigationMenuItemIndicator $theme={theme} /> : null}\n </StyledSideNavigationMenuItemIndicatorContainer>\n ) : null}\n <StyledSideNavigationMenuItem\n as={as as any}\n {...forwardedProps}\n $color={color}\n $hasIcon={icon !== undefined}\n $isCurrent={isCurrent}\n $isDisabled={isDisabled}\n $isSecondLevel={isSecondLevel}\n $theme={theme}\n $variant={sideNavigationVariant}\n aria-current={isCurrent ? 'page' : undefined}\n aria-disabled={isDisabled}\n className={classNames(SideNavigationMenuItem.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={isDisabled ? undefined : onClick}\n onKeyDown={isDisabled ? undefined : onKeyDown}\n ref={menuItemRef as MutableRefObject<HTMLAnchorElement>}\n tabIndex={0}\n >\n {!isSecondLevel || icon ? (\n <Icon\n color={`var(--redsift-side-navigation-color-menu-item-text-${\n isSecondLevel || isDisabled ? 'disabled' : 'resting'\n })`}\n {...iconProps}\n icon={icon!}\n ref={iconRef as MutableRefObject<HTMLElement>}\n className=\"first\"\n size={isSecondLevel ? IconSize.small : IconSize.medium}\n />\n ) : null}\n <span className=\"content\">{children}</span>\n {badge ? (\n <Badge variant={BadgeVariant.standard} color=\"error\" {...badgeProps}>\n {badge}\n </Badge>\n ) : null}\n </StyledSideNavigationMenuItem>\n </Flexbox>\n {isSecondLevel && hasBorder ? <StyledSideNavigationMenuItemBorder /> : null}\n </Flexbox>\n );\n});\nSideNavigationMenuItem.className = CLASSNAME;\nSideNavigationMenuItem.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuBarVariant","shrinked","standard","SideNavigationMenuBarContext","React","createContext","SideNavigationMenuContext","StyledSideNavigationMenuItemIndicatorContainer","styled","div","StyledSideNavigationMenuItemIndicator","_ref","$height","_ref2","$theme","StyledSideNavigationMenuItemBorder","StyledSideNavigationMenuItem","a","_ref3","$isDisabled","$color","css","_ref4","_ref5","_ref6","$variant","_ref7","$hasIcon","$isSecondLevel","COMPONENT_NAME","CLASSNAME","SideNavigationMenuItem","forwardRef","props","ref","menuItemRef","useRef","as","badge","badgeProps","children","className","color","hasBorder","href","icon","iconProps","iconRef","isCurrent","isDisabled","isSecondLevel","onClick","onKeyDown","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","sideNavigationMenuBarContext","useContext","sideNavigationMenuContext","useTheme","menuItems","useEffect","menuItemNode","current","add","delete","sideNavigationVariant","sideNavigationMenuBarVariant","createElement","Flexbox","flexDirection","gap","_extends","undefined","$isCurrent","classNames","tabIndex","Icon","size","IconSize","small","medium","Badge","variant","BadgeVariant","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"SideNavigationMenuItem.js","sources":["../../src/components/side-navigation-menu-bar/types.ts","../../src/components/side-navigation-menu-bar/context.ts","../../src/components/side-navigation-menu/context.ts","../../src/components/side-navigation-menu-item/styles.ts","../../src/components/side-navigation-menu-item/SideNavigationMenuItem.tsx"],"sourcesContent":["import { ComponentProps, Dispatch, RefObject, SetStateAction } from 'react';\nimport { SideNavigationMenuProps } from '../side-navigation-menu';\nimport { SideNavigationMenuItemProps } from '../side-navigation-menu-item';\nimport { Theme, ValueOf } from '../../types';\n\n/**\n * Component variant.\n */\nexport const SideNavigationMenuBarVariant = {\n shrinked: 'shrinked',\n standard: 'standard',\n} as const;\nexport type SideNavigationMenuBarVariant = ValueOf<typeof SideNavigationMenuBarVariant>;\n\n/**\n * Context props.\n */\nexport type SideNavigationMenuBarContextProps = {\n /** Side navigation variant. */\n sideNavigationMenuBarVariant: SideNavigationMenuBarVariant;\n /** Change side navigation variant. */\n setSideNavigationMenuBarVariant: Dispatch<SetStateAction<SideNavigationMenuBarVariant>>;\n /** Current open menu, used to close other menu when canHaveMultipleMenuOpenAtOnce is false. */\n currentOpenMenuId?: string;\n /** Change current open menu id. */\n setCurrentOpenMenuId?: Dispatch<SetStateAction<string | undefined>>;\n /** Whether or not opening a menu closes the others. */\n canHaveMultipleMenuOpenAtOnce?: boolean;\n /** Whether all menus should be expanded by default. */\n defaultExpandAll?: boolean;\n /** When set, persists menu expand/collapse states in localStorage using this key as prefix. */\n storageKey?: string;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuBarProps extends ComponentProps<'nav'> {\n /** Whether or not opening a menu closes the others. */\n canHaveMultipleMenuOpenAtOnce?: boolean;\n /**\n * Whether all menus should be expanded by default.\n * When true, automatically enables `canHaveMultipleMenuOpenAtOnce`.\n */\n defaultExpandAll?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Custom props to pass to the list. */\n menubarProps?: ComponentProps<'ul'>;\n /** Custom ref to pass to the list. */\n menubarRef?: RefObject<HTMLUListElement | null>;\n /**\n * When set, persists menu expand/collapse states in localStorage using this key as prefix.\n * Each menu is identified by its `aria-label` prop.\n */\n storageKey?: string;\n /** Theme. */\n theme?: Theme;\n /**\n * Variant.\n * @default 'standard'\n */\n variant?: SideNavigationMenuBarVariant;\n}\n\nexport type StyledSideNavigationMenuBarProps = Omit<SideNavigationMenuBarProps, 'isDisabled'> & {\n $isDisabled: SideNavigationMenuBarProps['isDisabled'];\n $marginTop?: number;\n $variant: SideNavigationMenuBarProps['variant'];\n $theme: SideNavigationMenuBarProps['theme'];\n};\n\n/**\n * Hook props.\n */\nexport interface MenuItem extends Omit<SideNavigationMenuItemProps, 'children'> {\n title: string;\n}\nexport interface Menu extends Omit<SideNavigationMenuProps, 'children'> {\n title: string;\n children: MenuItem[];\n}\nexport type MenuBarItems = (Menu | MenuItem)[];\n","import React from 'react';\nimport { SideNavigationMenuBarContextProps } from './types';\n\nexport const SideNavigationMenuBarContext =\n React.createContext<SideNavigationMenuBarContextProps>(null!);\n","import React from 'react';\nimport { SideNavigationMenuContextProps } from './types';\n\nexport const SideNavigationMenuContext =\n React.createContext<SideNavigationMenuContextProps>(null!);\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuItemProps } from './types';\nimport { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar';\nimport { Theme } from '../../types';\n\nexport const StyledSideNavigationMenuItemIndicatorContainer = styled.div`\n min-width: 4px;\n`;\n\nexport const StyledSideNavigationMenuItemIndicator = styled.div<{ $theme: Theme; $height?: number }>`\n position: relative;\n width: 4px;\n height: ${({ $height }) => $height ?? 40}px;\n border-radius: 0px 4px 4px 0px;\n transition: height 300ms ease-out;\n background-color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-side-navigation-current-marker)`};\n`;\n\nexport const StyledSideNavigationMenuItemBorder = styled.div`\n position: relative;\n width: 100%;\n height: 1px;\n background-color: var(--redsift-color-neutral-light-grey);\n margin-left: 62px;\n margin-top: -1px;\n`;\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuItem = styled.a<StyledSideNavigationMenuItemProps>`\n /**\n * Common style\n */\n ${({ $isDisabled, $theme, $color }) =>\n !$isDisabled\n ? css`\n & {\n color: ${$color\n ? $color\n : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting)`};\n }\n `\n : css`\n & {\n color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);\n }\n `}\n align-items: center;\n border-radius: 0 4px 4px 0;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: 14px;\n font-weight: var(--redsift-typography-body-font-weight);\n gap: 8px;\n line-height: var(--redsift-typography-body-line-height);\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n width: 100%;\n\n &:hover,\n &:focus-visible {\n outline: none;\n\n ${({ $isDisabled, $theme, $color }) =>\n !$isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);\n & {\n color: ${$color\n ? $color\n : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover)`};\n }\n `\n : ''}\n }\n\n :active {\n ${({ $isDisabled, $theme }) =>\n !$isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);\n `\n : ''}\n }\n\n ${({ $variant }) => css`\n @media (prefers-reduced-motion: no-preference) {\n :focus-visible {\n > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n outline: 2px solid var(--redsift-color-primary-n);\n transition: outline-offset 75ms ease-out;\n }\n\n :not(:active):focus-visible {\n > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n transition-duration: 0.25s;\n }\n }\n }\n\n :not(:active):focus-visible {\n > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n outline-offset: 0.25rem;\n }\n }\n }\n\n .content {\n transition: opacity 300ms ease-out;\n opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};\n overflow: hidden;\n white-space: nowrap;\n }\n `}\n\n ${({ $hasIcon, $isSecondLevel, $variant, $theme }) =>\n !$isSecondLevel\n ? css`\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-${$theme}-components-side-navigation-background);\n height: 40px;\n margin-bottom: 4px;\n margin-left: -4px;\n transition: padding 300ms ease-out;\n padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};\n\n .redsift-icon.first {\n box-sizing: unset;\n }\n `\n : `\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-secondary);\n font-size: var(--redsift-typography-caption-font-size);\n padding-bottom: 4px;\n padding-left: ${$hasIcon ? '18px' : '54px'};\n padding-right: 0;\n padding-top: 4px;\n border-radius: 0;\n\n .redsift-icon.first {\n box-sizing: unset;\n margin-right: 8px;\n }\n `}\n`;\n","import React, { forwardRef, MutableRefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { Icon, IconSize } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context';\nimport { SideNavigationMenuContext } from '../side-navigation-menu/context';\nimport {\n StyledSideNavigationMenuItem,\n StyledSideNavigationMenuItemBorder,\n StyledSideNavigationMenuItemIndicator,\n StyledSideNavigationMenuItemIndicatorContainer,\n} from './styles';\nimport { SideNavigationMenuItemProps } from './types';\nimport { Badge, BadgeVariant } from '../badge';\nimport { Flexbox } from '../flexbox';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'SideNavigationMenuItem';\nconst CLASSNAME = 'redsift-side-navigation-menu-item';\n\n/**\n * The SideNavigationMenuItem component.\n */\nexport const SideNavigationMenuItem: Comp<SideNavigationMenuItemProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const menuItemRef = ref || useRef<HTMLAnchorElement>(undefined);\n\n const {\n as,\n badge,\n badgeProps,\n children,\n className,\n color,\n hasBorder,\n href,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(undefined),\n isCurrent,\n isDisabled,\n isSecondLevel,\n onClick,\n onKeyDown,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props, [children], 'SideNavigationMenuItem');\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const sideNavigationMenuContext = useContext(SideNavigationMenuContext);\n const theme = useTheme(propsTheme);\n const { menuItems } = sideNavigationMenuContext || {};\n\n // Register menu item for arrow key navigation within disclosure\n React.useEffect(() => {\n if (!menuItems) {\n return;\n }\n\n const menuItemNode = (menuItemRef as MutableRefObject<HTMLAnchorElement>).current;\n\n if (menuItemNode) {\n menuItems.add(menuItemNode);\n }\n\n return () => {\n menuItems.delete(menuItemNode);\n };\n }, [menuItems]);\n\n const sideNavigationVariant = sideNavigationMenuBarContext?.sideNavigationMenuBarVariant;\n\n return (\n <Flexbox flexDirection=\"column\" gap=\"0px\">\n <Flexbox flexDirection=\"row\" gap=\"0px\">\n {!isSecondLevel ? (\n <StyledSideNavigationMenuItemIndicatorContainer>\n {isCurrent ? <StyledSideNavigationMenuItemIndicator $theme={theme} /> : null}\n </StyledSideNavigationMenuItemIndicatorContainer>\n ) : null}\n <StyledSideNavigationMenuItem\n as={as as any}\n {...forwardedProps}\n $color={color}\n $hasIcon={icon !== undefined}\n $isCurrent={isCurrent}\n $isDisabled={isDisabled}\n $isSecondLevel={isSecondLevel}\n $theme={theme}\n $variant={sideNavigationVariant}\n aria-current={isCurrent ? 'page' : undefined}\n aria-disabled={isDisabled}\n className={classNames(SideNavigationMenuItem.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={isDisabled ? undefined : onClick}\n onKeyDown={isDisabled ? undefined : onKeyDown}\n ref={menuItemRef as MutableRefObject<HTMLAnchorElement>}\n tabIndex={0}\n >\n {!isSecondLevel || icon ? (\n <Icon\n color={`var(--redsift-side-navigation-color-menu-item-text-${\n isSecondLevel || isDisabled ? 'disabled' : 'resting'\n })`}\n {...iconProps}\n icon={icon!}\n ref={iconRef as MutableRefObject<HTMLElement>}\n className=\"first\"\n size={isSecondLevel ? IconSize.small : IconSize.medium}\n />\n ) : null}\n <span className=\"content\">{children}</span>\n {badge ? (\n <Badge variant={BadgeVariant.standard} color=\"error\" {...badgeProps}>\n {badge}\n </Badge>\n ) : null}\n </StyledSideNavigationMenuItem>\n </Flexbox>\n {isSecondLevel && hasBorder ? <StyledSideNavigationMenuItemBorder /> : null}\n </Flexbox>\n );\n});\nSideNavigationMenuItem.className = CLASSNAME;\nSideNavigationMenuItem.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuBarVariant","shrinked","standard","SideNavigationMenuBarContext","React","createContext","SideNavigationMenuContext","StyledSideNavigationMenuItemIndicatorContainer","styled","div","StyledSideNavigationMenuItemIndicator","_ref","$height","_ref2","$theme","StyledSideNavigationMenuItemBorder","StyledSideNavigationMenuItem","a","_ref3","$isDisabled","$color","css","_ref4","_ref5","_ref6","$variant","_ref7","$hasIcon","$isSecondLevel","COMPONENT_NAME","CLASSNAME","SideNavigationMenuItem","forwardRef","props","ref","menuItemRef","useRef","undefined","as","badge","badgeProps","children","className","color","hasBorder","href","icon","iconProps","iconRef","isCurrent","isDisabled","isSecondLevel","onClick","onKeyDown","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","sideNavigationMenuBarContext","useContext","sideNavigationMenuContext","useTheme","menuItems","useEffect","menuItemNode","current","add","delete","sideNavigationVariant","sideNavigationMenuBarVariant","createElement","Flexbox","flexDirection","gap","_extends","$isCurrent","classNames","tabIndex","Icon","size","IconSize","small","medium","Badge","variant","BadgeVariant","displayName"],"mappings":"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"}
@@ -329,7 +329,9 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
329
329
  "aria-label": ariaLabel,
330
330
  "aria-labelledby": ariaLabelledby,
331
331
  "aria-readonly": isReadOnly,
332
- "aria-required": isRequired,
332
+ "aria-required": isRequired
333
+ // eslint-disable-next-line jsx-a11y/no-autofocus -- forwards the consumer's `autoFocus` prop
334
+ ,
333
335
  autoFocus: autoFocus,
334
336
  checked: isSelected || isControlled && propsIsSelected ? true : false,
335
337
  disabled: isDisabled,
@@ -337,8 +339,11 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
337
339
  onChange: handleChange,
338
340
  ref: inputRef,
339
341
  role: "switch",
340
- type: "checkbox",
341
- value: value
342
+ type: "checkbox"
343
+ // React 18 renders an explicit `value={undefined}` as `value=""` (it sets `defaultValue`), and that is what
344
+ // a checked input submits. React 19 renders nothing, so pass the `''` explicitly on both.
345
+ ,
346
+ value: value !== null && value !== void 0 ? value : ''
342
347
  })));
343
348
  });
344
349
  Switch.className = CLASSNAME;
@@ -1 +1 @@
1
- {"version":3,"file":"Switch2.js","sources":["../../src/components/switch/styles.ts","../../src/components/switch/Switch.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledSwitchProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSwitch = styled.label<StyledSwitchProps>`\n height: fit-content;\n position: relative;\n width: fit-content;\n ${baseStyling}\n\n align-items: center;\n background: none;\n border: none;\n display: inline-flex;\n margin: 4px;\n\n input {\n height: 100%;\n margin: 0;\n opacity: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n width: 100%;\n }\n\n span.label {\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n color: var(--redsift-color-${$theme}-components-switch-text-disabled);\n `\n : $isInvalid\n ? css`\n color: var(--redsift-color-${$theme}-components-switch-text-invalid);\n `\n : css`\n color: var(--redsift-color-${$theme}-components-switch-text-default);\n `}\n\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding-inline-start: 12px;\n padding-inline-end: 24px;\n }\n\n .redsift-switch__slide {\n height: 20px;\n position: relative;\n min-width: 40px;\n }\n\n .redsift-switch-slide__inner {\n ${({ $isColored, $isDisabled, $isInvalid, $isSelected, $theme }) =>\n $isDisabled\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-switch-background-disabled${$isSelected ? '-active' : ''}\n );\n `\n : $isInvalid\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-switch-background-invalid${$isSelected ? '-active' : ''}\n );\n `\n : css`\n background-color: ${$isColored\n ? `var(--redsift-color-${$theme}-components-switch-background-default${$isSelected ? '-active' : ''})`\n : `var(--redsift-color-${$theme}-components-switch-background-uncolored${$isSelected ? '-active' : ''})`};\n `}\n border-radius: 20px;\n height: 24px;\n position: absolute;\n top: calc(50% - 24px / 2);\n width: 46px;\n z-index: 2;\n }\n\n .redsift-switch-slide__knob-wrapper {\n border-radius: 50%;\n height: 20px;\n margin-inline-start: ${({ $isSelected }) => (!$isSelected ? '2px' : '24px')};\n position: absolute;\n top: -6px;\n width: 20px;\n }\n\n .redsift-switch-slide-knob-wrapper__elevation {\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled-hover);\n `\n : $isInvalid\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid-hover);\n `\n : css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-default-hover);\n `}\n\n border-radius: 50%;\n height: 32px;\n margin-inline-start: ${({ $isSelected }) => (!$isSelected ? '-6px' : '-6px')};\n opacity: 0;\n position: absolute;\n width: 32px;\n z-index: 3;\n }\n\n .redsift-switch-slide-knob-wrapper__knob {\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled);\n `\n : $isInvalid\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid);\n `\n : css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-default);\n `}\n border-radius: 50%;\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);\n height: 20px;\n position: absolute;\n top: 6px;\n width: 20px;\n z-index: 4;\n }\n\n &:hover,\n &:focus-visible {\n outline: none;\n cursor: pointer;\n\n ${({ $isDisabled }) =>\n !$isDisabled\n ? css`\n .redsift-switch-slide-knob-wrapper__elevation {\n opacity: 0.5;\n }\n `\n : ''}\n }\n\n ${({ $isDisabled, $isFocusVisible }) =>\n $isFocusVisible && !$isDisabled\n ? css`\n .redsift-switch-slide-knob-wrapper__elevation {\n opacity: 0.5;\n }\n `\n : ''}\n`;\n","import React, {\n ComponentProps,\n forwardRef,\n MutableRefObject,\n useCallback,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { SwitchGroupContext } from '../switch-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { SwitchProps } from './types';\nimport { StyledSwitch } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Switch';\nconst CLASSNAME = 'redsift-switch';\n\n/**\n * Switch is a toggle control for binary options (on/off, enabled/disabled).\n * Works standalone or within a SwitchGroup for multiple related toggles.\n *\n * Supports controlled (`isSelected`) or uncontrolled (`defaultSelected`) modes.\n *\n * **When to use Switch vs Checkbox:**\n * - Switch: For immediate effect toggles (e.g., \"Enable notifications\")\n * - Checkbox: For selections that require form submission\n *\n * @example\n * // Basic switch\n * <Switch>Enable dark mode</Switch>\n *\n * @example\n * // Controlled switch\n * <Switch isSelected={enabled} onChange={setEnabled}>\n * Receive email updates\n * </Switch>\n *\n * @example\n * // Within a SwitchGroup\n * <SwitchGroup label=\"Notification preferences\">\n * <Switch value=\"email\">Email</Switch>\n * <Switch value=\"sms\">SMS</Switch>\n * <Switch value=\"push\">Push notifications</Switch>\n * </SwitchGroup>\n */\nexport const Switch: Comp<SwitchProps, HTMLLabelElement> = forwardRef((props, ref) => {\n const groupState = useContext(SwitchGroupContext);\n\n const { transientProps, otherProps } = getStylingTransientProps(props);\n\n let {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n autoFocus,\n children,\n className,\n defaultSelected,\n inputProps,\n inputRef,\n isColored = true,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n isSelected: propsIsSelected,\n name,\n onChange,\n theme: propsTheme,\n value,\n ...forwardedProps\n } = otherProps;\n\n const theme = useTheme(propsTheme);\n\n const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n isDisabled = isDisabled ?? groupState?.isDisabled;\n isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n const [isSelected, setSelected] = useState(\n Boolean(propsIsSelected ?? defaultSelected ?? groupState?.value.includes(value as string))\n );\n const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n useEffect(() => {\n setSelected(Boolean(propsIsSelected ?? defaultSelected));\n }, [propsIsSelected, defaultSelected]);\n\n useEffect(() => {\n if (groupState) {\n setSelected(groupState.value.includes(value as string));\n }\n }, [groupState?.value]);\n\n warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Switch');\n\n if (groupState) {\n if (propsIsSelected != null) {\n console.warn(\n 'isSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.'\n );\n }\n if (defaultSelected != null) {\n console.warn(\n 'defaultSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.'\n );\n }\n if (props.value == null) {\n console.warn(\n 'A <Switch> element within a <SwitchGroup> requires a `value` property unless the <Switch> is controlled.'\n );\n }\n }\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n if (groupState) {\n if (!groupState.value.includes(value as string)) {\n groupState.addValue(value as string);\n } else {\n groupState.removeValue(value as string);\n }\n }\n\n if (isControlled) {\n onChange?.(!propsIsSelected, value, name, event, groupState!);\n } else {\n setSelected(!isSelected);\n onChange?.(!isSelected, value, name, event, groupState!);\n }\n },\n [onChange, groupState, isSelected, propsIsSelected]\n );\n\n return (\n <StyledSwitch\n {...forwardedProps}\n {...transientProps}\n $isColored={isColored}\n $isDisabled={isDisabled}\n $isFocusVisible={isFocusVisible}\n $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n $isRequired={isRequired}\n $isSelected={isSelected || (isControlled && propsIsSelected)}\n $theme={theme}\n className={classNames(Switch.className, className)}\n ref={ref as MutableRefObject<HTMLLabelElement>}\n >\n <div className={`${Switch.className}__slide`}>\n <div className={`${Switch.className}-slide__inner`} />\n <div className={`${Switch.className}-slide__knob-wrapper`}>\n <div className={`${Switch.className}-slide-knob-wrapper__elevation`} />\n <div className={`${Switch.className}-slide-knob-wrapper__knob`} />\n </div>\n </div>\n {children ? <span className=\"label\">{children}</span> : null}\n <input\n {...inputProps}\n {...focusProps}\n aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : 'false'}\n aria-disabled={isDisabled}\n aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-readonly={isReadOnly}\n aria-required={isRequired}\n autoFocus={autoFocus}\n checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n disabled={isDisabled}\n name={name}\n onChange={handleChange}\n ref={inputRef as MutableRefObject<HTMLInputElement>}\n role=\"switch\"\n type=\"checkbox\"\n value={value}\n />\n </StyledSwitch>\n );\n});\nSwitch.className = CLASSNAME;\nSwitch.displayName = COMPONENT_NAME;\n"],"names":["StyledSwitch","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isSelected","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","$isFocusVisible","COMPONENT_NAME","CLASSNAME","Switch","forwardRef","props","ref","_isDisabled","_isReadOnly","groupState","useContext","SwitchGroupContext","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","includes","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","addValue","removeValue","React","createElement","_extends","$isRequired","classNames","checked","disabled","role","type","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"Switch2.js","sources":["../../src/components/switch/styles.ts","../../src/components/switch/Switch.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledSwitchProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSwitch = styled.label<StyledSwitchProps>`\n height: fit-content;\n position: relative;\n width: fit-content;\n ${baseStyling}\n\n align-items: center;\n background: none;\n border: none;\n display: inline-flex;\n margin: 4px;\n\n input {\n height: 100%;\n margin: 0;\n opacity: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n width: 100%;\n }\n\n span.label {\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n color: var(--redsift-color-${$theme}-components-switch-text-disabled);\n `\n : $isInvalid\n ? css`\n color: var(--redsift-color-${$theme}-components-switch-text-invalid);\n `\n : css`\n color: var(--redsift-color-${$theme}-components-switch-text-default);\n `}\n\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding-inline-start: 12px;\n padding-inline-end: 24px;\n }\n\n .redsift-switch__slide {\n height: 20px;\n position: relative;\n min-width: 40px;\n }\n\n .redsift-switch-slide__inner {\n ${({ $isColored, $isDisabled, $isInvalid, $isSelected, $theme }) =>\n $isDisabled\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-switch-background-disabled${$isSelected ? '-active' : ''}\n );\n `\n : $isInvalid\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-switch-background-invalid${$isSelected ? '-active' : ''}\n );\n `\n : css`\n background-color: ${$isColored\n ? `var(--redsift-color-${$theme}-components-switch-background-default${$isSelected ? '-active' : ''})`\n : `var(--redsift-color-${$theme}-components-switch-background-uncolored${$isSelected ? '-active' : ''})`};\n `}\n border-radius: 20px;\n height: 24px;\n position: absolute;\n top: calc(50% - 24px / 2);\n width: 46px;\n z-index: 2;\n }\n\n .redsift-switch-slide__knob-wrapper {\n border-radius: 50%;\n height: 20px;\n margin-inline-start: ${({ $isSelected }) => (!$isSelected ? '2px' : '24px')};\n position: absolute;\n top: -6px;\n width: 20px;\n }\n\n .redsift-switch-slide-knob-wrapper__elevation {\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled-hover);\n `\n : $isInvalid\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid-hover);\n `\n : css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-default-hover);\n `}\n\n border-radius: 50%;\n height: 32px;\n margin-inline-start: ${({ $isSelected }) => (!$isSelected ? '-6px' : '-6px')};\n opacity: 0;\n position: absolute;\n width: 32px;\n z-index: 3;\n }\n\n .redsift-switch-slide-knob-wrapper__knob {\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled);\n `\n : $isInvalid\n ? css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid);\n `\n : css`\n background-color: var(--redsift-color-${$theme}-components-switch-dot-default);\n `}\n border-radius: 50%;\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);\n height: 20px;\n position: absolute;\n top: 6px;\n width: 20px;\n z-index: 4;\n }\n\n &:hover,\n &:focus-visible {\n outline: none;\n cursor: pointer;\n\n ${({ $isDisabled }) =>\n !$isDisabled\n ? css`\n .redsift-switch-slide-knob-wrapper__elevation {\n opacity: 0.5;\n }\n `\n : ''}\n }\n\n ${({ $isDisabled, $isFocusVisible }) =>\n $isFocusVisible && !$isDisabled\n ? css`\n .redsift-switch-slide-knob-wrapper__elevation {\n opacity: 0.5;\n }\n `\n : ''}\n`;\n","import React, {\n ComponentProps,\n forwardRef,\n MutableRefObject,\n useCallback,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { SwitchGroupContext } from '../switch-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { SwitchProps } from './types';\nimport { StyledSwitch } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Switch';\nconst CLASSNAME = 'redsift-switch';\n\n/**\n * Switch is a toggle control for binary options (on/off, enabled/disabled).\n * Works standalone or within a SwitchGroup for multiple related toggles.\n *\n * Supports controlled (`isSelected`) or uncontrolled (`defaultSelected`) modes.\n *\n * **When to use Switch vs Checkbox:**\n * - Switch: For immediate effect toggles (e.g., \"Enable notifications\")\n * - Checkbox: For selections that require form submission\n *\n * @example\n * // Basic switch\n * <Switch>Enable dark mode</Switch>\n *\n * @example\n * // Controlled switch\n * <Switch isSelected={enabled} onChange={setEnabled}>\n * Receive email updates\n * </Switch>\n *\n * @example\n * // Within a SwitchGroup\n * <SwitchGroup label=\"Notification preferences\">\n * <Switch value=\"email\">Email</Switch>\n * <Switch value=\"sms\">SMS</Switch>\n * <Switch value=\"push\">Push notifications</Switch>\n * </SwitchGroup>\n */\nexport const Switch: Comp<SwitchProps, HTMLLabelElement> = forwardRef((props, ref) => {\n const groupState = useContext(SwitchGroupContext);\n\n const { transientProps, otherProps } = getStylingTransientProps(props);\n\n let {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n autoFocus,\n children,\n className,\n defaultSelected,\n inputProps,\n inputRef,\n isColored = true,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n isSelected: propsIsSelected,\n name,\n onChange,\n theme: propsTheme,\n value,\n ...forwardedProps\n } = otherProps;\n\n const theme = useTheme(propsTheme);\n\n const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n isDisabled = isDisabled ?? groupState?.isDisabled;\n isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n const [isSelected, setSelected] = useState(\n Boolean(propsIsSelected ?? defaultSelected ?? groupState?.value.includes(value as string))\n );\n const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n useEffect(() => {\n setSelected(Boolean(propsIsSelected ?? defaultSelected));\n }, [propsIsSelected, defaultSelected]);\n\n useEffect(() => {\n if (groupState) {\n setSelected(groupState.value.includes(value as string));\n }\n }, [groupState?.value]);\n\n warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Switch');\n\n if (groupState) {\n if (propsIsSelected != null) {\n console.warn(\n 'isSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.'\n );\n }\n if (defaultSelected != null) {\n console.warn(\n 'defaultSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.'\n );\n }\n if (props.value == null) {\n console.warn(\n 'A <Switch> element within a <SwitchGroup> requires a `value` property unless the <Switch> is controlled.'\n );\n }\n }\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n if (groupState) {\n if (!groupState.value.includes(value as string)) {\n groupState.addValue(value as string);\n } else {\n groupState.removeValue(value as string);\n }\n }\n\n if (isControlled) {\n onChange?.(!propsIsSelected, value, name, event, groupState!);\n } else {\n setSelected(!isSelected);\n onChange?.(!isSelected, value, name, event, groupState!);\n }\n },\n [onChange, groupState, isSelected, propsIsSelected]\n );\n\n return (\n <StyledSwitch\n {...forwardedProps}\n {...transientProps}\n $isColored={isColored}\n $isDisabled={isDisabled}\n $isFocusVisible={isFocusVisible}\n $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n $isRequired={isRequired}\n $isSelected={isSelected || (isControlled && propsIsSelected)}\n $theme={theme}\n className={classNames(Switch.className, className)}\n ref={ref as MutableRefObject<HTMLLabelElement>}\n >\n <div className={`${Switch.className}__slide`}>\n <div className={`${Switch.className}-slide__inner`} />\n <div className={`${Switch.className}-slide__knob-wrapper`}>\n <div className={`${Switch.className}-slide-knob-wrapper__elevation`} />\n <div className={`${Switch.className}-slide-knob-wrapper__knob`} />\n </div>\n </div>\n {children ? <span className=\"label\">{children}</span> : null}\n <input\n {...inputProps}\n {...focusProps}\n aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : 'false'}\n aria-disabled={isDisabled}\n aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-readonly={isReadOnly}\n aria-required={isRequired}\n // eslint-disable-next-line jsx-a11y/no-autofocus -- forwards the consumer's `autoFocus` prop\n autoFocus={autoFocus}\n checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n disabled={isDisabled}\n name={name}\n onChange={handleChange}\n ref={inputRef as MutableRefObject<HTMLInputElement>}\n role=\"switch\"\n type=\"checkbox\"\n // React 18 renders an explicit `value={undefined}` as `value=\"\"` (it sets `defaultValue`), and that is what\n // a checked input submits. React 19 renders nothing, so pass the `''` explicitly on both.\n value={value ?? ''}\n />\n </StyledSwitch>\n );\n});\nSwitch.className = CLASSNAME;\nSwitch.displayName = COMPONENT_NAME;\n"],"names":["StyledSwitch","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isSelected","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","$isFocusVisible","COMPONENT_NAME","CLASSNAME","Switch","forwardRef","props","ref","_isDisabled","_isReadOnly","groupState","useContext","SwitchGroupContext","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","includes","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","addValue","removeValue","React","createElement","_extends","$isRequired","classNames","checked","disabled","role","type","displayName"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs2.js","sources":["../../src/components/tabs/types.ts","../../src/components/tabs/styles.ts","../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, StylingTransientProps, Theme } from '../../types';\n\n/**\n * Component variant.\n */\nexport const TabsVariant = {\n standard: 'standard',\n fullWidth: 'fullWidth',\n centered: 'centered',\n scrollable: 'scrollable',\n} as const;\nexport type TabsVariant = ValueOf<typeof TabsVariant>;\n\n/**\n * Controls the visibility of scroll buttons when `variant` is `\"scrollable\"`.\n * - `\"auto\"` — show only when content overflows, hidden on mobile\n * - `true` — always show scroll buttons (disabled at boundaries)\n * - `false` — never show scroll buttons; user scrolls via native mechanisms\n */\nexport type ScrollButtons = 'auto' | boolean;\n\n/**\n * Component props.\n */\nexport interface TabsProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n /**\n * Default active tab value.\n * Used for uncontrolled version.\n */\n defaultValue?: string;\n /**\n * Active tab value.\n * Used for controlled version.\n */\n value?: string;\n /** Callback fired when the active tab changes. */\n onChange?(value: string): void;\n /**\n * Tabs layout variant.\n * - `standard`: tabs take their natural width\n * - `fullWidth`: tabs stretch to fill the container\n * - `centered`: tabs are centered in the container\n * - `scrollable`: tabs stay on one line and scroll horizontally when they overflow\n * @default 'standard'\n */\n variant?: TabsVariant;\n /**\n * Controls the visibility of scroll buttons when `variant` is `\"scrollable\"`.\n * - `\"auto\"` — show only when content overflows, hidden on mobile\n * - `true` — always show scroll buttons (disabled at boundaries)\n * - `false` — never show scroll buttons; user scrolls via native mechanisms\n * @default 'auto'\n */\n scrollButtons?: ScrollButtons;\n /**\n * Whether selection automatically follows focus when using keyboard navigation.\n * When `true` (default), arrow keys both move focus and activate the tab.\n * When `false`, arrow keys only move focus; the user must press Space or Enter to activate.\n * @default true\n */\n selectionFollowsFocus?: boolean;\n /**\n * Whether to show vertical dividers between tabs.\n * @default false\n */\n showDividers?: boolean;\n /** Theme. */\n theme?: Theme;\n}\n\nexport interface StyledTabsProps extends ComponentProps<'div'>, StylingTransientProps {\n $theme: Theme;\n}\n\nexport interface StyledTabListProps extends ComponentProps<'div'> {\n $showDividers: boolean;\n $theme: Theme;\n $variant: TabsVariant;\n}\n\nexport interface StyledScrollableWrapperProps extends ComponentProps<'div'> {\n $theme: Theme;\n}\n\nexport interface StyledScrollButtonProps extends ComponentProps<'button'> {\n $hidden: boolean;\n $theme: Theme;\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTabsProps, StyledTabListProps, StyledScrollableWrapperProps, StyledScrollButtonProps } from './types';\n\n/**\n * Outer wrapper style.\n */\nexport const StyledTabs = styled.div<StyledTabsProps>`\n ${baseStyling}\n`;\n\n/**\n * Inner tablist style.\n */\nexport const StyledTabList = styled.div<StyledTabListProps>`\n border-bottom: 1px solid var(--redsift-color-${({ $theme }) => $theme}-components-tabs-line);\n display: flex;\n\n ${({ $variant }) =>\n $variant === 'fullWidth' &&\n css`\n > * {\n flex: 1;\n }\n `}\n\n ${({ $variant }) =>\n $variant === 'centered' &&\n css`\n justify-content: center;\n `}\n\n ${({ $variant }) =>\n $variant === 'scrollable' &&\n css`\n border-bottom: none;\n flex: 1;\n flex-wrap: nowrap;\n min-width: 0;\n overflow-x: auto;\n padding-bottom: 1px;\n scroll-behavior: smooth;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n `}\n\n ${({ $showDividers, $theme }) =>\n $showDividers &&\n css`\n > :not(:first-child)::before {\n border-left: 1px solid var(--redsift-color-${$theme}-components-tabs-line);\n content: '';\n height: 50%;\n left: 0;\n position: absolute;\n top: 25%;\n }\n `}\n`;\n\n/**\n * Scrollable wrapper that holds the scroll buttons and the tab list.\n *\n * Uses padding-bottom + overflow:hidden so the tab's `margin-bottom: -1px`\n * overlap trick isn't clipped, while still preventing any vertical scroll.\n * The bottom line is rendered via inset box-shadow (purely visual, no layout\n * impact) so it doesn't interfere with the selected tab's 2px border.\n */\nexport const StyledScrollableWrapper = styled.div<StyledScrollableWrapperProps>`\n align-items: stretch;\n box-shadow: inset 0 -1px 0 var(--redsift-color-${({ $theme }) => $theme}-components-tabs-line);\n display: flex;\n overflow: hidden;\n padding-bottom: 1px;\n position: relative;\n`;\n\n/**\n * Scroll button style.\n */\nexport const StyledScrollButton = styled.button<StyledScrollButtonProps>`\n align-items: center;\n background: none;\n border: none;\n color: var(--redsift-color-${({ $theme }) => $theme}-text-secondary);\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n padding: 0 4px;\n\n &:hover:not(:disabled) {\n color: var(--redsift-color-${({ $theme }) => $theme}-text-primary);\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.3;\n }\n\n ${({ $hidden }) =>\n $hidden &&\n css`\n display: none;\n `}\n`;\n","import React, {\n forwardRef,\n isValidElement,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { mdiChevronLeft, mdiChevronRight } from '@redsift/icons';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { TabsProps, TabsVariant } from './types';\nimport { StyledTabs, StyledTabList, StyledScrollableWrapper, StyledScrollButton } from './styles';\nimport { TabsContext, TabsContextValue } from './context';\nimport { useTheme, ThemeProvider } from '../theme';\nimport { useId } from '../../utils/useId';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'Tabs';\nconst CLASSNAME = 'redsift-tabs';\n\nconst isTabElement = (child: ReactNode): child is ReactElement =>\n isValidElement(child) && (child.type as { displayName?: string })?.displayName === 'Tab';\n\n/** Recursively flatten React.Fragment nodes so child-walk logic sees through fragments. */\nconst flattenFragments = (children: ReactNode): ReactNode[] => {\n const result: ReactNode[] = [];\n\n React.Children.forEach(children, (child) => {\n if (isValidElement(child) && child.type === React.Fragment) {\n result.push(...flattenFragments(child.props.children));\n } else {\n result.push(child);\n }\n });\n\n return result;\n};\n\n/**\n * Tabs organises content into separate views where only one view is visible at a time.\n * Use with `Tab` for the tab buttons and `TabPanel` for the content panels.\n *\n * Supports controlled (`value` + `onChange`) or uncontrolled (`defaultValue`) modes.\n *\n * Place `Tab` and `TabPanel` children inside `Tabs` — tabs render in a tablist,\n * panels render below it.\n *\n * @example\n * // Uncontrolled\n * <Tabs defaultValue=\"one\">\n * <Tab value=\"one\">Tab 1</Tab>\n * <Tab value=\"two\">Tab 2</Tab>\n * <TabPanel value=\"one\">Content 1</TabPanel>\n * <TabPanel value=\"two\">Content 2</TabPanel>\n * </Tabs>\n *\n * @example\n * // Controlled\n * <Tabs value={activeTab} onChange={setActiveTab}>\n * <Tab value=\"one\">Tab 1</Tab>\n * <Tab value=\"two\">Tab 2</Tab>\n * <TabPanel value=\"one\">Content 1</TabPanel>\n * <TabPanel value=\"two\">Content 2</TabPanel>\n * </Tabs>\n */\nexport const Tabs: Comp<TabsProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { transientProps, otherProps } = getStylingTransientProps(props);\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n children,\n className,\n defaultValue,\n onChange,\n scrollButtons = 'auto',\n selectionFollowsFocus = true,\n showDividers = false,\n theme: propsTheme,\n value: propsValue,\n variant = TabsVariant.standard,\n ...forwardedProps\n } = otherProps;\n\n const theme = useTheme(propsTheme);\n const [idPrefix] = useId(1, 'redsift-tabs');\n const isControlled = propsValue !== undefined;\n\n // Recursively flatten fragments so Tab elements wrapped in <> </> are still found\n const flatChildren = flattenFragments(children);\n\n // Detect navigation mode: if the first Tab has an `as` prop or `href`, treat as nav tabs\n const isNavigation = useMemo(() => {\n for (const child of flatChildren) {\n if (isTabElement(child)) {\n return !!(child.props.as || child.props.href);\n }\n }\n return false;\n }, [flatChildren]);\n\n const [internalValue, setInternalValue] = useState<string | undefined>(() => {\n if (defaultValue !== undefined) {\n return defaultValue;\n }\n\n // Default to the first enabled tab\n for (const child of flatChildren) {\n if (isTabElement(child) && !child.props.isDisabled) {\n return child.props.value as string;\n }\n }\n\n return undefined;\n });\n\n const activeValue = isControlled ? propsValue : internalValue;\n const tablistRef = useRef<HTMLDivElement>(null);\n\n const isScrollable = variant === TabsVariant.scrollable;\n const showScrollButtons = isScrollable && scrollButtons !== false;\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n\n const updateScrollState = useCallback(() => {\n const el = tablistRef.current;\n if (!el) return;\n const tolerance = 1;\n setCanScrollLeft(el.scrollLeft > tolerance);\n setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - tolerance);\n }, []);\n\n useEffect(() => {\n if (!isScrollable) return;\n const el = tablistRef.current;\n if (!el) return;\n\n updateScrollState();\n\n el.addEventListener('scroll', updateScrollState, { passive: true });\n\n let observer: ResizeObserver | undefined;\n if (typeof ResizeObserver !== 'undefined') {\n observer = new ResizeObserver(updateScrollState);\n observer.observe(el);\n }\n\n return () => {\n el.removeEventListener('scroll', updateScrollState);\n observer?.disconnect();\n };\n }, [isScrollable, updateScrollState]);\n\n const scrollBy = useCallback((direction: 1 | -1) => {\n const el = tablistRef.current;\n if (!el) return;\n el.scrollBy({ left: direction * el.clientWidth * 0.8, behavior: 'smooth' });\n }, []);\n\n const onSelect = useCallback(\n (value: string) => {\n if (!isControlled) {\n setInternalValue(value);\n }\n onChange?.(value);\n },\n [isControlled, onChange]\n );\n\n const contextValue = useMemo<TabsContextValue>(\n () => ({ activeValue, idPrefix, isNavigation, selectionFollowsFocus, onSelect }),\n [activeValue, idPrefix, isNavigation, onSelect, selectionFollowsFocus]\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const tablist = tablistRef.current;\n if (!tablist) return;\n\n const selector = isNavigation ? 'a:not([aria-disabled=\"true\"])' : '[role=\"tab\"]:not([disabled])';\n const tabs = Array.from(tablist.querySelectorAll<HTMLElement>(selector));\n const currentIndex = tabs.findIndex((tab) => tab === document.activeElement);\n\n if (currentIndex === -1) return;\n\n let nextIndex: number | undefined;\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = (currentIndex + 1) % tabs.length;\n break;\n case 'ArrowLeft':\n nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = tabs.length - 1;\n break;\n case ' ':\n case 'Enter':\n if (!selectionFollowsFocus) {\n tabs[currentIndex].click();\n }\n return;\n default:\n return;\n }\n\n event.preventDefault();\n tabs[nextIndex].focus();\n\n if (selectionFollowsFocus) {\n tabs[nextIndex].click();\n }\n },\n [isNavigation, selectionFollowsFocus]\n );\n\n const tabChildren: ReactNode[] = [];\n const otherChildren: ReactNode[] = [];\n\n for (const child of flatChildren) {\n if (isTabElement(child)) {\n tabChildren.push(child);\n } else {\n otherChildren.push(child);\n }\n }\n\n const tabList = (\n <StyledTabList\n $showDividers={showDividers}\n $theme={theme}\n $variant={variant}\n aria-label={isNavigation ? undefined : ariaLabel}\n aria-labelledby={isNavigation ? undefined : ariaLabelledBy}\n onKeyDown={handleKeyDown}\n ref={tablistRef}\n role={isNavigation ? undefined : 'tablist'}\n >\n {tabChildren}\n </StyledTabList>\n );\n\n const hideAutoButtons = scrollButtons === 'auto' && !canScrollLeft && !canScrollRight;\n\n const scrollableTabList = isScrollable ? (\n <StyledScrollableWrapper $theme={theme}>\n {showScrollButtons && (\n <StyledScrollButton\n $hidden={hideAutoButtons}\n $theme={theme}\n aria-label=\"Scroll tabs left\"\n disabled={!canScrollLeft}\n onClick={() => scrollBy(-1)}\n tabIndex={-1}\n type=\"button\"\n >\n <Icon icon={mdiChevronLeft} size=\"small\" />\n </StyledScrollButton>\n )}\n {tabList}\n {showScrollButtons && (\n <StyledScrollButton\n $hidden={hideAutoButtons}\n $theme={theme}\n aria-label=\"Scroll tabs right\"\n disabled={!canScrollRight}\n onClick={() => scrollBy(1)}\n tabIndex={-1}\n type=\"button\"\n >\n <Icon icon={mdiChevronRight} size=\"small\" />\n </StyledScrollButton>\n )}\n </StyledScrollableWrapper>\n ) : null;\n\n const renderedTabList = scrollableTabList ?? tabList;\n\n return (\n <TabsContext.Provider value={contextValue}>\n <ThemeProvider value={{ theme }}>\n <StyledTabs\n {...forwardedProps}\n {...transientProps}\n $theme={theme}\n className={classNames(Tabs.className, className)}\n ref={ref}\n >\n {isNavigation ? (\n <nav aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>\n {renderedTabList}\n </nav>\n ) : (\n renderedTabList\n )}\n {otherChildren}\n </StyledTabs>\n </ThemeProvider>\n </TabsContext.Provider>\n );\n});\n\nTabs.className = CLASSNAME;\nTabs.displayName = COMPONENT_NAME;\n"],"names":["TabsVariant","standard","fullWidth","centered","scrollable","StyledTabs","styled","div","baseStyling","StyledTabList","_ref","$theme","_ref2","$variant","css","_ref3","_ref4","_ref5","$showDividers","StyledScrollableWrapper","_ref6","StyledScrollButton","button","_ref7","_ref8","_ref9","$hidden","COMPONENT_NAME","CLASSNAME","isTabElement","child","_child$type","isValidElement","type","displayName","flattenFragments","children","result","React","Children","forEach","Fragment","push","props","Tabs","forwardRef","ref","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledBy","className","defaultValue","onChange","scrollButtons","selectionFollowsFocus","showDividers","theme","propsTheme","value","propsValue","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","idPrefix","useId","isControlled","undefined","flatChildren","isNavigation","useMemo","as","href","internalValue","setInternalValue","useState","isDisabled","activeValue","tablistRef","useRef","isScrollable","showScrollButtons","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","updateScrollState","useCallback","el","current","tolerance","scrollLeft","clientWidth","scrollWidth","useEffect","addEventListener","passive","observer","ResizeObserver","observe","_observer","removeEventListener","disconnect","scrollBy","direction","left","behavior","onSelect","contextValue","handleKeyDown","event","tablist","selector","tabs","Array","from","querySelectorAll","currentIndex","findIndex","tab","document","activeElement","nextIndex","key","length","click","preventDefault","focus","tabChildren","otherChildren","tabList","createElement","onKeyDown","role","hideAutoButtons","scrollableTabList","disabled","onClick","tabIndex","Icon","icon","mdiChevronLeft","size","mdiChevronRight","renderedTabList","TabsContext","Provider","ThemeProvider","_extends","classNames"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs2.js","sources":["../../src/components/tabs/types.ts","../../src/components/tabs/styles.ts","../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, StylingTransientProps, Theme } from '../../types';\n\n/**\n * Component variant.\n */\nexport const TabsVariant = {\n standard: 'standard',\n fullWidth: 'fullWidth',\n centered: 'centered',\n scrollable: 'scrollable',\n} as const;\nexport type TabsVariant = ValueOf<typeof TabsVariant>;\n\n/**\n * Controls the visibility of scroll buttons when `variant` is `\"scrollable\"`.\n * - `\"auto\"` — show only when content overflows, hidden on mobile\n * - `true` — always show scroll buttons (disabled at boundaries)\n * - `false` — never show scroll buttons; user scrolls via native mechanisms\n */\nexport type ScrollButtons = 'auto' | boolean;\n\n/**\n * Component props.\n */\nexport interface TabsProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n /**\n * Default active tab value.\n * Used for uncontrolled version.\n */\n defaultValue?: string;\n /**\n * Active tab value.\n * Used for controlled version.\n */\n value?: string;\n /** Callback fired when the active tab changes. */\n onChange?(value: string): void;\n /**\n * Tabs layout variant.\n * - `standard`: tabs take their natural width\n * - `fullWidth`: tabs stretch to fill the container\n * - `centered`: tabs are centered in the container\n * - `scrollable`: tabs stay on one line and scroll horizontally when they overflow\n * @default 'standard'\n */\n variant?: TabsVariant;\n /**\n * Controls the visibility of scroll buttons when `variant` is `\"scrollable\"`.\n * - `\"auto\"` — show only when content overflows, hidden on mobile\n * - `true` — always show scroll buttons (disabled at boundaries)\n * - `false` — never show scroll buttons; user scrolls via native mechanisms\n * @default 'auto'\n */\n scrollButtons?: ScrollButtons;\n /**\n * Whether selection automatically follows focus when using keyboard navigation.\n * When `true` (default), arrow keys both move focus and activate the tab.\n * When `false`, arrow keys only move focus; the user must press Space or Enter to activate.\n * @default true\n */\n selectionFollowsFocus?: boolean;\n /**\n * Whether to show vertical dividers between tabs.\n * @default false\n */\n showDividers?: boolean;\n /** Theme. */\n theme?: Theme;\n}\n\nexport interface StyledTabsProps extends ComponentProps<'div'>, StylingTransientProps {\n $theme: Theme;\n}\n\nexport interface StyledTabListProps extends ComponentProps<'div'> {\n $showDividers: boolean;\n $theme: Theme;\n $variant: TabsVariant;\n}\n\nexport interface StyledScrollableWrapperProps extends ComponentProps<'div'> {\n $theme: Theme;\n}\n\nexport interface StyledScrollButtonProps extends ComponentProps<'button'> {\n $hidden: boolean;\n $theme: Theme;\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTabsProps, StyledTabListProps, StyledScrollableWrapperProps, StyledScrollButtonProps } from './types';\n\n/**\n * Outer wrapper style.\n */\nexport const StyledTabs = styled.div<StyledTabsProps>`\n ${baseStyling}\n`;\n\n/**\n * Inner tablist style.\n */\nexport const StyledTabList = styled.div<StyledTabListProps>`\n border-bottom: 1px solid var(--redsift-color-${({ $theme }) => $theme}-components-tabs-line);\n display: flex;\n\n ${({ $variant }) =>\n $variant === 'fullWidth' &&\n css`\n > * {\n flex: 1;\n }\n `}\n\n ${({ $variant }) =>\n $variant === 'centered' &&\n css`\n justify-content: center;\n `}\n\n ${({ $variant }) =>\n $variant === 'scrollable' &&\n css`\n border-bottom: none;\n flex: 1;\n flex-wrap: nowrap;\n min-width: 0;\n overflow-x: auto;\n padding-bottom: 1px;\n scroll-behavior: smooth;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n `}\n\n ${({ $showDividers, $theme }) =>\n $showDividers &&\n css`\n > :not(:first-child)::before {\n border-left: 1px solid var(--redsift-color-${$theme}-components-tabs-line);\n content: '';\n height: 50%;\n left: 0;\n position: absolute;\n top: 25%;\n }\n `}\n`;\n\n/**\n * Scrollable wrapper that holds the scroll buttons and the tab list.\n *\n * Uses padding-bottom + overflow:hidden so the tab's `margin-bottom: -1px`\n * overlap trick isn't clipped, while still preventing any vertical scroll.\n * The bottom line is rendered via inset box-shadow (purely visual, no layout\n * impact) so it doesn't interfere with the selected tab's 2px border.\n */\nexport const StyledScrollableWrapper = styled.div<StyledScrollableWrapperProps>`\n align-items: stretch;\n box-shadow: inset 0 -1px 0 var(--redsift-color-${({ $theme }) => $theme}-components-tabs-line);\n display: flex;\n overflow: hidden;\n padding-bottom: 1px;\n position: relative;\n`;\n\n/**\n * Scroll button style.\n */\nexport const StyledScrollButton = styled.button<StyledScrollButtonProps>`\n align-items: center;\n background: none;\n border: none;\n color: var(--redsift-color-${({ $theme }) => $theme}-text-secondary);\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n padding: 0 4px;\n\n &:hover:not(:disabled) {\n color: var(--redsift-color-${({ $theme }) => $theme}-text-primary);\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.3;\n }\n\n ${({ $hidden }) =>\n $hidden &&\n css`\n display: none;\n `}\n`;\n","import React, {\n forwardRef,\n isValidElement,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { mdiChevronLeft, mdiChevronRight } from '@redsift/icons';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { TabsProps, TabsVariant } from './types';\nimport type { TabProps } from '../tab';\nimport { StyledTabs, StyledTabList, StyledScrollableWrapper, StyledScrollButton } from './styles';\nimport { TabsContext, TabsContextValue } from './context';\nimport { useTheme, ThemeProvider } from '../theme';\nimport { useId } from '../../utils/useId';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'Tabs';\nconst CLASSNAME = 'redsift-tabs';\n\nconst isTabElement = (child: ReactNode): child is ReactElement<TabProps> =>\n isValidElement(child) && (child.type as { displayName?: string })?.displayName === 'Tab';\n\n/** Recursively flatten React.Fragment nodes so child-walk logic sees through fragments. */\nconst flattenFragments = (children: ReactNode): ReactNode[] => {\n const result: ReactNode[] = [];\n\n React.Children.forEach(children, (child) => {\n if (isValidElement<{ children?: ReactNode }>(child) && child.type === React.Fragment) {\n result.push(...flattenFragments(child.props.children));\n } else {\n result.push(child);\n }\n });\n\n return result;\n};\n\n/**\n * Tabs organises content into separate views where only one view is visible at a time.\n * Use with `Tab` for the tab buttons and `TabPanel` for the content panels.\n *\n * Supports controlled (`value` + `onChange`) or uncontrolled (`defaultValue`) modes.\n *\n * Place `Tab` and `TabPanel` children inside `Tabs` — tabs render in a tablist,\n * panels render below it.\n *\n * @example\n * // Uncontrolled\n * <Tabs defaultValue=\"one\">\n * <Tab value=\"one\">Tab 1</Tab>\n * <Tab value=\"two\">Tab 2</Tab>\n * <TabPanel value=\"one\">Content 1</TabPanel>\n * <TabPanel value=\"two\">Content 2</TabPanel>\n * </Tabs>\n *\n * @example\n * // Controlled\n * <Tabs value={activeTab} onChange={setActiveTab}>\n * <Tab value=\"one\">Tab 1</Tab>\n * <Tab value=\"two\">Tab 2</Tab>\n * <TabPanel value=\"one\">Content 1</TabPanel>\n * <TabPanel value=\"two\">Content 2</TabPanel>\n * </Tabs>\n */\nexport const Tabs: Comp<TabsProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { transientProps, otherProps } = getStylingTransientProps(props);\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n children,\n className,\n defaultValue,\n onChange,\n scrollButtons = 'auto',\n selectionFollowsFocus = true,\n showDividers = false,\n theme: propsTheme,\n value: propsValue,\n variant = TabsVariant.standard,\n ...forwardedProps\n } = otherProps;\n\n const theme = useTheme(propsTheme);\n const [idPrefix] = useId(1, 'redsift-tabs');\n const isControlled = propsValue !== undefined;\n\n // Recursively flatten fragments so Tab elements wrapped in <> </> are still found\n const flatChildren = flattenFragments(children);\n\n // Detect navigation mode: if the first Tab has an `as` prop or `href`, treat as nav tabs\n const isNavigation = useMemo(() => {\n for (const child of flatChildren) {\n if (isTabElement(child)) {\n return !!(child.props.as || child.props.href);\n }\n }\n return false;\n }, [flatChildren]);\n\n const [internalValue, setInternalValue] = useState<string | undefined>(() => {\n if (defaultValue !== undefined) {\n return defaultValue;\n }\n\n // Default to the first enabled tab\n for (const child of flatChildren) {\n if (isTabElement(child) && !child.props.isDisabled) {\n return child.props.value as string;\n }\n }\n\n return undefined;\n });\n\n const activeValue = isControlled ? propsValue : internalValue;\n const tablistRef = useRef<HTMLDivElement>(null);\n\n const isScrollable = variant === TabsVariant.scrollable;\n const showScrollButtons = isScrollable && scrollButtons !== false;\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n\n const updateScrollState = useCallback(() => {\n const el = tablistRef.current;\n if (!el) return;\n const tolerance = 1;\n setCanScrollLeft(el.scrollLeft > tolerance);\n setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - tolerance);\n }, []);\n\n useEffect(() => {\n if (!isScrollable) return;\n const el = tablistRef.current;\n if (!el) return;\n\n updateScrollState();\n\n el.addEventListener('scroll', updateScrollState, { passive: true });\n\n let observer: ResizeObserver | undefined;\n if (typeof ResizeObserver !== 'undefined') {\n observer = new ResizeObserver(updateScrollState);\n observer.observe(el);\n }\n\n return () => {\n el.removeEventListener('scroll', updateScrollState);\n observer?.disconnect();\n };\n }, [isScrollable, updateScrollState]);\n\n const scrollBy = useCallback((direction: 1 | -1) => {\n const el = tablistRef.current;\n if (!el) return;\n el.scrollBy({ left: direction * el.clientWidth * 0.8, behavior: 'smooth' });\n }, []);\n\n const onSelect = useCallback(\n (value: string) => {\n if (!isControlled) {\n setInternalValue(value);\n }\n onChange?.(value);\n },\n [isControlled, onChange]\n );\n\n const contextValue = useMemo<TabsContextValue>(\n () => ({ activeValue, idPrefix, isNavigation, selectionFollowsFocus, onSelect }),\n [activeValue, idPrefix, isNavigation, onSelect, selectionFollowsFocus]\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const tablist = tablistRef.current;\n if (!tablist) return;\n\n const selector = isNavigation ? 'a:not([aria-disabled=\"true\"])' : '[role=\"tab\"]:not([disabled])';\n const tabs = Array.from(tablist.querySelectorAll<HTMLElement>(selector));\n const currentIndex = tabs.findIndex((tab) => tab === document.activeElement);\n\n if (currentIndex === -1) return;\n\n let nextIndex: number | undefined;\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = (currentIndex + 1) % tabs.length;\n break;\n case 'ArrowLeft':\n nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = tabs.length - 1;\n break;\n case ' ':\n case 'Enter':\n if (!selectionFollowsFocus) {\n tabs[currentIndex].click();\n }\n return;\n default:\n return;\n }\n\n event.preventDefault();\n tabs[nextIndex].focus();\n\n if (selectionFollowsFocus) {\n tabs[nextIndex].click();\n }\n },\n [isNavigation, selectionFollowsFocus]\n );\n\n const tabChildren: ReactNode[] = [];\n const otherChildren: ReactNode[] = [];\n\n for (const child of flatChildren) {\n if (isTabElement(child)) {\n tabChildren.push(child);\n } else {\n otherChildren.push(child);\n }\n }\n\n const tabList = (\n <StyledTabList\n $showDividers={showDividers}\n $theme={theme}\n $variant={variant}\n aria-label={isNavigation ? undefined : ariaLabel}\n aria-labelledby={isNavigation ? undefined : ariaLabelledBy}\n onKeyDown={handleKeyDown}\n ref={tablistRef}\n role={isNavigation ? undefined : 'tablist'}\n >\n {tabChildren}\n </StyledTabList>\n );\n\n const hideAutoButtons = scrollButtons === 'auto' && !canScrollLeft && !canScrollRight;\n\n const scrollableTabList = isScrollable ? (\n <StyledScrollableWrapper $theme={theme}>\n {showScrollButtons && (\n <StyledScrollButton\n $hidden={hideAutoButtons}\n $theme={theme}\n aria-label=\"Scroll tabs left\"\n disabled={!canScrollLeft}\n onClick={() => scrollBy(-1)}\n tabIndex={-1}\n type=\"button\"\n >\n <Icon icon={mdiChevronLeft} size=\"small\" />\n </StyledScrollButton>\n )}\n {tabList}\n {showScrollButtons && (\n <StyledScrollButton\n $hidden={hideAutoButtons}\n $theme={theme}\n aria-label=\"Scroll tabs right\"\n disabled={!canScrollRight}\n onClick={() => scrollBy(1)}\n tabIndex={-1}\n type=\"button\"\n >\n <Icon icon={mdiChevronRight} size=\"small\" />\n </StyledScrollButton>\n )}\n </StyledScrollableWrapper>\n ) : null;\n\n const renderedTabList = scrollableTabList ?? tabList;\n\n return (\n <TabsContext.Provider value={contextValue}>\n <ThemeProvider value={{ theme }}>\n <StyledTabs\n {...forwardedProps}\n {...transientProps}\n $theme={theme}\n className={classNames(Tabs.className, className)}\n ref={ref}\n >\n {isNavigation ? (\n <nav aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>\n {renderedTabList}\n </nav>\n ) : (\n renderedTabList\n )}\n {otherChildren}\n </StyledTabs>\n </ThemeProvider>\n </TabsContext.Provider>\n );\n});\n\nTabs.className = CLASSNAME;\nTabs.displayName = COMPONENT_NAME;\n"],"names":["TabsVariant","standard","fullWidth","centered","scrollable","StyledTabs","styled","div","baseStyling","StyledTabList","_ref","$theme","_ref2","$variant","css","_ref3","_ref4","_ref5","$showDividers","StyledScrollableWrapper","_ref6","StyledScrollButton","button","_ref7","_ref8","_ref9","$hidden","COMPONENT_NAME","CLASSNAME","isTabElement","child","_child$type","isValidElement","type","displayName","flattenFragments","children","result","React","Children","forEach","Fragment","push","props","Tabs","forwardRef","ref","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledBy","className","defaultValue","onChange","scrollButtons","selectionFollowsFocus","showDividers","theme","propsTheme","value","propsValue","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","idPrefix","useId","isControlled","undefined","flatChildren","isNavigation","useMemo","as","href","internalValue","setInternalValue","useState","isDisabled","activeValue","tablistRef","useRef","isScrollable","showScrollButtons","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","updateScrollState","useCallback","el","current","tolerance","scrollLeft","clientWidth","scrollWidth","useEffect","addEventListener","passive","observer","ResizeObserver","observe","_observer","removeEventListener","disconnect","scrollBy","direction","left","behavior","onSelect","contextValue","handleKeyDown","event","tablist","selector","tabs","Array","from","querySelectorAll","currentIndex","findIndex","tab","document","activeElement","nextIndex","key","length","click","preventDefault","focus","tabChildren","otherChildren","tabList","createElement","onKeyDown","role","hideAutoButtons","scrollableTabList","disabled","onClick","tabIndex","Icon","icon","mdiChevronLeft","size","mdiChevronRight","renderedTabList","TabsContext","Provider","ThemeProvider","_extends","classNames"],"mappings":"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"}
@@ -61,6 +61,7 @@ const TextAreaVariant = {
61
61
  * Component props.
62
62
  */
63
63
 
64
+ /* eslint-disable @redsift/ds/no-outline-none-without-indicator -- the input's own outline is replaced by the field's border, which turns the focus colour through $isFocused */
64
65
  /**
65
66
  * Component style.
66
67
  */
@@ -326,6 +327,7 @@ const StyledTextArea = styled.div`
326
327
  `;
327
328
  }}
328
329
  `;
330
+ /* eslint-enable @redsift/ds/no-outline-none-without-indicator */
329
331
 
330
332
  /**
331
333
  * Resolves background color from prop value.
@@ -615,7 +617,9 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
615
617
  "aria-label": ariaLabel,
616
618
  "aria-labelledby": ariaLabelledby || (label ? labelId : undefined),
617
619
  "aria-readonly": isReadOnly,
618
- "aria-required": isRequired,
620
+ "aria-required": isRequired
621
+ // eslint-disable-next-line jsx-a11y/no-autofocus -- forwards the consumer's `autoFocus` prop
622
+ ,
619
623
  autoFocus: autoFocus,
620
624
  disabled: isDisabled,
621
625
  name: name,