@workday/canvas-kit-react 8.0.0-alpha.194-next.2 → 8.0.0-alpha.199-next.1

package/breadcrumbs/lib/hooks/utils/index.ts

@@ -0,0 +1,22 @@
+export const reorganizeHiddenItems = (
+  items: {id: string}[],
+  hiddenIds: string[],
+  getId: (item: {id: string}) => string
+): string[] => {
+  let updatedHiddenIds = hiddenIds;
+  const totalSize = items.length;
+  const itemSpace = totalSize - hiddenIds.length;
+
+  if (itemSpace <= 2) {
+    // Keep only last items if there is place for two or less items
+    updatedHiddenIds = items.slice(0, totalSize - 1).map(getId);
+  } else if (itemSpace === 3) {
+    // Always keep first and last item if there is place for 3 items
+    updatedHiddenIds = items.slice(1, totalSize - 1).map(getId);
+  } else if (itemSpace > 3 && itemSpace < totalSize) {
+    // Always keep first and 2 last items if there is place for 4 items
+    updatedHiddenIds = items.slice(1, totalSize - 2).map(getId);
+  }
+
+  return updatedHiddenIds;
+};

package/breadcrumbs/package.json

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

package/button/index.ts

@@ -9,6 +9,12 @@ export {
 export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton';
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
-export {BaseButton, ButtonContainerProps} from './lib/BaseButton';
+export {
+  BaseButton,
+  ButtonContainerProps,
+  BaseButtonProps,
+  getMinWidthStyles,
+  getPaddingStyles,
+} from './lib/BaseButton';
 export {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';

package/button/lib/BaseButton.tsx

@@ -29,10 +29,6 @@ export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
    * @default 'medium'
    */
   size?: ButtonSizes;
-  /**
-   * The ref to the button that the styled component renders.
-   */
-  ref?: React.Ref<HTMLButtonElement>;
   /**
    * Whether the icon should received filled (colored background layer) or regular styles.
    * Corresponds to `toggled` in ToolbarIconButton
@@ -40,6 +36,13 @@ export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
   fillIcon?: boolean;
 }
 
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {}
+
 function getIconColorSelectors(
   {
     canvas: {

package/button/lib/DeleteButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {ButtonColors} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 import {
   GrowthBehavior,
   useTheme,
@@ -9,7 +9,7 @@ import {
   createComponent,
 } from '@workday/canvas-kit-react/common';
 
-export interface DeleteButtonProps extends Themeable, GrowthBehavior {
+export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The size of the Button.
    * @default 'medium'

package/button/lib/PrimaryButton.tsx

@@ -11,7 +11,7 @@ import {
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
 const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => {
   const {
@@ -85,7 +85,7 @@ const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCa
   }
 };
 
-export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
+export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the PrimaryButton.
    * @default undefined

package/button/lib/SecondaryButton.tsx

@@ -11,9 +11,9 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
-export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
+export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the SecondaryButton.
    * @default undefined

package/button/lib/TertiaryButton.tsx

@@ -11,9 +11,9 @@ import {
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, IconPositions, ButtonSizes} from './types';
-import {BaseButton} from './BaseButton';
+import {BaseButton, BaseButtonProps} from './BaseButton';
 
-export interface TertiaryButtonProps extends Themeable {
+export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
   /**
    * The variant of the TertiaryButton.
    * @default undefined
@@ -229,7 +229,7 @@ export const TertiaryButton = createComponent('button')({
         size={size}
         padding={getPaddingStyles(icon, iconPosition, children, size)}
         minWidth={getMinWidthStyles(children, size)}
-        style={{borderRadius: children ? borderRadius.m : borderRadius.circle}}
+        borderRadius={children ? borderRadius.m : borderRadius.circle}
         {...elemProps}
       >
         {icon && iconPosition === 'start' && (

package/common/lib/utils/components.ts

@@ -10,6 +10,9 @@ export type StyledType = {
   as?: React.ElementType;
 };
 
+// For React class components
+type Constructor<T> = new (...args: any[]) => T;
+
 /**
  * Extract a Ref from T if it exists
  * This will return the following:
@@ -20,6 +23,8 @@ export type StyledType = {
  */
 type ExtractRef<T> = T extends undefined // test if T was even passed in
   ? never // T not passed in, we'll set the ref to `never`
+  : T extends Constructor<infer C>
+  ? React.LegacyRef<C>
   : React.Ref<
       T extends keyof ElementTagNameMap // test if T is an element string like 'button' or 'div'
         ? ElementTagNameMap[T] // if yes, the ref should be the element interface. `'button' => HTMLButtonElement`

package/dist/commonjs/breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/Breadcrumbs';
+export * from './lib/hooks/useBreadcrumbsModel';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iCAAiC,CAAC"}

package/dist/commonjs/breadcrumbs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/Breadcrumbs"), exports);
+__exportStar(require("./lib/hooks/useBreadcrumbsModel"), exports);