@workday/canvas-kit-docs 7.0.0-alpha.89-next.16 → 7.0.0-alpha.90-next.17

package/dist/mdx/react/popup/examples/RTL.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   return (
@@ -11,10 +12,12 @@ export default () => {
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>
         <Popup.Body>
-          <p style={{marginBottom: '24px'}}>האם ברצונך למחוק פריט זה</p>
-          <DeleteButton style={{marginLeft: '16px'}}>לִמְחוֹק</DeleteButton>
-          <SecondaryButton>לְבַטֵל</SecondaryButton>
+          <p>האם ברצונך למחוק פריט זה</p>
         </Popup.Body>
+        <HStack spacing="s">
+          <DeleteButton>לִמְחוֹק</DeleteButton>
+          <SecondaryButton>לְבַטֵל</SecondaryButton>
+        </HStack>
       </Popup.Card>
     </CanvasProvider>
   );

package/dist/mdx/react/tabs/Tabs.mdx

@@ -95,9 +95,7 @@ Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
 ### Tab Icons
 
-Tabs can have icons. You must set `hasIcon` on the `Tabs.Item` and use the `Icon` and `Text`
-subcomponent. The `hasIcon` changes the `Tabs.Item` to change where overflow detection is from the
-`Tabs.Item` element to the `Tabs.Item.Text` element.
+Tabs can have icons. Use the `Icon` and `Text` subcomponents.
 
 <ExampleCodeBlock code={Icons} />
 
@@ -139,17 +137,15 @@ array.
 its subcomponents using React context. It does not represent a real element.
 
 ```tsx
-<Tabs onActivate={({data}) => console.log('Activated tab', data.tab)}>
-  {/* Child components */}
-</Tabs>
+<Tabs onSelect={data => console.log('Activated tab', data.id)}>{/* Child components */}</Tabs>
 ```
 
 Alternatively, you may pass in a model using the hoisted model pattern.
 
 ```tsx
 const model = useTabsModel({
-  onActivate({data}) {
-    console.log('Activated Tab', data.tab);
+  onSelect(data) {
+    console.log('Activated Tab', data.id);
   },
 });
 

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
-import {SelectionModel} from '../../lib/selection';
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 type Tab = {
   tab: string;
@@ -19,7 +17,7 @@ export default () => {
   const addedRef = React.useRef(tabs.length - 1);
   const model = useTabsModel({
     items: tabs,
-    shouldSelect: ({data}) => data.id !== 'add',
+    shouldSelect: data => data.id !== 'add',
   });
 
   // A ref of the model for the render functions to work around the caching done to lists
@@ -33,9 +31,8 @@ export default () => {
    * * **Item is selected**: Selection will be moved to the next item in the list
    * @param id The id of the item that will be removed
    */
-  const removeItem = <T extends unknown>(id: string, model: SelectionModel<T>) => {
+  const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
     const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
-    console.log('index', index, id, model.state.cursorId, model.state.items);
     const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
     const nextId = model.getId(model.state.items[nextIndex]);
     if (model.state.selectedIds[0] === id) {
@@ -94,7 +91,7 @@ export default () => {
       </Tabs.Menu.Popper>
       <Tabs.Panels>
         {(item: Tab) => (
-          <Tabs.Panel marginTop="m" name={item.id}>
+          <Tabs.Panel marginTop="m" data-id={item.id}>
             Contents of {item.tab}
           </Tabs.Panel>
         )}

package/dist/mdx/react/tabs/examples/HoistedModel.tsx

@@ -6,8 +6,8 @@ import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const model = useTabsModel({
-    onSelect({data, prevState}) {
-      console.log('Selected Tab', data, prevState);
+    onSelect(data, prevState) {
+      console.log('Selected Tab', data.id, prevState);
     },
   });
 
@@ -15,14 +15,14 @@ export default () => {
     <>
       <Tabs model={model}>
         <Tabs.List>
-          <Tabs.Item name="first">First Tab</Tabs.Item>
-          <Tabs.Item name="second">Second Tab</Tabs.Item>
-          <Tabs.Item name="third">Third Tab</Tabs.Item>
+          <Tabs.Item data-id="first">First Tab</Tabs.Item>
+          <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+          <Tabs.Item data-id="third">Third Tab</Tabs.Item>
         </Tabs.List>
         <div style={{marginTop: space.m}}>
-          <Tabs.Panel name="first">Contents of First Tab</Tabs.Panel>
-          <Tabs.Panel name="second">Contents of Second Tab</Tabs.Panel>
-          <Tabs.Panel name="third">Contents of Third Tab</Tabs.Panel>
+          <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+          <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+          <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
         </div>
       </Tabs>
       <SecondaryButton

package/dist/mdx/react/tabs/examples/Icons.tsx

@@ -8,19 +8,19 @@ export default () => {
   return (
     <Tabs>
       <Tabs.List>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={starIcon} />
           <Tabs.Item.Text>First Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={searchIcon} />
           <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={selectIcon} />
           <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={shareIcon} />
           <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
         </Tabs.Item>

package/dist/mdx/react/tabs/examples/NamedTabs.tsx

@@ -7,18 +7,18 @@ export default () => {
   return (
     <Tabs>
       <Tabs.List>
-        <Tabs.Item name="first">First Tab</Tabs.Item>
-        <Tabs.Item name="second">Second Tab</Tabs.Item>
-        <Tabs.Item name="third">Third Tab</Tabs.Item>
-        <Tabs.Item name="fourth">Fourth Tab</Tabs.Item>
-        <Tabs.Item name="fifth">Fifth Tab</Tabs.Item>
+        <Tabs.Item data-id="first">First Tab</Tabs.Item>
+        <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+        <Tabs.Item data-id="third">Third Tab</Tabs.Item>
+        <Tabs.Item data-id="fourth">Fourth Tab</Tabs.Item>
+        <Tabs.Item data-id="fifth">Fifth Tab</Tabs.Item>
       </Tabs.List>
       <div style={{marginTop: space.m}}>
-        <Tabs.Panel name="first">Contents of First Tab</Tabs.Panel>
-        <Tabs.Panel name="second">Contents of Second Tab</Tabs.Panel>
-        <Tabs.Panel name="third">Contents of Third Tab</Tabs.Panel>
-        <Tabs.Panel name="fourth">Contents of Fourth Tab</Tabs.Panel>
-        <Tabs.Panel name="fifth">Contents of Fifth Tab</Tabs.Panel>
+        <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fourth">Contents of Fourth Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fifth">Contents of Fifth Tab</Tabs.Panel>
       </div>
     </Tabs>
   );

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -28,7 +28,7 @@ export default () => {
     <div style={{width: containerWidth}}>
       <Tabs model={model}>
         <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
-          {(item: MyTabItem) => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+          {(item: MyTabItem) => <Tabs.Item data-id={item.id}>{item.text}</Tabs.Item>}
         </Tabs.List>
         <Tabs.Menu.Popper>
           <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
@@ -39,7 +39,7 @@ export default () => {
         </Tabs.Menu.Popper>
         <Tabs.Panels>
           {(item: MyTabItem) => (
-            <Tabs.Panel marginTop="m" name={item.id}>
+            <Tabs.Panel marginTop="m" data-id={item.id}>
               {item.contents}
             </Tabs.Panel>
           )}

package/dist/mdx/react/text-input/examples/Basic.tsx

@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import {css, jsx} from '@emotion/react';
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.0.0-alpha.89-next.16+b786927d",
+  "version": "7.0.0-alpha.90-next.17+1c0258d7",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -15,26 +15,17 @@
   "files": [
     "dist/",
     "lib/",
-    "index.ts",
-    "ts3.5/**/*"
+    "index.ts"
   ],
-  "typesVersions": {
-    "<=3.5": {
-      "*": [
-        "ts3.5/*"
-      ]
-    }
-  },
   "scripts": {
     "watch": "yarn build:es6 -w",
-    "clean": "rimraf dist && rimraf ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
+    "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
     "build:mdx": "node ./utils/build-mdx.js mdx/",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
     "build:specs": "node ./utils/build-specifications.js",
-    "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
-    "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs build:downlevel-dts",
+    "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
     "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
@@ -50,13 +41,13 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.89-next.16+b786927d"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.90-next.17+1c0258d7"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
     "glob": "^7.1.6",
     "mkdirp": "^1.0.3",
-    "typescript": "^3.8.3"
+    "typescript": "4.1"
   },
-  "gitHead": "b786927d54a293fcb6f6e745f1831317e101371d"
+  "gitHead": "1c0258d72c737b6a42791bad140183c01d736c03"
 }

package/ts3.5/dist/commonjs/index.d.ts

@@ -1,4 +0,0 @@
-export * from './lib/specs';
-export * from './lib/Specifications';
-export * from './lib/docs';
-//# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/lib/Specifications.d.ts

@@ -1,6 +0,0 @@
-export interface SpecificationsProps {
-    file: string;
-    name?: string;
-}
-export declare const Specifications: ({ file, name }: SpecificationsProps) => JSX.Element | null;
-//# sourceMappingURL=Specifications.d.ts.map

package/ts3.5/dist/commonjs/lib/docs.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-export declare const GithubUrl: React.Context<string>;
-export declare const GithubBranch: React.Context<string>;
-export declare const StorybookUrl: React.Context<string>;
-//# sourceMappingURL=docs.d.ts.map

package/ts3.5/dist/commonjs/lib/specs.d.ts

@@ -1,16 +0,0 @@
-export interface SpecIt {
-    type: 'it';
-    name: string;
-}
-export interface SpecDescribe {
-    type: 'describe';
-    name: string;
-    children: (SpecDescribe | SpecIt)[];
-}
-export interface SpecFile {
-    type: 'file';
-    name: string;
-    children: (SpecDescribe | SpecIt)[];
-}
-export declare const specifications: SpecFile[];
-//# sourceMappingURL=specs.d.ts.map

package/ts3.5/dist/es6/index.d.ts

@@ -1,4 +0,0 @@
-export * from './lib/specs';
-export * from './lib/Specifications';
-export * from './lib/docs';
-//# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/lib/Specifications.d.ts

@@ -1,6 +0,0 @@
-export interface SpecificationsProps {
-    file: string;
-    name?: string;
-}
-export declare const Specifications: ({ file, name }: SpecificationsProps) => JSX.Element | null;
-//# sourceMappingURL=Specifications.d.ts.map

package/ts3.5/dist/es6/lib/docs.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-export declare const GithubUrl: React.Context<string>;
-export declare const GithubBranch: React.Context<string>;
-export declare const StorybookUrl: React.Context<string>;
-//# sourceMappingURL=docs.d.ts.map

package/ts3.5/dist/es6/lib/specs.d.ts

@@ -1,16 +0,0 @@
-export interface SpecIt {
-    type: 'it';
-    name: string;
-}
-export interface SpecDescribe {
-    type: 'describe';
-    name: string;
-    children: (SpecDescribe | SpecIt)[];
-}
-export interface SpecFile {
-    type: 'file';
-    name: string;
-    children: (SpecDescribe | SpecIt)[];
-}
-export declare const specifications: SpecFile[];
-//# sourceMappingURL=specs.d.ts.map