@workday/canvas-kit-react 7.4.9 → 7.4.11

package/collection/lib/useCursorListModel.tsx

@@ -312,7 +312,7 @@ export const useCursorListModel = createModelHook({
   const columnCount = config.columnCount || 0;
   const list = useBaseListModel(config);
   const initialCurrentRef = React.useRef(
-    config.initialCursorId || (config.items?.length ? getId(config.items![0]) : '')
+    config.initialCursorId || (config.items?.length ? getId(list.state.items![0]) : '')
   );
   const navigation = config.navigation;
 

package/collection/lib/useListItemRovingFocus.tsx

@@ -62,11 +62,10 @@ const hasOwnKey = <T extends object>(obj: T, key: any): key is keyof T => obj.ha
  * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
  */
 export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
-  ({state, events, getId, navigation}, ref, elemProps: {'data-id'?: string} = {}) => {
+  ({state, events, navigation}, ref, elemProps: {'data-id'?: string} = {}) => {
     // Tracks when this element has focus. If this item is removed while still focused, we have to
     // inform the model to move the cursor to the next item.
     const focusRef = React.useRef(false);
-    const getIdRef = React.useRef(getId);
 
     // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
     // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
@@ -85,9 +84,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
         }
         requestAnimationFrame(() => {
           document
-            .querySelector<HTMLElement>(
-              `[data-focus-id="${`${state.id}-${getIdRef.current(item)}`}"]`
-            )
+            .querySelector<HTMLElement>(`[data-focus-id="${`${state.id}-${item.id}`}"]`)
             ?.focus();
         });
 

package/collection/lib/useListItemSelect.tsx

@@ -9,12 +9,11 @@ export const useListItemSelect = createElemPropsHook(useListModel)(
     const name = elemProps['data-id'] || '';
     const onClick = (event: React.MouseEvent<HTMLElement>) => {
       if (
-        state.nonInteractiveIds.includes(name) ||
-        event.currentTarget.hasAttribute('aria-disabled')
+        !state.nonInteractiveIds.includes(name) &&
+        event.currentTarget.getAttribute('aria-disabled') !== 'true'
       ) {
-        return;
+        events.select({id: name});
       }
-      events.select({id: name});
     };
 
     return {onClick};

package/dist/commonjs/collection/lib/useCursorListModel.js

@@ -293,7 +293,7 @@ exports.useCursorListModel = common_1.createModelHook({
     var _b = react_1.default.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
     var columnCount = config.columnCount || 0;
     var list = useBaseListModel_1.useBaseListModel(config);
-    var initialCurrentRef = react_1.default.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? useBaseListModel_1.defaultGetId(config.items[0]) : ''));
+    var initialCurrentRef = react_1.default.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? useBaseListModel_1.defaultGetId(list.state.items[0]) : ''));
     var navigation = config.navigation;
     var state = __assign(__assign({}, list.state), { 
         /** The id of the list item the cursor is pointing to */

package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}

package/dist/commonjs/collection/lib/useListItemRovingFocus.js

@@ -64,12 +64,11 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
  * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
  */
 exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)(function (_a, ref, elemProps) {
-    var state = _a.state, events = _a.events, getId = _a.getId, navigation = _a.navigation;
+    var state = _a.state, events = _a.events, navigation = _a.navigation;
     if (elemProps === void 0) { elemProps = {}; }
     // Tracks when this element has focus. If this item is removed while still focused, we have to
     // inform the model to move the cursor to the next item.
     var focusRef = react_1.default.useRef(false);
-    var getIdRef = react_1.default.useRef(getId);
     // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
     // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
     // empty array
@@ -86,7 +85,7 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
             requestAnimationFrame(function () {
                 var _a;
                 (_a = document
-                    .querySelector("[data-focus-id=\"" + (state.id + "-" + getIdRef.current(item_1)) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
+                    .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
             });
             keyDownRef.current = false;
         }

package/dist/commonjs/collection/lib/useListItemSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;;;OAYxD,CAAC"}
+{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;;;OAWxD,CAAC"}

package/dist/commonjs/collection/lib/useListItemSelect.js

@@ -8,11 +8,10 @@ exports.useListItemSelect = common_1.createElemPropsHook(useListModel_1.useListM
     if (elemProps === void 0) { elemProps = {}; }
     var name = elemProps['data-id'] || '';
     var onClick = function (event) {
-        if (state.nonInteractiveIds.includes(name) ||
-            event.currentTarget.hasAttribute('aria-disabled')) {
-            return;
+        if (!state.nonInteractiveIds.includes(name) &&
+            event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+            events.select({ id: name });
         }
-        events.select({ id: name });
     };
     return { onClick: onClick };
 });

package/dist/commonjs/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACrD,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CA8BpB;IAEF,MAAM;CA2DP;AAKD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACrD,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CAkCpB;IAEF,MAAM;CA2DP;AAKD,eAAe,SAAS,CAAC"}

package/dist/commonjs/form-field/lib/FormField.js

@@ -138,6 +138,9 @@ var FormField = /** @class */ (function (_super) {
                         props['aria-invalid'] = true;
                     }
                 }
+                if (_this.props.required) {
+                    props.required = true;
+                }
                 props.id = _this.inputId;
                 return React.cloneElement(child, props);
             }

package/dist/commonjs/form-field/lib/Label.d.ts

@@ -12,7 +12,7 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
      */
     isLegend?: boolean;
     /**
-     * The id of a labelable form-related element. Synonymous with `for`.
+     * The id of the form-related element. Synonymous with `for`.
      */
     htmlFor?: string;
     /**
@@ -21,8 +21,9 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
      */
     required?: boolean;
     /**
-     * The title of the required label.
-     * @default required
+     * The required label is not visible to screen readers and should have no label. This prop will be
+     * ignored.
+     * @deprecated
      */
     requiredLabel?: string;
     /**

package/dist/commonjs/form-field/lib/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,sBAAsB,EAAE,8BAA8B,EAAC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,UAAW,SAAQ,8BAA8B;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAuDD,cAAM,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;IAC7C,MAAM,CAAC,QAAQ,gCAA0B;IAElC,MAAM;CA8Bd;AAID,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,sBAAsB,EAAE,8BAA8B,EAAC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,UAAW,SAAQ,8BAA8B;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAuDD,cAAM,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;IAC7C,MAAM,CAAC,QAAQ,gCAA0B;IAElC,MAAM;CA8Bd;AAID,eAAe,KAAK,CAAC"}

package/dist/commonjs/form-field/lib/Label.js

@@ -86,7 +86,7 @@ var labelStyles = [
             }));
     },
 ];
-var RequiredAstrisk = common_1.styled('abbr')({
+var RequiredAsterisk = common_1.styled('abbr')({
     color: tokens_1.colors.cinnamon500,
     fontSize: '16px',
     fontWeight: 400,
@@ -116,12 +116,12 @@ var Label = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Label.prototype.render = function () {
-        var _a = this.props, _b = _a.labelPosition, labelPosition = _b === void 0 ? Label.Position.Top : _b, _c = _a.isLegend, isLegend = _c === void 0 ? false : _c, _d = _a.requiredLabel, requiredLabel = _d === void 0 ? 'required' : _d, elemProps = __rest(_a, ["labelPosition", "isLegend", "requiredLabel"]);
-        var children = !this.props.required
+        var _a = this.props, _b = _a.labelPosition, labelPosition = _b === void 0 ? Label.Position.Top : _b, _c = _a.isLegend, isLegend = _c === void 0 ? false : _c, required = _a.required, elemProps = __rest(_a, ["labelPosition", "isLegend", "required"]);
+        var children = !required
             ? this.props.children
             : [
                 this.props.children,
-                React.createElement(RequiredAstrisk, { key: '0', title: requiredLabel }, "*"),
+                React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*"),
             ];
         return (React.createElement(React.Fragment, null, isLegend ? (React.createElement(LegendComponent, __assign({ labelPosition: labelPosition, isLegend: isLegend }, elemProps, { children: children }))) : (React.createElement(LabelComponent, __assign({ labelPosition: labelPosition }, elemProps, { children: children })))));
     };

package/dist/commonjs/menu/lib/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6FD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6FD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuCvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

package/dist/commonjs/menu/lib/MenuItem.js

@@ -91,7 +91,7 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
                 fill: tokens_1.iconColors.hover,
             },
         },
-    }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
+    }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled=true]'] = {
         color: tokens_1.colors.licorice100,
         cursor: 'default',
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -146,7 +146,10 @@ exports.useMenuItem = common_1.composeHooks(common_1.createElemPropsHook(useMenu
         role: 'menuitem',
         onClick: model.state.mode === 'single'
             ? function (event) {
-                model.events.hide(event);
+                // only hide if the item isn't disabled
+                if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+                    model.events.hide(event);
+                }
             }
             : undefined,
     };

package/dist/es6/collection/lib/useCursorListModel.js

@@ -278,7 +278,7 @@ export var useCursorListModel = createModelHook({
     var _b = React.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
     var columnCount = config.columnCount || 0;
     var list = useBaseListModel(config);
-    var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(config.items[0]) : ''));
+    var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : ''));
     var navigation = config.navigation;
     var state = __assign(__assign({}, list.state), { 
         /** The id of the list item the cursor is pointing to */

package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}

package/dist/es6/collection/lib/useListItemRovingFocus.js

@@ -58,12 +58,11 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
  * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
  */
 export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(function (_a, ref, elemProps) {
-    var state = _a.state, events = _a.events, getId = _a.getId, navigation = _a.navigation;
+    var state = _a.state, events = _a.events, navigation = _a.navigation;
     if (elemProps === void 0) { elemProps = {}; }
     // Tracks when this element has focus. If this item is removed while still focused, we have to
     // inform the model to move the cursor to the next item.
     var focusRef = React.useRef(false);
-    var getIdRef = React.useRef(getId);
     // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
     // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
     // empty array
@@ -80,7 +79,7 @@ export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(func
             requestAnimationFrame(function () {
                 var _a;
                 (_a = document
-                    .querySelector("[data-focus-id=\"" + (state.id + "-" + getIdRef.current(item_1)) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
+                    .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
             });
             keyDownRef.current = false;
         }

package/dist/es6/collection/lib/useListItemSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;;;OAYxD,CAAC"}
+{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;;;OAWxD,CAAC"}

package/dist/es6/collection/lib/useListItemSelect.js

@@ -5,11 +5,10 @@ export var useListItemSelect = createElemPropsHook(useListModel)(function (_a, _
     if (elemProps === void 0) { elemProps = {}; }
     var name = elemProps['data-id'] || '';
     var onClick = function (event) {
-        if (state.nonInteractiveIds.includes(name) ||
-            event.currentTarget.hasAttribute('aria-disabled')) {
-            return;
+        if (!state.nonInteractiveIds.includes(name) &&
+            event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+            events.select({ id: name });
         }
-        events.select({ id: name });
     };
     return { onClick: onClick };
 });

package/dist/es6/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACrD,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CA8BpB;IAEF,MAAM;CA2DP;AAKD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACrD,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CAkCpB;IAEF,MAAM;CA2DP;AAKD,eAAe,SAAS,CAAC"}

package/dist/es6/form-field/lib/FormField.js

@@ -114,6 +114,9 @@ var FormField = /** @class */ (function (_super) {
                         props['aria-invalid'] = true;
                     }
                 }
+                if (_this.props.required) {
+                    props.required = true;
+                }
                 props.id = _this.inputId;
                 return React.cloneElement(child, props);
             }

package/dist/es6/form-field/lib/Label.d.ts

@@ -12,7 +12,7 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
      */
     isLegend?: boolean;
     /**
-     * The id of a labelable form-related element. Synonymous with `for`.
+     * The id of the form-related element. Synonymous with `for`.
      */
     htmlFor?: string;
     /**
@@ -21,8 +21,9 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
      */
     required?: boolean;
     /**
-     * The title of the required label.
-     * @default required
+     * The required label is not visible to screen readers and should have no label. This prop will be
+     * ignored.
+     * @deprecated
      */
     requiredLabel?: string;
     /**

package/dist/es6/form-field/lib/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,sBAAsB,EAAE,8BAA8B,EAAC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,UAAW,SAAQ,8BAA8B;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAuDD,cAAM,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;IAC7C,MAAM,CAAC,QAAQ,gCAA0B;IAElC,MAAM;CA8Bd;AAID,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,sBAAsB,EAAE,8BAA8B,EAAC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,UAAW,SAAQ,8BAA8B;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAuDD,cAAM,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;IAC7C,MAAM,CAAC,QAAQ,gCAA0B;IAElC,MAAM;CA8Bd;AAID,eAAe,KAAK,CAAC"}

package/dist/es6/form-field/lib/Label.js

@@ -65,7 +65,7 @@ var labelStyles = [
             }));
     },
 ];
-var RequiredAstrisk = styled('abbr')({
+var RequiredAsterisk = styled('abbr')({
     color: colors.cinnamon500,
     fontSize: '16px',
     fontWeight: 400,
@@ -95,12 +95,12 @@ var Label = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Label.prototype.render = function () {
-        var _a = this.props, _b = _a.labelPosition, labelPosition = _b === void 0 ? Label.Position.Top : _b, _c = _a.isLegend, isLegend = _c === void 0 ? false : _c, _d = _a.requiredLabel, requiredLabel = _d === void 0 ? 'required' : _d, elemProps = __rest(_a, ["labelPosition", "isLegend", "requiredLabel"]);
-        var children = !this.props.required
+        var _a = this.props, _b = _a.labelPosition, labelPosition = _b === void 0 ? Label.Position.Top : _b, _c = _a.isLegend, isLegend = _c === void 0 ? false : _c, required = _a.required, elemProps = __rest(_a, ["labelPosition", "isLegend", "required"]);
+        var children = !required
             ? this.props.children
             : [
                 this.props.children,
-                React.createElement(RequiredAstrisk, { key: '0', title: requiredLabel }, "*"),
+                React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*"),
             ];
         return (React.createElement(React.Fragment, null, isLegend ? (React.createElement(LegendComponent, __assign({ labelPosition: labelPosition, isLegend: isLegend }, elemProps, { children: children }))) : (React.createElement(LabelComponent, __assign({ labelPosition: labelPosition }, elemProps, { children: children })))));
     };

package/dist/es6/menu/lib/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6FD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6FD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuCvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

package/dist/es6/menu/lib/MenuItem.js

@@ -69,7 +69,7 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
                 fill: iconColors.hover,
             },
         },
-    }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
+    }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled=true]'] = {
         color: colors.licorice100,
         cursor: 'default',
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -124,7 +124,10 @@ export var useMenuItem = composeHooks(createElemPropsHook(useMenuModel)(function
         role: 'menuitem',
         onClick: model.state.mode === 'single'
             ? function (event) {
-                model.events.hide(event);
+                // only hide if the item isn't disabled
+                if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+                    model.events.hide(event);
+                }
             }
             : undefined,
     };

package/form-field/lib/FormField.tsx

@@ -166,6 +166,10 @@ class FormField extends React.Component<FormFieldProps> {
         }
       }
 
+      if (this.props.required) {
+        props.required = true;
+      }
+
       props.id = this.inputId;
 
       return React.cloneElement(child, props);

package/form-field/lib/Label.tsx

@@ -15,7 +15,7 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
    */
   isLegend?: boolean;
   /**
-   * The id of a labelable form-related element. Synonymous with `for`.
+   * The id of the form-related element. Synonymous with `for`.
    */
   htmlFor?: string;
   /**
@@ -24,8 +24,9 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
    */
   required?: boolean;
   /**
-   * The title of the required label.
-   * @default required
+   * The required label is not visible to screen readers and should have no label. This prop will be
+   * ignored.
+   * @deprecated
    */
   requiredLabel?: string;
   /**
@@ -62,7 +63,7 @@ const labelStyles = [
   },
 ];
 
-const RequiredAstrisk = styled('abbr')({
+const RequiredAsterisk = styled('abbr')({
   color: colors.cinnamon500,
   fontSize: '16px',
   fontWeight: 400,
@@ -95,16 +96,16 @@ class Label extends React.Component<LabelProps> {
     const {
       labelPosition = Label.Position.Top,
       isLegend = false,
-      requiredLabel = 'required',
+      required,
       ...elemProps
     } = this.props;
-    const children = !this.props.required
+    const children = !required
       ? this.props.children
       : [
           this.props.children,
-          <RequiredAstrisk key={'0'} title={requiredLabel}>
+          <RequiredAsterisk key={'0'} aria-hidden>
             *
-          </RequiredAstrisk>,
+          </RequiredAsterisk>,
         ];
     return (
       <>

package/menu/lib/MenuItem.tsx

@@ -97,7 +97,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
         },
       },
       backgroundColor: 'inherit',
-      '&:disabled, &[aria-disabled]': {
+      '&:disabled, &[aria-disabled=true]': {
         color: colors.licorice100,
         cursor: 'default',
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -158,7 +158,10 @@ export const useMenuItem = composeHooks(
         onClick:
           model.state.mode === 'single'
             ? (event: React.SyntheticEvent) => {
-                model.events.hide(event);
+                // only hide if the item isn't disabled
+                if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+                  model.events.hide(event);
+                }
               }
             : undefined,
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.4.9",
+  "version": "7.4.11",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,7 +41,8 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^16.8 || ^17.0"
+    "react": "^16.8 || ^17.0",
+    "react-dom": "^16.8 || ^17.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.1",
@@ -49,7 +50,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^7.4.9",
+    "@workday/canvas-kit-popup-stack": "^7.4.11",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -68,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "ef4231dc82547a15ca41738f8b04731ccaa815a2"
+  "gitHead": "0e4657f28e4ece8a2920e99b9466a1dfb3e8d79e"
 }