@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,75 +0,0 @@
-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;

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

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Tooltip from "./Tooltip";
-declare const meta: Meta<typeof Tooltip>;
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-export declare const Default: Story;
-export declare const FollowMouse: Story;
-/**
- * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
- * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
- */
-export declare const TargetingElements: Story;

package/dist/components/Tooltip/Tooltip.stories.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TargetingElements = exports.FollowMouse = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
-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; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Template = args => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      padding: "3rem"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, args, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    className: "u-no-margin--bottom"
-  }, "Hover over me!")));
-};
-const meta = {
-  component: _Tooltip.default,
-  render: Template,
-  tags: ["autodocs"],
-  argTypes: {
-    position: {
-      control: {
-        type: "radio"
-      },
-      options: Object.values(_Tooltip.position)
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: Template.bind({}),
-  name: "Default",
-  args: {
-    message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Tooltip", " ", /*#__PURE__*/_react.default.createElement("a", {
-      href: "#todo",
-      target: "_blank"
-    }, "Link1"))
-  }
-};
-const FollowMouse = exports.FollowMouse = {
-  render: Template.bind({}),
-  name: "Follow mouse",
-  args: {
-    followMouse: true,
-    message: "Tooltip message to display.",
-    position: "top-center"
-  }
-};
-
-/**
- * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
- * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
- */
-const TargetingElements = exports.TargetingElements = {
-  render: Template.bind({}),
-  name: "Targeting elements",
-  args: {
-    className: "custom-wrapping-class",
-    positionElementClassName: "custom-position-class",
-    tooltipClassName: "custom-tooltip-class",
-    message: "Tooltip message to display."
-  }
-};

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

@@ -1,2 +0,0 @@
-export { default, position } from "./Tooltip";
-export type { Props as TooltipProps } from "./Tooltip";

package/dist/enums.d.ts

@@ -1,13 +0,0 @@
-/**
- * The Vanilla theme types.
- */
-export declare enum Theme {
-    /**
-     * The dark Vanilla theme.
-     */
-    DARK = "dark",
-    /**
-     * The light Vanilla theme.
-     */
-    LIGHT = "light"
-}

package/dist/hooks/index.d.ts

@@ -1,9 +0,0 @@
-export { useOnClickOutside, useClickOutside } from "./useOnClickOutside";
-export { useId } from "./useId";
-export { useListener } from "./useListener";
-export { useOnEscapePressed } from "./useOnEscapePressed";
-export { usePrevious } from "./usePrevious";
-export { useThrottle } from "./useThrottle";
-export { usePagination } from "./usePagination";
-export { useWindowFitment } from "./useWindowFitment";
-export type { WindowFitment } from "./useWindowFitment";

package/dist/hooks/useId.d.ts

@@ -1,4 +0,0 @@
-/**
- * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
- */
-export declare const useId: () => string;

package/dist/hooks/useListener.d.ts

@@ -1,11 +0,0 @@
-/**
- * A hook that handles attaching/removing listeners and smartly reattaching if
- * any of the attributes change.
- * @param targetNode The node to attach the listener to.
- * @param callback The function to call from the listener.
- * @param eventType The event name.
- * @param shouldThrottle Whether the callback calls should be throttled.
- * @param shouldListen When the listener should be active.
- * @param options Native event listener options.
- */
-export declare const useListener: (targetNode: Window | HTMLElement, callback: (...args: any[]) => any, eventType: string, shouldThrottle?: boolean, shouldListen?: boolean, options?: boolean | AddEventListenerOptions) => void;

package/dist/hooks/useOnClickOutside.d.ts

@@ -1,12 +0,0 @@
-import { MutableRefObject, useRef } from "react";
-/**
- * Handle clicks outside an element.
- */
-export declare const useOnClickOutside: <E extends HTMLElement>(elementRef: ReturnType<typeof useRef<E | null>>, onClickOutside: () => void, { isEnabled }?: {
-    isEnabled: boolean;
-}) => void;
-/**
- * Handle clicks outside an element.
- * @returns A ref to pass to the element to handle clicks outside of.
- */
-export declare const useClickOutside: <E extends HTMLElement>(onClickOutside: () => void) => MutableRefObject<E>;

package/dist/hooks/useOnEscapePressed.d.ts

@@ -1,6 +0,0 @@
-/**
- * Handle the escape key pressed.
- */
-export declare const useOnEscapePressed: (onEscape: () => void, { isEnabled }?: {
-    isEnabled: boolean;
-}) => void;

package/dist/hooks/usePagination.d.ts

@@ -1,19 +0,0 @@
-/**
- * A hook that handles pagination.
- * @param data - The data array to paginate.
- * @param {Object} options
- * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
- * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
- * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
- */
-export declare function usePagination<D, I = number | null>(data: Array<D>, options?: {
-    itemsPerPage: I;
-    initialPage?: number;
-    autoResetPage?: boolean;
-}): {
-    pageData: Array<D>;
-    currentPage: number;
-    paginate: (pageNumber: number) => void;
-    itemsPerPage: I;
-    totalItems: number;
-};

package/dist/hooks/usePrevious.d.ts

@@ -1,7 +0,0 @@
-/**
- * A hook to handle storing the previous value of anything.
- * @param value - The value to watch.
- * @param setInitial - Whether it should initialise with the current value.
- * @return The previous value.
- */
-export declare const usePrevious: <T>(value: T, setInitial?: boolean) => T;

package/dist/hooks/useThrottle.d.ts

@@ -1,9 +0,0 @@
-export declare const THROTTLE_DELAY: number;
-export type Callback = (...args: any[]) => any;
-/**
- * A hook to handle throttling calls to a function.
- * @param callback The function to throttle.
- * @param delay The throttle delay in ms.
- * @return The callback function wrapped in the throttle.
- */
-export declare const useThrottle: (callback: Callback, delay?: number) => Callback;

package/dist/hooks/useWindowFitment.d.ts

@@ -1,54 +0,0 @@
-export type WindowFitment = {
-    fromTop: {
-        fitsAbove: boolean;
-        fitsBelow: boolean;
-        spaceAbove: number;
-        spaceBelow: number;
-    };
-    fromBottom: {
-        fitsAbove: boolean;
-        fitsBelow: boolean;
-        spaceAbove: number;
-        spaceBelow: number;
-    };
-    fromLeft: {
-        fitsLeft: boolean;
-        fitsRight: boolean;
-        spaceLeft: number;
-        spaceRight: number;
-    };
-    fromRight: {
-        fitsLeft: boolean;
-        fitsRight: boolean;
-        spaceLeft: number;
-        spaceRight: number;
-    };
-    fromCenter: {
-        fitsLeft: boolean;
-        fitsRight: boolean;
-        fitsAbove: boolean;
-        fitsBelow: boolean;
-        spaceLeft: number;
-        spaceRight: number;
-        spaceAbove: number;
-        spaceBelow: number;
-        fitsCentered: {
-            fitsAbove: boolean;
-            fitsBelow: boolean;
-            fitsLeft: boolean;
-            fitsRight: boolean;
-        };
-    };
-};
-/**
- * A hook to determine if an element fits on the window.
- * @param targetNode The element to try and fit on the window.
- * @param referenceNode The element to use to position the target.
- * @param callback The function to call when updating fitment info.
- * @param spacer An additional space to leave between the target and reference.
- * @param shouldCheck Whether the fitment info should be being checked.
- * @param fromMouse Whether the target should be being positioned in relation
- *                  to the mouse. In this case refernceNode will be used to
- *                  listen for mouseover events.
- */
-export declare const useWindowFitment: (targetNode: HTMLElement, referenceNode: HTMLElement, callback: (fitsWindow: WindowFitment) => void, spacer?: number, shouldCheck?: boolean, fromMouse?: boolean) => void;

package/dist/index.d.ts

@@ -1,132 +0,0 @@
-export { default as Accordion } from "./components/Accordion";
-export { default as ActionButton } from "./components/ActionButton";
-export { default as ArticlePagination } from "./components/ArticlePagination";
-export { default as ApplicationLayout } from "./components/ApplicationLayout";
-export { default as AppAside } from "./components/ApplicationLayout/AppAside";
-export { default as Application } from "./components/ApplicationLayout/Application";
-export { default as AppMain } from "./components/ApplicationLayout/AppMain";
-export { default as AppNavigation } from "./components/ApplicationLayout/AppNavigation";
-export { default as AppNavigationBar } from "./components/ApplicationLayout/AppNavigationBar";
-export { default as AppStatus } from "./components/ApplicationLayout/AppStatus";
-export { default as Badge } from "./components/Badge";
-export { default as Button, ButtonAppearance } from "./components/Button";
-export { default as Card } from "./components/Card";
-export { default as CheckboxInput } from "./components/CheckboxInput";
-export { default as Chip } from "./components/Chip";
-export { default as Code } from "./components/Code";
-export { default as CodeSnippet, CodeSnippetBlockAppearance, } from "./components/CodeSnippet";
-export { default as Col } from "./components/Col";
-export { default as ConfirmationButton } from "./components/ConfirmationButton";
-export { default as ConfirmationModal } from "./components/ConfirmationModal";
-export { default as ContextualMenu } from "./components/ContextualMenu";
-export { default as EmptyState } from "./components/EmptyState";
-export { default as Field } from "./components/Field";
-export { default as Form } from "./components/Form";
-export { default as FormikField } from "./components/FormikField";
-export { default as Icon, ICONS } from "./components/Icon";
-export { default as Input } from "./components/Input";
-export { default as Label } from "./components/Label";
-export { default as Link } from "./components/Link";
-export { default as List } from "./components/List";
-export { default as Loader } from "./components/Loader";
-export { default as MainTable } from "./components/MainTable";
-export { default as ModularTable } from "./components/ModularTable";
-export { default as Navigation } from "./components/Navigation";
-export { default as Modal } from "./components/Modal";
-export * from "./components/MultiSelect";
-export { default as Notification, NotificationSeverity, } from "./components/Notification";
-export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
-export { default as LoginPageLayout } from "./components/LoginPageLayout";
-export { default as Pagination } from "./components/Pagination";
-export { default as Panel } from "./components/Panel";
-export { default as PasswordToggle } from "./components/PasswordToggle";
-export { default as RadioInput } from "./components/RadioInput";
-export { default as Row } from "./components/Row";
-export { default as SearchAndFilter } from "./components/SearchAndFilter";
-export { default as SearchBox } from "./components/SearchBox";
-export { default as Select } from "./components/Select";
-export { default as SideNavigation } from "./components/SideNavigation";
-export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
-export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
-export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
-export { default as Slider } from "./components/Slider";
-export { default as Switch } from "./components/Switch";
-export { default as Spinner } from "./components/Spinner";
-export { default as StatusLabel, StatusLabelAppearance, } from "./components/StatusLabel";
-export { default as Strip } from "./components/Strip";
-export { default as SummaryButton } from "./components/SummaryButton";
-export { default as Table } from "./components/Table";
-export { default as TableCell } from "./components/TableCell";
-export { default as TableHeader } from "./components/TableHeader";
-export { default as TableRow } from "./components/TableRow";
-export { default as Tabs } from "./components/Tabs";
-export { default as Textarea } from "./components/Textarea";
-export { default as Tooltip } from "./components/Tooltip";
-export { default as TablePagination } from "./components/TablePagination";
-export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
-export type { AccordionProps } from "./components/Accordion";
-export type { ActionButtonProps } from "./components/ActionButton";
-export type { ArticlePaginationProps } from "./components/ArticlePagination";
-export type { ApplicationLayoutProps } from "./components/ApplicationLayout";
-export type { AppAsideProps } from "./components/ApplicationLayout/AppAside";
-export type { ApplicationProps } from "./components/ApplicationLayout/Application";
-export type { AppMainProps } from "./components/ApplicationLayout/AppMain";
-export type { AppNavigationProps } from "./components/ApplicationLayout/AppNavigation";
-export type { AppNavigationBarProps } from "./components/ApplicationLayout/AppNavigationBar";
-export type { AppStatusProps } from "./components/ApplicationLayout/AppStatus";
-export type { BadgeProps } from "./components/Badge";
-export type { ButtonProps } from "./components/Button";
-export type { CardProps } from "./components/Card";
-export type { CheckboxInputProps } from "./components/CheckboxInput";
-export type { ChipProps } from "./components/Chip";
-export type { CodeProps } from "./components/Code";
-export type { CodeSnippetProps, CodeSnippetBlockProps, CodeSnippetDropdownProps, } from "./components/CodeSnippet";
-export type { ColProps, ColSize } from "./components/Col";
-export type { ConfirmationButtonProps } from "./components/ConfirmationButton";
-export type { ConfirmationModalProps } from "./components/ConfirmationModal";
-export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
-export type { EmptyStateProps } from "./components/EmptyState";
-export type { FieldProps } from "./components/Field";
-export type { FormProps } from "./components/Form";
-export type { FormikFieldProps } from "./components/FormikField";
-export type { IconProps } from "./components/Icon";
-export type { InputProps } from "./components/Input";
-export type { LabelProps } from "./components/Label";
-export type { LinkProps } from "./components/Link";
-export type { ListProps } from "./components/List";
-export type { MainTableProps } from "./components/MainTable";
-export type { ModularTableProps } from "./components/ModularTable";
-export type { ModalProps } from "./components/Modal";
-export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, } from "./components/Navigation";
-export type { NotificationProps } from "./components/Notification";
-export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
-export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
-export type { PaginationProps } from "./components/Pagination";
-export type { PanelProps } from "./components/Panel";
-export type { RadioInputProps } from "./components/RadioInput";
-export type { RowProps } from "./components/Row";
-export type { SearchAndFilterProps } from "./components/SearchAndFilter";
-export type { SearchBoxProps } from "./components/SearchBox";
-export type { SelectProps } from "./components/Select";
-export type { SideNavigationProps } from "./components/SideNavigation";
-export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
-export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
-export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
-export type { SliderProps } from "./components/Slider";
-export type { SpinnerProps } from "./components/Spinner";
-export type { StatusLabelProps } from "./components/StatusLabel";
-export type { StripProps } from "./components/Strip";
-export type { SummaryButtonProps } from "./components/SummaryButton";
-export type { TableProps } from "./components/Table";
-export type { TableCellProps } from "./components/TableCell";
-export type { TableHeaderProps } from "./components/TableHeader";
-export type { TableRowProps } from "./components/TableRow";
-export type { TabsProps } from "./components/Tabs";
-export type { TextareaProps } from "./components/Textarea";
-export type { TooltipProps } from "./components/Tooltip";
-export type { TablePaginationProps } from "./components/TablePagination";
-export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
-export type { WindowFitment } from "./hooks";
-export { isNavigationAnchor, isNavigationButton } from "./utils";
-export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
-export { Theme } from "./enums";

package/dist/types/index.d.ts

@@ -1,38 +0,0 @@
-/**
- * This type should be used for all className props in order to ensure
- * consistency across components.
- */
-export type ClassName = string | null;
-/**
- * The allowable heading levels.
- */
-export type Headings = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-/**
- * This type can be used when defining props that also spread the props of
- * something else. It ensures that the defined component props are never
- * overwritten by the spread props.
- */
-export type PropsWithSpread<P, H> = P & Omit<H, keyof P>;
-/**
- * The allowable sort directions e.g. for a sortable table.
- */
-export type SortDirection = "none" | "ascending" | "descending";
-/**
- * This type can be used when passing props to a sub component. It makes all
- * component props optional.
- */
-export type SubComponentProps<P> = Partial<P> & {
-    [prop: string]: unknown;
-};
-/**
- * This type is simply an alias for the 'any' type and should be used sparingly,
- * if at all.
- */
-export type TSFixMe = any;
-/**
- * This type allows for converting an object const into an enum-like construct,
- * e.g. value: ValueOf<typeof EnumLike> will only allow value to be a value
- * defined in EnumLike.
- */
-export type ValueOf<T> = T[keyof T];
-export type ExclusiveProps<A, B> = (A & Partial<Record<keyof B, never>>) | (B & Partial<Record<keyof A, never>>);

package/dist/utils.d.ts

@@ -1,27 +0,0 @@
-import { NavLink, NavLinkAnchor, NavLinkButton } from "./components/Navigation";
-import { ReactNode } from "react";
-export declare const IS_DEV: boolean;
-/**
- * Find substring and wrap in <strong /> tag
- * @param {string} str - The string to search
- * @param {string} subString - The substring to find
- * @return {Obj} newStr - Object with text and match bool
- */
-export declare const highlightSubString: (str?: string, subString?: string) => {
-    text: string;
-    match: boolean;
-};
-/**
- * Whether a navigation item is an anchor.
- * @param link - The navigation item.
- */
-export declare const isNavigationAnchor: (link: NavLink) => link is NavLinkAnchor;
-/**
- * Whether a navigation item is a button.
- * @param link - The navigation item.
- */
-export declare const isNavigationButton: (link: NavLink) => link is NavLinkButton;
-/**
- * A typeguard for whether an element is a ReactNode.
- */
-export declare const isReactNode: (element: unknown) => element is ReactNode;