@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.79-next.7
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/combobox/README.md +1 -1
- package/combobox/lib/Combobox.tsx +7 -11
- package/common/index.ts +0 -8
- package/dist/commonjs/combobox/lib/Combobox.d.ts +3 -4
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Combobox.js +4 -7
- package/dist/commonjs/common/index.d.ts +0 -8
- package/dist/commonjs/common/index.d.ts.map +1 -1
- package/dist/commonjs/common/index.js +0 -1
- package/dist/commonjs/drawer/lib/DrawerHeader.js +2 -2
- package/dist/commonjs/index.d.ts +0 -1
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +0 -1
- package/dist/commonjs/search-form/lib/SearchForm.d.ts +7 -2
- package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/commonjs/search-form/lib/SearchForm.js +16 -22
- package/dist/es6/combobox/lib/Combobox.d.ts +3 -4
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.js +5 -8
- package/dist/es6/common/index.d.ts +0 -8
- package/dist/es6/common/index.d.ts.map +1 -1
- package/dist/es6/common/index.js +0 -1
- package/dist/es6/drawer/lib/DrawerHeader.js +3 -3
- package/dist/es6/index.d.ts +0 -1
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +0 -1
- package/dist/es6/search-form/lib/SearchForm.d.ts +7 -2
- package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/es6/search-form/lib/SearchForm.js +17 -23
- package/drawer/lib/DrawerHeader.tsx +3 -3
- package/index.ts +0 -1
- package/package.json +4 -6
- package/search-form/lib/SearchForm.tsx +25 -37
- package/ts3.5/dist/commonjs/combobox/lib/Combobox.d.ts +3 -4
- package/ts3.5/dist/commonjs/common/index.d.ts +0 -8
- package/ts3.5/dist/commonjs/index.d.ts +0 -1
- package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts +7 -2
- package/ts3.5/dist/es6/combobox/lib/Combobox.d.ts +3 -4
- package/ts3.5/dist/es6/common/index.d.ts +0 -8
- package/ts3.5/dist/es6/index.d.ts +0 -1
- package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts +7 -2
- package/common/lib/Box.tsx +0 -92
- package/common/lib/utils/border.ts +0 -263
- package/common/lib/utils/color.ts +0 -62
- package/common/lib/utils/depth.ts +0 -37
- package/common/lib/utils/flexItem.ts +0 -56
- package/common/lib/utils/layout.ts +0 -77
- package/common/lib/utils/other.ts +0 -20
- package/common/lib/utils/position.ts +0 -96
- package/common/lib/utils/space.ts +0 -207
- package/common/lib/utils/types.ts +0 -105
- package/dist/commonjs/common/lib/Box.d.ts +0 -31
- package/dist/commonjs/common/lib/Box.d.ts.map +0 -1
- package/dist/commonjs/common/lib/Box.js +0 -99
- package/dist/commonjs/common/lib/utils/border.d.ts +0 -103
- package/dist/commonjs/common/lib/utils/border.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/border.js +0 -153
- package/dist/commonjs/common/lib/utils/color.d.ts +0 -26
- package/dist/commonjs/common/lib/utils/color.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/color.js +0 -57
- package/dist/commonjs/common/lib/utils/depth.d.ts +0 -22
- package/dist/commonjs/common/lib/utils/depth.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/depth.js +0 -29
- package/dist/commonjs/common/lib/utils/flexItem.d.ts +0 -33
- package/dist/commonjs/common/lib/utils/flexItem.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/flexItem.js +0 -39
- package/dist/commonjs/common/lib/utils/layout.d.ts +0 -43
- package/dist/commonjs/common/lib/utils/layout.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/layout.js +0 -43
- package/dist/commonjs/common/lib/utils/other.d.ts +0 -5
- package/dist/commonjs/common/lib/utils/other.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/other.js +0 -19
- package/dist/commonjs/common/lib/utils/position.d.ts +0 -41
- package/dist/commonjs/common/lib/utils/position.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/position.js +0 -78
- package/dist/commonjs/common/lib/utils/space.d.ts +0 -64
- package/dist/commonjs/common/lib/utils/space.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/space.js +0 -161
- package/dist/commonjs/common/lib/utils/types.d.ts +0 -14
- package/dist/commonjs/common/lib/utils/types.d.ts.map +0 -1
- package/dist/commonjs/common/lib/utils/types.js +0 -2
- package/dist/commonjs/layout/index.d.ts +0 -5
- package/dist/commonjs/layout/index.d.ts.map +0 -1
- package/dist/commonjs/layout/index.js +0 -14
- package/dist/commonjs/layout/lib/Flex.d.ts +0 -26
- package/dist/commonjs/layout/lib/Flex.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/Flex.js +0 -83
- package/dist/commonjs/layout/lib/Stack.d.ts +0 -27
- package/dist/commonjs/layout/lib/Stack.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/Stack.js +0 -99
- package/dist/commonjs/layout/lib/utils/flex.d.ts +0 -36
- package/dist/commonjs/layout/lib/utils/flex.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/utils/flex.js +0 -38
- package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +0 -3
- package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/utils/getValidChildren.js +0 -29
- package/dist/commonjs/layout/lib/utils/stack.d.ts +0 -26
- package/dist/commonjs/layout/lib/utils/stack.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/utils/stack.js +0 -55
- package/dist/commonjs/layout/lib/utils/types.d.ts +0 -8
- package/dist/commonjs/layout/lib/utils/types.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/utils/types.js +0 -2
- package/dist/es6/common/lib/Box.d.ts +0 -31
- package/dist/es6/common/lib/Box.d.ts.map +0 -1
- package/dist/es6/common/lib/Box.js +0 -74
- package/dist/es6/common/lib/utils/border.d.ts +0 -103
- package/dist/es6/common/lib/utils/border.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/border.js +0 -149
- package/dist/es6/common/lib/utils/color.d.ts +0 -26
- package/dist/es6/common/lib/utils/color.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/color.js +0 -53
- package/dist/es6/common/lib/utils/depth.d.ts +0 -22
- package/dist/es6/common/lib/utils/depth.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/depth.js +0 -25
- package/dist/es6/common/lib/utils/flexItem.d.ts +0 -33
- package/dist/es6/common/lib/utils/flexItem.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/flexItem.js +0 -35
- package/dist/es6/common/lib/utils/layout.d.ts +0 -43
- package/dist/es6/common/lib/utils/layout.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/layout.js +0 -39
- package/dist/es6/common/lib/utils/other.d.ts +0 -5
- package/dist/es6/common/lib/utils/other.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/other.js +0 -15
- package/dist/es6/common/lib/utils/position.d.ts +0 -41
- package/dist/es6/common/lib/utils/position.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/position.js +0 -74
- package/dist/es6/common/lib/utils/space.d.ts +0 -64
- package/dist/es6/common/lib/utils/space.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/space.js +0 -157
- package/dist/es6/common/lib/utils/types.d.ts +0 -14
- package/dist/es6/common/lib/utils/types.d.ts.map +0 -1
- package/dist/es6/common/lib/utils/types.js +0 -1
- package/dist/es6/layout/index.d.ts +0 -5
- package/dist/es6/layout/index.d.ts.map +0 -1
- package/dist/es6/layout/index.js +0 -2
- package/dist/es6/layout/lib/Flex.d.ts +0 -26
- package/dist/es6/layout/lib/Flex.d.ts.map +0 -1
- package/dist/es6/layout/lib/Flex.js +0 -58
- package/dist/es6/layout/lib/Stack.d.ts +0 -27
- package/dist/es6/layout/lib/Stack.d.ts.map +0 -1
- package/dist/es6/layout/lib/Stack.js +0 -74
- package/dist/es6/layout/lib/utils/flex.d.ts +0 -36
- package/dist/es6/layout/lib/utils/flex.d.ts.map +0 -1
- package/dist/es6/layout/lib/utils/flex.js +0 -34
- package/dist/es6/layout/lib/utils/getValidChildren.d.ts +0 -3
- package/dist/es6/layout/lib/utils/getValidChildren.d.ts.map +0 -1
- package/dist/es6/layout/lib/utils/getValidChildren.js +0 -6
- package/dist/es6/layout/lib/utils/stack.d.ts +0 -26
- package/dist/es6/layout/lib/utils/stack.d.ts.map +0 -1
- package/dist/es6/layout/lib/utils/stack.js +0 -51
- package/dist/es6/layout/lib/utils/types.d.ts +0 -8
- package/dist/es6/layout/lib/utils/types.d.ts.map +0 -1
- package/dist/es6/layout/lib/utils/types.js +0 -1
- package/layout/LICENSE +0 -52
- package/layout/README.md +0 -16
- package/layout/index.ts +0 -4
- package/layout/lib/Flex.tsx +0 -47
- package/layout/lib/Stack.tsx +0 -95
- package/layout/lib/utils/flex.ts +0 -65
- package/layout/lib/utils/getValidChildren.ts +0 -7
- package/layout/lib/utils/stack.ts +0 -78
- package/layout/lib/utils/types.ts +0 -45
- package/layout/package.json +0 -5
- package/ts3.5/dist/commonjs/common/lib/Box.d.ts +0 -31
- package/ts3.5/dist/commonjs/common/lib/utils/border.d.ts +0 -103
- package/ts3.5/dist/commonjs/common/lib/utils/color.d.ts +0 -26
- package/ts3.5/dist/commonjs/common/lib/utils/depth.d.ts +0 -22
- package/ts3.5/dist/commonjs/common/lib/utils/flexItem.d.ts +0 -33
- package/ts3.5/dist/commonjs/common/lib/utils/layout.d.ts +0 -43
- package/ts3.5/dist/commonjs/common/lib/utils/other.d.ts +0 -5
- package/ts3.5/dist/commonjs/common/lib/utils/position.d.ts +0 -41
- package/ts3.5/dist/commonjs/common/lib/utils/space.d.ts +0 -64
- package/ts3.5/dist/commonjs/common/lib/utils/types.d.ts +0 -14
- package/ts3.5/dist/commonjs/layout/index.d.ts +0 -5
- package/ts3.5/dist/commonjs/layout/lib/Flex.d.ts +0 -26
- package/ts3.5/dist/commonjs/layout/lib/Stack.d.ts +0 -27
- package/ts3.5/dist/commonjs/layout/lib/utils/flex.d.ts +0 -36
- package/ts3.5/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +0 -3
- package/ts3.5/dist/commonjs/layout/lib/utils/stack.d.ts +0 -26
- package/ts3.5/dist/commonjs/layout/lib/utils/types.d.ts +0 -8
- package/ts3.5/dist/es6/common/lib/Box.d.ts +0 -31
- package/ts3.5/dist/es6/common/lib/utils/border.d.ts +0 -103
- package/ts3.5/dist/es6/common/lib/utils/color.d.ts +0 -26
- package/ts3.5/dist/es6/common/lib/utils/depth.d.ts +0 -22
- package/ts3.5/dist/es6/common/lib/utils/flexItem.d.ts +0 -33
- package/ts3.5/dist/es6/common/lib/utils/layout.d.ts +0 -43
- package/ts3.5/dist/es6/common/lib/utils/other.d.ts +0 -5
- package/ts3.5/dist/es6/common/lib/utils/position.d.ts +0 -41
- package/ts3.5/dist/es6/common/lib/utils/space.d.ts +0 -64
- package/ts3.5/dist/es6/common/lib/utils/types.d.ts +0 -14
- package/ts3.5/dist/es6/layout/index.d.ts +0 -5
- package/ts3.5/dist/es6/layout/lib/Flex.d.ts +0 -26
- package/ts3.5/dist/es6/layout/lib/Stack.d.ts +0 -27
- package/ts3.5/dist/es6/layout/lib/utils/flex.d.ts +0 -36
- package/ts3.5/dist/es6/layout/lib/utils/getValidChildren.d.ts +0 -3
- package/ts3.5/dist/es6/layout/lib/utils/stack.d.ts +0 -26
- package/ts3.5/dist/es6/layout/lib/utils/types.d.ts +0 -8
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.border = void 0;
|
|
4
|
-
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
5
|
-
var common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
-
// border logical prop handlers
|
|
7
|
-
var borderInlineStart = function (isRTL) { return (isRTL ? 'borderRight' : 'borderLeft'); };
|
|
8
|
-
var borderInlineEnd = function (isRTL) { return (isRTL ? 'borderLeft' : 'borderRight'); };
|
|
9
|
-
var borderInlineStartColor = function (isRTL) { return (isRTL ? 'borderRightColor' : 'borderLeftColor'); };
|
|
10
|
-
var borderInlineEndColor = function (isRTL) { return (isRTL ? 'borderLeftColor' : 'borderRightColor'); };
|
|
11
|
-
var borderInlineStartStyle = function (isRTL) { return (isRTL ? 'borderRightStyle' : 'borderLeftStyle'); };
|
|
12
|
-
var borderInlineEndStyle = function (isRTL) { return (isRTL ? 'borderLeftStyle' : 'borderRightStyle'); };
|
|
13
|
-
var borderInlineStartWidth = function (isRTL) { return (isRTL ? 'borderRightWidth' : 'borderLeftWidth'); };
|
|
14
|
-
var borderInlineEndWidth = function (isRTL) { return (isRTL ? 'borderLeftWidth' : 'borderRightWidth'); };
|
|
15
|
-
var borderShorthandProps = {
|
|
16
|
-
border: 'border',
|
|
17
|
-
borderTop: 'borderTop',
|
|
18
|
-
borderRight: 'borderRight',
|
|
19
|
-
borderBottom: 'borderBottom',
|
|
20
|
-
borderLeft: 'borderLeft',
|
|
21
|
-
borderInlineStart: borderInlineStart,
|
|
22
|
-
borderInlineEnd: borderInlineEnd,
|
|
23
|
-
};
|
|
24
|
-
var borderColors = {
|
|
25
|
-
borderColor: 'borderColor',
|
|
26
|
-
borderTopColor: 'borderTopColor',
|
|
27
|
-
borderRightColor: 'borderRightColor',
|
|
28
|
-
borderBottomColor: 'borderBottomColor',
|
|
29
|
-
borderLeftColor: 'borderLeftColor',
|
|
30
|
-
borderInlineStartColor: borderInlineStartColor,
|
|
31
|
-
borderInlineEndColor: borderInlineEndColor,
|
|
32
|
-
};
|
|
33
|
-
var borderRadii = {
|
|
34
|
-
borderRadius: 'borderRadius',
|
|
35
|
-
borderTopLeftRadius: 'borderTopLeftRadius',
|
|
36
|
-
borderTopRightRadius: 'borderTopRightRadius',
|
|
37
|
-
borderBottomLeftRadius: 'borderBottomLeftRadius',
|
|
38
|
-
borderBottomRightRadius: 'borderBottomRightRadius',
|
|
39
|
-
};
|
|
40
|
-
var borderStyles = {
|
|
41
|
-
borderStyle: 'borderStyle',
|
|
42
|
-
borderTopStyle: 'borderTopStyle',
|
|
43
|
-
borderRightStyle: 'borderRightStyle',
|
|
44
|
-
borderBottomStyle: 'borderBottomStyle',
|
|
45
|
-
borderLeftStyle: 'borderLeftStyle',
|
|
46
|
-
borderInlineStartStyle: borderInlineStartStyle,
|
|
47
|
-
borderInlineEndStyle: borderInlineEndStyle,
|
|
48
|
-
};
|
|
49
|
-
var borderWidths = {
|
|
50
|
-
borderWidth: 'borderWidth',
|
|
51
|
-
borderTopWidth: 'borderTopWidth',
|
|
52
|
-
borderRightWidth: 'borderRightWidth',
|
|
53
|
-
borderBottomWidth: 'borderBottomWidth',
|
|
54
|
-
borderLeftWidth: 'borderLeftWidth',
|
|
55
|
-
borderInlineStartWidth: borderInlineStartWidth,
|
|
56
|
-
borderInlineEndWidth: borderInlineEndWidth,
|
|
57
|
-
};
|
|
58
|
-
/**
|
|
59
|
-
* A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
|
|
60
|
-
* If no `BorderStyleProps` are found, it returns an empty object.
|
|
61
|
-
*
|
|
62
|
-
* @example
|
|
63
|
-
* // You'll most likely use `border` with low-level, styled components
|
|
64
|
-
* const BoxExample = () => (
|
|
65
|
-
* <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
|
|
66
|
-
* );
|
|
67
|
-
*
|
|
68
|
-
*/
|
|
69
|
-
function border(props) {
|
|
70
|
-
// border will always be used within the context of a component, but eslint doesn't know that
|
|
71
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
72
|
-
var canvas = common_1.useTheme(props.theme).canvas;
|
|
73
|
-
var isRTL = canvas.direction === common_1.ContentDirection.RTL;
|
|
74
|
-
var styles = {};
|
|
75
|
-
for (var key in props) {
|
|
76
|
-
if (props.hasOwnProperty(key)) {
|
|
77
|
-
if (key in borderShorthandProps) {
|
|
78
|
-
var value = props[key];
|
|
79
|
-
var attr = void 0;
|
|
80
|
-
if (key === 'borderInlineStart') {
|
|
81
|
-
attr = borderInlineStart(isRTL);
|
|
82
|
-
}
|
|
83
|
-
else if (key === 'borderInlineEnd') {
|
|
84
|
-
attr = borderInlineEnd(isRTL);
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
attr = borderShorthandProps[key];
|
|
88
|
-
}
|
|
89
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
90
|
-
styles[attr] = value;
|
|
91
|
-
continue;
|
|
92
|
-
}
|
|
93
|
-
if (key in borderColors) {
|
|
94
|
-
var propValue = props[key];
|
|
95
|
-
var value = tokens_1.colors[propValue] || propValue;
|
|
96
|
-
var attr = void 0;
|
|
97
|
-
if (key === 'borderInlineStartColor') {
|
|
98
|
-
attr = borderInlineStartColor(isRTL);
|
|
99
|
-
}
|
|
100
|
-
else if (key === 'borderInlineEndColor') {
|
|
101
|
-
attr = borderInlineEndColor(isRTL);
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
attr = borderColors[key];
|
|
105
|
-
}
|
|
106
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
107
|
-
styles[attr] = value;
|
|
108
|
-
continue;
|
|
109
|
-
}
|
|
110
|
-
if (key in borderRadii) {
|
|
111
|
-
var propValue = props[key];
|
|
112
|
-
var value = tokens_1.borderRadius[propValue] || propValue;
|
|
113
|
-
var attr = borderRadii[key];
|
|
114
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
115
|
-
styles[attr] = value;
|
|
116
|
-
continue;
|
|
117
|
-
}
|
|
118
|
-
if (key in borderStyles) {
|
|
119
|
-
var value = props[key];
|
|
120
|
-
var attr = void 0;
|
|
121
|
-
if (key === 'borderInlineStartStyle') {
|
|
122
|
-
attr = borderInlineStartStyle(isRTL);
|
|
123
|
-
}
|
|
124
|
-
else if (key === 'borderInlineEndStyle') {
|
|
125
|
-
attr = borderInlineEndStyle(isRTL);
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
attr = borderStyles[key];
|
|
129
|
-
}
|
|
130
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
131
|
-
styles[attr] = value;
|
|
132
|
-
continue;
|
|
133
|
-
}
|
|
134
|
-
if (key in borderWidths) {
|
|
135
|
-
var value = props[key];
|
|
136
|
-
var attr = void 0;
|
|
137
|
-
if (key === 'borderInlineStartWidth') {
|
|
138
|
-
attr = borderInlineStartWidth(isRTL);
|
|
139
|
-
}
|
|
140
|
-
else if (key === 'borderInlineEndWidth') {
|
|
141
|
-
attr = borderInlineEndWidth(isRTL);
|
|
142
|
-
}
|
|
143
|
-
else {
|
|
144
|
-
attr = borderWidths[key];
|
|
145
|
-
}
|
|
146
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
147
|
-
styles[attr] = value;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
return styles;
|
|
152
|
-
}
|
|
153
|
-
exports.border = border;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { colors as colorTokens, CanvasColor } from '@workday/canvas-kit-react/tokens';
|
|
2
|
-
export declare type ColorTokens = typeof colorTokens;
|
|
3
|
-
/** style props to for color properties */
|
|
4
|
-
export declare type ColorStyleProps = {
|
|
5
|
-
/** sets `background` property */
|
|
6
|
-
background?: CanvasColor | (string & {});
|
|
7
|
-
/** sets `background-color` property */
|
|
8
|
-
backgroundColor?: CanvasColor | (string & {});
|
|
9
|
-
/** sets `background-image` property */
|
|
10
|
-
backgroundImage?: string;
|
|
11
|
-
/** sets `color` property */
|
|
12
|
-
color?: CanvasColor | (string & {});
|
|
13
|
-
};
|
|
14
|
-
/**
|
|
15
|
-
* A style prop function that takes components props and returns color styles from canvas token values.
|
|
16
|
-
* If no `ColorStyleProps` are found, it returns an empty object.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* // You'll most likely use `color` with low-level, styled components
|
|
20
|
-
* const BoxExample = () => (
|
|
21
|
-
* <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
|
|
22
|
-
* );
|
|
23
|
-
*
|
|
24
|
-
*/
|
|
25
|
-
export declare function color<P extends ColorStyleProps>(props: P): {};
|
|
26
|
-
//# sourceMappingURL=color.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,IAAI,WAAW,EAAE,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEpF,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAE7C,0CAA0C;AAC1C,oBAAY,eAAe,GAAG;IAC5B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,uCAAuC;IACvC,eAAe,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACrC,CAAC;AAyBF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MAWxD"}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.color = void 0;
|
|
15
|
-
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
16
|
-
var getBackground = function (value) { return ({
|
|
17
|
-
background: tokens_1.colors[value] || value,
|
|
18
|
-
}); };
|
|
19
|
-
var getBackgroundColor = function (value) { return ({
|
|
20
|
-
backgroundColor: tokens_1.colors[value] || value,
|
|
21
|
-
}); };
|
|
22
|
-
var getBackgroundImage = function (value) { return ({
|
|
23
|
-
backgroundImage: value,
|
|
24
|
-
}); };
|
|
25
|
-
var getColor = function (value) { return ({
|
|
26
|
-
color: tokens_1.colors[value] || value,
|
|
27
|
-
}); };
|
|
28
|
-
var colorProps = {
|
|
29
|
-
background: getBackground,
|
|
30
|
-
backgroundColor: getBackgroundColor,
|
|
31
|
-
backgroundImage: getBackgroundImage,
|
|
32
|
-
color: getColor,
|
|
33
|
-
};
|
|
34
|
-
/**
|
|
35
|
-
* A style prop function that takes components props and returns color styles from canvas token values.
|
|
36
|
-
* If no `ColorStyleProps` are found, it returns an empty object.
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* // You'll most likely use `color` with low-level, styled components
|
|
40
|
-
* const BoxExample = () => (
|
|
41
|
-
* <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
|
|
42
|
-
* );
|
|
43
|
-
*
|
|
44
|
-
*/
|
|
45
|
-
function color(props) {
|
|
46
|
-
var styles = {};
|
|
47
|
-
for (var key in props) {
|
|
48
|
-
if (key in colorProps) {
|
|
49
|
-
var value = props[key];
|
|
50
|
-
var colorFn = colorProps[key];
|
|
51
|
-
var style = colorFn(value);
|
|
52
|
-
styles = __assign(__assign({}, styles), style);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
return styles;
|
|
56
|
-
}
|
|
57
|
-
exports.color = color;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { depth as depthTokens } from '@workday/canvas-kit-react/tokens';
|
|
2
|
-
export declare type DepthTokens = typeof depthTokens;
|
|
3
|
-
export declare type DepthTokenKeys = keyof DepthTokens;
|
|
4
|
-
export declare type DepthTokenValues = DepthTokens[keyof DepthTokens];
|
|
5
|
-
/** style props to for depth styles */
|
|
6
|
-
export declare type DepthStyleProps = {
|
|
7
|
-
/** sets depth styles (box-shadow & border) */
|
|
8
|
-
depth?: DepthTokenKeys;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* A style prop function that takes components props and returns depth styles from canvas token values.
|
|
12
|
-
* If no `DepthStyleProps` are found, it returns an empty object.
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* // You'll mostly likely use `depth` with low-level, styled components
|
|
16
|
-
* const BoxExample = () => (
|
|
17
|
-
* <Box depth={3}>Hello, box shadows!</Box>
|
|
18
|
-
* );
|
|
19
|
-
*
|
|
20
|
-
*/
|
|
21
|
-
export declare function depth<P extends DepthStyleProps>(props: P): DepthTokenValues;
|
|
22
|
-
//# sourceMappingURL=depth.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/depth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,IAAI,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEtE,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,oBAAY,cAAc,GAAG,MAAM,WAAW,CAAC;AAC/C,oBAAY,gBAAgB,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC;AAE9D,sCAAsC;AACtC,oBAAY,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAMF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,GAAG,gBAAgB,CAS3E"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.depth = void 0;
|
|
4
|
-
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
5
|
-
var depthProps = {
|
|
6
|
-
depth: function (token) { return tokens_1.depth[token]; },
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* A style prop function that takes components props and returns depth styles from canvas token values.
|
|
10
|
-
* If no `DepthStyleProps` are found, it returns an empty object.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* // You'll mostly likely use `depth` with low-level, styled components
|
|
14
|
-
* const BoxExample = () => (
|
|
15
|
-
* <Box depth={3}>Hello, box shadows!</Box>
|
|
16
|
-
* );
|
|
17
|
-
*
|
|
18
|
-
*/
|
|
19
|
-
function depth(props) {
|
|
20
|
-
for (var key in props) {
|
|
21
|
-
if (key in depthProps) {
|
|
22
|
-
var token = props[key];
|
|
23
|
-
var depthFn = depthProps[key];
|
|
24
|
-
return depthFn(token);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
return {};
|
|
28
|
-
}
|
|
29
|
-
exports.depth = depth;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { PropertyJustifySelf, PropertyAlignSelf, PropertyOrder } from './types';
|
|
2
|
-
/** style props to for flexbox item properties */
|
|
3
|
-
export declare type FlexItemStyleProps = {
|
|
4
|
-
/** sets `flex` property */
|
|
5
|
-
flex?: number | string;
|
|
6
|
-
/** sets `flex-grow` property */
|
|
7
|
-
flexGrow?: number | string;
|
|
8
|
-
/** sets `flex-shrink` property */
|
|
9
|
-
flexShrink?: number | string;
|
|
10
|
-
/** sets `flex-basis` property */
|
|
11
|
-
flexBasis?: number | string;
|
|
12
|
-
/** sets `justify-self` property */
|
|
13
|
-
justifySelf?: PropertyJustifySelf;
|
|
14
|
-
/** sets `align-self` property */
|
|
15
|
-
alignSelf?: PropertyAlignSelf;
|
|
16
|
-
/** sets `order` property */
|
|
17
|
-
order?: PropertyOrder;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* A style prop function that takes component props and returns flexbox item styles.
|
|
21
|
-
* If no `FlexItemStyleProps` are found, it returns an empty object.
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* // You'll most likely use `flexItem` with low-level, styled components
|
|
25
|
-
* const FlexItemExample = () => (
|
|
26
|
-
* <Box flex={1} flexBasis="auto" alignSelf={center}>
|
|
27
|
-
* Hello, flex item!
|
|
28
|
-
* </Box>
|
|
29
|
-
* );
|
|
30
|
-
*
|
|
31
|
-
*/
|
|
32
|
-
export declare function flexItem<P extends FlexItemStyleProps>(props: P): {};
|
|
33
|
-
//# sourceMappingURL=flexItem.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"flexItem.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/flexItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAE,iBAAiB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAE9E,iDAAiD;AACjD,oBAAY,kBAAkB,GAAG;IAC/B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAaF;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EAAE,KAAK,EAAE,CAAC,MAW9D"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.flexItem = void 0;
|
|
4
|
-
/** style props to for flexbox item properties */
|
|
5
|
-
var flexItemProps = {
|
|
6
|
-
flex: 'flex',
|
|
7
|
-
flexGrow: 'flexGrow',
|
|
8
|
-
flexShrink: 'flexShrink',
|
|
9
|
-
flexBasis: 'flexBasis',
|
|
10
|
-
justifySelf: 'justifySelf',
|
|
11
|
-
alignSelf: 'alignSelf',
|
|
12
|
-
order: 'order',
|
|
13
|
-
};
|
|
14
|
-
/**
|
|
15
|
-
* A style prop function that takes component props and returns flexbox item styles.
|
|
16
|
-
* If no `FlexItemStyleProps` are found, it returns an empty object.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* // You'll most likely use `flexItem` with low-level, styled components
|
|
20
|
-
* const FlexItemExample = () => (
|
|
21
|
-
* <Box flex={1} flexBasis="auto" alignSelf={center}>
|
|
22
|
-
* Hello, flex item!
|
|
23
|
-
* </Box>
|
|
24
|
-
* );
|
|
25
|
-
*
|
|
26
|
-
*/
|
|
27
|
-
function flexItem(props) {
|
|
28
|
-
var styles = {};
|
|
29
|
-
for (var key in props) {
|
|
30
|
-
if (key in flexItemProps) {
|
|
31
|
-
var attr = flexItemProps[key];
|
|
32
|
-
var value = props[key];
|
|
33
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
34
|
-
styles[attr] = value;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
return styles;
|
|
38
|
-
}
|
|
39
|
-
exports.flexItem = flexItem;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { PropertyDisplay, PropertyListStyle, PropertyOverflow, PropertyOverflowX, PropertyOverflowY, PropertyVerticalAlign } from './types';
|
|
2
|
-
/** style props to for layout properties */
|
|
3
|
-
export declare type LayoutStyleProps = {
|
|
4
|
-
/** sets `display` property */
|
|
5
|
-
display?: PropertyDisplay;
|
|
6
|
-
/** sets `height` property */
|
|
7
|
-
height?: number | string;
|
|
8
|
-
/** sets `list-style property */
|
|
9
|
-
listStyle?: PropertyListStyle;
|
|
10
|
-
/** sets `max-height` property */
|
|
11
|
-
maxHeight?: number | string;
|
|
12
|
-
/** sets `max-width` property */
|
|
13
|
-
maxWidth?: number | string;
|
|
14
|
-
/** sets `min-height` property */
|
|
15
|
-
minHeight?: number | string;
|
|
16
|
-
/** sets `min-width` property */
|
|
17
|
-
minWidth?: number | string;
|
|
18
|
-
/** sets `overflow` property */
|
|
19
|
-
overflow?: PropertyOverflow;
|
|
20
|
-
/** sets `overflow-x` property */
|
|
21
|
-
overflowX?: PropertyOverflowX;
|
|
22
|
-
/** sets `overflow-y` property */
|
|
23
|
-
overflowY?: PropertyOverflowY;
|
|
24
|
-
/** sets `vertical-align` property */
|
|
25
|
-
verticalAlign?: PropertyVerticalAlign;
|
|
26
|
-
/** sets `width` property */
|
|
27
|
-
width?: number | string;
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* A style prop function that takes components props and returns layout styles.
|
|
31
|
-
* If no `LayoutStyleProps` are found, it returns an empty object.
|
|
32
|
-
*
|
|
33
|
-
* @example
|
|
34
|
-
* // You'll most likely use `layout` with low-level, styled components
|
|
35
|
-
* const BoxExample = () => (
|
|
36
|
-
* <Box display="inline-block" height="50%">
|
|
37
|
-
* Hello, positions!
|
|
38
|
-
* </Box>
|
|
39
|
-
* );
|
|
40
|
-
*
|
|
41
|
-
*/
|
|
42
|
-
export declare function layout<P extends LayoutStyleProps>(props: P): {};
|
|
43
|
-
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/layout.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,2CAA2C;AAC3C,oBAAY,gBAAgB,GAAG;IAC7B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,qCAAqC;IACrC,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAiBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,gBAAgB,EAAE,KAAK,EAAE,CAAC,MAW1D"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.layout = void 0;
|
|
4
|
-
var layoutProps = {
|
|
5
|
-
display: 'display',
|
|
6
|
-
height: 'height',
|
|
7
|
-
listStyle: 'listStyle',
|
|
8
|
-
maxHeight: 'maxHeight',
|
|
9
|
-
maxWidth: 'maxWidth',
|
|
10
|
-
minHeight: 'minHeight',
|
|
11
|
-
minWidth: 'minWidth',
|
|
12
|
-
overflow: 'overflow',
|
|
13
|
-
overflowX: 'overflowX',
|
|
14
|
-
overflowY: 'overflowY',
|
|
15
|
-
verticalAlign: 'verticalAlign',
|
|
16
|
-
width: 'width',
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* A style prop function that takes components props and returns layout styles.
|
|
20
|
-
* If no `LayoutStyleProps` are found, it returns an empty object.
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* // You'll most likely use `layout` with low-level, styled components
|
|
24
|
-
* const BoxExample = () => (
|
|
25
|
-
* <Box display="inline-block" height="50%">
|
|
26
|
-
* Hello, positions!
|
|
27
|
-
* </Box>
|
|
28
|
-
* );
|
|
29
|
-
*
|
|
30
|
-
*/
|
|
31
|
-
function layout(props) {
|
|
32
|
-
var styles = {};
|
|
33
|
-
for (var key in props) {
|
|
34
|
-
if (key in layoutProps) {
|
|
35
|
-
var attr = layoutProps[key];
|
|
36
|
-
var value = props[key];
|
|
37
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
38
|
-
styles[attr] = value;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
return styles;
|
|
42
|
-
}
|
|
43
|
-
exports.layout = layout;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"other.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/other.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MASxD"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.other = void 0;
|
|
4
|
-
var otherProps = {
|
|
5
|
-
animation: function (value) {
|
|
6
|
-
return { animation: value };
|
|
7
|
-
},
|
|
8
|
-
};
|
|
9
|
-
function other(props) {
|
|
10
|
-
for (var key in props) {
|
|
11
|
-
if (key in otherProps) {
|
|
12
|
-
var value = props[key];
|
|
13
|
-
var styleFn = otherProps[key];
|
|
14
|
-
return styleFn(value);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
return {};
|
|
18
|
-
}
|
|
19
|
-
exports.other = other;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { PropertyPosition, PropertyZIndex } from './types';
|
|
3
|
-
/** style props to for standard position properties */
|
|
4
|
-
export declare type PositionStandardProps = {
|
|
5
|
-
/** sets `position` property */
|
|
6
|
-
position?: PropertyPosition;
|
|
7
|
-
/** sets `zIndex` property */
|
|
8
|
-
zIndex?: PropertyZIndex;
|
|
9
|
-
/** sets `top` property */
|
|
10
|
-
top?: number | string;
|
|
11
|
-
/** sets `right` property (no bidirectional support) */
|
|
12
|
-
right?: number | string;
|
|
13
|
-
/** sets `bottom` property */
|
|
14
|
-
bottom?: number | string;
|
|
15
|
-
/** sets `left` property (no bidirectional support) */
|
|
16
|
-
left?: number | string;
|
|
17
|
-
};
|
|
18
|
-
export declare type PositionLogicalProps = {
|
|
19
|
-
/** sets `left` property (bidirectional support) */
|
|
20
|
-
insetInlineStart?: number | string;
|
|
21
|
-
/** sets `right` property (bidirectional support) */
|
|
22
|
-
insetInlineEnd?: number | string;
|
|
23
|
-
};
|
|
24
|
-
export declare type PositionStyleProps = PositionStandardProps & PositionLogicalProps;
|
|
25
|
-
/**
|
|
26
|
-
* A style prop function that takes components props and returns position styles.
|
|
27
|
-
* If no `PositionProps` are found, it returns an empty object.
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
* // You'll most likely use `position` with low-level, styled components
|
|
31
|
-
* const BoxExample = () => (
|
|
32
|
-
* <Box position="absolute" top="50%">
|
|
33
|
-
* Hello, positions!
|
|
34
|
-
* </Box>
|
|
35
|
-
* );
|
|
36
|
-
*
|
|
37
|
-
*/
|
|
38
|
-
export declare function position<P extends PositionStyleProps & {
|
|
39
|
-
theme?: PartialEmotionCanvasTheme;
|
|
40
|
-
}>(props: P): {};
|
|
41
|
-
//# sourceMappingURL=position.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/position.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAE1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEzD,sDAAsD;AACtD,oBAAY,qBAAqB,GAAG;IAClC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC,CAAC;AA0BF,oBAAY,kBAAkB,GAAG,qBAAqB,GAAG,oBAAoB,CAAC;AAE9E;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,GAAG;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,EACzF,KAAK,EAAE,CAAC,MAyBT"}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.position = void 0;
|
|
15
|
-
var common_1 = require("@workday/canvas-kit-react/common");
|
|
16
|
-
var getInsetInlineStartStyle = function (value, isRTL) {
|
|
17
|
-
var _a;
|
|
18
|
-
if (isRTL === void 0) { isRTL = false; }
|
|
19
|
-
var attr = isRTL ? 'right' : 'left';
|
|
20
|
-
return _a = {}, _a[attr] = value, _a;
|
|
21
|
-
};
|
|
22
|
-
var getInsetInlineEndStyle = function (value, isRTL) {
|
|
23
|
-
var _a;
|
|
24
|
-
if (isRTL === void 0) { isRTL = false; }
|
|
25
|
-
var attr = isRTL ? 'left' : 'right';
|
|
26
|
-
return _a = {}, _a[attr] = value, _a;
|
|
27
|
-
};
|
|
28
|
-
var standardPositionProps = {
|
|
29
|
-
position: 'position',
|
|
30
|
-
zIndex: 'zIndex',
|
|
31
|
-
top: 'top',
|
|
32
|
-
right: 'right',
|
|
33
|
-
bottom: 'bottom',
|
|
34
|
-
left: 'left',
|
|
35
|
-
};
|
|
36
|
-
var logicalPositionProps = {
|
|
37
|
-
insetInlineStart: getInsetInlineStartStyle,
|
|
38
|
-
insetInlineEnd: getInsetInlineEndStyle,
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* A style prop function that takes components props and returns position styles.
|
|
42
|
-
* If no `PositionProps` are found, it returns an empty object.
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* // You'll most likely use `position` with low-level, styled components
|
|
46
|
-
* const BoxExample = () => (
|
|
47
|
-
* <Box position="absolute" top="50%">
|
|
48
|
-
* Hello, positions!
|
|
49
|
-
* </Box>
|
|
50
|
-
* );
|
|
51
|
-
*
|
|
52
|
-
*/
|
|
53
|
-
function position(props) {
|
|
54
|
-
// position will always be used within the context of a component, but eslint doesn't know that
|
|
55
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
56
|
-
var canvas = common_1.useTheme(props.theme).canvas;
|
|
57
|
-
var styles = {};
|
|
58
|
-
for (var key in props) {
|
|
59
|
-
if (key in props) {
|
|
60
|
-
if (key in standardPositionProps) {
|
|
61
|
-
var value = props[key];
|
|
62
|
-
var attr = standardPositionProps[key];
|
|
63
|
-
// @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
|
|
64
|
-
styles[attr] = value;
|
|
65
|
-
continue;
|
|
66
|
-
}
|
|
67
|
-
if (key in logicalPositionProps) {
|
|
68
|
-
var value = props[key];
|
|
69
|
-
var styleFn = logicalPositionProps[key];
|
|
70
|
-
var isRTL = canvas.direction === common_1.ContentDirection.RTL;
|
|
71
|
-
var style = styleFn(value, isRTL);
|
|
72
|
-
styles = __assign(__assign({}, styles), style);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
return styles;
|
|
77
|
-
}
|
|
78
|
-
exports.position = position;
|