@workday/canvas-kit-react 8.0.0-alpha.121-next.2 → 8.0.0-alpha.136-next.5

package/layout/lib/utils/border.ts

@@ -10,7 +10,7 @@ import {
   useTheme,
 } from '@workday/canvas-kit-react/common';
 
-import {PropertyBorder} from './types';
+import {Property} from 'csstype';
 
 /** style props to set the border properties */
 export type BorderShorthandStyleProps = {
@@ -57,15 +57,15 @@ export type BorderRadiusStyleProps = {
 /** style props to set the border style properties */
 export type BorderLineStyleProps = {
   /** sets `border-style` property */
-  borderStyle?: PropertyBorder;
+  borderStyle?: Property.Border;
   /** sets `border-top-style` property */
-  borderTopStyle?: PropertyBorder;
+  borderTopStyle?: Property.Border;
   /** sets `border-right-style` property (no bidirectional support) */
-  borderRightStyle?: PropertyBorder;
+  borderRightStyle?: Property.Border;
   /** sets `border-bottom-style` property */
-  borderBottomStyle?: PropertyBorder;
+  borderBottomStyle?: Property.Border;
   /** sets `border-left-style` property (no bidirectional support) */
-  borderLeftStyle?: PropertyBorder;
+  borderLeftStyle?: Property.Border;
 };
 
 /** style props to set the border width properties */
@@ -88,7 +88,7 @@ export type BorderLogicalStyleProps = {
   /** sets `border-left-color` property (bidirectional support) */
   borderInlineStartColor?: CanvasColor | (string & {});
   /** sets `border-left-style` property (bidirectional support) */
-  borderInlineStartStyle?: PropertyBorder;
+  borderInlineStartStyle?: Property.Border;
   /** sets `border-left-width` property (bidirectional support) */
   borderInlineStartWidth?: string | number;
   /** sets `border-right` property (bidirectional support) */
@@ -96,7 +96,7 @@ export type BorderLogicalStyleProps = {
   /** sets `border-right-color` property (bidirectional support) */
   borderInlineEndColor?: CanvasColor | (string & {});
   /** sets `border-right-style` property (bidirectional support) */
-  borderInlineEndStyle?: PropertyBorder;
+  borderInlineEndStyle?: Property.Border;
   /** sets `border-right-width` property (bidirectional support) */
   borderInlineEndWidth?: string | number;
 };

package/layout/lib/utils/flex.ts

@@ -1,31 +1,24 @@
-import {
-  PropertyAlignItems,
-  PropertyAlignContent,
-  PropertyJustifyItems,
-  PropertyJustifyContent,
-  PropertyFlexWrap,
-  PropertyFlexDirection,
-} from './types';
+import {Property} from 'csstype';
 
 /** style props to for flexbox container properties */
 export type FlexStyleProps = {
   /** sets `align-items` property */
-  alignItems?: PropertyAlignItems;
+  alignItems?: Property.AlignItems;
   /** sets `align-content` property */
-  alignContent?: PropertyAlignContent;
+  alignContent?: Property.AlignContent;
   /**
    * sets `display` property
    * @default 'flex'
    * */
   display?: 'flex' | 'inline-flex';
   /** sets `justify-items` property */
-  justifyItems?: PropertyJustifyItems;
+  justifyItems?: Property.JustifyItems;
   /** sets `justify-content` property */
-  justifyContent?: PropertyJustifyContent;
+  justifyContent?: Property.JustifyContent;
   /** sets `flex-wrap` property */
-  flexWrap?: PropertyFlexWrap;
+  flexWrap?: Property.FlexWrap;
   /** sets `flex-direction` property */
-  flexDirection?: PropertyFlexDirection;
+  flexDirection?: Property.FlexDirection;
 };
 
 const flexProps = {

package/layout/lib/utils/flexItem.ts

@@ -1,4 +1,4 @@
-import {PropertyJustifySelf, PropertyAlignSelf, PropertyOrder} from './types';
+import {Property} from 'csstype';
 
 /** style props to for flexbox item properties */
 export type FlexItemStyleProps = {
@@ -11,11 +11,11 @@ export type FlexItemStyleProps = {
   /** sets `flex-basis` property */
   flexBasis?: number | string;
   /** sets `justify-self` property */
-  justifySelf?: PropertyJustifySelf;
+  justifySelf?: Property.JustifySelf;
   /** sets `align-self` property */
-  alignSelf?: PropertyAlignSelf;
+  alignSelf?: Property.AlignSelf;
   /** sets `order` property */
-  order?: PropertyOrder;
+  order?: Property.Order;
 };
 
 /** style props to for flexbox item properties */

package/layout/lib/utils/layout.ts

@@ -1,20 +1,13 @@
-import {
-  PropertyDisplay,
-  PropertyListStyle,
-  PropertyOverflow,
-  PropertyOverflowX,
-  PropertyOverflowY,
-  PropertyVerticalAlign,
-} from './types';
+import {Property} from 'csstype';
 
 /** style props to for layout properties */
 export type LayoutStyleProps = {
   /** sets `display` property */
-  display?: PropertyDisplay;
+  display?: Property.Display;
   /** sets `height` property */
   height?: number | string;
   /** sets `list-style property */
-  listStyle?: PropertyListStyle;
+  listStyle?: Property.ListStyle;
   /** sets `max-height` property */
   maxHeight?: number | string;
   /** sets `max-width` property */
@@ -24,13 +17,13 @@ export type LayoutStyleProps = {
   /** sets `min-width` property */
   minWidth?: number | string;
   /** sets `overflow` property */
-  overflow?: PropertyOverflow;
+  overflow?: Property.Overflow;
   /** sets `overflow-x` property */
-  overflowX?: PropertyOverflowX;
+  overflowX?: Property.OverflowX;
   /** sets `overflow-y` property */
-  overflowY?: PropertyOverflowY;
+  overflowY?: Property.OverflowY;
   /** sets `vertical-align` property */
-  verticalAlign?: PropertyVerticalAlign;
+  verticalAlign?: Property.VerticalAlign;
   /** sets `width` property */
   width?: number | string;
 };

package/layout/lib/utils/position.ts

@@ -3,14 +3,14 @@ import {
   PartialEmotionCanvasTheme,
   useTheme,
 } from '@workday/canvas-kit-react/common';
-import {PropertyPosition, PropertyZIndex} from './types';
+import {Property} from 'csstype';
 
 /** style props to for standard position properties */
 export type PositionStandardProps = {
   /** sets `position` property  */
-  position?: PropertyPosition;
+  position?: Property.Position;
   /** sets `zIndex` property  */
-  zIndex?: PropertyZIndex;
+  zIndex?: Property.ZIndex;
   /** sets `top` property  */
   top?: number | string;
   /** sets `right` property (no bidirectional support) */

package/layout/package.json

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

package/loading-animation/index.ts

@@ -1,5 +1,3 @@
-import LoadingDots from './lib/LoadingDots';
+import {LoadingDots} from './lib/LoadingDots';
 
-export {LoadingDots as LoadingAnimation, LoadingDots};
-export default LoadingDots;
-export * from './lib/LoadingDots';
+export {LoadingDots as LoadingAnimation};

package/loading-animation/lib/LoadingDots.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {keyframes} from '@emotion/react';
-import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {canvas, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {styled} from '@workday/canvas-kit-react/common';
 
 /**
@@ -60,7 +60,7 @@ const Container = styled('div')({
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export default function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
+export function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
   const {...elemProps} = props;
 
   return (

package/loading-animation/package.json

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

package/menu/package.json

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

package/modal/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.121-next.2+83e3394d",
+  "version": "8.0.0-alpha.136-next.5+7531a86c",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,12 +49,13 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.121-next.2+83e3394d",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.121-next.2+83e3394d",
-    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.121-next.2+83e3394d",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.136-next.5+7531a86c",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.136-next.5+7531a86c",
+    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.136-next.5+7531a86c",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
+    "csstype": "^3.0.2",
     "element-closest": "^3.0.2",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
@@ -69,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "83e3394d370efc56362ddb4bcc49c65a12a2bc8f"
+  "gitHead": "7531a86cc1939a7bead514de9e7de965469010e6"
 }

package/pagination/lib/Pagination/common/useLiveRegion.tsx

@@ -1,7 +1,6 @@
 type UseLiveRegionConfig = {
   'aria-atomic'?: React.AriaAttributes['aria-atomic'];
   'aria-live'?: 'polite' | 'assertive';
-  'aria-relevant'?: React.AriaAttributes['aria-relevant'];
   role?: 'status' | 'alert' | 'log';
   shouldAnnounceToScreenReader?: boolean;
 };
@@ -12,7 +11,6 @@ export function useLiveRegion(config = {} as UseLiveRegionConfig) {
     return {
       'aria-atomic': true,
       'aria-live': 'polite',
-      'aria-relevant': true,
       role: 'status',
       ...restConfig,
     } as UseLiveRegionConfig;

package/pagination/package.json

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

package/popup/package.json

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

package/radio/index.ts

@@ -1,7 +1,2 @@
-import Radio from './lib/Radio';
-
-export default Radio;
-export {Radio};
-export {default as RadioGroup} from './lib/RadioGroup';
 export * from './lib/Radio';
 export * from './lib/RadioGroup';

package/radio/lib/Radio.tsx

@@ -8,7 +8,8 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import canvas, {
+import {
+  canvas,
   borderRadius,
   colors,
   inputColors,
@@ -340,5 +341,3 @@ export const Radio = createComponent('input')({
     );
   },
 });
-
-export default Radio;

package/radio/lib/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Radio, {RadioProps} from './Radio';
+import {Radio, RadioProps} from './Radio';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 import {
   ErrorType,
@@ -42,8 +42,12 @@ const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'
     margin: `-${space.xxxs} -${space.xs}`,
     '& > div': {
       margin: `${space.xxs} ${space.zero}`,
+      alignItems: 'flex-start',
+      '> div': {
+        flex: '0 0 auto',
+      },
       '&:first-of-type': {
-        marginTop: space.xxxs,
+        marginTop: '6px',
       },
       '&:last-child': {
         marginBottom: space.xxxs,
@@ -117,4 +121,4 @@ class RadioGroup extends React.Component<RadioGroupProps> {
 
 RadioGroup.ErrorType = ErrorType;
 
-export default RadioGroup;
+export {RadioGroup};

package/radio/package.json

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

package/segmented-control/index.ts

@@ -1,5 +1 @@
-import SegmentedControl from './lib/SegmentedControl';
-
-export default SegmentedControl;
-export {SegmentedControl};
 export * from './lib/SegmentedControl';

package/segmented-control/lib/SegmentedControl.tsx

@@ -78,5 +78,3 @@ export const SegmentedControl = createComponent('div')({
     Button: SegmentedControlButton,
   },
 });
-
-export default SegmentedControl;

package/segmented-control/package.json

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

package/select/index.ts

@@ -1,7 +1,2 @@
-import Select from './lib/Select';
-
-export default Select;
-export {Select};
-export {default as SelectOption} from './lib/SelectOption';
 export * from './lib/Select';
 export * from './lib/SelectOption';

package/select/lib/Select.tsx

@@ -18,7 +18,7 @@ import {
 } from '@workday/canvas-kit-react/tokens';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import SelectOption from './SelectOption';
+import {SelectOption} from './SelectOption';
 
 export interface SelectProps extends Themeable, GrowthBehavior {
   /**
@@ -147,5 +147,3 @@ export const Select = createComponent('select')({
     ErrorType,
   },
 });
-
-export default Select;

package/select/lib/SelectOption.tsx

@@ -20,7 +20,7 @@ export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOption
   disabled?: boolean;
 }
 
-export default class SelectOption extends React.Component<SelectOptionProps> {
+export class SelectOption extends React.Component<SelectOptionProps> {
   public render() {
     const {disabled = false, value, label, ...elemProps} = this.props;
 

package/select/package.json

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

package/side-panel/README.md

@@ -16,7 +16,7 @@ yarn add @workday/canvas-kit-react
 ```tsx
 import * as React from 'react';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import SidePanel from '@workday/canvas-kit-react/side-panel';
+import {SidePanel} from '@workday/canvas-kit-react/side-panel';
 
 interface SidePanelState {
   open: boolean;

package/side-panel/index.ts

@@ -1,5 +1 @@
-import SidePanel from './lib/SidePanel';
-
-export default SidePanel;
-export {SidePanel};
 export * from './lib/SidePanel';

package/side-panel/lib/SidePanel.tsx

@@ -167,7 +167,7 @@ const SidePanelFooter = styled('div')<Pick<SidePanelProps, 'open' | 'openWidth'>
   })
 );
 
-export default class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
+export class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
   static OpenDirection = SidePanelOpenDirection;
   static BackgroundColor = SidePanelBackgroundColor;
 

package/side-panel/package.json

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

package/skeleton/package.json

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

package/status-indicator/index.ts

@@ -1,5 +1 @@
-import StatusIndicator from './lib/StatusIndicator';
-
-export default StatusIndicator;
-export {StatusIndicator};
 export * from './lib/StatusIndicator';

package/status-indicator/lib/StatusIndicator.tsx

@@ -146,7 +146,7 @@ const StatusLabel = styled('span')({
   textOverflow: 'ellipsis',
 });
 
-export default class StatusIndicator extends React.Component<StatusIndicatorProps> {
+export class StatusIndicator extends React.Component<StatusIndicatorProps> {
   public static Type = StatusIndicatorType;
   public static Emphasis = StatusIndicatorEmphasis;
 

package/status-indicator/package.json

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

package/switch/index.ts

@@ -1,5 +1 @@
-import Switch from './lib/Switch';
-
-export default Switch;
-export {Switch};
 export * from './lib/Switch';

package/switch/lib/Switch.tsx

@@ -193,5 +193,3 @@ export const Switch = createComponent('input')({
     ErrorType,
   },
 });
-
-export default Switch;

package/switch/package.json

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

package/table/index.ts

@@ -1,7 +1,2 @@
-import Table from './lib/Table';
-import TableRow from './lib/TableRow';
-
-export default Table;
-export {Table, TableRow};
 export * from './lib/Table';
 export * from './lib/TableRow';

package/table/lib/Table.tsx

@@ -16,7 +16,7 @@ const TableComponent = styled('table')(type.levels.subtext.large, {
   },
 });
 
-export default class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
+export class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
   public render() {
     const {children, ...elemProps} = this.props;
 

package/table/lib/TableRow.tsx

@@ -192,7 +192,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
   }
 );
 
-const TableRow = createComponent('tr')({
+export const TableRow = createComponent('tr')({
   displayName: 'TableRow',
   Component: (
     {state, header, children, ...elemProps}: TableRowProps & StyledType,
@@ -209,5 +209,3 @@ const TableRow = createComponent('tr')({
     State: TableRowState,
   },
 });
-
-export default TableRow;

package/table/package.json

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

package/tabs/package.json

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

package/text-area/index.ts

@@ -1,5 +1 @@
-import TextArea from './lib/TextArea';
-
-export default TextArea;
-export {TextArea};
 export * from './lib/TextArea';

package/text-area/lib/TextArea.tsx

@@ -107,5 +107,3 @@ export const TextArea = createComponent('textarea')({
     ResizeDirection: TextAreaResizeDirection,
   },
 });
-
-export default TextArea;

package/text-area/package.json

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

package/text-input/index.ts

@@ -1,7 +1,3 @@
-import InputIconContainer from './lib/InputIconContainer';
-import TextInput from './lib/TextInput';
 
-export default TextInput;
-export {InputIconContainer, TextInput};
 export * from './lib/InputIconContainer';
 export * from './lib/TextInput';

package/text-input/lib/InputIconContainer.tsx

@@ -19,7 +19,7 @@ const IconContainer = styled('div')({
   right: space.xxs,
 });
 
-const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<
+export const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<
   InputIconContainerProps
 >> = ({grow, children, icon}) => (
   <Container grow={grow}>
@@ -27,5 +27,3 @@ const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<
     {icon && <IconContainer>{icon}</IconContainer>}
   </Container>
 );
-
-export default InputIconContainer;

package/text-input/lib/TextInput.tsx

@@ -95,5 +95,3 @@ export const TextInput = createComponent('input')({
     ErrorType,
   },
 });
-
-export default TextInput;

package/text-input/package.json

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