@fluentui/react-spinbutton 9.1.6 → 9.2.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.
- package/CHANGELOG.json +56 -2
- package/CHANGELOG.md +25 -3
- package/lib/components/SpinButton/SpinButton.js +5 -0
- package/lib/components/SpinButton/SpinButton.js.map +1 -1
- package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButtonStyles.js +61 -149
- package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getBound.js.map +1 -1
- package/lib/utils/precision.js.map +1 -1
- package/lib-amd/components/SpinButton/SpinButton.js +3 -1
- package/lib-amd/components/SpinButton/SpinButton.js.map +1 -1
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js +195 -87
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-commonjs/SpinButton.js.map +1 -1
- package/lib-commonjs/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.js +5 -0
- package/lib-commonjs/components/SpinButton/SpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib-commonjs/components/SpinButton/index.js.map +1 -1
- package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +59 -147
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/index.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getBound.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/precision.js.map +1 -1
- package/package.json +5 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","useInputStyles_unstable","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","useRootStyles","useInputStyles","useButtonStyles","useButtonDisabledStyles","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","disabled","invalid","filled","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","rootClassName","className","undefined","components","contentBefore","contentAfter","base","outline","underline","outlineInteractive","underlineInteractive","filledInteractive","incrementButtonSmall","incrementButtonMedium","decrementButtonSmall","decrementButtonMedium"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n paddingRight: 0,\n position: 'relative',\n // Remove the border styles from react-input\n ...shorthands.border('0'),\n isolation: 'isolate',\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since react-input uses that\n // for the selector styles.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n pointerEvents: 'none',\n zIndex: 10,\n },\n\n '::after': {\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n },\n },\n\n small: {\n paddingLeft: tokens.spacingHorizontalS,\n },\n\n // intentionally empty\n medium: {},\n\n outline: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n outlineInteractive: {\n ':hover': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n },\n\n underlineInteractive: {\n ':hover': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n },\n\n disabled: {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n ...shorthands.padding(0),\n },\n});\n\nconst useButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.border(0),\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '100%',\n\n ':enabled:hover': {\n cursor: 'pointer',\n },\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n },\n },\n\n incrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '1',\n gridRowEnd: '2',\n ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n },\n\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '6px', '0px', '4px'),\n },\n\n incrementButtonMedium: {\n ...shorthands.padding('4px', '5px', '1px', '5px'),\n },\n\n decrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '2',\n gridRowEnd: '3',\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n },\n\n decrementButtonMedium: {\n ...shorthands.padding('1px', '5px', '4px', '5px'),\n },\n\n outline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n // Grab the root className here so we can be sure to merge is last\n const rootClassName = state.root.className;\n state.root.className = undefined;\n // Reuse react-input's styles without re-using the Input component.\n useInputStyles_unstable({\n size,\n appearance,\n input: state.input,\n root: state.root,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n });\n\n state.root.className = mergeClasses(\n state.root.className, // Get the classes from useInputStyles_unstable\n spinButtonClassNames.root,\n rootStyles.base,\n rootStyles[size],\n appearance === 'outline' && rootStyles.outline,\n appearance === 'underline' && rootStyles.underline,\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.incrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.decrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","Budzafs","r59vdv","n07z76","ck0cow","underlineInteractive","B3778ie","d9w3h3","Bl18szs","B4j8arr","filled","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Cffpyd","hxi8he","Bcuq369","Imo2if","d","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","Bqenvij","decrementButtonSmall","r4wkhp","B95qlz1","p743kt","B7xitij","B6siaa6","Ba9qmo4","Dyrjrp","drw0cw","idzz8t","useButtonDisabledStyles","base","eoavqd","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n position: 'relative',\n isolation: 'isolate',\n\n backgroundColor: tokens.colorNeutralBackground1,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: tokens.borderRadiusMedium,\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since that is used for selection.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n pointerEvents: 'none',\n zIndex: 10,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusMedium,\n },\n\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: tokens.spacingHorizontalS,\n },\n\n medium: {\n // set by useRootClassName\n },\n\n outline: {\n // set by useRootClassName\n },\n\n outlineInteractive: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded\n },\n },\n\n underlineInteractive: {\n ':hover::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n border: '0',\n padding: '0',\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n});\n\nconst useInputStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n border: '0',\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '16px',\n\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':enabled': {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\nconst useButtonStyles = makeStyles({\n increment: {\n gridRowStart: '1',\n borderTopRightRadius: tokens.borderRadiusMedium,\n paddingTop: '4px',\n paddingBottom: '1px',\n },\n decrement: {\n gridRowStart: '2',\n borderBottomRightRadius: tokens.borderRadiusMedium,\n paddingTop: '1px',\n paddingBottom: '4px',\n },\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '6px', '0px', '4px'),\n height: '12px',\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n height: '12px',\n },\n\n outline: {\n // set by useButtonClassName\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n spinButtonClassNames.root,\n useRootClassName(),\n rootStyles[size],\n rootStyles[appearance],\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.increment,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.incrementButtonSmall,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.decrement,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.decrementButtonSmall,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(\n spinButtonClassNames.input,\n useInputClassName(),\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","SpinButton","spinButtonClassNames","spinButtonFieldClassNames","root","SpinButtonField"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { SpinButton, spinButtonClassNames, SpinButtonProps } from '../../SpinButton';\n\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport type SpinButtonFieldProps = DeprecatedFieldProps<SpinButtonProps>;\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const spinButtonFieldClassNames = getDeprecatedFieldClassNames(spinButtonClassNames.root);\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = makeDeprecatedField(SpinButton);\n"],"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,UAAU,EAAEC,oBAAoB,QAAyB,kBAAkB;AAIpF;AACA,OAAO,MAAMC,yBAAyB,gBAAGJ,4BAA4B,CAACG,oBAAoB,CAACE,IAAI,CAAC;AAChG;AACA,OAAO,MAAMC,eAAe,gBAA8CL,mBAAmB,CAACC,UAAU,CAAC"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable","SpinButtonField","SpinButtonField_unstable","spinButtonFieldClassNames"],"sources":["../src/packages/react-components/react-spinbutton/src/index.ts"],"sourcesContent":["export {\n SpinButton,\n renderSpinButton_unstable,\n spinButtonClassNames,\n useSpinButtonStyles_unstable,\n useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n SpinButtonOnChangeData,\n SpinButtonChangeEvent,\n SpinButtonProps,\n SpinButtonSlots,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonBounds,\n} from './SpinButton';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc;AAWrB;AACA,SAASC,eAAe,IAAIC,wBAAwB,EAAEC,yBAAyB,QAAQ,mBAAmB"}
|
package/lib/utils/clamp.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/clamp.ts"],"sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n let nextValue = value;\n if (min !== undefined) {\n if (max !== undefined && min > max) {\n const error = new Error();\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(\n [\n `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n '\"min\" must be less than or equal to \"max\".',\n `Returning value \"${value}\".`,\n error.stack,\n ].join(),\n );\n }\n return value;\n }\n\n nextValue = Math.max(min, nextValue);\n }\n\n if (max !== undefined) {\n nextValue = Math.min(max, nextValue);\n }\n\n return nextValue;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,KAAK,GAAGA,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAY;EACzE,IAAIC,SAAS,GAAGH,KAAK;EACrB,IAAIC,GAAG,KAAKG,SAAS,EAAE;IACrB,IAAIF,GAAG,KAAKE,SAAS,IAAIH,GAAG,GAAGC,GAAG,EAAE;MAClC,MAAMG,KAAK,GAAG,IAAIC,KAAK,EAAE;MACzB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QACzC;QACAC,OAAO,CAACL,KAAK,CACX,CACE,gBAAgBJ,GAAG,kCAAkCC,GAAG,IAAI,EAC5D,4CAA4C,EAC5C,oBAAoBF,KAAK,IAAI,EAC7BK,KAAK,CAACM,KAAK,CACZ,CAACC,IAAI,EAAE,CACT;;MAEH,OAAOZ,KAAK;;IAGdG,SAAS,GAAGU,IAAI,CAACX,GAAG,CAACD,GAAG,EAAEE,SAAS,CAAC;;EAGtC,IAAID,GAAG,KAAKE,SAAS,EAAE;IACrBD,SAAS,GAAGU,IAAI,CAACZ,GAAG,CAACC,GAAG,EAAEC,SAAS,CAAC;;EAGtC,OAAOA,SAAS;AAClB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["getBound","value","min","max","undefined"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/getBound.ts"],"sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n if (min !== undefined && value === min) {\n if (max === min) {\n return 'both';\n }\n return 'min';\n } else if (max !== undefined && value === max) {\n return 'max';\n }\n\n return 'none';\n};\n"],"mappings":"AAEA,OAAO,MAAMA,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAsB;EACtF,IAAID,GAAG,KAAKE,SAAS,IAAIH,KAAK,KAAKC,GAAG,EAAE;IACtC,IAAIC,GAAG,KAAKD,GAAG,EAAE;MACf,OAAO,MAAM;;IAEf,OAAO,KAAK;GACb,MAAM,IAAIC,GAAG,KAAKC,SAAS,IAAIH,KAAK,KAAKE,GAAG,EAAE;IAC7C,OAAO,KAAK;;EAGd,OAAO,MAAM;AACf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["calculatePrecision","value","groups","exec","String","length","precisionRound","precision","base","exp","Math","pow","round"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/precision.ts"],"sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n /**\n * Group 1:\n * [1-9]([0]+$) matches trailing zeros\n * Group 2:\n * \\.([0-9]*) matches all digits after a decimal point.\n */\n const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n if (!groups) {\n return 0;\n }\n if (groups[1]) {\n return -groups[1].length;\n }\n if (groups[2]) {\n return groups[2].length;\n }\n return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n const exp = Math.pow(base, precision);\n return Math.round(value * exp) / exp;\n}\n"],"mappings":"AAAA;;;;;;;AAOA,OAAM,SAAUA,kBAAkBA,CAACC,KAAsB;EACvD;;;;;;EAMA,MAAMC,MAAM,GAAG,yBAAyB,CAACC,IAAI,CAACC,MAAM,CAACH,KAAK,CAAC,CAAC;EAC5D,IAAI,CAACC,MAAM,EAAE;IACX,OAAO,CAAC;;EAEV,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAO,CAACA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAE1B,IAAIH,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAOA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAEzB,OAAO,CAAC;AACV;AAEA;;;;;AAKA,OAAM,SAAUC,cAAcA,CAACL,KAAa,EAAEM,SAAiB,EAAEC,IAAA,GAAe,EAAE;EAChF,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,IAAI,EAAED,SAAS,CAAC;EACrC,OAAOG,IAAI,CAACE,KAAK,CAACX,KAAK,GAAGQ,GAAG,CAAC,GAAGA,GAAG;AACtC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton", "./useSpinButtonStyles"], function (require, exports, React, useSpinButton_1, renderSpinButton_1, useSpinButtonStyles_1) {
|
|
1
|
+
define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton", "./useSpinButtonStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, useSpinButton_1, renderSpinButton_1, useSpinButtonStyles_1, react_shared_contexts_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.SpinButton = void 0;
|
|
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton",
|
|
|
8
8
|
exports.SpinButton = React.forwardRef(function (props, ref) {
|
|
9
9
|
var state = useSpinButton_1.useSpinButton_unstable(props, ref);
|
|
10
10
|
useSpinButtonStyles_1.useSpinButtonStyles_unstable(state);
|
|
11
|
+
var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useSpinButtonStyles_unstable;
|
|
12
|
+
useCustomStyles(state);
|
|
11
13
|
return renderSpinButton_1.renderSpinButton_unstable(state);
|
|
12
14
|
});
|
|
13
15
|
exports.SpinButton.displayName = 'SpinButton';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QAE5B,IAA8B,eAAe,GAAK,oDAA4B,EAAE,6BAAnC,CAAoC;QACzF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n const state = useSpinButton_unstable(props, ref);\n\n useSpinButtonStyles_unstable(state);\n\n const { useSpinButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
1
|
+
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -12,50 +12,117 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
12
12
|
var spinButtonExtraClassNames = {
|
|
13
13
|
buttonActive: 'fui-SpinButton__button_active',
|
|
14
14
|
};
|
|
15
|
+
var fieldHeights = {
|
|
16
|
+
small: '24px',
|
|
17
|
+
medium: '32px',
|
|
18
|
+
};
|
|
19
|
+
var useRootClassName = react_1.makeResetStyles({
|
|
20
|
+
display: 'inline-grid',
|
|
21
|
+
gridTemplateColumns: "1fr 24px",
|
|
22
|
+
gridTemplateRows: '1fr 1fr',
|
|
23
|
+
columnGap: react_theme_1.tokens.spacingHorizontalXS,
|
|
24
|
+
rowGap: 0,
|
|
25
|
+
position: 'relative',
|
|
26
|
+
isolation: 'isolate',
|
|
27
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
|
|
28
|
+
minHeight: fieldHeights.medium,
|
|
29
|
+
padding: "0 0 0 " + react_theme_1.tokens.spacingHorizontalMNudge,
|
|
30
|
+
borderRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
31
|
+
// Apply border styles on the ::before pseudo element.
|
|
32
|
+
// We cannot use ::after since that is used for selection.
|
|
33
|
+
// Using the pseudo element allows us to place the border
|
|
34
|
+
// above content in the component which ensures the buttons
|
|
35
|
+
// line up visually with the border as expected. Without this
|
|
36
|
+
// there is a bit of a gap which can become very noticeable
|
|
37
|
+
// at high zoom or when OS zoom levels are not divisible by 2
|
|
38
|
+
// (e.g., 150% on Windows in Firefox)
|
|
39
|
+
// This is most noticeable on the "outline" appearance which is
|
|
40
|
+
// also the default so it feels worth the extra ceremony to get right.
|
|
41
|
+
'::before': {
|
|
42
|
+
content: '""',
|
|
43
|
+
boxSizing: 'border-box',
|
|
44
|
+
position: 'absolute',
|
|
45
|
+
top: 0,
|
|
46
|
+
right: 0,
|
|
47
|
+
bottom: 0,
|
|
48
|
+
left: 0,
|
|
49
|
+
pointerEvents: 'none',
|
|
50
|
+
zIndex: 10,
|
|
51
|
+
border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1,
|
|
52
|
+
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
|
|
53
|
+
borderRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
54
|
+
},
|
|
55
|
+
'::after': {
|
|
56
|
+
boxSizing: 'border-box',
|
|
57
|
+
content: '""',
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
right: 0,
|
|
60
|
+
bottom: 0,
|
|
61
|
+
left: 0,
|
|
62
|
+
zIndex: 20,
|
|
63
|
+
// Maintaining the correct corner radius:
|
|
64
|
+
// Use the whole border-radius as the height and only put radii on the bottom corners.
|
|
65
|
+
// (Otherwise the radius would be automatically reduced to fit available space.)
|
|
66
|
+
// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
|
|
67
|
+
height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")",
|
|
68
|
+
borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
69
|
+
borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
70
|
+
// Flat 2px border:
|
|
71
|
+
// By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
|
|
72
|
+
// (This could be done without trimming using `background: linear-gradient(...)`, but using
|
|
73
|
+
// borderBottom makes it easier for people to override the color if needed.)
|
|
74
|
+
borderBottom: "2px solid " + react_theme_1.tokens.colorCompoundBrandStroke,
|
|
75
|
+
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
|
|
76
|
+
// Animation for focus OUT
|
|
77
|
+
transform: 'scaleX(0)',
|
|
78
|
+
transitionProperty: 'transform',
|
|
79
|
+
transitionDuration: react_theme_1.tokens.durationUltraFast,
|
|
80
|
+
transitionDelay: react_theme_1.tokens.curveAccelerateMid,
|
|
81
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
82
|
+
transitionDuration: '0.01ms',
|
|
83
|
+
transitionDelay: '0.01ms',
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
':focus-within::after': {
|
|
87
|
+
// Animation for focus IN
|
|
88
|
+
transform: 'scaleX(1)',
|
|
89
|
+
transitionProperty: 'transform',
|
|
90
|
+
transitionDuration: react_theme_1.tokens.durationNormal,
|
|
91
|
+
transitionDelay: react_theme_1.tokens.curveDecelerateMid,
|
|
92
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
93
|
+
transitionDuration: '0.01ms',
|
|
94
|
+
transitionDelay: '0.01ms',
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
':focus-within:active::after': {
|
|
98
|
+
// This is if the user clicks the field again while it's already focused
|
|
99
|
+
borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
|
|
100
|
+
},
|
|
101
|
+
':focus-within': {
|
|
102
|
+
outline: '2px solid transparent',
|
|
103
|
+
},
|
|
104
|
+
});
|
|
15
105
|
var useRootStyles = react_1.makeStyles({
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
// for the selector styles.
|
|
20
|
-
// Using the pseudo element allows us to place the border
|
|
21
|
-
// above content in the component which ensures the buttons
|
|
22
|
-
// line up visually with the border as expected. Without this
|
|
23
|
-
// there is a bit of a gap which can become very noticeable
|
|
24
|
-
// at high zoom or when OS zoom levels are not divisible by 2
|
|
25
|
-
// (e.g., 150% on Windows in Firefox)
|
|
26
|
-
// This is most noticeable on the "outline" appearance which is
|
|
27
|
-
// also the default so it feels worth the extra ceremony to get right.
|
|
28
|
-
'::before': tslib_1.__assign(tslib_1.__assign({ content: '""', boxSizing: 'border-box', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { pointerEvents: 'none', zIndex: 10 }), '::after': {
|
|
29
|
-
right: 0,
|
|
30
|
-
bottom: 0,
|
|
31
|
-
left: 0,
|
|
32
|
-
zIndex: 20,
|
|
33
|
-
} }),
|
|
34
|
-
small: {
|
|
35
|
-
paddingLeft: react_theme_1.tokens.spacingHorizontalS,
|
|
106
|
+
small: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.small }, react_theme_1.typographyStyles.caption1), { paddingLeft: react_theme_1.tokens.spacingHorizontalS }),
|
|
107
|
+
medium: {
|
|
108
|
+
// set by useRootClassName
|
|
36
109
|
},
|
|
37
|
-
// intentionally empty
|
|
38
|
-
medium: {},
|
|
39
110
|
outline: {
|
|
40
|
-
|
|
111
|
+
// set by useRootClassName
|
|
41
112
|
},
|
|
42
113
|
outlineInteractive: {
|
|
43
|
-
':hover': {
|
|
44
|
-
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
|
|
45
|
-
},
|
|
114
|
+
':hover::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
|
|
46
115
|
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
47
116
|
':active,:focus-within': {
|
|
48
117
|
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
|
|
49
118
|
},
|
|
50
119
|
},
|
|
51
120
|
underline: {
|
|
52
|
-
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.
|
|
121
|
+
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderWidth(0, 0, '1px', 0)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
|
|
53
122
|
},
|
|
54
123
|
underlineInteractive: {
|
|
55
|
-
':hover': {
|
|
56
|
-
|
|
57
|
-
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
|
|
58
|
-
},
|
|
124
|
+
':hover::before': {
|
|
125
|
+
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
|
|
59
126
|
},
|
|
60
127
|
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
61
128
|
':active,:focus-within': {
|
|
@@ -63,10 +130,17 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
63
130
|
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
|
|
64
131
|
},
|
|
65
132
|
},
|
|
133
|
+
'::after': react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone), // remove rounded corners from focus underline
|
|
66
134
|
},
|
|
67
135
|
filled: {
|
|
68
136
|
'::before': tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
|
|
69
137
|
},
|
|
138
|
+
'filled-darker': {
|
|
139
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
|
|
140
|
+
},
|
|
141
|
+
'filled-lighter': {
|
|
142
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
|
|
143
|
+
},
|
|
70
144
|
filledInteractive: {
|
|
71
145
|
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
72
146
|
':hover,:focus-within': {
|
|
@@ -79,53 +153,104 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
79
153
|
},
|
|
80
154
|
},
|
|
81
155
|
disabled: {
|
|
156
|
+
cursor: 'not-allowed',
|
|
157
|
+
backgroundColor: react_theme_1.tokens.colorTransparentBackground,
|
|
82
158
|
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
|
|
83
159
|
},
|
|
84
160
|
});
|
|
161
|
+
var useInputClassName = react_1.makeResetStyles({
|
|
162
|
+
gridColumnStart: '1',
|
|
163
|
+
gridColumnEnd: '2',
|
|
164
|
+
gridRowStart: '1',
|
|
165
|
+
gridRowEnd: '3',
|
|
166
|
+
outlineStyle: 'none',
|
|
167
|
+
border: '0',
|
|
168
|
+
padding: '0',
|
|
169
|
+
color: react_theme_1.tokens.colorNeutralForeground1,
|
|
170
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
171
|
+
backgroundColor: 'transparent',
|
|
172
|
+
fontFamily: 'inherit',
|
|
173
|
+
fontSize: 'inherit',
|
|
174
|
+
fontWeight: 'inherit',
|
|
175
|
+
lineHeight: 'inherit',
|
|
176
|
+
'::placeholder': {
|
|
177
|
+
color: react_theme_1.tokens.colorNeutralForeground4,
|
|
178
|
+
opacity: 1, // browser style override
|
|
179
|
+
},
|
|
180
|
+
});
|
|
85
181
|
var useInputStyles = react_1.makeStyles({
|
|
86
|
-
|
|
182
|
+
disabled: {
|
|
183
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
184
|
+
cursor: 'not-allowed',
|
|
185
|
+
backgroundColor: react_theme_1.tokens.colorTransparentBackground,
|
|
186
|
+
'::placeholder': {
|
|
187
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
});
|
|
191
|
+
var useBaseButtonClassName = react_1.makeResetStyles({
|
|
192
|
+
display: 'inline-flex',
|
|
193
|
+
width: '24px',
|
|
194
|
+
alignItems: 'center',
|
|
195
|
+
justifyContent: 'center',
|
|
196
|
+
border: '0',
|
|
197
|
+
position: 'absolute',
|
|
198
|
+
outlineStyle: 'none',
|
|
199
|
+
height: '16px',
|
|
200
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
201
|
+
backgroundColor: 'transparent',
|
|
202
|
+
color: react_theme_1.tokens.colorNeutralForeground3,
|
|
203
|
+
// common button layout
|
|
204
|
+
gridColumnStart: '2',
|
|
205
|
+
borderRadius: '0',
|
|
206
|
+
padding: '0 5px 0 5px',
|
|
207
|
+
':active': {
|
|
208
|
+
outlineStyle: 'none',
|
|
209
|
+
},
|
|
210
|
+
':enabled': (_a = {
|
|
211
|
+
':hover': {
|
|
212
|
+
cursor: 'pointer',
|
|
213
|
+
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
|
214
|
+
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
|
|
215
|
+
},
|
|
216
|
+
':active': {
|
|
217
|
+
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
218
|
+
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
_a["&." + spinButtonExtraClassNames.buttonActive] = {
|
|
222
|
+
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
223
|
+
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
224
|
+
},
|
|
225
|
+
_a),
|
|
226
|
+
':disabled': {
|
|
227
|
+
cursor: 'not-allowed',
|
|
228
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
229
|
+
},
|
|
87
230
|
});
|
|
88
231
|
var useButtonStyles = react_1.makeStyles({
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
232
|
+
increment: {
|
|
233
|
+
gridRowStart: '1',
|
|
234
|
+
borderTopRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
235
|
+
paddingTop: '4px',
|
|
236
|
+
paddingBottom: '1px',
|
|
237
|
+
},
|
|
238
|
+
decrement: {
|
|
239
|
+
gridRowStart: '2',
|
|
240
|
+
borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
241
|
+
paddingTop: '1px',
|
|
242
|
+
paddingBottom: '4px',
|
|
243
|
+
},
|
|
97
244
|
// Padding values numbers don't align with design specs
|
|
98
245
|
// but visually the padding aligns.
|
|
99
246
|
// The icons are set in a 16x16px square but the artwork is inset from that
|
|
100
247
|
// so these padding values are computed by hand.
|
|
101
248
|
// Additionally the design uses fractional values so these are
|
|
102
249
|
// rounded to the nearest integer.
|
|
103
|
-
incrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')),
|
|
104
|
-
|
|
105
|
-
decrementButton: tslib_1.__assign({ gridColumnStart: '2', gridColumnEnd: '3', gridRowStart: '2', gridRowEnd: '3' }, react_1.shorthands.borderRadius(0, 0, react_theme_1.tokens.borderRadiusMedium, 0)),
|
|
106
|
-
decrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')),
|
|
107
|
-
decrementButtonMedium: tslib_1.__assign({}, react_1.shorthands.padding('1px', '5px', '4px', '5px')),
|
|
250
|
+
incrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')), { height: '12px' }),
|
|
251
|
+
decrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')), { height: '12px' }),
|
|
108
252
|
outline: {
|
|
109
|
-
|
|
110
|
-
color: react_theme_1.tokens.colorNeutralForeground3,
|
|
111
|
-
':enabled': (_a = {
|
|
112
|
-
':hover': {
|
|
113
|
-
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
|
114
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
|
|
115
|
-
},
|
|
116
|
-
':active': {
|
|
117
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
118
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
_a["&." + spinButtonExtraClassNames.buttonActive] = {
|
|
122
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
123
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
124
|
-
},
|
|
125
|
-
_a),
|
|
126
|
-
':disabled': {
|
|
127
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
128
|
-
},
|
|
253
|
+
// set by useButtonClassName
|
|
129
254
|
},
|
|
130
255
|
underline: {
|
|
131
256
|
backgroundColor: 'transparent',
|
|
@@ -284,27 +409,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
284
409
|
var buttonStyles = useButtonStyles();
|
|
285
410
|
var buttonDisabledStyles = useButtonDisabledStyles();
|
|
286
411
|
var inputStyles = useInputStyles();
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
state.
|
|
290
|
-
|
|
291
|
-
react_input_1.useInputStyles_unstable({
|
|
292
|
-
size: size,
|
|
293
|
-
appearance: appearance,
|
|
294
|
-
input: state.input,
|
|
295
|
-
root: state.root,
|
|
296
|
-
components: {
|
|
297
|
-
root: 'span',
|
|
298
|
-
input: 'input',
|
|
299
|
-
contentBefore: 'span',
|
|
300
|
-
contentAfter: 'span',
|
|
301
|
-
},
|
|
302
|
-
});
|
|
303
|
-
state.root.className = react_1.mergeClasses(state.root.className, // Get the classes from useInputStyles_unstable
|
|
304
|
-
exports.spinButtonClassNames.root, rootStyles.base, rootStyles[size], appearance === 'outline' && rootStyles.outline, appearance === 'underline' && rootStyles.underline, filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, rootClassName);
|
|
305
|
-
state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.incrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
|
|
306
|
-
state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.decrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
|
|
307
|
-
state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, state.input.className, inputStyles.base);
|
|
412
|
+
state.root.className = react_1.mergeClasses(exports.spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
|
|
413
|
+
state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
|
|
414
|
+
state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
|
|
415
|
+
state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
|
|
308
416
|
return state;
|
|
309
417
|
};
|
|
310
418
|
exports.useSpinButtonStyles_unstable = useSpinButtonStyles_unstable;
|