@canonical/react-components 1.3.0 → 1.3.2

package/dist/hooks/useListener.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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

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

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

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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

@@ -0,0 +1,7 @@
+/**
+ * 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

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * 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

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

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "main": "dist/index.js",
-  "module": "dist-esm/index.js",
-  "types": "dist-types/index.d.ts",
+  "module": "dist/index.js",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -13,6 +12,8 @@
     "dist/**/*.js",
     "dist/**/*.d.*",
     "dist/**/*.scss",
+    "dist-types/**/*.d.ts",
+    "dist-esm/**/*.js",
     "!dist/**/*.test.js",
     "!dist/testing",
     "!dist/setupTests.js"
@@ -94,7 +95,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.5.4",
     "typescript-eslint": "8.4.0",
-    "vanilla-framework": "4.15.0",
+    "vanilla-framework": "4.16.0",
     "wait-on": "8.0.0",
     "webpack": "5.94.0"
   },
@@ -127,12 +128,10 @@
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
-    "build": "yarn build-cjs && yarn build-declaration && yarn build-esm",
-    "build-base": "rm -rf $OUT_DIR && NODE_ENV=production BABEL_ENV=$BABEL_ENV babel src --out-dir $OUT_DIR --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx,.snap' --ignore '**/*.test.ts','**/*.test.tsx','**/*.stories.tsx','**/__snapshots__','src/setupTests.js','src/testing'",
-    "build-cjs": "OUT_DIR=dist BABEL_ENV=cjs yarn run build-base",
-    "build-esm": "OUT_DIR=dist-esm BABEL_ENV=esm yarn run build-base",
-    "build-declaration": "rm -rf dist-types && tsc --project tsconfig.build.json --outDir dist-types && tsc-alias -p tsconfig.build.json --outDir dist-types",
-    "build-watch": "yarn run build-cjs --watch",
+    "build": "rm -rf dist && yarn build-local; yarn build-declaration",
+    "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx,.snap' --ignore '**/*.test.ts','**/*.test.tsx','**/*.stories.tsx','**/__snapshots__','src/setupTests.js','src/testing'",
+    "build-declaration": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build-watch": "yarn run build-local --watch",
     "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
     "docs": "storybook dev -p ${PORT:-9009} --no-open",