@kubit-ui-web/react-components 2.0.0-beta.1 → 2.0.0-beta.3
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 +320 -46
- package/dist/cjs/components/carousel/hooks/useCarousel.js +1 -1
- package/dist/cjs/components/carousel/hooks/useCarouselKeyNavigation.js +1 -1
- package/dist/cjs/components/carousel/hooks/useCarouselSwipe.js +1 -1
- package/dist/cjs/components/carousel/hooks/utils/calc.utils.js +1 -1
- package/dist/cjs/components/carousel/hooks/utils/dom.utils.js +1 -1
- package/dist/cjs/components/popover/hooks/positioning/middlewareUtils.js +1 -1
- package/dist/cjs/components/popover/hooks/usePopoverLifecycle.js +1 -1
- package/dist/cjs/components/popover/hooks/usePopoverPositioning.js +1 -1
- package/dist/cjs/components/popover/popover.js +1 -1
- package/dist/cjs/components/text/textStandAlone.js +1 -1
- package/dist/cjs/components/tooltip/hooks/useTooltip.js +1 -1
- package/dist/cjs/lib/provider/cssProvider/stats/stats.js +1 -1
- package/dist/cjs/lib/provider/stylesProvider/stylesProvider.js +1 -1
- package/dist/esm/components/carousel/hooks/useCarousel.js +1 -1
- package/dist/esm/components/carousel/hooks/useCarouselKeyNavigation.js +1 -1
- package/dist/esm/components/carousel/hooks/useCarouselSwipe.js +1 -1
- package/dist/esm/components/carousel/hooks/utils/calc.utils.js +1 -1
- package/dist/esm/components/carousel/hooks/utils/dom.utils.js +1 -1
- package/dist/esm/components/popover/hooks/positioning/middlewareUtils.js +1 -1
- package/dist/esm/components/popover/hooks/usePopoverLifecycle.js +1 -1
- package/dist/esm/components/popover/hooks/usePopoverPositioning.js +1 -1
- package/dist/esm/components/popover/popover.js +1 -1
- package/dist/esm/components/text/textStandAlone.js +1 -1
- package/dist/esm/components/tooltip/hooks/useTooltip.js +1 -1
- package/dist/esm/lib/provider/cssProvider/stats/stats.js +1 -1
- package/dist/esm/lib/provider/stylesProvider/stylesProvider.js +2 -2
- package/package.json +28 -13
- package/dist/cjs/lib/designSystem/kubit/css/kubit.css +0 -1683
- package/dist/cjs/lib/designSystem/kubit/css/kubit.min.css +0 -1
- package/dist/cjs/node_modules/react/cjs/react-jsx-runtime.production.min.js +0 -1
- package/dist/cjs/node_modules/react/jsx-runtime.js +0 -1
- package/dist/esm/lib/designSystem/kubit/css/kubit.css +0 -1683
- package/dist/esm/lib/designSystem/kubit/css/kubit.min.css +0 -1
- package/dist/esm/node_modules/react/cjs/react-jsx-runtime.production.min.js +0 -1
- package/dist/esm/node_modules/react/jsx-runtime.js +0 -1
package/README.md
CHANGED
|
@@ -7,16 +7,20 @@
|
|
|
7
7
|
</a>
|
|
8
8
|
</p>
|
|
9
9
|
|
|
10
|
-
<div align=
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
10
|
+
<div align="center">
|
|
11
|
+
|
|
12
|
+
[](https://www.npmjs.com/package/@kubit-ui-web/react-components)
|
|
13
|
+
[](https://www.npmjs.com/package/@kubit-ui-web/react-components)
|
|
14
|
+
[](https://bundlephobia.com/package/@kubit-ui-web/react-components)
|
|
15
|
+
|
|
16
|
+
[](./LICENSE.md)
|
|
17
|
+
[](https://github.com/kubit-ui/kubit-react-components/stargazers)
|
|
18
|
+
[](https://github.com/kubit-ui/kubit-react-components/issues)
|
|
19
|
+
|
|
20
|
+
[](https://www.typescriptlang.org/)
|
|
21
|
+
[](https://reactjs.org/)
|
|
22
|
+
[](https://storybook.js.org/)
|
|
23
|
+
|
|
20
24
|
</div>
|
|
21
25
|
|
|
22
26
|
<br />
|
|
@@ -27,9 +31,23 @@
|
|
|
27
31
|
|
|
28
32
|
# Getting Started
|
|
29
33
|
|
|
34
|
+
> **Kubit React Components** is a customizable, accessible library of React web components, designed to enhance your application's user experience with production-ready components.
|
|
35
|
+
|
|
36
|
+
## 📋 Table of Contents
|
|
37
|
+
|
|
38
|
+
- [Installation](#installation)
|
|
39
|
+
- [Quick Start](#quick-start)
|
|
40
|
+
- [Usage](#usage)
|
|
41
|
+
- [Documentation](#documentation)
|
|
42
|
+
- [Storybook](#storybook)
|
|
43
|
+
- [Features](#features)
|
|
44
|
+
- [Browser Support](#browser-support)
|
|
45
|
+
- [Contributing](#contributing)
|
|
46
|
+
- [License](#license)
|
|
47
|
+
|
|
30
48
|
## Installation
|
|
31
49
|
|
|
32
|
-
|
|
50
|
+
Install the package using your preferred package manager:
|
|
33
51
|
|
|
34
52
|
### npm
|
|
35
53
|
|
|
@@ -43,16 +61,33 @@ npm install @kubit-ui-web/react-components
|
|
|
43
61
|
yarn add @kubit-ui-web/react-components
|
|
44
62
|
```
|
|
45
63
|
|
|
46
|
-
|
|
64
|
+
### pnpm
|
|
47
65
|
|
|
48
|
-
|
|
66
|
+
```bash
|
|
67
|
+
pnpm add @kubit-ui-web/react-components
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
**Package Info:**
|
|
71
|
+
|
|
72
|
+
- 📦 Size: ~235 KB (gzipped)
|
|
73
|
+
- 🎯 Tree-shakeable: Yes
|
|
74
|
+
- 📘 TypeScript: Full support
|
|
75
|
+
- ⚛️ React: 17+ and 18+
|
|
76
|
+
|
|
77
|
+
## Quick Start
|
|
78
|
+
|
|
79
|
+
Import and use components in your application:
|
|
80
|
+
|
|
81
|
+
## Quick Start
|
|
49
82
|
|
|
50
|
-
|
|
83
|
+
Import and use components in your application:
|
|
51
84
|
|
|
52
85
|
```tsx
|
|
53
|
-
import { Button, KubitProvider } from '@kubit-ui-web/react-components';
|
|
54
86
|
import React from 'react';
|
|
55
87
|
|
|
88
|
+
import { Button, KubitProvider } from '@kubit-ui-web/react-components';
|
|
89
|
+
import '@kubit-ui-web/react-components/styles/default/default.min.css';
|
|
90
|
+
|
|
56
91
|
const App = () => {
|
|
57
92
|
return (
|
|
58
93
|
<KubitProvider>
|
|
@@ -66,74 +101,313 @@ const App = () => {
|
|
|
66
101
|
export default App;
|
|
67
102
|
```
|
|
68
103
|
|
|
69
|
-
|
|
104
|
+
> **Note:** The `KubitProvider` is required to use the components. It provides the theme and other context.
|
|
105
|
+
|
|
106
|
+
## Usage
|
|
107
|
+
|
|
108
|
+
### Basic Components
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import {
|
|
112
|
+
Button,
|
|
113
|
+
Input,
|
|
114
|
+
KubitProvider,
|
|
115
|
+
Modal,
|
|
116
|
+
Tooltip,
|
|
117
|
+
} from '@kubit-ui-web/react-components';
|
|
118
|
+
|
|
119
|
+
function MyApp() {
|
|
120
|
+
return (
|
|
121
|
+
<KubitProvider>
|
|
122
|
+
<Input label="Email" placeholder="Enter your email" type="email" />
|
|
123
|
+
|
|
124
|
+
<Button variant="PRIMARY" onClick={handleClick}>
|
|
125
|
+
Submit
|
|
126
|
+
</Button>
|
|
127
|
+
|
|
128
|
+
<Tooltip content="Helpful information">
|
|
129
|
+
<span>Hover me</span>
|
|
130
|
+
</Tooltip>
|
|
131
|
+
</KubitProvider>
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Custom Theme
|
|
137
|
+
|
|
138
|
+
Customize the theme to match your brand:
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
import { KubitProvider } from '@kubit-ui-web/react-components';
|
|
142
|
+
|
|
143
|
+
const customTheme = {
|
|
144
|
+
colors: {
|
|
145
|
+
primary: '#your-color',
|
|
146
|
+
secondary: '#your-secondary',
|
|
147
|
+
},
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
function App() {
|
|
151
|
+
return (
|
|
152
|
+
<KubitProvider theme={customTheme}>{/* Your components */}</KubitProvider>
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
For more information about theme customization, visit [Kubit UI Documentation](https://kubit-ui.com).
|
|
158
|
+
|
|
159
|
+
## Features
|
|
160
|
+
|
|
161
|
+
✨ **50+ Production-Ready Components**
|
|
70
162
|
|
|
71
|
-
|
|
163
|
+
- Buttons, Inputs, Modals, Tooltips, and more
|
|
164
|
+
- Fully customizable and themeable
|
|
72
165
|
|
|
73
|
-
|
|
166
|
+
♿ **Accessible by Default**
|
|
167
|
+
|
|
168
|
+
- WCAG 2.1 AA compliant
|
|
169
|
+
- Keyboard navigation support
|
|
170
|
+
- Screen reader friendly
|
|
171
|
+
|
|
172
|
+
🎨 **Design System Integration**
|
|
173
|
+
|
|
174
|
+
- Built with design tokens
|
|
175
|
+
- CSS variables for easy customization
|
|
176
|
+
- Bernova CSS generation
|
|
177
|
+
|
|
178
|
+
📦 **Developer Experience**
|
|
179
|
+
|
|
180
|
+
- Full TypeScript support
|
|
181
|
+
- Tree-shakeable exports
|
|
182
|
+
- Comprehensive documentation
|
|
183
|
+
- Rich Storybook examples
|
|
184
|
+
|
|
185
|
+
🚀 **Performance Optimized**
|
|
186
|
+
|
|
187
|
+
- Small bundle size (~235 KB gzipped)
|
|
188
|
+
- Code splitting ready
|
|
189
|
+
- Minimal runtime overhead
|
|
190
|
+
|
|
191
|
+
## Browser Support
|
|
192
|
+
|
|
193
|
+
| Browser | Version |
|
|
194
|
+
| ------- | --------------- |
|
|
195
|
+
| Chrome | Last 2 versions |
|
|
196
|
+
| Firefox | Last 2 versions |
|
|
197
|
+
| Safari | Last 2 versions |
|
|
198
|
+
| Edge | Last 2 versions |
|
|
74
199
|
|
|
75
200
|
## Documentation
|
|
76
201
|
|
|
77
|
-
You can find
|
|
202
|
+
You can find comprehensive documentation for all components at:
|
|
203
|
+
|
|
204
|
+
🌐 **[Kubit UI Website](https://kubit-ui.com)**
|
|
205
|
+
|
|
206
|
+
- Component API documentation
|
|
207
|
+
- Interactive examples
|
|
208
|
+
- Design guidelines
|
|
209
|
+
- Migration guides
|
|
78
210
|
|
|
79
211
|
## Storybook
|
|
80
212
|
|
|
81
|
-
|
|
213
|
+
Explore all components interactively in Storybook.
|
|
82
214
|
|
|
83
|
-
|
|
84
|
-
npm run storybook
|
|
215
|
+
### View Online
|
|
85
216
|
|
|
86
|
-
|
|
87
|
-
```
|
|
217
|
+
🎭 **[View Storybook](https://kubit-ui.com/storybook)** - Browse all components online
|
|
88
218
|
|
|
89
|
-
|
|
219
|
+
### Run Locally
|
|
220
|
+
|
|
221
|
+
To run Storybook locally:
|
|
222
|
+
|
|
223
|
+
1. Clone the repository:
|
|
224
|
+
|
|
225
|
+
```bash
|
|
226
|
+
git clone https://github.com/kubit-ui/kubit-react-components.git
|
|
227
|
+
cd kubit-react-components
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
2. Install dependencies:
|
|
231
|
+
|
|
232
|
+
```bash
|
|
233
|
+
npm install
|
|
234
|
+
# or
|
|
235
|
+
yarn install
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
3. Start Storybook:
|
|
239
|
+
```bash
|
|
240
|
+
npm run storybook
|
|
241
|
+
# or
|
|
242
|
+
yarn storybook
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
This will start the Storybook server at `http://localhost:6006` where you can see all components in action.
|
|
90
246
|
|
|
91
247
|
## Tests
|
|
92
248
|
|
|
93
|
-
|
|
249
|
+
Run the test suite to ensure everything works correctly:
|
|
94
250
|
|
|
95
251
|
```bash
|
|
252
|
+
# Run all tests
|
|
96
253
|
npm run test
|
|
97
|
-
|
|
254
|
+
# or
|
|
98
255
|
yarn test
|
|
256
|
+
|
|
257
|
+
# Watch mode (for development)
|
|
258
|
+
npm run test:watch
|
|
259
|
+
# or
|
|
260
|
+
yarn test:watch
|
|
261
|
+
|
|
262
|
+
# Coverage report
|
|
263
|
+
npm run test:coverage
|
|
264
|
+
# or
|
|
265
|
+
yarn test:coverage
|
|
99
266
|
```
|
|
100
267
|
|
|
101
|
-
|
|
268
|
+
**Test Stack:**
|
|
269
|
+
|
|
270
|
+
- ✅ Vitest - Fast unit testing
|
|
271
|
+
- 🧪 Testing Library - Component testing
|
|
272
|
+
- ♿ vitest-axe - Accessibility testing
|
|
102
273
|
|
|
103
274
|
## Contributing
|
|
104
275
|
|
|
105
|
-
We
|
|
276
|
+
We welcome contributions from the community! Here's how you can help:
|
|
277
|
+
|
|
278
|
+
### Ways to Contribute
|
|
106
279
|
|
|
107
|
-
|
|
280
|
+
- 🐛 Report bugs
|
|
281
|
+
- 💡 Suggest new features
|
|
282
|
+
- 📝 Improve documentation
|
|
283
|
+
- 🔧 Submit pull requests
|
|
284
|
+
- ⭐ Star the repository
|
|
108
285
|
|
|
109
|
-
|
|
286
|
+
### Contribution Steps
|
|
110
287
|
|
|
111
|
-
|
|
112
|
-
|
|
288
|
+
1. **Fork the Repository**: Click the "Fork" button in the upper right corner of the [repository's page](https://github.com/kubit-ui/kubit-react-components) on GitHub.
|
|
289
|
+
|
|
290
|
+
2. **Clone the Repository**: Clone your fork to your local machine.
|
|
291
|
+
|
|
292
|
+
```bash
|
|
293
|
+
git clone https://github.com/YOUR_USERNAME/kubit-react-components.git
|
|
294
|
+
cd kubit-react-components
|
|
113
295
|
```
|
|
114
296
|
|
|
115
|
-
3. **Create a Branch**:
|
|
297
|
+
3. **Create a Branch**: Create a new branch for your changes.
|
|
116
298
|
|
|
117
|
-
```
|
|
118
|
-
git checkout -b
|
|
299
|
+
```bash
|
|
300
|
+
git checkout -b feature/your-feature-name
|
|
119
301
|
```
|
|
120
302
|
|
|
121
|
-
4. **
|
|
303
|
+
4. **Install Dependencies**:
|
|
304
|
+
|
|
305
|
+
```bash
|
|
306
|
+
yarn install
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
5. **Make Changes**: Make your changes and test them thoroughly.
|
|
310
|
+
|
|
311
|
+
```bash
|
|
312
|
+
yarn test
|
|
313
|
+
yarn lint
|
|
314
|
+
yarn typecheck
|
|
315
|
+
```
|
|
122
316
|
|
|
123
|
-
|
|
317
|
+
6. **Commit Changes**: Use conventional commits for your messages.
|
|
124
318
|
|
|
125
|
-
```
|
|
126
|
-
git commit -m "
|
|
319
|
+
```bash
|
|
320
|
+
git commit -m "feat: add new component feature"
|
|
127
321
|
```
|
|
128
322
|
|
|
129
|
-
|
|
323
|
+
**Commit Types:**
|
|
324
|
+
- `feat:` - New feature
|
|
325
|
+
- `fix:` - Bug fix
|
|
326
|
+
- `docs:` - Documentation changes
|
|
327
|
+
- `style:` - Code style changes (formatting)
|
|
328
|
+
- `refactor:` - Code refactoring
|
|
329
|
+
- `test:` - Adding or updating tests
|
|
330
|
+
- `chore:` - Maintenance tasks
|
|
130
331
|
|
|
131
|
-
|
|
132
|
-
|
|
332
|
+
7. **Push Changes**: Push your changes to your fork.
|
|
333
|
+
|
|
334
|
+
```bash
|
|
335
|
+
git push origin feature/your-feature-name
|
|
133
336
|
```
|
|
134
337
|
|
|
135
|
-
|
|
338
|
+
8. **Open a Pull Request**: Go to the original repository and click "New pull request". Fill out the PR template with details about your changes.
|
|
339
|
+
|
|
340
|
+
### Development Commands
|
|
136
341
|
|
|
137
|
-
|
|
342
|
+
```bash
|
|
343
|
+
# Start development server
|
|
344
|
+
yarn dev
|
|
138
345
|
|
|
139
|
-
|
|
346
|
+
# Run Storybook
|
|
347
|
+
yarn storybook
|
|
348
|
+
|
|
349
|
+
# Build library
|
|
350
|
+
yarn dist
|
|
351
|
+
|
|
352
|
+
# Run tests
|
|
353
|
+
yarn test
|
|
354
|
+
|
|
355
|
+
# Lint code
|
|
356
|
+
yarn lint
|
|
357
|
+
|
|
358
|
+
# Type check
|
|
359
|
+
yarn typecheck
|
|
360
|
+
|
|
361
|
+
# Check package size
|
|
362
|
+
yarn pack:size
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
For more detailed information, please refer to the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
|
|
366
|
+
|
|
367
|
+
## Community & Support
|
|
368
|
+
|
|
369
|
+
- 💬 [GitHub Discussions](https://github.com/kubit-ui/kubit-react-components/discussions) - Ask questions and share ideas
|
|
370
|
+
- 🐛 [Issue Tracker](https://github.com/kubit-ui/kubit-react-components/issues) - Report bugs and request features
|
|
371
|
+
- 📧 [Email](mailto:kubit@opendigitalservices.com) - Contact the team
|
|
372
|
+
- 🐦 [Twitter](https://twitter.com/kubit_ui) - Follow for updates
|
|
373
|
+
|
|
374
|
+
## Related Projects
|
|
375
|
+
|
|
376
|
+
- [Kubit Design System](https://kubit-ui.com) - Complete design system documentation
|
|
377
|
+
- [Kubit Figma Kit](https://figma.com/@kubit) - Design files and components
|
|
378
|
+
|
|
379
|
+
## Changelog
|
|
380
|
+
|
|
381
|
+
See [CHANGELOG.md](./CHANGELOG.md) for a list of changes and migration guides.
|
|
382
|
+
|
|
383
|
+
## Migration Guides
|
|
384
|
+
|
|
385
|
+
- [v1.x to v2.0.0](./MIGRATION_GUIDE.md) - Complete migration guide for major version
|
|
386
|
+
|
|
387
|
+
## License
|
|
388
|
+
|
|
389
|
+
This project is licensed under the **Apache License 2.0** - see the [LICENSE.md](./LICENSE.md) file for details.
|
|
390
|
+
|
|
391
|
+
```
|
|
392
|
+
Copyright 2025 Kubit
|
|
393
|
+
|
|
394
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
395
|
+
you may not use this file except in compliance with the License.
|
|
396
|
+
You may obtain a copy of the License at
|
|
397
|
+
|
|
398
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
---
|
|
402
|
+
|
|
403
|
+
<div align="center">
|
|
404
|
+
|
|
405
|
+
**Made with ❤️ by the Kubit Team**
|
|
406
|
+
|
|
407
|
+
[](https://github.com/kubit-ui/kubit-react-components)
|
|
408
|
+
[](https://www.npmjs.com/package/@kubit-ui-web/react-components)
|
|
409
|
+
[](https://kubit-ui.com)
|
|
410
|
+
|
|
411
|
+
If you find this project useful, please consider giving it a ⭐️!
|
|
412
|
+
|
|
413
|
+
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=require("../../../lib/utils/resizeObserver/resizeObserver.js"),t=require("./useCarouselKeyNavigation.js"),r=require("./useCarouselSwipe.js"),a=require("./utils/calc.utils.js"),i=require("./utils/constants.js"),u=require("./utils/dom.utils.js");exports.useCarousel=({
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=require("../../../lib/utils/resizeObserver/resizeObserver.js"),t=require("./useCarouselKeyNavigation.js"),r=require("./useCarouselSwipe.js"),a=require("./utils/calc.utils.js"),i=require("./utils/constants.js"),u=require("./utils/dom.utils.js");exports.useCarousel=({allowModifySliceWidth:s=!1,autoFitContainer:l=!1,centerExtremesWhenExtraPadding:c=!1,centerMode:o=!1,circular:d=!0,contentContainerRef:g,defaultPage:P=0,disabled:f=!1,elements:m,extraPadding:C=0,numElementsPerPage:w,numElementsToSlide:h,onePageAlign:E="center",onNumElementsPerPageChange:I,onNumPagesChange:x,onPageChange:R,rootContainerRef:b,viewerContainerRef:v})=>{const N=e.useRef(!0),S=e.useRef(P),p=e.useRef(P),y=e.useRef(w),L=e.useRef(0),V=e.useCallback(e=>{const n=g.current;if(!n||!y.current||e.propertyName!==i.default.PROPERTY_TO_HANDLE_TRANSITION_END||L.current<1)return;n.setAttribute("data-shifting","false");const{newPage:t}=u.default.udpateCarouselPositionOnEdge({contentContainer:n,currentPage:p.current,elementsLength:m.length,extraPadding:C,numElementsPerPage:y.current,numPages:L.current});p.current=t,S.current!==p.current&&(S.current=p.current,R?.(p.current));const{firstIndexInView:r,lastIndexInView:s}=a.default.calcFirstAndLastIndexInCarouselView({currentPage:p.current,elementsLength:m.length,isCircular:d,numElementsPerPage:y.current,numElementsToSlide:h});u.default.updateContentElementsAriaVisibility({contentContainer:n,firstIndexInView:r,lastIndexInView:s}),o&&u.default.applyCenterMode({contentContainer:n,firstIndexInView:r,lastIndexInView:s,numElementsPerPage:y.current}),N.current=!0},[m,C,h,d,o,R]),T=e.useCallback(({animated:e=!0,newPage:n})=>{const t=v.current,r=g.current;if(!t||!r||!N.current||!y.current||!m.length||L.current<1||(d?n<-1:n<0)||(d?n>L.current:n>L.current-1))return;e&&r.setAttribute("data-shifting","true"),u.default.deleteCenterMode({contentContainer:r}),p.current=n;const{firstIndexInView:l,lastIndexInView:o}=a.default.calcFirstAndLastIndexInCarouselView({currentPage:p.current,elementsLength:m.length,isCircular:d,numElementsPerPage:y.current,numElementsToSlide:h});s||u.default.updateViewerWidth({contentContainer:r,extraPadding:C,firstIndexInView:l,lastIndexInView:o,viewerContainer:t});const P=r.style.left,f=a.default.calcContentContainerLeftPosition({centerExtremesWhenExtraPadding:c,circular:d,contentContainer:r,currentPage:p.current,extraPadding:C,firstIndexInView:l,numPages:L.current});r.style.left=f,e&&P!==f?N.current=!1:V({propertyName:i.default.PROPERTY_TO_HANDLE_TRANSITION_END})},[m,h,d,s,C,c,V]),O=e.useCallback(()=>{const e=v.current,n=g.current;e&&n&&y.current&&(s&&(e.style.width="100%",u.default.updateSlicesWidth({centerMode:o,contentContainer:n,extraPadding:C,numElementsPerPage:y.current,viewerContainer:e})),u.default.manageCircularClones({circular:d,contentContainer:n,elementsLength:m.length,numElementsPerPage:y.current}),T({animated:!1,newPage:p.current}))},[s,o,d,m,C,T]),A=e.useCallback(()=>{const e=b.current,n=v.current,t=g.current;if(!e||!n||!t)return;e.style.width="100%";const r=w||a.default.calcNumElementsPerPage({contentContainer:t,elementsLength:m.length,extraPadding:C,rootContainer:e,viewerContainer:n})||1;l&&(e.style.width="fit-content"),r!==y.current&&(y.current=r,I?.(r));const i=a.default.calcNumPages({elementsLength:m.length,numElementsPerPage:r,numElementsToSlide:h});L.current!==i&&(L.current=i,x?.(i),p.current=Math.min(Math.max(0,P),i-1)),i<=1&&u.default.alignOnePageCarousel({allowModifySliceWidth:s,contentContainer:t,onePageAlign:E,rootContainer:e})},[s,m,C,w,h,E,l,I,x,R]),M=e.useCallback(()=>{A(),O()},[A,O]);return e.useEffect(()=>{const e=g.current;if(!e)return;M(),window.addEventListener("resize",M);const t=new n.ResizeObserver(M);return t.observe(e),()=>{window.removeEventListener("resize",M),t.disconnect()}},[M]),e.useEffect(()=>{const e=g.current;return e?.addEventListener("transitionend",V),()=>{e?.removeEventListener("transitionend",V)}},[V]),r.useCarouselSwipe({allowShiftRef:N,centerExtremesWhenExtraPadding:c,changePage:T,circular:d,contentContainerRef:g,currentPageRef:p,disabled:f,elements:m,extraPadding:C,numElementsPerPageRef:y,numPagesRef:L,viewerContainerRef:v}),t.useCarouselKeyNavigation({allowShiftRef:N,changePage:T,circular:d,currentPageRef:p,disabled:f,numPagesRef:L,rootContainerRef:b}),{allowShiftRef:N,changePage:T,currentPageRef:p,numElementsPerPageRef:y,numPagesRef:L}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../../lib/utils/keyboard/keyboard.js");exports.useCarouselKeyNavigation=({
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../../lib/utils/keyboard/keyboard.js");exports.useCarouselKeyNavigation=({allowShiftRef:t,changePage:n,circular:u,currentPageRef:o,disabled:s=!1,numPagesRef:c,rootContainerRef:a})=>{e.useEffect(()=>{if(s)return;const e=e=>{!t.current||c.current<=1||(r.isArrowLeftPressed(e.key)?t.current&&(u||0!==o.current)&&n({newPage:o.current-1}):r.isArrowRightPressed(e.key)&&t.current&&(u||o.current!==c.current-1)&&n({newPage:o.current+1}))},i=a.current;return i?.addEventListener("keydown",e),()=>{i?.removeEventListener("keydown",e)}},[u,n,s])};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../../lib/hooks/useScrollBlock/useScrollBlock.js"),r=require("./utils/calc.utils.js"),n=require("./utils/constants.js");exports.useCarouselSwipe=({
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../../lib/hooks/useScrollBlock/useScrollBlock.js"),r=require("./utils/calc.utils.js"),n=require("./utils/constants.js");exports.useCarouselSwipe=({allowShiftRef:c,centerExtremesWhenExtraPadding:u,changePage:s,circular:l,contentContainerRef:o,currentPageRef:a,disabled:i=!1,elements:f,extraPadding:d,numElementsPerPageRef:v,numPagesRef:E,viewerContainerRef:m})=>{const h=e.useRef(!1),L=e.useRef(!1),R=e.useRef(!1),_=e.useRef(),p=e.useRef(0),D=e.useRef(0),S=e.useRef(0),g=e.useRef(0),b=e.useCallback(()=>{c.current&&(l||a.current!==E.current-1)&&s({newPage:a.current+1})},[l,s]),C=e.useCallback(()=>{c.current&&(l||0!==a.current)&&s({newPage:a.current-1})},[l,s]),{allowScroll:y,blockScroll:P}=t.useScrollBlock(),X=e.useCallback(e=>{const t=o.current;!t||E.current<=1||(_.current=parseFloat(t.style.left||"0"),"touchstart"===e.type?(p.current=e.touches[0].clientX,S.current=e.touches[0].clientX,g.current=e.touches[0].clientY):(p.current=e.clientX,S.current=e.clientX,g.current=e.clientY),h.current=!0)},[]),k=e.useCallback(e=>{const t=o.current;if(!t||!h.current||!v?.current||E.current<=1)return;let c,s;"touchmove"===e.type?(D.current=p.current-e.touches[0].clientX,p.current=e.touches[0].clientX,c=e.touches[0].clientX-S.current,s=e.touches[0].clientY-g.current):(D.current=p.current-e.clientX,p.current=e.clientX,c=e.clientX-S.current,s=e.clientY-g.current);const i=parseFloat(t.style.left||"0")-D.current;if(L.current||R.current||(Math.abs(c)>n.default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING?(L.current=!0,P()):Math.abs(s)>n.default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING&&(R.current=!0)),L.current)if(l&&f.length>v.current)t.style.left=`${i}px`;else{const e=r.default.calcXDistanceBetween2Elements(t.firstChild,t.children[t.children.length-v.current]);if(u)i-d<0&&-i<e-d&&(t.style.left=`${i}px`);else{let r=l?d:0;!l&&d&&a.current===E.current-1&&(r=2*d),i-r<0&&-i<e-r&&(t.style.left=`${i}px`)}}},[P,u,l,f,d]),O=e.useCallback(()=>{const e=o.current;if(R.current=!1,L.current&&y(),L.current=!1,!e||!h.current||void 0===_.current||E.current<=1)return;h.current=!1;const t=parseFloat(e.style.left||"0");t-_.current<-0?b():t-_.current>n.default.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS?C():e.style.left=`${_.current}px`},[y,b,C]);e.useEffect(()=>{if(i)return;const e=m.current,t={passive:!0};return e?.addEventListener("touchstart",X,t),e?.addEventListener("touchend",O,t),e?.addEventListener("touchmove",k,t),e?.addEventListener("mousedown",X,t),e?.addEventListener("mouseup",O,t),e?.addEventListener("mousemove",k,t),e?.addEventListener("mouseleave",O,t),()=>{e?.removeEventListener("touchstart",X,t),e?.removeEventListener("touchend",O,t),e?.removeEventListener("touchmove",k,t),e?.removeEventListener("mousedown",X,t),e?.removeEventListener("mouseup",O,t),e?.removeEventListener("mousemove",k,t),e?.removeEventListener("mouseleave",O,t)}},[X,O,k,i])};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=({element:e})=>{const t=window.getComputedStyle(e);return parseFloat(t.getPropertyValue("padding-left")||"0")+parseFloat(t.getPropertyValue("padding-right")||"0")},t=(e,t)=>{if(!e||!t)return 0;const n=e.offsetLeft,r=t.offsetLeft;return Math.abs(r-n)},n=({numElementsPerPage:e,numElementsToSlide:t})=>t?Math.max(1,Math.min(t,e)):e,r=({elementsLength:e,numElementsPerPage:t,numElementsToSlide:r})=>{if(e<=t)return 1;const l=n({numElementsToSlide:r
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=({element:e})=>{const t=window.getComputedStyle(e);return parseFloat(t.getPropertyValue("padding-left")||"0")+parseFloat(t.getPropertyValue("padding-right")||"0")},t=(e,t)=>{if(!e||!t)return 0;const n=e.offsetLeft,r=t.offsetLeft;return Math.abs(r-n)},n=({numElementsPerPage:e,numElementsToSlide:t})=>t?Math.max(1,Math.min(t,e)):e,r=({elementsLength:e,numElementsPerPage:t,numElementsToSlide:r})=>{if(e<=t)return 1;const l=n({numElementsPerPage:t,numElementsToSlide:r});return Math.ceil((e-t+l)/l)},l=({currentPage:e,elementsLength:t,isCircular:l,numElementsPerPage:s,numElementsToSlide:i})=>{if(t<=s)return{firstIndexInView:0,lastIndexInView:t-1};const o=n({numElementsPerPage:s,numElementsToSlide:i});let a=e*o+s-1;let c=0;l&&t>s&&(c=s+1,a+=c),e===r({elementsLength:t,numElementsPerPage:s,numElementsToSlide:o})?a=c+t+s-1:e<0?a=c-1:a-c>t-1&&(a=c+t-1);return{firstIndexInView:a-s+1,lastIndexInView:a}},s=({contentContainer:t,elementsLength:n,extraPadding:r,rootContainer:l,viewerContainer:s})=>{const i=t.firstElementChild;if(!i)return;let o=l.offsetWidth;o-=2*r;o-=e({element:s});let a=0;const c=i.offsetLeft;for(let e=0;e<t.children.length;e++){const n=t.children[e];if(c+n.offsetLeft+n.offsetWidth>o)break;a++}return Math.max(Math.min(n,a),1)},i=({centerMode:e,contentContainer:t})=>{let n=0;if(t.childNodes.length<2)return n;const r=t.childNodes[0],l=t.childNodes[1];e&&r.style&&l.style&&(r.style.transition="none",l.style.transition="none",r.style.transform="scale(1)",l.style.transform="scale(1)");const s=r?.getBoundingClientRect()?.right,i=l?.getBoundingClientRect()?.left;return e&&r.style&&l.style&&(r.style.removeProperty("transform"),l.style.removeProperty("transform"),r.offsetHeight,l.offsetHeight,r.style.removeProperty("transition"),l.style.removeProperty("transition")),void 0!==s&&void 0!==i&&(n=Math.abs(s-i)),n},o=({centerMode:t,contentContainer:n,extraPadding:r,numElementsPerPage:l,viewerContainer:s})=>{const o=(l-1)*i({centerMode:t,contentContainer:n}),a=e({element:s});return(s.getBoundingClientRect().width-o-2*r-a)/l},a=({contentContainer:n,extraPadding:r,firstIndexInView:l,lastIndexInView:s,viewerContainer:i})=>{const o=n.children[l],a=n.children[s],c=t(o,a),d=e({element:i});return`${c+a.offsetWidth+2*r+d}px`},c=({centerExtremesWhenExtraPadding:e,circular:n,contentContainer:r,currentPage:l,extraPadding:s,firstIndexInView:i,numPages:o})=>{let a=t(r.firstChild,r.children[i]);return s&&(e||n||0!==l&&l!==o-1?a-=s:n||l!==o-1||(a-=2*s)),-a+"px"},d={calcAdjustedNumElementsToSlide:n,calcContentContainerLeftPosition:c,calcFirstAndLastIndexInCarouselView:l,calcGapBetweenContentContainerElements:i,calcNumElementsPerPage:s,calcNumPages:r,calcSliceWidth:o,calcViewerWidth:a,calcXDistanceBetween2Elements:t};exports.calcAdjustedNumElementsToSlide=n,exports.calcContentContainerLeftPosition=c,exports.calcFirstAndLastIndexInCarouselView=l,exports.calcGapBetweenContentContainerElements=i,exports.calcHorizontalElementPadding=e,exports.calcNumElementsPerPage=s,exports.calcNumPages=r,exports.calcSliceWidth=o,exports.calcViewerWidth=a,exports.calcXDistanceBetween2Elements=t,exports.default=d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calc.utils.js"),t=({
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calc.utils.js"),t=({centerMode:t,contentContainer:n,extraPadding:i,numElementsPerPage:r,viewerContainer:l})=>{const o=e.default.calcSliceWidth({centerMode:t,contentContainer:n,extraPadding:i,numElementsPerPage:r,viewerContainer:l});for(let e=0;e<n.childNodes.length;e++){const t=n.childNodes[e];t instanceof HTMLElement&&(t.style.width=`${o}px`)}},n=({contentContainer:e,firstIndexInView:t,lastIndexInView:n})=>{for(let i=0;i<e.children.length;i++)i<t||i>n?e.children[i].setAttribute("inert",""):e.children[i].removeAttribute("inert")},i=({contentContainer:t,extraPadding:n,firstIndexInView:i,lastIndexInView:r,viewerContainer:l})=>{const o=e.default.calcViewerWidth({contentContainer:t,extraPadding:n,firstIndexInView:i,lastIndexInView:r,viewerContainer:l});l.style.width=o},r=({contentContainer:e,firstIndexInView:t,lastIndexInView:n,numElementsPerPage:i})=>{if(i%2!=0){const i=t+(n-t)/2;e.children[i].setAttribute("data-highlighted","true")}},l=({contentContainer:e})=>{for(let t=0;t<e.children.length;t++)e.children[t].removeAttribute("data-highlighted")},o=({circular:e,contentContainer:t,elementsLength:n,numElementsPerPage:i})=>{if(t.children.length>n){const e=(t.children.length-n)/2;for(let n=0;n<e;n++)t.firstElementChild&&t.removeChild(t.firstElementChild),t.lastElementChild&&t.removeChild(t.lastElementChild)}if(e&&n>i){const e=[],n=[],r=t.children.length,l=i+1;for(let i=0;i<l;i++){const l=t.children[i];l&&e.push(l.cloneNode(!0));const o=t.children[r-1-i];o&&n.push(o.cloneNode(!0))}e.forEach(e=>t.appendChild(e)),n.forEach(e=>t.insertBefore(e,t.firstChild))}},a={center:"center",left:"flex-start",right:"flex-end"},d=({allowModifySliceWidth:e,contentContainer:t,onePageAlign:n,rootContainer:i})=>{e?t.style.justifyContent=a[n]:i.style.justifyContent=a[n]},s=({contentContainer:t,currentPage:n,elementsLength:i,extraPadding:r,numElementsPerPage:l,numPages:o})=>{const a=n===o;if(a||-1===n){const n=a?l+1:i+1;let d=e.default.calcXDistanceBetween2Elements(t.firstChild,t.children[n]);return d-=r,t.style.left=-d+"px",{newPage:a?0:o-1}}return{newPage:n}},c={alignOnePageCarousel:d,applyCenterMode:r,deleteCenterMode:l,manageCircularClones:o,udpateCarouselPositionOnEdge:s,updateContentElementsAriaVisibility:n,updateSlicesWidth:t,updateViewerWidth:i};exports.alignOnePageCarousel=d,exports.applyCenterMode=r,exports.default=c,exports.deleteCenterMode=l,exports.manageCircularClones=o,exports.udpateCarouselPositionOnEdge=s,exports.updateContentElementsAriaVisibility=n,exports.updateSlicesWidth=t,exports.updateViewerWidth=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@floating-ui/dom"),t=require("../../utils/placement.utils.js");exports.calculateMainAxisOffset=({arrowSize:e,hasArrow:t,offsetDistance:i})=>"number"==typeof i?.[0]?i[0]:t?e:0,exports.getMiddlewareStack=({arrowElement:i,customMiddlewares:s,edgePadding:r,hideWhenDetached:a,isBodyAnchor:n,mainAxisOffset:d,offsetDistance:o,placement:h})=>{let c=[];return c=s?.length?[...s]:n?((i,s)=>{const r=t.getPlacementDirection(i),a=[];return"center"===r?a.push(e.shift({crossAxis:!0,mainAxis:!0,padding:s})):r.startsWith("right")||r.startsWith("left")?a.push(e.offset({alignmentAxis:0,mainAxis:0})):(r.startsWith("bottom")||r.startsWith("top"))&&a.push(e.offset({mainAxis:0})),a})(h,r):((t,i,s)=>{const r=[];return r.push(e.offset({crossAxis:i?.[1]||0,mainAxis:t})),r.push(e.flip({fallbackAxisSideDirection:"start",padding:s})),r.push(e.shift({padding:s})),r})(d,o,r),(({
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@floating-ui/dom"),t=require("../../utils/placement.utils.js");exports.calculateMainAxisOffset=({arrowSize:e,hasArrow:t,offsetDistance:i})=>"number"==typeof i?.[0]?i[0]:t?e:0,exports.getMiddlewareStack=({arrowElement:i,customMiddlewares:s,edgePadding:r,hideWhenDetached:a,isBodyAnchor:n,mainAxisOffset:d,offsetDistance:o,placement:h})=>{let c=[];return c=s?.length?[...s]:n?((i,s)=>{const r=t.getPlacementDirection(i),a=[];return"center"===r?a.push(e.shift({crossAxis:!0,mainAxis:!0,padding:s})):r.startsWith("right")||r.startsWith("left")?a.push(e.offset({alignmentAxis:0,mainAxis:0})):(r.startsWith("bottom")||r.startsWith("top"))&&a.push(e.offset({mainAxis:0})),a})(h,r):((t,i,s)=>{const r=[];return r.push(e.offset({crossAxis:i?.[1]||0,mainAxis:t})),r.push(e.flip({fallbackAxisSideDirection:"start",padding:s})),r.push(e.shift({padding:s})),r})(d,o,r),(({arrowElement:t,edgePadding:i,hideWhenDetached:s,isBodyAnchor:r,middlewareStack:a})=>{!r&&s&&a.push(e.hide()),t&&a.push(e.arrow({element:t,padding:i}))})({arrowElement:i,edgePadding:r,hideWhenDetached:a,isBodyAnchor:n,middlewareStack:c}),c};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../../lib/hooks/syncRefs/syncRefs.js"),l=require("../../../lib/hooks/useScrollBlock/useScrollBlock.js"),n=require("../../../lib/hooks/useSwipeDown/utils/convertDurationToNumber.js"),o=require("../../../lib/utils/focusHandlers/focusHandlers.js");exports.usePopoverLifecycle=({animationExitDuration:s=200,disableAnimations:t,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../../lib/hooks/syncRefs/syncRefs.js"),l=require("../../../lib/hooks/useScrollBlock/useScrollBlock.js"),n=require("../../../lib/hooks/useSwipeDown/utils/convertDurationToNumber.js"),o=require("../../../lib/utils/focusHandlers/focusHandlers.js");exports.usePopoverLifecycle=({animationExitDuration:s=200,disableAnimations:t,disableAutoFocusFirstDescendant:u=!1,disableAutoFocusFirstDescendantAfterClose:c=!0,disableRestoreFocusAfterClose:i=!1,disableScrollBackground:a=!1,open:f=!1,popoverContainerRef:d,preventScrollOnCloseFocus:b=!1})=>{const m=e.useRef(null),S=e.useRef(!1),k=e.useRef(null),p=e.useRef(null),[R,v]=e.useState(f),[C,w]=e.useState(!1),F=n.convertDurationToNumber(s),{allowScroll:D,blockScroll:y}=l.useScrollBlock(),A=e.useCallback(()=>{!u&&m.current&&o.focusFirstDescendant({element:m.current,preventScroll:!0})},[u]),T=e.useCallback(()=>{i?c||o.focusFirstDescendant({element:document.body}):p.current?.focus({preventScroll:b})},[i,b,c]);e.useEffect(()=>{f&&(p.current=document.activeElement,v(!0),w(!1))},[f]),e.useEffect(()=>(!f&&R&&(t?(T(),v(!1),w(!1)):(w(!0),k.current=window.setTimeout(()=>{T(),v(!1),w(!1)},F))),()=>{null!==k.current&&(window.clearTimeout(k.current),k.current=null)}),[f,R,t,F,T]);const j=e.useCallback(e=>{m.current=e,A(),a&&!S.current&&(S.current=!0,y({elementsToOmit:[m.current]}))},[y,A,a]),q=e.useCallback(()=>{S.current&&D(),m.current=null},[D]);return{handleInnerRef:e.useCallback(e=>{e?j(e):q(),r.syncInnerAndForwardedRef({forwardedRef:d,innerRef:m})},[d,q,j]),isClosing:C,isVisible:R,popoverRef:m}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@floating-ui/dom"),t=require("react"),r=require("./positioning/arrowPositionStyles.js"),n=require("./positioning/middlewareUtils.js"),i=require("./positioning/positionCalculation.js"),a=require("./positioning/positionStyles.js");exports.usePopoverPositioning=({anchorElement:s,arrowStyles:o,isVisible:c,middlewareOptions:d={},middlewares:l=[],placement:u,ref:m,strategy:f})=>{const{edgePadding:p=0,hideWhenDetached:g,offsetDistance:w}=d,y=t.useRef(document.body),h=t.useRef(null),b=t.useRef({anchorElement:s,arrowStyles:o,isVisible:c,middlewareOptions:{edgePadding:p,hideWhenDetached:g,offsetDistance:w},middlewares:l,placement:u,ref:m,strategy:f});t.useEffect(()=>{b.current={anchorElement:s,arrowStyles:o,isVisible:c,middlewareOptions:{edgePadding:p,hideWhenDetached:g,offsetDistance:w},middlewares:l,placement:u,ref:m,strategy:f}},[s,u,w,p,g,l,f,c,m,o]);const S=t.useCallback(()=>m?.current&&c&&o?(h.current=m.current.querySelector('[data-kbt-id="popover-arrow"]'),h.current):null,[m,c,o]);t.useEffect(()=>{const e=()=>{!S()&&c&&o&&m?.current&&requestAnimationFrame(e)};e()},[S,c,o]);const P=t.useCallback((e,t)=>e&&t?.current&&document.body.contains(t.current),[]),k=t.useCallback((e,t,n,i,s,c,d,l,u,m,f,p,g,w=[],y=[])=>{e?.current&&(a.applyPositionStyles({edgePadding:d,hasCustomMiddlewares:w.length>0,isBodyAnchor:t,middlewareStack:y,placement:n,ref:e,strategy:c,x:i,y:s}),t||e.current.setAttribute("data-kbt-placement",m),r.positionArrow(!!o,l,u,m,f,p),g?.())},[o]),D=t.useCallback((e,t,r,i,a,s,c)=>{const d=n.calculateMainAxisOffset({arrowSize:t,hasArrow:!!o,offsetDistance:e}),l=h.current;return{arrowElement:l,middlewareStack:n.getMiddlewareStack({arrowElement:l,customMiddlewares:s,edgePadding:i,hideWhenDetached:c?.hideWhenDetached,isBodyAnchor:r,mainAxisOffset:d,offsetDistance:e,placement:a})}},[o]),E=t.useCallback((e,t,r,n,i,a,s,o,c,d,l,u,m,f=[],p=[])=>{const g=t.hide?.referenceHidden||t.hide?.escaped;e.current&&(e.current.style.opacity=g?"0":"",e.current.style.pointerEvents=g?"none":""),g||k(e,r,n,i,a,s,o,c,t,d,l,u,m,f,p)},[k]),C=t.useCallback(async()=>{const{anchorElement:t,arrowStyles:r,middlewareOptions:n,middlewares:a,onPositioned:s,placement:o,ref:c,strategy:d}=b.current,l=n?.offsetDistance,u=n?.edgePadding??8,m=r?.size||0,f=t||y.current;if(!c?.current||!P(f,c))return;const p=f===document.body,{arrowElement:g,middlewareStack:w}=D(l,m,p,u,o,a,n||{}),{actualPlacement:h,autoStrategy:S}=i.determinePositioningConfig(p,d,o),k="center"===h?"top":h,C=await e.computePosition(f,c.current,{middleware:w,placement:k,strategy:S}),{middlewareData:q,placement:A,x:O,y:x}=C;E(c,q,p,h,O,x,d,u,g,A,l,m,s,a,w)},[]);t.useEffect(()=>{if(!c||!m?.current)return;m.current.offsetHeight,C();const t=s??y.current;let r=()=>{};return r=e.autoUpdate(t,m.current,C,{ancestorResize:!0,ancestorScroll:!0,animationFrame:!1,elementResize:!0}),()=>{r()}},[c,s,C])};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),o=require("../../lib/hooks/useClassName/useClassName.js"),r=require("../../lib/hooks/useTrapFocus/useTrapFocus.js"),i=require("./hooks/usePopoverInteractions.js"),l=require("./hooks/usePopoverLifecycle.js"),a=require("./hooks/usePopoverPositioning.js"),n=require("./popoverStandAlone.js"),t=s.forwardRef(({additionalClasses:s,anchorElement:t,animationExitDuration:u=200,disableAnimations:c=!1,disableAutoFocusFirstDescendant:p=!1,disableAutoFocusFirstDescendantAfterClose:d=!0,disableClickOverlayClose:C=!1,disableEscapeClose:b=!1,disableRestoreFocusAfterClose:m=!1,disableScrollBackground:v=!1,disableTrapFocus:f=!1,middlewareOptions:F,middlewares:A,onClose:P,open:O=!1,preventCloseOnClickElements:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),o=require("../../lib/hooks/useClassName/useClassName.js"),r=require("../../lib/hooks/useTrapFocus/useTrapFocus.js"),i=require("./hooks/usePopoverInteractions.js"),l=require("./hooks/usePopoverLifecycle.js"),a=require("./hooks/usePopoverPositioning.js"),n=require("./popoverStandAlone.js"),t=s.forwardRef(({additionalClasses:s,anchorElement:t,animationExitDuration:u=200,disableAnimations:c=!1,disableAutoFocusFirstDescendant:p=!1,disableAutoFocusFirstDescendantAfterClose:d=!0,disableClickOverlayClose:C=!1,disableEscapeClose:b=!1,disableRestoreFocusAfterClose:m=!1,disableScrollBackground:v=!1,disableTrapFocus:f=!1,middlewareOptions:F,middlewares:A,onClose:P,open:O=!1,popoverContainerRef:g,preventCloseOnClickElements:j=[],preventScrollOnCloseFocus:k=!1,strategy:y="absolute",...E},R)=>{const S=c||!!t,h=o.useClassName({additionalClassNames:s,component:"POPOVER"}),{handleInnerRef:q,isClosing:w,isVisible:x,popoverRef:D}=l.usePopoverLifecycle({animationExitDuration:u,disableAnimations:S,disableAutoFocusFirstDescendant:p,disableAutoFocusFirstDescendantAfterClose:d,disableRestoreFocusAfterClose:m,disableScrollBackground:v,open:O,popoverContainerRef:g,preventScrollOnCloseFocus:k});return r.useTrapFocus({ref:D,trapFocus:!f&&x}),i.usePopoverInteractions({disableClickOverlayClose:C,disableEscapeClose:b,isVisible:x,onClose:P,popoverRef:D,preventCloseOnClickElements:j}),a.usePopoverPositioning({anchorElement:t,arrowStyles:E.arrowStyles,isVisible:x,middlewareOptions:F,middlewares:A,placement:E.placement,ref:D,strategy:y}),e.jsxRuntimeExports.jsx(n.PopoverStandAlone,{ref:R,...E,anchorElement:!!t,cssClasses:h,disableAnimations:S,isClosing:w,isVisible:x,middlewareOptions:F,popoverContainerRef:q,strategy:y})});exports.Popover=t;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.js");;/* empty css */const e=require("react"),r=require("../../lib/utils/classNames/classNames.js"),s=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),o=require("../../lib/components/customComponent/customComponent.js"),i=e.forwardRef(({align:e,children:i,color:a,component:n,cssClasses:l,cursor:c,customAttributes:u,decoration:d,disabled:m,display:x,draggable:p,filter:b,htmlFor:g,id:j,maxTruncatedLines:k,onClick:C,role:f,target:A,textSizeAdjust:h,textWrap:q,transform:w,truncate:y,weight:S,wordBreak:W,wordWrap:N,...T},v)=>{const z=s.pickCustomAttributes({...T,...u}),B=r.classNames("kbt-text",l?.text,{"kbt-text--disabled":m??!1},{"kbt-text--truncate":y||!!k}),F={color:a,cursor:c,display:x,filter:b,fontWeight:S,textAlign:e,textDecoration:d,textTransform:w,textWrap:q,wordBreak:W,wordWrap:N
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.js");;/* empty css */const e=require("react"),r=require("../../lib/utils/classNames/classNames.js"),s=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),o=require("../../lib/components/customComponent/customComponent.js"),i=e.forwardRef(({align:e,children:i,color:a,component:n,cssClasses:l,cursor:c,customAttributes:u,decoration:d,disabled:m,display:x,draggable:p,filter:b,htmlFor:g,id:j,maxTruncatedLines:k,onClick:C,role:f,target:A,textSizeAdjust:h,textWrap:q,transform:w,truncate:y,weight:S,wordBreak:W,wordWrap:N,...T},v)=>{const z=s.pickCustomAttributes({...T,...u}),B=r.classNames("kbt-text",l?.text,{"kbt-text--disabled":m??!1},{"kbt-text--truncate":y||!!k}),F={color:a,cursor:c,display:x,filter:b,fontWeight:S,textAlign:e,textDecoration:d,textSizeAdjust:h,textTransform:w,textWrap:q,wordBreak:W,wordWrap:N};return t.jsxRuntimeExports.jsx(o.CustomComponent,{ref:v,className:B,component:n,"data-testid":"text",draggable:p,htmlFor:g,id:j,role:f,style:F,target:A,onClick:C,...z,children:i})});exports.TextStandAlone=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@floating-ui/dom"),t=require("react"),o=require("../../../lib/hooks/useClassName/useClassName.js"),r=require("../../../lib/hooks/useClickOutside/useClickOutside.js"),s=require("../../../lib/hooks/useEscPressed/useEscPressed.js"),i=require("../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js"),l=require("../../../lib/types/breakpoints/breakpoints.js"),n=require("../../../lib/types/positions/positions.js"),a=require("../../../lib/utils/focusHandlers/focusHandlers.js"),u=require("../positioning/computePosition.js");exports.useTooltip=({align:c=n.POSITIONS.TOP,...p})=>{const{device:d,isDesktop:f,isTablet:O}=i.useActiveBreakpoints(),m=f||O,b=t.useRef(null),P=t.useRef(!0),y=t.useRef(!1),[T,E]=t.useState(!1),[R,S]=t.useState(c),v=o.useClassName({additionalClassNames:p.additionalClasses,component:"TOOLTIP",variant:p.variant}),g=async()=>{if(!p.labelRef.current||!p.tooltipRef.current)return;const t=p.tooltipRef.current.lastElementChild;try{const o=await u.computePosition(p.labelRef.current,p.tooltipRef.current,{middleware:[e.flip(),e.shift({padding:4}),e.arrow({element:t})],placement:c,strategy:"absolute"}),{middlewareData:r,placement:s,x:i,y:a}=o;S(s),Object.assign(p.tooltipRef.current.style,{left:`${i}px`,top:`${a}px`});const{x:d,y:f}=r.arrow,O={bottom:n.POSITIONS.TOP,left:n.POSITIONS.RIGHT,right:n.POSITIONS.LEFT,top:n.POSITIONS.BOTTOM}[R.split("-")[0]],m={bottom:"",left:null!==d?`${d}px`:"",right:"",[O]:`calc(${v.tooltipexternalcontainer?.[l.DEVICE_BREAKPOINTS.DESKTOP]?.padding??0} - ${v.arrowposition?.[l.DEVICE_BREAKPOINTS.DESKTOP]?.top??"0px"} / 2)`,top:null!==f?`${f}px`:""};t&&t.style&&(t.style.removeProperty("left"),t.style.removeProperty("top"),t.style.removeProperty("right"),t.style.removeProperty("bottom"),Object.assign(t?.style,m))}catch(o){}},w=e=>{p.tooltipRef.current?.contains(e.target)||g()};t.useEffect(()=>{const e=()=>{g()};return window.addEventListener("scroll",w,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",w,!0),window.removeEventListener("resize",e)}},[]);const C=t.useCallback(()=>{if(y.current){if(y.current=!1,P.current=!1,p.tooltipAsModal&&b.current?.focus({preventScroll:!0}),P.current=!0,m){if(!p.tooltipRef.current)return;p.tooltipRef.current.style.display="none"}E(!1),p.onOpenClose?.(!1)}},[d,p.onOpenClose,p.tooltipAsModal]),I=t.useCallback(e=>{y.current&&(e.stopPropagation(),C())},[C]);return s.useEscPressed({disableStopPropagation:!0,onEscPress:I,ref:p.labelRef}),r.useClickOutside(p.tooltipRef,C,[p.labelRef.current]),{allowFocusOpenTooltip:P,hideTooltip:C,open:T,placement:R,showTooltip:()=>{if(!y.current){if(y.current=!0,b.current=document.activeElement,m){if(!p.tooltipRef.current)return;p.tooltipRef.current.style.display="flex",g(),a.focusElementOrFirstDescendant(p.tooltipRef.current,{preventScroll:!0})}E(!0),p.onOpenClose?.(!0)}}}};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* CssThemes */
|
|
2
2
|
export const cssThemes = {
|
|
3
|
-
'kubit': { css: '/Users/n128691/PROJECTS/
|
|
3
|
+
'kubit': { css: '/Users/n128691/PROJECTS/OPEN_SOURCE/kubit-react-components/src/lib/designSystem/kubit/css/kubit.css', foreign: { before: [], after: [], }, },
|
|
4
4
|
}
|
|
5
5
|
/* CssThemes */
|
|
6
6
|
|