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

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,87 +1,88 @@
 import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as B, createContext as N, useRef as T, useMemo as j, useImperativeHandle as k } from "react";
+import { forwardRef as q, createContext as B, useRef as T, useMemo as j, useImperativeHandle as k } from "react";
 import { useControlledState as D } from "../../hooks/useControlledState.js";
 import { radioGroup as E } from "./RadioGroup.styles.js";
 import { c as H } from "../../cx-DN21T1EH.js";
-import { s as M } from "../../factory-oPXoMw9H.js";
+import { s as M } from "../../factory-CWvlR9Yh.js";
 import { GlobalCSSClass as P } from "../../enums.js";
 import { useNoDefaultValueInForms as h } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
 function w() {
-  return N(void 0);
+  return B(void 0);
 }
 function z() {
   return A;
 }
 const A = w(), J = ({
   children: d,
-  className: v,
+  className: G,
   hiddenRadio: t,
-  layout: G = "stack",
-  name: n,
+  layout: v = "stack",
+  name: s,
   onBlur: R,
-  onChange: s,
+  onChange: n,
   onFocus: x,
   required: c,
   role: C = "radiogroup",
   defaultValue: a,
   readOnly: i,
-  value: S,
-  touch: l,
-  ...g
-}, I) => {
+  value: I,
+  touch: p,
+  ...S
+}, g) => {
   h({
     component: "IressRadioGroup",
     defaultValue: a
   });
-  const r = T(null), e = r.current, { value: p, setValue: u } = D({
+  const r = T(null), e = r.current, { value: l, setValue: u } = D({
     component: "IressRadioGroup",
     defaultValue: a,
-    value: S
-  }), b = j(
+    value: I
+  }), y = j(
     () => ({
-      name: n,
-      value: p,
+      name: s,
+      value: l,
       hiddenRadio: t,
       required: c,
       readOnly: i,
-      touch: l,
+      touch: p,
       onChange: (o, m) => {
-        u(m), s?.(o, m);
+        u(m), n?.(o, m);
       }
     }),
-    [n, p, t, c, i, u, s, l]
+    [s, l, t, c, i, u, n, p]
   );
-  k(I, () => ({
+  k(g, () => ({
     // React hook form requires the focus, blur, input
     focus: () => e?.querySelector("input")?.focus(),
     blur: () => e?.querySelector("input")?.blur(),
     input: e,
     reset: () => u(void 0)
   }));
-  const y = (o) => {
+  const b = (o) => {
     x?.(o), o.target === r.current && r.current.querySelector("input")?.focus();
   }, F = (o) => {
     o.relatedTarget && !r.current?.contains(o.relatedTarget) && R?.(o);
-  }, { Provider: q } = z();
-  return /* @__PURE__ */ f(q, { value: b, children: /* @__PURE__ */ f(
+  }, { Provider: N } = z();
+  return /* @__PURE__ */ f(N, { value: y, children: /* @__PURE__ */ f(
     M.div,
     {
-      ...g,
+      ...S,
       ref: r,
       role: C,
       className: H(
-        v,
-        E({ layout: G, hiddenRadio: t }),
+        G,
+        E({ layout: v, hiddenRadio: t }),
         P.RadioGroup
       ),
       onBlur: F,
-      onFocus: y,
+      onFocus: b,
       children: d
     }
   ) });
-}, Z = B(J);
+}, K = q(J);
+K.displayName = "IressRadioGroup";
 export {
-  Z as IressRadioGroup,
+  K as IressRadioGroup,
   A as RadioGroupContext,
   z as getRadioGroupContext
 };

package/dist/components/RadioGroup/RadioGroup.styles.js

@@ -1,4 +1,4 @@
-import { c as a } from "../../cva-JiDXAa83.js";
+import { c as a } from "../../cva-kirNs9Ig.js";
 const i = a({
   base: {},
   variants: {

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

@@ -11,4 +11,6 @@ export interface IressReadonlyProps<T extends FormControlValue = FormControlValu
      */
     inline?: boolean;
 }
-export declare const IressReadonly: <T extends FormControlValue = string | number>(props: IressReadonlyProps<T> & RefAttributes<HTMLInputElement | null>) => ReactElement;
+export declare const IressReadonly: (<T extends FormControlValue = string | number>(props: IressReadonlyProps<T> & RefAttributes<HTMLInputElement | null>) => ReactElement) & {
+    displayName: "IressReadonly";
+};

package/dist/components/Readonly/Readonly.js

@@ -1,15 +1,15 @@
-import { jsxs as S, jsx as o } from "react/jsx-runtime";
-import { forwardRef as I } from "react";
+import { jsxs as I, jsx as o } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
 import { propagateTestid as V } from "../../helpers/utility/propagateTestid.js";
 import { getFormControlValueAsStringIfDefined as d } from "../../helpers/form/getFormControlValueAsStringIfDefined.js";
 import { readonly as D } from "./Readonly.styles.js";
-import { c as s } from "../../css-fGu_jDvv.js";
+import { c as s } from "../../css-w5PYGgYt.js";
 import { c as P } from "../../cx-DN21T1EH.js";
 import { IressSpinner as g } from "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
 import { GlobalCSSClass as j } from "../../enums.js";
 import { useNoDefaultValueInForms as w } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-import { s as F } from "../../is-valid-prop-Ce0wiweq.js";
+import { s as F } from "../../is-valid-prop-DI4RCMon.js";
 const b = ({
   append: t,
   children: c,
@@ -20,22 +20,22 @@ const b = ({
   prepend: l,
   style: f,
   width: u,
-  value: v,
-  inline: y,
-  alignRight: h,
-  ...N
-}, x) => {
+  value: y,
+  inline: v,
+  alignRight: N,
+  ...h
+}, R) => {
   w({
     component: "IressReadonly",
     defaultValue: i
   });
-  const r = D.raw({ inline: y, width: u, alignRight: h }), n = d(i), m = d(v), [C, R] = F(N);
-  return /* @__PURE__ */ S(
+  const r = D.raw({ inline: v, width: u, alignRight: N }), n = d(i), m = d(y), [x, C] = F(h);
+  return /* @__PURE__ */ I(
     "div",
     {
       className: P(
         p,
-        s(r.root, C),
+        s(r.root, x),
         j.Readonly
       ),
       "data-testid": a,
@@ -53,10 +53,10 @@ const b = ({
         /* @__PURE__ */ o(
           "input",
           {
-            ...R,
+            ...C,
             defaultValue: n,
             type: "hidden",
-            ref: x,
+            ref: R,
             "data-testid": V(a, "input"),
             value: m
           }
@@ -64,7 +64,8 @@ const b = ({
       ]
     }
   );
-}, M = I(b);
+}, A = S(b);
+A.displayName = "IressReadonly";
 export {
-  M as IressReadonly
+  A as IressReadonly
 };

package/dist/{src/components → components}/Readonly/Readonly.styles.d.ts

@@ -63,33 +63,33 @@ export declare const readonly: import('../../styled-system/types').SlotRecipeRun
                 width: "input.16";
             };
         };
-        '25perc': {
+        '25%': {
             root: {
-                width: "input.25perc";
+                width: "input.25%";
             };
             formControl: {
                 width: "[100%]";
             };
         };
-        '50perc': {
+        '50%': {
             root: {
-                width: "input.50perc";
+                width: "input.50%";
             };
             formControl: {
                 width: "[100%]";
             };
         };
-        '75perc': {
+        '75%': {
             root: {
-                width: "input.75perc";
+                width: "input.75%";
             };
             formControl: {
                 width: "[100%]";
             };
         };
-        '100perc': {
+        '100%': {
             root: {
-                width: "input.100perc";
+                width: "input.100%";
             };
             formControl: {
                 width: "[100%]";

package/dist/components/Readonly/Readonly.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-OmxClA9g.js";
+import { s as t } from "../../sva-wwkEhoyo.js";
 const i = t({
   slots: ["root", "wrapper", "addon", "internal", "formControl"],
   base: {
@@ -135,33 +135,33 @@ const i = t({
           width: "input.16"
         }
       },
-      "25perc": {
+      "25%": {
         root: {
-          width: "input.25perc"
+          width: "input.25%"
         },
         formControl: {
           width: "[100%]"
         }
       },
-      "50perc": {
+      "50%": {
         root: {
-          width: "input.50perc"
+          width: "input.50%"
         },
         formControl: {
           width: "[100%]"
         }
       },
-      "75perc": {
+      "75%": {
         root: {
-          width: "input.75perc"
+          width: "input.75%"
         },
         formControl: {
           width: "[100%]"
         }
       },
-      "100perc": {
+      "100%": {
         root: {
-          width: "input.100perc"
+          width: "input.100%"
         },
         formControl: {
           width: "[100%]"

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

@@ -157,6 +157,8 @@ export interface SelectOptionsRenderProps<TMultiple extends boolean = false> ext
     setQuery: (query: string) => void;
 }
 export type RichSelectRef = Partial<PopoverRef> & ReactHookFormCompatibleRef;
-export declare const IressRichSelect: <TMultiple extends boolean = false>(props: IressRichSelectProps<TMultiple> & {
+export declare const IressRichSelect: (<TMultiple extends boolean = false>(props: IressRichSelectProps<TMultiple> & {
     ref?: ForwardedRef<RichSelectRef>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "IressRichSelect";
+};

package/dist/components/RichSelect/RichSelect.js

@@ -3,38 +3,28 @@ import "react";
 import "../../cx-DN21T1EH.js";
 import "./RichSelect.styles.js";
 import "./hooks/useRichSelectState.js";
-import { I as K } from "../../Autocomplete-BQ_YPb5A.js";
-import "./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 "../Popover/hooks/usePopover.js";
-import "../Icon/Icon.styles.js";
+import { I as z } from "../../Autocomplete-64YPQLLR.js";
+import "./SelectBody/SelectBody.js";
+import "./SelectCreate/SelectCreate.js";
 import "./SelectHeading/SelectHeading.js";
-import "./SelectLabel/SelectLabel.styles.js";
-import "./SelectMenu/SelectMenu.styles.js";
-import "./SelectSearch/SelectSearch.styles.js";
-import "../Popover/Popover.js";
-import "../Popover/Popover.styles.js";
-import "../Popover/InputPopover/InputPopover.js";
+import "./SelectLabel/SelectLabel.js";
+import "./SelectMenu/SelectMenu.js";
+import "./SelectSearch/SelectSearch.js";
 import "./SelectSearchInput/SelectSearchInput.js";
-import "./SelectTags/SelectTags.styles.js";
-import "../../Button-B4nt3P1v.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 "./SelectTags/SelectTags.js";
 import "../Autocomplete/Autocomplete.styles.js";
 import "../Autocomplete/hooks/useAutocompleteSearch.js";
 import "./components/SelectActivator.js";
 import "./components/SelectOptions.js";
 import "./components/SelectHiddenInput.js";
 import "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+import "../../enums.js";
+import "../Popover/Popover.js";
+import "../Popover/Popover.styles.js";
+import "../Popover/InputPopover/InputPopover.js";
+import "../Popover/hooks/useFloatingPopover.js";
 import "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
 export {
-  K as IressRichSelect
+  z as IressRichSelect
 };

package/dist/{src/components → components}/RichSelect/RichSelect.styles.d.ts

@@ -35,24 +35,24 @@ export declare const richSelect: import('../../styled-system/types').SlotRecipeR
                 width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
             };
         };
-        '25perc': {
+        '25%': {
             richSelect: {
-                width: "input.25perc";
+                width: "input.25%";
             };
         };
-        '50perc': {
+        '50%': {
             richSelect: {
-                width: "input.50perc";
+                width: "input.50%";
             };
         };
-        '75perc': {
+        '75%': {
             richSelect: {
-                width: "input.75perc";
+                width: "input.75%";
             };
         };
-        '100perc': {
+        '100%': {
             richSelect: {
-                width: "input.100perc";
+                width: "input.100%";
             };
         };
     };

package/dist/components/RichSelect/RichSelect.styles.js

@@ -1,4 +1,4 @@
-import { s as c } from "../../sva-OmxClA9g.js";
+import { s as c } from "../../sva-wwkEhoyo.js";
 const i = c({
   slots: [
     "richSelect",
@@ -68,24 +68,24 @@ const i = c({
           width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
         }
       },
-      "25perc": {
+      "25%": {
         richSelect: {
-          width: "input.25perc"
+          width: "input.25%"
         }
       },
-      "50perc": {
+      "50%": {
         richSelect: {
-          width: "input.50perc"
+          width: "input.50%"
         }
       },
-      "75perc": {
+      "75%": {
         richSelect: {
-          width: "input.75perc"
+          width: "input.75%"
         }
       },
-      "100perc": {
+      "100%": {
         richSelect: {
-          width: "input.100perc"
+          width: "input.100%"
         }
       }
     }

package/dist/{src/components → components}/RichSelect/SelectBody/SelectBody.d.ts

@@ -10,4 +10,7 @@ export interface IressSelectBodyProps extends Omit<IressTextProps, 'element'> {
      */
     header?: ReactNode;
 }
-export declare const IressSelectBody: ({ children, className, footer, header, ...restProps }: IressSelectBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressSelectBody: {
+    ({ children, className, footer, header, ...restProps }: IressSelectBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/RichSelect/SelectBody/SelectBody.js

@@ -3,7 +3,7 @@ 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 B = ({
+const p = ({
   children: o,
   className: l,
   footer: e,
@@ -28,6 +28,7 @@ const B = ({
     }
   );
 };
+p.displayName = "IressSelectBody";
 export {
-  B as IressSelectBody
+  p as IressSelectBody
 };

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

@@ -1,4 +1,4 @@
-import { s as e } from "../../../sva-OmxClA9g.js";
+import { s as e } from "../../../sva-wwkEhoyo.js";
 const l = e({
   slots: ["selectBody", "children"],
   base: {

package/dist/{src/components → components}/RichSelect/SelectCreate/SelectCreate.d.ts

@@ -26,4 +26,7 @@ export interface IressSelectCreateProps extends Omit<IressMenuProps, 'changeOnBl
      */
     prepend?: ReactNode;
 }
-export declare const IressSelectCreate: ({ fluid, heading, label, loading, onCreate, prepend, ...restProps }: IressSelectCreateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressSelectCreate: {
+    ({ fluid, heading, label, loading, onCreate, prepend, ...restProps }: IressSelectCreateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/RichSelect/SelectCreate/SelectCreate.js

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

package/dist/{src/components → components}/RichSelect/SelectHeading/SelectHeading.d.ts

@@ -14,4 +14,7 @@ export interface IressSelectHeadingProps extends IressMenuTextProps {
      */
     onClearAll?: (e: UIEvent<HTMLButtonElement>) => void;
 }
-export declare const IressSelectHeading: ({ children, className, clearAll, onClearAll, ...restProps }: IressSelectHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressSelectHeading: {
+    ({ children, className, clearAll, onClearAll, ...restProps }: IressSelectHeadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/RichSelect/SelectHeading/SelectHeading.js

@@ -1,45 +1,46 @@
-import { jsx as m, jsxs as l } from "react/jsx-runtime";
+import { jsx as m, jsxs as c } from "react/jsx-runtime";
 import { c as s } from "../../../cx-DN21T1EH.js";
-import { richSelect as a } from "../RichSelect.styles.js";
+import { richSelect as l } from "../RichSelect.styles.js";
 import { forwardRef as d, useRef as f, useImperativeHandle as u } from "react";
 import "../../Menu/Menu.js";
 import "../../Menu/Menu.styles.js";
-import "../../Divider/Divider.styles.js";
-import { GlobalCSSClass as p } from "../../../enums.js";
+import "../../Menu/MenuDivider/MenuDivider.js";
 import "../../Menu/MenuItem/MenuItem.js";
 import { IressMenuHeading as I } from "../../Menu/MenuText/MenuText.js";
-import { I as v } from "../../../Button-B4nt3P1v.js";
+import { GlobalCSSClass as p } from "../../../enums.js";
+import { I as v } from "../../../Button-BkufphWK.js";
 import "../../Button/CloseButton/CloseButton.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";
 import "../../Popover/InputPopover/InputPopover.js";
-import { usePopoverItem as h } from "../../Popover/hooks/usePopoverItem.js";
+import "../../Popover/hooks/useFloatingPopover.js";
+import { usePopoverItem as S } from "../../Popover/hooks/usePopoverItem.js";
 import "../../Inline/Inline.styles.js";
-import { IressInline as w } from "../../Inline/Inline.js";
-const c = a(), S = d(
-  (r, n) => {
-    const e = f(null), { isActiveInPopover: t, ...i } = h("", {
-      onKeyDown: r.onKeyDown
+import { IressInline as g } from "../../Inline/Inline.js";
+const a = l(), h = d(
+  (o, n) => {
+    const e = f(null), { isActiveInPopover: t, ...i } = S("", {
+      onKeyDown: o.onKeyDown
     });
     return u(n, () => e.current), /* @__PURE__ */ m(
       v,
       {
-        ...r,
+        ...o,
         ...i,
         className: s(
-          c.dropdownClear,
+          a.dropdownClear,
           p.RichSelectClearButton
         ),
         active: t,
         mode: "tertiary",
-        ref: (o) => {
-          e.current = o, i?.ref?.(e.current);
+        ref: (r) => {
+          e.current = r, i?.ref?.(e.current);
         }
       }
     );
   }
-), q = ({
-  children: r,
+), w = ({
+  children: o,
   className: n,
   clearAll: e,
   onClearAll: t,
@@ -49,19 +50,19 @@ const c = a(), S = d(
   {
     ...i,
     className: s(
-      c.dropdownSelectedHeading,
+      a.dropdownSelectedHeading,
       n,
       p.RichSelectHeading
     ),
     role: void 0,
-    children: /* @__PURE__ */ l(w, { horizontalAlign: "between", verticalAlign: "middle", children: [
-      r,
+    children: /* @__PURE__ */ c(g, { horizontalAlign: "between", verticalAlign: "middle", children: [
+      o,
       e && /* @__PURE__ */ m(
-        S,
+        h,
         {
           onClick: t,
-          onKeyDown: (o) => {
-            o.key === "Enter" && (o.preventDefault(), t?.(o));
+          onKeyDown: (r) => {
+            r.key === "Enter" && (r.preventDefault(), t?.(r));
           },
           children: typeof e == "boolean" ? "Clear all" : e
         }
@@ -69,6 +70,7 @@ const c = a(), S = d(
     ] })
   }
 );
+w.displayName = "IressSelectHeading";
 export {
-  q as IressSelectHeading
+  w as IressSelectHeading
 };

package/dist/components/RichSelect/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;
+};