@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.760-next.0

package/select/lib/hooks/useSelectInput.ts

@@ -14,12 +14,16 @@ import {
 } from '@workday/canvas-kit-react/combobox';
 import {useSelectModel} from './useSelectModel';
 
+function noop() {
+  // Do nothing
+}
+
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(
   createElemPropsHook(useSelectModel)(
-    (model, ref, elemProps: {keySofar?: string; placeholder?: string} = {}) => {
+    (model, ref, elemProps: {keySofar?: string; placeholder?: string; value?: string} = {}) => {
       const {elementRef} = useLocalRef<HTMLInputElement>(ref as any);
       const textInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -30,6 +34,7 @@ export const useSelectInput = composeHooks(
           Object.getPrototypeOf(textInputRef.current),
           'value'
         );
+
         if (nativeInputValue && nativeInputValue.set) {
           nativeInputValue.set.call(textInputRef.current, value);
         }
@@ -54,6 +59,19 @@ export const useSelectInput = composeHooks(
           model.state.selectedIds[0]
         ) {
           const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+
+          // force the hidden input to have the correct value
+          if (model.state.inputRef.current.value !== value) {
+            const nativeInputValue = Object.getOwnPropertyDescriptor(
+              Object.getPrototypeOf(model.state.inputRef.current),
+              'value'
+            );
+
+            if (nativeInputValue && nativeInputValue.set) {
+              nativeInputValue.set.call(model.state.inputRef.current, value);
+            }
+          }
+
           if (
             model.state.selectedIds[0] !== value &&
             model.state.inputRef.current.value !== value
@@ -130,15 +148,13 @@ export const useSelectInput = composeHooks(
         },
         textInputProps: {
           ref: textInputRef,
+          onChange: noop,
+          value:
+            model.state.selectedIds.length > 0 && model.state.items.length > 0
+              ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
+              : '',
         },
         ref: elementRef,
-
-        // Account for the case where an initial item is selected when the Select first renders
-        defaultValue:
-          model.state.selectedIds.length > 0 && model.state.items.length > 0
-            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
-              model.state.value
-            : undefined,
       } as const;
     }
   ),

package/tabs/lib/TabsItem.tsx

@@ -17,7 +17,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {Box, FlexProps} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {
   useListItemRegister,
   useListItemRovingFocus,
@@ -104,9 +104,8 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
     '&:hover, &:focus': {
       backgroundColor: colors.soap200,
       color: colors.blackPepper400,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.hover,
-      },
+
+      [systemIconStencil.vars.color]: iconColors.hover,
     },
 
     '&:focus': {
@@ -116,24 +115,18 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
 
     '&:disabled, &[aria-disabled]': {
       color: colors.licorice100,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.disabled,
-      },
+      [systemIconStencil.vars.color]: iconColors.disabled,
       '&:hover': {
         cursor: 'auto',
         backgroundColor: `transparent`,
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-          fill: iconColors.disabled,
-        },
+        [systemIconStencil.vars.color]: iconColors.disabled,
       },
     },
 
     '&[aria-selected=true]': {
       color: theme.canvas.palette.primary.main,
       cursor: 'default',
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: theme.canvas.palette.primary.main,
-      },
+      [systemIconStencil.vars.color]: theme.canvas.palette.primary.main,
       '&:after': {
         position: 'absolute',
         height: space.xxxs,

package/tabs/lib/useTabsModel.tsx

@@ -54,7 +54,6 @@ export const useTabsModel = createModelHook({
   const getId = config.getId || defaultGetId;
   const modality = useModalityType();
 
-
   const model = useOverflowListModel(
     useOverflowListModel.mergeConfig(config, {
       shouldCalculateOverflow: modality !== 'touch',

package/text/lib/LabelText.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {textStencil} from './Text';
 
 /**
  * @deprecated ⚠️ `TypeLabelProps` has been deprecated and will be removed in a future major version.
@@ -28,83 +29,30 @@ export interface TypeLabelProps extends BoxProps {
 }
 
 const labelTextStencil = createStencil({
+  extends: textStencil,
   base: {
     ...system.type.subtext.large,
-    color: base.blackPepper300,
+    color: system.color.text.default,
   },
   modifiers: {
-    typeLevel: {
-      // Title level styles
-      'title.large': {
-        ...system.type.title.large,
-        color: base.blackPepper400,
-      },
-      'title.medium': {
-        ...system.type.title.medium,
-        color: base.blackPepper400,
-      },
-      'title.small': {
-        ...system.type.title.small,
-        color: base.blackPepper400,
-      },
-      // Heading level styles
-      'heading.large': {
-        ...system.type.heading.large,
-        color: base.blackPepper400,
-      },
-      'heading.medium': {
-        ...system.type.heading.medium,
-        color: base.blackPepper400,
-      },
-      'heading.small': {
-        ...system.type.heading.small,
-        color: base.blackPepper400,
-      },
-      // Body level styles
-      'body.large': {
-        ...system.type.body.large,
-        color: base.blackPepper300,
-      },
-      'body.medium': {
-        ...system.type.body.medium,
-        color: base.blackPepper300,
-      },
-      'body.small': {
-        ...system.type.body.small,
-        color: base.blackPepper300,
-      },
-      // Subtext level styles
-      'subtext.large': {
-        ...system.type.subtext.large,
-        color: base.blackPepper300,
-      },
-      'subtext.medium': {
-        ...system.type.subtext.medium,
-        color: base.blackPepper300,
-      },
-      'subtext.small': {
-        ...system.type.subtext.small,
-        color: base.blackPepper300,
-      },
-    },
-    variant: {
-      error: {color: base.cinnamon500},
-      hint: {color: base.licorice300},
-      inverse: {color: base.frenchVanilla100},
-    },
     disabled: {
       true: {
         cursor: 'default',
-        color: base.licorice100,
+        color: system.color.text.disabled,
       },
     },
+    variant: {
+      inverse: {color: system.color.text.inverse},
+      error: {color: system.color.text.critical.default},
+      hint: {color: system.color.text.hint},
+    },
   },
   compound: [
     {
       modifiers: {variant: 'inverse', disabled: true},
       styles: {
         opacity: system.opacity.disabled,
-        color: base.frenchVanilla100,
+        color: system.color.text.inverse,
       },
     },
   ],

package/text/lib/Text.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createModifiers, createStyles} from '@workday/canvas-kit-styling';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
 
 type TypeSize = 'large' | 'medium' | 'small';
@@ -27,65 +27,68 @@ export interface TextProps extends BoxProps {
   variant?: 'error' | 'hint' | 'inverse';
 }
 
-const textModifiers = createModifiers({
-  typeLevel: {
-    // Title level styles
-    'title.large': createStyles({
-      ...system.type.title.large,
-      color: base.blackPepper400,
-    }),
-    'title.medium': createStyles({
-      ...system.type.title.medium,
-      color: base.blackPepper400,
-    }),
-    'title.small': createStyles({
-      ...system.type.title.small,
-      color: base.blackPepper400,
-    }),
-    // Heading level styles
-    'heading.large': createStyles({
-      ...system.type.heading.large,
-      color: base.blackPepper400,
-    }),
-    'heading.medium': createStyles({
-      ...system.type.heading.medium,
-      color: base.blackPepper400,
-    }),
-    'heading.small': createStyles({
-      ...system.type.heading.small,
-      color: base.blackPepper400,
-    }),
-    // Body level styles
-    'body.large': createStyles({
-      ...system.type.body.large,
-      color: base.blackPepper300,
-    }),
-    'body.medium': createStyles({
-      ...system.type.body.medium,
-      color: base.blackPepper300,
-    }),
-    'body.small': createStyles({
-      ...system.type.body.small,
-      color: base.blackPepper300,
-    }),
-    // Subtext level styles
-    'subtext.large': createStyles({
-      ...system.type.subtext.large,
-      color: base.blackPepper300,
-    }),
-    'subtext.medium': createStyles({
-      ...system.type.subtext.medium,
-      color: base.blackPepper300,
-    }),
-    'subtext.small': createStyles({
-      ...system.type.subtext.small,
-      color: base.blackPepper300,
-    }),
-  },
-  variant: {
-    error: createStyles({color: base.cinnamon500}),
-    hint: createStyles({color: base.licorice300}),
-    inverse: createStyles({color: base.frenchVanilla100}),
+export const textStencil = createStencil({
+  base: {},
+  modifiers: {
+    typeLevel: {
+      // Title level styles
+      'title.large': {
+        ...system.type.title.large,
+        color: system.color.text.strong,
+      },
+      'title.medium': {
+        ...system.type.title.medium,
+        color: system.color.text.strong,
+      },
+      'title.small': {
+        ...system.type.title.small,
+        color: system.color.text.strong,
+      },
+      // Heading level styles
+      'heading.large': {
+        ...system.type.heading.large,
+        color: system.color.text.strong,
+      },
+      'heading.medium': {
+        ...system.type.heading.medium,
+        color: system.color.text.strong,
+      },
+      'heading.small': {
+        ...system.type.heading.small,
+        color: system.color.text.strong,
+      },
+      // Body level styles
+      'body.large': {
+        ...system.type.body.large,
+        color: system.color.text.default,
+      },
+      'body.medium': {
+        ...system.type.body.medium,
+        color: system.color.text.default,
+      },
+      'body.small': {
+        ...system.type.body.small,
+        color: system.color.text.default,
+      },
+      // Subtext level styles
+      'subtext.large': {
+        ...system.type.subtext.large,
+        color: system.color.text.default,
+      },
+      'subtext.medium': {
+        ...system.type.subtext.medium,
+        color: system.color.text.default,
+      },
+      'subtext.small': {
+        ...system.type.subtext.small,
+        color: system.color.text.default,
+      },
+    },
+    variant: {
+      error: {color: system.color.text.critical.default},
+      hint: {color: system.color.text.hint},
+      inverse: {color: system.color.text.inverse},
+    },
   },
 });
 
@@ -124,7 +127,7 @@ export const Text = createComponent('span')({
   displayName: 'Text',
   Component: ({children, typeLevel, variant, ...elemProps}: TextProps, ref, Element) => {
     return (
-      <Element ref={ref} {...mergeStyles(elemProps, textModifiers({typeLevel, variant}))}>
+      <Element ref={ref} {...mergeStyles(elemProps, textStencil({typeLevel, variant}))}>
         {children}
       </Element>
     );

package/tooltip/lib/OverflowTooltip.tsx

@@ -59,10 +59,9 @@ const isOverflowed = (element: Element) => {
   const overflowElement = findEllipsisElement(element) || findOverflowElement(element);
 
   if (overflowElement) {
-    const clientRect = overflowElement.getBoundingClientRect();
     return (
-      overflowElement.scrollWidth > clientRect.width ||
-      overflowElement.scrollHeight > clientRect.height
+      overflowElement.scrollWidth > overflowElement.clientWidth ||
+      overflowElement.scrollHeight > overflowElement.clientHeight
     );
   }
   return false;

package/dist/commonjs/icon/lib/Icon.d.ts

@@ -1,9 +0,0 @@
-import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-import { SvgProps } from './Svg';
-export interface IconProps extends SvgProps {
-    src: CanvasIcon;
-    size?: number | string;
-    type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-}
-export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", IconProps>;
-//# sourceMappingURL=Icon.d.ts.map

package/dist/commonjs/icon/lib/Icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;CAChF;AAED,eAAO,MAAM,IAAI,gFAyBf,CAAC"}

package/dist/commonjs/icon/lib/Icon.js

@@ -1,40 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = void 0;
-const React = __importStar(require("react"));
-const Svg_1 = require("./Svg");
-const common_1 = require("@workday/canvas-kit-react/common");
-exports.Icon = common_1.createComponent('span')({
-    displayName: 'Icon',
-    Component: ({ src, size, styles, type, shouldMirror, ...elemProps }, ref, Element) => {
-        var _a;
-        const iconStyles = { ...styles };
-        if (size) {
-            iconStyles['& svg'] = {
-                ...((_a = iconStyles['& svg']) !== null && _a !== void 0 ? _a : {}),
-                width: size,
-                height: size,
-            };
-        }
-        return (React.createElement(Svg_1.Svg, Object.assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
-    },
-});

package/dist/es6/icon/lib/Icon.d.ts

@@ -1,9 +0,0 @@
-import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-import { SvgProps } from './Svg';
-export interface IconProps extends SvgProps {
-    src: CanvasIcon;
-    size?: number | string;
-    type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-}
-export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", IconProps>;
-//# sourceMappingURL=Icon.d.ts.map

package/dist/es6/icon/lib/Icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;CAChF;AAED,eAAO,MAAM,IAAI,gFAyBf,CAAC"}

package/dist/es6/icon/lib/Icon.js

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Svg } from './Svg';
-import { createComponent } from '@workday/canvas-kit-react/common';
-export const Icon = createComponent('span')({
-    displayName: 'Icon',
-    Component: ({ src, size, styles, type, shouldMirror, ...elemProps }, ref, Element) => {
-        var _a;
-        const iconStyles = { ...styles };
-        if (size) {
-            iconStyles['& svg'] = {
-                ...((_a = iconStyles['& svg']) !== null && _a !== void 0 ? _a : {}),
-                width: size,
-                height: size,
-            };
-        }
-        return (React.createElement(Svg, Object.assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
-    },
-});

package/icon/lib/Icon.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import {CSSObject} from '@emotion/styled';
-import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {Svg, SvgProps} from './Svg';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export interface IconProps extends SvgProps {
-  src: CanvasIcon;
-  size?: number | string;
-  type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-}
-
-export const Icon = createComponent('span')({
-  displayName: 'Icon',
-  Component: ({src, size, styles, type, shouldMirror, ...elemProps}: IconProps, ref, Element) => {
-    const iconStyles: CSSObject = {...styles};
-
-    if (size) {
-      iconStyles['& svg'] = {
-        ...((iconStyles['& svg'] as CSSObject) ?? {}),
-        width: size,
-        height: size,
-      };
-    }
-
-    return (
-      <Svg
-        src={src}
-        type={type}
-        shouldMirror={shouldMirror}
-        as={Element}
-        {...elemProps}
-        ref={ref}
-        styles={iconStyles}
-      />
-    );
-  },
-});