torch-glare 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -191
- package/dist/bin/index.js +1 -1
- package/dist/src/commands/add.d.ts.map +1 -1
- package/dist/src/commands/add.js.map +1 -1
- package/dist/src/commands/update.d.ts.map +1 -1
- package/dist/src/commands/update.js +29 -19
- package/dist/src/commands/update.js.map +1 -1
- package/dist/src/shared/copyComponentsRecursively.d.ts.map +1 -1
- package/dist/src/shared/copyComponentsRecursively.js.map +1 -1
- package/lib/components/ActionsGroup.tsx +1 -1
- package/lib/components/Avatar.tsx +2 -2
- package/lib/components/Badge.tsx +1 -1
- package/lib/components/BadgeField.tsx +87 -83
- package/lib/components/Button.tsx +1 -1
- package/lib/components/Dialog.tsx +2 -2
- package/lib/components/Divider.tsx +10 -10
- package/lib/components/ImageAttachment.tsx +2 -2
- package/lib/components/InnerLabelField.tsx +1 -1
- package/lib/components/Input.tsx +0 -1
- package/lib/components/Label.tsx +4 -4
- package/lib/components/LabelField.tsx +1 -2
- package/lib/components/Popover.tsx +1 -1
- package/lib/components/Textarea.tsx +10 -22
- package/lib/components/TreeDropDown.tsx +3 -3
- package/lib/hooks/useClickOutside.tsx +11 -6
- package/lib/hooks/useTagSelection.tsx +179 -0
- package/lib/layouts/CNLayout.tsx +2 -2
- package/lib/layouts/FieldSection.tsx +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,207 +1,25 @@
|
|
|
1
1
|
# TORCH Glare Components Library
|
|
2
2
|
|
|
3
|
-
Welcome to the **TORCH Glare Components Library**! This library
|
|
3
|
+
Welcome to the **TORCH Glare Components Library**! This library offers a comprehensive set of reusable React components designed to help you build modern, efficient user interfaces. It also includes a powerful CLI tool (**torch-glare CLI**) to simplify component management and integration.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
3. [CLI Commands](#cli-commands)
|
|
10
|
-
4. [Theming](#theming)
|
|
11
|
-
5. [Contributing](#contributing)
|
|
12
|
-
6. [License](#license)
|
|
13
|
-
|
|
14
|
-
## Installation
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
## 1. Initialize Your Project
|
|
18
|
-
|
|
19
|
-
To install the TORCH Glare Components Library, run the following command:
|
|
20
|
-
|
|
21
|
-
```sh
|
|
22
|
-
npx torch-glare@latest init
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
This command will:
|
|
26
|
-
- Create or modify the `tailwind.config.js` file to support Tailwind CSS for Tailwind versions less then 4.
|
|
27
|
-
- Generate a `torch.json` file where you can customize the installation path for components.
|
|
28
|
-
|
|
29
|
-
### Tailwind CSS Requirement
|
|
30
|
-
Ensure that Tailwind CSS is installed in your project before running the initialization command.
|
|
31
|
-
|
|
32
|
-
## 2. Add Essential Plugins for Tailwind CSS
|
|
33
|
-
|
|
34
|
-
If you're using Tailwind CSS version 4 or above, add the following plugins to your global CSS file:
|
|
35
|
-
|
|
36
|
-
```css
|
|
37
|
-
@import "tailwindcss";
|
|
38
|
-
/* Essential plugins */
|
|
39
|
-
@plugin 'glare-typography';
|
|
40
|
-
@plugin 'glare-themes';
|
|
41
|
-
@plugin 'glare-torch-mode';
|
|
42
|
-
@plugin 'tailwind-scrollbar-hide';
|
|
43
|
-
@plugin 'tailwindcss-animate';
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
### 2. Add Remix Icon Library
|
|
48
|
-
Include the following in `index.html` or nextjs `layout.tsx` or meta data for icon support:
|
|
49
|
-
|
|
50
|
-
```html
|
|
51
|
-
<html>
|
|
52
|
-
<head>
|
|
53
|
-
<link
|
|
54
|
-
href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
|
|
55
|
-
rel="stylesheet"
|
|
56
|
-
/>
|
|
57
|
-
</head>
|
|
58
|
-
<body></body>
|
|
59
|
-
</html>
|
|
60
|
-
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## 3. Configure Installation Path
|
|
64
|
-
|
|
65
|
-
Adjust the `glare.json` file to specify where you want to install components:
|
|
66
|
-
|
|
67
|
-
```json
|
|
68
|
-
{
|
|
69
|
-
"path": "./src" // The directory where components will be installed
|
|
70
|
-
}
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
### 4. Add Components
|
|
74
|
-
To add a specific component, run:
|
|
75
|
-
|
|
76
|
-
```sh
|
|
77
|
-
npx torch-glare@latest add [component-name]
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Or, to add components interactively:
|
|
81
|
-
|
|
82
|
-
```sh
|
|
83
|
-
npx torch-glare@latest add
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
## Usage
|
|
87
|
-
|
|
88
|
-
Once installed, import and use the components as needed:
|
|
89
|
-
|
|
90
|
-
```tsx
|
|
91
|
-
import React from "react";
|
|
92
|
-
import { Button } from "./components";
|
|
93
|
-
|
|
94
|
-
const App = () => {
|
|
95
|
-
return (
|
|
96
|
-
<div>
|
|
97
|
-
<Button >Hello.</Button>
|
|
98
|
-
</div>
|
|
99
|
-
);
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
export default App;
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## CLI Commands
|
|
106
|
-
|
|
107
|
-
### Initialize Configuration
|
|
108
|
-
```sh
|
|
109
|
-
npx torch-glare@latest init
|
|
110
|
-
```
|
|
111
|
-
- Creates a `torch.json` configuration file.
|
|
112
|
-
- Create or modify `tailwind.config.ts` file for tailwind support.
|
|
113
|
-
|
|
114
|
-
### Add Components
|
|
115
|
-
```sh
|
|
116
|
-
npx torch-glare@latest add [component]
|
|
117
|
-
```
|
|
118
|
-
Adds a specific component or runs an interactive prompt if no name is provided.
|
|
119
|
-
|
|
120
|
-
### Add Hooks
|
|
121
|
-
```sh
|
|
122
|
-
npx torch-glare@latest hook [hook]
|
|
123
|
-
```
|
|
124
|
-
Adds a specific hook or runs an interactive prompt if no name is provided.
|
|
125
|
-
|
|
126
|
-
### Add Utilities
|
|
127
|
-
```sh
|
|
128
|
-
npx torch-glare@latest util [util]
|
|
129
|
-
```
|
|
130
|
-
Adds a specific utility or runs an interactive prompt if no name is provided.
|
|
131
|
-
|
|
132
|
-
### Providers
|
|
133
|
-
```sh
|
|
134
|
-
npx torch-glare@latest provider [provider]
|
|
135
|
-
```
|
|
136
|
-
Adds a specific provider or runs an interactive prompt if no name is provided.
|
|
137
|
-
|
|
138
|
-
### Update Installed Resources
|
|
139
|
-
|
|
140
|
-
```sh
|
|
141
|
-
npx torch-glare@latest update
|
|
142
|
-
```
|
|
143
|
-
Updates all installed components, hooks, utilities, and providers.
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
## Theming
|
|
147
|
-
|
|
148
|
-
The TORCH Glare Components Library supports both light and dark themes. You can set a fixed theme for your components using the `theme` attribute.
|
|
149
|
-
|
|
150
|
-
### Setting a Fixed Theme
|
|
151
|
-
|
|
152
|
-
To apply a fixed theme (dark or light) to a component, add the `theme `attribute with the desired theme value:
|
|
153
|
-
|
|
154
|
-
```tsx
|
|
155
|
-
import React from "react";
|
|
156
|
-
import { Button } from "./components";
|
|
157
|
-
|
|
158
|
-
const App = () => {
|
|
159
|
-
return (
|
|
160
|
-
<div>
|
|
161
|
-
<Button theme="dark">Dark Theme Button</Button>
|
|
162
|
-
<Button theme="light">Light Theme Button</Button>
|
|
163
|
-
</div>
|
|
164
|
-
);
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
export default App;
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
### Global Theme
|
|
171
|
-
|
|
172
|
-
To apply a theme globally, wrap your application with the `ThemeProvider` and set the optional `defaultTheme` props:
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
```tsx
|
|
176
|
-
import { ThemeProvider } from "./components";
|
|
177
|
-
|
|
178
|
-
const App = () => {
|
|
179
|
-
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
180
|
-
<ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
|
|
181
|
-
<App />
|
|
182
|
-
</ThemeProvider>
|
|
183
|
-
);
|
|
184
|
-
};
|
|
185
|
-
|
|
186
|
-
export default App;
|
|
187
|
-
```
|
|
7
|
+
## Documentation
|
|
8
|
+
You can find the complete documentation at: [https://glare.torchcorp.com](https://glare.torchcorp.com)
|
|
188
9
|
|
|
189
10
|
## Contributing
|
|
190
|
-
|
|
191
|
-
We welcome contributions! Follow these steps:
|
|
11
|
+
We’re excited to welcome contributors! To get started:
|
|
192
12
|
|
|
193
13
|
1. Fork the repository.
|
|
194
14
|
2. Create a new branch.
|
|
195
15
|
3. Implement your changes.
|
|
196
|
-
4. Commit with a
|
|
197
|
-
5. Push your
|
|
16
|
+
4. Commit with a descriptive message.
|
|
17
|
+
5. Push your branch and open a pull request.
|
|
198
18
|
|
|
199
19
|
### Contribution Guidelines
|
|
200
|
-
-
|
|
201
|
-
- Update documentation
|
|
20
|
+
- Adhere to the existing code style.
|
|
21
|
+
- Update or add documentation where applicable.
|
|
202
22
|
|
|
203
23
|
## License
|
|
204
|
-
|
|
205
24
|
This project is licensed under the **MIT License**.
|
|
206
25
|
|
|
207
|
-
|
package/dist/bin/index.js
CHANGED
|
@@ -11,7 +11,7 @@ const program = new Command();
|
|
|
11
11
|
program
|
|
12
12
|
.name("torch-glare")
|
|
13
13
|
.description("Torch Glare for managing React components")
|
|
14
|
-
.version("
|
|
14
|
+
.version("1.0.7");
|
|
15
15
|
program
|
|
16
16
|
.command("init")
|
|
17
17
|
.description("Initialize torch.json configuration file")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../../cli/src/commands/add.ts"],"names":[],"mappings":"AAsBA;;;;GAIG;AACH,wBAAsB,GAAG,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,OAAe,GAAG,OAAO,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../../cli/src/commands/add.ts"],"names":[],"mappings":"AAsBA;;;;GAIG;AACH,wBAAsB,GAAG,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,OAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAgCrF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"add.js","sourceRoot":"","sources":["../../../cli/src/commands/add.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAQ,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElD,2CAA2C;AAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAE3C,6CAA6C;AAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,yBAAyB,CAAC,CAAC;AAIxE;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,GAAG,CAAC,SAAkB,EAAE,UAAmB,KAAK;IAClE,MAAM,UAAU,GAAG,SAAS,CAAC,WAAW,CAAW,CAAC;IACpD,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAE5D,6DAA6D;IAC7D,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,SAAS,GAAG,MAAM,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IACpE,CAAC;IAED,8DAA8D;IAC9D,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QAC3C,OAAO,CAAC,KAAK,CAAC,gBAAgB,SAAS,cAAc,CAAC,CAAC;QACvD,OAAO;IACX,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;IAEjG,oCAAoC;IACpC,IAAI,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QACjD,OAAO,CAAC,GAAG,CAAC,iBAAiB,SAAS,mBAAmB,CAAC,CAAC;QAC3D,OAAO;IACX,CAAC;IAED,qCAAqC;IACrC,4CAA4C;
|
|
1
|
+
{"version":3,"file":"add.js","sourceRoot":"","sources":["../../../cli/src/commands/add.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAQ,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElD,2CAA2C;AAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAE3C,6CAA6C;AAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,yBAAyB,CAAC,CAAC;AAIxE;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,GAAG,CAAC,SAAkB,EAAE,UAAmB,KAAK;IAClE,MAAM,UAAU,GAAG,SAAS,CAAC,WAAW,CAAW,CAAC;IACpD,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAE5D,6DAA6D;IAC7D,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,SAAS,GAAG,MAAM,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IACpE,CAAC;IAED,8DAA8D;IAC9D,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QAC3C,OAAO,CAAC,KAAK,CAAC,gBAAgB,SAAS,cAAc,CAAC,CAAC;QACvD,OAAO;IACX,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;IAEjG,oCAAoC;IACpC,IAAI,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QACjD,OAAO,CAAC,GAAG,CAAC,iBAAiB,SAAS,mBAAmB,CAAC,CAAC;QAC3D,OAAO;IACX,CAAC;IAED,qCAAqC;IACrC,4CAA4C;IAE5C,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAEjC,kEAAkE;IAClE,yBAAyB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE7C,OAAO,CAAC,GAAG,CAAC,KAAK,SAAS,sBAAsB,UAAU,CAAC,IAAI,GAAG,CAAC,CAAC;AACxE,CAAC;AAID;;;;GAIG;AACH,KAAK,UAAU,wBAAwB,CAAC,mBAA6B;IACjE,MAAM,EAAE,iBAAiB,EAAE,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC;QAChD;YACI,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,wCAAwC;YACjD,OAAO,EAAE,mBAAmB;SAC/B;KACJ,CAAC,CAAC;IACH,OAAO,iBAAiB,CAAC;AAC7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../../cli/src/commands/update.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../../cli/src/commands/update.ts"],"names":[],"mappings":"AAcA;;GAEG;AACH,wBAAsB,yBAAyB,IAAI,OAAO,CAAC,IAAI,CAAC,CAwC/D"}
|
|
@@ -2,17 +2,14 @@ import fs from "fs";
|
|
|
2
2
|
import path from "path";
|
|
3
3
|
import { getConfig } from "../shared/getConfig.js";
|
|
4
4
|
import { CONFIG_FILE } from "./init.js";
|
|
5
|
-
import { getInstallPaths } from "../shared/getInstallPaths.js";
|
|
6
5
|
import { tailwindInit } from "../shared/tailwindInit.js";
|
|
7
|
-
import { fileURLToPath } from "url";
|
|
8
6
|
import readline from "readline";
|
|
9
|
-
import { copyComponentsRecursively } from "../shared/copyComponentsRecursively.js";
|
|
10
7
|
import { getAvailableFiles } from "../shared/getAvailableFiles.js";
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
import { add } from "./add.js";
|
|
9
|
+
import { addHook } from "./hook.js";
|
|
10
|
+
import { addUtil } from "./utils.js";
|
|
11
|
+
import { addProvider } from "./provider.js";
|
|
12
|
+
import { addLayout } from "./layout.js";
|
|
16
13
|
/**
|
|
17
14
|
* Update all installed components, hooks, and utility files by syncing them with the latest templates.
|
|
18
15
|
*/
|
|
@@ -39,6 +36,10 @@ export async function updateInstalledComponents() {
|
|
|
39
36
|
await updateItems("hooks", targetFile);
|
|
40
37
|
// Update utils
|
|
41
38
|
await updateItems("utils", targetFile);
|
|
39
|
+
// Update providers
|
|
40
|
+
await updateItems("providers", targetFile);
|
|
41
|
+
// Update layouts
|
|
42
|
+
await updateItems("layouts", targetFile);
|
|
42
43
|
// Reinitialize Tailwind CSS configuration
|
|
43
44
|
tailwindInit();
|
|
44
45
|
console.log("✅ All installed items have been updated.");
|
|
@@ -64,7 +65,26 @@ async function updateItems(type, config) {
|
|
|
64
65
|
console.log(`🔄 Updating installed ${type}...`);
|
|
65
66
|
// Update each installed item
|
|
66
67
|
installedItems.forEach((item) => {
|
|
67
|
-
|
|
68
|
+
switch (type) {
|
|
69
|
+
case "components":
|
|
70
|
+
add(item, true);
|
|
71
|
+
break;
|
|
72
|
+
case "hooks":
|
|
73
|
+
addHook(item, true);
|
|
74
|
+
break;
|
|
75
|
+
case "utils":
|
|
76
|
+
addUtil(item, true);
|
|
77
|
+
break;
|
|
78
|
+
case "providers":
|
|
79
|
+
addProvider(item, true);
|
|
80
|
+
break;
|
|
81
|
+
case "layouts":
|
|
82
|
+
addLayout(item, true);
|
|
83
|
+
break;
|
|
84
|
+
default:
|
|
85
|
+
console.log(`❌ Unknown item type: ${type}`);
|
|
86
|
+
break;
|
|
87
|
+
}
|
|
68
88
|
});
|
|
69
89
|
}
|
|
70
90
|
/**
|
|
@@ -90,14 +110,4 @@ function checkIfItemsExist(installedItemsDir, type) {
|
|
|
90
110
|
}
|
|
91
111
|
return true;
|
|
92
112
|
}
|
|
93
|
-
/**
|
|
94
|
-
* Update a single item (component, hook, or utility file) by syncing it with the latest template.
|
|
95
|
-
* @param {string} item - The name of the item to update.
|
|
96
|
-
* @param {object} config - Configuration object.
|
|
97
|
-
* @param {string} type - The type of item (e.g., "components", "hooks", "utils").
|
|
98
|
-
*/
|
|
99
|
-
function updateItem(item, config, type) {
|
|
100
|
-
const { source, targetDir } = getInstallPaths(item, config, `${templatesDir}/${type}`, type);
|
|
101
|
-
copyComponentsRecursively(source, targetDir);
|
|
102
|
-
}
|
|
103
113
|
//# sourceMappingURL=update.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"update.js","sourceRoot":"","sources":["../../../cli/src/commands/update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"update.js","sourceRoot":"","sources":["../../../cli/src/commands/update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,QAAQ,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,yBAAyB;IAC3C,MAAM,UAAU,GAAG,SAAS,CAAC,WAAW,CAAW,CAAC;IAEpD,+CAA+C;IAC/C,MAAM,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC;QAChC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,MAAM;KACzB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,MAAM,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;QACjD,EAAE,CAAC,QAAQ,CAAC,qFAAqF,EAAE,CAAC,KAAK,EAAE,EAAE;YACzG,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,KAAK,EAAE,CAAC;IAEX,IAAI,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QACjC,OAAO;IACX,CAAC;IAED,oBAAoB;IACpB,MAAM,WAAW,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IAE5C,eAAe;IACf,MAAM,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAEvC,eAAe;IACf,MAAM,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAEvC,mBAAmB;IACnB,MAAM,WAAW,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IAE3C,iBAAiB;IACjB,MAAM,WAAW,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IAEzC,0CAA0C;IAC1C,YAAY,EAAE,CAAC;IACf,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;AAC5D,CAAC;AAED;;;;GAIG;AACH,KAAK,UAAU,WAAW,CAAC,IAAY,EAAE,MAAW;IAChD,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE7D,uCAAuC;IACvC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,IAAI,CAAC,EAAE,CAAC;QAC9C,OAAO;IACX,CAAC;IAED,kCAAkC;IAClC,MAAM,cAAc,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAE5D,uCAAuC;IACvC,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,CAAC,GAAG,CAAC,QAAQ,IAAI,aAAa,CAAC,CAAC;QACvC,OAAO;IACX,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,yBAAyB,IAAI,KAAK,CAAC,CAAC;IAEhD,6BAA6B;IAC7B,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5B,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,YAAY;gBACb,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBAChB,MAAM;YACV,KAAK,OAAO;gBACR,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBACpB,MAAM;YACV,KAAK,OAAO;gBACR,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBACpB,MAAM;YACV,KAAK,WAAW;gBACZ,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBACxB,MAAM;YACV,KAAK,SAAS;gBACV,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBACtB,MAAM;YACV;gBACI,OAAO,CAAC,GAAG,CAAC,wBAAwB,IAAI,EAAE,CAAC,CAAC;gBAC5C,MAAM;QACd,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;;;;GAKG;AACH,SAAS,oBAAoB,CAAC,MAAW,EAAE,IAAY;IACnD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACrD,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;AAC1D,CAAC;AAED;;;;;GAKG;AACH,SAAS,iBAAiB,CAAC,iBAAyB,EAAE,IAAY;IAC9D,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC;QACpC,OAAO,CAAC,GAAG,CAAC,kBAAkB,IAAI,SAAS,CAAC,CAAC;QAC7C,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyComponentsRecursively.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/copyComponentsRecursively.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAa9E;
|
|
1
|
+
{"version":3,"file":"copyComponentsRecursively.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/copyComponentsRecursively.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAa9E;AACD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACf,IAAI,CAiBN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyComponentsRecursively.js","sourceRoot":"","sources":["../../../cli/src/shared/copyComponentsRecursively.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAC,MAAc,EAAE,MAAc;IACpE,IAAI,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;QACrC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;SAAM,CAAC;QACJ,IAAI,WAAW,GAAG,MAAM,CAAC;QAEzB,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;YAC9D,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAC3D,CAAC;QAED,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QACrC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;AACL,CAAC;
|
|
1
|
+
{"version":3,"file":"copyComponentsRecursively.js","sourceRoot":"","sources":["../../../cli/src/shared/copyComponentsRecursively.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAC,MAAc,EAAE,MAAc;IACpE,IAAI,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;QACrC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;SAAM,CAAC;QACJ,IAAI,WAAW,GAAG,MAAM,CAAC;QAEzB,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;YAC9D,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAC3D,CAAC;QAED,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QACrC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;AACL,CAAC;AACD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAC7B,MAAc,EACd,MAAc;IAEd,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;QACzB,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACvB,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACrB,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACJ,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YACxC,mBAAmB,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;IACL,CAAC;AACL,CAAC"}
|
|
@@ -25,7 +25,7 @@ const AvatarImage = React.forwardRef<
|
|
|
25
25
|
>(({ className, ...props }, ref) => (
|
|
26
26
|
<AvatarPrimitive.Image
|
|
27
27
|
ref={ref}
|
|
28
|
-
className={cn("aspect-square h-full w-full", className)}
|
|
28
|
+
className={cn("aspect-square h-full w-full object-cover", className)}
|
|
29
29
|
{...props}
|
|
30
30
|
/>
|
|
31
31
|
))
|
|
@@ -38,7 +38,7 @@ const AvatarFallback = React.forwardRef<
|
|
|
38
38
|
<AvatarPrimitive.Fallback
|
|
39
39
|
ref={ref}
|
|
40
40
|
className={cn(
|
|
41
|
-
"flex h-full w-full items-center justify-center rounded-full bg-
|
|
41
|
+
"flex h-full w-full items-center justify-center rounded-full bg-background-system-body-tertiary text-content-presentation-global-primary",
|
|
42
42
|
className
|
|
43
43
|
)}
|
|
44
44
|
{...props}
|
package/lib/components/Badge.tsx
CHANGED
|
@@ -3,7 +3,6 @@ import {
|
|
|
3
3
|
forwardRef,
|
|
4
4
|
InputHTMLAttributes,
|
|
5
5
|
ReactNode,
|
|
6
|
-
useEffect,
|
|
7
6
|
useRef,
|
|
8
7
|
useState,
|
|
9
8
|
} from "react";
|
|
@@ -12,21 +11,25 @@ import { Tooltip, ToolTipSide } from "./Tooltip";
|
|
|
12
11
|
import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
|
|
13
12
|
import { Themes } from "../utils/types";
|
|
14
13
|
import { Icon, Input, Group, Trilling } from "./Input";
|
|
14
|
+
import { useClickOutside } from "@/hooks/useClickOutside";
|
|
15
|
+
import { Badge } from "./Badge";
|
|
16
|
+
import { Tag, useTagSelection } from "@/hooks/useTagSelection";
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
|
|
19
|
+
interface Props
|
|
17
20
|
extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
|
|
18
21
|
size?: "XS" | "S" | "M"; // this is used to change the size style of the component
|
|
19
22
|
variant?: "SystemStyle" | "PresentationStyle";
|
|
20
23
|
icon?: ReactNode; // to add left side icon if you pass it
|
|
21
|
-
popoverChildren?: ReactNode; // to add drop down list if you pass it
|
|
22
24
|
errorMessage?: string; // to show tooltip component when error_message not null
|
|
23
25
|
onTable?: boolean; // to change the border style of the component when it is on table
|
|
24
26
|
toolTipSide?: ToolTipSide;
|
|
25
|
-
badgesChildren?: ReactNode;
|
|
26
27
|
label?: string;
|
|
27
28
|
required?: boolean;
|
|
28
29
|
theme?: Themes
|
|
29
30
|
actionButton?: ReactNode
|
|
31
|
+
tags: Tag[]
|
|
32
|
+
onValueChange?: (tags: Tag[]) => void
|
|
30
33
|
}
|
|
31
34
|
|
|
32
35
|
|
|
@@ -37,33 +40,46 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
|
|
|
37
40
|
label,
|
|
38
41
|
required,
|
|
39
42
|
icon,
|
|
40
|
-
popoverChildren,
|
|
41
43
|
errorMessage,
|
|
42
44
|
onTable,
|
|
43
45
|
variant = "PresentationStyle",
|
|
44
46
|
toolTipSide,
|
|
45
47
|
className,
|
|
46
|
-
badgesChildren,
|
|
47
48
|
actionButton,
|
|
48
49
|
theme,
|
|
50
|
+
tags,
|
|
51
|
+
onValueChange,
|
|
49
52
|
children,
|
|
50
53
|
...props
|
|
51
54
|
},
|
|
52
55
|
forwardedRef
|
|
53
56
|
) => {
|
|
54
|
-
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
55
|
-
const inputRef = useRef<HTMLInputElement>(null);
|
|
56
|
-
const sectionRef = useRef<HTMLDivElement>(null);
|
|
57
|
-
const popoverRef = useRef<HTMLDivElement>(null);
|
|
58
57
|
const [dropDownListWidth, setDropDownListWidth] = useState(0);
|
|
58
|
+
const popoverContentRef = useRef<HTMLDivElement>(null);
|
|
59
|
+
const inputRef = useRef<HTMLInputElement | null>(null);
|
|
60
|
+
// this is used to close the popover when the user clicks outside the input group
|
|
61
|
+
const inputGroupRef = useClickOutside((e) => {
|
|
62
|
+
if (
|
|
63
|
+
!inputGroupRef?.current?.contains(e.target as Node) &&
|
|
64
|
+
!popoverContentRef?.current?.contains(e.target as Node)
|
|
65
|
+
) setIsPopoverOpen(false);
|
|
66
|
+
else setIsPopoverOpen(true);
|
|
67
|
+
});
|
|
59
68
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
// this is used to handle the tag selection and the search and filter and keyboard navigation functionality
|
|
70
|
+
const {
|
|
71
|
+
selectedTagsStack,
|
|
72
|
+
handleSelectTag,
|
|
73
|
+
handleUnselectTag,
|
|
74
|
+
handleKeyDown,
|
|
75
|
+
setFocusedTagIndex,
|
|
76
|
+
filterTagsBySearch,
|
|
77
|
+
filteredTags,
|
|
78
|
+
focusedTagIndex,
|
|
79
|
+
focusedPopoverIndex,
|
|
80
|
+
isPopoverOpen,
|
|
65
81
|
setIsPopoverOpen,
|
|
66
|
-
});
|
|
82
|
+
} = useTagSelection({ Tags: tags, onTagsChange: onValueChange, inputRef });
|
|
67
83
|
|
|
68
84
|
return (
|
|
69
85
|
<Popover open={isPopoverOpen}>
|
|
@@ -72,17 +88,19 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
|
|
|
72
88
|
open={errorMessage !== undefined}
|
|
73
89
|
text={errorMessage}
|
|
74
90
|
>
|
|
75
|
-
<PopoverTrigger asChild
|
|
91
|
+
<PopoverTrigger asChild
|
|
92
|
+
>
|
|
76
93
|
<Group
|
|
77
94
|
error={errorMessage !== undefined}
|
|
78
95
|
onTable={onTable}
|
|
79
96
|
data-theme={theme}
|
|
80
97
|
variant={variant}
|
|
98
|
+
tabIndex={isPopoverOpen ? 0 : -1}
|
|
99
|
+
onKeyDown={handleKeyDown}
|
|
81
100
|
size={size === "XS" ? "S" : size}
|
|
82
|
-
ref={
|
|
101
|
+
ref={inputGroupRef}
|
|
83
102
|
onFocus={(e: any) => {
|
|
84
103
|
setDropDownListWidth(e.currentTarget.offsetWidth);
|
|
85
|
-
setIsPopoverOpen(true);
|
|
86
104
|
}}
|
|
87
105
|
className={cn("flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end h-fit items-center",
|
|
88
106
|
{
|
|
@@ -97,11 +115,32 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
|
|
|
97
115
|
</Icon>
|
|
98
116
|
)}
|
|
99
117
|
|
|
100
|
-
{
|
|
118
|
+
{
|
|
119
|
+
selectedTagsStack.map((tag, index) => (
|
|
120
|
+
<Badge
|
|
121
|
+
key={tag.id}
|
|
122
|
+
size={size}
|
|
123
|
+
variant={tag.variant as any}
|
|
124
|
+
label={tag.name}
|
|
125
|
+
isSelected={true}
|
|
126
|
+
onUnselect={() => handleUnselectTag(tag.id)}
|
|
127
|
+
className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
|
|
128
|
+
tabIndex={focusedTagIndex === index ? 0 : -1}
|
|
129
|
+
/>
|
|
130
|
+
))
|
|
131
|
+
}
|
|
101
132
|
|
|
102
133
|
<Input
|
|
103
134
|
{...props}
|
|
104
|
-
|
|
135
|
+
onChange={(e) => {
|
|
136
|
+
props.onChange?.(e)
|
|
137
|
+
filterTagsBySearch(e.target.value)
|
|
138
|
+
}}
|
|
139
|
+
onFocus={(e) => {
|
|
140
|
+
props.onFocus?.(e)
|
|
141
|
+
setFocusedTagIndex(null);
|
|
142
|
+
setIsPopoverOpen(true)
|
|
143
|
+
}}
|
|
105
144
|
ref={inputRef}
|
|
106
145
|
className={cn(
|
|
107
146
|
"min-w-[100px] w-full", // Added w-full to Input
|
|
@@ -123,70 +162,35 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
|
|
|
123
162
|
</PopoverTrigger>
|
|
124
163
|
</Tooltip>
|
|
125
164
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
{
|
|
135
|
-
|
|
136
|
-
|
|
165
|
+
<PopoverContent
|
|
166
|
+
data-theme={theme}
|
|
167
|
+
ref={popoverContentRef}
|
|
168
|
+
style={{ width: dropDownListWidth }}
|
|
169
|
+
variant={variant}
|
|
170
|
+
onKeyDown={handleKeyDown}
|
|
171
|
+
>
|
|
172
|
+
<>
|
|
173
|
+
{filteredTags.length > 0 ? (
|
|
174
|
+
filteredTags.map((tag, index) => (
|
|
175
|
+
<Badge
|
|
176
|
+
key={tag.id}
|
|
177
|
+
size={size}
|
|
178
|
+
variant={tag.variant as any}
|
|
179
|
+
label={tag.name}
|
|
180
|
+
onClick={() => handleSelectTag(tag.id)}
|
|
181
|
+
className={`outline-none ${focusedPopoverIndex === index ? "ring-2 ring-blue-500" : ""} ${index !== 0 ? "mt-1" : ""}`}
|
|
182
|
+
tabIndex={focusedPopoverIndex === index ? 0 : -1}
|
|
183
|
+
/>
|
|
184
|
+
))
|
|
185
|
+
) : (
|
|
186
|
+
<div className="text-sm text-gray-500 py-1 px-2">
|
|
187
|
+
{tags.length === 0 ? "All tags selected" : "No matching tags found"}
|
|
188
|
+
</div>
|
|
189
|
+
)}
|
|
190
|
+
</>
|
|
191
|
+
</PopoverContent>
|
|
137
192
|
</Popover>
|
|
138
193
|
);
|
|
139
194
|
}
|
|
140
195
|
);
|
|
141
196
|
BadgeField.displayName = "BadgeField";
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
const useInitialLoad = ({
|
|
145
|
-
forwardedRef,
|
|
146
|
-
inputRef,
|
|
147
|
-
sectionRef,
|
|
148
|
-
popoverRef,
|
|
149
|
-
setIsPopoverOpen,
|
|
150
|
-
}: {
|
|
151
|
-
forwardedRef: React.Ref<HTMLInputElement> | ((instance: HTMLInputElement | null) => void);
|
|
152
|
-
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
153
|
-
sectionRef: React.RefObject<HTMLDivElement | null>;
|
|
154
|
-
popoverRef: React.RefObject<HTMLDivElement | null>;
|
|
155
|
-
setIsPopoverOpen: (value: boolean) => void;
|
|
156
|
-
}) => {
|
|
157
|
-
|
|
158
|
-
// set the reference
|
|
159
|
-
useEffect(() => {
|
|
160
|
-
if (!forwardedRef) return;
|
|
161
|
-
if (typeof forwardedRef === "function") {
|
|
162
|
-
forwardedRef(inputRef.current);
|
|
163
|
-
} else {
|
|
164
|
-
forwardedRef.current = inputRef.current;
|
|
165
|
-
}
|
|
166
|
-
}, [forwardedRef, inputRef]);
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
// detect click outside
|
|
170
|
-
useEffect(() => {
|
|
171
|
-
const handleOutsideClick = (event: MouseEvent) => {
|
|
172
|
-
if (
|
|
173
|
-
sectionRef.current &&
|
|
174
|
-
!sectionRef.current.contains(event.target as Node) &&
|
|
175
|
-
!popoverRef.current?.contains(event.target as Node)
|
|
176
|
-
) {
|
|
177
|
-
setIsPopoverOpen(false);
|
|
178
|
-
} else {
|
|
179
|
-
setIsPopoverOpen(true);
|
|
180
|
-
inputRef.current?.focus();
|
|
181
|
-
}
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
document.addEventListener("mousedown", handleOutsideClick);
|
|
185
|
-
document.addEventListener("pointerdown", handleOutsideClick);
|
|
186
|
-
|
|
187
|
-
return () => {
|
|
188
|
-
document.removeEventListener("mousedown", handleOutsideClick);
|
|
189
|
-
document.removeEventListener("pointerdown", handleOutsideClick);
|
|
190
|
-
};
|
|
191
|
-
}, [sectionRef, popoverRef, setIsPopoverOpen, inputRef]);
|
|
192
|
-
};
|
|
@@ -116,7 +116,7 @@ export function LoadingIcon({ size, className }: {
|
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
|
|
119
|
-
const buttonVariants = cva(
|
|
119
|
+
export const buttonVariants = cva(
|
|
120
120
|
"flex items-center whitespace-nowrap justify-center transition-[background,color] duration-200 ease-in-out border border-transparent outline-none leading-none [&-i]:!leading-none",
|
|
121
121
|
{
|
|
122
122
|
variants: {
|
|
@@ -94,7 +94,7 @@ const DialogTitle = React.forwardRef<
|
|
|
94
94
|
<DialogPrimitive.Title
|
|
95
95
|
ref={ref}
|
|
96
96
|
className={cn(
|
|
97
|
-
"text-lg font-semibold leading-none tracking-tight",
|
|
97
|
+
"text-lg font-semibold leading-none tracking-tight text-content-system-global-primary",
|
|
98
98
|
className
|
|
99
99
|
)}
|
|
100
100
|
{...props}
|
|
@@ -108,7 +108,7 @@ const DialogDescription = React.forwardRef<
|
|
|
108
108
|
>(({ className, ...props }, ref) => (
|
|
109
109
|
<DialogPrimitive.Description
|
|
110
110
|
ref={ref}
|
|
111
|
-
className={cn("text-sm text-muted-foreground", className)}
|
|
111
|
+
className={cn("text-sm text-muted-foreground text-content-system-global-primary", className)}
|
|
112
112
|
{...props}
|
|
113
113
|
/>
|
|
114
114
|
))
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
3
|
import * as React from "react"
|
|
4
|
-
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
|
5
|
-
|
|
6
4
|
import { cn } from "../utils/cn"
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
7
|
+
orientation?: "horizontal" | "vertical"
|
|
8
|
+
decorative?: boolean
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const Divider = React.forwardRef<HTMLDivElement, DividerProps>(
|
|
12
12
|
(
|
|
13
13
|
{ className, orientation = "horizontal", decorative = true, ...props },
|
|
14
14
|
ref
|
|
15
15
|
) => (
|
|
16
|
-
<
|
|
16
|
+
<div
|
|
17
17
|
ref={ref}
|
|
18
|
-
|
|
19
|
-
orientation={orientation}
|
|
18
|
+
role={decorative ? "none" : "separator"}
|
|
19
|
+
aria-orientation={decorative ? undefined : orientation}
|
|
20
20
|
className={cn(
|
|
21
|
-
"
|
|
21
|
+
"bg-border-presentation-global-primary",
|
|
22
22
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
23
23
|
className
|
|
24
24
|
)}
|
|
@@ -46,7 +46,7 @@ const ImageAttachment = forwardRef<HTMLInputElement, Props>(
|
|
|
46
46
|
) => {
|
|
47
47
|
return (
|
|
48
48
|
<section
|
|
49
|
-
className="flex items-center justify-center gap-1">
|
|
49
|
+
className={cn("flex items-center justify-center gap-1 w-full", className)}>
|
|
50
50
|
{children}
|
|
51
51
|
<Button
|
|
52
52
|
{...getRootProps?.()}
|
|
@@ -54,7 +54,7 @@ const ImageAttachment = forwardRef<HTMLInputElement, Props>(
|
|
|
54
54
|
as="label"
|
|
55
55
|
id={props.id}
|
|
56
56
|
variant="PrimeContStyle"
|
|
57
|
-
className={cn(dropZoneStyles({ active: isDropAreaActive })
|
|
57
|
+
className={cn(dropZoneStyles({ active: isDropAreaActive }))}
|
|
58
58
|
containerClassName="flex-col"
|
|
59
59
|
>
|
|
60
60
|
<h1 className="text-content-presentation-action-light-primary typography-body-large-medium">
|
package/lib/components/Input.tsx
CHANGED
package/lib/components/Label.tsx
CHANGED
|
@@ -61,12 +61,12 @@ export const Label = React.forwardRef<HTMLLabelElement, Props>(
|
|
|
61
61
|
<Component
|
|
62
62
|
data-theme={theme}
|
|
63
63
|
ref={forwardedRef}
|
|
64
|
-
className={cn(
|
|
65
|
-
"flex-col justify-start items-start
|
|
66
|
-
"flex-row justify-start items-center
|
|
64
|
+
className={cn("flex flex-0 w-fit [&_p]:!leading-none gap-[8px]", {
|
|
65
|
+
"flex-col justify-start items-start": childrenDirections === "vertical",
|
|
66
|
+
"flex-row justify-start items-center": childrenDirections === "horizontal",
|
|
67
67
|
"flex-row-reverse": reverseChildren && childrenDirections === "horizontal",
|
|
68
68
|
"flex-col-reverse": reverseChildren && childrenDirections === "vertical",
|
|
69
|
-
})}
|
|
69
|
+
}, className)}
|
|
70
70
|
{...props}
|
|
71
71
|
>
|
|
72
72
|
<div className={cn(labelComponentVariants({ labelDirections }), labelsClassName)} >
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { InputHTMLAttributes, ReactNode, forwardRef } from "react";
|
|
2
2
|
import { InputField } from "./InputField";
|
|
3
|
-
import { cn } from "../utils/cn";
|
|
4
3
|
import { Label } from "./Label";
|
|
5
4
|
import { ToolTipSide } from "./Tooltip";
|
|
6
5
|
import { Themes } from "../utils/types";
|
|
@@ -55,11 +54,11 @@ export const LabelField = forwardRef<HTMLInputElement, Props>(
|
|
|
55
54
|
labelDirections={labelDirections}
|
|
56
55
|
childrenDirections={childrenDirections}
|
|
57
56
|
variant={variant}
|
|
57
|
+
className={className}
|
|
58
58
|
>
|
|
59
59
|
<InputField
|
|
60
60
|
{...props}
|
|
61
61
|
theme={theme}
|
|
62
|
-
className={className}
|
|
63
62
|
ref={ref}
|
|
64
63
|
size={size}
|
|
65
64
|
icon={icon}
|
|
@@ -74,33 +74,21 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
74
74
|
ref
|
|
75
75
|
) => {
|
|
76
76
|
return (
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
className
|
|
86
|
-
)}
|
|
77
|
+
<Label
|
|
78
|
+
label={label}
|
|
79
|
+
requiredLabel={requiredLabel}
|
|
80
|
+
secondaryLabel={secondaryLabel}
|
|
81
|
+
labelDirections={direction === "row" ? "vertical" : "horizontal"}
|
|
82
|
+
childrenDirections={direction === "row" ? "horizontal" : "vertical"}
|
|
83
|
+
size={"M"}
|
|
84
|
+
className={cn(className)}
|
|
87
85
|
>
|
|
88
|
-
<Label
|
|
89
|
-
label={label}
|
|
90
|
-
requiredLabel={requiredLabel}
|
|
91
|
-
secondaryLabel={secondaryLabel}
|
|
92
|
-
labelDirections={direction === "row" ? "vertical" : "horizontal"}
|
|
93
|
-
className={cn({
|
|
94
|
-
"pt-[9px]": direction === "row",
|
|
95
|
-
})}
|
|
96
|
-
size={"M"}
|
|
97
|
-
/>
|
|
98
86
|
<textarea
|
|
99
|
-
className={cn(textareaStyles({ state })
|
|
87
|
+
className={cn(textareaStyles({ state }))}
|
|
100
88
|
ref={ref}
|
|
101
89
|
{...props}
|
|
102
90
|
/>
|
|
103
|
-
</
|
|
91
|
+
</Label>
|
|
104
92
|
);
|
|
105
93
|
}
|
|
106
94
|
);
|
|
@@ -3,7 +3,7 @@ import { cn } from "../utils/cn";
|
|
|
3
3
|
import { cva, VariantProps } from "class-variance-authority";
|
|
4
4
|
import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
|
|
5
5
|
|
|
6
|
-
const TreeDropDownVariants = cva(["flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
|
|
6
|
+
const TreeDropDownVariants = cva(["cursor-pointer flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
|
|
7
7
|
"text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
|
|
8
8
|
"hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:gap-[14px]",
|
|
9
9
|
"rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
|
|
@@ -53,10 +53,10 @@ export const TreeDropDown = ({ childrenContainerClassName, className, variant =
|
|
|
53
53
|
return (
|
|
54
54
|
<div {...props} className={cn("flex h-fit flex-col transition-all ease-in-out duration-500",)}>
|
|
55
55
|
<div onClick={() => setIsActive(!isActive)} data-theme={theme} className={cn(TreeDropDownVariants({ variant, active: isActive }), className)}>
|
|
56
|
-
<button className={cn("outline-none border-none flex-0 leading-0 transition-transform ease-in-out flex justify-center items-center bg-background-system-body-tertiary h-[28px] w-[28px] rounded-full text-[20px] text-content-system-global-primary", { "rotate-180": isActive })}>
|
|
56
|
+
<button className={cn("cursor-pointer outline-none border-none flex-0 leading-0 transition-transform ease-in-out flex justify-center items-center bg-background-system-body-tertiary h-[28px] w-[28px] rounded-full text-[20px] text-content-system-global-primary", { "rotate-180": isActive })}>
|
|
57
57
|
<i className={cn("leading-none ri-arrow-down-s-line ")}></i>
|
|
58
58
|
</button>
|
|
59
|
-
<div className={cn("text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1")}>{treeLabel}</div>
|
|
59
|
+
<div className={cn("text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1 cursor-pointer")}>{treeLabel}</div>
|
|
60
60
|
</div>
|
|
61
61
|
<div className={cn("mt-0 pl-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out", {
|
|
62
62
|
"max-h-[20000px] mt-1": isActive, "max-h-0": !isActive,
|
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
import { useEffect, useRef } from "react";
|
|
2
2
|
|
|
3
|
-
export function useClickOutside<T extends HTMLElement>(callback: () => void) {
|
|
3
|
+
export function useClickOutside<T extends HTMLElement>(callback: (event?: any) => void) {
|
|
4
4
|
const ref = useRef<T>(null);
|
|
5
5
|
|
|
6
6
|
useEffect(() => {
|
|
7
|
-
function
|
|
8
|
-
if (ref.current
|
|
9
|
-
callback();
|
|
7
|
+
function handleOutsideClick(event: MouseEvent) {
|
|
8
|
+
if (ref.current) {
|
|
9
|
+
callback(event);
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
|
|
14
|
+
document.addEventListener("mousedown", handleOutsideClick);
|
|
15
|
+
document.addEventListener("pointerdown", handleOutsideClick);
|
|
16
|
+
return () => {
|
|
17
|
+
document.removeEventListener("mousedown", handleOutsideClick);
|
|
18
|
+
document.removeEventListener("pointerdown", handleOutsideClick);
|
|
19
|
+
};
|
|
15
20
|
}, [callback]);
|
|
16
21
|
|
|
17
22
|
return ref;
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import { useState, useEffect } from "react";
|
|
2
|
+
|
|
3
|
+
export interface Tag {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
variant?: string;
|
|
7
|
+
value?: string;
|
|
8
|
+
isSelected: boolean;
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const useTagSelection = ({
|
|
13
|
+
Tags,
|
|
14
|
+
onTagsChange,
|
|
15
|
+
inputRef
|
|
16
|
+
}: {
|
|
17
|
+
Tags: Tag[],
|
|
18
|
+
onTagsChange?: (selectedTags: Tag[]) => void,
|
|
19
|
+
inputRef?: React.RefObject<HTMLInputElement | null>
|
|
20
|
+
}) => {
|
|
21
|
+
// Initialize with available tags (excluding any initially selected ones)
|
|
22
|
+
const [tags, setTags] = useState<Tag[]>(Tags);
|
|
23
|
+
|
|
24
|
+
// Initialize with any pre-selected tags
|
|
25
|
+
const [selectedTagsStack, setSelectedTagsStack] = useState<Tag[]>([]);
|
|
26
|
+
const [searchTags, filterTagsBySearch] = useState('');
|
|
27
|
+
const [focusedTagIndex, setFocusedTagIndex] = useState<number | null>(null);
|
|
28
|
+
const [focusedPopoverIndex, setFocusedPopoverIndex] = useState<number | null>(null);
|
|
29
|
+
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
30
|
+
|
|
31
|
+
// Update internal state when Tags prop changes
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
// Only update if the Tags array reference has changed
|
|
34
|
+
const selectedIds = selectedTagsStack.map(tag => tag.id);
|
|
35
|
+
setTags(Tags.filter(tag => !selectedIds.includes(tag.id)));
|
|
36
|
+
}, [Tags]);
|
|
37
|
+
|
|
38
|
+
// Notify parent component when tags change
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (onTagsChange) {
|
|
41
|
+
onTagsChange(selectedTagsStack);
|
|
42
|
+
}
|
|
43
|
+
}, [selectedTagsStack]);
|
|
44
|
+
|
|
45
|
+
// Filter tags based on search input
|
|
46
|
+
const filteredTags = tags.filter(tag =>
|
|
47
|
+
tag.name.toLowerCase().includes(searchTags.toLowerCase())
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
const handleSelectTag = (id: string) => {
|
|
51
|
+
const tagToSelect = tags.find(tag => tag.id === id);
|
|
52
|
+
if (tagToSelect) {
|
|
53
|
+
setSelectedTagsStack(prev => [...prev, { ...tagToSelect, isSelected: true }]);
|
|
54
|
+
setTags(prev => prev.filter(tag => tag.id !== id));
|
|
55
|
+
}
|
|
56
|
+
filterTagsBySearch('');
|
|
57
|
+
setFocusedPopoverIndex(null);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const handleUnselectTag = (id: string) => {
|
|
61
|
+
const tagToUnselect = selectedTagsStack.find(tag => tag.id === id);
|
|
62
|
+
if (tagToUnselect) {
|
|
63
|
+
setSelectedTagsStack(prev => prev.filter(tag => tag.id !== id));
|
|
64
|
+
setTags(prev => [...prev, { ...tagToUnselect, isSelected: false }]);
|
|
65
|
+
}
|
|
66
|
+
setFocusedTagIndex(null);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
// Reset the hook state with new data
|
|
70
|
+
const reset = (newTags: Tag[] = [], newSelectedTags: Tag[] = []) => {
|
|
71
|
+
setTags(newTags);
|
|
72
|
+
setSelectedTagsStack(newSelectedTags);
|
|
73
|
+
filterTagsBySearch('');
|
|
74
|
+
setFocusedTagIndex(null);
|
|
75
|
+
setFocusedPopoverIndex(null);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const handleNavigationWithinSelectedTags = (e: React.KeyboardEvent<HTMLElement>) => {
|
|
79
|
+
if (e.key === 'ArrowLeft') {
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
setFocusedTagIndex((prev: any) => (prev === 0 ? selectedTagsStack.length - 1 : prev - 1));
|
|
82
|
+
} else if (e.key === 'ArrowRight') {
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
setFocusedTagIndex((prev: any) => (prev === selectedTagsStack.length - 1 ? 0 : prev + 1));
|
|
85
|
+
} else if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
86
|
+
e.preventDefault();
|
|
87
|
+
const tagToRemove = selectedTagsStack[focusedTagIndex!];
|
|
88
|
+
handleUnselectTag(tagToRemove.id);
|
|
89
|
+
if (selectedTagsStack.length > 1) {
|
|
90
|
+
setFocusedTagIndex(Math.min(focusedTagIndex!, selectedTagsStack.length - 2));
|
|
91
|
+
} else {
|
|
92
|
+
setFocusedTagIndex(null);
|
|
93
|
+
}
|
|
94
|
+
} else if (e.key === 'Escape') {
|
|
95
|
+
e.preventDefault();
|
|
96
|
+
setFocusedTagIndex(null);
|
|
97
|
+
} else if (e.key === 'ArrowDown') {
|
|
98
|
+
e.preventDefault();
|
|
99
|
+
setIsPopoverOpen(true);
|
|
100
|
+
setFocusedPopoverIndex(0);
|
|
101
|
+
setFocusedTagIndex(null);
|
|
102
|
+
} else {
|
|
103
|
+
inputRef?.current?.focus();
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
const handleNavigationWithinPopover = (e: React.KeyboardEvent<HTMLElement>) => {
|
|
108
|
+
if (e.key === 'ArrowUp') {
|
|
109
|
+
e.preventDefault();
|
|
110
|
+
if (focusedPopoverIndex === 0 || focusedPopoverIndex === null) {
|
|
111
|
+
if (selectedTagsStack.length > 0) {
|
|
112
|
+
setIsPopoverOpen(false);
|
|
113
|
+
setFocusedTagIndex(0);
|
|
114
|
+
setFocusedPopoverIndex(null);
|
|
115
|
+
} else {
|
|
116
|
+
setFocusedPopoverIndex(filteredTags.length - 1);
|
|
117
|
+
}
|
|
118
|
+
} else {
|
|
119
|
+
setFocusedPopoverIndex(prev => (prev === null ? 0 : prev - 1));
|
|
120
|
+
}
|
|
121
|
+
} else if (e.key === 'ArrowDown') {
|
|
122
|
+
e.preventDefault();
|
|
123
|
+
setFocusedPopoverIndex(prev =>
|
|
124
|
+
prev === null ? 0 : (prev === filteredTags.length - 1 ? 0 : prev + 1)
|
|
125
|
+
);
|
|
126
|
+
} else if (e.key === 'Enter' && focusedPopoverIndex !== null) {
|
|
127
|
+
e.preventDefault();
|
|
128
|
+
handleSelectTag(filteredTags[focusedPopoverIndex].id);
|
|
129
|
+
} else if (e.key === 'Escape') {
|
|
130
|
+
e.preventDefault();
|
|
131
|
+
setIsPopoverOpen(false);
|
|
132
|
+
setFocusedPopoverIndex(null);
|
|
133
|
+
} else {
|
|
134
|
+
inputRef?.current?.focus();
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
const handleInitialFocus = (e: React.KeyboardEvent<HTMLElement>) => {
|
|
139
|
+
if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && selectedTagsStack.length > 0) {
|
|
140
|
+
e.preventDefault();
|
|
141
|
+
setFocusedTagIndex(e.key === 'ArrowLeft' ? selectedTagsStack.length - 1 : 0);
|
|
142
|
+
} else if (e.key === 'ArrowDown' && !isPopoverOpen && filteredTags.length > 0) {
|
|
143
|
+
e.preventDefault();
|
|
144
|
+
setIsPopoverOpen(true);
|
|
145
|
+
setFocusedPopoverIndex(0);
|
|
146
|
+
} else {
|
|
147
|
+
inputRef?.current?.focus();
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
|
|
152
|
+
if (focusedTagIndex !== null && !isPopoverOpen) {
|
|
153
|
+
handleNavigationWithinSelectedTags(e);
|
|
154
|
+
} else if (isPopoverOpen && filteredTags.length > 0) {
|
|
155
|
+
handleNavigationWithinPopover(e);
|
|
156
|
+
} else {
|
|
157
|
+
handleInitialFocus(e);
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
return {
|
|
162
|
+
tags,
|
|
163
|
+
selectedTagsStack,
|
|
164
|
+
searchTags,
|
|
165
|
+
handleSelectTag,
|
|
166
|
+
handleUnselectTag,
|
|
167
|
+
handleKeyDown,
|
|
168
|
+
setFocusedTagIndex,
|
|
169
|
+
setFocusedPopoverIndex,
|
|
170
|
+
filterTagsBySearch,
|
|
171
|
+
filteredTags,
|
|
172
|
+
focusedTagIndex,
|
|
173
|
+
focusedPopoverIndex,
|
|
174
|
+
isPopoverOpen,
|
|
175
|
+
setIsPopoverOpen,
|
|
176
|
+
reset
|
|
177
|
+
};
|
|
178
|
+
};
|
|
179
|
+
|
package/lib/layouts/CNLayout.tsx
CHANGED
|
@@ -120,7 +120,7 @@ const SideBarItemStyles = cva([
|
|
|
120
120
|
"h-[40px] w-full px-[8px] flex gap-[6px] typography-body-small-medium justify-start items-center",
|
|
121
121
|
"text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
|
|
122
122
|
"hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:px-[14px]",
|
|
123
|
-
"rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
|
|
123
|
+
"rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out cursor-pointer",
|
|
124
124
|
|
|
125
125
|
],
|
|
126
126
|
{
|
|
@@ -205,7 +205,7 @@ const SideBarItem = ({ active, disabled, iconOnly, asChild, as: Tag = "span", th
|
|
|
205
205
|
const SideBarIconButtonStyles = cva([
|
|
206
206
|
"h-[36px] w-[36px] flex text-content-system-global-primary text-[20px] justify-center items-center rounded-[8px] border border-transparent outline-none",
|
|
207
207
|
"fucus:bg-border-system-action-primary-Hover active:bg-border-system-action-primary-Hover",
|
|
208
|
-
"transition-all duration-200 ease-in-out flex-shrink-0 m-[5px] relative",
|
|
208
|
+
"transition-all duration-200 ease-in-out flex-shrink-0 m-[5px] relative cursor-pointer",
|
|
209
209
|
],
|
|
210
210
|
{
|
|
211
211
|
variants: {
|