@canonical/react-components 2.2.0 → 2.2.2

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

@@ -11,3 +11,4 @@ export declare const Toggle: Story;
 export declare const OverflowingContainer: Story;
 export declare const ChildFunction: Story;
 export declare const ChildElement: Story;
+export declare const InsideModal: Story;

package/dist/components/ContextualMenu/ContextualMenu.stories.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Toggle = exports.OverflowingContainer = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
+exports.default = exports.Toggle = exports.OverflowingContainer = exports.InsideModal = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+var _Modal = _interopRequireDefault(require("../Modal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ScrollTemplate = args => /*#__PURE__*/_react.default.createElement("div", {
   style: {
@@ -104,4 +105,21 @@ const ChildElement = exports.ChildElement = {
     position: "right",
     toggleLabel: "Click me!"
   }
+};
+const InsideModal = exports.InsideModal = {
+  name: "Inside modal",
+  args: {
+    links: Array.from({
+      length: 5
+    }, (_, index) => ({
+      children: "Link ".concat(index + 1),
+      onClick: () => {}
+    })),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    title: "Contextual Menu inside Modal"
+  }, /*#__PURE__*/_react.default.createElement(Template, args))
 };

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -39,5 +39,6 @@ export type Props<L = null> = {
  * @return The new position.
  */
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
+export declare const getNearestParentsZIndex: (element: HTMLElement | null) => string;
 declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, handleClose, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, contextualMenuClassName, ...props }: Props<L>) => React.JSX.Element;
 export default ContextualMenuDropdown;

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.adjustForWindow = exports.Label = void 0;
+exports.getNearestParentsZIndex = exports.default = exports.adjustForWindow = exports.Label = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../../hooks");
@@ -134,6 +134,22 @@ const getClosestScrollableParent = node => {
   }
   return document.body;
 };
+
+// nearest parents z-index that is not 0 or auto
+const getNearestParentsZIndex = element => {
+  if (!window || !element) {
+    return "0";
+  }
+  const zIndex = window.getComputedStyle(element, null).getPropertyValue("z-index");
+  if (!element.parentElement) {
+    return zIndex;
+  }
+  if (zIndex === "auto" || zIndex === "0" || zIndex === "") {
+    return getNearestParentsZIndex(element.parentElement);
+  }
+  return zIndex;
+};
+exports.getNearestParentsZIndex = getNearestParentsZIndex;
 const ContextualMenuDropdown = _ref => {
   let {
     adjustedPosition,
@@ -206,6 +222,17 @@ const ContextualMenuDropdown = _ref => {
   (0, _react.useEffect)(() => {
     updateVerticalPosition();
   }, [updateVerticalPosition]);
+  (0, _react.useEffect)(() => {
+    if (!dropdown.current) return;
+
+    // align z-index: when we are in a modal context, we want the dropdown to be above the modal
+    // apply the nearest parents z-index + 1
+    const zIndex = getNearestParentsZIndex(positionNode);
+    if (parseInt(zIndex) > 0) {
+      var _dropdown$current$par;
+      (_dropdown$current$par = dropdown.current.parentElement) === null || _dropdown$current$par === void 0 || _dropdown$current$par.style.setProperty("z-index", zIndex + 1);
+    }
+  }, [positionNode]);
   return (
     /*#__PURE__*/
     // Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).

package/dist/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.d.ts

@@ -19,7 +19,6 @@ export declare const adjustDropdownHeightBelow: (dropdown: HTMLUListElement) =>
 export declare const adjustDropdownHeightAbove: (dropdown: HTMLUListElement, search: HTMLInputElement | null) => void;
 export declare const dropdownIsAbove: (dropdown: HTMLUListElement) => boolean;
 export declare const adjustDropdownHeight: (dropdown: HTMLUListElement | null, search: HTMLInputElement | null) => void;
-export declare const getNearestParentsZIndex: (element: HTMLElement | null) => string;
 export declare const getOptionText: (option: CustomSelectOption) => string;
 declare const CustomSelectDropdown: FC<Props>;
 export default CustomSelectDropdown;

package/dist/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOptionText = exports.getNearestParentsZIndex = exports.dropdownIsAbove = exports.default = exports.adjustDropdownHeightBelow = exports.adjustDropdownHeightAbove = exports.adjustDropdownHeight = void 0;
+exports.getOptionText = exports.dropdownIsAbove = exports.default = exports.adjustDropdownHeightBelow = exports.adjustDropdownHeightAbove = exports.adjustDropdownHeight = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -87,20 +87,6 @@ const adjustDropdownHeight = (dropdown, search) => {
   adjustDropdownHeightBelow(dropdown);
 };
 exports.adjustDropdownHeight = adjustDropdownHeight;
-const getNearestParentsZIndex = element => {
-  if (!document.defaultView || !element) {
-    return "0";
-  }
-  const zIndex = document.defaultView.getComputedStyle(element, null).getPropertyValue("z-index");
-  if (!element.parentElement) {
-    return zIndex;
-  }
-  if (zIndex === "auto" || zIndex === "0" || zIndex === "") {
-    return getNearestParentsZIndex(element.parentElement);
-  }
-  return zIndex;
-};
-exports.getNearestParentsZIndex = getNearestParentsZIndex;
 const getOptionText = option => {
   if (option.text) {
     return option.text;
@@ -139,14 +125,6 @@ const CustomSelectDropdown = _ref => {
       // align width with wrapper toggle width
       const toggleWidth = (_toggle$getBoundingCl = toggle === null || toggle === void 0 || (_toggle$getBoundingCl2 = toggle.getBoundingClientRect()) === null || _toggle$getBoundingCl2 === void 0 ? void 0 : _toggle$getBoundingCl2.width) !== null && _toggle$getBoundingCl !== void 0 ? _toggle$getBoundingCl : 0;
       dropdownRef.current.style.setProperty("min-width", "".concat(toggleWidth, "px"));
-
-      // align z-index: when we are in a modal context, we want the dropdown to be above the modal
-      // apply the nearest parents z-index + 1
-      const zIndex = getNearestParentsZIndex(toggle);
-      if (parseInt(zIndex) > 0) {
-        var _dropdownRef$current$;
-        (_dropdownRef$current$ = dropdownRef.current.parentElement) === null || _dropdownRef$current$ === void 0 || _dropdownRef$current$.style.setProperty("z-index", zIndex + 1);
-      }
     }
     setTimeout(() => {
       var _dropdownRef$current;

package/dist/components/ModularTable/ModularTable.d.ts

@@ -57,7 +57,7 @@ ModularTable components accepts `columns` and `data` arguments in the same forma
 `columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
 `data` - The data array that you want to display on the table.
 ### Important note!
-Values passed to both of these params have to me memoized (for example via{" "}
+Values passed to both of these params have to be memoized (for example via{" "}
   <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
   on every render. If we didn't use <code>React.useMemo</code>, the table would
   think it was receiving new data on every render and attempt to recalulate a

package/dist/components/ModularTable/ModularTable.js

@@ -53,7 +53,7 @@ ModularTable components accepts `columns` and `data` arguments in the same forma
 `columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
 `data` - The data array that you want to display on the table.
 ### Important note!
-Values passed to both of these params have to me memoized (for example via{" "}
+Values passed to both of these params have to be memoized (for example via{" "}
   <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
   on every render. If we didn't use <code>React.useMemo</code>, the table would
   think it was receiving new data on every render and attempt to recalulate a

package/dist/components/SearchBox/SearchBox.js

@@ -23,6 +23,8 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
  */
 const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) => {
   let {
+    name = "search",
+    id = "search",
     autocomplete = "on",
     className,
     disabled,
@@ -60,13 +62,13 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     className: (0, _classnames.default)("p-search-box", className)
   }, /*#__PURE__*/_react.default.createElement("label", {
     className: "u-off-screen",
-    htmlFor: "search"
+    htmlFor: id
   }, placeholder || "Search"), /*#__PURE__*/_react.default.createElement("input", _extends({
     autoComplete: autocomplete,
     className: "p-search-box__input",
     disabled: disabled,
-    id: "search",
-    name: "search",
+    id: id,
+    name: name,
     onChange: evt => onChange === null || onChange === void 0 ? void 0 : onChange(evt.target.value),
     onKeyDown: onKeyDown,
     placeholder: placeholder,

package/dist/esm/components/ContextualMenu/ContextualMenu.stories.d.ts

@@ -11,3 +11,4 @@ export declare const Toggle: Story;
 export declare const OverflowingContainer: Story;
 export declare const ChildFunction: Story;
 export declare const ChildElement: Story;
+export declare const InsideModal: Story;

package/dist/esm/components/ContextualMenu/ContextualMenu.stories.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Button from "../Button";
 import ContextualMenu from "./ContextualMenu";
+import Modal from "../Modal";
 var ScrollTemplate = args => /*#__PURE__*/React.createElement("div", {
   style: {
     maxWidth: "30rem",
@@ -97,4 +98,21 @@ export var ChildElement = {
     position: "right",
     toggleLabel: "Click me!"
   }
+};
+export var InsideModal = {
+  name: "Inside modal",
+  args: {
+    links: Array.from({
+      length: 5
+    }, (_, index) => ({
+      children: "Link ".concat(index + 1),
+      onClick: () => {}
+    })),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  },
+  render: args => /*#__PURE__*/React.createElement(Modal, {
+    title: "Contextual Menu inside Modal"
+  }, /*#__PURE__*/React.createElement(Template, args))
 };

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -39,5 +39,6 @@ export type Props<L = null> = {
  * @return The new position.
  */
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
+export declare const getNearestParentsZIndex: (element: HTMLElement | null) => string;
 declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, handleClose, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, contextualMenuClassName, ...props }: Props<L>) => React.JSX.Element;
 export default ContextualMenuDropdown;

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -134,6 +134,21 @@ var getClosestScrollableParent = node => {
   }
   return document.body;
 };
+
+// nearest parents z-index that is not 0 or auto
+export var getNearestParentsZIndex = element => {
+  if (!window || !element) {
+    return "0";
+  }
+  var zIndex = window.getComputedStyle(element, null).getPropertyValue("z-index");
+  if (!element.parentElement) {
+    return zIndex;
+  }
+  if (zIndex === "auto" || zIndex === "0" || zIndex === "") {
+    return getNearestParentsZIndex(element.parentElement);
+  }
+  return zIndex;
+};
 var ContextualMenuDropdown = _ref => {
   var {
       adjustedPosition,
@@ -206,6 +221,17 @@ var ContextualMenuDropdown = _ref => {
   useEffect(() => {
     updateVerticalPosition();
   }, [updateVerticalPosition]);
+  useEffect(() => {
+    if (!dropdown.current) return;
+
+    // align z-index: when we are in a modal context, we want the dropdown to be above the modal
+    // apply the nearest parents z-index + 1
+    var zIndex = getNearestParentsZIndex(positionNode);
+    if (parseInt(zIndex) > 0) {
+      var _dropdown$current$par;
+      (_dropdown$current$par = dropdown.current.parentElement) === null || _dropdown$current$par === void 0 || _dropdown$current$par.style.setProperty("z-index", zIndex + 1);
+    }
+  }, [positionNode]);
   return (
     /*#__PURE__*/
     // Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).

package/dist/esm/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.d.ts

@@ -19,7 +19,6 @@ export declare const adjustDropdownHeightBelow: (dropdown: HTMLUListElement) =>
 export declare const adjustDropdownHeightAbove: (dropdown: HTMLUListElement, search: HTMLInputElement | null) => void;
 export declare const dropdownIsAbove: (dropdown: HTMLUListElement) => boolean;
 export declare const adjustDropdownHeight: (dropdown: HTMLUListElement | null, search: HTMLInputElement | null) => void;
-export declare const getNearestParentsZIndex: (element: HTMLElement | null) => string;
 export declare const getOptionText: (option: CustomSelectOption) => string;
 declare const CustomSelectDropdown: FC<Props>;
 export default CustomSelectDropdown;

package/dist/esm/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.js

@@ -74,19 +74,6 @@ export var adjustDropdownHeight = (dropdown, search) => {
   }
   adjustDropdownHeightBelow(dropdown);
 };
-export var getNearestParentsZIndex = element => {
-  if (!document.defaultView || !element) {
-    return "0";
-  }
-  var zIndex = document.defaultView.getComputedStyle(element, null).getPropertyValue("z-index");
-  if (!element.parentElement) {
-    return zIndex;
-  }
-  if (zIndex === "auto" || zIndex === "0" || zIndex === "") {
-    return getNearestParentsZIndex(element.parentElement);
-  }
-  return zIndex;
-};
 export var getOptionText = option => {
   if (option.text) {
     return option.text;
@@ -124,14 +111,6 @@ var CustomSelectDropdown = _ref => {
       // align width with wrapper toggle width
       var toggleWidth = (_toggle$getBoundingCl = toggle === null || toggle === void 0 || (_toggle$getBoundingCl2 = toggle.getBoundingClientRect()) === null || _toggle$getBoundingCl2 === void 0 ? void 0 : _toggle$getBoundingCl2.width) !== null && _toggle$getBoundingCl !== void 0 ? _toggle$getBoundingCl : 0;
       dropdownRef.current.style.setProperty("min-width", "".concat(toggleWidth, "px"));
-
-      // align z-index: when we are in a modal context, we want the dropdown to be above the modal
-      // apply the nearest parents z-index + 1
-      var zIndex = getNearestParentsZIndex(toggle);
-      if (parseInt(zIndex) > 0) {
-        var _dropdownRef$current$;
-        (_dropdownRef$current$ = dropdownRef.current.parentElement) === null || _dropdownRef$current$ === void 0 || _dropdownRef$current$.style.setProperty("z-index", zIndex + 1);
-      }
     }
     setTimeout(() => {
       var _dropdownRef$current;

package/dist/esm/components/ModularTable/ModularTable.d.ts

@@ -57,7 +57,7 @@ ModularTable components accepts `columns` and `data` arguments in the same forma
 `columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
 `data` - The data array that you want to display on the table.
 ### Important note!
-Values passed to both of these params have to me memoized (for example via{" "}
+Values passed to both of these params have to be memoized (for example via{" "}
   <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
   on every render. If we didn't use <code>React.useMemo</code>, the table would
   think it was receiving new data on every render and attempt to recalulate a

package/dist/esm/components/ModularTable/ModularTable.js

@@ -50,7 +50,7 @@ ModularTable components accepts `columns` and `data` arguments in the same forma
 `columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
 `data` - The data array that you want to display on the table.
 ### Important note!
-Values passed to both of these params have to me memoized (for example via{" "}
+Values passed to both of these params have to be memoized (for example via{" "}
   <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
   on every render. If we didn't use <code>React.useMemo</code>, the table would
   think it was receiving new data on every render and attempt to recalulate a

package/dist/esm/components/SearchBox/SearchBox.js

@@ -1,4 +1,4 @@
-var _excluded = ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
+var _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
 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; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -17,6 +17,8 @@ export var Label = /*#__PURE__*/function (Label) {
  */
 var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
   var {
+      name = "search",
+      id = "search",
       autocomplete = "on",
       className,
       disabled,
@@ -54,13 +56,13 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     className: classNames("p-search-box", className)
   }, /*#__PURE__*/React.createElement("label", {
     className: "u-off-screen",
-    htmlFor: "search"
+    htmlFor: id
   }, placeholder || "Search"), /*#__PURE__*/React.createElement("input", _extends({
     autoComplete: autocomplete,
     className: "p-search-box__input",
     disabled: disabled,
-    id: "search",
-    name: "search",
+    id: id,
+    name: name,
     onChange: evt => _onChange === null || _onChange === void 0 ? void 0 : _onChange(evt.target.value),
     onKeyDown: onKeyDown,
     placeholder: placeholder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.21.0",
+    "vanilla-framework": "4.23.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },