@workday/canvas-kit-react 8.0.5 → 8.0.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/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx +7 -18
- package/common/lib/utils/useModalityType.ts +18 -2
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -8
- package/dist/commonjs/common/lib/utils/useModalityType.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/useModalityType.js +18 -2
- package/dist/commonjs/text/lib/LabelText.d.ts +1 -1
- package/dist/commonjs/text/lib/LabelText.d.ts.map +1 -1
- package/dist/commonjs/text/lib/LabelText.js +15 -11
- package/dist/commonjs/text/lib/TypeLevelComponents.d.ts +1 -1
- package/dist/commonjs/text/lib/TypeLevelComponents.d.ts.map +1 -1
- package/dist/commonjs/text/lib/TypeLevelComponents.js +5 -5
- package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +2 -9
- package/dist/es6/common/lib/utils/useModalityType.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/useModalityType.js +18 -2
- package/dist/es6/text/lib/LabelText.d.ts +1 -1
- package/dist/es6/text/lib/LabelText.d.ts.map +1 -1
- package/dist/es6/text/lib/LabelText.js +16 -12
- package/dist/es6/text/lib/TypeLevelComponents.d.ts +1 -1
- package/dist/es6/text/lib/TypeLevelComponents.d.ts.map +1 -1
- package/dist/es6/text/lib/TypeLevelComponents.js +2 -2
- package/package.json +3 -3
- package/text/lib/LabelText.tsx +15 -12
- package/text/lib/TypeLevelComponents.tsx +2 -4
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {
|
|
3
|
-
styled,
|
|
4
3
|
createElemPropsHook,
|
|
5
4
|
useLocalRef,
|
|
6
5
|
composeHooks,
|
|
7
6
|
createSubcomponent,
|
|
8
|
-
StyledType,
|
|
9
|
-
ellipsisStyles,
|
|
10
7
|
useForkRef,
|
|
11
8
|
} from '@workday/canvas-kit-react/common';
|
|
12
9
|
import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
|
|
@@ -21,18 +18,6 @@ export interface BreadcrumbsCurrentItemProps extends TextProps {
|
|
|
21
18
|
tooltipProps?: OverflowTooltipProps;
|
|
22
19
|
}
|
|
23
20
|
|
|
24
|
-
const ListItem = styled(Text.as('li'))<BreadcrumbsCurrentItemProps & StyledType>(
|
|
25
|
-
{
|
|
26
|
-
alignItems: 'center',
|
|
27
|
-
flexDirection: 'column',
|
|
28
|
-
},
|
|
29
|
-
({maxWidth}: BreadcrumbsCurrentItemProps) => ({
|
|
30
|
-
maxWidth,
|
|
31
|
-
display: 'inline-block',
|
|
32
|
-
...ellipsisStyles,
|
|
33
|
-
})
|
|
34
|
-
);
|
|
35
|
-
|
|
36
21
|
export const useBreadcrumbsItem = composeHooks(
|
|
37
22
|
createElemPropsHook(useBreadcrumbsModel)((_model: any, ref: any, elemProps) => {
|
|
38
23
|
const {localRef} = useLocalRef(useForkRef(ref));
|
|
@@ -61,15 +46,19 @@ export const BreadcrumbsCurrentItem = createSubcomponent('li')({
|
|
|
61
46
|
({children, tooltipProps = {}, maxWidth = '350px', ...elemProps}, Element) => {
|
|
62
47
|
return (
|
|
63
48
|
<OverflowTooltip {...tooltipProps}>
|
|
64
|
-
<
|
|
49
|
+
<Text
|
|
65
50
|
as={Element}
|
|
66
51
|
typeLevel="subtext.large"
|
|
67
|
-
maxWidth={maxWidth}
|
|
68
52
|
fontWeight="medium"
|
|
53
|
+
display="inline-block"
|
|
54
|
+
maxWidth={maxWidth}
|
|
55
|
+
whiteSpace="nowrap"
|
|
56
|
+
textOverflow="ellipsis"
|
|
57
|
+
overflow="hidden"
|
|
69
58
|
{...elemProps}
|
|
70
59
|
>
|
|
71
60
|
{children}
|
|
72
|
-
</
|
|
61
|
+
</Text>
|
|
73
62
|
</OverflowTooltip>
|
|
74
63
|
);
|
|
75
64
|
}
|
|
@@ -2,6 +2,22 @@ import React from 'react';
|
|
|
2
2
|
|
|
3
3
|
type Modality = 'mouse' | 'touch' | 'pen';
|
|
4
4
|
|
|
5
|
+
function safeLocalStorageGet(key: string): string | null {
|
|
6
|
+
try {
|
|
7
|
+
return localStorage.get(key);
|
|
8
|
+
} catch (_) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function safeLocalStorageSet(key: string, value: string): void {
|
|
14
|
+
try {
|
|
15
|
+
localStorage.set(key, value);
|
|
16
|
+
} catch (_) {
|
|
17
|
+
// Do nothing
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
5
21
|
// Use this shared global value to reduce calls to localStorage which is a synchronous API to a
|
|
6
22
|
// drive which could be slow (spinning disks could be hundreds of ms). We read only once this way.
|
|
7
23
|
// The following initialization is very difficult to test via automation. Don't mess with it unless
|
|
@@ -12,7 +28,7 @@ type Modality = 'mouse' | 'touch' | 'pen';
|
|
|
12
28
|
// b. if < 768, default to 'touch'
|
|
13
29
|
// c. else default to 'mouse'
|
|
14
30
|
let localStorageValue = ((typeof localStorage !== 'undefined'
|
|
15
|
-
?
|
|
31
|
+
? safeLocalStorageGet('modality')
|
|
16
32
|
: '') ||
|
|
17
33
|
(typeof document !== 'undefined'
|
|
18
34
|
? document.documentElement.clientWidth < 768
|
|
@@ -26,7 +42,7 @@ let localStorageValue = ((typeof localStorage !== 'undefined'
|
|
|
26
42
|
// drives
|
|
27
43
|
const updateLocalStorage = (value: Modality) => {
|
|
28
44
|
if (localStorageValue !== value) {
|
|
29
|
-
|
|
45
|
+
safeLocalStorageSet('modality', value);
|
|
30
46
|
}
|
|
31
47
|
localStorageValue = value;
|
|
32
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbsCurrentItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsCurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BreadcrumbsCurrentItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsCurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,2BAA4B,SAAQ,SAAS;IAC5D,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBlC,CAAC"}
|
|
@@ -32,13 +32,6 @@ var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
|
|
|
32
32
|
var collection_1 = require("@workday/canvas-kit-react/collection");
|
|
33
33
|
var useBreadcrumbsModel_1 = require("./hooks/useBreadcrumbsModel");
|
|
34
34
|
var text_1 = require("@workday/canvas-kit-react/text");
|
|
35
|
-
var ListItem = common_1.styled(text_1.Text.as('li'))({
|
|
36
|
-
alignItems: 'center',
|
|
37
|
-
flexDirection: 'column',
|
|
38
|
-
}, function (_a) {
|
|
39
|
-
var maxWidth = _a.maxWidth;
|
|
40
|
-
return (__assign({ maxWidth: maxWidth, display: 'inline-block' }, common_1.ellipsisStyles));
|
|
41
|
-
});
|
|
42
35
|
exports.useBreadcrumbsItem = common_1.composeHooks(common_1.createElemPropsHook(useBreadcrumbsModel_1.useBreadcrumbsModel)(function (_model, ref, elemProps) {
|
|
43
36
|
var localRef = common_1.useLocalRef(common_1.useForkRef(ref)).localRef;
|
|
44
37
|
var shouldShowTooltip = false;
|
|
@@ -59,5 +52,5 @@ exports.BreadcrumbsCurrentItem = common_1.createSubcomponent('li')({
|
|
|
59
52
|
})(function (_a, Element) {
|
|
60
53
|
var children = _a.children, _b = _a.tooltipProps, tooltipProps = _b === void 0 ? {} : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? '350px' : _c, elemProps = __rest(_a, ["children", "tooltipProps", "maxWidth"]);
|
|
61
54
|
return (react_1.default.createElement(tooltip_1.OverflowTooltip, __assign({}, tooltipProps),
|
|
62
|
-
react_1.default.createElement(
|
|
55
|
+
react_1.default.createElement(text_1.Text, __assign({ as: Element, typeLevel: "subtext.large", fontWeight: "medium", display: "inline-block", maxWidth: maxWidth, whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }, elemProps), children)));
|
|
63
56
|
});
|
|
@@ -1 +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+
|
|
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+C1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,QAkBlC,CAAC"}
|
|
@@ -5,6 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.useModalityType = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
+
function safeLocalStorageGet(key) {
|
|
9
|
+
try {
|
|
10
|
+
return localStorage.get(key);
|
|
11
|
+
}
|
|
12
|
+
catch (_) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
function safeLocalStorageSet(key, value) {
|
|
17
|
+
try {
|
|
18
|
+
localStorage.set(key, value);
|
|
19
|
+
}
|
|
20
|
+
catch (_) {
|
|
21
|
+
// Do nothing
|
|
22
|
+
}
|
|
23
|
+
}
|
|
8
24
|
// Use this shared global value to reduce calls to localStorage which is a synchronous API to a
|
|
9
25
|
// drive which could be slow (spinning disks could be hundreds of ms). We read only once this way.
|
|
10
26
|
// The following initialization is very difficult to test via automation. Don't mess with it unless
|
|
@@ -15,7 +31,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
15
31
|
// b. if < 768, default to 'touch'
|
|
16
32
|
// c. else default to 'mouse'
|
|
17
33
|
var localStorageValue = ((typeof localStorage !== 'undefined'
|
|
18
|
-
?
|
|
34
|
+
? safeLocalStorageGet('modality')
|
|
19
35
|
: '') ||
|
|
20
36
|
(typeof document !== 'undefined'
|
|
21
37
|
? document.documentElement.clientWidth < 768
|
|
@@ -28,7 +44,7 @@ var localStorageValue = ((typeof localStorage !== 'undefined'
|
|
|
28
44
|
// drives
|
|
29
45
|
var updateLocalStorage = function (value) {
|
|
30
46
|
if (localStorageValue !== value) {
|
|
31
|
-
|
|
47
|
+
safeLocalStorageSet('modality', value);
|
|
32
48
|
}
|
|
33
49
|
localStorageValue = value;
|
|
34
50
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,SAAS,kEAgBpB,CAAC"}
|
|
@@ -29,20 +29,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
__setModuleDefault(result, mod);
|
|
30
30
|
return result;
|
|
31
31
|
};
|
|
32
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
33
|
+
var t = {};
|
|
34
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
35
|
+
t[p] = s[p];
|
|
36
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
37
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
38
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
39
|
+
t[p[i]] = s[p[i]];
|
|
40
|
+
}
|
|
41
|
+
return t;
|
|
42
|
+
};
|
|
32
43
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
44
|
exports.LabelText = void 0;
|
|
34
45
|
var React = __importStar(require("react"));
|
|
35
46
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
36
|
-
var
|
|
47
|
+
var Text_1 = require("./Text");
|
|
37
48
|
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
38
|
-
var StyledLabel = common_1.styled(text_1.Text.as('label'))(function (_a) {
|
|
39
|
-
var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant;
|
|
40
|
-
return ({
|
|
41
|
-
color: disabled && variant !== 'inverse' ? tokens_1.inputColors.disabled.text : undefined,
|
|
42
|
-
cursor: cursor && !disabled ? cursor : 'default',
|
|
43
|
-
opacity: disabled && variant === 'inverse' ? '.4' : '1',
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
49
|
/**
|
|
47
50
|
* ## LabelText
|
|
48
51
|
* [View Docs](https://canvas.workday.com/components/text/label-text)
|
|
@@ -67,7 +70,8 @@ var StyledLabel = common_1.styled(text_1.Text.as('label'))(function (_a) {
|
|
|
67
70
|
*/
|
|
68
71
|
exports.LabelText = common_1.createComponent('label')({
|
|
69
72
|
displayName: 'Label',
|
|
70
|
-
Component: function (
|
|
71
|
-
|
|
73
|
+
Component: function (_a, ref, Element) {
|
|
74
|
+
var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant, elemProps = __rest(_a, ["cursor", "disabled", "variant"]);
|
|
75
|
+
return (React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: "subtext.large", color: disabled && variant !== 'inverse' ? tokens_1.inputColors.disabled.text : undefined, cursor: cursor && !disabled ? cursor : 'default', opacity: disabled && variant === 'inverse' ? '.4' : '1', variant: variant }, elemProps)));
|
|
72
76
|
},
|
|
73
77
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,8DAMnB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}
|
|
@@ -44,7 +44,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
44
44
|
exports.Title = exports.Heading = exports.BodyText = exports.Subtext = void 0;
|
|
45
45
|
var React = __importStar(require("react"));
|
|
46
46
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
47
|
-
var
|
|
47
|
+
var Text_1 = require("./Text");
|
|
48
48
|
/**
|
|
49
49
|
* ## Subtext
|
|
50
50
|
* [View Docs](https://canvas.workday.com/components/text/subtext)
|
|
@@ -79,7 +79,7 @@ exports.Subtext = common_1.createComponent('p')({
|
|
|
79
79
|
Component: function (_a, ref, Element) {
|
|
80
80
|
var size = _a.size, elemProps = __rest(_a, ["size"]);
|
|
81
81
|
var typeLevel = "subtext." + size;
|
|
82
|
-
return React.createElement(
|
|
82
|
+
return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
|
|
83
83
|
},
|
|
84
84
|
});
|
|
85
85
|
/**
|
|
@@ -116,7 +116,7 @@ exports.BodyText = common_1.createComponent('p')({
|
|
|
116
116
|
Component: function (_a, ref, Element) {
|
|
117
117
|
var size = _a.size, elemProps = __rest(_a, ["size"]);
|
|
118
118
|
var typeLevel = "body." + size;
|
|
119
|
-
return
|
|
119
|
+
return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
|
|
120
120
|
},
|
|
121
121
|
});
|
|
122
122
|
/**
|
|
@@ -153,7 +153,7 @@ exports.Heading = common_1.createComponent('h2')({
|
|
|
153
153
|
Component: function (_a, ref, Element) {
|
|
154
154
|
var size = _a.size, elemProps = __rest(_a, ["size"]);
|
|
155
155
|
var typeLevel = "heading." + size;
|
|
156
|
-
return React.createElement(
|
|
156
|
+
return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
|
|
157
157
|
},
|
|
158
158
|
});
|
|
159
159
|
/**
|
|
@@ -190,6 +190,6 @@ exports.Title = common_1.createComponent('h1')({
|
|
|
190
190
|
Component: function (_a, ref, Element) {
|
|
191
191
|
var size = _a.size, elemProps = __rest(_a, ["size"]);
|
|
192
192
|
var typeLevel = "title." + size;
|
|
193
|
-
return React.createElement(
|
|
193
|
+
return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
|
|
194
194
|
},
|
|
195
195
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbsCurrentItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsCurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BreadcrumbsCurrentItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsCurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,2BAA4B,SAAQ,SAAS;IAC5D,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBlC,CAAC"}
|
|
@@ -21,18 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import React from 'react';
|
|
24
|
-
import {
|
|
24
|
+
import { createElemPropsHook, useLocalRef, composeHooks, createSubcomponent, useForkRef, } from '@workday/canvas-kit-react/common';
|
|
25
25
|
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
|
|
26
26
|
import { useListItemRegister, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
|
|
27
27
|
import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
|
|
28
28
|
import { Text } from '@workday/canvas-kit-react/text';
|
|
29
|
-
var ListItem = styled(Text.as('li'))({
|
|
30
|
-
alignItems: 'center',
|
|
31
|
-
flexDirection: 'column',
|
|
32
|
-
}, function (_a) {
|
|
33
|
-
var maxWidth = _a.maxWidth;
|
|
34
|
-
return (__assign({ maxWidth: maxWidth, display: 'inline-block' }, ellipsisStyles));
|
|
35
|
-
});
|
|
36
29
|
export var useBreadcrumbsItem = composeHooks(createElemPropsHook(useBreadcrumbsModel)(function (_model, ref, elemProps) {
|
|
37
30
|
var localRef = useLocalRef(useForkRef(ref)).localRef;
|
|
38
31
|
var shouldShowTooltip = false;
|
|
@@ -53,5 +46,5 @@ export var BreadcrumbsCurrentItem = createSubcomponent('li')({
|
|
|
53
46
|
})(function (_a, Element) {
|
|
54
47
|
var children = _a.children, _b = _a.tooltipProps, tooltipProps = _b === void 0 ? {} : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? '350px' : _c, elemProps = __rest(_a, ["children", "tooltipProps", "maxWidth"]);
|
|
55
48
|
return (React.createElement(OverflowTooltip, __assign({}, tooltipProps),
|
|
56
|
-
React.createElement(
|
|
49
|
+
React.createElement(Text, __assign({ as: Element, typeLevel: "subtext.large", fontWeight: "medium", display: "inline-block", maxWidth: maxWidth, whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }, elemProps), children)));
|
|
57
50
|
});
|
|
@@ -1 +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+
|
|
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+C1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,QAkBlC,CAAC"}
|
|
@@ -1,4 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
function safeLocalStorageGet(key) {
|
|
3
|
+
try {
|
|
4
|
+
return localStorage.get(key);
|
|
5
|
+
}
|
|
6
|
+
catch (_) {
|
|
7
|
+
return null;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
function safeLocalStorageSet(key, value) {
|
|
11
|
+
try {
|
|
12
|
+
localStorage.set(key, value);
|
|
13
|
+
}
|
|
14
|
+
catch (_) {
|
|
15
|
+
// Do nothing
|
|
16
|
+
}
|
|
17
|
+
}
|
|
2
18
|
// Use this shared global value to reduce calls to localStorage which is a synchronous API to a
|
|
3
19
|
// drive which could be slow (spinning disks could be hundreds of ms). We read only once this way.
|
|
4
20
|
// The following initialization is very difficult to test via automation. Don't mess with it unless
|
|
@@ -9,7 +25,7 @@ import React from 'react';
|
|
|
9
25
|
// b. if < 768, default to 'touch'
|
|
10
26
|
// c. else default to 'mouse'
|
|
11
27
|
var localStorageValue = ((typeof localStorage !== 'undefined'
|
|
12
|
-
?
|
|
28
|
+
? safeLocalStorageGet('modality')
|
|
13
29
|
: '') ||
|
|
14
30
|
(typeof document !== 'undefined'
|
|
15
31
|
? document.documentElement.clientWidth < 768
|
|
@@ -22,7 +38,7 @@ var localStorageValue = ((typeof localStorage !== 'undefined'
|
|
|
22
38
|
// drives
|
|
23
39
|
var updateLocalStorage = function (value) {
|
|
24
40
|
if (localStorageValue !== value) {
|
|
25
|
-
|
|
41
|
+
safeLocalStorageSet('modality', value);
|
|
26
42
|
}
|
|
27
43
|
localStorageValue = value;
|
|
28
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,SAAS,kEAgBpB,CAAC"}
|
|
@@ -9,18 +9,21 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
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
|
+
};
|
|
12
23
|
import * as React from 'react';
|
|
13
|
-
import { createComponent
|
|
14
|
-
import { Text } from '
|
|
24
|
+
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
25
|
+
import { Text } from './Text';
|
|
15
26
|
import { inputColors } from '@workday/canvas-kit-react/tokens';
|
|
16
|
-
var StyledLabel = styled(Text.as('label'))(function (_a) {
|
|
17
|
-
var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant;
|
|
18
|
-
return ({
|
|
19
|
-
color: disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined,
|
|
20
|
-
cursor: cursor && !disabled ? cursor : 'default',
|
|
21
|
-
opacity: disabled && variant === 'inverse' ? '.4' : '1',
|
|
22
|
-
});
|
|
23
|
-
});
|
|
24
27
|
/**
|
|
25
28
|
* ## LabelText
|
|
26
29
|
* [View Docs](https://canvas.workday.com/components/text/label-text)
|
|
@@ -45,7 +48,8 @@ var StyledLabel = styled(Text.as('label'))(function (_a) {
|
|
|
45
48
|
*/
|
|
46
49
|
export var LabelText = createComponent('label')({
|
|
47
50
|
displayName: 'Label',
|
|
48
|
-
Component: function (
|
|
49
|
-
|
|
51
|
+
Component: function (_a, ref, Element) {
|
|
52
|
+
var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant, elemProps = __rest(_a, ["cursor", "disabled", "variant"]);
|
|
53
|
+
return (React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: "subtext.large", color: disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined, cursor: cursor && !disabled ? cursor : 'default', opacity: disabled && variant === 'inverse' ? '.4' : '1', variant: variant }, elemProps)));
|
|
50
54
|
},
|
|
51
55
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,8DAMnB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}
|
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import * as React from 'react';
|
|
24
24
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
25
|
-
import { Text } from '
|
|
25
|
+
import { Text } from './Text';
|
|
26
26
|
/**
|
|
27
27
|
* ## Subtext
|
|
28
28
|
* [View Docs](https://canvas.workday.com/components/text/subtext)
|
|
@@ -94,7 +94,7 @@ export var BodyText = createComponent('p')({
|
|
|
94
94
|
Component: function (_a, ref, Element) {
|
|
95
95
|
var size = _a.size, elemProps = __rest(_a, ["size"]);
|
|
96
96
|
var typeLevel = "body." + size;
|
|
97
|
-
return
|
|
97
|
+
return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
|
|
98
98
|
},
|
|
99
99
|
});
|
|
100
100
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.7",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^8.0.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^8.0.7",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
54
54
|
"@workday/design-assets-types": "^0.2.8",
|
|
55
55
|
"chroma-js": "^2.1.0",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "22496753e49ca4f54fcea13a8498ab1c6d42e9a3"
|
|
71
71
|
}
|
package/text/lib/LabelText.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {Property} from 'csstype';
|
|
3
|
-
import {createComponent
|
|
4
|
-
import {Text, TextProps} from '
|
|
3
|
+
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {Text, TextProps} from './Text';
|
|
5
5
|
import {inputColors} from '@workday/canvas-kit-react/tokens';
|
|
6
6
|
|
|
7
7
|
export interface TypeLabelProps extends TextProps {
|
|
@@ -9,14 +9,6 @@ export interface TypeLabelProps extends TextProps {
|
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
const StyledLabel = styled(Text.as('label'))<StyledType & TypeLabelProps>(
|
|
13
|
-
({cursor, disabled, variant}) => ({
|
|
14
|
-
color: disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined,
|
|
15
|
-
cursor: cursor && !disabled ? cursor : 'default',
|
|
16
|
-
opacity: disabled && variant === 'inverse' ? '.4' : '1',
|
|
17
|
-
})
|
|
18
|
-
);
|
|
19
|
-
|
|
20
12
|
/**
|
|
21
13
|
* ## LabelText
|
|
22
14
|
* [View Docs](https://canvas.workday.com/components/text/label-text)
|
|
@@ -41,7 +33,18 @@ const StyledLabel = styled(Text.as('label'))<StyledType & TypeLabelProps>(
|
|
|
41
33
|
*/
|
|
42
34
|
export const LabelText = createComponent('label')({
|
|
43
35
|
displayName: 'Label',
|
|
44
|
-
Component: (elemProps: TypeLabelProps, ref, Element) => {
|
|
45
|
-
return
|
|
36
|
+
Component: ({cursor, disabled, variant, ...elemProps}: TypeLabelProps, ref, Element) => {
|
|
37
|
+
return (
|
|
38
|
+
<Text
|
|
39
|
+
ref={ref}
|
|
40
|
+
as={Element}
|
|
41
|
+
typeLevel="subtext.large"
|
|
42
|
+
color={disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined}
|
|
43
|
+
cursor={cursor && !disabled ? cursor : 'default'}
|
|
44
|
+
opacity={disabled && variant === 'inverse' ? '.4' : '1'}
|
|
45
|
+
variant={variant}
|
|
46
|
+
{...elemProps}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
46
49
|
},
|
|
47
50
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
3
|
-
import {Text, TextProps} from '
|
|
3
|
+
import {Text, TextProps} from './Text';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Prop interface for type level specific components:
|
|
@@ -83,9 +83,7 @@ export const BodyText = createComponent('p')({
|
|
|
83
83
|
displayName: 'BodyText',
|
|
84
84
|
Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
|
|
85
85
|
const typeLevel = `body.${size}` as TextProps['typeLevel'];
|
|
86
|
-
return
|
|
87
|
-
<Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />
|
|
88
|
-
);
|
|
86
|
+
return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
|
|
89
87
|
},
|
|
90
88
|
});
|
|
91
89
|
|