@canonical/react-components 3.9.1 → 3.11.0

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -37,8 +37,7 @@ const ConfirmationButton = _ref => {
   const {
     openPortal,
     closePortal,
-    isOpen,
-    Portal
+    isOpen
   } = (0, _external.usePortal)();
   const handleCancelModal = () => {
     closePortal();
@@ -64,13 +63,14 @@ const ConfirmationButton = _ref => {
     }
     shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
     close: handleCancelModal,
     confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
-    onConfirm: handleConfirmModal
+    onConfirm: handleConfirmModal,
+    renderInPortal: true
   }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/_react.default.createElement("p", {
     className: "p-text--small u-text--muted u-hide--small"
-  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
+  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action.")), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
     onClick: handleClick,
     title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
   }), actionButtonProps.children));

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -45,9 +45,13 @@ export type Props = PropsWithSpread<{
      * Whether the confirm button should be disabled.
      */
     confirmButtonDisabled?: boolean;
+    /**
+     * Whether to render the modal inside a Portal component.
+     */
+    renderInPortal?: boolean;
 }, Omit<ModalProps, "buttonRow">>;
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => React.JSX.Element;
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, ...props }: Props) => React.JSX.Element;
 export default ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -8,7 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
-const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps"];
+var _external = require("../../external");
+const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -28,9 +29,13 @@ const ConfirmationModal = _ref => {
       onConfirm,
       confirmButtonLoading,
       confirmButtonDisabled,
-      confirmButtonProps
+      confirmButtonProps,
+      renderInPortal = false
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    Portal
+  } = (0, _external.usePortal)();
   const handleClick = action => event => {
     if (!props.shouldPropagateClickEvent) {
       event.stopPropagation();
@@ -39,7 +44,7 @@ const ConfirmationModal = _ref => {
       action(event);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
+  const ModalElement = /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, cancelButtonProps, {
       type: (_cancelButtonProps$ty = cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.type) !== null && _cancelButtonProps$ty !== void 0 ? _cancelButtonProps$ty : "button",
       className: "u-no-margin--bottom",
@@ -52,6 +57,7 @@ const ConfirmationModal = _ref => {
       disabled: confirmButtonDisabled
     }), confirmButtonLabel))
   }, props), children);
+  return renderInPortal ? /*#__PURE__*/_react.default.createElement(Portal, null, ModalElement) : ModalElement;
 };
 exports.ConfirmationModal = ConfirmationModal;
 var _default = exports.default = ConfirmationModal;

package/dist/components/PrefixedInput/PrefixedInput.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+import { type InputProps } from "../Input";
+import "./PrefixedInput.scss";
+import { PropsWithSpread } from "../../types";
+export type PrefixedInputProps = PropsWithSpread<{
+    /**
+     * The immutable text that appears at the beginning of the input field.
+     * This text is not editable by the user and visually appears inside the input.
+     */
+    immutableText: string;
+}, Omit<InputProps, "type">>;
+declare const PrefixedInput: ({ immutableText, ...props }: PrefixedInputProps) => ReactElement;
+export default PrefixedInput;

package/dist/components/PrefixedInput/PrefixedInput.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./PrefixedInput.scss");
+var _useListener = require("../../hooks/useListener");
+const _excluded = ["immutableText"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+// export type PrefixedInputProps = Omit<InputProps, "type"> & {
+//   /**
+//    * The immutable text that appears at the beginning of the input field.
+//    * This text is not editable by the user and visually appears inside the input.
+//    */
+//   immutableText: string;
+// };
+
+const PrefixedInput = _ref => {
+  let {
+      immutableText
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const prefixTextRef = (0, _react.useRef)(null);
+  const inputWrapperRef = (0, _react.useRef)(null);
+  const updatePadding = (0, _react.useCallback)(() => {
+    var _inputWrapperRef$curr;
+    const prefixElement = prefixTextRef.current;
+    const inputElement = (_inputWrapperRef$curr = inputWrapperRef.current) === null || _inputWrapperRef$curr === void 0 ? void 0 : _inputWrapperRef$curr.querySelector("input");
+    if (prefixElement && inputElement) {
+      // Adjust the left padding of the input to be the same width as the immutable text.
+      // This displays the user input and the unchangeable text together as one combined string.
+      const prefixWidth = prefixElement.getBoundingClientRect().width;
+      inputElement.style.paddingLeft = "".concat(prefixWidth, "px");
+    }
+  }, []);
+  (0, _useListener.useListener)(window, updatePadding, "resize", true);
+  (0, _react.useLayoutEffect)(() => {
+    updatePadding();
+  }, [immutableText, props.label, updatePadding]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("prefixed-input", {
+      "prefixed-input--with-label": !!props.label
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "prefixed-input__text",
+    ref: prefixTextRef
+  }, immutableText), /*#__PURE__*/_react.default.createElement("div", {
+    ref: inputWrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, _extends({}, props, {
+    className: (0, _classnames.default)("prefixed-input__input", props.className),
+    type: "text",
+    wrapperClassName: (0, _classnames.default)("prefixed-input__wrapper", props.wrapperClassName)
+  }))));
+};
+var _default = exports.default = PrefixedInput;

package/dist/components/PrefixedInput/PrefixedInput.scss

@@ -0,0 +1,22 @@
+@import "vanilla-framework";
+
+.prefixed-input {
+  position: relative;
+
+  .prefixed-input__input {
+    padding-top: 0.25rem;
+  }
+
+  .prefixed-input__text {
+    padding-left: $spv--large;
+    padding-top: 0.3rem;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  &--with-label {
+    .prefixed-input__text {
+      top: 2.5rem;
+    }
+  }
+}

package/dist/components/PrefixedInput/PrefixedInput.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PrefixedInput from "./PrefixedInput";
+declare const meta: Meta<typeof PrefixedInput>;
+export default meta;
+type Story = StoryObj<typeof PrefixedInput>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const WithHelpText: Story;
+export declare const Required: Story;

package/dist/components/PrefixedInput/PrefixedInput.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithLabel = exports.WithHelpText = exports.WithError = exports.Required = exports.Disabled = exports.Default = void 0;
+var _PrefixedInput = _interopRequireDefault(require("./PrefixedInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _PrefixedInput.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    immutableText: "https://",
+    placeholder: "example.com"
+  }
+};
+const WithLabel = exports.WithLabel = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com"
+  }
+};
+const Disabled = exports.Disabled = {
+  args: {
+    immutableText: "@",
+    label: "Username",
+    placeholder: "username",
+    disabled: true
+  }
+};
+const WithError = exports.WithError = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    error: "Invalid URL format"
+  }
+};
+const WithHelpText = exports.WithHelpText = {
+  args: {
+    immutableText: "User ID:",
+    label: "User Identifier",
+    placeholder: " Enter user ID",
+    help: "This will be used to identify your account"
+  }
+};
+const Required = exports.Required = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    required: true
+  }
+};

package/dist/components/PrefixedInput/PrefixedInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PrefixedInput/index.d.ts

@@ -0,0 +1 @@
+export { default, type PrefixedInputProps } from "./PrefixedInput";

package/dist/components/PrefixedInput/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedInput.default;
+  }
+});
+var _PrefixedInput = _interopRequireDefault(require("./PrefixedInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,27 @@
+import { type ReactElement } from "react";
+import { type PrefixedInputProps } from "../PrefixedInput";
+import { PropsWithSpread } from "../../types";
+export type PrefixedIpInputProps = PropsWithSpread<{
+    /**
+     * The CIDR for the subnet (e.g., "192.168.1.0/24" or "2001:db8::/32").
+     * Used to calculate the immutable prefix and available IP range.
+     */
+    cidr: string;
+    /**
+     * The full IP address value (if available).
+     * For IPv4: e.g., "192.168.1.100"
+     * For IPv6: e.g., "2001:db8::1"
+     */
+    ip: string;
+    /**
+     * The name attribute for the input field.
+     */
+    name: string;
+    /**
+     * Callback function that is called when the IP address changes.
+     * Receives the full IP address as a string parameter.
+     */
+    onIpChange: (ip: string) => void;
+}, Omit<PrefixedInputProps, "immutableText" | "maxLength" | "placeholder" | "name">>;
+declare const PrefixedIpInput: ({ cidr, help, onIpChange, ip, name, ...props }: PrefixedIpInputProps) => ReactElement;
+export default PrefixedIpInput;

package/dist/components/PrefixedIpInput/PrefixedIpInput.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PrefixedInput = _interopRequireDefault(require("../PrefixedInput"));
+var _utils = require("./utils");
+const _excluded = ["cidr", "help", "onIpChange", "ip", "name"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const PrefixedIpInput = _ref => {
+  let {
+      cidr,
+      help,
+      onIpChange,
+      ip,
+      name
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [networkAddress] = cidr.split("/");
+  const isIPV4 = (0, _utils.isIPv4)(networkAddress);
+  const [immutable, editable] = (0, _utils.getImmutableAndEditable)(cidr);
+  const inputValue = isIPV4 ? ip.split(".").slice(immutable.split(".").length).join(".") : ip.replace(immutable, "");
+  const getIPv4MaxLength = () => {
+    const immutableOctetsLength = immutable.split(".").length;
+    const lengths = [15, 11, 7, 3]; // Corresponding to 0-3 immutable octets
+    return lengths[immutableOctetsLength];
+  };
+  const maxLength = isIPV4 ? getIPv4MaxLength() : editable.length;
+  const placeholder = props.disabled ? "" : editable;
+  const setIp = editableValue => {
+    const fullIp = editableValue ? isIPV4 ? "".concat(immutable, ".").concat(editableValue) : "".concat(immutable).concat(editableValue) : "";
+    onIpChange(fullIp);
+  };
+  const handlePaste = e => {
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData("text");
+    if (isIPV4) {
+      const octets = pastedText.split(".");
+      const trimmed = octets.slice(0 - editable.split(".").length);
+      const ip = trimmed.join(".");
+      setIp(ip);
+    } else {
+      const ip = pastedText.replace(immutable, "");
+      setIp(ip);
+    }
+  };
+  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, " ")), "."),
+    immutableText: isIPV4 ? "".concat(immutable, ".") : immutable,
+    maxLength: maxLength,
+    name: name,
+    onPaste: handlePaste,
+    value: inputValue,
+    onChange: e => {
+      setIp(e.target.value);
+    },
+    placeholder: placeholder
+  }, props));
+};
+var _default = exports.default = PrefixedIpInput;

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PrefixedIpInput from "./PrefixedIpInput";
+declare const meta: Meta<typeof PrefixedIpInput>;
+export default meta;
+type Story = StoryObj<typeof PrefixedIpInput>;
+export declare const IPv4Default: Story;
+export declare const IPv4WithValue: Story;
+export declare const IPv4WithError: Story;
+export declare const IPv4Disabled: Story;
+export declare const IPv6Default: Story;
+export declare const IPv6WithValue: Story;
+export declare const WithCustomHelp: Story;
+export declare const Required: Story;

package/dist/components/PrefixedIpInput/PrefixedIpInput.stories.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithCustomHelp = exports.Required = exports.IPv6WithValue = exports.IPv6Default = exports.IPv4WithValue = exports.IPv4WithError = exports.IPv4Disabled = exports.IPv4Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _PrefixedIpInput = _interopRequireDefault(require("./PrefixedIpInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const PrefixedIpInputWrapper = args => {
+  const [ip, setIp] = (0, _react.useState)(args.ip);
+  return /*#__PURE__*/_react.default.createElement(_PrefixedIpInput.default, _extends({}, args, {
+    ip: ip,
+    onIpChange: newIp => {
+      var _args$onIpChange;
+      setIp(newIp);
+      (_args$onIpChange = args.onIpChange) === null || _args$onIpChange === void 0 || _args$onIpChange.call(args, newIp);
+    }
+  }));
+};
+const meta = {
+  component: _PrefixedIpInput.default,
+  tags: ["autodocs"],
+  argTypes: {
+    ip: {
+      control: "text"
+    },
+    cidr: {
+      control: "text"
+    },
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    help: {
+      control: "text"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    required: {
+      control: "boolean"
+    }
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(PrefixedIpInputWrapper, args)
+};
+var _default = exports.default = meta;
+const IPv4Default = exports.IPv4Default = {
+  name: "IPv4 default",
+  args: {
+    cidr: "192.168.1.0/24",
+    ip: "",
+    name: "ip-address",
+    label: "IP Address",
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};
+const IPv4WithValue = exports.IPv4WithValue = {
+  name: "IPv4 with value",
+  args: {
+    cidr: "192.168.1.0/24",
+    ip: "192.168.1.100",
+    name: "ip-address",
+    label: "IP Address",
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};
+const IPv4WithError = exports.IPv4WithError = {
+  name: "IPv4 with error",
+  args: {
+    cidr: "192.168.1.0/24",
+    ip: "192.168.1.256",
+    name: "ip-address",
+    label: "IP Address",
+    error: "Invalid IP address",
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};
+const IPv4Disabled = exports.IPv4Disabled = {
+  name: "IPv4 disabled",
+  args: {
+    cidr: "192.168.1.0/24",
+    ip: "192.168.1.50",
+    name: "ip-address",
+    label: "IP Address",
+    disabled: true,
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};
+const IPv6Default = exports.IPv6Default = {
+  name: "IPv6 default",
+  args: {
+    cidr: "2001:db8::/32",
+    ip: "",
+    name: "ipv6-address",
+    label: "IPv6 Address",
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};
+const IPv6WithValue = exports.IPv6WithValue = {
+  name: "IPv6 with value",
+  args: {
+    cidr: "2001:db8::/32",
+    ip: "2001:db8::1",
+    name: "ipv6-address",
+    label: "IPv6 Address",
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};
+const WithCustomHelp = exports.WithCustomHelp = {
+  args: {
+    cidr: "10.0.0.0/16",
+    ip: "",
+    name: "ip-address",
+    label: "IP Address",
+    help: "Enter a custom IP address for this device",
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};
+const Required = exports.Required = {
+  args: {
+    cidr: "192.168.0.0/24",
+    ip: "",
+    name: "ip-address",
+    label: "IP Address",
+    required: true,
+    onIpChange: ip => console.log("IP changed:", ip)
+  }
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default, type PrefixedIpInputProps } from "./PrefixedIpInput";
+export { isIPv4, getIpRangeFromCidr, getFirstValidIp, convertIpToUint32, isIpInSubnet, getImmutableAndEditableOctets, getImmutableAndEditable, } from "./utils";

package/dist/components/PrefixedIpInput/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "convertIpToUint32", {
+  enumerable: true,
+  get: function () {
+    return _utils.convertIpToUint32;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.default;
+  }
+});
+Object.defineProperty(exports, "getFirstValidIp", {
+  enumerable: true,
+  get: function () {
+    return _utils.getFirstValidIp;
+  }
+});
+Object.defineProperty(exports, "getImmutableAndEditable", {
+  enumerable: true,
+  get: function () {
+    return _utils.getImmutableAndEditable;
+  }
+});
+Object.defineProperty(exports, "getImmutableAndEditableOctets", {
+  enumerable: true,
+  get: function () {
+    return _utils.getImmutableAndEditableOctets;
+  }
+});
+Object.defineProperty(exports, "getIpRangeFromCidr", {
+  enumerable: true,
+  get: function () {
+    return _utils.getIpRangeFromCidr;
+  }
+});
+Object.defineProperty(exports, "isIPv4", {
+  enumerable: true,
+  get: function () {
+    return _utils.isIPv4;
+  }
+});
+Object.defineProperty(exports, "isIpInSubnet", {
+  enumerable: true,
+  get: function () {
+    return _utils.isIpInSubnet;
+  }
+});
+var _PrefixedIpInput = _interopRequireDefault(require("./PrefixedIpInput"));
+var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,39 @@
+/**
+ * Checks if a given IP address is a valid IPv4 address.
+ * @param ip The IP address to check
+ * @returns True if the IP is a valid IPv4 address, false otherwise
+ */
+export declare const isIPv4: (ip: string) => boolean;
+/**
+ * Takes a subnet CIDR notation (IPv4) and returns the first and last IP of the subnet.
+ * The network and host addresses are excluded.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The first and last valid IP addresses as two strings in a list.
+ */
+export declare const getIpRangeFromCidr: (cidr: string) => string[];
+export declare const getFirstValidIp: (ip: string) => string;
+export declare const convertIpToUint32: (ip: string) => number;
+/**
+ * Checks if an IPv4 address is valid for the given subnet.
+ *
+ * @param ip The IPv4 address to check, as a string
+ * @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
+ */
+export declare const isIpInSubnet: (ip: string, cidr: string) => boolean;
+/**
+ * Separates the immutable and editable octets of an IPv4 subnet range.
+ *
+ * @param startIp The start IP of the subnet
+ * @param endIp The end IP of the subnet
+ * @returns The immutable and editable octects as two strings in a list
+ */
+export declare const getImmutableAndEditableOctets: (startIp: string, endIp: 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
+ */
+export declare const getImmutableAndEditable: (cidr: string) => string[];