@jobber/components 7.6.0 → 7.7.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/dist/InputDate/InputDate.d.ts +1 -1
- package/dist/InputDate/InputDate.types.d.ts +2 -30
- package/dist/InputDate/index.cjs +21 -163
- package/dist/InputDate/index.d.ts +2 -4
- package/dist/InputDate/index.mjs +20 -166
- package/dist/InputDate/useInputDateActivatorActions.d.ts +2 -2
- package/dist/InputDate-cjs.js +96 -0
- package/dist/InputDate-es.js +94 -0
- package/dist/docs/InputDate/InputDate.md +31 -19
- package/dist/docs/usage-guidelines/usage-guidelines.md +0 -1
- package/dist/index.cjs +2 -2
- package/dist/index.mjs +1 -1
- package/package.json +2 -2
- package/dist/InputDate/InputDate.rebuilt.d.ts +0 -3
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { InputDateProps } from "./InputDate.types";
|
|
3
|
-
export declare
|
|
3
|
+
export declare const InputDate: React.ForwardRefExoticComponent<InputDateProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FormFieldProps } from "../FormField";
|
|
2
2
|
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
3
|
-
export interface
|
|
3
|
+
export interface InputDateProps extends Omit<HTMLInputBaseProps, "maxLength">, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "showMiniLabel" | "version"> {
|
|
4
4
|
/**
|
|
5
5
|
* A Date object value
|
|
6
6
|
* (e.g., `new Date("11/11/2011")`)
|
|
@@ -34,31 +34,3 @@ export interface InputDateRebuiltProps extends Omit<HTMLInputBaseProps, "maxLeng
|
|
|
34
34
|
*/
|
|
35
35
|
readonly emptyValueLabel?: string;
|
|
36
36
|
}
|
|
37
|
-
/**
|
|
38
|
-
* @deprecated Use the v2 InputDate component instead (version={2}).
|
|
39
|
-
*/
|
|
40
|
-
export interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<FormFieldProps, "readonly" | "disabled" | "onEnter" | "onFocus" | "inputRef" | "validations" | "placeholder" | "onChange" | "onBlur"> {
|
|
41
|
-
/**
|
|
42
|
-
* A Date object value
|
|
43
|
-
* (e.g., `new Date("11/11/2011")`)
|
|
44
|
-
* */
|
|
45
|
-
readonly value?: Date;
|
|
46
|
-
onChange(newValue: Date): void;
|
|
47
|
-
/**
|
|
48
|
-
* The maximum selectable date.
|
|
49
|
-
*/
|
|
50
|
-
readonly maxDate?: Date;
|
|
51
|
-
/**
|
|
52
|
-
* The minimum selectable date.
|
|
53
|
-
*/
|
|
54
|
-
readonly minDate?: Date;
|
|
55
|
-
/**
|
|
56
|
-
* Whether to show the calendar icon
|
|
57
|
-
* @default true
|
|
58
|
-
*/
|
|
59
|
-
readonly showIcon?: boolean;
|
|
60
|
-
/**
|
|
61
|
-
* Text to display instead of a date value
|
|
62
|
-
*/
|
|
63
|
-
readonly emptyValueLabel?: string;
|
|
64
|
-
}
|
package/dist/InputDate/index.cjs
CHANGED
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
var InputDate = require('../InputDate-cjs.js');
|
|
4
|
+
require('react');
|
|
5
|
+
require('../DatePicker-cjs.js');
|
|
6
6
|
require('classnames');
|
|
7
|
-
require('../
|
|
8
|
-
require('react-
|
|
7
|
+
require('../clsx-cjs.js');
|
|
8
|
+
require('../floating-ui.react-cjs.js');
|
|
9
|
+
require('../index.esm-cjs.js');
|
|
10
|
+
require('react/jsx-runtime');
|
|
11
|
+
require('react-dom');
|
|
12
|
+
require('../floating-ui.react-dom-cjs.js');
|
|
9
13
|
require('@jobber/hooks');
|
|
10
|
-
require('
|
|
11
|
-
require('@jobber/design');
|
|
14
|
+
require('../Typography-cjs.js');
|
|
12
15
|
require('../Button-cjs.js');
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
require('../tslib.es6-cjs.js');
|
|
17
|
+
require('react-router-dom');
|
|
18
|
+
require('../Icon-cjs.js');
|
|
19
|
+
require('@jobber/design');
|
|
20
|
+
require('../omit-cjs.js');
|
|
15
21
|
require('../_commonjsHelpers-cjs.js');
|
|
16
22
|
require('../_getAllKeys-cjs.js');
|
|
17
23
|
require('../isTypedArray-cjs.js');
|
|
@@ -23,166 +29,18 @@ require('../keysIn-cjs.js');
|
|
|
23
29
|
require('../_baseAssignValue-cjs.js');
|
|
24
30
|
require('../_baseFlatten-cjs.js');
|
|
25
31
|
require('../_setToString-cjs.js');
|
|
32
|
+
require('../AtlantisContext-cjs.js');
|
|
33
|
+
require('../InputText/index.cjs');
|
|
34
|
+
require('../FormField-cjs.js');
|
|
26
35
|
require('../mergeRefs-cjs.js');
|
|
27
|
-
require('
|
|
36
|
+
require('framer-motion');
|
|
28
37
|
require('../Text-cjs.js');
|
|
29
|
-
require('../Typography-cjs.js');
|
|
30
38
|
require('../useFormFieldFocus-cjs.js');
|
|
31
39
|
require('../InputValidation-cjs.js');
|
|
32
40
|
require('../Spinner-cjs.js');
|
|
33
|
-
require('react-
|
|
34
|
-
require('../clsx-cjs.js');
|
|
35
|
-
require('../floating-ui.react-cjs.js');
|
|
36
|
-
require('../index.esm-cjs.js');
|
|
37
|
-
require('react/jsx-runtime');
|
|
38
|
-
require('react-dom');
|
|
39
|
-
require('../floating-ui.react-dom-cjs.js');
|
|
40
|
-
require('../AtlantisContext-cjs.js');
|
|
41
|
+
require('react-hook-form');
|
|
41
42
|
require('../filterDataAttributes-cjs.js');
|
|
42
43
|
|
|
43
|
-
// eslint-disable-next-line import/no-deprecated
|
|
44
|
-
function InputDate$1(inputProps) {
|
|
45
|
-
const formFieldActionsRef = React.useRef(null);
|
|
46
|
-
return (React.createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
|
|
47
|
-
const { onChange, onClick, value } = activatorProps;
|
|
48
|
-
const newActivatorProps = omit.omit(activatorProps, ["activator"]);
|
|
49
|
-
const [isFocused, setIsFocused] = React.useState(false);
|
|
50
|
-
const suffix = inputProps.showIcon !== false
|
|
51
|
-
? {
|
|
52
|
-
icon: "calendar",
|
|
53
|
-
ariaLabel: "Show calendar",
|
|
54
|
-
onClick: !inputProps.disabled && onClick && onClick,
|
|
55
|
-
}
|
|
56
|
-
: undefined;
|
|
57
|
-
// Set form field to formatted date string immediately, to avoid validations
|
|
58
|
-
// triggering incorrectly when it blurs (to handle the datepicker UI click)
|
|
59
|
-
React.useEffect(() => {
|
|
60
|
-
var _a;
|
|
61
|
-
value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
|
|
62
|
-
}, [value]);
|
|
63
|
-
const showEmptyValueLabel = !value && !isFocused;
|
|
64
|
-
return (
|
|
65
|
-
// We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
|
|
66
|
-
React.createElement("div", { onClick: onClick },
|
|
67
|
-
React.createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
|
|
68
|
-
onChange && onChange(event);
|
|
69
|
-
}, onBlur: () => {
|
|
70
|
-
inputProps.onBlur && inputProps.onBlur();
|
|
71
|
-
activatorProps.onBlur && activatorProps.onBlur();
|
|
72
|
-
setIsFocused(false);
|
|
73
|
-
}, onFocus: () => {
|
|
74
|
-
inputProps.onFocus && inputProps.onFocus();
|
|
75
|
-
activatorProps.onFocus && activatorProps.onFocus();
|
|
76
|
-
setIsFocused(true);
|
|
77
|
-
}, onKeyUp: event => {
|
|
78
|
-
var _a;
|
|
79
|
-
if (inputProps.showIcon === false &&
|
|
80
|
-
event.key === "ArrowDown") {
|
|
81
|
-
(_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
|
|
82
|
-
}
|
|
83
|
-
}, actionsRef: formFieldActionsRef, suffix: suffix }))));
|
|
84
|
-
} }));
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
|
|
88
|
-
const [isFocused, setIsFocused] = React.useState(false);
|
|
89
|
-
function handleChange(_newValue, event) {
|
|
90
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
91
|
-
}
|
|
92
|
-
function handleFocus(event) {
|
|
93
|
-
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
94
|
-
setIsFocused(true);
|
|
95
|
-
}
|
|
96
|
-
function handleBlur(event) {
|
|
97
|
-
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
98
|
-
setIsFocused(false);
|
|
99
|
-
}
|
|
100
|
-
return {
|
|
101
|
-
handleBlur,
|
|
102
|
-
handleChange,
|
|
103
|
-
handleFocus,
|
|
104
|
-
isFocused,
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
|
|
109
|
-
const { onChange } = props;
|
|
110
|
-
const isCalendarOpenRef = React.useRef(false);
|
|
111
|
-
const inputFocusedRef = React.useRef(false);
|
|
112
|
-
const compositeFocusedRef = React.useRef(false);
|
|
113
|
-
const lastBlurEventRef = React.useRef(null);
|
|
114
|
-
return (React.createElement(DatePicker.DatePicker, { selected: props.value, onChange: newValue => {
|
|
115
|
-
onChange(newValue);
|
|
116
|
-
}, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
|
|
117
|
-
var _a;
|
|
118
|
-
isCalendarOpenRef.current = open;
|
|
119
|
-
// When calendar closes, fire onBlur if input is also not focused
|
|
120
|
-
if (!open &&
|
|
121
|
-
!inputFocusedRef.current &&
|
|
122
|
-
compositeFocusedRef.current &&
|
|
123
|
-
lastBlurEventRef.current) {
|
|
124
|
-
compositeFocusedRef.current = false;
|
|
125
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
|
|
126
|
-
}
|
|
127
|
-
} }));
|
|
128
|
-
function InputDateActivator(activatorProps) {
|
|
129
|
-
const { onClick, value } = activatorProps;
|
|
130
|
-
const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
|
|
131
|
-
onChange: activatorProps.onChange,
|
|
132
|
-
onFocus: event => {
|
|
133
|
-
var _a, _b;
|
|
134
|
-
inputFocusedRef.current = true;
|
|
135
|
-
// Fire parent's onFocus only when the composite component first receives focus
|
|
136
|
-
if (!compositeFocusedRef.current) {
|
|
137
|
-
compositeFocusedRef.current = true;
|
|
138
|
-
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
139
|
-
}
|
|
140
|
-
(_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
141
|
-
},
|
|
142
|
-
onBlur: event => {
|
|
143
|
-
var _a, _b;
|
|
144
|
-
inputFocusedRef.current = false;
|
|
145
|
-
lastBlurEventRef.current = event;
|
|
146
|
-
// Only fire parent's onBlur if calendar is also closed
|
|
147
|
-
if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
|
|
148
|
-
compositeFocusedRef.current = false;
|
|
149
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
150
|
-
}
|
|
151
|
-
(_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
152
|
-
},
|
|
153
|
-
});
|
|
154
|
-
const suffix = props.showIcon !== false
|
|
155
|
-
? {
|
|
156
|
-
icon: "calendar",
|
|
157
|
-
ariaLabel: "Show calendar",
|
|
158
|
-
onClick: !props.disabled && onClick && onClick,
|
|
159
|
-
}
|
|
160
|
-
: undefined;
|
|
161
|
-
const showEmptyValueLabel = !value && !isFocused;
|
|
162
|
-
return (
|
|
163
|
-
// We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
|
|
164
|
-
React.createElement("div", { onClick: onClick },
|
|
165
|
-
React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
|
|
166
|
-
var _a, _b;
|
|
167
|
-
if (props.showIcon === false && event.key === "ArrowDown") {
|
|
168
|
-
(_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
|
|
169
|
-
}
|
|
170
|
-
(_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
|
|
171
|
-
}, onChange: handleChange })));
|
|
172
|
-
}
|
|
173
|
-
});
|
|
174
|
-
InputDateRebuilt.displayName = "InputDateRebuilt";
|
|
175
44
|
|
|
176
|
-
function isNewInputDateProps(props) {
|
|
177
|
-
return props.version === 2;
|
|
178
|
-
}
|
|
179
|
-
const InputDate = React.forwardRef(function InputDateShim(props, ref) {
|
|
180
|
-
if (isNewInputDateProps(props)) {
|
|
181
|
-
return React.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
|
|
182
|
-
}
|
|
183
|
-
else {
|
|
184
|
-
return React.createElement(InputDate$1, Object.assign({}, props));
|
|
185
|
-
}
|
|
186
|
-
});
|
|
187
45
|
|
|
188
|
-
exports.InputDate = InputDate;
|
|
46
|
+
exports.InputDate = InputDate.InputDate;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export type InputDateProps = InputDateLegacyProps | InputDateRebuiltProps;
|
|
4
|
-
export declare const InputDate: React.ForwardRefExoticComponent<InputDateProps & React.RefAttributes<HTMLInputElement>>;
|
|
1
|
+
export type { InputDateProps } from "./InputDate.types";
|
|
2
|
+
export { InputDate } from "./InputDate";
|
package/dist/InputDate/index.mjs
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
export { I as InputDate } from '../InputDate-es.js';
|
|
2
|
+
import 'react';
|
|
3
|
+
import '../DatePicker-es.js';
|
|
4
4
|
import 'classnames';
|
|
5
|
-
import '../
|
|
6
|
-
import 'react-
|
|
5
|
+
import '../clsx-es.js';
|
|
6
|
+
import '../floating-ui.react-es.js';
|
|
7
|
+
import '../index.esm-es.js';
|
|
8
|
+
import 'react/jsx-runtime';
|
|
9
|
+
import 'react-dom';
|
|
10
|
+
import '../floating-ui.react-dom-es.js';
|
|
7
11
|
import '@jobber/hooks';
|
|
8
|
-
import '
|
|
9
|
-
import '@jobber/design';
|
|
12
|
+
import '../Typography-es.js';
|
|
10
13
|
import '../Button-es.js';
|
|
11
|
-
import
|
|
12
|
-
import
|
|
14
|
+
import '../tslib.es6-es.js';
|
|
15
|
+
import 'react-router-dom';
|
|
16
|
+
import '../Icon-es.js';
|
|
17
|
+
import '@jobber/design';
|
|
18
|
+
import '../omit-es.js';
|
|
13
19
|
import '../_commonjsHelpers-es.js';
|
|
14
20
|
import '../_getAllKeys-es.js';
|
|
15
21
|
import '../isTypedArray-es.js';
|
|
@@ -21,166 +27,14 @@ import '../keysIn-es.js';
|
|
|
21
27
|
import '../_baseAssignValue-es.js';
|
|
22
28
|
import '../_baseFlatten-es.js';
|
|
23
29
|
import '../_setToString-es.js';
|
|
30
|
+
import '../AtlantisContext-es.js';
|
|
31
|
+
import '../InputText/index.mjs';
|
|
32
|
+
import '../FormField-es.js';
|
|
24
33
|
import '../mergeRefs-es.js';
|
|
25
|
-
import '
|
|
34
|
+
import 'framer-motion';
|
|
26
35
|
import '../Text-es.js';
|
|
27
|
-
import '../Typography-es.js';
|
|
28
36
|
import '../useFormFieldFocus-es.js';
|
|
29
37
|
import '../InputValidation-es.js';
|
|
30
38
|
import '../Spinner-es.js';
|
|
31
|
-
import 'react-
|
|
32
|
-
import '../clsx-es.js';
|
|
33
|
-
import '../floating-ui.react-es.js';
|
|
34
|
-
import '../index.esm-es.js';
|
|
35
|
-
import 'react/jsx-runtime';
|
|
36
|
-
import 'react-dom';
|
|
37
|
-
import '../floating-ui.react-dom-es.js';
|
|
38
|
-
import '../AtlantisContext-es.js';
|
|
39
|
+
import 'react-hook-form';
|
|
39
40
|
import '../filterDataAttributes-es.js';
|
|
40
|
-
|
|
41
|
-
// eslint-disable-next-line import/no-deprecated
|
|
42
|
-
function InputDate$1(inputProps) {
|
|
43
|
-
const formFieldActionsRef = useRef(null);
|
|
44
|
-
return (React__default.createElement(DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
|
|
45
|
-
const { onChange, onClick, value } = activatorProps;
|
|
46
|
-
const newActivatorProps = omit(activatorProps, ["activator"]);
|
|
47
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
48
|
-
const suffix = inputProps.showIcon !== false
|
|
49
|
-
? {
|
|
50
|
-
icon: "calendar",
|
|
51
|
-
ariaLabel: "Show calendar",
|
|
52
|
-
onClick: !inputProps.disabled && onClick && onClick,
|
|
53
|
-
}
|
|
54
|
-
: undefined;
|
|
55
|
-
// Set form field to formatted date string immediately, to avoid validations
|
|
56
|
-
// triggering incorrectly when it blurs (to handle the datepicker UI click)
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
var _a;
|
|
59
|
-
value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
|
|
60
|
-
}, [value]);
|
|
61
|
-
const showEmptyValueLabel = !value && !isFocused;
|
|
62
|
-
return (
|
|
63
|
-
// We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
|
|
64
|
-
React__default.createElement("div", { onClick: onClick },
|
|
65
|
-
React__default.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
|
|
66
|
-
onChange && onChange(event);
|
|
67
|
-
}, onBlur: () => {
|
|
68
|
-
inputProps.onBlur && inputProps.onBlur();
|
|
69
|
-
activatorProps.onBlur && activatorProps.onBlur();
|
|
70
|
-
setIsFocused(false);
|
|
71
|
-
}, onFocus: () => {
|
|
72
|
-
inputProps.onFocus && inputProps.onFocus();
|
|
73
|
-
activatorProps.onFocus && activatorProps.onFocus();
|
|
74
|
-
setIsFocused(true);
|
|
75
|
-
}, onKeyUp: event => {
|
|
76
|
-
var _a;
|
|
77
|
-
if (inputProps.showIcon === false &&
|
|
78
|
-
event.key === "ArrowDown") {
|
|
79
|
-
(_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
|
|
80
|
-
}
|
|
81
|
-
}, actionsRef: formFieldActionsRef, suffix: suffix }))));
|
|
82
|
-
} }));
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
|
|
86
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
87
|
-
function handleChange(_newValue, event) {
|
|
88
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
89
|
-
}
|
|
90
|
-
function handleFocus(event) {
|
|
91
|
-
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
92
|
-
setIsFocused(true);
|
|
93
|
-
}
|
|
94
|
-
function handleBlur(event) {
|
|
95
|
-
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
96
|
-
setIsFocused(false);
|
|
97
|
-
}
|
|
98
|
-
return {
|
|
99
|
-
handleBlur,
|
|
100
|
-
handleChange,
|
|
101
|
-
handleFocus,
|
|
102
|
-
isFocused,
|
|
103
|
-
};
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
const InputDateRebuilt = forwardRef((props, forwardedRef) => {
|
|
107
|
-
const { onChange } = props;
|
|
108
|
-
const isCalendarOpenRef = useRef(false);
|
|
109
|
-
const inputFocusedRef = useRef(false);
|
|
110
|
-
const compositeFocusedRef = useRef(false);
|
|
111
|
-
const lastBlurEventRef = useRef(null);
|
|
112
|
-
return (React__default.createElement(DatePicker, { selected: props.value, onChange: newValue => {
|
|
113
|
-
onChange(newValue);
|
|
114
|
-
}, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
|
|
115
|
-
var _a;
|
|
116
|
-
isCalendarOpenRef.current = open;
|
|
117
|
-
// When calendar closes, fire onBlur if input is also not focused
|
|
118
|
-
if (!open &&
|
|
119
|
-
!inputFocusedRef.current &&
|
|
120
|
-
compositeFocusedRef.current &&
|
|
121
|
-
lastBlurEventRef.current) {
|
|
122
|
-
compositeFocusedRef.current = false;
|
|
123
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
|
|
124
|
-
}
|
|
125
|
-
} }));
|
|
126
|
-
function InputDateActivator(activatorProps) {
|
|
127
|
-
const { onClick, value } = activatorProps;
|
|
128
|
-
const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
|
|
129
|
-
onChange: activatorProps.onChange,
|
|
130
|
-
onFocus: event => {
|
|
131
|
-
var _a, _b;
|
|
132
|
-
inputFocusedRef.current = true;
|
|
133
|
-
// Fire parent's onFocus only when the composite component first receives focus
|
|
134
|
-
if (!compositeFocusedRef.current) {
|
|
135
|
-
compositeFocusedRef.current = true;
|
|
136
|
-
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
137
|
-
}
|
|
138
|
-
(_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
139
|
-
},
|
|
140
|
-
onBlur: event => {
|
|
141
|
-
var _a, _b;
|
|
142
|
-
inputFocusedRef.current = false;
|
|
143
|
-
lastBlurEventRef.current = event;
|
|
144
|
-
// Only fire parent's onBlur if calendar is also closed
|
|
145
|
-
if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
|
|
146
|
-
compositeFocusedRef.current = false;
|
|
147
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
148
|
-
}
|
|
149
|
-
(_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
150
|
-
},
|
|
151
|
-
});
|
|
152
|
-
const suffix = props.showIcon !== false
|
|
153
|
-
? {
|
|
154
|
-
icon: "calendar",
|
|
155
|
-
ariaLabel: "Show calendar",
|
|
156
|
-
onClick: !props.disabled && onClick && onClick,
|
|
157
|
-
}
|
|
158
|
-
: undefined;
|
|
159
|
-
const showEmptyValueLabel = !value && !isFocused;
|
|
160
|
-
return (
|
|
161
|
-
// We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
|
|
162
|
-
React__default.createElement("div", { onClick: onClick },
|
|
163
|
-
React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
|
|
164
|
-
var _a, _b;
|
|
165
|
-
if (props.showIcon === false && event.key === "ArrowDown") {
|
|
166
|
-
(_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
|
|
167
|
-
}
|
|
168
|
-
(_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
|
|
169
|
-
}, onChange: handleChange })));
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
InputDateRebuilt.displayName = "InputDateRebuilt";
|
|
173
|
-
|
|
174
|
-
function isNewInputDateProps(props) {
|
|
175
|
-
return props.version === 2;
|
|
176
|
-
}
|
|
177
|
-
const InputDate = forwardRef(function InputDateShim(props, ref) {
|
|
178
|
-
if (isNewInputDateProps(props)) {
|
|
179
|
-
return React__default.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
|
|
180
|
-
}
|
|
181
|
-
else {
|
|
182
|
-
return React__default.createElement(InputDate$1, Object.assign({}, props));
|
|
183
|
-
}
|
|
184
|
-
});
|
|
185
|
-
|
|
186
|
-
export { InputDate };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ChangeEvent } from "react";
|
|
2
|
-
import type {
|
|
2
|
+
import type { InputDateProps } from "./InputDate.types";
|
|
3
3
|
import type { DatePickerActivatorProps } from "../DatePicker/DatePickerActivator";
|
|
4
|
-
export interface useInputDateActivatorActionsProps extends Pick<
|
|
4
|
+
export interface useInputDateActivatorActionsProps extends Pick<InputDateProps, "onFocus" | "onBlur"> {
|
|
5
5
|
onChange: DatePickerActivatorProps["onChange"];
|
|
6
6
|
}
|
|
7
7
|
export declare function useInputDateActivatorActions({ onChange, onBlur, onFocus, }: useInputDateActivatorActionsProps): {
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var DatePicker = require('./DatePicker-cjs.js');
|
|
5
|
+
var InputText_index = require('./InputText/index.cjs');
|
|
6
|
+
|
|
7
|
+
function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
|
|
8
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
9
|
+
function handleChange(_newValue, event) {
|
|
10
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
11
|
+
}
|
|
12
|
+
function handleFocus(event) {
|
|
13
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
14
|
+
setIsFocused(true);
|
|
15
|
+
}
|
|
16
|
+
function handleBlur(event) {
|
|
17
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
18
|
+
setIsFocused(false);
|
|
19
|
+
}
|
|
20
|
+
return {
|
|
21
|
+
handleBlur,
|
|
22
|
+
handleChange,
|
|
23
|
+
handleFocus,
|
|
24
|
+
isFocused,
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const InputDate = React.forwardRef((props, forwardedRef) => {
|
|
29
|
+
const { onChange } = props;
|
|
30
|
+
const isCalendarOpenRef = React.useRef(false);
|
|
31
|
+
const inputFocusedRef = React.useRef(false);
|
|
32
|
+
const compositeFocusedRef = React.useRef(false);
|
|
33
|
+
const lastBlurEventRef = React.useRef(null);
|
|
34
|
+
return (React.createElement(DatePicker.DatePicker, { selected: props.value, onChange: newValue => {
|
|
35
|
+
onChange(newValue);
|
|
36
|
+
}, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
|
|
37
|
+
var _a;
|
|
38
|
+
isCalendarOpenRef.current = open;
|
|
39
|
+
// When calendar closes, fire onBlur if input is also not focused
|
|
40
|
+
if (!open &&
|
|
41
|
+
!inputFocusedRef.current &&
|
|
42
|
+
compositeFocusedRef.current &&
|
|
43
|
+
lastBlurEventRef.current) {
|
|
44
|
+
compositeFocusedRef.current = false;
|
|
45
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
|
|
46
|
+
}
|
|
47
|
+
} }));
|
|
48
|
+
function InputDateActivator(activatorProps) {
|
|
49
|
+
const { onClick, value } = activatorProps;
|
|
50
|
+
const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
|
|
51
|
+
onChange: activatorProps.onChange,
|
|
52
|
+
onFocus: event => {
|
|
53
|
+
var _a, _b;
|
|
54
|
+
inputFocusedRef.current = true;
|
|
55
|
+
// Fire parent's onFocus only when the composite component first receives focus
|
|
56
|
+
if (!compositeFocusedRef.current) {
|
|
57
|
+
compositeFocusedRef.current = true;
|
|
58
|
+
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
59
|
+
}
|
|
60
|
+
(_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
61
|
+
},
|
|
62
|
+
onBlur: event => {
|
|
63
|
+
var _a, _b;
|
|
64
|
+
inputFocusedRef.current = false;
|
|
65
|
+
lastBlurEventRef.current = event;
|
|
66
|
+
// Only fire parent's onBlur if calendar is also closed
|
|
67
|
+
if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
|
|
68
|
+
compositeFocusedRef.current = false;
|
|
69
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
70
|
+
}
|
|
71
|
+
(_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
const suffix = props.showIcon !== false
|
|
75
|
+
? {
|
|
76
|
+
icon: "calendar",
|
|
77
|
+
ariaLabel: "Show calendar",
|
|
78
|
+
onClick: !props.disabled && onClick && onClick,
|
|
79
|
+
}
|
|
80
|
+
: undefined;
|
|
81
|
+
const showEmptyValueLabel = !value && !isFocused;
|
|
82
|
+
return (
|
|
83
|
+
// We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
|
|
84
|
+
React.createElement("div", { onClick: onClick },
|
|
85
|
+
React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
|
|
86
|
+
var _a, _b;
|
|
87
|
+
if (props.showIcon === false && event.key === "ArrowDown") {
|
|
88
|
+
(_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
|
|
89
|
+
}
|
|
90
|
+
(_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
|
|
91
|
+
}, onChange: handleChange })));
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
InputDate.displayName = "InputDate";
|
|
95
|
+
|
|
96
|
+
exports.InputDate = InputDate;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React__default, { useState, forwardRef, useRef } from 'react';
|
|
2
|
+
import { D as DatePicker } from './DatePicker-es.js';
|
|
3
|
+
import { InputText } from './InputText/index.mjs';
|
|
4
|
+
|
|
5
|
+
function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
|
|
6
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
7
|
+
function handleChange(_newValue, event) {
|
|
8
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
9
|
+
}
|
|
10
|
+
function handleFocus(event) {
|
|
11
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
12
|
+
setIsFocused(true);
|
|
13
|
+
}
|
|
14
|
+
function handleBlur(event) {
|
|
15
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
16
|
+
setIsFocused(false);
|
|
17
|
+
}
|
|
18
|
+
return {
|
|
19
|
+
handleBlur,
|
|
20
|
+
handleChange,
|
|
21
|
+
handleFocus,
|
|
22
|
+
isFocused,
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const InputDate = forwardRef((props, forwardedRef) => {
|
|
27
|
+
const { onChange } = props;
|
|
28
|
+
const isCalendarOpenRef = useRef(false);
|
|
29
|
+
const inputFocusedRef = useRef(false);
|
|
30
|
+
const compositeFocusedRef = useRef(false);
|
|
31
|
+
const lastBlurEventRef = useRef(null);
|
|
32
|
+
return (React__default.createElement(DatePicker, { selected: props.value, onChange: newValue => {
|
|
33
|
+
onChange(newValue);
|
|
34
|
+
}, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
|
|
35
|
+
var _a;
|
|
36
|
+
isCalendarOpenRef.current = open;
|
|
37
|
+
// When calendar closes, fire onBlur if input is also not focused
|
|
38
|
+
if (!open &&
|
|
39
|
+
!inputFocusedRef.current &&
|
|
40
|
+
compositeFocusedRef.current &&
|
|
41
|
+
lastBlurEventRef.current) {
|
|
42
|
+
compositeFocusedRef.current = false;
|
|
43
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
|
|
44
|
+
}
|
|
45
|
+
} }));
|
|
46
|
+
function InputDateActivator(activatorProps) {
|
|
47
|
+
const { onClick, value } = activatorProps;
|
|
48
|
+
const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
|
|
49
|
+
onChange: activatorProps.onChange,
|
|
50
|
+
onFocus: event => {
|
|
51
|
+
var _a, _b;
|
|
52
|
+
inputFocusedRef.current = true;
|
|
53
|
+
// Fire parent's onFocus only when the composite component first receives focus
|
|
54
|
+
if (!compositeFocusedRef.current) {
|
|
55
|
+
compositeFocusedRef.current = true;
|
|
56
|
+
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
57
|
+
}
|
|
58
|
+
(_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
59
|
+
},
|
|
60
|
+
onBlur: event => {
|
|
61
|
+
var _a, _b;
|
|
62
|
+
inputFocusedRef.current = false;
|
|
63
|
+
lastBlurEventRef.current = event;
|
|
64
|
+
// Only fire parent's onBlur if calendar is also closed
|
|
65
|
+
if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
|
|
66
|
+
compositeFocusedRef.current = false;
|
|
67
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
68
|
+
}
|
|
69
|
+
(_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
const suffix = props.showIcon !== false
|
|
73
|
+
? {
|
|
74
|
+
icon: "calendar",
|
|
75
|
+
ariaLabel: "Show calendar",
|
|
76
|
+
onClick: !props.disabled && onClick && onClick,
|
|
77
|
+
}
|
|
78
|
+
: undefined;
|
|
79
|
+
const showEmptyValueLabel = !value && !isFocused;
|
|
80
|
+
return (
|
|
81
|
+
// We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
|
|
82
|
+
React__default.createElement("div", { onClick: onClick },
|
|
83
|
+
React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
|
|
84
|
+
var _a, _b;
|
|
85
|
+
if (props.showIcon === false && event.key === "ArrowDown") {
|
|
86
|
+
(_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
|
|
87
|
+
}
|
|
88
|
+
(_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
|
|
89
|
+
}, onChange: handleChange })));
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
InputDate.displayName = "InputDate";
|
|
93
|
+
|
|
94
|
+
export { InputDate as I };
|
|
@@ -19,10 +19,8 @@ date.
|
|
|
19
19
|
```tsx
|
|
20
20
|
import React from "react";
|
|
21
21
|
import { InputDate } from "@jobber/components/InputDate";
|
|
22
|
-
|
|
23
|
-
import type { InputDateProps } from "../InputDate.types";
|
|
22
|
+
import type { InputDateProps } from "@jobber/components/InputDate";
|
|
24
23
|
|
|
25
|
-
// eslint-disable-next-line import/no-deprecated
|
|
26
24
|
export function InputDateDisabledExample(props: InputDateProps) {
|
|
27
25
|
return <InputDate placeholder="Start Date" disabled={true} {...props} />;
|
|
28
26
|
}
|
|
@@ -42,7 +40,6 @@ export function InputDateInvalidExample(props: InputDateProps) {
|
|
|
42
40
|
error="Start Date is required"
|
|
43
41
|
invalid={true}
|
|
44
42
|
{...props}
|
|
45
|
-
version={2}
|
|
46
43
|
/>
|
|
47
44
|
);
|
|
48
45
|
}
|
|
@@ -116,28 +113,43 @@ at the root of the application, populated with the applicable value.
|
|
|
116
113
|
|
|
117
114
|
| Prop | Type | Required | Default | Description |
|
|
118
115
|
|------|------|----------|---------|-------------|
|
|
119
|
-
| `onChange` | `(newValue: Date) => void` | Yes | — |
|
|
116
|
+
| `onChange` | `(newValue: Date, event?: ChangeEvent<HTMLInputElement>) => void` | Yes | — | Callback for value changes. @param newValue - The new Date value @param event - Optional change event |
|
|
120
117
|
| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
|
|
118
|
+
| `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
|
|
119
|
+
| `aria-autocomplete` | `"inline" | "none" | "list" | "both"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
|
|
120
|
+
| `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
|
|
121
|
+
| `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
|
|
122
|
+
| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
|
|
123
|
+
| `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
|
|
124
|
+
| `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
|
|
125
|
+
| `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
|
|
126
|
+
| `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
|
|
127
|
+
| `autoComplete` | `string` | No | — | Autocomplete behavior for the input (React casing, string values only). Use standard HTML autocomplete values or "on"... |
|
|
128
|
+
| `autoFocus` | `boolean` | No | — | Whether the input should be auto-focused (React casing). |
|
|
121
129
|
| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
|
|
122
|
-
| `disabled` | `boolean` | No | — |
|
|
130
|
+
| `disabled` | `boolean` | No | — | Whether the input is disabled. |
|
|
123
131
|
| `emptyValueLabel` | `string` | No | — | Text to display instead of a date value |
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
132
|
+
| `error` | `string` | No | — | Error message to display. This also highlights the field red. |
|
|
133
|
+
| `id` | `string` | No | — | The unique identifier for the input element. |
|
|
134
|
+
| `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
|
|
135
|
+
| `inputMode` | `"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"` | No | — | Input mode hint for virtual keyboards. |
|
|
127
136
|
| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
|
|
128
|
-
| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
|
|
137
|
+
| `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
|
|
129
138
|
| `maxDate` | `Date` | No | — | The maximum selectable date. |
|
|
130
139
|
| `minDate` | `Date` | No | — | The minimum selectable date. |
|
|
131
|
-
| `name` | `string` | No | — |
|
|
132
|
-
| `onBlur` | `(event
|
|
133
|
-
| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — |
|
|
134
|
-
| `onFocus` | `(event
|
|
135
|
-
| `
|
|
140
|
+
| `name` | `string` | No | — | The name attribute for the input element. |
|
|
141
|
+
| `onBlur` | `(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void` | No | — | Blur event handler. |
|
|
142
|
+
| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
|
|
143
|
+
| `onFocus` | `(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void` | No | — | Focus event handler. |
|
|
144
|
+
| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Key down event handler. |
|
|
145
|
+
| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Key up event handler. |
|
|
146
|
+
| `pattern` | `string` | No | — | Validation pattern (regex) for the input. |
|
|
136
147
|
| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
|
|
137
|
-
| `
|
|
148
|
+
| `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
|
|
149
|
+
| `ref` | `Ref<HTMLInputElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
|
|
150
|
+
| `required` | `boolean` | No | — | Whether the input is required before form submission. |
|
|
151
|
+
| `role` | `string` | No | — | Role attribute for accessibility. |
|
|
138
152
|
| `showIcon` | `boolean` | No | `true` | Whether to show the calendar icon |
|
|
139
|
-
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
|
|
140
153
|
| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
|
|
141
|
-
| `
|
|
154
|
+
| `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
|
|
142
155
|
| `value` | `Date` | No | — | A Date object value (e.g., `new Date("11/11/2011")`) |
|
|
143
|
-
| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |
|
|
@@ -14,7 +14,6 @@ deprecated.
|
|
|
14
14
|
| Component | Import | v2 prop |
|
|
15
15
|
| ---------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
|
|
16
16
|
| Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support |
|
|
17
|
-
| InputDate | `import { InputDate } from "@jobber/components/InputDate"` | `version={2}` |
|
|
18
17
|
| InputEmail | `import { InputEmail } from "@jobber/components/InputEmail"` | `version={2}` |
|
|
19
18
|
| InputNumber | `import { InputNumber } from "@jobber/components/InputNumber"` | `version={2}` |
|
|
20
19
|
| InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}` |
|
package/dist/index.cjs
CHANGED
|
@@ -56,7 +56,7 @@ var Grid = require('./Grid-cjs.js');
|
|
|
56
56
|
var Heading = require('./Heading-cjs.js');
|
|
57
57
|
var InlineLabel = require('./InlineLabel-cjs.js');
|
|
58
58
|
var InputAvatar = require('./InputAvatar-cjs.js');
|
|
59
|
-
var
|
|
59
|
+
var InputDate = require('./InputDate-cjs.js');
|
|
60
60
|
var InputEmail_index = require('./InputEmail/index.cjs');
|
|
61
61
|
var InputFile = require('./InputFile-cjs.js');
|
|
62
62
|
var InputGroup = require('./InputGroup-cjs.js');
|
|
@@ -283,7 +283,7 @@ exports.Grid = Grid.Grid;
|
|
|
283
283
|
exports.Heading = Heading.Heading;
|
|
284
284
|
exports.InlineLabel = InlineLabel.InlineLabel;
|
|
285
285
|
exports.InputAvatar = InputAvatar.InputAvatar;
|
|
286
|
-
exports.InputDate =
|
|
286
|
+
exports.InputDate = InputDate.InputDate;
|
|
287
287
|
exports.InputEmail = InputEmail_index.InputEmail;
|
|
288
288
|
exports.InputFile = InputFile.InputFile;
|
|
289
289
|
exports.InputFileContentContext = InputFile.InputFileContentContext;
|
package/dist/index.mjs
CHANGED
|
@@ -54,7 +54,7 @@ export { G as GRID_TEST_ID, a as Grid } from './Grid-es.js';
|
|
|
54
54
|
export { H as Heading } from './Heading-es.js';
|
|
55
55
|
export { I as InlineLabel } from './InlineLabel-es.js';
|
|
56
56
|
export { I as InputAvatar } from './InputAvatar-es.js';
|
|
57
|
-
export { InputDate } from './InputDate
|
|
57
|
+
export { I as InputDate } from './InputDate-es.js';
|
|
58
58
|
export { InputEmail } from './InputEmail/index.mjs';
|
|
59
59
|
export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as useInputFileContentContext } from './InputFile-es.js';
|
|
60
60
|
export { I as InputGroup } from './InputGroup-es.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.7.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -583,5 +583,5 @@
|
|
|
583
583
|
"> 1%",
|
|
584
584
|
"IE 10"
|
|
585
585
|
],
|
|
586
|
-
"gitHead": "
|
|
586
|
+
"gitHead": "0208a24535b499bdfbf9983264777e5a5d278d36"
|
|
587
587
|
}
|