@carbon/ibm-products 2.35.0 → 2.36.0-alpha.27

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. package/css/index-full-carbon.css +957 -567
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +67 -74
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +227 -206
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +443 -247
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Coachmark/utils/enums.d.ts +36 -22
  18. package/es/components/CoachmarkBeacon/CoachmarkBeacon.d.ts +26 -2
  19. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +1 -3
  20. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.d.ts +28 -2
  21. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +0 -1
  22. package/es/components/ConditionBuilder/assets/sampleInput.d.ts +5 -5
  23. package/es/components/CreateFullPage/CreateFullPage.d.ts +121 -4
  24. package/es/components/CreateFullPage/CreateFullPage.js +12 -8
  25. package/es/components/CreateTearsheet/CreateTearsheet.js +2 -0
  26. package/es/components/Datagrid/Datagrid/DatagridRow.js +4 -3
  27. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -1
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +10 -6
  29. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
  30. package/es/components/EditFullPage/EditFullPage.d.ts +19 -2
  31. package/es/components/EditFullPage/EditFullPage.js +3 -3
  32. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts +61 -2
  33. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -3
  34. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts +61 -2
  35. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -2
  36. package/es/components/FullPageError/FullPageError.d.ts +2 -1
  37. package/es/components/FullPageError/FullPageError.js +24 -49
  38. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.d.ts +40 -2
  39. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +1 -1
  40. package/es/components/InlineTip/InlineTipLink.d.ts +19 -2
  41. package/es/components/InterstitialScreenView/InterstitialScreenView.d.ts +23 -2
  42. package/es/components/InterstitialScreenView/InterstitialScreenView.js +0 -1
  43. package/es/components/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts +23 -2
  44. package/es/components/NonLinearReading/NonLinearReading.d.ts +28 -2
  45. package/es/components/NonLinearReading/NonLinearReading.js +2 -7
  46. package/es/components/SearchBar/SearchBar.d.ts +51 -3
  47. package/es/components/SearchBar/SearchBar.js +5 -6
  48. package/es/components/SidePanel/SidePanel.js +10 -5
  49. package/es/components/TruncatedList/TruncatedList.d.ts +47 -2
  50. package/es/components/TruncatedList/TruncatedList.js +5 -4
  51. package/lib/components/Coachmark/utils/enums.d.ts +36 -22
  52. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.d.ts +26 -2
  53. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +1 -3
  54. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.d.ts +28 -2
  55. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +0 -1
  56. package/lib/components/ConditionBuilder/assets/sampleInput.d.ts +5 -5
  57. package/lib/components/CreateFullPage/CreateFullPage.d.ts +121 -4
  58. package/lib/components/CreateFullPage/CreateFullPage.js +12 -8
  59. package/lib/components/CreateTearsheet/CreateTearsheet.js +2 -0
  60. package/lib/components/Datagrid/Datagrid/DatagridRow.js +4 -3
  61. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -1
  62. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +11 -7
  63. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
  64. package/lib/components/EditFullPage/EditFullPage.d.ts +19 -2
  65. package/lib/components/EditFullPage/EditFullPage.js +3 -3
  66. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts +61 -2
  67. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -3
  68. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts +61 -2
  69. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -2
  70. package/lib/components/FullPageError/FullPageError.d.ts +2 -1
  71. package/lib/components/FullPageError/FullPageError.js +24 -49
  72. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.d.ts +40 -2
  73. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +1 -1
  74. package/lib/components/InlineTip/InlineTipLink.d.ts +19 -2
  75. package/lib/components/InterstitialScreenView/InterstitialScreenView.d.ts +23 -2
  76. package/lib/components/InterstitialScreenView/InterstitialScreenView.js +0 -1
  77. package/lib/components/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts +23 -2
  78. package/lib/components/NonLinearReading/NonLinearReading.d.ts +28 -2
  79. package/lib/components/NonLinearReading/NonLinearReading.js +2 -7
  80. package/lib/components/SearchBar/SearchBar.d.ts +51 -3
  81. package/lib/components/SearchBar/SearchBar.js +5 -6
  82. package/lib/components/SidePanel/SidePanel.js +10 -5
  83. package/lib/components/TruncatedList/TruncatedList.d.ts +47 -2
  84. package/lib/components/TruncatedList/TruncatedList.js +5 -4
  85. package/package.json +4 -4
  86. package/scss/components/Datagrid/styles/_useSortableColumns.scss +2 -0
  87. package/scss/components/FullPageError/_full-page-error.scss +10 -10
  88. package/scss/components/UserAvatar/_user-avatar.scss +6 -3
@@ -9,17 +9,14 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
9
9
  import React__default from 'react';
10
10
  import PropTypes from '../../node_modules/prop-types/index.js';
11
11
  import cx from 'classnames';
12
- import { Grid, Column } from '@carbon/react';
13
- import { ErrorGenericSVG } from './assets/ErrorGenericSVG.js';
14
12
  import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
15
13
  import { pkg } from '../../settings.js';
14
+ import { ErrorGenericSVG } from './assets/ErrorGenericSVG.js';
16
15
  import { Error404SVG } from './assets/Error404SVG.js';
17
16
  import { Error403SVG } from './assets/Error403SVG.js';
17
+ import { Grid, Column } from '@carbon/react';
18
18
 
19
- var _excluded = ["children", "className", "description", "errorLabel", "kind", "title"];
20
-
21
- // Carbon and package components we use.
22
- /* TODO: @import(s) of carbon components and other package components. */
19
+ var _excluded = ["children", "className", "description", "label", "kind", "title"];
23
20
 
24
21
  // The block part of our conventional BEM class names (blockClass__E--M).
25
22
  var blockClass = "".concat(pkg.prefix, "--full-page-error");
@@ -27,88 +24,68 @@ var componentName = 'FullPageError';
27
24
 
28
25
  // NOTE: the component SCSS is not imported here: it is rolled up separately.
29
26
 
30
- // Default values can be included here and then assigned to the prop params,
31
- // e.g. prop = defaults.prop,
32
- // This gathers default values together neatly and ensures non-primitive
33
- // values are initialized early to avoid react making unnecessary re-renders.
34
- // Note that default values are not required for props that are 'required',
35
- // nor for props where the component can apply undefined values reasonably.
36
- // Default values should be provided when the component needs to make a choice
37
- // or assumption when a prop is not supplied.
38
-
39
27
  // Default values for props
40
28
  var defaults = {
41
29
  kind: 'custom'
42
30
  };
43
31
 
44
32
  /**
45
- * TODO: A description of the component.
33
+ * Display a full-page error when the requested page is unavailable to the user.
34
+ * This is typically caused by issues with the requested URL or access permissions.
46
35
  */
47
36
  var FullPageError = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
48
37
  var children = _ref.children,
49
38
  className = _ref.className,
50
39
  description = _ref.description,
51
- errorLabel = _ref.errorLabel,
40
+ label = _ref.label,
52
41
  _ref$kind = _ref.kind,
53
42
  kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
54
43
  title = _ref.title,
55
44
  rest = _objectWithoutProperties(_ref, _excluded);
56
45
  var errorData = {
57
46
  403: {
58
- title: 'Access denied',
59
- description: 'You are not authorized to access the requested page. Please verify that you are logged in to the hosting environment and your access permissions are correct.',
60
47
  svg: /*#__PURE__*/React__default.createElement(Error403SVG, {
61
- className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-403"))
48
+ className: "".concat(blockClass, "__svg ").concat(blockClass, "__403")
62
49
  })
63
50
  },
64
51
  404: {
65
- title: 'Page not found',
66
- description: 'The page you requested has moved or is unavailable, or the specified URL is not valid. Please check the URL or search the site for the requested content.',
67
52
  svg: /*#__PURE__*/React__default.createElement(Error404SVG, {
68
- className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-404"))
53
+ className: "".concat(blockClass, "__svg ").concat(blockClass, "__404")
69
54
  })
70
55
  },
71
56
  custom: {
72
- title: title,
73
- description: description,
74
57
  svg: /*#__PURE__*/React__default.createElement(ErrorGenericSVG, {
75
- className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-custom"))
58
+ className: "".concat(blockClass, "__svg ").concat(blockClass, "__custom")
76
59
  })
77
60
  }
78
61
  };
79
62
  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
80
- className: cx(blockClass,
81
- // Apply the block class to the main HTML element
82
- className,
83
- // Apply any supplied class names to the main HTML element.
84
- // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
85
- {
86
- // switched classes dependant on props or state
87
- // example: [`${blockClass}__here-if-small`]: size === 'sm',
88
- }),
63
+ className: cx(blockClass, className),
89
64
  ref: ref,
90
65
  role: "main"
91
66
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
92
- className: "".concat(blockClass, "__error-container")
67
+ className: "".concat(blockClass, "__container")
93
68
  }, /*#__PURE__*/React__default.createElement(Grid, {
94
- className: "".concat(blockClass, "__error-grid")
69
+ className: "".concat(blockClass, "__grid")
95
70
  }, /*#__PURE__*/React__default.createElement(Column, {
96
71
  sm: 4,
97
72
  md: 3,
98
73
  lg: 6,
99
- className: "".concat(blockClass, "__error-column")
74
+ className: "".concat(blockClass, "__column")
100
75
  }, /*#__PURE__*/React__default.createElement("h1", {
101
- className: "".concat(blockClass, "__error-title")
76
+ className: "".concat(blockClass, "__title")
102
77
  }, /*#__PURE__*/React__default.createElement("span", {
103
- className: "".concat(blockClass, "__error-label")
104
- }, "\u21B3 ", kind === 'custom' ? errorLabel : "Error ".concat(kind)), /*#__PURE__*/React__default.createElement("span", null, errorData[kind].title)), /*#__PURE__*/React__default.createElement("p", {
78
+ className: "".concat(blockClass, "__label")
79
+ }, "\u21B3 ", label), /*#__PURE__*/React__default.createElement("span", null, title)), /*#__PURE__*/React__default.createElement("p", {
105
80
  className: "".concat(blockClass, "__description")
106
- }, description || errorData[kind].description), children), /*#__PURE__*/React__default.createElement(Column, {
81
+ }, description), /*#__PURE__*/React__default.createElement("div", {
82
+ className: "".concat(blockClass, "__body")
83
+ }, children)), /*#__PURE__*/React__default.createElement(Column, {
107
84
  sm: 4,
108
85
  md: 5,
109
86
  lg: 10
110
87
  }, /*#__PURE__*/React__default.createElement("div", {
111
- className: "".concat(blockClass, "__error-svg-container")
88
+ className: "".concat(blockClass, "__svg-container")
112
89
  }, errorData[kind].svg)))));
113
90
  });
114
91
 
@@ -136,20 +113,18 @@ FullPageError.propTypes = {
136
113
  * This is optional for 403 and 404 kinds, and passing this would override their default descriptions.
137
114
  */
138
115
  description: PropTypes.string.isRequired,
139
- /**
140
- * String that will describe the error that occurred
141
- */
142
- errorLabel: PropTypes.string.isRequired,
143
116
  /**
144
117
  * The kind of error page to be displayed, default is custom
145
118
  */
146
119
  kind: PropTypes.oneOf(['custom', '403', '404']),
120
+ /**
121
+ * String that will describe the error that occurred
122
+ */
123
+ label: PropTypes.string.isRequired,
147
124
  /**
148
125
  * This will be for the main title of the FullPageError component
149
126
  */
150
127
  title: PropTypes.string.isRequired
151
-
152
- /* TODO: add types and DocGen for all props. */
153
128
  };
154
129
 
155
130
  export { FullPageError };
@@ -1,7 +1,45 @@
1
+ /**
2
+ * Copyright IBM Corp. 2021, 2021
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { PropsWithChildren } from 'react';
8
+ interface HTTPErrorOtherProps extends PropsWithChildren {
9
+ /**
10
+ * Provide an optional class to be applied to the containing node
11
+ */
12
+ className?: string;
13
+ /**
14
+ * String that will provide the description for the HTTP error code
15
+ */
16
+ description: string;
17
+ /**
18
+ * String that will describe the error that occurred
19
+ */
20
+ errorCodeLabel: string;
21
+ /**
22
+ * Links that will display for extra context when receiving particular errors
23
+ */
24
+ links?: Array<{
25
+ /**
26
+ * The text to display for the link
27
+ */
28
+ text: string;
29
+ /**
30
+ * The link's destination
31
+ */
32
+ href: string;
33
+ }>;
34
+ /**
35
+ * This will be for the main title of the HTTP error component
36
+ */
37
+ title: string;
38
+ }
1
39
  /**
2
40
  * HTTP errors are used in an attempt to access something that isn’t available or
3
41
  the user doesn’t have permission for. This HTTPError component is generic so you
4
42
  can use it when you receive an error code that isn't provided.
5
43
  */
6
- export let HTTPErrorOther: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
7
- import React from 'react';
44
+ export declare let HTTPErrorOther: React.ForwardRefExoticComponent<HTTPErrorOtherProps & React.RefAttributes<HTMLDivElement>>;
45
+ export {};
@@ -19,7 +19,6 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
19
19
  // The block part of our conventional BEM class names (blockClass__E--M).
20
20
  var blockClass = "".concat(pkg.prefix, "--http-errors");
21
21
  var componentName = 'HTTPErrorOther';
22
-
23
22
  /**
24
23
  * HTTP errors are used in an attempt to access something that isn’t available or
25
24
  the user doesn’t have permission for. This HTTPError component is generic so you
@@ -71,6 +70,7 @@ HTTPErrorOther.propTypes = {
71
70
  /**
72
71
  * Links that will display for extra context when receiving particular errors
73
72
  */
73
+ /**@ts-ignore */
74
74
  links: propTypesExports.arrayOf(propTypesExports.shape({
75
75
  /**
76
76
  * The text to display for the link
@@ -1,5 +1,22 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { PropsWithChildren, ReactNode } from 'react';
8
+ interface InlineTipLinkProps extends PropsWithChildren {
9
+ /**
10
+ * Provide the contents of the InlineTipLink.
11
+ */
12
+ children: ReactNode;
13
+ /**
14
+ * Provide an optional class to be applied to the containing node.
15
+ */
16
+ className?: string;
17
+ }
1
18
  /**
2
19
  * This is a standard Carbon link, styled specifically for use inside InlineTip.
3
20
  */
4
- export let InlineTipLink: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
- import React from 'react';
21
+ export declare let InlineTipLink: React.ForwardRefExoticComponent<InlineTipLinkProps & React.RefAttributes<HTMLDivElement>>;
22
+ export {};
@@ -1,5 +1,26 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { PropsWithChildren, ReactNode } from 'react';
8
+ interface InterstitialScreenViewProps extends PropsWithChildren {
9
+ /**
10
+ * Provide the contents of the InterstitialScreenView.
11
+ */
12
+ children?: ReactNode;
13
+ /**
14
+ * Optional class name for this component.
15
+ */
16
+ className?: string;
17
+ /**
18
+ * The label to pass to the ProgressStep component.
19
+ */
20
+ stepTitle: string;
21
+ }
1
22
  /**
2
23
  * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
3
24
  */
4
- export let InterstitialScreenView: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
- import React from 'react';
25
+ export declare let InterstitialScreenView: React.ForwardRefExoticComponent<InterstitialScreenViewProps & React.RefAttributes<HTMLDivElement>>;
26
+ export {};
@@ -20,7 +20,6 @@ var _excluded = ["children", "className", "stepTitle"];
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--interstitial-screen-view");
22
22
  var componentName = 'InterstitialScreenView';
23
-
24
23
  /**
25
24
  * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
26
25
  */
@@ -1,5 +1,26 @@
1
1
  /**
2
- * View module to help in building interstitial screen views.
2
+ * Copyright IBM Corp. 2024, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
3
6
  */
4
- export let InterstitialScreenViewModule: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
7
  import React from 'react';
8
+ interface InterstitialScreenViewModuleProps {
9
+ /**
10
+ * Provide an optional class to be applied to the containing node.
11
+ */
12
+ className?: string;
13
+ /**
14
+ * The description of this component.
15
+ */
16
+ description: string;
17
+ /**
18
+ * The title of this component.
19
+ */
20
+ title: string;
21
+ }
22
+ /**
23
+ * View module to help in building interstitial screen views.
24
+ */
25
+ export declare let InterstitialScreenViewModule: React.ForwardRefExoticComponent<InterstitialScreenViewModuleProps & React.RefAttributes<HTMLElement>>;
26
+ export {};
@@ -1,7 +1,33 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { ReactNode } from 'react';
8
+ type Theme = 'light' | 'dark';
9
+ interface NonLinearReadingProps {
10
+ /**
11
+ * The keyword of the component appears as a pill.
12
+ */
13
+ children: ReactNode;
14
+ /**
15
+ * Provide an optional class to be applied to the containing node.
16
+ */
17
+ className?: string;
18
+ /**
19
+ * The content that appears when the keyword is toggled open.
20
+ */
21
+ definition: ReactNode;
22
+ /**
23
+ * Determines the theme of the component.
24
+ */
25
+ theme?: Theme;
26
+ }
1
27
  /**
2
28
  * Use non-linear reading when space is limited to share a
3
29
  * brief, at-a-glance, summary of a concept that may require
4
30
  * more explanation for some users.
5
31
  */
6
- export let NonLinearReading: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
7
- import React from 'react';
32
+ export declare let NonLinearReading: React.ForwardRefExoticComponent<NonLinearReadingProps & React.RefAttributes<HTMLSpanElement>>;
33
+ export {};
@@ -20,12 +20,6 @@ var _excluded = ["children", "className", "definition", "theme"];
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--non-linear-reading");
22
22
  var componentName = 'NonLinearReading';
23
-
24
- // Default values for props
25
- var defaults = {
26
- theme: 'light'
27
- };
28
-
29
23
  /**
30
24
  * Use non-linear reading when space is limited to share a
31
25
  * brief, at-a-glance, summary of a concept that may require
@@ -36,7 +30,7 @@ var NonLinearReading = /*#__PURE__*/React__default.forwardRef(function (_ref, re
36
30
  className = _ref.className,
37
31
  definition = _ref.definition,
38
32
  _ref$theme = _ref.theme,
39
- theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
33
+ theme = _ref$theme === void 0 ? 'light' : _ref$theme,
40
34
  rest = _objectWithoutProperties(_ref, _excluded);
41
35
  var _useState = useState(false),
42
36
  _useState2 = _slicedToArray(_useState, 2),
@@ -73,6 +67,7 @@ NonLinearReading.propTypes = {
73
67
  /**
74
68
  * The keyword of the component appears as a pill.
75
69
  */
70
+
76
71
  children: PropTypes.node.isRequired,
77
72
  /**
78
73
  * Provide an optional class to be applied to the containing node.
@@ -1,5 +1,53 @@
1
1
  /**
2
- * Search bar with input field and search button
2
+ * Copyright IBM Corp. 2024, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
3
6
  */
4
- export let SearchBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
- import React from 'react';
7
+ import React, { PropsWithChildren } from 'react';
8
+ type Scopes = string[] | object[];
9
+ interface SearchBarProps extends PropsWithChildren {
10
+ /** @type {string} Optional additional class name. */
11
+ className?: string;
12
+ /** @type {string} The label text for the search text input. */
13
+ clearButtonLabelText: string;
14
+ /**
15
+ * Whether or not the scopes MultiSelect label is visually hidden.
16
+ */
17
+ hideScopesLabel?: boolean;
18
+ /** @type {string} The label text for the search text input. */
19
+ labelText?: string;
20
+ /** @type {Function} Function handler for when the user changes their query search. */
21
+ onChange?: (event: any) => void;
22
+ /** @type {Function} Function handler for when the user submits a search. */
23
+ onSubmit?: (event: any) => void;
24
+ /** @type {string} Placeholder text to be displayed in the search input. */
25
+ placeHolderText: string;
26
+ /** @type {Function} Function to get the text for each scope to display in dropdown. */
27
+ scopeToString?: () => void;
28
+ /** @type {Array<any>} Array of allowed search scopes. */
29
+ scopes?: Scopes;
30
+ /** @type {string} The name text for the search scope type. */
31
+ scopesTypeLabel?: typeof conditionalScopePropValidator;
32
+ /** @type {Array<any> Array of initially selected search scopes. */
33
+ selectedScopes?: Scopes;
34
+ /**
35
+ * Optional custom sorting algorithm for an array of scope items.
36
+ * By default, scope items are sorted in ascending alphabetical order,
37
+ * with "selected" items moved to the start of the scope items array.
38
+ */
39
+ sortItems?: () => void;
40
+ /** @type {string} The label text for the search submit button. */
41
+ submitLabel: string;
42
+ /**
43
+ * Provide accessible label text for the scopes MultiSelect.
44
+ */
45
+ titleText?: string;
46
+ /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
47
+ translateWithId?: () => void;
48
+ /** @type {string} Search query value. */
49
+ value?: string;
50
+ }
51
+ export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
52
+ declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
53
+ export {};
@@ -29,10 +29,6 @@ var defaults = {
29
29
  selectedScopes: [],
30
30
  hideScopesLabel: true
31
31
  };
32
-
33
- /**
34
- * Search bar with input field and search button
35
- */
36
32
  var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
37
33
  var className = _ref.className,
38
34
  clearButtonLabelText = _ref.clearButtonLabelText,
@@ -45,11 +41,11 @@ var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
45
41
  onSubmit = _ref$onSubmit === void 0 ? defaults.onSubmit : _ref$onSubmit,
46
42
  placeHolderText = _ref.placeHolderText,
47
43
  _ref$scopes = _ref.scopes,
48
- scopes = _ref$scopes === void 0 ? defaults.scopes : _ref$scopes,
44
+ scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
49
45
  scopesTypeLabel = _ref.scopesTypeLabel,
50
46
  scopeToString = _ref.scopeToString,
51
47
  _ref$selectedScopes = _ref.selectedScopes,
52
- selectedScopes = _ref$selectedScopes === void 0 ? defaults.selectedScopes : _ref$selectedScopes,
48
+ selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes,
53
49
  sortItems = _ref.sortItems,
54
50
  submitLabel = _ref.submitLabel,
55
51
  translateWithId = _ref.translateWithId,
@@ -162,6 +158,7 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
162
158
  if (props.scopes && props.scopes.length > 0 && !props[propName]) {
163
159
  return new Error("Required `".concat(propName, "` when `scopes` prop type is supplied to `").concat(componentName, "`. Validation failed."));
164
160
  }
161
+ /**@ts-ignore */
165
162
  for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
166
163
  rest[_key - 3] = arguments[_key];
167
164
  }
@@ -191,11 +188,13 @@ SearchBar.propTypes = {
191
188
  /** @type {Function} Function to get the text for each scope to display in dropdown. */
192
189
  scopeToString: PropTypes.func,
193
190
  /** @type {Array<any>} Array of allowed search scopes. */
191
+ /**@ts-ignore */
194
192
  scopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
195
193
  /** @type {string} The name text for the search scope type. */
196
194
  // eslint-disable-next-line react/require-default-props
197
195
  scopesTypeLabel: conditionalScopePropValidator,
198
196
  /** @type {Array<any> Array of initially selected search scopes. */
197
+ /**@ts-ignore */
199
198
  selectedScopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
200
199
  /**
201
200
  * Optional custom sorting algorithm for an array of scope items.
@@ -24,7 +24,7 @@ import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
24
24
  import { useFocus } from '../../global/js/hooks/useFocus.js';
25
25
 
26
26
  var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
27
- _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
27
+ _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
28
28
  var blockClass = "".concat(pkg.prefix, "--side-panel");
29
29
  var componentName = 'SidePanel';
30
30
  // `any` is a work around until ActionSet is migrated to TS
@@ -387,7 +387,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
387
387
  }, actionToolbarButtons.map(function (_ref4) {
388
388
  var label = _ref4.label,
389
389
  kind = _ref4.kind,
390
+ _ref4$hasIconOnly = _ref4.hasIconOnly,
391
+ hasIconOnly = _ref4$hasIconOnly === void 0 ? false : _ref4$hasIconOnly,
390
392
  icon = _ref4.icon,
393
+ renderIcon = _ref4.renderIcon,
391
394
  tooltipPosition = _ref4.tooltipPosition,
392
395
  tooltipAlignment = _ref4.tooltipAlignment,
393
396
  leading = _ref4.leading,
@@ -399,11 +402,13 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
399
402
  key: label,
400
403
  kind: kind || 'ghost',
401
404
  size: "sm",
402
- renderIcon: icon,
403
- iconDescription: label,
405
+ renderIcon: renderIcon || icon,
406
+ iconDescription: label
407
+ }, hasIconOnly && {
404
408
  tooltipPosition: tooltipPosition || 'bottom',
405
- tooltipAlignment: tooltipAlignment || 'start',
406
- hasIconOnly: !leading,
409
+ tooltipAlignment: tooltipAlignment || 'start'
410
+ }, {
411
+ hasIconOnly: hasIconOnly,
407
412
  disabled: disabled,
408
413
  className: cx(["".concat(blockClass, "__action-toolbar-button"), className, _defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
409
414
  onClick: onClick
@@ -1,7 +1,52 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { PropsWithChildren, ReactNode } from 'react';
8
+ interface TruncatedListProps extends PropsWithChildren {
9
+ as?: React.ElementType | string;
10
+ /**
11
+ * Optional class name for expand/collapse button.
12
+ */
13
+ buttonClassName?: string;
14
+ /**
15
+ * The contents of the TruncatedList.
16
+ */
17
+ children: ReactNode;
18
+ /**
19
+ * Provide an optional class to be applied to the containing node.
20
+ */
21
+ className?: string;
22
+ /**
23
+ * Number of items to render and display when the list is truncated and collapsed.
24
+ * Scrolling is not enabled when collapsed. The smallest number is 1.
25
+ */
26
+ collapsedItemsLimit?: number;
27
+ /**
28
+ * Maximum number of items to show when the list is expanded. All
29
+ * items are rendered when the list is expanded. Scrolling is enabled
30
+ * if there are more items to display than this number.
31
+ */
32
+ expandedItemsLimit?: number;
33
+ /**
34
+ * Optional callback reports the collapsed state of the list.
35
+ */
36
+ onClick?: (value: any) => void;
37
+ /**
38
+ * Text label for when the list is expanded.
39
+ */
40
+ viewLessLabel?: string;
41
+ /**
42
+ * Callback function for building the label when the list is collapsed.
43
+ */
44
+ viewMoreLabel?: (value: any) => void;
45
+ }
1
46
  /**
2
47
  * The `TruncatedList` allows consumers to control how many items are
3
48
  * revealed to the user while giving the user the ability to expand
4
49
  * and see the entire list.
5
50
  */
6
- export let TruncatedList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
7
- import React from 'react';
51
+ export declare let TruncatedList: React.ForwardRefExoticComponent<TruncatedListProps & React.RefAttributes<HTMLDivElement>>;
52
+ export {};
@@ -28,7 +28,6 @@ var defaults = {
28
28
  return "View more (".concat(value, ")");
29
29
  }
30
30
  };
31
-
32
31
  /**
33
32
  * The `TruncatedList` allows consumers to control how many items are
34
33
  * revealed to the user while giving the user the ability to expand
@@ -84,13 +83,15 @@ var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
84
83
  // list is both collapsed and expanded.
85
84
  useEffect(function () {
86
85
  if (listRef && childrenArray.length > 0) {
86
+ var _listRef$current;
87
87
  var numItemsToShow = isCollapsed ? minItems : maxItems;
88
- var items = listRef.current.childNodes;
88
+ var items = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.childNodes;
89
89
  var _listHeight = 0;
90
90
  for (var index = 0; index < numItemsToShow; index++) {
91
- if (items[index]) {
91
+ if (items && items[index]) {
92
92
  var _window;
93
- var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
93
+ var itemElement = items[index];
94
+ var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(itemElement)) === null || _window === void 0 ? void 0 : _window.height) || '16';
94
95
  _listHeight += parseInt(height);
95
96
  }
96
97
  }
@@ -1,23 +1,37 @@
1
- export namespace BEACON_KIND {
2
- let DEFAULT: string;
3
- }
4
- export namespace COACHMARK_OVERLAY_KIND {
5
- let TOOLTIP: string;
6
- let FLOATING: string;
7
- let FIXED: string;
8
- let STACKED: string;
9
- }
10
- export namespace COACHMARK_ALIGNMENT {
11
- let BOTTOM: string;
12
- let BOTTOM_LEFT: string;
13
- let BOTTOM_RIGHT: string;
14
- let LEFT: string;
15
- let LEFT_TOP: string;
16
- let LEFT_BOTTOM: string;
17
- let RIGHT: string;
18
- let RIGHT_TOP: string;
19
- let RIGHT_BOTTOM: string;
20
- let TOP: string;
21
- let TOP_LEFT: string;
22
- let TOP_RIGHT: string;
1
+ /**
2
+ * Reserved for future expansion, i.e. "RING".
3
+ */
4
+ export declare enum BEACON_KIND {
5
+ DEFAULT = "default"
23
6
  }
7
+ /**
8
+ * Describes the style and behavior of a Coachmark.
9
+ * @param TOOLTIP includes a caret pointing to the animated beacon.
10
+ * @param FLOATING includes a drag handle across the top.
11
+ * @param FIXED is fixed to the bottom-right of the viewport.
12
+ * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
13
+ */
14
+ export declare const COACHMARK_OVERLAY_KIND: {
15
+ TOOLTIP: string;
16
+ FLOATING: string;
17
+ FIXED: string;
18
+ STACKED: string;
19
+ };
20
+ /**
21
+ * Where to render the Coachmark relative to its target.
22
+ * Applies only to Floating and Tooltip Coachmarks.
23
+ */
24
+ export declare const COACHMARK_ALIGNMENT: {
25
+ BOTTOM: string;
26
+ BOTTOM_LEFT: string;
27
+ BOTTOM_RIGHT: string;
28
+ LEFT: string;
29
+ LEFT_TOP: string;
30
+ LEFT_BOTTOM: string;
31
+ RIGHT: string;
32
+ RIGHT_TOP: string;
33
+ RIGHT_BOTTOM: string;
34
+ TOP: string;
35
+ TOP_LEFT: string;
36
+ TOP_RIGHT: string;
37
+ };