@workday/canvas-kit-labs-react 6.2.1 → 6.3.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/combobox/lib/AutocompleteList.tsx +2 -3
- package/combobox/lib/Combobox.tsx +9 -4
- package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/AutocompleteList.js +1 -2
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Combobox.js +2 -3
- package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/commonjs/search-form/lib/SearchForm.js +1 -2
- package/dist/es6/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/es6/combobox/lib/AutocompleteList.js +2 -3
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.js +3 -4
- package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/es6/search-form/lib/SearchForm.js +2 -3
- package/package.json +5 -7
- package/search-form/lib/SearchForm.tsx +2 -3
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React, {Fragment, useState} from 'react';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import {space} from '@workday/canvas-kit-react/tokens';
|
|
4
|
-
import {accessibleHide} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {accessibleHide, generateUniqueId} from '@workday/canvas-kit-react/common';
|
|
5
5
|
import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
|
|
6
6
|
import {ComboBoxMenuItemGroup, getOptionId, listBoxIdPart, getTextFromElement} from './Combobox';
|
|
7
|
-
import uuid from 'uuid/v4';
|
|
8
7
|
|
|
9
8
|
const Autocomplete = styled('ul')({
|
|
10
9
|
margin: 0,
|
|
@@ -55,7 +54,7 @@ const AutocompleteList = ({
|
|
|
55
54
|
labelId,
|
|
56
55
|
showGroupText,
|
|
57
56
|
}: AutocompleteListProps) => {
|
|
58
|
-
const [randomComponentId] = useState(
|
|
57
|
+
const [randomComponentId] = useState(generateUniqueId); // https://codesandbox.io/s/p2ndq
|
|
59
58
|
|
|
60
59
|
const componentId = comboboxId || randomComponentId;
|
|
61
60
|
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import React, {useEffect, useLayoutEffect, useRef, useState, useCallback} from 'react';
|
|
2
2
|
import {CSSObject, jsx, keyframes} from '@emotion/core';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
GrowthBehavior,
|
|
5
|
+
useForkRef,
|
|
6
|
+
styled,
|
|
7
|
+
useIsRTL,
|
|
8
|
+
useUniqueId,
|
|
9
|
+
} from '@workday/canvas-kit-react/common';
|
|
4
10
|
import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
|
|
5
11
|
import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
|
|
6
12
|
import {Card} from '@workday/canvas-kit-react/card';
|
|
7
13
|
import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
|
|
8
14
|
import {xSmallIcon} from '@workday/canvas-system-icons-web';
|
|
9
15
|
import {TextInputProps} from '@workday/canvas-kit-react/text-input';
|
|
10
|
-
import uuid from 'uuid/v4';
|
|
11
16
|
import flatten from 'lodash.flatten';
|
|
12
17
|
import AutocompleteList from './AutocompleteList';
|
|
13
18
|
import Status from './Status';
|
|
@@ -200,8 +205,8 @@ const Combobox = ({
|
|
|
200
205
|
|
|
201
206
|
const comboboxRef: React.RefObject<HTMLDivElement> = useRef(null);
|
|
202
207
|
|
|
203
|
-
const
|
|
204
|
-
const
|
|
208
|
+
const randomComponentId = useUniqueId();
|
|
209
|
+
const randomLabelId = useUniqueId();
|
|
205
210
|
|
|
206
211
|
const componentId = id || randomComponentId;
|
|
207
212
|
const formLabelId = labelId || randomLabelId;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -33,7 +33,6 @@ var styled_1 = __importDefault(require("@emotion/styled"));
|
|
|
33
33
|
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
34
34
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
35
35
|
var Combobox_1 = require("./Combobox");
|
|
36
|
-
var v4_1 = __importDefault(require("uuid/v4"));
|
|
37
36
|
var Autocomplete = styled_1.default('ul')({
|
|
38
37
|
margin: 0,
|
|
39
38
|
maxHeight: 200,
|
|
@@ -44,7 +43,7 @@ var Autocomplete = styled_1.default('ul')({
|
|
|
44
43
|
var AccessibleHide = styled_1.default('span')(common_1.accessibleHide);
|
|
45
44
|
var AutocompleteList = function (_a) {
|
|
46
45
|
var autocompleteItems = _a.autocompleteItems, comboboxId = _a.comboboxId, selectedIndex = _a.selectedIndex, handleAutocompleteClick = _a.handleAutocompleteClick, labelId = _a.labelId, showGroupText = _a.showGroupText;
|
|
47
|
-
var randomComponentId = react_1.useState(
|
|
46
|
+
var randomComponentId = react_1.useState(common_1.generateUniqueId)[0]; // https://codesandbox.io/s/p2ndq
|
|
48
47
|
var componentId = comboboxId || randomComponentId;
|
|
49
48
|
var listBoxProps = {
|
|
50
49
|
role: 'listbox',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -39,7 +39,6 @@ var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
|
39
39
|
var card_1 = require("@workday/canvas-kit-react/card");
|
|
40
40
|
var button_1 = require("@workday/canvas-kit-react/button");
|
|
41
41
|
var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
42
|
-
var v4_1 = __importDefault(require("uuid/v4"));
|
|
43
42
|
var lodash_flatten_1 = __importDefault(require("lodash.flatten"));
|
|
44
43
|
var AutocompleteList_1 = __importDefault(require("./AutocompleteList"));
|
|
45
44
|
var Status_1 = __importDefault(require("./Status"));
|
|
@@ -145,8 +144,8 @@ var Combobox = function (_a) {
|
|
|
145
144
|
// to satisfy TS.
|
|
146
145
|
var elementRef = common_1.useForkRef(children.ref, inputRef);
|
|
147
146
|
var comboboxRef = react_1.useRef(null);
|
|
148
|
-
var randomComponentId =
|
|
149
|
-
var randomLabelId =
|
|
147
|
+
var randomComponentId = common_1.useUniqueId();
|
|
148
|
+
var randomLabelId = common_1.useUniqueId();
|
|
150
149
|
var componentId = id || randomComponentId;
|
|
151
150
|
var formLabelId = labelId || randomLabelId;
|
|
152
151
|
var _l = react_1.useState(false), showGroupText = _l[0], setShowGroupText = _l[1];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;IAEF,MAAM;CAmGP"}
|
|
@@ -55,7 +55,6 @@ var combobox_1 = require("@workday/canvas-kit-labs-react/combobox");
|
|
|
55
55
|
var text_input_1 = require("@workday/canvas-kit-react/text-input");
|
|
56
56
|
var themes_1 = require("./themes");
|
|
57
57
|
var chroma_js_1 = __importDefault(require("chroma-js"));
|
|
58
|
-
var v4_1 = __importDefault(require("uuid/v4"));
|
|
59
58
|
function getInputColors(theme, isFocused) {
|
|
60
59
|
return {
|
|
61
60
|
background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
|
|
@@ -203,7 +202,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
203
202
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
204
203
|
_this.inputRef = React.createRef();
|
|
205
204
|
_this.openRef = React.createRef();
|
|
206
|
-
_this.labelId =
|
|
205
|
+
_this.labelId = common_1.generateUniqueId();
|
|
207
206
|
_this.state = {
|
|
208
207
|
showForm: false,
|
|
209
208
|
searchQuery: '',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -19,9 +19,8 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
|
19
19
|
import React, { Fragment, useState } from 'react';
|
|
20
20
|
import styled from '@emotion/styled';
|
|
21
21
|
import { space } from '@workday/canvas-kit-react/tokens';
|
|
22
|
-
import { accessibleHide } from '@workday/canvas-kit-react/common';
|
|
22
|
+
import { accessibleHide, generateUniqueId } from '@workday/canvas-kit-react/common';
|
|
23
23
|
import { getOptionId, listBoxIdPart, getTextFromElement } from './Combobox';
|
|
24
|
-
import uuid from 'uuid/v4';
|
|
25
24
|
var Autocomplete = styled('ul')({
|
|
26
25
|
margin: 0,
|
|
27
26
|
maxHeight: 200,
|
|
@@ -32,7 +31,7 @@ var Autocomplete = styled('ul')({
|
|
|
32
31
|
var AccessibleHide = styled('span')(accessibleHide);
|
|
33
32
|
var AutocompleteList = function (_a) {
|
|
34
33
|
var autocompleteItems = _a.autocompleteItems, comboboxId = _a.comboboxId, selectedIndex = _a.selectedIndex, handleAutocompleteClick = _a.handleAutocompleteClick, labelId = _a.labelId, showGroupText = _a.showGroupText;
|
|
35
|
-
var randomComponentId = useState(
|
|
34
|
+
var randomComponentId = useState(generateUniqueId)[0]; // https://codesandbox.io/s/p2ndq
|
|
36
35
|
var componentId = comboboxId || randomComponentId;
|
|
37
36
|
var listBoxProps = {
|
|
38
37
|
role: 'listbox',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -22,12 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import React, { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
|
|
24
24
|
import { jsx, keyframes } from '@emotion/core';
|
|
25
|
-
import { useForkRef, styled, useIsRTL } from '@workday/canvas-kit-react/common';
|
|
25
|
+
import { useForkRef, styled, useIsRTL, useUniqueId, } from '@workday/canvas-kit-react/common';
|
|
26
26
|
import { space, commonColors, borderRadius } from '@workday/canvas-kit-react/tokens';
|
|
27
27
|
import { Card } from '@workday/canvas-kit-react/card';
|
|
28
28
|
import { IconButton } from '@workday/canvas-kit-react/button';
|
|
29
29
|
import { xSmallIcon } from '@workday/canvas-system-icons-web';
|
|
30
|
-
import uuid from 'uuid/v4';
|
|
31
30
|
import flatten from 'lodash.flatten';
|
|
32
31
|
import AutocompleteList from './AutocompleteList';
|
|
33
32
|
import Status from './Status';
|
|
@@ -133,8 +132,8 @@ var Combobox = function (_a) {
|
|
|
133
132
|
// to satisfy TS.
|
|
134
133
|
var elementRef = useForkRef(children.ref, inputRef);
|
|
135
134
|
var comboboxRef = useRef(null);
|
|
136
|
-
var randomComponentId =
|
|
137
|
-
var randomLabelId =
|
|
135
|
+
var randomComponentId = useUniqueId();
|
|
136
|
+
var randomLabelId = useUniqueId();
|
|
138
137
|
var componentId = id || randomComponentId;
|
|
139
138
|
var formLabelId = labelId || randomLabelId;
|
|
140
139
|
var _l = useState(false), showGroupText = _l[0], setShowGroupText = _l[1];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;IAEF,MAAM;CAmGP"}
|
|
@@ -35,7 +35,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
35
35
|
};
|
|
36
36
|
import * as React from 'react';
|
|
37
37
|
import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
|
|
38
|
-
import { styled } from '@workday/canvas-kit-react/common';
|
|
38
|
+
import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
|
|
39
39
|
import { IconButton } from '@workday/canvas-kit-react/button';
|
|
40
40
|
import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
|
|
41
41
|
import { FormField, FormFieldLabelPosition } from '@workday/canvas-kit-react/form-field';
|
|
@@ -43,7 +43,6 @@ import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
|
|
|
43
43
|
import { TextInput } from '@workday/canvas-kit-react/text-input';
|
|
44
44
|
import { searchThemes, SearchTheme } from './themes';
|
|
45
45
|
import chroma from 'chroma-js';
|
|
46
|
-
import uuid from 'uuid/v4';
|
|
47
46
|
function getInputColors(theme, isFocused) {
|
|
48
47
|
return {
|
|
49
48
|
background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
|
|
@@ -191,7 +190,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
191
190
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
192
191
|
_this.inputRef = React.createRef();
|
|
193
192
|
_this.openRef = React.createRef();
|
|
194
|
-
_this.labelId =
|
|
193
|
+
_this.labelId = generateUniqueId();
|
|
195
194
|
_this.state = {
|
|
196
195
|
showForm: false,
|
|
197
196
|
searchQuery: '',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0-next.1+698811ca",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -55,18 +55,16 @@
|
|
|
55
55
|
"@emotion/core": "^10.0.28",
|
|
56
56
|
"@emotion/is-prop-valid": "^0.8.2",
|
|
57
57
|
"@emotion/styled": "^10.0.27",
|
|
58
|
-
"@
|
|
59
|
-
"@workday/canvas-kit-
|
|
60
|
-
"@workday/canvas-kit-react": "^6.2.1",
|
|
58
|
+
"@workday/canvas-kit-preview-react": "^6.3.0-next.1+698811ca",
|
|
59
|
+
"@workday/canvas-kit-react": "^6.3.0-next.1+698811ca",
|
|
61
60
|
"@workday/canvas-system-icons-web": "1.0.41",
|
|
62
61
|
"chroma-js": "^2.1.0",
|
|
63
62
|
"csstype": "^2.6.17",
|
|
64
63
|
"lodash.flatten": "^4.4.0",
|
|
65
|
-
"rtl-css-js": "^1.14.1"
|
|
66
|
-
"uuid": "^3.3.3"
|
|
64
|
+
"rtl-css-js": "^1.14.1"
|
|
67
65
|
},
|
|
68
66
|
"devDependencies": {
|
|
69
67
|
"@types/lodash.flatten": "^4.4.6"
|
|
70
68
|
},
|
|
71
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "698811ca5c25f3cb4282c0f30cef4d196590c659"
|
|
72
70
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {CSSObject} from '@emotion/core';
|
|
3
3
|
import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
|
|
4
|
-
import {GrowthBehavior, styled} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
|
|
5
5
|
import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
|
|
6
6
|
import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
|
|
7
7
|
import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-field';
|
|
@@ -10,7 +10,6 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
|
|
|
10
10
|
import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
|
|
11
11
|
import {SearchThemeAttributes, searchThemes, SearchTheme} from './themes';
|
|
12
12
|
import chroma from 'chroma-js';
|
|
13
|
-
import uuid from 'uuid/v4';
|
|
14
13
|
|
|
15
14
|
export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
|
|
16
15
|
/**
|
|
@@ -293,7 +292,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
|
|
|
293
292
|
|
|
294
293
|
private inputRef = React.createRef<HTMLInputElement>();
|
|
295
294
|
private openRef = React.createRef<HTMLButtonElement>();
|
|
296
|
-
private labelId =
|
|
295
|
+
private labelId = generateUniqueId();
|
|
297
296
|
|
|
298
297
|
state: Readonly<SearchFormState> = {
|
|
299
298
|
showForm: false,
|