@weavix/tracker-components 0.0.1

package/build/cjs/components/TrackerDisclosure/TrackerDisclosure.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrackerDisclosure = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@gravity-ui/icons");
+var _uikit = require("@gravity-ui/uikit");
+var _TrackerDisclosure = require("./TrackerDisclosure.classname");
+require("./TrackerDisclosure.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["children", "summary", "arrowPosition", "arrowSize", "className", "summaryClassName", "toggleClassName", "arrowClassName", "toolbar"],
+  _excluded2 = ["ariaControls", "expanded"];
+var TrackerDisclosure = exports.TrackerDisclosure = function TrackerDisclosure(_ref) {
+  var children = _ref.children,
+    summary = _ref.summary,
+    _ref$arrowPosition = _ref.arrowPosition,
+    arrowPosition = _ref$arrowPosition === void 0 ? 'end' : _ref$arrowPosition,
+    _ref$arrowSize = _ref.arrowSize,
+    arrowSize = _ref$arrowSize === void 0 ? 20 : _ref$arrowSize,
+    className = _ref.className,
+    summaryClassName = _ref.summaryClassName,
+    toggleClassName = _ref.toggleClassName,
+    arrowClassName = _ref.arrowClassName,
+    toolbar = _ref.toolbar,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Disclosure, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: (0, _TrackerDisclosure.cnTrackerDisclosure)(null, className)
+  }, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Disclosure.Summary, {
+      children: function children(props) {
+        var ariaControls = props.ariaControls,
+          expanded = props.expanded,
+          restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+        var collapseIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+          className: (0, _TrackerDisclosure.cnTrackerDisclosure)('collapse-icon', {
+            expanded: expanded
+          }, arrowClassName),
+          data: _icons.ChevronDown,
+          width: arrowSize,
+          height: arrowSize
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _TrackerDisclosure.cnTrackerDisclosure)('summary', {
+            expanded: expanded
+          }, summaryClassName),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+            type: "button",
+            className: (0, _TrackerDisclosure.cnTrackerDisclosure)('toggle', toggleClassName),
+            "aria-controls": ariaControls,
+            "aria-expanded": expanded
+          }, restProps), {}, {
+            children: [arrowPosition === 'start' && collapseIcon, summary, arrowPosition === 'end' && collapseIcon]
+          })), toolbar]
+        });
+      }
+    }), children]
+  }));
+};
+// #sourceMappingURL=TrackerDisclosure.js.map

package/build/cjs/components/TrackerDisclosure/TrackerDisclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_icons","_uikit","_TrackerDisclosure","_jsxRuntime","e","__esModule","default","TrackerDisclosure","exports","_ref","children","summary","_ref$arrowPosition","arrowPosition","_ref$arrowSize","arrowSize","className","summaryClassName","toggleClassName","arrowClassName","toolbar","props","_objectWithoutProperties","_excluded","_jsxs","Disclosure","_objectSpread","cnTrackerDisclosure","_jsx","Summary","ariaControls","expanded","restProps","_excluded2","collapseIcon","Icon","data","ChevronDown","width","height","type"],"sources":["TrackerDisclosure.tsx"],"sourcesContent":["import type {FC, ReactNode} from 'react';\nimport React from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport type {DisclosureProps} from '@gravity-ui/uikit';\nimport {Disclosure, Icon} from '@gravity-ui/uikit';\n\nimport {cnTrackerDisclosure} from './TrackerDisclosure.classname';\n\nimport './TrackerDisclosure.scss';\n\nexport type TrackerDisclosureProps = DisclosureProps & {\n    summaryClassName?: string;\n    toggleClassName?: string;\n    arrowClassName?: string;\n    arrowSize?: number;\n    toolbar?: ReactNode;\n};\n\nexport const TrackerDisclosure: FC<TrackerDisclosureProps> = ({\n    children,\n    summary,\n    arrowPosition = 'end',\n    arrowSize = 20,\n    className,\n    summaryClassName,\n    toggleClassName,\n    arrowClassName,\n    toolbar,\n    ...props\n}) => {\n    return (\n        <Disclosure className={cnTrackerDisclosure(null, className)} {...props}>\n            <Disclosure.Summary>\n                {(props) => {\n                    const {ariaControls, expanded, ...restProps} = props;\n\n                    const collapseIcon = (\n                        <Icon\n                            className={cnTrackerDisclosure(\n                                'collapse-icon',\n                                {\n                                    expanded: expanded,\n                                },\n                                arrowClassName,\n                            )}\n                            data={ChevronDown}\n                            width={arrowSize}\n                            height={arrowSize}\n                        />\n                    );\n\n                    return (\n                        <div\n                            className={cnTrackerDisclosure(\n                                'summary',\n                                {expanded: expanded},\n                                summaryClassName,\n                            )}\n                        >\n                            <button\n                                type=\"button\"\n                                className={cnTrackerDisclosure('toggle', toggleClassName)}\n                                aria-controls={ariaControls}\n                                aria-expanded={expanded}\n                                {...restProps}\n                            >\n                                {arrowPosition === 'start' && collapseIcon}\n                                {summary}\n                                {arrowPosition === 'end' && collapseIcon}\n                            </button>\n                            {toolbar}\n                        </div>\n                    );\n                }}\n            </Disclosure.Summary>\n            {children}\n        </Disclosure>\n    );\n};\n"],"mappings":";;;;;;;;AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,kBAAA,GAAAH,OAAA;AAEAA,OAAA;AAAkC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;;;AAU3B,IAAMG,iBAA6C,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAAhDA,iBAA6CA,CAAAE,IAAA,EAWpD;EAAA,IAVFC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAAC,kBAAA,GAAAH,IAAA,CACPI,aAAa;IAAbA,aAAa,GAAAD,kBAAA,cAAG,KAAK,GAAAA,kBAAA;IAAAE,cAAA,GAAAL,IAAA,CACrBM,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,EAAE,GAAAA,cAAA;IACdE,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTC,gBAAgB,GAAAR,IAAA,CAAhBQ,gBAAgB;IAChBC,eAAe,GAAAT,IAAA,CAAfS,eAAe;IACfC,cAAc,GAAAV,IAAA,CAAdU,cAAc;IACdC,OAAO,GAAAX,IAAA,CAAPW,OAAO;IACJC,KAAK,OAAAC,iCAAA,EAAAb,IAAA,EAAAc,SAAA;EAER,oBACI,IAAAC,gBAAA,EAACC,iBAAU,MAAAC,sBAAA,MAAAA,sBAAA;IAACV,SAAS,EAAE,IAAAW,sCAAmB,EAAC,IAAI,EAAEX,SAAS;EAAE,GAAKK,KAAK;IAAAX,QAAA,gBAClE,IAAAkB,eAAA,EAACH,iBAAU,CAACI,OAAO;MAAAnB,QAAA,EACd,SAAAA,SAACW,KAAK,EAAK;QACR,IAAOS,YAAY,GAA4BT,KAAK,CAA7CS,YAAY;UAAEC,QAAQ,GAAkBV,KAAK,CAA/BU,QAAQ;UAAKC,SAAS,OAAAV,iCAAA,EAAID,KAAK,EAAAY,UAAA;QAEpD,IAAMC,YAAY,gBACd,IAAAN,eAAA,EAACO,WAAI;UACDnB,SAAS,EAAE,IAAAW,sCAAmB,EAC1B,eAAe,EACf;YACII,QAAQ,EAAEA;UACd,CAAC,EACDZ,cACJ,CAAE;UACFiB,IAAI,EAAEC,kBAAY;UAClBC,KAAK,EAAEvB,SAAU;UACjBwB,MAAM,EAAExB;QAAU,CACrB,CACJ;QAED,oBACI,IAAAS,gBAAA;UACIR,SAAS,EAAE,IAAAW,sCAAmB,EAC1B,SAAS,EACT;YAACI,QAAQ,EAAEA;UAAQ,CAAC,EACpBd,gBACJ,CAAE;UAAAP,QAAA,gBAEF,IAAAc,gBAAA,gBAAAE,sBAAA,MAAAA,sBAAA;YACIc,IAAI,EAAC,QAAQ;YACbxB,SAAS,EAAE,IAAAW,sCAAmB,EAAC,QAAQ,EAAET,eAAe,CAAE;YAC1D,iBAAeY,YAAa;YAC5B,iBAAeC;UAAS,GACpBC,SAAS;YAAAtB,QAAA,GAEZG,aAAa,KAAK,OAAO,IAAIqB,YAAY,EACzCvB,OAAO,EACPE,aAAa,KAAK,KAAK,IAAIqB,YAAY;UAAA,EACpC,CAAC,EACRd,OAAO;QAAA,CACP,CAAC;MAEd;IAAC,CACe,CAAC,EACpBV,QAAQ;EAAA,EACD,CAAC;AAErB,CAAC","ignoreList":[]}

package/build/cjs/components/TrackerDisclosure/index.d.ts

@@ -0,0 +1,2 @@
+export { TrackerDisclosure } from './TrackerDisclosure';
+export type { TrackerDisclosureProps } from './TrackerDisclosure';

package/build/cjs/components/TrackerDisclosure/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TrackerDisclosure", {
+  enumerable: true,
+  get: function () {
+    return _TrackerDisclosure.TrackerDisclosure;
+  }
+});
+var _TrackerDisclosure = require("./TrackerDisclosure");
+// #sourceMappingURL=index.js.map

package/build/cjs/components/TrackerDisclosure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_TrackerDisclosure","require"],"sources":["index.ts"],"sourcesContent":["export {TrackerDisclosure} from './TrackerDisclosure';\nexport type {TrackerDisclosureProps} from './TrackerDisclosure';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA","ignoreList":[]}

package/build/cjs/components/TrackerSelect/TrackerSelect.classname.d.ts

@@ -0,0 +1 @@
+export declare const cnTrackerSelect: import("@bem-react/classname").ClassNameFormatter;

package/build/cjs/components/TrackerSelect/TrackerSelect.classname.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cnTrackerSelect = void 0;
+var _cn = require("../cn");
+var cnTrackerSelect = exports.cnTrackerSelect = (0, _cn.block)('tracker-select');
+// #sourceMappingURL=TrackerSelect.classname.js.map

package/build/cjs/components/TrackerSelect/TrackerSelect.classname.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_cn","require","cnTrackerSelect","exports","block"],"sources":["TrackerSelect.classname.ts"],"sourcesContent":["import {block} from '../cn';\n\nexport const cnTrackerSelect = block('tracker-select');\n"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,OAAA;AAEO,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,SAAK,EAAC,gBAAgB,CAAC","ignoreList":[]}

package/build/cjs/components/TrackerSelect/TrackerSelect.css

@@ -0,0 +1,277 @@
+.tpc-tracker-select {
+  --popup-max-height: 450px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 320px;
+  height: inherit;
+  max-height: 450px;
+  max-height: var(--popup-max-height);
+  transform: translateZ(0);
+}
+.tpc-tracker-select__actions {
+  padding: var(--g-spacing-1);
+}
+.tpc-tracker-select__body {
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+  height: -moz-max-content;
+  height: max-content;
+  min-height: 80px;
+  max-height: var(--popup-max-height);
+}
+.tpc-tracker-select__search {
+  box-sizing: border-box;
+  padding: 0 var(--g-spacing-4);
+  border-bottom: 1px solid var(--g-color-line-generic-solid);
+}
+.tpc-tracker-select__search.g-text-input_has-right-content {
+  padding-right: var(--g-spacing-1);
+}
+.tpc-tracker-select__loader {
+  padding: var(--g-spacing-4) 0;
+}
+.tpc-tracker-select__empty-text {
+  padding: var(--g-spacing-4);
+  margin: 0;
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height-rel);
+  color: var(--g-color-text-secondary);
+}
+.tpc-tracker-select__list {
+  flex: auto;
+  width: 100%;
+  height: -moz-max-content;
+  height: max-content;
+  padding: var(--g-spacing-1) 0;
+}
+.tpc-tracker-select__list .tpc-disclosure__toggle {
+  background: none;
+}
+.tpc-tracker-select__checkbox-icon_type_checkbox {
+  color: var(--g-color-text-info);
+}
+.tpc-tracker-select__checkbox-spacer {
+  display: inline-block;
+}
+.tpc-tracker-select__checkbox-icon, .tpc-tracker-select__checkbox-spacer {
+  flex: none;
+  width: 18px;
+  margin-right: var(--g-spacing-1);
+  margin-bottom: var(--g-spacing-half);
+}
+.tpc-tracker-select__list-item_info .tpc-tracker-select__list-item-info {
+  visibility: hidden;
+}
+.tpc-tracker-select__list-item-actions {
+  display: flex;
+  gap: var(--g-spacing-1);
+  align-items: center;
+  overflow: hidden;
+  width: 0;
+  height: 100%;
+  margin-left: auto;
+  opacity: 0;
+}
+.tpc-tracker-select__list-item-actions:has(.tpc-fields-select__help-tooltip[aria-expanded=true]) {
+  overflow: visible;
+  width: auto;
+  margin-right: var(--g-spacing-4);
+  opacity: 1;
+}
+.tpc-tracker-select__list-item-action {
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-color-text-hint);
+}
+.tpc-tracker-select__list-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  cursor: pointer;
+}
+.tpc-tracker-select__list-item_disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+.tpc-tracker-select__list-item_required {
+  cursor: default;
+}
+.tpc-tracker-select__list-item_required .tpc-tracker-select__checkbox-icon {
+  opacity: 0.3;
+}
+.tpc-tracker-select__list-item_system {
+  font-weight: 800;
+}
+.tpc-tracker-select__list-item-action_type_sort {
+  display: inline-flex;
+  cursor: grab;
+}
+.tpc-tracker-select__list-item_sorting {
+  cursor: grabbing;
+}
+.tpc-tracker-select__list-item:hover .tpc-tracker-select__list-item-actions, .tpc-tracker-select__list-item:focus-within .tpc-tracker-select__list-item-actions {
+  overflow: visible;
+  width: auto;
+  margin-right: var(--g-spacing-4);
+  opacity: 1;
+}
+.tpc-tracker-select__list-item_active, .tpc-tracker-select__list-item:not(.tpc-tracker-select__list-item_sorting):hover {
+  /* required for keyboard navigation */
+}
+.tpc-tracker-select__list-item_active::after, .tpc-tracker-select__list-item:not(.tpc-tracker-select__list-item_sorting):hover::after {
+  position: absolute;
+  z-index: -1; /* without it tooltips which attached to this list item are disappeared */
+  content: "";
+  background: var(--g-color-base-simple-hover);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.tpc-tracker-select__list-item_active .tpc-tracker-select__list-item-info, .tpc-tracker-select__list-item:not(.tpc-tracker-select__list-item_sorting):hover .tpc-tracker-select__list-item-info {
+  /* above '&::after' */
+  z-index: 2;
+  visibility: visible;
+}
+.tpc-tracker-select__list-item_active, .tpc-tracker-select__list-item:not(.tpc-tracker-select__list-item_sorting):hover {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tpc-tracker-select__list-item_active .tpc-tracker-select__list-item-action, .tpc-tracker-select__list-item:not(.tpc-tracker-select__list-item_sorting):hover .tpc-tracker-select__list-item-action {
+  /* above '&::after' */
+  z-index: 2;
+}
+.tpc-tracker-select__list-item_pinned .tpc-tracker-select__list-item-action_type_pin {
+  display: inline-flex;
+}
+.tpc-tracker-select__list-item-actions + .tpc-tracker-select__checkbox-icon, .tpc-tracker-select__list-item-actions + .tpc-tracker-select__checkbox-spacer {
+  margin-left: var(--g-spacing-2);
+}
+.tpc-tracker-select__list-item-wrapper {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  flex-grow: 1;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--g-spacing-4);
+}
+.tpc-tracker-select__list-item-content {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tpc-tracker-select__list-item_info .tpc-tracker-select__list-item-content {
+  display: flex;
+  flex-direction: row;
+  flex: auto;
+}
+.tpc-tracker-select__list-item-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tpc-tracker-select__list-item_info .tpc-tracker-select__list-item-text {
+  flex: auto;
+}
+.tpc-tracker-select__list-item-meta {
+  color: var(--g-color-text-secondary);
+}
+.tpc-tracker-select__group {
+  border-bottom: 1px solid var(--g-color-line-generic-solid);
+}
+.tpc-tracker-select__group_active .tpc-disclosure__summary {
+  background: var(--g-color-base-simple-hover);
+}
+.tpc-tracker-select__select-items .g-list__item {
+  position: relative;
+  padding: 0;
+}
+.tpc-tracker-select__select-items .g-list__item, .tpc-tracker-select__select-items .g-list__item-content {
+  overflow: visible;
+  min-width: 0;
+}
+.tpc-tracker-select__select-items .g-list__item_active {
+  background: inherit;
+}
+.tpc-tracker-select__select-items_single-select[class] .g-list__item .tpc-tracker-select__list-item_selected {
+  background: var(--g-color-base-selection);
+}
+.tpc-tracker-select__group-title {
+  padding: var(--g-spacing-3) var(--g-spacing-4);
+  margin: 0;
+  color: var(--g-color-text-hint);
+}
+.tpc-tracker-select__group-title + .tpc-tracker-select__select-items__list-item-content:first-child {
+  margin-left: calc(var(--g-spacing-5) + var(--g-spacing-half));
+}
+.tpc-tracker-select__collapse .g-arrow-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tpc-tracker-select__collapse .g-arrow-toggle svg {
+  width: 16px;
+  height: 16px;
+}
+.tpc-tracker-select__collapse-header[class][class] {
+  box-sizing: border-box;
+  padding-top: var(--g-spacing-2);
+  padding-bottom: var(--g-spacing-2);
+  padding-left: var(--g-spacing-4);
+  margin-bottom: 0;
+  font-family: var(--g-text-subheader-font-family);
+  font-size: var(--g-text-subheader-1-font-size);
+  font-weight: var(--g-text-subheader-font-weight);
+  line-height: var(--g-text-subheader-1-line-height-rel);
+}
+.tpc-tracker-select__collapse-header-icon {
+  color: var(--g-color-text-secondary);
+}
+.tpc-tracker-select__collapse:first-child, .tpc-tracker-select__group:first-child {
+  padding-top: 0;
+}
+.tpc-tracker-select__collapse:last-child, .tpc-tracker-select__group:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.tpc-tracker-select__named-section {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--g-spacing-2) var(--g-spacing-4);
+  font-family: var(--g-text-subheader-font-family);
+  font-size: var(--g-text-subheader-2-font-size);
+  font-weight: normal;
+  line-height: 1.25em;
+  color: var(--g-color-text-complementary);
+  background-color: var(--g-color-base-generic);
+}
+.tpc-tracker-select__collapse-group-title {
+  display: flex;
+  gap: var(--g-spacing-2);
+  align-items: center;
+}
+.tpc-tracker-select__list-item_view_meta-primary .tpc-tracker-select__list-item-text {
+  margin-bottom: var(--g-spacing-half);
+  color: var(--g-color-text-secondary);
+}
+.tpc-tracker-select__list-item_view_meta-primary .tpc-tracker-select__list-item-meta {
+  color: inherit;
+}
+.tpc-tracker-select__submit {
+  width: 100%;
+}
+.tpc-tracker-select__search-container {
+  padding: var(--g-spacing-2) var(--g-spacing-3);
+}
+
+.g-tooltip__content {
+  max-width: 320px;
+}
+/*# sourceMappingURL=TrackerSelect.css.map */

package/build/cjs/components/TrackerSelect/TrackerSelect.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TrackerSelect.scss"],"names":[],"mappings":"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","file":"TrackerSelect.css","sourcesContent":[".tpc-tracker-select {\n    --popup-max-height: 450px;\n\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n\n    width: 320px;\n    height: inherit;\n\n    max-height: var(--popup-max-height);\n\n    transform: translateZ(0);\n\n    &__actions {\n        padding: var(--g-spacing-1);\n    }\n\n    &__body {\n        display: flex;\n        justify-content: center;\n\n        overflow-y: auto;\n\n        height: max-content;\n        min-height: 80px;\n        max-height: var(--popup-max-height);\n    }\n\n    &__search {\n        box-sizing: border-box;\n        padding: 0 var(--g-spacing-4);\n\n        border-bottom: 1px solid var(--g-color-line-generic-solid);\n\n        &.g-text-input_has-right-content {\n            padding-right: var(--g-spacing-1);\n        }\n    }\n\n    &__loader {\n        padding: var(--g-spacing-4) 0;\n    }\n\n    &__empty-text {\n        padding: var(--g-spacing-4);\n        margin: 0;\n\n        font-size: var(--g-text-body-1-font-size);\n        line-height: var(--g-text-body-1-line-height-rel);\n\n        color: var(--g-color-text-secondary);\n    }\n\n    &__list {\n        flex: auto;\n\n        width: 100%;\n        height: max-content;\n\n        padding: var(--g-spacing-1) 0;\n\n        .tpc-disclosure__toggle {\n            background: none;\n        }\n    }\n\n    &__checkbox-icon_type_checkbox {\n        color: var(--g-color-text-info);\n    }\n\n    &__checkbox-spacer {\n        display: inline-block;\n    }\n\n    &__checkbox-icon,\n    &__checkbox-spacer {\n        flex: none;\n        width: 18px;\n        margin-right: var(--g-spacing-1);\n        margin-bottom: var(--g-spacing-half);\n    }\n\n    &__list-item_info &__list-item-info {\n        visibility: hidden;\n    }\n\n    &__list-item-actions {\n        display: flex;\n\n        gap: var(--g-spacing-1);\n        align-items: center;\n\n        overflow: hidden;\n\n        width: 0;\n\n        height: 100%;\n\n        margin-left: auto;\n\n        opacity: 0;\n    }\n\n    &__list-item-actions:has(.tpc-fields-select__help-tooltip[aria-expanded='true']) {\n        overflow: visible;\n\n        width: auto;\n\n        margin-right: var(--g-spacing-4);\n\n        opacity: 1;\n    }\n\n    &__list-item-action {\n        z-index: 2;\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--g-color-text-hint);\n    }\n\n    &__list-item {\n        display: flex;\n        align-items: center;\n\n        width: 100%;\n        min-width: 0;\n        height: 100%;\n\n        cursor: pointer;\n\n        &_disabled {\n            cursor: default;\n\n            opacity: 0.3;\n        }\n\n        &_required {\n            cursor: default;\n\n            .tpc-tracker-select__checkbox-icon {\n                opacity: 0.3;\n            }\n        }\n\n        &_system {\n            font-weight: 800;\n        }\n\n        &-action_type_sort {\n            display: inline-flex;\n\n            cursor: grab;\n        }\n\n        &_sorting {\n            cursor: grabbing;\n        }\n\n        &:hover,\n        &:focus-within {\n            .tpc-tracker-select__list-item-actions {\n                overflow: visible;\n\n                width: auto;\n\n                margin-right: var(--g-spacing-4);\n\n                opacity: 1;\n            }\n        }\n\n        &_active,\n        &:not(.tpc-tracker-select__list-item_sorting):hover {\n            /* required for keyboard navigation */\n            &::after {\n                position: absolute;\n                z-index: -1; /* without it tooltips which attached to this list item are disappeared */\n\n                content: '';\n\n                background: var(--g-color-base-simple-hover);\n                inset: 0;\n            }\n\n            .tpc-tracker-select__list-item-info {\n                /* above '&::after' */\n                z-index: 2;\n\n                visibility: visible;\n            }\n\n            /* stylelint-disable-next-line no-descending-specificity */\n            .tpc-tracker-select__list-item-action {\n                /* above '&::after' */\n                z-index: 2;\n            }\n        }\n\n        &_pinned {\n            .tpc-tracker-select__list-item-action_type_pin {\n                display: inline-flex;\n            }\n        }\n    }\n\n    &__list-item-actions + &__checkbox-icon,\n    &__list-item-actions + &__checkbox-spacer {\n        margin-left: var(--g-spacing-2);\n    }\n\n    &__list-item-wrapper {\n        display: flex;\n        align-items: center;\n        overflow: hidden;\n\n        flex-grow: 1;\n\n        width: 100%;\n        min-width: 0;\n        height: 100%;\n\n        padding: 0 var(--g-spacing-4);\n    }\n\n    &__list-item-content {\n        display: inline-flex;\n        flex-direction: column;\n\n        min-width: 0;\n    }\n\n    &__list-item_info &__list-item-content {\n        display: flex;\n        flex-direction: row;\n\n        flex: auto;\n    }\n\n    &__list-item-text {\n        overflow: hidden;\n\n        white-space: nowrap;\n\n        text-overflow: ellipsis;\n    }\n\n    &__list-item_info &__list-item-text {\n        flex: auto;\n    }\n\n    &__list-item-meta {\n        color: var(--g-color-text-secondary);\n    }\n\n    &__group {\n        border-bottom: 1px solid var(--g-color-line-generic-solid);\n\n        &_active .tpc-disclosure__summary {\n            background: var(--g-color-base-simple-hover);\n        }\n    }\n\n    &__select-items {\n        .g-list__item {\n            position: relative;\n\n            padding: 0;\n\n            &,\n            &-content {\n                overflow: visible;\n\n                min-width: 0;\n            }\n\n            &_active {\n                background: inherit;\n            }\n        }\n\n        &_single-select[class] {\n            .g-list__item .tpc-tracker-select__list-item {\n                &_selected {\n                    background: var(--g-color-base-selection);\n                }\n            }\n        }\n    }\n\n    &__group-title {\n        padding: var(--g-spacing-3) var(--g-spacing-4);\n        margin: 0;\n\n        color: var(--g-color-text-hint);\n\n        + .tpc-tracker-select__select-items {\n            &__list-item-content:first-child {\n                margin-left: calc(var(--g-spacing-5) + var(--g-spacing-half));\n            }\n        }\n    }\n\n    &__collapse {\n        .g-arrow-toggle {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .g-arrow-toggle svg {\n            width: 16px;\n            height: 16px;\n        }\n    }\n\n    &__collapse-header[class][class] {\n        box-sizing: border-box;\n        padding-top: var(--g-spacing-2);\n        padding-bottom: var(--g-spacing-2);\n        padding-left: var(--g-spacing-4);\n        margin-bottom: 0;\n\n        font-family: var(--g-text-subheader-font-family);\n\n        font-size: var(--g-text-subheader-1-font-size);\n        font-weight: var(--g-text-subheader-font-weight);\n        line-height: var(--g-text-subheader-1-line-height-rel);\n    }\n\n    &__collapse-header-icon {\n        color: var(--g-color-text-secondary);\n    }\n\n    &__collapse:first-child,\n    &__group:first-child {\n        padding-top: 0;\n    }\n\n    &__collapse:last-child,\n    &__group:last-child {\n        padding-bottom: 0;\n\n        border-bottom: none;\n    }\n\n    &__named-section {\n        box-sizing: border-box;\n        width: 100%;\n        padding: var(--g-spacing-2) var(--g-spacing-4);\n\n        font-family: var(--g-text-subheader-font-family);\n\n        font-size: var(--g-text-subheader-2-font-size);\n        font-weight: normal;\n        line-height: 1.25em;\n\n        color: var(--g-color-text-complementary);\n        background-color: var(--g-color-base-generic);\n    }\n\n    &__collapse-group-title {\n        display: flex;\n        gap: var(--g-spacing-2);\n        align-items: center;\n    }\n\n    &__list-item_view_meta-primary {\n        .tpc-tracker-select__list-item-text {\n            margin-bottom: var(--g-spacing-half);\n\n            color: var(--g-color-text-secondary);\n        }\n\n        .tpc-tracker-select__list-item-meta {\n            color: inherit;\n        }\n    }\n\n    &__submit {\n        width: 100%;\n    }\n\n    &__search-container {\n        padding: var(--g-spacing-2) var(--g-spacing-3);\n    }\n}\n\n.g-tooltip__content {\n    max-width: 320px;\n}\n"],"sourceRoot":""}

package/build/cjs/components/TrackerSelect/TrackerSelect.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { ItemsList } from './components/ItemsList';
+import type { TrackerSelectGroup, TrackerSelectItemValueBase } from './types';
+import './TrackerSelect.scss';
+export type TrackerSelectProps<Value extends TrackerSelectItemValueBase = TrackerSelectItemValueBase> = {
+    groups?: TrackerSelectGroup<Value>[];
+    onItemUnpin?: (id: string) => void;
+    onSearchChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onSubmit?: () => void;
+    onReset?: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    activeItemId?: string;
+    showSearch?: boolean;
+    showSubmit?: boolean;
+    showReset?: boolean;
+    submitButtonText?: string;
+    resetButtonText?: string;
+    popupClassName?: string;
+    className?: string;
+    subHeader?: ReactNode;
+    submitDisabled?: boolean;
+} & Parameters<typeof ItemsList>[0];
+export declare const TrackerSelect: <Value extends TrackerSelectItemValueBase>({ groups, onSubmit, onReset, open, onOpenChange, onSearchChange, showSearch, showSubmit, showReset, submitButtonText, resetButtonText, popupClassName, className, subHeader, submitDisabled, ...itemListProps }: TrackerSelectProps<Value>) => React.JSX.Element;

package/build/cjs/components/TrackerSelect/TrackerSelect.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrackerSelect = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.filter.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.iterator.reduce.js");
+require("core-js/modules/es.object.entries.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _uikit = require("@gravity-ui/uikit");
+var _useLocalizedString2 = require("./../../hooks/useLocalizedString");
+var _TrackerSelect = require("./TrackerSelect.classname");
+var _ItemsList = require("./components/ItemsList");
+var _Search = require("./components/Search");
+var _usePopupHeight = require("./hooks/usePopupHeight");
+var _useSubmitHotkey = require("./hooks/useSubmitHotkey");
+var _i18n = require("./i18n");
+require("./TrackerSelect.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["groups", "onSubmit", "onReset", "open", "onOpenChange", "onSearchChange", "showSearch", "showSubmit", "showReset", "submitButtonText", "resetButtonText", "popupClassName", "className", "subHeader", "submitDisabled"];
+var TrackerSelect = exports.TrackerSelect = function TrackerSelect(_ref) {
+  var groups = _ref.groups,
+    onSubmit = _ref.onSubmit,
+    onReset = _ref.onReset,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    onSearchChange = _ref.onSearchChange,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+    _ref$showSubmit = _ref.showSubmit,
+    showSubmit = _ref$showSubmit === void 0 ? true : _ref$showSubmit,
+    _ref$showReset = _ref.showReset,
+    showReset = _ref$showReset === void 0 ? false : _ref$showReset,
+    submitButtonText = _ref.submitButtonText,
+    resetButtonText = _ref.resetButtonText,
+    popupClassName = _ref.popupClassName,
+    className = _ref.className,
+    subHeader = _ref.subHeader,
+    _ref$submitDisabled = _ref.submitDisabled,
+    submitDisabled = _ref$submitDisabled === void 0 ? false : _ref$submitDisabled,
+    itemListProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _React$useState = _react.default.useState(''),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    searchValue = _React$useState2[0],
+    setSearchValue = _React$useState2[1];
+  var anchorRef = (0, _react.useRef)(null);
+  var config = (0, _uikit.getConfig)();
+  var _useLocalizedString = (0, _useLocalizedString2.useLocalizedString)(_i18n.defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var filteredGroups = (0, _react.useMemo)(function () {
+    if (!searchValue) {
+      return groups;
+    }
+    var lowerSearchValue = searchValue.toLowerCase();
+    return groups === null || groups === void 0 ? void 0 : groups.map(function (group) {
+      var _group$items;
+      var filteredItems = Object.entries((_group$items = group.items) !== null && _group$items !== void 0 ? _group$items : {}).reduce(function (res, _ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          key = _ref3[0],
+          item = _ref3[1];
+        if (item.display.toLowerCase().includes(lowerSearchValue)) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, res), {}, (0, _defineProperty2.default)({}, key, item));
+        }
+        return res;
+      }, {});
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
+        items: filteredItems
+      });
+    }).filter(function (group) {
+      var _group$items2;
+      return Object.keys((_group$items2 = group.items) !== null && _group$items2 !== void 0 ? _group$items2 : {}).length > 0;
+    });
+  }, [groups, searchValue]);
+  var handleSearchChange = (0, _react.useCallback)(function (event) {
+    setSearchValue(event.target.value);
+    onSearchChange === null || onSearchChange === void 0 || onSearchChange(event);
+  }, [onSearchChange]);
+  var handleOpenChange = (0, _react.useCallback)(function (newOpen) {
+    onOpenChange(newOpen);
+    if (!newOpen) {
+      setSearchValue('');
+    }
+  }, [onOpenChange]);
+  var handleSubmit = (0, _react.useCallback)(function () {
+    onSubmit === null || onSubmit === void 0 || onSubmit();
+    onOpenChange(false);
+  }, [onSubmit, onOpenChange]);
+  var handleReset = (0, _react.useCallback)(function () {
+    onReset === null || onReset === void 0 || onReset();
+    setSearchValue('');
+  }, [onReset]);
+  (0, _useSubmitHotkey.useSubmitHotkey)(handleSubmit, open);
+  var popupMaxHeight = (0, _usePopupHeight.usePopupHeight)(anchorRef, 'bottom-start');
+  var popupStyle = (0, _react.useMemo)(function () {
+    return {
+      maxHeight: popupMaxHeight ? "".concat(popupMaxHeight, "px") : 'auto'
+    };
+  }, [popupMaxHeight]);
+  var searchDesktop = (0, _react.useMemo)(function () {
+    return showSearch ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.Search, {
+      autoFocus: true,
+      value: searchValue,
+      onChange: handleSearchChange,
+      placeholder: t('searchPlaceholder')
+    }) : null;
+  }, [showSearch, searchValue, handleSearchChange, t]);
+  var itemList = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemsList.ItemsList, (0, _objectSpread2.default)({
+      groups: filteredGroups
+    }, itemListProps));
+  }, [filteredGroups, itemListProps]);
+  var popupContent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _TrackerSelect.cnTrackerSelect)(null, className),
+      children: [subHeader, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _TrackerSelect.cnTrackerSelect)('body'),
+        children: itemList
+      }), showSubmit && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _TrackerSelect.cnTrackerSelect)('actions'),
+        children: [showReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+          view: "flat",
+          size: "l",
+          className: (0, _TrackerSelect.cnTrackerSelect)('submit'),
+          width: "max",
+          onClick: handleReset,
+          children: resetButtonText || t('reset')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+          view: "action",
+          size: "l",
+          className: (0, _TrackerSelect.cnTrackerSelect)('submit'),
+          width: "max",
+          onClick: handleSubmit,
+          disabled: submitDisabled,
+          children: submitButtonText || t('submit')
+        })]
+      })]
+    });
+  }, [className, subHeader, itemList, showSubmit, showReset, handleSubmit, handleReset, submitButtonText, resetButtonText, submitDisabled, t]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: anchorRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Popup, {
+      open: open,
+      onOpenChange: handleOpenChange,
+      placement: "bottom-start",
+      className: (0, _TrackerSelect.cnTrackerSelect)(null, popupClassName),
+      anchorElement: anchorRef.current,
+      style: popupStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [searchDesktop, popupContent]
+      })
+    })
+  });
+};
+// #sourceMappingURL=TrackerSelect.js.map

package/build/cjs/components/TrackerSelect/TrackerSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_uikit","_useLocalizedString2","_TrackerSelect","_ItemsList","_Search","_usePopupHeight","_useSubmitHotkey","_i18n","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","TrackerSelect","exports","_ref","groups","onSubmit","onReset","open","onOpenChange","onSearchChange","_ref$showSearch","showSearch","_ref$showSubmit","showSubmit","_ref$showReset","showReset","submitButtonText","resetButtonText","popupClassName","className","subHeader","_ref$submitDisabled","submitDisabled","itemListProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","searchValue","setSearchValue","anchorRef","useRef","config","getConfig","_useLocalizedString","useLocalizedString","defaultMessages","lang","filteredGroups","useMemo","lowerSearchValue","toLowerCase","map","group","_group$items","filteredItems","entries","items","reduce","res","_ref2","_ref3","key","item","display","includes","_objectSpread","_defineProperty","filter","_group$items2","keys","length","handleSearchChange","useCallback","event","target","value","handleOpenChange","newOpen","handleSubmit","handleReset","useSubmitHotkey","popupMaxHeight","usePopupHeight","popupStyle","maxHeight","concat","searchDesktop","_jsx","Search","autoFocus","onChange","placeholder","itemList","ItemsList","popupContent","_jsxs","cnTrackerSelect","children","Button","view","size","width","onClick","disabled","ref","Popup","placement","anchorElement","current","style","_Fragment"],"sources":["TrackerSelect.tsx"],"sourcesContent":["import type {CSSProperties, ReactNode} from 'react';\nimport React, {useCallback, useMemo, useRef} from 'react';\n\nimport {Button, Popup, getConfig} from '@gravity-ui/uikit';\n\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport {cnTrackerSelect} from './TrackerSelect.classname';\nimport {ItemsList} from './components/ItemsList';\nimport {Search} from './components/Search';\nimport {usePopupHeight} from './hooks/usePopupHeight';\nimport {useSubmitHotkey} from './hooks/useSubmitHotkey';\nimport {defaultMessages} from './i18n';\nimport type {TrackerSelectGroup, TrackerSelectItemValueBase} from './types';\n\nimport './TrackerSelect.scss';\n\nexport type TrackerSelectProps<\n    Value extends TrackerSelectItemValueBase = TrackerSelectItemValueBase,\n> = {\n    groups?: TrackerSelectGroup<Value>[];\n    onItemUnpin?: (id: string) => void;\n    onSearchChange?: React.ChangeEventHandler<HTMLInputElement>;\n    onSubmit?: () => void;\n    onReset?: () => void;\n    open: boolean;\n    onOpenChange: (open: boolean) => void;\n    activeItemId?: string;\n    showSearch?: boolean;\n    showSubmit?: boolean;\n    showReset?: boolean;\n    submitButtonText?: string;\n    resetButtonText?: string;\n    popupClassName?: string;\n    className?: string;\n    subHeader?: ReactNode;\n    submitDisabled?: boolean;\n} & Parameters<typeof ItemsList>[0];\n\nexport const TrackerSelect = <Value extends TrackerSelectItemValueBase>({\n    groups,\n    onSubmit,\n    onReset,\n    open,\n    onOpenChange,\n    onSearchChange,\n    showSearch = true,\n    showSubmit = true,\n    showReset = false,\n    submitButtonText,\n    resetButtonText,\n    popupClassName,\n    className,\n    subHeader,\n    submitDisabled = false,\n    ...itemListProps\n}: TrackerSelectProps<Value>) => {\n    const [searchValue, setSearchValue] = React.useState('');\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const config = getConfig();\n    const {t} = useLocalizedString(defaultMessages, config.lang);\n\n    const filteredGroups = useMemo(() => {\n        if (!searchValue) {\n            return groups;\n        }\n\n        const lowerSearchValue = searchValue.toLowerCase();\n\n        return groups\n            ?.map((group) => {\n                const filteredItems = Object.entries(group.items ?? {}).reduce(\n                    (res, [key, item]) => {\n                        if (item.display.toLowerCase().includes(lowerSearchValue)) {\n                            return {...res, [key]: item};\n                        }\n                        return res;\n                    },\n                    {},\n                );\n\n                return {...group, items: filteredItems};\n            })\n            .filter((group) => Object.keys(group.items ?? {}).length > 0);\n    }, [groups, searchValue]);\n\n    const handleSearchChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            setSearchValue(event.target.value);\n            onSearchChange?.(event);\n        },\n        [onSearchChange],\n    );\n\n    const handleOpenChange = useCallback(\n        (newOpen: boolean) => {\n            onOpenChange(newOpen);\n            if (!newOpen) {\n                setSearchValue('');\n            }\n        },\n        [onOpenChange],\n    );\n\n    const handleSubmit = useCallback(() => {\n        onSubmit?.();\n        onOpenChange(false);\n    }, [onSubmit, onOpenChange]);\n\n    const handleReset = useCallback(() => {\n        onReset?.();\n        setSearchValue('');\n    }, [onReset]);\n\n    useSubmitHotkey(handleSubmit, open);\n\n    const popupMaxHeight = usePopupHeight(anchorRef, 'bottom-start');\n\n    const popupStyle: CSSProperties = useMemo(\n        () => ({\n            maxHeight: popupMaxHeight ? `${popupMaxHeight}px` : 'auto',\n        }),\n        [popupMaxHeight],\n    );\n\n    const searchDesktop = useMemo(() => {\n        return showSearch ? (\n            <Search\n                autoFocus={true}\n                value={searchValue}\n                onChange={handleSearchChange}\n                placeholder={t('searchPlaceholder')}\n            />\n        ) : null;\n    }, [showSearch, searchValue, handleSearchChange, t]);\n\n    const itemList = useMemo(() => {\n        return <ItemsList groups={filteredGroups} {...itemListProps} />;\n    }, [filteredGroups, itemListProps]);\n\n    const popupContent = useMemo(() => {\n        return (\n            <div className={cnTrackerSelect(null, className)}>\n                {subHeader}\n                <div className={cnTrackerSelect('body')}>{itemList}</div>\n                {showSubmit && (\n                    <div className={cnTrackerSelect('actions')}>\n                        {showReset && (\n                            <Button\n                                view=\"flat\"\n                                size=\"l\"\n                                className={cnTrackerSelect('submit')}\n                                width=\"max\"\n                                onClick={handleReset}\n                            >\n                                {resetButtonText || t('reset')}\n                            </Button>\n                        )}\n                        <Button\n                            view=\"action\"\n                            size=\"l\"\n                            className={cnTrackerSelect('submit')}\n                            width=\"max\"\n                            onClick={handleSubmit}\n                            disabled={submitDisabled}\n                        >\n                            {submitButtonText || t('submit')}\n                        </Button>\n                    </div>\n                )}\n            </div>\n        );\n    }, [\n        className,\n        subHeader,\n        itemList,\n        showSubmit,\n        showReset,\n        handleSubmit,\n        handleReset,\n        submitButtonText,\n        resetButtonText,\n        submitDisabled,\n        t,\n    ]);\n\n    return (\n        <div ref={anchorRef}>\n            <Popup\n                open={open}\n                onOpenChange={handleOpenChange}\n                placement=\"bottom-start\"\n                className={cnTrackerSelect(null, popupClassName)}\n                anchorElement={anchorRef.current}\n                style={popupStyle}\n            >\n                <>\n                    {searchDesktop}\n                    {popupContent}\n                </>\n            </Popup>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}