@instructure/ui-form-field 8.16.1-snapshot.2 → 8.17.1-snapshot.14

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
+
+### Bug Fixes
+
+- remove type:"commonjs" from package.json files ([0b243be](https://github.com/instructure/instructure-ui/commit/0b243bee389ee14493e6b3dbb30a8b660c295d3d))
+
 # [8.16.0](https://github.com/instructure/instructure-ui/compare/v8.15.0...v8.16.0) (2022-02-03)
 
 **Note:** Version bump only for package @instructure/ui-form-field

package/es/FormFieldLabel/index.js

@@ -76,7 +76,7 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
     const _this$props3 = this.props,
           styles = _this$props3.styles,
           children = _this$props3.children;
-    return jsx(ElementType // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
+    return jsx(ElementType //@ts-expect-error too complex union type
     , Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
       ref: this.handleRef

package/es/FormFieldLayout/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["makeStyles", "styles"];
 
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -33,8 +33,7 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Grid } from '@instructure/ui-grid';
 import { logError as error } from '@instructure/console';
-import { omitProps, pickProps, getElementType } from '@instructure/ui-react-utils';
-import { uid } from '@instructure/uid';
+import { omitProps, pickProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import { FormFieldLabel } from '../FormFieldLabel';
 import { FormFieldMessages } from '../FormFieldMessages';
@@ -47,7 +46,7 @@ parent: FormField
 ---
 @tsProps
 **/
-let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends Component {
+let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec(_class = _dec2(_class = (_temp = _class2 = class FormFieldLayout extends Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
@@ -68,7 +67,7 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
       }
     };
 
-    this._messagesId = props.messagesId || uid('FormFieldLayout-messages');
+    this._messagesId = props.messagesId || props.deterministicId();
     error(typeof props.width !== 'undefined' || !props.inline || props.layout !== 'inline', `[FormFieldLayout] The 'inline' prop is true, and the 'layout' is set to 'inline'.
       This will cause a layout issue in Internet Explorer 11 unless you also add a value for the 'width' prop.`);
   }
@@ -139,6 +138,7 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
   }
 
   render() {
+    // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
     const ElementType = this.elementType;
 
     const _this$props3 = this.props,
@@ -171,6 +171,6 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
   layout: 'stacked',
   as: 'label',
   labelAlign: 'end'
-}, _temp)) || _class);
+}, _temp)) || _class) || _class);
 export default FormFieldLayout;
 export { FormFieldLayout };

package/lib/FormFieldLabel/index.js

@@ -67,7 +67,7 @@ let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     const _this$props3 = this.props,
           styles = _this$props3.styles,
           children = _this$props3.children;
-    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)"
+    return (0, _emotion.jsx)(ElementType //@ts-expect-error too complex union type
     , Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
       ref: this.handleRef

package/lib/FormFieldLayout/index.js

@@ -25,7 +25,7 @@ var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 
-var _uid = require("@instructure/uid");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 
 var _emotion = require("@instructure/emotion");
 
@@ -39,7 +39,7 @@ var _props = require("./props");
 
 const _excluded = ["makeStyles", "styles"];
 
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /**
 ---
@@ -47,7 +47,7 @@ parent: FormField
 ---
 @tsProps
 **/
-let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends _react.Component {
+let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = _dec2(_class = (_temp = _class2 = class FormFieldLayout extends _react.Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
@@ -68,7 +68,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
       }
     };
 
-    this._messagesId = props.messagesId || (0, _uid.uid)('FormFieldLayout-messages');
+    this._messagesId = props.messagesId || props.deterministicId();
     (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'.
       This will cause a layout issue in Internet Explorer 11 unless you also add a value for the 'width' prop.`);
   }
@@ -139,6 +139,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
   }
 
   render() {
+    // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
     const ElementType = this.elementType;
     const _this$props3 = this.props,
           makeStyles = _this$props3.makeStyles,
@@ -169,7 +170,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
   layout: 'stacked',
   as: 'label',
   labelAlign: 'end'
-}, _temp)) || _class);
+}, _temp)) || _class) || _class);
 exports.FormFieldLayout = FormFieldLayout;
 var _default = FormFieldLayout;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "8.16.1-snapshot.2+25359e770",
+  "version": "8.17.1-snapshot.14+f0b03679c",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,22 +23,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-test-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-themes": "8.16.1-snapshot.2+25359e770"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-themes": "8.17.1-snapshot.14+f0b03679c"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.16.1-snapshot.2+25359e770",
-    "@instructure/emotion": "8.16.1-snapshot.2+25359e770",
-    "@instructure/shared-types": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-a11y-content": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-a11y-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-grid": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-icons": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-react-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/uid": "8.16.1-snapshot.2+25359e770",
+    "@instructure/console": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/emotion": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/shared-types": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-a11y-content": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-a11y-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-grid": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-icons": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/uid": "8.17.1-snapshot.14+f0b03679c",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "25359e77043270cf26e92b14f396b498f1540c62"
+  "gitHead": "f0b03679c4c4d05d4d650d22646ac1dc6791e935"
 }

package/src/FormFieldLabel/index.tsx

@@ -82,7 +82,7 @@ class FormFieldLabel extends Component<FormFieldLabelProps> {
 
     return (
       <ElementType
-        // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
+        //@ts-expect-error too complex union type
         {...omitProps(this.props, FormFieldLabel.allowedProps)}
         css={styles?.formFieldLabel}
         ref={this.handleRef}

package/src/FormFieldLayout/index.tsx

@@ -32,9 +32,9 @@ import { logError as error } from '@instructure/console'
 import {
   omitProps,
   pickProps,
-  getElementType
+  getElementType,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
-import { uid } from '@instructure/uid'
 
 import { withStyle, jsx } from '@instructure/emotion'
 
@@ -52,6 +52,7 @@ parent: FormField
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyle, null)
 class FormFieldLayout extends Component<FormFieldLayoutProps> {
   static readonly componentId = 'FormFieldLayout'
@@ -68,7 +69,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
   constructor(props: FormFieldLayoutProps) {
     super(props)
 
-    this._messagesId = props.messagesId || uid('FormFieldLayout-messages')
+    this._messagesId = props.messagesId || props.deterministicId!()
 
     error(
       typeof props.width !== 'undefined' ||
@@ -176,7 +177,8 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
   }
 
   render() {
-    const ElementType = this.elementType
+    // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
+    const ElementType = this.elementType as any
 
     const { makeStyles, styles, ...props } = this.props
 

package/src/FormFieldLayout/props.ts

@@ -33,6 +33,7 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { FormMessage } from '../FormPropTypes'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type FormFieldLayoutOwnProps = {
   label: React.ReactNode
@@ -74,7 +75,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldLayoutProps = FormFieldLayoutOwnProps &
   WithStyleProps<null, FormFieldLayoutStyle> &
-  OtherHTMLAttributes<FormFieldLayoutOwnProps>
+  OtherHTMLAttributes<FormFieldLayoutOwnProps> & WithDeterministicIdProps
 
 type FormFieldLayoutStyle = ComponentStyle<'formFieldLayout'>