@kaizen/components 1.27.0 → 1.28.0

package/dist/esm/dts/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from "react";
-import { CalendarRangeProps } from "@kaizen/date-picker/src/_subcomponents/Calendar";
+import { CalendarRangeProps, DateRange, DisabledDays } from "../../../Calendar";
+import { DatePickerSupportedLocales } from "../../../DatePicker/utils/getLocale";
 import { DateValidationResponse } from "../../../FilterDatePicker";
 import { DataAttributes } from "../../../types/DataAttributes";
-import { DateRange, DisabledDays, FilterDateSupportedLocales } from "../../../types/DatePicker";
 import { OverrideClassName } from "../../../types/OverrideClassName";
 import { DateRangeInputFieldProps } from "../DateRangeInputField";
 import { DateRangeFieldValidationMessage } from "./types";
@@ -12,7 +12,7 @@ type FilterInputProps<InputProps> = Omit<Partial<InputProps>, "value"> & DataAtt
 export type FilterDateRangePickerFieldProps = {
     id: string;
     label: string;
-    locale: FilterDateSupportedLocales;
+    locale: DatePickerSupportedLocales;
     /**
      * Sets first displayed month to month of provided date if there isn't a date set.
      */

package/dist/esm/dts/FilterDateRangePicker/utils/isCompleteDateRange.d.ts

@@ -1,4 +1,4 @@
-import { DateRange } from "../../types/DatePicker";
+import { DateRange } from "../../Calendar";
 export declare const isCompleteDateRange: (dateRange: DateRange | undefined) => dateRange is {
     from: Date;
     to: Date;

package/dist/esm/dts/Modal/ConfirmationModal/ConfirmationModal.d.ts

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes } from "react";
+export type ConfirmationModalProps = {
+    isOpen: boolean;
+    unpadded?: boolean;
+    /**
+     * To display the Prominent variation of the modal types
+     */
+    isProminent?: boolean;
+    /**
+     * Defines the modal type or mood
+     */
+    mood: Mood;
+    title: string;
+    onConfirm?: () => void;
+    onDismiss: () => void;
+    onAfterLeave?: () => void;
+    confirmLabel?: string;
+    dismissLabel?: string;
+    confirmWorking?: {
+        label: string;
+        labelHidden?: boolean;
+    };
+    /**
+     * @deprecated Please use data-testid
+     */
+    automationId?: string;
+    children: React.ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive";
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}
+ */
+export declare const ConfirmationModal: {
+    ({ isOpen, isProminent, unpadded, mood, title, onConfirm, onAfterLeave, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, ...props }: ConfirmationModalProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/esm/dts/Modal/ConfirmationModal/index.d.ts

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

package/dist/esm/dts/Modal/ContextModal/ContextModal.d.ts

@@ -0,0 +1,40 @@
+import React, { HTMLAttributes } from "react";
+export type ContextModalSecondaryActionProps = {
+    secondaryLabel: string;
+    onSecondaryAction: () => void;
+} | {
+    secondaryLabel?: undefined;
+};
+export type ContextModalProps = Readonly<{
+    isOpen: boolean;
+    unpadded?: boolean;
+    /**
+     * Defines the orientation layout of the image and content
+     */
+    layout?: "portrait" | "landscape";
+    title: string;
+    onConfirm?: () => void;
+    onDismiss: () => void;
+    onAfterLeave?: () => void;
+    confirmLabel?: string;
+    confirmWorking?: {
+        label: string;
+        labelHidden?: boolean;
+    };
+    /**
+     * @deprecated use data-testid instead
+     */
+    automationId?: string;
+    renderBackground?: () => React.ReactNode;
+    image?: React.ReactNode;
+    children: React.ReactNode;
+    contentHeader?: React.ReactNode;
+} & ContextModalSecondaryActionProps & HTMLAttributes<HTMLDivElement>>;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-modals--contextmodal--docs Storybook}
+ */
+export declare const ContextModal: {
+    ({ isOpen, unpadded, layout, title, onConfirm, onAfterLeave, confirmLabel, confirmWorking, renderBackground, children, contentHeader, image, ...props }: ContextModalProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/Modal/ContextModal/index.d.ts

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

package/dist/esm/dts/Modal/GenericModal/GenericModal.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type GenericModalProps = {
+    id?: string;
+    isOpen: boolean;
+    children: React.ReactNode;
+    focusLockDisabled?: boolean;
+    onEscapeKeyup?: (event: KeyboardEvent) => void;
+    onOutsideModalClick?: (event: React.MouseEvent) => void;
+    onAfterLeave?: () => void;
+};
+export declare const GenericModal: {
+    ({ id: propsId, children, isOpen, focusLockDisabled, onEscapeKeyup, onOutsideModalClick, onAfterLeave: propsOnAfterLeave, }: GenericModalProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/Modal/GenericModal/context/ModalContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type ModalContextType = {
+    labelledByID: string;
+    describedByID: string;
+};
+export declare const ModalContext: import("react").Context<ModalContextType>;

package/dist/esm/dts/Modal/GenericModal/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./GenericModal";
+export * from "./context/ModalContext";
+export * from "./subcomponents/ModalAccessibleDescription";
+export * from "./subcomponents/ModalFooter";
+export * from "./subcomponents/ModalHeader";
+export * from "./subcomponents/ModalAccessibleLabel";
+export * from "./subcomponents/ModalBody";

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type ModalAccessibleDescriptionProps = {
+    children: React.ReactNode;
+};
+export declare const ModalAccessibleDescription: {
+    ({ children, }: ModalAccessibleDescriptionProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalAccessibleDescription/index.d.ts

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

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type ModalAccessibleLabelProps = {
+    children: React.ReactNode;
+    isProminent?: boolean;
+};
+export declare const ModalAccessibleLabel: {
+    ({ children, isProminent, }: ModalAccessibleLabelProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalAccessibleLabel/index.d.ts

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

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalBody/ModalBody.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type ModalBodyProps = {
+    inputEdit?: boolean;
+    children: React.ReactNode;
+};
+export declare const ModalBody: {
+    ({ inputEdit, children, }: ModalBodyProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalBody/index.d.ts

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

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from "react";
+import { ButtonProps } from "../../../../Button";
+type ActionsVariantProps = "context" | "inputEdit";
+export type ModalFooterProps = {
+    /**
+     * We have a special case for the InformationModal when it has an image.
+     * Since this modal may have an image on the right side the actions might look disconected from the content.
+     * So for this instance we need to flip the order of the actions so that the primary
+     * action is anchored to the left edge of the modal.
+     * For this rare instance added the variant prop as optional to update the order of action buttons.
+     */
+    variant?: ActionsVariantProps;
+    unpadded?: boolean;
+    actions: ButtonProps[];
+    appearance?: "primary" | "destructive";
+    /**
+     * @deprecated Please use data-testid
+     */
+    automationId?: string;
+    alignStart?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ModalFooter: {
+    ({ unpadded, actions, appearance, alignStart, variant, ...props }: ModalFooterProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalFooter/index.d.ts

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

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type ModalHeaderProps = {
+    unpadded?: boolean;
+    reversed?: boolean;
+    onDismiss?: (evt: React.MouseEvent) => void;
+    children: React.ReactNode;
+};
+export declare const ModalHeader: {
+    ({ reversed, onDismiss, children, }: ModalHeaderProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/Modal/GenericModal/subcomponents/ModalHeader/index.d.ts

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

package/dist/esm/dts/Modal/InputEditModal/InputEditModal.d.ts

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes } from "react";
+export type InputEditModalProps = {
+    isOpen: boolean;
+    unpadded?: boolean;
+    mood: "positive" | "destructive";
+    title: string;
+    onSubmit: () => void;
+    onSecondaryAction?: () => void;
+    onDismiss: () => void;
+    onAfterLeave?: () => void;
+    localeDirection?: "rtl" | "ltr";
+    submitLabel?: string;
+    dismissLabel?: string;
+    secondaryLabel?: string;
+    /**
+     * @deprecated Please use data-testid
+     */
+    automationId?: string;
+    children: React.ReactNode;
+    submitWorking?: {
+        label: string;
+        labelHidden?: boolean;
+    };
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-modals-inputeditmodal--docs Storybook}
+ */
+export declare const InputEditModal: {
+    ({ isOpen, mood, title, onSubmit, onSecondaryAction, onAfterLeave, localeDirection, submitLabel, dismissLabel, secondaryLabel, submitWorking, children, unpadded, onDismiss: propsOnDismiss, ...props }: InputEditModalProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/Modal/InputEditModal/index.d.ts

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

package/dist/esm/dts/Modal/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ConfirmationModal";
+export * from "./ContextModal";
+export * from "./GenericModal";
+export * from "./InputEditModal";

package/dist/esm/dts/Modal/util/console.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated Do not use ever again
+ */
+export declare const warn: (message: string) => void;
+export declare const singleLine: (message: string) => string;

package/dist/esm/dts/Radio/Radio/Radio.d.ts

@@ -1,12 +1,12 @@
 import { InputHTMLAttributes } from "react";
 import { OverrideClassName } from "../../types/OverrideClassName";
-export type RadioProps = OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked">> & {
-    /**
-     * This needs to be enforced to ensure the Radio always gets an id to match a label when composed.
-     */
+export type RadioProps = OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "name" | "value" | "checked" | "type">> & {
+    /** Required to ensure the Radio always gets an ID to match a label when composed. */
     id: string;
+    /** Unique identifier for the group this Radio belongs to. Required for keyboard navigation of the group. See also [Defining a radio group](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group) on MDN. E.g. the question ID for which this is one possible answer to. */
     name: string;
-    value: string;
+    /** The value for this form field when this radio button is selected. */
+    value?: string | readonly string[] | number;
     selectedStatus?: boolean;
     reversed?: boolean;
 };

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

@@ -1,4 +1,3 @@
-export * from "./types/DatePicker";
 export * from "./Avatar";
 export * from "./AvatarGroup";
 export * from "./Badge";
@@ -6,10 +5,14 @@ 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 "./DateInput";
+export * from "./DatePicker";
+export * from "./DateRangePicker";
 export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorPage";
@@ -28,6 +31,7 @@ export * from "./Input";
 export * from "./KaizenProvider";
 export * from "./Label";
 export * from "./LabelledMessage";
+export * from "./Modal";
 export * from "./Notification";
 export * from "./Radio";
 export * from "./SearchField";

package/dist/esm/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 {};