@workday/canvas-kit-react 5.2.8 → 5.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/commonjs/tabs/lib/Tab.d.ts.map +1 -1
  2. package/dist/commonjs/tabs/lib/Tab.js +18 -24
  3. package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts +10 -0
  4. package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
  5. package/dist/commonjs/tooltip/lib/OverflowTooltip.js +8 -6
  6. package/dist/es6/tabs/lib/Tab.d.ts.map +1 -1
  7. package/dist/es6/tabs/lib/Tab.js +18 -24
  8. package/dist/es6/tooltip/lib/OverflowTooltip.d.ts +10 -0
  9. package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
  10. package/dist/es6/tooltip/lib/OverflowTooltip.js +5 -3
  11. package/package.json +5 -5
  12. package/tabs/lib/Tab.tsx +53 -59
  13. package/tooltip/lib/OverflowTooltip.tsx +5 -3
  14. package/ts3.5/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts +10 -0
  15. package/ts3.5/dist/es6/tooltip/lib/OverflowTooltip.d.ts +10 -0
package/dist/commonjs/tabs/lib/Tab.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmGD,eAAO,MAAM,GAAG,6DAad,CAAC"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}
package/dist/commonjs/tabs/lib/Tab.js CHANGED
@@ -46,31 +46,25 @@ var StyledButton = common_1.styled('button')(__assign(__assign(__assign(__assign
46
46
  cursor: 'auto',
47
47
  backgroundColor: "transparent",
48
48
  },
49
- } }), function (_a) {
50
- var isSelected = _a.isSelected;
51
- if (isSelected) {
52
- return {
49
+ }, '&[aria-selected=true]': {
50
+ color: tokens_1.colors.blueberry400,
51
+ cursor: 'default',
52
+ '&:after': {
53
+ position: 'absolute',
54
+ height: tokens_1.space.xxxs,
55
+ borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
56
+ backgroundColor: tokens_1.colors.blueberry400,
57
+ bottom: 0,
58
+ content: "''",
59
+ left: 0,
60
+ marginTop: '-2px',
61
+ width: '100%',
62
+ },
63
+ '&:hover, &:focus': {
64
+ backgroundColor: "transparent",
53
65
  color: tokens_1.colors.blueberry400,
54
- cursor: 'default',
55
- '&:after': {
56
- position: 'absolute',
57
- height: tokens_1.space.xxxs,
58
- borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
59
- backgroundColor: tokens_1.colors.blueberry400,
60
- bottom: 0,
61
- content: "''",
62
- left: 0,
63
- marginTop: '-2px',
64
- width: '100%',
65
- },
66
- '&:hover, &:focus': {
67
- backgroundColor: "transparent",
68
- color: tokens_1.colors.blueberry400,
69
- },
70
- };
71
- }
72
- return {};
73
- });
66
+ },
67
+ } }));
74
68
  var useTab = function (model, elemProps, ref) {
75
69
  if (elemProps === void 0) { elemProps = {}; }
76
70
  var _a = common_1.useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { Placement } from '@workday/canvas-kit-react/popup';
3
+ /**
4
+ * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
5
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
6
+ */
7
+ export declare const findOverflowElement: (element: Element) => Element | null;
8
+ /**
9
+ * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
10
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
11
+ */
12
+ export declare const findEllipsisElement: (element: Element) => Element | null;
3
13
  export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
4
14
  /**
5
15
  * The target (anchor element) for the Tooltip.
package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AA+D7F,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,8EA4C3B,CAAC"}
1
+ {"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sCAoB/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sCAe/B,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,8EA4C3B,CAAC"}
package/dist/commonjs/tooltip/lib/OverflowTooltip.js CHANGED
@@ -38,7 +38,7 @@ var useTooltip_1 = require("./useTooltip");
38
38
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
39
39
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
40
40
  */
41
- var findOverflowElement = function (element) {
41
+ exports.findOverflowElement = function (element) {
42
42
  var style = getComputedStyle(element);
43
43
  if (style.overflow === 'auto' ||
44
44
  style.overflow === 'scroll' ||
@@ -49,7 +49,7 @@ var findOverflowElement = function (element) {
49
49
  else if (element.children) {
50
50
  // `children` is not defined for SVGElement in IE11
51
51
  for (var i = 0; i < element.children.length; i++) {
52
- var overflowElement = findOverflowElement(element.children[i]);
52
+ var overflowElement = exports.findOverflowElement(element.children[i]);
53
53
  if (overflowElement) {
54
54
  return overflowElement;
55
55
  }
@@ -62,23 +62,25 @@ var findOverflowElement = function (element) {
62
62
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
63
63
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
64
64
  */
65
- var findEllipsisElement = function (element) {
65
+ exports.findEllipsisElement = function (element) {
66
66
  var style = getComputedStyle(element);
67
67
  if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
68
68
  return element;
69
69
  }
70
- else {
70
+ else if (element.children) {
71
+ // `children` is not defined for SVGElement in IE11
71
72
  for (var i = 0; i < element.children.length; i++) {
72
- var overflowElement = findEllipsisElement(element.children[i]);
73
+ var overflowElement = exports.findEllipsisElement(element.children[i]);
73
74
  if (overflowElement) {
74
75
  return overflowElement;
75
76
  }
76
77
  }
77
78
  return null;
78
79
  }
80
+ return null;
79
81
  };
80
82
  var isOverflowed = function (element) {
81
- var overflowElement = findEllipsisElement(element) || findOverflowElement(element);
83
+ var overflowElement = exports.findEllipsisElement(element) || exports.findOverflowElement(element);
82
84
  if (overflowElement) {
83
85
  return (overflowElement.scrollWidth > overflowElement.clientWidth ||
84
86
  overflowElement.scrollHeight > overflowElement.clientHeight);
package/dist/es6/tabs/lib/Tab.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmGD,eAAO,MAAM,GAAG,6DAad,CAAC"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}
package/dist/es6/tabs/lib/Tab.js CHANGED
@@ -37,31 +37,25 @@ var StyledButton = styled('button')(__assign(__assign(__assign(__assign({}, type
37
37
  cursor: 'auto',
38
38
  backgroundColor: "transparent",
39
39
  },
40
- } }), function (_a) {
41
- var isSelected = _a.isSelected;
42
- if (isSelected) {
43
- return {
40
+ }, '&[aria-selected=true]': {
41
+ color: colors.blueberry400,
42
+ cursor: 'default',
43
+ '&:after': {
44
+ position: 'absolute',
45
+ height: space.xxxs,
46
+ borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px",
47
+ backgroundColor: colors.blueberry400,
48
+ bottom: 0,
49
+ content: "''",
50
+ left: 0,
51
+ marginTop: '-2px',
52
+ width: '100%',
53
+ },
54
+ '&:hover, &:focus': {
55
+ backgroundColor: "transparent",
44
56
  color: colors.blueberry400,
45
- cursor: 'default',
46
- '&:after': {
47
- position: 'absolute',
48
- height: space.xxxs,
49
- borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px",
50
- backgroundColor: colors.blueberry400,
51
- bottom: 0,
52
- content: "''",
53
- left: 0,
54
- marginTop: '-2px',
55
- width: '100%',
56
- },
57
- '&:hover, &:focus': {
58
- backgroundColor: "transparent",
59
- color: colors.blueberry400,
60
- },
61
- };
62
- }
63
- return {};
64
- });
57
+ },
58
+ } }));
65
59
  var useTab = function (model, elemProps, ref) {
66
60
  if (elemProps === void 0) { elemProps = {}; }
67
61
  var _a = useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
package/dist/es6/tooltip/lib/OverflowTooltip.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { Placement } from '@workday/canvas-kit-react/popup';
3
+ /**
4
+ * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
5
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
6
+ */
7
+ export declare const findOverflowElement: (element: Element) => Element | null;
8
+ /**
9
+ * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
10
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
11
+ */
12
+ export declare const findEllipsisElement: (element: Element) => Element | null;
3
13
  export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
4
14
  /**
5
15
  * The target (anchor element) for the Tooltip.
package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AA+D7F,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,8EA4C3B,CAAC"}
1
+ {"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sCAoB/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sCAe/B,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,8EA4C3B,CAAC"}
package/dist/es6/tooltip/lib/OverflowTooltip.js CHANGED
@@ -29,7 +29,7 @@ import { useTooltip } from './useTooltip';
29
29
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
30
30
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
31
31
  */
32
- var findOverflowElement = function (element) {
32
+ export var findOverflowElement = function (element) {
33
33
  var style = getComputedStyle(element);
34
34
  if (style.overflow === 'auto' ||
35
35
  style.overflow === 'scroll' ||
@@ -53,12 +53,13 @@ var findOverflowElement = function (element) {
53
53
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
54
54
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
55
55
  */
56
- var findEllipsisElement = function (element) {
56
+ export var findEllipsisElement = function (element) {
57
57
  var style = getComputedStyle(element);
58
58
  if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
59
59
  return element;
60
60
  }
61
- else {
61
+ else if (element.children) {
62
+ // `children` is not defined for SVGElement in IE11
62
63
  for (var i = 0; i < element.children.length; i++) {
63
64
  var overflowElement = findEllipsisElement(element.children[i]);
64
65
  if (overflowElement) {
@@ -67,6 +68,7 @@ var findEllipsisElement = function (element) {
67
68
  }
68
69
  return null;
69
70
  }
71
+ return null;
70
72
  };
71
73
  var isOverflowed = function (element) {
72
74
  var overflowElement = findEllipsisElement(element) || findOverflowElement(element);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "5.2.8",
3
+ "version": "5.2.12",
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",
@@ -57,9 +57,9 @@
57
57
  "@popperjs/core": "^2.5.4",
58
58
  "@workday/canvas-colors-web": "^2.0.0",
59
59
  "@workday/canvas-depth-web": "^0.16.4",
60
- "@workday/canvas-kit-labs-react": "^5.2.8",
61
- "@workday/canvas-kit-popup-stack": "^5.2.8",
62
- "@workday/canvas-kit-preview-react": "^5.2.8",
60
+ "@workday/canvas-kit-labs-react": "^5.2.12",
61
+ "@workday/canvas-kit-popup-stack": "^5.2.12",
62
+ "@workday/canvas-kit-preview-react": "^5.2.12",
63
63
  "@workday/canvas-system-icons-web": "1.0.41",
64
64
  "@workday/design-assets-types": "^0.2.4",
65
65
  "chroma-js": "^2.1.0",
@@ -75,5 +75,5 @@
75
75
  "@workday/canvas-accent-icons-web": "^1.0.0",
76
76
  "@workday/canvas-applet-icons-web": "^0.17.50"
77
77
  },
78
- "gitHead": "f2f599654876700f483a1d8c5de82a41315c76f1"
78
+ "gitHead": "770f2b5c01740f511eda01c751cafaada468f21f"
79
79
  }
package/tabs/lib/Tab.tsx CHANGED
@@ -63,72 +63,66 @@ export interface TabProps {
63
63
  tabIndex?: number;
64
64
  }
65
65
 
66
- const StyledButton = styled('button')<{isSelected: boolean} & StyledType>(
67
- {
68
- ...type.levels.subtext.large,
69
- fontWeight: type.properties.fontWeights.medium,
70
- border: 'none',
71
- backgroundColor: 'transparent',
72
- flex: '0 0 auto',
73
- maxWidth: '280px',
74
- padding: space.s,
75
- boxSizing: 'border-box',
76
- cursor: 'pointer',
77
- color: colors.licorice300,
78
- position: 'relative',
79
- marginLeft: `${space.xxxs}`,
80
- borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
81
- transition: 'background 150ms ease, color 150ms ease',
82
-
83
- '&:first-of-type': {
84
- marginLeft: 0,
85
- },
66
+ const StyledButton = styled('button')<{isSelected: boolean} & StyledType>({
67
+ ...type.levels.subtext.large,
68
+ fontWeight: type.properties.fontWeights.medium,
69
+ border: 'none',
70
+ backgroundColor: 'transparent',
71
+ flex: '0 0 auto',
72
+ maxWidth: '280px',
73
+ padding: space.s,
74
+ boxSizing: 'border-box',
75
+ cursor: 'pointer',
76
+ color: colors.licorice300,
77
+ position: 'relative',
78
+ marginLeft: `${space.xxxs}`,
79
+ borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
80
+ transition: 'background 150ms ease, color 150ms ease',
81
+
82
+ '&:first-of-type': {
83
+ marginLeft: 0,
84
+ },
86
85
 
87
- ...hideMouseFocus,
86
+ ...hideMouseFocus,
88
87
 
89
- '&:hover, &:focus': {
90
- backgroundColor: colors.soap200,
91
- color: colors.blackPepper400,
92
- },
88
+ '&:hover, &:focus': {
89
+ backgroundColor: colors.soap200,
90
+ color: colors.blackPepper400,
91
+ },
93
92
 
94
- '&:focus': {
95
- outline: `none`,
96
- ...focusRing({inset: 'outer', width: 0, separation: 2}),
93
+ '&:focus': {
94
+ outline: `none`,
95
+ ...focusRing({inset: 'outer', width: 0, separation: 2}),
96
+ },
97
+
98
+ '&:disabled': {
99
+ color: colors.licorice100,
100
+ '&:hover': {
101
+ cursor: 'auto',
102
+ backgroundColor: `transparent`,
97
103
  },
104
+ },
98
105
 
99
- '&:disabled': {
100
- color: colors.licorice100,
101
- '&:hover': {
102
- cursor: 'auto',
103
- backgroundColor: `transparent`,
104
- },
106
+ '&[aria-selected=true]': {
107
+ color: colors.blueberry400,
108
+ cursor: 'default',
109
+ '&:after': {
110
+ position: 'absolute',
111
+ height: space.xxxs,
112
+ borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
113
+ backgroundColor: colors.blueberry400,
114
+ bottom: 0,
115
+ content: `''`,
116
+ left: 0,
117
+ marginTop: '-2px',
118
+ width: '100%',
119
+ },
120
+ '&:hover, &:focus': {
121
+ backgroundColor: `transparent`,
122
+ color: colors.blueberry400,
105
123
  },
106
124
  },
107
- ({isSelected}) => {
108
- if (isSelected) {
109
- return {
110
- color: colors.blueberry400,
111
- cursor: 'default',
112
- '&:after': {
113
- position: 'absolute',
114
- height: space.xxxs,
115
- borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
116
- backgroundColor: colors.blueberry400,
117
- bottom: 0,
118
- content: `''`,
119
- left: 0,
120
- marginTop: '-2px',
121
- width: '100%',
122
- },
123
- '&:hover, &:focus': {
124
- backgroundColor: `transparent`,
125
- color: colors.blueberry400,
126
- },
127
- };
128
- }
129
- return {};
130
- }
131
- );
125
+ });
132
126
 
133
127
  const useTab = (
134
128
  model: TabsModel,
package/tooltip/lib/OverflowTooltip.tsx CHANGED
@@ -10,7 +10,7 @@ import {useTooltip} from './useTooltip';
10
10
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
11
11
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
12
12
  */
13
- const findOverflowElement = (element: Element): Element | null => {
13
+ export const findOverflowElement = (element: Element): Element | null => {
14
14
  const style = getComputedStyle(element);
15
15
  if (
16
16
  style.overflow === 'auto' ||
@@ -36,11 +36,12 @@ const findOverflowElement = (element: Element): Element | null => {
36
36
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
37
37
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
38
38
  */
39
- const findEllipsisElement = (element: Element): Element | null => {
39
+ export const findEllipsisElement = (element: Element): Element | null => {
40
40
  const style = getComputedStyle(element);
41
41
  if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
42
42
  return element;
43
- } else {
43
+ } else if (element.children) {
44
+ // `children` is not defined for SVGElement in IE11
44
45
  for (let i = 0; i < element.children.length; i++) {
45
46
  const overflowElement = findEllipsisElement(element.children[i]);
46
47
  if (overflowElement) {
@@ -49,6 +50,7 @@ const findEllipsisElement = (element: Element): Element | null => {
49
50
  }
50
51
  return null;
51
52
  }
53
+ return null;
52
54
  };
53
55
 
54
56
  const isOverflowed = (element: Element) => {
package/ts3.5/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { Placement } from '@workday/canvas-kit-react/popup';
3
+ /**
4
+ * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
5
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
6
+ */
7
+ export declare const findOverflowElement: (element: Element) => Element | null;
8
+ /**
9
+ * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
10
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
11
+ */
12
+ export declare const findEllipsisElement: (element: Element) => Element | null;
3
13
  export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
4
14
  /**
5
15
  * The target (anchor element) for the Tooltip.
package/ts3.5/dist/es6/tooltip/lib/OverflowTooltip.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { Placement } from '@workday/canvas-kit-react/popup';
3
+ /**
4
+ * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
5
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
6
+ */
7
+ export declare const findOverflowElement: (element: Element) => Element | null;
8
+ /**
9
+ * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
10
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
11
+ */
12
+ export declare const findEllipsisElement: (element: Element) => Element | null;
3
13
  export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
4
14
  /**
5
15
  * The target (anchor element) for the Tooltip.