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

package/dist/components/Select/Select.styles.js

@@ -1,123 +1,98 @@
-import { s as e } from "../../sva-OmxClA9g.js";
-const t = ["wrapper", "control", "element"], c = e({
-  slots: t,
+import { s as i } from "../../sva-CsHRIRDW.js";
+const t = i({
+  slots: [
+    "root",
+    "popoverContent",
+    "dropdownSelectedHeading",
+    "dropdownClear",
+    "wrapper"
+  ],
   base: {
-    wrapper: {
-      display: "block",
-      position: "relative",
-      lineHeight: 1
+    root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "style",
+      display: "block"
+    },
+    popoverContent: {
+      minWidth: "[fit-content]",
+      maxHeight: "[30rem]",
+      overflowY: "auto"
+    },
+    dropdownSelectedHeading: {
+      width: "[100%]"
     },
-    control: {
-      position: "relative",
-      selectChevron: !0
+    dropdownClear: {
+      paddingX: "spacing.2",
+      paddingY: "spacing.1",
+      minHeight: "[0px]",
+      boxShadow: "[none]"
     },
-    element: {
-      textStyle: "typography.body.md",
-      display: "block",
+    wrapper: {
       width: "[100%]",
-      height: "[calc({sizes.input.height} - 2px)]",
-      paddingInline: "spacing.2",
-      appearance: "none",
-      border: "[0]",
-      background: "[transparent]",
-      _focus: {
-        outline: "[none]"
-      },
-      "& option, & optgroup": {
-        color: "colour.neutral.80"
-      }
+      display: "flex",
+      flexDirection: "column"
     }
   },
   variants: {
     width: {
       2: {
-        wrapper: {
+        root: {
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
-        },
-        element: {
-          width: "auto"
         }
       },
       4: {
-        wrapper: {
+        root: {
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
-        },
-        element: {
-          width: "auto"
         }
       },
       6: {
-        wrapper: {
+        root: {
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
-        },
-        element: {
-          width: "auto"
         }
       },
       8: {
-        wrapper: {
+        root: {
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
-        },
-        element: {
-          width: "auto"
         }
       },
       10: {
-        wrapper: {
+        root: {
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
-        },
-        element: {
-          width: "auto"
         }
       },
       12: {
-        wrapper: {
+        root: {
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
         }
       },
       16: {
-        wrapper: {
+        root: {
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
-        },
-        element: {
-          width: "auto"
         }
       },
-      "25perc": {
-        wrapper: {
-          width: "input.25perc"
-        },
-        element: {
-          width: "auto"
+      "25%": {
+        root: {
+          width: "input.25%"
         }
       },
-      "50perc": {
-        wrapper: {
-          width: "input.50perc"
-        },
-        element: {
-          width: "auto"
+      "50%": {
+        root: {
+          width: "input.50%"
         }
       },
-      "75perc": {
-        wrapper: {
-          width: "input.75perc"
-        },
-        element: {
-          width: "auto"
+      "75%": {
+        root: {
+          width: "input.75%"
         }
       },
-      "100perc": {
-        wrapper: {
-          width: "input.100perc"
-        },
-        element: {
-          width: "auto"
+      "100%": {
+        root: {
+          width: "input.100%"
         }
       }
     }
   }
 });
 export {
-  c as select
+  t as select
 };

package/dist/components/Select/SelectBody/SelectBody.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { IressTextProps } from '../../Text';
+export interface IressSelectBodyProps extends Omit<IressTextProps, 'element'> {
+    /**
+     * Footer of the select, it will render as fixed (pinned).
+     */
+    footer?: ReactNode;
+    /**
+     * Header of the select, it will render as fixed (pinned).
+     */
+    header?: ReactNode;
+}
+export declare const IressSelectBody: {
+    ({ children, className, footer, header, ...restProps }: IressSelectBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Select/SelectBody/SelectBody.js

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { c as m } from "../../../cx-DN21T1EH.js";
+import { selectBody as d } from "./SelectBody.styles.js";
+import { GlobalCSSClass as a } from "../../../enums.js";
+import { IressText as n } from "../../Text/Text.js";
+const p = ({
+  children: c,
+  className: l,
+  footer: e,
+  header: r,
+  ...t
+}) => {
+  const o = d();
+  return /* @__PURE__ */ i(
+    n,
+    {
+      ...t,
+      className: m(l, o.selectBody, a.SelectBody),
+      children: [
+        r && /* @__PURE__ */ s("div", { children: r }),
+        /* @__PURE__ */ s("div", { className: o.children, children: c }),
+        e && /* @__PURE__ */ s("div", { children: e })
+      ]
+    }
+  );
+};
+p.displayName = "IressSelectBody";
+export {
+  p as IressSelectBody
+};

package/dist/components/Select/SelectBody/SelectBody.styles.js

@@ -0,0 +1,23 @@
+import { s as e } from "../../../sva-CsHRIRDW.js";
+const o = e({
+  slots: ["selectBody", "children"],
+  base: {
+    selectBody: {
+      // Performance: CSS containment (no paint due to overflow)
+      contain: "layout style",
+      display: "flex",
+      flexDirection: "column",
+      maxHeight: "[30rem]",
+      flex: "1",
+      width: "[100%]",
+      scrollable: "y"
+    },
+    children: {
+      flex: "1",
+      overflowX: "hidden"
+    }
+  }
+});
+export {
+  o as selectBody
+};

package/dist/components/Select/SelectCreate/SelectCreate.d.ts

@@ -0,0 +1,32 @@
+import { MouseEvent, ReactNode } from 'react';
+import { IressMenuItemProps, IressMenuProps } from '../../Menu';
+export interface IressSelectCreateProps extends Omit<IressMenuProps, 'changeOnBlur' | 'children' | 'defaultSelected' | 'multiSelect' | 'onChange' | 'role' | 'selected' | 'type'>, Pick<IressMenuItemProps, 'loading'> {
+    /**
+     * If set to true, menu will fill the width of its container.
+     * @default true
+     */
+    fluid?: boolean;
+    /**
+     * Heading slot. Often used for a title or description.
+     * If a string, will automatically provide an id for aria-labelledby.
+     */
+    heading?: ReactNode;
+    /**
+     * Label that will be displayed on the add button.
+     * @default 'New option'
+     */
+    label?: ReactNode;
+    /**
+     * Emitted when the user clicks the add button.
+     */
+    onCreate?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Prepends an element to the add button.
+     * @default <IressIcon name="plus" screenreaderText="Add" />
+     */
+    prepend?: ReactNode;
+}
+export declare const IressSelectCreate: {
+    ({ fluid, heading, label, loading, onCreate, prepend, ...restProps }: IressSelectCreateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Select/SelectCreate/SelectCreate.js

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import "react";
+import { useIdIfNeeded as a } from "../../../hooks/useIdIfNeeded.js";
+import { IressMenu as c } from "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Menu/MenuItem/MenuItem.styles.js";
+import "../../Menu/MenuGroup/MenuGroup.styles.js";
+import "../../Menu/MenuDivider/MenuDivider.js";
+import "../../Menu/MenuGroup/MenuGroup.js";
+import { IressMenuItem as I } from "../../Menu/MenuItem/MenuItem.js";
+import "../../Menu/MenuText/MenuText.js";
+import { IressIcon as f } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
+import { IressSelectHeading as u } from "../SelectHeading/SelectHeading.js";
+const b = ({
+  fluid: m = !0,
+  heading: e,
+  label: s = "New option",
+  loading: l,
+  onCreate: d,
+  prepend: n = /* @__PURE__ */ t(f, { name: "plus", screenreaderText: "Add" }),
+  ...r
+}) => {
+  const i = `${a({ id: r.id })}--label`, o = typeof e == "string";
+  return /* @__PURE__ */ p(
+    c,
+    {
+      ...r,
+      "aria-labelledby": o ? i : r["aria-labelledby"],
+      role: "menu",
+      fluid: m,
+      children: [
+        o ? /* @__PURE__ */ t(u, { id: i, children: e }) : e,
+        /* @__PURE__ */ t(I, { prepend: n, onClick: d, loading: l, children: s })
+      ]
+    }
+  );
+};
+b.displayName = "IressSelectCreate";
+export {
+  b as IressSelectCreate
+};

package/dist/components/Select/SelectHeading/SelectHeading.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode, UIEvent } from 'react';
+import { IressMenuTextProps } from '../../Menu';
+export interface IressSelectHeadingProps extends IressMenuTextProps {
+    /**
+     * The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+     */
+    children: ReactNode;
+    /**
+     * Adds a clear all button to the heading.
+     */
+    clearAll?: string | boolean;
+    /**
+     * Emitted when the user clicks the clear button, or triggers it using a keyboard.
+     */
+    onClearAll?: (e: UIEvent<HTMLButtonElement>) => void;
+}
+export declare const IressSelectHeading: {
+    ({ children, className, clearAll, onClearAll, textStyle, ...restProps }: IressSelectHeadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Select/SelectHeading/SelectHeading.js

@@ -0,0 +1,78 @@
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { c as p } from "../../../cx-DN21T1EH.js";
+import { select as d } from "../Select.styles.js";
+import { forwardRef as f, useRef as u, useImperativeHandle as I } from "react";
+import "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Menu/MenuItem/MenuItem.styles.js";
+import "../../Menu/MenuGroup/MenuGroup.styles.js";
+import "../../Menu/MenuDivider/MenuDivider.js";
+import "../../Menu/MenuGroup/MenuGroup.js";
+import "../../Menu/MenuItem/MenuItem.js";
+import { IressMenuHeading as g } from "../../Menu/MenuText/MenuText.js";
+import { GlobalCSSClass as a } from "../../../enums.js";
+import { I as v } from "../../../Button-C0p8bEXn.js";
+import "../../Button/CloseButton/CloseButton.js";
+import "../../Popover/Popover.js";
+import "../../Popover/Popover.styles.js";
+import "../../Popover/InputPopover/InputPopover.js";
+import "../../Popover/hooks/useFloatingPopover.js";
+import { usePopoverItem as y } from "../../Popover/hooks/usePopoverItem.js";
+import "../../Inline/Inline.styles.js";
+import { IressInline as w } from "../../Inline/Inline.js";
+const l = d(), S = f(
+  (o, i) => {
+    const e = u(null), { isActiveInPopover: r, ...t } = y("", {
+      onKeyDown: o.onKeyDown
+    });
+    return I(i, () => e.current), /* @__PURE__ */ s(
+      v,
+      {
+        ...o,
+        ...t,
+        className: p(l.dropdownClear, a.SelectClearButton),
+        active: r,
+        mode: "tertiary",
+        ref: (n) => {
+          e.current = n, t?.ref?.(e.current);
+        }
+      }
+    );
+  }
+), h = ({
+  children: o,
+  className: i,
+  clearAll: e,
+  onClearAll: r,
+  textStyle: t = "typography.heading.4",
+  ...n
+}) => /* @__PURE__ */ s(
+  g,
+  {
+    ...n,
+    className: p(
+      l.dropdownSelectedHeading,
+      i,
+      a.SelectHeading
+    ),
+    role: void 0,
+    textStyle: t,
+    children: /* @__PURE__ */ c(w, { horizontalAlign: "between", verticalAlign: "middle", children: [
+      o,
+      e && /* @__PURE__ */ s(
+        S,
+        {
+          onClick: r,
+          onKeyDown: (m) => {
+            m.key === "Enter" && (m.preventDefault(), r?.(m));
+          },
+          children: typeof e == "boolean" ? "Clear all" : e
+        }
+      )
+    ] })
+  }
+);
+h.displayName = "IressSelectHeading";
+export {
+  h as IressSelectHeading
+};

package/dist/components/Select/SelectLabel/SelectLabel.d.ts

@@ -0,0 +1,7 @@
+import { IressSelectActivatorProps } from '../components/SelectActivator';
+import { IressUnstyledProps } from '../../../types';
+export type IressSelectLabelProps = Omit<IressUnstyledProps<'button'>, 'children'> & IressSelectActivatorProps;
+export declare const IressSelectLabel: {
+    ({ append, className, placeholder, prepend, selected, selectedOptionsText, ...restProps }: IressSelectLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Select/SelectLabel/SelectLabel.js

@@ -0,0 +1,51 @@
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { toArray as b } from "../../../helpers/formatting/toArray.js";
+import { composeLabelValueDescriptor as d } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+import { selectLabel as S } from "./SelectLabel.styles.js";
+import { IressText as L } from "../../Text/Text.js";
+import { GlobalCSSClass as t } from "../../../enums.js";
+import { c as o } from "../../../cx-DN21T1EH.js";
+const C = ({
+  append: l,
+  className: c,
+  placeholder: n,
+  prepend: a,
+  selected: p,
+  selectedOptionsText: m = "{{numOptions}} selected",
+  ...i
+}) => {
+  const e = b(p), r = S({ showDefaultChevron: !l }), h = f(() => e.length ? e.length === 1 ? e[0].label : d(e, m) : n, [n, e, m]);
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      ...i,
+      type: "button",
+      className: o(
+        c,
+        r.selectLabel,
+        t.FormElementInner,
+        t.SelectLabel
+      ),
+      children: [
+        a && /* @__PURE__ */ s("span", { className: r.prepend, children: a }),
+        /* @__PURE__ */ s(
+          L,
+          {
+            className: o(
+              r.contents,
+              !e.length && r.placeholder
+            ),
+            element: "span",
+            children: h
+          }
+        ),
+        /* @__PURE__ */ s("span", { className: o(r.append, t.InputAddon), children: l })
+      ]
+    }
+  );
+};
+C.displayName = "IressSelectLabel";
+export {
+  C as IressSelectLabel
+};

package/dist/components/Select/SelectLabel/SelectLabel.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const selectLabel: import('../../../styled-system/types').SlotRecipeRuntimeFn<"append" | "prepend" | "contents" | "placeholder" | "selectLabel", {
+    showDefaultChevron: {
+        true: {
+            selectLabel: {
+                position: "relative";
+            };
+            append: {
+                selectChevron: true;
+            };
+        };
+        false: {
+            append: {};
+        };
+    };
+}>;

package/dist/components/Select/SelectLabel/SelectLabel.styles.js

@@ -0,0 +1,73 @@
+import { s as e } from "../../../sva-CsHRIRDW.js";
+const n = e({
+  slots: ["selectLabel", "contents", "placeholder", "prepend", "append"],
+  base: {
+    selectLabel: {
+      display: "flex",
+      width: "[100%]",
+      justifyContent: "space-between",
+      alignItems: "center",
+      minHeight: "input.height",
+      paddingInline: "spacing.2",
+      paddingBlock: "spacing.0",
+      backgroundColor: "colour.neutral.10",
+      border: "input",
+      borderRadius: "radius.system.form",
+      boxSizing: "border-box",
+      textStyle: "typography.body.md",
+      color: "colour.neutral.80",
+      cursor: "pointer",
+      transition: "common",
+      focusable: "select-activator"
+    },
+    contents: {
+      textStyle: "inherit",
+      color: "[inherit]",
+      backgroundColor: "transparent",
+      textAlign: "left",
+      borderWidth: "0",
+      flex: "1",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      padding: "[0]"
+    },
+    placeholder: {
+      color: "colour.neutral.60",
+      textAlign: "left",
+      textStyle: "typography.body.md"
+    },
+    prepend: {
+      display: "inline-flex",
+      alignItems: "center",
+      color: "colour.neutral.40",
+      gap: "spacing.1"
+    },
+    append: {
+      display: "inline-flex",
+      alignItems: "center",
+      color: "colour.neutral.70",
+      gap: "spacing.1",
+      marginInlineEnd: "spacing.1",
+      pointerEvents: "none"
+    }
+  },
+  variants: {
+    showDefaultChevron: {
+      true: {
+        selectLabel: {
+          position: "relative"
+        },
+        append: {
+          selectChevron: !0
+        }
+      },
+      false: {
+        append: {}
+      }
+    }
+  }
+});
+export {
+  n as selectLabel
+};

package/dist/components/Select/SelectMenu/SelectMenu.d.ts

@@ -0,0 +1,55 @@
+import { IressMenuItemProps, IressMenuProps } from '../../Menu';
+import { ReactNode } from 'react';
+import { ControlledValue } from '../../../hooks';
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../../interfaces';
+import { FormControlValue } from '../../../types';
+export interface IressSelectMenuProps<TMultiple extends boolean = false> extends Omit<IressMenuProps<FormControlValue, TMultiple>, 'children' | 'onChange' | 'selected' | 'type'> {
+    /**
+     * Heading slot. Often used for a title or description.
+     * If a string, will automatically provide an id for aria-labelledby.
+     */
+    heading?: ReactNode;
+    /**
+     * Hide selected items from menu.
+     * Useful for autocomplete scenarios.
+     */
+    hideSelectedItems?: boolean;
+    /**
+     * Items to be displayed in the menu, array of FormattedLabelValueMeta.
+     */
+    items?: FormattedLabelValueMeta[];
+    /**
+     * Maximum number of results displayed on mobile screen sizes (< 768).
+     */
+    limitMobile?: number;
+    /**
+     * Maximum number of results displayed on larger screen sizes (>= 768).
+     */
+    limitDesktop?: number;
+    /**
+     * No results text to display when no items are found.
+     */
+    noResults?: ReactNode;
+    /**
+     * Emitted when the value changes when item is selected from the menu
+     */
+    onChange?: (selected?: ControlledValue<LabelValueMeta, TMultiple>) => void;
+    /**
+     * Selected items.
+     */
+    selected?: ControlledValue<LabelValueMeta, TMultiple>;
+    /**
+     * Set whether to display selected items first in the menu.
+     */
+    selectedFirst?: boolean;
+}
+export interface IressSelectMenuItemProps extends Omit<IressMenuItemProps<'button'>, 'children' | 'value'>, FormattedLabelValueMeta {
+    /**
+     * Set whether this item is hidden on mobile
+     */
+    hiddenOnMobile?: boolean;
+}
+export declare const IressSelectMenu: {
+    <TMultiple extends boolean = false>({ heading, hideSelectedItems, items, limitDesktop, limitMobile, multiSelect, noResults, onChange, role, selected, selectedFirst, ...restProps }: IressSelectMenuProps<TMultiple>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};