@atom-learning/components 5.15.1 → 5.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -3
- package/dist/components/number-input/NumberInput.d.ts +1 -0
- package/dist/components/number-input/NumberInput.js +1 -1
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +1 -0
- package/dist/components/number-input/NumberInputStepper.js +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
# [5.16.0](https://github.com/Atom-Learning/components/compare/v5.15.1...v5.16.0) (2026-02-03)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add emphasis variants to number input ([766810b](https://github.com/Atom-Learning/components/commit/766810b7b55a744ade15f71b5c583ff7d40b6ed1))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Minus as
|
|
1
|
+
import{Minus as V,Plus as _}from"@atom-learning/icons";import*as a from"react";import{styled as j}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as G}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as O}from"../flex/Flex.js";import{Input as U}from"../input/Input.js";import{NumberInputStepper as E}from"./NumberInputStepper.js";const X=j(O,{variants:{appearance:{standard:{},modern:{gap:"1px"}},emphasis:{bold:{gap:"$0"}}}}),T=a.forwardRef(({value:m,defaultValue:$=0,onValueChange:C,min:n=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:p=!1,size:w="md",stepperButtonLabels:I,disabledTooltipContent:z,css:M,appearance:u="standard",emphasis:i,...L},B)=>{const[r,x]=a.useState(m||$);a.useEffect(()=>{typeof m<"u"&&x(m)},[m]);const s=a.useRef(null);a.useImperativeHandle(B,()=>s.current);const R=a.useMemo(()=>G(w),[w]),y={increment:"increment",decrement:"decrement",...I},N={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${o}`,...z},b=r>=o,f=r<=n,v=a.useCallback(e=>Math.min(Math.max(e,n),o),[o,n]),t=a.useCallback(e=>{C==null||C(e),x(e)},[C]),D=a.useCallback(e=>{const l=Number(e.target.value.replace(/\D/g,""));t(l)},[t]),h=a.useCallback(()=>{var e;if(b||p)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(r)+c;t(v(l))},[v,b,p,c,t,r]),g=a.useCallback(()=>{var e;if(f||p)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(r)-c;t(v(l))},[v,f,p,n,c,t,r]),F=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const l=e.key,A={ArrowUp:h,ArrowRight:h,ArrowDown:g,ArrowLeft:g,Home:()=>t(n),End:()=>t(o)}[l];A&&(e.preventDefault(),A(e))},[h,g,t,n,o]),k=r<n||r>o,{state:S,"aria-invalid":H,...K}=L,P={type:"number",value:r,...K,onChange:D,onKeyDown:F,size:w,appearance:u,state:S||(k?"error":void 0),"aria-invalid":H||k||void 0,css:{borderRadius:"0px",width:"$6","> input":{textAlign:"center"},"&:disabled":{opacity:.3,pointerEvents:"none"},...i==="bold"&&{borderRadius:"$1",'> input[aria-invalid="true"]':{color:"$danger"},"&:focus-within > input":{color:"$grey1000"}},...i==="bold"&&u==="standard"&&{border:"none",'&:has(input[aria-invalid="true"])':{border:"2px solid $danger"},"&:focus-within":{border:"2px solid $blue800"}}},ref:s,readOnly:p,disabled:d,"aria-valuemin":n,"aria-valuemax":o,"aria-valuenow":r,role:"spinbutton"};return a.createElement(X,{appearance:u,emphasis:i,css:M},a.createElement(E,{onClick:g,icon:V,css:i!=="bold"?{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"}:void 0,size:R,fieldAppearance:u,emphasis:i,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:N.decrement,label:y.decrement}),a.createElement(U,{...P}),a.createElement(E,{onClick:h,icon:_,css:i!=="bold"?{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"}:void 0,size:R,fieldAppearance:u,emphasis:i,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:N.increment,label:y.increment}))});T.displayName="NumberInput";export{T as NumberInput};
|
|
2
2
|
//# sourceMappingURL=NumberInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { type CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nconst NumberInputContainer = styled(Flex, {\n variants: {\n appearance: {\n standard: {},\n modern: { gap: '1px' }\n }\n }\n})\n\nexport const NumberInput: React.ForwardRefExoticComponent<\n NumberInputProps & { ref: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n css,\n appearance = 'standard',\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value || defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /**\n * Keyboard Accessibility\n *\n * We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n *\n * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...rest,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n css: {\n borderRadius: '0px',\n width: '$6',\n '&:disabled': { opacity: 0.3, pointerEvents: 'none' }\n },\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <NumberInputContainer appearance={appearance} css={css}>\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n css={{\n borderRight: 'none',\n borderTopRightRadius: '0px',\n borderBottomRightRadius: '0px'\n }}\n size={iconSize}\n fieldAppearance={appearance}\n disabled={isAtMin || isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n css={{\n borderLeft: 'none',\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px'\n }}\n size={iconSize}\n fieldAppearance={appearance}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","appearance","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { type CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n emphasis?: 'bold'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nconst NumberInputContainer = styled(Flex, {\n variants: {\n appearance: {\n standard: {},\n modern: { gap: '1px' }\n },\n emphasis: {\n bold: { gap: '$0' }\n }\n }\n})\n\nexport const NumberInput: React.ForwardRefExoticComponent<\n NumberInputProps & { ref: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n css,\n appearance = 'standard',\n emphasis,\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value || defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /**\n * Keyboard Accessibility\n *\n * We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n *\n * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const hasError = internalValue < min || internalValue > max\n const {\n state: externalState,\n 'aria-invalid': externalAriaInvalid,\n ...restProps\n } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...restProps,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n state: externalState || (hasError ? 'error' : undefined),\n 'aria-invalid': externalAriaInvalid || hasError || undefined,\n css: {\n borderRadius: '0px',\n width: '$6',\n '> input': { textAlign: 'center' },\n '&:disabled': { opacity: 0.3, pointerEvents: 'none' },\n ...(emphasis === 'bold' && {\n borderRadius: '$1',\n '> input[aria-invalid=\"true\"]': {\n color: '$danger'\n },\n '&:focus-within > input': {\n color: '$grey1000'\n }\n }),\n ...(emphasis === 'bold' &&\n appearance === 'standard' && {\n border: 'none',\n '&:has(input[aria-invalid=\"true\"])': {\n border: '2px solid $danger'\n },\n '&:focus-within': {\n border: '2px solid $blue800'\n }\n })\n },\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <NumberInputContainer\n appearance={appearance}\n emphasis={emphasis}\n css={css}\n >\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n css={\n emphasis !== 'bold'\n ? {\n borderRight: 'none',\n borderTopRightRadius: '0px',\n borderBottomRightRadius: '0px'\n }\n : undefined\n }\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\n disabled={isAtMin || isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n css={\n emphasis !== 'bold'\n ? {\n borderLeft: 'none',\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px'\n }\n : undefined\n }\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
|
|
@@ -409,6 +409,7 @@ declare const StyledStepperButton: import("@atom-learning/stitches-react/types/s
|
|
|
409
409
|
label: string;
|
|
410
410
|
} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions>, {
|
|
411
411
|
fieldAppearance?: "standard" | "modern" | undefined;
|
|
412
|
+
emphasis?: "bold" | undefined;
|
|
412
413
|
}, {
|
|
413
414
|
sm: string;
|
|
414
415
|
md: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as r from"react";import{styled as e}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=e("span",{zIndex:1}),g=e(c,{borderRadius:"$1",zIndex:1,height:"100% !important","&:hover":{bg:"$grey100","& svg":{color:"$grey800"}},"& svg":{color:"$grey700"},"&:active":{bg:"$grey200","& svg":{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"},variants:{fieldAppearance:{standard:{backgroundColor:"white",borderColor:"$grey800 !important"},modern:{backgroundColor:"$grey100 !important",borderColor:"$grey100 !important","&:hover":{backgroundColor:"$grey200 !important"}}},emphasis:{bold:{"&:hover":{bg:"$primary100","& svg":{color:"$primary800"}},"& svg":{color:"$primary700"},"&:active":{bg:"$primary200","& svg":{color:"$primary900"}}}}},compoundVariants:[{fieldAppearance:"standard",emphasis:"bold",css:{backgroundColor:"white",borderColor:"$primary800 !important"}},{fieldAppearance:"modern",emphasis:"bold",css:{backgroundColor:"white !important","&:hover":{backgroundColor:"$primary100 !important"}}}]}),b=r.forwardRef((a,t)=>{const{icon:n,disabledTooltipContent:i,showTooltip:p,fieldAppearance:l="standard",...d}=a;return r.createElement(o,null,r.createElement(o.Trigger,{asChild:!0},r.createElement(s,{tabIndex:-1},r.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:l,ref:t,...d},r.createElement(m,{is:n})))),p&&r.createElement(o.Content,null,i))});export{b as NumberInputStepper};
|
|
2
2
|
//# sourceMappingURL=NumberInputStepper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderRadius: '$1',\n zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n '& svg': {\n color: '$grey800'\n }\n },\n '& svg': {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n '& svg': {\n color: '$grey900'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n },\n variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important'\n },\n modern: {\n backgroundColor: '$grey100',\n borderColor: '$grey100 !important'\n }\n }\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,aAAc,KACd,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,QAAS,CACP,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,qBACf,EACA,OAAQ,CACN,gBAAiB,WACjB,YAAa,
|
|
1
|
+
{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderRadius: '$1',\n zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n '& svg': {\n color: '$grey800'\n }\n },\n '& svg': {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n '& svg': {\n color: '$grey900'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n },\n variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important'\n },\n modern: {\n backgroundColor: '$grey100 !important',\n borderColor: '$grey100 !important',\n '&:hover': {\n backgroundColor: '$grey200 !important'\n }\n }\n },\n emphasis: {\n bold: {\n '&:hover': {\n bg: '$primary100',\n '& svg': {\n color: '$primary800'\n }\n },\n '& svg': {\n color: '$primary700'\n },\n '&:active': {\n bg: '$primary200',\n '& svg': {\n color: '$primary900'\n }\n }\n }\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n css: {\n backgroundColor: 'white',\n borderColor: '$primary800 !important'\n }\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n css: {\n backgroundColor: 'white !important',\n '&:hover': {\n backgroundColor: '$primary100 !important'\n }\n }\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,aAAc,KACd,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,QAAS,CACP,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,qBACf,EACA,OAAQ,CACN,gBAAiB,sBACjB,YAAa,sBACb,UAAW,CACT,gBAAiB,qBACnB,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,UAAW,CACT,GAAI,cACJ,QAAS,CACP,MAAO,aACT,CACF,EACA,QAAS,CACP,MAAO,aACT,EACA,WAAY,CACV,GAAI,cACJ,QAAS,CACP,MAAO,aACT,CACF,CACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,gBAAiB,WACjB,SAAU,OACV,IAAK,CACH,gBAAiB,QACjB,YAAa,wBACf,CACF,EACA,CACE,gBAAiB,SACjB,SAAU,OACV,IAAK,CACH,gBAAiB,mBACjB,UAAW,CACT,gBAAiB,wBACnB,CACF,CACF,CACF,CACF,CAAC,EAYYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,cACfC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,EACtBR,EAAAA,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}
|