@workday/canvas-kit-react 8.0.0-alpha.198-next.0 → 8.0.0-alpha.199-next.1

package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js

@@ -0,0 +1,54 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { composeHooks, createSubcomponent, createElemPropsHook, useIsRTL, } from '@workday/canvas-kit-react/common';
+import { useListItemRegister, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
+import { colors, space } from '@workday/canvas-kit-react/tokens';
+import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
+import { BreadcrumbsLink } from './BreadcrumbsLink';
+export var useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister, createElemPropsHook(useBreadcrumbsModel)(function (_a, _, elemProps) {
+    var _b;
+    var state = _a.state;
+    if (elemProps === void 0) { elemProps = {}; }
+    var localId = React.useState(elemProps['data-id'] || ((_b = elemProps.item) === null || _b === void 0 ? void 0 : _b.id) || '')[0];
+    return {
+        inert: state.nonInteractiveIds.includes(localId) ? '' : undefined,
+        disabled: undefined,
+    };
+}));
+export var BreadcrumbsItem = createSubcomponent('li')({
+    displayName: 'Breadcrumbs.Item',
+    modelHook: useBreadcrumbsModel,
+    elemPropsHook: useBreadcrumbsItem,
+    subComponents: {
+        Link: BreadcrumbsLink,
+    },
+})(function (_a, Element) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (React.createElement(Flex, __assign({ as: Element, alignItems: "center", whiteSpace: "nowrap" }, elemProps),
+        children,
+        React.createElement(SystemIcon, { icon: chevronRightSmallIcon, color: colors.licorice200, colorHover: colors.licorice200, size: 20, height: space.l, width: space.l, shouldMirror: useIsRTL(), styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
+});

package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
+export interface BreadcrumbsLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * The href url of the anchor tag
+     */
+    href: string;
+    /**
+     * The max-width of the link text
+     *
+     * @default 350px
+     */
+    maxWidth?: number;
+    tooltipProps?: OverflowTooltipProps | {};
+}
+export declare const BreadcrumbsLink: import("../../common").ElementComponent<"a", BreadcrumbsLinkProps>;
+//# sourceMappingURL=BreadcrumbsLink.d.ts.map

package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsLink.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAGxF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACzF;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,GAAG,EAAE,CAAC;CAC1C;AAgBD,eAAO,MAAM,eAAe,oEAiB1B,CAAC"}

package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled, createComponent, ellipsisStyles } from '@workday/canvas-kit-react/common';
+import { Hyperlink } from '@workday/canvas-kit-react/button';
+import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
+import { type } from '@workday/canvas-kit-react/tokens';
+var _a = type.levels.subtext.large, color = _a.color, subtextLargeStyles = __rest(_a, ["color"]);
+var StyledLink = styled(Hyperlink)(__assign({}, subtextLargeStyles), function (_a) {
+    var maxWidth = _a.maxWidth;
+    return (__assign({ maxWidth: maxWidth }, ellipsisStyles));
+});
+export var BreadcrumbsLink = createComponent('a')({
+    displayName: 'Breadcrumbs.Link',
+    Component: function (_a) {
+        var _b = _a.maxWidth, maxWidth = _b === void 0 ? 350 : _b, href = _a.href, _c = _a.tooltipProps, tooltipProps = _c === void 0 ? {} : _c, children = _a.children, props = __rest(_a, ["maxWidth", "href", "tooltipProps", "children"]);
+        return (React.createElement(OverflowTooltip, __assign({}, tooltipProps),
+            React.createElement(StyledLink, __assign({ maxWidth: maxWidth, href: href, role: "link" }, props), children)));
+    },
+});

package/dist/es6/breadcrumbs/lib/BreadcrumbsList.d.ts

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { BreadcrumbsOverflowButton } from './BreadcrumbsOverflowButton';
+export interface BreadcrumbsListProps<T = any> extends Omit<Partial<ExtractProps<typeof Flex, never>>, 'children'> {
+    /**
+     * Props passed into overflow button, style prop will be ignored
+     */
+    overflowButtonProps?: ExtractProps<typeof BreadcrumbsOverflowButton>;
+    /**
+     * If items are passed to a `BreadcrumbsModel`, the child of `Breadcrumbs.List` should be a render prop. The
+     * List will determine how and when the item will be rendered.
+     *
+     * @example
+     * <Breadcrumbs.List>
+     *   {(item) => <Breadcrumbs.Item key={item.id} name={item.name}>{item.text}</Breadcrumbs.Item>}
+     * </Breadcrumbs.List>
+     */
+    children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
+}
+export declare const BreadcrumbsList: import("../../common").ElementComponentM<"ul", BreadcrumbsListProps<any>, {
+    state: {
+        hiddenIds: string[];
+        nonInteractiveIds: string[];
+        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        itemWidthCache: Record<string, number>;
+        containerWidth: number;
+        overflowTargetWidth: number;
+        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        UNSTABLE_virtual: {
+            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        indexRef: React.MutableRefObject<number>;
+        isVirtualized: boolean;
+        items: import("../../collection").Item<any>[];
+    };
+    events: {
+        select(data: {
+            id: string;
+        }): void;
+        setContainerWidth(data: {
+            width?: number | undefined;
+        }): void;
+        setOverflowTargetWidth(data: {
+            width: number;
+        }): void;
+        addItemWidth(data: {
+            id: string;
+            width: number;
+        }): void;
+        removeItemWidth(data: {
+            id: string;
+        }): void;
+        addHiddenKey(data: {
+            id: string;
+        }): void;
+        removeHiddenKey(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    menu: {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+            selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+            unselectedIds: string[];
+            cursorId: string;
+            columnCount: number;
+            UNSTABLE_virtual: {
+                virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+                totalSize: number;
+                scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+                scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+                measure: () => void;
+            };
+            UNSTABLE_defaultItemHeight: number;
+            containerRef: React.RefObject<HTMLDivElement>;
+            orientation: import("../../collection/lib/useBaseListModel").Orientation;
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("../../collection").Item<any>[];
+            mode: "multiple" | "single";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            select(data: {
+                id: string;
+            }): void;
+            selectAll(): void;
+            unselectAll(): void;
+            registerItem(data: {
+                item: any;
+                textValue: string;
+            }): void;
+            goTo(data: {
+                id: string;
+            }): void;
+            goToNext(): void;
+            goToPrevious(): void;
+            goToPreviousRow(): void;
+            goToNextRow(): void;
+            goToFirst(): void;
+            goToLast(): void;
+            goToFirstOfRow(): void;
+            goToLastOfRow(): void;
+            goToNextPage(): void;
+            goToPreviousPage(): void;
+            unregisterItem(data: {
+                id: string;
+            }): void;
+            updateItemHeight(data: {
+                value: number;
+            }): void;
+        };
+        selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+        navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+        getId: (item: any) => string;
+    };
+    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}>;
+//# sourceMappingURL=BreadcrumbsList.d.ts.map

package/dist/es6/breadcrumbs/lib/BreadcrumbsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsList.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AAGtE,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,GAAG,CAC3C,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC3E;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0B1B,CAAC"}

package/dist/es6/breadcrumbs/lib/BreadcrumbsList.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { useOverflowListMeasure, useListRenderItems } from '@workday/canvas-kit-react/collection';
+import { space } from '@workday/canvas-kit-react/tokens';
+import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
+import { Breadcrumbs } from './Breadcrumbs';
+export var BreadcrumbsList = createSubcomponent('ul')({
+    displayName: 'Breadcrumbs.List',
+    modelHook: useBreadcrumbsModel,
+    elemPropsHook: useOverflowListMeasure,
+})(function (_a, Element, model) {
+    var _b = _a.overflowButtonProps, overflowButtonProps = _b === void 0 ? {} : _b, children = _a.children, elemProps = __rest(_a, ["overflowButtonProps", "children"]);
+    var items = useListRenderItems(model, children);
+    var splitIndex = items.length - 2;
+    return (React.createElement(Flex, __assign({ as: Element, padding: "zero", margin: "zero", display: "inline-flex", alignItems: "center", minHeight: space.xl, listStyle: "none", role: "list", width: "100%" }, elemProps),
+        items.length ? items.slice(0, splitIndex) : items,
+        React.createElement(Breadcrumbs.OverflowButton, __assign({}, overflowButtonProps)),
+        items.length ? items.slice(splitIndex, items.length) : null));
+});