@canonical/react-components 4.3.0 → 4.4.0

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/PrefixedIpInput/PrefixedIpInput.js

@@ -50,7 +50,7 @@ const PrefixedIpInput = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_PrefixedInput.default, _extends({
-    help: help ? help : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", isIPV4 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/_react.default.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The available IPV6 address range is", " ", /*#__PURE__*/_react.default.createElement("code", null, immutable, editable, " ")), "."),
+    help: help ? help : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", isIPV4 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/_react.default.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The subnet CIDR is ", /*#__PURE__*/_react.default.createElement("code", null, cidr)), "."),
     immutableText: isIPV4 ? "".concat(immutable, ".") : immutable,
     maxLength: maxLength,
     name: name,

package/dist/components/PrefixedIpInput/utils.d.ts

@@ -14,6 +14,7 @@ export declare const isIPv4: (ip: string) => boolean;
 export declare const getIpRangeFromCidr: (cidr: string) => string[];
 export declare const getFirstValidIp: (ip: string) => string;
 export declare const convertIpToUint32: (ip: string) => number;
+export declare const convertUint32ToIp: (ipAsUint32: number) => string;
 /**
  * Checks if an IPv4 address is valid for the given subnet.
  *
@@ -30,10 +31,18 @@ export declare const isIpInSubnet: (ip: string, cidr: string) => boolean;
  * @returns The immutable and editable octects as two strings in a list
  */
 export declare const getImmutableAndEditableOctets: (startIp: string, endIp: string) => string[];
+/**
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable parts as two strings in a list
+ */
+export declare const getImmutableAndEditableIPv6: (cidr: string) => string[];
 /**
  * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable as two strings in a list
  */
 export declare const getImmutableAndEditable: (cidr: string) => string[];

package/dist/components/PrefixedIpInput/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isIpInSubnet = exports.isIPv4 = exports.getIpRangeFromCidr = exports.getImmutableAndEditableOctets = exports.getImmutableAndEditable = exports.getFirstValidIp = exports.convertIpToUint32 = void 0;
+exports.isIpInSubnet = exports.isIPv4 = exports.getIpRangeFromCidr = exports.getImmutableAndEditableOctets = exports.getImmutableAndEditableIPv6 = exports.getImmutableAndEditable = exports.getFirstValidIp = exports.convertUint32ToIp = exports.convertIpToUint32 = void 0;
 /**
  * Checks if a given IP address is a valid IPv4 address.
  * @param ip The IP address to check
@@ -26,8 +26,11 @@ const getIpRangeFromCidr = cidr => {
   // https://gist.github.com/binarymax/6114792
 
   // Get start IP and number of valid addresses
-  const [startIp, mask] = cidr.split("/");
-  const numberOfAddresses = (1 << 32 - parseInt(mask)) - 1;
+  const [unmaskedStartIp, mask] = cidr.split("/");
+  const maskBits = parseInt(mask, 10);
+  const subnetMask = maskBits === 0 ? 0 : 0xffffffff << 32 - maskBits >>> 0;
+  const startIp = convertUint32ToIp(convertIpToUint32(unmaskedStartIp) & subnetMask);
+  const numberOfAddresses = (1 << 32 - maskBits) - 1;
 
   // IPv4 can be represented by an unsigned 32-bit integer, so we can use a Uint32Array to store the IP
   const buffer = new ArrayBuffer(4); //4 octets
@@ -63,6 +66,14 @@ const convertIpToUint32 = ip => {
   int32[0] = (octets[0] << 24) + (octets[1] << 16) + (octets[2] << 8) + octets[3];
   return int32[0];
 };
+exports.convertIpToUint32 = convertIpToUint32;
+const convertUint32ToIp = ipAsUint32 => {
+  const buffer = new ArrayBuffer(4); //4 octets
+  const int32 = new Uint32Array(buffer);
+  int32[0] = ipAsUint32;
+  const octets = Array.from(new Uint8Array(buffer));
+  return octets.reverse().join(".");
+};
 
 /**
  * Checks if an IPv4 address is valid for the given subnet.
@@ -71,7 +82,7 @@ const convertIpToUint32 = ip => {
  * @param cidr The subnet's CIDR notation e.g. 192.168.0.0/24
  * @returns True if the IP is in the subnet, false otherwise
  */
-exports.convertIpToUint32 = convertIpToUint32;
+exports.convertUint32ToIp = convertUint32ToIp;
 const isIpInSubnet = (ip, cidr) => {
   const [startIP, endIP] = getIpRangeFromCidr(cidr);
   const ipUint32 = convertIpToUint32(ip);
@@ -104,22 +115,43 @@ const getImmutableAndEditableOctets = (startIp, endIp) => {
 };
 
 /**
- * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable parts as two strings in a list
  */
 exports.getImmutableAndEditableOctets = getImmutableAndEditableOctets;
+const getImmutableAndEditableIPv6 = cidr => {
+  const [address, prefix] = cidr.split("/");
+  const prefixLength = parseInt(prefix, 10);
+  const [left = "", right = ""] = address.split("::");
+  const leftGroups = left ? left.split(":").filter(Boolean) : [];
+  const rightGroups = right ? right.split(":").filter(Boolean) : [];
+  const missingGroups = Math.max(0, 8 - (leftGroups.length + rightGroups.length));
+  const expandedGroups = [...leftGroups, ...Array(missingGroups).fill("0"), ...Array(rightGroups.length).fill("0")];
+  const immutableGroupCount = Math.floor(prefixLength / 16);
+  let immutableIPV6 = immutableGroupCount > 0 ? "".concat(expandedGroups.slice(0, immutableGroupCount).join(":")) : "";
+  if (immutableGroupCount < 8) {
+    immutableIPV6 += immutableIPV6 ? ":" : "";
+  }
+  const editableIPV6 = "".concat(expandedGroups.slice(immutableGroupCount).join(":"));
+  return [immutableIPV6, editableIPV6];
+};
+
+/**
+ * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable as two strings in a list
+ */
+exports.getImmutableAndEditableIPv6 = getImmutableAndEditableIPv6;
 const getImmutableAndEditable = cidr => {
   const isIPV4 = isIPv4(cidr.split("/")[0]);
   if (isIPV4) {
     const [startIp, endIp] = getIpRangeFromCidr(cidr);
     return getImmutableAndEditableOctets(startIp, endIp);
   }
-  const [networkAddress] = cidr.split("/");
-  const immutableIPV6 = networkAddress.substring(0, networkAddress.lastIndexOf(":"));
-  const ipv6PlaceholderColons = 7 - (immutableIPV6.match(/:/g) || []).length; // 7 is the maximum number of colons in an IPv6 address
-  const editableIPV6 = "".concat("0000:".repeat(ipv6PlaceholderColons), "0000");
-  return [immutableIPV6, editableIPV6];
+  return getImmutableAndEditableIPv6(cidr);
 };
 exports.getImmutableAndEditable = getImmutableAndEditable;

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/PrefixedIpInput/PrefixedIpInput.js

@@ -43,7 +43,7 @@ var PrefixedIpInput = _ref => {
     }
   };
   return /*#__PURE__*/React.createElement(PrefixedInput, _extends({
-    help: help ? help : /*#__PURE__*/React.createElement(React.Fragment, null, " ", isIPV4 ? /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/React.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The available IPV6 address range is", " ", /*#__PURE__*/React.createElement("code", null, immutable, editable, " ")), "."),
+    help: help ? help : /*#__PURE__*/React.createElement(React.Fragment, null, " ", isIPV4 ? /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/React.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The subnet CIDR is ", /*#__PURE__*/React.createElement("code", null, cidr)), "."),
     immutableText: isIPV4 ? "".concat(immutable, ".") : immutable,
     maxLength: maxLength,
     name: name,

package/dist/esm/components/PrefixedIpInput/utils.d.ts

@@ -14,6 +14,7 @@ export declare const isIPv4: (ip: string) => boolean;
 export declare const getIpRangeFromCidr: (cidr: string) => string[];
 export declare const getFirstValidIp: (ip: string) => string;
 export declare const convertIpToUint32: (ip: string) => number;
+export declare const convertUint32ToIp: (ipAsUint32: number) => string;
 /**
  * Checks if an IPv4 address is valid for the given subnet.
  *
@@ -30,10 +31,18 @@ export declare const isIpInSubnet: (ip: string, cidr: string) => boolean;
  * @returns The immutable and editable octects as two strings in a list
  */
 export declare const getImmutableAndEditableOctets: (startIp: string, endIp: string) => string[];
+/**
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable parts as two strings in a list
+ */
+export declare const getImmutableAndEditableIPv6: (cidr: string) => string[];
 /**
  * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable as two strings in a list
  */
 export declare const getImmutableAndEditable: (cidr: string) => string[];

package/dist/esm/components/PrefixedIpInput/utils.js

@@ -19,8 +19,11 @@ export var getIpRangeFromCidr = cidr => {
   // https://gist.github.com/binarymax/6114792
 
   // Get start IP and number of valid addresses
-  var [startIp, mask] = cidr.split("/");
-  var numberOfAddresses = (1 << 32 - parseInt(mask)) - 1;
+  var [unmaskedStartIp, mask] = cidr.split("/");
+  var maskBits = parseInt(mask, 10);
+  var subnetMask = maskBits === 0 ? 0 : 0xffffffff << 32 - maskBits >>> 0;
+  var startIp = convertUint32ToIp(convertIpToUint32(unmaskedStartIp) & subnetMask);
+  var numberOfAddresses = (1 << 32 - maskBits) - 1;
 
   // IPv4 can be represented by an unsigned 32-bit integer, so we can use a Uint32Array to store the IP
   var buffer = new ArrayBuffer(4); //4 octets
@@ -54,6 +57,13 @@ export var convertIpToUint32 = ip => {
   int32[0] = (octets[0] << 24) + (octets[1] << 16) + (octets[2] << 8) + octets[3];
   return int32[0];
 };
+export var convertUint32ToIp = ipAsUint32 => {
+  var buffer = new ArrayBuffer(4); //4 octets
+  var int32 = new Uint32Array(buffer);
+  int32[0] = ipAsUint32;
+  var octets = Array.from(new Uint8Array(buffer));
+  return octets.reverse().join(".");
+};
 
 /**
  * Checks if an IPv4 address is valid for the given subnet.
@@ -92,11 +102,35 @@ export var getImmutableAndEditableOctets = (startIp, endIp) => {
   return [immutable.join("."), editable.join(".")];
 };
 
+/**
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable parts as two strings in a list
+ */
+export var getImmutableAndEditableIPv6 = cidr => {
+  var [address, prefix] = cidr.split("/");
+  var prefixLength = parseInt(prefix, 10);
+  var [left = "", right = ""] = address.split("::");
+  var leftGroups = left ? left.split(":").filter(Boolean) : [];
+  var rightGroups = right ? right.split(":").filter(Boolean) : [];
+  var missingGroups = Math.max(0, 8 - (leftGroups.length + rightGroups.length));
+  var expandedGroups = [...leftGroups, ...Array(missingGroups).fill("0"), ...Array(rightGroups.length).fill("0")];
+  var immutableGroupCount = Math.floor(prefixLength / 16);
+  var immutableIPV6 = immutableGroupCount > 0 ? "".concat(expandedGroups.slice(0, immutableGroupCount).join(":")) : "";
+  if (immutableGroupCount < 8) {
+    immutableIPV6 += immutableIPV6 ? ":" : "";
+  }
+  var editableIPV6 = "".concat(expandedGroups.slice(immutableGroupCount).join(":"));
+  return [immutableIPV6, editableIPV6];
+};
+
 /**
  * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable as two strings in a list
  */
 export var getImmutableAndEditable = cidr => {
   var isIPV4 = isIPv4(cidr.split("/")[0]);
@@ -104,9 +138,5 @@ export var getImmutableAndEditable = cidr => {
     var [startIp, endIp] = getIpRangeFromCidr(cidr);
     return getImmutableAndEditableOctets(startIp, endIp);
   }
-  var [networkAddress] = cidr.split("/");
-  var immutableIPV6 = networkAddress.substring(0, networkAddress.lastIndexOf(":"));
-  var ipv6PlaceholderColons = 7 - (immutableIPV6.match(/:/g) || []).length; // 7 is the maximum number of colons in an IPv6 address
-  var editableIPV6 = "".concat("0000:".repeat(ipv6PlaceholderColons), "0000");
-  return [immutableIPV6, editableIPV6];
+  return getImmutableAndEditableIPv6(cidr);
 };

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.0",
+  "version": "4.4.0",
   "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"
   },