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

package/dist/components/Label/LabelBase/LabelBase.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+export type LabelBaseProps<E extends 'label' | 'strong' | 'legend' = 'label'> = IressStyledProps<E> & {
+    /**
+     * Content to be appended to the label.
+     * This is not affected by the `hiddenLabel` prop.
+     */
+    append?: ReactNode;
+    /**
+     * Content to be displayed in the label.
+     * This can also include error messages to make sure it makes sense in this context.
+     */
+    children: ReactNode;
+    /**
+     * The base tag of the label.
+     * @default label
+     */
+    element?: E;
+    /**
+     * Visually hides the label text, but still available to screen readers.
+     */
+    hiddenLabel?: boolean;
+    /**
+     * When set to true, the 'required asterisk (*)' is displayed next to the label text.
+     */
+    required?: boolean;
+};
+export declare const LabelBase: {
+    <E extends "label" | "strong" | "legend" = "label">({ append, children, className, "data-testid": dataTestId, element, hiddenLabel, required, ...restProps }: LabelBaseProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Label/LabelBase/LabelBase.js

@@ -1,47 +1,52 @@
-import { jsxs as l, jsx as a, Fragment as b } from "react/jsx-runtime";
-import { GlobalCSSClass as g } from "../../../enums.js";
-import { propagateTestid as y } from "../../../helpers/utility/propagateTestid.js";
+import { jsxs as i, Fragment as y, jsx as s } from "react/jsx-runtime";
+import { GlobalCSSClass as c } from "../../../enums.js";
+import { propagateTestid as g } from "../../../helpers/utility/propagateTestid.js";
 import { useState as C, useMemo as S } from "react";
-import { s as r } from "../../../factory-oPXoMw9H.js";
+import { s as r } from "../../../factory-CcYfm2kB.js";
 import { label as j } from "../Label.styles.js";
 import { c as q } from "../../../cx-DN21T1EH.js";
-const R = ({
+const B = ({
   append: o,
-  children: c,
-  className: p,
+  children: p,
+  className: d,
   "data-testid": m,
-  element: n,
-  hiddenLabel: t = !1,
-  required: d,
-  ...f
+  element: l,
+  hiddenLabel: e = !1,
+  required: f,
+  ...u
 }) => {
-  const [i, u] = C(), e = j({ hasAppend: !!o, hiddenLabel: t }), x = (h) => {
-    const s = h?.textContent;
-    s && s !== i && u(s);
-  }, N = S(
-    () => r(n ?? "label"),
-    [n]
+  const [n, x] = C(), a = j({ hasAppend: !!o, hiddenLabel: e }), N = (h) => {
+    const t = h?.textContent;
+    t && t !== n && x(t);
+  }, b = S(
+    () => r(l ?? "label"),
+    [l]
   );
-  return /* @__PURE__ */ l(
-    N,
+  return /* @__PURE__ */ i(
+    b,
     {
-      className: q(p, g.FormLabel, e.root),
+      className: q(
+        d,
+        c.FormLabel,
+        c.Label,
+        a.root
+      ),
       "data-testid": m,
-      ...f,
-      "data-name": i,
+      ...u,
+      "data-name": n,
       children: [
-        d && /* @__PURE__ */ l(b, { children: [
-          !t && /* @__PURE__ */ a("span", { className: e.required, "aria-hidden": !0, children: "*" }),
-          /* @__PURE__ */ a(r.span, { srOnly: !0, children: "Required" })
+        f && /* @__PURE__ */ i(y, { children: [
+          !e && /* @__PURE__ */ s("span", { className: a.required, "aria-hidden": !0, children: "*" }),
+          /* @__PURE__ */ s(r.span, { srOnly: !0, children: "Required" })
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           r.span,
           {
-            className: e.text,
-            "data-testid": y(m, "text"),
-            ref: x,
-            srOnly: t,
-            children: c
+            className: a.text,
+            "data-testid": g(m, "text"),
+            ref: N,
+            srOnly: e,
+            children: p
           }
         ),
         o
@@ -49,6 +54,7 @@ const R = ({
     }
   );
 };
+B.displayName = "LabelBase";
 export {
-  R as LabelBase
+  B as LabelBase
 };

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,44 @@
+import { ReactElement, ReactNode, ElementType, ComponentPropsWithoutRef, MouseEventHandler } from 'react';
+import { ButtonElement, ButtonInstance, ButtonRef } from '../Button';
+import { IressCSSProps, IressTestProps } from '../../interfaces';
+export type IressLinkProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressCSSProps & IressTestProps & Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, 'element'> & {
+    /**
+     * Sets the active state of the link, usually used to indicate the link has activated a modal, popover or slideout.
+     */
+    active?: boolean;
+    /**
+     * Content for the append slot.
+     */
+    append?: ReactNode;
+    /**
+     * Content is placed between prepend and append if provided. Used to describe the expected intention of this link.
+     */
+    children?: ReactNode;
+    /**
+     * Change the component that will be rendered as the link, used for third-party libraries that require a specific element type.
+     * By default, it will render a button or an anchor tag based on the `href` prop.
+     */
+    element?: C;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href?: THref;
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: boolean | string;
+    /**
+     * Emitted when the menu item is clicked.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Content for the prepend slot.
+     */
+    prepend?: ReactNode;
+};
+export declare const IressLink: (<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressLinkProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement) & {
+    displayName: "IressLink";
+};

package/dist/components/Link/Link.js

@@ -1,88 +1,88 @@
 import { jsxs as L, Fragment as N, jsx as o } from "react/jsx-runtime";
-import { forwardRef as S, useId as P, useMemo as a, useCallback as j } from "react";
+import { forwardRef as S, useId as P, useMemo as m, useCallback as j } from "react";
 import { IressSpinner as v } from "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
-import { s as w } from "../../is-valid-prop-Ce0wiweq.js";
-import { c as e } from "../../css-fGu_jDvv.js";
+import { s as w } from "../../is-valid-prop-C5D641yn.js";
+import { c as e } from "../../css-DVJ-ALYD.js";
 import { c as G } from "../../cx-DN21T1EH.js";
 import { link as F } from "./Link.styles.js";
 import { GlobalCSSClass as b } from "../../enums.js";
 const M = ({
-  active: k,
+  active: h,
   append: n,
-  children: c,
+  children: p,
   className: f,
-  element: p,
-  loading: s = !1,
+  element: c,
+  loading: r = !1,
   onClick: l,
-  prepend: i,
+  prepend: a,
   ...u
-}, x) => {
-  const m = P(), r = F.raw({
-    active: k,
-    loading: !!s
-  }), [d, t] = a(
+}, y) => {
+  const i = P(), s = F.raw({
+    active: h,
+    loading: !!r
+  }), [d, t] = m(
     () => w(u),
     [u]
-  ), h = j(
+  ), k = j(
     (I) => {
-      s || l?.(I);
+      r || l?.(I);
     },
-    [s, l]
-  ), C = a(
+    [r, l]
+  ), C = m(
     () => ({
       children: /* @__PURE__ */ L(N, { children: [
-        i && !s && /* @__PURE__ */ o("span", { className: e(r.prepend), children: i }),
-        !!s && /* @__PURE__ */ o(
+        a && !r && /* @__PURE__ */ o("span", { className: e(s.prepend), children: a }),
+        !!r && /* @__PURE__ */ o(
           v,
           {
-            className: e(r.spinner),
-            fixedWidth: !0,
-            id: m,
-            screenreaderText: s === !0 ? "Loading" : s
+            className: e(s.spinner),
+            id: i,
+            screenreaderText: r === !0 ? "Loading" : r
           }
         ),
-        c && /* @__PURE__ */ o("span", { className: e(r.content), children: c }),
-        n && /* @__PURE__ */ o("span", { className: e(r.append), children: n })
+        p && /* @__PURE__ */ o("span", { className: e(s.content), children: p }),
+        n && /* @__PURE__ */ o("span", { className: e(s.append), children: n })
       ] }),
       className: G(
         f,
-        e(r.root, d),
+        e(s.root, d),
         b.Group,
         b.Link
       ),
-      onClick: h
+      onClick: k
     }),
     [
       n,
-      c,
+      p,
       f,
-      h,
-      s,
+      k,
+      r,
+      a,
       i,
-      m,
       d,
-      r.append,
-      r.content,
-      r.prepend,
-      r.root,
-      r.spinner
+      s.append,
+      s.content,
+      s.prepend,
+      s.root,
+      s.spinner
     ]
-  ), y = a(
-    () => p ?? (t.href ? "a" : "button"),
-    [p, t.href]
+  ), x = m(
+    () => c ?? (t.href ? "a" : "button"),
+    [c, t.href]
   );
   return /* @__PURE__ */ o(
-    y,
+    x,
     {
-      "aria-describedby": s ? m : void 0,
-      type: p || !t.href ? "button" : void 0,
+      "aria-describedby": r ? i : void 0,
+      type: c || !t.href ? "button" : void 0,
       ...C,
       ...t,
-      ref: x
+      ref: y
     }
   );
-}, H = S(M);
+}, R = S(M);
+R.displayName = "IressLink";
 export {
-  H as IressLink
+  R as IressLink
 };

package/dist/components/Link/Link.styles.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const link: import('../../styled-system/types').SlotRecipeRuntimeFn<"append" | "prepend" | "content" | "spinner" | "root", {
+    active: {
+        true: {
+            root: {
+                borderBottom: "[1px dashed currentColor]";
+            };
+        };
+    };
+    loading: {
+        true: {
+            content: {
+                _groupHover: {
+                    textDecoration: "underline";
+                };
+            };
+            root: {
+                cursor: "not-allowed";
+                filter: "[saturate(0.25)]";
+                opacity: number;
+                boxShadow: "none";
+            };
+        };
+    };
+}>;

package/dist/components/Link/Link.styles.js

@@ -1,6 +1,6 @@
-import { s as o } from "../../sva-OmxClA9g.js";
-const e = ["root", "content", "prepend", "append", "spinner"], n = o({
-  slots: e,
+import { s as o } from "../../sva-CsHRIRDW.js";
+const t = ["root", "content", "prepend", "append", "spinner"], n = o({
+  slots: t,
   base: {
     append: {
       display: "contents"
@@ -14,7 +14,6 @@ const e = ["root", "content", "prepend", "append", "spinner"], n = o({
     },
     root: {
       alignItems: "baseline",
-      alignSelf: "flex-start",
       cursor: "pointer",
       display: "inline-flex",
       fontKerning: "none",
@@ -24,13 +23,8 @@ const e = ["root", "content", "prepend", "append", "spinner"], n = o({
       whiteSpace: "normal",
       width: "auto",
       color: "colour.primary.text",
-      borderRadius: "radius.025",
-      _focus: {
-        outline: "[none]"
-      },
-      _focusVisible: {
-        layerStyle: "elevation.focus"
-      }
+      borderRadius: "radius.system.button",
+      focusable: "true"
     },
     prepend: {
       display: "contents"

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,134 @@
+import { Context, ReactNode } from 'react';
+import { ControlledValue } from '../../hooks';
+import { FormControlValue, IressStyledProps } from '../../types';
+/**
+ * Menu component that provides context for its child menu items, headings, dividers, and text.
+ * Does not apply to `multiSelect`, as the presence of checkboxes is determined by the `multiSelect` prop on the parent MenuItem instead to allow for more flexible combinations of single and multi select items within the same menu.
+ */
+export type MenuVariants = 'subdraw' | 'radio' | 'side' | 'rail' | undefined;
+export interface IressMenuProps<T = FormControlValue, TMultiple extends boolean = false, TVariant extends MenuVariants = undefined> extends Omit<IressStyledProps, 'defaultValue' | 'onChange' | 'value'> {
+    /**
+     * If set to true, change event will be fired with the correctly selected value.
+     */
+    changeOnBlur?: boolean;
+    /**
+     * Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
+     */
+    children?: ReactNode;
+    /**
+     * Initially selected values of menu when `role` is listbox.
+     * Used for uncontrolled menus.
+     */
+    defaultSelected?: ControlledValue<T, TMultiple>;
+    /**
+     * If set to true, menu will fill the width of its container.
+     */
+    fluid?: boolean;
+    /**
+     * Unique ID of the menu. If not provided, will be automatically generated.
+     * Used to add aria attributes for accessibility.
+     */
+    id?: string;
+    /**
+     * Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
+     * @default stack
+     */
+    layout?: 'stack' | 'inline' | 'inline-equal-width';
+    /**
+     * If set to true, menu items will contain checkboxes.
+     */
+    multiSelect?: TMultiple;
+    /**
+     * If set to true, menu items will not wrap onto a separate line when space is exceeded.
+     */
+    noWrap?: boolean;
+    /**
+     * Add a numbered header style to the menu group. Only used when variant is 'side'.
+     */
+    numbered?: TVariant extends 'side' ? boolean : never;
+    /**
+     * Emitted when the menu value changes
+     */
+    onChange?: (value?: ControlledValue<T, TMultiple> | null) => void;
+    /**
+     * Selected values of menu when `role` is listbox.
+     * Used for controlled menus.
+     */
+    selected?: ControlledValue<T, TMultiple>;
+    /**
+     * Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
+     * Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
+     */
+    role?: 'menu' | 'list' | 'listbox';
+    /**
+     * The variant of the menu, which determines some opinionated styles for the menu items
+     */
+    variant?: TMultiple extends true ? never : TVariant;
+}
+export interface MenuContextValue<T = FormControlValue, TMultiple extends boolean = false, TVariant extends MenuVariants = undefined> {
+    /**
+     * Whether the menu should change the selected value on blur.
+     * This is used by components such as `IressMenuItem` to determine if it should change the selected value on blur.
+     */
+    changeOnBlur?: boolean;
+    /**
+     * Whether the menu supports arrow key navigation.
+     * This is used by components such as `IressMenuItem` to determine if it should react to arrow key navigation.
+     */
+    hasArrowKeyNav?: boolean;
+    /**
+     * Whether the menu is considered composite by Floating UI.
+     * This is used by components such as `IressMenuItem` to determine whether it needs to be wrapped in a CompositeItem component.
+     */
+    isComposite: boolean;
+    /**
+     * Checks if the provided value is selected in the menu.
+     * This is used by components such as `IressMenuItem` to determine if it should be displayed as selected.
+     */
+    isSelected: (value?: T) => boolean;
+    /**
+     * Layout of the menu.
+     * This is used by components such as `IressMenuDivider` to determine how to display itself inside certain layouts.
+     */
+    layout: IressMenuProps<T, TMultiple>['layout'];
+    /**
+     * Whether the menu supports multiple selection.
+     * This is used by components such as `IressMenuItem` to determine if it should display a checkbox.
+     */
+    multiSelect?: boolean;
+    /**
+     * Whether the menu items should not wrap onto a separate line when space is exceeded.
+     * This is used by components such as `IressMenuItem` to avoid wrapping.
+     */
+    noWrap?: boolean;
+    /**
+     * Add a numbered header style to the menu group. Only used when variant is 'side'.
+     */
+    numbered?: IressMenuProps<T, TMultiple, TVariant>['numbered'];
+    /**
+     * The role of the menu. This is used by components such as `IressMenuItem` to determine which role to use.
+     * - `menu` means that sub-items should be `menuitem`
+     * - `list` means that sub-items should be `listitem`
+     * - `listbox` means that sub-items should be `option`
+     */
+    role?: IressMenuProps<T, TMultiple>['role'];
+    /**
+     * Whether the menu supports selection.
+     * This is used by components such as `IressMenuItem` to determine how it should behave.
+     */
+    supportsSelection: boolean;
+    /**
+     * Toggles the selected value of the menu.
+     * This is used by components such as `IressMenuItem` to change the selected value.
+     */
+    toggle: (value?: T, flag?: boolean) => void;
+    /**
+     * The variant of the menu, which determines some opinionated styles for the menu items. This is used by components such as `IressMenuItem` to determine how to display itself.
+     */
+    variant?: IressMenuProps<T, TMultiple, TVariant>['variant'];
+}
+export declare const MenuContext: Context<MenuContextValue<FormControlValue, false, undefined> | undefined>;
+export declare const IressMenu: {
+    <T = FormControlValue, TMultiple extends boolean = false, TVariant extends MenuVariants = undefined>({ changeOnBlur, className, defaultSelected, fluid, id: idProp, layout, maxWidth, multiSelect, noWrap, numbered, onChange, role: roleProp, selected: selectedProp, variant, ...restProps }: IressMenuProps<T, TMultiple, TVariant>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};