@seeqdev/qomponents 0.0.175 → 0.0.176
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/dist/index.esm.js +359 -341
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +359 -341
- package/dist/index.js.map +1 -1
- package/dist/styles.css +3541 -2829
- package/package.json +3 -4
- package/dist/iconFont/FontCustom.woff +0 -0
- package/dist/iconFont/FontCustom.woff2 +0 -0
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-color-dark',
|
|
70
|
+
'white': 'tw-text-white',
|
|
71
|
+
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
72
|
+
'warning': 'tw-text-sq-warning-color',
|
|
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-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-color',
|
|
80
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
81
|
+
'success': 'tw-text-sq-success-color',
|
|
82
82
|
};
|
|
83
83
|
const colorClassesThemeDark = {
|
|
84
|
-
'theme': '
|
|
84
|
+
'theme': 'dark:tw-text-sq-color-dark-dark',
|
|
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': '
|
|
88
|
+
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
89
|
+
'gray': 'dark:tw-text-sq-dark-disabled-gray',
|
|
90
90
|
'color': '',
|
|
91
|
-
'info': '
|
|
92
|
-
'text': '
|
|
91
|
+
'info': 'dark:tw-text-sq-link-dark',
|
|
92
|
+
'text': 'dark:tw-text-sq-dark-text',
|
|
93
93
|
'inherit': '',
|
|
94
|
-
'danger': 'tw
|
|
95
|
-
'theme-light': 'tw
|
|
96
|
-
'success': 'tw
|
|
94
|
+
'danger': 'tw-text-sq-danger-color',
|
|
95
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
96
|
+
'success': 'tw-text-sq-success-color',
|
|
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-color", 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} focus:tw-outline-none focus-visible:tw-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,61 +123,77 @@ 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 focus:tw-ring-0 focus-visible:tw-outline-none aria-disabled:tw-cursor-not-allowed disabled:tw-pointer-events-none';
|
|
127
127
|
const baseClassesByVariant = {
|
|
128
|
-
'outline': 'tw
|
|
129
|
-
'theme': 'tw
|
|
130
|
-
'danger': 'tw
|
|
131
|
-
'tw
|
|
132
|
-
'theme-light': 'tw
|
|
133
|
-
'no-border': 'tw
|
|
134
|
-
'warning': 'tw
|
|
128
|
+
'outline': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
129
|
+
'theme': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
130
|
+
'danger': 'tw-bg-sq-danger-color disabled:tw-opacity-50 aria-disabled:tw-opacity-50 ' +
|
|
131
|
+
'tw-border-solid tw-border tw-border-sq-danger-color',
|
|
132
|
+
'theme-light': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
133
|
+
'no-border': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
134
|
+
'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color ' +
|
|
135
|
+
'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
135
136
|
};
|
|
136
137
|
const textClassesByVariantLightTheme = {
|
|
137
|
-
'outline': 'tw
|
|
138
|
-
'theme': 'tw
|
|
139
|
-
'theme-light': 'tw
|
|
140
|
-
'danger': 'tw
|
|
141
|
-
'no-border': 'tw
|
|
142
|
-
'warning': 'tw
|
|
138
|
+
'outline': 'tw-text-sq-text-color',
|
|
139
|
+
'theme': 'tw-text-white',
|
|
140
|
+
'theme-light': 'tw-text-white',
|
|
141
|
+
'danger': 'tw-text-white',
|
|
142
|
+
'no-border': 'tw-text-sq-text-color',
|
|
143
|
+
'warning': 'tw-text-white',
|
|
143
144
|
};
|
|
144
145
|
const textClassesByVariantDarkTheme = {
|
|
145
|
-
'outline': '
|
|
146
|
-
'theme': '
|
|
147
|
-
'theme-light': '
|
|
148
|
-
'danger': '
|
|
149
|
-
'no-border': '
|
|
150
|
-
'warning': '
|
|
146
|
+
'outline': 'dark:tw-text-sq-dark-text',
|
|
147
|
+
'theme': 'dark:tw-text-white',
|
|
148
|
+
'theme-light': 'dark:tw-text-white',
|
|
149
|
+
'danger': 'dark:tw-text-white',
|
|
150
|
+
'no-border': 'dark:tw-text-sq-dark-text',
|
|
151
|
+
'warning': 'dark:tw-text-white',
|
|
151
152
|
};
|
|
152
153
|
const classesByVariantLightTheme = {
|
|
153
|
-
'outline': 'tw
|
|
154
|
-
|
|
155
|
-
'theme': 'tw:bg-sq-theme-dark tw:hover:bg-sq-theme-highlight tw:border-sq-theme-dark' +
|
|
156
|
-
' tw:hover:border-sq-theme-highlight',
|
|
154
|
+
'outline': 'tw-bg-white tw-border-sq-disabled-gray',
|
|
155
|
+
'theme': 'tw-bg-sq-color-dark tw-border-sq-color-dark',
|
|
157
156
|
'danger': '',
|
|
158
|
-
'theme-light': 'tw
|
|
157
|
+
'theme-light': 'tw-bg-sq-icon',
|
|
159
158
|
'no-border': '',
|
|
160
159
|
'warning': '',
|
|
161
160
|
};
|
|
162
161
|
const classesByVariantDarkTheme = {
|
|
163
|
-
'outline': '
|
|
164
|
-
|
|
165
|
-
' tw:dark:active:border-sq-theme-dark',
|
|
166
|
-
'theme': 'tw:dark:bg-sq-theme-dark tw:dark:hover:bg-sq-theme-highlight tw:dark:border-sq-theme-dark' +
|
|
167
|
-
' tw:dark:hover:border-sq-theme-highlight',
|
|
162
|
+
'outline': 'dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-disabled-gray',
|
|
163
|
+
'theme': 'dark:tw-bg-sq-color-dark dark:tw-border-sq-color-dark',
|
|
168
164
|
'danger': '',
|
|
169
|
-
'theme-light': '
|
|
170
|
-
|
|
165
|
+
'theme-light': 'dark:tw-bg-sq-icon-dark dark:tw-border-sq-icon-dark',
|
|
166
|
+
'no-border': '',
|
|
167
|
+
'warning': '',
|
|
168
|
+
};
|
|
169
|
+
const activeClassesByVariantLightTheme = {
|
|
170
|
+
'outline': 'hover:tw-bg-sq-light-gray focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark' +
|
|
171
|
+
' active:tw-border-sq-color-dark',
|
|
172
|
+
'theme': 'hover:tw-bg-sq-color-highlight hover:tw-border-sq-color-highlight',
|
|
173
|
+
'danger': 'hover:tw-bg-sq-danger-color-hover hover:tw-border-sq-danger-color-hover',
|
|
174
|
+
'theme-light': 'hover:tw-bg-sq-link hover:tw-border-sq-link',
|
|
175
|
+
'no-border': '',
|
|
176
|
+
'warning': '',
|
|
177
|
+
};
|
|
178
|
+
const activeClassesByVariantDarkTheme = {
|
|
179
|
+
'outline': 'dark:hover:tw-bg-sq-highlight-color-dark dark:focus:tw-bg-sq-multi-gray-dark' +
|
|
180
|
+
' dark:active:tw-bg-sq-multi-gray-dark dark:focus:tw-border-sq-color-dark dark:active:tw-border-sq-color-dark',
|
|
181
|
+
'theme': 'dark:hover:tw-bg-sq-color-highlight dark:hover:tw-border-sq-color-highlight',
|
|
182
|
+
'danger': 'dark:hover:tw-bg-sq-danger-color-hover dark:hover:tw-border-sq-danger-color-hover',
|
|
183
|
+
'theme-light': 'dark:hover:tw-bg-sq-link-dark dark:hover:tw-border-sq-link-dark',
|
|
171
184
|
'no-border': '',
|
|
172
185
|
'warning': '',
|
|
173
186
|
};
|
|
174
187
|
const sizeClasses = {
|
|
175
|
-
xs: 'tw
|
|
176
|
-
sm: 'tw
|
|
177
|
-
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',
|
|
178
191
|
};
|
|
179
|
-
const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
180
192
|
let tooltipData = undefined;
|
|
193
|
+
let appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
194
|
+
if (!disabled) {
|
|
195
|
+
appliedClasses += ` ${activeClassesByVariantLightTheme[variant]} ${activeClassesByVariantDarkTheme[variant]}`;
|
|
196
|
+
}
|
|
181
197
|
if (tooltip) {
|
|
182
198
|
tooltipData = {
|
|
183
199
|
'data-qtip-text': tooltip,
|
|
@@ -187,13 +203,15 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
187
203
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
188
204
|
};
|
|
189
205
|
}
|
|
190
|
-
const iconClass = iconPosition === 'left' ? 'tw
|
|
206
|
+
const iconClass = iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1';
|
|
191
207
|
const iconElement = icon && (jsxRuntime.jsx(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
192
208
|
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
193
209
|
: '', testId: `${id}_spinner` }));
|
|
194
|
-
return (jsxRuntime.jsxs("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
210
|
+
return (jsxRuntime.jsxs("button", { id: id, ...tooltipData, disabled: disabled && !tooltip, "aria-disabled": disabled, "data-testid": testId, tabIndex: disabled ? -1 : undefined, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
195
211
|
stopPropagation && e.stopPropagation();
|
|
196
|
-
|
|
212
|
+
if (!disabled) {
|
|
213
|
+
onClick?.(e);
|
|
214
|
+
}
|
|
197
215
|
}, onMouseDown: (e) => {
|
|
198
216
|
if (preventBlur) {
|
|
199
217
|
e.preventDefault();
|
|
@@ -4779,30 +4797,31 @@ function getSvgIconPath(icon) {
|
|
|
4779
4797
|
}
|
|
4780
4798
|
|
|
4781
4799
|
const popoverBorderStyles = [
|
|
4782
|
-
'tw
|
|
4783
|
-
'tw
|
|
4784
|
-
'tw
|
|
4785
|
-
'tw
|
|
4786
|
-
'
|
|
4800
|
+
'tw-border-solid',
|
|
4801
|
+
'tw-border',
|
|
4802
|
+
'tw-rounded-md',
|
|
4803
|
+
'tw-border-sq-disabled-gray',
|
|
4804
|
+
'dark:tw-border-gray-500',
|
|
4787
4805
|
].join(' ');
|
|
4788
4806
|
const triggerBackgroundStyles = [
|
|
4789
|
-
'tw
|
|
4790
|
-
'
|
|
4791
|
-
'
|
|
4792
|
-
'
|
|
4793
|
-
'
|
|
4794
|
-
'
|
|
4807
|
+
'tw-bg-transparent',
|
|
4808
|
+
'hover:tw-bg-sq-worksheetspanel-gray',
|
|
4809
|
+
'active:tw-bg-sq-worksheetspanel-gray',
|
|
4810
|
+
'dark:tw-bg-transparent',
|
|
4811
|
+
'dark:hover:tw-bg-sq-field-disabled-gray',
|
|
4812
|
+
'dark:active:tw-bg-sq-field-disabled-gray',
|
|
4795
4813
|
].join(' ');
|
|
4796
4814
|
const activeBackgroundStyles = [
|
|
4797
4815
|
'active',
|
|
4798
|
-
'tw
|
|
4799
|
-
'tw
|
|
4800
|
-
'tw
|
|
4801
|
-
'
|
|
4802
|
-
'
|
|
4816
|
+
'tw-bg-sq-overlay-gray',
|
|
4817
|
+
'hover:tw-bg-sq-overlay-gray',
|
|
4818
|
+
'active:tw-bg-sq-overlay-gray',
|
|
4819
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
4820
|
+
'dark:hover:tw-border-sq-dark-disabled-gray',
|
|
4821
|
+
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4803
4822
|
].join(' ');
|
|
4804
|
-
const bgStyles$3 = ['tw
|
|
4805
|
-
const disabledClasses$4 = ['tw
|
|
4823
|
+
const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
4824
|
+
const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
4806
4825
|
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 })));
|
|
4807
4826
|
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, }) => {
|
|
4808
4827
|
let tooltipData = undefined;
|
|
@@ -4820,12 +4839,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4820
4839
|
onHide && onHide();
|
|
4821
4840
|
}
|
|
4822
4841
|
};
|
|
4823
|
-
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw
|
|
4842
|
+
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw-border-none tw-mx-[1.5px] first:tw-ml-0 last:tw-mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4824
4843
|
onClick && onClick(e);
|
|
4825
|
-
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw
|
|
4826
|
-
' tw
|
|
4827
|
-
'
|
|
4828
|
-
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
4844
|
+
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw-flex tw-flex-col tw-items-center tw-rounded-md ${isSmall ? 'tw-py-[1px] tw-px-1' : 'tw-px-2 tw-py-[5px]'} ${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 dark:tw-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", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-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 dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[0.5rem]", type: "text" })) : undefined] }), !isSmall && (jsxRuntime.jsx("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[0.625rem]", children: label }))] }) }), !!popoverContent ? (jsxRuntime.jsx(PopoverContent, { sideOffset: 2, align: "start", children: jsxRuntime.jsxs("div", { className: bgStyles$3 +
|
|
4845
|
+
' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
|
|
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-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }) })), popoverContent] }) })) : undefined] }));
|
|
4829
4848
|
};
|
|
4830
4849
|
|
|
4831
4850
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4842,24 +4861,24 @@ const setValidInputDimension = (width, height) => {
|
|
|
4842
4861
|
return inputStyle;
|
|
4843
4862
|
};
|
|
4844
4863
|
|
|
4845
|
-
const errorClasses$4 = 'tw
|
|
4864
|
+
const errorClasses$4 = 'tw-border-sq-danger-color';
|
|
4846
4865
|
const borderColorClasses$4 = [
|
|
4847
|
-
'tw
|
|
4848
|
-
'
|
|
4849
|
-
'
|
|
4850
|
-
'
|
|
4851
|
-
'
|
|
4852
|
-
'
|
|
4866
|
+
'tw-border-sq-disabled-gray',
|
|
4867
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4868
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4869
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4870
|
+
'focus:tw-border-sq-color-dark',
|
|
4871
|
+
'active:tw-border-sq-color-dark',
|
|
4853
4872
|
].join(' ');
|
|
4854
|
-
const baseClasses$6 = 'tw
|
|
4855
|
-
'
|
|
4856
|
-
'
|
|
4857
|
-
'
|
|
4858
|
-
const darkTheme$3 = '
|
|
4859
|
-
const lightTheme$3 = 'tw
|
|
4873
|
+
const baseClasses$6 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
|
|
4874
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4875
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
|
|
4876
|
+
' dark:tw-placeholder-sq-dark-text-lighter specTextField';
|
|
4877
|
+
const darkTheme$3 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4878
|
+
const lightTheme$3 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
4860
4879
|
const sizeClasses = {
|
|
4861
|
-
sm: 'tw
|
|
4862
|
-
lg: 'tw
|
|
4880
|
+
sm: 'tw-text-sm',
|
|
4881
|
+
lg: 'tw-text-xl',
|
|
4863
4882
|
};
|
|
4864
4883
|
/**
|
|
4865
4884
|
* Textfield.
|
|
@@ -4901,12 +4920,12 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4901
4920
|
internalRef.current.value = `${value}`;
|
|
4902
4921
|
}
|
|
4903
4922
|
}, [value]);
|
|
4904
|
-
let borderRadius = 'tw
|
|
4923
|
+
let borderRadius = 'tw-rounded-md';
|
|
4905
4924
|
if (inputGroup === 'left') {
|
|
4906
|
-
borderRadius = 'tw
|
|
4925
|
+
borderRadius = 'tw-rounded-l-md tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
|
|
4907
4926
|
}
|
|
4908
4927
|
else if (inputGroup === 'right') {
|
|
4909
|
-
borderRadius = 'tw
|
|
4928
|
+
borderRadius = 'tw-rounded-r-md tw-border-l-0 focus:tw-border-l active:tw-border-l';
|
|
4910
4929
|
}
|
|
4911
4930
|
const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
|
|
4912
4931
|
const inputProp = setValidInputDimension(inputWidth, inputHeight)
|
|
@@ -4919,18 +4938,18 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4919
4938
|
inputLenghtProp.maxLength = maxLength;
|
|
4920
4939
|
if (minLength)
|
|
4921
4940
|
inputLenghtProp.minLength = minLength;
|
|
4922
|
-
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
|
|
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-text-sq-danger-color tw-text-xs tw-mt-1", children: errorText })] }));
|
|
4923
4942
|
});
|
|
4924
4943
|
|
|
4925
|
-
const alignment = 'tw
|
|
4926
|
-
const labelClasses = 'tw
|
|
4927
|
-
const baseClasses$5 = 'tw
|
|
4928
|
-
'
|
|
4929
|
-
'
|
|
4930
|
-
'
|
|
4931
|
-
'
|
|
4932
|
-
const checkboxClasses = `tw
|
|
4933
|
-
const radioClasses = `tw
|
|
4944
|
+
const alignment = 'tw-flex';
|
|
4945
|
+
const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
|
|
4946
|
+
const baseClasses$5 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
|
|
4947
|
+
' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
|
|
4948
|
+
' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
|
|
4949
|
+
' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
|
|
4950
|
+
' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
|
|
4951
|
+
const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$5}`;
|
|
4952
|
+
const radioClasses = `tw-form-radio ${baseClasses$5}`;
|
|
4934
4953
|
/**
|
|
4935
4954
|
* Checkbox and Radio Box Component.
|
|
4936
4955
|
*/
|
|
@@ -4938,25 +4957,26 @@ const Checkbox = (props) => {
|
|
|
4938
4957
|
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
|
|
4939
4958
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
4940
4959
|
const tooltipData = getQTipData(tooltipProps);
|
|
4941
|
-
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
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
};
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
'
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
const
|
|
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-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }), label &&
|
|
4961
|
+
jsxRuntime.jsx("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
4962
|
+
? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
|
|
4963
|
+
: 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}`, children: label })] }));
|
|
4964
|
+
};
|
|
4965
|
+
|
|
4966
|
+
const baseClasses$4 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-md tw-w-full' +
|
|
4967
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4968
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
|
|
4969
|
+
const darkTheme$2 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
|
|
4970
|
+
'dark:tw-placeholder-sq-dark-text-lighter disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4971
|
+
const lightTheme$2 = 'tw-text-sq-text-color tw-placeholder-gray-400 disabled:tw-text-sq-darkish-gray';
|
|
4972
|
+
const errorClasses$3 = 'tw-border-sq-danger-color';
|
|
4953
4973
|
const borderColorClasses$3 = [
|
|
4954
|
-
'tw
|
|
4955
|
-
'
|
|
4956
|
-
'
|
|
4957
|
-
'
|
|
4958
|
-
'
|
|
4959
|
-
'
|
|
4974
|
+
'tw-border-sq-disabled-gray',
|
|
4975
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4976
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4977
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4978
|
+
'focus:tw-border-sq-color-dark',
|
|
4979
|
+
'active:tw-border-sq-color-dark',
|
|
4960
4980
|
].join(' ');
|
|
4961
4981
|
/**
|
|
4962
4982
|
* TextArea.
|
|
@@ -5005,25 +5025,25 @@ const TextArea = React.forwardRef(({ readonly = false, disabled = false, onChang
|
|
|
5005
5025
|
* display correctly.
|
|
5006
5026
|
*/
|
|
5007
5027
|
const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
5008
|
-
const arrowBaseClasses =
|
|
5009
|
-
const centerArrowVertically = '
|
|
5010
|
-
const centerArrowHorizontally = '
|
|
5011
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically}
|
|
5012
|
-
|
|
5013
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically}
|
|
5014
|
-
|
|
5015
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
5016
|
-
|
|
5017
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
5018
|
-
|
|
5028
|
+
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
5029
|
+
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
5030
|
+
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
5031
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
5032
|
+
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
5033
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
5034
|
+
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
5035
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
5036
|
+
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
5037
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
5038
|
+
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
5019
5039
|
const placements = {
|
|
5020
|
-
top:
|
|
5021
|
-
left:
|
|
5022
|
-
right: `tw
|
|
5023
|
-
bottom:
|
|
5040
|
+
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
5041
|
+
left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
|
|
5042
|
+
right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
|
|
5043
|
+
bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
|
|
5024
5044
|
};
|
|
5025
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
5026
|
-
tw
|
|
5045
|
+
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 group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
5046
|
+
tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`, children: text })] }));
|
|
5027
5047
|
};
|
|
5028
5048
|
|
|
5029
5049
|
/*! @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 */
|
|
@@ -7509,8 +7529,8 @@ const QTip = () => {
|
|
|
7509
7529
|
: positionTooltip();
|
|
7510
7530
|
}
|
|
7511
7531
|
};
|
|
7512
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw
|
|
7513
|
-
(show ? 'tw
|
|
7532
|
+
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-white tw-z-[9999] fade-in ' +
|
|
7533
|
+
(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-[10px] tw-h-[10px] tw-rotate-45 tw-bg-black", ref: tooltipArrowRef })] }) }));
|
|
7514
7534
|
};
|
|
7515
7535
|
|
|
7516
7536
|
function _typeof$1(o) {
|
|
@@ -13925,77 +13945,70 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
13925
13945
|
});
|
|
13926
13946
|
var CreatableSelect$1 = CreatableSelect;
|
|
13927
13947
|
|
|
13928
|
-
const baseClasses$3 = ['
|
|
13929
|
-
const containerStyles = ['tw
|
|
13930
|
-
const errorClasses$2 = 'tw
|
|
13931
|
-
const borderColorClasses$2 = ['tw
|
|
13932
|
-
const borderStyles$3 = ['tw
|
|
13948
|
+
const baseClasses$3 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
|
|
13949
|
+
const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
13950
|
+
const errorClasses$2 = 'tw-border-sq-danger-color';
|
|
13951
|
+
const borderColorClasses$2 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
|
|
13952
|
+
const borderStyles$3 = ['tw-border-solid', 'tw-border'].join(' ');
|
|
13933
13953
|
const borderActiveClasses = [
|
|
13934
|
-
'
|
|
13935
|
-
'
|
|
13936
|
-
'
|
|
13937
|
-
'
|
|
13938
|
-
'
|
|
13939
|
-
'
|
|
13954
|
+
'hover:tw-border-sq-color-dark',
|
|
13955
|
+
'focus-within:tw-border-sq-color-dark',
|
|
13956
|
+
'active:tw-border-sq-color-dark',
|
|
13957
|
+
'dark:hover:tw-border-sq-color-dark-dark',
|
|
13958
|
+
'dark:focus-within:tw-border-sq-color-dark-dark',
|
|
13959
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
13940
13960
|
].join(' ');
|
|
13941
|
-
const textStyles = ['tw
|
|
13961
|
+
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
13942
13962
|
const textActiveStyles = [
|
|
13943
|
-
'
|
|
13944
|
-
'tw
|
|
13945
|
-
'
|
|
13946
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13947
|
-
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13948
|
-
'tw:dark:focus:text-sq-theme-dark-dark',
|
|
13949
|
-
'tw:dark:active:text-sq-theme-dark-dark',
|
|
13950
|
-
'tw:hover:text-sq-color-dark',
|
|
13951
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13952
|
-
'tw:dark:hover:text-sq-color-dark-dark',
|
|
13963
|
+
'hover:tw-text-sq-color-dark',
|
|
13964
|
+
'dark:tw-text-sq-dark-disabled-gray',
|
|
13965
|
+
'dark:hover:tw-text-sq-color-dark-dark',
|
|
13953
13966
|
].join(' ');
|
|
13954
13967
|
const menuStyles = [
|
|
13955
|
-
'tw
|
|
13956
|
-
'tw
|
|
13957
|
-
'tw
|
|
13958
|
-
'tw
|
|
13959
|
-
'
|
|
13960
|
-
'tw
|
|
13961
|
-
'tw
|
|
13962
|
-
'!tw
|
|
13968
|
+
'tw-border-solid',
|
|
13969
|
+
'tw-border',
|
|
13970
|
+
'tw-rounded-b',
|
|
13971
|
+
'tw-border-sq-disabled-gray',
|
|
13972
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
13973
|
+
'tw-whitespace-nowrap',
|
|
13974
|
+
'tw-min-w-fit',
|
|
13975
|
+
'!tw-z-[9999]',
|
|
13963
13976
|
].join(' ');
|
|
13964
13977
|
const menuListStyles = [
|
|
13965
|
-
'tw
|
|
13966
|
-
'tw
|
|
13967
|
-
'
|
|
13968
|
-
'tw
|
|
13969
|
-
'!tw
|
|
13978
|
+
'tw-rounded-b',
|
|
13979
|
+
'tw-bg-white',
|
|
13980
|
+
'dark:tw-bg-sq-dark-background',
|
|
13981
|
+
'tw-min-w-fit',
|
|
13982
|
+
'!tw-z-[9999]',
|
|
13970
13983
|
'specSelectMenu',
|
|
13971
13984
|
].join(' ');
|
|
13972
13985
|
const groupHeadingStyles = [
|
|
13973
|
-
'tw
|
|
13974
|
-
'
|
|
13975
|
-
'tw
|
|
13976
|
-
'tw
|
|
13977
|
-
'tw
|
|
13986
|
+
'tw-bg-sq-light-gray',
|
|
13987
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
13988
|
+
'tw-text-sq-darkish-gray',
|
|
13989
|
+
'tw-py-1',
|
|
13990
|
+
'tw-px-2.5',
|
|
13978
13991
|
'specSelectGroupHeading',
|
|
13979
13992
|
].join(' ');
|
|
13980
13993
|
const optionStyles = [
|
|
13981
|
-
'
|
|
13982
|
-
'
|
|
13983
|
-
'
|
|
13984
|
-
'tw
|
|
13985
|
-
'tw
|
|
13994
|
+
'hover:tw-bg-sq-gray-highlight',
|
|
13995
|
+
'hover:tw-cursor-pointer',
|
|
13996
|
+
'dark:hover:tw-bg-sq-gray-highlight-dark',
|
|
13997
|
+
'tw-py-1',
|
|
13998
|
+
'tw-px-2.5',
|
|
13986
13999
|
'specSelectOption',
|
|
13987
14000
|
].join(' ');
|
|
13988
|
-
const disabledClasses$3 = ['tw
|
|
13989
|
-
const dropDownIndicatorStyles = `tw
|
|
13990
|
-
const placeholderStyles = ['tw
|
|
14001
|
+
const disabledClasses$3 = ['tw-bg-sq-field-disabled-gray', '!tw-cursor-not-allowed', 'tw-opacity-50'].join(' ');
|
|
14002
|
+
const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
14003
|
+
const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
13991
14004
|
const multiValueStyles = [
|
|
13992
|
-
'tw
|
|
13993
|
-
'
|
|
13994
|
-
'tw
|
|
13995
|
-
'tw
|
|
13996
|
-
'tw
|
|
13997
|
-
'tw
|
|
13998
|
-
'tw
|
|
14005
|
+
'tw-bg-sq-disabled-gray',
|
|
14006
|
+
'dark:tw-bg-sq-multi-gray-dark',
|
|
14007
|
+
'tw-text-sm',
|
|
14008
|
+
'tw-py-0.5',
|
|
14009
|
+
'tw-px-1',
|
|
14010
|
+
'tw-m-0.5',
|
|
14011
|
+
'tw-rounded-sm',
|
|
13999
14012
|
'specOpenSelect',
|
|
14000
14013
|
].join(' ');
|
|
14001
14014
|
/**
|
|
@@ -14060,38 +14073,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14060
14073
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14061
14074
|
classNames: {
|
|
14062
14075
|
control: ({ menuIsOpen }) => {
|
|
14063
|
-
let border = menuIsOpen ? 'tw
|
|
14076
|
+
let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14064
14077
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14065
14078
|
if (inputGroup === 'left') {
|
|
14066
|
-
border = menuIsOpen ? 'tw
|
|
14079
|
+
border = menuIsOpen ? 'tw-rounded-tl-md' : 'tw-rounded-l-md';
|
|
14067
14080
|
}
|
|
14068
14081
|
else if (inputGroup === 'right') {
|
|
14069
|
-
border = menuIsOpen ? 'tw
|
|
14082
|
+
border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
|
|
14070
14083
|
}
|
|
14071
14084
|
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14072
|
-
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw
|
|
14085
|
+
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
|
|
14073
14086
|
},
|
|
14074
14087
|
placeholder: () => placeholderStyles,
|
|
14075
14088
|
container: ({ selectProps }) => {
|
|
14076
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14077
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw
|
|
14089
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14090
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw-pointer-events-auto`;
|
|
14078
14091
|
},
|
|
14079
14092
|
input: () => textStyles + ' specSelectInput',
|
|
14080
14093
|
menuList: () => menuListStyles,
|
|
14081
14094
|
menu: () => menuStyles,
|
|
14082
|
-
menuPortal: () => '!tw
|
|
14095
|
+
menuPortal: () => '!tw-z-[9000]',
|
|
14083
14096
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14084
14097
|
option: ({ isSelected, isDisabled }) => {
|
|
14085
14098
|
let classes = optionStyles;
|
|
14086
14099
|
if (isDisabled) {
|
|
14087
14100
|
classes += ' specDisabledOption ';
|
|
14088
14101
|
}
|
|
14089
|
-
return isSelected ? classes + ' tw
|
|
14102
|
+
return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
14090
14103
|
},
|
|
14091
14104
|
singleValue: () => 'specOpenSelect',
|
|
14092
14105
|
multiValue: () => multiValueStyles,
|
|
14093
|
-
multiValueRemove: () => '
|
|
14094
|
-
clearIndicator: () => 'tw
|
|
14106
|
+
multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
|
|
14107
|
+
clearIndicator: () => 'tw-text-sq-disabled-gray hover:tw-text-sq-danger-color specClearSelect',
|
|
14095
14108
|
group: () => 'specSelectGroup',
|
|
14096
14109
|
groupHeading: () => groupHeadingStyles,
|
|
14097
14110
|
},
|
|
@@ -14481,11 +14494,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14481
14494
|
const Dialog = Root$4;
|
|
14482
14495
|
const DialogPortal = Portal$1;
|
|
14483
14496
|
const DialogClose = Close;
|
|
14484
|
-
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("div", { className: "tw
|
|
14485
|
-
tw
|
|
14486
|
-
tw
|
|
14497
|
+
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 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n 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
|
|
14498
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14499
|
+
tw-rounded-lg ${className}`, ...props, children: [jsxRuntime.jsx(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
|
|
14487
14500
|
DialogContent.displayName = Content$2.displayName;
|
|
14488
|
-
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw
|
|
14501
|
+
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw-w-full tw-justify-between", children: jsxRuntime.jsx("div", { ...props }) }));
|
|
14489
14502
|
DialogHeader.displayName = 'DialogHeader';
|
|
14490
14503
|
const DialogFooter = (props) => jsxRuntime.jsx("div", { ...props });
|
|
14491
14504
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14523,26 +14536,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14523
14536
|
let titleIconElement = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
14524
14537
|
if (titleIcon) {
|
|
14525
14538
|
if (typeof titleIcon === 'string') {
|
|
14526
|
-
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw
|
|
14539
|
+
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" }));
|
|
14527
14540
|
}
|
|
14528
14541
|
else {
|
|
14529
|
-
titleIconElement = jsxRuntime.jsx("div", { className: "tw
|
|
14542
|
+
titleIconElement = jsxRuntime.jsx("div", { className: "tw-mt-1.5", children: titleIcon });
|
|
14530
14543
|
}
|
|
14531
14544
|
}
|
|
14532
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw
|
|
14545
|
+
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-color 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, {})] }));
|
|
14533
14546
|
};
|
|
14534
|
-
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
|
|
14535
|
-
'tw
|
|
14536
|
-
'tw
|
|
14537
|
-
'tw
|
|
14538
|
-
'tw
|
|
14539
|
-
'tw
|
|
14540
|
-
'tw
|
|
14541
|
-
'tw
|
|
14542
|
-
'tw
|
|
14543
|
-
'tw
|
|
14544
|
-
'tw
|
|
14545
|
-
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw
|
|
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-w-full !tw-p-0 tw-border-none tw-shadow-none dark:tw-text-sq-dark-text !tw-gap-0`, {
|
|
14548
|
+
'tw-max-w-xs': size === 'xs',
|
|
14549
|
+
'tw-max-w-sm': size === 'sm',
|
|
14550
|
+
'tw-max-w-md': size === 'md',
|
|
14551
|
+
'tw-max-w-lg': size === 'lg',
|
|
14552
|
+
'tw-max-w-xl': size === 'xl',
|
|
14553
|
+
'tw-max-w-2xl': size === '2xl',
|
|
14554
|
+
'tw-max-w-3xl': size === '3xl',
|
|
14555
|
+
'tw-max-w-4xl': size === '4xl',
|
|
14556
|
+
'tw-max-w-5xl': size === '5xl',
|
|
14557
|
+
'tw-max-w-6xl': size === '6xl',
|
|
14558
|
+
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n dark:tw-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: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-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-[100px]", 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-[100px]", 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-[100px]" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
14546
14559
|
};
|
|
14547
14560
|
|
|
14548
14561
|
function createCollection(name) {
|
|
@@ -15000,11 +15013,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
15000
15013
|
return;
|
|
15001
15014
|
onTabSelect && onTabSelect(tabId);
|
|
15002
15015
|
};
|
|
15003
|
-
return (jsxRuntime.jsxs(Root2$2, { className: `tw
|
|
15004
|
-
? 'tw
|
|
15005
|
-
: '
|
|
15006
|
-
? '
|
|
15007
|
-
: '
|
|
15016
|
+
return (jsxRuntime.jsxs(Root2$2, { className: `tw-flex tw-flex-col tw-min-w-[300px] tw-max-w-full tw-flex-grow focus-visible:tw-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 dark:tw-bg-sq-dark-background tw-h-[25px] focus-visible:tw-outline-none tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
|
|
15017
|
+
? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
|
|
15018
|
+
: 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]", children: [icon && jsxRuntime.jsx(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[0.9375rem] tw-mr-[7px] tw-flex-shrink-0" }), jsxRuntime.jsx("span", { className: `tw-text-[0.875rem] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
|
|
15019
|
+
? 'dark:tw-text-sq-dark-text tw-text-gray-500'
|
|
15020
|
+
: 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsxRuntime.jsx(Content$1, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] dark:tw-border-gray-700 tw-z-[500] tw-flex tw-flex-col tw-flex-grow focus-visible:tw-outline-none ${tab.tabContentExtraClassNames || ''}`, value: tab.id, children: tab.content }, `${tab.label}_${index}_content`)))] }));
|
|
15008
15021
|
};
|
|
15009
15022
|
|
|
15010
15023
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15429,18 +15442,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15429
15442
|
var Content2$2 = AccordionContent;
|
|
15430
15443
|
|
|
15431
15444
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15432
|
-
return (jsxRuntime.jsx(Root2$1, { className: `tw
|
|
15445
|
+
return (jsxRuntime.jsx(Root2$1, { className: `tw-rounded-md tw-w-full focus-visible:tw-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-bg-transparent 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 focus-visible:tw-outline-none`, children: item.trigger }), jsxRuntime.jsx(Content2$2, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}`, children: item.content })] }, item.value))) }));
|
|
15433
15446
|
};
|
|
15434
15447
|
|
|
15435
|
-
const bgStyles$2 = ['tw
|
|
15448
|
+
const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
15436
15449
|
const borderStyles$2 = [
|
|
15437
|
-
'tw
|
|
15438
|
-
'tw
|
|
15439
|
-
'tw
|
|
15440
|
-
'tw
|
|
15441
|
-
'
|
|
15450
|
+
'tw-border-solid',
|
|
15451
|
+
'tw-border',
|
|
15452
|
+
'tw-rounded-popover',
|
|
15453
|
+
'tw-border-sq-disabled-gray',
|
|
15454
|
+
'dark:tw-border-gray-500',
|
|
15442
15455
|
].join(' ');
|
|
15443
|
-
const disabledClasses$2 = ['tw
|
|
15456
|
+
const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15444
15457
|
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 }) => {
|
|
15445
15458
|
const tooltipData = getQTipData(tooltipProps);
|
|
15446
15459
|
const timeout = React.useRef(null);
|
|
@@ -15471,12 +15484,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15471
15484
|
};
|
|
15472
15485
|
React__namespace.useEffect(() => clearHoverTimeout, []);
|
|
15473
15486
|
const renderContent = () => {
|
|
15474
|
-
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:tw
|
|
15475
|
-
|
|
15476
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw
|
|
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:tw-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 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
15488
|
+
data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
|
|
15489
|
+
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }) })), children] }) }));
|
|
15477
15490
|
};
|
|
15478
15491
|
const renderPopover = (popoverOpenState) => {
|
|
15479
|
-
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `
|
|
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:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${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()] }));
|
|
15480
15493
|
};
|
|
15481
15494
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15482
15495
|
};
|
|
@@ -16541,65 +16554,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16541
16554
|
var SubContent2 = DropdownMenuSubContent;
|
|
16542
16555
|
|
|
16543
16556
|
const borderStyles$1 = [
|
|
16544
|
-
'tw
|
|
16545
|
-
'tw
|
|
16546
|
-
'tw
|
|
16547
|
-
'tw
|
|
16548
|
-
'
|
|
16557
|
+
'tw-border-solid',
|
|
16558
|
+
'tw-border',
|
|
16559
|
+
'tw-rounded-popover',
|
|
16560
|
+
'tw-border-sq-disabled-gray',
|
|
16561
|
+
'dark:tw-border-gray-500',
|
|
16549
16562
|
].join(' ');
|
|
16550
|
-
const bgStyles$1 = ['tw
|
|
16551
|
-
const disabledClasses$1 = ['tw
|
|
16563
|
+
const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16564
|
+
const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16552
16565
|
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 }) => {
|
|
16553
16566
|
const tooltipData = getQTipData(tooltipProps);
|
|
16554
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw
|
|
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:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-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: "focus-visible:tw-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 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles$1} ${contentExtraClassNames}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }) })), dropdownItems.map((item, index) => {
|
|
16555
16568
|
const tooltipData = getQTipData(item);
|
|
16556
16569
|
if (item.isLabel) {
|
|
16557
|
-
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
|
|
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-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: item.label })] }, (item.id || '') + index));
|
|
16558
16571
|
}
|
|
16559
16572
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16560
|
-
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw
|
|
16561
|
-
? '!tw
|
|
16562
|
-
: 'tw
|
|
16563
|
-
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16564
|
-
? 'tw
|
|
16565
|
-
: 'tw
|
|
16573
|
+
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-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-[18px] ${item.disabled
|
|
16574
|
+
? '!tw-text-sq-disabled-gray'
|
|
16575
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}`, children: item.label })] }), jsxRuntime.jsx(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[0.5rem] tw-justify-center tw-flex` })] }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { className: "focus-visible:tw-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 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles$1}`, children: item.subMenuItems.map((subItem, subIndex) => {
|
|
16576
|
+
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (jsxRuntime.jsx(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })), jsxRuntime.jsx("div", { className: `tw-text-[0.8125rem] tw-ml-1 ${subItem.disabled
|
|
16577
|
+
? 'tw-text-sq-disabled-gray'
|
|
16578
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
|
|
16566
16579
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16567
16580
|
}
|
|
16568
16581
|
return (jsxRuntime.jsxs("div", { ...tooltipData, children: [jsxRuntime.jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16569
16582
|
item.onClick(e);
|
|
16570
|
-
}, className: `tw
|
|
16583
|
+
}, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-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-[18px] ${item.disabled && '!tw-opacity-30'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-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-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, (item.id || '') + index));
|
|
16571
16584
|
})] }) }) })] }));
|
|
16572
16585
|
};
|
|
16573
16586
|
|
|
16574
|
-
const baseClasses$2 = 'tw
|
|
16575
|
-
' tw
|
|
16576
|
-
const darkTheme$1 = '
|
|
16577
|
-
const lightTheme$1 = 'tw
|
|
16578
|
-
const errorClasses$1 = 'tw
|
|
16579
|
-
const borderColorClasses$1 = 'tw
|
|
16587
|
+
const baseClasses$2 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-[10px] tw-w-full tw-relative' +
|
|
16588
|
+
' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
|
|
16589
|
+
const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
|
|
16590
|
+
const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
|
|
16591
|
+
const errorClasses$1 = 'tw-border-sq-danger-color';
|
|
16592
|
+
const borderColorClasses$1 = 'tw-border-sq-color-dark';
|
|
16580
16593
|
/**
|
|
16581
16594
|
* Alert.
|
|
16582
16595
|
*/
|
|
16583
16596
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16584
16597
|
const appliedTheme = {
|
|
16585
16598
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16586
|
-
formulaError: 'tw
|
|
16587
|
-
danger: 'tw
|
|
16588
|
-
warning: 'tw
|
|
16589
|
-
gray: 'tw
|
|
16599
|
+
formulaError: 'tw-text-red-800 tw-bg-red-200 !tw-rounded-[4px]',
|
|
16600
|
+
danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
|
|
16601
|
+
warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
|
|
16602
|
+
gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-worksheetspanel-gray-dark dark:tw-text-sq-dark-text',
|
|
16590
16603
|
};
|
|
16591
16604
|
const appliedBorderTheme = {
|
|
16592
16605
|
theme: borderColorClasses$1,
|
|
16593
16606
|
danger: errorClasses$1,
|
|
16594
|
-
warning: 'tw
|
|
16595
|
-
gray: 'tw
|
|
16596
|
-
formulaError: 'tw
|
|
16607
|
+
warning: 'tw-border-none',
|
|
16608
|
+
gray: 'tw-border-sq-darkish-gray',
|
|
16609
|
+
formulaError: 'tw-border-red-100',
|
|
16597
16610
|
};
|
|
16598
16611
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16599
16612
|
if (!show) {
|
|
16600
16613
|
return jsxRuntime.jsx("div", {});
|
|
16601
16614
|
}
|
|
16602
|
-
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
|
|
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-self-end tw-text-[0.6875rem] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray|formulaError/) ? 'tw-text-sq-text-color dark:tw-text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
|
|
16603
16616
|
};
|
|
16604
16617
|
|
|
16605
16618
|
/**
|
|
@@ -16618,40 +16631,47 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16618
16631
|
* @param tooltipProps - props to pass to the tooltip
|
|
16619
16632
|
*/
|
|
16620
16633
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16621
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16622
|
-
tw
|
|
16634
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16635
|
+
tw-outline-none`;
|
|
16623
16636
|
const tooltipData = getQTipData(tooltipProps);
|
|
16624
16637
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16625
|
-
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw
|
|
16638
|
+
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 dark:tw-text-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) }) }));
|
|
16626
16639
|
};
|
|
16627
16640
|
|
|
16628
16641
|
const SeeqActionDropdownItem = (item) => {
|
|
16629
16642
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16630
16643
|
if (item.icon) {
|
|
16631
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw
|
|
16644
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-p-1 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark' +
|
|
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 }));
|
|
16632
16648
|
}
|
|
16633
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16649
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, jsxRuntime.jsx("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0", children: item.display })] }), jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem] tw-font-normal", children: item.text })] }));
|
|
16634
16650
|
};
|
|
16635
16651
|
const ViewWorkbench = (item) => {
|
|
16636
16652
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16637
16653
|
if (item.icon) {
|
|
16638
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw
|
|
16654
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
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 }));
|
|
16639
16659
|
}
|
|
16640
|
-
return (jsxRuntime.jsx("div", { className: "tw
|
|
16660
|
+
return (jsxRuntime.jsx("div", { className: "tw-flex-col tw-flex tw-p-[10px]", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem]", children: item.display })] }) }));
|
|
16641
16661
|
};
|
|
16642
16662
|
const InsertSeeqContent = (item) => {
|
|
16643
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16663
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left tw-text-sq-text-color dark:tw-text-sq-dark-text", children: [jsxRuntime.jsx("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]", children: item.display }), jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1", children: item.text })] }));
|
|
16644
16664
|
};
|
|
16645
16665
|
|
|
16646
16666
|
const borderStyles = [
|
|
16647
|
-
'tw
|
|
16648
|
-
'tw
|
|
16649
|
-
'tw
|
|
16650
|
-
'tw
|
|
16651
|
-
'
|
|
16667
|
+
'tw-border-solid',
|
|
16668
|
+
'tw-border',
|
|
16669
|
+
'tw-rounded-md',
|
|
16670
|
+
'tw-border-sq-disabled-gray',
|
|
16671
|
+
'dark:tw-border-gray-500',
|
|
16652
16672
|
].join(' ');
|
|
16653
|
-
const bgStyles = ['tw
|
|
16654
|
-
const disabledClasses = ['tw
|
|
16673
|
+
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16674
|
+
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16655
16675
|
const renderItem = (variant, item) => {
|
|
16656
16676
|
switch (variant) {
|
|
16657
16677
|
case 'create-workbench':
|
|
@@ -16666,31 +16686,31 @@ const renderItem = (variant, item) => {
|
|
|
16666
16686
|
};
|
|
16667
16687
|
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 }) => {
|
|
16668
16688
|
const tooltipData = getQTipData(tooltipProps);
|
|
16669
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16670
|
-
' tw
|
|
16671
|
-
'
|
|
16672
|
-
' forceFont
|
|
16673
|
-
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
16689
|
+
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 focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-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: "focus-visible:tw-outline-none tw-outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: bgStyles +
|
|
16690
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16691
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16692
|
+
' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
|
|
16693
|
+
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }) })), seeqActionDropdownItems.map((item, index) => {
|
|
16674
16694
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Item2, { onSelect: (e) => {
|
|
16675
16695
|
item.action(e);
|
|
16676
|
-
}, className: `tw
|
|
16696
|
+
}, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-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-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, item.display + index));
|
|
16677
16697
|
})] }) })] }));
|
|
16678
16698
|
};
|
|
16679
16699
|
|
|
16680
|
-
const baseClasses$1 = 'tw
|
|
16681
|
-
const errorClasses = 'tw
|
|
16700
|
+
const baseClasses$1 = 'tw-flex tw-outline-none tw-rounded-md tw-w-full tw-relative tw-flex-wrap';
|
|
16701
|
+
const errorClasses = 'tw-border-sq-danger-color';
|
|
16682
16702
|
const borderColorClasses = [
|
|
16683
|
-
'tw
|
|
16684
|
-
'
|
|
16685
|
-
'
|
|
16686
|
-
'
|
|
16687
|
-
'
|
|
16688
|
-
'
|
|
16703
|
+
'tw-border-sq-disabled-gray',
|
|
16704
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
16705
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
16706
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
16707
|
+
'focus:tw-border-sq-color-dark',
|
|
16708
|
+
'active:tw-border-sq-color-dark',
|
|
16689
16709
|
].join(' ');
|
|
16690
|
-
const fieldBorderRadius = 'tw
|
|
16691
|
-
const fieldClasses = 'tw
|
|
16692
|
-
const darkTheme = '
|
|
16693
|
-
const lightTheme = 'tw
|
|
16710
|
+
const fieldBorderRadius = 'tw-rounded-l-md tw-rounded-r-none';
|
|
16711
|
+
const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
|
|
16712
|
+
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
16713
|
+
const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
16694
16714
|
/**
|
|
16695
16715
|
* InputGroup.
|
|
16696
16716
|
*/
|
|
@@ -16700,10 +16720,8 @@ const InputGroup = React.forwardRef((props, ref) => {
|
|
|
16700
16720
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16701
16721
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16702
16722
|
const elementsToAppend = append.filter(Boolean);
|
|
16703
|
-
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw
|
|
16704
|
-
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
|
|
16705
|
-
index ? 'tw:-ml-px' : 'tw:ml-0'
|
|
16706
|
-
} 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));
|
|
16723
|
+
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 active:tw-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 focus:tw-z-30 tw-rounded-r-none last:tw-rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
|
|
16724
|
+
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps }, index)) : (jsxRuntime.jsx("div", { className: `${borderColorClasses} ${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} tw-flex tw-items-center tw-justify-center tw-rounded-none last:tw-rounded-r-md active:tw-z-30 active:tw-border tw-border`, children: item?.element }, index));
|
|
16707
16725
|
})] }));
|
|
16708
16726
|
});
|
|
16709
16727
|
|
|
@@ -27433,7 +27451,7 @@ var Thumb = SliderThumb;
|
|
|
27433
27451
|
*/
|
|
27434
27452
|
const Slider = (props) => {
|
|
27435
27453
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27436
|
-
return (jsxRuntime.jsxs(Root$1, { className: `tw
|
|
27454
|
+
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-[5px] tw-grow tw-rounded-[4px] tw-bg-sq-dark-gray dark:tw-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-[15px] tw-w-[15px] tw-rounded-full tw-bg-sq-color-dark active:tw-bg-sq-color-dark-dark focus:outline-none focus-visible:tw-outline-none aria-disabled:tw-bg-sq-dark-gray dark:aria-disabled:tw-bg-sq-dark-disabled-gray tw-transition tw-ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
|
|
27437
27455
|
};
|
|
27438
27456
|
|
|
27439
27457
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28702,7 +28720,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28702
28720
|
};
|
|
28703
28721
|
}
|
|
28704
28722
|
|
|
28705
|
-
const baseLabelClasses = 'tw
|
|
28723
|
+
const baseLabelClasses = 'tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center tw-h-[18px]';
|
|
28706
28724
|
const ProgressIndicator = (props) => {
|
|
28707
28725
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28708
28726
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28715,19 +28733,19 @@ const ProgressIndicator = (props) => {
|
|
|
28715
28733
|
if (totalValue >= max) {
|
|
28716
28734
|
// If progress is 100%, round both ends
|
|
28717
28735
|
if (index === 0 && valuesLength === 1) {
|
|
28718
|
-
roundedCorners = 'tw
|
|
28736
|
+
roundedCorners = 'tw-rounded-[15px]';
|
|
28719
28737
|
}
|
|
28720
28738
|
else if (index === 0) {
|
|
28721
|
-
roundedCorners = 'tw
|
|
28739
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28722
28740
|
}
|
|
28723
28741
|
else if (index === valuesLength - 1) {
|
|
28724
|
-
roundedCorners = 'tw
|
|
28742
|
+
roundedCorners = 'tw-rounded-r-[15px]';
|
|
28725
28743
|
}
|
|
28726
28744
|
}
|
|
28727
28745
|
else {
|
|
28728
28746
|
// Otherwise, only round the leftmost indicator
|
|
28729
28747
|
if (index === 0) {
|
|
28730
|
-
roundedCorners = 'tw
|
|
28748
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28731
28749
|
}
|
|
28732
28750
|
}
|
|
28733
28751
|
React.useEffect(() => {
|
|
@@ -28739,13 +28757,13 @@ const ProgressIndicator = (props) => {
|
|
|
28739
28757
|
return () => clearTimeout(timeout);
|
|
28740
28758
|
}, [value]);
|
|
28741
28759
|
const bgColor = color || undefined;
|
|
28742
|
-
const bgClass = color ? '' : 'tw
|
|
28760
|
+
const bgClass = color ? '' : 'tw-bg-sq-color-dark';
|
|
28743
28761
|
const computeTextClass = (elem) => {
|
|
28744
28762
|
const computedStyle = getComputedStyle(elem);
|
|
28745
28763
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28746
28764
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28747
|
-
? 'tw
|
|
28748
|
-
: 'tw
|
|
28765
|
+
? 'tw-text-sq-white dark:tw-text-sq-white'
|
|
28766
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-text-color';
|
|
28749
28767
|
setTextColorClass(textColorClass);
|
|
28750
28768
|
};
|
|
28751
28769
|
React.useEffect(() => {
|
|
@@ -28753,35 +28771,35 @@ const ProgressIndicator = (props) => {
|
|
|
28753
28771
|
computeTextClass(indicatorElementRef.current);
|
|
28754
28772
|
}
|
|
28755
28773
|
}, [!!indicatorElementRef.current]);
|
|
28756
|
-
return (React.createElement(Indicator, { className: `tw
|
|
28774
|
+
return (React.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-[18px] 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: {
|
|
28757
28775
|
// Background color will default to the theme color if undefined
|
|
28758
28776
|
backgroundColor: bgColor,
|
|
28759
28777
|
animation: 'width 660ms forwards',
|
|
28760
28778
|
width: `${animatedWidth}%`,
|
|
28761
|
-
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw
|
|
28779
|
+
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw-absolute tw-z-50' : ''}`, children: label })) : undefined));
|
|
28762
28780
|
};
|
|
28763
28781
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28764
28782
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28765
|
-
return (jsxRuntime.jsx(Root, { className: `tw
|
|
28766
|
-
return
|
|
28767
|
-
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw
|
|
28783
|
+
return (jsxRuntime.jsx(Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[15px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
|
|
28784
|
+
return React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
|
|
28785
|
+
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw-mx-auto tw-overflow-hidden`, children: zeroValueLabel })) }));
|
|
28768
28786
|
};
|
|
28769
28787
|
|
|
28770
|
-
const baseClasses = 'tw
|
|
28788
|
+
const baseClasses = 'tw-flex tw-outline-none tw-w-full tw-relative tw-flex-wrap';
|
|
28771
28789
|
const activeClassesByVariantLightTheme = {
|
|
28772
|
-
'outline': '!tw
|
|
28773
|
-
'theme': 'tw
|
|
28790
|
+
'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
|
|
28791
|
+
'theme': 'tw-bg-sq-color-highlight',
|
|
28774
28792
|
'danger': '',
|
|
28775
28793
|
'theme-light': '',
|
|
28776
|
-
'no-border': '!tw
|
|
28794
|
+
'no-border': '!tw-bg-sq-disabled-gray',
|
|
28777
28795
|
'warning': '',
|
|
28778
28796
|
};
|
|
28779
28797
|
const activeClassesByVariantDarkTheme = {
|
|
28780
|
-
'outline': '
|
|
28781
|
-
'theme': '
|
|
28798
|
+
'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
|
|
28799
|
+
'theme': 'dark:tw-bg-sq-color-highlight',
|
|
28782
28800
|
'danger': '',
|
|
28783
28801
|
'theme-light': '',
|
|
28784
|
-
'no-border': '
|
|
28802
|
+
'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
|
|
28785
28803
|
'warning': '',
|
|
28786
28804
|
};
|
|
28787
28805
|
/**
|
|
@@ -28793,7 +28811,7 @@ const ButtonGroup = (props) => {
|
|
|
28793
28811
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28794
28812
|
return (jsxRuntime.jsx("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28795
28813
|
.filter(Boolean)
|
|
28796
|
-
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28814
|
+
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-none first:tw-rounded-l-md last:tw-rounded-r-md ${item.buttonProps?.isActive
|
|
28797
28815
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28798
28816
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28799
28817
|
};
|
|
@@ -28803,7 +28821,7 @@ const ButtonGroup = (props) => {
|
|
|
28803
28821
|
* - Easily create a carousel with custom slides.
|
|
28804
28822
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28805
28823
|
*/
|
|
28806
|
-
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw
|
|
28824
|
+
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-90', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
|
|
28807
28825
|
const [currentIndex, setCurrentIndex] = React.useState(activeIndex);
|
|
28808
28826
|
const changeSlide = (nextIndex) => {
|
|
28809
28827
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -28865,7 +28883,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
28865
28883
|
transition: { type: 'spring', damping: 20, stiffness: 100 },
|
|
28866
28884
|
}),
|
|
28867
28885
|
};
|
|
28868
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw
|
|
28886
|
+
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-color-dark' : 'tw-bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) }, i))) }))] }));
|
|
28869
28887
|
};
|
|
28870
28888
|
|
|
28871
28889
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|