@workday/canvas-kit-preview-react 6.1.5 → 6.3.0-next.0
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/Breadcrumbs/Dropdown/Menu.tsx +0 -2
- package/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts +0 -1
- package/breadcrumbs/lib/Breadcrumbs/List/Collapsible.tsx +0 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +0 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.js +0 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Collapsible.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Collapsible.js +0 -1
- package/dist/commonjs/index.js +1 -0
- package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/Menu.js +1 -2
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +2 -3
- package/dist/commonjs/select/lib/SelectMenu.d.ts.map +1 -1
- package/dist/commonjs/select/lib/SelectMenu.js +1 -0
- package/dist/commonjs/side-panel/lib/hooks.d.ts +7 -7
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +0 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.js +0 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/Collapsible.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/Collapsible.js +0 -1
- package/dist/es6/index.js +1 -0
- package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
- package/dist/es6/menu/lib/Menu.js +2 -3
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +3 -4
- package/dist/es6/select/lib/SelectMenu.d.ts.map +1 -1
- package/dist/es6/select/lib/SelectMenu.js +2 -1
- package/dist/es6/side-panel/lib/hooks.d.ts +7 -7
- package/index.ts +2 -0
- package/menu/lib/Menu.tsx +3 -3
- package/package.json +5 -7
- package/select/lib/Select.tsx +9 -4
- package/select/lib/SelectMenu.tsx +2 -0
- package/side-panel/lib/hooks.ts +7 -7
- package/ts3.5/dist/commonjs/side-panel/lib/hooks.d.ts +7 -7
- package/ts3.5/dist/es6/side-panel/lib/hooks.d.ts +7 -7
|
@@ -17,7 +17,6 @@ export const useFocusActiveItemElement = <E extends HTMLElement>(
|
|
|
17
17
|
activeDropdownItemRef: React.RefObject<E>
|
|
18
18
|
) => {
|
|
19
19
|
useLayoutEffect(() => {
|
|
20
|
-
console.log('useFocusActiveItem');
|
|
21
20
|
if (activeDropdownItemRef.current) {
|
|
22
21
|
return activeDropdownItemRef.current.focus();
|
|
23
22
|
}
|
|
@@ -42,7 +42,6 @@ export const CollapsibleList = ({
|
|
|
42
42
|
const {shouldCollapseList} = useCollapse(listRef, maxWidth);
|
|
43
43
|
const {collapsedItems, collapsedItemIndices} = useBuildCollapsedList(listRef, children, maxWidth);
|
|
44
44
|
const {rootItem, collapsibleItems, currentItem} = parseListItems(children);
|
|
45
|
-
console.log(collapsedItems, collapsedItemIndices);
|
|
46
45
|
return (
|
|
47
46
|
<BreadcrumbsList ref={listRef} {...props}>
|
|
48
47
|
{rootItem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,6LAqExB,CAAC"}
|
|
@@ -78,7 +78,6 @@ exports.DropdownMenu = function (_a) {
|
|
|
78
78
|
break;
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
console.log('dropdownItems', dropdownItems);
|
|
82
81
|
return (core_1.jsx("div", { css: menuStyles },
|
|
83
82
|
core_1.jsx(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
|
|
84
83
|
var index = item.index, link = item.link, text = item.text, elemProps = __rest(item, ["index", "link", "text"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts"],"names":[],"mappings":";AAEA,OAAO,EAML,cAAc,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts"],"names":[],"mappings":";AAEA,OAAO,EAML,cAAc,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,yBAAyB,sFAQrC,CAAC;AASF,UAAU,WAAW;IACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;IAC7D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,0IAsEvB,CAAC"}
|
|
@@ -5,7 +5,6 @@ var common_1 = require("@workday/canvas-kit-react/common");
|
|
|
5
5
|
var popup_1 = require("@workday/canvas-kit-react/popup");
|
|
6
6
|
exports.useFocusActiveItemElement = function (activeDropdownItemRef) {
|
|
7
7
|
react_1.useLayoutEffect(function () {
|
|
8
|
-
console.log('useFocusActiveItem');
|
|
9
8
|
if (activeDropdownItemRef.current) {
|
|
10
9
|
return activeDropdownItemRef.current.focus();
|
|
11
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AASvD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACzC;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AASvD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACzC;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,sGAkC3B,CAAC"}
|
|
@@ -50,7 +50,6 @@ exports.CollapsibleList = function (_a) {
|
|
|
50
50
|
var shouldCollapseList = hooks_1.useCollapse(listRef, maxWidth).shouldCollapseList;
|
|
51
51
|
var _b = hooks_1.useBuildCollapsedList(listRef, children, maxWidth), collapsedItems = _b.collapsedItems, collapsedItemIndices = _b.collapsedItemIndices;
|
|
52
52
|
var _c = parseListItems(children), rootItem = _c.rootItem, collapsibleItems = _c.collapsibleItems, currentItem = _c.currentItem;
|
|
53
|
-
console.log(collapsedItems, collapsedItemIndices);
|
|
54
53
|
return (react_1.default.createElement(index_1.BreadcrumbsList, __assign({ ref: listRef }, props),
|
|
55
54
|
rootItem,
|
|
56
55
|
shouldCollapseList && (react_1.default.createElement(ListItem_1.BreadcrumbsListItem, null,
|
package/dist/commonjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,wCAQ3B;IAEK,sBAAsB,sCAE3B;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
|
|
@@ -47,7 +47,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
47
47
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
48
|
var React = __importStar(require("react"));
|
|
49
49
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
50
|
-
var v4_1 = __importDefault(require("uuid/v4"));
|
|
51
50
|
var card_1 = require("@workday/canvas-kit-react/card");
|
|
52
51
|
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
53
52
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
@@ -58,7 +57,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
58
57
|
__extends(Menu, _super);
|
|
59
58
|
function Menu(props) {
|
|
60
59
|
var _this = _super.call(this, props) || this;
|
|
61
|
-
_this.id =
|
|
60
|
+
_this.id = common_1.generateUniqueId();
|
|
62
61
|
_this.getNormalizedItemIndex = function (index) {
|
|
63
62
|
var itemCount = React.Children.count(_this.props.children);
|
|
64
63
|
var firstItem = 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAmB,EAAC,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAIvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAmiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -50,7 +50,6 @@ var common_1 = require("@workday/canvas-kit-react/common");
|
|
|
50
50
|
var SelectMenu_1 = require("./SelectMenu");
|
|
51
51
|
var SelectBase_1 = __importDefault(require("./SelectBase"));
|
|
52
52
|
var utils_1 = require("./utils");
|
|
53
|
-
var v4_1 = __importDefault(require("uuid/v4"));
|
|
54
53
|
var SelectContainer = /** @class */ (function (_super) {
|
|
55
54
|
__extends(SelectContainer, _super);
|
|
56
55
|
function SelectContainer(props) {
|
|
@@ -88,14 +87,14 @@ var SelectContainer = /** @class */ (function (_super) {
|
|
|
88
87
|
var disabled, id, label, value;
|
|
89
88
|
if (typeof option === 'string') {
|
|
90
89
|
disabled = false;
|
|
91
|
-
id =
|
|
90
|
+
id = common_1.generateUniqueId();
|
|
92
91
|
value = option;
|
|
93
92
|
label = option;
|
|
94
93
|
}
|
|
95
94
|
else {
|
|
96
95
|
data = option.data || data;
|
|
97
96
|
disabled = !!option.disabled;
|
|
98
|
-
id = option.id ||
|
|
97
|
+
id = option.id || common_1.generateUniqueId();
|
|
99
98
|
value = option.value;
|
|
100
99
|
label = option.label || option.value;
|
|
101
100
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,QAAA,MAAM,UAAU,0JAsEf,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -212,6 +212,7 @@ var SelectMenu = function (_a) {
|
|
|
212
212
|
popup_1.useCloseOnEscape(model);
|
|
213
213
|
popup_1.useCloseOnOutsideClick(model);
|
|
214
214
|
popup_1.useReturnFocus(model);
|
|
215
|
+
popup_1.useTransferOnFullscreenExit(model);
|
|
215
216
|
return (react_1.default.createElement(popup_1.Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
|
|
216
217
|
menuRef: menuRef,
|
|
217
218
|
placement: placement,
|
|
@@ -9,12 +9,12 @@ export interface UseSidePanelProps {
|
|
|
9
9
|
initialExpanded?: boolean;
|
|
10
10
|
/**
|
|
11
11
|
* sets the `id` for the panel
|
|
12
|
-
* @default
|
|
12
|
+
* @default unique identifier
|
|
13
13
|
*/
|
|
14
14
|
panelId?: string;
|
|
15
15
|
/**
|
|
16
16
|
* sets the `id` for the label
|
|
17
|
-
* @default
|
|
17
|
+
* @default unique identifier
|
|
18
18
|
*/
|
|
19
19
|
labelId?: string;
|
|
20
20
|
}
|
|
@@ -28,12 +28,12 @@ export interface PanelProps {
|
|
|
28
28
|
expanded: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* the accessible `id`
|
|
31
|
-
* - this will either be a
|
|
31
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
32
32
|
*/
|
|
33
33
|
id: string;
|
|
34
34
|
/**
|
|
35
35
|
* the accessible label `id`
|
|
36
|
-
* - this will either be a
|
|
36
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
37
37
|
*/
|
|
38
38
|
'aria-labelledby': string;
|
|
39
39
|
/**
|
|
@@ -45,14 +45,14 @@ export interface PanelProps {
|
|
|
45
45
|
export interface LabelProps {
|
|
46
46
|
/**
|
|
47
47
|
* the accessible `id`
|
|
48
|
-
* - this will either be a
|
|
48
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
49
49
|
*/
|
|
50
50
|
id: string;
|
|
51
51
|
}
|
|
52
52
|
export interface ControlProps {
|
|
53
53
|
/**
|
|
54
54
|
* the accessible `id` that connects the panel to this control
|
|
55
|
-
* - this will either be a
|
|
55
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
56
56
|
*/
|
|
57
57
|
'aria-controls': string;
|
|
58
58
|
/**
|
|
@@ -62,7 +62,7 @@ export interface ControlProps {
|
|
|
62
62
|
'aria-expanded': boolean;
|
|
63
63
|
/**
|
|
64
64
|
* the accessible label `id`
|
|
65
|
-
* - this will either be a
|
|
65
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
66
66
|
*/
|
|
67
67
|
'aria-labelledby': string;
|
|
68
68
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,6LAqExB,CAAC"}
|
|
@@ -76,7 +76,6 @@ export var DropdownMenu = function (_a) {
|
|
|
76
76
|
break;
|
|
77
77
|
}
|
|
78
78
|
};
|
|
79
|
-
console.log('dropdownItems', dropdownItems);
|
|
80
79
|
return (jsx("div", { css: menuStyles },
|
|
81
80
|
jsx(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
|
|
82
81
|
var index = item.index, link = item.link, text = item.text, elemProps = __rest(item, ["index", "link", "text"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts"],"names":[],"mappings":";AAEA,OAAO,EAML,cAAc,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts"],"names":[],"mappings":";AAEA,OAAO,EAML,cAAc,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,yBAAyB,sFAQrC,CAAC;AASF,UAAU,WAAW;IACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;IAC7D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,0IAsEvB,CAAC"}
|
|
@@ -3,7 +3,6 @@ import { useUniqueId, changeFocus } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { useCloseOnOutsideClick, useCloseOnEscape, usePopupModel, useReturnFocus, usePopupTarget, usePopupPopper, } from '@workday/canvas-kit-react/popup';
|
|
4
4
|
export var useFocusActiveItemElement = function (activeDropdownItemRef) {
|
|
5
5
|
useLayoutEffect(function () {
|
|
6
|
-
console.log('useFocusActiveItem');
|
|
7
6
|
if (activeDropdownItemRef.current) {
|
|
8
7
|
return activeDropdownItemRef.current.focus();
|
|
9
8
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AASvD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACzC;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AASvD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACzC;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,sGAkC3B,CAAC"}
|
|
@@ -41,7 +41,6 @@ export var CollapsibleList = function (_a) {
|
|
|
41
41
|
var shouldCollapseList = useCollapse(listRef, maxWidth).shouldCollapseList;
|
|
42
42
|
var _b = useBuildCollapsedList(listRef, children, maxWidth), collapsedItems = _b.collapsedItems, collapsedItemIndices = _b.collapsedItemIndices;
|
|
43
43
|
var _c = parseListItems(children), rootItem = _c.rootItem, collapsibleItems = _c.collapsibleItems, currentItem = _c.currentItem;
|
|
44
|
-
console.log(collapsedItems, collapsedItemIndices);
|
|
45
44
|
return (React.createElement(BreadcrumbsList, __assign({ ref: listRef }, props),
|
|
46
45
|
rootItem,
|
|
47
46
|
shouldCollapseList && (React.createElement(BreadcrumbsListItem, null,
|
package/dist/es6/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,wCAQ3B;IAEK,sBAAsB,sCAE3B;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
|
|
@@ -35,10 +35,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
35
35
|
};
|
|
36
36
|
import * as React from 'react';
|
|
37
37
|
import styled from '@emotion/styled';
|
|
38
|
-
import uuid from 'uuid/v4';
|
|
39
38
|
import { Card } from '@workday/canvas-kit-react/card';
|
|
40
39
|
import { commonColors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
|
|
41
|
-
import { hideMouseFocus } from '@workday/canvas-kit-react/common';
|
|
40
|
+
import { hideMouseFocus, generateUniqueId } from '@workday/canvas-kit-react/common';
|
|
42
41
|
var List = styled('ul')(__assign({ background: commonColors.background, borderRadius: borderRadius.m, padding: 0, margin: space.xxs + " 0", '&:focus': {
|
|
43
42
|
outline: 'none',
|
|
44
43
|
} }, hideMouseFocus));
|
|
@@ -46,7 +45,7 @@ var Menu = /** @class */ (function (_super) {
|
|
|
46
45
|
__extends(Menu, _super);
|
|
47
46
|
function Menu(props) {
|
|
48
47
|
var _this = _super.call(this, props) || this;
|
|
49
|
-
_this.id =
|
|
48
|
+
_this.id = generateUniqueId();
|
|
50
49
|
_this.getNormalizedItemIndex = function (index) {
|
|
51
50
|
var itemCount = React.Children.count(_this.props.children);
|
|
52
51
|
var firstItem = 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAmB,EAAC,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAIvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAmiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -34,11 +34,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
34
34
|
return t;
|
|
35
35
|
};
|
|
36
36
|
import * as React from 'react';
|
|
37
|
-
import { ErrorType, createComponent, useForkRef } from '@workday/canvas-kit-react/common';
|
|
37
|
+
import { ErrorType, createComponent, useForkRef, generateUniqueId, } from '@workday/canvas-kit-react/common';
|
|
38
38
|
import { menuAnimationDuration } from './SelectMenu';
|
|
39
39
|
import SelectBase from './SelectBase';
|
|
40
40
|
import { getCorrectedIndexByValue } from './utils';
|
|
41
|
-
import uuid from 'uuid/v4';
|
|
42
41
|
var SelectContainer = /** @class */ (function (_super) {
|
|
43
42
|
__extends(SelectContainer, _super);
|
|
44
43
|
function SelectContainer(props) {
|
|
@@ -76,14 +75,14 @@ var SelectContainer = /** @class */ (function (_super) {
|
|
|
76
75
|
var disabled, id, label, value;
|
|
77
76
|
if (typeof option === 'string') {
|
|
78
77
|
disabled = false;
|
|
79
|
-
id =
|
|
78
|
+
id = generateUniqueId();
|
|
80
79
|
value = option;
|
|
81
80
|
label = option;
|
|
82
81
|
}
|
|
83
82
|
else {
|
|
84
83
|
data = option.data || data;
|
|
85
84
|
disabled = !!option.disabled;
|
|
86
|
-
id = option.id ||
|
|
85
|
+
id = option.id || generateUniqueId();
|
|
87
86
|
value = option.value;
|
|
88
87
|
label = option.label || option.value;
|
|
89
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,QAAA,MAAM,UAAU,0JAsEf,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import React, { useState, useEffect, useLayoutEffect, useCallback } from 'react';
|
|
24
24
|
import { ErrorType, styled } from '@workday/canvas-kit-react/common';
|
|
25
|
-
import { Popper, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
|
|
25
|
+
import { Popper, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, useTransferOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
|
|
26
26
|
import { colors, borderRadius, inputColors } from '@workday/canvas-kit-react/tokens';
|
|
27
27
|
import { buttonBorderWidth } from './SelectBase';
|
|
28
28
|
export var menuAnimationDuration = 200;
|
|
@@ -203,6 +203,7 @@ var SelectMenu = function (_a) {
|
|
|
203
203
|
useCloseOnEscape(model);
|
|
204
204
|
useCloseOnOutsideClick(model);
|
|
205
205
|
useReturnFocus(model);
|
|
206
|
+
useTransferOnFullscreenExit(model);
|
|
206
207
|
return (React.createElement(Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
|
|
207
208
|
menuRef: menuRef,
|
|
208
209
|
placement: placement,
|
|
@@ -9,12 +9,12 @@ export interface UseSidePanelProps {
|
|
|
9
9
|
initialExpanded?: boolean;
|
|
10
10
|
/**
|
|
11
11
|
* sets the `id` for the panel
|
|
12
|
-
* @default
|
|
12
|
+
* @default unique identifier
|
|
13
13
|
*/
|
|
14
14
|
panelId?: string;
|
|
15
15
|
/**
|
|
16
16
|
* sets the `id` for the label
|
|
17
|
-
* @default
|
|
17
|
+
* @default unique identifier
|
|
18
18
|
*/
|
|
19
19
|
labelId?: string;
|
|
20
20
|
}
|
|
@@ -28,12 +28,12 @@ export interface PanelProps {
|
|
|
28
28
|
expanded: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* the accessible `id`
|
|
31
|
-
* - this will either be a
|
|
31
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
32
32
|
*/
|
|
33
33
|
id: string;
|
|
34
34
|
/**
|
|
35
35
|
* the accessible label `id`
|
|
36
|
-
* - this will either be a
|
|
36
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
37
37
|
*/
|
|
38
38
|
'aria-labelledby': string;
|
|
39
39
|
/**
|
|
@@ -45,14 +45,14 @@ export interface PanelProps {
|
|
|
45
45
|
export interface LabelProps {
|
|
46
46
|
/**
|
|
47
47
|
* the accessible `id`
|
|
48
|
-
* - this will either be a
|
|
48
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
49
49
|
*/
|
|
50
50
|
id: string;
|
|
51
51
|
}
|
|
52
52
|
export interface ControlProps {
|
|
53
53
|
/**
|
|
54
54
|
* the accessible `id` that connects the panel to this control
|
|
55
|
-
* - this will either be a
|
|
55
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
56
56
|
*/
|
|
57
57
|
'aria-controls': string;
|
|
58
58
|
/**
|
|
@@ -62,7 +62,7 @@ export interface ControlProps {
|
|
|
62
62
|
'aria-expanded': boolean;
|
|
63
63
|
/**
|
|
64
64
|
* the accessible label `id`
|
|
65
|
-
* - this will either be a
|
|
65
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
66
66
|
*/
|
|
67
67
|
'aria-labelledby': string;
|
|
68
68
|
/**
|
package/index.ts
CHANGED
package/menu/lib/Menu.tsx
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
|
-
|
|
3
|
+
|
|
4
4
|
import {MenuItemProps} from './MenuItem';
|
|
5
5
|
import {Card} from '@workday/canvas-kit-react/card';
|
|
6
6
|
import {commonColors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
|
|
7
|
-
import {hideMouseFocus, GrowthBehavior} from '@workday/canvas-kit-react/common';
|
|
7
|
+
import {hideMouseFocus, GrowthBehavior, generateUniqueId} from '@workday/canvas-kit-react/common';
|
|
8
8
|
|
|
9
9
|
export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
|
|
10
10
|
/**
|
|
@@ -58,7 +58,7 @@ const List = styled('ul')({
|
|
|
58
58
|
});
|
|
59
59
|
|
|
60
60
|
export default class Menu extends React.Component<MenuProps, MenuState> {
|
|
61
|
-
private id =
|
|
61
|
+
private id = generateUniqueId();
|
|
62
62
|
private animateId!: number;
|
|
63
63
|
|
|
64
64
|
private menuRef: React.RefObject<HTMLUListElement>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0-next.0+6e10a940",
|
|
4
4
|
"description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -54,17 +54,15 @@
|
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@emotion/core": "^10.0.28",
|
|
56
56
|
"@emotion/styled": "^10.0.27",
|
|
57
|
-
"@
|
|
58
|
-
"@workday/canvas-kit-react": "^6.1.5",
|
|
57
|
+
"@workday/canvas-kit-react": "^6.3.0-next.0+6e10a940",
|
|
59
58
|
"@workday/canvas-system-icons-web": "1.0.41",
|
|
60
|
-
"@workday/design-assets-types": "^0.2.4"
|
|
61
|
-
"uuid": "^3.3.3"
|
|
59
|
+
"@workday/design-assets-types": "^0.2.4"
|
|
62
60
|
},
|
|
63
61
|
"devDependencies": {
|
|
64
62
|
"@workday/canvas-accent-icons-web": "^1.0.0",
|
|
65
|
-
"@workday/canvas-kit-labs-react": "^6.
|
|
63
|
+
"@workday/canvas-kit-labs-react": "^6.3.0-next.0+6e10a940",
|
|
66
64
|
"formik": "^2.2.9",
|
|
67
65
|
"yup": "^0.31.1"
|
|
68
66
|
},
|
|
69
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "6e10a940283828fb6e34b23598a917a478bbabd6"
|
|
70
68
|
}
|
package/select/lib/Select.tsx
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
ErrorType,
|
|
4
|
+
StyledType,
|
|
5
|
+
createComponent,
|
|
6
|
+
useForkRef,
|
|
7
|
+
generateUniqueId,
|
|
8
|
+
} from '@workday/canvas-kit-react/common';
|
|
3
9
|
import {menuAnimationDuration} from './SelectMenu';
|
|
4
10
|
import SelectBase, {CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
|
|
5
11
|
import {MenuVisibility} from './types';
|
|
6
12
|
import {getCorrectedIndexByValue} from './utils';
|
|
7
|
-
import uuid from 'uuid/v4';
|
|
8
13
|
|
|
9
14
|
export interface SelectProps extends CoreSelectBaseProps {
|
|
10
15
|
/**
|
|
@@ -87,13 +92,13 @@ class SelectContainer extends React.Component<SelectContainerProps, SelectContai
|
|
|
87
92
|
|
|
88
93
|
if (typeof option === 'string') {
|
|
89
94
|
disabled = false;
|
|
90
|
-
id =
|
|
95
|
+
id = generateUniqueId();
|
|
91
96
|
value = option;
|
|
92
97
|
label = option;
|
|
93
98
|
} else {
|
|
94
99
|
data = option.data || data;
|
|
95
100
|
disabled = !!option.disabled;
|
|
96
|
-
id = option.id ||
|
|
101
|
+
id = option.id || generateUniqueId();
|
|
97
102
|
value = option.value;
|
|
98
103
|
label = option.label || option.value;
|
|
99
104
|
}
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
useCloseOnOutsideClick,
|
|
10
10
|
usePopupModel,
|
|
11
11
|
useReturnFocus,
|
|
12
|
+
useTransferOnFullscreenExit,
|
|
12
13
|
} from '@workday/canvas-kit-react/popup';
|
|
13
14
|
import {colors, borderRadius, inputColors} from '@workday/canvas-kit-react/tokens';
|
|
14
15
|
|
|
@@ -271,6 +272,7 @@ const SelectMenu = ({
|
|
|
271
272
|
useCloseOnEscape(model);
|
|
272
273
|
useCloseOnOutsideClick(model);
|
|
273
274
|
useReturnFocus(model);
|
|
275
|
+
useTransferOnFullscreenExit(model);
|
|
274
276
|
|
|
275
277
|
return (
|
|
276
278
|
<Popper
|
package/side-panel/lib/hooks.ts
CHANGED
|
@@ -12,12 +12,12 @@ export interface UseSidePanelProps {
|
|
|
12
12
|
initialExpanded?: boolean;
|
|
13
13
|
/**
|
|
14
14
|
* sets the `id` for the panel
|
|
15
|
-
* @default
|
|
15
|
+
* @default unique identifier
|
|
16
16
|
*/
|
|
17
17
|
panelId?: string;
|
|
18
18
|
/**
|
|
19
19
|
* sets the `id` for the label
|
|
20
|
-
* @default
|
|
20
|
+
* @default unique identifier
|
|
21
21
|
*/
|
|
22
22
|
labelId?: string;
|
|
23
23
|
}
|
|
@@ -32,12 +32,12 @@ export interface PanelProps {
|
|
|
32
32
|
expanded: boolean;
|
|
33
33
|
/**
|
|
34
34
|
* the accessible `id`
|
|
35
|
-
* - this will either be a
|
|
35
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
36
36
|
*/
|
|
37
37
|
id: string;
|
|
38
38
|
/**
|
|
39
39
|
* the accessible label `id`
|
|
40
|
-
* - this will either be a
|
|
40
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
41
41
|
*/
|
|
42
42
|
'aria-labelledby': string;
|
|
43
43
|
/**
|
|
@@ -50,7 +50,7 @@ export interface PanelProps {
|
|
|
50
50
|
export interface LabelProps {
|
|
51
51
|
/**
|
|
52
52
|
* the accessible `id`
|
|
53
|
-
* - this will either be a
|
|
53
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
54
54
|
*/
|
|
55
55
|
id: string;
|
|
56
56
|
}
|
|
@@ -58,7 +58,7 @@ export interface LabelProps {
|
|
|
58
58
|
export interface ControlProps {
|
|
59
59
|
/**
|
|
60
60
|
* the accessible `id` that connects the panel to this control
|
|
61
|
-
* - this will either be a
|
|
61
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
62
62
|
*/
|
|
63
63
|
'aria-controls': string;
|
|
64
64
|
/**
|
|
@@ -68,7 +68,7 @@ export interface ControlProps {
|
|
|
68
68
|
'aria-expanded': boolean;
|
|
69
69
|
/**
|
|
70
70
|
* the accessible label `id`
|
|
71
|
-
* - this will either be a
|
|
71
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
72
72
|
*/
|
|
73
73
|
'aria-labelledby': string;
|
|
74
74
|
/**
|
|
@@ -9,12 +9,12 @@ export interface UseSidePanelProps {
|
|
|
9
9
|
initialExpanded?: boolean;
|
|
10
10
|
/**
|
|
11
11
|
* sets the `id` for the panel
|
|
12
|
-
* @default
|
|
12
|
+
* @default unique identifier
|
|
13
13
|
*/
|
|
14
14
|
panelId?: string;
|
|
15
15
|
/**
|
|
16
16
|
* sets the `id` for the label
|
|
17
|
-
* @default
|
|
17
|
+
* @default unique identifier
|
|
18
18
|
*/
|
|
19
19
|
labelId?: string;
|
|
20
20
|
}
|
|
@@ -28,12 +28,12 @@ export interface PanelProps {
|
|
|
28
28
|
expanded: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* the accessible `id`
|
|
31
|
-
* - this will either be a
|
|
31
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
32
32
|
*/
|
|
33
33
|
id: string;
|
|
34
34
|
/**
|
|
35
35
|
* the accessible label `id`
|
|
36
|
-
* - this will either be a
|
|
36
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
37
37
|
*/
|
|
38
38
|
'aria-labelledby': string;
|
|
39
39
|
/**
|
|
@@ -45,14 +45,14 @@ export interface PanelProps {
|
|
|
45
45
|
export interface LabelProps {
|
|
46
46
|
/**
|
|
47
47
|
* the accessible `id`
|
|
48
|
-
* - this will either be a
|
|
48
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
49
49
|
*/
|
|
50
50
|
id: string;
|
|
51
51
|
}
|
|
52
52
|
export interface ControlProps {
|
|
53
53
|
/**
|
|
54
54
|
* the accessible `id` that connects the panel to this control
|
|
55
|
-
* - this will either be a
|
|
55
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
56
56
|
*/
|
|
57
57
|
'aria-controls': string;
|
|
58
58
|
/**
|
|
@@ -62,7 +62,7 @@ export interface ControlProps {
|
|
|
62
62
|
'aria-expanded': boolean;
|
|
63
63
|
/**
|
|
64
64
|
* the accessible label `id`
|
|
65
|
-
* - this will either be a
|
|
65
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
66
66
|
*/
|
|
67
67
|
'aria-labelledby': string;
|
|
68
68
|
/**
|
|
@@ -9,12 +9,12 @@ export interface UseSidePanelProps {
|
|
|
9
9
|
initialExpanded?: boolean;
|
|
10
10
|
/**
|
|
11
11
|
* sets the `id` for the panel
|
|
12
|
-
* @default
|
|
12
|
+
* @default unique identifier
|
|
13
13
|
*/
|
|
14
14
|
panelId?: string;
|
|
15
15
|
/**
|
|
16
16
|
* sets the `id` for the label
|
|
17
|
-
* @default
|
|
17
|
+
* @default unique identifier
|
|
18
18
|
*/
|
|
19
19
|
labelId?: string;
|
|
20
20
|
}
|
|
@@ -28,12 +28,12 @@ export interface PanelProps {
|
|
|
28
28
|
expanded: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* the accessible `id`
|
|
31
|
-
* - this will either be a
|
|
31
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
32
32
|
*/
|
|
33
33
|
id: string;
|
|
34
34
|
/**
|
|
35
35
|
* the accessible label `id`
|
|
36
|
-
* - this will either be a
|
|
36
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
37
37
|
*/
|
|
38
38
|
'aria-labelledby': string;
|
|
39
39
|
/**
|
|
@@ -45,14 +45,14 @@ export interface PanelProps {
|
|
|
45
45
|
export interface LabelProps {
|
|
46
46
|
/**
|
|
47
47
|
* the accessible `id`
|
|
48
|
-
* - this will either be a
|
|
48
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
49
49
|
*/
|
|
50
50
|
id: string;
|
|
51
51
|
}
|
|
52
52
|
export interface ControlProps {
|
|
53
53
|
/**
|
|
54
54
|
* the accessible `id` that connects the panel to this control
|
|
55
|
-
* - this will either be a
|
|
55
|
+
* - this will either be a unique identifier value or the `panelId` provided in the config
|
|
56
56
|
*/
|
|
57
57
|
'aria-controls': string;
|
|
58
58
|
/**
|
|
@@ -62,7 +62,7 @@ export interface ControlProps {
|
|
|
62
62
|
'aria-expanded': boolean;
|
|
63
63
|
/**
|
|
64
64
|
* the accessible label `id`
|
|
65
|
-
* - this will either be a
|
|
65
|
+
* - this will either be a unique identifier value or the `labelId` provided in the config
|
|
66
66
|
*/
|
|
67
67
|
'aria-labelledby': string;
|
|
68
68
|
/**
|