@kaizen/components 1.51.0 → 1.52.0

package/dist/types/__overlays__/Tooltip/v1/index.d.ts

@@ -0,0 +1,8 @@
+import { TooltipProps as TooltipPropsV1 } from "./Tooltip";
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export declare const Tooltip: {
+    ({ children, text, display, position, classNameOverride, portalSelector, animationDuration, isInitiallyVisible, mood, }: TooltipPropsV1): JSX.Element;
+    displayName: string;
+};
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export type TooltipProps = TooltipPropsV1;

package/dist/types/{Tooltip → __overlays__/Tooltip/v1}/utils/isSemanticElement.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode } from "react";
+import React from "react";
 export declare function extractDisplayName(type: React.FunctionComponent): string;
 /**
  *  Validates implicit or explicitly semantic roles required to make `aria-describedby` announce predictably with screen readers
  */
-export declare const isSemanticElement: (element: ReactNode) => element is React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const isSemanticElement: (element: any) => element is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/types/__overlays__/Tooltip/v2/index.d.ts

@@ -0,0 +1 @@
+export * from "../v1/Tooltip";

package/dist/types/__overlays__/Tooltip/v3/OverlayArrow.d.ts

@@ -0,0 +1,7 @@
+import { type OverlayArrowProps } from "react-aria-components";
+export { type OverlayArrowProps };
+/**
+ * An OverlayArrow renders a custom arrow element relative to an overlay element
+ * such as a popover or tooltip such that it aligns with a trigger element.
+ */
+export declare const OverlayArrow: (props: OverlayArrowProps) => JSX.Element;

package/dist/types/__overlays__/Tooltip/v3/Tooltip.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { TooltipContext, TooltipProps as RACTooltipProps } from "react-aria-components";
+export { TooltipContext };
+export type TooltipProps = Omit<RACTooltipProps, "offset"> & {
+    /**
+     * The additional offset applied along the main axis between the element and its
+     * anchor element.
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * The placement of the tooltip relative to the trigger.
+     * + we're intentionally limiting the placement options to rtl friendly ones (start, end, top, bottom)
+     */
+    placement?: "bottom" | "bottom start" | "bottom end" | "top" | "top start" | "top end" | "start" | "start top" | "start bottom" | "end" | "end top" | "end bottom";
+};
+/**
+ * A tooltip displays a description of an element on hover or focus.
+ */
+export declare const Tooltip: React.ForwardRefExoticComponent<Omit<RACTooltipProps, "offset"> & {
+    /**
+     * The additional offset applied along the main axis between the element and its
+     * anchor element.
+     * @default 8
+     */
+    offset?: number | undefined;
+    /**
+     * The placement of the tooltip relative to the trigger.
+     * + we're intentionally limiting the placement options to rtl friendly ones (start, end, top, bottom)
+     */
+    placement?: "end" | "start" | "bottom" | "top" | "bottom start" | "bottom end" | "top start" | "top end" | "start top" | "start bottom" | "end top" | "end bottom" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/__overlays__/Tooltip/v3/TooltipTrigger.d.ts

@@ -0,0 +1,19 @@
+import { TooltipTriggerComponentProps } from "react-aria-components";
+export type TooltipTriggerProps = Omit<TooltipTriggerComponentProps, "delay" | "closeDelay"> & {
+    /**
+     * The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance).
+     * @default 300
+     */
+    delay?: number;
+    /**
+     * The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown).
+     * @default 300
+     */
+    closeDelay?: number;
+};
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+export declare const TooltipTrigger: (props: TooltipTriggerProps) => JSX.Element;

package/dist/types/__overlays__/Tooltip/v3/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export * from "./TooltipTrigger";

package/dist/types/__overlays__/v1.d.ts

@@ -0,0 +1 @@
+export * from "./Tooltip/v1";

package/dist/types/__overlays__/v2.d.ts

@@ -0,0 +1 @@
+export * from "./Tooltip/v2";

package/dist/types/__overlays__/v3.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip/v3";
+export * from "./Focusable/v3";

package/dist/types/__react-aria-components__/index.d.ts

@@ -0,0 +1 @@
+export * from "react-aria-components";

package/dist/types/__react-aria__/index.d.ts

@@ -0,0 +1 @@
+export * from "react-aria";

package/dist/types/__utilities__/ReversedColors/v3/ReversedColors.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export type ReversedColorsProps = {
+    children: ReactNode;
+    isReversed?: boolean;
+};
+export declare const useReversedColors: () => boolean;
+export declare const ReversedColors: ({ children, isReversed, }: ReversedColorsProps) => JSX.Element;

package/dist/types/__utilities__/ReversedColors/v3/index.d.ts

@@ -0,0 +1 @@
+export * from "./ReversedColors";

package/dist/types/__utilities__/v3.d.ts

@@ -0,0 +1 @@
+export * from "./ReversedColors/v3";

package/dist/types/index.d.ts

@@ -56,8 +56,8 @@ export * from "./Tile";
 export * from "./TimeField";
 export * from "./TitleBlockZen";
 export * from "./ToggleSwitch";
-export * from "./Tooltip";
 export * from "./utils";
 export * from "./VisuallyHidden";
 export * from "./Well";
 export * from "./Workflow";
+export * from "./__overlays__/Tooltip/v1";

package/dist/types/utils/getNodeText.d.ts

@@ -1,2 +1 @@
-import React from "react";
-export declare const getNodeText: (node: React.ReactNode) => string | number;
+export declare const getNodeText: (node: any) => string | number;

package/dist/types/utils/mergeClassNames.d.ts

@@ -0,0 +1,8 @@
+type ClassNameValue = string | number | boolean | undefined | null;
+/**
+ * Helper to merge classnames together with support for functions that receive state (render props).
+ * This is useful when working with react-aria-components which have a feature where you can pass a function that receives state and returns a classname.
+ * https://react-spectrum.adobe.com/react-aria/styling.html#render-props
+ */
+export declare const mergeClassNames: <ClassNameTypes extends (ClassNameValue | ((state: any) => string))[]>(...classNames: ClassNameTypes) => (() => string) extends ClassNameTypes[number] ? (state: any) => string : string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.51.0",
+  "version": "1.52.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -14,6 +14,9 @@
   },
   "files": [
     "future",
+    "v1",
+    "v2",
+    "v3",
     "dist",
     "icons",
     "locales",
@@ -62,6 +65,8 @@
     "prosemirror-utils": "^1.2.2",
     "prosemirror-view": "^1.33.7",
     "react-animate-height": "^3.2.3",
+    "react-aria": "^3.33.1",
+    "react-aria-components": "^1.2.1",
     "react-day-picker": "^8.10.1",
     "react-focus-lock": "^2.12.1",
     "react-focus-on": "^3.9.3",
@@ -95,8 +100,8 @@
     "ts-jest": "^29.1.4",
     "tslib": "^2.6.3",
     "tsx": "^4.15.1",
-    "@kaizen/design-tokens": "10.4.1",
-    "@kaizen/package-bundler": "1.1.2"
+    "@kaizen/package-bundler": "1.1.2",
+    "@kaizen/design-tokens": "10.4.1"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",

package/src/Button/Button/Button.module.scss

@@ -33,47 +33,57 @@
     text-decoration: none;
   }
 
-  &:not(:disabled) {
+  &:not(.disabled, .working) {
     &:active {
       transform: translateY(1px);
     }
+  }
+
+  &:focus {
+    outline: none;
+  }
 
-    &:focus {
-      outline: none;
+  &:focus-visible {
+    &::after {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-500;
+      border-radius: $border-focus-ring-border-radius;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      inset: calc(-1 * #{$focus-ring-offset});
     }
+  }
 
+  &.reversed {
     &:focus-visible {
       &::after {
-        $focus-ring-offset: calc(
-          (#{$border-focus-ring-border-width} * 2) + 1px
-        );
-
-        content: "";
-        position: absolute;
-        background: transparent;
-        border-color: $color-blue-500;
-        border-radius: $border-focus-ring-border-radius;
-        border-width: $border-focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        inset: calc(-1 * #{$focus-ring-offset});
+        border-color: $color-blue-300;
       }
-    }
-  }
 
-  &.reversed {
-    &:not(:disabled) {
-      &:focus-visible {
+      &.disabled,
+      &.working {
         &::after {
-          border-color: $color-blue-300;
+          border-color: $color-gray-400;
         }
       }
     }
   }
 
-  &:disabled,
+  &.disabled,
   &.working {
-    pointer-events: none;
+    cursor: default;
     opacity: 30%;
+
+    &:focus-visible {
+      &::after {
+        border-style: $border-dashed-border-style;
+        border-color: $color-purple-800;
+      }
+    }
   }
 
   #{$className--content} {

package/src/Button/GenericButton/GenericButton.tsx

@@ -1,13 +1,15 @@
 import React, {
   ComponentType,
-  forwardRef,
+  FocusEvent,
+  MouseEvent,
   Ref,
+  forwardRef,
   useImperativeHandle,
   useRef,
-  MouseEvent,
-  FocusEvent,
 } from "react"
 import classnames from "classnames"
+import { useFocusable, useLink } from "react-aria"
+import { LinkContext, useContextProps } from "react-aria-components"
 import { Badge, BadgeAnimated } from "~components/Badge"
 import { LoadingSpinner } from "~components/Loading"
 import styles from "./GenericButton.module.scss"
@@ -71,6 +73,7 @@ export type RenderProps = GenericButtonProps & {
   directionalLink?: boolean
   paginationLink?: boolean
   isActive?: boolean
+  "aria-describedby"?: string
 }
 
 export type ButtonRef = { focus: () => void }
@@ -135,6 +138,7 @@ export const GenericButton = forwardRef(
     ref: Ref<ButtonRef | undefined>
   ) => {
     const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>()
+    const wrapperRef = useRef<HTMLSpanElement>(null)
     useImperativeHandle(ref, () => ({
       focus: (): void => {
         buttonRef.current?.focus()
@@ -152,27 +156,22 @@ export const GenericButton = forwardRef(
       ...otherProps,
     }
 
-    const determineButtonRenderer = (): JSX.Element => {
-      if (props.component) {
-        return renderCustomComponent(props.component, props)
-      }
-
-      if (props.href && !props.disabled && !props.working) {
-        return renderLink(props, buttonRef as Ref<HTMLAnchorElement>)
-      }
-
-      return renderButton(props, buttonRef as Ref<HTMLButtonElement>)
+    if (props.component) {
+      return renderCustomComponent(props.component, props, wrapperRef)
     }
 
     return (
       <span
+        ref={wrapperRef}
         className={classnames(
           styles.container,
           props.fullWidth && styles.fullWidth
         )}
         aria-live={"workingLabel" in props ? "polite" : undefined}
       >
-        {determineButtonRenderer()}
+        {props.href && !props.disabled && !props.working
+          ? renderLink(props, buttonRef as Ref<HTMLAnchorElement>)
+          : renderButton(props, buttonRef as Ref<HTMLButtonElement>)}
       </span>
     )
   }
@@ -182,24 +181,56 @@ GenericButton.displayName = "GenericButton"
 
 const renderCustomComponent = (
   CustomComponent: ComponentType<CustomButtonProps>,
-  props: RenderProps
+  props: RenderProps,
+  ref: Ref<HTMLSpanElement>
 ): JSX.Element => {
-  const { id, disabled, href, onClick, onFocus, onBlur, ...rest } = props
-  const customProps = getCustomProps(rest)
+  const passedInProps = {
+    id: props.id,
+    className: buttonClass(props),
+    disabled: props.disabled,
+    href: props.href,
+    onClick: props.onClick,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    "aria-label": generateAriaLabel(props),
+    ...getCustomProps(props),
+  }
+
+  const [contextProps, contextRef] = useContextProps(
+    passedInProps,
+    ref,
+    // @ts-expect-error we're using span ref on link context, but that's ok because we need only sizing
+    LinkContext
+  )
+  // @ts-expect-error
+  // @todo: Make a wrapper and take it out of Button
+  const { linkProps } = useLink(contextProps, contextRef)
+
+  // Unset this because the one defined in buttonProps shows
+  // focus-visible styles on click, in future we'll style using [data-focus-visible] which is consistent across browsers
+  delete linkProps.onPointerDown
+
   return (
-    <CustomComponent
-      id={id}
-      className={buttonClass(props)}
-      disabled={disabled}
-      href={href}
-      onClick={onClick}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      aria-label={generateAriaLabel(props)}
-      {...customProps}
+    <span
+      ref={contextRef}
+      className={classnames(
+        styles.container,
+        props.fullWidth && styles.fullWidth
+      )}
+      aria-live={"workingLabel" in props ? "polite" : undefined}
     >
-      {renderContent(props)}
-    </CustomComponent>
+      <CustomComponent
+        {...contextProps}
+        {...linkProps}
+        aria-describedby={
+          props["aria-describedby"] === null
+            ? undefined
+            : linkProps["aria-describedby"]
+        }
+      >
+        {renderContent(props)}
+      </CustomComponent>
+    </span>
   )
 }
 
@@ -207,51 +238,52 @@ const renderButton = (
   props: RenderProps,
   ref: Ref<HTMLButtonElement>
 ): JSX.Element => {
-  const {
-    id,
-    disabled,
-    onClick,
-    onMouseDown,
-    type,
-    disableTabFocusAndIUnderstandTheAccessibilityImplications,
-    onFocus,
-    onBlur,
-    form,
-    formAction,
-    formMethod,
-    formEncType,
-    formTarget,
-    formNoValidate,
-    ...rest
-  } = props
-  const customProps = getCustomProps(rest)
+  const disableActions = props.disabled || props.working
+  const passedInProps: React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > = {
+    id: props.id,
+    disabled: props.disabled,
+    onClick: !disableActions ? props.onClick : undefined,
+    onMouseDown: !disableActions ? props.onMouseDown : undefined,
+    type: props.type,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    form: props.form,
+    formAction: props.formAction,
+    formMethod: props.formMethod,
+    formEncType: props.formEncType,
+    formTarget: props.formTarget,
+    formNoValidate: props.formNoValidate,
+    className: buttonClass(props),
+    "aria-label": generateAriaLabel(props),
+    "aria-disabled": props.disabled || props.working ? true : undefined,
+    tabIndex: props.disableTabFocusAndIUnderstandTheAccessibilityImplications
+      ? -1
+      : undefined,
+    ...getCustomProps(props),
+  }
+
+  // we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
+  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
+  // @ts-ignore
+  const { focusableProps } = useFocusable(passedInProps, ref)
 
   return (
+    // eslint-disable-next-line react/button-has-type
     <button
-      // eslint-disable-next-line react/button-has-type
-      type={type}
-      id={id}
-      disabled={disabled}
-      className={buttonClass(props)}
-      onClick={onClick}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      onMouseDown={(e): void => onMouseDown && onMouseDown(e)}
-      aria-label={generateAriaLabel(props)}
-      aria-disabled={disabled || props.working ? true : undefined}
-      form={form}
-      formAction={formAction}
-      formMethod={formMethod}
-      formEncType={formEncType}
-      formTarget={formTarget}
-      formNoValidate={formNoValidate}
-      tabIndex={
-        disableTabFocusAndIUnderstandTheAccessibilityImplications
-          ? -1
-          : undefined
+      {...passedInProps}
+      {...focusableProps}
+      aria-describedby={
+        props["aria-describedby"] === null
+          ? undefined
+          : props["aria-describedby"] || focusableProps["aria-describedby"]
       }
+      // Unset this because the one defined in buttonProps shows
+      // focus-visible styles on click
+      onPointerDown={undefined}
       ref={ref}
-      {...customProps}
     >
       {renderContent(props)}
     </button>
@@ -262,34 +294,44 @@ const renderLink = (
   props: RenderProps,
   ref: Ref<HTMLAnchorElement>
 ): JSX.Element => {
-  const {
-    id,
-    href,
-    onClick,
-    newTabAndIUnderstandTheAccessibilityImplications,
-    onFocus,
-    onBlur,
-    ...rest
-  } = props
-  const customProps = getCustomProps(rest)
-
-  const target = newTabAndIUnderstandTheAccessibilityImplications
+  const target = props.newTabAndIUnderstandTheAccessibilityImplications
     ? "_blank"
     : "_self"
 
+  const passedInProps: React.DetailedHTMLProps<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > = {
+    id: props.id,
+    href: props.href,
+    target,
+    rel: target === "_blank" ? "noopener noreferrer" : undefined,
+    className: buttonClass(props),
+    onClick: props.onClick,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    "aria-label": generateAriaLabel(props),
+    ...getCustomProps(props),
+  }
+
+  // we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
+  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
+  // @ts-ignore
+  const { focusableProps } = useFocusable(passedInProps, ref)
+
   return (
     <a
-      id={id}
-      href={href}
-      target={target}
-      rel={target === "_blank" ? "noopener noreferrer" : undefined}
-      className={buttonClass(props)}
-      onClick={onClick}
-      onFocus={onFocus}
-      onBlur={onBlur}
+      {...passedInProps}
+      {...focusableProps}
+      aria-describedby={
+        props["aria-describedby"] === null
+          ? undefined
+          : props["aria-describedby"] || focusableProps["aria-describedby"]
+      }
+      // Unset this because the one defined in linkProps shows
+      // focus-visible styles on click
+      onPointerDown={undefined}
       ref={ref}
-      aria-label={generateAriaLabel(props)}
-      {...customProps}
     >
       {renderContent(props)}
     </a>
@@ -301,6 +343,8 @@ const buttonClass = (props: RenderProps): string => {
   return classnames(
     styles.button,
     isDefault && styles.default,
+    // @ts-ignore
+    (props.disabled || props["aria-disabled"]) && styles.disabled,
     props.primary && styles.primary,
     props.destructive && styles.destructive,
     props.secondary && styles.secondary,

package/src/Button/utils/_mixins.scss

@@ -2,7 +2,7 @@
   $background-color: undefined,
   $border-color: undefined
 ) {
-  &:not(:disabled) {
+  &:not(.disabled, .working) {
     &:hover,
     &:active,
     &:focus-visible {

package/src/ButtonGroup/ButtonGroup.tsx

@@ -4,7 +4,7 @@ import {
   FilterButtonBase,
   FilterButtonBaseProps,
 } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { Tooltip, TooltipProps } from "~components/Tooltip"
+import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./ButtonGroup.module.scss"
 

package/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { ClearIcon } from "~components/Icon"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { DataAttributes } from "~types/DataAttributes"
 import { isRefObject } from "~utils/isRefObject"
 import { FilterButton, FilterButtonProps } from "../FilterButton"

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -6,7 +6,7 @@ import { Heading, HeadingProps } from "~components/Heading"
 import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
-import { Tooltip, TooltipProps } from "~components/Tooltip"
+import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
 

package/src/KaizenProvider/KaizenProvider.tsx

@@ -27,13 +27,11 @@ export const KaizenProvider = ({
 
   return (
     <OptionalIntlProvider locale={locale}>
-      <>
-        <ToastNotificationProvider>
-          {notificationsList}
-          {children}
-        </ToastNotificationProvider>
-        <FontDefinitions />
-      </>
+      <ToastNotificationProvider>
+        {notificationsList}
+        {children}
+      </ToastNotificationProvider>
+      <FontDefinitions />
     </OptionalIntlProvider>
   )
 }