@semcore/tab-line 2.9.0 → 2.9.1
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/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.9.1] - 2022-03-14
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.0 ~> 4.5.1], `@semcore/neighbor-location` [2.3.4 ~> 2.3.5], `@semcore/utils` [3.31.2 ~> 3.31.2]).
|
|
10
|
+
|
|
5
11
|
## [2.9.0] - 2021-03-04
|
|
6
12
|
|
|
7
13
|
### Added
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.jsx"],"names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","ResizeObserver","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","Box","SIndicator","styles","Children","controlsLength","Component","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent =\n tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"file":"TabLine.js"}
|
package/lib/es6/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","neighborLocationEnhance","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent =\n tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"file":"TabLine.js"}
|
package/package.json
CHANGED
|
File without changes
|