@workday/canvas-kit-docs 14.0.0 → 14.0.2

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": "14.0.0",
-    "@workday/canvas-kit-preview-react": "14.0.0",
-    "@workday/canvas-kit-react": "14.0.0",
-    "@workday/canvas-kit-react-fonts": "^14.0.0",
-    "@workday/canvas-kit-styling": "14.0.0",
+    "@workday/canvas-kit-labs-react": "14.0.2",
+    "@workday/canvas-kit-preview-react": "14.0.2",
+    "@workday/canvas-kit-react": "14.0.2",
+    "@workday/canvas-kit-react-fonts": "^14.0.2",
+    "@workday/canvas-kit-styling": "14.0.2",
     "@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": "14.0.0",
-    "@workday/canvas-kit-preview-react": "14.0.0",
-    "@workday/canvas-kit-react": "14.0.0",
-    "@workday/canvas-kit-react-fonts": "^14.0.0",
-    "@workday/canvas-kit-styling": "14.0.0",
+    "@workday/canvas-kit-labs-react": "14.0.2",
+    "@workday/canvas-kit-preview-react": "14.0.2",
+    "@workday/canvas-kit-react": "14.0.2",
+    "@workday/canvas-kit-react-fonts": "^14.0.2",
+    "@workday/canvas-kit-styling": "14.0.2",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/FilterListWithLiveStatus.d.ts

@@ -0,0 +1,2 @@
+export declare const FilterListWithLiveStatus: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilterListWithLiveStatus.d.ts.map

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/FilterListWithLiveStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterListWithLiveStatus.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx"],"names":[],"mappings":"AA0CA,eAAO,MAAM,wBAAwB,+CA8BpC,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/FilterListWithLiveStatus.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { AriaLiveRegion } from '@workday/canvas-kit-react/common';
+import { BodyText, Heading } from '@workday/canvas-kit-react/text';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { FormField } from '@workday/canvas-kit-react/form-field';
+import { TextInput } from '@workday/canvas-kit-react/text-input';
+import { system } from '@workday/canvas-tokens-web';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+const fruits = [
+    'Apples',
+    'Oranges',
+    'Bananas',
+    'Lemons',
+    'Limes',
+    'Strawberries',
+    'Raspberries',
+    'Blackberries',
+];
+const liveRegionStyle = createStyles({
+    border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
+    backgroundColor: system.color.bg.caution.softer,
+    padding: system.space.x2,
+});
+const listStyles = createStyles({
+    paddingLeft: system.space.zero,
+});
+const listItemStyles = createStyles({
+    listStyle: 'none',
+    paddingLeft: system.space.zero,
+});
+const flexStyles = createStyles({
+    gap: system.space.x4,
+});
+let filteredFruits = fruits;
+export const FilterListWithLiveStatus = () => {
+    const [filter, setFilter] = React.useState('');
+    function handleFilter(e) {
+        filteredFruits = fruits.filter(i => i.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0);
+        setFilter(e.target.value);
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { cs: flexStyles, children: [_jsx(Heading, { size: "small", children: "Fruits" }), _jsx(AriaLiveRegion, { children: _jsx(BodyText, { size: "small", cs: liveRegionStyle, children: `Showing ${filteredFruits.length} of ${fruits.length}` }) })] }), _jsxs(FormField, { children: [_jsx(FormField.Label, { children: "Filter Items:" }), _jsx(FormField.Input, { as: TextInput, value: filter, onChange: handleFilter })] }), _jsx("ul", { className: listStyles, children: filteredFruits.map(i => (_jsx(BodyText, { size: "small", as: "li", cs: listItemStyles, children: i }, i))) })] }));
+};

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/HiddenLiveRegion.d.ts

@@ -0,0 +1,2 @@
+export declare const HiddenLiveRegion: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HiddenLiveRegion.d.ts.map

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/HiddenLiveRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/HiddenLiveRegion.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,gBAAgB,+CA2B5B,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/HiddenLiveRegion.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { AccessibleHide, AriaLiveRegion } from '@workday/canvas-kit-react/common';
+import { PrimaryButton } from '@workday/canvas-kit-react/button';
+import { FormField } from '@workday/canvas-kit-react/form-field';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { Text } from '@workday/canvas-kit-react/text';
+import { TextInput } from '@workday/canvas-kit-react/text-input';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+let liveRegionStr = '';
+const flexStyles = createStyles({
+    gap: system.space.x4,
+    alignItems: 'center',
+});
+export const HiddenLiveRegion = () => {
+    const [message, setMessage] = React.useState('');
+    function handleChange(e) {
+        setMessage(e.target.value);
+    }
+    function handleSendMessage(e) {
+        e.preventDefault();
+        liveRegionStr = message;
+        setMessage('');
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "form", "aria-label": "Hidden Live Region", onSubmit: handleSendMessage, cs: flexStyles, children: [_jsxs(FormField, { children: [_jsx(FormField.Label, { children: "Type your message:" }), _jsx(FormField.Input, { as: TextInput, onChange: handleChange, value: message })] }), _jsx(PrimaryButton, { type: "submit", children: "Send Message" })] }), _jsx(AriaLiveRegion, { children: _jsx(Text, { as: AccessibleHide, children: liveRegionStr }) })] }));
+};

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.d.ts

@@ -0,0 +1,2 @@
+export declare const IconButtonsWithLiveBadges: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconButtonsWithLiveBadges.d.ts.map

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonsWithLiveBadges.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx"],"names":[],"mappings":"AA0EA,eAAO,MAAM,yBAAyB,+CAuBrC,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { AccessibleHide, AriaLiveRegion, useUniqueId } from '@workday/canvas-kit-react/common';
+import { notificationsIcon, inboxIcon, assistantIcon } from '@workday/canvas-system-icons-web';
+import { space } from '@workday/canvas-kit-react/tokens';
+import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { CountBadge } from '@workday/canvas-kit-react/badge';
+const MyTasksLiveBadge = ({ cnt }) => {
+    // use tooltip to assign name,
+    // use AriaLiveRegion inside button,
+    // assign name to live region referencing the button,
+    // use BadgeCount inside live region,
+    // use AccessibleHide to create invisible word "new" after badge
+    // use aria-describedby on button, referencing live region container to set description
+    // Safari + VO => not working at all
+    // JAWS 2024 + Chrome / Edge => works as expected :)
+    // NVDA + Chrome / Edge => works as expected :)
+    // Firefox => isn't announcing description on focus, only announces "X New" live (missing button name)
+    const badgeID = useUniqueId();
+    const myTasksID = useUniqueId();
+    return (_jsx(Tooltip, { title: "My Tasks", children: _jsx(TertiaryButton, { icon: inboxIcon, id: myTasksID, "aria-describedby": badgeID, children: _jsxs(AriaLiveRegion, { id: badgeID, "aria-labelledby": myTasksID, children: [_jsx(CountBadge, { count: cnt }), _jsx(AccessibleHide, { children: "New" })] }) }) }));
+};
+// use AriaLiveRegion around the button,
+// use Tooltip to assign the name of the button,
+// make sure Tooltip title string includes count value
+// Chrome + VO => Announces name "notifications X new" and innerText 'X'
+// Safari + VO => Works as expected :)
+// JAWS 2024 => Announces full button name twice (previous state, then new state)
+// JAWS 2024 + Firefox => Works as expected :)
+// NVDA (All Browsers) => Atomic property isn't working, only announcing number change, announces twice
+const NotificationsLiveBadge = ({ cnt }) => (_jsx(AriaLiveRegion, { children: _jsx(Tooltip, { title: `Notifications ${cnt} new`, children: _jsx(TertiaryButton, { icon: notificationsIcon, children: _jsx(CountBadge, { count: cnt }) }) }) }));
+const AssistantLiveBadge = ({ cnt }) => {
+    // use AriaLiveRegion around the button
+    // use muted type Tooltip (avoid using aria-label to name button)
+    // use AccessibleHide inside of button to compose name
+    // Chrome + VO => announces twice
+    // Safari + VO => works as expected :)
+    const lbl = 'Workday Assistant';
+    return (_jsx(AriaLiveRegion, { children: _jsx(Tooltip, { title: lbl, type: "muted", children: _jsxs(TertiaryButton, { icon: assistantIcon, children: [_jsx(AccessibleHide, { children: lbl }), _jsx(CountBadge, { count: cnt }), _jsx(AccessibleHide, { children: "New" })] }) }) }));
+};
+export const IconButtonsWithLiveBadges = () => {
+    const [counter, setCounter] = React.useState(0);
+    const [notifications, setNotifications] = React.useState(0);
+    const [assistant, setAssistant] = React.useState(0);
+    const handleAddTask = () => setCounter(prev => prev + 1);
+    const handleAddNotification = () => setNotifications(prev => prev + 1);
+    const handleAssistant = () => setAssistant(prev => prev + 1);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { padding: space.s, gap: space.s, as: "header", children: [_jsx(AssistantLiveBadge, { cnt: assistant }), _jsx(NotificationsLiveBadge, { cnt: notifications }), _jsx(MyTasksLiveBadge, { cnt: counter })] }), _jsxs(Flex, { padding: space.s, gap: space.s, as: "main", children: [_jsx(SecondaryButton, { onClick: handleAssistant, children: "Add a Message" }), _jsx(SecondaryButton, { onClick: handleAddNotification, children: "Add a Notification" }), _jsx(SecondaryButton, { onClick: handleAddTask, children: "Add an item to My Tasks" })] })] }));
+};

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.d.ts

@@ -0,0 +1,2 @@
+export declare const TextInputWithLiveError: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextInputWithLiveError.d.ts.map

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputWithLiveError.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB,+CAoBlC,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { AriaLiveRegion, changeFocus } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-react/form-field';
+import { PrimaryButton } from '@workday/canvas-kit-react/button';
+import { TextInput } from '@workday/canvas-kit-react/text-input';
+import { system } from '@workday/canvas-tokens-web';
+import { createStyles } from '@workday/canvas-kit-styling';
+const hintStyles = createStyles({
+    height: system.space.x6,
+});
+export const TextInputWithLiveError = () => {
+    const errMsg = 'Error: First name is required.';
+    const [hasError, setHasError] = React.useState('no');
+    const inputRef = React.useRef(null);
+    const handleBlur = (e) => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no');
+    const handleSubmit = () => hasError && changeFocus(inputRef.current);
+    return (_jsxs(_Fragment, { children: [_jsxs(FormField, { error: hasError === 'error' ? 'error' : undefined, isRequired: true, children: [_jsx(FormField.Label, { children: "First Name:" }), _jsx(FormField.Input, { as: TextInput, onBlur: handleBlur, ref: inputRef }), _jsx(FormField.Hint, { cs: hintStyles, children: _jsx(AriaLiveRegion, { children: hasError === 'error' && errMsg }) })] }), _jsx(PrimaryButton, { onClick: handleSubmit, children: "Continue" })] }));
+};

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.d.ts

@@ -0,0 +1,2 @@
+export declare const VisibleLiveRegion: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VisibleLiveRegion.d.ts.map

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisibleLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,iBAAiB,+CAgC7B,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { AriaLiveRegion } from '@workday/canvas-kit-react/common';
+import { PrimaryButton } from '@workday/canvas-kit-react/button';
+import { FormField } from '@workday/canvas-kit-react/form-field';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { Text } from '@workday/canvas-kit-react/text';
+import { TextInput } from '@workday/canvas-kit-react/text-input';
+import { system } from '@workday/canvas-tokens-web';
+import { createStyles, px2rem, calc } from '@workday/canvas-kit-styling';
+const liveRegionStyle = createStyles({
+    border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
+    backgroundColor: system.color.bg.caution.softer,
+    padding: system.space.x4,
+    display: 'block',
+    marginBlockStart: system.space.x4,
+    marginBlockEnd: system.space.x4,
+    width: calc.multiply(system.space.x16, 7),
+});
+const flexGapStyles = createStyles({
+    gap: system.space.x4,
+    alignItems: 'center',
+});
+let liveRegionStr = 'This is an ARIA Live Region!';
+export const VisibleLiveRegion = () => {
+    const [message, setMessage] = React.useState('');
+    function handleChange(e) {
+        setMessage(e.target.value);
+    }
+    function handleSendMessage(e) {
+        e.preventDefault();
+        liveRegionStr = message;
+        setMessage('');
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(AriaLiveRegion, { children: _jsx(Text, { cs: liveRegionStyle, children: liveRegionStr }) }), _jsxs(Flex, { as: "form", "aria-label": "Visible Live Region", onSubmit: handleSendMessage, cs: flexGapStyles, children: [_jsxs(FormField, { children: [_jsx(FormField.Label, { children: "Type your message:" }), _jsx(FormField.Input, { as: TextInput, onChange: handleChange, value: message })] }), _jsx(PrimaryButton, { type: "submit", children: "Send Message" })] })] }));
+};

package/dist/es6/mdx/accessibility/examples/GlobalHeader.d.ts

@@ -0,0 +1,8 @@
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+interface GlobalHeaderProps extends FlexProps {
+    notifications: number;
+}
+export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
+export declare const GlobalHeader: import("@workday/canvas-kit-react/common").ElementComponent<"div", GlobalHeaderProps>;
+export {};
+//# sourceMappingURL=GlobalHeader.d.ts.map

package/dist/es6/mdx/accessibility/examples/GlobalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../../mdx/accessibility/examples/GlobalHeader.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAcjE,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,aAAa,EAAE,MAAM,CAAC;CACvB;AA+ED,eAAO,MAAM,KAAK,+CAoBjB,CAAC;AAEF,eAAO,MAAM,YAAY,uFAmCvB,CAAC"}

package/dist/es6/mdx/accessibility/examples/GlobalHeader.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { AccessibleHide, AriaLiveRegion, composeHooks, createComponent, createElemPropsHook, createSubcomponent, useUniqueId, } from '@workday/canvas-kit-react/common';
+import { system } from '@workday/canvas-tokens-web';
+import { calc, createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { notificationsIcon, inboxIcon, justifyIcon, assistantIcon, searchIcon, } from '@workday/canvas-system-icons-web';
+import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { Combobox, useComboboxModel, useComboboxInput, useComboboxLoader, } from '@workday/canvas-kit-react/combobox';
+import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
+import { StyledMenuItem } from '@workday/canvas-kit-react/menu';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { CountBadge } from '@workday/canvas-kit-react/badge';
+const tasks = ['Request Time Off', 'Create Expense Report', 'Change Benefits'];
+const styleOverrides = {
+    headerWrapper: createStyles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        boxSizing: 'border-box',
+        ...system.type.subtext.large,
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+        backgroundColor: system.color.bg.default,
+        padding: system.space.x1,
+    }),
+    flexItems: createStyles({
+        gap: system.space.x4,
+        alignItems: 'center',
+        marginX: system.space.x3,
+    }),
+    inputGroupInner: createStyles({
+        marginLeft: '1rem',
+        width: px2rem(20),
+        transition: 'opacity 100ms ease',
+    }),
+    comboboxContainer: createStyles({
+        margin: 'auto',
+        width: '100%',
+        maxWidth: calc.multiply(system.space.x20, 6),
+    }),
+    comboboxInput: createStyles({
+        borderRadius: px2rem(1000),
+        width: '20rem',
+    }),
+    comboboxMenuList: createStyles({
+        maxHeight: px2rem(200),
+    }),
+    menuButtonStyles: createStyles({
+        textDecoration: 'none',
+        color: system.color.fg.strong,
+    }),
+    notificationContainerStyles: createStyles({
+        boxSizing: 'border-box',
+        position: 'relative',
+    }),
+    countBadgeStyles: createStyles({
+        boxSizing: 'border-box',
+        position: 'absolute',
+        top: calc.negate(system.space.x1),
+        insetInlineEnd: calc.negate(system.space.x1),
+    }),
+    actionButtonStyles: createStyles({
+        gap: system.space.x4,
+        margin: system.space.x4,
+    }),
+};
+const useAutocompleteInput = composeHooks(createElemPropsHook(useComboboxModel)(model => {
+    return {
+        onKeyPress(event) {
+            model.events.show(event);
+        },
+    };
+}), useComboboxInput);
+const AutoCompleteInput = createSubcomponent(TextInput)({
+    modelHook: useComboboxModel,
+    elemPropsHook: useAutocompleteInput,
+})((elemProps, Element) => {
+    return _jsx(Combobox.Input, { as: Element, ...elemProps });
+});
+export const Basic = () => {
+    const [notifications, setNotifications] = React.useState(0);
+    function handleAdd() {
+        setNotifications(prev => prev + 1);
+    }
+    function handleClear() {
+        setNotifications(0);
+    }
+    return (_jsxs("header", { children: [_jsx(GlobalHeader, { notifications: notifications }), _jsxs(Flex, { cs: styleOverrides.actionButtonStyles, children: [_jsx(SecondaryButton, { onClick: handleAdd, children: "Add notification" }), _jsx(TertiaryButton, { onClick: handleClear, children: "Clear" })] })] }));
+};
+export const GlobalHeader = createComponent('div')({
+    displayName: 'GlobalHeader',
+    Component: ({ notifications, ...props }) => (_jsxs("div", { className: styleOverrides.headerWrapper, children: [_jsxs(Flex, { cs: styleOverrides.flexItems, children: [_jsx(Tooltip, { title: "Global Navigation", type: "describe", children: _jsx(TertiaryButton, { icon: justifyIcon, cs: styleOverrides.menuButtonStyles, children: "MENU" }) }), _jsx(Tooltip, { title: "Workday Home", children: _jsx(TertiaryButton, { children: _jsx("img", { src: "https://design.workday.com/images/ck-dub-logo-blue.svg", alt: "" }) }) })] }), _jsx(Flex, { cs: styleOverrides.flexItems, children: _jsx(Autocomplete, { "aria-label": "Search Workday" }) }), _jsxs(Flex, { cs: styleOverrides.flexItems, children: [_jsx(Tooltip, { title: "Assistant", children: _jsx(TertiaryButton, { icon: assistantIcon }) }), _jsx(NotificationLiveBadge, { cnt: notifications }), _jsx(Tooltip, { title: "My Tasks", children: _jsx(TertiaryButton, { icon: inboxIcon }) }), _jsx(Tooltip, { title: "Profile", children: _jsx(Avatar, { name: "Logan McNeil", isDecorative: true }) })] })] })),
+});
+const Autocomplete = createComponent('div')({
+    displayName: 'Autocomplete',
+    Component: props => {
+        const [searchText, setSearchText] = React.useState('');
+        function handleChange(e) {
+            setSearchText(e.target.value);
+        }
+        const { model, loader } = useComboboxLoader({
+            // You can start with any number that makes sense.
+            total: 0,
+            // Pick whatever number makes sense for your API
+            pageSize: 20,
+            // A load function that will be called by the loader. You must return a promise that returns
+            // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
+            async load({ pageNumber, pageSize, filter }) {
+                return new Promise(resolve => {
+                    // simulate a server response by resolving after a period of time
+                    setTimeout(() => {
+                        // simulate paging and filtering based on pre-computed items
+                        const start = (pageNumber - 1) * pageSize;
+                        const end = start + pageSize;
+                        const filteredTasks = tasks.filter(i => {
+                            if (searchText.trim() === '' || typeof searchText !== 'string') {
+                                return true;
+                            }
+                            return i.toLowerCase().includes(searchText.trim().toLowerCase());
+                        });
+                        const total = filteredTasks.length;
+                        const items = filteredTasks.slice(start, end);
+                        resolve({
+                            items,
+                            total,
+                        });
+                    }, 300);
+                });
+            },
+            onShow() {
+                // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
+                // visible
+                loader.load();
+            },
+        }, useComboboxModel);
+        return (_jsxs(Combobox, { model: model, children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { cs: styleOverrides.inputGroupInner, children: _jsx(SystemIcon, { icon: searchIcon }) }), _jsx(InputGroup.Input, { as: AutoCompleteInput, cs: styleOverrides.comboboxInput, onChange: handleChange, value: searchText, ...props })] }), _jsx(Combobox.Menu.Popper, { children: _jsx(Combobox.Menu.Card, { children: model.state.items.length === 0 ? (_jsx(StyledMenuItem, { as: "span", children: "No Results Found" })) : (model.state.items.length > 0 && (_jsx(Combobox.Menu.List, { maxHeight: px2rem(200), children: item => _jsx(Combobox.Menu.Item, { children: item }) }))) }) })] }));
+    },
+});
+const NotificationLiveBadge = createComponent('span')({
+    displayName: 'NotificationLiveBadge',
+    Component: ({ cnt = 0, ...props }) => {
+        const btnId = useUniqueId();
+        const badgeId = useUniqueId();
+        return (_jsxs(Flex, { cs: styleOverrides.notificationContainerStyles, children: [_jsx(Tooltip, { title: "Notifications", children: _jsx(TertiaryButton, { id: btnId, icon: notificationsIcon, "aria-describedby": cnt > 0 ? badgeId : undefined, ...props }) }), _jsx(AriaLiveRegion, { "aria-labelledby": btnId, children: cnt > 0 && (_jsxs(_Fragment, { children: [_jsx(CountBadge, { id: badgeId, count: cnt, limit: 100, cs: styleOverrides.countBadgeStyles }), _jsx(AccessibleHide, { children: "New" })] })) })] }));
+    },
+});

package/dist/es6/mdx/accessibility/examples/PageStructure/BreadcrumbNavRegion.d.ts

@@ -0,0 +1,2 @@
+export declare const BreadcrumbNavRegion: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BreadcrumbNavRegion.d.ts.map

package/dist/es6/mdx/accessibility/examples/PageStructure/BreadcrumbNavRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavRegion.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/PageStructure/BreadcrumbNavRegion.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,mBAAmB,+CAe/B,CAAC"}

package/dist/es6/mdx/accessibility/examples/PageStructure/BreadcrumbNavRegion.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumbs } from '@workday/canvas-kit-react/breadcrumbs';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const regionStyles = createStyles({
+    border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
+    borderRadius: system.shape.x2,
+    paddingLeft: system.space.x4,
+});
+export const BreadcrumbNavRegion = () => {
+    return (_jsx(Breadcrumbs, { className: regionStyles, "aria-label": "Breadcrumbs", children: _jsxs(Breadcrumbs.List, { children: [_jsx(Breadcrumbs.Item, { children: _jsx(Breadcrumbs.Link, { href: "#", children: "Home" }) }), _jsx(Breadcrumbs.Item, { children: _jsx(Breadcrumbs.Link, { href: "#", children: "Menus" }) }), _jsx(Breadcrumbs.CurrentItem, { children: "Dinner" })] }) }));
+};

package/dist/es6/mdx/accessibility/examples/PageStructure/FullPageDemo.d.ts

@@ -0,0 +1,2 @@
+export declare const FullPageDemo: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FullPageDemo.d.ts.map

package/dist/es6/mdx/accessibility/examples/PageStructure/FullPageDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullPageDemo.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/PageStructure/FullPageDemo.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,YAAY,+CA8CxB,CAAC"}

package/dist/es6/mdx/accessibility/examples/PageStructure/FullPageDemo.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Flex, Grid } from '@workday/canvas-kit-react/layout';
+import { Heading } from '@workday/canvas-kit-react/text';
+import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { GlobalHeader } from '../GlobalHeader';
+import { SideBarContent } from '../SidePanelWithNavigation';
+import { BreadcrumbNavRegion } from './BreadcrumbNavRegion';
+const gridLayoutStyles = createStyles({
+    gridTemplateAreas: `'Header Header Header Header'
+    'SideBar BodyContent BodyContent BodyContent'
+    'Footer Footer Footer Footer'`,
+    gridGap: system.space.x4,
+    gridTemplateColumns: '1fr 9fr',
+    gridTemplateRows: `auto ${px2rem(800)} auto`,
+});
+const regionStyles = createStyles({
+    border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
+    borderRadius: system.shape.x2,
+    padding: system.space.x4,
+});
+const verticalFlexStyles = createStyles({
+    flexDirection: 'column',
+    gap: system.space.x4,
+});
+const headingStyles = createStyles({
+    margin: system.space.zero,
+});
+export const FullPageDemo = () => {
+    const [notifications, setNotifications] = React.useState(0);
+    function handleAdd() {
+        setNotifications(prev => prev + 1);
+    }
+    function handleClear() {
+        setNotifications(0);
+    }
+    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", gridArea: "Header", cs: regionStyles, children: _jsx(GlobalHeader, { notifications: notifications }) }), _jsx(Grid, { as: "nav", gridArea: "SideBar", cs: regionStyles, children: _jsx(Flex, { cs: verticalFlexStyles, children: _jsx(SideBarContent, {}) }) }), _jsx(Grid, { as: "main", gridArea: "BodyContent", cs: regionStyles, children: _jsxs(Flex, { cs: verticalFlexStyles, children: [_jsx(BreadcrumbNavRegion, {}), _jsxs(Flex, { gap: system.space.x4, children: [_jsx(SecondaryButton, { onClick: handleAdd, children: "Add notification" }), _jsx(TertiaryButton, { onClick: handleClear, children: "Clear" })] }), _jsx(Heading, { as: "h1", size: "large", cs: headingStyles, children: "Heading Level 1" }), _jsx(Heading, { size: "medium", cs: headingStyles, children: "Heading Level 2" }), _jsx(Heading, { as: "h3", size: "small", cs: headingStyles, children: "Heading Level 3" })] }) }), _jsx(Grid, { as: "footer", gridArea: "Footer", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
+};

package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.d.ts

@@ -0,0 +1,2 @@
+export declare const LandmarkRegaions: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LandmarkRegions.d.ts.map

package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LandmarkRegions.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/PageStructure/LandmarkRegions.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,gBAAgB,+CAyB5B,CAAC"}

package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { Heading } from '@workday/canvas-kit-react/text';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const gridLayoutStyles = createStyles({
+    gridTemplateAreas: "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
+    gridGap: system.space.x4,
+    gridTemplateColumns: '3fr 9fr',
+    gridTemplateRows: `auto ${px2rem(300)} auto`,
+});
+const regionStyles = createStyles({
+    border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
+    borderRadius: system.shape.x2,
+    padding: system.space.x4,
+});
+const headingStyles = createStyles({
+    margin: system.space.zero,
+});
+export const LandmarkRegaions = () => {
+    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", gridArea: "Header", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Header" }) }), _jsx(Grid, { as: "nav", gridArea: "SideBar", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Navigation" }) }), _jsx(Grid, { as: "main", gridArea: "BodyContent", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Main Content" }) }), _jsx(Grid, { as: "footer", gridArea: "Footer", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
+};

package/dist/es6/mdx/accessibility/examples/SidePanelWithNavigation.d.ts

@@ -0,0 +1,3 @@
+export declare const SideBarContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithNavigation: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SidePanelWithNavigation.d.ts.map

package/dist/es6/mdx/accessibility/examples/SidePanelWithNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelWithNavigation.d.ts","sourceRoot":"","sources":["../../../../../mdx/accessibility/examples/SidePanelWithNavigation.tsx"],"names":[],"mappings":"AA6KA,eAAO,MAAM,cAAc,+CAiB1B,CAAC;AAEF,eAAO,MAAM,cAAc,+CAM1B,CAAC"}