@instructure/ui-text-area 8.9.2-snapshot.3 → 8.10.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
+
+**Note:** Version bump only for package @instructure/ui-text-area
+
 ## [8.9.1](https://github.com/instructure/instructure-ui/compare/v8.9.0...v8.9.1) (2021-09-16)
 
 **Note:** Version bump only for package @instructure/ui-text-area

package/es/TextArea/index.js

@@ -238,7 +238,7 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
           maxHeight = _this$props4.maxHeight,
           textareaRef = _this$props4.textareaRef,
           resize = _this$props4.resize;
-    const props = omitProps(this.props, TextArea.propTypes);
+    const props = omitProps(this.props, TextArea.allowedProps);
     const style = {
       width,
       resize,
@@ -262,7 +262,7 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textArea,
       onChange: this.handleChange
     }));
-    return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.propTypes), {
+    return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
       vAlign: "top",
       id: this.id,
       ref: el => {

package/lib/TextArea/index.js

@@ -241,7 +241,7 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
           maxHeight = _this$props4.maxHeight,
           textareaRef = _this$props4.textareaRef,
           resize = _this$props4.resize;
-    const props = (0, _omitProps.omitProps)(this.props, TextArea.propTypes);
+    const props = (0, _omitProps.omitProps)(this.props, TextArea.allowedProps);
     const style = {
       width,
       resize,
@@ -265,7 +265,7 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textArea,
       onChange: this.handleChange
     }));
-    return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.propTypes), {
+    return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
       vAlign: "top",
       id: this.id,
       ref: el => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-area",
-  "version": "8.9.2-snapshot.3+ddc7880d5",
+  "version": "8.10.0",
   "description": "A styled HTML text area component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,24 +25,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/emotion": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/shared-types": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-dom-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-form-field": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-prop-types": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-react-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-testable": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/uid": "8.9.2-snapshot.3+ddc7880d5",
+    "@instructure/debounce": "8.10.0",
+    "@instructure/emotion": "8.10.0",
+    "@instructure/shared-types": "8.10.0",
+    "@instructure/ui-dom-utils": "8.10.0",
+    "@instructure/ui-form-field": "8.10.0",
+    "@instructure/ui-prop-types": "8.10.0",
+    "@instructure/ui-react-utils": "8.10.0",
+    "@instructure/ui-testable": "8.10.0",
+    "@instructure/ui-utils": "8.10.0",
+    "@instructure/uid": "8.10.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-color-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-test-locator": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-themes": "8.9.2-snapshot.3+ddc7880d5"
+    "@instructure/ui-babel-preset": "8.10.0",
+    "@instructure/ui-color-utils": "8.10.0",
+    "@instructure/ui-test-locator": "8.10.0",
+    "@instructure/ui-test-utils": "8.10.0",
+    "@instructure/ui-themes": "8.10.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -50,6 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "ddc7880d5a2f7d4d0596332e8d49cb9b1de68024"
+  "sideEffects": false
 }

package/src/TextArea/index.tsx

@@ -304,7 +304,7 @@ class TextArea extends Component<TextAreaProps> {
       resize
     } = this.props
 
-    const props = omitProps(this.props, TextArea.propTypes)
+    const props = omitProps(this.props, TextArea.allowedProps)
 
     const style = {
       width,
@@ -341,7 +341,7 @@ class TextArea extends Component<TextAreaProps> {
     return (
       // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       <FormField
-        {...pickProps(this.props, FormField.propTypes)}
+        {...pickProps(this.props, FormField.allowedProps)}
         vAlign="top"
         id={this.id}
         ref={(el) => {

package/src/TextArea/props.ts

@@ -27,9 +27,9 @@ import PropTypes from 'prop-types'
 import { controllable } from '@instructure/ui-prop-types'
 import { FormPropTypes } from '@instructure/ui-form-field'
 
-import type { PropValidators } from '@instructure/shared-types'
+import type { PropValidators, TextAreaTheme } from '@instructure/shared-types'
 import type { FormMessage } from '@instructure/ui-form-field'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TextAreaOwnProps = {
   label: React.ReactNode
@@ -57,7 +57,12 @@ type PropKeys = keyof TextAreaOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TextAreaProps = TextAreaOwnProps & WithStyleProps
+type TextAreaProps = TextAreaOwnProps &
+  WithStyleProps<TextAreaTheme, TextAreaStyle>
+
+type TextAreaStyle = ComponentStyle<
+  'textArea' | 'textAreaLayout' | 'textAreaOutline'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,
@@ -154,5 +159,5 @@ const allowedProps: AllowedPropKeys = [
   'onChange'
 ]
 
-export type { TextAreaProps }
+export type { TextAreaProps, TextAreaStyle }
 export { propTypes, allowedProps }

package/src/TextArea/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { TextAreaTheme } from '@instructure/shared-types'
-import { TextAreaProps } from './props'
+import type { TextAreaTheme } from '@instructure/shared-types'
+import type { TextAreaProps, TextAreaStyle } from './props'
 
 /**
  * ---
@@ -35,7 +35,10 @@ import { TextAreaProps } from './props'
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: TextAreaTheme, props: TextAreaProps) => {
+const generateStyle = (
+  componentTheme: TextAreaTheme,
+  props: TextAreaProps
+): TextAreaStyle => {
   const { disabled, size } = props
 
   const fontSizeVariants = {

package/types/TextArea/props.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { PropValidators } from '@instructure/shared-types';
+import type { PropValidators, TextAreaTheme } from '@instructure/shared-types';
 import type { FormMessage } from '@instructure/ui-form-field';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type TextAreaOwnProps = {
     label: React.ReactNode;
     id?: string;
@@ -25,9 +25,10 @@ declare type TextAreaOwnProps = {
 };
 declare type PropKeys = keyof TextAreaOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type TextAreaProps = TextAreaOwnProps & WithStyleProps;
+declare type TextAreaProps = TextAreaOwnProps & WithStyleProps<TextAreaTheme, TextAreaStyle>;
+declare type TextAreaStyle = ComponentStyle<'textArea' | 'textAreaLayout' | 'textAreaOutline'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { TextAreaProps };
+export type { TextAreaProps, TextAreaStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/TextArea/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/TextArea/props.ts"],"names":[],"mappings":";AA6BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;CACnC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GAAG,cAAc,CAAA;AAEtD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAuEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAoBnB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/TextArea/props.ts"],"names":[],"mappings":";AA6BA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;CACnC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GACnC,cAAc,CAAC,aAAa,EAAE,aAAa,CAAC,CAAA;AAE9C,aAAK,aAAa,GAAG,cAAc,CACjC,UAAU,GAAG,gBAAgB,GAAG,iBAAiB,CAClD,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAuEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAoBnB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/TextArea/styles.d.ts

@@ -1,5 +1,5 @@
-import { TextAreaTheme } from '@instructure/shared-types';
-import { TextAreaProps } from './props';
+import type { TextAreaTheme } from '@instructure/shared-types';
+import type { TextAreaProps, TextAreaStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,148 +10,6 @@ import { TextAreaProps } from './props';
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-declare const generateStyle: (componentTheme: TextAreaTheme, props: TextAreaProps) => {
-    textArea: {
-        cursor?: string | undefined;
-        pointerEvents?: string | undefined;
-        opacity?: number | undefined;
-        '&:focus + [class$=-textArea__outline]': {
-            transform: string;
-            opacity: number;
-        };
-        '&[aria-invalid], &[aria-invalid]:focus, &[aria-invalid]:focus + [class$=-textArea__outline]': {
-            borderColor: string;
-        };
-        '&::placeholder': {
-            color: string;
-        };
-        fontSize: string | 0;
-        label: string;
-        all: string;
-        WebkitFontSmoothing: string;
-        MozOsxFontSmoothing: string;
-        appearance: string;
-        height: string;
-        margin: number;
-        width: string;
-        display: string;
-        boxSizing: string;
-        padding: string | 0;
-        fontFamily: string;
-        fontWeight: number;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderTopColor: string;
-        borderRightColor: string;
-        borderBottomColor: string;
-        borderLeftColor: string;
-        borderRadius: string | 0;
-        color: string;
-        background: string;
-        whiteSpace: string;
-        wordWrap: string;
-        textAlign: string;
-    } | {
-        cursor?: string | undefined;
-        pointerEvents?: string | undefined;
-        opacity?: number | undefined;
-        '&:focus + [class$=-textArea__outline]': {
-            transform: string;
-            opacity: number;
-        };
-        '&[aria-invalid], &[aria-invalid]:focus, &[aria-invalid]:focus + [class$=-textArea__outline]': {
-            borderColor: string;
-        };
-        '&::placeholder': {
-            color: string;
-        };
-        fontSize: string | 0;
-        label: string;
-        all: string;
-        WebkitFontSmoothing: string;
-        MozOsxFontSmoothing: string;
-        appearance: string;
-        height: string;
-        margin: number;
-        width: string;
-        display: string;
-        boxSizing: string;
-        padding: string | 0;
-        fontFamily: string;
-        fontWeight: number;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderTopColor: string;
-        borderRightColor: string;
-        borderBottomColor: string;
-        borderLeftColor: string;
-        borderRadius: string | 0;
-        color: string;
-        background: string;
-        whiteSpace: string;
-        wordWrap: string;
-        textAlign: string;
-    } | {
-        cursor?: string | undefined;
-        pointerEvents?: string | undefined;
-        opacity?: number | undefined;
-        '&:focus + [class$=-textArea__outline]': {
-            transform: string;
-            opacity: number;
-        };
-        '&[aria-invalid], &[aria-invalid]:focus, &[aria-invalid]:focus + [class$=-textArea__outline]': {
-            borderColor: string;
-        };
-        '&::placeholder': {
-            color: string;
-        };
-        fontSize: string | 0;
-        label: string;
-        all: string;
-        WebkitFontSmoothing: string;
-        MozOsxFontSmoothing: string;
-        appearance: string;
-        height: string;
-        margin: number;
-        width: string;
-        display: string;
-        boxSizing: string;
-        padding: string | 0;
-        fontFamily: string;
-        fontWeight: number;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderTopColor: string;
-        borderRightColor: string;
-        borderBottomColor: string;
-        borderLeftColor: string;
-        borderRadius: string | 0;
-        color: string;
-        background: string;
-        whiteSpace: string;
-        wordWrap: string;
-        textAlign: string;
-    };
-    textAreaLayout: {
-        label: string;
-        position: string;
-    };
-    textAreaOutline: {
-        label: string;
-        pointerEvents: string;
-        position: string;
-        display: string;
-        boxSizing: string;
-        top: string;
-        bottom: string;
-        left: string;
-        right: string;
-        border: string;
-        borderRadius: string;
-        transition: string;
-        opacity: number;
-        transform: string;
-    };
-};
+declare const generateStyle: (componentTheme: TextAreaTheme, props: TextAreaProps) => TextAreaStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/TextArea/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/TextArea/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,aAAa,SAAS,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFzE,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/TextArea/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE3D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,aAAa,SACtB,aAAa,KACnB,aAiFF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/LICENSE.md

@@ -1,27 +0,0 @@
----
-title: The MIT License (MIT)
-category: Getting Started
-order: 9
----
-
-# The MIT License (MIT)
-
-Copyright (c) 2015 Instructure, Inc.
-
-**Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions.**
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.