@workday/canvas-kit-docs 16.0.0-alpha.0499-next.0 → 16.0.0

package/dist/es6/mdx/accessibility/examples/Popups/InlinePortalPopup.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { PopupStack } from '@workday/canvas-kit-popup-stack';
-import { DeleteButton } from '@workday/canvas-kit-react/button';
-import { changeFocus, useUniqueId } from '@workday/canvas-kit-react/common';
-import { Box, Flex } from '@workday/canvas-kit-react/layout';
-import { Popup, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
-const cardStyles = createStyles({
-    width: px2rem(320),
-});
-const flexStyles = createStyles({
-    gap: system.gap.md,
-    padding: system.padding.xs,
-});
-const layoutStyles = createStyles({
-    gap: system.gap.md,
-    alignItems: 'flex-start',
-    flexDirection: 'column',
-});
-const bodyStyles = createStyles({
-    marginBlock: '0',
-});
-/**
- * Portals popup content into a sentinel div after the trigger (via PopupStack.pushStackContext)
- * so DOM reading order matches page context. Uses a two-phase open so pushStackContext runs
- * before Popper mounts and registers with the stack.
- */
-export const InlinePortalPopup = () => {
-    const messageId = useUniqueId();
-    const sentinelRef = React.useRef(null);
-    const initialFocusRef = React.useRef(null);
-    const model = usePopupModel({ initialFocusRef });
-    const visible = model.state.visibility !== 'hidden';
-    const [portalReady, setPortalReady] = React.useState(false);
-    useCloseOnOutsideClick(model);
-    useCloseOnEscape(model);
-    useReturnFocus(model);
-    // Defer initial focus until Popper content is mounted. useInitialFocus runs when visible while
-    // stackRef can still point at an empty sentinel (second open) and throws.
-    React.useEffect(() => {
-        if (!visible || !portalReady) {
-            return;
-        }
-        const el = initialFocusRef.current;
-        if (!el) {
-            return;
-        }
-        requestAnimationFrame(() => {
-            changeFocus(el);
-        });
-    }, [visible, portalReady]);
-    React.useLayoutEffect(() => {
-        if (visible && sentinelRef.current && !portalReady) {
-            PopupStack.pushStackContext(sentinelRef.current);
-            setPortalReady(true);
-        }
-        if (!visible && portalReady) {
-            PopupStack.popStackContext(sentinelRef.current);
-            setPortalReady(false);
-        }
-    }, [visible, portalReady]);
-    return (_jsxs(Flex, { cs: layoutStyles, children: [_jsx(Flex, { children: _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx("div", { ref: sentinelRef }), visible && portalReady ? (_jsx(Popup.Popper, { placement: "top", children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" }), _jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" })] })] }) })) : null] }) }), _jsx("p", { children: "This content should come after the popup in the reading order. When someone uses a screen reader or moves through the page with tabbing, they will read or reach this content only after the popup content is shown. This helps keep the page easy to follow and makes sure that the popup is announced before any information that comes next." })] }));
-};

package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.d.ts

@@ -1,7 +0,0 @@
-/**
- * Default portal to body; sibling div with aria-owns references the portaled stack container
- * so screen readers that support aria-owns can present content in logical order.
- * useInitialFocus announces the popup in screen readers; useFocusRedirect manages Tab in/out.
- */
-export declare const PopupAriaOwns: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PopupAriaOwns.d.ts.map

package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopupAriaOwns.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Popups/PopupAriaOwns.tsx"],"names":[],"mappings":"AAoCA;;;;GAIG;AACH,eAAO,MAAM,aAAa,+CAkDzB,CAAC"}

package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { DeleteButton } from '@workday/canvas-kit-react/button';
-import { useUniqueId } from '@workday/canvas-kit-react/common';
-import { Box, Flex } from '@workday/canvas-kit-react/layout';
-import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useFocusRedirect, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
-const cardStyles = createStyles({
-    width: px2rem(400),
-});
-const bodyStyles = createStyles({
-    marginBlock: '0',
-});
-const flexStyles = createStyles({
-    gap: system.gap.md,
-    padding: system.padding.xs,
-});
-const layoutStyles = createStyles({
-    gap: system.gap.md,
-    alignItems: 'flex-start',
-    flexDirection: 'column',
-});
-/**
- * Default portal to body; sibling div with aria-owns references the portaled stack container
- * so screen readers that support aria-owns can present content in logical order.
- * useInitialFocus announces the popup in screen readers; useFocusRedirect manages Tab in/out.
- */
-export const PopupAriaOwns = () => {
-    const initialFocusRef = React.useRef(null);
-    const model = usePopupModel({ initialFocusRef });
-    useCloseOnOutsideClick(model);
-    useCloseOnEscape(model);
-    useInitialFocus(model);
-    useReturnFocus(model);
-    useFocusRedirect(model);
-    const messageId = useUniqueId();
-    const popupId = useUniqueId();
-    const visible = model.state.visibility !== 'hidden';
-    React.useLayoutEffect(() => {
-        if (visible && model.state.stackRef.current) {
-            model.state.stackRef.current.setAttribute('id', popupId);
-        }
-    }, [model.state.stackRef, visible, popupId]);
-    return (_jsxs(Flex, { cs: layoutStyles, children: [_jsx(Flex, { children: _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx("div", { "aria-owns": popupId, style: { position: 'absolute' } }), _jsx(Popup.Popper, { children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.CloseIcon, { "aria-label": "Close" }), _jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" }), _jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" })] })] }) })] }) }), _jsx("p", { children: "This content should come after the popup in the reading order. When someone uses a screen reader or moves through the page with tabbing, they will read or reach this content only after the popup content is shown. This helps keep the page easy to follow and makes sure that the popup is announced before any information that comes next." })] }));
-};

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

@@ -1,3 +0,0 @@
-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

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

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

@@ -1,100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { Expandable } from '@workday/canvas-kit-react/expandable';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { Flex } from '@workday/canvas-kit-react/layout';
-import { Menu } from '@workday/canvas-kit-react/menu';
-import { Heading, Subtext } from '@workday/canvas-kit-react/text';
-import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
-import { birthdayIcon, checkIcon, ribbonIcon, } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
-const data = {
-    bestsellers: {
-        icon: ribbonIcon,
-        title: 'Best Sellers',
-        subtitle: 'Award winning sweet treats',
-        items: ['Mango Coco Sago', 'Matcha Creme Pie', 'Key Lime Cheesecake', 'Tiramisu'],
-    },
-    cakes: {
-        icon: birthdayIcon,
-        title: 'Custom Cakes',
-        subtitle: 'To celebrate your life milestones',
-        items: ['Anniversary', 'Birthday', 'Graduation', 'Wedding'],
-    },
-};
-const stylesOverride = {
-    navContainer: createStyles({
-        height: px2rem(800),
-        positio: 'relative',
-        backgroundColor: system.color.bg.alt.default,
-    }),
-    heading: createStyles({
-        margin: '0',
-    }),
-    toggleBtn: createStyles({
-        top: '0',
-    }),
-    accordionContainer: createStyles({
-        listStyle: 'none',
-        flexDirection: 'column',
-        rowGap: '0',
-        paddingInlineStart: '0',
-    }),
-    accordionIcon: createStyles({
-        verticalAlign: 'middle',
-        padding: system.padding.xxs,
-    }),
-    accordionSubText: createStyles({
-        margin: '0',
-    }),
-    listContainer: createStyles({
-        listStyle: 'none',
-        padding: system.padding.md,
-    }),
-    compactListContainer: createStyles({
-        listStyle: 'none',
-        padding: system.padding.md,
-        flexDirection: 'column',
-        marginBlockStart: system.gap.xl,
-    }),
-    links: createStyles({
-        textDecoration: 'none',
-        padding: system.padding.md,
-    }),
-    linkCheck: createStyles({
-        marginInlineStart: 'auto',
-    }),
-    flyOut: createStyles({
-        marginBlockStart: '8rem',
-    }),
-};
-const Accordion = ({ config }) => {
-    const [currentPage, setCurrentPage] = React.useState('');
-    const handleClick = (e) => {
-        e.preventDefault();
-        const target = e.target;
-        setCurrentPage(target.textContent || '');
-    };
-    return (_jsxs(Expandable, { children: [_jsxs(Expandable.Target, { children: [_jsx(SystemIcon, { cs: stylesOverride.accordionIcon, icon: config.icon }), _jsxs(Expandable.Title, { children: [config.title, _jsx(Subtext, { size: "medium", cs: stylesOverride.accordionSubText, children: config.subtitle })] }), _jsx(Expandable.Icon, { iconPosition: "end" })] }), _jsx(Expandable.Content, { as: "ul", cs: stylesOverride.listContainer, children: config.items.map((i) => {
-                    return (_jsx("li", { children: _jsxs(Flex, { as: "a", href: "#", "aria-current": i === currentPage ? 'true' : undefined, className: stylesOverride.links, onClick: handleClick, children: [i, i === currentPage && _jsx(SystemIcon, { icon: checkIcon, cs: stylesOverride.linkCheck })] }) }, i));
-                }) })] }));
-};
-const IconButtonMenu = ({ config }) => {
-    return (_jsxs(Menu, { children: [_jsx(Tooltip, { title: config.title, placement: "right", children: _jsx(Menu.Target, { as: TertiaryButton, children: _jsx(SystemIcon, { icon: config.icon }) }) }), _jsx(Menu.Popper, { placement: "right", children: _jsx(Menu.Card, { cs: stylesOverride.flyOut, children: _jsx(Menu.List, { children: config.items.map((i) => (_jsx(Menu.Item, { children: i }, i))) }) }) })] }));
-};
-const CompactView = () => {
-    return (_jsxs(Flex, { as: "ul", cs: stylesOverride.compactListContainer, children: [_jsx(Flex.Item, { as: "li", children: _jsx(IconButtonMenu, { config: data.bestsellers }) }), _jsx(Flex.Item, { as: "li", children: _jsx(IconButtonMenu, { config: data.cakes }) })] }));
-};
-const ExpandedView = () => {
-    return (_jsxs(Flex, { as: "ul", cs: stylesOverride.accordionContainer, children: [_jsx(Flex.Item, { as: "li", children: _jsx(Accordion, { config: data.bestsellers }) }), _jsx(Flex.Item, { as: "li", children: _jsx(Accordion, { config: data.cakes }) })] }));
-};
-export const SideBarContent = () => {
-    const { expanded, panelProps, labelProps, controlProps } = useSidePanel();
-    return (_jsxs(SidePanel, { as: "div", touched: panelProps.touched, expanded: panelProps.expanded, children: [_jsx(Heading, { size: "small", cs: stylesOverride.heading, ...labelProps, hidden: !expanded ? true : undefined, children: "Cake or Death Bakery" }), _jsx(SidePanel.ToggleButton, { cs: stylesOverride.toggleBtn, ...controlProps }), expanded ? _jsx(ExpandedView, {}) : _jsx(CompactView, {})] }));
-};
-export const WithNavigation = () => {
-    return (_jsx(Flex, { as: "nav", cs: stylesOverride.navContainer, children: _jsx(SideBarContent, {}) }));
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"SidePanelWithOverlay.d.ts","sourceRoot":"","sources":["../../../../../mdx/accessibility/examples/SidePanelWithOverlay.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,WAAW,+CAgBvB,CAAC"}

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
-import { Box, Flex } 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 stylesOverride = {
-    panelContainer: createStyles({
-        height: px2rem(320),
-        backgroundColor: system.color.surface.alt.default,
-        position: 'relative',
-    }),
-    panelContent: createStyles({
-        alignItems: 'center',
-        padding: system.padding.md,
-    }),
-    panel: createStyles({
-        zIndex: 1,
-    }),
-    overlay: createStyles({
-        position: 'absolute',
-        background: system.color.surface.overlay.scrim,
-        height: '100%',
-        width: '100%',
-    }),
-};
-export const WithOverlay = () => {
-    const { expanded, panelProps, labelProps, controlProps } = useSidePanel();
-    return (_jsxs(Flex, { cs: stylesOverride.panelContainer, children: [_jsx(SidePanel, { className: stylesOverride.panel, ...panelProps, variant: "alternate", children: _jsxs(Flex, { cs: stylesOverride.panelContainer, children: [_jsx(Heading, { size: "small", ...labelProps, hidden: !expanded ? true : undefined, children: "Alternate Panel" }), _jsx(SidePanel.ToggleButton, { ...controlProps })] }) }), expanded && _jsx(Box, { cs: stylesOverride.overlay })] }));
-};

package/dist/es6/mdx/accessibility/examples/Table/WithColumnHeaderFilters.d.ts

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

package/dist/es6/mdx/accessibility/examples/Table/WithColumnHeaderFilters.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WithColumnHeaderFilters.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithColumnHeaderFilters.tsx"],"names":[],"mappings":"AAsJA,eAAO,MAAM,uBAAuB,+CAyDnC,CAAC"}

package/dist/es6/mdx/accessibility/examples/Table/WithColumnHeaderFilters.js

@@ -1,101 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { PrimaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
-import { AriaLiveRegion, createComponent, useUniqueId } from '@workday/canvas-kit-react/common';
-import { FormField } from '@workday/canvas-kit-react/form-field';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { Flex } from '@workday/canvas-kit-react/layout';
-import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useFocusRedirect, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
-import { Table } from '@workday/canvas-kit-react/table';
-import { Text } from '@workday/canvas-kit-react/text';
-import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
-import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { createStyles } from '@workday/canvas-kit-styling';
-import { filterIcon, searchIcon } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
-const countryData = [
-    { country: 'Australia', capital: 'Canberra', population: 25690000 },
-    { country: 'Bahamas', capital: 'Nassau', population: 407906 },
-    { country: 'Canada', capital: 'Ottawa', population: 38250000 },
-    { country: 'Fiji', capital: 'Suva', population: 924610 },
-    { country: 'Ghana', capital: 'Accra', population: 32830000 },
-    { country: 'Hong Kong', capital: 'City of Victoria', population: 7413000 },
-    { country: 'India', capital: 'New Delhi', population: 1408000000 },
-    { country: 'Ireland', capital: 'Dublin', population: 5033000 },
-    { country: 'Jamaica', capital: 'Kingston', population: 2828000 },
-    { country: 'Kenya', capital: 'Nairobi', population: 53010000 },
-    { country: 'Micronesia', capital: 'Palikir', population: 113131 },
-    { country: 'New Zealand', capital: 'Wellington', population: 5123000 },
-    { country: 'Philippines', capital: 'Manila', population: 113900000 },
-    { country: 'Puerto Rico', capital: 'San Juan', population: 3264000 },
-    { country: 'Samoa', capital: 'Apia', population: 218764 },
-    { country: 'Singapore', capital: 'Singapore', population: 5454000 },
-    { country: 'Tanzania', capital: 'Dodoma', population: 63590000 },
-    { country: 'United Kingdom', capital: 'London', population: 67330000 },
-    { country: 'United States', capital: 'Washington, D.C.', population: 331900000 },
-    { country: 'Zimbabwe', capital: 'Harare', population: 15990000 },
-];
-const textStyles = createStyles({
-    paddingInlineStart: system.padding.md,
-});
-const FilterableColumnHeader = createComponent('th')({
-    displayName: 'FilterableColumnHeader',
-    Component: ({ label, onFilter }, ref) => {
-        const [inputVal, setInputVal] = React.useState('');
-        const targetId = useUniqueId();
-        const popupId = useUniqueId();
-        const initialFocusRef = React.useRef(null);
-        const filterPopupModel = usePopupModel({
-            initialFocusRef,
-        });
-        useCloseOnOutsideClick(filterPopupModel);
-        useCloseOnEscape(filterPopupModel);
-        useInitialFocus(filterPopupModel);
-        useFocusRedirect(filterPopupModel);
-        useReturnFocus(filterPopupModel);
-        function handleChange(e) {
-            const newVal = e.target.value;
-            setInputVal(newVal);
-            onFilter({ filterText: newVal, column: label.toLowerCase() });
-        }
-        return (_jsx(Table.Header, { scope: "col", "aria-owns": targetId + ' ' + popupId, children: _jsxs(Popup, { model: filterPopupModel, children: [_jsx(Tooltip, { title: `Filter${inputVal !== '' ? `ed: "${inputVal}"` : ''}`, type: "description", children: _jsx(Popup.Target, { as: TertiaryButton, id: targetId, icon: inputVal === '' ? searchIcon : filterIcon, iconPosition: "end", children: label }) }), _jsx(Popup.Popper, { children: _jsxs(Popup.Card, { id: popupId, children: [_jsx(Popup.Heading, { children: "Filter" }), _jsx(Popup.Body, { children: _jsxs(FormField, { children: [_jsx(FormField.Label, { children: label }), _jsxs(FormField.Input, { as: InputGroup, children: [_jsx(InputGroup.InnerStart, { children: _jsx(SystemIcon, { icon: searchIcon }) }), _jsx(InputGroup.Input, { as: TextInput, type: "search", ref: initialFocusRef, onChange: handleChange, value: inputVal })] })] }) }), _jsx(Flex, { children: _jsx(Popup.CloseButton, { as: PrimaryButton, children: "Done" }) })] }) })] }) }));
-    },
-});
-function filterTableData(data, filters) {
-    return data.filter(item => {
-        for (const key in filters) {
-            if (filters.hasOwnProperty(key) && filters[key]) {
-                const filterText = filters[key].toLowerCase();
-                const itemValue = String(item[key]).toLowerCase();
-                if (!itemValue.includes(filterText)) {
-                    return false;
-                }
-            }
-        }
-        return true;
-    });
-}
-export const FilterableColumnHeaders = () => {
-    const [filteredData, setFilteredData] = React.useState(countryData);
-    const [colFilters, setColFilters] = React.useState({
-        country: '',
-        capital: '',
-        population: '',
-    });
-    React.useEffect(() => {
-        setFilteredData(filterTableData(countryData, colFilters));
-    }, [colFilters]);
-    let typingDelay;
-    function handleColFilters({ filterText, column }) {
-        clearTimeout(typingDelay);
-        typingDelay = setTimeout(() => {
-            setColFilters(prev => {
-                const newState = { ...prev, [column]: filterText };
-                return newState;
-            });
-        }, 400);
-    }
-    return (_jsxs(Table, { cs: { maxHeight: '40rem' }, children: [_jsxs(Table.Caption, { children: ["Population Listed by Country (2021)", _jsxs(AriaLiveRegion, { cs: textStyles, children: [filteredData.length, " of ", countryData.length, " items"] })] }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(FilterableColumnHeader, { label: "Country", onFilter: handleColFilters }), _jsx(FilterableColumnHeader, { label: "Capital", onFilter: handleColFilters }), _jsx(FilterableColumnHeader, { label: "Population", onFilter: handleColFilters })] }) }), _jsx(Table.Body, { children: filteredData.map(item => {
-                    return (_jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "row", children: _jsx(Text, { cs: textStyles, children: item.country }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.capital }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.population.toLocaleString() }) })] }, item.country));
-                }) })] }));
-};

package/dist/es6/mdx/accessibility/examples/Table/WithExpandableRows.d.ts

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

package/dist/es6/mdx/accessibility/examples/Table/WithExpandableRows.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WithExpandableRows.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithExpandableRows.tsx"],"names":[],"mappings":"AA8LA,eAAO,MAAM,cAAc,+CAwB1B,CAAC"}

package/dist/es6/mdx/accessibility/examples/Table/WithExpandableRows.js

@@ -1,115 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { generateUniqueId } from '@workday/canvas-kit-react/common';
-import { Table } from '@workday/canvas-kit-react/table';
-import { Heading, Subtext } from '@workday/canvas-kit-react/text';
-import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { createStyles } from '@workday/canvas-kit-styling';
-import { chevronDownSmallIcon, chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
-const headingID = generateUniqueId();
-const autoData = [
-    {
-        id: generateUniqueId(),
-        brand: 'Porsche',
-        model: '992 911 GT3',
-        year: '2022',
-        price: 'Starts at $160,000',
-        engine: '4.0L Flat 6',
-        transmission: 'PDK or 7-Speed Manual',
-        horsepower: '502hp',
-        torque: '346 lb-ft',
-        curbWeight: '3,164 lbs',
-        orderStatus: 'Order Placed',
-    },
-    {
-        id: generateUniqueId(),
-        brand: 'BMW',
-        model: 'M5 Competition',
-        year: '2018',
-        price: 'Starts at $105,000',
-        engine: 'Twin-Turbo 4.4L V8',
-        transmission: 'Automatic',
-        horsepower: '627hp',
-        torque: '553 lb-ft',
-        curbWeight: '4,345 lbs',
-        orderStatus: 'Order Fulfilled',
-    },
-    {
-        id: generateUniqueId(),
-        brand: 'Audi',
-        model: 'R8',
-        year: '2022',
-        price: 'Starts at $148,000',
-        engine: '5.2L V10',
-        transmission: 'Automatic',
-        horsepower: '562hp',
-        torque: '408 lb-ft',
-        curbWeight: '3,594 lbs',
-        orderStatus: 'Order Fulfilled',
-    },
-    {
-        id: generateUniqueId(),
-        brand: 'Lotus',
-        model: 'Emira',
-        year: '2023',
-        price: 'Starts at $78,000',
-        engine: 'Supercharged 3.5L V6',
-        transmission: 'Automatic or 6-Speed Manual',
-        horsepower: '400hp',
-        torque: '317 lb-ft',
-        curbWeight: '3520 lbs',
-        orderStatus: 'Shipped: In Transit',
-    },
-    {
-        id: generateUniqueId(),
-        brand: 'Toyota',
-        model: 'Supra',
-        year: '1998',
-        price: '$40,000 - $80,000',
-        engine: '3.0L Inline 6',
-        transmission: 'Automatic or 6-Speed Manual',
-        horsepower: '320hp',
-        torque: '315 lb-ft',
-        curbWeight: '3,599 lbs',
-        orderStatus: 'Delivered',
-    },
-    {
-        id: generateUniqueId(),
-        brand: 'Nissan',
-        model: 'Skyline GT-R',
-        year: '1994',
-        price: '$45,000 - $90,000',
-        engine: '2.6L Twin-Turbo Inline 6',
-        transmission: '5-Speed Manual',
-        horsepower: '276hp',
-        torque: '260 lb-ft',
-        curbWeight: '3,153 lbs',
-        orderStatus: 'Delivered',
-    },
-];
-const expandableSectionStyles = createStyles({
-    alignItems: 'flex-start',
-    display: 'flex',
-    gap: system.gap.md,
-    padding: system.padding.xxl,
-});
-const expandableHeadingStyles = createStyles({
-    margin: 0,
-    fontWeight: system.fontWeight.bold,
-});
-const expandableListStyles = createStyles({
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-    gap: system.gap.sm,
-});
-function ExpandableRow({ data }) {
-    const [rowExpanded, setRowExpanded] = React.useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Table.Row, { cs: { gridTemplateColumns: '4rem repeat(4, 1fr)' }, children: [_jsx(Table.Cell, { children: _jsx(Tooltip, { title: `${data.brand} ${data.model}`, children: _jsx(TertiaryButton, { size: "small", icon: rowExpanded ? chevronDownSmallIcon : chevronRightSmallIcon, "aria-expanded": rowExpanded, onClick: () => setRowExpanded(!rowExpanded) }) }) }), _jsx(Table.Header, { scope: "row", children: data.brand }), _jsx(Table.Cell, { children: data.model }), _jsx(Table.Cell, { children: data.year }), _jsx(Table.Cell, { children: data.price })] }), rowExpanded && (_jsx(Table.Row, { children: _jsxs(Table.Cell, { colSpan: 5, cs: expandableSectionStyles, children: [_jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Status" }), _jsx(StatusIndicator, { variant: "blue", children: data.orderStatus })] }), _jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Specifications" }), _jsxs("ul", { className: expandableListStyles, children: [_jsxs(Subtext, { as: "li", size: "large", children: ["Engine: ", data.engine] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Transmission: ", data.transmission] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Horsepower: ", data.horsepower] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Torque: ", data.torque] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Curb Weight: ", data.curbWeight] })] })] })] }) }))] }));
-}
-export const ExpandableRows = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Showroom Inventory" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { cs: { gridTemplateColumns: '4rem repeat(4, 1fr)' }, children: [_jsx(Table.Cell, {}), _jsx(Table.Header, { scope: "col", children: "Make" }), _jsx(Table.Header, { scope: "col", children: "Model" }), _jsx(Table.Header, { scope: "col", children: "Year" }), _jsx(Table.Header, { scope: "col", children: "Price" })] }) }), _jsx(Table.Body, { children: autoData.map(item => (_jsx(ExpandableRow, { data: item }, item.id))) })] })] }));
-};

package/dist/es6/mdx/accessibility/examples/Table/WithFormFields.d.ts

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

package/dist/es6/mdx/accessibility/examples/Table/WithFormFields.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WithFormFields.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithFormFields.tsx"],"names":[],"mappings":"AAyHA,eAAO,MAAM,cAAc,+CAiC1B,CAAC"}

package/dist/es6/mdx/accessibility/examples/Table/WithFormFields.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { Checkbox } from '@workday/canvas-kit-react/checkbox';
-import { useUniqueId } from '@workday/canvas-kit-react/common';
-import { Table } from '@workday/canvas-kit-react/table';
-import { TextInput } from '@workday/canvas-kit-react/text-input';
-import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { createStyles } from '@workday/canvas-kit-styling';
-import { trashIcon } from '@workday/canvas-system-icons-web';
-import { system } from '@workday/canvas-tokens-web';
-const rowStyles = createStyles({
-    gridTemplateColumns: '24rem 12rem 7rem 7rem',
-});
-const centerStyles = createStyles({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-});
-const currencyInputContainer = createStyles({
-    position: 'relative',
-    display: 'inline-block',
-});
-const dollarPrefix = createStyles({
-    position: 'absolute',
-    left: system.gap.sm,
-    top: '50%',
-    transform: 'translateY(-50%)',
-    color: system.color.fg.default,
-    pointerEvents: 'none',
-    zIndex: 1,
-    ...system.type.subtext.lg,
-});
-const currencyInput = createStyles({
-    paddingInlineStart: system.padding.md, // Make room for dollar sign
-});
-const expensesData = [
-    'Rent',
-    'Groceries',
-    'Electricity bill',
-    'Internet service',
-    'Gasoline',
-    'Cell phone bill',
-    'Health insurance',
-    'Car payment',
-    'Student loan payment',
-    'Dining out',
-];
-const LineItem = ({ itemName, labelIds }) => {
-    const [name, setName] = React.useState(itemName);
-    const [amount, setAmount] = React.useState('');
-    function handleNameChange(e) {
-        setName(e.target.value);
-    }
-    function handleAmountChange(e) {
-        const value = e.target.value;
-        // For type="number", the browser handles most validation
-        // We just need to limit decimal places to 2 for currency
-        if (value.includes('.')) {
-            const parts = value.split('.');
-            if (parts[1] && parts[1].length > 2) {
-                // Limit to 2 decimal places
-                const limitedValue = parts[0] + '.' + parts[1].substring(0, 2);
-                setAmount(limitedValue);
-                return;
-            }
-        }
-        setAmount(value);
-    }
-    return (_jsxs(Table.Row, { cs: rowStyles, children: [_jsx(Table.Header, { scope: "row", children: _jsx(TextInput, { onChange: handleNameChange, value: name, "aria-labelledby": labelIds.name }) }), _jsx(Table.Cell, { children: _jsxs("div", { className: currencyInputContainer, children: [_jsx("span", { className: dollarPrefix, "aria-hidden": "true", children: "$" }), _jsx(TextInput, { type: "number", value: amount, onChange: handleAmountChange, placeholder: "0.00", min: "0", step: "0.01", width: "10.5rem", "aria-labelledby": labelIds.amount, cs: currencyInput })] }) }), _jsx(Table.Cell, { cs: centerStyles, children: _jsx(Checkbox, { "aria-labelledby": labelIds.recon }) }), _jsx(Table.Cell, { cs: centerStyles, children: _jsx(Tooltip, { title: "Delete", children: _jsx(TertiaryButton, { icon: trashIcon }) }) })] }));
-};
-export const WithFormFields = () => {
-    const colHeadIds = {
-        name: useUniqueId(),
-        amount: useUniqueId(),
-        recon: useUniqueId(),
-    };
-    return (_jsxs(Table, { children: [_jsx(Table.Caption, { children: "Budget Planning Tool" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { cs: rowStyles, children: [_jsxs(Table.Header, { scope: "col", id: colHeadIds.name, children: ["Expense Name", ' '] }), _jsxs(Table.Header, { scope: "col", id: colHeadIds.amount, children: ["Budgeted Amount (USD)", ' '] }), _jsx(Table.Header, { scope: "col", id: colHeadIds.recon, cs: centerStyles, children: "Reconciled" }), _jsxs(Table.Header, { scope: "col", cs: centerStyles, children: ["Actions", ' '] })] }) }), _jsx(Table.Body, { children: expensesData.map(i => (_jsx(LineItem, { itemName: i, labelIds: colHeadIds }))) })] }));
-};

package/dist/es6/mdx/accessibility/examples/Table/WithSelectableRows.d.ts

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

package/dist/es6/mdx/accessibility/examples/Table/WithSelectableRows.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WithSelectableRows.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithSelectableRows.tsx"],"names":[],"mappings":"AA0EA,eAAO,MAAM,cAAc,+CAiF1B,CAAC"}