@splunk/react-field-summary 0.10.1 → 27.2.1

package/components/FieldSummary/FieldSummary.js

@@ -1,285 +1,601 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "FieldValue", {
-  enumerable: true,
-  get: function () {
-    return _FieldSummaryTable.FieldValue;
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+in part without a valid written license from Splunk Inc. is PROHIBITED. */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/FieldSummary/FieldSummary.tsx
+var FieldSummary_exports = {};
+__export(FieldSummary_exports, {
+  default: () => FieldSummary_default
 });
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+module.exports = __toCommonJS(FieldSummary_exports);
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _i18n = require("@splunk/ui-utils/i18n");
-
-var _themes = require("@splunk/themes");
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport2 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport3 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport4 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/react-icons/enterprise/Number
+var Number_exports = {};
+__export(Number_exports, {
+  default: () => Number_default
+});
+var defaultImport5 = __toESM(require("@splunk/react-icons/enterprise/Number"));
+__reExport(Number_exports, require("@splunk/react-icons/enterprise/Number"));
+var Number_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/react-icons/enterprise/String
+var String_exports = {};
+__export(String_exports, {
+  default: () => String_default
+});
+var defaultImport6 = __toESM(require("@splunk/react-icons/enterprise/String"));
+__reExport(String_exports, require("@splunk/react-icons/enterprise/String"));
+var String_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// src/components/FieldList/FieldList.tsx
+var Container = styled_components_default.ol`
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    svg {
+        padding-right: ${themes_exports.variables.spacingXSmall};
+        color: ${themes_exports.variables.contentColorMuted};
+    }
 
-var _FieldList = require("../FieldList");
+    button {
+        display: flex;
+        align-items: baseline;
+        border: none;
+        text-align: left;
+        width: 100%;
+        height: 100%;
+        color: ${themes_exports.variables.contentColorDefault};
+        font-size: ${themes_exports.variables.fontSize};
+        padding: calc(${themes_exports.variables.spacingXSmall} / 2) ${themes_exports.variables.spacingXSmall};
+        margin: 0;
+        background-color: inherit;
+    }
 
-var _Abbreviate = _interopRequireWildcard(require("./Abbreviate"));
+    button:not([disabled]) {
+        cursor: pointer;
+        color: ${themes_exports.variables.linkColor};
+    }
 
-var _FieldActions = _interopRequireDefault(require("./FieldActions"));
+    li {
+        background-color: inherit;
 
-var _FieldStats = _interopRequireDefault(require("./FieldStats"));
+        padding: 0;
+        margin: 0;
+    }
 
-var _FieldSummaryTable = _interopRequireWildcard(require("./FieldSummaryTable"));
+    button:not([disabled]):hover,
+    button[aria-pressed='true'] {
+        background-color: ${(0, themes_exports.pick)({
+  enterprise: themes_exports.variables.backgroundColorHover,
+  prisma: themes_exports.variables.interactiveColorOverlayHover
+})};
+    }
 
-var _SplitButton = _interopRequireDefault(require("./SplitButton"));
+    button:not([disabled]):focus {
+        outline: 0;
+        box-shadow: ${themes_exports.variables.focusShadowInset};
 
-const _excluded = ["field", "eventCount", "actionsForField", "onActionClicked", "onFieldValueClicked"];
+        ::-moz-focus-inner {
+            border: 0;
+        }
+    }
+`;
+var Name = styled_components_default.span`
+    min-width: 0;
+    flex-shrink: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+var Count = styled_components_default.span`
+    padding-left: ${themes_exports.variables.spacingXSmall};
+    color: ${themes_exports.variables.contentColorMuted};
+`;
+var isNumeric = (field) => field.numericCount && Number(field.numericCount) / Number(field.count) > 0.7;
+
+// esm-externals:@splunk/ui-utils/format
+var format_exports = {};
+__export(format_exports, {
+  default: () => format_default
+});
+var defaultImport7 = __toESM(require("@splunk/ui-utils/format"));
+__reExport(format_exports, require("@splunk/ui-utils/format"));
+var format_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// src/components/FieldSummary/Abbreviate.tsx
+var formatNumber = new Intl.NumberFormat().format;
+var Abbreviate = ({ value }) => /* @__PURE__ */ react_default.createElement("span", { title: formatNumber(value) }, (0, format_exports.abbreviateNumber)(value));
+var Abbreviate_default = Abbreviate;
+
+// esm-externals:@splunk/react-ui/Link
+var Link_exports = {};
+__export(Link_exports, {
+  default: () => Link_default
+});
+var defaultImport8 = __toESM(require("@splunk/react-ui/Link"));
+__reExport(Link_exports, require("@splunk/react-ui/Link"));
+var Link_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// src/components/FieldSummary/FieldActions.tsx
+var StyledActions = styled_components_default.div`
+    padding-left: ${themes_exports.variables.spacingMedium};
+
+    h3 {
+        font-size: ${themes_exports.variables.fontSize};
+        margin: 0;
+        padding: 1px;
+        margin-top: 2px;
+    }
 
-var _jsxFileName = "/Users/ssahnoune/Desktop/ui-platform/projects/lib/search-components/react-field-summary/src/components/FieldSummary/FieldSummary.tsx",
-    _templateObject,
-    _templateObject2,
-    _templateObject3;
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
 
-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); }
+        button {
+            line-height: calc(${themes_exports.variables.lineHeight} * 0.8);
+            margin-bottom: ${themes_exports.variables.spacingXSmall};
+        }
+    }
+`;
+var Actions = ({ field, actions, selected, onActionClicked }) => actions && actions.length > 0 ? /* @__PURE__ */ react_default.createElement(StyledActions, null, /* @__PURE__ */ react_default.createElement("h3", null, (0, i18n_exports._)("Actions")), /* @__PURE__ */ react_default.createElement("ul", null, actions.map(({ name, label, requiresSelection }) => /* @__PURE__ */ react_default.createElement("li", { key: name }, /* @__PURE__ */ react_default.createElement(
+  Link_default,
+  {
+    disabled: !onActionClicked || requiresSelection && selected.length === 0,
+    onClick: (e) => onActionClicked(e, { action: name, field, selected })
+  },
+  label
+))))) : null;
+var FieldActions_default = Actions;
+
+// src/components/FieldSummary/FieldStats.tsx
+var DL = styled_components_default.dl`
+    color: ${themes_exports.variables.contentColorDefault};
+    margin-top: ${themes_exports.variables.spacingSmall};
+    margin-bottom: ${themes_exports.variables.spacingSmall};
+    dt {
+        display: inline-block;
+        font-weight: bold;
+    }
+    dt::after {
+        content: ':';
+    }
+    dd {
+        display: inline-block;
+        margin-left: ${themes_exports.variables.spacingXSmall};
+        margin-right: ${themes_exports.variables.spacingSmall};
+    }
+`;
+var Stat = ({ label, value }) => /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement("dt", null, label), /* @__PURE__ */ react_default.createElement("dd", null, /* @__PURE__ */ react_default.createElement(Abbreviate_default, { value })));
+var FieldStats = ({ mean, min, max, stdev }) => typeof mean !== "number" ? null : /* @__PURE__ */ react_default.createElement(DL, null, /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Min"), value: min }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Max"), value: max }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Avg"), value: mean }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Std Dev"), value: stdev }));
+var FieldStats_default = FieldStats;
+
+// esm-externals:@splunk/react-ui/Switch
+var Switch_exports = {};
+__export(Switch_exports, {
+  default: () => Switch_default
+});
+var defaultImport9 = __toESM(require("@splunk/react-ui/Switch"));
+__reExport(Switch_exports, require("@splunk/react-ui/Switch"));
+var Switch_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport10 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// src/components/FieldSummary/FieldSummaryTable.tsx
+var BAR_WIDTH = "100px";
+var BarContainer = styled_components_default.div`
+    width: ${BAR_WIDTH};
+    background-color: ${(0, themes_exports.pick)({
+  enterprise: themes_exports.variables.backgroundColorHover,
+  prisma: themes_exports.variables.interactiveColorOverlayHover
+})};
+`;
+var Bar = styled_components_default.div`
+    height: ${themes_exports.variables.lineHeight};
+    background-color: ${(0, themes_exports.pick)({
+  enterprise: themes_exports.variables.accentColor,
+  prisma: themes_exports.variables.interactiveColorPrimary
+})};
+`;
+var StyledSwitch = styled_components_default(Switch_default)`
+    margin: 0 ${themes_exports.variables.spacingXSmall} 0 0;
+    padding: 0;
+`;
+var NumericCell = styled_components_default.td`
+    text-align: right;
+`;
+var ValueCell = styled_components_default.td`
+    width: 100%;
+`;
+var NumericHeading = styled_components_default.th`
+    text-align: right;
+`;
+var Truncated = styled_components_default.span`
+    text-overflow: ellipsis;
+    min-width: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-wrap: anywhere;
+    word-break: break-all;
+`;
+var Table = styled_components_default.table`
+    tbody {
+        td {
+            font-family: ${themes_exports.variables.monoFontFamily};
+            button {
+                font-family: ${themes_exports.variables.monoFontFamily};
+            }
+        }
+
+        th:last-child {
+            width: ${BAR_WIDTH};
+        }
+    }
+`;
+var FieldSummaryTable = ({
+  total,
+  values,
+  selected,
+  onFieldValueSelected,
+  onFieldValueClicked
+}) => {
+  const firstColSpan = onFieldValueSelected ? 2 : 1;
+  return /* @__PURE__ */ react_default.createElement(Table, null, /* @__PURE__ */ react_default.createElement("thead", null, /* @__PURE__ */ react_default.createElement("tr", null, /* @__PURE__ */ react_default.createElement("th", { colSpan: firstColSpan }, (0, i18n_exports._)("Top Values")), /* @__PURE__ */ react_default.createElement(NumericHeading, null, (0, i18n_exports._)("Count")), /* @__PURE__ */ react_default.createElement("th", null))), /* @__PURE__ */ react_default.createElement("tbody", null, values.map(({ count, value }) => {
+    const percent = count < total ? count / total * 100 : 100;
+    const percentOfEvents = (0, format_exports.sprintf)((0, i18n_exports._)("%(percent)s%% of %(total)s events"), {
+      percent: formatNumber(percent),
+      total: formatNumber(total)
+    });
+    const labelId = (0, id_exports.createDOMID)();
+    return /* @__PURE__ */ react_default.createElement("tr", { key: value }, onFieldValueSelected && /* @__PURE__ */ react_default.createElement("td", null, /* @__PURE__ */ react_default.createElement(
+      StyledSwitch,
+      {
+        key: value,
+        value,
+        selected: selected.indexOf(value) >= 0,
+        appearance: "checkbox",
+        onClick: onFieldValueSelected,
+        labelledBy: labelId
+      }
+    )), /* @__PURE__ */ react_default.createElement(ValueCell, { title: value }, onFieldValueClicked ? /* @__PURE__ */ react_default.createElement(
+      Link_default,
+      {
+        onClick: (e) => onFieldValueClicked(e, { value })
+      },
+      /* @__PURE__ */ react_default.createElement(Truncated, { id: labelId }, value)
+    ) : /* @__PURE__ */ react_default.createElement(Truncated, { id: labelId }, value)), /* @__PURE__ */ react_default.createElement(NumericCell, { title: percentOfEvents }, formatNumber(count)), /* @__PURE__ */ react_default.createElement("td", { title: percentOfEvents }, /* @__PURE__ */ react_default.createElement(BarContainer, null, /* @__PURE__ */ react_default.createElement(Bar, { style: { width: `${percent}%` } }))));
+  })));
+};
+var FieldSummaryTable_default = FieldSummaryTable;
 
-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; }
+// esm-externals:@splunk/react-icons/enterprise/Caret
+var Caret_exports = {};
+__export(Caret_exports, {
+  default: () => Caret_default
+});
+var defaultImport11 = __toESM(require("@splunk/react-icons/enterprise/Caret"));
+__reExport(Caret_exports, require("@splunk/react-icons/enterprise/Caret"));
+var Caret_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// esm-externals:@splunk/react-ui/Menu
+var Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+var defaultImport12 = __toESM(require("@splunk/react-ui/Menu"));
+__reExport(Menu_exports, require("@splunk/react-ui/Menu"));
+var Menu_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport13 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+
+// esm-externals:@splunk/react-ui/ButtonGroup
+var ButtonGroup_exports = {};
+__export(ButtonGroup_exports, {
+  default: () => ButtonGroup_default
+});
+var defaultImport14 = __toESM(require("@splunk/react-ui/ButtonGroup"));
+__reExport(ButtonGroup_exports, require("@splunk/react-ui/ButtonGroup"));
+var ButtonGroup_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+
+// esm-externals:@splunk/react-ui/Dropdown
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+var defaultImport15 = __toESM(require("@splunk/react-ui/Dropdown"));
+__reExport(Dropdown_exports, require("@splunk/react-ui/Dropdown"));
+var Dropdown_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// src/components/FieldSummary/SplitButton.tsx
+var SplitButton = (_a) => {
+  var _b = _a, {
+    actions,
+    selectionCount,
+    onActionClicked
+  } = _b, otherProps = __objRest(_b, [
+    "actions",
+    "selectionCount",
+    "onActionClicked"
+  ]);
+  if (actions.length === 0) {
+    return null;
+  }
+  const [first, ...rest] = actions;
+  const clickHandler = onActionClicked ? (action) => (e) => onActionClicked(e, { action }) : () => void 0;
+  let popup = null;
+  if (rest.length > 0) {
+    const toggle = /* @__PURE__ */ react_default.createElement(
+      Button_default,
+      {
+        prepend: true,
+        key: "more-actions",
+        "data-test": "more-actions",
+        icon: /* @__PURE__ */ react_default.createElement(Caret_default, { screenReaderText: (0, i18n_exports._)("More Actions") }),
+        appearance: "toggle",
+        disabled: selectionCount === 0
+      }
+    );
+    popup = /* @__PURE__ */ react_default.createElement(Dropdown_default, { toggle }, /* @__PURE__ */ react_default.createElement(Menu_default, null, rest.map((action) => /* @__PURE__ */ react_default.createElement(
+      Menu_default.Item,
+      {
+        key: action.name,
+        "data-test": action.name,
+        onClick: clickHandler(action.name)
+      },
+      action.label,
+      " "
+    ))));
+  }
+  return /* @__PURE__ */ react_default.createElement(ButtonGroup_default, __spreadValues({ "data-test": "split-button" }, otherProps), /* @__PURE__ */ react_default.createElement(
+    Button_default,
+    {
+      key: first.name,
+      "data-test": first.name,
+      label: first.label,
+      appearance: "toggle",
+      onClick: clickHandler(first.name),
+      disabled: selectionCount === 0
+    }
+  ), popup);
+};
+var SplitButton_default = SplitButton;
 
-const defaultActionsForField = (field, actionsForField) => {
+// src/components/FieldSummary/FieldSummary.tsx
+var defaultActionsForField = (field, actionsForField) => {
   const actions = [];
-
-  if ((0, _FieldList.isNumeric)(field)) {
-    actions.push({
-      name: 'avgByTime',
-      label: (0, _i18n._)('Average over time')
-    });
-    actions.push({
-      name: 'maxByTime',
-      label: (0, _i18n._)('Maximum value over time')
-    });
-    actions.push({
-      name: 'minByTime',
-      label: (0, _i18n._)('Minimum value over time')
-    });
+  if (isNumeric(field)) {
+    actions.push({ name: "avgByTime", label: (0, i18n_exports._)("Average over time") });
+    actions.push({ name: "maxByTime", label: (0, i18n_exports._)("Maximum value over time") });
+    actions.push({ name: "minByTime", label: (0, i18n_exports._)("Minimum value over time") });
   }
-
-  actions.push({
-    name: 'topValues',
-    label: (0, _i18n._)('Top values')
-  });
+  actions.push({ name: "topValues", label: (0, i18n_exports._)("Top values") });
+  actions.push({ name: "topValuesByTime", label: (0, i18n_exports._)("Top values by time") });
+  actions.push({ name: "rareValues", label: (0, i18n_exports._)("Rare values") });
+  actions.push({ name: "allValues", label: (0, i18n_exports._)("Events with this field") });
   actions.push({
-    name: 'topValuesByTime',
-    label: (0, _i18n._)('Top values by time')
-  });
-  actions.push({
-    name: 'rareValues',
-    label: (0, _i18n._)('Rare values')
-  });
-  actions.push({
-    name: 'allValues',
-    label: (0, _i18n._)('Events with this field')
-  });
-  actions.push({
-    name: 'includeValues',
-    label: (0, _i18n._)('Include Selected'),
+    name: "includeValues",
+    label: (0, i18n_exports._)("Include Selected"),
     requiresSelection: true
   });
   actions.push({
-    name: 'excludeValues',
-    label: (0, _i18n._)('Exclude Selected'),
+    name: "excludeValues",
+    label: (0, i18n_exports._)("Exclude Selected"),
     requiresSelection: true
   });
   return actionsForField ? actionsForField(field, actions) : actions;
 };
+var Name2 = styled_components_default.h2`
+    font-size: ${themes_exports.variables.fontSizeXLarge};
+    margin: ${themes_exports.variables.spacingSmall} 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+`;
+var StyledCoverage = styled_components_default.div`
+    color: ${themes_exports.variables.contentColorDefault};
+    margin-bottom: ${themes_exports.variables.spacingSmall};
+`;
+var TableAndActions = styled_components_default.div`
+    display: flex;
+
+    & > div:nth-child(1) {
+        flex: 1 1;
+        table {
+            width: 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);
-
-const StyledCoverage = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    margin-bottom: ", ";\n"])), _themes.variables.contentColorDefault, _themes.variables.spacingSmall);
-
-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"])));
-
-const Coverage = ({
+    & > div:nth-child(2) {
+        width: 150px;
+    }
+`;
+var Coverage = ({
   distinctCount,
   count,
   eventCount
 }) => {
-  const content = [/*#__PURE__*/_react.default.createElement(_Abbreviate.default, {
-    key: "values",
-    value: distinctCount,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 131,
-      columnNumber: 22
-    }
-  }), (0, _i18n._)(' values')];
-
+  const content = [/* @__PURE__ */ react_default.createElement(Abbreviate_default, { key: "values", value: distinctCount }), (0, i18n_exports._)(" values")];
   if (eventCount) {
-    content.push((0, _i18n._)(' in '));
-    content.push((0, _Abbreviate.formatNumber)(count / eventCount * 100) + "%");
-    content.push((0, _i18n._)(' of '));
-    content.push( /*#__PURE__*/_react.default.createElement(_Abbreviate.default, {
-      key: "events",
-      value: eventCount,
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 136,
-        columnNumber: 22
-      }
-    }));
-    content.push((0, _i18n._)(' events'));
+    content.push((0, i18n_exports._)(" in "));
+    content.push(`${formatNumber(count / eventCount * 100)}%`);
+    content.push((0, i18n_exports._)(" of "));
+    content.push(/* @__PURE__ */ react_default.createElement(Abbreviate_default, { key: "events", value: eventCount }));
+    content.push((0, i18n_exports._)(" events"));
   }
-
-  return /*#__PURE__*/_react.default.createElement(StyledCoverage, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 139,
-      columnNumber: 12
-    }
-  }, content);
+  return /* @__PURE__ */ react_default.createElement(StyledCoverage, null, content);
 };
-
-const FieldSummary = _ref => {
-  let {
+var FieldSummary = (_a) => {
+  var _b = _a, {
     field,
     eventCount,
     actionsForField,
     onActionClicked,
     onFieldValueClicked
-  } = _ref,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const [selected, setSelected] = (0, _react.useState)([]);
-  const handleSelectValue = (0, _react.useCallback)((e, {
-    value
-  }) => {
-    setSelected(prev => {
-      const filtered = prev.filter(x => x !== value);
-
-      if (prev.length !== filtered.length) {
-        return filtered;
-      }
-
-      return [...filtered, value];
-    });
-  }, []);
-  const actions = (0, _react.useMemo)(() => defaultActionsForField(field, actionsForField), [field, actionsForField]);
-  const selectionActions = (0, _react.useMemo)(() => actions.filter(action => action.requiresSelection), [actions]);
-  const nonSelectionActions = (0, _react.useMemo)(() => actions.filter(action => !action.requiresSelection), [actions]);
-  const handleActionClicked = (0, _react.useMemo)(() => {
+  } = _b, rest = __objRest(_b, [
+    "field",
+    "eventCount",
+    "actionsForField",
+    "onActionClicked",
+    "onFieldValueClicked"
+  ]);
+  const [selected, setSelected] = (0, react_exports.useState)([]);
+  const handleSelectValue = (0, react_exports.useCallback)(
+    (e, data) => {
+      setSelected((prev) => {
+        const filtered = prev.filter((x) => x !== data.value);
+        if (prev.length !== filtered.length) {
+          return filtered;
+        }
+        return [...filtered, data.value];
+      });
+    },
+    []
+  );
+  const actions = (0, react_exports.useMemo)(() => defaultActionsForField(field, actionsForField), [field, actionsForField]);
+  const selectionActions = (0, react_exports.useMemo)(() => actions.filter((action) => action.requiresSelection), [actions]);
+  const nonSelectionActions = (0, react_exports.useMemo)(() => actions.filter((action) => !action.requiresSelection), [actions]);
+  const handleActionClicked = (0, react_exports.useMemo)(() => {
     if (!onActionClicked) {
-      return undefined;
+      return void 0;
     }
-
-    return (e, {
-      action
-    }) => onActionClicked(e, {
-      action,
-      field: field.name,
-      selected
-    });
+    return (e, { action }) => onActionClicked(e, { action, field: field.name, selected });
   }, [onActionClicked, field.name, selected]);
-  const handleFieldValueClicked = (0, _react.useMemo)(() => {
+  const handleFieldValueClicked = (0, react_exports.useMemo)(() => {
     if (!onFieldValueClicked) {
-      return undefined;
+      return void 0;
     }
-
-    return (e, {
-      value
-    }) => onFieldValueClicked(e, {
-      field: field.name,
-      value
-    });
+    return (e, { value }) => onFieldValueClicked(e, { field: field.name, value });
   }, [onFieldValueClicked, field.name]);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    "data-test": "field-summary"
-  }, rest, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 186,
-      columnNumber: 9
-    }
-  }), /*#__PURE__*/_react.default.createElement(Name, {
-    title: field.name,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 187,
-      columnNumber: 13
-    }
-  }, field.name), /*#__PURE__*/_react.default.createElement(Coverage, {
-    distinctCount: field.distinctCount,
-    count: field.count,
-    eventCount: eventCount,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 188,
-      columnNumber: 13
-    }
-  }), /*#__PURE__*/_react.default.createElement(_FieldStats.default, (0, _extends2.default)({}, field, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 189,
-      columnNumber: 13
-    }
-  })), /*#__PURE__*/_react.default.createElement(_SplitButton.default, {
-    actions: selectionActions,
-    selectionCount: selected.length,
-    onActionClicked: handleActionClicked,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 190,
-      columnNumber: 13
+  return /* @__PURE__ */ react_default.createElement("div", __spreadValues({ "data-test": "field-summary" }, rest), /* @__PURE__ */ react_default.createElement(Name2, { title: field.name }, field.name), /* @__PURE__ */ react_default.createElement(Coverage, { distinctCount: field.distinctCount, count: field.count, eventCount }), /* @__PURE__ */ react_default.createElement(FieldStats_default, __spreadValues({}, field)), /* @__PURE__ */ react_default.createElement(
+    SplitButton_default,
+    {
+      actions: selectionActions,
+      selectionCount: selected.length,
+      onActionClicked: handleActionClicked
     }
-  }), /*#__PURE__*/_react.default.createElement(TableAndActions, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 195,
-      columnNumber: 13
+  ), /* @__PURE__ */ react_default.createElement(TableAndActions, null, /* @__PURE__ */ react_default.createElement("div", null, /* @__PURE__ */ react_default.createElement(
+    FieldSummaryTable_default,
+    {
+      total: field.count,
+      values: field.modes,
+      selected,
+      onFieldValueSelected: selectionActions.length > 0 ? handleSelectValue : void 0,
+      onFieldValueClicked: handleFieldValueClicked
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 196,
-      columnNumber: 17
-    }
-  }, /*#__PURE__*/_react.default.createElement(_FieldSummaryTable.default, {
-    total: field.count,
-    values: field.modes,
-    selected: selected,
-    onFieldValueSelected: selectionActions.length > 0 ? handleSelectValue : undefined,
-    onFieldValueClicked: handleFieldValueClicked,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 197,
-      columnNumber: 21
-    }
-  })), /*#__PURE__*/_react.default.createElement(_FieldActions.default, {
-    field: field.name,
-    actions: nonSelectionActions,
-    selected: selected,
-    onActionClicked: onActionClicked,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 205,
-      columnNumber: 17
+  )), /* @__PURE__ */ react_default.createElement(
+    FieldActions_default,
+    {
+      field: field.name,
+      actions: nonSelectionActions,
+      selected,
+      onActionClicked
     }
-  })));
+  )));
 };
-
-var _default = FieldSummary;
-exports.default = _default;
+var FieldSummary_default = FieldSummary;
+//# sourceMappingURL=FieldSummary.js.map