@instructure/ui-number-input 8.13.1-snapshot.2 → 8.13.1-snapshot.27

package/es/NumberInput/index.js

@@ -226,6 +226,7 @@ let NumberInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   showArrows: true,
   size: 'medium',
   display: 'block',
+  textAlign: 'start',
   inputRef: event => {},
   onFocus: event => {},
   onBlur: event => {},

package/es/NumberInput/props.js

@@ -128,7 +128,12 @@ const propTypes = {
   /**
    * The inputMode attribute of the underlying `input` element can be one of ['numeric', 'decimal', 'tel']
    */
-  inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel'])
+  inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
+
+  /**
+   * The text alignment of the input.
+   */
+  textAlign: PropTypes.oneOf(['start', 'center'])
 };
-const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode'];
+const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign'];
 export { propTypes, allowedProps };

package/es/NumberInput/styles.js

@@ -33,7 +33,8 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const size = props.size;
+  const size = props.size,
+        textAlign = props.textAlign;
   const interaction = state.interaction,
         hasFocus = state.hasFocus,
         invalid = state.invalid;
@@ -134,7 +135,7 @@ const generateStyle = (componentTheme, props, state) => {
     input: {
       label: 'numberInput_input',
       all: 'initial',
-      textAlign: 'start',
+      textAlign: textAlign,
       direction: 'inherit',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
@@ -150,6 +151,7 @@ const generateStyle = (componentTheme, props, state) => {
       color: componentTheme.color,
       background: componentTheme.background,
       padding: componentTheme.padding,
+      textyAlign: textAlign,
       '&::placeholder': {
         color: componentTheme.placeholderColor
       }

package/lib/NumberInput/index.js

@@ -228,6 +228,7 @@ let NumberInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   showArrows: true,
   size: 'medium',
   display: 'block',
+  textAlign: 'start',
   inputRef: event => {},
   onFocus: event => {},
   onBlur: event => {},

package/lib/NumberInput/props.js

@@ -139,8 +139,13 @@ const propTypes = {
   /**
    * The inputMode attribute of the underlying `input` element can be one of ['numeric', 'decimal', 'tel']
    */
-  inputMode: _propTypes.default.oneOf(['numeric', 'decimal', 'tel'])
+  inputMode: _propTypes.default.oneOf(['numeric', 'decimal', 'tel']),
+
+  /**
+   * The text alignment of the input.
+   */
+  textAlign: _propTypes.default.oneOf(['start', 'center'])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode'];
+const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign'];
 exports.allowedProps = allowedProps;

package/lib/NumberInput/styles.js

@@ -40,7 +40,8 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const size = props.size;
+  const size = props.size,
+        textAlign = props.textAlign;
   const interaction = state.interaction,
         hasFocus = state.hasFocus,
         invalid = state.invalid;
@@ -141,7 +142,7 @@ const generateStyle = (componentTheme, props, state) => {
     input: {
       label: 'numberInput_input',
       all: 'initial',
-      textAlign: 'start',
+      textAlign: textAlign,
       direction: 'inherit',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
@@ -157,6 +158,7 @@ const generateStyle = (componentTheme, props, state) => {
       color: componentTheme.color,
       background: componentTheme.background,
       padding: componentTheme.padding,
+      textyAlign: textAlign,
       '&::placeholder': {
         color: componentTheme.placeholderColor
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "8.13.1-snapshot.2+249897ee7",
+  "version": "8.13.1-snapshot.27+37d3bca26",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -24,21 +24,21 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-themes": "8.13.1-snapshot.2+249897ee7"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-test-locator": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-themes": "8.13.1-snapshot.27+37d3bca26"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/shared-types": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-form-field": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-icons": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-testable": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/uid": "8.13.1-snapshot.2+249897ee7",
+    "@instructure/emotion": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/shared-types": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-form-field": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-icons": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-testable": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/uid": "8.13.1-snapshot.27+37d3bca26",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "249897ee75a61c9436fca89f11473c0ece4c3e15"
+  "gitHead": "37d3bca26e420d33639ba518b2443e450ec3df3b"
 }

package/src/NumberInput/index.tsx

@@ -72,6 +72,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     showArrows: true,
     size: 'medium',
     display: 'block',
+    textAlign: 'start',
     // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
     inputRef: (event) => {},
     // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.

package/src/NumberInput/props.ts

@@ -55,6 +55,7 @@ type NumberInputOwnProps = {
   onIncrement?: (...args: any[]) => any
   onKeyDown?: (...args: any[]) => any
   inputMode?: 'numeric' | 'decimal' | 'tel'
+  textAlign?: 'start' | 'center'
 }
 
 type NumberInputState = {
@@ -173,7 +174,11 @@ const propTypes: PropValidators<PropKeys> = {
   /**
    * The inputMode attribute of the underlying `input` element can be one of ['numeric', 'decimal', 'tel']
    */
-  inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel'])
+  inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
+  /**
+   * The text alignment of the input.
+   */
+  textAlign: PropTypes.oneOf(['start', 'center'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -195,7 +200,8 @@ const allowedProps: AllowedPropKeys = [
   'onDecrement',
   'onIncrement',
   'onKeyDown',
-  'inputMode'
+  'inputMode',
+  'textAlign'
 ]
 
 export type {

package/src/NumberInput/styles.ts

@@ -44,7 +44,7 @@ const generateStyle = (
   props: NumberInputProps,
   state: NumberInputStyleProps
 ): NumberInputStyle => {
-  const { size } = props
+  const { size, textAlign } = props
   const { interaction, hasFocus, invalid } = state
 
   const disabledStyles =
@@ -153,7 +153,7 @@ const generateStyle = (
     input: {
       label: 'numberInput_input',
       all: 'initial',
-      textAlign: 'start',
+      textAlign: textAlign,
       direction: 'inherit',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
@@ -169,6 +169,7 @@ const generateStyle = (
       color: componentTheme.color,
       background: componentTheme.background,
       padding: componentTheme.padding,
+      textyAlign: textAlign,
       '&::placeholder': { color: componentTheme.placeholderColor }
     }
   }

package/tsconfig.build.json

@@ -1,7 +1,23 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "rootDir": "./src",
+    "composite": true
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-test-locator/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" },
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-form-field/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../uid/tsconfig.build.json" }
+  ]
 }