@workday/canvas-kit-react 7.0.15 → 7.1.0
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/collection/lib/useOverflowListModel.tsx +11 -2
- package/common/lib/utils/index.ts +1 -0
- package/common/lib/utils/useModalityType.ts +65 -0
- package/dist/commonjs/action-bar/lib/ActionBar.d.ts +1 -0
- package/dist/commonjs/action-bar/lib/ActionBar.d.ts.map +1 -1
- package/dist/commonjs/action-bar/lib/useActionBarModel.d.ts +2 -0
- package/dist/commonjs/action-bar/lib/useActionBarModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useOverflowListModel.d.ts +10 -0
- package/dist/commonjs/collection/lib/useOverflowListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useOverflowListModel.js +10 -4
- package/dist/commonjs/common/lib/utils/index.d.ts +1 -0
- package/dist/commonjs/common/lib/utils/index.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/index.js +1 -0
- package/dist/commonjs/common/lib/utils/useModalityType.d.ts +17 -0
- package/dist/commonjs/common/lib/utils/useModalityType.d.ts.map +1 -0
- package/dist/commonjs/common/lib/utils/useModalityType.js +63 -0
- package/dist/commonjs/tabs/lib/Tabs.d.ts +1 -0
- package/dist/commonjs/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +4 -3
- package/dist/commonjs/tabs/lib/TabsList.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsList.js +17 -2
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts +55 -159
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/useTabsModel.js +2 -0
- package/dist/es6/action-bar/lib/ActionBar.d.ts +1 -0
- package/dist/es6/action-bar/lib/ActionBar.d.ts.map +1 -1
- package/dist/es6/action-bar/lib/useActionBarModel.d.ts +2 -0
- package/dist/es6/action-bar/lib/useActionBarModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useOverflowListModel.d.ts +10 -0
- package/dist/es6/collection/lib/useOverflowListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useOverflowListModel.js +10 -4
- package/dist/es6/common/lib/utils/index.d.ts +1 -0
- package/dist/es6/common/lib/utils/index.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/index.js +1 -0
- package/dist/es6/common/lib/utils/useModalityType.d.ts +17 -0
- package/dist/es6/common/lib/utils/useModalityType.d.ts.map +1 -0
- package/dist/es6/common/lib/utils/useModalityType.js +56 -0
- package/dist/es6/tabs/lib/Tabs.d.ts +1 -0
- package/dist/es6/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +5 -4
- package/dist/es6/tabs/lib/TabsList.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsList.js +18 -3
- package/dist/es6/tabs/lib/useTabsModel.d.ts +55 -159
- package/dist/es6/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/useTabsModel.js +3 -1
- package/package.json +5 -5
- package/tabs/lib/TabsItem.tsx +4 -3
- package/tabs/lib/TabsList.tsx +23 -4
- package/tabs/lib/useTabsModel.tsx +3 -1
|
@@ -55,10 +55,17 @@ export const useOverflowListModel = createModelHook({
|
|
|
55
55
|
...useSelectionListModel.defaultConfig,
|
|
56
56
|
initialHiddenIds: [] as string[],
|
|
57
57
|
containerWidth: 0,
|
|
58
|
+
/**
|
|
59
|
+
* Determines if overflow should actually occur. For example, touch devices are better at
|
|
60
|
+
* side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
|
|
61
|
+
* @default true
|
|
62
|
+
*/ shouldCalculateOverflow: true,
|
|
58
63
|
},
|
|
59
64
|
requiredConfig: useSelectionListModel.requiredConfig,
|
|
60
65
|
contextOverride: useSelectionListModel.Context,
|
|
61
66
|
})(config => {
|
|
67
|
+
const shouldCalculateOverflow =
|
|
68
|
+
config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
|
|
62
69
|
const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
|
|
63
70
|
const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
|
|
64
71
|
const [containerWidth, setContainerWidth] = React.useState(0);
|
|
@@ -67,9 +74,11 @@ export const useOverflowListModel = createModelHook({
|
|
|
67
74
|
const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
|
|
68
75
|
const overflowTargetWidthRef = React.useRef(0);
|
|
69
76
|
|
|
77
|
+
const internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
|
|
78
|
+
|
|
70
79
|
// Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
|
|
71
80
|
// hidden ids as well
|
|
72
|
-
const nonInteractiveIds = (config.nonInteractiveIds || []).concat(
|
|
81
|
+
const nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds);
|
|
73
82
|
|
|
74
83
|
const model = useSelectionListModel({
|
|
75
84
|
...config,
|
|
@@ -78,7 +87,7 @@ export const useOverflowListModel = createModelHook({
|
|
|
78
87
|
|
|
79
88
|
const state = {
|
|
80
89
|
...model.state,
|
|
81
|
-
hiddenIds,
|
|
90
|
+
hiddenIds: internalHiddenIds,
|
|
82
91
|
itemWidthCache,
|
|
83
92
|
containerWidth,
|
|
84
93
|
overflowTargetWidth,
|
|
@@ -12,6 +12,7 @@ export * from './models';
|
|
|
12
12
|
export * from './elements';
|
|
13
13
|
export * from './useConstant';
|
|
14
14
|
export * from './useIsFullscreen';
|
|
15
|
+
export * from './useModalityType';
|
|
15
16
|
export * from './useWindowSize';
|
|
16
17
|
export * from './useResizeObserver';
|
|
17
18
|
export * from './StaticStates';
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type Modality = 'mouse' | 'touch' | 'pen';
|
|
4
|
+
|
|
5
|
+
// Use this shared global value to reduce calls to localStorage which is a synchronous API to a
|
|
6
|
+
// drive which could be slow (spinning disks could be hundreds of ms). We read only once this way.
|
|
7
|
+
// The following initialization is very difficult to test via automation. Don't mess with it unless
|
|
8
|
+
// you plan to manually test.
|
|
9
|
+
//
|
|
10
|
+
// 1. Initialize modality to localStorage
|
|
11
|
+
// a. if localStorage isn't primed, use clientWidth of the browsers
|
|
12
|
+
// b. if < 768, default to 'touch'
|
|
13
|
+
// c. else default to 'mouse'
|
|
14
|
+
const localStorageValue = 'mouse' as Modality; //((typeof localStorage !== 'undefined'
|
|
15
|
+
// ? localStorage.getItem('modality')
|
|
16
|
+
// : '') ||
|
|
17
|
+
// (typeof document !== 'undefined'
|
|
18
|
+
// ? document.documentElement.clientWidth < 768
|
|
19
|
+
// ? 'touch'
|
|
20
|
+
// : ''
|
|
21
|
+
// : '') ||
|
|
22
|
+
// 'mouse') as Modality;
|
|
23
|
+
|
|
24
|
+
// Update the `localStorageValue`, but conditionally update localStorage only if the value has
|
|
25
|
+
// changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
|
|
26
|
+
// drives
|
|
27
|
+
const updateLocalStorage = (value: Modality) => {
|
|
28
|
+
// if (localStorageValue !== value) {
|
|
29
|
+
// localStorage.setItem('modality', value);
|
|
30
|
+
// }
|
|
31
|
+
// localStorageValue = value;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
|
|
36
|
+
* is useful if you have styles or behaviors that depend on the user's interaction type. For
|
|
37
|
+
* example, touch users can scroll horizontally easier than mouse users, so horizontal overflow
|
|
38
|
+
* might be more desired than overflow menus on touch devices. For devices that support multiple
|
|
39
|
+
* input types, the last used input type is saved. For these devices, consider the possibility this
|
|
40
|
+
* value could change after your component is rendered, so make sure you component rerenders
|
|
41
|
+
* properly in this case.
|
|
42
|
+
*
|
|
43
|
+
* Uses `PointerEvent.pointerType` to determine last used input.
|
|
44
|
+
*
|
|
45
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
|
|
46
|
+
*/
|
|
47
|
+
export const useModalityType = (): Modality => {
|
|
48
|
+
const [modality, setModality] = React.useState(localStorageValue);
|
|
49
|
+
|
|
50
|
+
React.useEffect(() => {
|
|
51
|
+
const handlePointerDown = (event: PointerEvent) => {
|
|
52
|
+
const value = event.pointerType as Modality;
|
|
53
|
+
setModality(value);
|
|
54
|
+
updateLocalStorage(value);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
document.addEventListener('pointerdown', handlePointerDown);
|
|
58
|
+
|
|
59
|
+
return () => {
|
|
60
|
+
document.removeEventListener('pointerdown', handlePointerDown);
|
|
61
|
+
};
|
|
62
|
+
}, []);
|
|
63
|
+
|
|
64
|
+
return modality;
|
|
65
|
+
};
|
|
@@ -30,6 +30,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
|
|
|
30
30
|
}>;
|
|
31
31
|
initialHiddenIds: string[];
|
|
32
32
|
containerWidth: number;
|
|
33
|
+
shouldCalculateOverflow: boolean;
|
|
33
34
|
initialSelectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
|
|
34
35
|
initialUnselectedIds: string[];
|
|
35
36
|
selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOlB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
|
|
@@ -33,6 +33,7 @@ export declare const useActionBarModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
33
33
|
}>;
|
|
34
34
|
initialHiddenIds: string[];
|
|
35
35
|
containerWidth: number;
|
|
36
|
+
shouldCalculateOverflow: boolean;
|
|
36
37
|
initialSelectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
|
|
37
38
|
initialUnselectedIds: string[];
|
|
38
39
|
selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
|
|
@@ -1425,6 +1426,7 @@ export declare const useActionBarModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
1425
1426
|
}>;
|
|
1426
1427
|
initialHiddenIds: string[];
|
|
1427
1428
|
containerWidth: number;
|
|
1429
|
+
shouldCalculateOverflow: boolean;
|
|
1428
1430
|
initialSelectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
|
|
1429
1431
|
initialUnselectedIds: string[];
|
|
1430
1432
|
selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useActionBarModel.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/useActionBarModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;IAG1B;;;OAGG;;IAEH;;;;OAIG
|
|
1
|
+
{"version":3,"file":"useActionBarModel.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/useActionBarModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;IAG1B;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IATH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEL,CAAC"}
|
|
@@ -3,6 +3,11 @@ export declare function getHiddenIds(containerWidth: number, overflowTargetWidth
|
|
|
3
3
|
export declare const useOverflowListModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
4
4
|
initialHiddenIds: string[];
|
|
5
5
|
containerWidth: number;
|
|
6
|
+
/**
|
|
7
|
+
* Determines if overflow should actually occur. For example, touch devices are better at
|
|
8
|
+
* side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
|
|
9
|
+
* @default true
|
|
10
|
+
*/ shouldCalculateOverflow: boolean;
|
|
6
11
|
initialSelectedIds: import("./useSelectionListModel").SelectedIds;
|
|
7
12
|
initialUnselectedIds: string[];
|
|
8
13
|
selection: import("./useSelectionListModel").SelectionManager;
|
|
@@ -1298,6 +1303,11 @@ export declare const useOverflowListModel: (<TT_Special_Generic>(config?: (Parti
|
|
|
1298
1303
|
}) & import("../../common").ModelExtras<{
|
|
1299
1304
|
initialHiddenIds: string[];
|
|
1300
1305
|
containerWidth: number;
|
|
1306
|
+
/**
|
|
1307
|
+
* Determines if overflow should actually occur. For example, touch devices are better at
|
|
1308
|
+
* side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
|
|
1309
|
+
* @default true
|
|
1310
|
+
*/ shouldCalculateOverflow: boolean;
|
|
1301
1311
|
initialSelectedIds: import("./useSelectionListModel").SelectedIds;
|
|
1302
1312
|
initialUnselectedIds: string[];
|
|
1303
1313
|
selection: import("./useSelectionListModel").SelectionManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflowListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,CAwCV;AAED,eAAO,MAAM,oBAAoB
|
|
1
|
+
{"version":3,"file":"useOverflowListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListModel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -58,10 +58,16 @@ function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selec
|
|
|
58
58
|
}
|
|
59
59
|
exports.getHiddenIds = getHiddenIds;
|
|
60
60
|
exports.useOverflowListModel = common_1.createModelHook({
|
|
61
|
-
defaultConfig: __assign(__assign({}, useSelectionListModel_1.useSelectionListModel.defaultConfig), { initialHiddenIds: [], containerWidth: 0
|
|
61
|
+
defaultConfig: __assign(__assign({}, useSelectionListModel_1.useSelectionListModel.defaultConfig), { initialHiddenIds: [], containerWidth: 0,
|
|
62
|
+
/**
|
|
63
|
+
* Determines if overflow should actually occur. For example, touch devices are better at
|
|
64
|
+
* side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
|
|
65
|
+
* @default true
|
|
66
|
+
*/ shouldCalculateOverflow: true }),
|
|
62
67
|
requiredConfig: useSelectionListModel_1.useSelectionListModel.requiredConfig,
|
|
63
68
|
contextOverride: useSelectionListModel_1.useSelectionListModel.Context,
|
|
64
69
|
})(function (config) {
|
|
70
|
+
var shouldCalculateOverflow = config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
|
|
65
71
|
var _a = react_1.default.useState(config.initialHiddenIds), hiddenIds = _a[0], setHiddenIds = _a[1];
|
|
66
72
|
var _b = react_1.default.useState({}), itemWidthCache = _b[0], setItemWidthCache = _b[1];
|
|
67
73
|
var _c = react_1.default.useState(0), containerWidth = _c[0], setContainerWidth = _c[1];
|
|
@@ -69,12 +75,12 @@ exports.useOverflowListModel = common_1.createModelHook({
|
|
|
69
75
|
var itemWidthCacheRef = react_1.default.useRef(itemWidthCache);
|
|
70
76
|
var _d = react_1.default.useState(0), overflowTargetWidth = _d[0], setOverflowTargetWidth = _d[1];
|
|
71
77
|
var overflowTargetWidthRef = react_1.default.useRef(0);
|
|
78
|
+
var internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
|
|
72
79
|
// Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
|
|
73
80
|
// hidden ids as well
|
|
74
|
-
var nonInteractiveIds = (config.nonInteractiveIds || []).concat(
|
|
81
|
+
var nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds);
|
|
75
82
|
var model = useSelectionListModel_1.useSelectionListModel(__assign(__assign({}, config), { nonInteractiveIds: nonInteractiveIds }));
|
|
76
|
-
var state = __assign(__assign({}, model.state), { hiddenIds:
|
|
77
|
-
itemWidthCache: itemWidthCache,
|
|
83
|
+
var state = __assign(__assign({}, model.state), { hiddenIds: internalHiddenIds, itemWidthCache: itemWidthCache,
|
|
78
84
|
containerWidth: containerWidth,
|
|
79
85
|
overflowTargetWidth: overflowTargetWidth });
|
|
80
86
|
var events = __assign(__assign({}, model.events), { select: function (data) {
|
|
@@ -12,6 +12,7 @@ export * from './models';
|
|
|
12
12
|
export * from './elements';
|
|
13
13
|
export * from './useConstant';
|
|
14
14
|
export * from './useIsFullscreen';
|
|
15
|
+
export * from './useModalityType';
|
|
15
16
|
export * from './useWindowSize';
|
|
16
17
|
export * from './useResizeObserver';
|
|
17
18
|
export * from './StaticStates';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
|
|
@@ -24,6 +24,7 @@ __exportStar(require("./models"), exports);
|
|
|
24
24
|
__exportStar(require("./elements"), exports);
|
|
25
25
|
__exportStar(require("./useConstant"), exports);
|
|
26
26
|
__exportStar(require("./useIsFullscreen"), exports);
|
|
27
|
+
__exportStar(require("./useModalityType"), exports);
|
|
27
28
|
__exportStar(require("./useWindowSize"), exports);
|
|
28
29
|
__exportStar(require("./useResizeObserver"), exports);
|
|
29
30
|
__exportStar(require("./StaticStates"), exports);
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
declare type Modality = 'mouse' | 'touch' | 'pen';
|
|
2
|
+
/**
|
|
3
|
+
* Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
|
|
4
|
+
* is useful if you have styles or behaviors that depend on the user's interaction type. For
|
|
5
|
+
* example, touch users can scroll horizontally easier than mouse users, so horizontal overflow
|
|
6
|
+
* might be more desired than overflow menus on touch devices. For devices that support multiple
|
|
7
|
+
* input types, the last used input type is saved. For these devices, consider the possibility this
|
|
8
|
+
* value could change after your component is rendered, so make sure you component rerenders
|
|
9
|
+
* properly in this case.
|
|
10
|
+
*
|
|
11
|
+
* Uses `PointerEvent.pointerType` to determine last used input.
|
|
12
|
+
*
|
|
13
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
|
|
14
|
+
*/
|
|
15
|
+
export declare const useModalityType: () => Modality;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=useModalityType.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useModalityType.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useModalityType.ts"],"names":[],"mappings":"AAEA,aAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AA+B1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,QAkBlC,CAAC"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useModalityType = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
// Use this shared global value to reduce calls to localStorage which is a synchronous API to a
|
|
9
|
+
// drive which could be slow (spinning disks could be hundreds of ms). We read only once this way.
|
|
10
|
+
// The following initialization is very difficult to test via automation. Don't mess with it unless
|
|
11
|
+
// you plan to manually test.
|
|
12
|
+
//
|
|
13
|
+
// 1. Initialize modality to localStorage
|
|
14
|
+
// a. if localStorage isn't primed, use clientWidth of the browsers
|
|
15
|
+
// b. if < 768, default to 'touch'
|
|
16
|
+
// c. else default to 'mouse'
|
|
17
|
+
var localStorageValue = 'mouse'; //((typeof localStorage !== 'undefined'
|
|
18
|
+
// ? localStorage.getItem('modality')
|
|
19
|
+
// : '') ||
|
|
20
|
+
// (typeof document !== 'undefined'
|
|
21
|
+
// ? document.documentElement.clientWidth < 768
|
|
22
|
+
// ? 'touch'
|
|
23
|
+
// : ''
|
|
24
|
+
// : '') ||
|
|
25
|
+
// 'mouse') as Modality;
|
|
26
|
+
// Update the `localStorageValue`, but conditionally update localStorage only if the value has
|
|
27
|
+
// changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
|
|
28
|
+
// drives
|
|
29
|
+
var updateLocalStorage = function (value) {
|
|
30
|
+
// if (localStorageValue !== value) {
|
|
31
|
+
// localStorage.setItem('modality', value);
|
|
32
|
+
// }
|
|
33
|
+
// localStorageValue = value;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
|
|
37
|
+
* is useful if you have styles or behaviors that depend on the user's interaction type. For
|
|
38
|
+
* example, touch users can scroll horizontally easier than mouse users, so horizontal overflow
|
|
39
|
+
* might be more desired than overflow menus on touch devices. For devices that support multiple
|
|
40
|
+
* input types, the last used input type is saved. For these devices, consider the possibility this
|
|
41
|
+
* value could change after your component is rendered, so make sure you component rerenders
|
|
42
|
+
* properly in this case.
|
|
43
|
+
*
|
|
44
|
+
* Uses `PointerEvent.pointerType` to determine last used input.
|
|
45
|
+
*
|
|
46
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
|
|
47
|
+
*/
|
|
48
|
+
var useModalityType = function () {
|
|
49
|
+
var _a = react_1.default.useState(localStorageValue), modality = _a[0], setModality = _a[1];
|
|
50
|
+
react_1.default.useEffect(function () {
|
|
51
|
+
var handlePointerDown = function (event) {
|
|
52
|
+
var value = event.pointerType;
|
|
53
|
+
setModality(value);
|
|
54
|
+
updateLocalStorage(value);
|
|
55
|
+
};
|
|
56
|
+
document.addEventListener('pointerdown', handlePointerDown);
|
|
57
|
+
return function () {
|
|
58
|
+
document.removeEventListener('pointerdown', handlePointerDown);
|
|
59
|
+
};
|
|
60
|
+
}, []);
|
|
61
|
+
return modality;
|
|
62
|
+
};
|
|
63
|
+
exports.useModalityType = useModalityType;
|
|
@@ -31,6 +31,7 @@ export declare const Tabs: import("../../common").ComponentM<TabsProps & Partial
|
|
|
31
31
|
}>;
|
|
32
32
|
initialHiddenIds: string[];
|
|
33
33
|
containerWidth: number;
|
|
34
|
+
shouldCalculateOverflow: boolean;
|
|
34
35
|
initialSelectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
|
|
35
36
|
initialUnselectedIds: string[];
|
|
36
37
|
selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUb;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAGV,YAAY,
|
|
1
|
+
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAGV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAYjE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;wDAwFzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
|
|
@@ -54,7 +54,7 @@ exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(function (_a)
|
|
|
54
54
|
var theme = _a.theme, spacing = _a.spacing;
|
|
55
55
|
return (__assign(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), { '& > *:not(style) ~ *:not(style)': {
|
|
56
56
|
marginLeft: spacing || tokens_1.space.xxs,
|
|
57
|
-
}, fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center',
|
|
57
|
+
}, fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: tokens_1.space.xs + " " + tokens_1.space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), common_1.hideMouseFocus), { '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
|
|
58
58
|
fill: tokens_1.iconColors.active,
|
|
59
59
|
}, '&:hover, &:focus': {
|
|
60
60
|
backgroundColor: tokens_1.colors.soap200,
|
|
@@ -131,8 +131,9 @@ exports.TabsItem = common_1.createSubcomponent('button')({
|
|
|
131
131
|
Icon: icon_1.SystemIcon,
|
|
132
132
|
Text: common_1.EllipsisText,
|
|
133
133
|
},
|
|
134
|
-
})(function (_a, Element
|
|
134
|
+
})(function (_a, Element) {
|
|
135
135
|
var children = _a.children, elemProps = __rest(_a, ["children"]);
|
|
136
|
+
var modality = common_1.useModalityType();
|
|
136
137
|
return (React.createElement(tooltip_1.OverflowTooltip, null,
|
|
137
|
-
React.createElement(exports.StyledTabItem, __assign({ as: Element }, elemProps), children)));
|
|
138
|
+
React.createElement(exports.StyledTabItem, __assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
|
|
138
139
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,
|
|
1
|
+
{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAUvD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;IAC3F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAOvB,CAAC;AAgBF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBnB,CAAC"}
|
|
@@ -49,15 +49,30 @@ var layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
49
49
|
var collection_1 = require("@workday/canvas-kit-react/collection");
|
|
50
50
|
var useTabsModel_1 = require("./useTabsModel");
|
|
51
51
|
exports.useTabsList = common_1.composeHooks(common_1.createElemPropsHook(useTabsModel_1.useTabsModel)(function () {
|
|
52
|
-
|
|
52
|
+
var modality = common_1.useModalityType();
|
|
53
|
+
return { role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined };
|
|
53
54
|
}), collection_1.useOverflowListMeasure, collection_1.useListResetCursorOnBlur);
|
|
55
|
+
var StyledStack = common_1.styled(layout_1.Stack)({
|
|
56
|
+
'::after': {
|
|
57
|
+
content: '""',
|
|
58
|
+
position: 'sticky',
|
|
59
|
+
height: 52,
|
|
60
|
+
minWidth: 30,
|
|
61
|
+
background: "linear-gradient(to right,rgba(255,255,255,0),white);",
|
|
62
|
+
zIndex: 1,
|
|
63
|
+
right: 0,
|
|
64
|
+
top: 0,
|
|
65
|
+
pointerEvents: 'none',
|
|
66
|
+
},
|
|
67
|
+
});
|
|
54
68
|
exports.TabsList = common_1.createSubcomponent('div')({
|
|
55
69
|
displayName: 'Tabs.List',
|
|
56
70
|
modelHook: useTabsModel_1.useTabsModel,
|
|
57
71
|
elemPropsHook: exports.useTabsList,
|
|
58
72
|
})(function (_a, Element, model) {
|
|
59
73
|
var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
|
|
60
|
-
|
|
74
|
+
var modality = common_1.useModalityType();
|
|
75
|
+
return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xxxs" }, elemProps),
|
|
61
76
|
collection_1.useListRenderItems(model, children),
|
|
62
77
|
overflowButton));
|
|
63
78
|
});
|