@kaizen/components 1.27.0 → 1.29.0

package/dist/cjs/dts/TitleBlockZen/subcomponents/SecondaryActions.d.ts

@@ -0,0 +1,11 @@
+import { SecondaryActionsProps, TitleBlockMenuItemProps } from "../types";
+type Props = {
+    secondaryActions?: SecondaryActionsProps;
+    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
+    reversed?: boolean;
+};
+export declare const SecondaryActions: {
+    ({ secondaryActions, secondaryOverflowMenuItems, reversed, }: Props): JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/cjs/dts/TitleBlockZen/subcomponents/TitleBlockMenuItem.d.ts

@@ -0,0 +1,9 @@
+import { CustomButtonProps } from "../../Button";
+import { MenuItemProps } from "../../Menu";
+export type TitleBlockMenuItemProps = ({
+    component: (props: CustomButtonProps) => JSX.Element;
+} & MenuItemProps) | MenuItemProps;
+export declare const TitleBlockMenuItem: {
+    (props: TitleBlockMenuItemProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/TitleBlockZen/subcomponents/Toolbar.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ButtonProps } from "../../Button";
+import { MenuProps } from "../../Menu";
+type ToolbarProps = {
+    items?: Array<{
+        key: string;
+        node: React.ReactElement<ButtonProps> | React.ReactElement<MenuProps>;
+    }>;
+    noGap?: boolean;
+    automationId?: string;
+};
+export declare const Toolbar: {
+    ({ items, noGap, automationId, }: ToolbarProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/cjs/dts/TitleBlockZen/types.d.ts

@@ -0,0 +1,148 @@
+/// <reference types="react" />
+import { CompanyAvatarProps, GenericAvatarProps } from "../Avatar";
+import { ButtonProps, CustomButtonProps } from "../Button";
+import { MenuItemProps } from "../Menu";
+import { Select } from "../Select";
+import { NavigationTabProps } from "./subcomponents/NavigationTabs";
+/**
+ * @param TitleBlockProps ### Accessing internal types of TitleBlockProps
+ * If you want access to types like `PrimaryActionProps` (for example, in the scenario
+ * where you want to create an object containing menu items to be passed in for the primary
+ * menu button), you can use the shorthand:
+ * ```
+ * const myMenu: TitleBlockProps["primaryAction"] = ...
+ * ```
+ * This will ensure that `myMenu` has a type of `PrimaryActionProps`.
+ */
+export type TitleBlockProps = {
+    children?: React.ReactNode;
+    title: string;
+    variant?: TitleBlockVariant;
+    breadcrumb?: TitleBlockBreadcrumbType;
+    avatar?: JSX.Element | TitleBlockAvatarProps;
+    subtitle?: React.ReactNode;
+    sectionTitle?: string;
+    sectionTitleDescription?: string;
+    renderSectionTitle?: (renderProps: SectionTitleRenderProps) => React.ReactNode;
+    pageSwitcherSelect?: TitleBlockSelectProps;
+    handleHamburgerClick?: (event: React.MouseEvent) => void;
+    primaryAction?: PrimaryActionProps;
+    defaultAction?: DefaultActionProps;
+    secondaryActions?: SecondaryActionsProps;
+    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
+    navigationTabs?: NavigationTabs;
+    collapseNavigationAreaWhenPossible?: boolean;
+    textDirection?: TextDirection;
+    surveyStatus?: SurveyStatus;
+    titleAutomationId?: string;
+    breadcrumbAutomationId?: string;
+    breadcrumbTextAutomationId?: string;
+    avatarAutomationId?: string;
+    subtitleAutomationId?: string;
+    sectionTitleAutomationId?: string;
+    sectionTitleDescriptionAutomationId?: string;
+};
+/**
+ * ### PrimaryActionProps
+ *
+ * The primary action (the "main" button in the top right) can either be a Button,
+ * or a Button that reveals a Menu (a menu button).
+ *
+ * For a button, pass in an object containing the same props you would normally use
+ * for a Button component.
+ *
+ * For a menu button, pass in a `MenuGroup`:
+ * ```typescript
+ * {
+ *   label: string
+ *   menuItems: MenuItemProps[]
+ * }
+ * ```
+ * Using the `label`, the Title Block will render a Button with a chevron icon and your `menuItems` will appear
+ * in the dropdown menu when you click it. (`MenuItemProps` is a type imported from the `Menu` component.)
+ */
+export type PrimaryActionProps = (TitleBlockMenuGroup & {
+    badge?: TitleBlockBadgeProps;
+}) | ((TitleBlockButtonProps | TitleBlockCustomButtonProps) & {
+    badge?: TitleBlockBadgeProps;
+});
+/**
+ * ### SecondaryActionsProps
+ *
+ * Secondary actions can only be buttons or button menus
+ * (a button that reveals a dropdown menu).
+ *
+ * **IMPORTANT:** The visual order of these from left to right should always be:
+ * ```text
+ * buttons -> menu buttons
+ * ```
+ *
+ * For a button, pass in an object containing the same props you would normally use
+ * for a Button component.
+ *
+ * For a menu button, pass in a `MenuGroup`:
+ *
+ * ```typescript
+ * {
+ *   label: string
+ *   menuItems: MenuItemProps[]
+ * }
+ * ```
+ * (`MenuItemProps` is imported from the Menu component.)
+ *
+ */
+export type SecondaryActionsProps = SecondaryActionItemProps[];
+export type SecondaryActionItemProps = TitleBlockMenuGroup | (ButtonWithHrefNotOnClick | ButtonWithOnClickNotHref | TitleBlockCustomButtonProps);
+export type TitleBlockBadgeProps = {
+    text: string;
+    animateChange?: boolean;
+};
+export type TitleBlockButtonProps = TitleBlockDistributiveOmit<ButtonProps, "onClick" | "component"> & {
+    onClick?: (e: any) => void;
+};
+export type TitleBlockCustomButtonProps = TitleBlockDistributiveOmit<TitleBlockButtonProps, "component"> & {
+    className?: string;
+    component: (props: CustomButtonProps) => JSX.Element;
+};
+export type TitleBlockMenuItemProps = (Omit<MenuItemProps, "action"> & {
+    action: ((e: any) => void) | string;
+}) | TitleBlockCustomButtonProps;
+export type ButtonWithHrefNotOnClick = TitleBlockDistributiveOmit<ButtonProps, "onClick">;
+export type ButtonWithOnClickNotHref = TitleBlockDistributiveOmit<TitleBlockButtonProps, "href">;
+export type TitleBlockMenuGroup = {
+    label: string;
+    menuItems: TitleBlockMenuItemProps[];
+};
+export type TitleBlockSelectProps = React.ComponentProps<typeof Select>;
+export type TitleBlockDistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+export type TitleBlockAvatarProps = Omit<GenericAvatarProps, "size"> | Omit<CompanyAvatarProps, "size">;
+export type DefaultActionProps = TitleBlockButtonProps | TitleBlockCustomButtonProps;
+export type SectionTitleRenderProps = Pick<TitleBlockProps, "sectionTitle" | "sectionTitleAutomationId" | "sectionTitleDescription" | "sectionTitleDescriptionAutomationId">;
+export type TitleBlockVariant = "admin" | "education";
+export type NavigationTabs = Array<React.ReactElement<NavigationTabProps>>;
+export type TextDirection = "ltr" | "rtl";
+export type SurveyStatus = {
+    text: string;
+    status: "draft" | "live" | "scheduled" | "closed" | "default";
+};
+export type TitleBlockBreadcrumbType = {
+    text: string;
+    path?: string;
+    handleClick?: (event: React.MouseEvent) => void;
+    /**
+     * Custom render for the breadcrumb. Commonly used to replace the parent link with a router link component.
+     * Props given to the breadcrumb component will be passed back, along with a decorated className and children.
+     * It is up to you to reapply them to your custom component.
+     */
+    render?: (props: CustomBreadcrumbProps) => JSX.Element;
+};
+export type TitleBlockBreadcrumbProps = {
+    breadcrumb: TitleBlockBreadcrumbType;
+    automationId: string;
+    textAutomationId: string;
+    textDirection?: TextDirection;
+};
+export type CustomBreadcrumbProps = TitleBlockBreadcrumbProps & {
+    className: string;
+    children: React.ReactNode;
+};

package/dist/cjs/dts/TitleBlockZen/utils.d.ts

@@ -0,0 +1,8 @@
+import { MenuItemProps } from "../Menu";
+import { TitleBlockButtonProps, TitleBlockCustomButtonProps, TitleBlockMenuGroup, TitleBlockVariant, SecondaryActionsProps, TitleBlockMenuItemProps } from "./types";
+export declare const isMenuItemNotButton: (value: TitleBlockButtonProps | MenuItemProps) => value is MenuItemProps;
+export declare const isMenuGroupNotButton: (value: (TitleBlockButtonProps | TitleBlockCustomButtonProps) | TitleBlockMenuGroup) => value is TitleBlockMenuGroup;
+export declare const NON_REVERSED_VARIANTS: string[];
+export declare const isReversed: (variant: TitleBlockVariant | undefined) => boolean;
+export declare const convertSecondaryActionsToMenuItems: (secondaryActions: SecondaryActionsProps) => TitleBlockMenuItemProps[];
+export declare const createTabletOverflowMenuItems: (secondaryActions?: SecondaryActionsProps, secondaryOverflowMenuItems?: TitleBlockMenuItemProps[]) => TitleBlockMenuItemProps[];

package/dist/cjs/dts/Tooltip/Tooltip.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+type Position = "above" | "below" | "left" | "right";
+type Mood = "default" | "informative" | "positive" | "cautionary" | "highlight";
+export type TooltipProps = {
+    /**
+     * Unfortunately, the content needed to be wrapped in a div. This can sometimes
+     * break the css layout. To get around this, we allow you to specify the css
+     * display value directly. If you need to need to modify more values, feel free
+     * to use the `classNameOverride` prop, but avoid it if you can.
+     */
+    display?: "block" | "inline" | "inline-block" | "flex" | "inline-flex";
+    /**
+     * This is more a "desired position". The tooltip will automatically change
+     * its position, if there's not enough room to show it in the one specified.
+     */
+    position?: Position;
+    /** The text content for the tooltip */
+    text: React.ReactNode;
+    /**
+     * This is the interactable element that is being described by the tooltip `text`
+     */
+    children?: React.ReactNode;
+    classNameOverride?: string;
+    mood?: Mood;
+    /**
+     * Render the tooltip inside a react portal, given the ccs selector.
+     * This is typically used for instances where the menu is a descendant of an
+     * `overflow: scroll` or `overflow: hidden` element.
+     */
+    portalSelector?: string;
+    /**
+     * Should the tooltip be visible on the first render. Useful for visual
+     * regression testing.
+     */
+    isInitiallyVisible?: boolean;
+    animationDuration?: number;
+};
+export declare const Tooltip: {
+    ({ children, text, display, position, classNameOverride, portalSelector, animationDuration, isInitiallyVisible, mood, }: TooltipProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/cjs/dts/Tooltip/index.d.ts

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

package/dist/cjs/dts/Tooltip/subcomponents/AppearanceAnim.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+type AnimationProps = {
+    isAnimIn?: boolean;
+    isAnimOut?: boolean;
+    prevIsOpen?: boolean;
+    animationDuration?: number;
+    isVisible: boolean;
+};
+export declare const AnimationContext: React.Context<AnimationProps>;
+/**
+ * Simply applies a css animation to transition a component in and out.
+ * When the component is no longer needed, it will no longer be rendered to the
+ * dom.
+ */
+export declare const AnimationProvider: ({ isVisible, animationDuration, ...otherProps }: AnimationProps & {
+    children?: React.ReactNode;
+}) => JSX.Element;
+export declare const useAnimation: () => AnimationProps;
+export {};

package/dist/cjs/dts/Tooltip/utils/isSemanticElement.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } 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>>;

package/dist/cjs/dts/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ProgressStepperProps = {
     stepName: string;
     steps: [string, ...string[]];

package/dist/cjs/dts/Workflow/subcomponents/Header/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WorkflowTitlesProps, WorkflowActionsProps } from "./components";
 export type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps;
 export declare const Header: {

package/dist/cjs/dts/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectOption, SelectOptionGroupNode } from "../../types";
 export type ListBoxSectionProps<Option extends SelectOption> = {
     section: SelectOptionGroupNode<Option>;

package/dist/cjs/dts/__future__/Select/subcomponents/ListItem/ListItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectItemNode, SelectOption } from "../../types";
 export type ListItemProps<Option extends SelectOption = SelectOption> = {
     item: SelectItemNode<Option>;

package/dist/cjs/dts/__future__/Select/subcomponents/ListItems/ListItems.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectOption } from "../../types";
 import { ListItemProps } from "../ListItem";
 export type ListItemsProps<Option extends SelectOption> = {

package/dist/cjs/dts/__future__/Select/subcomponents/SectionDivider/SectionDivider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const SectionDivider: {
     (): JSX.Element;
     displayName: string;

package/dist/cjs/dts/__future__/Tag/RemovableTag/RemovableTag.d.ts

@@ -0,0 +1,9 @@
+import { TagProps } from "../Tag";
+import { RemoveButtonBaseProps } from "./subcomponents/RemoveButton";
+export type RemovableTagProps = {
+    removeButtonProps: RemoveButtonBaseProps;
+} & Omit<TagProps, "color" | "icon">;
+export declare const RemovableTag: {
+    ({ children, classNameOverride, removeButtonProps, ...restProps }: RemovableTagProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/__future__/Tag/RemovableTag/index.d.ts

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

package/dist/cjs/dts/__future__/Tag/RemovableTag/subcomponents/RemoveButton.d.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from "react";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
+export type RemoveButtonBaseProps = {
+    ariaLabel: string;
+    onClick: () => void;
+};
+export type RemoveButtonProps = OverrideClassName<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "color"> & RemoveButtonBaseProps>;
+export declare const RemoveButton: {
+    ({ classNameOverride, ariaLabel, onClick, ...restProps }: RemoveButtonProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from "../../../../Icon/subcomponents/SVG";
+export declare const RemoveTagIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/__future__/Tag/{Tag.d.ts → Tag/Tag.d.ts}

@@ -1,5 +1,5 @@
 import React, { ReactNode, HTMLAttributes } from "react";
-import { OverrideClassName } from "../../types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 import { TagColors } from "./types";
 export type TagProps = {
     children: ReactNode;
@@ -7,6 +7,6 @@ export type TagProps = {
     icon?: React.ReactElement;
 } & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
 export declare const Tag: {
-    ({ children, classNameOverride, icon, color, }: TagProps): JSX.Element;
+    ({ children, classNameOverride, icon, color, ...restProps }: TagProps): JSX.Element;
     displayName: string;
 };

package/dist/cjs/dts/__future__/Tag/Tag/index.d.ts

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

package/dist/cjs/dts/__future__/Tag/index.d.ts

@@ -1 +1,2 @@
+export * from "./RemovableTag";
 export * from "./Tag";

package/dist/cjs/dts/__future__/Workflow/subcomponents/Footer/Footer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { ProgressStepperProps, FooterRootProps } from "./components";
 export type FooterProps = {

package/dist/cjs/dts/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Step = {
     id: string;
     label: string;

package/dist/cjs/dts/__future__/Workflow/subcomponents/Header/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WorkflowActionsProps, WorkflowTitlesProps } from "./components";
 export type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps;
 export declare const Header: {

package/dist/cjs/dts/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./types/DatePicker";
 export * from "./Avatar";
 export * from "./AvatarGroup";
 export * from "./Badge";
@@ -6,10 +5,16 @@ export * from "./Brand";
 export * from "./BrandMoment";
 export * from "./Button";
 export * from "./ButtonGroup";
+export * from "./Calendar";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./ClearButton";
 export * from "./Collapsible";
+export * from "./Container";
+export * from "./Content";
+export * from "./DateInput";
+export * from "./DatePicker";
+export * from "./DateRangePicker";
 export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorPage";
@@ -24,16 +29,29 @@ export * from "./FilterMultiSelect";
 export * from "./FilterSelect";
 export * from "./Heading";
 export * from "./Icon";
+export * from "./Illustration";
 export * from "./Input";
 export * from "./KaizenProvider";
 export * from "./Label";
 export * from "./LabelledMessage";
+export * from "./Loading";
+export * from "./Menu";
+export * from "./Modal";
 export * from "./Notification";
+export * from "./Pagination";
+export * from "./Popover";
 export * from "./Radio";
 export * from "./SearchField";
+export * from "./Select";
+export * from "./Skirt";
 export * from "./Slider";
+export * from "./SplitButton";
+export * from "./Table";
 export * from "./Text";
-export * from "./Workflow";
 export * from "./TextField";
 export * from "./TextArea";
 export * from "./TextAreaField";
+export * from "./Tile";
+export * from "./TimeField";
+export * from "./Tooltip";
+export * from "./Workflow";

package/dist/cjs/dts/utils/AppearanceAnim.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type AppearanceAnimProps = {
+    children: React.ReactNode;
+    isVisible: boolean;
+    className?: string | null;
+};
+/**
+ * Simply applies a css animation to transition a component in and out.
+ * When the component is no longer needed, it will no longer be rendered to the
+ * dom.
+ */
+export declare const AppearanceAnim: {
+    ({ children, isVisible, className, ...rest }: AppearanceAnimProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/cjs/dts/utils/useMediaQueries.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+type Props = {
+    [key: string]: string;
+};
+type GenericChildrenType = {
+    children?: ReactNode;
+};
+export declare const subtractOnePixel: (breakpoint: string) => string;
+export declare const useMediaQueries: (propQueries?: Props) => {
+    queries: {
+        [key: string]: boolean;
+        isSmall: boolean;
+        isMedium: boolean;
+        isLarge: boolean;
+        isMediumOrSmaller: boolean;
+        isMediumOrLarger: boolean;
+    };
+    components: {
+        [key: string]: (props: GenericChildrenType) => JSX.Element;
+        SmallOnly: (props: GenericChildrenType) => JSX.Element;
+        MediumOnly: (props: GenericChildrenType) => JSX.Element;
+        LargeOnly: (props: GenericChildrenType) => JSX.Element;
+        MediumOrSmaller: (props: GenericChildrenType) => JSX.Element;
+        MediumOrLarger: (props: GenericChildrenType) => JSX.Element;
+    };
+};
+export {};

package/dist/cjs/dts/utils/useResizeObserver.d.ts

@@ -0,0 +1,21 @@
+import React, { Ref } from "react";
+export interface DOMRectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+}
+/**
+ * Hook for observing changes to a DOM element via ResizeObserver.
+ *
+ * @param {resolveEntryCallback} resolveEntry - Callback for resolving the
+ * desired value from each ResizeObserverEntry emitted by ResizeObserver
+ * @return {Array} An array containing a ref for binding to the observed DOM
+ * element, and the current value of the callback-resolved ResizeObserverEntry
+ * @callback resolveEntryCallback
+ */
+export declare const useResizeObserver: <T, E extends Element = HTMLElement>(resolveEntry?: (entry: ResizeObserverEntry) => any) => [React.Ref<E>, T | undefined];

package/dist/cjs/future.cjs

@@ -1,9 +1,11 @@
 'use strict';
 
 var Select = require('./__future__/Select/Select.cjs');
-var Tag = require('./__future__/Tag/Tag.cjs');
+var RemovableTag = require('./__future__/Tag/RemovableTag/RemovableTag.cjs');
+var Tag = require('./__future__/Tag/Tag/Tag.cjs');
 var Workflow = require('./__future__/Workflow/Workflow.cjs');
 exports.Select = Select.Select;
+exports.RemovableTag = RemovableTag.RemovableTag;
 exports.Tag = Tag.Tag;
 exports.Workflow = Workflow.Workflow;
 //# sourceMappingURL=future.cjs.map

package/dist/cjs/future.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"future.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"future.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}