@box/blueprint-web 12.18.0 → 12.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib-esm/index.css +185 -65
- package/dist/lib-esm/primitives/base-button/base-button.js +5 -0
- package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
- package/dist/lib-esm/search-input/search-input-controlled/search-input-controlled.js +8 -3
- package/dist/lib-esm/search-input/types.d.ts +11 -0
- package/package.json +1 -1
package/dist/lib-esm/index.css
CHANGED
|
@@ -242,8 +242,131 @@
|
|
|
242
242
|
opacity:1;
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
|
-
.bp_base_button_module_button--
|
|
246
|
-
border-radius:var(--radius-
|
|
245
|
+
.bp_base_button_module_button--45d14[data-modern=true]{
|
|
246
|
+
--button-border-radius:var(--bp-radius-10);
|
|
247
|
+
}
|
|
248
|
+
.bp_base_button_module_button--45d14[data-modern=true]:not(:disabled)[data-focus-visible]{
|
|
249
|
+
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
|
|
250
|
+
}
|
|
251
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_primary--45d14{
|
|
252
|
+
--button-color:var(--bp-text-text-brand-on-color);
|
|
253
|
+
--button-background:var(--bp-surface-surface-brand);
|
|
254
|
+
--button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
|
|
255
|
+
--button-disabled-background:var(--bp-surface-surface-brand-disabled);
|
|
256
|
+
--button-focus-or-hover-background:var(--bp-surface-surface-brand-hover);
|
|
257
|
+
--button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-hover);
|
|
258
|
+
--button-active-background:var(--bp-surface-surface-brand-pressed);
|
|
259
|
+
--button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
|
|
260
|
+
}
|
|
261
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_secondary--45d14{
|
|
262
|
+
--button-color:var(--bp-text-text-on-light);
|
|
263
|
+
--button-background:var(--bp-surface-cta-surface-secondary);
|
|
264
|
+
--button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
|
|
265
|
+
--button-focus-or-hover-background:var(--bp-surface-cta-surface-secondary-hover);
|
|
266
|
+
--button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary-hover);
|
|
267
|
+
--button-active-background:var(--bp-surface-cta-surface-secondary-pressed);
|
|
268
|
+
--button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary-pressed);
|
|
269
|
+
}
|
|
270
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_tertiary--45d14{
|
|
271
|
+
--button-color:var(--bp-text-cta-link);
|
|
272
|
+
--button-background:var(--bp-surface-cta-surface-tertiary);
|
|
273
|
+
--button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
|
|
274
|
+
--button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
|
|
275
|
+
}
|
|
276
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_outline--45d14{
|
|
277
|
+
--button-color:var(--bp-text-text-on-light);
|
|
278
|
+
--button-background:var(-bp-surface-cta-surface-outline);
|
|
279
|
+
--button-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline);
|
|
280
|
+
--button-focus-or-hover-background:var(--bp-surface-cta-surface-outline-hover);
|
|
281
|
+
--button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline-hover);
|
|
282
|
+
--button-active-background:var(--bp-surface-cta-surface-outline-pressed);
|
|
283
|
+
--button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline-pressed);
|
|
284
|
+
}
|
|
285
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_small--45d14{
|
|
286
|
+
--button-small-gap:var(--bp-space-010);
|
|
287
|
+
--button-small-min-height:var(--bp-size-080);
|
|
288
|
+
--button-small-padding:0 var(--bp-size-040);
|
|
289
|
+
}
|
|
290
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_small--45d14.bp_base_button_module_isIconButton--45d14{
|
|
291
|
+
--icon-button-small-width:var(--bp-size-080);
|
|
292
|
+
--icon-button-small-height:var(--bp-size-080);
|
|
293
|
+
--icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
|
|
294
|
+
}
|
|
295
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_large--45d14{
|
|
296
|
+
--button-large-gap:var(--bp-space-020);
|
|
297
|
+
--button-large-min-height:var(--bp-size-100);
|
|
298
|
+
--button-large-padding:0 var(--bp-size-040);
|
|
299
|
+
}
|
|
300
|
+
.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_large--45d14.bp_base_button_module_isIconButton--45d14{
|
|
301
|
+
--icon-button-large-width:var(--bp-size-100);
|
|
302
|
+
--icon-button-large-height:var(--bp-size-100);
|
|
303
|
+
--icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.bp_base_button_module_button--45d14[data-modern=false]{
|
|
307
|
+
--button-border-radius:var(--radius-2);
|
|
308
|
+
}
|
|
309
|
+
.bp_base_button_module_button--45d14[data-modern=false]:not(:disabled)[data-focus-visible]{
|
|
310
|
+
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
311
|
+
}
|
|
312
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_primary--45d14{
|
|
313
|
+
--button-color:var(--text-text-brand-on-color);
|
|
314
|
+
--button-background:var(--surface-surface-brand);
|
|
315
|
+
--button-border:var(--border-1) solid var(--surface-surface-brand);
|
|
316
|
+
--button-disabled-background:var(--surface-surface-brand-disabled);
|
|
317
|
+
--button-focus-or-hover-background:var(--surface-surface-brand-hover);
|
|
318
|
+
--button-focus-or-hover-border:var(--border-1) solid var(--surface-surface-brand-hover);
|
|
319
|
+
--button-active-background:var(--surface-surface-brand-pressed);
|
|
320
|
+
--button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
|
|
321
|
+
}
|
|
322
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_secondary--45d14{
|
|
323
|
+
--button-color:var(--text-text-on-light);
|
|
324
|
+
--button-background:var(--surface-cta-surface-secondary);
|
|
325
|
+
--button-border:var(--border-1) solid var(--border-cta-border-secondary);
|
|
326
|
+
--button-focus-or-hover-background:var(--surface-cta-surface-secondary-hover);
|
|
327
|
+
--button-focus-or-hover-border:var(--border-1) solid var(--border-cta-border-secondary-hover);
|
|
328
|
+
--button-active-background:var(--surface-cta-surface-secondary-pressed);
|
|
329
|
+
--button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
|
|
330
|
+
}
|
|
331
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_tertiary--45d14{
|
|
332
|
+
--button-color:var(--text-cta-link);
|
|
333
|
+
--button-background:#0000;
|
|
334
|
+
--button-border:var(--border-1) solid #0000;
|
|
335
|
+
--button-focus-or-hover-background:var(--surface-cta-surface-tertiary-hover);
|
|
336
|
+
--button-active-background:var(--surface-cta-surface-tertiary-pressed);
|
|
337
|
+
}
|
|
338
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_outline--45d14{
|
|
339
|
+
--button-color:var(--text-text-on-light);
|
|
340
|
+
--button-background:var(--surface-cta-surface-outline);
|
|
341
|
+
--button-border:var(--border-1) solid var(--border-cta-border-outline);
|
|
342
|
+
--button-focus-or-hover-background:var(--surface-cta-surface-outline-hover);
|
|
343
|
+
--button-focus-or-hover-border:var(--border-1) solid var(--border-cta-border-outline-hover);
|
|
344
|
+
--button-active-background:var(--surface-cta-surface-outline-pressed);
|
|
345
|
+
--button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
|
|
346
|
+
}
|
|
347
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_small--45d14{
|
|
348
|
+
--button-small-gap:var(--space-1);
|
|
349
|
+
--button-small-min-height:var(--size-8);
|
|
350
|
+
--button-small-padding:0 var(--space-4);
|
|
351
|
+
}
|
|
352
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_small--45d14.bp_base_button_module_isIconButton--45d14{
|
|
353
|
+
--icon-button-small-width:var(--size-8);
|
|
354
|
+
--icon-button-small-height:var(--size-8);
|
|
355
|
+
--icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
|
|
356
|
+
}
|
|
357
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_large--45d14{
|
|
358
|
+
--button-large-gap:var(--space-2);
|
|
359
|
+
--button-large-min-height:var(--size-10);
|
|
360
|
+
--button-large-padding:0 var(--space-4);
|
|
361
|
+
}
|
|
362
|
+
.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_large--45d14.bp_base_button_module_isIconButton--45d14{
|
|
363
|
+
--icon-button-large-width:var(--size-10);
|
|
364
|
+
--icon-button-large-height:var(--size-10);
|
|
365
|
+
--icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.bp_base_button_module_button--45d14{
|
|
369
|
+
border-radius:var(--button-border-radius);
|
|
247
370
|
cursor:pointer;
|
|
248
371
|
font-family:var(--body-default-bold-font-family);
|
|
249
372
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -259,95 +382,92 @@
|
|
|
259
382
|
user-select:none;
|
|
260
383
|
white-space:nowrap;
|
|
261
384
|
}
|
|
262
|
-
.bp_base_button_module_button--
|
|
385
|
+
.bp_base_button_module_button--45d14,.bp_base_button_module_button--45d14 .bp_base_button_module_icon--45d14{
|
|
263
386
|
align-items:center;
|
|
264
387
|
display:flex;
|
|
265
388
|
}
|
|
266
|
-
.bp_base_button_module_button--
|
|
267
|
-
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
268
|
-
}
|
|
269
|
-
.bp_base_button_module_button--4b9b3:disabled{
|
|
389
|
+
.bp_base_button_module_button--45d14:disabled{
|
|
270
390
|
opacity:.3;
|
|
271
391
|
}
|
|
272
|
-
.bp_base_button_module_button--
|
|
273
|
-
background:var(--
|
|
274
|
-
border:var(--border
|
|
275
|
-
color:var(--
|
|
392
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14{
|
|
393
|
+
background:var(--button-background);
|
|
394
|
+
border:var(--button-border);
|
|
395
|
+
color:var(--button-color);
|
|
276
396
|
}
|
|
277
|
-
.bp_base_button_module_button--
|
|
278
|
-
background:var(--
|
|
397
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:disabled{
|
|
398
|
+
background:var(--button-disabled-background);
|
|
279
399
|
}
|
|
280
|
-
.bp_base_button_module_button--
|
|
281
|
-
background:var(--
|
|
282
|
-
border:var(--
|
|
400
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:not(:disabled)[data-focus-visible]{
|
|
401
|
+
background:var(--button-focus-or-hover-background);
|
|
402
|
+
border:var(--button-focus-or-hover-border);
|
|
283
403
|
}
|
|
284
|
-
.bp_base_button_module_button--
|
|
285
|
-
background:var(--
|
|
286
|
-
border:var(--
|
|
404
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:not(:disabled):active{
|
|
405
|
+
background:var(--button-active-background);
|
|
406
|
+
border:var(--button-active-border);
|
|
287
407
|
}
|
|
288
|
-
.bp_base_button_module_button--
|
|
289
|
-
background:var(--
|
|
290
|
-
border:var(--
|
|
291
|
-
color:var(--
|
|
408
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14{
|
|
409
|
+
background:var(--button-background);
|
|
410
|
+
border:var(--button-border);
|
|
411
|
+
color:var(--button-color);
|
|
292
412
|
}
|
|
293
|
-
.bp_base_button_module_button--
|
|
294
|
-
background:var(--
|
|
295
|
-
border:var(--
|
|
413
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14:not(:disabled)[data-focus-visible]{
|
|
414
|
+
background:var(--button-focus-or-hover-background);
|
|
415
|
+
border:var(--button-focus-or-hover-border);
|
|
296
416
|
}
|
|
297
|
-
.bp_base_button_module_button--
|
|
298
|
-
background:var(--
|
|
299
|
-
border:var(--
|
|
417
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14:not(:disabled):active{
|
|
418
|
+
background:var(--button-active-background);
|
|
419
|
+
border:var(--button-active-border);
|
|
300
420
|
}
|
|
301
|
-
.bp_base_button_module_button--
|
|
302
|
-
background
|
|
303
|
-
border:var(--border
|
|
304
|
-
color:var(--
|
|
421
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14{
|
|
422
|
+
background:var(--button-background);
|
|
423
|
+
border:var(--button-border);
|
|
424
|
+
color:var(--button-color);
|
|
305
425
|
}
|
|
306
|
-
.bp_base_button_module_button--
|
|
307
|
-
background:var(--
|
|
426
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14:not(:disabled)[data-focus-visible]{
|
|
427
|
+
background:var(--button-focus-or-hover-background);
|
|
308
428
|
}
|
|
309
|
-
.bp_base_button_module_button--
|
|
310
|
-
background:var(--
|
|
429
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14:not(:disabled):active{
|
|
430
|
+
background:var(--button-active-background);
|
|
311
431
|
}
|
|
312
|
-
.bp_base_button_module_button--
|
|
313
|
-
background
|
|
314
|
-
border:var(--
|
|
315
|
-
color:var(--
|
|
432
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14{
|
|
433
|
+
background:var(--button-background);
|
|
434
|
+
border:var(--button-border);
|
|
435
|
+
color:var(--button-color);
|
|
316
436
|
}
|
|
317
|
-
.bp_base_button_module_button--
|
|
318
|
-
background:var(--
|
|
319
|
-
border:var(--
|
|
437
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14:not(:disabled)[data-focus-visible]{
|
|
438
|
+
background:var(--button-focus-or-hover-background);
|
|
439
|
+
border:var(--button-focus-or-hover-border);
|
|
320
440
|
}
|
|
321
|
-
.bp_base_button_module_button--
|
|
322
|
-
background:var(--
|
|
323
|
-
border:var(--
|
|
441
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14:not(:disabled):active{
|
|
442
|
+
background:var(--button-active-background);
|
|
443
|
+
border:var(--button-active-border);
|
|
324
444
|
}
|
|
325
|
-
.bp_base_button_module_button--
|
|
326
|
-
gap:var(--
|
|
327
|
-
min-height:var(--
|
|
328
|
-
padding:
|
|
445
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_small--45d14{
|
|
446
|
+
gap:var(--button-small-gap);
|
|
447
|
+
min-height:var(--button-small-min-height);
|
|
448
|
+
padding:var(--button-small-padding);
|
|
329
449
|
}
|
|
330
|
-
.bp_base_button_module_button--
|
|
331
|
-
height:var(--
|
|
450
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_small--45d14.bp_base_button_module_isIconButton--45d14{
|
|
451
|
+
height:var(--icon-button-small-height);
|
|
332
452
|
min-height:unset;
|
|
333
|
-
padding:
|
|
334
|
-
width:var(--
|
|
453
|
+
padding:var(--icon-button-small-padding);
|
|
454
|
+
width:var(--icon-button-small-width);
|
|
335
455
|
}
|
|
336
|
-
.bp_base_button_module_button--
|
|
337
|
-
gap:var(--
|
|
338
|
-
min-height:var(--
|
|
339
|
-
padding:
|
|
456
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_large--45d14{
|
|
457
|
+
gap:var(--button-large-gap);
|
|
458
|
+
min-height:var(--button-large-min-height);
|
|
459
|
+
padding:var(--button-large-padding);
|
|
340
460
|
}
|
|
341
|
-
.bp_base_button_module_button--
|
|
342
|
-
height:var(--
|
|
343
|
-
padding:
|
|
344
|
-
width:var(--
|
|
461
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_large--45d14.bp_base_button_module_isIconButton--45d14{
|
|
462
|
+
height:var(--icon-button-large-height);
|
|
463
|
+
padding:var(--icon-button-large-padding);
|
|
464
|
+
width:var(--icon-button-large-width);
|
|
345
465
|
}
|
|
346
|
-
.bp_base_button_module_button--
|
|
466
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_hide--45d14{
|
|
347
467
|
pointer-events:none;
|
|
348
468
|
position:relative;
|
|
349
469
|
}
|
|
350
|
-
.bp_base_button_module_button--
|
|
470
|
+
.bp_base_button_module_button--45d14.bp_base_button_module_hide--45d14 span{
|
|
351
471
|
color:#0000;
|
|
352
472
|
opacity:0;
|
|
353
473
|
}
|
|
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Button } from '@ariakit/react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useRef, useMemo, Children, isValidElement } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
|
|
6
7
|
import { getButtonOptions } from '../../utils/getButtonOptions.js';
|
|
7
8
|
import { useForkRef } from '../../utils/useForkRef.js';
|
|
@@ -21,6 +22,9 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
21
22
|
'aria-label': ariaLabel,
|
|
22
23
|
...rest
|
|
23
24
|
} = getButtonOptions(props);
|
|
25
|
+
const {
|
|
26
|
+
enableModernizedComponents
|
|
27
|
+
} = useBlueprintModernization();
|
|
24
28
|
const ref = useRef(null);
|
|
25
29
|
const isIconButton = useMemo(() => {
|
|
26
30
|
const childArray = Children.toArray(children);
|
|
@@ -42,6 +46,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
42
46
|
[styles.isIconButton]: isIconButton,
|
|
43
47
|
[styles.hide]: loading
|
|
44
48
|
}, className),
|
|
49
|
+
"data-modern": enableModernizedComponents,
|
|
45
50
|
children: jsxs(BaseButtonContext.Provider, {
|
|
46
51
|
value: context,
|
|
47
52
|
children: [children, loading && loadingAriaLabel ? jsx(LoadingIndicator, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"button":"bp_base_button_module_button--
|
|
2
|
+
var styles = {"button":"bp_base_button_module_button--45d14","primary":"bp_base_button_module_primary--45d14","secondary":"bp_base_button_module_secondary--45d14","tertiary":"bp_base_button_module_tertiary--45d14","outline":"bp_base_button_module_outline--45d14","small":"bp_base_button_module_small--45d14","isIconButton":"bp_base_button_module_isIconButton--45d14","large":"bp_base_button_module_large--45d14","icon":"bp_base_button_module_icon--45d14","hide":"bp_base_button_module_hide--45d14"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Search } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
3
|
import { IconCtaIcon, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
-
import { forwardRef, Children, useMemo } from 'react';
|
|
5
|
+
import { forwardRef, Children, useMemo, cloneElement } from 'react';
|
|
6
6
|
import { IconButton } from '../../primitives/icon-button/icon-button.js';
|
|
7
7
|
import { Tooltip } from '../../tooltip/tooltip.js';
|
|
8
8
|
import { switchCase } from '../../utils/switchCase.js';
|
|
@@ -14,6 +14,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
14
14
|
children,
|
|
15
15
|
className,
|
|
16
16
|
disabled = false,
|
|
17
|
+
inputClassName,
|
|
17
18
|
onChange,
|
|
18
19
|
onClearInput,
|
|
19
20
|
onKeyDown,
|
|
@@ -22,6 +23,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
22
23
|
searchInputAriaLabel,
|
|
23
24
|
searchInputClearAriaLabel,
|
|
24
25
|
searchInputClearButtonTooltip,
|
|
26
|
+
startIcon,
|
|
25
27
|
value,
|
|
26
28
|
variant,
|
|
27
29
|
...rest
|
|
@@ -67,9 +69,12 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
67
69
|
onClick: onClearInput,
|
|
68
70
|
size: 'x-small'
|
|
69
71
|
}), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton]);
|
|
72
|
+
const CustomStartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
|
|
73
|
+
className: clsx(startIcon.props?.className, styles.searchIcon, isGlobal && styles.global)
|
|
74
|
+
}), [startIcon, isGlobal]);
|
|
70
75
|
return jsxs("div", {
|
|
71
76
|
className: clsx(styles.search, disabled && styles.disabled, className),
|
|
72
|
-
children: [jsx(Search, {
|
|
77
|
+
children: [startIcon ? CustomStartIconComponent : jsx(Search, {
|
|
73
78
|
"aria-hidden": "true",
|
|
74
79
|
className: clsx(styles.searchIcon, isGlobal && styles.global),
|
|
75
80
|
color: IconIconOnLightSecondary
|
|
@@ -79,7 +84,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
79
84
|
"aria-label": searchInputAriaLabel,
|
|
80
85
|
className: clsx(styles.searchInput, isGlobal && styles.global, {
|
|
81
86
|
[styles.withoutActionButton]: isGlobal && !showActionButton
|
|
82
|
-
}),
|
|
87
|
+
}, inputClassName),
|
|
83
88
|
disabled: disabled,
|
|
84
89
|
onChange: onChange,
|
|
85
90
|
onKeyDown: onSearchInputKeyDown,
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import { type IconButtonProps } from '../primitives/icon-button';
|
|
3
3
|
export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange' | 'onSubmit'> {
|
|
4
|
+
/**
|
|
5
|
+
* Class name for search input component
|
|
6
|
+
*/
|
|
4
7
|
className?: string;
|
|
5
8
|
/**
|
|
6
9
|
* Default value for search input.
|
|
@@ -14,6 +17,10 @@ export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'inpu
|
|
|
14
17
|
* @default false
|
|
15
18
|
*/
|
|
16
19
|
disabled?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Class name for the input element within search input component
|
|
22
|
+
*/
|
|
23
|
+
inputClassName?: string;
|
|
17
24
|
/**
|
|
18
25
|
* Handler that is called when the search value is changed.
|
|
19
26
|
*/
|
|
@@ -34,6 +41,10 @@ export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'inpu
|
|
|
34
41
|
* Search through site content clear input button aria-label.
|
|
35
42
|
*/
|
|
36
43
|
searchInputClearAriaLabel: string;
|
|
44
|
+
/**
|
|
45
|
+
* Custom icon to be displayed in the start of the search input in place of search icon
|
|
46
|
+
*/
|
|
47
|
+
startIcon?: React.ReactElement;
|
|
37
48
|
/**
|
|
38
49
|
* Input type, fixed to 'search'.
|
|
39
50
|
*/
|