@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
@@ -10725,220 +10725,6 @@ textarea.du-bois-light-input {
10725
10725
  background: rgba(255, 255, 255, 0.35) !important;
10726
10726
  }
10727
10727
 
10728
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
10729
- /* stylelint-disable no-duplicate-selectors */
10730
- /* stylelint-disable */
10731
- /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
10732
- .du-bois-light-modal {
10733
- box-sizing: border-box;
10734
- margin: 0;
10735
- padding: 0;
10736
- color: #161616;
10737
- font-size: 13px;
10738
- font-variant: tabular-nums;
10739
- line-height: 20px;
10740
- list-style: none;
10741
- font-feature-settings: 'tnum';
10742
- pointer-events: none;
10743
- position: relative;
10744
- top: 100px;
10745
- width: auto;
10746
- max-width: calc(100vw - 32px);
10747
- margin: 0 auto;
10748
- padding-bottom: 24px;
10749
- }
10750
- .du-bois-light-modal.du-bois-light-zoom-enter,
10751
- .du-bois-light-modal.du-bois-lightzoom-appear {
10752
- transform: none;
10753
- opacity: 0;
10754
- animation-duration: 0.3s;
10755
- user-select: none;
10756
- }
10757
- .du-bois-light-modal-mask {
10758
- position: fixed;
10759
- top: 0;
10760
- right: 0;
10761
- bottom: 0;
10762
- left: 0;
10763
- z-index: 1000;
10764
- height: 100%;
10765
- background-color: rgba(0, 0, 0, 0.45);
10766
- }
10767
- .du-bois-light-modal-mask-hidden {
10768
- display: none;
10769
- }
10770
- .du-bois-light-modal-wrap {
10771
- position: fixed;
10772
- top: 0;
10773
- right: 0;
10774
- bottom: 0;
10775
- left: 0;
10776
- overflow: auto;
10777
- outline: 0;
10778
- -webkit-overflow-scrolling: touch;
10779
- }
10780
- .du-bois-light-modal-wrap {
10781
- z-index: 1000;
10782
- }
10783
- .du-bois-light-modal-title {
10784
- margin: 0;
10785
- color: rgba(0, 0, 0, 0.85);
10786
- font-weight: 500;
10787
- font-size: 18px;
10788
- line-height: 22px;
10789
- word-wrap: break-word;
10790
- }
10791
- .du-bois-light-modal-content {
10792
- position: relative;
10793
- background-color: #fff;
10794
- background-clip: padding-box;
10795
- border: 0;
10796
- border-radius: 4px;
10797
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
10798
- pointer-events: auto;
10799
- }
10800
- .du-bois-light-modal-close {
10801
- position: absolute;
10802
- top: 0;
10803
- right: 0;
10804
- z-index: 10;
10805
- padding: 0;
10806
- color: #6F6F6F;
10807
- font-weight: 700;
10808
- line-height: 1;
10809
- text-decoration: none;
10810
- background: transparent;
10811
- border: 0;
10812
- outline: 0;
10813
- cursor: pointer;
10814
- transition: color 0.3s;
10815
- }
10816
- .du-bois-light-modal-close-x {
10817
- display: block;
10818
- width: 102px;
10819
- height: 102px;
10820
- font-size: 18px;
10821
- font-style: normal;
10822
- line-height: 102px;
10823
- text-align: center;
10824
- text-transform: none;
10825
- text-rendering: auto;
10826
- }
10827
- .du-bois-light-modal-close:focus,
10828
- .du-bois-light-modal-close:hover {
10829
- color: rgba(0, 0, 0, 0.75);
10830
- text-decoration: none;
10831
- }
10832
- .du-bois-light-modal-header {
10833
- padding: 40px 40px 20px;
10834
- color: #161616;
10835
- background: #fff;
10836
- border-bottom: 0px solid #f0f0f0;
10837
- border-radius: 4px 4px 0 0;
10838
- }
10839
- .du-bois-light-modal-body {
10840
- padding: 0 40px;
10841
- font-size: 13px;
10842
- line-height: 20px;
10843
- word-wrap: break-word;
10844
- }
10845
- .du-bois-light-modal-footer {
10846
- padding: 0px 0px;
10847
- text-align: right;
10848
- background: transparent;
10849
- border-top: 0px solid #f0f0f0;
10850
- border-radius: 0 0 4px 4px;
10851
- }
10852
- .du-bois-light-modal-footer .du-bois-light-btn + .du-bois-light-btn:not(.du-bois-light-dropdown-trigger) {
10853
- margin-bottom: 0;
10854
- margin-left: 8px;
10855
- }
10856
- .du-bois-light-modal-open {
10857
- overflow: hidden;
10858
- }
10859
- .du-bois-light-modal-centered {
10860
- text-align: center;
10861
- }
10862
- .du-bois-light-modal-centered::before {
10863
- display: inline-block;
10864
- width: 0;
10865
- height: 100%;
10866
- vertical-align: middle;
10867
- content: '';
10868
- }
10869
- .du-bois-light-modal-centered .du-bois-light-modal {
10870
- top: 0;
10871
- display: inline-block;
10872
- text-align: left;
10873
- vertical-align: middle;
10874
- }
10875
- @media (max-width: 767px) {
10876
- .du-bois-light-modal {
10877
- max-width: calc(100vw - 16px);
10878
- margin: 8px auto;
10879
- }
10880
- .du-bois-light-modal-centered .du-bois-light-modal {
10881
- flex: 1;
10882
- }
10883
- }
10884
- .du-bois-light-modal-confirm .du-bois-light-modal-header {
10885
- display: none;
10886
- }
10887
- .du-bois-light-modal-confirm .du-bois-light-modal-body {
10888
- padding: 32px 32px 24px;
10889
- }
10890
- .du-bois-light-modal-confirm-body-wrapper::before {
10891
- display: table;
10892
- content: '';
10893
- }
10894
- .du-bois-light-modal-confirm-body-wrapper::after {
10895
- display: table;
10896
- clear: both;
10897
- content: '';
10898
- }
10899
- .du-bois-light-modal-confirm-body .du-bois-light-modal-confirm-title {
10900
- display: block;
10901
- overflow: hidden;
10902
- color: rgba(0, 0, 0, 0.85);
10903
- font-weight: 500;
10904
- font-size: 18px;
10905
- line-height: 1.4;
10906
- }
10907
- .du-bois-light-modal-confirm-body .du-bois-light-modal-confirm-content {
10908
- margin-top: 8px;
10909
- color: #161616;
10910
- font-size: 13px;
10911
- }
10912
- .du-bois-light-modal-confirm-body > .anticon {
10913
- float: left;
10914
- margin-right: 16px;
10915
- font-size: 22px;
10916
- }
10917
- .du-bois-light-modal-confirm-body > .anticon + .du-bois-light-modal-confirm-title + .du-bois-light-modal-confirm-content {
10918
- margin-left: 38px;
10919
- }
10920
- .du-bois-light-modal-confirm .du-bois-light-modal-confirm-btns {
10921
- float: right;
10922
- margin-top: 24px;
10923
- }
10924
- .du-bois-light-modal-confirm .du-bois-light-modal-confirm-btns .du-bois-light-btn + .du-bois-light-btn {
10925
- margin-bottom: 0;
10926
- margin-left: 8px;
10927
- }
10928
- .du-bois-light-modal-confirm-error .du-bois-light-modal-confirm-body > .anticon {
10929
- color: #C82D4C;
10930
- }
10931
- .du-bois-light-modal-confirm-warning .du-bois-light-modal-confirm-body > .anticon,
10932
- .du-bois-light-modal-confirm-confirm .du-bois-light-modal-confirm-body > .anticon {
10933
- color: #AF5B23;
10934
- }
10935
- .du-bois-light-modal-confirm-info .du-bois-light-modal-confirm-body > .anticon {
10936
- color: #64727D;
10937
- }
10938
- .du-bois-light-modal-confirm-success .du-bois-light-modal-confirm-body > .anticon {
10939
- color: #34824F;
10940
- }
10941
-
10942
10728
  /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
10943
10729
  /* stylelint-disable no-duplicate-selectors */
10944
10730
  /* stylelint-disable */
@@ -16008,6 +15794,7 @@ span.du-bois-light-typography-ellipsis-single-line {
16008
15794
  --db-color-text-validation-success: #277c43;
16009
15795
  --db-color-text-validation-warning: #be501e;
16010
15796
  --db-color-tooltip-background-tooltip: #161616;
15797
+ --db-color-tooltip-text-tooltip: #ffffff;
16011
15798
  }
16012
15799
 
16013
15800
  /* THIS FILE IS AUTOMATICALLY GENERATED FROM Figma tokens. DO NOT EDIT.
@@ -16147,9 +15934,9 @@ span.du-bois-light-typography-ellipsis-single-line {
16147
15934
  --db-checkbox-focus-ring-offset: var(--db-selection-toggle-focus-ring-offset);
16148
15935
  --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
16149
15936
 
16150
- /* Indeterminate mark — sized to look like AntD's `<inner>` ::after dash. */
15937
+ /* Indeterminate mark — the horizontal dash shown in the mixed state. */
16151
15938
  --db-checkbox-indeterminate-mark-width: 8px;
16152
- --db-checkbox-indeterminate-mark-height: 2px;
15939
+ --db-checkbox-indeterminate-mark-height: 3px;
16153
15940
  }
16154
15941
 
16155
15942
  /* Native-input <Checkbox> styles. Classic CSS only — no native nesting (the
@@ -16322,7 +16109,9 @@ span.du-bois-light-typography-ellipsis-single-line {
16322
16109
  grid-area: 1 / 1;
16323
16110
  inline-size: var(--db-checkbox-indeterminate-mark-width);
16324
16111
  block-size: var(--db-checkbox-indeterminate-mark-height);
16325
- border-radius: 1px;
16112
+ /* CSS clamps this to half the 3px height, giving fully rounded end caps so the
16113
+ * dash reads as a pill rather than a flat bar. */
16114
+ border-radius: 4px;
16326
16115
  background-color: var(--db-checkbox-icon-color);
16327
16116
  opacity: 0;
16328
16117
  transition: opacity var(--db-checkbox-transition-duration) ease;
@@ -16832,116 +16621,109 @@ span.du-bois-light-typography-ellipsis-single-line {
16832
16621
  * (e.g. a following FormMessage) down a few px, breaking the form-flow spacing. */
16833
16622
  display: flex;
16834
16623
  align-items: center;
16835
- position: relative;
16836
16624
  cursor: pointer;
16837
16625
  user-select: none;
16838
16626
  width: fit-content;
16839
16627
  margin-inline-end: var(--db-switch-spacing);
16840
16628
  }
16841
16629
 
16842
- /* Hover/press live on the root (label), not the input: the input has `pointer-events: none`. */
16843
- .ds-switch:hover:has(input:not(:disabled, :checked)) .ds-switch-track {
16630
+ .ds-switch:has(input:disabled) {
16631
+ cursor: not-allowed;
16632
+ }
16633
+
16634
+ /* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
16635
+ .ds-switch input {
16636
+ appearance: none;
16637
+ position: relative;
16638
+ flex-shrink: 0;
16639
+ margin: 0;
16640
+ cursor: pointer;
16641
+ inline-size: var(--db-switch-track-width);
16642
+ block-size: var(--db-switch-track-height);
16643
+ border: var(--db-switch-border-width) solid var(--db-switch-border-default);
16644
+ border-radius: var(--db-switch-border-radius);
16645
+ background-color: var(--db-switch-bg-default);
16646
+ box-sizing: border-box;
16647
+ transition:
16648
+ background-color var(--db-switch-transition-duration) ease,
16649
+ border-color var(--db-switch-transition-duration) ease;
16650
+ }
16651
+
16652
+ /* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
16653
+ * and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */
16654
+ .ds-switch input::before {
16655
+ content: '';
16656
+ position: absolute;
16657
+ top: 50%;
16658
+ left: calc(-1 * var(--db-switch-border-width));
16659
+ inline-size: var(--db-switch-thumb-size);
16660
+ block-size: var(--db-switch-thumb-size);
16661
+ border: var(--db-switch-border-width) solid;
16662
+ border-color: inherit;
16663
+ border-radius: var(--db-switch-border-radius);
16664
+ background-color: var(--db-switch-thumb-color);
16665
+ box-sizing: border-box;
16666
+ transform: translateY(-50%);
16667
+ transition: transform var(--db-switch-transition-duration) ease;
16668
+ }
16669
+
16670
+ /* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
16671
+ .ds-switch:hover input:not(:disabled):not(:checked) {
16844
16672
  background-color: var(--db-switch-bg-hover);
16845
16673
  border-color: var(--db-switch-border-hover);
16846
16674
  }
16847
16675
 
16848
- .ds-switch:active:has(input:not(:disabled, :checked)) .ds-switch-track {
16676
+ .ds-switch:active input:not(:disabled):not(:checked) {
16849
16677
  background-color: var(--db-switch-bg-press);
16850
16678
  border-color: var(--db-switch-border-press);
16851
16679
  }
16852
16680
 
16853
- .ds-switch:has(input:checked) .ds-switch-track {
16681
+ .ds-switch input:checked {
16854
16682
  background-color: var(--db-switch-bg-checked);
16855
16683
  border-color: var(--db-switch-border-checked);
16856
16684
  }
16857
16685
 
16858
- .ds-switch:hover:has(input:checked:not(:disabled)) .ds-switch-track {
16686
+ .ds-switch:hover input:checked:not(:disabled) {
16859
16687
  background-color: var(--db-switch-bg-checked-hover);
16860
16688
  border-color: var(--db-switch-border-checked-hover);
16861
16689
  }
16862
16690
 
16863
- .ds-switch:active:has(input:checked:not(:disabled)) .ds-switch-track {
16691
+ .ds-switch:active input:checked:not(:disabled) {
16864
16692
  background-color: var(--db-switch-bg-checked-press);
16865
16693
  border-color: var(--db-switch-border-checked-press);
16866
16694
  }
16867
16695
 
16868
- .ds-switch:has(input:checked) .ds-switch-thumb {
16696
+ .ds-switch input:checked::before {
16869
16697
  transform: translateY(-50%) translateX(calc(var(--db-switch-track-width) - var(--db-switch-thumb-size)));
16870
16698
  }
16871
16699
 
16872
- /* On focus, recolor the track border to the checked-fill color on top of the outline ring. Matching
16873
- * AntD, the ring sits flush when off and gains a 1px offset when checked (see the checked rule below). */
16874
- .ds-switch:has(input:focus-visible) .ds-switch-track {
16700
+ /* On focus, recolor the border to the checked-fill color on top of the outline ring. Matching AntD,
16701
+ * the ring sits flush when off and gains a 1px offset when checked. */
16702
+ .ds-switch input:focus-visible {
16875
16703
  border-color: var(--db-switch-border-focus);
16876
16704
  outline: var(--db-switch-focus-ring-width) solid var(--db-switch-focus-ring-color);
16877
16705
  outline-offset: 0;
16878
16706
  }
16879
16707
 
16880
- .ds-switch:has(input:checked:focus-visible) .ds-switch-track {
16708
+ .ds-switch input:checked:focus-visible {
16881
16709
  outline-offset: var(--db-switch-focus-ring-offset);
16882
16710
  }
16883
16711
 
16884
- .ds-switch:has(input:disabled) {
16712
+ .ds-switch input:disabled {
16885
16713
  cursor: not-allowed;
16886
- }
16887
-
16888
- .ds-switch:has(input:disabled) .ds-switch-track {
16889
16714
  background-color: var(--db-switch-bg-disabled);
16890
16715
  border-color: var(--db-switch-border-disabled);
16891
16716
  }
16892
16717
 
16893
16718
  /* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
16894
- .ds-switch:has(input:checked:disabled) .ds-switch-track {
16719
+ .ds-switch input:checked:disabled {
16895
16720
  background-color: var(--db-switch-bg-checked-disabled);
16896
16721
  border-color: var(--db-switch-bg-checked-disabled);
16897
16722
  }
16898
16723
 
16899
- /* Hidden but still focusable/in tab order so `:has()` can read its state; pointer events fall through
16900
- * to the label. */
16901
- .ds-switch input {
16902
- position: absolute;
16903
- inset: 0;
16904
- inline-size: var(--db-switch-track-width);
16905
- block-size: var(--db-switch-track-height);
16906
- margin: 0;
16907
- opacity: 0;
16908
- pointer-events: none;
16909
- }
16910
-
16911
- .ds-switch-track {
16912
- position: relative;
16913
- flex-shrink: 0;
16914
- inline-size: var(--db-switch-track-width);
16915
- block-size: var(--db-switch-track-height);
16916
- border: var(--db-switch-border-width) solid var(--db-switch-border-default);
16917
- border-radius: var(--db-switch-border-radius);
16918
- background-color: var(--db-switch-bg-default);
16919
- box-sizing: border-box;
16920
- transition:
16921
- background-color var(--db-switch-transition-duration) ease,
16922
- border-color var(--db-switch-transition-duration) ease;
16923
- }
16924
-
16925
- /* `border-color: inherit` picks up the track's per-state color, so it's only set on the track. */
16926
- .ds-switch-thumb {
16927
- position: absolute;
16928
- top: 50%;
16929
- /* Pull left by the border width so the thumb sits flush with the track's outer edge, not inside it. */
16930
- left: calc(-1 * var(--db-switch-border-width));
16931
- inline-size: var(--db-switch-thumb-size);
16932
- block-size: var(--db-switch-thumb-size);
16933
- border: var(--db-switch-border-width) solid;
16934
- border-color: inherit;
16935
- border-radius: var(--db-switch-border-radius);
16936
- background-color: var(--db-switch-thumb-color);
16937
- box-sizing: border-box;
16938
- transform: translateY(-50%);
16939
- transition: transform var(--db-switch-transition-duration) ease;
16940
- }
16941
-
16942
16724
  @media (prefers-reduced-motion: reduce) {
16943
- .ds-switch-track,
16944
- .ds-switch-thumb {
16725
+ .ds-switch input,
16726
+ .ds-switch input::before {
16945
16727
  transition: none;
16946
16728
  }
16947
16729
  }
package/dist/patterns.js CHANGED
@@ -1,4 +1,4 @@
1
- export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-Dvdj_FRA.js';
1
+ export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-DnwQIMN1.js';
2
2
  import '@emotion/react/jsx-runtime';
3
3
  import 'lodash/isUndefined';
4
4
  import 'react';
@@ -17,6 +17,15 @@ import '@floating-ui/dom';
17
17
  import 'react-dom';
18
18
  import '@radix-ui/react-hover-card';
19
19
  import '@radix-ui/react-toast';
20
+ import '@react-aria/combobox';
21
+ import '@react-aria/listbox';
22
+ import '@react-aria/overlays';
23
+ import '@react-aria/utils';
24
+ import '@react-aria/focus';
25
+ import '@react-aria/button';
26
+ import '@react-stately/combobox';
27
+ import '@react-aria/i18n';
28
+ import '@react-stately/collections';
20
29
  import 'lodash/noop';
21
30
  import 'lodash/pick';
22
31
  import 'lodash/compact';
@@ -1 +1 @@
1
- {"version":3,"file":"patterns.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"patterns.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -4,7 +4,7 @@ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "
4
4
  import type { ComponentTheme } from "../../theme";
5
5
  import { DesignSystemEventProviderAnalyticsEventTypes } from "../DesignSystemEventProvider";
6
6
  import type { WithLoadingState } from "../LoadingState/LoadingState";
7
- import type { AnalyticsEventPropsWithStartInteraction, DangerouslySetAntdProps, HTMLDataAttributes } from "../types";
7
+ import type { AnalyticsEventPropsWithStartInteraction, HTMLDataAttributes } from "../types";
8
8
  export declare const SMALL_BUTTON_HEIGHT = 24;
9
9
  export declare const getMemoizedButtonEmotionStyles: (props: Parameters<typeof getButtonEmotionStyles>[0]) => SerializedStyles;
10
10
  export declare const getButtonEmotionStyles: ({ theme, classNamePrefix, loading, withIcon, onlyIcon, isAnchor, enableAnimation, size, type, useFocusPseudoClass, forceIconStyles, danger }: {
@@ -22,7 +22,7 @@ export declare const getButtonEmotionStyles: ({ theme, classNamePrefix, loading,
22
22
  forceIconStyles?: boolean;
23
23
  }) => SerializedStyles;
24
24
  export type ButtonSize = "middle" | "small";
25
- export interface ButtonProps extends Omit<AntDButtonProps, "type" | "ghost" | "shape" | "size">, HTMLDataAttributes, DangerouslySetAntdProps<AntDButtonProps>, Omit<WithLoadingState, "loading">, AnalyticsEventPropsWithStartInteraction<DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
25
+ export interface ButtonProps extends Omit<AntDButtonProps, "type" | "ghost" | "shape" | "size">, HTMLDataAttributes, Omit<WithLoadingState, "loading">, AnalyticsEventPropsWithStartInteraction<DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
26
26
  type?: "primary" | "link" | "tertiary";
27
27
  size?: ButtonSize;
28
28
  endIcon?: React.ReactNode;
@@ -0,0 +1,9 @@
1
+ import type { Context } from "react";
2
+ export declare const DRAWER_ZINDEX_OVERLAY_OFFSET: number;
3
+ export declare const DRAWER_ZINDEX_CONTENT_OFFSET: number;
4
+ export interface DrawerContextValue {
5
+ isParentDrawerOpen: boolean;
6
+ }
7
+ /** Whether the surrounding subtree is inside an open Drawer. */
8
+ export declare const DrawerContext: Context<DrawerContextValue>;
9
+ export declare const useIsInsideOpenDrawer: () => boolean;
@@ -61,7 +61,7 @@ declare function RHFControlledLegacySelect<TFieldValues extends FieldValues>({ n
61
61
  interface RHFControlledSelectProps<
62
62
  TFieldValues extends FieldValues = FieldValues,
63
63
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
64
- > extends Omit<SelectProps, OmittedOriginalProps>, UseControllerProps<TFieldValues, TName> {
64
+ > extends Omit<SelectProps, OmittedOriginalProps | "children">, UseControllerProps<TFieldValues, TName> {
65
65
  control: Control<TFieldValues>;
66
66
  options?: {
67
67
  label: string;
@@ -80,11 +80,11 @@ interface RHFControlledSelectProps<
80
80
  * @deprecated This component is no longer necessary as `SimpleSelect` can be used uncontrolled by RHF.
81
81
  * Please consult the Forms Guide on go/dubois.
82
82
  */
83
- declare function RHFControlledSelect<TFieldValues extends FieldValues>({ name, control, rules, options, validationState, children, width, triggerProps, contentProps, optionProps, ...restProps }: React.PropsWithChildren<RHFControlledSelectProps<TFieldValues>> & HTMLAttributes<HTMLDivElement> & ConditionalOptionalLabel): JSX.Element;
83
+ declare function RHFControlledSelect<TFieldValues extends FieldValues>({ name, control, rules, options, validationState, children, width, triggerProps, contentProps, optionProps, ...restProps }: RHFControlledSelectProps<TFieldValues> & Omit<HTMLAttributes<HTMLDivElement>, "children"> & ConditionalOptionalLabel): JSX.Element;
84
84
  interface RHFControlledDialogComboboxProps<
85
85
  TFieldValues extends FieldValues = FieldValues,
86
86
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
87
- > extends Omit<DialogComboboxProps, OmittedOriginalProps>, UseControllerProps<TFieldValues, TName> {
87
+ > extends Omit<DialogComboboxProps, OmittedOriginalProps | "children">, UseControllerProps<TFieldValues, TName> {
88
88
  control: Control<TFieldValues>;
89
89
  validationState?: ValidationState;
90
90
  allowClear?: boolean;
@@ -101,11 +101,11 @@ interface RHFControlledDialogComboboxProps<
101
101
  contentProps?: Pick<DialogComboboxContentProps, "maxHeight" | "minHeight" | "matchTriggerWidth" | "style" | "className">;
102
102
  optionListProps?: Pick<DialogComboboxOptionListProps, "loading" | "withProgressiveLoading" | "style" | "className">;
103
103
  }
104
- declare function RHFControlledDialogCombobox<TFieldValues extends FieldValues>({ name, control, rules, children, allowClear, validationState, placeholder, width, triggerProps, contentProps, optionListProps, ...restProps }: React.PropsWithChildren<RHFControlledDialogComboboxProps<TFieldValues>> & HTMLAttributes<HTMLDivElement> & ConditionalOptionalLabel): JSX.Element;
104
+ declare function RHFControlledDialogCombobox<TFieldValues extends FieldValues>({ name, control, rules, children, allowClear, validationState, placeholder, width, triggerProps, contentProps, optionListProps, ...restProps }: RHFControlledDialogComboboxProps<TFieldValues> & Omit<HTMLAttributes<HTMLDivElement>, "children"> & ConditionalOptionalLabel): JSX.Element;
105
105
  interface RHFControlledTypeaheadComboboxProps<
106
106
  TFieldValues extends FieldValues = FieldValues,
107
107
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
108
- > extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
108
+ > extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId" | "children">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
109
109
  control: Control<TFieldValues, any>;
110
110
  name: TName;
111
111
  children: ({ comboboxState, items }: {
@@ -125,11 +125,11 @@ interface RHFControlledTypeaheadComboboxProps<
125
125
  declare function RHFControlledTypeaheadCombobox<
126
126
  TFieldValues extends FieldValues,
127
127
  TName extends FieldPath<TFieldValues>
128
- >({ name, control, rules, allItems, itemToString, matcher, allowNewValue, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, preventUnsetOnBlur, ...props }: React.PropsWithChildren<RHFControlledTypeaheadComboboxProps<TFieldValues, TName>> & HTMLAttributes<HTMLDivElement>): JSX.Element;
128
+ >({ name, control, rules, allItems, itemToString, matcher, allowNewValue, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, preventUnsetOnBlur, ...props }: RHFControlledTypeaheadComboboxProps<TFieldValues, TName> & Omit<HTMLAttributes<HTMLDivElement>, "children">): JSX.Element;
129
129
  interface RHFControlledMultiSelectTypeaheadComboboxProps<
130
130
  TFieldValues extends FieldValues = FieldValues,
131
131
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
132
- > extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
132
+ > extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId" | "children">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
133
133
  control: Control<any, TFieldValues>;
134
134
  name: any;
135
135
  children: ({ comboboxState, items, selectedItems }: {
@@ -145,7 +145,7 @@ interface RHFControlledMultiSelectTypeaheadComboboxProps<
145
145
  menuProps?: Partial<Omit<TypeaheadComboboxMenuProps<TFieldValues>, "comboboxState">>;
146
146
  onInputChange?: (inputValue: string) => void;
147
147
  }
148
- declare function RHFControlledMultiSelectTypeaheadCombobox<TFieldValues extends FieldValues>({ name, control, rules, allItems, itemToString, matcher, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, ...props }: React.PropsWithChildren<RHFControlledMultiSelectTypeaheadComboboxProps<TFieldValues>> & HTMLAttributes<HTMLDivElement>): JSX.Element;
148
+ declare function RHFControlledMultiSelectTypeaheadCombobox<TFieldValues extends FieldValues>({ name, control, rules, allItems, itemToString, matcher, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, ...props }: RHFControlledMultiSelectTypeaheadComboboxProps<TFieldValues> & Omit<HTMLAttributes<HTMLDivElement>, "children">): JSX.Element;
149
149
  interface RHFControlledCheckboxGroupProps<
150
150
  TFieldValues extends FieldValues = FieldValues,
151
151
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
@@ -1,4 +1,4 @@
1
1
  import type { ColProps as AntDColProps } from "antd";
2
- import type { DangerouslySetAntdProps, HTMLDataAttributes } from "../types";
3
- export interface ColProps extends AntDColProps, DangerouslySetAntdProps<AntDColProps>, HTMLDataAttributes {}
2
+ import type { HTMLDataAttributes } from "../types";
3
+ export interface ColProps extends AntDColProps, HTMLDataAttributes {}
4
4
  export declare const Col: React.FC<React.PropsWithChildren<ColProps>>;
@@ -1,5 +1,5 @@
1
1
  import type { RowProps as AntDRowProps } from "antd";
2
- import type { DangerouslySetAntdProps, HTMLDataAttributes } from "../types";
3
- export interface RowProps extends AntDRowProps, DangerouslySetAntdProps<AntDRowProps>, HTMLDataAttributes {}
2
+ import type { HTMLDataAttributes } from "../types";
3
+ export interface RowProps extends AntDRowProps, HTMLDataAttributes {}
4
4
  export declare const ROW_GUTTER_SIZE = 8;
5
5
  export declare const Row: React.FC<React.PropsWithChildren<RowProps>>;
@@ -0,0 +1,4 @@
1
+ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
2
+ import type { IconProps } from "../../Icon";
3
+ declare const FlowsIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
4
+ export default FlowsIcon;
@@ -0,0 +1,4 @@
1
+ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
2
+ import type { IconProps } from "../../Icon";
3
+ declare const LakewatchAlertIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
4
+ export default LakewatchAlertIcon;
@@ -0,0 +1,4 @@
1
+ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
2
+ import type { IconProps } from "../../Icon";
3
+ declare const LakewatchDatasourceIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
4
+ export default LakewatchDatasourceIcon;
@@ -0,0 +1,4 @@
1
+ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
2
+ import type { IconProps } from "../../Icon";
3
+ declare const LakewatchDetectionRuleIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
4
+ export default LakewatchDetectionRuleIcon;
@@ -0,0 +1,4 @@
1
+ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
2
+ import type { IconProps } from "../../Icon";
3
+ declare const LakewatchParserIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
4
+ export default LakewatchParserIcon;
@@ -176,6 +176,7 @@ export { default as FilterIcon } from "./FilterIcon";
176
176
  export { default as FlagPointerIcon } from "./FlagPointerIcon";
177
177
  export { default as FloatIcon } from "./FloatIcon";
178
178
  export { default as FlowIcon } from "./FlowIcon";
179
+ export { default as FlowsIcon } from "./FlowsIcon";
179
180
  export { default as FolderBranchFillIcon } from "./FolderBranchFillIcon";
180
181
  export { default as FolderBranchIcon } from "./FolderBranchIcon";
181
182
  export { default as FolderCloudFilledIcon } from "./FolderCloudFilledIcon";
@@ -239,6 +240,10 @@ export { default as KeyboardIcon } from "./KeyboardIcon";
239
240
  export { default as LakebaseCatalogIcon } from "./LakebaseCatalogIcon";
240
241
  export { default as LakebaseIcon } from "./LakebaseIcon";
241
242
  export { default as LakeflowDesignerIcon } from "./LakeflowDesignerIcon";
243
+ export { default as LakewatchAlertIcon } from "./LakewatchAlertIcon";
244
+ export { default as LakewatchDatasourceIcon } from "./LakewatchDatasourceIcon";
245
+ export { default as LakewatchDetectionRuleIcon } from "./LakewatchDetectionRuleIcon";
246
+ export { default as LakewatchParserIcon } from "./LakewatchParserIcon";
242
247
  export { default as LayerGraphIcon } from "./LayerGraphIcon";
243
248
  export { default as LayerIcon } from "./LayerIcon";
244
249
  export { default as LeafIcon } from "./LeafIcon";
@@ -1,2 +1 @@
1
1
  export * from "./LegacyTooltip";
2
- export * from "./LegacyInfoTooltip";
@@ -1,6 +1,8 @@
1
1
  import type { CSSProperties } from "react";
2
2
  import type { WithLoadingState } from "../LoadingState/LoadingState";
3
- interface TitleSkeletonProps extends WithLoadingState {
3
+ import type { TypographyTitleProps } from "../Typography/Title";
4
+ import type { HTMLDataAttributes } from "../types";
5
+ export interface TitleSkeletonProps extends WithLoadingState, HTMLDataAttributes {
4
6
  /** Label for screen readers */
5
7
  label?: React.ReactNode;
6
8
  /** Seed that deterministically arranges the uneven lines, so that they look like ragged text.
@@ -12,6 +14,10 @@ interface TitleSkeletonProps extends WithLoadingState {
12
14
  style?: CSSProperties;
13
15
  /** Class name property */
14
16
  className?: string;
17
+ /** Match the line and visible fill heights of a Typography.Title level. Omit to preserve the legacy appearance. */
18
+ level?: TitleSkeletonLevel;
19
+ /** Render phrasing-safe markup for use inside an existing text element. */
20
+ inline?: boolean;
15
21
  }
16
- export declare const TitleSkeleton: ({ label, seed, frameRate, style, loading, loadingDescription, ...restProps }: TitleSkeletonProps) => JSX.Element;
17
- export {};
22
+ export type TitleSkeletonLevel = NonNullable<TypographyTitleProps["level"]>;
23
+ export declare const TitleSkeleton: ({ label, seed, frameRate, style, level, inline, loading, loadingDescription, ...restProps }: TitleSkeletonProps) => JSX.Element;
@@ -1,6 +1,8 @@
1
1
  import type { UseComboboxGetToggleButtonPropsOptions } from "downshift";
2
2
  import { type DownshiftToggleButtonProps } from "./TypeaheadComboboxToggleButton";
3
3
  import type { ButtonSize } from "../Button";
4
+ /** Height of the non-inline controls block, for callers that position it themselves. */
5
+ export declare const TYPEAHEAD_COMBOBOX_CONTROLS_HEIGHT = 16;
4
6
  export interface TypeaheadComboboxControlsProps {
5
7
  getDownshiftToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions) => DownshiftToggleButtonProps;
6
8
  showClearSelectionButton?: boolean;