@seeqdev/qomponents 0.0.178 → 0.0.179
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.
- package/README.md +9 -0
- package/dist/example/src/Example.tsx +7 -7
- package/dist/index.esm.js +343 -343
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +343 -343
- package/dist/index.js.map +1 -1
- package/dist/src/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +5 -0
- package/dist/styles.css +2920 -3535
- package/package.json +4 -3
package/dist/index.js
CHANGED
|
@@ -66,34 +66,34 @@ const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId,
|
|
|
66
66
|
: undefined;
|
|
67
67
|
|
|
68
68
|
const colorClassesThemeLight = {
|
|
69
|
-
'theme': 'tw
|
|
70
|
-
'white': 'tw
|
|
71
|
-
'dark-gray': 'tw
|
|
72
|
-
'warning': 'tw
|
|
73
|
-
'darkish-gray': 'tw
|
|
74
|
-
'gray': 'tw
|
|
69
|
+
'theme': 'tw:text-sq-theme-dark',
|
|
70
|
+
'white': 'tw:text-sq-white',
|
|
71
|
+
'dark-gray': 'tw:text-sq-fairly-dark-gray',
|
|
72
|
+
'warning': 'tw:text-sq-warning',
|
|
73
|
+
'darkish-gray': 'tw:text-sq-darkish-gray',
|
|
74
|
+
'gray': 'tw:text-sq-disabled-gray',
|
|
75
75
|
'color': '',
|
|
76
|
-
'info': 'tw
|
|
77
|
-
'text': 'tw
|
|
76
|
+
'info': 'tw:text-sq-theme-link',
|
|
77
|
+
'text': 'tw:text-sq-text-color',
|
|
78
78
|
'inherit': '',
|
|
79
|
-
'danger': 'tw
|
|
80
|
-
'theme-light': 'tw
|
|
81
|
-
'success': 'tw
|
|
79
|
+
'danger': 'tw:text-sq-danger',
|
|
80
|
+
'theme-light': 'tw:text-sq-theme-light',
|
|
81
|
+
'success': 'tw:text-sq-success',
|
|
82
82
|
};
|
|
83
83
|
const colorClassesThemeDark = {
|
|
84
|
-
'theme': 'dark:
|
|
84
|
+
'theme': 'tw:dark:text-sq-theme-darker',
|
|
85
85
|
'white': '',
|
|
86
|
-
'dark-gray': 'tw
|
|
86
|
+
'dark-gray': 'tw:text-sq-fairly-dark-gray',
|
|
87
87
|
'warning': '',
|
|
88
|
-
'darkish-gray': 'tw
|
|
89
|
-
'gray': 'dark:
|
|
88
|
+
'darkish-gray': 'tw:text-sq-darkish-gray',
|
|
89
|
+
'gray': 'tw:dark:text-sq-dark-disabled-gray',
|
|
90
90
|
'color': '',
|
|
91
|
-
'info': 'dark:
|
|
92
|
-
'text': 'dark:
|
|
91
|
+
'info': 'tw:dark:text-sq-theme-link',
|
|
92
|
+
'text': 'tw:dark:text-sq-dark-text',
|
|
93
93
|
'inherit': '',
|
|
94
|
-
'danger': 'tw
|
|
95
|
-
'theme-light': 'tw
|
|
96
|
-
'success': 'tw
|
|
94
|
+
'danger': 'tw:text-sq-danger',
|
|
95
|
+
'theme-light': 'tw:text-sq-theme-light',
|
|
96
|
+
'success': 'tw:text-sq-success',
|
|
97
97
|
};
|
|
98
98
|
/**
|
|
99
99
|
* Icon:
|
|
@@ -105,14 +105,14 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
105
105
|
const errorMessage = color === undefined || color === ''
|
|
106
106
|
? 'Icon with type="color" must have prop color specified.'
|
|
107
107
|
: 'Icon with prop color must have type="color".';
|
|
108
|
-
return jsxRuntime.jsx("div", { className: "tw
|
|
108
|
+
return jsxRuntime.jsx("div", { className: "tw:text-sq-danger", children: errorMessage });
|
|
109
109
|
}
|
|
110
110
|
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
111
111
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
112
112
|
const style = type === 'color' && color ? { color } : {};
|
|
113
113
|
const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
|
|
114
114
|
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
115
|
-
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw
|
|
115
|
+
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none tw:outline-none`;
|
|
116
116
|
const tooltipData = getQTipData(tooltipProps);
|
|
117
117
|
return (jsxRuntime.jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
118
118
|
};
|
|
@@ -123,71 +123,71 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
123
123
|
* - include tooltips and/or icons
|
|
124
124
|
*/
|
|
125
125
|
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
|
|
126
|
-
const baseClasses = 'tw
|
|
126
|
+
const baseClasses = 'tw:px-2.5 tw:rounded-md tw:focus:ring-0 tw:focus-visible:outline-none tw:aria-disabled:cursor-not-allowed tw:disabled:pointer-events-none';
|
|
127
127
|
const baseClassesByVariant = {
|
|
128
|
-
'outline': 'disabled:
|
|
129
|
-
'theme': 'disabled:
|
|
130
|
-
'danger': 'tw
|
|
131
|
-
'tw
|
|
132
|
-
'theme-light': 'disabled:
|
|
133
|
-
'no-border': 'disabled:
|
|
134
|
-
'warning': 'tw
|
|
135
|
-
'disabled:
|
|
128
|
+
'outline': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
|
|
129
|
+
'theme': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
|
|
130
|
+
'danger': 'tw:bg-sq-danger tw:disabled:opacity-50 tw:aria-disabled:opacity-50 ' +
|
|
131
|
+
'tw:border-solid tw:border tw:border-sq-danger',
|
|
132
|
+
'theme-light': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
|
|
133
|
+
'no-border': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
|
|
134
|
+
'warning': 'tw:bg-sq-warning tw:border-solid tw:border tw:border-sq-warning ' +
|
|
135
|
+
'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
|
|
136
136
|
};
|
|
137
137
|
const textClassesByVariantLightTheme = {
|
|
138
|
-
'outline': 'tw
|
|
139
|
-
'theme': 'tw
|
|
140
|
-
'theme-light': 'tw
|
|
141
|
-
'danger': 'tw
|
|
142
|
-
'no-border': 'tw
|
|
143
|
-
'warning': 'tw
|
|
138
|
+
'outline': 'tw:text-sq-text-color',
|
|
139
|
+
'theme': 'tw:text-sq-white',
|
|
140
|
+
'theme-light': 'tw:text-sq-white',
|
|
141
|
+
'danger': 'tw:text-sq-white',
|
|
142
|
+
'no-border': 'tw:text-sq-text-color',
|
|
143
|
+
'warning': 'tw:text-sq-white',
|
|
144
144
|
};
|
|
145
145
|
const textClassesByVariantDarkTheme = {
|
|
146
|
-
'outline': 'dark:
|
|
147
|
-
'theme': 'dark:
|
|
148
|
-
'theme-light': 'dark:
|
|
149
|
-
'danger': 'dark:
|
|
150
|
-
'no-border': 'dark:
|
|
151
|
-
'warning': 'dark:
|
|
146
|
+
'outline': 'tw:dark:text-sq-dark-text',
|
|
147
|
+
'theme': 'tw:dark:text-sq-white',
|
|
148
|
+
'theme-light': 'tw:dark:text-sq-white',
|
|
149
|
+
'danger': 'tw:dark:text-sq-white',
|
|
150
|
+
'no-border': 'tw:dark:text-sq-dark-text',
|
|
151
|
+
'warning': 'tw:dark:text-sq-white',
|
|
152
152
|
};
|
|
153
153
|
const classesByVariantLightTheme = {
|
|
154
|
-
'outline': 'tw
|
|
155
|
-
'theme': 'tw
|
|
154
|
+
'outline': 'tw:bg-white tw:border-sq-disabled-gray',
|
|
155
|
+
'theme': 'tw:bg-sq-theme-dark tw:border-sq-theme-dark',
|
|
156
156
|
'danger': '',
|
|
157
|
-
'theme-light': 'tw
|
|
157
|
+
'theme-light': 'tw:bg-sq-icon',
|
|
158
158
|
'no-border': '',
|
|
159
159
|
'warning': '',
|
|
160
160
|
};
|
|
161
161
|
const classesByVariantDarkTheme = {
|
|
162
|
-
'outline': 'dark:
|
|
163
|
-
'theme': 'dark:
|
|
162
|
+
'outline': 'tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-disabled-gray',
|
|
163
|
+
'theme': 'tw:dark:bg-sq-theme-dark tw:dark:border-sq-theme-dark',
|
|
164
164
|
'danger': '',
|
|
165
|
-
'theme-light': 'dark:
|
|
165
|
+
'theme-light': 'tw:dark:bg-sq-icon-dark tw:dark:border-sq-icon-dark',
|
|
166
166
|
'no-border': '',
|
|
167
167
|
'warning': '',
|
|
168
168
|
};
|
|
169
169
|
const activeClassesByVariantLightTheme = {
|
|
170
|
-
'outline': 'hover:
|
|
171
|
-
' active:
|
|
172
|
-
'theme': 'hover:
|
|
173
|
-
'danger': 'hover:
|
|
174
|
-
'theme-light': 'hover:
|
|
170
|
+
'outline': 'tw:hover:bg-sq-light-gray tw:focus:bg-sq-dark-gray tw:active:bg-sq-dark-gray tw:focus:border-sq-theme-dark' +
|
|
171
|
+
' tw:active:border-sq-theme-dark',
|
|
172
|
+
'theme': 'tw:hover:bg-sq-theme-highlight tw:hover:border-sq-theme-highlight',
|
|
173
|
+
'danger': 'tw:hover:bg-sq-bg-danger tw:hover:border-sq-bg-danger',
|
|
174
|
+
'theme-light': 'tw:hover:bg-sq-link tw:hover:border-sq-link',
|
|
175
175
|
'no-border': '',
|
|
176
176
|
'warning': '',
|
|
177
177
|
};
|
|
178
178
|
const activeClassesByVariantDarkTheme = {
|
|
179
|
-
'outline': 'dark:hover:
|
|
180
|
-
' dark:active:
|
|
181
|
-
'theme': 'dark:hover:
|
|
182
|
-
'danger': 'dark:hover:
|
|
183
|
-
'theme-light': 'dark:hover:
|
|
179
|
+
'outline': 'tw:dark:hover:bg-sq-highlight-color-dark tw:dark:focus:bg-sq-multi-gray-dark' +
|
|
180
|
+
' tw:dark:active:bg-sq-multi-gray-dark tw:dark:focus:border-sq-theme-dark tw:dark:active:border-sq-theme-dark',
|
|
181
|
+
'theme': 'tw:dark:hover:bg-sq-theme-highlight tw:dark:hover:border-sq-theme-highlight',
|
|
182
|
+
'danger': 'tw:dark:hover:bg-sq-bg-danger tw:dark:hover:border-sq-bg-danger',
|
|
183
|
+
'theme-light': 'tw:dark:hover:bg-sq-link-dark tw:dark:hover:border-sq-link-dark',
|
|
184
184
|
'no-border': '',
|
|
185
185
|
'warning': '',
|
|
186
186
|
};
|
|
187
187
|
const sizeClasses = {
|
|
188
|
-
xs: 'tw
|
|
189
|
-
sm: 'tw
|
|
190
|
-
lg: 'tw
|
|
188
|
+
xs: 'tw:text-xs tw:py-0.5',
|
|
189
|
+
sm: 'tw:text-sm tw:py-1',
|
|
190
|
+
lg: 'tw:text-xl tw:py-1',
|
|
191
191
|
};
|
|
192
192
|
let tooltipData = undefined;
|
|
193
193
|
let appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
@@ -203,7 +203,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
203
203
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
204
204
|
};
|
|
205
205
|
}
|
|
206
|
-
const iconClass = iconPosition === 'left' ? 'tw
|
|
206
|
+
const iconClass = iconPosition === 'left' ? 'tw:mr-1' : 'tw:ml-1';
|
|
207
207
|
const iconElement = icon && (jsxRuntime.jsx(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
208
208
|
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
209
209
|
: '', testId: `${id}_spinner` }));
|
|
@@ -4797,31 +4797,30 @@ function getSvgIconPath(icon) {
|
|
|
4797
4797
|
}
|
|
4798
4798
|
|
|
4799
4799
|
const popoverBorderStyles = [
|
|
4800
|
-
'tw
|
|
4801
|
-
'tw
|
|
4802
|
-
'tw
|
|
4803
|
-
'tw
|
|
4804
|
-
'dark:
|
|
4800
|
+
'tw:border-solid',
|
|
4801
|
+
'tw:border',
|
|
4802
|
+
'tw:rounded-md',
|
|
4803
|
+
'tw:border-sq-disabled-gray',
|
|
4804
|
+
'tw:dark:border-gray-500',
|
|
4805
4805
|
].join(' ');
|
|
4806
4806
|
const triggerBackgroundStyles = [
|
|
4807
|
-
'tw
|
|
4808
|
-
'hover:
|
|
4809
|
-
'active:
|
|
4810
|
-
'dark:
|
|
4811
|
-
'dark:hover:
|
|
4812
|
-
'dark:active:
|
|
4807
|
+
'tw:bg-transparent',
|
|
4808
|
+
'tw:hover:bg-sq-worksheetspanel-gray',
|
|
4809
|
+
'tw:active:bg-sq-worksheetspanel-gray',
|
|
4810
|
+
'tw:dark:bg-transparent',
|
|
4811
|
+
'tw:dark:hover:bg-sq-field-disabled-gray/30',
|
|
4812
|
+
'tw:dark:active:bg-sq-field-disabled-gray/30',
|
|
4813
4813
|
].join(' ');
|
|
4814
4814
|
const activeBackgroundStyles = [
|
|
4815
4815
|
'active',
|
|
4816
|
-
'tw
|
|
4817
|
-
'
|
|
4818
|
-
'
|
|
4819
|
-
'dark:
|
|
4820
|
-
'dark:
|
|
4821
|
-
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4816
|
+
'tw:bg-sq-overlay',
|
|
4817
|
+
'tw:active:bg-sq-overlay',
|
|
4818
|
+
'tw:dark:bg-sq-dark-disabled-gray',
|
|
4819
|
+
'tw:dark:hover:border-sq-dark-disabled-gray/30',
|
|
4820
|
+
'tw:dark:active:bg-sq-dark-disabled-gray/30',
|
|
4822
4821
|
].join(' ');
|
|
4823
|
-
const bgStyles$3 = ['tw
|
|
4824
|
-
const disabledClasses$4 = ['tw
|
|
4822
|
+
const bgStyles$3 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
4823
|
+
const disabledClasses$4 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
4825
4824
|
const PopoverContent = React__namespace.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (jsxRuntime.jsx(Content2$3, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
|
|
4826
4825
|
const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, isPrimaryAnSvg = false, primaryIconExtraClassNames = false, iconHeight = 24, iconWidth = 24, primaryIconViewbox = '0 0 24 24', onClick, onHide, }) => {
|
|
4827
4826
|
let tooltipData = undefined;
|
|
@@ -4839,12 +4838,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4839
4838
|
onHide && onHide();
|
|
4840
4839
|
}
|
|
4841
4840
|
};
|
|
4842
|
-
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw-border-none tw
|
|
4841
|
+
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw:bg-transparent tw:border-none tw:mx-sq-1.5 tw:first:ml-0 tw:last:mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4843
4842
|
onClick && onClick(e);
|
|
4844
|
-
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw
|
|
4845
|
-
' tw
|
|
4846
|
-
' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
|
|
4847
|
-
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
4843
|
+
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw:flex tw:flex-col tw:items-center tw:rounded-md ${isSmall ? 'tw:py-px tw:px-1' : 'tw:px-2 tw:py-sq-5'} ${disabled ? disabledClasses$4 : isActive ? activeBackgroundStyles : triggerBackgroundStyles} ${extraClassNames || ''}`, children: [jsxRuntime.jsxs("span", { className: "tw:nowrap", children: [isPrimaryAnSvg ? (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:text-sq-text-color tw:dark:text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) })) : (jsxRuntime.jsx(Icon, { icon: icon, testId: "firstIcon", type: "text", size: !isSmall && !label && !secondIcon && !forceSmallIcon ? 'lg' : 'sm', extraClassNames: `tw:text-sq-text-color tw:dark:text-sq-dark-text` })), secondIcon && jsxRuntime.jsx(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }), popoverContent ? (jsxRuntime.jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:ml-sq-3 tw:text-2", type: "text", size: "sm" })) : undefined] }), !isSmall && jsxRuntime.jsx("small", { className: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:text-2.5", children: label })] }) }), !!popoverContent ? (jsxRuntime.jsx(PopoverContent, { sideOffset: 2, align: "start", children: jsxRuntime.jsxs("div", { className: bgStyles$3 +
|
|
4844
|
+
' tw:relative tw:z-[1000] tw:min-w-6 tw:p-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
|
|
4845
|
+
' tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2' +
|
|
4846
|
+
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), popoverContent] }) })) : undefined] }));
|
|
4848
4847
|
};
|
|
4849
4848
|
|
|
4850
4849
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4861,24 +4860,24 @@ const setValidInputDimension = (width, height) => {
|
|
|
4861
4860
|
return inputStyle;
|
|
4862
4861
|
};
|
|
4863
4862
|
|
|
4864
|
-
const errorClasses$4 = 'tw
|
|
4863
|
+
const errorClasses$4 = 'tw:border-sq-danger';
|
|
4865
4864
|
const borderColorClasses$4 = [
|
|
4866
|
-
'tw
|
|
4867
|
-
'dark:
|
|
4868
|
-
'dark:focus:
|
|
4869
|
-
'dark:active:
|
|
4870
|
-
'focus:
|
|
4871
|
-
'active:
|
|
4865
|
+
'tw:border-sq-disabled-gray',
|
|
4866
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
4867
|
+
'tw:dark:focus:border-sq-theme-dark-dark',
|
|
4868
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
4869
|
+
'tw:focus:border-sq-theme-dark',
|
|
4870
|
+
'tw:active:border-sq-theme-dark',
|
|
4872
4871
|
].join(' ');
|
|
4873
|
-
const baseClasses$6 = 'tw
|
|
4874
|
-
' disabled:
|
|
4875
|
-
' disabled:
|
|
4876
|
-
' dark:
|
|
4877
|
-
const darkTheme$3 = 'dark:
|
|
4878
|
-
const lightTheme$3 = 'tw
|
|
4872
|
+
const baseClasses$6 = 'tw:h-8.5 tw:leading-normal tw:outline-none tw:py-1 tw:px-3' +
|
|
4873
|
+
' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
|
|
4874
|
+
' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:placeholder-gray-400' +
|
|
4875
|
+
' tw:dark:placeholder-sq-dark-text/30 specTextField';
|
|
4876
|
+
const darkTheme$3 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text tw:disabled:dark:text-sq-dark-text/30';
|
|
4877
|
+
const lightTheme$3 = 'tw:text-sq-text-color tw:disabled:text-sq-darkish-gray';
|
|
4879
4878
|
const sizeClasses = {
|
|
4880
|
-
sm: 'tw
|
|
4881
|
-
lg: 'tw
|
|
4879
|
+
sm: 'tw:text-sm',
|
|
4880
|
+
lg: 'tw:text-xl',
|
|
4882
4881
|
};
|
|
4883
4882
|
/**
|
|
4884
4883
|
* Textfield.
|
|
@@ -4920,12 +4919,12 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4920
4919
|
internalRef.current.value = `${value}`;
|
|
4921
4920
|
}
|
|
4922
4921
|
}, [value]);
|
|
4923
|
-
let borderRadius = 'tw
|
|
4922
|
+
let borderRadius = 'tw:rounded-md';
|
|
4924
4923
|
if (inputGroup === 'left') {
|
|
4925
|
-
borderRadius = 'tw
|
|
4924
|
+
borderRadius = 'tw:rounded-l-md tw:border-r-0 tw:focus:border-r' + ' tw:active:border-r';
|
|
4926
4925
|
}
|
|
4927
4926
|
else if (inputGroup === 'right') {
|
|
4928
|
-
borderRadius = 'tw
|
|
4927
|
+
borderRadius = 'tw:rounded-r-md tw:border-l-0 tw:focus:border-l tw:active:border-l';
|
|
4929
4928
|
}
|
|
4930
4929
|
const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
|
|
4931
4930
|
const inputProp = setValidInputDimension(inputWidth, inputHeight)
|
|
@@ -4938,18 +4937,18 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4938
4937
|
inputLenghtProp.maxLength = maxLength;
|
|
4939
4938
|
if (minLength)
|
|
4940
4939
|
inputLenghtProp.minLength = minLength;
|
|
4941
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsxRuntime.jsx("div", { className: "tw
|
|
4940
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsxRuntime.jsx("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
|
|
4942
4941
|
});
|
|
4943
4942
|
|
|
4944
|
-
const alignment = 'tw
|
|
4945
|
-
const labelClasses = 'tw
|
|
4946
|
-
const baseClasses$5 = 'tw-border
|
|
4947
|
-
' dark:
|
|
4948
|
-
' checked:
|
|
4949
|
-
' checked:active:
|
|
4950
|
-
' dark:disabled:
|
|
4951
|
-
const checkboxClasses = `tw
|
|
4952
|
-
const radioClasses = `tw
|
|
4943
|
+
const alignment = 'tw:flex';
|
|
4944
|
+
const labelClasses = 'tw:ml-1.5 tw:text-sm tw:-mt-0.5';
|
|
4945
|
+
const baseClasses$5 = 'tw:appearance-none tw:border tw:h-3.5 tw:w-3.5 tw:focus:ring-0 tw:focus:ring-offset-0 tw:outline-none tw:focus:outline-none' +
|
|
4946
|
+
' tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-text tw:dark:hover:bg-sq-dark-background' +
|
|
4947
|
+
' tw:checked:text-white tw:checked:border-sq-text-color tw:checked:hover:border-sq-theme-dark' +
|
|
4948
|
+
' tw:checked:active:border-sq-theme-darker tw:checked:focus:border-sq-theme-dark tw:disabled:border-sq-disabled-gray' +
|
|
4949
|
+
' tw:dark:disabled:border-sq-fairly-dark-gray tw:dark:checked:focus:bg-sq-dark-background';
|
|
4950
|
+
const checkboxClasses = `tw:form-checkbox tw:rounded ${baseClasses$5}`;
|
|
4951
|
+
const radioClasses = `tw:form-radio tw:rounded-full ${baseClasses$5}`;
|
|
4953
4952
|
/**
|
|
4954
4953
|
* Checkbox and Radio Box Component.
|
|
4955
4954
|
*/
|
|
@@ -4957,26 +4956,25 @@ const Checkbox = (props) => {
|
|
|
4957
4956
|
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
|
|
4958
4957
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
4959
4958
|
const tooltipData = getQTipData(tooltipProps);
|
|
4960
|
-
return (jsxRuntime.jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsxRuntime.jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw
|
|
4961
|
-
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
|
|
4967
|
-
' disabled:
|
|
4968
|
-
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
const
|
|
4972
|
-
const errorClasses$3 = 'tw-border-sq-danger-color';
|
|
4959
|
+
return (jsxRuntime.jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsxRuntime.jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw:cursor-not-allowed' : 'tw:cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }), label && (jsxRuntime.jsx("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
4960
|
+
? 'tw:cursor-not-allowed tw:dark:text-sq-fairly-dark-gray tw:text-sq-fairly-dark-gray'
|
|
4961
|
+
: 'tw:cursor-pointer tw:text-sq-text-color tw:dark:text-sq-dark-text'}`, children: label }))] }));
|
|
4962
|
+
};
|
|
4963
|
+
|
|
4964
|
+
const baseClasses$4 = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3 tw:rounded-md tw:w-full' +
|
|
4965
|
+
' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
|
|
4966
|
+
' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:text-sm';
|
|
4967
|
+
const darkTheme$2 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text ' +
|
|
4968
|
+
'tw:dark:placeholder-sq-dark-text/30 tw:disabled:dark:text-sq-dark-text/30';
|
|
4969
|
+
const lightTheme$2 = 'tw:text-sq-text-color tw:placeholder-gray-400 tw:disabled:text-sq-darkish-gray';
|
|
4970
|
+
const errorClasses$3 = 'tw:border-sq-danger';
|
|
4973
4971
|
const borderColorClasses$3 = [
|
|
4974
|
-
'tw
|
|
4975
|
-
'dark:
|
|
4976
|
-
'dark:focus:
|
|
4977
|
-
'dark:active:
|
|
4978
|
-
'focus:
|
|
4979
|
-
'active:
|
|
4972
|
+
'tw:border-sq-disabled-gray',
|
|
4973
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
4974
|
+
'tw:dark:focus:border-sq-theme-darker',
|
|
4975
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
4976
|
+
'tw:focus:border-sq-theme-dark',
|
|
4977
|
+
'tw:active:border-sq-theme-dark',
|
|
4980
4978
|
].join(' ');
|
|
4981
4979
|
/**
|
|
4982
4980
|
* TextArea.
|
|
@@ -5025,25 +5023,25 @@ const TextArea = React.forwardRef(({ readonly = false, disabled = false, onChang
|
|
|
5025
5023
|
* display correctly.
|
|
5026
5024
|
*/
|
|
5027
5025
|
const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
5028
|
-
const arrowBaseClasses =
|
|
5029
|
-
const centerArrowVertically = 'before:
|
|
5030
|
-
const centerArrowHorizontally = 'before:
|
|
5031
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:
|
|
5032
|
-
before:
|
|
5033
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:
|
|
5034
|
-
before:
|
|
5035
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-
|
|
5036
|
-
before:
|
|
5037
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-
|
|
5038
|
-
before:
|
|
5026
|
+
const arrowBaseClasses = "tw:before:content-[''] tw:before:absolute tw:before:border-8";
|
|
5027
|
+
const centerArrowVertically = 'tw:before:top-1/2 tw:before:-translate-y-1/2';
|
|
5028
|
+
const centerArrowHorizontally = 'tw:before:left-1/2 tw:before:-translate-x-1/2';
|
|
5029
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} tw:before:right-full tw:before:border-y-transparent
|
|
5030
|
+
tw:before:border-l-transparent tw:before:border-r-sq-black`;
|
|
5031
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} tw:before:left-full tw:before:border-y-transparent
|
|
5032
|
+
tw:before:border-l-sq-black tw:before:border-r-transparent`;
|
|
5033
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} tw:before:-top-4 tw:before:border-b-sq-black
|
|
5034
|
+
tw:before:border-r-transparent tw:before:border-l-transparent tw:before:border-t-transparent`;
|
|
5035
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} tw:before:-bottom-4 tw:before:border-b-transparent
|
|
5036
|
+
tw:before:border-t-sq-black tw:before:border-l-transparent tw:before:border-r-transparent`;
|
|
5039
5037
|
const placements = {
|
|
5040
|
-
top:
|
|
5041
|
-
left:
|
|
5042
|
-
right: `tw
|
|
5043
|
-
bottom:
|
|
5038
|
+
top: `tw:-top-2 tw:-translate-y-full tw:left-1/2 tw:-translate-x-1/2 ${arrowTop}`,
|
|
5039
|
+
left: `tw:-translate-x-full tw:-left-3 tw:-translate-y-1/2 tw:top-1/2 ${arrowLeft}`,
|
|
5040
|
+
right: `tw:translate-x-full tw:-right-3 tw:-translate-y-1/2 tw:top-1/2 ${arrowRight}`,
|
|
5041
|
+
bottom: `tw:-bottom-2 tw:translate-y-full tw:left-1/2 tw:-translate-x-1/2 ${arrowBottom}`,
|
|
5044
5042
|
};
|
|
5045
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
5046
|
-
tw
|
|
5043
|
+
return (jsxRuntime.jsxs("div", { className: "tw:group tw:relative tw:inline-block", children: [children, jsxRuntime.jsx("div", { className: `tw:z-50 tw:whitespace-nowrap tw:hidden tw:group-hover:inline-block tw:group-hover:delay-[${delay}ms]
|
|
5044
|
+
tw:absolute tw:opacity-0 tw:group-hover:opacity-100 tw:rounded tw:bg-sq-black tw:p-2 tw:text-xs tw:text-sq-white ${placements[position]}`, children: text })] }));
|
|
5047
5045
|
};
|
|
5048
5046
|
|
|
5049
5047
|
/*! @license DOMPurify 3.2.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.3/LICENSE */
|
|
@@ -7529,8 +7527,8 @@ const QTip = () => {
|
|
|
7529
7527
|
: positionTooltip();
|
|
7530
7528
|
}
|
|
7531
7529
|
};
|
|
7532
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw
|
|
7533
|
-
(show ? 'tw
|
|
7530
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw:absolute tw:rounded tw:bg-black tw:max-w-96 tw:p-2 tw:text-xs tw:text-sq-white tw:z-[9999] tw:fade-in ' +
|
|
7531
|
+
(show ? 'tw:visible' : 'tw:invisible tw:pointer-events-none'), children: [html ? jsxRuntime.jsx(HTMLTip, { text: tooltipText }) : tooltipText, jsxRuntime.jsx("div", { className: "tw:absolute tw:w-2.5 tw:h-2.5 tw:rotate-45 tw:bg-sq-black", ref: tooltipArrowRef })] }) }));
|
|
7534
7532
|
};
|
|
7535
7533
|
|
|
7536
7534
|
function _typeof$1(o) {
|
|
@@ -13945,70 +13943,77 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
13945
13943
|
});
|
|
13946
13944
|
var CreatableSelect$1 = CreatableSelect;
|
|
13947
13945
|
|
|
13948
|
-
const baseClasses$3 = ['focus:
|
|
13949
|
-
const containerStyles = ['tw
|
|
13950
|
-
const errorClasses$2 = 'tw
|
|
13951
|
-
const borderColorClasses$2 = ['tw
|
|
13952
|
-
const borderStyles$3 = ['tw
|
|
13946
|
+
const baseClasses$3 = ['tw:focus:ring-0', 'tw:disabled:cursor-not-allowed'].join(' ');
|
|
13947
|
+
const containerStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
13948
|
+
const errorClasses$2 = 'tw:border-sq-danger';
|
|
13949
|
+
const borderColorClasses$2 = ['tw:border-sq-disabled-gray', 'tw:dark:border-sq-dark-disabled-gray'].join(' ');
|
|
13950
|
+
const borderStyles$3 = ['tw:border-solid', 'tw:border'].join(' ');
|
|
13953
13951
|
const borderActiveClasses = [
|
|
13954
|
-
'hover:
|
|
13955
|
-
'focus-within:
|
|
13956
|
-
'active:
|
|
13957
|
-
'dark:hover:
|
|
13958
|
-
'dark:focus-within:
|
|
13959
|
-
'dark:active:
|
|
13952
|
+
'tw:hover:border-sq-theme-dark',
|
|
13953
|
+
'tw:focus-within:border-sq-theme-dark',
|
|
13954
|
+
'tw:active:border-sq-theme-dark',
|
|
13955
|
+
'tw:dark:hover:border-sq-theme-dark-dark',
|
|
13956
|
+
'tw:dark:focus-within:border-sq-theme-dark-dark',
|
|
13957
|
+
'tw:dark:active:border-sq-theme-dark-dark',
|
|
13960
13958
|
].join(' ');
|
|
13961
|
-
const textStyles = ['tw
|
|
13959
|
+
const textStyles = ['tw:text-sq-text-color', 'tw:dark:text-sq-dark-text', 'tw:text-sm'].join(' ');
|
|
13962
13960
|
const textActiveStyles = [
|
|
13963
|
-
'hover:
|
|
13964
|
-
'
|
|
13965
|
-
'
|
|
13961
|
+
'tw:hover:text-sq-theme-dark',
|
|
13962
|
+
'tw:focus:text-sq-theme-dark',
|
|
13963
|
+
'tw:active:text-sq-theme-dark',
|
|
13964
|
+
'tw:dark:text-sq-dark-disabled-gray',
|
|
13965
|
+
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13966
|
+
'tw:dark:focus:text-sq-theme-dark-dark',
|
|
13967
|
+
'tw:dark:active:text-sq-theme-dark-dark',
|
|
13968
|
+
'tw:hover:text-sq-theme-dark',
|
|
13969
|
+
'tw:dark:text-sq-dark-disabled-gray',
|
|
13970
|
+
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13966
13971
|
].join(' ');
|
|
13967
13972
|
const menuStyles = [
|
|
13968
|
-
'tw
|
|
13969
|
-
'tw
|
|
13970
|
-
'tw
|
|
13971
|
-
'tw
|
|
13972
|
-
'dark:
|
|
13973
|
-
'tw
|
|
13974
|
-
'tw
|
|
13975
|
-
'
|
|
13973
|
+
'tw:border-solid',
|
|
13974
|
+
'tw:border',
|
|
13975
|
+
'tw:rounded-b',
|
|
13976
|
+
'tw:border-sq-disabled-gray',
|
|
13977
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
13978
|
+
'tw:whitespace-nowrap',
|
|
13979
|
+
'tw:min-w-fit',
|
|
13980
|
+
'tw:!z-[9999]',
|
|
13976
13981
|
].join(' ');
|
|
13977
13982
|
const menuListStyles = [
|
|
13978
|
-
'tw
|
|
13979
|
-
'tw
|
|
13980
|
-
'dark:
|
|
13981
|
-
'tw
|
|
13982
|
-
'
|
|
13983
|
+
'tw:rounded-b',
|
|
13984
|
+
'tw:bg-sq-white',
|
|
13985
|
+
'tw:dark:bg-sq-dark-background',
|
|
13986
|
+
'tw:min-w-fit',
|
|
13987
|
+
'tw:!z-[9999]',
|
|
13983
13988
|
'specSelectMenu',
|
|
13984
13989
|
].join(' ');
|
|
13985
13990
|
const groupHeadingStyles = [
|
|
13986
|
-
'tw
|
|
13987
|
-
'dark:
|
|
13988
|
-
'tw
|
|
13989
|
-
'tw
|
|
13990
|
-
'tw
|
|
13991
|
+
'tw:bg-sq-light-gray',
|
|
13992
|
+
'tw:dark:bg-sq-dark-disabled-gray',
|
|
13993
|
+
'tw:text-sq-darkish-gray',
|
|
13994
|
+
'tw:py-1',
|
|
13995
|
+
'tw:px-2.5',
|
|
13991
13996
|
'specSelectGroupHeading',
|
|
13992
13997
|
].join(' ');
|
|
13993
13998
|
const optionStyles = [
|
|
13994
|
-
'hover:
|
|
13995
|
-
'hover:
|
|
13996
|
-
'dark:hover:
|
|
13997
|
-
'tw
|
|
13998
|
-
'tw
|
|
13999
|
+
'tw:hover:bg-sq-gray-highlight',
|
|
14000
|
+
'tw:hover:cursor-pointer',
|
|
14001
|
+
'tw:dark:hover:bg-sq-gray-highlight-dark',
|
|
14002
|
+
'tw:py-1',
|
|
14003
|
+
'tw:px-2.5',
|
|
13999
14004
|
'specSelectOption',
|
|
14000
14005
|
].join(' ');
|
|
14001
|
-
const disabledClasses$3 = ['tw
|
|
14002
|
-
const dropDownIndicatorStyles = `tw
|
|
14003
|
-
const placeholderStyles = ['tw
|
|
14006
|
+
const disabledClasses$3 = ['tw:bg-sq-field-disabled-gray', 'tw:!cursor-not-allowed', 'tw:opacity-50'].join(' ');
|
|
14007
|
+
const dropDownIndicatorStyles = `tw:text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
14008
|
+
const placeholderStyles = ['tw:text-gray-400', 'tw:dark:text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
14004
14009
|
const multiValueStyles = [
|
|
14005
|
-
'tw
|
|
14006
|
-
'dark:
|
|
14007
|
-
'tw
|
|
14008
|
-
'tw
|
|
14009
|
-
'tw
|
|
14010
|
-
'tw
|
|
14011
|
-
'tw
|
|
14010
|
+
'tw:bg-sq-disabled-gray',
|
|
14011
|
+
'tw:dark:bg-sq-multi-gray-dark',
|
|
14012
|
+
'tw:text-sm',
|
|
14013
|
+
'tw:py-0.5',
|
|
14014
|
+
'tw:px-1',
|
|
14015
|
+
'tw:m-0.5',
|
|
14016
|
+
'tw:rounded-sm',
|
|
14012
14017
|
'specOpenSelect',
|
|
14013
14018
|
].join(' ');
|
|
14014
14019
|
/**
|
|
@@ -14073,38 +14078,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14073
14078
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14074
14079
|
classNames: {
|
|
14075
14080
|
control: ({ menuIsOpen }) => {
|
|
14076
|
-
let border = menuIsOpen ? 'tw
|
|
14081
|
+
let border = menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
|
|
14077
14082
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14078
14083
|
if (inputGroup === 'left') {
|
|
14079
|
-
border = menuIsOpen ? 'tw
|
|
14084
|
+
border = menuIsOpen ? 'tw:rounded-tl-md' : 'tw:rounded-l-md';
|
|
14080
14085
|
}
|
|
14081
14086
|
else if (inputGroup === 'right') {
|
|
14082
|
-
border = menuIsOpen ? 'tw
|
|
14087
|
+
border = menuIsOpen ? 'tw:rounded-tr-md' : 'tw:rounded-r-md';
|
|
14083
14088
|
}
|
|
14084
14089
|
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14085
|
-
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw
|
|
14090
|
+
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw:pl-2 tw:pr-1' : 'tw:pl-2.5 tw:pr-1.5'}`;
|
|
14086
14091
|
},
|
|
14087
14092
|
placeholder: () => placeholderStyles,
|
|
14088
14093
|
container: ({ selectProps }) => {
|
|
14089
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14090
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles}
|
|
14094
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
|
|
14095
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} tw:!pointer-events-auto`;
|
|
14091
14096
|
},
|
|
14092
14097
|
input: () => textStyles + ' specSelectInput',
|
|
14093
14098
|
menuList: () => menuListStyles,
|
|
14094
14099
|
menu: () => menuStyles,
|
|
14095
|
-
menuPortal: () => '
|
|
14100
|
+
menuPortal: () => 'tw:!z-[9000]',
|
|
14096
14101
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14097
14102
|
option: ({ isSelected, isDisabled }) => {
|
|
14098
14103
|
let classes = optionStyles;
|
|
14099
14104
|
if (isDisabled) {
|
|
14100
14105
|
classes += ' specDisabledOption ';
|
|
14101
14106
|
}
|
|
14102
|
-
return isSelected ? classes + ' tw
|
|
14107
|
+
return isSelected ? classes + ' tw:bg-sq-colored-hover tw:dark:bg-sq-colored-hover-dark' : classes;
|
|
14103
14108
|
},
|
|
14104
14109
|
singleValue: () => 'specOpenSelect',
|
|
14105
14110
|
multiValue: () => multiValueStyles,
|
|
14106
|
-
multiValueRemove: () => 'hover:
|
|
14107
|
-
clearIndicator: () => 'tw
|
|
14111
|
+
multiValueRemove: () => 'tw:hover:text-sq-danger specSelectMultiValueRemove',
|
|
14112
|
+
clearIndicator: () => 'tw:text-sq-disabled-gray tw:hover:text-sq-danger specClearSelect',
|
|
14108
14113
|
group: () => 'specSelectGroup',
|
|
14109
14114
|
groupHeading: () => groupHeadingStyles,
|
|
14110
14115
|
},
|
|
@@ -14494,11 +14499,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14494
14499
|
const Dialog = Root$4;
|
|
14495
14500
|
const DialogPortal = Portal$1;
|
|
14496
14501
|
const DialogClose = Close;
|
|
14497
|
-
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("div", { className: "tw
|
|
14498
|
-
tw
|
|
14499
|
-
tw
|
|
14502
|
+
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("div", { className: "tw:select-none tw:fixed tw:w-full tw:h-full tw:opacity-50 tw:inset-0 tw:z-[1009] tw:bg-sq-dark-background\n tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0\n tw:data-[state=open]:fade-in-0 " }), jsxRuntime.jsxs(Content$2, { ref: ref, className: `tw:fixed tw:left-[50%] tw:top-0 tw:my-6 tw:translate-x-[-50%] tw:z-[1010] tw:grid
|
|
14503
|
+
tw:gap-4 tw:border tw:bg-sq-white tw:dark:bg-sq-dark-background tw:shadow-lg tw:duration-200
|
|
14504
|
+
tw:rounded-lg ${className}`, ...props, children: [jsxRuntime.jsx(DialogTitle$1, { className: "tw:hidden" }), children] })] })));
|
|
14500
14505
|
DialogContent.displayName = Content$2.displayName;
|
|
14501
|
-
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw
|
|
14506
|
+
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw:w-full tw:justify-between", children: jsxRuntime.jsx("div", { ...props }) }));
|
|
14502
14507
|
DialogHeader.displayName = 'DialogHeader';
|
|
14503
14508
|
const DialogFooter = (props) => jsxRuntime.jsx("div", { ...props });
|
|
14504
14509
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14536,26 +14541,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14536
14541
|
let titleIconElement = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
14537
14542
|
if (titleIcon) {
|
|
14538
14543
|
if (typeof titleIcon === 'string') {
|
|
14539
|
-
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw
|
|
14544
|
+
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw:flex tw:text-xl tw:mt-1" }));
|
|
14540
14545
|
}
|
|
14541
14546
|
else {
|
|
14542
|
-
titleIconElement = jsxRuntime.jsx("div", { className: "tw
|
|
14547
|
+
titleIconElement = jsxRuntime.jsx("div", { className: "tw:mt-1.5", children: titleIcon });
|
|
14543
14548
|
}
|
|
14544
14549
|
}
|
|
14545
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw
|
|
14550
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}), jsxRuntime.jsx(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsxRuntime.jsx(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsxRuntime.jsx("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : (customHeader ?? (jsxRuntime.jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:items-center", children: [jsxRuntime.jsx("h3", { children: title }), titleSuffixLabel && jsxRuntime.jsx("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsxRuntime.jsx("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsxRuntime.jsx("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
|
|
14546
14551
|
};
|
|
14547
|
-
return open ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw
|
|
14548
|
-
'tw
|
|
14549
|
-
'tw
|
|
14550
|
-
'tw
|
|
14551
|
-
'tw
|
|
14552
|
-
'tw
|
|
14553
|
-
'tw
|
|
14554
|
-
'tw
|
|
14555
|
-
'tw
|
|
14556
|
-
'tw
|
|
14557
|
-
'tw
|
|
14558
|
-
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw
|
|
14552
|
+
return open ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw:w-full tw:border-none tw:shadow-none tw:dark:text-sq-dark-text tw:!gap-0`, {
|
|
14553
|
+
'tw:max-w-xs': size === 'xs',
|
|
14554
|
+
'tw:max-w-sm': size === 'sm',
|
|
14555
|
+
'tw:max-w-md': size === 'md',
|
|
14556
|
+
'tw:max-w-lg': size === 'lg',
|
|
14557
|
+
'tw:max-w-xl': size === 'xl',
|
|
14558
|
+
'tw:max-w-2xl': size === '2xl',
|
|
14559
|
+
'tw:max-w-3xl': size === '3xl',
|
|
14560
|
+
'tw:max-w-4xl': size === '4xl',
|
|
14561
|
+
'tw:max-w-5xl': size === '5xl',
|
|
14562
|
+
'tw:max-w-6xl': size === '6xl',
|
|
14563
|
+
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw:flex tw:w-full tw:justify-between tw:border-sq-disabled-gray\n tw:dark:border-sq-dark-disabled-gray tw:border-0 tw:border-b tw:px-6 tw:py-4", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(DialogClose, { autoFocus: false, className: "tw:[&:has(:focus-visible)]:none tw:opacity-70 tw:bg-transparent tw:hover:opacity-100 close tw:text-base tw:cursor-pointer tw:ml-4", "data-testid": "closeButton", children: jsxRuntime.jsx("span", { className: "tw:cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw:px-6 tw:py-4 tw:overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw:px-6 tw:py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw:justify-start tw:min-w-25", testId: "customButton", variant: customButtonVariant })) }), jsxRuntime.jsxs("div", { className: "tw:flex tw:justify-end", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:items-center", children: middleFooterSection }), !hideCancelButton && (jsxRuntime.jsx(DialogClose, { asChild: true, children: jsxRuntime.jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw:mr-5 tw:min-w-25", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsxRuntime.jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw:animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw:min-w-25" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
14559
14564
|
};
|
|
14560
14565
|
|
|
14561
14566
|
function createCollection(name) {
|
|
@@ -15013,11 +15018,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
15013
15018
|
return;
|
|
15014
15019
|
onTabSelect && onTabSelect(tabId);
|
|
15015
15020
|
};
|
|
15016
|
-
return (jsxRuntime.jsxs(Root2$2, { className: `tw
|
|
15017
|
-
? 'tw
|
|
15018
|
-
: 'hover:
|
|
15019
|
-
? 'dark:
|
|
15020
|
-
: 'dark:
|
|
15021
|
+
return (jsxRuntime.jsxs(Root2$2, { className: `tw:flex tw:flex-col tw:min-w-75 tw:max-w-full tw:flex-grow tw:focus-visible:outline-none ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect, children: [jsxRuntime.jsx(List, { className: `tw:flex tw:flex-row tw:flex-wrap tw:z-[1001]`, children: tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled, tabLabelExtraClassNames = '' }, index) => (jsxRuntime.jsx(Trigger$2, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:h-sq-25 tw:focus-visible:outline-none tw:min-w-25 tw:px-4 tw:border-solid tw:flex tw:flex-1 tw:justify-center tw:items-center tw:border-r-[2px] tw:last:border-r-0 tw:border-sq-overlay tw:dark:border-gray-700 ${stretchTabs ? '' : 'tw:max-w-max tw:min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
|
|
15022
|
+
? 'tw:border-b-sq-theme-darker tw:dark:border-b-sq-theme-darker tw:border-b-[0.1875rem]'
|
|
15023
|
+
: 'tw:hover:bg-sq-light-gray tw:border-b-[0.0625rem] tw:hover:dark:bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxRuntime.jsxs("span", { className: "tw:flex tw:items-center tw:overflow-hidden", children: [icon && (jsxRuntime.jsx(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw:text-sq-15 tw:mr-sq-7 tw:flex-shrink-0" })), jsxRuntime.jsx("span", { className: `tw:text-sq-13 tw:font-medium tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis ${activeTab === id
|
|
15024
|
+
? 'tw:dark:text-sq-dark-text tw:text-gray-500'
|
|
15025
|
+
: 'tw:dark:text-sq-theme-darker tw:text-sq-theme-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsxRuntime.jsx(Content$1, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:overflow-y-auto tw:-mt-sq-1 tw:border-t-[0.0625rem] tw:border-t-sq-overlay tw:dark:border-t-gray-700 tw:z-[500] tw:flex tw:flex-col tw:flex-grow tw:focus-visible:outline-none ${tab.tabContentExtraClassNames || ''}`, value: tab.id, children: tab.content }, `${tab.label}_${index}_content`)))] }));
|
|
15021
15026
|
};
|
|
15022
15027
|
|
|
15023
15028
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15442,18 +15447,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15442
15447
|
var Content2$2 = AccordionContent;
|
|
15443
15448
|
|
|
15444
15449
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15445
|
-
return (jsxRuntime.jsx(Root2$1, { className: `tw
|
|
15450
|
+
return (jsxRuntime.jsx(Root2$1, { className: `tw:rounded-md tw:w-full tw:focus-visible:outline-none ${extraClassNames || ''}`, type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value), children: accordionItems.map((item) => (jsxRuntime.jsxs(Item, { className: `tw:p-0 tw:flex tw:flex-col tw:w-full`, disabled: disabled, value: item.value, children: [jsxRuntime.jsx(Trigger2, { disabled: disabled, className: `tw:w-full tw:cursor-default tw:focus-visible:outline-none tw:bg-transparent`, children: item.trigger }), jsxRuntime.jsx(Content2$2, { className: `tw:data-[state=open]:animate-slideDown tw:data-[state=closed]:animate-slideUp tw:overflow-hidden tw:focus-visible:outline-none ${item.contentClassNames || ''}`, children: item.content })] }, item.value))) }));
|
|
15446
15451
|
};
|
|
15447
15452
|
|
|
15448
|
-
const bgStyles$2 = ['tw
|
|
15453
|
+
const bgStyles$2 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
15449
15454
|
const borderStyles$2 = [
|
|
15450
|
-
'tw
|
|
15451
|
-
'tw
|
|
15452
|
-
'tw
|
|
15453
|
-
'tw
|
|
15454
|
-
'dark:
|
|
15455
|
+
'tw:border-solid',
|
|
15456
|
+
'tw:border',
|
|
15457
|
+
'tw:rounded-[0.5rem]',
|
|
15458
|
+
'tw:border-sq-disabled-gray',
|
|
15459
|
+
'tw:dark:border-gray-500',
|
|
15455
15460
|
].join(' ');
|
|
15456
|
-
const disabledClasses$2 = ['tw
|
|
15461
|
+
const disabledClasses$2 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
15457
15462
|
const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
|
|
15458
15463
|
const tooltipData = getQTipData(tooltipProps);
|
|
15459
15464
|
const timeout = React.useRef(null);
|
|
@@ -15484,12 +15489,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15484
15489
|
};
|
|
15485
15490
|
React__namespace.useEffect(() => clearHoverTimeout, []);
|
|
15486
15491
|
const renderContent = () => {
|
|
15487
|
-
return (jsxRuntime.jsx(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:
|
|
15488
|
-
data-[side=top]:
|
|
15489
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw
|
|
15492
|
+
return (jsxRuntime.jsx(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "tw:focus-visible:outline-none tw:outline-none tw:w-full tw:h-full", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw:relative tw:z-[1200] tw:min-w-6 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out
|
|
15493
|
+
tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade tw:text-sq-text-color
|
|
15494
|
+
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), children] }) }));
|
|
15490
15495
|
};
|
|
15491
15496
|
const renderPopover = (popoverOpenState) => {
|
|
15492
|
-
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `focus-visible:
|
|
15497
|
+
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `tw:focus-visible:outline-none tw:outline-none tw:bg-transparent ${shouldTriggerFullWidth ? 'tw:w-full tw:h-full' : ''}`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw:focus-visible:outline-none tw:outline-none tw:dark:text-sq-white ${disabled ? disabledClasses$2 : ''} ${shouldTriggerFullWidth ? 'tw:flex tw:flex-col tw:items-center tw:justify-center' : 'tw:inline'} ${extraTriggerClassNames || ''}`, children: trigger }) })) : (jsxRuntime.jsx(Trigger$3, { asChild: true, children: jsxRuntime.jsx("div", {}) })), isPortal ? jsxRuntime.jsx(Portal$2, { children: renderContent() }) : renderContent()] }));
|
|
15493
15498
|
};
|
|
15494
15499
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15495
15500
|
};
|
|
@@ -16554,65 +16559,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16554
16559
|
var SubContent2 = DropdownMenuSubContent;
|
|
16555
16560
|
|
|
16556
16561
|
const borderStyles$1 = [
|
|
16557
|
-
'tw
|
|
16558
|
-
'tw
|
|
16559
|
-
'tw
|
|
16560
|
-
'tw
|
|
16561
|
-
'dark:
|
|
16562
|
+
'tw:border-solid',
|
|
16563
|
+
'tw:border',
|
|
16564
|
+
'tw:rounded-[0.5rem]',
|
|
16565
|
+
'tw:border-sq-disabled-gray',
|
|
16566
|
+
'tw:dark:border-gray-500',
|
|
16562
16567
|
].join(' ');
|
|
16563
|
-
const bgStyles$1 = ['tw
|
|
16564
|
-
const disabledClasses$1 = ['tw
|
|
16568
|
+
const bgStyles$1 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
16569
|
+
const disabledClasses$1 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
16565
16570
|
const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames = '', contentExtraClassNames = '', containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
|
|
16566
16571
|
const tooltipData = getQTipData(tooltipProps);
|
|
16567
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw-border-none focus-visible:
|
|
16572
|
+
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw:bg-transparent tw:border-none tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw:bg-transparent tw:flex tw:flex-col tw:items-center tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none ${disabled ? disabledClasses$1 : ''} ${extraClassNames}`, children: triggerIcon }) }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(Content2, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw:relative tw:z-[1200] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ${borderStyles$1} ${contentExtraClassNames}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500 tw:-mt-sq-7" }) })), dropdownItems.map((item, index) => {
|
|
16568
16573
|
const tooltipData = getQTipData(item);
|
|
16569
16574
|
if (item.isLabel) {
|
|
16570
|
-
return (jsxRuntime.jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw
|
|
16575
|
+
return (jsxRuntime.jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-white tw:w-4.5" })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: item.label })] }, (item.id || '') + index));
|
|
16571
16576
|
}
|
|
16572
16577
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16573
|
-
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw
|
|
16574
|
-
? '
|
|
16575
|
-
: 'tw
|
|
16576
|
-
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16577
|
-
? 'tw
|
|
16578
|
-
: 'tw
|
|
16578
|
+
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw:cursor-pointer tw:flex tw:justify-between tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:pl-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData, children: [jsxRuntime.jsxs("div", { className: "tw:flex", children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, extraClassNames: `tw:w-4.5 ${item.disabled
|
|
16579
|
+
? 'tw:!text-sq-disabled-gray'
|
|
16580
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled && 'tw:!opacity-30'} tw:not-italic tw:font-semibold ${item.labelClasses}`, children: item.label })] }), jsxRuntime.jsx(Icon, { size: "sm", icon: "fc-arrow-dropdown tw:rotate-270", extraClassNames: `${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:w-4.5 tw:ml-4 tw:text-2 tw:justify-center tw:flex` })] }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsx("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw:relative tw:z-[1000] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ${borderStyles$1}`, children: item.subMenuItems.map((subItem, subIndex) => {
|
|
16581
|
+
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (jsxRuntime.jsx(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw:w-4.5 ${item.disabled && 'tw:!opacity-30'}` })), jsxRuntime.jsx("div", { className: `tw:text-sq-13 tw:ml-1 ${subItem.disabled
|
|
16582
|
+
? 'tw:text-sq-disabled-gray'
|
|
16583
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
|
|
16579
16584
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16580
16585
|
}
|
|
16581
16586
|
return (jsxRuntime.jsxs("div", { ...tooltipData, children: [jsxRuntime.jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16582
16587
|
item.onClick(e);
|
|
16583
|
-
}, className: `tw
|
|
16588
|
+
}, className: `tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:min-h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw:w-sq-4.5 ${item.disabled && 'tw:!opacity-30'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses || ''}`, children: item.label })] }, (item.id || item.icon || '') + index), item.hasDivider && (jsxRuntime.jsx(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw:h-px tw:bg-sq-disabled-gray tw:dark:bg-gray-500 tw:my-2" }))] }, (item.id || '') + index));
|
|
16584
16589
|
})] }) }) })] }));
|
|
16585
16590
|
};
|
|
16586
16591
|
|
|
16587
|
-
const baseClasses$2 = 'tw
|
|
16588
|
-
' tw
|
|
16589
|
-
const darkTheme$1 = 'dark:
|
|
16590
|
-
const lightTheme$1 = 'tw
|
|
16591
|
-
const errorClasses$1 = 'tw
|
|
16592
|
-
const borderColorClasses$1 = 'tw
|
|
16592
|
+
const baseClasses$2 = 'tw:mx-auto tw:leading-normal tw:outline-none tw:py-2 tw:px-3 tw:rounded-[10px] tw:w-full tw:relative' +
|
|
16593
|
+
' tw:border-solid tw:border tw:text-sm tw:flex tw:flex-col tw:justify-center tw:items-center';
|
|
16594
|
+
const darkTheme$1 = 'tw:dark:bg-sq-theme-hover-dark tw:dark:text-sq-text-color-dark';
|
|
16595
|
+
const lightTheme$1 = 'tw:text-sq-text-color tw:bg-sq-theme-highlight/10';
|
|
16596
|
+
const errorClasses$1 = 'tw:border-sq-danger';
|
|
16597
|
+
const borderColorClasses$1 = 'tw:border-sq-theme-dark';
|
|
16593
16598
|
/**
|
|
16594
16599
|
* Alert.
|
|
16595
16600
|
*/
|
|
16596
16601
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16597
16602
|
const appliedTheme = {
|
|
16598
16603
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16599
|
-
formulaError: 'tw
|
|
16600
|
-
danger: 'tw
|
|
16601
|
-
warning: 'tw
|
|
16602
|
-
gray: 'tw
|
|
16604
|
+
formulaError: 'tw:text-red-800 tw:bg-red-200 tw:!rounded-[0.25rem]',
|
|
16605
|
+
danger: 'tw:text-sq-text-color tw:bg-sq-danger',
|
|
16606
|
+
warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color',
|
|
16607
|
+
gray: 'tw:bg-sq-hover-gray tw:text-sq-text-color tw:dark:bg-sq-tools-background-dark tw:dark:text-sq-text-color-dark',
|
|
16603
16608
|
};
|
|
16604
16609
|
const appliedBorderTheme = {
|
|
16605
16610
|
theme: borderColorClasses$1,
|
|
16606
16611
|
danger: errorClasses$1,
|
|
16607
|
-
warning: 'tw
|
|
16608
|
-
gray: 'tw
|
|
16609
|
-
formulaError: 'tw
|
|
16612
|
+
warning: 'tw:border-none',
|
|
16613
|
+
gray: 'tw:border-sq-darkish-gray',
|
|
16614
|
+
formulaError: 'tw:border-red-100',
|
|
16610
16615
|
};
|
|
16611
16616
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16612
16617
|
if (!show) {
|
|
16613
16618
|
return jsxRuntime.jsx("div", {});
|
|
16614
16619
|
}
|
|
16615
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsxRuntime.jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw
|
|
16620
|
+
return (jsxRuntime.jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsxRuntime.jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw:self-end tw:text-size-11 tw:cursor-pointer tw:absolute tw:right-2.5 tw:top-2.5 ${variant.match(/danger|warning|gray|formulaError/) ? 'tw:text-sq-text-color tw:dark:text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
|
|
16616
16621
|
};
|
|
16617
16622
|
|
|
16618
16623
|
/**
|
|
@@ -16631,47 +16636,40 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16631
16636
|
* @param tooltipProps - props to pass to the tooltip
|
|
16632
16637
|
*/
|
|
16633
16638
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16634
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16635
|
-
tw
|
|
16639
|
+
const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none
|
|
16640
|
+
tw:outline-none`;
|
|
16636
16641
|
const tooltipData = getQTipData(tooltipProps);
|
|
16637
16642
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16638
|
-
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw
|
|
16643
|
+
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:sq-icon tw:dark:text-sq-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) }) }));
|
|
16639
16644
|
};
|
|
16640
16645
|
|
|
16641
16646
|
const SeeqActionDropdownItem = (item) => {
|
|
16642
16647
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16643
16648
|
if (item.icon) {
|
|
16644
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-
|
|
16645
|
-
' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
16646
|
-
item.iconExtraClassNames, ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[1.375rem] tw-text-sq-white ' +
|
|
16647
|
-
item.iconExtraClassNames }));
|
|
16649
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: item.iconExtraClassNames + 'tw:p-1 tw:h-8 tw:w-8 tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white', ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white ' + item.iconExtraClassNames }));
|
|
16648
16650
|
}
|
|
16649
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16651
|
+
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:p-2.5 tw:pl-5 tw:w-150", children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("div", { className: classNames('tw:rounded-[0.1875rem] tw:h-8 tw:w-8 tw:bg-sq-theme-dark tw:flex tw:justify-center tw:items-center ', item.iconContainerExtraClassNames), children: renderIcon }), jsxRuntime.jsx("h4", { className: "tw:text-base tw:font-[600] tw:leading-5 mb-0", children: item.display })] }), jsxRuntime.jsx("div", { className: "tw:text-sq-13 tw:font-normal", children: item.text })] }));
|
|
16650
16652
|
};
|
|
16651
16653
|
const ViewWorkbench = (item) => {
|
|
16652
16654
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16653
16655
|
if (item.icon) {
|
|
16654
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-
|
|
16655
|
-
' tw-text-sq-text-color ' +
|
|
16656
|
-
item.iconExtraClassNames, type: "default", ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
16657
|
-
' tw-text-sq-text-color ' +
|
|
16658
|
-
item.iconExtraClassNames }));
|
|
16656
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw:w-4 tw:text-5 tw:dark:text-sq-white' + ' tw:text-sq-text-color ' + item.iconExtraClassNames, type: "default", ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:text-5 tw:dark:text-sq-white tw:text-sq-text-color ' + item.iconExtraClassNames }));
|
|
16659
16657
|
}
|
|
16660
|
-
return (jsxRuntime.jsx("div", { className: "tw
|
|
16658
|
+
return (jsxRuntime.jsx("div", { className: "tw:flex-col tw:flex tw:p-2.5", children: jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("div", { className: "tw:rounded-[0.1875rem] tw:h-5 tw:w-5 tw:flex tw:justify-center tw:items-center ", children: renderIcon }), jsxRuntime.jsx("div", { className: "tw:text-sq-13", children: item.display })] }) }));
|
|
16661
16659
|
};
|
|
16662
16660
|
const InsertSeeqContent = (item) => {
|
|
16663
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16661
|
+
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:justify-start tw:p-2.5 tw:font-normal tw:text-left tw:text-sq-text-color tw:dark:text-sq-dark-text", children: [jsxRuntime.jsx("h5", { className: "tw:text-4 tw:font-medium tw:text-sq-theme-dark tw:leading-4.5", children: item.display }), jsxRuntime.jsx("div", { className: "tw:text-sq-13 tw:text-sq-text-color tw:dark:text-sq-dark-text tw:!mt-1", children: item.text })] }));
|
|
16664
16662
|
};
|
|
16665
16663
|
|
|
16666
16664
|
const borderStyles = [
|
|
16667
|
-
'tw
|
|
16668
|
-
'tw
|
|
16669
|
-
'tw
|
|
16670
|
-
'tw
|
|
16671
|
-
'dark:
|
|
16665
|
+
'tw:border-solid',
|
|
16666
|
+
'tw:border',
|
|
16667
|
+
'tw:rounded-md',
|
|
16668
|
+
'tw:border-sq-disabled-gray',
|
|
16669
|
+
'tw:dark:border-gray-500',
|
|
16672
16670
|
].join(' ');
|
|
16673
|
-
const bgStyles = ['tw
|
|
16674
|
-
const disabledClasses = ['tw
|
|
16671
|
+
const bgStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
16672
|
+
const disabledClasses = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
16675
16673
|
const renderItem = (variant, item) => {
|
|
16676
16674
|
switch (variant) {
|
|
16677
16675
|
case 'create-workbench':
|
|
@@ -16686,31 +16684,31 @@ const renderItem = (variant, item) => {
|
|
|
16686
16684
|
};
|
|
16687
16685
|
const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
|
|
16688
16686
|
const tooltipData = getQTipData(tooltipProps);
|
|
16689
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16690
|
-
' tw
|
|
16691
|
-
' data-[state=open]:
|
|
16692
|
-
' forceFont data-[side=top]:
|
|
16693
|
-
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
16687
|
+
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw:border-none tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none`, asChild: true, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw:bg-transparent tw:flex tw:flex-col tw:items-center tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}`, children: trigger }) }), jsxRuntime.jsx(Content2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: bgStyles +
|
|
16688
|
+
' tw:relative tw:z-[1200] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none' +
|
|
16689
|
+
' tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
|
|
16690
|
+
' forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ' +
|
|
16691
|
+
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500 tw:-mt-sq-7" }) })), seeqActionDropdownItems.map((item, index) => {
|
|
16694
16692
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Item2, { onSelect: (e) => {
|
|
16695
16693
|
item.action(e);
|
|
16696
|
-
}, className: `tw
|
|
16694
|
+
}, className: `tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:relative tw:select-none tw:outline-none tw:data-[disabled]:text-sq-disabled-gray tw:data-[disabled]:pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled, children: renderItem(variant, item) }), item.divider && (jsxRuntime.jsx(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw:h-px tw:bg-sq-disabled-gray tw:dark:bg-gray-500 tw:my-2" }))] }, item.display + index));
|
|
16697
16695
|
})] }) })] }));
|
|
16698
16696
|
};
|
|
16699
16697
|
|
|
16700
|
-
const baseClasses$1 = 'tw
|
|
16701
|
-
const errorClasses = 'tw
|
|
16698
|
+
const baseClasses$1 = 'tw:flex tw:outline-none tw:rounded-md tw:w-full tw:relative tw:flex-wrap';
|
|
16699
|
+
const errorClasses = 'tw:border-sq-danger';
|
|
16702
16700
|
const borderColorClasses = [
|
|
16703
|
-
'tw
|
|
16704
|
-
'dark:
|
|
16705
|
-
'dark:focus:
|
|
16706
|
-
'dark:active:
|
|
16707
|
-
'focus:
|
|
16708
|
-
'active:
|
|
16701
|
+
'tw:border-sq-disabled-gray',
|
|
16702
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
16703
|
+
'tw:dark:focus:border-sq-theme-darker',
|
|
16704
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
16705
|
+
'tw:focus:border-sq-theme-dark',
|
|
16706
|
+
'tw:active:border-sq-theme-dark',
|
|
16709
16707
|
].join(' ');
|
|
16710
|
-
const fieldBorderRadius = 'tw
|
|
16711
|
-
const fieldClasses = 'tw
|
|
16712
|
-
const darkTheme = 'dark:
|
|
16713
|
-
const lightTheme = 'tw
|
|
16708
|
+
const fieldBorderRadius = 'tw:rounded-l-md tw:rounded-r-none';
|
|
16709
|
+
const fieldClasses = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3' + 'tw:p-1 tw:border-solid tw:border';
|
|
16710
|
+
const darkTheme = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text tw:disabled:dark:text-sq-disabled-gray';
|
|
16711
|
+
const lightTheme = 'tw:text-sq-text-color tw:disabled:text-sq-darkish-gray';
|
|
16714
16712
|
/**
|
|
16715
16713
|
* InputGroup.
|
|
16716
16714
|
*/
|
|
@@ -16720,8 +16718,10 @@ const InputGroup = React.forwardRef((props, ref) => {
|
|
|
16720
16718
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16721
16719
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16722
16720
|
const elementsToAppend = append.filter(Boolean);
|
|
16723
|
-
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw
|
|
16724
|
-
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
|
|
16721
|
+
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw:flex tw:flex-1 tw:cursor-pointer tw:active:z-50 ${fieldAppliedClasses}`, children: field })) : (jsxRuntime.jsx(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw:flex tw:flex-1 tw:w-full tw:focus:z-30 tw:rounded-r-none tw:last:rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
|
|
16722
|
+
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
|
|
16723
|
+
index ? 'tw:-ml-px' : 'tw:ml-0'
|
|
16724
|
+
} tw:focus:z-40 tw:focus:border tw:rounded-none tw:last:rounded-r-md`, ...item.buttonProps }, index)) : (jsxRuntime.jsx("div", { className: `${borderColorClasses} ${index ? 'tw:-ml-px' : 'tw:ml-0'} tw:flex tw:items-center tw:justify-center tw:rounded-none tw:last:rounded-r-md tw:active:z-30 tw:active:border tw:border`, children: item?.element }, index));
|
|
16725
16725
|
})] }));
|
|
16726
16726
|
});
|
|
16727
16727
|
|
|
@@ -27595,7 +27595,7 @@ var Thumb = SliderThumb;
|
|
|
27595
27595
|
*/
|
|
27596
27596
|
const Slider = (props) => {
|
|
27597
27597
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27598
|
-
return (jsxRuntime.jsxs(Root$1, { className: `tw
|
|
27598
|
+
return (jsxRuntime.jsxs(Root$1, { className: `tw:relative tw:flex tw:h-5 tw:w-full tw:touch-none tw:select-none tw:items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsxRuntime.jsx(Track, { className: `tw:relative tw:h-sq-5 tw:grow tw:rounded-sm tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsxRuntime.jsx(Range, { className: `tw:absolute tw:h-full tw:rounded-full ${rangeExtraClassNames}` }) }), jsxRuntime.jsx(Thumb, { className: `tw:block tw:h-sq-15 tw:w-sq-15 tw:rounded-full tw:bg-sq-theme-dark tw:active:bg-sq-theme-darker tw:focus:outline-none tw:focus-visible:outline-none tw:aria-disabled:bg-sq-dark-gray tw:dark:aria-disabled:bg-sq-dark-disabled-gray tw:transition tw:ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
|
|
27599
27599
|
};
|
|
27600
27600
|
|
|
27601
27601
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28864,7 +28864,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28864
28864
|
};
|
|
28865
28865
|
}
|
|
28866
28866
|
|
|
28867
|
-
const baseLabelClasses = 'tw
|
|
28867
|
+
const baseLabelClasses = 'tw:left-1 tw:text-xs tw:text-sq-text-color tw:dark:text-sq-dark-text tw:items-center tw:h-4.5';
|
|
28868
28868
|
const ProgressIndicator = (props) => {
|
|
28869
28869
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28870
28870
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28877,19 +28877,19 @@ const ProgressIndicator = (props) => {
|
|
|
28877
28877
|
if (totalValue >= max) {
|
|
28878
28878
|
// If progress is 100%, round both ends
|
|
28879
28879
|
if (index === 0 && valuesLength === 1) {
|
|
28880
|
-
roundedCorners = 'tw
|
|
28880
|
+
roundedCorners = 'tw:rounded-[0.9375rem]';
|
|
28881
28881
|
}
|
|
28882
28882
|
else if (index === 0) {
|
|
28883
|
-
roundedCorners = 'tw
|
|
28883
|
+
roundedCorners = 'tw:rounded-l-[0.9375rem]';
|
|
28884
28884
|
}
|
|
28885
28885
|
else if (index === valuesLength - 1) {
|
|
28886
|
-
roundedCorners = 'tw
|
|
28886
|
+
roundedCorners = 'tw:rounded-r-[0.9375rem]';
|
|
28887
28887
|
}
|
|
28888
28888
|
}
|
|
28889
28889
|
else {
|
|
28890
28890
|
// Otherwise, only round the leftmost indicator
|
|
28891
28891
|
if (index === 0) {
|
|
28892
|
-
roundedCorners = 'tw
|
|
28892
|
+
roundedCorners = 'tw:rounded-l-[0.9375rem]';
|
|
28893
28893
|
}
|
|
28894
28894
|
}
|
|
28895
28895
|
React.useEffect(() => {
|
|
@@ -28901,13 +28901,13 @@ const ProgressIndicator = (props) => {
|
|
|
28901
28901
|
return () => clearTimeout(timeout);
|
|
28902
28902
|
}, [value]);
|
|
28903
28903
|
const bgColor = color || undefined;
|
|
28904
|
-
const bgClass = color ? '' : 'tw
|
|
28904
|
+
const bgClass = color ? '' : 'tw:bg-sq-theme-dark';
|
|
28905
28905
|
const computeTextClass = (elem) => {
|
|
28906
28906
|
const computedStyle = getComputedStyle(elem);
|
|
28907
28907
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28908
28908
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28909
|
-
? 'tw
|
|
28910
|
-
: 'tw
|
|
28909
|
+
? 'tw:text-sq-white tw:dark:text-sq-white'
|
|
28910
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-text-color';
|
|
28911
28911
|
setTextColorClass(textColorClass);
|
|
28912
28912
|
};
|
|
28913
28913
|
React.useEffect(() => {
|
|
@@ -28915,35 +28915,35 @@ const ProgressIndicator = (props) => {
|
|
|
28915
28915
|
computeTextClass(indicatorElementRef.current);
|
|
28916
28916
|
}
|
|
28917
28917
|
}, [!!indicatorElementRef.current]);
|
|
28918
|
-
return (React.createElement(Indicator, { className: `tw
|
|
28918
|
+
return (React.createElement(Indicator, { className: `tw:ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw:w-full tw:h-4.5 tw:duration-[660ms] tw:flex tw:justify-center tw:items-center ${valuesLength === 1 ? '' : 'tw:overflow-hidden'} ${roundedCorners} ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
|
|
28919
28919
|
// Background color will default to the theme color if undefined
|
|
28920
28920
|
backgroundColor: bgColor,
|
|
28921
28921
|
animation: 'width 660ms forwards',
|
|
28922
28922
|
width: `${animatedWidth}%`,
|
|
28923
|
-
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw
|
|
28923
|
+
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw:absolute tw:z-50' : ''}`, children: label })) : undefined));
|
|
28924
28924
|
};
|
|
28925
28925
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28926
28926
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28927
|
-
return (jsxRuntime.jsx(Root, { className: `tw
|
|
28928
|
-
return React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
|
|
28929
|
-
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw
|
|
28927
|
+
return (jsxRuntime.jsx(Root, { className: `tw:relative tw:h-4.5 tw:w-full tw:overflow-hidden tw:rounded-[0.9375rem] tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray tw:flex tw:flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
|
|
28928
|
+
return (React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i }));
|
|
28929
|
+
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw:mx-auto tw:overflow-hidden`, children: zeroValueLabel })) }));
|
|
28930
28930
|
};
|
|
28931
28931
|
|
|
28932
|
-
const baseClasses = 'tw
|
|
28932
|
+
const baseClasses = 'tw:flex tw:outline-none tw:w-full tw:relative tw:flex-wrap';
|
|
28933
28933
|
const activeClassesByVariantLightTheme = {
|
|
28934
|
-
'outline': '
|
|
28935
|
-
'theme': 'tw
|
|
28934
|
+
'outline': 'tw:!bg-sq-disabled-gray tw:border-sq-theme-dark',
|
|
28935
|
+
'theme': 'tw:bg-sq-theme-highlight',
|
|
28936
28936
|
'danger': '',
|
|
28937
28937
|
'theme-light': '',
|
|
28938
|
-
'no-border': '
|
|
28938
|
+
'no-border': 'tw:!bg-sq-disabled-gray',
|
|
28939
28939
|
'warning': '',
|
|
28940
28940
|
};
|
|
28941
28941
|
const activeClassesByVariantDarkTheme = {
|
|
28942
|
-
'outline': 'dark
|
|
28943
|
-
'theme': 'dark:
|
|
28942
|
+
'outline': 'tw:!dark:bg-sq-multi-gray-dark tw:dark:border-sq-theme-dark',
|
|
28943
|
+
'theme': 'tw:dark:bg-sq-theme-highlight',
|
|
28944
28944
|
'danger': '',
|
|
28945
28945
|
'theme-light': '',
|
|
28946
|
-
'no-border': 'dark
|
|
28946
|
+
'no-border': 'tw:!dark:bg-sq-multi-gray-dark',
|
|
28947
28947
|
'warning': '',
|
|
28948
28948
|
};
|
|
28949
28949
|
/**
|
|
@@ -28955,7 +28955,7 @@ const ButtonGroup = (props) => {
|
|
|
28955
28955
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28956
28956
|
return (jsxRuntime.jsx("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28957
28957
|
.filter(Boolean)
|
|
28958
|
-
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28958
|
+
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw:-ml-sq-1 tw:focus:z-40 tw:outline-none tw:focus:border tw:rounded-none tw:first:rounded-l-md tw:last:rounded-r-md ${item.buttonProps?.isActive
|
|
28959
28959
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28960
28960
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28961
28961
|
};
|
|
@@ -28965,7 +28965,7 @@ const ButtonGroup = (props) => {
|
|
|
28965
28965
|
* - Easily create a carousel with custom slides.
|
|
28966
28966
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28967
28967
|
*/
|
|
28968
|
-
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw
|
|
28968
|
+
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw:rotate-90', nextIcon = 'fc-arrow-dropdown tw:rotate-270', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
|
|
28969
28969
|
const [currentIndex, setCurrentIndex] = React.useState(activeIndex);
|
|
28970
28970
|
const changeSlide = (nextIndex) => {
|
|
28971
28971
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -29032,7 +29032,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
29032
29032
|
transition: springTransition,
|
|
29033
29033
|
}),
|
|
29034
29034
|
};
|
|
29035
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw
|
|
29035
|
+
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw:flex tw:flex-col tw:items-center tw:justify-center tw:w-full tw:overflow-hidden ${extraClassNames}`, children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:items-center tw:w-full tw:h-max tw:gap-1", children: [showArrows && (jsxRuntime.jsx(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw:invisible' : ''} ${iconExtraClassNames} tw:animate-fadeIn`, onClick: onBackClick })), jsxRuntime.jsx("div", { className: "tw:h-full tw:w-full tw:overflow-hidden", children: jsxRuntime.jsx(motion.div, { custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw:w-full", children: carouselItems[currentIndex] }, currentIndex) }), showArrows && (jsxRuntime.jsx(Button, { icon: nextIcon, testId: "carousel-next", size: "lg", variant: "no-border", extraClassNames: `${currentIndex === carouselItems.length - 1 && !continuous ? 'tw:invisible' : ''} ${iconExtraClassNames} tw:animate-fadeIn`, onClick: onForwardClick }))] }), showIndicators && (jsxRuntime.jsx("div", { className: "tw:flex tw:gap-1 tw:mt-2", children: carouselItems.map((_, i) => (jsxRuntime.jsx("div", { className: `tw:w-2 tw:h-2 tw:rounded-full tw:cursor-pointer ${i === currentIndex ? 'tw:bg-sq-theme-dark' : 'tw:bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) }, i))) }))] }));
|
|
29036
29036
|
};
|
|
29037
29037
|
|
|
29038
29038
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|