@canonical/react-components 0.37.0 → 0.37.1

package/dist/components/Navigation/Navigation.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode, HTMLProps } from "react";
 import type { GenerateLink, NavItem, LogoProps } from "./types";
-import { PropsWithSpread, SubComponentProps, Theme } from "../../types";
+import { PropsWithSpread, SubComponentProps } from "../../types";
 import { SearchBoxProps } from "../SearchBox";
+import { Theme } from "../../enums";
 export declare type Props = PropsWithSpread<{
     /**
      * By default the header is constrained to the width of the grid. Use this

package/dist/components/Navigation/Navigation.js

@@ -15,12 +15,12 @@ var _NavigationLink = _interopRequireDefault(require("./NavigationLink"));
 
 var _NavigationMenu = _interopRequireDefault(require("./NavigationMenu"));
 
-var _types = require("../../types");
-
 var _SearchBox = _interopRequireDefault(require("../SearchBox"));
 
 var _hooks = require("../../hooks");
 
+var _enums = require("../../enums");
+
 var _excluded = ["url", "src", "title", "icon", "aria-current", "aria-label"],
     _excluded2 = ["fullWidth", "generateLink", "items", "itemsRight", "leftNavProps", "logo", "navProps", "rightNavProps", "searchProps", "theme"];
 
@@ -42,6 +42,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -91,12 +97,14 @@ var generateLogo = function generateLogo(logo, generateLink) {
     return /*#__PURE__*/_react.default.createElement("div", _extends({
       className: "p-navigation__tagged-logo"
     }, logoProps), /*#__PURE__*/_react.default.createElement(_NavigationLink.default, {
-      className: "p-navigation__link",
-      url: url,
-      label: content,
-      "aria-label": ariaLabel,
       generateLink: generateLink,
-      isSelected: !!ariaCurrent
+      link: {
+        "aria-label": ariaLabel,
+        className: "p-navigation__link",
+        isSelected: !!ariaCurrent,
+        label: content,
+        url: url
+      }
     }));
   }
 
@@ -124,16 +132,18 @@ var generateItems = function generateItems(items, closeMobileMenu, generateLink)
         "is-selected": item.isSelected
       }),
       key: i
-    }, /*#__PURE__*/_react.default.createElement(_NavigationLink.default, _extends({}, item, {
-      onClick: function onClick(evt) {
-        var _item$onClick;
-
-        (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, evt);
-        closeMobileMenu();
-      },
+    }, /*#__PURE__*/_react.default.createElement(_NavigationLink.default, {
       generateLink: generateLink,
-      className: (0, _classnames.default)("p-navigation__link", item.className)
-    })));
+      link: _objectSpread(_objectSpread({}, item), {}, {
+        className: (0, _classnames.default)("p-navigation__link", item.className),
+        onClick: function onClick(evt) {
+          var _item$onClick;
+
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, evt);
+          closeMobileMenu();
+        }
+      })
+    }));
   });
 };
 
@@ -200,8 +210,8 @@ var Navigation = function Navigation(_ref) {
     className: (0, _classnames.default)("p-navigation", headerProps.className, {
       "has-menu-open": mobileMenuOpen,
       "has-search-open": searchOpen,
-      "is-dark": theme === _types.Theme.DARK,
-      "is-light": theme === _types.Theme.LIGHT
+      "is-dark": theme === _enums.Theme.DARK,
+      "is-light": theme === _enums.Theme.LIGHT
     })
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: fullWidth ? "p-navigation__row--full-width" : "p-navigation__row"

package/dist/components/Navigation/NavigationLink/NavigationLink.d.ts

@@ -1,11 +1,10 @@
-import type { HTMLProps } from "react";
-import { PropsWithSpread } from "../../../types";
 import type { GenerateLink, NavLink } from "../types";
-declare type Props = PropsWithSpread<NavLink & {
+declare type Props = {
     generateLink?: GenerateLink;
-}, HTMLProps<HTMLAnchorElement>>;
+    link: NavLink;
+};
 /**
  * This component is used internally to display links inside the Navigation component.
  */
-declare const NavigationLink: ({ generateLink, isSelected, label, url, ...props }: Props) => JSX.Element;
+declare const NavigationLink: ({ generateLink, link }: Props) => JSX.Element | null;
 export default NavigationLink;

package/dist/components/Navigation/NavigationLink/NavigationLink.js

@@ -5,9 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _excluded = ["generateLink", "isSelected", "label", "url"];
+var _utils = require("../../../utils");
+
+var _excluded = ["isSelected"],
+    _excluded2 = ["isSelected", "label", "url"],
+    _excluded3 = ["isSelected", "label", "url"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,29 +34,40 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 var NavigationLink = function NavigationLink(_ref) {
   var generateLink = _ref.generateLink,
-      isSelected = _ref.isSelected,
-      label = _ref.label,
-      url = _ref.url,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var ariaCurrent = isSelected ? "page" : undefined;
+      link = _ref.link;
 
+  // const ariaCurrent = isSelected ? "page" : undefined;
   if (generateLink) {
-    // If a function has been provided then use it to generate the link element.
+    var isSelected = link.isSelected,
+        linkProps = _objectWithoutProperties(link, _excluded); // If a function has been provided then use it to generate the link element.
+
+
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, generateLink(_objectSpread({
       isSelected: isSelected,
-      label: label,
-      url: url,
-      "aria-current": ariaCurrent
-    }, props)));
-  } else {
-    // If a function has not been provided then use a standard anchor element.
-    return /*#__PURE__*/_react.default.createElement("a", _extends({
-      href: url
-    }, props, {
-      "aria-current": ariaCurrent
+      "aria-current": isSelected ? "page" : undefined
+    }, linkProps)));
+  } else if ((0, _utils.isNavigationAnchor)(link)) {
+    var _isSelected = link.isSelected,
+        label = link.label,
+        url = link.url,
+        _linkProps = _objectWithoutProperties(link, _excluded2);
+
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, _linkProps, {
+      href: url,
+      "aria-current": _isSelected ? "page" : undefined
     }), label);
+  } else if ((0, _utils.isNavigationButton)(link)) {
+    var _isSelected2 = link.isSelected,
+        _label = link.label,
+        _url = link.url,
+        _linkProps2 = _objectWithoutProperties(link, _excluded3);
+
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, _linkProps2, {
+      "aria-current": _isSelected2 ? "page" : undefined
+    }), _label);
   }
+
+  return null;
 };
 
 var _default = NavigationLink;

package/dist/components/Navigation/NavigationMenu/NavigationMenu.js

@@ -25,6 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -86,10 +92,12 @@ var NavigationMenu = function NavigationMenu(_ref) {
   }, items.map(function (item, i) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: i
-    }, /*#__PURE__*/_react.default.createElement(_NavigationLink.default, _extends({}, item, {
+    }, /*#__PURE__*/_react.default.createElement(_NavigationLink.default, {
       generateLink: generateLink,
-      className: (0, _classnames.default)("p-navigation__dropdown-item", item.className)
-    })));
+      link: _objectSpread(_objectSpread({}, item), {}, {
+        className: (0, _classnames.default)("p-navigation__dropdown-item", item.className)
+      })
+    }));
   })));
 };
 

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

@@ -1,3 +1,3 @@
 export { default } from "./Navigation";
 export type { Props as NavigationProps } from "./Navigation";
-export type { GenerateLink, LogoProps, NavLink, NavMenu, NavItem, } from "./types";
+export type { GenerateLink, LogoProps, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, NavMenu, NavItem, } from "./types";

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

@@ -1,6 +1,6 @@
-import type { HTMLProps, ReactNode } from "react";
+import type { HTMLAttributes, HTMLProps, ReactNode } from "react";
 import { PropsWithSpread } from "../../types";
-export declare type NavLink = PropsWithSpread<{
+export declare type NavLinkBase = {
     /**
      * Whether this nav item is currently selected.
      */
@@ -13,7 +13,14 @@ export declare type NavLink = PropsWithSpread<{
      * The URL of the link.
      */
     url?: string;
-}, HTMLProps<HTMLAnchorElement>>;
+};
+export declare type NavLinkAnchor = PropsWithSpread<NavLinkBase & {
+    url: string;
+}, HTMLAttributes<HTMLAnchorElement>>;
+export declare type NavLinkButton = PropsWithSpread<NavLinkBase & {
+    url?: never;
+}, HTMLAttributes<HTMLButtonElement>>;
+export declare type NavLink = NavLinkAnchor | NavLinkButton;
 export declare type NavMenu = {
     /**
      * Whether to align the dropdown to the right edge of the navigation item.

package/dist/enums.d.ts

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

package/dist/enums.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Theme = void 0;
+
+/**
+ * The Vanilla theme types.
+ */
+var Theme;
+exports.Theme = Theme;
+
+(function (Theme) {
+  Theme["DARK"] = "dark";
+  Theme["LIGHT"] = "light";
+})(Theme || (exports.Theme = Theme = {}));

package/dist/index.d.ts

@@ -65,7 +65,7 @@ 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, } from "./components/Navigation";
+export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, } from "./components/Navigation";
 export type { NotificationProps } from "./components/Notification";
 export type { PaginationProps } from "./components/Pagination";
 export type { RadioInputProps } from "./components/RadioInput";
@@ -87,4 +87,6 @@ export type { TextareaProps } from "./components/Textarea";
 export type { TooltipProps } from "./components/Tooltip";
 export { useClickOutside, useId, useListener, useOnEscapePressed, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
-export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, Theme, TSFixMe, ValueOf, } from "./types";
+export { isNavigationAnchor, isNavigationButton } from "./utils";
+export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
+export { Theme } from "./enums";

package/dist/index.js

@@ -293,12 +293,30 @@ Object.defineProperty(exports, "Textarea", {
     return _Textarea.default;
   }
 });
+Object.defineProperty(exports, "Theme", {
+  enumerable: true,
+  get: function get() {
+    return _enums.Theme;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "isNavigationAnchor", {
+  enumerable: true,
+  get: function get() {
+    return _utils.isNavigationAnchor;
+  }
+});
+Object.defineProperty(exports, "isNavigationButton", {
+  enumerable: true,
+  get: function get() {
+    return _utils.isNavigationButton;
+  }
+});
 Object.defineProperty(exports, "useClickOutside", {
   enumerable: true,
   get: function get() {
@@ -432,6 +450,10 @@ var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 
 var _hooks = require("./hooks");
 
+var _utils = require("./utils");
+
+var _enums = require("./enums");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/types/index.d.ts

@@ -35,16 +35,3 @@ export declare type TSFixMe = any;
  * defined in EnumLike.
  */
 export declare type ValueOf<T> = T[keyof T];
-/**
- * The Vanilla theme types.
- */
-export declare enum Theme {
-    /**
-     * The dark Vanilla theme.
-     */
-    DARK = "dark",
-    /**
-     * The light Vanilla theme.
-     */
-    LIGHT = "light"
-}

package/dist/types/index.js

@@ -2,52 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.Theme = void 0;
-
-/**
- * This type should be used for all className props in order to ensure
- * consistency across components.
- */
-
-/**
- * The allowable heading levels.
- */
-
-/**
- * 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.
- */
-
-/**
- * The allowable sort directions e.g. for a sortable table.
- */
-
-/**
- * This type can be used when passing props to a sub component. It makes all
- * component props optional.
- */
-
-/**
- * This type is simply an alias for the 'any' type and should be used sparingly,
- * if at all.
- */
-// eslint-disable-line @typescript-eslint/no-explicit-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.
- */
-
-/**
- * The Vanilla theme types.
- */
-var Theme;
-exports.Theme = Theme;
-
-(function (Theme) {
-  Theme["DARK"] = "dark";
-  Theme["LIGHT"] = "light";
-})(Theme || (exports.Theme = Theme = {}));
+});

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
+import { NavLink, NavLinkAnchor, NavLinkButton } from "./components/Navigation";
 export declare const IS_DEV: boolean;
 /**
  * Find substring and wrap in <strong /> tag
@@ -9,3 +10,13 @@ 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;

package/dist/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightSubString = exports.IS_DEV = void 0;
+exports.isNavigationButton = exports.isNavigationAnchor = exports.highlightSubString = exports.IS_DEV = void 0;
 var IS_DEV = process.env.NODE_ENV === "development";
 /**
  * Find substring and wrap in <strong /> tag
@@ -31,5 +31,27 @@ var highlightSubString = function highlightSubString(str, subString) {
     match: newStr !== str
   };
 };
+/**
+ * Whether a navigation item is an anchor.
+ * @param link - The navigation item.
+ */
+
+
+exports.highlightSubString = highlightSubString;
+
+var isNavigationAnchor = function isNavigationAnchor(link) {
+  return !!link.url;
+};
+/**
+ * Whether a navigation item is a button.
+ * @param link - The navigation item.
+ */
+
+
+exports.isNavigationAnchor = isNavigationAnchor;
+
+var isNavigationButton = function isNavigationButton(link) {
+  return !link.url;
+};
 
-exports.highlightSubString = highlightSubString;
+exports.isNavigationButton = isNavigationButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.37.0",
+  "version": "0.37.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",