@canonical/react-components 1.2.2 → 1.2.4

package/dist/components/Chip/Chip.d.ts

@@ -28,7 +28,7 @@ export type Props = PropsWithSpread<{
     /**
      * Function for handling dismissing a chip.
      */
-    onDismiss?: () => void;
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Whether the chip is selected.
      */

package/dist/components/SearchAndFilter/SearchAndFilter.js

@@ -218,7 +218,11 @@ const SearchAndFilter = _ref => {
       lead: chip.lead,
       value: chip.value,
       key: "search-".concat(chip.lead, "+").concat(chip.value),
-      onDismiss: () => removeFromSelected(chip),
+      onDismiss: event => {
+        // Prevent filter chip dismissals from bubbling up and triggering the parent onClick handler
+        event.stopPropagation();
+        removeFromSelected(chip);
+      },
       selected: true,
       quoteValue: chip.quoteValue
     });

package/dist/components/SideNavigation/SideNavigationBase/SideNavigationBase.d.ts

@@ -22,6 +22,10 @@ export type Props<C> = PropsWithSpread<{
      * The navigation item's status.
      */
     status?: ReactNode;
+    /**
+     * A ref to pass to the element.
+     */
+    forwardRef?: React.Ref<C> | null;
 }, C>;
-declare const SideNavigationBase: <C>({ component: Component, dark, icon, label, status, ...props }: Props<C>) => React.JSX.Element;
+declare const SideNavigationBase: <C>({ component: Component, dark, icon, label, status, forwardRef, ...props }: Props<C>) => React.JSX.Element;
 export default SideNavigationBase;

package/dist/components/SideNavigation/SideNavigationBase/SideNavigationBase.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SideNavigationBase = _ref => {
   let {
     component: Component,
@@ -14,9 +15,12 @@ const SideNavigationBase = _ref => {
     icon,
     label,
     status,
+    forwardRef,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(Component, props, icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({
+    ref: forwardRef
+  }, props), icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: icon,
     light: dark,
     className: "p-side-navigation__icon"

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
-import type { HTMLProps } from "react";
+import type { HTMLProps, ReactNode } from "react";
 import type { SideNavigationBaseProps } from "../SideNavigationBase";
 export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
-export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = Omit<SideNavigationBaseProps<L>, "component"> & {
+export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = Partial<Omit<SideNavigationBaseProps<L>, "component">> & {
+    /**
+     * The navigation item's label.
+     */
+    label: ReactNode;
     /**
      * The component or element to use for the link element e.g. `a` or `NavLink`.
      * @default a

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.js

@@ -22,9 +22,8 @@ const SideNavigationLink = _ref => {
   }
   return /*#__PURE__*/_react.default.createElement(_SideNavigationBase.default, _extends({
     className: (0, _classnames.default)("p-side-navigation__link", className),
-    component: component !== null && component !== void 0 ? component : "a"
-  }, props, {
-    ref: forwardRef
-  }));
+    component: component !== null && component !== void 0 ? component : "a",
+    forwardRef: forwardRef
+  }, props));
 };
 var _default = exports.default = SideNavigationLink;

package/dist/utils.js

@@ -20,7 +20,8 @@ const highlightSubString = (str, subString) => {
       match: false
     };
   }
-  const caseInsensitiveRegex = new RegExp(subString, "gi");
+  const escapedSubstring = subString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const caseInsensitiveRegex = new RegExp(escapedSubstring, "gi");
   const newStr = str.replace(caseInsensitiveRegex, match => "<strong>".concat(match, "</strong>"));
   return {
     text: subString === "" ? str : newStr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {