@alixpartners/ui-components 2.5.0 → 2.5.2

package/dist/components/Dropdown/Dropdown.js

@@ -7,7 +7,7 @@ import ne from "../Button/Button.js";
 import re from "../Ghost/Ghost.js";
 import Me from "../Search/Search.js";
 import Se from "../Tooltip/Tooltip.js";
-import { R as Ve, T as Re, P as Ee, C as Fe } from "../../index-C4ffg1vf.js";
+import { R as Ve, T as Re, P as Ee, C as Fe } from "../../index-DZ4Gof57.js";
 import '../../assets/Dropdown.css';const We = "Dropdown-module__dropdownContainer___beNhQ", qe = "Dropdown-module__dropdownLabel___T9FmB", Je = "Dropdown-module__dropdownLabelDisabled___SLRmM", ze = "Dropdown-module__required___ChI1m", Ge = "Dropdown-module__dropdownWrapper___AUuWD", Be = "Dropdown-module__dropdownTrigger___Rue93", Ue = "Dropdown-module__dropdownTriggerDisabled___63wkd", je = "Dropdown-module__dropdownTriggerOpen___cbm8V", Pe = "Dropdown-module__placeholder___fWdch", Ye = "Dropdown-module__selectedOptionLabel___7Zdh3", $e = "Dropdown-module__dropdownSelectedItems___iXnpQ", Ze = "Dropdown-module__dropdownTriggerError___Uu02x", Qe = "Dropdown-module__dropdownContent___zLMhL", Ke = "Dropdown-module__dropdownActions___d55Fa", Xe = "Dropdown-module__dropdownArrow___dLbrb", He = "Dropdown-module__dropdownArrowOpen___Z4Nh1", eo = "Dropdown-module__dropdownMenu___toYcy", oo = "Dropdown-module__dropdownMenuToolbar___gFne0", no = "Dropdown-module__searchContainer___4kUvD", ro = "Dropdown-module__search___JmgDx", to = "Dropdown-module__optionsList___rk2hi", lo = "Dropdown-module__categoryGroup___Np2bP", so = "Dropdown-module__categoryDivider___Gh6F0", io = "Dropdown-module__categoryLabel___B9IDR", co = "Dropdown-module__optionItem___7pi10", ao = "Dropdown-module__optionItemDisabled___aepUD", po = "Dropdown-module__optionItemFocused___u2781", _o = "Dropdown-module__optionContent___nf1VC", uo = "Dropdown-module__optionLabel___sJerM", mo = "Dropdown-module__tickIcon___hYdCr", wo = "Dropdown-module__noOptions___8vmhM", fo = "Dropdown-module__helpers___s4ulA", ho = "Dropdown-module__helpText___YooJE", Do = "Dropdown-module__helpTextDisabled___Ct4qq", bo = "Dropdown-module__helpLink___-Zwpq", go = "Dropdown-module__helpLinkDisabled___r-opC", No = "Dropdown-module__errorMessage___3Mopi", vo = "Dropdown-module__selectAllContainer___Dlk3J", Lo = "Dropdown-module__actionButtons___-2nvr", o = {
   dropdownContainer: We,
   dropdownLabel: qe,

package/dist/components/NavBar/NavBar.js

@@ -8,7 +8,7 @@ import { useState as y } from "react";
 import { u as re, R as oe, I as te, c as H, a as ie } from "../../index-DEphED6n.js";
 import { u as ue, P as z, d as se, c as R, b as le } from "../../index-DM51yNMI.js";
 import { u as K } from "../../index-7CBv-Jx6.js";
-import { R as ce, A as de, P as me, C as be, I as ve, c as pe, G as _e, L as fe, a as ge, b as he, d as Me, e as Ne, S as Ce, f as Re, g as Pe, h as we } from "../../index-D_3jWVyV.js";
+import { R as ce, A as de, P as me, C as be, I as ve, c as pe, G as _e, L as fe, a as ge, b as he, d as Me, e as Ne, S as Ce, f as Re, g as Pe, h as we } from "../../index-DgdVwltD.js";
 import '../../assets/NavBar.css';var S = "Menubar", [L, xe, Se] = ie(S), [Y] = le(S, [
   Se,
   H

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -8,6 +8,7 @@ type RadioGroupProps = {
     ariaLabel?: string;
     disabled?: boolean;
     children?: ReactNode;
+    orientation?: 'vertical' | 'horizontal';
 } & DataAttributes & InteractiveEventHandlers;
 /**
  * RadioGroup is used to group related radio options together, allowing users to select one option from a set of mutually exclusive choices.
@@ -18,7 +19,8 @@ type RadioGroupProps = {
  * @param {string} [props.ariaLabel] - Accessibility label for screen readers to describe the radio group
  * @param {boolean} [props.disabled] - Whether the radio group is disabled (defaults to false)
  * @param {ReactNode} [props.children] - Radio options to be rendered within the group
+ * @param {'vertical' | 'horizontal'} [props.orientation='vertical'] - Layout direction of the radio buttons
  * @returns {JSX.Element} The rendered RadioGroup component
  */
-export default function RadioGroup({ value, ariaLabel, onChange, disabled, children, className, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export default function RadioGroup({ value, ariaLabel, onChange, disabled, children, className, orientation, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,25 +1,27 @@
-import { jsx as _ } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { c as p } from "../../clsx-OuTLNxxd.js";
 import { useState as f } from "react";
-import { R as n } from "../../index-CpsmI33B.js";
-import '../../assets/RadioGroup.css';const R = "RadioGroup-module__root___ewZw-", b = "RadioGroup-module__disabled___n-nfI", s = {
-  root: R,
-  disabled: b
+import { R } from "../../index-CpsmI33B.js";
+import '../../assets/RadioGroup.css';const z = "RadioGroup-module__root___ewZw-", b = "RadioGroup-module__horizontal___QsBvv", h = "RadioGroup-module__disabled___n-nfI", t = {
+  root: z,
+  horizontal: b,
+  disabled: h
 };
-function S({
-  value: a,
-  ariaLabel: l,
+function w({
+  value: r,
+  ariaLabel: s,
   onChange: o,
   disabled: e = !1,
-  children: r,
-  className: d,
+  children: d,
+  className: i,
+  orientation: l = "vertical",
   ...u
 }) {
-  const [i, c] = f(a), m = (t) => {
-    c(t), o == null || o(t);
+  const [_, c] = f(r), m = (a) => {
+    c(a), o == null || o(a);
   };
-  return /* @__PURE__ */ _(n, { className: p(s.root, e && s.disabled, d), value: i, "aria-label": l, onValueChange: m, disabled: e, loop: !0, ...u, children: r });
+  return /* @__PURE__ */ n(R, { className: p(t.root, e && t.disabled, l === "horizontal" && t.horizontal, i), value: _, "aria-label": s, onValueChange: m, disabled: e, orientation: l, loop: !0, ...u, children: d });
 }
 export {
-  S as default
+  w as default
 };

package/dist/components/RadioGroup/RadioGroup.test.js

@@ -68,6 +68,14 @@ r("RadioGroup", () => {
         i(/* @__PURE__ */ o(d, { disabled: !1, children: /* @__PURE__ */ o(t, { label: "Option 1", value: "option1" }) }));
         const e = a.getByRole("radiogroup");
         n(e.className).not.toContain("disabled");
+      }), l("should apply horizontal class when orientation is horizontal", () => {
+        i(/* @__PURE__ */ o(d, { orientation: "horizontal", children: /* @__PURE__ */ o(t, { label: "Option 1", value: "option1" }) }));
+        const e = a.getByTestId("radio-group");
+        n(e.className).toContain("horizontal");
+      }), l("should not apply horizontal class by default", () => {
+        i(/* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(t, { label: "Option 1", value: "option1" }) }));
+        const e = a.getByTestId("radio-group");
+        n(e.className).not.toContain("horizontal");
       });
     }), r("Empty String Values", () => {
       l("should handle empty string values", () => {

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,26 @@
+import { RichTextBlockType, RichTextDocumentModel } from './RichTextEditor.model';
+type ToolbarLayout = 'inline' | 'stacked';
+type FormatOption = {
+    label: string;
+    value: RichTextBlockType;
+};
+type RichTextEditorProps = {
+    className?: string;
+    label?: string;
+    required?: boolean;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    toolbarLayout?: ToolbarLayout;
+    showToolbar?: boolean;
+    showWordCount?: boolean;
+    maxWords?: number;
+    resizable?: boolean;
+    rows?: number;
+    tooltipEnabled?: boolean;
+    formatOptions?: FormatOption[];
+    onChange?: (value: string) => void;
+    onModelChange?: (model: RichTextDocumentModel) => void;
+};
+export default function RichTextEditor({ className, label, required, value, placeholder, disabled, toolbarLayout, showToolbar, showWordCount, maxWords, resizable, rows, tooltipEnabled, formatOptions, onChange, onModelChange, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "../../clsx-OuTLNxxd.js";
+import "react";
+import "../Icon/Icon.js";
+import "../Tooltip/Tooltip.js";
+import { R as f } from "../../RichTextEditor-CHGQT1Qj.js";
+import "../../index-DZ4Gof57.js";
+export {
+  f as default
+};

package/dist/components/RichTextEditor/RichTextEditor.model.d.ts

@@ -0,0 +1,12 @@
+export type RichTextBlockType = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'preformatted' | 'unordered-list' | 'ordered-list';
+export type RichTextBlockNode = {
+    type: RichTextBlockType;
+    html: string;
+    align?: 'left' | 'center' | 'right' | 'justify';
+};
+export type RichTextDocumentModel = {
+    blocks: RichTextBlockNode[];
+};
+export declare function createModelFromHtml(html: string): RichTextDocumentModel;
+export declare function renderModelToHtml(model: RichTextDocumentModel): string;
+export declare function getWordCountFromModel(model: RichTextDocumentModel): number;

package/dist/components/RichTextEditor/RichTextEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/RichTextEditor/RichTextEditor.test.js

@@ -0,0 +1,91 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d, i as r, r as a, g as t, s as e, f as i, w as y, v as b } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import { s as c, R as n } from "../../RichTextEditor-CHGQT1Qj.js";
+d("RichTextEditor", () => {
+  d("Rendering", () => {
+    r("renders label and required marker", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", required: !0 })), t(e.getByTestId("rte-label")).toHaveTextContent("Body"), t(e.getByTestId("rte-required")).toHaveTextContent("*");
+    }), r("does not render label when omitted", () => {
+      a(/* @__PURE__ */ o(n, {})), t(e.queryByTestId("rte-label")).not.toBeInTheDocument();
+    }), r("shows toolbar by default", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body" })), t(e.getByTestId("rte-toolbar")).toBeInTheDocument();
+    }), r("hides toolbar when showToolbar is false", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", showToolbar: !1 })), t(e.queryByTestId("rte-toolbar")).not.toBeInTheDocument();
+    }), r("hides word count when showWordCount is false", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", showWordCount: !1 })), t(e.queryByTestId("rte-word-count")).not.toBeInTheDocument();
+    }), r("places word counter inside the same frame as the editor", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body" }));
+      const s = e.getByTestId("rte-editor"), l = e.getByTestId("rte-word-count");
+      t(l.parentElement).toBe(s.parentElement);
+    }), r("applies stacked toolbar class when toolbarLayout is stacked", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", toolbarLayout: "stacked" }));
+      const s = e.getByTestId("rte-toolbar");
+      t(s.className).toContain(c.toolbarStacked);
+    }), r("renders two toolbar rows when stacked", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", toolbarLayout: "stacked" }));
+      const l = e.getByTestId("rte-toolbar").querySelectorAll(`.${c.toolbarRow}`);
+      t(l.length).toBe(2);
+    }), r("renders one toolbar row when inline", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", toolbarLayout: "inline" }));
+      const l = e.getByTestId("rte-toolbar").querySelectorAll(`.${c.toolbarRow}`);
+      t(l.length).toBe(1);
+    });
+  }), d("Toolbar actions", () => {
+    r("does not render justify or numbered list actions", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body" })), t(e.queryByTestId("rte-action-align-justify")).not.toBeInTheDocument(), t(e.queryByTestId("rte-action-numbered")).not.toBeInTheDocument();
+    }), r("renders bold, align, list, and link actions", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body" })), t(e.getByTestId("rte-action-bold")).toBeInTheDocument(), t(e.getByTestId("rte-action-align-left")).toBeInTheDocument(), t(e.getByTestId("rte-action-bulleted")).toBeInTheDocument(), t(e.getByTestId("rte-action-insert-link")).toBeInTheDocument();
+    });
+  }), d("Format dropdown", () => {
+    r("opens format menu and shows default format options", async () => {
+      a(/* @__PURE__ */ o(n, { label: "Body" })), i.click(e.getByTestId("rte-format-select")), await y(() => {
+        t(e.getByTestId("rte-format-menu")).toBeInTheDocument();
+      }), t(e.getByTestId("rte-format-option-paragraph")).toBeInTheDocument(), t(e.getByTestId("rte-format-option-heading1")).toBeInTheDocument();
+    }), r("uses custom format option labels", async () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", formatOptions: [{
+        label: "Custom block",
+        value: "paragraph"
+      }] })), i.click(e.getByTestId("rte-format-select")), await y(() => {
+        t(e.getByTestId("rte-format-menu")).toBeInTheDocument();
+      }), t(e.getByTestId("rte-format-option-paragraph")).toHaveTextContent("Custom block");
+    });
+  }), d("Word count", () => {
+    r("shows word count and updates it", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", value: "<p>Hello world</p>", maxWords: 8 })), t(e.getByTestId("rte-word-count")).toHaveTextContent("2/8");
+      const s = e.getByTestId("rte-editor");
+      i.input(s, {
+        target: {
+          innerHTML: "<p>Hello world again now</p>"
+        }
+      }), t(e.getByTestId("rte-word-count")).toHaveTextContent("4/8");
+    });
+  }), d("Callbacks and editor props", () => {
+    r("fires onChange with rendered html", () => {
+      const s = b.fn();
+      a(/* @__PURE__ */ o(n, { label: "Body", onChange: s }));
+      const l = e.getByTestId("rte-editor");
+      i.input(l, {
+        target: {
+          innerHTML: "<p>Test value</p>"
+        }
+      }), t(s).toHaveBeenCalled(), t(s.mock.calls[0][0]).toContain("<p>Test value</p>");
+    }), r("fires onModelChange when content changes", () => {
+      const s = b.fn();
+      a(/* @__PURE__ */ o(n, { label: "Body", onModelChange: s }));
+      const l = e.getByTestId("rte-editor");
+      i.input(l, {
+        target: {
+          innerHTML: "<p>Model test</p>"
+        }
+      }), t(s).toHaveBeenCalled(), t(s.mock.calls[0][0]).toMatchObject({
+        blocks: t.any(Array)
+      });
+    }), r("sets resize none when resizable is false", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", resizable: !1 })), t(e.getByTestId("rte-editor")).toHaveStyle({
+        resize: "none"
+      });
+    }), r("sets contentEditable false when disabled", () => {
+      a(/* @__PURE__ */ o(n, { label: "Body", disabled: !0 })), t(e.getByTestId("rte-editor")).toHaveAttribute("contenteditable", "false");
+    });
+  });
+});

package/dist/components/SplitButton/SplitButton.js

@@ -6,7 +6,7 @@ import { useRef as U, useState as I, useEffect as $ } from "react";
 import K from "../Icon/Icon.js";
 import "../Input/Input.js";
 import { u as j, P as H, c as v, a as F, b as V } from "../../index-DM51yNMI.js";
-import { R as X, A as q, P as J, C as Q, I as Y, c as C, G as Z, L as ee, a as oe, b as ne, d as te, e as re, S as ae, f as ie, g as de, h as pe } from "../../index-D_3jWVyV.js";
+import { R as X, A as q, P as J, C as Q, I as Y, c as C, G as Z, L as ee, a as oe, b as ne, d as te, e as re, S as ae, f as ie, g as de, h as pe } from "../../index-DgdVwltD.js";
 import { u as y } from "../../index-7CBv-Jx6.js";
 import '../../assets/SplitButton.css';var D = "DropdownMenu", [se] = V(
   D,

package/dist/components/TagsFields/TagsFields.js

@@ -5,7 +5,7 @@ import W from "../Icon/Icon.js";
 import Ie from "../Button/Button.js";
 import "../Input/Input.js";
 import Fe from "../Tooltip/Tooltip.js";
-import { R as ve, A as Te, P as Ne, C as Le } from "../../index-C4ffg1vf.js";
+import { R as ve, A as Te, P as Ne, C as Le } from "../../index-DZ4Gof57.js";
 import '../../assets/TagsFields.css';const De = "TagsFields-module__dropdownContainer___GIsND", Ce = "TagsFields-module__dropdownLabel___AUP9W", ye = "TagsFields-module__dropdownLabelDisabled___hilvh", Oe = "TagsFields-module__required___Ybg21", ke = "TagsFields-module__dropdownWrapper___KxTZl", Re = "TagsFields-module__selectedItemsCreatable___Pnf8l", xe = "TagsFields-module__selectedItem___Tp6lp", Ae = "TagsFields-module__selectedItemLabel___SwoJL", Se = "TagsFields-module__removeButton___od0yh", We = "TagsFields-module__removeIcon___2WRCF", Ee = "TagsFields-module__singleSelectedCreatableItem___QwENt", Me = "TagsFields-module__singleSelectedCreatableItemRemoveButton___1PeN7", Ve = "TagsFields-module__dropdownActions___USb5V", Be = "TagsFields-module__dropdownArrow___JT9d3", Pe = "TagsFields-module__dropdownArrowOpen___jPfTk", je = "TagsFields-module__dropdownMenu___gPhtC", qe = "TagsFields-module__dropdownCreatableSearchContainer___mltcH", Ge = "TagsFields-module__disabled___1OfNF", ze = "TagsFields-module__dropdownCreatableError___R6oyD", Je = "TagsFields-module__creatableInput___qz9jI", Qe = "TagsFields-module__optionsList___qyawx", Ue = "TagsFields-module__categoryGroup___In039", Ye = "TagsFields-module__categoryDivider___eROv0", Ke = "TagsFields-module__categoryLabel___Cv2h5", He = "TagsFields-module__optionItem___UujFS", Xe = "TagsFields-module__optionItemDisabled___9gB8N", Ze = "TagsFields-module__optionItemFocused___4rsDt", $e = "TagsFields-module__optionContent___QSC9G", et = "TagsFields-module__optionLabel___N-fQ7", tt = "TagsFields-module__tickIcon___3uRY-", st = "TagsFields-module__noOptions___ugYj9", lt = "TagsFields-module__helpers___ab6f-", ot = "TagsFields-module__helpText___Qzdqh", dt = "TagsFields-module__helpTextDisabled___m-oFo", nt = "TagsFields-module__helpLink___JQDmR", at = "TagsFields-module__helpLinkDisabled___Nk1BX", rt = "TagsFields-module__errorMessage___b-ugf", t = {
   dropdownContainer: De,
   dropdownLabel: Ce,

package/dist/components/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ import te from "../Icon/Icon.js";
 import { P as F, u as oe, d as G, c as C, b as re, h as ne } from "../../index-DM51yNMI.js";
 import { P as le, D as ie } from "../../index-DrR82jOT.js";
 import { u as se } from "../../index-7CBv-Jx6.js";
-import { R as ae, A as ce, a as ue, c as B, C as pe } from "../../index-C-3_YVJ1.js";
+import { R as ae, A as ce, a as ue, c as B, C as pe } from "../../index-D34Qo5Qx.js";
 import { P as K } from "../../index-BymOxiM6.js";
 import '../../assets/Tooltip.css';var de = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss