@splunk/react-field-summary 0.11.0 → 27.2.1

package/components/FieldSummaryList/index.js

@@ -1,15 +1,735 @@
-"use strict";
+/* 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/FieldSummaryList/index.ts
+var FieldSummaryList_exports = {};
+__export(FieldSummaryList_exports, {
+  default: () => FieldSummaryList_default
+});
+module.exports = __toCommonJS(FieldSummaryList_exports);
+
+// 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;
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+// esm-externals:@splunk/react-ui/Popover
+var Popover_exports = {};
+__export(Popover_exports, {
+  default: () => Popover_default
+});
+var defaultImport3 = __toESM(require("@splunk/react-ui/Popover"));
+__reExport(Popover_exports, require("@splunk/react-ui/Popover"));
+var Popover_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// esm-externals:@splunk/react-ui/Text
+var Text_exports = {};
+__export(Text_exports, {
+  default: () => Text_default
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _FieldSummaryList.default;
+var defaultImport4 = __toESM(require("@splunk/react-ui/Text"));
+__reExport(Text_exports, require("@splunk/react-ui/Text"));
+var Text_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport5 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport6 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/react-icons/enterprise/Number
+var Number_exports = {};
+__export(Number_exports, {
+  default: () => Number_default
+});
+var defaultImport7 = __toESM(require("@splunk/react-icons/enterprise/Number"));
+__reExport(Number_exports, require("@splunk/react-icons/enterprise/Number"));
+var Number_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/react-icons/enterprise/String
+var String_exports = {};
+__export(String_exports, {
+  default: () => String_default
+});
+var defaultImport8 = __toESM(require("@splunk/react-icons/enterprise/String"));
+__reExport(String_exports, require("@splunk/react-icons/enterprise/String"));
+var String_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// src/components/FieldList/FieldList.tsx
+var ICON_SIZE = 0.6;
+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};
+    }
+
+    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;
+    }
+
+    button:not([disabled]) {
+        cursor: pointer;
+        color: ${themes_exports.variables.linkColor};
+    }
+
+    li {
+        background-color: inherit;
+
+        padding: 0;
+        margin: 0;
+    }
+
+    button:not([disabled]):hover,
+    button[aria-pressed='true'] {
+        background-color: ${(0, themes_exports.pick)({
+  enterprise: themes_exports.variables.backgroundColorHover,
+  prisma: themes_exports.variables.interactiveColorOverlayHover
+})};
+    }
+
+    button:not([disabled]):focus {
+        outline: 0;
+        box-shadow: ${themes_exports.variables.focusShadowInset};
+
+        ::-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;
+var Field = ({ active, field, onFieldClicked }) => {
+  const clickHandler = onFieldClicked ? (e) => onFieldClicked(e, field) : void 0;
+  const numeric = isNumeric(field);
+  return /* @__PURE__ */ react_default.createElement("li", null, /* @__PURE__ */ react_default.createElement("button", { type: "button", onClick: clickHandler, disabled: !onFieldClicked, "aria-pressed": active }, numeric ? /* @__PURE__ */ react_default.createElement(Number_default, { size: ICON_SIZE }) : /* @__PURE__ */ react_default.createElement(String_default, { size: ICON_SIZE }), /* @__PURE__ */ react_default.createElement(Name, { title: field.name }, field.name), /* @__PURE__ */ react_default.createElement(Count, null, field.distinctCount > 100 ? "100+" : field.distinctCount)));
+};
+var FieldList = ({ active, fields, onFieldClicked }) => /* @__PURE__ */ react_default.createElement(Container, { "data-test": "field-list" }, fields.map((field) => /* @__PURE__ */ react_default.createElement(
+  Field,
+  {
+    key: field.name,
+    field,
+    onFieldClicked,
+    active: field.name === active
   }
+)));
+var FieldList_default = FieldList;
+
+// esm-externals:@splunk/ui-utils/format
+var format_exports = {};
+__export(format_exports, {
+  default: () => format_default
+});
+var defaultImport9 = __toESM(require("@splunk/ui-utils/format"));
+__reExport(format_exports, require("@splunk/ui-utils/format"));
+var format_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// 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 defaultImport10 = __toESM(require("@splunk/react-ui/Link"));
+__reExport(Link_exports, require("@splunk/react-ui/Link"));
+var Link_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// 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;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+
+        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 defaultImport11 = __toESM(require("@splunk/react-ui/Switch"));
+__reExport(Switch_exports, require("@splunk/react-ui/Switch"));
+var Switch_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
 });
+var defaultImport12 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
-var _FieldSummaryList = _interopRequireDefault(require("./FieldSummaryList"));
+// 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;
+
+// esm-externals:@splunk/react-icons/enterprise/Caret
+var Caret_exports = {};
+__export(Caret_exports, {
+  default: () => Caret_default
+});
+var defaultImport13 = __toESM(require("@splunk/react-icons/enterprise/Caret"));
+__reExport(Caret_exports, require("@splunk/react-icons/enterprise/Caret"));
+var Caret_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+
+// esm-externals:@splunk/react-ui/Menu
+var Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+var defaultImport14 = __toESM(require("@splunk/react-ui/Menu"));
+__reExport(Menu_exports, require("@splunk/react-ui/Menu"));
+var Menu_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport15 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// esm-externals:@splunk/react-ui/ButtonGroup
+var ButtonGroup_exports = {};
+__export(ButtonGroup_exports, {
+  default: () => ButtonGroup_default
+});
+var defaultImport16 = __toESM(require("@splunk/react-ui/ButtonGroup"));
+__reExport(ButtonGroup_exports, require("@splunk/react-ui/ButtonGroup"));
+var ButtonGroup_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+
+// esm-externals:@splunk/react-ui/Dropdown
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+var defaultImport17 = __toESM(require("@splunk/react-ui/Dropdown"));
+__reExport(Dropdown_exports, require("@splunk/react-ui/Dropdown"));
+var Dropdown_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// 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;
+
+// src/components/FieldSummary/FieldSummary.tsx
+var defaultActionsForField = (field, actionsForField) => {
+  const actions = [];
+  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_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: "includeValues",
+    label: (0, i18n_exports._)("Include Selected"),
+    requiresSelection: true
+  });
+  actions.push({
+    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%;
+        }
+    }
+
+    & > div:nth-child(2) {
+        width: 150px;
+    }
+`;
+var Coverage = ({
+  distinctCount,
+  count,
+  eventCount
+}) => {
+  const content = [/* @__PURE__ */ react_default.createElement(Abbreviate_default, { key: "values", value: distinctCount }), (0, i18n_exports._)(" values")];
+  if (eventCount) {
+    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, null, content);
+};
+var FieldSummary = (_a) => {
+  var _b = _a, {
+    field,
+    eventCount,
+    actionsForField,
+    onActionClicked,
+    onFieldValueClicked
+  } = _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 void 0;
+    }
+    return (e, { action }) => onActionClicked(e, { action, field: field.name, selected });
+  }, [onActionClicked, field.name, selected]);
+  const handleFieldValueClicked = (0, react_exports.useMemo)(() => {
+    if (!onFieldValueClicked) {
+      return void 0;
+    }
+    return (e, { value }) => onFieldValueClicked(e, { field: field.name, value });
+  }, [onFieldValueClicked, field.name]);
+  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, 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(
+    FieldActions_default,
+    {
+      field: field.name,
+      actions: nonSelectionActions,
+      selected,
+      onActionClicked
+    }
+  )));
+};
+var FieldSummary_default = FieldSummary;
+
+// src/components/FieldSummaryList/FieldSummaryList.tsx
+var Padding = styled_components_default.div`
+    padding: ${themes_exports.variables.spacingMedium};
+    min-width: 450px;
+    max-width: 800px;
+`;
+var Message = styled_components_default.p`
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+`;
+var FieldSummaryList = ({
+  eventCount,
+  fields,
+  actionsForField,
+  onActionClicked,
+  onFieldValueClicked
+}) => {
+  const [search, setSearch] = (0, react_exports.useState)("");
+  const [popupContext, setPopupContext] = (0, react_exports.useState)(null);
+  const handleChangeSearch = (0, react_exports.useCallback)(
+    (e, { value }) => setSearch(value),
+    []
+  );
+  const handleFieldClicked = (0, react_exports.useCallback)((e, { name }) => {
+    let button = e.target;
+    while (button && button.nodeName !== "BUTTON") {
+      button = button.parentNode;
+    }
+    setPopupContext({ anchor: button, field: name });
+  }, []);
+  const handleRequestClose = (0, react_exports.useCallback)(() => setPopupContext(null), []);
+  const content = [];
+  if (!fields || fields.length === 0) {
+    content.push(/* @__PURE__ */ react_default.createElement("p", { key: "no-fields" }, (0, i18n_exports._)("No fields")));
+  } else {
+    content.push(
+      /* @__PURE__ */ react_default.createElement(
+        Text_default,
+        {
+          key: "search",
+          appearance: "search",
+          value: search,
+          onChange: handleChangeSearch,
+          placeholder: (0, i18n_exports._)("Find field")
+        }
+      )
+    );
+    const lowerSearch = search.toLocaleLowerCase();
+    const filteredFields = search && fields ? fields.filter(({ name }) => name.toLocaleLowerCase().includes(lowerSearch)) : fields;
+    if (filteredFields.length > 0) {
+      content.push(
+        /* @__PURE__ */ react_default.createElement(
+          FieldList_default,
+          {
+            key: "field-list",
+            active: popupContext == null ? void 0 : popupContext.field,
+            fields: filteredFields,
+            onFieldClicked: handleFieldClicked
+          }
+        )
+      );
+      const found = fields.find(({ name }) => name === (popupContext == null ? void 0 : popupContext.field));
+      content.push(
+        /* @__PURE__ */ react_default.createElement(
+          Popover_default,
+          {
+            key: "popover",
+            open: popupContext !== null,
+            anchor: popupContext == null ? void 0 : popupContext.anchor,
+            onRequestClose: handleRequestClose,
+            defaultPlacement: "right"
+          },
+          found && /* @__PURE__ */ react_default.createElement(Padding, null, /* @__PURE__ */ react_default.createElement(
+            FieldSummary_default,
+            {
+              eventCount,
+              field: found,
+              actionsForField,
+              onActionClicked: (e, data) => {
+                onActionClicked(e, data);
+                handleRequestClose();
+              },
+              onFieldValueClicked: (e, data) => {
+                onFieldValueClicked(e, data);
+                handleRequestClose();
+              }
+            }
+          ))
+        )
+      );
+    } else {
+      content.push(
+        /* @__PURE__ */ react_default.createElement(Message, { key: "not-found" }, (0, i18n_exports._)("No fields found matching"), " ", /* @__PURE__ */ react_default.createElement("b", null, search))
+      );
+    }
+  }
+  return /* @__PURE__ */ react_default.createElement("div", { "data-test": "field-summary-list" }, content);
+};
+var FieldSummaryList_default = FieldSummaryList;
+//# sourceMappingURL=index.js.map