@redsift/design-system 11.5.0 → 11.6.0-alpha.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/_internal/Alert2.js +197 -0
- package/_internal/Alert2.js.map +1 -0
- package/_internal/AppBar.js +248 -0
- package/_internal/AppBar.js.map +1 -0
- package/_internal/AppContainer.js +142 -0
- package/_internal/AppContainer.js.map +1 -0
- package/_internal/AppContent.js +92 -0
- package/_internal/AppContent.js.map +1 -0
- package/_internal/Badge2.js +142 -0
- package/_internal/Badge2.js.map +1 -0
- package/_internal/BreadcrumbItem.js +91 -0
- package/_internal/BreadcrumbItem.js.map +1 -0
- package/_internal/Breadcrumbs2.js +94 -0
- package/_internal/Breadcrumbs2.js.map +1 -0
- package/_internal/Button2.js +91 -0
- package/_internal/Button2.js.map +1 -0
- package/_internal/ButtonGroup.js +181 -0
- package/_internal/ButtonGroup.js.map +1 -0
- package/_internal/ButtonLink.js +84 -0
- package/_internal/ButtonLink.js.map +1 -0
- package/_internal/Card2.js +157 -0
- package/_internal/Card2.js.map +1 -0
- package/_internal/CardActions.js +44 -0
- package/_internal/CardActions.js.map +1 -0
- package/_internal/CardBody.js +42 -0
- package/_internal/CardBody.js.map +1 -0
- package/_internal/CardHeader.js +83 -0
- package/_internal/CardHeader.js.map +1 -0
- package/_internal/Checkbox2.js +244 -0
- package/_internal/Checkbox2.js.map +1 -0
- package/_internal/CheckboxGroup.js +188 -0
- package/_internal/CheckboxGroup.js.map +1 -0
- package/_internal/ConditionalWrapper.js +13 -0
- package/_internal/ConditionalWrapper.js.map +1 -0
- package/_internal/DetailedCard.js +6916 -0
- package/_internal/DetailedCard.js.map +1 -0
- package/_internal/DetailedCardCollapsibleSectionItems.js +64 -0
- package/_internal/DetailedCardCollapsibleSectionItems.js.map +1 -0
- package/_internal/DetailedCardHeader.js +67 -0
- package/_internal/DetailedCardHeader.js.map +1 -0
- package/_internal/DetailedCardSection.js +172 -0
- package/_internal/DetailedCardSection.js.map +1 -0
- package/_internal/DetailedCardSectionItem.js +94 -0
- package/_internal/DetailedCardSectionItem.js.map +1 -0
- package/_internal/Flexbox2.js +93 -0
- package/_internal/Flexbox2.js.map +1 -0
- package/_internal/Grid2.js +95 -0
- package/_internal/Grid2.js.map +1 -0
- package/_internal/GridItem.js +40 -0
- package/_internal/GridItem.js.map +1 -0
- package/_internal/Heading2.js +113 -0
- package/_internal/Heading2.js.map +1 -0
- package/_internal/Icon2.js +211 -0
- package/_internal/Icon2.js.map +1 -0
- package/_internal/IconButton.js +80 -0
- package/_internal/IconButton.js.map +1 -0
- package/_internal/IconButtonLink.js +75 -0
- package/_internal/IconButtonLink.js.map +1 -0
- package/_internal/Item2.js +399 -0
- package/_internal/Item2.js.map +1 -0
- package/_internal/Link2.js +67 -0
- package/_internal/Link2.js.map +1 -0
- package/_internal/LinkButton.js +66 -0
- package/_internal/LinkButton.js.map +1 -0
- package/_internal/Listbox2.js +274 -0
- package/_internal/Listbox2.js.map +1 -0
- package/_internal/Number2.js +111 -0
- package/_internal/Number2.js.map +1 -0
- package/_internal/NumberField.js +3974 -0
- package/_internal/NumberField.js.map +1 -0
- package/_internal/Pill2.js +405 -0
- package/_internal/Pill2.js.map +1 -0
- package/_internal/ProgressBar.js +69 -0
- package/_internal/ProgressBar.js.map +1 -0
- package/_internal/Radio2.js +237 -0
- package/_internal/Radio2.js.map +1 -0
- package/_internal/RadioGroup.js +176 -0
- package/_internal/RadioGroup.js.map +1 -0
- package/_internal/Shield2.js +225 -0
- package/_internal/Shield2.js.map +1 -0
- package/_internal/SideNavigationMenu.js +591 -0
- package/_internal/SideNavigationMenu.js.map +1 -0
- package/_internal/SideNavigationMenuItem.js +304 -0
- package/_internal/SideNavigationMenuItem.js.map +1 -0
- package/_internal/Skeleton2.js +42 -0
- package/_internal/Skeleton2.js.map +1 -0
- package/_internal/SkeletonCircle.js +58 -0
- package/_internal/SkeletonCircle.js.map +1 -0
- package/_internal/SkeletonText.js +77 -0
- package/_internal/SkeletonText.js.map +1 -0
- package/_internal/Spinner2.js +333 -0
- package/_internal/Spinner2.js.map +1 -0
- package/_internal/Switch2.js +320 -0
- package/_internal/Switch2.js.map +1 -0
- package/_internal/SwitchGroup.js +188 -0
- package/_internal/SwitchGroup.js.map +1 -0
- package/_internal/Text2.js +51 -0
- package/_internal/Text2.js.map +1 -0
- package/_internal/TextArea.js +444 -0
- package/_internal/TextArea.js.map +1 -0
- package/_internal/TextField.js +473 -0
- package/_internal/TextField.js.map +1 -0
- package/_internal/_rollupPluginBabelHelpers.js +133 -0
- package/_internal/_rollupPluginBabelHelpers.js.map +1 -0
- package/_internal/alert.js +2 -0
- package/_internal/alert.js.map +1 -0
- package/_internal/app-bar.js +2 -0
- package/_internal/app-bar.js.map +1 -0
- package/_internal/app-container.js +3 -0
- package/_internal/app-container.js.map +1 -0
- package/_internal/app-content.js +2 -0
- package/_internal/app-content.js.map +1 -0
- package/_internal/app-side-panel.js +3 -0
- package/_internal/app-side-panel.js.map +1 -0
- package/_internal/badge.js +2 -0
- package/_internal/badge.js.map +1 -0
- package/_internal/breadcrumb-item.js +2 -0
- package/_internal/breadcrumb-item.js.map +1 -0
- package/_internal/breadcrumbs.js +2 -0
- package/_internal/breadcrumbs.js.map +1 -0
- package/_internal/button-group.js +2 -0
- package/_internal/button-group.js.map +1 -0
- package/_internal/button-link.js +2 -0
- package/_internal/button-link.js.map +1 -0
- package/_internal/button.js +3 -0
- package/_internal/button.js.map +1 -0
- package/_internal/card-actions.js +2 -0
- package/_internal/card-actions.js.map +1 -0
- package/_internal/card-body.js +2 -0
- package/_internal/card-body.js.map +1 -0
- package/_internal/card-header.js +2 -0
- package/_internal/card-header.js.map +1 -0
- package/_internal/card.js +2 -0
- package/_internal/card.js.map +1 -0
- package/_internal/checkbox-group.js +2 -0
- package/_internal/checkbox-group.js.map +1 -0
- package/_internal/checkbox.js +2 -0
- package/_internal/checkbox.js.map +1 -0
- package/_internal/colors.js +98 -0
- package/_internal/colors.js.map +1 -0
- package/_internal/conditional-wrapper.js +2 -0
- package/_internal/conditional-wrapper.js.map +1 -0
- package/_internal/context.js +6 -0
- package/_internal/context.js.map +1 -0
- package/_internal/context2.js +300 -0
- package/_internal/context2.js.map +1 -0
- package/_internal/context3.js +6 -0
- package/_internal/context3.js.map +1 -0
- package/_internal/context4.js +6 -0
- package/_internal/context4.js.map +1 -0
- package/_internal/context5.js +6 -0
- package/_internal/context5.js.map +1 -0
- package/_internal/detailed-card-collapsible-section-items.js +2 -0
- package/_internal/detailed-card-collapsible-section-items.js.map +1 -0
- package/_internal/detailed-card-header.js +2 -0
- package/_internal/detailed-card-header.js.map +1 -0
- package/_internal/detailed-card-section-item.js +2 -0
- package/_internal/detailed-card-section-item.js.map +1 -0
- package/_internal/detailed-card-section.js +2 -0
- package/_internal/detailed-card-section.js.map +1 -0
- package/_internal/detailed-card.js +2 -0
- package/_internal/detailed-card.js.map +1 -0
- package/_internal/filterComponents.js +24 -0
- package/_internal/filterComponents.js.map +1 -0
- package/_internal/flexbox.js +2 -0
- package/_internal/flexbox.js.map +1 -0
- package/_internal/focus-within-group.js +3 -0
- package/_internal/focus-within-group.js.map +1 -0
- package/_internal/fonts.js +10 -0
- package/_internal/fonts.js.map +1 -0
- package/_internal/gradient-border.js +38 -0
- package/_internal/gradient-border.js.map +1 -0
- package/_internal/grid-item.js +2 -0
- package/_internal/grid-item.js.map +1 -0
- package/_internal/grid.js +2 -0
- package/_internal/grid.js.map +1 -0
- package/_internal/heading.js +3 -0
- package/_internal/heading.js.map +1 -0
- package/_internal/icon-button-link.js +2 -0
- package/_internal/icon-button-link.js.map +1 -0
- package/_internal/icon-button.js +3 -0
- package/_internal/icon-button.js.map +1 -0
- package/_internal/icon.js +2 -0
- package/_internal/icon.js.map +1 -0
- package/_internal/isComponent.js +15 -0
- package/_internal/isComponent.js.map +1 -0
- package/_internal/item.js +2 -0
- package/_internal/item.js.map +1 -0
- package/_internal/link-button.js +2 -0
- package/_internal/link-button.js.map +1 -0
- package/_internal/link.js +3 -0
- package/_internal/link.js.map +1 -0
- package/_internal/listbox.js +3 -0
- package/_internal/listbox.js.map +1 -0
- package/_internal/number-field.js +2 -0
- package/_internal/number-field.js.map +1 -0
- package/_internal/number.js +2 -0
- package/_internal/number.js.map +1 -0
- package/_internal/partitionComponents.js +26 -0
- package/_internal/partitionComponents.js.map +1 -0
- package/_internal/pill.js +2 -0
- package/_internal/pill.js.map +1 -0
- package/_internal/progress-bar.js +2 -0
- package/_internal/progress-bar.js.map +1 -0
- package/_internal/radio-group.js +2 -0
- package/_internal/radio-group.js.map +1 -0
- package/_internal/radio.js +2 -0
- package/_internal/radio.js.map +1 -0
- package/_internal/redsift-design-tokens.js +1391 -0
- package/_internal/redsift-design-tokens.js.map +1 -0
- package/_internal/shared.js +2 -0
- package/_internal/shared.js.map +1 -0
- package/_internal/shield.js +2 -0
- package/_internal/shield.js.map +1 -0
- package/_internal/side-navigation-menu-bar.js +3 -0
- package/_internal/side-navigation-menu-bar.js.map +1 -0
- package/_internal/side-navigation-menu-item.js +2 -0
- package/_internal/side-navigation-menu-item.js.map +1 -0
- package/_internal/side-navigation-menu.js +2 -0
- package/_internal/side-navigation-menu.js.map +1 -0
- package/_internal/skeleton-circle.js +2 -0
- package/_internal/skeleton-circle.js.map +1 -0
- package/_internal/skeleton-text.js +3 -0
- package/_internal/skeleton-text.js.map +1 -0
- package/_internal/skeleton.js +2 -0
- package/_internal/skeleton.js.map +1 -0
- package/_internal/spinner.js +2 -0
- package/_internal/spinner.js.map +1 -0
- package/_internal/styles.js +235 -0
- package/_internal/styles.js.map +1 -0
- package/_internal/styles2.js +47 -0
- package/_internal/styles2.js.map +1 -0
- package/_internal/styles3.js +145 -0
- package/_internal/styles3.js.map +1 -0
- package/_internal/styles4.js +250 -0
- package/_internal/styles4.js.map +1 -0
- package/_internal/styles5.js +143 -0
- package/_internal/styles5.js.map +1 -0
- package/_internal/styles6.js +84 -0
- package/_internal/styles6.js.map +1 -0
- package/_internal/switch-group.js +2 -0
- package/_internal/switch-group.js.map +1 -0
- package/_internal/switch.js +2 -0
- package/_internal/switch.js.map +1 -0
- package/_internal/text-area.js +2 -0
- package/_internal/text-area.js.map +1 -0
- package/_internal/text-field.js +2 -0
- package/_internal/text-field.js.map +1 -0
- package/_internal/text.js +3 -0
- package/_internal/text.js.map +1 -0
- package/_internal/theme.js +2 -0
- package/_internal/theme.js.map +1 -0
- package/_internal/types.js +15 -0
- package/_internal/types.js.map +1 -0
- package/_internal/types2.js +26 -0
- package/_internal/types2.js.map +1 -0
- package/_internal/types3.js +20 -0
- package/_internal/types3.js.map +1 -0
- package/_internal/useAppSidePanel.js +337 -0
- package/_internal/useAppSidePanel.js.map +1 -0
- package/_internal/useFocusOnList.js +541 -0
- package/_internal/useFocusOnList.js.map +1 -0
- package/_internal/useFocusOnListItem.js +203 -0
- package/_internal/useFocusOnListItem.js.map +1 -0
- package/_internal/useFocusRing.js +669 -0
- package/_internal/useFocusRing.js.map +1 -0
- package/_internal/useId.js +42 -0
- package/_internal/useId.js.map +1 -0
- package/_internal/useIsLoaded.js +14 -0
- package/_internal/useIsLoaded.js.map +1 -0
- package/_internal/useListboxItem.js +129 -0
- package/_internal/useListboxItem.js.map +1 -0
- package/_internal/useMessageFormatter.js +143 -0
- package/_internal/useMessageFormatter.js.map +1 -0
- package/_internal/useNumberFormatter.js +239 -0
- package/_internal/useNumberFormatter.js.map +1 -0
- package/_internal/useSideNavigationMenuBar.js +373 -0
- package/_internal/useSideNavigationMenuBar.js.map +1 -0
- package/_internal/useTheme.js +15 -0
- package/_internal/useTheme.js.map +1 -0
- package/_internal/warnIfNoAccessibleLabelFound.js +20 -0
- package/_internal/warnIfNoAccessibleLabelFound.js.map +1 -0
- package/index.js +315 -24243
- package/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef, useContext, useState, useEffect, useCallback } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
|
|
5
|
+
import { R as RadioGroupContext } from './context4.js';
|
|
6
|
+
import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { i as baseStyling } from './styles4.js';
|
|
9
|
+
import { u as useFocusRing } from './useFocusRing.js';
|
|
10
|
+
import { u as useTheme } from './useTheme.js';
|
|
11
|
+
import { a as Icon } from './Icon2.js';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Component style.
|
|
15
|
+
*/
|
|
16
|
+
const StyledRadio = styled.label`
|
|
17
|
+
height: fit-content;
|
|
18
|
+
position: relative;
|
|
19
|
+
width: fit-content;
|
|
20
|
+
${baseStyling}
|
|
21
|
+
|
|
22
|
+
align-items: center;
|
|
23
|
+
background: none;
|
|
24
|
+
border: none;
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
|
|
27
|
+
input {
|
|
28
|
+
height: 100%;
|
|
29
|
+
margin: 0;
|
|
30
|
+
opacity: 0;
|
|
31
|
+
overflow: visible;
|
|
32
|
+
padding: 0;
|
|
33
|
+
position: absolute;
|
|
34
|
+
width: 100%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
span.label {
|
|
38
|
+
${_ref => {
|
|
39
|
+
let {
|
|
40
|
+
$isDisabled,
|
|
41
|
+
$isInvalid,
|
|
42
|
+
$theme
|
|
43
|
+
} = _ref;
|
|
44
|
+
return $isDisabled ? css`
|
|
45
|
+
color: var(--redsift-color-${$theme}-components-radio-text-disabled);
|
|
46
|
+
` : $isInvalid ? css`
|
|
47
|
+
color: var(--redsift-color-${$theme}-components-radio-text-invalid);
|
|
48
|
+
` : css`
|
|
49
|
+
color: var(--redsift-color-${$theme}-components-radio-text-default);
|
|
50
|
+
`;
|
|
51
|
+
}}
|
|
52
|
+
|
|
53
|
+
font-family: var(--redsift-typography-body-font-family);
|
|
54
|
+
font-size: var(--redsift-typography-body-font-size);
|
|
55
|
+
font-weight: var(--redsift-typography-body-font-weight);
|
|
56
|
+
line-height: var(--redsift-typography-body-line-height);
|
|
57
|
+
padding-left: 4px;
|
|
58
|
+
padding-right: 16px;
|
|
59
|
+
|
|
60
|
+
[dir='rtl'] & {
|
|
61
|
+
padding-left: 16px;
|
|
62
|
+
padding-right: 4px;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.redsift-icon {
|
|
67
|
+
box-sizing: content-box;
|
|
68
|
+
padding: 2px;
|
|
69
|
+
width: 24px;
|
|
70
|
+
|
|
71
|
+
${_ref2 => {
|
|
72
|
+
let {
|
|
73
|
+
$isColored,
|
|
74
|
+
$isDisabled,
|
|
75
|
+
$isInvalid,
|
|
76
|
+
$isFocusVisible,
|
|
77
|
+
$theme
|
|
78
|
+
} = _ref2;
|
|
79
|
+
return css`
|
|
80
|
+
${$isDisabled ? css`
|
|
81
|
+
color: var(--redsift-color-${$theme}-components-radio-fill-disabled);
|
|
82
|
+
` : $isInvalid ? css`
|
|
83
|
+
color: var(--redsift-color-${$theme}-components-radio-fill-invalid);
|
|
84
|
+
` : css`
|
|
85
|
+
color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};
|
|
86
|
+
`}
|
|
87
|
+
|
|
88
|
+
${$isFocusVisible && !$isDisabled ? css`
|
|
89
|
+
background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
|
|
90
|
+
border-radius: 16px;
|
|
91
|
+
` : ''}
|
|
92
|
+
`;
|
|
93
|
+
}}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:hover,
|
|
97
|
+
&:focus-visible {
|
|
98
|
+
outline: none;
|
|
99
|
+
|
|
100
|
+
${_ref3 => {
|
|
101
|
+
let {
|
|
102
|
+
$isColored,
|
|
103
|
+
$isDisabled,
|
|
104
|
+
$isInvalid,
|
|
105
|
+
$theme
|
|
106
|
+
} = _ref3;
|
|
107
|
+
return !$isDisabled ? css`
|
|
108
|
+
.redsift-icon {
|
|
109
|
+
${$isInvalid ? css`
|
|
110
|
+
background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);
|
|
111
|
+
` : css`
|
|
112
|
+
background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
|
|
113
|
+
`}
|
|
114
|
+
border-radius: 16px;
|
|
115
|
+
}
|
|
116
|
+
` : '';
|
|
117
|
+
}}
|
|
118
|
+
}
|
|
119
|
+
`;
|
|
120
|
+
|
|
121
|
+
const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
|
|
122
|
+
const COMPONENT_NAME = 'Radio';
|
|
123
|
+
const CLASSNAME = 'redsift-radio';
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* The Radio component.
|
|
127
|
+
* Works both inside a RadioGroup or as standalone.
|
|
128
|
+
* Can be used as controlled or uncontrolled.
|
|
129
|
+
*/
|
|
130
|
+
const Radio = /*#__PURE__*/forwardRef((props, ref) => {
|
|
131
|
+
var _isDisabled, _isReadOnly, _ref;
|
|
132
|
+
const groupState = useContext(RadioGroupContext);
|
|
133
|
+
let {
|
|
134
|
+
'aria-label': ariaLabel,
|
|
135
|
+
'aria-labelledby': ariaLabelledby,
|
|
136
|
+
autoFocus,
|
|
137
|
+
children,
|
|
138
|
+
className,
|
|
139
|
+
defaultSelected,
|
|
140
|
+
inputProps,
|
|
141
|
+
inputRef,
|
|
142
|
+
isColored = true,
|
|
143
|
+
isDisabled,
|
|
144
|
+
isInvalid,
|
|
145
|
+
isReadOnly,
|
|
146
|
+
isRequired,
|
|
147
|
+
isSelected: propsIsSelected,
|
|
148
|
+
name,
|
|
149
|
+
onChange,
|
|
150
|
+
theme: propsTheme,
|
|
151
|
+
value
|
|
152
|
+
} = props,
|
|
153
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
154
|
+
const theme = useTheme(propsTheme);
|
|
155
|
+
const {
|
|
156
|
+
isFocusVisible,
|
|
157
|
+
focusProps
|
|
158
|
+
} = useFocusRing({
|
|
159
|
+
autoFocus
|
|
160
|
+
});
|
|
161
|
+
isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
|
|
162
|
+
isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
|
|
163
|
+
const [isSelected, setSelected] = useState(Boolean((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : Boolean((groupState === null || groupState === void 0 ? void 0 : groupState.value) && groupState.value === value)));
|
|
164
|
+
const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;
|
|
165
|
+
useEffect(() => {
|
|
166
|
+
setSelected(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
|
|
167
|
+
}, [propsIsSelected, defaultSelected]);
|
|
168
|
+
useEffect(() => {
|
|
169
|
+
if (groupState) {
|
|
170
|
+
setSelected(groupState.value === value);
|
|
171
|
+
}
|
|
172
|
+
}, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
|
|
173
|
+
warnIfNoAccessibleLabelFound(props, [children], 'Radio');
|
|
174
|
+
if (groupState) {
|
|
175
|
+
if (propsIsSelected != null) {
|
|
176
|
+
console.warn('isSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.');
|
|
177
|
+
}
|
|
178
|
+
if (defaultSelected != null) {
|
|
179
|
+
console.warn('defaultSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.');
|
|
180
|
+
}
|
|
181
|
+
if (props.value == null) {
|
|
182
|
+
console.warn('A <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.');
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
const handleChange = useCallback(event => {
|
|
186
|
+
if (isDisabled || isReadOnly) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
if (groupState) {
|
|
190
|
+
groupState.setValue(value);
|
|
191
|
+
}
|
|
192
|
+
if (isControlled) {
|
|
193
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(!propsIsSelected, value, name, event, groupState);
|
|
194
|
+
} else {
|
|
195
|
+
setSelected(!isSelected);
|
|
196
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
|
|
197
|
+
}
|
|
198
|
+
}, [onChange, groupState, isSelected, propsIsSelected]);
|
|
199
|
+
return /*#__PURE__*/React__default.createElement(StyledRadio, _extends({}, forwardedProps, {
|
|
200
|
+
$isColored: isColored,
|
|
201
|
+
$isDisabled: isDisabled,
|
|
202
|
+
$isFocusVisible: isFocusVisible,
|
|
203
|
+
$isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
|
|
204
|
+
$isRequired: isRequired,
|
|
205
|
+
$isSelected: isSelected || isControlled && propsIsSelected,
|
|
206
|
+
$theme: theme,
|
|
207
|
+
className: classNames(Radio.className, className),
|
|
208
|
+
ref: ref
|
|
209
|
+
}), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
|
|
210
|
+
icon: mdiRadioboxMarked
|
|
211
|
+
}) : /*#__PURE__*/React__default.createElement(Icon, {
|
|
212
|
+
icon: mdiRadioboxBlank
|
|
213
|
+
}), children ? /*#__PURE__*/React__default.createElement("span", {
|
|
214
|
+
className: "label"
|
|
215
|
+
}, children) : null, /*#__PURE__*/React__default.createElement("input", _extends({}, inputProps, focusProps, {
|
|
216
|
+
"aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : 'false',
|
|
217
|
+
"aria-disabled": isDisabled,
|
|
218
|
+
"aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
|
|
219
|
+
"aria-label": ariaLabel,
|
|
220
|
+
"aria-labelledby": ariaLabelledby,
|
|
221
|
+
"aria-readonly": isReadOnly,
|
|
222
|
+
"aria-required": isRequired,
|
|
223
|
+
autoFocus: autoFocus,
|
|
224
|
+
checked: isSelected || isControlled && propsIsSelected ? true : false,
|
|
225
|
+
disabled: isDisabled,
|
|
226
|
+
name: name,
|
|
227
|
+
onChange: handleChange,
|
|
228
|
+
ref: inputRef,
|
|
229
|
+
type: "radio",
|
|
230
|
+
value: value
|
|
231
|
+
})));
|
|
232
|
+
});
|
|
233
|
+
Radio.className = CLASSNAME;
|
|
234
|
+
Radio.displayName = COMPONENT_NAME;
|
|
235
|
+
|
|
236
|
+
export { Radio as R };
|
|
237
|
+
//# sourceMappingURL=Radio2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Radio2.js","sources":["../../src/components/radio/styles.ts","../../src/components/radio/Radio.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledRadioProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadio = styled.label<StyledRadioProps>`\n height: fit-content;\n position: relative;\n width: fit-content;\n ${baseStyling}\n\n align-items: center;\n background: none;\n border: none;\n display: inline-flex;\n\n input {\n height: 100%;\n margin: 0;\n opacity: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n width: 100%;\n }\n\n span.label {\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n `\n : $isInvalid\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n `\n : css`\n color: var(--redsift-color-${$theme}-components-radio-text-default);\n `}\n\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding-left: 4px;\n padding-right: 16px;\n\n [dir='rtl'] & {\n padding-left: 16px;\n padding-right: 4px;\n }\n }\n\n .redsift-icon {\n box-sizing: content-box;\n padding: 2px;\n width: 24px;\n\n ${({ $isColored, $isDisabled, $isInvalid, $isFocusVisible, $theme }) => css`\n ${$isDisabled\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-fill-disabled);\n `\n : $isInvalid\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-fill-invalid);\n `\n : css`\n color: ${$isColored\n ? `var(--redsift-color-${$theme}-components-radio-fill-default)`\n : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};\n `}\n\n ${$isFocusVisible && !$isDisabled\n ? css`\n background-color: ${$isColored\n ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n border-radius: 16px;\n `\n : ''}\n `}\n }\n\n &:hover,\n &:focus-visible {\n outline: none;\n\n ${({ $isColored, $isDisabled, $isInvalid, $theme }) =>\n !$isDisabled\n ? css`\n .redsift-icon {\n ${$isInvalid\n ? css`\n background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);\n `\n : css`\n background-color: ${$isColored\n ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n `}\n border-radius: 16px;\n }\n `\n : ''}\n }\n`;\n","import React, {\n ComponentProps,\n forwardRef,\n MutableRefObject,\n useCallback,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { mdiRadioboxBlank, mdiRadioboxMarked } from '@redsift/icons';\nimport { Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { RadioGroupContext } from '../radio-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { RadioProps } from './types';\nimport { StyledRadio } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Radio';\nconst CLASSNAME = 'redsift-radio';\n\n/**\n * The Radio component.\n * Works both inside a RadioGroup or as standalone.\n * Can be used as controlled or uncontrolled.\n */\nexport const Radio: Comp<RadioProps, HTMLLabelElement> = forwardRef((props, ref) => {\n const groupState = useContext(RadioGroupContext);\n\n let {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n autoFocus,\n children,\n className,\n defaultSelected,\n inputProps,\n inputRef,\n isColored = true,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n isSelected: propsIsSelected,\n name,\n onChange,\n theme: propsTheme,\n value,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n isDisabled = isDisabled ?? groupState?.isDisabled;\n isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n const [isSelected, setSelected] = useState(\n Boolean(propsIsSelected ?? defaultSelected ?? Boolean(groupState?.value && groupState.value === value))\n );\n const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n useEffect(() => {\n setSelected(Boolean(propsIsSelected ?? defaultSelected));\n }, [propsIsSelected, defaultSelected]);\n\n useEffect(() => {\n if (groupState) {\n setSelected(groupState.value === value);\n }\n }, [groupState?.value]);\n\n warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Radio');\n\n if (groupState) {\n if (propsIsSelected != null) {\n console.warn(\n 'isSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.'\n );\n }\n if (defaultSelected != null) {\n console.warn(\n 'defaultSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.'\n );\n }\n if (props.value == null) {\n console.warn(\n 'A <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.'\n );\n }\n }\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n if (groupState) {\n groupState.setValue(value as string);\n }\n\n if (isControlled) {\n onChange?.(!propsIsSelected, value, name, event, groupState!);\n } else {\n setSelected(!isSelected);\n onChange?.(!isSelected, value, name, event, groupState!);\n }\n },\n [onChange, groupState, isSelected, propsIsSelected]\n );\n\n return (\n <StyledRadio\n {...forwardedProps}\n $isColored={isColored}\n $isDisabled={isDisabled}\n $isFocusVisible={isFocusVisible}\n $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n $isRequired={isRequired}\n $isSelected={isSelected || (isControlled && propsIsSelected)}\n $theme={theme}\n className={classNames(Radio.className, className)}\n ref={ref as MutableRefObject<HTMLLabelElement>}\n >\n {isSelected || (isControlled && propsIsSelected) ? (\n <Icon icon={mdiRadioboxMarked} />\n ) : (\n <Icon icon={mdiRadioboxBlank} />\n )}\n {children ? <span className=\"label\">{children}</span> : null}\n <input\n {...inputProps}\n {...focusProps}\n aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : 'false'}\n aria-disabled={isDisabled}\n aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-readonly={isReadOnly}\n aria-required={isRequired}\n autoFocus={autoFocus}\n checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n disabled={isDisabled}\n name={name}\n onChange={handleChange}\n ref={inputRef as MutableRefObject<HTMLInputElement>}\n type=\"radio\"\n value={value}\n />\n </StyledRadio>\n );\n});\nRadio.className = CLASSNAME;\nRadio.displayName = COMPONENT_NAME;\n"],"names":["StyledRadio","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isFocusVisible","_ref3","COMPONENT_NAME","CLASSNAME","Radio","forwardRef","props","ref","_isDisabled","_isReadOnly","groupState","useContext","RadioGroupContext","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","setValue","React","createElement","_extends","$isRequired","$isSelected","classNames","Icon","icon","mdiRadioboxMarked","mdiRadioboxBlank","checked","disabled","type","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef, useState, useEffect } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { R as RadioGroupContext } from './context4.js';
|
|
5
|
+
import styled, { css } from 'styled-components';
|
|
6
|
+
import { i as baseStyling } from './styles4.js';
|
|
7
|
+
import { C as ColorPalette } from './colors.js';
|
|
8
|
+
import { u as useTheme, a as ThemeProvider } from './useTheme.js';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Context props.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Component orientation.
|
|
16
|
+
*/
|
|
17
|
+
const RadioGroupOrientation = {
|
|
18
|
+
horizontal: 'horizontal',
|
|
19
|
+
vertical: 'vertical'
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Component props.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Component style.
|
|
28
|
+
*/
|
|
29
|
+
const StyledRadioGroup = styled.div`
|
|
30
|
+
${baseStyling}
|
|
31
|
+
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
|
|
35
|
+
${_ref => {
|
|
36
|
+
let {
|
|
37
|
+
$orientation
|
|
38
|
+
} = _ref;
|
|
39
|
+
return $orientation === RadioGroupOrientation.vertical ? `
|
|
40
|
+
div.redsift-radio-group-boxes {
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
}
|
|
44
|
+
` : `
|
|
45
|
+
div.redsift-radio-group-boxes {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
flex-wrap: wrap;
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
51
|
+
}}
|
|
52
|
+
|
|
53
|
+
span.redsift-radio-group-label {
|
|
54
|
+
font-family: var(--redsift-typography-body-font-family);
|
|
55
|
+
font-weight: var(--redsift-typography-body-font-weight);
|
|
56
|
+
font-size: var(--redsift-typography-body-font-size);
|
|
57
|
+
line-height: var(--redsift-typography-body-line-height);
|
|
58
|
+
|
|
59
|
+
${_ref2 => {
|
|
60
|
+
let {
|
|
61
|
+
$isDisabled,
|
|
62
|
+
$isInvalid,
|
|
63
|
+
$theme
|
|
64
|
+
} = _ref2;
|
|
65
|
+
return $isDisabled ? css`
|
|
66
|
+
color: var(--redsift-color-${$theme}-components-radio-text-disabled);
|
|
67
|
+
` : $isInvalid ? css`
|
|
68
|
+
color: var(--redsift-color-${$theme}-components-radio-text-invalid);
|
|
69
|
+
` : css`
|
|
70
|
+
color: var(--redsift-color-${$theme}-components-radio-text-default);
|
|
71
|
+
`;
|
|
72
|
+
}}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
span.redsift-radio-group-description {
|
|
76
|
+
font-family: var(--redsift-typography-helper-font-family);
|
|
77
|
+
font-weight: var(--redsift-typography-helper-font-weight);
|
|
78
|
+
font-size: var(--redsift-typography-helper-font-size);
|
|
79
|
+
line-height: var(--redsift-typography-helper-line-height);
|
|
80
|
+
|
|
81
|
+
${_ref3 => {
|
|
82
|
+
let {
|
|
83
|
+
$isDisabled,
|
|
84
|
+
$isInvalid,
|
|
85
|
+
$theme
|
|
86
|
+
} = _ref3;
|
|
87
|
+
return $isDisabled ? css`
|
|
88
|
+
color: var(--redsift-color-${$theme}-components-radio-text-disabled);
|
|
89
|
+
` : $isInvalid ? css`
|
|
90
|
+
color: var(--redsift-color-${$theme}-components-radio-text-invalid);
|
|
91
|
+
` : css`
|
|
92
|
+
color: var(--redsift-color-${$theme}-components-radio-text-default);
|
|
93
|
+
`;
|
|
94
|
+
}}
|
|
95
|
+
}
|
|
96
|
+
`;
|
|
97
|
+
|
|
98
|
+
const _excluded = ["children", "className", "color", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
|
|
99
|
+
const COMPONENT_NAME = 'RadioGroup';
|
|
100
|
+
const CLASSNAME = 'redsift-radio-group';
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* The RadioGroup component.
|
|
104
|
+
* Can be used as controlled or uncontrolled.
|
|
105
|
+
*/
|
|
106
|
+
const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
|
|
107
|
+
const {
|
|
108
|
+
children,
|
|
109
|
+
className,
|
|
110
|
+
color = ColorPalette.primary,
|
|
111
|
+
defaultValue,
|
|
112
|
+
description,
|
|
113
|
+
isDisabled,
|
|
114
|
+
isInvalid,
|
|
115
|
+
isReadOnly,
|
|
116
|
+
isRequired,
|
|
117
|
+
label,
|
|
118
|
+
onChange,
|
|
119
|
+
orientation = RadioGroupOrientation.vertical,
|
|
120
|
+
theme: propsTheme,
|
|
121
|
+
value
|
|
122
|
+
} = props,
|
|
123
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
124
|
+
const theme = useTheme(propsTheme);
|
|
125
|
+
const [selectedValue, setValue] = useState(value || defaultValue || '');
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
if (value) {
|
|
128
|
+
state.setValue(value);
|
|
129
|
+
}
|
|
130
|
+
}, [value]);
|
|
131
|
+
const state = {
|
|
132
|
+
value: selectedValue,
|
|
133
|
+
isDisabled: isDisabled || false,
|
|
134
|
+
isReadOnly: isReadOnly || false,
|
|
135
|
+
setValue(value) {
|
|
136
|
+
if (isReadOnly || isDisabled) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
const previousValue = selectedValue;
|
|
140
|
+
setValue(value);
|
|
141
|
+
if (value !== previousValue && onChange) {
|
|
142
|
+
onChange(value);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
|
147
|
+
value: {
|
|
148
|
+
theme
|
|
149
|
+
}
|
|
150
|
+
}, /*#__PURE__*/React__default.createElement(StyledRadioGroup, _extends({
|
|
151
|
+
color: color
|
|
152
|
+
}, forwardedProps, {
|
|
153
|
+
$isDisabled: isDisabled,
|
|
154
|
+
$isInvalid: isInvalid || isRequired && selectedValue.length === 0,
|
|
155
|
+
$isReadOnly: isReadOnly,
|
|
156
|
+
$orientation: orientation,
|
|
157
|
+
$theme: theme,
|
|
158
|
+
"aria-disabled": isDisabled,
|
|
159
|
+
className: classNames(RadioGroup.className, className),
|
|
160
|
+
ref: ref,
|
|
161
|
+
role: "radiogroup"
|
|
162
|
+
}), /*#__PURE__*/React__default.createElement("span", {
|
|
163
|
+
className: `${RadioGroup.className}-label`
|
|
164
|
+
}, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
|
|
165
|
+
className: `${RadioGroup.className}-boxes`
|
|
166
|
+
}, /*#__PURE__*/React__default.createElement(RadioGroupContext.Provider, {
|
|
167
|
+
value: state
|
|
168
|
+
}, children)), /*#__PURE__*/React__default.createElement("span", {
|
|
169
|
+
className: `${RadioGroup.className}-description`
|
|
170
|
+
}, description)));
|
|
171
|
+
});
|
|
172
|
+
RadioGroup.className = CLASSNAME;
|
|
173
|
+
RadioGroup.displayName = COMPONENT_NAME;
|
|
174
|
+
|
|
175
|
+
export { RadioGroupOrientation as R, RadioGroup as a };
|
|
176
|
+
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../src/components/radio-group/types.ts","../../src/components/radio-group/styles.ts","../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { StylingProps, Theme, ValueOf } from '../../types';\n\n/**\n * Context props.\n */\nexport type RadioGroupState = {\n /** Whether the radio group is disabled or not. */\n readonly isDisabled: boolean;\n /** Whether the radio group is read only or not. */\n readonly isReadOnly: boolean;\n /** Sets the selected value. */\n setValue(value: string): void;\n /** Current selected value. */\n readonly value: string;\n};\n\n/**\n * Component orientation.\n */\nexport const RadioGroupOrientation = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n} as const;\nexport type RadioGroupOrientation = ValueOf<typeof RadioGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface RadioGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n /**\n * Default selected value.\n * Used for uncontrolled version.\n */\n defaultValue?: string;\n /** Description of the radio group. */\n description?: string;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is invalid or not. */\n isInvalid?: boolean;\n /** Whether the component is read only or not. */\n isReadOnly?: boolean;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n /** Label of the radio group. */\n label?: string;\n /** Method to handle component change. */\n onChange?(values: string): void;\n /** Method to handle component change. */\n orientation?: RadioGroupOrientation;\n /** Theme. */\n theme?: Theme;\n /**\n * Currently selected value.\n * Used for controlled version.\n */\n value?: string;\n}\n\nexport type StyledRadioGroupProps = Omit<\n RadioGroupProps,\n 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'\n> & {\n $isDisabled: RadioGroupProps['isDisabled'];\n $isInvalid: RadioGroupProps['isInvalid'];\n $isReadOnly: RadioGroupProps['isReadOnly'];\n $orientation: RadioGroupProps['orientation'];\n $theme: RadioGroupProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { RadioGroupOrientation, StyledRadioGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadioGroup = styled.div<StyledRadioGroupProps>`\n ${baseStyling}\n\n display: flex;\n flex-direction: column;\n\n ${({ $orientation }) =>\n $orientation === RadioGroupOrientation.vertical\n ? `\n div.redsift-radio-group-boxes {\n display: flex;\n flex-direction: column;\n }\n `\n : `\n div.redsift-radio-group-boxes {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n }\n `}\n\n span.redsift-radio-group-label {\n font-family: var(--redsift-typography-body-font-family);\n font-weight: var(--redsift-typography-body-font-weight);\n font-size: var(--redsift-typography-body-font-size);\n line-height: var(--redsift-typography-body-line-height);\n\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n `\n : $isInvalid\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n `\n : css`\n color: var(--redsift-color-${$theme}-components-radio-text-default);\n `}\n }\n\n span.redsift-radio-group-description {\n font-family: var(--redsift-typography-helper-font-family);\n font-weight: var(--redsift-typography-helper-font-weight);\n font-size: var(--redsift-typography-helper-font-size);\n line-height: var(--redsift-typography-helper-line-height);\n\n ${({ $isDisabled, $isInvalid, $theme }) =>\n $isDisabled\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n `\n : $isInvalid\n ? css`\n color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n `\n : css`\n color: var(--redsift-color-${$theme}-components-radio-text-default);\n `}\n }\n`;\n","import React, { forwardRef, RefObject, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ColorPalette } from '../../types';\nimport { RadioGroupOrientation, RadioGroupProps } from './types';\nimport { RadioGroupContext } from './context';\nimport { StyledRadioGroup } from './styles';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'RadioGroup';\nconst CLASSNAME = 'redsift-radio-group';\n\n/**\n * The RadioGroup component.\n * Can be used as controlled or uncontrolled.\n */\nexport const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n color = ColorPalette.primary,\n defaultValue,\n description,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n label,\n onChange,\n orientation = RadioGroupOrientation.vertical,\n theme: propsTheme,\n value,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n const [selectedValue, setValue] = useState<string>(value || defaultValue || '');\n useEffect(() => {\n if (value) {\n state.setValue(value);\n }\n }, [value]);\n\n const state = {\n value: selectedValue,\n isDisabled: isDisabled || false,\n isReadOnly: isReadOnly || false,\n setValue(value: string) {\n if (isReadOnly || isDisabled) {\n return;\n }\n\n const previousValue = selectedValue;\n setValue(value);\n if (value !== previousValue && onChange) {\n onChange(value);\n }\n },\n };\n\n return (\n <ThemeProvider value={{ theme }}>\n <StyledRadioGroup\n color={color}\n {...forwardedProps}\n $isDisabled={isDisabled}\n $isInvalid={isInvalid || (isRequired && selectedValue.length === 0)}\n $isReadOnly={isReadOnly}\n $orientation={orientation}\n $theme={theme}\n aria-disabled={isDisabled}\n className={classNames(RadioGroup.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n role=\"radiogroup\"\n >\n <span className={`${RadioGroup.className}-label`}>\n {label}\n {isRequired ? ' *' : null}\n </span>\n <div className={`${RadioGroup.className}-boxes`}>\n <RadioGroupContext.Provider value={state}>{children}</RadioGroupContext.Provider>\n </div>\n <span className={`${RadioGroup.className}-description`}>{description}</span>\n </StyledRadioGroup>\n </ThemeProvider>\n );\n});\nRadioGroup.className = CLASSNAME;\nRadioGroup.displayName = COMPONENT_NAME;\n"],"names":["RadioGroupOrientation","horizontal","vertical","StyledRadioGroup","styled","div","baseStyling","_ref","$orientation","_ref2","$isDisabled","$isInvalid","$theme","css","_ref3","COMPONENT_NAME","CLASSNAME","RadioGroup","forwardRef","props","ref","children","className","color","ColorPalette","primary","defaultValue","description","isDisabled","isInvalid","isReadOnly","isRequired","label","onChange","orientation","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","selectedValue","setValue","useState","useEffect","state","previousValue","React","createElement","ThemeProvider","_extends","length","$isReadOnly","classNames","role","RadioGroupContext","Provider","displayName"],"mappings":"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"}
|