@seeqdev/qomponents 0.0.174 → 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 +361 -341
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +361 -341
- package/dist/index.js.map +1 -1
- package/dist/src/Alert/Alert.types.d.ts +0 -1
- package/dist/src/ButtonGroup/ButtonGroup.types.d.ts +0 -1
- package/dist/src/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +0 -1
- package/dist/src/Carousel/Carousel.types.d.ts +0 -1
- package/dist/src/Checkbox/Checkbox.types.d.ts +0 -1
- package/dist/src/Collapse/Collapse.types.d.ts +0 -1
- package/dist/src/Icon/Icon.types.d.ts +0 -1
- package/dist/src/InputGroup/InputGroup.types.d.ts +0 -1
- package/dist/src/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +0 -1
- package/dist/src/Slider/Slider.types.d.ts +0 -1
- package/dist/src/SvgIcon/SvgIcon.types.d.ts +0 -1
- package/dist/src/TextArea/TextArea.types.d.ts +0 -1
- package/dist/src/TextField/TextField.types.d.ts +0 -1
- package/dist/styles.css +3453 -2772
- package/package.json +4 -5
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,75 +13925,70 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
13905
13925
|
});
|
|
13906
13926
|
var CreatableSelect$1 = CreatableSelect;
|
|
13907
13927
|
|
|
13908
|
-
const baseClasses$3 = ['focus:tw
|
|
13909
|
-
const containerStyles = ['tw
|
|
13910
|
-
const errorClasses$2 = 'tw
|
|
13911
|
-
const borderColorClasses$2 = ['tw
|
|
13912
|
-
const borderStyles$3 = [
|
|
13913
|
-
|
|
13914
|
-
'tw
|
|
13915
|
-
'tw
|
|
13916
|
-
'
|
|
13917
|
-
'
|
|
13918
|
-
'
|
|
13919
|
-
'dark:
|
|
13920
|
-
'dark:active:tw:border-sq-theme-dark-dark',
|
|
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(' ');
|
|
13933
|
+
const borderActiveClasses = [
|
|
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',
|
|
13921
13940
|
].join(' ');
|
|
13922
|
-
const textStyles = ['tw
|
|
13941
|
+
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
13923
13942
|
const textActiveStyles = [
|
|
13924
|
-
'
|
|
13925
|
-
'
|
|
13926
|
-
'
|
|
13927
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13928
|
-
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13929
|
-
'dark:focus:tw:text-sq-theme-dark-dark',
|
|
13930
|
-
'dark:active:tw:text-sq-theme-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',
|
|
13931
13946
|
].join(' ');
|
|
13932
13947
|
const menuStyles = [
|
|
13933
|
-
'tw
|
|
13934
|
-
'tw
|
|
13935
|
-
'tw
|
|
13936
|
-
'tw
|
|
13937
|
-
'
|
|
13938
|
-
'tw
|
|
13939
|
-
'tw
|
|
13940
|
-
'!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]',
|
|
13941
13956
|
].join(' ');
|
|
13942
13957
|
const menuListStyles = [
|
|
13943
|
-
'tw
|
|
13944
|
-
'tw
|
|
13945
|
-
'
|
|
13946
|
-
'tw
|
|
13947
|
-
'!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]',
|
|
13948
13963
|
'specSelectMenu',
|
|
13949
13964
|
].join(' ');
|
|
13950
13965
|
const groupHeadingStyles = [
|
|
13951
|
-
'tw
|
|
13952
|
-
'
|
|
13953
|
-
'tw
|
|
13954
|
-
'tw
|
|
13955
|
-
'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',
|
|
13956
13971
|
'specSelectGroupHeading',
|
|
13957
13972
|
].join(' ');
|
|
13958
13973
|
const optionStyles = [
|
|
13959
|
-
'
|
|
13960
|
-
'
|
|
13961
|
-
'
|
|
13962
|
-
'tw
|
|
13963
|
-
'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',
|
|
13964
13979
|
'specSelectOption',
|
|
13965
13980
|
].join(' ');
|
|
13966
|
-
const disabledClasses$3 = ['tw
|
|
13967
|
-
const dropDownIndicatorStyles = `tw
|
|
13968
|
-
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(' ');
|
|
13969
13984
|
const multiValueStyles = [
|
|
13970
|
-
'tw
|
|
13971
|
-
'
|
|
13972
|
-
'tw
|
|
13973
|
-
'tw
|
|
13974
|
-
'tw
|
|
13975
|
-
'tw
|
|
13976
|
-
'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',
|
|
13977
13992
|
'specOpenSelect',
|
|
13978
13993
|
].join(' ');
|
|
13979
13994
|
/**
|
|
@@ -14038,38 +14053,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14038
14053
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14039
14054
|
classNames: {
|
|
14040
14055
|
control: ({ menuIsOpen }) => {
|
|
14041
|
-
let border = menuIsOpen ? 'tw
|
|
14056
|
+
let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14042
14057
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14043
14058
|
if (inputGroup === 'left') {
|
|
14044
|
-
border = menuIsOpen ? 'tw
|
|
14059
|
+
border = menuIsOpen ? 'tw-rounded-tl-md' : 'tw-rounded-l-md';
|
|
14045
14060
|
}
|
|
14046
14061
|
else if (inputGroup === 'right') {
|
|
14047
|
-
border = menuIsOpen ? 'tw
|
|
14062
|
+
border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
|
|
14048
14063
|
}
|
|
14049
|
-
const appliedClasses = `${borderStyles$3} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14050
|
-
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw
|
|
14064
|
+
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
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'}`;
|
|
14051
14066
|
},
|
|
14052
14067
|
placeholder: () => placeholderStyles,
|
|
14053
14068
|
container: ({ selectProps }) => {
|
|
14054
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14055
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles}`;
|
|
14069
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14070
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw-pointer-events-auto`;
|
|
14056
14071
|
},
|
|
14057
14072
|
input: () => textStyles + ' specSelectInput',
|
|
14058
14073
|
menuList: () => menuListStyles,
|
|
14059
14074
|
menu: () => menuStyles,
|
|
14060
|
-
menuPortal: () => '!tw
|
|
14075
|
+
menuPortal: () => '!tw-z-[9000]',
|
|
14061
14076
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14062
14077
|
option: ({ isSelected, isDisabled }) => {
|
|
14063
14078
|
let classes = optionStyles;
|
|
14064
14079
|
if (isDisabled) {
|
|
14065
14080
|
classes += ' specDisabledOption ';
|
|
14066
14081
|
}
|
|
14067
|
-
return isSelected ? classes + ' tw
|
|
14082
|
+
return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
14068
14083
|
},
|
|
14069
14084
|
singleValue: () => 'specOpenSelect',
|
|
14070
14085
|
multiValue: () => multiValueStyles,
|
|
14071
|
-
multiValueRemove: () => '
|
|
14072
|
-
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',
|
|
14073
14088
|
group: () => 'specSelectGroup',
|
|
14074
14089
|
groupHeading: () => groupHeadingStyles,
|
|
14075
14090
|
},
|
|
@@ -14459,11 +14474,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14459
14474
|
const Dialog = Root$4;
|
|
14460
14475
|
const DialogPortal = Portal$1;
|
|
14461
14476
|
const DialogClose = Close;
|
|
14462
|
-
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw
|
|
14463
|
-
tw
|
|
14464
|
-
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] })] })));
|
|
14465
14480
|
DialogContent.displayName = Content$2.displayName;
|
|
14466
|
-
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 }) }));
|
|
14467
14482
|
DialogHeader.displayName = 'DialogHeader';
|
|
14468
14483
|
const DialogFooter = (props) => jsx$1("div", { ...props });
|
|
14469
14484
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14501,26 +14516,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14501
14516
|
let titleIconElement = jsx$1(Fragment, {});
|
|
14502
14517
|
if (titleIcon) {
|
|
14503
14518
|
if (typeof titleIcon === 'string') {
|
|
14504
|
-
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" }));
|
|
14505
14520
|
}
|
|
14506
14521
|
else {
|
|
14507
|
-
titleIconElement = jsx$1("div", { className: "tw
|
|
14522
|
+
titleIconElement = jsx$1("div", { className: "tw-mt-1.5", children: titleIcon });
|
|
14508
14523
|
}
|
|
14509
14524
|
}
|
|
14510
|
-
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, {})] }));
|
|
14511
14526
|
};
|
|
14512
|
-
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
|
|
14513
|
-
'tw
|
|
14514
|
-
'tw
|
|
14515
|
-
'tw
|
|
14516
|
-
'tw
|
|
14517
|
-
'tw
|
|
14518
|
-
'tw
|
|
14519
|
-
'tw
|
|
14520
|
-
'tw
|
|
14521
|
-
'tw
|
|
14522
|
-
'tw
|
|
14523
|
-
}, 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, {}));
|
|
14524
14539
|
};
|
|
14525
14540
|
|
|
14526
14541
|
function createCollection(name) {
|
|
@@ -14978,11 +14993,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14978
14993
|
return;
|
|
14979
14994
|
onTabSelect && onTabSelect(tabId);
|
|
14980
14995
|
};
|
|
14981
|
-
return (jsxs(Root2$2, { className: `tw
|
|
14982
|
-
? 'tw
|
|
14983
|
-
: '
|
|
14984
|
-
? '
|
|
14985
|
-
: '
|
|
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`)))] }));
|
|
14986
15001
|
};
|
|
14987
15002
|
|
|
14988
15003
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15407,18 +15422,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15407
15422
|
var Content2$2 = AccordionContent;
|
|
15408
15423
|
|
|
15409
15424
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15410
|
-
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))) }));
|
|
15411
15426
|
};
|
|
15412
15427
|
|
|
15413
|
-
const bgStyles$2 = ['tw
|
|
15428
|
+
const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
15414
15429
|
const borderStyles$2 = [
|
|
15415
|
-
'tw
|
|
15416
|
-
'tw
|
|
15417
|
-
'tw
|
|
15418
|
-
'tw
|
|
15419
|
-
'
|
|
15430
|
+
'tw-border-solid',
|
|
15431
|
+
'tw-border',
|
|
15432
|
+
'tw-rounded-popover',
|
|
15433
|
+
'tw-border-sq-disabled-gray',
|
|
15434
|
+
'dark:tw-border-gray-500',
|
|
15420
15435
|
].join(' ');
|
|
15421
|
-
const disabledClasses$2 = ['tw
|
|
15436
|
+
const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15422
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 }) => {
|
|
15423
15438
|
const tooltipData = getQTipData(tooltipProps);
|
|
15424
15439
|
const timeout = useRef(null);
|
|
@@ -15449,12 +15464,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15449
15464
|
};
|
|
15450
15465
|
React.useEffect(() => clearHoverTimeout, []);
|
|
15451
15466
|
const renderContent = () => {
|
|
15452
|
-
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
|
|
15453
|
-
|
|
15454
|
-
${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] }) }));
|
|
15455
15470
|
};
|
|
15456
15471
|
const renderPopover = (popoverOpenState) => {
|
|
15457
|
-
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()] }));
|
|
15458
15473
|
};
|
|
15459
15474
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15460
15475
|
};
|
|
@@ -16519,65 +16534,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16519
16534
|
var SubContent2 = DropdownMenuSubContent;
|
|
16520
16535
|
|
|
16521
16536
|
const borderStyles$1 = [
|
|
16522
|
-
'tw
|
|
16523
|
-
'tw
|
|
16524
|
-
'tw
|
|
16525
|
-
'tw
|
|
16526
|
-
'
|
|
16537
|
+
'tw-border-solid',
|
|
16538
|
+
'tw-border',
|
|
16539
|
+
'tw-rounded-popover',
|
|
16540
|
+
'tw-border-sq-disabled-gray',
|
|
16541
|
+
'dark:tw-border-gray-500',
|
|
16527
16542
|
].join(' ');
|
|
16528
|
-
const bgStyles$1 = ['tw
|
|
16529
|
-
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(' ');
|
|
16530
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 }) => {
|
|
16531
16546
|
const tooltipData = getQTipData(tooltipProps);
|
|
16532
|
-
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) => {
|
|
16533
16548
|
const tooltipData = getQTipData(item);
|
|
16534
16549
|
if (item.isLabel) {
|
|
16535
|
-
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));
|
|
16536
16551
|
}
|
|
16537
16552
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16538
|
-
return (jsxs(Sub2, { children: [jsxs(SubTrigger2, { id: id, className: `tw
|
|
16539
|
-
? '!tw
|
|
16540
|
-
: 'tw
|
|
16541
|
-
return (jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16542
|
-
? 'tw
|
|
16543
|
-
: '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));
|
|
16544
16559
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16545
16560
|
}
|
|
16546
16561
|
return (jsxs("div", { ...tooltipData, children: [jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16547
16562
|
item.onClick(e);
|
|
16548
|
-
}, 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));
|
|
16549
16564
|
})] }) }) })] }));
|
|
16550
16565
|
};
|
|
16551
16566
|
|
|
16552
|
-
const baseClasses$2 = 'tw
|
|
16553
|
-
' tw
|
|
16554
|
-
const darkTheme$1 = '
|
|
16555
|
-
const lightTheme$1 = 'tw
|
|
16556
|
-
const errorClasses$1 = 'tw
|
|
16557
|
-
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';
|
|
16558
16573
|
/**
|
|
16559
16574
|
* Alert.
|
|
16560
16575
|
*/
|
|
16561
16576
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16562
16577
|
const appliedTheme = {
|
|
16563
16578
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16564
|
-
formulaError: 'tw
|
|
16565
|
-
danger: 'tw
|
|
16566
|
-
warning: 'tw
|
|
16567
|
-
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',
|
|
16568
16583
|
};
|
|
16569
16584
|
const appliedBorderTheme = {
|
|
16570
16585
|
theme: borderColorClasses$1,
|
|
16571
16586
|
danger: errorClasses$1,
|
|
16572
|
-
warning: 'tw
|
|
16573
|
-
gray: 'tw
|
|
16574
|
-
formulaError: 'tw
|
|
16587
|
+
warning: 'tw-border-none',
|
|
16588
|
+
gray: 'tw-border-sq-darkish-gray',
|
|
16589
|
+
formulaError: 'tw-border-red-100',
|
|
16575
16590
|
};
|
|
16576
16591
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16577
16592
|
if (!show) {
|
|
16578
16593
|
return jsx$1("div", {});
|
|
16579
16594
|
}
|
|
16580
|
-
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 }))] }));
|
|
16581
16596
|
};
|
|
16582
16597
|
|
|
16583
16598
|
/**
|
|
@@ -16596,40 +16611,47 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16596
16611
|
* @param tooltipProps - props to pass to the tooltip
|
|
16597
16612
|
*/
|
|
16598
16613
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16599
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16600
|
-
tw
|
|
16614
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16615
|
+
tw-outline-none`;
|
|
16601
16616
|
const tooltipData = getQTipData(tooltipProps);
|
|
16602
16617
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16603
|
-
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) }) }) }));
|
|
16604
16619
|
};
|
|
16605
16620
|
|
|
16606
16621
|
const SeeqActionDropdownItem = (item) => {
|
|
16607
16622
|
let renderIcon = jsx$1(Fragment, {});
|
|
16608
16623
|
if (item.icon) {
|
|
16609
|
-
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 }));
|
|
16610
16628
|
}
|
|
16611
|
-
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 })] }));
|
|
16612
16630
|
};
|
|
16613
16631
|
const ViewWorkbench = (item) => {
|
|
16614
16632
|
let renderIcon = jsx$1(Fragment, {});
|
|
16615
16633
|
if (item.icon) {
|
|
16616
|
-
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 }));
|
|
16617
16639
|
}
|
|
16618
|
-
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 })] }) }));
|
|
16619
16641
|
};
|
|
16620
16642
|
const InsertSeeqContent = (item) => {
|
|
16621
|
-
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 })] }));
|
|
16622
16644
|
};
|
|
16623
16645
|
|
|
16624
16646
|
const borderStyles = [
|
|
16625
|
-
'tw
|
|
16626
|
-
'tw
|
|
16627
|
-
'tw
|
|
16628
|
-
'tw
|
|
16629
|
-
'
|
|
16647
|
+
'tw-border-solid',
|
|
16648
|
+
'tw-border',
|
|
16649
|
+
'tw-rounded-md',
|
|
16650
|
+
'tw-border-sq-disabled-gray',
|
|
16651
|
+
'dark:tw-border-gray-500',
|
|
16630
16652
|
].join(' ');
|
|
16631
|
-
const bgStyles = ['tw
|
|
16632
|
-
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(' ');
|
|
16633
16655
|
const renderItem = (variant, item) => {
|
|
16634
16656
|
switch (variant) {
|
|
16635
16657
|
case 'create-workbench':
|
|
@@ -16644,31 +16666,31 @@ const renderItem = (variant, item) => {
|
|
|
16644
16666
|
};
|
|
16645
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 }) => {
|
|
16646
16668
|
const tooltipData = getQTipData(tooltipProps);
|
|
16647
|
-
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16648
|
-
' tw
|
|
16649
|
-
'
|
|
16650
|
-
' forceFont
|
|
16651
|
-
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) => {
|
|
16652
16674
|
return (jsxs("div", { children: [jsx$1(Item2, { onSelect: (e) => {
|
|
16653
16675
|
item.action(e);
|
|
16654
|
-
}, 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));
|
|
16655
16677
|
})] }) })] }));
|
|
16656
16678
|
};
|
|
16657
16679
|
|
|
16658
|
-
const baseClasses$1 = 'tw
|
|
16659
|
-
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';
|
|
16660
16682
|
const borderColorClasses = [
|
|
16661
|
-
'tw
|
|
16662
|
-
'
|
|
16663
|
-
'
|
|
16664
|
-
'
|
|
16665
|
-
'
|
|
16666
|
-
'
|
|
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',
|
|
16667
16689
|
].join(' ');
|
|
16668
|
-
const fieldBorderRadius = 'tw
|
|
16669
|
-
const fieldClasses = 'tw
|
|
16670
|
-
const darkTheme = '
|
|
16671
|
-
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';
|
|
16672
16694
|
/**
|
|
16673
16695
|
* InputGroup.
|
|
16674
16696
|
*/
|
|
@@ -16678,10 +16700,8 @@ const InputGroup = React__default.forwardRef((props, ref) => {
|
|
|
16678
16700
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16679
16701
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16680
16702
|
const elementsToAppend = append.filter(Boolean);
|
|
16681
|
-
return (jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsx$1("div", { "data-testid": testId, className: `tw
|
|
16682
|
-
return item?.variant === 'button' ? (jsx$1(Button, { extraClassNames: `$
|
|
16683
|
-
index ? 'tw:-ml-px' : 'tw:ml-0'
|
|
16684
|
-
} 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));
|
|
16685
16705
|
})] }));
|
|
16686
16706
|
});
|
|
16687
16707
|
|
|
@@ -27411,7 +27431,7 @@ var Thumb = SliderThumb;
|
|
|
27411
27431
|
*/
|
|
27412
27432
|
const Slider = (props) => {
|
|
27413
27433
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27414
|
-
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 })] }));
|
|
27415
27435
|
};
|
|
27416
27436
|
|
|
27417
27437
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28680,7 +28700,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28680
28700
|
};
|
|
28681
28701
|
}
|
|
28682
28702
|
|
|
28683
|
-
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]';
|
|
28684
28704
|
const ProgressIndicator = (props) => {
|
|
28685
28705
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28686
28706
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28693,19 +28713,19 @@ const ProgressIndicator = (props) => {
|
|
|
28693
28713
|
if (totalValue >= max) {
|
|
28694
28714
|
// If progress is 100%, round both ends
|
|
28695
28715
|
if (index === 0 && valuesLength === 1) {
|
|
28696
|
-
roundedCorners = 'tw
|
|
28716
|
+
roundedCorners = 'tw-rounded-[15px]';
|
|
28697
28717
|
}
|
|
28698
28718
|
else if (index === 0) {
|
|
28699
|
-
roundedCorners = 'tw
|
|
28719
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28700
28720
|
}
|
|
28701
28721
|
else if (index === valuesLength - 1) {
|
|
28702
|
-
roundedCorners = 'tw
|
|
28722
|
+
roundedCorners = 'tw-rounded-r-[15px]';
|
|
28703
28723
|
}
|
|
28704
28724
|
}
|
|
28705
28725
|
else {
|
|
28706
28726
|
// Otherwise, only round the leftmost indicator
|
|
28707
28727
|
if (index === 0) {
|
|
28708
|
-
roundedCorners = 'tw
|
|
28728
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28709
28729
|
}
|
|
28710
28730
|
}
|
|
28711
28731
|
useEffect(() => {
|
|
@@ -28717,13 +28737,13 @@ const ProgressIndicator = (props) => {
|
|
|
28717
28737
|
return () => clearTimeout(timeout);
|
|
28718
28738
|
}, [value]);
|
|
28719
28739
|
const bgColor = color || undefined;
|
|
28720
|
-
const bgClass = color ? '' : 'tw
|
|
28740
|
+
const bgClass = color ? '' : 'tw-bg-sq-color-dark';
|
|
28721
28741
|
const computeTextClass = (elem) => {
|
|
28722
28742
|
const computedStyle = getComputedStyle(elem);
|
|
28723
28743
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28724
28744
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28725
|
-
? 'tw
|
|
28726
|
-
: 'tw
|
|
28745
|
+
? 'tw-text-sq-white dark:tw-text-sq-white'
|
|
28746
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-text-color';
|
|
28727
28747
|
setTextColorClass(textColorClass);
|
|
28728
28748
|
};
|
|
28729
28749
|
useEffect(() => {
|
|
@@ -28731,35 +28751,35 @@ const ProgressIndicator = (props) => {
|
|
|
28731
28751
|
computeTextClass(indicatorElementRef.current);
|
|
28732
28752
|
}
|
|
28733
28753
|
}, [!!indicatorElementRef.current]);
|
|
28734
|
-
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: {
|
|
28735
28755
|
// Background color will default to the theme color if undefined
|
|
28736
28756
|
backgroundColor: bgColor,
|
|
28737
28757
|
animation: 'width 660ms forwards',
|
|
28738
28758
|
width: `${animatedWidth}%`,
|
|
28739
|
-
} }, 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));
|
|
28740
28760
|
};
|
|
28741
28761
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28742
28762
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28743
|
-
return (jsx$1(Root, { className: `tw
|
|
28744
|
-
return
|
|
28745
|
-
})) : (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 })) }));
|
|
28746
28766
|
};
|
|
28747
28767
|
|
|
28748
|
-
const baseClasses = 'tw
|
|
28768
|
+
const baseClasses = 'tw-flex tw-outline-none tw-w-full tw-relative tw-flex-wrap';
|
|
28749
28769
|
const activeClassesByVariantLightTheme = {
|
|
28750
|
-
'outline': '!tw
|
|
28751
|
-
'theme': 'tw
|
|
28770
|
+
'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
|
|
28771
|
+
'theme': 'tw-bg-sq-color-highlight',
|
|
28752
28772
|
'danger': '',
|
|
28753
28773
|
'theme-light': '',
|
|
28754
|
-
'no-border': '!tw
|
|
28774
|
+
'no-border': '!tw-bg-sq-disabled-gray',
|
|
28755
28775
|
'warning': '',
|
|
28756
28776
|
};
|
|
28757
28777
|
const activeClassesByVariantDarkTheme = {
|
|
28758
|
-
'outline': '
|
|
28759
|
-
'theme': '
|
|
28778
|
+
'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
|
|
28779
|
+
'theme': 'dark:tw-bg-sq-color-highlight',
|
|
28760
28780
|
'danger': '',
|
|
28761
28781
|
'theme-light': '',
|
|
28762
|
-
'no-border': '
|
|
28782
|
+
'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
|
|
28763
28783
|
'warning': '',
|
|
28764
28784
|
};
|
|
28765
28785
|
/**
|
|
@@ -28771,7 +28791,7 @@ const ButtonGroup = (props) => {
|
|
|
28771
28791
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28772
28792
|
return (jsx$1("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28773
28793
|
.filter(Boolean)
|
|
28774
|
-
.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
|
|
28775
28795
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28776
28796
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28777
28797
|
};
|
|
@@ -28781,7 +28801,7 @@ const ButtonGroup = (props) => {
|
|
|
28781
28801
|
* - Easily create a carousel with custom slides.
|
|
28782
28802
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28783
28803
|
*/
|
|
28784
|
-
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 = [], }) => {
|
|
28785
28805
|
const [currentIndex, setCurrentIndex] = useState(activeIndex);
|
|
28786
28806
|
const changeSlide = (nextIndex) => {
|
|
28787
28807
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -28843,7 +28863,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
28843
28863
|
transition: { type: 'spring', damping: 20, stiffness: 100 },
|
|
28844
28864
|
}),
|
|
28845
28865
|
};
|
|
28846
|
-
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))) }))] }));
|
|
28847
28867
|
};
|
|
28848
28868
|
|
|
28849
28869
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|