@workday/canvas-kit-labs-react 6.9.0-next.0 → 6.9.0-next.2

package/dist/es6/search-form/lib/SearchForm.js

@@ -2,7 +2,7 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
 import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
 import { FormField, FormFieldLabelPosition } from '@workday/canvas-kit-react/form-field';
 import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
@@ -106,26 +106,20 @@ var SearchContainer = styled('div')({
 var SearchCombobox = styled(Combobox)({
     width: "100%",
 });
-var SearchIcon = styled(IconButton)(function (_a) {
+var SearchIcon = styled(TertiaryButton)(function (_a) {
     var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
-    var collapsedSize = 40;
-    var size = 32;
-    var collapseStyles = isCollapsed
-        ? {
-            minWidth: collapsedSize,
-            width: collapsedSize,
-            minHeight: collapsedSize,
-            height: collapsedSize,
-        }
-        : {
-            minWidth: size,
-            width: size,
-            minHeight: size,
-            height: size,
-        };
-    return __assign({ position: "absolute", margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs, top: 0, bottom: 0, left: 0, padding: 0, zIndex: 3, display: isHidden ? 'none' : 'flex' }, collapseStyles);
+    return {
+        position: "absolute",
+        margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        padding: 0,
+        zIndex: 3,
+        display: isHidden ? 'none' : 'flex',
+    };
 });
-var CloseButton = styled(IconButton)(function (_a) {
+var CloseButton = styled(TertiaryButton)(function (_a) {
     var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
     var collapseStyles = isCollapsed && showForm
         ? {
@@ -221,7 +215,7 @@ var SearchForm = /** @class */ (function (_super) {
                 background = formCollapsedBackground;
             }
             var isDarkBackground = chroma(background).get('lab.l') < 70;
-            return isDarkBackground ? 'inverse' : 'plain';
+            return isDarkBackground ? 'inverse' : undefined;
         };
         _this.handleSubmit = function (event) {
             event.preventDefault();
@@ -287,7 +281,7 @@ var SearchForm = /** @class */ (function (_super) {
                 React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
                     React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
                         React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
-                React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
+                React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
     };
     SearchForm.Theme = SearchTheme;
     return SearchForm;

package/dist/es6/search-form/lib/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/themes.ts"],"names":[],"mappings":"AAGA,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AACD,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,YAAY;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,qBAAqB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,EAAE,YA6B1B,CAAC"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/themes.ts"],"names":[],"mappings":"AAGA,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,YAAY;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,qBAAqB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,EAAE,YA6B1B,CAAC"}

package/drawer/lib/DrawerHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {colors, space, type, CanvasColor, typeColors} from '@workday/canvas-kit-react/tokens';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {xIcon} from '@workday/canvas-system-icons-web';
 
 export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -69,7 +69,7 @@ const HeaderTitle = styled('h4')<Pick<DrawerHeaderProps, 'inverse'>>(
   })
 );
 
-const CloseButton = styled(IconButton)({
+const CloseButton = styled(TertiaryButton)({
   margin: '-8px', // for inverse and plain button, we always want this margin
 });
 
@@ -93,7 +93,7 @@ export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}>
         </HeaderTitle>
         {onClose && closeIconAriaLabel && (
           <CloseButton
-            variant={inverse ? 'inverse' : 'plain'}
+            variant={inverse ? 'inverse' : undefined}
             onClick={onClose}
             aria-label={closeIconAriaLabel}
             icon={xIcon}

package/drawer/package.json

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

package/index.ts

@@ -1,6 +1,4 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './header';
-export * from './layout';
 export * from './search-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "6.9.0-next.0+8f9fb600",
+  "version": "6.9.0-next.2+8dd3d6b6",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,32 +10,24 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-labs-react"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/labs-react"
   },
   "files": [
     "*/package.json",
     "*/lib/*",
     "*/index.ts",
     "dist/",
-    "index.ts",
-    "ts3.5/**/*"
+    "index.ts"
   ],
-  "typesVersions": {
-    "<=3.5": {
-      "*": [
-        "ts3.5/*"
-      ]
-    }
-  },
   "scripts": {
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rimraf dist && rimraf ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
+    "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
-    "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
-    "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
+    "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre labs-react",
     "postpack": "node ../../utils/publish.js post labs-react",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
@@ -52,19 +44,17 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.28",
-    "@emotion/is-prop-valid": "^0.8.2",
-    "@emotion/styled": "^10.0.27",
-    "@workday/canvas-kit-preview-react": "^6.9.0-next.0+8f9fb600",
-    "@workday/canvas-kit-react": "^6.9.0-next.0+8f9fb600",
-    "@workday/canvas-system-icons-web": "1.0.41",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@workday/canvas-kit-preview-react": "^6.9.0-next.2+8dd3d6b6",
+    "@workday/canvas-kit-react": "^6.9.0-next.2+8dd3d6b6",
+    "@workday/canvas-system-icons-web": "^3.0.0",
     "chroma-js": "^2.1.0",
-    "csstype": "^2.6.17",
     "lodash.flatten": "^4.4.0",
     "rtl-css-js": "^1.14.1"
   },
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "8f9fb600b56c986b012e0282536296a2f5a54dff"
+  "gitHead": "8dd3d6b6d1af27a68d8ee952ad70a389a0b675dd"
 }

package/search-form/lib/SearchForm.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
 import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-field';
 import {Combobox} from '@workday/canvas-kit-labs-react/combobox';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
-import {SearchThemeAttributes, searchThemes, SearchTheme} from './themes';
+import {searchThemes, SearchTheme, SearchThemeAttributes} from './themes';
 import chroma from 'chroma-js';
 
 export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -169,39 +169,22 @@ const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
-const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
-  ({isCollapsed, isHidden}) => {
-    const collapsedSize = 40;
-    const size = 32;
-    const collapseStyles: CSSObject = isCollapsed
-      ? {
-          minWidth: collapsedSize,
-          width: collapsedSize,
-          minHeight: collapsedSize,
-          height: collapsedSize,
-        }
-      : {
-          minWidth: size,
-          width: size,
-          minHeight: size,
-          height: size,
-        };
-
-    return {
-      position: `absolute`,
-      margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      padding: 0,
-      zIndex: 3,
-      display: isHidden ? 'none' : 'flex',
-      ...collapseStyles,
-    };
-  }
-);
+const SearchIcon = styled(TertiaryButton)<
+  Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}
+>(({isCollapsed, isHidden}) => {
+  return {
+    position: `absolute`,
+    margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    padding: 0,
+    zIndex: 3,
+    display: isHidden ? 'none' : 'flex',
+  };
+});
 
-const CloseButton = styled(IconButton)<
+const CloseButton = styled(TertiaryButton)<
   Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
 >(({isCollapsed, showForm}) => {
   const collapseStyles: CSSObject =
@@ -325,13 +308,13 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
     return getInputColors(theme, this.state.isFocused);
   };
 
-  getIconButtonType = (): IconButtonProps['variant'] => {
+  getIconButtonType = (): TertiaryButtonProps['variant'] => {
     let background = this.getThemeColors().background || `#fff`;
     if (this.props.isCollapsed && this.state.showForm) {
       background = formCollapsedBackground;
     }
-    const isDarkBackground = chroma(background).get('lab.l') < 70;
-    return isDarkBackground ? 'inverse' : 'plain';
+    const isDarkBackground = chroma(background as string).get('lab.l') < 70;
+    return isDarkBackground ? 'inverse' : undefined;
   };
 
   handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
@@ -485,7 +468,6 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
             aria-label={closeButtonAriaLabel}
             icon={xIcon}
             isCollapsed={isCollapsed}
-            variant="plain"
             showForm={this.state.showForm}
             onClick={this.closeCollapsedSearch}
             type="button"

package/search-form/lib/themes.ts

@@ -6,6 +6,7 @@ export enum SearchTheme {
   Dark,
   Transparent,
 }
+
 export interface SearchThemeAttributes {
   background?: string;
   backgroundFocus?: string;
@@ -40,7 +41,7 @@ export const searchThemes: SearchThemes = {
     color: colors.blackPepper300,
     placeholderColor: colors.licorice300,
     boxShadow: 'none',
-    boxShadowFocus: focusRing().boxShadow,
+    boxShadowFocus: focusRing().boxShadow as SearchThemeAttributes['boxShadowFocus'],
   },
   [SearchTheme.Dark]: {
     background: 'rgba(0, 0, 0, 0.2)',

package/search-form/package.json

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

package/common/lib/Box.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
-
-// style props
-import {border, BorderStyleProps} from './utils/border';
-import {color, ColorStyleProps} from './utils/color';
-import {depth, DepthStyleProps} from './utils/depth';
-import {flexItem, FlexItemStyleProps} from './utils/flexItem';
-import {layout, LayoutStyleProps} from './utils/layout';
-import {position, PositionStyleProps} from './utils/position';
-import {space, SpaceStyleProps} from './utils/space';
-
-export type BoxProps = BorderStyleProps &
-  ColorStyleProps &
-  DepthStyleProps &
-  FlexItemStyleProps &
-  LayoutStyleProps &
-  PositionStyleProps &
-  SpaceStyleProps & {
-    children?: React.ReactNode;
-  };
-
-const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
-
-const shouldForwardProp = (prop: string) => {
-  return isPropValid(prop) && !omittedProps.includes(prop);
-};
-
-// Meant to be used with elements. The `shouldForwardProps` will remove all style props
-const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  position,
-  space
-);
-
-// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  position,
-  space
-);
-/**
- * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
- * It is highly flexible, and its primary purpose is to build other components.
- *
- * @example
- * import { Box, BoxProps } from '@workday/canvas-kit-labs-react/common';
- *
- * interface CardProps extends BoxProps {
- *   // card-specific props
- * }
- *
- * // `Card`'s default values are set using `BoxProps`
- * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
- * );
- *
- */
-export const Box = createComponent('div')({
-  displayName: 'Box',
-  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
-    const BoxComponent = useConstant(() =>
-      typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
-    );
-    return (
-      <BoxComponent as={Element} ref={ref} {...elemProps}>
-        {children}
-      </BoxComponent>
-    );
-  },
-});