@skedulo/sked-ui 0.0.1 → 0.0.2-react-18-preview

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/README.md +107 -0
  2. package/dist/components/IntersectionObserverWrapper/IntersectionObserverWrapper.d.ts +39 -0
  3. package/dist/components/IntersectionObserverWrapper/IntersectionObserverWrapper.stories.d.ts +1 -0
  4. package/dist/components/avatar/Avatar.d.ts +46 -0
  5. package/dist/components/avatar/Avatar.stories.d.ts +1 -0
  6. package/dist/components/avatar/AvatarDetail.d.ts +19 -0
  7. package/dist/components/avatar/AvatarGroup.d.ts +27 -0
  8. package/dist/components/avatar/Slot.d.ts +42 -0
  9. package/dist/components/avatar/__tests__/Avatar.spec.d.ts +1 -0
  10. package/dist/components/avatar/__tests__/AvatarDetail.spec.d.ts +1 -0
  11. package/dist/components/avatar/__tests__/GroupAvatars.spec.d.ts +1 -0
  12. package/dist/components/avatar/__tests__/Slot.spec.d.ts +1 -0
  13. package/dist/components/badge/Badge.d.ts +18 -0
  14. package/dist/components/badge/Badge.stories.d.ts +17 -0
  15. package/dist/components/badge/__tests__/Badge.spec.d.ts +1 -0
  16. package/dist/components/button-group/ButtonGroup.d.ts +6 -0
  17. package/dist/components/button-group/ButtonGroup.stories.d.ts +1 -0
  18. package/dist/components/button-group/__tests__/ButtonGroup.spec.d.ts +1 -0
  19. package/dist/components/buttons/Buttons.stories.d.ts +1 -0
  20. package/dist/components/buttons/button/Button.d.ts +60 -0
  21. package/dist/components/buttons/button/__tests__/Button.spec.d.ts +1 -0
  22. package/dist/components/buttons/button-dropdown/ButtonDropdown.d.ts +14 -0
  23. package/dist/components/buttons/button-dropdown/__tests__/ButtonDropdown.spec.d.ts +1 -0
  24. package/dist/components/buttons/icon-button/IconButton.d.ts +13 -0
  25. package/dist/components/buttons/icon-button/__tests__/IconButton.spec.d.ts +1 -0
  26. package/dist/components/buttons/icon-button-dropdown/IconButtonDropdown.d.ts +5 -0
  27. package/dist/components/buttons/icon-button-dropdown/__tests__/IconButtonDropdown.spec.d.ts +1 -0
  28. package/dist/components/buttons/interfaces.d.ts +10 -0
  29. package/dist/components/calendar-controls/CalendarControls-utils.d.ts +7 -0
  30. package/dist/components/calendar-controls/CalendarControls.d.ts +30 -0
  31. package/dist/components/calendar-controls/CalendarControls.stories.d.ts +1 -0
  32. package/dist/components/calendar-controls/elements/DateSelector.d.ts +47 -0
  33. package/dist/components/calendar-controls/elements/NavigationButtons.d.ts +6 -0
  34. package/dist/components/calendar-controls/elements/RangePicker.d.ts +21 -0
  35. package/dist/components/calendar-controls/elements/TodayButton.d.ts +5 -0
  36. package/dist/components/datepicker/DateTime.d.ts +55 -0
  37. package/dist/components/datepicker/DateTime.stories.d.ts +1 -0
  38. package/dist/components/datepicker/Datepicker.d.ts +125 -0
  39. package/dist/components/datepicker/Datepicker.stories.d.ts +1 -0
  40. package/dist/components/datepicker/Time.d.ts +44 -0
  41. package/dist/components/datepicker/Time.stories.d.ts +1 -0
  42. package/dist/components/datepicker/__tests__/DateTime.spec.d.ts +1 -0
  43. package/dist/components/datepicker/__tests__/Datepicker.spec.d.ts +1 -0
  44. package/dist/components/datepicker/__tests__/Time.spec.d.ts +1 -0
  45. package/dist/components/dynamic-table/DynamicTable-utils.d.ts +45 -0
  46. package/dist/components/dynamic-table/DynamicTable.d.ts +79 -0
  47. package/dist/components/dynamic-table/DynamicTable.stories.d.ts +1 -0
  48. package/dist/components/dynamic-table/__tests__/DynamicTable-renders.spec.d.ts +1 -0
  49. package/dist/components/dynamic-table/__tests__/DynamicTable-test-utils.d.ts +3 -0
  50. package/dist/components/dynamic-table/__tests__/DynamicTable-utils.spec.d.ts +1 -0
  51. package/dist/components/dynamic-table/__tests__/DynamicTable.spec.d.ts +1 -0
  52. package/dist/components/dynamic-table/__tests__/__mocks__/table-data.d.ts +16 -0
  53. package/dist/components/dynamic-table/interfaces.d.ts +52 -0
  54. package/dist/components/emptystate/EmptyState.d.ts +9 -0
  55. package/dist/components/emptystate/EmptyState.spec.d.ts +1 -0
  56. package/dist/components/emptystate/EmptyState.stories.d.ts +1 -0
  57. package/dist/components/filter-bar/FilterBar.d.ts +54 -0
  58. package/dist/components/filter-bar/FilterBar.stories.d.ts +1 -0
  59. package/dist/components/filter-bar/__tests__/FilterBar.spec.d.ts +1 -0
  60. package/dist/components/filter-bar/filter-list/FilterList.d.ts +10 -0
  61. package/dist/components/filter-bar/filter-list/FilterListWithApply.d.ts +24 -0
  62. package/dist/components/filter-bar/filter-list/FilterSearch.d.ts +21 -0
  63. package/dist/components/filter-bar/filter-list/RemoteSearch.d.ts +25 -0
  64. package/dist/components/filter-bar/filter-list/__tests__/FilterList.spec.d.ts +1 -0
  65. package/dist/components/filter-bar/filter-list/__tests__/FilterListWithApply.spec.d.ts +1 -0
  66. package/dist/components/filter-bar/filter-list/__tests__/FilterSearch.spec.d.ts +1 -0
  67. package/dist/components/filter-bar/filter-list/__tests__/RemoteSearch.spec.d.ts +1 -0
  68. package/dist/components/filter-bar/filter-pill/FilterPill.d.ts +23 -0
  69. package/dist/components/filter-bar/filter-pill/__tests__/FilterPill.spec.d.ts +1 -0
  70. package/dist/components/filter-bar/interfaces.d.ts +43 -0
  71. package/dist/components/forms/Forms.stories.d.ts +1 -0
  72. package/dist/components/forms/ReadOnly.d.ts +11 -0
  73. package/dist/components/forms/SkedFormValidation.d.ts +98 -0
  74. package/dist/components/forms/SkedFormValidation.spec.d.ts +1 -0
  75. package/dist/components/forms/__tests__/ReadOnly.spec.d.ts +1 -0
  76. package/dist/components/forms/elements/AsyncMultiSearchSelect.d.ts +3 -0
  77. package/dist/components/forms/elements/AsyncSearchSelect.d.ts +6 -0
  78. package/dist/components/forms/elements/AsyncSelectSearch.stories.d.ts +1 -0
  79. package/dist/components/forms/elements/FormElements.d.ts +54 -0
  80. package/dist/components/forms/elements/MultiSearchSelect.d.ts +3 -0
  81. package/dist/components/forms/elements/MultiSearchSelect.stories.d.ts +1 -0
  82. package/dist/components/forms/elements/NumberInput.d.ts +17 -0
  83. package/dist/components/forms/elements/PlainAsyncMultiSearchSelect.d.ts +8 -0
  84. package/dist/components/forms/elements/PlainAsyncMultiSearchSelect.stories.d.ts +1 -0
  85. package/dist/components/forms/elements/PlainMultiSearchSelect.d.ts +24 -0
  86. package/dist/components/forms/elements/PlainMultiSearchSelect.stories.d.ts +1 -0
  87. package/dist/components/forms/elements/SearchSelect.d.ts +6 -0
  88. package/dist/components/forms/elements/SearchSelect.stories.d.ts +1 -0
  89. package/dist/components/forms/elements/TextArea.d.ts +25 -0
  90. package/dist/components/forms/elements/TextArea.spec.d.ts +1 -0
  91. package/dist/components/forms/elements/__tests__/AsyncMultiSearchSelect.spec.d.ts +1 -0
  92. package/dist/components/forms/elements/__tests__/AsyncSearchSelect.spec.d.ts +1 -0
  93. package/dist/components/forms/elements/__tests__/FormElements.spec.d.ts +1 -0
  94. package/dist/components/forms/elements/__tests__/MultiSearchSelect.spec.d.ts +1 -0
  95. package/dist/components/forms/elements/__tests__/NumberInput.spec.d.ts +1 -0
  96. package/dist/components/forms/elements/__tests__/PlainAsyncMultiSearchSelect.spec.d.ts +1 -0
  97. package/dist/components/forms/elements/__tests__/PlainMultiSearchSelect.spec.d.ts +1 -0
  98. package/dist/components/forms/elements/__tests__/SearchSelect-renders.spec.d.ts +1 -0
  99. package/dist/components/forms/elements/__tests__/SearchSelect.spec.d.ts +1 -0
  100. package/dist/components/forms/elements/__tests__/__mocks__/searchData.d.ts +11 -0
  101. package/dist/components/forms/elements/interfaces.d.ts +108 -0
  102. package/dist/components/forms/elements/select-components.d.ts +38 -0
  103. package/dist/components/forms/elements/select-hooks.d.ts +38 -0
  104. package/dist/components/forms/elements/select-utils.d.ts +22 -0
  105. package/dist/components/icon/Icon.d.ts +26 -0
  106. package/dist/components/icon/Icon.spec.d.ts +1 -0
  107. package/dist/components/icon/Icon.stories.d.ts +1 -0
  108. package/dist/components/icon/iconPaths.d.ts +131 -0
  109. package/dist/components/info-card/InfoCard.d.ts +5 -0
  110. package/dist/components/info-card/InfoCard.stories.d.ts +1 -0
  111. package/dist/components/info-card/InfoCardBody.d.ts +13 -0
  112. package/dist/components/info-card/InfoCardFooter.d.ts +2 -0
  113. package/dist/components/info-card/InfoCardHeader.d.ts +11 -0
  114. package/dist/components/info-card/index.d.ts +4 -0
  115. package/dist/components/inline-banner/InlineBanner.d.ts +9 -0
  116. package/dist/components/inline-banner/InlineBanner.spec.d.ts +1 -0
  117. package/dist/components/inline-banner/InlineBanner.stories.d.ts +1 -0
  118. package/dist/components/link/Link.d.ts +5 -0
  119. package/dist/components/link/Link.spec.d.ts +1 -0
  120. package/dist/components/link/Link.stories.d.ts +17 -0
  121. package/dist/components/loader/Loading.d.ts +16 -9
  122. package/dist/components/loader/Loading.stories.d.ts +1 -0
  123. package/dist/components/loader/__tests__/Loading.spec.d.ts +1 -0
  124. package/dist/components/loader/spinner/LoadingSpinner.d.ts +21 -0
  125. package/dist/components/lozenge/CustomLozenge.d.ts +21 -0
  126. package/dist/components/lozenge/Lozenge.d.ts +22 -0
  127. package/dist/components/lozenge/Lozenge.stories.d.ts +1 -0
  128. package/dist/components/lozenge/__tests__/Lozenge.spec.d.ts +1 -0
  129. package/dist/components/menus/Menus.stories.d.ts +1 -0
  130. package/dist/components/menus/actionmenu/ActionMenu.d.ts +13 -0
  131. package/dist/components/menus/cardactionmenu/CardActionMenu.d.ts +10 -0
  132. package/dist/components/menus/index.d.ts +2 -0
  133. package/dist/components/menus/menu/Menu.d.ts +18 -0
  134. package/dist/components/modals/Modal.spec.d.ts +1 -0
  135. package/dist/components/modals/Modal.stories.d.ts +1 -0
  136. package/dist/components/modals/Modals.d.ts +35 -0
  137. package/dist/components/pagination/Pagination-utils.d.ts +1 -0
  138. package/dist/components/pagination/Pagination-utils.spec.d.ts +1 -0
  139. package/dist/components/pagination/Pagination.d.ts +3 -0
  140. package/dist/components/pagination/Pagination.spec.d.ts +1 -0
  141. package/dist/components/pagination/Pagination.stories.d.ts +1 -0
  142. package/dist/components/pagination/PaginationCount/PaginationCount.d.ts +3 -0
  143. package/dist/components/pagination/PaginationCount/PaginationCount.spec.d.ts +1 -0
  144. package/dist/components/pagination/PaginationPages/PaginationPages.d.ts +14 -0
  145. package/dist/components/pagination/PaginationPages/PaginationPages.spec.d.ts +1 -0
  146. package/dist/components/pagination/interfaces.d.ts +18 -0
  147. package/dist/components/pill/Pill.d.ts +25 -0
  148. package/dist/components/pill/Pill.spec.d.ts +1 -0
  149. package/dist/components/pill/Pill.stories.d.ts +1 -0
  150. package/dist/components/popout/PopOut.d.ts +61 -0
  151. package/dist/components/popout/PopOut.stories.d.ts +1 -0
  152. package/dist/components/popout/PopOutBase.d.ts +39 -0
  153. package/dist/components/popout/usePopOut.d.ts +9 -0
  154. package/dist/components/popups/info-window/InfoWindow.d.ts +45 -0
  155. package/dist/components/popups/info-window/InfoWindow.stories.d.ts +1 -0
  156. package/dist/components/popups/info-window/LegacyInfoWindow.d.ts +161 -0
  157. package/dist/components/popups/info-window/info-window-utils.d.ts +43 -0
  158. package/dist/components/popups/info-window/info-window-utils.spec.d.ts +1 -0
  159. package/dist/components/popups/info-window/useInfoWindowModifiers.d.ts +2 -0
  160. package/dist/components/popups/overflow-tooltip/OverflowTooltip.d.ts +31 -0
  161. package/dist/components/popups/tooltip/Tooltip.d.ts +21 -0
  162. package/dist/components/popups/tooltip/Tooltip.spec.d.ts +1 -0
  163. package/dist/components/popups/tooltip/Tooltip.stories.d.ts +1 -0
  164. package/dist/components/portal/Portal.d.ts +22 -0
  165. package/dist/components/search-box/SearchBox.d.ts +9 -0
  166. package/dist/components/search-box/SearchBox.spec.d.ts +1 -0
  167. package/dist/components/status-icon/StatusIcon.d.ts +11 -0
  168. package/dist/components/status-icon/StatusIcon.spec.d.ts +1 -0
  169. package/dist/components/status-icon/StatusIcon.stories.d.ts +1 -0
  170. package/dist/components/table/Table.d.ts +16 -0
  171. package/dist/components/table/Table.spec.d.ts +1 -0
  172. package/dist/components/table/Table.stories.d.ts +1 -0
  173. package/dist/components/tabs/Tabs/Tabs.d.ts +36 -0
  174. package/dist/components/tabs/Tabs/TabsMenuItem.d.ts +22 -0
  175. package/dist/components/tabs/Tabs/TabsRoutingUtils.d.ts +28 -0
  176. package/dist/components/tabs/Tabs/__tests__/Tabs.spec.d.ts +1 -0
  177. package/dist/components/tabs/Tabs/__tests__/TabsMenuItem.spec.d.ts +1 -0
  178. package/dist/components/tabs/Tabs/__tests__/TabsRoutingUtils.spec.d.ts +1 -0
  179. package/dist/components/tabs/Tabs/interfaces.d.ts +65 -0
  180. package/dist/components/tabs/Tabs.stories.d.ts +1 -0
  181. package/dist/components/text/MultilineContent.d.ts +6 -0
  182. package/dist/components/text/MultilineContent.spec.d.ts +1 -0
  183. package/dist/hooks/useDebounce.d.ts +1 -0
  184. package/dist/index.d.ts +59 -2
  185. package/dist/index.js +65743 -1
  186. package/dist/utils/Option.d.ts +58 -0
  187. package/dist/utils/Option.spec.d.ts +1 -0
  188. package/dist/utils/Route.d.ts +4 -0
  189. package/dist/utils/Strings.d.ts +1 -0
  190. package/dist/utils/Types.d.ts +6 -0
  191. package/dist/utils/__tests__/Route.spec.d.ts +1 -0
  192. package/dist/utils/testing-utils.d.ts +7 -0
  193. package/package.json +164 -22
  194. package/yarn.lock +17541 -1196
  195. package/dist/components/test/Test.d.ts +0 -9
  196. package/dist/components/test/test.d.ts +0 -9
  197. package/tsconfig.json +0 -22
@@ -0,0 +1,45 @@
1
+ import * as React from 'react';
2
+ import { IPopOutProps } from '../../popout/PopOut';
3
+ import { ICursorOptions } from './info-window-utils';
4
+ export interface IRequiredProps {
5
+ /**
6
+ * Content to be shown inside the info window
7
+ */
8
+ content: JSX.Element | JSX.Element[] | React.ReactNode | string;
9
+ /**
10
+ * Preferred direction around the trigger to open the info window
11
+ */
12
+ position: IPopOutProps['placement'];
13
+ }
14
+ export type IPopOutPropsSubset = IRequiredProps & Omit<IPopOutProps, 'children' | 'trigger' | 'showArrow'>;
15
+ export type IInfoWindowEvent = 'click' | 'mount';
16
+ export type IInfoWindowProps = IPopOutPropsSubset & {
17
+ children: React.ReactNode;
18
+ /**
19
+ * Event type used to trigger the info window, 'hover' is now deprecated
20
+ */
21
+ event?: IInfoWindowEvent;
22
+ /**
23
+ * Deprecated: Cursor options control what happens to the info window while moving the mouse within the trigger
24
+ */
25
+ cursorOption?: ICursorOptions;
26
+ /**
27
+ * ClassName to be given to the wrapper around the info window content
28
+ */
29
+ containerClassName?: string;
30
+ /**
31
+ * Data attributes to be applied to the wrapper around the trigger component
32
+ */
33
+ dataAttributes?: {
34
+ [key: string]: string;
35
+ };
36
+ /**
37
+ * Render a close button within the wrapper around the info window content
38
+ */
39
+ withCloseButton?: boolean;
40
+ /**
41
+ * Styles to apply to the wrapper around the trigger component
42
+ */
43
+ style?: React.CSSProperties;
44
+ };
45
+ export declare const InfoWindow: (props: IInfoWindowProps) => React.JSX.Element;
@@ -0,0 +1,161 @@
1
+ import * as React from 'react';
2
+ import { IAnchorScores, ICursorOptions, ICursorPoints, Position } from './info-window-utils';
3
+ type ILegacyInfoWindowEvent = 'click' | 'hover' | 'mount';
4
+ interface IInfoWindowStyles<T> {
5
+ triangleStyles: {
6
+ top: T;
7
+ left: T;
8
+ };
9
+ contentStyles: {
10
+ top: T;
11
+ left: T;
12
+ };
13
+ }
14
+ export interface ILegacyInfoWindowRequiredProps {
15
+ /**
16
+ * Content to be shown inside the info window
17
+ */
18
+ content: JSX.Element | JSX.Element[] | React.ReactNode | string;
19
+ /**
20
+ * Preferred direction around the trigger to open the info window
21
+ */
22
+ position: Position;
23
+ }
24
+ export type ILegacyInfoWindowProps = ILegacyInfoWindowRequiredProps & {
25
+ children?: React.ReactNode;
26
+ /**
27
+ * ILegacyInfoWindowEvent type used to trigger the info window
28
+ */
29
+ event?: ILegacyInfoWindowEvent;
30
+ /**
31
+ * Cursor options control what happens to the info window while moving the mouse within the trigger
32
+ */
33
+ cursorOption?: ICursorOptions;
34
+ /**
35
+ * Delay render of the info window after the trigger event has been fired
36
+ */
37
+ delayShow?: number;
38
+ /**
39
+ * Prevent the display of the pop out regardless of the trigger event
40
+ */
41
+ preventShow?: boolean;
42
+ /**
43
+ * ClassName to be given to the wrapper around the info window content
44
+ */
45
+ containerClassName?: string;
46
+ /**
47
+ * ClassName to be given to the wrapper around the trigger component
48
+ */
49
+ className?: string;
50
+ /**
51
+ * Data attributes to be applied to the wrapper around the trigger component
52
+ */
53
+ dataAttributes?: {
54
+ [key: string]: string;
55
+ };
56
+ /**
57
+ * Apply 'display: inline-block' style to the wrapper around the trigger component
58
+ */
59
+ displayInline?: boolean;
60
+ /**
61
+ * Render a close button within the wrapper around the info window content
62
+ */
63
+ withCloseButton?: boolean;
64
+ /**
65
+ * Offset the trigger points used to calculate the render positions by this number of pixels
66
+ */
67
+ positionOffset?: number;
68
+ /**
69
+ * Will be called when the mouse over event is fired on the trigger component
70
+ */
71
+ onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
72
+ /**
73
+ * Will be called when the mouse leave event is fired on the trigger component
74
+ */
75
+ onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
76
+ /**
77
+ * Will be called when the info window is closed (regardless of the trigger event)
78
+ */
79
+ onClose?: () => void;
80
+ /**
81
+ * Styles to apply to the wrapper around the trigger component
82
+ */
83
+ style?: React.CSSProperties;
84
+ };
85
+ interface IState {
86
+ show: boolean;
87
+ }
88
+ /**
89
+ * The LegacyInfoWindow module allows us to create an element next to an element. By setting props, we can determine the direction of its placement and how it gets triggered. The infowindow module has some smarts that will
90
+ detect if it's about to get rendered off the screen. If it is, it will adjust the placement of the infowindow until it can be rendered. If it cannot be rendered in any direction, the code will pick the direction
91
+ where the least amount of overflow is occuring. The order it tries to find a new placement in is top, right, down, left.
92
+ The above example uses a button as the trigger for the info window, but any html element can be used as long as its passed as a child of the <InfoWindow /> component
93
+ */
94
+ export declare class LegacyInfoWindow extends React.PureComponent<ILegacyInfoWindowProps, IState> {
95
+ private _showDelayId;
96
+ private _triggerRef;
97
+ private _renderContainer;
98
+ private _contentRef;
99
+ private _triangleRef;
100
+ private _cursorPosition;
101
+ private _triggerRect;
102
+ private _root;
103
+ constructor(props: ILegacyInfoWindowProps);
104
+ componentDidMount(): void;
105
+ componentDidUpdate(oldProps: ILegacyInfoWindowProps): void;
106
+ componentWillUnmount(): void;
107
+ computeStylesFromDisplayPosition: (anchor: IAnchorScores, triangleRect: ClientRect) => IInfoWindowStyles<number>;
108
+ setTriggerRef: (div: HTMLDivElement) => void;
109
+ setContentRef: (div: HTMLDivElement) => void;
110
+ setTriangleRef: (span: HTMLSpanElement) => void;
111
+ showHideToggle: () => void;
112
+ setShow: (show: boolean) => void;
113
+ handleBodyClick: (e: MouseEvent) => void;
114
+ handleScroll: () => void;
115
+ onTriggerClick: (e: React.MouseEvent<HTMLDivElement>) => void;
116
+ onMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
117
+ onMouseLeave: (e: React.MouseEvent<any>) => void;
118
+ onMouseMove: (e: MouseEvent) => void;
119
+ getDisplayPosition: (triggerPoint: ICursorPoints, triggerRect: ClientRect, triangleRect: ClientRect, contentRect: ClientRect) => IAnchorScores;
120
+ closeInfoWindow(): void;
121
+ notTargetArea(e: MouseEvent): boolean;
122
+ registerMousePosition(e: MouseEvent | React.MouseEvent<any> | null): void;
123
+ detachEventListeners(): void;
124
+ attachEventListeners(): void;
125
+ computeStyles(): {
126
+ contentStyles: React.CSSProperties;
127
+ triangleStyles: React.CSSProperties;
128
+ position: Position;
129
+ } | {
130
+ position: Position;
131
+ triangleStyles: {
132
+ top: string;
133
+ left: string;
134
+ } | {
135
+ top: string;
136
+ left: string;
137
+ };
138
+ contentStyles: {
139
+ top: string;
140
+ left: string;
141
+ } | {
142
+ top: string;
143
+ left: string;
144
+ };
145
+ };
146
+ removeRenderingContainer(): void;
147
+ createRenderContainer(): HTMLDivElement;
148
+ createRenderRoot(): void;
149
+ /**
150
+ * The first render wont be positioned properly since we don't have the width/height to calculate the position.
151
+ * `runStyleRender` runs a second render when we have the contentContainer rendered to calculate the position.
152
+ */
153
+ renderContent(runStyleRender?: boolean): void;
154
+ render(): React.JSX.Element;
155
+ }
156
+ export declare const InfoWindowContext: React.Context<InfoWindowState>;
157
+ interface InfoWindowState {
158
+ closeInfoWindow: () => void;
159
+ }
160
+ export declare const useLegacyInfoWindow: () => InfoWindowState;
161
+ export {};
@@ -0,0 +1,43 @@
1
+ export interface ICursorPoints {
2
+ x: number;
3
+ y: number;
4
+ }
5
+ export interface ICursorOptions {
6
+ rule: 'follow' | 'follow-x' | 'follow-y';
7
+ keepOnMouseMove?: boolean;
8
+ }
9
+ export type Position = 'top' | 'right' | 'bottom' | 'left';
10
+ export declare const getPositionEvalOrder: (position: Position) => Position[];
11
+ interface IAnchorPoint {
12
+ position: Position;
13
+ point: ICursorPoints;
14
+ }
15
+ export interface IAnchorScores extends IAnchorPoint {
16
+ display: ClientRect;
17
+ displayScore: number;
18
+ distanceScore: number;
19
+ weightedScore: number;
20
+ }
21
+ export declare const getAnchorPoints: (triggerPoint: ICursorPoints, triggerRect: ClientRect, triangleRect: ClientRect, windowRect: ClientRect, cursorOptions: ICursorOptions) => IAnchorPoint[];
22
+ export declare const getPositionScores: (triggerPoint: ICursorPoints, triggerRect: ClientRect, contentRect: ClientRect, triangleRect: ClientRect, windowRect: ClientRect, cursorOptions: ICursorOptions, anchorOffset?: number) => IAnchorScores[];
23
+ export declare const getBestFit: (desiredOrder: Position[], positionScores: IAnchorScores[]) => IAnchorScores;
24
+ export declare const adjustContentDisplayCoordinates: (anchor: IAnchorScores, windowRect: ClientRect) => {
25
+ display: {
26
+ left: number;
27
+ right: number;
28
+ height: number;
29
+ width: number;
30
+ x: number;
31
+ y: number;
32
+ bottom: number;
33
+ top: number;
34
+ toJSON(): any;
35
+ };
36
+ displayScore: number;
37
+ distanceScore: number;
38
+ weightedScore: number;
39
+ position: Position;
40
+ point: ICursorPoints;
41
+ };
42
+ export declare const notTargetAreas: (elements: (Element | HTMLElement)[], e: MouseEvent) => boolean;
43
+ export {};
@@ -0,0 +1,2 @@
1
+ import { StrictModifier } from 'react-popper';
2
+ export declare const useInfoWindowModifiers: (updatePositionWhenChanged: any) => (StrictModifier<import("react-popper").StrictModifierNames> | Partial<import("@popperjs/core").Modifier<"handleOverflowPositions", {}>>)[];
@@ -0,0 +1,31 @@
1
+ import * as React from 'react';
2
+ import { ITooltipPosition, ITooltipProps } from '../tooltip/Tooltip';
3
+ export interface IOverflowTooltipProps extends Pick<ITooltipProps, 'dataAttributes'> {
4
+ children: React.ReactNode;
5
+ /** Maximum width the element expands to before being cut off */
6
+ maxWidth?: number;
7
+ className?: string;
8
+ tooltipClassName?: string;
9
+ position?: ITooltipPosition;
10
+ }
11
+ export interface IOverflowTooltipState {
12
+ overflow: boolean;
13
+ }
14
+ /**
15
+ * OverflowTooltip will ellipse content after the specified maxWidth prop or from the
16
+ * parent containers calculated width and apply a Tooltip to allow users to see the full
17
+ * content on hover
18
+ * @requires Tooltip
19
+ */
20
+ export declare class OverflowTooltip extends React.PureComponent<IOverflowTooltipProps, IOverflowTooltipState> {
21
+ _element: HTMLDivElement;
22
+ static defaultProps: {
23
+ position: string;
24
+ };
25
+ constructor(props: IOverflowTooltipProps);
26
+ componentDidMount(): void;
27
+ refElement: (element: HTMLDivElement) => void;
28
+ checkOverflow: () => void;
29
+ isTextOverflow(): boolean;
30
+ render(): React.JSX.Element;
31
+ }
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+ import { ILegacyInfoWindowProps } from '../info-window/LegacyInfoWindow';
3
+ import { Position } from '../info-window/info-window-utils';
4
+ import './tooltip.scss';
5
+ export type ITooltipPosition = Position;
6
+ type IColorScheme = 'dark' | 'light';
7
+ type IAlignStyle = 'center' | 'left' | 'right';
8
+ export interface ITooltipProps extends ILegacyInfoWindowProps {
9
+ /**
10
+ * Colour scheme for the tooltip content. Available options are 'dark' and 'light'
11
+ */
12
+ delayShow?: ILegacyInfoWindowProps['delayShow'];
13
+ event?: ILegacyInfoWindowProps['event'];
14
+ colorScheme?: IColorScheme;
15
+ textAlignment?: IAlignStyle;
16
+ }
17
+ /**
18
+ * Tooltips are an extended version of the info window that triggers on hover by default, delayed slightly and is styled with tooltip styles
19
+ */
20
+ export declare const Tooltip: (props: ITooltipProps) => React.JSX.Element;
21
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ interface IProps {
3
+ children?: React.ReactNode;
4
+ position?: Partial<{
5
+ left: number;
6
+ top: number;
7
+ bottom: number;
8
+ right: number;
9
+ minWidth: number;
10
+ maxWidth: number;
11
+ }>;
12
+ }
13
+ export declare class Portal extends React.PureComponent<IProps, {}> {
14
+ private _root;
15
+ private _portalId;
16
+ componentDidMount(): void;
17
+ componentDidUpdate(prevProps: IProps): void;
18
+ componentWillUnmount(): void;
19
+ setRootContainerPosition: () => void;
20
+ render(): React.JSX.Element;
21
+ }
22
+ export {};
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ export declare class SearchBox extends React.PureComponent<{
3
+ placeholder: string;
4
+ onChange: (value: string) => void;
5
+ className?: string;
6
+ }, {}> {
7
+ changeValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
8
+ render(): React.JSX.Element;
9
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,11 @@
1
+ import * as React from 'react';
2
+ type StatusType = 'general' | 'success' | 'warning' | 'error';
3
+ export interface IStatusIconProps {
4
+ /**
5
+ * The type of status. (general, success, warning or error)
6
+ */
7
+ status: StatusType;
8
+ className?: string;
9
+ }
10
+ export declare const StatusIcon: React.FC<React.PropsWithChildren<IStatusIconProps>>;
11
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,16 @@
1
+ import * as React from 'react';
2
+ export interface IHeaderCell {
3
+ name: string;
4
+ width?: string;
5
+ className?: string;
6
+ }
7
+ export declare const Table: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>>;
8
+ export declare const TableHeadRow: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>>;
9
+ export declare const TableHead: React.FC<{
10
+ cells: IHeaderCell[];
11
+ sticky?: boolean;
12
+ className?: string;
13
+ }>;
14
+ export declare const TableBody: React.FC<React.PropsWithChildren<unknown>>;
15
+ export declare const TableRow: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>>;
16
+ export declare const TableCell: React.FC<React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableDataCellElement>>>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,36 @@
1
+ /// <reference types="lodash" />
2
+ import * as React from 'react';
3
+ import { ITab as Tab, ITabsProps, ITabsState, Theme } from './interfaces';
4
+ export type ITab = Tab;
5
+ export declare const getClassNamesByTheme: (theme: string, isActive: boolean, isFocused?: boolean, className?: string) => {
6
+ menuItem: string;
7
+ subMenuItem: string;
8
+ icon: {
9
+ menu: string;
10
+ };
11
+ tabsWrapper: string;
12
+ tabsList: string;
13
+ };
14
+ /**
15
+ * Tabs component can be used for sub navigation menu and global navigation menu
16
+ */
17
+ export declare class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
18
+ static defaultProps: {
19
+ theme: Theme;
20
+ showActiveState: boolean;
21
+ onClick: (...args: any[]) => void;
22
+ as: string;
23
+ };
24
+ constructor(props: ITabsProps);
25
+ componentDidUpdate(prevProps: ITabsProps): Promise<void>;
26
+ componentWillUnmount(): void;
27
+ onFocusIn: (index: number, ref: React.RefObject<HTMLElement>, nesting: number) => () => void;
28
+ onFocusOutDebounce: import("lodash").DebouncedFunc<(nesting: number) => void>;
29
+ asyncSetState: (state: Partial<ITabsState>) => Promise<unknown>;
30
+ onFocusOut: (nesting: number) => () => void;
31
+ onSelect: () => void;
32
+ hasSubMenus: (tab: ITab) => boolean;
33
+ isTabActive: (tab: ITab) => boolean;
34
+ renderSubMenus: () => React.JSX.Element[];
35
+ render(): React.JSX.Element;
36
+ }
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ import { IMenuItemProps } from './interfaces';
3
+ export declare class MenuItem extends React.PureComponent<IMenuItemProps> {
4
+ private spanRef;
5
+ private linkRef;
6
+ render(): React.DetailedReactHTMLElement<{
7
+ ref: React.RefObject<HTMLAnchorElement>;
8
+ onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
9
+ onMouseEnter: () => void;
10
+ href: string;
11
+ 'data-sk-name': string;
12
+ className: string;
13
+ onMouseLeave: () => void;
14
+ } | {
15
+ ref: React.RefObject<HTMLSpanElement>;
16
+ onMouseEnter: () => void;
17
+ onClickCapture: (...args: any[]) => void;
18
+ 'data-sk-name': string;
19
+ className: string;
20
+ onMouseLeave: () => void;
21
+ }, HTMLSpanElement>;
22
+ }
@@ -0,0 +1,28 @@
1
+ import { ITab, IRouteMap } from './interfaces';
2
+ /**
3
+ * get route objects as per the nested path indexes
4
+ */
5
+ export declare const getRouteFor: (tabs: ITab[], path: number[]) => ITab[];
6
+ /**
7
+ * map all paths to their respective route objects
8
+ */
9
+ export declare const mapPathToRouteObject: (tabs: ITab[]) => any;
10
+ /**
11
+ * Get the active route array by traversing the route map
12
+ */
13
+ export declare const getActiveRoute: (activeRoute: string, routeMap: IRouteMap) => string[];
14
+ export declare const dropDownTriggerPosition: (trigger: React.RefObject<HTMLElement>, nesting: number) => {
15
+ top: number;
16
+ left: number;
17
+ height: number;
18
+ width: number;
19
+ x: number;
20
+ y: number;
21
+ bottom: number;
22
+ right: number;
23
+ toJSON(): any;
24
+ };
25
+ /**
26
+ * return a complete URL route for a submenu item.
27
+ */
28
+ export declare const getFullRouteForSubMenuItem: (tabs: ITab[], subMenu: ITab) => string;
@@ -0,0 +1 @@
1
+ export declare const getDefaultTestProps: (additionalProps?: {}) => any;
@@ -0,0 +1,65 @@
1
+ /// <reference types="react" />
2
+ export declare enum Theme {
3
+ SUB = "sub",
4
+ GLOBAL = "global"
5
+ }
6
+ export type AsMenuType = 'a' | 'span';
7
+ export interface ITab {
8
+ title: string;
9
+ route: string;
10
+ subMenus?: ITab[];
11
+ }
12
+ export interface ITabsProps {
13
+ tabs: ITab[];
14
+ onClick: (route: string) => void;
15
+ currentActiveRoute: string;
16
+ showActiveState?: boolean;
17
+ className?: string;
18
+ theme?: Theme.GLOBAL | Theme.SUB;
19
+ /**
20
+ * The tab component will automatically generate 'span' tag links. However, if you specify to generate the menu items as 'a' tags,
21
+ * then links will be generated based on the route configuration passed in.
22
+ * Do not explicitly set this if you wish to insert dynamic parameters into the URL based on navigation.
23
+ */
24
+ as?: AsMenuType;
25
+ /**
26
+ * Used to render all tabs and items.
27
+ *
28
+ * Note: that Sked-UI styling will be applied in accordance with the theme prop.
29
+ * This renderer will render the items within each tab and menu item.
30
+ *
31
+ * Default: ({title}) => title
32
+ */
33
+ itemRenderer?: IMenuItemProps['itemRenderer'];
34
+ }
35
+ export interface IFocusRouteItem {
36
+ index: number;
37
+ ref: React.RefObject<HTMLElement>;
38
+ }
39
+ export interface IRouteMap {
40
+ [key: string]: ITab;
41
+ }
42
+ export interface ITabsState {
43
+ activeRoute: string[];
44
+ focusRoute: IFocusRouteItem[];
45
+ routeMap: IRouteMap;
46
+ }
47
+ interface IBaseItemProps {
48
+ label: string;
49
+ route: string;
50
+ activeRoute: string[];
51
+ tabIndex: number;
52
+ theme: Theme.GLOBAL | Theme.SUB;
53
+ onFocusIn: (tabIndex: number, ref: React.RefObject<HTMLElement>, nesting: number | null) => () => void;
54
+ onFocusOut: (nesting: number) => () => void;
55
+ onSelect: () => void;
56
+ as?: AsMenuType;
57
+ }
58
+ export interface IMenuItemProps extends Omit<IBaseItemProps, 'theme'> {
59
+ children: React.ReactNode;
60
+ focusRoute: IFocusRouteItem[];
61
+ classes?: string;
62
+ nesting?: number;
63
+ itemRenderer?: (tab: Pick<ITab, 'title' | 'route'>) => React.ReactNode;
64
+ }
65
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ interface IMultilineContentProps extends React.HTMLAttributes<HTMLSpanElement> {
3
+ content: string;
4
+ }
5
+ export declare const MultilineContent: React.FC<IMultilineContentProps>;
6
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export declare function useDebounce<T>(value: T, delay?: number): T;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,59 @@
1
- export * from './components/test/Test';
2
- export * from './components/loader/Loading';
1
+ import './styles/tailwind.css';
2
+ export * from './components/avatar/Avatar';
3
+ export * from './components/avatar/AvatarDetail';
4
+ export * from './components/avatar/AvatarGroup';
5
+ export * from './components/badge/Badge';
6
+ export * from './components/buttons/button/Button';
7
+ export * from './components/buttons/button-dropdown/ButtonDropdown';
8
+ export * from './components/buttons/icon-button/IconButton';
9
+ export * from './components/buttons/icon-button-dropdown/IconButtonDropdown';
10
+ export * from './components/button-group/ButtonGroup';
11
+ export * from './components/calendar-controls/CalendarControls';
12
+ export * from './components/datepicker/Datepicker';
13
+ export * from './components/datepicker/Time';
14
+ export * from './components/datepicker/DateTime';
15
+ export * from './components/dynamic-table/DynamicTable';
16
+ export * from './components/dynamic-table/DynamicTable-utils';
17
+ export * from './components/emptystate/EmptyState';
18
+ export * from './components/filter-bar/FilterBar';
19
+ export * from './components/filter-bar/filter-pill/FilterPill';
20
+ export * from './components/filter-bar/filter-list/FilterList';
21
+ export * from './components/filter-bar/filter-list/FilterListWithApply';
22
+ export * from './components/filter-bar/filter-list/FilterSearch';
23
+ export * from './components/filter-bar/filter-list/RemoteSearch';
24
+ export * from './components/forms/elements/FormElements';
25
+ export * from './components/forms/elements/NumberInput';
26
+ export { formatReadonlySelect } from './components/forms/elements/select-utils';
27
+ export { useRunPromise, useOnClickOutside } from './components/forms/elements/select-hooks';
28
+ export * from './components/forms/elements/interfaces';
29
+ export * from './components/forms/elements/SearchSelect';
30
+ export * from './components/forms/elements/AsyncSearchSelect';
31
+ export * from './components/forms/elements/MultiSearchSelect';
32
+ export * from './components/forms/elements/AsyncMultiSearchSelect';
33
+ export * from './components/forms/elements/PlainMultiSearchSelect';
34
+ export * from './components/forms/elements/PlainAsyncMultiSearchSelect';
35
+ export * from './components/forms/ReadOnly';
36
+ export * from './components/forms/SkedFormValidation';
37
+ export * from './components/forms/elements/TextArea';
38
+ export * from './components/icon/Icon';
39
+ export * from './components/info-card';
40
+ export * from './components/inline-banner/InlineBanner';
41
+ export * from './components/IntersectionObserverWrapper/IntersectionObserverWrapper';
42
+ export * from './components/link/Link';
43
+ export * from './components/loader/Loading';
44
+ export * from './components/loader/spinner/LoadingSpinner';
45
+ export * from './components/lozenge/Lozenge';
46
+ export * from './components/lozenge/CustomLozenge';
47
+ export * from './components/menus';
48
+ export * from './components/modals/Modals';
49
+ export * from './components/pagination/Pagination';
50
+ export * from './components/popout/PopOutBase';
51
+ export * from './components/popout/PopOut';
52
+ export * from './components/popups/info-window/InfoWindow';
53
+ export * from './components/popups/overflow-tooltip/OverflowTooltip';
54
+ export * from './components/popups/info-window/LegacyInfoWindow';
55
+ export * from './components/popups/tooltip/Tooltip';
56
+ export * from './components/pill/Pill';
57
+ export * from './components/table/Table';
58
+ export * from './components/tabs/Tabs/Tabs';
59
+ export * from './components/status-icon/StatusIcon';