@workday/canvas-kit-react 8.0.0-alpha.245-next.15 → 8.0.0-alpha.247-next.17
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/common/index.ts +1 -0
- package/common/lib/responsive/useResponsiveContainerStyles.ts +128 -0
- package/common/lib/utils/isWithinBreakpoint.ts +6 -0
- package/common/lib/utils/models.ts +2 -2
- package/dist/commonjs/common/index.d.ts +1 -0
- package/dist/commonjs/common/index.d.ts.map +1 -1
- package/dist/commonjs/common/index.js +1 -0
- package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.d.ts +78 -0
- package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.d.ts.map +1 -0
- package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.js +139 -0
- package/dist/commonjs/common/lib/utils/isWithinBreakpoint.d.ts +5 -0
- package/dist/commonjs/common/lib/utils/isWithinBreakpoint.d.ts.map +1 -0
- package/dist/commonjs/common/lib/utils/isWithinBreakpoint.js +10 -0
- package/dist/commonjs/common/lib/utils/models.d.ts +2 -2
- package/dist/commonjs/common/lib/utils/models.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/Flex.d.ts +2 -2
- package/dist/commonjs/layout/lib/Flex.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/Grid.d.ts +2 -2
- package/dist/commonjs/layout/lib/Grid.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/Stack.d.ts +1 -1
- package/dist/commonjs/layout/lib/utils/flex.d.ts +2 -2
- package/dist/commonjs/layout/lib/utils/flex.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/utils/grid.d.ts +2 -2
- package/dist/commonjs/layout/lib/utils/grid.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/Tabs.d.ts +1149 -1
- package/dist/commonjs/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts +2773 -469
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/es6/common/index.d.ts +1 -0
- package/dist/es6/common/index.d.ts.map +1 -1
- package/dist/es6/common/index.js +1 -0
- package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.d.ts +78 -0
- package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.d.ts.map +1 -0
- package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.js +135 -0
- package/dist/es6/common/lib/utils/isWithinBreakpoint.d.ts +5 -0
- package/dist/es6/common/lib/utils/isWithinBreakpoint.d.ts.map +1 -0
- package/dist/es6/common/lib/utils/isWithinBreakpoint.js +6 -0
- package/dist/es6/common/lib/utils/models.d.ts +2 -2
- package/dist/es6/common/lib/utils/models.d.ts.map +1 -1
- package/dist/es6/layout/lib/Flex.d.ts +2 -2
- package/dist/es6/layout/lib/Flex.d.ts.map +1 -1
- package/dist/es6/layout/lib/Grid.d.ts +2 -2
- package/dist/es6/layout/lib/Grid.d.ts.map +1 -1
- package/dist/es6/layout/lib/Stack.d.ts +1 -1
- package/dist/es6/layout/lib/utils/flex.d.ts +2 -2
- package/dist/es6/layout/lib/utils/flex.d.ts.map +1 -1
- package/dist/es6/layout/lib/utils/grid.d.ts +2 -2
- package/dist/es6/layout/lib/utils/grid.d.ts.map +1 -1
- package/dist/es6/tabs/lib/Tabs.d.ts +1149 -1
- package/dist/es6/tabs/lib/Tabs.d.ts.map +1 -1
- package/dist/es6/tabs/lib/useTabsModel.d.ts +2773 -469
- package/dist/es6/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/layout/lib/Flex.tsx +1 -1
- package/layout/lib/Grid.tsx +1 -1
- package/layout/lib/utils/flex.ts +2 -2
- package/layout/lib/utils/grid.ts +2 -2
- package/package.json +3 -3
- package/tabs/lib/useTabsModel.tsx +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG
|
|
1
|
+
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;qCA8DH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAFH;;OAEG;;;;;;;;;;;QA1BH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}
|
package/dist/es6/common/index.js
CHANGED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { breakpointKeys } from "@workday/canvas-kit-react/common";
|
|
2
|
+
import type { AllStyleProps } from "@workday/canvas-kit-react/layout";
|
|
3
|
+
export declare type BreakpointKeys = typeof breakpointKeys[number];
|
|
4
|
+
declare type ResponsiveCSSObject<T> = {
|
|
5
|
+
[P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> & AllStyleProps;
|
|
6
|
+
};
|
|
7
|
+
declare type CSSObject<T> = {
|
|
8
|
+
[P in keyof T]: AllStyleProps;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* useResponsiveContainerStyles
|
|
12
|
+
*
|
|
13
|
+
* ---
|
|
14
|
+
*
|
|
15
|
+
* This hook allows you to create container-based responsive styles with objects.
|
|
16
|
+
* It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
|
|
17
|
+
* Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
|
|
18
|
+
* The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
import {Flex, Box} from '@workday/canvas-kit-react/layout';
|
|
23
|
+
import {
|
|
24
|
+
useResponsiveStyles,
|
|
25
|
+
} from '@workday/canvas-kit-react/common';
|
|
26
|
+
|
|
27
|
+
const ref = React.useRef(null);
|
|
28
|
+
const [containerWidth, setContainerWidth] = React.useState(0);
|
|
29
|
+
|
|
30
|
+
useResizeObserver({
|
|
31
|
+
ref: ref,
|
|
32
|
+
onResize: data => {
|
|
33
|
+
setWidth(data.width || 0);
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
const containerResponsiveStyles = useResponsiveStyles(
|
|
38
|
+
{
|
|
39
|
+
flex: {
|
|
40
|
+
flexDirection: 'column',
|
|
41
|
+
padding: 'm',
|
|
42
|
+
depth: 1,
|
|
43
|
+
borderRadius: 'l',
|
|
44
|
+
zero: {
|
|
45
|
+
backgroundColor: 'Red',
|
|
46
|
+
},
|
|
47
|
+
s: {
|
|
48
|
+
backgroundColor: 'Orange',
|
|
49
|
+
},
|
|
50
|
+
m: {
|
|
51
|
+
backgroundColor: 'Yellow',
|
|
52
|
+
},
|
|
53
|
+
l: {
|
|
54
|
+
backgroundColor: 'Green',
|
|
55
|
+
},
|
|
56
|
+
xl: {
|
|
57
|
+
backgroundColor: 'Blue',
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
box: {
|
|
61
|
+
padding: 's',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
containerWidth
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
return (
|
|
68
|
+
<Box ref={ref}>
|
|
69
|
+
<Flex {...containerResponsiveStyles.flex}>
|
|
70
|
+
<Box {...containerResponsiveStyles.box}>Hello World</Box>
|
|
71
|
+
</Flex>
|
|
72
|
+
</Box>
|
|
73
|
+
);
|
|
74
|
+
```
|
|
75
|
+
*/
|
|
76
|
+
export declare function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(styles: ResponsiveCSSObject<T>, width: number, theme?: {}): CSSObject<T>;
|
|
77
|
+
export {};
|
|
78
|
+
//# sourceMappingURL=useResponsiveContainerStyles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useResponsiveContainerStyles.d.ts","sourceRoot":"","sources":["../../../../../common/lib/responsive/useResponsiveContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAqB,MAAM,kCAAkC,CAAC;AAC/F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGpE,oBAAY,cAAc,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAE3D,aAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,GAC5D,aAAa;CAChB,CAAC;AACF,aAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa;CAC9B,CAAC;AAsCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAC3E,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,KAAK,KAAK,gBAOX"}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
24
|
+
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
25
|
+
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
26
|
+
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
27
|
+
r[k] = a[j];
|
|
28
|
+
return r;
|
|
29
|
+
};
|
|
30
|
+
import { useTheme, breakpointKeys } from "@workday/canvas-kit-react/common";
|
|
31
|
+
import { isWithinBreakpoint } from '../utils/isWithinBreakpoint';
|
|
32
|
+
// Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
|
|
33
|
+
var getSize = function (width, breakpoints) {
|
|
34
|
+
var ranges = {
|
|
35
|
+
'zero': [0, breakpoints.s],
|
|
36
|
+
's': [breakpoints.s, breakpoints.m],
|
|
37
|
+
'm': [breakpoints.m, breakpoints.l],
|
|
38
|
+
'l': [breakpoints.l, breakpoints.xl],
|
|
39
|
+
'xl': [breakpoints.xl]
|
|
40
|
+
};
|
|
41
|
+
return breakpointKeys.find(function (size) { return isWithinBreakpoint.apply(void 0, __spreadArrays([width], ranges[size])); }) || 'zero';
|
|
42
|
+
};
|
|
43
|
+
// Returns responsive style objects that are within the current CanvasBreakpoint size
|
|
44
|
+
function getStyles(key, styles) {
|
|
45
|
+
var responsiveStyles = {};
|
|
46
|
+
var breakpointSize = breakpointKeys.indexOf(key);
|
|
47
|
+
var _loop_1 = function (i) {
|
|
48
|
+
var breakpointName = breakpointKeys[i];
|
|
49
|
+
// property is key of the style object
|
|
50
|
+
Object.keys(styles).forEach(function (property) {
|
|
51
|
+
var _a, _b;
|
|
52
|
+
var _c = styles[property], zero = _c.zero, s = _c.s, m = _c.m, l = _c.l, xl = _c.xl, base = __rest(_c, ["zero", "s", "m", "l", "xl"]);
|
|
53
|
+
var currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
|
|
54
|
+
var previousBreakpointStyles = (_b = responsiveStyles[property]) !== null && _b !== void 0 ? _b : {};
|
|
55
|
+
responsiveStyles[property] = __assign(__assign(__assign({}, base), previousBreakpointStyles), currentBreakpointStyles);
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
for (var i = 0; i <= breakpointSize; i++) {
|
|
59
|
+
_loop_1(i);
|
|
60
|
+
}
|
|
61
|
+
return responsiveStyles;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* useResponsiveContainerStyles
|
|
65
|
+
*
|
|
66
|
+
* ---
|
|
67
|
+
*
|
|
68
|
+
* This hook allows you to create container-based responsive styles with objects.
|
|
69
|
+
* It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
|
|
70
|
+
* Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
|
|
71
|
+
* The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```tsx
|
|
75
|
+
import {Flex, Box} from '@workday/canvas-kit-react/layout';
|
|
76
|
+
import {
|
|
77
|
+
useResponsiveStyles,
|
|
78
|
+
} from '@workday/canvas-kit-react/common';
|
|
79
|
+
|
|
80
|
+
const ref = React.useRef(null);
|
|
81
|
+
const [containerWidth, setContainerWidth] = React.useState(0);
|
|
82
|
+
|
|
83
|
+
useResizeObserver({
|
|
84
|
+
ref: ref,
|
|
85
|
+
onResize: data => {
|
|
86
|
+
setWidth(data.width || 0);
|
|
87
|
+
},
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
const containerResponsiveStyles = useResponsiveStyles(
|
|
91
|
+
{
|
|
92
|
+
flex: {
|
|
93
|
+
flexDirection: 'column',
|
|
94
|
+
padding: 'm',
|
|
95
|
+
depth: 1,
|
|
96
|
+
borderRadius: 'l',
|
|
97
|
+
zero: {
|
|
98
|
+
backgroundColor: 'Red',
|
|
99
|
+
},
|
|
100
|
+
s: {
|
|
101
|
+
backgroundColor: 'Orange',
|
|
102
|
+
},
|
|
103
|
+
m: {
|
|
104
|
+
backgroundColor: 'Yellow',
|
|
105
|
+
},
|
|
106
|
+
l: {
|
|
107
|
+
backgroundColor: 'Green',
|
|
108
|
+
},
|
|
109
|
+
xl: {
|
|
110
|
+
backgroundColor: 'Blue',
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
box: {
|
|
114
|
+
padding: 's',
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
containerWidth
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<Box ref={ref}>
|
|
122
|
+
<Flex {...containerResponsiveStyles.flex}>
|
|
123
|
+
<Box {...containerResponsiveStyles.box}>Hello World</Box>
|
|
124
|
+
</Flex>
|
|
125
|
+
</Box>
|
|
126
|
+
);
|
|
127
|
+
```
|
|
128
|
+
*/
|
|
129
|
+
export function useResponsiveContainerStyles(styles, width, theme) {
|
|
130
|
+
if (theme === void 0) { theme = {}; }
|
|
131
|
+
var canvasTheme = useTheme(theme);
|
|
132
|
+
var breakpoints = canvasTheme.canvas.breakpoints.values;
|
|
133
|
+
var size = getSize(width, breakpoints);
|
|
134
|
+
return getStyles(size, styles);
|
|
135
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isWithinBreakpoint.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/isWithinBreakpoint.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,0CAE5D,CAAC"}
|
|
@@ -119,7 +119,7 @@ export declare type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents
|
|
|
119
119
|
/**
|
|
120
120
|
* This is only a type and not a value. If you want to
|
|
121
121
|
*/
|
|
122
|
-
TConfig: TDefaultConfig & TRequiredConfig
|
|
122
|
+
TConfig: Partial<TDefaultConfig> & TRequiredConfig & ToEventConfig<TState, TEvents>;
|
|
123
123
|
/**
|
|
124
124
|
* The context of the model. This can be used directly, but is mostly used internally by
|
|
125
125
|
* `createContainer` or `createSubcomponent` to handle model context automatically.
|
|
@@ -154,7 +154,7 @@ export declare type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents
|
|
|
154
154
|
* })
|
|
155
155
|
* ```
|
|
156
156
|
*/
|
|
157
|
-
mergeConfig: (source: TDefaultConfig & TRequiredConfig, target: Partial<TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>>) => TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>;
|
|
157
|
+
mergeConfig: (source: Partial<TDefaultConfig> & TRequiredConfig, target: Partial<TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>>) => TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>;
|
|
158
158
|
};
|
|
159
159
|
/**
|
|
160
160
|
* Generic type for all models. It makes `defaultConfig` have optional keys and adds `getElemProps`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/models.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/models.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BoxProps } from './Box';
|
|
2
2
|
import { FlexStyleProps } from './utils/flex';
|
|
3
|
-
export declare type FlexProps = BoxProps & FlexStyleProps;
|
|
3
|
+
export declare type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
|
|
4
4
|
/**
|
|
5
5
|
* `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
|
|
6
6
|
* It is highly flexible, and can be used on its own or to build other components.
|
|
@@ -23,7 +23,7 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
|
|
|
23
23
|
* );
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
|
-
export declare const Flex: import("../../common").ElementComponent<"div",
|
|
26
|
+
export declare const Flex: import("../../common").ElementComponent<"div", FlexProps> & {
|
|
27
27
|
Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
|
|
28
28
|
};
|
|
29
29
|
//# sourceMappingURL=Flex.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AASnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;;CAYf,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BoxProps } from './Box';
|
|
2
2
|
import { GridStyleProps } from './utils/grid';
|
|
3
|
-
export declare type GridProps = BoxProps & GridStyleProps;
|
|
3
|
+
export declare type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
|
|
4
4
|
export declare type GridItemProps = BoxProps;
|
|
5
5
|
/**
|
|
6
6
|
* `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
|
|
@@ -24,7 +24,7 @@ export declare type GridItemProps = BoxProps;
|
|
|
24
24
|
* );
|
|
25
25
|
*```
|
|
26
26
|
*/
|
|
27
|
-
export declare const Grid: import("../../common").ElementComponent<"div",
|
|
27
|
+
export declare const Grid: import("../../common").ElementComponent<"div", GridProps> & {
|
|
28
28
|
/**
|
|
29
29
|
* `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
|
|
30
30
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AACnE,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FlexProps } from './Flex';
|
|
2
2
|
import { StackStyleProps } from './utils/stack';
|
|
3
3
|
export declare type StackProps = FlexProps & StackStyleProps;
|
|
4
|
-
export declare const Stack: import("../../common").ElementComponent<"div",
|
|
4
|
+
export declare const Stack: import("../../common").ElementComponent<"div", StackProps> & {
|
|
5
5
|
Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
|
|
6
6
|
};
|
|
7
7
|
export interface HStackProps extends StackProps {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Property } from 'csstype';
|
|
1
|
+
import { Property, Globals } from 'csstype';
|
|
2
2
|
import { StyleFnConfig } from './buildStyleFns';
|
|
3
3
|
import { SystemPropValues } from './systemProps';
|
|
4
4
|
/** style props to for CSS flexbox container properties */
|
|
@@ -11,7 +11,7 @@ export declare type FlexStyleProps = {
|
|
|
11
11
|
* - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
|
|
12
12
|
* - @default 'flex'
|
|
13
13
|
* */
|
|
14
|
-
display?: 'flex' | 'inline-flex';
|
|
14
|
+
display?: 'flex' | 'inline-flex' | 'none' | Globals | (string & {});
|
|
15
15
|
/** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
|
|
16
16
|
justifyItems?: Property.JustifyItems;
|
|
17
17
|
/** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,0DAA0D;AAC1D,oBAAY,cAAc,GAAG;IAC3B,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpE,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC;;;SAGK;IACL,GAAG,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAChC;;;SAGK;IACL,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC;;;SAGK;IACL,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAmD7C,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Property } from 'csstype';
|
|
1
|
+
import { Property, Globals } from 'csstype';
|
|
2
2
|
import { StyleFnConfig } from './buildStyleFns';
|
|
3
3
|
import { SystemPropValues } from './systemProps';
|
|
4
4
|
/** style props to for CSS grid container properties */
|
|
@@ -11,7 +11,7 @@ export declare type GridStyleProps = {
|
|
|
11
11
|
* - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
|
|
12
12
|
* - @default 'grid'
|
|
13
13
|
* */
|
|
14
|
-
display?: 'grid' | 'inline-grid';
|
|
14
|
+
display?: 'grid' | 'inline-grid' | 'none' | Globals | (string & {});
|
|
15
15
|
/** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
|
|
16
16
|
justifyItems?: Property.JustifyItems;
|
|
17
17
|
/** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,uDAAuD;AACvD,oBAAY,cAAc,GAAG;IAC3B,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpE,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,oHAAoH;IACpH,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IAC/C,wHAAwH;IACxH,mBAAmB,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC;IACnD,kHAAkH;IAClH,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnE;;;SAGK;IACL,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7D;;;SAGK;IACL,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvD,oGAAoG;IACpG,cAAc,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACrC,gHAAgH;IAChH,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,0GAA0G;IAC1G,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,0GAA0G;IAC1G,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sFAAsF;IACtF,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EA2F7C,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}
|