@elliemae/ds-query-builder 3.70.0-next.14 → 3.70.0-next.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,16 +35,72 @@ var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = __toESM(require("react"));
37
37
  var import_ds_classnames = require("@elliemae/ds-classnames");
38
- var import_ds_tooltip = require("@elliemae/ds-tooltip");
39
- var import_ds_legacy_popper = require("@elliemae/ds-legacy-popper");
38
+ var import_ds_floating_context = require("@elliemae/ds-floating-context");
39
+ var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
40
40
  var import_ds_legacy_form = require("@elliemae/ds-legacy-form");
41
- var import_ds_legacy_button_v1 = require("@elliemae/ds-legacy-button-v1");
41
+ var import_ds_legacy_button_v1 = __toESM(require("@elliemae/ds-legacy-button-v1"));
42
42
  var import_ds_icons = require("@elliemae/ds-icons");
43
43
  var import_ds_icon = require("@elliemae/ds-icon");
44
- var import_constants = require("../helpers/constants.js");
45
- var import_ToolBarAnimation = require("../ToolBarAnimation/ToolBarAnimation.js");
46
44
  var import_DragContainerController = __toESM(require("../DragContainerController/DragContainerController.js"));
47
45
  const { cssClassName, classNameBlock, classNameElement, mainModifier, classNameBlockModifier } = (0, import_ds_classnames.convertPropToCssClassName)("query-builder-and-or-controller");
46
+ const AndOrToolbarContent = ({
47
+ buttonActionType,
48
+ onAddFilter,
49
+ buttonActionSize,
50
+ allowUnGroup,
51
+ handleRuleContainerUnGroup,
52
+ condition,
53
+ labelOff,
54
+ labelOn,
55
+ handleRuleContainerOperator,
56
+ toogleActionSize
57
+ }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("actions"), children: [
58
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: "Add condition", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
59
+ import_ds_legacy_button_v1.default,
60
+ {
61
+ buttonType: buttonActionType,
62
+ className: classNameElement("add-rule"),
63
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.QueryAdd, {}),
64
+ onClick: onAddFilter,
65
+ size: buttonActionSize,
66
+ containerProps: { "data-testid": "query-add-button" }
67
+ }
68
+ ) }),
69
+ allowUnGroup && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: "Remove group", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
70
+ import_ds_legacy_button_v1.default,
71
+ {
72
+ buttonType: "text",
73
+ className: classNameElement("ungroup"),
74
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ParenthesisRemove, {}),
75
+ onClick: handleRuleContainerUnGroup,
76
+ size: buttonActionSize,
77
+ containerProps: { "data-testid": "parenthesis-remove-button" }
78
+ }
79
+ ) }),
80
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
81
+ import_ds_legacy_form.DSToggle,
82
+ {
83
+ checked: condition,
84
+ className: classNameElement("and-or-toggle"),
85
+ labelOff,
86
+ labelOn,
87
+ onChange: (e) => handleRuleContainerOperator(e.target.checked),
88
+ size: toogleActionSize,
89
+ containerProps: { "data-testid": "and-or-toggle-button" }
90
+ }
91
+ )
92
+ ] });
93
+ const AndOrFloatingToolbar = ({ isOpen, placement, toolbarProps, children }) => {
94
+ const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
95
+ externallyControlledIsOpen: isOpen,
96
+ placement,
97
+ customOffset: [0, 0]
98
+ });
99
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
100
+ children(refs.setReference),
101
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.FloatingWrapper, { innerRef: refs.setFloating, isOpen, floatingStyles, context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AndOrToolbarContent, { ...toolbarProps }) })
102
+ ] });
103
+ };
48
104
  class AndOrController extends import_react.Component {
49
105
  static defaultProps = {
50
106
  isMain: false,
@@ -61,37 +117,19 @@ class AndOrController extends import_react.Component {
61
117
  toogleActionSize: import_ds_icon.DSIconSizes.S,
62
118
  onAddFilter: () => null,
63
119
  multipleSize: false,
64
- delayClose: import_constants.DELAY_CLOSE,
65
- delayOpen: import_constants.DELAY_OPEN,
66
120
  step: null,
67
- toolBarAnimationDuration: import_constants.TOOLBAR_ANIMATION_DURATION,
68
- toolBarInteractionType: import_ds_legacy_popper.PopperInteractions.CLICK,
69
- toolBarPosition: import_ds_legacy_popper.PopperPositions.LEFT
121
+ toolBarPosition: "left"
70
122
  };
71
123
  constructor(props) {
72
124
  super(props);
73
- this.contenerRef = import_react.default.createRef();
74
125
  this.myRef = import_react.default.createRef();
75
126
  this.state = {
76
- isOpen: false,
77
- top: 0,
78
- right: -2
127
+ isOpen: false
79
128
  };
80
129
  }
81
130
  handleMouseEnterRow = (e) => {
82
131
  this.handleTooltipRow(true);
83
132
  };
84
- handleMouseMove = (e) => {
85
- if (!this.contenerRef.current) return;
86
- const mouse = e.clientY;
87
- const { height } = this.contenerRef.current.getBoundingClientRect();
88
- const delta = height / 2;
89
- const topDiff = this.myRef.current.getBoundingClientRect().top;
90
- const refHeight = this.myRef.current.getBoundingClientRect().height;
91
- this.setState({
92
- top: mouse - topDiff - refHeight / 2 - delta
93
- });
94
- };
95
133
  handleMouseLeaveRow = () => {
96
134
  this.handleTooltipRow(false);
97
135
  };
@@ -114,129 +152,52 @@ class AndOrController extends import_react.Component {
114
152
  toogleActionSize,
115
153
  onAddFilter,
116
154
  multipleSize,
117
- delayClose,
118
- delayOpen,
119
155
  step,
120
- toolBarAnimationDuration,
121
- toolBarInteractionType,
122
156
  toolBarPosition,
123
- isMain,
124
- toolTipZIndex
157
+ isMain
125
158
  } = this.props;
126
- const { isOpen, top, right } = this.state;
159
+ const { isOpen } = this.state;
160
+ const toolbarProps = {
161
+ buttonActionType,
162
+ onAddFilter,
163
+ buttonActionSize,
164
+ allowUnGroup,
165
+ handleRuleContainerUnGroup,
166
+ condition,
167
+ labelOff,
168
+ labelOn,
169
+ handleRuleContainerOperator,
170
+ toogleActionSize
171
+ };
127
172
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
128
173
  "div",
129
174
  {
130
175
  ref: this.myRef,
131
176
  className: `${cssClassName} ${mainModifier(condition ? "active" : "default")} step-${step} ${isMain ? "is-main-group-join" : ""}`,
132
177
  onMouseLeave: this.handleMouseLeaveRow,
133
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${classNameBlock("content")} step-${step}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
134
- import_ds_tooltip.DSTooltip,
178
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${classNameBlock("content")} step-${step}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AndOrFloatingToolbar, { isOpen, placement: toolBarPosition, toolbarProps, children: (setRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
179
+ "div",
135
180
  {
136
- delayClose,
137
- delayOpen,
138
- interactionType: toolBarInteractionType,
139
- isOpen,
140
- onOpen: this.handleTooltipRow,
141
- placement: toolBarPosition,
142
- springAnimationComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToolBarAnimation.ToolBarAnimation, { duration: toolBarAnimationDuration }),
143
- step,
144
- title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
145
- "div",
146
- {
147
- ref: this.contenerRef,
148
- className: classNameBlock("actions"),
149
- style: {
150
- transition: "0.2s",
151
- position: "absolute",
152
- top: `${top}px`,
153
- right: `${right}px`
154
- },
155
- children: [
156
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
157
- import_ds_tooltip.DSTooltip,
158
- {
159
- title: "Add condition",
160
- triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
161
- import_ds_legacy_button_v1.DSButton,
162
- {
163
- buttonType: buttonActionType,
164
- className: classNameElement("add-rule"),
165
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.QueryAdd, {}),
166
- onClick: onAddFilter,
167
- size: buttonActionSize,
168
- containerProps: {
169
- "data-testid": "query-add-button"
170
- }
171
- }
172
- )
173
- }
174
- ),
175
- allowUnGroup && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
176
- import_ds_tooltip.DSTooltip,
177
- {
178
- title: "Remove group",
179
- triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
180
- import_ds_legacy_button_v1.DSButton,
181
- {
182
- buttonType: "text",
183
- className: classNameElement("ungroup"),
184
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ParenthesisRemove, {}),
185
- onClick: handleRuleContainerUnGroup,
186
- size: buttonActionSize,
187
- containerProps: {
188
- "data-testid": "parenthesis-remove-button"
189
- }
190
- }
191
- )
192
- }
193
- ),
194
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
195
- import_ds_legacy_form.DSToggle,
196
- {
197
- checked: condition,
198
- className: classNameElement("and-or-toggle"),
199
- labelOff,
200
- labelOn,
201
- onChange: (e) => handleRuleContainerOperator(e.target.checked),
202
- size: toogleActionSize,
203
- containerProps: {
204
- "data-testid": "and-or-toggle-button"
205
- }
206
- }
207
- )
208
- ]
209
- }
210
- ),
211
- tooltipType: import_ds_tooltip.TooltipType.TOOLBAR,
212
- triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
213
- "div",
214
- {
215
- className: `${classNameBlock("trigger-controller")} ${showDragController ? classNameBlockModifier("draggable", "trigger-controller") : ""} step-${step}`,
216
- children: [
217
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameElement("condition-display"), children: [
218
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNameElement("condition-display-label"), children: condition ? labelOn : labelOff }),
219
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNameElement("condition-display-step"), children: step }),
220
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "separator" }),
221
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
222
- import_ds_icons.MoreOptionsVert,
223
- {
224
- color: import_ds_icon.DSIconColors.NEUTRAL,
225
- onClick: this.handleMouseEnterRow,
226
- size: import_ds_icon.DSIconSizes.S,
227
- containerProps: {
228
- "data-testid": "and-or-more-options-button"
229
- }
230
- }
231
- )
232
- ] }),
233
- showDragController && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DragContainerController.default, { multipleSize, onClick: this.handleMouseEnterRow })
234
- ]
235
- }
236
- ),
237
- zIndex: toolTipZIndex
181
+ className: `${classNameBlock("trigger-controller")} ${showDragController ? classNameBlockModifier("draggable", "trigger-controller") : ""} step-${step}`,
182
+ children: [
183
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameElement("condition-display"), children: [
184
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNameElement("condition-display-label"), children: condition ? labelOn : labelOff }),
185
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNameElement("condition-display-step"), children: step }),
186
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "separator" }),
187
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: setRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
188
+ import_ds_icons.MoreOptionsVert,
189
+ {
190
+ color: import_ds_icon.DSIconColors.NEUTRAL,
191
+ onClick: this.handleMouseEnterRow,
192
+ size: import_ds_icon.DSIconSizes.S,
193
+ containerProps: { "data-testid": "and-or-more-options-button" }
194
+ }
195
+ ) })
196
+ ] }),
197
+ showDragController && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DragContainerController.default, { multipleSize, onClick: this.handleMouseEnterRow })
198
+ ]
238
199
  }
239
- ) })
200
+ ) }) })
240
201
  }
241
202
  );
242
203
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/AndOrController/AndOrController.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable max-len */\nimport React, { Component } from 'react';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSTooltip, TooltipType } from '@elliemae/ds-tooltip';\nimport { PopperInteractions as Interaction, PopperPositions as Position } from '@elliemae/ds-legacy-popper';\nimport { DSToggle } from '@elliemae/ds-legacy-form';\nimport { DSButton } from '@elliemae/ds-legacy-button-v1';\nimport { ParenthesisRemove, MoreOptionsVert, QueryAdd } from '@elliemae/ds-icons';\nimport { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';\nimport { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from '../helpers/constants.js';\nimport { ToolBarAnimation } from '../ToolBarAnimation/ToolBarAnimation.js';\nimport DragContainerController from '../DragContainerController/DragContainerController.js';\n\nconst { cssClassName, classNameBlock, classNameElement, mainModifier, classNameBlockModifier } =\n convertPropToCssClassName('query-builder-and-or-controller');\n/**\n * condition-display-step: required to avoid the cache of the trigger\n * @param e\n * @param isOpen\n */\nclass AndOrController extends Component {\n static defaultProps = {\n isMain: false,\n handleRuleContainerOperator: () => null,\n handleRuleContainerUnGroup: () => null,\n handleTooltipGroup: () => null,\n labelOn: 'AND',\n labelOff: 'OR',\n condition: true,\n showDragController: true,\n allowUnGroup: true,\n buttonActionSize: DSIconSizes.M,\n buttonActionType: 'text',\n toogleActionSize: DSIconSizes.S,\n onAddFilter: () => null,\n multipleSize: false,\n delayClose: DELAY_CLOSE,\n delayOpen: DELAY_OPEN,\n step: null,\n toolBarAnimationDuration: TOOLBAR_ANIMATION_DURATION,\n toolBarInteractionType: Interaction.CLICK,\n toolBarPosition: Position.LEFT,\n };\n\n constructor(props) {\n super(props);\n this.contenerRef = React.createRef();\n this.myRef = React.createRef();\n this.state = {\n isOpen: false,\n top: 0,\n right: -2,\n };\n }\n\n handleMouseEnterRow = (e) => {\n this.handleTooltipRow(true);\n // this.handleMouseMove(e)\n };\n\n handleMouseMove = (e) => {\n if (!this.contenerRef.current) return;\n const mouse = e.clientY;\n const { height } = this.contenerRef.current.getBoundingClientRect();\n const delta = height / 2;\n const topDiff = this.myRef.current.getBoundingClientRect().top;\n const refHeight = this.myRef.current.getBoundingClientRect().height;\n\n this.setState({\n top: mouse - topDiff - refHeight / 2 - delta,\n });\n };\n\n handleMouseLeaveRow = () => {\n this.handleTooltipRow(false);\n };\n\n handleTooltipRow = (isOpen) => {\n this.setState({ isOpen });\n const { handleTooltipGroup } = this.props;\n handleTooltipGroup(isOpen);\n };\n\n render() {\n const {\n handleRuleContainerOperator,\n handleRuleContainerUnGroup,\n labelOn,\n labelOff,\n condition,\n showDragController,\n allowUnGroup,\n buttonActionSize,\n buttonActionType,\n toogleActionSize,\n onAddFilter,\n multipleSize,\n delayClose,\n delayOpen,\n step,\n toolBarAnimationDuration,\n toolBarInteractionType,\n toolBarPosition,\n isMain,\n toolTipZIndex,\n } = this.props;\n const { isOpen, top, right } = this.state;\n return (\n <div\n ref={this.myRef}\n className={`${cssClassName} ${mainModifier(condition ? 'active' : 'default')} step-${step} ${\n isMain ? 'is-main-group-join' : ''\n }`}\n // onMouseEnter={this.handleMouseEnterRow}\n onMouseLeave={this.handleMouseLeaveRow}\n // onMouseMove={this.handleMouseMove}\n >\n <div className={`${classNameBlock('content')} step-${step}`}>\n <DSTooltip\n delayClose={delayClose}\n delayOpen={delayOpen}\n interactionType={toolBarInteractionType}\n isOpen={isOpen}\n onOpen={this.handleTooltipRow}\n placement={toolBarPosition}\n springAnimationComponent={<ToolBarAnimation duration={toolBarAnimationDuration} />}\n step={step}\n title={\n <div\n ref={this.contenerRef}\n className={classNameBlock('actions')}\n style={{\n transition: '0.2s',\n position: 'absolute',\n top: `${top}px`,\n right: `${right}px`,\n }}\n >\n <DSTooltip\n title=\"Add condition\"\n triggerComponent={\n <DSButton\n buttonType={buttonActionType}\n className={classNameElement('add-rule')}\n icon={<QueryAdd />}\n onClick={onAddFilter}\n size={buttonActionSize}\n containerProps={{\n 'data-testid': 'query-add-button',\n }}\n />\n }\n />\n {allowUnGroup && (\n <DSTooltip\n title=\"Remove group\"\n triggerComponent={\n <DSButton\n buttonType=\"text\"\n className={classNameElement('ungroup')}\n icon={<ParenthesisRemove />}\n onClick={handleRuleContainerUnGroup}\n size={buttonActionSize}\n containerProps={{\n 'data-testid': 'parenthesis-remove-button',\n }}\n />\n }\n />\n )}\n <DSToggle\n checked={condition}\n className={classNameElement('and-or-toggle')}\n labelOff={labelOff}\n labelOn={labelOn}\n onChange={(e) => handleRuleContainerOperator(e.target.checked)}\n size={toogleActionSize}\n containerProps={{\n 'data-testid': 'and-or-toggle-button',\n }}\n />\n </div>\n }\n tooltipType={TooltipType.TOOLBAR}\n triggerComponent={\n <div\n className={`${classNameBlock('trigger-controller')} ${\n showDragController ? classNameBlockModifier('draggable', 'trigger-controller') : ''\n } step-${step}`}\n >\n <div className={classNameElement('condition-display')}>\n <span className={classNameElement('condition-display-label')}>{condition ? labelOn : labelOff}</span>\n <span className={classNameElement('condition-display-step')}>{step}</span>\n <div className=\"separator\" />\n <MoreOptionsVert\n color={DSIconColors.NEUTRAL}\n onClick={this.handleMouseEnterRow}\n size={DSIconSizes.S}\n containerProps={{\n 'data-testid': 'and-or-more-options-button',\n }}\n />\n </div>\n {showDragController && (\n <DragContainerController multipleSize={multipleSize} onClick={this.handleMouseEnterRow} />\n )}\n </div>\n }\n zIndex={toolTipZIndex}\n />\n </div>\n </div>\n );\n }\n}\n\nexport default AndOrController;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
6
- "names": ["Interaction", "Position", "React", "DragContainerController"]
4
+ "sourcesContent": ["/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport React, { Component } from 'react';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSToggle } from '@elliemae/ds-legacy-form';\nimport DSButton from '@elliemae/ds-legacy-button-v1';\nimport { ParenthesisRemove, MoreOptionsVert, QueryAdd } from '@elliemae/ds-icons';\nimport { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';\nimport DragContainerController from '../DragContainerController/DragContainerController.js';\n\nconst { cssClassName, classNameBlock, classNameElement, mainModifier, classNameBlockModifier } =\n convertPropToCssClassName('query-builder-and-or-controller');\n\nconst AndOrToolbarContent = ({\n buttonActionType,\n onAddFilter,\n buttonActionSize,\n allowUnGroup,\n handleRuleContainerUnGroup,\n condition,\n labelOff,\n labelOn,\n handleRuleContainerOperator,\n toogleActionSize,\n}: Record<string, any>) => (\n <div className={classNameBlock('actions')}>\n <DSTooltipV3 text=\"Add condition\">\n <DSButton\n buttonType={buttonActionType}\n className={classNameElement('add-rule')}\n icon={<QueryAdd />}\n onClick={onAddFilter}\n size={buttonActionSize}\n containerProps={{ 'data-testid': 'query-add-button' }}\n />\n </DSTooltipV3>\n {allowUnGroup && (\n <DSTooltipV3 text=\"Remove group\">\n <DSButton\n buttonType=\"text\"\n className={classNameElement('ungroup')}\n icon={<ParenthesisRemove />}\n onClick={handleRuleContainerUnGroup}\n size={buttonActionSize}\n containerProps={{ 'data-testid': 'parenthesis-remove-button' }}\n />\n </DSTooltipV3>\n )}\n <DSToggle\n checked={condition}\n className={classNameElement('and-or-toggle')}\n labelOff={labelOff}\n labelOn={labelOn}\n onChange={(e) => handleRuleContainerOperator(e.target.checked)}\n size={toogleActionSize}\n containerProps={{ 'data-testid': 'and-or-toggle-button' }}\n />\n </div>\n);\n\nconst AndOrFloatingToolbar = ({ isOpen, placement, toolbarProps, children }) => {\n const { refs, floatingStyles, context } = useFloatingContext({\n externallyControlledIsOpen: isOpen,\n placement,\n customOffset: [0, 0],\n });\n\n return (\n <>\n {children(refs.setReference)}\n <FloatingWrapper innerRef={refs.setFloating} isOpen={isOpen} floatingStyles={floatingStyles} context={context}>\n <AndOrToolbarContent {...toolbarProps} />\n </FloatingWrapper>\n </>\n );\n};\n\n/**\n * condition-display-step: required to avoid the cache of the trigger\n * @param e\n * @param isOpen\n */\nclass AndOrController extends Component {\n static defaultProps = {\n isMain: false,\n handleRuleContainerOperator: () => null,\n handleRuleContainerUnGroup: () => null,\n handleTooltipGroup: () => null,\n labelOn: 'AND',\n labelOff: 'OR',\n condition: true,\n showDragController: true,\n allowUnGroup: true,\n buttonActionSize: DSIconSizes.M,\n buttonActionType: 'text',\n toogleActionSize: DSIconSizes.S,\n onAddFilter: () => null,\n multipleSize: false,\n step: null,\n toolBarPosition: 'left',\n };\n\n constructor(props) {\n super(props);\n this.myRef = React.createRef();\n this.state = {\n isOpen: false,\n };\n }\n\n handleMouseEnterRow = (e) => {\n this.handleTooltipRow(true);\n };\n\n handleMouseLeaveRow = () => {\n this.handleTooltipRow(false);\n };\n\n handleTooltipRow = (isOpen) => {\n this.setState({ isOpen });\n const { handleTooltipGroup } = this.props;\n handleTooltipGroup(isOpen);\n };\n\n render() {\n const {\n handleRuleContainerOperator,\n handleRuleContainerUnGroup,\n labelOn,\n labelOff,\n condition,\n showDragController,\n allowUnGroup,\n buttonActionSize,\n buttonActionType,\n toogleActionSize,\n onAddFilter,\n multipleSize,\n step,\n toolBarPosition,\n isMain,\n } = this.props;\n const { isOpen } = this.state;\n\n const toolbarProps = {\n buttonActionType,\n onAddFilter,\n buttonActionSize,\n allowUnGroup,\n handleRuleContainerUnGroup,\n condition,\n labelOff,\n labelOn,\n handleRuleContainerOperator,\n toogleActionSize,\n };\n\n return (\n <div\n ref={this.myRef}\n className={`${cssClassName} ${mainModifier(condition ? 'active' : 'default')} step-${step} ${\n isMain ? 'is-main-group-join' : ''\n }`}\n onMouseLeave={this.handleMouseLeaveRow}\n >\n <div className={`${classNameBlock('content')} step-${step}`}>\n <AndOrFloatingToolbar isOpen={isOpen} placement={toolBarPosition} toolbarProps={toolbarProps}>\n {(setRef) => (\n <div\n className={`${classNameBlock('trigger-controller')} ${\n showDragController ? classNameBlockModifier('draggable', 'trigger-controller') : ''\n } step-${step}`}\n >\n <div className={classNameElement('condition-display')}>\n <span className={classNameElement('condition-display-label')}>{condition ? labelOn : labelOff}</span>\n <span className={classNameElement('condition-display-step')}>{step}</span>\n <div className=\"separator\" />\n <span ref={setRef}>\n <MoreOptionsVert\n color={DSIconColors.NEUTRAL}\n onClick={this.handleMouseEnterRow}\n size={DSIconSizes.S}\n containerProps={{ 'data-testid': 'and-or-more-options-button' }}\n />\n </span>\n </div>\n {showDragController && (\n <DragContainerController multipleSize={multipleSize} onClick={this.handleMouseEnterRow} />\n )}\n </div>\n )}\n </AndOrFloatingToolbar>\n </div>\n </div>\n );\n }\n}\n\nexport default AndOrController;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
+ "names": ["DSButton", "React", "DragContainerController"]
7
7
  }
@@ -34,115 +34,96 @@ module.exports = __toCommonJS(ConditionController_exports);
34
34
  var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_ds_classnames = require("@elliemae/ds-classnames");
37
- var import_ds_tooltip = require("@elliemae/ds-tooltip");
38
- var import_ds_legacy_popper = require("@elliemae/ds-legacy-popper");
37
+ var import_ds_floating_context = require("@elliemae/ds-floating-context");
38
+ var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
39
39
  var import_ds_icon = require("@elliemae/ds-icon");
40
40
  var import_ds_icons = require("@elliemae/ds-icons");
41
41
  var import_ds_legacy_button_v1 = require("@elliemae/ds-legacy-button-v1");
42
- var import_ToolBarAnimation = require("../ToolBarAnimation/ToolBarAnimation.js");
43
- var import_constants = require("../helpers/constants.js");
42
+ const ConditionToolbarContent = ({
43
+ classNameBlock,
44
+ classNameElement,
45
+ onRemoveFilter,
46
+ onAddFilter,
47
+ onAddRuleContainer,
48
+ buttonActionType,
49
+ buttonActionSize
50
+ }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("actions"), children: [
51
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: "Remove condition", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
52
+ import_ds_legacy_button_v1.DSButton,
53
+ {
54
+ buttonType: buttonActionType,
55
+ className: classNameElement("remove-rule"),
56
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.QueryRemove, {}),
57
+ onClick: onRemoveFilter,
58
+ size: buttonActionSize,
59
+ containerProps: { "data-testid": "query-remove-button" }
60
+ }
61
+ ) }),
62
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: "Add condition", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
63
+ import_ds_legacy_button_v1.DSButton,
64
+ {
65
+ buttonType: buttonActionType,
66
+ className: classNameElement("add-rule"),
67
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.QueryAdd, {}),
68
+ onClick: onAddFilter,
69
+ size: buttonActionSize,
70
+ containerProps: { "data-testid": "query-add-button" }
71
+ }
72
+ ) }),
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: "Add group", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_ds_legacy_button_v1.DSButton,
75
+ {
76
+ buttonType: buttonActionType,
77
+ className: `${classNameElement("add-rule-container")} no-border-right`,
78
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ParenthesisAdd, {}),
79
+ onClick: onAddRuleContainer,
80
+ size: buttonActionSize,
81
+ containerProps: { "data-testid": "parenthesis-add-button" }
82
+ }
83
+ ) })
84
+ ] });
44
85
  const ConditionController = ({
45
86
  onAddFilter = () => null,
46
87
  onAddRuleContainer = () => null,
47
88
  onRemoveFilter = () => null,
48
- handleTooltipRow = () => null,
89
+ handleTooltipRow = (() => null),
49
90
  buttonTriggerSize = import_ds_icon.DSIconSizes.M,
50
91
  buttonTriggerType = "text",
51
92
  buttonActionSize = import_ds_icon.DSIconSizes.M,
52
93
  buttonActionType = "text",
53
- delayClose = import_constants.DELAY_CLOSE,
54
- delayOpen = import_constants.DELAY_OPEN,
55
- isOpen = false,
56
- toolTipZIndex
94
+ isOpen = false
57
95
  }) => {
58
96
  const { cssClassName, classNameBlock, classNameElement } = (0, import_ds_classnames.convertPropToCssClassName)(
59
97
  "query-builder-condition-controller"
60
98
  );
61
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cssClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
- import_ds_tooltip.DSTooltip,
63
- {
64
- delayClose,
65
- delayOpen,
66
- interactionType: import_ds_legacy_popper.PopperInteractions.CLICK,
67
- isOpen,
68
- onOpen: handleTooltipRow,
69
- placement: import_ds_legacy_popper.PopperPositions.LEFT,
70
- springAnimationComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToolBarAnimation.ToolBarAnimation, { duration: import_constants.TOOLBAR_ANIMATION_DURATION }),
71
- title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("actions"), children: [
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
73
- import_ds_tooltip.DSTooltip,
74
- {
75
- title: "Remove condition",
76
- triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
77
- import_ds_legacy_button_v1.DSButton,
78
- {
79
- buttonType: buttonActionType,
80
- className: classNameElement("remove-rule"),
81
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.QueryRemove, {}),
82
- onClick: onRemoveFilter,
83
- size: buttonActionSize,
84
- containerProps: {
85
- "data-testid": "query-remove-button"
86
- }
87
- }
88
- )
89
- }
90
- ),
91
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
92
- import_ds_tooltip.DSTooltip,
93
- {
94
- title: "Add condition",
95
- triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
96
- import_ds_legacy_button_v1.DSButton,
97
- {
98
- buttonType: buttonActionType,
99
- className: classNameElement("add-rule"),
100
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.QueryAdd, {}),
101
- onClick: onAddFilter,
102
- size: buttonActionSize,
103
- containerProps: {
104
- "data-testid": "query-add-button"
105
- }
106
- }
107
- )
108
- }
109
- ),
110
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
111
- import_ds_tooltip.DSTooltip,
112
- {
113
- title: "Add group",
114
- triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
- import_ds_legacy_button_v1.DSButton,
116
- {
117
- buttonType: buttonActionType,
118
- className: `${classNameElement("add-rule-container")} no-border-right`,
119
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ParenthesisAdd, {}),
120
- onClick: onAddRuleContainer,
121
- size: buttonActionSize,
122
- containerProps: {
123
- "data-testid": "parenthesis-add-button"
124
- }
125
- }
126
- )
127
- }
128
- )
129
- ] }),
130
- tooltipType: import_ds_tooltip.TooltipType.TOOLBAR,
131
- triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
132
- import_ds_legacy_button_v1.DSButton,
133
- {
134
- buttonType: buttonTriggerType,
135
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { color: ["neutral", "500"] }),
136
- onClick: handleTooltipRow,
137
- size: buttonTriggerSize,
138
- containerProps: {
139
- "data-testid": "condition-more-options-button"
140
- }
141
- }
142
- ),
143
- zIndex: toolTipZIndex
144
- }
145
- ) });
99
+ const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
100
+ externallyControlledIsOpen: isOpen,
101
+ placement: "left"
102
+ });
103
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cssClassName, children: [
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
105
+ import_ds_legacy_button_v1.DSButton,
106
+ {
107
+ buttonType: buttonTriggerType,
108
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { color: ["neutral", "500"] }),
109
+ onClick: () => handleTooltipRow(!isOpen),
110
+ size: buttonTriggerSize,
111
+ containerProps: { "data-testid": "condition-more-options-button", ref: refs.setReference }
112
+ }
113
+ ),
114
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.FloatingWrapper, { innerRef: refs.setFloating, isOpen, floatingStyles, context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
+ ConditionToolbarContent,
116
+ {
117
+ classNameBlock,
118
+ classNameElement,
119
+ onRemoveFilter,
120
+ onAddFilter,
121
+ onAddRuleContainer,
122
+ buttonActionType,
123
+ buttonActionSize
124
+ }
125
+ ) })
126
+ ] });
146
127
  };
147
128
  var ConditionController_default = ConditionController;
148
129
  //# sourceMappingURL=ConditionController.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/ConditionController/ConditionController.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSTooltip, TooltipType } from '@elliemae/ds-tooltip';\nimport { PopperInteractions as Interaction, PopperPositions as Position } from '@elliemae/ds-legacy-popper';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { QueryRemove, MoreOptionsVert, QueryAdd, ParenthesisAdd } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-legacy-button-v1';\nimport { ToolBarAnimation } from '../ToolBarAnimation/ToolBarAnimation.js';\nimport { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from '../helpers/constants.js';\n\nconst ConditionController = ({\n onAddFilter = () => null,\n onAddRuleContainer = () => null,\n onRemoveFilter = () => null,\n handleTooltipRow = () => null,\n buttonTriggerSize = DSIconSizes.M,\n buttonTriggerType = 'text',\n buttonActionSize = DSIconSizes.M,\n buttonActionType = 'text',\n delayClose = DELAY_CLOSE,\n delayOpen = DELAY_OPEN,\n isOpen = false,\n toolTipZIndex,\n}) => {\n const { cssClassName, classNameBlock, classNameElement } = convertPropToCssClassName(\n 'query-builder-condition-controller',\n );\n return (\n <div className={cssClassName}>\n <DSTooltip\n delayClose={delayClose}\n delayOpen={delayOpen}\n interactionType={Interaction.CLICK}\n isOpen={isOpen}\n onOpen={handleTooltipRow}\n placement={Position.LEFT}\n springAnimationComponent={<ToolBarAnimation duration={TOOLBAR_ANIMATION_DURATION} />}\n title={\n <div className={classNameBlock('actions')}>\n <DSTooltip\n title=\"Remove condition\"\n triggerComponent={\n <DSButton\n buttonType={buttonActionType}\n className={classNameElement('remove-rule')}\n icon={<QueryRemove />}\n onClick={onRemoveFilter}\n size={buttonActionSize}\n containerProps={{\n 'data-testid': 'query-remove-button',\n }}\n />\n }\n />\n\n <DSTooltip\n title=\"Add condition\"\n triggerComponent={\n <DSButton\n buttonType={buttonActionType}\n className={classNameElement('add-rule')}\n icon={<QueryAdd />}\n onClick={onAddFilter}\n size={buttonActionSize}\n containerProps={{\n 'data-testid': 'query-add-button',\n }}\n />\n }\n />\n\n <DSTooltip\n title=\"Add group\"\n triggerComponent={\n <DSButton\n buttonType={buttonActionType}\n className={`${classNameElement('add-rule-container')} no-border-right`}\n icon={<ParenthesisAdd />}\n onClick={onAddRuleContainer}\n size={buttonActionSize}\n containerProps={{\n 'data-testid': 'parenthesis-add-button',\n }}\n />\n }\n />\n </div>\n }\n tooltipType={TooltipType.TOOLBAR}\n triggerComponent={\n <DSButton\n buttonType={buttonTriggerType}\n icon={<MoreOptionsVert color={['neutral', '500']} />}\n onClick={handleTooltipRow}\n size={buttonTriggerSize}\n containerProps={{\n 'data-testid': 'condition-more-options-button',\n }}\n />\n }\n zIndex={toolTipZIndex}\n />\n </div>\n );\n};\n\nexport default ConditionController;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCW;AAnClC,2BAA0C;AAC1C,wBAAuC;AACvC,8BAA+E;AAC/E,qBAA4B;AAC5B,sBAAuE;AACvE,iCAAyB;AACzB,8BAAiC;AACjC,uBAAoE;AAEpE,MAAM,sBAAsB,CAAC;AAAA,EAC3B,cAAc,MAAM;AAAA,EACpB,qBAAqB,MAAM;AAAA,EAC3B,iBAAiB,MAAM;AAAA,EACvB,mBAAmB,MAAM;AAAA,EACzB,oBAAoB,2BAAY;AAAA,EAChC,oBAAoB;AAAA,EACpB,mBAAmB,2BAAY;AAAA,EAC/B,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AACF,MAAM;AACJ,QAAM,EAAE,cAAc,gBAAgB,iBAAiB,QAAI;AAAA,IACzD;AAAA,EACF;AACA,SACE,4CAAC,SAAI,WAAW,cACd;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,wBAAAA,mBAAY;AAAA,MAC7B;AAAA,MACA,QAAQ;AAAA,MACR,WAAW,wBAAAC,gBAAS;AAAA,MACpB,0BAA0B,4CAAC,4CAAiB,UAAU,6CAA4B;AAAA,MAClF,OACE,6CAAC,SAAI,WAAW,eAAe,SAAS,GACtC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,kBACE;AAAA,cAAC;AAAA;AAAA,gBACC,YAAY;AAAA,gBACZ,WAAW,iBAAiB,aAAa;AAAA,gBACzC,MAAM,4CAAC,+BAAY;AAAA,gBACnB,SAAS;AAAA,gBACT,MAAM;AAAA,gBACN,gBAAgB;AAAA,kBACd,eAAe;AAAA,gBACjB;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,kBACE;AAAA,cAAC;AAAA;AAAA,gBACC,YAAY;AAAA,gBACZ,WAAW,iBAAiB,UAAU;AAAA,gBACtC,MAAM,4CAAC,4BAAS;AAAA,gBAChB,SAAS;AAAA,gBACT,MAAM;AAAA,gBACN,gBAAgB;AAAA,kBACd,eAAe;AAAA,gBACjB;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,kBACE;AAAA,cAAC;AAAA;AAAA,gBACC,YAAY;AAAA,gBACZ,WAAW,GAAG,iBAAiB,oBAAoB,CAAC;AAAA,gBACpD,MAAM,4CAAC,kCAAe;AAAA,gBACtB,SAAS;AAAA,gBACT,MAAM;AAAA,gBACN,gBAAgB;AAAA,kBACd,eAAe;AAAA,gBACjB;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,SACF;AAAA,MAEF,aAAa,8BAAY;AAAA,MACzB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ,MAAM,4CAAC,mCAAgB,OAAO,CAAC,WAAW,KAAK,GAAG;AAAA,UAClD,SAAS;AAAA,UACT,MAAM;AAAA,UACN,gBAAgB;AAAA,YACd,eAAe;AAAA,UACjB;AAAA;AAAA,MACF;AAAA,MAEF,QAAQ;AAAA;AAAA,EACV,GACF;AAEJ;AAEA,IAAO,8BAAQ;",
6
- "names": ["Interaction", "Position"]
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/unbound-method */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { QueryRemove, MoreOptionsVert, QueryAdd, ParenthesisAdd } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-legacy-button-v1';\n\nconst ConditionToolbarContent = ({\n classNameBlock,\n classNameElement,\n onRemoveFilter,\n onAddFilter,\n onAddRuleContainer,\n buttonActionType,\n buttonActionSize,\n}: Record<string, any>) => (\n <div className={classNameBlock('actions')}>\n <DSTooltipV3 text=\"Remove condition\">\n <DSButton\n buttonType={buttonActionType}\n className={classNameElement('remove-rule')}\n icon={<QueryRemove />}\n onClick={onRemoveFilter}\n size={buttonActionSize}\n containerProps={{ 'data-testid': 'query-remove-button' }}\n />\n </DSTooltipV3>\n\n <DSTooltipV3 text=\"Add condition\">\n <DSButton\n buttonType={buttonActionType}\n className={classNameElement('add-rule')}\n icon={<QueryAdd />}\n onClick={onAddFilter}\n size={buttonActionSize}\n containerProps={{ 'data-testid': 'query-add-button' }}\n />\n </DSTooltipV3>\n\n <DSTooltipV3 text=\"Add group\">\n <DSButton\n buttonType={buttonActionType}\n className={`${classNameElement('add-rule-container')} no-border-right`}\n icon={<ParenthesisAdd />}\n onClick={onAddRuleContainer}\n size={buttonActionSize}\n containerProps={{ 'data-testid': 'parenthesis-add-button' }}\n />\n </DSTooltipV3>\n </div>\n);\n\nconst ConditionController = ({\n onAddFilter = () => null,\n onAddRuleContainer = () => null,\n onRemoveFilter = () => null,\n handleTooltipRow = (() => null) as (isOpen?: boolean) => null,\n buttonTriggerSize = DSIconSizes.M,\n buttonTriggerType = 'text',\n buttonActionSize = DSIconSizes.M,\n buttonActionType = 'text',\n isOpen = false,\n}) => {\n const { cssClassName, classNameBlock, classNameElement } = convertPropToCssClassName(\n 'query-builder-condition-controller',\n );\n\n const { refs, floatingStyles, context } = useFloatingContext({\n externallyControlledIsOpen: isOpen,\n placement: 'left',\n });\n\n return (\n <div className={cssClassName}>\n <DSButton\n buttonType={buttonTriggerType}\n icon={<MoreOptionsVert color={['neutral', '500']} />}\n onClick={() => handleTooltipRow(!isOpen)}\n size={buttonTriggerSize}\n containerProps={{ 'data-testid': 'condition-more-options-button', ref: refs.setReference }}\n />\n <FloatingWrapper innerRef={refs.setFloating} isOpen={isOpen} floatingStyles={floatingStyles} context={context}>\n <ConditionToolbarContent\n classNameBlock={classNameBlock}\n classNameElement={classNameElement}\n onRemoveFilter={onRemoveFilter}\n onAddFilter={onAddFilter}\n onAddRuleContainer={onAddRuleContainer}\n buttonActionType={buttonActionType}\n buttonActionSize={buttonActionSize}\n />\n </FloatingWrapper>\n </div>\n );\n};\n\nexport default ConditionController;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBrB;AAhBF,2BAA0C;AAC1C,iCAAoD;AACpD,2BAA4B;AAC5B,qBAA4B;AAC5B,sBAAuE;AACvE,iCAAyB;AAEzB,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6CAAC,SAAI,WAAW,eAAe,SAAS,GACtC;AAAA,8CAAC,oCAAY,MAAK,oBAChB;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,WAAW,iBAAiB,aAAa;AAAA,MACzC,MAAM,4CAAC,+BAAY;AAAA,MACnB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,gBAAgB,EAAE,eAAe,sBAAsB;AAAA;AAAA,EACzD,GACF;AAAA,EAEA,4CAAC,oCAAY,MAAK,iBAChB;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,WAAW,iBAAiB,UAAU;AAAA,MACtC,MAAM,4CAAC,4BAAS;AAAA,MAChB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,gBAAgB,EAAE,eAAe,mBAAmB;AAAA;AAAA,EACtD,GACF;AAAA,EAEA,4CAAC,oCAAY,MAAK,aAChB;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,WAAW,GAAG,iBAAiB,oBAAoB,CAAC;AAAA,MACpD,MAAM,4CAAC,kCAAe;AAAA,MACtB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,gBAAgB,EAAE,eAAe,yBAAyB;AAAA;AAAA,EAC5D,GACF;AAAA,GACF;AAGF,MAAM,sBAAsB,CAAC;AAAA,EAC3B,cAAc,MAAM;AAAA,EACpB,qBAAqB,MAAM;AAAA,EAC3B,iBAAiB,MAAM;AAAA,EACvB,oBAAoB,MAAM;AAAA,EAC1B,oBAAoB,2BAAY;AAAA,EAChC,oBAAoB;AAAA,EACpB,mBAAmB,2BAAY;AAAA,EAC/B,mBAAmB;AAAA,EACnB,SAAS;AACX,MAAM;AACJ,QAAM,EAAE,cAAc,gBAAgB,iBAAiB,QAAI;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB;AAAA,IAC3D,4BAA4B;AAAA,IAC5B,WAAW;AAAA,EACb,CAAC;AAED,SACE,6CAAC,SAAI,WAAW,cACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,MAAM,4CAAC,mCAAgB,OAAO,CAAC,WAAW,KAAK,GAAG;AAAA,QAClD,SAAS,MAAM,iBAAiB,CAAC,MAAM;AAAA,QACvC,MAAM;AAAA,QACN,gBAAgB,EAAE,eAAe,iCAAiC,KAAK,KAAK,aAAa;AAAA;AAAA,IAC3F;AAAA,IACA,4CAAC,8CAAgB,UAAU,KAAK,aAAa,QAAgB,gBAAgC,SAC3F;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,8BAAQ;",
6
+ "names": []
7
7
  }
@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = __toESM(require("react"));
37
37
  var import_ds_icons = require("@elliemae/ds-icons");
38
- var import_ds_tooltip = require("@elliemae/ds-tooltip");
38
+ var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
39
39
  var import_ds_classnames = require("@elliemae/ds-classnames");
40
40
  var import_ds_system = require("@elliemae/ds-system");
41
41
  var import_dependencies = require("../helpers/dependencies.js");
@@ -80,7 +80,7 @@ const RenderField = ({
80
80
  onMouseLeave: () => handleMouseLeaveInput(),
81
81
  children: [
82
82
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "em-ds-query-builder-row__input-controller", children: import_react.default.isValidElement(UserComponent) ? import_react.default.cloneElement(UserComponent, componentNewProps) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserComponent, { ...componentNewProps }) }),
83
- hasError && hasError.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "40px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: hasError.errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { tabIndex: 0, className: "row-icon-alert", "data-testid": "qb-error-state-icon", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsDetail, { width: 20, height: 20, color: ["danger", 900], title: hasError.errorMessage }) }) }) }) : null
83
+ hasError && hasError.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "40px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: hasError.errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { tabIndex: 0, className: "row-icon-alert", "data-testid": "qb-error-state-icon", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsDetail, { width: 20, height: 20, color: ["danger", 900], title: hasError.errorMessage }) }) }) }) : null
84
84
  ]
85
85
  }
86
86
  );