@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.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-cjs/packages/lab/src/app-header/AppHeader.css.js +1 -1
- package/dist-cjs/packages/lab/src/button-bar/OrderedButton.js +1 -3
- package/dist-cjs/packages/lab/src/button-bar/OrderedButton.js.map +1 -1
- package/dist-cjs/packages/lab/src/carousel/Carousel.js +7 -9
- package/dist-cjs/packages/lab/src/carousel/Carousel.js.map +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/Color.js +9 -0
- package/dist-cjs/packages/lab/src/color-chooser/Color.js.map +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/ColorChooser.css.js +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/ColorHelpers.js +2 -2
- package/dist-cjs/packages/lab/src/color-chooser/ColorHelpers.js.map +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/HexInput.css.js +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/color-utils.js +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/color-utils.js.map +1 -1
- package/dist-cjs/packages/lab/src/contact-details/ContactDetails.css.js +1 -1
- package/dist-cjs/packages/lab/src/dialog/Dialog.css.js +1 -1
- package/dist-cjs/packages/lab/src/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/packages/lab/src/dropdown/useDropdownBase.js +17 -7
- package/dist-cjs/packages/lab/src/dropdown/useDropdownBase.js.map +1 -1
- package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/packages/lab/src/index.js +0 -25
- package/dist-cjs/packages/lab/src/index.js.map +1 -1
- package/dist-cjs/packages/lab/src/layer-layout/LayerLayout.css.js +1 -1
- package/dist-cjs/packages/lab/src/list/ListItem.js +1 -5
- package/dist-cjs/packages/lab/src/list/ListItem.js.map +1 -1
- package/dist-cjs/packages/lab/src/pill/Pill.css.js +1 -1
- package/dist-cjs/packages/lab/src/pill/internal/PillCheckbox.js +1 -5
- package/dist-cjs/packages/lab/src/pill/internal/PillCheckbox.js.map +1 -1
- package/dist-cjs/packages/lab/src/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-cjs/packages/lab/src/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-cjs/packages/lab/src/slider/Slider.css.js +1 -1
- package/dist-cjs/packages/lab/src/tabs/Tab.css.js +1 -1
- package/dist-cjs/packages/lab/src/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-cjs/packages/lab/src/tabs/Tabstrip.css.js +1 -1
- package/dist-cjs/packages/lab/src/toggle-button/ToggleButton.css.js +1 -1
- package/dist-cjs/packages/lab/src/toolbar/Toolbar.css.js +1 -1
- package/dist-es/packages/lab/src/app-header/AppHeader.css.js +1 -1
- package/dist-es/packages/lab/src/button-bar/OrderedButton.js +1 -3
- package/dist-es/packages/lab/src/button-bar/OrderedButton.js.map +1 -1
- package/dist-es/packages/lab/src/calendar/internal/CalendarCarousel.js +2 -2
- package/dist-es/packages/lab/src/calendar/internal/utils.js +1 -1
- package/dist-es/packages/lab/src/calendar/useCalendar.js +1 -1
- package/dist-es/packages/lab/src/carousel/Carousel.js +7 -9
- package/dist-es/packages/lab/src/carousel/Carousel.js.map +1 -1
- package/dist-es/packages/lab/src/cascading-menu/internal/useRefsManager.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/Color.js +9 -0
- package/dist-es/packages/lab/src/color-chooser/Color.js.map +1 -1
- package/dist-es/packages/lab/src/color-chooser/ColorChooser.css.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/ColorHelpers.js +2 -2
- package/dist-es/packages/lab/src/color-chooser/ColorHelpers.js.map +1 -1
- package/dist-es/packages/lab/src/color-chooser/HexInput.css.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/color-utils.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/color-utils.js.map +1 -1
- package/dist-es/packages/lab/src/contact-details/ContactDetails.css.js +1 -1
- package/dist-es/packages/lab/src/dialog/Dialog.css.js +1 -1
- package/dist-es/packages/lab/src/dialog/DialogContent.css.js +1 -1
- package/dist-es/packages/lab/src/dropdown/useDropdownBase.js +17 -7
- package/dist-es/packages/lab/src/dropdown/useDropdownBase.js.map +1 -1
- package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/packages/lab/src/index.js +0 -12
- package/dist-es/packages/lab/src/index.js.map +1 -1
- package/dist-es/packages/lab/src/layer-layout/LayerLayout.css.js +1 -1
- package/dist-es/packages/lab/src/list/ListItem.js +1 -5
- package/dist-es/packages/lab/src/list/ListItem.js.map +1 -1
- package/dist-es/packages/lab/src/list-deprecated/useList.js +1 -1
- package/dist-es/packages/lab/src/pill/Pill.css.js +1 -1
- package/dist-es/packages/lab/src/pill/internal/PillCheckbox.js +1 -5
- package/dist-es/packages/lab/src/pill/internal/PillCheckbox.js.map +1 -1
- package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-es/packages/lab/src/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-es/packages/lab/src/responsive/useDynamicCollapse.js +1 -1
- package/dist-es/packages/lab/src/skip-link/internal/useManageFocusOnTarget.js +1 -1
- package/dist-es/packages/lab/src/slider/Slider.css.js +1 -1
- package/dist-es/packages/lab/src/slider/internal/useSliderMouseDown.js +1 -1
- package/dist-es/packages/lab/src/tabs/Tab.css.js +1 -1
- package/dist-es/packages/lab/src/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-es/packages/lab/src/tabs/Tabstrip.css.js +1 -1
- package/dist-es/packages/lab/src/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/packages/lab/src/toolbar/Toolbar.css.js +1 -1
- package/dist-es/packages/lab/src/toolbar/toolbar-field/useToolbarField.js +1 -1
- package/dist-es/packages/lab/src/utils/useEventCallback.js +1 -1
- package/dist-types/color-chooser/Color.d.ts +2 -0
- package/dist-types/color-chooser/ColorHelpers.d.ts +3 -1
- package/dist-types/index.d.ts +0 -2
- package/dist-types/utils/index.d.ts +0 -1
- package/package.json +3 -3
- package/dist-cjs/packages/lab/src/checkbox/Checkbox.css.js +0 -9
- package/dist-cjs/packages/lab/src/checkbox/Checkbox.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/Checkbox.js +0 -71
- package/dist-cjs/packages/lab/src/checkbox/Checkbox.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/CheckboxBase.css.js +0 -9
- package/dist-cjs/packages/lab/src/checkbox/CheckboxBase.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/CheckboxBase.js +0 -99
- package/dist-cjs/packages/lab/src/checkbox/CheckboxBase.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/CheckboxGroup.css.js +0 -9
- package/dist-cjs/packages/lab/src/checkbox/CheckboxGroup.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/CheckboxGroup.js +0 -57
- package/dist-cjs/packages/lab/src/checkbox/CheckboxGroup.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/CheckboxIcon.css.js +0 -9
- package/dist-cjs/packages/lab/src/checkbox/CheckboxIcon.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/CheckboxIcon.js +0 -33
- package/dist-cjs/packages/lab/src/checkbox/CheckboxIcon.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/assets/CheckboxCheckedIcon.js +0 -33
- package/dist-cjs/packages/lab/src/checkbox/assets/CheckboxCheckedIcon.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/assets/CheckboxIndeterminateIcon.js +0 -37
- package/dist-cjs/packages/lab/src/checkbox/assets/CheckboxIndeterminateIcon.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/assets/CheckboxUncheckedIcon.js +0 -26
- package/dist-cjs/packages/lab/src/checkbox/assets/CheckboxUncheckedIcon.js.map +0 -1
- package/dist-cjs/packages/lab/src/checkbox/internal/CheckboxGroupContext.js +0 -13
- package/dist-cjs/packages/lab/src/checkbox/internal/CheckboxGroupContext.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButton.css.js +0 -9
- package/dist-cjs/packages/lab/src/radio-button/RadioButton.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButton.js +0 -62
- package/dist-cjs/packages/lab/src/radio-button/RadioButton.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonBase.css.js +0 -9
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonBase.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonBase.js +0 -142
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonBase.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonGroup.css.js +0 -9
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonGroup.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonGroup.js +0 -103
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonGroup.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonIcon.css.js +0 -9
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonIcon.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonIcon.js +0 -39
- package/dist-cjs/packages/lab/src/radio-button/RadioButtonIcon.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/internal/RadioGroupContext.js +0 -13
- package/dist-cjs/packages/lab/src/radio-button/internal/RadioGroupContext.js.map +0 -1
- package/dist-cjs/packages/lab/src/radio-button/internal/useRadioGroup.js +0 -13
- package/dist-cjs/packages/lab/src/radio-button/internal/useRadioGroup.js.map +0 -1
- package/dist-cjs/packages/lab/src/utils/capitalize.js +0 -10
- package/dist-cjs/packages/lab/src/utils/capitalize.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/Checkbox.css.js +0 -7
- package/dist-es/packages/lab/src/checkbox/Checkbox.css.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/Checkbox.js +0 -67
- package/dist-es/packages/lab/src/checkbox/Checkbox.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/CheckboxBase.css.js +0 -7
- package/dist-es/packages/lab/src/checkbox/CheckboxBase.css.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/CheckboxBase.js +0 -95
- package/dist-es/packages/lab/src/checkbox/CheckboxBase.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/CheckboxGroup.css.js +0 -7
- package/dist-es/packages/lab/src/checkbox/CheckboxGroup.css.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/CheckboxGroup.js +0 -53
- package/dist-es/packages/lab/src/checkbox/CheckboxGroup.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/CheckboxIcon.css.js +0 -7
- package/dist-es/packages/lab/src/checkbox/CheckboxIcon.css.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/CheckboxIcon.js +0 -29
- package/dist-es/packages/lab/src/checkbox/CheckboxIcon.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/assets/CheckboxCheckedIcon.js +0 -29
- package/dist-es/packages/lab/src/checkbox/assets/CheckboxCheckedIcon.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/assets/CheckboxIndeterminateIcon.js +0 -33
- package/dist-es/packages/lab/src/checkbox/assets/CheckboxIndeterminateIcon.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/assets/CheckboxUncheckedIcon.js +0 -22
- package/dist-es/packages/lab/src/checkbox/assets/CheckboxUncheckedIcon.js.map +0 -1
- package/dist-es/packages/lab/src/checkbox/internal/CheckboxGroupContext.js +0 -9
- package/dist-es/packages/lab/src/checkbox/internal/CheckboxGroupContext.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButton.css.js +0 -7
- package/dist-es/packages/lab/src/radio-button/RadioButton.css.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButton.js +0 -58
- package/dist-es/packages/lab/src/radio-button/RadioButton.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButtonBase.css.js +0 -7
- package/dist-es/packages/lab/src/radio-button/RadioButtonBase.css.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButtonBase.js +0 -138
- package/dist-es/packages/lab/src/radio-button/RadioButtonBase.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.css.js +0 -7
- package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.css.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.js +0 -99
- package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.css.js +0 -7
- package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.css.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.js +0 -34
- package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/internal/RadioGroupContext.js +0 -9
- package/dist-es/packages/lab/src/radio-button/internal/RadioGroupContext.js.map +0 -1
- package/dist-es/packages/lab/src/radio-button/internal/useRadioGroup.js +0 -9
- package/dist-es/packages/lab/src/radio-button/internal/useRadioGroup.js.map +0 -1
- package/dist-es/packages/lab/src/utils/capitalize.js +0 -6
- package/dist-es/packages/lab/src/utils/capitalize.js.map +0 -1
- package/dist-types/checkbox/Checkbox.d.ts +0 -9
- package/dist-types/checkbox/CheckboxBase.d.ts +0 -18
- package/dist-types/checkbox/CheckboxGroup.d.ts +0 -35
- package/dist-types/checkbox/CheckboxIcon.d.ts +0 -9
- package/dist-types/checkbox/assets/CheckboxCheckedIcon.d.ts +0 -4
- package/dist-types/checkbox/assets/CheckboxIndeterminateIcon.d.ts +0 -4
- package/dist-types/checkbox/assets/CheckboxUncheckedIcon.d.ts +0 -4
- package/dist-types/checkbox/assets/index.d.ts +0 -3
- package/dist-types/checkbox/index.d.ts +0 -5
- package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts +0 -9
- package/dist-types/radio-button/RadioButton.d.ts +0 -22
- package/dist-types/radio-button/RadioButtonBase.d.ts +0 -22
- package/dist-types/radio-button/RadioButtonGroup.d.ts +0 -19
- package/dist-types/radio-button/RadioButtonIcon.d.ts +0 -13
- package/dist-types/radio-button/index.d.ts +0 -4
- package/dist-types/radio-button/internal/RadioGroupContext.d.ts +0 -7
- package/dist-types/radio-button/internal/useRadioGroup.d.ts +0 -1
- package/dist-types/utils/capitalize.d.ts +0 -1
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import { forwardRef, useState } from 'react';
|
|
4
|
-
import '../form-field-context/FormFieldContext.js';
|
|
5
|
-
import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
6
|
-
import { makePrefixer, useControlled, useIsFocusVisible, useForkRef } from '@salt-ds/core';
|
|
7
|
-
import { useRadioGroup } from './internal/useRadioGroup.js';
|
|
8
|
-
import { RadioButtonIcon } from './RadioButtonIcon.js';
|
|
9
|
-
import './RadioButtonBase.css.js';
|
|
10
|
-
|
|
11
|
-
const withBaseName = makePrefixer("saltRadioButtonBase");
|
|
12
|
-
const RadioButtonBase = forwardRef(function RadioBase(props, ref) {
|
|
13
|
-
var _a;
|
|
14
|
-
const {
|
|
15
|
-
checked: checkedProp,
|
|
16
|
-
defaultChecked,
|
|
17
|
-
name: nameProp,
|
|
18
|
-
className,
|
|
19
|
-
disabled: disabledProp,
|
|
20
|
-
icon: iconProp,
|
|
21
|
-
value,
|
|
22
|
-
onFocus,
|
|
23
|
-
onBlur,
|
|
24
|
-
onChange,
|
|
25
|
-
id,
|
|
26
|
-
tabIndex,
|
|
27
|
-
...rest
|
|
28
|
-
} = props;
|
|
29
|
-
useFormFieldProps();
|
|
30
|
-
const radioGroup = useRadioGroup();
|
|
31
|
-
let radioGroupChecked = checkedProp;
|
|
32
|
-
let name = nameProp;
|
|
33
|
-
if (radioGroup) {
|
|
34
|
-
if (typeof radioGroupChecked === "undefined") {
|
|
35
|
-
radioGroupChecked = radioGroup.value === props.value;
|
|
36
|
-
}
|
|
37
|
-
if (typeof name === "undefined") {
|
|
38
|
-
name = radioGroup.name;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
const [checked, setCheckedState] = useControlled({
|
|
42
|
-
controlled: radioGroupChecked,
|
|
43
|
-
default: Boolean(defaultChecked),
|
|
44
|
-
name: "RadioBase",
|
|
45
|
-
state: "checked"
|
|
46
|
-
});
|
|
47
|
-
const formFieldProps = useFormFieldProps();
|
|
48
|
-
let disabled = disabledProp;
|
|
49
|
-
if (formFieldProps) {
|
|
50
|
-
if (typeof disabled === "undefined") {
|
|
51
|
-
disabled = (_a = formFieldProps.a11yProps) == null ? void 0 : _a.disabled;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
const [focusVisible, setFocusVisible] = useState(false);
|
|
55
|
-
if (disabled && focusVisible) {
|
|
56
|
-
setFocusVisible(false);
|
|
57
|
-
}
|
|
58
|
-
const {
|
|
59
|
-
isFocusVisibleRef,
|
|
60
|
-
onFocus: handleFocusVisible,
|
|
61
|
-
onBlur: handleBlurVisible,
|
|
62
|
-
ref: focusVisibleRef
|
|
63
|
-
} = useIsFocusVisible();
|
|
64
|
-
const handleRef = useForkRef(
|
|
65
|
-
ref,
|
|
66
|
-
focusVisibleRef
|
|
67
|
-
);
|
|
68
|
-
const handleFocus = (event) => {
|
|
69
|
-
if (formFieldProps && formFieldProps.onFocus) {
|
|
70
|
-
formFieldProps.onFocus(event);
|
|
71
|
-
}
|
|
72
|
-
handleFocusVisible(event);
|
|
73
|
-
if (isFocusVisibleRef.current) {
|
|
74
|
-
setFocusVisible(true);
|
|
75
|
-
}
|
|
76
|
-
if (onFocus) {
|
|
77
|
-
onFocus(event);
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
const handleBlur = (event) => {
|
|
81
|
-
if (formFieldProps && formFieldProps.onBlur) {
|
|
82
|
-
formFieldProps.onBlur(event);
|
|
83
|
-
}
|
|
84
|
-
handleBlurVisible();
|
|
85
|
-
setFocusVisible(false);
|
|
86
|
-
if (onBlur) {
|
|
87
|
-
onBlur(event);
|
|
88
|
-
}
|
|
89
|
-
};
|
|
90
|
-
const handleInputChange = (event) => {
|
|
91
|
-
const newChecked = event.target.checked;
|
|
92
|
-
setCheckedState(newChecked);
|
|
93
|
-
if (onChange) {
|
|
94
|
-
onChange(event);
|
|
95
|
-
}
|
|
96
|
-
if (radioGroup && radioGroup.onChange) {
|
|
97
|
-
radioGroup.onChange(event);
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
const RadioIcon = iconProp || RadioButtonIcon;
|
|
101
|
-
return /* @__PURE__ */ jsx("span", {
|
|
102
|
-
className: clsx(
|
|
103
|
-
withBaseName(),
|
|
104
|
-
{
|
|
105
|
-
[withBaseName("disabled")]: disabled,
|
|
106
|
-
[withBaseName("focusVisible")]: focusVisible
|
|
107
|
-
},
|
|
108
|
-
className
|
|
109
|
-
),
|
|
110
|
-
ref: handleRef,
|
|
111
|
-
onBlur: handleBlur,
|
|
112
|
-
onFocus: handleFocus,
|
|
113
|
-
...rest,
|
|
114
|
-
children: /* @__PURE__ */ jsxs("span", {
|
|
115
|
-
className: withBaseName("radioContainer"),
|
|
116
|
-
children: [
|
|
117
|
-
/* @__PURE__ */ jsx("input", {
|
|
118
|
-
className: withBaseName("input"),
|
|
119
|
-
checked: radioGroupChecked,
|
|
120
|
-
defaultChecked,
|
|
121
|
-
disabled,
|
|
122
|
-
id,
|
|
123
|
-
name,
|
|
124
|
-
onChange: handleInputChange,
|
|
125
|
-
type: "radio",
|
|
126
|
-
value,
|
|
127
|
-
tabIndex
|
|
128
|
-
}),
|
|
129
|
-
/* @__PURE__ */ jsx(RadioIcon, {
|
|
130
|
-
checked
|
|
131
|
-
})
|
|
132
|
-
]
|
|
133
|
-
})
|
|
134
|
-
});
|
|
135
|
-
});
|
|
136
|
-
|
|
137
|
-
export { RadioButtonBase };
|
|
138
|
-
//# sourceMappingURL=RadioButtonBase.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonBase.js","sources":["../src/radio-button/RadioButtonBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentType,\n FocusEventHandler,\n forwardRef,\n Ref,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsFocusVisible,\n} from \"@salt-ds/core\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport {\n RadioButtonIcon as DefaultRadioIcon,\n RadioButtonIconProps,\n} from \"./RadioButtonIcon\";\n\nimport \"./RadioButtonBase.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonBase\");\n\nexport interface RadioButtonBaseProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n /**\n * custom icon component\n */\n icon?: ComponentType<RadioButtonIconProps>;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n name?: string;\n defaultChecked?: boolean;\n onFocus?: FocusEventHandler<HTMLSpanElement>;\n onBlur?: FocusEventHandler<HTMLSpanElement>;\n required?: boolean;\n id?: string;\n tabIndex?: number;\n value?: string;\n}\n\nexport const RadioButtonBase = forwardRef<\n HTMLSpanElement,\n RadioButtonBaseProps\n>(function RadioBase(props, ref) {\n const {\n checked: checkedProp,\n defaultChecked,\n name: nameProp,\n className,\n disabled: disabledProp,\n icon: iconProp,\n value,\n onFocus,\n onBlur,\n onChange,\n id,\n tabIndex,\n ...rest\n } = props;\n\n useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n let radioGroupChecked = checkedProp;\n let name = nameProp;\n if (radioGroup) {\n if (typeof radioGroupChecked === \"undefined\") {\n radioGroupChecked = radioGroup.value === props.value;\n }\n if (typeof name === \"undefined\") {\n name = radioGroup.name;\n }\n }\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(defaultChecked),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const formFieldProps = useFormFieldProps();\n\n let disabled = disabledProp;\n if (formFieldProps) {\n if (typeof disabled === \"undefined\") {\n disabled = formFieldProps.a11yProps?.disabled;\n }\n }\n\n const [focusVisible, setFocusVisible] = useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef,\n } = useIsFocusVisible();\n\n const handleRef = useForkRef<HTMLSpanElement>(\n ref,\n focusVisibleRef as Ref<HTMLSpanElement>\n );\n\n const handleFocus: FocusEventHandler<HTMLElement> = (event) => {\n if (formFieldProps && formFieldProps.onFocus) {\n formFieldProps.onFocus(event);\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current) {\n setFocusVisible(true);\n }\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur: FocusEventHandler<HTMLElement> = (event) => {\n if (formFieldProps && formFieldProps.onBlur) {\n formFieldProps.onBlur(event);\n }\n handleBlurVisible();\n setFocusVisible(false);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n if (onChange) {\n onChange(event);\n }\n if (radioGroup && radioGroup.onChange) {\n radioGroup.onChange(event);\n }\n };\n\n const RadioIcon = iconProp || DefaultRadioIcon;\n\n return (\n <span\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"focusVisible\")]: focusVisible,\n },\n className\n )}\n ref={handleRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n {...rest}\n >\n <span className={withBaseName(\"radioContainer\")}>\n <input\n className={withBaseName(\"input\")}\n checked={radioGroupChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={handleInputChange}\n type=\"radio\"\n value={value}\n tabIndex={tabIndex}\n />\n <RadioIcon checked={checked} />\n </span>\n </span>\n );\n});\n"],"names":["DefaultRadioIcon"],"mappings":"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"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/* Styles applied to root component (RadioButton) */\n.salt-density-high {\n --radioButton-group-vertical-label-marginBottom: 4px;\n --radioButton-group-legend-minHeight: 14px;\n --radioButton-group-legend-paddingRight: 16px;\n --radioButton-group-horizontal-legend-marginTop: 2px;\n --radioButton-group-horizontal-legend-marginRight: 12px;\n --radioButton-group-horizontal-legend-paddingRight: 4px;\n --radioButton-group-horizontal-legend-marginBottom: 0px;\n --radioButton-group-vertical-formLabel-paddingRight: 4px;\n --radioButton-group-vertical-formLabel-marginBottom: 4px;\n --radioButton-group-vertical-formLabel-transform: translate(0px, 3px);\n --radioButton-group-formLabel-transform: translate(0px, 3px);\n}\n\n.salt-density-medium {\n --radioButton-group-vertical-label-marginBottom: 6px;\n --radioButton-group-legend-minHeight: 14px;\n --radioButton-group-legend-paddingRight: 16px;\n --radioButton-group-horizontal-legend-marginTop: 1px;\n --radioButton-group-horizontal-legend-marginRight: 24px;\n --radioButton-group-horizontal-legend-paddingRight: 8px;\n --radioButton-group-horizontal-legend-marginBottom: 0px;\n --radioButton-group-vertical-formLabel-paddingRight: 8px;\n --radioButton-group-vertical-formLabel-marginBottom: 6px;\n --radioButton-group-vertical-formLabel-transform: translate(0px, 5px);\n --radioButton-group-formLabel-transform: translate(0px, 5px);\n}\n\n.salt-density-low {\n --radioButton-group-vertical-label-marginBottom: 9px;\n --radioButton-group-legend-minHeight: 14px;\n --radioButton-group-legend-paddingRight: 16px;\n --radioButton-group-horizontal-legend-marginTop: 4px;\n --radioButton-group-horizontal-legend-marginRight: 36px;\n --radioButton-group-horizontal-legend-paddingRight: 12px;\n --radioButton-group-horizontal-legend-marginBottom: 0px;\n --radioButton-group-vertical-formLabel-paddingRight: 12px;\n --radioButton-group-vertical-formLabel-marginBottom: 9px;\n --radioButton-group-vertical-formLabel-transform: translate(0px, 7px);\n --radioButton-group-formLabel-transform: translate(0px, 7px);\n}\n\n.salt-density-touch {\n --radioButton-group-vertical-label-marginBottom: 12px;\n --radioButton-group-legend-minHeight: 16px;\n --radioButton-group-legend-paddingRight: 16px;\n --radioButton-group-horizontal-legend-marginTop: 4px;\n --radioButton-group-horizontal-legend-marginRight: 48px;\n --radioButton-group-horizontal-legend-paddingRight: 16px;\n --radioButton-group-horizontal-legend-marginBottom: 0px;\n --radioButton-group-vertical-formLabel-paddingRight: 16px;\n --radioButton-group-vertical-formLabel-marginBottom: 12px;\n --radioButton-group-vertical-formLabel-transform: translate(0px, 11px);\n --radioButton-group-formLabel-transform: translate(0px, 11px);\n}\n\n/* Styles applied to root element */\n.saltRadioButtonGroup {\n border: 0;\n margin: 0;\n padding: 0;\n display: inline-flex;\n flex-direction: column;\n vertical-align: top;\n}\n\n/* Styles applied when `row=false OR undefined` */\n.saltRadioButtonGroup-vertical .saltRadioButtonGroup-legend.saltFormLabel {\n margin-bottom: var(--saltRadioButton-group-vertical-label-marginBottom, var(--radioButton-group-vertical-label-marginBottom));\n margin-top: var(--saltRadioButton-group-vertical-label-marginTop, 0px);\n\n --saltFormField-label-paddingRight: var(--radioButton-group-vertical-formLabel-paddingRight);\n --saltFormField-label-marginBottom: var(--radioButton-group-vertical-formLabel-marginBottom);\n --saltFormField-label-transform: var(--radioButton-group-vertical-formLabel-transform);\n}\n\n/* Styles applied to the FormField FormLabel component */\n.saltRadioButtonGroup-legend.saltFormLabel {\n --saltFormField-label-transform: var(--radioButton-group-formLabel-transform);\n}\n\n/* Styles applied to the Form Field FormLabel component if `row={true}` */\n.saltRadioButtonGroup-horizontal .saltRadioButtonGroup-legend.saltFormLabel {\n --formField-label-width: auto;\n float: left;\n}\n\n/* Styles applied to the Form Field FormLabel component */\n.saltRadioButtonGroup-legend.saltFormLabel {\n padding-left: var(--saltRadioButton-group-formLabel-paddingLeft, 0px);\n}\n\n/* Styles applied to legend if `row={true}` */\n.saltRadioButtonGroup-horizontal .saltRadioButtonGroup-legend {\n margin-bottom: var(--saltRadioButton-group-horizontal-legend-marginBottom, var(--radioButton-group-horizontal-legend-marginBottom));\n margin-right: var(--saltRadioButton-group-horizontal-legend-marginRight, var(--radioButton-group-horizontal-legend-marginRight));\n margin-top: var(--saltRadioButton-group-horizontal-legend-marginTop, var(--radioButton-group-horizontal-legend-marginTop));\n padding-right: var(--saltRadioButton-group-horizontal-legend-paddingRight, var(--radioButton-group-horizontal-legend-paddingRight));\n}\n\n/* Styles applied to legend */\n.saltRadioButtonGroup-legend {\n margin-bottom: var(--saltRadioButton-group-legend-marginBottom, 4px);\n min-height: var(--saltRadioButton-group-legend-minHeight, var(--radioButton-group-legend-minHeight));\n padding-right: var(--saltRadioButton-group-legend-paddingRight, var(--radioButton-group-legend-paddingRight));\n transition: none;\n width: auto;\n}\n\n/* fieldset specific styles */\nfieldset.saltRadioButtonGroup.saltRadioButtonGroup-vertical {\n line-height: 1;\n}\n\nfieldset.saltRadioButtonGroup.saltRadioButtonGroup-horizontal {\n display: block;\n padding-left: 0px;\n min-inline-size: max-content;\n}\n";
|
|
4
|
-
styleInject(css_248z);
|
|
5
|
-
|
|
6
|
-
export { css_248z as default };
|
|
7
|
-
//# sourceMappingURL=RadioButtonGroup.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import { forwardRef, useState, useRef, useImperativeHandle } from 'react';
|
|
4
|
-
import { makePrefixer, useId } from '@salt-ds/core';
|
|
5
|
-
import '../form-field-context/FormFieldContext.js';
|
|
6
|
-
import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
7
|
-
import { FormGroup } from '../form-group/FormGroup.js';
|
|
8
|
-
import '../form-field/FormField.js';
|
|
9
|
-
import { FormLabel } from '../form-field/FormLabel.js';
|
|
10
|
-
import { RadioGroupContext } from './internal/RadioGroupContext.js';
|
|
11
|
-
import { RadioButton } from './RadioButton.js';
|
|
12
|
-
import './RadioButtonGroup.css.js';
|
|
13
|
-
|
|
14
|
-
const withBaseName = makePrefixer("saltRadioButtonGroup");
|
|
15
|
-
const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
|
|
16
|
-
const {
|
|
17
|
-
children,
|
|
18
|
-
className,
|
|
19
|
-
defaultValue,
|
|
20
|
-
legend,
|
|
21
|
-
icon,
|
|
22
|
-
radios,
|
|
23
|
-
onChange,
|
|
24
|
-
value: valueProp,
|
|
25
|
-
row,
|
|
26
|
-
name: nameProp,
|
|
27
|
-
...rest
|
|
28
|
-
} = props;
|
|
29
|
-
const { inFormField, a11yProps } = useFormFieldProps({
|
|
30
|
-
focusVisible: false
|
|
31
|
-
});
|
|
32
|
-
const [stateValue, setStateValue] = useState(props.defaultValue);
|
|
33
|
-
const getValue = () => isControlled() ? props.value : stateValue;
|
|
34
|
-
const isControlled = () => props.value !== void 0;
|
|
35
|
-
const handleChange = (event) => {
|
|
36
|
-
if (!isControlled()) {
|
|
37
|
-
setStateValue(event.target.value);
|
|
38
|
-
}
|
|
39
|
-
if (props.onChange) {
|
|
40
|
-
props.onChange(event);
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
const rootRef = useRef(null);
|
|
44
|
-
useImperativeHandle(
|
|
45
|
-
void 0,
|
|
46
|
-
() => ({
|
|
47
|
-
focus: () => {
|
|
48
|
-
const current = rootRef.current;
|
|
49
|
-
if (current) {
|
|
50
|
-
let input = current.querySelector(
|
|
51
|
-
"input:not(:disabled):checked"
|
|
52
|
-
);
|
|
53
|
-
if (!input) {
|
|
54
|
-
input = current.querySelector("input:not(:disabled)");
|
|
55
|
-
}
|
|
56
|
-
if (input) {
|
|
57
|
-
input.focus();
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}),
|
|
62
|
-
[]
|
|
63
|
-
);
|
|
64
|
-
const name = useId(nameProp);
|
|
65
|
-
return /* @__PURE__ */ jsxs("fieldset", {
|
|
66
|
-
className: clsx(
|
|
67
|
-
withBaseName(),
|
|
68
|
-
row ? withBaseName("horizontal") : withBaseName("vertical"),
|
|
69
|
-
className
|
|
70
|
-
),
|
|
71
|
-
"data-testid": "radio-button-group",
|
|
72
|
-
ref,
|
|
73
|
-
role: "radiogroup",
|
|
74
|
-
...a11yProps,
|
|
75
|
-
children: [
|
|
76
|
-
!inFormField && /* @__PURE__ */ jsx(FormLabel, {
|
|
77
|
-
className: clsx(withBaseName("legend")),
|
|
78
|
-
label: legend
|
|
79
|
-
}),
|
|
80
|
-
/* @__PURE__ */ jsx(RadioGroupContext.Provider, {
|
|
81
|
-
value: { name, onChange: handleChange, value: getValue() },
|
|
82
|
-
children: /* @__PURE__ */ jsx(FormGroup, {
|
|
83
|
-
role: "radiogroup",
|
|
84
|
-
...rest,
|
|
85
|
-
row,
|
|
86
|
-
children: radios && radios.map((radio) => /* @__PURE__ */ jsx(RadioButton, {
|
|
87
|
-
disabled: radio.disabled,
|
|
88
|
-
icon,
|
|
89
|
-
label: radio.label,
|
|
90
|
-
value: radio.value
|
|
91
|
-
}, radio.label)) || children
|
|
92
|
-
})
|
|
93
|
-
})
|
|
94
|
-
]
|
|
95
|
-
});
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
export { RadioButtonGroup };
|
|
99
|
-
//# sourceMappingURL=RadioButtonGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentType,\n forwardRef,\n HTMLAttributes,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { FormGroup } from \"../form-group\";\nimport { FormLabel } from \"../form-field\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\nimport { RadioButton } from \"./RadioButton\";\nimport { RadioButtonIconProps } from \"./RadioButtonIcon\";\n\nimport \"./RadioButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n className?: string;\n defaultValue?: string;\n icon?: ComponentType<RadioButtonIconProps>;\n legend?: string;\n name?: string;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n radios?: {\n disabled?: boolean;\n label?: string;\n value?: string;\n }[];\n row?: boolean;\n value?: string;\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n children,\n className,\n defaultValue,\n legend,\n icon,\n radios,\n onChange,\n value: valueProp,\n row,\n name: nameProp,\n ...rest\n } = props;\n\n const { inFormField, a11yProps } = useFormFieldProps({\n focusVisible: false,\n });\n\n const [stateValue, setStateValue] = useState(props.defaultValue);\n\n const getValue = () => (isControlled() ? props.value : stateValue);\n\n const isControlled = () => props.value !== undefined;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (!isControlled()) {\n setStateValue(event.target.value);\n }\n if (props.onChange) {\n props.onChange(event);\n }\n };\n\n const rootRef = useRef<HTMLFieldSetElement>(null);\n\n useImperativeHandle(\n undefined,\n () => ({\n focus: () => {\n const current = rootRef.current;\n if (current) {\n let input: HTMLInputElement | null = current.querySelector(\n \"input:not(:disabled):checked\"\n );\n if (!input) {\n input = current.querySelector(\"input:not(:disabled)\");\n }\n if (input) {\n input.focus();\n }\n }\n },\n }),\n []\n );\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n className={clsx(\n withBaseName(),\n row ? withBaseName(\"horizontal\") : withBaseName(\"vertical\"),\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n role=\"radiogroup\"\n {...a11yProps}\n >\n {!inFormField && (\n <FormLabel className={clsx(withBaseName(\"legend\"))} label={legend} />\n )}\n\n <RadioGroupContext.Provider\n value={{ name, onChange: handleChange, value: getValue() }}\n >\n <FormGroup role=\"radiogroup\" {...rest} row={row}>\n {(radios &&\n radios.map((radio) => (\n <RadioButton\n disabled={radio.disabled}\n icon={icon}\n key={radio.label}\n label={radio.label}\n value={radio.value}\n />\n ))) ||\n children}\n </FormGroup>\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup"],"mappings":"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"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".salt-density-high {\n --radioButton-icon-size: 12px;\n}\n\n.salt-density-medium {\n --radioButton-icon-size: 14px;\n}\n\n.salt-density-low {\n --radioButton-icon-size: 16px;\n}\n\n.salt-density-touch {\n --radioButton-icon-size: 18px;\n}\n\n/* Styles applied to root component */\n.saltRadioButtonIcon {\n --radioButton-icon-fill: transparent;\n --radioButton-icon-fill-checked: var(--salt-selectable-borderColor-selected);\n --radioButton-icon-fill-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n\n --radioButton-icon-strokeColor: var(--salt-selectable-borderColor);\n --radioButton-icon-strokeColor-disabled: var(--salt-selectable-borderColor-disabled);\n --radioButton-icon-strokeColor-hover: var(--salt-selectable-borderColor-hover);\n --radioButton-icon-strokeColor-checked: var(--salt-selectable-borderColor-selected);\n --radioButton-icon-strokeColor-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n\n --radioButton-icon-strokeWidth: var(--salt-size-border);\n --radioButton-icon-strokeWidth-hover: var(--salt-size-border);\n --radioButton-icon-strokeWidth-checked: var(--salt-size-border);\n\n width: var(--saltRadioButton-icon-svg-size, var(--radioButton-icon-size));\n height: var(--saltRadioButton-icon-svg-size, var(--radioButton-icon-size));\n}\n\n/* Styles applied to RadioButtonIcon border */\n.saltRadioButtonIcon-border {\n fill: var(--saltRadioButton-icon-fill, var(--radioButton-icon-fill));\n stroke: var(--saltRadioButton-icon-strokeColor, var(--radioButton-icon-strokeColor));\n stroke-width: var(--saltRadioButton-icon-strokeWidth, var(--radioButton-icon-strokeWidth));\n}\n\n/* Styles applied to RadioButtonIcon border if `checked={true}` */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n fill: var(--saltRadioButton-icon-fill-checked, var(--radioButton-icon-fill-checked));\n stroke: var(--saltRadioButton-icon-strokeColor-checked, var(--radioButton-icon-strokeColor-checked));\n stroke-width: var(--saltRadioButton-icon-strokeWidth-checked, var(--radioButton-icon-strokeWidth-checked));\n}\n\n/* Styles applied to RadioButtonIcon border on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-border {\n fill: var(--saltRadioButton-icon-fill-hover, var(--radioButton-icon-fill));\n stroke: var(--saltRadioButton-icon-strokeColor-hover, var(--radioButton-icon-strokeColor-hover));\n}\n\n/* Styles applied to RadioButtonIcon border on hover if `checked={true}` */\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n fill: var(--saltRadioButton-icon-fill-checked-hover, var(--radioButton-icon-fill-checked));\n stroke: var(--saltRadioButton-icon-strokeColor-checked-hover, var(--radioButton-icon-strokeColor-checked));\n}\n\n/* Styles applied to RadioButtonIcon border if `disabled={true}` or in a disabled FormField */\n.saltRadioButton-disabled .saltRadioButtonIcon-border,\n.saltFormField-disabled .saltRadioButton .saltRadioButtonIcon-border,\n.saltRadioButton-disabled:hover .saltRadioButtonIcon-border,\n.saltFormField-disabled .saltRadioButton:hover .saltRadioButtonIcon-border {\n fill: var(--saltRadioButton-icon-fill-disabled, var(--radioButton-icon-fill));\n stroke: var(--saltRadioButton-icon-strokeColor-disabled, var(--radioButton-icon-strokeColor-disabled));\n}\n\n/* Styles applied to RadioButtonIcon border if `checked={true}` when `disabled={true}` or in a disabled FormField */\n.saltFormField-disabled .saltRadioButton .saltRadioButtonIcon-checked .saltRadioButtonIcon-border,\n.saltFormField-disabled .saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-border,\n.saltRadioButton-disabled .saltRadioButtonIcon-checked .saltRadioButtonIcon-border,\n.saltRadioButton-disabled:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n fill: var(--saltRadioButton-icon-fill-checked-disabled, var(--radioButton-icon-fill-checked-disabled));\n stroke: var(--saltRadioButton-icon-strokeColor-checked-disabled, transparent);\n}\n\n/* Styles applied to inner circle when `checked={true}` */\n.saltRadioButtonIcon-inner-checked {\n fill: var(--saltRadioButton-icon-inner-fill, var(--salt-selectable-primary-foreground-selected));\n}\n";
|
|
4
|
-
styleInject(css_248z);
|
|
5
|
-
|
|
6
|
-
export { css_248z as default };
|
|
7
|
-
//# sourceMappingURL=RadioButtonIcon.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import './RadioButtonIcon.css.js';
|
|
5
|
-
|
|
6
|
-
const withBaseName = makePrefixer("saltRadioButtonIcon");
|
|
7
|
-
const RadioButtonIcon = ({ checked }) => {
|
|
8
|
-
return /* @__PURE__ */ jsxs("svg", {
|
|
9
|
-
className: clsx(withBaseName(), {
|
|
10
|
-
[withBaseName("checked")]: checked
|
|
11
|
-
}),
|
|
12
|
-
height: "14",
|
|
13
|
-
viewBox: "0 0 14 14",
|
|
14
|
-
width: "14",
|
|
15
|
-
children: [
|
|
16
|
-
/* @__PURE__ */ jsx("circle", {
|
|
17
|
-
className: withBaseName("border"),
|
|
18
|
-
cx: "7",
|
|
19
|
-
cy: "7",
|
|
20
|
-
r: "6.5"
|
|
21
|
-
}),
|
|
22
|
-
checked && /* @__PURE__ */ jsx("circle", {
|
|
23
|
-
className: withBaseName("inner-checked"),
|
|
24
|
-
cx: "7",
|
|
25
|
-
cy: "7",
|
|
26
|
-
r: "3"
|
|
27
|
-
})
|
|
28
|
-
]
|
|
29
|
-
});
|
|
30
|
-
};
|
|
31
|
-
const makeRadioIcon = (iconChecked, iconUnchecked) => (props) => props.checked ? iconChecked : iconUnchecked;
|
|
32
|
-
|
|
33
|
-
export { RadioButtonIcon, makeRadioIcon };
|
|
34
|
-
//# sourceMappingURL=RadioButtonIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { ComponentType, ReactElement } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n checked?: boolean;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({ checked }: RadioButtonIconProps) => {\n return (\n <svg\n className={clsx(withBaseName(), {\n [withBaseName(\"checked\")]: checked,\n })}\n height=\"14\"\n viewBox=\"0 0 14 14\"\n width=\"14\"\n >\n <circle className={withBaseName(\"border\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n {checked && (\n <circle className={withBaseName(\"inner-checked\")} cx=\"7\" cy=\"7\" r=\"3\" />\n )}\n </svg>\n );\n};\n\n/**\n * Creates a component that can be given to Radio or RadioButton as the 'icon'\n */\nexport const makeRadioIcon =\n (\n iconChecked: ReactElement | null,\n iconUnchecked: ReactElement | null\n ): ComponentType<RadioButtonIconProps> =>\n (props: RadioButtonIconProps) =>\n props.checked ? iconChecked : iconUnchecked;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAShD,MAAM,eAAkB,GAAA,CAAC,EAAE,OAAA,EAAoC,KAAA;AACpE,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,GAAA;AAAA,OAAI,CAAA;AAAA,KAAA;AAAA,GAE1E,CAAA,CAAA;AAEJ,EAAA;AAKa,MAAA,aAAA,GACX,CACE,WACA,EAAA,aAAA,KAEF,CAAC,KACC,KAAA,KAAA,CAAM,UAAU,WAAc,GAAA;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"@salt-ds/core\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext(\n \"RadioGroupContext\",\n {} as RadioGroupContextValue\n);\n"],"names":[],"mappings":";;AASO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useRadioGroup.js","sources":["../src/radio-button/internal/useRadioGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { RadioGroupContext } from \"./RadioGroupContext\";\n\nexport function useRadioGroup() {\n return useContext(RadioGroupContext);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,aAAgB,GAAA;AAC9B,EAAA,OAAO,WAAW,iBAAiB,CAAA,CAAA;AACrC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"capitalize.js","sources":["../src/utils/capitalize.ts"],"sourcesContent":["export function capitalize(value: string): string {\n return value.length > 0 ? value[0].toUpperCase() + value.slice(1) : value;\n}\n"],"names":[],"mappings":"AAAO,SAAS,WAAW,KAAuB,EAAA;AAChD,EAAO,OAAA,KAAA,CAAM,MAAS,GAAA,CAAA,GAAI,KAAM,CAAA,CAAA,CAAA,CAAG,aAAgB,GAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAI,GAAA,KAAA,CAAA;AACtE;;;;"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ControlLabelProps } from "../control-label";
|
|
3
|
-
import { CheckboxBaseProps } from "./CheckboxBase";
|
|
4
|
-
import "./Checkbox.css";
|
|
5
|
-
export interface CheckboxProps extends CheckboxBaseProps {
|
|
6
|
-
label?: ControlLabelProps["label"];
|
|
7
|
-
LabelProps?: Partial<ControlLabelProps>;
|
|
8
|
-
}
|
|
9
|
-
export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes } from "react";
|
|
2
|
-
import "./CheckboxBase.css";
|
|
3
|
-
export interface CheckboxBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
4
|
-
checked?: boolean;
|
|
5
|
-
defaultChecked?: boolean;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
indeterminate?: boolean;
|
|
8
|
-
inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;
|
|
9
|
-
name?: string;
|
|
10
|
-
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
11
|
-
/**
|
|
12
|
-
* Callback when checked state is changed
|
|
13
|
-
*/
|
|
14
|
-
onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
|
|
15
|
-
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
16
|
-
value?: string;
|
|
17
|
-
}
|
|
18
|
-
export declare const CheckboxBase: import("react").ForwardRefExoticComponent<CheckboxBaseProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { ChangeEventHandler, HTMLAttributes, ReactNode } from "react";
|
|
2
|
-
import { FormGroupProps } from "../form-group";
|
|
3
|
-
import "./CheckboxGroup.css";
|
|
4
|
-
export interface CheckboxGroupProps extends FormGroupProps {
|
|
5
|
-
/**
|
|
6
|
-
* The current checked options.
|
|
7
|
-
*/
|
|
8
|
-
checkedValues?: string[];
|
|
9
|
-
/**
|
|
10
|
-
* The default selected options for un-controlled component.
|
|
11
|
-
*/
|
|
12
|
-
defaultCheckedValues?: string[];
|
|
13
|
-
/**
|
|
14
|
-
* Props spread onto the FormControl component that wraps the checkboxes.
|
|
15
|
-
*/
|
|
16
|
-
FormControlProps?: Partial<HTMLAttributes<HTMLFieldSetElement>>;
|
|
17
|
-
/**
|
|
18
|
-
* Props spread onto the legend.
|
|
19
|
-
*/
|
|
20
|
-
LegendProps?: unknown;
|
|
21
|
-
/**
|
|
22
|
-
* The label for the group legend
|
|
23
|
-
*/
|
|
24
|
-
legend?: ReactNode;
|
|
25
|
-
/**
|
|
26
|
-
* The name used to reference the value of the control.
|
|
27
|
-
*/
|
|
28
|
-
name?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Callback fired when a checkbox is clicked.
|
|
31
|
-
* `event.target.value` returns the value of the checkbox that was clicked.
|
|
32
|
-
*/
|
|
33
|
-
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
34
|
-
}
|
|
35
|
-
export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import "./CheckboxIcon.css";
|
|
3
|
-
export interface CheckboxIconProps {
|
|
4
|
-
checked?: boolean;
|
|
5
|
-
className?: string;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
indeterminate?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare const CheckboxIcon: ({ checked, className: classNameProp, disabled, indeterminate, }: CheckboxIconProps) => JSX.Element;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { CheckboxGroupProps } from "../CheckboxGroup";
|
|
3
|
-
interface CheckboxGroupState {
|
|
4
|
-
name: CheckboxGroupProps["name"];
|
|
5
|
-
onChange: CheckboxGroupProps["onChange"];
|
|
6
|
-
checkedValues: CheckboxGroupProps["checkedValues"];
|
|
7
|
-
}
|
|
8
|
-
declare const CheckboxGroupContext: import("react").Context<CheckboxGroupState | null>;
|
|
9
|
-
export { CheckboxGroupContext };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ChangeEventHandler, HTMLAttributes, ComponentType } from "react";
|
|
2
|
-
import { ControlLabelProps } from "../control-label";
|
|
3
|
-
import { RadioButtonIconProps } from "./RadioButtonIcon";
|
|
4
|
-
import "./RadioButton.css";
|
|
5
|
-
export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
6
|
-
checked?: boolean;
|
|
7
|
-
className?: string;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Custom icon component
|
|
11
|
-
*/
|
|
12
|
-
icon?: ComponentType<RadioButtonIconProps>;
|
|
13
|
-
/**
|
|
14
|
-
* The label to be shown next to the radio
|
|
15
|
-
*/
|
|
16
|
-
label?: ControlLabelProps["label"];
|
|
17
|
-
LabelProps?: Partial<ControlLabelProps>;
|
|
18
|
-
name?: string;
|
|
19
|
-
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
20
|
-
value?: string;
|
|
21
|
-
}
|
|
22
|
-
export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ChangeEventHandler, ComponentType, FocusEventHandler } from "react";
|
|
2
|
-
import { RadioButtonIconProps } from "./RadioButtonIcon";
|
|
3
|
-
import "./RadioButtonBase.css";
|
|
4
|
-
export interface RadioButtonBaseProps {
|
|
5
|
-
checked?: boolean;
|
|
6
|
-
className?: string;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
/**
|
|
9
|
-
* custom icon component
|
|
10
|
-
*/
|
|
11
|
-
icon?: ComponentType<RadioButtonIconProps>;
|
|
12
|
-
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
13
|
-
name?: string;
|
|
14
|
-
defaultChecked?: boolean;
|
|
15
|
-
onFocus?: FocusEventHandler<HTMLSpanElement>;
|
|
16
|
-
onBlur?: FocusEventHandler<HTMLSpanElement>;
|
|
17
|
-
required?: boolean;
|
|
18
|
-
id?: string;
|
|
19
|
-
tabIndex?: number;
|
|
20
|
-
value?: string;
|
|
21
|
-
}
|
|
22
|
-
export declare const RadioButtonBase: import("react").ForwardRefExoticComponent<RadioButtonBaseProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { ChangeEventHandler, ComponentType, HTMLAttributes } from "react";
|
|
2
|
-
import { RadioButtonIconProps } from "./RadioButtonIcon";
|
|
3
|
-
import "./RadioButtonGroup.css";
|
|
4
|
-
export interface RadioButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
-
className?: string;
|
|
6
|
-
defaultValue?: string;
|
|
7
|
-
icon?: ComponentType<RadioButtonIconProps>;
|
|
8
|
-
legend?: string;
|
|
9
|
-
name?: string;
|
|
10
|
-
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
11
|
-
radios?: {
|
|
12
|
-
disabled?: boolean;
|
|
13
|
-
label?: string;
|
|
14
|
-
value?: string;
|
|
15
|
-
}[];
|
|
16
|
-
row?: boolean;
|
|
17
|
-
value?: string;
|
|
18
|
-
}
|
|
19
|
-
export declare const RadioButtonGroup: import("react").ForwardRefExoticComponent<RadioButtonGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ComponentType, ReactElement } from "react";
|
|
2
|
-
import "./RadioButtonIcon.css";
|
|
3
|
-
export interface RadioButtonIconProps {
|
|
4
|
-
checked?: boolean;
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
* Default radio icon
|
|
8
|
-
*/
|
|
9
|
-
export declare const RadioButtonIcon: ({ checked }: RadioButtonIconProps) => JSX.Element;
|
|
10
|
-
/**
|
|
11
|
-
* Creates a component that can be given to Radio or RadioButton as the 'icon'
|
|
12
|
-
*/
|
|
13
|
-
export declare const makeRadioIcon: (iconChecked: ReactElement | null, iconUnchecked: ReactElement | null) => ComponentType<RadioButtonIconProps>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useRadioGroup(): import("./RadioGroupContext").RadioGroupContextValue;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function capitalize(value: string): string;
|