@vygruppen/spor-react 2.0.0 → 2.0.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.0.0 build
+> @vygruppen/spor-react@2.0.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,12 +8,12 @@
 CLI Target: node14
 CJS Build start
 ESM Build start
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.mjs".
 DTS Build start
-CJS dist/index.js 413.41 KB
-CJS ⚡️ Build success in 2932ms
-ESM dist/index.mjs 395.99 KB
-ESM ⚡️ Build success in 2933ms
-DTS ⚡️ Build success in 17522ms
-DTS dist/index.d.ts 248.55 KB
+ESM dist/index.mjs 396.07 KB
+ESM ⚡️ Build success in 1767ms
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
+CJS dist/index.js 413.49 KB
+CJS ⚡️ Build success in 2809ms
+DTS ⚡️ Build success in 17319ms
+DTS dist/index.d.ts 248.65 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 2.0.1
+
+### Patch Changes
+
+- 6b3cdd17: Add `startName` and `endName` props to `DateRangePicker` component
+
 ## 2.0.0
 
 ### Major Changes

package/dist/index.d.ts

@@ -436,7 +436,9 @@ declare function DatePicker({ variant, errorMessage, minHeight, showYearNavigati
 
 type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
+    startName?: string;
     endLabel?: string;
+    endName?: string;
     variant: ResponsiveValue<"simple" | "with-trigger">;
 };
 /**
@@ -445,10 +447,10 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps,
  * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
  *
  * ```tsx
- * <DateRangePicker startLabel="From" endLabel="To" variant="simple" />
+ * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="simple" />
  * ```
  */
-declare function DateRangePicker({ variant, minHeight, ...props }: DateRangePickerProps): JSX.Element;
+declare function DateRangePicker({ variant, minHeight, startName, endName, ...props }: DateRangePickerProps): JSX.Element;
 
 type TimePickerProps = Omit<BoxProps, "defaultValue"> & {
     /** The label. Defaults to a localized version of "Time" */

package/dist/index.js

@@ -3711,6 +3711,8 @@ function RangeCalendar(props) {
 function DateRangePicker({
   variant,
   minHeight,
+  startName,
+  endName,
   ...props
 }) {
   const formControlProps = react.useFormControlContext();
@@ -3780,6 +3782,7 @@ function DateRangePicker({
           DateField,
           {
             ...startFieldProps,
+            name: startName,
             label: props.startLabel,
             labelProps
           }
@@ -3789,6 +3792,7 @@ function DateRangePicker({
           DateField,
           {
             ...endFieldProps,
+            name: endName,
             label: props.endLabel,
             labelProps
           }

package/dist/index.mjs

@@ -3694,6 +3694,8 @@ function RangeCalendar(props) {
 function DateRangePicker({
   variant,
   minHeight,
+  startName,
+  endName,
   ...props
 }) {
   const formControlProps = useFormControlContext();
@@ -3763,6 +3765,7 @@ function DateRangePicker({
           DateField,
           {
             ...startFieldProps,
+            name: startName,
             label: props.startLabel,
             labelProps
           }
@@ -3772,6 +3775,7 @@ function DateRangePicker({
           DateField,
           {
             ...endFieldProps,
+            name: endName,
             label: props.endLabel,
             labelProps
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/datepicker/DateRangePicker.tsx

@@ -32,7 +32,9 @@ import { useCurrentLocale } from "./utils";
 type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
   Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
+    startName?: string;
     endLabel?: string;
+    endName?: string;
     variant: ResponsiveValue<"simple" | "with-trigger">;
   };
 /**
@@ -41,12 +43,14 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
  * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
  *
  * ```tsx
- * <DateRangePicker startLabel="From" endLabel="To" variant="simple" />
+ * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="simple" />
  * ```
  */
 export function DateRangePicker({
   variant,
   minHeight,
+  startName,
+  endName,
   ...props
 }: DateRangePickerProps) {
   const formControlProps = useFormControlContext();
@@ -128,6 +132,7 @@ export function DateRangePicker({
                 )}
                 <DateField
                   {...startFieldProps}
+                  name={startName}
                   label={props.startLabel}
                   labelProps={labelProps}
                 />
@@ -136,6 +141,7 @@ export function DateRangePicker({
                 </Box>
                 <DateField
                   {...endFieldProps}
+                  name={endName}
                   label={props.endLabel}
                   labelProps={labelProps}
                 />