@splunk/react-field-summary 0.9.0 → 0.10.1

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.
Files changed (15) hide show
  1. package/components/FieldList/FieldList.js +11 -59
  2. package/components/FieldSummary/Abbreviate.d.ts +4 -1
  3. package/components/FieldSummary/Abbreviate.js +1 -1
  4. package/components/FieldSummary/FieldActions.js +5 -21
  5. package/components/FieldSummary/FieldStats.js +6 -18
  6. package/components/FieldSummary/FieldSummary.js +20 -34
  7. package/components/FieldSummary/FieldSummaryTable.js +55 -73
  8. package/components/FieldSummary/SelectionButtons.js +5 -18
  9. package/components/FieldSummary/SplitButton.d.ts +14 -0
  10. package/components/FieldSummary/SplitButton.js +129 -0
  11. package/components/FieldSummaryList/FieldSummaryList.js +8 -10
  12. package/components/FieldSummaryList/tests/FieldSummaryList.stories.d.ts +6 -0
  13. package/components/FieldSummaryList/tests/FieldSummaryList.unit.d.ts +1 -0
  14. package/package.json +27 -31
  15. package/CHANGELOG.md +0 -78
package/components/FieldList/FieldList.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = exports.isNumeric = void 0;
9
9
 
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
10
12
  var _react = _interopRequireDefault(require("react"));
11
13
 
12
14
  var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,71 +19,21 @@ var _String = _interopRequireDefault(require("@splunk/react-icons/String"));
17
19
 
18
20
  var _themes = require("@splunk/themes");
19
21
 
20
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldList/FieldList.tsx";
21
- const ICON_SIZE = 0.6;
22
- const Container = _styledComponents.default.ol`
23
- list-style-type: none;
24
- margin: 0;
25
- padding: 0;
26
- svg {
27
- padding-right: ${_themes.variables.spacingXSmall};
28
- color: ${_themes.variables.contentColorMuted};
29
- }
30
-
31
- button {
32
- display: flex;
33
- align-items: baseline;
34
- border: none;
35
- text-align: left;
36
- width: 100%;
37
- height: 100%;
38
- color: ${_themes.variables.contentColorDefault};
39
- font-size: ${_themes.variables.fontSize};
40
- padding: calc(${_themes.variables.spacingXSmall} / 2) ${_themes.variables.spacingXSmall};
41
- margin: 0;
42
- background-color: inherit;
43
- }
44
-
45
- button:not([disabled]) {
46
- cursor: pointer;
47
- color: ${_themes.variables.linkColor};
48
- }
49
-
50
- li {
51
- background-color: inherit;
22
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldList/FieldList.tsx",
23
+ _templateObject,
24
+ _templateObject2,
25
+ _templateObject3;
52
26
 
53
- padding: 0;
54
- margin: 0;
55
- }
27
+ const ICON_SIZE = 0.6;
56
28
 
57
- button:not([disabled]):hover,
58
- button[aria-pressed='true'] {
59
- background-color: ${(0, _themes.pick)({
29
+ const Container = _styledComponents.default.ol(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n svg {\n padding-right: ", ";\n color: ", ";\n }\n\n button {\n display: flex;\n align-items: baseline;\n border: none;\n text-align: left;\n width: 100%;\n height: 100%;\n color: ", ";\n font-size: ", ";\n padding: calc(", " / 2) ", ";\n margin: 0;\n background-color: inherit;\n }\n\n button:not([disabled]) {\n cursor: pointer;\n color: ", ";\n }\n\n li {\n background-color: inherit;\n\n padding: 0;\n margin: 0;\n }\n\n button:not([disabled]):hover,\n button[aria-pressed='true'] {\n background-color: ", ";\n }\n\n button:not([disabled]):focus {\n outline: 0;\n box-shadow: ", ";\n\n ::-moz-focus-inner {\n border: 0;\n }\n }\n"])), _themes.variables.spacingXSmall, _themes.variables.contentColorMuted, _themes.variables.contentColorDefault, _themes.variables.fontSize, _themes.variables.spacingXSmall, _themes.variables.spacingXSmall, _themes.variables.linkColor, (0, _themes.pick)({
60
30
  enterprise: _themes.variables.backgroundColorHover,
61
31
  prisma: _themes.variables.interactiveColorOverlayHover
62
- })};
63
- }
32
+ }), _themes.variables.focusShadowInset);
64
33
 
65
- button:not([disabled]):focus {
66
- outline: 0;
67
- box-shadow: ${_themes.variables.focusShadowInset};
34
+ const Name = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 0;\n flex-shrink: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
68
35
 
69
- ::-moz-focus-inner {
70
- border: 0;
71
- }
72
- }
73
- `;
74
- const Name = _styledComponents.default.span`
75
- min-width: 0;
76
- flex-shrink: 2;
77
- overflow: hidden;
78
- text-overflow: ellipsis;
79
- white-space: nowrap;
80
- `;
81
- const Count = _styledComponents.default.span`
82
- padding-left: ${_themes.variables.spacingXSmall};
83
- color: ${_themes.variables.contentColorMuted};
84
- `;
36
+ const Count = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding-left: ", ";\n color: ", ";\n"])), _themes.variables.spacingXSmall, _themes.variables.contentColorMuted);
85
37
 
86
38
  const isNumeric = field => field.numericCount && Number(field.numericCount) / Number(field.count) > 0.7;
87
39
 
package/components/FieldSummary/Abbreviate.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import { ReactElement } from 'react';
2
- export declare const formatNumber: (value: number) => string;
2
+ export declare const formatNumber: {
3
+ (value: number): string;
4
+ (value: number | bigint): string;
5
+ };
3
6
  declare const Abbreviate: ({ value }: {
4
7
  value: number;
5
8
  }) => ReactElement;
package/components/FieldSummary/Abbreviate.js CHANGED
@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _format = require("@splunk/ui-utils/format");
13
13
 
14
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/Abbreviate.tsx";
14
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/Abbreviate.tsx";
15
15
  const formatNumber = new Intl.NumberFormat().format;
16
16
  exports.formatNumber = formatNumber;
17
17
 
package/components/FieldSummary/FieldActions.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
10
12
  var _react = _interopRequireDefault(require("react"));
11
13
 
12
14
  var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,28 +19,10 @@ var _themes = require("@splunk/themes");
17
19
 
18
20
  var _i18n = require("@splunk/ui-utils/i18n");
19
21
 
20
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldActions.tsx";
21
- const StyledActions = _styledComponents.default.div`
22
- padding-left: ${_themes.variables.spacingMedium};
23
-
24
- h3 {
25
- font-size: ${_themes.variables.fontSize};
26
- margin: 0;
27
- padding: 1px;
28
- margin-top: 2px;
29
- }
30
-
31
- ul {
32
- list-style-type: none;
33
- padding: 0;
34
- margin: 0;
22
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldActions.tsx",
23
+ _templateObject;
35
24
 
36
- button {
37
- line-height: calc(${_themes.variables.lineHeight} * 0.8);
38
- margin-bottom: ${_themes.variables.spacingXSmall};
39
- }
40
- }
41
- `;
25
+ const StyledActions = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding-left: ", ";\n\n h3 {\n font-size: ", ";\n margin: 0;\n padding: 1px;\n margin-top: 2px;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n\n button {\n line-height: calc(", " * 0.8);\n margin-bottom: ", ";\n }\n }\n"])), _themes.variables.spacingMedium, _themes.variables.fontSize, _themes.variables.lineHeight, _themes.variables.spacingXSmall);
42
26
 
43
27
  const Actions = ({
44
28
  field,
package/components/FieldSummary/FieldStats.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
10
12
  var _react = _interopRequireDefault(require("react"));
11
13
 
12
14
  var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,24 +19,10 @@ var _i18n = require("@splunk/ui-utils/i18n");
17
19
 
18
20
  var _Abbreviate = _interopRequireDefault(require("./Abbreviate"));
19
21
 
20
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldStats.tsx";
21
- const DL = _styledComponents.default.dl`
22
- color: ${_themes.variables.contentColorDefault};
23
- margin-top: ${_themes.variables.spacingSmall};
24
- margin-bottom: ${_themes.variables.spacingSmall};
25
- dt {
26
- display: inline-block;
27
- font-weight: bold;
28
- }
29
- dt::after {
30
- content: ':';
31
- }
32
- dd {
33
- display: inline-block;
34
- margin-left: ${_themes.variables.spacingXSmall};
35
- margin-right: ${_themes.variables.spacingSmall};
36
- }
37
- `;
22
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldStats.tsx",
23
+ _templateObject;
24
+
25
+ const DL = _styledComponents.default.dl(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n dt {\n display: inline-block;\n font-weight: bold;\n }\n dt::after {\n content: ':';\n }\n dd {\n display: inline-block;\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), _themes.variables.contentColorDefault, _themes.variables.spacingSmall, _themes.variables.spacingSmall, _themes.variables.spacingXSmall, _themes.variables.spacingSmall);
38
26
 
39
27
  const Stat = ({
40
28
  label,
package/components/FieldSummary/FieldSummary.js CHANGED
@@ -17,14 +17,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
17
17
 
18
18
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
19
 
20
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
21
+
20
22
  var _react = _interopRequireWildcard(require("react"));
21
23
 
22
24
  var _styledComponents = _interopRequireDefault(require("styled-components"));
23
25
 
24
26
  var _i18n = require("@splunk/ui-utils/i18n");
25
27
 
26
- var _reactSelectionActions = _interopRequireDefault(require("@splunk/react-selection-actions"));
27
-
28
28
  var _themes = require("@splunk/themes");
29
29
 
30
30
  var _FieldList = require("../FieldList");
@@ -37,8 +37,14 @@ var _FieldStats = _interopRequireDefault(require("./FieldStats"));
37
37
 
38
38
  var _FieldSummaryTable = _interopRequireWildcard(require("./FieldSummaryTable"));
39
39
 
40
+ var _SplitButton = _interopRequireDefault(require("./SplitButton"));
41
+
40
42
  const _excluded = ["field", "eventCount", "actionsForField", "onActionClicked", "onFieldValueClicked"];
41
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldSummary.tsx";
43
+
44
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldSummary.tsx",
45
+ _templateObject,
46
+ _templateObject2,
47
+ _templateObject3;
42
48
 
43
49
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
44
50
 
@@ -91,30 +97,11 @@ const defaultActionsForField = (field, actionsForField) => {
91
97
  return actionsForField ? actionsForField(field, actions) : actions;
92
98
  };
93
99
 
94
- const Name = _styledComponents.default.h2`
95
- font-size: ${_themes.variables.fontSizeXLarge};
96
- margin: ${_themes.variables.spacingSmall} 0;
97
- text-overflow: ellipsis;
98
- overflow: hidden;
99
- `;
100
- const StyledCoverage = _styledComponents.default.div`
101
- color: ${_themes.variables.contentColorDefault};
102
- margin-bottom: ${_themes.variables.spacingSmall};
103
- `;
104
- const TableAndActions = _styledComponents.default.div`
105
- display: flex;
106
-
107
- & > div:nth-child(1) {
108
- flex: 1 1;
109
- table {
110
- width: 100%;
111
- }
112
- }
100
+ const Name = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n margin: ", " 0;\n text-overflow: ellipsis;\n overflow: hidden;\n"])), _themes.variables.fontSizeXLarge, _themes.variables.spacingSmall);
113
101
 
114
- & > div:nth-child(2) {
115
- width: 150px;
116
- }
117
- `;
102
+ const StyledCoverage = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n margin-bottom: ", ";\n"])), _themes.variables.contentColorDefault, _themes.variables.spacingSmall);
103
+
104
+ const TableAndActions = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n\n & > div:nth-child(1) {\n flex: 1 1;\n table {\n width: 100%;\n }\n }\n\n & > div:nth-child(2) {\n width: 150px;\n }\n"])));
118
105
 
119
106
  const Coverage = ({
120
107
  distinctCount,
@@ -134,7 +121,7 @@ const Coverage = ({
134
121
 
135
122
  if (eventCount) {
136
123
  content.push((0, _i18n._)(' in '));
137
- content.push(`${(0, _Abbreviate.formatNumber)(count / eventCount * 100)}%`);
124
+ content.push((0, _Abbreviate.formatNumber)(count / eventCount * 100) + "%");
138
125
  content.push((0, _i18n._)(' of '));
139
126
  content.push( /*#__PURE__*/_react.default.createElement(_Abbreviate.default, {
140
127
  key: "events",
@@ -216,7 +203,7 @@ const FieldSummary = _ref => {
216
203
  __self: void 0,
217
204
  __source: {
218
205
  fileName: _jsxFileName,
219
- lineNumber: 185,
206
+ lineNumber: 186,
220
207
  columnNumber: 9
221
208
  }
222
209
  }), /*#__PURE__*/_react.default.createElement(Name, {
@@ -224,7 +211,7 @@ const FieldSummary = _ref => {
224
211
  __self: void 0,
225
212
  __source: {
226
213
  fileName: _jsxFileName,
227
- lineNumber: 186,
214
+ lineNumber: 187,
228
215
  columnNumber: 13
229
216
  }
230
217
  }, field.name), /*#__PURE__*/_react.default.createElement(Coverage, {
@@ -234,25 +221,24 @@ const FieldSummary = _ref => {
234
221
  __self: void 0,
235
222
  __source: {
236
223
  fileName: _jsxFileName,
237
- lineNumber: 187,
224
+ lineNumber: 188,
238
225
  columnNumber: 13
239
226
  }
240
227
  }), /*#__PURE__*/_react.default.createElement(_FieldStats.default, (0, _extends2.default)({}, field, {
241
228
  __self: void 0,
242
229
  __source: {
243
230
  fileName: _jsxFileName,
244
- lineNumber: 188,
231
+ lineNumber: 189,
245
232
  columnNumber: 13
246
233
  }
247
- })), /*#__PURE__*/_react.default.createElement(_reactSelectionActions.default, {
248
- compact: true,
234
+ })), /*#__PURE__*/_react.default.createElement(_SplitButton.default, {
249
235
  actions: selectionActions,
250
236
  selectionCount: selected.length,
251
237
  onActionClicked: handleActionClicked,
252
238
  __self: void 0,
253
239
  __source: {
254
240
  fileName: _jsxFileName,
255
- lineNumber: 189,
241
+ lineNumber: 190,
256
242
  columnNumber: 13
257
243
  }
258
244
  }), /*#__PURE__*/_react.default.createElement(TableAndActions, {
package/components/FieldSummary/FieldSummaryTable.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
10
12
  var _react = _interopRequireDefault(require("react"));
11
13
 
12
14
  var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -21,61 +23,43 @@ var _format = require("@splunk/ui-utils/format");
21
23
 
22
24
  var _i18n = require("@splunk/ui-utils/i18n");
23
25
 
26
+ var _id = require("@splunk/ui-utils/id");
27
+
24
28
  var _Abbreviate = require("./Abbreviate");
25
29
 
26
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldSummaryTable.tsx";
30
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldSummaryTable.tsx",
31
+ _templateObject,
32
+ _templateObject2,
33
+ _templateObject3,
34
+ _templateObject4,
35
+ _templateObject5,
36
+ _templateObject6,
37
+ _templateObject7,
38
+ _templateObject8;
39
+
27
40
  const BAR_WIDTH = '100px';
28
- const BarContainer = _styledComponents.default.div`
29
- width: ${BAR_WIDTH};
30
- background-color: ${(0, _themes.pick)({
41
+
42
+ const BarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n background-color: ", ";\n"])), BAR_WIDTH, (0, _themes.pick)({
31
43
  enterprise: _themes.variables.backgroundColorHover,
32
44
  prisma: _themes.variables.interactiveColorOverlayHover
33
- })};
34
- `;
35
- const Bar = _styledComponents.default.div`
36
- height: ${_themes.variables.lineHeight};
37
- background-color: ${(0, _themes.pick)({
45
+ }));
46
+
47
+ const Bar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n background-color: ", ";\n"])), _themes.variables.lineHeight, (0, _themes.pick)({
38
48
  enterprise: _themes.variables.accentColor,
39
49
  prisma: _themes.variables.interactiveColorPrimary
40
- })};
41
- `;
42
- const StyledSwitch = (0, _styledComponents.default)(_Switch.default)`
43
- margin: 0 ${_themes.variables.spacingXSmall} 0 0;
44
- padding: 0;
45
- `;
46
- const NumericCell = _styledComponents.default.td`
47
- text-align: right;
48
- `;
49
- const ValueCell = _styledComponents.default.td`
50
- width: 100%;
51
- `;
52
- const NumericHeading = _styledComponents.default.th`
53
- text-align: right;
54
- `;
55
- const Truncated = _styledComponents.default.span`
56
- text-overflow: ellipsis;
57
- min-width: 0;
58
- display: -webkit-box;
59
- -webkit-line-clamp: 1;
60
- -webkit-box-orient: vertical;
61
- overflow: hidden;
62
- word-wrap: anywhere;
63
- word-break: break-all;
64
- `;
65
- const Table = _styledComponents.default.table`
66
- tbody {
67
- td {
68
- font-family: ${_themes.variables.monoFontFamily};
69
- button {
70
- font-family: ${_themes.variables.monoFontFamily};
71
- }
72
- }
73
-
74
- th:last-child {
75
- width: ${BAR_WIDTH};
76
- }
77
- }
78
- `;
50
+ }));
51
+
52
+ const StyledSwitch = (0, _styledComponents.default)(_Switch.default)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 ", " 0 0;\n padding: 0;\n"])), _themes.variables.spacingXSmall);
53
+
54
+ const NumericCell = _styledComponents.default.td(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n text-align: right;\n"])));
55
+
56
+ const ValueCell = _styledComponents.default.td(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n"])));
57
+
58
+ const NumericHeading = _styledComponents.default.th(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n text-align: right;\n"])));
59
+
60
+ const Truncated = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n text-overflow: ellipsis;\n min-width: 0;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-wrap: anywhere;\n word-break: break-all;\n"])));
61
+
62
+ const Table = _styledComponents.default.table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n tbody {\n td {\n font-family: ", ";\n button {\n font-family: ", ";\n }\n }\n\n th:last-child {\n width: ", ";\n }\n }\n"])), _themes.variables.monoFontFamily, _themes.variables.monoFontFamily, BAR_WIDTH);
79
63
 
80
64
  const FieldSummaryTable = ({
81
65
  total,
@@ -89,21 +73,21 @@ const FieldSummaryTable = ({
89
73
  __self: void 0,
90
74
  __source: {
91
75
  fileName: _jsxFileName,
92
- lineNumber: 98,
76
+ lineNumber: 99,
93
77
  columnNumber: 9
94
78
  }
95
79
  }, /*#__PURE__*/_react.default.createElement("thead", {
96
80
  __self: void 0,
97
81
  __source: {
98
82
  fileName: _jsxFileName,
99
- lineNumber: 99,
83
+ lineNumber: 100,
100
84
  columnNumber: 13
101
85
  }
102
86
  }, /*#__PURE__*/_react.default.createElement("tr", {
103
87
  __self: void 0,
104
88
  __source: {
105
89
  fileName: _jsxFileName,
106
- lineNumber: 100,
90
+ lineNumber: 101,
107
91
  columnNumber: 17
108
92
  }
109
93
  }, /*#__PURE__*/_react.default.createElement("th", {
@@ -111,28 +95,28 @@ const FieldSummaryTable = ({
111
95
  __self: void 0,
112
96
  __source: {
113
97
  fileName: _jsxFileName,
114
- lineNumber: 101,
98
+ lineNumber: 102,
115
99
  columnNumber: 21
116
100
  }
117
101
  }, (0, _i18n._)('Top Values')), /*#__PURE__*/_react.default.createElement(NumericHeading, {
118
102
  __self: void 0,
119
103
  __source: {
120
104
  fileName: _jsxFileName,
121
- lineNumber: 102,
105
+ lineNumber: 103,
122
106
  columnNumber: 21
123
107
  }
124
108
  }, (0, _i18n._)('Count')), /*#__PURE__*/_react.default.createElement("th", {
125
109
  __self: void 0,
126
110
  __source: {
127
111
  fileName: _jsxFileName,
128
- lineNumber: 103,
112
+ lineNumber: 104,
129
113
  columnNumber: 21
130
114
  }
131
115
  }))), /*#__PURE__*/_react.default.createElement("tbody", {
132
116
  __self: void 0,
133
117
  __source: {
134
118
  fileName: _jsxFileName,
135
- lineNumber: 106,
119
+ lineNumber: 107,
136
120
  columnNumber: 13
137
121
  }
138
122
  }, values.map(({
@@ -144,19 +128,20 @@ const FieldSummaryTable = ({
144
128
  percent: (0, _Abbreviate.formatNumber)(percent),
145
129
  total: (0, _Abbreviate.formatNumber)(total)
146
130
  });
131
+ const labelId = (0, _id.createDOMID)();
147
132
  return /*#__PURE__*/_react.default.createElement("tr", {
148
133
  key: value,
149
134
  __self: void 0,
150
135
  __source: {
151
136
  fileName: _jsxFileName,
152
- lineNumber: 114,
137
+ lineNumber: 116,
153
138
  columnNumber: 25
154
139
  }
155
140
  }, onFieldValueSelected && /*#__PURE__*/_react.default.createElement("td", {
156
141
  __self: void 0,
157
142
  __source: {
158
143
  fileName: _jsxFileName,
159
- lineNumber: 116,
144
+ lineNumber: 118,
160
145
  columnNumber: 33
161
146
  }
162
147
  }, /*#__PURE__*/_react.default.createElement(StyledSwitch, {
@@ -165,16 +150,11 @@ const FieldSummaryTable = ({
165
150
  selected: selected.indexOf(value) >= 0,
166
151
  appearance: "checkbox",
167
152
  onClick: onFieldValueSelected,
168
- selectedLabel: (0, _format.sprintf)((0, _i18n._)('Deselect %(value)s'), {
169
- value
170
- }),
171
- unselectedLabel: (0, _format.sprintf)((0, _i18n._)('Select %(value)s'), {
172
- value
173
- }),
153
+ labelledBy: labelId,
174
154
  __self: void 0,
175
155
  __source: {
176
156
  fileName: _jsxFileName,
177
- lineNumber: 117,
157
+ lineNumber: 119,
178
158
  columnNumber: 37
179
159
  }
180
160
  })), /*#__PURE__*/_react.default.createElement(ValueCell, {
@@ -182,7 +162,7 @@ const FieldSummaryTable = ({
182
162
  __self: void 0,
183
163
  __source: {
184
164
  fileName: _jsxFileName,
185
- lineNumber: 130,
165
+ lineNumber: 129,
186
166
  columnNumber: 29
187
167
  }
188
168
  }, onFieldValueClicked ? /*#__PURE__*/_react.default.createElement(_Link.default, {
@@ -192,21 +172,23 @@ const FieldSummaryTable = ({
192
172
  __self: void 0,
193
173
  __source: {
194
174
  fileName: _jsxFileName,
195
- lineNumber: 132,
175
+ lineNumber: 131,
196
176
  columnNumber: 37
197
177
  }
198
178
  }, /*#__PURE__*/_react.default.createElement(Truncated, {
179
+ id: labelId,
199
180
  __self: void 0,
200
181
  __source: {
201
182
  fileName: _jsxFileName,
202
- lineNumber: 137,
183
+ lineNumber: 136,
203
184
  columnNumber: 41
204
185
  }
205
186
  }, value)) : /*#__PURE__*/_react.default.createElement(Truncated, {
187
+ id: labelId,
206
188
  __self: void 0,
207
189
  __source: {
208
190
  fileName: _jsxFileName,
209
- lineNumber: 140,
191
+ lineNumber: 139,
210
192
  columnNumber: 37
211
193
  }
212
194
  }, value)), /*#__PURE__*/_react.default.createElement(NumericCell, {
@@ -214,7 +196,7 @@ const FieldSummaryTable = ({
214
196
  __self: void 0,
215
197
  __source: {
216
198
  fileName: _jsxFileName,
217
- lineNumber: 143,
199
+ lineNumber: 142,
218
200
  columnNumber: 29
219
201
  }
220
202
  }, (0, _Abbreviate.formatNumber)(count)), /*#__PURE__*/_react.default.createElement("td", {
@@ -222,24 +204,24 @@ const FieldSummaryTable = ({
222
204
  __self: void 0,
223
205
  __source: {
224
206
  fileName: _jsxFileName,
225
- lineNumber: 145,
207
+ lineNumber: 144,
226
208
  columnNumber: 29
227
209
  }
228
210
  }, /*#__PURE__*/_react.default.createElement(BarContainer, {
229
211
  __self: void 0,
230
212
  __source: {
231
213
  fileName: _jsxFileName,
232
- lineNumber: 146,
214
+ lineNumber: 145,
233
215
  columnNumber: 33
234
216
  }
235
217
  }, /*#__PURE__*/_react.default.createElement(Bar, {
236
218
  style: {
237
- width: `${percent}%`
219
+ width: percent + "%"
238
220
  },
239
221
  __self: void 0,
240
222
  __source: {
241
223
  fileName: _jsxFileName,
242
- lineNumber: 147,
224
+ lineNumber: 146,
243
225
  columnNumber: 37
244
226
  }
245
227
  }))));
package/components/FieldSummary/SelectionButtons.js CHANGED
@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
11
11
 
12
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
13
 
14
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
+
14
16
  var _react = _interopRequireDefault(require("react"));
15
17
 
16
18
  var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -24,26 +26,11 @@ var _format = require("@splunk/ui-utils/format");
24
26
  var _i18n = require("@splunk/ui-utils/i18n");
25
27
 
26
28
  const _excluded = ["selectionCount", "actions", "onActionClicked", "size", "showSelectionCount"];
27
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/SelectionButtons.tsx";
28
- const Container = _styledComponents.default.div`
29
- display: flex;
30
- align-items: center;
31
- flex-wrap: wrap;
32
- margin: -${_themes.variables.spacingXSmall};
33
-
34
- /* Could just be button other props added to win the specificity war */
35
- & > button[data-inline][data-size='small']:not([data-prepend]) {
36
- margin: ${_themes.variables.spacingXSmall} ${_themes.variables.spacingSmall} ${_themes.variables.spacingXSmall} 0;
37
- }
38
29
 
39
- button {
40
- flex-grow: 0;
41
- }
30
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/SelectionButtons.tsx",
31
+ _templateObject;
42
32
 
43
- & > span {
44
- padding-right: ${_themes.variables.spacingMedium};
45
- }
46
- `;
33
+ const Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin: -", ";\n\n /* Could just be button other props added to win the specificity war */\n & > button[data-inline][data-size='small']:not([data-prepend]) {\n margin: ", " ", " ", " 0;\n }\n\n button {\n flex-grow: 0;\n }\n\n & > span {\n padding-right: ", ";\n }\n"])), _themes.variables.spacingXSmall, _themes.variables.spacingXSmall, _themes.variables.spacingSmall, _themes.variables.spacingXSmall, _themes.variables.spacingMedium);
47
34
 
48
35
  const SelectionButtons = _ref => {
49
36
  let {
package/components/FieldSummary/SplitButton.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React, { SyntheticEvent } from 'react';
2
+ declare type Action = {
3
+ name: string;
4
+ label: string;
5
+ };
6
+ interface SplitButtonProps {
7
+ actions: Action[];
8
+ selectionCount: number;
9
+ onActionClicked: (e: SyntheticEvent, { action }: {
10
+ action: string;
11
+ }) => void;
12
+ }
13
+ declare const SplitButton: React.FC<SplitButtonProps>;
14
+ export default SplitButton;
package/components/FieldSummary/SplitButton.js ADDED
@@ -0,0 +1,129 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var _Caret = _interopRequireDefault(require("@splunk/react-icons/Caret"));
17
+
18
+ var _Menu = _interopRequireDefault(require("@splunk/react-ui/Menu"));
19
+
20
+ var _Button = _interopRequireDefault(require("@splunk/react-ui/Button"));
21
+
22
+ var _ButtonGroup = _interopRequireDefault(require("@splunk/react-ui/ButtonGroup"));
23
+
24
+ var _Dropdown = _interopRequireDefault(require("@splunk/react-ui/Dropdown"));
25
+
26
+ var _i18n = require("@splunk/ui-utils/i18n");
27
+
28
+ const _excluded = ["actions", "selectionCount", "onActionClicked"];
29
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/SplitButton.tsx";
30
+
31
+ const SplitButton = _ref => {
32
+ let {
33
+ actions,
34
+ selectionCount,
35
+ onActionClicked
36
+ } = _ref,
37
+ otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
38
+
39
+ if (actions.length === 0) {
40
+ return null;
41
+ }
42
+
43
+ const [first, ...rest] = actions;
44
+ const clickHandler = onActionClicked ? action => e => onActionClicked(e, {
45
+ action
46
+ }) : () => undefined;
47
+ let popup = null;
48
+
49
+ if (rest.length > 0) {
50
+ const toggle = /*#__PURE__*/_react.default.createElement(_Button.default, {
51
+ prepend: true,
52
+ key: "more-actions",
53
+ "data-test": "more-actions",
54
+ icon: /*#__PURE__*/_react.default.createElement(_Caret.default, {
55
+ screenReaderText: (0, _i18n._)('More Actions'),
56
+ __self: void 0,
57
+ __source: {
58
+ fileName: _jsxFileName,
59
+ lineNumber: 48,
60
+ columnNumber: 23
61
+ }
62
+ }),
63
+ appearance: "toggle",
64
+ size: "small",
65
+ disabled: selectionCount === 0,
66
+ __self: void 0,
67
+ __source: {
68
+ fileName: _jsxFileName,
69
+ lineNumber: 44,
70
+ columnNumber: 13
71
+ }
72
+ });
73
+
74
+ popup = /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
75
+ toggle: toggle,
76
+ __self: void 0,
77
+ __source: {
78
+ fileName: _jsxFileName,
79
+ lineNumber: 55,
80
+ columnNumber: 13
81
+ }
82
+ }, /*#__PURE__*/_react.default.createElement(_Menu.default, {
83
+ __self: void 0,
84
+ __source: {
85
+ fileName: _jsxFileName,
86
+ lineNumber: 56,
87
+ columnNumber: 17
88
+ }
89
+ }, rest.map(action => /*#__PURE__*/_react.default.createElement(_Menu.default.Item, {
90
+ key: action.name,
91
+ "data-test": action.name,
92
+ onClick: clickHandler(action.name),
93
+ __self: void 0,
94
+ __source: {
95
+ fileName: _jsxFileName,
96
+ lineNumber: 58,
97
+ columnNumber: 25
98
+ }
99
+ }, action.label, ' '))));
100
+ }
101
+
102
+ return /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, (0, _extends2.default)({
103
+ "data-test": "split-button"
104
+ }, otherProps, {
105
+ __self: void 0,
106
+ __source: {
107
+ fileName: _jsxFileName,
108
+ lineNumber: 71,
109
+ columnNumber: 9
110
+ }
111
+ }), /*#__PURE__*/_react.default.createElement(_Button.default, {
112
+ key: first.name,
113
+ "data-test": first.name,
114
+ label: first.label,
115
+ appearance: "toggle",
116
+ size: "small",
117
+ onClick: clickHandler(first.name),
118
+ disabled: selectionCount === 0,
119
+ __self: void 0,
120
+ __source: {
121
+ fileName: _jsxFileName,
122
+ lineNumber: 72,
123
+ columnNumber: 13
124
+ }
125
+ }), popup);
126
+ };
127
+
128
+ var _default = SplitButton;
129
+ exports.default = _default;
package/components/FieldSummaryList/FieldSummaryList.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
10
12
  var _react = _interopRequireWildcard(require("react"));
11
13
 
12
14
  var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -23,21 +25,17 @@ var _FieldList = _interopRequireDefault(require("../FieldList"));
23
25
 
24
26
  var _FieldSummary = _interopRequireDefault(require("../FieldSummary"));
25
27
 
26
- var _jsxFileName = "/builds/swp/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummaryList/FieldSummaryList.tsx";
28
+ var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummaryList/FieldSummaryList.tsx",
29
+ _templateObject,
30
+ _templateObject2;
27
31
 
28
32
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
33
 
30
34
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
35
 
32
- const Padding = _styledComponents.default.div`
33
- padding: ${_themes.variables.spacingMedium};
34
- min-width: 450px;
35
- max-width: 800px;
36
- `;
37
- const Message = _styledComponents.default.p`
38
- text-overflow: ellipsis;
39
- overflow-x: hidden;
40
- `;
36
+ const Padding = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n min-width: 450px;\n max-width: 800px;\n"])), _themes.variables.spacingMedium);
37
+
38
+ const Message = _styledComponents.default.p(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n text-overflow: ellipsis;\n overflow-x: hidden;\n"])));
41
39
 
42
40
  const FieldSummaryList = ({
43
41
  eventCount,
package/components/FieldSummaryList/tests/FieldSummaryList.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ReactElement } from 'react';
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
6
+ export declare const Basic: () => ReactElement;
package/package.json CHANGED
@@ -1,33 +1,29 @@
1
1
  {
2
- "author": {
3
- "name": "Splunk Inc."
4
- },
5
- "bundleDependencies": false,
6
- "dependencies": {
7
- "@babel/runtime": "^7.14.0",
8
- "@splunk/react-icons": "^3.0.1",
9
- "@splunk/react-selection-actions": "^0.3.0",
10
- "@splunk/react-ui": "^4.0.3",
11
- "@splunk/themes": "^0.7.0",
12
- "@splunk/ui-utils": "^1.2.1",
13
- "prop-types": "^15.6.0",
14
- "react-is": "^16.10.0"
15
- },
16
- "deprecated": false,
17
- "description": "This component creates a field summary list container which categorizes the fields that are present in the events/results that are returned from a search job. The fields can be categorized and/or sorted in any way the consumer of this component chooses.",
18
- "devDependencies": {},
19
- "files": [
20
- "components/*/*.js",
21
- "components/*/*.d.ts"
22
- ],
23
- "license": "Apache-2.0",
24
- "main": "components/FieldSummaryList",
25
- "name": "@splunk/react-field-summary",
26
- "peerDependencies": {
27
- "react": "^16.10.0",
28
- "react-dom": "^16.10.0",
29
- "styled-components": "^5"
30
- },
31
- "scripts": {},
32
- "version": "0.9.0"
2
+ "name": "@splunk/react-field-summary",
3
+ "version": "0.10.1",
4
+ "description": "",
5
+ "author": "Splunk Inc.",
6
+ "license": "Apache-2.0",
7
+ "main": "components/FieldSummaryList",
8
+ "files": [
9
+ "components/*/*.js",
10
+ "components/*/*.d.ts"
11
+ ],
12
+ "peerDependencies": {
13
+ "react": "^16.10.0",
14
+ "react-dom": "^16.10.0",
15
+ "styled-components": "^5"
16
+ },
17
+ "dependencies": {
18
+ "@babel/runtime": "^7.14.0",
19
+ "@splunk/react-icons": "^3.2.0",
20
+ "@splunk/react-ui": "^4.17.0",
21
+ "@splunk/themes": "^0.12.0",
22
+ "@splunk/ui-utils": "^1.5.0",
23
+ "prop-types": "^15.6.0",
24
+ "react-is": "^16.10.0"
25
+ },
26
+ "resolutions": {
27
+ "import-jsx": "^4.0.1"
28
+ }
33
29
  }
package/CHANGELOG.md DELETED
@@ -1,78 +0,0 @@
1
- # Changelog
2
-
3
- ## 0.9.0 (2021-10-07)
4
-
5
- ### Changed
6
- * [Breaking] Relicensed package to Apache-2.0
7
-
8
-
9
- ## 0.8.1 (2021-06-24)
10
- ### Fixed
11
- * Updated dependency on `@splunk/react-ui` to fix a11y issues (SUI-2608).
12
-
13
-
14
- ## 0.8.0 (2021-02-18)
15
- ### Changed
16
- * [Breaking] Updated to use 4.0 series of Splunk UI packages. Includes breaking changes to theming,
17
- layout, and colors. The `themes` module was removed. (PX-918).
18
- * [Breaking] IE11 is no longer supported.
19
- * [Breaking] Updated peer dependency `styled-components` to `^5.1`.
20
- * Removed peer dependencies: `@splunk/react-ui`, `@splunk/react-icons`.
21
-
22
-
23
- ## [0.7.0] - 2020-08-31
24
-
25
- ### Fixed
26
- * Fixed clear text icon overlapping magnifying search icon in field summary list (PX-94).
27
- * Fixed field summary values getting truncated too early (PX-337).
28
-
29
-
30
- ## [0.6.1] - 2020-07-27
31
-
32
- ### Fixed
33
- * Added missing dependency on `@splunk/react-icons`
34
-
35
-
36
- ## [0.6.0] - 2020-07-24
37
-
38
- ### Changed
39
- * Updated following peer dependencies (SCP-25802).
40
- * [Breaking] react-ui: ^3
41
- * [Breaking] styled-components: ^5.1
42
-
43
- ### Fixed
44
- * Removed direct dependency on `@splunk/react-ui` since it's a peer dependency
45
- * Added missing dependency on `prop-types`
46
-
47
-
48
- ## [0.5.0] - 2020-06-12
49
-
50
- ### Fixed
51
- Closed field-summary popover when an action or field value is clicked (SCP-27832).
52
-
53
-
54
- ## [0.4.0] - 2020-05-27
55
-
56
- ### Fixed
57
- Increased the space afforded to field values in the field summary popup (SCP-26797).
58
-
59
- ## [0.3.0] - 2020-04-20
60
-
61
- ### Added
62
- Made the `FieldSummary` a part of the public API (SCP-25687).
63
-
64
- ### Changed
65
- * Updated the `FieldSummary` design (SCP-25014).
66
-
67
-
68
- ## [0.2.0] - 2020-04-08
69
-
70
- ### Added
71
- Tooltip for bars in field summary now show the total events.(SCP-25550).
72
-
73
-
74
- ## [0.1.0] - 2020-03-24
75
-
76
- ### Added
77
-
78
- * `FieldSummaryList` component accepts field summary data from the results of a search and lists the fields, each with a popup for its values (SCP-23652).