@canonical/react-components 0.50.3 → 0.50.4

package/dist/components/Accordion/AccordionSection/AccordionSection.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _useId = require("../../../hooks/useId");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const AccordionSection = _ref => {
   let {
     content,
@@ -18,8 +18,8 @@ const AccordionSection = _ref => {
     titleElement,
     headingLevel = 3
   } = _ref;
-  const sectionId = (0, _useId.useId)();
-  const tabId = (0, _useId.useId)();
+  const sectionId = (0, _react.useId)();
+  const tabId = (0, _react.useId)();
   const key = sectionKey || sectionId;
   const isExpanded = expanded === key;
   const Title = titleElement || "div";

package/dist/components/Card/Card.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireDefault(require("react"));
-var _hooks = require("../../hooks");
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
 const Card = _ref => {
@@ -19,7 +20,7 @@ const Card = _ref => {
     title,
     ...props
   } = _ref;
-  const titleId = (0, _hooks.useId)();
+  const titleId = (0, _react.useId)();
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     "aria-labelledby": title ? titleId : undefined,
     className: (0, _classnames.default)(className, {

package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _useId = require("../../../hooks/useId");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,7 +19,7 @@ const CheckableInput = _ref => {
     inline,
     ...checkboxProps
   } = _ref;
-  const inputId = (0, _useId.useId)();
+  const inputId = (0, _react.useId)();
   const inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     inputRef.current.indeterminate = indeterminate;

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -10,7 +10,6 @@ var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 var _hooks = require("../../hooks");
 var _Button = _interopRequireDefault(require("../Button"));
 var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
-var _useId = require("../../hooks/useId");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -96,7 +95,7 @@ const ContextualMenu = _ref => {
     visible = false,
     ...wrapperProps
   } = _ref;
-  const id = (0, _useId.useId)();
+  const id = (0, _react.useId)();
   const wrapper = (0, _react.useRef)(null);
   const [positionCoords, setPositionCoords] = (0, _react.useState)();
   const [adjustedPosition, setAdjustedPosition] = (0, _react.useState)(position);

package/dist/components/Input/Input.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
 var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
 var _RadioInput = _interopRequireDefault(require("../RadioInput"));
-var _hooks = require("../../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,10 +38,10 @@ const Input = _ref => {
   } = _ref;
   const inputRef = (0, _react.useRef)(null);
   const fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
-  const defaultInputId = (0, _hooks.useId)();
+  const defaultInputId = (0, _react.useId)();
   const inputId = id || defaultInputId;
-  const validationId = (0, _hooks.useId)();
-  const helpId = (0, _hooks.useId)();
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
   const hasError = !!error;
   const description = [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" ");
   const commonProps = {

package/dist/components/Modal/Modal.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Modal = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _useId = require("../../hooks/useId");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,8 +22,8 @@ const Modal = _ref => {
   // list of focusable selectors is based on this Stack Overflow answer:
   // https://stackoverflow.com/a/30753870/3732840
   const focusableElementSelectors = 'a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
-  const descriptionId = (0, _useId.useId)();
-  const titleId = (0, _useId.useId)();
+  const descriptionId = (0, _react.useId)();
+  const titleId = (0, _react.useId)();
   const shouldClose = (0, _react.useRef)(false);
   const modalRef = (0, _react.useRef)(null);
   const focusableModalElements = (0, _react.useRef)(null);

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

@@ -27,7 +27,7 @@ const NavigationMenu = _ref => {
   const closeMenu = (0, _react.useCallback)(() => setIsOpen(false), [setIsOpen]);
   const menuRef = (0, _react.useRef)(null);
   (0, _hooks.useOnClickOutside)(menuRef, closeMenu);
-  const menuId = (0, _hooks.useId)();
+  const menuId = (0, _react.useId)();
   return /*#__PURE__*/_react.default.createElement("li", _extends({}, props, {
     className: (0, _classnames.default)(props.className, "p-navigation__item--dropdown-toggle", {
       "is-active": isOpen

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Field = _interopRequireDefault(require("../Field"));
 var _Label = _interopRequireDefault(require("../Label"));
-var _hooks = require("../../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,10 +37,10 @@ const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...inputProps
   } = _ref;
   const [isPassword, setIsPassword] = (0, _react.useState)(true);
-  const validationId = (0, _hooks.useId)();
-  const helpId = (0, _hooks.useId)();
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
   const hasError = !!error;
-  const defaultPasswordToggleId = (0, _hooks.useId)();
+  const defaultPasswordToggleId = (0, _react.useId)();
   const passwordToggleId = id || defaultPasswordToggleId;
   const togglePassword = () => {
     if (isPassword) {

package/dist/components/Select/Select.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
-var _hooks = require("../../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,10 +45,10 @@ const Select = _ref2 => {
     ...selectProps
   } = _ref2;
   const selectRef = (0, _react.useRef)(null);
-  const validationId = (0, _hooks.useId)();
-  const defaultSelectId = (0, _hooks.useId)();
+  const validationId = (0, _react.useId)();
+  const defaultSelectId = (0, _react.useId)();
   const selectId = id || defaultSelectId;
-  const helpId = (0, _hooks.useId)();
+  const helpId = (0, _react.useId)();
   const hasError = !!error;
   (0, _react.useEffect)(() => {
     if (takeFocus) {

package/dist/components/Slider/Slider.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Slider = exports.FILLED_COLOR = exports.EMPTY_COLOR = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
-var _hooks = require("../../hooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
 const FILLED_COLOR = exports.FILLED_COLOR = "#0066CC";
 const EMPTY_COLOR = exports.EMPTY_COLOR = "#D9D9D9";
@@ -28,9 +29,9 @@ const Slider = _ref => {
     showInput = false,
     ...inputProps
   } = _ref;
-  const validationId = (0, _hooks.useId)();
-  const helpId = (0, _hooks.useId)();
-  const defaultSliderId = (0, _hooks.useId)();
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
+  const defaultSliderId = (0, _react.useId)();
   const sliderId = id || defaultSliderId;
   const hasError = !!error;
   let style = {};

package/dist/components/Textarea/Textarea.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
-var _hooks = require("../../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,11 +35,11 @@ const Textarea = _ref => {
     ...props
   } = _ref;
   const textareaRef = (0, _react.useRef)(null);
-  const validationId = (0, _hooks.useId)();
-  const helpId = (0, _hooks.useId)();
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
   const hasError = !!error;
   const [innerValue, setInnervalue] = (0, _react.useState)(props.defaultValue);
-  const defaultTextAreaId = (0, _hooks.useId)();
+  const defaultTextAreaId = (0, _react.useId)();
   const textAreaId = id || defaultTextAreaId;
   (0, _react.useEffect)(() => {
     if (takeFocus) {

package/dist/components/Tooltip/Tooltip.js

@@ -148,7 +148,7 @@ const Tooltip = _ref => {
   } = (0, _reactUseportal.default)({
     programmaticallyOpen: true
   });
-  const tooltipId = (0, _hooks.useId)();
+  const tooltipId = (0, _react.useId)();
   const [timer, setTimer] = (0, _react.useState)(null);
   const cancelableClosePortal = (0, _react.useCallback)(() => {
     clearTimeout(timer);

package/dist/hooks/useId.d.ts

@@ -1,6 +1,4 @@
 /**
- * A hook that returns the same random ID string on every render.
- * Can be used as a value for HTML "id" attributes.
- * @returns random ID string
+ * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
  */
 export declare const useId: () => string;

package/dist/hooks/useId.js

@@ -5,11 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useId = void 0;
 var _react = require("react");
-var _nanoid = require("nanoid");
+var _utils = require("../utils");
 /**
- * A hook that returns the same random ID string on every render.
- * Can be used as a value for HTML "id" attributes.
- * @returns random ID string
+ * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
  */
-const useId = () => (0, _react.useRef)((0, _nanoid.nanoid)()).current;
+const useId = () => {
+  const id = (0, _react.useId)();
+  if (_utils.IS_DEV) {
+    console.warn('The useId hook has been deprecated. Use `import { useId } from "react";` instead.');
+  }
+  return id;
+};
 exports.useId = useId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.50.3",
+  "version": "0.50.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -43,6 +43,7 @@
     "@testing-library/jest-dom": "6.2.1",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
+    "@types/lodash.isequal": "4",
     "@typescript-eslint/eslint-plugin": "6.19.1",
     "@typescript-eslint/parser": "6.19.1",
     "babel-jest": "29.7.0",
@@ -90,13 +91,13 @@
   },
   "dependencies": {
     "@types/jest": "29.5.11",
-    "@types/node": "18.19.4",
+    "@types/node": "20.8.5",
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "@types/react-table": "7.7.19",
     "classnames": "2.5.1",
     "jest-environment-jsdom": "29.7.0",
-    "nanoid": "5.0.4",
+    "lodash.isequal": "4.5.0",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"

package/dist/__mocks__/nanoid.d.ts

@@ -1 +0,0 @@
-export declare const nanoid: () => string;

package/dist/__mocks__/nanoid.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.nanoid = void 0;
-let id = 0;
-beforeEach(() => {
-  id = 0;
-});
-const nanoid = () => {
-  id++;
-  return "mock-nanoid-".concat(id);
-};
-exports.nanoid = nanoid;