@fluentui/react-button 9.8.2 → 9.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -2
- package/dist/index.d.ts +41 -7
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.js +0 -1
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +0 -1
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.js +0 -1
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.js +2 -3
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +58 -2
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js +51 -4
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
- package/lib/contexts/ButtonContext.js +4 -2
- package/lib/contexts/ButtonContext.js.map +1 -1
- package/lib/index.js +2 -7
- package/lib/index.js.map +1 -1
- package/lib/utils/useToggleState.js +2 -1
- package/lib/utils/useToggleState.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.js +0 -2
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +0 -2
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +0 -2
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +2 -4
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +116 -3
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js +48 -4
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/contexts/ButtonContext.js.map +1 -1
- package/lib-commonjs/index.js +6 -5
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/useToggleState.js +2 -1
- package/lib-commonjs/utils/useToggleState.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n },\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n iconCheckedStyles.highContrast,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n // Appearance variations\n outline: {\n // There's no longer a reason to thicken the outline variant's border\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n primary: {\n // primary has an inner stroke for the checked style\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n\n // need to not have the default focus style that removes the outline\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`,\n }),\n },\n\n subtle: {\n // override subtle-appearance-specific icon color on hover\n ':hover': {\n [`& .${toggleButtonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n\n transparent: {\n /* No styles */\n },\n\n secondary: {\n /* No styles */\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations with isAccessible=false\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n },\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const rootCheckedStyles = useRootCheckedStyles();\n const accessibleCheckedStyles = useCheckedAccessibleStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Opt-in accessible checked styles\n isAccessible && checked && accessibleCheckedStyles.base,\n isAccessible && appearance && checked && accessibleCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n checked &&\n !isAccessible &&\n (appearance === 'subtle' || appearance === 'transparent') &&\n iconCheckedStyles.subtleOrTransparent,\n iconCheckedStyles.highContrast,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}
|
|
@@ -3,12 +3,14 @@ import * as React from 'react';
|
|
|
3
3
|
const buttonContext = React.createContext(undefined);
|
|
4
4
|
const buttonContextDefaultValue = {};
|
|
5
5
|
/**
|
|
6
|
-
* @internal
|
|
7
6
|
* Internal context provider used to update default values between internal components
|
|
7
|
+
*
|
|
8
|
+
* @internal
|
|
8
9
|
*/ export const ButtonContextProvider = buttonContext.Provider;
|
|
9
10
|
/**
|
|
10
|
-
* @internal
|
|
11
11
|
* Internal context hook used to update default values between internal components
|
|
12
|
+
*
|
|
13
|
+
* @internal
|
|
12
14
|
*/ export const useButtonContext = ()=>{
|
|
13
15
|
var _React_useContext;
|
|
14
16
|
return (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * Internal context value used to update default values between internal components\n *\n * @internal\n */\nexport interface ButtonContextValue {\n size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * Internal context provider used to update default values between internal components\n *\n * @internal\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * Internal context hook used to update default values between internal components\n *\n * @internal\n */\nexport const useButtonContext = (): ButtonContextValue => {\n return React.useContext(buttonContext) ?? buttonContextDefaultValue;\n};\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAW1E,MAAMC,4BAAgD,CAAC;AAEvD;;;;CAIC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB;QACvBP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;AAC5C,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
|
|
1
|
+
export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from './Button';
|
|
2
2
|
export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
|
|
3
3
|
export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
|
|
4
4
|
export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
|
|
5
|
-
export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
|
|
5
|
+
export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from './ToggleButton';
|
|
6
6
|
export { useToggleState } from './utils/index';
|
|
7
7
|
export { ButtonContextProvider, useButtonContext } from './contexts/index';
|
|
8
|
-
// Experimental APIs - will be uncommented in the experimental release branch
|
|
9
|
-
// export { useButtonBase_unstable } from './Button';
|
|
10
|
-
// export type { ButtonBaseProps, ButtonBaseState } from './Button';
|
|
11
|
-
// export { useToggleButtonBase_unstable } from './ToggleButton';
|
|
12
|
-
// export type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n ToggleButtonProps,\n ToggleButtonState,\n ToggleButtonBaseProps,\n ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB;AAQxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
|
|
4
4
|
export function useToggleState(props, state) {
|
|
5
|
-
const { checked, defaultChecked, disabled, disabledFocusable } = props;
|
|
5
|
+
const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;
|
|
6
6
|
const { onClick, role } = state.root;
|
|
7
7
|
const [checkedValue, setCheckedValue] = useControllableState({
|
|
8
8
|
state: checked,
|
|
@@ -26,6 +26,7 @@ export function useToggleState(props, state) {
|
|
|
26
26
|
return {
|
|
27
27
|
...state,
|
|
28
28
|
checked: checkedValue,
|
|
29
|
+
isAccessible,
|
|
29
30
|
root: {
|
|
30
31
|
...state.root,
|
|
31
32
|
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick
|
|
1
|
+
{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<\n ToggleButtonProps,\n 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable' | 'isAccessible'\n >,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root' | 'isAccessible'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n isAccessible,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","isAccessible","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAInG,OAAO,SAASC,eAOdC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,eAAe,KAAK,EAAE,GAAGN;IACvF,MAAM,EAAEO,OAAO,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGd,qBAAqB;QAC3DI,OAAOC;QACPU,cAAcT;QACdU,cAAc;IAChB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBpB,MAAMqB,WAAW,CACrC,CAACC;QACC,IAAI,CAACb,YAAY,CAACC,mBAAmB;YACnC,IAAIY,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAP,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcN;QAAUC;QAAmBM;KAAgB;IAG9D,OAAO;QACL,GAAGV,KAAK;QAERC,SAASQ;QAETJ;QAEAG,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,CAACK,qBAAqB,iBAAiB,eAAe,EAAEJ;YACxDH,SAAST,iBACPF,eAAeW,SAA2EQ;QAE9F;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { ButtonSlots,
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { ButtonSlots, ButtonBaseState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonBaseState): JSXElement => {\n assertSlots<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;AAQjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAG5D,EAAE"}
|
|
@@ -17,8 +17,6 @@ _export(exports, {
|
|
|
17
17
|
return useButton_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
20
|
const _ButtonContext = require("../../contexts/ButtonContext");
|
|
23
21
|
const _reactaria = require("@fluentui/react-aria");
|
|
24
22
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { ARIAButtonSlotProps
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n const state = useButtonBase_unstable(buttonProps, ref);\n\n return {\n appearance,\n shape,\n size,\n ...state,\n };\n};\n\n/**\n * Base hook for Button component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButtonBase_unstable = (\n props: ButtonBaseProps,\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n const { icon, iconPosition = 'before', ...buttonProps } = props;\n const iconShorthand = slot.optional(icon, { elementType: 'span' });\n\n return {\n disabled: props.disabled ?? false,\n disabledFocusable: props.disabledFocusable ?? false,\n iconPosition,\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n components: { root: 'button', icon: 'span' },\n root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: props.as !== 'a' ? 'button' : undefined,\n },\n }),\n icon: iconShorthand,\n };\n};\n"],"names":["useButtonContext","useARIAButtonProps","slot","useButton_unstable","props","ref","size","contextSize","appearance","shape","buttonProps","state","useButtonBase_unstable","icon","iconPosition","iconShorthand","optional","elementType","disabled","disabledFocusable","iconOnly","Boolean","children","components","root","always","as","defaultProps","type","undefined"],"mappings":"AAAA;;;;;;;;;;;;0BAoCaY;eAAAA;;sBAtBAT;;;;+BAXoB,+BAA+B;2BAE7B,uBAAuB;gCACrC,4BAA4B;AAQ1C,MAAMA,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGP,+BAAAA;IAC9B,MAAM,EAAEQ,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGG,aAAa,GAAGN;IACxG,MAAMO,QAAQC,uBAAuBF,aAAaL;IAElD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGK,KAAK;IACV;AACF,EAAE;AAQK,+BAA+B,CACpCP,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGJ,aAAa,GAAGN;IAC1D,MAAMW,gBAAgBb,oBAAAA,CAAKc,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;QAGpDb,iBACSA;IAFrB,OAAO;QACLc,UAAUd,CAAAA,kBAAAA,MAAMc,QAAAA,AAAQ,MAAA,QAAdd,oBAAAA,KAAAA,IAAAA,kBAAkB;QAC5Be,mBAAmBf,CAAAA,2BAAAA,MAAMe,iBAAAA,AAAiB,MAAA,QAAvBf,6BAAAA,KAAAA,IAAAA,2BAA2B;QAC9CU;QACAM,UAAUC,QAAQN,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeO,QAAAA,AAAQ,KAAI,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMtB,oBAAAA,CAAKuB,MAAM,KAA2BxB,6BAAAA,EAAmBS,YAAYgB,EAAE,EAAEhB,cAAc;YAC3FO,aAAa;YACbU,cAAc;gBACZtB,KAAKA;gBACLuB,MAAMxB,MAAMsB,EAAE,KAAK,MAAM,WAAWG;YACtC;QACF;QACAhB,MAAME;IACR;AACF,EAAE"}
|
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useCompoundButton_unstable", {
|
|
|
9
9
|
return useCompoundButton_unstable;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
13
|
const _index = require("../Button/index");
|
|
16
14
|
const useCompoundButton_unstable = (props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n props: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n const { contentContainer, secondaryContent, ...buttonProps } = props;\n\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(buttonProps, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n props: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n const { contentContainer, secondaryContent, ...buttonProps } = props;\n\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(buttonProps, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"names":["slot","useButton_unstable","useCompoundButton_unstable","props","ref","state","contentContainer","secondaryContent","buttonProps","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;;;;;+BAYaE;;;;;;gCATQ,4BAA4B;uBACd,kBAAkB;AAQ9C,mCAAmC,CACxCC,OACAC;QAoByBC,aAA4CA;IAlBrE,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,aAAa,GAAGL;IAE/D,MAAME,QAA6B;QACjC,eAAe;QACf,OAAGJ,yBAAAA,EAAmBO,aAAaJ,IAAI;QAEvC,mBAAmB;QACnBK,YAAY;YACVC,MAAM;YACNC,MAAM;YACNL,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBN,oBAAAA,CAAKY,MAAM,CAACN,kBAAkB;YAAEO,aAAa;QAAO;QACtEN,kBAAkBP,oBAAAA,CAAKc,QAAQ,CAACP,kBAAkB;YAAEM,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DR,MAAMU,QAAQ,GAAGC,QAAQX,CAAAA,CAAAA,cAAAA,MAAMM,IAAAA,AAAI,MAAA,QAAVN,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYY,QAAAA,AAAQ,KAAI,CAACd,MAAMc,QAAQ,IAAI,CAAA,CAAA,CAACZ,0BAAAA,MAAME,gBAAAA,AAAgB,MAAA,QAAtBF,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBY,QAAAA,AAAQ;IAErG,OAAOZ;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAGlC,kCAAkC;AAMvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAGlC,kCAAkC;AAMvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n /**\n * Root of the component that wraps the primary action button and menu button.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Button that opens menu with secondary actions in SplitButton.\n */\n menuButton?: Slot<typeof MenuButton>;\n /**\n * Button to perform primary action in SplitButton.\n */\n primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n Omit<ButtonProps, 'root' | 'as'> &\n Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import type { Button } from '../Button/Button';\nimport type { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n /**\n * Root of the component that wraps the primary action button and menu button.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Button that opens menu with secondary actions in SplitButton.\n */\n menuButton?: Slot<typeof MenuButton>;\n /**\n * Button to perform primary action in SplitButton.\n */\n primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n Omit<ButtonProps, 'root' | 'as'> &\n Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"mappings":""}
|
|
@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useSplitButton_unstable", {
|
|
|
8
8
|
return useSplitButton_unstable;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
11
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
12
|
const _Button = require("../Button/Button");
|
|
15
13
|
const _MenuButton = require("../MenuButton/MenuButton");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n ...rest\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // Slots definition\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n ...rest\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // Slots definition\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":";;;;+BAWaI;;;;;;gCAVe,4BAA4B;wBACjC,mBAAmB;4BACf,2BAA2B;AAQ/C,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,aAASnB,qBAAAA,EAAM;IAErB,MAAMoB,sBAAsBnB,oBAAAA,CAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB,sBAAAA;IACf;IACA,MAAMsB,+BAA+BxB,oBAAAA,CAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB,cAAAA;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV,sBAAAA;YAAYY,qBAAqBb,cAAAA;QAAO;QAC/E0B,MAAM3B,oBAAAA,CAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonBaseProps = ButtonBaseProps
|
|
1
|
+
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n\n /**\n * Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style\n *\n * @default false\n */\n isAccessible?: boolean;\n};\n\nexport type ToggleButtonBaseProps = ButtonBaseProps &\n Pick<ToggleButtonProps, 'defaultChecked' | 'checked' | 'isAccessible'>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n\nexport type ToggleButtonBaseState = ButtonBaseState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n"],"names":[],"mappings":""}
|
|
@@ -17,17 +17,15 @@ _export(exports, {
|
|
|
17
17
|
return useToggleButton_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
20
|
const _useToggleState = require("../../utils/useToggleState");
|
|
23
21
|
const _useButton = require("../Button/useButton");
|
|
24
22
|
const useToggleButton_unstable = (props, ref)=>{
|
|
25
|
-
const { checked = false, defaultChecked = false, ...buttonProps } = props;
|
|
23
|
+
const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
|
|
26
24
|
const buttonState = (0, _useButton.useButton_unstable)(buttonProps, ref);
|
|
27
25
|
return (0, _useToggleState.useToggleState)(props, buttonState);
|
|
28
26
|
};
|
|
29
27
|
const useToggleButtonBase_unstable = (props, ref)=>{
|
|
30
|
-
const { checked = false, defaultChecked = false, ...buttonProps } = props;
|
|
28
|
+
const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
|
|
31
29
|
const buttonState = (0, _useButton.useButtonBase_unstable)(buttonProps, ref);
|
|
32
30
|
return (0, _useToggleState.useToggleState)(props, buttonState);
|
|
33
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const { checked = false, defaultChecked = false, ...buttonProps } = props;\n const buttonState = useButton_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n props: ToggleButtonProps,\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n const { checked = false, defaultChecked = false, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButton_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n props: ToggleButtonProps,\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;;;;;;;;;;;;IA6BaW,4BAAAA;;;4BAhBAR;;;;gCAVkB,6BAA6B;2BACD,sBAAsB;AAS1E,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcT,6BAAAA,EAAmBQ,aAAaJ;IAEpD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE;AAQK,qCAAqC,CAC1CN,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcR,iCAAAA,EAAuBO,aAAaJ;IAExD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE"}
|
|
@@ -460,6 +460,117 @@ const useRootCheckedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
460
460
|
]
|
|
461
461
|
]
|
|
462
462
|
});
|
|
463
|
+
const useCheckedAccessibleStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
464
|
+
base: {
|
|
465
|
+
De3pzq: "ffp7eso",
|
|
466
|
+
g2u3we: "f1p3nwhy",
|
|
467
|
+
h3c5rm: [
|
|
468
|
+
"f11589ue",
|
|
469
|
+
"f1pdflbu"
|
|
470
|
+
],
|
|
471
|
+
B9xav0g: "f1q5o8ev",
|
|
472
|
+
zhjwy3: [
|
|
473
|
+
"f1pdflbu",
|
|
474
|
+
"f11589ue"
|
|
475
|
+
],
|
|
476
|
+
sj55zd: "f1phragk",
|
|
477
|
+
Jwef8y: "f15wkkf3",
|
|
478
|
+
Bgoe8wy: "f1s2uweq",
|
|
479
|
+
Bwzppfd: [
|
|
480
|
+
"fr80ssc",
|
|
481
|
+
"fecsdlb"
|
|
482
|
+
],
|
|
483
|
+
oetu4i: "f1ukrpxl",
|
|
484
|
+
gg5e9n: [
|
|
485
|
+
"fecsdlb",
|
|
486
|
+
"fr80ssc"
|
|
487
|
+
],
|
|
488
|
+
Bi91k9c: "f1rq72xc",
|
|
489
|
+
Bpjbzib: "f1ksv2xa",
|
|
490
|
+
im15vp: "fhvnf4x",
|
|
491
|
+
Hjvxdg: [
|
|
492
|
+
"fb6swo4",
|
|
493
|
+
"f232fm2"
|
|
494
|
+
],
|
|
495
|
+
Gpfmf1: "f1klyf7k",
|
|
496
|
+
ustxxc: [
|
|
497
|
+
"f232fm2",
|
|
498
|
+
"fb6swo4"
|
|
499
|
+
],
|
|
500
|
+
Brsut9c: "f1d6mv4x"
|
|
501
|
+
},
|
|
502
|
+
outline: {
|
|
503
|
+
B4j52fo: "f192inf7",
|
|
504
|
+
Bekrc4i: [
|
|
505
|
+
"f5tn483",
|
|
506
|
+
"f1ojsxk5"
|
|
507
|
+
],
|
|
508
|
+
Bn0qgzm: "f1vxd6vx",
|
|
509
|
+
ibv6hh: [
|
|
510
|
+
"f1ojsxk5",
|
|
511
|
+
"f5tn483"
|
|
512
|
+
]
|
|
513
|
+
},
|
|
514
|
+
primary: {
|
|
515
|
+
Bw0xxkn: 0,
|
|
516
|
+
oeaueh: 0,
|
|
517
|
+
Bpd4iqm: 0,
|
|
518
|
+
Befb4lg: "f12rpxh0",
|
|
519
|
+
Dhobit: "f10okvgz",
|
|
520
|
+
Bfpq7zp: 0,
|
|
521
|
+
g9k6zt: 0,
|
|
522
|
+
Bn4voq9: 0,
|
|
523
|
+
giviqs: "f40way",
|
|
524
|
+
Bpkdmpa: "ftbw7yw"
|
|
525
|
+
},
|
|
526
|
+
subtle: {
|
|
527
|
+
ysa4qo: "f17xzaca"
|
|
528
|
+
},
|
|
529
|
+
transparent: {},
|
|
530
|
+
secondary: {}
|
|
531
|
+
}, {
|
|
532
|
+
d: [
|
|
533
|
+
".ffp7eso{background-color:var(--colorBrandBackground);}",
|
|
534
|
+
".f1p3nwhy{border-top-color:transparent;}",
|
|
535
|
+
".f11589ue{border-right-color:transparent;}",
|
|
536
|
+
".f1pdflbu{border-left-color:transparent;}",
|
|
537
|
+
".f1q5o8ev{border-bottom-color:transparent;}",
|
|
538
|
+
".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
|
|
539
|
+
".f192inf7{border-top-width:var(--strokeWidthThin);}",
|
|
540
|
+
".f5tn483{border-right-width:var(--strokeWidthThin);}",
|
|
541
|
+
".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
|
|
542
|
+
".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}",
|
|
543
|
+
[
|
|
544
|
+
".f12rpxh0{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}",
|
|
545
|
+
{
|
|
546
|
+
p: -1
|
|
547
|
+
}
|
|
548
|
+
],
|
|
549
|
+
".f10okvgz{outline-offset:calc(var(--strokeWidthThicker) * -1);}",
|
|
550
|
+
[
|
|
551
|
+
".f40way[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}",
|
|
552
|
+
{
|
|
553
|
+
p: -1
|
|
554
|
+
}
|
|
555
|
+
],
|
|
556
|
+
".ftbw7yw[data-fui-focus-visible]{outline-offset:calc(var(--strokeWidthThickest) * -1);}"
|
|
557
|
+
],
|
|
558
|
+
h: [
|
|
559
|
+
".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}",
|
|
560
|
+
".f1s2uweq:hover{border-top-color:transparent;}",
|
|
561
|
+
".fr80ssc:hover{border-right-color:transparent;}",
|
|
562
|
+
".fecsdlb:hover{border-left-color:transparent;}",
|
|
563
|
+
".f1ukrpxl:hover{border-bottom-color:transparent;}",
|
|
564
|
+
".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}",
|
|
565
|
+
".f1ksv2xa:hover:active,.f1ksv2xa:active:focus-visible{background-color:var(--colorBrandBackgroundPressed);}",
|
|
566
|
+
".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}",
|
|
567
|
+
".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}",
|
|
568
|
+
".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}",
|
|
569
|
+
".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}",
|
|
570
|
+
".f1d6mv4x:hover:active,.f1d6mv4x:active:focus-visible{color:var(--colorNeutralForegroundOnBrand);}",
|
|
571
|
+
".f17xzaca:hover .fui-ToggleButton__icon{color:var(--colorNeutralForegroundOnBrand);}"
|
|
572
|
+
]
|
|
573
|
+
});
|
|
463
574
|
const useRootDisabledStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
464
575
|
base: {
|
|
465
576
|
De3pzq: "f1bg9a2p",
|
|
@@ -786,17 +897,19 @@ const usePrimaryHighContrastStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
786
897
|
const useToggleButtonStyles_unstable = (state)=>{
|
|
787
898
|
'use no memo';
|
|
788
899
|
const rootCheckedStyles = useRootCheckedStyles();
|
|
900
|
+
const accessibleCheckedStyles = useCheckedAccessibleStyles();
|
|
789
901
|
const rootDisabledStyles = useRootDisabledStyles();
|
|
790
902
|
const iconCheckedStyles = useIconCheckedStyles();
|
|
791
903
|
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
|
|
792
|
-
const { appearance, checked, disabled, disabledFocusable } = state;
|
|
904
|
+
const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
|
|
793
905
|
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, // Primary high contrast styles
|
|
794
906
|
appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles
|
|
795
|
-
checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], //
|
|
907
|
+
checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles
|
|
908
|
+
isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles
|
|
796
909
|
(disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
|
|
797
910
|
state.root.className);
|
|
798
911
|
if (state.icon) {
|
|
799
|
-
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
|
|
912
|
+
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
|
|
800
913
|
}
|
|
801
914
|
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
|
|
802
915
|
return state;
|