@workday/canvas-kit-react 9.0.0-alpha.418-next.20 → 9.0.0-alpha.419-next.21
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/common/lib/utils/components.ts +5 -0
- package/dist/commonjs/common/lib/utils/components.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/components.js +4 -0
- package/dist/commonjs/text-input/index.d.ts +1 -1
- package/dist/commonjs/text-input/index.d.ts.map +1 -1
- package/dist/commonjs/text-input/index.js +2 -1
- package/dist/commonjs/text-input/lib/InputGroup.d.ts +94 -9
- package/dist/commonjs/text-input/lib/InputGroup.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/InputGroup.js +129 -63
- package/dist/es6/common/lib/utils/components.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/components.js +4 -0
- package/dist/es6/text-input/index.d.ts +1 -1
- package/dist/es6/text-input/index.d.ts.map +1 -1
- package/dist/es6/text-input/index.js +1 -1
- package/dist/es6/text-input/lib/InputGroup.d.ts +94 -9
- package/dist/es6/text-input/lib/InputGroup.d.ts.map +1 -1
- package/dist/es6/text-input/lib/InputGroup.js +129 -63
- package/package.json +3 -3
- package/text-input/index.ts +1 -1
- package/text-input/lib/InputGroup.tsx +177 -95
|
@@ -294,6 +294,11 @@ export const createContainer = <
|
|
|
294
294
|
? (elemPropsHook as any)(localModel, elemProps, ref)
|
|
295
295
|
: elemProps;
|
|
296
296
|
|
|
297
|
+
// make sure there's always a ref being passed, even if there are no elemProps hooks to run
|
|
298
|
+
if (ref && !finalElemProps.hasOwnProperty('ref')) {
|
|
299
|
+
finalElemProps.ref = ref;
|
|
300
|
+
}
|
|
301
|
+
|
|
297
302
|
return React.createElement(
|
|
298
303
|
Context.Provider,
|
|
299
304
|
{value: localModel},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/components.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AAE/B;;GAEG;AACH,oBAAY,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,CAAC;AAGF,aAAK,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEhD;;;;;;;GAOG;AACH,aAAK,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GACpC,KAAK,GACL,CAAC,SAAS,WAAW,CAAC,MAAM,CAAC,CAAC,GAC9B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAClB,KAAK,CAAC,GAAG,CACP,CAAC,SAAS,MAAM,iBAAiB,GAC7B,iBAAiB,CAAC,CAAC,CAAC,GACpB,CAAC,SAAS,gBAAgB,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GACxC,CAAC,SAAS,MAAM,iBAAiB,GAC/B,iBAAiB,CAAC,CAAC,CAAC,GACpB,CAAC,GACH,CAAC,SAAS,KAAK,CAAC,EAAE,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAA;CAAC,CAAC,GACnC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAChC,CAAC,GACD,KAAK,GACP,CAAC,CACN,CAAC;AAEN;;;;GAIG;AACH,oBAAY,cAAc,CAAC,CAAC,EAAE,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,CAAC,GACtE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC,GAAG;IACxD;;;;;OAKG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAEJ;;;;;;;GAOG;AACH,aAAK,qBAAqB,CACxB,CAAC,SAAS,KAAK,CAAC,iBAAiB,CAAC,GAAG,EAAE,GAAG,CAAC,IACzC,CAAC,SAAS,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,oBAAY,YAAY,CACtB,UAAU,EACV,QAAQ,SACJ,MAAM,GAAG,CAAC,iBAAiB,GAC3B,gBAAgB,CAAC,GAAG,EAAE,GAAG,CAAC,GAC1B,SAAS,CAAC,GAAG,CAAC,GACd,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GACxB,SAAS,GACT,KAAK,GAAG,SAAS,IACnB,iBAAiB,CACnB,UAAU,EACV,UAAU,SAAS;IAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC,CAAA;CAAC,GACrD,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GACxB,CAAC,GACD,QAAQ,SAAS,SAAS,GAC1B,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACnC,CAAC,GAAG,qBAAqB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACnD,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,GACrB,QAAQ,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAC5C,CAAC,GAAG,qBAAqB,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,GAC1D,CAAC,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC5B,UAAU,SAAS;IAAC,OAAO,EAAE,MAAM,CAAC,CAAA;CAAC,GACrC,CAAC,GACD,UAAU,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAC/C,CAAC,GACD,EAAE,CACP,CAAC;AAGF,aAAK,iBAAiB,CAAC,UAAU,EAAE,CAAC,IAAI,UAAU,SAAS;IAAC,OAAO,EAAE,MAAM,CAAC,CAAA;CAAC,GACzE,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,GACrB,CAAC,CAAC;AAEN;;;GAGG;AACH,oBAAY,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,EAAE,IAAI;IACrD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,SAAS;QAAC,OAAO,EAAE,MAAM,CAAC,CAAA;KAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC5D;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,GAAG,CAAC;CACnE,CAAC;AAEF;;;GAGG;AACH,oBAAY,gBAAgB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,EACpC,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;QACtC;;;;WAIG;QACH,EAAE,EAAE,WAAW,CAAC;KACjB,GACA,GAAG,CAAC,OAAO,CAAC;IACf,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IAC3C,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/D,4EAA4E;IAC5E,SAAS,EAAE,CAAC,CAAC;IACb,4EAA4E;IAC5E,OAAO,EAAE,CAAC,CAAC;CACZ,CAAC;AAEF;;;;GAIG;AACH,oBAAY,iBAAiB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,CAAC,EAAE,MAAM,IAAI;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,EACpC,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,WAAW,CAAC,GACnC,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG;QACpC;;;;WAIG;QACH,EAAE,EAAE,WAAW,CAAC;KACjB,GACF,GAAG,CAAC,OAAO,CAAC;IACf,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACpE,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;IACxE,4EAA4E;IAC5E,SAAS,EAAE,CAAC,CAAC;IACb,4EAA4E;IAC5E,OAAO,EAAE,CAAC,CAAC;IACX,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,UAAU,CAAC,CAAC,EAAE,MAAM,IAAI;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,KAAK,EAAE,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACjD,4EAA4E;IAC5E,OAAO,EAAE,CAAC,CAAC;IACX,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,SAAS,CAAC,CAAC,IAAI;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACxB,4EAA4E;IAC5E,OAAO,EAAE,CAAC,CAAC;CACZ,CAAC;AAEF,UAAU,sBAAsB,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE;IACxC,CACE,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACjC;;;OAGG;IACH,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAClB;;;;OAIG;IACH,OAAO,EAAE,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,GACvC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;CACvB;AAMD,eAAO,MAAM,eAAe,oLASG,GAAG,KAAK;IAAC,KAAK,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAA;CAAC;;;;;WAG9B,OAAO,MAAM,EAAE,GAAG,CAAC;YAAU,OAAO,MAAM,EAAE,GAAG,CAAC;;;;;;;mdAkGjF,CAAC;AAEF;;;;GAIG;AACH,aAAK,UAAU,CAAC,CAAC,IAAI;KAAE,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;CAAC,CAAC;AAE3D;;;;;;;GAOG;AACH,aAAK,aAAa,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,IAAI,KAAK,GAClD,CAAC,cAAc,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,MAAM,GACpD,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG;IAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;CAAC,CAAC,GACtD;IAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;CAAC,CAAC,GACzB,CAAC,KAAK,SAAS;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAC,GAC1B,EAAE,GACF;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC,CAAC;AAET,eAAO,MAAM,kBAAkB,oMAUA,GAAG,KAAK;IAAC,KAAK,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAA;CAAC;;;IAQ9D,kIAAkI;;;;;6JAe1F,GAAG,EAAE,4FAEZ,GAAG,EAAE,yHA+DvC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;IAa1B;uCACmC;;IAEnC;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;OAEG;;wHA4CJ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,mBAAmB,+BAAgC,GAAG,KAAK,MAAM,GAAG,EAAE,GAAG,CAAC,mGAIhD,GAAG;WAE1B,OAAO,MAAM,EAAE,GAAG,CAAC;YAAU,OAAO,MAAM,EAAE,GAAG,CAAC;oHAKlC,GAAG,qDAchC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,sKAWtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,8IAOxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,0DAEzE,WAAW,CAAC,CAAC,+EAO5B;AAED,iFAAiF;AACjF,UAAU,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,EAAE;IACxD;;;;OAIG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC;CACb;AAYD;;;GAGG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,EAAE,CAAE,SAAQ,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IAC3F,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAC/D,CAAC,GACD,CAAC,CAAC,SAAS,gBAAgB,GAAG;QAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;KAAC,GAAG,EAAE,CAAC,CAAC;CAC3D;AAaD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAK5F;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;;;EAKhD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,EAClC,KAAK,EAAE,CAAC,GAAG,SAAS,EACpB,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAC3B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,KAevB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EACzB,KAAK,CAAC,EAAE,CAAC,EACT,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GACrB,CAAC,CAUH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,YAAY,CAC1B,EAAE,SAAS,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,EAChC,EAAE,SAAS,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,EAChC,EAAE,SAAS,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,EAChC,EAAE,SAAS,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,EAChC,EAAE,SAAS,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,EAChC,EAAE,SAAS,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,EAEhC,KAAK,EAAE,EAAE,EACT,KAAK,EAAE,EAAE,EACT,KAAK,CAAC,EAAE,EAAE,EACV,KAAK,CAAC,EAAE,EAAE,EACV,KAAK,CAAC,EAAE,EAAE,EACV,KAAK,CAAC,EAAE,EAAE,GACT,EAAE,SAAS,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,GACrC,EAAE,SAAS,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,GAChC,EAAE,SAAS,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,GAChC,EAAE,SAAS,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,GAChC,EAAE,SAAS,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,GAChC,EAAE,SAAS,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,GAChC,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAC5C,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GACzC,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GACpC,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAC/B,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,GAC1B,KAAK,GACP,KAAK,CAAC"}
|
|
@@ -21,6 +21,10 @@ const createContainer = (as) => ({ displayName, modelHook, elemPropsHook, defaul
|
|
|
21
21
|
const finalElemProps = elemPropsHook
|
|
22
22
|
? elemPropsHook(localModel, elemProps, ref)
|
|
23
23
|
: elemProps;
|
|
24
|
+
// make sure there's always a ref being passed, even if there are no elemProps hooks to run
|
|
25
|
+
if (ref && !finalElemProps.hasOwnProperty('ref')) {
|
|
26
|
+
finalElemProps.ref = ref;
|
|
27
|
+
}
|
|
24
28
|
return react_1.default.createElement(Context.Provider, { value: localModel }, Component(finalElemProps,
|
|
25
29
|
// Cast to `any` to avoid: "ts(2345): Type 'undefined' is not assignable to type 'E extends
|
|
26
30
|
// undefined ? never : E'" I'm not sure I can actually cast to this conditional type and it
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,kBAAkB,CAAC"}
|
|
@@ -10,8 +10,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
10
10
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
exports.InputGroup = void 0;
|
|
13
|
+
exports.useInputGroupModel = exports.InputGroup = void 0;
|
|
14
14
|
__exportStar(require("./lib/InputIconContainer"), exports);
|
|
15
15
|
__exportStar(require("./lib/TextInput"), exports);
|
|
16
16
|
var InputGroup_1 = require("./lib/InputGroup");
|
|
17
17
|
Object.defineProperty(exports, "InputGroup", { enumerable: true, get: function () { return InputGroup_1.InputGroup; } });
|
|
18
|
+
Object.defineProperty(exports, "useInputGroupModel", { enumerable: true, get: function () { return InputGroup_1.useInputGroupModel; } });
|
|
@@ -1,9 +1,64 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
export declare const useInputGroupModel: (<TT_Special_Generic>(config?: (Partial<{}> & {} & {}) | undefined) => {
|
|
3
|
+
state: {
|
|
4
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
5
|
+
};
|
|
6
|
+
events: {};
|
|
7
|
+
}) & import("@workday/canvas-kit-react/common").ModelExtras<{}, {}, {
|
|
8
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
9
|
+
}, {}, {
|
|
10
|
+
state: {
|
|
11
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
12
|
+
};
|
|
13
|
+
events: {};
|
|
14
|
+
}>;
|
|
15
|
+
export declare const InputGroupInnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
16
|
+
state: {
|
|
17
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
18
|
+
};
|
|
19
|
+
events: {};
|
|
20
|
+
}>;
|
|
21
|
+
export declare const InputGroupInnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
22
|
+
state: {
|
|
23
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
24
|
+
};
|
|
25
|
+
events: {};
|
|
26
|
+
}>;
|
|
27
|
+
export declare const InputGroupInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
|
|
5
28
|
ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
|
|
6
|
-
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps
|
|
29
|
+
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
30
|
+
state: {
|
|
31
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
32
|
+
};
|
|
33
|
+
events: {};
|
|
34
|
+
}>;
|
|
35
|
+
export declare const useClearButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
36
|
+
state: {
|
|
37
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
38
|
+
};
|
|
39
|
+
events: {};
|
|
40
|
+
}, {
|
|
41
|
+
readonly role: "presentation";
|
|
42
|
+
readonly tabIndex: -1;
|
|
43
|
+
readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
|
|
44
|
+
readonly size: "small";
|
|
45
|
+
readonly transition: "opacity 300ms ease";
|
|
46
|
+
readonly onMouseDown: (event: React.MouseEvent) => void;
|
|
47
|
+
readonly onClick: () => void;
|
|
48
|
+
readonly style: {
|
|
49
|
+
readonly opacity: 0 | 1;
|
|
50
|
+
readonly pointerEvents: "none" | "auto";
|
|
51
|
+
};
|
|
52
|
+
}>;
|
|
53
|
+
/**
|
|
54
|
+
* A clear input button. This can be a component later.
|
|
55
|
+
*/
|
|
56
|
+
export declare const ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
|
|
57
|
+
state: {
|
|
58
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
59
|
+
};
|
|
60
|
+
events: {};
|
|
61
|
+
}>;
|
|
7
62
|
/**
|
|
8
63
|
* An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
|
|
9
64
|
* elements. The inner start and end elements are usually icons or icon buttons visually represented
|
|
@@ -24,27 +79,57 @@ export declare const InputGroupInput: import("@workday/canvas-kit-react/common")
|
|
|
24
79
|
* </InputGroup>
|
|
25
80
|
* ```
|
|
26
81
|
*/
|
|
27
|
-
export declare const InputGroup: import("@workday/canvas-kit-react/common").
|
|
82
|
+
export declare const InputGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & Partial<{}> & {} & {}, {
|
|
83
|
+
state: {
|
|
84
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
85
|
+
};
|
|
86
|
+
events: {};
|
|
87
|
+
}> & {
|
|
28
88
|
/**
|
|
29
89
|
* A component to show inside and at the start of the input. The input's padding will be
|
|
30
90
|
* adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
|
|
31
91
|
* width offset. The width defaults to 40px which is the correct width for icons or icon
|
|
32
92
|
* buttons.
|
|
33
93
|
*/
|
|
34
|
-
InnerStart: import("@workday/canvas-kit-react/common").
|
|
94
|
+
InnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
95
|
+
state: {
|
|
96
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
97
|
+
};
|
|
98
|
+
events: {};
|
|
99
|
+
}>;
|
|
35
100
|
/**
|
|
36
101
|
* The input to render. By default, this is a {@link TextInput}. Use the `as` prop to change the
|
|
37
102
|
* component to be rendered.
|
|
38
103
|
*/
|
|
39
|
-
Input: import("@workday/canvas-kit-react/common").
|
|
104
|
+
Input: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
|
|
40
105
|
ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
|
|
41
|
-
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps
|
|
106
|
+
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
107
|
+
state: {
|
|
108
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
109
|
+
};
|
|
110
|
+
events: {};
|
|
111
|
+
}>;
|
|
42
112
|
/**
|
|
43
113
|
* A component to show inside and at the end of the input. The input's padding will be adjusted
|
|
44
114
|
* to not overlap with this element. Use `width` (number of pixels only) to adjust the width
|
|
45
115
|
* offset. The width defaults to 40px which is the correct width for icons or icon buttons
|
|
46
116
|
* within the input.
|
|
47
117
|
*/
|
|
48
|
-
InnerEnd: import("@workday/canvas-kit-react/common").
|
|
118
|
+
InnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
119
|
+
state: {
|
|
120
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
121
|
+
};
|
|
122
|
+
events: {};
|
|
123
|
+
}>;
|
|
124
|
+
/**
|
|
125
|
+
* A component that can be added to an input group that will clear the input. It will only render
|
|
126
|
+
* when the input has a value and will fade when a value is entered.
|
|
127
|
+
*/
|
|
128
|
+
ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
|
|
129
|
+
state: {
|
|
130
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
131
|
+
};
|
|
132
|
+
events: {};
|
|
133
|
+
}>;
|
|
49
134
|
};
|
|
50
135
|
//# sourceMappingURL=InputGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAc/B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;EAc7B,CAAC;AAUH,eAAO,MAAM,eAAe;;;;;;;EAK1B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;kCAwBJ,gBAAgB;;;;;;EAYrC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AAmBH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CA6DL,CAAC"}
|
|
@@ -3,26 +3,87 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.InputGroup = exports.InputGroupInput = exports.InputGroupInnerEnd = exports.InputGroupInnerStart = void 0;
|
|
6
|
+
exports.InputGroup = exports.ClearButton = exports.useClearButton = exports.InputGroupInput = exports.InputGroupInnerEnd = exports.InputGroupInnerStart = exports.useInputGroupModel = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
10
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
11
|
+
const button_1 = require("@workday/canvas-kit-react/button");
|
|
12
|
+
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
11
13
|
const TextInput_1 = require("./TextInput");
|
|
12
|
-
exports.
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
exports.useInputGroupModel = common_1.createModelHook({})(() => {
|
|
15
|
+
const inputRef = react_1.default.useRef(null);
|
|
16
|
+
return {
|
|
17
|
+
state: {
|
|
18
|
+
inputRef,
|
|
19
|
+
},
|
|
20
|
+
events: {},
|
|
21
|
+
};
|
|
16
22
|
});
|
|
17
|
-
exports.
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
},
|
|
23
|
+
exports.InputGroupInnerStart = common_1.createSubcomponent('div')({
|
|
24
|
+
modelHook: exports.useInputGroupModel,
|
|
25
|
+
})((elemProps, Element) => {
|
|
26
|
+
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
|
|
21
27
|
});
|
|
22
|
-
exports.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
},
|
|
28
|
+
exports.InputGroupInnerEnd = common_1.createSubcomponent('div')({
|
|
29
|
+
modelHook: exports.useInputGroupModel,
|
|
30
|
+
})((elemProps, Element) => {
|
|
31
|
+
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
|
|
32
|
+
});
|
|
33
|
+
const useInputGroupInput = common_1.createElemPropsHook(exports.useInputGroupModel)((model, ref) => {
|
|
34
|
+
const elementRef = common_1.useForkRef(ref, model.state.inputRef);
|
|
35
|
+
return {
|
|
36
|
+
ref: elementRef,
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
exports.InputGroupInput = common_1.createSubcomponent(TextInput_1.TextInput)({
|
|
40
|
+
modelHook: exports.useInputGroupModel,
|
|
41
|
+
elemPropsHook: useInputGroupInput,
|
|
42
|
+
})((elemProps, Element) => {
|
|
43
|
+
return react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, width: "100%" }, elemProps));
|
|
44
|
+
});
|
|
45
|
+
exports.useClearButton = common_1.createElemPropsHook(exports.useInputGroupModel)(model => {
|
|
46
|
+
const [inputHasValue, setInputHasValue] = react_1.default.useState(false);
|
|
47
|
+
react_1.default.useLayoutEffect(() => {
|
|
48
|
+
const input = model.state.inputRef.current;
|
|
49
|
+
if (input) {
|
|
50
|
+
input.addEventListener('input', () => {
|
|
51
|
+
setInputHasValue(!!input.value);
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}, [model.state.inputRef]);
|
|
55
|
+
return {
|
|
56
|
+
// This element does not need to be accessible via screen reader. The user can already clear
|
|
57
|
+
// an input
|
|
58
|
+
role: 'presentation',
|
|
59
|
+
// A clear input button doesn't need focus. There's already keyboard keys to clear an input
|
|
60
|
+
tabIndex: -1,
|
|
61
|
+
icon: canvas_system_icons_web_1.xSmallIcon,
|
|
62
|
+
// "small" is needed to render correctly within a `TextInput`
|
|
63
|
+
size: 'small',
|
|
64
|
+
transition: 'opacity 300ms ease',
|
|
65
|
+
// prevent a focus change to the button. Focus should stay in the input.
|
|
66
|
+
onMouseDown(event) {
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
},
|
|
69
|
+
onClick() {
|
|
70
|
+
// This will clear the input's value
|
|
71
|
+
common_1.dispatchInputEvent(model.state.inputRef.current, '');
|
|
72
|
+
},
|
|
73
|
+
style: {
|
|
74
|
+
opacity: inputHasValue ? 1 : 0,
|
|
75
|
+
pointerEvents: inputHasValue ? 'auto' : 'none',
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
});
|
|
79
|
+
/**
|
|
80
|
+
* A clear input button. This can be a component later.
|
|
81
|
+
*/
|
|
82
|
+
exports.ClearButton = common_1.createSubcomponent(button_1.TertiaryButton)({
|
|
83
|
+
modelHook: exports.useInputGroupModel,
|
|
84
|
+
elemPropsHook: exports.useClearButton,
|
|
85
|
+
})((elemProps, Element) => {
|
|
86
|
+
return react_1.default.createElement(Element, Object.assign({}, elemProps));
|
|
26
87
|
});
|
|
27
88
|
// make sure we always use pixels if the input is a number - this is required for `calc`
|
|
28
89
|
const toPx = (input) => {
|
|
@@ -59,57 +120,9 @@ const wrapInCalc = (values) => {
|
|
|
59
120
|
* </InputGroup>
|
|
60
121
|
* ```
|
|
61
122
|
*/
|
|
62
|
-
exports.InputGroup = common_1.
|
|
123
|
+
exports.InputGroup = common_1.createContainer('div')({
|
|
63
124
|
displayName: 'InputGroup',
|
|
64
|
-
|
|
65
|
-
const isRTL = common_1.useIsRTL();
|
|
66
|
-
const offsetsStart = [];
|
|
67
|
-
const offsetsEnd = [];
|
|
68
|
-
// Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
|
|
69
|
-
// `offsetEnd` arrays
|
|
70
|
-
react_1.default.Children.forEach(children, child => {
|
|
71
|
-
if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerStart) {
|
|
72
|
-
const width = child.props.width || tokens_1.space.xl;
|
|
73
|
-
offsetsStart.push(width);
|
|
74
|
-
}
|
|
75
|
-
if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerEnd) {
|
|
76
|
-
const width = child.props.width || tokens_1.space.xl;
|
|
77
|
-
offsetsEnd.push(width);
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
// keep track of the index offsets to make sure we calculate the correct position offset
|
|
81
|
-
let indexStart = 0;
|
|
82
|
-
let indexEnd = 0;
|
|
83
|
-
// Loop over all the children and set the correct padding and positions
|
|
84
|
-
const mappedChildren = react_1.default.Children.map(children, child => {
|
|
85
|
-
if (react_1.default.isValidElement(child)) {
|
|
86
|
-
if (child.type === exports.InputGroupInput) {
|
|
87
|
-
return react_1.default.cloneElement(child, {
|
|
88
|
-
paddingInlineStart: wrapInCalc(offsetsStart),
|
|
89
|
-
paddingInlineEnd: wrapInCalc(offsetsEnd),
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
if (child.type === exports.InputGroupInnerStart) {
|
|
93
|
-
const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
|
|
94
|
-
indexStart++;
|
|
95
|
-
return react_1.default.cloneElement(child, {
|
|
96
|
-
left: isRTL ? undefined : offset,
|
|
97
|
-
right: isRTL ? offset : undefined,
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
if (child.type === exports.InputGroupInnerEnd) {
|
|
101
|
-
const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
|
|
102
|
-
indexEnd++;
|
|
103
|
-
return react_1.default.cloneElement(child, {
|
|
104
|
-
left: isRTL ? offset : undefined,
|
|
105
|
-
right: isRTL ? undefined : offset,
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
return child;
|
|
110
|
-
});
|
|
111
|
-
return (react_1.default.createElement(layout_1.Flex, Object.assign({ ref: ref, as: Element, position: "relative" }, elemProps), mappedChildren));
|
|
112
|
-
},
|
|
125
|
+
modelHook: exports.useInputGroupModel,
|
|
113
126
|
subComponents: {
|
|
114
127
|
/**
|
|
115
128
|
* A component to show inside and at the start of the input. The input's padding will be
|
|
@@ -130,5 +143,58 @@ exports.InputGroup = common_1.createComponent('div')({
|
|
|
130
143
|
* within the input.
|
|
131
144
|
*/
|
|
132
145
|
InnerEnd: exports.InputGroupInnerEnd,
|
|
146
|
+
/**
|
|
147
|
+
* A component that can be added to an input group that will clear the input. It will only render
|
|
148
|
+
* when the input has a value and will fade when a value is entered.
|
|
149
|
+
*/
|
|
150
|
+
ClearButton: exports.ClearButton,
|
|
133
151
|
},
|
|
152
|
+
})(({ children, ...elemProps }, Element) => {
|
|
153
|
+
const isRTL = common_1.useIsRTL();
|
|
154
|
+
const offsetsStart = [];
|
|
155
|
+
const offsetsEnd = [];
|
|
156
|
+
// Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
|
|
157
|
+
// `offsetEnd` arrays
|
|
158
|
+
react_1.default.Children.forEach(children, child => {
|
|
159
|
+
if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerStart) {
|
|
160
|
+
const width = child.props.width || tokens_1.space.xl;
|
|
161
|
+
offsetsStart.push(width);
|
|
162
|
+
}
|
|
163
|
+
if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerEnd) {
|
|
164
|
+
const width = child.props.width || tokens_1.space.xl;
|
|
165
|
+
offsetsEnd.push(width);
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
// keep track of the index offsets to make sure we calculate the correct position offset
|
|
169
|
+
let indexStart = 0;
|
|
170
|
+
let indexEnd = 0;
|
|
171
|
+
// Loop over all the children and set the correct padding and positions
|
|
172
|
+
const mappedChildren = react_1.default.Children.map(children, child => {
|
|
173
|
+
if (react_1.default.isValidElement(child)) {
|
|
174
|
+
if (child.type === exports.InputGroupInput) {
|
|
175
|
+
return react_1.default.cloneElement(child, {
|
|
176
|
+
paddingInlineStart: wrapInCalc(offsetsStart),
|
|
177
|
+
paddingInlineEnd: wrapInCalc(offsetsEnd),
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
if (child.type === exports.InputGroupInnerStart) {
|
|
181
|
+
const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
|
|
182
|
+
indexStart++;
|
|
183
|
+
return react_1.default.cloneElement(child, {
|
|
184
|
+
left: isRTL ? undefined : offset,
|
|
185
|
+
right: isRTL ? offset : undefined,
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
if (child.type === exports.InputGroupInnerEnd) {
|
|
189
|
+
const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
|
|
190
|
+
indexEnd++;
|
|
191
|
+
return react_1.default.cloneElement(child, {
|
|
192
|
+
left: isRTL ? offset : undefined,
|
|
193
|
+
right: isRTL ? undefined : offset,
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
return child;
|
|
198
|
+
});
|
|
199
|
+
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
|
|
134
200
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/components.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/components.ts"],"names":[],"mappings":"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"}
|
|
@@ -15,6 +15,10 @@ export const createContainer = (as) => ({ displayName, modelHook, elemPropsHook,
|
|
|
15
15
|
const finalElemProps = elemPropsHook
|
|
16
16
|
? elemPropsHook(localModel, elemProps, ref)
|
|
17
17
|
: elemProps;
|
|
18
|
+
// make sure there's always a ref being passed, even if there are no elemProps hooks to run
|
|
19
|
+
if (ref && !finalElemProps.hasOwnProperty('ref')) {
|
|
20
|
+
finalElemProps.ref = ref;
|
|
21
|
+
}
|
|
18
22
|
return React.createElement(Context.Provider, { value: localModel }, Component(finalElemProps,
|
|
19
23
|
// Cast to `any` to avoid: "ts(2345): Type 'undefined' is not assignable to type 'E extends
|
|
20
24
|
// undefined ? never : E'" I'm not sure I can actually cast to this conditional type and it
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,9 +1,64 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
export declare const useInputGroupModel: (<TT_Special_Generic>(config?: (Partial<{}> & {} & {}) | undefined) => {
|
|
3
|
+
state: {
|
|
4
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
5
|
+
};
|
|
6
|
+
events: {};
|
|
7
|
+
}) & import("@workday/canvas-kit-react/common").ModelExtras<{}, {}, {
|
|
8
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
9
|
+
}, {}, {
|
|
10
|
+
state: {
|
|
11
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
12
|
+
};
|
|
13
|
+
events: {};
|
|
14
|
+
}>;
|
|
15
|
+
export declare const InputGroupInnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
16
|
+
state: {
|
|
17
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
18
|
+
};
|
|
19
|
+
events: {};
|
|
20
|
+
}>;
|
|
21
|
+
export declare const InputGroupInnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
22
|
+
state: {
|
|
23
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
24
|
+
};
|
|
25
|
+
events: {};
|
|
26
|
+
}>;
|
|
27
|
+
export declare const InputGroupInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
|
|
5
28
|
ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
|
|
6
|
-
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps
|
|
29
|
+
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
30
|
+
state: {
|
|
31
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
32
|
+
};
|
|
33
|
+
events: {};
|
|
34
|
+
}>;
|
|
35
|
+
export declare const useClearButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
36
|
+
state: {
|
|
37
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
38
|
+
};
|
|
39
|
+
events: {};
|
|
40
|
+
}, {
|
|
41
|
+
readonly role: "presentation";
|
|
42
|
+
readonly tabIndex: -1;
|
|
43
|
+
readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
|
|
44
|
+
readonly size: "small";
|
|
45
|
+
readonly transition: "opacity 300ms ease";
|
|
46
|
+
readonly onMouseDown: (event: React.MouseEvent) => void;
|
|
47
|
+
readonly onClick: () => void;
|
|
48
|
+
readonly style: {
|
|
49
|
+
readonly opacity: 0 | 1;
|
|
50
|
+
readonly pointerEvents: "none" | "auto";
|
|
51
|
+
};
|
|
52
|
+
}>;
|
|
53
|
+
/**
|
|
54
|
+
* A clear input button. This can be a component later.
|
|
55
|
+
*/
|
|
56
|
+
export declare const ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
|
|
57
|
+
state: {
|
|
58
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
59
|
+
};
|
|
60
|
+
events: {};
|
|
61
|
+
}>;
|
|
7
62
|
/**
|
|
8
63
|
* An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
|
|
9
64
|
* elements. The inner start and end elements are usually icons or icon buttons visually represented
|
|
@@ -24,27 +79,57 @@ export declare const InputGroupInput: import("@workday/canvas-kit-react/common")
|
|
|
24
79
|
* </InputGroup>
|
|
25
80
|
* ```
|
|
26
81
|
*/
|
|
27
|
-
export declare const InputGroup: import("@workday/canvas-kit-react/common").
|
|
82
|
+
export declare const InputGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & Partial<{}> & {} & {}, {
|
|
83
|
+
state: {
|
|
84
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
85
|
+
};
|
|
86
|
+
events: {};
|
|
87
|
+
}> & {
|
|
28
88
|
/**
|
|
29
89
|
* A component to show inside and at the start of the input. The input's padding will be
|
|
30
90
|
* adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
|
|
31
91
|
* width offset. The width defaults to 40px which is the correct width for icons or icon
|
|
32
92
|
* buttons.
|
|
33
93
|
*/
|
|
34
|
-
InnerStart: import("@workday/canvas-kit-react/common").
|
|
94
|
+
InnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
95
|
+
state: {
|
|
96
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
97
|
+
};
|
|
98
|
+
events: {};
|
|
99
|
+
}>;
|
|
35
100
|
/**
|
|
36
101
|
* The input to render. By default, this is a {@link TextInput}. Use the `as` prop to change the
|
|
37
102
|
* component to be rendered.
|
|
38
103
|
*/
|
|
39
|
-
Input: import("@workday/canvas-kit-react/common").
|
|
104
|
+
Input: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
|
|
40
105
|
ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
|
|
41
|
-
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps
|
|
106
|
+
}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
107
|
+
state: {
|
|
108
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
109
|
+
};
|
|
110
|
+
events: {};
|
|
111
|
+
}>;
|
|
42
112
|
/**
|
|
43
113
|
* A component to show inside and at the end of the input. The input's padding will be adjusted
|
|
44
114
|
* to not overlap with this element. Use `width` (number of pixels only) to adjust the width
|
|
45
115
|
* offset. The width defaults to 40px which is the correct width for icons or icon buttons
|
|
46
116
|
* within the input.
|
|
47
117
|
*/
|
|
48
|
-
InnerEnd: import("@workday/canvas-kit-react/common").
|
|
118
|
+
InnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
|
|
119
|
+
state: {
|
|
120
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
121
|
+
};
|
|
122
|
+
events: {};
|
|
123
|
+
}>;
|
|
124
|
+
/**
|
|
125
|
+
* A component that can be added to an input group that will clear the input. It will only render
|
|
126
|
+
* when the input has a value and will fade when a value is entered.
|
|
127
|
+
*/
|
|
128
|
+
ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
|
|
129
|
+
state: {
|
|
130
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
131
|
+
};
|
|
132
|
+
events: {};
|
|
133
|
+
}>;
|
|
49
134
|
};
|
|
50
135
|
//# sourceMappingURL=InputGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAc/B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;EAc7B,CAAC;AAUH,eAAO,MAAM,eAAe;;;;;;;EAK1B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;kCAwBJ,gBAAgB;;;;;;EAYrC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AAmBH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CA6DL,CAAC"}
|
|
@@ -1,22 +1,83 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { space } from '@workday/canvas-kit-react/tokens';
|
|
3
|
-
import {
|
|
3
|
+
import { createContainer, createElemPropsHook, createModelHook, createSubcomponent, dispatchInputEvent, useForkRef, useIsRTL, } from '@workday/canvas-kit-react/common';
|
|
4
4
|
import { Flex } from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
6
|
+
import { xSmallIcon } from '@workday/canvas-system-icons-web';
|
|
5
7
|
import { TextInput } from './TextInput';
|
|
6
|
-
export const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
export const useInputGroupModel = createModelHook({})(() => {
|
|
9
|
+
const inputRef = React.useRef(null);
|
|
10
|
+
return {
|
|
11
|
+
state: {
|
|
12
|
+
inputRef,
|
|
13
|
+
},
|
|
14
|
+
events: {},
|
|
15
|
+
};
|
|
10
16
|
});
|
|
11
|
-
export const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
},
|
|
17
|
+
export const InputGroupInnerStart = createSubcomponent('div')({
|
|
18
|
+
modelHook: useInputGroupModel,
|
|
19
|
+
})((elemProps, Element) => {
|
|
20
|
+
return (React.createElement(Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
|
|
15
21
|
});
|
|
16
|
-
export const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
22
|
+
export const InputGroupInnerEnd = createSubcomponent('div')({
|
|
23
|
+
modelHook: useInputGroupModel,
|
|
24
|
+
})((elemProps, Element) => {
|
|
25
|
+
return (React.createElement(Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
|
|
26
|
+
});
|
|
27
|
+
const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref) => {
|
|
28
|
+
const elementRef = useForkRef(ref, model.state.inputRef);
|
|
29
|
+
return {
|
|
30
|
+
ref: elementRef,
|
|
31
|
+
};
|
|
32
|
+
});
|
|
33
|
+
export const InputGroupInput = createSubcomponent(TextInput)({
|
|
34
|
+
modelHook: useInputGroupModel,
|
|
35
|
+
elemPropsHook: useInputGroupInput,
|
|
36
|
+
})((elemProps, Element) => {
|
|
37
|
+
return React.createElement(Flex, Object.assign({ as: Element, width: "100%" }, elemProps));
|
|
38
|
+
});
|
|
39
|
+
export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
|
|
40
|
+
const [inputHasValue, setInputHasValue] = React.useState(false);
|
|
41
|
+
React.useLayoutEffect(() => {
|
|
42
|
+
const input = model.state.inputRef.current;
|
|
43
|
+
if (input) {
|
|
44
|
+
input.addEventListener('input', () => {
|
|
45
|
+
setInputHasValue(!!input.value);
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
}, [model.state.inputRef]);
|
|
49
|
+
return {
|
|
50
|
+
// This element does not need to be accessible via screen reader. The user can already clear
|
|
51
|
+
// an input
|
|
52
|
+
role: 'presentation',
|
|
53
|
+
// A clear input button doesn't need focus. There's already keyboard keys to clear an input
|
|
54
|
+
tabIndex: -1,
|
|
55
|
+
icon: xSmallIcon,
|
|
56
|
+
// "small" is needed to render correctly within a `TextInput`
|
|
57
|
+
size: 'small',
|
|
58
|
+
transition: 'opacity 300ms ease',
|
|
59
|
+
// prevent a focus change to the button. Focus should stay in the input.
|
|
60
|
+
onMouseDown(event) {
|
|
61
|
+
event.preventDefault();
|
|
62
|
+
},
|
|
63
|
+
onClick() {
|
|
64
|
+
// This will clear the input's value
|
|
65
|
+
dispatchInputEvent(model.state.inputRef.current, '');
|
|
66
|
+
},
|
|
67
|
+
style: {
|
|
68
|
+
opacity: inputHasValue ? 1 : 0,
|
|
69
|
+
pointerEvents: inputHasValue ? 'auto' : 'none',
|
|
70
|
+
},
|
|
71
|
+
};
|
|
72
|
+
});
|
|
73
|
+
/**
|
|
74
|
+
* A clear input button. This can be a component later.
|
|
75
|
+
*/
|
|
76
|
+
export const ClearButton = createSubcomponent(TertiaryButton)({
|
|
77
|
+
modelHook: useInputGroupModel,
|
|
78
|
+
elemPropsHook: useClearButton,
|
|
79
|
+
})((elemProps, Element) => {
|
|
80
|
+
return React.createElement(Element, Object.assign({}, elemProps));
|
|
20
81
|
});
|
|
21
82
|
// make sure we always use pixels if the input is a number - this is required for `calc`
|
|
22
83
|
const toPx = (input) => {
|
|
@@ -53,57 +114,9 @@ const wrapInCalc = (values) => {
|
|
|
53
114
|
* </InputGroup>
|
|
54
115
|
* ```
|
|
55
116
|
*/
|
|
56
|
-
export const InputGroup =
|
|
117
|
+
export const InputGroup = createContainer('div')({
|
|
57
118
|
displayName: 'InputGroup',
|
|
58
|
-
|
|
59
|
-
const isRTL = useIsRTL();
|
|
60
|
-
const offsetsStart = [];
|
|
61
|
-
const offsetsEnd = [];
|
|
62
|
-
// Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
|
|
63
|
-
// `offsetEnd` arrays
|
|
64
|
-
React.Children.forEach(children, child => {
|
|
65
|
-
if (React.isValidElement(child) && child.type === InputGroupInnerStart) {
|
|
66
|
-
const width = child.props.width || space.xl;
|
|
67
|
-
offsetsStart.push(width);
|
|
68
|
-
}
|
|
69
|
-
if (React.isValidElement(child) && child.type === InputGroupInnerEnd) {
|
|
70
|
-
const width = child.props.width || space.xl;
|
|
71
|
-
offsetsEnd.push(width);
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
// keep track of the index offsets to make sure we calculate the correct position offset
|
|
75
|
-
let indexStart = 0;
|
|
76
|
-
let indexEnd = 0;
|
|
77
|
-
// Loop over all the children and set the correct padding and positions
|
|
78
|
-
const mappedChildren = React.Children.map(children, child => {
|
|
79
|
-
if (React.isValidElement(child)) {
|
|
80
|
-
if (child.type === InputGroupInput) {
|
|
81
|
-
return React.cloneElement(child, {
|
|
82
|
-
paddingInlineStart: wrapInCalc(offsetsStart),
|
|
83
|
-
paddingInlineEnd: wrapInCalc(offsetsEnd),
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
if (child.type === InputGroupInnerStart) {
|
|
87
|
-
const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
|
|
88
|
-
indexStart++;
|
|
89
|
-
return React.cloneElement(child, {
|
|
90
|
-
left: isRTL ? undefined : offset,
|
|
91
|
-
right: isRTL ? offset : undefined,
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
if (child.type === InputGroupInnerEnd) {
|
|
95
|
-
const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
|
|
96
|
-
indexEnd++;
|
|
97
|
-
return React.cloneElement(child, {
|
|
98
|
-
left: isRTL ? offset : undefined,
|
|
99
|
-
right: isRTL ? undefined : offset,
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
return child;
|
|
104
|
-
});
|
|
105
|
-
return (React.createElement(Flex, Object.assign({ ref: ref, as: Element, position: "relative" }, elemProps), mappedChildren));
|
|
106
|
-
},
|
|
119
|
+
modelHook: useInputGroupModel,
|
|
107
120
|
subComponents: {
|
|
108
121
|
/**
|
|
109
122
|
* A component to show inside and at the start of the input. The input's padding will be
|
|
@@ -124,5 +137,58 @@ export const InputGroup = createComponent('div')({
|
|
|
124
137
|
* within the input.
|
|
125
138
|
*/
|
|
126
139
|
InnerEnd: InputGroupInnerEnd,
|
|
140
|
+
/**
|
|
141
|
+
* A component that can be added to an input group that will clear the input. It will only render
|
|
142
|
+
* when the input has a value and will fade when a value is entered.
|
|
143
|
+
*/
|
|
144
|
+
ClearButton: ClearButton,
|
|
127
145
|
},
|
|
146
|
+
})(({ children, ...elemProps }, Element) => {
|
|
147
|
+
const isRTL = useIsRTL();
|
|
148
|
+
const offsetsStart = [];
|
|
149
|
+
const offsetsEnd = [];
|
|
150
|
+
// Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
|
|
151
|
+
// `offsetEnd` arrays
|
|
152
|
+
React.Children.forEach(children, child => {
|
|
153
|
+
if (React.isValidElement(child) && child.type === InputGroupInnerStart) {
|
|
154
|
+
const width = child.props.width || space.xl;
|
|
155
|
+
offsetsStart.push(width);
|
|
156
|
+
}
|
|
157
|
+
if (React.isValidElement(child) && child.type === InputGroupInnerEnd) {
|
|
158
|
+
const width = child.props.width || space.xl;
|
|
159
|
+
offsetsEnd.push(width);
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
// keep track of the index offsets to make sure we calculate the correct position offset
|
|
163
|
+
let indexStart = 0;
|
|
164
|
+
let indexEnd = 0;
|
|
165
|
+
// Loop over all the children and set the correct padding and positions
|
|
166
|
+
const mappedChildren = React.Children.map(children, child => {
|
|
167
|
+
if (React.isValidElement(child)) {
|
|
168
|
+
if (child.type === InputGroupInput) {
|
|
169
|
+
return React.cloneElement(child, {
|
|
170
|
+
paddingInlineStart: wrapInCalc(offsetsStart),
|
|
171
|
+
paddingInlineEnd: wrapInCalc(offsetsEnd),
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
if (child.type === InputGroupInnerStart) {
|
|
175
|
+
const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
|
|
176
|
+
indexStart++;
|
|
177
|
+
return React.cloneElement(child, {
|
|
178
|
+
left: isRTL ? undefined : offset,
|
|
179
|
+
right: isRTL ? offset : undefined,
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
if (child.type === InputGroupInnerEnd) {
|
|
183
|
+
const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
|
|
184
|
+
indexEnd++;
|
|
185
|
+
return React.cloneElement(child, {
|
|
186
|
+
left: isRTL ? offset : undefined,
|
|
187
|
+
right: isRTL ? undefined : offset,
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
return child;
|
|
192
|
+
});
|
|
193
|
+
return (React.createElement(Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
|
|
128
194
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.419-next.21+2436a0cd",
|
|
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": "^9.0.0-alpha.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^9.0.0-alpha.419-next.21+2436a0cd",
|
|
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",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
67
67
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "2436a0cd3dc23fd2d4f6350af6f76a9591f83e30"
|
|
70
70
|
}
|
package/text-input/index.ts
CHANGED
|
@@ -1,49 +1,126 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import {space} from '@workday/canvas-kit-react/tokens';
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
createContainer,
|
|
6
|
+
createElemPropsHook,
|
|
7
|
+
createModelHook,
|
|
8
|
+
createSubcomponent,
|
|
9
|
+
dispatchInputEvent,
|
|
10
|
+
ExtractProps,
|
|
11
|
+
useForkRef,
|
|
12
|
+
useIsRTL,
|
|
13
|
+
} from '@workday/canvas-kit-react/common';
|
|
5
14
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
15
|
+
import {TertiaryButton} from '@workday/canvas-kit-react/button';
|
|
16
|
+
import {xSmallIcon} from '@workday/canvas-system-icons-web';
|
|
6
17
|
|
|
7
18
|
import {TextInput} from './TextInput';
|
|
8
19
|
|
|
9
|
-
export const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
height="xl"
|
|
19
|
-
width="xl"
|
|
20
|
-
{...elemProps}
|
|
21
|
-
/>
|
|
22
|
-
);
|
|
23
|
-
},
|
|
20
|
+
export const useInputGroupModel = createModelHook({})(() => {
|
|
21
|
+
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
22
|
+
|
|
23
|
+
return {
|
|
24
|
+
state: {
|
|
25
|
+
inputRef,
|
|
26
|
+
},
|
|
27
|
+
events: {},
|
|
28
|
+
};
|
|
24
29
|
});
|
|
25
30
|
|
|
26
|
-
export const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
},
|
|
31
|
+
export const InputGroupInnerStart = createSubcomponent('div')({
|
|
32
|
+
modelHook: useInputGroupModel,
|
|
33
|
+
})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
|
|
34
|
+
return (
|
|
35
|
+
<Flex
|
|
36
|
+
as={Element}
|
|
37
|
+
position="absolute"
|
|
38
|
+
alignItems="center"
|
|
39
|
+
justifyContent="center"
|
|
40
|
+
height="xl"
|
|
41
|
+
width="xl"
|
|
42
|
+
{...elemProps}
|
|
43
|
+
/>
|
|
44
|
+
);
|
|
41
45
|
});
|
|
42
46
|
|
|
43
|
-
export const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
export const InputGroupInnerEnd = createSubcomponent('div')({
|
|
48
|
+
modelHook: useInputGroupModel,
|
|
49
|
+
})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
|
|
50
|
+
return (
|
|
51
|
+
<Flex
|
|
52
|
+
as={Element}
|
|
53
|
+
position="absolute"
|
|
54
|
+
alignItems="center"
|
|
55
|
+
justifyContent="center"
|
|
56
|
+
height="xl"
|
|
57
|
+
width="xl"
|
|
58
|
+
{...elemProps}
|
|
59
|
+
/>
|
|
60
|
+
);
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref) => {
|
|
64
|
+
const elementRef = useForkRef(ref, model.state.inputRef);
|
|
65
|
+
|
|
66
|
+
return {
|
|
67
|
+
ref: elementRef,
|
|
68
|
+
};
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
export const InputGroupInput = createSubcomponent(TextInput)({
|
|
72
|
+
modelHook: useInputGroupModel,
|
|
73
|
+
elemPropsHook: useInputGroupInput,
|
|
74
|
+
})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
|
|
75
|
+
return <Flex as={Element} width="100%" {...elemProps} />;
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
|
|
79
|
+
const [inputHasValue, setInputHasValue] = React.useState(false);
|
|
80
|
+
|
|
81
|
+
React.useLayoutEffect(() => {
|
|
82
|
+
const input = model.state.inputRef.current;
|
|
83
|
+
|
|
84
|
+
if (input) {
|
|
85
|
+
input.addEventListener('input', () => {
|
|
86
|
+
setInputHasValue(!!input.value);
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
}, [model.state.inputRef]);
|
|
90
|
+
|
|
91
|
+
return {
|
|
92
|
+
// This element does not need to be accessible via screen reader. The user can already clear
|
|
93
|
+
// an input
|
|
94
|
+
role: 'presentation',
|
|
95
|
+
// A clear input button doesn't need focus. There's already keyboard keys to clear an input
|
|
96
|
+
tabIndex: -1,
|
|
97
|
+
icon: xSmallIcon,
|
|
98
|
+
// "small" is needed to render correctly within a `TextInput`
|
|
99
|
+
size: 'small',
|
|
100
|
+
transition: 'opacity 300ms ease',
|
|
101
|
+
// prevent a focus change to the button. Focus should stay in the input.
|
|
102
|
+
onMouseDown(event: React.MouseEvent) {
|
|
103
|
+
event.preventDefault();
|
|
104
|
+
},
|
|
105
|
+
onClick() {
|
|
106
|
+
// This will clear the input's value
|
|
107
|
+
dispatchInputEvent(model.state.inputRef.current, '');
|
|
108
|
+
},
|
|
109
|
+
style: {
|
|
110
|
+
opacity: inputHasValue ? 1 : 0,
|
|
111
|
+
pointerEvents: inputHasValue ? 'auto' : 'none',
|
|
112
|
+
},
|
|
113
|
+
} as const;
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
/**
|
|
117
|
+
* A clear input button. This can be a component later.
|
|
118
|
+
*/
|
|
119
|
+
export const ClearButton = createSubcomponent(TertiaryButton)({
|
|
120
|
+
modelHook: useInputGroupModel,
|
|
121
|
+
elemPropsHook: useClearButton,
|
|
122
|
+
})<ExtractProps<typeof TertiaryButton, never>>((elemProps, Element) => {
|
|
123
|
+
return <Element {...elemProps} />;
|
|
47
124
|
});
|
|
48
125
|
|
|
49
126
|
// make sure we always use pixels if the input is a number - this is required for `calc`
|
|
@@ -83,67 +160,9 @@ const wrapInCalc = (values: (string | number)[]): string | number | undefined =>
|
|
|
83
160
|
* </InputGroup>
|
|
84
161
|
* ```
|
|
85
162
|
*/
|
|
86
|
-
export const InputGroup =
|
|
163
|
+
export const InputGroup = createContainer('div')({
|
|
87
164
|
displayName: 'InputGroup',
|
|
88
|
-
|
|
89
|
-
const isRTL = useIsRTL();
|
|
90
|
-
const offsetsStart: (string | number)[] = [];
|
|
91
|
-
const offsetsEnd: (string | number)[] = [];
|
|
92
|
-
|
|
93
|
-
// Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
|
|
94
|
-
// `offsetEnd` arrays
|
|
95
|
-
React.Children.forEach(children, child => {
|
|
96
|
-
if (React.isValidElement<any>(child) && child.type === InputGroupInnerStart) {
|
|
97
|
-
const width = child.props.width || space.xl;
|
|
98
|
-
offsetsStart.push(width);
|
|
99
|
-
}
|
|
100
|
-
if (React.isValidElement<any>(child) && child.type === InputGroupInnerEnd) {
|
|
101
|
-
const width = child.props.width || space.xl;
|
|
102
|
-
offsetsEnd.push(width);
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
// keep track of the index offsets to make sure we calculate the correct position offset
|
|
107
|
-
let indexStart = 0;
|
|
108
|
-
let indexEnd = 0;
|
|
109
|
-
|
|
110
|
-
// Loop over all the children and set the correct padding and positions
|
|
111
|
-
const mappedChildren = React.Children.map(children, child => {
|
|
112
|
-
if (React.isValidElement<any>(child)) {
|
|
113
|
-
if (child.type === InputGroupInput) {
|
|
114
|
-
return React.cloneElement(child, {
|
|
115
|
-
paddingInlineStart: wrapInCalc(offsetsStart),
|
|
116
|
-
paddingInlineEnd: wrapInCalc(offsetsEnd),
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
if (child.type === InputGroupInnerStart) {
|
|
120
|
-
const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
|
|
121
|
-
indexStart++;
|
|
122
|
-
|
|
123
|
-
return React.cloneElement(child, {
|
|
124
|
-
left: isRTL ? undefined : offset,
|
|
125
|
-
right: isRTL ? offset : undefined,
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
if (child.type === InputGroupInnerEnd) {
|
|
129
|
-
const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
|
|
130
|
-
indexEnd++;
|
|
131
|
-
|
|
132
|
-
return React.cloneElement(child, {
|
|
133
|
-
left: isRTL ? offset : undefined,
|
|
134
|
-
right: isRTL ? undefined : offset,
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
return child;
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
return (
|
|
142
|
-
<Flex ref={ref} as={Element} position="relative" {...elemProps}>
|
|
143
|
-
{mappedChildren}
|
|
144
|
-
</Flex>
|
|
145
|
-
);
|
|
146
|
-
},
|
|
165
|
+
modelHook: useInputGroupModel,
|
|
147
166
|
subComponents: {
|
|
148
167
|
/**
|
|
149
168
|
* A component to show inside and at the start of the input. The input's padding will be
|
|
@@ -164,5 +183,68 @@ export const InputGroup = createComponent('div')({
|
|
|
164
183
|
* within the input.
|
|
165
184
|
*/
|
|
166
185
|
InnerEnd: InputGroupInnerEnd,
|
|
186
|
+
/**
|
|
187
|
+
* A component that can be added to an input group that will clear the input. It will only render
|
|
188
|
+
* when the input has a value and will fade when a value is entered.
|
|
189
|
+
*/
|
|
190
|
+
ClearButton: ClearButton,
|
|
167
191
|
},
|
|
192
|
+
})<ExtractProps<typeof Flex, never>>(({children, ...elemProps}, Element) => {
|
|
193
|
+
const isRTL = useIsRTL();
|
|
194
|
+
const offsetsStart: (string | number)[] = [];
|
|
195
|
+
const offsetsEnd: (string | number)[] = [];
|
|
196
|
+
|
|
197
|
+
// Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
|
|
198
|
+
// `offsetEnd` arrays
|
|
199
|
+
React.Children.forEach(children, child => {
|
|
200
|
+
if (React.isValidElement<any>(child) && child.type === InputGroupInnerStart) {
|
|
201
|
+
const width = child.props.width || space.xl;
|
|
202
|
+
offsetsStart.push(width);
|
|
203
|
+
}
|
|
204
|
+
if (React.isValidElement<any>(child) && child.type === InputGroupInnerEnd) {
|
|
205
|
+
const width = child.props.width || space.xl;
|
|
206
|
+
offsetsEnd.push(width);
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
// keep track of the index offsets to make sure we calculate the correct position offset
|
|
211
|
+
let indexStart = 0;
|
|
212
|
+
let indexEnd = 0;
|
|
213
|
+
|
|
214
|
+
// Loop over all the children and set the correct padding and positions
|
|
215
|
+
const mappedChildren = React.Children.map(children, child => {
|
|
216
|
+
if (React.isValidElement<any>(child)) {
|
|
217
|
+
if (child.type === InputGroupInput) {
|
|
218
|
+
return React.cloneElement(child, {
|
|
219
|
+
paddingInlineStart: wrapInCalc(offsetsStart),
|
|
220
|
+
paddingInlineEnd: wrapInCalc(offsetsEnd),
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
if (child.type === InputGroupInnerStart) {
|
|
224
|
+
const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
|
|
225
|
+
indexStart++;
|
|
226
|
+
|
|
227
|
+
return React.cloneElement(child, {
|
|
228
|
+
left: isRTL ? undefined : offset,
|
|
229
|
+
right: isRTL ? offset : undefined,
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
if (child.type === InputGroupInnerEnd) {
|
|
233
|
+
const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
|
|
234
|
+
indexEnd++;
|
|
235
|
+
|
|
236
|
+
return React.cloneElement(child, {
|
|
237
|
+
left: isRTL ? offset : undefined,
|
|
238
|
+
right: isRTL ? undefined : offset,
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
return child;
|
|
243
|
+
});
|
|
244
|
+
|
|
245
|
+
return (
|
|
246
|
+
<Flex as={Element} position="relative" {...elemProps}>
|
|
247
|
+
{mappedChildren}
|
|
248
|
+
</Flex>
|
|
249
|
+
);
|
|
168
250
|
});
|