@breadstone/mosaik-elements-react 0.0.206 → 0.0.210
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/CHANGELOG.md +194 -0
- package/Cdk/Index.d.ts +2 -0
- package/Cdk/Index.d.ts.map +1 -0
- package/Cdk/Index.js +4 -0
- package/Cdk/Index.js.map +1 -0
- package/Cdk/Overlays/BottomSheet/BottomSheetContext.d.ts +63 -0
- package/Cdk/Overlays/BottomSheet/BottomSheetContext.d.ts.map +1 -0
- package/Cdk/Overlays/BottomSheet/BottomSheetContext.js +69 -0
- package/Cdk/Overlays/BottomSheet/BottomSheetContext.js.map +1 -0
- package/Cdk/Overlays/BottomSheet/Index.d.ts +3 -0
- package/Cdk/Overlays/BottomSheet/Index.d.ts.map +1 -0
- package/Cdk/Overlays/BottomSheet/Index.js +5 -0
- package/Cdk/Overlays/BottomSheet/Index.js.map +1 -0
- package/Cdk/Overlays/BottomSheet/useBottomSheet.d.ts +65 -0
- package/Cdk/Overlays/BottomSheet/useBottomSheet.d.ts.map +1 -0
- package/Cdk/Overlays/BottomSheet/useBottomSheet.js +49 -0
- package/Cdk/Overlays/BottomSheet/useBottomSheet.js.map +1 -0
- package/Cdk/Overlays/Dialog/DialogContext.d.ts +63 -0
- package/Cdk/Overlays/Dialog/DialogContext.d.ts.map +1 -0
- package/Cdk/Overlays/Dialog/DialogContext.js +69 -0
- package/Cdk/Overlays/Dialog/DialogContext.js.map +1 -0
- package/Cdk/Overlays/Dialog/Index.d.ts +3 -0
- package/Cdk/Overlays/Dialog/Index.d.ts.map +1 -0
- package/Cdk/Overlays/Dialog/Index.js +5 -0
- package/Cdk/Overlays/Dialog/Index.js.map +1 -0
- package/Cdk/Overlays/Dialog/useDialog.d.ts +66 -0
- package/Cdk/Overlays/Dialog/useDialog.d.ts.map +1 -0
- package/Cdk/Overlays/Dialog/useDialog.js +55 -0
- package/Cdk/Overlays/Dialog/useDialog.js.map +1 -0
- package/Cdk/Overlays/Drawer/DrawerContext.d.ts +63 -0
- package/Cdk/Overlays/Drawer/DrawerContext.d.ts.map +1 -0
- package/Cdk/Overlays/Drawer/DrawerContext.js +69 -0
- package/Cdk/Overlays/Drawer/DrawerContext.js.map +1 -0
- package/Cdk/Overlays/Drawer/Index.d.ts +3 -0
- package/Cdk/Overlays/Drawer/Index.d.ts.map +1 -0
- package/Cdk/Overlays/Drawer/Index.js +5 -0
- package/Cdk/Overlays/Drawer/Index.js.map +1 -0
- package/Cdk/Overlays/Drawer/useDrawer.d.ts +66 -0
- package/Cdk/Overlays/Drawer/useDrawer.d.ts.map +1 -0
- package/Cdk/Overlays/Drawer/useDrawer.js +50 -0
- package/Cdk/Overlays/Drawer/useDrawer.js.map +1 -0
- package/Cdk/Overlays/Index.d.ts +6 -0
- package/Cdk/Overlays/Index.d.ts.map +1 -0
- package/Cdk/Overlays/Index.js +8 -0
- package/Cdk/Overlays/Index.js.map +1 -0
- package/Cdk/Overlays/MessageBox/Index.d.ts +3 -0
- package/Cdk/Overlays/MessageBox/Index.d.ts.map +1 -0
- package/Cdk/Overlays/MessageBox/Index.js +5 -0
- package/Cdk/Overlays/MessageBox/Index.js.map +1 -0
- package/Cdk/Overlays/MessageBox/MessageBoxContext.d.ts +63 -0
- package/Cdk/Overlays/MessageBox/MessageBoxContext.d.ts.map +1 -0
- package/Cdk/Overlays/MessageBox/MessageBoxContext.js +69 -0
- package/Cdk/Overlays/MessageBox/MessageBoxContext.js.map +1 -0
- package/Cdk/Overlays/MessageBox/useMessageBox.d.ts +62 -0
- package/Cdk/Overlays/MessageBox/useMessageBox.d.ts.map +1 -0
- package/Cdk/Overlays/MessageBox/useMessageBox.js +57 -0
- package/Cdk/Overlays/MessageBox/useMessageBox.js.map +1 -0
- package/Cdk/Overlays/Sheet/Index.d.ts +3 -0
- package/Cdk/Overlays/Sheet/Index.d.ts.map +1 -0
- package/Cdk/Overlays/Sheet/Index.js +5 -0
- package/Cdk/Overlays/Sheet/Index.js.map +1 -0
- package/Cdk/Overlays/Sheet/SheetContext.d.ts +63 -0
- package/Cdk/Overlays/Sheet/SheetContext.d.ts.map +1 -0
- package/Cdk/Overlays/Sheet/SheetContext.js +69 -0
- package/Cdk/Overlays/Sheet/SheetContext.js.map +1 -0
- package/Cdk/Overlays/Sheet/useSheet.d.ts +65 -0
- package/Cdk/Overlays/Sheet/useSheet.d.ts.map +1 -0
- package/Cdk/Overlays/Sheet/useSheet.js +49 -0
- package/Cdk/Overlays/Sheet/useSheet.js.map +1 -0
- package/Cdk/Overlays/Toast/Index.d.ts +3 -0
- package/Cdk/Overlays/Toast/Index.d.ts.map +1 -0
- package/Cdk/Overlays/Toast/Index.js +5 -0
- package/Cdk/Overlays/Toast/Index.js.map +1 -0
- package/Cdk/Overlays/Toast/ToastContext.d.ts +63 -0
- package/Cdk/Overlays/Toast/ToastContext.d.ts.map +1 -0
- package/Cdk/Overlays/Toast/ToastContext.js +69 -0
- package/Cdk/Overlays/Toast/ToastContext.js.map +1 -0
- package/Cdk/Overlays/Toast/useToast.d.ts +62 -0
- package/Cdk/Overlays/Toast/useToast.d.ts.map +1 -0
- package/Cdk/Overlays/Toast/useToast.js +51 -0
- package/Cdk/Overlays/Toast/useToast.js.map +1 -0
- package/Controls/Components/Grouping/Region/RegionComponent.d.ts +19 -0
- package/Controls/Components/Grouping/Region/RegionComponent.d.ts.map +1 -0
- package/Controls/Components/Grouping/Region/RegionComponent.js +27 -0
- package/Controls/Components/Grouping/Region/RegionComponent.js.map +1 -0
- package/Controls/Components/Grouping/Region/RegionViewComponent.d.ts +18 -0
- package/Controls/Components/Grouping/Region/RegionViewComponent.d.ts.map +1 -0
- package/Controls/Components/Grouping/Region/RegionViewComponent.js +26 -0
- package/Controls/Components/Grouping/Region/RegionViewComponent.js.map +1 -0
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxComponent.d.ts +4 -0
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxComponent.d.ts.map +1 -1
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxComponent.js +4 -0
- package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxComponent.js.map +1 -1
- package/Controls/Components/Inputs/ColorBox/ColorBoxComponent.d.ts +4 -0
- package/Controls/Components/Inputs/ColorBox/ColorBoxComponent.d.ts.map +1 -1
- package/Controls/Components/Inputs/ColorBox/ColorBoxComponent.js +4 -0
- package/Controls/Components/Inputs/ColorBox/ColorBoxComponent.js.map +1 -1
- package/Controls/Components/Inputs/NumberBox/NumberBoxComponent.d.ts +1 -0
- package/Controls/Components/Inputs/NumberBox/NumberBoxComponent.d.ts.map +1 -1
- package/Controls/Components/Inputs/NumberBox/NumberBoxComponent.js +1 -0
- package/Controls/Components/Inputs/NumberBox/NumberBoxComponent.js.map +1 -1
- package/Controls/Components/Media/Timeline/TimelineComponent.d.ts +18 -0
- package/Controls/Components/Media/Timeline/TimelineComponent.d.ts.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineComponent.js +26 -0
- package/Controls/Components/Media/Timeline/TimelineComponent.js.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineContentComponent.d.ts +18 -0
- package/Controls/Components/Media/Timeline/TimelineContentComponent.d.ts.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineContentComponent.js +26 -0
- package/Controls/Components/Media/Timeline/TimelineContentComponent.js.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineItemComponent.d.ts +18 -0
- package/Controls/Components/Media/Timeline/TimelineItemComponent.d.ts.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineItemComponent.js +26 -0
- package/Controls/Components/Media/Timeline/TimelineItemComponent.js.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineMarkerComponent.d.ts +18 -0
- package/Controls/Components/Media/Timeline/TimelineMarkerComponent.d.ts.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineMarkerComponent.js +26 -0
- package/Controls/Components/Media/Timeline/TimelineMarkerComponent.js.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineOppositeComponent.d.ts +18 -0
- package/Controls/Components/Media/Timeline/TimelineOppositeComponent.d.ts.map +1 -0
- package/Controls/Components/Media/Timeline/TimelineOppositeComponent.js +26 -0
- package/Controls/Components/Media/Timeline/TimelineOppositeComponent.js.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerFooterComponent.d.ts +18 -0
- package/Controls/Components/Overlays/Drawer/DrawerFooterComponent.d.ts.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerFooterComponent.js +26 -0
- package/Controls/Components/Overlays/Drawer/DrawerFooterComponent.js.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderComponent.d.ts +18 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderComponent.d.ts.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderComponent.js +26 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderComponent.js.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderSubTextComponent.d.ts +18 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderSubTextComponent.d.ts.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderSubTextComponent.js +26 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderSubTextComponent.js.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderTextComponent.d.ts +18 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderTextComponent.d.ts.map +1 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderTextComponent.js +26 -0
- package/Controls/Components/Overlays/Drawer/DrawerHeaderTextComponent.js.map +1 -0
- package/Controls/Components/Overlays/Sheet/SheetComponent.d.ts +20 -0
- package/Controls/Components/Overlays/Sheet/SheetComponent.d.ts.map +1 -0
- package/Controls/Components/Overlays/Sheet/SheetComponent.js +28 -0
- package/Controls/Components/Overlays/Sheet/SheetComponent.js.map +1 -0
- package/Controls/Components/Selectors/Stepper/StepperComponent.d.ts +21 -0
- package/Controls/Components/Selectors/Stepper/StepperComponent.d.ts.map +1 -0
- package/Controls/Components/Selectors/Stepper/StepperComponent.js +29 -0
- package/Controls/Components/Selectors/Stepper/StepperComponent.js.map +1 -0
- package/Controls/Components/Selectors/Stepper/StepperItemComponent.d.ts +20 -0
- package/Controls/Components/Selectors/Stepper/StepperItemComponent.d.ts.map +1 -0
- package/Controls/Components/Selectors/Stepper/StepperItemComponent.js +28 -0
- package/Controls/Components/Selectors/Stepper/StepperItemComponent.js.map +1 -0
- package/Index.d.ts +14 -1
- package/Index.d.ts.map +1 -1
- package/Index.js +14 -1
- package/Index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMessageBox.d.ts","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/MessageBox/useMessageBox.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAO,MAAM,wCAAwC,CAAC;AAIhI;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IAEjC;;;;;OAKG;IACH,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEvE;;;;;OAKG;IACH,KAAK,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAE9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,aAAa,IAAI,oBAAoB,CAqBpD"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
// #region Imports
|
|
2
|
+
import { useCallback, useMemo } from 'react';
|
|
3
|
+
import { MessageBoxService, EID } from '@breadstone/mosaik-elements-foundation';
|
|
4
|
+
/**
|
|
5
|
+
* React hook for managing message boxes using the foundation MessageBoxService singleton.
|
|
6
|
+
*
|
|
7
|
+
* @remarks
|
|
8
|
+
* This hook provides a React-idiomatic interface to the foundation MessageBoxService.
|
|
9
|
+
* The service should be configured at application startup using `MessageBoxService.configure()`.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* // In your app setup
|
|
14
|
+
* MessageBoxService.configure({
|
|
15
|
+
* closeOnNavigation: true,
|
|
16
|
+
* behaviors: []
|
|
17
|
+
* });
|
|
18
|
+
*
|
|
19
|
+
* // In your component
|
|
20
|
+
* function MyComponent() {
|
|
21
|
+
* const messageBox = useMessageBox();
|
|
22
|
+
*
|
|
23
|
+
* const handleConfirm = async () => {
|
|
24
|
+
* const result = await messageBox.open({
|
|
25
|
+
* header: 'Confirm Delete',
|
|
26
|
+
* content: 'Are you sure you want to delete this item?',
|
|
27
|
+
* buttons: MessageBoxButtons.YesNo
|
|
28
|
+
* });
|
|
29
|
+
*
|
|
30
|
+
* if (result === MessageBoxResult.Yes) {
|
|
31
|
+
* // User confirmed
|
|
32
|
+
* }
|
|
33
|
+
* };
|
|
34
|
+
*
|
|
35
|
+
* return <button onClick={handleConfirm}>Delete Item</button>;
|
|
36
|
+
* }
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @public
|
|
40
|
+
* @returns An object containing message box management functions.
|
|
41
|
+
*/
|
|
42
|
+
export function useMessageBox() {
|
|
43
|
+
// #region Methods
|
|
44
|
+
const open = useCallback((options) => {
|
|
45
|
+
const messageBoxId = EID.next('MessageBox');
|
|
46
|
+
return MessageBoxService.instance.open(messageBoxId, options);
|
|
47
|
+
}, []);
|
|
48
|
+
const close = useCallback((messageBoxId) => MessageBoxService.instance.close(messageBoxId), []);
|
|
49
|
+
// #endregion
|
|
50
|
+
// #region Properties
|
|
51
|
+
return useMemo(() => ({
|
|
52
|
+
open,
|
|
53
|
+
close
|
|
54
|
+
}), [open, close]);
|
|
55
|
+
// #endregion
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=useMessageBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMessageBox.js","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/MessageBox/useMessageBox.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAkD,GAAG,EAAE,MAAM,wCAAwC,CAAC;AA6BhI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,aAAa;IACzB,kBAAkB;IAElB,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,OAAqC,EAA6B,EAAE;QAC1F,MAAM,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAE5C,OAAO,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,YAAoB,EAAiB,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IAEvH,aAAa;IAEb,qBAAqB;IAErB,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAClB,IAAI;QACJ,KAAK;KACR,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,aAAa;AACjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Index.d.ts","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Sheet/Index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Index.js","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Sheet/Index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,QAAQ,EAAwB,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,eAAe,EAA4B,MAAM,gBAAgB,CAAC;AAE1F,aAAa"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type IUseSheetReturn } from './useSheet';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the SheetProvider component.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export interface ISheetProviderProps {
|
|
9
|
+
/**
|
|
10
|
+
* Child components that will have access to the sheet context.
|
|
11
|
+
*/
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Provider component that makes sheet functionality available to all child components.
|
|
16
|
+
*
|
|
17
|
+
* @remarks
|
|
18
|
+
* Place this provider at the root of your application or at a level where all
|
|
19
|
+
* components that need sheet access are descendants.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // In your app root
|
|
24
|
+
* function App() {
|
|
25
|
+
* return (
|
|
26
|
+
* <SheetProvider>
|
|
27
|
+
* <YourAppContent />
|
|
28
|
+
* </SheetProvider>
|
|
29
|
+
* );
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @public
|
|
34
|
+
* @param props - The provider props.
|
|
35
|
+
* @returns The provider component wrapping children.
|
|
36
|
+
*/
|
|
37
|
+
export declare function SheetProvider({ children }: ISheetProviderProps): ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Hook to access the sheet context.
|
|
40
|
+
*
|
|
41
|
+
* @remarks
|
|
42
|
+
* This hook must be used within a SheetProvider. If you don't need the provider pattern,
|
|
43
|
+
* use `useSheet` directly instead.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* function MyComponent() {
|
|
48
|
+
* const sheet = useSheetContext();
|
|
49
|
+
*
|
|
50
|
+
* return (
|
|
51
|
+
* <button onClick={() => sheet.open('mySheet', MyWrapper)}>
|
|
52
|
+
* Open
|
|
53
|
+
* </button>
|
|
54
|
+
* );
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @public
|
|
59
|
+
* @returns The sheet context value.
|
|
60
|
+
* @throws Error if used outside of a SheetProvider.
|
|
61
|
+
*/
|
|
62
|
+
export declare function useSheetContext(): IUseSheetReturn;
|
|
63
|
+
//# sourceMappingURL=SheetContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SheetContext.d.ts","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Sheet/SheetContext.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,YAAY,CAAC;AAW5D;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CAEvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAQ1E;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,IAAI,eAAe,CAQjD"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
// #region Imports
|
|
2
|
+
import React, { createContext, useContext } from 'react';
|
|
3
|
+
import { useSheet } from './useSheet';
|
|
4
|
+
// #endregion
|
|
5
|
+
/**
|
|
6
|
+
* Context for providing sheet functionality throughout the React component tree.
|
|
7
|
+
*
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
const SheetContext = createContext(null);
|
|
11
|
+
/**
|
|
12
|
+
* Provider component that makes sheet functionality available to all child components.
|
|
13
|
+
*
|
|
14
|
+
* @remarks
|
|
15
|
+
* Place this provider at the root of your application or at a level where all
|
|
16
|
+
* components that need sheet access are descendants.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* // In your app root
|
|
21
|
+
* function App() {
|
|
22
|
+
* return (
|
|
23
|
+
* <SheetProvider>
|
|
24
|
+
* <YourAppContent />
|
|
25
|
+
* </SheetProvider>
|
|
26
|
+
* );
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
* @param props - The provider props.
|
|
32
|
+
* @returns The provider component wrapping children.
|
|
33
|
+
*/
|
|
34
|
+
export function SheetProvider({ children }) {
|
|
35
|
+
const sheet = useSheet();
|
|
36
|
+
return (React.createElement(SheetContext.Provider, { value: sheet }, children));
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Hook to access the sheet context.
|
|
40
|
+
*
|
|
41
|
+
* @remarks
|
|
42
|
+
* This hook must be used within a SheetProvider. If you don't need the provider pattern,
|
|
43
|
+
* use `useSheet` directly instead.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* function MyComponent() {
|
|
48
|
+
* const sheet = useSheetContext();
|
|
49
|
+
*
|
|
50
|
+
* return (
|
|
51
|
+
* <button onClick={() => sheet.open('mySheet', MyWrapper)}>
|
|
52
|
+
* Open
|
|
53
|
+
* </button>
|
|
54
|
+
* );
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @public
|
|
59
|
+
* @returns The sheet context value.
|
|
60
|
+
* @throws Error if used outside of a SheetProvider.
|
|
61
|
+
*/
|
|
62
|
+
export function useSheetContext() {
|
|
63
|
+
const context = useContext(SheetContext);
|
|
64
|
+
if (!context) {
|
|
65
|
+
throw new Error('useSheetContext must be used within a SheetProvider');
|
|
66
|
+
}
|
|
67
|
+
return context;
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=SheetContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SheetContext.js","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Sheet/SheetContext.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACzE,OAAO,EAAwB,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE5D,aAAa;AAEb;;;;GAIG;AACH,MAAM,YAAY,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAC;AAgBjE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAuB;IAC3D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC9B,QAAQ,CACW,CAC3B,CAAC;AACN,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { type ISheetOptions } from '@breadstone/mosaik-elements-foundation';
|
|
2
|
+
/**
|
|
3
|
+
* Represents the return type of the `useSheet` hook.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export interface IUseSheetReturn {
|
|
8
|
+
/**
|
|
9
|
+
* Opens a sheet with the specified wrapper component.
|
|
10
|
+
*
|
|
11
|
+
* @template T - Type of the wrapper component extending HTMLElement.
|
|
12
|
+
* @template TData - Type of data provided to the wrapper component.
|
|
13
|
+
* @template TResult - Expected return type of the resolved sheet result.
|
|
14
|
+
* @param sheetId - Unique identifier for the sheet.
|
|
15
|
+
* @param wrapperClass - Constructor for the wrapper component.
|
|
16
|
+
* @param options - Optional sheet configuration.
|
|
17
|
+
* @param data - Optional data to pass to the wrapper.
|
|
18
|
+
* @returns Promise resolving to the sheet result.
|
|
19
|
+
*/
|
|
20
|
+
open<T extends HTMLElement, TData, TResult>(sheetId: string, wrapperClass: new (args?: TData) => T, options?: ISheetOptions, data?: TData): Promise<TResult>;
|
|
21
|
+
/**
|
|
22
|
+
* Closes a sheet by its identifier.
|
|
23
|
+
*
|
|
24
|
+
* @template TResult - Type of the result to return.
|
|
25
|
+
* @param sheetId - The identifier of the sheet to close.
|
|
26
|
+
* @param result - Optional result to pass to the sheet opener.
|
|
27
|
+
* @returns Promise that resolves when the sheet is closed.
|
|
28
|
+
*/
|
|
29
|
+
close<TResult>(sheetId: string, result?: TResult): Promise<void>;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* React hook for managing sheets using the foundation SheetService singleton.
|
|
33
|
+
*
|
|
34
|
+
* @remarks
|
|
35
|
+
* This hook provides a React-idiomatic interface to the foundation SheetService.
|
|
36
|
+
* The service should be configured at application startup using `SheetService.configure()`.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* // In your app setup
|
|
41
|
+
* SheetService.configure({
|
|
42
|
+
* closeOnNavigation: true,
|
|
43
|
+
* behaviors: []
|
|
44
|
+
* });
|
|
45
|
+
*
|
|
46
|
+
* // In your component
|
|
47
|
+
* function MyComponent() {
|
|
48
|
+
* const sheet = useSheet();
|
|
49
|
+
*
|
|
50
|
+
* const handleOpen = async () => {
|
|
51
|
+
* const result = await sheet.open('mySheet', MySheetWrapper, {
|
|
52
|
+
* header: 'Select Option'
|
|
53
|
+
* });
|
|
54
|
+
* console.log('Sheet result:', result);
|
|
55
|
+
* };
|
|
56
|
+
*
|
|
57
|
+
* return <button onClick={handleOpen}>Open Sheet</button>;
|
|
58
|
+
* }
|
|
59
|
+
* ```
|
|
60
|
+
*
|
|
61
|
+
* @public
|
|
62
|
+
* @returns An object containing sheet management functions.
|
|
63
|
+
*/
|
|
64
|
+
export declare function useSheet(): IUseSheetReturn;
|
|
65
|
+
//# sourceMappingURL=useSheet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSheet.d.ts","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Sheet/useSheet.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAI1F;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAE5B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,OAAO,EACtC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,KAAK,CAAC,EACrC,OAAO,CAAC,EAAE,aAAa,EACvB,IAAI,CAAC,EAAE,KAAK,GACb,OAAO,CAAC,OAAO,CAAC,CAAC;IAEpB;;;;;;;OAOG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAEpE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,QAAQ,IAAI,eAAe,CAsB1C"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
// #region Imports
|
|
2
|
+
import { useCallback, useMemo } from 'react';
|
|
3
|
+
import { SheetService } from '@breadstone/mosaik-elements-foundation';
|
|
4
|
+
/**
|
|
5
|
+
* React hook for managing sheets using the foundation SheetService singleton.
|
|
6
|
+
*
|
|
7
|
+
* @remarks
|
|
8
|
+
* This hook provides a React-idiomatic interface to the foundation SheetService.
|
|
9
|
+
* The service should be configured at application startup using `SheetService.configure()`.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* // In your app setup
|
|
14
|
+
* SheetService.configure({
|
|
15
|
+
* closeOnNavigation: true,
|
|
16
|
+
* behaviors: []
|
|
17
|
+
* });
|
|
18
|
+
*
|
|
19
|
+
* // In your component
|
|
20
|
+
* function MyComponent() {
|
|
21
|
+
* const sheet = useSheet();
|
|
22
|
+
*
|
|
23
|
+
* const handleOpen = async () => {
|
|
24
|
+
* const result = await sheet.open('mySheet', MySheetWrapper, {
|
|
25
|
+
* header: 'Select Option'
|
|
26
|
+
* });
|
|
27
|
+
* console.log('Sheet result:', result);
|
|
28
|
+
* };
|
|
29
|
+
*
|
|
30
|
+
* return <button onClick={handleOpen}>Open Sheet</button>;
|
|
31
|
+
* }
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @public
|
|
35
|
+
* @returns An object containing sheet management functions.
|
|
36
|
+
*/
|
|
37
|
+
export function useSheet() {
|
|
38
|
+
// #region Methods
|
|
39
|
+
const open = useCallback((sheetId, wrapperClass, options, data) => SheetService.instance.open(sheetId, wrapperClass, options, data), []);
|
|
40
|
+
const close = useCallback((sheetId, result) => SheetService.instance.close(sheetId, result), []);
|
|
41
|
+
// #endregion
|
|
42
|
+
// #region Properties
|
|
43
|
+
return useMemo(() => ({
|
|
44
|
+
open,
|
|
45
|
+
close
|
|
46
|
+
}), [open, close]);
|
|
47
|
+
// #endregion
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=useSheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSheet.js","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Sheet/useSheet.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAsB,MAAM,wCAAwC,CAAC;AA0C1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,QAAQ;IACpB,kBAAkB;IAElB,MAAM,IAAI,GAAG,WAAW,CAAC,CACrB,OAAe,EACf,YAAqC,EACrC,OAAuB,EACvB,IAAY,EACI,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAoB,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEhH,MAAM,KAAK,GAAG,WAAW,CAAC,CAAU,OAAe,EAAE,MAAgB,EAAiB,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC;IAE3I,aAAa;IAEb,qBAAqB;IAErB,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAClB,IAAI;QACJ,KAAK;KACR,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,aAAa;AACjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Index.d.ts","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Toast/Index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Index.js","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Toast/Index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,QAAQ,EAAwB,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,eAAe,EAA4B,MAAM,gBAAgB,CAAC;AAE1F,aAAa"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type IUseToastReturn } from './useToast';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the ToastProvider component.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export interface IToastProviderProps {
|
|
9
|
+
/**
|
|
10
|
+
* Child components that will have access to the toast context.
|
|
11
|
+
*/
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Provider component that makes toast functionality available to all child components.
|
|
16
|
+
*
|
|
17
|
+
* @remarks
|
|
18
|
+
* Place this provider at the root of your application or at a level where all
|
|
19
|
+
* components that need toast access are descendants.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // In your app root
|
|
24
|
+
* function App() {
|
|
25
|
+
* return (
|
|
26
|
+
* <ToastProvider>
|
|
27
|
+
* <YourAppContent />
|
|
28
|
+
* </ToastProvider>
|
|
29
|
+
* );
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @public
|
|
34
|
+
* @param props - The provider props.
|
|
35
|
+
* @returns The provider component wrapping children.
|
|
36
|
+
*/
|
|
37
|
+
export declare function ToastProvider({ children }: IToastProviderProps): ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Hook to access the toast context.
|
|
40
|
+
*
|
|
41
|
+
* @remarks
|
|
42
|
+
* This hook must be used within a ToastProvider. If you don't need the provider pattern,
|
|
43
|
+
* use `useToast` directly instead.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* function MyComponent() {
|
|
48
|
+
* const toast = useToastContext();
|
|
49
|
+
*
|
|
50
|
+
* return (
|
|
51
|
+
* <button onClick={() => toast.open({ header: 'Hello!' })}>
|
|
52
|
+
* Show Toast
|
|
53
|
+
* </button>
|
|
54
|
+
* );
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @public
|
|
59
|
+
* @returns The toast context value.
|
|
60
|
+
* @throws Error if used outside of a ToastProvider.
|
|
61
|
+
*/
|
|
62
|
+
export declare function useToastContext(): IUseToastReturn;
|
|
63
|
+
//# sourceMappingURL=ToastContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Toast/ToastContext.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,YAAY,CAAC;AAW5D;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CAEvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAQ1E;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,IAAI,eAAe,CAQjD"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
// #region Imports
|
|
2
|
+
import React, { createContext, useContext } from 'react';
|
|
3
|
+
import { useToast } from './useToast';
|
|
4
|
+
// #endregion
|
|
5
|
+
/**
|
|
6
|
+
* Context for providing toast functionality throughout the React component tree.
|
|
7
|
+
*
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
const ToastContext = createContext(null);
|
|
11
|
+
/**
|
|
12
|
+
* Provider component that makes toast functionality available to all child components.
|
|
13
|
+
*
|
|
14
|
+
* @remarks
|
|
15
|
+
* Place this provider at the root of your application or at a level where all
|
|
16
|
+
* components that need toast access are descendants.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* // In your app root
|
|
21
|
+
* function App() {
|
|
22
|
+
* return (
|
|
23
|
+
* <ToastProvider>
|
|
24
|
+
* <YourAppContent />
|
|
25
|
+
* </ToastProvider>
|
|
26
|
+
* );
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
* @param props - The provider props.
|
|
32
|
+
* @returns The provider component wrapping children.
|
|
33
|
+
*/
|
|
34
|
+
export function ToastProvider({ children }) {
|
|
35
|
+
const toast = useToast();
|
|
36
|
+
return (React.createElement(ToastContext.Provider, { value: toast }, children));
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Hook to access the toast context.
|
|
40
|
+
*
|
|
41
|
+
* @remarks
|
|
42
|
+
* This hook must be used within a ToastProvider. If you don't need the provider pattern,
|
|
43
|
+
* use `useToast` directly instead.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* function MyComponent() {
|
|
48
|
+
* const toast = useToastContext();
|
|
49
|
+
*
|
|
50
|
+
* return (
|
|
51
|
+
* <button onClick={() => toast.open({ header: 'Hello!' })}>
|
|
52
|
+
* Show Toast
|
|
53
|
+
* </button>
|
|
54
|
+
* );
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @public
|
|
59
|
+
* @returns The toast context value.
|
|
60
|
+
* @throws Error if used outside of a ToastProvider.
|
|
61
|
+
*/
|
|
62
|
+
export function useToastContext() {
|
|
63
|
+
const context = useContext(ToastContext);
|
|
64
|
+
if (!context) {
|
|
65
|
+
throw new Error('useToastContext must be used within a ToastProvider');
|
|
66
|
+
}
|
|
67
|
+
return context;
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=ToastContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastContext.js","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Toast/ToastContext.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACzE,OAAO,EAAwB,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE5D,aAAa;AAEb;;;;GAIG;AACH,MAAM,YAAY,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAC;AAgBjE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAuB;IAC3D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC9B,QAAQ,CACW,CAC3B,CAAC;AACN,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { type IToastOptions } from '@breadstone/mosaik-elements-foundation';
|
|
2
|
+
/**
|
|
3
|
+
* Represents the return type of the `useToast` hook.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export interface IUseToastReturn {
|
|
8
|
+
/**
|
|
9
|
+
* Opens a toast with the specified options.
|
|
10
|
+
*
|
|
11
|
+
* @template TResult - Expected return type of the resolved toast result.
|
|
12
|
+
* @param options - Toast configuration options.
|
|
13
|
+
* @returns Promise resolving to the toast result.
|
|
14
|
+
*/
|
|
15
|
+
open<TResult>(options?: IToastOptions): Promise<TResult>;
|
|
16
|
+
/**
|
|
17
|
+
* Closes a toast by its identifier.
|
|
18
|
+
*
|
|
19
|
+
* @template TResult - Type of the result to return.
|
|
20
|
+
* @param toastId - The identifier of the toast to close.
|
|
21
|
+
* @param result - Optional result to pass to the toast opener.
|
|
22
|
+
* @returns Promise that resolves when the toast is closed.
|
|
23
|
+
*/
|
|
24
|
+
close<TResult>(toastId: string, result?: TResult): Promise<void>;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* React hook for managing toasts using the foundation ToastService singleton.
|
|
28
|
+
*
|
|
29
|
+
* @remarks
|
|
30
|
+
* This hook provides a React-idiomatic interface to the foundation ToastService.
|
|
31
|
+
* The service should be configured at application startup using `ToastService.configure()`.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* // In your app setup
|
|
36
|
+
* ToastService.configure({
|
|
37
|
+
* closeOnNavigation: true,
|
|
38
|
+
* behaviors: []
|
|
39
|
+
* });
|
|
40
|
+
*
|
|
41
|
+
* // In your component
|
|
42
|
+
* function MyComponent() {
|
|
43
|
+
* const toast = useToast();
|
|
44
|
+
*
|
|
45
|
+
* const handleSuccess = async () => {
|
|
46
|
+
* await toast.open({
|
|
47
|
+
* header: 'Success',
|
|
48
|
+
* content: 'Operation completed successfully',
|
|
49
|
+
* variant: 'success',
|
|
50
|
+
* timeout: Toast.Timeout.SHORT
|
|
51
|
+
* });
|
|
52
|
+
* };
|
|
53
|
+
*
|
|
54
|
+
* return <button onClick={handleSuccess}>Show Toast</button>;
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @public
|
|
59
|
+
* @returns An object containing toast management functions.
|
|
60
|
+
*/
|
|
61
|
+
export declare function useToast(): IUseToastReturn;
|
|
62
|
+
//# sourceMappingURL=useToast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Toast/useToast.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAI1F;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAE5B;;;;;;OAMG;IACH,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEzD;;;;;;;OAOG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAEpE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,QAAQ,IAAI,eAAe,CAiB1C"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// #region Imports
|
|
2
|
+
import { useCallback, useMemo } from 'react';
|
|
3
|
+
import { ToastService } from '@breadstone/mosaik-elements-foundation';
|
|
4
|
+
/**
|
|
5
|
+
* React hook for managing toasts using the foundation ToastService singleton.
|
|
6
|
+
*
|
|
7
|
+
* @remarks
|
|
8
|
+
* This hook provides a React-idiomatic interface to the foundation ToastService.
|
|
9
|
+
* The service should be configured at application startup using `ToastService.configure()`.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* // In your app setup
|
|
14
|
+
* ToastService.configure({
|
|
15
|
+
* closeOnNavigation: true,
|
|
16
|
+
* behaviors: []
|
|
17
|
+
* });
|
|
18
|
+
*
|
|
19
|
+
* // In your component
|
|
20
|
+
* function MyComponent() {
|
|
21
|
+
* const toast = useToast();
|
|
22
|
+
*
|
|
23
|
+
* const handleSuccess = async () => {
|
|
24
|
+
* await toast.open({
|
|
25
|
+
* header: 'Success',
|
|
26
|
+
* content: 'Operation completed successfully',
|
|
27
|
+
* variant: 'success',
|
|
28
|
+
* timeout: Toast.Timeout.SHORT
|
|
29
|
+
* });
|
|
30
|
+
* };
|
|
31
|
+
*
|
|
32
|
+
* return <button onClick={handleSuccess}>Show Toast</button>;
|
|
33
|
+
* }
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @public
|
|
37
|
+
* @returns An object containing toast management functions.
|
|
38
|
+
*/
|
|
39
|
+
export function useToast() {
|
|
40
|
+
// #region Methods
|
|
41
|
+
const open = useCallback((options) => ToastService.instance.open(options), []);
|
|
42
|
+
const close = useCallback((toastId, result) => ToastService.instance.close(toastId, result), []);
|
|
43
|
+
// #endregion
|
|
44
|
+
// #region Properties
|
|
45
|
+
return useMemo(() => ({
|
|
46
|
+
open,
|
|
47
|
+
close
|
|
48
|
+
}), [open, close]);
|
|
49
|
+
// #endregion
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=useToast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToast.js","sourceRoot":"","sources":["../../../../src/Cdk/Overlays/Toast/useToast.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAsB,MAAM,wCAAwC,CAAC;AAgC1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,QAAQ;IACpB,kBAAkB;IAElB,MAAM,IAAI,GAAG,WAAW,CAAC,CAAU,OAAuB,EAAoB,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAU,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAEnI,MAAM,KAAK,GAAG,WAAW,CAAC,CAAU,OAAe,EAAE,MAAgB,EAAiB,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC;IAE3I,aAAa;IAEb,qBAAqB;IAErB,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAClB,IAAI;QACJ,KAAK;KACR,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,aAAa;AACjB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { RegionElement } from '@breadstone/mosaik-elements-foundation';
|
|
3
|
+
/**
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare const Region: import("../../../../Utils/Proxy").ReactWebComponent<RegionElement, {
|
|
7
|
+
onActiveChanged: string;
|
|
8
|
+
onConnected: string;
|
|
9
|
+
onDisconnected: string;
|
|
10
|
+
onChanged: string;
|
|
11
|
+
}>;
|
|
12
|
+
declare global {
|
|
13
|
+
namespace JSX {
|
|
14
|
+
interface IntrinsicElements {
|
|
15
|
+
'mosaik-region': React.DetailedHTMLProps<React.HTMLAttributes<RegionElement>, RegionElement> | Partial<RegionElement>;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=RegionComponent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RegionComponent.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionComponent.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAIvE;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;EAWjB,CAAC;AAEH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,GAAG,CAAC;QACV,UAAU,iBAAiB;YACvB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;SACzH;KACJ;CACJ"}
|