@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/dataDisplay/chat/chatLayout.js

@@ -1,102 +1,103 @@
-import { jsxs as l, Fragment as _, jsx as t } from "react/jsx-runtime";
-import { useEffect as E } from "react";
+import { jsxs as l, Fragment as b, jsx as t } from "react/jsx-runtime";
+import { useEffect as H } from "react";
 import n from "clsx";
-import { Icon as b } from "../../base/icon/icon.js";
-import { ChatIconButton as g } from "./chatIconButton.js";
-import { useControllableState as w } from "../../../hooks/useControllableState.js";
-import { Chat as C } from "./chat.js";
-const H = (a) => typeof a == "number" ? `${a}px` : a, S = (a) => a === "left" ? "bottom-left" : "bottom-right";
-function P({
+import { Icon as g } from "../../base/icon/icon.js";
+import { ChatIconButton as w } from "./chatIconButton.js";
+import { useControllableState as C } from "../../../hooks/useControllableState.js";
+import { Chat as x } from "./chat.js";
+const S = (a) => typeof a == "number" ? `${a}px` : a, $ = (a) => a === "left" ? "bottom-left" : "bottom-right";
+function R({
   className: a,
-  contentClassName: r,
-  chatClassName: i,
+  contentClassName: i,
+  chatClassName: r,
   side: e = "right",
-  chatWidth: x = 400,
-  collapsed: k,
-  defaultCollapsed: I = !1,
-  onCollapsedChange: N,
-  collapseAriaLabel: v = "Collapse chat panel",
-  expandAriaLabel: A = "Expand chat panel",
-  floatingAnchor: c,
+  chatWidth: k = 400,
+  collapsed: I,
+  defaultCollapsed: N = !1,
+  onCollapsedChange: v,
+  collapseAriaLabel: A = "Collapse chat panel",
+  expandAriaLabel: B = "Expand chat panel",
+  floatingAnchor: s,
   chat: o,
   children: u,
   style: p,
-  ...m
+  "data-testid": m = "chat-layout",
+  ...f
 }) {
-  const [s, h] = w({
-    value: k,
-    defaultValue: I,
-    onChange: N
-  }), [B, d] = w({
+  const [c, h] = C({
+    value: I,
+    defaultValue: N,
+    onChange: v
+  }), [F, d] = C({
     defaultValue: !1
   });
-  E(() => {
-    s || d(!1);
-  }, [s, d]);
-  const F = c != null ? c : S(e), L = e === "left" ? "dock_to_left" : "dock_to_right", O = /* @__PURE__ */ t(
-    g,
+  H(() => {
+    c || d(!1);
+  }, [c, d]);
+  const L = s != null ? s : $(e), O = e === "left" ? "dock_to_left" : "dock_to_right", V = /* @__PURE__ */ t(
+    w,
     {
-      "aria-label": v,
+      "aria-label": A,
       "data-testid": "chat-layout-collapse",
       onClick: () => h(!0),
-      children: /* @__PURE__ */ t(b, { name: e === "left" ? "left_panel_close" : "right_panel_close", size: 18 })
+      children: /* @__PURE__ */ t(g, { name: e === "left" ? "left_panel_close" : "right_panel_close", size: 18 })
     }
-  ), V = /* @__PURE__ */ t(g, { "aria-label": A, "data-testid": "chat-layout-expand", onClick: () => h(!1), children: /* @__PURE__ */ t(b, { name: L, size: 18 }) }), j = /* @__PURE__ */ l(_, { children: [
-    o.headerActions,
-    O
-  ] }), z = /* @__PURE__ */ l(_, { children: [
+  ), j = /* @__PURE__ */ t(w, { "aria-label": B, "data-testid": "chat-layout-expand", onClick: () => h(!1), children: /* @__PURE__ */ t(g, { name: O, size: 18 }) }), z = /* @__PURE__ */ l(b, { children: [
     o.headerActions,
     V
-  ] }), f = {
-    "--smwb-chat-layout-w": H(x)
+  ] }), E = /* @__PURE__ */ l(b, { children: [
+    o.headerActions,
+    j
+  ] }), y = {
+    "--smwb-chat-layout-w": S(k)
   };
-  if (s)
+  if (c)
     return /* @__PURE__ */ l(
       "div",
       {
         className: n("smwb-chat-layout", "smwb-chat-layout_collapsed", a),
-        style: { ...f, ...p },
-        "data-testid": "chat-layout",
+        style: { ...y, ...p },
+        "data-testid": m,
+        ...f,
         "data-collapsed": "true",
-        ...m,
         children: [
-          /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
+          /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", i), "data-testid": "chat-layout-content", children: u }),
           /* @__PURE__ */ t(
-            C,
+            x,
             {
               ...o,
-              className: i,
+              className: r,
               floatingTrigger: !0,
-              anchor: F,
+              anchor: L,
               allowedLayouts: ["floating"],
               layout: "floating",
-              open: B,
+              open: F,
               onOpenChange: d,
-              headerActions: z
+              headerActions: E
             }
           )
         ]
       }
     );
-  const y = /* @__PURE__ */ t("aside", { className: "smwb-chat-layout__panel", "data-testid": "chat-layout-panel", children: /* @__PURE__ */ t(C, { ...o, className: i, embedded: !0, allowedLayouts: [], headerActions: j }) });
+  const _ = /* @__PURE__ */ t("aside", { className: "smwb-chat-layout__panel", "data-testid": "chat-layout-panel", children: /* @__PURE__ */ t(x, { ...o, className: r, embedded: !0, allowedLayouts: [], headerActions: z }) });
   return /* @__PURE__ */ l(
     "div",
     {
       className: n("smwb-chat-layout", `smwb-chat-layout_${e}`, a),
-      style: { ...f, ...p },
-      "data-testid": "chat-layout",
+      style: { ...y, ...p },
+      "data-testid": m,
+      ...f,
       "data-collapsed": "false",
-      ...m,
       children: [
-        e === "left" ? y : null,
-        /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
-        e === "right" ? y : null
+        e === "left" ? _ : null,
+        /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", i), "data-testid": "chat-layout-content", children: u }),
+        e === "right" ? _ : null
       ]
     }
   );
 }
 export {
-  P as ChatLayout,
-  P as default
+  R as ChatLayout,
+  R as default
 };
 //# sourceMappingURL=chatLayout.js.map

package/dist/components/dataDisplay/chat/chatLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatLayout.js","sources":["../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport Chat, { ChatProps } from \"./chat\";\nimport { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"className\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  contentClassName?: string;\n  chatClassName?: string;\n  side?: ChatLayoutSide;\n  chatWidth?: number | string;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n  floatingAnchor?: ChatAnchor;\n  chat: ChatLayoutChatProps;\n}\n\nexport function ChatLayout({\n  className,\n  contentClassName,\n  chatClassName,\n  side = \"right\",\n  chatWidth = 400,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseAriaLabel = \"Collapse chat panel\",\n  expandAriaLabel = \"Expand chat panel\",\n  floatingAnchor,\n  chat,\n  children,\n  style,\n  ...rest\n}: ChatLayoutProps) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = useControllableState<boolean>({\n    defaultValue: false,\n  });\n\n  useEffect(() => {\n    if (!collapsed) {\n      setFloatingOpen(false);\n    }\n  }, [collapsed, setFloatingOpen]);\n\n  const anchor = floatingAnchor ?? floatingAnchorForSide(side);\n  const dockIcon = side === \"left\" ? \"dock_to_left\" : \"dock_to_right\";\n  const collapseIcon = side === \"left\" ? \"left_panel_close\" : \"right_panel_close\";\n\n  const collapseButton = (\n    <ChatIconButton\n      aria-label={collapseAriaLabel}\n      data-testid=\"chat-layout-collapse\"\n      onClick={() => setCollapsed(true)}\n    >\n      <Icon name={collapseIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (\n    <ChatIconButton aria-label={expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (\n    <>\n      {chat.headerActions}\n      {collapseButton}\n    </>\n  );\n\n  const floatingHeaderActions = (\n    <>\n      {chat.headerActions}\n      {expandButton}\n    </>\n  );\n\n  const cssVars = {\n    \"--smwb-chat-layout-w\": len(chatWidth),\n  } as CSSProperties;\n\n  if (collapsed) {\n    return (\n      <div\n        className={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", className)}\n        style={{ ...cssVars, ...style }}\n        data-testid=\"chat-layout\"\n        data-collapsed=\"true\"\n        {...rest}\n      >\n        <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n          {children}\n        </div>\n        <Chat\n          {...chat}\n          className={chatClassName}\n          floatingTrigger\n          anchor={anchor}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions}\n        />\n      </div>\n    );\n  }\n\n  const panel = (\n    <aside className=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n      <Chat {...chat} className={chatClassName} embedded allowedLayouts={[]} headerActions={dockedHeaderActions} />\n    </aside>\n  );\n\n  return (\n    <div\n      className={cn(\"smwb-chat-layout\", `smwb-chat-layout_${side}`, className)}\n      style={{ ...cssVars, ...style }}\n      data-testid=\"chat-layout\"\n      data-collapsed=\"false\"\n      {...rest}\n    >\n      {side === \"left\" ? panel : null}\n      <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n        {children}\n      </div>\n      {side === \"right\" ? panel : null}\n    </div>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","className","contentClassName","chatClassName","chatWidth","collapsedProp","defaultCollapsed","onCollapsedChange","collapseAriaLabel","expandAriaLabel","floatingAnchor","chat","children","style","rest","collapsed","setCollapsed","useControllableState","floatingOpen","setFloatingOpen","useEffect","anchor","dockIcon","collapseButton","jsx","ChatIconButton","Icon","expandButton","dockedHeaderActions","jsxs","Fragment","floatingHeaderActions","cssVars","cn","Chat","panel"],"mappings":"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"}
+{"version":3,"file":"chatLayout.js","sources":["../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport Chat, { ChatProps } from \"./chat\";\nimport { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"className\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  contentClassName?: string;\n  chatClassName?: string;\n  side?: ChatLayoutSide;\n  chatWidth?: number | string;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n  floatingAnchor?: ChatAnchor;\n  chat: ChatLayoutChatProps;\n  /** Test id of the root `<div>`; `chat-layout` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport function ChatLayout({\n  className,\n  contentClassName,\n  chatClassName,\n  side = \"right\",\n  chatWidth = 400,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseAriaLabel = \"Collapse chat panel\",\n  expandAriaLabel = \"Expand chat panel\",\n  floatingAnchor,\n  chat,\n  children,\n  style,\n  \"data-testid\": dataTestId = \"chat-layout\",\n  ...rest\n}: ChatLayoutProps) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = useControllableState<boolean>({\n    defaultValue: false,\n  });\n\n  useEffect(() => {\n    if (!collapsed) {\n      setFloatingOpen(false);\n    }\n  }, [collapsed, setFloatingOpen]);\n\n  const anchor = floatingAnchor ?? floatingAnchorForSide(side);\n  const dockIcon = side === \"left\" ? \"dock_to_left\" : \"dock_to_right\";\n  const collapseIcon = side === \"left\" ? \"left_panel_close\" : \"right_panel_close\";\n\n  const collapseButton = (\n    <ChatIconButton\n      aria-label={collapseAriaLabel}\n      data-testid=\"chat-layout-collapse\"\n      onClick={() => setCollapsed(true)}\n    >\n      <Icon name={collapseIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (\n    <ChatIconButton aria-label={expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (\n    <>\n      {chat.headerActions}\n      {collapseButton}\n    </>\n  );\n\n  const floatingHeaderActions = (\n    <>\n      {chat.headerActions}\n      {expandButton}\n    </>\n  );\n\n  const cssVars = {\n    \"--smwb-chat-layout-w\": len(chatWidth),\n  } as CSSProperties;\n\n  if (collapsed) {\n    return (\n      <div\n        className={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", className)}\n        style={{ ...cssVars, ...style }}\n        data-testid={dataTestId}\n        {...rest}\n        // The collapsed state is the layout's own; it wins over the caller's.\n        data-collapsed=\"true\"\n      >\n        <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n          {children}\n        </div>\n        <Chat\n          {...chat}\n          className={chatClassName}\n          floatingTrigger\n          anchor={anchor}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions}\n        />\n      </div>\n    );\n  }\n\n  const panel = (\n    <aside className=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n      <Chat {...chat} className={chatClassName} embedded allowedLayouts={[]} headerActions={dockedHeaderActions} />\n    </aside>\n  );\n\n  return (\n    <div\n      className={cn(\"smwb-chat-layout\", `smwb-chat-layout_${side}`, className)}\n      style={{ ...cssVars, ...style }}\n      data-testid={dataTestId}\n      {...rest}\n      // The collapsed state is the layout's own; it wins over the caller's.\n      data-collapsed=\"false\"\n    >\n      {side === \"left\" ? panel : null}\n      <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n        {children}\n      </div>\n      {side === \"right\" ? panel : null}\n    </div>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","className","contentClassName","chatClassName","chatWidth","collapsedProp","defaultCollapsed","onCollapsedChange","collapseAriaLabel","expandAriaLabel","floatingAnchor","chat","children","style","dataTestId","rest","collapsed","setCollapsed","useControllableState","floatingOpen","setFloatingOpen","useEffect","anchor","dockIcon","collapseButton","jsx","ChatIconButton","Icon","expandButton","dockedHeaderActions","jsxs","Fragment","floatingHeaderActions","cssVars","cn","Chat","panel"],"mappings":"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"}

package/dist/components/dataDisplay/chat/chatOverlayLayout.d.ts

@@ -12,6 +12,8 @@ export interface ChatOverlayLayoutProps extends PropsWithChildren, HTMLAttribute
     defaultLayout?: ChatLayoutMode;
     defaultOpen?: boolean;
     chat: ChatOverlayLayoutChatProps;
+    /** Test id of the root `<div>`; `chat-overlay-layout` unless given. */
+    "data-testid"?: string;
 }
-export declare function ChatOverlayLayout({ className, contentClassName, chatClassName, side, chatWidth, allowedLayouts, defaultLayout, defaultOpen, chat, children, style, ...rest }: ChatOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatOverlayLayout({ className, contentClassName, chatClassName, side, chatWidth, allowedLayouts, defaultLayout, defaultOpen, chat, children, style, "data-testid": dataTestId, ...rest }: ChatOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default ChatOverlayLayout;

package/dist/components/dataDisplay/chip/chip.d.ts

@@ -1,24 +1,55 @@
 import React from "react";
 export type ChipColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
 export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {
+    /**
+     * Class name(s) for the chip's root, a `<span>` (an `<a>` with `asLink`). `style`, `id`, `data-*`, `aria-hidden`,
+     * `ref` and event handlers go to the root too. In a clickable chip (`onClick`), `role`, `tabIndex`, `onFocus`,
+     * `onBlur` and the other `aria-*` attributes go to its button, `.smwb-chip__content` (the icon and the label), which
+     * is also the element to focus. Otherwise they stay on the root, which holds the delete button too.
+     */
     className?: string;
     variant?: "filled" | "outlined";
     size?: "small" | "medium";
     color?: ChipColor;
+    /**
+     * Shows a delete button in the chip and runs when it is pressed: a click, or
+     * Enter / Space while the button has focus. In a clickable chip it sits
+     * beside the chip's button, not inside it, and pressing it does not run the
+     * chip's `onClick`.
+     */
     onDelete?: (event: React.SyntheticEvent) => void;
     icon?: React.ReactNode;
     deleteIcon?: React.ReactNode;
     label: string;
+    /**
+     * Makes the chip clickable: its icon and label become a button, named by
+     * them, with a focus ring around the whole chip. The delete button is not
+     * part of that button but its sibling, so it keeps its own name.
+     *
+     * Runs on a click on the chip and on Enter / Space while the chip's button
+     * has focus, but not on a click or key on the delete button.
+     */
     onClick?: () => void;
     onDeleteMouseDown?: React.MouseEventHandler;
+    /**
+     * Disables the chip: it is dimmed, takes no pointer input and says `aria-disabled`, and its delete button is
+     * disabled too. With `onClick` the chip is still a button, out of the tab order.
+     */
     disabled?: boolean;
     asLink?: boolean;
     href?: string;
     /** Open the link in a new tab (asLink only). */
     target?: string;
     selected?: boolean;
+    /**
+     * Id of the label's element, for another element to take the chip's text as
+     * its name (`aria-labelledby`) without the delete button's name.
+     */
+    labelId?: string;
     /** Accessible label for the delete control. */
     deleteAriaLabel?: string;
+    /** Test id of the root; `chip`, or `chip-link` for a link, unless given. */
+    "data-testid"?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
 export default Chip;

package/dist/components/dataDisplay/chip/chip.js

@@ -1,99 +1,127 @@
-import { jsx as t, jsxs as E, Fragment as F } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/chip/chip.entry.css';/* empty css                                                   */
-import v from "react";
-import I from "clsx";
+import { jsxs as l, jsx as a, Fragment as L } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/chip/chip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import u from "react";
+import Z from "clsx";
 import { Ripple as K } from "../../base/ripple/ripple.js";
-import { Icon as q } from "../../base/icon/icon.js";
-const T = v.forwardRef(function({
-  label: N,
-  className: x,
-  deleteIcon: l,
-  icon: m,
-  onDelete: r,
-  onMouseDown: n,
-  onDeleteMouseDown: c,
-  asLink: y,
-  href: o,
-  target: $ = "_blank",
-  selected: g,
-  variant: j = "filled",
-  size: z = "medium",
-  color: p = "default",
-  disabled: i = !1,
-  onClick: a,
-  deleteAriaLabel: B = "Remove",
-  ...d
-}, f) {
-  const b = v.useRef(null), h = (e) => {
-    n == null || n(e);
-  }, u = (e) => {
-    var R;
-    i || (R = b.current) == null || R.onRipple(e);
-  }, k = (e) => {
-    c == null || c(e), e.stopPropagation();
-  }, w = I(
+import { Icon as M } from "../../base/icon/icon.js";
+import { isOwnClick as k } from "../../../utils/ownClick.js";
+import { splitControlProps as C } from "../../../utils/controlProps.js";
+const li = u.forwardRef(function({
+  label: O,
+  labelId: q,
+  className: v,
+  deleteIcon: d,
+  icon: o,
+  onDelete: _,
+  onMouseDown: m,
+  // The chip sets these on its root too; its own handlers call the caller's first.
+  onKeyDown: r,
+  onPointerDown: e,
+  onDeleteMouseDown: n,
+  asLink: G,
+  href: R,
+  target: H = "_blank",
+  selected: J,
+  variant: Q = "filled",
+  size: S = "medium",
+  color: x = "default",
+  disabled: c = !1,
+  onClick: s,
+  deleteAriaLabel: U = "Remove",
+  "data-testid": t,
+  ...f
+}, N) {
+  var B, E;
+  const w = u.useRef(null), b = u.useRef(null), g = (i) => {
+    m == null || m(i);
+  }, $ = (i) => {
+    var F;
+    e == null || e(i), c || (F = w.current) == null || F.onRipple(i);
+  }, V = (i) => {
+    n == null || n(i), i.stopPropagation();
+  }, j = Z(
     "smwb-chip",
-    `smwb-${j}`,
-    `smwb-chip_size-${z}`,
-    p !== "default" && `smwb-chip_color-${p}`,
-    x,
-    { "smwb-disabled": i, "smwb-selected": g }
-  ), _ = /* @__PURE__ */ E(F, { children: [
-    m && /* @__PURE__ */ t("span", { className: "smwb-chip__icon", children: m }),
-    /* @__PURE__ */ t("span", { className: "smwb-chip__label", children: N }),
-    !!r && /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        className: "smwb-chip__delete-icon",
-        "aria-label": B,
-        disabled: i,
-        onClick: r,
-        onMouseDown: k,
-        children: l || /* @__PURE__ */ t(q, { name: "cancel", size: 18, fill: 1 })
-      }
-    ),
-    /* @__PURE__ */ t(K, { actionRef: b })
+    `smwb-${Q}`,
+    `smwb-chip_size-${S}`,
+    x !== "default" && `smwb-chip_color-${x}`,
+    v,
+    { "smwb-disabled": c, "smwb-selected": J }
+  ), W = !!_ && /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: "smwb-chip__delete-icon",
+      "aria-label": U,
+      disabled: c,
+      onClick: _,
+      onMouseDown: V,
+      children: d || /* @__PURE__ */ a(M, { name: "cancel", size: 18, fill: 1 })
+    }
+  ), z = /* @__PURE__ */ l(L, { children: [
+    o && /* @__PURE__ */ a("span", { className: "smwb-chip__icon", children: o }),
+    /* @__PURE__ */ a("span", { id: q, className: "smwb-chip__label", children: O })
+  ] }), y = /* @__PURE__ */ l(L, { children: [
+    W,
+    /* @__PURE__ */ a(K, { actionRef: w })
   ] });
-  if (y && o)
-    return /* @__PURE__ */ t(
+  if (G && R)
+    return /* @__PURE__ */ l(
       "a",
       {
-        ref: f,
-        "data-testid": "chip-link",
-        className: w,
-        href: o,
-        onMouseDown: h,
-        onPointerDown: u,
-        target: $,
-        rel: "noreferrer",
-        ...d,
-        children: _
+        ref: N,
+        "data-testid": t != null ? t : "chip-link",
+        className: j,
+        href: R,
+        onMouseDown: g,
+        onPointerDown: $,
+        target: H,
+        ...f,
+        rel: (B = f.rel) != null ? B : "noreferrer",
+        onKeyDown: r,
+        children: [
+          z,
+          y
+        ]
       }
     );
-  const s = !!a && !i;
-  return /* @__PURE__ */ t(
+  const p = !!s && !c, [h, A] = C(f, !!s), X = (i) => {
+    r == null || r(i), !(!p || i.target !== b.current) && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s == null || s());
+  }, Y = (i) => {
+    k(i, b.current) && (s == null || s(i));
+  };
+  return /* @__PURE__ */ l(
     "span",
     {
-      ref: f,
-      "data-testid": "chip",
-      className: w,
-      role: s ? "button" : void 0,
-      tabIndex: s ? 0 : void 0,
-      "aria-disabled": i || void 0,
-      onClick: s ? a : void 0,
-      onKeyDown: s ? (e) => {
-        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a == null || a());
-      } : void 0,
-      onMouseDown: h,
-      onPointerDown: u,
-      ...d,
-      children: _
+      ref: N,
+      "data-testid": t != null ? t : "chip",
+      className: j,
+      ...A,
+      "aria-disabled": s ? void 0 : c || A["aria-disabled"],
+      onClick: p ? Y : void 0,
+      onKeyDown: X,
+      onMouseDown: g,
+      onPointerDown: $,
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            ...h,
+            ref: b,
+            className: "smwb-chip__content",
+            role: s ? "button" : void 0,
+            tabIndex: (E = h.tabIndex) != null ? E : p ? 0 : void 0,
+            "aria-disabled": s ? c || h["aria-disabled"] : void 0,
+            children: z
+          }
+        ),
+        y
+      ]
     }
   );
 });
 export {
-  T as Chip,
-  T as default
+  li as Chip,
+  li as default
 };
 //# sourceMappingURL=chip.js.map

package/dist/components/dataDisplay/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  className?: string;\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: React.SyntheticEvent) => void;\n  icon?: React.ReactNode;\n  deleteIcon?: React.ReactNode;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: React.MouseEventHandler;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n}\n\nexport const Chip = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, ChipProps>(function Chip(\n  {\n    label,\n    className,\n    deleteIcon,\n    icon,\n    onDelete,\n    onMouseDown: onMouseDownProp,\n    onDeleteMouseDown: onDeleteMouseDownProp,\n    asLink,\n    href,\n    target = \"_blank\",\n    selected,\n    variant = \"filled\",\n    size = \"medium\",\n    color = \"default\",\n    disabled = false,\n    onClick,\n    deleteAriaLabel = \"Remove\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown = (event: React.MouseEvent) => {\n    onDeleteMouseDownProp?.(event);\n    event.stopPropagation();\n  };\n\n  const classes = cn(\n    \"smwb-chip\",\n    `smwb-${variant}`,\n    `smwb-chip_size-${size}`,\n    color !== \"default\" && `smwb-chip_color-${color}`,\n    className,\n    { \"smwb-disabled\": disabled, \"smwb-selected\": selected }\n  );\n\n  const deleteBtn = !!onDelete && (\n    <button\n      type=\"button\"\n      className=\"smwb-chip__delete-icon\"\n      aria-label={deleteAriaLabel}\n      disabled={disabled}\n      onClick={onDelete}\n      onMouseDown={onDeleteMouseDown}\n    >\n      {deleteIcon ? deleteIcon : <Icon name=\"cancel\" size={18} fill={1} />}\n    </button>\n  );\n\n  const inner = (\n    <>\n      {icon && <span className=\"smwb-chip__icon\">{icon}</span>}\n      <span className=\"smwb-chip__label\">{label}</span>\n      {deleteBtn}\n      <Ripple actionRef={rippleRef} />\n    </>\n  );\n\n  if (asLink && href) {\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        data-testid=\"chip-link\"\n        className={classes}\n        href={href}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        target={target}\n        rel=\"noreferrer\"\n        {...rest}\n      >\n        {inner}\n      </a>\n    );\n  }\n\n  const clickable = !!onClick && !disabled;\n\n  return (\n    <span\n      ref={ref}\n      data-testid=\"chip\"\n      className={classes}\n      role={clickable ? \"button\" : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={\n        clickable\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.();\n              }\n            }\n          : undefined\n      }\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {inner}\n    </span>\n  );\n});\n\nexport default Chip;\n"],"names":["Chip","React","label","className","deleteIcon","icon","onDelete","onMouseDownProp","onDeleteMouseDownProp","asLink","href","target","selected","variant","size","color","disabled","onClick","deleteAriaLabel","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","onDeleteMouseDown","classes","cn","inner","jsxs","Fragment","jsx","Icon","Ripple","clickable"],"mappings":";;;;;;AA6BO,MAAMA,IAAOC,EAAM,WAA2D,SACnF;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAaC;AAAA,EACb,mBAAmBC;AAAA,EACnB,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYpB,EAAM,OAAyB,IAAI,GAE/CqB,IAAc,CAACC,MAAiE;AACpF,IAAAhB,KAAA,QAAAA,EAAkBgB;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAmE;;AACxF,IAAKP,MACHS,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAEhC,GAEMG,IAAoB,CAACH,MAA4B;AACrD,IAAAf,KAAA,QAAAA,EAAwBe,IACxBA,EAAM,gBAAA;AAAA,EACR,GAEMI,IAAUC;AAAA,IACd;AAAA,IACA,QAAQf,CAAO;AAAA,IACf,kBAAkBC,CAAI;AAAA,IACtBC,MAAU,aAAa,mBAAmBA,CAAK;AAAA,IAC/CZ;AAAA,IACA,EAAE,iBAAiBa,GAAU,iBAAiBJ,EAAA;AAAA,EAAS,GAgBnDiB,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA1B,KAAQ,gBAAA2B,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA3B,GAAK;AAAA,IACjD,gBAAA2B,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA9B,GAAM;AAAA,IAhB5B,CAAC,CAACI,KAClB,gBAAA0B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAYd;AAAA,QACZ,UAAAF;AAAA,QACA,SAASV;AAAA,QACT,aAAaoB;AAAA,QAEZ,UAAAtB,KAA0B,gBAAA4B,EAACC,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,MAAM,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IASlE,gBAAAD,EAACE,GAAA,EAAO,WAAWb,EAAA,CAAW;AAAA,EAAA,GAChC;AAGF,MAAIZ,KAAUC;AACZ,WACE,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,eAAY;AAAA,QACZ,WAAWO;AAAA,QACX,MAAAjB;AAAA,QACA,aAAAY;AAAA,QACA,eAAAE;AAAA,QACA,QAAAb;AAAA,QACA,KAAI;AAAA,QACH,GAAGQ;AAAA,QAEH,UAAAU;AAAA,MAAA;AAAA,IAAA;AAKP,QAAMM,IAAY,CAAC,CAAClB,KAAW,CAACD;AAEhC,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWO;AAAA,MACX,MAAMQ,IAAY,WAAW;AAAA,MAC7B,UAAUA,IAAY,IAAI;AAAA,MAC1B,iBAAenB,KAAY;AAAA,MAC3B,SAASmB,IAAYlB,IAAU;AAAA,MAC/B,WACEkB,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFlB,KAAA,QAAAA;AAAA,MAEJ,IACA;AAAA,MAEN,aAAAK;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAAU;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"chip.js","sources":["../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  /**\n   * Class name(s) for the chip's root, a `<span>` (an `<a>` with `asLink`). `style`, `id`, `data-*`, `aria-hidden`,\n   * `ref` and event handlers go to the root too. In a clickable chip (`onClick`), `role`, `tabIndex`, `onFocus`,\n   * `onBlur` and the other `aria-*` attributes go to its button, `.smwb-chip__content` (the icon and the label), which\n   * is also the element to focus. Otherwise they stay on the root, which holds the delete button too.\n   */\n  className?: string;\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  /**\n   * Shows a delete button in the chip and runs when it is pressed: a click, or\n   * Enter / Space while the button has focus. In a clickable chip it sits\n   * beside the chip's button, not inside it, and pressing it does not run the\n   * chip's `onClick`.\n   */\n  onDelete?: (event: React.SyntheticEvent) => void;\n  icon?: React.ReactNode;\n  deleteIcon?: React.ReactNode;\n  label: string;\n  /**\n   * Makes the chip clickable: its icon and label become a button, named by\n   * them, with a focus ring around the whole chip. The delete button is not\n   * part of that button but its sibling, so it keeps its own name.\n   *\n   * Runs on a click on the chip and on Enter / Space while the chip's button\n   * has focus, but not on a click or key on the delete button.\n   */\n  onClick?: () => void;\n  onDeleteMouseDown?: React.MouseEventHandler;\n  /**\n   * Disables the chip: it is dimmed, takes no pointer input and says `aria-disabled`, and its delete button is\n   * disabled too. With `onClick` the chip is still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /**\n   * Id of the label's element, for another element to take the chip's text as\n   * its name (`aria-labelledby`) without the delete button's name.\n   */\n  labelId?: string;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  /** Test id of the root; `chip`, or `chip-link` for a link, unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Chip = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, ChipProps>(function Chip(\n  {\n    label,\n    labelId,\n    className,\n    deleteIcon,\n    icon,\n    onDelete,\n    onMouseDown: onMouseDownProp,\n    // The chip sets these on its root too; its own handlers call the caller's first.\n    onKeyDown: onKeyDownProp,\n    onPointerDown: onPointerDownProp,\n    onDeleteMouseDown: onDeleteMouseDownProp,\n    asLink,\n    href,\n    target = \"_blank\",\n    selected,\n    variant = \"filled\",\n    size = \"medium\",\n    color = \"default\",\n    disabled = false,\n    onClick,\n    deleteAriaLabel = \"Remove\",\n    \"data-testid\": dataTestId,\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n  const contentRef = React.useRef<HTMLSpanElement | null>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    onPointerDownProp?.(event);\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown = (event: React.MouseEvent) => {\n    onDeleteMouseDownProp?.(event);\n    event.stopPropagation();\n  };\n\n  const classes = cn(\n    \"smwb-chip\",\n    `smwb-${variant}`,\n    `smwb-chip_size-${size}`,\n    color !== \"default\" && `smwb-chip_color-${color}`,\n    className,\n    { \"smwb-disabled\": disabled, \"smwb-selected\": selected }\n  );\n\n  const deleteBtn = !!onDelete && (\n    <button\n      type=\"button\"\n      className=\"smwb-chip__delete-icon\"\n      aria-label={deleteAriaLabel}\n      disabled={disabled}\n      onClick={onDelete}\n      onMouseDown={onDeleteMouseDown}\n    >\n      {deleteIcon ? deleteIcon : <Icon name=\"cancel\" size={18} fill={1} />}\n    </button>\n  );\n\n  // The chip's own content: its button when it is clickable.\n  const iconAndLabel = (\n    <>\n      {icon && <span className=\"smwb-chip__icon\">{icon}</span>}\n      <span id={labelId} className=\"smwb-chip__label\">\n        {label}\n      </span>\n    </>\n  );\n  // After the content: in a clickable chip, beside its button, not in it.\n  const trailing = (\n    <>\n      {deleteBtn}\n      <Ripple actionRef={rippleRef} />\n    </>\n  );\n\n  if (asLink && href) {\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        data-testid={dataTestId ?? \"chip-link\"}\n        className={classes}\n        href={href}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        target={target}\n        {...rest}\n        // A default: the caller's rel wins, and an explicit undefined keeps it.\n        rel={rest.rel ?? \"noreferrer\"}\n        onKeyDown={onKeyDownProp}\n      >\n        {iconAndLabel}\n        {trailing}\n      </a>\n    );\n  }\n\n  const clickable = !!onClick && !disabled;\n  // With onClick the chip's content is its button, and what the chip is to the\n  // keyboard and to assistive tech goes there. Without it the chip is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the delete button too.\n  const [control, box] = splitControlProps(rest, !!onClick);\n\n  // Keys pressed on the delete button bubble up here too; only the keys of the\n  // chip's button activate it.\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDownProp?.(event);\n    if (!clickable || event.target !== contentRef.current) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onClick?.();\n    }\n  };\n\n  // A click on the chip's button, or on its padding, activates the chip: not\n  // one on the delete button, nor one in a portal rendered inside, which React\n  // delivers here too. The click goes along to onClick, as it always has,\n  // though its type takes none.\n  const onChipClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n    if (isOwnClick(event, contentRef.current)) {\n      (onClick as React.MouseEventHandler<HTMLSpanElement> | undefined)?.(event);\n    }\n  };\n\n  return (\n    <span\n      ref={ref}\n      data-testid={dataTestId ?? \"chip\"}\n      className={classes}\n      {...box}\n      // A disabled chip says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without.\n      aria-disabled={onClick ? undefined : disabled || box[\"aria-disabled\"]}\n      onClick={clickable ? onChipClick : undefined}\n      onKeyDown={onKeyDown}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n    >\n      <span\n        {...control}\n        ref={contentRef}\n        className=\"smwb-chip__content\"\n        // With onClick the content is the chip's button, and a disabled chip\n        // says so: these win over the caller's, and where the chip sets none,\n        // the caller's stay. Its tabIndex is a default: the caller's wins, e.g.\n        // for roving focus.\n        role={onClick ? \"button\" : undefined}\n        tabIndex={control.tabIndex ?? (clickable ? 0 : undefined)}\n        aria-disabled={onClick ? disabled || control[\"aria-disabled\"] : undefined}\n      >\n        {iconAndLabel}\n      </span>\n      {/* Beside the button, not in it: the delete button keeps its name and input. */}\n      {trailing}\n    </span>\n  );\n});\n\nexport default Chip;\n"],"names":["Chip","React","label","labelId","className","deleteIcon","icon","onDelete","onMouseDownProp","onKeyDownProp","onPointerDownProp","onDeleteMouseDownProp","asLink","href","target","selected","variant","size","color","disabled","onClick","deleteAriaLabel","dataTestId","rest","ref","rippleRef","contentRef","onMouseDown","event","onPointerDown","_a","onDeleteMouseDown","classes","cn","deleteBtn","jsx","Icon","iconAndLabel","jsxs","Fragment","trailing","Ripple","clickable","control","box","splitControlProps","onKeyDown","onChipClick","isOwnClick","_b"],"mappings":"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"}

package/dist/components/dataDisplay/chipGroup/chipGroup.js

@@ -1,42 +1,47 @@
-import { jsx as u } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/chipGroup/chipGroup.entry.css';/* empty css                                                             */
-import A from "clsx";
-import { Chip as j } from "../chip/chip.js";
-function S({
-  options: d,
+import { jsx as t } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/chipGroup/chipGroup.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import j from "clsx";
+import { Chip as k } from "../chip/chip.js";
+function q({
+  options: m,
   value: e,
-  multiple: t,
+  multiple: f,
   onChange: l,
-  size: m = "medium",
-  color: f = "primary",
-  disabled: a,
-  className: b,
-  ...p
+  size: a = "medium",
+  color: b = "primary",
+  disabled: p,
+  className: v,
+  ...i
 }) {
-  const c = () => e == null ? [] : Array.isArray(e) ? e : [e], i = (r) => c().includes(r), v = (r) => {
-    if (t) {
-      const s = c(), x = s.includes(r) ? s.filter((y) => y !== r) : [...s, r];
-      l == null || l(x);
+  var d;
+  const s = () => e == null ? [] : Array.isArray(e) ? e : [e], u = (r) => s().includes(r), x = (r) => {
+    if (f) {
+      const c = s(), y = c.includes(r) ? c.filter((A) => A !== r) : [...c, r];
+      l == null || l(y);
     } else
       l == null || l(r);
   };
-  return /* @__PURE__ */ u("div", { ...p, role: "group", className: A("smwb-chip-group", b), children: d.map((r) => /* @__PURE__ */ u(
-    j,
-    {
-      label: r.label,
-      icon: r.icon,
-      size: m,
-      color: f,
-      selected: i(r.value),
-      variant: i(r.value) ? "filled" : "outlined",
-      disabled: !!(a || r.disabled),
-      onClick: () => v(r.value)
-    },
-    r.value
-  )) });
+  return (
+    // role="group" is a default: the caller's own wins, and an explicit undefined keeps it.
+    /* @__PURE__ */ t("div", { ...i, role: (d = i.role) != null ? d : "group", className: j("smwb-chip-group", v), children: m.map((r) => /* @__PURE__ */ t(
+      k,
+      {
+        label: r.label,
+        icon: r.icon,
+        size: a,
+        color: b,
+        selected: u(r.value),
+        variant: u(r.value) ? "filled" : "outlined",
+        disabled: !!(p || r.disabled),
+        onClick: () => x(r.value)
+      },
+      r.value
+    )) })
+  );
 }
 export {
-  S as ChipGroup,
-  S as default
+  q as ChipGroup,
+  q as default
 };
 //# sourceMappingURL=chipGroup.js.map