@pingux/astro 2.52.0-alpha.1 → 2.52.0-alpha.3

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 (48) hide show
  1. package/lib/cjs/components/AccordionGroup/Accordion.styles.d.ts +3 -3
  2. package/lib/cjs/components/Breadcrumbs/Breadcrumb.styles.d.ts +3 -3
  3. package/lib/cjs/components/Button/Buttons.styles.d.ts +51 -51
  4. package/lib/cjs/components/FieldHelperText/FieldHelperText.styles.d.ts +3 -3
  5. package/lib/cjs/components/Label/Label.d.ts +13 -0
  6. package/lib/cjs/components/Label/Label.js +8 -26
  7. package/lib/cjs/components/Label/Label.stories.d.ts +7 -0
  8. package/lib/cjs/components/Label/Label.stories.js +3 -3
  9. package/lib/cjs/components/Label/Label.styles.d.ts +2 -0
  10. package/lib/cjs/components/Label/Label.test.d.ts +1 -0
  11. package/lib/cjs/components/Label/index.d.ts +1 -0
  12. package/lib/cjs/components/NumberField/NumberField.mdx +1 -1
  13. package/lib/cjs/components/SelectField/SelectField.stories.js +3 -3
  14. package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +3 -3
  15. package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.js +2 -2
  16. package/lib/cjs/components/Table/Table.styles.d.ts +6 -6
  17. package/lib/cjs/components/Text/Text.styles.d.ts +91 -90
  18. package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +3 -3
  19. package/lib/cjs/components/TextField/TextField.stories.js +3 -3
  20. package/lib/cjs/hooks/useColumnStyles/useColumnStyles.d.ts +2 -2
  21. package/lib/cjs/hooks/useField/useField.d.ts +22 -21
  22. package/lib/cjs/hooks/useField/useField.js +3 -5
  23. package/lib/cjs/hooks/useField/useField.test.js +4 -4
  24. package/lib/cjs/hooks/useSelectField/useSelectField.d.ts +2 -3
  25. package/lib/cjs/hooks/useSelectField/useSelectField.js +2 -2
  26. package/lib/cjs/types/index.d.ts +1 -0
  27. package/lib/cjs/types/index.js +29 -18
  28. package/lib/cjs/types/label.d.ts +25 -0
  29. package/lib/cjs/types/label.js +6 -0
  30. package/lib/cjs/types/shared/style.d.ts +3 -0
  31. package/lib/cjs/utils/devUtils/constants/labelModes.d.ts +5 -0
  32. package/lib/components/Label/Label.js +6 -24
  33. package/lib/components/Label/Label.stories.js +1 -1
  34. package/lib/components/Label/Label.styles.js +1 -0
  35. package/lib/components/NumberField/NumberField.mdx +1 -1
  36. package/lib/components/SelectField/SelectField.stories.js +1 -1
  37. package/lib/components/SelectFieldBase/SelectFieldBase.js +1 -1
  38. package/lib/components/SelectFieldBase/SelectFieldBase.test.js +1 -1
  39. package/lib/components/TextAreaField/TextAreaField.stories.js +1 -1
  40. package/lib/components/TextField/TextField.stories.js +1 -1
  41. package/lib/hooks/useField/useField.js +1 -3
  42. package/lib/hooks/useField/useField.test.js +1 -1
  43. package/lib/hooks/useSelectField/useSelectField.js +1 -1
  44. package/lib/types/index.js +1 -0
  45. package/lib/types/label.js +1 -0
  46. package/package.json +1 -1
  47. /package/lib/cjs/{components/Label/constants.js → utils/devUtils/constants/labelModes.js} +0 -0
  48. /package/lib/{components/Label/constants.js → utils/devUtils/constants/labelModes.js} +0 -0
@@ -1,11 +1,12 @@
1
1
  import { ThemeUICSSObject } from 'theme-ui';
2
+ import { overflowWrap, wordBreak, wordWrap as wordWrapText } from '../../types';
2
3
  export declare const base: ThemeUICSSObject;
3
4
  export declare const wordWrap: {
4
5
  display: string;
5
- overflowWrap: string;
6
+ overflowWrap: overflowWrap;
6
7
  maxWidth: string;
7
- wordWrap: string;
8
- wordBreak: string;
8
+ wordWrap: wordWrapText;
9
+ wordBreak: wordBreak;
9
10
  };
10
11
  export declare const text: {
11
12
  inputValue: {
@@ -19,10 +20,10 @@ export declare const text: {
19
20
  color: string;
20
21
  fontFamily: string;
21
22
  display: string;
22
- overflowWrap: string;
23
+ overflowWrap: overflowWrap;
23
24
  maxWidth: string;
24
- wordWrap: string;
25
- wordBreak: string;
25
+ wordWrap: wordWrapText;
26
+ wordBreak: wordBreak;
26
27
  };
27
28
  itemSubtitle: {
28
29
  fontSize: string;
@@ -30,10 +31,10 @@ export declare const text: {
30
31
  color: string;
31
32
  fontFamily: string;
32
33
  display: string;
33
- overflowWrap: string;
34
+ overflowWrap: overflowWrap;
34
35
  maxWidth: string;
35
- wordWrap: string;
36
- wordBreak: string;
36
+ wordWrap: wordWrapText;
37
+ wordBreak: wordBreak;
37
38
  };
38
39
  label: {
39
40
  fontSize: string;
@@ -41,10 +42,10 @@ export declare const text: {
41
42
  fontFamily: string;
42
43
  fontWeight: number;
43
44
  display: string;
44
- overflowWrap: string;
45
+ overflowWrap: overflowWrap;
45
46
  maxWidth: string;
46
- wordWrap: string;
47
- wordBreak: string;
47
+ wordWrap: wordWrapText;
48
+ wordBreak: wordBreak;
48
49
  };
49
50
  listTitle: {
50
51
  textOverflow: string;
@@ -54,10 +55,10 @@ export declare const text: {
54
55
  fontWeight: number;
55
56
  color: string;
56
57
  display: string;
57
- overflowWrap: string;
58
+ overflowWrap: overflowWrap;
58
59
  maxWidth: string;
59
- wordWrap: string;
60
- wordBreak: string;
60
+ wordWrap: wordWrapText;
61
+ wordBreak: wordBreak;
61
62
  };
62
63
  listSubtitle: {
63
64
  textOverflow: string;
@@ -67,10 +68,10 @@ export declare const text: {
67
68
  fontWeight: number;
68
69
  color: string;
69
70
  display: string;
70
- overflowWrap: string;
71
+ overflowWrap: overflowWrap;
71
72
  maxWidth: string;
72
- wordWrap: string;
73
- wordBreak: string;
73
+ wordWrap: wordWrapText;
74
+ wordBreak: wordBreak;
74
75
  };
75
76
  listViewItemSubtext: {
76
77
  textOverflow: string;
@@ -83,10 +84,10 @@ export declare const text: {
83
84
  fontFamily: string;
84
85
  fontWeight: number;
85
86
  display: string;
86
- overflowWrap: string;
87
+ overflowWrap: overflowWrap;
87
88
  maxWidth: string;
88
- wordWrap: string;
89
- wordBreak: string;
89
+ wordWrap: wordWrapText;
90
+ wordBreak: wordBreak;
90
91
  };
91
92
  listViewItemText: {
92
93
  textOverflow: string;
@@ -98,10 +99,10 @@ export declare const text: {
98
99
  fontFamily: string;
99
100
  fontWeight: number;
100
101
  display: string;
101
- overflowWrap: string;
102
+ overflowWrap: overflowWrap;
102
103
  maxWidth: string;
103
- wordWrap: string;
104
- wordBreak: string;
104
+ wordWrap: wordWrapText;
105
+ wordBreak: wordBreak;
105
106
  };
106
107
  placeholder: {
107
108
  fontWeight: number;
@@ -116,10 +117,10 @@ export declare const text: {
116
117
  fontFamily: string;
117
118
  fontWeight: number;
118
119
  display: string;
119
- overflowWrap: string;
120
+ overflowWrap: overflowWrap;
120
121
  maxWidth: string;
121
- wordWrap: string;
122
- wordBreak: string;
122
+ wordWrap: wordWrapText;
123
+ wordBreak: wordBreak;
123
124
  };
124
125
  panelHeaderText: {
125
126
  alignSelf: string;
@@ -128,10 +129,10 @@ export declare const text: {
128
129
  fontFamily: string;
129
130
  fontWeight: number;
130
131
  display: string;
131
- overflowWrap: string;
132
+ overflowWrap: overflowWrap;
132
133
  maxWidth: string;
133
- wordWrap: string;
134
- wordBreak: string;
134
+ wordWrap: wordWrapText;
135
+ wordBreak: wordBreak;
135
136
  };
136
137
  sectionTitle: {
137
138
  fontSize: string;
@@ -139,20 +140,20 @@ export declare const text: {
139
140
  color: string;
140
141
  fontFamily: string;
141
142
  display: string;
142
- overflowWrap: string;
143
+ overflowWrap: overflowWrap;
143
144
  maxWidth: string;
144
- wordWrap: string;
145
- wordBreak: string;
145
+ wordWrap: wordWrapText;
146
+ wordBreak: wordBreak;
146
147
  };
147
148
  subtitle: {
148
149
  color: string;
149
150
  fontFamily: string;
150
151
  fontWeight: number;
151
152
  display: string;
152
- overflowWrap: string;
153
+ overflowWrap: overflowWrap;
153
154
  maxWidth: string;
154
- wordWrap: string;
155
- wordBreak: string;
155
+ wordWrap: wordWrapText;
156
+ wordBreak: wordBreak;
156
157
  };
157
158
  tabLabel: {
158
159
  fontSize: string;
@@ -172,10 +173,10 @@ export declare const text: {
172
173
  color: string;
173
174
  };
174
175
  display: string;
175
- overflowWrap: string;
176
+ overflowWrap: overflowWrap;
176
177
  maxWidth: string;
177
- wordWrap: string;
178
- wordBreak: string;
178
+ wordWrap: wordWrapText;
179
+ wordBreak: wordBreak;
179
180
  grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
180
181
  accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
181
182
  alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;
@@ -1010,10 +1011,10 @@ export declare const text: {
1010
1011
  color: string;
1011
1012
  fontFamily: string;
1012
1013
  display: string;
1013
- overflowWrap: string;
1014
+ overflowWrap: overflowWrap;
1014
1015
  maxWidth: string;
1015
- wordWrap: string;
1016
- wordBreak: string;
1016
+ wordWrap: wordWrapText;
1017
+ wordBreak: wordBreak;
1017
1018
  };
1018
1019
  tableData: {
1019
1020
  fontSize: string;
@@ -1021,10 +1022,10 @@ export declare const text: {
1021
1022
  color: string;
1022
1023
  fontFamily: string;
1023
1024
  display: string;
1024
- overflowWrap: string;
1025
+ overflowWrap: overflowWrap;
1025
1026
  maxWidth: string;
1026
- wordWrap: string;
1027
- wordBreak: string;
1027
+ wordWrap: wordWrapText;
1028
+ wordBreak: wordBreak;
1028
1029
  };
1029
1030
  textEllipsis: {
1030
1031
  textOverflow: string;
@@ -1037,10 +1038,10 @@ export declare const text: {
1037
1038
  color: string;
1038
1039
  fontFamily: string;
1039
1040
  display: string;
1040
- overflowWrap: string;
1041
+ overflowWrap: overflowWrap;
1041
1042
  maxWidth: string;
1042
- wordWrap: string;
1043
- wordBreak: string;
1043
+ wordWrap: wordWrapText;
1044
+ wordBreak: wordBreak;
1044
1045
  };
1045
1046
  H1: {
1046
1047
  lineHeight: string;
@@ -1049,10 +1050,10 @@ export declare const text: {
1049
1050
  color: string;
1050
1051
  fontFamily: string;
1051
1052
  display: string;
1052
- overflowWrap: string;
1053
+ overflowWrap: overflowWrap;
1053
1054
  maxWidth: string;
1054
- wordWrap: string;
1055
- wordBreak: string;
1055
+ wordWrap: wordWrapText;
1056
+ wordBreak: wordBreak;
1056
1057
  };
1057
1058
  H2: {
1058
1059
  lineHeight: string;
@@ -1061,10 +1062,10 @@ export declare const text: {
1061
1062
  color: string;
1062
1063
  fontFamily: string;
1063
1064
  display: string;
1064
- overflowWrap: string;
1065
+ overflowWrap: overflowWrap;
1065
1066
  maxWidth: string;
1066
- wordWrap: string;
1067
- wordBreak: string;
1067
+ wordWrap: wordWrapText;
1068
+ wordBreak: wordBreak;
1068
1069
  };
1069
1070
  H3: {
1070
1071
  lineHeight: string;
@@ -1073,10 +1074,10 @@ export declare const text: {
1073
1074
  color: string;
1074
1075
  fontFamily: string;
1075
1076
  display: string;
1076
- overflowWrap: string;
1077
+ overflowWrap: overflowWrap;
1077
1078
  maxWidth: string;
1078
- wordWrap: string;
1079
- wordBreak: string;
1079
+ wordWrap: wordWrapText;
1080
+ wordBreak: wordBreak;
1080
1081
  };
1081
1082
  H4: {
1082
1083
  lineHeight: string;
@@ -1085,10 +1086,10 @@ export declare const text: {
1085
1086
  color: string;
1086
1087
  fontFamily: string;
1087
1088
  display: string;
1088
- overflowWrap: string;
1089
+ overflowWrap: overflowWrap;
1089
1090
  maxWidth: string;
1090
- wordWrap: string;
1091
- wordBreak: string;
1091
+ wordWrap: wordWrapText;
1092
+ wordBreak: wordBreak;
1092
1093
  };
1093
1094
  h1: {
1094
1095
  fontWeight: number;
@@ -1096,10 +1097,10 @@ export declare const text: {
1096
1097
  color: string;
1097
1098
  fontFamily: string;
1098
1099
  display: string;
1099
- overflowWrap: string;
1100
+ overflowWrap: overflowWrap;
1100
1101
  maxWidth: string;
1101
- wordWrap: string;
1102
- wordBreak: string;
1102
+ wordWrap: wordWrapText;
1103
+ wordBreak: wordBreak;
1103
1104
  };
1104
1105
  h2: {
1105
1106
  fontWeight: number;
@@ -1107,10 +1108,10 @@ export declare const text: {
1107
1108
  color: string;
1108
1109
  fontFamily: string;
1109
1110
  display: string;
1110
- overflowWrap: string;
1111
+ overflowWrap: overflowWrap;
1111
1112
  maxWidth: string;
1112
- wordWrap: string;
1113
- wordBreak: string;
1113
+ wordWrap: wordWrapText;
1114
+ wordBreak: wordBreak;
1114
1115
  };
1115
1116
  h3: {
1116
1117
  fontWeight: number;
@@ -1118,10 +1119,10 @@ export declare const text: {
1118
1119
  color: string;
1119
1120
  fontFamily: string;
1120
1121
  display: string;
1121
- overflowWrap: string;
1122
+ overflowWrap: overflowWrap;
1122
1123
  maxWidth: string;
1123
- wordWrap: string;
1124
- wordBreak: string;
1124
+ wordWrap: wordWrapText;
1125
+ wordBreak: wordBreak;
1125
1126
  };
1126
1127
  h4: {
1127
1128
  fontSize: string;
@@ -1129,10 +1130,10 @@ export declare const text: {
1129
1130
  color: string;
1130
1131
  fontFamily: string;
1131
1132
  display: string;
1132
- overflowWrap: string;
1133
+ overflowWrap: overflowWrap;
1133
1134
  maxWidth: string;
1134
- wordWrap: string;
1135
- wordBreak: string;
1135
+ wordWrap: wordWrapText;
1136
+ wordBreak: wordBreak;
1136
1137
  };
1137
1138
  base: ThemeUICSSObject;
1138
1139
  bodyStrong: {
@@ -1140,20 +1141,20 @@ export declare const text: {
1140
1141
  fontFamily: string;
1141
1142
  fontWeight: number;
1142
1143
  display: string;
1143
- overflowWrap: string;
1144
+ overflowWrap: overflowWrap;
1144
1145
  maxWidth: string;
1145
- wordWrap: string;
1146
- wordBreak: string;
1146
+ wordWrap: wordWrapText;
1147
+ wordBreak: wordBreak;
1147
1148
  };
1148
1149
  bodyWeak: {
1149
1150
  fontSize: string;
1150
1151
  color: string;
1151
1152
  fontFamily: string;
1152
1153
  display: string;
1153
- overflowWrap: string;
1154
+ overflowWrap: overflowWrap;
1154
1155
  maxWidth: string;
1155
- wordWrap: string;
1156
- wordBreak: string;
1156
+ wordWrap: wordWrapText;
1157
+ wordBreak: wordBreak;
1157
1158
  };
1158
1159
  buttonLabel: {
1159
1160
  fontSize: string;
@@ -1161,10 +1162,10 @@ export declare const text: {
1161
1162
  color: string;
1162
1163
  fontFamily: string;
1163
1164
  display: string;
1164
- overflowWrap: string;
1165
+ overflowWrap: overflowWrap;
1165
1166
  maxWidth: string;
1166
- wordWrap: string;
1167
- wordBreak: string;
1167
+ wordWrap: wordWrapText;
1168
+ wordBreak: wordBreak;
1168
1169
  };
1169
1170
  buttonTitle: {
1170
1171
  fontSize: string;
@@ -1173,10 +1174,10 @@ export declare const text: {
1173
1174
  fontFamily: string;
1174
1175
  lineHeight: string;
1175
1176
  display: string;
1176
- overflowWrap: string;
1177
+ overflowWrap: overflowWrap;
1177
1178
  maxWidth: string;
1178
- wordWrap: string;
1179
- wordBreak: string;
1179
+ wordWrap: wordWrapText;
1180
+ wordBreak: wordBreak;
1180
1181
  };
1181
1182
  buttonSubtitle: {
1182
1183
  fontSize: string;
@@ -1185,20 +1186,20 @@ export declare const text: {
1185
1186
  fontFamily: string;
1186
1187
  lineHeight: string;
1187
1188
  display: string;
1188
- overflowWrap: string;
1189
+ overflowWrap: overflowWrap;
1189
1190
  maxWidth: string;
1190
- wordWrap: string;
1191
- wordBreak: string;
1191
+ wordWrap: wordWrapText;
1192
+ wordBreak: wordBreak;
1192
1193
  };
1193
1194
  capsLabel: {
1194
1195
  color: string;
1195
1196
  textTransform: string;
1196
1197
  fontFamily: string;
1197
1198
  display: string;
1198
- overflowWrap: string;
1199
+ overflowWrap: overflowWrap;
1199
1200
  maxWidth: string;
1200
- wordWrap: string;
1201
- wordBreak: string;
1201
+ wordWrap: wordWrapText;
1202
+ wordBreak: wordBreak;
1202
1203
  };
1203
1204
  environmentBreadcrumb: {
1204
1205
  fontSize: string;
@@ -23,10 +23,10 @@ var _react = _interopRequireWildcard(require("react"));
23
23
  var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon"));
24
24
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
25
25
  var _index = require("../../index");
26
+ var _labelModes = require("../../utils/devUtils/constants/labelModes");
26
27
  var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
27
28
  var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
28
29
  var _statusProp = require("../../utils/docUtils/statusProp");
29
- var _constants = require("../Label/constants");
30
30
  var _TextAreaField = _interopRequireDefault(require("./TextAreaField.mdx"));
31
31
  var _react2 = require("@emotion/react");
32
32
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -55,7 +55,7 @@ var _default = {
55
55
  labelMode: {
56
56
  control: {
57
57
  type: 'select',
58
- options: (0, _values["default"])(_constants.modes)
58
+ options: (0, _values["default"])(_labelModes.modes)
59
59
  }
60
60
  },
61
61
  defaultValue: {},
@@ -88,7 +88,7 @@ var _default = {
88
88
  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
89
89
  args: {
90
90
  label: 'Example Label',
91
- labelMode: (0, _values["default"])(_constants.modes)[0]
91
+ labelMode: (0, _values["default"])(_labelModes.modes)[0]
92
92
  }
93
93
  };
94
94
  exports["default"] = _default;
@@ -25,11 +25,11 @@ var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
25
25
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
26
26
  var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
27
27
  var _index = require("../../index");
28
+ var _labelModes = require("../../utils/devUtils/constants/labelModes");
28
29
  var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
29
30
  var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
30
31
  var _statusProp = require("../../utils/docUtils/statusProp");
31
32
  var _CopyButton = _interopRequireDefault(require("../CopyText/CopyButton"));
32
- var _constants = require("../Label/constants");
33
33
  var _TextField = _interopRequireDefault(require("./TextField.mdx"));
34
34
  var _react2 = require("@emotion/react");
35
35
  var _excluded = ["variant"];
@@ -54,7 +54,7 @@ var _default = {
54
54
  labelMode: {
55
55
  control: {
56
56
  type: 'select',
57
- options: (0, _values["default"])(_constants.modes)
57
+ options: (0, _values["default"])(_labelModes.modes)
58
58
  }
59
59
  },
60
60
  label: {
@@ -69,7 +69,7 @@ var _default = {
69
69
  }
70
70
  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
71
71
  args: {
72
- labelMode: (0, _values["default"])(_constants.modes)[0]
72
+ labelMode: (0, _values["default"])(_labelModes.modes)[0]
73
73
  }
74
74
  };
75
75
  exports["default"] = _default;
@@ -1,6 +1,6 @@
1
- export type LabelMode = 'default' | 'float' | 'left';
1
+ import { LabelModeProps } from '../../types';
2
2
  interface UseColumnStylesProps {
3
- labelMode: LabelMode;
3
+ labelMode: LabelModeProps;
4
4
  }
5
5
  interface LabelStyleProps {
6
6
  sx: {
@@ -1,7 +1,6 @@
1
1
  import { Key } from 'react';
2
2
  import { AriaLabelingProps, CollectionChildren, DOMProps } from '@react-types/shared';
3
- import { LabelProps as ThemeUILabelProps } from 'theme-ui';
4
- import { BoxProps } from '../../types';
3
+ import { BoxProps, LabelModeProps, LabelProps } from '../../types';
5
4
  /**
6
5
  * Generates the necessary props to be used in field components.
7
6
  * @param {{}} props Props for the field
@@ -16,12 +15,6 @@ interface WrapperProps extends BoxProps {
16
15
  interface ContainerProps extends WrapperProps {
17
16
  isFloatLabelActive?: boolean;
18
17
  }
19
- interface LabelProps extends ThemeUILabelProps {
20
- labelMode?: 'default' | 'float' | 'left';
21
- statusClasses?: {
22
- [className: string]: boolean;
23
- };
24
- }
25
18
  export interface FieldControlInputProps extends AriaLabelingProps, DOMProps {
26
19
  autoComplete?: string;
27
20
  autoCorrect?: string;
@@ -74,7 +67,7 @@ export interface UseFieldProps<T> {
74
67
  isRestrictiveMultivalues?: boolean;
75
68
  isSelected?: boolean;
76
69
  label?: string;
77
- labelMode?: string;
70
+ labelMode?: LabelModeProps;
78
71
  labelProps?: LabelProps;
79
72
  maxLength?: number;
80
73
  name?: string;
@@ -1051,13 +1044,20 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
1051
1044
  onTransitionEndCapture?: import("react").TransitionEventHandler<import("../../types").FocusableElement> | undefined;
1052
1045
  };
1053
1046
  fieldLabelProps: {
1054
- labelMode?: "float" | "left" | "default" | undefined;
1047
+ children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
1048
+ className: string;
1049
+ isDisabled?: boolean | undefined;
1050
+ isRequired: boolean | undefined;
1051
+ mode: LabelModeProps | undefined;
1052
+ labelMode?: LabelModeProps | undefined;
1053
+ requiredIndicator?: import("react").ReactNode;
1054
+ hintText: string | undefined;
1055
+ helpHintProps?: import("../../types").HelpHintProps | undefined;
1055
1056
  statusClasses?: {
1056
1057
  [className: string]: boolean;
1057
1058
  } | undefined;
1058
1059
  form?: string | undefined;
1059
1060
  role?: import("react").AriaRole | undefined;
1060
- className: string;
1061
1061
  'aria-activedescendant'?: string | undefined;
1062
1062
  'aria-atomic'?: (boolean | "false" | "true") | undefined;
1063
1063
  'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
@@ -1118,7 +1118,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
1118
1118
  slot?: string | undefined;
1119
1119
  title?: string | undefined;
1120
1120
  id?: string | undefined;
1121
- children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
1122
1121
  dangerouslySetInnerHTML?: {
1123
1122
  __html: string | TrustedHTML;
1124
1123
  } | undefined;
@@ -1362,17 +1361,22 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
1362
1361
  bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1363
1362
  backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1364
1363
  opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1365
- hintText: string | undefined;
1366
- isRequired: boolean | undefined;
1367
- mode: string | undefined;
1364
+ 'data-testid'?: string | undefined;
1368
1365
  } | {
1369
- labelMode?: "float" | "left" | "default" | undefined;
1366
+ children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
1367
+ className: string;
1368
+ isDisabled?: boolean | undefined;
1369
+ isRequired: boolean | undefined;
1370
+ mode: LabelModeProps | undefined;
1371
+ labelMode?: LabelModeProps | undefined;
1372
+ requiredIndicator?: import("react").ReactNode;
1373
+ hintText: string | undefined;
1374
+ helpHintProps?: import("../../types").HelpHintProps | undefined;
1370
1375
  statusClasses?: {
1371
1376
  [className: string]: boolean;
1372
1377
  } | undefined;
1373
1378
  form?: string | undefined;
1374
1379
  role?: import("react").AriaRole | undefined;
1375
- className: string;
1376
1380
  'aria-activedescendant'?: string | undefined;
1377
1381
  'aria-atomic'?: (boolean | "false" | "true") | undefined;
1378
1382
  'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
@@ -1433,7 +1437,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
1433
1437
  slot?: string | undefined;
1434
1438
  title?: string | undefined;
1435
1439
  id?: string | undefined;
1436
- children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
1437
1440
  dangerouslySetInnerHTML?: {
1438
1441
  __html: string | TrustedHTML;
1439
1442
  } | undefined;
@@ -1677,9 +1680,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
1677
1680
  bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1678
1681
  backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1679
1682
  opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1680
- hintText: string | undefined;
1681
- isRequired: boolean | undefined;
1682
- mode: string | undefined;
1683
+ 'data-testid'?: string | undefined;
1683
1684
  };
1684
1685
  };
1685
1686
  export default useField;
@@ -21,7 +21,7 @@ var _reactAria = require("react-aria");
21
21
  var _interactions = require("@react-aria/interactions");
22
22
  var _noop = _interopRequireDefault(require("lodash/noop"));
23
23
  var _omit = _interopRequireDefault(require("lodash/omit"));
24
- var _constants = require("../../components/Label/constants");
24
+ var _labelModes = require("../../utils/devUtils/constants/labelModes");
25
25
  var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
26
26
  var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
27
27
  var _ = require("..");
@@ -34,8 +34,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
34
34
  * @returns {{}} Prop objects to be spread into field components.
35
35
  */
36
36
 
37
- // TODO: replace with LabelProps instead of ThemeUILabelProps
38
- // once Label component is rewritten to ts
39
37
  var useField = function useField(props) {
40
38
  var autocomplete = props.autocomplete,
41
39
  autoComplete = props.autoComplete,
@@ -152,8 +150,8 @@ var useField = function useField(props) {
152
150
  onFocusWithinChange: setFocusWithin
153
151
  }),
154
152
  focusWithinProps = _useFocusWithin.focusWithinProps;
155
- var isFloatLabel = labelMode === _constants.modes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.FLOAT;
156
- var isLeftLabel = labelMode === _constants.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.LEFT;
153
+ var isFloatLabel = labelMode === _labelModes.modes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _labelModes.modes.FLOAT;
154
+ var isLeftLabel = labelMode === _labelModes.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _labelModes.modes.LEFT;
157
155
  var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
158
156
  var _useStatusClasses4 = (0, _.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, _objectSpread(_objectSpread({
159
157
  'field-container': true,
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
13
13
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
14
14
  var _reactHooks = require("@testing-library/react-hooks");
15
- var _constants = require("../../components/Label/constants");
15
+ var _labelModes = require("../../utils/devUtils/constants/labelModes");
16
16
  var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
17
17
  var _useField = _interopRequireDefault(require("./useField"));
18
18
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -166,7 +166,7 @@ test('should return isFloatLabelActive class for container', function () {
166
166
 
167
167
  // Has the class if the value is valid and label mode is float
168
168
  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
169
- labelMode: _constants.modes.FLOAT
169
+ labelMode: _labelModes.modes.FLOAT
170
170
  }));
171
171
  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active');
172
172
 
@@ -198,7 +198,7 @@ test('should return isFloatLabelActive class for container', function () {
198
198
 
199
199
  // Has the class if the mode is float and the isFloatLabelActive containerProp is passed in
200
200
  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
201
- labelMode: _constants.modes.FLOAT,
201
+ labelMode: _labelModes.modes.FLOAT,
202
202
  containerProps: {
203
203
  isFloatLabelActive: true
204
204
  }
@@ -218,7 +218,7 @@ test('should return isLeftLabel class for container', function () {
218
218
 
219
219
  // Has the class if the value is valid and label mode is left
220
220
  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
221
- labelMode: _constants.modes.LEFT
221
+ labelMode: _labelModes.modes.LEFT
222
222
  }));
223
223
  expect(result.current.fieldContainerProps.className).toContain('is-left-label');
224
224
  });