@canonical/react-components 1.2.5 → 1.3.1

package/dist-esm/components/Notification/Notification.js

@@ -0,0 +1,119 @@
+var _excluded = ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "titleElement", "type"];
+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], t.indexOf(o) >= 0 || {}.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useEffect, useRef } from "react";
+import Button, { ButtonAppearance } from "../Button";
+import { IS_DEV } from "../../utils";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Close"] = "Close notification";
+  return Label;
+}({});
+export var NotificationSeverity = {
+  CAUTION: "caution",
+  INFORMATION: "information",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+export var DefaultTitles = {
+  [NotificationSeverity.CAUTION]: "Warning",
+  [NotificationSeverity.INFORMATION]: "Info",
+  [NotificationSeverity.NEGATIVE]: "Error",
+  [NotificationSeverity.POSITIVE]: "Success"
+};
+
+/**
+ * The props for the Notification component.
+ */
+
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Notification](https://docs.vanillaframework.io/patterns/notification/).
+
+Notifications are used to display global information, our notification variants consist of default, caution, negative or positive.
+
+The `NotificationProvider` component can be used to manage the notification state globally. Wrap your application components with it and then in any child component you can get the helper with `const notify = useNotify()` to easily trigger notifications:
+
+* `notify.info("You should keep this in mind")`
+* `notify.failure("Error when fooing a bar", errorObjectFromCatch)`
+* `notify.success("The bar was foo'd", "Success")`
+
+The `NotificationConsumer` component can be used to display notifications. It will automatically display any notifications that are added to the `NotificationProvider` state.
+
+The Notification API has changed since v0.18 in order to support new variants
+and align with our component prop naming conventions.
+
+| Deprecated prop names | Replaced by |
+| --------------------- | ----------- |
+| `type`                | `severity`  |
+| `status`              | `title`     |
+| `close`               | `onDismiss` |
+
+The `notificationTypes` const has also been replaced with `NotificationSeverity`
+to reflect the new prop name.
+ */
+var Notification = _ref => {
+  var {
+      actions,
+      borderless = false,
+      children,
+      className,
+      close,
+      inline = false,
+      onDismiss,
+      severity = NotificationSeverity.INFORMATION,
+      status,
+      timeout,
+      timestamp,
+      title,
+      titleElement: TitleComponent = "h5",
+      type
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var timeoutId = useRef(null);
+  var hasActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
+  var showMeta = !!timestamp || hasActions;
+  useEffect(() => {
+    if (timeout && onDismiss) {
+      timeoutId.current = setTimeout(() => onDismiss(), timeout);
+    }
+    return () => clearTimeout(timeoutId.current);
+  }, [onDismiss, timeout]);
+  if (IS_DEV && (close || status || type)) {
+    console.warn("The Notification component is using deprecated props. Refer to the deprecated list for details: https://canonical.github.io/react-components/?path=/docs/notification--information#deprecated");
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(className, {
+      ["p-notification--".concat(severity)]: !!severity,
+      "p-notification": !severity,
+      "is-borderless": borderless,
+      "is-inline": inline
+    })
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "p-notification__content"
+  }, title && /*#__PURE__*/React.createElement(TitleComponent, {
+    className: "p-notification__title",
+    "data-testid": "notification-title"
+  }, title), inline && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002"), /*#__PURE__*/React.createElement("p", {
+    className: "p-notification__message"
+  }, children), onDismiss && /*#__PURE__*/React.createElement("button", {
+    className: "p-notification__close",
+    "data-testid": "notification-close-button",
+    onClick: onDismiss
+  }, Label.Close)), showMeta && /*#__PURE__*/React.createElement("div", {
+    className: "p-notification__meta",
+    "data-testid": "notification-meta"
+  }, timestamp && /*#__PURE__*/React.createElement("span", {
+    className: "p-notification__timestamp",
+    "data-testid": "notification-timestamp"
+  }, timestamp), hasActions ? /*#__PURE__*/React.createElement("div", {
+    className: "p-notification__actions"
+  }, actions.map((action, i) => /*#__PURE__*/React.createElement(Button, {
+    appearance: ButtonAppearance.LINK,
+    className: "p-notification__action",
+    "data-testid": "notification-action",
+    key: "".concat(action.label, "-").concat(i),
+    onClick: action.onClick
+  }, action.label))) : null));
+};
+export default Notification;

package/dist-esm/components/Notification/index.js

@@ -0,0 +1 @@
+export { default, NotificationSeverity } from "./Notification";

package/dist-esm/components/NotificationProvider/NotificationProvider.js

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useEffect, useRef, useState } from "react";
+import isEqual from "lodash/isEqual";
+import { info as _info, failure as _failure, success as _success, queue } from "./messageBuilder";
+import Notification, { DefaultTitles } from "../Notification/Notification";
+var NotifyContext = /*#__PURE__*/createContext({
+  notification: null,
+  clear: () => undefined,
+  failure: () => undefined,
+  success: () => undefined,
+  info: () => undefined,
+  queue: () => undefined,
+  setDeduplicated: () => undefined
+});
+export var NotificationProvider = _ref => {
+  var {
+    children,
+    state,
+    pathname
+  } = _ref;
+  var [notification, setNotification] = useState(null);
+  var clear = () => notification !== null && setNotification(null);
+  var setDeduplicated = value => {
+    if (!isEqual(value, notification)) {
+      setNotification(value);
+    }
+    return value;
+  };
+  useEffect(() => {
+    if (state !== null && state !== void 0 && state.queuedNotification) {
+      setDeduplicated(state.queuedNotification);
+      window.history.replaceState({}, "");
+    } else {
+      clear();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, pathname]);
+  var helper = {
+    notification,
+    clear,
+    queue,
+    failure: (title, error, message, actions) => setDeduplicated(_failure(title, error, message, actions)),
+    info: (message, title) => setDeduplicated(_info(message, title)),
+    success: (message, title) => setDeduplicated(_success(message, title)),
+    setDeduplicated
+  };
+  return /*#__PURE__*/React.createElement(NotifyContext.Provider, {
+    value: helper
+  }, children);
+};
+export function useNotify() {
+  return useContext(NotifyContext);
+}
+export var NotificationConsumer = () => {
+  var notify = useNotify();
+  var ref = useRef(null);
+  useEffect(() => {
+    var _ref$current;
+    if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.hasAttribute("scrollIntoView")) {
+      ref.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "start"
+      });
+    }
+  }, [notify.notification]);
+  if (!notify.notification) {
+    return null;
+  }
+  var {
+    actions,
+    title,
+    type,
+    message
+  } = notify.notification;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Notification, {
+    title: title !== null && title !== void 0 ? title : DefaultTitles[type],
+    actions: actions,
+    severity: type,
+    onDismiss: notify.clear
+  }, message));
+};

package/dist-esm/components/NotificationProvider/index.js

@@ -0,0 +1,2 @@
+export { NotificationConsumer, NotificationProvider, useNotify } from "./NotificationProvider";
+export { info, success, failure, queue } from "./messageBuilder";

package/dist-esm/components/NotificationProvider/messageBuilder.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { NotificationSeverity } from "../Notification";
+export var queue = notification => {
+  return {
+    state: {
+      queuedNotification: notification
+    }
+  };
+};
+export var info = (message, title) => {
+  return {
+    message,
+    title,
+    type: NotificationSeverity.INFORMATION
+  };
+};
+export var success = (message, title) => {
+  return {
+    message,
+    title,
+    type: NotificationSeverity.POSITIVE
+  };
+};
+export var failure = (title, error, message, actions) => {
+  return {
+    actions,
+    message: error && error instanceof Error ? /*#__PURE__*/React.createElement(React.Fragment, null, message, " ", error.message) : message,
+    title,
+    type: NotificationSeverity.NEGATIVE
+  };
+};

package/dist-esm/components/NotificationProvider/types.js

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

package/dist-esm/components/Pagination/Pagination.js

@@ -0,0 +1,173 @@
+var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold", "centered", "showLabels", "hideNumbers", "onForward", "onBack", "forwardDisabled", "backDisabled", "forwardLabel", "backLabel"];
+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], t.indexOf(o) >= 0 || {}.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+import PaginationButton from "./PaginationButton";
+import PaginationItem from "./PaginationItem";
+var scrollTop = () => window.scrollTo(0, 0);
+var generatePaginationItems = (pageNumbers, currentPage, truncateThreshold, changePage) => {
+  var lastPage = pageNumbers.length;
+  var truncated = lastPage > truncateThreshold;
+  var visiblePages;
+  if (truncated) {
+    // the default range for pages outside the start and end threshold
+    var start = currentPage - 2;
+    var end = currentPage + 1;
+    // on page 1, also show pages 2, 3 and 4
+    if (currentPage === 1) {
+      start = 1;
+      end = Math.min(lastPage - 1, currentPage + 3);
+    }
+    // on page 2, show page 1, and also pages 3, and 4
+    if (currentPage === 2) {
+      start = 1;
+      end = Math.min(lastPage - 1, currentPage + 3);
+    }
+    // on the last page and page before last, also show the 3 previous pages
+    if (currentPage === lastPage || currentPage === lastPage - 1) {
+      start = Math.max(1, lastPage - 4);
+      end = lastPage - 1;
+    }
+    visiblePages = pageNumbers.slice(start, end);
+  } else {
+    visiblePages = pageNumbers;
+  }
+  var items = [];
+  if (truncated) {
+    // render first in sequence
+    items.push( /*#__PURE__*/React.createElement(PaginationItem, {
+      key: 1,
+      number: 1,
+      isActive: currentPage === 1,
+      onClick: () => changePage(1)
+    }));
+    if (!visiblePages.includes(2)) {
+      items.push( /*#__PURE__*/React.createElement(PaginationItemSeparator, {
+        key: "sep1"
+      }));
+    }
+  }
+  items.push(visiblePages.map(number => /*#__PURE__*/React.createElement(PaginationItem, {
+    key: number,
+    number: number,
+    isActive: number === currentPage,
+    onClick: () => changePage(number)
+  })));
+  if (truncated) {
+    // render last in sequence
+    if (!visiblePages.includes(lastPage - 1)) {
+      items.push( /*#__PURE__*/React.createElement(PaginationItemSeparator, {
+        key: "sep2"
+      }));
+    }
+    items.push( /*#__PURE__*/React.createElement(PaginationItem, {
+      key: lastPage,
+      number: lastPage,
+      isActive: currentPage === lastPage,
+      onClick: () => changePage(lastPage)
+    }));
+  }
+  return items;
+};
+var PaginationItemSeparator = () => /*#__PURE__*/React.createElement("li", {
+  className: "p-pagination__item p-pagination__item--truncation"
+}, "\u2026");
+
+// Props that are used in both types of paginations.
+
+// Used when number of items per page, number of total items,
+// current page and paginate function is defined. Pagination
+// is handled by paginate function and optional onForward and
+// onBack functions.
+
+// Used when number of items per page, number of total items,
+// current page and paginate function are undefined.
+// Pagination is handled by onForward and onBack function.
+
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Pagination](https://docs.vanillaframework.io/patterns/pagination/).
+
+The pagination component should be used to navigate between pages of content. There are two types of pagination being provided:
+
+* **Numbered Pagination:** used when the total number of items is known.<br />
+  Depending on the length provided, the pagination component will automatically scale.<br />
+  **Required props:** itemsPerPage, totalItems, paginate, currentPage.
+
+* **Buttons-only Pagination:** used when the total number of items is unknown.<br />
+  **Required props:** onForward, onBack.
+ */
+var Pagination = _ref => {
+  var {
+      itemsPerPage,
+      totalItems,
+      paginate,
+      currentPage,
+      scrollToTop,
+      truncateThreshold = 10,
+      centered,
+      showLabels,
+      hideNumbers,
+      onForward,
+      onBack,
+      forwardDisabled,
+      backDisabled,
+      forwardLabel,
+      backLabel
+    } = _ref,
+    navProps = _objectWithoutProperties(_ref, _excluded);
+  var isNumberedPagination = !!itemsPerPage && !!totalItems && !!currentPage && !!paginate;
+  var pageNumbers = [];
+  if (isNumberedPagination) {
+    // return early if no pagination is required
+    if (totalItems <= itemsPerPage) {
+      return null;
+    }
+    for (var i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
+      pageNumbers.push(i);
+    }
+  }
+  var changeNumberedPage = page => {
+    paginate(page);
+    if (page > currentPage) {
+      onForward === null || onForward === void 0 || onForward(page);
+    }
+    if (page < currentPage) {
+      onBack === null || onBack === void 0 || onBack(page);
+    }
+    scrollToTop && scrollTop();
+  };
+  var changeButtonsOnlyPage = direction => {
+    if (direction === "forward") {
+      onForward === null || onForward === void 0 || onForward(undefined);
+    }
+    if (direction === "back") {
+      onBack === null || onBack === void 0 || onBack(undefined);
+    }
+    scrollToTop && scrollTop();
+  };
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    className: "p-pagination",
+    "aria-label": "Pagination"
+  }, navProps), /*#__PURE__*/React.createElement("ol", {
+    className: classNames("p-pagination__items", {
+      "u-align--center": centered
+    })
+  }, /*#__PURE__*/React.createElement(PaginationButton, {
+    key: "back",
+    direction: "back",
+    disabled: backDisabled || currentPage === 1,
+    onClick: () => isNumberedPagination ? changeNumberedPage(currentPage - 1) : changeButtonsOnlyPage("back"),
+    showLabel: showLabels,
+    label: backLabel
+  }), isNumberedPagination && !hideNumbers ? generatePaginationItems(pageNumbers, currentPage, truncateThreshold, changeNumberedPage) : null, /*#__PURE__*/React.createElement(PaginationButton, {
+    key: "forward",
+    direction: "forward",
+    disabled: forwardDisabled || currentPage === pageNumbers.length,
+    onClick: () => isNumberedPagination ? changeNumberedPage(currentPage + 1) : changeButtonsOnlyPage("forward"),
+    showLabel: showLabels,
+    label: forwardLabel
+  })));
+};
+export default Pagination;

package/dist-esm/components/Pagination/PaginationButton/PaginationButton.js

@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import React from "react";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Next"] = "Next page";
+  Label["Previous"] = "Previous page";
+  return Label;
+}({});
+var PaginationButton = _ref => {
+  var {
+    direction,
+    onClick,
+    disabled = false,
+    showLabel,
+    label
+  } = _ref;
+  var buttonLabel = label || (direction === "back" ? Label.Previous : Label.Next);
+  return /*#__PURE__*/React.createElement("li", {
+    className: "p-pagination__item"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: classNames({
+      "p-pagination__link--previous": direction === "back",
+      "p-pagination__link--next": direction === "forward"
+    }),
+    disabled: disabled,
+    onClick: onClick,
+    type: "button"
+  }, direction === "forward" && showLabel && /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement("i", {
+    className: "p-icon--chevron-down"
+  }, buttonLabel), direction === "back" && showLabel && /*#__PURE__*/React.createElement("span", null, buttonLabel)));
+};
+export default PaginationButton;

package/dist-esm/components/Pagination/PaginationButton/index.js

@@ -0,0 +1 @@
+export { default } from "./PaginationButton";

package/dist-esm/components/Pagination/PaginationItem/PaginationItem.js

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import React from "react";
+var PaginationItem = _ref => {
+  var {
+    number,
+    onClick,
+    isActive = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("li", {
+    className: "p-pagination__item"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: classNames("p-pagination__link", {
+      "is-active": isActive
+    }),
+    onClick: onClick,
+    "aria-current": isActive ? "page" : undefined,
+    type: "button"
+  }, number));
+};
+export default PaginationItem;

package/dist-esm/components/Pagination/PaginationItem/index.js

@@ -0,0 +1 @@
+export { default } from "./PaginationItem";

package/dist-esm/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default } from "./Pagination";

package/dist-esm/components/Panel/Panel.js

@@ -0,0 +1,89 @@
+var _excluded = ["icon", "iconAlt", "name", "nameAlt", "component"],
+  _excluded2 = ["forwardRef", "children", "className", "contentClassName", "controlsClassName", "controls", "dark", "header", "logo", "stickyHeader", "title", "titleClassName", "titleComponent", "titleId", "toggle", "wrapContent"];
+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], t.indexOf(o) >= 0 || {}.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+import { isReactNode } from "../../utils";
+var generateLogo = logo => {
+  if (isReactNode(logo)) {
+    return logo;
+  }
+  var {
+      icon,
+      iconAlt,
+      name,
+      nameAlt,
+      component: Component = "a"
+    } = logo,
+    props = _objectWithoutProperties(logo, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: "p-panel__logo"
+  }, props), /*#__PURE__*/React.createElement("img", {
+    className: "p-panel__logo-icon",
+    src: icon,
+    alt: iconAlt,
+    width: "24",
+    height: "24"
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "p-panel__logo-name is-fading-when-collapsed",
+    src: name,
+    alt: nameAlt,
+    height: "16"
+  }));
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for panels in the
+ * [Vanilla](https://vanillaframework.io/docs/) layouts.
+ *
+ * The Panel component can be used in many areas of the application layout. It
+ * can be the child element of `AppAside`, `AppMain`, `AppNavigation`, `AppNavigationBar`
+ * and `AppStatus`.
+ */
+var Panel = _ref => {
+  var {
+      forwardRef,
+      children,
+      className,
+      contentClassName,
+      controlsClassName,
+      controls,
+      dark,
+      header,
+      logo,
+      stickyHeader,
+      title,
+      titleClassName,
+      titleComponent: TitleComponent = "h4",
+      titleId,
+      toggle,
+      wrapContent = true
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: classNames("p-panel", className, {
+      "is-dark": dark
+    }),
+    ref: forwardRef
+  }), logo || title || controls || toggle ? /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-panel__header", {
+      "is-sticky": stickyHeader
+    })
+  }, logo ? generateLogo(logo) : /*#__PURE__*/React.createElement(TitleComponent, {
+    className: classNames("p-panel__title", titleClassName),
+    id: titleId
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-panel__controls", controlsClassName)
+  }, toggle ? /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    tabIndex: 0,
+    className: "p-panel__toggle",
+    onClick: () => toggle.onClick(),
+    onKeyDown: () => toggle.onClick()
+  }, toggle.label) : null, controls)) : header, children && wrapContent ? /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-panel__content", contentClassName)
+  }, children) : children);
+};
+export default Panel;

package/dist-esm/components/Panel/index.js

@@ -0,0 +1 @@
+export { default } from "./Panel";

package/dist-esm/components/PasswordToggle/PasswordToggle.js

@@ -0,0 +1,90 @@
+var _excluded = ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "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 _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], t.indexOf(o) >= 0 || {}.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useId, useState } from "react";
+import Button from "../Button";
+import Field from "../Field";
+import VanillaLabel from "../Label";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Hide"] = "Hide";
+  Label["Show"] = "Show";
+  return Label;
+}({});
+
+/**
+ * The props for the Password Toggle component.
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Password Toggle](https://docs.vanillaframework.io/base/forms/#password-toggle).
+ *
+ * It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed.
+ */
+var PasswordToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var {
+      caution,
+      className,
+      error,
+      help,
+      id,
+      label,
+      readOnly,
+      required,
+      success,
+      type,
+      wrapperClassName
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var [isPassword, setIsPassword] = useState(true);
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  var defaultPasswordToggleId = useId();
+  var passwordToggleId = id || defaultPasswordToggleId;
+  var togglePassword = () => {
+    if (isPassword) {
+      setIsPassword(false);
+    } else {
+      setIsPassword(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    help: help,
+    helpId: helpId,
+    required: required,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-form-password-toggle"
+  }, /*#__PURE__*/React.createElement(VanillaLabel, {
+    forId: passwordToggleId,
+    required: required
+  }, label), /*#__PURE__*/React.createElement(Button, {
+    appearance: "base",
+    type: type ? type : "button",
+    className: "u-no-margin--bottom",
+    hasIcon: true,
+    "aria-controls": id,
+    "aria-live": "polite",
+    onClick: () => togglePassword()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-form-password-toggle__label"
+  }, isPassword ? Label.Show : Label.Hide), /*#__PURE__*/React.createElement("i", {
+    className: isPassword ? "p-icon--show" : "p-icon--hide"
+  }))), /*#__PURE__*/React.createElement("input", _extends({
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: classNames("p-form-validation__input", className),
+    id: passwordToggleId,
+    readOnly: readOnly,
+    ref: ref,
+    type: isPassword ? "password" : "text"
+  }, inputProps)));
+});
+export default PasswordToggle;

package/dist-esm/components/PasswordToggle/index.js

@@ -0,0 +1 @@
+export { default } from "./PasswordToggle";