@instructure/ui-color-picker 11.7.3-snapshot-2 → 11.7.3-snapshot-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/ColorPicker/v1/index.js +6 -1
  3. package/es/ColorPicker/v2/index.js +6 -1
  4. package/lib/ColorPicker/v1/index.js +6 -1
  5. package/lib/ColorPicker/v2/index.js +6 -1
  6. package/package.json +24 -24
  7. package/src/ColorPicker/v1/index.tsx +8 -1
  8. package/src/ColorPicker/v2/index.tsx +9 -1
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/ColorPicker/v1/index.d.ts.map +1 -1
  11. package/types/ColorPicker/v2/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-2) (2026-04-27)
6
+ ## [11.7.3-snapshot-4](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-4) (2026-04-28)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-color-picker
8
+
9
+ ### Features
10
+
11
+ * **ui-color-picker:** improve ColorPicker paste behavior ([e5c279d](https://github.com/instructure/instructure-ui/commit/e5c279dbf8ac9918f104e223b9625b3b50322f23))
9
12
 
10
13
 
11
14
 
package/es/ColorPicker/v1/index.js CHANGED
@@ -437,6 +437,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
437
437
  }
438
438
  }
439
439
  handleOnPaste(event) {
440
+ var _input$selectionStart, _input$selectionEnd;
440
441
  const pasted = event.clipboardData.getData('Text');
441
442
  let toPaste = pasted;
442
443
  if (pasted[0] && pasted[0] === '#') {
@@ -445,7 +446,11 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
445
446
  if (this.props.withAlpha && toPaste.length > 8 || !this.props.withAlpha && toPaste.length > 6) {
446
447
  return event.preventDefault();
447
448
  }
448
- const newHex = `${this.state.hexCode}${toPaste}`;
449
+ const input = event.target;
450
+ const currentHex = this.state.hexCode;
451
+ const selectionStart = (_input$selectionStart = input.selectionStart) !== null && _input$selectionStart !== void 0 ? _input$selectionStart : currentHex.length;
452
+ const selectionEnd = (_input$selectionEnd = input.selectionEnd) !== null && _input$selectionEnd !== void 0 ? _input$selectionEnd : currentHex.length;
453
+ const newHex = currentHex.slice(0, selectionStart) + toPaste + currentHex.slice(selectionEnd);
449
454
  if (isValid(newHex)) {
450
455
  if (typeof this.props.onChange === 'function') {
451
456
  this.props.onChange(`#${newHex}`);
package/es/ColorPicker/v2/index.js CHANGED
@@ -442,6 +442,7 @@ let ColorPicker = (_dec = withStyle(generateStyle), _dec(_class = (_ColorPicker
442
442
  }
443
443
  }
444
444
  handleOnPaste(event) {
445
+ var _input$selectionStart, _input$selectionEnd;
445
446
  const pasted = event.clipboardData.getData('Text');
446
447
  let toPaste = pasted;
447
448
  if (pasted[0] && pasted[0] === '#') {
@@ -450,7 +451,11 @@ let ColorPicker = (_dec = withStyle(generateStyle), _dec(_class = (_ColorPicker
450
451
  if (this.props.withAlpha && toPaste.length > 8 || !this.props.withAlpha && toPaste.length > 6) {
451
452
  return event.preventDefault();
452
453
  }
453
- const newHex = `${this.state.hexCode}${toPaste}`;
454
+ const input = event.target;
455
+ const currentHex = this.state.hexCode;
456
+ const selectionStart = (_input$selectionStart = input.selectionStart) !== null && _input$selectionStart !== void 0 ? _input$selectionStart : currentHex.length;
457
+ const selectionEnd = (_input$selectionEnd = input.selectionEnd) !== null && _input$selectionEnd !== void 0 ? _input$selectionEnd : currentHex.length;
458
+ const newHex = currentHex.slice(0, selectionStart) + toPaste + currentHex.slice(selectionEnd);
454
459
  if (isValid(newHex)) {
455
460
  if (typeof this.props.onChange === 'function') {
456
461
  this.props.onChange(`#${newHex}`);
package/lib/ColorPicker/v1/index.js CHANGED
@@ -447,6 +447,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleLegacy)(_s
447
447
  }
448
448
  }
449
449
  handleOnPaste(event) {
450
+ var _input$selectionStart, _input$selectionEnd;
450
451
  const pasted = event.clipboardData.getData('Text');
451
452
  let toPaste = pasted;
452
453
  if (pasted[0] && pasted[0] === '#') {
@@ -455,7 +456,11 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleLegacy)(_s
455
456
  if (this.props.withAlpha && toPaste.length > 8 || !this.props.withAlpha && toPaste.length > 6) {
456
457
  return event.preventDefault();
457
458
  }
458
- const newHex = `${this.state.hexCode}${toPaste}`;
459
+ const input = event.target;
460
+ const currentHex = this.state.hexCode;
461
+ const selectionStart = (_input$selectionStart = input.selectionStart) !== null && _input$selectionStart !== void 0 ? _input$selectionStart : currentHex.length;
462
+ const selectionEnd = (_input$selectionEnd = input.selectionEnd) !== null && _input$selectionEnd !== void 0 ? _input$selectionEnd : currentHex.length;
463
+ const newHex = currentHex.slice(0, selectionStart) + toPaste + currentHex.slice(selectionEnd);
459
464
  if ((0, _isValid.isValid)(newHex)) {
460
465
  if (typeof this.props.onChange === 'function') {
461
466
  this.props.onChange(`#${newHex}`);
package/lib/ColorPicker/v2/index.js CHANGED
@@ -449,6 +449,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
449
449
  }
450
450
  }
451
451
  handleOnPaste(event) {
452
+ var _input$selectionStart, _input$selectionEnd;
452
453
  const pasted = event.clipboardData.getData('Text');
453
454
  let toPaste = pasted;
454
455
  if (pasted[0] && pasted[0] === '#') {
@@ -457,7 +458,11 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
457
458
  if (this.props.withAlpha && toPaste.length > 8 || !this.props.withAlpha && toPaste.length > 6) {
458
459
  return event.preventDefault();
459
460
  }
460
- const newHex = `${this.state.hexCode}${toPaste}`;
461
+ const input = event.target;
462
+ const currentHex = this.state.hexCode;
463
+ const selectionStart = (_input$selectionStart = input.selectionStart) !== null && _input$selectionStart !== void 0 ? _input$selectionStart : currentHex.length;
464
+ const selectionEnd = (_input$selectionEnd = input.selectionEnd) !== null && _input$selectionEnd !== void 0 ? _input$selectionEnd : currentHex.length;
465
+ const newHex = currentHex.slice(0, selectionStart) + toPaste + currentHex.slice(selectionEnd);
461
466
  if ((0, _isValid.isValid)(newHex)) {
462
467
  if (typeof this.props.onChange === 'function') {
463
468
  this.props.onChange(`#${newHex}`);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-color-picker",
3
- "version": "11.7.3-snapshot-2",
3
+ "version": "11.7.3-snapshot-4",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,35 +15,35 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.27.6",
18
- "@instructure/console": "11.7.3-snapshot-2",
19
- "@instructure/shared-types": "11.7.3-snapshot-2",
20
- "@instructure/ui-a11y-content": "11.7.3-snapshot-2",
21
- "@instructure/ui-buttons": "11.7.3-snapshot-2",
22
- "@instructure/emotion": "11.7.3-snapshot-2",
23
- "@instructure/ui-color-utils": "11.7.3-snapshot-2",
24
- "@instructure/ui-dom-utils": "11.7.3-snapshot-2",
25
- "@instructure/ui-drilldown": "11.7.3-snapshot-2",
26
- "@instructure/ui-form-field": "11.7.3-snapshot-2",
27
- "@instructure/ui-heading": "11.7.3-snapshot-2",
28
- "@instructure/ui-icons": "11.7.3-snapshot-2",
29
- "@instructure/ui-pill": "11.7.3-snapshot-2",
30
- "@instructure/ui-popover": "11.7.3-snapshot-2",
31
- "@instructure/ui-text": "11.7.3-snapshot-2",
32
- "@instructure/ui-themes": "11.7.3-snapshot-2",
33
- "@instructure/ui-text-input": "11.7.3-snapshot-2",
34
- "@instructure/ui-tooltip": "11.7.3-snapshot-2",
35
- "@instructure/ui-react-utils": "11.7.3-snapshot-2",
36
- "@instructure/ui-utils": "11.7.3-snapshot-2",
37
- "@instructure/ui-view": "11.7.3-snapshot-2"
18
+ "@instructure/console": "11.7.3-snapshot-4",
19
+ "@instructure/emotion": "11.7.3-snapshot-4",
20
+ "@instructure/shared-types": "11.7.3-snapshot-4",
21
+ "@instructure/ui-a11y-content": "11.7.3-snapshot-4",
22
+ "@instructure/ui-buttons": "11.7.3-snapshot-4",
23
+ "@instructure/ui-color-utils": "11.7.3-snapshot-4",
24
+ "@instructure/ui-dom-utils": "11.7.3-snapshot-4",
25
+ "@instructure/ui-form-field": "11.7.3-snapshot-4",
26
+ "@instructure/ui-heading": "11.7.3-snapshot-4",
27
+ "@instructure/ui-icons": "11.7.3-snapshot-4",
28
+ "@instructure/ui-pill": "11.7.3-snapshot-4",
29
+ "@instructure/ui-drilldown": "11.7.3-snapshot-4",
30
+ "@instructure/ui-react-utils": "11.7.3-snapshot-4",
31
+ "@instructure/ui-popover": "11.7.3-snapshot-4",
32
+ "@instructure/ui-text-input": "11.7.3-snapshot-4",
33
+ "@instructure/ui-themes": "11.7.3-snapshot-4",
34
+ "@instructure/ui-text": "11.7.3-snapshot-4",
35
+ "@instructure/ui-tooltip": "11.7.3-snapshot-4",
36
+ "@instructure/ui-utils": "11.7.3-snapshot-4",
37
+ "@instructure/ui-view": "11.7.3-snapshot-4"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@testing-library/jest-dom": "^6.6.3",
41
41
  "@testing-library/react": "15.0.7",
42
42
  "@testing-library/user-event": "^14.6.1",
43
43
  "vitest": "^3.2.2",
44
- "@instructure/ui-axe-check": "11.7.3-snapshot-2",
45
- "@instructure/ui-babel-preset": "11.7.3-snapshot-2",
46
- "@instructure/ui-scripts": "11.7.3-snapshot-2"
44
+ "@instructure/ui-babel-preset": "11.7.3-snapshot-4",
45
+ "@instructure/ui-axe-check": "11.7.3-snapshot-4",
46
+ "@instructure/ui-scripts": "11.7.3-snapshot-4"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": ">=18 <=19"
package/src/ColorPicker/v1/index.tsx CHANGED
@@ -431,7 +431,14 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
431
431
  return event.preventDefault()
432
432
  }
433
433
 
434
- const newHex = `${this.state.hexCode}${toPaste}`
434
+ const input = event.target as HTMLInputElement
435
+ const currentHex = this.state.hexCode
436
+ const selectionStart = input.selectionStart ?? currentHex.length
437
+ const selectionEnd = input.selectionEnd ?? currentHex.length
438
+ const newHex =
439
+ currentHex.slice(0, selectionStart) +
440
+ toPaste +
441
+ currentHex.slice(selectionEnd)
435
442
  if (isValid(newHex)) {
436
443
  if (typeof this.props.onChange === 'function') {
437
444
  this.props.onChange(`#${newHex}`)
package/src/ColorPicker/v2/index.tsx CHANGED
@@ -431,7 +431,15 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
431
431
  return event.preventDefault()
432
432
  }
433
433
 
434
- const newHex = `${this.state.hexCode}${toPaste}`
434
+ const input = event.target as HTMLInputElement
435
+ const currentHex = this.state.hexCode
436
+ const selectionStart = input.selectionStart ?? currentHex.length
437
+ const selectionEnd = input.selectionEnd ?? currentHex.length
438
+ const newHex =
439
+ currentHex.slice(0, selectionStart) +
440
+ toPaste +
441
+ currentHex.slice(selectionEnd)
442
+
435
443
  if (isValid(newHex)) {
436
444
  if (typeof this.props.onChange === 'function') {
437
445
  this.props.onChange(`#${newHex}`)