@rjsf/chakra-ui 5.24.10 → 6.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chakra-ui.esm.js +664 -700
- package/dist/chakra-ui.esm.js.map +4 -4
- package/dist/chakra-ui.umd.js +488 -579
- package/dist/index.js +670 -708
- package/dist/index.js.map +4 -4
- package/lib/AddButton/AddButton.js +3 -3
- package/lib/AddButton/AddButton.js.map +1 -1
- package/lib/AltDateWidget/AltDateWidget.js.map +1 -1
- package/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.d.ts +2 -2
- package/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js +5 -8
- package/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js.map +1 -1
- package/lib/ArrayFieldTemplate/ArrayFieldTemplate.js +2 -2
- package/lib/ArrayFieldTemplate/ArrayFieldTemplate.js.map +1 -1
- package/lib/BaseInputTemplate/BaseInputTemplate.js +4 -5
- package/lib/BaseInputTemplate/BaseInputTemplate.js.map +1 -1
- package/lib/ChakraFrameProvider.js +3 -4
- package/lib/ChakraFrameProvider.js.map +1 -1
- package/lib/CheckboxWidget/CheckboxWidget.js +5 -5
- package/lib/CheckboxWidget/CheckboxWidget.js.map +1 -1
- package/lib/CheckboxesWidget/CheckboxesWidget.js +10 -13
- package/lib/CheckboxesWidget/CheckboxesWidget.js.map +1 -1
- package/lib/DescriptionField/DescriptionField.js.map +1 -1
- package/lib/ErrorList/ErrorList.js +4 -3
- package/lib/ErrorList/ErrorList.js.map +1 -1
- package/lib/FieldErrorTemplate/FieldErrorTemplate.js +3 -3
- package/lib/FieldErrorTemplate/FieldErrorTemplate.js.map +1 -1
- package/lib/FieldHelpTemplate/FieldHelpTemplate.js +2 -2
- package/lib/FieldHelpTemplate/FieldHelpTemplate.js.map +1 -1
- package/lib/FieldTemplate/FieldTemplate.js +2 -2
- package/lib/FieldTemplate/FieldTemplate.js.map +1 -1
- package/lib/GridTemplate/GridTemplate.d.ts +7 -0
- package/lib/GridTemplate/GridTemplate.js +15 -0
- package/lib/GridTemplate/GridTemplate.js.map +1 -0
- package/lib/GridTemplate/index.d.ts +2 -0
- package/lib/GridTemplate/index.js +3 -0
- package/lib/GridTemplate/index.js.map +1 -0
- package/lib/IconButton/ChakraIconButton.js +1 -1
- package/lib/IconButton/ChakraIconButton.js.map +1 -1
- package/lib/IconButton/IconButton.js +1 -1
- package/lib/IconButton/IconButton.js.map +1 -1
- package/lib/ObjectFieldTemplate/ObjectFieldTemplate.js +2 -2
- package/lib/ObjectFieldTemplate/ObjectFieldTemplate.js.map +1 -1
- package/lib/RadioWidget/RadioWidget.d.ts +1 -1
- package/lib/RadioWidget/RadioWidget.js +11 -11
- package/lib/RadioWidget/RadioWidget.js.map +1 -1
- package/lib/RangeWidget/RangeWidget.d.ts +1 -1
- package/lib/RangeWidget/RangeWidget.js +6 -8
- package/lib/RangeWidget/RangeWidget.js.map +1 -1
- package/lib/SelectNativeWidget/NativeSelectWidget.d.ts +12 -0
- package/lib/SelectNativeWidget/NativeSelectWidget.js +60 -0
- package/lib/SelectNativeWidget/NativeSelectWidget.js.map +1 -0
- package/lib/SelectNativeWidget/index.d.ts +2 -0
- package/lib/SelectNativeWidget/index.js +3 -0
- package/lib/SelectNativeWidget/index.js.map +1 -0
- package/lib/SelectWidget/SelectWidget.js +30 -23
- package/lib/SelectWidget/SelectWidget.js.map +1 -1
- package/lib/SubmitButton/SubmitButton.js.map +1 -1
- package/lib/Templates/Templates.js +2 -0
- package/lib/Templates/Templates.js.map +1 -1
- package/lib/TextareaWidget/TextareaWidget.d.ts +1 -1
- package/lib/TextareaWidget/TextareaWidget.js +5 -6
- package/lib/TextareaWidget/TextareaWidget.js.map +1 -1
- package/lib/TitleField/TitleField.js +2 -2
- package/lib/TitleField/TitleField.js.map +1 -1
- package/lib/UpDownWidget/UpDownWidget.js +6 -7
- package/lib/UpDownWidget/UpDownWidget.js.map +1 -1
- package/lib/Widgets/Widgets.js +2 -0
- package/lib/Widgets/Widgets.js.map +1 -1
- package/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js +4 -3
- package/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js.map +1 -1
- package/lib/components/ui/alert.d.ts +24 -0
- package/lib/components/ui/alert.js +9 -0
- package/lib/components/ui/alert.js.map +1 -0
- package/lib/components/ui/checkbox.d.ts +17 -0
- package/lib/components/ui/checkbox.js +17 -0
- package/lib/components/ui/checkbox.js.map +1 -0
- package/lib/components/ui/close-button.d.ts +10 -0
- package/lib/components/ui/close-button.js +16 -0
- package/lib/components/ui/close-button.js.map +1 -0
- package/lib/components/ui/field.d.ts +20 -0
- package/lib/components/ui/field.js +19 -0
- package/lib/components/ui/field.js.map +1 -0
- package/lib/components/ui/number-input.d.ts +10 -0
- package/lib/components/ui/number-input.js +20 -0
- package/lib/components/ui/number-input.js.map +1 -0
- package/lib/components/ui/radio.d.ts +16 -0
- package/lib/components/ui/radio.js +17 -0
- package/lib/components/ui/radio.js.map +1 -0
- package/lib/components/ui/select.d.ts +73 -0
- package/lib/components/ui/select.js +99 -0
- package/lib/components/ui/select.js.map +1 -0
- package/lib/components/ui/slider.d.ts +18 -0
- package/lib/components/ui/slider.js +55 -0
- package/lib/components/ui/slider.js.map +1 -0
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils.d.ts +3 -6
- package/lib/utils.js +6 -7
- package/lib/utils.js.map +1 -1
- package/package.json +52 -47
- package/src/AddButton/AddButton.tsx +3 -2
- package/src/AltDateTimeWidget/AltDateTimeWidget.tsx +1 -1
- package/src/AltDateWidget/AltDateWidget.tsx +3 -3
- package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx +18 -60
- package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx +9 -7
- package/src/BaseInputTemplate/BaseInputTemplate.tsx +11 -18
- package/src/ChakraFrameProvider.tsx +3 -4
- package/src/CheckboxWidget/CheckboxWidget.tsx +13 -12
- package/src/CheckboxesWidget/CheckboxesWidget.tsx +14 -29
- package/src/DescriptionField/DescriptionField.tsx +1 -1
- package/src/ErrorList/ErrorList.tsx +16 -7
- package/src/FieldErrorTemplate/FieldErrorTemplate.tsx +5 -5
- package/src/FieldHelpTemplate/FieldHelpTemplate.tsx +3 -3
- package/src/FieldTemplate/FieldTemplate.tsx +8 -8
- package/src/Form/Form.tsx +1 -1
- package/src/GridTemplate/GridTemplate.tsx +15 -0
- package/src/GridTemplate/index.ts +2 -0
- package/src/IconButton/ChakraIconButton.tsx +7 -3
- package/src/IconButton/IconButton.tsx +5 -5
- package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx +6 -4
- package/src/RadioWidget/RadioWidget.tsx +15 -14
- package/src/RangeWidget/RangeWidget.tsx +13 -20
- package/src/SelectNativeWidget/NativeSelectWidget.tsx +134 -0
- package/src/SelectNativeWidget/index.ts +2 -0
- package/src/SelectWidget/SelectWidget.tsx +74 -46
- package/src/SubmitButton/SubmitButton.tsx +1 -1
- package/src/Templates/Templates.ts +3 -1
- package/src/TextareaWidget/TextareaWidget.tsx +11 -14
- package/src/Theme/Theme.tsx +1 -1
- package/src/TitleField/TitleField.tsx +2 -2
- package/src/UpDownWidget/UpDownWidget.tsx +21 -34
- package/src/Widgets/Widgets.ts +3 -1
- package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx +9 -7
- package/src/components/ui/alert.tsx +47 -0
- package/src/components/ui/checkbox.tsx +28 -0
- package/src/components/ui/close-button.tsx +21 -0
- package/src/components/ui/field.tsx +37 -0
- package/src/components/ui/number-input.tsx +31 -0
- package/src/components/ui/radio.tsx +28 -0
- package/src/components/ui/select.tsx +171 -0
- package/src/components/ui/slider.tsx +100 -0
- package/src/tsconfig.json +3 -4
- package/src/utils.ts +8 -12
- package/LICENSE.md +0 -201
- package/lib/CssReset.d.ts +0 -23
- package/lib/CssReset.js +0 -266
- package/lib/CssReset.js.map +0 -1
- package/src/CssReset.tsx +0 -270
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import type { CollectionItem } from '@chakra-ui/react';
|
|
3
|
+
import { Select as ChakraSelect } from '@chakra-ui/react';
|
|
4
|
+
interface SelectTriggerProps extends ChakraSelect.ControlProps {
|
|
5
|
+
clearable?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* SelectTrigger component that renders a trigger for the select component.
|
|
9
|
+
*
|
|
10
|
+
* @param {SelectTriggerProps} props - The properties for the select trigger component.
|
|
11
|
+
* @param {boolean} [props.clearable] - Whether the trigger is clearable.
|
|
12
|
+
* @param {ReactNode} [props.children] - The content to display inside the trigger.
|
|
13
|
+
* @returns {JSX.Element} The rendered select trigger component.
|
|
14
|
+
*/
|
|
15
|
+
export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
16
|
+
interface SelectContentProps extends ChakraSelect.ContentProps {
|
|
17
|
+
portalled?: boolean;
|
|
18
|
+
portalRef?: RefObject<HTMLElement>;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* SelectContent component that renders the content of the select component.
|
|
22
|
+
*
|
|
23
|
+
* @param {SelectContentProps} props - The properties for the select content component.
|
|
24
|
+
* @param {boolean} [props.portalled] - Whether to use a portal for rendering the content.
|
|
25
|
+
* @param {RefObject<HTMLElement>} [props.portalRef] - The ref for the portal container.
|
|
26
|
+
* @returns {JSX.Element} The rendered select content component.
|
|
27
|
+
*/
|
|
28
|
+
export declare const SelectContent: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
29
|
+
/**
|
|
30
|
+
* SelectItem component that represents an item in the select component.
|
|
31
|
+
*
|
|
32
|
+
* @param {SelectItemProps} props - The properties for the select item component.
|
|
33
|
+
* @param {CollectionItem} [props.item] - The item to display in the select.
|
|
34
|
+
* @param {ReactNode} [props.children] - The content to display inside the item.
|
|
35
|
+
* @returns {JSX.Element} The rendered select item component.
|
|
36
|
+
*/
|
|
37
|
+
export declare const SelectItem: import("react").ForwardRefExoticComponent<ChakraSelect.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
38
|
+
interface SelectValueTextProps extends Omit<ChakraSelect.ValueTextProps, 'children'> {
|
|
39
|
+
children?(items: CollectionItem[]): React.ReactNode;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* SelectValueText component that displays the selected value in the select component.
|
|
43
|
+
*
|
|
44
|
+
* @param {SelectValueTextProps} props - The properties for the select value text component.
|
|
45
|
+
* @param {function} [props.children] - A function that receives the selected items and returns the content to display.
|
|
46
|
+
* @param {ReactNode} [props.placeholder] - The placeholder text to display when no items are selected.
|
|
47
|
+
* @returns {JSX.Element} The rendered select value text component.
|
|
48
|
+
*/
|
|
49
|
+
export declare const SelectValueText: import("react").ForwardRefExoticComponent<SelectValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
50
|
+
/**
|
|
51
|
+
* SelectRoot component that serves as the root element for the select component.
|
|
52
|
+
*
|
|
53
|
+
* @param {SelectRootProps} props - The properties for the select root component.
|
|
54
|
+
* @param {ChakraSelect.PositioningProps} [props.positioning] - The positioning properties for the select component.
|
|
55
|
+
* @param {ReactNode} [props.children] - The content to display inside the select root.
|
|
56
|
+
* @returns {JSX.Element} The rendered select root component.
|
|
57
|
+
*/
|
|
58
|
+
export declare const SelectRoot: ChakraSelect.RootComponent;
|
|
59
|
+
interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
|
|
60
|
+
label: React.ReactNode;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* SelectItemGroup component that groups select items together.
|
|
64
|
+
*
|
|
65
|
+
* @param {SelectItemGroupProps} props - The properties for the select item group component.
|
|
66
|
+
* @param {React.ReactNode} [props.label] - The label for the item group.
|
|
67
|
+
* @param {ReactNode} [props.children] - The content to display inside the item group.
|
|
68
|
+
* @returns {JSX.Element} The rendered select item group component.
|
|
69
|
+
*/
|
|
70
|
+
export declare const SelectItemGroup: import("react").ForwardRefExoticComponent<SelectItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
71
|
+
export declare const SelectLabel: import("react").ForwardRefExoticComponent<ChakraSelect.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
72
|
+
export declare const SelectItemText: import("react").ForwardRefExoticComponent<ChakraSelect.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
73
|
+
export {};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { Select as ChakraSelect, Portal } from '@chakra-ui/react';
|
|
4
|
+
import { CloseButton } from './close-button.js';
|
|
5
|
+
/**
|
|
6
|
+
* SelectTrigger component that renders a trigger for the select component.
|
|
7
|
+
*
|
|
8
|
+
* @param {SelectTriggerProps} props - The properties for the select trigger component.
|
|
9
|
+
* @param {boolean} [props.clearable] - Whether the trigger is clearable.
|
|
10
|
+
* @param {ReactNode} [props.children] - The content to display inside the trigger.
|
|
11
|
+
* @returns {JSX.Element} The rendered select trigger component.
|
|
12
|
+
*/
|
|
13
|
+
export const SelectTrigger = forwardRef(function SelectTrigger(props, ref) {
|
|
14
|
+
const { children, clearable, ...rest } = props;
|
|
15
|
+
return (_jsxs(ChakraSelect.Control, { ...rest, children: [_jsx(ChakraSelect.Trigger, { ref: ref, children: children }), _jsxs(ChakraSelect.IndicatorGroup, { children: [clearable && _jsx(SelectClearTrigger, {}), _jsx(ChakraSelect.Indicator, {})] })] }));
|
|
16
|
+
});
|
|
17
|
+
/**
|
|
18
|
+
* SelectClearTrigger component that renders a clear button for the select component.
|
|
19
|
+
*
|
|
20
|
+
* @param {ChakraSelect.ClearTriggerProps} props - The properties for the clear trigger component.
|
|
21
|
+
* @returns {JSX.Element} The rendered select clear trigger component.
|
|
22
|
+
*/
|
|
23
|
+
const SelectClearTrigger = forwardRef(function SelectClearTrigger(props, ref) {
|
|
24
|
+
return (_jsx(ChakraSelect.ClearTrigger, { asChild: true, ...props, ref: ref, children: _jsx(CloseButton, { size: 'xs', variant: 'plain', focusVisibleRing: 'inside', focusRingWidth: '2px', pointerEvents: 'auto' }) }));
|
|
25
|
+
});
|
|
26
|
+
/**
|
|
27
|
+
* SelectContent component that renders the content of the select component.
|
|
28
|
+
*
|
|
29
|
+
* @param {SelectContentProps} props - The properties for the select content component.
|
|
30
|
+
* @param {boolean} [props.portalled] - Whether to use a portal for rendering the content.
|
|
31
|
+
* @param {RefObject<HTMLElement>} [props.portalRef] - The ref for the portal container.
|
|
32
|
+
* @returns {JSX.Element} The rendered select content component.
|
|
33
|
+
*/
|
|
34
|
+
export const SelectContent = forwardRef(function SelectContent(props, ref) {
|
|
35
|
+
const { portalled = true, portalRef, ...rest } = props;
|
|
36
|
+
return (_jsx(Portal, { disabled: !portalled, container: portalRef, children: _jsx(ChakraSelect.Positioner, { children: _jsx(ChakraSelect.Content, { ...rest, ref: ref }) }) }));
|
|
37
|
+
});
|
|
38
|
+
/**
|
|
39
|
+
* SelectItem component that represents an item in the select component.
|
|
40
|
+
*
|
|
41
|
+
* @param {SelectItemProps} props - The properties for the select item component.
|
|
42
|
+
* @param {CollectionItem} [props.item] - The item to display in the select.
|
|
43
|
+
* @param {ReactNode} [props.children] - The content to display inside the item.
|
|
44
|
+
* @returns {JSX.Element} The rendered select item component.
|
|
45
|
+
*/
|
|
46
|
+
export const SelectItem = forwardRef(function SelectItem(props, ref) {
|
|
47
|
+
const { item, children, ...rest } = props;
|
|
48
|
+
return (_jsxs(ChakraSelect.Item, { item: item, ...rest, ref: ref, children: [children, _jsx(ChakraSelect.ItemIndicator, {})] }, item.value));
|
|
49
|
+
});
|
|
50
|
+
/**
|
|
51
|
+
* SelectValueText component that displays the selected value in the select component.
|
|
52
|
+
*
|
|
53
|
+
* @param {SelectValueTextProps} props - The properties for the select value text component.
|
|
54
|
+
* @param {function} [props.children] - A function that receives the selected items and returns the content to display.
|
|
55
|
+
* @param {ReactNode} [props.placeholder] - The placeholder text to display when no items are selected.
|
|
56
|
+
* @returns {JSX.Element} The rendered select value text component.
|
|
57
|
+
*/
|
|
58
|
+
export const SelectValueText = forwardRef(function SelectValueText(props, ref) {
|
|
59
|
+
const { children, ...rest } = props;
|
|
60
|
+
return (_jsx(ChakraSelect.ValueText, { ...rest, ref: ref, children: _jsx(ChakraSelect.Context, { children: (select) => {
|
|
61
|
+
const items = select.selectedItems;
|
|
62
|
+
if (items.length === 0) {
|
|
63
|
+
return props.placeholder;
|
|
64
|
+
}
|
|
65
|
+
if (children) {
|
|
66
|
+
return children(items);
|
|
67
|
+
}
|
|
68
|
+
if (items.length === 1) {
|
|
69
|
+
return select.collection.stringifyItem(items[0]);
|
|
70
|
+
}
|
|
71
|
+
return `${items.length} selected`;
|
|
72
|
+
} }) }));
|
|
73
|
+
});
|
|
74
|
+
/**
|
|
75
|
+
* SelectRoot component that serves as the root element for the select component.
|
|
76
|
+
*
|
|
77
|
+
* @param {SelectRootProps} props - The properties for the select root component.
|
|
78
|
+
* @param {ChakraSelect.PositioningProps} [props.positioning] - The positioning properties for the select component.
|
|
79
|
+
* @param {ReactNode} [props.children] - The content to display inside the select root.
|
|
80
|
+
* @returns {JSX.Element} The rendered select root component.
|
|
81
|
+
*/
|
|
82
|
+
export const SelectRoot = forwardRef(function SelectRoot(props, ref) {
|
|
83
|
+
return (_jsx(ChakraSelect.Root, { ...props, ref: ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? (props.children) : (_jsxs(_Fragment, { children: [_jsx(ChakraSelect.HiddenSelect, {}), props.children] })) }));
|
|
84
|
+
});
|
|
85
|
+
/**
|
|
86
|
+
* SelectItemGroup component that groups select items together.
|
|
87
|
+
*
|
|
88
|
+
* @param {SelectItemGroupProps} props - The properties for the select item group component.
|
|
89
|
+
* @param {React.ReactNode} [props.label] - The label for the item group.
|
|
90
|
+
* @param {ReactNode} [props.children] - The content to display inside the item group.
|
|
91
|
+
* @returns {JSX.Element} The rendered select item group component.
|
|
92
|
+
*/
|
|
93
|
+
export const SelectItemGroup = forwardRef(function SelectItemGroup(props, ref) {
|
|
94
|
+
const { children, label, ...rest } = props;
|
|
95
|
+
return (_jsxs(ChakraSelect.ItemGroup, { ...rest, ref: ref, children: [_jsx(ChakraSelect.ItemGroupLabel, { children: label }), children] }));
|
|
96
|
+
});
|
|
97
|
+
export const SelectLabel = ChakraSelect.Label;
|
|
98
|
+
export const SelectItemText = ChakraSelect.ItemText;
|
|
99
|
+
//# sourceMappingURL=select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Slider as ChakraSlider } from '@chakra-ui/react';
|
|
2
|
+
export interface SliderProps extends ChakraSlider.RootProps {
|
|
3
|
+
marks?: Array<number | {
|
|
4
|
+
value: number;
|
|
5
|
+
label: React.ReactNode;
|
|
6
|
+
}>;
|
|
7
|
+
showValue?: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Slider component that allows users to select a value from a range.
|
|
11
|
+
*
|
|
12
|
+
* @param {SliderProps} props - The properties for the slider component.
|
|
13
|
+
* @param {Array<number | { value: number; label: React.ReactNode }>} [props.marks] - The marks to display on the slider.
|
|
14
|
+
* @param {React.ReactNode} [props.label] - The label for the slider.
|
|
15
|
+
* @param {boolean} [props.showValue] - Whether to show the current value of the slider.
|
|
16
|
+
* @returns {JSX.Element} The rendered slider component.
|
|
17
|
+
*/
|
|
18
|
+
export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { Slider as ChakraSlider, HStack } from '@chakra-ui/react';
|
|
4
|
+
/**
|
|
5
|
+
* Slider component that allows users to select a value from a range.
|
|
6
|
+
*
|
|
7
|
+
* @param {SliderProps} props - The properties for the slider component.
|
|
8
|
+
* @param {Array<number | { value: number; label: React.ReactNode }>} [props.marks] - The marks to display on the slider.
|
|
9
|
+
* @param {React.ReactNode} [props.label] - The label for the slider.
|
|
10
|
+
* @param {boolean} [props.showValue] - Whether to show the current value of the slider.
|
|
11
|
+
* @returns {JSX.Element} The rendered slider component.
|
|
12
|
+
*/
|
|
13
|
+
export const Slider = forwardRef(function Slider(props, ref) {
|
|
14
|
+
var _a;
|
|
15
|
+
const { marks: marksProp, showValue, ...rest } = props;
|
|
16
|
+
const value = (_a = props.defaultValue) !== null && _a !== void 0 ? _a : props.value;
|
|
17
|
+
const marks = marksProp === null || marksProp === void 0 ? void 0 : marksProp.map((mark) => {
|
|
18
|
+
if (typeof mark === 'number') {
|
|
19
|
+
return { value: mark, label: undefined };
|
|
20
|
+
}
|
|
21
|
+
return mark;
|
|
22
|
+
});
|
|
23
|
+
const hasMarkLabel = !!(marks === null || marks === void 0 ? void 0 : marks.some((mark) => mark.label));
|
|
24
|
+
return (_jsxs(ChakraSlider.Root, { ref: ref, width: '200px', thumbAlignment: 'center', ...rest, children: [showValue && (_jsx(HStack, { justify: 'space-between', children: _jsx(ChakraSlider.ValueText, {}) })), _jsxs(ChakraSlider.Control, { "data-has-mark-label": hasMarkLabel || undefined, children: [_jsx(ChakraSlider.Track, { children: _jsx(ChakraSlider.Range, {}) }), _jsx(SliderThumbs, { value: value }), _jsx(SliderMarks, { marks: marks })] })] }));
|
|
25
|
+
});
|
|
26
|
+
/**
|
|
27
|
+
* SliderThumbs component that renders the thumbs for the slider.
|
|
28
|
+
*
|
|
29
|
+
* @param {Object} props - The properties for the slider thumbs component.
|
|
30
|
+
* @param {number[]} [props.value] - The values for the thumbs.
|
|
31
|
+
* @returns {JSX.Element} The rendered slider thumbs component.
|
|
32
|
+
*/
|
|
33
|
+
function SliderThumbs(props) {
|
|
34
|
+
const { value } = props;
|
|
35
|
+
return (_jsx(_Fragment, { children: value === null || value === void 0 ? void 0 : value.map((_, index) => (_jsx(ChakraSlider.Thumb, { index: index, children: _jsx(ChakraSlider.HiddenInput, {}) }, index))) }));
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* SliderMarks component that renders the marks for the slider.
|
|
39
|
+
*
|
|
40
|
+
* @param {SliderMarksProps} props - The properties for the slider marks component.
|
|
41
|
+
* @param {Array<number | { value: number; label: React.ReactNode }>} [props.marks] - The marks to display on the slider.
|
|
42
|
+
* @returns {JSX.Element | null} The rendered slider marks component or null if no marks are provided.
|
|
43
|
+
*/
|
|
44
|
+
const SliderMarks = forwardRef(function SliderMarks(props, ref) {
|
|
45
|
+
const { marks } = props;
|
|
46
|
+
if (!(marks === null || marks === void 0 ? void 0 : marks.length)) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
return (_jsx(ChakraSlider.MarkerGroup, { ref: ref, children: marks.map((mark, index) => {
|
|
50
|
+
const value = typeof mark === 'number' ? mark : mark.value;
|
|
51
|
+
const label = typeof mark === 'number' ? undefined : mark.label;
|
|
52
|
+
return (_jsxs(ChakraSlider.Marker, { value: value, children: [_jsx(ChakraSlider.MarkerIndicator, {}), label] }, index));
|
|
53
|
+
}) }));
|
|
54
|
+
});
|
|
55
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"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"}
|