@instructure/ui-color-picker 10.26.1-snapshot-2 → 10.26.1

package/lib/ColorContrast/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,20 @@ exports.allowedProps = void 0;
  * 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,13 +6,14 @@ 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, _class, _ColorIndicator;
+var _dec, _dec2, _class, _ColorIndicator;
 /*
  * The MIT License (MIT)
  *
@@ -41,7 +42,7 @@ var _dec, _class, _ColorIndicator;
 category: components
 ---
 **/
-let ColorIndicator = exports.ColorIndicator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ColorIndicator = class ColorIndicator extends _react.Component {
+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 {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -66,11 +67,10 @@ 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,
-      "data-cid": "ColorIndicator"
+      css: styles === null || styles === void 0 ? void 0 : styles.colorIndicator
     });
   }
-}, _ColorIndicator.displayName = "ColorIndicator", _ColorIndicator.allowedProps = _props.allowedProps, _ColorIndicator.componentId = 'ColorIndicator', _ColorIndicator.defaultProps = {
+}, _ColorIndicator.displayName = "ColorIndicator", _ColorIndicator.propTypes = _props.propTypes, _ColorIndicator.allowedProps = _props.allowedProps, _ColorIndicator.componentId = 'ColorIndicator', _ColorIndicator.defaultProps = {
   shape: 'circle'
-}, _ColorIndicator)) || _class);
+}, _ColorIndicator)) || _class) || _class);
 var _default = exports.default = ColorIndicator;

package/lib/ColorIndicator/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,9 @@ exports.allowedProps = void 0;
  * 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.allowedProps = _props.allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
+}, _ColorPalette.displayName = "ColorPalette", _ColorPalette.propTypes = _props.propTypes, _ColorPalette.allowedProps = _props.allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
 var _default = exports.default = ColorPalette;

package/lib/ColorMixer/ColorPalette/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,15 @@ exports.allowedProps = void 0;
  * 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.allowedProps = _props.allowedProps, _RGBAInput.componentId = 'ColorMixer.RGBAInput', _RGBAInput.defaultProps = {
+}, _RGBAInput.displayName = "RGBAInput", _RGBAInput.propTypes = _props.propTypes, _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,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,17 @@ exports.allowedProps = void 0;
  * 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.allowedProps = _props.allowedProps, _Slider.componentId = 'ColorMixer.Slider', _Slider.defaultProps = {
+}, _Slider.displayName = "Slider", _Slider.propTypes = _props.propTypes, _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,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,16 @@ exports.allowedProps = void 0;
  * 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,6 +8,7 @@ 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");
@@ -17,7 +18,7 @@ var _RGBAInput = _interopRequireDefault(require("./RGBAInput"));
 var _props = require("./props");
 var _styles = _interopRequireDefault(require("./styles"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _ColorMixer;
+var _dec, _dec2, _class, _ColorMixer;
 /*
  * The MIT License (MIT)
  *
@@ -46,7 +47,7 @@ var _dec, _class, _ColorMixer;
 category: components
 ---
 **/
-let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_ColorMixer = class ColorMixer extends _react.Component {
+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 {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -126,7 +127,6 @@ 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.allowedProps = _props.allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
+}, _ColorMixer.displayName = "ColorMixer", _ColorMixer.propTypes = _props.propTypes, _ColorMixer.allowedProps = _props.allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
   value: '#000',
   withAlpha: false,
   disabled: false
-}, _ColorMixer)) || _class);
+}, _ColorMixer)) || _class) || _class);
 var _default = exports.default = ColorMixer;

package/lib/ColorMixer/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,18 @@ exports.allowedProps = void 0;
  * 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,6 +9,7 @@ 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"));
@@ -29,7 +30,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
+var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
 /*
  * The MIT License (MIT)
  *
@@ -60,7 +61,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), _dec(_class = (_ColorPicker = class ColorPicker extends _react.Component {
+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 {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -454,7 +455,6 @@ 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.allowedProps = _props.allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
+}, _ColorPicker.displayName = "ColorPicker", _ColorPicker.propTypes = _props.propTypes, _ColorPicker.allowedProps = _props.allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
   disabled: false,
   withAlpha: false,
   width: '22.5rem',
   popoverMaxHeight: '100vh'
-}, _ColorPicker)) || _class);
+}, _ColorPicker)) || _class) || _class);
 var _default = exports.default = ColorPicker;

package/lib/ColorPicker/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,63 @@ exports.allowedProps = void 0;
  * 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,6 +8,7 @@ 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");
@@ -25,7 +26,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _ColorPreset, _IconAddLine;
+var _dec, _dec2, _class, _ColorPreset, _IconAddLine;
 /*
  * The MIT License (MIT)
  *
@@ -54,7 +55,7 @@ var _dec, _class, _ColorPreset, _IconAddLine;
 category: components
 ---
 **/
-let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ColorPreset = class ColorPreset extends _react.Component {
+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 {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -279,7 +280,6 @@ 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.allowedProps = _props.allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
+}, _ColorPreset.displayName = "ColorPreset", _ColorPreset.propTypes = _props.propTypes, _ColorPreset.allowedProps = _props.allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
   disabled: false
-}, _ColorPreset)) || _class);
+}, _ColorPreset)) || _class) || _class);
 var _default = exports.default = ColorPreset;

package/lib/ColorPreset/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,44 @@ exports.allowedProps = void 0;
  * 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-snapshot-2",
+  "version": "10.26.1",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,37 +24,39 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1-snapshot-2",
-    "@instructure/emotion": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-content": "10.26.1-snapshot-2",
-    "@instructure/ui-buttons": "10.26.1-snapshot-2",
-    "@instructure/ui-color-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-dom-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-drilldown": "10.26.1-snapshot-2",
-    "@instructure/ui-form-field": "10.26.1-snapshot-2",
-    "@instructure/ui-icons": "10.26.1-snapshot-2",
-    "@instructure/ui-pill": "10.26.1-snapshot-2",
-    "@instructure/ui-popover": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-text": "10.26.1-snapshot-2",
-    "@instructure/ui-text-input": "10.26.1-snapshot-2",
-    "@instructure/ui-themes": "10.26.1-snapshot-2",
-    "@instructure/ui-tooltip": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-view": "10.26.1-snapshot-2"
+    "@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"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.26.1-snapshot-2",
-    "@instructure/ui-scripts": "10.26.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.26.1",
+    "@instructure/ui-babel-preset": "10.26.1",
+    "@instructure/ui-scripts": "10.26.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/ColorContrast/index.tsx

@@ -25,6 +25,7 @@
 import { Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
 import { error } from '@instructure/console'
 import {
   contrastWithAlpha,
@@ -37,7 +38,7 @@ import { Pill } from '@instructure/ui-pill'
 
 import ColorIndicator from '../ColorIndicator'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ColorContrastProps, ColorContrastState } from './props'
 
 import generateStyle from './styles'
@@ -49,7 +50,9 @@ category: components
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
+@testable()
 class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static readonly componentId = 'ColorContrast'
 
@@ -208,7 +211,6 @@ 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">