@workday/canvas-kit-preview-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/dist/es6/select/lib/SelectOption.js

@@ -1,69 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ErrorType, pickForegroundColor, styled, } from '@workday/canvas-kit-react/common';
-import { colors, commonColors, type } from '@workday/canvas-kit-react/tokens';
-const optionPadding = 6;
-const activeStyles = (theme) => {
-    const activeBgColor = theme.canvas.palette.primary.main;
-    return {
-        backgroundColor: activeBgColor,
-        color: pickForegroundColor(activeBgColor),
-    };
-};
-const Option = styled('li')({
-    ...type.levels.subtext.large,
-    cursor: 'default',
-    // Apply listStyle at the list item style to ensure it's styled properly
-    // in Visual Testing States
-    listStyle: 'none',
-    // In case the content of the option is empty/undefined for some reason
-    minHeight: type.levels.subtext.large.lineHeight,
-    textAlign: 'left',
-}, ({ 'aria-disabled': disabled, focused, interactive, theme }) => {
-    if (disabled) {
-        // If the option is disabled, return disabled styles...
-        return {
-            color: colors.licorice100,
-        };
-    }
-    else if (focused) {
-        // ...else if the option is focused, return focused styles...
-        return {
-            ...activeStyles(theme),
-        };
-    }
-    else {
-        // ...else return hover and selected (via aria-selected) styles
-        const selectedBgColor = theme.canvas.palette.primary.lightest;
-        const selectedStyles = {
-            '&[aria-selected="true"]': {
-                backgroundColor: selectedBgColor,
-                color: pickForegroundColor(selectedBgColor),
-            },
-        };
-        // Only display interactive (hover/active) styles if the option is interactive
-        const interactiveStyles = interactive
-            ? {
-                '&:hover': {
-                    backgroundColor: commonColors.hoverBackground,
-                },
-                '&:active, &:active[aria-selected="true"]': {
-                    ...activeStyles(theme),
-                },
-            }
-            : {};
-        return {
-            // Place selected styles after interactive styles to have selected styles
-            // override interactive styles (subject to CSS specificity rules)
-            ...interactiveStyles,
-            ...selectedStyles,
-        };
-    }
-}, ({ error }) => ({
-    padding: `${optionPadding}px ${error === ErrorType.Caution ? optionPadding - 1 : optionPadding}px`,
-}));
-/**
- * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
-    return (_jsx(Option, { "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option", ...elemProps, children: children }));
-};

package/dist/es6/select/lib/scrolling.d.ts

@@ -1,5 +0,0 @@
-/**
- * @deprecated ⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export declare const scrollIntoViewIfNeeded: (elem: HTMLElement, centerIfNeeded?: boolean) => void;
-//# sourceMappingURL=scrolling.d.ts.map

package/dist/es6/select/lib/scrolling.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scrolling.d.ts","sourceRoot":"","sources":["../../../../select/lib/scrolling.ts"],"names":[],"mappings":"AACA;;GAEG;AACH,eAAO,MAAM,sBAAsB,SAAU,WAAW,+BAA0B,IAqCjF,CAAC"}

package/dist/es6/select/lib/scrolling.js

@@ -1,32 +0,0 @@
-// Modified from https://gist.github.com/hsablonniere/2581101
-/**
- * @deprecated ⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
-    const parent = elem.parentElement;
-    if (elem && parent) {
-        const parentComputedStyle = window.getComputedStyle(parent, null);
-        const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
-        // Check if elem is out of view at the top edge of the parent's viewport
-        const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
-        // Check if elem is out of view at the bottom edge of the parent's viewport
-        const overBottom = elem.offsetTop + elem.offsetHeight >
-            parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
-        if ((overTop || overBottom) && centerIfNeeded) {
-            parent.scrollTop = Math.floor(elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2);
-        }
-        if ((overTop || overBottom) && !centerIfNeeded) {
-            if (overBottom) {
-                // elem is out of view at the bottom edge of the parent's viewport;
-                // scroll down just far enough for elem to be visible
-                parent.scrollTop =
-                    elem.clientHeight - (parent.clientHeight + parentBorderTopWidth - elem.offsetTop);
-            }
-            else {
-                // elem is out of view at the top edge of the parent's viewport;
-                // scroll up just far enough for elem to be visible
-                parent.scrollTop = elem.offsetTop - parentBorderTopWidth;
-            }
-        }
-    }
-};

package/dist/es6/select/lib/types.d.ts

@@ -1,37 +0,0 @@
-/**
- * The placement of the menu relative to its corresponding button. This type is a
- * subset of the PopperJS.Placement type limited to the `bottom` and `top` values.
- *
- * We need to use `top` and `bottom` instead of `top-start` and `bottom-start` for
- * placements because PopperJS incorrectly rounds the `start` and `end` modifiers:
- * https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/utils/computeOffsets.js#L68-L81
- * This rounding causes problems with browsers that allow subpixel values for elements
- * like Firefox and Edge.
- *
- * @deprecated ⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export type MenuPlacement = 'bottom' | 'top';
-/**
- * The visibility state of the menu.
- *
- * `closed`: The menu is completely closed (not present in the DOM).
- * `open`: The menu was previously `closed` and has just been instructed to open.
- *   The menu has been added to the DOM, but it's not yet visible. This state is
- *   necessary in order to apply an opacity of 0 to the menu before transitioning it
- *   to an opacity of 1.0 in the opening state.
- * `opening`: The menu is in the process of opening.
- * `opened`: The menu is completely open.
- * `close`: The menu was previously `open` and has just been instructed to close.
- * `closing`: The menu is in the process of closing.
- *
- * Typically, a menu will transition through states in the following order:
- * `closed` > `open` > `opening` > `opened` > `close` > `closing` > `closed`
- *
- * However, it's possible for a user to open a menu while it's in the process of
- * closing in which case the menu can transition from `closing` > `opening` (and
- * vice-versa).
- *
- * @deprecated ⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export type MenuVisibility = 'closed' | 'open' | 'opening' | 'opened' | 'close' | 'closing';
-//# sourceMappingURL=types.d.ts.map

package/dist/es6/select/lib/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../select/lib/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC"}

package/dist/es6/select/lib/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es6/select/lib/utils.d.ts

@@ -1,10 +0,0 @@
-import { NormalizedOption } from './SelectBase';
-/**
- * @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export declare const getIndexByValue: (options: NormalizedOption[], value: string | undefined) => number;
-/**
- * @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export declare const getCorrectedIndexByValue: (options: NormalizedOption[], value: string | undefined) => number;
-//# sourceMappingURL=utils.d.ts.map

package/dist/es6/select/lib/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../select/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C;;GAEG;AACH,eAAO,MAAM,eAAe,YAAa,gBAAgB,EAAE,SAAS,MAAM,GAAG,SAAS,KAAG,MAYxF,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,wBAAwB,YAC1B,gBAAgB,EAAE,SACpB,MAAM,GAAG,SAAS,KACxB,MAIF,CAAC"}

package/dist/es6/select/lib/utils.js

@@ -1,22 +0,0 @@
-/**
- * @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const getIndexByValue = (options, value) => {
-    if (!options || value === undefined) {
-        return -1;
-    }
-    for (let i = 0; i < options.length; i++) {
-        if (options[i].value === value) {
-            return i;
-        }
-    }
-    return -1;
-};
-// If the value doesn't exist in the options, return index 0
-/**
- * @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export const getCorrectedIndexByValue = (options, value) => {
-    const indexByValue = getIndexByValue(options, value);
-    return indexByValue === -1 ? 0 : indexByValue;
-};

package/information-highlight/index.ts

@@ -1,5 +0,0 @@
-export * from './lib/InformationHighlight';
-export * from './lib/parts/Body';
-export * from './lib/parts/Heading';
-export * from './lib/parts/Icon';
-export * from './lib/parts/Link';

package/information-highlight/lib/InformationHighlight.tsx

@@ -1,107 +0,0 @@
-import {createContainer} from '@workday/canvas-kit-react/common';
-import {createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-import {InformationHighlightHeading} from './parts/Heading';
-import {Body} from './parts/Body';
-import {Icon} from './parts/Icon';
-import {Link} from './parts/Link';
-import {useInformationHighlightModel} from './hooks/useInformationHighlightModel';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-interface InformationHighlightProps extends CSProps {}
-
-export const informationHighlightStencil = createStencil({
-  base: {
-    display: 'grid',
-    gridTemplateColumns: 'min-content',
-    columnGap: system.space.x4,
-    rowGap: system.space.x2,
-    padding: system.space.x4,
-    borderRadius: system.shape.x1,
-    outline: `${px2rem(1)} solid transparent`,
-    borderInlineStart: `${system.space.x1} solid transparent`,
-  },
-  modifiers: {
-    informational: {
-      low: {
-        borderInlineStartColor: system.color.border.info.default,
-        backgroundColor: system.color.bg.alt.soft,
-        '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.icon.info.default,
-          [systemIconStencil.vars.color]: system.color.icon.info.default,
-          [systemIconStencil.vars.backgroundColor]: 'transparent',
-        },
-      },
-      high: {
-        borderInlineStartColor: system.color.border.info.default,
-        backgroundColor: system.color.bg.info.softest,
-        '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
-          [systemIconStencil.vars.color]: system.color.icon.info.default,
-          [systemIconStencil.vars.backgroundColor]: system.color.icon.info.default,
-        },
-      },
-    },
-    caution: {
-      low: {
-        borderInlineStartColor: system.color.border.caution.default,
-        backgroundColor: system.color.bg.alt.soft,
-        '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.icon.strong,
-          [systemIconStencil.vars.color]: system.color.icon.strong,
-          [systemIconStencil.vars.backgroundColor]: 'transparent',
-        },
-      },
-      high: {
-        borderInlineStartColor: system.color.border.caution.default,
-        backgroundColor: system.color.bg.caution.softest,
-        '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
-          [systemIconStencil.vars.color]: system.color.icon.caution.softer,
-          [systemIconStencil.vars.backgroundColor]: system.color.icon.caution.softer,
-        },
-      },
-    },
-    critical: {
-      low: {
-        borderInlineStartColor: system.color.border.critical.default,
-        backgroundColor: system.color.bg.alt.soft,
-        '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
-          [systemIconStencil.vars.color]: system.color.icon.critical.default,
-          [systemIconStencil.vars.backgroundColor]: 'transparent',
-        },
-      },
-      high: {
-        borderInlineStartColor: system.color.border.critical.default,
-        backgroundColor: system.color.bg.critical.softest,
-        '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
-          [systemIconStencil.vars.color]: system.color.icon.critical.default,
-          [systemIconStencil.vars.backgroundColor]: system.color.icon.critical.default,
-        },
-      },
-    },
-  },
-});
-
-export const InformationHighlight = createContainer('section')({
-  displayName: 'InformationHighlight',
-  modelHook: useInformationHighlightModel,
-  subComponents: {
-    Icon: Icon,
-    Heading: InformationHighlightHeading,
-    Body: Body,
-    Link: Link,
-  },
-})(({...elemProps}: InformationHighlightProps, Element, model) => {
-  return (
-    <Element
-      {...handleCsProp(
-        elemProps,
-        informationHighlightStencil({[model.state.variant]: model.state.emphasis})
-      )}
-    />
-  );
-});

package/information-highlight/lib/hooks/useInformationHighlightModel.ts

@@ -1,16 +0,0 @@
-import {createModelHook} from '@workday/canvas-kit-react/common';
-
-export const useInformationHighlightModel = createModelHook({
-  defaultConfig: {
-    variant: 'informational' as 'informational' | 'caution' | 'critical',
-    emphasis: 'low' as 'low' | 'high',
-  },
-})(config => {
-  return {
-    state: {
-      variant: config.variant,
-      emphasis: config.emphasis,
-    },
-    events: {},
-  };
-});

package/information-highlight/lib/parts/Body.tsx

@@ -1,28 +0,0 @@
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {Text} from '@workday/canvas-kit-react/text';
-
-const informationHighlightBodyStencil = createStencil({
-  base: () => {
-    return {
-      ...system.type.subtext.large,
-      color: system.color.text.strong,
-      gridColumn: '2',
-      marginBlockEnd: system.space.x2,
-    };
-  },
-});
-
-export const Body = createComponent('div')({
-  displayName: 'Body',
-  Component: ({...elemProps}: ExtractProps<typeof Text, never>, ref, Element) => {
-    return (
-      <Text
-        as={Element}
-        ref={ref}
-        {...handleCsProp(elemProps, informationHighlightBodyStencil())}
-      />
-    );
-  },
-});

package/information-highlight/lib/parts/Heading.tsx

@@ -1,34 +0,0 @@
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {Heading} from '@workday/canvas-kit-react/text';
-
-const informationHighlightHeadingStencil = createStencil({
-  base: () => {
-    return {
-      ...system.type.body.small,
-      color: system.color.text.strong,
-      gridColumn: '2',
-      fontWeight: system.fontWeight.bold,
-      marginTop: system.space.zero,
-      marginBottom: system.space.zero,
-    };
-  },
-});
-
-export interface InformationHighlightHeadingProps
-  extends Partial<ExtractProps<typeof Heading, never>> {}
-
-export const InformationHighlightHeading = createComponent('h3')({
-  displayName: 'Heading',
-  Component: ({size = 'small', ...elemProps}: InformationHighlightHeadingProps, ref, Element) => {
-    return (
-      <Heading
-        as={Element}
-        ref={ref}
-        size={size}
-        {...handleCsProp(elemProps, informationHighlightHeadingStencil())}
-      />
-    );
-  },
-});

package/information-highlight/lib/parts/Icon.tsx

@@ -1,29 +0,0 @@
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {
-  infoIcon,
-  exclamationCircleIcon,
-  exclamationTriangleIcon,
-} from '@workday/canvas-system-icons-web';
-import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
-
-export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {}
-const defaultIcons = {
-  informational: infoIcon,
-  caution: exclamationTriangleIcon,
-  critical: exclamationCircleIcon,
-};
-
-export const Icon = createSubcomponent('span')({
-  displayName: 'Icon',
-  modelHook: useInformationHighlightModel,
-})(({icon, ...props}: IconProps, Element, model) => {
-  return (
-    <SystemIcon
-      as={Element}
-      icon={icon ? icon : defaultIcons[model.state.variant]}
-      data-part="information-highlight-icon"
-      {...props}
-    />
-  );
-});

package/information-highlight/lib/parts/Link.tsx

@@ -1,29 +0,0 @@
-import {Hyperlink} from '@workday/canvas-kit-react/button';
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const informationHighlightLinkStencil = createStencil({
-  base: () => {
-    return {
-      ...system.type.subtext.large,
-      gridColumn: '2',
-      justifySelf: 'start',
-      color: system.color.text.strong,
-      fontWeight: system.fontWeight.bold,
-    };
-  },
-});
-
-export const Link = createComponent('a')({
-  displayName: 'Link',
-  Component: ({...elemProps}: ExtractProps<typeof Hyperlink, never>, ref, Element) => {
-    return (
-      <Hyperlink
-        as={Element}
-        ref={ref}
-        {...handleCsProp(elemProps, informationHighlightLinkStencil())}
-      />
-    );
-  },
-});

package/information-highlight/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../dist/commonjs/information-highlight",
-  "module": "../dist/es6/information-highlight",
-  "sideEffects": false,
-  "types": "../dist/es6/information-highlight"
-}

package/pill/index.ts

@@ -1,7 +0,0 @@
-export * from './lib/Pill';
-export * from './lib/usePillModel';
-export * from './lib/PillCount';
-export * from './lib/PillIconButton';
-export * from './lib/PillIcon';
-export * from './lib/PillLabel';
-export * from './lib/Pill';