@procore/core-react 12.17.4 → 12.17.5
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/AnchorNavigation/AnchorNavigation.styles.js +3 -3
- package/dist/Avatar/Avatar.styles.js +5 -5
- package/dist/AvatarStack/AvatarStack.styles.js +7 -7
- package/dist/Badge/Badge.styles.js +2 -2
- 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 +8 -8
- package/dist/Card/Card.styles.js +1 -1
- package/dist/Checkbox/Checkbox.styles.js +6 -6
- package/dist/Checkbox/CheckboxTooltip.js +1 -1
- 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.styles.js +7 -7
- package/dist/Dropdown/Dropdown.js +1 -1
- package/dist/Dropdown/Dropdown.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 +4 -4
- 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.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 +4 -4
- package/dist/FilterToken/FilterToken.styles.js +2 -2
- package/dist/FlexList/FlexList.styles.js +1 -1
- package/dist/Form/Form.d.ts +1 -0
- package/dist/Form/Form.js +2 -0
- package/dist/Form/Form.js.map +1 -1
- package/dist/Form/Form.styles.d.ts +2 -0
- package/dist/Form/Form.styles.js +15 -14
- package/dist/Form/Form.styles.js.map +1 -1
- package/dist/Form/Form.types.d.ts +30 -1
- package/dist/Form/Form.types.js.map +1 -1
- package/dist/Form/StyledFormikForm.styles.d.ts +1 -0
- package/dist/Form/StyledFormikForm.styles.js +4 -2
- package/dist/Form/StyledFormikForm.styles.js.map +1 -1
- 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 +10 -10
- package/dist/Modal/Modal.styles.js +13 -13
- package/dist/MultiSelect/MultiSelect.styles.js +6 -6
- package/dist/NextMenu/NextMenu.styles.js +3 -3
- 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/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
- package/dist/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
- package/dist/PageLayout/PageLayout.styles.js +16 -16
- package/dist/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
- package/dist/PageTemplate/PageTemplate.styles.js +3 -3
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Panel/Panel.styles.js +11 -11
- package/dist/Pill/Pill.styles.js +2 -2
- 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.styles.js +3 -3
- package/dist/Search/Search.styles.js +5 -5
- package/dist/Section/Section.styles.js +7 -7
- package/dist/SegmentedController/SegmentedController.js +5 -4
- package/dist/SegmentedController/SegmentedController.js.map +1 -1
- package/dist/SegmentedController/SegmentedController.styles.d.ts +1 -1
- package/dist/SegmentedController/SegmentedController.styles.js +8 -8
- package/dist/SegmentedController/SegmentedController.styles.js.map +1 -1
- package/dist/SegmentedController/SegmentedController.types.d.ts +10 -1
- package/dist/SegmentedController/SegmentedController.types.js.map +1 -1
- package/dist/Select/Select.styles.js +7 -7
- package/dist/Semantic/Semantic.styles.js +9 -9
- package/dist/Slider/Slider.styles.js +5 -5
- package/dist/Spinner/Spinner.d.ts +2 -2
- package/dist/Spinner/Spinner.js +4 -2
- package/dist/Spinner/Spinner.js.map +1 -1
- package/dist/Spinner/Spinner.styles.d.ts +1 -1
- package/dist/Spinner/Spinner.styles.js +17 -11
- package/dist/Spinner/Spinner.styles.js.map +1 -1
- package/dist/Spinner/Spinner.types.d.ts +6 -5
- package/dist/Spinner/Spinner.types.js.map +1 -1
- package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.js +37 -37
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.styles.js +28 -28
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tabs.d.ts +1 -1
- package/dist/Tabs/Tabs.js +14 -12
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Tabs/Tabs.styles.d.ts +2 -2
- package/dist/Tabs/Tabs.styles.js +28 -28
- package/dist/Tabs/Tabs.styles.js.map +1 -1
- package/dist/Tabs/Tabs.types.d.ts +8 -1
- package/dist/Tabs/Tabs.types.js.map +1 -1
- package/dist/Tearsheet/Tearsheet.styles.js +5 -5
- package/dist/TextArea/TextArea.styles.js +1 -1
- package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
- package/dist/Thumbnail/Thumbnail.styles.js +17 -17
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TierSelectionTieredSelect.js +32 -7
- package/dist/TieredSelect/TierSelectionTieredSelect.js.map +1 -1
- 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 +3 -3
- package/dist/ToolHeader/ToolHeader.styles.js +6 -6
- package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
- package/dist/Tooltip/Tooltip.styles.js +2 -2
- package/dist/Tree/Tree.styles.js +9 -9
- package/dist/Typeahead/Typeahead.styles.js +3 -3
- package/dist/Typography/Typography.styles.js +1 -1
- package/dist/Typography/Typography.table.story.js +2 -2
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +24 -24
- package/dist/_typedoc/Badge/Badge.types.json +6 -6
- package/dist/_typedoc/Banner/Banner.types.json +13 -13
- 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 +12 -12
- 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 +9 -9
- 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 +13 -13
- package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
- package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +29 -29
- package/dist/_typedoc/Dropzone/Dropzone.types.json +41 -41
- package/dist/_typedoc/EmptyState/EmptyState.types.json +14 -14
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +26 -26
- 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 +749 -744
- 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 +52 -52
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +4 -4
- 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 +74 -74
- package/dist/_typedoc/Modal/Modal.types.json +46 -46
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +31 -31
- package/dist/_typedoc/Notation/Notation.types.json +4 -4
- package/dist/_typedoc/NumberInput/NumberInput.types.json +37 -37
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +31 -31
- package/dist/_typedoc/PageLayout/PageLayout.types.json +29 -29
- 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 +6 -6
- package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
- package/dist/_typedoc/Required/Required.types.json +5 -5
- package/dist/_typedoc/Search/Search.types.json +19 -19
- package/dist/_typedoc/Section/Section.types.json +15 -15
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +37 -23
- package/dist/_typedoc/Select/Select.types.json +60 -60
- 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 +16 -16
- package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +12 -12
- package/dist/_typedoc/Switch/Switch.types.json +3 -3
- package/dist/_typedoc/Table/Table.types.json +101 -101
- package/dist/_typedoc/Tabs/Tabs.types.json +34 -22
- 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 +9 -9
- 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 +42 -42
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +28 -28
- package/dist/_typedoc/Tile/Tile.types.json +30 -30
- 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 +4 -4
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
- package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +7 -7
- package/dist/_typedoc/Tooltip/Tooltip.types.json +13 -13
- package/dist/_typedoc/Tree/Tree.types.json +86 -86
- 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/deprecations.json +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
|
|
|
5
5
|
import { spacing } from '../_styles/spacing';
|
|
6
6
|
export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
|
|
7
7
|
displayName: "StyledRequiredMark",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_17_5__sc-bja1ql-0"
|
|
9
9
|
})(["color:", ";", ""], colors.red50, function (_ref) {
|
|
10
10
|
var $showLabel = _ref.$showLabel;
|
|
11
11
|
if ($showLabel) {
|
|
@@ -15,10 +15,10 @@ export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
|
|
|
15
15
|
});
|
|
16
16
|
export var StyledRequiredContainer = /*#__PURE__*/styled.span.withConfig({
|
|
17
17
|
displayName: "StyledRequiredContainer",
|
|
18
|
-
componentId: "core-
|
|
18
|
+
componentId: "core-12_17_5__sc-bja1ql-1"
|
|
19
19
|
})(["", " ", " > &{margin-left:", "px;}"], getTypographyIntent('small'), StyledCheckboxLabel, spacing.xs);
|
|
20
20
|
export var StyledRequiredText = /*#__PURE__*/styled.span.withConfig({
|
|
21
21
|
displayName: "StyledRequiredText",
|
|
22
|
-
componentId: "core-
|
|
22
|
+
componentId: "core-12_17_5__sc-bja1ql-2"
|
|
23
23
|
})(["font-style:italic;color:", ";margin-left:4px;"], colors.gray45);
|
|
24
24
|
//# sourceMappingURL=Required.styles.js.map
|
|
@@ -27,22 +27,22 @@ export function getSearchInputStyles() {
|
|
|
27
27
|
}
|
|
28
28
|
export var StyledInput = /*#__PURE__*/styled.input.withConfig({
|
|
29
29
|
displayName: "StyledInput",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_17_5__sc-3j8khv-0"
|
|
31
31
|
})(["", ""], getSearchInputStyles);
|
|
32
32
|
var StyledButton = /*#__PURE__*/styled(Button).withConfig({
|
|
33
33
|
displayName: "StyledButton",
|
|
34
|
-
componentId: "core-
|
|
34
|
+
componentId: "core-12_17_5__sc-3j8khv-1"
|
|
35
35
|
})(["position:absolute;top:", "px;"], buttonTop);
|
|
36
36
|
export var StyledSearchButton = /*#__PURE__*/styled(StyledButton).withConfig({
|
|
37
37
|
displayName: "StyledSearchButton",
|
|
38
|
-
componentId: "core-
|
|
38
|
+
componentId: "core-12_17_5__sc-3j8khv-2"
|
|
39
39
|
})([""]);
|
|
40
40
|
export var StyledClearButton = /*#__PURE__*/styled(StyledButton).withConfig({
|
|
41
41
|
displayName: "StyledClearButton",
|
|
42
|
-
componentId: "core-
|
|
42
|
+
componentId: "core-12_17_5__sc-3j8khv-3"
|
|
43
43
|
})([""]);
|
|
44
44
|
export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
|
|
45
45
|
displayName: "StyledSearch",
|
|
46
|
-
componentId: "core-
|
|
46
|
+
componentId: "core-12_17_5__sc-3j8khv-4"
|
|
47
47
|
})(["position:relative;width:100%;", "{padding-right:", "px;}", "{right:", "px;}", "{right:", "px;}"], StyledInput, inputRight, StyledSearchButton, searchRight, StyledClearButton, clearRight);
|
|
48
48
|
//# sourceMappingURL=Search.styles.js.map
|
|
@@ -5,15 +5,15 @@ import { colors } from '../_styles/colors';
|
|
|
5
5
|
import { spacing } from '../_styles/spacing';
|
|
6
6
|
export var StyledSectionBanner = /*#__PURE__*/styled.div.withConfig({
|
|
7
7
|
displayName: "StyledSectionBanner",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_17_5__sc-1lxbrwv-0"
|
|
9
9
|
})(["margin-bottom:", "px;> * + *{margin-top:", "px;}"], spacing.sm, spacing.sm);
|
|
10
10
|
export var StyledSectionInner = /*#__PURE__*/styled.div.withConfig({
|
|
11
11
|
displayName: "StyledSectionInner",
|
|
12
|
-
componentId: "core-
|
|
12
|
+
componentId: "core-12_17_5__sc-1lxbrwv-1"
|
|
13
13
|
})([""]);
|
|
14
14
|
export var StyledSectionCollapseHeading = /*#__PURE__*/styled.div.withConfig({
|
|
15
15
|
displayName: "StyledSectionCollapseHeading",
|
|
16
|
-
componentId: "core-
|
|
16
|
+
componentId: "core-12_17_5__sc-1lxbrwv-2"
|
|
17
17
|
})(["align-self:flex-start;margin-right:", "px;"], spacing.sm);
|
|
18
18
|
export var sectionClassnames = {
|
|
19
19
|
divide: 'section--divide',
|
|
@@ -24,11 +24,11 @@ export var sectionClassnames = {
|
|
|
24
24
|
};
|
|
25
25
|
export var StyledSection = /*#__PURE__*/styled.div.withConfig({
|
|
26
26
|
displayName: "StyledSection",
|
|
27
|
-
componentId: "core-
|
|
27
|
+
componentId: "core-12_17_5__sc-1lxbrwv-3"
|
|
28
28
|
})(["padding-left:", "px;padding-right:", "px;padding-bottom:", "px;& > ", "{padding-top:", "px;}&.", "{& > ", "{border-top:1px solid ", ";}}&:first-child > ", "{border-top:0;}& &{padding-left:0;padding-right:0;&:first-child > ", "{border-top:1px solid ", ";}&:last-child{padding-bottom:0;}}", ":last-of-type{margin-bottom:", "px;}", " + &&&{padding-top:", "px;}"], spacing.lg, spacing.lg, spacing.lg, StyledSectionInner, spacing.lg, sectionClassnames.divide, StyledSectionInner, colors.gray85, StyledSectionInner, StyledSectionInner, colors.gray85, StyledFormRow, spacing.lg * -1, StyledFormRow, spacing.xs);
|
|
29
29
|
export var StyledSectionContentRegion = /*#__PURE__*/styled.div.withConfig({
|
|
30
30
|
displayName: "StyledSectionContentRegion",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-12_17_5__sc-1lxbrwv-4"
|
|
32
32
|
})(["padding-top:", "px;", " ", " & > :not(", ") + ", "{padding-top:", "px;}", " ", " &:last-of-type{padding-bottom:0;}"], spacing.sm, function (_ref) {
|
|
33
33
|
var $closed = _ref.$closed;
|
|
34
34
|
return $closed && css(["padding-top:0;"]);
|
|
@@ -38,10 +38,10 @@ export var StyledSectionContentRegion = /*#__PURE__*/styled.div.withConfig({
|
|
|
38
38
|
}, StyledSection, StyledSection, spacing.xl, StyledSection, StyledSection);
|
|
39
39
|
export var StyledSectionHeader = /*#__PURE__*/styled.div.withConfig({
|
|
40
40
|
displayName: "StyledSectionHeader",
|
|
41
|
-
componentId: "core-
|
|
41
|
+
componentId: "core-12_17_5__sc-1lxbrwv-5"
|
|
42
42
|
})(["align-items:center;display:flex;min-height:36px;word-break:break-word;"]);
|
|
43
43
|
export var StyledTitle = /*#__PURE__*/styled(Title).withConfig({
|
|
44
44
|
displayName: "StyledTitle",
|
|
45
|
-
componentId: "core-
|
|
45
|
+
componentId: "core-12_17_5__sc-1lxbrwv-6"
|
|
46
46
|
})(["width:100%;"]);
|
|
47
47
|
//# sourceMappingURL=Section.styles.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
2
|
var _excluded = ["aria-label", "aria-labelledby", "children", "block", "disabled", "onChange"],
|
|
3
|
-
_excluded2 = ["active", "children", "placement", "tooltip", "disabled", "value", "internalIndex"],
|
|
3
|
+
_excluded2 = ["active", "children", "placement", "tooltip", "disabled", "value", "internalIndex", "selected"],
|
|
4
4
|
_excluded3 = ["children", "overlay"],
|
|
5
5
|
_excluded4 = ["children"];
|
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -77,6 +77,7 @@ export var Segment = /*#__PURE__*/React.forwardRef(function Segment(_ref2, ref)
|
|
|
77
77
|
disabled = _ref2.disabled,
|
|
78
78
|
value = _ref2.value,
|
|
79
79
|
internalIndex = _ref2.internalIndex,
|
|
80
|
+
selected = _ref2.selected,
|
|
80
81
|
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
81
82
|
var adjustedValue = String(value !== null && value !== void 0 ? value : internalIndex);
|
|
82
83
|
var state = React.useContext(RadioButtonContext);
|
|
@@ -99,17 +100,17 @@ export var Segment = /*#__PURE__*/React.forwardRef(function Segment(_ref2, ref)
|
|
|
99
100
|
focusProps = _useFocusRing.focusProps,
|
|
100
101
|
isFocusVisible = _useFocusRing.isFocusVisible;
|
|
101
102
|
React.useEffect(function () {
|
|
102
|
-
if (active) {
|
|
103
|
+
if (active || selected) {
|
|
103
104
|
adjustedState.setSelectedValue(adjustedValue);
|
|
104
105
|
}
|
|
105
|
-
}, [active, adjustedState, adjustedValue]);
|
|
106
|
+
}, [active, adjustedState, adjustedValue, selected]);
|
|
106
107
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
107
108
|
overlay: tooltip,
|
|
108
109
|
placement: placement
|
|
109
110
|
}, /*#__PURE__*/React.createElement(StyledSegmentDisabledInteractiveWrapper, null, /*#__PURE__*/React.createElement(StyledSegment, {
|
|
110
111
|
$focused: isFocusVisible,
|
|
111
112
|
$disabled: isDisabled,
|
|
112
|
-
$
|
|
113
|
+
$selected: active || selected || isSelected
|
|
113
114
|
}, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({}, mergeProps(props, inputProps, focusProps), {
|
|
114
115
|
ref: actualRef
|
|
115
116
|
}))), /*#__PURE__*/React.createElement(StyledLabel, null, children))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedController.js","names":["useFocusRing","useRadio","useRadioGroup","mergeProps","useId","VisuallyHidden","React","useRadioGroupState","Tooltip","TooltipBase","addSubcomponents","StyledContainer","StyledLabel","StyledSegment","StyledSegmentDisabledInteractiveWrapper","isSegment","node","isValidElement","type","Segment","RadioButtonContext","createContext","SegmentedController_","forwardRef","SegmentedController","_ref","ref","ariaLabel","ariaLabelledby","children","_ref$block","block","disabled","onChange","props","_objectWithoutProperties","_excluded","name","radioGroupState","isDisabled","rawValue","num","Number","value","isNaN","_useRadioGroup","orientation","radioGroupProps","createElement","_extends","Provider","Children","toArray","filter","child","map","index","cloneElement","internalIndex","_ref2","active","_ref2$placement","placement","tooltip","_excluded2","adjustedValue","String","state","useContext","adjustedState","useMemo","_ref3","innerRef","useRef","actualRef","_useRadio","inputProps","isSelected","_useFocusRing","focusProps","isFocusVisible","useEffect","setSelectedValue","overlay","$focused","$disabled","$active","_ref4","_excluded3","trigger","Fragment","withState","config","Component","_React$useState","useState","_React$useState2","_slicedToArray","selectedIndex","setSelected","_objectSpread","State","_ref5","_excluded4","displayName"],"sources":["../../src/SegmentedController/SegmentedController.tsx"],"sourcesContent":["import { useFocusRing } from '@react-aria/focus'\nimport { useRadio, useRadioGroup } from '@react-aria/radio'\nimport { mergeProps, useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport type { RadioGroupState } from 'react-stately'\nimport { useRadioGroupState } from 'react-stately'\nimport { Tooltip as TooltipBase } from '../Tooltip/Tooltip'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n StyledContainer,\n StyledLabel,\n StyledSegment,\n StyledSegmentDisabledInteractiveWrapper,\n} from './SegmentedController.styles'\nimport type {\n SegmentedControllerProps,\n SegmentedControllerSegmentProps,\n SegmentedControllerTooltipProps,\n} from './SegmentedController.types'\n\nfunction isSegment(\n node: unknown\n): node is React.ReactElement<HTMLInputElement> {\n return (\n React.isValidElement(node as React.ReactElement) &&\n (node as React.ReactElement).type === Segment\n )\n}\n\nconst RadioButtonContext = React.createContext<RadioGroupState | null>(null)\n\nconst SegmentedController_ = React.forwardRef<\n HTMLDivElement,\n SegmentedControllerProps\n>(function SegmentedController(\n {\n // TODO make label props required in type?\n // React Aria logs warnings without 1 of 2. Axe does not fail\n ['aria-label']: ariaLabel,\n ['aria-labelledby']: ariaLabelledby,\n children,\n block = false,\n disabled,\n onChange,\n ...props\n },\n ref\n) {\n const name = useId()\n const radioGroupState = useRadioGroupState({\n name,\n isDisabled: disabled,\n onChange: (rawValue) => {\n const num = Number(rawValue)\n const value = !isNaN(num) ? num : rawValue\n onChange?.(value as number)\n },\n })\n const { radioGroupProps } = useRadioGroup(\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n orientation: 'horizontal',\n },\n radioGroupState\n )\n return (\n <StyledContainer ref={ref} block={block} {...radioGroupProps} {...props}>\n <RadioButtonContext.Provider value={radioGroupState}>\n {React.Children.toArray(children)\n .filter((child) => isSegment(child))\n .map((child, index) =>\n React.cloneElement(child as React.ReactElement, {\n internalIndex: index,\n })\n )}\n </RadioButtonContext.Provider>\n </StyledContainer>\n )\n})\n\nexport const Segment = React.forwardRef<\n HTMLInputElement,\n React.InputHTMLAttributes<HTMLInputElement> & SegmentedControllerSegmentProps\n>(function Segment(\n {\n active,\n children,\n placement = 'top',\n tooltip,\n disabled,\n value,\n internalIndex,\n ...props\n },\n ref\n) {\n const adjustedValue = String(value ?? internalIndex)\n const state = React.useContext(RadioButtonContext)\n const adjustedState = React.useMemo(() => {\n return state! ?? {}\n }, [state])\n\n const innerRef = React.useRef<HTMLInputElement>(null)\n const actualRef = ref ?? innerRef\n const { inputProps, isSelected, isDisabled } = useRadio(\n {\n isDisabled: disabled ?? adjustedState.isDisabled,\n value: adjustedValue as string,\n children,\n },\n adjustedState,\n actualRef as any // TODO fix polymorphic ref type\n )\n const { focusProps, isFocusVisible } = useFocusRing()\n\n React.useEffect(() => {\n if (active) {\n adjustedState.setSelectedValue(adjustedValue)\n }\n }, [active, adjustedState, adjustedValue])\n\n return (\n <Tooltip overlay={tooltip} placement={placement}>\n <StyledSegmentDisabledInteractiveWrapper>\n <StyledSegment\n $focused={isFocusVisible}\n $disabled={isDisabled}\n $active={active || isSelected}\n >\n <VisuallyHidden>\n <input\n {...mergeProps(props, inputProps, focusProps)}\n ref={actualRef}\n />\n </VisuallyHidden>\n <StyledLabel>{children}</StyledLabel>\n </StyledSegment>\n </StyledSegmentDisabledInteractiveWrapper>\n </Tooltip>\n )\n})\n\n/**\n * @deprecated\n *\n * The `SegmentedController.Tooltip` component has been deprecated will be\n * removed in a future version.\n *\n * Tooltips are now built into `SegmentedController.Segment`s, and can be added\n * by configuring the `tooltip` prop.\n *\n * **Before**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Tooltip tooltip=\"Item 1 is the first item\">\n * <SegmentedController.Segment>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController.Tooltip>\n * </SegmentedController>\n * ```\n *\n * **After**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Segment tooltip=\"Item 1 is the first item\">\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const Tooltip = React.forwardRef<\n HTMLElement,\n SegmentedControllerTooltipProps\n>(function Tooltip({ children, overlay, ...props }, ref) {\n return overlay ? (\n <TooltipBase {...props} overlay={overlay} ref={ref} trigger=\"hover\">\n {children}\n </TooltipBase>\n ) : (\n <>{children}</>\n )\n})\n\nconst withState = (config: any) => (Component: any) => (props: any) => {\n const [selectedIndex, setSelected] = React.useState(0)\n\n return <Component {...{ ...props, selectedIndex, setSelected }} />\n}\n\n/**\n * @deprecated\n *\n * This `SegmentedController.State` utility has been deprecated. Please just\n * use a simple state management hook instead.\n *\n *\n * **Before**\n *\n * ```\n * <SegmentedController.State>\n * {({ selectedIndex, setSelected }) => (\n * <SegmentedController>\n * <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * )}\n * </SegmentedController.State>\n * ```\n *\n * **After**\n *\n * ```\n * const [selected, setSelected] = React.useState(0)\n *\n * <SegmentedController onChange={setSelected}>\n * <SegmentedController.Segment active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const State = withState({})(({ children, ...props }: any) =>\n children(props)\n)\n\nSegmentedController_.displayName = 'SegmentedController'\n\nSegment.displayName = 'SegmentedController.Segment'\n\nTooltip.displayName = 'SegmentedController.Tooltip'\n\n/**\n\n Segmented controllers allow users to switch between related but mutually\n exclusive content or actions.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-segmentedcontroller--demo)\n\n @see [Design Guidelines](https://design.procore.com/segmented-controller)\n\n */\nexport const SegmentedController = addSubcomponents(\n {\n Segment,\n State,\n Tooltip,\n },\n SegmentedController_\n)\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedController.js","names":["useFocusRing","useRadio","useRadioGroup","mergeProps","useId","VisuallyHidden","React","useRadioGroupState","Tooltip","TooltipBase","addSubcomponents","StyledContainer","StyledLabel","StyledSegment","StyledSegmentDisabledInteractiveWrapper","isSegment","node","isValidElement","type","Segment","RadioButtonContext","createContext","SegmentedController_","forwardRef","SegmentedController","_ref","ref","ariaLabel","ariaLabelledby","children","_ref$block","block","disabled","onChange","props","_objectWithoutProperties","_excluded","name","radioGroupState","isDisabled","rawValue","num","Number","value","isNaN","_useRadioGroup","orientation","radioGroupProps","createElement","_extends","Provider","Children","toArray","filter","child","map","index","cloneElement","internalIndex","_ref2","active","_ref2$placement","placement","tooltip","selected","_excluded2","adjustedValue","String","state","useContext","adjustedState","useMemo","_ref3","innerRef","useRef","actualRef","_useRadio","inputProps","isSelected","_useFocusRing","focusProps","isFocusVisible","useEffect","setSelectedValue","overlay","$focused","$disabled","$selected","_ref4","_excluded3","trigger","Fragment","withState","config","Component","_React$useState","useState","_React$useState2","_slicedToArray","selectedIndex","setSelected","_objectSpread","State","_ref5","_excluded4","displayName"],"sources":["../../src/SegmentedController/SegmentedController.tsx"],"sourcesContent":["import { useFocusRing } from '@react-aria/focus'\nimport { useRadio, useRadioGroup } from '@react-aria/radio'\nimport { mergeProps, useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport type { RadioGroupState } from 'react-stately'\nimport { useRadioGroupState } from 'react-stately'\nimport { Tooltip as TooltipBase } from '../Tooltip/Tooltip'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n StyledContainer,\n StyledLabel,\n StyledSegment,\n StyledSegmentDisabledInteractiveWrapper,\n} from './SegmentedController.styles'\nimport type {\n SegmentedControllerProps,\n SegmentedControllerSegmentProps,\n SegmentedControllerTooltipProps,\n} from './SegmentedController.types'\n\nfunction isSegment(\n node: unknown\n): node is React.ReactElement<HTMLInputElement> {\n return (\n React.isValidElement(node as React.ReactElement) &&\n (node as React.ReactElement).type === Segment\n )\n}\n\nconst RadioButtonContext = React.createContext<RadioGroupState | null>(null)\n\nconst SegmentedController_ = React.forwardRef<\n HTMLDivElement,\n SegmentedControllerProps\n>(function SegmentedController(\n {\n // TODO make label props required in type?\n // React Aria logs warnings without 1 of 2. Axe does not fail\n ['aria-label']: ariaLabel,\n ['aria-labelledby']: ariaLabelledby,\n children,\n block = false,\n disabled,\n onChange,\n ...props\n },\n ref\n) {\n const name = useId()\n const radioGroupState = useRadioGroupState({\n name,\n isDisabled: disabled,\n onChange: (rawValue) => {\n const num = Number(rawValue)\n const value = !isNaN(num) ? num : rawValue\n onChange?.(value as number)\n },\n })\n const { radioGroupProps } = useRadioGroup(\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n orientation: 'horizontal',\n },\n radioGroupState\n )\n return (\n <StyledContainer ref={ref} block={block} {...radioGroupProps} {...props}>\n <RadioButtonContext.Provider value={radioGroupState}>\n {React.Children.toArray(children)\n .filter((child) => isSegment(child))\n .map((child, index) =>\n React.cloneElement(child as React.ReactElement, {\n internalIndex: index,\n })\n )}\n </RadioButtonContext.Provider>\n </StyledContainer>\n )\n})\n\nexport const Segment = React.forwardRef<\n HTMLInputElement,\n React.InputHTMLAttributes<HTMLInputElement> & SegmentedControllerSegmentProps\n>(function Segment(\n {\n active,\n children,\n placement = 'top',\n tooltip,\n disabled,\n value,\n internalIndex,\n selected,\n ...props\n },\n ref\n) {\n const adjustedValue = String(value ?? internalIndex)\n const state = React.useContext(RadioButtonContext)\n const adjustedState = React.useMemo(() => {\n return state! ?? {}\n }, [state])\n\n const innerRef = React.useRef<HTMLInputElement>(null)\n const actualRef = ref ?? innerRef\n const { inputProps, isSelected, isDisabled } = useRadio(\n {\n isDisabled: disabled ?? adjustedState.isDisabled,\n value: adjustedValue as string,\n children,\n },\n adjustedState,\n actualRef as any // TODO fix polymorphic ref type\n )\n const { focusProps, isFocusVisible } = useFocusRing()\n\n React.useEffect(() => {\n if (active || selected) {\n adjustedState.setSelectedValue(adjustedValue)\n }\n }, [active, adjustedState, adjustedValue, selected])\n\n return (\n <Tooltip overlay={tooltip} placement={placement}>\n <StyledSegmentDisabledInteractiveWrapper>\n <StyledSegment\n $focused={isFocusVisible}\n $disabled={isDisabled}\n $selected={active || selected || isSelected}\n >\n <VisuallyHidden>\n <input\n {...mergeProps(props, inputProps, focusProps)}\n ref={actualRef}\n />\n </VisuallyHidden>\n <StyledLabel>{children}</StyledLabel>\n </StyledSegment>\n </StyledSegmentDisabledInteractiveWrapper>\n </Tooltip>\n )\n})\n\n/**\n * @deprecated\n *\n * The `SegmentedController.Tooltip` component has been deprecated will be\n * removed in a future version.\n *\n * Tooltips are now built into `SegmentedController.Segment`s, and can be added\n * by configuring the `tooltip` prop.\n *\n * **Before**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Tooltip tooltip=\"Item 1 is the first item\">\n * <SegmentedController.Segment>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController.Tooltip>\n * </SegmentedController>\n * ```\n *\n * **After**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Segment tooltip=\"Item 1 is the first item\">\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const Tooltip = React.forwardRef<\n HTMLElement,\n SegmentedControllerTooltipProps\n>(function Tooltip({ children, overlay, ...props }, ref) {\n return overlay ? (\n <TooltipBase {...props} overlay={overlay} ref={ref} trigger=\"hover\">\n {children}\n </TooltipBase>\n ) : (\n <>{children}</>\n )\n})\n\nconst withState = (config: any) => (Component: any) => (props: any) => {\n const [selectedIndex, setSelected] = React.useState(0)\n\n return <Component {...{ ...props, selectedIndex, setSelected }} />\n}\n\n/**\n * @deprecated\n *\n * This `SegmentedController.State` utility has been deprecated. Please just\n * use a simple state management hook instead.\n *\n *\n * **Before**\n *\n * ```\n * <SegmentedController.State>\n * {({ selectedIndex, setSelected }) => (\n * <SegmentedController>\n * <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * )}\n * </SegmentedController.State>\n * ```\n *\n * **After**\n *\n * ```\n * const [selected, setSelected] = React.useState(0)\n *\n * <SegmentedController onChange={setSelected}>\n * <SegmentedController.Segment active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const State = withState({})(({ children, ...props }: any) =>\n children(props)\n)\n\nSegmentedController_.displayName = 'SegmentedController'\n\nSegment.displayName = 'SegmentedController.Segment'\n\nTooltip.displayName = 'SegmentedController.Tooltip'\n\n/**\n\n Segmented controllers allow users to switch between related but mutually\n exclusive content or actions.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-segmentedcontroller--demo)\n\n @see [Design Guidelines](https://design.procore.com/segmented-controller)\n\n */\nexport const SegmentedController = addSubcomponents(\n {\n Segment,\n State,\n Tooltip,\n },\n SegmentedController_\n)\n"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ export declare const StyledContainer: import("styled-components").StyledComponen
|
|
|
4
4
|
export declare const StyledSegment: import("styled-components").StyledComponent<"label", any, {
|
|
5
5
|
$disabled: boolean;
|
|
6
6
|
$focused: boolean;
|
|
7
|
-
$
|
|
7
|
+
$selected: boolean;
|
|
8
8
|
}, never>;
|
|
9
9
|
export declare const StyledSegmentDisabledInteractiveWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
10
|
export declare const StyledLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
|
|
|
5
5
|
import { spacing } from '../_styles/spacing';
|
|
6
6
|
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
|
|
7
7
|
displayName: "StyledContainer",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_17_5__sc-ocai3-0"
|
|
9
9
|
})(["align-items:center;display:", ";height:36px;justify-content:center;width:", ";"], function (_ref) {
|
|
10
10
|
var block = _ref.block;
|
|
11
11
|
return block ? 'flex' : 'inline-flex';
|
|
@@ -15,7 +15,7 @@ export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
15
15
|
});
|
|
16
16
|
export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
|
|
17
17
|
displayName: "StyledSegment",
|
|
18
|
-
componentId: "core-
|
|
18
|
+
componentId: "core-12_17_5__sc-ocai3-1"
|
|
19
19
|
})(["align-items:center;border-radius:0;border:1px solid ", ";cursor:pointer;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;outline:0;padding:0 ", "px;position:relative;background-color:", ";color:", ";&:hover{background-color:", ";border-color:", ";color:", ";}", " ", ";"], colors.gray85, spacing.md, colors.white, colors.gray45, colors.gray94, colors.gray85, colors.gray45, function (_ref3) {
|
|
20
20
|
var _ref3$$focused = _ref3.$focused,
|
|
21
21
|
$focused = _ref3$$focused === void 0 ? false : _ref3$$focused;
|
|
@@ -25,22 +25,22 @@ export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
|
|
|
25
25
|
}, function (_ref4) {
|
|
26
26
|
var _ref4$$disabled = _ref4.$disabled,
|
|
27
27
|
$disabled = _ref4$$disabled === void 0 ? false : _ref4$$disabled,
|
|
28
|
-
_ref4$$
|
|
29
|
-
$
|
|
30
|
-
if ($disabled && $
|
|
28
|
+
_ref4$$selected = _ref4.$selected,
|
|
29
|
+
$selected = _ref4$$selected === void 0 ? false : _ref4$$selected;
|
|
30
|
+
if ($disabled && $selected) {
|
|
31
31
|
return css(["&,&:hover,&:disabled{background-color:", ";border-color:", ";color:", ";pointer-events:none;}"], colors.gray85, colors.gray85, colors.white);
|
|
32
32
|
} else if ($disabled) {
|
|
33
33
|
return css(["&,&:hover,&:disabled{background-color:", ";border-color:", ";color:", ";pointer-events:none;"], colors.white, colors.gray85, colors.gray85);
|
|
34
|
-
} else if ($
|
|
34
|
+
} else if ($selected) {
|
|
35
35
|
return css(["&,&:hover{background-color:", ";border-color:", ";color:", ";}"], colors.blue50, colors.blue50, colors.white);
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
38
|
export var StyledSegmentDisabledInteractiveWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
39
39
|
displayName: "StyledSegmentDisabledInteractiveWrapper",
|
|
40
|
-
componentId: "core-
|
|
40
|
+
componentId: "core-12_17_5__sc-ocai3-2"
|
|
41
41
|
})(["display:flex;flex:1 1 auto;min-width:0;height:100%;margin-right:-1px;&:first-child ", "{border-bottom-left-radius:", "px;border-top-left-radius:", "px;}&:last-child ", "{border-bottom-right-radius:", "px;border-top-right-radius:", "px;}"], StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, borderRadius.md, borderRadius.md);
|
|
42
42
|
export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
|
|
43
43
|
displayName: "StyledLabel",
|
|
44
|
-
componentId: "core-
|
|
44
|
+
componentId: "core-12_17_5__sc-ocai3-3"
|
|
45
45
|
})(["", ";display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], getTypographyIntent('body'));
|
|
46
46
|
//# sourceMappingURL=SegmentedController.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedController.styles.js","names":["styled","css","getTypographyIntent","borderRadius","colors","spacing","StyledContainer","div","withConfig","displayName","componentId","_ref","block","_ref2","StyledSegment","label","gray85","md","white","gray45","gray94","_ref3","_ref3$$focused","$focused","blue40","_ref4","_ref4$$disabled","$disabled","_ref4$$
|
|
1
|
+
{"version":3,"file":"SegmentedController.styles.js","names":["styled","css","getTypographyIntent","borderRadius","colors","spacing","StyledContainer","div","withConfig","displayName","componentId","_ref","block","_ref2","StyledSegment","label","gray85","md","white","gray45","gray94","_ref3","_ref3$$focused","$focused","blue40","_ref4","_ref4$$disabled","$disabled","_ref4$$selected","$selected","blue50","StyledSegmentDisabledInteractiveWrapper","StyledLabel","span"],"sources":["../../src/SegmentedController/SegmentedController.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledContainer = styled.div<{ block?: boolean }>`\n align-items: center;\n display: ${({ block }) => (block ? 'flex' : 'inline-flex')};\n height: 36px;\n justify-content: center;\n width: ${({ block }) => (block ? '100%' : null)};\n`\n\nexport const StyledSegment = styled.label<{\n $disabled: boolean\n $focused: boolean\n $selected: boolean\n}>`\n align-items: center;\n border-radius: 0;\n border: 1px solid ${colors.gray85};\n cursor: pointer;\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n justify-content: center;\n min-width: 0;\n outline: 0;\n padding: 0 ${spacing.md}px;\n position: relative;\n background-color: ${colors.white};\n color: ${colors.gray45};\n\n &:hover {\n background-color: ${colors.gray94};\n border-color: ${colors.gray85};\n color: ${colors.gray45};\n }\n\n ${({ $focused = false }) => {\n if ($focused) {\n return css`\n border-color: ${colors.blue40};\n box-shadow: 0 0 0 1px ${colors.blue40};\n z-index: 1;\n `\n }\n }}\n\n ${({ $disabled = false, $selected = false }) => {\n if ($disabled && $selected) {\n return css`\n &,\n &:hover,\n &:disabled {\n background-color: ${colors.gray85};\n border-color: ${colors.gray85};\n color: ${colors.white};\n pointer-events: none;\n }\n `\n } else if ($disabled) {\n return css`\n &,\n &:hover,\n &:disabled {\n background-color: ${colors.white};\n border-color: ${colors.gray85};\n color: ${colors.gray85};\n pointer-events: none;\n `\n } else if ($selected) {\n return css`\n &,\n &:hover {\n background-color: ${colors.blue50};\n border-color: ${colors.blue50};\n color: ${colors.white};\n }\n `\n }\n }};\n`\n\nexport const StyledSegmentDisabledInteractiveWrapper = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n margin-right: -1px;\n\n &:first-child ${StyledSegment} {\n border-bottom-left-radius: ${borderRadius.md}px;\n border-top-left-radius: ${borderRadius.md}px;\n }\n\n &:last-child ${StyledSegment} {\n border-bottom-right-radius: ${borderRadius.md}px;\n border-top-right-radius: ${borderRadius.md}px;\n }\n`\n\nexport const StyledLabel = styled.span`\n ${getTypographyIntent('body')};\n\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,eAAe,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uFAE5B,UAAAC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQA,KAAK,GAAG,MAAM,GAAG,aAAa;AAAA,CAAC,EAGjD,UAAAC,KAAA;EAAA,IAAGD,KAAK,GAAAC,KAAA,CAALD,KAAK;EAAA,OAAQA,KAAK,GAAG,MAAM,GAAG,IAAI;AAAA,CAAC,CAChD;AAED,OAAO,IAAME,aAAa,gBAAGd,MAAM,CAACe,KAAK,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+SAOnBN,MAAM,CAACY,MAAM,EAQpBX,OAAO,CAACY,EAAE,EAEHb,MAAM,CAACc,KAAK,EACvBd,MAAM,CAACe,MAAM,EAGAf,MAAM,CAACgB,MAAM,EACjBhB,MAAM,CAACY,MAAM,EACpBZ,MAAM,CAACe,MAAM,EAGtB,UAAAE,KAAA,EAA0B;EAAA,IAAAC,cAAA,GAAAD,KAAA,CAAvBE,QAAQ;IAARA,QAAQ,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EACnB,IAAIC,QAAQ,EAAE;IACZ,OAAOtB,GAAG,6DACQG,MAAM,CAACoB,MAAM,EACLpB,MAAM,CAACoB,MAAM;EAGzC;AACF,CAAC,EAEC,UAAAC,KAAA,EAA8C;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAA3CE,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;IAAAE,eAAA,GAAAH,KAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;EACvC,IAAID,SAAS,IAAIE,SAAS,EAAE;IAC1B,OAAO5B,GAAG,oGAIcG,MAAM,CAACY,MAAM,EACjBZ,MAAM,CAACY,MAAM,EACpBZ,MAAM,CAACc,KAAK;EAI3B,CAAC,MAAM,IAAIS,SAAS,EAAE;IACpB,OAAO1B,GAAG,mGAIcG,MAAM,CAACc,KAAK,EAChBd,MAAM,CAACY,MAAM,EACpBZ,MAAM,CAACY,MAAM;EAG5B,CAAC,MAAM,IAAIa,SAAS,EAAE;IACpB,OAAO5B,GAAG,qEAGcG,MAAM,CAAC0B,MAAM,EACjB1B,MAAM,CAAC0B,MAAM,EACpB1B,MAAM,CAACc,KAAK;EAG3B;AACF,CAAC,CACF;AAED,OAAO,IAAMa,uCAAuC,gBAAG/B,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qPAO/CI,aAAa,EACEX,YAAY,CAACc,EAAE,EAClBd,YAAY,CAACc,EAAE,EAG5BH,aAAa,EACIX,YAAY,CAACc,EAAE,EAClBd,YAAY,CAACc,EAAE,CAE7C;AAED,OAAO,IAAMe,WAAW,gBAAGhC,MAAM,CAACiC,IAAI,CAAAzB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sFAClCR,mBAAmB,CAAC,MAAM,CAAC,CAM9B"}
|
|
@@ -13,6 +13,8 @@ export interface SegmentedControllerProps extends Props, Omit<DivAttributes, 'on
|
|
|
13
13
|
/**
|
|
14
14
|
* The segment is active
|
|
15
15
|
* @since 10.19.0
|
|
16
|
+
* @deprecated The property is not used anywhere
|
|
17
|
+
* @deprecatedSince 12.18.0
|
|
16
18
|
* */
|
|
17
19
|
active?: number;
|
|
18
20
|
/**
|
|
@@ -29,7 +31,7 @@ export interface SegmentedControllerProps extends Props, Omit<DivAttributes, 'on
|
|
|
29
31
|
* A callback to be called when the radio group value changes
|
|
30
32
|
* @since 10.19.0
|
|
31
33
|
*/
|
|
32
|
-
onChange?: (
|
|
34
|
+
onChange?: (selected: number) => void;
|
|
33
35
|
/**
|
|
34
36
|
* @deprecated Please use the `block` prop
|
|
35
37
|
* @deprecatedSince 11
|
|
@@ -41,6 +43,8 @@ export interface SegmentedControllerSegmentProps extends Props {
|
|
|
41
43
|
/**
|
|
42
44
|
* The segment is active
|
|
43
45
|
* @since 10.19.0
|
|
46
|
+
* @deprecated Use `selected` instead
|
|
47
|
+
* @deprecatedSince 12.18.0
|
|
44
48
|
*/
|
|
45
49
|
active?: boolean;
|
|
46
50
|
/**
|
|
@@ -53,6 +57,11 @@ export interface SegmentedControllerSegmentProps extends Props {
|
|
|
53
57
|
* @since 10.19.0
|
|
54
58
|
*/
|
|
55
59
|
placement?: Placement;
|
|
60
|
+
/**
|
|
61
|
+
* The segment is selected
|
|
62
|
+
* @since 12.18.0
|
|
63
|
+
* */
|
|
64
|
+
selected?: boolean;
|
|
56
65
|
/**
|
|
57
66
|
* The tooltip we want to display on hover
|
|
58
67
|
* @since 10.19.0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedController.types.js","names":["segmentedControllerSegmentVariant","active","disabled","none"],"sources":["../../src/SegmentedController/SegmentedController.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { DivAttributes, Placement, Props } from '../_utils/types'\n\n/**\n * @deprecated Please use the `active` and `disabled` props\n * @deprecatedSince 11\n */\nexport const segmentedControllerSegmentVariant = {\n active: 'active',\n disabled: 'disabled',\n none: '',\n} as const\n\nexport interface SegmentedControllerProps\n extends Props,\n Omit<DivAttributes, 'onChange'> {\n /**\n * The segment is active\n * @since 10.19.0\n * */\n active?: number\n\n /**\n * The segment controller is block sized\n * @since 10.19.0\n */\n block?: boolean\n\n /**\n * Disables all segments in the controller\n * @since 10.19.0\n */\n disabled?: boolean\n\n /**\n * A callback to be called when the radio group value changes\n * @since 10.19.0\n */\n onChange?: (
|
|
1
|
+
{"version":3,"file":"SegmentedController.types.js","names":["segmentedControllerSegmentVariant","active","disabled","none"],"sources":["../../src/SegmentedController/SegmentedController.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { DivAttributes, Placement, Props } from '../_utils/types'\n\n/**\n * @deprecated Please use the `active` and `disabled` props\n * @deprecatedSince 11\n */\nexport const segmentedControllerSegmentVariant = {\n active: 'active',\n disabled: 'disabled',\n none: '',\n} as const\n\nexport interface SegmentedControllerProps\n extends Props,\n Omit<DivAttributes, 'onChange'> {\n /**\n * The segment is active\n * @since 10.19.0\n * @deprecated The property is not used anywhere\n * @deprecatedSince 12.18.0\n * */\n active?: number\n\n /**\n * The segment controller is block sized\n * @since 10.19.0\n */\n block?: boolean\n\n /**\n * Disables all segments in the controller\n * @since 10.19.0\n */\n disabled?: boolean\n\n /**\n * A callback to be called when the radio group value changes\n * @since 10.19.0\n */\n onChange?: (selected: number) => void\n\n /**\n * @deprecated Please use the `block` prop\n * @deprecatedSince 11\n * @since 10.19.0\n */\n variant?: 'block' | ''\n}\n\nexport interface SegmentedControllerSegmentProps extends Props {\n /**\n * The segment is active\n * @since 10.19.0\n * @deprecated Use `selected` instead\n * @deprecatedSince 12.18.0\n */\n active?: boolean\n\n /**\n * Is the segment disabled\n * @since 10.19.0\n */\n disabled?: boolean\n\n /**\n * To change the tooltip placement\n * @since 10.19.0\n */\n placement?: Placement\n\n /**\n * The segment is selected\n * @since 12.18.0\n * */\n selected?: boolean\n\n /**\n * The tooltip we want to display on hover\n * @since 10.19.0\n */\n tooltip?: React.ReactNode\n\n /**\n * A number to be used as radio input value\n * @internal\n * @since 11.3.0\n */\n internalIndex?: number\n}\n\nexport interface SegmentedControllerTooltipProps extends Props {\n /**\n * @since 10.19.0\n */\n overlay?: any\n /**\n * @since 10.19.0\n */\n placement: Placement\n}\n"],"mappings":"AAGA;AACA;AACA;AACA;AACA,OAAO,IAAMA,iCAAiC,GAAG;EAC/CC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE;AACR,CAAU"}
|
|
@@ -17,34 +17,34 @@ export var tableSelectClassName = 'select--table';
|
|
|
17
17
|
var styledSelectButtonDefaultWidth = 248;
|
|
18
18
|
export var StyledSelectMenu = /*#__PURE__*/styled(Card).withConfig({
|
|
19
19
|
displayName: "StyledSelectMenu",
|
|
20
|
-
componentId: "core-
|
|
20
|
+
componentId: "core-12_17_5__sc-mr8gwe-0"
|
|
21
21
|
})(["display:flex;max-height:40vh;max-width:", "px;min-width:inherit;"], styledSelectButtonDefaultWidth);
|
|
22
22
|
export var StyledSelectButtonLabel = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledSelectButtonLabel",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_17_5__sc-mr8gwe-1"
|
|
25
25
|
})(["", " flex-grow:1;margin-right:", "px;outline:none;pointer-events:", ";user-select:none;"], getEllipsis(), spacing.sm, function (_ref) {
|
|
26
26
|
var $hoverable = _ref.$hoverable;
|
|
27
27
|
return $hoverable ? 'initial' : 'none';
|
|
28
28
|
});
|
|
29
29
|
export var StyledSelectSpinner = /*#__PURE__*/styled.div.withConfig({
|
|
30
30
|
displayName: "StyledSelectSpinner",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-12_17_5__sc-mr8gwe-2"
|
|
32
32
|
})(["align-items:center;display:flex;flex:0 0 auto;justify-content:center;line-height:0;"]);
|
|
33
33
|
export var StyledSelectArrowContainer = /*#__PURE__*/styled.div.withConfig({
|
|
34
34
|
displayName: "StyledSelectArrowContainer",
|
|
35
|
-
componentId: "core-
|
|
35
|
+
componentId: "core-12_17_5__sc-mr8gwe-3"
|
|
36
36
|
})(["align-items:center;display:inline-flex;height:16px;justify-content:flex-end;margin-left:", "px;width:8px;"], spacing.sm);
|
|
37
37
|
export var StyledSelectArrow = /*#__PURE__*/styled.div.withConfig({
|
|
38
38
|
displayName: "StyledSelectArrow",
|
|
39
|
-
componentId: "core-
|
|
39
|
+
componentId: "core-12_17_5__sc-mr8gwe-4"
|
|
40
40
|
})(["position:relative;", ""], arrowDown(4, 'gray45'));
|
|
41
41
|
export var StyledSelectClearIcon = /*#__PURE__*/styled(Button).withConfig({
|
|
42
42
|
displayName: "StyledSelectClearIcon",
|
|
43
|
-
componentId: "core-
|
|
43
|
+
componentId: "core-12_17_5__sc-mr8gwe-5"
|
|
44
44
|
})(["", "{pointer-events:none;}"], StyledContent);
|
|
45
45
|
export var StyledSelectButton = /*#__PURE__*/styled.div.withConfig({
|
|
46
46
|
displayName: "StyledSelectButton",
|
|
47
|
-
componentId: "core-
|
|
47
|
+
componentId: "core-12_17_5__sc-mr8gwe-6"
|
|
48
48
|
})(["", " align-items:center;background-color:", ";border-color:", ";border-radius:", "px;border-style:solid;border-width:1px;color:", ";cursor:pointer;display:inline-flex;height:36px;min-height:36px;outline:none;padding:0 ", "px;position:relative;white-space:nowrap;width:", ";&::placeholder{border-color:", ";}&:hover,&:active,&[data-qa=", "]{background-color:", ";border-color:", ";color:", ";}&.focus,&:focus,&[data-qa=", "]{", " ", "{stroke:", ";}}", " ", " ", " ", " ", " &.", "{", " ", " ", "}"], getTypographyIntent('body'), colors.white, colors.gray70, borderRadius.md, colors.gray15, spacing.md, function (_ref2) {
|
|
49
49
|
var $block = _ref2.$block;
|
|
50
50
|
return $block ? '100%' : "".concat(styledSelectButtonDefaultWidth, "px");
|
|
@@ -5,15 +5,15 @@ import { colors } from '../_styles/colors';
|
|
|
5
5
|
import { spacing } from '../_styles/spacing';
|
|
6
6
|
export var StyledH1 = /*#__PURE__*/styled.h1.withConfig({
|
|
7
7
|
displayName: "StyledH1",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_17_5__sc-172j5qh-0"
|
|
9
9
|
})(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h1'));
|
|
10
10
|
export var StyledH2 = /*#__PURE__*/styled.h2.withConfig({
|
|
11
11
|
displayName: "StyledH2",
|
|
12
|
-
componentId: "core-
|
|
12
|
+
componentId: "core-12_17_5__sc-172j5qh-1"
|
|
13
13
|
})(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h2'));
|
|
14
14
|
export var StyledH3 = /*#__PURE__*/styled.h3.withConfig({
|
|
15
15
|
displayName: "StyledH3",
|
|
16
|
-
componentId: "core-
|
|
16
|
+
componentId: "core-12_17_5__sc-172j5qh-2"
|
|
17
17
|
})(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h3'));
|
|
18
18
|
var topMarginRules = function topMarginRules() {
|
|
19
19
|
return css(["& + &,p + &,ol + &,ul + &{margin-top:", "px;}"], spacing.lg);
|
|
@@ -28,11 +28,11 @@ export function getSmallIconBodyTextRules() {
|
|
|
28
28
|
}
|
|
29
29
|
export var StyledP = /*#__PURE__*/styled.p.withConfig({
|
|
30
30
|
displayName: "StyledP",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-12_17_5__sc-172j5qh-3"
|
|
32
32
|
})(["color:", ";", " ", " ", ""], colors.gray15, getTypographyIntent('body'), topMarginRules, semiboldRules);
|
|
33
33
|
export var StyledUL = /*#__PURE__*/styled.ul.withConfig({
|
|
34
34
|
displayName: "StyledUL",
|
|
35
|
-
componentId: "core-
|
|
35
|
+
componentId: "core-12_17_5__sc-172j5qh-4"
|
|
36
36
|
})(["color:", ";margin:0;padding:0;", " ", " padding-left:", "px;list-style-type:", ";"], colors.gray15, getTypographyIntent('body'), topMarginRules, spacing.lg, function (props) {
|
|
37
37
|
return props.$listStyleType || 'disc';
|
|
38
38
|
});
|
|
@@ -40,7 +40,7 @@ export var StyledOL = /*#__PURE__*/styled(StyledUL).attrs({
|
|
|
40
40
|
as: 'ol'
|
|
41
41
|
}).withConfig({
|
|
42
42
|
displayName: "StyledOL",
|
|
43
|
-
componentId: "core-
|
|
43
|
+
componentId: "core-12_17_5__sc-172j5qh-5"
|
|
44
44
|
})(["list-style-type:", ";"], function (props) {
|
|
45
45
|
return props.$listStyleType || 'decimal';
|
|
46
46
|
});
|
|
@@ -52,7 +52,7 @@ function enforceLabelTypography(props) {
|
|
|
52
52
|
}
|
|
53
53
|
export var StyledLabel = /*#__PURE__*/styled(StyledTypography).attrs(enforceLabelTypography).withConfig({
|
|
54
54
|
displayName: "StyledLabel",
|
|
55
|
-
componentId: "core-
|
|
55
|
+
componentId: "core-12_17_5__sc-172j5qh-6"
|
|
56
56
|
})(["", " ", " > ", "{margin-left:", "px;vertical-align:top;}"], function (_ref) {
|
|
57
57
|
var _ref$$block = _ref.$block,
|
|
58
58
|
$block = _ref$$block === void 0 ? false : _ref$$block;
|
|
@@ -70,7 +70,7 @@ export function getUnstyledButton() {
|
|
|
70
70
|
*/
|
|
71
71
|
export var StyledUnstyledButton = /*#__PURE__*/styled.button.withConfig({
|
|
72
72
|
displayName: "StyledUnstyledButton",
|
|
73
|
-
componentId: "core-
|
|
73
|
+
componentId: "core-12_17_5__sc-172j5qh-7"
|
|
74
74
|
})(["", ""], getUnstyledButton);
|
|
75
75
|
|
|
76
76
|
/**
|
|
@@ -78,6 +78,6 @@ export var StyledUnstyledButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
78
78
|
*/
|
|
79
79
|
export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
|
|
80
80
|
displayName: "StyledAnchor",
|
|
81
|
-
componentId: "core-
|
|
81
|
+
componentId: "core-12_17_5__sc-172j5qh-8"
|
|
82
82
|
})([""]);
|
|
83
83
|
//# sourceMappingURL=Semantic.styles.js.map
|
|
@@ -21,13 +21,13 @@ var getTrackBackgroundDisabled = function getTrackBackgroundDisabled(percent) {
|
|
|
21
21
|
var getThumbDisabledStyles = /*#__PURE__*/css(["cursor:not-allowed;border:2px solid ", ";"], colors.blue85);
|
|
22
22
|
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledContainer",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_17_5__sc-12icguw-0"
|
|
25
25
|
})(["position:relative;", ";"], function (props) {
|
|
26
26
|
return props.$showLabel && 'padding-bottom: 10px';
|
|
27
27
|
});
|
|
28
28
|
export var StyledSlider = /*#__PURE__*/styled.input.withConfig({
|
|
29
29
|
displayName: "StyledSlider",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_17_5__sc-12icguw-1"
|
|
31
31
|
})(["-webkit-appearance:none;margin:0;padding-top:5px;padding-bottom:5px;width:100%;border:1px solid transparent;background-color:transparent;font-size:12px;&:focus{outline:none;", ";padding-top:5px;padding-bottom:5px;border-radius:2px;}&::-webkit-slider-runnable-track{", " ", "}&:disabled::-webkit-slider-runnable-track{cursor:not-allowed;", "}&::-webkit-slider-thumb{", " -webkit-appearance:none;margin-top:-5px;}&:disabled::-webkit-slider-thumb{", "}&::-moz-range-track{", " ", "}&:disabled::-moz-range-track{cursor:not-allowed;", "}&::-moz-range-thumb{", " height:12px;width:12px;}&:disabled::-moz-range-thumb{", "}&::-ms-track{", " height:", "px;color:transparent;", "}&:disabled::-ms-track{cursor:not-allowed;", "}&::-ms-fill-lower{background:", ";border:0px solid ", ";border-radius:2px;box-shadow:1px 1px 1px ", ";}&::-ms-fill-upper{background:", ";border:0px solid ", ";border-radius:2px;box-shadow:1px 1px 1px ", ";}&::-ms-thumb{", "}&:disabled::-ms-thumb{", "}&:focus::-ms-fill-lower{background:", ";}&:focus::-ms-fill-upper{background:", ";}"], function (props) {
|
|
32
32
|
return props.$isDragging ? "border: 1px solid transparent" : "border: 1px solid ".concat(colors.blue40);
|
|
33
33
|
}, getTrackStyles, function (props) {
|
|
@@ -45,14 +45,14 @@ export var StyledSlider = /*#__PURE__*/styled.input.withConfig({
|
|
|
45
45
|
}, colors.blue50, colors.black, colors.black, colors.gray70, colors.black, colors.black, getThumbStyles, getThumbDisabledStyles, colors.blue50, colors.gray70);
|
|
46
46
|
export var StyledIncrementOverlay = /*#__PURE__*/styled.div.withConfig({
|
|
47
47
|
displayName: "StyledIncrementOverlay",
|
|
48
|
-
componentId: "core-
|
|
48
|
+
componentId: "core-12_17_5__sc-12icguw-2"
|
|
49
49
|
})(["position:relative;width:0;&::before{content:'';height:", "px;width:2px;background-color:white;display:block;}z-index:2;"], TRACK_HEIGHT);
|
|
50
50
|
export var StyledIncrementContainer = /*#__PURE__*/styled.div.withConfig({
|
|
51
51
|
displayName: "StyledIncrementContainer",
|
|
52
|
-
componentId: "core-
|
|
52
|
+
componentId: "core-12_17_5__sc-12icguw-3"
|
|
53
53
|
})(["position:absolute;display:flex;justify-content:space-between;top:6px;", " left:5px;right:5px;> :first-child{visibility:hidden;}> :last-child{visibility:hidden;}"], applyStylesOnlyToFF("\n top: 12px;\n "));
|
|
54
54
|
export var StyledLabel = /*#__PURE__*/styled(Typography).withConfig({
|
|
55
55
|
displayName: "StyledLabel",
|
|
56
|
-
componentId: "core-
|
|
56
|
+
componentId: "core-12_17_5__sc-12icguw-4"
|
|
57
57
|
})(["visibility:visible;position:absolute;left:50%;transform:translateX(-50%);margin-top:8px;"]);
|
|
58
58
|
//# sourceMappingURL=Slider.styles.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { SpinnerProps } from './Spinner.types';
|
|
3
|
-
export declare const defaultSpinnerSize
|
|
2
|
+
import type { SpinnerProps, SpinnerSize } from './Spinner.types';
|
|
3
|
+
export declare const defaultSpinnerSize: SpinnerSize;
|
|
4
4
|
/**
|
|
5
5
|
|
|
6
6
|
Spinners indicate a loading state on either a full page or smaller component,
|
package/dist/Spinner/Spinner.js
CHANGED
|
@@ -10,6 +10,7 @@ var radiusMap = {
|
|
|
10
10
|
md: 20,
|
|
11
11
|
lg: 20.5
|
|
12
12
|
};
|
|
13
|
+
var smallSizes = ['xs', 'sm'];
|
|
13
14
|
export var defaultSpinnerSize = 'lg';
|
|
14
15
|
|
|
15
16
|
/**
|
|
@@ -34,7 +35,8 @@ export var Spinner = /*#__PURE__*/React.forwardRef(function Spinner(_ref, ref) {
|
|
|
34
35
|
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
35
36
|
_ref$size = _ref.size,
|
|
36
37
|
size = _ref$size === void 0 ? defaultSpinnerSize : _ref$size,
|
|
37
|
-
variant = _ref.variant,
|
|
38
|
+
_ref$variant = _ref.variant,
|
|
39
|
+
variant = _ref$variant === void 0 ? 'default' : _ref$variant,
|
|
38
40
|
_ref$centered = _ref.centered,
|
|
39
41
|
centered = _ref$centered === void 0 ? false : _ref$centered,
|
|
40
42
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -62,7 +64,7 @@ export var Spinner = /*#__PURE__*/React.forwardRef(function Spinner(_ref, ref) {
|
|
|
62
64
|
$loading: loading,
|
|
63
65
|
className: className,
|
|
64
66
|
$centered: centered
|
|
65
|
-
}, props), /*#__PURE__*/React.createElement(StyledSpinnerOverlay, null), /*#__PURE__*/React.createElement(StyledSpinnerContainerWithLabel, null, circle, /*#__PURE__*/React.createElement(StyledSpinnerOverlayLabel, null, label)), children);
|
|
67
|
+
}, props), /*#__PURE__*/React.createElement(StyledSpinnerOverlay, null), /*#__PURE__*/React.createElement(StyledSpinnerContainerWithLabel, null, circle, !smallSizes.includes(size) && /*#__PURE__*/React.createElement(StyledSpinnerOverlayLabel, null, label)), children);
|
|
66
68
|
});
|
|
67
69
|
Spinner.displayName = 'Spinner';
|
|
68
70
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","names":["React","StyledCircle","StyledSpinnerContainer","StyledSpinnerContainerWithLabel","StyledSpinnerOverlay","StyledSpinnerOverlayContainer","StyledSpinnerOverlayLabel","StyledSpinnerSVG","radiusMap","xs","sm","md","lg","defaultSpinnerSize","Spinner","forwardRef","_ref","ref","children","_ref$className","className","color","label","_ref$loading","loading","_ref$size","size","variant","_ref$centered","centered","props","_objectWithoutProperties","_excluded","mountTime","useRef","Date","now","circle","createElement","$color","$size","$variant","viewBox","xmlns","$mountTime","current","cx","cy","r","_extends","$loading","$centered","displayName"],"sources":["../../src/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\nimport {\n StyledCircle,\n StyledSpinnerContainer,\n StyledSpinnerContainerWithLabel,\n StyledSpinnerOverlay,\n StyledSpinnerOverlayContainer,\n StyledSpinnerOverlayLabel,\n StyledSpinnerSVG,\n} from './Spinner.styles'\nimport type { SpinnerProps, SpinnerSize } from './Spinner.types'\n\nconst radiusMap:
|
|
1
|
+
{"version":3,"file":"Spinner.js","names":["React","StyledCircle","StyledSpinnerContainer","StyledSpinnerContainerWithLabel","StyledSpinnerOverlay","StyledSpinnerOverlayContainer","StyledSpinnerOverlayLabel","StyledSpinnerSVG","radiusMap","xs","sm","md","lg","smallSizes","defaultSpinnerSize","Spinner","forwardRef","_ref","ref","children","_ref$className","className","color","label","_ref$loading","loading","_ref$size","size","_ref$variant","variant","_ref$centered","centered","props","_objectWithoutProperties","_excluded","mountTime","useRef","Date","now","circle","createElement","$color","$size","$variant","viewBox","xmlns","$mountTime","current","cx","cy","r","_extends","$loading","$centered","includes","displayName"],"sources":["../../src/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\nimport {\n StyledCircle,\n StyledSpinnerContainer,\n StyledSpinnerContainerWithLabel,\n StyledSpinnerOverlay,\n StyledSpinnerOverlayContainer,\n StyledSpinnerOverlayLabel,\n StyledSpinnerSVG,\n} from './Spinner.styles'\nimport type { SpinnerProps, SpinnerSize } from './Spinner.types'\n\nconst radiusMap: Record<SpinnerSize, number> = {\n xs: 18.5,\n sm: 18,\n md: 20,\n lg: 20.5,\n}\n\nconst smallSizes: SpinnerSize[] = ['xs', 'sm']\n\nexport const defaultSpinnerSize: SpinnerSize = 'lg'\n\n/**\n\n Spinners indicate a loading state on either a full page or smaller component,\n like a menu, select or button.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-spinner--demo)\n\n @see [Design Guidelines](https://design.procore.com/spinner)\n\n */\nexport const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n children,\n className = '',\n color,\n label,\n loading = false,\n size = defaultSpinnerSize,\n variant = 'default',\n centered = false,\n ...props\n },\n ref\n ) {\n const mountTime = React.useRef(Date.now())\n\n const circle = (\n <StyledSpinnerContainer\n className={!children ? className : ''}\n $color={color}\n $size={size}\n $variant={variant}\n ref={ref}\n >\n <StyledSpinnerSVG\n viewBox=\"0 0 48 48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n $mountTime={mountTime.current}\n >\n <StyledCircle\n cx=\"24\"\n cy=\"24\"\n r={radiusMap[size]}\n $mountTime={mountTime.current}\n />\n </StyledSpinnerSVG>\n </StyledSpinnerContainer>\n )\n\n if (!children) {\n return circle\n }\n\n return (\n <StyledSpinnerOverlayContainer\n $loading={loading}\n className={className}\n $centered={centered}\n {...props}\n >\n <StyledSpinnerOverlay />\n <StyledSpinnerContainerWithLabel>\n {circle}\n {!smallSizes.includes(size) && (\n <StyledSpinnerOverlayLabel>{label}</StyledSpinnerOverlayLabel>\n )}\n </StyledSpinnerContainerWithLabel>\n {children}\n </StyledSpinnerOverlayContainer>\n )\n }\n)\n\nSpinner.displayName = 'Spinner'\n"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ export declare const spinnerDimensions: Record<SpinnerSize, number>;
|
|
|
8
8
|
interface StyledSpinnerContainerProps {
|
|
9
9
|
$color?: Color;
|
|
10
10
|
$size: SpinnerSize;
|
|
11
|
-
$variant
|
|
11
|
+
$variant: SpinnerVariant;
|
|
12
12
|
}
|
|
13
13
|
export declare const StyledSpinnerContainer: import("styled-components").StyledComponent<"div", any, StyledSpinnerContainerProps, never>;
|
|
14
14
|
export declare const StyledSpinnerOverlayLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
|