@instructure/ui-form-field 8.17.1-snapshot.1 → 8.17.1-snapshot.18

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 (12) hide show
  1. package/es/FormFieldLabel/index.js +1 -1
  2. package/es/FormFieldLayout/index.js +5 -6
  3. package/lib/FormFieldLabel/index.js +1 -1
  4. package/lib/FormFieldLayout/index.js +5 -5
  5. package/package.json +15 -15
  6. package/src/FormFieldLabel/index.tsx +1 -1
  7. package/src/FormFieldLayout/index.tsx +4 -3
  8. package/src/FormFieldLayout/props.ts +2 -1
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/FormFieldLayout/index.d.ts.map +1 -1
  11. package/types/FormFieldLayout/props.d.ts +2 -1
  12. package/types/FormFieldLayout/props.d.ts.map +1 -1
package/es/FormFieldLabel/index.js CHANGED
@@ -76,7 +76,7 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
76
76
  const _this$props3 = this.props,
77
77
  styles = _this$props3.styles,
78
78
  children = _this$props3.children;
79
- return jsx(ElementType // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
79
+ return jsx(ElementType //@ts-expect-error too complex union type
80
80
  , Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
81
81
  css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
82
82
  ref: this.handleRef
package/es/FormFieldLayout/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
2
  const _excluded = ["makeStyles", "styles"];
3
3
 
4
- var _dec, _class, _class2, _temp;
4
+ var _dec, _dec2, _class, _class2, _temp;
5
5
 
6
6
  /*
7
7
  * The MIT License (MIT)
@@ -33,8 +33,7 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
33
33
  import { ScreenReaderContent } from '@instructure/ui-a11y-content';
34
34
  import { Grid } from '@instructure/ui-grid';
35
35
  import { logError as error } from '@instructure/console';
36
- import { omitProps, pickProps, getElementType } from '@instructure/ui-react-utils';
37
- import { uid } from '@instructure/uid';
36
+ import { omitProps, pickProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
38
37
  import { withStyle, jsx } from '@instructure/emotion';
39
38
  import { FormFieldLabel } from '../FormFieldLabel';
40
39
  import { FormFieldMessages } from '../FormFieldMessages';
@@ -47,7 +46,7 @@ parent: FormField
47
46
  ---
48
47
  @tsProps
49
48
  **/
50
- let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends Component {
49
+ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec(_class = _dec2(_class = (_temp = _class2 = class FormFieldLayout extends Component {
51
50
  constructor(props) {
52
51
  super(props);
53
52
  this._messagesId = void 0;
@@ -68,7 +67,7 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
68
67
  }
69
68
  };
70
69
 
71
- this._messagesId = props.messagesId || uid('FormFieldLayout-messages');
70
+ this._messagesId = props.messagesId || props.deterministicId();
72
71
  error(typeof props.width !== 'undefined' || !props.inline || props.layout !== 'inline', `[FormFieldLayout] The 'inline' prop is true, and the 'layout' is set to 'inline'.
73
72
  This will cause a layout issue in Internet Explorer 11 unless you also add a value for the 'width' prop.`);
74
73
  }
@@ -172,6 +171,6 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
172
171
  layout: 'stacked',
173
172
  as: 'label',
174
173
  labelAlign: 'end'
175
- }, _temp)) || _class);
174
+ }, _temp)) || _class) || _class);
176
175
  export default FormFieldLayout;
177
176
  export { FormFieldLayout };
package/lib/FormFieldLabel/index.js CHANGED
@@ -67,7 +67,7 @@ let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
67
67
  const _this$props3 = this.props,
68
68
  styles = _this$props3.styles,
69
69
  children = _this$props3.children;
70
- return (0, _emotion.jsx)(ElementType // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
70
+ return (0, _emotion.jsx)(ElementType //@ts-expect-error too complex union type
71
71
  , Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
72
72
  css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
73
73
  ref: this.handleRef
package/lib/FormFieldLayout/index.js CHANGED
@@ -25,7 +25,7 @@ var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
25
25
 
26
26
  var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
27
27
 
28
- var _uid = require("@instructure/uid");
28
+ var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
29
29
 
30
30
  var _emotion = require("@instructure/emotion");
31
31
 
@@ -39,7 +39,7 @@ var _props = require("./props");
39
39
 
40
40
  const _excluded = ["makeStyles", "styles"];
41
41
 
42
- var _dec, _class, _class2, _temp;
42
+ var _dec, _dec2, _class, _class2, _temp;
43
43
 
44
44
  /**
45
45
  ---
@@ -47,7 +47,7 @@ parent: FormField
47
47
  ---
48
48
  @tsProps
49
49
  **/
50
- let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends _react.Component {
50
+ let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = _dec2(_class = (_temp = _class2 = class FormFieldLayout extends _react.Component {
51
51
  constructor(props) {
52
52
  super(props);
53
53
  this._messagesId = void 0;
@@ -68,7 +68,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
68
68
  }
69
69
  };
70
70
 
71
- this._messagesId = props.messagesId || (0, _uid.uid)('FormFieldLayout-messages');
71
+ this._messagesId = props.messagesId || props.deterministicId();
72
72
  (0, _console.logError)(typeof props.width !== 'undefined' || !props.inline || props.layout !== 'inline', `[FormFieldLayout] The 'inline' prop is true, and the 'layout' is set to 'inline'.
73
73
  This will cause a layout issue in Internet Explorer 11 unless you also add a value for the 'width' prop.`);
74
74
  }
@@ -170,7 +170,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
170
170
  layout: 'stacked',
171
171
  as: 'label',
172
172
  labelAlign: 'end'
173
- }, _temp)) || _class);
173
+ }, _temp)) || _class) || _class);
174
174
  exports.FormFieldLayout = FormFieldLayout;
175
175
  var _default = FormFieldLayout;
176
176
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-form-field",
3
- "version": "8.17.1-snapshot.1+3eaf62445",
3
+ "version": "8.17.1-snapshot.18+9f145a7d2",
4
4
  "description": "Form layout components.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,22 +23,22 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.1+3eaf62445",
27
- "@instructure/ui-test-utils": "8.17.1-snapshot.1+3eaf62445",
28
- "@instructure/ui-themes": "8.17.1-snapshot.1+3eaf62445"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.18+9f145a7d2",
27
+ "@instructure/ui-test-utils": "8.17.1-snapshot.18+9f145a7d2",
28
+ "@instructure/ui-themes": "8.17.1-snapshot.18+9f145a7d2"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/console": "8.17.1-snapshot.1+3eaf62445",
33
- "@instructure/emotion": "8.17.1-snapshot.1+3eaf62445",
34
- "@instructure/shared-types": "8.17.1-snapshot.1+3eaf62445",
35
- "@instructure/ui-a11y-content": "8.17.1-snapshot.1+3eaf62445",
36
- "@instructure/ui-a11y-utils": "8.17.1-snapshot.1+3eaf62445",
37
- "@instructure/ui-grid": "8.17.1-snapshot.1+3eaf62445",
38
- "@instructure/ui-icons": "8.17.1-snapshot.1+3eaf62445",
39
- "@instructure/ui-react-utils": "8.17.1-snapshot.1+3eaf62445",
40
- "@instructure/ui-utils": "8.17.1-snapshot.1+3eaf62445",
41
- "@instructure/uid": "8.17.1-snapshot.1+3eaf62445",
32
+ "@instructure/console": "8.17.1-snapshot.18+9f145a7d2",
33
+ "@instructure/emotion": "8.17.1-snapshot.18+9f145a7d2",
34
+ "@instructure/shared-types": "8.17.1-snapshot.18+9f145a7d2",
35
+ "@instructure/ui-a11y-content": "8.17.1-snapshot.18+9f145a7d2",
36
+ "@instructure/ui-a11y-utils": "8.17.1-snapshot.18+9f145a7d2",
37
+ "@instructure/ui-grid": "8.17.1-snapshot.18+9f145a7d2",
38
+ "@instructure/ui-icons": "8.17.1-snapshot.18+9f145a7d2",
39
+ "@instructure/ui-react-utils": "8.17.1-snapshot.18+9f145a7d2",
40
+ "@instructure/ui-utils": "8.17.1-snapshot.18+9f145a7d2",
41
+ "@instructure/uid": "8.17.1-snapshot.18+9f145a7d2",
42
42
  "prop-types": "^15"
43
43
  },
44
44
  "peerDependencies": {
@@ -47,5 +47,5 @@
47
47
  "publishConfig": {
48
48
  "access": "public"
49
49
  },
50
- "gitHead": "3eaf62445635c7ef2927ddfcf610fb561a729fd1"
50
+ "gitHead": "9f145a7d2f84eda965b570fa5702e1fda0c92e58"
51
51
  }
package/src/FormFieldLabel/index.tsx CHANGED
@@ -82,7 +82,7 @@ class FormFieldLabel extends Component<FormFieldLabelProps> {
82
82
 
83
83
  return (
84
84
  <ElementType
85
- // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
85
+ //@ts-expect-error too complex union type
86
86
  {...omitProps(this.props, FormFieldLabel.allowedProps)}
87
87
  css={styles?.formFieldLabel}
88
88
  ref={this.handleRef}
package/src/FormFieldLayout/index.tsx CHANGED
@@ -32,9 +32,9 @@ import { logError as error } from '@instructure/console'
32
32
  import {
33
33
  omitProps,
34
34
  pickProps,
35
- getElementType
35
+ getElementType,
36
+ withDeterministicId
36
37
  } from '@instructure/ui-react-utils'
37
- import { uid } from '@instructure/uid'
38
38
 
39
39
  import { withStyle, jsx } from '@instructure/emotion'
40
40
 
@@ -52,6 +52,7 @@ parent: FormField
52
52
  ---
53
53
  @tsProps
54
54
  **/
55
+ @withDeterministicId()
55
56
  @withStyle(generateStyle, null)
56
57
  class FormFieldLayout extends Component<FormFieldLayoutProps> {
57
58
  static readonly componentId = 'FormFieldLayout'
@@ -68,7 +69,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
68
69
  constructor(props: FormFieldLayoutProps) {
69
70
  super(props)
70
71
 
71
- this._messagesId = props.messagesId || uid('FormFieldLayout-messages')
72
+ this._messagesId = props.messagesId || props.deterministicId!()
72
73
 
73
74
  error(
74
75
  typeof props.width !== 'undefined' ||
package/src/FormFieldLayout/props.ts CHANGED
@@ -33,6 +33,7 @@ import type {
33
33
  } from '@instructure/shared-types'
34
34
  import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
35
35
  import type { FormMessage } from '../FormPropTypes'
36
+ import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
36
37
 
37
38
  type FormFieldLayoutOwnProps = {
38
39
  label: React.ReactNode
@@ -74,7 +75,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
74
75
 
75
76
  type FormFieldLayoutProps = FormFieldLayoutOwnProps &
76
77
  WithStyleProps<null, FormFieldLayoutStyle> &
77
- OtherHTMLAttributes<FormFieldLayoutOwnProps>
78
+ OtherHTMLAttributes<FormFieldLayoutOwnProps> & WithDeterministicIdProps
78
79
 
79
80
  type FormFieldLayoutStyle = ComponentStyle<'formFieldLayout'>
80
81