@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/components/admin-panel-header/AdminPanelHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPanelHeader.cjs","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import { type ChangeEvent, type ReactNode } from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  betaLabel?: string;\n  showEnterpriseLabel?: boolean;\n  enterpriseLabel?: string;\n  showButton?: boolean;\n  buttonLabel?: string;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  onToggleExpand?: () => void;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern; it can also be documented on\n * its own when adjusting header anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  return (\n    <header\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div\n              className={styles['admin-panel-header__leading']}\n              aria-hidden\n            >\n              {leadingIcon ?? defaultLeading}\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2\n                id={titleId}\n                className={styles['admin-panel-header__title']}\n              >\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div className={styles['admin-panel-header__actions']}>\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? 'Collapse section' : 'Expand section'}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"AdminPanelHeader.cjs","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import {\n  useRef,\n  type ChangeEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** Click targets inside the header that handle their own activation. */\nconst INTERACTIVE_SELECTOR = [\n  'a[href]',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'label',\n  'summary',\n  '[role=\"button\"]',\n  '[role=\"link\"]',\n  '[role=\"switch\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"menuitem\"]',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n].join(', ');\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />` — AdminPanelHeader provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  /** Default: \"Beta\". Accepts translated nodes. */\n  betaLabel?: ReactNode;\n  showEnterpriseLabel?: boolean;\n  /** Default: \"Enterprise\". Accepts translated nodes. */\n  enterpriseLabel?: ReactNode;\n  showButton?: boolean;\n  /** Default: \"Button\". Accepts translated nodes. */\n  buttonLabel?: ReactNode;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (\n    checked: boolean,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  /**\n   * Called by the expand button, and by pointer clicks on the non-interactive\n   * header area (title, subtitle, padding) when `expandable`. Clicks on the\n   * header actions (Switch, Button, `headerActions`, expand button) or on other\n   * interactive descendants do not call it.\n   */\n  onToggleExpand?: () => void;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n  collapseLabel?: string;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern whenever that panel has a\n * `title` (Admin Panel may omit the header when it has a body only). Document the header on\n * its own when adjusting anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  expandLabel = 'Expand section',\n  collapseLabel = 'Collapse section',\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const toggleOnHeaderClick = expandable && onToggleExpand != null;\n\n  const handleHeaderClick = (event: MouseEvent<HTMLElement>) => {\n    if (event.defaultPrevented) return;\n    const target = event.target as Element;\n    if (typeof target.closest !== 'function') return;\n    if (!event.currentTarget.contains(target)) return;\n    if (actionsRef.current?.contains(target)) return;\n    const interactive = target.closest(INTERACTIVE_SELECTOR);\n    if (interactive && event.currentTarget.contains(interactive)) return;\n    onToggleExpand?.();\n  };\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- header click is a pointer shortcut; keyboard users toggle with the expand button\n    <header\n      onClick={toggleOnHeaderClick ? handleHeaderClick : undefined}\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        toggleOnHeaderClick ? styles['admin-panel-header--expandable'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div className={styles['admin-panel-header__leading']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '20' }}>\n                {leadingIcon ?? defaultLeading}\n              </IconSlotContext.Provider>\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2 id={titleId} className={styles['admin-panel-header__title']}>\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div\n            ref={actionsRef}\n            className={styles['admin-panel-header__actions']}\n          >\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? collapseLabel : expandLabel}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["INTERACTIVE_SELECTOR","AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","expandLabel","collapseLabel","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","actionsRef","useRef","toggleOnHeaderClick","handleHeaderClick","event","target","_a","interactive","styles","jsxs","IconSlotContext","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/dist/components/admin-panel-header/AdminPanelHeader.css

@@ -0,0 +1 @@
+._admin-panel-header_vb1i0_13{flex-shrink:0;border-bottom:1px solid transparent;transition:border-color var(--duration-moderate) var(--ease-transition)}._admin-panel-header--divided_vb1i0_18{border-bottom-color:rgba(var(--center-channel-color-rgb),.12)}._admin-panel-header--expandable_vb1i0_21{cursor:pointer}._admin-panel-header--expandable_vb1i0_21:hover{background-color:rgba(var(--center-channel-color-rgb),.02);transition:border-color var(--duration-moderate) var(--ease-transition),background-color var(--duration-quick) var(--ease-transition)}._admin-panel-header--expandable_vb1i0_21 ._admin-panel-header__actions_vb1i0_28{cursor:auto}._admin-panel-header__main_vb1i0_31{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-m);width:100%;padding:var(--spacing-xxl);box-sizing:border-box}._admin-panel-header__start_vb1i0_40{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-m);min-width:0}._admin-panel-header__leading_vb1i0_47{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.64)}._admin-panel-header__title-stack_vb1i0_58{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--spacing-xxxxs);align-items:flex-start;justify-content:center;min-width:0}._admin-panel-header__title-row_vb1i0_67{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);align-items:center;min-width:0;width:100%}._admin-panel-header__title_vb1i0_58{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}._admin-panel-header__subtitle_vb1i0_87{margin:0;font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.75);max-width:100%}._admin-panel-header__actions_vb1i0_28{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:var(--spacing-m)}

package/dist/components/admin-panel-header/AdminPanelHeader.d.ts

@@ -9,13 +9,17 @@ export interface AdminPanelHeaderProps {
     /** Trailing accessory actions rendered after Switch / Primary button and before expand. */
     headerActions?: ReactNode;
     iconLeft?: boolean;
+    /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />` — AdminPanelHeader provides the correct size via context. */
     leadingIcon?: ReactNode;
     showBeta?: boolean;
-    betaLabel?: string;
+    /** Default: "Beta". Accepts translated nodes. */
+    betaLabel?: ReactNode;
     showEnterpriseLabel?: boolean;
-    enterpriseLabel?: string;
+    /** Default: "Enterprise". Accepts translated nodes. */
+    enterpriseLabel?: ReactNode;
     showButton?: boolean;
-    buttonLabel?: string;
+    /** Default: "Button". Accepts translated nodes. */
+    buttonLabel?: ReactNode;
     onButtonClick?: () => void;
     showSwitch?: boolean;
     switchLabel?: ReactNode;
@@ -25,7 +29,17 @@ export interface AdminPanelHeaderProps {
     switchDisabled?: boolean;
     expandable?: boolean;
     isExpanded?: boolean;
+    /**
+     * Called by the expand button, and by pointer clicks on the non-interactive
+     * header area (title, subtitle, padding) when `expandable`. Clicks on the
+     * header actions (Switch, Button, `headerActions`, expand button) or on other
+     * interactive descendants do not call it.
+     */
     onToggleExpand?: () => void;
+    /** Accessible name for the expand button while collapsed. Default: "Expand section". */
+    expandLabel?: string;
+    /** Accessible name for the expand button while expanded. Default: "Collapse section". */
+    collapseLabel?: string;
     /** Bottom border under the header row (hidden when expandable and collapsed). */
     showDivider?: boolean;
     className?: string;
@@ -33,8 +47,9 @@ export interface AdminPanelHeaderProps {
 /**
  * Admin Panel Header is the titled rail for a System Console settings section: optional
  * leading icon, title with optional tags, subtitle, and trailing controls. It is composed
- * inside the [`Admin Panel`](/patterns/admin-panel) pattern; it can also be documented on
- * its own when adjusting header anatomy or behaviour.
+ * inside the [`Admin Panel`](/patterns/admin-panel) pattern whenever that panel has a
+ * `title` (Admin Panel may omit the header when it has a body only). Document the header on
+ * its own when adjusting anatomy or behaviour.
  */
-export default function AdminPanelHeader({ titleId, title, subtitle, headerActions, iconLeft, leadingIcon, showBeta, betaLabel, showEnterpriseLabel, enterpriseLabel, showButton, buttonLabel, onButtonClick, showSwitch, switchLabel, switchChecked, defaultSwitchChecked, onSwitchChange, switchDisabled, expandable, isExpanded, onToggleExpand, showDivider, className, }: AdminPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function AdminPanelHeader({ titleId, title, subtitle, headerActions, iconLeft, leadingIcon, showBeta, betaLabel, showEnterpriseLabel, enterpriseLabel, showButton, buttonLabel, onButtonClick, showSwitch, switchLabel, switchChecked, defaultSwitchChecked, onSwitchChange, switchDisabled, expandable, isExpanded, onToggleExpand, expandLabel, collapseLabel, showDivider, className, }: AdminPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AdminPanelHeader.d.ts.map

package/dist/components/admin-panel-header/AdminPanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzD,6EAA6E;AAC7E,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACpC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAgB,EAChB,WAAW,EACX,QAAgB,EAChB,SAAkB,EAClB,mBAA2B,EAC3B,eAA8B,EAC9B,UAAkB,EAClB,WAAsB,EACtB,aAAa,EACb,UAAkB,EAClB,WAAmB,EACnB,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,UAAkB,EAClB,UAAkB,EAClB,cAAc,EACd,WAAkB,EAClB,SAAc,GACf,EAAE,qBAAqB,2CAqGvB"}
+{"version":3,"file":"AdminPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA+Bf,6EAA6E;AAC7E,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACpC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uIAAuI;IACvI,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uDAAuD;IACvD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,CACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KACjC,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAgB,EAChB,WAAW,EACX,QAAgB,EAChB,SAAkB,EAClB,mBAA2B,EAC3B,eAA8B,EAC9B,UAAkB,EAClB,WAAsB,EACtB,aAAa,EACb,UAAkB,EAClB,WAAmB,EACnB,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,UAAkB,EAClB,UAAkB,EAClB,cAAc,EACd,WAA8B,EAC9B,aAAkC,EAClC,WAAkB,EAClB,SAAc,GACf,EAAE,qBAAqB,2CAqHvB"}

package/dist/components/admin-panel-header/AdminPanelHeader.js

@@ -1,132 +1,156 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import __H from "@mattermost/compass-icons/components/chevron-down.js";const H=__H&&__H.default?__H.default:__H;
-import __L from "@mattermost/compass-icons/components/chevron-up.js";const L=__L&&__L.default?__L.default:__L;
-import __M from "@mattermost/compass-icons/components/cog-outline.js";const M=__M&&__M.default?__M.default:__M;
-import __P from "@mattermost/compass-icons/components/mattermost.js";const P=__P&&__P.default?__P.default:__P;
-import T from "../button/Button.js";
-import r from "../icon/Icon.js";
-import U from "../icon-button/IconButton.js";
-import p from "../tag/Tag.js";
-import q from "../switch/Switch.js";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useRef as q } from "react";
+import __F from "@mattermost/compass-icons/components/chevron-down.js";const F=__F&&__F.default?__F.default:__F;
+import __G from "@mattermost/compass-icons/components/chevron-up.js";const G=__G&&__G.default?__G.default:__G;
+import __J from "@mattermost/compass-icons/components/cog-outline.js";const J=__J&&__J.default?__J.default:__J;
+import __K from "@mattermost/compass-icons/components/mattermost.js";const K=__K&&__K.default?__K.default:__K;
+import Q from "../button/Button.js";
+import d, { IconSlotContext as T } from "../icon/Icon.js";
+import W from "../icon-button/IconButton.js";
+import k from "../tag/Tag.js";
+import X from "../switch/Switch.js";
 import l from "./AdminPanelHeader.module.scss.js";
-function Z({
-  titleId: f,
-  title: u,
-  subtitle: d,
-  headerActions: t,
-  iconLeft: h = !1,
-  leadingIcon: _,
-  showBeta: y = !1,
-  betaLabel: v = "Beta",
-  showEnterpriseLabel: N = !1,
-  enterpriseLabel: z = "Enterprise",
-  showButton: m = !1,
-  buttonLabel: I = "Button",
-  onButtonClick: g,
-  showSwitch: s = !1,
-  switchLabel: k = "Off",
-  switchChecked: b,
+const Y = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  '[role="button"]',
+  '[role="link"]',
+  '[role="switch"]',
+  '[role="checkbox"]',
+  '[role="menuitem"]',
+  "[tabindex]",
+  '[contenteditable]:not([contenteditable="false"])'
+].join(", ");
+function oe({
+  titleId: y,
+  title: v,
+  subtitle: c,
+  headerActions: m,
+  iconLeft: C = !1,
+  leadingIcon: I,
+  showBeta: N = !1,
+  betaLabel: z = "Beta",
+  showEnterpriseLabel: j = !1,
+  enterpriseLabel: B = "Enterprise",
+  showButton: u = !1,
+  buttonLabel: H = "Button",
+  onButtonClick: O,
+  showSwitch: f = !1,
+  switchLabel: R = "Off",
+  switchChecked: P,
   defaultSwitchChecked: x,
-  onSwitchChange: i,
-  switchDisabled: B,
-  expandable: o = !1,
-  isExpanded: n = !1,
-  onToggleExpand: C,
-  showDivider: j = !0,
-  className: O = ""
+  onSwitchChange: n,
+  switchDisabled: A,
+  expandable: s = !1,
+  isExpanded: o = !1,
+  onToggleExpand: t,
+  expandLabel: L = "Expand section",
+  collapseLabel: D = "Collapse section",
+  showDivider: M = !0,
+  className: U = ""
 }) {
-  const A = s || m || t != null || o, D = /* @__PURE__ */ e(r, { size: "20", glyph: /* @__PURE__ */ e(M, {}) });
-  return /* @__PURE__ */ e(
-    "header",
-    {
-      className: [
-        l["admin-panel-header"],
-        j ? l["admin-panel-header--divided"] : "",
-        O
-      ].filter(Boolean).join(" ").trim(),
-      children: /* @__PURE__ */ a("div", { className: l["admin-panel-header__main"], children: [
-        /* @__PURE__ */ a("div", { className: l["admin-panel-header__start"], children: [
-          h ? /* @__PURE__ */ e(
+  const V = f || u || m != null || s, g = /* @__PURE__ */ e(d, { size: "20", glyph: /* @__PURE__ */ e(J, {}) }), p = q(null), h = s && t != null;
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- header click is a pointer shortcut; keyboard users toggle with the expand button
+    /* @__PURE__ */ e(
+      "header",
+      {
+        onClick: h ? (a) => {
+          var b;
+          if (a.defaultPrevented) return;
+          const i = a.target;
+          if (typeof i.closest != "function" || !a.currentTarget.contains(i) || (b = p.current) != null && b.contains(i)) return;
+          const _ = i.closest(Y);
+          _ && a.currentTarget.contains(_) || t == null || t();
+        } : void 0,
+        className: [
+          l["admin-panel-header"],
+          M ? l["admin-panel-header--divided"] : "",
+          h ? l["admin-panel-header--expandable"] : "",
+          U
+        ].filter(Boolean).join(" ").trim(),
+        children: /* @__PURE__ */ r("div", { className: l["admin-panel-header__main"], children: [
+          /* @__PURE__ */ r("div", { className: l["admin-panel-header__start"], children: [
+            C ? /* @__PURE__ */ e("div", { className: l["admin-panel-header__leading"], "aria-hidden": !0, children: /* @__PURE__ */ e(T.Provider, { value: { size: "20" }, children: I ?? g }) }) : null,
+            /* @__PURE__ */ r("div", { className: l["admin-panel-header__title-stack"], children: [
+              /* @__PURE__ */ r("div", { className: l["admin-panel-header__title-row"], children: [
+                /* @__PURE__ */ e("h2", { id: y, className: l["admin-panel-header__title"], children: v }),
+                j ? /* @__PURE__ */ e(
+                  k,
+                  {
+                    label: B,
+                    size: "x-small",
+                    type: "default",
+                    leadingIcon: /* @__PURE__ */ e(d, { size: "10", glyph: /* @__PURE__ */ e(K, {}) })
+                  }
+                ) : null,
+                N ? /* @__PURE__ */ e(k, { label: z, size: "x-small", type: "default" }) : null
+              ] }),
+              c != null ? /* @__PURE__ */ e("p", { className: l["admin-panel-header__subtitle"], children: c }) : null
+            ] })
+          ] }),
+          V ? /* @__PURE__ */ r(
             "div",
             {
-              className: l["admin-panel-header__leading"],
-              "aria-hidden": !0,
-              children: _ ?? D
-            }
-          ) : null,
-          /* @__PURE__ */ a("div", { className: l["admin-panel-header__title-stack"], children: [
-            /* @__PURE__ */ a("div", { className: l["admin-panel-header__title-row"], children: [
-              /* @__PURE__ */ e(
-                "h2",
-                {
-                  id: f,
-                  className: l["admin-panel-header__title"],
-                  children: u
-                }
-              ),
-              N ? /* @__PURE__ */ e(
-                p,
-                {
-                  label: z,
-                  size: "x-small",
-                  type: "default",
-                  leadingIcon: /* @__PURE__ */ e(r, { size: "10", glyph: /* @__PURE__ */ e(P, {}) })
-                }
-              ) : null,
-              y ? /* @__PURE__ */ e(p, { label: v, size: "x-small", type: "default" }) : null
-            ] }),
-            d != null ? /* @__PURE__ */ e("p", { className: l["admin-panel-header__subtitle"], children: d }) : null
-          ] })
-        ] }),
-        A ? /* @__PURE__ */ a("div", { className: l["admin-panel-header__actions"], children: [
-          s ? /* @__PURE__ */ e(
-            q,
-            {
-              size: "medium",
-              checked: b,
-              defaultChecked: x,
-              disabled: B,
-              onChange: (c) => {
-                i == null || i(c.target.checked, c);
-              },
-              children: k
-            }
-          ) : null,
-          m ? /* @__PURE__ */ e(
-            T,
-            {
-              type: "button",
-              size: "medium",
-              emphasis: "primary",
-              onClick: g,
-              children: I
-            }
-          ) : null,
-          t,
-          o ? /* @__PURE__ */ e(
-            U,
-            {
-              type: "button",
-              style: "default",
-              size: "medium",
-              "aria-label": n ? "Collapse section" : "Expand section",
-              "aria-expanded": n,
-              onClick: C,
-              icon: /* @__PURE__ */ e(
-                r,
-                {
-                  size: "20",
-                  glyph: n ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(H, {})
-                }
-              )
+              ref: p,
+              className: l["admin-panel-header__actions"],
+              children: [
+                f ? /* @__PURE__ */ e(
+                  X,
+                  {
+                    size: "medium",
+                    checked: P,
+                    defaultChecked: x,
+                    disabled: A,
+                    onChange: (a) => {
+                      n == null || n(a.target.checked, a);
+                    },
+                    children: R
+                  }
+                ) : null,
+                u ? /* @__PURE__ */ e(
+                  Q,
+                  {
+                    type: "button",
+                    size: "medium",
+                    emphasis: "primary",
+                    onClick: O,
+                    children: H
+                  }
+                ) : null,
+                m,
+                s ? /* @__PURE__ */ e(
+                  W,
+                  {
+                    type: "button",
+                    style: "default",
+                    size: "medium",
+                    "aria-label": o ? D : L,
+                    "aria-expanded": o,
+                    onClick: t,
+                    icon: /* @__PURE__ */ e(
+                      d,
+                      {
+                        size: "20",
+                        glyph: o ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ e(F, {})
+                      }
+                    )
+                  }
+                ) : null
+              ]
             }
           ) : null
-        ] }) : null
-      ] })
-    }
+        ] })
+      }
+    )
   );
 }
 export {
-  Z as default
+  oe as default
 };
 //# sourceMappingURL=AdminPanelHeader.js.map

package/dist/components/admin-panel-header/AdminPanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPanelHeader.js","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import { type ChangeEvent, type ReactNode } from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  betaLabel?: string;\n  showEnterpriseLabel?: boolean;\n  enterpriseLabel?: string;\n  showButton?: boolean;\n  buttonLabel?: string;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  onToggleExpand?: () => void;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern; it can also be documented on\n * its own when adjusting header anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  return (\n    <header\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div\n              className={styles['admin-panel-header__leading']}\n              aria-hidden\n            >\n              {leadingIcon ?? defaultLeading}\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2\n                id={titleId}\n                className={styles['admin-panel-header__title']}\n              >\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div className={styles['admin-panel-header__actions']}>\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? 'Collapse section' : 'Expand section'}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","styles","jsxs","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":";;;;;;;;;;;AAmDA,SAAwBA,EAAiB;AAAA,EACvC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,qBAAAC,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,gBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AACd,GAA0B;AACxB,QAAMC,IACJX,KAAcH,KAAcP,KAAiB,QAAQgB,GAEjDM,sBAAkBC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAe,EAAA,CAAI;AAElE,SACE,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTE,EAAO,oBAAoB;AAAA,QAC3BP,IAAcO,EAAO,6BAA6B,IAAI;AAAA,QACtDN;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EACR,KAAA;AAAA,MAEH,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,2BAA2B,GAC/C,UAAA;AAAA,UAAAzB,IACC,gBAAAuB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE,EAAO,6BAA6B;AAAA,cAC/C,eAAW;AAAA,cAEV,UAAAxB,KAAeoB;AAAA,YAAA;AAAA,UAAA,IAEhB;AAAA,UACJ,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA;AAAA,YAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACpD,UAAA;AAAA,cAAA,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI3B;AAAA,kBACJ,WAAW6B,EAAO,2BAA2B;AAAA,kBAE5C,UAAA5B;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEFO,IACC,gBAAAmB;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,OAAOtB;AAAA,kBACP,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,+BAAciB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACK,KAAe,EAAA,CAAI;AAAA,gBAAA;AAAA,cAAA,IAExD;AAAA,cACH1B,sBACEyB,GAAA,EAAI,OAAOxB,GAAW,MAAK,WAAU,MAAK,UAAA,CAAU,IACnD;AAAA,YAAA,GACN;AAAA,YACCL,KAAY,OACX,gBAAAyB,EAAC,KAAA,EAAE,WAAWE,EAAO,8BAA8B,GAChD,UAAA3B,EAAA,CACH,IACE;AAAA,UAAA,EAAA,CACN;AAAA,QAAA,GACF;AAAA,QACCsB,IACC,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GACjD,UAAA;AAAA,UAAAhB,IACC,gBAAAc;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAASlB;AAAA,cACT,gBAAgBC;AAAA,cAChB,UAAUE;AAAA,cACV,UAAU,CAACgB,MAAM;AACf,gBAAAjB,KAAA,QAAAA,EAAiBiB,EAAE,OAAO,SAASA;AAAA,cACrC;AAAA,cAEC,UAAApB;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,UACHJ,IACC,gBAAAiB;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,UAAS;AAAA,cACT,SAASvB;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,UACHR;AAAA,UACAgB,IACC,gBAAAQ;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAM;AAAA,cACN,MAAK;AAAA,cACL,cAAYhB,IAAa,qBAAqB;AAAA,cAC9C,iBAAeA;AAAA,cACf,SAASC;AAAA,cACT,MACE,gBAAAM;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAON,IAAa,gBAAAO,EAACU,GAAA,CAAA,CAAc,sBAAMC,GAAA,CAAA,CAAgB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC3D;AAAA,UAAA,IAGF;AAAA,QAAA,EAAA,CACN,IACE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"AdminPanelHeader.js","sources":["../../../src/components/admin-panel-header/AdminPanelHeader.tsx"],"sourcesContent":["import {\n  useRef,\n  type ChangeEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport Switch from '@/components/switch/Switch';\nimport styles from './AdminPanelHeader.module.scss';\n\n/** Click targets inside the header that handle their own activation. */\nconst INTERACTIVE_SELECTOR = [\n  'a[href]',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'label',\n  'summary',\n  '[role=\"button\"]',\n  '[role=\"link\"]',\n  '[role=\"switch\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"menuitem\"]',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n].join(', ');\n\n/** System Console admin panel expand/collapse (`expandedState` in Figma). */\nexport type AdminPanelExpandedState = 'collapsed' | 'expanded';\n\nexport interface AdminPanelHeaderProps {\n  /** Passed to the title `h2` for `aria-labelledby` on the parent panel. */\n  titleId: string;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Trailing accessory actions rendered after Switch / Primary button and before expand. */\n  headerActions?: ReactNode;\n  iconLeft?: boolean;\n  /** Icon for the 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />` — AdminPanelHeader provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  showBeta?: boolean;\n  /** Default: \"Beta\". Accepts translated nodes. */\n  betaLabel?: ReactNode;\n  showEnterpriseLabel?: boolean;\n  /** Default: \"Enterprise\". Accepts translated nodes. */\n  enterpriseLabel?: ReactNode;\n  showButton?: boolean;\n  /** Default: \"Button\". Accepts translated nodes. */\n  buttonLabel?: ReactNode;\n  onButtonClick?: () => void;\n  showSwitch?: boolean;\n  switchLabel?: ReactNode;\n  switchChecked?: boolean;\n  defaultSwitchChecked?: boolean;\n  onSwitchChange?: (\n    checked: boolean,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => void;\n  switchDisabled?: boolean;\n  expandable?: boolean;\n  isExpanded?: boolean;\n  /**\n   * Called by the expand button, and by pointer clicks on the non-interactive\n   * header area (title, subtitle, padding) when `expandable`. Clicks on the\n   * header actions (Switch, Button, `headerActions`, expand button) or on other\n   * interactive descendants do not call it.\n   */\n  onToggleExpand?: () => void;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n  collapseLabel?: string;\n  /** Bottom border under the header row (hidden when expandable and collapsed). */\n  showDivider?: boolean;\n  className?: string;\n}\n\n/**\n * Admin Panel Header is the titled rail for a System Console settings section: optional\n * leading icon, title with optional tags, subtitle, and trailing controls. It is composed\n * inside the [`Admin Panel`](/patterns/admin-panel) pattern whenever that panel has a\n * `title` (Admin Panel may omit the header when it has a body only). Document the header on\n * its own when adjusting anatomy or behaviour.\n */\nexport default function AdminPanelHeader({\n  titleId,\n  title,\n  subtitle,\n  headerActions,\n  iconLeft = false,\n  leadingIcon,\n  showBeta = false,\n  betaLabel = 'Beta',\n  showEnterpriseLabel = false,\n  enterpriseLabel = 'Enterprise',\n  showButton = false,\n  buttonLabel = 'Button',\n  onButtonClick,\n  showSwitch = false,\n  switchLabel = 'Off',\n  switchChecked,\n  defaultSwitchChecked,\n  onSwitchChange,\n  switchDisabled,\n  expandable = false,\n  isExpanded = false,\n  onToggleExpand,\n  expandLabel = 'Expand section',\n  collapseLabel = 'Collapse section',\n  showDivider = true,\n  className = '',\n}: AdminPanelHeaderProps) {\n  const hasActions =\n    showSwitch || showButton || headerActions != null || expandable;\n\n  const defaultLeading = <Icon size=\"20\" glyph={<CogOutlineIcon />} />;\n\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const toggleOnHeaderClick = expandable && onToggleExpand != null;\n\n  const handleHeaderClick = (event: MouseEvent<HTMLElement>) => {\n    if (event.defaultPrevented) return;\n    const target = event.target as Element;\n    if (typeof target.closest !== 'function') return;\n    if (!event.currentTarget.contains(target)) return;\n    if (actionsRef.current?.contains(target)) return;\n    const interactive = target.closest(INTERACTIVE_SELECTOR);\n    if (interactive && event.currentTarget.contains(interactive)) return;\n    onToggleExpand?.();\n  };\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- header click is a pointer shortcut; keyboard users toggle with the expand button\n    <header\n      onClick={toggleOnHeaderClick ? handleHeaderClick : undefined}\n      className={[\n        styles['admin-panel-header'],\n        showDivider ? styles['admin-panel-header--divided'] : '',\n        toggleOnHeaderClick ? styles['admin-panel-header--expandable'] : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n        .trim()}\n    >\n      <div className={styles['admin-panel-header__main']}>\n        <div className={styles['admin-panel-header__start']}>\n          {iconLeft ? (\n            <div className={styles['admin-panel-header__leading']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '20' }}>\n                {leadingIcon ?? defaultLeading}\n              </IconSlotContext.Provider>\n            </div>\n          ) : null}\n          <div className={styles['admin-panel-header__title-stack']}>\n            <div className={styles['admin-panel-header__title-row']}>\n              <h2 id={titleId} className={styles['admin-panel-header__title']}>\n                {title}\n              </h2>\n              {showEnterpriseLabel ? (\n                <Tag\n                  label={enterpriseLabel}\n                  size=\"x-small\"\n                  type=\"default\"\n                  leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n                />\n              ) : null}\n              {showBeta ? (\n                <Tag label={betaLabel} size=\"x-small\" type=\"default\" />\n              ) : null}\n            </div>\n            {subtitle != null ? (\n              <p className={styles['admin-panel-header__subtitle']}>\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </div>\n        {hasActions ? (\n          <div\n            ref={actionsRef}\n            className={styles['admin-panel-header__actions']}\n          >\n            {showSwitch ? (\n              <Switch\n                size=\"medium\"\n                checked={switchChecked}\n                defaultChecked={defaultSwitchChecked}\n                disabled={switchDisabled}\n                onChange={(e) => {\n                  onSwitchChange?.(e.target.checked, e);\n                }}\n              >\n                {switchLabel}\n              </Switch>\n            ) : null}\n            {showButton ? (\n              <Button\n                type=\"button\"\n                size=\"medium\"\n                emphasis=\"primary\"\n                onClick={onButtonClick}\n              >\n                {buttonLabel}\n              </Button>\n            ) : null}\n            {headerActions}\n            {expandable ? (\n              <IconButton\n                type=\"button\"\n                style=\"default\"\n                size=\"medium\"\n                aria-label={isExpanded ? collapseLabel : expandLabel}\n                aria-expanded={isExpanded}\n                onClick={onToggleExpand}\n                icon={\n                  <Icon\n                    size=\"20\"\n                    glyph={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n                  />\n                }\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"names":["INTERACTIVE_SELECTOR","AdminPanelHeader","titleId","title","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","isExpanded","onToggleExpand","expandLabel","collapseLabel","showDivider","className","hasActions","defaultLeading","Icon","jsx","CogOutlineIcon","actionsRef","useRef","toggleOnHeaderClick","event","target","_a","interactive","styles","jsxs","IconSlotContext","Tag","MattermostIcon","Switch","e","Button","IconButton","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/dist/components/admin-panel-header/AdminPanelHeader.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AdminPanelHeader.module.css');const e={"admin-panel-header":"_admin-panel-header_2n9e4_2","admin-panel-header--divided":"_admin-panel-header--divided_2n9e4_7","admin-panel-header__main":"_admin-panel-header__main_2n9e4_10","admin-panel-header__start":"_admin-panel-header__start_2n9e4_19","admin-panel-header__leading":"_admin-panel-header__leading_2n9e4_26","admin-panel-header__title-stack":"_admin-panel-header__title-stack_2n9e4_37","admin-panel-header__title-row":"_admin-panel-header__title-row_2n9e4_46","admin-panel-header__title":"_admin-panel-header__title_2n9e4_37","admin-panel-header__subtitle":"_admin-panel-header__subtitle_2n9e4_66","admin-panel-header__actions":"_admin-panel-header__actions_2n9e4_75"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AdminPanelHeader.css');const e={"admin-panel-header":"_admin-panel-header_vb1i0_13","admin-panel-header--divided":"_admin-panel-header--divided_vb1i0_18","admin-panel-header--expandable":"_admin-panel-header--expandable_vb1i0_21","admin-panel-header__actions":"_admin-panel-header__actions_vb1i0_28","admin-panel-header__main":"_admin-panel-header__main_vb1i0_31","admin-panel-header__start":"_admin-panel-header__start_vb1i0_40","admin-panel-header__leading":"_admin-panel-header__leading_vb1i0_47","admin-panel-header__title-stack":"_admin-panel-header__title-stack_vb1i0_58","admin-panel-header__title-row":"_admin-panel-header__title-row_vb1i0_67","admin-panel-header__title":"_admin-panel-header__title_vb1i0_58","admin-panel-header__subtitle":"_admin-panel-header__subtitle_vb1i0_87"};exports.default=e;
 //# sourceMappingURL=AdminPanelHeader.module.scss.cjs.map

package/dist/components/admin-panel-header/AdminPanelHeader.module.scss.js

@@ -1,14 +1,15 @@
-import './AdminPanelHeader.module.css';const e = {
-  "admin-panel-header": "_admin-panel-header_2n9e4_2",
-  "admin-panel-header--divided": "_admin-panel-header--divided_2n9e4_7",
-  "admin-panel-header__main": "_admin-panel-header__main_2n9e4_10",
-  "admin-panel-header__start": "_admin-panel-header__start_2n9e4_19",
-  "admin-panel-header__leading": "_admin-panel-header__leading_2n9e4_26",
-  "admin-panel-header__title-stack": "_admin-panel-header__title-stack_2n9e4_37",
-  "admin-panel-header__title-row": "_admin-panel-header__title-row_2n9e4_46",
-  "admin-panel-header__title": "_admin-panel-header__title_2n9e4_37",
-  "admin-panel-header__subtitle": "_admin-panel-header__subtitle_2n9e4_66",
-  "admin-panel-header__actions": "_admin-panel-header__actions_2n9e4_75"
+import './AdminPanelHeader.css';const e = {
+  "admin-panel-header": "_admin-panel-header_vb1i0_13",
+  "admin-panel-header--divided": "_admin-panel-header--divided_vb1i0_18",
+  "admin-panel-header--expandable": "_admin-panel-header--expandable_vb1i0_21",
+  "admin-panel-header__actions": "_admin-panel-header__actions_vb1i0_28",
+  "admin-panel-header__main": "_admin-panel-header__main_vb1i0_31",
+  "admin-panel-header__start": "_admin-panel-header__start_vb1i0_40",
+  "admin-panel-header__leading": "_admin-panel-header__leading_vb1i0_47",
+  "admin-panel-header__title-stack": "_admin-panel-header__title-stack_vb1i0_58",
+  "admin-panel-header__title-row": "_admin-panel-header__title-row_vb1i0_67",
+  "admin-panel-header__title": "_admin-panel-header__title_vb1i0_58",
+  "admin-panel-header__subtitle": "_admin-panel-header__subtitle_vb1i0_87"
 };
 export {
   e as default

package/dist/components/admin-panel-header/AdminPanelHeader.module.scss.js.map

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

package/dist/components/attachment-card/AttachmentCard.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__N=require("@mattermost/compass-icons/components/close.js"),N=__N?.default??__N,__O=require("@mattermost/compass-icons/components/dots-vertical.js"),O=__O?.default??__O,__L=require("@mattermost/compass-icons/components/download-outline.js"),L=__L?.default??__L,__b=require("@mattermost/compass-icons/components/file-audio-outline-large.js"),b=__b?.default??__b,__C=require("@mattermost/compass-icons/components/file-code-outline-large.js"),C=__C?.default??__C,__z=require("@mattermost/compass-icons/components/file-excel-outline-large.js"),z=__z?.default??__z,__x=require("@mattermost/compass-icons/components/file-generic-outline-large.js"),x=__x?.default??__x,__w=require("@mattermost/compass-icons/components/file-image-outline-large.js"),w=__w?.default??__w,__P=require("@mattermost/compass-icons/components/file-patch-outline-large.js"),P=__P?.default??__P,__E=require("@mattermost/compass-icons/components/file-pdf-outline-large.js"),E=__E?.default??__E,__y=require("@mattermost/compass-icons/components/file-powerpoint-outline-large.js"),y=__y?.default??__y,__D=require("@mattermost/compass-icons/components/file-text-outline-large.js"),D=__D?.default??__D,__M=require("@mattermost/compass-icons/components/file-video-outline-large.js"),M=__M?.default??__M,__k=require("@mattermost/compass-icons/components/file-word-outline-large.js"),k=__k?.default??__k,__A=require("@mattermost/compass-icons/components/file-zip-outline-large.js"),A=__A?.default??__A,i=require("../icon/Icon.cjs"),l=require("../icon-button/IconButton.cjs"),R=require("../tag/Tag.cjs"),a=require("./AttachmentCard.module.scss.cjs"),U={audio:b,code:C,excel:z,generic:x,"image-icon":w,patch:P,pdf:E,powerpoint:y,text:D,video:M,word:k,zip:A},$={audio:"var(--attachment-blue)",code:void 0,excel:"var(--attachment-green)",generic:void 0,"image-icon":"var(--attachment-blue)",patch:void 0,pdf:"var(--attachment-red)",powerpoint:"var(--attachment-orange)",text:void 0,video:"var(--attachment-blue)",word:"var(--attachment-blue)",zip:void 0};function B({className:g="",fileName:_,fileMeta:s,fileType:t="generic",state:n="default",progress:r=0,thumbnailSrc:o,channelTag:d,dateTimeStamp:u,onRemove:j,onDownload:f,onMore:v}){const c=n==="uploading",p=n==="uploaded",m=n==="default",I=m?"":a.default[`attachment-card--${n}`],q=[a.default["attachment-card"],I,g].filter(Boolean).join(" "),F=t!=="image-thumbnail"?U[t]:x,h=t!=="image-thumbnail"?$[t]:void 0;return e.jsxs("div",{className:q,children:[e.jsx("div",{className:a.default["attachment-card__container"],children:e.jsxs("div",{className:a.default["attachment-card__inner"],children:[e.jsxs("div",{className:a.default["attachment-card__left"],children:[t==="image-thumbnail"&&o?e.jsx("img",{src:o,alt:"",className:a.default["attachment-card__thumbnail"]}):e.jsx("div",{className:a.default["attachment-card__icon"],style:h?{color:h}:void 0,children:e.jsx(i.default,{glyph:e.jsx(F,{size:40}),size:"40"})}),e.jsxs("div",{className:a.default["attachment-card__text"],children:[e.jsx("p",{className:a.default["attachment-card__filename"],children:_}),e.jsx("div",{className:a.default["attachment-card__secondary-details"],children:c?e.jsx("span",{className:a.default["attachment-card__uploading-text"],children:`Uploading… (${r}%)`}):e.jsxs(e.Fragment,{children:[d&&e.jsx(R.default,{label:d}),s&&e.jsxs("div",{className:a.default["attachment-card__details"],children:[e.jsx("span",{children:s}),u&&e.jsxs("span",{className:a.default["attachment-card__datetime"],children:[e.jsx("span",{children:"•"}),e.jsx("span",{children:u})]})]})]})})]})]}),e.jsx("div",{className:a.default["attachment-card__right"],children:e.jsxs("div",{className:a.default["attachment-card__actions"],children:[(p||c)&&e.jsx(l.default,{size:"small",icon:e.jsx(i.default,{glyph:e.jsx(N,{}),size:"16"}),"aria-label":c?"Cancel upload":"Remove attachment",onClick:j}),m&&e.jsxs(e.Fragment,{children:[e.jsx(l.default,{size:"small",icon:e.jsx(i.default,{glyph:e.jsx(O,{}),size:"16"}),"aria-label":"More options",onClick:v}),e.jsx(l.default,{size:"small",icon:e.jsx(i.default,{glyph:e.jsx(L,{}),size:"16"}),"aria-label":"Download",onClick:f})]})]})})]})}),c&&e.jsx("div",{className:a.default["attachment-card__progress-bar"],children:e.jsx("div",{className:a.default["attachment-card__progress-fill"],style:{width:`${Math.min(100,Math.max(0,r))}%`}})})]})}exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__P=require("@mattermost/compass-icons/components/close.js"),P=__P?.default??__P,__$=require("@mattermost/compass-icons/components/dots-vertical.js"),$=__$?.default??__$,__E=require("@mattermost/compass-icons/components/download-outline.js"),E=__E?.default??__E,__k=require("@mattermost/compass-icons/components/file-audio-outline-large.js"),k=__k?.default??__k,__D=require("@mattermost/compass-icons/components/file-code-outline-large.js"),D=__D?.default??__D,__M=require("@mattermost/compass-icons/components/file-excel-outline-large.js"),M=__M?.default??__M,__j=require("@mattermost/compass-icons/components/file-generic-outline-large.js"),j=__j?.default??__j,__U=require("@mattermost/compass-icons/components/file-image-outline-large.js"),U=__U?.default??__U,__A=require("@mattermost/compass-icons/components/file-patch-outline-large.js"),A=__A?.default??__A,__R=require("@mattermost/compass-icons/components/file-pdf-outline-large.js"),R=__R?.default??__R,__B=require("@mattermost/compass-icons/components/file-powerpoint-outline-large.js"),B=__B?.default??__B,__S=require("@mattermost/compass-icons/components/file-text-outline-large.js"),S=__S?.default??__S,__V=require("@mattermost/compass-icons/components/file-video-outline-large.js"),V=__V?.default??__V,__Y=require("@mattermost/compass-icons/components/file-word-outline-large.js"),Y=__Y?.default??__Y,__G=require("@mattermost/compass-icons/components/file-zip-outline-large.js"),G=__G?.default??__G,i=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),W=require("../tag/Tag.cjs"),a=require("./AttachmentCard.module.scss.cjs"),Z=t=>`Uploading… (${t}%)`,H=t=>`Open ${t}`,J={audio:k,code:D,excel:M,generic:j,"image-icon":U,patch:A,pdf:R,powerpoint:B,text:S,video:V,word:Y,zip:G},K={audio:"var(--attachment-blue)",code:void 0,excel:"var(--attachment-green)",generic:void 0,"image-icon":"var(--attachment-blue)",patch:void 0,pdf:"var(--attachment-red)",powerpoint:"var(--attachment-orange)",text:void 0,video:"var(--attachment-blue)",word:"var(--attachment-blue)",zip:void 0};function Q({className:t="",fileName:d,fileMeta:o,fileType:n="generic",state:c="default",progress:u=0,thumbnailSrc:m,channelTag:h,dateTimeStamp:x,onOpen:_,onRemove:p,onDownload:v,onMore:I,formatUploadingLabel:q=Z,formatOpenLabel:F=H,cancelUploadLabel:b="Cancel upload",removeLabel:O="Remove attachment",moreLabel:L="More options",downloadLabel:N="Download"}){const l=c==="uploading",C=c==="uploaded",s=c==="default",z=s?"":a.default[`attachment-card--${c}`],w=[a.default["attachment-card"],z,t].filter(Boolean).join(" "),y=n!=="image-thumbnail"?J[n]:j,g=n!=="image-thumbnail"?K[n]:void 0,f=e.jsxs(e.Fragment,{children:[n==="image-thumbnail"&&m?e.jsx("img",{src:m,alt:"",className:a.default["attachment-card__thumbnail"]}):e.jsx("div",{className:a.default["attachment-card__icon"],style:g?{color:g}:void 0,children:e.jsx(i.default,{glyph:e.jsx(y,{size:40}),size:"40"})}),e.jsxs("div",{className:a.default["attachment-card__text"],children:[e.jsx("span",{className:a.default["attachment-card__filename"],children:d}),e.jsx("div",{className:a.default["attachment-card__secondary-details"],children:l?e.jsx("span",{className:a.default["attachment-card__uploading-text"],children:q(u)}):e.jsxs(e.Fragment,{children:[h&&e.jsx(W.default,{label:h}),o&&e.jsxs("div",{className:a.default["attachment-card__details"],children:[e.jsx("span",{children:o}),x&&e.jsxs("span",{className:a.default["attachment-card__datetime"],children:[e.jsx("span",{children:"•"}),e.jsx("span",{children:x})]})]})]})})]})]});return e.jsxs("div",{className:w,children:[e.jsx("div",{className:a.default["attachment-card__container"],children:e.jsxs("div",{className:a.default["attachment-card__inner"],children:[s&&_?e.jsx("button",{type:"button",className:`${a.default["attachment-card__left"]} ${a.default["attachment-card__open"]}`,onClick:_,"aria-label":F(d),children:f}):e.jsx("div",{className:a.default["attachment-card__left"],children:f}),e.jsx("div",{className:a.default["attachment-card__right"],children:e.jsxs("div",{className:a.default["attachment-card__actions"],children:[(C||l)&&e.jsx(r.default,{size:"small",icon:e.jsx(i.default,{glyph:e.jsx(P,{}),size:"16"}),"aria-label":l?b:O,onClick:p}),s&&e.jsxs(e.Fragment,{children:[e.jsx(r.default,{size:"small",icon:e.jsx(i.default,{glyph:e.jsx($,{}),size:"16"}),"aria-label":L,onClick:I}),e.jsx(r.default,{size:"small",icon:e.jsx(i.default,{glyph:e.jsx(E,{}),size:"16"}),"aria-label":N,onClick:v})]})]})})]})}),l&&e.jsx("div",{className:a.default["attachment-card__progress-bar"],children:e.jsx("div",{className:a.default["attachment-card__progress-fill"],style:{width:`${Math.min(100,Math.max(0,u))}%`}})})]})}exports.default=Q;
 //# sourceMappingURL=AttachmentCard.cjs.map