@instructure/ui-checkbox 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-checkbox

package/es/Checkbox/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -30,9 +30,8 @@ import keycode from 'keycode';
 import { FormFieldMessages } from '@instructure/ui-form-field';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
-import { uid } from '@instructure/uid';
 import { isActiveElement } from '@instructure/ui-dom-utils';
-import { omitProps } from '@instructure/ui-react-utils';
+import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
@@ -48,7 +47,7 @@ tags: toggle, switch
 ---
 @tsProps
 **/
-let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Checkbox extends Component {
+let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Checkbox extends Component {
   constructor(props) {
     super(props);
     this._defaultId = void 0;
@@ -118,7 +117,13 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
       hovered: false,
       checked: typeof props.checked === 'undefined' ? !!props.defaultChecked : void 0
     };
-    this._defaultId = uid('Checkbox');
+
+    if (typeof props.checked === 'undefined') {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
+      this.state.checked = !!props.defaultChecked;
+    }
+
+    this._defaultId = props.deterministicId();
   }
 
   componentDidMount() {
@@ -256,6 +261,6 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
   indeterminate: false,
   readOnly: false,
   labelPlacement: 'end'
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 export default Checkbox;
 export { Checkbox, CheckboxFacade, ToggleFacade };

package/es/CheckboxGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -25,8 +25,7 @@ var _dec, _class, _class2, _temp;
  */
 import React, { Children, Component } from 'react';
 import { FormFieldGroup } from '@instructure/ui-form-field';
-import { uid } from '@instructure/uid';
-import { matchComponentTypes, safeCloneElement, pickProps, omitProps } from '@instructure/ui-react-utils';
+import { matchComponentTypes, safeCloneElement, pickProps, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { Checkbox } from '../Checkbox';
 import { propTypes, allowedProps } from './props';
@@ -37,7 +36,7 @@ category: components
 ---
 @tsProps
 **/
-let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class CheckboxGroup extends Component {
+let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class CheckboxGroup extends Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
@@ -78,7 +77,7 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
       };
     }
 
-    this._messagesId = uid('CheckboxGroup-messages');
+    this._messagesId = props.deterministicId();
   }
 
   get hasMessages() {
@@ -132,6 +131,6 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
   size: 'medium',
   layout: 'stacked',
   children: null
-}, _temp)) || _class);
+}, _temp)) || _class) || _class);
 export default CheckboxGroup;
 export { CheckboxGroup };

package/lib/Checkbox/index.js

@@ -32,12 +32,12 @@ var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFun
 
 var _console = require("@instructure/console");
 
-var _uid = require("@instructure/uid");
-
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+
 var _View = require("@instructure/ui-view/lib/View");
 
 var _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -52,7 +52,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /**
 ---
@@ -61,7 +61,7 @@ tags: toggle, switch
 ---
 @tsProps
 **/
-let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Checkbox extends _react.Component {
+let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Checkbox extends _react.Component {
   constructor(props) {
     super(props);
     this._defaultId = void 0;
@@ -131,7 +131,13 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
       hovered: false,
       checked: typeof props.checked === 'undefined' ? !!props.defaultChecked : void 0
     };
-    this._defaultId = (0, _uid.uid)('Checkbox');
+
+    if (typeof props.checked === 'undefined') {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
+      this.state.checked = !!props.defaultChecked;
+    }
+
+    this._defaultId = props.deterministicId();
   }
 
   componentDidMount() {
@@ -269,7 +275,7 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
   indeterminate: false,
   readOnly: false,
   labelPlacement: 'end'
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 exports.Checkbox = Checkbox;
 var _default = Checkbox;
 exports.default = _default;

package/lib/CheckboxGroup/index.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _FormFieldGroup = require("@instructure/ui-form-field/lib/FormFieldGroup");
 
-var _uid = require("@instructure/uid");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
@@ -21,13 +19,15 @@ var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _Checkbox = require("../Checkbox");
 
 var _props = require("./props");
 
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /**
 ---
@@ -35,7 +35,7 @@ category: components
 ---
 @tsProps
 **/
-let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class CheckboxGroup extends _react.Component {
+let CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class CheckboxGroup extends _react.Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
@@ -76,7 +76,7 @@ let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
       };
     }
 
-    this._messagesId = (0, _uid.uid)('CheckboxGroup-messages');
+    this._messagesId = props.deterministicId();
   }
 
   get hasMessages() {
@@ -130,7 +130,7 @@ let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
   size: 'medium',
   layout: 'stacked',
   children: null
-}, _temp)) || _class);
+}, _temp)) || _class) || _class);
 exports.CheckboxGroup = CheckboxGroup;
 var _default = CheckboxGroup;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "8.16.1-snapshot.2+25359e770",
+  "version": "8.17.1-snapshot.14+f0b03679c",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "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-dom-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-form-field": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-icons": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-prop-types": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-react-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-svg-images": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-testable": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-view": "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-dom-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-form-field": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-icons": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-prop-types": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-svg-images": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-testable": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-view": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/uid": "8.17.1-snapshot.14+f0b03679c",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-color-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-test-locator": "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-color-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-test-locator": "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"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -54,5 +54,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "25359e77043270cf26e92b14f396b498f1540c62"
+  "gitHead": "f0b03679c4c4d05d4d650d22646ac1dc6791e935"
 }

package/src/Checkbox/index.tsx

@@ -29,9 +29,8 @@ import keycode from 'keycode'
 import { FormFieldMessages } from '@instructure/ui-form-field'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { logError as error } from '@instructure/console'
-import { uid } from '@instructure/uid'
 import { isActiveElement } from '@instructure/ui-dom-utils'
-import { omitProps } from '@instructure/ui-react-utils'
+import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
 import { testable } from '@instructure/ui-testable'
 
@@ -58,6 +57,7 @@ tags: toggle, switch
 @tsProps
 **/
 
+@withDeterministicId()
 @withStyle(generateStyle, null)
 @testable()
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
@@ -87,7 +87,12 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           : undefined
     }
 
-    this._defaultId = uid('Checkbox')
+    if (typeof props.checked === 'undefined') {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
+      this.state.checked = !!props.defaultChecked
+    }
+
+    this._defaultId = props.deterministicId!()
   }
   private readonly _defaultId: string
   private _input: HTMLInputElement | null = null

package/src/Checkbox/props.ts

@@ -35,6 +35,7 @@ import type {
   ToggleFacadeTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type CheckboxOwnProps = {
   label: React.ReactNode
@@ -86,7 +87,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CheckboxProps = CheckboxOwnProps &
   WithStyleProps<CheckboxFacadeTheme | ToggleFacadeTheme, CheckboxStyle> &
-  OtherHTMLAttributes<CheckboxOwnProps>
+  OtherHTMLAttributes<CheckboxOwnProps> & WithDeterministicIdProps
 
 type CheckboxStyle = ComponentStyle<'checkbox' | 'input' | 'control'>
 

package/src/CheckboxGroup/index.tsx

@@ -25,12 +25,12 @@
 import React, { Children, Component } from 'react'
 
 import { FormFieldGroup } from '@instructure/ui-form-field'
-import { uid } from '@instructure/uid'
 import {
   matchComponentTypes,
   safeCloneElement,
   pickProps,
-  omitProps
+  omitProps,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 
@@ -49,6 +49,8 @@ category: components
 ---
 @tsProps
 **/
+
+@withDeterministicId()
 @testable()
 class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
   static readonly componentId = 'CheckboxGroup'
@@ -72,7 +74,7 @@ class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
       }
     }
 
-    this._messagesId = uid('CheckboxGroup-messages')
+    this._messagesId = props.deterministicId!()
   }
   private readonly _messagesId: string
   ref: Element | null = null

package/src/CheckboxGroup/props.ts

@@ -33,6 +33,7 @@ import {
 
 import type { FormMessage } from '@instructure/ui-form-field'
 import type { PropValidators } from '@instructure/shared-types'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 import { Checkbox } from '../Checkbox'
 import type { CheckboxProps } from '../Checkbox/props'
@@ -57,7 +58,7 @@ type PropKeys = keyof CheckboxGroupOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type CheckboxGroupProps = CheckboxGroupOwnProps
+type CheckboxGroupProps = CheckboxGroupOwnProps & WithDeterministicIdProps
 
 const propTypes: PropValidators<PropKeys> = {
   name: PropTypes.string.isRequired,