@workday/canvas-kit-preview-react 8.0.0-alpha.204-next.4 → 8.0.0-alpha.216-next.4
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/dist/commonjs/form-field/lib/FormField.d.ts +2 -2
- package/dist/commonjs/form-field/lib/FormFieldHint.d.ts +1 -1
- package/dist/commonjs/form-field/lib/FormFieldInput.d.ts +1 -1
- package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/Menu.js +16 -4
- package/dist/commonjs/menu/lib/MenuItem.d.ts +5 -0
- package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +5 -2
- package/dist/commonjs/text-area/lib/TextArea.d.ts +2 -2
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts +1 -1
- package/dist/commonjs/text-input/lib/TextInput.d.ts +2 -2
- package/dist/commonjs/text-input/lib/TextInputField.d.ts +1 -1
- package/dist/es6/form-field/lib/FormField.d.ts +2 -2
- package/dist/es6/form-field/lib/FormFieldHint.d.ts +1 -1
- package/dist/es6/form-field/lib/FormFieldInput.d.ts +1 -1
- package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
- package/dist/es6/menu/lib/Menu.js +16 -4
- package/dist/es6/menu/lib/MenuItem.d.ts +5 -0
- package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuItem.js +5 -2
- package/dist/es6/text-area/lib/TextArea.d.ts +2 -2
- package/dist/es6/text-area/lib/TextAreaField.d.ts +1 -1
- package/dist/es6/text-input/lib/TextInput.d.ts +2 -2
- package/dist/es6/text-input/lib/TextInputField.d.ts +1 -1
- package/menu/lib/Menu.tsx +15 -4
- package/menu/lib/MenuItem.tsx +12 -2
- package/package.json +6 -5
|
@@ -37,7 +37,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
37
37
|
events: {};
|
|
38
38
|
}>;
|
|
39
39
|
} & {
|
|
40
|
-
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
40
|
+
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
41
41
|
state: {
|
|
42
42
|
id: string;
|
|
43
43
|
hasError: boolean;
|
|
@@ -53,7 +53,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
53
53
|
};
|
|
54
54
|
events: {};
|
|
55
55
|
}>;
|
|
56
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
56
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
57
57
|
state: {
|
|
58
58
|
id: string;
|
|
59
59
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
1
|
+
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
1
|
+
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -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,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;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;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;
|
|
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,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;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;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CAgF7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
|
|
@@ -98,7 +98,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
|
|
|
98
98
|
var children = React.Children.toArray(_this.props.children);
|
|
99
99
|
var nextSelectedIndex = 0;
|
|
100
100
|
var isShortcut = false;
|
|
101
|
-
var itemCount = children.
|
|
101
|
+
var itemCount = children.filter(function (child) {
|
|
102
|
+
var _a, _b;
|
|
103
|
+
return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
|
|
104
|
+
}).length;
|
|
102
105
|
var firstItem = 0;
|
|
103
106
|
var lastItem = itemCount - 1;
|
|
104
107
|
if (event.key.length === 1 && event.key.match(/\S/)) {
|
|
@@ -219,6 +222,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
|
|
|
219
222
|
return character;
|
|
220
223
|
};
|
|
221
224
|
var firstCharacters = React.Children.map(_this.props.children, function (child) {
|
|
225
|
+
var _a, _b;
|
|
226
|
+
if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
|
|
227
|
+
return;
|
|
228
|
+
}
|
|
222
229
|
return getFirstCharacter(child);
|
|
223
230
|
});
|
|
224
231
|
_this.firstCharacters = firstCharacters;
|
|
@@ -278,17 +285,22 @@ var DeprecatedMenu = /** @class */ (function (_super) {
|
|
|
278
285
|
var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
|
|
279
286
|
var selectedItemIndex = this.state.selectedItemIndex;
|
|
280
287
|
var cardWidth = grow ? '100%' : width;
|
|
288
|
+
var interactiveItemIndex = null;
|
|
281
289
|
return (React.createElement(card_1.Card, { display: "inline-block", padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
|
|
282
290
|
React.createElement(card_1.Card.Body, null,
|
|
283
|
-
React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem
|
|
291
|
+
React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem) {
|
|
284
292
|
if (!React.isValidElement(menuItem)) {
|
|
285
293
|
return;
|
|
286
294
|
}
|
|
287
|
-
var itemId
|
|
295
|
+
var itemId;
|
|
296
|
+
if (!menuItem.props.isHeader) {
|
|
297
|
+
interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
|
|
298
|
+
itemId = id + "-" + interactiveItemIndex;
|
|
299
|
+
}
|
|
288
300
|
return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
|
|
289
301
|
onClick: function (event) { return _this.handleClick(event, menuItem.props); },
|
|
290
302
|
id: itemId,
|
|
291
|
-
isFocused: selectedItemIndex ===
|
|
303
|
+
isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
|
|
292
304
|
})));
|
|
293
305
|
})))));
|
|
294
306
|
};
|
|
@@ -30,6 +30,11 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
|
|
|
30
30
|
* @default false
|
|
31
31
|
*/
|
|
32
32
|
hasDivider?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* If true, render a header to group data, this menu item will not be intractable.
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
isHeader?: boolean;
|
|
33
38
|
/**
|
|
34
39
|
* If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
|
|
35
40
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2LD;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA2CN,OAAO,CAAC,WAAW,CAOjB;CACH"}
|
|
@@ -65,6 +65,9 @@ var icon_1 = require("@workday/canvas-kit-react/icon");
|
|
|
65
65
|
var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { padding: tokens_1.space.xxs + " " + tokens_1.space.s, height: tokens_1.space.xl, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
|
|
66
66
|
outline: 'none',
|
|
67
67
|
} }), function (_a) {
|
|
68
|
+
var isHeader = _a.isHeader;
|
|
69
|
+
return { pointerEvents: isHeader ? 'none' : 'all' };
|
|
70
|
+
}, function (_a) {
|
|
68
71
|
var _b;
|
|
69
72
|
var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
|
|
70
73
|
if (!isFocused && !isDisabled) {
|
|
@@ -227,12 +230,12 @@ var DeprecatedMenuItem = /** @class */ (function (_super) {
|
|
|
227
230
|
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
228
231
|
};
|
|
229
232
|
DeprecatedMenuItem.prototype.render = function () {
|
|
230
|
-
var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "role"]);
|
|
233
|
+
var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, isHeader = _a.isHeader, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "isHeader", "role"]);
|
|
231
234
|
iconProps = setIconProps(icon, isDisabled, isFocused);
|
|
232
235
|
secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
|
|
233
236
|
return (React.createElement(React.Fragment, null,
|
|
234
237
|
hasDivider && React.createElement(Divider, null),
|
|
235
|
-
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
|
|
238
|
+
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
|
|
236
239
|
icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
|
|
237
240
|
React.createElement(LabelContainer, null, children),
|
|
238
241
|
secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
|
|
@@ -28,7 +28,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
28
28
|
events: {};
|
|
29
29
|
}>;
|
|
30
30
|
} & {
|
|
31
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").
|
|
31
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
32
32
|
state: {
|
|
33
33
|
id: string;
|
|
34
34
|
hasError: boolean;
|
|
@@ -51,7 +51,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
51
51
|
};
|
|
52
52
|
events: {};
|
|
53
53
|
}>;
|
|
54
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
54
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
55
55
|
state: {
|
|
56
56
|
id: string;
|
|
57
57
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").
|
|
1
|
+
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -35,7 +35,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
35
35
|
events: {};
|
|
36
36
|
}>;
|
|
37
37
|
} & {
|
|
38
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
38
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
39
39
|
state: {
|
|
40
40
|
id: string;
|
|
41
41
|
hasError: boolean;
|
|
@@ -58,7 +58,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
58
58
|
};
|
|
59
59
|
events: {};
|
|
60
60
|
}>;
|
|
61
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
61
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
62
62
|
state: {
|
|
63
63
|
id: string;
|
|
64
64
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
1
|
+
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -37,7 +37,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
37
37
|
events: {};
|
|
38
38
|
}>;
|
|
39
39
|
} & {
|
|
40
|
-
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
40
|
+
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
41
41
|
state: {
|
|
42
42
|
id: string;
|
|
43
43
|
hasError: boolean;
|
|
@@ -53,7 +53,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
53
53
|
};
|
|
54
54
|
events: {};
|
|
55
55
|
}>;
|
|
56
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
56
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
57
57
|
state: {
|
|
58
58
|
id: string;
|
|
59
59
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
1
|
+
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
1
|
+
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -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,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;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;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;
|
|
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,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;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;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CAgF7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
|
|
@@ -73,7 +73,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
|
|
|
73
73
|
var children = React.Children.toArray(_this.props.children);
|
|
74
74
|
var nextSelectedIndex = 0;
|
|
75
75
|
var isShortcut = false;
|
|
76
|
-
var itemCount = children.
|
|
76
|
+
var itemCount = children.filter(function (child) {
|
|
77
|
+
var _a, _b;
|
|
78
|
+
return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
|
|
79
|
+
}).length;
|
|
77
80
|
var firstItem = 0;
|
|
78
81
|
var lastItem = itemCount - 1;
|
|
79
82
|
if (event.key.length === 1 && event.key.match(/\S/)) {
|
|
@@ -194,6 +197,10 @@ var DeprecatedMenu = /** @class */ (function (_super) {
|
|
|
194
197
|
return character;
|
|
195
198
|
};
|
|
196
199
|
var firstCharacters = React.Children.map(_this.props.children, function (child) {
|
|
200
|
+
var _a, _b;
|
|
201
|
+
if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
197
204
|
return getFirstCharacter(child);
|
|
198
205
|
});
|
|
199
206
|
_this.firstCharacters = firstCharacters;
|
|
@@ -253,17 +260,22 @@ var DeprecatedMenu = /** @class */ (function (_super) {
|
|
|
253
260
|
var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
|
|
254
261
|
var selectedItemIndex = this.state.selectedItemIndex;
|
|
255
262
|
var cardWidth = grow ? '100%' : width;
|
|
263
|
+
var interactiveItemIndex = null;
|
|
256
264
|
return (React.createElement(Card, { display: "inline-block", padding: space.zero, width: cardWidth, depth: 3 },
|
|
257
265
|
React.createElement(Card.Body, null,
|
|
258
|
-
React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem
|
|
266
|
+
React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem) {
|
|
259
267
|
if (!React.isValidElement(menuItem)) {
|
|
260
268
|
return;
|
|
261
269
|
}
|
|
262
|
-
var itemId
|
|
270
|
+
var itemId;
|
|
271
|
+
if (!menuItem.props.isHeader) {
|
|
272
|
+
interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
|
|
273
|
+
itemId = id + "-" + interactiveItemIndex;
|
|
274
|
+
}
|
|
263
275
|
return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
|
|
264
276
|
onClick: function (event) { return _this.handleClick(event, menuItem.props); },
|
|
265
277
|
id: itemId,
|
|
266
|
-
isFocused: selectedItemIndex ===
|
|
278
|
+
isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
|
|
267
279
|
})));
|
|
268
280
|
})))));
|
|
269
281
|
};
|
|
@@ -30,6 +30,11 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
|
|
|
30
30
|
* @default false
|
|
31
31
|
*/
|
|
32
32
|
hasDivider?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* If true, render a header to group data, this menu item will not be intractable.
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
isHeader?: boolean;
|
|
33
38
|
/**
|
|
34
39
|
* If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
|
|
35
40
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2LD;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA2CN,OAAO,CAAC,WAAW,CAOjB;CACH"}
|
|
@@ -40,6 +40,9 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
|
40
40
|
var Item = styled('li')(__assign(__assign({}, type.levels.subtext.large), { padding: space.xxs + " " + space.s, height: space.xl, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
|
|
41
41
|
outline: 'none',
|
|
42
42
|
} }), function (_a) {
|
|
43
|
+
var isHeader = _a.isHeader;
|
|
44
|
+
return { pointerEvents: isHeader ? 'none' : 'all' };
|
|
45
|
+
}, function (_a) {
|
|
43
46
|
var _b;
|
|
44
47
|
var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
|
|
45
48
|
if (!isFocused && !isDisabled) {
|
|
@@ -202,12 +205,12 @@ var DeprecatedMenuItem = /** @class */ (function (_super) {
|
|
|
202
205
|
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
203
206
|
};
|
|
204
207
|
DeprecatedMenuItem.prototype.render = function () {
|
|
205
|
-
var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "role"]);
|
|
208
|
+
var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, isHeader = _a.isHeader, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "isHeader", "role"]);
|
|
206
209
|
iconProps = setIconProps(icon, isDisabled, isFocused);
|
|
207
210
|
secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
|
|
208
211
|
return (React.createElement(React.Fragment, null,
|
|
209
212
|
hasDivider && React.createElement(Divider, null),
|
|
210
|
-
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
|
|
213
|
+
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
|
|
211
214
|
icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
|
|
212
215
|
React.createElement(LabelContainer, null, children),
|
|
213
216
|
secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
|
|
@@ -28,7 +28,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
28
28
|
events: {};
|
|
29
29
|
}>;
|
|
30
30
|
} & {
|
|
31
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").
|
|
31
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
32
32
|
state: {
|
|
33
33
|
id: string;
|
|
34
34
|
hasError: boolean;
|
|
@@ -51,7 +51,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
51
51
|
};
|
|
52
52
|
events: {};
|
|
53
53
|
}>;
|
|
54
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
54
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
55
55
|
state: {
|
|
56
56
|
id: string;
|
|
57
57
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").
|
|
1
|
+
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -35,7 +35,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
35
35
|
events: {};
|
|
36
36
|
}>;
|
|
37
37
|
} & {
|
|
38
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
38
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
39
39
|
state: {
|
|
40
40
|
id: string;
|
|
41
41
|
hasError: boolean;
|
|
@@ -58,7 +58,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
58
58
|
};
|
|
59
59
|
events: {};
|
|
60
60
|
}>;
|
|
61
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
61
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
62
62
|
state: {
|
|
63
63
|
id: string;
|
|
64
64
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
1
|
+
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
package/menu/lib/Menu.tsx
CHANGED
|
@@ -154,6 +154,7 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
|
|
|
154
154
|
} = this.props;
|
|
155
155
|
const {selectedItemIndex} = this.state;
|
|
156
156
|
const cardWidth = grow ? '100%' : width;
|
|
157
|
+
let interactiveItemIndex: number | null = null;
|
|
157
158
|
|
|
158
159
|
return (
|
|
159
160
|
<Card display="inline-block" padding={space.zero} width={cardWidth} depth={3}>
|
|
@@ -168,17 +169,22 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
|
|
|
168
169
|
ref={this.menuRef}
|
|
169
170
|
{...elemProps}
|
|
170
171
|
>
|
|
171
|
-
{React.Children.map(children,
|
|
172
|
+
{React.Children.map(children, menuItem => {
|
|
172
173
|
if (!React.isValidElement(menuItem)) {
|
|
173
174
|
return;
|
|
174
175
|
}
|
|
175
|
-
|
|
176
|
+
let itemId;
|
|
177
|
+
if (!menuItem.props.isHeader) {
|
|
178
|
+
interactiveItemIndex = (interactiveItemIndex ?? -1) + 1;
|
|
179
|
+
itemId = `${id}-${interactiveItemIndex}`;
|
|
180
|
+
}
|
|
176
181
|
return (
|
|
177
182
|
<React.Fragment key={itemId}>
|
|
178
183
|
{React.cloneElement(menuItem, {
|
|
179
184
|
onClick: (event: React.MouseEvent) => this.handleClick(event, menuItem.props),
|
|
180
185
|
id: itemId,
|
|
181
|
-
isFocused:
|
|
186
|
+
isFocused:
|
|
187
|
+
selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
|
|
182
188
|
})}
|
|
183
189
|
</React.Fragment>
|
|
184
190
|
);
|
|
@@ -210,7 +216,9 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
|
|
|
210
216
|
const children = React.Children.toArray(this.props.children);
|
|
211
217
|
let nextSelectedIndex = 0;
|
|
212
218
|
let isShortcut = false;
|
|
213
|
-
const itemCount = children.
|
|
219
|
+
const itemCount = children.filter(child => {
|
|
220
|
+
return !(child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.isHeader;
|
|
221
|
+
}).length;
|
|
214
222
|
const firstItem = 0;
|
|
215
223
|
const lastItem = itemCount - 1;
|
|
216
224
|
|
|
@@ -345,6 +353,9 @@ export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, Depreca
|
|
|
345
353
|
};
|
|
346
354
|
|
|
347
355
|
const firstCharacters = React.Children.map(this.props.children, child => {
|
|
356
|
+
if ((child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.isHeader) {
|
|
357
|
+
return;
|
|
358
|
+
}
|
|
348
359
|
return getFirstCharacter(child);
|
|
349
360
|
});
|
|
350
361
|
|
package/menu/lib/MenuItem.tsx
CHANGED
|
@@ -41,6 +41,11 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
|
|
|
41
41
|
* @default false
|
|
42
42
|
*/
|
|
43
43
|
hasDivider?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* If true, render a header to group data, this menu item will not be intractable.
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
isHeader?: boolean;
|
|
44
49
|
/**
|
|
45
50
|
* If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
|
|
46
51
|
* @default false
|
|
@@ -63,7 +68,7 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
|
|
|
63
68
|
shouldClose?: boolean;
|
|
64
69
|
}
|
|
65
70
|
|
|
66
|
-
const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocused'>>(
|
|
71
|
+
const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocused' | 'isHeader'>>(
|
|
67
72
|
{
|
|
68
73
|
...type.levels.subtext.large,
|
|
69
74
|
padding: `${space.xxs} ${space.s}`,
|
|
@@ -79,6 +84,9 @@ const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocuse
|
|
|
79
84
|
outline: 'none',
|
|
80
85
|
},
|
|
81
86
|
},
|
|
87
|
+
({isHeader}) => {
|
|
88
|
+
return {pointerEvents: isHeader ? 'none' : 'all'};
|
|
89
|
+
},
|
|
82
90
|
({isFocused, isDisabled}) => {
|
|
83
91
|
if (!isFocused && !isDisabled) {
|
|
84
92
|
return {
|
|
@@ -283,6 +291,7 @@ export class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps>
|
|
|
283
291
|
hasDivider,
|
|
284
292
|
isDisabled,
|
|
285
293
|
isFocused,
|
|
294
|
+
isHeader,
|
|
286
295
|
role,
|
|
287
296
|
...elemProps
|
|
288
297
|
} = this.props;
|
|
@@ -297,11 +306,12 @@ export class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps>
|
|
|
297
306
|
ref={this.ref}
|
|
298
307
|
tabIndex={-1}
|
|
299
308
|
id={id}
|
|
300
|
-
role={role}
|
|
309
|
+
role={isHeader ? 'presentation' : role}
|
|
301
310
|
onClick={this.handleClick}
|
|
302
311
|
aria-disabled={isDisabled ? true : undefined}
|
|
303
312
|
isDisabled={!!isDisabled}
|
|
304
313
|
isFocused={!!isFocused}
|
|
314
|
+
isHeader={!!isHeader}
|
|
305
315
|
{...elemProps}
|
|
306
316
|
>
|
|
307
317
|
{icon && iconProps && <StyledSystemIcon {...iconProps} />}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.216-next.4+df0f1156",
|
|
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",
|
|
@@ -46,15 +46,16 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^8.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^8.0.0-alpha.216-next.4+df0f1156",
|
|
50
50
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
51
51
|
"@workday/design-assets-types": "^0.2.8"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
55
|
-
"@workday/canvas-kit-labs-react": "^8.0.0-alpha.
|
|
55
|
+
"@workday/canvas-kit-labs-react": "^8.0.0-alpha.216-next.4+df0f1156",
|
|
56
56
|
"formik": "^2.2.9",
|
|
57
|
-
"
|
|
57
|
+
"react-hook-form": "7.36.1",
|
|
58
|
+
"yup": "^0.32.11"
|
|
58
59
|
},
|
|
59
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "df0f115637454a88469b36a9686c0c666995290f"
|
|
60
61
|
}
|