@canonical/react-components 4.0.0 → 4.0.1

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

@@ -1,13 +1,12 @@
 import { type ReactElement } from "react";
 import { type InputProps } from "../Input";
 import "./PrefixedInput.scss";
-import { PropsWithSpread } from "../../types";
-export type PrefixedInputProps = PropsWithSpread<{
+export type PrefixedInputProps = {
     /**
      * 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;
+} & Omit<InputProps, "type">;
+declare const PrefixedInput: ({ immutableText, disabled, className, wrapperClassName, label, error, help, caution, success, id, required, ...props }: PrefixedInputProps) => ReactElement;
 export default PrefixedInput;

package/dist/components/PrefixedInput/PrefixedInput.js

@@ -4,60 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _Input = _interopRequireDefault(require("../Input"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Field = _interopRequireDefault(require("../Field"));
 require("./PrefixedInput.scss");
-var _useListener = require("../../hooks/useListener");
-const _excluded = ["immutableText"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const _excluded = ["immutableText", "disabled", "className", "wrapperClassName", "label", "error", "help", "caution", "success", "id", "required"];
 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); }
 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; }
-// 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
+      immutableText,
+      disabled,
+      className,
+      wrapperClassName,
+      label,
+      error,
+      help,
+      caution,
+      success,
+      id,
+      required
     } = _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
-    })
+  const defaultId = (0, _react.useId)();
+  const inputId = id || defaultId;
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    label: label,
+    error: error,
+    help: help,
+    caution: caution,
+    success: success,
+    required: required,
+    forId: inputId,
+    className: (0, _classnames.default)("p-prefixed-input", wrapperClassName)
   }, /*#__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),
+    className: (0, _classnames.default)("p-prefixed-input__flex-container", {
+      "is-disabled": disabled,
+      "is-error": !!error,
+      "is-caution": !!caution,
+      "is-success": !!success
+    })
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "p-prefixed-input__prefix"
+  }, immutableText), /*#__PURE__*/_react.default.createElement(_Input.default, _extends({}, props, {
+    id: inputId,
+    disabled: disabled,
+    required: required
+    // IMPORTANT: pass nulls so Input doesn't trigger its own Field wrapper
+    ,
+    label: null,
+    error: null,
+    help: null,
+    caution: null,
+    success: null,
     type: "text",
-    wrapperClassName: (0, _classnames.default)("prefixed-input__wrapper", props.wrapperClassName)
+    className: (0, _classnames.default)("p-prefixed-input__input-field", className)
   }))));
 };
+PrefixedInput.propTypes = {
+  immutableText: _propTypes.default.string.isRequired
+};
 var _default = exports.default = PrefixedInput;

package/dist/components/PrefixedInput/PrefixedInput.scss

@@ -1,22 +1,68 @@
+@use "sass:map";
 @import "vanilla-framework";
+@include vf-b-placeholders;
 
-.prefixed-input {
-  position: relative;
+.p-prefixed-input {
+  @include vf-b-forms;
 
-  .prefixed-input__input {
-    padding-top: 0.25rem;
+  &__flex-container {
+    @extend %vf-input-elements;
+    align-items: center;
+    display: flex;
+
+    &:focus-within {
+      outline: 0.1875rem solid var(--vf-focus-outline-color);
+      outline-offset: -0.1875rem;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      opacity: 0.33;
+    }
+
+    &.is-error {
+      background-color: var(--vf-color-background-negative-default);
+      border-bottom-color: var(--vf-color-border-negative);
+    }
+
+    &.is-success {
+      background-color: var(--vf-color-background-positive-default);
+      border-bottom-color: var(--vf-color-border-positive);
+    }
+
+    &.is-caution {
+      background-color: var(--vf-color-background-caution-default);
+      border-bottom-color: var(--vf-color-border-caution);
+    }
   }
 
-  .prefixed-input__text {
-    padding-left: $spv--large;
-    padding-top: 0.3rem;
+  &__prefix {
     pointer-events: none;
-    position: absolute;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .p-form-validation {
+    flex: 1;
   }
 
-  &--with-label {
-    .prefixed-input__text {
-      top: 2.5rem;
+  // Reset the actual <input> rendered by the Input component
+  .p-prefixed-input__input-field.p-form-validation__input {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    flex: 1;
+    height: 100%;
+    margin: 0 !important;
+    min-width: 0;
+    padding: 0 !important;
+
+    &:focus {
+      outline: none !important;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }

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

@@ -7,5 +7,7 @@ export declare const Default: Story;
 export declare const WithLabel: Story;
 export declare const Disabled: Story;
 export declare const WithError: Story;
+export declare const WithSuccess: Story;
+export declare const WithCaution: Story;
 export declare const WithHelpText: Story;
 export declare const Required: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithLabel = exports.WithHelpText = exports.WithError = exports.Required = exports.Disabled = exports.Default = void 0;
+exports.default = exports.WithSuccess = exports.WithLabel = exports.WithHelpText = exports.WithError = exports.WithCaution = exports.Required = exports.Disabled = exports.Default = void 0;
 var _PrefixedInput = _interopRequireDefault(require("./PrefixedInput"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -40,6 +40,22 @@ const WithError = exports.WithError = {
     error: "Invalid URL format"
   }
 };
+const WithSuccess = exports.WithSuccess = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    success: "Valid URL format"
+  }
+};
+const WithCaution = exports.WithCaution = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    caution: "This URL might be problematic"
+  }
+};
 const WithHelpText = exports.WithHelpText = {
   args: {
     immutableText: "User ID:",

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

@@ -1,13 +1,12 @@
 import { type ReactElement } from "react";
 import { type InputProps } from "../Input";
 import "./PrefixedInput.scss";
-import { PropsWithSpread } from "../../types";
-export type PrefixedInputProps = PropsWithSpread<{
+export type PrefixedInputProps = {
     /**
      * 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;
+} & Omit<InputProps, "type">;
+declare const PrefixedInput: ({ immutableText, disabled, className, wrapperClassName, label, error, help, caution, success, id, required, ...props }: PrefixedInputProps) => ReactElement;
 export default PrefixedInput;

package/dist/esm/components/PrefixedInput/PrefixedInput.js

@@ -1,57 +1,64 @@
-var _excluded = ["immutableText"];
+import _pt from "prop-types";
+var _excluded = ["immutableText", "disabled", "className", "wrapperClassName", "label", "error", "help", "caution", "success", "id", "required"];
 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; }
-import React from "react";
-import { useLayoutEffect, useRef, useCallback } from "react";
-import Input from "../Input";
+import React, { useId } from "react";
 import classNames from "classnames";
+import Input from "../Input";
+import Field from "../Field";
 import "./PrefixedInput.scss";
-import { useListener } from "../../hooks/useListener";
-
-// 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;
-// };
-
 var PrefixedInput = _ref => {
   var {
-      immutableText
+      immutableText,
+      disabled,
+      className,
+      wrapperClassName,
+      label,
+      error,
+      help,
+      caution,
+      success,
+      id,
+      required
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  var prefixTextRef = useRef(null);
-  var inputWrapperRef = useRef(null);
-  var updatePadding = useCallback(() => {
-    var _inputWrapperRef$curr;
-    var prefixElement = prefixTextRef.current;
-    var 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.
-      var prefixWidth = prefixElement.getBoundingClientRect().width;
-      inputElement.style.paddingLeft = "".concat(prefixWidth, "px");
-    }
-  }, []);
-  useListener(window, updatePadding, "resize", true);
-  useLayoutEffect(() => {
-    updatePadding();
-  }, [immutableText, props.label, updatePadding]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("prefixed-input", {
-      "prefixed-input--with-label": !!props.label
-    })
+  var defaultId = useId();
+  var inputId = id || defaultId;
+  return /*#__PURE__*/React.createElement(Field, {
+    label: label,
+    error: error,
+    help: help,
+    caution: caution,
+    success: success,
+    required: required,
+    forId: inputId,
+    className: classNames("p-prefixed-input", wrapperClassName)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "prefixed-input__text",
-    ref: prefixTextRef
-  }, immutableText), /*#__PURE__*/React.createElement("div", {
-    ref: inputWrapperRef
-  }, /*#__PURE__*/React.createElement(Input, _extends({}, props, {
-    className: classNames("prefixed-input__input", props.className),
+    className: classNames("p-prefixed-input__flex-container", {
+      "is-disabled": disabled,
+      "is-error": !!error,
+      "is-caution": !!caution,
+      "is-success": !!success
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-prefixed-input__prefix"
+  }, immutableText), /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+    id: inputId,
+    disabled: disabled,
+    required: required
+    // IMPORTANT: pass nulls so Input doesn't trigger its own Field wrapper
+    ,
+    label: null,
+    error: null,
+    help: null,
+    caution: null,
+    success: null,
     type: "text",
-    wrapperClassName: classNames("prefixed-input__wrapper", props.wrapperClassName)
+    className: classNames("p-prefixed-input__input-field", className)
   }))));
 };
+PrefixedInput.propTypes = {
+  immutableText: _pt.string.isRequired
+};
 export default PrefixedInput;

package/dist/esm/components/PrefixedInput/PrefixedInput.scss

@@ -1,22 +1,68 @@
+@use "sass:map";
 @import "vanilla-framework";
+@include vf-b-placeholders;
 
-.prefixed-input {
-  position: relative;
+.p-prefixed-input {
+  @include vf-b-forms;
 
-  .prefixed-input__input {
-    padding-top: 0.25rem;
+  &__flex-container {
+    @extend %vf-input-elements;
+    align-items: center;
+    display: flex;
+
+    &:focus-within {
+      outline: 0.1875rem solid var(--vf-focus-outline-color);
+      outline-offset: -0.1875rem;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      opacity: 0.33;
+    }
+
+    &.is-error {
+      background-color: var(--vf-color-background-negative-default);
+      border-bottom-color: var(--vf-color-border-negative);
+    }
+
+    &.is-success {
+      background-color: var(--vf-color-background-positive-default);
+      border-bottom-color: var(--vf-color-border-positive);
+    }
+
+    &.is-caution {
+      background-color: var(--vf-color-background-caution-default);
+      border-bottom-color: var(--vf-color-border-caution);
+    }
   }
 
-  .prefixed-input__text {
-    padding-left: $spv--large;
-    padding-top: 0.3rem;
+  &__prefix {
     pointer-events: none;
-    position: absolute;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .p-form-validation {
+    flex: 1;
   }
 
-  &--with-label {
-    .prefixed-input__text {
-      top: 2.5rem;
+  // Reset the actual <input> rendered by the Input component
+  .p-prefixed-input__input-field.p-form-validation__input {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    flex: 1;
+    height: 100%;
+    margin: 0 !important;
+    min-width: 0;
+    padding: 0 !important;
+
+    &:focus {
+      outline: none !important;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }

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

@@ -7,5 +7,7 @@ export declare const Default: Story;
 export declare const WithLabel: Story;
 export declare const Disabled: Story;
 export declare const WithError: Story;
+export declare const WithSuccess: Story;
+export declare const WithCaution: Story;
 export declare const WithHelpText: Story;
 export declare const Required: Story;

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

@@ -33,6 +33,22 @@ export var WithError = {
     error: "Invalid URL format"
   }
 };
+export var WithSuccess = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    success: "Valid URL format"
+  }
+};
+export var WithCaution = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    caution: "This URL might be problematic"
+  }
+};
 export var WithHelpText = {
   args: {
     immutableText: "User ID:",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.0.0",
+  "version": "4.0.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.45.0",
+    "vanilla-framework": "4.46.0",
     "wait-on": "9.0.3",
     "webpack": "5.105.0"
   },