@trackunit/react-form-components 0.2.14 → 0.2.15
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/index.cjs.js +10 -10
- package/index.esm.js +10 -10
- package/package.json +1 -1
- package/src/components/Schedule/Schedule.d.ts +1 -1
package/index.cjs.js
CHANGED
|
@@ -1384,6 +1384,7 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
|
|
|
1384
1384
|
"hover:cursor-pointer",
|
|
1385
1385
|
"hover:bg-slate-100",
|
|
1386
1386
|
"focus-visible:outline-primary-700",
|
|
1387
|
+
"mt-1",
|
|
1387
1388
|
], {
|
|
1388
1389
|
variants: {
|
|
1389
1390
|
checked: {
|
|
@@ -1431,7 +1432,6 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
|
|
|
1431
1432
|
],
|
|
1432
1433
|
});
|
|
1433
1434
|
const cvaRadioItemWrapper = cssClassVarianceUtilities.cvaMerge([
|
|
1434
|
-
"items-center",
|
|
1435
1435
|
"gap-2",
|
|
1436
1436
|
"group",
|
|
1437
1437
|
"grid",
|
|
@@ -1499,10 +1499,10 @@ const RadioItem = ({ label, value, dataTestId, className, description, suffix, .
|
|
|
1499
1499
|
checked: isChecked,
|
|
1500
1500
|
disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
|
|
1501
1501
|
invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
|
|
1502
|
-
}), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("label", { className: cvaLabel({
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1502
|
+
}), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("label", { className: cvaLabel({
|
|
1503
|
+
invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
|
|
1504
|
+
disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
|
|
1505
|
+
}), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsxRuntime.jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null, suffix] })] }));
|
|
1506
1506
|
};
|
|
1507
1507
|
|
|
1508
1508
|
const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -1566,13 +1566,13 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
|
|
|
1566
1566
|
? {
|
|
1567
1567
|
...day,
|
|
1568
1568
|
range: { timeFrom: "", timeTo: "" },
|
|
1569
|
-
|
|
1569
|
+
isAllDay: isAllDayChecked,
|
|
1570
1570
|
}
|
|
1571
1571
|
: day);
|
|
1572
1572
|
onChange(newSchedule);
|
|
1573
1573
|
};
|
|
1574
|
-
return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel,
|
|
1575
|
-
return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked:
|
|
1574
|
+
return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
|
|
1575
|
+
return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-gray-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[60px,200px,60px,2fr] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
|
|
1576
1576
|
}) }));
|
|
1577
1577
|
};
|
|
1578
1578
|
|
|
@@ -1610,7 +1610,7 @@ const parseSchedule = (scheduleString) => {
|
|
|
1610
1610
|
const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
|
|
1611
1611
|
return {
|
|
1612
1612
|
day: Number(day),
|
|
1613
|
-
range:
|
|
1613
|
+
range: timeFrom === undefined || timeTo === undefined
|
|
1614
1614
|
? undefined
|
|
1615
1615
|
: {
|
|
1616
1616
|
timeFrom: timeFrom,
|
|
@@ -1620,7 +1620,7 @@ const parseSchedule = (scheduleString) => {
|
|
|
1620
1620
|
};
|
|
1621
1621
|
});
|
|
1622
1622
|
const filteredSchedule = schedule
|
|
1623
|
-
.filter(daySchedule =>
|
|
1623
|
+
.filter(daySchedule => daySchedule.range)
|
|
1624
1624
|
.map(daySchedule => ({
|
|
1625
1625
|
day: daySchedule.day,
|
|
1626
1626
|
range: daySchedule.range,
|
package/index.esm.js
CHANGED
|
@@ -1365,6 +1365,7 @@ const cvaRadioItem = cvaMerge([
|
|
|
1365
1365
|
"hover:cursor-pointer",
|
|
1366
1366
|
"hover:bg-slate-100",
|
|
1367
1367
|
"focus-visible:outline-primary-700",
|
|
1368
|
+
"mt-1",
|
|
1368
1369
|
], {
|
|
1369
1370
|
variants: {
|
|
1370
1371
|
checked: {
|
|
@@ -1412,7 +1413,6 @@ const cvaRadioItem = cvaMerge([
|
|
|
1412
1413
|
],
|
|
1413
1414
|
});
|
|
1414
1415
|
const cvaRadioItemWrapper = cvaMerge([
|
|
1415
|
-
"items-center",
|
|
1416
1416
|
"gap-2",
|
|
1417
1417
|
"group",
|
|
1418
1418
|
"grid",
|
|
@@ -1480,10 +1480,10 @@ const RadioItem = ({ label, value, dataTestId, className, description, suffix, .
|
|
|
1480
1480
|
checked: isChecked,
|
|
1481
1481
|
disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
|
|
1482
1482
|
invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
|
|
1483
|
-
}), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsx(Tooltip, { className: "w-full", disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsx("label", { className: cvaLabel({
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1483
|
+
}), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsxs("div", { className: "flex flex-col", children: [jsx(Tooltip, { className: "w-full", disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsx("label", { className: cvaLabel({
|
|
1484
|
+
invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
|
|
1485
|
+
disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
|
|
1486
|
+
}), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), description ? (jsx(Tooltip, { className: "w-full", disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null, suffix] })] }));
|
|
1487
1487
|
};
|
|
1488
1488
|
|
|
1489
1489
|
const cvaTimeRange = cvaMerge([
|
|
@@ -1547,13 +1547,13 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
|
|
|
1547
1547
|
? {
|
|
1548
1548
|
...day,
|
|
1549
1549
|
range: { timeFrom: "", timeTo: "" },
|
|
1550
|
-
|
|
1550
|
+
isAllDay: isAllDayChecked,
|
|
1551
1551
|
}
|
|
1552
1552
|
: day);
|
|
1553
1553
|
onChange(newSchedule);
|
|
1554
1554
|
};
|
|
1555
|
-
return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel,
|
|
1556
|
-
return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked:
|
|
1555
|
+
return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
|
|
1556
|
+
return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-gray-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[60px,200px,60px,2fr] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
|
|
1557
1557
|
}) }));
|
|
1558
1558
|
};
|
|
1559
1559
|
|
|
@@ -1591,7 +1591,7 @@ const parseSchedule = (scheduleString) => {
|
|
|
1591
1591
|
const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
|
|
1592
1592
|
return {
|
|
1593
1593
|
day: Number(day),
|
|
1594
|
-
range:
|
|
1594
|
+
range: timeFrom === undefined || timeTo === undefined
|
|
1595
1595
|
? undefined
|
|
1596
1596
|
: {
|
|
1597
1597
|
timeFrom: timeFrom,
|
|
@@ -1601,7 +1601,7 @@ const parseSchedule = (scheduleString) => {
|
|
|
1601
1601
|
};
|
|
1602
1602
|
});
|
|
1603
1603
|
const filteredSchedule = schedule
|
|
1604
|
-
.filter(daySchedule =>
|
|
1604
|
+
.filter(daySchedule => daySchedule.range)
|
|
1605
1605
|
.map(daySchedule => ({
|
|
1606
1606
|
day: daySchedule.day,
|
|
1607
1607
|
range: daySchedule.range,
|
package/package.json
CHANGED