@canonical/react-components 3.3.0 → 3.4.1

package/dist/components/Select/Select.d.ts

@@ -22,6 +22,10 @@ export type Props = PropsWithSpread<{
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
     /**
      * The id of the input.
      */
@@ -68,5 +72,5 @@ export type Props = PropsWithSpread<{
  *
  * Use the Select component to create a drop-down list.
  */
-declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
+declare const Select: ({ caution, className, error, help, helpClassName, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -38,6 +38,7 @@ const Select = _ref2 => {
     className,
     error,
     help,
+    helpClassName,
     id,
     label,
     labelClassName,
@@ -67,6 +68,7 @@ const Select = _ref2 => {
     error: error,
     forId: selectId,
     help: help,
+    helpClassName: helpClassName,
     helpId: helpId,
     isSelect: true,
     label: label,
@@ -82,7 +84,8 @@ const Select = _ref2 => {
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: selectId,
     onChange: evt => onChange && onChange(evt),
-    ref: selectRef
+    ref: selectRef,
+    required: required
   }, selectProps), generateOptions(options)));
 };
 var _default = exports.default = Select;

package/dist/components/Textarea/Textarea.js

@@ -108,7 +108,8 @@ const Textarea = _ref => {
       overflow: "hidden",
       boxSizing: "border-box",
       ...style
-    } || style
+    } || style,
+    required: required
   }, props, {
     value: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : innerValue
   })));

package/dist/esm/components/Select/Select.d.ts

@@ -22,6 +22,10 @@ export type Props = PropsWithSpread<{
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
     /**
      * The id of the input.
      */
@@ -68,5 +72,5 @@ export type Props = PropsWithSpread<{
  *
  * Use the Select component to create a drop-down list.
  */
-declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
+declare const Select: ({ caution, className, error, help, helpClassName, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
 export default Select;

package/dist/esm/components/Select/Select.js

@@ -1,5 +1,5 @@
 var _excluded = ["label", "value"],
-  _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
+  _excluded2 = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -34,6 +34,7 @@ var Select = _ref2 => {
       className,
       error,
       help,
+      helpClassName,
       id,
       label,
       labelClassName,
@@ -63,6 +64,7 @@ var Select = _ref2 => {
     error: error,
     forId: selectId,
     help: help,
+    helpClassName: helpClassName,
     helpId: helpId,
     isSelect: true,
     label: label,
@@ -78,7 +80,8 @@ var Select = _ref2 => {
     className: classNames("p-form-validation__input", className),
     id: selectId,
     onChange: evt => _onChange && _onChange(evt),
-    ref: selectRef
+    ref: selectRef,
+    required: required
   }, selectProps), generateOptions(options)));
 };
 export default Select;

package/dist/esm/components/Textarea/Textarea.js

@@ -107,7 +107,8 @@ var Textarea = _ref => {
       resize: "none",
       overflow: "hidden",
       boxSizing: "border-box"
-    }, style) || style
+    }, style) || style,
+    required: required
   }, props, {
     value: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : innerValue
   })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {