draft-components 4.21.4 → 4.22.1

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 +17 -16
  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 +2 -2
  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 +1 -1
  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
 
@@ -3412,7 +3413,7 @@
3412
3413
  .dark.dc-search-select {
3413
3414
  --button-color: var(--dc-white);
3414
3415
  --button-background: var(--dc-neutral-800);
3415
- --button-border-color: var(--dc-neutral-600);
3416
+ --button-border-color: var(--dc-neutral-500);
3416
3417
  --button-border-color-error: var(--dc-red-400);
3417
3418
  --button-focus-ring-color: var(--dc-focus-ring-color);
3418
3419
  --popup-color: var(--dc-white);
@@ -3617,7 +3618,7 @@
3617
3618
  .dark .dc-checkbox,
3618
3619
  .dark.dc-checkbox {
3619
3620
  --background: var(--dc-neutral-800);
3620
- --border-color: var(--dc-neutral-600);
3621
+ --border-color: var(--dc-neutral-500);
3621
3622
  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
3622
3623
 
3623
3624
  color-scheme: dark;
@@ -3699,7 +3700,7 @@
3699
3700
  .dark .dc-radio,
3700
3701
  .dark.dc-radio {
3701
3702
  --background: var(--dc-neutral-800);
3702
- --border-color: var(--dc-neutral-600);
3703
+ --border-color: var(--dc-neutral-500);
3703
3704
  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
3704
3705
 
3705
3706
  color-scheme: dark;
@@ -4037,7 +4038,7 @@
4037
4038
  --label-color: var(--dc-white);
4038
4039
  --icon-color: var(--dc-neutral-400);
4039
4040
  --caption-color: var(--dc-neutral-400);
4040
- --border-color: var(--dc-neutral-600);
4041
+ --border-color: var(--dc-neutral-500);
4041
4042
  --border-color-drag-over: var(--dc-blue-400);
4042
4043
  --background-drag-over: rgb(var(--dc-blue-300-rgb) / 20%);
4043
4044
 
@@ -4355,13 +4356,13 @@
4355
4356
 
4356
4357
  .dark .dc-segmented,
4357
4358
  .dark.dc-segmented {
4358
- --border-color: var(--dc-neutral-600);
4359
+ --border-color: var(--dc-neutral-500);
4359
4360
  --background: rgb(var(--dc-neutral-50-rgb) / 10%);
4360
4361
  --delimiter-color: rgb(var(--dc-neutral-50-rgb) / 40%);
4361
4362
  --button-color: var(--dc-white);
4362
4363
  --button-color-selected: var(--dc-neutral-900);
4363
4364
  --button-border-color: transparent;
4364
- --button-border-color-selected: var(--dc-neutral-600);
4365
+ --button-border-color-selected: var(--dc-neutral-500);
4365
4366
 
4366
4367
  color-scheme: dark;
4367
4368
  }
@@ -5999,7 +6000,7 @@
5999
6000
 
6000
6001
  /* Checkbox props */
6001
6002
  --checkbox-background: var(--dc-neutral-800);
6002
- --checkbox-border-color: var(--dc-neutral-600);
6003
+ --checkbox-border-color: var(--dc-neutral-500);
6003
6004
  --checkbox-border-color-checked: rgb(var(--dc-white-rgb) / 10%);
6004
6005
 
6005
6006
  /* Listbox props */
@@ -6310,12 +6311,12 @@
6310
6311
  .dark .dc-filtered-search,
6311
6312
  .dark.dc-filtered-search {
6312
6313
  --color: var(--dc-white);
6313
- --border-color: var(--dc-neutral-600);
6314
+ --border-color: var(--dc-neutral-500);
6314
6315
  --background: var(--dc-neutral-800);
6315
6316
  --icon-color: var(--dc-neutral-400);
6316
6317
  --option-color: var(--dc-white);
6317
6318
  --listbox-background: var(--dc-neutral-800);
6318
- --listbox-shadow: 0 0 0 1px var(--dc-neutral-700), var(--dc-shadow-lg);
6319
+ --listbox-shadow: 0 0 0 1px var(--dc-neutral-500), var(--dc-shadow-lg);
6319
6320
  --token-color: var(--dc-white);
6320
6321
  --token-background: var(--dc-neutral-600);
6321
6322
  --token-background-hover: rgb(var(--dc-white-rgb) / 10%);
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,12 +299,12 @@
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);
306
306
  --listbox-background: var(--dc-neutral-800);
307
- --listbox-shadow: 0 0 0 1px var(--dc-neutral-700), var(--dc-shadow-lg);
307
+ --listbox-shadow: 0 0 0 1px var(--dc-neutral-500), var(--dc-shadow-lg);
308
308
  --token-color: var(--dc-white);
309
309
  --token-background: var(--dc-neutral-600);
310
310
  --token-background-hover: rgb(var(--dc-white-rgb) / 10%);
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
@@ -254,7 +254,7 @@
254
254
  .dark.dc-search-select {
255
255
  --button-color: var(--dc-white);
256
256
  --button-background: var(--dc-neutral-800);
257
- --button-border-color: var(--dc-neutral-600);
257
+ --button-border-color: var(--dc-neutral-500);
258
258
  --button-border-color-error: var(--dc-red-400);
259
259
  --button-focus-ring-color: var(--dc-focus-ring-color);
260
260
  --popup-color: var(--dc-white);
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.4",
3
+ "version": "4.22.1",
4
4
  "description": "The React based UI components library.",
5
5
  "type": "module",
6
6
  "exports": {