react-bootstrap-plugins 1.0.3 → 1.0.5
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 +32 -265
- package/dist/DatePicker.cjs +1 -1
- package/dist/DatePicker.js +1 -1
- package/dist/Label.cjs +1 -1
- package/dist/Label.js +1 -1
- package/dist/SearchSelect.cjs +1 -1
- package/dist/SearchSelect.d.ts +5 -2
- package/dist/SearchSelect.js +1 -1
- package/dist/TableLoading.cjs +2 -0
- package/dist/TableLoading.cjs.map +1 -0
- package/dist/TableLoading.d.ts +13 -0
- package/dist/TableLoading.js +2 -0
- package/dist/TableLoading.js.map +1 -0
- package/dist/chunk-2JC4VIKL.cjs +2 -0
- package/dist/chunk-2JC4VIKL.cjs.map +1 -0
- package/dist/chunk-J4TRPVD4.cjs +2 -0
- package/dist/chunk-J4TRPVD4.cjs.map +1 -0
- package/dist/{chunk-4ISYCPRB.cjs → chunk-KZEOI42M.cjs} +2 -2
- package/dist/chunk-KZEOI42M.cjs.map +1 -0
- package/dist/chunk-MQRJBL7S.cjs +2 -0
- package/dist/chunk-MQRJBL7S.cjs.map +1 -0
- package/dist/{chunk-DIUGH74M.js → chunk-MTRPXJ3C.js} +2 -2
- package/dist/chunk-MTRPXJ3C.js.map +1 -0
- package/dist/chunk-W6UBCMKG.js +2 -0
- package/dist/chunk-W6UBCMKG.js.map +1 -0
- package/dist/chunk-WPTHY5AJ.js +2 -0
- package/dist/chunk-WPTHY5AJ.js.map +1 -0
- package/dist/chunk-XFHLZ7I3.js +2 -0
- package/dist/chunk-XFHLZ7I3.js.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1 -1
- package/docs/DATEPICKER.md +157 -0
- package/docs/LABEL.md +89 -0
- package/docs/SEARCHSELECT.md +123 -0
- package/docs/TABLELOADING.md +98 -0
- package/package.json +18 -3
- package/src/components/DatePicker.jsx +1 -0
- package/src/components/Label.jsx +1 -0
- package/src/components/SearchSelect.d.ts +5 -2
- package/src/components/SearchSelect.jsx +5 -2
- package/src/components/TableLoading.d.ts +13 -0
- package/src/components/TableLoading.jsx +43 -0
- package/src/index.js +2 -1
- package/dist/chunk-4ISYCPRB.cjs.map +0 -1
- package/dist/chunk-CZV7QBHA.cjs +0 -2
- package/dist/chunk-CZV7QBHA.cjs.map +0 -1
- package/dist/chunk-DIUGH74M.js.map +0 -1
- package/dist/chunk-F3KMQZXU.js +0 -2
- package/dist/chunk-F3KMQZXU.js.map +0 -1
- package/dist/chunk-HBS6VOGV.cjs +0 -2
- package/dist/chunk-HBS6VOGV.cjs.map +0 -1
- package/dist/chunk-NOGRIWSU.js +0 -2
- package/dist/chunk-NOGRIWSU.js.map +0 -1
package/README.md
CHANGED
|
@@ -6,6 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
+
## Components
|
|
10
|
+
|
|
11
|
+
| Component | Guide | Description |
|
|
12
|
+
|---|---|---|
|
|
13
|
+
| **DatePicker** | [DATEPICKER.md](./docs/DATEPICKER.md) | Date, time, and datetime picker with popover calendar |
|
|
14
|
+
| **SearchSelect** | [SEARCHSELECT.md](./docs/SEARCHSELECT.md) | Filterable, searchable select dropdown |
|
|
15
|
+
| **Label** | [LABEL.md](./docs/LABEL.md) | Bootstrap-styled form label with required indicator |
|
|
16
|
+
| **TableLoading** | [TABLELOADING.md](./docs/TABLELOADING.md) | Bootstrap 5 placeholder loading skeleton for table `<tbody>` |
|
|
17
|
+
|
|
18
|
+
Each component guide includes full prop tables, usage examples, import patterns, and dark mode behavior.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
9
22
|
## Features
|
|
10
23
|
|
|
11
24
|
- 🎯 **Zero runtime dependencies** — only React and React DOM as peer dependencies
|
|
@@ -16,6 +29,8 @@
|
|
|
16
29
|
- ♿ **Accessible** — ARIA attributes, keyboard navigation, screen-reader friendly
|
|
17
30
|
- 📱 **Responsive** — mobile-optimized layouts for all components
|
|
18
31
|
|
|
32
|
+
---
|
|
33
|
+
|
|
19
34
|
## Installation
|
|
20
35
|
|
|
21
36
|
```bash
|
|
@@ -81,282 +96,32 @@ If your bundler reports **"Cannot find module"** or fails to resolve the CSS imp
|
|
|
81
96
|
|
|
82
97
|
---
|
|
83
98
|
|
|
84
|
-
## Components
|
|
85
|
-
|
|
86
|
-
### DatePicker
|
|
87
|
-
|
|
88
|
-
A fully-featured date, time, and datetime picker with Bootstrap styling. Popover is rendered via React Portal — no z-index stacking issues with modals or sidebars.
|
|
89
|
-
|
|
90
|
-
#### Import
|
|
91
|
-
|
|
92
|
-
```js
|
|
93
|
-
// Tree-shakeable single import (recommended)
|
|
94
|
-
import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
|
|
95
|
-
|
|
96
|
-
// Or barrel import
|
|
97
|
-
import { DatePicker } from 'react-bootstrap-plugins'
|
|
98
|
-
|
|
99
|
-
// Required CSS (import once, anywhere in your app)
|
|
100
|
-
import 'react-bootstrap-plugins/css/datepicker.css'
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
#### Basic Usage
|
|
104
|
-
|
|
105
|
-
```jsx
|
|
106
|
-
import { useState } from 'react'
|
|
107
|
-
import { DatePicker } from 'react-bootstrap-plugins'
|
|
108
|
-
import 'react-bootstrap-plugins/css/datepicker.css'
|
|
109
|
-
|
|
110
|
-
function MyForm() {
|
|
111
|
-
const [date, setDate] = useState(null)
|
|
112
|
-
|
|
113
|
-
return (
|
|
114
|
-
<DatePicker
|
|
115
|
-
value={date}
|
|
116
|
-
onChange={(e) => setDate(e.target.value)}
|
|
117
|
-
placeholderText="Pick a date"
|
|
118
|
-
/>
|
|
119
|
-
)
|
|
120
|
-
}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
#### Props
|
|
124
|
-
|
|
125
|
-
| Prop | Type | Default | Description |
|
|
126
|
-
|---|---|---|---|
|
|
127
|
-
| `mode` | `'date'` \| `'time'` \| `'datetime'` | `'date'` | Picker mode |
|
|
128
|
-
| `value` | `Date` \| `string` \| `null` | — | Currently selected value |
|
|
129
|
-
| `selected` | `Date` \| `null` | — | Alias for `value` |
|
|
130
|
-
| `onChange` | `(e) => void` | — | Synthetic event; `e.target.value` is formatted string |
|
|
131
|
-
| `dateFormat` | `string` | — | Custom format. Tokens: `yyyy`, `MM`, `dd`, `hh`, `mm`, `aa` |
|
|
132
|
-
| `placeholderText` | `string` | Auto | Placeholder when empty |
|
|
133
|
-
| `size` | `'sm'` \| `'lg'` | — | Bootstrap input size variant |
|
|
134
|
-
| `isClearable` | `boolean` | `false` | Show clear button |
|
|
135
|
-
| `disabled` | `boolean` | `false` | Disable the input |
|
|
136
|
-
| `minDate` | `Date` | — | Earliest selectable date |
|
|
137
|
-
| `maxDate` | `Date` | — | Latest selectable date |
|
|
138
|
-
| `timeIntervals` | `number` | `5` | Minute step in time picker |
|
|
139
|
-
| `timezone` | `string` | `'Kampala'` | Timezone label |
|
|
140
|
-
| `className` | `string` | — | Additional CSS classes on the input |
|
|
141
|
-
| `id` | `string` | — | Input element ID |
|
|
142
|
-
| `name` | `string` | — | Input name attribute |
|
|
143
|
-
|
|
144
|
-
#### Examples
|
|
145
|
-
|
|
146
|
-
**Date mode (default):**
|
|
147
|
-
```jsx
|
|
148
|
-
<DatePicker
|
|
149
|
-
name="dob"
|
|
150
|
-
value={birthDate}
|
|
151
|
-
onChange={(e) => setBirthDate(e.target.value)}
|
|
152
|
-
maxDate={new Date()}
|
|
153
|
-
isClearable
|
|
154
|
-
/>
|
|
155
|
-
// e.target.value → "2026-06-29"
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
**Time mode:**
|
|
159
|
-
```jsx
|
|
160
|
-
<DatePicker
|
|
161
|
-
mode="time"
|
|
162
|
-
value={startTime}
|
|
163
|
-
onChange={(e) => setStartTime(e.target.value)}
|
|
164
|
-
timeIntervals={15}
|
|
165
|
-
/>
|
|
166
|
-
// e.target.value → "02:30 PM"
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
**Datetime mode:**
|
|
170
|
-
```jsx
|
|
171
|
-
<DatePicker
|
|
172
|
-
mode="datetime"
|
|
173
|
-
value={appointmentDateTime}
|
|
174
|
-
onChange={(e) => setAppointmentDateTime(e.target.value)}
|
|
175
|
-
dateFormat="dd/MM/yyyy hh:mm aa"
|
|
176
|
-
/>
|
|
177
|
-
// e.target.value → "29/06/2026 02:30 PM"
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
**With Bootstrap form layout:**
|
|
181
|
-
```jsx
|
|
182
|
-
<div className="mb-3">
|
|
183
|
-
<label htmlFor="eventDate" className="form-label">Event Date</label>
|
|
184
|
-
<DatePicker
|
|
185
|
-
id="eventDate"
|
|
186
|
-
name="eventDate"
|
|
187
|
-
value={eventDate}
|
|
188
|
-
onChange={(e) => setEventDate(e.target.value)}
|
|
189
|
-
minDate={new Date()}
|
|
190
|
-
className="form-control-lg"
|
|
191
|
-
/>
|
|
192
|
-
</div>
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
---
|
|
196
|
-
|
|
197
|
-
### SearchSelect
|
|
198
|
-
|
|
199
|
-
A filterable, searchable select dropdown. Supports both primitive arrays and object arrays with configurable label/value keys.
|
|
200
|
-
|
|
201
|
-
#### Import
|
|
202
|
-
|
|
203
|
-
```js
|
|
204
|
-
import SearchSelect from 'react-bootstrap-plugins/SearchSelect'
|
|
205
|
-
// or
|
|
206
|
-
import { SearchSelect } from 'react-bootstrap-plugins'
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
#### Basic Usage
|
|
210
|
-
|
|
211
|
-
**Primitive array (strings/numbers):**
|
|
212
|
-
```jsx
|
|
213
|
-
import { useState } from 'react'
|
|
214
|
-
import { SearchSelect } from 'react-bootstrap-plugins'
|
|
215
|
-
|
|
216
|
-
function FruitPicker() {
|
|
217
|
-
const [fruit, setFruit] = useState('')
|
|
218
|
-
|
|
219
|
-
return (
|
|
220
|
-
<SearchSelect
|
|
221
|
-
options={['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']}
|
|
222
|
-
placeholder="Choose a fruit..."
|
|
223
|
-
value={fruit}
|
|
224
|
-
onChange={(val) => setFruit(val)}
|
|
225
|
-
/>
|
|
226
|
-
)
|
|
227
|
-
}
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
**Object array with label/value mapping:**
|
|
231
|
-
```jsx
|
|
232
|
-
function UserPicker() {
|
|
233
|
-
const [userId, setUserId] = useState(null)
|
|
234
|
-
|
|
235
|
-
const users = [
|
|
236
|
-
{ id: 101, fullName: 'Alice Johnson', email: 'alice@example.com' },
|
|
237
|
-
{ id: 102, fullName: 'Bob Smith', email: 'bob@example.com' },
|
|
238
|
-
{ id: 103, fullName: 'Charlie Brown', email: 'charlie@example.com' },
|
|
239
|
-
]
|
|
240
|
-
|
|
241
|
-
return (
|
|
242
|
-
<SearchSelect
|
|
243
|
-
options={users}
|
|
244
|
-
labelKey="fullName"
|
|
245
|
-
valueKey="id"
|
|
246
|
-
placeholder="Select a user..."
|
|
247
|
-
value={userId}
|
|
248
|
-
onChange={(id) => setUserId(id)}
|
|
249
|
-
/>
|
|
250
|
-
)
|
|
251
|
-
}
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
#### Props
|
|
255
|
-
|
|
256
|
-
| Prop | Type | Default | Description |
|
|
257
|
-
|---|---|---|---|
|
|
258
|
-
| `options` | `Array<string\|number\|boolean\|object>` | `[]` | Selectable options |
|
|
259
|
-
| `labelKey` | `string` | `'label'` | Key for display text (object options only) |
|
|
260
|
-
| `valueKey` | `string` | `'value'` | Key for the value (object options only) |
|
|
261
|
-
| `placeholder` | `string` | `'Select...'` | Placeholder text |
|
|
262
|
-
| `value` | `any` | `null` | Currently selected value |
|
|
263
|
-
| `onChange` | `(value: any) => void` | — | Called with selected value |
|
|
264
|
-
| `id` | `string` | `'filterable-select'` | Input element ID |
|
|
265
|
-
| `disabled` | `boolean` | `false` | Disable the input |
|
|
266
|
-
| `className` | `string` | — | Additional CSS classes on wrapper |
|
|
267
|
-
|
|
268
|
-
#### Inside Bootstrap Input Groups
|
|
269
|
-
|
|
270
|
-
```jsx
|
|
271
|
-
<div className="input-group mb-3">
|
|
272
|
-
<span className="input-group-text">Subject</span>
|
|
273
|
-
<SearchSelect
|
|
274
|
-
options={subjects}
|
|
275
|
-
labelKey="name"
|
|
276
|
-
valueKey="id"
|
|
277
|
-
placeholder="Search subject..."
|
|
278
|
-
value={subjectId}
|
|
279
|
-
onChange={setSubjectId}
|
|
280
|
-
/>
|
|
281
|
-
</div>
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
---
|
|
285
|
-
|
|
286
|
-
### Label
|
|
287
|
-
|
|
288
|
-
A simple form label with a Bootstrap-styled required field indicator.
|
|
289
|
-
|
|
290
|
-
#### Import
|
|
291
|
-
|
|
292
|
-
```js
|
|
293
|
-
import { Label } from 'react-bootstrap-plugins/Label'
|
|
294
|
-
// or
|
|
295
|
-
import { Label } from 'react-bootstrap-plugins'
|
|
296
|
-
```
|
|
297
|
-
|
|
298
|
-
#### Basic Usage
|
|
299
|
-
|
|
300
|
-
```jsx
|
|
301
|
-
import { Label } from 'react-bootstrap-plugins'
|
|
302
|
-
|
|
303
|
-
<Label hf="studentName" label="Student Name" />
|
|
304
|
-
// Renders: <label for="studentName">Student Name <b class="text-danger">*</b></label>
|
|
305
|
-
```
|
|
306
|
-
|
|
307
|
-
#### Props
|
|
308
|
-
|
|
309
|
-
| Prop | Type | Default | Description |
|
|
310
|
-
|---|---|---|---|
|
|
311
|
-
| `hf` | `string` | `'default'` | `htmlFor` attribute — matches input `id` |
|
|
312
|
-
| `label` | `string` | `'Title'` | Label text |
|
|
313
|
-
| `required` | `boolean` | `true` | Show red asterisk |
|
|
314
|
-
| `className` | `string` | — | Additional CSS classes |
|
|
315
|
-
|
|
316
|
-
#### Examples
|
|
317
|
-
|
|
318
|
-
**With required indicator:**
|
|
319
|
-
```jsx
|
|
320
|
-
<Label hf="email" label="Email Address" required />
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
**Optional field (no asterisk):**
|
|
324
|
-
```jsx
|
|
325
|
-
<Label hf="middleName" label="Middle Name" required={false} />
|
|
326
|
-
```
|
|
327
|
-
|
|
328
|
-
**With Bootstrap grid:**
|
|
329
|
-
```jsx
|
|
330
|
-
<div className="mb-3 row">
|
|
331
|
-
<div className="col-sm-3">
|
|
332
|
-
<Label hf="phone" label="Phone Number" className="col-form-label" />
|
|
333
|
-
</div>
|
|
334
|
-
<div className="col-sm-9">
|
|
335
|
-
<input id="phone" type="tel" className="form-control" />
|
|
336
|
-
</div>
|
|
337
|
-
</div>
|
|
338
|
-
```
|
|
339
|
-
|
|
340
|
-
---
|
|
341
|
-
|
|
342
99
|
## Import Patterns
|
|
343
100
|
|
|
344
101
|
All patterns are tree-shakeable. Your bundler will only include the code you actually import.
|
|
345
102
|
|
|
346
103
|
```js
|
|
347
|
-
// Single component — smallest bundle
|
|
348
|
-
import
|
|
104
|
+
// Single component — smallest bundle (default import)
|
|
105
|
+
import DatePicker from 'react-bootstrap-plugins/DatePicker'
|
|
106
|
+
import SearchSelect from 'react-bootstrap-plugins/SearchSelect'
|
|
107
|
+
import Label from 'react-bootstrap-plugins/Label'
|
|
108
|
+
import TableLoading from 'react-bootstrap-plugins/TableLoading'
|
|
349
109
|
|
|
350
|
-
//
|
|
351
|
-
import { DatePicker
|
|
110
|
+
// Single component — named import
|
|
111
|
+
import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
|
|
112
|
+
import { SearchSelect } from 'react-bootstrap-plugins/SearchSelect'
|
|
113
|
+
import { Label } from 'react-bootstrap-plugins/Label'
|
|
114
|
+
import { TableLoading } from 'react-bootstrap-plugins/TableLoading'
|
|
352
115
|
|
|
353
|
-
//
|
|
354
|
-
import { DatePicker, SearchSelect, Label } from 'react-bootstrap-plugins'
|
|
116
|
+
// Multiple named — barrel, tree-shaken
|
|
117
|
+
import { DatePicker, SearchSelect, Label, TableLoading } from 'react-bootstrap-plugins'
|
|
355
118
|
|
|
356
119
|
// CSS (required for DatePicker)
|
|
357
120
|
import 'react-bootstrap-plugins/css/datepicker.css'
|
|
358
121
|
```
|
|
359
122
|
|
|
123
|
+
Every component supports **both** default and named imports — use whichever fits your codebase conventions.
|
|
124
|
+
|
|
360
125
|
---
|
|
361
126
|
|
|
362
127
|
## Dark Mode
|
|
@@ -392,7 +157,8 @@ function App() {
|
|
|
392
157
|
| `DatePicker` (with CSS) | ~5.5 KB |
|
|
393
158
|
| `SearchSelect` | ~1.2 KB |
|
|
394
159
|
| `Label` | ~0.3 KB |
|
|
395
|
-
|
|
|
160
|
+
| `TableLoading` | ~0.2 KB |
|
|
161
|
+
| All four (barrel) | ~6.7 KB |
|
|
396
162
|
|
|
397
163
|
Measured with ESM, tree-shaken, minified, gzipped. Your actual size depends on your bundler configuration.
|
|
398
164
|
|
|
@@ -446,6 +212,7 @@ src/
|
|
|
446
212
|
│ ├── DatePicker.jsx Date/time/datetime picker
|
|
447
213
|
│ ├── SearchSelect.jsx Searchable select dropdown
|
|
448
214
|
│ ├── Label.jsx Form label
|
|
215
|
+
│ ├── TableLoading.jsx Table placeholder skeleton
|
|
449
216
|
│ └── *.d.ts TypeScript declarations
|
|
450
217
|
└── css/
|
|
451
218
|
└── datepicker.css
|
package/dist/DatePicker.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var chunkKZEOI42M_cjs=require('./chunk-KZEOI42M.cjs');require('./chunk-QQNPKA7A.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunkKZEOI42M_cjs.a}});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return chunkKZEOI42M_cjs.b}});//# sourceMappingURL=DatePicker.cjs.map
|
|
2
2
|
//# sourceMappingURL=DatePicker.cjs.map
|
package/dist/DatePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{a as DatePicker}from'./chunk-
|
|
1
|
+
export{a as DatePicker,b as default}from'./chunk-MTRPXJ3C.js';import'./chunk-46AJ2Q5H.js';//# sourceMappingURL=DatePicker.js.map
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
package/dist/Label.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var chunk2JC4VIKL_cjs=require('./chunk-2JC4VIKL.cjs');Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunk2JC4VIKL_cjs.a}});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return chunk2JC4VIKL_cjs.b}});//# sourceMappingURL=Label.cjs.map
|
|
2
2
|
//# sourceMappingURL=Label.cjs.map
|
package/dist/Label.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{a as Label}from'./chunk-
|
|
1
|
+
export{a as Label,b as default}from'./chunk-W6UBCMKG.js';//# sourceMappingURL=Label.js.map
|
|
2
2
|
//# sourceMappingURL=Label.js.map
|
package/dist/SearchSelect.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var chunkMQRJBL7S_cjs=require('./chunk-MQRJBL7S.cjs');require('./chunk-QQNPKA7A.cjs');Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkMQRJBL7S_cjs.a}});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return chunkMQRJBL7S_cjs.b}});//# sourceMappingURL=SearchSelect.cjs.map
|
|
2
2
|
//# sourceMappingURL=SearchSelect.cjs.map
|
package/dist/SearchSelect.d.ts
CHANGED
|
@@ -13,10 +13,12 @@ export interface SearchSelectProps<T = any> {
|
|
|
13
13
|
placeholder?: string
|
|
14
14
|
/** Currently selected value */
|
|
15
15
|
value?: any
|
|
16
|
-
/** Called with the selected value
|
|
17
|
-
onChange?: (value: any) => void
|
|
16
|
+
/** Called with synthetic event; e.target.value is the selected value, e.target.name is the input name */
|
|
17
|
+
onChange?: (e: { target: { value: any; name: string } }) => void
|
|
18
18
|
/** Input element ID */
|
|
19
19
|
id?: string
|
|
20
|
+
/** Input name attribute — surfaces as e.target.name in onChange */
|
|
21
|
+
name?: string
|
|
20
22
|
/** Disable the input */
|
|
21
23
|
disabled?: boolean
|
|
22
24
|
}
|
|
@@ -26,3 +28,4 @@ declare const SearchSelect: React.ForwardRefExoticComponent<
|
|
|
26
28
|
>
|
|
27
29
|
|
|
28
30
|
export default SearchSelect
|
|
31
|
+
export { SearchSelect }
|
package/dist/SearchSelect.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{a as default}from'./chunk-
|
|
1
|
+
export{a as SearchSelect,b as default}from'./chunk-XFHLZ7I3.js';import'./chunk-46AJ2Q5H.js';//# sourceMappingURL=SearchSelect.js.map
|
|
2
2
|
//# sourceMappingURL=SearchSelect.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var chunkJ4TRPVD4_cjs=require('./chunk-J4TRPVD4.cjs');Object.defineProperty(exports,"TableLoading",{enumerable:true,get:function(){return chunkJ4TRPVD4_cjs.a}});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return chunkJ4TRPVD4_cjs.b}});//# sourceMappingURL=TableLoading.cjs.map
|
|
2
|
+
//# sourceMappingURL=TableLoading.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"TableLoading.cjs"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
|
|
3
|
+
export interface TableLoadingProps {
|
|
4
|
+
/** Number of placeholder rows to render (default 5) */
|
|
5
|
+
rows?: number
|
|
6
|
+
/** Number of placeholder columns per row (default 4) */
|
|
7
|
+
columns?: number
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
declare const TableLoading: React.FC<TableLoadingProps>
|
|
11
|
+
|
|
12
|
+
export default TableLoading
|
|
13
|
+
export { TableLoading }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"TableLoading.js"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var e=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var e__namespace=/*#__PURE__*/_interopNamespace(e);var a=e__namespace.forwardRef(({className:l,hf:t="default",required:r=true,label:o="Title"},b)=>jsxRuntime.jsxs("label",{htmlFor:t,className:l,ref:b,children:[o,r?jsxRuntime.jsx("b",{className:"text-danger",children:"*"}):""]}));a.displayName="Label";var d=a;exports.a=a;exports.b=d;//# sourceMappingURL=chunk-2JC4VIKL.cjs.map
|
|
2
|
+
//# sourceMappingURL=chunk-2JC4VIKL.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Label.jsx"],"names":["Label","e","className","hf","required","label","ref","jsxs","jsx","Label_default"],"mappings":"kbAUA,IAAMA,CAAAA,CAAcC,YAAA,CAAA,UAAA,CAAW,CAAC,CAAE,SAAA,CAAAC,CAAAA,CAAW,EAAA,CAAAC,CAAAA,CAAK,SAAA,CAAW,SAAAC,CAAAA,CAAW,IAAA,CAAM,KAAA,CAAAC,CAAAA,CAAQ,OAAQ,CAAA,CAAGC,IAE7FC,eAAAA,CAAC,OAAA,CAAA,CAAM,QAASJ,CAAAA,CAAI,SAAA,CAAWD,EAAW,GAAA,CAAKI,CAAAA,CAC5C,QAAA,CAAA,CAAAD,CAAAA,CAAOD,CAAAA,CAAWI,cAAAA,CAAC,KAAE,SAAA,CAAU,aAAA,CAAc,QAAA,CAAA,GAAA,CAAC,CAAA,CAAO,EAAA,CAAA,CACxD,CAEH,EAEDR,CAAAA,CAAM,WAAA,CAAc,OAAA,CAGpB,IAAOS,CAAAA,CAAQT","file":"chunk-2JC4VIKL.cjs","sourcesContent":["import * as React from 'react'\n\n/**\n * A simple Bootstrap-styled form label with an optional required indicator.\n *\n * @param {string} [className] - Additional CSS classes\n * @param {string} [hf='default'] - htmlFor attribute (associates label with input ID)\n * @param {boolean} [required=true] - Whether to show the required asterisk\n * @param {string} [label='Title'] - Label text content\n */\nconst Label = React.forwardRef(({ className, hf = 'default', required = true, label = 'Title' }, ref) => {\n return (\n <label htmlFor={hf} className={className} ref={ref}>\n {label}{required ? <b className=\"text-danger\">*</b> : ''}\n </label>\n )\n})\n\nLabel.displayName = 'Label'\n\nexport { Label }\nexport default Label\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';require('react');var jsxRuntime=require('react/jsx-runtime');var e=({rows:l=5,columns:o=4})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:Array.from({length:l},(p,r)=>jsxRuntime.jsx("tr",{children:Array.from({length:o},(s,t)=>jsxRuntime.jsx("td",{className:"placeholder-glow",children:jsxRuntime.jsx("span",{className:"placeholder rounded py-2 col-12",style:{height:14,display:"block"}})},t))},r))});e.displayName="TableLoading";var c=e;exports.a=e;exports.b=c;//# sourceMappingURL=chunk-J4TRPVD4.cjs.map
|
|
2
|
+
//# sourceMappingURL=chunk-J4TRPVD4.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TableLoading.jsx"],"names":["TableLoading","rows","columns","jsx","Fragment","_","c","TableLoading_default"],"mappings":"0EAsBA,IAAMA,CAAAA,CAAe,CAAC,CAAE,IAAA,CAAAC,CAAAA,CAAO,CAAA,CAAG,QAAAC,CAAAA,CAAU,CAAE,CAAA,GAC5CC,cAAAA,CAAAC,mBAAAA,CAAA,CACG,QAAA,CAAA,KAAA,CAAM,IAAA,CAAK,CAAE,MAAA,CAAQH,CAAK,CAAA,CAAG,CAACI,CAAAA,CAAG,CAAA,GAChCF,cAAAA,CAAC,IAAA,CAAA,CACE,eAAM,IAAA,CAAK,CAAE,MAAA,CAAQD,CAAQ,CAAA,CAAG,CAACG,CAAAA,CAAGC,CAAAA,GACnCH,eAAC,IAAA,CAAA,CAAW,SAAA,CAAU,kBAAA,CACpB,QAAA,CAAAA,cAAAA,CAAC,MAAA,CAAA,CACC,SAAA,CAAU,iCAAA,CACV,MAAO,CAAE,MAAA,CAAQ,EAAA,CAAI,OAAA,CAAS,OAAQ,CAAA,CACxC,CAAA,CAAA,CAJOG,CAKT,CACD,CAAA,CAAA,CARM,CAST,CACD,CAAA,CACH,EAGFN,CAAAA,CAAa,WAAA,CAAc,cAAA,KAGpBO,CAAAA,CAAQP","file":"chunk-J4TRPVD4.cjs","sourcesContent":["import * as React from 'react'\n\n/**\n * Bootstrap 5 placeholder loading rows for table `<tbody>` elements.\n * Renders a grid of shimmer placeholders matching the table column count.\n *\n * @param {number} [rows=5] - Number of placeholder rows to render\n * @param {number} [columns=4] - Number of placeholder columns per row\n *\n * @example\n * // Inside a table\n * <table className=\"table\">\n * <thead><tr><th>Name</th><th>Class</th><th>Status</th></tr></thead>\n * <tbody>\n * {loading ? (\n * <TableLoading rows={8} columns={3} />\n * ) : (\n * data.map(row => <tr key={row.id}>...</tr>)\n * )}\n * </tbody>\n * </table>\n */\nconst TableLoading = ({ rows = 5, columns = 4 }) => (\n <>\n {Array.from({ length: rows }, (_, r) => (\n <tr key={r}>\n {Array.from({ length: columns }, (_, c) => (\n <td key={c} className=\"placeholder-glow\">\n <span\n className=\"placeholder rounded py-2 col-12\"\n style={{ height: 14, display: 'block' }}\n />\n </td>\n ))}\n </tr>\n ))}\n </>\n)\n\nTableLoading.displayName = 'TableLoading'\n\nexport { TableLoading }\nexport default TableLoading\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var chunkQQNPKA7A_cjs=require('./chunk-QQNPKA7A.cjs'),i=require('react'),reactDom=require('react-dom'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var i__namespace=/*#__PURE__*/_interopNamespace(i);var Ye=["Su","Mo","Tu","We","Th","Fr","Sa"],Ce=["January","February","March","April","May","June","July","August","September","October","November","December"],Ee=Array.from({length:60},(n,t)=>t),g=12,V=(n,t)=>new Date(n,t+1,0).getDate(),ne=(n,t)=>n&&t&&n.getFullYear()===t.getFullYear()&&n.getMonth()===t.getMonth()&&n.getDate()===t.getDate(),Ae=(n,t,r)=>!(t&&n<new Date(t.getFullYear(),t.getMonth(),t.getDate())||r&&n>new Date(r.getFullYear(),r.getMonth(),r.getDate())),Ie=(n,t)=>{let r=new Date(n,t,1).getDay(),m=V(n,t),p=[],b=V(n,t-1);for(let d=r-1;d>=0;d--){let D=b-d;p.push({day:D,date:new Date(n,t-1,D),isOutside:true});}for(let d=1;d<=m;d++)p.push({day:d,date:new Date(n,t,d),isOutside:false});let y=42-p.length;for(let d=1;d<=y;d++)p.push({day:d,date:new Date(n,t+1,d),isOutside:true});return p},L=(n,t,r)=>{if(!n||isNaN(n.getTime()))return "";let m=n.getFullYear(),p=String(n.getMonth()+1).padStart(2,"0"),b=String(n.getDate()).padStart(2,"0"),y=n.getHours(),d=String(n.getMinutes()).padStart(2,"0"),D=y>=12?"PM":"AM";y=y%12||12;let k=String(y).padStart(2,"0");if(r)return r.replace("yyyy",m).replace("MM",p).replace("dd",b).replace("hh",k).replace("mm",d).replace("aa",D);switch(t){case "time":return `${k}:${d} ${D}`;case "datetime":return `${m}-${p}-${b} ${k}:${d} ${D}`;default:return `${m}-${p}-${b}`}},O=(n,t,r="date")=>({target:{value:n,name:t,type:r},preventDefault:()=>{},stopPropagation:()=>{},nativeEvent:null}),Te={date:300,time:300,datetime:400,year:250},Fe=n=>{if(!n)return document.documentElement;let t=n.parentElement;for(;t;){let r=window.getComputedStyle(t),m=r.overflowY||r.overflow;if(m==="auto"||m==="scroll")return t;t=t.parentElement;}return document.documentElement},Oe=(n,t)=>{if(!n)return {};let r=n.getBoundingClientRect(),m=t||300,p=window.innerHeight-r.bottom,b=r.top,y=p<m&&b>p,d=Math.max(r.width,window.innerWidth<576?220:260);return {position:"fixed",top:y?Math.max(4,r.top-m-4):r.bottom+4,left:Math.max(4,Math.min(r.left,window.innerWidth-d-4)),minWidth:d,maxWidth:window.innerWidth-8,zIndex:1070}},$e=i__namespace.forwardRef(({className:n,mode:t="date",selected:r,value:m,onChange:p,dateFormat:b,placeholderText:y,size:d,isClearable:D=false,disabled:k=false,minDate:q,maxDate:z,timeIntervals:We=5,timezone:_e="Kampala",id:se,name:N,...re},$)=>{let ie=e=>{if(!e)return null;if(e instanceof Date)return isNaN(e.getTime())?null:e;if(typeof e=="string"||typeof e=="number"){let a=new Date(e);if(!isNaN(a.getTime()))return a;if(typeof e=="string"){let l=e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(l){let c=parseInt(l[1],10),h=parseInt(l[2],10),_=l[3].toUpperCase();c===12&&_==="AM"&&(c=0),c!==12&&_==="PM"&&(c+=12);let X=new Date;return new Date(X.getFullYear(),X.getMonth(),X.getDate(),c,h,0,0)}let u=e.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(u){let c=parseInt(u[4],10),h=parseInt(u[5],10),_=u[6].toUpperCase();return c===12&&_==="AM"&&(c=0),c!==12&&_==="PM"&&(c+=12),new Date(parseInt(u[1]),parseInt(u[2])-1,parseInt(u[3]),c,h,0,0)}}return null}return null},o=i__namespace.useMemo(()=>ie(r??m),[r instanceof Date?r.getTime():r,m instanceof Date?m.getTime():m]),Z=t==="date"||t==="datetime",S=t==="time"||t==="datetime",[R,I]=i__namespace.useState(false),[P,K]=i__namespace.useState(()=>o?o.getFullYear():new Date().getFullYear()),[v,J]=i__namespace.useState(()=>o?o.getMonth():new Date().getMonth()),[w,x]=i__namespace.useState(o),[Y,ee]=i__namespace.useState(()=>o&&o.getHours()%12||12),[C,te]=i__namespace.useState(()=>o?o.getMinutes():0),[E,ae]=i__namespace.useState(()=>o&&o.getHours()>=12?"PM":"AM"),[U,T]=i__namespace.useState(false),[j,B]=i__namespace.useState(()=>Math.floor((o?o.getFullYear():new Date().getFullYear())/g)*g),[oe,ce]=i__namespace.useState({}),F=i__namespace.useRef(null),H=i__namespace.useRef(null),G=i__namespace.useRef(null);i__namespace.useEffect(()=>{let e=document.createElement("div");return e.className="datepicker-portal-root",document.body.appendChild(e),G.current=e,()=>{e.parentNode&&document.body.removeChild(e),G.current=null;}},[]),i__namespace.useEffect(()=>{o&&!isNaN(o.getTime())?(x(o),K(o.getFullYear()),J(o.getMonth()),ee(o.getHours()%12||12),te(o.getMinutes()),ae(o.getHours()>=12?"PM":"AM"),B(Math.floor(o.getFullYear()/g)*g)):x(null);},[o]),i__namespace.useEffect(()=>{if(!R)return;let e=()=>H.current?H.current.getBoundingClientRect().height:Te[U?"year":t]||300,a=Fe(F.current),l=()=>{requestAnimationFrame(()=>{ce(Oe(F.current,e()));});};return l(),a.addEventListener("scroll",l,{passive:true}),window.addEventListener("resize",l),()=>{a.removeEventListener("scroll",l),window.removeEventListener("resize",l);}},[R,t,U]),i__namespace.useEffect(()=>{if(!R)return;let e=a=>{H.current&&!H.current.contains(a.target)&&F.current&&!F.current.contains(a.target)&&(I(false),T(false));};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[R]);let A=(e,a,l,u)=>{let c=new Date(e),h=a%12;return u==="PM"&&(h+=12),h===12&&u==="AM"&&(h=0),c.setHours(h,l,0,0),c},W=e=>{if(!e||isNaN(e.getTime()))return;let a=L(e,t,b);p?.(O(a,N,t));},le=e=>{if(!e){p?.(O(null,N,t)),I(false),T(false);return}W(e),t==="date"&&(I(false),T(false));},de=e=>{if(x(e),t==="date")le(e);else if(t==="datetime"){let a=A(e,Y,C,E);W(a);}},ue=Ie(P,v),pe=()=>{let e=P,a=v;v===0?(e=P-1,a=11):a=v-1,K(e),J(a);let l=w||new Date,u=V(e,a),c=new Date(e,a,Math.min(l.getDate(),u));x(c),W(S?A(c,Y,C,E):c);},me=()=>{let e=P,a=v;v===11?(e=P+1,a=0):a=v+1,K(e),J(a);let l=w||new Date,u=V(e,a),c=new Date(e,a,Math.min(l.getDate(),u));x(c),W(S?A(c,Y,C,E):c);},fe=new Date,be=q?new Date(q.getFullYear(),q.getMonth(),q.getDate()):null,ge=z?new Date(z.getFullYear(),z.getMonth(),z.getDate()):null,ye=e=>{if(ee(e),S){let a=A(w||new Date,e,C,E);p?.(O(L(a,t,b),N,t));}},ve=e=>{if(te(e),S){let a=A(w||new Date,Y,e,E);p?.(O(L(a,t,b),N,t));}},we=e=>{if(ae(e),S){let a=A(w||new Date,Y,C,e);p?.(O(L(a,t,b),N,t));}},he=()=>{B(Math.floor(P/g)*g),T(true);},Me=e=>{K(e),T(false);let a=w||new Date,l=V(e,v),u=new Date(e,v,Math.min(a.getDate(),l));x(u),W(S?A(u,Y,C,E):u);},Q=Math.floor(j/g)*g,De=Array.from({length:g},(e,a)=>Q+a),ke=e=>{e.stopPropagation(),x(null),p?.(O(null,N));},Ne=e=>{e.key==="Escape"&&(I(false),T(false),F.current?.blur()),(e.key==="ArrowDown"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),I(true));},Se=i__namespace.useCallback(e=>{F.current=e,typeof $=="function"?$(e):$&&($.current=e);},[$]),Re=y??(t==="time"?"Select time":t==="datetime"?"Select date & time":"Select date"),Pe=jsxRuntime.jsxs("div",{ref:H,className:chunkQQNPKA7A_cjs.a("datepicker-popover card border shadow-sm",t==="datetime"&&"datepicker-popover--wide"),style:oe,children:[U&&Z&&jsxRuntime.jsxs("div",{className:"datepicker-year-picker p-3",children:[jsxRuntime.jsxs("div",{className:"d-flex align-items-center justify-content-between mb-2",children:[jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:()=>B(j-g),"aria-label":"Previous years",children:"\u2039"}),jsxRuntime.jsxs("span",{className:"fw-semibold small",children:[Q," \u2013 ",Q+g-1]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:()=>B(j+g),"aria-label":"Next years",children:"\u203A"})]}),jsxRuntime.jsx("div",{className:"datepicker-year-grid",children:De.map(e=>{let a=e===new Date().getFullYear(),l=w&&e===w.getFullYear();return jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-year-cell btn btn-sm",l&&"btn-primary",!l&&a&&"btn-outline-primary",!l&&!a&&"btn-light border"),onClick:()=>Me(e),children:e},e)})})]}),!U&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs("div",{className:chunkQQNPKA7A_cjs.a("d-flex",t==="datetime"?"flex-row":"flex-column"),children:[Z&&jsxRuntime.jsxs("div",{className:"datepicker-calendar p-2",children:[jsxRuntime.jsxs("div",{className:"d-flex align-items-center justify-content-between mb-2",children:[jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:pe,"aria-label":"Previous month",children:"\u2039"}),jsxRuntime.jsxs("div",{className:"d-flex align-items-center gap-1",children:[jsxRuntime.jsx("span",{className:"fw-semibold small",children:Ce[v]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-link text-decoration-none text-primary fw-semibold small p-0",onClick:he,"aria-label":"Choose year",children:P})]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:me,"aria-label":"Next month",children:"\u203A"})]}),jsxRuntime.jsx("div",{className:"datepicker-days-header",children:Ye.map(e=>jsxRuntime.jsx("div",{className:"datepicker-day-label",children:e},e))}),jsxRuntime.jsx("div",{className:"datepicker-days-grid",children:ue.map((e,a)=>{let l=ne(e.date,fe),u=w&&ne(e.date,w),c=Ae(e.date,be,ge),h=e.isOutside||!c;return jsxRuntime.jsx("button",{type:"button",disabled:h,className:chunkQQNPKA7A_cjs.a("datepicker-day",l&&"datepicker-day--today",u&&"datepicker-day--selected",e.isOutside&&"datepicker-day--outside",!c&&"datepicker-day--disabled"),onClick:()=>de(e.date),tabIndex:e.isOutside?-1:0,children:e.day},a)})})]}),t==="datetime"&&jsxRuntime.jsx("div",{className:"vr mx-1 my-2"}),S&&jsxRuntime.jsxs("div",{className:"datepicker-time p-2 d-flex flex-column",style:{minWidth:180},children:[t==="datetime"&&jsxRuntime.jsx("div",{className:"small fw-semibold text-muted text-center mb-1",children:"Time"}),jsxRuntime.jsxs("div",{className:"d-flex justify-content-center gap-2",children:[jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"Hour"}),jsxRuntime.jsx("div",{className:"datepicker-time-col-scroll",children:Array.from({length:12},(e,a)=>a+1).map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item",e===Y&&"active"),onClick:()=>ye(e),children:String(e).padStart(2,"0")},e))})]}),jsxRuntime.jsx("span",{className:"datepicker-time-separator",children:":"}),jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"Min"}),jsxRuntime.jsx("div",{className:"datepicker-time-col-scroll",children:Ee.map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item",e===C&&"active"),onClick:()=>ve(e),children:String(e).padStart(2,"0")},e))})]}),jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"\xA0"}),jsxRuntime.jsx("div",{className:"d-flex flex-column gap-1 mt-1",children:["AM","PM"].map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item","datepicker-time-item--ampm",E===e&&"active"),onClick:()=>we(e),children:e},e))})]})]})]})]})})]});return jsxRuntime.jsxs("div",{className:"position-relative d-inline-block w-100",style:{minWidth:0},children:[jsxRuntime.jsxs("div",{className:"position-relative",children:[jsxRuntime.jsx("input",{ref:Se,id:se,name:N,type:"text",readOnly:true,disabled:k,className:chunkQQNPKA7A_cjs.a("form-control",d==="sm"&&"form-control-sm",d==="lg"&&"form-control-lg","pe-5",n),placeholder:Re,value:L(o,t,b),onClick:()=>!k&&I(!R),onKeyDown:Ne,"aria-haspopup":"dialog","aria-expanded":R,autoComplete:"off",...re}),D&&o&&!k&&jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-link position-absolute top-50 end-0 translate-middle-y pe-2 text-secondary",style:{zIndex:2},onClick:ke,tabIndex:-1,"aria-label":"Clear",children:"\xD7"})]}),R&&!k&&G.current&&reactDom.createPortal(Pe,G.current)]})});$e.displayName="DatePicker";exports.a=$e;//# sourceMappingURL=chunk-4ISYCPRB.cjs.map
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
'use strict';var chunkQQNPKA7A_cjs=require('./chunk-QQNPKA7A.cjs'),i=require('react'),reactDom=require('react-dom'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var i__namespace=/*#__PURE__*/_interopNamespace(i);var Ce=["Su","Mo","Tu","We","Th","Fr","Sa"],Ee=["January","February","March","April","May","June","July","August","September","October","November","December"],Ae=Array.from({length:60},(n,t)=>t),g=12,V=(n,t)=>new Date(n,t+1,0).getDate(),ne=(n,t)=>n&&t&&n.getFullYear()===t.getFullYear()&&n.getMonth()===t.getMonth()&&n.getDate()===t.getDate(),Ie=(n,t,r)=>!(t&&n<new Date(t.getFullYear(),t.getMonth(),t.getDate())||r&&n>new Date(r.getFullYear(),r.getMonth(),r.getDate())),Te=(n,t)=>{let r=new Date(n,t,1).getDay(),m=V(n,t),p=[],b=V(n,t-1);for(let d=r-1;d>=0;d--){let D=b-d;p.push({day:D,date:new Date(n,t-1,D),isOutside:true});}for(let d=1;d<=m;d++)p.push({day:d,date:new Date(n,t,d),isOutside:false});let y=42-p.length;for(let d=1;d<=y;d++)p.push({day:d,date:new Date(n,t+1,d),isOutside:true});return p},L=(n,t,r)=>{if(!n||isNaN(n.getTime()))return "";let m=n.getFullYear(),p=String(n.getMonth()+1).padStart(2,"0"),b=String(n.getDate()).padStart(2,"0"),y=n.getHours(),d=String(n.getMinutes()).padStart(2,"0"),D=y>=12?"PM":"AM";y=y%12||12;let k=String(y).padStart(2,"0");if(r)return r.replace("yyyy",m).replace("MM",p).replace("dd",b).replace("hh",k).replace("mm",d).replace("aa",D);switch(t){case "time":return `${k}:${d} ${D}`;case "datetime":return `${m}-${p}-${b} ${k}:${d} ${D}`;default:return `${m}-${p}-${b}`}},O=(n,t,r="date")=>({target:{value:n,name:t,type:r},preventDefault:()=>{},stopPropagation:()=>{},nativeEvent:null}),Fe={date:300,time:300,datetime:400,year:250},Oe=n=>{if(!n)return document.documentElement;let t=n.parentElement;for(;t;){let r=window.getComputedStyle(t),m=r.overflowY||r.overflow;if(m==="auto"||m==="scroll")return t;t=t.parentElement;}return document.documentElement},$e=(n,t)=>{if(!n)return {};let r=n.getBoundingClientRect(),m=t||300,p=window.innerHeight-r.bottom,b=r.top,y=p<m&&b>p,d=Math.max(r.width,window.innerWidth<576?220:260);return {position:"fixed",top:y?Math.max(4,r.top-m-4):r.bottom+4,left:Math.max(4,Math.min(r.left,window.innerWidth-d-4)),minWidth:d,maxWidth:window.innerWidth-8,zIndex:1070}},se=i__namespace.forwardRef(({className:n,mode:t="date",selected:r,value:m,onChange:p,dateFormat:b,placeholderText:y,size:d,isClearable:D=false,disabled:k=false,minDate:q,maxDate:z,timeIntervals:We=5,timezone:_e="Kampala",id:re,name:N,...ie},$)=>{let oe=e=>{if(!e)return null;if(e instanceof Date)return isNaN(e.getTime())?null:e;if(typeof e=="string"||typeof e=="number"){let a=new Date(e);if(!isNaN(a.getTime()))return a;if(typeof e=="string"){let l=e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(l){let c=parseInt(l[1],10),h=parseInt(l[2],10),_=l[3].toUpperCase();c===12&&_==="AM"&&(c=0),c!==12&&_==="PM"&&(c+=12);let X=new Date;return new Date(X.getFullYear(),X.getMonth(),X.getDate(),c,h,0,0)}let u=e.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(u){let c=parseInt(u[4],10),h=parseInt(u[5],10),_=u[6].toUpperCase();return c===12&&_==="AM"&&(c=0),c!==12&&_==="PM"&&(c+=12),new Date(parseInt(u[1]),parseInt(u[2])-1,parseInt(u[3]),c,h,0,0)}}return null}return null},o=i__namespace.useMemo(()=>oe(r??m),[r instanceof Date?r.getTime():r,m instanceof Date?m.getTime():m]),Z=t==="date"||t==="datetime",S=t==="time"||t==="datetime",[R,I]=i__namespace.useState(false),[x,K]=i__namespace.useState(()=>o?o.getFullYear():new Date().getFullYear()),[v,J]=i__namespace.useState(()=>o?o.getMonth():new Date().getMonth()),[w,P]=i__namespace.useState(o),[Y,ee]=i__namespace.useState(()=>o&&o.getHours()%12||12),[C,te]=i__namespace.useState(()=>o?o.getMinutes():0),[E,ae]=i__namespace.useState(()=>o&&o.getHours()>=12?"PM":"AM"),[U,T]=i__namespace.useState(false),[j,B]=i__namespace.useState(()=>Math.floor((o?o.getFullYear():new Date().getFullYear())/g)*g),[ce,le]=i__namespace.useState({}),F=i__namespace.useRef(null),H=i__namespace.useRef(null),G=i__namespace.useRef(null);i__namespace.useEffect(()=>{let e=document.createElement("div");return e.className="datepicker-portal-root",document.body.appendChild(e),G.current=e,()=>{e.parentNode&&document.body.removeChild(e),G.current=null;}},[]),i__namespace.useEffect(()=>{o&&!isNaN(o.getTime())?(P(o),K(o.getFullYear()),J(o.getMonth()),ee(o.getHours()%12||12),te(o.getMinutes()),ae(o.getHours()>=12?"PM":"AM"),B(Math.floor(o.getFullYear()/g)*g)):P(null);},[o]),i__namespace.useEffect(()=>{if(!R)return;let e=()=>H.current?H.current.getBoundingClientRect().height:Fe[U?"year":t]||300,a=Oe(F.current),l=()=>{requestAnimationFrame(()=>{le($e(F.current,e()));});};return l(),a.addEventListener("scroll",l,{passive:true}),window.addEventListener("resize",l),()=>{a.removeEventListener("scroll",l),window.removeEventListener("resize",l);}},[R,t,U]),i__namespace.useEffect(()=>{if(!R)return;let e=a=>{H.current&&!H.current.contains(a.target)&&F.current&&!F.current.contains(a.target)&&(I(false),T(false));};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[R]);let A=(e,a,l,u)=>{let c=new Date(e),h=a%12;return u==="PM"&&(h+=12),h===12&&u==="AM"&&(h=0),c.setHours(h,l,0,0),c},W=e=>{if(!e||isNaN(e.getTime()))return;let a=L(e,t,b);p?.(O(a,N,t));},de=e=>{if(!e){p?.(O(null,N,t)),I(false),T(false);return}W(e),t==="date"&&(I(false),T(false));},ue=e=>{if(P(e),t==="date")de(e);else if(t==="datetime"){let a=A(e,Y,C,E);W(a);}},pe=Te(x,v),me=()=>{let e=x,a=v;v===0?(e=x-1,a=11):a=v-1,K(e),J(a);let l=w||new Date,u=V(e,a),c=new Date(e,a,Math.min(l.getDate(),u));P(c),W(S?A(c,Y,C,E):c);},fe=()=>{let e=x,a=v;v===11?(e=x+1,a=0):a=v+1,K(e),J(a);let l=w||new Date,u=V(e,a),c=new Date(e,a,Math.min(l.getDate(),u));P(c),W(S?A(c,Y,C,E):c);},be=new Date,ge=q?new Date(q.getFullYear(),q.getMonth(),q.getDate()):null,ye=z?new Date(z.getFullYear(),z.getMonth(),z.getDate()):null,ve=e=>{if(ee(e),S){let a=A(w||new Date,e,C,E);p?.(O(L(a,t,b),N,t));}},we=e=>{if(te(e),S){let a=A(w||new Date,Y,e,E);p?.(O(L(a,t,b),N,t));}},he=e=>{if(ae(e),S){let a=A(w||new Date,Y,C,e);p?.(O(L(a,t,b),N,t));}},Me=()=>{B(Math.floor(x/g)*g),T(true);},De=e=>{K(e),T(false);let a=w||new Date,l=V(e,v),u=new Date(e,v,Math.min(a.getDate(),l));P(u),W(S?A(u,Y,C,E):u);},Q=Math.floor(j/g)*g,ke=Array.from({length:g},(e,a)=>Q+a),Ne=e=>{e.stopPropagation(),P(null),p?.(O(null,N));},Se=e=>{e.key==="Escape"&&(I(false),T(false),F.current?.blur()),(e.key==="ArrowDown"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),I(true));},Re=i__namespace.useCallback(e=>{F.current=e,typeof $=="function"?$(e):$&&($.current=e);},[$]),xe=y??(t==="time"?"Select time":t==="datetime"?"Select date & time":"Select date"),Pe=jsxRuntime.jsxs("div",{ref:H,className:chunkQQNPKA7A_cjs.a("datepicker-popover card border shadow-sm",t==="datetime"&&"datepicker-popover--wide"),style:ce,children:[U&&Z&&jsxRuntime.jsxs("div",{className:"datepicker-year-picker p-3",children:[jsxRuntime.jsxs("div",{className:"d-flex align-items-center justify-content-between mb-2",children:[jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:()=>B(j-g),"aria-label":"Previous years",children:"\u2039"}),jsxRuntime.jsxs("span",{className:"fw-semibold small",children:[Q," \u2013 ",Q+g-1]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:()=>B(j+g),"aria-label":"Next years",children:"\u203A"})]}),jsxRuntime.jsx("div",{className:"datepicker-year-grid",children:ke.map(e=>{let a=e===new Date().getFullYear(),l=w&&e===w.getFullYear();return jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-year-cell btn btn-sm",l&&"btn-primary",!l&&a&&"btn-outline-primary",!l&&!a&&"btn-light border"),onClick:()=>De(e),children:e},e)})})]}),!U&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs("div",{className:chunkQQNPKA7A_cjs.a("d-flex",t==="datetime"?"flex-row":"flex-column"),children:[Z&&jsxRuntime.jsxs("div",{className:"datepicker-calendar p-2",children:[jsxRuntime.jsxs("div",{className:"d-flex align-items-center justify-content-between mb-2",children:[jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:me,"aria-label":"Previous month",children:"\u2039"}),jsxRuntime.jsxs("div",{className:"d-flex align-items-center gap-1",children:[jsxRuntime.jsx("span",{className:"fw-semibold small",children:Ee[v]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-link text-decoration-none text-primary fw-semibold small p-0",onClick:Me,"aria-label":"Choose year",children:x})]}),jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-outline-secondary border-0 px-1",onClick:fe,"aria-label":"Next month",children:"\u203A"})]}),jsxRuntime.jsx("div",{className:"datepicker-days-header",children:Ce.map(e=>jsxRuntime.jsx("div",{className:"datepicker-day-label",children:e},e))}),jsxRuntime.jsx("div",{className:"datepicker-days-grid",children:pe.map((e,a)=>{let l=ne(e.date,be),u=w&&ne(e.date,w),c=Ie(e.date,ge,ye),h=e.isOutside||!c;return jsxRuntime.jsx("button",{type:"button",disabled:h,className:chunkQQNPKA7A_cjs.a("datepicker-day",l&&"datepicker-day--today",u&&"datepicker-day--selected",e.isOutside&&"datepicker-day--outside",!c&&"datepicker-day--disabled"),onClick:()=>ue(e.date),tabIndex:e.isOutside?-1:0,children:e.day},a)})})]}),t==="datetime"&&jsxRuntime.jsx("div",{className:"vr mx-1 my-2"}),S&&jsxRuntime.jsxs("div",{className:"datepicker-time p-2 d-flex flex-column",style:{minWidth:180},children:[t==="datetime"&&jsxRuntime.jsx("div",{className:"small fw-semibold text-muted text-center mb-1",children:"Time"}),jsxRuntime.jsxs("div",{className:"d-flex justify-content-center gap-2",children:[jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"Hour"}),jsxRuntime.jsx("div",{className:"datepicker-time-col-scroll",children:Array.from({length:12},(e,a)=>a+1).map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item",e===Y&&"active"),onClick:()=>ve(e),children:String(e).padStart(2,"0")},e))})]}),jsxRuntime.jsx("span",{className:"datepicker-time-separator",children:":"}),jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"Min"}),jsxRuntime.jsx("div",{className:"datepicker-time-col-scroll",children:Ae.map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item",e===C&&"active"),onClick:()=>we(e),children:String(e).padStart(2,"0")},e))})]}),jsxRuntime.jsxs("div",{className:"datepicker-time-col",children:[jsxRuntime.jsx("div",{className:"datepicker-time-col-label",children:"\xA0"}),jsxRuntime.jsx("div",{className:"d-flex flex-column gap-1 mt-1",children:["AM","PM"].map(e=>jsxRuntime.jsx("button",{type:"button",className:chunkQQNPKA7A_cjs.a("datepicker-time-item","datepicker-time-item--ampm",E===e&&"active"),onClick:()=>he(e),children:e},e))})]})]})]})]})})]});return jsxRuntime.jsxs("div",{className:"position-relative d-inline-block w-100",style:{minWidth:0},children:[jsxRuntime.jsxs("div",{className:"position-relative",children:[jsxRuntime.jsx("input",{ref:Re,id:re,name:N,type:"text",readOnly:true,disabled:k,className:chunkQQNPKA7A_cjs.a("form-control",d==="sm"&&"form-control-sm",d==="lg"&&"form-control-lg","pe-5",n),placeholder:xe,value:L(o,t,b),onClick:()=>!k&&I(!R),onKeyDown:Se,"aria-haspopup":"dialog","aria-expanded":R,autoComplete:"off",...ie}),D&&o&&!k&&jsxRuntime.jsx("button",{type:"button",className:"btn btn-sm btn-link position-absolute top-50 end-0 translate-middle-y pe-2 text-secondary",style:{zIndex:2},onClick:Ne,tabIndex:-1,"aria-label":"Clear",children:"\xD7"})]}),R&&!k&&G.current&&reactDom.createPortal(Pe,G.current)]})});se.displayName="DatePicker";var qe=se;exports.a=se;exports.b=qe;//# sourceMappingURL=chunk-KZEOI42M.cjs.map
|
|
2
|
+
//# sourceMappingURL=chunk-KZEOI42M.cjs.map
|