@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.esm.js
CHANGED
|
@@ -46,34 +46,34 @@ const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId,
|
|
|
46
46
|
: undefined;
|
|
47
47
|
|
|
48
48
|
const colorClassesThemeLight = {
|
|
49
|
-
'theme': 'tw
|
|
50
|
-
'white': 'tw
|
|
51
|
-
'dark-gray': 'tw
|
|
52
|
-
'warning': 'tw
|
|
53
|
-
'darkish-gray': 'tw
|
|
54
|
-
'gray': 'tw
|
|
49
|
+
'theme': 'tw-text-sq-color-dark',
|
|
50
|
+
'white': 'tw-text-white',
|
|
51
|
+
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
52
|
+
'warning': 'tw-text-sq-warning-color',
|
|
53
|
+
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
54
|
+
'gray': 'tw-text-sq-disabled-gray',
|
|
55
55
|
'color': '',
|
|
56
|
-
'info': 'tw
|
|
57
|
-
'text': 'tw
|
|
56
|
+
'info': 'tw-text-sq-link',
|
|
57
|
+
'text': 'tw-text-sq-text-color',
|
|
58
58
|
'inherit': '',
|
|
59
|
-
'danger': 'tw
|
|
60
|
-
'theme-light': 'tw
|
|
61
|
-
'success': 'tw
|
|
59
|
+
'danger': 'tw-text-sq-danger-color',
|
|
60
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
61
|
+
'success': 'tw-text-sq-success-color',
|
|
62
62
|
};
|
|
63
63
|
const colorClassesThemeDark = {
|
|
64
|
-
'theme': '
|
|
64
|
+
'theme': 'dark:tw-text-sq-color-dark-dark',
|
|
65
65
|
'white': '',
|
|
66
|
-
'dark-gray': 'tw
|
|
66
|
+
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
67
67
|
'warning': '',
|
|
68
|
-
'darkish-gray': 'tw
|
|
69
|
-
'gray': '
|
|
68
|
+
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
69
|
+
'gray': 'dark:tw-text-sq-dark-disabled-gray',
|
|
70
70
|
'color': '',
|
|
71
|
-
'info': '
|
|
72
|
-
'text': '
|
|
71
|
+
'info': 'dark:tw-text-sq-link-dark',
|
|
72
|
+
'text': 'dark:tw-text-sq-dark-text',
|
|
73
73
|
'inherit': '',
|
|
74
|
-
'danger': 'tw
|
|
75
|
-
'theme-light': 'tw
|
|
76
|
-
'success': 'tw
|
|
74
|
+
'danger': 'tw-text-sq-danger-color',
|
|
75
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
76
|
+
'success': 'tw-text-sq-success-color',
|
|
77
77
|
};
|
|
78
78
|
/**
|
|
79
79
|
* Icon:
|
|
@@ -85,14 +85,14 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
85
85
|
const errorMessage = color === undefined || color === ''
|
|
86
86
|
? 'Icon with type="color" must have prop color specified.'
|
|
87
87
|
: 'Icon with prop color must have type="color".';
|
|
88
|
-
return jsx$1("div", { className: "tw
|
|
88
|
+
return jsx$1("div", { className: "tw-text-sq-danger-color", children: errorMessage });
|
|
89
89
|
}
|
|
90
90
|
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
91
91
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
92
92
|
const style = type === 'color' && color ? { color } : {};
|
|
93
93
|
const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
|
|
94
94
|
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
95
|
-
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw
|
|
95
|
+
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
96
96
|
const tooltipData = getQTipData(tooltipProps);
|
|
97
97
|
return (jsx$1("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
98
98
|
};
|
|
@@ -103,61 +103,77 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
103
103
|
* - include tooltips and/or icons
|
|
104
104
|
*/
|
|
105
105
|
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, }) => {
|
|
106
|
-
const baseClasses = 'tw
|
|
106
|
+
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';
|
|
107
107
|
const baseClassesByVariant = {
|
|
108
|
-
'outline': 'tw
|
|
109
|
-
'theme': 'tw
|
|
110
|
-
'danger': 'tw
|
|
111
|
-
'tw
|
|
112
|
-
'theme-light': 'tw
|
|
113
|
-
'no-border': 'tw
|
|
114
|
-
'warning': 'tw
|
|
108
|
+
'outline': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
109
|
+
'theme': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
110
|
+
'danger': 'tw-bg-sq-danger-color disabled:tw-opacity-50 aria-disabled:tw-opacity-50 ' +
|
|
111
|
+
'tw-border-solid tw-border tw-border-sq-danger-color',
|
|
112
|
+
'theme-light': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
113
|
+
'no-border': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
114
|
+
'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color ' +
|
|
115
|
+
'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
115
116
|
};
|
|
116
117
|
const textClassesByVariantLightTheme = {
|
|
117
|
-
'outline': 'tw
|
|
118
|
-
'theme': 'tw
|
|
119
|
-
'theme-light': 'tw
|
|
120
|
-
'danger': 'tw
|
|
121
|
-
'no-border': 'tw
|
|
122
|
-
'warning': 'tw
|
|
118
|
+
'outline': 'tw-text-sq-text-color',
|
|
119
|
+
'theme': 'tw-text-white',
|
|
120
|
+
'theme-light': 'tw-text-white',
|
|
121
|
+
'danger': 'tw-text-white',
|
|
122
|
+
'no-border': 'tw-text-sq-text-color',
|
|
123
|
+
'warning': 'tw-text-white',
|
|
123
124
|
};
|
|
124
125
|
const textClassesByVariantDarkTheme = {
|
|
125
|
-
'outline': '
|
|
126
|
-
'theme': '
|
|
127
|
-
'theme-light': '
|
|
128
|
-
'danger': '
|
|
129
|
-
'no-border': '
|
|
130
|
-
'warning': '
|
|
126
|
+
'outline': 'dark:tw-text-sq-dark-text',
|
|
127
|
+
'theme': 'dark:tw-text-white',
|
|
128
|
+
'theme-light': 'dark:tw-text-white',
|
|
129
|
+
'danger': 'dark:tw-text-white',
|
|
130
|
+
'no-border': 'dark:tw-text-sq-dark-text',
|
|
131
|
+
'warning': 'dark:tw-text-white',
|
|
131
132
|
};
|
|
132
133
|
const classesByVariantLightTheme = {
|
|
133
|
-
'outline': 'tw
|
|
134
|
-
|
|
135
|
-
'theme': 'tw:bg-sq-theme-dark tw:hover:bg-sq-theme-highlight tw:border-sq-theme-dark' +
|
|
136
|
-
' tw:hover:border-sq-theme-highlight',
|
|
134
|
+
'outline': 'tw-bg-white tw-border-sq-disabled-gray',
|
|
135
|
+
'theme': 'tw-bg-sq-color-dark tw-border-sq-color-dark',
|
|
137
136
|
'danger': '',
|
|
138
|
-
'theme-light': 'tw
|
|
137
|
+
'theme-light': 'tw-bg-sq-icon',
|
|
139
138
|
'no-border': '',
|
|
140
139
|
'warning': '',
|
|
141
140
|
};
|
|
142
141
|
const classesByVariantDarkTheme = {
|
|
143
|
-
'outline': '
|
|
144
|
-
|
|
145
|
-
' tw:dark:active:border-sq-theme-dark',
|
|
146
|
-
'theme': 'tw:dark:bg-sq-theme-dark tw:dark:hover:bg-sq-theme-highlight tw:dark:border-sq-theme-dark' +
|
|
147
|
-
' tw:dark:hover:border-sq-theme-highlight',
|
|
142
|
+
'outline': 'dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-disabled-gray',
|
|
143
|
+
'theme': 'dark:tw-bg-sq-color-dark dark:tw-border-sq-color-dark',
|
|
148
144
|
'danger': '',
|
|
149
|
-
'theme-light': '
|
|
150
|
-
|
|
145
|
+
'theme-light': 'dark:tw-bg-sq-icon-dark dark:tw-border-sq-icon-dark',
|
|
146
|
+
'no-border': '',
|
|
147
|
+
'warning': '',
|
|
148
|
+
};
|
|
149
|
+
const activeClassesByVariantLightTheme = {
|
|
150
|
+
'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' +
|
|
151
|
+
' active:tw-border-sq-color-dark',
|
|
152
|
+
'theme': 'hover:tw-bg-sq-color-highlight hover:tw-border-sq-color-highlight',
|
|
153
|
+
'danger': 'hover:tw-bg-sq-danger-color-hover hover:tw-border-sq-danger-color-hover',
|
|
154
|
+
'theme-light': 'hover:tw-bg-sq-link hover:tw-border-sq-link',
|
|
155
|
+
'no-border': '',
|
|
156
|
+
'warning': '',
|
|
157
|
+
};
|
|
158
|
+
const activeClassesByVariantDarkTheme = {
|
|
159
|
+
'outline': 'dark:hover:tw-bg-sq-highlight-color-dark dark:focus:tw-bg-sq-multi-gray-dark' +
|
|
160
|
+
' dark:active:tw-bg-sq-multi-gray-dark dark:focus:tw-border-sq-color-dark dark:active:tw-border-sq-color-dark',
|
|
161
|
+
'theme': 'dark:hover:tw-bg-sq-color-highlight dark:hover:tw-border-sq-color-highlight',
|
|
162
|
+
'danger': 'dark:hover:tw-bg-sq-danger-color-hover dark:hover:tw-border-sq-danger-color-hover',
|
|
163
|
+
'theme-light': 'dark:hover:tw-bg-sq-link-dark dark:hover:tw-border-sq-link-dark',
|
|
151
164
|
'no-border': '',
|
|
152
165
|
'warning': '',
|
|
153
166
|
};
|
|
154
167
|
const sizeClasses = {
|
|
155
|
-
xs: 'tw
|
|
156
|
-
sm: 'tw
|
|
157
|
-
lg: 'tw
|
|
168
|
+
xs: 'tw-text-xs tw-py-0.5',
|
|
169
|
+
sm: 'tw-text-sm tw-py-1',
|
|
170
|
+
lg: 'tw-text-xl tw-py-1',
|
|
158
171
|
};
|
|
159
|
-
const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
160
172
|
let tooltipData = undefined;
|
|
173
|
+
let appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
174
|
+
if (!disabled) {
|
|
175
|
+
appliedClasses += ` ${activeClassesByVariantLightTheme[variant]} ${activeClassesByVariantDarkTheme[variant]}`;
|
|
176
|
+
}
|
|
161
177
|
if (tooltip) {
|
|
162
178
|
tooltipData = {
|
|
163
179
|
'data-qtip-text': tooltip,
|
|
@@ -167,13 +183,15 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
167
183
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
168
184
|
};
|
|
169
185
|
}
|
|
170
|
-
const iconClass = iconPosition === 'left' ? 'tw
|
|
186
|
+
const iconClass = iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1';
|
|
171
187
|
const iconElement = icon && (jsx$1(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
172
188
|
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
173
189
|
: '', testId: `${id}_spinner` }));
|
|
174
|
-
return (jsxs("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
190
|
+
return (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) => {
|
|
175
191
|
stopPropagation && e.stopPropagation();
|
|
176
|
-
|
|
192
|
+
if (!disabled) {
|
|
193
|
+
onClick?.(e);
|
|
194
|
+
}
|
|
177
195
|
}, onMouseDown: (e) => {
|
|
178
196
|
if (preventBlur) {
|
|
179
197
|
e.preventDefault();
|
|
@@ -4759,30 +4777,31 @@ function getSvgIconPath(icon) {
|
|
|
4759
4777
|
}
|
|
4760
4778
|
|
|
4761
4779
|
const popoverBorderStyles = [
|
|
4762
|
-
'tw
|
|
4763
|
-
'tw
|
|
4764
|
-
'tw
|
|
4765
|
-
'tw
|
|
4766
|
-
'
|
|
4780
|
+
'tw-border-solid',
|
|
4781
|
+
'tw-border',
|
|
4782
|
+
'tw-rounded-md',
|
|
4783
|
+
'tw-border-sq-disabled-gray',
|
|
4784
|
+
'dark:tw-border-gray-500',
|
|
4767
4785
|
].join(' ');
|
|
4768
4786
|
const triggerBackgroundStyles = [
|
|
4769
|
-
'tw
|
|
4770
|
-
'
|
|
4771
|
-
'
|
|
4772
|
-
'
|
|
4773
|
-
'
|
|
4774
|
-
'
|
|
4787
|
+
'tw-bg-transparent',
|
|
4788
|
+
'hover:tw-bg-sq-worksheetspanel-gray',
|
|
4789
|
+
'active:tw-bg-sq-worksheetspanel-gray',
|
|
4790
|
+
'dark:tw-bg-transparent',
|
|
4791
|
+
'dark:hover:tw-bg-sq-field-disabled-gray',
|
|
4792
|
+
'dark:active:tw-bg-sq-field-disabled-gray',
|
|
4775
4793
|
].join(' ');
|
|
4776
4794
|
const activeBackgroundStyles = [
|
|
4777
4795
|
'active',
|
|
4778
|
-
'tw
|
|
4779
|
-
'tw
|
|
4780
|
-
'tw
|
|
4781
|
-
'
|
|
4782
|
-
'
|
|
4796
|
+
'tw-bg-sq-overlay-gray',
|
|
4797
|
+
'hover:tw-bg-sq-overlay-gray',
|
|
4798
|
+
'active:tw-bg-sq-overlay-gray',
|
|
4799
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
4800
|
+
'dark:hover:tw-border-sq-dark-disabled-gray',
|
|
4801
|
+
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4783
4802
|
].join(' ');
|
|
4784
|
-
const bgStyles$3 = ['tw
|
|
4785
|
-
const disabledClasses$4 = ['tw
|
|
4803
|
+
const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
4804
|
+
const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
4786
4805
|
const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (jsx$1(Content2$3, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
|
|
4787
4806
|
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, }) => {
|
|
4788
4807
|
let tooltipData = undefined;
|
|
@@ -4800,12 +4819,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4800
4819
|
onHide && onHide();
|
|
4801
4820
|
}
|
|
4802
4821
|
};
|
|
4803
|
-
return (jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsx$1(Trigger$3, { id: id, className: `tw
|
|
4822
|
+
return (jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsx$1(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) => {
|
|
4804
4823
|
onClick && onClick(e);
|
|
4805
|
-
}, children: jsxs("div", { ...tooltipData, className: `tw
|
|
4806
|
-
' tw
|
|
4807
|
-
'
|
|
4808
|
-
popoverBorderStyles, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: " tw
|
|
4824
|
+
}, children: 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: [jsxs("span", { className: "tw-nowrap", children: [isPrimaryAnSvg ? (jsx$1("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: jsx$1("path", { d: getSvgIconPath(icon) }) })) : (jsx$1(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 && jsx$1(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }), popoverContent ? (jsx$1(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 && (jsx$1("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[0.625rem]", children: label }))] }) }), !!popoverContent ? (jsx$1(PopoverContent, { sideOffset: 2, align: "start", children: jsxs("div", { className: bgStyles$3 +
|
|
4825
|
+
' 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' +
|
|
4826
|
+
' 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' +
|
|
4827
|
+
popoverBorderStyles, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("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] }));
|
|
4809
4828
|
};
|
|
4810
4829
|
|
|
4811
4830
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4822,24 +4841,24 @@ const setValidInputDimension = (width, height) => {
|
|
|
4822
4841
|
return inputStyle;
|
|
4823
4842
|
};
|
|
4824
4843
|
|
|
4825
|
-
const errorClasses$4 = 'tw
|
|
4844
|
+
const errorClasses$4 = 'tw-border-sq-danger-color';
|
|
4826
4845
|
const borderColorClasses$4 = [
|
|
4827
|
-
'tw
|
|
4828
|
-
'
|
|
4829
|
-
'
|
|
4830
|
-
'
|
|
4831
|
-
'
|
|
4832
|
-
'
|
|
4846
|
+
'tw-border-sq-disabled-gray',
|
|
4847
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4848
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4849
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4850
|
+
'focus:tw-border-sq-color-dark',
|
|
4851
|
+
'active:tw-border-sq-color-dark',
|
|
4833
4852
|
].join(' ');
|
|
4834
|
-
const baseClasses$6 = 'tw
|
|
4835
|
-
'
|
|
4836
|
-
'
|
|
4837
|
-
'
|
|
4838
|
-
const darkTheme$3 = '
|
|
4839
|
-
const lightTheme$3 = 'tw
|
|
4853
|
+
const baseClasses$6 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
|
|
4854
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4855
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
|
|
4856
|
+
' dark:tw-placeholder-sq-dark-text-lighter specTextField';
|
|
4857
|
+
const darkTheme$3 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4858
|
+
const lightTheme$3 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
4840
4859
|
const sizeClasses = {
|
|
4841
|
-
sm: 'tw
|
|
4842
|
-
lg: 'tw
|
|
4860
|
+
sm: 'tw-text-sm',
|
|
4861
|
+
lg: 'tw-text-xl',
|
|
4843
4862
|
};
|
|
4844
4863
|
/**
|
|
4845
4864
|
* Textfield.
|
|
@@ -4881,12 +4900,12 @@ const TextField = React__default.forwardRef((props, ref) => {
|
|
|
4881
4900
|
internalRef.current.value = `${value}`;
|
|
4882
4901
|
}
|
|
4883
4902
|
}, [value]);
|
|
4884
|
-
let borderRadius = 'tw
|
|
4903
|
+
let borderRadius = 'tw-rounded-md';
|
|
4885
4904
|
if (inputGroup === 'left') {
|
|
4886
|
-
borderRadius = 'tw
|
|
4905
|
+
borderRadius = 'tw-rounded-l-md tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
|
|
4887
4906
|
}
|
|
4888
4907
|
else if (inputGroup === 'right') {
|
|
4889
|
-
borderRadius = 'tw
|
|
4908
|
+
borderRadius = 'tw-rounded-r-md tw-border-l-0 focus:tw-border-l active:tw-border-l';
|
|
4890
4909
|
}
|
|
4891
4910
|
const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
|
|
4892
4911
|
const inputProp = setValidInputDimension(inputWidth, inputHeight)
|
|
@@ -4899,18 +4918,18 @@ const TextField = React__default.forwardRef((props, ref) => {
|
|
|
4899
4918
|
inputLenghtProp.maxLength = maxLength;
|
|
4900
4919
|
if (minLength)
|
|
4901
4920
|
inputLenghtProp.minLength = minLength;
|
|
4902
|
-
return (jsxs(Fragment, { children: [jsx$1("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 && jsx$1("div", { className: "tw
|
|
4921
|
+
return (jsxs(Fragment, { children: [jsx$1("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 && jsx$1("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1", children: errorText })] }));
|
|
4903
4922
|
});
|
|
4904
4923
|
|
|
4905
|
-
const alignment = 'tw
|
|
4906
|
-
const labelClasses = 'tw
|
|
4907
|
-
const baseClasses$5 = 'tw
|
|
4908
|
-
'
|
|
4909
|
-
'
|
|
4910
|
-
'
|
|
4911
|
-
'
|
|
4912
|
-
const checkboxClasses = `tw
|
|
4913
|
-
const radioClasses = `tw
|
|
4924
|
+
const alignment = 'tw-flex';
|
|
4925
|
+
const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
|
|
4926
|
+
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' +
|
|
4927
|
+
' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
|
|
4928
|
+
' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
|
|
4929
|
+
' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
|
|
4930
|
+
' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
|
|
4931
|
+
const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$5}`;
|
|
4932
|
+
const radioClasses = `tw-form-radio ${baseClasses$5}`;
|
|
4914
4933
|
/**
|
|
4915
4934
|
* Checkbox and Radio Box Component.
|
|
4916
4935
|
*/
|
|
@@ -4918,25 +4937,26 @@ const Checkbox = (props) => {
|
|
|
4918
4937
|
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
|
|
4919
4938
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
4920
4939
|
const tooltipData = getQTipData(tooltipProps);
|
|
4921
|
-
return (jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsx$1("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
|
|
4922
|
-
|
|
4923
|
-
|
|
4924
|
-
};
|
|
4925
|
-
|
|
4926
|
-
|
|
4927
|
-
|
|
4928
|
-
'
|
|
4929
|
-
|
|
4930
|
-
|
|
4931
|
-
|
|
4932
|
-
const
|
|
4940
|
+
return (jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsx$1("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 &&
|
|
4941
|
+
jsx$1("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
4942
|
+
? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
|
|
4943
|
+
: 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}`, children: label })] }));
|
|
4944
|
+
};
|
|
4945
|
+
|
|
4946
|
+
const baseClasses$4 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-md tw-w-full' +
|
|
4947
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4948
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
|
|
4949
|
+
const darkTheme$2 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
|
|
4950
|
+
'dark:tw-placeholder-sq-dark-text-lighter disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4951
|
+
const lightTheme$2 = 'tw-text-sq-text-color tw-placeholder-gray-400 disabled:tw-text-sq-darkish-gray';
|
|
4952
|
+
const errorClasses$3 = 'tw-border-sq-danger-color';
|
|
4933
4953
|
const borderColorClasses$3 = [
|
|
4934
|
-
'tw
|
|
4935
|
-
'
|
|
4936
|
-
'
|
|
4937
|
-
'
|
|
4938
|
-
'
|
|
4939
|
-
'
|
|
4954
|
+
'tw-border-sq-disabled-gray',
|
|
4955
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4956
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4957
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4958
|
+
'focus:tw-border-sq-color-dark',
|
|
4959
|
+
'active:tw-border-sq-color-dark',
|
|
4940
4960
|
].join(' ');
|
|
4941
4961
|
/**
|
|
4942
4962
|
* TextArea.
|
|
@@ -4985,25 +5005,25 @@ const TextArea = React__default.forwardRef(({ readonly = false, disabled = false
|
|
|
4985
5005
|
* display correctly.
|
|
4986
5006
|
*/
|
|
4987
5007
|
const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
4988
|
-
const arrowBaseClasses =
|
|
4989
|
-
const centerArrowVertically = '
|
|
4990
|
-
const centerArrowHorizontally = '
|
|
4991
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically}
|
|
4992
|
-
|
|
4993
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically}
|
|
4994
|
-
|
|
4995
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
4996
|
-
|
|
4997
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
4998
|
-
|
|
5008
|
+
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
5009
|
+
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
5010
|
+
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
5011
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
5012
|
+
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
5013
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
5014
|
+
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
5015
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
5016
|
+
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
5017
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
5018
|
+
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
4999
5019
|
const placements = {
|
|
5000
|
-
top:
|
|
5001
|
-
left:
|
|
5002
|
-
right: `tw
|
|
5003
|
-
bottom:
|
|
5020
|
+
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
5021
|
+
left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
|
|
5022
|
+
right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
|
|
5023
|
+
bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
|
|
5004
5024
|
};
|
|
5005
|
-
return (jsxs("div", { className: "tw
|
|
5006
|
-
tw
|
|
5025
|
+
return (jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsx$1("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
5026
|
+
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 })] }));
|
|
5007
5027
|
};
|
|
5008
5028
|
|
|
5009
5029
|
/*! @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 */
|
|
@@ -7489,8 +7509,8 @@ const QTip = () => {
|
|
|
7489
7509
|
: positionTooltip();
|
|
7490
7510
|
}
|
|
7491
7511
|
};
|
|
7492
|
-
return (jsx$1(Fragment, { children: jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw
|
|
7493
|
-
(show ? 'tw
|
|
7512
|
+
return (jsx$1(Fragment, { children: 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 ' +
|
|
7513
|
+
(show ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'), children: [html ? jsx$1(HTMLTip, { text: tooltipText }) : tooltipText, jsx$1("div", { className: "tw-absolute tw-w-[10px] tw-h-[10px] tw-rotate-45 tw-bg-black", ref: tooltipArrowRef })] }) }));
|
|
7494
7514
|
};
|
|
7495
7515
|
|
|
7496
7516
|
function _typeof$1(o) {
|
|
@@ -13905,77 +13925,70 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
13905
13925
|
});
|
|
13906
13926
|
var CreatableSelect$1 = CreatableSelect;
|
|
13907
13927
|
|
|
13908
|
-
const baseClasses$3 = ['
|
|
13909
|
-
const containerStyles = ['tw
|
|
13910
|
-
const errorClasses$2 = 'tw
|
|
13911
|
-
const borderColorClasses$2 = ['tw
|
|
13912
|
-
const borderStyles$3 = ['tw
|
|
13928
|
+
const baseClasses$3 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
|
|
13929
|
+
const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
13930
|
+
const errorClasses$2 = 'tw-border-sq-danger-color';
|
|
13931
|
+
const borderColorClasses$2 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
|
|
13932
|
+
const borderStyles$3 = ['tw-border-solid', 'tw-border'].join(' ');
|
|
13913
13933
|
const borderActiveClasses = [
|
|
13914
|
-
'
|
|
13915
|
-
'
|
|
13916
|
-
'
|
|
13917
|
-
'
|
|
13918
|
-
'
|
|
13919
|
-
'
|
|
13934
|
+
'hover:tw-border-sq-color-dark',
|
|
13935
|
+
'focus-within:tw-border-sq-color-dark',
|
|
13936
|
+
'active:tw-border-sq-color-dark',
|
|
13937
|
+
'dark:hover:tw-border-sq-color-dark-dark',
|
|
13938
|
+
'dark:focus-within:tw-border-sq-color-dark-dark',
|
|
13939
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
13920
13940
|
].join(' ');
|
|
13921
|
-
const textStyles = ['tw
|
|
13941
|
+
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
13922
13942
|
const textActiveStyles = [
|
|
13923
|
-
'
|
|
13924
|
-
'tw
|
|
13925
|
-
'
|
|
13926
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13927
|
-
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13928
|
-
'tw:dark:focus:text-sq-theme-dark-dark',
|
|
13929
|
-
'tw:dark:active:text-sq-theme-dark-dark',
|
|
13930
|
-
'tw:hover:text-sq-color-dark',
|
|
13931
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13932
|
-
'tw:dark:hover:text-sq-color-dark-dark',
|
|
13943
|
+
'hover:tw-text-sq-color-dark',
|
|
13944
|
+
'dark:tw-text-sq-dark-disabled-gray',
|
|
13945
|
+
'dark:hover:tw-text-sq-color-dark-dark',
|
|
13933
13946
|
].join(' ');
|
|
13934
13947
|
const menuStyles = [
|
|
13935
|
-
'tw
|
|
13936
|
-
'tw
|
|
13937
|
-
'tw
|
|
13938
|
-
'tw
|
|
13939
|
-
'
|
|
13940
|
-
'tw
|
|
13941
|
-
'tw
|
|
13942
|
-
'!tw
|
|
13948
|
+
'tw-border-solid',
|
|
13949
|
+
'tw-border',
|
|
13950
|
+
'tw-rounded-b',
|
|
13951
|
+
'tw-border-sq-disabled-gray',
|
|
13952
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
13953
|
+
'tw-whitespace-nowrap',
|
|
13954
|
+
'tw-min-w-fit',
|
|
13955
|
+
'!tw-z-[9999]',
|
|
13943
13956
|
].join(' ');
|
|
13944
13957
|
const menuListStyles = [
|
|
13945
|
-
'tw
|
|
13946
|
-
'tw
|
|
13947
|
-
'
|
|
13948
|
-
'tw
|
|
13949
|
-
'!tw
|
|
13958
|
+
'tw-rounded-b',
|
|
13959
|
+
'tw-bg-white',
|
|
13960
|
+
'dark:tw-bg-sq-dark-background',
|
|
13961
|
+
'tw-min-w-fit',
|
|
13962
|
+
'!tw-z-[9999]',
|
|
13950
13963
|
'specSelectMenu',
|
|
13951
13964
|
].join(' ');
|
|
13952
13965
|
const groupHeadingStyles = [
|
|
13953
|
-
'tw
|
|
13954
|
-
'
|
|
13955
|
-
'tw
|
|
13956
|
-
'tw
|
|
13957
|
-
'tw
|
|
13966
|
+
'tw-bg-sq-light-gray',
|
|
13967
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
13968
|
+
'tw-text-sq-darkish-gray',
|
|
13969
|
+
'tw-py-1',
|
|
13970
|
+
'tw-px-2.5',
|
|
13958
13971
|
'specSelectGroupHeading',
|
|
13959
13972
|
].join(' ');
|
|
13960
13973
|
const optionStyles = [
|
|
13961
|
-
'
|
|
13962
|
-
'
|
|
13963
|
-
'
|
|
13964
|
-
'tw
|
|
13965
|
-
'tw
|
|
13974
|
+
'hover:tw-bg-sq-gray-highlight',
|
|
13975
|
+
'hover:tw-cursor-pointer',
|
|
13976
|
+
'dark:hover:tw-bg-sq-gray-highlight-dark',
|
|
13977
|
+
'tw-py-1',
|
|
13978
|
+
'tw-px-2.5',
|
|
13966
13979
|
'specSelectOption',
|
|
13967
13980
|
].join(' ');
|
|
13968
|
-
const disabledClasses$3 = ['tw
|
|
13969
|
-
const dropDownIndicatorStyles = `tw
|
|
13970
|
-
const placeholderStyles = ['tw
|
|
13981
|
+
const disabledClasses$3 = ['tw-bg-sq-field-disabled-gray', '!tw-cursor-not-allowed', 'tw-opacity-50'].join(' ');
|
|
13982
|
+
const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
13983
|
+
const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
13971
13984
|
const multiValueStyles = [
|
|
13972
|
-
'tw
|
|
13973
|
-
'
|
|
13974
|
-
'tw
|
|
13975
|
-
'tw
|
|
13976
|
-
'tw
|
|
13977
|
-
'tw
|
|
13978
|
-
'tw
|
|
13985
|
+
'tw-bg-sq-disabled-gray',
|
|
13986
|
+
'dark:tw-bg-sq-multi-gray-dark',
|
|
13987
|
+
'tw-text-sm',
|
|
13988
|
+
'tw-py-0.5',
|
|
13989
|
+
'tw-px-1',
|
|
13990
|
+
'tw-m-0.5',
|
|
13991
|
+
'tw-rounded-sm',
|
|
13979
13992
|
'specOpenSelect',
|
|
13980
13993
|
].join(' ');
|
|
13981
13994
|
/**
|
|
@@ -14040,38 +14053,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14040
14053
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14041
14054
|
classNames: {
|
|
14042
14055
|
control: ({ menuIsOpen }) => {
|
|
14043
|
-
let border = menuIsOpen ? 'tw
|
|
14056
|
+
let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14044
14057
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14045
14058
|
if (inputGroup === 'left') {
|
|
14046
|
-
border = menuIsOpen ? 'tw
|
|
14059
|
+
border = menuIsOpen ? 'tw-rounded-tl-md' : 'tw-rounded-l-md';
|
|
14047
14060
|
}
|
|
14048
14061
|
else if (inputGroup === 'right') {
|
|
14049
|
-
border = menuIsOpen ? 'tw
|
|
14062
|
+
border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
|
|
14050
14063
|
}
|
|
14051
14064
|
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14052
|
-
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw
|
|
14065
|
+
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
|
|
14053
14066
|
},
|
|
14054
14067
|
placeholder: () => placeholderStyles,
|
|
14055
14068
|
container: ({ selectProps }) => {
|
|
14056
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14057
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw
|
|
14069
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14070
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw-pointer-events-auto`;
|
|
14058
14071
|
},
|
|
14059
14072
|
input: () => textStyles + ' specSelectInput',
|
|
14060
14073
|
menuList: () => menuListStyles,
|
|
14061
14074
|
menu: () => menuStyles,
|
|
14062
|
-
menuPortal: () => '!tw
|
|
14075
|
+
menuPortal: () => '!tw-z-[9000]',
|
|
14063
14076
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14064
14077
|
option: ({ isSelected, isDisabled }) => {
|
|
14065
14078
|
let classes = optionStyles;
|
|
14066
14079
|
if (isDisabled) {
|
|
14067
14080
|
classes += ' specDisabledOption ';
|
|
14068
14081
|
}
|
|
14069
|
-
return isSelected ? classes + ' tw
|
|
14082
|
+
return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
14070
14083
|
},
|
|
14071
14084
|
singleValue: () => 'specOpenSelect',
|
|
14072
14085
|
multiValue: () => multiValueStyles,
|
|
14073
|
-
multiValueRemove: () => '
|
|
14074
|
-
clearIndicator: () => 'tw
|
|
14086
|
+
multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
|
|
14087
|
+
clearIndicator: () => 'tw-text-sq-disabled-gray hover:tw-text-sq-danger-color specClearSelect',
|
|
14075
14088
|
group: () => 'specSelectGroup',
|
|
14076
14089
|
groupHeading: () => groupHeadingStyles,
|
|
14077
14090
|
},
|
|
@@ -14461,11 +14474,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14461
14474
|
const Dialog = Root$4;
|
|
14462
14475
|
const DialogPortal = Portal$1;
|
|
14463
14476
|
const DialogClose = Close;
|
|
14464
|
-
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw
|
|
14465
|
-
tw
|
|
14466
|
-
tw
|
|
14477
|
+
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("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 " }), 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
|
|
14478
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14479
|
+
tw-rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
|
|
14467
14480
|
DialogContent.displayName = Content$2.displayName;
|
|
14468
|
-
const DialogHeader = (props) => (jsx$1("div", { className: "tw
|
|
14481
|
+
const DialogHeader = (props) => (jsx$1("div", { className: "tw-w-full tw-justify-between", children: jsx$1("div", { ...props }) }));
|
|
14469
14482
|
DialogHeader.displayName = 'DialogHeader';
|
|
14470
14483
|
const DialogFooter = (props) => jsx$1("div", { ...props });
|
|
14471
14484
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14503,26 +14516,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14503
14516
|
let titleIconElement = jsx$1(Fragment, {});
|
|
14504
14517
|
if (titleIcon) {
|
|
14505
14518
|
if (typeof titleIcon === 'string') {
|
|
14506
|
-
titleIconElement = (jsx$1(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw
|
|
14519
|
+
titleIconElement = (jsx$1(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" }));
|
|
14507
14520
|
}
|
|
14508
14521
|
else {
|
|
14509
|
-
titleIconElement = jsx$1("div", { className: "tw
|
|
14522
|
+
titleIconElement = jsx$1("div", { className: "tw-mt-1.5", children: titleIcon });
|
|
14510
14523
|
}
|
|
14511
14524
|
}
|
|
14512
|
-
return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw
|
|
14525
|
+
return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw-flex tw-mr-2", children: titleIconElement }) : jsx$1(Fragment, {}), jsx$1(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxs("div", { className: "tw-flex tw-w-full tw-items-center", children: [jsx$1(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsx$1("p", { className: "tw-text-sq-danger-color tw-min-w-fit tw-pl-2 tw-mb-0", children: titleError })] })) : (customHeader ?? (jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx$1("h3", { children: title }), titleSuffixLabel && jsx$1("span", { className: "tw-text-xl tw-pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsx$1("div", { className: "tw-italic tw-text-sm tw-text-left tw-mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsx$1("div", { className: "tw-flex tw-ml-4", children: titleIconElement }) : jsx$1(Fragment, {})] }));
|
|
14513
14526
|
};
|
|
14514
|
-
return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw
|
|
14515
|
-
'tw
|
|
14516
|
-
'tw
|
|
14517
|
-
'tw
|
|
14518
|
-
'tw
|
|
14519
|
-
'tw
|
|
14520
|
-
'tw
|
|
14521
|
-
'tw
|
|
14522
|
-
'tw
|
|
14523
|
-
'tw
|
|
14524
|
-
'tw
|
|
14525
|
-
}, dialogClassName), children: [jsxs(DialogHeader, { className: "modal-header tw
|
|
14527
|
+
return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: 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`, {
|
|
14528
|
+
'tw-max-w-xs': size === 'xs',
|
|
14529
|
+
'tw-max-w-sm': size === 'sm',
|
|
14530
|
+
'tw-max-w-md': size === 'md',
|
|
14531
|
+
'tw-max-w-lg': size === 'lg',
|
|
14532
|
+
'tw-max-w-xl': size === 'xl',
|
|
14533
|
+
'tw-max-w-2xl': size === '2xl',
|
|
14534
|
+
'tw-max-w-3xl': size === '3xl',
|
|
14535
|
+
'tw-max-w-4xl': size === '4xl',
|
|
14536
|
+
'tw-max-w-5xl': size === '5xl',
|
|
14537
|
+
'tw-max-w-6xl': size === '6xl',
|
|
14538
|
+
}, dialogClassName), children: [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: [jsx$1("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (jsx$1(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: jsx$1("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), jsx$1(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsx$1(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [jsx$1("div", { className: "tw-flex tw-justify-start", children: customButton && (jsx$1(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), jsxs("div", { className: "tw-flex tw-justify-end", children: [jsx$1("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (jsx$1(DialogClose, { asChild: true, children: jsx$1(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsx$1(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]" }))] })] })) }))] }) })) : (jsx$1(Fragment, {}));
|
|
14526
14539
|
};
|
|
14527
14540
|
|
|
14528
14541
|
function createCollection(name) {
|
|
@@ -14980,11 +14993,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14980
14993
|
return;
|
|
14981
14994
|
onTabSelect && onTabSelect(tabId);
|
|
14982
14995
|
};
|
|
14983
|
-
return (jsxs(Root2$2, { className: `tw
|
|
14984
|
-
? 'tw
|
|
14985
|
-
: '
|
|
14986
|
-
? '
|
|
14987
|
-
: '
|
|
14996
|
+
return (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: [jsx$1(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) => (jsx$1(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
|
|
14997
|
+
? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
|
|
14998
|
+
: 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxs("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]", children: [icon && jsx$1(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[0.9375rem] tw-mr-[7px] tw-flex-shrink-0" }), jsx$1("span", { className: `tw-text-[0.875rem] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
|
|
14999
|
+
? 'dark:tw-text-sq-dark-text tw-text-gray-500'
|
|
15000
|
+
: 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsx$1(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`)))] }));
|
|
14988
15001
|
};
|
|
14989
15002
|
|
|
14990
15003
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15409,18 +15422,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15409
15422
|
var Content2$2 = AccordionContent;
|
|
15410
15423
|
|
|
15411
15424
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15412
|
-
return (jsx$1(Root2$1, { className: `tw
|
|
15425
|
+
return (jsx$1(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) => (jsxs(Item, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full`, disabled: disabled, value: item.value, children: [jsx$1(Trigger2, { disabled: disabled, className: `tw-w-full tw-cursor-default focus-visible:tw-outline-none`, children: item.trigger }), jsx$1(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))) }));
|
|
15413
15426
|
};
|
|
15414
15427
|
|
|
15415
|
-
const bgStyles$2 = ['tw
|
|
15428
|
+
const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
15416
15429
|
const borderStyles$2 = [
|
|
15417
|
-
'tw
|
|
15418
|
-
'tw
|
|
15419
|
-
'tw
|
|
15420
|
-
'tw
|
|
15421
|
-
'
|
|
15430
|
+
'tw-border-solid',
|
|
15431
|
+
'tw-border',
|
|
15432
|
+
'tw-rounded-popover',
|
|
15433
|
+
'tw-border-sq-disabled-gray',
|
|
15434
|
+
'dark:tw-border-gray-500',
|
|
15422
15435
|
].join(' ');
|
|
15423
|
-
const disabledClasses$2 = ['tw
|
|
15436
|
+
const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15424
15437
|
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 }) => {
|
|
15425
15438
|
const tooltipData = getQTipData(tooltipProps);
|
|
15426
15439
|
const timeout = useRef(null);
|
|
@@ -15451,12 +15464,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15451
15464
|
};
|
|
15452
15465
|
React.useEffect(() => clearHoverTimeout, []);
|
|
15453
15466
|
const renderContent = () => {
|
|
15454
|
-
return (jsx$1(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
|
|
15455
|
-
|
|
15456
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: "tw
|
|
15467
|
+
return (jsx$1(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: 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
|
|
15468
|
+
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
|
|
15469
|
+
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("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] }) }));
|
|
15457
15470
|
};
|
|
15458
15471
|
const renderPopover = (popoverOpenState) => {
|
|
15459
|
-
return (jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsx$1(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `
|
|
15472
|
+
return (jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsx$1(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: jsx$1("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 }) })) : (jsx$1(Trigger$3, { asChild: true, children: jsx$1("div", {}) })), isPortal ? jsx$1(Portal$2, { children: renderContent() }) : renderContent()] }));
|
|
15460
15473
|
};
|
|
15461
15474
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15462
15475
|
};
|
|
@@ -16521,65 +16534,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16521
16534
|
var SubContent2 = DropdownMenuSubContent;
|
|
16522
16535
|
|
|
16523
16536
|
const borderStyles$1 = [
|
|
16524
|
-
'tw
|
|
16525
|
-
'tw
|
|
16526
|
-
'tw
|
|
16527
|
-
'tw
|
|
16528
|
-
'
|
|
16537
|
+
'tw-border-solid',
|
|
16538
|
+
'tw-border',
|
|
16539
|
+
'tw-rounded-popover',
|
|
16540
|
+
'tw-border-sq-disabled-gray',
|
|
16541
|
+
'dark:tw-border-gray-500',
|
|
16529
16542
|
].join(' ');
|
|
16530
|
-
const bgStyles$1 = ['tw
|
|
16531
|
-
const disabledClasses$1 = ['tw
|
|
16543
|
+
const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16544
|
+
const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16532
16545
|
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 }) => {
|
|
16533
16546
|
const tooltipData = getQTipData(tooltipProps);
|
|
16534
|
-
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(Trigger, { id: id, className: `tw
|
|
16547
|
+
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, children: jsx$1("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 }) }), jsx$1(Portal2, { children: jsx$1(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: 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 && (jsx$1(Arrow2, { asChild: true, children: jsx$1("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) => {
|
|
16535
16548
|
const tooltipData = getQTipData(item);
|
|
16536
16549
|
if (item.isLabel) {
|
|
16537
|
-
return (jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsx$1(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw
|
|
16550
|
+
return (jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsx$1(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]" })), jsx$1("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));
|
|
16538
16551
|
}
|
|
16539
16552
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16540
|
-
return (jsxs(Sub2, { children: [jsxs(SubTrigger2, { id: id, className: `tw
|
|
16541
|
-
? '!tw
|
|
16542
|
-
: 'tw
|
|
16543
|
-
return (jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16544
|
-
? 'tw
|
|
16545
|
-
: 'tw
|
|
16553
|
+
return (jsxs(Sub2, { children: [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: [jsxs("div", { className: "tw-flex", children: [item.icon && (jsx$1(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
16554
|
+
? '!tw-text-sq-disabled-gray'
|
|
16555
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsx$1("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 })] }), jsx$1(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` })] }), jsx$1(Portal2, { children: jsx$1(SubContent2, { className: "focus-visible:tw-outline-none tw-outline-none", children: jsx$1("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) => {
|
|
16556
|
+
return (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 && (jsx$1(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })), jsx$1("div", { className: `tw-text-[0.8125rem] tw-ml-1 ${subItem.disabled
|
|
16557
|
+
? 'tw-text-sq-disabled-gray'
|
|
16558
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
|
|
16546
16559
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16547
16560
|
}
|
|
16548
16561
|
return (jsxs("div", { ...tooltipData, children: [jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16549
16562
|
item.onClick(e);
|
|
16550
|
-
}, className: `tw
|
|
16563
|
+
}, 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 && (jsx$1(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 || ''}` })), jsx$1("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 && (jsx$1(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));
|
|
16551
16564
|
})] }) }) })] }));
|
|
16552
16565
|
};
|
|
16553
16566
|
|
|
16554
|
-
const baseClasses$2 = 'tw
|
|
16555
|
-
' tw
|
|
16556
|
-
const darkTheme$1 = '
|
|
16557
|
-
const lightTheme$1 = 'tw
|
|
16558
|
-
const errorClasses$1 = 'tw
|
|
16559
|
-
const borderColorClasses$1 = 'tw
|
|
16567
|
+
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' +
|
|
16568
|
+
' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
|
|
16569
|
+
const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
|
|
16570
|
+
const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
|
|
16571
|
+
const errorClasses$1 = 'tw-border-sq-danger-color';
|
|
16572
|
+
const borderColorClasses$1 = 'tw-border-sq-color-dark';
|
|
16560
16573
|
/**
|
|
16561
16574
|
* Alert.
|
|
16562
16575
|
*/
|
|
16563
16576
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16564
16577
|
const appliedTheme = {
|
|
16565
16578
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16566
|
-
formulaError: 'tw
|
|
16567
|
-
danger: 'tw
|
|
16568
|
-
warning: 'tw
|
|
16569
|
-
gray: 'tw
|
|
16579
|
+
formulaError: 'tw-text-red-800 tw-bg-red-200 !tw-rounded-[4px]',
|
|
16580
|
+
danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
|
|
16581
|
+
warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
|
|
16582
|
+
gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-worksheetspanel-gray-dark dark:tw-text-sq-dark-text',
|
|
16570
16583
|
};
|
|
16571
16584
|
const appliedBorderTheme = {
|
|
16572
16585
|
theme: borderColorClasses$1,
|
|
16573
16586
|
danger: errorClasses$1,
|
|
16574
|
-
warning: 'tw
|
|
16575
|
-
gray: 'tw
|
|
16576
|
-
formulaError: 'tw
|
|
16587
|
+
warning: 'tw-border-none',
|
|
16588
|
+
gray: 'tw-border-sq-darkish-gray',
|
|
16589
|
+
formulaError: 'tw-border-red-100',
|
|
16577
16590
|
};
|
|
16578
16591
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16579
16592
|
if (!show) {
|
|
16580
16593
|
return jsx$1("div", {});
|
|
16581
16594
|
}
|
|
16582
|
-
return (jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsx$1(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw
|
|
16595
|
+
return (jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsx$1(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 }))] }));
|
|
16583
16596
|
};
|
|
16584
16597
|
|
|
16585
16598
|
/**
|
|
@@ -16598,40 +16611,47 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16598
16611
|
* @param tooltipProps - props to pass to the tooltip
|
|
16599
16612
|
*/
|
|
16600
16613
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16601
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16602
|
-
tw
|
|
16614
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16615
|
+
tw-outline-none`;
|
|
16603
16616
|
const tooltipData = getQTipData(tooltipProps);
|
|
16604
16617
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16605
|
-
return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw
|
|
16618
|
+
return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("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: jsx$1("path", { d: getSvgIconPath(icon) }) }) }));
|
|
16606
16619
|
};
|
|
16607
16620
|
|
|
16608
16621
|
const SeeqActionDropdownItem = (item) => {
|
|
16609
16622
|
let renderIcon = jsx$1(Fragment, {});
|
|
16610
16623
|
if (item.icon) {
|
|
16611
|
-
renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: 'tw
|
|
16624
|
+
renderIcon = isSvgIcon(item.icon) ? (jsx$1(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' +
|
|
16625
|
+
' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
16626
|
+
item.iconExtraClassNames, ...item })) : (jsx$1(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 ' +
|
|
16627
|
+
item.iconExtraClassNames }));
|
|
16612
16628
|
}
|
|
16613
|
-
return (jsxs("div", { className: "tw
|
|
16629
|
+
return (jsxs("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]", children: [jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, jsx$1("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0", children: item.display })] }), jsx$1("div", { className: "tw-text-[0.8125rem] tw-font-normal", children: item.text })] }));
|
|
16614
16630
|
};
|
|
16615
16631
|
const ViewWorkbench = (item) => {
|
|
16616
16632
|
let renderIcon = jsx$1(Fragment, {});
|
|
16617
16633
|
if (item.icon) {
|
|
16618
|
-
renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: 'tw
|
|
16634
|
+
renderIcon = isSvgIcon(item.icon) ? (jsx$1(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' +
|
|
16635
|
+
' tw-text-sq-text-color ' +
|
|
16636
|
+
item.iconExtraClassNames, type: "default", ...item })) : (jsx$1(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
16637
|
+
' tw-text-sq-text-color ' +
|
|
16638
|
+
item.iconExtraClassNames }));
|
|
16619
16639
|
}
|
|
16620
|
-
return (jsx$1("div", { className: "tw
|
|
16640
|
+
return (jsx$1("div", { className: "tw-flex-col tw-flex tw-p-[10px]", children: jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, jsx$1("div", { className: "tw-text-[0.8125rem]", children: item.display })] }) }));
|
|
16621
16641
|
};
|
|
16622
16642
|
const InsertSeeqContent = (item) => {
|
|
16623
|
-
return (jsxs("div", { className: "tw
|
|
16643
|
+
return (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: [jsx$1("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]", children: item.display }), jsx$1("div", { className: "tw-text-[0.8125rem] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1", children: item.text })] }));
|
|
16624
16644
|
};
|
|
16625
16645
|
|
|
16626
16646
|
const borderStyles = [
|
|
16627
|
-
'tw
|
|
16628
|
-
'tw
|
|
16629
|
-
'tw
|
|
16630
|
-
'tw
|
|
16631
|
-
'
|
|
16647
|
+
'tw-border-solid',
|
|
16648
|
+
'tw-border',
|
|
16649
|
+
'tw-rounded-md',
|
|
16650
|
+
'tw-border-sq-disabled-gray',
|
|
16651
|
+
'dark:tw-border-gray-500',
|
|
16632
16652
|
].join(' ');
|
|
16633
|
-
const bgStyles = ['tw
|
|
16634
|
-
const disabledClasses = ['tw
|
|
16653
|
+
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16654
|
+
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16635
16655
|
const renderItem = (variant, item) => {
|
|
16636
16656
|
switch (variant) {
|
|
16637
16657
|
case 'create-workbench':
|
|
@@ -16646,31 +16666,31 @@ const renderItem = (variant, item) => {
|
|
|
16646
16666
|
};
|
|
16647
16667
|
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 }) => {
|
|
16648
16668
|
const tooltipData = getQTipData(tooltipProps);
|
|
16649
|
-
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16650
|
-
' tw
|
|
16651
|
-
'
|
|
16652
|
-
' forceFont
|
|
16653
|
-
borderStyles, children: [hasArrow && (jsx$1(Arrow2, { asChild: true, children: jsx$1("div", { className: " tw
|
|
16669
|
+
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(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: jsx$1("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 }) }), jsx$1(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: jsxs("div", { "data-testid": containerTestId, className: bgStyles +
|
|
16670
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16671
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16672
|
+
' 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 ' +
|
|
16673
|
+
borderStyles, children: [hasArrow && (jsx$1(Arrow2, { asChild: true, children: jsx$1("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) => {
|
|
16654
16674
|
return (jsxs("div", { children: [jsx$1(Item2, { onSelect: (e) => {
|
|
16655
16675
|
item.action(e);
|
|
16656
|
-
}, className: `tw
|
|
16676
|
+
}, 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 && (jsx$1(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));
|
|
16657
16677
|
})] }) })] }));
|
|
16658
16678
|
};
|
|
16659
16679
|
|
|
16660
|
-
const baseClasses$1 = 'tw
|
|
16661
|
-
const errorClasses = 'tw
|
|
16680
|
+
const baseClasses$1 = 'tw-flex tw-outline-none tw-rounded-md tw-w-full tw-relative tw-flex-wrap';
|
|
16681
|
+
const errorClasses = 'tw-border-sq-danger-color';
|
|
16662
16682
|
const borderColorClasses = [
|
|
16663
|
-
'tw
|
|
16664
|
-
'
|
|
16665
|
-
'
|
|
16666
|
-
'
|
|
16667
|
-
'
|
|
16668
|
-
'
|
|
16683
|
+
'tw-border-sq-disabled-gray',
|
|
16684
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
16685
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
16686
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
16687
|
+
'focus:tw-border-sq-color-dark',
|
|
16688
|
+
'active:tw-border-sq-color-dark',
|
|
16669
16689
|
].join(' ');
|
|
16670
|
-
const fieldBorderRadius = 'tw
|
|
16671
|
-
const fieldClasses = 'tw
|
|
16672
|
-
const darkTheme = '
|
|
16673
|
-
const lightTheme = 'tw
|
|
16690
|
+
const fieldBorderRadius = 'tw-rounded-l-md tw-rounded-r-none';
|
|
16691
|
+
const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
|
|
16692
|
+
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
16693
|
+
const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
16674
16694
|
/**
|
|
16675
16695
|
* InputGroup.
|
|
16676
16696
|
*/
|
|
@@ -16680,10 +16700,8 @@ const InputGroup = React__default.forwardRef((props, ref) => {
|
|
|
16680
16700
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16681
16701
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16682
16702
|
const elementsToAppend = append.filter(Boolean);
|
|
16683
|
-
return (jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsx$1("div", { "data-testid": testId, className: `tw
|
|
16684
|
-
return item?.variant === 'button' ? (jsx$1(Button, { extraClassNames: `$
|
|
16685
|
-
index ? 'tw:-ml-px' : 'tw:ml-0'
|
|
16686
|
-
} tw:focus:z-40 tw:focus:border tw:rounded-none tw:last:rounded-r-md`, ...item.buttonProps }, index)) : (jsx$1("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));
|
|
16703
|
+
return (jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsx$1("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}`, children: field })) : (jsx$1(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) => {
|
|
16704
|
+
return item?.variant === 'button' ? (jsx$1(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)) : (jsx$1("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));
|
|
16687
16705
|
})] }));
|
|
16688
16706
|
});
|
|
16689
16707
|
|
|
@@ -27413,7 +27431,7 @@ var Thumb = SliderThumb;
|
|
|
27413
27431
|
*/
|
|
27414
27432
|
const Slider = (props) => {
|
|
27415
27433
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27416
|
-
return (jsxs(Root$1, { className: `tw
|
|
27434
|
+
return (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: [jsx$1(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: jsx$1(Range, { className: `tw-absolute tw-h-full tw-rounded-full ${rangeExtraClassNames}` }) }), jsx$1(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 })] }));
|
|
27417
27435
|
};
|
|
27418
27436
|
|
|
27419
27437
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28682,7 +28700,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28682
28700
|
};
|
|
28683
28701
|
}
|
|
28684
28702
|
|
|
28685
|
-
const baseLabelClasses = 'tw
|
|
28703
|
+
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]';
|
|
28686
28704
|
const ProgressIndicator = (props) => {
|
|
28687
28705
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28688
28706
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28695,19 +28713,19 @@ const ProgressIndicator = (props) => {
|
|
|
28695
28713
|
if (totalValue >= max) {
|
|
28696
28714
|
// If progress is 100%, round both ends
|
|
28697
28715
|
if (index === 0 && valuesLength === 1) {
|
|
28698
|
-
roundedCorners = 'tw
|
|
28716
|
+
roundedCorners = 'tw-rounded-[15px]';
|
|
28699
28717
|
}
|
|
28700
28718
|
else if (index === 0) {
|
|
28701
|
-
roundedCorners = 'tw
|
|
28719
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28702
28720
|
}
|
|
28703
28721
|
else if (index === valuesLength - 1) {
|
|
28704
|
-
roundedCorners = 'tw
|
|
28722
|
+
roundedCorners = 'tw-rounded-r-[15px]';
|
|
28705
28723
|
}
|
|
28706
28724
|
}
|
|
28707
28725
|
else {
|
|
28708
28726
|
// Otherwise, only round the leftmost indicator
|
|
28709
28727
|
if (index === 0) {
|
|
28710
|
-
roundedCorners = 'tw
|
|
28728
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28711
28729
|
}
|
|
28712
28730
|
}
|
|
28713
28731
|
useEffect(() => {
|
|
@@ -28719,13 +28737,13 @@ const ProgressIndicator = (props) => {
|
|
|
28719
28737
|
return () => clearTimeout(timeout);
|
|
28720
28738
|
}, [value]);
|
|
28721
28739
|
const bgColor = color || undefined;
|
|
28722
|
-
const bgClass = color ? '' : 'tw
|
|
28740
|
+
const bgClass = color ? '' : 'tw-bg-sq-color-dark';
|
|
28723
28741
|
const computeTextClass = (elem) => {
|
|
28724
28742
|
const computedStyle = getComputedStyle(elem);
|
|
28725
28743
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28726
28744
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28727
|
-
? 'tw
|
|
28728
|
-
: 'tw
|
|
28745
|
+
? 'tw-text-sq-white dark:tw-text-sq-white'
|
|
28746
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-text-color';
|
|
28729
28747
|
setTextColorClass(textColorClass);
|
|
28730
28748
|
};
|
|
28731
28749
|
useEffect(() => {
|
|
@@ -28733,35 +28751,35 @@ const ProgressIndicator = (props) => {
|
|
|
28733
28751
|
computeTextClass(indicatorElementRef.current);
|
|
28734
28752
|
}
|
|
28735
28753
|
}, [!!indicatorElementRef.current]);
|
|
28736
|
-
return (createElement(Indicator, { className: `tw
|
|
28754
|
+
return (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: {
|
|
28737
28755
|
// Background color will default to the theme color if undefined
|
|
28738
28756
|
backgroundColor: bgColor,
|
|
28739
28757
|
animation: 'width 660ms forwards',
|
|
28740
28758
|
width: `${animatedWidth}%`,
|
|
28741
|
-
} }, label ? (jsx$1("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw
|
|
28759
|
+
} }, label ? (jsx$1("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw-absolute tw-z-50' : ''}`, children: label })) : undefined));
|
|
28742
28760
|
};
|
|
28743
28761
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28744
28762
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28745
|
-
return (jsx$1(Root, { className: `tw
|
|
28746
|
-
return
|
|
28747
|
-
})) : (jsx$1("div", { className: `${baseLabelClasses} tw
|
|
28763
|
+
return (jsx$1(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) => {
|
|
28764
|
+
return createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
|
|
28765
|
+
})) : (jsx$1("div", { className: `${baseLabelClasses} tw-mx-auto tw-overflow-hidden`, children: zeroValueLabel })) }));
|
|
28748
28766
|
};
|
|
28749
28767
|
|
|
28750
|
-
const baseClasses = 'tw
|
|
28768
|
+
const baseClasses = 'tw-flex tw-outline-none tw-w-full tw-relative tw-flex-wrap';
|
|
28751
28769
|
const activeClassesByVariantLightTheme = {
|
|
28752
|
-
'outline': '!tw
|
|
28753
|
-
'theme': 'tw
|
|
28770
|
+
'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
|
|
28771
|
+
'theme': 'tw-bg-sq-color-highlight',
|
|
28754
28772
|
'danger': '',
|
|
28755
28773
|
'theme-light': '',
|
|
28756
|
-
'no-border': '!tw
|
|
28774
|
+
'no-border': '!tw-bg-sq-disabled-gray',
|
|
28757
28775
|
'warning': '',
|
|
28758
28776
|
};
|
|
28759
28777
|
const activeClassesByVariantDarkTheme = {
|
|
28760
|
-
'outline': '
|
|
28761
|
-
'theme': '
|
|
28778
|
+
'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
|
|
28779
|
+
'theme': 'dark:tw-bg-sq-color-highlight',
|
|
28762
28780
|
'danger': '',
|
|
28763
28781
|
'theme-light': '',
|
|
28764
|
-
'no-border': '
|
|
28782
|
+
'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
|
|
28765
28783
|
'warning': '',
|
|
28766
28784
|
};
|
|
28767
28785
|
/**
|
|
@@ -28773,7 +28791,7 @@ const ButtonGroup = (props) => {
|
|
|
28773
28791
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28774
28792
|
return (jsx$1("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28775
28793
|
.filter(Boolean)
|
|
28776
|
-
.map((item, index) => item?.variant === 'button' ? (jsx$1(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28794
|
+
.map((item, index) => item?.variant === 'button' ? (jsx$1(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
|
|
28777
28795
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28778
28796
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28779
28797
|
};
|
|
@@ -28783,7 +28801,7 @@ const ButtonGroup = (props) => {
|
|
|
28783
28801
|
* - Easily create a carousel with custom slides.
|
|
28784
28802
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28785
28803
|
*/
|
|
28786
|
-
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw
|
|
28804
|
+
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 = [], }) => {
|
|
28787
28805
|
const [currentIndex, setCurrentIndex] = useState(activeIndex);
|
|
28788
28806
|
const changeSlide = (nextIndex) => {
|
|
28789
28807
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -28845,7 +28863,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
28845
28863
|
transition: { type: 'spring', damping: 20, stiffness: 100 },
|
|
28846
28864
|
}),
|
|
28847
28865
|
};
|
|
28848
|
-
return (jsxs("div", { "data-testid": testId, className: `tw
|
|
28866
|
+
return (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: [jsxs("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1", children: [showArrows && (jsx$1(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })), jsx$1("div", { className: "tw-h-full tw-w-full tw-overflow-hidden", children: jsx$1(motion.div, { custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw-w-full", children: carouselItems[currentIndex] }, currentIndex) }), showArrows && (jsx$1(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 && (jsx$1("div", { className: "tw-flex tw-gap-1 tw-mt-2", children: carouselItems.map((_, i) => (jsx$1("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))) }))] }));
|
|
28849
28867
|
};
|
|
28850
28868
|
|
|
28851
28869
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|