@zendeskgarden/react-forms 9.12.3 → 9.12.4
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/esm/elements/Checkbox.js +6 -7
- package/dist/esm/elements/FileUpload.js +6 -7
- package/dist/esm/elements/Input.js +8 -9
- package/dist/esm/elements/MediaInput.js +14 -15
- package/dist/esm/elements/Radio.js +5 -6
- package/dist/esm/elements/Range.js +7 -8
- package/dist/esm/elements/Select.js +8 -9
- package/dist/esm/elements/Textarea.js +13 -14
- package/dist/esm/elements/Toggle.js +5 -6
- package/dist/esm/elements/common/Fieldset.js +4 -5
- package/dist/esm/elements/common/Label.js +8 -9
- package/dist/esm/elements/common/Message.js +6 -7
- package/dist/esm/elements/common/MessageIcon.js +13 -15
- package/dist/esm/elements/faux-input/FauxInput.js +14 -15
- package/dist/esm/elements/faux-input/components/EndIcon.js +13 -16
- package/dist/esm/elements/faux-input/components/StartIcon.js +13 -16
- package/dist/esm/elements/file-list/FileList.js +5 -8
- package/dist/esm/elements/file-list/components/File.js +9 -10
- package/dist/esm/elements/file-list/components/Item.js +5 -8
- package/dist/esm/elements/input-group/InputGroup.js +4 -5
- package/dist/esm/elements/tiles/Tiles.js +8 -12
- package/dist/esm/elements/tiles/components/Tile.js +6 -7
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/check-circle-stroke.svg.js +2 -2
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/dash-fill.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-document-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-error-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-generic-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-image-stroke.svg.js +7 -7
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-pdf-stroke.svg.js +7 -7
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-presentation-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-spreadsheet-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-zip-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/trash-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +5 -5
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js +5 -5
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js +6 -6
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/circle-sm-fill.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-document-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-generic-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-image-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-pdf-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-presentation-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-spreadsheet-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-zip-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/trash-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +4 -4
- package/dist/esm/styled/checkbox/StyledCheckHint.js +3 -3
- package/dist/esm/styled/checkbox/StyledCheckInput.js +7 -8
- package/dist/esm/styled/checkbox/StyledCheckLabel.js +3 -3
- package/dist/esm/styled/checkbox/StyledCheckMessage.js +3 -3
- package/dist/esm/styled/checkbox/StyledCheckSvg.js +3 -3
- package/dist/esm/styled/checkbox/StyledDashSvg.js +3 -3
- package/dist/esm/styled/common/StyledField.js +3 -3
- package/dist/esm/styled/common/StyledFieldset.js +3 -3
- package/dist/esm/styled/common/StyledHint.js +3 -3
- package/dist/esm/styled/common/StyledLabel.js +3 -3
- package/dist/esm/styled/common/StyledLegend.js +3 -3
- package/dist/esm/styled/common/StyledMessage.js +13 -15
- package/dist/esm/styled/common/StyledMessageIcon.js +3 -3
- package/dist/esm/styled/file-list/StyledFile.js +14 -16
- package/dist/esm/styled/file-list/StyledFileClose.js +3 -3
- package/dist/esm/styled/file-list/StyledFileDelete.js +3 -3
- package/dist/esm/styled/file-list/StyledFileIcon.js +12 -14
- package/dist/esm/styled/file-list/StyledFileList.js +3 -3
- package/dist/esm/styled/file-list/StyledFileListItem.js +3 -3
- package/dist/esm/styled/file-upload/StyledFileUpload.js +13 -15
- package/dist/esm/styled/input-group/StyledInputGroup.js +3 -3
- package/dist/esm/styled/radio/StyledRadioHint.js +3 -3
- package/dist/esm/styled/radio/StyledRadioInput.js +11 -13
- package/dist/esm/styled/radio/StyledRadioLabel.js +5 -5
- package/dist/esm/styled/radio/StyledRadioMessage.js +3 -3
- package/dist/esm/styled/radio/StyledRadioSvg.js +3 -3
- package/dist/esm/styled/range/StyledRangeInput.js +15 -20
- package/dist/esm/styled/select/StyledSelect.js +12 -14
- package/dist/esm/styled/select/StyledSelectWrapper.js +8 -9
- package/dist/esm/styled/text/StyledTextFauxInput.js +11 -12
- package/dist/esm/styled/text/StyledTextInput.js +17 -19
- package/dist/esm/styled/text/StyledTextMediaFigure.js +11 -12
- package/dist/esm/styled/text/StyledTextMediaInput.js +3 -3
- package/dist/esm/styled/text/StyledTextarea.js +3 -3
- package/dist/esm/styled/tiles/StyledTile.js +10 -12
- package/dist/esm/styled/tiles/StyledTileDescription.js +8 -9
- package/dist/esm/styled/tiles/StyledTileIcon.js +11 -13
- package/dist/esm/styled/tiles/StyledTileLabel.js +5 -6
- package/dist/esm/styled/toggle/StyledToggleHint.js +3 -3
- package/dist/esm/styled/toggle/StyledToggleInput.js +10 -12
- package/dist/esm/styled/toggle/StyledToggleLabel.js +5 -5
- package/dist/esm/styled/toggle/StyledToggleMessage.js +3 -3
- package/dist/esm/styled/toggle/StyledToggleSvg.js +3 -3
- package/dist/index.cjs.js +336 -401
- package/package.json +5 -5
|
@@ -54,13 +54,12 @@ import '../styled/tiles/StyledTileInput.js';
|
|
|
54
54
|
import '../styled/tiles/StyledTileLabel.js';
|
|
55
55
|
import useFieldsetContext from '../utils/useFieldsetContext.js';
|
|
56
56
|
|
|
57
|
-
const Checkbox = React__default.forwardRef((
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
} = _ref;
|
|
57
|
+
const Checkbox = React__default.forwardRef(({
|
|
58
|
+
indeterminate,
|
|
59
|
+
children,
|
|
60
|
+
isCompact,
|
|
61
|
+
...other
|
|
62
|
+
}, ref) => {
|
|
64
63
|
const fieldsetContext = useFieldsetContext();
|
|
65
64
|
const fieldContext = useFieldContext();
|
|
66
65
|
const inputRef = inputElement => {
|
|
@@ -51,13 +51,12 @@ import '../styled/tiles/StyledTileIcon.js';
|
|
|
51
51
|
import '../styled/tiles/StyledTileInput.js';
|
|
52
52
|
import '../styled/tiles/StyledTileLabel.js';
|
|
53
53
|
|
|
54
|
-
const FileUpload = React__default.forwardRef((
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
} = _ref;
|
|
54
|
+
const FileUpload = React__default.forwardRef(({
|
|
55
|
+
disabled,
|
|
56
|
+
isCompact,
|
|
57
|
+
isDragging,
|
|
58
|
+
...other
|
|
59
|
+
}, ref) => {
|
|
61
60
|
return (
|
|
62
61
|
React__default.createElement(StyledFileUpload, Object.assign({
|
|
63
62
|
ref: ref,
|
|
@@ -55,15 +55,14 @@ import '../styled/tiles/StyledTileIcon.js';
|
|
|
55
55
|
import '../styled/tiles/StyledTileInput.js';
|
|
56
56
|
import '../styled/tiles/StyledTileLabel.js';
|
|
57
57
|
|
|
58
|
-
const Input = React__default.forwardRef((
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
} = _ref;
|
|
58
|
+
const Input = React__default.forwardRef(({
|
|
59
|
+
onSelect,
|
|
60
|
+
isBare,
|
|
61
|
+
isCompact,
|
|
62
|
+
focusInset,
|
|
63
|
+
validation,
|
|
64
|
+
...other
|
|
65
|
+
}, ref) => {
|
|
67
66
|
const fieldContext = useFieldContext();
|
|
68
67
|
const inputGroupContext = useInputGroupContext();
|
|
69
68
|
let combinedProps = other;
|
|
@@ -56,21 +56,20 @@ import '../styled/tiles/StyledTileLabel.js';
|
|
|
56
56
|
import { FauxInput } from './faux-input/FauxInput.js';
|
|
57
57
|
import useFieldContext from '../utils/useFieldContext.js';
|
|
58
58
|
|
|
59
|
-
const MediaInput = React__default.forwardRef((
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
} = _ref;
|
|
59
|
+
const MediaInput = React__default.forwardRef(({
|
|
60
|
+
start,
|
|
61
|
+
end,
|
|
62
|
+
disabled,
|
|
63
|
+
isCompact,
|
|
64
|
+
isBare,
|
|
65
|
+
focusInset,
|
|
66
|
+
readOnly,
|
|
67
|
+
validation,
|
|
68
|
+
wrapperProps = {},
|
|
69
|
+
wrapperRef,
|
|
70
|
+
onSelect,
|
|
71
|
+
...props
|
|
72
|
+
}, ref) => {
|
|
74
73
|
const fieldContext = useFieldContext();
|
|
75
74
|
const inputRef = useRef();
|
|
76
75
|
const [isFocused, setIsFocused] = useState(false);
|
|
@@ -54,12 +54,11 @@ import '../styled/tiles/StyledTileInput.js';
|
|
|
54
54
|
import '../styled/tiles/StyledTileLabel.js';
|
|
55
55
|
import useFieldsetContext from '../utils/useFieldsetContext.js';
|
|
56
56
|
|
|
57
|
-
const Radio = React__default.forwardRef((
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
} = _ref;
|
|
57
|
+
const Radio = React__default.forwardRef(({
|
|
58
|
+
children,
|
|
59
|
+
isCompact,
|
|
60
|
+
...other
|
|
61
|
+
}, ref) => {
|
|
63
62
|
const fieldsetContext = useFieldsetContext();
|
|
64
63
|
const fieldContext = useFieldContext();
|
|
65
64
|
let combinedProps = {
|
|
@@ -53,14 +53,13 @@ import '../styled/tiles/StyledTileIcon.js';
|
|
|
53
53
|
import '../styled/tiles/StyledTileInput.js';
|
|
54
54
|
import '../styled/tiles/StyledTileLabel.js';
|
|
55
55
|
|
|
56
|
-
const Range = React__default.forwardRef((
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
} = _ref;
|
|
56
|
+
const Range = React__default.forwardRef(({
|
|
57
|
+
hasLowerTrack = true,
|
|
58
|
+
min = 0,
|
|
59
|
+
max = 100,
|
|
60
|
+
step = 1,
|
|
61
|
+
...other
|
|
62
|
+
}, ref) => {
|
|
64
63
|
const [backgroundSize, setBackgroundSize] = useState('0');
|
|
65
64
|
const rangeRef = useRef();
|
|
66
65
|
const fieldContext = useFieldContext();
|
|
@@ -55,15 +55,14 @@ import '../styled/tiles/StyledTileLabel.js';
|
|
|
55
55
|
import { FauxInput } from './faux-input/FauxInput.js';
|
|
56
56
|
import useFieldContext from '../utils/useFieldContext.js';
|
|
57
57
|
|
|
58
|
-
const Select = React__default.forwardRef((
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
} = _ref;
|
|
58
|
+
const Select = React__default.forwardRef(({
|
|
59
|
+
disabled,
|
|
60
|
+
isCompact,
|
|
61
|
+
validation,
|
|
62
|
+
focusInset,
|
|
63
|
+
isBare,
|
|
64
|
+
...props
|
|
65
|
+
}, ref) => {
|
|
67
66
|
const fieldContext = useFieldContext();
|
|
68
67
|
let combinedProps = {
|
|
69
68
|
$focusInset: focusInset,
|
|
@@ -58,20 +58,19 @@ import '../styled/tiles/StyledTileLabel.js';
|
|
|
58
58
|
const parseStyleValue = value => {
|
|
59
59
|
return parseInt(value, 10) || 0;
|
|
60
60
|
};
|
|
61
|
-
const Textarea = React__default.forwardRef((
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
} = _ref;
|
|
61
|
+
const Textarea = React__default.forwardRef(({
|
|
62
|
+
isCompact,
|
|
63
|
+
isBare,
|
|
64
|
+
focusInset,
|
|
65
|
+
isResizable,
|
|
66
|
+
minRows,
|
|
67
|
+
maxRows,
|
|
68
|
+
style,
|
|
69
|
+
validation,
|
|
70
|
+
onChange,
|
|
71
|
+
onSelect,
|
|
72
|
+
...other
|
|
73
|
+
}, ref) => {
|
|
75
74
|
const fieldContext = useFieldContext();
|
|
76
75
|
const textAreaRef = useRef();
|
|
77
76
|
const shadowTextAreaRef = useRef(null);
|
|
@@ -54,12 +54,11 @@ import '../styled/tiles/StyledTileInput.js';
|
|
|
54
54
|
import '../styled/tiles/StyledTileLabel.js';
|
|
55
55
|
import useFieldsetContext from '../utils/useFieldsetContext.js';
|
|
56
56
|
|
|
57
|
-
const Toggle = React__default.forwardRef((
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
} = _ref;
|
|
57
|
+
const Toggle = React__default.forwardRef(({
|
|
58
|
+
children,
|
|
59
|
+
isCompact,
|
|
60
|
+
...other
|
|
61
|
+
}, ref) => {
|
|
63
62
|
const fieldsetContext = useFieldsetContext();
|
|
64
63
|
const fieldContext = useFieldContext();
|
|
65
64
|
let combinedProps = {
|
|
@@ -53,11 +53,10 @@ import '../../styled/tiles/StyledTileInput.js';
|
|
|
53
53
|
import '../../styled/tiles/StyledTileLabel.js';
|
|
54
54
|
import { FieldsetContext } from '../../utils/useFieldsetContext.js';
|
|
55
55
|
|
|
56
|
-
const FieldsetComponent = forwardRef((
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
} = _ref;
|
|
56
|
+
const FieldsetComponent = forwardRef(({
|
|
57
|
+
isCompact,
|
|
58
|
+
...other
|
|
59
|
+
}, ref) => {
|
|
61
60
|
const fieldsetContext = useMemo(() => ({
|
|
62
61
|
isCompact
|
|
63
62
|
}), [isCompact]);
|
|
@@ -55,12 +55,11 @@ import '../../styled/tiles/StyledTileIcon.js';
|
|
|
55
55
|
import '../../styled/tiles/StyledTileInput.js';
|
|
56
56
|
import '../../styled/tiles/StyledTileLabel.js';
|
|
57
57
|
|
|
58
|
-
const Label = React__default.forwardRef((
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
} = _ref;
|
|
58
|
+
const Label$1 = React__default.forwardRef(({
|
|
59
|
+
children,
|
|
60
|
+
isRegular,
|
|
61
|
+
...other
|
|
62
|
+
}, ref) => {
|
|
64
63
|
const fieldContext = useFieldContext();
|
|
65
64
|
const fieldsetContext = useFieldsetContext();
|
|
66
65
|
const type = useInputContext();
|
|
@@ -128,9 +127,9 @@ const Label = React__default.forwardRef((_ref, ref) => {
|
|
|
128
127
|
$isRegular: $isRegular
|
|
129
128
|
}), children);
|
|
130
129
|
});
|
|
131
|
-
Label.displayName = 'Field.Label';
|
|
132
|
-
Label.propTypes = {
|
|
130
|
+
Label$1.displayName = 'Field.Label';
|
|
131
|
+
Label$1.propTypes = {
|
|
133
132
|
isRegular: PropTypes.bool
|
|
134
133
|
};
|
|
135
134
|
|
|
136
|
-
export { Label };
|
|
135
|
+
export { Label$1 as Label };
|
|
@@ -56,13 +56,12 @@ import '../../styled/tiles/StyledTileInput.js';
|
|
|
56
56
|
import '../../styled/tiles/StyledTileLabel.js';
|
|
57
57
|
import { MessageIcon } from './MessageIcon.js';
|
|
58
58
|
|
|
59
|
-
const Message = React__default.forwardRef((
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
} = _ref;
|
|
59
|
+
const Message = React__default.forwardRef(({
|
|
60
|
+
validation,
|
|
61
|
+
validationLabel,
|
|
62
|
+
children,
|
|
63
|
+
...other
|
|
64
|
+
}, ref) => {
|
|
66
65
|
const {
|
|
67
66
|
hasMessage,
|
|
68
67
|
setHasMessage,
|
|
@@ -55,21 +55,19 @@ import '../../styled/tiles/StyledTileInput.js';
|
|
|
55
55
|
import '../../styled/tiles/StyledTileLabel.js';
|
|
56
56
|
import { VALIDATION } from '../../types/index.js';
|
|
57
57
|
|
|
58
|
-
const MessageIcon =
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}[validation] : children);
|
|
72
|
-
};
|
|
58
|
+
const MessageIcon = ({
|
|
59
|
+
validation,
|
|
60
|
+
children,
|
|
61
|
+
...props
|
|
62
|
+
}) =>
|
|
63
|
+
React__default.createElement(StyledMessageIcon, Object.assign({
|
|
64
|
+
"aria-hidden": false,
|
|
65
|
+
role: "img"
|
|
66
|
+
}, props), validation ? {
|
|
67
|
+
error: React__default.createElement(SvgAlertErrorStroke, null),
|
|
68
|
+
success: React__default.createElement(SvgCheckCircleStroke, null),
|
|
69
|
+
warning: React__default.createElement(SvgAlertWarningStroke, null)
|
|
70
|
+
}[validation] : children);
|
|
73
71
|
MessageIcon.displayName = 'Field.MessageIcon';
|
|
74
72
|
MessageIcon.propTypes = {
|
|
75
73
|
validation: PropTypes.oneOf(VALIDATION)
|
|
@@ -55,21 +55,20 @@ import '../../styled/tiles/StyledTileLabel.js';
|
|
|
55
55
|
import { StartIcon } from './components/StartIcon.js';
|
|
56
56
|
import { EndIcon } from './components/EndIcon.js';
|
|
57
57
|
|
|
58
|
-
const FauxInputComponent = forwardRef((
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
} = _ref;
|
|
58
|
+
const FauxInputComponent = forwardRef(({
|
|
59
|
+
disabled,
|
|
60
|
+
focusInset,
|
|
61
|
+
isBare,
|
|
62
|
+
isCompact,
|
|
63
|
+
isFocused: controlledIsFocused,
|
|
64
|
+
isHovered,
|
|
65
|
+
onBlur,
|
|
66
|
+
onFocus,
|
|
67
|
+
readOnly,
|
|
68
|
+
validation,
|
|
69
|
+
mediaLayout,
|
|
70
|
+
...other
|
|
71
|
+
}, ref) => {
|
|
73
72
|
const [isFocused, setIsFocused] = useState(false);
|
|
74
73
|
const onFocusHandler = composeEventHandlers(onFocus, () => {
|
|
75
74
|
setIsFocused(true);
|
|
@@ -50,22 +50,19 @@ import '../../../styled/tiles/StyledTileIcon.js';
|
|
|
50
50
|
import '../../../styled/tiles/StyledTileInput.js';
|
|
51
51
|
import '../../../styled/tiles/StyledTileLabel.js';
|
|
52
52
|
|
|
53
|
-
const EndIconComponent =
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
$isRotated: isRotated
|
|
67
|
-
}, props));
|
|
68
|
-
};
|
|
53
|
+
const EndIconComponent = ({
|
|
54
|
+
isDisabled,
|
|
55
|
+
isFocused,
|
|
56
|
+
isHovered,
|
|
57
|
+
isRotated,
|
|
58
|
+
...props
|
|
59
|
+
}) => React__default.createElement(StyledTextMediaFigure, Object.assign({
|
|
60
|
+
$position: "end",
|
|
61
|
+
$isDisabled: isDisabled,
|
|
62
|
+
$isFocused: isFocused,
|
|
63
|
+
$isHovered: isHovered,
|
|
64
|
+
$isRotated: isRotated
|
|
65
|
+
}, props));
|
|
69
66
|
EndIconComponent.displayName = 'FauxInput.EndIcon';
|
|
70
67
|
const EndIcon = EndIconComponent;
|
|
71
68
|
|
|
@@ -50,22 +50,19 @@ import '../../../styled/tiles/StyledTileIcon.js';
|
|
|
50
50
|
import '../../../styled/tiles/StyledTileInput.js';
|
|
51
51
|
import '../../../styled/tiles/StyledTileLabel.js';
|
|
52
52
|
|
|
53
|
-
const StartIconComponent =
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
$isRotated: isRotated
|
|
67
|
-
}, props));
|
|
68
|
-
};
|
|
53
|
+
const StartIconComponent = ({
|
|
54
|
+
isDisabled,
|
|
55
|
+
isFocused,
|
|
56
|
+
isHovered,
|
|
57
|
+
isRotated,
|
|
58
|
+
...props
|
|
59
|
+
}) => React__default.createElement(StyledTextMediaFigure, Object.assign({
|
|
60
|
+
$position: "start",
|
|
61
|
+
$isDisabled: isDisabled,
|
|
62
|
+
$isFocused: isFocused,
|
|
63
|
+
$isHovered: isHovered,
|
|
64
|
+
$isRotated: isRotated
|
|
65
|
+
}, props));
|
|
69
66
|
StartIconComponent.displayName = 'FauxInput.StartIcon';
|
|
70
67
|
const StartIcon = StartIconComponent;
|
|
71
68
|
|
|
@@ -51,14 +51,11 @@ import '../../styled/tiles/StyledTileIcon.js';
|
|
|
51
51
|
import '../../styled/tiles/StyledTileInput.js';
|
|
52
52
|
import '../../styled/tiles/StyledTileLabel.js';
|
|
53
53
|
|
|
54
|
-
const FileListComponent = forwardRef((
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
ref: ref
|
|
60
|
-
}));
|
|
61
|
-
});
|
|
54
|
+
const FileListComponent = forwardRef(({
|
|
55
|
+
...props
|
|
56
|
+
}, ref) => React__default.createElement(StyledFileList, Object.assign({}, props, {
|
|
57
|
+
ref: ref
|
|
58
|
+
})));
|
|
62
59
|
FileListComponent.displayName = 'FileList';
|
|
63
60
|
const FileList = FileListComponent;
|
|
64
61
|
FileList.Item = Item;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React__default, { forwardRef, useMemo, Children } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import {
|
|
9
|
+
import { FILE_VALIDATION, FILE_TYPE } from '../../../types/index.js';
|
|
10
10
|
import { Close } from './Close.js';
|
|
11
11
|
import { Delete } from './Delete.js';
|
|
12
12
|
import '../../../styled/common/StyledField.js';
|
|
@@ -56,15 +56,14 @@ import '../../../styled/tiles/StyledTileLabel.js';
|
|
|
56
56
|
import { FileContext } from '../../../utils/useFileContext.js';
|
|
57
57
|
import { fileIconsCompact, fileIconsDefault } from '../utils.js';
|
|
58
58
|
|
|
59
|
-
const FileComponent = forwardRef((
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
} = _ref;
|
|
59
|
+
const FileComponent = forwardRef(({
|
|
60
|
+
children,
|
|
61
|
+
type,
|
|
62
|
+
isCompact,
|
|
63
|
+
focusInset,
|
|
64
|
+
validation,
|
|
65
|
+
...props
|
|
66
|
+
}, ref) => {
|
|
68
67
|
const fileContextValue = useMemo(() => ({
|
|
69
68
|
isCompact
|
|
70
69
|
}), [isCompact]);
|
|
@@ -50,14 +50,11 @@ import '../../../styled/tiles/StyledTileIcon.js';
|
|
|
50
50
|
import '../../../styled/tiles/StyledTileInput.js';
|
|
51
51
|
import '../../../styled/tiles/StyledTileLabel.js';
|
|
52
52
|
|
|
53
|
-
const ItemComponent = forwardRef((
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
ref: ref
|
|
59
|
-
}));
|
|
60
|
-
});
|
|
53
|
+
const ItemComponent = forwardRef(({
|
|
54
|
+
...props
|
|
55
|
+
}, ref) => React__default.createElement(StyledFileListItem, Object.assign({}, props, {
|
|
56
|
+
ref: ref
|
|
57
|
+
})));
|
|
61
58
|
ItemComponent.displayName = 'FileList.Item';
|
|
62
59
|
const Item = ItemComponent;
|
|
63
60
|
|
|
@@ -52,11 +52,10 @@ import '../../styled/tiles/StyledTileIcon.js';
|
|
|
52
52
|
import '../../styled/tiles/StyledTileInput.js';
|
|
53
53
|
import '../../styled/tiles/StyledTileLabel.js';
|
|
54
54
|
|
|
55
|
-
const InputGroup = React__default.forwardRef((
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
} = _ref;
|
|
55
|
+
const InputGroup = React__default.forwardRef(({
|
|
56
|
+
isCompact,
|
|
57
|
+
...other
|
|
58
|
+
}, ref) => {
|
|
60
59
|
const contextValue = useMemo(() => ({
|
|
61
60
|
isCompact
|
|
62
61
|
}), [isCompact]);
|
|
@@ -13,19 +13,15 @@ import { Description } from './components/Description.js';
|
|
|
13
13
|
import { Icon } from './components/Icon.js';
|
|
14
14
|
import { Label } from './components/Label.js';
|
|
15
15
|
|
|
16
|
-
const TilesComponent = forwardRef((
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
16
|
+
const TilesComponent = forwardRef(({
|
|
17
|
+
onChange,
|
|
18
|
+
value: controlledValue,
|
|
19
|
+
name,
|
|
20
|
+
isCentered = true,
|
|
21
|
+
...props
|
|
22
|
+
}, ref) => {
|
|
24
23
|
const [value, setValue] = useState(controlledValue);
|
|
25
|
-
const handleOnChange = useCallback(
|
|
26
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
27
|
-
args[_key] = arguments[_key];
|
|
28
|
-
}
|
|
24
|
+
const handleOnChange = useCallback((...args) => {
|
|
29
25
|
setValue(args[0].target.value);
|
|
30
26
|
if (onChange) {
|
|
31
27
|
onChange(...args);
|
|
@@ -52,13 +52,12 @@ import '../../../styled/tiles/StyledTileIcon.js';
|
|
|
52
52
|
import { StyledTileInput } from '../../../styled/tiles/StyledTileInput.js';
|
|
53
53
|
import '../../../styled/tiles/StyledTileLabel.js';
|
|
54
54
|
|
|
55
|
-
const TileComponent = React__default.forwardRef((
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
} = _ref;
|
|
55
|
+
const TileComponent = React__default.forwardRef(({
|
|
56
|
+
children,
|
|
57
|
+
value,
|
|
58
|
+
disabled,
|
|
59
|
+
...props
|
|
60
|
+
}, ref) => {
|
|
62
61
|
const tilesContext = useTilesContext();
|
|
63
62
|
const inputRef = useRef(null);
|
|
64
63
|
let inputProps;
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
9
|
var _g;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
10
|
+
function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
|
|
11
11
|
var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$9({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 12,
|
|
15
15
|
height: 12,
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
|
-
var _path;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
9
|
+
var _path$n;
|
|
10
|
+
function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
|
|
11
11
|
var SvgCheckSmFill = function SvgCheckSmFill(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$s({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 12,
|
|
15
15
|
height: 12,
|
|
16
16
|
focusable: "false",
|
|
17
17
|
viewBox: "0 0 12 12",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
}, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
|
|
20
20
|
fill: "none",
|
|
21
21
|
stroke: "currentColor",
|
|
22
22
|
strokeLinecap: "round",
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
|
-
var _circle;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
11
|
-
var SvgCircleSmFill = function SvgCircleSmFill(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
9
|
+
var _circle$5;
|
|
10
|
+
function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
|
|
11
|
+
var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$q({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 12,
|
|
15
15
|
height: 12,
|
|
16
16
|
focusable: "false",
|
|
17
17
|
viewBox: "0 0 12 12",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
}, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
|
|
19
|
+
}, props), _circle$5 || (_circle$5 = /*#__PURE__*/React.createElement("circle", {
|
|
20
20
|
cx: 6,
|
|
21
21
|
cy: 6,
|
|
22
22
|
r: 2,
|
|
@@ -24,4 +24,4 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
|
|
|
24
24
|
})));
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
export { SvgCircleSmFill as default };
|
|
27
|
+
export { SvgCircleSmFill$1 as default };
|