@workday/canvas-kit-preview-react 15.0.0-alpha.0075-next.0 → 15.0.0-alpha.0077-next.0

package/dist/commonjs/index.d.ts

@@ -1,10 +1,9 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';
 export * from './multi-select';
 export * from './radio';
-export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './version';

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}

package/dist/commonjs/index.js

@@ -14,13 +14,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./avatar"), exports);
+__exportStar(require("@workday/canvas-kit-react/avatar"), exports);
 __exportStar(require("./color-picker"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./loading-sparkles"), exports);
 __exportStar(require("./multi-select"), exports);
 __exportStar(require("./radio"), exports);
-__exportStar(require("./select"), exports);
 __exportStar(require("./side-panel"), exports);
 __exportStar(require("./status-indicator"), exports);
 __exportStar(require("./version"), exports);

package/dist/es6/index.d.ts

@@ -1,10 +1,9 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';
 export * from './multi-select';
 export * from './radio';
-export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './version';

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}

package/dist/es6/index.js

@@ -1,10 +1,9 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';
 export * from './multi-select';
 export * from './radio';
-export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './version';

package/index.ts

@@ -1,10 +1,9 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';
 export * from './multi-select';
 export * from './radio';
-export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './version';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "15.0.0-alpha.0075-next.0",
+  "version": "15.0.0-alpha.0077-next.0",
   "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.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0075-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0075-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0077-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0077-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10"
@@ -60,5 +60,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "85c5dfa329d29263f96a49be74ef55f551990c7b"
+  "gitHead": "6944d028b6f1250481ad8c4f8d5f817bea4e01a1"
 }

package/avatar/index.ts

@@ -1,5 +0,0 @@
-export * from './lib/Avatar';
-export * from './lib/AvatarImage';
-export * from './lib/AvatarName';
-export * from './lib/BaseAvatar';
-export * from './lib/getInitialsFromName';

package/avatar/lib/Avatar.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {Property} from 'csstype';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-import {BaseAvatarProps, BaseAvatar, baseAvatarStencil} from './BaseAvatar';
-import {AvatarNameProps} from './AvatarName';
-
-export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
-  /**
-   * The URL of the user's photo. For best fit, use square images.
-   */
-  url?: string;
-  /**
-   * An objectFit property that can customize how to resize your image to fit its container.
-   * @default "contain"
-   */
-  objectFit?: Property.ObjectFit;
-  /**
-   * If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
-   */
-  isDecorative?: boolean;
-}
-
-export const avatarStencil = createStencil({
-  extends: baseAvatarStencil,
-  parts: {
-    avatarImage: 'avatar-image',
-    avatarName: 'avatar-name',
-  },
-  base: {},
-  modifiers: {
-    imageLoaded: {
-      false: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          display: 'none',
-        },
-      }),
-      true: {
-        backgroundColor: system.color.bg.default,
-      },
-    },
-    objectFit: {
-      contain: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'contain',
-        },
-      }),
-      cover: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'cover',
-        },
-      }),
-      fill: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'fill',
-        },
-      }),
-      none: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'none',
-        },
-      }),
-      ['scale-down']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'scale-down',
-        },
-      }),
-      initial: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'initial',
-        },
-      }),
-
-      inherit: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'inherit',
-        },
-      }),
-      unset: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'unset',
-        },
-      }),
-      ['-moz-initial']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: '-moz-initial',
-        },
-      }),
-      ['revert']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'revert',
-        },
-      }),
-    },
-  },
-});
-
-/**
- * JSDoc for Avatar. Will be part of the Component API docs
- */
-export const Avatar = createComponent('div')({
-  displayName: 'Avatar',
-
-  Component: (
-    {
-      url,
-      name,
-      variant,
-      objectFit = 'contain',
-      preferredInitials,
-      isDecorative,
-      size,
-      ...elemProps
-    }: AvatarProps,
-    ref,
-    Element
-  ) => {
-    const [imageLoaded, setImageLoaded] = React.useState(false);
-
-    const handleImageLoad = () => {
-      if (!imageLoaded) {
-        setImageLoaded(true);
-      }
-    };
-
-    return (
-      <BaseAvatar
-        as={Element}
-        ref={ref}
-        {...handleCsProp(elemProps, avatarStencil({variant, size, imageLoaded, objectFit}))}
-      >
-        {url && (
-          <>
-            <BaseAvatar.Image
-              onLoad={handleImageLoad}
-              src={url}
-              alt={isDecorative ? undefined : name}
-              aria-hidden={isDecorative}
-              {...avatarStencil.parts.avatarImage}
-            />
-          </>
-        )}
-        {name && (!url || !imageLoaded) && (
-          <BaseAvatar.Name
-            name={name}
-            preferredInitials={preferredInitials}
-            {...avatarStencil.parts.avatarName}
-          />
-        )}
-      </BaseAvatar>
-    );
-  },
-});

package/avatar/lib/AvatarImage.tsx

@@ -1,20 +0,0 @@
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-import {handleCsProp, createStencil, CSProps} from '@workday/canvas-kit-styling';
-
-export interface AvatarImageProps extends CSProps {}
-
-export const avatarImageStencil = createStencil({
-  base: {
-    height: '100%',
-    width: '100%',
-    objectFit: 'cover',
-  },
-});
-
-export const AvatarImage = createComponent('img')({
-  displayName: 'AvatarImage',
-  Component: ({...elemProps}: AvatarImageProps, ref, Element) => {
-    return <Element ref={ref} {...handleCsProp(elemProps, avatarImageStencil())} />;
-  },
-});

package/avatar/lib/AvatarName.tsx

@@ -1,32 +0,0 @@
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {CSProps, handleCsProp, createStencil} from '@workday/canvas-kit-styling';
-import {getInitialsFromName} from './getInitialsFromName';
-
-export interface AvatarNameProps extends CSProps {
-  /**
-   * The alt text of the Avatar image. This prop is also used for the initials. The first letter of the first name and the first letter of the second name are chosen for the initials.
-   */
-  name: string;
-  /**
-   * If you want full control over the initials, use `preferredInitials` instead.
-   */
-  preferredInitials?: string;
-}
-
-export const avatarNameStencil = createStencil({
-  base: {
-    textTransform: 'uppercase',
-    cursor: 'default',
-  },
-});
-
-export const AvatarName = createComponent('span')({
-  displayName: 'AvatarName',
-  Component: ({name, preferredInitials, ...elemProps}: AvatarNameProps, ref, Element) => {
-    return (
-      <Element ref={ref} {...handleCsProp(elemProps, avatarNameStencil())}>
-        {preferredInitials || getInitialsFromName(name)}
-      </Element>
-    );
-  },
-});

package/avatar/lib/BaseAvatar.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-import {AvatarImage} from './AvatarImage';
-import {AvatarName} from './AvatarName';
-import {createStencil, cssVar, calc, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
-import {system, base} from '@workday/canvas-tokens-web';
-
-export interface BaseAvatarProps extends CSProps {
-  /**
-   * Children of the BaseAvatar.
-   */
-  children?: React.ReactNode;
-  /**
-   * The variant of the Avatar.
-   * @default "blue"
-   */
-  variant?: 'blue' | 'amber' | 'teal' | 'purple';
-
-  /**
-   * The size of the Avatar.
-   * `extraExtraSmall` is 24px x 24px
-   * `extraSmall` is 32px x 32px
-   * `small` is 40px x 40px
-   * `medium` is 48px x 48px
-   * `large` is 72px x 72px
-   * `extraLarge` is 96px x 96px
-   * `extraExtraLarge` is 120px x 120px
-   * @default "medium"
-   */
-  size?:
-    | 'extraExtraSmall'
-    | 'extraSmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'extraLarge'
-    | 'extraExtraLarge'
-    | (string & {});
-}
-
-export const baseAvatarStencil = createStencil({
-  vars: {
-    backgroundColor: '',
-    color: '',
-    size: '',
-  },
-  base: ({backgroundColor, color, size}) => ({
-    borderRadius: system.shape.round,
-    width: cssVar(size, calc.add(system.space.x10, system.space.x2)),
-    height: cssVar(size, calc.add(system.space.x10, system.space.x2)),
-    backgroundColor: cssVar(backgroundColor, base.blue300),
-    color: cssVar(color, base.blue800),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    border: 'none',
-    ...system.type.body.medium,
-  }),
-  modifiers: {
-    variant: {
-      blue: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.blue300),
-        color: cssVar(color, base.blue800),
-      }),
-      amber: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.amber200),
-        color: cssVar(color, base.amber700),
-      }),
-
-      teal: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.teal300),
-        color: cssVar(color, base.teal800),
-      }),
-      purple: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.purple300),
-        color: cssVar(color, base.purple800),
-      }),
-    },
-    size: {
-      extraExtraSmall: ({size}) => ({
-        [size]: system.space.x6,
-        ...system.type.subtext.small,
-      }),
-      extraSmall: ({size}) => ({
-        [size]: system.space.x8,
-        ...system.type.subtext.medium,
-      }),
-      small: ({size}) => ({
-        [size]: system.space.x10,
-        ...system.type.body.small,
-      }),
-      medium: ({size}) => ({
-        [size]: calc.add(system.space.x10, system.space.x2),
-        ...system.type.body.medium,
-      }),
-      large: ({size}) => ({
-        [size]: calc.add(system.space.x16, system.space.x2),
-        ...system.type.heading.medium,
-      }),
-      extraLarge: ({size}) => ({
-        [size]: calc.add(system.space.x20, system.space.x4),
-        ...system.type.title.small,
-      }),
-      extraExtraLarge: ({size}) => ({
-        [size]: calc.multiply(system.space.x10, 3),
-        ...system.type.title.medium,
-      }),
-    },
-  },
-});
-
-/**
- * JSDoc for Avatar. Will be part of the Component API docs
- */
-export const BaseAvatar = createComponent('div')({
-  displayName: 'BaseAvatar',
-  subComponents: {
-    Image: AvatarImage,
-    Name: AvatarName,
-  },
-  Component: ({variant, size, ...elemProps}: BaseAvatarProps, ref, Element) => {
-    return <Element ref={ref} {...handleCsProp(elemProps, baseAvatarStencil({variant, size}))} />;
-  },
-});

package/avatar/lib/getInitialsFromName.ts

@@ -1,11 +0,0 @@
-export const getInitialsFromName = (name: string) => {
-  // Trim and split by one or more whitespace characters
-  const nameParts = name.trim().split(/\s+/).filter(Boolean);
-
-  const first = nameParts[0];
-  const firstInitial = first?.[0] || '';
-  const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
-  const lastInitial = last?.[0] || '';
-
-  return `${firstInitial}${lastInitial}`;
-};

package/avatar/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../dist/commonjs/avatar",
-  "module": "../dist/es6/avatar",
-  "sideEffects": false,
-  "types": "../dist/es6/avatar"
-}

package/dist/commonjs/avatar/index.d.ts

@@ -1,6 +0,0 @@
-export * from './lib/Avatar';
-export * from './lib/AvatarImage';
-export * from './lib/AvatarName';
-export * from './lib/BaseAvatar';
-export * from './lib/getInitialsFromName';
-//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/avatar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/dist/commonjs/avatar/index.js

@@ -1,21 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./lib/Avatar"), exports);
-__exportStar(require("./lib/AvatarImage"), exports);
-__exportStar(require("./lib/AvatarName"), exports);
-__exportStar(require("./lib/BaseAvatar"), exports);
-__exportStar(require("./lib/getInitialsFromName"), exports);