@hazelcast/ui 1.2.1-next.24 → 1.3.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/lib/Calendar/components/CalendarHeader.tsx +45 -0
- package/lib/Calendar/components/CalendarInput.tsx +50 -0
- package/lib/Calendar/components/CalendarTime.tsx +117 -0
- package/lib/Calendar/helpers/consts.ts +99 -0
- package/lib/IconButton.d.ts +2 -0
- package/lib/IconButton.js +2 -2
- package/lib/IconButton.js.map +1 -1
- package/lib/NumberField.js +15 -3
- package/lib/NumberField.js.map +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { FC } from 'react'
|
|
2
|
+
import { ReactDatePickerProps } from 'react-datepicker'
|
|
3
|
+
import { ChevronLeft, ChevronRight } from 'react-feather'
|
|
4
|
+
import { format } from 'date-fns'
|
|
5
|
+
|
|
6
|
+
import { IconButton } from '../../IconButton'
|
|
7
|
+
|
|
8
|
+
import styles from '../Calendar.module.scss'
|
|
9
|
+
import styleConsts from '../../../styles/constants/export.module.scss'
|
|
10
|
+
|
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
+
type ExtractFnArgumentType<T> = T extends (arg: infer U) => any ? U : never
|
|
13
|
+
|
|
14
|
+
/*
|
|
15
|
+
* Note:
|
|
16
|
+
* react-datepicker does expose header props type as "renderCustomHeader", however the property is defined
|
|
17
|
+
* as a render-prop.
|
|
18
|
+
* This way we can pick the argument type from the render function and convert the property
|
|
19
|
+
* to use a regular component, rather than a render-prop.
|
|
20
|
+
*
|
|
21
|
+
* There is no significant benefit other than readability.
|
|
22
|
+
*/
|
|
23
|
+
export type CalendarHeaderProps = ExtractFnArgumentType<ReactDatePickerProps['renderCustomHeader']>
|
|
24
|
+
|
|
25
|
+
export const CalendarHeader: FC<CalendarHeaderProps> = ({ date, decreaseMonth, increaseMonth }) => {
|
|
26
|
+
return (
|
|
27
|
+
<div data-test="date-picker-header" className={styles.headerContainer}>
|
|
28
|
+
<IconButton
|
|
29
|
+
data-test="date-picker-header-icon-previous"
|
|
30
|
+
icon={ChevronLeft}
|
|
31
|
+
ariaLabel="Previous month"
|
|
32
|
+
iconColor={styleConsts.colorPrimary}
|
|
33
|
+
onClick={decreaseMonth}
|
|
34
|
+
/>
|
|
35
|
+
<div className={styles.headerMonthAndYear}>{format(date, 'MMMM y')}</div>
|
|
36
|
+
<IconButton
|
|
37
|
+
data-test="date-picker-header-icon-next"
|
|
38
|
+
icon={ChevronRight}
|
|
39
|
+
ariaLabel="Next month"
|
|
40
|
+
iconColor={styleConsts.colorPrimary}
|
|
41
|
+
onClick={increaseMonth}
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { FC, ChangeEvent, InputHTMLAttributes, forwardRef } from 'react'
|
|
2
|
+
import { Calendar } from 'react-feather'
|
|
3
|
+
|
|
4
|
+
import { TextField } from '../../TextField'
|
|
5
|
+
import { CalendarSize } from '../Calendar'
|
|
6
|
+
|
|
7
|
+
export type CalendarInputInternalProps = {
|
|
8
|
+
onChange: (e: ChangeEvent<HTMLInputElement>) => void
|
|
9
|
+
} & CalendarInputExtraProps &
|
|
10
|
+
Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>
|
|
11
|
+
|
|
12
|
+
export const CalendarInputInternal: FC<CalendarInputInternalProps> = ({ className, value, onChange, label, textFieldSize, ...props }) => (
|
|
13
|
+
<TextField<'text'>
|
|
14
|
+
{...props}
|
|
15
|
+
size={textFieldSize}
|
|
16
|
+
data-test="calendar-input"
|
|
17
|
+
value={value?.toString()}
|
|
18
|
+
onChange={onChange}
|
|
19
|
+
inputContainerClassName={className}
|
|
20
|
+
type="text"
|
|
21
|
+
name="calendar-input"
|
|
22
|
+
label={label}
|
|
23
|
+
inputTrailingIcon={Calendar}
|
|
24
|
+
inputTrailingIconLabel="Calendar Icon"
|
|
25
|
+
/>
|
|
26
|
+
)
|
|
27
|
+
|
|
28
|
+
export type CalendarInputExtraProps = {
|
|
29
|
+
label: string
|
|
30
|
+
textFieldSize?: CalendarSize
|
|
31
|
+
className?: string
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/*
|
|
35
|
+
* Note:
|
|
36
|
+
* The types are not available, the element is internally instantiated via React.cloneElement
|
|
37
|
+
* We need to accept the props as unknown and cast them in place
|
|
38
|
+
* Otherwise "Calendar.customInput" would require us to pass them explicitly
|
|
39
|
+
*/
|
|
40
|
+
export type CalendarInputProps = unknown & CalendarInputExtraProps
|
|
41
|
+
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
43
|
+
export const CalendarInput: FC<CalendarInputProps> = forwardRef((props, ref) => {
|
|
44
|
+
// Note: Cast the "unknown" props to the actual type
|
|
45
|
+
const propsTyped = props as CalendarInputInternalProps
|
|
46
|
+
|
|
47
|
+
return <CalendarInputInternal {...propsTyped} />
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
CalendarInput.displayName = 'CalendarInput'
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react'
|
|
2
|
+
import { format, parse } from 'date-fns'
|
|
3
|
+
|
|
4
|
+
import { Button } from '../../Button'
|
|
5
|
+
import { timePoints } from '../helpers/consts'
|
|
6
|
+
import { TimeField } from '../../TimeField'
|
|
7
|
+
|
|
8
|
+
import styles from './CalendarTime.module.scss'
|
|
9
|
+
|
|
10
|
+
// Note: AM/PM 1-12 hours time
|
|
11
|
+
const DATE_FORMAT = 'hh:mm a'
|
|
12
|
+
// Note: 0-23 hours time
|
|
13
|
+
const DATE_FORMAT_NO_MERIDIEM = 'HH:mm'
|
|
14
|
+
|
|
15
|
+
export type CalendarTimeInternalProps = {
|
|
16
|
+
date: Date
|
|
17
|
+
onChange: (timeString: string) => void
|
|
18
|
+
value: string
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const CalendarTimeInternal: FC<CalendarTimeInternalProps> = ({ date, value, onChange }) => {
|
|
22
|
+
const [time, setTime] = useState(value)
|
|
23
|
+
const [timeInputError, setTimeInputError] = useState<string | undefined>()
|
|
24
|
+
|
|
25
|
+
/*
|
|
26
|
+
* Note:
|
|
27
|
+
* We cannot override how react-datepicker handles time values.
|
|
28
|
+
* It always expects format of "xx:xx" to parse the hours and minutes from. (See Source 2. link below)
|
|
29
|
+
*
|
|
30
|
+
* This is not an issue for majority of browsers, however as for IE11, where <input type="time" />
|
|
31
|
+
* fall back to <input type="text" />, this becomes an issue.
|
|
32
|
+
*
|
|
33
|
+
* Furthermore, the package even does not handle potential thrown error by date-fns' parse.
|
|
34
|
+
* Even the live demos do crash on an input like "10:10q" (See source 1. link below).
|
|
35
|
+
*
|
|
36
|
+
* For this reasons we need to provide our own wrapper around the functionality to achieve 2 things:
|
|
37
|
+
* - Provide IE11 with a proper fallback
|
|
38
|
+
* - Prevent the invalid input value crash
|
|
39
|
+
* - Provide the user with an input error in case the value is invalid
|
|
40
|
+
*
|
|
41
|
+
* Source(1): https://reactdatepicker.com/#example-custom-time-input
|
|
42
|
+
* Source(2): https://github.com/Hacker0x01/react-datepicker/blob/master/src/inputTime.jsx#L32
|
|
43
|
+
*/
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
setTime(value)
|
|
46
|
+
}, [value])
|
|
47
|
+
|
|
48
|
+
const handleTimeInputChange = useCallback(
|
|
49
|
+
({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
|
|
50
|
+
setTime(value)
|
|
51
|
+
const parsedDate = parse(value, DATE_FORMAT_NO_MERIDIEM, date)
|
|
52
|
+
|
|
53
|
+
if (!isNaN(parsedDate.valueOf())) {
|
|
54
|
+
setTimeInputError(undefined)
|
|
55
|
+
onChange(value)
|
|
56
|
+
} else {
|
|
57
|
+
setTimeInputError('Invalid time')
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
[onChange, date],
|
|
61
|
+
)
|
|
62
|
+
|
|
63
|
+
const handleDateClick = useCallback(
|
|
64
|
+
(dp: string) => () => {
|
|
65
|
+
// Note: Input time (derived from timePoints) is in 'DATE_FORMAT'
|
|
66
|
+
const parsedDate = parse(dp, DATE_FORMAT, date)
|
|
67
|
+
// Note: Output time, that we feed back to 'react-datetime' is in 'DATE_FORMAT_NO_MERIDIEM' format
|
|
68
|
+
const timeStringWithoutAm = format(parsedDate, DATE_FORMAT_NO_MERIDIEM)
|
|
69
|
+
onChange(timeStringWithoutAm)
|
|
70
|
+
},
|
|
71
|
+
[onChange, date],
|
|
72
|
+
)
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<div data-test="calendar-time" className={styles.container}>
|
|
76
|
+
<div data-test="calendar-time-header" className={styles.header}>
|
|
77
|
+
<TimeField
|
|
78
|
+
showAriaLabel
|
|
79
|
+
label="Time Input"
|
|
80
|
+
error={timeInputError}
|
|
81
|
+
className={styles.input}
|
|
82
|
+
name="time"
|
|
83
|
+
value={time.toString()}
|
|
84
|
+
onChange={handleTimeInputChange}
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
<div data-test="calendar-time-timePoints" className={styles.timePoints}>
|
|
88
|
+
{timePoints.map((tP) => (
|
|
89
|
+
<Button
|
|
90
|
+
className={styles.timePoint}
|
|
91
|
+
bodyClassName={styles.timePointBody}
|
|
92
|
+
key={tP}
|
|
93
|
+
kind="transparent"
|
|
94
|
+
onClick={handleDateClick(tP)}
|
|
95
|
+
>
|
|
96
|
+
{tP}
|
|
97
|
+
</Button>
|
|
98
|
+
))}
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/*
|
|
105
|
+
* Note:
|
|
106
|
+
* The types are not available, the element is internally instantiated via React.cloneElement
|
|
107
|
+
* We need to accept the props as unknown and cast them in place
|
|
108
|
+
* Otherwise "Calendar.customTimeInput" would require us to pass them explicitly
|
|
109
|
+
*/
|
|
110
|
+
export type CalendarTimeProps = unknown
|
|
111
|
+
|
|
112
|
+
export const CalendarTime: FC<CalendarTimeProps> = (props) => {
|
|
113
|
+
// Note: Cast the "unknown" props to the actual type
|
|
114
|
+
const propsTyped = props as CalendarTimeInternalProps
|
|
115
|
+
|
|
116
|
+
return <CalendarTimeInternal {...propsTyped} />
|
|
117
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
export const timePoints = [
|
|
2
|
+
// Source: https://simple.wikipedia.org/wiki/12-hour_clock
|
|
3
|
+
'12:00 AM',
|
|
4
|
+
'12:15 AM',
|
|
5
|
+
'12:30 AM',
|
|
6
|
+
'12:45 AM',
|
|
7
|
+
'01:00 AM',
|
|
8
|
+
'01:15 AM',
|
|
9
|
+
'01:30 AM',
|
|
10
|
+
'01:45 AM',
|
|
11
|
+
'02:00 AM',
|
|
12
|
+
'02:15 AM',
|
|
13
|
+
'02:30 AM',
|
|
14
|
+
'02:45 AM',
|
|
15
|
+
'03:00 AM',
|
|
16
|
+
'03:15 AM',
|
|
17
|
+
'03:30 AM',
|
|
18
|
+
'03:45 AM',
|
|
19
|
+
'04:00 AM',
|
|
20
|
+
'04:15 AM',
|
|
21
|
+
'04:30 AM',
|
|
22
|
+
'04:45 AM',
|
|
23
|
+
'05:00 AM',
|
|
24
|
+
'05:15 AM',
|
|
25
|
+
'05:30 AM',
|
|
26
|
+
'05:45 AM',
|
|
27
|
+
'06:00 AM',
|
|
28
|
+
'06:15 AM',
|
|
29
|
+
'06:30 AM',
|
|
30
|
+
'06:45 AM',
|
|
31
|
+
'07:00 AM',
|
|
32
|
+
'07:15 AM',
|
|
33
|
+
'07:30 AM',
|
|
34
|
+
'07:45 AM',
|
|
35
|
+
'08:00 AM',
|
|
36
|
+
'08:15 AM',
|
|
37
|
+
'08:30 AM',
|
|
38
|
+
'08:45 AM',
|
|
39
|
+
'09:00 AM',
|
|
40
|
+
'09:15 AM',
|
|
41
|
+
'09:30 AM',
|
|
42
|
+
'09:45 AM',
|
|
43
|
+
'10:00 AM',
|
|
44
|
+
'10:15 AM',
|
|
45
|
+
'10:30 AM',
|
|
46
|
+
'10:45 AM',
|
|
47
|
+
'11:00 AM',
|
|
48
|
+
'11:15 AM',
|
|
49
|
+
'11:30 AM',
|
|
50
|
+
'11:45 AM',
|
|
51
|
+
'12:00 PM',
|
|
52
|
+
'12:15 PM',
|
|
53
|
+
'12:30 PM',
|
|
54
|
+
'12:45 PM',
|
|
55
|
+
'01:00 PM',
|
|
56
|
+
'01:15 PM',
|
|
57
|
+
'01:30 PM',
|
|
58
|
+
'01:45 PM',
|
|
59
|
+
'02:00 PM',
|
|
60
|
+
'02:15 PM',
|
|
61
|
+
'02:30 PM',
|
|
62
|
+
'02:45 PM',
|
|
63
|
+
'03:00 PM',
|
|
64
|
+
'03:15 PM',
|
|
65
|
+
'03:30 PM',
|
|
66
|
+
'03:45 PM',
|
|
67
|
+
'04:00 PM',
|
|
68
|
+
'04:15 PM',
|
|
69
|
+
'04:30 PM',
|
|
70
|
+
'04:45 PM',
|
|
71
|
+
'05:00 PM',
|
|
72
|
+
'05:15 PM',
|
|
73
|
+
'05:30 PM',
|
|
74
|
+
'05:45 PM',
|
|
75
|
+
'06:00 PM',
|
|
76
|
+
'06:15 PM',
|
|
77
|
+
'06:30 PM',
|
|
78
|
+
'06:45 PM',
|
|
79
|
+
'07:00 PM',
|
|
80
|
+
'07:15 PM',
|
|
81
|
+
'07:30 PM',
|
|
82
|
+
'07:45 PM',
|
|
83
|
+
'08:00 PM',
|
|
84
|
+
'08:15 PM',
|
|
85
|
+
'08:30 PM',
|
|
86
|
+
'08:45 PM',
|
|
87
|
+
'09:00 PM',
|
|
88
|
+
'09:15 PM',
|
|
89
|
+
'09:30 PM',
|
|
90
|
+
'09:45 PM',
|
|
91
|
+
'10:00 PM',
|
|
92
|
+
'10:15 PM',
|
|
93
|
+
'10:30 PM',
|
|
94
|
+
'10:45 PM',
|
|
95
|
+
'11:00 PM',
|
|
96
|
+
'11:15 PM',
|
|
97
|
+
'11:30 PM',
|
|
98
|
+
'11:45 PM',
|
|
99
|
+
]
|
package/lib/IconButton.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ declare type IconButtonCommonProps = {
|
|
|
13
13
|
size?: IconProps['size'];
|
|
14
14
|
padding?: 'normal';
|
|
15
15
|
tooltip?: string;
|
|
16
|
+
tooltipVisible?: boolean;
|
|
17
|
+
tooltipPlacement?: TooltipProps['placement'];
|
|
16
18
|
} & DataTestProp & IconAriaProps & Pick<ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'onClick' | 'onMouseDown' | 'className' | 'tabIndex' | 'style'>;
|
|
17
19
|
export declare type IconButtonNotDisabledProps = {
|
|
18
20
|
disabledTooltip?: never;
|
package/lib/IconButton.js
CHANGED
|
@@ -8,11 +8,11 @@ import { Loader } from './Loader';
|
|
|
8
8
|
import styles from './IconButton.module.scss';
|
|
9
9
|
export const IconButton = forwardRef(({ component: Component = 'button', icon, iconClassName, iconColor, className, size, kind = 'transparent', ariaHidden, ariaLabelledBy, ariaLabel,
|
|
10
10
|
// Disabled tooltip
|
|
11
|
-
disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel = 'noopener', target, type = 'button', loading, padding, tooltip, ...rest }, ref) => {
|
|
11
|
+
disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel = 'noopener', target, type = 'button', loading, padding, tooltip, tooltipPlacement, tooltipVisible, ...rest }, ref) => {
|
|
12
12
|
const tooltipId = useUID();
|
|
13
13
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
14
14
|
const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
|
|
15
|
-
return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, placement: disabledTooltipPlacement, visible: disabled
|
|
15
|
+
return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, placement: disabled ? disabledTooltipPlacement : tooltipPlacement, visible: disabled ? disabledTooltipVisible : tooltipVisible }, (tooltipRef) => (React.createElement(Component, { className: cn(styles.iconButton, {
|
|
16
16
|
[styles.primary]: kind === 'primary',
|
|
17
17
|
[styles.transparent]: kind === 'transparent',
|
|
18
18
|
[styles.paddingNormal]: padding === 'normal',
|
package/lib/IconButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAExC,OAAO,EAAE,IAAI,EAA4B,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,MAAM,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"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"}
|
package/lib/NumberField.js
CHANGED
|
@@ -51,7 +51,7 @@ export const NumberField = ({ incrementIconAriaLabel = 'Increment', decrementIco
|
|
|
51
51
|
else if (min !== undefined && value <= min) {
|
|
52
52
|
decrementDisabledProps = {
|
|
53
53
|
disabled: true,
|
|
54
|
-
disabledTooltip: `Value
|
|
54
|
+
disabledTooltip: `Value can't be less than ${min}`,
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
57
|
else if (disabled) {
|
|
@@ -72,7 +72,7 @@ export const NumberField = ({ incrementIconAriaLabel = 'Increment', decrementIco
|
|
|
72
72
|
else if (max !== undefined && value !== undefined && value >= max) {
|
|
73
73
|
incrementDisabledProps = {
|
|
74
74
|
disabled: true,
|
|
75
|
-
disabledTooltip: `Value
|
|
75
|
+
disabledTooltip: `Value can't be greater than ${max}`,
|
|
76
76
|
};
|
|
77
77
|
}
|
|
78
78
|
else if (disabled) {
|
|
@@ -92,7 +92,19 @@ export const NumberField = ({ incrementIconAriaLabel = 'Increment', decrementIco
|
|
|
92
92
|
React.createElement(IconButton, { size: size === 'small' ? 'small' : 'smallMedium', icon: PlusCircle, ariaLabel: incrementIconAriaLabel, className: cn(styles.increment, {
|
|
93
93
|
[styles.disabled]: disabled,
|
|
94
94
|
}), onClick: onIncrement, kind: "transparent", "data-test": "number-field-increment", type: "button", ...incrementDisabledProps })));
|
|
95
|
-
}, [
|
|
95
|
+
}, [
|
|
96
|
+
showIconButtons,
|
|
97
|
+
onIncrement,
|
|
98
|
+
onDecrement,
|
|
99
|
+
decrementIconAriaLabel,
|
|
100
|
+
incrementIconAriaLabel,
|
|
101
|
+
value,
|
|
102
|
+
disabled,
|
|
103
|
+
min,
|
|
104
|
+
max,
|
|
105
|
+
size,
|
|
106
|
+
iconPosition,
|
|
107
|
+
]);
|
|
96
108
|
const onChangeWrapped = useCallback(({ target: { value: newValue } }) => {
|
|
97
109
|
let newValueParsed;
|
|
98
110
|
if (newValue !== '') {
|
package/lib/NumberField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../src/NumberField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAoD,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACrG,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,SAAS,EAAiB,MAAM,aAAa,CAAA;AACtD,OAAO,EAAE,UAAU,EAAuD,MAAM,cAAc,CAAA;AAG9F,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAkC9C,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,sBAAsB,GAAG,WAAW,EACpC,sBAAsB,GAAG,WAAW,EACpC,IAAI,GAAG,CAAC,EACR,GAAG,EACH,GAAG,EACH,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,YAAY,
|
|
1
|
+
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../src/NumberField.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@codemirror/basic-setup": "^0.19.1",
|
|
50
50
|
"@codemirror/stream-parser": "^0.19.3",
|
|
51
51
|
"@codemirror/view": "^0.19.35",
|
|
52
|
-
"@hazelcast/helpers": "^1.
|
|
53
|
-
"@hazelcast/services": "^1.
|
|
52
|
+
"@hazelcast/helpers": "^1.3.0",
|
|
53
|
+
"@hazelcast/services": "^1.3.0",
|
|
54
54
|
"@headlessui/react": "^1.4.2",
|
|
55
55
|
"@icons-pack/react-simple-icons": "^4.6.1",
|
|
56
56
|
"@popperjs/core": "^2.11.0",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
"devDependencies": {
|
|
79
79
|
"@codemirror/legacy-modes": "0.19.0",
|
|
80
|
-
"@hazelcast/test-helpers": "^1.
|
|
80
|
+
"@hazelcast/test-helpers": "^1.3.0",
|
|
81
81
|
"@storybook/addon-docs": "^6.4.9",
|
|
82
82
|
"@storybook/addons": "^6.4.9",
|
|
83
83
|
"@storybook/builder-webpack5": "^6.4.9",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"webpack": "^5.65.0",
|
|
114
114
|
"yup": "^0.32.11"
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "7cd01422db092f9a01102d2ab48d6c3cfcdb6e70"
|
|
117
117
|
}
|