@canonical/react-components 4.3.0 → 4.3.1

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/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/package.json

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