@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/dist/index.d.cts
CHANGED
|
@@ -582,6 +582,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
|
|
|
582
582
|
outline: "1px solid";
|
|
583
583
|
outlineColor: "core.outline";
|
|
584
584
|
};
|
|
585
|
+
"&[data-active]": {
|
|
586
|
+
outline: "2px solid";
|
|
587
|
+
outlineColor: "outline.focus";
|
|
588
|
+
_hover: {
|
|
589
|
+
outlineColor: "outline.focus";
|
|
590
|
+
};
|
|
591
|
+
};
|
|
585
592
|
};
|
|
586
593
|
_invalid: {
|
|
587
594
|
outline: "2px solid";
|
|
@@ -606,6 +613,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
|
|
|
606
613
|
outline: "1px solid";
|
|
607
614
|
outlineColor: "core.outline";
|
|
608
615
|
};
|
|
616
|
+
"&[data-active]": {
|
|
617
|
+
outline: "2px solid";
|
|
618
|
+
outlineColor: "outline.focus";
|
|
619
|
+
_hover: {
|
|
620
|
+
outlineColor: "outline.focus";
|
|
621
|
+
};
|
|
622
|
+
};
|
|
609
623
|
};
|
|
610
624
|
_invalid: {
|
|
611
625
|
outline: "2px solid";
|
|
@@ -623,6 +637,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
|
|
|
623
637
|
outline: "1px solid";
|
|
624
638
|
outlineColor: "core.outline";
|
|
625
639
|
};
|
|
640
|
+
"&[data-active]": {
|
|
641
|
+
outline: "2px solid";
|
|
642
|
+
outlineColor: "outline.focus";
|
|
643
|
+
_hover: {
|
|
644
|
+
outlineColor: "outline.focus";
|
|
645
|
+
};
|
|
646
|
+
};
|
|
626
647
|
};
|
|
627
648
|
_invalid: {
|
|
628
649
|
outline: "2px solid";
|
|
@@ -660,6 +681,7 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
|
|
|
660
681
|
noCalendar?: boolean;
|
|
661
682
|
overrideBorderColor?: string;
|
|
662
683
|
isActive?: boolean;
|
|
684
|
+
onClick?: () => void;
|
|
663
685
|
} & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
664
686
|
|
|
665
687
|
type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
|
package/dist/index.d.ts
CHANGED
|
@@ -582,6 +582,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
|
|
|
582
582
|
outline: "1px solid";
|
|
583
583
|
outlineColor: "core.outline";
|
|
584
584
|
};
|
|
585
|
+
"&[data-active]": {
|
|
586
|
+
outline: "2px solid";
|
|
587
|
+
outlineColor: "outline.focus";
|
|
588
|
+
_hover: {
|
|
589
|
+
outlineColor: "outline.focus";
|
|
590
|
+
};
|
|
591
|
+
};
|
|
585
592
|
};
|
|
586
593
|
_invalid: {
|
|
587
594
|
outline: "2px solid";
|
|
@@ -606,6 +613,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
|
|
|
606
613
|
outline: "1px solid";
|
|
607
614
|
outlineColor: "core.outline";
|
|
608
615
|
};
|
|
616
|
+
"&[data-active]": {
|
|
617
|
+
outline: "2px solid";
|
|
618
|
+
outlineColor: "outline.focus";
|
|
619
|
+
_hover: {
|
|
620
|
+
outlineColor: "outline.focus";
|
|
621
|
+
};
|
|
622
|
+
};
|
|
609
623
|
};
|
|
610
624
|
_invalid: {
|
|
611
625
|
outline: "2px solid";
|
|
@@ -623,6 +637,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
|
|
|
623
637
|
outline: "1px solid";
|
|
624
638
|
outlineColor: "core.outline";
|
|
625
639
|
};
|
|
640
|
+
"&[data-active]": {
|
|
641
|
+
outline: "2px solid";
|
|
642
|
+
outlineColor: "outline.focus";
|
|
643
|
+
_hover: {
|
|
644
|
+
outlineColor: "outline.focus";
|
|
645
|
+
};
|
|
646
|
+
};
|
|
626
647
|
};
|
|
627
648
|
_invalid: {
|
|
628
649
|
outline: "2px solid";
|
|
@@ -660,6 +681,7 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
|
|
|
660
681
|
noCalendar?: boolean;
|
|
661
682
|
overrideBorderColor?: string;
|
|
662
683
|
isActive?: boolean;
|
|
684
|
+
onClick?: () => void;
|
|
663
685
|
} & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
664
686
|
|
|
665
687
|
type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
|
package/dist/index.mjs
CHANGED
|
@@ -1886,9 +1886,11 @@ var StyledField = forwardRef(
|
|
|
1886
1886
|
Box,
|
|
1887
1887
|
{
|
|
1888
1888
|
...otherProps,
|
|
1889
|
-
css:
|
|
1889
|
+
css: {
|
|
1890
|
+
...styles.wrapper,
|
|
1891
|
+
outlineColor: overrideBorderColor || void 0
|
|
1892
|
+
},
|
|
1890
1893
|
"data-active": isActive ? "" : void 0,
|
|
1891
|
-
style: overrideBorderColor ? { outlineColor: overrideBorderColor } : void 0,
|
|
1892
1894
|
ref,
|
|
1893
1895
|
"aria-invalid": invalid,
|
|
1894
1896
|
"aria-disabled": isDisabled,
|
|
@@ -1933,9 +1935,11 @@ var DatePicker = forwardRef(
|
|
|
1933
1935
|
const locale = useCurrentLocale();
|
|
1934
1936
|
const shouldShowCalendar = state.isOpen && !props.isDisabled && !props.noCalendar;
|
|
1935
1937
|
const onFieldClick = () => {
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1938
|
+
var _a5;
|
|
1939
|
+
if (!props.noCalendar) {
|
|
1940
|
+
state.setOpen(true);
|
|
1941
|
+
}
|
|
1942
|
+
(_a5 = props.onClick) == null ? void 0 : _a5.call(props);
|
|
1939
1943
|
};
|
|
1940
1944
|
const popoverContent = /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsx(Popover$1.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsx(
|
|
1941
1945
|
Calendar,
|
|
@@ -1966,7 +1970,7 @@ var DatePicker = forwardRef(
|
|
|
1966
1970
|
StyledField,
|
|
1967
1971
|
{
|
|
1968
1972
|
variant,
|
|
1969
|
-
onClick:
|
|
1973
|
+
onClick: onFieldClick,
|
|
1970
1974
|
paddingX: 3,
|
|
1971
1975
|
minHeight,
|
|
1972
1976
|
isDisabled: props.isDisabled,
|
|
@@ -7155,7 +7159,10 @@ var datePickerSlotRecipe = defineSlotRecipe({
|
|
|
7155
7159
|
},
|
|
7156
7160
|
"&[data-active]": {
|
|
7157
7161
|
outline: "2px solid",
|
|
7158
|
-
outlineColor: "outline.focus"
|
|
7162
|
+
outlineColor: "outline.focus",
|
|
7163
|
+
"&:hover": {
|
|
7164
|
+
outlineColor: "outline.focus"
|
|
7165
|
+
}
|
|
7159
7166
|
}
|
|
7160
7167
|
},
|
|
7161
7168
|
inputLabel: {
|
|
@@ -7282,6 +7289,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
|
|
|
7282
7289
|
backgroundColor: "ghost.surface.active",
|
|
7283
7290
|
outline: "1px solid",
|
|
7284
7291
|
outlineColor: "core.outline"
|
|
7292
|
+
},
|
|
7293
|
+
"&[data-active]": {
|
|
7294
|
+
outline: "2px solid",
|
|
7295
|
+
outlineColor: "outline.focus",
|
|
7296
|
+
_hover: {
|
|
7297
|
+
outlineColor: "outline.focus"
|
|
7298
|
+
}
|
|
7285
7299
|
}
|
|
7286
7300
|
},
|
|
7287
7301
|
_invalid: {
|
|
@@ -7306,6 +7320,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
|
|
|
7306
7320
|
backgroundColor: "ghost.surface.active",
|
|
7307
7321
|
outline: "1px solid",
|
|
7308
7322
|
outlineColor: "core.outline"
|
|
7323
|
+
},
|
|
7324
|
+
"&[data-active]": {
|
|
7325
|
+
outline: "2px solid",
|
|
7326
|
+
outlineColor: "outline.focus",
|
|
7327
|
+
_hover: {
|
|
7328
|
+
outlineColor: "outline.focus"
|
|
7329
|
+
}
|
|
7309
7330
|
}
|
|
7310
7331
|
},
|
|
7311
7332
|
_invalid: {
|
|
@@ -7323,6 +7344,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
|
|
|
7323
7344
|
backgroundColor: "ghost.surface.active",
|
|
7324
7345
|
outline: "1px solid",
|
|
7325
7346
|
outlineColor: "core.outline"
|
|
7347
|
+
},
|
|
7348
|
+
"&[data-active]": {
|
|
7349
|
+
outline: "2px solid",
|
|
7350
|
+
outlineColor: "outline.focus",
|
|
7351
|
+
_hover: {
|
|
7352
|
+
outlineColor: "outline.focus"
|
|
7353
|
+
}
|
|
7326
7354
|
}
|
|
7327
7355
|
},
|
|
7328
7356
|
_invalid: {
|