@iress-oss/ids-components 5.16.0 → 6.0.0-alpha.0

package/dist/src/components/Toggle/Toggle.d.ts

@@ -1,2 +1,25 @@
-import { ToggleWithEnums } from './Toggle.types';
-export declare const IressToggle: ToggleWithEnums;
+import { MouseEvent, ReactNode } from 'react';
+import { IressStyledProps } from '../../types';
+export interface IressToggleProps extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Sets the checked state of the Toggle.
+     */
+    checked?: boolean;
+    /**
+     * Provides the label for the Toggle.
+     */
+    children: ReactNode;
+    /**
+     * Hides the label if true (label will still be read out by screen readers).
+     */
+    hiddenLabel?: boolean;
+    /**
+     * Determines the layout of the label with respect to the control.
+     */
+    layout?: 'inline' | 'inline-between' | 'inline-reverse' | 'stack';
+    /**
+     * Emitted when the checked state changes.
+     */
+    onChange?: (checked: boolean, event: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const IressToggle: ({ checked: checkedProp, hiddenLabel, children, layout, className, onChange, "data-testid": testid, ...restProps }: IressToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Toggle/Toggle.styles.d.ts

@@ -0,0 +1,80 @@
+export declare const toggle: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "checkboxMark" | "toggleBase" | "toggleButtonContainer" | "toggleButton" | "buttonChecked", {
+    layout: {
+        inline: {
+            toggleBase: {
+                display: "inline-flex";
+                alignItems: "center";
+            };
+        };
+        'inline-reverse': {
+            toggleBase: {
+                display: "inline-flex";
+                alignItems: "center";
+                flexDirection: "row-reverse";
+            };
+            label: {
+                marginInlineStart: "spacing.100";
+                marginInlineEnd: "spacing.000";
+            };
+        };
+        'inline-between': {
+            toggleBase: {
+                display: "flex";
+                alignItems: "center";
+                justifyContent: "space-between";
+            };
+        };
+        stack: {
+            toggleBase: {
+                display: "flex";
+                flexDirection: "column";
+                alignItems: "flex-start";
+                width: "[100%]";
+            };
+            label: {
+                display: "block";
+                marginBlockEnd: "spacing.100";
+            };
+        };
+    };
+    hiddenLabel: {
+        true: {
+            label: {
+                srOnly: true;
+                display: "inline-block";
+            };
+            checkboxMark: {
+                marginInlineEnd: "spacing.100";
+            };
+        };
+    };
+    checked: {
+        true: {
+            toggleButtonContainer: {
+                _hover: {
+                    bg: "colour.primary.fillHover";
+                    borderColor: "colour.primary.fillHover";
+                };
+            };
+            checkboxMark: {
+                opacity: number;
+            };
+            toggleButton: {
+                _after: {
+                    transform: "translateX(calc({sizes.toggle.width} - {sizes.toggle.thumb}))";
+                    borderColor: "[currentColor]";
+                };
+                _hover: {
+                    _after: {
+                        borderColor: "colour.primary.fillHover";
+                    };
+                };
+            };
+        };
+        false: {
+            toggleButtonContainer: {
+                color: "colour.neutral.70";
+            };
+        };
+    };
+}>;

package/dist/src/components/Toggle/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Toggle.types';
 export * from './Toggle';
+export * from './Toggle.styles';

package/dist/src/components/Toggle/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Toggle/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,28 @@
-import { TooltipWithEnums } from './Tooltip.types';
-export declare const IressTooltip: TooltipWithEnums;
+import { ReactNode } from 'react';
+import { FloatingUIAligns, IressStyledProps } from '../../types';
+export interface IressTooltipProps extends IressStyledProps {
+    /**
+     * Sets the alignment of the popover relative to the activator element.
+     * @default top
+     */
+    align?: FloatingUIAligns;
+    /**
+     * The element to add a tooltip to.
+     */
+    children: ReactNode;
+    /**
+     * Sets the tooltip display delay in milliseconds.
+     * @default 500
+     */
+    delay?: number;
+    /**
+     * Only used for internal testing.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
+     */
+    tooltipText: string | string[];
+}
+export declare const IressTooltip: ({ children, className, align, delay, open, tooltipText, "data-testid": testid, ...restProps }: IressTooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1 @@
+export declare const tooltip: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "activator", {}>;

package/dist/src/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Tooltip.types';
 export * from './Tooltip';
+export * from './Tooltip.styles';

package/dist/src/components/Tooltip/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Tooltip/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/ValidationMessage/ValidationLink/ValidationLink.d.ts

@@ -1,2 +1,19 @@
-import { IressValidationLinkProps } from './ValidationLink.types';
-export declare const IressValidationLink: ({ linkToTarget, ...props }: IressValidationLinkProps) => import("react/jsx-runtime").JSX.Element;
+import { IressValidationMessageProps } from '../ValidationMessage';
+import { ReactNode } from 'react';
+/**
+ * @deprecated Use `IressValidationMessageProps<string>` instead.
+ */
+export interface IressValidationLinkProps extends IressValidationMessageProps<string> {
+    /**
+     * Validation content (what went wrong, what went right).
+     */
+    children?: ReactNode;
+    /**
+     * ID of element the message is describing. If nothing is supplied a link will not render.
+     */
+    linkToTarget: string;
+}
+/**
+ * @deprecated Use `IressValidationMessage` instead.
+ */
+export declare const IressValidationLink: ({ className, linkToTarget, ...props }: IressValidationLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ValidationMessage/ValidationMessage.d.ts

@@ -1,2 +1,35 @@
-import { ValidationMessageWithEnums } from './ValidationMessage.types';
-export declare const IressValidationMessage: ValidationMessageWithEnums;
+import { ReactNode, MouseEventHandler } from 'react';
+import { SystemValidationStatuses } from '../../types';
+import { IressTextProps } from '../Text';
+type ValidationElement<TLinkToTarget extends string | undefined = undefined> = TLinkToTarget extends string ? 'a' : 'div';
+type ValidationInstance<TLinkToTarget extends string | undefined = undefined> = TLinkToTarget extends string ? HTMLAnchorElement : HTMLDivElement;
+export type IressValidationMessageProps<TLinkToTarget extends string | undefined = undefined> = Omit<IressTextProps<ValidationElement<TLinkToTarget>>, 'prefix'> & {
+    /**
+     * Validation content (what went wrong, what went right).
+     */
+    children?: ReactNode;
+    /**
+     * ID of element the message is describing. If nothing is supplied a link will not render.
+     */
+    linkToTarget?: TLinkToTarget;
+    /**
+     * Emitted when the message is clicked.
+     */
+    onClick?: MouseEventHandler<ValidationInstance<TLinkToTarget>>;
+    /**
+     * Prefix to the validation message. Will be `status` prop if nothing is provided.
+     */
+    prefix?: ReactNode;
+    /**
+     * Whether message is danger, warning, success or info.
+     * **Note**: danger is translated to Error when used as the prefix.
+     * @default 'danger'
+     **/
+    status?: SystemValidationStatuses;
+    /**
+     * If set to true, the prefix will be visually displayed (default is only available to screen readers)
+     */
+    visiblePrefix?: boolean;
+};
+export declare const IressValidationMessage: <TLinkToTarget extends string | undefined = undefined>({ children, className, linkToTarget, prefix, status, visiblePrefix, ...restProps }: IressValidationMessageProps<TLinkToTarget>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ValidationMessage/ValidationSummary/ValidationSummary.d.ts

@@ -1,2 +1,31 @@
-import { IressValidationSummaryProps } from './ValidationSummary.types';
-export declare const IressValidationSummary: ({ messages, linkToTarget, prefix, visiblePrefix, status, className, "data-testid": dataTestId, ...restProps }: IressValidationSummaryProps) => import("react/jsx-runtime").JSX.Element | null;
+import { IressCustomiseSlot, ValidationMessageObj } from '../../../interfaces';
+import { IressStyledProps, SystemValidationStatuses } from '../../../types';
+import { ReactNode } from 'react';
+export interface IressValidationSummaryProps extends Omit<IressStyledProps<'ul'>, 'prefix'> {
+    /**
+     * ValidationMessage Array containing the `id` of the field and the validation message
+     **/
+    messages: ValidationMessageObj[];
+    /**
+     * Add additional styles to each item in the list.
+     */
+    itemStyle?: IressCustomiseSlot;
+    /**
+     * Renders validation messages as links pointing at the field it relates to, specified as a string
+     * Only works when used with the `messages` prop.
+     */
+    linkToTarget?: string;
+    /**
+     * Prefix to all validation messages. Will be `status` prop if nothing is provided.
+     */
+    prefix?: ReactNode;
+    /**
+     * Status for all child ValidationMessage components
+     */
+    status?: SystemValidationStatuses;
+    /**
+     * If set to true, the prefix will be visually displayed (default is only available to screen readers)
+     */
+    visiblePrefix?: boolean;
+}
+export declare const IressValidationSummary: ({ messages, linkToTarget, prefix, visiblePrefix, status, "data-testid": dataTestId, children, itemStyle, className, ...restProps }: IressValidationSummaryProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/ValidationMessage/index.d.ts

@@ -1,6 +1,3 @@
 export * from './ValidationMessage';
-export * from './ValidationMessage.types';
 export * from './ValidationLink/ValidationLink';
-export * from './ValidationLink/ValidationLink.types';
 export * from './ValidationSummary/ValidationSummary';
-export * from './ValidationSummary/ValidationSummary.types';

package/dist/src/components/ValidationMessage/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/ValidationMessage/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/enums.d.ts

@@ -1,8 +1,4 @@
 export declare enum GlobalCSSClass {
-    FormElement = "iress-form-element",
-    FormElementInner = "iress-form-element__inner",
-    FormElementInvalid = "iress-form-element--invalid",
-    FormLabel = "iress-form-label",
     SROnly = "iress-sr-only",
     NoScroll = "iress-no-scroll",
     Hidden = "iress-hidden",
@@ -11,7 +7,85 @@ export declare enum GlobalCSSClass {
     HiddenMobile = "iress-hidden--mobile",
     Width = "iress-width",
     Display = "iress-display",
-    Padding = "iress-p"
+    Padding = "iress-p",
+    Group = "group",// https://panda-css.com/docs/concepts/conditional-styles#group-selectors
+    FormElement = "iress-form-element",
+    FormElementInner = "iress-form-element__inner",
+    FormElementInvalid = "iress-form-element--invalid",
+    FormLabel = "iress-form-label",
+    Alert = "ids-alert",
+    Autocomplete = "ids-autocomplete",
+    Badge = "ids-badge",
+    Button = "ids-button",
+    ButtonGroup = "ids-button-group",
+    Card = "ids-card",
+    Checkbox = "ids-checkbox",
+    CheckboxGroup = "ids-checkbox-group",
+    CheckboxMark = "ids-checkbox-mark",
+    CloseButton = "ids-button--close",
+    Col = "ids-col",
+    Container = "ids-container",
+    Divider = "ids-divider",
+    Expander = "ids-expander",
+    Field = "ids-field",
+    FieldGroup = "ids-field-group",
+    Form = "ids-form",
+    Filter = "ids-filter",
+    Icon = "ids-icon",
+    Image = "ids-image",
+    Inline = "ids-inline",
+    Input = "ids-input",
+    InputCurrency = "ids-input--currency",
+    InputPopover = "ids-popover--input",
+    Link = "ids-link",
+    Menu = "ids-menu",
+    MenuHeading = "ids-text--menu-heading",
+    MenuDivider = "ids-divider--menu",
+    MenuItem = "ids-menu-item",
+    MenuText = "ids-text--menu",
+    Modal = "ids-modal",
+    ModalBackdrop = "ids-modal__backdrop",
+    Panel = "ids-panel",
+    Placeholder = "ids-placeholder",
+    Popover = "ids-popover",
+    Progress = "ids-progress",
+    Radio = "ids-radio",
+    RadioGroup = "ids-radio-group",
+    Readonly = "ids-input--readonly",
+    RichSelect = "ids-rich-select",
+    RichSelectTags = "ids-rich-select-tags",
+    RichSelectSearchInput = "ids-rich-select-search-input",
+    RichSelectSearch = "ids-rich-select-search",
+    RichSelectSearchContent = "ids-rich-select-search--content",
+    RichSelectMenu = "ids-rich-select-menu",
+    RichSelectMenuItem = "ids-rich-select-menu-item",
+    RichSelectLabel = "ids-rich-select-label",
+    RichSelectHeading = "ids-rich-select-heading",
+    RichSelectClearButton = "ids-rich-select-clear-button",
+    RichSelectBody = "ids-rich-select-body",
+    Row = "ids-row",
+    Select = "ids-select",
+    Skeleton = "ids-skeleton",
+    SkipLink = "ids-skip-link",
+    Slideout = "ids-slideout",
+    SlideoutPushElement = "ids-slideout-push-element",
+    SlideoutOpen = "ids-slideout--open",
+    Slider = "ids-slider",
+    Spinner = "ids-spinner",
+    Stack = "ids-stack",
+    Table = "ids-table",
+    Tab = "ids-tab",
+    TabSet = "ids-tabset",
+    Tag = "ids-tag",
+    TagInput = "ids-tag-input",
+    Text = "ids-text",
+    Toast = "ids-toast",
+    Toaster = "ids-toaster",
+    Toggle = "ids-toggle",
+    Tooltip = "ids-tooltip",
+    ValidationLink = "ids-validation-message--link",
+    ValidationMessage = "ids-validation-message",
+    ValidationSummary = "ids-validation-sumary"
 }
 /** @deprecated Breakpoint enum is now deprecated and will be removed in a future version. Please use the Breakpoints type instead. **/
 export declare enum Breakpoint {

package/dist/src/helpers/dom/closestCrossShadow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Finds the closest ancestor element that matches the selector, traversing across shadow DOM boundaries.
+ * Similar to native Element.closest() but works across shadow DOM.
+ *
+ * @param element - The starting element
+ * @param selector - CSS selector to match against
+ * @returns The closest ancestor element matching the selector, or null if not found
+ */
+export declare const closestCrossShadow: (element: Element | null, selector: string) => Element | null;

package/dist/src/helpers/form/getFormControlValueAsString.d.ts

@@ -1,2 +1,2 @@
 import { FormControlValue } from '../../types';
-export declare const getFormControlValueAsString: (value?: FormControlValue) => string;
+export declare const getFormControlValueAsString: <T = FormControlValue>(value?: T) => string;

package/dist/src/helpers/form/getFormControlValueAsStringIfDefined.d.ts

@@ -1,2 +1,2 @@
 import { FormControlValue } from '../../types';
-export declare const getFormControlValueAsStringIfDefined: (value?: FormControlValue) => string | undefined;
+export declare const getFormControlValueAsStringIfDefined: <T = FormControlValue>(value?: T) => string | undefined;

package/dist/src/helpers/label-value/getValueFromLabelValues.d.ts

@@ -1,2 +1,2 @@
 import { LabelValue } from '../../interfaces';
-export declare const getValueFromLabelValues: (items?: LabelValue | LabelValue[], array?: boolean) => string | number | boolean | (string | number | boolean)[];
+export declare const getValueFromLabelValues: <T extends LabelValue = LabelValue>(items?: T[] | T, array?: boolean) => string | number | boolean | (string | number | boolean)[];

package/dist/src/helpers/styling/getVariablePadding.d.ts

@@ -0,0 +1,6 @@
+import { MixedPaddingSize, PaddingSizes } from '../../types';
+import { VariablePaddingSize, ResponsiveSizing } from '../../interfaces';
+import { SpacingToken } from '../../styled-system/tokens';
+import { PaddingSize } from '../../enums';
+export type PanelPadding = PaddingSize | PaddingSizes | VariablePaddingSize | ResponsiveSizing<MixedPaddingSize> | SpacingToken;
+export declare const getVariablePaddingValue: (padding: PanelPadding, breakpoint: string, key?: keyof VariablePaddingSize) => SpacingToken | undefined;

package/dist/src/helpers/styling/iressCss.d.ts

@@ -0,0 +1,22 @@
+import { IressCSSProps } from '../../interfaces';
+import { ComponentProps, ElementType, FC } from 'react';
+/**
+ * This creates a combination of utility classes you can use to style native HTML elements using IDS.
+ *
+ * @see https://design.wm.iress.com/?path=/docs/styling-props-reference--docs
+ *
+ * @param stylingProps Supporting properties for styling.
+ * @returns {string} A string of classes that can be applied to an element.
+ */
+export declare const iressCss: (stylingProps: IressCSSProps) => string;
+type StyledProps<C extends ElementType> = ComponentProps<C> & IressCSSProps;
+/**
+ * This creates a component (similar to a styled component) that can be used to apply styling to native HTML elements using IDS.
+ *
+ * @see https://design.wm.iress.com/?path=/docs/styling-props-reference--docs
+ *
+ * @param element The native HTML element to be styled, e.g. 'div', 'span', etc. Can also be a custom component, e.g. 'Link'.
+ * @returns {FC<StyledProps<T>>} A functional component that accepts styling props and renders the specified element with the applied styles.
+ */
+export declare const iressStyled: <T extends ElementType>(element: T) => FC<StyledProps<T>>;
+export {};

package/dist/src/helpers/styling/mapGutterToGap.d.ts

@@ -0,0 +1,3 @@
+import { IressCSSProps, ResponsiveSizing } from '../../interfaces';
+import { PaddingSizes } from '../../types';
+export declare const mapGutterToGap: (gutter?: ResponsiveSizing<PaddingSizes> | PaddingSizes) => IressCSSProps["p"];

package/dist/src/helpers/utility/spreadUnlessUndefined.d.ts

@@ -0,0 +1,3 @@
+export declare const spreadUnlessUndefined: <T extends object>(defaults: T, overrides: Partial<T>) => T & {
+    [k: string]: unknown;
+};

package/dist/src/hooks/useControlledState.d.ts

@@ -1,22 +1,25 @@
 import { FormControlValue } from '../types';
-export interface ControlledStateProps<T = FormControlValue> {
+export interface ControlledStateProps<T = FormControlValue, TMultiple extends boolean = false> {
     component: string;
-    defaultValue?: T;
-    multiple?: boolean;
-    onChange?: (selected?: T) => void;
+    defaultValue?: ControlledValue<T, TMultiple>;
+    multiple?: TMultiple;
+    onChange?: (selected?: ControlledValue<T, TMultiple>) => void;
     propName?: string;
-    value?: T;
+    value?: ControlledValue<T, TMultiple>;
 }
-export interface ControlledStateHook<TValue = FormControlValue, TArrayValue = TValue> {
-    value: TValue | undefined;
-    setValue: (value?: TValue) => void;
-    toggleValue: (value?: TArrayValue, flag?: boolean) => void;
+export interface ControlledStateHook<T = FormControlValue, TMultiple extends boolean = false> {
+    value: ControlledValue<T, TMultiple> | undefined;
+    setValue: (value?: ControlledValue<T, TMultiple>) => void;
+    toggleValue: (value?: T, flag?: boolean) => void;
     isControlled: boolean;
 }
+export type ControlledValue<T = FormControlValue, TMultiple extends boolean = false> = TMultiple extends true ? T[] : T;
 /**
  * Allows you to return a controlled state or uncontrolled state, depending on the props passed.
  * It can also deal with the cases when an array of values is required.
  *
+ * If `TMultiple` is set to `true`, the value will be an array of values.
+ *
  * @param {ControlledValueProps<T>} props Allows you to set the initial selected value, the onChange callback, and whether multiple values are allowed (array).
  */
-export declare const useControlledState: <TValue = FormControlValue, TArrayValue = TValue>({ component, defaultValue, multiple, onChange, propName, value, }: ControlledStateProps<TValue>) => ControlledStateHook<TValue, TArrayValue>;
+export declare const useControlledState: <T = FormControlValue, TMultiple extends boolean = false>({ component, defaultValue, multiple, onChange, propName, value, }: ControlledStateProps<T, TMultiple>) => ControlledStateHook<T, TMultiple>;

package/dist/src/hooks/useIdIfNeeded.d.ts

@@ -1,2 +1,2 @@
-import { IressHTMLAttributes } from '../interfaces';
-export declare const useIdIfNeeded: <T extends React.HTMLAttributes<HTMLElement> = IressHTMLAttributes>({ id: propId }?: T, prefix?: string) => string;
+import { IressUnstyledProps } from '../types';
+export declare const useIdIfNeeded: <T extends IressUnstyledProps>({ id: propId }?: T, prefix?: string) => string;

package/dist/src/hooks/useResponsiveProps.d.ts

@@ -1,19 +1,12 @@
-import { ResponsiveProps } from '../types';
+import { Breakpoints, ResponsiveProp } from '../types';
 /**
- * Allows you to pluck a value from a an object with breakpoint keys.
+ * Allows you to pluck a value from an object with breakpoint keys.
  * Note: Where possible, we recommend using media queries in CSS instead of JS, as that will reduce the load for the user. However, sometimes it's necessary to change a prop based on the user's breakpoint, hence why this hook is provided.
- * @param {ResponsiveProps<T>} values A set of values, separated by breakpoint and ready for plucking.
+ * @param {ResponsiveProp<T>} values A set of values, separated by breakpoint and ready for plucking.
  * @param {boolean} inheritPrevious Whether to inherit the previous breakpoint value, if none was found for the current one.
  * @returns { breakpoint: Breakpoints; value?: T | null } The current user's breakpoint, along with a matching value if one was found.
  */
-export declare const useResponsiveProps: <T>(props?: ResponsiveProps<T>, inheritPrevious?: boolean) => {
-    breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-    value: T | undefined;
-};
-/**
- * @deprecated Use useResponsiveProps instead
- */
-export declare const useResponsiveValue: <T>(props?: ResponsiveProps<T>, inheritPrevious?: boolean) => {
-    breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-    value: T | undefined;
+export declare const useResponsiveProps: <T>(prop?: ResponsiveProp<T>, inheritPrevious?: boolean) => {
+    breakpoint: Breakpoints;
+    value?: T;
 };