@kaizen/components 1.9.0 → 1.11.0

package/dist/index.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import React$1, { HTMLAttributes, ButtonHTMLAttributes, CSSProperties, Context, ReactNode, PropsWithChildren } from 'react';
-import { TooltipProps } from '@kaizen/draft-tooltip';
+import React$1, { HTMLAttributes, ButtonHTMLAttributes, CSSProperties, Context, ReactNode } from 'react';
 import { Node } from '@react-types/shared';
 import { SelectProps } from '@react-stately/select';
+import { TooltipProps } from '@kaizen/draft-tooltip';
 import * as _kaizen_design_tokens from '@kaizen/design-tokens';
 import { Theme as Theme$1 } from '@kaizen/design-tokens';
 import { DefaultTagProps } from '@kaizen/draft-tag';
-import { ConfirmationModalProps } from '@kaizen/draft-modal';
 
 type OverrideClassName<T extends Record<string, any>> = Omit<T, "className"> & {
     classNameOverride?: string;
@@ -28,7 +27,7 @@ interface FilterProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>>
     };
     onMount?: (triggerRef: React$1.RefObject<HTMLButtonElement>) => void;
 }
-declare const Filter: {
+declare const Filter$1: {
     ({ children, isOpen, setIsOpen, renderTrigger, classNameOverride, onMount, ...restProps }: FilterProps): JSX.Element;
     displayName: string;
 };
@@ -41,36 +40,6 @@ declare const FilterContents: {
     displayName: string;
 };
 
-interface FilterButtonBaseProps extends OverrideClassName<ButtonHTMLAttributes<HTMLButtonElement>> {
-    children: React$1.ReactNode;
-}
-
-interface FilterButtonProps extends Omit<FilterButtonBaseProps, "children"> {
-    label: string;
-    selectedValue?: string | JSX.Element;
-    isOpen?: boolean;
-}
-declare const FilterButton: React$1.ForwardRefExoticComponent<FilterButtonProps & React$1.RefAttributes<FilterTriggerRef>>;
-
-type DataAttributes = {
-    [key: `data-${string}`]: string | undefined;
-};
-
-interface ButtonGroupProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
-    children: React$1.ReactElement<FilterButtonBaseProps | TooltipProps> | Array<React$1.ReactElement<FilterButtonBaseProps | TooltipProps>>;
-}
-
-interface FilterButtonRemovableProps extends Omit<ButtonGroupProps, "children"> {
-    triggerButtonProps: FilterButtonProps & DataAttributes;
-    removeButtonProps: Partial<Omit<FilterButtonBaseProps, "children">> & DataAttributes & {
-        tooltipText?: string;
-    };
-}
-type FilterButtonRemovableRefs = FilterTriggerRef & {
-    removeButtonRef?: React$1.RefObject<HTMLButtonElement>;
-};
-declare const FilterButtonRemovable: React$1.ForwardRefExoticComponent<FilterButtonRemovableProps & React$1.RefAttributes<FilterButtonRemovableRefs>>;
-
 type SelectOption = {
     label: string;
     value: React.Key;
@@ -105,6 +74,36 @@ interface ListBoxSectionProps<Option extends SelectOption> {
     section: SelectOptionGroupNode<Option>;
 }
 
+interface FilterButtonBaseProps extends OverrideClassName<ButtonHTMLAttributes<HTMLButtonElement>> {
+    children: React$1.ReactNode;
+}
+
+interface FilterButtonProps extends Omit<FilterButtonBaseProps, "children"> {
+    label: string;
+    selectedValue?: string | JSX.Element;
+    isOpen?: boolean;
+}
+declare const FilterButton: React$1.ForwardRefExoticComponent<FilterButtonProps & React$1.RefAttributes<FilterTriggerRef>>;
+
+type DataAttributes = {
+    [key: `data-${string}`]: string | undefined;
+};
+
+interface ButtonGroupProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    children: React$1.ReactElement<FilterButtonBaseProps | TooltipProps> | Array<React$1.ReactElement<FilterButtonBaseProps | TooltipProps>>;
+}
+
+interface FilterButtonRemovableProps extends Omit<ButtonGroupProps, "children"> {
+    triggerButtonProps: FilterButtonProps & DataAttributes;
+    removeButtonProps: Partial<Omit<FilterButtonBaseProps, "children">> & DataAttributes & {
+        tooltipText?: string;
+    };
+}
+type FilterButtonRemovableRefs = FilterTriggerRef & {
+    removeButtonRef?: React$1.RefObject<HTMLButtonElement>;
+};
+declare const FilterButtonRemovable: React$1.ForwardRefExoticComponent<FilterButtonRemovableProps & React$1.RefAttributes<FilterButtonRemovableRefs>>;
+
 type OmittedAriaSelectProps = "label" | "children" | "isOpen" | "onOpenChange" | "defaultOpen" | "items";
 interface FilterSelectProps<Option extends SelectOption = SelectOption> extends OverrideClassName<Omit<SelectProps<Option>, OmittedAriaSelectProps>> {
     isOpen: boolean;
@@ -117,7 +116,7 @@ interface FilterSelectProps<Option extends SelectOption = SelectOption> extends
     items: Array<SelectItem<Option>>;
 }
 declare const FilterSelect: {
-    <Option extends SelectOption = SelectOption>({ isOpen, setIsOpen, renderTrigger, label, children, items, classNameOverride, ...restProps }: FilterSelectProps<Option>): JSX.Element;
+    <Option extends SelectOption = SelectOption>({ isOpen, setIsOpen, renderTrigger, label, children, items, classNameOverride, selectedKey, ...restProps }: FilterSelectProps<Option>): JSX.Element;
     displayName: string;
     Section: {
         <Option_1 extends SelectOption = SelectOption>({ section, }: ListBoxSectionProps<Option_1>): JSX.Element;
@@ -137,6 +136,53 @@ declare const FilterSelect: {
     };
 };
 
+type FilterBarSelectProps<Option extends SelectOption = SelectOption> = Omit<FilterSelectProps<Option>, "isOpen" | "setIsOpen" | "renderTrigger" | "label" | "selectedKey"> & {
+    id?: string;
+};
+
+type FiltersValues = Record<string, any>;
+type FilterState<Id, Value> = {
+    id: Id;
+    name: string;
+    Component: React.ReactElement;
+    value?: Value;
+    isOpen: boolean;
+};
+type FiltersState<ValuesMap extends FiltersValues> = {
+    [K in keyof ValuesMap]: FilterState<K, ValuesMap[K]>;
+};
+
+type Filter<ValuesMap extends FiltersValues> = {
+    id: keyof ValuesMap;
+    name: string;
+    Component: React.ReactElement;
+};
+type Filters<ValuesMap extends FiltersValues> = Array<Filter<ValuesMap>>;
+
+type FilterBarContextValue<Value, ValuesMap extends FiltersValues = Record<string, Value>> = {
+    getFilterState: (id: keyof ValuesMap) => FilterState<keyof ValuesMap, Value>;
+    toggleOpenFilter: (id: keyof ValuesMap, isOpen: boolean) => void;
+    updateValue: (id: keyof ValuesMap, value: Value) => void;
+};
+declare const useFilterBarContext: <Value, Values extends FiltersValues = Record<string, Value>>() => FilterBarContextValue<Value, Values>;
+type FilterBarProviderProps<ValuesMap extends FiltersValues> = {
+    children: (activeFilters: FiltersState<ValuesMap>) => JSX.Element;
+    filters: Filters<ValuesMap>;
+    values: Partial<ValuesMap>;
+    onValuesChange: (values: Partial<ValuesMap>) => void;
+};
+declare const FilterBarProvider: <ValuesMap extends FiltersValues>({ children, filters, values, onValuesChange, }: FilterBarProviderProps<ValuesMap>) => JSX.Element;
+
+type FilterBarProps<ValuesMap extends FiltersValues> = OverrideClassName<Omit<FilterBarProviderProps<ValuesMap>, "children">>;
+declare const FilterBar: {
+    <ValuesMap extends FiltersValues>({ filters, classNameOverride, ...providerProps }: FilterBarProps<ValuesMap>): JSX.Element;
+    displayName: string;
+    Select: {
+        <Option extends SelectOption = SelectOption>({ id, onSelectionChange, ...props }: FilterBarSelectProps<Option>): JSX.Element;
+        displayName: string;
+    };
+};
+
 /**
  * Use this class to set and apply themes, and to access or subscribe to the currently active one.
  * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
@@ -414,6 +460,12 @@ declare const KaizenProvider: {
     displayName: string;
 };
 
+interface ProgressStepperProps {
+    stepName: string;
+    steps: [string, ...string[]];
+    isComplete?: boolean;
+}
+
 interface FooterProps extends OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "children">>, ProgressStepperProps {
     /** An action to return to a previous step */
     previousAction?: JSX.Element;
@@ -421,12 +473,6 @@ interface FooterProps extends OverrideClassName<Omit<HTMLAttributes<HTMLElement>
     nextAction?: JSX.Element;
 }
 
-interface ProgressStepperProps {
-    stepName: string;
-    steps: [string, ...string[]];
-    isComplete?: boolean;
-}
-
 type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps;
 
 type WorkflowStatus = {
@@ -447,18 +493,13 @@ interface WorkflowActionsProps extends OverrideClassName<Omit<HTMLAttributes<HTM
     headerActions?: JSX.Element[];
 }
 
-interface WorkflowExitProps {
-    exitLabel: string;
-    exitTitle: string;
-    exitDescription: ReactNode;
-    confirmExitLabel: string;
-    dismissExitLabel: string;
-    onExit?: () => void;
-    /** * @default: "cautionary" */
-    mood?: ConfirmationModalProps["mood"];
-}
+type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
+    children: ReactNode;
+};
 
-type WorkflowMainProps = PropsWithChildren<OverrideClassName<HTMLAttributes<HTMLDivElement>>>;
+type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
+    children: ReactNode;
+};
 
 type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & HeaderProps;
 declare const Workflow: (({ stepName, steps, isComplete, workflowName, status, headerActions, children, nextAction, previousAction, classNameOverride, ...restProps }: WorkflowProps) => JSX.Element) & {
@@ -474,14 +515,14 @@ declare const Workflow: (({ stepName, steps, isComplete, workflowName, status, h
         ({ children, classNameOverride, ...restProps }: WorkflowMainProps): JSX.Element;
         displayName: string;
     };
-    WorkflowExit: {
-        ({ exitLabel, exitTitle, exitDescription, confirmExitLabel, dismissExitLabel, onExit, mood, }: WorkflowExitProps): JSX.Element;
-        displayName: string;
-    };
     ProgressStepper: {
         ({ stepName, steps, isComplete, ...restprops }: ProgressStepperProps): JSX.Element;
         displayName: string;
     };
+    Wrapper: {
+        ({ children, classNameOverride, ...restProps }: WorkflowWrapperProps): JSX.Element;
+        displayName: string;
+    };
 };
 
-export { CSSVariableTheme, DeepMapObjectLeafs, Filter, FilterButton, FilterButtonProps, FilterButtonRemovable, FilterButtonRemovableProps, FilterButtonRemovableRefs, FilterContents, FilterContentsProps, FilterProps, FilterSelect, FilterSelectProps, FilterTriggerRef, KaizenProvider, KaizenProviderProps, SelectItem, SelectItemNode, SelectOption, SelectOptionGroup, SelectOptionGroupNode, SelectOptionNode, Theme, ThemeContext, ThemeKey, ThemeManager, ThemeProvider, TypographyFont, Workflow, WorkflowProps, defaultTheme, heartTheme, useTheme };
+export { CSSVariableTheme, DeepMapObjectLeafs, Filter$1 as Filter, FilterBar, FilterBarContextValue, FilterBarProps, FilterBarProvider, FilterBarProviderProps, FilterButton, FilterButtonProps, FilterButtonRemovable, FilterButtonRemovableProps, FilterButtonRemovableRefs, FilterContents, FilterContentsProps, FilterProps, FilterSelect, FilterSelectProps, FilterState, FilterTriggerRef, Filters, FiltersState, FiltersValues, KaizenProvider, KaizenProviderProps, SelectItem, SelectItemNode, SelectOption, SelectOptionGroup, SelectOptionGroupNode, SelectOptionNode, Theme, ThemeContext, ThemeKey, ThemeManager, ThemeProvider, TypographyFont, Workflow, WorkflowProps, defaultTheme, heartTheme, useFilterBarContext, useTheme };