@mattermost/compass-ui 0.1.0-alpha.13 → 0.1.0-alpha.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.js +32 -31
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.js.map +1 -1
- package/dist/components/checkbox/Checkbox.css +1 -1
- package/dist/components/checkbox/Checkbox.module.scss.cjs +1 -1
- package/dist/components/checkbox/Checkbox.module.scss.js +10 -10
- package/dist/components/icon-button/IconButton.css +1 -1
- package/dist/components/icon-button/IconButton.module.scss.cjs +1 -1
- package/dist/components/icon-button/IconButton.module.scss.js +15 -15
- package/dist/components/modal/Modal.cjs +1 -1
- package/dist/components/modal/Modal.cjs.map +1 -1
- package/dist/components/modal/Modal.css +1 -1
- package/dist/components/modal/Modal.d.ts +25 -3
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +105 -68
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/Modal.module.scss.cjs +1 -1
- package/dist/components/modal/Modal.module.scss.js +14 -12
- package/dist/components/modal/Modal.module.scss.js.map +1 -1
- package/dist/components/modal-header/ModalHeader.css +1 -1
- package/dist/components/modal-header/ModalHeader.module.scss.cjs +1 -1
- package/dist/components/modal-header/ModalHeader.module.scss.js +15 -15
- package/dist/components/popover-menu/PopoverMenu.cjs +1 -1
- package/dist/components/popover-menu/PopoverMenu.cjs.map +1 -1
- package/dist/components/popover-menu/PopoverMenu.css +1 -1
- package/dist/components/popover-menu/PopoverMenu.d.ts +9 -1
- package/dist/components/popover-menu/PopoverMenu.d.ts.map +1 -1
- package/dist/components/popover-menu/PopoverMenu.js +39 -28
- package/dist/components/popover-menu/PopoverMenu.js.map +1 -1
- package/dist/components/popover-menu/PopoverMenu.module.scss.cjs +1 -1
- package/dist/components/popover-menu/PopoverMenu.module.scss.js +12 -10
- package/dist/components/popover-menu/PopoverMenu.module.scss.js.map +1 -1
- package/dist/components/radio/Radio.css +1 -1
- package/dist/components/radio/Radio.module.scss.cjs +1 -1
- package/dist/components/radio/Radio.module.scss.js +14 -14
- package/dist/components/switch/Switch.css +1 -1
- package/dist/components/switch/Switch.module.scss.cjs +1 -1
- package/dist/components/switch/Switch.module.scss.js +11 -11
- package/dist/components/tabs/Tabs.cjs +1 -1
- package/dist/components/tabs/Tabs.cjs.map +1 -1
- package/dist/components/tabs/Tabs.css +1 -1
- package/dist/components/tabs/Tabs.d.ts +4 -1
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +41 -35
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/Tabs.module.scss.cjs +1 -1
- package/dist/components/tabs/Tabs.module.scss.js +13 -12
- package/dist/components/tabs/Tabs.module.scss.js.map +1 -1
- package/dist/components/tabs/index.d.ts +1 -1
- package/dist/components/tabs/index.d.ts.map +1 -1
- package/dist/hooks/use-modal-focus.cjs +2 -0
- package/dist/hooks/use-modal-focus.cjs.map +1 -0
- package/dist/hooks/use-modal-focus.d.ts +26 -0
- package/dist/hooks/use-modal-focus.d.ts.map +1 -0
- package/dist/hooks/use-modal-focus.js +91 -0
- package/dist/hooks/use-modal-focus.js.map +1 -0
- package/dist/hooks/use-popover-transition.cjs +1 -1
- package/dist/hooks/use-popover-transition.cjs.map +1 -1
- package/dist/hooks/use-popover-transition.d.ts +6 -4
- package/dist/hooks/use-popover-transition.d.ts.map +1 -1
- package/dist/hooks/use-popover-transition.js +19 -15
- package/dist/hooks/use-popover-transition.js.map +1 -1
- package/dist/utils/duration.cjs +2 -0
- package/dist/utils/duration.cjs.map +1 -0
- package/dist/utils/duration.d.ts +8 -0
- package/dist/utils/duration.d.ts.map +1 -0
- package/dist/utils/duration.js +11 -0
- package/dist/utils/duration.js.map +1 -0
- package/package.json +4 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__M=require("@mattermost/compass-icons/components/globe.js"),M=__M?.default??__M,__S=require("@mattermost/compass-icons/components/lock-outline.js"),S=__S?.default??__S,__P=require("@mattermost/compass-icons/components/message-text-outline.js"),P=__P?.default??__P,__T=require("@mattermost/compass-icons/components/send-outline.js"),T=__T?.default??__T,__$=require("@mattermost/compass-icons/components/chart-line.js"),$=__$?.default??__$,__w=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),w=__w?.default??__w,__A=require("@mattermost/compass-icons/components/phone-in-talk.js"),A=__A?.default??__A,__F=require("@mattermost/compass-icons/components/dots-vertical.js"),F=__F?.default??__F,__G=require("@mattermost/compass-icons/components/dialpad.js"),G=__G?.default??__G,H=require("../user-avatar/UserAvatar.cjs"),R=require("../mention-badge/MentionBadge.cjs"),U=require("../icon/Icon.cjs"),J=require("../icon-button/IconButton.cjs"),s=require("./ChannelSidebarItem.module.scss.cjs"),K=t=>`${t} mention${t===1?"":"s"}`;function L({leadingVisual:t,memberCount:r,avatarSrc:a,showAvatarStatus:n}){switch(t){case"private":return e.jsx(S,{size:16});case"group-message":return e.jsx("div",{className:s.default["channel-sidebar-item__group-icon"],children:r??2});case"direct-message":return e.jsx(H.default,{src:a??"",alt:"",size:"20",status:!!n});case"drafts":return e.jsx(T,{size:16});case"insights":return e.jsx($,{size:16});case"threads":return e.jsx(P,{size:16});case"dial-pad":return e.jsx(G,{size:16});case"public":default:return e.jsx(M,{size:16})}}function Q({className:t,name:r,hideLeadingVisual:a=!1,leadingVisual:n="public",status:d="read",active:c=!1,muted:_=!1,callActive:x=!1,sharedChannel:j=!1,mentionCount:o,memberCount:p,avatarSrc:v,showAvatarStatus:q=!1,customStatusEmoji:u,onClick:N,onMenuClick:l,formatMentionLabel:I=K,unreadLabel:g="unread",menuLabel:z="Channel options"}){const m=!a&&n==="direct-message",h=!a&&n==="drafts",i=h&&d==="unread"?"read":d,C=i==="mention",O=!a&&["public","private","group-message","direct-message"].includes(n),y=[s.default["channel-sidebar-item"],a?s.default["channel-sidebar-item--text-only"]:"",c?s.default["channel-sidebar-item--active"]:"",_?s.default["channel-sidebar-item--muted"]:"",s.default[`channel-sidebar-item--status-${i.toLowerCase()}`],h?s.default["channel-sidebar-item--drafts"]:"",t].filter(Boolean).join(" "),B=[s.default["channel-sidebar-item__icon-container"],m?s.default["channel-sidebar-item__icon-container--dm"]:""].filter(Boolean).join(" "),D=s.default["channel-sidebar-item__right"],f=i==="mention"?I(o??1):i==="unread"?g:void 0;return e.jsxs("div",{className:y,children:[c&&e.jsx("div",{className:s.default["channel-sidebar-item__active-border"]}),e.jsxs("button",{type:"button",className:s.default["channel-sidebar-item__left"],onClick:N,"aria-current":c?!0:void 0,children:[!a&&e.jsx("div",{className:B,"aria-hidden":!0,children:e.jsx(L,{leadingVisual:n,memberCount:p,avatarSrc:v,showAvatarStatus:q})}),e.jsxs("div",{className:s.default["channel-sidebar-item__content"],children:[e.jsx("span",{className:s.default["channel-sidebar-item__name"],children:r}),f&&e.jsx("span",{className:s.default["channel-sidebar-item__status-hint"],children:f}),j&&e.jsx("span",{className:s.default["channel-sidebar-item__shared-icon"],"aria-hidden":!0,children:e.jsx(w,{size:12})}),m&&u&&e.jsx("span",{className:s.default["channel-sidebar-item__custom-status"],"aria-hidden":!0,children:u})]})]}),e.jsxs("div",{className:D,children:[x&&e.jsx("div",{className:s.default["channel-sidebar-item__call"],"aria-hidden":!0,children:e.jsx(A,{size:12})}),C&&e.jsx("span",{className:s.default["channel-sidebar-item__mention-badge"],"aria-hidden":!0,children:e.jsx(R.default,{count:o??1,location:"sidebar",size:"medium"})}),O&&e.jsx("span",{className:s.default["channel-sidebar-item__menu-button"],children:e.jsx(J.default,{className:s.default["channel-sidebar-item__menu-icon"],size:"x-small",style:"inverted",icon:e.jsx(U.default,{glyph:e.jsx(F,{})}),"aria-label":z,onClick:b=>{b.stopPropagation(),l==null||l(b)}})})]})]})}exports.default=Q;
|
|
2
2
|
//# sourceMappingURL=ChannelSidebarItem.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n | 'public'\n | 'private'\n | 'group-message'\n | 'direct-message'\n | 'drafts'\n | 'insights'\n | 'threads'\n | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. Accepts translated nodes. */\n name: ReactNode;\n /**\n * Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n */\n hideLeadingVisual?: boolean;\n /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /** Read/unread/mention state. Default: Read. */\n status?: ChannelSidebarItemStatus;\n /** Highlighted as the currently active item. */\n active?: boolean;\n /** Muted channel — reduces visual prominence. */\n muted?: boolean;\n /** Shows a call-in-progress indicator on the right. */\n callActive?: boolean;\n /** Shows the shared-channel icon after the name. */\n sharedChannel?: boolean;\n /** Mention count shown in the badge when status='mention'. */\n mentionCount?: number;\n /** Member count shown in the group icon when leadingVisual='group-message'. */\n memberCount?: number;\n /** Avatar image URL for leadingVisual='direct-message'. */\n avatarSrc?: string;\n /** Avatar alt text for leadingVisual='direct-message'. */\n avatarAlt?: string;\n /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n showAvatarStatus?: boolean;\n /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n customStatusEmoji?: string;\n onClick?: () => void;\n /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n formatMentionLabel?: (count: number) => ReactNode;\n /** Visually hidden unread hint. Default: \"unread\". */\n unreadLabel?: ReactNode;\n /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number | undefined;\n avatarSrc: string | undefined;\n showAvatarStatus: boolean | undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt=\"\"\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n onMenuClick,\n formatMentionLabel = defaultFormatMentions,\n unreadLabel = 'unread',\n menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n const statusHint =\n effectiveStatus === 'mention'\n ? formatMentionLabel(mentionCount ?? 1)\n : effectiveStatus === 'unread'\n ? unreadLabel\n : undefined;\n\n return (\n <div className={rootClass}>\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <button\n type=\"button\"\n className={styles['channel-sidebar-item__left']}\n onClick={onClick}\n aria-current={active ? true : undefined}\n >\n {!hideLeadingVisual && (\n <div className={iconContainerClass} aria-hidden>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {statusHint && (\n <span className={styles['channel-sidebar-item__status-hint']}>\n {statusHint}\n </span>\n )}\n {sharedChannel && (\n <span\n className={styles['channel-sidebar-item__shared-icon']}\n aria-hidden\n >\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span\n className={styles['channel-sidebar-item__custom-status']}\n aria-hidden\n >\n {customStatusEmoji}\n </span>\n )}\n </div>\n </button>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']} aria-hidden>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span\n className={styles['channel-sidebar-item__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n className={styles['channel-sidebar-item__menu-icon']}\n size=\"x-small\"\n style=\"inverted\"\n icon={<DotsVerticalIcon size={12} />}\n aria-label={menuLabel}\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon","e"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n | 'public'\n | 'private'\n | 'group-message'\n | 'direct-message'\n | 'drafts'\n | 'insights'\n | 'threads'\n | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. Accepts translated nodes. */\n name: ReactNode;\n /**\n * Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n */\n hideLeadingVisual?: boolean;\n /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /** Read/unread/mention state. Default: Read. */\n status?: ChannelSidebarItemStatus;\n /** Highlighted as the currently active item. */\n active?: boolean;\n /** Muted channel — reduces visual prominence. */\n muted?: boolean;\n /** Shows a call-in-progress indicator on the right. */\n callActive?: boolean;\n /** Shows the shared-channel icon after the name. */\n sharedChannel?: boolean;\n /** Mention count shown in the badge when status='mention'. */\n mentionCount?: number;\n /** Member count shown in the group icon when leadingVisual='group-message'. */\n memberCount?: number;\n /** Avatar image URL for leadingVisual='direct-message'. */\n avatarSrc?: string;\n /** Avatar alt text for leadingVisual='direct-message'. */\n avatarAlt?: string;\n /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n showAvatarStatus?: boolean;\n /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n customStatusEmoji?: string;\n onClick?: () => void;\n /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n formatMentionLabel?: (count: number) => ReactNode;\n /** Visually hidden unread hint. Default: \"unread\". */\n unreadLabel?: ReactNode;\n /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number | undefined;\n avatarSrc: string | undefined;\n showAvatarStatus: boolean | undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt=\"\"\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n onMenuClick,\n formatMentionLabel = defaultFormatMentions,\n unreadLabel = 'unread',\n menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n const statusHint =\n effectiveStatus === 'mention'\n ? formatMentionLabel(mentionCount ?? 1)\n : effectiveStatus === 'unread'\n ? unreadLabel\n : undefined;\n\n return (\n <div className={rootClass}>\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <button\n type=\"button\"\n className={styles['channel-sidebar-item__left']}\n onClick={onClick}\n aria-current={active ? true : undefined}\n >\n {!hideLeadingVisual && (\n <div className={iconContainerClass} aria-hidden>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {statusHint && (\n <span className={styles['channel-sidebar-item__status-hint']}>\n {statusHint}\n </span>\n )}\n {sharedChannel && (\n <span\n className={styles['channel-sidebar-item__shared-icon']}\n aria-hidden\n >\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span\n className={styles['channel-sidebar-item__custom-status']}\n aria-hidden\n >\n {customStatusEmoji}\n </span>\n )}\n </div>\n </button>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']} aria-hidden>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span\n className={styles['channel-sidebar-item__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n className={styles['channel-sidebar-item__menu-icon']}\n size=\"x-small\"\n style=\"inverted\"\n icon={<Icon glyph={<DotsVerticalIcon />} />}\n aria-label={menuLabel}\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","Icon","DotsVerticalIcon","e"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBnD,MAAM,MAAM,+BAA+B,GACvC,QAAQ,GACR,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,gDAAgD;IAChD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,IAAI,EACJ,iBAAyB,EACzB,aAAwB,EACxB,MAAe,EACf,MAAc,EACd,KAAa,EACb,UAAkB,EAClB,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,kBAA0C,EAC1C,WAAsB,EACtB,SAA6B,GAC9B,EAAE,uBAAuB,2CAyHzB"}
|
|
@@ -10,14 +10,15 @@ import __H from "@mattermost/compass-icons/components/dots-vertical.js";const H=
|
|
|
10
10
|
import __U from "@mattermost/compass-icons/components/dialpad.js";const U=__U&&__U.default?__U.default:__U;
|
|
11
11
|
import q from "../user-avatar/UserAvatar.js";
|
|
12
12
|
import J from "../mention-badge/MentionBadge.js";
|
|
13
|
-
import K from "../icon
|
|
13
|
+
import K from "../icon/Icon.js";
|
|
14
|
+
import L from "../icon-button/IconButton.js";
|
|
14
15
|
import a from "./ChannelSidebarItem.module.scss.js";
|
|
15
|
-
const
|
|
16
|
-
function
|
|
16
|
+
const Q = (s) => `${s} mention${s === 1 ? "" : "s"}`;
|
|
17
|
+
function R({
|
|
17
18
|
leadingVisual: s,
|
|
18
19
|
memberCount: c,
|
|
19
20
|
avatarSrc: n,
|
|
20
|
-
showAvatarStatus:
|
|
21
|
+
showAvatarStatus: t
|
|
21
22
|
}) {
|
|
22
23
|
switch (s) {
|
|
23
24
|
case "private":
|
|
@@ -31,7 +32,7 @@ function Q({
|
|
|
31
32
|
src: n ?? "",
|
|
32
33
|
alt: "",
|
|
33
34
|
size: "20",
|
|
34
|
-
status: !!
|
|
35
|
+
status: !!t
|
|
35
36
|
}
|
|
36
37
|
);
|
|
37
38
|
case "drafts":
|
|
@@ -47,41 +48,41 @@ function Q({
|
|
|
47
48
|
return /* @__PURE__ */ e(w, { size: 16 });
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
|
-
function
|
|
51
|
+
function oe({
|
|
51
52
|
className: s,
|
|
52
53
|
name: c,
|
|
53
54
|
hideLeadingVisual: n = !1,
|
|
54
|
-
leadingVisual:
|
|
55
|
+
leadingVisual: t = "public",
|
|
55
56
|
status: m = "read",
|
|
56
57
|
active: o = !1,
|
|
57
58
|
muted: _ = !1,
|
|
58
59
|
callActive: N = !1,
|
|
59
60
|
sharedChannel: v = !1,
|
|
60
61
|
mentionCount: d,
|
|
61
|
-
memberCount:
|
|
62
|
-
avatarSrc:
|
|
63
|
-
showAvatarStatus:
|
|
62
|
+
memberCount: I,
|
|
63
|
+
avatarSrc: g,
|
|
64
|
+
showAvatarStatus: z = !1,
|
|
64
65
|
customStatusEmoji: h,
|
|
65
66
|
onClick: C,
|
|
66
67
|
onMenuClick: l,
|
|
67
|
-
formatMentionLabel: x =
|
|
68
|
-
unreadLabel:
|
|
69
|
-
menuLabel:
|
|
68
|
+
formatMentionLabel: x = Q,
|
|
69
|
+
unreadLabel: y = "unread",
|
|
70
|
+
menuLabel: B = "Channel options"
|
|
70
71
|
}) {
|
|
71
|
-
const
|
|
72
|
-
|
|
72
|
+
const p = !n && t === "direct-message", u = !n && t === "drafts", i = u && m === "unread" ? "read" : m, D = i === "mention", O = !n && ["public", "private", "group-message", "direct-message"].includes(
|
|
73
|
+
t
|
|
73
74
|
), j = [
|
|
74
75
|
a["channel-sidebar-item"],
|
|
75
76
|
n ? a["channel-sidebar-item--text-only"] : "",
|
|
76
77
|
o ? a["channel-sidebar-item--active"] : "",
|
|
77
78
|
_ ? a["channel-sidebar-item--muted"] : "",
|
|
78
|
-
a[`channel-sidebar-item--status-${
|
|
79
|
-
|
|
79
|
+
a[`channel-sidebar-item--status-${i.toLowerCase()}`],
|
|
80
|
+
u ? a["channel-sidebar-item--drafts"] : "",
|
|
80
81
|
s
|
|
81
82
|
].filter(Boolean).join(" "), M = [
|
|
82
83
|
a["channel-sidebar-item__icon-container"],
|
|
83
|
-
|
|
84
|
-
].filter(Boolean).join(" "), $ = a["channel-sidebar-item__right"], f =
|
|
84
|
+
p ? a["channel-sidebar-item__icon-container--dm"] : ""
|
|
85
|
+
].filter(Boolean).join(" "), $ = a["channel-sidebar-item__right"], f = i === "mention" ? x(d ?? 1) : i === "unread" ? y : void 0;
|
|
85
86
|
return /* @__PURE__ */ r("div", { className: j, children: [
|
|
86
87
|
o && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__active-border"] }),
|
|
87
88
|
/* @__PURE__ */ r(
|
|
@@ -93,12 +94,12 @@ function re({
|
|
|
93
94
|
"aria-current": o ? !0 : void 0,
|
|
94
95
|
children: [
|
|
95
96
|
!n && /* @__PURE__ */ e("div", { className: M, "aria-hidden": !0, children: /* @__PURE__ */ e(
|
|
96
|
-
|
|
97
|
+
R,
|
|
97
98
|
{
|
|
98
|
-
leadingVisual:
|
|
99
|
-
memberCount:
|
|
100
|
-
avatarSrc:
|
|
101
|
-
showAvatarStatus:
|
|
99
|
+
leadingVisual: t,
|
|
100
|
+
memberCount: I,
|
|
101
|
+
avatarSrc: g,
|
|
102
|
+
showAvatarStatus: z
|
|
102
103
|
}
|
|
103
104
|
) }),
|
|
104
105
|
/* @__PURE__ */ r("div", { className: a["channel-sidebar-item__content"], children: [
|
|
@@ -112,7 +113,7 @@ function re({
|
|
|
112
113
|
children: /* @__PURE__ */ e(F, { size: 12 })
|
|
113
114
|
}
|
|
114
115
|
),
|
|
115
|
-
|
|
116
|
+
p && h && /* @__PURE__ */ e(
|
|
116
117
|
"span",
|
|
117
118
|
{
|
|
118
119
|
className: a["channel-sidebar-item__custom-status"],
|
|
@@ -126,7 +127,7 @@ function re({
|
|
|
126
127
|
),
|
|
127
128
|
/* @__PURE__ */ r("div", { className: $, children: [
|
|
128
129
|
N && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__call"], "aria-hidden": !0, children: /* @__PURE__ */ e(G, { size: 12 }) }),
|
|
129
|
-
|
|
130
|
+
D && /* @__PURE__ */ e(
|
|
130
131
|
"span",
|
|
131
132
|
{
|
|
132
133
|
className: a["channel-sidebar-item__mention-badge"],
|
|
@@ -141,14 +142,14 @@ function re({
|
|
|
141
142
|
)
|
|
142
143
|
}
|
|
143
144
|
),
|
|
144
|
-
|
|
145
|
-
|
|
145
|
+
O && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__menu-button"], children: /* @__PURE__ */ e(
|
|
146
|
+
L,
|
|
146
147
|
{
|
|
147
148
|
className: a["channel-sidebar-item__menu-icon"],
|
|
148
149
|
size: "x-small",
|
|
149
150
|
style: "inverted",
|
|
150
|
-
icon: /* @__PURE__ */ e(
|
|
151
|
-
"aria-label":
|
|
151
|
+
icon: /* @__PURE__ */ e(K, { glyph: /* @__PURE__ */ e(H, {}) }),
|
|
152
|
+
"aria-label": B,
|
|
152
153
|
onClick: (b) => {
|
|
153
154
|
b.stopPropagation(), l == null || l(b);
|
|
154
155
|
}
|
|
@@ -158,6 +159,6 @@ function re({
|
|
|
158
159
|
] });
|
|
159
160
|
}
|
|
160
161
|
export {
|
|
161
|
-
|
|
162
|
+
oe as default
|
|
162
163
|
};
|
|
163
164
|
//# sourceMappingURL=ChannelSidebarItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSidebarItem.js","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n | 'public'\n | 'private'\n | 'group-message'\n | 'direct-message'\n | 'drafts'\n | 'insights'\n | 'threads'\n | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. Accepts translated nodes. */\n name: ReactNode;\n /**\n * Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n */\n hideLeadingVisual?: boolean;\n /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /** Read/unread/mention state. Default: Read. */\n status?: ChannelSidebarItemStatus;\n /** Highlighted as the currently active item. */\n active?: boolean;\n /** Muted channel — reduces visual prominence. */\n muted?: boolean;\n /** Shows a call-in-progress indicator on the right. */\n callActive?: boolean;\n /** Shows the shared-channel icon after the name. */\n sharedChannel?: boolean;\n /** Mention count shown in the badge when status='mention'. */\n mentionCount?: number;\n /** Member count shown in the group icon when leadingVisual='group-message'. */\n memberCount?: number;\n /** Avatar image URL for leadingVisual='direct-message'. */\n avatarSrc?: string;\n /** Avatar alt text for leadingVisual='direct-message'. */\n avatarAlt?: string;\n /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n showAvatarStatus?: boolean;\n /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n customStatusEmoji?: string;\n onClick?: () => void;\n /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n formatMentionLabel?: (count: number) => ReactNode;\n /** Visually hidden unread hint. Default: \"unread\". */\n unreadLabel?: ReactNode;\n /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number | undefined;\n avatarSrc: string | undefined;\n showAvatarStatus: boolean | undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt=\"\"\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n onMenuClick,\n formatMentionLabel = defaultFormatMentions,\n unreadLabel = 'unread',\n menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n const statusHint =\n effectiveStatus === 'mention'\n ? formatMentionLabel(mentionCount ?? 1)\n : effectiveStatus === 'unread'\n ? unreadLabel\n : undefined;\n\n return (\n <div className={rootClass}>\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <button\n type=\"button\"\n className={styles['channel-sidebar-item__left']}\n onClick={onClick}\n aria-current={active ? true : undefined}\n >\n {!hideLeadingVisual && (\n <div className={iconContainerClass} aria-hidden>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {statusHint && (\n <span className={styles['channel-sidebar-item__status-hint']}>\n {statusHint}\n </span>\n )}\n {sharedChannel && (\n <span\n className={styles['channel-sidebar-item__shared-icon']}\n aria-hidden\n >\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span\n className={styles['channel-sidebar-item__custom-status']}\n aria-hidden\n >\n {customStatusEmoji}\n </span>\n )}\n </div>\n </button>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']} aria-hidden>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span\n className={styles['channel-sidebar-item__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n className={styles['channel-sidebar-item__menu-icon']}\n size=\"x-small\"\n style=\"inverted\"\n icon={<DotsVerticalIcon size={12} />}\n aria-label={menuLabel}\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon","e"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChannelSidebarItem.js","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n | 'public'\n | 'private'\n | 'group-message'\n | 'direct-message'\n | 'drafts'\n | 'insights'\n | 'threads'\n | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. Accepts translated nodes. */\n name: ReactNode;\n /**\n * Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n */\n hideLeadingVisual?: boolean;\n /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /** Read/unread/mention state. Default: Read. */\n status?: ChannelSidebarItemStatus;\n /** Highlighted as the currently active item. */\n active?: boolean;\n /** Muted channel — reduces visual prominence. */\n muted?: boolean;\n /** Shows a call-in-progress indicator on the right. */\n callActive?: boolean;\n /** Shows the shared-channel icon after the name. */\n sharedChannel?: boolean;\n /** Mention count shown in the badge when status='mention'. */\n mentionCount?: number;\n /** Member count shown in the group icon when leadingVisual='group-message'. */\n memberCount?: number;\n /** Avatar image URL for leadingVisual='direct-message'. */\n avatarSrc?: string;\n /** Avatar alt text for leadingVisual='direct-message'. */\n avatarAlt?: string;\n /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n showAvatarStatus?: boolean;\n /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n customStatusEmoji?: string;\n onClick?: () => void;\n /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n formatMentionLabel?: (count: number) => ReactNode;\n /** Visually hidden unread hint. Default: \"unread\". */\n unreadLabel?: ReactNode;\n /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number | undefined;\n avatarSrc: string | undefined;\n showAvatarStatus: boolean | undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt=\"\"\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n onMenuClick,\n formatMentionLabel = defaultFormatMentions,\n unreadLabel = 'unread',\n menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n const statusHint =\n effectiveStatus === 'mention'\n ? formatMentionLabel(mentionCount ?? 1)\n : effectiveStatus === 'unread'\n ? unreadLabel\n : undefined;\n\n return (\n <div className={rootClass}>\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <button\n type=\"button\"\n className={styles['channel-sidebar-item__left']}\n onClick={onClick}\n aria-current={active ? true : undefined}\n >\n {!hideLeadingVisual && (\n <div className={iconContainerClass} aria-hidden>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {statusHint && (\n <span className={styles['channel-sidebar-item__status-hint']}>\n {statusHint}\n </span>\n )}\n {sharedChannel && (\n <span\n className={styles['channel-sidebar-item__shared-icon']}\n aria-hidden\n >\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span\n className={styles['channel-sidebar-item__custom-status']}\n aria-hidden\n >\n {customStatusEmoji}\n </span>\n )}\n </div>\n </button>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']} aria-hidden>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span\n className={styles['channel-sidebar-item__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n className={styles['channel-sidebar-item__menu-icon']}\n size=\"x-small\"\n style=\"inverted\"\n icon={<Icon glyph={<DotsVerticalIcon />} />}\n aria-label={menuLabel}\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","Icon","DotsVerticalIcon","e"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes _checkbox-icon-
|
|
1
|
+
@keyframes _checkbox-icon-enter_1rll8_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_1rll8_10{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_1rll8_10:has(._checkbox__input_1rll8_22:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_1rll8_22{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_1rll8_22:focus-visible{outline:none}._checkbox__box_1rll8_41{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._checkbox__input_1rll8_22:focus-visible~._checkbox__box_1rll8_41{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_1rll8_10:has(._checkbox__input_1rll8_22:not(:disabled)):hover ._checkbox__box_1rll8_41{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_1rll8_22:disabled~._checkbox__box_1rll8_41{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_1rll8_22:checked~._checkbox__box_1rll8_41,._checkbox--indeterminate_1rll8_62 ._checkbox__box_1rll8_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1rll8_22:checked~._checkbox__box_1rll8_41 ._checkbox__icon_1rll8_66,._checkbox--indeterminate_1rll8_62 ._checkbox__box_1rll8_41 ._checkbox__icon_1rll8_66{color:var(--button-color)}._checkbox_1rll8_10:has(._checkbox__input_1rll8_22:not(:disabled)):hover ._checkbox__input_1rll8_22:checked~._checkbox__box_1rll8_41,._checkbox_1rll8_10:has(._checkbox__input_1rll8_22:not(:disabled)):hover._checkbox--indeterminate_1rll8_62 ._checkbox__box_1rll8_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1rll8_22:focus-visible:checked~._checkbox__box_1rll8_41,._checkbox--indeterminate_1rll8_62 ._checkbox__input_1rll8_22:focus-visible~._checkbox__box_1rll8_41{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_1rll8_22:disabled:checked~._checkbox__box_1rll8_41,._checkbox--indeterminate_1rll8_62 ._checkbox__input_1rll8_22:disabled~._checkbox__box_1rll8_41{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_1rll8_22:disabled:checked~._checkbox__box_1rll8_41 ._checkbox__icon_1rll8_66,._checkbox--indeterminate_1rll8_62 ._checkbox__input_1rll8_22:disabled~._checkbox__box_1rll8_41 ._checkbox__icon_1rll8_66{color:var(--button-color)}._checkbox--invalid_1rll8_84 ._checkbox__box_1rll8_41{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_1rll8_84 ._checkbox__input_1rll8_22:checked~._checkbox__box_1rll8_41,._checkbox--invalid_1rll8_84._checkbox--indeterminate_1rll8_62 ._checkbox__box_1rll8_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1rll8_84 ._checkbox__input_1rll8_22:checked~._checkbox__box_1rll8_41 ._checkbox__icon_1rll8_66,._checkbox--invalid_1rll8_84._checkbox--indeterminate_1rll8_62 ._checkbox__box_1rll8_41 ._checkbox__icon_1rll8_66{color:var(--button-color)}._checkbox_1rll8_10:has(._checkbox__input_1rll8_22:not(:disabled)):hover._checkbox--invalid_1rll8_84 ._checkbox__input_1rll8_22:checked~._checkbox__box_1rll8_41,._checkbox_1rll8_10:has(._checkbox__input_1rll8_22:not(:disabled)):hover._checkbox--invalid_1rll8_84._checkbox--indeterminate_1rll8_62 ._checkbox__box_1rll8_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1rll8_84 ._checkbox__input_1rll8_22:focus-visible~._checkbox__box_1rll8_41{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_1rll8_84 ._checkbox__input_1rll8_22:focus-visible:checked~._checkbox__box_1rll8_41,._checkbox--invalid_1rll8_84._checkbox--indeterminate_1rll8_62 ._checkbox__input_1rll8_22:focus-visible~._checkbox__box_1rll8_41{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_1rll8_10:has(._checkbox__input_1rll8_22:not(:disabled)):hover._checkbox--invalid_1rll8_84 ._checkbox__input_1rll8_22:not(:checked)~._checkbox__box_1rll8_41{border-color:var(--error-text)}._checkbox__icon_1rll8_66{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_1rll8_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_1rll8_117{line-height:1}._checkbox--size-small_1rll8_120 ._checkbox__input_1rll8_22{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_1rll8_120 ._checkbox__box_1rll8_41{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_1rll8_120 ._checkbox__label_1rll8_117{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_1rll8_135 ._checkbox__input_1rll8_22{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_1rll8_135 ._checkbox__box_1rll8_41{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_1rll8_135 ._checkbox__label_1rll8_117{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_1rll8_150 ._checkbox__input_1rll8_22{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_1rll8_150 ._checkbox__box_1rll8_41{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_1rll8_150 ._checkbox__label_1rll8_117{font-size:var(--font-size-200);line-height:var(--line-height-200)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.css');const c="
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.css');const c="_checkbox_1rll8_10",e="_checkbox__input_1rll8_22",_="_checkbox__box_1rll8_41",o="_checkbox__icon_1rll8_66",l="_checkbox__label_1rll8_117",b={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_1rll8_62",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_1rll8_84","checkbox-icon-enter":"_checkbox-icon-enter_1rll8_1",checkbox__label:l,"checkbox--size-small":"_checkbox--size-small_1rll8_120","checkbox--size-medium":"_checkbox--size-medium_1rll8_135","checkbox--size-large":"_checkbox--size-large_1rll8_150"};exports.checkbox=c;exports.checkbox__box=_;exports.checkbox__icon=o;exports.checkbox__input=e;exports.checkbox__label=l;exports.default=b;
|
|
2
2
|
//# sourceMappingURL=Checkbox.module.scss.cjs.map
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import './Checkbox.css';const c = "
|
|
1
|
+
import './Checkbox.css';const c = "_checkbox_1rll8_10", _ = "_checkbox__input_1rll8_22", e = "_checkbox__box_1rll8_41", o = "_checkbox__icon_1rll8_66", l = "_checkbox__label_1rll8_117", b = {
|
|
2
2
|
checkbox: c,
|
|
3
3
|
checkbox__input: _,
|
|
4
4
|
checkbox__box: e,
|
|
5
|
-
"checkbox--indeterminate": "_checkbox--
|
|
5
|
+
"checkbox--indeterminate": "_checkbox--indeterminate_1rll8_62",
|
|
6
6
|
checkbox__icon: o,
|
|
7
|
-
"checkbox--invalid": "_checkbox--
|
|
8
|
-
"checkbox-icon-enter": "_checkbox-icon-
|
|
9
|
-
checkbox__label:
|
|
10
|
-
"checkbox--size-small": "_checkbox--size-
|
|
11
|
-
"checkbox--size-medium": "_checkbox--size-
|
|
12
|
-
"checkbox--size-large": "_checkbox--size-
|
|
7
|
+
"checkbox--invalid": "_checkbox--invalid_1rll8_84",
|
|
8
|
+
"checkbox-icon-enter": "_checkbox-icon-enter_1rll8_1",
|
|
9
|
+
checkbox__label: l,
|
|
10
|
+
"checkbox--size-small": "_checkbox--size-small_1rll8_120",
|
|
11
|
+
"checkbox--size-medium": "_checkbox--size-medium_1rll8_135",
|
|
12
|
+
"checkbox--size-large": "_checkbox--size-large_1rll8_150"
|
|
13
13
|
};
|
|
14
14
|
export {
|
|
15
15
|
c as checkbox,
|
|
16
16
|
e as checkbox__box,
|
|
17
17
|
o as checkbox__icon,
|
|
18
18
|
_ as checkbox__input,
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
l as checkbox__label,
|
|
20
|
+
b as default
|
|
21
21
|
};
|
|
22
22
|
//# sourceMappingURL=Checkbox.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._icon-
|
|
1
|
+
._icon-button_mytxt_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;color:rgba(var(--center-channel-color-rgb),.64);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_mytxt_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_mytxt_2:disabled{cursor:not-allowed;opacity:.5}._icon-button_mytxt_2:hover:not(:disabled):not(:active):not(._icon-button--active_mytxt_25):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_mytxt_2:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button__icon-slot_mytxt_33{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_mytxt_40{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-pill);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_mytxt_51{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_mytxt_55{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_mytxt_55 ._icon-button__count_mytxt_51{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_mytxt_55._icon-button--padding-compact_mytxt_64{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_mytxt_69{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_mytxt_69 ._icon-button__count_mytxt_51{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_mytxt_69._icon-button--padding-compact_mytxt_64{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_mytxt_83{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_mytxt_83 ._icon-button__count_mytxt_51{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_mytxt_83._icon-button--padding-compact_mytxt_64{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_mytxt_97{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_mytxt_97 ._icon-button__count_mytxt_51{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_mytxt_97._icon-button--padding-compact_mytxt_64{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_mytxt_111{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_mytxt_115{border-radius:var(--radius-pill)}._icon-button--active_mytxt_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--active_mytxt_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--active_mytxt_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--toggled_mytxt_25{background-color:var(--button-bg);color:var(--button-color)}._icon-button--toggled_mytxt_25:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_mytxt_25:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_mytxt_25 ._icon-button__unread-badge_mytxt_40{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_mytxt_145{background-color:transparent;color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_mytxt_145 ._icon-button__unread-badge_mytxt_40{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_mytxt_145:hover:not(:disabled):not(:active):not(._icon-button--toggled_mytxt_25):not(._icon-button--active_mytxt_25){background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--sidebar-text-rgb),.16);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--active_mytxt_25:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--active_mytxt_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.2);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--active_mytxt_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.24);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25:hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);color:var(--sidebar-bg)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88);color:var(--sidebar-bg)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25 ._icon-button__unread-badge_mytxt_40{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--destructive_mytxt_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_mytxt_145._icon-button--destructive_mytxt_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_mytxt_145._icon-button--destructive_mytxt_187:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._icon-button--destructive_mytxt_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--destructive_mytxt_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--destructive_mytxt_187:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_mytxt_2","icon-button--active":"_icon-button--active_mytxt_25","icon-button--toggled":"_icon-button--toggled_mytxt_25","icon-button__icon-slot":"_icon-button__icon-slot_mytxt_33","icon-button__unread-badge":"_icon-button__unread-badge_mytxt_40","icon-button__count":"_icon-button__count_mytxt_51","icon-button--size-x-small":"_icon-button--size-x-small_mytxt_55","icon-button--padding-compact":"_icon-button--padding-compact_mytxt_64","icon-button--size-small":"_icon-button--size-small_mytxt_69","icon-button--size-medium":"_icon-button--size-medium_mytxt_83","icon-button--size-large":"_icon-button--size-large_mytxt_97","icon-button--has-count":"_icon-button--has-count_mytxt_111","icon-button--rounded":"_icon-button--rounded_mytxt_115","icon-button--style-inverted":"_icon-button--style-inverted_mytxt_145","icon-button--destructive":"_icon-button--destructive_mytxt_187"};exports.default=t;
|
|
2
2
|
//# sourceMappingURL=IconButton.module.scss.cjs.map
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import './IconButton.css';const t = {
|
|
2
|
-
"icon-button": "_icon-
|
|
3
|
-
"icon-button--active": "_icon-button--
|
|
4
|
-
"icon-button--toggled": "_icon-button--
|
|
5
|
-
"icon-button__icon-slot": "_icon-button__icon-
|
|
6
|
-
"icon-button__unread-badge": "_icon-button__unread-
|
|
7
|
-
"icon-button__count": "_icon-
|
|
8
|
-
"icon-button--size-x-small": "_icon-button--size-x-
|
|
9
|
-
"icon-button--padding-compact": "_icon-button--padding-
|
|
10
|
-
"icon-button--size-small": "_icon-button--size-
|
|
11
|
-
"icon-button--size-medium": "_icon-button--size-
|
|
12
|
-
"icon-button--size-large": "_icon-button--size-
|
|
13
|
-
"icon-button--has-count": "_icon-button--has-
|
|
14
|
-
"icon-button--rounded": "_icon-button--
|
|
15
|
-
"icon-button--style-inverted": "_icon-button--style-
|
|
16
|
-
"icon-button--destructive": "_icon-button--
|
|
2
|
+
"icon-button": "_icon-button_mytxt_2",
|
|
3
|
+
"icon-button--active": "_icon-button--active_mytxt_25",
|
|
4
|
+
"icon-button--toggled": "_icon-button--toggled_mytxt_25",
|
|
5
|
+
"icon-button__icon-slot": "_icon-button__icon-slot_mytxt_33",
|
|
6
|
+
"icon-button__unread-badge": "_icon-button__unread-badge_mytxt_40",
|
|
7
|
+
"icon-button__count": "_icon-button__count_mytxt_51",
|
|
8
|
+
"icon-button--size-x-small": "_icon-button--size-x-small_mytxt_55",
|
|
9
|
+
"icon-button--padding-compact": "_icon-button--padding-compact_mytxt_64",
|
|
10
|
+
"icon-button--size-small": "_icon-button--size-small_mytxt_69",
|
|
11
|
+
"icon-button--size-medium": "_icon-button--size-medium_mytxt_83",
|
|
12
|
+
"icon-button--size-large": "_icon-button--size-large_mytxt_97",
|
|
13
|
+
"icon-button--has-count": "_icon-button--has-count_mytxt_111",
|
|
14
|
+
"icon-button--rounded": "_icon-button--rounded_mytxt_115",
|
|
15
|
+
"icon-button--style-inverted": "_icon-button--style-inverted_mytxt_145",
|
|
16
|
+
"icon-button--destructive": "_icon-button--destructive_mytxt_187"
|
|
17
17
|
};
|
|
18
18
|
export {
|
|
19
19
|
t as default
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("react"),T=require("../../hooks/use-modal-focus.cjs"),$=require("../../hooks/use-popover-transition.cjs"),A=require("../scrollbar/Scrollbar.cjs"),D=require("../modal-footer/ModalFooter.cjs"),G=require("../modal-header/ModalHeader.cjs"),J=require("../../utils/string.cjs"),e=require("./Modal.module.scss.cjs");function Q({className:s="",style:a,size:i="small",title:r,subtitle:l,subtitlePlacement:c="below",hideTitle:u=!1,showBackButton:t=!1,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,headerDivider:g=!0,headerAction:F,headerSlot:w,bodyPadding:b="default",scrollable:N=!0,children:P,footer:_,footerLeading:v,footerType:f="2-actions",footerDivider:S=!0,closeOnEscape:k=!0,initialFocusRef:p,active:z,transition:j,visible:B,...C}){const M=n.useRef(null);T.useModalFocus(M,{initialFocusRef:p,closeOnEscape:k,onClose:m,active:z});const q=n.useId(),H=e.default[`modal--size-${J.toKebab(i)}`],K=[e.default["modal__body-inner"],b==="menu"&&e.default["modal__body-inner--menu"],b==="none"&&e.default["modal__body-inner--none"]].filter(Boolean).join(" "),h=o.jsx("div",{className:K,children:P}),O=_!=null||v!=null||f==="spacer-small"||f==="spacer-large";return o.jsxs("div",{...C,ref:M,tabIndex:-1,className:[e.default.modal,H,j&&e.default["modal--transition"],j&&B&&e.default["modal--visible"],s].filter(Boolean).join(" "),style:a,role:"dialog","aria-modal":"true","aria-labelledby":q,children:[o.jsx(G.default,{title:r,titleId:q,subtitle:l,subtitlePlacement:c,hideTitle:u,showBackButton:t,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,divider:g,headerAction:F,headerSlot:w}),o.jsx("div",{className:e.default.modal__body,children:N?o.jsx(A.default,{children:h}):h}),O&&o.jsx(D.default,{type:f,divider:S,leading:v,children:_})]})}function U({open:s,onExited:a,...i}){const r=s!==void 0,{mounted:l,visible:c}=$.usePopoverTransition(s??!0),u=n.useRef(l),t=n.useRef(a);return t.current=a,n.useEffect(()=>{var d;u.current&&!l&&r&&((d=t.current)==null||d.call(t)),u.current=l},[l,r]),r&&!l?null:o.jsx(Q,{...i,active:s??!0,transition:r,visible:c})}exports.default=U;
|
|
2
2
|
//# sourceMappingURL=Modal.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'title' | 'children' | 'style'\n> {\n /** Extra class on the dialog root (size + chrome classes still apply). */\n className?: string;\n /** Inline style on the dialog root — prefer `className` for layout overrides. */\n style?: CSSProperties;\n /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n size?: ModalSize;\n /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n title: ReactNode;\n /** Optional secondary line — placement via `subtitlePlacement`. */\n subtitle?: ReactNode;\n /**\n * Where the subtitle sits. Figma Modal Header: Below | Beside.\n * Default: `below`.\n */\n subtitlePlacement?: ModalSubtitlePlacement;\n /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n hideTitle?: boolean;\n /** When true, shows a back-arrow button before the title. */\n showBackButton?: boolean;\n /** Called when the back button is clicked. */\n onBack?: () => void;\n /** Accessible name for the back button. Default: \"Go back\". */\n backLabel?: string;\n /** Extra attributes for the back button (e.g. `data-testid`). */\n backButtonProps?: BuiltInButtonProps;\n /** Called when the × close button is clicked. */\n onClose?: () => void;\n /** Accessible name for the close button. Default: \"Close\". */\n closeLabel?: string;\n /** Extra attributes for the close button (e.g. `data-testid`). */\n closeButtonProps?: BuiltInButtonProps;\n /** Show divider between header and body. Default: true. */\n headerDivider?: boolean;\n /** Optional control before close (Button, search field, …). */\n headerAction?: ReactNode;\n /**\n * Full-width slot rendered below the title row and above the header divider.\n * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n */\n headerSlot?: ReactNode;\n /**\n * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n * MenuItem lists. Use `none` when the host owns padding.\n */\n bodyPadding?: ModalBodyPadding;\n /**\n * When true (default), wraps body content in Scrollbar. Set false when the\n * host manages scroll inside panes.\n */\n scrollable?: boolean;\n /** Body content. */\n children: ReactNode;\n /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n footer?: ReactNode;\n /** Left footer slot (pagination status, PaginationDots, …). */\n footerLeading?: ReactNode;\n /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n footerType?: ModalFooterType;\n /** Show divider between body and footer. Default: true. */\n footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n className = '',\n style,\n size = 'small',\n title,\n subtitle,\n subtitlePlacement = 'below',\n hideTitle = false,\n showBackButton = false,\n onBack,\n backLabel,\n backButtonProps,\n onClose,\n closeLabel,\n closeButtonProps,\n headerDivider = true,\n headerAction,\n headerSlot,\n bodyPadding = 'default',\n scrollable = true,\n children,\n footer,\n footerLeading,\n footerType = '2-actions',\n footerDivider = true,\n ...rest\n}: ModalProps) {\n const titleId = useId();\n const sizeClass = styles[`modal--size-${toKebab(size)}`];\n const bodyInnerClass = [\n styles['modal__body-inner'],\n bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n bodyPadding === 'none' && styles['modal__body-inner--none'],\n ]\n .filter(Boolean)\n .join(' ');\n\n const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n const showFooter =\n footer != null ||\n footerLeading != null ||\n footerType === 'spacer-small' ||\n footerType === 'spacer-large';\n\n return (\n <div\n {...rest}\n className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n style={style}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n >\n <ModalHeader\n title={title}\n titleId={titleId}\n subtitle={subtitle}\n subtitlePlacement={subtitlePlacement}\n hideTitle={hideTitle}\n showBackButton={showBackButton}\n onBack={onBack}\n backLabel={backLabel}\n backButtonProps={backButtonProps}\n onClose={onClose}\n closeLabel={closeLabel}\n closeButtonProps={closeButtonProps}\n divider={headerDivider}\n headerAction={headerAction}\n headerSlot={headerSlot}\n />\n\n <div className={styles['modal__body']}>\n {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n </div>\n\n {showFooter && (\n <ModalFooter\n type={footerType}\n divider={footerDivider}\n leading={footerLeading}\n >\n {footer}\n </ModalFooter>\n )}\n </div>\n );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","rest","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":"6WA4FA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,OAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,WAAAC,EACA,iBAAAC,EACA,cAAAC,EAAgB,GAChB,aAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,UACd,WAAAC,EAAa,GACb,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EAAa,YACb,cAAAC,EAAgB,GAChB,GAAGC,CACL,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQ3B,CAAI,CAAC,EAAE,EACjD4B,EAAiB,CACrBF,EAAAA,QAAO,mBAAmB,EAC1BX,IAAgB,QAAUW,EAAAA,QAAO,yBAAyB,EAC1DX,IAAgB,QAAUW,EAAAA,QAAO,yBAAyB,CAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,EAELG,EAAYC,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAiB,SAAAX,EAAS,EACtDc,EACJb,GAAU,MACVC,GAAiB,MACjBC,IAAe,gBACfA,IAAe,eAEjB,OACEY,EAAAA,KAAC,MAAA,CACE,GAAGV,EACJ,UAAW,CAACI,EAAAA,QAAO,MAAOD,EAAW3B,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACxE,MAAAC,EACA,KAAK,SACL,aAAW,OACX,kBAAiBwB,EAEjB,SAAA,CAAAO,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAAhC,EACA,QAAAsB,EACA,SAAArB,EACA,kBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,OAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,WAAAC,EACA,iBAAAC,EACA,QAASC,EACT,aAAAC,EACA,WAAAC,CAAA,CAAA,EAGFgB,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,YACpB,SAAAV,EAAac,EAAAA,IAACI,EAAAA,QAAA,CAAW,SAAAL,CAAA,CAAU,EAAeA,EACrD,EAECE,GACCD,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAMf,EACN,QAASC,EACT,QAASF,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}
|
|
1
|
+
{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type {\n CSSProperties,\n HTMLAttributes,\n ReactNode,\n RefObject,\n} from 'react';\nimport { useEffect, useId, useRef } from 'react';\nimport { useModalFocus } from '@/hooks/use-modal-focus';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'title' | 'children' | 'style'\n> {\n /** Extra class on the dialog root (size + chrome classes still apply). */\n className?: string;\n /** Inline style on the dialog root — prefer `className` for layout overrides. */\n style?: CSSProperties;\n /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n size?: ModalSize;\n /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n title: ReactNode;\n /** Optional secondary line — placement via `subtitlePlacement`. */\n subtitle?: ReactNode;\n /**\n * Where the subtitle sits. Figma Modal Header: Below | Beside.\n * Default: `below`.\n */\n subtitlePlacement?: ModalSubtitlePlacement;\n /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n hideTitle?: boolean;\n /** When true, shows a back-arrow button before the title. */\n showBackButton?: boolean;\n /** Called when the back button is clicked. */\n onBack?: () => void;\n /** Accessible name for the back button. Default: \"Go back\". */\n backLabel?: string;\n /** Extra attributes for the back button (e.g. `data-testid`). */\n backButtonProps?: BuiltInButtonProps;\n /** Called when the × close button is clicked. */\n onClose?: () => void;\n /** Accessible name for the close button. Default: \"Close\". */\n closeLabel?: string;\n /** Extra attributes for the close button (e.g. `data-testid`). */\n closeButtonProps?: BuiltInButtonProps;\n /** Show divider between header and body. Default: true. */\n headerDivider?: boolean;\n /** Optional control before close (Button, search field, …). */\n headerAction?: ReactNode;\n /**\n * Full-width slot rendered below the title row and above the header divider.\n * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n */\n headerSlot?: ReactNode;\n /**\n * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n * MenuItem lists. Use `none` when the host owns padding.\n */\n bodyPadding?: ModalBodyPadding;\n /**\n * When true (default), wraps body content in Scrollbar. Set false when the\n * host manages scroll inside panes.\n */\n scrollable?: boolean;\n /** Body content. */\n children: ReactNode;\n /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n footer?: ReactNode;\n /** Left footer slot (pagination status, PaginationDots, …). */\n footerLeading?: ReactNode;\n /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n footerType?: ModalFooterType;\n /** Show divider between body and footer. Default: true. */\n footerDivider?: boolean;\n /**\n * Close on Escape via a document listener while mounted. Escapes already\n * handled by an inner widget (`defaultPrevented`) are ignored. Default: true.\n */\n closeOnEscape?: boolean;\n /**\n * Element to focus when the modal mounts (e.g. the first form field).\n * Default: the dialog root.\n */\n initialFocusRef?: RefObject<HTMLElement | null>;\n /**\n * Controlled visibility with the Compass enter/exit transition (fade + drop from the top + subtle scale 98%→100%,\n * reverse on close, `--duration-quick`); the modal unmounts after the exit,\n * and focus is restored then. Omit to keep the mount-controlled behavior\n * (always rendered, no transition). The host still owns the state.\n */\n open?: boolean;\n /** Called after the exit transition finishes and the modal unmounts (only when `open` is controlled). */\n onExited?: () => void;\n}\n\ninterface ModalPanelState {\n active: boolean;\n transition: boolean;\n visible: boolean;\n}\n\nfunction ModalPanel({\n className = '',\n style,\n size = 'small',\n title,\n subtitle,\n subtitlePlacement = 'below',\n hideTitle = false,\n showBackButton = false,\n onBack,\n backLabel,\n backButtonProps,\n onClose,\n closeLabel,\n closeButtonProps,\n headerDivider = true,\n headerAction,\n headerSlot,\n bodyPadding = 'default',\n scrollable = true,\n children,\n footer,\n footerLeading,\n footerType = '2-actions',\n footerDivider = true,\n closeOnEscape = true,\n initialFocusRef,\n active,\n transition,\n visible,\n ...rest\n}: ModalProps & ModalPanelState) {\n const rootRef = useRef<HTMLDivElement>(null);\n useModalFocus(rootRef, {\n initialFocusRef,\n closeOnEscape,\n onClose,\n active,\n });\n const titleId = useId();\n const sizeClass = styles[`modal--size-${toKebab(size)}`];\n const bodyInnerClass = [\n styles['modal__body-inner'],\n bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n bodyPadding === 'none' && styles['modal__body-inner--none'],\n ]\n .filter(Boolean)\n .join(' ');\n\n const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n const showFooter =\n footer != null ||\n footerLeading != null ||\n footerType === 'spacer-small' ||\n footerType === 'spacer-large';\n\n return (\n <div\n {...rest}\n ref={rootRef}\n tabIndex={-1}\n className={[\n styles.modal,\n sizeClass,\n transition && styles['modal--transition'],\n transition && visible && styles['modal--visible'],\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n style={style}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n >\n <ModalHeader\n title={title}\n titleId={titleId}\n subtitle={subtitle}\n subtitlePlacement={subtitlePlacement}\n hideTitle={hideTitle}\n showBackButton={showBackButton}\n onBack={onBack}\n backLabel={backLabel}\n backButtonProps={backButtonProps}\n onClose={onClose}\n closeLabel={closeLabel}\n closeButtonProps={closeButtonProps}\n divider={headerDivider}\n headerAction={headerAction}\n headerSlot={headerSlot}\n />\n\n <div className={styles['modal__body']}>\n {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n </div>\n\n {showFooter && (\n <ModalFooter\n type={footerType}\n divider={footerDivider}\n leading={footerLeading}\n >\n {footer}\n </ModalFooter>\n )}\n </div>\n );\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Owns dialog-level focus and keyboard behavior: initial focus, Tab trap,\n * Escape, and focus restore on unmount. Host owns portal, overlay/backdrop,\n * scroll lock, stacking, and open state. Mount-controlled by default; pass\n * `open` for the enter/exit transition.\n */\nexport default function Modal({ open, onExited, ...props }: ModalProps) {\n const controlled = open !== undefined;\n const { mounted, visible } = usePopoverTransition(open ?? true);\n const wasMounted = useRef(mounted);\n const onExitedRef = useRef(onExited);\n onExitedRef.current = onExited;\n\n useEffect(() => {\n if (wasMounted.current && !mounted && controlled) {\n onExitedRef.current?.();\n }\n wasMounted.current = mounted;\n }, [mounted, controlled]);\n\n if (controlled && !mounted) return null;\n\n return (\n <ModalPanel\n {...props}\n active={open ?? true}\n transition={controlled}\n visible={visible}\n />\n );\n}\n"],"names":["ModalPanel","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","closeOnEscape","initialFocusRef","active","transition","visible","rest","rootRef","useRef","useModalFocus","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter","Modal","open","onExited","props","controlled","mounted","usePopoverTransition","wasMounted","onExitedRef","useEffect","_a"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._modal_14reu_2{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-l);box-shadow:var(--elevation-6);display:flex;flex-direction:column;overflow:hidden}._modal--transition_14reu_11{opacity:0;transform:translateY(calc(-1 * var(--spacing-xxxl))) scale(.98);transform-origin:top center;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}@media(prefers-reduced-motion:reduce){._modal--transition_14reu_11{transform:none;transition:none}}._modal--visible_14reu_24{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}@media(prefers-reduced-motion:reduce){._modal--visible_14reu_24{transition:none}}._modal_14reu_2:focus{outline:none}._modal--size-small_14reu_38{width:600px}._modal--size-medium_14reu_41{width:704px}._modal--size-large_14reu_44{width:832px}._modal__body_14reu_47{flex:1;min-height:0}._modal__body-inner_14reu_51{padding:28px var(--spacing-xxxl)}._modal__body-inner--menu_14reu_54{padding:var(--spacing-xs) var(--spacing-l)}._modal__body-inner--none_14reu_57{padding:0}._modal__body_14reu_47>._modal__body-inner_14reu_51{height:100%}
|