@workday/canvas-kit-docs 14.0.1 → 14.0.3

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { system } from '@workday/canvas-tokens-web';
+import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { Heading, Subtext } from '@workday/canvas-kit-react/text';
+import { Expandable } from '@workday/canvas-kit-react/expandable';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Menu } from '@workday/canvas-kit-react/menu';
+import { birthdayIcon, checkIcon, ribbonIcon } from '@workday/canvas-system-icons-web';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+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: system.space.zero,
+    }),
+    toggleBtn: createStyles({
+        top: system.space.zero,
+    }),
+    accordionContainer: createStyles({
+        listStyle: 'none',
+        flexDirection: 'column',
+        rowGap: system.space.zero,
+        paddingInlineStart: system.space.zero,
+    }),
+    accordionIcon: createStyles({
+        verticalAlign: 'middle',
+        padding: system.space.x1,
+    }),
+    accordionSubText: createStyles({
+        margin: system.space.zero,
+    }),
+    listContainer: createStyles({
+        listStyle: 'none',
+        padding: system.space.x4,
+    }),
+    compactListContainer: createStyles({
+        listStyle: 'none',
+        padding: system.space.x4,
+        flexDirection: 'column',
+        marginTop: system.space.x8,
+    }),
+    links: createStyles({
+        textDecoration: 'none',
+        padding: system.space.x4,
+    }),
+    linkCheck: createStyles({
+        marginLeft: 'auto',
+    }),
+    flyOut: createStyles({
+        marginTop: '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

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

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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
+import { Flex, Box } 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.bg.alt.soft,
+        position: 'relative',
+    }),
+    panelContent: createStyles({
+        alignItems: 'center',
+        paddingY: system.space.x4,
+        paddingX: system.space.x4,
+    }),
+    panel: createStyles({
+        zIndex: 1,
+    }),
+    overlay: createStyles({
+        position: 'absolute',
+        background: system.color.bg.overlay,
+        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

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

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AriaLiveRegion, createComponent, useUniqueId } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { FormField } from '@workday/canvas-kit-react/form-field';
+import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
+import { Popup, usePopupModel, useCloseOnOutsideClick, useCloseOnEscape, useInitialFocus, useReturnFocus, useFocusRedirect, } from '@workday/canvas-kit-react/popup';
+import { PrimaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Table } from '@workday/canvas-kit-react/table';
+import { Text } from '@workday/canvas-kit-react/text';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { filterIcon, searchIcon } from '@workday/canvas-system-icons-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.space.x3,
+});
+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, { 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

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

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

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

@@ -0,0 +1,115 @@
+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 { Table } from '@workday/canvas-kit-react/table';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { generateUniqueId } from '@workday/canvas-kit-react/common';
+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.space.x4,
+    padding: system.space.x8,
+});
+const expandableHeadingStyles = createStyles({
+    margin: 0,
+    fontWeight: system.fontWeight.bold,
+});
+const expandableListStyles = createStyles({
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    gap: system.space.x2,
+});
+function ExpandableRow({ data }) {
+    const [rowExpanded, setRowExpanded] = React.useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs(Table.Row, { 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, { 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

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

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

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useUniqueId } from '@workday/canvas-kit-react/common';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { trashIcon } from '@workday/canvas-system-icons-web';
+import { TextInput } from '@workday/canvas-kit-react/text-input';
+import { Table } from '@workday/canvas-kit-react/table';
+import { Checkbox } from '@workday/canvas-kit-react/checkbox';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+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.space.x2,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    color: system.color.text.default,
+    pointerEvents: 'none',
+    zIndex: 1,
+    ...system.type.subtext.large,
+});
+const currencyInput = createStyles({
+    paddingLeft: system.space.x4, // 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

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

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

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Table } from '@workday/canvas-kit-react/table';
+import { Heading } from '@workday/canvas-kit-react/text';
+import { Checkbox } from '@workday/canvas-kit-react/checkbox';
+import { createComponent, generateUniqueId } from '@workday/canvas-kit-react/common';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { createStencil, createStyles } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const selectableRowStencil = createStencil({
+    base: {
+        gridTemplateColumns: '3.5rem repeat(2, 1fr)',
+        transition: 'background-color 200ms',
+    },
+    modifiers: {
+        isSelected: {
+            true: {
+                backgroundColor: system.color.bg.primary.soft,
+            },
+        },
+    },
+});
+const tableHeaderStyles = createStyles({
+    backgroundColor: system.color.bg.alt.soft,
+});
+const tableCellStyles = createStyles({
+    backgroundColor: 'transparent',
+});
+const SelectableRow = createComponent('tr')({
+    displayName: 'SelectableRow',
+    Component: ({ onSelect, rowData }) => {
+        return (_jsxs(Table.Row, { cs: selectableRowStencil({ isSelected: rowData.checked }), children: [_jsx(Table.Cell, { cs: tableCellStyles, children: _jsx(Tooltip, { title: rowData.name, children: _jsx(Checkbox, { checked: rowData.checked, onChange: onSelect }) }) }), _jsx(Table.Header, { cs: tableCellStyles, scope: "row", children: rowData.name }), _jsx(Table.Cell, { cs: tableCellStyles, children: rowData.amount })] }));
+    },
+});
+const pizzaToppingData = [
+    { name: 'Pepperoni', amount: '2.5 oz.', checked: false },
+    { name: 'Mozzarella', amount: '5 oz.', checked: false },
+    { name: 'Basil', amount: '10 Leaves', checked: false },
+    { name: 'Roasted Red Peppers', amount: '3 oz.', checked: false },
+    { name: 'Mushrooms', amount: '2 oz.', checked: false },
+];
+const headingID = generateUniqueId();
+export const SelectableRows = () => {
+    const [selectAllState, setSelectAllState] = React.useState('unchecked');
+    const [toppings, setToppings] = React.useState(pizzaToppingData);
+    const handleToppingChange = (name) => {
+        // Toggle the selected item's checked state and update state
+        const updatedToppings = toppings.map(topping => {
+            if (topping.name === name) {
+                return { ...topping, checked: !topping.checked };
+            }
+            else {
+                return topping;
+            }
+        });
+        setToppings(updatedToppings);
+        // Update the Select All checkbox state
+        const selectedToppings = updatedToppings.filter(topping => topping.checked === true);
+        // If no toppings are selected, set the Select All checkbox to 'unchecked'
+        if (selectedToppings.length === 0) {
+            setSelectAllState('unchecked');
+            // If all toppings are selected, set the Select All checkbox to 'checked'
+        }
+        else if (selectedToppings.length === updatedToppings.length) {
+            setSelectAllState('checked');
+            // Otherwise, set the Select All checkbox to 'indeterminate'
+        }
+        else {
+            setSelectAllState('indeterminate');
+        }
+    };
+    const handleSelectAll = () => {
+        // If the Select All checkbox is in a checked or indeterminate state,
+        // update it to 'unchecked', and uncheck all topping checkboxes
+        if (selectAllState === 'checked' || selectAllState === 'indeterminate') {
+            setSelectAllState('unchecked');
+            const updatedToppingData = toppings.map(topping => ({ ...topping, checked: false }));
+            setToppings(updatedToppingData);
+        }
+        // If the Select All checkbox is in an unchecked state,
+        // update it to 'checked', and check all topping checkboxes
+        if (selectAllState === 'unchecked') {
+            setSelectAllState('checked');
+            const updatedToppingData = toppings.map(topping => ({ ...topping, checked: true }));
+            setToppings(updatedToppingData);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Select your pizza toppings" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsxs(Table.Row, { gridTemplateColumns: "3.5rem repeat(2, 1fr)", children: [_jsx(Table.Cell, { cs: tableHeaderStyles, children: _jsx(Tooltip, { title: "Select All", children: _jsx(Checkbox, { checked: selectAllState === 'checked', indeterminate: selectAllState === 'indeterminate', onChange: handleSelectAll }) }) }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Toppings" }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Amount" })] }), _jsx(Table.Body, { children: toppings.map(rowData => (_jsx(SelectableRow, { rowData: rowData, onSelect: () => handleToppingChange(rowData.name) }, rowData.name))) })] })] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"WithSortableColumnHeaders.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithSortableColumnHeaders.tsx"],"names":[],"mappings":"AAwJA,eAAO,MAAM,qBAAqB,+CA4DjC,CAAC"}