@workday/canvas-kit-docs 13.2.36 → 13.2.38

package/dist/es6/lib/ExampleCodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAiEA,eAAO,MAAM,gBAAgB,aAAY,GAAG,4CA0G3C,CAAC"}
+{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAqEA,eAAO,MAAM,gBAAgB,aAAY,GAAG,4CA2G3C,CAAC"}

package/dist/es6/lib/ExampleCodeBlock.js

@@ -24,6 +24,10 @@ const cardStencil = createStencil({
             boxShadow: system.depth[1],
             borderRadius: system.shape.x1,
             position: 'relative',
+            overflow: 'auto', // This allows for the entire ExampleCodeBlock to scroll on smaller viewports
+        },
+        '[data-part="example-block-container"]': {
+            overflow: 'auto',
         },
         '[data-part="code-block"]': {
             display: 'none',
@@ -109,7 +113,7 @@ export const ExampleCodeBlock = ({ code }) => {
             openFile: 'src/Demo.tsx',
         });
     };
-    return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsxs(Card.Body, { children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }), _jsx(Card, { "data-part": "code-block", padding: 0, children: _jsxs(Card.Body, { cs: { position: 'relative' }, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
+    return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsxs(Card.Body, { "data-part": "example-block-container", children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }), _jsx(Card, { "data-part": "code-block", padding: 0, children: _jsxs(Card.Body, { cs: { position: 'relative' }, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
                                     fontSize: cssVar(system.fontSize.subtext.large),
                                     lineHeight: cssVar(system.lineHeight.subtext.large),
                                     margin: '0',

package/dist/es6/lib/MDXElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MDXElements.d.ts","sourceRoot":"","sources":["../../../lib/MDXElements.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,eAAO,MAAM,GAAG,sEAMd,CAAC;AAwDH;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,4CAQnD,CAAC"}
+{"version":3,"file":"MDXElements.d.ts","sourceRoot":"","sources":["../../../lib/MDXElements.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,eAAO,MAAM,GAAG,sEAMd,CAAC;AAwDH;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,4CAYnD,CAAC"}

package/dist/es6/lib/MDXElements.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMDXComponents } from '@mdx-js/react';
 import React from 'react';
 import MarkdownToJSX from 'markdown-to-jsx';
-import { createComponent } from '@workday/canvas-kit-react';
+import { Box, createComponent } from '@workday/canvas-kit-react';
 import { HeadingLevelContext, SymbolDialog } from './widgetUtils';
 /**
  * Special component that taps into @mdx-js/react components that are used by both Storybook and the
@@ -57,5 +57,8 @@ function rewriteHeadingLevels(input, startingLevel) {
 export const MdxJSToJSX = (props) => {
     const components = useMDXComponents();
     const headingLevel = React.useContext(HeadingLevelContext);
-    return (_jsx(MarkdownToJSX, { options: { overrides: { ...components, button: Button }, forceBlock: true }, children: rewriteHeadingLevels(convertLinkToSymbolLinks(props.children), headingLevel) }));
+    return (
+    // This fixes the `pre` element inside of the `<Table.Cell/>` element.
+    // This prevents the code block from going outside the width of the `<Table.Cell/>` element.
+    _jsx(Box, { cs: { minWidth: '0' }, children: _jsx(MarkdownToJSX, { options: { overrides: { ...components, button: Button }, forceBlock: true }, children: rewriteHeadingLevels(convertLinkToSymbolLinks(props.children), headingLevel) }) }));
 };

package/dist/es6/lib/Value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAU5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;iFAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;6CAgDjF,CAAC;AAoEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;6CAyBnC,CAAC"}
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAW5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;iFAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;6CAgDjF,CAAC;AAoEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;6CAyBnC,CAAC"}

package/dist/es6/lib/Value.js

@@ -3,11 +3,12 @@ import React from 'react';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { Text } from '@workday/canvas-kit-react/text';
 import { MdxJSToJSX } from './MDXElements';
-import { Table } from './Table';
+import { Table } from '@workday/canvas-kit-react';
 import { capitalize, IndentLevelContext, RenderContext, indent } from './widgetUtils';
 import { DescriptionTooltip } from './DescriptionTooltip';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { createStyles } from '@workday/canvas-kit-styling';
+import { Flex } from '@workday/canvas-kit-react';
 const widgets = {};
 export function registerWidget(key, widget) {
     widget.displayName = `${capitalize(key)}Widget`;
@@ -43,7 +44,7 @@ function getTableRows(properties, showDefault = true, showRequired = false, leve
         const title = (_b = (_a = property.declarations) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filePath;
         const propName = (_jsxs(Text, { as: "code", whiteSpace: 'nowrap !important', children: [indent(level), level > 0 && '\u2514\u00A0', property.name, showRequired && property.required ? _jsx(Text, { color: "chiliMango600", children: "*" }) : ''] }));
         return [
-            _jsxs(Table.Row, { children: [_jsx(Table.Data, { color: "plum600", children: title ? (_jsx(Tooltip, { type: "describe", title: title, children: propName })) : (propName) }), _jsx(Table.Data, { children: _jsx("code", { children: _jsx(RenderContext.Provider, { value: "inline", children: _jsx(Value, { value: property.type }) }) }) }), _jsx(Table.Data, { children: _jsx(MdxJSToJSX, { children: property.description || '' }) }), showDefault ? (_jsx(Table.Data, { children: property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
+            _jsxs(Table.Row, { children: [_jsx(Table.Cell, { color: "plum600", children: title ? (_jsx(Tooltip, { type: "describe", title: title, children: propName })) : (propName) }), _jsx(Table.Cell, { children: _jsx(Flex, { as: "code", cs: { flexWrap: 'wrap' }, children: _jsx(RenderContext.Provider, { value: "inline", children: _jsx(Value, { value: property.type }) }) }) }), _jsx(Table.Cell, { children: _jsx(MdxJSToJSX, { children: property.description || '' }) }), showDefault ? (_jsx(Table.Cell, { children: property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
                             property.defaultValue.value === 'undefined' ? null : (_jsx("code", { children: _jsx(Value, { value: property.defaultValue }) }))) : null })) : null] }, index + i),
         ];
     });

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "13.2.36",
-    "@workday/canvas-kit-preview-react": "13.2.36",
-    "@workday/canvas-kit-react": "13.2.36",
-    "@workday/canvas-kit-react-fonts": "^13.2.36",
-    "@workday/canvas-kit-styling": "13.2.36",
+    "@workday/canvas-kit-labs-react": "13.2.38",
+    "@workday/canvas-kit-preview-react": "13.2.38",
+    "@workday/canvas-kit-react": "13.2.38",
+    "@workday/canvas-kit-react-fonts": "^13.2.38",
+    "@workday/canvas-kit-styling": "13.2.38",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "13.2.36",
-    "@workday/canvas-kit-preview-react": "13.2.36",
-    "@workday/canvas-kit-react": "13.2.36",
-    "@workday/canvas-kit-react-fonts": "^13.2.36",
-    "@workday/canvas-kit-styling": "13.2.36",
+    "@workday/canvas-kit-labs-react": "13.2.38",
+    "@workday/canvas-kit-preview-react": "13.2.38",
+    "@workday/canvas-kit-react": "13.2.38",
+    "@workday/canvas-kit-react-fonts": "^13.2.38",
+    "@workday/canvas-kit-styling": "13.2.38",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/lib/ExampleCodeBlock.tsx

@@ -25,6 +25,10 @@ const cardStencil = createStencil({
       boxShadow: system.depth[1],
       borderRadius: system.shape.x1,
       position: 'relative',
+      overflow: 'auto', // This allows for the entire ExampleCodeBlock to scroll on smaller viewports
+    },
+    '[data-part="example-block-container"]': {
+      overflow: 'auto',
     },
     '[data-part="code-block"]': {
       display: 'none',
@@ -122,7 +126,8 @@ export const ExampleCodeBlock = ({code}: any) => {
   return (
     <div {...cardStencil({opened: isCodeDisplayed})}>
       <Card data-part="example-block" className="sb-unstyled">
-        <Card.Body>
+        {/* This allows for the div to scroll on smaller viewports while not allowing the components to overflow over the container */}
+        <Card.Body data-part="example-block-container">
           {React.createElement(code)}
           {code && (
             <div data-part="code-toggle-stackblitz-btn-container">

package/lib/MDXElements.tsx

@@ -3,7 +3,7 @@ import {useMDXComponents} from '@mdx-js/react';
 import React from 'react';
 import MarkdownToJSX from 'markdown-to-jsx';
 
-import {createComponent} from '@workday/canvas-kit-react';
+import {Box, createComponent} from '@workday/canvas-kit-react';
 import {HeadingLevelContext, SymbolDialog} from './widgetUtils';
 
 /**
@@ -80,8 +80,12 @@ export const MdxJSToJSX = (props: {children: string}) => {
   const components = useMDXComponents();
   const headingLevel = React.useContext(HeadingLevelContext);
   return (
-    <MarkdownToJSX options={{overrides: {...components, button: Button}, forceBlock: true}}>
-      {rewriteHeadingLevels(convertLinkToSymbolLinks(props.children), headingLevel)}
-    </MarkdownToJSX>
+    // This fixes the `pre` element inside of the `<Table.Cell/>` element.
+    // This prevents the code block from going outside the width of the `<Table.Cell/>` element.
+    <Box cs={{minWidth: '0'}}>
+      <MarkdownToJSX options={{overrides: {...components, button: Button}, forceBlock: true}}>
+        {rewriteHeadingLevels(convertLinkToSymbolLinks(props.children), headingLevel)}
+      </MarkdownToJSX>
+    </Box>
   );
 };

package/lib/Value.tsx

@@ -5,11 +5,12 @@ import {Text} from '@workday/canvas-kit-react/text';
 
 import * as types from '../docgen/docTypes';
 import {MdxJSToJSX} from './MDXElements';
-import {Table} from './Table';
+import {Table} from '@workday/canvas-kit-react';
 import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils';
 import {DescriptionTooltip} from './DescriptionTooltip';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {Flex} from '@workday/canvas-kit-react';
 
 const widgets: Record<string, React.FC<ValueProps>> = {};
 
@@ -113,7 +114,7 @@ function getTableRows(
     );
     return [
       <Table.Row key={index + i}>
-        <Table.Data color="plum600">
+        <Table.Cell color="plum600">
           {/* Use a tooltip to help with debugging where the type sources are coming from */}
           {title ? (
             <Tooltip type="describe" title={title}>
@@ -122,21 +123,21 @@ function getTableRows(
           ) : (
             propName
           )}
-        </Table.Data>
-        <Table.Data>
-          <code>
+        </Table.Cell>
+        <Table.Cell>
+          <Flex as="code" cs={{flexWrap: 'wrap'}}>
             {
               <RenderContext.Provider value="inline">
                 <Value value={property.type} />
               </RenderContext.Provider>
             }
-          </code>
-        </Table.Data>
-        <Table.Data>
+          </Flex>
+        </Table.Cell>
+        <Table.Cell>
           <MdxJSToJSX>{property.description || ''}</MdxJSToJSX>
-        </Table.Data>
+        </Table.Cell>
         {showDefault ? (
-          <Table.Data>
+          <Table.Cell>
             {property.defaultValue ? (
               property.defaultValue.kind === 'primitive' &&
               property.defaultValue.value === 'undefined' ? null : (
@@ -145,7 +146,7 @@ function getTableRows(
                 </code>
               )
             ) : null}
-          </Table.Data>
+          </Table.Cell>
         ) : null}
       </Table.Row>,
     ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.2.36",
+  "version": "13.2.38",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.2.36",
-    "@workday/canvas-kit-preview-react": "^13.2.36",
-    "@workday/canvas-kit-react": "^13.2.36",
-    "@workday/canvas-kit-styling": "^13.2.36",
+    "@workday/canvas-kit-labs-react": "^13.2.38",
+    "@workday/canvas-kit-preview-react": "^13.2.38",
+    "@workday/canvas-kit-react": "^13.2.38",
+    "@workday/canvas-kit-styling": "^13.2.38",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "0e412c1952429e7da528711f821fc87765557050"
+  "gitHead": "979c7923618002e76262cb9d994def9c0588dc88"
 }