draft-components 4.21.3 → 4.22.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.
Files changed (25) hide show
  1. package/css/draft-components.css +37 -14
  2. package/dist/components/checkbox/checkbox.css +1 -1
  3. package/dist/components/dialog/dialog-body.d.ts +1 -1
  4. package/dist/components/dialog/dialog-body.js +20 -8
  5. package/dist/components/dialog/dialog-body.js.map +1 -1
  6. package/dist/components/dialog/dialog-context.d.ts +4 -2
  7. package/dist/components/dialog/dialog-context.js +6 -3
  8. package/dist/components/dialog/dialog-context.js.map +1 -1
  9. package/dist/components/dialog/dialog-footer.js +2 -2
  10. package/dist/components/dialog/dialog-footer.js.map +1 -1
  11. package/dist/components/dialog/dialog-header.js +2 -2
  12. package/dist/components/dialog/dialog-header.js.map +1 -1
  13. package/dist/components/dialog/dialog.css +3 -2
  14. package/dist/components/file-picker/file-picker.css +1 -1
  15. package/dist/components/filtered-search/filtered-search.css +1 -1
  16. package/dist/components/multi-select/multi-select.css +1 -1
  17. package/dist/components/popover/popover.css +1 -1
  18. package/dist/components/radio/radio.css +1 -1
  19. package/dist/components/search-select/search-select.css +22 -0
  20. package/dist/components/segmented-control/segmented-control.css +2 -2
  21. package/dist/components/select/select.css +1 -1
  22. package/dist/components/text-input/text-input.css +1 -1
  23. package/dist/components/textarea/textarea.css +1 -1
  24. package/dist/components/token-input/token-input.css +1 -1
  25. package/package.json +1 -1
package/css/draft-components.css CHANGED
@@ -2187,7 +2187,7 @@
2187
2187
 
2188
2188
  .dark .dc-popover,
2189
2189
  .dark.dc-popover {
2190
- --border-color: var(--dc-neutral-600);
2190
+ --border-color: var(--dc-neutral-500);
2191
2191
  --shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-lg);
2192
2192
 
2193
2193
  color-scheme: dark;
@@ -2203,7 +2203,7 @@
2203
2203
  --scroll-shadow-top: 0 2px 2px rgb(0 0 0 / 10%);
2204
2204
  --scroll-shadow-bottom: 0 -2px 2px rgb(0 0 0 / 10%);
2205
2205
  --section-delimiter-width: 1px;
2206
- --section-delimiter-color: var(--dc-border-color-2);
2206
+ --section-delimiter-color: var(--dc-neutral-200);
2207
2207
  --enter-animation-duration: 100ms;
2208
2208
  --leave-animation-duration: 100ms;
2209
2209
  --enter-slide-animation-duration: 250ms;
@@ -2582,10 +2582,11 @@
2582
2582
  .dark .dc-dialog,
2583
2583
  .dark.dc-dialog {
2584
2584
  --modal-background: var(--dc-neutral-800);
2585
- --modal-shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-xl);
2585
+ --modal-shadow: 0 0 0 1px var(--dc-neutral-500), var(--dc-shadow-xl);
2586
2586
  --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 75%);
2587
2587
  --scroll-shadow-top: 0 1px 1px rgb(255 255 255 / 15%);
2588
2588
  --scroll-shadow-bottom: 0 -1px 1px rgb(255 255 255 / 15%);
2589
+ --section-delimiter-color: var(--dc-neutral-500);
2589
2590
 
2590
2591
  color-scheme: dark;
2591
2592
  }
@@ -2749,7 +2750,7 @@
2749
2750
  .dark .dc-text-input,
2750
2751
  .dark.dc-text-input {
2751
2752
  --color: var(--dc-white);
2752
- --border-color: var(--dc-neutral-600);
2753
+ --border-color: var(--dc-neutral-500);
2753
2754
  --border-color-error: var(--dc-red-400);
2754
2755
  --background: var(--dc-neutral-800);
2755
2756
  --add-on-color: var(--dc-neutral-400);
@@ -2913,7 +2914,7 @@
2913
2914
  .dark.dc-token-input {
2914
2915
  --color: var(--dc-white);
2915
2916
  --background: var(--dc-neutral-800);
2916
- --border-color: var(--dc-neutral-600);
2917
+ --border-color: var(--dc-neutral-500);
2917
2918
  --border-color-error: var(--dc-red-400);
2918
2919
  --token-color: var(--dc-white);
2919
2920
  --token-background: var(--dc-neutral-600);
@@ -3023,7 +3024,7 @@
3023
3024
  .dark .dc-textarea,
3024
3025
  .dark.dc-textarea {
3025
3026
  --color: var(--dc-white);
3026
- --border-color: var(--dc-neutral-600);
3027
+ --border-color: var(--dc-neutral-500);
3027
3028
  --border-color-error: var(--dc-red-400);
3028
3029
  --background: var(--dc-neutral-800);
3029
3030
 
@@ -3149,7 +3150,7 @@
3149
3150
  .dark .dc-select,
3150
3151
  .dark.dc-select {
3151
3152
  --color: var(--dc-white);
3152
- --border-color: var(--dc-neutral-600);
3153
+ --border-color: var(--dc-neutral-500);
3153
3154
  --border-color-error: var(--dc-red-400);
3154
3155
  --background: var(--dc-neutral-800);
3155
3156
 
@@ -3408,6 +3409,28 @@
3408
3409
  color: var(--empty-state-color-error);
3409
3410
  }
3410
3411
 
3412
+ .dark .dc-search-select,
3413
+ .dark.dc-search-select {
3414
+ --button-color: var(--dc-white);
3415
+ --button-background: var(--dc-neutral-800);
3416
+ --button-border-color: var(--dc-neutral-500);
3417
+ --button-border-color-error: var(--dc-red-400);
3418
+ --button-focus-ring-color: var(--dc-focus-ring-color);
3419
+ --popup-color: var(--dc-white);
3420
+ --popup-background: var(--dc-neutral-800);
3421
+ --popup-border-color: var(--dc-neutral-500);
3422
+ --input-border-color: var(--dc-neutral-500);
3423
+ --option-color: var(--dc-neutral-50);
3424
+ --option-color-selected: var(--dc-white);
3425
+ --option-background-selected: rgb(var(--dc-white-rgb) / 24%);
3426
+ --option-color-checked: var(--dc-white);
3427
+ --option-background-checked: var(--dc-blue-500);
3428
+ --empty-state-color: var(--dc-neutral-400);
3429
+ --empty-state-color-error: var(--dc-red-400);
3430
+
3431
+ color-scheme: dark;
3432
+ }
3433
+
3411
3434
  .dc-switch {
3412
3435
  --width: 38px;
3413
3436
  --height: 24px;
@@ -3595,7 +3618,7 @@
3595
3618
  .dark .dc-checkbox,
3596
3619
  .dark.dc-checkbox {
3597
3620
  --background: var(--dc-neutral-800);
3598
- --border-color: var(--dc-neutral-600);
3621
+ --border-color: var(--dc-neutral-500);
3599
3622
  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
3600
3623
 
3601
3624
  color-scheme: dark;
@@ -3677,7 +3700,7 @@
3677
3700
  .dark .dc-radio,
3678
3701
  .dark.dc-radio {
3679
3702
  --background: var(--dc-neutral-800);
3680
- --border-color: var(--dc-neutral-600);
3703
+ --border-color: var(--dc-neutral-500);
3681
3704
  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
3682
3705
 
3683
3706
  color-scheme: dark;
@@ -4015,7 +4038,7 @@
4015
4038
  --label-color: var(--dc-white);
4016
4039
  --icon-color: var(--dc-neutral-400);
4017
4040
  --caption-color: var(--dc-neutral-400);
4018
- --border-color: var(--dc-neutral-600);
4041
+ --border-color: var(--dc-neutral-500);
4019
4042
  --border-color-drag-over: var(--dc-blue-400);
4020
4043
  --background-drag-over: rgb(var(--dc-blue-300-rgb) / 20%);
4021
4044
 
@@ -4333,13 +4356,13 @@
4333
4356
 
4334
4357
  .dark .dc-segmented,
4335
4358
  .dark.dc-segmented {
4336
- --border-color: var(--dc-neutral-600);
4359
+ --border-color: var(--dc-neutral-500);
4337
4360
  --background: rgb(var(--dc-neutral-50-rgb) / 10%);
4338
4361
  --delimiter-color: rgb(var(--dc-neutral-50-rgb) / 40%);
4339
4362
  --button-color: var(--dc-white);
4340
4363
  --button-color-selected: var(--dc-neutral-900);
4341
4364
  --button-border-color: transparent;
4342
- --button-border-color-selected: var(--dc-neutral-600);
4365
+ --button-border-color-selected: var(--dc-neutral-500);
4343
4366
 
4344
4367
  color-scheme: dark;
4345
4368
  }
@@ -5977,7 +6000,7 @@
5977
6000
 
5978
6001
  /* Checkbox props */
5979
6002
  --checkbox-background: var(--dc-neutral-800);
5980
- --checkbox-border-color: var(--dc-neutral-600);
6003
+ --checkbox-border-color: var(--dc-neutral-500);
5981
6004
  --checkbox-border-color-checked: rgb(var(--dc-white-rgb) / 10%);
5982
6005
 
5983
6006
  /* Listbox props */
@@ -6288,7 +6311,7 @@
6288
6311
  .dark .dc-filtered-search,
6289
6312
  .dark.dc-filtered-search {
6290
6313
  --color: var(--dc-white);
6291
- --border-color: var(--dc-neutral-600);
6314
+ --border-color: var(--dc-neutral-500);
6292
6315
  --background: var(--dc-neutral-800);
6293
6316
  --icon-color: var(--dc-neutral-400);
6294
6317
  --option-color: var(--dc-white);
package/dist/components/checkbox/checkbox.css CHANGED
@@ -77,7 +77,7 @@
77
77
  .dark .dc-checkbox,
78
78
  .dark.dc-checkbox {
79
79
  --background: var(--dc-neutral-800);
80
- --border-color: var(--dc-neutral-600);
80
+ --border-color: var(--dc-neutral-500);
81
81
  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
82
82
 
83
83
  color-scheme: dark;
package/dist/components/dialog/dialog-body.d.ts CHANGED
@@ -6,5 +6,5 @@ type DialogBodyBaseProps = {
6
6
  shouldShowScrollShadow?: boolean;
7
7
  };
8
8
  export type DialogBodyProps = DialogBodyBaseProps & Omit<DialogBodyHTMLProps, keyof DialogBodyBaseProps>;
9
- export declare function DialogBody({ className, hasTopDelimiter: hasBorderTop, hasBottomDelimiter: hasBorderBottom, shouldShowScrollShadow, ...props }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function DialogBody({ className, hasTopDelimiter: hasBorderTop, hasBottomDelimiter: hasBorderBottom, shouldShowScrollShadow, onScroll, ...props }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
10
10
  export {};
package/dist/components/dialog/dialog-body.js CHANGED
@@ -2,29 +2,41 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useEffect, useRef } from 'react';
3
3
  import { classNames } from '../../lib/react-helpers.js';
4
4
  import { useDialogContext } from './dialog-context.js';
5
- export function DialogBody({ className, hasTopDelimiter: hasBorderTop, hasBottomDelimiter: hasBorderBottom, shouldShowScrollShadow, ...props }) {
5
+ import { useCallbackRef } from '../../hooks/use-callback-ref.js';
6
+ export function DialogBody({ className, hasTopDelimiter: hasBorderTop, hasBottomDelimiter: hasBorderBottom, shouldShowScrollShadow, onScroll, ...props }) {
6
7
  const ref = useRef(null);
7
- const { setIsBodyHasScroll: setShouldShowScrollShadow } = useDialogContext();
8
+ const { setIsBodyHasTopScroll, setIsBodyHasBottomScroll } = useDialogContext();
9
+ const updateBodyScrollState = useCallbackRef(() => {
10
+ const el = ref.current;
11
+ if (el) {
12
+ setIsBodyHasTopScroll(el.scrollTop > 0);
13
+ setIsBodyHasBottomScroll(el.scrollHeight - el.scrollTop - el.clientHeight > 0);
14
+ }
15
+ });
8
16
  useEffect(() => {
9
17
  const el = ref.current;
10
18
  if (!el) {
11
19
  return;
12
20
  }
13
21
  if (shouldShowScrollShadow) {
14
- const ro = new ResizeObserver(() => {
15
- setShouldShowScrollShadow(el.scrollHeight !== el.offsetHeight);
16
- });
22
+ const ro = new ResizeObserver(updateBodyScrollState);
17
23
  ro.observe(el);
18
24
  return () => {
19
- setShouldShowScrollShadow(false);
25
+ setIsBodyHasTopScroll(false);
26
+ setIsBodyHasBottomScroll(false);
20
27
  ro.disconnect();
21
28
  };
22
29
  }
23
- }, [shouldShowScrollShadow, setShouldShowScrollShadow]);
30
+ }, [shouldShowScrollShadow, setIsBodyHasTopScroll, setIsBodyHasBottomScroll, updateBodyScrollState]);
24
31
  return (_jsx("div", { ref: ref, className: classNames(className, {
25
32
  'dc-dialog__body': true,
26
33
  'dc-dialog__body_has_top-delimiter': hasBorderTop,
27
34
  'dc-dialog__body_has_bottom-delimiter': hasBorderBottom,
28
- }), ...props }));
35
+ }), onScroll: (ev) => {
36
+ updateBodyScrollState();
37
+ if (typeof onScroll === 'function') {
38
+ onScroll(ev);
39
+ }
40
+ }, ...props }));
29
41
  }
30
42
  //# sourceMappingURL=dialog-body.js.map
package/dist/components/dialog/dialog-body.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog-body.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-body.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAcvD,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,eAAe,EAAE,YAAY,EAC7B,kBAAkB,EAAE,eAAe,EACnC,sBAAsB,EACtB,GAAG,KAAK,EACQ;IAChB,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAO;QACT,CAAC;QAED,IAAI,sBAAsB,EAAE,CAAC;YAC3B,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBACjC,yBAAyB,CAAC,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC,YAAY,CAAC,CAAC;YACjE,CAAC,CAAC,CAAC;YACH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAEf,OAAO,GAAG,EAAE;gBACV,yBAAyB,CAAC,KAAK,CAAC,CAAC;gBACjC,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAExD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,iBAAiB,EAAE,IAAI;YACvB,mCAAmC,EAAE,YAAY;YACjD,sCAAsC,EAAE,eAAe;SACxD,CAAC,KACE,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"dialog-body.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-body.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAcjE,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,eAAe,EAAE,YAAY,EAC7B,kBAAkB,EAAE,eAAe,EACnC,sBAAsB,EACtB,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC/E,MAAM,qBAAqB,GAAG,cAAc,CAAC,GAAG,EAAE;QAChD,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,EAAE,EAAE,CAAC;YACP,qBAAqB,CAAC,EAAE,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;YACxC,wBAAwB,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QACjF,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAO;QACT,CAAC;QAED,IAAI,sBAAsB,EAAE,CAAC;YAC3B,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,qBAAqB,CAAC,CAAC;YACrD,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAEf,OAAO,GAAG,EAAE;gBACV,qBAAqB,CAAC,KAAK,CAAC,CAAC;gBAC7B,wBAAwB,CAAC,KAAK,CAAC,CAAC;gBAChC,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAErG,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,iBAAiB,EAAE,IAAI;YACvB,mCAAmC,EAAE,YAAY;YACjD,sCAAsC,EAAE,eAAe;SACxD,CAAC,EACF,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;YACf,qBAAqB,EAAE,CAAC;YACxB,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACf,CAAC;QACH,CAAC,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}
package/dist/components/dialog/dialog-context.d.ts CHANGED
@@ -3,8 +3,10 @@ export type DialogContextValue = {
3
3
  titleId: string;
4
4
  isOpen: boolean;
5
5
  onClose: () => void;
6
- isBodyHasScroll: boolean;
7
- setIsBodyHasScroll: (value: boolean) => void;
6
+ isBodyHasTopScroll: boolean;
7
+ setIsBodyHasTopScroll: (value: boolean) => void;
8
+ isBodyHasBottomScroll: boolean;
9
+ setIsBodyHasBottomScroll: (value: boolean) => void;
8
10
  };
9
11
  export declare function useDialogContext(): DialogContextValue;
10
12
  export declare function DialogContextProvider({ children, titleId, isOpen, onClose, }: {
package/dist/components/dialog/dialog-context.js CHANGED
@@ -9,13 +9,16 @@ export function useDialogContext() {
9
9
  return context;
10
10
  }
11
11
  export function DialogContextProvider({ children, titleId, isOpen, onClose, }) {
12
- const [isBodyHasScroll, setIsBodyHasScroll] = useState(false);
12
+ const [isBodyHasTopScroll, setIsBodyHasTopScroll] = useState(false);
13
+ const [isBodyHasBottomScroll, setIsBodyHasBottomScroll] = useState(false);
13
14
  return (_jsx(DialogContext.Provider, { value: {
14
15
  titleId,
15
16
  isOpen,
16
17
  onClose,
17
- isBodyHasScroll,
18
- setIsBodyHasScroll,
18
+ isBodyHasTopScroll,
19
+ setIsBodyHasTopScroll,
20
+ isBodyHasBottomScroll,
21
+ setIsBodyHasBottomScroll,
19
22
  }, children: children }));
20
23
  }
21
24
  //# sourceMappingURL=dialog-context.js.map
package/dist/components/dialog/dialog-context.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog-context.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU5E,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAErE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IACzE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,GAMR;IACC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,OAAO;YACP,MAAM;YACN,OAAO;YACP,eAAe;YACf,kBAAkB;SACnB,YAEA,QAAQ,GACc,CAC1B,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"dialog-context.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAY5E,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAErE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IACzE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,GAMR;IACC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1E,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,OAAO;YACP,MAAM;YACN,OAAO;YACP,kBAAkB;YAClB,qBAAqB;YACrB,qBAAqB;YACrB,wBAAwB;SACzB,YAEA,QAAQ,GACc,CAC1B,CAAC;AACJ,CAAC"}
package/dist/components/dialog/dialog-footer.js CHANGED
@@ -3,10 +3,10 @@ import { classNames } from '../../lib/react-helpers.js';
3
3
  import { useDialogContext } from './dialog-context.js';
4
4
  import {} from 'react';
5
5
  export function DialogFooter({ className, ...props }) {
6
- const { isBodyHasScroll } = useDialogContext();
6
+ const { isBodyHasBottomScroll } = useDialogContext();
7
7
  return (_jsx("div", { className: classNames(className, {
8
8
  'dc-dialog__footer': true,
9
- 'dc-dialog__footer_has_scroll-shadow': isBodyHasScroll,
9
+ 'dc-dialog__footer_has_scroll-shadow': isBodyHasBottomScroll,
10
10
  }), ...props }));
11
11
  }
12
12
  //# sourceMappingURL=dialog-footer.js.map
package/dist/components/dialog/dialog-footer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog-footer.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAuB,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACU;IAClB,MAAM,EAAE,eAAe,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC/C,OAAO,CACL,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,mBAAmB,EAAE,IAAI;YACzB,qCAAqC,EAAE,eAAe;SACvD,CAAC,KACE,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"dialog-footer.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAuB,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACU;IAClB,MAAM,EAAE,qBAAqB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,OAAO,CACL,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,mBAAmB,EAAE,IAAI;YACzB,qCAAqC,EAAE,qBAAqB;SAC7D,CAAC,KACE,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}
package/dist/components/dialog/dialog-header.js CHANGED
@@ -4,11 +4,11 @@ import { classNames } from '../../lib/react-helpers.js';
4
4
  import { useDialogContext } from './dialog-context.js';
5
5
  import { IconButton } from '../button/index.js';
6
6
  export function DialogHeader({ className, title, children, contentAlign = 'left', shouldHideCloseButton = false, ...props }) {
7
- const { titleId, isBodyHasScroll, onClose } = useDialogContext();
7
+ const { titleId, isBodyHasTopScroll, onClose } = useDialogContext();
8
8
  return (_jsxs("div", { className: classNames(className, {
9
9
  'dc-dialog__section': true,
10
10
  'dc-dialog__header': true,
11
- 'dc-dialog__header_has_scroll-shadow': isBodyHasScroll,
11
+ 'dc-dialog__header_has_scroll-shadow': isBodyHasTopScroll,
12
12
  [`dc-dialog__header_content-align_${contentAlign}`]: contentAlign,
13
13
  }), ...props, children: [title
14
14
  ? _jsx("h2", { id: titleId, className: "dc-dialog__title", children: title })
package/dist/components/dialog/dialog-header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog-header.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAchD,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,MAAM,EACrB,qBAAqB,GAAG,KAAK,EAC7B,GAAG,KAAK,EACU;IAClB,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEjE,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,oBAAoB,EAAE,IAAI;YAC1B,mBAAmB,EAAE,IAAI;YACzB,qCAAqC,EAAE,eAAe;YACtD,CAAC,mCAAmC,YAAY,EAAE,CAAC,EAAE,YAAY;SAClE,CAAC,KACE,KAAK,aAER,KAAK;gBACJ,CAAC,CAAC,aAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAM;gBAC5D,CAAC,CAAC,IAAI,EACR,KAAC,UAAU,IACT,SAAS,EAAC,yBAAyB,EACnC,WAAW,EAAC,OAAO,EACnB,MAAM,EAAE,qBAAqB,EAC7B,OAAO,EAAE,OAAO,YAEhB,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,GAAI,GACzC,EACZ,QAAQ;gBACP,CAAC,CAAC,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO;gBAC1D,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAA4B;IAC7C,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,IAAI,EAAC,MAAM,KACP,KAAK,YAET,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAC,sBAAsB,GAAG,GAC1E,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"dialog-header.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAchD,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,MAAM,EACrB,qBAAqB,GAAG,KAAK,EAC7B,GAAG,KAAK,EACU;IAClB,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEpE,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,oBAAoB,EAAE,IAAI;YAC1B,mBAAmB,EAAE,IAAI;YACzB,qCAAqC,EAAE,kBAAkB;YACzD,CAAC,mCAAmC,YAAY,EAAE,CAAC,EAAE,YAAY;SAClE,CAAC,KACE,KAAK,aAER,KAAK;gBACJ,CAAC,CAAC,aAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAM;gBAC5D,CAAC,CAAC,IAAI,EACR,KAAC,UAAU,IACT,SAAS,EAAC,yBAAyB,EACnC,WAAW,EAAC,OAAO,EACnB,MAAM,EAAE,qBAAqB,EAC7B,OAAO,EAAE,OAAO,YAEhB,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,GAAI,GACzC,EACZ,QAAQ;gBACP,CAAC,CAAC,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO;gBAC1D,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAA4B;IAC7C,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,IAAI,EAAC,MAAM,KACP,KAAK,YAET,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAC,sBAAsB,GAAG,GAC1E,CACP,CAAC;AACJ,CAAC"}
package/dist/components/dialog/dialog.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --scroll-shadow-top: 0 2px 2px rgb(0 0 0 / 10%);
9
9
  --scroll-shadow-bottom: 0 -2px 2px rgb(0 0 0 / 10%);
10
10
  --section-delimiter-width: 1px;
11
- --section-delimiter-color: var(--dc-border-color-2);
11
+ --section-delimiter-color: var(--dc-neutral-200);
12
12
  --enter-animation-duration: 100ms;
13
13
  --leave-animation-duration: 100ms;
14
14
  --enter-slide-animation-duration: 250ms;
@@ -387,10 +387,11 @@
387
387
  .dark .dc-dialog,
388
388
  .dark.dc-dialog {
389
389
  --modal-background: var(--dc-neutral-800);
390
- --modal-shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-xl);
390
+ --modal-shadow: 0 0 0 1px var(--dc-neutral-500), var(--dc-shadow-xl);
391
391
  --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 75%);
392
392
  --scroll-shadow-top: 0 1px 1px rgb(255 255 255 / 15%);
393
393
  --scroll-shadow-bottom: 0 -1px 1px rgb(255 255 255 / 15%);
394
+ --section-delimiter-color: var(--dc-neutral-500);
394
395
 
395
396
  color-scheme: dark;
396
397
  }
package/dist/components/file-picker/file-picker.css CHANGED
@@ -69,7 +69,7 @@
69
69
  --label-color: var(--dc-white);
70
70
  --icon-color: var(--dc-neutral-400);
71
71
  --caption-color: var(--dc-neutral-400);
72
- --border-color: var(--dc-neutral-600);
72
+ --border-color: var(--dc-neutral-500);
73
73
  --border-color-drag-over: var(--dc-blue-400);
74
74
  --background-drag-over: rgb(var(--dc-blue-300-rgb) / 20%);
75
75
 
package/dist/components/filtered-search/filtered-search.css CHANGED
@@ -299,7 +299,7 @@
299
299
  .dark .dc-filtered-search,
300
300
  .dark.dc-filtered-search {
301
301
  --color: var(--dc-white);
302
- --border-color: var(--dc-neutral-600);
302
+ --border-color: var(--dc-neutral-500);
303
303
  --background: var(--dc-neutral-800);
304
304
  --icon-color: var(--dc-neutral-400);
305
305
  --option-color: var(--dc-white);
package/dist/components/multi-select/multi-select.css CHANGED
@@ -239,7 +239,7 @@
239
239
 
240
240
  /* Checkbox props */
241
241
  --checkbox-background: var(--dc-neutral-800);
242
- --checkbox-border-color: var(--dc-neutral-600);
242
+ --checkbox-border-color: var(--dc-neutral-500);
243
243
  --checkbox-border-color-checked: rgb(var(--dc-white-rgb) / 10%);
244
244
 
245
245
  /* Listbox props */
package/dist/components/popover/popover.css CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
  .dark .dc-popover,
72
72
  .dark.dc-popover {
73
- --border-color: var(--dc-neutral-600);
73
+ --border-color: var(--dc-neutral-500);
74
74
  --shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-lg);
75
75
 
76
76
  color-scheme: dark;
package/dist/components/radio/radio.css CHANGED
@@ -74,7 +74,7 @@
74
74
  .dark .dc-radio,
75
75
  .dark.dc-radio {
76
76
  --background: var(--dc-neutral-800);
77
- --border-color: var(--dc-neutral-600);
77
+ --border-color: var(--dc-neutral-500);
78
78
  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
79
79
 
80
80
  color-scheme: dark;
package/dist/components/search-select/search-select.css CHANGED
@@ -249,3 +249,25 @@
249
249
  .dc-search-select__empty-state_error {
250
250
  color: var(--empty-state-color-error);
251
251
  }
252
+
253
+ .dark .dc-search-select,
254
+ .dark.dc-search-select {
255
+ --button-color: var(--dc-white);
256
+ --button-background: var(--dc-neutral-800);
257
+ --button-border-color: var(--dc-neutral-500);
258
+ --button-border-color-error: var(--dc-red-400);
259
+ --button-focus-ring-color: var(--dc-focus-ring-color);
260
+ --popup-color: var(--dc-white);
261
+ --popup-background: var(--dc-neutral-800);
262
+ --popup-border-color: var(--dc-neutral-500);
263
+ --input-border-color: var(--dc-neutral-500);
264
+ --option-color: var(--dc-neutral-50);
265
+ --option-color-selected: var(--dc-white);
266
+ --option-background-selected: rgb(var(--dc-white-rgb) / 24%);
267
+ --option-color-checked: var(--dc-white);
268
+ --option-background-checked: var(--dc-blue-500);
269
+ --empty-state-color: var(--dc-neutral-400);
270
+ --empty-state-color-error: var(--dc-red-400);
271
+
272
+ color-scheme: dark;
273
+ }
package/dist/components/segmented-control/segmented-control.css CHANGED
@@ -105,13 +105,13 @@
105
105
 
106
106
  .dark .dc-segmented,
107
107
  .dark.dc-segmented {
108
- --border-color: var(--dc-neutral-600);
108
+ --border-color: var(--dc-neutral-500);
109
109
  --background: rgb(var(--dc-neutral-50-rgb) / 10%);
110
110
  --delimiter-color: rgb(var(--dc-neutral-50-rgb) / 40%);
111
111
  --button-color: var(--dc-white);
112
112
  --button-color-selected: var(--dc-neutral-900);
113
113
  --button-border-color: transparent;
114
- --button-border-color-selected: var(--dc-neutral-600);
114
+ --button-border-color-selected: var(--dc-neutral-500);
115
115
 
116
116
  color-scheme: dark;
117
117
  }
package/dist/components/select/select.css CHANGED
@@ -117,7 +117,7 @@
117
117
  .dark .dc-select,
118
118
  .dark.dc-select {
119
119
  --color: var(--dc-white);
120
- --border-color: var(--dc-neutral-600);
120
+ --border-color: var(--dc-neutral-500);
121
121
  --border-color-error: var(--dc-red-400);
122
122
  --background: var(--dc-neutral-800);
123
123
 
package/dist/components/text-input/text-input.css CHANGED
@@ -155,7 +155,7 @@
155
155
  .dark .dc-text-input,
156
156
  .dark.dc-text-input {
157
157
  --color: var(--dc-white);
158
- --border-color: var(--dc-neutral-600);
158
+ --border-color: var(--dc-neutral-500);
159
159
  --border-color-error: var(--dc-red-400);
160
160
  --background: var(--dc-neutral-800);
161
161
  --add-on-color: var(--dc-neutral-400);
package/dist/components/textarea/textarea.css CHANGED
@@ -80,7 +80,7 @@
80
80
  .dark .dc-textarea,
81
81
  .dark.dc-textarea {
82
82
  --color: var(--dc-white);
83
- --border-color: var(--dc-neutral-600);
83
+ --border-color: var(--dc-neutral-500);
84
84
  --border-color-error: var(--dc-red-400);
85
85
  --background: var(--dc-neutral-800);
86
86
 
package/dist/components/token-input/token-input.css CHANGED
@@ -154,7 +154,7 @@
154
154
  .dark.dc-token-input {
155
155
  --color: var(--dc-white);
156
156
  --background: var(--dc-neutral-800);
157
- --border-color: var(--dc-neutral-600);
157
+ --border-color: var(--dc-neutral-500);
158
158
  --border-color-error: var(--dc-red-400);
159
159
  --token-color: var(--dc-white);
160
160
  --token-background: var(--dc-neutral-600);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "draft-components",
3
- "version": "4.21.3",
3
+ "version": "4.22.0",
4
4
  "description": "The React based UI components library.",
5
5
  "type": "module",
6
6
  "exports": {