@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/components/TablePagination/utils.js

@@ -0,0 +1,67 @@
+import { Children, cloneElement, useEffect, useState } from "react";
+
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+export var figureSmallScreen = () => {
+  var descriptionElement = document.getElementById("pagination-description");
+  if (!descriptionElement) {
+    return true;
+  }
+  return descriptionElement.getBoundingClientRect().width < 230;
+};
+
+/**
+ * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
+ * for those child components.
+ * @param children - react node children to iterate
+ * @param dataForwardProp - the name of the prop from the children components to override
+ * @param data - actual data to be passed to the prop specified by @param dataForwardProp
+ */
+export var renderChildren = (children, dataForwardProp, data) => {
+  return Children.map(children, child => {
+    return /*#__PURE__*/cloneElement(child, {
+      [dataForwardProp]: data
+    });
+  });
+};
+export var DEFAULT_PAGE_LIMITS = [50, 100, 200];
+export var generatePagingOptions = pageLimits => {
+  return pageLimits.map(limit => ({
+    value: limit,
+    label: "".concat(limit, "/page")
+  }));
+};
+export var getDescription = _ref => {
+  var {
+    description,
+    isSmallScreen,
+    totalItems,
+    itemName,
+    visibleCount
+  } = _ref;
+  if (description) {
+    return description;
+  }
+  if (isSmallScreen) {
+    return "".concat(visibleCount, " out of ").concat(totalItems);
+  }
+  if (visibleCount === totalItems && visibleCount > 1) {
+    return "Showing all ".concat(totalItems, " ").concat(itemName, "s");
+  }
+  return "Showing ".concat(visibleCount, " out of ").concat(totalItems, " ").concat(itemName).concat(totalItems !== 1 ? "s" : "");
+};
+export var useFigureSmallScreen = () => {
+  var [isSmallScreen, setSmallScreen] = useState(false);
+  useEffect(() => {
+    var handleResize = () => {
+      setSmallScreen(figureSmallScreen());
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return isSmallScreen;
+};

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

@@ -0,0 +1,10 @@
+import type { HTMLProps, ReactNode } from "react";
+import type { PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the table row.
+     */
+    children: ReactNode;
+}, HTMLProps<HTMLTableRowElement>>;
+declare const TableRow: ({ children, ...trProps }: Props) => JSX.Element;
+export default TableRow;

package/dist/esm/components/TableRow/TableRow.js

@@ -0,0 +1,15 @@
+var _excluded = ["children"];
+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";
+var TableRow = _ref => {
+  var {
+      children
+    } = _ref,
+    trProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("tr", _extends({
+    role: "row"
+  }, trProps), children);
+};
+export default TableRow;

package/dist/esm/components/TableRow/TableRow.test.d.ts

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

package/dist/esm/components/TableRow/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TableRow";
+export type { Props as TableRowProps } from "./TableRow";

package/dist/esm/components/TableRow/index.js

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

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

@@ -0,0 +1,45 @@
+import type { HTMLProps, ElementType, ReactNode, ComponentType } from "react";
+import type { ClassName } from "../../types";
+export type TabLink<P = null> = {
+    /**
+     * Whether the tab link should have active styling.
+     */
+    active?: boolean;
+    /**
+     * Optional classes applied to the link element.
+     */
+    className?: ClassName;
+    /**
+     * Optional component to be used instead of the default "a" element.
+     */
+    component?: ElementType | ComponentType<P>;
+    /**
+     * Label to be displayed inside the tab link.
+     */
+    label: ReactNode;
+    /**
+     * Optional classes applied to the "li" element.
+     */
+    listItemClassName?: string;
+} & (HTMLProps<HTMLElement> | P);
+export type Props<P = null> = {
+    /**
+     * Optional classes applied to the parent "nav" element.
+     */
+    className?: ClassName;
+    /**
+     * An array of tab link objects.
+     */
+    links: TabLink<P>[];
+    /**
+     * Optional classes applied to the "ul" element.
+     */
+    listClassName?: string;
+};
+/**
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
+Tabs organise and allow navigation between groups of content that are related and at the same level
+of hierarchy.
+ */
+declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => JSX.Element;
+export default Tabs;

package/dist/esm/components/Tabs/Tabs.js

@@ -0,0 +1,42 @@
+var _excluded = ["active", "className", "component", "label", "listItemClassName"];
+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 the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
+Tabs organise and allow navigation between groups of content that are related and at the same level
+of hierarchy.
+ */
+var Tabs = _ref => {
+  var {
+    className,
+    links,
+    listClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement("nav", {
+    className: classNames("p-tabs", className)
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames("p-tabs__list", listClassName)
+  }, links.map((link, i) => {
+    var {
+        active,
+        className,
+        component,
+        label,
+        listItemClassName
+      } = link,
+      rest = _objectWithoutProperties(link, _excluded);
+    var Component = component || "a";
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames("p-tabs__item", listItemClassName),
+      key: i
+    }, /*#__PURE__*/React.createElement(Component, _extends({
+      "aria-selected": active,
+      className: classNames("p-tabs__link", className),
+      "data-testid": "tab-link-".concat(label)
+    }, rest), label));
+  })));
+};
+export default Tabs;

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tabs from "./Tabs";
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+/**
+ * To horizontally align the Tabs with other content, they can be contained within a Row component to
+provide correct gutters.
+ */
+export declare const HorizontallyAligned: Story;

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

@@ -0,0 +1,49 @@
+import React from "react";
+import Row from "../Row";
+import Tabs from "./Tabs";
+var meta = {
+  component: Tabs,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    links: [{
+      active: true,
+      label: "Summary"
+    }, {
+      active: false,
+      label: "Network"
+    }, {
+      active: false,
+      label: "Storage"
+    }, {
+      active: false,
+      label: "Settings"
+    }]
+  }
+};
+
+/**
+ * To horizontally align the Tabs with other content, they can be contained within a Row component to
+provide correct gutters.
+ */
+export var HorizontallyAligned = {
+  render: () => /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Tabs, {
+    links: [{
+      active: true,
+      label: "Summary"
+    }, {
+      active: false,
+      label: "Network"
+    }, {
+      active: false,
+      label: "Storage"
+    }, {
+      active: false,
+      label: "Settings"
+    }]
+  }), /*#__PURE__*/React.createElement("p", null, "There should be gutters and the text should be horizontally aligned")),
+  name: "Horizontally aligned"
+};

package/dist/esm/components/Tabs/Tabs.test.d.ts

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

package/dist/esm/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tabs";
+export type { Props as TabsProps } from "./Tabs";

package/dist/esm/components/Tabs/index.js

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

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

@@ -0,0 +1,70 @@
+import type { TextareaHTMLAttributes, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+/**
+ * The props for the Textarea component.
+ */
+export type Props = PropsWithSpread<{
+    /**
+     * The content for caution validation.
+     */
+    caution?: ReactNode;
+    /**
+     * Optional class(es) to pass to the textarea element.
+     */
+    className?: ClassName;
+    /**
+     * The content for error validation.
+     */
+    error?: ReactNode;
+    /**
+     * Whether the textarea should grow to fit the content automatically.
+     */
+    grow?: boolean;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * The id of the textarea.
+     */
+    id?: string;
+    /**
+     * The label for the field.
+     */
+    label?: ReactNode;
+    /**
+     * Optional class(es) to pass to the label component.
+     */
+    labelClassName?: string;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the form field should have a stacked appearance.
+     */
+    stacked?: boolean;
+    /**
+     * The content for success validation.
+     */
+    success?: ReactNode;
+    /**
+     * Whether to focus on the input on initial render.
+     */
+    takeFocus?: boolean;
+    /**
+     * Optional class(es) to pass to the wrapping Field component
+     */
+    wrapperClassName?: string;
+    /**
+     * Function to occur on keyboard event, 'CTRL + Enter'
+     */
+    onControlEnter?: () => void;
+}, TextareaHTMLAttributes<HTMLTextAreaElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Textarea](https://docs.vanillaframework.io/base/forms/#textarea).
+ *
+ * The Textarea component defines a multi-line text input control.
+ */
+declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => JSX.Element;
+export default Textarea;

package/dist/esm/components/Textarea/Textarea.js

@@ -0,0 +1,115 @@
+var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "onControlEnter", "required", "stacked", "style", "success", "takeFocus", "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 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); }
+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, useLayoutEffect, useRef, useState } from "react";
+import Field from "../Field";
+
+/**
+ * The props for the Textarea component.
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Textarea](https://docs.vanillaframework.io/base/forms/#textarea).
+ *
+ * The Textarea component defines a multi-line text input control.
+ */
+var Textarea = _ref => {
+  var _props$value;
+  var {
+      caution,
+      className,
+      error,
+      grow = false,
+      help,
+      id,
+      label,
+      labelClassName,
+      onKeyUp: _onKeyUp,
+      onControlEnter,
+      required,
+      stacked,
+      style,
+      success,
+      takeFocus = false,
+      wrapperClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var textareaRef = useRef(null);
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  var [innerValue, setInnervalue] = useState(props.defaultValue);
+  var defaultTextAreaId = useId();
+  var textAreaId = id || defaultTextAreaId;
+  var handleKeyDown = useCallback(event => {
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey) && document.activeElement === textareaRef.current) {
+      onControlEnter();
+    }
+  }, [onControlEnter]);
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  useEffect(() => {
+    if (takeFocus) {
+      textareaRef.current.focus();
+    }
+  }, [takeFocus]);
+  useLayoutEffect(() => {
+    if (grow) {
+      var textArea = textareaRef.current;
+      if (textArea) {
+        textArea.style.height = "0px";
+        var scrollHeight = textArea.scrollHeight;
+        textArea.style.height = "".concat(scrollHeight, "px");
+      }
+    }
+  }, [textareaRef, grow, innerValue, props.value]);
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    forId: textAreaId,
+    help: help,
+    helpId: helpId,
+    label: label,
+    labelClassName: labelClassName,
+    required: required,
+    stacked: stacked,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("textarea", _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: textAreaId,
+    onKeyUp: evt => {
+      _onKeyUp && _onKeyUp(evt);
+    },
+    onChange: evt => {
+      if (!props.value) {
+        setInnervalue(evt.target.value);
+      }
+    },
+    ref: textareaRef,
+    style: grow && _objectSpread({
+      minHeight: "5rem",
+      resize: "none",
+      overflow: "hidden",
+      boxSizing: "border-box"
+    }, style) || style
+  }, props, {
+    value: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : innerValue
+  })));
+};
+export default Textarea;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Textarea from "./Textarea";
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const DynamicHeight: Story;

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

@@ -0,0 +1,55 @@
+import Textarea from "./Textarea";
+var meta = {
+  component: Textarea,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    success: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    label: "Tell us about your project or interest",
+    id: "textarea2",
+    rows: 3,
+    defaultValue: "Ubuntu"
+  }
+};
+export var DynamicHeight = {
+  name: "Dynamic Height",
+  args: {
+    label: "Text area that will dynamically adjust its height based on content",
+    defaultValue: "Ubuntu",
+    grow: true
+  }
+};

package/dist/esm/components/Textarea/Textarea.test.d.ts

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

package/dist/esm/components/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Textarea";
+export type { Props as TextareaProps } from "./Textarea";

package/dist/esm/components/Textarea/index.js

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

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

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import type { WindowFitment } from "../../hooks";
+import type { ClassName, ValueOf } from "../../types";
+export type CSSPosition = "static" | "absolute" | "fixed" | "relative" | "sticky" | "initial" | "inherit";
+export type PositionStyle = {
+    left: number;
+    pointerEvents?: string;
+    position: CSSPosition;
+    top: number;
+};
+export declare const position: {
+    readonly btmCenter: "btm-center";
+    readonly btmLeft: "btm-left";
+    readonly btmRight: "btm-right";
+    readonly left: "left";
+    readonly right: "right";
+    readonly topCenter: "top-center";
+    readonly topLeft: "top-left";
+    readonly topRight: "top-right";
+};
+export type Position = ValueOf<typeof position>;
+export type Props = {
+    /**
+     * Whether the tooltip should adjust to fit in the screen.
+     */
+    autoAdjust?: boolean;
+    /**
+     * Element on which to apply the tooltip.
+     */
+    children: ReactNode;
+    /**
+     * An optional class to apply to the wrapping element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the tooltip should follow the mouse.
+     */
+    followMouse?: boolean;
+    /**
+     * Message to display when the element is hovered.
+     */
+    message?: ReactNode;
+    /**
+     * Position of the tooltip relative to the element.
+     */
+    position?: Position;
+    /**
+     * An optional class to apply to the element that wraps the children.
+     */
+    positionElementClassName?: string;
+    /**
+     * An optional class to apply to the tooltip message element.
+     */
+    tooltipClassName?: string;
+    /**
+     * The z-index value of the tooltip message element.
+     */
+    zIndex?: number;
+    /**
+     * Delay in ms after which Tooltip will appear (defaults to 350ms).
+     */
+    delay?: number;
+};
+export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
+/**
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
+ *
+ * Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.
+ *
+ * They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.
+ *
+ * An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.
+ */
+declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
+export default Tooltip;