@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.13

package/dist/components/section-notice/SectionNotice.js

@@ -1,74 +1,90 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import d from "../button/Button.js";
-import N from "../icon-button/IconButton.js";
-import e, { IconSlotContext as v } from "../icon/Icon.js";
-import __h from "@mattermost/compass-icons/components/information-outline.js";const h=__h&&__h.default?__h.default:__h;
-import __g from "@mattermost/compass-icons/components/alert-outline.js";const g=__g&&__g.default?__g.default:__g;
-import __y from "@mattermost/compass-icons/components/alert-circle-outline.js";const y=__y&&__y.default?__y.default:__y;
-import __O from "@mattermost/compass-icons/components/check-circle-outline.js";const O=__O&&__O.default?__O.default:__O;
-import __k from "@mattermost/compass-icons/components/close.js";const k=__k&&__k.default?__k.default:__k;
-import o from "./SectionNotice.module.scss.js";
-const x = {
-  info: /* @__PURE__ */ i(e, { size: "20", glyph: /* @__PURE__ */ i(h, {}) }),
-  warning: /* @__PURE__ */ i(e, { size: "20", glyph: /* @__PURE__ */ i(y, {}) }),
-  danger: /* @__PURE__ */ i(e, { size: "20", glyph: /* @__PURE__ */ i(g, {}) }),
-  success: /* @__PURE__ */ i(e, { size: "20", glyph: /* @__PURE__ */ i(O, {}) }),
-  hint: /* @__PURE__ */ i(e, { size: "20", glyph: /* @__PURE__ */ i(h, {}) })
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import h from "../button/Button.js";
+import A from "../icon-button/IconButton.js";
+import n, { IconSlotContext as j } from "../icon/Icon.js";
+import __f from "@mattermost/compass-icons/components/information-outline.js";const f=__f&&__f.default?__f.default:__f;
+import __S from "@mattermost/compass-icons/components/alert-outline.js";const S=__S&&__S.default?__S.default:__S;
+import __w from "@mattermost/compass-icons/components/alert-circle-outline.js";const w=__w&&__w.default?__w.default:__w;
+import __D from "@mattermost/compass-icons/components/check-circle-outline.js";const D=__D&&__D.default?__D.default:__D;
+import __E from "@mattermost/compass-icons/components/close.js";const E=__E&&__E.default?__E.default:__E;
+import { mergeClassNames as F } from "../../utils/props.js";
+import i from "./SectionNotice.module.scss.js";
+const T = {
+  info: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(f, {}) }),
+  warning: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(w, {}) }),
+  danger: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(S, {}) }),
+  success: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(D, {}) }),
+  hint: /* @__PURE__ */ e(n, { size: "20", glyph: /* @__PURE__ */ e(f, {}) })
 };
-function $({
+function V({
   className: p = "",
-  type: l = "info",
-  icon: t,
-  title: f,
-  description: r,
-  primaryButtonLabel: s,
-  onPrimaryAction: u,
-  secondaryButtonLabel: c,
-  onSecondaryAction: _,
-  onDismiss: m
+  type: t = "info",
+  icon: r,
+  title: _,
+  description: a,
+  primaryButtonLabel: c,
+  onPrimaryAction: C,
+  secondaryButtonLabel: s,
+  onSecondaryAction: N,
+  primaryActionDisabled: g,
+  primaryActionLoading: I,
+  secondaryActionDisabled: u,
+  secondaryActionLoading: z,
+  onDismiss: m,
+  dismissLabel: v = "Dismiss",
+  dismissButtonProps: o,
+  ...y
 }) {
-  const C = o[`section-notice--type-${l.toLowerCase()}`], I = [o["section-notice"], C, p].filter(Boolean).join(" "), a = t !== void 0 ? t : x[l], z = s != null || c != null;
-  return /* @__PURE__ */ n("div", { className: I, children: [
-    /* @__PURE__ */ n("div", { className: o["section-notice__content"], children: [
-      a != null && /* @__PURE__ */ i("span", { className: o["section-notice__icon"], "aria-hidden": !0, children: /* @__PURE__ */ i(v.Provider, { value: { size: "20" }, children: a }) }),
-      /* @__PURE__ */ n("div", { className: o["section-notice__body"], children: [
-        /* @__PURE__ */ i("p", { className: o["section-notice__title"], children: f }),
-        r != null && /* @__PURE__ */ i("div", { className: o["section-notice__description"], children: r }),
-        z && /* @__PURE__ */ n("div", { className: o["section-notice__actions"], children: [
-          s != null && /* @__PURE__ */ i(
-            d,
+  const O = i[`section-notice--type-${t.toLowerCase()}`], k = [i["section-notice"], O, p].filter(Boolean).join(" "), d = r !== void 0 ? r : T[t], x = c != null || s != null;
+  return /* @__PURE__ */ l("div", { ...y, className: k, children: [
+    /* @__PURE__ */ l("div", { className: i["section-notice__content"], children: [
+      d != null && /* @__PURE__ */ e("span", { className: i["section-notice__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(j.Provider, { value: { size: "20" }, children: d }) }),
+      /* @__PURE__ */ l("div", { className: i["section-notice__body"], children: [
+        /* @__PURE__ */ e("p", { className: i["section-notice__title"], children: _ }),
+        a != null && /* @__PURE__ */ e("div", { className: i["section-notice__description"], children: a }),
+        x && /* @__PURE__ */ l("div", { className: i["section-notice__actions"], children: [
+          c != null && /* @__PURE__ */ e(
+            h,
             {
               emphasis: "primary",
               size: "small",
-              onClick: u,
-              children: s
+              disabled: g,
+              loading: I,
+              onClick: C,
+              children: c
             }
           ),
-          c != null && /* @__PURE__ */ i(
-            d,
+          s != null && /* @__PURE__ */ e(
+            h,
             {
               emphasis: "secondary",
               size: "small",
-              onClick: _,
-              children: c
+              disabled: u,
+              loading: z,
+              onClick: N,
+              children: s
             }
           )
         ] })
       ] })
     ] }),
-    m != null && /* @__PURE__ */ i(
-      N,
+    m != null && /* @__PURE__ */ e(
+      A,
       {
-        className: o["section-notice__dismiss"],
-        "aria-label": "Dismiss",
+        ...o,
+        className: F(
+          i["section-notice__dismiss"],
+          o == null ? void 0 : o.className
+        ),
+        "aria-label": v,
         size: "small",
-        icon: /* @__PURE__ */ i(e, { size: "16", glyph: /* @__PURE__ */ i(k, {}) }),
+        icon: /* @__PURE__ */ e(n, { size: "16", glyph: /* @__PURE__ */ e(E, {}) }),
         onClick: m
       }
     )
   ] });
 }
 export {
-  $ as default
+  V as default
 };
 //# sourceMappingURL=SectionNotice.js.map

package/dist/components/section-notice/SectionNotice.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNotice.js","sources":["../../../src/components/section-notice/SectionNotice.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './SectionNotice.module.scss';\n\nexport type SectionNoticeType =\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n  | 'hint';\n\nexport interface SectionNoticeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls color-coding. Default: Info. */\n  type?: SectionNoticeType;\n  /** Optional leading icon. When omitted a default type icon is shown. Pass `<Icon glyph={<SomeIcon />} />` — SectionNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Title / headline. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Optional body description. */\n  description?: ReactNode;\n  /** Primary action button label. */\n  primaryButtonLabel?: ReactNode;\n  /** Primary action callback. */\n  onPrimaryAction?: () => void;\n  /** Secondary action button label. */\n  secondaryButtonLabel?: ReactNode;\n  /** Secondary action callback. */\n  onSecondaryAction?: () => void;\n  /** Called when dismiss (×) button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\nconst DEFAULT_ICONS: Record<SectionNoticeType, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  hint: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n};\n\n/**\n * A Section Notice is an in-context alert that lives inside a settings page, admin panel, or\n * other content region. Use it to flag important information, report a state change, or\n * surface a problem the user needs to act on — without yanking them out of the flow.\n */\nexport default function SectionNotice({\n  className = '',\n  type = 'info',\n  icon,\n  title,\n  description,\n  primaryButtonLabel,\n  onPrimaryAction,\n  secondaryButtonLabel,\n  onSecondaryAction,\n  onDismiss,\n}: SectionNoticeProps) {\n  const typeClass = styles[`section-notice--type-${type.toLowerCase()}`];\n\n  const rootClass = [styles['section-notice'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon !== undefined ? icon : DEFAULT_ICONS[type];\n\n  const hasActions = primaryButtonLabel != null || secondaryButtonLabel != null;\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['section-notice__content']}>\n        {resolvedIcon != null && (\n          <span className={styles['section-notice__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <div className={styles['section-notice__body']}>\n          <p className={styles['section-notice__title']}>{title}</p>\n          {description != null && (\n            <div className={styles['section-notice__description']}>\n              {description}\n            </div>\n          )}\n          {hasActions && (\n            <div className={styles['section-notice__actions']}>\n              {primaryButtonLabel != null && (\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  onClick={onPrimaryAction}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n              {secondaryButtonLabel != null && (\n                <Button\n                  emphasis=\"secondary\"\n                  size=\"small\"\n                  onClick={onSecondaryAction}\n                >\n                  {secondaryButtonLabel}\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['section-notice__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_ICONS","Icon","jsx","InformationOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","CheckCircleOutlineIcon","SectionNotice","className","type","icon","title","description","primaryButtonLabel","onPrimaryAction","secondaryButtonLabel","onSecondaryAction","onDismiss","typeClass","styles","rootClass","resolvedIcon","hasActions","jsxs","IconSlotContext","Button","IconButton","CloseIcon"],"mappings":";;;;;;;;;;AA0CA,MAAMA,IAAsD;AAAA,EAC1D,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,GAAI;AAAA,EACzD,2BAAUF,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACE,KAAuB,GAAI;AAAA,EAC5D,0BAASH,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACG,KAAiB,GAAI;AAAA,EACrD,2BAAUJ,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACI,KAAuB,GAAI;AAAA,EAC5D,wBAAOL,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,EAAA,CAAI;AAC3D;AAOA,SAAwBI,EAAc;AAAA,EACpC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAAuB;AACrB,QAAMC,IAAYC,EAAO,wBAAwBV,EAAK,YAAA,CAAa,EAAE,GAE/DW,IAAY,CAACD,EAAO,gBAAgB,GAAGD,GAAWV,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,GAELa,IAAeX,MAAS,SAAYA,IAAOV,EAAcS,CAAI,GAE7Da,IAAaT,KAAsB,QAAQE,KAAwB;AAEzE,SACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,MAAAE,KAAgB,QACf,gBAAAnB,EAAC,QAAA,EAAK,WAAWiB,EAAO,sBAAsB,GAAG,eAAW,IAC1D,4BAACK,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,MAEF,gBAAAD,EAAC,OAAA,EAAI,WAAWJ,EAAO,sBAAsB,GAC3C,UAAA;AAAA,QAAA,gBAAAjB,EAAC,KAAA,EAAE,WAAWiB,EAAO,uBAAuB,GAAI,UAAAR,GAAM;AAAA,QACrDC,KAAe,QACd,gBAAAV,EAAC,OAAA,EAAI,WAAWiB,EAAO,6BAA6B,GACjD,UAAAP,GACH;AAAA,QAEDU,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,UAAAN,KAAsB,QACrB,gBAAAX;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,SAASX;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJE,KAAwB,QACvB,gBAAAb;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,SAAST;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACCE,KAAa,QACZ,gBAAAf;AAAA,MAACwB;AAAA,MAAA;AAAA,QACC,WAAWP,EAAO,yBAAyB;AAAA,QAC3C,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOlB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACyB,KAAU,GAAI;AAAA,QAC5C,SAASV;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
+{"version":3,"file":"SectionNotice.js","sources":["../../../src/components/section-notice/SectionNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './SectionNotice.module.scss';\n\nexport type SectionNoticeType =\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n  | 'hint';\n\nexport interface SectionNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls color-coding. Default: Info. */\n  type?: SectionNoticeType;\n  /** Optional leading icon. When omitted a default type icon is shown. Pass `<Icon glyph={<SomeIcon />} />` — SectionNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Title / headline. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Optional body description. */\n  description?: ReactNode;\n  /** Primary action button label. */\n  primaryButtonLabel?: ReactNode;\n  /** Primary action callback. */\n  onPrimaryAction?: () => void;\n  /** Disables the primary action button. */\n  primaryActionDisabled?: boolean;\n  /** Shows a spinner in the primary action button and disables it. */\n  primaryActionLoading?: boolean;\n  /** Secondary action button label. */\n  secondaryButtonLabel?: ReactNode;\n  /** Secondary action callback. */\n  onSecondaryAction?: () => void;\n  /** Disables the secondary action button. */\n  secondaryActionDisabled?: boolean;\n  /** Shows a spinner in the secondary action button and disables it. */\n  secondaryActionLoading?: boolean;\n  /** Called when dismiss (×) button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\nconst DEFAULT_ICONS: Record<SectionNoticeType, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  hint: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n};\n\n/**\n * A Section Notice is an in-context alert that lives inside a settings page, admin panel, or\n * other content region. Use it to flag important information, report a state change, or\n * surface a problem the user needs to act on — without yanking them out of the flow.\n */\nexport default function SectionNotice({\n  className = '',\n  type = 'info',\n  icon,\n  title,\n  description,\n  primaryButtonLabel,\n  onPrimaryAction,\n  secondaryButtonLabel,\n  onSecondaryAction,\n  primaryActionDisabled,\n  primaryActionLoading,\n  secondaryActionDisabled,\n  secondaryActionLoading,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n  ...rest\n}: SectionNoticeProps) {\n  const typeClass = styles[`section-notice--type-${type.toLowerCase()}`];\n\n  const rootClass = [styles['section-notice'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon !== undefined ? icon : DEFAULT_ICONS[type];\n\n  const hasActions = primaryButtonLabel != null || secondaryButtonLabel != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['section-notice__content']}>\n        {resolvedIcon != null && (\n          <span className={styles['section-notice__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <div className={styles['section-notice__body']}>\n          <p className={styles['section-notice__title']}>{title}</p>\n          {description != null && (\n            <div className={styles['section-notice__description']}>\n              {description}\n            </div>\n          )}\n          {hasActions && (\n            <div className={styles['section-notice__actions']}>\n              {primaryButtonLabel != null && (\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  disabled={primaryActionDisabled}\n                  loading={primaryActionLoading}\n                  onClick={onPrimaryAction}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n              {secondaryButtonLabel != null && (\n                <Button\n                  emphasis=\"secondary\"\n                  size=\"small\"\n                  disabled={secondaryActionDisabled}\n                  loading={secondaryActionLoading}\n                  onClick={onSecondaryAction}\n                >\n                  {secondaryButtonLabel}\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['section-notice__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_ICONS","Icon","jsx","InformationOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","CheckCircleOutlineIcon","SectionNotice","className","type","icon","title","description","primaryButtonLabel","onPrimaryAction","secondaryButtonLabel","onSecondaryAction","primaryActionDisabled","primaryActionLoading","secondaryActionDisabled","secondaryActionLoading","onDismiss","dismissLabel","dismissButtonProps","rest","typeClass","styles","rootClass","resolvedIcon","hasActions","jsxs","IconSlotContext","Button","IconButton","mergeClassNames","CloseIcon"],"mappings":";;;;;;;;;;;AA2DA,MAAMA,IAAsD;AAAA,EAC1D,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,GAAI;AAAA,EACzD,2BAAUF,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACE,KAAuB,GAAI;AAAA,EAC5D,0BAASH,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACG,KAAiB,GAAI;AAAA,EACrD,2BAAUJ,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACI,KAAuB,GAAI;AAAA,EAC5D,wBAAOL,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,EAAA,CAAI;AAC3D;AAOA,SAAwBI,EAAc;AAAA,EACpC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAuB;AACrB,QAAMC,IAAYC,EAAO,wBAAwBjB,EAAK,YAAA,CAAa,EAAE,GAE/DkB,IAAY,CAACD,EAAO,gBAAgB,GAAGD,GAAWjB,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,GAELoB,IAAelB,MAAS,SAAYA,IAAOV,EAAcS,CAAI,GAE7DoB,IAAahB,KAAsB,QAAQE,KAAwB;AAEzE,SACE,gBAAAe,EAAC,OAAA,EAAK,GAAGN,GAAM,WAAWG,GACxB,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,MAAAE,KAAgB,QACf,gBAAA1B,EAAC,QAAA,EAAK,WAAWwB,EAAO,sBAAsB,GAAG,eAAW,IAC1D,4BAACK,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,MAEF,gBAAAD,EAAC,OAAA,EAAI,WAAWJ,EAAO,sBAAsB,GAC3C,UAAA;AAAA,QAAA,gBAAAxB,EAAC,KAAA,EAAE,WAAWwB,EAAO,uBAAuB,GAAI,UAAAf,GAAM;AAAA,QACrDC,KAAe,QACd,gBAAAV,EAAC,OAAA,EAAI,WAAWwB,EAAO,6BAA6B,GACjD,UAAAd,GACH;AAAA,QAEDiB,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,UAAAb,KAAsB,QACrB,gBAAAX;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,UAAUf;AAAA,cACV,SAASC;AAAA,cACT,SAASJ;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJE,KAAwB,QACvB,gBAAAb;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,UAAUb;AAAA,cACV,SAASC;AAAA,cACT,SAASJ;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACCM,KAAa,QACZ,gBAAAnB;AAAA,MAAC+B;AAAA,MAAA;AAAA,QACE,GAAGV;AAAA,QACJ,WAAWW;AAAA,UACTR,EAAO,yBAAyB;AAAA,UAChCH,KAAA,gBAAAA,EAAoB;AAAA,QAAA;AAAA,QAEtB,cAAYD;AAAA,QACZ,MAAK;AAAA,QACL,wBAAOrB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACiC,KAAU,GAAI;AAAA,QAC5C,SAASd;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}

package/dist/components/select/Select.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),__me=require("@mattermost/compass-icons/components/chevron-down.js"),me=__me?.default??__me,U=require("../icon/Icon.cjs"),xe=require("../menu-item/MenuItem.cjs"),K=require("../popover-menu/PopoverMenu.cjs"),_e=require("../../hooks/use-anchored-popup-portal.cjs"),je=require("../../hooks/use-outside-close.cjs"),ge=require("../../hooks/use-popover-transition.cjs"),ke=require("../../utils/string.cjs"),l=require("./Select.module.scss.cjs"),L=280;function ye({option:u,listboxId:b,selected:_,active:k,onSelect:v,onHover:y}){return o.jsx("li",{className:l.default.select__option,role:"presentation",children:o.jsx(xe.default,{id:`${b}-option-${u.value}`,role:"option",label:u.label,secondaryLabel:u.secondaryLabel,leadingElement:u.leadingVisual!=null,leadingVisual:u.leadingVisual,trailingElement:_,active:k,disabled:u.disabled,"aria-selected":_,onMouseDown:d=>d.preventDefault(),onMouseEnter:y,onPointerUp:()=>{u.disabled||v(u)}})})}const Ie=s.forwardRef(function({options:b,value:_,defaultValue:k="",onChange:v,placeholder:y,label:d,leadingIcon:I,size:G="medium",invalid:D=!1,disabled:h=!1,id:X,name:R,className:J="","aria-label":q,portalContainer:Q=null,zIndex:W},j){const Y=s.useId(),P=X??Y,m=`${P}-listbox`,C=s.useRef(null),E=s.useRef(null),M=s.useRef(null),Z=s.useCallback(e=>{M.current=e,typeof j=="function"?j(e):j&&(j.current=e)},[j]),S=_!==void 0,[ee,te]=s.useState(k),f=S?_:ee,[n,N]=s.useState(!1),[le,O]=s.useState(!1),[i,p]=s.useState(-1),w=s.useMemo(()=>b.find(e=>e.value===f),[b,f]),a=s.useMemo(()=>b.filter(e=>e.value!==""),[b]),V=f!=="",{mounted:$,visible:se}=ge.usePopoverTransition(n),{placement:ne,maxHeight:ae,style:oe,portalRef:A,renderPortal:ce}=_e.useAnchoredPopupPortal(E,$,{preferredHeight:L,maxHeightCap:L,portalContainer:Q,zIndex:W}),x=s.useCallback(()=>{N(!1),p(-1)},[]),g=s.useCallback(()=>{h||N(!0)},[h]);je.useOutsideClose(C,n,x,A),s.useEffect(()=>{n&&p(e=>{if(a.length===0)return-1;if(e>=0&&e<a.length)return e;const t=a.findIndex(r=>r.value===f);if(t>=0)return t;const c=a.findIndex(r=>!r.disabled);return c>=0?c:0})},[n,a,f]);const H=s.useCallback(e=>{S||te(e),v==null||v(e)},[S,v]),B=s.useCallback(e=>{var t;e.disabled||(H(e.value),x(),(t=M.current)==null||t.focus())},[H,x]),F=s.useCallback(e=>{const t=a.map((c,r)=>({o:c,i:r})).filter(({o:c})=>!c.disabled);if(t.length===0){p(-1);return}p(c=>{const r=t.findIndex(({i:he})=>he===c),ve=r<0?e>0?0:t.length-1:(r+e+t.length)%t.length;return t[ve].i})},[a]);s.useEffect(()=>{if(!n||i<0)return;const e=a[i];if(!e)return;const t=document.getElementById(`${m}-option-${e.value}`);t==null||t.scrollIntoView({block:"nearest"})},[n,i,a,m]);const re=e=>{var t;if(!h)switch(e.key){case"ArrowDown":e.preventDefault(),n?F(1):g();break;case"ArrowUp":e.preventDefault(),n?F(-1):g();break;case"Home":if(n&&a.length>0){e.preventDefault();const c=a.findIndex(r=>!r.disabled);p(c>=0?c:0)}break;case"End":if(n&&a.length>0){e.preventDefault();for(let c=a.length-1;c>=0;c--)if(!((t=a[c])!=null&&t.disabled)){p(c);break}}break;case"Enter":case" ":e.preventDefault(),n&&i>=0&&a[i]?B(a[i]):n||g();break;case"Escape":n&&(e.preventDefault(),x());break;case"Tab":x();break}},ue=le||n||V,T=(w==null?void 0:w.label)??y??"",ie=!V&&T!=="",z=i>=0?a[i]:void 0,de=n&&z!=null?`${m}-option-${z.value}`:void 0,fe=l.default[`select--size-${ke.toKebab(G)}`],pe=[l.default.select,fe,D?l.default["select--invalid"]:"",d!=null&&ue?l.default["select--label-floated"]:"",I!=null?l.default["select--has-leading-icon"]:"",n?l.default["select--open"]:"",h?l.default["select--disabled"]:"",J].filter(Boolean).join(" "),be=[l.default.select__control,ie?l.default["select__control--placeholder"]:""].filter(Boolean).join(" ");return o.jsxs("div",{className:pe,ref:C,children:[o.jsxs("div",{className:l.default.select__wrapper,ref:E,children:[d!=null&&o.jsx("label",{className:l.default.select__label,htmlFor:P,children:d}),o.jsxs("button",{ref:Z,id:P,type:"button",role:"combobox",className:be,disabled:h,"aria-haspopup":"listbox","aria-expanded":n,"aria-controls":m,"aria-activedescendant":de,"aria-invalid":D?!0:void 0,"aria-label":q,onClick:()=>n?x():g(),onFocus:()=>O(!0),onBlur:()=>O(!1),onKeyDown:re,children:[I!=null&&o.jsx("span",{className:l.default["select__leading-icon"],"aria-hidden":!0,children:o.jsx(U.IconSlotContext.Provider,{value:{size:"16"},children:I})}),o.jsx("span",{className:l.default.select__value,children:T}),o.jsx("span",{className:l.default["select__trailing-icon"],"aria-hidden":!0,children:o.jsx(U.default,{size:"12",glyph:o.jsx(me,{})})})]})]}),R!=null&&!h&&o.jsx("input",{type:"hidden",name:R,value:f}),$&&ce(o.jsx("div",{ref:A,className:[l.default.select__popup,ne==="above"?l.default["select__popup--above"]:"",se?l.default["select__popup--visible"]:""].filter(Boolean).join(" "),style:oe,children:o.jsx(K.default,{className:l.default.select__menu,children:o.jsx(K.PopoverMenuScroll,{maxHeight:ae,children:o.jsx("ul",{id:m,className:l.default.select__list,role:"listbox","aria-label":typeof d=="string"?d:q??"Options",children:a.map((e,t)=>o.jsx(ye,{option:e,listboxId:m,selected:e.value===f,active:t===i,onSelect:B,onHover:()=>p(t)},e.value))})})})}))]})});exports.default=Ie;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),n=require("react"),__xe=require("@mattermost/compass-icons/components/chevron-down.js"),xe=__xe?.default??__xe,U=require("../icon/Icon.cjs"),_e=require("../menu-item/MenuItem.cjs"),K=require("../popover-menu/PopoverMenu.cjs"),je=require("../../hooks/use-anchored-popup-portal.cjs"),ge=require("../../hooks/use-outside-close.cjs"),ke=require("../../hooks/use-popover-transition.cjs"),ye=require("../../utils/string.cjs"),l=require("./Select.module.scss.cjs"),L=280;function Ie({option:u,listboxId:b,selected:_,active:k,onSelect:v,onHover:y}){return c.jsx("li",{className:l.default.select__option,role:"presentation",children:c.jsx(_e.default,{id:`${b}-option-${u.value}`,role:"option",label:u.label,secondaryLabel:u.secondaryLabel,leadingElement:u.leadingVisual!=null,leadingVisual:u.leadingVisual,trailingElement:_,active:k,disabled:u.disabled,"aria-selected":_,onMouseDown:d=>d.preventDefault(),onMouseEnter:y,onPointerUp:()=>{u.disabled||v(u)}})})}const Pe=n.forwardRef(function({options:b,value:_,defaultValue:k="",onChange:v,placeholder:y,label:d,leadingIcon:I,size:G="medium",invalid:D=!1,disabled:h=!1,id:X,name:R,className:J="","aria-label":q,listboxLabel:Q="Options",portalContainer:W=null,zIndex:Y},j){const Z=n.useId(),P=X??Z,m=`${P}-listbox`,C=n.useRef(null),E=n.useRef(null),M=n.useRef(null),ee=n.useCallback(e=>{M.current=e,typeof j=="function"?j(e):j&&(j.current=e)},[j]),S=_!==void 0,[te,le]=n.useState(k),f=S?_:te,[a,N]=n.useState(!1),[se,O]=n.useState(!1),[i,p]=n.useState(-1),w=n.useMemo(()=>b.find(e=>e.value===f),[b,f]),o=n.useMemo(()=>b.filter(e=>e.value!==""),[b]),V=f!=="",{mounted:$,visible:ne}=ke.usePopoverTransition(a),{placement:ae,maxHeight:oe,style:ce,portalRef:A,renderPortal:re}=je.useAnchoredPopupPortal(E,$,{preferredHeight:L,maxHeightCap:L,portalContainer:W,zIndex:Y}),x=n.useCallback(()=>{N(!1),p(-1)},[]),g=n.useCallback(()=>{h||N(!0)},[h]);ge.useOutsideClose(C,a,x,A),n.useEffect(()=>{a&&p(e=>{if(o.length===0)return-1;if(e>=0&&e<o.length)return e;const t=o.findIndex(r=>r.value===f);if(t>=0)return t;const s=o.findIndex(r=>!r.disabled);return s>=0?s:0})},[a,o,f]);const H=n.useCallback(e=>{S||le(e),v==null||v(e)},[S,v]),B=n.useCallback(e=>{var t;e.disabled||(H(e.value),x(),(t=M.current)==null||t.focus())},[H,x]),F=n.useCallback(e=>{const t=o.map((s,r)=>({o:s,i:r})).filter(({o:s})=>!s.disabled);if(t.length===0){p(-1);return}p(s=>{const r=t.findIndex(({i:me})=>me===s),he=r<0?e>0?0:t.length-1:(r+e+t.length)%t.length;return t[he].i})},[o]);n.useEffect(()=>{var s;if(!a||i<0)return;const e=o[i];if(!e)return;const t=document.getElementById(`${m}-option-${e.value}`);(s=t==null?void 0:t.scrollIntoView)==null||s.call(t,{block:"nearest"})},[a,i,o,m]);const ue=e=>{var t;if(!h)switch(e.key){case"ArrowDown":e.preventDefault(),a?F(1):g();break;case"ArrowUp":e.preventDefault(),a?F(-1):g();break;case"Home":if(a&&o.length>0){e.preventDefault();const s=o.findIndex(r=>!r.disabled);p(s>=0?s:0)}break;case"End":if(a&&o.length>0){e.preventDefault();for(let s=o.length-1;s>=0;s--)if(!((t=o[s])!=null&&t.disabled)){p(s);break}}break;case"Enter":case" ":e.preventDefault(),a&&i>=0&&o[i]?B(o[i]):a||g();break;case"Escape":a&&(e.preventDefault(),x());break;case"Tab":x();break}},ie=se||a||V,T=(w==null?void 0:w.label)??y??"",de=!V&&T!=="",z=i>=0?o[i]:void 0,fe=a&&z!=null?`${m}-option-${z.value}`:void 0,pe=l.default[`select--size-${ye.toKebab(G)}`],be=[l.default.select,pe,D?l.default["select--invalid"]:"",d!=null&&ie?l.default["select--label-floated"]:"",I!=null?l.default["select--has-leading-icon"]:"",a?l.default["select--open"]:"",h?l.default["select--disabled"]:"",J].filter(Boolean).join(" "),ve=[l.default.select__control,de?l.default["select__control--placeholder"]:""].filter(Boolean).join(" ");return c.jsxs("div",{className:be,ref:C,children:[c.jsxs("div",{className:l.default.select__wrapper,ref:E,children:[d!=null&&c.jsx("label",{className:l.default.select__label,htmlFor:P,children:d}),c.jsxs("button",{ref:ee,id:P,type:"button",role:"combobox",className:ve,disabled:h,"aria-haspopup":"listbox","aria-expanded":a,"aria-controls":m,"aria-activedescendant":fe,"aria-invalid":D?!0:void 0,"aria-label":q,onClick:()=>a?x():g(),onFocus:()=>O(!0),onBlur:()=>O(!1),onKeyDown:ue,children:[I!=null&&c.jsx("span",{className:l.default["select__leading-icon"],"aria-hidden":!0,children:c.jsx(U.IconSlotContext.Provider,{value:{size:"16"},children:I})}),c.jsx("span",{className:l.default.select__value,children:T}),c.jsx("span",{className:l.default["select__trailing-icon"],"aria-hidden":!0,children:c.jsx(U.default,{size:"12",glyph:c.jsx(xe,{})})})]})]}),R!=null&&!h&&c.jsx("input",{type:"hidden",name:R,value:f}),$&&re(c.jsx("div",{ref:A,className:[l.default.select__popup,ae==="above"?l.default["select__popup--above"]:"",ne?l.default["select__popup--visible"]:""].filter(Boolean).join(" "),style:ce,children:c.jsx(K.default,{className:l.default.select__menu,children:c.jsx(K.PopoverMenuScroll,{maxHeight:oe,children:c.jsx("ul",{id:m,className:l.default.select__list,role:"listbox","aria-label":typeof d=="string"?d:q??Q,children:o.map((e,t)=>c.jsx(Ie,{option:e,listboxId:m,selected:e.value===f,active:t===i,onSelect:B,onHover:()=>p(t)},e.value))})})})}))]})});exports.default=Pe;
 //# sourceMappingURL=Select.cjs.map

package/dist/components/select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } 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 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 { 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 './Select.module.scss';\n\nexport type SelectSize = 'small' | 'medium' | 'large';\n\nexport type SelectOption = {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  leadingVisual?: ReactNode;\n  secondaryLabel?: string;\n};\n\nexport interface SelectProps {\n  options: SelectOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /** Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. */\n  placeholder?: string;\n  label?: ReactNode;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  size?: SelectSize;\n  invalid?: boolean;\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  className?: 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\nfunction SelectOptionRow({\n  option,\n  listboxId,\n  selected,\n  active,\n  onSelect,\n  onHover,\n}: {\n  option: SelectOption;\n  listboxId: string;\n  selected: boolean;\n  active: boolean;\n  onSelect: (option: SelectOption) => void;\n  onHover: () => void;\n}) {\n  return (\n    <li className={styles.select__option} role=\"presentation\">\n      <MenuItem\n        id={`${listboxId}-option-${option.value}`}\n        role=\"option\"\n        label={option.label}\n        secondaryLabel={option.secondaryLabel}\n        leadingElement={option.leadingVisual != null}\n        leadingVisual={option.leadingVisual}\n        trailingElement={selected}\n        active={active}\n        disabled={option.disabled}\n        aria-selected={selected}\n        onMouseDown={(ev) => ev.preventDefault()}\n        onMouseEnter={onHover}\n        onPointerUp={() => {\n          if (!option.disabled) onSelect(option);\n        }}\n      />\n    </li>\n  );\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value: valueProp,\n    defaultValue = '',\n    onChange,\n    placeholder,\n    label,\n    leadingIcon,\n    size = 'medium',\n    invalid = false,\n    disabled = false,\n    id: idProp,\n    name,\n    className = '',\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 buttonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      buttonRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const isControlled = valueProp !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? valueProp! : uncontrolledValue;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const selectedOption = useMemo(\n    () => options.find((o) => o.value === value),\n    [options, value],\n  );\n\n  const listOptions = useMemo(\n    () => options.filter((o) => o.value !== ''),\n    [options],\n  );\n\n  const hasValue = value !== '';\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  }, []);\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 (listOptions.length === 0) return -1;\n      if (prev >= 0 && prev < listOptions.length) return prev;\n      const selectedIdx = listOptions.findIndex((o) => o.value === value);\n      if (selectedIdx >= 0) return selectedIdx;\n      const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n      return firstEnabled >= 0 ? firstEnabled : 0;\n    });\n  }, [isOpen, listOptions, value]);\n\n  const commitValue = useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  const selectOption = useCallback(\n    (option: SelectOption) => {\n      if (option.disabled) return;\n      commitValue(option.value);\n      close();\n      buttonRef.current?.focus();\n    },\n    [commitValue, close],\n  );\n\n  const moveActive = useCallback(\n    (delta: number) => {\n      const enabled = listOptions\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    [listOptions],\n  );\n\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return;\n    const option = listOptions[activeIndex];\n    if (!option) return;\n    const el = document.getElementById(`${listboxId}-option-${option.value}`);\n    el?.scrollIntoView({ block: 'nearest' });\n  }, [isOpen, activeIndex, listOptions, listboxId]);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\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 && listOptions.length > 0) {\n          e.preventDefault();\n          const idx = listOptions.findIndex((o) => !o.disabled);\n          setActiveIndex(idx >= 0 ? idx : 0);\n        }\n        break;\n      case 'End':\n        if (isOpen && listOptions.length > 0) {\n          e.preventDefault();\n          for (let i = listOptions.length - 1; i >= 0; i--) {\n            if (!listOptions[i]?.disabled) {\n              setActiveIndex(i);\n              break;\n            }\n          }\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n          selectOption(listOptions[activeIndex]);\n        } else if (!isOpen) {\n          open();\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          e.preventDefault();\n          close();\n        }\n        break;\n      case 'Tab':\n        close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const labelFloated = isFocused || isOpen || hasValue;\n  const displayLabel = selectedOption?.label ?? placeholder ?? '';\n  const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n  const activeOption = activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n  const activeDescendant =\n    isOpen && activeOption != null\n      ? `${listboxId}-option-${activeOption.value}`\n      : undefined;\n\n  const sizeClass = styles[`select--size-${toKebab(size)}`];\n  const rootClass = [\n    styles.select,\n    sizeClass,\n    invalid ? styles['select--invalid'] : '',\n    label != null && labelFloated ? styles['select--label-floated'] : '',\n    leadingIcon != null ? styles['select--has-leading-icon'] : '',\n    isOpen ? styles['select--open'] : '',\n    disabled ? styles['select--disabled'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const controlClass = [\n    styles.select__control,\n    showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} ref={rootRef}>\n      <div className={styles.select__wrapper} ref={anchorRef}>\n        {label != null && (\n          <label className={styles.select__label} htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <button\n          ref={setButtonRef}\n          id={id}\n          type=\"button\"\n          role=\"combobox\"\n          className={controlClass}\n          disabled={disabled}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n          aria-controls={listboxId}\n          aria-activedescendant={activeDescendant}\n          aria-invalid={invalid ? true : undefined}\n          aria-label={ariaLabel}\n          onClick={() => (isOpen ? close() : open())}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon != null && (\n            <span className={styles['select__leading-icon']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingIcon}\n              </IconSlotContext.Provider>\n            </span>\n          )}\n          <span className={styles.select__value}>{displayLabel}</span>\n          <span className={styles['select__trailing-icon']} aria-hidden>\n            <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n          </span>\n        </button>\n      </div>\n\n      {name != null && !disabled && (\n        <input type=\"hidden\" name={name} value={value} />\n      )}\n\n      {popupMounted &&\n        renderPortal(\n          <div\n            ref={portalRef}\n            className={[\n              styles.select__popup,\n              placement === 'above' ? styles['select__popup--above'] : '',\n              popupVisible ? styles['select__popup--visible'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={popupStyle}\n          >\n            <PopoverMenu className={styles.select__menu}>\n              <PopoverMenuScroll maxHeight={maxHeight}>\n                <ul\n                  id={listboxId}\n                  className={styles.select__list}\n                  role=\"listbox\"\n                  aria-label={\n                    typeof label === 'string' ? label : (ariaLabel ?? 'Options')\n                  }\n                >\n                  {listOptions.map((option, index) => (\n                    <SelectOptionRow\n                      key={option.value}\n                      option={option}\n                      listboxId={listboxId}\n                      selected={option.value === value}\n                      active={index === activeIndex}\n                      onSelect={selectOption}\n                      onHover={() => setActiveIndex(index)}\n                    />\n                  ))}\n                </ul>\n              </PopoverMenuScroll>\n            </PopoverMenu>\n          </div>,\n        )}\n    </div>\n  );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","listboxId","selected","active","onSelect","onHover","styles","jsx","MenuItem","ev","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","i","currentPos","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","jsxs","IconSlotContext","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } 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 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 { 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 './Select.module.scss';\n\nexport type SelectSize = 'small' | 'medium' | 'large';\n\nexport type SelectOption = {\n  value: string;\n  /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. */\n  label: string;\n  disabled?: boolean;\n  leadingVisual?: ReactNode;\n  /** Accepts translated nodes. */\n  secondaryLabel?: ReactNode;\n};\n\nexport interface SelectProps {\n  options: SelectOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /** Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. */\n  placeholder?: string;\n  label?: ReactNode;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  size?: SelectSize;\n  invalid?: boolean;\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  className?: string;\n  'aria-label'?: string;\n  /**\n   * Accessible name for the options list when `label` isn't a string and no\n   * `aria-label` is set. Default: \"Options\".\n   */\n  listboxLabel?: 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\nfunction SelectOptionRow({\n  option,\n  listboxId,\n  selected,\n  active,\n  onSelect,\n  onHover,\n}: {\n  option: SelectOption;\n  listboxId: string;\n  selected: boolean;\n  active: boolean;\n  onSelect: (option: SelectOption) => void;\n  onHover: () => void;\n}) {\n  return (\n    <li className={styles.select__option} role=\"presentation\">\n      <MenuItem\n        id={`${listboxId}-option-${option.value}`}\n        role=\"option\"\n        label={option.label}\n        secondaryLabel={option.secondaryLabel}\n        leadingElement={option.leadingVisual != null}\n        leadingVisual={option.leadingVisual}\n        trailingElement={selected}\n        active={active}\n        disabled={option.disabled}\n        aria-selected={selected}\n        onMouseDown={(ev) => ev.preventDefault()}\n        onMouseEnter={onHover}\n        onPointerUp={() => {\n          if (!option.disabled) onSelect(option);\n        }}\n      />\n    </li>\n  );\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value: valueProp,\n    defaultValue = '',\n    onChange,\n    placeholder,\n    label,\n    leadingIcon,\n    size = 'medium',\n    invalid = false,\n    disabled = false,\n    id: idProp,\n    name,\n    className = '',\n    'aria-label': ariaLabel,\n    listboxLabel = 'Options',\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 buttonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      buttonRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const isControlled = valueProp !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? valueProp! : uncontrolledValue;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const selectedOption = useMemo(\n    () => options.find((o) => o.value === value),\n    [options, value],\n  );\n\n  const listOptions = useMemo(\n    () => options.filter((o) => o.value !== ''),\n    [options],\n  );\n\n  const hasValue = value !== '';\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  }, []);\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 (listOptions.length === 0) return -1;\n      if (prev >= 0 && prev < listOptions.length) return prev;\n      const selectedIdx = listOptions.findIndex((o) => o.value === value);\n      if (selectedIdx >= 0) return selectedIdx;\n      const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n      return firstEnabled >= 0 ? firstEnabled : 0;\n    });\n  }, [isOpen, listOptions, value]);\n\n  const commitValue = useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  const selectOption = useCallback(\n    (option: SelectOption) => {\n      if (option.disabled) return;\n      commitValue(option.value);\n      close();\n      buttonRef.current?.focus();\n    },\n    [commitValue, close],\n  );\n\n  const moveActive = useCallback(\n    (delta: number) => {\n      const enabled = listOptions\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    [listOptions],\n  );\n\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return;\n    const option = listOptions[activeIndex];\n    if (!option) return;\n    const el = document.getElementById(`${listboxId}-option-${option.value}`);\n    el?.scrollIntoView?.({ block: 'nearest' });\n  }, [isOpen, activeIndex, listOptions, listboxId]);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\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 && listOptions.length > 0) {\n          e.preventDefault();\n          const idx = listOptions.findIndex((o) => !o.disabled);\n          setActiveIndex(idx >= 0 ? idx : 0);\n        }\n        break;\n      case 'End':\n        if (isOpen && listOptions.length > 0) {\n          e.preventDefault();\n          for (let i = listOptions.length - 1; i >= 0; i--) {\n            if (!listOptions[i]?.disabled) {\n              setActiveIndex(i);\n              break;\n            }\n          }\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n          selectOption(listOptions[activeIndex]);\n        } else if (!isOpen) {\n          open();\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          e.preventDefault();\n          close();\n        }\n        break;\n      case 'Tab':\n        close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const labelFloated = isFocused || isOpen || hasValue;\n  const displayLabel = selectedOption?.label ?? placeholder ?? '';\n  const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n  const activeOption = activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n  const activeDescendant =\n    isOpen && activeOption != null\n      ? `${listboxId}-option-${activeOption.value}`\n      : undefined;\n\n  const sizeClass = styles[`select--size-${toKebab(size)}`];\n  const rootClass = [\n    styles.select,\n    sizeClass,\n    invalid ? styles['select--invalid'] : '',\n    label != null && labelFloated ? styles['select--label-floated'] : '',\n    leadingIcon != null ? styles['select--has-leading-icon'] : '',\n    isOpen ? styles['select--open'] : '',\n    disabled ? styles['select--disabled'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const controlClass = [\n    styles.select__control,\n    showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} ref={rootRef}>\n      <div className={styles.select__wrapper} ref={anchorRef}>\n        {label != null && (\n          <label className={styles.select__label} htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <button\n          ref={setButtonRef}\n          id={id}\n          type=\"button\"\n          role=\"combobox\"\n          className={controlClass}\n          disabled={disabled}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n          aria-controls={listboxId}\n          aria-activedescendant={activeDescendant}\n          aria-invalid={invalid ? true : undefined}\n          aria-label={ariaLabel}\n          onClick={() => (isOpen ? close() : open())}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon != null && (\n            <span className={styles['select__leading-icon']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingIcon}\n              </IconSlotContext.Provider>\n            </span>\n          )}\n          <span className={styles.select__value}>{displayLabel}</span>\n          <span className={styles['select__trailing-icon']} aria-hidden>\n            <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n          </span>\n        </button>\n      </div>\n\n      {name != null && !disabled && (\n        <input type=\"hidden\" name={name} value={value} />\n      )}\n\n      {popupMounted &&\n        renderPortal(\n          <div\n            ref={portalRef}\n            className={[\n              styles.select__popup,\n              placement === 'above' ? styles['select__popup--above'] : '',\n              popupVisible ? styles['select__popup--visible'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={popupStyle}\n          >\n            <PopoverMenu className={styles.select__menu}>\n              <PopoverMenuScroll maxHeight={maxHeight}>\n                <ul\n                  id={listboxId}\n                  className={styles.select__list}\n                  role=\"listbox\"\n                  aria-label={\n                    typeof label === 'string'\n                      ? label\n                      : (ariaLabel ?? listboxLabel)\n                  }\n                >\n                  {listOptions.map((option, index) => (\n                    <SelectOptionRow\n                      key={option.value}\n                      option={option}\n                      listboxId={listboxId}\n                      selected={option.value === value}\n                      active={index === activeIndex}\n                      onSelect={selectOption}\n                      onHover={() => setActiveIndex(index)}\n                    />\n                  ))}\n                </ul>\n              </PopoverMenuScroll>\n            </PopoverMenu>\n          </div>,\n        )}\n    </div>\n  );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","listboxId","selected","active","onSelect","onHover","styles","jsx","MenuItem","ev","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","listboxLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","i","currentPos","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","jsxs","IconSlotContext","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index"],"mappings":"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"}

package/dist/components/select/Select.d.ts

@@ -2,10 +2,12 @@ import { ReactNode } from 'react';
 export type SelectSize = 'small' | 'medium' | 'large';
 export type SelectOption = {
     value: string;
+    /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. */
     label: string;
     disabled?: boolean;
     leadingVisual?: ReactNode;
-    secondaryLabel?: string;
+    /** Accepts translated nodes. */
+    secondaryLabel?: ReactNode;
 };
 export interface SelectProps {
     options: SelectOption[];
@@ -24,6 +26,11 @@ export interface SelectProps {
     name?: string;
     className?: string;
     'aria-label'?: string;
+    /**
+     * Accessible name for the options list when `label` isn't a string and no
+     * `aria-label` is set. Default: "Options".
+     */
+    listboxLabel?: string;
     /** Portal mount node for the menu; defaults to `document.body`. */
     portalContainer?: HTMLElement | null;
     /** Stacking order for the portaled menu. */

package/dist/components/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0CD;;;GAGG;AACH,QAAA,MAAM,MAAM,2GA8TV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0CD;;;GAGG;AACH,QAAA,MAAM,MAAM,2GAiUV,CAAC;AAEH,eAAe,MAAM,CAAC"}