@procore/core-react 12.49.1 → 12.50.0
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 +11 -0
- package/dist/AnchorNavigation/AnchorNavigation.styles.js +4 -4
- package/dist/Avatar/Avatar.styles.js +5 -5
- package/dist/AvatarStack/AvatarStack.styles.js +8 -8
- package/dist/Badge/Badge.styles.js +2 -2
- package/dist/BadgePill/BadgePill.styles.js +4 -4
- package/dist/Banner/Banner.styles.js +10 -10
- package/dist/Box/Box.styles.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
- package/dist/Button/Button.styles.js +5 -5
- package/dist/Calendar/Calendar.styles.js +9 -9
- package/dist/Card/Card.styles.js +1 -1
- package/dist/Checkbox/Checkbox.styles.js +6 -6
- package/dist/ContactItem/ContactItem.styles.js +5 -5
- package/dist/Content/Content.styles.js +2 -2
- package/dist/DateInput/DateInput.styles.js +6 -6
- package/dist/DetailPage/DetailPage.d.ts +2 -1
- package/dist/DetailPage/DetailPage.js +11 -10
- package/dist/DetailPage/DetailPage.js.map +1 -1
- package/dist/DetailPage/DetailPage.styles.js +9 -8
- package/dist/DetailPage/DetailPage.styles.js.map +1 -1
- package/dist/DetailPage/DetailPage.types.d.ts +5 -5
- package/dist/DetailPage/DetailPage.types.js.map +1 -1
- package/dist/DetailPageTemplate/DetailPageTemplate.types.d.ts +7 -1
- package/dist/DetailPageTemplate/DetailPageTemplate.types.js.map +1 -1
- package/dist/Dropdown/Dropdown.styles.js +3 -3
- package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
- package/dist/Dropzone/Dropzone.js +1 -1
- package/dist/Dropzone/Dropzone.styles.js +9 -9
- package/dist/EmptyState/EmptyState.styles.js +6 -6
- package/dist/Field/Field.styles.js +3 -3
- package/dist/FileList/FileList.styles.js +3 -3
- package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
- package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
- package/dist/FileSelect/FileSelect.styles.js +2 -2
- package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
- package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
- package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
- package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
- package/dist/FileSelect/SourceItem/SourceItem.d.ts +7 -0
- package/dist/FileSelect/SourceItem/SourceItem.js.map +1 -1
- package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
- package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
- package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
- package/dist/FileToken/FileToken.styles.js +6 -6
- package/dist/FilterToken/FilterToken.styles.js +5 -5
- package/dist/FlexList/FlexList.styles.js +1 -1
- package/dist/Form/Form.styles.js +13 -13
- package/dist/Form/StyledFormikForm.styles.d.ts +2 -2
- package/dist/Form/StyledFormikForm.styles.js +2 -2
- package/dist/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
- package/dist/Grid/Grid.styles.js +2 -2
- package/dist/GroupSelect/GroupSelect.styles.js +1 -1
- package/dist/Input/Input.styles.js +1 -1
- package/dist/Link/Link.styles.js +1 -1
- package/dist/ListPage/ListPage.styles.js +8 -8
- package/dist/Loader/Loader.styles.js +2 -2
- package/dist/MenuImperative/MenuImperative.styles.js +11 -11
- package/dist/Modal/Modal.styles.js +26 -33
- package/dist/Modal/Modal.styles.js.map +1 -1
- package/dist/MultiSelect/MultiSelect.styles.d.ts +1 -1
- package/dist/MultiSelect/MultiSelect.styles.js +8 -8
- package/dist/NextMenu/NextMenu.styles.js +3 -3
- package/dist/NextTile/NextTile.styles.js +5 -5
- package/dist/Notation/Notation.js +1 -1
- package/dist/NumberInput/NumberInput.styles.js +7 -7
- package/dist/Overlay/OverlayArrow.styles.js +1 -1
- package/dist/PageLayout/PageLayout.js +8 -5
- package/dist/PageLayout/PageLayout.js.map +1 -1
- package/dist/PageLayout/PageLayout.styles.js +18 -17
- package/dist/PageLayout/PageLayout.styles.js.map +1 -1
- package/dist/PageLayout/PageLayout.types.d.ts +7 -0
- package/dist/PageLayout/PageLayout.types.js.map +1 -1
- package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
- package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.types.d.ts +5 -0
- package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.types.js.map +1 -1
- package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
- package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
- package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js +3 -3
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Panel/Panel.styles.js +14 -13
- package/dist/Panel/Panel.styles.js.map +1 -1
- package/dist/Pill/Pill.styles.js +3 -3
- package/dist/PillSelect/PillSelect.styles.js +4 -4
- package/dist/Popover/Popover.styles.js +2 -2
- package/dist/Portal/Portal.styles.js +1 -1
- package/dist/ProgressBar/ProgressBar.styles.js +2 -2
- package/dist/RadioButton/RadioButton.styles.js +3 -3
- package/dist/Required/Required.js +1 -0
- package/dist/Required/Required.js.map +1 -1
- package/dist/Required/Required.styles.js +5 -5
- package/dist/Required/Required.styles.js.map +1 -1
- package/dist/Required/Required.types.d.ts +2 -0
- package/dist/Required/Required.types.js.map +1 -1
- package/dist/Search/Search.styles.js +5 -5
- package/dist/Section/Section.styles.js +7 -7
- package/dist/SegmentedController/SegmentedController.styles.js +4 -4
- package/dist/Select/Select.js +4 -3
- package/dist/Select/Select.js.map +1 -1
- package/dist/Select/Select.styles.js +8 -8
- package/dist/Select/Select.types.d.ts +0 -1
- package/dist/Select/Select.types.js.map +1 -1
- package/dist/Semantic/Semantic.styles.js +9 -9
- package/dist/Slider/Slider.styles.js +5 -5
- package/dist/Spinner/Spinner.styles.js +7 -7
- package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.js +40 -40
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.styles.js +29 -29
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tablist.d.ts +11 -0
- package/dist/Tabs/Tablist.js +45 -0
- package/dist/Tabs/Tablist.js.map +1 -0
- package/dist/Tabs/Tablist.types.d.ts +58 -0
- package/dist/Tabs/Tablist.types.js +2 -0
- package/dist/Tabs/Tablist.types.js.map +1 -0
- package/dist/Tabs/Tabs.js +60 -8
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Tabs/Tabs.styles.js +16 -16
- package/dist/Tabs/Tabs.types.d.ts +25 -10
- package/dist/Tabs/Tabs.types.js.map +1 -1
- package/dist/Tabs/index.d.ts +2 -0
- package/dist/Tabs/index.js +1 -0
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tearsheet/Tearsheet.styles.js +5 -5
- package/dist/Tearsheet/storybook/PageLayoutDemo.js +3 -1
- package/dist/Tearsheet/storybook/PageLayoutDemo.js.map +1 -1
- package/dist/TextArea/TextArea.styles.js +1 -1
- package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
- package/dist/Thumbnail/Thumbnail.hooks.d.ts +14 -14
- package/dist/Thumbnail/Thumbnail.styles.js +21 -21
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TieredSelect.styles.js +9 -9
- package/dist/Tile/Tile.styles.js +8 -8
- package/dist/Title/Title.styles.js +7 -7
- package/dist/Toast/Toast.styles.js +3 -3
- package/dist/ToggleButton/ToggleButton.styles.js +1 -1
- package/dist/Token/Token.styles.js +5 -5
- package/dist/ToolHeader/ToolHeader.styles.js +6 -6
- package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
- package/dist/Tooltip/Tooltip.styles.js +3 -3
- package/dist/Tree/Tree.js +1 -1
- package/dist/Tree/Tree.styles.js +10 -10
- package/dist/Typeahead/Typeahead.styles.js +4 -4
- package/dist/Typography/Typography.styles.js +1 -1
- package/dist/Typography/Typography.table.story.js +2 -2
- package/dist/_locales/en.json +1 -1
- package/dist/_locales/pseudo.json +1 -1
- package/dist/_storyHelpers_/components/Deprecation.styles.js +1 -1
- package/dist/_storyHelpers_/components/StoryGrid.js +3 -3
- package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +4 -4
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +25 -25
- package/dist/_typedoc/Badge/Badge.types.json +6 -6
- package/dist/_typedoc/Banner/Banner.types.json +15 -15
- package/dist/_typedoc/Box/Box.types.json +68 -68
- package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
- package/dist/_typedoc/Button/Button.types.json +14 -14
- package/dist/_typedoc/Calendar/Calendar.types.json +80 -80
- package/dist/_typedoc/Card/Card.types.json +6 -6
- package/dist/_typedoc/Checkbox/Checkbox.types.json +8 -8
- package/dist/_typedoc/ContactItem/ContactItem.types.json +9 -9
- package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
- package/dist/_typedoc/DateSelect/DateSelect.types.json +14 -14
- package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
- package/dist/_typedoc/Dropdown/Dropdown.types.json +38 -38
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +31 -31
- package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
- package/dist/_typedoc/EmptyState/EmptyState.types.json +18 -18
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
- package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
- package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
- package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
- package/dist/_typedoc/Flex/Flex.types.json +27 -27
- package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
- package/dist/_typedoc/Form/Form.types.json +770 -770
- package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +54 -54
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +1 -1
- package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
- package/dist/_typedoc/Menu/Menu.types.json +62 -62
- package/dist/_typedoc/MenuImperative/MenuImperative.types.json +84 -84
- package/dist/_typedoc/Modal/Modal.types.json +48 -48
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +33 -33
- package/dist/_typedoc/NextTile/NextTile.types.json +33 -33
- package/dist/_typedoc/Notation/Notation.types.json +4 -4
- package/dist/_typedoc/NumberInput/NumberInput.types.json +52 -52
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +33 -33
- package/dist/_typedoc/PageLayout/PageLayout.types.json +48 -38
- package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
- package/dist/_typedoc/Panel/Panel.types.json +28 -28
- package/dist/_typedoc/Pill/Pill.types.json +2 -2
- package/dist/_typedoc/PillSelect/PillSelect.types.json +49 -49
- package/dist/_typedoc/Popover/Popover.types.json +15 -15
- package/dist/_typedoc/ProgressBar/ProgressBar.types.json +7 -7
- package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
- package/dist/_typedoc/Required/Required.types.json +8 -6
- package/dist/_typedoc/Search/Search.types.json +18 -18
- package/dist/_typedoc/Section/Section.types.json +15 -15
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
- package/dist/_typedoc/Select/Select.types.json +67 -72
- package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
- package/dist/_typedoc/Slider/Slider.types.json +6 -6
- package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
- package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +14 -14
- package/dist/_typedoc/Table/Table.types.json +105 -105
- package/dist/_typedoc/Tabs/Tablist.types.json +17 -0
- package/dist/_typedoc/Tabs/Tabs.types.json +46 -25
- package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
- package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
- package/dist/_typedoc/TextEditor/TextEditor.types.json +11 -11
- package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
- package/dist/_typedoc/Thumbnail/Thumbnail.types.json +19 -19
- package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +43 -43
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +29 -29
- package/dist/_typedoc/Tile/Tile.types.json +8 -8
- package/dist/_typedoc/Title/Title.types.json +1 -1
- package/dist/_typedoc/Toast/Toast.types.json +4 -4
- package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
- package/dist/_typedoc/Token/Token.types.json +7 -7
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
- package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +8 -8
- package/dist/_typedoc/Tooltip/Tooltip.types.json +15 -15
- package/dist/_typedoc/Tree/Tree.types.json +88 -88
- package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
- package/dist/_typedoc/Typography/Typography.types.json +9 -9
- package/dist/_typedoc/_utils/types.json +3 -3
- package/dist/_typedoc/a11y-tips.json +1 -1
- package/dist/_typedoc/deprecations.json +1 -1
- package/dist/_utils/propsTypedoc.d.ts +1 -0
- package/dist/_utils/propsTypedoc.js +1 -0
- package/dist/_utils/propsTypedoc.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tablist.types.js","names":[],"sources":["../../src/Tabs/Tablist.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { TabProps } from './Tabs.types'\n\nexport type TabListProps =\n | {\n /**\n * Accessible name for the tablist when no visible label element is referenced.\n * Provide this OR `aria-labelledby`.\n */\n 'aria-label': string\n 'aria-labelledby'?: never\n /**\n * One or more `TabList.Tab` children that make up the tablist.\n */\n children: React.ReactNode\n }\n | {\n 'aria-label'?: never\n /**\n * @a11y Required - Id reference to visible labeling text for the tablist.\n */\n 'aria-labelledby': string\n /**\n * One or more `TabList.Tab` children that make up the tablist.\n */\n children: React.ReactNode\n }\n\nexport type TabListTabProps = Pick<\n TabProps<'tab'>,\n 'selected' | 'as' | 'href' | 'onPress' | 'onClick'\n> & {\n /**\n * Visible tab label content.\n */\n children: React.ReactNode\n /**\n * @a11y Required shared id used to match this tab to its `TabPanel`.\n * This becomes the tab `aria-controls` property.\n */\n idPanel: string\n}\n\nexport type TabPanelProps =\n | {\n /**\n * Panel content for the associated tab.\n */\n children?: React.ReactNode\n /**\n * @a11y Required shared id that must match the controlling `TabList.Tab idPanel`.\n * Used to derive panel id/label relationships in the tab pattern.\n */\n idPanel: string\n /**\n * Whether this panel is visible. Keep this synchronized with the selected tab state.\n */\n selected?: boolean\n }\n | {\n children?: React.ReactNode\n id: string\n 'aria-labelledby': string\n /**\n * Whether this panel is visible. Keep this synchronized with the selected tab state.\n */\n selected?: boolean\n }\n"],"mappings":""}
|
package/dist/Tabs/Tabs.js
CHANGED
|
@@ -36,6 +36,33 @@ import { getStyledComponents, StyledOverlay, StyledTabList, StyledTabs } from '.
|
|
|
36
36
|
var ExtraTabSpacing = spacing.xxl;
|
|
37
37
|
var HelixHeaderExtraTabSpacing = spacing.sm;
|
|
38
38
|
function noop() {}
|
|
39
|
+
var ROVING_TAB_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
|
|
40
|
+
function moveRovingFocusWithinTablist(event) {
|
|
41
|
+
var key = event.key;
|
|
42
|
+
if (!ROVING_TAB_KEYS.includes(key)) return false;
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
var current = event.currentTarget;
|
|
45
|
+
var tablist = current.closest('[role="tablist"]');
|
|
46
|
+
if (!tablist) return;
|
|
47
|
+
var tabs = Array.from(tablist.querySelectorAll('[role="tab"], button')).filter(function (tab) {
|
|
48
|
+
if (tab.hasAttribute('disabled')) return false;
|
|
49
|
+
var styles = window.getComputedStyle(tab);
|
|
50
|
+
var isHidden = styles.visibility === 'hidden' || styles.pointerEvents === 'none';
|
|
51
|
+
return !isHidden;
|
|
52
|
+
});
|
|
53
|
+
if (!tabs.length) return;
|
|
54
|
+
var currentIndex = tabs.indexOf(current);
|
|
55
|
+
if (currentIndex < 0) return;
|
|
56
|
+
var nextIndex = currentIndex;
|
|
57
|
+
if (key === 'ArrowRight') nextIndex = (currentIndex + 1) % tabs.length;
|
|
58
|
+
if (key === 'ArrowLeft') nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
|
|
59
|
+
if (key === 'Home') nextIndex = 0;
|
|
60
|
+
if (key === 'End') nextIndex = tabs.length - 1;
|
|
61
|
+
var nextTab = tabs[nextIndex];
|
|
62
|
+
current.tabIndex = -1;
|
|
63
|
+
nextTab.tabIndex = 0;
|
|
64
|
+
nextTab.focus();
|
|
65
|
+
}
|
|
39
66
|
export var Link = /*#__PURE__*/React.forwardRef(function Link(_ref, ref) {
|
|
40
67
|
var children = _ref.children,
|
|
41
68
|
_ref$UNSAFE_helixHead = _ref.UNSAFE_helixHeader,
|
|
@@ -91,6 +118,16 @@ function TabInternal(_ref2, ref) {
|
|
|
91
118
|
// The no role check addition allows overrides / opt-out, for like
|
|
92
119
|
// role = presentation or role = link having click handlers for some reason.
|
|
93
120
|
var shouldDefaultToButton = !role && onPress || !role && onClick;
|
|
121
|
+
function onTablistTabKeyDown(event) {
|
|
122
|
+
// props.onKeyDown?.(event)
|
|
123
|
+
if (event.defaultPrevented) return;
|
|
124
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
event.currentTarget.click();
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
moveRovingFocusWithinTablist(event);
|
|
130
|
+
}
|
|
94
131
|
var a11yProps = role === 'button' || shouldDefaultToButton ? _objectSpread(_objectSpread({}, buttonProps), {}, {
|
|
95
132
|
role: 'button',
|
|
96
133
|
'aria-current': selected || active,
|
|
@@ -102,10 +139,16 @@ function TabInternal(_ref2, ref) {
|
|
|
102
139
|
as: as || 'a',
|
|
103
140
|
$clickable: !disabled
|
|
104
141
|
}) : role === 'tab' ? {
|
|
105
|
-
as: as,
|
|
106
142
|
role: 'tab',
|
|
143
|
+
id: props.id,
|
|
144
|
+
'aria-controls': props['aria-controls'],
|
|
145
|
+
'aria-selected': selected || active ? true : false,
|
|
146
|
+
tabIndex: selected || active ? 0 : -1,
|
|
107
147
|
onBlur: onBlur,
|
|
108
|
-
onFocus: onFocus
|
|
148
|
+
onFocus: onFocus,
|
|
149
|
+
onClick: onClick || onPress,
|
|
150
|
+
onKeyDown: onTablistTabKeyDown,
|
|
151
|
+
as: as ? as : props.href ? 'a' : 'button'
|
|
109
152
|
} : {
|
|
110
153
|
as: as,
|
|
111
154
|
role: role,
|
|
@@ -123,7 +166,7 @@ function TabInternal(_ref2, ref) {
|
|
|
123
166
|
|
|
124
167
|
// For button/link roles, spread buttonPropsBase to preserve useButton's onClick
|
|
125
168
|
// For other roles, spread all props
|
|
126
|
-
var roleSpecificProps = role === 'button' || role === 'link' || shouldDefaultToButton ? buttonPropsBase : props;
|
|
169
|
+
var roleSpecificProps = role === 'button' || role === 'link' || shouldDefaultToButton ? buttonPropsBase : role === 'tab' ? props : props;
|
|
127
170
|
return /*#__PURE__*/React.createElement(Styled.Tab, _extends({
|
|
128
171
|
$selected: tabSelected,
|
|
129
172
|
$dark: props.dark,
|
|
@@ -175,7 +218,9 @@ export var MoreMenu = /*#__PURE__*/React.forwardRef(function MoreMenu(_ref4, ref
|
|
|
175
218
|
key: i,
|
|
176
219
|
selected: child.props.selected || child.props.active
|
|
177
220
|
}, /*#__PURE__*/React.cloneElement(child, {
|
|
178
|
-
ref: null
|
|
221
|
+
ref: null,
|
|
222
|
+
tabIndex: 0,
|
|
223
|
+
role: child.props.role === 'tab' ? undefined : child.props.role
|
|
179
224
|
}));
|
|
180
225
|
}
|
|
181
226
|
}))));
|
|
@@ -237,6 +282,13 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
|
|
|
237
282
|
return /*#__PURE__*/React.isValidElement(child) && (child.props.active || child.props.selected);
|
|
238
283
|
});
|
|
239
284
|
var Styled = getStyledComponents(UNSAFE_helixHeader);
|
|
285
|
+
var moreButtonProps = props.role === 'tablist' ? {
|
|
286
|
+
role: 'tab',
|
|
287
|
+
tabIndex: -1,
|
|
288
|
+
onKeyDown: function onMoreKeyDown(event) {
|
|
289
|
+
moveRovingFocusWithinTablist(event);
|
|
290
|
+
}
|
|
291
|
+
} : {};
|
|
240
292
|
var moreDropdownTrigger = cutoffIndex >= 1 ? /*#__PURE__*/React.createElement(OverlayTrigger, {
|
|
241
293
|
"aria-label": i18n.t('core.tabs.more'),
|
|
242
294
|
beforeShow: function beforeShow() {
|
|
@@ -250,12 +302,12 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
|
|
|
250
302
|
overlay: /*#__PURE__*/React.createElement(MoreMenu, null, overflowing),
|
|
251
303
|
ref: ref,
|
|
252
304
|
role: "dialog"
|
|
253
|
-
}, /*#__PURE__*/React.createElement(Styled.DropdownTab, {
|
|
305
|
+
}, /*#__PURE__*/React.createElement(Styled.DropdownTab, _extends({
|
|
254
306
|
$selected: isOverflowingSelected,
|
|
255
307
|
$dark: dark,
|
|
256
308
|
"aria-hidden": !overflowing.length,
|
|
257
309
|
as: "button"
|
|
258
|
-
}, /*#__PURE__*/React.createElement(Styled.DropdownTabInner, {
|
|
310
|
+
}, moreButtonProps), /*#__PURE__*/React.createElement(Styled.DropdownTabInner, {
|
|
259
311
|
$selected: isOverflowingSelected,
|
|
260
312
|
$dark: dark
|
|
261
313
|
}, /*#__PURE__*/React.createElement(Styled.Link, {
|
|
@@ -267,7 +319,7 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
|
|
|
267
319
|
})))) : null;
|
|
268
320
|
return /*#__PURE__*/React.createElement(StyledTabs, _extends({
|
|
269
321
|
ref: ref,
|
|
270
|
-
role:
|
|
322
|
+
role: props.role || 'group',
|
|
271
323
|
$dark: dark,
|
|
272
324
|
$index: cutoffIndex
|
|
273
325
|
}, props), /*#__PURE__*/React.createElement(StyledTabList, {
|
|
@@ -275,7 +327,7 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
|
|
|
275
327
|
ref: containerRef
|
|
276
328
|
}, filtered.map(function (child, i) {
|
|
277
329
|
if ( /*#__PURE__*/React.isValidElement(child)) return /*#__PURE__*/React.cloneElement(child, {
|
|
278
|
-
as: props.role === 'navigation' ? 'li' :
|
|
330
|
+
as: props.role === 'navigation' ? 'li' : child.props.as,
|
|
279
331
|
dark: dark,
|
|
280
332
|
onMount: function onMount(el) {
|
|
281
333
|
setTabElements(function (elements) {
|
package/dist/Tabs/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","names":["CaretDown","CaretUp","React","useButton","MenuImperative","OverlayTrigger","useOverlayTriggerContext","useI18nContext","useResize","spacing","addSubcomponents","getBoundingRect","mergeRefs","getStyledComponents","StyledOverlay","StyledTabList","StyledTabs","ExtraTabSpacing","xxl","HelixHeaderExtraTabSpacing","sm","noop","Link","forwardRef","_ref","ref","children","_ref$UNSAFE_helixHead","UNSAFE_helixHeader","props","_objectWithoutProperties","_excluded","Styled","createElement","_extends","TabInternal","_ref2","as","disabled","role","_ref2$active","active","_ref2$selected","selected","onBlur","onFocus","_ref2$onMount","onMount","_ref2$onUnmount","onUnmount","_ref2$overflowing","overflowing","_ref2$dropdown","dropdown","_ref2$variant","variant","_ref2$UNSAFE_helixHea","_excluded2","_ref3","onPress","onClick","value","buttonPropsBase","_excluded3","elementType","_useButton","_objectSpread","isDisabled","type","buttonProps","shouldDefaultToButton","a11yProps","$clickable","innerRef","useRef","useEffect","current","validChild","isValidElement","tabSelected","roleSpecificProps","Tab","$selected","$dark","dark","TabInner","cloneElement","undefined","MoreMenu","_ref4","id","ctx","menuRef","_menuRef$current","_menuRef$current$el","_menuRef$current2","_menuRef$current3","el","focus","highlightFirst","highlightSelected","onSelect","selection","hide","event","onChangeActiveDescendant","Options","Children","map","child","i","Item","item","key","Tabs_","Tabs","_ref5","className","_ref5$dark","qa","_ref5$UNSAFE_helixHea","_excluded4","i18n","_React$useState","useState","_React$useState2","_slicedToArray","moreMenuIsShown","setMoreMenuIsShown","_React$useState3","_React$useState4","tabElements","setTabElements","_React$useState5","_React$useState6","cutoffIndex","setCutoffIndex","containerRef","recalculate","container","_tabElements$reduce","reduce","acc","rect","extraSpace","subtotals","concat","_toConsumableArray","total","width","Array","index","findIndex","val","onResize","filtered","toArray","filter","slice","isOverflowingSelected","some","moreDropdownTrigger","t","beforeShow","afterHide","trigger","placement","overlay","DropdownTab","length","DropdownTabInner","more","size","$index","elements","oldElements","MoreLi","$helix","displayName"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import { CaretDown, CaretUp } from '@procore/core-icons/dist'\nimport React from 'react'\n\nimport { useButton } from '@react-aria/button'\nimport { MenuImperative } from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n OverlayTrigger,\n useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useResize } from '../_hooks/Resize'\nimport { spacing } from '../_styles/spacing'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { getBoundingRect } from '../_utils/dom'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n getStyledComponents,\n StyledOverlay,\n StyledTabList,\n StyledTabs,\n} from './Tabs.styles'\nimport type {\n BaseTabProps,\n TabDropdownProps,\n TabProps,\n TabRef,\n TabRole,\n TabRoleType,\n TabsProps,\n} from './Tabs.types'\n\nconst ExtraTabSpacing = spacing.xxl\nconst HelixHeaderExtraTabSpacing = spacing.sm\n\nfunction noop() {}\n\nexport const Link = React.forwardRef<\n HTMLSpanElement,\n React.HTMLAttributes<HTMLSpanElement> & {\n /** @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY */\n UNSAFE_helixHeader?: boolean\n }\n>(function Link({ children, UNSAFE_helixHeader = false, ...props }, ref) {\n const Styled = getStyledComponents(UNSAFE_helixHeader)\n\n return (\n <Styled.Link ref={ref} {...props}>\n {children}\n </Styled.Link>\n )\n})\n\nfunction TabInternal(\n {\n as,\n disabled,\n role,\n active = false,\n selected = false,\n children,\n onBlur,\n onFocus,\n onMount = noop,\n onUnmount = noop,\n overflowing = false,\n dropdown = false,\n variant = '',\n UNSAFE_helixHeader = false,\n ...props\n }: TabProps<TabRoleType>,\n ref: TabRef<TabRoleType>\n) {\n const { onPress, onClick, value, ...buttonPropsBase } =\n props as TabProps<'button'>\n\n const elementType =\n role === 'link' ? 'a' : role === 'button' ? 'button' : 'div'\n\n const { buttonProps } = useButton(\n {\n ...buttonPropsBase,\n onBlur: onBlur as (e: React.FocusEvent) => void,\n onFocus: onFocus as (e: React.FocusEvent) => void,\n elementType,\n isDisabled: disabled,\n // @ts-expect-error Type 'PressEvent' is missing properties from type 'MouseEvent<HTMLButtonElement, MouseEvent>', the expected type comes from property 'onPress' which is declared here on type 'AriaButtonOptions<ElementType>'\n onPress: onPress || onClick,\n type: 'button',\n },\n ref as unknown as React.RefObject<HTMLElement>\n )\n\n // See if we should make the component a button if event handlers are given.\n // The no role check addition allows overrides / opt-out, for like\n // role = presentation or role = link having click handlers for some reason.\n const shouldDefaultToButton = (!role && onPress) || (!role && onClick)\n\n const a11yProps =\n role === 'button' || shouldDefaultToButton\n ? {\n ...buttonProps,\n role: 'button',\n 'aria-current': selected || active,\n as: as || 'button',\n $clickable: !disabled,\n }\n : role === 'link'\n ? {\n ...buttonProps,\n role: 'link',\n 'aria-current': selected || active,\n as: as || 'a',\n $clickable: !disabled,\n }\n : role === 'tab'\n ? { as, role: 'tab', onBlur, onFocus }\n : { as, role, onBlur, onFocus }\n\n const innerRef = React.useRef<HTMLDivElement>(null)\n\n React.useEffect(() => {\n onMount(innerRef.current)\n return onUnmount\n }, [])\n\n const validChild = React.isValidElement(children)\n const tabSelected = active || variant === 'active' || selected\n\n const Styled = getStyledComponents(UNSAFE_helixHeader)\n\n // For button/link roles, spread buttonPropsBase to preserve useButton's onClick\n // For other roles, spread all props\n const roleSpecificProps =\n role === 'button' || role === 'link' || shouldDefaultToButton\n ? (buttonPropsBase as Omit<\n TabProps<'button'>,\n 'onPress' | 'onClick' | 'value'\n >)\n : (props as TabProps<TabRoleType>)\n\n return (\n <Styled.Tab\n $selected={tabSelected}\n $dark={props.dark}\n ref={\n mergeRefs(\n (ref || null) as unknown as React.Ref<HTMLDivElement>,\n innerRef\n ) as unknown as React.RefCallback<HTMLDivElement>\n }\n {...(a11yProps as Record<string, unknown>)}\n {...(roleSpecificProps as Record<string, unknown>)}\n >\n <Styled.TabInner $selected={tabSelected} $dark={props.dark}>\n {validChild\n ? React.cloneElement(\n children as React.ReactElement<\n Record<string, unknown>,\n string | React.JSXElementConstructor<unknown>\n >,\n {\n 'aria-current': tabSelected ? true : undefined,\n }\n )\n : children}\n </Styled.TabInner>\n </Styled.Tab>\n )\n}\n\nexport const Tab = React.forwardRef(TabInternal) as <Role extends TabRole>(\n props:\n | TabProps<Role>\n | (BaseTabProps & { ref?: React.ComponentPropsWithRef<'div'>['ref'] })\n) => ReturnType<typeof TabInternal>\n\nexport const MoreMenu = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & TabDropdownProps\n>(function MoreMenu({ children, id, role }, ref) {\n const ctx = useOverlayTriggerContext()\n\n const menuRef = React.useRef<MenuRef | null>(null)\n\n React.useEffect(function () {\n menuRef.current?.el?.focus()\n menuRef.current?.highlightFirst()\n menuRef.current?.highlightSelected()\n }, [])\n\n function onSelect(selection: Selection) {\n ctx.hide(selection.event)\n }\n\n return (\n <StyledOverlay ref={ref}>\n <MenuImperative\n role=\"none\"\n id={id}\n ref={menuRef}\n onSelect={onSelect}\n onChangeActiveDescendant={() => null} // remove arrow keyboard\n >\n <MenuImperative.Options\n aria-label={null}\n // @ts-expect-error - JavaScript, Core-React use only for this specific hacky Tab case\n as=\"ol\"\n role=\"list\" // override MenuImperative forcing roles\n >\n {React.Children.map(children, (child, i) => {\n if (React.isValidElement<BaseTabProps>(child)) {\n return (\n <MenuImperative.Item\n as=\"li\"\n item={null}\n key={i}\n selected={child.props.selected || child.props.active}\n >\n {React.cloneElement(\n child as React.ReactElement<BaseTabProps>,\n {\n ref: null,\n } as Partial<BaseTabProps>\n )}\n </MenuImperative.Item>\n )\n }\n })}\n </MenuImperative.Options>\n </MenuImperative>\n </StyledOverlay>\n )\n})\n\nconst Tabs_ = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & TabsProps\n>(function Tabs(\n {\n children,\n className,\n dark = false,\n qa,\n UNSAFE_helixHeader = false,\n ...props\n },\n ref\n) {\n const i18n = useI18nContext()\n\n const [moreMenuIsShown, setMoreMenuIsShown] = React.useState(false)\n const [tabElements, setTabElements] = React.useState<\n (HTMLDivElement | null)[]\n >([])\n const [cutoffIndex, setCutoffIndex] = React.useState(0)\n\n const containerRef = React.useRef<HTMLDivElement>(null)\n\n function recalculate() {\n const container = getBoundingRect(containerRef.current!)\n\n const { subtotals } = tabElements.reduce(\n (acc, el) => {\n if (!el) {\n return acc\n }\n const rect = getBoundingRect(el)\n const extraSpace = UNSAFE_helixHeader\n ? HelixHeaderExtraTabSpacing\n : ExtraTabSpacing\n return {\n subtotals: [...acc.subtotals, acc.total + rect.width],\n total: acc.total + rect.width + extraSpace,\n }\n },\n { subtotals: new Array(), total: 0 }\n )\n\n const index = subtotals.findIndex((val: number) => val >= container.width)\n\n setCutoffIndex(index)\n }\n\n useResize({ onResize: recalculate })\n\n React.useEffect(recalculate)\n\n const filtered = React.Children.toArray(children).filter((child) => child)\n\n const overflowing = filtered.slice(cutoffIndex - 1)\n\n const isOverflowingSelected = React.Children.toArray(overflowing).some(\n (child) =>\n React.isValidElement(child) &&\n (child.props.active || child.props.selected)\n )\n\n const Styled = getStyledComponents(UNSAFE_helixHeader)\n\n const moreDropdownTrigger =\n cutoffIndex >= 1 ? (\n <OverlayTrigger\n aria-label={i18n.t('core.tabs.more')}\n beforeShow={() => setMoreMenuIsShown(true)}\n afterHide={() => setMoreMenuIsShown(false)}\n trigger=\"click\"\n placement=\"bottom-right\"\n overlay={<MoreMenu>{overflowing}</MoreMenu>}\n ref={ref}\n role=\"dialog\"\n >\n <Styled.DropdownTab\n $selected={isOverflowingSelected}\n $dark={dark}\n aria-hidden={!overflowing.length}\n as=\"button\"\n >\n <Styled.DropdownTabInner\n $selected={isOverflowingSelected}\n $dark={dark}\n >\n <Styled.Link data-qa={qa?.more}>\n {i18n.t('core.tabs.more')}\n </Styled.Link>\n {moreMenuIsShown ? <CaretUp size=\"sm\" /> : <CaretDown size=\"sm\" />}\n </Styled.DropdownTabInner>\n </Styled.DropdownTab>\n </OverlayTrigger>\n ) : null\n\n return (\n <StyledTabs\n ref={ref}\n role=\"group\"\n $dark={dark}\n $index={cutoffIndex}\n {...props}\n >\n <StyledTabList\n as={props.role === 'navigation' ? 'ul' : 'div'}\n ref={containerRef}\n >\n {filtered.map((child, i) => {\n if (React.isValidElement(child))\n return React.cloneElement(\n child as React.ReactElement<\n BaseTabProps & {\n as?: React.ElementType\n dark?: boolean\n onMount?: (el: HTMLDivElement | null) => void\n onUnmount?: () => void\n }\n >,\n {\n as: props.role === 'navigation' ? 'li' : undefined,\n dark,\n onMount: (el: HTMLDivElement | null) => {\n setTabElements((elements) => {\n const oldElements = [...elements]\n oldElements[i] = el\n return oldElements\n })\n },\n onUnmount: () => {\n setTabElements((elements) => {\n const oldElements = [...elements]\n oldElements[i] = null\n return oldElements\n })\n },\n }\n )\n })}\n\n {props.role === 'navigation' && moreDropdownTrigger ? (\n <Styled.MoreLi $helix={UNSAFE_helixHeader}>\n {moreDropdownTrigger}\n </Styled.MoreLi>\n ) : (\n moreDropdownTrigger\n )}\n </StyledTabList>\n </StyledTabs>\n )\n})\n\nTabs_.displayName = 'Tabs'\n\nLink.displayName = 'Tabs.Link'\n\n// @ts-ignore\nTab.displayName = 'Tabs.Tab'\n\n/**\n\n We use tabs to navigate between different, but related content.\n Tabs are commonly used on tool landing pages and on item detail pages.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-tabs--demo)\n\n @see [Design Guidelines](https://design.procore.com/tabs)\n\n */\nexport const Tabs = addSubcomponents(\n {\n Link,\n Tab,\n },\n Tabs_\n)\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.js","names":["CaretDown","CaretUp","React","useButton","MenuImperative","OverlayTrigger","useOverlayTriggerContext","useI18nContext","useResize","spacing","addSubcomponents","getBoundingRect","mergeRefs","getStyledComponents","StyledOverlay","StyledTabList","StyledTabs","ExtraTabSpacing","xxl","HelixHeaderExtraTabSpacing","sm","noop","ROVING_TAB_KEYS","moveRovingFocusWithinTablist","event","key","includes","preventDefault","current","currentTarget","tablist","closest","tabs","Array","from","querySelectorAll","filter","tab","hasAttribute","styles","window","getComputedStyle","isHidden","visibility","pointerEvents","length","currentIndex","indexOf","nextIndex","nextTab","tabIndex","focus","Link","forwardRef","_ref","ref","children","_ref$UNSAFE_helixHead","UNSAFE_helixHeader","props","_objectWithoutProperties","_excluded","Styled","createElement","_extends","TabInternal","_ref2","as","disabled","role","_ref2$active","active","_ref2$selected","selected","onBlur","onFocus","_ref2$onMount","onMount","_ref2$onUnmount","onUnmount","_ref2$overflowing","overflowing","_ref2$dropdown","dropdown","_ref2$variant","variant","_ref2$UNSAFE_helixHea","_excluded2","_ref3","onPress","onClick","value","buttonPropsBase","_excluded3","elementType","_useButton","_objectSpread","isDisabled","type","buttonProps","shouldDefaultToButton","onTablistTabKeyDown","defaultPrevented","click","a11yProps","$clickable","id","onKeyDown","href","innerRef","useRef","useEffect","validChild","isValidElement","tabSelected","roleSpecificProps","Tab","$selected","$dark","dark","TabInner","cloneElement","undefined","MoreMenu","_ref4","ctx","menuRef","_menuRef$current","_menuRef$current$el","_menuRef$current2","_menuRef$current3","el","highlightFirst","highlightSelected","onSelect","selection","hide","onChangeActiveDescendant","Options","Children","map","child","i","Item","item","Tabs_","Tabs","_ref5","className","_ref5$dark","qa","_ref5$UNSAFE_helixHea","_excluded4","i18n","_React$useState","useState","_React$useState2","_slicedToArray","moreMenuIsShown","setMoreMenuIsShown","_React$useState3","_React$useState4","tabElements","setTabElements","_React$useState5","_React$useState6","cutoffIndex","setCutoffIndex","containerRef","recalculate","container","_tabElements$reduce","reduce","acc","rect","extraSpace","subtotals","concat","_toConsumableArray","total","width","index","findIndex","val","onResize","filtered","toArray","slice","isOverflowingSelected","some","moreButtonProps","onMoreKeyDown","moreDropdownTrigger","t","beforeShow","afterHide","trigger","placement","overlay","DropdownTab","DropdownTabInner","more","size","$index","elements","oldElements","MoreLi","$helix","displayName"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import { CaretDown, CaretUp } from '@procore/core-icons/dist'\nimport React from 'react'\n\nimport { useButton } from '@react-aria/button'\nimport { MenuImperative } from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n OverlayTrigger,\n useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useResize } from '../_hooks/Resize'\nimport { spacing } from '../_styles/spacing'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { getBoundingRect } from '../_utils/dom'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n getStyledComponents,\n StyledOverlay,\n StyledTabList,\n StyledTabs,\n} from './Tabs.styles'\nimport type {\n BaseTabProps,\n TabDropdownProps,\n TabProps,\n TabRef,\n TabRole,\n TabRoleType,\n TabsProps,\n} from './Tabs.types'\n\nconst ExtraTabSpacing = spacing.xxl\nconst HelixHeaderExtraTabSpacing = spacing.sm\n\nfunction noop() {}\nconst ROVING_TAB_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'] as const\n\nfunction moveRovingFocusWithinTablist(event: React.KeyboardEvent<HTMLElement>) {\n const key = event.key\n if (!ROVING_TAB_KEYS.includes(key as (typeof ROVING_TAB_KEYS)[number]))\n return false\n\n event.preventDefault()\n const current = event.currentTarget\n const tablist = current.closest('[role=\"tablist\"]')\n if (!tablist) return\n\n const tabs = Array.from(\n tablist.querySelectorAll<HTMLElement>('[role=\"tab\"], button')\n ).filter((tab) => {\n if (tab.hasAttribute('disabled')) return false\n\n const styles = window.getComputedStyle(tab)\n const isHidden =\n styles.visibility === 'hidden' || styles.pointerEvents === 'none'\n\n return !isHidden\n })\n if (!tabs.length) return\n\n const currentIndex = tabs.indexOf(current)\n if (currentIndex < 0) return\n\n let nextIndex = currentIndex\n if (key === 'ArrowRight') nextIndex = (currentIndex + 1) % tabs.length\n if (key === 'ArrowLeft')\n nextIndex = (currentIndex - 1 + tabs.length) % tabs.length\n if (key === 'Home') nextIndex = 0\n if (key === 'End') nextIndex = tabs.length - 1\n\n const nextTab = tabs[nextIndex]\n current.tabIndex = -1\n nextTab.tabIndex = 0\n nextTab.focus()\n}\n\nexport const Link = React.forwardRef<\n HTMLSpanElement,\n React.HTMLAttributes<HTMLSpanElement> & {\n /** @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY */\n UNSAFE_helixHeader?: boolean\n }\n>(function Link({ children, UNSAFE_helixHeader = false, ...props }, ref) {\n const Styled = getStyledComponents(UNSAFE_helixHeader)\n\n return (\n <Styled.Link ref={ref} {...props}>\n {children}\n </Styled.Link>\n )\n})\n\nfunction TabInternal(\n {\n as,\n disabled,\n role,\n active = false,\n selected = false,\n children,\n onBlur,\n onFocus,\n onMount = noop,\n onUnmount = noop,\n overflowing = false,\n dropdown = false,\n variant = '',\n UNSAFE_helixHeader = false,\n ...props\n }: TabProps<TabRoleType>,\n ref: TabRef<TabRoleType>\n) {\n const { onPress, onClick, value, ...buttonPropsBase } =\n props as TabProps<'button'>\n\n const elementType =\n role === 'link' ? 'a' : role === 'button' ? 'button' : 'div'\n\n const { buttonProps } = useButton(\n {\n ...buttonPropsBase,\n onBlur: onBlur as (e: React.FocusEvent) => void,\n onFocus: onFocus as (e: React.FocusEvent) => void,\n elementType,\n isDisabled: disabled,\n // @ts-expect-error Type 'PressEvent' is missing properties from type 'MouseEvent<HTMLButtonElement, MouseEvent>', the expected type comes from property 'onPress' which is declared here on type 'AriaButtonOptions<ElementType>'\n onPress: onPress || onClick,\n type: 'button',\n },\n ref as unknown as React.RefObject<HTMLElement>\n )\n\n // See if we should make the component a button if event handlers are given.\n // The no role check addition allows overrides / opt-out, for like\n // role = presentation or role = link having click handlers for some reason.\n const shouldDefaultToButton = (!role && onPress) || (!role && onClick)\n\n function onTablistTabKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n // props.onKeyDown?.(event)\n if (event.defaultPrevented) return\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n ;(event.currentTarget as HTMLElement).click()\n return\n }\n\n moveRovingFocusWithinTablist(event as React.KeyboardEvent<HTMLElement>)\n }\n\n const a11yProps =\n role === 'button' || shouldDefaultToButton\n ? {\n ...buttonProps,\n role: 'button',\n 'aria-current': selected || active,\n as: as || 'button',\n $clickable: !disabled,\n }\n : role === 'link'\n ? {\n ...buttonProps,\n role: 'link',\n 'aria-current': selected || active,\n as: as || 'a',\n $clickable: !disabled,\n }\n : role === 'tab'\n ? {\n role: 'tab',\n id: props.id,\n 'aria-controls': props['aria-controls'],\n 'aria-selected': selected || active ? true : false,\n tabIndex: selected || active ? 0 : -1,\n onBlur,\n onFocus,\n onClick: onClick || onPress,\n onKeyDown: onTablistTabKeyDown,\n as: as ? as : (props as TabProps<'link'>).href ? 'a' : 'button',\n }\n : { as, role, onBlur, onFocus }\n\n const innerRef = React.useRef<HTMLDivElement>(null)\n\n React.useEffect(() => {\n onMount(innerRef.current)\n return onUnmount\n }, [])\n\n const validChild = React.isValidElement(children)\n const tabSelected = active || variant === 'active' || selected\n\n const Styled = getStyledComponents(UNSAFE_helixHeader)\n\n // For button/link roles, spread buttonPropsBase to preserve useButton's onClick\n // For other roles, spread all props\n const roleSpecificProps =\n role === 'button' || role === 'link' || shouldDefaultToButton\n ? (buttonPropsBase as Omit<\n TabProps<'button'>,\n 'onPress' | 'onClick' | 'value'\n >)\n : role === 'tab'\n ? (props as TabProps<'tab'>)\n : (props as TabProps<TabRoleType>)\n\n return (\n <Styled.Tab\n $selected={tabSelected}\n $dark={props.dark}\n ref={\n mergeRefs(\n (ref || null) as unknown as React.Ref<HTMLDivElement>,\n innerRef\n ) as unknown as React.RefCallback<HTMLDivElement>\n }\n {...(a11yProps as Record<string, unknown>)}\n {...(roleSpecificProps as Record<string, unknown>)}\n >\n <Styled.TabInner $selected={tabSelected} $dark={props.dark}>\n {validChild\n ? React.cloneElement(\n children as React.ReactElement<\n Record<string, unknown>,\n string | React.JSXElementConstructor<unknown>\n >,\n {\n 'aria-current': tabSelected ? true : undefined,\n }\n )\n : children}\n </Styled.TabInner>\n </Styled.Tab>\n )\n}\n\nexport const Tab = React.forwardRef(TabInternal) as <Role extends TabRole>(\n props:\n | TabProps<Role>\n | (BaseTabProps & { ref?: React.ComponentPropsWithRef<'div'>['ref'] })\n) => ReturnType<typeof TabInternal>\n\nexport const MoreMenu = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & TabDropdownProps\n>(function MoreMenu({ children, id, role }, ref) {\n const ctx = useOverlayTriggerContext()\n\n const menuRef = React.useRef<MenuRef | null>(null)\n\n React.useEffect(function () {\n menuRef.current?.el?.focus()\n menuRef.current?.highlightFirst()\n menuRef.current?.highlightSelected()\n }, [])\n\n function onSelect(selection: Selection) {\n ctx.hide(selection.event)\n }\n\n return (\n <StyledOverlay ref={ref}>\n <MenuImperative\n role=\"none\"\n id={id}\n ref={menuRef}\n onSelect={onSelect}\n onChangeActiveDescendant={() => null} // remove arrow keyboard\n >\n <MenuImperative.Options\n aria-label={null}\n // @ts-expect-error - JavaScript, Core-React use only for this specific hacky Tab case\n as=\"ol\"\n role=\"list\" // override MenuImperative forcing roles\n >\n {React.Children.map(children, (child, i) => {\n if (React.isValidElement<BaseTabProps>(child)) {\n return (\n <MenuImperative.Item\n as=\"li\"\n item={null}\n key={i}\n selected={child.props.selected || child.props.active}\n >\n {React.cloneElement(\n child as React.ReactElement<BaseTabProps>,\n {\n ref: null,\n tabIndex: 0,\n role:\n child.props.role === 'tab'\n ? undefined\n : child.props.role,\n } as Partial<BaseTabProps>\n )}\n </MenuImperative.Item>\n )\n }\n })}\n </MenuImperative.Options>\n </MenuImperative>\n </StyledOverlay>\n )\n})\n\nconst Tabs_ = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & TabsProps\n>(function Tabs(\n {\n children,\n className,\n dark = false,\n qa,\n UNSAFE_helixHeader = false,\n ...props\n },\n ref\n) {\n const i18n = useI18nContext()\n\n const [moreMenuIsShown, setMoreMenuIsShown] = React.useState(false)\n const [tabElements, setTabElements] = React.useState<\n (HTMLDivElement | null)[]\n >([])\n const [cutoffIndex, setCutoffIndex] = React.useState(0)\n\n const containerRef = React.useRef<HTMLDivElement>(null)\n\n function recalculate() {\n const container = getBoundingRect(containerRef.current!)\n\n const { subtotals } = tabElements.reduce(\n (acc, el) => {\n if (!el) {\n return acc\n }\n const rect = getBoundingRect(el)\n const extraSpace = UNSAFE_helixHeader\n ? HelixHeaderExtraTabSpacing\n : ExtraTabSpacing\n return {\n subtotals: [...acc.subtotals, acc.total + rect.width],\n total: acc.total + rect.width + extraSpace,\n }\n },\n { subtotals: new Array(), total: 0 }\n )\n\n const index = subtotals.findIndex((val: number) => val >= container.width)\n\n setCutoffIndex(index)\n }\n\n useResize({ onResize: recalculate })\n\n React.useEffect(recalculate)\n\n const filtered = React.Children.toArray(children).filter((child) => child)\n const overflowing = filtered.slice(cutoffIndex - 1)\n\n const isOverflowingSelected = React.Children.toArray(overflowing).some(\n (child) =>\n React.isValidElement(child) &&\n (child.props.active || child.props.selected)\n )\n\n const Styled = getStyledComponents(UNSAFE_helixHeader)\n\n const moreButtonProps =\n props.role === 'tablist'\n ? {\n role: 'tab',\n tabIndex: -1,\n onKeyDown: function onMoreKeyDown(\n event: React.KeyboardEvent<HTMLButtonElement>\n ) {\n moveRovingFocusWithinTablist(event)\n },\n }\n : {}\n const moreDropdownTrigger =\n cutoffIndex >= 1 ? (\n <OverlayTrigger\n aria-label={i18n.t('core.tabs.more')}\n beforeShow={() => setMoreMenuIsShown(true)}\n afterHide={() => setMoreMenuIsShown(false)}\n trigger=\"click\"\n placement=\"bottom-right\"\n overlay={<MoreMenu>{overflowing}</MoreMenu>}\n ref={ref}\n role=\"dialog\"\n >\n <Styled.DropdownTab\n $selected={isOverflowingSelected}\n $dark={dark}\n aria-hidden={!overflowing.length}\n as=\"button\"\n {...moreButtonProps}\n >\n <Styled.DropdownTabInner\n $selected={isOverflowingSelected}\n $dark={dark}\n >\n <Styled.Link data-qa={qa?.more}>\n {i18n.t('core.tabs.more')}\n </Styled.Link>\n {moreMenuIsShown ? <CaretUp size=\"sm\" /> : <CaretDown size=\"sm\" />}\n </Styled.DropdownTabInner>\n </Styled.DropdownTab>\n </OverlayTrigger>\n ) : null\n\n return (\n <StyledTabs\n ref={ref}\n role={props.role || 'group'}\n $dark={dark}\n $index={cutoffIndex}\n {...props}\n >\n <StyledTabList\n as={props.role === 'navigation' ? 'ul' : 'div'}\n ref={containerRef}\n >\n {filtered.map((child, i) => {\n if (React.isValidElement(child))\n return React.cloneElement(\n child as React.ReactElement<\n BaseTabProps & {\n as?: React.ElementType\n dark?: boolean\n onMount?: (el: HTMLDivElement | null) => void\n onUnmount?: () => void\n }\n >,\n {\n as: props.role === 'navigation' ? 'li' : child.props.as,\n dark,\n onMount: (el: HTMLDivElement | null) => {\n setTabElements((elements) => {\n const oldElements = [...elements]\n oldElements[i] = el\n return oldElements\n })\n },\n onUnmount: () => {\n setTabElements((elements) => {\n const oldElements = [...elements]\n oldElements[i] = null\n return oldElements\n })\n },\n }\n )\n })}\n\n {props.role === 'navigation' && moreDropdownTrigger ? (\n <Styled.MoreLi $helix={UNSAFE_helixHeader}>\n {moreDropdownTrigger}\n </Styled.MoreLi>\n ) : (\n moreDropdownTrigger\n )}\n </StyledTabList>\n </StyledTabs>\n )\n})\n\nTabs_.displayName = 'Tabs'\n\nLink.displayName = 'Tabs.Link'\n\n// @ts-ignore\nTab.displayName = 'Tabs.Tab'\n\n/**\n\n We use tabs to navigate between different, but related content.\n Tabs are commonly used on tool landing pages and on item detail pages.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-tabs--demo)\n\n @see [Design Guidelines](https://design.procore.com/tabs)\n\n */\nexport const Tabs = addSubcomponents(\n {\n Link,\n Tab,\n },\n Tabs_\n)\n"],"mappings":"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"}
|
package/dist/Tabs/Tabs.styles.js
CHANGED
|
@@ -17,17 +17,17 @@ var borderRadius = /*#__PURE__*/css(["border-radius:", "px ", "px 0 0;"], spacin
|
|
|
17
17
|
*/
|
|
18
18
|
var StyledTabBase = /*#__PURE__*/styled.div.withConfig({
|
|
19
19
|
displayName: "StyledTabBase",
|
|
20
|
-
componentId: "core-
|
|
20
|
+
componentId: "core-12_50_0__sc-17s58xs-0"
|
|
21
21
|
})(["align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;position:relative;white-space:nowrap;text-decoration:none;background-color:transparent;border:none;font-family:inherit;padding:0;"]);
|
|
22
22
|
var StyledTabInnerBase = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledTabInnerBase",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_50_0__sc-17s58xs-1"
|
|
25
25
|
})(["align-self:baseline;box-sizing:border-box;&,> a{display:flex;text-decoration:none;width:100%;}"]);
|
|
26
26
|
|
|
27
27
|
// This so that it can be visible/hidden via CSS down below
|
|
28
28
|
var StyledDropdownTabBase = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
29
29
|
displayName: "StyledDropdownTabBase",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_50_0__sc-17s58xs-2"
|
|
31
31
|
})(["", ""], hiddenTab);
|
|
32
32
|
|
|
33
33
|
//// END BASE LAYOUT COMPONENTS FOR TABS ////
|
|
@@ -50,11 +50,11 @@ function getTabStyle() {
|
|
|
50
50
|
}
|
|
51
51
|
var StyledTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
52
52
|
displayName: "StyledTab",
|
|
53
|
-
componentId: "core-
|
|
53
|
+
componentId: "core-12_50_0__sc-17s58xs-3"
|
|
54
54
|
})(["", ""], getTabStyle);
|
|
55
55
|
var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
56
56
|
displayName: "StyledTabInner",
|
|
57
|
-
componentId: "core-
|
|
57
|
+
componentId: "core-12_50_0__sc-17s58xs-4"
|
|
58
58
|
})(["", " padding:0 ", "px;font-weight:", ";&,> a{", ";color:", ";height:23px;}& a:focus-visible{outline:2px solid ", ";outline-offset:-1px;border-radius:", "px;}", ""], getTypographyIntent('body'), spacing.xs, function (_ref3) {
|
|
59
59
|
var $selected = _ref3.$selected;
|
|
60
60
|
return $selected ? 600 : 400;
|
|
@@ -67,15 +67,15 @@ var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
|
67
67
|
});
|
|
68
68
|
var StyledDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
|
|
69
69
|
displayName: "StyledDropdownTab",
|
|
70
|
-
componentId: "core-
|
|
70
|
+
componentId: "core-12_50_0__sc-17s58xs-5"
|
|
71
71
|
})(["", ""], getTabStyle);
|
|
72
72
|
var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
|
|
73
73
|
displayName: "StyledDropdownTabInner",
|
|
74
|
-
componentId: "core-
|
|
74
|
+
componentId: "core-12_50_0__sc-17s58xs-6"
|
|
75
75
|
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
|
|
76
76
|
var StyledLink = /*#__PURE__*/styled.span.withConfig({
|
|
77
77
|
displayName: "StyledLink",
|
|
78
|
-
componentId: "core-
|
|
78
|
+
componentId: "core-12_50_0__sc-17s58xs-7"
|
|
79
79
|
})(["align-items:center;display:flex;height:23px;", ";box-sizing:border-box;"], borderRadius);
|
|
80
80
|
|
|
81
81
|
//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////
|
|
@@ -92,34 +92,34 @@ function getHelixHeaderTabStyles() {
|
|
|
92
92
|
}
|
|
93
93
|
var StyledGlobalNavigationTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
94
94
|
displayName: "StyledGlobalNavigationTab",
|
|
95
|
-
componentId: "core-
|
|
95
|
+
componentId: "core-12_50_0__sc-17s58xs-8"
|
|
96
96
|
})(["", ""], getHelixHeaderTabStyles);
|
|
97
97
|
var StyledGlobalNavigationDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
|
|
98
98
|
displayName: "StyledGlobalNavigationDropdownTab",
|
|
99
|
-
componentId: "core-
|
|
99
|
+
componentId: "core-12_50_0__sc-17s58xs-9"
|
|
100
100
|
})(["", ""], getHelixHeaderTabStyles);
|
|
101
101
|
var StyledGlobalNavigationDropdownTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
102
102
|
displayName: "StyledGlobalNavigationDropdownTabInner",
|
|
103
|
-
componentId: "core-
|
|
103
|
+
componentId: "core-12_50_0__sc-17s58xs-10"
|
|
104
104
|
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
|
|
105
105
|
var StyledGlobalNavigationLink = /*#__PURE__*/styled.span.withConfig({
|
|
106
106
|
displayName: "StyledGlobalNavigationLink",
|
|
107
|
-
componentId: "core-
|
|
107
|
+
componentId: "core-12_50_0__sc-17s58xs-11"
|
|
108
108
|
})(["padding-left:6px;padding-right:6px;"]);
|
|
109
109
|
|
|
110
110
|
//// END HELIX GLOBAL NAVIGATION TAB STYLES ////
|
|
111
111
|
|
|
112
112
|
export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
|
|
113
113
|
displayName: "StyledOverlay",
|
|
114
|
-
componentId: "core-
|
|
114
|
+
componentId: "core-12_50_0__sc-17s58xs-12"
|
|
115
115
|
})(["max-height:40vh;", "{padding:0;display:flex;justify-content:center;a{color:unset;margin:unset;padding:unset;&:focus-visible{outline-offset:1px;}}}", "{padding:0;display:flex;}", "{padding:2px 16px 4px 16px;}", ",", "{color:", ";border-radius:0;display:flex;width:100%;background:inherit;font-weight:inherit;font-size:inherit;padding:0;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInnerBase, StyledLink, StyledTabBase, colors.gray15, StyledLink, StyledTabBase, colors.blue50);
|
|
116
116
|
export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
|
|
117
117
|
displayName: "StyledTabList",
|
|
118
|
-
componentId: "core-
|
|
118
|
+
componentId: "core-12_50_0__sc-17s58xs-13"
|
|
119
119
|
})(["display:flex;list-style:none;margin:0;padding:0;width:100%;"]);
|
|
120
120
|
export var StyledTabs = /*#__PURE__*/styled.div.withConfig({
|
|
121
121
|
displayName: "StyledTabs",
|
|
122
|
-
componentId: "core-
|
|
122
|
+
componentId: "core-12_50_0__sc-17s58xs-14"
|
|
123
123
|
})(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref6) {
|
|
124
124
|
var $dark = _ref6.$dark;
|
|
125
125
|
return $dark && colors.gray15;
|
|
@@ -133,7 +133,7 @@ export var StyledTabs = /*#__PURE__*/styled.div.withConfig({
|
|
|
133
133
|
});
|
|
134
134
|
var StyledMoreLi = /*#__PURE__*/styled.li.withConfig({
|
|
135
135
|
displayName: "StyledMoreLi",
|
|
136
|
-
componentId: "core-
|
|
136
|
+
componentId: "core-12_50_0__sc-17s58xs-15"
|
|
137
137
|
})(["", ""], function (_ref9) {
|
|
138
138
|
var $helix = _ref9.$helix;
|
|
139
139
|
return $helix ? css(["margin-left:", "px;"], spacing.sm) : css(["margin-left:", "px;"], spacing.xl);
|
|
@@ -2,16 +2,23 @@ import type { AriaButtonProps } from '@react-aria/button';
|
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { Polymorphic } from '../_utils/polymorphic';
|
|
4
4
|
import type { Props } from '../_utils/types';
|
|
5
|
-
export declare type TabRoleType = 'link' | 'button';
|
|
5
|
+
export declare type TabRoleType = 'link' | 'button' | 'tab';
|
|
6
6
|
export interface TabPolyMap extends Record<TabRoleType, React.ElementType> {
|
|
7
7
|
button: 'button';
|
|
8
8
|
link: 'a';
|
|
9
|
+
tab: 'div';
|
|
9
10
|
}
|
|
10
11
|
export declare type TabRole = TabRoleType | undefined;
|
|
11
|
-
export declare type TabRef<Role extends TabRole = undefined> = Role extends
|
|
12
|
+
export declare type TabRef<Role extends TabRole = undefined> = Role extends 'tab' ? React.ComponentPropsWithRef<'div'>['ref'] : Role extends 'button' | 'link' ? Polymorphic.Ref<TabPolyMap, Role> : React.ComponentPropsWithRef<'div'>['ref'];
|
|
12
13
|
export declare type TabProps<Role extends TabRole = undefined> = Role extends 'link' ? Polymorphic.ComponentPropsWithRef<TabPolyMap, 'link', 'href', BaseTabProps> : Role extends 'button' ? Polymorphic.ComponentPropsWithRef<TabPolyMap, 'button', never, BaseTabProps & {
|
|
13
14
|
onPress: AriaButtonProps['onPress'];
|
|
14
|
-
}> : BaseTabProps & {
|
|
15
|
+
}> : Role extends 'tab' ? BaseTabProps & {
|
|
16
|
+
'aria-controls': string;
|
|
17
|
+
as?: React.ElementType;
|
|
18
|
+
href?: string;
|
|
19
|
+
onPress?: AriaButtonProps['onPress'];
|
|
20
|
+
ref?: React.ComponentPropsWithRef<'a'>['ref'] | React.ComponentPropsWithRef<'button'>['ref'];
|
|
21
|
+
} & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'id' | 'aria-selected' | 'onBlur' | 'onFocus' | 'onClick'> : BaseTabProps & {
|
|
15
22
|
ref?: TabRef<undefined>;
|
|
16
23
|
};
|
|
17
24
|
export declare const tabVariant: {
|
|
@@ -106,16 +113,24 @@ export interface TabsProps extends Props {
|
|
|
106
113
|
/**
|
|
107
114
|
* @since 12.36.0
|
|
108
115
|
*
|
|
116
|
+
* @param role The role of the tabs component.
|
|
117
|
+
* @default undefined
|
|
109
118
|
* Can specify as a `navigational` element for when tabs are links.
|
|
110
|
-
* @a11y
|
|
111
|
-
*
|
|
112
|
-
*
|
|
113
|
-
*
|
|
114
|
-
*
|
|
119
|
+
* @a11y Roles require a label.
|
|
120
|
+
* 1) Default - Undefined. A group of links or buttons.
|
|
121
|
+
* 2) Prefer - Use `tablist` with aria-label or aria-labelledby for the WCAG tab pattern.
|
|
122
|
+
* 3) Low Change - Navigation tabs are less likely, they must be links and
|
|
123
|
+
* are used for larger navigation changes like global navigation.
|
|
124
|
+
* Context and heading 1 will be drastically different.
|
|
115
125
|
*
|
|
116
|
-
*
|
|
126
|
+
* __Do not mix tab patterns__, only use one at a time.
|
|
127
|
+
*/
|
|
128
|
+
role?: 'tablist' | 'navigation';
|
|
129
|
+
'aria-label'?: string;
|
|
130
|
+
/**
|
|
131
|
+
* @a11y Required for role="tablist"
|
|
117
132
|
*/
|
|
118
|
-
|
|
133
|
+
'aria-labelledby'?: string;
|
|
119
134
|
/**
|
|
120
135
|
* @since 10.19.0
|
|
121
136
|
* @deprecated Custom styles intended for the global navigation header.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.types.js","names":["tabVariant","none","active","dark","dropdown","hover","overflowing"],"sources":["../../src/Tabs/Tabs.types.ts"],"sourcesContent":["import type { AriaButtonProps } from '@react-aria/button'\nimport type React from 'react'\nimport type { Polymorphic } from '../_utils/polymorphic'\nimport type { Props } from '../_utils/types'\n\nexport type TabRoleType = 'link' | 'button'\n\nexport interface TabPolyMap extends Record<TabRoleType, React.ElementType> {\n button: 'button'\n link: 'a'\n}\n\nexport type TabRole = TabRoleType | undefined\n\nexport type TabRef<Role extends TabRole = undefined> = Role extends
|
|
1
|
+
{"version":3,"file":"Tabs.types.js","names":["tabVariant","none","active","dark","dropdown","hover","overflowing"],"sources":["../../src/Tabs/Tabs.types.ts"],"sourcesContent":["import type { AriaButtonProps } from '@react-aria/button'\nimport type React from 'react'\nimport type { Polymorphic } from '../_utils/polymorphic'\nimport type { Props } from '../_utils/types'\n\nexport type TabRoleType = 'link' | 'button' | 'tab'\n\nexport interface TabPolyMap extends Record<TabRoleType, React.ElementType> {\n button: 'button'\n link: 'a'\n tab: 'div'\n}\n\nexport type TabRole = TabRoleType | undefined\n\nexport type TabRef<Role extends TabRole = undefined> = Role extends 'tab'\n ? React.ComponentPropsWithRef<'div'>['ref']\n : Role extends 'button' | 'link'\n ? Polymorphic.Ref<TabPolyMap, Role>\n : React.ComponentPropsWithRef<'div'>['ref']\n\nexport type TabProps<Role extends TabRole = undefined> = Role extends 'link'\n ? Polymorphic.ComponentPropsWithRef<TabPolyMap, 'link', 'href', BaseTabProps>\n : Role extends 'button'\n ? Polymorphic.ComponentPropsWithRef<\n TabPolyMap,\n 'button',\n never,\n BaseTabProps & { onPress: AriaButtonProps['onPress'] }\n >\n : Role extends 'tab'\n ? BaseTabProps & {\n 'aria-controls': string\n as?: React.ElementType\n href?: string\n onPress?: AriaButtonProps['onPress']\n ref?:\n | React.ComponentPropsWithRef<'a'>['ref']\n | React.ComponentPropsWithRef<'button'>['ref']\n } & Pick<\n React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n 'id' | 'aria-selected' | 'onBlur' | 'onFocus' | 'onClick'\n >\n : BaseTabProps & { ref?: TabRef<undefined> }\n\nexport const tabVariant = {\n none: '',\n active: 'active',\n dark: 'dark',\n dropdown: 'dropdown',\n hover: 'hover',\n overflowing: 'overflowing',\n} as const\n\ntype TabVariant = (typeof tabVariant)[keyof typeof tabVariant]\n\nexport interface BaseTabProps extends Props {\n /**\n * The tab is active\n * @since 10.19.0\n * @deprecated Please use `selected` instead\n * @deprecatedSince 12.18.0\n */\n active?: boolean\n\n /**\n * The tab is selected\n * @since 12.18.0\n */\n selected?: boolean\n /**\n * Whether or not tab is in dark mode\n * @private\n * @since 10.19.0\n * @deprecated Custom styles intended for the global navigation header.\n * Future Core-React will look holistically at themes and dark mode support.\n *\n * AFTER - Regular Tab styles. If needing dark support, please reach out.\n * @deprecatedSince 12.8.0\n */\n dark?: boolean\n\n /**\n * @private\n * @since 10.19.0\n */\n onMount?: (el: HTMLDivElement | null) => void\n\n /**\n * @private\n */\n onUnmount?: () => void\n\n /**\n * @deprecated This was never intended to be a public facing API and does not\n * do anything. It will be removed in the future.\n * @deprecatedSince 11\n * @since 10.19.0\n */\n dropdown?: boolean\n\n /**\n * @deprecated This was never intended to be a public facing API and does not\n * do anything. It will be removed in the future.\n * @deprecatedSince 11\n * @since 10.19.0\n */\n overflowing?: boolean\n\n /**\n * @deprecated please use the `selected` props to configure style. The\n * `dropdown`, `hover`, and `overflowing` variants were only for internal use\n * and should not be used in clients\n * @deprecatedSince 11\n * @since 10.19.0\n */\n variant?: TabVariant\n /**\n * @since 11.6.0\n */\n disabled?: boolean\n /**\n * Sets the Tab's role\n * @since 11.6.0\n */\n role?: TabRole\n /**\n * Tab styles specific to the global navigation header.\n * @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY\n * @since 12.8.0\n */\n UNSAFE_helixHeader?: boolean\n}\n\nexport interface TabsTabProps extends BaseTabProps {}\n\nexport interface QaTags {\n /**\n * @since 10.19.0\n */\n more?: string\n}\n\nexport interface TabsProps extends Props {\n /**\n * @since 12.36.0\n *\n * @param role The role of the tabs component.\n * @default undefined\n * Can specify as a `navigational` element for when tabs are links.\n * @a11y Roles require a label.\n * 1) Default - Undefined. A group of links or buttons.\n * 2) Prefer - Use `tablist` with aria-label or aria-labelledby for the WCAG tab pattern.\n * 3) Low Change - Navigation tabs are less likely, they must be links and\n * are used for larger navigation changes like global navigation.\n * Context and heading 1 will be drastically different.\n *\n * __Do not mix tab patterns__, only use one at a time.\n */\n role?: 'tablist' | 'navigation'\n 'aria-label'?: string\n /**\n * @a11y Required for role=\"tablist\"\n */\n 'aria-labelledby'?: string\n /**\n * @since 10.19.0\n * @deprecated Custom styles intended for the global navigation header.\n * Future Core-React will look holistically at themes and dark mode support.\n *\n * AFTER - Regular Tab styles. If needing dark support, please reach out.\n * @deprecatedSince 12.8.0\n */\n dark?: boolean\n /**\n * @since 10.19.0\n */\n qa?: QaTags\n /**\n * Tab styles specific to the global navigation header.\n * @deprecated @experimental Alternative style variant. To be used on Helix Header ONLY\n * @since 12.8.0\n */\n UNSAFE_helixHeader?: boolean\n}\n\nexport interface TabDropdownProps extends Props {\n role?: 'list'\n /**\n * @since 10.19.0\n */\n visible?: boolean\n /**\n * @since 10.19.0\n */\n qa?: QaTags\n}\n"],"mappings":"AA6CA,OAAO,IAAMA,UAAU,GAAG;EACxBC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,QAAQ;EAChBC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,OAAO;EACdC,WAAW,EAAE;AACf,CAAU"}
|
package/dist/Tabs/index.d.ts
CHANGED
package/dist/Tabs/index.js
CHANGED
package/dist/Tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Tabs"],"sources":["../../src/Tabs/index.ts"],"sourcesContent":["export { Tabs } from './Tabs'\nexport type { TabsProps, TabsTabProps } from './Tabs.types'\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,QAAQ"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["TabList","TabPanel","Tabs"],"sources":["../../src/Tabs/index.ts"],"sourcesContent":["export { TabList, TabPanel } from './Tablist'\nexport type {\n TabListProps,\n TabListTabProps,\n TabPanelProps,\n} from './Tablist.types'\nexport { Tabs } from './Tabs'\nexport type { TabsProps, TabsTabProps } from './Tabs.types'\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,QAAQ,QAAQ,WAAW;AAM7C,SAASC,IAAI,QAAQ,QAAQ"}
|
|
@@ -46,7 +46,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
|
|
|
46
46
|
};
|
|
47
47
|
export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
|
|
48
48
|
displayName: "StyledTearsheetContent",
|
|
49
|
-
componentId: "core-
|
|
49
|
+
componentId: "core-12_50_0__sc-ljrxoq-0"
|
|
50
50
|
})(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
|
|
51
51
|
var $open = _ref.$open,
|
|
52
52
|
$placement = _ref.$placement;
|
|
@@ -66,7 +66,7 @@ export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
|
|
|
66
66
|
export var minScrimSize = spacing.xxl * 3;
|
|
67
67
|
export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
|
|
68
68
|
displayName: "StyledTearsheetBody",
|
|
69
|
-
componentId: "core-
|
|
69
|
+
componentId: "core-12_50_0__sc-ljrxoq-1"
|
|
70
70
|
})(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";&:focus-visible{", "}", ""], colors.white, getGapOutlineFocus('inside'), function (_ref5) {
|
|
71
71
|
var $block = _ref5.$block,
|
|
72
72
|
$placement = _ref5.$placement,
|
|
@@ -78,7 +78,7 @@ var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scal
|
|
|
78
78
|
var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
|
|
79
79
|
export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
|
|
80
80
|
displayName: "StyledScrimContainer",
|
|
81
|
-
componentId: "core-
|
|
81
|
+
componentId: "core-12_50_0__sc-ljrxoq-2"
|
|
82
82
|
})(["", ""], function (_ref6) {
|
|
83
83
|
var $placement = _ref6.$placement;
|
|
84
84
|
var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
|
|
@@ -86,7 +86,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
86
86
|
});
|
|
87
87
|
export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
|
|
88
88
|
displayName: "StyledButtonContainer",
|
|
89
|
-
componentId: "core-
|
|
89
|
+
componentId: "core-12_50_0__sc-ljrxoq-3"
|
|
90
90
|
})(["", ""], function (_ref7) {
|
|
91
91
|
var $placement = _ref7.$placement;
|
|
92
92
|
switch ($placement) {
|
|
@@ -101,7 +101,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
101
101
|
});
|
|
102
102
|
export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
|
|
103
103
|
displayName: "StyledButtonCard",
|
|
104
|
-
componentId: "core-
|
|
104
|
+
componentId: "core-12_50_0__sc-ljrxoq-4"
|
|
105
105
|
})(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref8) {
|
|
106
106
|
var $open = _ref8.$open;
|
|
107
107
|
return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);
|
|
@@ -101,7 +101,9 @@ export var PageLayoutDemo = /*#__PURE__*/React.forwardRef(function PageLayoutDem
|
|
|
101
101
|
id: "page-title"
|
|
102
102
|
}, "Page Title")), /*#__PURE__*/React.createElement(Page.Tabs, null, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
|
|
103
103
|
active: true
|
|
104
|
-
}, /*#__PURE__*/React.createElement(Tabs.Link, null, "Active")), /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tabs.Link, null, "Second")), /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tabs.Link, null, "Third")), /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tabs.Link, null, "Fourth"))))), /*#__PURE__*/React.createElement(Page.Body, null, /*#__PURE__*/React.createElement(
|
|
104
|
+
}, /*#__PURE__*/React.createElement(Tabs.Link, null, "Active")), /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tabs.Link, null, "Second")), /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tabs.Link, null, "Third")), /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tabs.Link, null, "Fourth"))))), /*#__PURE__*/React.createElement(Page.Body, null, /*#__PURE__*/React.createElement(Required, {
|
|
105
|
+
showLabel: true
|
|
106
|
+
}), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Box, {
|
|
105
107
|
padding: "md"
|
|
106
108
|
}, /*#__PURE__*/React.createElement(SuperSelect, {
|
|
107
109
|
placeholder: "Select",
|