@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/hooks/useThrottle.js

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef } from "react";
+export var THROTTLE_DELAY = 1000 / 60;
+// eslint-disable-line @typescript-eslint/no-explicit-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 var useThrottle = function useThrottle(callback) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
+  var timeout = useRef();
+  var lastCall = useRef();
+  var lastArgs = useRef(null);
+  var throttle = useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    lastArgs.current = args;
+    var callCallback = () => {
+      callback(...lastArgs.current);
+      lastCall.current = Date.now();
+      timeout.current = null;
+    };
+    var createTimeout = () => {
+      timeout.current = window.setTimeout(() => {
+        callCallback();
+        timeout.current = null;
+      }, delay);
+    };
+    if (!lastCall.current) {
+      // Initially call the callback and start a timeout for the next call.
+      callCallback();
+      createTimeout();
+    } else if (!timeout.current && Date.now() - lastCall.current > delay) {
+      // If a timeout isn't active then create a new one if the delay time
+      // has elapsed.
+      createTimeout();
+    }
+  }, [callback, delay]);
+  useEffect(() => () => {
+    // Clear the timeout when unmounting.
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  }, []);
+  return throttle;
+};

package/dist/esm/hooks/useThrottle.test.d.ts

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

package/dist/esm/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/esm/hooks/useWindowFitment.js

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useListener } from "./useListener";
+/**
+ * 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 var useWindowFitment = function useWindowFitment(targetNode, referenceNode, callback) {
+  var spacer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var shouldCheck = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var fromMouse = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var htmlRef = useRef(document.querySelector("html"));
+  var update = useCallback(evt => {
+    var referenceCoordinates;
+    if (fromMouse) {
+      if (evt) {
+        referenceCoordinates = {
+          // The mouse is a single point so use 0 for the height and width.
+          height: 0,
+          left: evt.x || 0,
+          top: evt.y || 0,
+          width: 0
+        };
+      }
+    } else if (referenceNode) {
+      referenceCoordinates = referenceNode.getBoundingClientRect();
+    }
+    if (shouldCheck && targetNode && referenceCoordinates) {
+      var {
+        height: targetHeight,
+        width: targetWidth
+      } = targetNode.getBoundingClientRect();
+      var {
+        height: referenceHeight,
+        left: referenceLeft,
+        top: referenceTop,
+        width: referenceWidth
+      } = referenceCoordinates;
+      var referenceBottom = referenceTop + referenceHeight;
+      var referenceRight = referenceLeft + referenceWidth;
+      var referenceCenterX = referenceLeft + referenceWidth / 2;
+      var referenceCenterY = referenceTop + referenceHeight / 2;
+      var windowLeft = htmlRef.current.scrollLeft;
+      var windowRight = window.innerWidth - htmlRef.current.scrollLeft;
+      var windowTop = 0;
+      var windowBottom = window.innerHeight;
+      var heightIncludingSpace = targetHeight + spacer;
+      var widthIncludingSpace = targetWidth + spacer;
+      var widthFromCenter = targetWidth / 2;
+      var heightFromCenter = targetHeight / 2;
+      callback({
+        fromTop: {
+          fitsAbove: referenceTop - heightIncludingSpace > windowTop,
+          fitsBelow: referenceTop + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceTop),
+          spaceBelow: windowBottom - referenceTop
+        },
+        fromBottom: {
+          fitsAbove: referenceBottom - heightIncludingSpace > windowTop,
+          fitsBelow: referenceBottom + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceBottom),
+          spaceBelow: windowBottom - referenceBottom
+        },
+        fromLeft: {
+          fitsLeft: referenceLeft - widthIncludingSpace > windowLeft,
+          fitsRight: referenceLeft + widthIncludingSpace < windowRight,
+          spaceLeft: Math.abs(windowLeft - referenceLeft),
+          spaceRight: windowRight - referenceLeft
+        },
+        fromRight: {
+          fitsLeft: referenceRight - widthIncludingSpace > windowLeft,
+          fitsRight: referenceRight + widthIncludingSpace < windowRight,
+          spaceLeft: Math.abs(windowLeft - referenceRight),
+          spaceRight: windowRight - referenceRight
+        },
+        fromCenter: {
+          fitsLeft: referenceCenterX - widthIncludingSpace > windowLeft,
+          fitsRight: referenceCenterX + widthIncludingSpace < windowRight,
+          fitsAbove: referenceCenterY - heightIncludingSpace > windowTop,
+          fitsBelow: referenceCenterY + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceCenterY),
+          spaceBelow: windowBottom - referenceCenterY,
+          spaceLeft: Math.abs(windowLeft - referenceCenterX),
+          spaceRight: windowRight - referenceCenterX,
+          fitsCentered: {
+            fitsLeft: referenceCenterX - widthFromCenter > windowLeft,
+            fitsRight: referenceCenterX + widthFromCenter < windowRight,
+            fitsAbove: referenceCenterY - heightFromCenter > windowTop,
+            fitsBelow: referenceCenterY + heightFromCenter < windowBottom
+          }
+        }
+      });
+    }
+  }, [shouldCheck, targetNode, callback, spacer, fromMouse, referenceNode]);
+  useListener(window, update, "resize", true, shouldCheck && !fromMouse);
+  useListener(window, update, "scroll", true, shouldCheck && !fromMouse);
+  useListener(referenceNode, update, "mousemove", true, fromMouse && shouldCheck);
+  useEffect(() => {
+    if (!fromMouse) {
+      update();
+    }
+  }, [fromMouse, update]);
+};

package/dist/esm/hooks/useWindowFitment.test.d.ts

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

package/dist/esm/index.d.ts

@@ -0,0 +1,138 @@
+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 DoughnutChart } from "./components/DoughnutChart";
+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 SkipLink } from "./components/SkipLink";
+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 Stepper, Step } from "./components/Stepper";
+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 { DoughnutChartProps, Segment } from "./components/DoughnutChart";
+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 { SkipLinkProps } from "./components/SkipLink";
+export type { SliderProps } from "./components/Slider";
+export type { SpinnerProps } from "./components/Spinner";
+export type { StatusLabelProps } from "./components/StatusLabel";
+export type { StepperProps, StepProps } from "./components/Stepper";
+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/esm/index.js

@@ -0,0 +1,72 @@
+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 DoughnutChart } from "./components/DoughnutChart";
+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 SkipLink } from "./components/SkipLink";
+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 Stepper, Step } from "./components/Stepper";
+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 { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment } from "./hooks";
+export { isNavigationAnchor, isNavigationButton } from "./utils";
+export { Theme } from "./enums";

package/dist/esm/index.test.d.ts

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

package/dist/esm/setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/esm/testing/mock-scss.js

@@ -0,0 +1,2 @@
+// A fake module to use in place of required scss files.
+module.exports = {};

package/dist/esm/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/esm/types/index.js

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

package/dist/esm/types/react-table-config.d.js

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

package/dist/esm/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/dist/esm/utils.js

@@ -0,0 +1,41 @@
+import { isValidElement } from "react";
+export var IS_DEV = process.env.NODE_ENV === "development";
+
+/**
+ * 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 var highlightSubString = (str, subString) => {
+  if (typeof str !== "string" || typeof subString !== "string") {
+    return {
+      text: str || "",
+      match: false
+    };
+  }
+  var escapedSubstring = subString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  var caseInsensitiveRegex = new RegExp(escapedSubstring, "gi");
+  var newStr = str.replace(caseInsensitiveRegex, match => "<strong>".concat(match, "</strong>"));
+  return {
+    text: subString === "" ? str : newStr,
+    match: newStr !== str
+  };
+};
+
+/**
+ * Whether a navigation item is an anchor.
+ * @param link - The navigation item.
+ */
+export var isNavigationAnchor = link => !!link.url;
+
+/**
+ * Whether a navigation item is a button.
+ * @param link - The navigation item.
+ */
+export var isNavigationButton = link => !link.url;
+
+/**
+ * A typeguard for whether an element is a ReactNode.
+ */
+export var isReactNode = element => /*#__PURE__*/isValidElement(element);

package/dist/esm/utils.test.d.ts

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

package/dist/hooks/useListener.test.d.ts

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

package/dist/hooks/useOnClickOutside.test.d.ts

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

package/dist/hooks/useOnEscapePressed.test.d.ts

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

package/dist/hooks/usePagination.test.d.ts

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

package/dist/hooks/usePrevious.test.d.ts

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

package/dist/hooks/useThrottle.test.d.ts

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

package/dist/hooks/useWindowFitment.test.d.ts

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

package/dist/index.test.d.ts

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

package/dist/utils.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -12,8 +12,6 @@
     "dist/**/*.js",
     "dist/**/*.d.*",
     "dist/**/*.scss",
-    "dist-types/**/*.d.ts",
-    "dist-esm/**/*.js",
     "!dist/**/*.test.js",
     "!dist/testing",
     "!dist/setupTests.js"
@@ -128,10 +126,12 @@
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
-    "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": "rm -rf dist && yarn build-cjs && yarn build-declaration && yarn build-esm && yarn build-declaration-esm",
+    "build-cjs": "NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
+    "build-esm": "NODE_ENV=production BABEL_ENV=esm babel src --out-dir dist/esm --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-declaration-esm": "tsc --project tsconfig.json --outDir dist/esm && tsc-alias -p tsconfig.json --outDir dist/esm",
+    "build-watch": "yarn run build-cjs --watch",
     "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
     "docs": "storybook dev -p ${PORT:-9009} --no-open",