@instructure/ui-number-input 11.0.1-snapshot-1 → 11.0.1-snapshot-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.
 
-## [11.0.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-1) (2025-10-08)
+## [11.0.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-2) (2025-10-10)
 
 **Note:** Version bump only for package @instructure/ui-number-input
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "11.0.1-snapshot-1",
+  "version": "11.0.1-snapshot-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,9 +23,9 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "11.0.1-snapshot-1",
-    "@instructure/ui-scripts": "11.0.1-snapshot-1",
-    "@instructure/ui-themes": "11.0.1-snapshot-1",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
+    "@instructure/ui-scripts": "11.0.1-snapshot-2",
+    "@instructure/ui-themes": "11.0.1-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
@@ -33,13 +33,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.0.1-snapshot-1",
-    "@instructure/shared-types": "11.0.1-snapshot-1",
-    "@instructure/ui-form-field": "11.0.1-snapshot-1",
-    "@instructure/ui-icons": "11.0.1-snapshot-1",
-    "@instructure/ui-react-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-utils": "11.0.1-snapshot-1",
-    "@instructure/uid": "11.0.1-snapshot-1",
+    "@instructure/emotion": "11.0.1-snapshot-2",
+    "@instructure/shared-types": "11.0.1-snapshot-2",
+    "@instructure/ui-form-field": "11.0.1-snapshot-2",
+    "@instructure/ui-icons": "11.0.1-snapshot-2",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-utils": "11.0.1-snapshot-2",
+    "@instructure/uid": "11.0.1-snapshot-2",
     "keycode": "^2"
   },
   "peerDependencies": {

package/src/NumberInput/README.md

@@ -12,273 +12,141 @@ 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
-  class Example extends React.Component {
-    MIN = 0
-    MAX = 999
-
-    state = {
-      disabled: false,
-      inline: false,
-      messages: null,
-      number: null,
-      readOnly: false,
-      showArrows: true,
-      value: ''
-    }
-
-    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))
-      })
-
-    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
-      }
-    }
-
-    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>
-      )
-    }
+```js
+---
+type: example
+---
+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('')
+
+  const handleChange = (event, value) => {
+    setMessages(null)
+    setNumber(value ? Number(value) : null)
+    setValue(value)
   }
 
-  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('')
-
-    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 handleDecrement = (event) => {
+    if (!isNaN(number)) {
+      const newNumber =
+        number === null
+          ? MIN
+          : Number.isInteger(number)
+          ? number - 1
+          : Math.floor(number)
+      updateNumber(newNumber)
     }
+  }
 
-    const handleBlur = (event) => {
-      if (isNaN(number)) return invalidNumber(value)
-      if (number === null) return required()
-      return updateNumber(Math.round(number))
+  const handleIncrement = (event) => {
+    if (!isNaN(number)) {
+      const newNumber =
+        number === null
+          ? MIN + 1
+          : Number.isInteger(number)
+          ? number + 1
+          : Math.ceil(number)
+      updateNumber(newNumber)
     }
+  }
 
-    const updateNumber = (n) => {
-      const number = bound(n)
-      setMessages(null)
-      setNumber(number)
-      setValue(number)
-    }
+  const handleBlur = (event) => {
+    if (isNaN(number)) return invalidNumber(value)
+    if (number === null) return required()
+    return updateNumber(Math.round(number))
+  }
 
-    const bound = (n) => {
-      if (n < MIN) return MIN
-      if (n > MAX) return MAX
-      return n
-    }
+  const updateNumber = (n) => {
+    const number = bound(n)
+    setMessages(null)
+    setNumber(number)
+    setValue(number)
+  }
 
-    const invalidNumber = (value) => {
-      setMessages([
-        { text: `'${value}' is not a valid number.`, type: 'error' }
-      ])
-    }
+  const bound = (n) => {
+    if (n < MIN) return MIN
+    if (n > MAX) return MAX
+    return n
+  }
 
-    const required = () => {
-      setMessages([{ text: 'This is required.', type: 'error' }])
-    }
+  const invalidNumber = (value) => {
+    setMessages([
+      { text: `'${value}' is not a valid number.`, type: 'error' }
+    ])
+  }
 
-    const toggleDisabled = (event) => {
-      setDisabled((prevDisabled) => !prevDisabled)
-    }
+  const required = () => {
+    setMessages([{ text: 'This is required.', type: 'error' }])
+  }
 
-    const toggleInline = (event) => {
-      setInline((prevInline) => !prevInline)
-    }
+  const toggleDisabled = (event) => {
+    setDisabled((prevDisabled) => !prevDisabled)
+  }
 
-    const toggleReadOnly = (event) => {
-      setReadOnly((prevReadOnly) => !prevReadOnly)
-    }
+  const toggleInline = (event) => {
+    setInline((prevInline) => !prevInline)
+  }
 
-    const toggleShowArrows = (event) => {
-      setShowArrows((prevShowArrows) => !prevShowArrows)
-    }
+  const toggleReadOnly = (event) => {
+    setReadOnly((prevReadOnly) => !prevReadOnly)
+  }
 
-    return (
-      <FormFieldGroup description="Controlled NumberInput example">
-        <Checkbox
-          checked={showArrows}
-          label="Show arrows"
-          onChange={toggleShowArrows}
-        />
-        <Checkbox
-          checked={disabled}
-          label="Disabled"
-          onChange={toggleDisabled}
-        />
-        <Checkbox
-          checked={readOnly}
-          label="Read only"
-          onChange={toggleReadOnly}
-        />
-        <Checkbox
-          checked={inline}
-          label="Inline display"
-          onChange={toggleInline}
-        />
-        <NumberInput
-          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={
-            disabled ? 'disabled' : readOnly ? 'readonly' : 'enabled'
-          }
-          isRequired
-          showArrows={showArrows}
-          value={value}
-        />
-      </FormFieldGroup>
-    )
+  const toggleShowArrows = (event) => {
+    setShowArrows((prevShowArrows) => !prevShowArrows)
   }
 
-  render(<Example />)
-  ```
+  return (
+    <FormFieldGroup description="Controlled NumberInput example">
+      <Checkbox
+        checked={showArrows}
+        label="Show arrows"
+        onChange={toggleShowArrows}
+      />
+      <Checkbox
+        checked={disabled}
+        label="Disabled"
+        onChange={toggleDisabled}
+      />
+      <Checkbox
+        checked={readOnly}
+        label="Read only"
+        onChange={toggleReadOnly}
+      />
+      <Checkbox
+        checked={inline}
+        label="Inline display"
+        onChange={toggleInline}
+      />
+      <NumberInput
+        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={
+          disabled ? 'disabled' : readOnly ? 'readonly' : 'enabled'
+        }
+        isRequired
+        showArrows={showArrows}
+        value={value}
+      />
+    </FormFieldGroup>
+  )
+}
+
+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.