@mattermost/compass-ui 0.1.0-alpha.0 → 0.1.0-alpha.10

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const ChipGroupContext: import('react').Context<boolean>;
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** When true, chips are not a tab stop. */
+    disabled?: boolean;
+}
+/** Roving tabindex + focus for a chip inside a ChipGroup. */
+export declare function activateChip(el: HTMLElement): void;
+/**
+ * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move
+ * between chips; Delete, Backspace, Enter, and Space remove the focused chip.
+ * The × is mouse-only.
+ */
+export default function ChipGroup({ children, className, disabled, onKeyDown, onFocus, ...rest }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChipGroup.d.ts.map

package/dist/components/chip/ChipGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../../src/components/chip/ChipGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,gBAAgB,kCAAuB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,QAQ3C;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,SAAc,EACd,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,2CAiHhB"}

package/dist/components/chip/ChipGroup.js

@@ -0,0 +1,112 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useRef as I, useLayoutEffect as k, createContext as C } from "react";
+import A from "./ChipGroup.module.scss.js";
+const w = C(!1);
+function f(o) {
+  return [...o.querySelectorAll("[data-chip]")];
+}
+function L(o) {
+  const i = o.closest('[role="toolbar"]');
+  i && f(i).forEach((a) => {
+    a.tabIndex = a === o ? 0 : -1;
+  }), o.focus({ focusVisible: !0 });
+}
+function H({
+  children: o,
+  className: i = "",
+  disabled: a = !1,
+  onKeyDown: u,
+  onFocus: h,
+  ...x
+}) {
+  const d = I(null);
+  k(() => {
+    const r = d.current;
+    if (r == null) return;
+    const e = f(r);
+    if (e.length === 0) return;
+    if (a) {
+      e.forEach((t) => {
+        t.tabIndex = -1;
+      });
+      return;
+    }
+    const n = e.find((t) => t === document.activeElement);
+    if (n != null) {
+      e.forEach((t) => {
+        t.tabIndex = t === n ? 0 : -1;
+      });
+      return;
+    }
+    e.some((t) => t.tabIndex === 0) || (e[0].tabIndex = 0, e.slice(1).forEach((t) => {
+      t.tabIndex = -1;
+    }));
+  }, [o, a]);
+  const v = (r) => {
+    if (h == null || h(r), a) return;
+    const e = r.target;
+    if (!(e instanceof HTMLElement)) return;
+    const n = e.closest("[data-chip]"), t = r.currentTarget;
+    n == null || !t.contains(n) || f(t).forEach((c) => {
+      c.tabIndex = c === n ? 0 : -1;
+    });
+  }, E = (r) => {
+    if (u == null || u(r), r.defaultPrevented || a) return;
+    const e = d.current;
+    if (e == null) return;
+    const n = f(e);
+    if (n.length === 0) return;
+    const t = document.activeElement;
+    if (!(t instanceof HTMLElement) || !e.contains(t)) return;
+    const c = t.closest("[data-chip]"), p = n.findIndex((s) => s === c);
+    if (p < 0) return;
+    const l = (s) => {
+      const m = n[Math.max(0, Math.min(n.length - 1, s))];
+      m != null && (r.preventDefault(), L(m));
+    };
+    switch (r.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        l(p + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        l(p - 1);
+        break;
+      case "Home":
+        l(0);
+        break;
+      case "End":
+        l(n.length - 1);
+        break;
+      case "Delete":
+      case "Backspace":
+      case "Enter":
+      case " ": {
+        const s = c == null ? void 0 : c.querySelector("[data-chip-remove]");
+        s != null && !s.disabled && (r.preventDefault(), s.click());
+        break;
+      }
+    }
+  }, g = [A["chip-group"], i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ b(w.Provider, { value: !0, children: /* @__PURE__ */ b(
+    "div",
+    {
+      ...x,
+      ref: d,
+      className: g,
+      role: "toolbar",
+      "aria-orientation": "horizontal",
+      "aria-disabled": a || void 0,
+      onKeyDown: E,
+      onFocus: v,
+      children: o
+    }
+  ) });
+}
+export {
+  w as ChipGroupContext,
+  L as activateChip,
+  H as default
+};
+//# sourceMappingURL=ChipGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.js","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './ChipGroup.module.scss';\n\nexport const ChipGroupContext = createContext(false);\n\nexport interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** When true, chips are not a tab stop. */\n  disabled?: boolean;\n}\n\nfunction chipsIn(toolbar: ParentNode): HTMLElement[] {\n  return [...toolbar.querySelectorAll<HTMLElement>('[data-chip]')];\n}\n\n/** Roving tabindex + focus for a chip inside a ChipGroup. */\nexport function activateChip(el: HTMLElement) {\n  const toolbar = el.closest('[role=\"toolbar\"]');\n  if (toolbar) {\n    chipsIn(toolbar).forEach((chip) => {\n      chip.tabIndex = chip === el ? 0 : -1;\n    });\n  }\n  el.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move\n * between chips; Delete, Backspace, Enter, and Space remove the focused chip.\n * The × is mouse-only.\n */\nexport default function ChipGroup({\n  children,\n  className = '',\n  disabled = false,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: ChipGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n    if (disabled) {\n      chips.forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n      return;\n    }\n    const focused = chips.find((chip) => chip === document.activeElement);\n    if (focused != null) {\n      chips.forEach((chip) => {\n        chip.tabIndex = chip === focused ? 0 : -1;\n      });\n      return;\n    }\n    if (!chips.some((chip) => chip.tabIndex === 0)) {\n      chips[0].tabIndex = 0;\n      chips.slice(1).forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n    }\n  }, [children, disabled]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    if (disabled) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const chip = target.closest<HTMLElement>('[data-chip]');\n    const toolbar = e.currentTarget;\n    if (chip == null || !toolbar.contains(chip)) return;\n    chipsIn(toolbar).forEach((c) => {\n      c.tabIndex = c === chip ? 0 : -1;\n    });\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || disabled) return;\n\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !toolbar.contains(active)) return;\n    const chip = active.closest<HTMLElement>('[data-chip]');\n    const index = chips.findIndex((c) => c === chip);\n    if (index < 0) return;\n\n    const moveTo = (nextIndex: number) => {\n      const next = chips[Math.max(0, Math.min(chips.length - 1, nextIndex))];\n      if (next == null) return;\n      e.preventDefault();\n      activateChip(next);\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        moveTo(index + 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        moveTo(index - 1);\n        break;\n      case 'Home':\n        moveTo(0);\n        break;\n      case 'End':\n        moveTo(chips.length - 1);\n        break;\n      case 'Delete':\n      case 'Backspace':\n      case 'Enter':\n      case ' ': {\n        const btn = chip?.querySelector<HTMLButtonElement>('[data-chip-remove]');\n        if (btn != null && !btn.disabled) {\n          e.preventDefault();\n          btn.click();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const rootClass = [styles['chip-group'], className].filter(Boolean).join(' ');\n\n  return (\n    <ChipGroupContext.Provider value={true}>\n      <div\n        {...rest}\n        ref={ref}\n        className={rootClass}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n      >\n        {children}\n      </div>\n    </ChipGroupContext.Provider>\n  );\n}\n"],"names":["ChipGroupContext","createContext","chipsIn","toolbar","activateChip","el","chip","ChipGroup","children","className","disabled","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","chips","focused","handleFocus","e","target","handleKeyDown","active","index","c","moveTo","nextIndex","next","btn","rootClass","styles","jsx"],"mappings":"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"}

package/dist/components/chip/ChipGroup.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChipGroup.css');const e={"chip-group":"_chip-group_p9ypv_2"};exports.default=e;
+//# sourceMappingURL=ChipGroup.module.scss.cjs.map

package/dist/components/chip/ChipGroup.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/chip/ChipGroup.module.scss.js

@@ -0,0 +1,7 @@
+import './ChipGroup.css';const p = {
+  "chip-group": "_chip-group_p9ypv_2"
+};
+export {
+  p as default
+};
+//# sourceMappingURL=ChipGroup.module.scss.js.map

package/dist/components/chip/ChipGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/chip/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Chip.cjs"),r=require("./ChipGroup.cjs");exports.Chip=e.default;exports.ChipGroup=r.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/chip/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+export { default as Chip } from './Chip';
+export type { ChipProps, ChipSize } from './Chip';
+export { default as ChipGroup } from './ChipGroup';
+export type { ChipGroupProps } from './ChipGroup';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/chip/index.js

@@ -0,0 +1,7 @@
+import { default as r } from "./Chip.js";
+import { default as e } from "./ChipGroup.js";
+export {
+  r as Chip,
+  e as ChipGroup
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/combobox/Combobox.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),__Be=require("@mattermost/compass-icons/components/chevron-down.js"),Be=__Be?.default??__Be,$e=require("../chip/Chip.cjs"),Fe=require("../chip/ChipGroup.cjs"),re=require("../icon/Icon.cjs"),He=require("../menu-item/MenuItem.cjs"),oe=require("../popover-menu/PopoverMenu.cjs"),Te=require("../user-avatar/UserAvatar.cjs"),ze=require("../../hooks/use-anchored-popup-portal.cjs"),Ue=require("../../hooks/use-outside-close.cjs"),Le=require("../../hooks/use-popover-transition.cjs"),Ke=require("../../utils/string.cjs"),r=require("./Combobox.module.scss.cjs"),ae=280,Ge={small:"small",medium:"medium",large:"large"};function Qe(a,d){return d?a.label.toLowerCase().includes(d.toLowerCase()):!0}function Xe(a){return a==null?null:Array.isArray(a)?a[0]??null:a===""?null:a}function We(a){return a==null?[]:Array.isArray(a)?a:a===""?[]:[a]}function Ye(a){if(a.leadingVisual!=null)return a.leadingVisual;if(a.leadingAvatar!=null)return o.jsx(Te.default,{src:a.leadingAvatar.src,alt:a.leadingAvatar.alt,size:"24"})}const Ze=s.forwardRef(function({options:d,multiple:n=!1,value:z,defaultValue:U,onChange:I,inputValue:O,defaultInputValue:ce="",onInputChange:x,label:g,placeholder:ue,leadingIcon:P,size:L="medium",invalid:K=!1,disabled:m=!1,filter:C=!0,emptyMessage:ie="No results",className:de="",id:fe,"aria-label":G,portalContainer:be=null,zIndex:ve},j){const xe=s.useId(),N=fe??xe,p=`${N}-listbox`,V=s.useRef(null),Q=s.useRef(null),y=s.useRef(null),me=s.useCallback(e=>{y.current=e,typeof j=="function"?j(e):j&&(j.current=e)},[j]),R=z!==void 0,[he,_e]=s.useState(()=>U!==void 0?U:n?[]:null),X=R?z:he,f=n?null:Xe(X),i=n?We(X):[],b=O!==void 0,[E,B]=s.useState(ce),[u,W]=s.useState(!1),[ge,Y]=s.useState(!1),[v,h]=s.useState(-1),[w,$]=s.useState(null),M=s.useMemo(()=>f==null?void 0:d.find(e=>e.value===f),[d,f]),F=b?O:n?E:w!==null?w:(M==null?void 0:M.label)??E,Z=b?O:n?E:w!==null?w:"",H=s.useCallback(e=>{b||(B(e),n||$(e)),x==null||x(e)},[b,n,x]),A=s.useCallback(e=>{R||_e(e),I==null||I(e)},[R,I]),c=s.useMemo(()=>{if(C===!1)return d;const e=typeof C=="function"?C:Qe;return d.filter(t=>e(t,Z))},[d,C,Z]),{mounted:J,visible:pe}=Le.usePopoverTransition(u),{placement:ke,maxHeight:je,style:ye,portalRef:ee,renderPortal:Ae}=ze.useAnchoredPopupPortal(Q,J,{preferredHeight:ae,maxHeightCap:ae,portalContainer:be,zIndex:ve}),k=s.useCallback(()=>{W(!1),h(-1),!n&&!b&&($(null),B(""))},[n,b]),D=s.useCallback(()=>{m||W(!0)},[m]);Ue.useOutsideClose(V,u,k,ee),s.useEffect(()=>{u&&h(e=>{if(c.length===0)return-1;if(e>=0&&e<c.length)return e;const t=n?c.findIndex(l=>i.includes(l.value)):c.findIndex(l=>l.value===f);return t>=0?t:0})},[u,c,n,i,f]);const De=s.useCallback(e=>n?i.includes(e):f===e,[n,i,f]),te=s.useCallback(e=>{var t;if(!e.disabled){if(n){const l=i.includes(e.value)?i.filter(_=>_!==e.value):[...i,e.value];A(l),H(""),k(),(t=y.current)==null||t.focus();return}A(e.value),b?x==null||x(e.label):(B(""),$(null)),k()}},[n,i,A,H,b,x,k]),le=s.useCallback(e=>{n&&A(i.filter(t=>t!==e))},[n,i,A]),se=s.useCallback(e=>{const t=c.map((l,_)=>({o:l,i:_})).filter(({o:l})=>!l.disabled);if(t.length===0){h(-1);return}h(l=>{const _=t.findIndex(({i:T})=>T===l),q=_<0?e>0?0:t.length-1:(_+e+t.length)%t.length;return t[q].i})},[c]);s.useEffect(()=>{if(!u||v<0)return;const e=c[v];if(!e)return;const t=document.getElementById(`${p}-option-${e.value}`);t==null||t.scrollIntoView({block:"nearest"})},[u,v,c,p]);const Ie=e=>{const t=e.target.value;H(t),u||D(),h(0)},Ce=()=>{Y(!0),D(),!n&&!b&&M&&requestAnimationFrame(()=>{var e;(e=y.current)==null||e.select()})},we=e=>{var l;const t=e.relatedTarget;t&&((l=V.current)!=null&&l.contains(t))||Y(!1)},Me=e=>{var t;if(!m)switch(e.key){case"ArrowDown":e.preventDefault(),u?se(1):D();break;case"ArrowUp":e.preventDefault(),u?se(-1):D();break;case"Home":u&&c.length>0&&(e.preventDefault(),h(c.findIndex(l=>!l.disabled)>=0?c.findIndex(l=>!l.disabled):0));break;case"End":if(u&&c.length>0){e.preventDefault();for(let l=c.length-1;l>=0;l--)if(!((t=c[l])!=null&&t.disabled)){h(l);break}}break;case"Enter":u&&v>=0&&c[v]&&(e.preventDefault(),te(c[v]));break;case"Escape":u&&(e.preventDefault(),k());break;case"Backspace":n&&F===""&&i.length>0&&(e.preventDefault(),le(i[i.length-1]));break;case"Tab":k();break}},Se=e=>{var t;m||e.target.closest("[data-chip]")||(e.target!==y.current&&(e.preventDefault(),(t=y.current)==null||t.focus()),u||D())},qe=n?i.length>0:f!=null&&f!=="",Oe=F.length>0,Pe=ge||u||qe||Oe,ne=v>=0?c[v]:void 0,Ne=ne!=null?`${p}-option-${ne.value}`:void 0,S=s.useMemo(()=>d.filter(e=>i.includes(e.value)),[d,i]),Ve=r.default[`combobox--size-${Ke.toKebab(L)}`],Re=n&&S.length>0,Ee=[r.default.combobox,Ve,K?r.default["combobox--invalid"]:"",g!=null&&Pe?r.default["combobox--label-floated"]:"",P!=null?r.default["combobox--has-leading-icon"]:"",Re?r.default["combobox--has-chips"]:"",u?r.default["combobox--open"]:"",m?r.default["combobox--disabled"]:"",de].filter(Boolean).join(" ");return o.jsxs("div",{className:Ee,ref:V,children:[o.jsxs("div",{className:r.default.combobox__wrapper,ref:Q,children:[g!=null&&o.jsx("label",{className:r.default.combobox__label,htmlFor:N,children:g}),o.jsxs("div",{className:r.default.combobox__inner,onMouseDown:Se,children:[P!=null&&o.jsx("span",{className:r.default["combobox__leading-icon"],"aria-hidden":!0,children:o.jsx(re.IconSlotContext.Provider,{value:{size:"16"},children:P})}),o.jsxs("div",{className:r.default.combobox__value,children:[n&&S.length>0&&o.jsx(Fe.default,{"aria-label":typeof g=="string"?`${g} selections`:"Selected",disabled:m,children:S.map(e=>o.jsx($e.default,{size:Ge[L],leadingAvatar:e.leadingAvatar,leadingIcon:e.leadingAvatar==null?e.leadingVisual:void 0,onRemove:m?void 0:t=>{t.stopPropagation(),le(e.value)},children:e.label},e.value))}),o.jsx("input",{ref:me,id:N,className:r.default.combobox__control,type:"text",role:"combobox",autoComplete:"off",spellCheck:!1,disabled:m,placeholder:n&&S.length>0?void 0:ue,value:F,"aria-label":G,"aria-invalid":K?!0:void 0,"aria-expanded":u,"aria-controls":p,"aria-autocomplete":"list","aria-activedescendant":Ne,onChange:Ie,onFocus:Ce,onBlur:we,onKeyDown:Me})]}),o.jsx("span",{className:r.default["combobox__trailing-icon"],"aria-hidden":!0,children:o.jsx(re.default,{size:"12",glyph:o.jsx(Be,{})})})]})]}),J&&Ae(o.jsx("div",{ref:ee,className:[r.default.combobox__popup,ke==="above"?r.default["combobox__popup--above"]:"",pe?r.default["combobox__popup--visible"]:""].filter(Boolean).join(" "),style:ye,children:o.jsx(oe.default,{className:r.default.combobox__menu,children:o.jsx(oe.PopoverMenuScroll,{maxHeight:je,children:c.length===0?o.jsx("p",{className:r.default.combobox__empty,children:ie}):o.jsx("ul",{id:p,className:r.default.combobox__list,role:"listbox","aria-multiselectable":n||void 0,"aria-label":typeof g=="string"?g:G??"Options",children:c.map((e,t)=>{const l=De(e.value),_=t===v,q=Ye(e);return o.jsx("li",{className:r.default.combobox__option,role:"presentation",children:o.jsx(He.default,{id:`${p}-option-${e.value}`,role:"option",label:e.label,secondaryLabel:e.secondaryLabel,leadingElement:q!=null,leadingVisual:q,trailingElement:l,active:_,disabled:e.disabled,"aria-selected":l,onMouseDown:T=>{T.preventDefault()},onMouseEnter:()=>h(t),onClick:()=>te(e)})},e.value)})})})})}))]})});exports.default=Ze;
+//# sourceMappingURL=Combobox.cjs.map

package/dist/components/combobox/Combobox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n} from 'react';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport Chip from '@/components/chip/Chip';\nimport ChipGroup from '@/components/chip/ChipGroup';\nimport type { ChipSize } from '@/components/chip/Chip';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n  PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { toKebab } from '@/utils/string';\nimport styles from './Combobox.module.scss';\n\nexport type ComboboxSize = 'small' | 'medium' | 'large';\n\nexport type ComboboxOption = {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  /** Leading content for the list row (icon or avatar node). */\n  leadingVisual?: ReactNode;\n  /** Avatar for chips / list when a photo is preferred over `leadingVisual`. */\n  leadingAvatar?: { src: string; alt: string };\n  secondaryLabel?: string;\n};\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  /** When true, selected values render as removable chips. Default: false. */\n  multiple?: boolean;\n  value?: string | string[] | null;\n  defaultValue?: string | string[] | null;\n  onChange?: (value: string | string[] | null) => void;\n  inputValue?: string;\n  defaultInputValue?: string;\n  onInputChange?: (value: string) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  leadingIcon?: ReactNode;\n  size?: ComboboxSize;\n  invalid?: boolean;\n  disabled?: boolean;\n  /**\n   * Client-side filter. `true` (default) matches labels case-insensitively.\n   * `false` shows all options (caller filters via `inputValue` / `onInputChange`).\n   */\n  filter?: boolean | ((option: ComboboxOption, query: string) => boolean);\n  emptyMessage?: string;\n  className?: string;\n  id?: string;\n  'aria-label'?: string;\n  /** Portal mount node for the menu; defaults to `document.body`. */\n  portalContainer?: HTMLElement | null;\n  /** Stacking order for the portaled menu. */\n  zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nconst CHIP_SIZE_BY_COMBOBOX: Record<ComboboxSize, ChipSize> = {\n  small: 'small',\n  medium: 'medium',\n  large: 'large',\n};\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n  if (!query) return true;\n  return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction toSingleValue(\n  value: string | string[] | null | undefined,\n): string | null {\n  if (value == null) return null;\n  if (Array.isArray(value)) return value[0] ?? null;\n  return value === '' ? null : value;\n}\n\nfunction toMultiValue(\n  value: string | string[] | null | undefined,\n): string[] {\n  if (value == null) return [];\n  if (Array.isArray(value)) return value;\n  return value === '' ? [] : [value];\n}\n\nfunction optionLeadingVisual(option: ComboboxOption): ReactNode | undefined {\n  if (option.leadingVisual != null) return option.leadingVisual;\n  if (option.leadingAvatar != null) {\n    return (\n      <UserAvatar\n        src={option.leadingAvatar.src}\n        alt={option.leadingAvatar.alt}\n        size=\"24\"\n      />\n    );\n  }\n  return undefined;\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {\n * value: 'releases', label: 'Releases' }, ];\n */\nconst Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    multiple = false,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    inputValue: inputValueProp,\n    defaultInputValue = '',\n    onInputChange,\n    label,\n    placeholder,\n    leadingIcon,\n    size = 'medium',\n    invalid = false,\n    disabled = false,\n    filter = true,\n    emptyMessage = 'No results',\n    className = '',\n    id: idProp,\n    'aria-label': ariaLabel,\n    portalContainer = null,\n    zIndex,\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const listboxId = `${id}-listbox`;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const isValueControlled = valueProp !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<\n    string | string[] | null\n  >(() => {\n    if (defaultValue !== undefined) return defaultValue;\n    return multiple ? [] : null;\n  });\n\n  const rawValue = isValueControlled ? valueProp! : uncontrolledValue;\n  const singleValue = multiple ? null : toSingleValue(rawValue);\n  const multiValue = multiple ? toMultiValue(rawValue) : [];\n\n  const isInputControlled = inputValueProp !== undefined;\n  const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [queryOverride, setQueryOverride] = useState<string | null>(null);\n\n  const selectedOption = useMemo(\n    () =>\n      singleValue == null\n        ? undefined\n        : options.find((o) => o.value === singleValue),\n    [options, singleValue],\n  );\n\n  // Single-select: show the selected label until the user starts typing a filter.\n  // `queryOverride !== null` means the field is in filter-edit mode.\n  const displayInput = (() => {\n    if (isInputControlled) return inputValueProp!;\n    if (multiple) return uncontrolledInput;\n    if (queryOverride !== null) return queryOverride;\n    return selectedOption?.label ?? uncontrolledInput;\n  })();\n\n  const filterQuery = (() => {\n    if (isInputControlled) return inputValueProp!;\n    if (multiple) return uncontrolledInput;\n    if (queryOverride !== null) return queryOverride;\n    return '';\n  })();\n\n  const setInputDisplay = useCallback(\n    (next: string) => {\n      if (!isInputControlled) {\n        setUncontrolledInput(next);\n        if (!multiple) setQueryOverride(next);\n      }\n      onInputChange?.(next);\n    },\n    [isInputControlled, multiple, onInputChange],\n  );\n\n  const commitValue = useCallback(\n    (next: string | string[] | null) => {\n      if (!isValueControlled) setUncontrolledValue(next);\n      onChange?.(next);\n    },\n    [isValueControlled, onChange],\n  );\n\n  const filteredOptions = useMemo(() => {\n    if (filter === false) return options;\n    const fn = typeof filter === 'function' ? filter : defaultFilter;\n    return options.filter((o) => fn(o, filterQuery));\n  }, [options, filter, filterQuery]);\n\n  const { mounted: popupMounted, visible: popupVisible } =\n    usePopoverTransition(isOpen);\n\n  const {\n    placement,\n    maxHeight,\n    style: popupStyle,\n    portalRef,\n    renderPortal,\n  } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n    preferredHeight: POPUP_MAX_HEIGHT,\n    maxHeightCap: POPUP_MAX_HEIGHT,\n    portalContainer,\n    zIndex,\n  });\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    setActiveIndex(-1);\n    if (!multiple && !isInputControlled) {\n      setQueryOverride(null);\n      setUncontrolledInput('');\n    }\n  }, [multiple, isInputControlled]);\n\n  const open = useCallback(() => {\n    if (disabled) return;\n    setIsOpen(true);\n  }, [disabled]);\n\n  useOutsideClose(rootRef, isOpen, close, portalRef);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setActiveIndex((prev) => {\n      if (filteredOptions.length === 0) return -1;\n      if (prev >= 0 && prev < filteredOptions.length) return prev;\n      const selectedIdx = multiple\n        ? filteredOptions.findIndex((o) => multiValue.includes(o.value))\n        : filteredOptions.findIndex((o) => o.value === singleValue);\n      return selectedIdx >= 0 ? selectedIdx : 0;\n    });\n  }, [isOpen, filteredOptions, multiple, multiValue, singleValue]);\n\n  const isSelected = useCallback(\n    (optionValue: string) =>\n      multiple\n        ? multiValue.includes(optionValue)\n        : singleValue === optionValue,\n    [multiple, multiValue, singleValue],\n  );\n\n  const selectOption = useCallback(\n    (option: ComboboxOption) => {\n      if (option.disabled) return;\n\n      if (multiple) {\n        const next = multiValue.includes(option.value)\n          ? multiValue.filter((v) => v !== option.value)\n          : [...multiValue, option.value];\n        commitValue(next);\n        setInputDisplay('');\n        close();\n        inputRef.current?.focus();\n        return;\n      }\n\n      commitValue(option.value);\n      if (!isInputControlled) {\n        setUncontrolledInput('');\n        setQueryOverride(null);\n      } else {\n        onInputChange?.(option.label);\n      }\n      close();\n    },\n    [\n      multiple,\n      multiValue,\n      commitValue,\n      setInputDisplay,\n      isInputControlled,\n      onInputChange,\n      close,\n    ],\n  );\n\n  const removeValue = useCallback(\n    (optionValue: string) => {\n      if (!multiple) return;\n      commitValue(multiValue.filter((v) => v !== optionValue));\n    },\n    [multiple, multiValue, commitValue],\n  );\n\n  const moveActive = useCallback(\n    (delta: number) => {\n      const enabled = filteredOptions\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled);\n      if (enabled.length === 0) {\n        setActiveIndex(-1);\n        return;\n      }\n      setActiveIndex((prev) => {\n        const currentPos = enabled.findIndex(({ i }) => i === prev);\n        const nextPos =\n          currentPos < 0\n            ? delta > 0\n              ? 0\n              : enabled.length - 1\n            : (currentPos + delta + enabled.length) % enabled.length;\n        return enabled[nextPos].i;\n      });\n    },\n    [filteredOptions],\n  );\n\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return;\n    const option = filteredOptions[activeIndex];\n    if (!option) return;\n    const el = document.getElementById(\n      `${listboxId}-option-${option.value}`,\n    );\n    el?.scrollIntoView({ block: 'nearest' });\n  }, [isOpen, activeIndex, filteredOptions, listboxId]);\n\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const next = e.target.value;\n    setInputDisplay(next);\n    if (!isOpen) open();\n    setActiveIndex(0);\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n    open();\n    // Select-all so the next keystroke replaces the selected label (filter mode).\n    if (!multiple && !isInputControlled && selectedOption) {\n      requestAnimationFrame(() => {\n        inputRef.current?.select();\n      });\n    }\n  };\n\n  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n    // Delay so option mousedown can run first\n    const related = e.relatedTarget as Node | null;\n    if (related && rootRef.current?.contains(related)) return;\n    setIsFocused(false);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isOpen) open();\n        else moveActive(1);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isOpen) open();\n        else moveActive(-1);\n        break;\n      case 'Home':\n        if (isOpen && filteredOptions.length > 0) {\n          e.preventDefault();\n          setActiveIndex(\n            filteredOptions.findIndex((o) => !o.disabled) >= 0\n              ? filteredOptions.findIndex((o) => !o.disabled)\n              : 0,\n          );\n        }\n        break;\n      case 'End':\n        if (isOpen && filteredOptions.length > 0) {\n          e.preventDefault();\n          for (let i = filteredOptions.length - 1; i >= 0; i--) {\n            if (!filteredOptions[i]?.disabled) {\n              setActiveIndex(i);\n              break;\n            }\n          }\n        }\n        break;\n      case 'Enter':\n        if (isOpen && activeIndex >= 0 && filteredOptions[activeIndex]) {\n          e.preventDefault();\n          selectOption(filteredOptions[activeIndex]);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          e.preventDefault();\n          close();\n        }\n        break;\n      case 'Backspace':\n        if (\n          multiple &&\n          displayInput === '' &&\n          multiValue.length > 0\n        ) {\n          e.preventDefault();\n          removeValue(multiValue[multiValue.length - 1]);\n        }\n        break;\n      case 'Tab':\n        close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleWrapperMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    // Don't steal focus from chips or their remove buttons\n    if ((e.target as HTMLElement).closest('[data-chip]')) return;\n    if (e.target !== inputRef.current) {\n      e.preventDefault();\n      inputRef.current?.focus();\n    }\n    if (!isOpen) open();\n  };\n\n  const hasSelection = multiple\n    ? multiValue.length > 0\n    : singleValue != null && singleValue !== '';\n  const hasInputText = displayInput.length > 0;\n  const labelFloated = isFocused || isOpen || hasSelection || hasInputText;\n\n  const activeOption =\n    activeIndex >= 0 ? filteredOptions[activeIndex] : undefined;\n  const activeDescendant =\n    activeOption != null ? `${listboxId}-option-${activeOption.value}` : undefined;\n\n  const selectedOptions = useMemo(\n    () => options.filter((o) => multiValue.includes(o.value)),\n    [options, multiValue],\n  );\n\n  const sizeClass = styles[`combobox--size-${toKebab(size)}`];\n  const hasChips = multiple && selectedOptions.length > 0;\n  const rootClass = [\n    styles.combobox,\n    sizeClass,\n    invalid ? styles['combobox--invalid'] : '',\n    label != null && labelFloated ? styles['combobox--label-floated'] : '',\n    leadingIcon != null ? styles['combobox--has-leading-icon'] : '',\n    hasChips ? styles['combobox--has-chips'] : '',\n    isOpen ? styles['combobox--open'] : '',\n    disabled ? styles['combobox--disabled'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} ref={rootRef}>\n      <div\n        className={styles.combobox__wrapper}\n        ref={anchorRef}\n      >\n        {label != null && (\n          <label className={styles.combobox__label} htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <div\n          className={styles.combobox__inner}\n          onMouseDown={handleWrapperMouseDown}\n        >\n          {leadingIcon != null && (\n            <span className={styles['combobox__leading-icon']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingIcon}\n              </IconSlotContext.Provider>\n            </span>\n          )}\n          <div className={styles.combobox__value}>\n            {multiple && selectedOptions.length > 0 && (\n              <ChipGroup\n                aria-label={\n                  typeof label === 'string' ? `${label} selections` : 'Selected'\n                }\n                disabled={disabled}\n              >\n                {selectedOptions.map((option) => (\n                  <Chip\n                    key={option.value}\n                    size={CHIP_SIZE_BY_COMBOBOX[size]}\n                    leadingAvatar={option.leadingAvatar}\n                    leadingIcon={\n                      option.leadingAvatar == null\n                        ? option.leadingVisual\n                        : undefined\n                    }\n                    onRemove={\n                      disabled\n                        ? undefined\n                        : (ev) => {\n                            ev.stopPropagation();\n                            removeValue(option.value);\n                          }\n                    }\n                  >\n                    {option.label}\n                  </Chip>\n                ))}\n              </ChipGroup>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles.combobox__control}\n              type=\"text\"\n              role=\"combobox\"\n              autoComplete=\"off\"\n              spellCheck={false}\n              disabled={disabled}\n              placeholder={\n                multiple && selectedOptions.length > 0\n                  ? undefined\n                  : placeholder\n              }\n              value={displayInput}\n              aria-label={ariaLabel}\n              aria-invalid={invalid ? true : undefined}\n              aria-expanded={isOpen}\n              aria-controls={listboxId}\n              aria-autocomplete=\"list\"\n              aria-activedescendant={activeDescendant}\n              onChange={handleInputChange}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onKeyDown={handleKeyDown}\n            />\n          </div>\n          <span className={styles['combobox__trailing-icon']} aria-hidden>\n            <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n          </span>\n        </div>\n      </div>\n\n      {popupMounted &&\n        renderPortal(\n          <div\n            ref={portalRef}\n            className={[\n              styles.combobox__popup,\n              placement === 'above' ? styles['combobox__popup--above'] : '',\n              popupVisible ? styles['combobox__popup--visible'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={popupStyle}\n          >\n            <PopoverMenu className={styles.combobox__menu}>\n              <PopoverMenuScroll maxHeight={maxHeight}>\n                {filteredOptions.length === 0 ? (\n                  <p className={styles.combobox__empty}>{emptyMessage}</p>\n                ) : (\n                  <ul\n                    id={listboxId}\n                    className={styles.combobox__list}\n                    role=\"listbox\"\n                    aria-multiselectable={multiple || undefined}\n                    aria-label={\n                      typeof label === 'string'\n                        ? label\n                        : (ariaLabel ?? 'Options')\n                    }\n                  >\n                    {filteredOptions.map((option, index) => {\n                      const selected = isSelected(option.value);\n                      const active = index === activeIndex;\n                      const leading = optionLeadingVisual(option);\n                      return (\n                        <li\n                          key={option.value}\n                          className={styles.combobox__option}\n                          role=\"presentation\"\n                        >\n                          <MenuItem\n                            id={`${listboxId}-option-${option.value}`}\n                            role=\"option\"\n                            label={option.label}\n                            secondaryLabel={option.secondaryLabel}\n                            leadingElement={leading != null}\n                            leadingVisual={leading}\n                            trailingElement={selected}\n                            active={active}\n                            disabled={option.disabled}\n                            aria-selected={selected}\n                            onMouseDown={(ev) => {\n                              // Prevent input blur before click handler\n                              ev.preventDefault();\n                            }}\n                            onMouseEnter={() => setActiveIndex(index)}\n                            onClick={() => selectOption(option)}\n                          />\n                        </li>\n                      );\n                    })}\n                  </ul>\n                )}\n              </PopoverMenuScroll>\n            </PopoverMenu>\n          </div>,\n        )}\n    </div>\n  );\n});\n\nexport default Combobox;\n"],"names":["POPUP_MAX_HEIGHT","CHIP_SIZE_BY_COMBOBOX","defaultFilter","option","query","toSingleValue","value","toMultiValue","optionLeadingVisual","jsx","UserAvatar","Combobox","forwardRef","options","multiple","valueProp","defaultValue","onChange","inputValueProp","defaultInputValue","onInputChange","label","placeholder","leadingIcon","size","invalid","disabled","filter","emptyMessage","className","idProp","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","listboxId","rootRef","useRef","anchorRef","inputRef","setInputRef","useCallback","node","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","rawValue","singleValue","multiValue","isInputControlled","uncontrolledInput","setUncontrolledInput","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","queryOverride","setQueryOverride","selectedOption","useMemo","o","displayInput","filterQuery","setInputDisplay","next","commitValue","filteredOptions","fn","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","isSelected","optionValue","selectOption","v","_a","removeValue","moveActive","delta","enabled","i","currentPos","nextPos","el","handleInputChange","handleFocus","handleBlur","related","handleKeyDown","handleWrapperMouseDown","hasSelection","hasInputText","labelFloated","activeOption","activeDescendant","selectedOptions","sizeClass","styles","toKebab","hasChips","rootClass","jsxs","IconSlotContext","ChipGroup","Chip","ev","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index","selected","active","leading","MenuItem"],"mappings":"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"}

package/dist/components/combobox/Combobox.css

@@ -0,0 +1 @@
+._combobox_z7qkn_2{position:relative;display:flex;flex-direction:column;width:100%}._combobox__wrapper_z7qkn_8{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:text}._combobox_z7qkn_2:not(._combobox--disabled_z7qkn_16):hover:not(:focus-within) ._combobox__wrapper_z7qkn_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._combobox_z7qkn_2:focus-within ._combobox__wrapper_z7qkn_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._combobox--disabled_z7qkn_16 ._combobox__wrapper_z7qkn_8{opacity:.56;cursor:not-allowed}._combobox__label_z7qkn_26{position:absolute;left:var(--spacing-xs);top:50%;z-index:1;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._combobox--label-floated_z7qkn_47 ._combobox__label_z7qkn_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._combobox_z7qkn_2:focus-within ._combobox__label_z7qkn_26{color:var(--button-bg)}._combobox__inner_z7qkn_56{display:flex;align-items:center;position:relative;gap:var(--spacing-xs);width:100%;box-sizing:border-box}._combobox__leading-icon_z7qkn_64{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);pointer-events:none}._combobox__value_z7qkn_72{display:flex;flex:1 1 0;flex-wrap:wrap;align-items:center;align-self:stretch;gap:var(--spacing-xxs);min-width:0;margin:-1px 0}._combobox__control_z7qkn_82{flex:1 1 0;width:100%;min-width:0;min-height:100%;margin:0;padding:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._combobox__control_z7qkn_82::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._combobox__control_z7qkn_82:focus{outline:none}._combobox__control_z7qkn_82:disabled{cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.64)}._combobox__trailing-icon_z7qkn_107{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);pointer-events:none;margin-right:var(--spacing-xxxs);transition:transform var(--duration-quick) var(--ease-transition)}._combobox--open_z7qkn_117 ._combobox__trailing-icon_z7qkn_107{transform:rotate(180deg)}._combobox__popup_z7qkn_120{opacity:0;transform:scale(.9);transform-origin:top center;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._combobox__popup--above_z7qkn_127{transform-origin:bottom center}._combobox__popup--visible_z7qkn_130{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._combobox__menu_z7qkn_136{width:100%;min-width:100%;max-width:none}._combobox__empty_z7qkn_141{margin:0;padding:var(--spacing-s) var(--spacing-l);font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64)}._combobox__list_z7qkn_149{margin:0;padding:0;list-style:none}._combobox__option_z7qkn_154{display:block;width:100%}._combobox--size-small_z7qkn_158 ._combobox__wrapper_z7qkn_8{min-height:32px}._combobox--size-small_z7qkn_158 ._combobox__inner_z7qkn_56{padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xs)}._combobox--size-small_z7qkn_158._combobox--has-chips_z7qkn_165 ._combobox__inner_z7qkn_56{padding-block:var(--spacing-xxs)}._combobox--size-small_z7qkn_158 ._combobox__control_z7qkn_82{font-size:var(--font-size-75);line-height:var(--line-height-75)}._combobox--size-small_z7qkn_158 ._combobox__trailing-icon_z7qkn_107 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._combobox--size-small_z7qkn_158._combobox--label-floated_z7qkn_47 ._combobox__label_z7qkn_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._combobox--size-medium_z7qkn_182 ._combobox__wrapper_z7qkn_8{min-height:40px}._combobox--size-medium_z7qkn_182 ._combobox__inner_z7qkn_56{padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s)}._combobox--size-medium_z7qkn_182._combobox--has-chips_z7qkn_165 ._combobox__inner_z7qkn_56{padding-block:var(--spacing-xs)}._combobox--size-medium_z7qkn_182 ._combobox__control_z7qkn_82{font-size:var(--font-size-100);line-height:var(--line-height-100)}._combobox--size-medium_z7qkn_182 ._combobox__label_z7qkn_26{font-size:var(--font-size-100);left:var(--spacing-m)}._combobox--size-medium_z7qkn_182 ._combobox__trailing-icon_z7qkn_107 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._combobox--size-medium_z7qkn_182._combobox--label-floated_z7qkn_47 ._combobox__label_z7qkn_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._combobox--size-large_z7qkn_210 ._combobox__wrapper_z7qkn_8{min-height:48px}._combobox--size-large_z7qkn_210 ._combobox__inner_z7qkn_56{padding:var(--spacing-m) var(--spacing-l);gap:var(--spacing-s)}._combobox--size-large_z7qkn_210._combobox--has-chips_z7qkn_165 ._combobox__inner_z7qkn_56{padding-block:var(--spacing-xs)}._combobox--size-large_z7qkn_210 ._combobox__control_z7qkn_82{font-size:var(--font-size-200);line-height:var(--line-height-200)}._combobox--size-large_z7qkn_210 ._combobox__label_z7qkn_26{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._combobox--size-large_z7qkn_210 ._combobox__trailing-icon_z7qkn_107 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._combobox--size-large_z7qkn_210._combobox--label-floated_z7qkn_47 ._combobox__label_z7qkn_26{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._combobox--invalid_z7qkn_239 ._combobox__wrapper_z7qkn_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._combobox--invalid_z7qkn_239:focus-within ._combobox__wrapper_z7qkn_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 2px var(--error-text, var(--color-danger))}._combobox--invalid_z7qkn_239 ._combobox__label_z7qkn_26{color:var(--error-text, var(--color-danger))}._combobox--invalid_z7qkn_239:focus-within ._combobox__label_z7qkn_26{color:var(--error-text, var(--color-danger))}._combobox--has-leading-icon_z7qkn_251 ._combobox__label_z7qkn_26{left:32px}._combobox--has-leading-icon_z7qkn_251._combobox--label-floated_z7qkn_47 ._combobox__label_z7qkn_26{left:var(--spacing-xs)}._combobox--has-leading-icon_z7qkn_251._combobox--size-medium_z7qkn_182 ._combobox__label_z7qkn_26,._combobox--has-leading-icon_z7qkn_251._combobox--size-large_z7qkn_210 ._combobox__label_z7qkn_26{left:38px}._combobox--has-leading-icon_z7qkn_251._combobox--size-medium_z7qkn_182._combobox--label-floated_z7qkn_47 ._combobox__label_z7qkn_26,._combobox--has-leading-icon_z7qkn_251._combobox--size-large_z7qkn_210._combobox--label-floated_z7qkn_47 ._combobox__label_z7qkn_26{left:var(--spacing-m)}._combobox_z7qkn_2:has(._combobox__label_z7qkn_26):not(._combobox--label-floated_z7qkn_47) ._combobox__control_z7qkn_82{color:transparent}._combobox_z7qkn_2:has(._combobox__label_z7qkn_26):not(._combobox--label-floated_z7qkn_47) ._combobox__control_z7qkn_82::placeholder{color:transparent}

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+export type ComboboxSize = 'small' | 'medium' | 'large';
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Leading content for the list row (icon or avatar node). */
+    leadingVisual?: ReactNode;
+    /** Avatar for chips / list when a photo is preferred over `leadingVisual`. */
+    leadingAvatar?: {
+        src: string;
+        alt: string;
+    };
+    secondaryLabel?: string;
+};
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    /** When true, selected values render as removable chips. Default: false. */
+    multiple?: boolean;
+    value?: string | string[] | null;
+    defaultValue?: string | string[] | null;
+    onChange?: (value: string | string[] | null) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputChange?: (value: string) => void;
+    label?: ReactNode;
+    placeholder?: string;
+    leadingIcon?: ReactNode;
+    size?: ComboboxSize;
+    invalid?: boolean;
+    disabled?: boolean;
+    /**
+     * Client-side filter. `true` (default) matches labels case-insensitively.
+     * `false` shows all options (caller filters via `inputValue` / `onInputChange`).
+     */
+    filter?: boolean | ((option: ComboboxOption, query: string) => boolean);
+    emptyMessage?: string;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+    /** Portal mount node for the menu; defaults to `document.body`. */
+    portalContainer?: HTMLElement | null;
+    /** Stacking order for the portaled menu. */
+    zIndex?: number;
+}
+/**
+ * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'
+ * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {
+ * value: 'releases', label: 'Releases' }, ];
+ */
+declare const Combobox: import('react').ForwardRefExoticComponent<ComboboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Combobox;
+//# sourceMappingURL=Combobox.d.ts.map

package/dist/components/combobox/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKV,SAAS,EACV,MAAM,OAAO,CAAC;AA2Bf,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8EAA8E;IAC9E,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACxE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA6CD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,4GA+gBZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}