@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.
- package/AGENTS.md +473 -0
- package/CHANGELOG.md +5 -0
- package/README.md +5 -3
- package/dist/{WizardStepContentWrapper-Dvdj_FRA.js → WizardStepContentWrapper-DnwQIMN1.js} +787 -193
- package/dist/WizardStepContentWrapper-DnwQIMN1.js.map +1 -0
- package/dist/dubois-colors.less +2 -0
- package/dist/index-dark.css +10 -319
- package/dist/index-dark.mitigated.css +10 -319
- package/dist/index.css +61 -279
- package/dist/index.js +1809 -155
- package/dist/index.js.map +1 -1
- package/dist/index.mitigated.css +61 -279
- package/dist/patterns.js +10 -1
- package/dist/patterns.js.map +1 -1
- package/dist-types/design-system/Button/Button.d.ts +2 -2
- package/dist-types/design-system/Drawer/DrawerContext.d.ts +9 -0
- package/dist-types/design-system/FormV2/RHFAdapters.d.ts +8 -8
- package/dist-types/design-system/Grid/Col.d.ts +2 -2
- package/dist-types/design-system/Grid/Row.d.ts +2 -2
- package/dist-types/design-system/Icon/__generated/icons/FlowsIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/LakewatchAlertIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/LakewatchDatasourceIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/LakewatchDetectionRuleIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/LakewatchParserIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/index.d.ts +5 -0
- package/dist-types/design-system/LegacyTooltip/index.d.ts +0 -1
- package/dist-types/design-system/Skeleton/TitleSkeleton.d.ts +9 -3
- package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxControls.d.ts +2 -0
- package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxMultiSelectInput.d.ts +9 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/CountBadge.d.ts +6 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxAddButton.d.ts +3 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxCheckboxItem.d.ts +10 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxControls.d.ts +11 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxFooter.d.ts +2 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxInput.d.ts +9 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxMenu.d.ts +17 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxMenuItem.d.ts +16 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxMultiSelectInput.d.ts +18 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxRoot.d.ts +17 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxSectionHeader.d.ts +1 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxSelectedItem.d.ts +11 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxSeparator.d.ts +1 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/TypeaheadComboboxToggleButton.d.ts +4 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/footerFocus.d.ts +13 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/index.d.ts +4 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useComboboxItems.d.ts +32 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useComboboxState.d.ts +75 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useComboboxStateProps.d.ts +36 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useMultipleSelectionState.d.ts +25 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useScrollOptionIntoView.d.ts +11 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useTypeaheadComboboxContext.d.ts +2 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/hooks/useVirtualizedComboboxScroll.d.ts +36 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/index.d.ts +13 -0
- package/dist-types/design-system/TypeaheadComboboxReactAria/providers/TypeaheadComboboxContext.d.ts +45 -0
- package/dist-types/design-system/Typography/titleLevel.d.ts +11 -0
- package/dist-types/design-system/index.d.ts +1 -0
- package/dist-types/design-system/utils/useMediaQuery.d.ts +4 -1
- package/dist-types/theme/_generated/ValidSemanticColors.d.ts +2 -1
- package/package.json +14 -3
- package/dist/WizardStepContentWrapper-Dvdj_FRA.js.map +0 -1
- package/dist-types/design-system/LegacyTooltip/LegacyInfoTooltip.d.ts +0 -16
package/dist/index.mitigated.css
CHANGED
|
@@ -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 —
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
16843
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
16873
|
-
*
|
|
16874
|
-
.ds-switch
|
|
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
|
|
16708
|
+
.ds-switch input:checked:focus-visible {
|
|
16881
16709
|
outline-offset: var(--db-switch-focus-ring-offset);
|
|
16882
16710
|
}
|
|
16883
16711
|
|
|
16884
|
-
.ds-switch
|
|
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
|
|
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
|
|
16944
|
-
.ds-switch
|
|
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-
|
|
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';
|
package/dist/patterns.js.map
CHANGED
|
@@ -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,
|
|
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,
|
|
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 }:
|
|
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 }:
|
|
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 }:
|
|
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 }:
|
|
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 {
|
|
3
|
-
export interface ColProps extends AntDColProps,
|
|
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 {
|
|
3
|
-
export interface RowProps extends AntDRowProps,
|
|
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,6 +1,8 @@
|
|
|
1
1
|
import type { CSSProperties } from "react";
|
|
2
2
|
import type { WithLoadingState } from "../LoadingState/LoadingState";
|
|
3
|
-
|
|
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
|
|
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;
|