@canonical/react-components 4.3.1 → 4.4.1

package/dist/components/Field/Field.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
+import { ColSize } from "../Col";
 import type { ClassName } from "../../types";
 /**
  * The props for the Field component.
@@ -33,6 +34,10 @@ export type Props = {
      * Optional class(es) to pass to the help text element.
      */
     helpClassName?: string;
+    /**
+     * Whether the help should appear after the label (by default it will appear below the field).
+     */
+    helpAfterLabel?: boolean;
     /**
      * An id to give to the help element.
      */
@@ -65,6 +70,14 @@ export type Props = {
      * Whether the form field should have a stacked appearance.
      */
     stacked?: boolean;
+    /**
+     * The number of columns the field should have when stacked.
+     */
+    stackedFieldColumns?: ColSize;
+    /**
+     * The number of columns the label should have when stacked.
+     */
+    stackedLabelColumns?: ColSize;
     /**
      * The content for success validation.
      */
@@ -74,5 +87,5 @@ export type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, ...props }: Props) => React.JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -8,7 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _Label = _interopRequireDefault(require("../Label"));
 var _Col = _interopRequireDefault(require("../Col"));
-const _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "success", "validationId"];
+const _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -40,18 +40,18 @@ const generateError = (error, caution, success, validationId) => {
     id: validationId
   }, error || caution || success);
 };
-const generateLabel = (forId, required, label, labelClassName, stacked) => {
+const generateLabel = (forId, required, label, labelClassName, stacked, stackedLabelColumns, help, helpAfterLabel) => {
   if (!label) {
     return null;
   }
-  const labelNode = /*#__PURE__*/_react.default.createElement(_Label.default, {
+  const labelNode = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Label.default, {
     className: labelClassName,
     forId: forId,
     required: required
-  }, label);
+  }, label), helpAfterLabel ? help : null);
   if (stacked) {
     return /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 4
+      size: stackedLabelColumns
     }, labelNode);
   }
   return labelNode;
@@ -63,24 +63,17 @@ const generateContent = _ref2 => {
     labelFirst,
     labelNode,
     help,
-    helpClassName,
     error,
     caution,
     success,
     validationId,
-    helpId,
-    isTickElement
+    helpAfterLabel
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form__control u-clearfix"
   }, isSelect ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-validation__select-wrapper"
-  }, children) : children, !labelFirst && labelNode, generateHelpText({
-    helpId,
-    help,
-    helpClassName,
-    isTickElement
-  }), generateError(error, caution, success, validationId));
+  }, children) : children, !labelFirst && labelNode, helpAfterLabel ? null : help, generateError(error, caution, success, validationId));
 };
 const Field = _ref3 => {
   let {
@@ -91,6 +84,7 @@ const Field = _ref3 => {
       forId,
       help,
       helpClassName,
+      helpAfterLabel,
       helpId,
       isSelect,
       isTickElement,
@@ -99,24 +93,30 @@ const Field = _ref3 => {
       labelFirst = true,
       required,
       stacked,
+      stackedFieldColumns = 8,
+      stackedLabelColumns = 4,
       success,
       validationId
     } = _ref3,
     props = _objectWithoutProperties(_ref3, _excluded);
-  const labelNode = generateLabel(forId, required, label, labelClassName, stacked);
+  const helpNode = generateHelpText({
+    helpId,
+    help,
+    helpClassName,
+    isTickElement
+  });
+  const labelNode = generateLabel(forId, required, label, labelClassName, stacked, stackedLabelColumns, helpNode, helpAfterLabel);
   const content = generateContent({
     isSelect,
-    isTickElement,
     children,
     labelFirst,
     labelNode,
-    help,
-    helpClassName,
+    help: helpNode,
     error,
     caution,
     success,
     validationId,
-    helpId
+    helpAfterLabel
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
@@ -126,7 +126,7 @@ const Field = _ref3 => {
       row: stacked
     })
   }, props), labelFirst && labelNode, stacked ? /*#__PURE__*/_react.default.createElement(_Col.default, {
-    size: 8
+    size: stackedFieldColumns
   }, content) : content);
 };
 var _default = exports.default = Field;

package/dist/components/FormikField/FormikField.d.ts

@@ -22,5 +22,5 @@ export type Props<C extends ElementType | ComponentType = typeof Input> = {
  * makes use of Formik's context to automatically map errors, values, states
  * etc. onto the provided field.
  */
-declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => React.JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => React.JSX.Element;
+declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpAfterLabel, helpClassName, id, label, labelClassName, required, stacked, stackedFieldColumns, stackedLabelColumns, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => React.JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => React.JSX.Element;
 export default FormikField;

package/dist/components/Input/Input.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+import { ColSize } from "../Col";
 /**
  * The props for the Input component.
  */
@@ -29,6 +30,10 @@ export type Props = PropsWithSpread<{
      * The id of the input.
      */
     id?: string;
+    /**
+     * Whether the help should appear after the label (by default it will appear below the field).
+     */
+    helpAfterLabel?: boolean;
     /**
      * The label for the field.
      */
@@ -45,6 +50,14 @@ export type Props = PropsWithSpread<{
      * Whether the form field should have a stacked appearance.
      */
     stacked?: boolean;
+    /**
+     * The number of columns the field should have when stacked.
+     */
+    stackedFieldColumns?: ColSize;
+    /**
+     * The number of columns the label should have when stacked.
+     */
+    stackedLabelColumns?: ColSize;
     /**
      * The content for success validation.
      */
@@ -67,5 +80,5 @@ export type Props = PropsWithSpread<{
  *
  * An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
  */
-declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => React.JSX.Element;
+declare const Input: ({ caution, className, error, help, helpAfterLabel, helpClassName, id, label, labelClassName, required, stacked, stackedFieldColumns, stackedLabelColumns, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
 var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
 var _RadioInput = _interopRequireDefault(require("../RadioInput"));
-const _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "takeFocusDelay", "type", "wrapperClassName"];
+const _excluded = ["caution", "className", "error", "help", "helpAfterLabel", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "takeFocus", "takeFocusDelay", "type", "wrapperClassName"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -35,12 +35,15 @@ const Input = _ref => {
       className,
       error,
       help,
+      helpAfterLabel,
       helpClassName,
       id,
       label,
       labelClassName,
       required,
       stacked,
+      stackedFieldColumns,
+      stackedLabelColumns,
       success,
       takeFocus,
       takeFocusDelay,
@@ -96,6 +99,7 @@ const Input = _ref => {
     error: error,
     forId: inputId,
     help: help,
+    helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
     isTickElement: type === "checkbox" || type === "radio",
@@ -103,6 +107,8 @@ const Input = _ref => {
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
+    stackedFieldColumns: stackedFieldColumns,
+    stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
   }, input);

package/dist/components/SearchBox/SearchBox.js

@@ -41,7 +41,10 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const internalRef = (0, _react.useRef)(null);
+  const [internalValue, setInternalValue] = (0, _react.useState)(value !== null && value !== void 0 ? value : "");
+  const hasValue = externallyControlled ? Boolean(value) : Boolean(internalValue);
   const resetInput = () => {
+    setInternalValue("");
     onChange === null || onChange === void 0 || onChange("");
     onClear === null || onClear === void 0 || onClear();
     if (internalRef.current) {
@@ -71,7 +74,10 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     disabled: disabled,
     id: id,
     name: name,
-    onChange: evt => onChange === null || onChange === void 0 ? void 0 : onChange(evt.target.value),
+    onChange: evt => {
+      setInternalValue(evt.target.value);
+      onChange === null || onChange === void 0 || onChange(evt.target.value);
+    },
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     ref: input => {
@@ -86,7 +92,7 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     type: "search",
     defaultValue: externallyControlled ? undefined : value,
     value: externallyControlled ? value : undefined
-  }, props)), value && /*#__PURE__*/_react.default.createElement("button", {
+  }, props)), hasValue && /*#__PURE__*/_react.default.createElement("button", {
     className: "p-search-box__reset",
     disabled: disabled,
     onClick: resetInput,

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

@@ -1,6 +1,7 @@
 import React from "react";
 import type { ChangeEventHandler, ReactNode, OptionHTMLAttributes, SelectHTMLAttributes } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+import { ColSize } from "../Col";
 type Option = OptionHTMLAttributes<HTMLOptionElement>;
 /**
  * The props for the Select component.
@@ -22,6 +23,10 @@ export type Props = PropsWithSpread<{
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Whether the help should appear after the label (by default it will appear below the field).
+     */
+    helpAfterLabel?: boolean;
     /**
      * Optional class(es) to pass to the help text element.
      */
@@ -54,6 +59,14 @@ export type Props = PropsWithSpread<{
      * Whether the form field should have a stacked appearance.
      */
     stacked?: boolean;
+    /**
+     * The number of columns the field should have when stacked.
+     */
+    stackedFieldColumns?: ColSize;
+    /**
+     * The number of columns the label should have when stacked.
+     */
+    stackedLabelColumns?: ColSize;
     /**
      * The content for success validation.
      */
@@ -72,5 +85,5 @@ export type Props = PropsWithSpread<{
  *
  * Use the Select component to create a drop-down list.
  */
-declare const Select: ({ caution, className, error, help, helpClassName, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
+declare const Select: ({ caution, className, error, help, helpAfterLabel, helpClassName, id, label, labelClassName, onChange, options, required, stacked, stackedFieldColumns, stackedLabelColumns, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -8,7 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
 const _excluded = ["label", "value"],
-  _excluded2 = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
+  _excluded2 = ["caution", "className", "error", "help", "helpAfterLabel", "helpClassName", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "takeFocus", "wrapperClassName"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -41,6 +41,7 @@ const Select = _ref2 => {
       className,
       error,
       help,
+      helpAfterLabel,
       helpClassName,
       id,
       label,
@@ -49,6 +50,8 @@ const Select = _ref2 => {
       options,
       required,
       stacked,
+      stackedFieldColumns,
+      stackedLabelColumns,
       success,
       takeFocus,
       wrapperClassName
@@ -71,6 +74,7 @@ const Select = _ref2 => {
     error: error,
     forId: selectId,
     help: help,
+    helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
     isSelect: true,
@@ -78,6 +82,8 @@ const Select = _ref2 => {
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
+    stackedFieldColumns: stackedFieldColumns,
+    stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("select", _extends({

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
+import { ColSize } from "../Col";
 import type { ClassName } from "../../types";
 /**
  * The props for the Field component.
@@ -33,6 +34,10 @@ export type Props = {
      * Optional class(es) to pass to the help text element.
      */
     helpClassName?: string;
+    /**
+     * Whether the help should appear after the label (by default it will appear below the field).
+     */
+    helpAfterLabel?: boolean;
     /**
      * An id to give to the help element.
      */
@@ -65,6 +70,14 @@ export type Props = {
      * Whether the form field should have a stacked appearance.
      */
     stacked?: boolean;
+    /**
+     * The number of columns the field should have when stacked.
+     */
+    stackedFieldColumns?: ColSize;
+    /**
+     * The number of columns the label should have when stacked.
+     */
+    stackedLabelColumns?: ColSize;
     /**
      * The content for success validation.
      */
@@ -74,5 +87,5 @@ export type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, ...props }: Props) => React.JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
 export default Field;

package/dist/esm/components/Field/Field.js

@@ -1,4 +1,4 @@
-var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "success", "validationId"];
+var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -34,18 +34,18 @@ var generateError = (error, caution, success, validationId) => {
     id: validationId
   }, error || caution || success);
 };
-var generateLabel = (forId, required, label, labelClassName, stacked) => {
+var generateLabel = (forId, required, label, labelClassName, stacked, stackedLabelColumns, help, helpAfterLabel) => {
   if (!label) {
     return null;
   }
-  var labelNode = /*#__PURE__*/React.createElement(Label, {
+  var labelNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
     className: labelClassName,
     forId: forId,
     required: required
-  }, label);
+  }, label), helpAfterLabel ? help : null);
   if (stacked) {
     return /*#__PURE__*/React.createElement(Col, {
-      size: 4
+      size: stackedLabelColumns
     }, labelNode);
   }
   return labelNode;
@@ -57,24 +57,17 @@ var generateContent = _ref2 => {
     labelFirst,
     labelNode,
     help,
-    helpClassName,
     error,
     caution,
     success,
     validationId,
-    helpId,
-    isTickElement
+    helpAfterLabel
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     className: "p-form__control u-clearfix"
   }, isSelect ? /*#__PURE__*/React.createElement("div", {
     className: "p-form-validation__select-wrapper"
-  }, children) : children, !labelFirst && labelNode, generateHelpText({
-    helpId,
-    help,
-    helpClassName,
-    isTickElement
-  }), generateError(error, caution, success, validationId));
+  }, children) : children, !labelFirst && labelNode, helpAfterLabel ? null : help, generateError(error, caution, success, validationId));
 };
 var Field = _ref3 => {
   var {
@@ -85,6 +78,7 @@ var Field = _ref3 => {
       forId,
       help,
       helpClassName,
+      helpAfterLabel,
       helpId,
       isSelect,
       isTickElement,
@@ -93,24 +87,30 @@ var Field = _ref3 => {
       labelFirst = true,
       required,
       stacked,
+      stackedFieldColumns = 8,
+      stackedLabelColumns = 4,
       success,
       validationId
     } = _ref3,
     props = _objectWithoutProperties(_ref3, _excluded);
-  var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
+  var helpNode = generateHelpText({
+    helpId,
+    help,
+    helpClassName,
+    isTickElement
+  });
+  var labelNode = generateLabel(forId, required, label, labelClassName, stacked, stackedLabelColumns, helpNode, helpAfterLabel);
   var content = generateContent({
     isSelect,
-    isTickElement,
     children,
     labelFirst,
     labelNode,
-    help,
-    helpClassName,
+    help: helpNode,
     error,
     caution,
     success,
     validationId,
-    helpId
+    helpAfterLabel
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames("p-form__group", "p-form-validation", className, {
@@ -120,7 +120,7 @@ var Field = _ref3 => {
       row: stacked
     })
   }, props), labelFirst && labelNode, stacked ? /*#__PURE__*/React.createElement(Col, {
-    size: 8
+    size: stackedFieldColumns
   }, content) : content);
 };
 export default Field;

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

@@ -22,5 +22,5 @@ export type Props<C extends ElementType | ComponentType = typeof Input> = {
  * makes use of Formik's context to automatically map errors, values, states
  * etc. onto the provided field.
  */
-declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => React.JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => React.JSX.Element;
+declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpAfterLabel, helpClassName, id, label, labelClassName, required, stacked, stackedFieldColumns, stackedLabelColumns, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => React.JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => React.JSX.Element;
 export default FormikField;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+import { ColSize } from "../Col";
 /**
  * The props for the Input component.
  */
@@ -29,6 +30,10 @@ export type Props = PropsWithSpread<{
      * The id of the input.
      */
     id?: string;
+    /**
+     * Whether the help should appear after the label (by default it will appear below the field).
+     */
+    helpAfterLabel?: boolean;
     /**
      * The label for the field.
      */
@@ -45,6 +50,14 @@ export type Props = PropsWithSpread<{
      * Whether the form field should have a stacked appearance.
      */
     stacked?: boolean;
+    /**
+     * The number of columns the field should have when stacked.
+     */
+    stackedFieldColumns?: ColSize;
+    /**
+     * The number of columns the label should have when stacked.
+     */
+    stackedLabelColumns?: ColSize;
     /**
      * The content for success validation.
      */
@@ -67,5 +80,5 @@ export type Props = PropsWithSpread<{
  *
  * An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
  */
-declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => React.JSX.Element;
+declare const Input: ({ caution, className, error, help, helpAfterLabel, helpClassName, id, label, labelClassName, required, stacked, stackedFieldColumns, stackedLabelColumns, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => React.JSX.Element;
 export default Input;

package/dist/esm/components/Input/Input.js

@@ -1,4 +1,4 @@
-var _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "takeFocusDelay", "type", "wrapperClassName"];
+var _excluded = ["caution", "className", "error", "help", "helpAfterLabel", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "takeFocus", "takeFocusDelay", "type", "wrapperClassName"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -28,12 +28,15 @@ var Input = _ref => {
       className,
       error,
       help,
+      helpAfterLabel,
       helpClassName,
       id,
       label,
       labelClassName,
       required,
       stacked,
+      stackedFieldColumns,
+      stackedLabelColumns,
       success,
       takeFocus,
       takeFocusDelay,
@@ -89,6 +92,7 @@ var Input = _ref => {
     error: error,
     forId: inputId,
     help: help,
+    helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
     isTickElement: type === "checkbox" || type === "radio",
@@ -96,6 +100,8 @@ var Input = _ref => {
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
+    stackedFieldColumns: stackedFieldColumns,
+    stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
   }, input);

package/dist/esm/components/SearchBox/SearchBox.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import classNames from "classnames";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import Icon from "../Icon";
 export var Label = /*#__PURE__*/function (Label) {
   Label["Clear"] = "Clear search field";
@@ -33,7 +33,10 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   var internalRef = useRef(null);
+  var [internalValue, setInternalValue] = useState(value !== null && value !== void 0 ? value : "");
+  var hasValue = externallyControlled ? Boolean(value) : Boolean(internalValue);
   var resetInput = () => {
+    setInternalValue("");
     _onChange === null || _onChange === void 0 || _onChange("");
     onClear === null || onClear === void 0 || onClear();
     if (internalRef.current) {
@@ -63,7 +66,10 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     disabled: disabled,
     id: id,
     name: name,
-    onChange: evt => _onChange === null || _onChange === void 0 ? void 0 : _onChange(evt.target.value),
+    onChange: evt => {
+      setInternalValue(evt.target.value);
+      _onChange === null || _onChange === void 0 || _onChange(evt.target.value);
+    },
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     ref: input => {
@@ -78,7 +84,7 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     type: "search",
     defaultValue: externallyControlled ? undefined : value,
     value: externallyControlled ? value : undefined
-  }, props)), value && /*#__PURE__*/React.createElement("button", {
+  }, props)), hasValue && /*#__PURE__*/React.createElement("button", {
     className: "p-search-box__reset",
     disabled: disabled,
     onClick: resetInput,

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

@@ -1,6 +1,7 @@
 import React from "react";
 import type { ChangeEventHandler, ReactNode, OptionHTMLAttributes, SelectHTMLAttributes } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+import { ColSize } from "../Col";
 type Option = OptionHTMLAttributes<HTMLOptionElement>;
 /**
  * The props for the Select component.
@@ -22,6 +23,10 @@ export type Props = PropsWithSpread<{
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Whether the help should appear after the label (by default it will appear below the field).
+     */
+    helpAfterLabel?: boolean;
     /**
      * Optional class(es) to pass to the help text element.
      */
@@ -54,6 +59,14 @@ export type Props = PropsWithSpread<{
      * Whether the form field should have a stacked appearance.
      */
     stacked?: boolean;
+    /**
+     * The number of columns the field should have when stacked.
+     */
+    stackedFieldColumns?: ColSize;
+    /**
+     * The number of columns the label should have when stacked.
+     */
+    stackedLabelColumns?: ColSize;
     /**
      * The content for success validation.
      */
@@ -72,5 +85,5 @@ export type Props = PropsWithSpread<{
  *
  * Use the Select component to create a drop-down list.
  */
-declare const Select: ({ caution, className, error, help, helpClassName, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
+declare const Select: ({ caution, className, error, help, helpAfterLabel, helpClassName, id, label, labelClassName, onChange, options, required, stacked, stackedFieldColumns, stackedLabelColumns, 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", "helpClassName", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
+  _excluded2 = ["caution", "className", "error", "help", "helpAfterLabel", "helpClassName", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "takeFocus", "wrapperClassName"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -34,6 +34,7 @@ var Select = _ref2 => {
       className,
       error,
       help,
+      helpAfterLabel,
       helpClassName,
       id,
       label,
@@ -42,6 +43,8 @@ var Select = _ref2 => {
       options,
       required,
       stacked,
+      stackedFieldColumns,
+      stackedLabelColumns,
       success,
       takeFocus,
       wrapperClassName
@@ -64,6 +67,7 @@ var Select = _ref2 => {
     error: error,
     forId: selectId,
     help: help,
+    helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
     isSelect: true,
@@ -71,6 +75,8 @@ var Select = _ref2 => {
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
+    stackedFieldColumns: stackedFieldColumns,
+    stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
   }, /*#__PURE__*/React.createElement("select", _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -96,7 +96,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.48.0",
+    "vanilla-framework": "4.50.0",
     "wait-on": "9.0.3",
     "webpack": "5.105.0"
   },