@workday/canvas-kit-preview-react 8.0.0-alpha.239-next.10 → 8.0.0-alpha.241-next.12
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/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts +37 -595
- package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts +1 -24
- package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts +3 -26
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +8 -6
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.js +6 -27
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.d.ts +37 -598
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.js +3 -3
- package/dist/es6/segmented-control/lib/SegmentedControl.d.ts +37 -595
- package/dist/es6/segmented-control/lib/SegmentedControl.d.ts.map +1 -1
- package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts +1 -24
- package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts.map +1 -1
- package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts +3 -26
- package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
- package/dist/es6/segmented-control/lib/SegmentedControlList.js +9 -7
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlItem.d.ts.map +1 -1
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlItem.js +7 -28
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.d.ts +37 -598
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.d.ts.map +1 -1
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.js +4 -4
- package/package.json +4 -4
- package/segmented-control/lib/SegmentedControlList.tsx +10 -9
- package/segmented-control/lib/hooks/useSegmentedControlItem.tsx +11 -48
- package/segmented-control/lib/hooks/useSegmentedControlModel.tsx +4 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS3B,CAAC"}
|
|
@@ -43,11 +43,6 @@ export declare const SegmentedControlItem: import("@workday/canvas-kit-react/com
|
|
|
43
43
|
state: {
|
|
44
44
|
disabled: boolean;
|
|
45
45
|
size: "small" | "medium" | "large";
|
|
46
|
-
nonInteractiveIds: never[];
|
|
47
|
-
hiddenIds: never[];
|
|
48
|
-
itemWidthCache: Record<string, number>;
|
|
49
|
-
containerWidth: number;
|
|
50
|
-
overflowTargetWidth: number;
|
|
51
46
|
selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
|
|
52
47
|
unselectedIds: string[];
|
|
53
48
|
cursorId: string;
|
|
@@ -67,6 +62,7 @@ export declare const SegmentedControlItem: import("@workday/canvas-kit-react/com
|
|
|
67
62
|
id: string;
|
|
68
63
|
orientation: "horizontal" | "vertical";
|
|
69
64
|
indexRef: React.MutableRefObject<number>;
|
|
65
|
+
nonInteractiveIds: string[];
|
|
70
66
|
isVirtualized: boolean;
|
|
71
67
|
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
72
68
|
};
|
|
@@ -74,25 +70,6 @@ export declare const SegmentedControlItem: import("@workday/canvas-kit-react/com
|
|
|
74
70
|
select(data: {
|
|
75
71
|
id: string;
|
|
76
72
|
}): void;
|
|
77
|
-
setContainerWidth(data: {
|
|
78
|
-
width?: number | undefined;
|
|
79
|
-
}): void;
|
|
80
|
-
setOverflowTargetWidth(data: {
|
|
81
|
-
width: number;
|
|
82
|
-
}): void;
|
|
83
|
-
addItemWidth(data: {
|
|
84
|
-
id: string;
|
|
85
|
-
width: number;
|
|
86
|
-
}): void;
|
|
87
|
-
removeItemWidth(data: {
|
|
88
|
-
id: string;
|
|
89
|
-
}): void;
|
|
90
|
-
addHiddenKey(data: {
|
|
91
|
-
id: string;
|
|
92
|
-
}): void;
|
|
93
|
-
removeHiddenKey(data: {
|
|
94
|
-
id: string;
|
|
95
|
-
}): void;
|
|
96
73
|
selectAll(): void;
|
|
97
74
|
unselectAll(): void;
|
|
98
75
|
registerItem(data: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAEL,oBAAoB,EAIrB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAK9D,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AA0FD,eAAO,MAAM,oBAAoB
|
|
1
|
+
{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAEL,oBAAoB,EAIrB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAK9D,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AA0FD,eAAO,MAAM,oBAAoB;;;;;;;;;;+BA7G/B;;;eAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyIH,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import {
|
|
4
|
-
export interface SegmentedControlListProps<T = any> extends Omit<Partial<ExtractProps<typeof
|
|
3
|
+
import { Grid } from '@workday/canvas-kit-react/layout';
|
|
4
|
+
export interface SegmentedControlListProps<T = any> extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
|
|
5
5
|
'aria-label': string;
|
|
6
6
|
children: ((item: T) => React.ReactNode) | React.ReactNode;
|
|
7
7
|
}
|
|
@@ -9,11 +9,6 @@ export declare const SegmentedControlList: import("@workday/canvas-kit-react/com
|
|
|
9
9
|
state: {
|
|
10
10
|
disabled: boolean;
|
|
11
11
|
size: "small" | "medium" | "large";
|
|
12
|
-
nonInteractiveIds: never[];
|
|
13
|
-
hiddenIds: never[];
|
|
14
|
-
itemWidthCache: Record<string, number>;
|
|
15
|
-
containerWidth: number;
|
|
16
|
-
overflowTargetWidth: number;
|
|
17
12
|
selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
|
|
18
13
|
unselectedIds: string[];
|
|
19
14
|
cursorId: string;
|
|
@@ -30,6 +25,7 @@ export declare const SegmentedControlList: import("@workday/canvas-kit-react/com
|
|
|
30
25
|
id: string;
|
|
31
26
|
orientation: "horizontal" | "vertical";
|
|
32
27
|
indexRef: React.MutableRefObject<number>;
|
|
28
|
+
nonInteractiveIds: string[];
|
|
33
29
|
isVirtualized: boolean;
|
|
34
30
|
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
35
31
|
};
|
|
@@ -37,25 +33,6 @@ export declare const SegmentedControlList: import("@workday/canvas-kit-react/com
|
|
|
37
33
|
select(data: {
|
|
38
34
|
id: string;
|
|
39
35
|
}): void;
|
|
40
|
-
setContainerWidth(data: {
|
|
41
|
-
width?: number | undefined;
|
|
42
|
-
}): void;
|
|
43
|
-
setOverflowTargetWidth(data: {
|
|
44
|
-
width: number;
|
|
45
|
-
}): void;
|
|
46
|
-
addItemWidth(data: {
|
|
47
|
-
id: string;
|
|
48
|
-
width: number;
|
|
49
|
-
}): void;
|
|
50
|
-
removeItemWidth(data: {
|
|
51
|
-
id: string;
|
|
52
|
-
}): void;
|
|
53
|
-
addHiddenKey(data: {
|
|
54
|
-
id: string;
|
|
55
|
-
}): void;
|
|
56
|
-
removeHiddenKey(data: {
|
|
57
|
-
id: string;
|
|
58
|
-
}): void;
|
|
59
36
|
selectAll(): void;
|
|
60
37
|
unselectAll(): void;
|
|
61
38
|
registerItem(data: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAItD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAYD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqB/B,CAAC"}
|
|
@@ -22,15 +22,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import * as React from 'react';
|
|
24
24
|
import { createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
|
|
25
|
-
import {
|
|
25
|
+
import { Grid } from '@workday/canvas-kit-react/layout';
|
|
26
26
|
import { useListRenderItems } from '@workday/canvas-kit-react/collection';
|
|
27
27
|
import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
|
|
28
28
|
var useSegmentedControlList = createElemPropsHook(useSegmentedControlModel)(function (_a) {
|
|
29
|
-
var _b
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
var _b;
|
|
30
|
+
var _c = _a.state, orientation = _c.orientation, disabled = _c.disabled, items = _c.items;
|
|
31
|
+
var directionName = orientation === 'vertical' ? 'Row' : 'Column';
|
|
32
|
+
return _b = {},
|
|
33
|
+
_b["gridTemplate" + directionName + "s"] = "repeat(" + items.length + ", 1fr)",
|
|
34
|
+
_b.opacity = disabled ? 0.4 : undefined,
|
|
35
|
+
_b;
|
|
34
36
|
});
|
|
35
37
|
export var SegmentedControlList = createSubcomponent('div')({
|
|
36
38
|
displayName: 'SegmentedControl.List',
|
|
@@ -38,5 +40,5 @@ export var SegmentedControlList = createSubcomponent('div')({
|
|
|
38
40
|
elemPropsHook: useSegmentedControlList,
|
|
39
41
|
})(function (_a, Element, model) {
|
|
40
42
|
var children = _a.children, elemProps = __rest(_a, ["children"]);
|
|
41
|
-
return (React.createElement(
|
|
43
|
+
return (React.createElement(Grid, __assign({ as: Element, display: "inline-grid", role: "group", backgroundColor: "soap200", border: "1px solid transparent", borderColor: "licorice200", borderRadius: "l", padding: "3px", gridGap: "xxs" }, elemProps), useListRenderItems(model, children)));
|
|
42
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useSegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BnC,CAAC"}
|
|
@@ -1,41 +1,20 @@
|
|
|
1
|
-
import { createElemPropsHook, composeHooks
|
|
1
|
+
import { createElemPropsHook, composeHooks } from '@workday/canvas-kit-react/common';
|
|
2
2
|
import { useListItemRegister, isSelected, useListItemSelect, } from '@workday/canvas-kit-react/collection';
|
|
3
3
|
import { useSegmentedControlModel } from './useSegmentedControlModel';
|
|
4
|
-
export var useSegmentedControlItem = composeHooks(useListItemSelect, createElemPropsHook(useSegmentedControlModel)(function (model,
|
|
4
|
+
export var useSegmentedControlItem = composeHooks(useListItemSelect, createElemPropsHook(useSegmentedControlModel)(function (model, _, elemProps) {
|
|
5
5
|
if (elemProps === void 0) { elemProps = {}; }
|
|
6
|
-
var _a = useLocalRef(ref), elementRef = _a.elementRef, localRef = _a.localRef;
|
|
7
6
|
var name = elemProps['data-id'] || '';
|
|
8
|
-
var id = model.state.id + "-" + name;
|
|
9
|
-
useMountLayout(function () {
|
|
10
|
-
if (localRef.current) {
|
|
11
|
-
var styles = getComputedStyle(localRef.current);
|
|
12
|
-
model.events.addItemWidth({
|
|
13
|
-
id: name,
|
|
14
|
-
width: localRef.current.offsetWidth +
|
|
15
|
-
parseFloat(styles.marginLeft) +
|
|
16
|
-
parseFloat(styles.marginRight),
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
return function () {
|
|
20
|
-
model.events.removeItemWidth({ id: name });
|
|
21
|
-
};
|
|
22
|
-
});
|
|
23
7
|
var selected = !!name && isSelected(name, model.state);
|
|
24
|
-
var longest = Object.keys(model.state.itemWidthCache)
|
|
25
|
-
.map(function (e) { return model.state.itemWidthCache[e]; })
|
|
26
|
-
.sort(function (a, b) { return (a < b ? 1 : -1); })[0];
|
|
27
8
|
return {
|
|
28
|
-
|
|
29
|
-
id: id,
|
|
9
|
+
id: model.state.id + "-" + name,
|
|
30
10
|
'aria-pressed': selected,
|
|
31
|
-
disabled: model.state.disabled || undefined,
|
|
32
|
-
width: elemProps.children && longest + "px",
|
|
33
11
|
};
|
|
34
|
-
}), useListItemRegister, createElemPropsHook(useSegmentedControlModel)(function (_a
|
|
12
|
+
}), useListItemRegister, createElemPropsHook(useSegmentedControlModel)(function (_a) {
|
|
35
13
|
var state = _a.state;
|
|
36
|
-
if (elemProps === void 0) { elemProps = {}; }
|
|
37
14
|
return {
|
|
38
15
|
// override the default disabled functionality of `useListItemRegister`
|
|
39
|
-
|
|
16
|
+
// it shouldn't allow to set disabled state only for one button
|
|
17
|
+
// state prop will disable the whole container
|
|
18
|
+
disabled: state.disabled ? true : undefined,
|
|
40
19
|
};
|
|
41
20
|
}));
|