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

package/dist/components/Pill/Pill.styles.js

@@ -0,0 +1,83 @@
+import { c as o } from "../../cva-3iuaj0TL.js";
+const a = o({
+  base: {
+    // Performance: CSS containment limits style recalculation scope
+    contain: "layout style paint",
+    display: "inline-block",
+    overflow: "visible",
+    textStyle: "typography.body.sm",
+    borderRadius: "radius.system.pill",
+    boxSizing: "border-box",
+    lineHeight: 1,
+    textAlign: "center",
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    minHeight: "[1.35em]",
+    minWidth: "[1.5em]",
+    py: "spacing.1",
+    px: "spacing.2",
+    verticalAlign: "middle"
+  },
+  variants: {
+    mode: {
+      10: {
+        bg: "colour.data.bold.10",
+        color: "colour.data.subtle.10"
+      },
+      20: {
+        bg: "colour.data.bold.20",
+        color: "colour.data.subtle.20"
+      },
+      30: {
+        bg: "colour.data.bold.30",
+        color: "colour.data.subtle.30"
+      },
+      40: {
+        bg: "colour.data.bold.40",
+        color: "colour.data.subtle.40"
+      },
+      50: {
+        bg: "colour.data.bold.50",
+        color: "colour.data.subtle.50"
+      },
+      60: {
+        bg: "colour.data.bold.60",
+        color: "colour.data.subtle.60"
+      },
+      70: {
+        bg: "colour.data.bold.70",
+        color: "colour.data.subtle.70"
+      },
+      80: {
+        bg: "colour.data.bold.80",
+        color: "colour.data.subtle.80"
+      },
+      90: {
+        bg: "colour.data.bold.90",
+        color: "colour.data.subtle.90"
+      },
+      danger: {
+        bg: "colour.system.danger.fill",
+        color: "colour.system.danger.onFill"
+      },
+      info: {
+        bg: "colour.system.info.fill",
+        color: "colour.system.info.onFill"
+      },
+      success: {
+        bg: "colour.system.success.fill",
+        color: "colour.system.success.onFill"
+      },
+      warning: {
+        bg: "colour.system.warning.fill",
+        color: "colour.system.warning.onFill"
+      }
+    }
+  },
+  defaultVariants: {
+    mode: "90"
+  }
+});
+export {
+  a as pill
+};

package/dist/components/Pill/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Pill';
+export * from './Pill.styles';

package/dist/components/Pill/index.js

@@ -0,0 +1,6 @@
+import { IressPill as o } from "./Pill.js";
+import { pill as p } from "./Pill.styles.js";
+export {
+  o as IressPill,
+  p as pill
+};

package/dist/components/Placeholder/Placeholder.d.ts

@@ -0,0 +1,28 @@
+import { IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressPlaceholderProps extends Omit<IressStyledProps, 'width'> {
+    /**
+     * Description of the placeholder's envisioned contents.
+     */
+    children?: ReactNode;
+    /**
+     * Title for the placeholder content.
+     */
+    heading?: ReactNode;
+    /**
+     * Sets the height of the placeholder.
+     */
+    height?: string | number;
+    /**
+     * Sets the placeholder to be full width if true.
+     */
+    stretch?: boolean;
+    /**
+     * Sets the width of the placeholder.
+     */
+    width?: string | number;
+}
+export declare const IressPlaceholder: {
+    ({ children, className, heading, height, stretch, style, width, ...restProps }: IressPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Placeholder/Placeholder.js

@@ -1,39 +1,68 @@
-import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import { toCSSLengthValue as a } from "../../helpers/formatting/toCSSLengthValue.js";
-import { c as p } from "../../cx-DN21T1EH.js";
-import { placeholder as x } from "./Placeholder.styles.js";
-import { IressText as d } from "../Text/Text.js";
-import { GlobalCSSClass as g } from "../../enums.js";
-const C = ({
-  children: c,
-  className: m,
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { toCSSLengthValue as m } from "../../helpers/formatting/toCSSLengthValue.js";
+import { c as g } from "../../cx-DN21T1EH.js";
+import { placeholder as y } from "./Placeholder.styles.js";
+import { IressText as n } from "../Text/Text.js";
+import { GlobalCSSClass as u } from "../../enums.js";
+const f = ({
+  children: l,
+  className: i,
+  heading: o,
   height: s = "auto",
-  stretch: i,
-  style: e,
-  width: t = "auto",
-  ...n
+  stretch: p,
+  style: r,
+  width: a = "auto",
+  ...h
 }) => {
-  const h = s === "auto" ? i ? "100%" : s : a(s), o = x();
-  return /* @__PURE__ */ r(
-    d,
+  const x = s === "auto" ? p ? "100%" : s : m(s), e = y(), d = !l && !o;
+  return /* @__PURE__ */ c(
+    n,
     {
-      className: p(m, o.root, g.Placeholder),
-      ...n,
+      className: g(i, e.root, u.Placeholder),
+      ...h,
       style: {
-        ...e,
-        width: t ? a(t) : e?.width,
-        height: h
+        ...r,
+        width: a ? m(a) : r?.width,
+        height: x
       },
       children: [
-        /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", className: o.svg, children: [
-          /* @__PURE__ */ l("line", { x1: "0", y1: "0", x2: "100%", y2: "100%", className: o.line }),
-          /* @__PURE__ */ l("line", { x1: "100%", y1: "0", x2: "0", y2: "100%", className: o.line })
+        d && /* @__PURE__ */ c("svg", { xmlns: "http://www.w3.org/2000/svg", className: e.svg, children: [
+          /* @__PURE__ */ t(
+            "line",
+            {
+              x1: "0",
+              y1: "0",
+              x2: "100%",
+              y2: "100%",
+              className: e.line
+            }
+          ),
+          /* @__PURE__ */ t(
+            "line",
+            {
+              x1: "100%",
+              y1: "0",
+              x2: "0",
+              y2: "100%",
+              className: e.line
+            }
+          )
         ] }),
-        c
+        o && /* @__PURE__ */ t(
+          n,
+          {
+            element: "strong",
+            textStyle: "typography.heading.4",
+            className: e.heading,
+            children: o
+          }
+        ),
+        l
       ]
     }
   );
 };
+f.displayName = "IressPlaceholder";
 export {
-  C as IressPlaceholder
+  f as IressPlaceholder
 };

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

@@ -0,0 +1 @@
+export declare const placeholder: import('../../styled-system/types').SlotRecipeRuntimeFn<"svg" | "line" | "heading" | "root", import('../../styled-system/types').SlotRecipeVariantRecord<"svg" | "line" | "heading" | "root">>;

package/dist/components/Placeholder/Placeholder.styles.js

@@ -1,12 +1,12 @@
-import { s as e } from "../../sva-OmxClA9g.js";
-const t = e({
-  slots: ["root", "svg", "line"],
+import { s as o } from "../../sva-CsHRIRDW.js";
+const t = o({
+  slots: ["root", "svg", "line", "heading"],
   base: {
     root: {
       alignItems: "center",
-      bg: "colour.neutral.20",
-      border: "placeholder",
-      borderRadius: "radius.system.layout",
+      flexDirection: "column",
+      bg: "colour.data.subtle.50",
+      color: "colour.data.bold.50",
       boxSizing: "border-box",
       display: "flex",
       justifyContent: "center",
@@ -21,9 +21,13 @@ const t = e({
       zIndex: "[-1]"
     },
     line: {
-      strokeWidth: "1.5px",
-      stroke: "colour.neutral.30",
-      strokeOpacity: "0.5"
+      display: "none",
+      strokeWidth: "0.5px",
+      stroke: "colour.primary.fill",
+      strokeOpacity: "0.1"
+    },
+    heading: {
+      color: "[inherit]"
     }
   }
 });

package/dist/components/Popover/InputPopover/InputPopover.d.ts

@@ -0,0 +1,21 @@
+import { InputPopoverActivatorProps } from './InputPopoverActivator';
+import { IressPopoverProps } from '../Popover';
+import { PopoverRef } from '../hooks/usePopoverImperativeHandle';
+export interface IressInputPopoverProps extends Omit<IressPopoverProps, 'fluid' | 'offset' | 'matchActivatorWidth' | 'virtualFocus'>, Omit<InputPopoverActivatorProps, 'children'> {
+    /**
+     * Content for an activator element, usually an `IressInput`.
+     */
+    activator: InputPopoverActivatorProps['children'];
+    /**
+     * If true, the first supported is automatically highlighted.
+     * @default true
+     */
+    autoHighlight?: boolean;
+    /**
+     * Describes the type of content contained in the popover.
+     * If `listbox`, it will add the combobox role to the popover activator.
+     * @default listbox
+     */
+    type?: IressPopoverProps['type'];
+}
+export declare const IressInputPopover: import('react').ForwardRefExoticComponent<IressInputPopoverProps & import('react').RefAttributes<PopoverRef>>;

package/dist/components/Popover/InputPopover/InputPopover.js

@@ -1,91 +1,91 @@
-import { jsx as o, jsxs as w } from "react/jsx-runtime";
-import { forwardRef as y, useContext as E } from "react";
-import { GlobalCSSClass as t } from "../../../enums.js";
-import { propagateTestid as m } from "../../../helpers/utility/propagateTestid.js";
-import { PopoverContent as G } from "../components/PopoverContent.js";
-import { InputPopoverActivator as H } from "./InputPopoverActivator.js";
-import { usePopoverImperativeHandle as R } from "../hooks/usePopoverImperativeHandle.js";
-import { s as S } from "../../../factory-oPXoMw9H.js";
-import { usePopover as T, PopoverContext as c } from "../hooks/usePopover.js";
-import { c as n } from "../../../cx-DN21T1EH.js";
-import { popover as W } from "../Popover.styles.js";
-import { NestedPopoverActivator as k } from "../components/NestedPopoverActivator.js";
-const q = ({
-  activator: v,
-  align: u = "auto",
-  autoHighlight: l = !0,
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { GlobalCSSClass as o } from "../../../enums.js";
+import { propagateTestid as n } from "../../../helpers/utility/propagateTestid.js";
+import { PopoverContent as E } from "../components/PopoverContent.js";
+import { InputPopoverActivator as G } from "./InputPopoverActivator.js";
+import { usePopoverImperativeHandle as H } from "../hooks/usePopoverImperativeHandle.js";
+import { s as R } from "../../../factory-CcYfm2kB.js";
+import { c as a } from "../../../cx-DN21T1EH.js";
+import { popover as S } from "../Popover.styles.js";
+import { useFloatingPopover as T, FloatingPopoverContext as W } from "../hooks/useFloatingPopover.js";
+const v = ({
+  activator: c,
+  align: l = "auto",
+  autoHighlight: u = !0,
   children: d,
   className: f,
   container: P,
-  contentClassName: h,
-  contentStyle: a,
-  defaultShow: x,
-  displayMode: s = "overlay",
-  focusStartIndex: I,
-  minLength: C,
-  onActivated: A,
-  onDeactivated: N,
-  onNavigate: F,
-  show: b,
-  type: j = "listbox",
-  ...r
-}, g) => {
-  const i = s === "overlay", e = W({ hasInputActivator: !0, matchActivatorWidth: i }), p = T({
-    align: u,
-    autoHighlight: l,
-    defaultShow: x,
-    focusStartIndex: I,
+  contentClassName: I,
+  contentStyle: s,
+  defaultShow: h,
+  displayMode: i = "overlay",
+  focusStartIndex: x,
+  minLength: A,
+  onActivated: C,
+  onDeactivated: F,
+  onNavigate: N,
+  show: g,
+  type: b = "listbox",
+  ...t
+}, j) => {
+  const p = i === "overlay", r = S({ hasInputActivator: !0, matchActivatorWidth: p }), m = T({
+    align: l,
+    autoHighlight: u,
+    defaultShow: h,
+    focusStartIndex: x,
     hasInputActivator: !0,
-    matchActivatorWidth: i,
-    onActivated: A,
-    onDeactivated: N,
-    onNavigate: F,
-    show: b,
-    type: j,
+    matchActivatorWidth: p,
+    onActivated: C,
+    onDeactivated: F,
+    onNavigate: N,
+    show: g,
+    type: b,
     virtualFocus: !0
   });
-  return R(g, p), /* @__PURE__ */ o(c.Provider, { value: p, children: /* @__PURE__ */ w(
-    S.div,
+  return H(j, m), /* @__PURE__ */ e(W.Provider, { value: m, children: /* @__PURE__ */ y(
+    R.div,
     {
-      ...r,
-      className: n(
+      ...t,
+      className: a(
         f,
-        t.FormElement,
-        e.root,
-        t.Popover,
-        t.InputPopover
+        o.FormElement,
+        r.root,
+        o.Popover,
+        o.InputPopover
       ),
       children: [
-        /* @__PURE__ */ o(k, { parentPopover: E(c), children: /* @__PURE__ */ o(
-          H,
+        /* @__PURE__ */ e(
+          G,
           {
-            className: e.activator,
-            "data-testid": m(r["data-testid"], "activator"),
-            minLength: C,
-            children: v
+            className: a(r.activator, o.PopoverActivator),
+            "data-testid": n(t["data-testid"], "activator"),
+            minLength: A,
+            children: c
           }
-        ) }),
-        /* @__PURE__ */ o(
-          G,
+        ),
+        /* @__PURE__ */ e(
+          E,
           {
-            className: n(
-              h,
-              a?.className,
-              e.content,
-              t.PopoverContent
+            className: a(
+              I,
+              s?.className,
+              r.content,
+              o.PopoverContent
             ),
             container: P,
-            "data-testid": m(r["data-testid"], "content"),
-            displayMode: s,
+            "data-testid": n(t["data-testid"], "content"),
+            displayMode: i,
             virtualFocus: !0,
-            ...a,
+            ...s,
             children: d
           }
         )
       ]
     }
   ) });
-}, Z = y(q);
+}, V = w(v);
+v.displayName = "IressInputPopover";
 export {
-  Z as IressInputPopover
+  V as IressInputPopover
 };

package/dist/components/Popover/InputPopover/InputPopoverActivator.d.ts

@@ -0,0 +1,12 @@
+import { PopoverActivatorProps } from '../components/PopoverActivator';
+export interface InputPopoverActivatorProps extends PopoverActivatorProps {
+    /**
+     * Min length of input activator before popover is shown, if input activator has minLength
+     * prop it will use that as a fallback. Defaults to 1 if not provided and not found in activator.
+     */
+    minLength?: number;
+}
+export declare const InputPopoverActivator: {
+    ({ children, minLength, ...restProps }: InputPopoverActivatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Popover/InputPopover/InputPopoverActivator.js

@@ -1,37 +1,37 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useContext as m, useCallback as c, cloneElement as C } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { useCallback as c, cloneElement as g } from "react";
 import { hasFocus as w } from "../helpers/hasFocus.js";
-import { usePopoverActivatorInteractions as E } from "../hooks/usePopoverActivatorInteractions.js";
-import { PopoverContext as R } from "../hooks/usePopover.js";
-const S = ({
+import { usePopoverActivatorInteractions as C } from "../hooks/usePopoverActivatorInteractions.js";
+import { usePopover as E } from "../hooks/usePopover.js";
+const P = ({
   children: r,
   minLength: l,
   ...u
 }) => {
-  const t = m(R), o = r?.props, n = l ?? o.minLength ?? 1, a = "focus", h = c(
-    (e) => {
-      const s = e.currentTarget.value, i = s.length >= n;
-      i && t?.show === !1 ? t.setShowWithReason(!0, e.nativeEvent, a) : !i && t?.show && t.setShowWithReason(!1, e.nativeEvent, a), o.onChange?.(e, s);
+  const e = E(), o = r?.props, n = l ?? o.minLength ?? 1, a = "focus", h = c(
+    (t) => {
+      const s = t.currentTarget.value, i = s.length >= n;
+      i && e?.show === !1 ? e.setShowWithReason(!0, t.nativeEvent, a) : !i && e?.show && e.setShowWithReason(!1, t.nativeEvent, a), o.onChange?.(t, s);
     },
-    [o, n, t]
+    [o, n, e]
   ), v = c(
-    (e) => {
-      const s = e.currentTarget.value;
-      o.onClick?.(e), t?.show === !1 && w(e.currentTarget) && s.length >= n && t.setShowWithReason(!0, e.nativeEvent, a);
+    (t) => {
+      const s = t.currentTarget.value;
+      o.onClick?.(t), e?.show === !1 && w(t.currentTarget) && s.length >= n && e.setShowWithReason(!0, t.nativeEvent, a);
     },
-    [o, n, t]
+    [o, n, e]
   ), p = c(
-    (e) => {
-      o.onFocus?.(e), (!n || e.currentTarget.value.length >= n) && t?.show === !1 && t.setShowWithReason(!0, e.nativeEvent, "focus");
+    (t) => {
+      o.onFocus?.(t), (!n || t.currentTarget.value.length >= n) && e?.show === !1 && e.setShowWithReason(!0, t.nativeEvent, "focus");
     },
-    [o, n, t]
-  ), f = E(
-    t,
+    [o, n, e]
+  ), f = C(
+    e,
     o
   );
-  return /* @__PURE__ */ g("div", { ...u, ref: t?.api.refs.setReference, children: r && t && C(
+  return /* @__PURE__ */ m("div", { ...u, ref: e?.api.refs.setReference, children: r && e && g(
     r,
-    t.interactions.getReferenceProps({
+    e.interactions.getReferenceProps({
       ...f,
       "aria-autocomplete": "list",
       onChange: h,
@@ -40,6 +40,7 @@ const S = ({
     })
   ) });
 };
+P.displayName = "InputPopoverActivator";
 export {
-  S as InputPopoverActivator
+  P as InputPopoverActivator
 };

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,100 @@
+import { ReactNode } from 'react';
+import { PopoverActivatorProps } from './components/PopoverActivator';
+import { FloatingUIAligns, FloatingUIContainer, IressStyledProps } from '../../types';
+import { OffsetOptions, OpenChangeReason } from '@floating-ui/react';
+import { PopoverRef } from './hooks/usePopoverImperativeHandle';
+import { IressCustomiseSlot } from '../../interfaces';
+import { FloatingPopoverHookReturn } from './hooks/useFloatingPopover';
+export interface IressPopoverProps extends IressStyledProps {
+    /**
+     * Content for an activator element, usually an `IressButton`.
+     */
+    activator: PopoverActivatorProps['children'];
+    /**
+     * Sets the alignment of the popover relative to the activator element.
+     * @default auto
+     */
+    align?: FloatingUIAligns;
+    /**
+     * The content to render within the popover.
+     */
+    children?: ReactNode;
+    /**
+     * The container element to render the popover into.
+     * By default, the popover will render where its parent is rendered.
+     *
+     * **Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * Class name of the popover content.
+     * @deprecated Use `contentStyle` instead.
+     */
+    contentClassName?: string;
+    /**
+     * This allows you to customise the content styling specifically, which is the floating element.
+     * It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+     */
+    contentStyle?: IressCustomiseSlot;
+    /**
+     * When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+     */
+    defaultShow?: boolean;
+    /**
+     * Sets the display mode of popover.
+     * @default overlay
+     */
+    displayMode?: 'inline' | 'overlay';
+    /**
+     * Popovers can be fluid, meaning they will take up the full width of their container.
+     */
+    fluid?: boolean;
+    /**
+     * Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu.
+     * Note: The index must exist in the list of items, otherwise it will not work.
+     */
+    focusStartIndex?: number;
+    /**
+     * Sets the popover to match the width of the activator.
+     * Note: This only works when `displayMode="overlay"`.
+     */
+    matchActivatorWidth?: boolean;
+    /**
+     * The offset of the popover from its default position. This can be a number or an object with `mainAxis` and `crossAxis` properties, which specify the offset in pixels along the main axis (the axis along which the popover is aligned) and the cross axis (the perpendicular axis).
+     * @default 5
+     */
+    offset?: OffsetOptions | number;
+    /**
+     * Is called when popover is activated.
+     */
+    onActivated?: (e?: Event, reason?: OpenChangeReason, activeIndex?: number | null) => void;
+    /**
+     * Is called when popover is deactivated.
+     */
+    onDeactivated?: (e?: Event, reason?: OpenChangeReason, activeIndex?: number | null) => void;
+    /**
+     * Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+     */
+    onNavigate?: (activeIndex: number | null) => void;
+    /**
+     * When set to `true` the modal will be visible. Use for controlled popovers.
+     */
+    show?: boolean;
+    /**
+     * Describes the type of content contained in the popover.
+     */
+    type?: FloatingPopoverHookReturn['type'];
+    /**
+     * Whether the focus is virtual (using `aria-activedescendant`).
+     * Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items.
+     * Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+     * @default false
+     */
+    virtualFocus?: boolean;
+    /**
+     * Whether this popover uses nested navigation (ArrowRight to open, ArrowLeft to close).
+     * When not set, this is auto-detected based on whether the popover is inside another popover.
+     */
+    nested?: boolean;
+}
+export declare const IressPopover: import('react').ForwardRefExoticComponent<IressPopoverProps & import('react').RefAttributes<PopoverRef>>;