@canonical/react-components 0.50.2 → 0.50.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/AccordionSection/AccordionSection.js +5 -5
- package/dist/components/Card/Card.js +4 -3
- package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +1 -2
- package/dist/components/ContextualMenu/ContextualMenu.js +1 -2
- package/dist/components/Input/Input.js +5 -5
- package/dist/components/Modal/Modal.js +2 -3
- package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +1 -1
- package/dist/components/PasswordToggle/PasswordToggle.js +3 -4
- package/dist/components/Select/Select.js +3 -4
- package/dist/components/Slider/Slider.js +6 -5
- package/dist/components/TablePagination/TablePagination.scss +9 -1
- package/dist/components/Textarea/Textarea.js +3 -4
- package/dist/components/Tooltip/Tooltip.js +1 -1
- package/dist/hooks/useId.d.ts +1 -3
- package/dist/hooks/useId.js +9 -5
- package/package.json +4 -3
- package/dist/__mocks__/nanoid.d.ts +0 -1
- package/dist/__mocks__/nanoid.js +0 -15
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
8
|
-
|
|
9
|
-
function
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
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); }
|
|
9
|
+
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; }
|
|
10
10
|
const AccordionSection = _ref => {
|
|
11
11
|
let {
|
|
12
12
|
content,
|
|
@@ -18,8 +18,8 @@ const AccordionSection = _ref => {
|
|
|
18
18
|
titleElement,
|
|
19
19
|
headingLevel = 3
|
|
20
20
|
} = _ref;
|
|
21
|
-
const sectionId = (0,
|
|
22
|
-
const tabId = (0,
|
|
21
|
+
const sectionId = (0, _react.useId)();
|
|
22
|
+
const tabId = (0, _react.useId)();
|
|
23
23
|
const key = sectionKey || sectionId;
|
|
24
24
|
const isExpanded = expanded === key;
|
|
25
25
|
const Title = titleElement || "div";
|
|
@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
|
-
var _react =
|
|
9
|
-
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
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); }
|
|
10
|
+
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; }
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
12
|
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); }
|
|
12
13
|
const Card = _ref => {
|
|
@@ -19,7 +20,7 @@ const Card = _ref => {
|
|
|
19
20
|
title,
|
|
20
21
|
...props
|
|
21
22
|
} = _ref;
|
|
22
|
-
const titleId = (0,
|
|
23
|
+
const titleId = (0, _react.useId)();
|
|
23
24
|
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
24
25
|
"aria-labelledby": title ? titleId : undefined,
|
|
25
26
|
className: (0, _classnames.default)(className, {
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _useId = require("../../../hooks/useId");
|
|
10
9
|
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); }
|
|
11
10
|
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; }
|
|
12
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -20,7 +19,7 @@ const CheckableInput = _ref => {
|
|
|
20
19
|
inline,
|
|
21
20
|
...checkboxProps
|
|
22
21
|
} = _ref;
|
|
23
|
-
const inputId = (0,
|
|
22
|
+
const inputId = (0, _react.useId)();
|
|
24
23
|
const inputRef = (0, _react.useRef)(null);
|
|
25
24
|
(0, _react.useEffect)(() => {
|
|
26
25
|
inputRef.current.indeterminate = indeterminate;
|
|
@@ -10,7 +10,6 @@ var _reactUseportal = _interopRequireDefault(require("react-useportal"));
|
|
|
10
10
|
var _hooks = require("../../hooks");
|
|
11
11
|
var _Button = _interopRequireDefault(require("../Button"));
|
|
12
12
|
var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
|
|
13
|
-
var _useId = require("../../hooks/useId");
|
|
14
13
|
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); }
|
|
15
14
|
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; }
|
|
16
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -96,7 +95,7 @@ const ContextualMenu = _ref => {
|
|
|
96
95
|
visible = false,
|
|
97
96
|
...wrapperProps
|
|
98
97
|
} = _ref;
|
|
99
|
-
const id = (0,
|
|
98
|
+
const id = (0, _react.useId)();
|
|
100
99
|
const wrapper = (0, _react.useRef)(null);
|
|
101
100
|
const [positionCoords, setPositionCoords] = (0, _react.useState)();
|
|
102
101
|
const [adjustedPosition, setAdjustedPosition] = (0, _react.useState)(position);
|
|
@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _Field = _interopRequireDefault(require("../Field"));
|
|
10
10
|
var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
|
|
11
11
|
var _RadioInput = _interopRequireDefault(require("../RadioInput"));
|
|
12
|
-
var _hooks = require("../../hooks");
|
|
13
12
|
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); }
|
|
14
13
|
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; }
|
|
15
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -39,13 +38,14 @@ const Input = _ref => {
|
|
|
39
38
|
} = _ref;
|
|
40
39
|
const inputRef = (0, _react.useRef)(null);
|
|
41
40
|
const fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
|
|
42
|
-
const defaultInputId = (0,
|
|
41
|
+
const defaultInputId = (0, _react.useId)();
|
|
43
42
|
const inputId = id || defaultInputId;
|
|
44
|
-
const validationId = (0,
|
|
45
|
-
const helpId = (0,
|
|
43
|
+
const validationId = (0, _react.useId)();
|
|
44
|
+
const helpId = (0, _react.useId)();
|
|
46
45
|
const hasError = !!error;
|
|
46
|
+
const description = [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" ");
|
|
47
47
|
const commonProps = {
|
|
48
|
-
"aria-describedby":
|
|
48
|
+
"aria-describedby": !description ? undefined : description,
|
|
49
49
|
"aria-errormessage": hasError ? validationId : null,
|
|
50
50
|
"aria-invalid": hasError,
|
|
51
51
|
id: inputId,
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.Modal = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _useId = require("../../hooks/useId");
|
|
10
9
|
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); }
|
|
11
10
|
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; }
|
|
12
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -23,8 +22,8 @@ const Modal = _ref => {
|
|
|
23
22
|
// list of focusable selectors is based on this Stack Overflow answer:
|
|
24
23
|
// https://stackoverflow.com/a/30753870/3732840
|
|
25
24
|
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"])';
|
|
26
|
-
const descriptionId = (0,
|
|
27
|
-
const titleId = (0,
|
|
25
|
+
const descriptionId = (0, _react.useId)();
|
|
26
|
+
const titleId = (0, _react.useId)();
|
|
28
27
|
const shouldClose = (0, _react.useRef)(false);
|
|
29
28
|
const modalRef = (0, _react.useRef)(null);
|
|
30
29
|
const focusableModalElements = (0, _react.useRef)(null);
|
|
@@ -27,7 +27,7 @@ const NavigationMenu = _ref => {
|
|
|
27
27
|
const closeMenu = (0, _react.useCallback)(() => setIsOpen(false), [setIsOpen]);
|
|
28
28
|
const menuRef = (0, _react.useRef)(null);
|
|
29
29
|
(0, _hooks.useOnClickOutside)(menuRef, closeMenu);
|
|
30
|
-
const menuId = (0,
|
|
30
|
+
const menuId = (0, _react.useId)();
|
|
31
31
|
return /*#__PURE__*/_react.default.createElement("li", _extends({}, props, {
|
|
32
32
|
className: (0, _classnames.default)(props.className, "p-navigation__item--dropdown-toggle", {
|
|
33
33
|
"is-active": isOpen
|
|
@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _Button = _interopRequireDefault(require("../Button"));
|
|
10
10
|
var _Field = _interopRequireDefault(require("../Field"));
|
|
11
11
|
var _Label = _interopRequireDefault(require("../Label"));
|
|
12
|
-
var _hooks = require("../../hooks");
|
|
13
12
|
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); }
|
|
14
13
|
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; }
|
|
15
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -38,10 +37,10 @@ const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
38
37
|
...inputProps
|
|
39
38
|
} = _ref;
|
|
40
39
|
const [isPassword, setIsPassword] = (0, _react.useState)(true);
|
|
41
|
-
const validationId = (0,
|
|
42
|
-
const helpId = (0,
|
|
40
|
+
const validationId = (0, _react.useId)();
|
|
41
|
+
const helpId = (0, _react.useId)();
|
|
43
42
|
const hasError = !!error;
|
|
44
|
-
const defaultPasswordToggleId = (0,
|
|
43
|
+
const defaultPasswordToggleId = (0, _react.useId)();
|
|
45
44
|
const passwordToggleId = id || defaultPasswordToggleId;
|
|
46
45
|
const togglePassword = () => {
|
|
47
46
|
if (isPassword) {
|
|
@@ -7,7 +7,6 @@ exports.default = void 0;
|
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _Field = _interopRequireDefault(require("../Field"));
|
|
10
|
-
var _hooks = require("../../hooks");
|
|
11
10
|
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); }
|
|
12
11
|
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; }
|
|
13
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -46,10 +45,10 @@ const Select = _ref2 => {
|
|
|
46
45
|
...selectProps
|
|
47
46
|
} = _ref2;
|
|
48
47
|
const selectRef = (0, _react.useRef)(null);
|
|
49
|
-
const validationId = (0,
|
|
50
|
-
const defaultSelectId = (0,
|
|
48
|
+
const validationId = (0, _react.useId)();
|
|
49
|
+
const defaultSelectId = (0, _react.useId)();
|
|
51
50
|
const selectId = id || defaultSelectId;
|
|
52
|
-
const helpId = (0,
|
|
51
|
+
const helpId = (0, _react.useId)();
|
|
53
52
|
const hasError = !!error;
|
|
54
53
|
(0, _react.useEffect)(() => {
|
|
55
54
|
if (takeFocus) {
|
|
@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.Slider = exports.FILLED_COLOR = exports.EMPTY_COLOR = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _Field = _interopRequireDefault(require("../Field"));
|
|
9
|
-
var _hooks = require("../../hooks");
|
|
10
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
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); }
|
|
11
|
+
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; }
|
|
11
12
|
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); }
|
|
12
13
|
const FILLED_COLOR = exports.FILLED_COLOR = "#0066CC";
|
|
13
14
|
const EMPTY_COLOR = exports.EMPTY_COLOR = "#D9D9D9";
|
|
@@ -28,9 +29,9 @@ const Slider = _ref => {
|
|
|
28
29
|
showInput = false,
|
|
29
30
|
...inputProps
|
|
30
31
|
} = _ref;
|
|
31
|
-
const validationId = (0,
|
|
32
|
-
const helpId = (0,
|
|
33
|
-
const defaultSliderId = (0,
|
|
32
|
+
const validationId = (0, _react.useId)();
|
|
33
|
+
const helpId = (0, _react.useId)();
|
|
34
|
+
const defaultSliderId = (0, _react.useId)();
|
|
34
35
|
const sliderId = id || defaultSliderId;
|
|
35
36
|
const hasError = !!error;
|
|
36
37
|
let style = {};
|
|
@@ -3,10 +3,18 @@
|
|
|
3
3
|
.pagination {
|
|
4
4
|
align-items: baseline;
|
|
5
5
|
display: flex;
|
|
6
|
-
margin
|
|
6
|
+
margin: $spv--large 0;
|
|
7
|
+
|
|
8
|
+
@media screen and (max-width: $breakpoint-small) {
|
|
9
|
+
justify-content: flex-end;
|
|
10
|
+
}
|
|
7
11
|
|
|
8
12
|
.description {
|
|
9
13
|
flex-grow: 1;
|
|
14
|
+
|
|
15
|
+
@media screen and (max-width: $breakpoint-small) {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
10
18
|
}
|
|
11
19
|
|
|
12
20
|
.back {
|
|
@@ -7,7 +7,6 @@ exports.default = void 0;
|
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _Field = _interopRequireDefault(require("../Field"));
|
|
10
|
-
var _hooks = require("../../hooks");
|
|
11
10
|
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); }
|
|
12
11
|
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; }
|
|
13
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -36,11 +35,11 @@ const Textarea = _ref => {
|
|
|
36
35
|
...props
|
|
37
36
|
} = _ref;
|
|
38
37
|
const textareaRef = (0, _react.useRef)(null);
|
|
39
|
-
const validationId = (0,
|
|
40
|
-
const helpId = (0,
|
|
38
|
+
const validationId = (0, _react.useId)();
|
|
39
|
+
const helpId = (0, _react.useId)();
|
|
41
40
|
const hasError = !!error;
|
|
42
41
|
const [innerValue, setInnervalue] = (0, _react.useState)(props.defaultValue);
|
|
43
|
-
const defaultTextAreaId = (0,
|
|
42
|
+
const defaultTextAreaId = (0, _react.useId)();
|
|
44
43
|
const textAreaId = id || defaultTextAreaId;
|
|
45
44
|
(0, _react.useEffect)(() => {
|
|
46
45
|
if (takeFocus) {
|
|
@@ -148,7 +148,7 @@ const Tooltip = _ref => {
|
|
|
148
148
|
} = (0, _reactUseportal.default)({
|
|
149
149
|
programmaticallyOpen: true
|
|
150
150
|
});
|
|
151
|
-
const tooltipId = (0,
|
|
151
|
+
const tooltipId = (0, _react.useId)();
|
|
152
152
|
const [timer, setTimer] = (0, _react.useState)(null);
|
|
153
153
|
const cancelableClosePortal = (0, _react.useCallback)(() => {
|
|
154
154
|
clearTimeout(timer);
|
package/dist/hooks/useId.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
* Can be used as a value for HTML "id" attributes.
|
|
4
|
-
* @returns random ID string
|
|
2
|
+
* @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
|
|
5
3
|
*/
|
|
6
4
|
export declare const useId: () => string;
|
package/dist/hooks/useId.js
CHANGED
|
@@ -5,11 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useId = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
var
|
|
8
|
+
var _utils = require("../utils");
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
* Can be used as a value for HTML "id" attributes.
|
|
12
|
-
* @returns random ID string
|
|
10
|
+
* @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
|
|
13
11
|
*/
|
|
14
|
-
const useId = () =>
|
|
12
|
+
const useId = () => {
|
|
13
|
+
const id = (0, _react.useId)();
|
|
14
|
+
if (_utils.IS_DEV) {
|
|
15
|
+
console.warn('The useId hook has been deprecated. Use `import { useId } from "react";` instead.');
|
|
16
|
+
}
|
|
17
|
+
return id;
|
|
18
|
+
};
|
|
15
19
|
exports.useId = useId;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canonical/react-components",
|
|
3
|
-
"version": "0.50.
|
|
3
|
+
"version": "0.50.4",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"author": "Huw Wilkins <huw.wilkins@canonical.com>",
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"@testing-library/jest-dom": "6.2.1",
|
|
44
44
|
"@testing-library/react": "14.1.2",
|
|
45
45
|
"@testing-library/user-event": "14.5.2",
|
|
46
|
+
"@types/lodash.isequal": "4",
|
|
46
47
|
"@typescript-eslint/eslint-plugin": "6.19.1",
|
|
47
48
|
"@typescript-eslint/parser": "6.19.1",
|
|
48
49
|
"babel-jest": "29.7.0",
|
|
@@ -90,13 +91,13 @@
|
|
|
90
91
|
},
|
|
91
92
|
"dependencies": {
|
|
92
93
|
"@types/jest": "29.5.11",
|
|
93
|
-
"@types/node": "
|
|
94
|
+
"@types/node": "20.8.5",
|
|
94
95
|
"@types/react": "18.2.46",
|
|
95
96
|
"@types/react-dom": "18.2.18",
|
|
96
97
|
"@types/react-table": "7.7.19",
|
|
97
98
|
"classnames": "2.5.1",
|
|
98
99
|
"jest-environment-jsdom": "29.7.0",
|
|
99
|
-
"
|
|
100
|
+
"lodash.isequal": "4.5.0",
|
|
100
101
|
"prop-types": "15.8.1",
|
|
101
102
|
"react-table": "7.8.0",
|
|
102
103
|
"react-useportal": "1.0.19"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const nanoid: () => string;
|
package/dist/__mocks__/nanoid.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.nanoid = void 0;
|
|
7
|
-
let id = 0;
|
|
8
|
-
beforeEach(() => {
|
|
9
|
-
id = 0;
|
|
10
|
-
});
|
|
11
|
-
const nanoid = () => {
|
|
12
|
-
id++;
|
|
13
|
-
return "mock-nanoid-".concat(id);
|
|
14
|
-
};
|
|
15
|
-
exports.nanoid = nanoid;
|