@mongodb-js/compass-components 1.29.3 → 1.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -14
- package/lib/components/breadcrumb.d.ts +2 -1
- package/lib/components/breadcrumb.d.ts.map +1 -1
- package/lib/components/breadcrumb.js +1 -1
- package/lib/components/breadcrumb.js.map +1 -1
- package/lib/components/bson-value.js +4 -0
- package/lib/components/bson-value.js.map +1 -1
- package/lib/components/collapsible-field-set.js +4 -1
- package/lib/components/collapsible-field-set.js.map +1 -1
- package/lib/components/combobox/Chip.js +5 -2
- package/lib/components/combobox/Chip.js.map +1 -1
- package/lib/components/combobox/Combobox.d.ts +11 -1
- package/lib/components/combobox/Combobox.d.ts.map +1 -1
- package/lib/components/combobox/Combobox.js +225 -5
- package/lib/components/combobox/Combobox.js.map +1 -1
- package/lib/components/combobox/Combobox.styles.d.ts +15 -0
- package/lib/components/combobox/Combobox.styles.d.ts.map +1 -1
- package/lib/components/combobox/Combobox.styles.js +19 -2
- package/lib/components/combobox/Combobox.styles.js.map +1 -1
- package/lib/components/combobox/Combobox.types.d.ts +174 -0
- package/lib/components/combobox/Combobox.types.d.ts.map +1 -1
- package/lib/components/combobox/Combobox.types.js +20 -0
- package/lib/components/combobox/Combobox.types.js.map +1 -1
- package/lib/components/combobox/ComboboxGroup.d.ts +1 -0
- package/lib/components/combobox/ComboboxGroup.d.ts.map +1 -1
- package/lib/components/combobox/ComboboxMenu/ComboboxMenu.js +5 -0
- package/lib/components/combobox/ComboboxMenu/ComboboxMenu.js.map +1 -1
- package/lib/components/combobox/ComboboxMenu/Menu.styles.d.ts +4 -0
- package/lib/components/combobox/ComboboxMenu/Menu.styles.d.ts.map +1 -1
- package/lib/components/combobox/ComboboxMenu/Menu.styles.js +4 -0
- package/lib/components/combobox/ComboboxMenu/Menu.styles.js.map +1 -1
- package/lib/components/combobox/ComboboxOption.d.ts +3 -0
- package/lib/components/combobox/ComboboxOption.d.ts.map +1 -1
- package/lib/components/combobox/ComboboxOption.js +14 -0
- package/lib/components/combobox/ComboboxOption.js.map +1 -1
- package/lib/components/combobox/Menu.styles.d.ts +4 -0
- package/lib/components/combobox/Menu.styles.d.ts.map +1 -1
- package/lib/components/combobox/Menu.styles.js +7 -3
- package/lib/components/combobox/Menu.styles.js.map +1 -1
- package/lib/components/combobox/utils/OptionObjectUtils.d.ts +18 -0
- package/lib/components/combobox/utils/OptionObjectUtils.d.ts.map +1 -1
- package/lib/components/combobox/utils/OptionObjectUtils.js +18 -0
- package/lib/components/combobox/utils/OptionObjectUtils.js.map +1 -1
- package/lib/components/combobox/utils/flattenChildren.d.ts +8 -0
- package/lib/components/combobox/utils/flattenChildren.d.ts.map +1 -1
- package/lib/components/combobox/utils/flattenChildren.js +13 -1
- package/lib/components/combobox/utils/flattenChildren.js.map +1 -1
- package/lib/components/combobox/utils/getNameAndValue.d.ts +9 -0
- package/lib/components/combobox/utils/getNameAndValue.d.ts.map +1 -1
- package/lib/components/combobox/utils/getNameAndValue.js +10 -1
- package/lib/components/combobox/utils/getNameAndValue.js.map +1 -1
- package/lib/components/combobox/utils/wrapJSX.d.ts +13 -0
- package/lib/components/combobox/utils/wrapJSX.d.ts.map +1 -1
- package/lib/components/combobox/utils/wrapJSX.js +21 -0
- package/lib/components/combobox/utils/wrapJSX.js.map +1 -1
- package/lib/components/combobox-with-custom-option.d.ts +2 -1
- package/lib/components/combobox-with-custom-option.d.ts.map +1 -1
- package/lib/components/combobox-with-custom-option.js +2 -0
- package/lib/components/combobox-with-custom-option.js.map +1 -1
- package/lib/components/compass-components-provider.d.ts +24 -1
- package/lib/components/compass-components-provider.d.ts.map +1 -1
- package/lib/components/compass-components-provider.js +22 -1
- package/lib/components/compass-components-provider.js.map +1 -1
- package/lib/components/content-with-fallback.js +3 -0
- package/lib/components/content-with-fallback.js.map +1 -1
- package/lib/components/document-list/document-actions-group.js +10 -1
- package/lib/components/document-list/document-actions-group.js.map +1 -1
- package/lib/components/document-list/document-edit-actions-footer.js +3 -0
- package/lib/components/document-list/document-edit-actions-footer.js.map +1 -1
- package/lib/components/document-list/document.js +23 -1
- package/lib/components/document-list/document.js.map +1 -1
- package/lib/components/document-list/element-actions.js +2 -0
- package/lib/components/document-list/element-actions.js.map +1 -1
- package/lib/components/document-list/element-editors.js +51 -9
- package/lib/components/document-list/element-editors.js.map +1 -1
- package/lib/components/document-list/element.js +45 -5
- package/lib/components/document-list/element.js.map +1 -1
- package/lib/components/empty-content.js +1 -1
- package/lib/components/empty-content.js.map +1 -1
- package/lib/components/error-boundary.js +3 -0
- package/lib/components/error-boundary.js.map +1 -1
- package/lib/components/feedback-popover.d.ts +1 -1
- package/lib/components/feedback-popover.d.ts.map +1 -1
- package/lib/components/feedback-popover.js +3 -0
- package/lib/components/feedback-popover.js.map +1 -1
- package/lib/components/file-input.js +22 -3
- package/lib/components/file-input.js.map +1 -1
- package/lib/components/guide-cue/guide-cue-groups.js +3 -0
- package/lib/components/guide-cue/guide-cue-groups.js.map +1 -1
- package/lib/components/guide-cue/guide-cue-service.js +5 -0
- package/lib/components/guide-cue/guide-cue-service.js.map +1 -1
- package/lib/components/guide-cue/guide-cue.d.ts +1 -1
- package/lib/components/guide-cue/guide-cue.d.ts.map +1 -1
- package/lib/components/guide-cue/guide-cue.js +14 -1
- package/lib/components/guide-cue/guide-cue.js.map +1 -1
- package/lib/components/horizontal-rule.d.ts +1 -1
- package/lib/components/horizontal-rule.d.ts.map +1 -1
- package/lib/components/icons/favorite-icon.js +3 -1
- package/lib/components/icons/favorite-icon.js.map +1 -1
- package/lib/components/icons/logo-icon.d.ts +1 -1
- package/lib/components/icons/logo-icon.d.ts.map +1 -1
- package/lib/components/icons/server-icon.d.ts +2 -1
- package/lib/components/icons/server-icon.d.ts.map +1 -1
- package/lib/components/index-icon.d.ts +2 -1
- package/lib/components/index-icon.d.ts.map +1 -1
- package/lib/components/index-keys-badge.js +1 -0
- package/lib/components/index-keys-badge.js.map +1 -1
- package/lib/components/inline-definition.js +1 -0
- package/lib/components/inline-definition.js.map +1 -1
- package/lib/components/inline-info-link.d.ts +1 -0
- package/lib/components/inline-info-link.d.ts.map +1 -1
- package/lib/components/interactive-popover.d.ts +3 -0
- package/lib/components/interactive-popover.d.ts.map +1 -1
- package/lib/components/interactive-popover.js +6 -0
- package/lib/components/interactive-popover.js.map +1 -1
- package/lib/components/item-action-controls.d.ts +6 -5
- package/lib/components/item-action-controls.d.ts.map +1 -1
- package/lib/components/item-action-controls.js +31 -4
- package/lib/components/item-action-controls.js.map +1 -1
- package/lib/components/keyline-card.d.ts +9 -2
- package/lib/components/keyline-card.d.ts.map +1 -1
- package/lib/components/leafygreen.d.ts +1 -1
- package/lib/components/leafygreen.js +8 -0
- package/lib/components/leafygreen.js.map +1 -1
- package/lib/components/links/link.js +2 -0
- package/lib/components/links/link.js.map +1 -1
- package/lib/components/loader.d.ts +1 -1
- package/lib/components/loader.d.ts.map +1 -1
- package/lib/components/modals/form-modal.d.ts +1 -1
- package/lib/components/modals/form-modal.d.ts.map +1 -1
- package/lib/components/modals/info-modal.d.ts +1 -1
- package/lib/components/modals/info-modal.d.ts.map +1 -1
- package/lib/components/modals/modal-body.js +2 -0
- package/lib/components/modals/modal-body.js.map +1 -1
- package/lib/components/modals/modal-footer-button.d.ts +2 -1
- package/lib/components/modals/modal-footer-button.d.ts.map +1 -1
- package/lib/components/modals/modal-header.d.ts +1 -1
- package/lib/components/modals/modal-header.d.ts.map +1 -1
- package/lib/components/modals/modal.js +8 -0
- package/lib/components/modals/modal.js.map +1 -1
- package/lib/components/options-toggle.js +5 -1
- package/lib/components/options-toggle.js.map +1 -1
- package/lib/components/placeholder.js +1 -0
- package/lib/components/placeholder.js.map +1 -1
- package/lib/components/resize-handle.js +4 -0
- package/lib/components/resize-handle.js.map +1 -1
- package/lib/components/resizeable-sidebar.js +2 -0
- package/lib/components/resizeable-sidebar.js.map +1 -1
- package/lib/components/signal-popover.d.ts +19 -0
- package/lib/components/signal-popover.d.ts.map +1 -1
- package/lib/components/signal-popover.js +43 -3
- package/lib/components/signal-popover.js.map +1 -1
- package/lib/components/signals.d.ts +4 -3
- package/lib/components/signals.d.ts.map +1 -1
- package/lib/components/tab-nav-bar.d.ts +11 -4
- package/lib/components/tab-nav-bar.d.ts.map +1 -1
- package/lib/components/tab-nav-bar.js +14 -11
- package/lib/components/tab-nav-bar.js.map +1 -1
- package/lib/components/toast-body.d.ts +2 -1
- package/lib/components/toast-body.d.ts.map +1 -1
- package/lib/components/toast-body.js +1 -0
- package/lib/components/toast-body.js.map +1 -1
- package/lib/components/virtual-grid.d.ts +43 -1
- package/lib/components/virtual-grid.d.ts.map +1 -1
- package/lib/components/virtual-grid.js +3 -0
- package/lib/components/virtual-grid.js.map +1 -1
- package/lib/components/virtual-list.d.ts +70 -1
- package/lib/components/virtual-list.d.ts.map +1 -1
- package/lib/components/virtual-list.js +9 -1
- package/lib/components/virtual-list.js.map +1 -1
- package/lib/components/workspace-container.d.ts +1 -1
- package/lib/components/workspace-container.d.ts.map +1 -1
- package/lib/components/workspace-container.js +10 -0
- package/lib/components/workspace-container.js.map +1 -1
- package/lib/components/workspace-tabs/tab.d.ts +1 -1
- package/lib/components/workspace-tabs/tab.d.ts.map +1 -1
- package/lib/components/workspace-tabs/tab.js +15 -1
- package/lib/components/workspace-tabs/tab.js.map +1 -1
- package/lib/components/workspace-tabs/workspace-tabs.d.ts +1 -1
- package/lib/components/workspace-tabs/workspace-tabs.d.ts.map +1 -1
- package/lib/components/workspace-tabs/workspace-tabs.js +5 -1
- package/lib/components/workspace-tabs/workspace-tabs.js.map +1 -1
- package/lib/hooks/use-confirmation.js +12 -1
- package/lib/hooks/use-confirmation.js.map +1 -1
- package/lib/hooks/use-default-action.d.ts +8 -0
- package/lib/hooks/use-default-action.d.ts.map +1 -1
- package/lib/hooks/use-default-action.js +11 -1
- package/lib/hooks/use-default-action.js.map +1 -1
- package/lib/hooks/use-effect-on-change.d.ts +6 -0
- package/lib/hooks/use-effect-on-change.d.ts.map +1 -1
- package/lib/hooks/use-effect-on-change.js +18 -1
- package/lib/hooks/use-effect-on-change.js.map +1 -1
- package/lib/hooks/use-focus-ring.d.ts +19 -0
- package/lib/hooks/use-focus-ring.d.ts.map +1 -1
- package/lib/hooks/use-focus-ring.js +21 -0
- package/lib/hooks/use-focus-ring.js.map +1 -1
- package/lib/hooks/use-hotkeys.d.ts +15 -1
- package/lib/hooks/use-hotkeys.d.ts.map +1 -1
- package/lib/hooks/use-hotkeys.js +18 -3
- package/lib/hooks/use-hotkeys.js.map +1 -1
- package/lib/hooks/use-persisted-state.d.ts +9 -0
- package/lib/hooks/use-persisted-state.d.ts.map +1 -1
- package/lib/hooks/use-persisted-state.js +9 -0
- package/lib/hooks/use-persisted-state.js.map +1 -1
- package/lib/hooks/use-scrollbars.d.ts +8 -1
- package/lib/hooks/use-scrollbars.d.ts.map +1 -1
- package/lib/hooks/use-scrollbars.js +19 -0
- package/lib/hooks/use-scrollbars.js.map +1 -1
- package/lib/hooks/use-sort.js +6 -0
- package/lib/hooks/use-sort.js.map +1 -1
- package/lib/hooks/use-stacked-component.d.ts +1 -1
- package/lib/hooks/use-stacked-component.d.ts.map +1 -1
- package/lib/hooks/use-stacked-component.js +1 -0
- package/lib/hooks/use-stacked-component.js.map +1 -1
- package/lib/hooks/use-theme.d.ts.map +1 -1
- package/lib/hooks/use-theme.js +10 -1
- package/lib/hooks/use-theme.js.map +1 -1
- package/lib/hooks/use-toast.d.ts +15 -0
- package/lib/hooks/use-toast.d.ts.map +1 -1
- package/lib/hooks/use-toast.js +30 -0
- package/lib/hooks/use-toast.js.map +1 -1
- package/lib/hooks/use-virtual-grid.d.ts +8 -0
- package/lib/hooks/use-virtual-grid.d.ts.map +1 -1
- package/lib/hooks/use-virtual-grid.js +29 -0
- package/lib/hooks/use-virtual-grid.js.map +1 -1
- package/lib/hooks/use-virtual-list-item-observer.js +23 -0
- package/lib/hooks/use-virtual-list-item-observer.js.map +1 -1
- package/lib/utils/format-date.js +2 -0
- package/lib/utils/format-date.js.map +1 -1
- package/lib/utils/merge-props.js +1 -0
- package/lib/utils/merge-props.js.map +1 -1
- package/lib/utils/rafraf.d.ts +10 -0
- package/lib/utils/rafraf.d.ts.map +1 -1
- package/lib/utils/rafraf.js +10 -0
- package/lib/utils/rafraf.js.map +1 -1
- package/package.json +10 -13
- package/lib/hooks/use-virtual-grid.test.d.ts +0 -2
- package/lib/hooks/use-virtual-grid.test.d.ts.map +0 -1
- package/lib/hooks/use-virtual-grid.test.js +0 -210
- package/lib/hooks/use-virtual-grid.test.js.map +0 -1
|
@@ -1,8 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Default focus ring styles. Can be used for simple cases where we want the
|
|
3
|
+
* default ring with no customization at all (most of the cases in Compass)
|
|
4
|
+
*/
|
|
1
5
|
export declare const focusRing: string;
|
|
6
|
+
/**
|
|
7
|
+
* Provides focus ring styles with a few additional options allowing to override
|
|
8
|
+
* default style
|
|
9
|
+
*
|
|
10
|
+
* @param options
|
|
11
|
+
* @param options.outer show focus ring outside the component (default: false)
|
|
12
|
+
* @param options.focusWithin show focus ring on focus within instead of focus visible (default: false)
|
|
13
|
+
* @param options.hover show focus ring on hover in addition to focus (default: false)
|
|
14
|
+
* @param options.radius focus ring radius (default: 4px or spacing[1] from leafygreen)
|
|
15
|
+
* @returns props to apply to the component
|
|
16
|
+
*/
|
|
2
17
|
export declare function useFocusRing({ outer, focusWithin, hover, radius, }?: {
|
|
18
|
+
/** show focus ring outside the component (default: false) */
|
|
3
19
|
outer?: boolean;
|
|
20
|
+
/** show focus ring on focus within in addition to focus visible (default: false) */
|
|
4
21
|
focusWithin?: boolean;
|
|
22
|
+
/** show focus ring on hover in addition to focus (default: false) */
|
|
5
23
|
hover?: boolean;
|
|
24
|
+
/** focus ring radius (default: 4px or spacing[1] from leafygreen) */
|
|
6
25
|
radius?: number;
|
|
7
26
|
}): {
|
|
8
27
|
className: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-ring.d.ts","sourceRoot":"","sources":["../../src/hooks/use-focus-ring.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-focus-ring.d.ts","sourceRoot":"","sources":["../../src/hooks/use-focus-ring.ts"],"names":[],"mappings":"AAyCA;;;GAGG;AACH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAoBH;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAa,EACb,WAAmB,EACnB,KAAa,EACb,MAAM,GACP,GAAE;IACD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;CACZ;;EAkCL"}
|
|
@@ -35,7 +35,17 @@ const focusRingHoverVisibleStyles = (darkMode) => (0, emotion_1.css)({
|
|
|
35
35
|
transitionTimingFunction: 'ease-out',
|
|
36
36
|
},
|
|
37
37
|
});
|
|
38
|
+
/**
|
|
39
|
+
* Default focus ring styles. Can be used for simple cases where we want the
|
|
40
|
+
* default ring with no customization at all (most of the cases in Compass)
|
|
41
|
+
*/
|
|
38
42
|
exports.focusRing = (0, emotion_1.css)(focusRingStyles, {
|
|
43
|
+
// It's important that we only show focus ring when the focus is determined by
|
|
44
|
+
// the browser as "visible". This means that e.g., buttons will only get the
|
|
45
|
+
// ring around them when navigating application with a keyboard and not just
|
|
46
|
+
// clicking a button which can be annoying
|
|
47
|
+
//
|
|
48
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
|
|
39
49
|
'&:focus-visible': focusRingVisibleStyles,
|
|
40
50
|
});
|
|
41
51
|
const focusRingOuter = (0, emotion_1.css)({
|
|
@@ -52,6 +62,17 @@ const focusRingWithin = (0, emotion_1.css)({
|
|
|
52
62
|
const focusRingHover = (darkMode) => (0, emotion_1.css)({
|
|
53
63
|
'&:hover': focusRingHoverVisibleStyles(darkMode),
|
|
54
64
|
});
|
|
65
|
+
/**
|
|
66
|
+
* Provides focus ring styles with a few additional options allowing to override
|
|
67
|
+
* default style
|
|
68
|
+
*
|
|
69
|
+
* @param options
|
|
70
|
+
* @param options.outer show focus ring outside the component (default: false)
|
|
71
|
+
* @param options.focusWithin show focus ring on focus within instead of focus visible (default: false)
|
|
72
|
+
* @param options.hover show focus ring on hover in addition to focus (default: false)
|
|
73
|
+
* @param options.radius focus ring radius (default: 4px or spacing[1] from leafygreen)
|
|
74
|
+
* @returns props to apply to the component
|
|
75
|
+
*/
|
|
55
76
|
function useFocusRing({ outer = false, focusWithin = false, hover = false, radius, } = {}) {
|
|
56
77
|
const darkMode = (0, use_theme_1.useDarkMode)();
|
|
57
78
|
const outerClass = (0, react_1.useMemo)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-ring.js","sourceRoot":"","sources":["../../src/hooks/use-focus-ring.ts"],"names":[],"mappings":";;;AAAA,kDAAgD;AAChD,oDAAiD;AACjD,oDAAiD;AACjD,iCAAgC;AAChC,2CAA0C;AAE1C,MAAM,eAAe,GAAG,IAAA,aAAG,EAAC;IAC1B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE;QACV,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,MAAM;QACrB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,YAAY,EAAE,gBAAO,CAAC,CAAC,CAAC;QACxB,SAAS,EAAE,qBAAqB;QAChC,UAAU,EAAE,yBAAyB;QACrC,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,IAAA,aAAG,EAAC;IACjC,UAAU,EAAE;QACV,SAAS,EAAE,aAAa,iBAAO,CAAC,IAAI,CAAC,MAAM,aAAa;QACxD,wBAAwB,EAAE,UAAU;KACrC;CACF,CAAC,CAAC;AAEH,MAAM,2BAA2B,GAAG,CAAC,QAAiB,EAAE,EAAE,CACxD,IAAA,aAAG,EAAC;IACF,UAAU,EAAE;QACV,SAAS,EAAE,aACT,QAAQ,CAAC,CAAC,CAAC,iBAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAO,CAAC,IAAI,CAAC,MAC/C,EAAE;QACF,wBAAwB,EAAE,UAAU;KACrC;CACF,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-focus-ring.js","sourceRoot":"","sources":["../../src/hooks/use-focus-ring.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useHotkeys as useGlobalHotkeys } from 'react-hotkeys-hook';
|
|
3
3
|
type GlobalHotkeysArgs = Parameters<typeof useGlobalHotkeys>;
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* The modifier keys are interpreted differently on macOS and Windows/Linux.
|
|
7
|
+
* useGlobalHotkeys hook normalizes the modifier keys so that they are interpreted on both platforms as follows:
|
|
8
|
+
*
|
|
9
|
+
* Modifier | macOS | Windows | Linux
|
|
10
|
+
* -------- | --------- | ------- | -------
|
|
11
|
+
* ctrl | control | ctrl | ctrl
|
|
12
|
+
* shift | shift | shift | shift
|
|
13
|
+
* alt | option | alt | alt
|
|
14
|
+
* meta | command | windows | meta
|
|
15
|
+
* mod | command | ctrl | ctrl
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
4
18
|
export declare const useHotkeys: (key: string, callback: GlobalHotkeysArgs[1], options?: GlobalHotkeysArgs[2], deps?: GlobalHotkeysArgs[3]) => React.MutableRefObject<import("react-hotkeys-hook/dist/types").RefType<HTMLElement>>;
|
|
5
19
|
export declare const formatHotkey: (key: string) => string;
|
|
6
20
|
export declare const KeyboardShortcut: ({ hotkey }: {
|
|
7
21
|
hotkey: string;
|
|
8
|
-
}) => JSX.Element;
|
|
22
|
+
}) => React.JSX.Element;
|
|
9
23
|
export {};
|
|
10
24
|
//# sourceMappingURL=use-hotkeys.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hotkeys.d.ts","sourceRoot":"","sources":["../../src/hooks/use-hotkeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAYpE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-hotkeys.d.ts","sourceRoot":"","sources":["../../src/hooks/use-hotkeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAYpE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,QAChB,MAAM,YACD,iBAAiB,CAAC,CAAC,CAAC,YACpB,iBAAiB,CAAC,CAAC,CAAC,SACvB,iBAAiB,CAAC,CAAC,CAAC,yFAG5B,CAAC;AAEF,eAAO,MAAM,YAAY,QAAS,MAAM,WAiBvC,CAAC;AAEF,eAAO,MAAM,gBAAgB;YAA0B,MAAM;uBAS5D,CAAC"}
|
package/lib/hooks/use-hotkeys.js
CHANGED
|
@@ -14,12 +14,27 @@ const shortcutContainerStyles = (0, emotion_1.css)({
|
|
|
14
14
|
gap: tokens_1.spacing[1],
|
|
15
15
|
});
|
|
16
16
|
const isMac = () => navigator.userAgent.indexOf('Mac') !== -1;
|
|
17
|
+
/**
|
|
18
|
+
*
|
|
19
|
+
* The modifier keys are interpreted differently on macOS and Windows/Linux.
|
|
20
|
+
* useGlobalHotkeys hook normalizes the modifier keys so that they are interpreted on both platforms as follows:
|
|
21
|
+
*
|
|
22
|
+
* Modifier | macOS | Windows | Linux
|
|
23
|
+
* -------- | --------- | ------- | -------
|
|
24
|
+
* ctrl | control | ctrl | ctrl
|
|
25
|
+
* shift | shift | shift | shift
|
|
26
|
+
* alt | option | alt | alt
|
|
27
|
+
* meta | command | windows | meta
|
|
28
|
+
* mod | command | ctrl | ctrl
|
|
29
|
+
*
|
|
30
|
+
*/
|
|
17
31
|
const useHotkeys = (key, callback, options, deps) => {
|
|
18
32
|
return (0, react_hotkeys_hook_1.useHotkeys)(key, callback, options, deps);
|
|
19
33
|
};
|
|
20
34
|
exports.useHotkeys = useHotkeys;
|
|
21
35
|
const formatHotkey = (key) => {
|
|
22
36
|
let shortcut = key.toLowerCase();
|
|
37
|
+
// map the modifier keys to the platform specific keys
|
|
23
38
|
shortcut = isMac()
|
|
24
39
|
? shortcut
|
|
25
40
|
.replace(/\bmeta\b/, '⌘')
|
|
@@ -27,11 +42,11 @@ const formatHotkey = (key) => {
|
|
|
27
42
|
.replace(/\bmod\b/, '⌘')
|
|
28
43
|
: shortcut.replace(/\bmod\b/, 'ctrl');
|
|
29
44
|
return shortcut
|
|
30
|
-
.replace(/\+/g, ' + ')
|
|
31
|
-
.replace(/\s+/g, ' ')
|
|
45
|
+
.replace(/\+/g, ' + ') // Add space on both sides of each '+'
|
|
46
|
+
.replace(/\s+/g, ' ') // Replace multiple spaces with a single space
|
|
32
47
|
.replace('arrowup', '↑')
|
|
33
48
|
.replace('arrowdown', '↓')
|
|
34
|
-
.replace(/\b\w/g, (c) => c.toUpperCase())
|
|
49
|
+
.replace(/\b\w/g, (c) => c.toUpperCase()) // Capitalize the first letter of each word
|
|
35
50
|
.trim();
|
|
36
51
|
};
|
|
37
52
|
exports.formatHotkey = formatHotkey;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hotkeys.js","sourceRoot":"","sources":["../../src/hooks/use-hotkeys.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,2DAAoE;AACpE,yDAAyD;AACzD,kDAAgD;AAChD,oDAA6C;AAE7C,MAAM,uBAAuB,GAAG,IAAA,aAAG,EAAC;IAClC,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,gBAAO,CAAC,CAAC,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-hotkeys.js","sourceRoot":"","sources":["../../src/hooks/use-hotkeys.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,2DAAoE;AACpE,yDAAyD;AACzD,kDAAgD;AAChD,oDAA6C;AAE7C,MAAM,uBAAuB,GAAG,IAAA,aAAG,EAAC;IAClC,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,gBAAO,CAAC,CAAC,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAI9D;;;;;;;;;;;;;GAaG;AACI,MAAM,UAAU,GAAG,CACxB,GAAW,EACX,QAA8B,EAC9B,OAA8B,EAC9B,IAA2B,EAC3B,EAAE;IACF,OAAO,IAAA,+BAAgB,EAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;AACxD,CAAC,CAAC;AAPW,QAAA,UAAU,cAOrB;AAEK,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IAC1C,IAAI,QAAQ,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;IACjC,sDAAsD;IACtD,QAAQ,GAAG,KAAK,EAAE;QAChB,CAAC,CAAC,QAAQ;aACL,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC;aACxB,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;aAC5B,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;QAC5B,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAExC,OAAO,QAAQ;SACZ,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,sCAAsC;SAC5D,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,8CAA8C;SACnE,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;SACvB,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;SACzB,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,2CAA2C;SACpF,IAAI,EAAE,CAAC;AACZ,CAAC,CAAC;AAjBW,QAAA,YAAY,gBAiBvB;AAEK,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACjE,MAAM,GAAG,GAAG,IAAA,oBAAY,EAAC,MAAM,CAAC,CAAC;IACjC,OAAO,CACL,wCAAM,SAAS,EAAE,uBAAuB,IACrC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACzB,8BAAC,0BAAa,IAAC,GAAG,EAAE,CAAC,IAAG,CAAC,CAAC,IAAI,EAAE,CAAiB,CAClD,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,gBAAgB,oBAS3B"}
|
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* React useState, but the value is persisted in Web API compatible Storage and
|
|
4
|
+
* initial state is picked up from Storage if exists
|
|
5
|
+
*
|
|
6
|
+
* @param id storage key
|
|
7
|
+
* @param initialValue initial value to use if one is not available
|
|
8
|
+
* @param storage
|
|
9
|
+
* @returns
|
|
10
|
+
*/
|
|
2
11
|
declare function usePersistedState<S>(id: string, initialValue: S | (() => S), storage?: Storage): readonly [S, import("react").Dispatch<import("react").SetStateAction<S>>];
|
|
3
12
|
export { usePersistedState };
|
|
4
13
|
//# sourceMappingURL=use-persisted-state.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-persisted-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-persisted-state.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"use-persisted-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-persisted-state.tsx"],"names":[],"mappings":";AAEA;;;;;;;;GAQG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EAC1B,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC3B,OAAO,GAAE,OAAiC,6EAyB3C;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.usePersistedState = void 0;
|
|
4
4
|
const react_1 = require("react");
|
|
5
|
+
/**
|
|
6
|
+
* React useState, but the value is persisted in Web API compatible Storage and
|
|
7
|
+
* initial state is picked up from Storage if exists
|
|
8
|
+
*
|
|
9
|
+
* @param id storage key
|
|
10
|
+
* @param initialValue initial value to use if one is not available
|
|
11
|
+
* @param storage
|
|
12
|
+
* @returns
|
|
13
|
+
*/
|
|
5
14
|
function usePersistedState(id, initialValue, storage = globalThis.localStorage) {
|
|
6
15
|
const idRef = (0, react_1.useRef)(id);
|
|
7
16
|
const storageRef = (0, react_1.useRef)(storage);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-persisted-state.js","sourceRoot":"","sources":["../../src/hooks/use-persisted-state.tsx"],"names":[],"mappings":";;;AAAA,iCAAoD;
|
|
1
|
+
{"version":3,"file":"use-persisted-state.js","sourceRoot":"","sources":["../../src/hooks/use-persisted-state.tsx"],"names":[],"mappings":";;;AAAA,iCAAoD;AAEpD;;;;;;;;GAQG;AACH,SAAS,iBAAiB,CACxB,EAAU,EACV,YAA2B,EAC3B,UAAmB,UAAU,CAAC,YAAY;IAE1C,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,EAAE,CAAC,CAAC;IACzB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,OAAO,CAAC,CAAC;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,GAAG,EAAE;QACzC,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAChE,IAAI,aAAa,EAAE;YACjB,IAAI;gBACF,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;aAClC;YAAC,OAAO,CAAC,EAAE;gBACV,MAAM,IAAI,KAAK,CACb,sFAAsF;oBACnF,CAAW,CAAC,OAAO,CACvB,CAAC;aACH;SACF;QACD,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;YACtC,OAAQ,YAAwB,EAAE,CAAC;SACpC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC,CAAC;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAU,CAAC;AACpC,CAAC;AAEQ,8CAAiB"}
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare function getScrollbarStyles(darkMode: boolean): string;
|
|
3
|
+
/**
|
|
4
|
+
* Provide styles for overflowing content scrollbars.
|
|
5
|
+
* It takes the theme from the theme context (closest LeafyGreenProvider).
|
|
6
|
+
*
|
|
7
|
+
* We customize scrollbars so that they look similar on all devices.
|
|
8
|
+
* Without custom scrollbars, windows looks a bit wild.
|
|
9
|
+
**/
|
|
3
10
|
export declare function useScrollbars(): {
|
|
4
11
|
className: string | undefined;
|
|
5
12
|
};
|
|
6
13
|
interface WithPortalClassName {
|
|
7
14
|
portalClassName?: string;
|
|
8
15
|
}
|
|
9
|
-
export declare const withPortalScrollbars: <ComponentProps extends WithPortalClassName>(WrappedComponent: React.ComponentType<ComponentProps & WithPortalClassName>) => (props: ComponentProps) => JSX.Element;
|
|
16
|
+
export declare const withPortalScrollbars: <ComponentProps extends WithPortalClassName>(WrappedComponent: React.ComponentType<ComponentProps & WithPortalClassName>) => (props: ComponentProps) => React.JSX.Element;
|
|
10
17
|
export {};
|
|
11
18
|
//# sourceMappingURL=use-scrollbars.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-scrollbars.d.ts","sourceRoot":"","sources":["../../src/hooks/use-scrollbars.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,MAAM,OAAO,CAAC;AA+EvC,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO,UAEnD;
|
|
1
|
+
{"version":3,"file":"use-scrollbars.d.ts","sourceRoot":"","sources":["../../src/hooks/use-scrollbars.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,MAAM,OAAO,CAAC;AA+EvC,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO,UAEnD;AAED;;;;;;IAMI;AACJ,wBAAgB,aAAa;;EAgB5B;AAED,UAAU,mBAAmB;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAID,eAAO,MAAM,oBAAoB,2KAqBhC,CAAC"}
|
|
@@ -36,6 +36,8 @@ const use_theme_1 = require("./use-theme");
|
|
|
36
36
|
const scrollbarSize = 10;
|
|
37
37
|
const scrollbarStyles = (0, emotion_1.css)({
|
|
38
38
|
'*::-webkit-scrollbar-thumb': {
|
|
39
|
+
// Don't show a scrollbar unless the user is hovering over
|
|
40
|
+
// the scrollable area. Horizontal scrollbars are always shown.
|
|
39
41
|
backgroundColor: 'transparent',
|
|
40
42
|
borderRadius: `${scrollbarSize}px`,
|
|
41
43
|
},
|
|
@@ -61,6 +63,8 @@ const scrollbarLightModeStyles = (0, emotion_1.css)({
|
|
|
61
63
|
},
|
|
62
64
|
'*::-webkit-scrollbar-thumb': {
|
|
63
65
|
'&:horizontal': {
|
|
66
|
+
// Always show horizontal scrollbars so that folks without
|
|
67
|
+
// trackpads or horizontal scrollable devices can easily scroll.
|
|
64
68
|
backgroundColor: (0, polished_1.rgba)(palette_1.palette.black, 0.12),
|
|
65
69
|
},
|
|
66
70
|
},
|
|
@@ -79,6 +83,8 @@ const scrollbarDarkModeStyles = (0, emotion_1.css)({
|
|
|
79
83
|
},
|
|
80
84
|
'*::-webkit-scrollbar-thumb': {
|
|
81
85
|
'&:horizontal': {
|
|
86
|
+
// Always show horizontal scrollbars so that folks without
|
|
87
|
+
// trackpads or horizontal scrollable devices can easily scroll.
|
|
82
88
|
backgroundColor: (0, polished_1.rgba)(palette_1.palette.white, 0.2),
|
|
83
89
|
},
|
|
84
90
|
},
|
|
@@ -92,10 +98,19 @@ function getScrollbarStyles(darkMode) {
|
|
|
92
98
|
return darkMode ? scrollbarDarkModeStyles : scrollbarLightModeStyles;
|
|
93
99
|
}
|
|
94
100
|
exports.getScrollbarStyles = getScrollbarStyles;
|
|
101
|
+
/**
|
|
102
|
+
* Provide styles for overflowing content scrollbars.
|
|
103
|
+
* It takes the theme from the theme context (closest LeafyGreenProvider).
|
|
104
|
+
*
|
|
105
|
+
* We customize scrollbars so that they look similar on all devices.
|
|
106
|
+
* Without custom scrollbars, windows looks a bit wild.
|
|
107
|
+
**/
|
|
95
108
|
function useScrollbars() {
|
|
96
109
|
const darkMode = (0, use_theme_1.useDarkMode)();
|
|
97
110
|
const scrollbarStylesClass = (0, react_1.useMemo)(() => {
|
|
98
111
|
if (!is_electron_renderer_1.default) {
|
|
112
|
+
// When we're not in an electron environment, like compass-aggregations
|
|
113
|
+
// in cloud, we don't apply the scrollbar styles.
|
|
99
114
|
return undefined;
|
|
100
115
|
}
|
|
101
116
|
return getScrollbarStyles(!!darkMode);
|
|
@@ -105,9 +120,13 @@ function useScrollbars() {
|
|
|
105
120
|
};
|
|
106
121
|
}
|
|
107
122
|
exports.useScrollbars = useScrollbars;
|
|
123
|
+
// Used to wrap LeafyGreen components that use portals with Compass'
|
|
124
|
+
// scrollbar styles. These are not applied in web environments (cloud).
|
|
108
125
|
const withPortalScrollbars = (WrappedComponent) => {
|
|
109
126
|
const ComponentWithScrollbars = (props) => {
|
|
110
127
|
const { className } = useScrollbars();
|
|
128
|
+
// When we're not in an electron environment, like compass-aggregations
|
|
129
|
+
// in cloud, we don't apply the scrollbar styles.
|
|
111
130
|
const appliedClassName = is_electron_renderer_1.default ? className : undefined;
|
|
112
131
|
return (react_1.default.createElement(WrappedComponent, { ...props, portalClassName: (0, emotion_1.cx)(appliedClassName, props.portalClassName) }));
|
|
113
132
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-scrollbars.js","sourceRoot":"","sources":["../../src/hooks/use-scrollbars.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAgC;AAChC,oDAAiD;AACjD,oDAAiD;AACjD,+CAAuC;AACvC,gFAAsD;AAEtD,2CAA0C;AAE1C,MAAM,aAAa,GAAG,EAAE,CAAC;AAEzB,MAAM,eAAe,GAAG,IAAA,aAAG,EAAC;IAC1B,4BAA4B,EAAE;
|
|
1
|
+
{"version":3,"file":"use-scrollbars.js","sourceRoot":"","sources":["../../src/hooks/use-scrollbars.tsx"],"names":[],"mappings":"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"}
|
package/lib/hooks/use-sort.js
CHANGED
|
@@ -35,10 +35,12 @@ const controlsContainer = (0, emotion_1.css)({
|
|
|
35
35
|
gap: tokens_1.spacing[2],
|
|
36
36
|
});
|
|
37
37
|
const label = (0, emotion_1.css)({
|
|
38
|
+
// Because leafygreen
|
|
38
39
|
margin: '0 !important',
|
|
39
40
|
padding: '0 !important',
|
|
40
41
|
});
|
|
41
42
|
const select = (0, emotion_1.css)({
|
|
43
|
+
// Because leafygreen
|
|
42
44
|
'& > button': {
|
|
43
45
|
margin: 0,
|
|
44
46
|
},
|
|
@@ -95,13 +97,17 @@ function useSortedItems(items, { name, order, }, sortFn = null) {
|
|
|
95
97
|
if (!name) {
|
|
96
98
|
return 0;
|
|
97
99
|
}
|
|
100
|
+
// If value we are sorting by doesn't exist on an object, send it all the
|
|
101
|
+
// way to the back of the list
|
|
98
102
|
if (typeof a[name] === 'undefined') {
|
|
99
103
|
return 1;
|
|
100
104
|
}
|
|
101
105
|
const sort = sortFn && sortFn[name];
|
|
106
|
+
// If custom sort is provided for the key, use it
|
|
102
107
|
if (sort) {
|
|
103
108
|
return sort(a[name], b[name], order);
|
|
104
109
|
}
|
|
110
|
+
// Otherwise use default sort method based on the value type
|
|
105
111
|
if (typeof a[name] === 'string') {
|
|
106
112
|
return sortString(a[name], b[name], order);
|
|
107
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sort.js","sourceRoot":"","sources":["../../src/hooks/use-sort.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,6CAA0C;AAC1C,oDAA6C;AAC7C,kDAAgD;AAChD,yDAA+E;AAE/E,MAAM,iBAAiB,GAAG,IAAA,aAAG,EAAC;IAC5B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,gBAAO,CAAC,CAAC,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,IAAA,aAAG,EAAC;
|
|
1
|
+
{"version":3,"file":"use-sort.js","sourceRoot":"","sources":["../../src/hooks/use-sort.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ type StackedComponentProviderProps = {
|
|
|
5
5
|
};
|
|
6
6
|
export declare const StackedComponentProvider: ({ zIndex, children, }: StackedComponentProviderProps & {
|
|
7
7
|
children: React.ReactNode;
|
|
8
|
-
}) => JSX.Element;
|
|
8
|
+
}) => React.JSX.Element;
|
|
9
9
|
export declare const useStackedComponent: () => StackedComponentProviderProps | null;
|
|
10
10
|
export declare const withStackedComponentStyles: <ComponentProps extends {
|
|
11
11
|
className?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-stacked-component.d.ts","sourceRoot":"","sources":["../../src/hooks/use-stacked-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,OAAO,CAAC;AACzD,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,KAAK,6BAA6B,GAAG;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAKF,eAAO,MAAM,wBAAwB;cAGU,MAAM,SAAS;
|
|
1
|
+
{"version":3,"file":"use-stacked-component.d.ts","sourceRoot":"","sources":["../../src/hooks/use-stacked-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,OAAO,CAAC;AACzD,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,KAAK,6BAA6B,GAAG;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAKF,eAAO,MAAM,wBAAwB;cAGU,MAAM,SAAS;uBAO7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,4CAE/B,CAAC;AAsDF,eAAO,MAAM,0BAA0B;;oFAMtC,CAAC;AAEF,eAAO,MAAM,iCAAiC;;oFAM7C,CAAC"}
|
|
@@ -35,6 +35,7 @@ const useStackedComponent = () => {
|
|
|
35
35
|
return (0, react_1.useContext)(StackedComponentContext);
|
|
36
36
|
};
|
|
37
37
|
exports.useStackedComponent = useStackedComponent;
|
|
38
|
+
// TODO(LG-4109): This should be eventually supported by the LG design system
|
|
38
39
|
const withBaseStyles = function (WrappedComponent, usePopoverZIndex) {
|
|
39
40
|
const ComponentWithStackedStyles = (props, ref) => {
|
|
40
41
|
const context = (0, exports.useStackedComponent)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-stacked-component.js","sourceRoot":"","sources":["../../src/hooks/use-stacked-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAkE;AAMlE,MAAM,uBAAuB,GAC3B,IAAA,qBAAa,EAAuC,IAAI,CAAC,CAAC;AAErD,MAAM,wBAAwB,GAAG,CAAC,EACvC,MAAM,EACN,QAAQ,GACsD,EAAE,EAAE;IAClE,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CACL,8BAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC3C,QAAQ,CACwB,CACpC,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,wBAAwB,4BAUnC;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,IAAA,kBAAU,EAAC,uBAAuB,CAAC,CAAC;AAC7C,CAAC,CAAC;AAFW,QAAA,mBAAmB,uBAE9B;
|
|
1
|
+
{"version":3,"file":"use-stacked-component.js","sourceRoot":"","sources":["../../src/hooks/use-stacked-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAkE;AAMlE,MAAM,uBAAuB,GAC3B,IAAA,qBAAa,EAAuC,IAAI,CAAC,CAAC;AAErD,MAAM,wBAAwB,GAAG,CAAC,EACvC,MAAM,EACN,QAAQ,GACsD,EAAE,EAAE;IAClE,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CACL,8BAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC3C,QAAQ,CACwB,CACpC,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,wBAAwB,4BAUnC;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,IAAA,kBAAU,EAAC,uBAAuB,CAAC,CAAC;AAC7C,CAAC,CAAC;AAFW,QAAA,mBAAmB,uBAE9B;AAQF,6EAA6E;AAC7E,MAAM,cAAc,GAAG,UACrB,gBAA+C,EAC/C,gBAA4B;IAE5B,MAAM,0BAA0B,GAAG,CACjC,KAAqB,EACrB,GAAgD,EAChD,EAAE;QACF,MAAM,OAAO,GAAG,IAAA,2BAAmB,GAAE,CAAC;QACtC,MAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;YACvC,IAAI,OAAO,EAAE,MAAM,EAAE;gBACnB,IAAI,gBAAgB,EAAE;oBACpB,OAAO;wBACL,aAAa,EACV,KAAqC,CAAC,aAAa;4BACpD,OAAO,CAAC,MAAM;qBACjB,CAAC;iBACH;qBAAM;oBACL,OAAO;wBACL,KAAK,EAAE;4BACL,MAAM,EAAE,OAAO,CAAC,MAAM;4BACtB,GAAI,KAAsC,CAAC,KAAK;yBACjD;qBACF,CAAC;iBACH;aACF;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,EAAE;YACD,OAAO;YACN,KAAqC,CAAC,aAAa;YACnD,KAAsC,CAAC,KAAK;SAC9C,CAAC,CAAC;QAEH,OAAO,8BAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,KAAM,mBAAmB,GAAI,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,WAAW,GACf,gBAAgB,CAAC,WAAW,IAAI,gBAAgB,CAAC,IAAI,IAAI,WAAW,CAAC;IACvE,0BAA0B,CAAC,WAAW,GAAG,qBAAqB,WAAW,GAAG,CAAC;IAE7E,OAAO,eAAK,CAAC,UAAU,CACrB,0BAA0B,CACA,CAAC;AAC/B,CAAC,CAAC;AAEK,MAAM,0BAA0B,GAAG,UAGxC,gBAA+C;IAE/C,OAAO,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;AACjD,CAAC,CAAC;AANW,QAAA,0BAA0B,8BAMrC;AAEK,MAAM,iCAAiC,GAAG,UAG/C,gBAA+C;IAE/C,OAAO,cAAc,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAChD,CAAC,CAAC;AANW,QAAA,iCAAiC,qCAM5C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,aAAK,KAAK;IACR,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,wBAAgB,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAGxE;AAED,UAAU,iBAAiB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,eAAO,MAAM,aAAa;cAId,MAAM,SAAS;;eAEhB,KAAK;iBACH,OAAO;;MAEhB,MAAM,YAQT,CAAC;AAIF,QAAA,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,aAAK,KAAK;IACR,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,wBAAgB,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAGxE;AAED,UAAU,iBAAiB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,eAAO,MAAM,aAAa;cAId,MAAM,SAAS;;eAEhB,KAAK;iBACH,OAAO;;MAEhB,MAAM,YAQT,CAAC;AAIF,QAAA,MAAM,YAAY,kLA8BjB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC"}
|
package/lib/hooks/use-theme.js
CHANGED
|
@@ -40,14 +40,23 @@ function useDarkMode(localDarkMode) {
|
|
|
40
40
|
return darkMode.darkMode;
|
|
41
41
|
}
|
|
42
42
|
exports.useDarkMode = useDarkMode;
|
|
43
|
+
// @deprecated Only left for browser-shell compatibility
|
|
43
44
|
const ThemeProvider = ({ children, theme, }) => {
|
|
44
45
|
return theme.enabled ? (react_1.default.createElement(leafygreen_provider_1.default, { darkMode: theme.theme === Theme.Dark }, children)) : (react_1.default.createElement(react_1.default.Fragment, null, children));
|
|
45
46
|
};
|
|
46
47
|
exports.ThemeProvider = ThemeProvider;
|
|
48
|
+
// High Order Component(HOC) used to inject Compass' theme pulled from the available
|
|
49
|
+
// theme on the React context from LeafyGreen's provider into the wrapped component.
|
|
47
50
|
const withDarkMode = function (WrappedComponent) {
|
|
48
51
|
const ComponentWithDarkMode = (props, ref) => {
|
|
49
52
|
const darkMode = useDarkMode();
|
|
50
|
-
return (react_1.default.createElement(WrappedComponent
|
|
53
|
+
return (react_1.default.createElement(WrappedComponent
|
|
54
|
+
// Set the darkMode before the props so that the props can
|
|
55
|
+
// override the theme if needed.
|
|
56
|
+
, {
|
|
57
|
+
// Set the darkMode before the props so that the props can
|
|
58
|
+
// override the theme if needed.
|
|
59
|
+
darkMode: darkMode, ref: ref, ...props }));
|
|
51
60
|
};
|
|
52
61
|
const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
|
|
53
62
|
ComponentWithDarkMode.displayName = `WithDarkMode(${displayName})`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-theme.js","sourceRoot":"","sources":["../../src/hooks/use-theme.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,0FAE4C;AAE5C,IAAK,KAGJ;AAHD,WAAK,KAAK;IACR,wBAAe,CAAA;IACf,sBAAa,CAAA;AACf,CAAC,EAHI,KAAK,KAAL,KAAK,QAGT;
|
|
1
|
+
{"version":3,"file":"use-theme.js","sourceRoot":"","sources":["../../src/hooks/use-theme.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,0FAE4C;AAE5C,IAAK,KAGJ;AAHD,WAAK,KAAK;IACR,wBAAe,CAAA;IACf,sBAAa,CAAA;AACf,CAAC,EAHI,KAAK,KAAL,KAAK,QAGT;AAiEQ,sBAAK;AA/Dd,SAAgB,WAAW,CAAC,aAAuB;IACjD,MAAM,QAAQ,GAAG,IAAA,iCAAqB,EAAC,aAAa,CAAC,CAAC;IACtD,OAAO,QAAQ,CAAC,QAAQ,CAAC;AAC3B,CAAC;AAHD,kCAGC;AAMD,wDAAwD;AACjD,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,GAON,EAAsB,EAAE;IACvB,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACrB,8BAAC,6BAAkB,IAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,IACrD,QAAQ,CACU,CACtB,CAAC,CAAC,CAAC,CACF,8DAAG,QAAQ,CAAI,CAChB,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,aAAa,iBAiBxB;AAEF,oFAAoF;AACpF,oFAAoF;AACpF,MAAM,YAAY,GAAG,UAGnB,gBAAyE;IAEzE,MAAM,qBAAqB,GAAG,CAC5B,KAAqB,EACrB,GAEC,EACD,EAAE;QACF,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAC/B,OAAO,CACL,8BAAC,gBAAgB;QACf,0DAA0D;QAC1D,gCAAgC;;YADhC,0DAA0D;YAC1D,gCAAgC;YAChC,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GACf,gBAAgB,CAAC,WAAW,IAAI,gBAAgB,CAAC,IAAI,IAAI,WAAW,CAAC;IACvE,qBAAqB,CAAC,WAAW,GAAG,gBAAgB,WAAW,GAAG,CAAC;IAEnE,OAAO,eAAK,CAAC,UAAU,CACrB,qBAAqB,CACgB,CAAC;AAC1C,CAAC,CAAC;AAEc,oCAAY"}
|
package/lib/hooks/use-toast.d.ts
CHANGED
|
@@ -8,5 +8,20 @@ export interface ToastActions {
|
|
|
8
8
|
export declare const openToast: (id: string, props: ToastProperties) => void;
|
|
9
9
|
export declare const closeToast: (id: string) => void;
|
|
10
10
|
export declare const ToastArea: React.FunctionComponent;
|
|
11
|
+
/**
|
|
12
|
+
* @example
|
|
13
|
+
*
|
|
14
|
+
* ```
|
|
15
|
+
* const MyButton = () => {
|
|
16
|
+
* const { openToast } = useToast('namespace');
|
|
17
|
+
* return <button type="button" onClick={() => openToast(
|
|
18
|
+
* 'myToast1', {title: 'This is a notification'})} />
|
|
19
|
+
* };
|
|
20
|
+
*
|
|
21
|
+
* <ToastArea><MyButton/><ToastArea>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @returns
|
|
25
|
+
*/
|
|
11
26
|
export declare function useToast(namespace: string): ToastActions;
|
|
12
27
|
//# sourceMappingURL=use-toast.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-toast.d.ts","sourceRoot":"","sources":["../../src/hooks/use-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQ3D,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,UAAU,EACR,eAAe,GACf,OAAO,GACP,aAAa,GACb,SAAS,GACT,UAAU,GACV,SAAS,GACT,aAAa,GACb,SAAS,CACZ,CAAC;AAMF,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAwED,eAAO,MAAM,SAAS,OAnDN,MAAM,SAAS,eAAe,KAAG,IAmDa,CAAC;AAE/D,eAAO,MAAM,UAAU,OA9BN,MAAM,KAAG,IA8BsC,CAAC;AA2DjE,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAmB7B,CAAC;
|
|
1
|
+
{"version":3,"file":"use-toast.d.ts","sourceRoot":"","sources":["../../src/hooks/use-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQ3D,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,UAAU,EACR,eAAe,GACf,OAAO,GACP,aAAa,GACb,SAAS,GACT,UAAU,GACV,SAAS,GACT,aAAa,GACb,SAAS,CACZ,CAAC;AAMF,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAwED,eAAO,MAAM,SAAS,OAnDN,MAAM,SAAS,eAAe,KAAG,IAmDa,CAAC;AAE/D,eAAO,MAAM,UAAU,OA9BN,MAAM,KAAG,IA8BsC,CAAC;AA2DjE,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAmB7B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,CAsBxD"}
|
package/lib/hooks/use-toast.js
CHANGED
|
@@ -36,6 +36,7 @@ class GlobalToastState {
|
|
|
36
36
|
this.timeouts = new Map();
|
|
37
37
|
this.toasts = new Map();
|
|
38
38
|
this.onToastsChange = () => {
|
|
39
|
+
/** noop */
|
|
39
40
|
};
|
|
40
41
|
}
|
|
41
42
|
openToast(id, props) {
|
|
@@ -55,6 +56,8 @@ class GlobalToastState {
|
|
|
55
56
|
this.closeToast(id);
|
|
56
57
|
}, toastProps.timeout);
|
|
57
58
|
this.timeouts.set(id, timeoutId);
|
|
59
|
+
// If we are in the node environment, unref the timeout to allow process
|
|
60
|
+
// to exit (this is mostly needed for test environments)
|
|
58
61
|
timeoutId.unref?.();
|
|
59
62
|
}
|
|
60
63
|
this.onToastsChange('push', { id, ...toastProps }, this.toasts);
|
|
@@ -91,11 +94,19 @@ exports.closeToast = toastState.closeToast.bind(toastState);
|
|
|
91
94
|
const toastActions = { openToast: exports.openToast, closeToast: exports.closeToast };
|
|
92
95
|
const ToastContext = (0, react_1.createContext)({
|
|
93
96
|
openToast: () => {
|
|
97
|
+
//
|
|
94
98
|
},
|
|
95
99
|
closeToast: () => {
|
|
100
|
+
//
|
|
96
101
|
},
|
|
97
102
|
});
|
|
98
103
|
const _ToastArea = ({ children }) => {
|
|
104
|
+
// NB: the way leafygreen implements this hook leads to anything specifying
|
|
105
|
+
// toast methods in hooks dependencies to constantly update potentially
|
|
106
|
+
// causing infinite loops of toasts. To work around that we are storing toast
|
|
107
|
+
// interface in a ref so that we can safely use it inside our effects
|
|
108
|
+
//
|
|
109
|
+
// @see {@link https://jira.mongodb.org/browse/LG-3209}
|
|
99
110
|
const toastRef = (0, react_1.useRef)((0, leafygreen_1.useToast)());
|
|
100
111
|
const toastStateRef = (0, react_1.useRef)();
|
|
101
112
|
if (!toastStateRef.current) {
|
|
@@ -104,6 +115,9 @@ const _ToastArea = ({ children }) => {
|
|
|
104
115
|
if (action === 'push') {
|
|
105
116
|
toastRef.current.pushToast({
|
|
106
117
|
...toast,
|
|
118
|
+
// To be able to maintain a global state of toasts, we remove
|
|
119
|
+
// timeout prop as timeouts handled by the GlobalToast state and our
|
|
120
|
+
// timeouts logic doesn't match leafygreen out
|
|
107
121
|
timeout: null,
|
|
108
122
|
});
|
|
109
123
|
}
|
|
@@ -125,6 +139,7 @@ const _ToastArea = ({ children }) => {
|
|
|
125
139
|
const ToastAreaMountedContext = react_1.default.createContext(false);
|
|
126
140
|
const ToastArea = ({ children }) => {
|
|
127
141
|
const stackedContext = (0, use_stacked_component_1.useStackedComponent)();
|
|
142
|
+
// We always want to show the toast over modal or other stacked components that may hide the toast and hence +1
|
|
128
143
|
const stackedElemStyles = (0, react_1.useMemo)(() => {
|
|
129
144
|
const zIndex = stackedContext?.zIndex ? stackedContext.zIndex + 1 : 1;
|
|
130
145
|
return (0, __1.css)({ zIndex });
|
|
@@ -137,6 +152,21 @@ const ToastArea = ({ children }) => {
|
|
|
137
152
|
react_1.default.createElement(_ToastArea, null, children))));
|
|
138
153
|
};
|
|
139
154
|
exports.ToastArea = ToastArea;
|
|
155
|
+
/**
|
|
156
|
+
* @example
|
|
157
|
+
*
|
|
158
|
+
* ```
|
|
159
|
+
* const MyButton = () => {
|
|
160
|
+
* const { openToast } = useToast('namespace');
|
|
161
|
+
* return <button type="button" onClick={() => openToast(
|
|
162
|
+
* 'myToast1', {title: 'This is a notification'})} />
|
|
163
|
+
* };
|
|
164
|
+
*
|
|
165
|
+
* <ToastArea><MyButton/><ToastArea>
|
|
166
|
+
* ```
|
|
167
|
+
*
|
|
168
|
+
* @returns
|
|
169
|
+
*/
|
|
140
170
|
function useToast(namespace) {
|
|
141
171
|
const { openToast: openGlobalToast, closeToast: closeGlobalToast } = (0, react_1.useContext)(ToastContext);
|
|
142
172
|
const openToast = (0, react_1.useCallback)((toastId, toastProperties) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-toast.js","sourceRoot":"","sources":["../../src/hooks/use-toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAOe;AAEf,yDAGkC;AAClC,mEAA8D;AAC9D,0BAAyB;AAczB,MAAM,sBAAsB,GAA6B;IACvD,WAAW,EAAE,IAAI;CAClB,CAAC;AAoBF,MAAM,gBAAgB;IAAtB;QACU,aAAQ,GAAG,IAAI,GAAG,EAAyC,CAAC;QAC5D,WAAM,GAAG,IAAI,GAAG,EAA2B,CAAC;QACpD,mBAAc,GAAkB,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"use-toast.js","sourceRoot":"","sources":["../../src/hooks/use-toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAOe;AAEf,yDAGkC;AAClC,mEAA8D;AAC9D,0BAAyB;AAczB,MAAM,sBAAsB,GAA6B;IACvD,WAAW,EAAE,IAAI;CAClB,CAAC;AAoBF,MAAM,gBAAgB;IAAtB;QACU,aAAQ,GAAG,IAAI,GAAG,EAAyC,CAAC;QAC5D,WAAM,GAAG,IAAI,GAAG,EAA2B,CAAC;QACpD,mBAAc,GAAkB,GAAG,EAAE;YACnC,WAAW;QACb,CAAC,CAAC;IAgDJ,CAAC;IA/CC,SAAS,CAAC,EAAU,EAAE,KAAsB;QAC1C,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QACtB,MAAM,UAAU,GAAG;YACjB,GAAG,sBAAsB;YACzB,GAAG,KAAK;YACR,aAAa,EAAE,SAAS,EAAE,EAAE;YAC5B,OAAO,EAAE,CAAC,CAA0B,EAAE,EAAE;gBACtC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;gBACpB,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;YACrB,CAAC;SACF,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;QAChC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAChC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;YACtB,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YACjC,wEAAwE;YACxE,wDAAwD;YACxD,SAAS,CAAC,KAAK,EAAE,EAAE,CAAC;SACrB;QACD,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAClE,CAAC;IACD,UAAU,CAAC,EAAU;QACnB,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QACtB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACvB,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;IACD,YAAY,CAAC,EAAW;QACtB,IAAI,EAAE,EAAE;YACN,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;gBACzB,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBACpC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;aAC1B;SACF;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;gBAC3B,YAAY,CAAC,EAAE,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;SACvB;IACH,CAAC;IACD,KAAK;QACH,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,OAAO,GAAG,CAAC;IACb,CAAC;CACF;AAED,MAAM,UAAU,GAAG,IAAI,gBAAgB,EAAE,CAAC;AAE7B,QAAA,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAElD,QAAA,UAAU,GAAG,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAEjE,MAAM,YAAY,GAAG,EAAE,SAAS,EAAT,iBAAS,EAAE,UAAU,EAAV,kBAAU,EAAE,CAAC;AAE/C,MAAM,YAAY,GAAG,IAAA,qBAAa,EAAe;IAC/C,SAAS,EAAE,GAAG,EAAE;QACd,EAAE;IACJ,CAAC;IACD,UAAU,EAAE,GAAG,EAAE;QACf,EAAE;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3D,2EAA2E;IAC3E,uEAAuE;IACvE,6EAA6E;IAC7E,qEAAqE;IACrE,EAAE;IACF,uDAAuD;IACvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAA,qBAAkB,GAAE,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,IAAA,cAAM,GAAoB,CAAC;IAEjD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;QAC1B,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC;QACnC,aAAa,CAAC,OAAO,CAAC,cAAc,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACvD,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;oBACzB,GAAI,KAAyB;oBAC7B,6DAA6D;oBAC7D,oEAAoE;oBACpE,8CAA8C;oBAC9C,OAAO,EAAE,IAAI;iBACd,CAAC,CAAC;aACJ;YACD,IAAI,MAAM,KAAK,KAAK,EAAE;gBACpB,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;aACrC;QACH,CAAC,CAAC;KACH;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAC3C,GAAG,EAAE,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;gBAClB,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IACvC,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,eAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAEpD,MAAM,SAAS,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjE,MAAM,cAAc,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAC7C,+GAA+G;IAC/G,MAAM,iBAAiB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GAAG,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtE,OAAO,IAAA,OAAG,EAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,IAAI,IAAA,kBAAU,EAAC,uBAAuB,CAAC,EAAE;QACvC,OAAO,8DAAG,QAAQ,CAAI,CAAC;KACxB;IAED,OAAO,CACL,8BAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI;QAC3C,8BAAC,0BAAa,IAAC,eAAe,EAAE,iBAAiB;YAC/C,8BAAC,UAAU,QAAE,QAAQ,CAAc,CACrB,CACiB,CACpC,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,SAAS,aAmBpB;AAEF;;;;;;;;;;;;;;GAcG;AACH,SAAgB,QAAQ,CAAC,SAAiB;IACxC,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAChE,IAAA,kBAAU,EAAC,YAAY,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,IAAA,mBAAW,EAC3B,CAAC,OAAe,EAAE,eAAgC,EAAQ,EAAE;QAC1D,eAAe,CAAC,GAAG,SAAS,KAAK,OAAO,EAAE,EAAE,eAAe,CAAC,CAAC;IAC/D,CAAC,EACD,CAAC,SAAS,EAAE,eAAe,CAAC,CAC7B,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,CAAC,OAAe,EAAQ,EAAE;QACxB,gBAAgB,CAAC,GAAG,SAAS,KAAK,OAAO,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAC9B,CAAC;IAEF,OAAO;QACL,SAAS;QACT,UAAU;KACX,CAAC;AACJ,CAAC;AAtBD,4BAsBC"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Hook that adds support for the grid keyboard navigation while handling the
|
|
4
|
+
* focus using the roving tab index
|
|
5
|
+
*
|
|
6
|
+
* {@link https://www.w3.org/TR/wai-aria-1.1/#grid}
|
|
7
|
+
* {@link https://www.w3.org/TR/wai-aria-1.1/#gridcell}
|
|
8
|
+
* {@link https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex}
|
|
9
|
+
*/
|
|
2
10
|
export declare function useVirtualGridArrowNavigation<T extends HTMLElement = HTMLElement>({ colCount, rowCount, itemsCount, resetActiveItemOnBlur, pageSize, defaultCurrentTabbable, onFocusMove, }: {
|
|
3
11
|
colCount: number;
|
|
4
12
|
rowCount: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-virtual-grid.d.ts","sourceRoot":"","sources":["../../src/hooks/use-virtual-grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-virtual-grid.d.ts","sourceRoot":"","sources":["../../src/hooks/use-virtual-grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC3C,CAAC,SAAS,WAAW,GAAG,WAAW,EACnC,EACA,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,qBAA4B,EAC5B,QAAY,EACZ,sBAA0B,EAC1B,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAsL/B"}
|