@alixpartners/ui-components 2.5.1 → 2.5.2

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/main.d.ts

@@ -12,6 +12,7 @@ export { default as Dropdown, type DropdownOption } from './components/Dropdown/
 export { default as FilePicker, useFilePickerContext, type FilePickerContextValue, } from './components/FilePicker/FilePicker.tsx';
 export { default as Search } from './components/Search/Search.tsx';
 export { default as Datepicker } from './components/Datepicker/Datepicker';
+export { default as RichTextEditor } from './components/RichTextEditor/RichTextEditor';
 export { default as Toast } from './components/Toast/Toast.tsx';
 export { default as ToastProvider } from './components/ToastProvider/ToastProvider.tsx';
 export { useToast } from './components/ToastProvider/useToast.ts';

package/dist/main.js

@@ -1,5 +1,5 @@
-import { default as e } from "./components/Button/Button.js";
-import { default as t } from "./components/Checkbox/Checkbox.js";
+import { default as r } from "./components/Button/Button.js";
+import { default as e } from "./components/Checkbox/Checkbox.js";
 import { default as s } from "./components/Icon/Icon.js";
 import { default as l } from "./components/Input/Input.js";
 import { default as u } from "./components/Radio/Radio.js";
@@ -7,60 +7,62 @@ import { default as m } from "./components/RadioGroup/RadioGroup.js";
 import { default as n } from "./components/Textarea/Textarea.js";
 import { default as c } from "./components/Toggle/Toggle.js";
 import { default as D } from "./components/Banner/Banner.js";
-import { default as k } from "./components/Ghost/Ghost.js";
-import { default as h } from "./components/Dropdown/Dropdown.js";
-import { default as C, useFilePickerContext as F } from "./components/FilePicker/FilePicker.js";
-import { default as P } from "./components/Search/Search.js";
-import { default as G } from "./components/Datepicker/Datepicker.js";
-import { default as R } from "./components/Toast/Toast.js";
-import { T as w } from "./ToastProvider-D5LImZ-Q.js";
-import { u as L } from "./useToast-Cz5MGKnw.js";
-import { default as q } from "./components/Creatable/Creatable.js";
-import { default as z } from "./components/SplitButton/SplitButton.js";
-import { default as H } from "./components/DragAndDrop/DragAndDrop.js";
-import { c as K, d as M } from "./DragAndDrop.utils-D3xTV9EK.js";
-import { default as Q } from "./components/Tab/Tab.js";
-import { default as W } from "./components/TabNavigation/TabNavigation.js";
-import { default as Y } from "./components/Dialog/Dialog.js";
-import { default as _ } from "./components/TagsFields/TagsFields.js";
-import { default as oo } from "./components/NavBar/NavBar.js";
+import { default as h } from "./components/Ghost/Ghost.js";
+import { default as B } from "./components/Dropdown/Dropdown.js";
+import { default as v, useFilePickerContext as C } from "./components/FilePicker/FilePicker.js";
+import { default as I } from "./components/Search/Search.js";
+import { default as S } from "./components/Datepicker/Datepicker.js";
+import { R as N } from "./RichTextEditor-CHGQT1Qj.js";
+import { default as w } from "./components/Toast/Toast.js";
+import { T as E } from "./ToastProvider-D5LImZ-Q.js";
+import { u as j } from "./useToast-Cz5MGKnw.js";
+import { default as y } from "./components/Creatable/Creatable.js";
+import { default as H } from "./components/SplitButton/SplitButton.js";
+import { default as K } from "./components/DragAndDrop/DragAndDrop.js";
+import { c as O, d as Q } from "./DragAndDrop.utils-D3xTV9EK.js";
+import { default as W } from "./components/Tab/Tab.js";
+import { default as Y } from "./components/TabNavigation/TabNavigation.js";
+import { default as _ } from "./components/Dialog/Dialog.js";
+import { default as oo } from "./components/TagsFields/TagsFields.js";
+import { default as ro } from "./components/NavBar/NavBar.js";
 import { default as eo } from "./components/Tag/Tag.js";
-import { default as to } from "./components/Tooltip/Tooltip.js";
-import { default as so } from "./components/Spinner/Spinner.js";
-import { default as lo } from "./components/Illustration/Illustration.js";
-import { a as xo } from "./ap-logos-CwA4O8B7.js";
+import { default as so } from "./components/Tooltip/Tooltip.js";
+import { default as lo } from "./components/Spinner/Spinner.js";
+import { default as xo } from "./components/Illustration/Illustration.js";
+import { a as io } from "./ap-logos-CwA4O8B7.js";
 import './assets/main.css';export {
   D as Banner,
-  e as Button,
-  t as Checkbox,
-  q as Creatable,
-  G as Datepicker,
-  Y as Dialog,
-  H as DragAndDrop,
-  h as Dropdown,
-  C as FilePicker,
-  k as Ghost,
+  r as Button,
+  e as Checkbox,
+  y as Creatable,
+  S as Datepicker,
+  _ as Dialog,
+  K as DragAndDrop,
+  B as Dropdown,
+  v as FilePicker,
+  h as Ghost,
   s as Icon,
-  lo as Illustration,
+  xo as Illustration,
   l as Input,
-  oo as NavBar,
+  ro as NavBar,
   u as Radio,
   m as RadioGroup,
-  P as Search,
-  so as Spinner,
-  z as SplitButton,
-  Q as Tab,
-  W as TabNavigation,
+  N as RichTextEditor,
+  I as Search,
+  lo as Spinner,
+  H as SplitButton,
+  W as Tab,
+  Y as TabNavigation,
   eo as Tag,
-  _ as TagsFields,
+  oo as TagsFields,
   n as Textarea,
-  R as Toast,
-  w as ToastProvider,
+  w as Toast,
+  E as ToastProvider,
   c as Toggle,
-  to as Tooltip,
-  xo as apLogos,
-  K as composeValidators,
-  M as defaultValidator,
-  F as useFilePickerContext,
-  L as useToast
+  so as Tooltip,
+  io as apLogos,
+  O as composeValidators,
+  Q as defaultValidator,
+  C as useFilePickerContext,
+  j as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alixpartners/ui-components",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "type": "module",
   "files": [
     "dist"