quirk-ui 0.1.73 → 0.1.76

package/dist/core/components/Select/Select.test.cjs

@@ -1 +1 @@
-"use strict";const l=require("react/jsx-runtime"),e=require("../../../index-DITXfOUM.cjs"),s=require("./index.cjs");e.vi.mock("../Label",()=>({Label:({children:r,htmlFor:c,required:t,className:o})=>l.jsxs("label",{htmlFor:c,className:o,children:[r,t&&l.jsx("span",{className:"required",children:"*"})]})}));e.describe("Select",()=>{const r=[{label:"Option A",value:"a"},{label:"Option B",value:"b"},{label:"Option C",value:"c"}],c=[{label:"Group 1",options:[{label:"Option 1A",value:"1a"},{label:"Option 1B",value:"1b"}]},{label:"Group 2",options:[{label:"Option 2A",value:"2a"},{label:"Option 2B",value:"2b"}]}];e.describe("Rendering",()=>{e.it("renders label and options",()=>{e.render(l.jsx(s.Select,{id:"select1",name:"test",label:"Choose",options:r})),e.globalExpect(e.screen.getByLabelText("Choose")).toBeInTheDocument(),r.forEach(({label:t})=>e.globalExpect(e.screen.getByRole("option",{name:t})).toBeInTheDocument())}),e.it("renders without label",()=>{e.render(l.jsx(s.Select,{id:"select-no-label",name:"test",options:r})),e.globalExpect(e.screen.getByRole("combobox")).toBeInTheDocument()}),e.it("generates id when not provided",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r})),o=t.querySelector("select");e.globalExpect(o).toHaveAttribute("id"),e.globalExpect(o==null?void 0:o.id).toMatch(/select-/)}),e.it("applies custom className",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r,className:"custom-select"}));e.globalExpect(t.querySelector(".custom-select")).toBeInTheDocument()}),e.it("shows required asterisk",()=>{e.render(l.jsx(s.Select,{label:"Required",options:r,required:!0})),e.globalExpect(e.screen.getByText("*")).toBeInTheDocument()}),e.it("renders placeholder option",()=>{const{container:t}=e.render(l.jsx(s.Select,{label:"Choose",options:r,placeholder:"Pick one"})),o=t.querySelector('option[value=""][disabled][hidden]');e.globalExpect(o).toBeInTheDocument(),e.globalExpect(o).toHaveTextContent("Pick one")})}),e.describe("Option Groups",()=>{e.it("renders option groups",()=>{const{container:t}=e.render(l.jsx(s.Select,{label:"Grouped",options:c})),o=t.querySelectorAll("optgroup");e.globalExpect(o).toHaveLength(2),e.globalExpect(o[0]).toHaveAttribute("label","Group 1"),e.globalExpect(o[1]).toHaveAttribute("label","Group 2")}),e.it("renders options within groups",()=>{e.render(l.jsx(s.Select,{label:"Grouped",options:c})),e.globalExpect(e.screen.getByRole("option",{name:"Option 1A"})).toBeInTheDocument(),e.globalExpect(e.screen.getByRole("option",{name:"Option 2B"})).toBeInTheDocument()})}),e.describe("Sizes",()=>{e.it("applies small size class",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r,size:"sm"})),o=t.querySelector("select");e.globalExpect(o).toHaveClass("sm")}),e.it("applies medium size by default",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r})),o=t.querySelector("select");e.globalExpect(o).toHaveClass("md")}),e.it("applies large size class",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r,size:"lg"})),o=t.querySelector("select");e.globalExpect(o).toHaveClass("lg")})}),e.describe("States",()=>{e.it("can be disabled",()=>{e.render(l.jsx(s.Select,{label:"Disabled",options:r,disabled:!0}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toBeDisabled()}),e.it("can be required",()=>{e.render(l.jsx(s.Select,{label:"Required",options:r,required:!0}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toBeRequired()})}),e.describe("Error State",()=>{e.it("applies error class when error is boolean",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r,error:!0})),o=t.querySelector("select");e.globalExpect(o).toHaveClass("error")}),e.it("shows error message when error is string",()=>{e.render(l.jsx(s.Select,{options:r,error:"Please select an option"})),e.globalExpect(e.screen.getByText("Please select an option")).toBeInTheDocument()}),e.it("sets aria-invalid when error",()=>{e.render(l.jsx(s.Select,{options:r,error:!0}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("aria-invalid","true")}),e.it("displays error text with error styling",()=>{e.render(l.jsx(s.Select,{options:r,error:"Error message"}));const t=e.screen.getByText("Error message");e.globalExpect(t).toHaveClass("errorText")})}),e.describe("Helper Text",()=>{e.it("displays helper text",()=>{e.render(l.jsx(s.Select,{options:r,helperText:"Choose wisely"})),e.globalExpect(e.screen.getByText("Choose wisely")).toBeInTheDocument()}),e.it("links helper text with aria-describedby",()=>{e.render(l.jsx(s.Select,{id:"help-select",options:r,helperText:"Helper"}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("aria-describedby","help-select-description")})}),e.describe("Value Handling",()=>{e.it("respects default value",()=>{e.render(l.jsx(s.Select,{id:"select3",name:"test",label:"Choose",options:r,defaultValue:"b"}));const t=e.screen.getByRole("combobox");e.globalExpect(t.value).toBe("b")}),e.it("renders with controlled value",()=>{e.render(l.jsx(s.Select,{options:r,value:"c",onChange:()=>{}}));const t=e.screen.getByRole("combobox");e.globalExpect(t.value).toBe("c")})}),e.describe("Event Handlers",()=>{e.it("calls onChange handler",()=>{const t=e.vi.fn();e.render(l.jsx(s.Select,{id:"select2",name:"test",label:"Pick",options:r,onChange:t}));const o=e.screen.getByRole("combobox");e.fireEvent.change(o,{target:{value:"b"}}),e.globalExpect(t).toHaveBeenCalled()})}),e.describe("Multiple Selection",()=>{e.it("renders multiple select",()=>{e.render(l.jsx(s.Select,{options:r,multiple:!0}));const t=e.screen.getByRole("listbox");e.globalExpect(t).toHaveAttribute("multiple")}),e.it("does not show arrow for multiple select",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r,multiple:!0})),o=t.querySelector(".arrow");e.globalExpect(o).not.toBeInTheDocument()}),e.it("does not show placeholder for multiple select",()=>{e.render(l.jsx(s.Select,{options:r,multiple:!0,placeholder:"Pick multiple"})),e.globalExpect(e.screen.queryByRole("option",{name:"Pick multiple"})).not.toBeInTheDocument()})}),e.describe("Full Width",()=>{e.it("applies fullWidth class",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r,fullWidth:!0})),o=t.querySelector(".wrapper");e.globalExpect(o).toHaveClass("fullWidth")})}),e.describe("Disabled Options",()=>{e.it("renders disabled options",()=>{const t=[{label:"Option A",value:"a"},{label:"Option B",value:"b",disabled:!0},{label:"Option C",value:"c"}];e.render(l.jsx(s.Select,{options:t}));const o=e.screen.getByRole("option",{name:"Option B"});e.globalExpect(o.disabled).toBe(!0)})}),e.describe("Accessibility",()=>{e.it("associates label with select",()=>{e.render(l.jsx(s.Select,{id:"labeled",label:"Choose",options:r}));const t=e.screen.getByLabelText("Choose");e.globalExpect(t).toHaveAttribute("id","labeled")}),e.it("links description when helper text present",()=>{e.render(l.jsx(s.Select,{id:"desc",options:r,helperText:"Helper"}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("aria-describedby","desc-description")})}),e.describe("Props Forwarding",()=>{e.it("forwards HTML attributes",()=>{e.render(l.jsx(s.Select,{options:r,"data-testid":"custom-select","aria-label":"Custom"}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("data-testid","custom-select"),e.globalExpect(t).toHaveAttribute("aria-label","Custom")}),e.it("forwards name attribute",()=>{e.render(l.jsx(s.Select,{name:"country",options:r}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("name","country")})}),e.describe("Custom Arrow",()=>{e.it("renders custom arrow for single select",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r})),o=t.querySelector(".arrow");e.globalExpect(o).toBeInTheDocument(),e.globalExpect(o).toHaveAttribute("aria-hidden","true")})}),e.describe("Style Prop",()=>{e.it("applies custom style",()=>{const{container:t}=e.render(l.jsx(s.Select,{options:r,style:{maxWidth:"300px"}})),o=t.querySelector(".wrapper");e.globalExpect(o).toHaveStyle({maxWidth:"300px"})})})});
+"use strict";const l=require("react/jsx-runtime"),e=require("../../../index-CvpbNrYS.cjs"),r=require("./index.cjs");e.vi.mock("../Label",()=>({Label:({children:o,htmlFor:c,required:t,className:s})=>l.jsxs("label",{htmlFor:c,className:s,children:[o,t&&l.jsx("span",{className:"required",children:"*"})]})}));e.describe("Select",()=>{const o=[{label:"Option A",value:"a"},{label:"Option B",value:"b"},{label:"Option C",value:"c"}],c=[{label:"Group 1",options:[{label:"Option 1A",value:"1a"},{label:"Option 1B",value:"1b"}]},{label:"Group 2",options:[{label:"Option 2A",value:"2a"},{label:"Option 2B",value:"2b"}]}];e.describe("Rendering",()=>{e.it("renders label and options",()=>{e.render(l.jsx(r.Select,{id:"select1",name:"test",label:"Choose",options:o})),e.globalExpect(e.screen.getByLabelText("Choose")).toBeInTheDocument(),o.forEach(({label:t})=>e.globalExpect(e.screen.getByRole("option",{name:t})).toBeInTheDocument())}),e.it("renders without label",()=>{e.render(l.jsx(r.Select,{id:"select-no-label",name:"test",options:o})),e.globalExpect(e.screen.getByRole("combobox")).toBeInTheDocument()}),e.it("generates id when not provided",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o})),s=t.querySelector("select");e.globalExpect(s).toHaveAttribute("id"),e.globalExpect(s==null?void 0:s.id).toMatch(/select-/)}),e.it("applies custom className",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o,className:"custom-select"}));e.globalExpect(t.querySelector(".custom-select")).toBeInTheDocument()}),e.it("shows required asterisk",()=>{e.render(l.jsx(r.Select,{label:"Required",options:o,required:!0})),e.globalExpect(e.screen.getByText("*")).toBeInTheDocument()}),e.it("renders placeholder option",()=>{const{container:t}=e.render(l.jsx(r.Select,{label:"Choose",options:o,placeholder:"Pick one"})),s=t.querySelector('option[value=""][disabled][hidden]');e.globalExpect(s).toBeInTheDocument(),e.globalExpect(s).toHaveTextContent("Pick one")})}),e.describe("Option Groups",()=>{e.it("renders option groups",()=>{const{container:t}=e.render(l.jsx(r.Select,{label:"Grouped",options:c})),s=t.querySelectorAll("optgroup");e.globalExpect(s).toHaveLength(2),e.globalExpect(s[0]).toHaveAttribute("label","Group 1"),e.globalExpect(s[1]).toHaveAttribute("label","Group 2")}),e.it("renders options within groups",()=>{e.render(l.jsx(r.Select,{label:"Grouped",options:c})),e.globalExpect(e.screen.getByRole("option",{name:"Option 1A"})).toBeInTheDocument(),e.globalExpect(e.screen.getByRole("option",{name:"Option 2B"})).toBeInTheDocument()})}),e.describe("Sizes",()=>{e.it("applies small size class",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o,size:"sm"})),s=t.querySelector("select");e.globalExpect(s).toHaveClass("sm")}),e.it("applies medium size by default",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o})),s=t.querySelector("select");e.globalExpect(s).toHaveClass("md")}),e.it("applies large size class",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o,size:"lg"})),s=t.querySelector("select");e.globalExpect(s).toHaveClass("lg")})}),e.describe("States",()=>{e.it("can be disabled",()=>{e.render(l.jsx(r.Select,{label:"Disabled",options:o,disabled:!0}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toBeDisabled()}),e.it("can be required",()=>{e.render(l.jsx(r.Select,{label:"Required",options:o,required:!0}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toBeRequired()})}),e.describe("Error State",()=>{e.it("applies error class when error is boolean",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o,error:!0})),s=t.querySelector("select");e.globalExpect(s).toHaveClass("error")}),e.it("shows error message when error is string",()=>{e.render(l.jsx(r.Select,{options:o,error:"Please select an option"})),e.globalExpect(e.screen.getByText("Please select an option")).toBeInTheDocument()}),e.it("sets aria-invalid when error",()=>{e.render(l.jsx(r.Select,{options:o,error:!0}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("aria-invalid","true")}),e.it("displays error text with error styling",()=>{e.render(l.jsx(r.Select,{options:o,error:"Error message"}));const t=e.screen.getByText("Error message");e.globalExpect(t).toHaveClass("errorText")})}),e.describe("Helper Text",()=>{e.it("displays helper text",()=>{e.render(l.jsx(r.Select,{options:o,helperText:"Choose wisely"})),e.globalExpect(e.screen.getByText("Choose wisely")).toBeInTheDocument()}),e.it("links helper text with aria-describedby",()=>{e.render(l.jsx(r.Select,{id:"help-select",options:o,helperText:"Helper"}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("aria-describedby","help-select-description")})}),e.describe("Value Handling",()=>{e.it("respects default value",()=>{e.render(l.jsx(r.Select,{id:"select3",name:"test",label:"Choose",options:o,defaultValue:"b"}));const t=e.screen.getByRole("combobox");e.globalExpect(t.value).toBe("b")}),e.it("renders with controlled value",()=>{e.render(l.jsx(r.Select,{options:o,value:"c",onChange:()=>{}}));const t=e.screen.getByRole("combobox");e.globalExpect(t.value).toBe("c")})}),e.describe("Event Handlers",()=>{e.it("calls onChange handler",()=>{const t=e.vi.fn();e.render(l.jsx(r.Select,{id:"select2",name:"test",label:"Pick",options:o,onChange:t}));const s=e.screen.getByRole("combobox");e.fireEvent.change(s,{target:{value:"b"}}),e.globalExpect(t).toHaveBeenCalled()})}),e.describe("Multiple Selection",()=>{e.it("renders multiple select",()=>{e.render(l.jsx(r.Select,{options:o,multiple:!0,value:[],onChange:()=>{}}));const t=e.screen.getByRole("listbox");e.globalExpect(t).toHaveAttribute("multiple")}),e.it("does not show arrow for multiple select",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o,multiple:!0,value:[],onChange:()=>{}})),s=t.querySelector(".arrow");e.globalExpect(s).not.toBeInTheDocument()}),e.it("does not show placeholder for multiple select",()=>{e.render(l.jsx(r.Select,{options:o,multiple:!0,value:[],onChange:()=>{},placeholder:"Pick multiple"})),e.globalExpect(e.screen.queryByRole("option",{name:"Pick multiple"})).not.toBeInTheDocument()}),e.it("calls onChange with array of selected values",()=>{const t=e.vi.fn();e.render(l.jsx(r.Select,{options:o,multiple:!0,value:[],onChange:t}));const s=e.screen.getByRole("listbox"),n=e.screen.getByRole("option",{name:"Option A"}),a=e.screen.getByRole("option",{name:"Option B"});n.selected=!0,a.selected=!0,e.fireEvent.change(s),e.globalExpect(t).toHaveBeenCalledWith(["a","b"])}),e.it("shows selected count when showSelectedCount is true",()=>{e.render(l.jsx(r.Select,{options:o,multiple:!0,value:["a","b"],onChange:()=>{},showSelectedCount:!0})),e.globalExpect(e.screen.getByText("2 items selected")).toBeInTheDocument()}),e.it("shows singular count when one item selected",()=>{e.render(l.jsx(r.Select,{options:o,multiple:!0,value:["a"],onChange:()=>{},showSelectedCount:!0})),e.globalExpect(e.screen.getByText("1 item selected")).toBeInTheDocument()}),e.it("does not show count when showSelectedCount is false",()=>{e.render(l.jsx(r.Select,{options:o,multiple:!0,value:["a"],onChange:()=>{}})),e.globalExpect(e.screen.queryByText(/selected/)).not.toBeInTheDocument()})}),e.describe("Full Width",()=>{e.it("applies fullWidth class",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o,fullWidth:!0})),s=t.querySelector(".wrapper");e.globalExpect(s).toHaveClass("fullWidth")})}),e.describe("Disabled Options",()=>{e.it("renders disabled options",()=>{const t=[{label:"Option A",value:"a"},{label:"Option B",value:"b",disabled:!0},{label:"Option C",value:"c"}];e.render(l.jsx(r.Select,{options:t}));const s=e.screen.getByRole("option",{name:"Option B"});e.globalExpect(s.disabled).toBe(!0)})}),e.describe("Accessibility",()=>{e.it("associates label with select",()=>{e.render(l.jsx(r.Select,{id:"labeled",label:"Choose",options:o}));const t=e.screen.getByLabelText("Choose");e.globalExpect(t).toHaveAttribute("id","labeled")}),e.it("links description when helper text present",()=>{e.render(l.jsx(r.Select,{id:"desc",options:o,helperText:"Helper"}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("aria-describedby","desc-description")})}),e.describe("Props Forwarding",()=>{e.it("forwards HTML attributes",()=>{e.render(l.jsx(r.Select,{options:o,"data-testid":"custom-select","aria-label":"Custom"}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("data-testid","custom-select"),e.globalExpect(t).toHaveAttribute("aria-label","Custom")}),e.it("forwards name attribute",()=>{e.render(l.jsx(r.Select,{name:"country",options:o}));const t=e.screen.getByRole("combobox");e.globalExpect(t).toHaveAttribute("name","country")})}),e.describe("Custom Arrow",()=>{e.it("renders custom arrow for single select",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o})),s=t.querySelector(".arrow");e.globalExpect(s).toBeInTheDocument(),e.globalExpect(s).toHaveAttribute("aria-hidden","true")})}),e.describe("Style Prop",()=>{e.it("applies custom style",()=>{const{container:t}=e.render(l.jsx(r.Select,{options:o,style:{maxWidth:"300px"}})),s=t.querySelector(".wrapper");e.globalExpect(s).toHaveStyle({maxWidth:"300px"})})})});

package/dist/core/components/Select/Select.test.mjs

@@ -1,14 +1,14 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import { v as p, d as c, i as r, r as a, g as t, s as i, f as b } from "../../../index-BQV8LRFm.js";
-import { Select as n } from "./index.mjs";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { v as p, d as c, i as s, r as n, g as t, s as i, f as d } from "../../../index-Ck6GdALV.js";
+import { Select as a } from "./index.mjs";
 p.mock("../Label", () => ({
-  Label: ({ children: s, htmlFor: u, required: e, className: o }) => /* @__PURE__ */ d("label", { htmlFor: u, className: o, children: [
-    s,
-    e && /* @__PURE__ */ l("span", { className: "required", children: "*" })
+  Label: ({ children: l, htmlFor: u, required: e, className: r }) => /* @__PURE__ */ m("label", { htmlFor: u, className: r, children: [
+    l,
+    e && /* @__PURE__ */ o("span", { className: "required", children: "*" })
   ] })
 }));
 c("Select", () => {
-  const s = [
+  const l = [
     { label: "Option A", value: "a" },
     { label: "Option B", value: "b" },
     { label: "Option C", value: "c" }
@@ -29,86 +29,86 @@ c("Select", () => {
     }
   ];
   c("Rendering", () => {
-    r("renders label and options", () => {
-      a(
-        /* @__PURE__ */ l(n, { id: "select1", name: "test", label: "Choose", options: s })
-      ), t(i.getByLabelText("Choose")).toBeInTheDocument(), s.forEach(
+    s("renders label and options", () => {
+      n(
+        /* @__PURE__ */ o(a, { id: "select1", name: "test", label: "Choose", options: l })
+      ), t(i.getByLabelText("Choose")).toBeInTheDocument(), l.forEach(
         ({ label: e }) => t(i.getByRole("option", { name: e })).toBeInTheDocument()
       );
-    }), r("renders without label", () => {
-      a(/* @__PURE__ */ l(n, { id: "select-no-label", name: "test", options: s })), t(i.getByRole("combobox")).toBeInTheDocument();
-    }), r("generates id when not provided", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s })), o = e.querySelector("select");
-      t(o).toHaveAttribute("id"), t(o == null ? void 0 : o.id).toMatch(/select-/);
-    }), r("applies custom className", () => {
-      const { container: e } = a(
-        /* @__PURE__ */ l(n, { options: s, className: "custom-select" })
+    }), s("renders without label", () => {
+      n(/* @__PURE__ */ o(a, { id: "select-no-label", name: "test", options: l })), t(i.getByRole("combobox")).toBeInTheDocument();
+    }), s("generates id when not provided", () => {
+      const { container: e } = n(/* @__PURE__ */ o(a, { options: l })), r = e.querySelector("select");
+      t(r).toHaveAttribute("id"), t(r == null ? void 0 : r.id).toMatch(/select-/);
+    }), s("applies custom className", () => {
+      const { container: e } = n(
+        /* @__PURE__ */ o(a, { options: l, className: "custom-select" })
       );
       t(e.querySelector(".custom-select")).toBeInTheDocument();
-    }), r("shows required asterisk", () => {
-      a(/* @__PURE__ */ l(n, { label: "Required", options: s, required: !0 })), t(i.getByText("*")).toBeInTheDocument();
-    }), r("renders placeholder option", () => {
-      const { container: e } = a(
-        /* @__PURE__ */ l(n, { label: "Choose", options: s, placeholder: "Pick one" })
-      ), o = e.querySelector(
+    }), s("shows required asterisk", () => {
+      n(/* @__PURE__ */ o(a, { label: "Required", options: l, required: !0 })), t(i.getByText("*")).toBeInTheDocument();
+    }), s("renders placeholder option", () => {
+      const { container: e } = n(
+        /* @__PURE__ */ o(a, { label: "Choose", options: l, placeholder: "Pick one" })
+      ), r = e.querySelector(
         'option[value=""][disabled][hidden]'
       );
-      t(o).toBeInTheDocument(), t(o).toHaveTextContent("Pick one");
+      t(r).toBeInTheDocument(), t(r).toHaveTextContent("Pick one");
     });
   }), c("Option Groups", () => {
-    r("renders option groups", () => {
-      const { container: e } = a(
-        /* @__PURE__ */ l(n, { label: "Grouped", options: u })
-      ), o = e.querySelectorAll("optgroup");
-      t(o).toHaveLength(2), t(o[0]).toHaveAttribute("label", "Group 1"), t(o[1]).toHaveAttribute("label", "Group 2");
-    }), r("renders options within groups", () => {
-      a(/* @__PURE__ */ l(n, { label: "Grouped", options: u })), t(
+    s("renders option groups", () => {
+      const { container: e } = n(
+        /* @__PURE__ */ o(a, { label: "Grouped", options: u })
+      ), r = e.querySelectorAll("optgroup");
+      t(r).toHaveLength(2), t(r[0]).toHaveAttribute("label", "Group 1"), t(r[1]).toHaveAttribute("label", "Group 2");
+    }), s("renders options within groups", () => {
+      n(/* @__PURE__ */ o(a, { label: "Grouped", options: u })), t(
         i.getByRole("option", { name: "Option 1A" })
       ).toBeInTheDocument(), t(
         i.getByRole("option", { name: "Option 2B" })
       ).toBeInTheDocument();
     });
   }), c("Sizes", () => {
-    r("applies small size class", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s, size: "sm" })), o = e.querySelector("select");
-      t(o).toHaveClass("sm");
-    }), r("applies medium size by default", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s })), o = e.querySelector("select");
-      t(o).toHaveClass("md");
-    }), r("applies large size class", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s, size: "lg" })), o = e.querySelector("select");
-      t(o).toHaveClass("lg");
+    s("applies small size class", () => {
+      const { container: e } = n(/* @__PURE__ */ o(a, { options: l, size: "sm" })), r = e.querySelector("select");
+      t(r).toHaveClass("sm");
+    }), s("applies medium size by default", () => {
+      const { container: e } = n(/* @__PURE__ */ o(a, { options: l })), r = e.querySelector("select");
+      t(r).toHaveClass("md");
+    }), s("applies large size class", () => {
+      const { container: e } = n(/* @__PURE__ */ o(a, { options: l, size: "lg" })), r = e.querySelector("select");
+      t(r).toHaveClass("lg");
     });
   }), c("States", () => {
-    r("can be disabled", () => {
-      a(/* @__PURE__ */ l(n, { label: "Disabled", options: s, disabled: !0 }));
+    s("can be disabled", () => {
+      n(/* @__PURE__ */ o(a, { label: "Disabled", options: l, disabled: !0 }));
       const e = i.getByRole("combobox");
       t(e).toBeDisabled();
-    }), r("can be required", () => {
-      a(/* @__PURE__ */ l(n, { label: "Required", options: s, required: !0 }));
+    }), s("can be required", () => {
+      n(/* @__PURE__ */ o(a, { label: "Required", options: l, required: !0 }));
       const e = i.getByRole("combobox");
       t(e).toBeRequired();
     });
   }), c("Error State", () => {
-    r("applies error class when error is boolean", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s, error: !0 })), o = e.querySelector("select");
-      t(o).toHaveClass("error");
-    }), r("shows error message when error is string", () => {
-      a(/* @__PURE__ */ l(n, { options: s, error: "Please select an option" })), t(i.getByText("Please select an option")).toBeInTheDocument();
-    }), r("sets aria-invalid when error", () => {
-      a(/* @__PURE__ */ l(n, { options: s, error: !0 }));
+    s("applies error class when error is boolean", () => {
+      const { container: e } = n(/* @__PURE__ */ o(a, { options: l, error: !0 })), r = e.querySelector("select");
+      t(r).toHaveClass("error");
+    }), s("shows error message when error is string", () => {
+      n(/* @__PURE__ */ o(a, { options: l, error: "Please select an option" })), t(i.getByText("Please select an option")).toBeInTheDocument();
+    }), s("sets aria-invalid when error", () => {
+      n(/* @__PURE__ */ o(a, { options: l, error: !0 }));
       const e = i.getByRole("combobox");
       t(e).toHaveAttribute("aria-invalid", "true");
-    }), r("displays error text with error styling", () => {
-      a(/* @__PURE__ */ l(n, { options: s, error: "Error message" }));
+    }), s("displays error text with error styling", () => {
+      n(/* @__PURE__ */ o(a, { options: l, error: "Error message" }));
       const e = i.getByText("Error message");
       t(e).toHaveClass("errorText");
     });
   }), c("Helper Text", () => {
-    r("displays helper text", () => {
-      a(/* @__PURE__ */ l(n, { options: s, helperText: "Choose wisely" })), t(i.getByText("Choose wisely")).toBeInTheDocument();
-    }), r("links helper text with aria-describedby", () => {
-      a(/* @__PURE__ */ l(n, { id: "help-select", options: s, helperText: "Helper" }));
+    s("displays helper text", () => {
+      n(/* @__PURE__ */ o(a, { options: l, helperText: "Choose wisely" })), t(i.getByText("Choose wisely")).toBeInTheDocument();
+    }), s("links helper text with aria-describedby", () => {
+      n(/* @__PURE__ */ o(a, { id: "help-select", options: l, helperText: "Helper" }));
       const e = i.getByRole("combobox");
       t(e).toHaveAttribute(
         "aria-describedby",
@@ -116,92 +116,162 @@ c("Select", () => {
       );
     });
   }), c("Value Handling", () => {
-    r("respects default value", () => {
-      a(
-        /* @__PURE__ */ l(
-          n,
+    s("respects default value", () => {
+      n(
+        /* @__PURE__ */ o(
+          a,
           {
             id: "select3",
             name: "test",
             label: "Choose",
-            options: s,
+            options: l,
             defaultValue: "b"
           }
         )
       );
       const e = i.getByRole("combobox");
       t(e.value).toBe("b");
-    }), r("renders with controlled value", () => {
-      a(/* @__PURE__ */ l(n, { options: s, value: "c", onChange: () => {
+    }), s("renders with controlled value", () => {
+      n(/* @__PURE__ */ o(a, { options: l, value: "c", onChange: () => {
       } }));
       const e = i.getByRole("combobox");
       t(e.value).toBe("c");
     });
   }), c("Event Handlers", () => {
-    r("calls onChange handler", () => {
+    s("calls onChange handler", () => {
       const e = p.fn();
-      a(
-        /* @__PURE__ */ l(
-          n,
+      n(
+        /* @__PURE__ */ o(
+          a,
           {
             id: "select2",
             name: "test",
             label: "Pick",
-            options: s,
+            options: l,
             onChange: e
           }
         )
       );
-      const o = i.getByRole("combobox");
-      b.change(o, { target: { value: "b" } }), t(e).toHaveBeenCalled();
+      const r = i.getByRole("combobox");
+      d.change(r, { target: { value: "b" } }), t(e).toHaveBeenCalled();
     });
   }), c("Multiple Selection", () => {
-    r("renders multiple select", () => {
-      a(/* @__PURE__ */ l(n, { options: s, multiple: !0 }));
+    s("renders multiple select", () => {
+      n(
+        /* @__PURE__ */ o(a, { options: l, multiple: !0, value: [], onChange: () => {
+        } })
+      );
       const e = i.getByRole("listbox");
       t(e).toHaveAttribute("multiple");
-    }), r("does not show arrow for multiple select", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s, multiple: !0 })), o = e.querySelector(".arrow");
-      t(o).not.toBeInTheDocument();
-    }), r("does not show placeholder for multiple select", () => {
-      a(/* @__PURE__ */ l(n, { options: s, multiple: !0, placeholder: "Pick multiple" })), t(
+    }), s("does not show arrow for multiple select", () => {
+      const { container: e } = n(
+        /* @__PURE__ */ o(a, { options: l, multiple: !0, value: [], onChange: () => {
+        } })
+      ), r = e.querySelector(".arrow");
+      t(r).not.toBeInTheDocument();
+    }), s("does not show placeholder for multiple select", () => {
+      n(
+        /* @__PURE__ */ o(
+          a,
+          {
+            options: l,
+            multiple: !0,
+            value: [],
+            onChange: () => {
+            },
+            placeholder: "Pick multiple"
+          }
+        )
+      ), t(
         i.queryByRole("option", { name: "Pick multiple" })
       ).not.toBeInTheDocument();
+    }), s("calls onChange with array of selected values", () => {
+      const e = p.fn();
+      n(
+        /* @__PURE__ */ o(
+          a,
+          {
+            options: l,
+            multiple: !0,
+            value: [],
+            onChange: e
+          }
+        )
+      );
+      const r = i.getByRole("listbox"), b = i.getByRole("option", {
+        name: "Option A"
+      }), h = i.getByRole("option", {
+        name: "Option B"
+      });
+      b.selected = !0, h.selected = !0, d.change(r), t(e).toHaveBeenCalledWith(["a", "b"]);
+    }), s("shows selected count when showSelectedCount is true", () => {
+      n(
+        /* @__PURE__ */ o(
+          a,
+          {
+            options: l,
+            multiple: !0,
+            value: ["a", "b"],
+            onChange: () => {
+            },
+            showSelectedCount: !0
+          }
+        )
+      ), t(i.getByText("2 items selected")).toBeInTheDocument();
+    }), s("shows singular count when one item selected", () => {
+      n(
+        /* @__PURE__ */ o(
+          a,
+          {
+            options: l,
+            multiple: !0,
+            value: ["a"],
+            onChange: () => {
+            },
+            showSelectedCount: !0
+          }
+        )
+      ), t(i.getByText("1 item selected")).toBeInTheDocument();
+    }), s("does not show count when showSelectedCount is false", () => {
+      n(
+        /* @__PURE__ */ o(a, { options: l, multiple: !0, value: ["a"], onChange: () => {
+        } })
+      ), t(i.queryByText(/selected/)).not.toBeInTheDocument();
     });
   }), c("Full Width", () => {
-    r("applies fullWidth class", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s, fullWidth: !0 })), o = e.querySelector(".wrapper");
-      t(o).toHaveClass("fullWidth");
+    s("applies fullWidth class", () => {
+      const { container: e } = n(/* @__PURE__ */ o(a, { options: l, fullWidth: !0 })), r = e.querySelector(".wrapper");
+      t(r).toHaveClass("fullWidth");
     });
   }), c("Disabled Options", () => {
-    r("renders disabled options", () => {
-      a(/* @__PURE__ */ l(n, { options: [
+    s("renders disabled options", () => {
+      n(/* @__PURE__ */ o(a, { options: [
         { label: "Option A", value: "a" },
         { label: "Option B", value: "b", disabled: !0 },
         { label: "Option C", value: "c" }
       ] }));
-      const o = i.getByRole("option", {
+      const r = i.getByRole("option", {
         name: "Option B"
       });
-      t(o.disabled).toBe(!0);
+      t(r.disabled).toBe(!0);
     });
   }), c("Accessibility", () => {
-    r("associates label with select", () => {
-      a(/* @__PURE__ */ l(n, { id: "labeled", label: "Choose", options: s }));
+    s("associates label with select", () => {
+      n(/* @__PURE__ */ o(a, { id: "labeled", label: "Choose", options: l }));
       const e = i.getByLabelText("Choose");
       t(e).toHaveAttribute("id", "labeled");
-    }), r("links description when helper text present", () => {
-      a(/* @__PURE__ */ l(n, { id: "desc", options: s, helperText: "Helper" }));
+    }), s("links description when helper text present", () => {
+      n(/* @__PURE__ */ o(a, { id: "desc", options: l, helperText: "Helper" }));
       const e = i.getByRole("combobox");
       t(e).toHaveAttribute("aria-describedby", "desc-description");
     });
   }), c("Props Forwarding", () => {
-    r("forwards HTML attributes", () => {
-      a(
-        /* @__PURE__ */ l(
-          n,
+    s("forwards HTML attributes", () => {
+      n(
+        /* @__PURE__ */ o(
+          a,
           {
-            options: s,
+            options: l,
             "data-testid": "custom-select",
             "aria-label": "Custom"
           }
@@ -209,22 +279,22 @@ c("Select", () => {
       );
       const e = i.getByRole("combobox");
       t(e).toHaveAttribute("data-testid", "custom-select"), t(e).toHaveAttribute("aria-label", "Custom");
-    }), r("forwards name attribute", () => {
-      a(/* @__PURE__ */ l(n, { name: "country", options: s }));
+    }), s("forwards name attribute", () => {
+      n(/* @__PURE__ */ o(a, { name: "country", options: l }));
       const e = i.getByRole("combobox");
       t(e).toHaveAttribute("name", "country");
     });
   }), c("Custom Arrow", () => {
-    r("renders custom arrow for single select", () => {
-      const { container: e } = a(/* @__PURE__ */ l(n, { options: s })), o = e.querySelector(".arrow");
-      t(o).toBeInTheDocument(), t(o).toHaveAttribute("aria-hidden", "true");
+    s("renders custom arrow for single select", () => {
+      const { container: e } = n(/* @__PURE__ */ o(a, { options: l })), r = e.querySelector(".arrow");
+      t(r).toBeInTheDocument(), t(r).toHaveAttribute("aria-hidden", "true");
     });
   }), c("Style Prop", () => {
-    r("applies custom style", () => {
-      const { container: e } = a(
-        /* @__PURE__ */ l(n, { options: s, style: { maxWidth: "300px" } })
-      ), o = e.querySelector(".wrapper");
-      t(o).toHaveStyle({ maxWidth: "300px" });
+    s("applies custom style", () => {
+      const { container: e } = n(
+        /* @__PURE__ */ o(a, { options: l, style: { maxWidth: "300px" } })
+      ), r = e.querySelector(".wrapper");
+      t(r).toHaveStyle({ maxWidth: "300px" });
     });
   });
 });

package/dist/core/components/Select/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index25.css');const r=require("react/jsx-runtime"),C=require("../Label/index.cjs"),N="_wrapper_1i56r_1",W="_fullWidth_1i56r_8",M="_selectContainer_1i56r_13",O="_select_1i56r_13",q="_sm_1i56r_63",L="_md_1i56r_70",E="_lg_1i56r_77",F="_arrow_1i56r_104",G="_error_1i56r_124",I="_helperText_1i56r_134",P="_errorText_1i56r_140",e={wrapper:N,fullWidth:W,selectContainer:M,select:O,sm:q,md:L,lg:E,arrow:F,error:G,helperText:I,errorText:P};function k(o){return"options"in o}function z({id:o,name:p,label:u,placeholder:h="Select an option",options:b,value:m,defaultValue:x,required:f=!1,disabled:l=!1,error:c=!1,helperText:a,size:$="md",fullWidth:j=!1,multiple:d=!1,className:v,style:w,onChange:T,...S}){const n=o??p??`select-${Math.random().toString(36).slice(2)}`,i=!!c,_=typeof c=="string"?c:void 0,y={sm:e.sm,md:e.md,lg:e.lg}[$],g=s=>s.map(t=>r.jsx("option",{value:t.value,disabled:t.disabled,children:t.label},t.value));return r.jsxs("div",{className:`${v??""} ${e.wrapper} ${j?e.fullWidth:""}`.trim(),style:w,children:[u&&r.jsx(C.Label,{htmlFor:n,size:$,intent:i?"error":l?"disabled":"default",required:f,disabled:l,children:u}),r.jsxs("div",{className:e.selectContainer,children:[r.jsxs("select",{id:n,name:p,value:m,defaultValue:x,required:f,disabled:l,multiple:d,onChange:T,className:`${e.select} ${y} ${i?e.error:""}`.trim(),"aria-invalid":i,"aria-describedby":_||a?`${n}-description`:void 0,...S,children:[!d&&h&&!m&&!x&&r.jsx("option",{value:"",disabled:!0,hidden:!0,children:h}),b.map((s,t)=>k(s)?r.jsx("optgroup",{label:s.label,children:g(s.options)},t):g([s])[0])]}),!d&&r.jsx("span",{className:e.arrow,"aria-hidden":"true",children:"▼"})]}),(_||a)&&r.jsx("div",{id:`${n}-description`,className:`${e.helperText} ${i?e.errorText:""}`.trim(),children:_||a})]})}exports.Select=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index25.css');const t=require("react/jsx-runtime"),z=require("../Label/index.cjs"),H="_wrapper_1tffa_1",L="_fullWidth_1tffa_8",P="_selectContainer_1tffa_13",E="_select_1tffa_13",F="_sm_1tffa_63",G="_md_1tffa_70",I="_lg_1tffa_77",V="_arrow_1tffa_104",k="_error_1tffa_124",D="_helperText_1tffa_134",J="_errorText_1tffa_140",K="_selectedCount_1tffa_179",e={wrapper:H,fullWidth:L,selectContainer:P,select:E,sm:F,md:G,lg:I,arrow:V,error:k,helperText:D,errorText:J,selectedCount:K};function Q(c){return"options"in c}function R(c){const{id:T,name:h,label:m,placeholder:x="Select an option",options:w,required:b=!1,disabled:d=!1,error:f=!1,helperText:u,size:g="md",fullWidth:S=!1,showSelectedCount:N=!1,minHeight:j,maxHeight:v,className:W,style:$,multiple:l,value:o,defaultValue:y,onChange:a,...q}=c,n=T??h??`select-${Math.random().toString(36).slice(2)}`,i=!!f,_=typeof f=="string"?f:void 0,O={sm:e.sm,md:e.md,lg:e.lg}[g],A={...j&&{minHeight:j},...v&&{maxHeight:v}},B=r=>{if(l){const s=Array.from(r.target.selectedOptions).map(M=>M.value);a==null||a(s)}else a==null||a(r)},C=r=>r.map(s=>t.jsx("option",{value:s.value,disabled:s.disabled,children:s.label},s.value)),p=l&&Array.isArray(o)?o.length:0;return t.jsxs("div",{className:[W??"",e.wrapper,S?e.fullWidth:""].filter(Boolean).join(" "),style:$,children:[m&&t.jsx(z.Label,{htmlFor:n,size:g,intent:i?"error":d?"disabled":"default",required:b,disabled:d,children:m}),t.jsxs("div",{className:e.selectContainer,children:[t.jsxs("select",{id:n,name:h,value:o,defaultValue:y,required:b,disabled:d,multiple:l,onChange:B,className:[e.select,O,i?e.error:""].filter(Boolean).join(" "),style:A,"aria-invalid":i,"aria-describedby":_||u?`${n}-description`:void 0,...q,children:[!l&&x&&!o&&!y&&t.jsx("option",{value:"",disabled:!0,hidden:!0,children:x}),w.map((r,s)=>Q(r)?t.jsx("optgroup",{label:r.label,children:C(r.options)},s):C([r])[0])]}),!l&&t.jsx("span",{className:e.arrow,"aria-hidden":"true",children:"▼"})]}),(_||u)&&t.jsx("div",{id:`${n}-description`,className:[e.helperText,i?e.errorText:""].filter(Boolean).join(" "),children:_||u}),l&&N&&p>0&&t.jsxs("div",{className:e.selectedCount,children:[p," ",p===1?"item":"items"," selected"]})]})}exports.Select=R;