@fluentui/react-spinbutton 9.0.12 → 9.0.13
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 +60 -1
- package/CHANGELOG.md +16 -2
- package/lib/components/SpinButton/SpinButton.js +0 -1
- package/lib/components/SpinButton/SpinButton.js.map +1 -1
- package/lib/components/SpinButton/renderSpinButton.js +8 -5
- package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButton.js +2 -33
- package/lib/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButtonStyles.js +251 -256
- 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 +0 -6
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getBound.js +0 -2
- package/lib/utils/getBound.js.map +1 -1
- package/lib/utils/precision.js +0 -5
- package/lib/utils/precision.js.map +1 -1
- package/lib-commonjs/SpinButton.js +0 -2
- package/lib-commonjs/SpinButton.js.map +1 -1
- package/lib-commonjs/SpinButtonField.js +0 -2
- package/lib-commonjs/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.js +0 -6
- 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 +0 -6
- package/lib-commonjs/components/SpinButton/index.js.map +1 -1
- package/lib-commonjs/components/SpinButton/renderSpinButton.js +8 -9
- package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButton.js +2 -40
- package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +251 -261
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js +0 -4
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/index.js +0 -2
- package/lib-commonjs/components/SpinButtonField/index.js.map +1 -1
- package/lib-commonjs/index.js +0 -4
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +0 -8
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getBound.js +0 -4
- package/lib-commonjs/utils/getBound.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -4
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/precision.js +0 -8
- package/lib-commonjs/utils/precision.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","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"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","useRootStyles","react_1","useInputStyles","useButtonStyles","useButtonDisabledStyles","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","disabled","invalid","filled","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","rootClassName","className","undefined","react_input_1","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"]}
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SpinButtonField = exports.spinButtonFieldClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
|
|
11
|
-
|
|
12
9
|
const SpinButton_1 = /*#__PURE__*/require("../../SpinButton");
|
|
13
|
-
|
|
14
10
|
exports.spinButtonFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('SpinButtonField');
|
|
15
11
|
exports.SpinButtonField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
16
12
|
const state = react_field_1.useField_unstable(props, ref, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAOA;AAIaA,iCAAyB,gBAAGC,gCAAkB,CAAC,iBAAiB,CAAC;AAEjED,uBAAe,gBAA8CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGL,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAAEE,SAAS,EAAEC,uBAAU;IAAEC,UAAU,EAAET;EAAyB,CAAE,CAAC;EAC7GC,qCAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOL,kCAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFN,uBAAe,CAACU,WAAW,GAAG,iBAAiB","names":["exports","react_field_1","React","forwardRef","props","ref","state","component","SpinButton_1","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { SpinButton } from '../../SpinButton';\n\nexport type SpinButtonFieldProps = FieldProps<typeof SpinButton>;\n\nexport const spinButtonFieldClassNames = getFieldClassNames('SpinButtonField');\n\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: SpinButton, classNames: spinButtonFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSpinButtonField.displayName = 'SpinButtonField';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-spinbutton/src/components/SpinButtonField/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButtonField/index.ts"],"sourcesContent":["export * from './SpinButtonField';\n"]}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.spinButtonFieldClassNames = exports.SpinButtonField_unstable = exports.useSpinButton_unstable = exports.useSpinButtonStyles_unstable = exports.spinButtonClassNames = exports.renderSpinButton_unstable = exports.SpinButton = void 0;
|
|
7
|
-
|
|
8
7
|
var SpinButton_1 = /*#__PURE__*/require("./SpinButton");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "SpinButton", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -37,9 +35,7 @@ Object.defineProperty(exports, "useSpinButton_unstable", {
|
|
|
37
35
|
return SpinButton_1.useSpinButton_unstable;
|
|
38
36
|
}
|
|
39
37
|
});
|
|
40
|
-
|
|
41
38
|
var SpinButtonField_1 = /*#__PURE__*/require("./SpinButtonField");
|
|
42
|
-
|
|
43
39
|
Object.defineProperty(exports, "SpinButtonField_unstable", {
|
|
44
40
|
enumerable: true,
|
|
45
41
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,8BAAU;EAAA;AAAA;AACVF;EAAAC;EAAAC;IAAA,6CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,wCAAoB;EAAA;AAAA;AACpBF;EAAAC;EAAAC;IAAA,gDAA4B;EAAA;AAAA;AAC5BF;EAAAC;EAAAC;IAAA,0CAAsB;EAAA;AAAA;AAYxB;AAASF;EAAAC;EAAAC;IAAA,wCAAe;EAAA;AAAA;AAA8BF;EAAAC;EAAAC;IAAA,kDAAyB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["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\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"]}
|
|
@@ -4,31 +4,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.clamp = void 0;
|
|
7
|
-
|
|
8
7
|
const clamp = (value, min, max) => {
|
|
9
8
|
let nextValue = value;
|
|
10
|
-
|
|
11
9
|
if (min !== undefined) {
|
|
12
10
|
if (max !== undefined && min > max) {
|
|
13
11
|
const error = new Error();
|
|
14
|
-
|
|
15
12
|
if (process.env.NODE_ENV !== 'production') {
|
|
16
13
|
// eslint-disable-next-line no-console
|
|
17
14
|
console.error([`"min" value "${min}" is greater than "max" value "${max}".`, '"min" must be less than or equal to "max".', `Returning value "${value}".`, error.stack].join());
|
|
18
15
|
}
|
|
19
|
-
|
|
20
16
|
return value;
|
|
21
17
|
}
|
|
22
|
-
|
|
23
18
|
nextValue = Math.max(min, nextValue);
|
|
24
19
|
}
|
|
25
|
-
|
|
26
20
|
if (max !== undefined) {
|
|
27
21
|
nextValue = Math.min(max, nextValue);
|
|
28
22
|
}
|
|
29
|
-
|
|
30
23
|
return nextValue;
|
|
31
24
|
};
|
|
32
|
-
|
|
33
25
|
exports.clamp = clamp;
|
|
34
26
|
//# sourceMappingURL=clamp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAO,MAAMA,KAAK,GAAG,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;AA3BYW,aAAK","names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math","exports"],"sourceRoot":"../src/","sources":["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"]}
|
|
@@ -4,20 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getBound = void 0;
|
|
7
|
-
|
|
8
7
|
const getBound = (value, min, max) => {
|
|
9
8
|
if (min !== undefined && value === min) {
|
|
10
9
|
if (max === min) {
|
|
11
10
|
return 'both';
|
|
12
11
|
}
|
|
13
|
-
|
|
14
12
|
return 'min';
|
|
15
13
|
} else if (max !== undefined && value === max) {
|
|
16
14
|
return 'max';
|
|
17
15
|
}
|
|
18
|
-
|
|
19
16
|
return 'none';
|
|
20
17
|
};
|
|
21
|
-
|
|
22
18
|
exports.getBound = getBound;
|
|
23
19
|
//# sourceMappingURL=getBound.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAEO,MAAMA,QAAQ,GAAG,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;AAXYE,gBAAQ","names":["getBound","value","min","max","undefined","exports"],"sourceRoot":"../src/","sources":["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"]}
|
|
@@ -3,12 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./clamp"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./getBound"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./precision"), exports);
|
|
14
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-spinbutton/src/utils/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/index.ts"],"sourcesContent":["export * from './clamp';\nexport * from './getBound';\nexport * from './precision';\n"]}
|
|
@@ -11,7 +11,6 @@ exports.precisionRound = exports.calculatePrecision = void 0;
|
|
|
11
11
|
* the decimal point indicated by a positive precision.
|
|
12
12
|
* @param value - the value to determine the precision of
|
|
13
13
|
*/
|
|
14
|
-
|
|
15
14
|
function calculatePrecision(value) {
|
|
16
15
|
/**
|
|
17
16
|
* Group 1:
|
|
@@ -20,33 +19,26 @@ function calculatePrecision(value) {
|
|
|
20
19
|
* \.([0-9]*) matches all digits after a decimal point.
|
|
21
20
|
*/
|
|
22
21
|
const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value));
|
|
23
|
-
|
|
24
22
|
if (!groups) {
|
|
25
23
|
return 0;
|
|
26
24
|
}
|
|
27
|
-
|
|
28
25
|
if (groups[1]) {
|
|
29
26
|
return -groups[1].length;
|
|
30
27
|
}
|
|
31
|
-
|
|
32
28
|
if (groups[2]) {
|
|
33
29
|
return groups[2].length;
|
|
34
30
|
}
|
|
35
|
-
|
|
36
31
|
return 0;
|
|
37
32
|
}
|
|
38
|
-
|
|
39
33
|
exports.calculatePrecision = calculatePrecision;
|
|
40
34
|
/**
|
|
41
35
|
* Rounds a number to a certain level of precision. Accepts negative precision.
|
|
42
36
|
* @param value - The value that is being rounded.
|
|
43
37
|
* @param precision - The number of decimal places to round the number to
|
|
44
38
|
*/
|
|
45
|
-
|
|
46
39
|
function precisionRound(value, precision, base = 10) {
|
|
47
40
|
const exp = Math.pow(base, precision);
|
|
48
41
|
return Math.round(value * exp) / exp;
|
|
49
42
|
}
|
|
50
|
-
|
|
51
43
|
exports.precisionRound = precisionRound;
|
|
52
44
|
//# sourceMappingURL=precision.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;;;;;;;AAOA,SAAgBA,kBAAkB,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;AAlBAC;AAoBA;;;;;AAKA,SAAgBC,cAAc,CAACN,KAAa,EAAEO,SAAiB,EAAEC,OAAe,EAAE;EAChF,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,IAAI,EAAED,SAAS,CAAC;EACrC,OAAOG,IAAI,CAACE,KAAK,CAACZ,KAAK,GAAGS,GAAG,CAAC,GAAGA,GAAG;AACtC;AAHAJ","names":["calculatePrecision","value","groups","exec","String","length","exports","precisionRound","precision","base","exp","Math","pow","round"],"sourceRoot":"../src/","sources":["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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-spinbutton",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.13",
|
|
4
4
|
"description": "Fluent UI React SpinButton component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
-
"@fluentui/react-label": "^9.0.
|
|
32
|
-
"@fluentui/scripts": "
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
31
|
+
"@fluentui/react-label": "^9.0.15",
|
|
32
|
+
"@fluentui/scripts": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@griffel/react": "^1.
|
|
35
|
+
"@griffel/react": "^1.5.2",
|
|
36
36
|
"@fluentui/keyboard-keys": "^9.0.1",
|
|
37
|
-
"@fluentui/react-field": "9.0.0-alpha.
|
|
37
|
+
"@fluentui/react-field": "9.0.0-alpha.13",
|
|
38
38
|
"@fluentui/react-icons": "^2.0.175",
|
|
39
|
-
"@fluentui/react-input": "^9.2.
|
|
39
|
+
"@fluentui/react-input": "^9.2.10",
|
|
40
40
|
"@fluentui/react-theme": "^9.1.5",
|
|
41
|
-
"@fluentui/react-utilities": "^9.3.
|
|
41
|
+
"@fluentui/react-utilities": "^9.3.1",
|
|
42
42
|
"tslib": "^2.1.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|