@instructure/ui-number-input 10.2.2-snapshot-17 → 10.2.2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.2-snapshot-17](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-17) (2024-09-13)
+## [10.2.2](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2) (2024-09-13)
 
 **Note:** Version bump only for package @instructure/ui-number-input
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "10.2.2-snapshot-17",
+  "version": "10.2.2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,11 +23,11 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.2.2-snapshot-17",
-    "@instructure/ui-babel-preset": "10.2.2-snapshot-17",
-    "@instructure/ui-scripts": "10.2.2-snapshot-17",
-    "@instructure/ui-test-utils": "10.2.2-snapshot-17",
-    "@instructure/ui-themes": "10.2.2-snapshot-17",
+    "@instructure/ui-axe-check": "10.2.2",
+    "@instructure/ui-babel-preset": "10.2.2",
+    "@instructure/ui-scripts": "10.2.2",
+    "@instructure/ui-test-utils": "10.2.2",
+    "@instructure/ui-themes": "10.2.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -35,14 +35,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "10.2.2-snapshot-17",
-    "@instructure/shared-types": "10.2.2-snapshot-17",
-    "@instructure/ui-form-field": "10.2.2-snapshot-17",
-    "@instructure/ui-icons": "10.2.2-snapshot-17",
-    "@instructure/ui-react-utils": "10.2.2-snapshot-17",
-    "@instructure/ui-testable": "10.2.2-snapshot-17",
-    "@instructure/ui-utils": "10.2.2-snapshot-17",
-    "@instructure/uid": "10.2.2-snapshot-17",
+    "@instructure/emotion": "10.2.2",
+    "@instructure/shared-types": "10.2.2",
+    "@instructure/ui-form-field": "10.2.2",
+    "@instructure/ui-icons": "10.2.2",
+    "@instructure/ui-react-utils": "10.2.2",
+    "@instructure/ui-testable": "10.2.2",
+    "@instructure/ui-utils": "10.2.2",
+    "@instructure/uid": "10.2.2",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/NumberInput/README.md

@@ -10,137 +10,273 @@ This example handles arrow buttons, up/down arrow keys, and typing into
 the input. It also includes an `onBlur` handler that displays an error message
 if the input is invalid or missing.
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  MIN = 0
-  MAX = 999
-
-  state = {
-    disabled: false,
-    inline: false,
-    messages: null,
-    number: null,
-    readOnly: false,
-    showArrows: true,
-    value: ''
-  }
+- ```js
+  class Example extends React.Component {
+    MIN = 0
+    MAX = 999
 
-  handleChange = (event, value) => this.setState({
-    messages: null,
-    number: value ? Number(value) : null,
-    value
-  })
-
-  handleDecrement = (event) => this.setState(({ number }) => {
-    if (isNaN(number)) return
-    if (number === null) return this.setNumber(this.MIN)
-    if (isInteger(number)) return this.setNumber(number - 1)
-    return this.setNumber(Math.floor(number))
-  })
-
-  handleIncrement = (event) => this.setState(({ number }) => {
-    if (isNaN(number)) return
-    if (number === null) return this.setNumber(this.MIN + 1)
-    if (isInteger(number)) return this.setNumber(number + 1)
-    return this.setNumber(Math.ceil(number))
-  })
-
-  handleBlur = (event) => this.setState(({ number, value }) => {
-    if (isNaN(number)) return this.invalidNumber(value)
-    if (number === null) return this.required()
-    return this.setNumber(Math.round(number))
-  })
-
-  setNumber (n) {
-    const number = this.bound(n)
-    return {
+    state = {
+      disabled: false,
+      inline: false,
       messages: null,
-      number,
-      value: number
+      number: null,
+      readOnly: false,
+      showArrows: true,
+      value: ''
     }
-  }
 
-  bound (n) {
-    if (n < this.MIN) return this.MIN
-    if (n > this.MAX) return this.MAX
-    return n
-  }
+    handleChange = (event, value) =>
+      this.setState({
+        messages: null,
+        number: value ? Number(value) : null,
+        value
+      })
+
+    handleDecrement = (event) =>
+      this.setState(({ number }) => {
+        if (isNaN(number)) return
+        if (number === null) return this.setNumber(this.MIN)
+        if (Number.isInteger(number)) return this.setNumber(number - 1)
+        return this.setNumber(Math.floor(number))
+      })
+
+    handleIncrement = (event) =>
+      this.setState(({ number }) => {
+        if (isNaN(number)) return
+        if (number === null) return this.setNumber(this.MIN + 1)
+        if (Number.isInteger(number)) return this.setNumber(number + 1)
+        return this.setNumber(Math.ceil(number))
+      })
 
-  invalidNumber (value) {
-    return {
-      messages: [{ text: `'${value}' is not a valid number.`, type: 'error' }]
+    handleBlur = (event) =>
+      this.setState(({ number, value }) => {
+        if (isNaN(number)) return this.invalidNumber(value)
+        if (number === null) return this.required()
+        return this.setNumber(Math.round(number))
+      })
+
+    setNumber(n) {
+      const number = this.bound(n)
+      return {
+        messages: null,
+        number,
+        value: number
+      }
     }
-  }
 
-  required () {
-    return {
-      messages: [{ text: 'This is required.', type: 'error' }]
+    bound(n) {
+      if (n < this.MIN) return this.MIN
+      if (n > this.MAX) return this.MAX
+      return n
+    }
+
+    invalidNumber(value) {
+      return {
+        messages: [{ text: `'${value}' is not a valid number.`, type: 'error' }]
+      }
+    }
+
+    required() {
+      return {
+        messages: [{ text: 'This is required.', type: 'error' }]
+      }
+    }
+
+    toggleDisabled = (event) =>
+      this.setState(({ disabled }) => ({ disabled: !disabled }))
+
+    toggleInline = (event) =>
+      this.setState(({ inline }) => ({ inline: !inline }))
+
+    toggleReadOnly = (event) =>
+      this.setState(({ readOnly }) => ({ readOnly: !readOnly }))
+
+    toggleShowArrows = (event) =>
+      this.setState(({ showArrows }) => ({ showArrows: !showArrows }))
+
+    render() {
+      return (
+        <FormFieldGroup description="Controlled NumberInput example">
+          <Checkbox
+            checked={this.state.showArrows}
+            label="Show arrows"
+            onChange={this.toggleShowArrows}
+          />
+          <Checkbox
+            checked={this.state.disabled}
+            label="Disabled"
+            onChange={this.toggleDisabled}
+          />
+          <Checkbox
+            checked={this.state.readOnly}
+            label="Read only"
+            onChange={this.toggleReadOnly}
+          />
+          <Checkbox
+            checked={this.state.inline}
+            label="Inline display"
+            onChange={this.toggleInline}
+          />
+          <NumberInput
+            renderLabel={`How old are you? (${this.MIN}-${this.MAX})`}
+            display={this.state.inline ? 'inline-block' : null}
+            messages={this.state.messages}
+            onBlur={this.handleBlur}
+            onChange={this.handleChange}
+            onDecrement={this.handleDecrement}
+            onIncrement={this.handleIncrement}
+            placeholder="Age (in years)"
+            interaction={
+              this.state.disabled
+                ? 'disabled'
+                : this.state.readOnly
+                ? 'readonly'
+                : 'enabled'
+            }
+            isRequired
+            showArrows={this.state.showArrows}
+            value={this.state.value}
+          />
+        </FormFieldGroup>
+      )
     }
   }
 
-  toggleDisabled = (event) => this.setState(({ disabled }) => ({ disabled: !disabled }))
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const MIN = 0
+    const MAX = 999
+
+    const [disabled, setDisabled] = useState(false)
+    const [inline, setInline] = useState(false)
+    const [messages, setMessages] = useState(null)
+    const [number, setNumber] = useState(null)
+    const [readOnly, setReadOnly] = useState(false)
+    const [showArrows, setShowArrows] = useState(true)
+    const [value, setValue] = useState('')
 
-  toggleInline = (event) => this.setState(({ inline }) => ({ inline: !inline }))
+    const handleChange = (event, value) => {
+      setMessages(null)
+      setNumber(value ? Number(value) : null)
+      setValue(value)
+    }
+
+    const handleDecrement = (event) => {
+      if (!isNaN(number)) {
+        const newNumber =
+          number === null
+            ? MIN
+            : Number.isInteger(number)
+            ? number - 1
+            : Math.floor(number)
+        updateNumber(newNumber)
+      }
+    }
+
+    const handleIncrement = (event) => {
+      if (!isNaN(number)) {
+        const newNumber =
+          number === null
+            ? MIN + 1
+            : Number.isInteger(number)
+            ? number + 1
+            : Math.ceil(number)
+        updateNumber(newNumber)
+      }
+    }
+
+    const handleBlur = (event) => {
+      if (isNaN(number)) return invalidNumber(value)
+      if (number === null) return required()
+      return updateNumber(Math.round(number))
+    }
+
+    const updateNumber = (n) => {
+      const number = bound(n)
+      setMessages(null)
+      setNumber(number)
+      setValue(number)
+    }
 
-  toggleReadOnly = (event) => this.setState(({ readOnly }) => ({ readOnly: !readOnly }))
+    const bound = (n) => {
+      if (n < MIN) return MIN
+      if (n > MAX) return MAX
+      return n
+    }
 
-  toggleShowArrows = (event) => this.setState(({ showArrows }) => ({ showArrows: !showArrows }))
+    const invalidNumber = (value) => {
+      setMessages([
+        { text: `'${value}' is not a valid number.`, type: 'error' }
+      ])
+    }
+
+    const required = () => {
+      setMessages([{ text: 'This is required.', type: 'error' }])
+    }
+
+    const toggleDisabled = (event) => {
+      setDisabled((prevDisabled) => !prevDisabled)
+    }
+
+    const toggleInline = (event) => {
+      setInline((prevInline) => !prevInline)
+    }
+
+    const toggleReadOnly = (event) => {
+      setReadOnly((prevReadOnly) => !prevReadOnly)
+    }
+
+    const toggleShowArrows = (event) => {
+      setShowArrows((prevShowArrows) => !prevShowArrows)
+    }
 
-  render () {
     return (
       <FormFieldGroup description="Controlled NumberInput example">
         <Checkbox
-          checked={this.state.showArrows}
+          checked={showArrows}
           label="Show arrows"
-          onChange={this.toggleShowArrows}
+          onChange={toggleShowArrows}
         />
         <Checkbox
-          checked={this.state.disabled}
+          checked={disabled}
           label="Disabled"
-          onChange={this.toggleDisabled}
+          onChange={toggleDisabled}
         />
         <Checkbox
-          checked={this.state.readOnly}
+          checked={readOnly}
           label="Read only"
-          onChange={this.toggleReadOnly}
+          onChange={toggleReadOnly}
         />
         <Checkbox
-          checked={this.state.inline}
+          checked={inline}
           label="Inline display"
-          onChange={this.toggleInline}
+          onChange={toggleInline}
         />
         <NumberInput
-          renderLabel={`How old are you? (${this.MIN}-${this.MAX})`}
-          display={this.state.inline ? 'inline-block' : null}
-          messages={this.state.messages}
-          onBlur={this.handleBlur}
-          onChange={this.handleChange}
-          onDecrement={this.handleDecrement}
-          onIncrement={this.handleIncrement}
+          renderLabel={`How old are you? (${MIN}-${MAX})`}
+          display={inline ? 'inline-block' : null}
+          messages={messages}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onDecrement={handleDecrement}
+          onIncrement={handleIncrement}
           placeholder="Age (in years)"
-          interaction={this.state.disabled
-            ? 'disabled'
-            : this.state.readOnly ? 'readonly' : 'enabled'
+          interaction={
+            disabled ? 'disabled' : readOnly ? 'readonly' : 'enabled'
           }
           isRequired
-          showArrows={this.state.showArrows}
-          value={this.state.value}
+          showArrows={showArrows}
+          value={value}
         />
       </FormFieldGroup>
     )
   }
-}
 
-// IE11 doesn't support Number.isInteger
-function isInteger (number) {
-  return Math.floor(number) === number
-}
-
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 > Note: `NumberInput` accepts a string or number as its `value`. However, the value returned by the `onChange` callback is always a string and should be converted to a number before attempting to augment it.