@iress-oss/ids-components 6.0.0-alpha.7 → 6.0.0-alpha.9

package/dist/components/Popover/hooks/useFloatingPopover.js

@@ -0,0 +1,141 @@
+import { createContext as z, useRef as V, useMemo as p, useCallback as x } from "react";
+import { useControlledState as D } from "../../../hooks/useControlledState.js";
+import { o as A, j as E, i as K, s as T, m as W, u as X, n as B, b as J, c as L, d as Q, p as Y } from "../../../floating-ui.react-BetVZ099.js";
+import { usePopoverNavigation as Z } from "./usePopoverNavigation.js";
+import { focusableElements as ee } from "../../../helpers/dom/focusableElements.js";
+import { usePopoverAria as oe } from "./usePopoverAria.js";
+import { closestCrossShadow as te } from "../../../helpers/dom/closestCrossShadow.js";
+import { GlobalCSSClass as se } from "../../../enums.js";
+const ne = 200, fe = ({
+  align: i = "auto",
+  autoHighlight: I = !0,
+  component: F = "IressPopover",
+  defaultShow: M,
+  focusStartIndex: d,
+  hasInputActivator: a,
+  matchActivatorWidth: v,
+  onActivated: N,
+  onDeactivated: k,
+  onNavigate: H,
+  show: _,
+  type: l,
+  virtualFocus: n
+}) => {
+  const w = V(!1), C = V(null), {
+    isControlled: h,
+    setValue: f,
+    value: r
+  } = D({
+    component: F,
+    defaultValue: M,
+    propName: "show",
+    value: _
+  }), $ = p(() => {
+    const e = a ? [A(5), E({ padding: 5 })] : [
+      A(5),
+      i === "auto" ? K() : E(),
+      T((t) => ({
+        mainAxis: !te(
+          t.elements.reference,
+          `.${se.Slideout}`
+        )
+      }))
+    ];
+    return v ? [
+      ...e,
+      W({
+        apply({ rects: t, availableHeight: s, elements: y }) {
+          requestAnimationFrame(() => {
+            Object.assign(y.floating.style, {
+              minWidth: `${t.reference.width}px`,
+              maxHeight: s > ne ? `${s}px` : void 0
+            });
+          });
+        },
+        padding: 5
+      })
+    ] : e;
+  }, [v, a, i]), o = X({
+    open: r,
+    onOpenChange: (e, t, s) => {
+      f(e), e ? N?.(t, s, c) : k?.(t, s, c);
+    },
+    middleware: $,
+    placement: i === "auto" ? void 0 : i,
+    whileElementsMounted: Y
+  }), { activeIndex: c, list: b, listNav: j, setActiveIndex: u } = Z(
+    o.context,
+    l,
+    {
+      focusItemOnOpen: I,
+      virtual: n
+    },
+    H,
+    d
+  ), q = B(o.context, {
+    enabled: !a
+  }), G = J(o.context, {
+    enabled: !0,
+    escapeKey: !a
+  }), U = L(o.context, {
+    role: l
+  }), g = oe(), S = Q([q, G, U, j]), P = p(() => n ? {
+    getVirtualFocus: () => C.current,
+    setVirtualFocus: (e) => {
+      C.current = e;
+    }
+  } : {}, [n]), m = x(() => {
+    const e = o.elements.reference;
+    return e?.querySelector("[role=combobox]") ?? ee(e)[0];
+  }, [o.elements.reference]), O = x(
+    (e) => !e || !r ? !1 : e === m(),
+    [m, r]
+  ), R = x(() => {
+    u(d ?? null);
+  }, [d, u]);
+  return p(
+    () => ({
+      activeIndex: c,
+      ...g,
+      api: o,
+      getFocusableActivator: m,
+      hasInnerRole: () => w.current,
+      interactions: S,
+      isActiveActivator: O,
+      isControlled: h,
+      isVirtualFocus: !!n,
+      list: b,
+      resetActiveIndex: R,
+      setActiveIndex: u,
+      setShow: f,
+      setShowWithReason: o.context.onOpenChange,
+      setHasInnerRole: (e) => {
+        w.current = e;
+      },
+      show: !!r,
+      type: l,
+      ...P
+    }),
+    [
+      c,
+      o,
+      g,
+      m,
+      S,
+      O,
+      h,
+      b,
+      R,
+      u,
+      f,
+      r,
+      l,
+      P,
+      n
+    ]
+  );
+}, pe = z(void 0);
+export {
+  pe as FloatingPopoverContext,
+  fe as useFloatingPopover
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Allows you to access the popover context from within a child component.
+ * @returns The popover context.
+ */
+export declare const usePopover: () => import('./useFloatingPopover').FloatingPopoverHookReturn | undefined;

package/dist/components/Popover/hooks/usePopover.js

@@ -1,143 +1,6 @@
-import { createContext as z, useRef as V, useMemo as p, useCallback as x } from "react";
-import { useControlledState as D } from "../../../hooks/useControlledState.js";
-import { o as A, j as E, i as K, s as T, m as W, u as X, n as B, b as J, c as L, d as Q, p as Y } from "../../../floating-ui.react-BetVZ099.js";
-import { usePopoverNavigation as Z } from "./usePopoverNavigation.js";
-import { focusableElements as ee } from "../../../helpers/dom/focusableElements.js";
-import { usePopoverAria as oe } from "./usePopoverAria.js";
-import { closestCrossShadow as te } from "../../../helpers/dom/closestCrossShadow.js";
-import { GlobalCSSClass as se } from "../../../enums.js";
-const ne = 200, fe = ({
-  align: i = "auto",
-  autoHighlight: I = !0,
-  component: M = "IressPopover",
-  defaultShow: N,
-  focusStartIndex: d,
-  hasInputActivator: a,
-  matchActivatorWidth: v,
-  onActivated: k,
-  onDeactivated: H,
-  onNavigate: _,
-  show: $,
-  type: l,
-  virtualFocus: n
-}) => {
-  const w = V(!1), C = V(null), {
-    isControlled: h,
-    setValue: f,
-    value: r
-  } = D({
-    component: M,
-    defaultValue: N,
-    propName: "show",
-    value: $
-  }), j = p(() => {
-    const e = a ? [A(5), E({ padding: 5 })] : [
-      A(5),
-      i === "auto" ? K() : E(),
-      T((t) => ({
-        mainAxis: !te(
-          t.elements.reference,
-          `.${se.Slideout}`
-        )
-      }))
-    ];
-    return v ? [
-      ...e,
-      W({
-        apply({ rects: t, availableHeight: s, elements: y }) {
-          requestAnimationFrame(() => {
-            Object.assign(y.floating.style, {
-              minWidth: `${t.reference.width}px`,
-              maxHeight: s > ne ? `${s}px` : void 0
-            });
-          });
-        },
-        padding: 5
-      })
-    ] : e;
-  }, [v, a, i]), o = X({
-    open: r,
-    onOpenChange: (e, t, s) => {
-      f(e), e ? k?.(t, s, c) : H?.(t, s, c);
-    },
-    middleware: j,
-    placement: i === "auto" ? void 0 : i,
-    whileElementsMounted: Y
-  }), { activeIndex: c, list: b, listNav: q, setActiveIndex: u } = Z(
-    o.context,
-    l,
-    {
-      focusItemOnOpen: I,
-      virtual: n
-    },
-    _,
-    d
-  ), F = B(o.context, {
-    enabled: !a
-  }), G = J(o.context, {
-    enabled: !0,
-    escapeKey: !a
-  }), U = L(o.context, {
-    role: l
-  }), S = oe(), P = Q([F, G, U, q]), g = p(() => n ? {
-    getVirtualFocus: () => C.current,
-    setVirtualFocus: (e) => {
-      C.current = e;
-    }
-  } : {}, [n]), m = x(() => {
-    const e = o.elements.reference;
-    return e?.querySelector("[role=combobox]") ?? ee(e)[0];
-  }, [o.elements.reference]), O = x(
-    (e) => !e || !r ? !1 : e === m(),
-    [m, r]
-  ), R = x(() => {
-    u(d ?? null);
-  }, [d, u]);
-  return p(
-    () => ({
-      activeIndex: c,
-      ...S,
-      api: o,
-      getFocusableActivator: m,
-      hasInnerRole: () => w.current,
-      interactions: P,
-      isActiveActivator: O,
-      isControlled: h,
-      isVirtualFocus: !!n,
-      list: b,
-      resetActiveIndex: R,
-      setActiveIndex: u,
-      setShow: f,
-      setShowWithReason: o.context.onOpenChange,
-      setHasInnerRole: (e) => {
-        w.current = e;
-      },
-      show: !!r,
-      type: l,
-      ...g
-    }),
-    [
-      c,
-      o,
-      S,
-      m,
-      P,
-      O,
-      h,
-      b,
-      R,
-      u,
-      f,
-      r,
-      l,
-      g,
-      n
-    ]
-  );
-}, pe = z(
-  void 0
-);
+import { useContext as o } from "react";
+import { FloatingPopoverContext as t } from "./useFloatingPopover.js";
+const p = () => o(t);
 export {
-  pe as PopoverContext,
-  fe as usePopover
+  p as usePopover
 };

package/dist/{src/components → components}/Popover/hooks/usePopoverActivatorInteractions.d.ts

@@ -1,15 +1,15 @@
 import { KeyboardEvent, FocusEvent } from 'react';
 import { IressUnstyledProps } from '../../../types';
-import { PopoverHookReturn } from './usePopover';
+import { FloatingPopoverHookReturn } from './useFloatingPopover';
 /**
  * This adds additional props to the activator to handle keyboard interactions with a virtually focused item.
  *
- * @param {PopoverHookReturn} popover the popover context
+ * @param {FloatingPopoverHookReturn} popover the popover context
  * @param {HTMLAttributes<HTMLElement>} referenceProps the props of the activator, allowing them to be drilled down to the virtual reference
  *
- * @returns {IressHTMLAttributes} the props to be passed to the floating content
+ * @returns {IressUnstyledProps} the props to be passed to the floating content
  */
-export declare const usePopoverActivatorInteractions: <E extends keyof HTMLElementTagNameMap = "div">(popover?: PopoverHookReturn, referenceProps?: Omit<IressUnstyledProps<E>, "value">) => {
+export declare const usePopoverActivatorInteractions: <E extends keyof HTMLElementTagNameMap = "div">(popover?: FloatingPopoverHookReturn, referenceProps?: Omit<IressUnstyledProps<E>, "value">) => {
     onBlur: (e: FocusEvent<never>) => void;
     onKeyDown: (e: KeyboardEvent<HTMLElementTagNameMap[E]>) => void;
 };

package/dist/{src/components → components}/Popover/hooks/usePopoverImperativeHandle.d.ts

@@ -1,8 +1,8 @@
 import { ForwardedRef } from 'react';
-import { PopoverHookReturn } from './usePopover';
-export interface PopoverRef extends Pick<PopoverHookReturn, 'setShow' | 'show' | 'toggleAriaControls'> {
+import { FloatingPopoverHookReturn } from './useFloatingPopover';
+export interface PopoverRef extends Pick<FloatingPopoverHookReturn, 'setShow' | 'show' | 'toggleAriaControls'> {
     getActivator: () => HTMLElement | null;
     getFocusableActivator?: () => HTMLElement | undefined;
     getContent: () => HTMLElement | null;
 }
-export declare const usePopoverImperativeHandle: (ref: ForwardedRef<PopoverRef>, context: PopoverHookReturn) => void;
+export declare const usePopoverImperativeHandle: (ref: ForwardedRef<PopoverRef>, context: FloatingPopoverHookReturn) => void;

package/dist/{src/components → components}/Popover/hooks/usePopoverItem.d.ts

@@ -34,6 +34,6 @@ export interface PopoverVirtualNode<T extends HTMLElement = HTMLElement> {
  *
  * @param {string} typeAheadLabel the label to be used when the user is typing to navigate the activator (currently unused in IDS)
  * @param {PopoverVirtualNode | null} virtualNode the virtual node to use when the item is focused. This contains some interactions to emulate keydown and blur on the popover item.
- * @returns {IressHTMLAttributes} the props to be passed to the floating content
+ * @returns {PopoverItemHookReturn} the props to be passed to the floating content
  */
 export declare const usePopoverItem: <T extends HTMLElement = HTMLElement>(typeAheadLabel?: string, virtualNode?: PopoverVirtualNode<T> | null) => PopoverItemHookReturn;

package/dist/components/Popover/hooks/usePopoverItem.js

@@ -1,8 +1,8 @@
 import { h as c } from "../../../floating-ui.react-BetVZ099.js";
 import { useContext as p, useId as f, useMemo as m, useEffect as v } from "react";
-import { PopoverContext as d } from "./usePopover.js";
+import { FloatingPopoverContext as a } from "./useFloatingPopover.js";
 const l = (r, t = null) => {
-  const e = p(d), { ref: s, index: n } = c({ label: r }), i = f(), o = n === e?.activeIndex, u = m(() => {
+  const e = p(a), { ref: n, index: s } = c({ label: r }), i = f(), o = s === e?.activeIndex, u = m(() => {
     if (e)
       return o && !e?.isVirtualFocus ? 0 : -1;
   }, [o, e]);
@@ -11,7 +11,7 @@ const l = (r, t = null) => {
   }, [o, e, t]), {
     id: i,
     isActiveInPopover: o,
-    ref: s,
+    ref: n,
     tabIndex: e ? u : void 0
   };
 };

package/dist/{src/components → components}/Popover/index.d.ts

@@ -1,5 +1,8 @@
 export * from './Popover';
 export * from './Popover.styles';
 export * from './InputPopover/InputPopover';
+export * from './hooks/usePopover';
 export * from './hooks/usePopoverItem';
+export type { PopoverAriaHookReturn } from './hooks/usePopoverAria';
+export type { FloatingPopoverHookReturn } from './hooks/useFloatingPopover';
 export type * from './hooks/usePopoverImperativeHandle';

package/dist/components/Popover/index.js

@@ -1,10 +1,12 @@
 import { IressPopover as e } from "./Popover.js";
 import { popover as t } from "./Popover.styles.js";
 import { IressInputPopover as s } from "./InputPopover/InputPopover.js";
-import { usePopoverItem as v } from "./hooks/usePopoverItem.js";
+import { usePopover as v } from "./hooks/usePopover.js";
+import { usePopoverItem as I } from "./hooks/usePopoverItem.js";
 export {
   s as IressInputPopover,
   e as IressPopover,
   t as popover,
-  v as usePopoverItem
+  v as usePopover,
+  I as usePopoverItem
 };

package/dist/{src/components → components}/Progress/Progress.d.ts

@@ -40,5 +40,8 @@ export type IressProgressProps<TMin extends number | undefined = undefined> = Om
 export interface ProgressCustomCSSProperties extends CSSProperties {
     '--iress-border-radius'?: string;
 }
-export declare const IressProgress: <TMin extends number | undefined = undefined>({ borderRadius, className: classNameProp, max, min, sectionTitle, style: styleProp, value, ...restProps }: IressProgressProps<TMin>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressProgress: {
+    <TMin extends number | undefined = undefined>({ borderRadius, className: classNameProp, max, min, sectionTitle, style: styleProp, value, ...restProps }: IressProgressProps<TMin>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/components/Progress/Progress.js

@@ -1,27 +1,27 @@
 import { jsx as m } from "react/jsx-runtime";
-import { stringReplacer as v } from "../../helpers/formatting/stringReplacer.js";
-import { c as P } from "../../css-fGu_jDvv.js";
-import { c as S } from "../../cx-DN21T1EH.js";
-import { progress as y } from "./Progress.styles.js";
-import { s as n } from "../../factory-oPXoMw9H.js";
-import { s as b } from "../../is-valid-prop-Ce0wiweq.js";
+import { stringReplacer as P } from "../../helpers/formatting/stringReplacer.js";
+import { c as v } from "../../css-w5PYGgYt.js";
+import { c as y } from "../../cx-DN21T1EH.js";
+import { progress as S } from "./Progress.styles.js";
+import { s as n } from "../../factory-CWvlR9Yh.js";
+import { s as b } from "../../is-valid-prop-DI4RCMon.js";
 import { GlobalCSSClass as x } from "../../enums.js";
-import { t as C } from "../../index-aTLA1VIV.js";
-const V = ({
+import { t as C } from "../../index-4vF4NlqC.js";
+const N = ({
   borderRadius: e,
   className: p,
   max: r = 100,
   min: s,
   sectionTitle: c = "Progress is {{current}} of {{max}}",
   style: f,
-  value: u = 0,
-  ...g
+  value: g = 0,
+  ...u
 }) => {
-  const [d, t] = b(g), a = S(
+  const [d, t] = b(u), a = y(
     p,
-    P(y.raw(), d),
+    v(S.raw(), d),
     x.Progress
-  ), o = Math.min(Math.max(u, s ?? 0), r), i = () => v(c, [
+  ), o = Math.min(Math.max(g, s ?? 0), r), i = () => P(c, [
     { name: "{{current}}", value: String(o) },
     { name: "{{max}}", value: r.toString() }
   ]), l = {
@@ -51,6 +51,7 @@ const V = ({
     }
   );
 };
+N.displayName = "IressProgress";
 export {
-  V as IressProgress
+  N as IressProgress
 };

package/dist/components/Progress/Progress.styles.js

@@ -1,4 +1,4 @@
-import { c as r } from "../../cva-JiDXAa83.js";
+import { c as r } from "../../cva-kirNs9Ig.js";
 const e = r({
   base: {
     appearance: "none",

package/dist/{src/components → components}/Provider/Provider.d.ts

@@ -21,4 +21,7 @@ export interface IressProviderProps extends IressSlideoutProviderProps, Pick<Ire
      */
     noIcons?: boolean;
 }
-export declare const IressProvider: ({ children, container, noDefaultFont, noIcons, position, ...restProps }: IressProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressProvider: {
+    ({ children, container, noDefaultFont, noIcons, position, ...restProps }: IressProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Provider/Provider.js

@@ -1,20 +1,18 @@
 import "react/jsx-runtime";
 import "../Modal/Modal.styles.js";
-import "react";
-import "../../Button-B4nt3P1v.js";
-import "../Button/CloseButton/CloseButton.js";
-import "../Modal/hooks/useModal.js";
+import "../Modal/Modal.js";
 import "../Modal/ModalProvider.js";
+import "../Modal/hooks/useModal.js";
 import "../Toaster/ToasterProvider.js";
 import "../Toaster/hooks/useToaster.js";
 import "../Toaster/Toaster.styles.js";
 import "../Toaster/components/Toast/Toast.styles.js";
+import "../Slideout/Slideout.js";
 import "../Slideout/Slideout.styles.js";
-import "../../index-aTLA1VIV.js";
-import "../Slideout/hooks/useSlideout.js";
 import "../Slideout/SlideoutProvider.js";
+import "../Slideout/hooks/useSlideout.js";
 import "react-dom";
-import { I as h } from "../../Provider-CDIbqQK0.js";
+import { I as c } from "../../Provider-X4oBUpVt.js";
 export {
-  h as IressProvider
+  c as IressProvider
 };

package/dist/components/Provider/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../../Provider-CDIbqQK0.js";
+import { I as o } from "../../Provider-X4oBUpVt.js";
 export {
   o as IressProvider
 };

package/dist/{src/components → components}/Radio/Radio.d.ts

@@ -42,6 +42,8 @@ export interface IressRadioProps<T = FormControlValue> extends Omit<IressStyledP
      */
     touch?: boolean;
 }
-export declare const IressRadio: <T = FormControlValue>(props: IressRadioProps<T> & {
+export declare const IressRadio: (<T = FormControlValue>(props: IressRadioProps<T> & {
     ref?: Ref<HTMLInputElement>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "IressRadio";
+};

package/dist/components/Radio/Radio.js

@@ -6,7 +6,7 @@ import { propagateTestid as l } from "../../helpers/utility/propagateTestid.js";
 import { IressReadonly as H } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
 import { getFormControlValueAsString as P } from "../../helpers/form/getFormControlValueAsString.js";
-import { c as p } from "../../css-fGu_jDvv.js";
+import { c as p } from "../../css-w5PYGgYt.js";
 import { c as z } from "../../cx-DN21T1EH.js";
 import { radio as D } from "./Radio.styles.js";
 import { GlobalCSSClass as h } from "../../enums.js";
@@ -14,8 +14,8 @@ import { IressCheckboxMark as J } from "../CheckboxMark/CheckboxMark.js";
 import "../CheckboxMark/CheckboxMark.styles.js";
 import { getRadioGroupContext as K } from "../RadioGroup/RadioGroup.js";
 import "../RadioGroup/RadioGroup.styles.js";
-import { s as u } from "../../factory-oPXoMw9H.js";
-import { s as L } from "../../is-valid-prop-Ce0wiweq.js";
+import { s as u } from "../../factory-CWvlR9Yh.js";
+import { s as L } from "../../is-valid-prop-DI4RCMon.js";
 import { IressText as Q } from "../Text/Text.js";
 const T = (i) => /* @__PURE__ */ e(
   u.svg,
@@ -36,10 +36,10 @@ const T = (i) => /* @__PURE__ */ e(
   hiddenControl: y,
   name: R,
   onChange: w,
-  readOnly: b,
-  required: v,
+  readOnly: N,
+  required: b,
   value: t,
-  touch: N,
+  touch: v,
   ...n
 }, M) => {
   const k = E(n), o = A(K()), { value: S, setValue: G } = B({
@@ -48,7 +48,7 @@ const T = (i) => /* @__PURE__ */ e(
     value: i,
     propName: "checked"
   }), d = !!o?.onChange, s = d ? o.value === t : S;
-  if (d ? o.readOnly : b)
+  if (d ? o.readOnly : N)
     return s ? /* @__PURE__ */ e(
       H,
       {
@@ -58,7 +58,7 @@ const T = (i) => /* @__PURE__ */ e(
         children: f
       }
     ) : null;
-  const I = o?.name ?? R, c = o?.hiddenRadio ?? y, O = o?.required ?? v, q = o?.touch ?? N, r = D.raw({
+  const I = o?.name ?? R, c = o?.hiddenRadio ?? y, O = o?.required ?? b, q = o?.touch ?? v, r = D.raw({
     hiddenControl: c,
     touch: q,
     checked: s
@@ -113,7 +113,8 @@ const T = (i) => /* @__PURE__ */ e(
       ]
     }
   );
-}, fo = j(U);
+}, W = j(U);
+W.displayName = "IressRadio";
 export {
-  fo as IressRadio
+  W as IressRadio
 };

package/dist/components/Radio/Radio.styles.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../sva-OmxClA9g.js";
+import { s as r } from "../../sva-wwkEhoyo.js";
 const e = r({
   slots: [
     "root",

package/dist/{src/components → components}/RadioGroup/RadioGroup.d.ts

@@ -51,6 +51,8 @@ export interface RadioGroupRef extends ReactHookFormCompatibleRef<HTMLDivElement
 }
 export declare function getRadioGroupContext<T = FormControlValue>(): Context<RadioGroupContextValue<T> | undefined>;
 export declare const RadioGroupContext: Context<RadioGroupContextValue<FormControlValue> | undefined>;
-export declare const IressRadioGroup: <T = FormControlValue>(props: IressRadioGroupProps<T> & {
+export declare const IressRadioGroup: (<T = FormControlValue>(props: IressRadioGroupProps<T> & {
     ref?: Ref<RadioGroupRef>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "IressRadioGroup";
+};