@seeqdev/qomponents 0.0.168 → 0.0.170
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -135
- package/dist/FontCustom.woff +0 -0
- package/dist/FontCustom.woff2 +0 -0
- package/dist/example/.eslintrc.cjs +14 -14
- package/dist/example/README.md +33 -33
- package/dist/example/index.html +13 -13
- package/dist/example/package.json +32 -32
- package/dist/example/src/ComplexSelectExample.tsx +81 -81
- package/dist/example/src/Example.tsx +638 -638
- package/dist/example/src/index.css +103 -103
- package/dist/example/src/main.tsx +10 -10
- package/dist/example/src/vite-env.d.ts +1 -1
- package/dist/example/tsconfig.json +33 -33
- package/dist/example/tsconfig.node.json +12 -12
- package/dist/example/vite.config.ts +13 -13
- package/dist/index.esm.js +17 -16
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +17 -16
- package/dist/index.js.map +1 -1
- package/dist/src/Button/Button.stories.d.ts +1 -0
- package/dist/src/Button/Button.types.d.ts +1 -1
- package/dist/styles.css +3872 -3848
- package/package.json +89 -89
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
-
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
-
@import 'tailwindcss';
|
|
4
|
-
|
|
5
|
-
.tw-light {
|
|
6
|
-
background-color: white;
|
|
7
|
-
color: #1a1a1a;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.tw-dark {
|
|
11
|
-
background-color: rgb(36, 36, 34);
|
|
12
|
-
color: rgb(194, 188, 176);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.formPanel {
|
|
16
|
-
align-items: center;
|
|
17
|
-
width: 500px;
|
|
18
|
-
display: flex;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.header {
|
|
22
|
-
font-size: larger;
|
|
23
|
-
font-weight: bold;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.backdrop {
|
|
27
|
-
margin: 0;
|
|
28
|
-
display: flex;
|
|
29
|
-
justify-content: center;
|
|
30
|
-
align-items: center;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.scroll-container {
|
|
34
|
-
margin: auto;
|
|
35
|
-
max-height: 100%;
|
|
36
|
-
overflow: auto;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.flex-container {
|
|
40
|
-
margin-top: 30px;
|
|
41
|
-
margin-bottom: 70px;
|
|
42
|
-
display: flex;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
justify-content: center;
|
|
45
|
-
width: 500px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.formRow {
|
|
49
|
-
display: flex;
|
|
50
|
-
flex-direction: row;
|
|
51
|
-
margin-bottom: 15px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.formColumn {
|
|
55
|
-
display: flex;
|
|
56
|
-
flex-direction: column;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.buttonRow {
|
|
60
|
-
display: flex;
|
|
61
|
-
justify-content: center;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.labelWidth {
|
|
65
|
-
width: 150px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.formElementWidth {
|
|
69
|
-
width: 350px;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.mr-10 {
|
|
73
|
-
margin-right: 10px;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.ml-10 {
|
|
77
|
-
margin-left: 10px;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.mb-10 {
|
|
81
|
-
margin-bottom: 10px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/* styles for complexSelect*/
|
|
85
|
-
.selectOptionWrapperDiv {
|
|
86
|
-
display: flex;
|
|
87
|
-
flex-direction: row;
|
|
88
|
-
align-items: center;
|
|
89
|
-
height: 34px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.selectOptionDiv {
|
|
93
|
-
display: flex;
|
|
94
|
-
flex-direction: column;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.selectOptionSubText {
|
|
98
|
-
font-size: smaller;
|
|
99
|
-
padding: 0;
|
|
100
|
-
margin-top: -6px;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* end styles for complexSelect*/
|
|
1
|
+
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
+
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
+
@import 'tailwindcss';
|
|
4
|
+
|
|
5
|
+
.tw-light {
|
|
6
|
+
background-color: white;
|
|
7
|
+
color: #1a1a1a;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.tw-dark {
|
|
11
|
+
background-color: rgb(36, 36, 34);
|
|
12
|
+
color: rgb(194, 188, 176);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.formPanel {
|
|
16
|
+
align-items: center;
|
|
17
|
+
width: 500px;
|
|
18
|
+
display: flex;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.header {
|
|
22
|
+
font-size: larger;
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.backdrop {
|
|
27
|
+
margin: 0;
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
align-items: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.scroll-container {
|
|
34
|
+
margin: auto;
|
|
35
|
+
max-height: 100%;
|
|
36
|
+
overflow: auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.flex-container {
|
|
40
|
+
margin-top: 30px;
|
|
41
|
+
margin-bottom: 70px;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
width: 500px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.formRow {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: row;
|
|
51
|
+
margin-bottom: 15px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.formColumn {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.buttonRow {
|
|
60
|
+
display: flex;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.labelWidth {
|
|
65
|
+
width: 150px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.formElementWidth {
|
|
69
|
+
width: 350px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.mr-10 {
|
|
73
|
+
margin-right: 10px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.ml-10 {
|
|
77
|
+
margin-left: 10px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.mb-10 {
|
|
81
|
+
margin-bottom: 10px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* styles for complexSelect*/
|
|
85
|
+
.selectOptionWrapperDiv {
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: row;
|
|
88
|
+
align-items: center;
|
|
89
|
+
height: 34px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.selectOptionDiv {
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.selectOptionSubText {
|
|
98
|
+
font-size: smaller;
|
|
99
|
+
padding: 0;
|
|
100
|
+
margin-top: -6px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* end styles for complexSelect*/
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom/client';
|
|
3
|
-
import Example from './Example';
|
|
4
|
-
import './index.css';
|
|
5
|
-
|
|
6
|
-
ReactDOM.createRoot(document.body as HTMLElement).render(
|
|
7
|
-
<React.StrictMode>
|
|
8
|
-
<Example />
|
|
9
|
-
</React.StrictMode>,
|
|
10
|
-
);
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import Example from './Example';
|
|
4
|
+
import './index.css';
|
|
5
|
+
|
|
6
|
+
ReactDOM.createRoot(document.body as HTMLElement).render(
|
|
7
|
+
<React.StrictMode>
|
|
8
|
+
<Example />
|
|
9
|
+
</React.StrictMode>,
|
|
10
|
+
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/// <reference types="vite/client" />
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2020",
|
|
4
|
-
"useDefineForClassFields": true,
|
|
5
|
-
"lib": [
|
|
6
|
-
"ES2020",
|
|
7
|
-
"DOM",
|
|
8
|
-
"DOM.Iterable"
|
|
9
|
-
],
|
|
10
|
-
"module": "ESNext",
|
|
11
|
-
"skipLibCheck": true,
|
|
12
|
-
"moduleResolution": "node",
|
|
13
|
-
"allowImportingTsExtensions": true,
|
|
14
|
-
"resolveJsonModule": true,
|
|
15
|
-
"isolatedModules": true,
|
|
16
|
-
"noEmit": true,
|
|
17
|
-
"jsx": "react",
|
|
18
|
-
/* Linting */
|
|
19
|
-
"strict": true,
|
|
20
|
-
"noUnusedLocals": true,
|
|
21
|
-
"noUnusedParameters": true,
|
|
22
|
-
"noFallthroughCasesInSwitch": true,
|
|
23
|
-
"allowSyntheticDefaultImports": true
|
|
24
|
-
},
|
|
25
|
-
"include": [
|
|
26
|
-
"src"
|
|
27
|
-
],
|
|
28
|
-
"references": [
|
|
29
|
-
{
|
|
30
|
-
"path": "./tsconfig.node.json"
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": [
|
|
6
|
+
"ES2020",
|
|
7
|
+
"DOM",
|
|
8
|
+
"DOM.Iterable"
|
|
9
|
+
],
|
|
10
|
+
"module": "ESNext",
|
|
11
|
+
"skipLibCheck": true,
|
|
12
|
+
"moduleResolution": "node",
|
|
13
|
+
"allowImportingTsExtensions": true,
|
|
14
|
+
"resolveJsonModule": true,
|
|
15
|
+
"isolatedModules": true,
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
"jsx": "react",
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"noFallthroughCasesInSwitch": true,
|
|
23
|
+
"allowSyntheticDefaultImports": true
|
|
24
|
+
},
|
|
25
|
+
"include": [
|
|
26
|
+
"src"
|
|
27
|
+
],
|
|
28
|
+
"references": [
|
|
29
|
+
{
|
|
30
|
+
"path": "./tsconfig.node.json"
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"composite": true,
|
|
4
|
-
"skipLibCheck": true,
|
|
5
|
-
"module": "ESNext",
|
|
6
|
-
"moduleResolution": "node",
|
|
7
|
-
"allowSyntheticDefaultImports": true
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"vite.config.ts"
|
|
11
|
-
]
|
|
12
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"composite": true,
|
|
4
|
+
"skipLibCheck": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"moduleResolution": "node",
|
|
7
|
+
"allowSyntheticDefaultImports": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"vite.config.ts"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import react from '@vitejs/plugin-react';
|
|
3
|
-
import tailwindcss from '@tailwindcss/vite'
|
|
4
|
-
|
|
5
|
-
// https://vitejs.dev/config/
|
|
6
|
-
export default defineConfig({
|
|
7
|
-
plugins: [react(), tailwindcss()],
|
|
8
|
-
css: {
|
|
9
|
-
postcss: {
|
|
10
|
-
plugins: [],
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import react from '@vitejs/plugin-react';
|
|
3
|
+
import tailwindcss from '@tailwindcss/vite'
|
|
4
|
+
|
|
5
|
+
// https://vitejs.dev/config/
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [react(), tailwindcss()],
|
|
8
|
+
css: {
|
|
9
|
+
postcss: {
|
|
10
|
+
plugins: [],
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
});
|
package/dist/index.esm.js
CHANGED
|
@@ -91,7 +91,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
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
|
-
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
94
|
+
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
95
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 }));
|
|
@@ -103,7 +103,7 @@ 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 disabled:tw-pointer-events-none';
|
|
107
107
|
const baseClassesByVariant = {
|
|
108
108
|
'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
109
109
|
'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
@@ -152,8 +152,9 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
152
152
|
'warning': '',
|
|
153
153
|
};
|
|
154
154
|
const sizeClasses = {
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
xs: 'tw-text-xs tw-py-0.5',
|
|
156
|
+
sm: 'tw-text-sm tw-py-1',
|
|
157
|
+
lg: 'tw-text-xl tw-py-1',
|
|
157
158
|
};
|
|
158
159
|
const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
159
160
|
let tooltipData = undefined;
|
|
@@ -4972,13 +4973,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4972
4973
|
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
4973
4974
|
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
4974
4975
|
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
4975
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4976
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4976
4977
|
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
4977
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4978
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4978
4979
|
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
4979
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4980
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4980
4981
|
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
4981
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4982
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4982
4983
|
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
4983
4984
|
const placements = {
|
|
4984
4985
|
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
@@ -4986,7 +4987,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4986
4987
|
right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
|
|
4987
4988
|
bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
|
|
4988
4989
|
};
|
|
4989
|
-
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]
|
|
4990
|
+
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]
|
|
4990
4991
|
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 })] }));
|
|
4991
4992
|
};
|
|
4992
4993
|
|
|
@@ -14443,8 +14444,8 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14443
14444
|
const Dialog = Root$4;
|
|
14444
14445
|
const DialogPortal = Portal$1;
|
|
14445
14446
|
const DialogClose = Close;
|
|
14446
|
-
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
|
|
14447
|
-
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14447
|
+
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\r\n data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\r\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
|
|
14448
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14448
14449
|
tw-rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
|
|
14449
14450
|
DialogContent.displayName = Content$2.displayName;
|
|
14450
14451
|
const DialogHeader = (props) => (jsx$1("div", { className: "tw-w-full tw-justify-between", children: jsx$1("div", { ...props }) }));
|
|
@@ -14504,7 +14505,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14504
14505
|
'tw-max-w-4xl': size === '4xl',
|
|
14505
14506
|
'tw-max-w-5xl': size === '5xl',
|
|
14506
14507
|
'tw-max-w-6xl': size === '6xl',
|
|
14507
|
-
}, 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-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, {}));
|
|
14508
|
+
}, dialogClassName), children: [jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\r\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, {}));
|
|
14508
14509
|
};
|
|
14509
14510
|
|
|
14510
14511
|
function createCollection(name) {
|
|
@@ -15433,8 +15434,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15433
15434
|
};
|
|
15434
15435
|
React.useEffect(() => clearHoverTimeout, []);
|
|
15435
15436
|
const renderContent = () => {
|
|
15436
|
-
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
|
|
15437
|
-
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
|
|
15437
|
+
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
|
|
15438
|
+
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
|
|
15438
15439
|
${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] }) }));
|
|
15439
15440
|
};
|
|
15440
15441
|
const renderPopover = (popoverOpenState) => {
|
|
@@ -16578,7 +16579,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16578
16579
|
* @param tooltipProps - props to pass to the tooltip
|
|
16579
16580
|
*/
|
|
16580
16581
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16581
|
-
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16582
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16582
16583
|
tw-outline-none`;
|
|
16583
16584
|
const tooltipData = getQTipData(tooltipProps);
|
|
16584
16585
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
@@ -28814,7 +28815,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
28814
28815
|
};
|
|
28815
28816
|
|
|
28816
28817
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|
|
28817
|
-
const buttonSizes = ['sm', 'lg'];
|
|
28818
|
+
const buttonSizes = ['xs', 'sm', 'lg'];
|
|
28818
28819
|
const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
|
|
28819
28820
|
const iconPositions = ['left', 'right'];
|
|
28820
28821
|
|