@kaizen/components 1.50.0 → 1.52.0

package/dist/types/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { FilterButtonBaseProps } from "../Filter/FilterButton/subcomponents/FilterButtonBase";
-import { TooltipProps } from "../Tooltip";
+import { TooltipProps } from "../__overlays__/Tooltip/v1";
 import { OverrideClassName } from "../types/OverrideClassName";
 export type ButtonGroupProps = {
     children: React.ReactElement<FilterButtonBaseProps | TooltipProps> | Array<React.ReactElement<FilterButtonBaseProps | TooltipProps>>;

package/dist/types/Container/Container.d.ts

@@ -4,7 +4,7 @@ import React from "react";
  * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
  */
 export declare const Container: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
+    children?: any;
     style?: Pick<React.CSSProperties, "transform" | "left" | "right" | "bottom" | "top" | "position" | "padding" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "transformBox" | "transformOrigin" | "transformStyle"> | undefined;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
     classNameOverride?: string | undefined;

package/dist/types/Content/Content.d.ts

@@ -12,7 +12,7 @@ export type ContentProps = {
  * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
  */
 export declare const Content: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
+    children?: any;
     /**
      * Not recommended. A short-circuit for dynamically overriding layout in a pinch
      */

package/dist/types/DateInput/DateInput/DateInput.d.ts

@@ -6,7 +6,7 @@ export type DateInputProps = {
     isReversed?: boolean;
 } & Omit<InputProps, OmittedInputProps>;
 export declare const DateInput: React.ForwardRefExoticComponent<{
-    labelText: React.ReactNode;
+    labelText: any;
     isReversed?: boolean | undefined;
 } & Omit<InputProps, OmittedInputProps> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/types/DatePicker/subcomponents/DateInputField/DateInputField.d.ts

@@ -29,7 +29,7 @@ export declare const DateInputField: React.ForwardRefExoticComponent<{
     /**
      * A descriptive message for `status` states
      */
-    validationMessage?: React.ReactNode;
+    validationMessage?: any;
     locale?: Locale | undefined;
 } & {
     onButtonClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/types/Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.d.ts

@@ -4,7 +4,7 @@ export type FilterButtonBaseProps = {
     children: React.ReactNode;
 } & OverrideClassName<ButtonHTMLAttributes<HTMLButtonElement>>;
 export declare const FilterButtonBase: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
+    children: any;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
     classNameOverride?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.d.ts

@@ -24,5 +24,5 @@ export declare const DateInputField: React.ForwardRefExoticComponent<{
     isReversed?: boolean | undefined;
     validationMessage?: ValidationMessage | undefined;
     disabled?: boolean | undefined;
-    labelText?: DateInputProps["labelText"];
+    labelText?: any;
 } & Omit<DateInputProps, "id" | "labelText"> & React.RefAttributes<HTMLInputElement>>;

package/dist/types/GuidanceBlock/GuidanceBlock.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ButtonProps } from "../Button";
 import { HeadingProps } from "../Heading";
 import { SceneProps, SpotProps } from "../Illustration";
-import { TooltipProps } from "../Tooltip";
+import { TooltipProps } from "../__overlays__/Tooltip/v1";
 import { VariantType } from "./types";
 export type ActionProps = ButtonProps & {
     tooltip?: TooltipProps;

package/dist/types/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
+import { ReactNode } from "react";
 type Props = {
     locale: string;
-    children: React.ReactElement;
+    children: ReactNode;
 };
 export declare const OptionalIntlProvider: {
     ({ locale, children, }: Props): JSX.Element;

package/dist/types/Notification/subcomponents/GenericNotification/GenericNotification.d.ts

@@ -12,7 +12,7 @@ export type GenericNotificationProps = {
     noBottomMargin?: boolean;
     forceMultiline?: boolean;
     headingProps?: HeadingProps;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+} & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, "style">;
 export declare const GenericNotification: {
     ({ type, style, children, title, persistent, onHide, noBottomMargin, forceMultiline, headingProps, classNameOverride, ...restProps }: GenericNotificationProps): JSX.Element | null;
     displayName: string;

package/dist/types/Select/Select.d.ts

@@ -42,9 +42,9 @@ export declare const Select: React.ForwardRefExoticComponent<{
      */
     variant?: "default" | "secondary" | "secondary-small" | undefined;
     status?: "error" | "default" | undefined;
-    label?: React.ReactNode;
-    validationMessage?: React.ReactNode;
-    description?: React.ReactNode;
+    label?: any;
+    validationMessage?: any;
+    description?: any;
     /**
      * Use a reversed colour scheme
      * @default false

package/dist/types/__future__/Select/Select.d.ts

@@ -70,9 +70,9 @@ export declare const Select: {
         displayName: string;
     };
     TriggerButton: React.ForwardRefExoticComponent<{
-        label: React.ReactNode;
+        label: any;
         labelProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
-        value: React.ReactNode;
+        value: any;
         valueProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
         isOpen?: boolean | undefined;
         placeholder?: string | undefined;

package/dist/types/__future__/Select/subcomponents/SelectToggle/SelectToggle.d.ts

@@ -20,9 +20,9 @@ export type SelectToggleProps = {
     isReversed?: boolean;
 } & OverrideClassName<HTMLAttributes<HTMLButtonElement>>;
 export declare const SelectToggle: React.ForwardRefExoticComponent<{
-    label: React.ReactNode;
+    label: any;
     labelProps: DOMAttributes<FocusableElement>;
-    value: React.ReactNode;
+    value: any;
     /** Props for the element representing the selected value. */
     valueProps: DOMAttributes<FocusableElement>;
     isOpen?: boolean | undefined;

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { FocusableOptions } from "react-aria";
+export type FocusableProps = {
+    children: ReactNode;
+} & FocusableOptions & HTMLAttributes<HTMLDivElement>;
+export declare const Focusable: ({ children, className, ...props }: FocusableProps) => JSX.Element;

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

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

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.50.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} {