{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/tab-container/index.tsx","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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","sourcesContent":["import focus from '@dojo/framework/core/middleware/focus';\nimport i18n from '@dojo/framework/core/middleware/i18n';\nimport { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';\nimport theme from '../middleware/theme';\nimport { create, tsx } from '@dojo/framework/core/vdom';\nimport Icon from '../icon';\n\nimport bundle from './nls/TabContainer';\nimport { formatAriaProperties, Keys } from '../common/util';\nimport * as css from '../theme/default/tab-container.m.css';\nimport { AriaAttributes } from '@dojo/framework/core/interfaces';\nimport offscreen from '../middleware/offscreen';\n\nexport interface TabItem {\n\tcloseable?: boolean;\n\tdisabled?: boolean;\n\tname: string;\n}\n\nexport interface TabContainerProperties {\n\t/** Orientation of the tab buttons, defaults to top */\n\talignButtons?: 'bottom' | 'top' | 'left' | 'right';\n\t/** callback when a tabs close icon is clicked */\n\tonClose?(index: number): void;\n\t/** Custom aria attributes */\n\taria?: { [key: string]: string | null };\n\t/** initial active tab ID. Defaults to the first tab's ID. */\n\tinitialActiveIndex?: number;\n\t/** controlled active tab ID */\n\tactiveIndex?: number;\n\t/** Callback fired when a tab is changed if `activeTab` is passed */\n\tonActiveIndex?(index: number): void;\n\t/** Tabs config used to display tab buttons */\n\ttabs: TabItem[];\n\t/** If buttons should be fixed width or variable width */\n\tfixed?: boolean;\n}\n\ninterface TabContainerICache {\n\tactiveIndex: number | undefined;\n\thorizontalScrollbarHeight: number | undefined;\n}\n\nconst factory = create({\n\tfocus,\n\ti18n,\n\ticache: createICacheMiddleware<TabContainerICache>(),\n\ttheme,\n\toffscreen\n}).properties<TabContainerProperties>();\n\nexport const TabContainer = factory(function TabContainer({\n\tchildren,\n\tid,\n\tmiddleware: { focus, i18n, icache, theme, offscreen },\n\tproperties\n}) {\n\tconst {\n\t\talignButtons = 'top',\n\t\taria = {},\n\t\tinitialActiveIndex = 0,\n\t\ttabs,\n\t\tonActiveIndex,\n\t\tonClose,\n\t\ttheme: themeProp,\n\t\tclasses,\n\t\tvariant,\n\t\tfixed = true\n\t} = properties();\n\tlet { activeIndex } = properties();\n\n\tconst themeCss = theme.classes(css);\n\tconst { messages } = i18n.localize(bundle);\n\n\tif (activeIndex === undefined) {\n\t\tactiveIndex = icache.getOrSet('activeIndex', initialActiveIndex);\n\t}\n\n\tfunction closeTab(index: number) {\n\t\tonClose && onClose(index);\n\t\tsetActiveIndex(0);\n\t}\n\n\tfunction setActiveIndex(index: number) {\n\t\tfocus.focus();\n\t\tonActiveIndex && onActiveIndex(index);\n\t\ticache.set('activeIndex', index);\n\t}\n\n\tfunction onKeyDown(event: KeyboardEvent, { closeable, disabled }: TabItem, index: number) {\n\t\tevent.stopPropagation();\n\t\tconst total = tabs.length;\n\n\t\tswitch (event.which) {\n\t\t\tcase Keys.Escape:\n\t\t\t\tif (closeable && !disabled) {\n\t\t\t\t\tcloseTab(index);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase Keys.Left:\n\t\t\tcase Keys.Up:\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetActiveIndex((index - 1 + total) % total);\n\t\t\t\tbreak;\n\t\t\tcase Keys.Right:\n\t\t\tcase Keys.Down:\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetActiveIndex((index + 1) % total);\n\t\t\t\tbreak;\n\t\t\tcase Keys.Home:\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetActiveIndex(0);\n\t\t\t\tbreak;\n\t\t\tcase Keys.End:\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetActiveIndex(tabs.length - 1);\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tconst renderTab = (tab: TabItem, index: number) => {\n\t\tconst { closeable, disabled, name } = tab;\n\n\t\tconst active = index === activeIndex;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\taria-controls={`${id}-tab-${index}`}\n\t\t\t\taria-disabled={disabled ? 'true' : 'false'}\n\t\t\t\taria-selected={active ? 'true' : 'false'}\n\t\t\t\tclasses={[\n\t\t\t\t\tthemeCss.tabButton,\n\t\t\t\t\tactive ? themeCss.activeTabButton : null,\n\t\t\t\t\tcloseable ? themeCss.closeable : null,\n\t\t\t\t\tdisabled ? themeCss.disabledTabButton : null\n\t\t\t\t]}\n\t\t\t\tfocus={active ? focus.shouldFocus : () => false}\n\t\t\t\tid={`${id}-tabbutton-${index}`}\n\t\t\t\tkey={`${index}-tabbutton`}\n\t\t\t\tonclick={() => {\n\t\t\t\t\tif (!disabled) {\n\t\t\t\t\t\tsetActiveIndex(index);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonkeydown={(event) => onKeyDown(event, tab, index)}\n\t\t\t\trole=\"tab\"\n\t\t\t\ttabIndex={active ? 0 : -1}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tkey=\"tabButtonContent\"\n\t\t\t\t\tclasses={[themeCss.tabButtonContent, active && themeCss.activeTabButtonLabel]}\n\t\t\t\t>\n\t\t\t\t\t{name}\n\t\t\t\t\t{closeable ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\ttabIndex={active ? 0 : -1}\n\t\t\t\t\t\t\tclasses={themeCss.close}\n\t\t\t\t\t\t\tkey={`${index}-tabbutton-close`}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonclick={(event) => {\n\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\tif (!disabled) {\n\t\t\t\t\t\t\t\t\tcloseTab(index);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ttype=\"closeIcon\"\n\t\t\t\t\t\t\t\taltText={messages.close}\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ttheme={themeProp}\n\t\t\t\t\t\t\t\tclasses={classes}\n\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<span classes={[themeCss.indicator, active && themeCss.indicatorActive]}>\n\t\t\t\t\t\t<span classes={themeCss.indicatorContent} />\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t};\n\n\tconst renderedTabs = tabs.map(renderTab);\n\n\tconst horizontalScrollbarHeight = icache.getOrSet('horizontalScrollbarHeight', () => {\n\t\treturn offscreen(\n\t\t\t() => <div classes={[themeCss.scrollTest]} />,\n\t\t\t(node) => node.offsetHeight - node.clientHeight\n\t\t);\n\t});\n\n\tlet content = [\n\t\tfixed ? (\n\t\t\t<div key=\"buttons\" classes={themeCss.tabButtons}>\n\t\t\t\t{...renderedTabs}\n\t\t\t</div>\n\t\t) : (\n\t\t\t<div\n\t\t\t\tkey=\"scrollArea\"\n\t\t\t\tclasses={[themeCss.scrollArea, themeCss.scroll]}\n\t\t\t\tstyles={{ marginBottom: `${horizontalScrollbarHeight}px` }}\n\t\t\t>\n\t\t\t\t<div key=\"buttons\" classes={[themeCss.tabButtons, themeCss.scrollContent]}>\n\t\t\t\t\t{...renderedTabs}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t),\n\t\t<div key=\"tabs\" classes={themeCss.tabs}>\n\t\t\t{children().map((child, index) => {\n\t\t\t\tconst disabled = tabs[index].disabled;\n\t\t\t\tconst active = activeIndex === index && !disabled;\n\t\t\t\treturn (\n\t\t\t\t\t<div classes={active ? themeCss.tab : undefined} hidden={!active}>\n\t\t\t\t\t\t{child}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t];\n\n\tlet alignClass;\n\tlet orientation: AriaAttributes['aria-orientation'] = 'horizontal';\n\n\tswitch (alignButtons) {\n\t\tcase 'right':\n\t\t\talignClass = themeCss.alignRight;\n\t\t\torientation = 'vertical';\n\t\t\tcontent.reverse();\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\talignClass = themeCss.alignBottom;\n\t\t\tcontent.reverse();\n\t\t\tbreak;\n\t\tcase 'left':\n\t\t\talignClass = themeCss.alignLeft;\n\t\t\torientation = 'vertical';\n\t\t\tbreak;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...formatAriaProperties(aria)}\n\t\t\tkey=\"root\"\n\t\t\taria-orientation={orientation}\n\t\t\tclasses={[\n\t\t\t\ttheme.variant(),\n\t\t\t\talignClass || null,\n\t\t\t\tthemeCss.root,\n\t\t\t\tfixed ? themeCss.fixed : themeCss.scroller\n\t\t\t]}\n\t\t\trole=\"tablist\"\n\t\t>\n\t\t\t{...content}\n\t\t</div>\n\t);\n});\n\nexport default TabContainer;\n"]}