@workday/canvas-kit-docs 8.5.2 → 8.5.4

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

@@ -1 +1 @@
-{"version":3,"file":"widgetUtils.d.ts","sourceRoot":"","sources":["../../../lib/widgetUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAQ7E,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAE5C,yFAAyF;AACzF,eAAO,MAAM,aAAa,mCAAmD,CAAC;AAC9E;;;GAGG;AACH,eAAO,MAAM,mBAAmB,uBAAyB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,kBAAkB,uBAAyB,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,UAEnC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAEvC;AAED,UAAU,YAAY;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD;;;GAGG;AACH,eAAO,MAAM,OAAO,iFAOlB,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,oBAiB1E;AAID,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,cAAa,iBAAiB,gBAkDtD,CAAC;AA8DF,eAAO,MAAM,MAAM,aAAc,aAAa,kDAM7C,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,gBAI/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,aAAa,uBAIrD,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,UAAU;IAC/D;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,4GASnB,cAAc,gBA+ChB,CAAC"}
+{"version":3,"file":"widgetUtils.d.ts","sourceRoot":"","sources":["../../../lib/widgetUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAS7E,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAc5C,yFAAyF;AACzF,eAAO,MAAM,aAAa,mCAAmD,CAAC;AAC9E;;;GAGG;AACH,eAAO,MAAM,mBAAmB,uBAAyB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,kBAAkB,uBAAyB,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,UAEnC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAEvC;AAED,UAAU,YAAY;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD;;;GAGG;AACH,eAAO,MAAM,OAAO,iFAOlB,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,oBAiB1E;AAID,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,cAAa,iBAAiB,gBAkItD,CAAC;AAsEF,eAAO,MAAM,MAAM,aAAc,aAAa,kDAK7C,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,gBAI/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,aAAa,uBAIrD,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,UAAU;IAC/D;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,4GASnB,cAAc,gBAsDhB,CAAC"}

package/dist/es6/lib/widgetUtils.js

@@ -30,10 +30,19 @@ import styled from '@emotion/styled';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { useDialogModel, Dialog } from '@workday/canvas-kit-react/dialog';
 import { colors, space, type } from '@workday/canvas-kit-react/tokens';
+import { Breadcrumbs } from '@workday/canvas-kit-react/breadcrumbs';
 import { MDX, MdxJSToJSX } from './MDXElements';
 import { Hyperlink } from '@workday/canvas-kit-react/button';
 import { docs } from './docs';
 import { Value } from './Value';
+/**
+ * This context allows us to keep track if we're within a nested stack of dialog
+ */
+var NestedContext = React.createContext(false);
+/**
+ * Context to help keep track of breadcrumbs and update them
+ */
+var SymbolDocBreadcrumbsContext = React.createContext(undefined);
 /** React context to track the current rendering context to avoid tables inside tables */
 export var RenderContext = React.createContext('table');
 /**
@@ -83,30 +92,67 @@ var ButtonHyperLink = Hyperlink.as('button');
 export var SymbolDialog = function (_a) {
     var value = _a.value;
     var _b = React.useState(undefined), symbol = _b[0], setSymbol = _b[1];
+    var _c = React.useContext(SymbolDocBreadcrumbsContext), breadcrumbsList = _c.breadcrumbsList, updateBreadcrumbs = _c.updateBreadcrumbs;
+    var nestedContext = React.useContext(NestedContext);
     var model = useDialogModel({
         onShow: function () {
             setSymbol(docs.find(function (d) { return value.name === d.name; }) || undefined);
         },
+        onHide: function () {
+            // Reset breadcrumbs when the dialog is closed
+            updateBreadcrumbs([]);
+        },
     });
-    return (React.createElement(Dialog, { model: model },
-        React.createElement(React.Fragment, null,
-            React.createElement(Dialog.Target, { as: ButtonHyperLink, className: "token symbol", style: {
+    var handleTargetClick = function (e) {
+        e.preventDefault();
+        updateBreadcrumbs(breadcrumbsList.concat(value.name));
+    };
+    var handleBreadcrumbClick = function (e, index) {
+        e.preventDefault();
+        if (e.currentTarget.textContent &&
+            breadcrumbsList.length &&
+            breadcrumbsList.indexOf(e.currentTarget.textContent) > -1) {
+            // Slice breadcrumbs list up to but not including the current item clicked
+            updateBreadcrumbs(breadcrumbsList.slice(0, index + 1));
+        }
+    };
+    // If we're inside a nested context, we render a Hyperlink. This button will update the dialog instead of rendering a new one.
+    if (nestedContext) {
+        return (React.createElement(ButtonHyperLink, { style: {
+                border: 'none',
+                background: 'transparent',
+                fontSize: 'inherit',
+                fontFamily: 'inherit',
+            }, onClick: handleTargetClick }, value.displayName || value.name));
+    }
+    return (React.createElement(NestedContext.Provider, { value: true },
+        React.createElement(Dialog, { model: model },
+            React.createElement(Dialog.Target, { as: ButtonHyperLink, className: "token symbol", onClick: handleTargetClick, style: {
                     border: 'none',
                     background: 'transparent',
                     fontSize: 'inherit',
                     fontFamily: 'inherit',
                 }, "aria-haspopup": "true" }, value.displayName || value.name),
-            renderTypeParameters(value.typeParameters)),
-        React.createElement(Dialog.Popper, null,
-            React.createElement(Dialog.Card, { maxHeight: "50vh", maxWidth: "90vh" },
-                React.createElement(Dialog.CloseIcon, null),
-                React.createElement(Dialog.Heading, null, value.name),
-                React.createElement(Dialog.Body, null,
-                    React.createElement(RenderContext.Provider, { value: "table" },
-                        React.createElement(IndentLevelContext.Provider, { value: 0 }, symbol ? (React.createElement(SymbolDoc, { name: value.name, headingStart: 3, hideHeading: true })) : (React.createElement(React.Fragment, null,
-                            React.createElement("p", null, "Basic type information:"),
-                            React.createElement("pre", null,
-                                React.createElement("code", null, value.value)))))))))));
+            renderTypeParameters(value.typeParameters),
+            React.createElement(Dialog.Popper, null,
+                React.createElement(Dialog.Card, { maxHeight: "50vh", maxWidth: "90vh", minWidth: '600px' },
+                    React.createElement(Dialog.CloseIcon, null),
+                    React.createElement(Dialog.Heading, null,
+                        value.name,
+                        " "),
+                    breadcrumbsList.length > 1 && (React.createElement(Breadcrumbs, { "aria-label": "Breadcrumbs" },
+                        React.createElement(Breadcrumbs.List, { paddingX: "xxs" }, breadcrumbsList.map(function (item, index) {
+                            return (React.createElement(React.Fragment, null, item === breadcrumbsList[breadcrumbsList.length - 1] ? (React.createElement(Breadcrumbs.CurrentItem, { key: index }, item)) : (React.createElement(Breadcrumbs.Item, { key: index },
+                                React.createElement(Breadcrumbs.Link, { onClick: function (e) { return handleBreadcrumbClick(e, index); }, href: '#' }, item)))));
+                        })))),
+                    React.createElement(Dialog.Body, null,
+                        React.createElement(RenderContext.Provider, { value: "table" },
+                            React.createElement(IndentLevelContext.Provider, { value: 0 }, symbol ? (React.createElement(SymbolDoc, { name: breadcrumbsList.length >= 1
+                                    ? breadcrumbsList[breadcrumbsList.length - 1]
+                                    : value.name, headingStart: 3, hideHeading: true })) : (React.createElement(React.Fragment, null,
+                                React.createElement("p", null, "Basic type information:"),
+                                React.createElement("pre", null,
+                                    React.createElement("code", null, value.name))))))))))));
 };
 function createColor(color) {
     return {
@@ -141,14 +187,18 @@ var StyledSymbolDoc = styled('div')({
         },
     },
 });
-function getSymbolDocChildren(doc, meta) {
+function getSymbolDocChildren(doc, meta, name) {
     if (!doc) {
-        return React.createElement("div", null, "Not Found");
+        // We're within  a symbol doc context, but there's no information, so we still want to render the basic type information
+        return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Basic type information:"),
+            React.createElement("pre", null,
+                React.createElement("code", null, name))));
     }
     if (doc && doc.type) {
         return React.createElement(Value, { value: doc.type, doc: doc, meta: meta });
     }
-    return React.createElement("div", null, "Not Found");
+    return React.createElement("div", null, "Not found");
 }
 function findDoc(_a) {
     var name = _a.name, fileName = _a.fileName;
@@ -161,9 +211,8 @@ function findDoc(_a) {
     return doc;
 }
 export var useDoc = function (criteria) {
-    var doc = React.useState(function () {
-        return findDoc(criteria);
-    })[0];
+    // Listen to criteria.name and criteria.fileName so that we can re-fetch docs in the dialog
+    var doc = React.useMemo(function () { return findDoc(criteria); }, [criteria.name, criteria.fileName || '']);
     return doc;
 };
 /**
@@ -188,7 +237,8 @@ export var SymbolDescription = function (props) {
 export var SymbolDoc = function (_a) {
     var name = _a.name, fileName = _a.fileName, _b = _a.headingStart, headingStart = _b === void 0 ? 3 : _b, _c = _a.hideDescription, hideDescription = _c === void 0 ? false : _c, _d = _a.hideHeading, hideHeading = _d === void 0 ? false : _d, descriptionOverride = _a.descriptionOverride, meta = _a.meta, elemProps = __rest(_a, ["name", "fileName", "headingStart", "hideDescription", "hideHeading", "descriptionOverride", "meta"]);
     var doc = useDoc({ name: name, fileName: fileName });
-    var children = getSymbolDocChildren(doc, meta);
+    var symbolDocBreadcrumb = React.useContext(SymbolDocBreadcrumbsContext);
+    var children = getSymbolDocChildren(doc, meta, name);
     var requiresCodeWrapper = [
         'symbol',
         'generic',
@@ -214,9 +264,15 @@ export var SymbolDoc = function (_a) {
         'callExpression',
     ].includes((doc === null || doc === void 0 ? void 0 : doc.type.kind) || 'notFound');
     var contents = requiresCodeWrapper ? (React.createElement("code", { style: { display: 'block' } }, children)) : (children);
-    return (React.createElement(StyledSymbolDoc, __assign({}, elemProps),
+    var symbolDocContents = (React.createElement(StyledSymbolDoc, __assign({}, elemProps),
         React.createElement(HeadingLevelContext.Provider, { value: headingStart },
             !hideHeading && React.createElement(Heading, null, name),
             !hideDescription && doc && (React.createElement(MdxJSToJSX, null, descriptionOverride || doc.description)),
             contents)));
+    return symbolDocBreadcrumb === undefined ? (React.createElement(SymbolDocWrapper, null, symbolDocContents)) : (symbolDocContents);
+};
+var SymbolDocWrapper = function (_a) {
+    var children = _a.children;
+    var _b = React.useState([]), breadcrumbsList = _b[0], updateBreadcrumbs = _b[1];
+    return (React.createElement(SymbolDocBreadcrumbsContext.Provider, { value: { breadcrumbsList: breadcrumbsList, updateBreadcrumbs: updateBreadcrumbs } }, children));
 };

package/lib/widgetUtils.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {useDialogModel, Dialog} from '@workday/canvas-kit-react/dialog';
 import {CanvasColor, colors, space, type} from '@workday/canvas-kit-react/tokens';
+import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
 
 import {MDX, MdxJSToJSX} from './MDXElements';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
@@ -11,6 +12,18 @@ import {docs} from './docs';
 import {Value} from './Value';
 import * as types from '../docgen/docTypes';
 
+/**
+ * This context allows us to keep track if we're within a nested stack of dialog
+ */
+const NestedContext = React.createContext(false);
+
+/**
+ * Context to help keep track of breadcrumbs and update them
+ */
+const SymbolDocBreadcrumbsContext = React.createContext<
+  {breadcrumbsList: string[]; updateBreadcrumbs: (value: string[]) => void} | undefined
+>(undefined);
+
 /** React context to track the current rendering context to avoid tables inside tables */
 export const RenderContext = React.createContext<'table' | 'inline'>('table');
 /**
@@ -80,18 +93,62 @@ export interface SymbolDialogProps {
 
 export const SymbolDialog = ({value}: SymbolDialogProps) => {
   const [symbol, setSymbol] = React.useState<types.ExportedSymbol | undefined>(undefined);
+  const {breadcrumbsList, updateBreadcrumbs} = React.useContext(SymbolDocBreadcrumbsContext)!;
+
+  const nestedContext = React.useContext(NestedContext);
+
   const model = useDialogModel({
     onShow() {
       setSymbol(docs.find(d => value.name === d.name) || undefined);
     },
+    onHide() {
+      // Reset breadcrumbs when the dialog is closed
+      updateBreadcrumbs([]);
+    },
   });
 
+  const handleTargetClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    updateBreadcrumbs(breadcrumbsList.concat(value.name));
+  };
+
+  const handleBreadcrumbClick = (e: React.MouseEvent, index: number) => {
+    e.preventDefault();
+    if (
+      e.currentTarget.textContent &&
+      breadcrumbsList.length &&
+      breadcrumbsList.indexOf(e.currentTarget.textContent) > -1
+    ) {
+      // Slice breadcrumbs list up to but not including the current item clicked
+      updateBreadcrumbs(breadcrumbsList.slice(0, index + 1));
+    }
+  };
+
+  // If we're inside a nested context, we render a Hyperlink. This button will update the dialog instead of rendering a new one.
+  if (nestedContext) {
+    return (
+      <ButtonHyperLink
+        style={{
+          border: 'none',
+          background: 'transparent',
+          fontSize: 'inherit',
+          fontFamily: 'inherit',
+        }}
+        onClick={handleTargetClick}
+      >
+        {value.displayName || value.name}
+      </ButtonHyperLink>
+    );
+  }
+
   return (
-    <Dialog model={model}>
-      <>
+    <NestedContext.Provider value={true}>
+      <Dialog model={model}>
         <Dialog.Target
           as={ButtonHyperLink}
           className="token symbol"
+          onClick={handleTargetClick}
           style={{
             border: 'none',
             background: 'transparent',
@@ -102,31 +159,67 @@ export const SymbolDialog = ({value}: SymbolDialogProps) => {
         >
           {value.displayName || value.name}
         </Dialog.Target>
+
         {renderTypeParameters(value.typeParameters)}
-      </>
-      <Dialog.Popper>
-        <Dialog.Card maxHeight="50vh" maxWidth="90vh">
-          <Dialog.CloseIcon />
-          <Dialog.Heading>{value.name}</Dialog.Heading>
-          <Dialog.Body>
-            <RenderContext.Provider value="table">
-              <IndentLevelContext.Provider value={0}>
-                {symbol ? (
-                  <SymbolDoc name={value.name} headingStart={3} hideHeading />
-                ) : (
-                  <>
-                    <p>Basic type information:</p>
-                    <pre>
-                      <code>{value.value}</code>
-                    </pre>
-                  </>
-                )}
-              </IndentLevelContext.Provider>
-            </RenderContext.Provider>
-          </Dialog.Body>
-        </Dialog.Card>
-      </Dialog.Popper>
-    </Dialog>
+
+        <Dialog.Popper>
+          <Dialog.Card maxHeight="50vh" maxWidth="90vh" minWidth={'600px'}>
+            <Dialog.CloseIcon />
+
+            <Dialog.Heading>{value.name} </Dialog.Heading>
+            {breadcrumbsList.length > 1 && (
+              <Breadcrumbs aria-label="Breadcrumbs">
+                <Breadcrumbs.List paddingX="xxs">
+                  {breadcrumbsList.map((item, index) => {
+                    return (
+                      <>
+                        {item === breadcrumbsList[breadcrumbsList.length - 1] ? (
+                          <Breadcrumbs.CurrentItem key={index}>{item}</Breadcrumbs.CurrentItem>
+                        ) : (
+                          <Breadcrumbs.Item key={index}>
+                            <Breadcrumbs.Link
+                              onClick={e => handleBreadcrumbClick(e, index)}
+                              href={'#'}
+                            >
+                              {item}
+                            </Breadcrumbs.Link>
+                          </Breadcrumbs.Item>
+                        )}
+                      </>
+                    );
+                  })}
+                </Breadcrumbs.List>
+              </Breadcrumbs>
+            )}
+
+            <Dialog.Body>
+              <RenderContext.Provider value="table">
+                <IndentLevelContext.Provider value={0}>
+                  {symbol ? (
+                    <SymbolDoc
+                      name={
+                        breadcrumbsList.length >= 1
+                          ? breadcrumbsList[breadcrumbsList.length - 1]
+                          : value.name
+                      }
+                      headingStart={3}
+                      hideHeading
+                    />
+                  ) : (
+                    <>
+                      <p>Basic type information:</p>
+                      <pre>
+                        <code>{value.name}</code>
+                      </pre>
+                    </>
+                  )}
+                </IndentLevelContext.Provider>
+              </RenderContext.Provider>
+            </Dialog.Body>
+          </Dialog.Card>
+        </Dialog.Popper>
+      </Dialog>
+    </NestedContext.Provider>
   );
 };
 
@@ -166,16 +259,24 @@ const StyledSymbolDoc = styled('div')({
   },
 });
 
-function getSymbolDocChildren(doc?: types.ExportedSymbol, meta?: any) {
+function getSymbolDocChildren(doc?: types.ExportedSymbol, meta?: any, name?: string) {
   if (!doc) {
-    return <div>Not Found</div>;
+    // We're within  a symbol doc context, but there's no information, so we still want to render the basic type information
+    return (
+      <>
+        <p>Basic type information:</p>
+        <pre>
+          <code>{name}</code>
+        </pre>
+      </>
+    );
   }
 
   if (doc && doc.type) {
     return <Value value={doc.type} doc={doc} meta={meta} />;
   }
 
-  return <div>Not Found</div>;
+  return <div>Not found</div>;
 }
 
 function findDoc({name, fileName}: ValueDocProps): types.ExportedSymbol<types.Value> | undefined {
@@ -191,9 +292,8 @@ function findDoc({name, fileName}: ValueDocProps): types.ExportedSymbol<types.Va
 }
 
 export const useDoc = (criteria: ValueDocProps) => {
-  const [doc] = React.useState(() => {
-    return findDoc(criteria);
-  });
+  // Listen to criteria.name and criteria.fileName so that we can re-fetch docs in the dialog
+  const doc = React.useMemo(() => findDoc(criteria), [criteria.name, criteria.fileName || '']);
 
   return doc;
 };
@@ -264,8 +364,9 @@ export const SymbolDoc = ({
   ...elemProps
 }: SymbolDocProps) => {
   const doc = useDoc({name, fileName});
+  const symbolDocBreadcrumb = React.useContext(SymbolDocBreadcrumbsContext);
 
-  const children = getSymbolDocChildren(doc, meta);
+  const children = getSymbolDocChildren(doc, meta, name);
 
   const requiresCodeWrapper = [
     'symbol',
@@ -298,7 +399,7 @@ export const SymbolDoc = ({
     children
   );
 
-  return (
+  const symbolDocContents = (
     <StyledSymbolDoc {...elemProps}>
       <HeadingLevelContext.Provider value={headingStart}>
         {!hideHeading && <Heading>{name}</Heading>}
@@ -309,4 +410,19 @@ export const SymbolDoc = ({
       </HeadingLevelContext.Provider>
     </StyledSymbolDoc>
   );
+
+  return symbolDocBreadcrumb === undefined ? (
+    <SymbolDocWrapper>{symbolDocContents}</SymbolDocWrapper>
+  ) : (
+    symbolDocContents
+  );
+};
+
+const SymbolDocWrapper = ({children}: any) => {
+  const [breadcrumbsList, updateBreadcrumbs] = React.useState<string[]>([]);
+  return (
+    <SymbolDocBreadcrumbsContext.Provider value={{breadcrumbsList, updateBreadcrumbs}}>
+      {children}
+    </SymbolDocBreadcrumbsContext.Provider>
+  );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "8.5.2",
+  "version": "8.5.4",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^8.5.2",
-    "@workday/canvas-kit-preview-react": "^8.5.2",
-    "@workday/canvas-kit-react": "^8.5.2",
+    "@workday/canvas-kit-labs-react": "^8.5.4",
+    "@workday/canvas-kit-preview-react": "^8.5.4",
+    "@workday/canvas-kit-react": "^8.5.4",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "c30236eca6db540b0c7bd0809b40d98ea5a0f658"
+  "gitHead": "b21ecde5c0a16627550283dea528a3371107a513"
 }