@canonical/react-components 1.2.4 → 1.3.0

package/dist/components/Notification/Notification.stories.js

@@ -1,201 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Timestamp = exports.Timeout = exports.Positive = exports.Negative = exports.Inline = exports.Information = exports.Dismissible = exports.Caution = exports.Borderless = exports.Actions = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Notification = _interopRequireWildcard(require("./Notification"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const meta = {
-  component: _Notification.default,
-  tags: ["autodocs"],
-  argTypes: {
-    borderless: {
-      control: {
-        type: "boolean"
-      }
-    },
-    children: {
-      control: {
-        type: "text"
-      }
-    },
-    inline: {
-      control: {
-        type: "boolean"
-      }
-    },
-    severity: {
-      control: {
-        type: "radio"
-      },
-      options: Object.values(_Notification.NotificationSeverity)
-    },
-    timestamp: {
-      control: {
-        type: "text"
-      }
-    },
-    title: {
-      control: {
-        type: "text"
-      }
-    }
-  },
-  args: {
-    borderless: false,
-    inline: false,
-    severity: _Notification.NotificationSeverity.INFORMATION
-  }
-};
-var _default = exports.default = meta;
-/**
- * The information severity should be used to convey an information message.
- */
-const Information = exports.Information = {
-  name: "Information",
-  args: {
-    children: "Anyone with access can view your invited users.",
-    severity: "information",
-    title: "Permissions changed"
-  }
-};
-
-/**
- * The caution severity should be used to convey information that is not critical but the user should be aware of.
- */
-const Caution = exports.Caution = {
-  name: "Caution",
-  args: {
-    children: "Custom storage configuration is only supported on Ubuntu, CentOS and RHEL.",
-    severity: "caution",
-    title: "Blocked"
-  }
-};
-
-/**
- * The negative severity should be used to convey information that is critical and the user should take action.
- */
-const Negative = exports.Negative = {
-  name: "Negative",
-  args: {
-    children: "Node must be connected to a network.",
-    severity: "negative",
-    title: "Error"
-  }
-};
-
-/**
- * The positive severity should be used to convey success or completion.
- */
-const Positive = exports.Positive = {
-  name: "Positive",
-  args: {
-    children: "Code successfully reformatted.",
-    severity: "positive",
-    title: "Success"
-  }
-};
-
-/**
- * When vertical space is limited, you can use the inline variant.
- */
-const Inline = exports.Inline = {
-  name: "Inline",
-  args: {
-    children: "Not enough space.",
-    inline: true,
-    severity: "negative",
-    title: "Error:"
-  }
-};
-
-/**
- * In cases where a notification sits inside another component, such as a table cell or a card, it may be useful to remove the outer border and highlight bar.
- */
-const Borderless = exports.Borderless = {
-  name: "Borderless",
-  args: {
-    borderless: true,
-    children: "Only 8GB storage remaining.",
-    severity: "caution",
-    title: "Warning"
-  }
-};
-
-/**
- * Actions will appear below the notification message.
- */
-const Actions = exports.Actions = {
-  name: "Actions",
-  args: {
-    actions: [{
-      label: "Action 1",
-      onClick: () => null
-    }, {
-      label: "Action 2",
-      onClick: () => null
-    }],
-    children: "Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.",
-    severity: "information",
-    title: "Title"
-  }
-};
-
-/**
- * Notifications that can be dismissed should be given an onDismiss function.
- */
-const Dismissible = exports.Dismissible = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [show, setShow] = (0, _react.useState)(true);
-    if (!show) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(_Notification.default, {
-      onDismiss: () => setShow(false),
-      title: "Dismissible"
-    }, "Click the dismiss button to get rid of me.");
-  },
-  name: "Dismissible"
-};
-
-/**
- * Notifications can be automatically dismissed after a timeout interval.
- */
-const Timeout = exports.Timeout = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [show, setShow] = (0, _react.useState)(true);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [timer, setTimer] = (0, _react.useState)(0);
-    if (!show) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(_Notification.default, {
-      actions: [{
-        label: "Start timer",
-        onClick: () => setTimer(3000)
-      }],
-      onDismiss: () => setShow(false),
-      timeout: timer,
-      title: "Timeout"
-    }, "Click the action to start a 3 second timer.");
-  },
-  name: "Timeout"
-};
-
-/**
- * For notifications in which recency is important, you can include a section for time.
- */
-const Timestamp = exports.Timestamp = {
-  name: "Timestamp",
-  args: {
-    children: "Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.",
-    severity: "information",
-    timestamp: "1h ago",
-    title: "Title"
-  }
-};

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

@@ -1,2 +0,0 @@
-export { default, NotificationSeverity } from "./Notification";
-export type { Props as NotificationProps } from "./Notification";

package/dist/components/NotificationProvider/NotificationProvider.d.ts

@@ -1,5 +0,0 @@
-import { FC } from "react";
-import { NotificationHelper, NotifyProviderProps } from "./types";
-export declare const NotificationProvider: FC<NotifyProviderProps>;
-export declare function useNotify(): NotificationHelper;
-export declare const NotificationConsumer: FC;

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

@@ -1,3 +0,0 @@
-export { NotificationConsumer, NotificationProvider, useNotify, } from "./NotificationProvider";
-export { info, success, failure, queue } from "./messageBuilder";
-export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./types";

package/dist/components/NotificationProvider/messageBuilder.d.ts

@@ -1,6 +0,0 @@
-import { NotificationAction, NotificationType, QueuedNotification } from "./types";
-import { ReactNode } from "react";
-export declare const queue: (notification: NotificationType) => QueuedNotification;
-export declare const info: (message: ReactNode, title?: string) => NotificationType;
-export declare const success: (message: ReactNode, title?: string) => NotificationType;
-export declare const failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;

package/dist/components/NotificationProvider/types.d.ts

@@ -1,35 +0,0 @@
-import { ReactNode } from "react";
-import { ValueOf } from "../../types";
-import { NotificationSeverity } from "../Notification";
-export interface NotifyProviderProps {
-    state?: {
-        queuedNotification: NotificationType | null;
-    };
-    pathname?: string;
-    children: ReactNode;
-}
-export interface NotificationAction {
-    label: string;
-    onClick: () => void;
-}
-export interface NotificationType {
-    actions?: NotificationAction[];
-    message: ReactNode;
-    title?: string;
-    type: ValueOf<typeof NotificationSeverity>;
-}
-export interface QueuedNotification {
-    state?: {
-        queuedNotification: NotificationType | null;
-    };
-    pathname?: string;
-}
-export interface NotificationHelper {
-    notification: NotificationType | null;
-    clear: () => void;
-    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;
-    info: (message: ReactNode, title?: string) => NotificationType;
-    success: (message: ReactNode, title?: string) => NotificationType;
-    queue: (notification: NotificationType) => QueuedNotification;
-    setDeduplicated: (value: NotificationType) => NotificationType;
-}

package/dist/components/Pagination/Pagination.d.ts

@@ -1,102 +0,0 @@
-import type { HTMLProps } from "react";
-import type { PropsWithSpread } from "../../types";
-type BaseProps = {
-    /**
-     * Whether to scroll to the top of the list on page change.
-     */
-    scrollToTop?: boolean;
-    /**
-     * The number of pages at which to truncate the pagination items.
-     */
-    truncateThreshold?: number;
-    /**
-     * Whether the pagination is ceneterd on the page.
-     */
-    centered?: boolean;
-    /**
-     * Whether to show the labels for forward and back buttons.
-     */
-    showLabels?: boolean;
-    /**
-     * Whether forward button is disabled.
-     */
-    forwardDisabled?: boolean;
-    /**
-     * Whether back button is disabled.
-     */
-    backDisabled?: boolean;
-    /**
-     * Custom label for forward button.
-     */
-    forwardLabel?: string;
-    /**
-     * Custom label for back button.
-     */
-    backLabel?: string;
-};
-type NumberedPagination = BaseProps & {
-    /**
-     * The current page being viewed.<br>
-     * **Required for Numbered Pagination.**
-     */
-    currentPage: number;
-    /**
-     * The number of items to show per page.<br>
-     * **Required for numbered pagination.**
-     */
-    itemsPerPage: number;
-    /**
-     * Function to handle paginating the items.<br>
-     * **Required for numbered pagination.**
-     */
-    paginate: (page: number) => void;
-    /**
-     * The total number of items.<br>
-     * **Required for numbered pagination.**
-     */
-    totalItems: number;
-    /**
-     * Whether to hide the pagination items.
-     */
-    hideNumbers?: boolean;
-    /**
-     * Function to handle page transition to a higher-numbered page for
-     * numbered pagination and to next page for buttons-only pagination.<br>
-     * _Called with page parameter for numbered pagination and_
-     * _with no parameter for buttons-only pagination._<br>
-     * **Required for buttons-only pagination.**
-     */
-    onForward?: (page: number) => void;
-    /**
-     * Function to handle page transition to a lower-numbered page for
-     * numbered pagination and to next page for buttons-only pagination.<br>
-     * _Called with page parameter for numbered pagination and_
-     * _with no parameter for buttons-only pagination._<br>
-     * **Required for buttons-only pagination.**
-     */
-    onBack?: (page: number) => void;
-};
-type ButtonsOnlyPagination = BaseProps & {
-    itemsPerPage?: never;
-    totalItems?: never;
-    currentPage?: never;
-    paginate?: never;
-    hideNumbers?: never;
-    onForward: () => void;
-    onBack: () => void;
-};
-export type Props = PropsWithSpread<NumberedPagination | ButtonsOnlyPagination, HTMLProps<HTMLElement>>;
-/**
-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.
- */
-declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, showLabels, hideNumbers, onForward, onBack, forwardDisabled, backDisabled, forwardLabel, backLabel, ...navProps }: Props) => JSX.Element;
-export default Pagination;

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

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Pagination from "./Pagination";
-declare const meta: Meta<typeof Pagination>;
-export default meta;
-type Story = StoryObj<typeof Pagination>;
-export declare const Default: Story;
-export declare const TruncatedNumberedPagination: Story;
-export declare const DisabledControlsNumberedPagination: Story;
-export declare const CenteredNumberedPagination: Story;
-export declare const DisabledPaginationItemsNumberedPagination: Story;
-export declare const DefaultButtonsOnlyPagination: Story;
-export declare const DefaultButtonLabelsButtonsOnlyPagination: Story;
-export declare const CustomButtonLabelsButtonsOnlyPagination: Story;
-export declare const CenteredButtonsOnlyPagination: Story;

package/dist/components/Pagination/Pagination.stories.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TruncatedNumberedPagination = exports.DisabledPaginationItemsNumberedPagination = exports.DisabledControlsNumberedPagination = exports.DefaultButtonsOnlyPagination = exports.DefaultButtonLabelsButtonsOnlyPagination = exports.Default = exports.CustomButtonLabelsButtonsOnlyPagination = exports.CenteredNumberedPagination = exports.CenteredButtonsOnlyPagination = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Pagination = _interopRequireDefault(require("./Pagination"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Pagination.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    itemsPerPage: 20,
-    totalItems: 100,
-    paginate: () => {},
-    currentPage: 3
-  }
-};
-const TruncatedNumberedPagination = exports.TruncatedNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 10,
-    totalItems: 1000,
-    paginate: () => {},
-    currentPage: 34
-  }),
-  name: "Truncated (Numbered Pagination)"
-};
-const DisabledControlsNumberedPagination = exports.DisabledControlsNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 20,
-    totalItems: 100,
-    paginate: () => {},
-    currentPage: 1
-  }),
-  name: "Disabled controls (Numbered Pagination)"
-};
-const CenteredNumberedPagination = exports.CenteredNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 10,
-    totalItems: 50,
-    paginate: () => {},
-    currentPage: 1,
-    centered: true
-  }),
-  name: "Centered (Numbered Pagination)"
-};
-const DisabledPaginationItemsNumberedPagination = exports.DisabledPaginationItemsNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 10,
-    totalItems: 50,
-    paginate: () => {},
-    currentPage: 1,
-    hideNumbers: true
-  }),
-  name: "Disabled pagination items (Numbered Pagination)"
-};
-const DefaultButtonsOnlyPagination = exports.DefaultButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {}
-  }),
-  name: "Default (Buttons-only Pagination)"
-};
-const DefaultButtonLabelsButtonsOnlyPagination = exports.DefaultButtonLabelsButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {},
-    showLabels: true
-  }),
-  name: "Default button labels (Buttons-only Pagination)"
-};
-const CustomButtonLabelsButtonsOnlyPagination = exports.CustomButtonLabelsButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {},
-    showLabels: true,
-    forwardLabel: "Custom forward label",
-    backLabel: "Custom back label"
-  }),
-  name: "Custom button labels (Buttons-only Pagination)"
-};
-const CenteredButtonsOnlyPagination = exports.CenteredButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {},
-    centered: true
-  }),
-  name: "Centered (Buttons-only Pagination)"
-};

package/dist/components/Pagination/PaginationButton/PaginationButton.d.ts

@@ -1,30 +0,0 @@
-import type { MouseEventHandler } from "react";
-export declare enum Label {
-    Next = "Next page",
-    Previous = "Previous page"
-}
-export type PaginationDirection = "forward" | "back";
-export type Props = {
-    /**
-     * The direction of the pagination.
-     */
-    direction: PaginationDirection;
-    /**
-     * Whether the pagination button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Function to handle clicking the pagination button.
-     */
-    onClick: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Whether to show the label for button.
-     */
-    showLabel?: boolean;
-    /**
-     * Custom label for button.
-     */
-    label?: string;
-};
-declare const PaginationButton: ({ direction, onClick, disabled, showLabel, label, }: Props) => JSX.Element;
-export default PaginationButton;

package/dist/components/Pagination/PaginationButton/index.d.ts

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

package/dist/components/Pagination/PaginationItem/PaginationItem.d.ts

@@ -1,17 +0,0 @@
-import type { MouseEventHandler } from "react";
-export type Props = {
-    /**
-     * Whether the pagination item is active, i.e. the current page is this page.
-     */
-    isActive?: boolean;
-    /**
-     * The page number.
-     */
-    number: number;
-    /**
-     * Function to handle clicking the pagination item.
-     */
-    onClick: MouseEventHandler<HTMLButtonElement>;
-};
-declare const PaginationItem: ({ number, onClick, isActive, }: Props) => JSX.Element;
-export default PaginationItem;

package/dist/components/Pagination/PaginationItem/index.d.ts

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

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

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

package/dist/components/Panel/Panel.d.ts

@@ -1,123 +0,0 @@
-import React from "react";
-import type { PropsWithSpread } from "../../types";
-import type { ComponentType, ElementType, HTMLProps, PropsWithChildren, ReactNode } from "react";
-import type { ExclusiveProps } from "../../types";
-export type LogoDefaultElement = HTMLProps<HTMLAnchorElement>;
-type PanelLogo<L = LogoDefaultElement> = ReactNode | PropsWithSpread<{
-    /**
-     * The url of the icon image.
-     */
-    icon: string;
-    /**
-     * The alt text for the icon image.
-     */
-    iconAlt?: string;
-    /**
-     * The url of the name image.
-     */
-    name: string;
-    /**
-     * The alt text for the name image.
-     */
-    nameAlt?: string;
-    /**
-     * The element or component to use for displaying the logo e.g. `a` or `NavLink`.
-     * @default a
-     */
-    component?: ElementType | ComponentType<L>;
-}, L>;
-type PanelToggle = {
-    /**
-     * The panel toggle label.
-     */
-    label: string;
-    /**
-     * The function to call when clicking the panel toggle.
-     */
-    onClick: () => void;
-};
-type LogoProps<L = LogoDefaultElement> = {
-    /**
-     * The panel logo content or attributes.
-     */
-    logo?: PanelLogo<L>;
-};
-type TitleProps = {
-    /**
-     * The panel title.
-     */
-    title: ReactNode;
-    /**
-     * Classes to apply to the title element.
-     */
-    titleClassName?: string;
-    /**
-     * The element to use for the panel title e.g. `h1`.
-     * @default h4
-     */
-    titleComponent?: ElementType;
-    /**
-     * An ID for the title element.
-     */
-    titleId?: string;
-};
-type HeaderProps<L = LogoDefaultElement> = ExclusiveProps<{
-    /**
-     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
-     */
-    header: ReactNode;
-}, {
-    /**
-     * Content that will be displayed in the controls area.
-     */
-    controls?: ReactNode;
-    /**
-     * Classes that will be applied to the controls element.
-     */
-    controlsClassName?: string;
-    /**
-     * Whether the header should be sticky.
-     */
-    stickyHeader?: boolean;
-    /**
-     * The panel toggle attributes.
-     */
-    toggle?: PanelToggle;
-} & ExclusiveProps<LogoProps<L>, TitleProps>>;
-export type Props<L = LogoDefaultElement> = {
-    /**
-     * The panel content.
-     */
-    children?: PropsWithChildren["children"];
-    /**
-     * Classes that are applied to the content container (when using `wrapContent`).
-     */
-    contentClassName?: string | null;
-    /**
-     * Classes that are applied to the top level panel element.
-     */
-    className?: string | null;
-    /**
-     * Whether to use the dark theme.
-     */
-    dark?: boolean;
-    /**
-     * Whether the panel should wrap the content in the `p-panel__content` element.
-     * @default true
-     */
-    wrapContent?: boolean;
-    /**
-     * A ref to pass to the top level panel element.
-     */
-    forwardRef?: React.Ref<HTMLDivElement> | null;
-} & HeaderProps<L>;
-/**
- * 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`.
- */
-declare const Panel: <L = LogoDefaultElement>({ forwardRef, children, className, contentClassName, controlsClassName, controls, dark, header, logo, stickyHeader, title, titleClassName, titleComponent: TitleComponent, titleId, toggle, wrapContent, ...props }: Props<L>) => React.JSX.Element;
-export default Panel;

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

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Panel from "./Panel";
-declare const meta: Meta<typeof Panel>;
-export default meta;
-type Story = StoryObj<typeof Panel>;
-export declare const Default: Story;
-export declare const Header: Story;
-/**
- * The logo may be provided as attributes to use the standard logo. If this is
- * not sufficient the a `ReactNode` can be passed to the `logo` prop instead.
- */
-export declare const Logo: Story;
-/**
- * If the default header does not meet your needs then a `ReactNode` can be
- * passed to the `header` prop to replace the header.
- */
-export declare const CustomHeader: Story;