@zendeskgarden/react-forms 8.73.4 → 9.0.0-next.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.
Files changed (4) hide show
  1. package/dist/index.cjs.js +63 -97
  2. package/dist/index.esm.js +59 -91
  3. package/dist/typings/utils/useFieldContext.d.ts +2 -2
  4. package/package.json +7 -7
package/dist/index.cjs.js CHANGED
@@ -14,8 +14,7 @@ var reactTheming = require('@zendeskgarden/react-theming');
14
14
  var polished = require('polished');
15
15
  var PropTypes = require('prop-types');
16
16
  var containerUtilities = require('@zendeskgarden/container-utilities');
17
- var mergeRefs = require('react-merge-refs');
18
- var debounce = require('lodash.debounce');
17
+ var reactMergeRefs = require('react-merge-refs');
19
18
  var containerSlider = require('@zendeskgarden/container-slider');
20
19
 
21
20
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -41,8 +40,6 @@ function _interopNamespace(e) {
41
40
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
42
41
  var styled__default = /*#__PURE__*/_interopDefault(styled);
43
42
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
44
- var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
45
- var debounce__default = /*#__PURE__*/_interopDefault(debounce);
46
43
 
47
44
  function _extends$t() {
48
45
  _extends$t = Object.assign ? Object.assign.bind() : function (target) {
@@ -68,7 +65,7 @@ const useFieldContext = () => {
68
65
  const COMPONENT_ID$K = 'forms.field';
69
66
  const StyledField = styled__default.default.div.attrs({
70
67
  'data-garden-id': COMPONENT_ID$K,
71
- 'data-garden-version': '8.73.4'
68
+ 'data-garden-version': '9.0.0-next.0'
72
69
  }).withConfig({
73
70
  displayName: "StyledField",
74
71
  componentId: "sc-12gzfsu-0"
@@ -81,7 +78,7 @@ const COMPONENT_ID$J = 'forms.fieldset';
81
78
  const StyledFieldset = styled__default.default(StyledField).attrs({
82
79
  as: 'fieldset',
83
80
  'data-garden-id': COMPONENT_ID$J,
84
- 'data-garden-version': '8.73.4'
81
+ 'data-garden-version': '9.0.0-next.0'
85
82
  }).withConfig({
86
83
  displayName: "StyledFieldset",
87
84
  componentId: "sc-1vr4mxv-0"
@@ -93,7 +90,7 @@ StyledFieldset.defaultProps = {
93
90
  const COMPONENT_ID$I = 'forms.input_label';
94
91
  const StyledLabel = styled__default.default.label.attrs(props => ({
95
92
  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$I,
96
- 'data-garden-version': props['data-garden-version'] || '8.73.4'
93
+ 'data-garden-version': props['data-garden-version'] || '9.0.0-next.0'
97
94
  })).withConfig({
98
95
  displayName: "StyledLabel",
99
96
  componentId: "sc-2utmsz-0"
@@ -106,7 +103,7 @@ const COMPONENT_ID$H = 'forms.fieldset_legend';
106
103
  const StyledLegend = styled__default.default(StyledLabel).attrs({
107
104
  as: 'legend',
108
105
  'data-garden-id': COMPONENT_ID$H,
109
- 'data-garden-version': '8.73.4'
106
+ 'data-garden-version': '9.0.0-next.0'
110
107
  }).withConfig({
111
108
  displayName: "StyledLegend",
112
109
  componentId: "sc-6s0zwq-0"
@@ -118,7 +115,7 @@ StyledLegend.defaultProps = {
118
115
  const COMPONENT_ID$G = 'forms.input_hint';
119
116
  const StyledHint = styled__default.default.div.attrs(props => ({
120
117
  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$G,
121
- 'data-garden-version': props['data-garden-version'] || '8.73.4'
118
+ 'data-garden-version': props['data-garden-version'] || '9.0.0-next.0'
122
119
  })).withConfig({
123
120
  displayName: "StyledHint",
124
121
  componentId: "sc-17c2wu8-0"
@@ -223,7 +220,7 @@ const MessageIcon = _ref => {
223
220
  const COMPONENT_ID$F = 'forms.input_message_icon';
224
221
  const StyledMessageIcon = styled__default.default(MessageIcon).attrs({
225
222
  'data-garden-id': COMPONENT_ID$F,
226
- 'data-garden-version': '8.73.4',
223
+ 'data-garden-version': '9.0.0-next.0',
227
224
  'aria-hidden': null
228
225
  }).withConfig({
229
226
  displayName: "StyledMessageIcon",
@@ -251,7 +248,7 @@ const validationStyles = props => {
251
248
  const COMPONENT_ID$E = 'forms.input_message';
252
249
  const StyledMessage = styled__default.default.div.attrs(props => ({
253
250
  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
254
- 'data-garden-version': props['data-garden-version'] || '8.73.4'
251
+ 'data-garden-version': props['data-garden-version'] || '9.0.0-next.0'
255
252
  })).withConfig({
256
253
  displayName: "StyledMessage",
257
254
  componentId: "sc-30hgg7-0"
@@ -341,7 +338,7 @@ const sizeStyles$f = props => {
341
338
  };
342
339
  const StyledTextInput = styled__default.default.input.attrs(props => ({
343
340
  'data-garden-id': COMPONENT_ID$D,
344
- 'data-garden-version': '8.73.4',
341
+ 'data-garden-version': '9.0.0-next.0',
345
342
  'aria-invalid': isInvalid(props.validation)
346
343
  })).withConfig({
347
344
  displayName: "StyledTextInput",
@@ -364,7 +361,7 @@ const hiddenStyles = `
364
361
  const StyledTextarea = styled__default.default(StyledTextInput).attrs({
365
362
  as: 'textarea',
366
363
  'data-garden-id': COMPONENT_ID$C,
367
- 'data-garden-version': '8.73.4'
364
+ 'data-garden-version': '9.0.0-next.0'
368
365
  }).withConfig({
369
366
  displayName: "StyledTextarea",
370
367
  componentId: "sc-wxschl-0"
@@ -410,7 +407,7 @@ _ref => {
410
407
  return React__namespace.default.cloneElement(React.Children.only(children), props);
411
408
  }).attrs({
412
409
  'data-garden-id': COMPONENT_ID$B,
413
- 'data-garden-version': '8.73.4'
410
+ 'data-garden-version': '9.0.0-next.0'
414
411
  }).withConfig({
415
412
  displayName: "StyledTextMediaFigure",
416
413
  componentId: "sc-1qepknj-0"
@@ -457,7 +454,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
457
454
  'aria-readonly': props.isReadOnly,
458
455
  'aria-disabled': props.isDisabled,
459
456
  'data-garden-id': COMPONENT_ID$A,
460
- 'data-garden-version': '8.73.4'
457
+ 'data-garden-version': '9.0.0-next.0'
461
458
  })).withConfig({
462
459
  displayName: "StyledTextFauxInput",
463
460
  componentId: "sc-yqw7j9-0"
@@ -469,7 +466,7 @@ StyledTextFauxInput.defaultProps = {
469
466
  const COMPONENT_ID$z = 'forms.media_input';
470
467
  const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
471
468
  'data-garden-id': COMPONENT_ID$z,
472
- 'data-garden-version': '8.73.4',
469
+ 'data-garden-version': '9.0.0-next.0',
473
470
  isBare: true
474
471
  }).withConfig({
475
472
  displayName: "StyledTextMediaInput",
@@ -491,7 +488,7 @@ const itemStyles = props => {
491
488
  };
492
489
  const StyledInputGroup = styled__default.default.div.attrs({
493
490
  'data-garden-id': COMPONENT_ID$y,
494
- 'data-garden-version': '8.73.4'
491
+ 'data-garden-version': '9.0.0-next.0'
495
492
  }).withConfig({
496
493
  displayName: "StyledInputGroup",
497
494
  componentId: "sc-kjh1f0-0"
@@ -509,7 +506,7 @@ const sizeStyles$d = props => {
509
506
  };
510
507
  const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
511
508
  'data-garden-id': COMPONENT_ID$x,
512
- 'data-garden-version': '8.73.4',
509
+ 'data-garden-version': '9.0.0-next.0',
513
510
  isRadio: true
514
511
  }).withConfig({
515
512
  displayName: "StyledRadioLabel",
@@ -522,7 +519,7 @@ StyledRadioLabel.defaultProps = {
522
519
  const COMPONENT_ID$w = 'forms.checkbox_label';
523
520
  const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
524
521
  'data-garden-id': COMPONENT_ID$w,
525
- 'data-garden-version': '8.73.4'
522
+ 'data-garden-version': '9.0.0-next.0'
526
523
  }).withConfig({
527
524
  displayName: "StyledCheckLabel",
528
525
  componentId: "sc-x7nr1-0"
@@ -534,7 +531,7 @@ StyledCheckLabel.defaultProps = {
534
531
  const COMPONENT_ID$v = 'forms.radio_hint';
535
532
  const StyledRadioHint = styled__default.default(StyledHint).attrs({
536
533
  'data-garden-id': COMPONENT_ID$v,
537
- 'data-garden-version': '8.73.4'
534
+ 'data-garden-version': '9.0.0-next.0'
538
535
  }).withConfig({
539
536
  displayName: "StyledRadioHint",
540
537
  componentId: "sc-eo8twg-0"
@@ -546,7 +543,7 @@ StyledRadioHint.defaultProps = {
546
543
  const COMPONENT_ID$u = 'forms.checkbox_hint';
547
544
  const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
548
545
  'data-garden-id': COMPONENT_ID$u,
549
- 'data-garden-version': '8.73.4'
546
+ 'data-garden-version': '9.0.0-next.0'
550
547
  }).withConfig({
551
548
  displayName: "StyledCheckHint",
552
549
  componentId: "sc-1kl8e8c-0"
@@ -593,7 +590,7 @@ const sizeStyles$c = props => {
593
590
  };
594
591
  const StyledRadioInput = styled__default.default.input.attrs({
595
592
  'data-garden-id': COMPONENT_ID$t,
596
- 'data-garden-version': '8.73.4',
593
+ 'data-garden-version': '9.0.0-next.0',
597
594
  type: 'radio'
598
595
  }).withConfig({
599
596
  displayName: "StyledRadioInput",
@@ -615,7 +612,7 @@ const colorStyles$8 = props => {
615
612
  };
616
613
  const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
617
614
  'data-garden-id': COMPONENT_ID$s,
618
- 'data-garden-version': '8.73.4',
615
+ 'data-garden-version': '9.0.0-next.0',
619
616
  type: 'checkbox'
620
617
  }).withConfig({
621
618
  displayName: "StyledCheckInput",
@@ -628,7 +625,7 @@ StyledCheckInput.defaultProps = {
628
625
  const COMPONENT_ID$r = 'forms.radio_message';
629
626
  const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
630
627
  'data-garden-id': COMPONENT_ID$r,
631
- 'data-garden-version': '8.73.4'
628
+ 'data-garden-version': '9.0.0-next.0'
632
629
  }).withConfig({
633
630
  displayName: "StyledRadioMessage",
634
631
  componentId: "sc-1pmi0q8-0"
@@ -640,7 +637,7 @@ StyledRadioMessage.defaultProps = {
640
637
  const COMPONENT_ID$q = 'forms.checkbox_message';
641
638
  const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
642
639
  'data-garden-id': COMPONENT_ID$q,
643
- 'data-garden-version': '8.73.4'
640
+ 'data-garden-version': '9.0.0-next.0'
644
641
  }).withConfig({
645
642
  displayName: "StyledCheckMessage",
646
643
  componentId: "sc-s4p6kd-0"
@@ -672,7 +669,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
672
669
  const COMPONENT_ID$p = 'forms.check_svg';
673
670
  const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
674
671
  'data-garden-id': COMPONENT_ID$p,
675
- 'data-garden-version': '8.73.4'
672
+ 'data-garden-version': '9.0.0-next.0'
676
673
  }).withConfig({
677
674
  displayName: "StyledCheckSvg",
678
675
  componentId: "sc-fvxetk-0"
@@ -702,7 +699,7 @@ var SvgDashFill = function SvgDashFill(props) {
702
699
  const COMPONENT_ID$o = 'forms.dash_svg';
703
700
  const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
704
701
  'data-garden-id': COMPONENT_ID$o,
705
- 'data-garden-version': '8.73.4'
702
+ 'data-garden-version': '9.0.0-next.0'
706
703
  }).withConfig({
707
704
  displayName: "StyledDashSvg",
708
705
  componentId: "sc-z3vq71-0"
@@ -733,7 +730,7 @@ const sizeStyles$b = props => {
733
730
  };
734
731
  const StyledFileUpload = styled__default.default.div.attrs({
735
732
  'data-garden-id': COMPONENT_ID$n,
736
- 'data-garden-version': '8.73.4'
733
+ 'data-garden-version': '9.0.0-next.0'
737
734
  }).withConfig({
738
735
  displayName: "StyledFileUpload",
739
736
  componentId: "sc-1rodjgn-0"
@@ -745,7 +742,7 @@ StyledFileUpload.defaultProps = {
745
742
  const COMPONENT_ID$m = 'forms.file.close';
746
743
  const StyledFileClose = styled__default.default.button.attrs({
747
744
  'data-garden-id': COMPONENT_ID$m,
748
- 'data-garden-version': '8.73.4'
745
+ 'data-garden-version': '9.0.0-next.0'
749
746
  }).withConfig({
750
747
  displayName: "StyledFileClose",
751
748
  componentId: "sc-1m31jbf-0"
@@ -808,7 +805,7 @@ const sizeStyles$a = props => {
808
805
  };
809
806
  const StyledFile = styled__default.default.div.attrs({
810
807
  'data-garden-id': COMPONENT_ID$l,
811
- 'data-garden-version': '8.73.4'
808
+ 'data-garden-version': '9.0.0-next.0'
812
809
  }).withConfig({
813
810
  displayName: "StyledFile",
814
811
  componentId: "sc-195lzp1-0"
@@ -820,7 +817,7 @@ StyledFile.defaultProps = {
820
817
  const COMPONENT_ID$k = 'forms.file.delete';
821
818
  const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
822
819
  'data-garden-id': COMPONENT_ID$k,
823
- 'data-garden-version': '8.73.4'
820
+ 'data-garden-version': '9.0.0-next.0'
824
821
  }).withConfig({
825
822
  displayName: "StyledFileDelete",
826
823
  componentId: "sc-a8nnhx-0"
@@ -840,7 +837,7 @@ const StyledFileIcon = styled__default.default(_ref => {
840
837
  return React__namespace.default.cloneElement(React.Children.only(children), props);
841
838
  }).attrs({
842
839
  'data-garden-id': COMPONENT_ID$j,
843
- 'data-garden-version': '8.73.4'
840
+ 'data-garden-version': '9.0.0-next.0'
844
841
  }).withConfig({
845
842
  displayName: "StyledFileIcon",
846
843
  componentId: "sc-7b3q0c-0"
@@ -852,7 +849,7 @@ StyledFileIcon.defaultProps = {
852
849
  const COMPONENT_ID$i = 'forms.file_list';
853
850
  const StyledFileList = styled__default.default.ul.attrs({
854
851
  'data-garden-id': COMPONENT_ID$i,
855
- 'data-garden-version': '8.73.4'
852
+ 'data-garden-version': '9.0.0-next.0'
856
853
  }).withConfig({
857
854
  displayName: "StyledFileList",
858
855
  componentId: "sc-gbahjg-0"
@@ -864,7 +861,7 @@ StyledFileList.defaultProps = {
864
861
  const COMPONENT_ID$h = 'forms.file_list.item';
865
862
  const StyledFileListItem = styled__default.default.li.attrs({
866
863
  'data-garden-id': COMPONENT_ID$h,
867
- 'data-garden-version': '8.73.4'
864
+ 'data-garden-version': '9.0.0-next.0'
868
865
  }).withConfig({
869
866
  displayName: "StyledFileListItem",
870
867
  componentId: "sc-1ova3lo-0"
@@ -894,7 +891,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
894
891
  const COMPONENT_ID$g = 'forms.radio_svg';
895
892
  const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
896
893
  'data-garden-id': COMPONENT_ID$g,
897
- 'data-garden-version': '8.73.4'
894
+ 'data-garden-version': '9.0.0-next.0'
898
895
  }).withConfig({
899
896
  displayName: "StyledRadioSvg",
900
897
  componentId: "sc-1r1qtr1-0"
@@ -911,7 +908,7 @@ const sizeStyles$9 = props => {
911
908
  };
912
909
  const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
913
910
  'data-garden-id': COMPONENT_ID$f,
914
- 'data-garden-version': '8.73.4'
911
+ 'data-garden-version': '9.0.0-next.0'
915
912
  }).withConfig({
916
913
  displayName: "StyledToggleLabel",
917
914
  componentId: "sc-e0asdk-0"
@@ -923,7 +920,7 @@ StyledToggleLabel.defaultProps = {
923
920
  const COMPONENT_ID$e = 'forms.toggle_hint';
924
921
  const StyledToggleHint = styled__default.default(StyledHint).attrs({
925
922
  'data-garden-id': COMPONENT_ID$e,
926
- 'data-garden-version': '8.73.4'
923
+ 'data-garden-version': '9.0.0-next.0'
927
924
  }).withConfig({
928
925
  displayName: "StyledToggleHint",
929
926
  componentId: "sc-nziggu-0"
@@ -950,7 +947,7 @@ const sizeStyles$8 = props => {
950
947
  };
951
948
  const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
952
949
  'data-garden-id': COMPONENT_ID$d,
953
- 'data-garden-version': '8.73.4'
950
+ 'data-garden-version': '9.0.0-next.0'
954
951
  }).withConfig({
955
952
  displayName: "StyledToggleInput",
956
953
  componentId: "sc-sgp47s-0"
@@ -962,7 +959,7 @@ StyledToggleInput.defaultProps = {
962
959
  const COMPONENT_ID$c = 'forms.toggle_message';
963
960
  const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
964
961
  'data-garden-id': COMPONENT_ID$c,
965
- 'data-garden-version': '8.73.4'
962
+ 'data-garden-version': '9.0.0-next.0'
966
963
  }).withConfig({
967
964
  displayName: "StyledToggleMessage",
968
965
  componentId: "sc-13vuvl1-0"
@@ -992,7 +989,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
992
989
  const COMPONENT_ID$b = 'forms.toggle_svg';
993
990
  const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
994
991
  'data-garden-id': COMPONENT_ID$b,
995
- 'data-garden-version': '8.73.4'
992
+ 'data-garden-version': '9.0.0-next.0'
996
993
  }).withConfig({
997
994
  displayName: "StyledToggleSvg",
998
995
  componentId: "sc-162xbyx-0"
@@ -1014,7 +1011,7 @@ const sizeStyles$7 = props => {
1014
1011
  };
1015
1012
  const StyledSelect = styled__default.default(StyledTextInput).attrs({
1016
1013
  'data-garden-id': COMPONENT_ID$a,
1017
- 'data-garden-version': '8.73.4',
1014
+ 'data-garden-version': '9.0.0-next.0',
1018
1015
  as: 'select'
1019
1016
  }).withConfig({
1020
1017
  displayName: "StyledSelect",
@@ -1027,7 +1024,7 @@ StyledSelect.defaultProps = {
1027
1024
  const COMPONENT_ID$9 = 'forms.select_wrapper';
1028
1025
  const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
1029
1026
  'data-garden-id': COMPONENT_ID$9,
1030
- 'data-garden-version': '8.73.4'
1027
+ 'data-garden-version': '9.0.0-next.0'
1031
1028
  }).withConfig({
1032
1029
  displayName: "StyledSelectWrapper",
1033
1030
  componentId: "sc-i7b6hw-0"
@@ -1152,7 +1149,7 @@ const sizeStyles$6 = props => {
1152
1149
  };
1153
1150
  const StyledRangeInput = styled__default.default.input.attrs(props => ({
1154
1151
  'data-garden-id': COMPONENT_ID$8,
1155
- 'data-garden-version': '8.73.4',
1152
+ 'data-garden-version': '9.0.0-next.0',
1156
1153
  type: 'range',
1157
1154
  style: {
1158
1155
  backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1185,7 +1182,7 @@ StyledRangeInput.defaultProps = {
1185
1182
  const COMPONENT_ID$7 = 'forms.slider';
1186
1183
  const StyledSlider = styled__default.default.div.attrs({
1187
1184
  'data-garden-id': COMPONENT_ID$7,
1188
- 'data-garden-version': '8.73.4'
1185
+ 'data-garden-version': '9.0.0-next.0'
1189
1186
  }).withConfig({
1190
1187
  displayName: "StyledSlider",
1191
1188
  componentId: "sc-1di437a-0"
@@ -1217,7 +1214,7 @@ const sizeStyles$5 = props => {
1217
1214
  };
1218
1215
  const StyledSliderThumb = styled__default.default.div.attrs(props => ({
1219
1216
  'data-garden-id': COMPONENT_ID$6,
1220
- 'data-garden-version': '8.73.4',
1217
+ 'data-garden-version': '9.0.0-next.0',
1221
1218
  'aria-disabled': props.isDisabled
1222
1219
  })).withConfig({
1223
1220
  displayName: "StyledSliderThumb",
@@ -1247,7 +1244,7 @@ const sizeStyles$4 = props => {
1247
1244
  };
1248
1245
  const StyledSliderTrack = styled__default.default.div.attrs(props => ({
1249
1246
  'data-garden-id': COMPONENT_ID$5,
1250
- 'data-garden-version': '8.73.4',
1247
+ 'data-garden-version': '9.0.0-next.0',
1251
1248
  'aria-disabled': props.isDisabled
1252
1249
  })).withConfig({
1253
1250
  displayName: "StyledSliderTrack",
@@ -1267,7 +1264,7 @@ const sizeStyles$3 = props => {
1267
1264
  };
1268
1265
  const StyledSliderTrackRail = styled__default.default.div.attrs({
1269
1266
  'data-garden-id': COMPONENT_ID$4,
1270
- 'data-garden-version': '8.73.4'
1267
+ 'data-garden-version': '9.0.0-next.0'
1271
1268
  }).withConfig({
1272
1269
  displayName: "StyledSliderTrackRail",
1273
1270
  componentId: "sc-1o5owbd-0"
@@ -1294,7 +1291,7 @@ const sizeStyles$2 = props => {
1294
1291
  };
1295
1292
  const StyledTileIcon = styled__default.default.span.attrs({
1296
1293
  'data-garden-id': COMPONENT_ID$3,
1297
- 'data-garden-version': '8.73.4'
1294
+ 'data-garden-version': '9.0.0-next.0'
1298
1295
  }).withConfig({
1299
1296
  displayName: "StyledTileIcon",
1300
1297
  componentId: "sc-1wazhg4-0"
@@ -1335,7 +1332,7 @@ const colorStyles = props => {
1335
1332
  };
1336
1333
  const StyledTile = styled__default.default.label.attrs(props => ({
1337
1334
  'data-garden-id': COMPONENT_ID$2,
1338
- 'data-garden-version': '8.73.4',
1335
+ 'data-garden-version': '9.0.0-next.0',
1339
1336
  'data-garden-selected': props.isSelected
1340
1337
  })).withConfig({
1341
1338
  displayName: "StyledTile",
@@ -1359,7 +1356,7 @@ const sizeStyles$1 = props => {
1359
1356
  };
1360
1357
  const StyledTileDescription = styled__default.default.span.attrs({
1361
1358
  'data-garden-id': COMPONENT_ID$1,
1362
- 'data-garden-version': '8.73.4'
1359
+ 'data-garden-version': '9.0.0-next.0'
1363
1360
  }).withConfig({
1364
1361
  displayName: "StyledTileDescription",
1365
1362
  componentId: "sc-xfuu7u-0"
@@ -1392,7 +1389,7 @@ const sizeStyles = props => {
1392
1389
  };
1393
1390
  const StyledTileLabel = styled__default.default.span.attrs({
1394
1391
  'data-garden-id': COMPONENT_ID,
1395
- 'data-garden-version': '8.73.4'
1392
+ 'data-garden-version': '9.0.0-next.0'
1396
1393
  }).withConfig({
1397
1394
  displayName: "StyledTileLabel",
1398
1395
  componentId: "sc-1mypv27-0"
@@ -1411,21 +1408,15 @@ const Field = React__namespace.default.forwardRef((props, ref) => {
1411
1408
  getInputProps,
1412
1409
  getMessageProps,
1413
1410
  ...propGetters
1414
- } = containerField.useField(props.id);
1411
+ } = containerField.useField({
1412
+ idPrefix: props.id,
1413
+ hasHint,
1414
+ hasMessage
1415
+ });
1415
1416
  const fieldProps = React.useMemo(() => ({
1416
1417
  ...propGetters,
1417
- getInputProps: function (options) {
1418
- let describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1419
- return getInputProps(options, {
1420
- ...describeOptions,
1421
- isDescribed: hasHint,
1422
- hasMessage
1423
- });
1424
- },
1425
- getMessageProps: options => getMessageProps({
1426
- role: 'alert',
1427
- ...options
1428
- }),
1418
+ getInputProps,
1419
+ getMessageProps,
1429
1420
  isLabelActive,
1430
1421
  setIsLabelActive,
1431
1422
  isLabelHovered,
@@ -1791,7 +1782,7 @@ const Range = React__namespace.default.forwardRef((_ref, ref) => {
1791
1782
  updateBackgroundWidthFromInput(event.target);
1792
1783
  }) : props.onChange;
1793
1784
  let combinedProps = {
1794
- ref: mergeRefs__default.default([rangeRef, ref]),
1785
+ ref: reactMergeRefs.mergeRefs([rangeRef, ref]),
1795
1786
  hasLowerTrack,
1796
1787
  min,
1797
1788
  max,
@@ -1801,9 +1792,7 @@ const Range = React__namespace.default.forwardRef((_ref, ref) => {
1801
1792
  onChange
1802
1793
  };
1803
1794
  if (fieldContext) {
1804
- combinedProps = fieldContext.getInputProps(combinedProps, {
1805
- isDescribed: true
1806
- });
1795
+ combinedProps = fieldContext.getInputProps(combinedProps);
1807
1796
  }
1808
1797
  return React__namespace.default.createElement(StyledRangeInput, combinedProps);
1809
1798
  });
@@ -1879,23 +1868,6 @@ const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
1879
1868
  onChange(e);
1880
1869
  }
1881
1870
  }, [calculateHeight, isControlled, onChange]);
1882
- const theme = React.useContext(styled.ThemeContext);
1883
- const environment = reactTheming.useDocument(theme);
1884
- React.useEffect(() => {
1885
- if (!isAutoResizable) {
1886
- return undefined;
1887
- }
1888
- if (environment) {
1889
- const win = environment.defaultView || window;
1890
- const resizeHandler = debounce__default.default(calculateHeight);
1891
- win.addEventListener('resize', resizeHandler);
1892
- return () => {
1893
- resizeHandler.cancel();
1894
- win.removeEventListener('resize', resizeHandler);
1895
- };
1896
- }
1897
- return undefined;
1898
- }, [calculateHeight, isAutoResizable, environment]);
1899
1871
  React.useLayoutEffect(() => {
1900
1872
  calculateHeight();
1901
1873
  });
@@ -1908,7 +1880,7 @@ const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
1908
1880
  event.currentTarget.select();
1909
1881
  }) : onSelect;
1910
1882
  let combinedProps = {
1911
- ref: mergeRefs__default.default([textAreaRef, ref]),
1883
+ ref: reactMergeRefs.mergeRefs([textAreaRef, ref]),
1912
1884
  rows: minRows,
1913
1885
  onChange: onChangeHandler,
1914
1886
  onSelect: onSelectHandler,
@@ -1919,9 +1891,7 @@ const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
1919
1891
  ...props
1920
1892
  };
1921
1893
  if (fieldContext) {
1922
- combinedProps = fieldContext.getInputProps(combinedProps, {
1923
- isDescribed: true
1924
- });
1894
+ combinedProps = fieldContext.getInputProps(combinedProps);
1925
1895
  }
1926
1896
  return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__namespace.default.createElement(StyledTextarea, {
1927
1897
  "aria-hidden": true,
@@ -2060,9 +2030,7 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
2060
2030
  ...props
2061
2031
  };
2062
2032
  if (fieldContext) {
2063
- combinedProps = fieldContext.getInputProps(combinedProps, {
2064
- isDescribed: true
2065
- });
2033
+ combinedProps = fieldContext.getInputProps(combinedProps);
2066
2034
  }
2067
2035
  return React__namespace.default.createElement(StyledSelectWrapper, {
2068
2036
  isCompact: isCompact,
@@ -2256,7 +2224,7 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
2256
2224
  }
2257
2225
  }, [ref]);
2258
2226
  return React__namespace.default.createElement(StyledTileLabel, _extends$t({
2259
- ref: mergeRefs__default.default([ref, forwardedRef]),
2227
+ ref: reactMergeRefs.mergeRefs([ref, forwardedRef]),
2260
2228
  title: title,
2261
2229
  isCentered: tilesContext && tilesContext.isCentered
2262
2230
  }, props));
@@ -2926,15 +2894,13 @@ const MediaInput = React__namespace.default.forwardRef((_ref, ref) => {
2926
2894
  let combinedProps = {
2927
2895
  disabled,
2928
2896
  readOnly,
2929
- ref: mergeRefs__default.default([inputRef, ref]),
2897
+ ref: reactMergeRefs.mergeRefs([inputRef, ref]),
2930
2898
  onSelect: onSelectHandler,
2931
2899
  ...props
2932
2900
  };
2933
2901
  let isLabelHovered;
2934
2902
  if (fieldContext) {
2935
- combinedProps = fieldContext.getInputProps(combinedProps, {
2936
- isDescribed: true
2937
- });
2903
+ combinedProps = fieldContext.getInputProps(combinedProps);
2938
2904
  isLabelHovered = fieldContext.isLabelHovered;
2939
2905
  }
2940
2906
  return React__namespace.default.createElement(FauxInput, _extends$t({
package/dist/index.esm.js CHANGED
@@ -13,8 +13,7 @@ import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, focusS
13
13
  import { hideVisually, math, em, rgba } from 'polished';
14
14
  import PropTypes from 'prop-types';
15
15
  import { composeEventHandlers, getControlledValue } from '@zendeskgarden/container-utilities';
16
- import mergeRefs from 'react-merge-refs';
17
- import debounce from 'lodash.debounce';
16
+ import { mergeRefs } from 'react-merge-refs';
18
17
  import { useSlider } from '@zendeskgarden/container-slider';
19
18
 
20
19
  function _extends$t() {
@@ -41,7 +40,7 @@ const useFieldContext = () => {
41
40
  const COMPONENT_ID$K = 'forms.field';
42
41
  const StyledField = styled.div.attrs({
43
42
  'data-garden-id': COMPONENT_ID$K,
44
- 'data-garden-version': '8.73.4'
43
+ 'data-garden-version': '9.0.0-next.0'
45
44
  }).withConfig({
46
45
  displayName: "StyledField",
47
46
  componentId: "sc-12gzfsu-0"
@@ -54,7 +53,7 @@ const COMPONENT_ID$J = 'forms.fieldset';
54
53
  const StyledFieldset = styled(StyledField).attrs({
55
54
  as: 'fieldset',
56
55
  'data-garden-id': COMPONENT_ID$J,
57
- 'data-garden-version': '8.73.4'
56
+ 'data-garden-version': '9.0.0-next.0'
58
57
  }).withConfig({
59
58
  displayName: "StyledFieldset",
60
59
  componentId: "sc-1vr4mxv-0"
@@ -66,7 +65,7 @@ StyledFieldset.defaultProps = {
66
65
  const COMPONENT_ID$I = 'forms.input_label';
67
66
  const StyledLabel = styled.label.attrs(props => ({
68
67
  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$I,
69
- 'data-garden-version': props['data-garden-version'] || '8.73.4'
68
+ 'data-garden-version': props['data-garden-version'] || '9.0.0-next.0'
70
69
  })).withConfig({
71
70
  displayName: "StyledLabel",
72
71
  componentId: "sc-2utmsz-0"
@@ -79,7 +78,7 @@ const COMPONENT_ID$H = 'forms.fieldset_legend';
79
78
  const StyledLegend = styled(StyledLabel).attrs({
80
79
  as: 'legend',
81
80
  'data-garden-id': COMPONENT_ID$H,
82
- 'data-garden-version': '8.73.4'
81
+ 'data-garden-version': '9.0.0-next.0'
83
82
  }).withConfig({
84
83
  displayName: "StyledLegend",
85
84
  componentId: "sc-6s0zwq-0"
@@ -91,7 +90,7 @@ StyledLegend.defaultProps = {
91
90
  const COMPONENT_ID$G = 'forms.input_hint';
92
91
  const StyledHint = styled.div.attrs(props => ({
93
92
  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$G,
94
- 'data-garden-version': props['data-garden-version'] || '8.73.4'
93
+ 'data-garden-version': props['data-garden-version'] || '9.0.0-next.0'
95
94
  })).withConfig({
96
95
  displayName: "StyledHint",
97
96
  componentId: "sc-17c2wu8-0"
@@ -196,7 +195,7 @@ const MessageIcon = _ref => {
196
195
  const COMPONENT_ID$F = 'forms.input_message_icon';
197
196
  const StyledMessageIcon = styled(MessageIcon).attrs({
198
197
  'data-garden-id': COMPONENT_ID$F,
199
- 'data-garden-version': '8.73.4',
198
+ 'data-garden-version': '9.0.0-next.0',
200
199
  'aria-hidden': null
201
200
  }).withConfig({
202
201
  displayName: "StyledMessageIcon",
@@ -224,7 +223,7 @@ const validationStyles = props => {
224
223
  const COMPONENT_ID$E = 'forms.input_message';
225
224
  const StyledMessage = styled.div.attrs(props => ({
226
225
  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
227
- 'data-garden-version': props['data-garden-version'] || '8.73.4'
226
+ 'data-garden-version': props['data-garden-version'] || '9.0.0-next.0'
228
227
  })).withConfig({
229
228
  displayName: "StyledMessage",
230
229
  componentId: "sc-30hgg7-0"
@@ -314,7 +313,7 @@ const sizeStyles$f = props => {
314
313
  };
315
314
  const StyledTextInput = styled.input.attrs(props => ({
316
315
  'data-garden-id': COMPONENT_ID$D,
317
- 'data-garden-version': '8.73.4',
316
+ 'data-garden-version': '9.0.0-next.0',
318
317
  'aria-invalid': isInvalid(props.validation)
319
318
  })).withConfig({
320
319
  displayName: "StyledTextInput",
@@ -337,7 +336,7 @@ const hiddenStyles = `
337
336
  const StyledTextarea = styled(StyledTextInput).attrs({
338
337
  as: 'textarea',
339
338
  'data-garden-id': COMPONENT_ID$C,
340
- 'data-garden-version': '8.73.4'
339
+ 'data-garden-version': '9.0.0-next.0'
341
340
  }).withConfig({
342
341
  displayName: "StyledTextarea",
343
342
  componentId: "sc-wxschl-0"
@@ -383,7 +382,7 @@ _ref => {
383
382
  return React__default.cloneElement(Children.only(children), props);
384
383
  }).attrs({
385
384
  'data-garden-id': COMPONENT_ID$B,
386
- 'data-garden-version': '8.73.4'
385
+ 'data-garden-version': '9.0.0-next.0'
387
386
  }).withConfig({
388
387
  displayName: "StyledTextMediaFigure",
389
388
  componentId: "sc-1qepknj-0"
@@ -430,7 +429,7 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
430
429
  'aria-readonly': props.isReadOnly,
431
430
  'aria-disabled': props.isDisabled,
432
431
  'data-garden-id': COMPONENT_ID$A,
433
- 'data-garden-version': '8.73.4'
432
+ 'data-garden-version': '9.0.0-next.0'
434
433
  })).withConfig({
435
434
  displayName: "StyledTextFauxInput",
436
435
  componentId: "sc-yqw7j9-0"
@@ -442,7 +441,7 @@ StyledTextFauxInput.defaultProps = {
442
441
  const COMPONENT_ID$z = 'forms.media_input';
443
442
  const StyledTextMediaInput = styled(StyledTextInput).attrs({
444
443
  'data-garden-id': COMPONENT_ID$z,
445
- 'data-garden-version': '8.73.4',
444
+ 'data-garden-version': '9.0.0-next.0',
446
445
  isBare: true
447
446
  }).withConfig({
448
447
  displayName: "StyledTextMediaInput",
@@ -464,7 +463,7 @@ const itemStyles = props => {
464
463
  };
465
464
  const StyledInputGroup = styled.div.attrs({
466
465
  'data-garden-id': COMPONENT_ID$y,
467
- 'data-garden-version': '8.73.4'
466
+ 'data-garden-version': '9.0.0-next.0'
468
467
  }).withConfig({
469
468
  displayName: "StyledInputGroup",
470
469
  componentId: "sc-kjh1f0-0"
@@ -482,7 +481,7 @@ const sizeStyles$d = props => {
482
481
  };
483
482
  const StyledRadioLabel = styled(StyledLabel).attrs({
484
483
  'data-garden-id': COMPONENT_ID$x,
485
- 'data-garden-version': '8.73.4',
484
+ 'data-garden-version': '9.0.0-next.0',
486
485
  isRadio: true
487
486
  }).withConfig({
488
487
  displayName: "StyledRadioLabel",
@@ -495,7 +494,7 @@ StyledRadioLabel.defaultProps = {
495
494
  const COMPONENT_ID$w = 'forms.checkbox_label';
496
495
  const StyledCheckLabel = styled(StyledRadioLabel).attrs({
497
496
  'data-garden-id': COMPONENT_ID$w,
498
- 'data-garden-version': '8.73.4'
497
+ 'data-garden-version': '9.0.0-next.0'
499
498
  }).withConfig({
500
499
  displayName: "StyledCheckLabel",
501
500
  componentId: "sc-x7nr1-0"
@@ -507,7 +506,7 @@ StyledCheckLabel.defaultProps = {
507
506
  const COMPONENT_ID$v = 'forms.radio_hint';
508
507
  const StyledRadioHint = styled(StyledHint).attrs({
509
508
  'data-garden-id': COMPONENT_ID$v,
510
- 'data-garden-version': '8.73.4'
509
+ 'data-garden-version': '9.0.0-next.0'
511
510
  }).withConfig({
512
511
  displayName: "StyledRadioHint",
513
512
  componentId: "sc-eo8twg-0"
@@ -519,7 +518,7 @@ StyledRadioHint.defaultProps = {
519
518
  const COMPONENT_ID$u = 'forms.checkbox_hint';
520
519
  const StyledCheckHint = styled(StyledRadioHint).attrs({
521
520
  'data-garden-id': COMPONENT_ID$u,
522
- 'data-garden-version': '8.73.4'
521
+ 'data-garden-version': '9.0.0-next.0'
523
522
  }).withConfig({
524
523
  displayName: "StyledCheckHint",
525
524
  componentId: "sc-1kl8e8c-0"
@@ -566,7 +565,7 @@ const sizeStyles$c = props => {
566
565
  };
567
566
  const StyledRadioInput = styled.input.attrs({
568
567
  'data-garden-id': COMPONENT_ID$t,
569
- 'data-garden-version': '8.73.4',
568
+ 'data-garden-version': '9.0.0-next.0',
570
569
  type: 'radio'
571
570
  }).withConfig({
572
571
  displayName: "StyledRadioInput",
@@ -588,7 +587,7 @@ const colorStyles$8 = props => {
588
587
  };
589
588
  const StyledCheckInput = styled(StyledRadioInput).attrs({
590
589
  'data-garden-id': COMPONENT_ID$s,
591
- 'data-garden-version': '8.73.4',
590
+ 'data-garden-version': '9.0.0-next.0',
592
591
  type: 'checkbox'
593
592
  }).withConfig({
594
593
  displayName: "StyledCheckInput",
@@ -601,7 +600,7 @@ StyledCheckInput.defaultProps = {
601
600
  const COMPONENT_ID$r = 'forms.radio_message';
602
601
  const StyledRadioMessage = styled(StyledMessage).attrs({
603
602
  'data-garden-id': COMPONENT_ID$r,
604
- 'data-garden-version': '8.73.4'
603
+ 'data-garden-version': '9.0.0-next.0'
605
604
  }).withConfig({
606
605
  displayName: "StyledRadioMessage",
607
606
  componentId: "sc-1pmi0q8-0"
@@ -613,7 +612,7 @@ StyledRadioMessage.defaultProps = {
613
612
  const COMPONENT_ID$q = 'forms.checkbox_message';
614
613
  const StyledCheckMessage = styled(StyledRadioMessage).attrs({
615
614
  'data-garden-id': COMPONENT_ID$q,
616
- 'data-garden-version': '8.73.4'
615
+ 'data-garden-version': '9.0.0-next.0'
617
616
  }).withConfig({
618
617
  displayName: "StyledCheckMessage",
619
618
  componentId: "sc-s4p6kd-0"
@@ -645,7 +644,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
645
644
  const COMPONENT_ID$p = 'forms.check_svg';
646
645
  const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
647
646
  'data-garden-id': COMPONENT_ID$p,
648
- 'data-garden-version': '8.73.4'
647
+ 'data-garden-version': '9.0.0-next.0'
649
648
  }).withConfig({
650
649
  displayName: "StyledCheckSvg",
651
650
  componentId: "sc-fvxetk-0"
@@ -675,7 +674,7 @@ var SvgDashFill = function SvgDashFill(props) {
675
674
  const COMPONENT_ID$o = 'forms.dash_svg';
676
675
  const StyledDashSvg = styled(SvgDashFill).attrs({
677
676
  'data-garden-id': COMPONENT_ID$o,
678
- 'data-garden-version': '8.73.4'
677
+ 'data-garden-version': '9.0.0-next.0'
679
678
  }).withConfig({
680
679
  displayName: "StyledDashSvg",
681
680
  componentId: "sc-z3vq71-0"
@@ -706,7 +705,7 @@ const sizeStyles$b = props => {
706
705
  };
707
706
  const StyledFileUpload = styled.div.attrs({
708
707
  'data-garden-id': COMPONENT_ID$n,
709
- 'data-garden-version': '8.73.4'
708
+ 'data-garden-version': '9.0.0-next.0'
710
709
  }).withConfig({
711
710
  displayName: "StyledFileUpload",
712
711
  componentId: "sc-1rodjgn-0"
@@ -718,7 +717,7 @@ StyledFileUpload.defaultProps = {
718
717
  const COMPONENT_ID$m = 'forms.file.close';
719
718
  const StyledFileClose = styled.button.attrs({
720
719
  'data-garden-id': COMPONENT_ID$m,
721
- 'data-garden-version': '8.73.4'
720
+ 'data-garden-version': '9.0.0-next.0'
722
721
  }).withConfig({
723
722
  displayName: "StyledFileClose",
724
723
  componentId: "sc-1m31jbf-0"
@@ -781,7 +780,7 @@ const sizeStyles$a = props => {
781
780
  };
782
781
  const StyledFile = styled.div.attrs({
783
782
  'data-garden-id': COMPONENT_ID$l,
784
- 'data-garden-version': '8.73.4'
783
+ 'data-garden-version': '9.0.0-next.0'
785
784
  }).withConfig({
786
785
  displayName: "StyledFile",
787
786
  componentId: "sc-195lzp1-0"
@@ -793,7 +792,7 @@ StyledFile.defaultProps = {
793
792
  const COMPONENT_ID$k = 'forms.file.delete';
794
793
  const StyledFileDelete = styled(StyledFileClose).attrs({
795
794
  'data-garden-id': COMPONENT_ID$k,
796
- 'data-garden-version': '8.73.4'
795
+ 'data-garden-version': '9.0.0-next.0'
797
796
  }).withConfig({
798
797
  displayName: "StyledFileDelete",
799
798
  componentId: "sc-a8nnhx-0"
@@ -813,7 +812,7 @@ const StyledFileIcon = styled(_ref => {
813
812
  return React__default.cloneElement(Children.only(children), props);
814
813
  }).attrs({
815
814
  'data-garden-id': COMPONENT_ID$j,
816
- 'data-garden-version': '8.73.4'
815
+ 'data-garden-version': '9.0.0-next.0'
817
816
  }).withConfig({
818
817
  displayName: "StyledFileIcon",
819
818
  componentId: "sc-7b3q0c-0"
@@ -825,7 +824,7 @@ StyledFileIcon.defaultProps = {
825
824
  const COMPONENT_ID$i = 'forms.file_list';
826
825
  const StyledFileList = styled.ul.attrs({
827
826
  'data-garden-id': COMPONENT_ID$i,
828
- 'data-garden-version': '8.73.4'
827
+ 'data-garden-version': '9.0.0-next.0'
829
828
  }).withConfig({
830
829
  displayName: "StyledFileList",
831
830
  componentId: "sc-gbahjg-0"
@@ -837,7 +836,7 @@ StyledFileList.defaultProps = {
837
836
  const COMPONENT_ID$h = 'forms.file_list.item';
838
837
  const StyledFileListItem = styled.li.attrs({
839
838
  'data-garden-id': COMPONENT_ID$h,
840
- 'data-garden-version': '8.73.4'
839
+ 'data-garden-version': '9.0.0-next.0'
841
840
  }).withConfig({
842
841
  displayName: "StyledFileListItem",
843
842
  componentId: "sc-1ova3lo-0"
@@ -867,7 +866,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
867
866
  const COMPONENT_ID$g = 'forms.radio_svg';
868
867
  const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
869
868
  'data-garden-id': COMPONENT_ID$g,
870
- 'data-garden-version': '8.73.4'
869
+ 'data-garden-version': '9.0.0-next.0'
871
870
  }).withConfig({
872
871
  displayName: "StyledRadioSvg",
873
872
  componentId: "sc-1r1qtr1-0"
@@ -884,7 +883,7 @@ const sizeStyles$9 = props => {
884
883
  };
885
884
  const StyledToggleLabel = styled(StyledCheckLabel).attrs({
886
885
  'data-garden-id': COMPONENT_ID$f,
887
- 'data-garden-version': '8.73.4'
886
+ 'data-garden-version': '9.0.0-next.0'
888
887
  }).withConfig({
889
888
  displayName: "StyledToggleLabel",
890
889
  componentId: "sc-e0asdk-0"
@@ -896,7 +895,7 @@ StyledToggleLabel.defaultProps = {
896
895
  const COMPONENT_ID$e = 'forms.toggle_hint';
897
896
  const StyledToggleHint = styled(StyledHint).attrs({
898
897
  'data-garden-id': COMPONENT_ID$e,
899
- 'data-garden-version': '8.73.4'
898
+ 'data-garden-version': '9.0.0-next.0'
900
899
  }).withConfig({
901
900
  displayName: "StyledToggleHint",
902
901
  componentId: "sc-nziggu-0"
@@ -923,7 +922,7 @@ const sizeStyles$8 = props => {
923
922
  };
924
923
  const StyledToggleInput = styled(StyledCheckInput).attrs({
925
924
  'data-garden-id': COMPONENT_ID$d,
926
- 'data-garden-version': '8.73.4'
925
+ 'data-garden-version': '9.0.0-next.0'
927
926
  }).withConfig({
928
927
  displayName: "StyledToggleInput",
929
928
  componentId: "sc-sgp47s-0"
@@ -935,7 +934,7 @@ StyledToggleInput.defaultProps = {
935
934
  const COMPONENT_ID$c = 'forms.toggle_message';
936
935
  const StyledToggleMessage = styled(StyledMessage).attrs({
937
936
  'data-garden-id': COMPONENT_ID$c,
938
- 'data-garden-version': '8.73.4'
937
+ 'data-garden-version': '9.0.0-next.0'
939
938
  }).withConfig({
940
939
  displayName: "StyledToggleMessage",
941
940
  componentId: "sc-13vuvl1-0"
@@ -965,7 +964,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
965
964
  const COMPONENT_ID$b = 'forms.toggle_svg';
966
965
  const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
967
966
  'data-garden-id': COMPONENT_ID$b,
968
- 'data-garden-version': '8.73.4'
967
+ 'data-garden-version': '9.0.0-next.0'
969
968
  }).withConfig({
970
969
  displayName: "StyledToggleSvg",
971
970
  componentId: "sc-162xbyx-0"
@@ -987,7 +986,7 @@ const sizeStyles$7 = props => {
987
986
  };
988
987
  const StyledSelect = styled(StyledTextInput).attrs({
989
988
  'data-garden-id': COMPONENT_ID$a,
990
- 'data-garden-version': '8.73.4',
989
+ 'data-garden-version': '9.0.0-next.0',
991
990
  as: 'select'
992
991
  }).withConfig({
993
992
  displayName: "StyledSelect",
@@ -1000,7 +999,7 @@ StyledSelect.defaultProps = {
1000
999
  const COMPONENT_ID$9 = 'forms.select_wrapper';
1001
1000
  const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
1002
1001
  'data-garden-id': COMPONENT_ID$9,
1003
- 'data-garden-version': '8.73.4'
1002
+ 'data-garden-version': '9.0.0-next.0'
1004
1003
  }).withConfig({
1005
1004
  displayName: "StyledSelectWrapper",
1006
1005
  componentId: "sc-i7b6hw-0"
@@ -1125,7 +1124,7 @@ const sizeStyles$6 = props => {
1125
1124
  };
1126
1125
  const StyledRangeInput = styled.input.attrs(props => ({
1127
1126
  'data-garden-id': COMPONENT_ID$8,
1128
- 'data-garden-version': '8.73.4',
1127
+ 'data-garden-version': '9.0.0-next.0',
1129
1128
  type: 'range',
1130
1129
  style: {
1131
1130
  backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1158,7 +1157,7 @@ StyledRangeInput.defaultProps = {
1158
1157
  const COMPONENT_ID$7 = 'forms.slider';
1159
1158
  const StyledSlider = styled.div.attrs({
1160
1159
  'data-garden-id': COMPONENT_ID$7,
1161
- 'data-garden-version': '8.73.4'
1160
+ 'data-garden-version': '9.0.0-next.0'
1162
1161
  }).withConfig({
1163
1162
  displayName: "StyledSlider",
1164
1163
  componentId: "sc-1di437a-0"
@@ -1190,7 +1189,7 @@ const sizeStyles$5 = props => {
1190
1189
  };
1191
1190
  const StyledSliderThumb = styled.div.attrs(props => ({
1192
1191
  'data-garden-id': COMPONENT_ID$6,
1193
- 'data-garden-version': '8.73.4',
1192
+ 'data-garden-version': '9.0.0-next.0',
1194
1193
  'aria-disabled': props.isDisabled
1195
1194
  })).withConfig({
1196
1195
  displayName: "StyledSliderThumb",
@@ -1220,7 +1219,7 @@ const sizeStyles$4 = props => {
1220
1219
  };
1221
1220
  const StyledSliderTrack = styled.div.attrs(props => ({
1222
1221
  'data-garden-id': COMPONENT_ID$5,
1223
- 'data-garden-version': '8.73.4',
1222
+ 'data-garden-version': '9.0.0-next.0',
1224
1223
  'aria-disabled': props.isDisabled
1225
1224
  })).withConfig({
1226
1225
  displayName: "StyledSliderTrack",
@@ -1240,7 +1239,7 @@ const sizeStyles$3 = props => {
1240
1239
  };
1241
1240
  const StyledSliderTrackRail = styled.div.attrs({
1242
1241
  'data-garden-id': COMPONENT_ID$4,
1243
- 'data-garden-version': '8.73.4'
1242
+ 'data-garden-version': '9.0.0-next.0'
1244
1243
  }).withConfig({
1245
1244
  displayName: "StyledSliderTrackRail",
1246
1245
  componentId: "sc-1o5owbd-0"
@@ -1267,7 +1266,7 @@ const sizeStyles$2 = props => {
1267
1266
  };
1268
1267
  const StyledTileIcon = styled.span.attrs({
1269
1268
  'data-garden-id': COMPONENT_ID$3,
1270
- 'data-garden-version': '8.73.4'
1269
+ 'data-garden-version': '9.0.0-next.0'
1271
1270
  }).withConfig({
1272
1271
  displayName: "StyledTileIcon",
1273
1272
  componentId: "sc-1wazhg4-0"
@@ -1308,7 +1307,7 @@ const colorStyles = props => {
1308
1307
  };
1309
1308
  const StyledTile = styled.label.attrs(props => ({
1310
1309
  'data-garden-id': COMPONENT_ID$2,
1311
- 'data-garden-version': '8.73.4',
1310
+ 'data-garden-version': '9.0.0-next.0',
1312
1311
  'data-garden-selected': props.isSelected
1313
1312
  })).withConfig({
1314
1313
  displayName: "StyledTile",
@@ -1332,7 +1331,7 @@ const sizeStyles$1 = props => {
1332
1331
  };
1333
1332
  const StyledTileDescription = styled.span.attrs({
1334
1333
  'data-garden-id': COMPONENT_ID$1,
1335
- 'data-garden-version': '8.73.4'
1334
+ 'data-garden-version': '9.0.0-next.0'
1336
1335
  }).withConfig({
1337
1336
  displayName: "StyledTileDescription",
1338
1337
  componentId: "sc-xfuu7u-0"
@@ -1365,7 +1364,7 @@ const sizeStyles = props => {
1365
1364
  };
1366
1365
  const StyledTileLabel = styled.span.attrs({
1367
1366
  'data-garden-id': COMPONENT_ID,
1368
- 'data-garden-version': '8.73.4'
1367
+ 'data-garden-version': '9.0.0-next.0'
1369
1368
  }).withConfig({
1370
1369
  displayName: "StyledTileLabel",
1371
1370
  componentId: "sc-1mypv27-0"
@@ -1384,21 +1383,15 @@ const Field = React__default.forwardRef((props, ref) => {
1384
1383
  getInputProps,
1385
1384
  getMessageProps,
1386
1385
  ...propGetters
1387
- } = useField(props.id);
1386
+ } = useField({
1387
+ idPrefix: props.id,
1388
+ hasHint,
1389
+ hasMessage
1390
+ });
1388
1391
  const fieldProps = useMemo(() => ({
1389
1392
  ...propGetters,
1390
- getInputProps: function (options) {
1391
- let describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1392
- return getInputProps(options, {
1393
- ...describeOptions,
1394
- isDescribed: hasHint,
1395
- hasMessage
1396
- });
1397
- },
1398
- getMessageProps: options => getMessageProps({
1399
- role: 'alert',
1400
- ...options
1401
- }),
1393
+ getInputProps,
1394
+ getMessageProps,
1402
1395
  isLabelActive,
1403
1396
  setIsLabelActive,
1404
1397
  isLabelHovered,
@@ -1774,9 +1767,7 @@ const Range = React__default.forwardRef((_ref, ref) => {
1774
1767
  onChange
1775
1768
  };
1776
1769
  if (fieldContext) {
1777
- combinedProps = fieldContext.getInputProps(combinedProps, {
1778
- isDescribed: true
1779
- });
1770
+ combinedProps = fieldContext.getInputProps(combinedProps);
1780
1771
  }
1781
1772
  return React__default.createElement(StyledRangeInput, combinedProps);
1782
1773
  });
@@ -1852,23 +1843,6 @@ const Textarea = React__default.forwardRef((_ref, ref) => {
1852
1843
  onChange(e);
1853
1844
  }
1854
1845
  }, [calculateHeight, isControlled, onChange]);
1855
- const theme = useContext(ThemeContext);
1856
- const environment = useDocument(theme);
1857
- useEffect(() => {
1858
- if (!isAutoResizable) {
1859
- return undefined;
1860
- }
1861
- if (environment) {
1862
- const win = environment.defaultView || window;
1863
- const resizeHandler = debounce(calculateHeight);
1864
- win.addEventListener('resize', resizeHandler);
1865
- return () => {
1866
- resizeHandler.cancel();
1867
- win.removeEventListener('resize', resizeHandler);
1868
- };
1869
- }
1870
- return undefined;
1871
- }, [calculateHeight, isAutoResizable, environment]);
1872
1846
  useLayoutEffect(() => {
1873
1847
  calculateHeight();
1874
1848
  });
@@ -1892,9 +1866,7 @@ const Textarea = React__default.forwardRef((_ref, ref) => {
1892
1866
  ...props
1893
1867
  };
1894
1868
  if (fieldContext) {
1895
- combinedProps = fieldContext.getInputProps(combinedProps, {
1896
- isDescribed: true
1897
- });
1869
+ combinedProps = fieldContext.getInputProps(combinedProps);
1898
1870
  }
1899
1871
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__default.createElement(StyledTextarea, {
1900
1872
  "aria-hidden": true,
@@ -2033,9 +2005,7 @@ const Select = React__default.forwardRef((_ref, ref) => {
2033
2005
  ...props
2034
2006
  };
2035
2007
  if (fieldContext) {
2036
- combinedProps = fieldContext.getInputProps(combinedProps, {
2037
- isDescribed: true
2038
- });
2008
+ combinedProps = fieldContext.getInputProps(combinedProps);
2039
2009
  }
2040
2010
  return React__default.createElement(StyledSelectWrapper, {
2041
2011
  isCompact: isCompact,
@@ -2905,9 +2875,7 @@ const MediaInput = React__default.forwardRef((_ref, ref) => {
2905
2875
  };
2906
2876
  let isLabelHovered;
2907
2877
  if (fieldContext) {
2908
- combinedProps = fieldContext.getInputProps(combinedProps, {
2909
- isDescribed: true
2910
- });
2878
+ combinedProps = fieldContext.getInputProps(combinedProps);
2911
2879
  isLabelHovered = fieldContext.isLabelHovered;
2912
2880
  }
2913
2881
  return React__default.createElement(FauxInput, _extends$t({
package/dist/typings/utils/useFieldContext.d.ts CHANGED
@@ -5,8 +5,8 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import { MutableRefObject } from 'react';
8
- import { IUseFieldPropGetters } from '@zendeskgarden/container-field';
9
- interface IFieldContext extends IUseFieldPropGetters {
8
+ import { IUseFieldReturnValue } from '@zendeskgarden/container-field';
9
+ interface IFieldContext extends IUseFieldReturnValue {
10
10
  getMessageProps: (messageProps: any) => any;
11
11
  isLabelActive: boolean;
12
12
  isLabelHovered: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-forms",
3
- "version": "8.73.4",
3
+ "version": "9.0.0-next.0",
4
4
  "description": "Components relating to form elements in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,13 +21,13 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/container-field": "^2.1.0",
24
+ "@zendeskgarden/container-field": "^3.0.0",
25
25
  "@zendeskgarden/container-slider": "^0.1.1",
26
- "@zendeskgarden/container-utilities": "^1.0.0",
26
+ "@zendeskgarden/container-utilities": "^2.0.0",
27
27
  "lodash.debounce": "^4.0.8",
28
28
  "polished": "^4.0.0",
29
29
  "prop-types": "^15.5.7",
30
- "react-merge-refs": "^1.1.0"
30
+ "react-merge-refs": "^2.0.0"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "@zendeskgarden/react-theming": "^8.67.0",
@@ -36,8 +36,8 @@
36
36
  "styled-components": "^4.2.0 || ^5.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@types/lodash.debounce": "4.0.7",
40
- "@zendeskgarden/react-theming": "^8.73.4",
39
+ "@types/lodash.debounce": "4.0.9",
40
+ "@zendeskgarden/react-theming": "^9.0.0-next.0",
41
41
  "@zendeskgarden/svg-icons": "7.0.0",
42
42
  "react-dropzone": "14.2.3"
43
43
  },
@@ -51,5 +51,5 @@
51
51
  "access": "public"
52
52
  },
53
53
  "zendeskgarden:src": "src/index.ts",
54
- "gitHead": "e3dbb5b02be96462dfea7b3bf1ec5e76deee6ae1"
54
+ "gitHead": "7145e970afa57b024ab7d505f2220a656e430c04"
55
55
  }