@instructure/ui-color-picker 10.26.1 → 11.0.1-snapshot-0

package/lib/ColorContrast/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,20 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  elementRef: _propTypes.default.func,
-  failureLabel: _propTypes.default.string.isRequired,
-  firstColor: _propTypes.default.string.isRequired,
-  firstColorLabel: _propTypes.default.string,
-  graphicsTextLabel: _propTypes.default.string.isRequired,
-  withoutColorPreview: _propTypes.default.bool,
-  label: _propTypes.default.string.isRequired,
-  largeTextLabel: _propTypes.default.string.isRequired,
-  normalTextLabel: _propTypes.default.string.isRequired,
-  secondColor: _propTypes.default.string.isRequired,
-  secondColorLabel: _propTypes.default.string,
-  successLabel: _propTypes.default.string.isRequired,
-  onContrastChange: _propTypes.default.func,
-  validationLevel: _propTypes.default.oneOf(['AA', 'AAA'])
-};
 const allowedProps = exports.allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];

package/lib/ColorIndicator/index.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColorIndicator = void 0;
 var _react = require("react");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _ColorIndicator;
+var _dec, _class, _ColorIndicator;
 /*
  * The MIT License (MIT)
  *
@@ -42,7 +41,7 @@ var _dec, _dec2, _class, _ColorIndicator;
 category: components
 ---
 **/
-let ColorIndicator = exports.ColorIndicator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ColorIndicator = class ColorIndicator extends _react.Component {
+let ColorIndicator = exports.ColorIndicator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ColorIndicator = class ColorIndicator extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -67,10 +66,11 @@ let ColorIndicator = exports.ColorIndicator = (_dec = (0, _emotion.withStyle)(_s
     return (0, _jsxRuntime.jsx)("div", {
       ...(0, _omitProps.omitProps)(this.props, ColorIndicator.allowedProps),
       ref: this.handleRef,
-      css: styles === null || styles === void 0 ? void 0 : styles.colorIndicator
+      css: styles === null || styles === void 0 ? void 0 : styles.colorIndicator,
+      "data-cid": "ColorIndicator"
     });
   }
-}, _ColorIndicator.displayName = "ColorIndicator", _ColorIndicator.propTypes = _props.propTypes, _ColorIndicator.allowedProps = _props.allowedProps, _ColorIndicator.componentId = 'ColorIndicator', _ColorIndicator.defaultProps = {
+}, _ColorIndicator.displayName = "ColorIndicator", _ColorIndicator.allowedProps = _props.allowedProps, _ColorIndicator.componentId = 'ColorIndicator', _ColorIndicator.defaultProps = {
   shape: 'circle'
-}, _ColorIndicator)) || _class) || _class);
+}, _ColorIndicator)) || _class);
 var _default = exports.default = ColorIndicator;

package/lib/ColorIndicator/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,9 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  color: _propTypes.default.string,
-  elementRef: _propTypes.default.func,
-  shape: _propTypes.default.oneOf(['circle', 'rectangle'])
-};
 const allowedProps = exports.allowedProps = ['color', 'elementRef', 'shape'];

package/lib/ColorMixer/ColorPalette/index.js

@@ -236,5 +236,5 @@ let ColorPalette = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
       })]
     });
   }
-}, _ColorPalette.displayName = "ColorPalette", _ColorPalette.propTypes = _props.propTypes, _ColorPalette.allowedProps = _props.allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
+}, _ColorPalette.displayName = "ColorPalette", _ColorPalette.allowedProps = _props.allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
 var _default = exports.default = ColorPalette;

package/lib/ColorMixer/ColorPalette/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,15 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  disabled: _propTypes.default.bool,
-  hue: _propTypes.default.number.isRequired,
-  color: _propTypes.default.object.isRequired,
-  width: _propTypes.default.number.isRequired,
-  height: _propTypes.default.number.isRequired,
-  indicatorRadius: _propTypes.default.number.isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  elementRef: _propTypes.default.func,
-  navigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired
-};
 const allowedProps = exports.allowedProps = ['disabled', 'hue', 'color', 'width', 'height', 'indicatorRadius', 'onChange', 'elementRef', 'navigationExplanationScreenReaderLabel'];

package/lib/ColorMixer/RGBAInput/index.js

@@ -150,7 +150,7 @@ let RGBAInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       })]
     });
   }
-}, _RGBAInput.displayName = "RGBAInput", _RGBAInput.propTypes = _props.propTypes, _RGBAInput.allowedProps = _props.allowedProps, _RGBAInput.componentId = 'ColorMixer.RGBAInput', _RGBAInput.defaultProps = {
+}, _RGBAInput.displayName = "RGBAInput", _RGBAInput.allowedProps = _props.allowedProps, _RGBAInput.componentId = 'ColorMixer.RGBAInput', _RGBAInput.defaultProps = {
   withAlpha: false
 }, _RGBAInput)) || _class);
 var _default = exports.default = RGBAInput;

package/lib/ColorMixer/RGBAInput/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,17 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  disabled: _propTypes.default.bool,
-  label: _propTypes.default.string,
-  width: _propTypes.default.number.isRequired,
-  value: _propTypes.default.object.isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  withAlpha: _propTypes.default.bool,
-  rgbRedInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  rgbGreenInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  rgbBlueInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  rgbAlphaInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  elementRef: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['disabled', 'label', 'width', 'value', 'onChange', 'withAlpha', 'rgbRedInputScreenReaderLabel', 'rgbGreenInputScreenReaderLabel', 'rgbBlueInputScreenReaderLabel', 'rgbAlphaInputScreenReaderLabel', 'elementRef'];

package/lib/ColorMixer/Slider/index.js

@@ -194,7 +194,7 @@ let Slider = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       })]
     });
   }
-}, _Slider.displayName = "Slider", _Slider.propTypes = _props.propTypes, _Slider.allowedProps = _props.allowedProps, _Slider.componentId = 'ColorMixer.Slider', _Slider.defaultProps = {
+}, _Slider.displayName = "Slider", _Slider.allowedProps = _props.allowedProps, _Slider.componentId = 'ColorMixer.Slider', _Slider.defaultProps = {
   isColorSlider: false
 }, _Slider)) || _class);
 var _default = exports.default = Slider;

package/lib/ColorMixer/Slider/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,16 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  isColorSlider: _propTypes.default.bool,
-  onChange: _propTypes.default.func.isRequired,
-  width: _propTypes.default.number.isRequired,
-  value: _propTypes.default.number.isRequired,
-  minValue: _propTypes.default.number.isRequired,
-  maxValue: _propTypes.default.number.isRequired,
-  indicatorRadius: _propTypes.default.number.isRequired,
-  height: _propTypes.default.number.isRequired,
-  elementRef: _propTypes.default.func,
-  navigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired
-};
 const allowedProps = exports.allowedProps = ['isColorSlider', 'onChange', 'width', 'value', 'minValue', 'maxValue', 'indicatorRadius', 'height', 'elementRef', 'navigationExplanationScreenReaderLabel'];

package/lib/ColorMixer/index.js

@@ -8,7 +8,6 @@ exports.default = exports.ColorMixer = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
 var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
 var _console = require("@instructure/console");
@@ -18,7 +17,7 @@ var _RGBAInput = _interopRequireDefault(require("./RGBAInput"));
 var _props = require("./props");
 var _styles = _interopRequireDefault(require("./styles"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _ColorMixer;
+var _dec, _class, _ColorMixer;
 /*
  * The MIT License (MIT)
  *
@@ -47,7 +46,7 @@ var _dec, _dec2, _class, _ColorMixer;
 category: components
 ---
 **/
-let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ColorMixer = class ColorMixer extends _react.Component {
+let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_ColorMixer = class ColorMixer extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -127,6 +126,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       "aria-disabled": disabled,
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorMixer,
+      "data-cid": "ColorMixer",
       children: [(0, _jsxRuntime.jsxs)("span", {
         css: styles === null || styles === void 0 ? void 0 : styles.sliderAndPaletteContainer,
         "aria-label": `${_uiColorUtils.default.colorToHex8({
@@ -214,9 +214,9 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       })]
     });
   }
-}, _ColorMixer.displayName = "ColorMixer", _ColorMixer.propTypes = _props.propTypes, _ColorMixer.allowedProps = _props.allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
+}, _ColorMixer.displayName = "ColorMixer", _ColorMixer.allowedProps = _props.allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
   value: '#000',
   withAlpha: false,
   disabled: false
-}, _ColorMixer)) || _class) || _class);
+}, _ColorMixer)) || _class);
 var _default = exports.default = ColorMixer;

package/lib/ColorMixer/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,18 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  disabled: _propTypes.default.bool,
-  elementRef: _propTypes.default.func,
-  withAlpha: _propTypes.default.bool,
-  value: _propTypes.default.string,
-  onChange: _propTypes.default.func.isRequired,
-  rgbRedInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  rgbGreenInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  rgbBlueInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  rgbAlphaInputScreenReaderLabel: _propTypes.default.string.isRequired,
-  colorSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
-  alphaSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
-  colorPaletteNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired
-};
 const allowedProps = exports.allowedProps = ['disabled', 'elementRef', 'value', 'onChange', 'withAlpha', 'rgbRedInputScreenReaderLabel', 'rgbGreenInputScreenReaderLabel', 'rgbBlueInputScreenReaderLabel', 'rgbAlphaInputScreenReaderLabel', 'colorSliderNavigationExplanationScreenReaderLabel', 'alphaSliderNavigationExplanationScreenReaderLabel', 'colorPaletteNavigationExplanationScreenReaderLabel'];

package/lib/ColorPicker/index.js

@@ -9,7 +9,6 @@ var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _console = require("@instructure/console");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
 var _contrast = require("@instructure/ui-color-utils/lib/contrast.js");
 var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
@@ -30,7 +29,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
+var _dec, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
 /*
  * The MIT License (MIT)
  *
@@ -61,7 +60,7 @@ const acceptedCharactersForHEX = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '
 category: components
 ---
 **/
-let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ColorPicker = class ColorPicker extends _react.Component {
+let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ColorPicker = class ColorPicker extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -455,6 +454,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       ...(0, _omitProps.omitProps)(this.props, ColorPicker.allowedProps),
       css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.colorPicker,
       ref: this.handleRef,
+      "data-cid": "ColorPicker",
       children: [(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
         id: id,
         isRequired: isRequired,
@@ -487,10 +487,10 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       })]
     });
   }
-}, _ColorPicker.displayName = "ColorPicker", _ColorPicker.propTypes = _props.propTypes, _ColorPicker.allowedProps = _props.allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
+}, _ColorPicker.displayName = "ColorPicker", _ColorPicker.allowedProps = _props.allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
   disabled: false,
   withAlpha: false,
   width: '22.5rem',
   popoverMaxHeight: '100vh'
-}, _ColorPicker)) || _class) || _class);
+}, _ColorPicker)) || _class);
 var _default = exports.default = ColorPicker;

package/lib/ColorPicker/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,63 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  checkContrast: _propTypes.default.shape({
-    isStrict: _propTypes.default.bool,
-    contrastStrength: _propTypes.default.oneOf(['min', 'mid', 'max']),
-    contrastAgainst: _propTypes.default.string,
-    renderContrastSuccessMessage: _propTypes.default.func,
-    renderContrastErrorMessage: _propTypes.default.func
-  }),
-  colorMixerSettings: _propTypes.default.shape({
-    popoverAddButtonLabel: _propTypes.default.string.isRequired,
-    popoverCloseButtonLabel: _propTypes.default.string.isRequired,
-    colorMixer: _propTypes.default.shape({
-      withAlpha: _propTypes.default.bool,
-      rgbRedInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      rgbGreenInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      rgbBlueInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      rgbAlphaInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      colorSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
-      alphaSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
-      colorPaletteNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired
-    }),
-    colorPreset: _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      label: _propTypes.default.string.isRequired
-    }),
-    colorContrast: _propTypes.default.shape({
-      firstColor: _propTypes.default.string.isRequired,
-      label: _propTypes.default.string.isRequired,
-      successLabel: _propTypes.default.string.isRequired,
-      failureLabel: _propTypes.default.string.isRequired,
-      normalTextLabel: _propTypes.default.string.isRequired,
-      largeTextLabel: _propTypes.default.string.isRequired,
-      graphicsTextLabel: _propTypes.default.string.isRequired,
-      firstColorLabel: _propTypes.default.string.isRequired,
-      secondColorLabel: _propTypes.default.string.isRequired,
-      onContrastChange: _propTypes.default.func
-    })
-  }),
-  children: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  elementRef: _propTypes.default.func,
-  isRequired: _propTypes.default.bool,
-  label: _propTypes.default.node.isRequired,
-  onChange: _propTypes.default.func,
-  placeholderText: _propTypes.default.string,
-  popoverScreenReaderLabel: _propTypes.default.string,
-  popoverButtonScreenReaderLabel: _propTypes.default.string,
-  popoverMaxHeight: _propTypes.default.string,
-  renderInvalidColorMessage: _propTypes.default.func,
-  renderIsRequiredMessage: _propTypes.default.func,
-  renderMessages: _propTypes.default.func,
-  tooltip: _propTypes.default.node,
-  id: _propTypes.default.string,
-  value: _propTypes.default.string,
-  width: _propTypes.default.string,
-  withAlpha: _propTypes.default.bool,
-  margin: _propTypes.default.string,
-  inputRef: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha', 'margin', 'inputRef'];

package/lib/ColorPreset/index.js

@@ -8,7 +8,6 @@ exports.default = exports.ColorPreset = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
 var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
 var _Button = require("@instructure/ui-buttons/lib/Button");
@@ -26,7 +25,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _ColorPreset, _IconAddLine;
+var _dec, _class, _ColorPreset, _IconAddLine;
 /*
  * The MIT License (MIT)
  *
@@ -55,7 +54,7 @@ var _dec, _dec2, _class, _ColorPreset, _IconAddLine;
 category: components
 ---
 **/
-let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ColorPreset = class ColorPreset extends _react.Component {
+let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ColorPreset = class ColorPreset extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -280,6 +279,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       ...(0, _omitProps.omitProps)(this.props, ColorPreset.allowedProps),
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorPreset,
+      "data-cid": "ColorPreset",
       children: [label && (0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.label,
         children: (0, _jsxRuntime.jsx)(_Text.Text, {
@@ -293,7 +293,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       })]
     });
   }
-}, _ColorPreset.displayName = "ColorPreset", _ColorPreset.propTypes = _props.propTypes, _ColorPreset.allowedProps = _props.allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
+}, _ColorPreset.displayName = "ColorPreset", _ColorPreset.allowedProps = _props.allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
   disabled: false
-}, _ColorPreset)) || _class) || _class);
+}, _ColorPreset)) || _class);
 var _default = exports.default = ColorPreset;

package/lib/ColorPreset/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,44 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  colors: _propTypes.default.array.isRequired,
-  onSelect: _propTypes.default.func.isRequired,
-  selected: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  elementRef: _propTypes.default.func,
-  label: _propTypes.default.string,
-  popoverScreenReaderLabel: _propTypes.default.string,
-  colorScreenReaderLabel: _propTypes.default.func,
-  colorMixerSettings: _propTypes.default.shape({
-    addNewPresetButtonScreenReaderLabel: _propTypes.default.string.isRequired,
-    selectColorLabel: _propTypes.default.string.isRequired,
-    removeColorLabel: _propTypes.default.string.isRequired,
-    onPresetChange: _propTypes.default.func,
-    popoverAddButtonLabel: _propTypes.default.string.isRequired,
-    popoverCloseButtonLabel: _propTypes.default.string.isRequired,
-    maxHeight: _propTypes.default.string,
-    colorMixer: _propTypes.default.shape({
-      withAlpha: _propTypes.default.bool,
-      rgbRedInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      rgbGreenInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      rgbBlueInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      rgbAlphaInputScreenReaderLabel: _propTypes.default.string.isRequired,
-      colorSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
-      alphaSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
-      colorPaletteNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired
-    }).isRequired,
-    colorContrast: _propTypes.default.shape({
-      firstColor: _propTypes.default.string.isRequired,
-      label: _propTypes.default.string.isRequired,
-      successLabel: _propTypes.default.string.isRequired,
-      failureLabel: _propTypes.default.string.isRequired,
-      normalTextLabel: _propTypes.default.string.isRequired,
-      largeTextLabel: _propTypes.default.string.isRequired,
-      graphicsTextLabel: _propTypes.default.string.isRequired,
-      firstColorLabel: _propTypes.default.string.isRequired,
-      secondColorLabel: _propTypes.default.string.isRequired
-    })
-  })
-};
 const allowedProps = exports.allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected', 'colorScreenReaderLabel'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "10.26.1",
+  "version": "11.0.1-snapshot-0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,39 +24,37 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-a11y-content": "10.26.1",
-    "@instructure/ui-buttons": "10.26.1",
-    "@instructure/ui-color-utils": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-drilldown": "10.26.1",
-    "@instructure/ui-form-field": "10.26.1",
-    "@instructure/ui-icons": "10.26.1",
-    "@instructure/ui-pill": "10.26.1",
-    "@instructure/ui-popover": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-text": "10.26.1",
-    "@instructure/ui-text-input": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
-    "@instructure/ui-tooltip": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "prop-types": "^15.8.1"
+    "@instructure/console": "11.0.1-snapshot-0",
+    "@instructure/emotion": "11.0.1-snapshot-0",
+    "@instructure/shared-types": "11.0.1-snapshot-0",
+    "@instructure/ui-a11y-content": "11.0.1-snapshot-0",
+    "@instructure/ui-buttons": "11.0.1-snapshot-0",
+    "@instructure/ui-color-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-dom-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-drilldown": "11.0.1-snapshot-0",
+    "@instructure/ui-form-field": "11.0.1-snapshot-0",
+    "@instructure/ui-icons": "11.0.1-snapshot-0",
+    "@instructure/ui-pill": "11.0.1-snapshot-0",
+    "@instructure/ui-popover": "11.0.1-snapshot-0",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-text": "11.0.1-snapshot-0",
+    "@instructure/ui-text-input": "11.0.1-snapshot-0",
+    "@instructure/ui-themes": "11.0.1-snapshot-0",
+    "@instructure/ui-tooltip": "11.0.1-snapshot-0",
+    "@instructure/ui-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-view": "11.0.1-snapshot-0"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-scripts": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-0",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
+    "@instructure/ui-scripts": "11.0.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/ColorContrast/index.tsx

@@ -25,7 +25,6 @@
 import { Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
-import { testable } from '@instructure/ui-testable'
 import { error } from '@instructure/console'
 import {
   contrastWithAlpha,
@@ -38,7 +37,7 @@ import { Pill } from '@instructure/ui-pill'
 
 import ColorIndicator from '../ColorIndicator'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ColorContrastProps, ColorContrastState } from './props'
 
 import generateStyle from './styles'
@@ -50,9 +49,7 @@ category: components
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static readonly componentId = 'ColorContrast'
 
@@ -211,6 +208,7 @@ class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
         {...omitProps(this.props, ColorContrast.allowedProps)}
         ref={this.handleRef}
         css={styles?.colorContrast}
+        data-cid="ColorContrast"
       >
         <div css={styles?.label}>
           <Text weight="bold" as="div">