@workday/canvas-kit-react 15.0.0-alpha.0064-next.0 → 15.0.0-alpha.0075-next.0

package/dist/commonjs/pill/lib/Pill.d.ts

@@ -0,0 +1,265 @@
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface PillProps extends BoxProps {
+    /**
+     * Defines what kind of pill to render stylistically and its interaction states
+     * @default 'default'
+     */
+    variant?: 'readOnly' | 'removable';
+    /**
+     * Determines the max width of the pill. If the pill text is longer than the max width,
+     * text will be truncated and a tooltip will show the rest of the content when hovered over
+     */
+    maxWidth?: string | number;
+}
+export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        readOnly: {
+            [x: string]: string | {
+                [x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
+                borderColor: "--cnvs-sys-color-border-container";
+            } | {
+                [x: string]: "--cnvs-sys-color-bg-default";
+                borderColor?: undefined;
+            };
+            border: string;
+            cursor: string;
+            '&:hover, &.hover': {
+                [x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
+                borderColor: "--cnvs-sys-color-border-container";
+            };
+            '&:focus-visible, &.focus': {
+                [x: string]: "--cnvs-sys-color-bg-default";
+            };
+            '&:active, &.active': {
+                [x: string]: "--cnvs-sys-color-bg-default";
+            };
+            '&:disabled, &.disabled': {
+                [x: string]: "--cnvs-sys-color-bg-default";
+            };
+        };
+        removable: {
+            '&:focus-visible, &.focus': {
+                [x: string]: string;
+                boxShadow: string;
+            };
+            '&:hover, &.hover': {
+                [x: string]: "--cnvs-sys-color-bg-alt-strong";
+            };
+            '&:active, &.active': {
+                [x: string]: "--cnvs-sys-color-bg-alt-stronger";
+            };
+            '&:disabled, &.disabled': {
+                [x: string]: string;
+            };
+            cursor: string;
+            overflow: string;
+            position: string;
+        };
+    };
+}, {}, {
+    maxWidth: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-xl, 3rem)";
+            paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
+            minWidth: "--cnvs-base-size-1400";
+            fontFamily: "--cnvs-sys-font-family-default";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
+        };
+        medium: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            minWidth: "--cnvs-base-size-1200";
+            paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
+            height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
+        };
+        small: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
+            minWidth: "--cnvs-base-size-1000";
+            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
+        };
+        extraSmall: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
+            minWidth: string;
+            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
+        };
+    };
+    grow: {
+        true: {
+            width: string;
+            maxWidth: string;
+        };
+    };
+    iconPosition: {
+        only: {
+            padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
+        };
+        start: {};
+        end: {};
+    };
+}, {}, {
+    background: string;
+    border: string;
+    boxShadowInner: string;
+    boxShadowOuter: string;
+    label: string;
+    opacity: string;
+    borderRadius: string;
+}, never, never>, never>;
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
+export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
+    disabled: boolean;
+    id: string;
+}> & {} & {}, {
+    state: {
+        id: string;
+        disabled: boolean;
+    };
+    events: {};
+}> & {
+    /**
+     * This component renders an avatar. It supports all props of the `Avatar` component.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Avatar url={avatarUrl} />
+     *    <Pill.Label>Regina Skeltor</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+     * </Pill>
+     * ```
+     */
+    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PillAvatar").PillAvatarProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    /**
+     * This component renders its `children` as the count.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *    <Pill.Label>Shoes</Pill.Label>
+     *   <Pill.Count>30</Pill.Count>
+     * </Pill>
+     * ```
+     */
+    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
+    /**
+     * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
+     * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   <Pill.Icon aria-label='Add user' />
+     *   <Pill.Label>Regina Skeltor</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    /**
+     * This component renders a custom icon button. It is only intended to be used with the
+     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+     * an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Label>Pink Shirts</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
+     * </Pill>
+     * ```
+     */
+    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    /**
+     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+     * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
+     *
+     * ```tsx
+     * <Pill variant="readOnly">
+     *   <Pill.Label>Read-only</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
+        state: {
+            id: string;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+};
+//# sourceMappingURL=Pill.d.ts.map

package/dist/commonjs/pill/lib/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwHtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}

package/dist/commonjs/pill/lib/Pill.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pill = exports.pillStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@workday/canvas-kit-react/button");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const usePillModel_1 = require("./usePillModel");
+const PillIcon_1 = require("./PillIcon");
+const PillIconButton_1 = require("./PillIconButton");
+const PillCount_1 = require("./PillCount");
+const PillAvatar_1 = require("./PillAvatar");
+const PillLabel_1 = require("./PillLabel");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: button_1.buttonStencil,
+    vars: {
+        maxWidth: '',
+    },
+    base: { name: "24wm92", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-4ef1a0);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d52af1:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d52af1:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d52af1:transparent;}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d52af1:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d52af1:transparent;}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-primary-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d52af1:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-disabled);--label-button-f6d2bd:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d52af1:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d52af1:transparent;}" },
+    modifiers: {
+        variant: {
+            readOnly: { name: "3l435h", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}" },
+            removable: { name: "s6l79", styles: "&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
+        }
+    }
+}, "pill-4ef1a0");
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
+exports.Pill = (0, common_1.createContainer)('button')({
+    displayName: 'Pill',
+    modelHook: usePillModel_1.usePillModel,
+    subComponents: {
+        /**
+         * This component renders an avatar. It supports all props of the `Avatar` component.
+         *
+         * ```tsx
+         * <Pill variant="removable">
+         *   <Pill.Avatar url={avatarUrl} />
+         *    <Pill.Label>Regina Skeltor</Pill.Label>
+         *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+         * </Pill>
+         * ```
+         */
+        Avatar: PillAvatar_1.PillAvatar,
+        /**
+         * This component renders its `children` as the count.
+         *
+         * ```tsx
+         * <Pill onClick={() => console.warn('clicked')}>
+         *    <Pill.Label>Shoes</Pill.Label>
+         *   <Pill.Count>30</Pill.Count>
+         * </Pill>
+         * ```
+         */
+        Count: PillCount_1.PillCount,
+        /**
+         * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
+         * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
+         *
+         * ```tsx
+         * <Pill onClick={() => console.warn('clicked')}>
+         *   <Pill.Icon aria-label='Add user' />
+         *   <Pill.Label>Regina Skeltor</Pill.Label>
+         * </Pill>
+         * ```
+         */
+        Icon: PillIcon_1.PillIcon,
+        /**
+         * This component renders a custom icon button. It is only intended to be used with the
+         * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+         * an icon to the `icon` prop.
+         *
+         * ```tsx
+         * <Pill variant="removable">
+         *   <Pill.Label>Pink Shirts</Pill.Label>
+         *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
+         * </Pill>
+         * ```
+         */
+        IconButton: PillIconButton_1.PillIconButton,
+        /**
+         * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+         * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
+         *
+         * ```tsx
+         * <Pill variant="readOnly">
+         *   <Pill.Label>Read-only</Pill.Label>
+         * </Pill>
+         * ```
+         */
+        Label: PillLabel_1.PillLabel,
+    },
+})(({ variant, maxWidth = 200, children, ...elemProps }, Element, model) => {
+    const maxWidthCSSValue = typeof maxWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(maxWidth) : maxWidth;
+    const isReadOnly = variant === 'readOnly';
+    return (variant === null || variant === void 0 ? void 0 : variant.match(/^(readOnly|removable)$/)) ? ((0, jsx_runtime_1.jsx)(layout_1.Box, { as: Element !== 'button' ? Element : 'span', id: isReadOnly ? model.state.id : undefined, ...(0, layout_1.mergeStyles)(elemProps, [
+            model.state.disabled ? 'disabled' : undefined,
+            (0, exports.pillStencil)({ maxWidth: maxWidthCSSValue, variant }),
+        ]), children: isReadOnly ? (0, jsx_runtime_1.jsx)(PillLabel_1.PillLabel, { children: children }) : children })) : ((0, jsx_runtime_1.jsx)(Element, { disabled: model.state.disabled, ...(0, layout_1.mergeStyles)(elemProps, [
+            model.state.disabled ? 'disabled' : undefined,
+            (0, exports.pillStencil)({ maxWidth: maxWidthCSSValue }),
+        ]), children: children }));
+});