@databricks/design-system 2.0.0 → 2.0.2

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 (61) hide show
  1. package/AGENTS.md +473 -0
  2. package/CHANGELOG.md +5 -0
  3. package/README.md +5 -3
  4. package/dist/{WizardStepContentWrapper-Dvdj_FRA.js → WizardStepContentWrapper-DnwQIMN1.js} +787 -193
  5. package/dist/WizardStepContentWrapper-DnwQIMN1.js.map +1 -0
  6. package/dist/dubois-colors.less +2 -0
  7. package/dist/index-dark.css +10 -319
  8. package/dist/index-dark.mitigated.css +10 -319
  9. package/dist/index.css +61 -279
  10. package/dist/index.js +1809 -155
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mitigated.css +61 -279
  13. package/dist/patterns.js +10 -1
  14. package/dist/patterns.js.map +1 -1
  15. package/dist-types/design-system/Button/Button.d.ts +2 -2
  16. package/dist-types/design-system/Drawer/DrawerContext.d.ts +9 -0
  17. package/dist-types/design-system/FormV2/RHFAdapters.d.ts +8 -8
  18. package/dist-types/design-system/Grid/Col.d.ts +2 -2
  19. package/dist-types/design-system/Grid/Row.d.ts +2 -2
  20. package/dist-types/design-system/Icon/__generated/icons/FlowsIcon.d.ts +4 -0
  21. package/dist-types/design-system/Icon/__generated/icons/LakewatchAlertIcon.d.ts +4 -0
  22. package/dist-types/design-system/Icon/__generated/icons/LakewatchDatasourceIcon.d.ts +4 -0
  23. package/dist-types/design-system/Icon/__generated/icons/LakewatchDetectionRuleIcon.d.ts +4 -0
  24. package/dist-types/design-system/Icon/__generated/icons/LakewatchParserIcon.d.ts +4 -0
  25. package/dist-types/design-system/Icon/__generated/icons/index.d.ts +5 -0
  26. package/dist-types/design-system/LegacyTooltip/index.d.ts +0 -1
  27. package/dist-types/design-system/Skeleton/TitleSkeleton.d.ts +9 -3
  28. package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxControls.d.ts +2 -0
  29. package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxMultiSelectInput.d.ts +9 -0
  30. package/dist-types/design-system/TypeaheadComboboxReactAria/CountBadge.d.ts +6 -0
  31. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxAddButton.d.ts +3 -0
  32. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxCheckboxItem.d.ts +10 -0
  33. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxControls.d.ts +11 -0
  34. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxFooter.d.ts +2 -0
  35. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxInput.d.ts +9 -0
  36. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxMenu.d.ts +17 -0
  37. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxMenuItem.d.ts +16 -0
  38. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxMultiSelectInput.d.ts +18 -0
  39. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxRoot.d.ts +17 -0
  40. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxSectionHeader.d.ts +1 -0
  41. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxSelectedItem.d.ts +11 -0
  42. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxSeparator.d.ts +1 -0
  43. package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxToggleButton.d.ts +4 -0
  44. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/footerFocus.d.ts +13 -0
  45. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/index.d.ts +4 -0
  46. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useComboboxItems.d.ts +32 -0
  47. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useComboboxState.d.ts +75 -0
  48. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useComboboxStateProps.d.ts +36 -0
  49. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useMultipleSelectionState.d.ts +25 -0
  50. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useScrollOptionIntoView.d.ts +11 -0
  51. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useTypeaheadComboboxContext.d.ts +2 -0
  52. package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useVirtualizedComboboxScroll.d.ts +36 -0
  53. package/dist-types/design-system/TypeaheadComboboxReactAria/index.d.ts +13 -0
  54. package/dist-types/design-system/TypeaheadComboboxReactAria/providers/TypeaheadComboboxContext.d.ts +45 -0
  55. package/dist-types/design-system/Typography/titleLevel.d.ts +11 -0
  56. package/dist-types/design-system/index.d.ts +1 -0
  57. package/dist-types/design-system/utils/useMediaQuery.d.ts +4 -1
  58. package/dist-types/theme/_generated/ValidSemanticColors.d.ts +2 -1
  59. package/package.json +14 -3
  60. package/dist/WizardStepContentWrapper-Dvdj_FRA.js.map +0 -1
  61. package/dist-types/design-system/LegacyTooltip/LegacyInfoTooltip.d.ts +0 -16
@@ -10778,316 +10778,6 @@ textarea.du-bois-dark-input {
10778
10778
  /* stylelint-disable */
10779
10779
  /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
10780
10780
 
10781
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
10782
- /* stylelint-disable no-duplicate-selectors */
10783
- /* stylelint-disable */
10784
- /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
10785
- .du-bois-dark-modal {
10786
- box-sizing: border-box;
10787
- margin: 0;
10788
- padding: 0;
10789
- color: #E8ECF0;
10790
- font-size: 13px;
10791
- font-variant: tabular-nums;
10792
- line-height: 20px;
10793
- list-style: none;
10794
- font-feature-settings: tnum;
10795
- pointer-events: none;
10796
- position: relative;
10797
- top: 100px;
10798
- width: auto;
10799
- max-width: calc(100vw - 32px);
10800
- margin: 0 auto;
10801
- padding-bottom: 24px;
10802
- }
10803
- .du-bois-dark-modal.du-bois-dark-zoom-enter,
10804
- .du-bois-dark-modal.du-bois-darkzoom-appear {
10805
- transform: none;
10806
- opacity: 0;
10807
- animation-duration: 0.3s;
10808
- user-select: none;
10809
- }
10810
- .du-bois-dark-modal-mask {
10811
- position: fixed;
10812
- top: 0;
10813
- right: 0;
10814
- bottom: 0;
10815
- left: 0;
10816
- z-index: 1000;
10817
- height: 100%;
10818
- background-color: rgba(0, 0, 0, 0.45);
10819
- }
10820
- .du-bois-dark-modal-mask-hidden {
10821
- display: none;
10822
- }
10823
- .du-bois-dark-modal-wrap {
10824
- position: fixed;
10825
- top: 0;
10826
- right: 0;
10827
- bottom: 0;
10828
- left: 0;
10829
- overflow: auto;
10830
- outline: 0;
10831
- -webkit-overflow-scrolling: touch;
10832
- }
10833
- .du-bois-dark-modal-wrap {
10834
- z-index: 1000;
10835
- }
10836
- .du-bois-dark-modal-title {
10837
- margin: 0;
10838
- color: rgba(255, 255, 255, 0.85);
10839
- font-weight: 500;
10840
- font-size: 18px;
10841
- line-height: 22px;
10842
- word-wrap: break-word;
10843
- }
10844
- .du-bois-dark-modal-content {
10845
- position: relative;
10846
- background-color: #1f1f1f;
10847
- background-clip: padding-box;
10848
- border: 0;
10849
- border-radius: 4px;
10850
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
10851
- pointer-events: auto;
10852
- }
10853
- .du-bois-dark-modal-close {
10854
- position: absolute;
10855
- top: 0;
10856
- right: 0;
10857
- z-index: 10;
10858
- padding: 0;
10859
- color: #92A4B3;
10860
- font-weight: 700;
10861
- line-height: 1;
10862
- text-decoration: none;
10863
- background: transparent;
10864
- border: 0;
10865
- outline: 0;
10866
- cursor: pointer;
10867
- transition: color 0.3s;
10868
- }
10869
- .du-bois-dark-modal-close-x {
10870
- display: block;
10871
- width: 102px;
10872
- height: 102px;
10873
- font-size: 18px;
10874
- font-style: normal;
10875
- line-height: 102px;
10876
- text-align: center;
10877
- text-transform: none;
10878
- text-rendering: auto;
10879
- }
10880
- .du-bois-dark-modal-close:focus,
10881
- .du-bois-dark-modal-close:hover {
10882
- color: rgba(255, 255, 255, 0.75);
10883
- text-decoration: none;
10884
- }
10885
- .du-bois-dark-modal-header {
10886
- padding: 40px 40px 20px;
10887
- color: #E8ECF0;
10888
- background: #1f1f1f;
10889
- border-bottom: 0px solid #303030;
10890
- border-radius: 4px 4px 0 0;
10891
- }
10892
- .du-bois-dark-modal-body {
10893
- padding: 0 40px;
10894
- font-size: 13px;
10895
- line-height: 20px;
10896
- word-wrap: break-word;
10897
- }
10898
- .du-bois-dark-modal-footer {
10899
- padding: 0px 0px;
10900
- text-align: right;
10901
- background: transparent;
10902
- border-top: 0px solid #303030;
10903
- border-radius: 0 0 4px 4px;
10904
- }
10905
- .du-bois-dark-modal-footer .du-bois-dark-btn + .du-bois-dark-btn:not(.du-bois-dark-dropdown-trigger) {
10906
- margin-bottom: 0;
10907
- margin-left: 8px;
10908
- }
10909
- .du-bois-dark-modal-open {
10910
- overflow: hidden;
10911
- }
10912
- .du-bois-dark-modal-centered {
10913
- text-align: center;
10914
- }
10915
- .du-bois-dark-modal-centered::before {
10916
- display: inline-block;
10917
- width: 0;
10918
- height: 100%;
10919
- vertical-align: middle;
10920
- content: '';
10921
- }
10922
- .du-bois-dark-modal-centered .du-bois-dark-modal {
10923
- top: 0;
10924
- display: inline-block;
10925
- text-align: left;
10926
- vertical-align: middle;
10927
- }
10928
- @media (max-width: 767px) {
10929
- .du-bois-dark-modal {
10930
- max-width: calc(100vw - 16px);
10931
- margin: 8px auto;
10932
- }
10933
- .du-bois-dark-modal-centered .du-bois-dark-modal {
10934
- flex: 1;
10935
- }
10936
- }
10937
- .du-bois-dark-modal-confirm .du-bois-dark-modal-header {
10938
- display: none;
10939
- }
10940
- .du-bois-dark-modal-confirm .du-bois-dark-modal-body {
10941
- padding: 32px 32px 24px;
10942
- }
10943
- .du-bois-dark-modal-confirm-body-wrapper::before {
10944
- display: table;
10945
- content: '';
10946
- }
10947
- .du-bois-dark-modal-confirm-body-wrapper::after {
10948
- display: table;
10949
- clear: both;
10950
- content: '';
10951
- }
10952
- .du-bois-dark-modal-confirm-body .du-bois-dark-modal-confirm-title {
10953
- display: block;
10954
- overflow: hidden;
10955
- color: rgba(255, 255, 255, 0.85);
10956
- font-weight: 500;
10957
- font-size: 18px;
10958
- line-height: 1.4;
10959
- }
10960
- .du-bois-dark-modal-confirm-body .du-bois-dark-modal-confirm-content {
10961
- margin-top: 8px;
10962
- color: #E8ECF0;
10963
- font-size: 13px;
10964
- }
10965
- .du-bois-dark-modal-confirm-body > .anticon {
10966
- float: left;
10967
- margin-right: 16px;
10968
- font-size: 22px;
10969
- }
10970
- .du-bois-dark-modal-confirm-body > .anticon + .du-bois-dark-modal-confirm-title + .du-bois-dark-modal-confirm-content {
10971
- margin-left: 38px;
10972
- }
10973
- .du-bois-dark-modal-confirm .du-bois-dark-modal-confirm-btns {
10974
- float: right;
10975
- margin-top: 24px;
10976
- }
10977
- .du-bois-dark-modal-confirm .du-bois-dark-modal-confirm-btns .du-bois-dark-btn + .du-bois-dark-btn {
10978
- margin-bottom: 0;
10979
- margin-left: 8px;
10980
- }
10981
- .du-bois-dark-modal-confirm-error .du-bois-dark-modal-confirm-body > .anticon {
10982
- color: #E65B77;
10983
- }
10984
- .du-bois-dark-modal-confirm-warning .du-bois-dark-modal-confirm-body > .anticon,
10985
- .du-bois-dark-modal-confirm-confirm .du-bois-dark-modal-confirm-body > .anticon {
10986
- color: #AF5B23;
10987
- }
10988
- .du-bois-dark-modal-confirm-info .du-bois-dark-modal-confirm-body > .anticon {
10989
- color: #64727D;
10990
- }
10991
- .du-bois-dark-modal-confirm-success .du-bois-dark-modal-confirm-body > .anticon {
10992
- color: #34824F;
10993
- }
10994
- .du-bois-dark-modal .du-bois-dark-picker-clear,
10995
- .du-bois-dark-modal .du-bois-dark-slider-handle,
10996
- .du-bois-dark-modal .du-bois-dark-anchor-wrapper,
10997
- .du-bois-dark-modal .du-bois-dark-collapse-content,
10998
- .du-bois-dark-modal .du-bois-dark-timeline-item-head,
10999
- .du-bois-dark-modal .du-bois-dark-card {
11000
- background-color: #1f1f1f;
11001
- }
11002
- .du-bois-dark-modal .du-bois-dark-transfer-list-header {
11003
- background: #1f1f1f;
11004
- border-bottom: 1px solid #3a3a3a;
11005
- }
11006
- .du-bois-dark-modal .du-bois-dark-transfer-list-content-item:not(.du-bois-dark-transfer-list-content-item-disabled):hover {
11007
- background-color: rgba(255, 255, 255, 0.08);
11008
- }
11009
- .du-bois-dark-modal tr.du-bois-dark-table-expanded-row > td,
11010
- .du-bois-dark-modal tr.du-bois-dark-table-expanded-row:hover > td {
11011
- background: #272727;
11012
- }
11013
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-small thead > tr > th {
11014
- background-color: #1f1f1f;
11015
- border-bottom: 1px solid #3a3a3a;
11016
- }
11017
- .du-bois-dark-modal .du-bois-dark-table {
11018
- background-color: #1f1f1f;
11019
- }
11020
- .du-bois-dark-modal .du-bois-dark-table .du-bois-dark-table-row-expand-icon {
11021
- border: 1px solid #3a3a3a;
11022
- }
11023
- .du-bois-dark-modal .du-bois-dark-table tfoot > tr > th,
11024
- .du-bois-dark-modal .du-bois-dark-table tfoot > tr > td {
11025
- border-bottom: 1px solid #3a3a3a;
11026
- }
11027
- .du-bois-dark-modal .du-bois-dark-table thead > tr > th {
11028
- background-color: #272727;
11029
- border-bottom: 1px solid #3a3a3a;
11030
- }
11031
- .du-bois-dark-modal .du-bois-dark-table tbody > tr > td {
11032
- border-bottom: 1px solid #3a3a3a;
11033
- }
11034
- .du-bois-dark-modal .du-bois-dark-table tbody > tr > td.du-bois-dark-table-cell-fix-left,
11035
- .du-bois-dark-modal .du-bois-dark-table tbody > tr > td.du-bois-dark-table-cell-fix-right {
11036
- background-color: #1f1f1f;
11037
- }
11038
- .du-bois-dark-modal .du-bois-dark-table tbody > tr.du-bois-dark-table-row:hover > td {
11039
- background: #303030;
11040
- }
11041
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-title {
11042
- border: 1px solid #3a3a3a;
11043
- }
11044
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered thead > tr > th,
11045
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered tbody > tr > td,
11046
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered tfoot > tr > th,
11047
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered tfoot > tr > td {
11048
- border-right: 1px solid #3a3a3a;
11049
- }
11050
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-cell-fix-right-first::after {
11051
- border-right: 1px solid #3a3a3a;
11052
- }
11053
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered table thead > tr:not(:last-child) > th {
11054
- border-bottom: 1px solid #303030;
11055
- }
11056
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-container {
11057
- border: 1px solid #3a3a3a;
11058
- }
11059
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-expanded-row-fixed::after {
11060
- border-right: 1px solid #3a3a3a;
11061
- }
11062
- .du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-footer {
11063
- border: 1px solid #3a3a3a;
11064
- }
11065
- .du-bois-dark-modal .du-bois-dark-table .du-bois-dark-table-filter-trigger-container-open {
11066
- background-color: #525252;
11067
- }
11068
- .du-bois-dark-modal .du-bois-dark-picker-calendar-full {
11069
- background-color: #1f1f1f;
11070
- }
11071
- .du-bois-dark-modal .du-bois-dark-picker-calendar-full .du-bois-dark-picker-panel {
11072
- background-color: #1f1f1f;
11073
- }
11074
- .du-bois-dark-modal .du-bois-dark-picker-calendar-full .du-bois-dark-picker-panel .du-bois-dark-picker-calendar-date {
11075
- border-top: 2px solid #3a3a3a;
11076
- }
11077
- .du-bois-dark-modal .du-bois-dark-tabs.du-bois-dark-tabs-card .du-bois-dark-tabs-card-bar .du-bois-dark-tabs-tab-active {
11078
- background-color: #1f1f1f;
11079
- border-bottom: 1px solid #1f1f1f;
11080
- }
11081
- .du-bois-dark-modal .du-bois-dark-badge-count {
11082
- box-shadow: 0 0 0 1px #1f1f1f;
11083
- }
11084
- .du-bois-dark-modal .du-bois-dark-tree-show-line .du-bois-dark-tree-switcher {
11085
- background: #1f1f1f;
11086
- }
11087
- /* stylelint-disable no-duplicate-selectors */
11088
- /* stylelint-disable */
11089
- /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
11090
-
11091
10781
  /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
11092
10782
  /* stylelint-disable no-duplicate-selectors */
11093
10783
  /* stylelint-disable */
@@ -16382,6 +16072,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
16382
16072
  --db-color-text-validation-success: #3ba65e;
16383
16073
  --db-color-text-validation-warning: #de7921;
16384
16074
  --db-color-tooltip-background-tooltip: #e8ecf0;
16075
+ --db-color-tooltip-text-tooltip: #11171c;
16385
16076
  }
16386
16077
 
16387
16078
  /* Layout primitive classes — internal Du Bois use for now (not a published
@@ -16498,9 +16189,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
16498
16189
  --db-checkbox-focus-ring-offset: var(--db-selection-toggle-focus-ring-offset);
16499
16190
  --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
16500
16191
 
16501
- /* Indeterminate mark — sized to look like AntD's `<inner>` ::after dash. */
16192
+ /* Indeterminate mark — the horizontal dash shown in the mixed state. */
16502
16193
  --db-checkbox-indeterminate-mark-width: 8px;
16503
- --db-checkbox-indeterminate-mark-height: 2px;
16194
+ --db-checkbox-indeterminate-mark-height: 3px;
16504
16195
  }
16505
16196
 
16506
16197
  /* Native-input <Checkbox> styles. Classic CSS only — no native nesting (the
@@ -16831,17 +16522,17 @@ span.du-bois-dark-typography-ellipsis-single-line {
16831
16522
  --db-switch-transition-duration: var(--db-selection-toggle-transition-duration);
16832
16523
  }
16833
16524
 
16834
- /* Hover/press live on the root (label), not the input: the input has `pointer-events: none`. */
16525
+ /* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
16835
16526
 
16836
- /* On focus, recolor the track border to the checked-fill color on top of the outline ring. Matching
16837
- * AntD, the ring sits flush when off and gains a 1px offset when checked (see the checked rule below). */
16527
+ /* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
16528
+ * and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */
16838
16529
 
16839
- /* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
16530
+ /* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
16840
16531
 
16841
- /* Hidden but still focusable/in tab order so `:has()` can read its state; pointer events fall through
16842
- * to the label. */
16532
+ /* On focus, recolor the border to the checked-fill color on top of the outline ring. Matching AntD,
16533
+ * the ring sits flush when off and gains a 1px offset when checked. */
16843
16534
 
16844
- /* `border-color: inherit` picks up the track's per-state color, so it's only set on the track. */
16535
+ /* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
16845
16536
 
16846
16537
  /* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
16847
16538