@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Alert/Alert.styles.js

@@ -1,4 +1,4 @@
-import { s as o } from "../../sva-OmxClA9g.js";
+import { s as o } from "../../sva-CsHRIRDW.js";
 const e = o({
   slots: [
     "alert",
@@ -7,6 +7,7 @@ const e = o({
     "heading",
     "children",
     "footer",
+    "footerActions",
     "action",
     "dismiss"
   ],
@@ -14,34 +15,37 @@ const e = o({
     alert: {
       display: "flex",
       flexWrap: "nowrap",
-      gap: "spacing.2",
+      gap: "spacing.3",
       boxSizing: "border-box",
       marginBottom: "spacing.4",
-      borderRadius: "radius.system.form",
-      paddingBlock: "spacing.2",
-      paddingInline: "spacing.3",
+      borderRadius: "radius.system.layout",
+      padding: "spacing.3",
       textStyle: "typography.body.md",
       border: "alert",
-      height: "auto",
       justifyContent: "flex-start",
       alignItems: "flex-start"
     },
     wrapper: {
-      noGutter: !0
-    },
-    icon: {
-      lineHeight: "inherit !important"
-      // Needs important as the line-height is set inside the icon CSS file
+      display: "flex",
+      flexDirection: "column",
+      gap: "spacing.1",
+      flex: "1",
+      noGutter: !0,
+      md: {
+        flexDirection: "row",
+        flexWrap: "nowrap"
+      }
     },
     heading: {
       display: "inline-block",
       marginRight: "spacing.1",
+      whiteSpace: "nowrap",
       _empty: {
         display: "none"
       },
       _directNestedHeadings: {
         marginBlock: "spacing.0",
-        textStyle: "typography.body.md.strong"
+        textStyle: "typography.body.md.medium"
       }
     },
     children: {
@@ -49,58 +53,92 @@ const e = o({
       "& > p": { marginBlock: "spacing.0" }
     },
     footer: {
-      paddingBlockStart: "spacing.1"
+      pt: "spacing.1",
+      md: {
+        pt: "spacing.0",
+        ml: "auto"
+      }
+    },
+    footerActions: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "spacing.2"
     },
     action: {
       minHeight: "[0]",
       py: "spacing.1",
-      _before: {
-        bg: "transparent",
-        border: "divider",
-        borderRadius: "radius.system.badge"
-      },
-      _after: {
-        transform: "translateZ(-1px)",
-        opacity: 0,
-        borderRadius: "radius.system.badge"
-      },
-      _hover: {
-        _after: {
-          opacity: 1
-        }
+      textStyle: "typography.body.sm.medium",
+      "&.button__root--mode_tertiary:not(:hover)": {
+        bg: "colour.neutral.10"
       }
     },
     dismiss: {
       marginLeft: "auto",
-      marginTop: "-spacing.2",
-      marginRight: "-spacing.3",
-      marginBottom: "-spacing.2"
+      my: "-spacing.2",
+      mr: "-spacing.1"
     }
   },
   variants: {
+    hasFooter: {
+      true: {
+        dismiss: {
+          my: "-spacing.1"
+        }
+      }
+    },
+    multiLine: {
+      true: {
+        wrapper: {
+          md: {
+            flexDirection: "column"
+          }
+        },
+        footer: {
+          md: {
+            pt: "spacing.1",
+            ml: "spacing.0"
+          }
+        },
+        action: {
+          textStyle: "typography.body.md.medium"
+        }
+      }
+    },
     status: {
       danger: {
         alert: {
           backgroundColor: "colour.system.danger.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.danger.fill"
+          borderColor: "colour.system.danger.text"
         },
         heading: {
           color: "colour.system.danger.text"
         },
+        children: {
+          color: "colour.system.danger.text"
+        },
         icon: {
           color: "colour.system.danger.text"
         },
-        action: {
+        dismiss: {
           color: "colour.system.danger.text",
-          _before: {
-            borderColor: "colour.system.danger.text"
-          },
-          _after: {
-            bg: "colour.system.danger.fill"
-          },
           _hover: {
-            color: "colour.system.danger.onFill"
+            bg: "colour.system.danger.surfaceHover",
+            borderColor: "colour.system.danger.surfaceHover"
+          }
+        },
+        action: {
+          "&.button__root--mode_secondary": {
+            bg: "colour.system.danger.fill",
+            borderColor: "colour.system.danger.fill",
+            color: "colour.system.danger.onFill",
+            _hover: {
+              bg: "colour.system.danger.fillHover",
+              borderColor: "colour.system.danger.fillHover"
+            },
+            _active: {
+              boxShadow: "color-mix(in srgb, {colors.colour.system.danger.fill}, transparent 80%) 0px 0px 0px 3px"
+            }
           }
         }
       },
@@ -108,24 +146,36 @@ const e = o({
         alert: {
           backgroundColor: "colour.system.info.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.info.fill"
+          borderColor: "colour.system.info.text"
         },
         heading: {
           color: "colour.system.info.text"
         },
+        children: {
+          color: "colour.system.info.text"
+        },
         icon: {
           color: "colour.system.info.text"
         },
-        action: {
+        dismiss: {
           color: "colour.system.info.text",
-          _before: {
-            borderColor: "colour.system.info.text"
-          },
-          _after: {
-            bg: "colour.system.info.fill"
-          },
           _hover: {
-            color: "colour.system.info.onFill"
+            bg: "colour.system.info.surfaceHover",
+            borderColor: "colour.system.info.surfaceHover"
+          }
+        },
+        action: {
+          "&.button__root--mode_secondary": {
+            bg: "colour.system.info.fill",
+            borderColor: "colour.system.info.fill",
+            color: "colour.system.info.onFill",
+            _hover: {
+              bg: "colour.system.info.fillHover",
+              borderColor: "colour.system.info.fillHover"
+            },
+            _active: {
+              boxShadow: "color-mix(in srgb, {colors.colour.system.info.fill}, transparent 80%) 0px 0px 0px 3px"
+            }
           }
         }
       },
@@ -133,24 +183,36 @@ const e = o({
         alert: {
           backgroundColor: "colour.system.success.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.success.fill"
+          borderColor: "colour.system.success.text"
         },
         heading: {
           color: "colour.system.success.text"
         },
+        children: {
+          color: "colour.system.success.text"
+        },
         icon: {
           color: "colour.system.success.text"
         },
-        action: {
+        dismiss: {
           color: "colour.system.success.text",
-          _before: {
-            borderColor: "colour.system.success.text"
-          },
-          _after: {
-            bg: "colour.system.success.fill"
-          },
           _hover: {
-            color: "colour.system.success.onFill"
+            bg: "colour.system.success.surfaceHover",
+            borderColor: "colour.system.success.surfaceHover"
+          }
+        },
+        action: {
+          "&.button__root--mode_secondary": {
+            bg: "colour.system.success.fill",
+            borderColor: "colour.system.success.fill",
+            color: "colour.system.success.onFill",
+            _hover: {
+              bg: "colour.system.success.fillHover",
+              borderColor: "colour.system.success.fillHover"
+            },
+            _active: {
+              boxShadow: "color-mix(in srgb, {colors.colour.system.success.fill}, transparent 80%) 0px 0px 0px 3px"
+            }
           }
         }
       },
@@ -158,24 +220,78 @@ const e = o({
         alert: {
           backgroundColor: "colour.system.warning.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.warning.fill"
+          borderColor: "colour.system.warning.text"
         },
         heading: {
           color: "colour.system.warning.text"
         },
+        children: {
+          color: "colour.system.warning.text"
+        },
         icon: {
           color: "colour.system.warning.text"
         },
-        action: {
+        dismiss: {
           color: "colour.system.warning.text",
-          _before: {
-            borderColor: "colour.system.warning.text"
-          },
-          _after: {
-            bg: "colour.system.warning.fill"
-          },
           _hover: {
-            color: "colour.system.warning.onFill"
+            bg: "colour.system.warning.surfaceHover",
+            borderColor: "colour.system.warning.surfaceHover"
+          }
+        },
+        action: {
+          "&.button__root--mode_secondary": {
+            bg: "colour.system.warning.fill",
+            borderColor: "colour.system.warning.fill",
+            color: "colour.system.warning.onFill",
+            _hover: {
+              bg: "colour.system.warning.fillHover",
+              borderColor: "colour.system.warning.fillHover"
+            },
+            _active: {
+              boxShadow: "color-mix(in srgb, {colors.colour.system.warning.fill}, transparent 80%) 0px 0px 0px 3px"
+            }
+          }
+        }
+      },
+      neutral: {
+        alert: {
+          backgroundColor: "colour.neutral.20",
+          color: "colour.neutral.90",
+          borderColor: "colour.neutral.90"
+        },
+        heading: {
+          color: "colour.neutral.90"
+        },
+        children: {
+          color: "colour.neutral.90"
+        },
+        icon: {
+          color: "colour.neutral.90"
+        },
+        dismiss: {
+          color: "colour.neutral.90",
+          _hover: {
+            bg: "colour.neutral.30",
+            borderColor: "colour.neutral.30"
+          }
+        },
+        action: {
+          "&.button__root--mode_secondary": {
+            bg: "colour.neutral.70",
+            borderColor: "colour.neutral.70",
+            color: "colour.neutral.20",
+            _hover: {
+              bg: "colour.neutral.80",
+              borderColor: "colour.neutral.80"
+            },
+            _active: {
+              boxShadow: "color-mix(in srgb, {colour.neutral.70}, transparent 80%) 0px 0px 0px 3px"
+            }
+          },
+          "&.button__root--mode_tertiary": {
+            _hover: {
+              bg: "colour.neutral.30"
+            }
           }
         }
       }
@@ -183,28 +299,40 @@ const e = o({
     variant: {
       sidebar: {
         alert: {
-          borderTopLeftRadius: "radius.000",
-          borderBottomLeftRadius: "radius.000",
+          borderTopLeftRadius: "none",
+          borderBottomLeftRadius: "none",
           borderWidth: "[0]",
           borderLeftWidth: "[2.5px]",
           paddingBlock: "spacing.4"
         }
       },
-      "site-wide": {
+      "full-width": {
         alert: {
-          borderRadius: "radius.000",
+          borderRadius: "none",
           borderWidth: "[0]",
-          borderBottomWidth: "[0.5px]"
+          borderTopWidth: "[1px]",
+          borderBottomWidth: "[1px]"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      hasFooter: !0,
+      multiLine: !1,
+      css: {
+        icon: {
+          mt: "spacing.1"
         },
         heading: {
-          display: "inline"
+          mt: "spacing.1"
         },
         children: {
-          display: "inline"
+          mt: "spacing.1"
         }
       }
     }
-  }
+  ]
 });
 export {
   e as alert

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,52 @@
+import { IressInputPopoverProps } from '../Popover';
+import { InputBaseElement, IressInputProps } from '../Input';
+import { AutocompleteSearchHookProps } from './hooks/useAutocompleteSearch';
+import { ReactNode, SyntheticEvent } from 'react';
+import { InputRef } from '../Input/InputBase/InputBase';
+import { IressSelectMenuProps } from '../Select';
+import { LabelValueMeta } from '../../interfaces';
+import { FormControlValue } from '../../types';
+export interface IressAutocompleteProps<T extends FormControlValue = string> extends Omit<IressInputProps<T>, 'children' | 'onChange'>, Omit<AutocompleteSearchHookProps, 'query'>, Pick<IressSelectMenuProps, 'limitMobile' | 'limitDesktop'> {
+    /**
+     * Always shown on focus, even if the user has not interacted with the input.
+     */
+    alwaysShowOnFocus?: boolean;
+    /**
+     * Append content.
+     * @default <IressIcon name="search" />
+     */
+    append?: ReactNode;
+    /**
+     * If true, the selected option becomes the value of the input when the autocomplete loses focus.
+     * @default true
+     */
+    autoSelect?: boolean;
+    /**
+     * If `true`, then user can clear the value of the input.
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Text to be displayed when the options function errors out. It is not used when the options are provided as an array.
+     * @default <IressAlert status="danger">An unknown error occurred. Please contact support if the error persists.</IressAlert>
+     */
+    errorText?: ReactNode;
+    /**
+     * Text to be displayed when no results are found.
+     */
+    noResultsText?: ReactNode;
+    /**
+     * Emitted when the user changes the input.
+     * The second and third arguments are only available when the options were selected from the `options` prop.
+     */
+    onChange?: (e?: SyntheticEvent<InputBaseElement>, value?: T, option?: LabelValueMeta) => void;
+    /**
+     * Customise the IressInputPopover props for your needs.
+     */
+    popoverProps?: AutocompletePopoverProps;
+}
+export interface AutocompletePopoverProps extends Pick<IressInputPopoverProps, 'autoHighlight' | 'align' | 'className' | 'container' | 'contentClassName' | 'contentStyle' | 'displayMode' | 'style'> {
+    append?: ReactNode;
+    prepend?: ReactNode;
+}
+export declare const IressAutocomplete: import('react').ForwardRefExoticComponent<IressAutocompleteProps<string> & import('react').RefAttributes<InputRef>>;

package/dist/components/Autocomplete/Autocomplete.js

@@ -5,7 +5,7 @@ import "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";
 import "react";
-import "../Popover/hooks/usePopover.js";
+import "../Popover/hooks/useFloatingPopover.js";
 import "../Input/Input.js";
 import "../Input/Input.styles.js";
 import "../../hooks/useControlledState.js";
@@ -16,30 +16,22 @@ import "../../helpers/form/getFormControlValueAsStringIfDefined.js";
 import "./hooks/useAutocompleteSearch.js";
 import "../Icon/Icon.js";
 import "./components/AutocompleteInstructions.js";
-import { a as R } from "../../Autocomplete-C5ubHBTi.js";
-import "../RichSelect/SelectBody/SelectBody.styles.js";
-import "../../enums.js";
-import "../Menu/Menu.js";
-import "../Menu/Menu.styles.js";
-import "../Divider/Divider.styles.js";
-import "../Menu/MenuItem/MenuItem.js";
-import "../Icon/Icon.styles.js";
-import "../RichSelect/SelectHeading/SelectHeading.js";
-import "../RichSelect/SelectLabel/SelectLabel.styles.js";
-import "../RichSelect/SelectMenu/SelectMenu.js";
-import "../RichSelect/SelectSearch/SelectSearch.styles.js";
-import "../RichSelect/SelectSearchInput/SelectSearchInput.js";
-import "../RichSelect/SelectTags/SelectTags.styles.js";
-import "../../Button-mmhMLwp9.js";
-import "../Button/CloseButton/CloseButton.js";
-import "../Tag/Tag.styles.js";
-import "../Tag/TagInput/TagInput.js";
-import "../Inline/Inline.styles.js";
-import "../Inline/Inline.js";
+import { a as J } from "../../Autocomplete-BRMDwwwT.js";
+import "../Select/SelectBody/SelectBody.js";
+import "../Select/SelectCreate/SelectCreate.js";
+import "../Select/SelectHeading/SelectHeading.js";
+import "../Select/SelectLabel/SelectLabel.js";
+import "../Select/SelectMenu/SelectMenu.js";
+import "../Select/SelectSearch/SelectSearch.js";
+import "../Select/SelectSearchInput/SelectSearchInput.js";
+import "../Select/SelectTags/SelectTags.js";
+import "../Select/Select.styles.js";
+import "../Select/components/NativeSelect.styles.js";
 import "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
 import "../Alert/Alert.js";
 import "../Alert/Alert.styles.js";
+import "../../enums.js";
 export {
-  R as IressAutocomplete
+  J as IressAutocomplete
 };

package/dist/components/Autocomplete/Autocomplete.styles.js

@@ -1,9 +1,13 @@
-import { s as o } from "../../sva-OmxClA9g.js";
+import { s as o } from "../../sva-CsHRIRDW.js";
 const p = o({
   slots: ["root", "popoverContent", "optionList"],
   base: {
     root: {},
-    popoverContent: {},
+    popoverContent: {
+      _empty: {
+        display: "none"
+      }
+    },
     optionList: {
       _empty: {
         display: "none"

package/dist/components/Autocomplete/components/AutocompleteInstructions.d.ts

@@ -0,0 +1,10 @@
+export interface AutocompleteInstructionsProps {
+    /**
+     * The minimum number of characters required to search.
+     */
+    minSearchLength: number;
+}
+export declare const AutocompleteInstructions: {
+    ({ minSearchLength, }: AutocompleteInstructionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Autocomplete/components/AutocompleteInstructions.js

@@ -1,12 +1,12 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { IressPanel as s } from "../../Panel/Panel.js";
-import "../../Panel/Panel.styles.js";
-const i = ({
+const e = ({
   minSearchLength: t
 }) => {
-  const r = `Type at least ${t} character${t === 1 ? "" : "s"} to search`;
-  return /* @__PURE__ */ o(s, { children: r });
+  const o = `Type at least ${t} character${t === 1 ? "" : "s"} to search`;
+  return /* @__PURE__ */ r(s, { children: o });
 };
+e.displayName = "AutocompleteInstructions";
 export {
-  i as AutocompleteInstructions
+  e as AutocompleteInstructions
 };

package/dist/components/Autocomplete/hooks/useAutocompleteSearch.d.ts

@@ -0,0 +1,83 @@
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../../interfaces';
+export interface AutocompleteSearchHookProps {
+    /**
+     * Time in milliseconds to wait for before performing result search. Only applies to searchable options (function).
+     * @default 500
+     */
+    debounceThreshold?: number;
+    /**
+     * Disables the hook from running any effects or search operations.
+     * When disabled, the hook returns empty results and default state.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Initial options data set, shown when the input is empty.
+     */
+    initialOptions?: LabelValueMeta[];
+    /**
+     * Minimum number of characters required before triggering async search. Only applies to searchable options (function).
+     * Below this threshold, no search will be triggered and no loading state will be shown.
+     * @default 1
+     */
+    minSearchLength?: number;
+    /**
+     * Options data set, shown when the input is not empty.
+     */
+    options: LabelValueMeta[] | ((query: string) => Promise<LabelValueMeta[]>);
+    /**
+     * The query value to filter items by and create search results.
+     */
+    query?: string;
+}
+export interface AutocompleteSearchHookReturn {
+    /**
+     * Clear the error state.
+     */
+    clearError: () => void;
+    /**
+     * The debounced query value.
+     */
+    debouncedQuery: string;
+    /**
+     * Whether an error occurred during the search.
+     * If a string, it is the error reason provided in the promise rejection.
+     */
+    error: boolean | string;
+    /**
+     * Whether the search is loading.
+     */
+    loading: boolean;
+    /**
+     * The results of the search.
+     */
+    results: FormattedLabelValueMeta[];
+    /**
+     * Whether to show "Type at least X characters to search" instruction.
+     * True when the query length is below the minimum search length.
+     */
+    shouldShowInstructions: boolean;
+    /**
+     * Whether to show nothing (clean, minimal) during debounce waiting period.
+     * True when user has typed enough characters but search hasn't started yet.
+     */
+    shouldShowDebounceWaiting: boolean;
+    /**
+     * Whether to show "No results found" message.
+     * True only after a legitimate search has been performed and returned empty results.
+     */
+    shouldShowNoResults: boolean;
+    /**
+     * Start the search.
+     */
+    startSearch: (force?: boolean) => void;
+    /**
+     * Stop the search.
+     */
+    stopSearch: () => void;
+}
+/**
+ * Advanced autocomplete search hook with debouncing and race condition protection
+ * Supports both sync array search and async function search
+ */
+export declare const useAutocompleteSearch: ({ debounceThreshold, disabled, initialOptions, minSearchLength, options, query, }: AutocompleteSearchHookProps) => AutocompleteSearchHookReturn;