@fluentui/react-spinbutton 9.2.15 → 9.2.16
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +46 -1
- package/CHANGELOG.md +16 -2
- package/lib/SpinButton.js +0 -1
- package/lib/SpinButton.js.map +1 -1
- package/lib/components/SpinButton/SpinButton.js +5 -7
- package/lib/components/SpinButton/SpinButton.js.map +1 -1
- package/lib/components/SpinButton/SpinButton.types.js +0 -1
- package/lib/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib/components/SpinButton/index.js +0 -1
- package/lib/components/SpinButton/index.js.map +1 -1
- package/lib/components/SpinButton/renderSpinButton.js +4 -9
- package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButton.js +239 -247
- package/lib/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButtonStyles.styles.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/clamp.js +21 -17
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getBound.js +9 -10
- package/lib/utils/getBound.js.map +1 -1
- package/lib/utils/index.js +0 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/precision.js +19 -22
- package/lib/utils/precision.js.map +1 -1
- package/lib-commonjs/SpinButton.js +0 -3
- package/lib-commonjs/SpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.js +1 -3
- package/lib-commonjs/components/SpinButton/SpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.types.js +0 -3
- package/lib-commonjs/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib-commonjs/components/SpinButton/index.js +0 -3
- package/lib-commonjs/components/SpinButton/index.js.map +1 -1
- package/lib-commonjs/components/SpinButton/renderSpinButton.js +1 -3
- package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButton.js +1 -3
- package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js +0 -2
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +1 -3
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getBound.js +1 -3
- package/lib-commonjs/utils/getBound.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -3
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/precision.js +6 -8
- package/lib-commonjs/utils/precision.js.map +1 -1
- package/package.json +7 -7
@@ -1 +1 @@
|
|
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/components/SpinButton/useSpinButtonStyles.styles.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 width: '100%',\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
|
+
{"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":["useSpinButtonStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinButtonClassNames = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton'\n};\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active'\n};\nconst fieldHeights = {\n small: '24px',\n medium: '32px'\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 backgroundColor: tokens.colorNeutralBackground1,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: tokens.borderRadiusMedium,\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 '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\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 // 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 // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\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 '@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});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: tokens.spacingHorizontalS\n },\n medium: {\n },\n outline: {\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 underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n ...shorthands.borderRadius(tokens.borderRadiusNone)\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)\n },\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\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 invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\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 width: '100%',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\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});\nconst useBaseButtonClassName = makeResetStyles({\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n border: '0',\n position: 'absolute',\n outlineStyle: 'none',\n height: '16px',\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 // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n ':active': {\n outlineStyle: 'none'\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 ':disabled': {\n cursor: 'not-allowed',\n color: tokens.colorNeutralForegroundDisabled\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 decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n height: '12px'\n },\n outline: {\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 ':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 ':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// 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 ':hover': {\n cursor: 'not-allowed'\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 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 '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 '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 * Apply styling to the SpinButton slots based on the state\n */ export const useSpinButtonStyles_unstable = (state)=>{\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 const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n state.root.className = mergeClasses(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);\n state.incrementButton.className = mergeClasses(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);\n state.decrementButton.className = mergeClasses(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);\n state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"mappings":"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"}
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["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"],"names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe"}
|
package/lib/utils/clamp.js
CHANGED
@@ -1,19 +1,23 @@
|
|
1
|
-
export const clamp = (value, min, max)
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
1
|
+
export const clamp = (value, min, max)=>{
|
2
|
+
let nextValue = value;
|
3
|
+
if (min !== undefined) {
|
4
|
+
if (max !== undefined && min > max) {
|
5
|
+
const error = new Error();
|
6
|
+
if (process.env.NODE_ENV !== 'production') {
|
7
|
+
// eslint-disable-next-line no-console
|
8
|
+
console.error([
|
9
|
+
`"min" value "${min}" is greater than "max" value "${max}".`,
|
10
|
+
'"min" must be less than or equal to "max".',
|
11
|
+
`Returning value "${value}".`,
|
12
|
+
error.stack
|
13
|
+
].join());
|
14
|
+
}
|
15
|
+
return value;
|
16
|
+
}
|
17
|
+
nextValue = Math.max(min, nextValue);
|
11
18
|
}
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
}
|
17
|
-
return nextValue;
|
19
|
+
if (max !== undefined) {
|
20
|
+
nextValue = Math.min(max, nextValue);
|
21
|
+
}
|
22
|
+
return nextValue;
|
18
23
|
};
|
19
|
-
//# sourceMappingURL=clamp.js.map
|
package/lib/utils/clamp.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["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"],"names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,CAACC,OAAeC,KAAcC,MAAyB;IAC1E,IAAIC,YAAYH;IAChB,IAAIC,QAAQG,WAAW;QACrB,IAAIF,QAAQE,aAAaH,MAAMC,KAAK;YAClC,MAAMG,QAAQ,IAAIC;YAClB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQL,KAAK,CACX;oBACE,CAAC,aAAa,EAAEJ,IAAI,+BAA+B,EAAEC,IAAI,EAAE,CAAC;oBAC5D;oBACA,CAAC,iBAAiB,EAAEF,MAAM,EAAE,CAAC;oBAC7BK,MAAMM,KAAK;iBACZ,CAACC,IAAI;YAEV,CAAC;YACD,OAAOZ;QACT,CAAC;QAEDG,YAAYU,KAAKX,GAAG,CAACD,KAAKE;IAC5B,CAAC;IAED,IAAID,QAAQE,WAAW;QACrBD,YAAYU,KAAKZ,GAAG,CAACC,KAAKC;IAC5B,CAAC;IAED,OAAOA;AACT,EAAE"}
|
package/lib/utils/getBound.js
CHANGED
@@ -1,12 +1,11 @@
|
|
1
|
-
export const getBound = (value, min, max)
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
export const getBound = (value, min, max)=>{
|
2
|
+
if (min !== undefined && value === min) {
|
3
|
+
if (max === min) {
|
4
|
+
return 'both';
|
5
|
+
}
|
6
|
+
return 'min';
|
7
|
+
} else if (max !== undefined && value === max) {
|
8
|
+
return 'max';
|
5
9
|
}
|
6
|
-
return '
|
7
|
-
} else if (max !== undefined && value === max) {
|
8
|
-
return 'max';
|
9
|
-
}
|
10
|
-
return 'none';
|
10
|
+
return 'none';
|
11
11
|
};
|
12
|
-
//# sourceMappingURL=getBound.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["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"],"names":["getBound","value","min","max","undefined"],"mappings":"AAEA,OAAO,MAAMA,WAAW,CAACC,OAAeC,KAAcC,MAAmC;IACvF,IAAID,QAAQE,aAAaH,UAAUC,KAAK;QACtC,IAAIC,QAAQD,KAAK;YACf,OAAO;QACT,CAAC;QACD,OAAO;IACT,OAAO,IAAIC,QAAQC,aAAaH,UAAUE,KAAK;QAC7C,OAAO;IACT,CAAC;IAED,OAAO;AACT,EAAE"}
|
package/lib/utils/index.js
CHANGED
package/lib/utils/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './clamp';\nexport * from './getBound';\nexport * from './precision';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,cAAc"}
|
package/lib/utils/precision.js
CHANGED
@@ -4,32 +4,29 @@
|
|
4
4
|
* precision. Otherwise, it calculates the number of digits after
|
5
5
|
* the decimal point indicated by a positive precision.
|
6
6
|
* @param value - the value to determine the precision of
|
7
|
-
*/export function calculatePrecision(value) {
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
7
|
+
*/ export function calculatePrecision(value) {
|
8
|
+
/**
|
9
|
+
* Group 1:
|
10
|
+
* [1-9]([0]+$) matches trailing zeros
|
11
|
+
* Group 2:
|
12
|
+
* \.([0-9]*) matches all digits after a decimal point.
|
13
|
+
*/ const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value));
|
14
|
+
if (!groups) {
|
15
|
+
return 0;
|
16
|
+
}
|
17
|
+
if (groups[1]) {
|
18
|
+
return -groups[1].length;
|
19
|
+
}
|
20
|
+
if (groups[2]) {
|
21
|
+
return groups[2].length;
|
22
|
+
}
|
16
23
|
return 0;
|
17
|
-
}
|
18
|
-
if (groups[1]) {
|
19
|
-
return -groups[1].length;
|
20
|
-
}
|
21
|
-
if (groups[2]) {
|
22
|
-
return groups[2].length;
|
23
|
-
}
|
24
|
-
return 0;
|
25
24
|
}
|
26
25
|
/**
|
27
26
|
* Rounds a number to a certain level of precision. Accepts negative precision.
|
28
27
|
* @param value - The value that is being rounded.
|
29
28
|
* @param precision - The number of decimal places to round the number to
|
30
|
-
*/
|
31
|
-
|
32
|
-
|
33
|
-
return Math.round(value * exp) / exp;
|
29
|
+
*/ export function precisionRound(value, precision, base = 10) {
|
30
|
+
const exp = Math.pow(base, precision);
|
31
|
+
return Math.round(value * exp) / exp;
|
34
32
|
}
|
35
|
-
//# sourceMappingURL=precision.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["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"],"names":["calculatePrecision","value","groups","exec","String","length","precisionRound","precision","base","exp","Math","pow","round"],"mappings":"AAAA;;;;;;CAMC,GACD,OAAO,SAASA,mBAAmBC,KAAsB,EAAU;IACjE;;;;;GAKC,GACD,MAAMC,SAAS,0BAA0BC,IAAI,CAACC,OAAOH;IACrD,IAAI,CAACC,QAAQ;QACX,OAAO;IACT,CAAC;IACD,IAAIA,MAAM,CAAC,EAAE,EAAE;QACb,OAAO,CAACA,MAAM,CAAC,EAAE,CAACG,MAAM;IAC1B,CAAC;IACD,IAAIH,MAAM,CAAC,EAAE,EAAE;QACb,OAAOA,MAAM,CAAC,EAAE,CAACG,MAAM;IACzB,CAAC;IACD,OAAO;AACT,CAAC;AAED;;;;CAIC,GACD,OAAO,SAASC,eAAeL,KAAa,EAAEM,SAAiB,EAAEC,OAAe,EAAE,EAAU;IAC1F,MAAMC,MAAMC,KAAKC,GAAG,CAACH,MAAMD;IAC3B,OAAOG,KAAKE,KAAK,CAACX,QAAQQ,OAAOA;AACnC,CAAC"}
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
6
|
_exportStar(require("./components/SpinButton/index"), exports);
|
7
|
-
//# sourceMappingURL=SpinButton.js.map
|
8
|
-
|
9
|
-
//# sourceMappingURL=SpinButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["SpinButton.js"],"sourcesContent":["export * from './components/SpinButton/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
@@ -18,6 +18,4 @@ const SpinButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
18
18
|
(0, _reactSharedContexts.useCustomStyleHook_unstable)('useSpinButtonStyles_unstable')(state);
|
19
19
|
return (0, _renderSpinButton.renderSpinButton_unstable)(state);
|
20
20
|
});
|
21
|
-
SpinButton.displayName = 'SpinButton';
|
22
|
-
|
23
|
-
//# sourceMappingURL=SpinButton.js.map
|
21
|
+
SpinButton.displayName = 'SpinButton';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["SpinButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */ export const SpinButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useSpinButton_unstable(props, ref);\n useSpinButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useSpinButtonStyles_unstable')(state);\n return renderSpinButton_unstable(state);\n});\nSpinButton.displayName = 'SpinButton';\n"],"names":["SpinButton","React","forwardRef","props","ref","state","useSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyleHook_unstable","renderSpinButton_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;+BACgB;kCACG;2CACG;qCACD;AAGjC,MAAMA,aAAa,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACvE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,uDAA4B,EAACF;IAC7BG,IAAAA,gDAA2B,EAAC,gCAAgCH;IAC5D,OAAOI,IAAAA,2CAAyB,EAACJ;AACrC;AACAL,WAAWU,WAAW,GAAG"}
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
6
6
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
7
|
-
//# sourceMappingURL=SpinButton.types.js.map
|
8
|
-
|
9
|
-
//# sourceMappingURL=SpinButton.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["SpinButton.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
|
@@ -8,6 +8,3 @@ _exportStar(require("./SpinButton.types"), exports);
|
|
8
8
|
_exportStar(require("./renderSpinButton"), exports);
|
9
9
|
_exportStar(require("./useSpinButton"), exports);
|
10
10
|
_exportStar(require("./useSpinButtonStyles.styles"), exports);
|
11
|
-
//# sourceMappingURL=index.js.map
|
12
|
-
|
13
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA"}
|
@@ -11,6 +11,4 @@ const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
11
|
const renderSpinButton_unstable = (state)=>{
|
12
12
|
const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
|
13
13
|
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.input, slotProps.input), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.incrementButton, slotProps.incrementButton), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.decrementButton, slotProps.decrementButton));
|
14
|
-
};
|
15
|
-
|
16
|
-
//# sourceMappingURL=renderSpinButton.js.map
|
14
|
+
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["renderSpinButton.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of SpinButton\n */ export const renderSpinButton_unstable = (state)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.input, slotProps.input), /*#__PURE__*/ createElement(slots.incrementButton, slotProps.incrementButton), /*#__PURE__*/ createElement(slots.decrementButton, slotProps.decrementButton));\n};\n"],"names":["renderSpinButton_unstable","state","slots","slotProps","getSlotsNext","createElement","root","input","incrementButton","decrementButton"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,4BAA4B,CAACC,QAAQ;IAClD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACH,MAAMK,KAAK,EAAEJ,UAAUI,KAAK,GAAG,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMM,eAAe,EAAEL,UAAUK,eAAe,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,eAAe,EAAEN,UAAUM,eAAe;AACzR"}
|
@@ -263,6 +263,4 @@ const useSpinButton_unstable = (props, ref)=>{
|
|
263
263
|
state.decrementButton.onMouseUp = (0, _reactUtilities.mergeCallbacks)(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
|
264
264
|
state.decrementButton.onMouseLeave = (0, _reactUtilities.mergeCallbacks)(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
|
265
265
|
return state;
|
266
|
-
};
|
267
|
-
|
268
|
-
//# sourceMappingURL=useSpinButton.js.map
|
266
|
+
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/SpinButton/useSpinButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useControllableState, useTimeout } from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start, end, percent) => start + (end - start) * percent;\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props, ref) => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true\n });\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value']\n });\n const overrides = useOverrides();\n var _overrides_inputDefaultAppearance;\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline',\n root,\n input,\n incrementButton,\n decrementButton\n } = props;\n const precision = React.useMemo(() => {\n return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0\n });\n const isControlled = value !== undefined;\n const [textValue, setTextValue] = React.useState(undefined);\n const [keyboardSpinState, setKeyboardSpinState] = React.useState('rest');\n const internalState = React.useRef({\n value: currentValue,\n spinState: 'rest',\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none'\n });\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n const stepValue = (e, direction, startFrom) => {\n let startValue = internalState.current.value;\n if (startFrom) {\n const num = parseFloat(startFrom);\n if (!isNaN(num)) {\n startValue = num;\n }\n }\n const val = startValue;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(newValue, min, max);\n }\n commit(e, newValue);\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(DEFAULT_SPIN_DELAY_MS, MIN_SPIN_DELAY_MS, internalState.current.spinTime / MAX_SPIN_TIME_MS);\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n const handleInputChange = e => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue !== null && textValue !== void 0 ? textValue : String(currentValue);\n }\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n const handleIncrementMouseDown = e => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n const handleDecrementMouseDown = e => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n const handleStepMouseUpOrLeave = e => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n const handleBlur = e => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n const handleKeyDown = e => {\n let nextKeyboardSpinState = 'rest';\n if (e.key === ArrowUp) {\n stepValue(e, 'up', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === ArrowDown) {\n stepValue(e, 'down', textValue);\n nextKeyboardSpinState = 'down';\n } else if (e.key === PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage', textValue);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n commit(e, min);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === End && max !== undefined) {\n commit(e, max);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n } else if (e.key === Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(undefined);\n internalState.current.previousTextValue = undefined;\n }\n }\n if (keyboardSpinState !== nextKeyboardSpinState) {\n setKeyboardSpinState(nextKeyboardSpinState);\n }\n };\n const handleKeyUp = e => {\n if (keyboardSpinState !== 'rest') {\n setKeyboardSpinState('rest');\n internalState.current.spinState = 'rest';\n }\n };\n const commit = (e, newValue, newDisplayValue) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged = newDisplayValue !== undefined && internalState.current.previousTextValue !== undefined && internalState.current.previousTextValue !== newDisplayValue;\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue, precision);\n setCurrentValue(roundedValue);\n } else if (displayValueChanged && !isControlled) {\n const nextValue = parseFloat(newDisplayValue);\n if (!isNaN(nextValue)) {\n setCurrentValue(precisionRound(nextValue, precision));\n }\n }\n if (valueChanged || displayValueChanged) {\n onChange === null || onChange === void 0 ? void 0 : onChange(e, {\n value: roundedValue,\n displayValue: newDisplayValue\n });\n }\n setTextValue(undefined);\n };\n const state = {\n size,\n appearance,\n spinState: keyboardSpinState,\n atBound: internalState.current.atBound,\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button'\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance,\n type: 'text',\n ...nativeProps.primary\n }\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n type: 'button'\n }\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Decrement value',\n type: 'button'\n }\n })\n };\n let valueToDisplay;\n if (textValue !== undefined) {\n valueToDisplay = textValue;\n } else if (value === null || currentValue === null) {\n valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';\n internalState.current.value = null;\n internalState.current.atBound = 'none';\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n internalState.current.value = roundedValue;\n internalState.current.atBound = getBound(roundedValue, min, max);\n if (isControlled) {\n valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);\n } else {\n valueToDisplay = String(roundedValue);\n }\n }\n state.input.value = valueToDisplay;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;\n var _state_input_ariavaluetext;\n state.input['aria-valuetext'] = (_state_input_ariavaluetext = state.input['aria-valuetext']) !== null && _state_input_ariavaluetext !== void 0 ? _state_input_ariavaluetext : value !== undefined && displayValue || undefined;\n state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n return state;\n};\n//# sourceMappingURL=useSpinButton.js.map"],"names":["useSpinButton_unstable","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","overrides","useOverrides","_overrides_inputDefaultAppearance","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","size","appearance","inputDefaultAppearance","root","input","incrementButton","decrementButton","React","useMemo","Math","calculatePrecision","currentValue","setCurrentValue","useControllableState","state","defaultState","initialState","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","useRef","spinState","spinTime","spinDelay","atBound","getBound","precisionRound","setStepTimeout","clearStepTimeout","useTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","clamp","commit","newValue","Number","handleInputChange","previousTextValue","String","target","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","key","ArrowUp","ArrowDown","PageUp","preventDefault","PageDown","shiftKey","Home","End","Enter","Escape","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","components","resolveShorthand","required","defaultProps","autoComplete","role","type","primary","tabIndex","children","createElement","ChevronUp16Regular","disabled","ChevronDown16Regular","valueToDisplay","_state_input_ariavaluetext","mergeCallbacks","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["useSpinButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useControllableState, useTimeout } from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start, end, percent)=>start + (end - start) * percent;\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */ export const useSpinButton_unstable = (props, ref)=>{\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true\n });\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: [\n 'defaultValue',\n 'max',\n 'min',\n 'onChange',\n 'size',\n 'value'\n ]\n });\n const overrides = useOverrides();\n var _overrides_inputDefaultAppearance;\n const { value , displayValue , defaultValue , min , max , step =1 , stepPage =1 , precision: precisionFromProps , onChange , size ='medium' , appearance =(_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline' , root , input , incrementButton , decrementButton } = props;\n const precision = React.useMemo(()=>{\n return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(calculatePrecision(step), 0);\n }, [\n precisionFromProps,\n step\n ]);\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0\n });\n const isControlled = value !== undefined;\n const [textValue, setTextValue] = React.useState(undefined);\n const [keyboardSpinState, setKeyboardSpinState] = React.useState('rest');\n const internalState = React.useRef({\n value: currentValue,\n spinState: 'rest',\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none'\n });\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n const stepValue = (e, direction, startFrom)=>{\n let startValue = internalState.current.value;\n if (startFrom) {\n const num = parseFloat(startFrom);\n if (!isNaN(num)) {\n startValue = num;\n }\n }\n const val = startValue;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(newValue, min, max);\n }\n commit(e, newValue);\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(()=>{\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(DEFAULT_SPIN_DELAY_MS, MIN_SPIN_DELAY_MS, internalState.current.spinTime / MAX_SPIN_TIME_MS);\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n const handleInputChange = (e)=>{\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue !== null && textValue !== void 0 ? textValue : String(currentValue);\n }\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n const handleIncrementMouseDown = (e)=>{\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n const handleDecrementMouseDown = (e)=>{\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n const handleStepMouseUpOrLeave = (e)=>{\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n const handleBlur = (e)=>{\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n const handleKeyDown = (e)=>{\n let nextKeyboardSpinState = 'rest';\n if (e.key === ArrowUp) {\n stepValue(e, 'up', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === ArrowDown) {\n stepValue(e, 'down', textValue);\n nextKeyboardSpinState = 'down';\n } else if (e.key === PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage', textValue);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n commit(e, min);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === End && max !== undefined) {\n commit(e, max);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n } else if (e.key === Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(undefined);\n internalState.current.previousTextValue = undefined;\n }\n }\n if (keyboardSpinState !== nextKeyboardSpinState) {\n setKeyboardSpinState(nextKeyboardSpinState);\n }\n };\n const handleKeyUp = (e)=>{\n if (keyboardSpinState !== 'rest') {\n setKeyboardSpinState('rest');\n internalState.current.spinState = 'rest';\n }\n };\n const commit = (e, newValue, newDisplayValue)=>{\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged = newDisplayValue !== undefined && internalState.current.previousTextValue !== undefined && internalState.current.previousTextValue !== newDisplayValue;\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue, precision);\n setCurrentValue(roundedValue);\n } else if (displayValueChanged && !isControlled) {\n const nextValue = parseFloat(newDisplayValue);\n if (!isNaN(nextValue)) {\n setCurrentValue(precisionRound(nextValue, precision));\n }\n }\n if (valueChanged || displayValueChanged) {\n onChange === null || onChange === void 0 ? void 0 : onChange(e, {\n value: roundedValue,\n displayValue: newDisplayValue\n });\n }\n setTextValue(undefined);\n };\n const state = {\n size,\n appearance,\n spinState: keyboardSpinState,\n atBound: internalState.current.atBound,\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button'\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance,\n type: 'text',\n ...nativeProps.primary\n }\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: /*#__PURE__*/ React.createElement(ChevronUp16Regular, null),\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n type: 'button'\n }\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: /*#__PURE__*/ React.createElement(ChevronDown16Regular, null),\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Decrement value',\n type: 'button'\n }\n })\n };\n let valueToDisplay;\n if (textValue !== undefined) {\n valueToDisplay = textValue;\n } else if (value === null || currentValue === null) {\n valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';\n internalState.current.value = null;\n internalState.current.atBound = 'none';\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n internalState.current.value = roundedValue;\n internalState.current.atBound = getBound(roundedValue, min, max);\n if (isControlled) {\n valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);\n } else {\n valueToDisplay = String(roundedValue);\n }\n }\n state.input.value = valueToDisplay;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;\n var _state_input_ariavaluetext;\n state.input['aria-valuetext'] = (_state_input_ariavaluetext = state.input['aria-valuetext']) !== null && _state_input_ariavaluetext !== void 0 ? _state_input_ariavaluetext : value !== undefined && displayValue || undefined;\n state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n return state;\n};\n"],"names":["useSpinButton_unstable","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","overrides","useOverrides","_overrides_inputDefaultAppearance","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","size","appearance","inputDefaultAppearance","root","input","incrementButton","decrementButton","React","useMemo","Math","calculatePrecision","currentValue","setCurrentValue","useControllableState","state","defaultState","initialState","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","useRef","spinState","spinTime","spinDelay","atBound","getBound","precisionRound","setStepTimeout","clearStepTimeout","useTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","clamp","commit","newValue","Number","handleInputChange","previousTextValue","String","target","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","key","ArrowUp","ArrowDown","PageUp","preventDefault","PageDown","shiftKey","Home","End","Enter","Escape","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","components","resolveShorthand","required","defaultProps","autoComplete","role","type","primary","tabIndex","children","createElement","ChevronUp16Regular","disabled","ChevronDown16Regular","valueToDisplay","_state_input_ariavaluetext","mergeCallbacks","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave"],"mappings":";;;;+BAsBiBA;;aAAAA;;;6DAtBM;4BACuB;gCACgE;8BAC/B;uBACX;4BACX;qCACH;AACtD,MAAMC,wBAAwB;AAC9B,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AACzB,6DAA6D;AAC7D,yDAAyD;AACzD,gEAAgE;AAChE,MAAMC,OAAO,CAACC,OAAOC,KAAKC,UAAUF,QAAQ,AAACC,CAAAA,MAAMD,KAAI,IAAKE;AASjD,MAAMP,yBAAyB,CAACQ,OAAOC,MAAM;IACpD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAA6B,EAACF,OAAO;QACzCG,kBAAkB,IAAI;QACtBC,kBAAkB,IAAI;IAC1B;IACA,MAAMC,cAAcC,IAAAA,yCAAyB,EAAC;QAC1CN;QACAO,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;YACA;YACA;YACA;SACH;IACL;IACA,MAAMC,YAAYC,IAAAA,0CAAY;IAC9B,IAAIC;IACJ,MAAM,EAAEC,MAAK,EAAGC,aAAY,EAAGC,aAAY,EAAGC,IAAG,EAAGC,IAAG,EAAGC,MAAM,EAAC,EAAGC,UAAU,EAAC,EAAGC,WAAWC,mBAAkB,EAAGC,SAAQ,EAAGC,MAAM,SAAQ,EAAGC,YAAY,AAACZ,CAAAA,oCAAoCF,UAAUe,sBAAsB,AAAD,MAAO,IAAI,IAAIb,sCAAsC,KAAK,IAAIA,oCAAoC,SAAS,CAAA,EAAGc,KAAI,EAAGC,MAAK,EAAGC,gBAAe,EAAGC,gBAAe,EAAG,GAAG5B;IAClY,MAAMmB,YAAYU,OAAMC,OAAO,CAAC,IAAI;QAChC,OAAOV,uBAAuB,IAAI,IAAIA,uBAAuB,KAAK,IAAIA,qBAAqBW,KAAKf,GAAG,CAACgB,IAAAA,yBAAkB,EAACf,OAAO,EAAE;IACpI,GAAG;QACCG;QACAH;KACH;IACD,MAAM,CAACgB,cAAcC,gBAAgB,GAAGC,IAAAA,oCAAoB,EAAC;QACzDC,OAAOxB;QACPyB,cAAcvB;QACdwB,cAAc;IAClB;IACA,MAAMC,eAAe3B,UAAU4B;IAC/B,MAAM,CAACC,WAAWC,aAAa,GAAGb,OAAMc,QAAQ,CAACH;IACjD,MAAM,CAACI,mBAAmBC,qBAAqB,GAAGhB,OAAMc,QAAQ,CAAC;IACjE,MAAMG,gBAAgBjB,OAAMkB,MAAM,CAAC;QAC/BnC,OAAOqB;QACPe,WAAW;QACXC,UAAU;QACVC,WAAWzD;QACX0D,SAASlB,iBAAiB,IAAI,GAAGmB,IAAAA,eAAQ,EAACC,IAAAA,qBAAc,EAACpB,cAAcd,YAAYJ,KAAKC,OAAO,MAAM;IACzG;IACA,MAAM,CAACsC,gBAAgBC,iBAAiB,GAAGC,IAAAA,0BAAU;IACrD,MAAMC,YAAY,CAACC,GAAGC,WAAWC,YAAY;QACzC,IAAIC,aAAaf,cAAcgB,OAAO,CAAClD,KAAK;QAC5C,IAAIgD,WAAW;YACX,MAAMG,MAAMC,WAAWJ;YACvB,IAAI,CAACK,MAAMF,MAAM;gBACbF,aAAaE;YACjB,CAAC;QACL,CAAC;QACD,MAAMG,MAAML;QACZ,MAAMM,MAAMR,cAAc,QAAQA,cAAc,WAAW,IAAI,CAAC,CAAC;QACjE,MAAMS,WAAWT,cAAc,YAAYA,cAAc,aAAazC,WAAWD,IAAI;QACrF,IAAIiD,QAAQ,IAAI,EAAE;YACd,MAAMG,YAAYtD,QAAQyB,YAAY,IAAIzB,GAAG;YAC7C,MAAMuD,WAAWC,IAAAA,YAAK,EAACF,YAAYD,WAAWD,KAAKpD,KAAKC;YACxDwD,OAAOd,GAAGY;YACV;QACJ,CAAC;QACD,IAAIG,WAAWP,MAAME,WAAWD;QAChC,IAAI,CAACO,OAAOT,KAAK,CAACQ,WAAW;YACzBA,WAAWF,IAAAA,YAAK,EAACE,UAAU1D,KAAKC;QACpC,CAAC;QACDwD,OAAOd,GAAGe;QACV,IAAI3B,cAAcgB,OAAO,CAACd,SAAS,KAAK,QAAQ;YAC5CM,eAAe,IAAI;gBACf,4BAA4B;gBAC5BR,cAAcgB,OAAO,CAACb,QAAQ,IAAIH,cAAcgB,OAAO,CAACZ,SAAS;gBACjEJ,cAAcgB,OAAO,CAACZ,SAAS,GAAGtD,KAAKH,uBAAuBC,mBAAmBoD,cAAcgB,OAAO,CAACb,QAAQ,GAAGtD;gBAClH8D,UAAUC,GAAGC;YACjB,GAAGb,cAAcgB,OAAO,CAACZ,SAAS;QACtC,CAAC;IACL;IACA,MAAMyB,oBAAoB,CAACjB,IAAI;QAC3B,IAAI,CAACZ,cAAcgB,OAAO,CAACc,iBAAiB,EAAE;YAC1C9B,cAAcgB,OAAO,CAACc,iBAAiB,GAAGnC,cAAc,IAAI,IAAIA,cAAc,KAAK,IAAIA,YAAYoC,OAAO5C,aAAa;QAC3H,CAAC;QACD,MAAMwC,WAAWf,EAAEoB,MAAM,CAAClE,KAAK;QAC/B8B,aAAa+B;IACjB;IACA,MAAMM,2BAA2B,CAACrB,IAAI;QAClCZ,cAAcgB,OAAO,CAACd,SAAS,GAAG;QAClCS,UAAUC,GAAG;IACjB;IACA,MAAMsB,2BAA2B,CAACtB,IAAI;QAClCZ,cAAcgB,OAAO,CAACd,SAAS,GAAG;QAClCS,UAAUC,GAAG;IACjB;IACA,MAAMuB,2BAA2B,CAACvB,IAAI;QAClCH;QACAT,cAAcgB,OAAO,CAACd,SAAS,GAAG;QAClCF,cAAcgB,OAAO,CAACZ,SAAS,GAAGzD;QAClCqD,cAAcgB,OAAO,CAACb,QAAQ,GAAG;IACrC;IACA,MAAMiC,aAAa,CAACxB,IAAI;QACpBc,OAAOd,GAAGzB,cAAcQ;QACxBK,cAAcgB,OAAO,CAACc,iBAAiB,GAAGpC;IAC9C;IACA,MAAM2C,gBAAgB,CAACzB,IAAI;QACvB,IAAI0B,wBAAwB;QAC5B,IAAI1B,EAAE2B,GAAG,KAAKC,qBAAO,EAAE;YACnB7B,UAAUC,GAAG,MAAMjB;YACnB2C,wBAAwB;QAC5B,OAAO,IAAI1B,EAAE2B,GAAG,KAAKE,uBAAS,EAAE;YAC5B9B,UAAUC,GAAG,QAAQjB;YACrB2C,wBAAwB;QAC5B,OAAO,IAAI1B,EAAE2B,GAAG,KAAKG,oBAAM,EAAE;YACzB9B,EAAE+B,cAAc;YAChBhC,UAAUC,GAAG,UAAUjB;YACvB2C,wBAAwB;QAC5B,OAAO,IAAI1B,EAAE2B,GAAG,KAAKK,sBAAQ,EAAE;YAC3BhC,EAAE+B,cAAc;YAChBhC,UAAUC,GAAG,YAAYjB;YACzB2C,wBAAwB;QAC5B,OAAO,IAAI,CAAC1B,EAAEiC,QAAQ,IAAIjC,EAAE2B,GAAG,KAAKO,kBAAI,IAAI7E,QAAQyB,WAAW;YAC3DgC,OAAOd,GAAG3C;YACVqE,wBAAwB;QAC5B,OAAO,IAAI,CAAC1B,EAAEiC,QAAQ,IAAIjC,EAAE2B,GAAG,KAAKQ,iBAAG,IAAI7E,QAAQwB,WAAW;YAC1DgC,OAAOd,GAAG1C;YACVoE,wBAAwB;QAC5B,OAAO,IAAI1B,EAAE2B,GAAG,KAAKS,mBAAK,EAAE;YACxBtB,OAAOd,GAAGzB,cAAcQ;YACxBK,cAAcgB,OAAO,CAACc,iBAAiB,GAAGpC;QAC9C,OAAO,IAAIkB,EAAE2B,GAAG,KAAKU,oBAAM,EAAE;YACzB,IAAIjD,cAAcgB,OAAO,CAACc,iBAAiB,EAAE;gBACzClC,aAAaF;gBACbM,cAAcgB,OAAO,CAACc,iBAAiB,GAAGpC;YAC9C,CAAC;QACL,CAAC;QACD,IAAII,sBAAsBwC,uBAAuB;YAC7CvC,qBAAqBuC;QACzB,CAAC;IACL;IACA,MAAMY,cAAc,CAACtC,IAAI;QACrB,IAAId,sBAAsB,QAAQ;YAC9BC,qBAAqB;YACrBC,cAAcgB,OAAO,CAACd,SAAS,GAAG;QACtC,CAAC;IACL;IACA,MAAMwB,SAAS,CAACd,GAAGe,UAAUwB,kBAAkB;QAC3C,MAAMC,eAAezB,aAAajC,aAAaP,iBAAiBwC;QAChE,MAAM0B,sBAAsBF,oBAAoBzD,aAAaM,cAAcgB,OAAO,CAACc,iBAAiB,KAAKpC,aAAaM,cAAcgB,OAAO,CAACc,iBAAiB,KAAKqB;QAClK,IAAIG;QACJ,IAAIF,cAAc;YACdE,eAAe/C,IAAAA,qBAAc,EAACoB,UAAUtD;YACxCe,gBAAgBkE;QACpB,OAAO,IAAID,uBAAuB,CAAC5D,cAAc;YAC7C,MAAM8D,YAAYrC,WAAWiC;YAC7B,IAAI,CAAChC,MAAMoC,YAAY;gBACnBnE,gBAAgBmB,IAAAA,qBAAc,EAACgD,WAAWlF;YAC9C,CAAC;QACL,CAAC;QACD,IAAI+E,gBAAgBC,qBAAqB;YACrC9E,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASqC,GAAG;gBAC5D9C,OAAOwF;gBACPvF,cAAcoF;YAClB,EAAE;QACN,CAAC;QACDvD,aAAaF;IACjB;IACA,MAAMJ,QAAQ;QACVd;QACAC;QACAyB,WAAWJ;QACXO,SAASL,cAAcgB,OAAO,CAACX,OAAO;QACtCmD,YAAY;YACR7E,MAAM;YACNC,OAAO;YACPC,iBAAiB;YACjBC,iBAAiB;QACrB;QACAH,MAAM8E,IAAAA,gCAAgB,EAAC9E,MAAM;YACzB+E,UAAU,IAAI;YACdC,cAAcpG,YAAYoB,IAAI;QAClC;QACAC,OAAO6E,IAAAA,gCAAgB,EAAC7E,OAAO;YAC3B8E,UAAU,IAAI;YACdC,cAAc;gBACVxG;gBACAyG,cAAc;gBACdC,MAAM;gBACNpF;gBACAqF,MAAM;gBACN,GAAGvG,YAAYwG,OAAO;YAC1B;QACJ;QACAlF,iBAAiB4E,IAAAA,gCAAgB,EAAC5E,iBAAiB;YAC/C6E,UAAU,IAAI;YACdC,cAAc;gBACVK,UAAU,CAAC;gBACXC,UAAU,WAAW,GAAGlF,OAAMmF,aAAa,CAACC,8BAAkB,EAAE,IAAI;gBACpEC,UAAU7G,YAAYwG,OAAO,CAACK,QAAQ;gBACtC,cAAc;gBACdN,MAAM;YACV;QACJ;QACAhF,iBAAiB2E,IAAAA,gCAAgB,EAAC3E,iBAAiB;YAC/C4E,UAAU,IAAI;YACdC,cAAc;gBACVK,UAAU,CAAC;gBACXC,UAAU,WAAW,GAAGlF,OAAMmF,aAAa,CAACG,gCAAoB,EAAE,IAAI;gBACtED,UAAU7G,YAAYwG,OAAO,CAACK,QAAQ;gBACtC,cAAc;gBACdN,MAAM;YACV;QACJ;IACJ;IACA,IAAIQ;IACJ,IAAI3E,cAAcD,WAAW;QACzB4E,iBAAiB3E;IACrB,OAAO,IAAI7B,UAAU,IAAI,IAAIqB,iBAAiB,IAAI,EAAE;QAChDmF,iBAAiBvG,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAIA,eAAe,EAAE;QACrFiC,cAAcgB,OAAO,CAAClD,KAAK,GAAG,IAAI;QAClCkC,cAAcgB,OAAO,CAACX,OAAO,GAAG;IACpC,OAAO;QACH,MAAMiD,eAAe/C,IAAAA,qBAAc,EAACpB,cAAcd;QAClD2B,cAAcgB,OAAO,CAAClD,KAAK,GAAGwF;QAC9BtD,cAAcgB,OAAO,CAACX,OAAO,GAAGC,IAAAA,eAAQ,EAACgD,cAAcrF,KAAKC;QAC5D,IAAIuB,cAAc;YACd6E,iBAAiBvG,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAIA,eAAegE,OAAOuB,aAAa;QAC3G,OAAO;YACHgB,iBAAiBvC,OAAOuB;QAC5B,CAAC;IACL,CAAC;IACDhE,MAAMV,KAAK,CAACd,KAAK,GAAGwG;IACpBhF,MAAMV,KAAK,CAAC,gBAAgB,GAAGX;IAC/BqB,MAAMV,KAAK,CAAC,gBAAgB,GAAGV;IAC/BoB,MAAMV,KAAK,CAAC,gBAAgB,GAAGO,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAIA,eAAeO,SAAS;IAC1G,IAAI6E;IACJjF,MAAMV,KAAK,CAAC,iBAAiB,GAAG,AAAC2F,CAAAA,6BAA6BjF,MAAMV,KAAK,CAAC,iBAAiB,AAAD,MAAO,IAAI,IAAI2F,+BAA+B,KAAK,IAAIA,6BAA6BzG,UAAU4B,aAAa3B,gBAAgB2B,SAAS;IAC9NJ,MAAMV,KAAK,CAACL,QAAQ,GAAGiG,IAAAA,8BAAc,EAAClF,MAAMV,KAAK,CAACL,QAAQ,EAAEsD;IAC5DvC,MAAMV,KAAK,CAAC6F,MAAM,GAAGD,IAAAA,8BAAc,EAAClF,MAAMV,KAAK,CAAC6F,MAAM,EAAErC;IACxD9C,MAAMV,KAAK,CAAC8F,SAAS,GAAGF,IAAAA,8BAAc,EAAClF,MAAMV,KAAK,CAAC8F,SAAS,EAAErC;IAC9D/C,MAAMV,KAAK,CAAC+F,OAAO,GAAGH,IAAAA,8BAAc,EAAClF,MAAMV,KAAK,CAAC+F,OAAO,EAAEzB;IAC1D5D,MAAMT,eAAe,CAAC+F,WAAW,GAAGJ,IAAAA,8BAAc,EAACvC,0BAA0B3C,MAAMT,eAAe,CAAC+F,WAAW;IAC9GtF,MAAMT,eAAe,CAACgG,SAAS,GAAGL,IAAAA,8BAAc,EAAClF,MAAMT,eAAe,CAACgG,SAAS,EAAE1C;IAClF7C,MAAMT,eAAe,CAACiG,YAAY,GAAGN,IAAAA,8BAAc,EAAClF,MAAMT,eAAe,CAACiG,YAAY,EAAE3C;IACxF7C,MAAMR,eAAe,CAAC8F,WAAW,GAAGJ,IAAAA,8BAAc,EAACtC,0BAA0B5C,MAAMR,eAAe,CAAC8F,WAAW;IAC9GtF,MAAMR,eAAe,CAAC+F,SAAS,GAAGL,IAAAA,8BAAc,EAAClF,MAAMR,eAAe,CAAC+F,SAAS,EAAE1C;IAClF7C,MAAMR,eAAe,CAACgG,YAAY,GAAGN,IAAAA,8BAAc,EAAClF,MAAMR,eAAe,CAACgG,YAAY,EAAE3C;IACxF,OAAO7C;AACX"}
|
@@ -521,5 +521,3 @@ const useSpinButtonStyles_unstable = (state)=>{
|
|
521
521
|
state.input.className = (0, _react.mergeClasses)(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
|
522
522
|
return state;
|
523
523
|
}; //# sourceMappingURL=useSpinButtonStyles.styles.js.map
|
524
|
-
|
525
|
-
//# sourceMappingURL=useSpinButtonStyles.styles.js.map
|