@carbon/react 1.33.0 → 1.33.2

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.
@@ -10,9 +10,9 @@ import React__default, { useRef, useState } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import cx from 'classnames';
12
12
  import { ChevronDown } from '@carbon/icons-react';
13
+ import { IconButton } from '../IconButton/index.js';
13
14
  import Button from '../Button/Button.js';
14
15
  import '../Button/Button.Skeleton.js';
15
- import { IconButton } from '../IconButton/index.js';
16
16
  import { Menu } from '../Menu/Menu.js';
17
17
  import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
18
18
  import { useId } from '../../internal/useId.js';
@@ -5,47 +5,46 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import PropTypes from 'prop-types';
8
- import { TableHTMLAttributes } from 'react';
9
- export interface DataTableSkeletonHeader {
8
+ export interface DataTableSkeletonProps {
10
9
  /**
11
- * Optionally specify header label
10
+ * Specify an optional className to add.
12
11
  */
13
- header?: string;
14
- /**
15
- * Optionally specify header key
16
- */
17
- key?: string;
18
- }
19
- export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableElement> {
12
+ className?: string;
20
13
  /**
21
14
  * Specify the number of columns that you want to render in the skeleton state
22
15
  */
23
- columnCount?: number;
16
+ columnCount: number;
24
17
  /**
25
18
  * Optionally specify whether you want the Skeleton to be rendered as a
26
19
  * compact DataTable
27
20
  */
28
- compact?: boolean;
21
+ compact: boolean;
29
22
  /**
30
23
  * Optionally specify the displayed headers
31
24
  */
32
- headers?: DataTableSkeletonHeader[];
25
+ headers?: [{
26
+ header: string;
27
+ key: string;
28
+ }] | {
29
+ header: string;
30
+ key: string;
31
+ };
33
32
  /**
34
33
  * Specify the number of rows that you want to render in the skeleton state
35
34
  */
36
- rowCount?: number;
35
+ rowCount: number;
37
36
  /**
38
37
  * Specify if the table header should be rendered as part of the skeleton.
39
38
  */
40
- showHeader?: boolean;
39
+ showHeader: boolean;
41
40
  /**
42
41
  * Specify if the table toolbar should be rendered as part of the skeleton.
43
42
  */
44
- showToolbar?: boolean;
43
+ showToolbar: boolean;
45
44
  /**
46
45
  * Optionally specify whether you want the DataTable to be zebra striped
47
46
  */
48
- zebra?: boolean;
47
+ zebra: boolean;
49
48
  }
50
49
  declare const DataTableSkeleton: {
51
50
  ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {
@@ -41,7 +41,6 @@ const Tag = _ref => {
41
41
  disabled,
42
42
  onClose,
43
43
  size,
44
- as: BaseComponent,
45
44
  ...other
46
45
  } = _ref;
47
46
  const prefix = usePrefix();
@@ -62,8 +61,7 @@ const Tag = _ref => {
62
61
  }
63
62
  };
64
63
  if (filter) {
65
- const ComponentTag = BaseComponent ?? 'div';
66
- return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
64
+ return /*#__PURE__*/React__default.createElement("div", _extends({
67
65
  className: tagClasses,
68
66
  id: tagId
69
67
  }, other), /*#__PURE__*/React__default.createElement("span", {
@@ -78,7 +76,7 @@ const Tag = _ref => {
78
76
  title: title
79
77
  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
80
78
  }
81
- const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
79
+ const ComponentTag = other.onClick ? 'button' : 'div';
82
80
  return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
83
81
  disabled: ComponentTag === 'button' ? disabled : null,
84
82
  className: tagClasses,
@@ -90,11 +88,6 @@ const Tag = _ref => {
90
88
  }, children !== null && children !== undefined ? children : TYPES[type]));
91
89
  };
92
90
  Tag.propTypes = {
93
- /**
94
- * Provide an alternative tag or component to use instead of the default
95
- * wrapping element
96
- */
97
- as: PropTypes.elementType,
98
91
  /**
99
92
  * Provide content to be rendered inside of a <Tag>
100
93
  */
@@ -28,10 +28,6 @@ declare namespace HeaderMenuButton {
28
28
  * Specify whether the menu button is "active".
29
29
  */
30
30
  isActive: PropTypes.Requireable<boolean>;
31
- /**
32
- * Specify whether the menu button is collapsible.
33
- */
34
- isCollapsible: PropTypes.Requireable<boolean>;
35
31
  /**
36
32
  * Optionally provide an onClick handler that is called when the underlying
37
33
  * button fires it's onclick event
@@ -64,10 +64,6 @@ HeaderMenuButton.propTypes = {
64
64
  * Specify whether the menu button is "active".
65
65
  */
66
66
  isActive: PropTypes.bool,
67
- /**
68
- * Specify whether the menu button is collapsible.
69
- */
70
- isCollapsible: PropTypes.bool,
71
67
  /**
72
68
  * Optionally provide an onClick handler that is called when the underlying
73
69
  * button fires it's onclick event
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { useLayoutEffect, useEffect, useState, useId as useId$1 } from 'react';
8
+ import React__default, { useLayoutEffect, useEffect, useState } from 'react';
9
9
  import setupGetInstanceId from '../tools/setupGetInstanceId.js';
10
10
  import { canUseDOM } from './environment.js';
11
11
  import { useIdPrefix } from './useIdPrefix.js';
@@ -39,14 +39,14 @@ function useId() {
39
39
  serverHandoffCompleted = true;
40
40
  }
41
41
  }, []);
42
- if (useId$1) {
42
+ if (typeof React__default['useId'] === 'function') {
43
43
  const id = nativeReactUseId(_prefix, prefix);
44
44
  return id;
45
45
  }
46
46
  return id;
47
47
  }
48
48
  function nativeReactUseId(_prefix, prefix) {
49
- const getId = useId$1();
49
+ const getId = React__default['useId']();
50
50
  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
51
51
  return id;
52
52
  }
@@ -14,9 +14,9 @@ var React = require('react');
14
14
  var PropTypes = require('prop-types');
15
15
  var cx = require('classnames');
16
16
  var iconsReact = require('@carbon/icons-react');
17
+ var index = require('../IconButton/index.js');
17
18
  var Button = require('../Button/Button.js');
18
19
  require('../Button/Button.Skeleton.js');
19
- var index = require('../IconButton/index.js');
20
20
  var Menu = require('../Menu/Menu.js');
21
21
  var useAttachedMenu = require('../../internal/useAttachedMenu.js');
22
22
  var useId = require('../../internal/useId.js');
@@ -5,47 +5,46 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import PropTypes from 'prop-types';
8
- import { TableHTMLAttributes } from 'react';
9
- export interface DataTableSkeletonHeader {
8
+ export interface DataTableSkeletonProps {
10
9
  /**
11
- * Optionally specify header label
10
+ * Specify an optional className to add.
12
11
  */
13
- header?: string;
14
- /**
15
- * Optionally specify header key
16
- */
17
- key?: string;
18
- }
19
- export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableElement> {
12
+ className?: string;
20
13
  /**
21
14
  * Specify the number of columns that you want to render in the skeleton state
22
15
  */
23
- columnCount?: number;
16
+ columnCount: number;
24
17
  /**
25
18
  * Optionally specify whether you want the Skeleton to be rendered as a
26
19
  * compact DataTable
27
20
  */
28
- compact?: boolean;
21
+ compact: boolean;
29
22
  /**
30
23
  * Optionally specify the displayed headers
31
24
  */
32
- headers?: DataTableSkeletonHeader[];
25
+ headers?: [{
26
+ header: string;
27
+ key: string;
28
+ }] | {
29
+ header: string;
30
+ key: string;
31
+ };
33
32
  /**
34
33
  * Specify the number of rows that you want to render in the skeleton state
35
34
  */
36
- rowCount?: number;
35
+ rowCount: number;
37
36
  /**
38
37
  * Specify if the table header should be rendered as part of the skeleton.
39
38
  */
40
- showHeader?: boolean;
39
+ showHeader: boolean;
41
40
  /**
42
41
  * Specify if the table toolbar should be rendered as part of the skeleton.
43
42
  */
44
- showToolbar?: boolean;
43
+ showToolbar: boolean;
45
44
  /**
46
45
  * Optionally specify whether you want the DataTable to be zebra striped
47
46
  */
48
- zebra?: boolean;
47
+ zebra: boolean;
49
48
  }
50
49
  declare const DataTableSkeleton: {
51
50
  ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {
@@ -51,7 +51,6 @@ const Tag = _ref => {
51
51
  disabled,
52
52
  onClose,
53
53
  size,
54
- as: BaseComponent,
55
54
  ...other
56
55
  } = _ref;
57
56
  const prefix = usePrefix.usePrefix();
@@ -72,8 +71,7 @@ const Tag = _ref => {
72
71
  }
73
72
  };
74
73
  if (filter) {
75
- const ComponentTag = BaseComponent ?? 'div';
76
- return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
74
+ return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
77
75
  className: tagClasses,
78
76
  id: tagId
79
77
  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -88,7 +86,7 @@ const Tag = _ref => {
88
86
  title: title
89
87
  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
90
88
  }
91
- const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
89
+ const ComponentTag = other.onClick ? 'button' : 'div';
92
90
  return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
93
91
  disabled: ComponentTag === 'button' ? disabled : null,
94
92
  className: tagClasses,
@@ -100,11 +98,6 @@ const Tag = _ref => {
100
98
  }, children !== null && children !== undefined ? children : TYPES[type]));
101
99
  };
102
100
  Tag.propTypes = {
103
- /**
104
- * Provide an alternative tag or component to use instead of the default
105
- * wrapping element
106
- */
107
- as: PropTypes__default["default"].elementType,
108
101
  /**
109
102
  * Provide content to be rendered inside of a <Tag>
110
103
  */
@@ -28,10 +28,6 @@ declare namespace HeaderMenuButton {
28
28
  * Specify whether the menu button is "active".
29
29
  */
30
30
  isActive: PropTypes.Requireable<boolean>;
31
- /**
32
- * Specify whether the menu button is collapsible.
33
- */
34
- isCollapsible: PropTypes.Requireable<boolean>;
35
31
  /**
36
32
  * Optionally provide an onClick handler that is called when the underlying
37
33
  * button fires it's onclick event
@@ -74,10 +74,6 @@ HeaderMenuButton.propTypes = {
74
74
  * Specify whether the menu button is "active".
75
75
  */
76
76
  isActive: PropTypes__default["default"].bool,
77
- /**
78
- * Specify whether the menu button is collapsible.
79
- */
80
- isCollapsible: PropTypes__default["default"].bool,
81
77
  /**
82
78
  * Optionally provide an onClick handler that is called when the underlying
83
79
  * button fires it's onclick event
@@ -14,6 +14,10 @@ var setupGetInstanceId = require('../tools/setupGetInstanceId.js');
14
14
  var environment = require('./environment.js');
15
15
  var useIdPrefix = require('./useIdPrefix.js');
16
16
 
17
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
+
19
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
+
17
21
  // This file was heavily inspired by Reach UI and their work on their auto-id
18
22
  const getId = setupGetInstanceId["default"]();
19
23
  const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
@@ -43,14 +47,14 @@ function useId() {
43
47
  serverHandoffCompleted = true;
44
48
  }
45
49
  }, []);
46
- if (React.useId) {
50
+ if (typeof React__default["default"]['useId'] === 'function') {
47
51
  const id = nativeReactUseId(_prefix, prefix);
48
52
  return id;
49
53
  }
50
54
  return id;
51
55
  }
52
56
  function nativeReactUseId(_prefix, prefix) {
53
- const getId = React.useId();
57
+ const getId = React__default["default"]['useId']();
54
58
  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
55
59
  return id;
56
60
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.33.0",
4
+ "version": "1.33.2",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -45,9 +45,9 @@
45
45
  "dependencies": {
46
46
  "@babel/runtime": "^7.18.3",
47
47
  "@carbon/feature-flags": "^0.15.0",
48
- "@carbon/icons-react": "^11.22.0",
49
- "@carbon/layout": "^11.16.0",
50
- "@carbon/styles": "^1.33.0",
48
+ "@carbon/icons-react": "^11.22.1",
49
+ "@carbon/layout": "^11.16.1",
50
+ "@carbon/styles": "^1.33.1",
51
51
  "@carbon/telemetry": "0.1.0",
52
52
  "classnames": "2.3.2",
53
53
  "copy-to-clipboard": "^3.3.1",
@@ -75,7 +75,7 @@
75
75
  "@babel/preset-react": "^7.22.3",
76
76
  "@babel/preset-typescript": "^7.21.5",
77
77
  "@carbon/test-utils": "^10.30.0",
78
- "@carbon/themes": "^11.21.0",
78
+ "@carbon/themes": "^11.21.1",
79
79
  "@rollup/plugin-babel": "^6.0.0",
80
80
  "@rollup/plugin-commonjs": "^25.0.0",
81
81
  "@rollup/plugin-node-resolve": "^15.0.0",
@@ -137,5 +137,5 @@
137
137
  "**/*.scss",
138
138
  "**/*.css"
139
139
  ],
140
- "gitHead": "3a58934eed5588f5e8ee1facbb09584a41adc089"
140
+ "gitHead": "292537f58efeb08051e3e32afd6c1a923c92060f"
141
141
  }