@canonical/react-components 1.3.0 → 1.3.1

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

@@ -0,0 +1,215 @@
+var _excluded = ["autoAdjust", "children", "className", "closeOnEsc", "closeOnOutsideClick", "constrainPanelWidth", "dropdownClassName", "dropdownProps", "hasToggleIcon", "links", "onToggleMenu", "position", "positionNode", "scrollOverflow", "toggle", "toggleAppearance", "toggleClassName", "toggleDisabled", "toggleLabel", "toggleLabelFirst", "toggleProps", "visible"];
+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, { useCallback, useEffect, useId, useRef, useState } from "react";
+import usePortal from "react-useportal";
+import { useListener, usePrevious } from "../../hooks";
+import Button from "../Button";
+import ContextualMenuDropdown from "./ContextualMenuDropdown";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Toggle"] = "Toggle menu";
+  return Label;
+}({});
+
+/**
+ * The props for the ContextualMenu component.
+ * @template L - The type of the link props.
+ */
+
+/**
+ * Get the node to use for positioning the menu.
+ * @param wrapper - The component's wrapping element.
+ * @param positionNode - A positioning node, if supplied.
+ * @return A node or null.
+ */
+var getPositionNode = (wrapper, positionNode) => {
+  if (positionNode) {
+    return positionNode;
+  } else if (wrapper) {
+    // We want to position the menu in relation to the toggle, if it exists.
+    var toggle = wrapper.querySelector(".p-contextual-menu__toggle");
+    return toggle || wrapper;
+  }
+  return null;
+};
+
+/**
+ * Whether the positioning node is visible.
+ * @param positionNode - The node that is used to position the menu.
+ * @return Whether the positioning node is visible.
+ */
+var getPositionNodeVisible = positionNode => {
+  return !positionNode || positionNode.offsetParent !== null;
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
+ *
+ * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
+ */
+var ContextualMenu = _ref => {
+  var {
+      autoAdjust = true,
+      children,
+      className,
+      closeOnEsc = true,
+      closeOnOutsideClick = true,
+      constrainPanelWidth,
+      dropdownClassName,
+      dropdownProps,
+      hasToggleIcon,
+      links,
+      onToggleMenu,
+      position = "right",
+      positionNode,
+      scrollOverflow,
+      toggle,
+      toggleAppearance,
+      toggleClassName,
+      toggleDisabled,
+      toggleLabel,
+      toggleLabelFirst = true,
+      toggleProps,
+      visible = false
+    } = _ref,
+    wrapperProps = _objectWithoutProperties(_ref, _excluded);
+  var id = useId();
+  var wrapper = useRef(null);
+  var [positionCoords, setPositionCoords] = useState();
+  var [adjustedPosition, setAdjustedPosition] = useState(position);
+  useEffect(() => {
+    setAdjustedPosition(position);
+  }, [position, autoAdjust]);
+
+  // Update the coordinates of the position node.
+  var updatePositionCoords = useCallback(() => {
+    var parent = getPositionNode(wrapper.current, positionNode);
+    if (!parent) {
+      return null;
+    }
+    setPositionCoords(parent.getBoundingClientRect());
+  }, [wrapper, positionNode]);
+  var {
+    openPortal,
+    closePortal,
+    isOpen,
+    Portal
+  } = usePortal({
+    closeOnEsc,
+    closeOnOutsideClick,
+    isOpen: visible,
+    onOpen: () => {
+      // Call the toggle callback, if supplied.
+      onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(true);
+      // When the menu opens then update the coordinates of the parent.
+      updatePositionCoords();
+    },
+    onClose: () => {
+      // Call the toggle callback, if supplied.
+      onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(false);
+    },
+    programmaticallyOpen: true
+  });
+  var previousVisible = usePrevious(visible);
+  var labelNode = toggleLabel && typeof toggleLabel === "string" ? /*#__PURE__*/React.createElement("span", null, toggleLabel) : /*#__PURE__*/React.isValidElement(toggleLabel) ? toggleLabel : null;
+  var contextualMenuClassName = classNames(className, "p-contextual-menu", {
+    ["p-contextual-menu--".concat(adjustedPosition)]: adjustedPosition !== "right"
+  });
+
+  // Update the coordinates of the wrapper once it mounts to the dom. This uses
+  // The callback ref pattern:
+  // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
+  var wrapperRef = useCallback(node => {
+    wrapper.current = node;
+    if (node !== null) {
+      updatePositionCoords();
+    }
+  }, [updatePositionCoords]);
+
+  // Handle controlling updates to the menu visibility from outside
+  // the component.
+  useEffect(() => {
+    if (visible !== previousVisible) {
+      if (visible && !isOpen) {
+        openPortal();
+      } else if (!visible && isOpen) {
+        closePortal();
+      }
+    }
+  }, [closePortal, openPortal, visible, isOpen, previousVisible]);
+  var onResize = useCallback(evt => {
+    var parent = getPositionNode(wrapper.current, positionNode);
+    if (parent && !getPositionNodeVisible(parent)) {
+      // Hide the menu if the item has become hidden. This might happen in
+      // a responsive table when columns become hidden as the page
+      // becomes smaller.
+      closePortal(evt);
+    } else {
+      // Update the coordinates so that the menu stays relative to the
+      // toggle button.
+      updatePositionCoords();
+    }
+  }, [closePortal, positionNode, updatePositionCoords]);
+  var onScroll = useCallback(e => {
+    var parent = getPositionNode(wrapper.current, positionNode);
+    // update position if the scroll event is triggered by the parent of the menu
+    if (parent && e.target.contains(parent)) {
+      // Update the coordinates so that the menu stays relative to the
+      // toggle button.
+      updatePositionCoords();
+    }
+  }, [positionNode, updatePositionCoords]);
+  useListener(window, onResize, "resize", true, isOpen);
+  useListener(window, onScroll, "scroll", false, isOpen, true);
+  var toggleNode = null;
+  if (toggle) {
+    toggleNode = toggle;
+  } else if (hasToggleIcon || toggleLabel) {
+    toggleNode = /*#__PURE__*/React.createElement(Button, _extends({
+      appearance: toggleAppearance,
+      "aria-controls": id,
+      "aria-expanded": isOpen ? "true" : "false",
+      "aria-label": toggleLabel ? null : Label.Toggle,
+      "aria-pressed": isOpen ? "true" : "false",
+      "aria-haspopup": "true",
+      className: classNames("p-contextual-menu__toggle", toggleClassName),
+      disabled: toggleDisabled,
+      hasIcon: hasToggleIcon,
+      onClick: evt => {
+        if (!isOpen) {
+          openPortal(evt);
+        } else {
+          closePortal(evt);
+        }
+      },
+      type: "button"
+    }, toggleProps), toggleLabelFirst ? labelNode : null, hasToggleIcon ? /*#__PURE__*/React.createElement("i", {
+      className: classNames("p-icon--chevron-down p-contextual-menu__indicator", {
+        "is-light": ["negative", "positive"].includes(toggleAppearance)
+      })
+    }) : null, toggleLabelFirst ? null : labelNode);
+  }
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: contextualMenuClassName,
+    ref: wrapperRef
+  }, wrapperProps), toggleNode, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ContextualMenuDropdown, _extends({
+    adjustedPosition: adjustedPosition,
+    autoAdjust: autoAdjust,
+    handleClose: closePortal,
+    constrainPanelWidth: constrainPanelWidth,
+    dropdownClassName: dropdownClassName,
+    dropdownContent: children,
+    id: id,
+    isOpen: isOpen,
+    links: links,
+    position: position,
+    positionCoords: positionCoords,
+    contextualMenuClassName: contextualMenuClassName,
+    positionNode: getPositionNode(wrapper.current),
+    scrollOverflow: scrollOverflow,
+    setAdjustedPosition: setAdjustedPosition
+  }, dropdownProps))));
+};
+export default ContextualMenu;

package/dist-esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -0,0 +1,249 @@
+var _excluded = ["children", "className", "onClick"],
+  _excluded2 = ["adjustedPosition", "autoAdjust", "handleClose", "constrainPanelWidth", "dropdownClassName", "dropdownContent", "id", "isOpen", "links", "position", "positionCoords", "positionNode", "scrollOverflow", "setAdjustedPosition", "contextualMenuClassName"];
+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; }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import classNames from "classnames";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useWindowFitment } from "../../../hooks";
+import Button from "../../Button";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Dropdown"] = "submenu";
+  return Label;
+}({});
+
+/**
+ * The type of the menu links.
+ * @template L - The type of the link props.
+ */
+
+/**
+ * The props for the ContextualMenuDropdown component.
+ * @template L - The type of the link props.
+ */
+
+/**
+ * Calculate the styles for the menu.
+ * @param position - The menu position.
+ * @param positionCoords - The coordinates of the position node.
+ * @param constrainPanelWidth - Whether the menu width should be constrained to the position width.
+ */
+var getPositionStyle = (position, verticalPosition, positionCoords, constrainPanelWidth) => {
+  if (!positionCoords) {
+    return null;
+  }
+  var {
+    height,
+    left,
+    top,
+    width
+  } = positionCoords;
+  var topPos = verticalPosition === "bottom" ? top + height + (window.scrollY || 0) : top + (window.scrollY || 0);
+  var leftPos = left;
+  switch (position) {
+    case "left":
+      leftPos = left;
+      break;
+    case "center":
+      leftPos = left + width / 2;
+      break;
+    case "right":
+      leftPos = left + width;
+      break;
+    default:
+      break;
+  }
+  return _objectSpread({
+    position: "absolute",
+    left: leftPos,
+    top: topPos
+  }, constrainPanelWidth ? {
+    width
+  } : null);
+};
+
+/**
+ * Calculate the adjusted position in relation to the window.
+ * @param position - The requested position.
+ * @param fitsWindow - The window fitment info.
+ * @return The new position.
+ */
+export var adjustForWindow = (position, fitsWindow) => {
+  var newPosition = position;
+  if (!fitsWindow.fromRight.fitsLeft && newPosition === "right") {
+    newPosition = "left";
+  }
+  if (!fitsWindow.fromLeft.fitsRight && newPosition === "left") {
+    newPosition = "right";
+  }
+  // If the menu doesn't fit to the left or the right then center it.
+  if (!fitsWindow.fromLeft.fitsRight && !fitsWindow.fromRight.fitsLeft && (newPosition === "left" || newPosition === "right")) {
+    newPosition = "center";
+  }
+  // If the menu doesn't fit when centered then find a new position.
+  if (newPosition === "center" && (!fitsWindow.fromCenter.fitsCentered.fitsRight || !fitsWindow.fromCenter.fitsCentered.fitsLeft)) {
+    if (fitsWindow.fromLeft.fitsRight) {
+      newPosition = "left";
+    }
+    if (fitsWindow.fromRight.fitsLeft) {
+      newPosition = "right";
+    }
+  }
+  return newPosition;
+};
+
+/**
+ * Generate a menu link
+ * @template L - The type of the link props.
+ * @param link - A button
+ * @param key - A key for the DOM.
+ * @param handleClose - The function to close the menu.
+ */
+var generateLink = (link, key, handleClose) => {
+  var {
+      children,
+      className,
+      onClick
+    } = link,
+    props = _objectWithoutProperties(link, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    className: classNames("p-contextual-menu__link", className),
+    key: key,
+    onClick: onClick ? evt => {
+      handleClose(evt.nativeEvent);
+      onClick(evt);
+    } : null
+  }, props), children);
+};
+var getClosestScrollableParent = node => {
+  var currentNode = node;
+  while (currentNode && currentNode !== document.body) {
+    var {
+      overflowY,
+      overflowX
+    } = window.getComputedStyle(currentNode);
+    if (["auto", "scroll", "overlay"].includes(overflowY) && ["auto", "scroll", "overlay"].includes(overflowX)) {
+      return currentNode;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return document.body;
+};
+var ContextualMenuDropdown = _ref => {
+  var {
+      adjustedPosition,
+      autoAdjust,
+      handleClose,
+      constrainPanelWidth,
+      dropdownClassName,
+      dropdownContent,
+      id,
+      isOpen,
+      links,
+      position,
+      positionCoords,
+      positionNode,
+      scrollOverflow,
+      setAdjustedPosition,
+      contextualMenuClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded2);
+  var dropdown = useRef(null);
+  var [verticalPosition, setVerticalPosition] = useState("bottom");
+  var [positionStyle, setPositionStyle] = useState(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
+  var [maxHeight, setMaxHeight] = useState();
+  // Update the styles to position the menu.
+  var updatePositionStyle = useCallback(() => {
+    setPositionStyle(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
+  }, [adjustedPosition, positionCoords, verticalPosition, constrainPanelWidth]);
+  var updateVerticalPosition = useCallback(() => {
+    var _dropdown$current$get;
+    if (!positionNode) {
+      return null;
+    }
+    var scrollableParent = getClosestScrollableParent(positionNode);
+    if (!scrollableParent) {
+      return null;
+    }
+    var scrollableParentRect = scrollableParent.getBoundingClientRect();
+    var toggleRect = positionNode.getBoundingClientRect();
+
+    // Calculate the rect in relation to the scrollableParent
+    var relativeToScrollParentRect = {
+      top: toggleRect.top - scrollableParentRect.top,
+      bottom: toggleRect.bottom - scrollableParentRect.top
+    };
+    var scrollParentSpaceBelow = scrollableParentRect.height - relativeToScrollParentRect.bottom;
+    var scrollParentSpaceAbove = relativeToScrollParentRect.top;
+    var dropdownHeight = (_dropdown$current$get = dropdown.current.getBoundingClientRect().height) !== null && _dropdown$current$get !== void 0 ? _dropdown$current$get : 0;
+    var windowSpaceBelow = window.innerHeight - toggleRect.bottom;
+    setVerticalPosition(scrollParentSpaceBelow >= dropdownHeight && windowSpaceBelow >= dropdownHeight || windowSpaceBelow > scrollParentSpaceAbove ? "bottom" : "top");
+  }, [positionNode]);
+
+  // Update the position when the window fitment info changes.
+  var onUpdateWindowFitment = useCallback(fitsWindow => {
+    if (autoAdjust) {
+      setAdjustedPosition(adjustForWindow(position, fitsWindow));
+      updateVerticalPosition();
+    }
+    if (scrollOverflow) {
+      setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16);
+    }
+  }, [autoAdjust, position, scrollOverflow, setAdjustedPosition, updateVerticalPosition]);
+
+  // Handle adjusting the horizontal position and scrolling of the dropdown so that it remains on screen.
+  useWindowFitment(dropdown.current, positionNode, onUpdateWindowFitment, 0, isOpen && (autoAdjust || scrollOverflow));
+
+  // Update the styles when the position changes.
+  useEffect(() => {
+    updatePositionStyle();
+  }, [adjustedPosition, updatePositionStyle]);
+  useEffect(() => {
+    updateVerticalPosition();
+  }, [updateVerticalPosition]);
+  return (
+    /*#__PURE__*/
+    // Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).
+    // Extra span wrapper is required as the dropdown is rendered in a portal.
+    React.createElement("span", {
+      className: contextualMenuClassName,
+      style: positionStyle
+    }, /*#__PURE__*/React.createElement("span", _extends({
+      className: classNames("p-contextual-menu__dropdown", dropdownClassName),
+      id: id,
+      "aria-hidden": isOpen ? "false" : "true",
+      "aria-label": Label.Dropdown,
+      ref: dropdown,
+      style: _objectSpread(_objectSpread(_objectSpread({}, constrainPanelWidth && positionStyle !== null && positionStyle !== void 0 && positionStyle.width ? {
+        width: positionStyle.width,
+        minWidth: 0,
+        maxWidth: "none"
+      } : {}), scrollOverflow ? {
+        maxHeight,
+        minHeight: "2rem",
+        overflowX: "auto"
+      } : {}), verticalPosition === "top" ? {
+        bottom: "0"
+      } : {})
+    }, props), dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(handleClose) : dropdownContent : links.map((item, i) => {
+      if (Array.isArray(item)) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "p-contextual-menu__group",
+          key: i
+        }, item.map((link, j) => generateLink(link, j, handleClose)));
+      } else if (typeof item === "string") {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "p-contextual-menu__non-interactive",
+          key: i
+        }, item);
+      }
+      return generateLink(item, i, handleClose);
+    })))
+  );
+};
+export default ContextualMenuDropdown;

package/dist-esm/components/ContextualMenu/ContextualMenuDropdown/index.js

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

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

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

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

@@ -0,0 +1,28 @@
+var _excluded = ["children", "className", "image", "title"];
+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";
+/**
+ * This is a [React](https://reactjs.org/) component to represent an empty state.
+ */
+export var EmptyState = _ref => {
+  var {
+      children,
+      className,
+      image,
+      title
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(["row", className])
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "u-align--right col-4 col-medium-2 col-small-1"
+  }, image), /*#__PURE__*/React.createElement("div", {
+    className: "u-align--left col-8 col-medium-4 col-small-3"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "p-heading--4 u-no-margin--bottom"
+  }, title), children));
+};
+export default EmptyState;

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

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

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

@@ -0,0 +1,126 @@
+var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "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], 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 Label from "../Label";
+import Col from "../Col";
+
+/**
+ * The props for the Field component.
+ */
+
+var generateHelpText = _ref => {
+  var {
+    help,
+    helpId,
+    helpClassName,
+    isTickElement
+  } = _ref;
+  return help ? /*#__PURE__*/React.createElement("p", {
+    className: classNames("p-form-help-text", helpClassName, {
+      "is-tick-element": isTickElement
+    }),
+    id: helpId
+  }, help) : null;
+};
+var generateError = (error, caution, success, validationId) => {
+  if (!error && !caution && !success) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("p", {
+    className: "p-form-validation__message",
+    id: validationId
+  }, error || caution || success);
+};
+var generateLabel = (forId, required, label, labelClassName, stacked) => {
+  if (!label) {
+    return null;
+  }
+  var labelNode = /*#__PURE__*/React.createElement(Label, {
+    className: labelClassName,
+    forId: forId,
+    required: required
+  }, label);
+  if (stacked) {
+    return /*#__PURE__*/React.createElement(Col, {
+      size: 4
+    }, labelNode);
+  }
+  return labelNode;
+};
+var generateContent = _ref2 => {
+  var {
+    isSelect,
+    children,
+    labelFirst,
+    labelNode,
+    help,
+    helpClassName,
+    error,
+    caution,
+    success,
+    validationId,
+    helpId,
+    isTickElement
+  } = _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));
+};
+var Field = _ref3 => {
+  var {
+      caution,
+      children,
+      className,
+      error,
+      forId,
+      help,
+      helpClassName,
+      helpId,
+      isSelect,
+      isTickElement,
+      label,
+      labelClassName,
+      labelFirst = true,
+      required,
+      stacked,
+      success,
+      validationId
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
+  var content = generateContent({
+    isSelect,
+    isTickElement,
+    children,
+    labelFirst,
+    labelNode,
+    help,
+    helpClassName,
+    error,
+    caution,
+    success,
+    validationId,
+    helpId
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("p-form__group", "p-form-validation", className, {
+      "is-error": error,
+      "is-caution": caution,
+      "is-success": success,
+      row: stacked
+    })
+  }, props), labelFirst && labelNode, stacked ? /*#__PURE__*/React.createElement(Col, {
+    size: 8
+  }, content) : content);
+};
+export default Field;

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

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

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

@@ -0,0 +1,28 @@
+var _excluded = ["children", "className", "inline", "stacked"];
+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";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Form](https://docs.vanillaframework.io/base/forms).
+ *
+ * Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
+ */
+var Form = _ref => {
+  var {
+      children,
+      className,
+      inline,
+      stacked
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("form", _extends({
+    className: classNames(className, {
+      "p-form": inline || stacked,
+      "p-form--inline": inline,
+      "p-form--stacked": stacked
+    })
+  }, props), children);
+};
+export default Form;

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

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