@workday/canvas-kit-react 8.0.0-alpha.125-next.4 → 8.0.0

package/layout/lib/utils/types.ts

@@ -0,0 +1,148 @@
+import {
+  Globals,
+  GlobalsNumber,
+  SelfPosition,
+  DisplayOutside,
+  DisplayInside,
+  DisplayInternal,
+  DisplayLegacy,
+  LineStyle,
+  ContentDistribution,
+  ContentPosition,
+} from 'csstype';
+
+// We're temporarily creating these types from csstype
+// to improve type completion until we move to csstype v3.
+
+// Border
+export type PropertyBorder = Globals | LineStyle | (string & {});
+
+// Flex Item
+export type PropertyJustifySelf =
+  | Globals
+  | SelfPosition
+  | 'auto'
+  | 'baseline'
+  | 'left'
+  | 'normal'
+  | 'right'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyAlignSelf =
+  | Globals
+  | SelfPosition
+  | 'auto'
+  | 'baseline'
+  | 'normal'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyOrder = GlobalsNumber;
+
+// Layout
+export type PropertyDisplay =
+  | Globals
+  | DisplayOutside
+  | DisplayInside
+  | DisplayInternal
+  | DisplayLegacy
+  | 'contents'
+  | 'list-item'
+  | 'none'
+  | (string & {});
+
+export type PropertyListStyle = Globals | 'inside' | 'none' | 'outside' | (string & {});
+
+export type PropertyOverflow =
+  | Globals
+  | '-moz-hidden-unscrollable'
+  | 'auto'
+  | 'clip'
+  | 'hidden'
+  | 'scroll'
+  | 'visible'
+  | (string & {});
+
+export type PropertyOverflowX =
+  | Globals
+  | '-moz-hidden-unscrollable'
+  | 'auto'
+  | 'clip'
+  | 'hidden'
+  | 'scroll'
+  | 'visible';
+
+export type PropertyOverflowY =
+  | Globals
+  | '-moz-hidden-unscrollable'
+  | 'auto'
+  | 'clip'
+  | 'hidden'
+  | 'scroll'
+  | 'visible';
+
+export type PropertyVerticalAlign =
+  | Globals
+  | 'baseline'
+  | 'bottom'
+  | 'middle'
+  | 'sub'
+  | 'super'
+  | 'text-bottom'
+  | 'text-top'
+  | 'top'
+  | (string & {});
+
+// Position
+export type PropertyPosition =
+  | Globals
+  | '-webkit-sticky'
+  | 'absolute'
+  | 'fixed'
+  | 'relative'
+  | 'static'
+  | 'sticky';
+
+export type PropertyZIndex = GlobalsNumber | 'auto';
+
+// Flex
+export type PropertyAlignItems =
+  | Globals
+  | SelfPosition
+  | 'baseline'
+  | 'normal'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyAlignContent =
+  | Globals
+  | ContentDistribution
+  | ContentPosition
+  | 'baseline'
+  | 'normal'
+  | (string & {});
+
+export type PropertyJustifyItems =
+  | Globals
+  | SelfPosition
+  | 'baseline'
+  | 'left'
+  | 'legacy'
+  | 'normal'
+  | 'right'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyJustifyContent =
+  | Globals
+  | ContentDistribution
+  | ContentPosition
+  | 'left'
+  | 'normal'
+  | 'right'
+  | (string & {});
+
+export type PropertyFlexWrap = Globals | 'nowrap' | 'wrap' | 'wrap-reverse';
+
+export type PropertyFlexDirection = Globals | 'column' | 'column-reverse' | 'row' | 'row-reverse';

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,3 +1,5 @@
-import {LoadingDots} from './lib/LoadingDots';
+import LoadingDots from './lib/LoadingDots';
 
-export {LoadingDots as LoadingAnimation};
+export {LoadingDots as LoadingAnimation, LoadingDots};
+export default LoadingDots;
+export * from './lib/LoadingDots';

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 function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
+export default 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/lib/MenuList.tsx

@@ -11,12 +11,11 @@ import {Stack} from '@workday/canvas-kit-react/layout';
 
 import {useMenuModel} from './useMenuModel';
 
-export interface MenuListProps<T = any>
-  extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
+export interface MenuListProps extends Partial<ExtractProps<typeof Stack, never>> {
   /**
    * The label text of the MenuList.
    */
-  children: React.ReactNode | ((item: T) => React.ReactNode);
+  children: React.ReactNode;
 }
 
 export const useMenuList = createElemPropsHook(useMenuModel)(model => {

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/lib/ModalOverlay.tsx

@@ -14,7 +14,9 @@ import styled from '@emotion/styled';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 import {useModalModel} from './hooks';
 
-export interface ModalOverlayProps extends BoxProps {}
+export interface ModalOverlayProps extends BoxProps {
+  children: React.ReactNode;
+}
 
 const fadeIn = keyframes`
   from {
@@ -84,7 +86,7 @@ const OpenModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.OpenOverlay',
   modelHook: useModalModel,
   elemPropsHook: useModalOverlay,
-})<ModalOverlayProps>((elemProps, Element, model) => {
+})<ModalOverlayProps>((elemProps: ModalOverlayProps, Element, model) => {
   const windowSize = useWindowSize();
 
   const content = (

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.125-next.4+9fedde9c",
+  "version": "8.0.0",
   "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,7 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^17.0 || ^18.0"
+    "react": "^16.8 || ^17.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.1",
@@ -49,13 +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.125-next.4+9fedde9c",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.125-next.4+9fedde9c",
-    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.125-next.4+9fedde9c",
+    "@workday/canvas-kit-labs-react": "^8.0.0",
+    "@workday/canvas-kit-popup-stack": "^8.0.0",
+    "@workday/canvas-kit-preview-react": "^8.0.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
-    "csstype": "^3.0.2",
+    "csstype": "^2.6.17",
     "element-closest": "^3.0.2",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
@@ -70,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "9fedde9cca3026cd0435449480d5004fc929374b"
+  "gitHead": "433a9d272804ceed26191ac1ef629d61fab4dcb4"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -6,7 +6,7 @@ import {PaginationModel} from './types';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
-export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
+export interface AdditionalDetailsProps extends FlexProps {
   children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
   model: PaginationModel;
   shouldAnnounceToScreenReader?: boolean;

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -4,8 +4,7 @@ import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 import {PaginationModel} from '../types';
 import {StyledType, styled} from '@workday/canvas-kit-react/common';
 
-export interface GoToLabelProps
-  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
+export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   model: PaginationModel;
   /**
    * Accepts child elements or a render prop.

package/pagination/lib/Pagination/PageList.tsx

@@ -4,7 +4,7 @@ import {PaginationModel} from './types';
 import {ListItem, ListItemProps} from './common/List';
 import {HStack, HStackProps} from '@workday/canvas-kit-react/layout';
 
-export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing' | 'children'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
   model: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }

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/lib/hooks/useCloseOnFullscreenExit.ts

@@ -12,7 +12,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useCloseOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    (event: any) => {
+    event => {
       if (!screenfull.isFullscreen) {
         model.events.hide(event);
       }

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -16,7 +16,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    (event: any) => {
+    event => {
       if (screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -15,7 +15,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    (event: any) => {
+    event => {
       if (!screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

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,2 +1,7 @@
+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,8 +8,7 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {
-  canvas,
+import canvas, {
   borderRadius,
   colors,
   inputColors,
@@ -341,3 +340,5 @@ 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 {RadioGroup};
+export default 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 +1,5 @@
+import SegmentedControl from './lib/SegmentedControl';
+
+export default SegmentedControl;
+export {SegmentedControl};
 export * from './lib/SegmentedControl';

package/segmented-control/lib/SegmentedControl.tsx

@@ -78,3 +78,5 @@ 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,2 +1,7 @@
+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,3 +147,5 @@ 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 class SelectOption extends React.Component<SelectOptionProps> {
+export default 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 +1,5 @@
+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 class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
+export default 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 +1,5 @@
+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 class StatusIndicator extends React.Component<StatusIndicatorProps> {
+export default 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 +1,5 @@
+import Switch from './lib/Switch';
+
+export default Switch;
+export {Switch};
 export * from './lib/Switch';

package/switch/lib/Switch.tsx

@@ -193,3 +193,5 @@ 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,2 +1,7 @@
+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 class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
+export default 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>(
   }
 );
 
-export const TableRow = createComponent('tr')({
+const TableRow = createComponent('tr')({
   displayName: 'TableRow',
   Component: (
     {state, header, children, ...elemProps}: TableRowProps & StyledType,
@@ -209,3 +209,5 @@ export 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"
 }