@pega/cosmos-react-core 8.15.4 → 8.15.5
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/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +1 -1
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/DateTime/utils.d.ts.map +1 -1
- package/lib/components/DateTime/utils.js +48 -79
- package/lib/components/DateTime/utils.js.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.js +26 -0
- package/lib/components/MultiStepForm/FormProgress.styles.js.map +1 -1
- package/lib/components/Select/Select.d.ts +1 -1
- package/lib/components/Select/Select.d.ts.map +1 -1
- package/lib/components/Select/Select.js +11 -7
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Slider/Slider.d.ts.map +1 -1
- package/lib/components/Slider/Slider.js +18 -3
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +1 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +1 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +1 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +1 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode, ChangeEventHandler, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { withTestIds } from '../../utils';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n /** Pass Options components as children to render the options of the Select list. */\n children: ReactNode;\n /** Called when an Option is chosen within the list. */\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /** Callback fired when AI suggestion is accepted/rejected */\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value?: FormControlProps['value'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass an array of Action objects to append button(s) inline with the Select. */\n actions?: Action[];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** A ref to the select element. */\n ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean; readOnly: boolean }>(props => {\n const { readOnly } = props;\n const {\n base,\n components: {\n 'form-control': { 'foreground-color': fg, 'background-color': backgroundColor },\n select\n }\n } = props.theme;\n const foreground = encodeURIComponent(fg);\n const { rtl } = useDirection();\n\n return css`\n appearance: none;\n -webkit-appearance: none;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: 100%;\n height: ${select.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding-inline-start: ${select.padding};\n padding-inline-end: calc(4 * ${base.spacing});\n\n /* cspell:disable-next-line */\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: calc(2 * ${base.spacing}) auto;\n background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n border-width: ${select['border-width']};\n border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n ${readOnly &&\n css`\n background-image: none;\n `}\n\n ${!props.status &&\n css`\n border-color: ${select['border-color']};\n `}\n\n &:has(option[value='']:checked, option:not([value]):checked) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n\n & option {\n color: ${fg};\n\n &[value=''],\n &:not([value]) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n }\n\n &::-ms-expand {\n display: none;\n }\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: ForwardRefForwardPropsComponent<SelectProps> = forwardRef(function Select(\n props: PropsWithoutRef<SelectProps>,\n ref: SelectProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n additionalInfo,\n children,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required = false,\n disabled = false,\n readOnly = false,\n actions,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getSelectTestIds);\n\n const Comp = (\n <StyledFormControl\n data-testid={testIds.control}\n {...restProps}\n as={StyledSelect}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n id={id}\n status={status}\n required={required}\n disabled={disabled}\n label={label}\n readOnly={readOnly}\n ref={ref}\n onMouseDown={\n readOnly\n ? (e: MouseEvent<HTMLSelectElement>) => {\n e.preventDefault();\n }\n : undefined\n }\n onKeyDown={\n readOnly\n ? (e: KeyboardEvent) => {\n // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n }\n : undefined\n }\n >\n {children}\n </StyledFormControl>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n actions={actions}\n onResolveSuggestion={onResolveSuggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(Select, getSelectTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type {\n PropsWithoutRef,\n Ref,\n ReactNode,\n ChangeEventHandler,\n MouseEvent,\n KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { withTestIds } from '../../utils';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nconst getSelectArrowSvg = (color: string) =>\n // cspell:disable-next-line\n `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${encodeURIComponent(color)}'%3E%3Cpath d='M21 8v2.75l-8.5 6.5-8.5-6.5V8l8.5 6.5z'/%3E%3C/svg%3E\")`;\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n /** Pass Options components as children to render the options of the Select list. */\n children: ReactNode;\n /** Called when an Option is chosen within the list. */\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /** Callback fired when AI suggestion is accepted/rejected */\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value?: FormControlProps['value'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass an array of Action objects to append button(s) inline with the Select. */\n actions?: Action[];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** A ref to the select element. */\n ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ hasStatus: boolean; readOnly: boolean }>(props => {\n const { readOnly, hasStatus } = props;\n const {\n base,\n components: {\n 'form-control': { 'foreground-color': fg, 'background-color': backgroundColor },\n select\n }\n } = props.theme;\n const { rtl } = useDirection();\n\n return css`\n appearance: none;\n -webkit-appearance: none;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: 100%;\n height: ${select.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding-inline-start: ${select.padding};\n padding-inline-end: calc(4 * ${base.spacing});\n background-image: ${getSelectArrowSvg(fg)};\n background-repeat: no-repeat;\n background-size: calc(2 * ${base.spacing}) auto;\n background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n border-width: ${select['border-width']};\n border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n @media (forced-colors: active) {\n background-image: ${getSelectArrowSvg('CanvasText')};\n }\n\n ${readOnly &&\n css`\n background-image: none;\n `}\n\n ${!hasStatus &&\n css`\n border-color: ${select['border-color']};\n `}\n\n &:has(option[value='']:checked, option:not([value]):checked) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n\n & option {\n color: ${fg};\n\n &[value=''],\n &:not([value]) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n }\n\n &::-ms-expand {\n display: none;\n }\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: ForwardRefForwardPropsComponent<SelectProps> = forwardRef(function Select(\n props: PropsWithoutRef<SelectProps>,\n ref: SelectProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n additionalInfo,\n children,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required = false,\n disabled = false,\n readOnly = false,\n actions,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getSelectTestIds);\n\n const Comp = (\n <StyledFormControl\n data-testid={testIds.control}\n {...restProps}\n as={StyledSelect}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n id={id}\n hasStatus={!!status}\n status={status}\n required={required}\n disabled={disabled}\n label={label}\n readOnly={readOnly}\n ref={ref}\n onMouseDown={\n readOnly\n ? (e: MouseEvent<HTMLSelectElement>) => {\n e.preventDefault();\n }\n : undefined\n }\n onKeyDown={\n readOnly\n ? (e: KeyboardEvent) => {\n // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n }\n : undefined\n }\n >\n {children}\n </StyledFormControl>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n actions={actions}\n onResolveSuggestion={onResolveSuggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(Select, getSelectTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;;;;AA0R9C,wBAAqD"}
|
|
@@ -18,13 +18,18 @@ const Slider = forwardRef(function Slider(props, ref) {
|
|
|
18
18
|
const trackRef = useRef(null);
|
|
19
19
|
const [inDrag, setInDrag] = useState(false);
|
|
20
20
|
const [inputValue, setInputValue] = useState(value.toString());
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
const parsed = parseFloat(inputValue);
|
|
23
|
+
if (!Number.isNaN(parsed) && parsed !== value) {
|
|
24
|
+
setInputValue(value.toString());
|
|
25
|
+
}
|
|
26
|
+
}, [value]);
|
|
21
27
|
const setValue = useCallback((newValue) => {
|
|
22
28
|
if (disabled || readOnly)
|
|
23
29
|
return;
|
|
24
30
|
const normalizedValue = Math.min(Math.max(newValue, min), max);
|
|
25
|
-
setInputValue(normalizedValue.toString());
|
|
26
31
|
onChange(normalizedValue);
|
|
27
|
-
}, [disabled, readOnly, onChange]);
|
|
32
|
+
}, [disabled, readOnly, onChange, min, max]);
|
|
28
33
|
const { start, end } = useDirection();
|
|
29
34
|
const moveThumb = useCallback((e) => {
|
|
30
35
|
if (disabled || readOnly)
|
|
@@ -116,7 +121,17 @@ const Slider = forwardRef(function Slider(props, ref) {
|
|
|
116
121
|
setInDrag(true);
|
|
117
122
|
e.preventDefault(); // Prevent dispatching mouse events as some browser may do that
|
|
118
123
|
onDragStart?.();
|
|
119
|
-
}, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` })] }), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }))] }), showInput && !preview && (_jsx(NumberInput, { "data-testid": testIds.control, id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, showGroupSeparators: false, onChange: setInputValue, onBlur: v =>
|
|
124
|
+
}, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` })] }), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }))] }), showInput && !preview && (_jsx(NumberInput, { "data-testid": testIds.control, id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, showGroupSeparators: false, onChange: setInputValue, onBlur: v => {
|
|
125
|
+
const num = Number(v);
|
|
126
|
+
if (!Number.isFinite(num)) {
|
|
127
|
+
setInputValue(value.toString());
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
const normalized = getNearestValue(num, min, max, step);
|
|
131
|
+
const clamped = Math.min(Math.max(normalized, min), max);
|
|
132
|
+
setInputValue(clamped.toString());
|
|
133
|
+
setValue(clamped);
|
|
134
|
+
}, size: size, readOnly: readOnly, disabled: disabled, "aria-label": label?.toString() })), preview && _jsx(StyledPreview, { id: `${id}-value`, value: value, size: size })] }));
|
|
120
135
|
return label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, additionalInfo: additionalInfo, children: Comp })) : (Comp);
|
|
121
136
|
});
|
|
122
137
|
export default withTestIds(Slider, getSliderTestIds);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState, forwardRef } from 'react';\nimport type {\n KeyboardEvent,\n FunctionComponent,\n PropsWithoutRef,\n CSSProperties,\n Ref,\n TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useTestIds, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport type { ForwardProps } from '../../types';\nimport { cap, withTestIds } from '../../utils';\n\nimport type SliderProps from './Slider.types';\nimport {\n StyledSlider,\n StyledTrack,\n StyledThumb,\n StyledSliderTrackWrapper,\n StyledBar,\n StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\nimport { getSliderTestIds } from './Slider.test-ids';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(function Slider(\n props: PropsWithoutRef<SliderProps>,\n ref: Ref<HTMLDivElement>\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n required,\n status,\n info,\n label,\n labelHidden,\n min = 0,\n max = 100,\n step = 1,\n value = min,\n orientation = 'horizontal',\n preview,\n disabled = false,\n readOnly = false,\n showInput = true,\n showProgress,\n ticks = {},\n additionalInfo,\n onChange,\n autoFocus,\n onDragStart,\n onDragEnd: onDragEndProp,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getSliderTestIds);\n\n const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n const trackRef = useRef<HTMLDivElement>(null);\n const [inDrag, setInDrag] = useState(false);\n const [inputValue, setInputValue] = useState(value.toString());\n\n const setValue = useCallback(\n (newValue: number) => {\n if (disabled || readOnly) return;\n const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n setInputValue(normalizedValue.toString());\n onChange(normalizedValue);\n },\n [disabled, readOnly, onChange]\n );\n\n const { start, end } = useDirection();\n\n const moveThumb = useCallback(\n (e: MouseEvent | TouchEvent) => {\n if (disabled || readOnly) return;\n if (trackRef.current) {\n const track = trackRef.current.getBoundingClientRect();\n const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n const newPosition =\n orientation === 'horizontal'\n ? (clientX - track[start]) / (track[end] - track[start])\n : (clientY - track.bottom) / (track.top - track.bottom);\n\n const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n setValue(getNearestValue(normalizedValue, min, max, step));\n }\n thumbRef.current?.focus();\n },\n [disabled, readOnly, step, min, max, setValue, start, end]\n );\n\n const onThumbKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End'\n ].includes(e.key)\n )\n e.preventDefault();\n\n switch (e.key) {\n case 'ArrowDown':\n case `Arrow${cap(start)}`:\n setValue(value - step);\n break;\n case 'ArrowUp':\n case `Arrow${cap(end)}`:\n setValue(value + step);\n break;\n case 'PageUp':\n setValue(value + 10 * step);\n break;\n case 'PageDown':\n setValue(value - 10 * step);\n break;\n case 'Home':\n setValue(min);\n break;\n case 'End':\n setValue(max);\n break;\n default:\n }\n },\n [setValue, value, step, start, end]\n );\n\n useEffect(() => {\n const onDragEnd = () => {\n setInDrag(false);\n if (inDrag) onDragEndProp?.();\n };\n\n document.addEventListener('mouseup', onDragEnd);\n document.addEventListener('touchend', onDragEnd);\n document.addEventListener('touchcancel', onDragEnd);\n if (inDrag) {\n document.addEventListener('mousemove', moveThumb);\n document.addEventListener('touchmove', moveThumb);\n }\n\n return () => {\n document.removeEventListener('mouseup', onDragEnd);\n document.removeEventListener('touchend', onDragEnd);\n document.removeEventListener('touchcancel', onDragEnd);\n document.removeEventListener('mousemove', moveThumb);\n document.removeEventListener('touchmove', moveThumb);\n };\n }, [inDrag, moveThumb, onDragEndProp]);\n\n useEffect(() => {\n if (autoFocus) thumbRef.current?.focus();\n }, [autoFocus]);\n\n const percentage = ((Number(value) - min) / (max - min)) * 100;\n const size = calculateValueLength(min, max, step);\n\n const Comp = (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n as={StyledSlider}\n container={{\n alignItems: 'start',\n direction: orientation === 'horizontal' ? 'row' : 'column'\n }}\n orientation={orientation}\n status={status}\n disabled={disabled}\n readOnly={readOnly}\n size={size}\n style={\n {\n '--slider-value': `${percentage}%`,\n userSelect: inDrag ? 'none' : 'auto'\n } as CSSProperties\n }\n >\n <Grid as={StyledSliderTrackWrapper} container>\n <Flex\n as={StyledTrack}\n ref={trackRef}\n onMouseDown={moveThumb}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <StyledBar showProgress={showProgress} />\n <StyledThumb\n ref={thumbRef}\n role='slider'\n tabIndex={0}\n onKeyDown={onThumbKeyDown}\n onMouseDown={() => {\n setInDrag(true);\n onDragStart?.();\n }}\n onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n setInDrag(true);\n e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n onDragStart?.();\n }}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-orientation={orientation}\n aria-readonly={readOnly || undefined}\n aria-disabled={disabled || undefined}\n id={id}\n aria-label={label?.toString()}\n aria-describedby={`${id}-info`}\n aria-controls={`${id}-value`}\n />\n </Flex>\n {Object.keys(ticks).length > 0 && (\n <SliderTicks\n ticks={ticks}\n min={min}\n max={max}\n step={step}\n orientation={orientation}\n onClick={setValue}\n />\n )}\n </Grid>\n {showInput && !preview && (\n <NumberInput\n data-testid={testIds.control}\n id={`${id}-value`}\n status={status}\n min={min}\n max={max}\n step={step}\n value={inputValue}\n showGroupSeparators={false}\n onChange={setInputValue}\n onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n size={size}\n readOnly={readOnly}\n disabled={disabled}\n aria-label={label?.toString()}\n />\n )}\n {preview && <StyledPreview id={`${id}-value`} value={value} size={size} />}\n </Flex>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(Slider, getSliderTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState, forwardRef } from 'react';\nimport type {\n KeyboardEvent,\n FunctionComponent,\n PropsWithoutRef,\n CSSProperties,\n Ref,\n TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useTestIds, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport type { ForwardProps } from '../../types';\nimport { cap, withTestIds } from '../../utils';\n\nimport type SliderProps from './Slider.types';\nimport {\n StyledSlider,\n StyledTrack,\n StyledThumb,\n StyledSliderTrackWrapper,\n StyledBar,\n StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\nimport { getSliderTestIds } from './Slider.test-ids';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(function Slider(\n props: PropsWithoutRef<SliderProps>,\n ref: Ref<HTMLDivElement>\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n required,\n status,\n info,\n label,\n labelHidden,\n min = 0,\n max = 100,\n step = 1,\n value = min,\n orientation = 'horizontal',\n preview,\n disabled = false,\n readOnly = false,\n showInput = true,\n showProgress,\n ticks = {},\n additionalInfo,\n onChange,\n autoFocus,\n onDragStart,\n onDragEnd: onDragEndProp,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getSliderTestIds);\n\n const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n const trackRef = useRef<HTMLDivElement>(null);\n const [inDrag, setInDrag] = useState(false);\n const [inputValue, setInputValue] = useState(value.toString());\n\n useEffect(() => {\n const parsed = parseFloat(inputValue);\n if (!Number.isNaN(parsed) && parsed !== value) {\n setInputValue(value.toString());\n }\n }, [value]);\n\n const setValue = useCallback(\n (newValue: number) => {\n if (disabled || readOnly) return;\n const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n onChange(normalizedValue);\n },\n [disabled, readOnly, onChange, min, max]\n );\n\n const { start, end } = useDirection();\n\n const moveThumb = useCallback(\n (e: MouseEvent | TouchEvent) => {\n if (disabled || readOnly) return;\n if (trackRef.current) {\n const track = trackRef.current.getBoundingClientRect();\n const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n const newPosition =\n orientation === 'horizontal'\n ? (clientX - track[start]) / (track[end] - track[start])\n : (clientY - track.bottom) / (track.top - track.bottom);\n\n const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n setValue(getNearestValue(normalizedValue, min, max, step));\n }\n thumbRef.current?.focus();\n },\n [disabled, readOnly, step, min, max, setValue, start, end]\n );\n\n const onThumbKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End'\n ].includes(e.key)\n )\n e.preventDefault();\n\n switch (e.key) {\n case 'ArrowDown':\n case `Arrow${cap(start)}`:\n setValue(value - step);\n break;\n case 'ArrowUp':\n case `Arrow${cap(end)}`:\n setValue(value + step);\n break;\n case 'PageUp':\n setValue(value + 10 * step);\n break;\n case 'PageDown':\n setValue(value - 10 * step);\n break;\n case 'Home':\n setValue(min);\n break;\n case 'End':\n setValue(max);\n break;\n default:\n }\n },\n [setValue, value, step, start, end]\n );\n\n useEffect(() => {\n const onDragEnd = () => {\n setInDrag(false);\n if (inDrag) onDragEndProp?.();\n };\n\n document.addEventListener('mouseup', onDragEnd);\n document.addEventListener('touchend', onDragEnd);\n document.addEventListener('touchcancel', onDragEnd);\n if (inDrag) {\n document.addEventListener('mousemove', moveThumb);\n document.addEventListener('touchmove', moveThumb);\n }\n\n return () => {\n document.removeEventListener('mouseup', onDragEnd);\n document.removeEventListener('touchend', onDragEnd);\n document.removeEventListener('touchcancel', onDragEnd);\n document.removeEventListener('mousemove', moveThumb);\n document.removeEventListener('touchmove', moveThumb);\n };\n }, [inDrag, moveThumb, onDragEndProp]);\n\n useEffect(() => {\n if (autoFocus) thumbRef.current?.focus();\n }, [autoFocus]);\n\n const percentage = ((Number(value) - min) / (max - min)) * 100;\n const size = calculateValueLength(min, max, step);\n\n const Comp = (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n as={StyledSlider}\n container={{\n alignItems: 'start',\n direction: orientation === 'horizontal' ? 'row' : 'column'\n }}\n orientation={orientation}\n status={status}\n disabled={disabled}\n readOnly={readOnly}\n size={size}\n style={\n {\n '--slider-value': `${percentage}%`,\n userSelect: inDrag ? 'none' : 'auto'\n } as CSSProperties\n }\n >\n <Grid as={StyledSliderTrackWrapper} container>\n <Flex\n as={StyledTrack}\n ref={trackRef}\n onMouseDown={moveThumb}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <StyledBar showProgress={showProgress} />\n <StyledThumb\n ref={thumbRef}\n role='slider'\n tabIndex={0}\n onKeyDown={onThumbKeyDown}\n onMouseDown={() => {\n setInDrag(true);\n onDragStart?.();\n }}\n onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n setInDrag(true);\n e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n onDragStart?.();\n }}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-orientation={orientation}\n aria-readonly={readOnly || undefined}\n aria-disabled={disabled || undefined}\n id={id}\n aria-label={label?.toString()}\n aria-describedby={`${id}-info`}\n aria-controls={`${id}-value`}\n />\n </Flex>\n {Object.keys(ticks).length > 0 && (\n <SliderTicks\n ticks={ticks}\n min={min}\n max={max}\n step={step}\n orientation={orientation}\n onClick={setValue}\n />\n )}\n </Grid>\n {showInput && !preview && (\n <NumberInput\n data-testid={testIds.control}\n id={`${id}-value`}\n status={status}\n min={min}\n max={max}\n step={step}\n value={inputValue}\n showGroupSeparators={false}\n onChange={setInputValue}\n onBlur={v => {\n const num = Number(v);\n\n if (!Number.isFinite(num)) {\n setInputValue(value.toString());\n return;\n }\n\n const normalized = getNearestValue(num, min, max, step);\n const clamped = Math.min(Math.max(normalized, min), max);\n setInputValue(clamped.toString());\n setValue(clamped);\n }}\n size={size}\n readOnly={readOnly}\n disabled={disabled}\n aria-label={label?.toString()}\n />\n )}\n {preview && <StyledPreview id={`${id}-value`} value={value} size={size} />}\n </Flex>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(Slider, getSliderTestIds);\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAigDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsMxB,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAvsDzC,wBA6uDE"}
|