@workday/canvas-kit-preview-react 8.0.0-alpha.254-next.23 → 8.0.0-alpha.428-next.2

package/table/lib/Table.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {type, colors} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {TableHead} from './TableHead';
+import {TableBody} from './TableBody';
+import {TableRow} from './TableRow';
+import {TableHeader} from './TableHeader';
+import {TableCell} from './TableCell';
+import {TableFooter} from './TableFooter';
+import {TableCaption} from './TableCaption';
+
+/**
+ * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
+ *
+ *
+ * ```tsx
+import {Table} from '@workday/canvas-kit-preview-react/table';
+
+export default function App() {
+  return (
+    <Table>
+      <Table.Caption>Table Caption</Table.Caption>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+      <Table.Footer>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    </Table>
+  );
+}
+```
+ */
+export const Table = createComponent('table')({
+  displayName: 'Table',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        border={`1px solid ${colors.soap500}`}
+        borderRadius="l"
+        overflow="scroll"
+        {...type.levels.subtext.large}
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+  subComponents: {
+    /**
+     * `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
+     *
+     *
+     * ```tsx
+      import {Table} from '@workday/canvas-kit-preview-react/table';
+
+      export default function App() {
+        return (
+          <Table>
+            <Table.Caption>Table Caption</Table.Caption>
+            <Table.Body>
+              <Table.Row>
+                <Table.Header>Table Header</Table.Header>
+                <Table.Cell>Table Cell</Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        );
+      }
+      ```
+    */
+    Caption: TableCaption,
+    /**
+    * `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Head: TableHead,
+    /**
+     * `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
+     *
+     *
+     * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    }
+    ```
+    */
+    Body: TableBody,
+    /**
+     * `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
+     *
+     * **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
+     * how many children are there and if those children are valid React Elements. This will adjust the
+     * amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
+     * columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
+     * would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
+     * overwrite `gridTemplateColumns`.
+     *
+     *
+     * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Row: TableRow,
+    /**
+    * `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Header: TableHeader,
+    /**
+    * `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    }
+    ```
+    */
+    Cell: TableCell,
+    /**
+    * `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Footer>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      );
+    }
+    ```
+    */
+    Footer: TableFooter,
+  },
+});

package/table/lib/TableBody.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+
+const StyledBody = styled(Grid.as('tbody'))<StyledType>({
+  'tr:last-of-type td': {
+    borderBottom: 'none',
+  },
+  'tr:last-of-type th': {
+    borderBottom: 'none',
+  },
+  'tr:first-of-type td': {
+    borderTop: 'none',
+  },
+  'tr:first-of-type th': {
+    borderTop: 'none',
+  },
+  'td:last-of-type': {
+    borderRight: 'none',
+  },
+  'td:first-of-type': {
+    borderLeft: 'none',
+  },
+});
+
+export const TableBody = createComponent('tbody')({
+  displayName: 'Table.Body',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledBody as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledBody>
+    );
+  },
+});

package/table/lib/TableCaption.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {FlexProps, Flex} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableCaption = createComponent('caption')({
+  displayName: 'Table.Caption',
+  Component: ({children, ...elemProps}: FlexProps, ref, Element) => {
+    return (
+      <Flex
+        as={Element}
+        ref={ref}
+        borderBottom={`1px solid ${colors.soap500}`}
+        paddingY="xxs"
+        paddingX="s"
+        {...elemProps}
+      >
+        {children}
+      </Flex>
+    );
+  },
+});

package/table/lib/TableCell.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableCell = createComponent('td')({
+  displayName: 'Table.Cell',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        alignItems="center"
+        backgroundColor="frenchVanilla100"
+        borderBottom={`1px solid ${colors.soap400}`}
+        justifyContent="left"
+        minHeight="56px"
+        paddingY="xxs"
+        paddingX="s"
+        wordBreak="break-word"
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/lib/TableFooter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableFooter = createComponent('tfoot')({
+  displayName: 'Table.Footer',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid as={Element} ref={ref} {...elemProps}>
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/lib/TableHead.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+
+const StyledHead = styled(Grid.as('thead'))<StyledType>({
+  'th:last-of-type': {
+    borderRight: 'none',
+  },
+  'th:first-of-type': {
+    borderLeft: 'none',
+  },
+});
+
+export const TableHead = createComponent('thead')({
+  displayName: 'Table.Head',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledHead as={Element} ref={ref} backgroundColor="soap100" minHeight="48px" {...elemProps}>
+        {children}
+      </StyledHead>
+    );
+  },
+});

package/table/lib/TableHeader.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableHeader = createComponent('th')({
+  displayName: 'Table.Header',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        alignItems="center"
+        backgroundColor="frenchVanilla100"
+        borderBottom={`1px solid ${colors.soap400}`}
+        justifyContent="left"
+        minHeight="56px"
+        paddingY="xxs"
+        paddingX="s"
+        wordBreak="break-word"
+        fontWeight="medium"
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/lib/TableRow.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableRow = createComponent('tr')({
+  displayName: 'Table.Row',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    const validChildren = (children: React.ReactNode) => {
+      return React.Children.toArray(children).filter(child =>
+        React.isValidElement(child)
+      ) as React.ReactElement[];
+    };
+    const childrenArray = validChildren(children).length;
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        gridAutoFlow="column"
+        gridTemplateColumns={`repeat(${childrenArray}, minmax(10rem, 1fr))`}
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/package.json

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

package/text-area/lib/TextArea.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {
+  FormField,
+  useFormFieldModel,
+  useFormFieldOrientation,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {useTextAreaModel} from './hooks';
 import {TextAreaField} from './TextAreaField';
 
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
@@ -16,7 +19,7 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
 
 export const TextArea = createContainer('div')({
   displayName: 'TextArea',
-  modelHook: useTextAreaModel,
+  modelHook: useFormFieldModel,
   subComponents: {
     Field: TextAreaField,
     Label: FormField.Label,
@@ -26,8 +29,8 @@ export const TextArea = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/text-area/lib/TextAreaField.tsx

@@ -9,8 +9,12 @@ import {
   spaceNumbers,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  useTheme,
+  useThemedRing,
+} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
 

package/text-input/lib/TextInput.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {
+  FormField,
+  useFormFieldModel,
+  useFormFieldOrientation,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {useTextInputModel} from './hooks';
 import {TextInputField} from './TextInputField';
 
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
@@ -16,7 +19,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
 
 export const TextInput = createContainer('div')({
   displayName: 'TextInput',
-  modelHook: useTextInputModel,
+  modelHook: useFormFieldModel,
   subComponents: {
     Field: TextInputField,
     Label: FormField.Label,
@@ -26,8 +29,8 @@ export const TextInput = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/text-input/lib/TextInputField.tsx

@@ -9,11 +9,15 @@ import {
   space,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {
+  createSubcomponent,
+  ExtractProps,
+  useTheme,
+  useThemedRing,
+} from '@workday/canvas-kit-react/common';
+import {FormField, useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
-import {useTextInputField, useTextInputModel} from './hooks';
+import {useTextInputField} from './hooks';
 
 const baseStyles: CSSProperties = {
   transition: '0.2s box-shadow, 0.2s border-color',
@@ -41,7 +45,7 @@ const baseStyles: CSSProperties = {
 
 export const TextInputField = createSubcomponent('input')({
   displayName: 'TextInput.Field',
-  modelHook: useTextInputModel,
+  modelHook: useFormFieldModel,
   elemPropsHook: useTextInputField,
 })<ExtractProps<typeof FormField.Input, never>>((elemProps, Element, model) => {
   const theme = useTheme();

package/text-input/lib/hooks/useTextInputModel.ts

@@ -1,3 +1,4 @@
 import {useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
+/** @deprecated Please use `useFormFieldModel` instead */
 export const useTextInputModel = useFormFieldModel;

package/dist/commonjs/text-area/lib/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export * from './useTextAreaModel';
-//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/text-area/lib/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts

@@ -1,28 +0,0 @@
-export declare const useTextAreaModel: (<TT_Special_Generic>(config?: (Partial<{
-    hasError: boolean;
-    id: string;
-    isRequired: boolean;
-}> & {} & {}) | undefined) => {
-    state: {
-        id: string;
-        hasError: boolean;
-        isRequired: boolean;
-    };
-    events: {};
-}) & import("@workday/canvas-kit-react/common").ModelExtras<{
-    hasError: boolean;
-    id: string;
-    isRequired: boolean;
-}, {}, {
-    id: string;
-    hasError: boolean;
-    isRequired: boolean;
-}, {}, {
-    state: {
-        id: string;
-        hasError: boolean;
-        isRequired: boolean;
-    };
-    events: {};
-}>;
-//# sourceMappingURL=useTextAreaModel.d.ts.map

package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTextAreaModel = void 0;
-var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
-exports.useTextAreaModel = form_field_1.useFormFieldModel;

package/dist/es6/text-area/lib/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export * from './useTextAreaModel';
-//# sourceMappingURL=index.d.ts.map

package/dist/es6/text-area/lib/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/es6/text-area/lib/hooks/index.js

@@ -1 +0,0 @@
-export * from './useTextAreaModel';

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts

@@ -1,28 +0,0 @@
-export declare const useTextAreaModel: (<TT_Special_Generic>(config?: (Partial<{
-    hasError: boolean;
-    id: string;
-    isRequired: boolean;
-}> & {} & {}) | undefined) => {
-    state: {
-        id: string;
-        hasError: boolean;
-        isRequired: boolean;
-    };
-    events: {};
-}) & import("@workday/canvas-kit-react/common").ModelExtras<{
-    hasError: boolean;
-    id: string;
-    isRequired: boolean;
-}, {}, {
-    id: string;
-    hasError: boolean;
-    isRequired: boolean;
-}, {}, {
-    state: {
-        id: string;
-        hasError: boolean;
-        isRequired: boolean;
-    };
-    events: {};
-}>;
-//# sourceMappingURL=useTextAreaModel.d.ts.map

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

package/dist/es6/text-area/lib/hooks/useTextAreaModel.js

@@ -1,2 +0,0 @@
-import { useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
-export var useTextAreaModel = useFormFieldModel;

package/text-area/lib/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useTextAreaModel';

package/text-area/lib/hooks/useTextAreaModel.ts

@@ -1,3 +0,0 @@
-import {useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
-
-export const useTextAreaModel = useFormFieldModel;