@vygruppen/spor-react 12.13.3 → 12.13.4
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/.turbo/turbo-build.log +10 -10
- package/.turbo/turbo-postinstall.log +2 -1
- package/CHANGELOG.md +6 -0
- package/dist/index.cjs +35 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.mjs +35 -7
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/datepicker/DatePicker.tsx +6 -3
- package/src/datepicker/StyledField.tsx +4 -6
- package/src/theme/slot-recipes/datepicker.ts +27 -0
package/package.json
CHANGED
|
@@ -46,6 +46,7 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
|
|
|
46
46
|
noCalendar?: boolean;
|
|
47
47
|
overrideBorderColor?: string;
|
|
48
48
|
isActive?: boolean;
|
|
49
|
+
onClick?: () => void;
|
|
49
50
|
} & FieldBaseProps;
|
|
50
51
|
|
|
51
52
|
/**
|
|
@@ -105,8 +106,10 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
|
|
|
105
106
|
state.isOpen && !props.isDisabled && !props.noCalendar;
|
|
106
107
|
|
|
107
108
|
const onFieldClick = () => {
|
|
108
|
-
if (props.noCalendar)
|
|
109
|
-
|
|
109
|
+
if (!props.noCalendar) {
|
|
110
|
+
state.setOpen(true);
|
|
111
|
+
}
|
|
112
|
+
props.onClick?.();
|
|
110
113
|
};
|
|
111
114
|
|
|
112
115
|
const popoverContent = (
|
|
@@ -143,7 +146,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
|
|
|
143
146
|
<PopoverAnchor>
|
|
144
147
|
<StyledField
|
|
145
148
|
variant={variant}
|
|
146
|
-
onClick={
|
|
149
|
+
onClick={onFieldClick}
|
|
147
150
|
paddingX={3}
|
|
148
151
|
minHeight={minHeight}
|
|
149
152
|
isDisabled={props.isDisabled}
|
|
@@ -39,13 +39,11 @@ export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
|
|
|
39
39
|
return (
|
|
40
40
|
<Box
|
|
41
41
|
{...otherProps}
|
|
42
|
-
css={
|
|
42
|
+
css={{
|
|
43
|
+
...styles.wrapper,
|
|
44
|
+
outlineColor: overrideBorderColor || undefined,
|
|
45
|
+
}}
|
|
43
46
|
data-active={isActive ? "" : undefined}
|
|
44
|
-
style={
|
|
45
|
-
overrideBorderColor
|
|
46
|
-
? { outlineColor: overrideBorderColor }
|
|
47
|
-
: undefined
|
|
48
|
-
}
|
|
49
47
|
ref={ref}
|
|
50
48
|
aria-invalid={invalid}
|
|
51
49
|
aria-disabled={isDisabled}
|
|
@@ -31,6 +31,9 @@ export const datePickerSlotRecipe = defineSlotRecipe({
|
|
|
31
31
|
"&[data-active]": {
|
|
32
32
|
outline: "2px solid",
|
|
33
33
|
outlineColor: "outline.focus",
|
|
34
|
+
"&:hover": {
|
|
35
|
+
outlineColor: "outline.focus",
|
|
36
|
+
},
|
|
34
37
|
},
|
|
35
38
|
},
|
|
36
39
|
inputLabel: {
|
|
@@ -162,6 +165,14 @@ export const datePickerSlotRecipe = defineSlotRecipe({
|
|
|
162
165
|
outline: "1px solid",
|
|
163
166
|
outlineColor: "core.outline",
|
|
164
167
|
},
|
|
168
|
+
|
|
169
|
+
"&[data-active]": {
|
|
170
|
+
outline: "2px solid",
|
|
171
|
+
outlineColor: "outline.focus",
|
|
172
|
+
_hover: {
|
|
173
|
+
outlineColor: "outline.focus",
|
|
174
|
+
},
|
|
175
|
+
},
|
|
165
176
|
},
|
|
166
177
|
_invalid: {
|
|
167
178
|
outline: "2px solid",
|
|
@@ -187,6 +198,14 @@ export const datePickerSlotRecipe = defineSlotRecipe({
|
|
|
187
198
|
outline: "1px solid",
|
|
188
199
|
outlineColor: "core.outline",
|
|
189
200
|
},
|
|
201
|
+
|
|
202
|
+
"&[data-active]": {
|
|
203
|
+
outline: "2px solid",
|
|
204
|
+
outlineColor: "outline.focus",
|
|
205
|
+
_hover: {
|
|
206
|
+
outlineColor: "outline.focus",
|
|
207
|
+
},
|
|
208
|
+
},
|
|
190
209
|
},
|
|
191
210
|
_invalid: {
|
|
192
211
|
outline: "2px solid",
|
|
@@ -204,6 +223,14 @@ export const datePickerSlotRecipe = defineSlotRecipe({
|
|
|
204
223
|
outline: "1px solid",
|
|
205
224
|
outlineColor: "core.outline",
|
|
206
225
|
},
|
|
226
|
+
|
|
227
|
+
"&[data-active]": {
|
|
228
|
+
outline: "2px solid",
|
|
229
|
+
outlineColor: "outline.focus",
|
|
230
|
+
_hover: {
|
|
231
|
+
outlineColor: "outline.focus",
|
|
232
|
+
},
|
|
233
|
+
},
|
|
207
234
|
},
|
|
208
235
|
_invalid: {
|
|
209
236
|
outline: "2px solid",
|