@fluentui/react-spinbutton 9.1.6 → 9.2.0
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|