@rehagro/ui 1.0.58 → 1.0.60
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/index.d.mts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +130 -110
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +130 -110
- package/dist/index.mjs.map +1 -1
- package/dist/native.js.map +1 -1
- package/dist/native.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -2838,6 +2838,17 @@ function getClockPosition(index, radius) {
|
|
|
2838
2838
|
top: `calc(50% + ${Math.sin(angle) * radius}px)`
|
|
2839
2839
|
};
|
|
2840
2840
|
}
|
|
2841
|
+
function getRehagroPortalStyle(source) {
|
|
2842
|
+
const root = source?.closest(".rh-root");
|
|
2843
|
+
if (!root) return void 0;
|
|
2844
|
+
const variables = {};
|
|
2845
|
+
for (let index = 0; index < root.style.length; index += 1) {
|
|
2846
|
+
const property = root.style.item(index);
|
|
2847
|
+
if (!property.startsWith("--rh-")) continue;
|
|
2848
|
+
variables[property] = root.style.getPropertyValue(property);
|
|
2849
|
+
}
|
|
2850
|
+
return variables;
|
|
2851
|
+
}
|
|
2841
2852
|
var TimePicker = forwardRef(
|
|
2842
2853
|
function TimePicker2(props, ref) {
|
|
2843
2854
|
const {
|
|
@@ -3153,128 +3164,129 @@ var TimePicker = forwardRef(
|
|
|
3153
3164
|
]
|
|
3154
3165
|
}
|
|
3155
3166
|
),
|
|
3156
|
-
isOpen && presentation === "clock" &&
|
|
3157
|
-
"div",
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3177
|
-
/* @__PURE__ */
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3167
|
+
isOpen && presentation === "clock" && typeof document !== "undefined" && createPortal(
|
|
3168
|
+
/* @__PURE__ */ jsx("div", { className: "rh-root", style: getRehagroPortalStyle(wrapperRef.current), children: /* @__PURE__ */ jsx(
|
|
3169
|
+
"div",
|
|
3170
|
+
{
|
|
3171
|
+
role: "presentation",
|
|
3172
|
+
className: "rh-fixed rh-inset-0 rh-z-50 rh-flex rh-items-center rh-justify-center rh-bg-text/50 rh-p-4",
|
|
3173
|
+
onMouseDown: (event) => {
|
|
3174
|
+
if (event.target === event.currentTarget) closeClockDialog();
|
|
3175
|
+
},
|
|
3176
|
+
children: /* @__PURE__ */ jsxs(
|
|
3177
|
+
"div",
|
|
3178
|
+
{
|
|
3179
|
+
ref: dropdownRef,
|
|
3180
|
+
role: "dialog",
|
|
3181
|
+
"aria-modal": "true",
|
|
3182
|
+
"aria-label": "Seletor de hora",
|
|
3183
|
+
className: "rh-flex rh-w-full rh-max-w-[360px] rh-flex-col rh-rounded-sm rh-bg-surface rh-p-6 rh-text-text",
|
|
3184
|
+
style: { boxShadow: "0 24px 48px rgb(8 11 18 / 0.24)" },
|
|
3185
|
+
children: [
|
|
3186
|
+
/* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-normal rh-uppercase rh-text-text-muted", children: "Selecione a hora" }),
|
|
3187
|
+
/* @__PURE__ */ jsxs("div", { className: "rh-mt-6 rh-flex rh-items-center rh-justify-between", children: [
|
|
3188
|
+
isManualClockInput ? /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-gap-2", children: [
|
|
3189
|
+
/* @__PURE__ */ jsx(
|
|
3190
|
+
"input",
|
|
3191
|
+
{
|
|
3192
|
+
"aria-label": "Hora",
|
|
3193
|
+
inputMode: "numeric",
|
|
3194
|
+
maxLength: 2,
|
|
3195
|
+
value: pad(pendingHour),
|
|
3196
|
+
onChange: (event) => handleManualClockChange("hour", event.target.value),
|
|
3197
|
+
className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
|
|
3198
|
+
}
|
|
3199
|
+
),
|
|
3200
|
+
/* @__PURE__ */ jsx("span", { className: "rh-text-2xl rh-font-semibold rh-text-text-muted", children: ":" }),
|
|
3201
|
+
/* @__PURE__ */ jsx(
|
|
3202
|
+
"input",
|
|
3203
|
+
{
|
|
3204
|
+
"aria-label": "Minuto",
|
|
3205
|
+
inputMode: "numeric",
|
|
3206
|
+
maxLength: 2,
|
|
3207
|
+
value: pad(pendingMinute),
|
|
3208
|
+
onChange: (event) => handleManualClockChange("minute", event.target.value),
|
|
3209
|
+
className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
|
|
3210
|
+
}
|
|
3211
|
+
)
|
|
3212
|
+
] }) : /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-gap-1 rh-text-2xl rh-font-semibold", children: [
|
|
3213
|
+
/* @__PURE__ */ jsx(
|
|
3214
|
+
"button",
|
|
3215
|
+
{
|
|
3216
|
+
type: "button",
|
|
3217
|
+
onClick: () => setClockStep("hour"),
|
|
3218
|
+
className: [
|
|
3219
|
+
"rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
|
|
3220
|
+
clockStep === "hour" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
|
|
3221
|
+
].join(" "),
|
|
3222
|
+
children: clockDisplayText.slice(0, 2)
|
|
3223
|
+
}
|
|
3224
|
+
),
|
|
3225
|
+
/* @__PURE__ */ jsx("span", { className: "rh-text-text-muted", children: ":" }),
|
|
3226
|
+
/* @__PURE__ */ jsx(
|
|
3227
|
+
"button",
|
|
3228
|
+
{
|
|
3229
|
+
type: "button",
|
|
3230
|
+
onClick: () => setClockStep("minute"),
|
|
3231
|
+
className: [
|
|
3232
|
+
"rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
|
|
3233
|
+
clockStep === "minute" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
|
|
3234
|
+
].join(" "),
|
|
3235
|
+
children: clockDisplayText.slice(3, 5)
|
|
3236
|
+
}
|
|
3237
|
+
)
|
|
3238
|
+
] }),
|
|
3189
3239
|
/* @__PURE__ */ jsx(
|
|
3190
|
-
"
|
|
3240
|
+
"button",
|
|
3191
3241
|
{
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
|
|
3242
|
+
type: "button",
|
|
3243
|
+
"aria-label": isManualClockInput ? "Voltar ao rel\xF3gio" : "Digitar hor\xE1rio manualmente",
|
|
3244
|
+
onClick: () => setIsManualClockInput((current) => !current),
|
|
3245
|
+
className: "rh-rounded-full rh-p-2 rh-text-text hover:rh-bg-background",
|
|
3246
|
+
children: /* @__PURE__ */ jsx(PencilIcon, {})
|
|
3198
3247
|
}
|
|
3199
3248
|
)
|
|
3200
|
-
] })
|
|
3249
|
+
] }),
|
|
3250
|
+
!isManualClockInput && /* @__PURE__ */ jsx("div", { className: "rh-mx-auto rh-mt-8 rh-flex rh-h-[256px] rh-w-[256px] rh-items-center rh-justify-center rh-rounded-full rh-bg-background", children: /* @__PURE__ */ jsxs("div", { className: "rh-relative rh-h-full rh-w-full", children: [
|
|
3251
|
+
clockStep === "hour" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3252
|
+
CLOCK_HOURS_OUTER.map(
|
|
3253
|
+
(hour, index) => clockHourButton(hour, index, 102)
|
|
3254
|
+
),
|
|
3255
|
+
CLOCK_HOURS_INNER.map(
|
|
3256
|
+
(hour, index) => clockHourButton(hour, index, 68)
|
|
3257
|
+
)
|
|
3258
|
+
] }) : CLOCK_MINUTES.map((minute, index) => clockMinuteButton(minute, index)),
|
|
3259
|
+
/* @__PURE__ */ jsx("span", { className: "rh-absolute rh-left-1/2 rh-top-1/2 rh-h-2 rh-w-2 -rh-translate-x-1/2 -rh-translate-y-1/2 rh-rounded-full rh-bg-primary" })
|
|
3260
|
+
] }) }),
|
|
3261
|
+
/* @__PURE__ */ jsxs("div", { className: "rh-mt-8 rh-flex rh-justify-end rh-gap-6", children: [
|
|
3201
3262
|
/* @__PURE__ */ jsx(
|
|
3202
3263
|
"button",
|
|
3203
3264
|
{
|
|
3204
3265
|
type: "button",
|
|
3205
|
-
onClick:
|
|
3206
|
-
className:
|
|
3207
|
-
|
|
3208
|
-
clockStep === "hour" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
|
|
3209
|
-
].join(" "),
|
|
3210
|
-
children: clockDisplayText.slice(0, 2)
|
|
3266
|
+
onClick: closeClockDialog,
|
|
3267
|
+
className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
|
|
3268
|
+
children: "Cancelar"
|
|
3211
3269
|
}
|
|
3212
3270
|
),
|
|
3213
|
-
/* @__PURE__ */ jsx("span", { className: "rh-text-text-muted", children: ":" }),
|
|
3214
3271
|
/* @__PURE__ */ jsx(
|
|
3215
3272
|
"button",
|
|
3216
3273
|
{
|
|
3217
3274
|
type: "button",
|
|
3218
|
-
onClick: () =>
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
children:
|
|
3275
|
+
onClick: () => {
|
|
3276
|
+
if (hasPendingValue) commit(pendingHour, pendingMinute);
|
|
3277
|
+
else closeClockDialog();
|
|
3278
|
+
},
|
|
3279
|
+
className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
|
|
3280
|
+
children: "OK"
|
|
3224
3281
|
}
|
|
3225
3282
|
)
|
|
3226
|
-
] })
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
className: "rh-rounded-full rh-p-2 rh-text-text hover:rh-bg-background",
|
|
3234
|
-
children: /* @__PURE__ */ jsx(PencilIcon, {})
|
|
3235
|
-
}
|
|
3236
|
-
)
|
|
3237
|
-
] }),
|
|
3238
|
-
!isManualClockInput && /* @__PURE__ */ jsx("div", { className: "rh-mx-auto rh-mt-8 rh-flex rh-h-[256px] rh-w-[256px] rh-items-center rh-justify-center rh-rounded-full rh-bg-background", children: /* @__PURE__ */ jsxs("div", { className: "rh-relative rh-h-full rh-w-full", children: [
|
|
3239
|
-
clockStep === "hour" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3240
|
-
CLOCK_HOURS_OUTER.map(
|
|
3241
|
-
(hour, index) => clockHourButton(hour, index, 102)
|
|
3242
|
-
),
|
|
3243
|
-
CLOCK_HOURS_INNER.map(
|
|
3244
|
-
(hour, index) => clockHourButton(hour, index, 68)
|
|
3245
|
-
)
|
|
3246
|
-
] }) : CLOCK_MINUTES.map(
|
|
3247
|
-
(minute, index) => clockMinuteButton(minute, index)
|
|
3248
|
-
),
|
|
3249
|
-
/* @__PURE__ */ jsx("span", { className: "rh-absolute rh-left-1/2 rh-top-1/2 rh-h-2 rh-w-2 -rh-translate-x-1/2 -rh-translate-y-1/2 rh-rounded-full rh-bg-primary" })
|
|
3250
|
-
] }) }),
|
|
3251
|
-
/* @__PURE__ */ jsxs("div", { className: "rh-mt-8 rh-flex rh-justify-end rh-gap-6", children: [
|
|
3252
|
-
/* @__PURE__ */ jsx(
|
|
3253
|
-
"button",
|
|
3254
|
-
{
|
|
3255
|
-
type: "button",
|
|
3256
|
-
onClick: closeClockDialog,
|
|
3257
|
-
className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
|
|
3258
|
-
children: "Cancelar"
|
|
3259
|
-
}
|
|
3260
|
-
),
|
|
3261
|
-
/* @__PURE__ */ jsx(
|
|
3262
|
-
"button",
|
|
3263
|
-
{
|
|
3264
|
-
type: "button",
|
|
3265
|
-
onClick: () => {
|
|
3266
|
-
if (hasPendingValue) commit(pendingHour, pendingMinute);
|
|
3267
|
-
else closeClockDialog();
|
|
3268
|
-
},
|
|
3269
|
-
className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
|
|
3270
|
-
children: "OK"
|
|
3271
|
-
}
|
|
3272
|
-
)
|
|
3273
|
-
] })
|
|
3274
|
-
]
|
|
3275
|
-
}
|
|
3276
|
-
)
|
|
3277
|
-
}
|
|
3283
|
+
] })
|
|
3284
|
+
]
|
|
3285
|
+
}
|
|
3286
|
+
)
|
|
3287
|
+
}
|
|
3288
|
+
) }),
|
|
3289
|
+
document.body
|
|
3278
3290
|
),
|
|
3279
3291
|
helperText && !isHelperDismissed && /* @__PURE__ */ jsxs(
|
|
3280
3292
|
"span",
|
|
@@ -4555,7 +4567,8 @@ var CustomSelect = ({
|
|
|
4555
4567
|
textColor,
|
|
4556
4568
|
placeholderColor,
|
|
4557
4569
|
backgroundColor,
|
|
4558
|
-
type = "select"
|
|
4570
|
+
type = "select",
|
|
4571
|
+
disabled = false
|
|
4559
4572
|
}) => {
|
|
4560
4573
|
const [isOpen, setIsOpen] = useState(false);
|
|
4561
4574
|
const [dropdownStyle, setDropdownStyle] = useState({});
|
|
@@ -4589,6 +4602,7 @@ var CustomSelect = ({
|
|
|
4589
4602
|
};
|
|
4590
4603
|
};
|
|
4591
4604
|
const openDropdown = () => {
|
|
4605
|
+
if (disabled) return;
|
|
4592
4606
|
if (!isOpen) setDropdownStyle(calcPosition());
|
|
4593
4607
|
setIsOpen((prev) => !prev);
|
|
4594
4608
|
};
|
|
@@ -4637,6 +4651,7 @@ var CustomSelect = ({
|
|
|
4637
4651
|
{
|
|
4638
4652
|
ref: textAreaRef,
|
|
4639
4653
|
value,
|
|
4654
|
+
disabled,
|
|
4640
4655
|
placeholder,
|
|
4641
4656
|
rows: 1,
|
|
4642
4657
|
onClick: (e) => e.stopPropagation(),
|
|
@@ -4648,7 +4663,7 @@ var CustomSelect = ({
|
|
|
4648
4663
|
color: inputTextColor,
|
|
4649
4664
|
backgroundColor: backgroundColor || "transparent"
|
|
4650
4665
|
},
|
|
4651
|
-
className: "rh-table-textarea rh-flex rh-items-center rh-leading-[20px] rh-py-[7px] rh-w-full rh-min-h-[40px] rh-text-sm rh-px-1 rh-border rh-bg-surface rh-rounded-xs rh-border-transparent rh-line-height-[20px] rh-outline-none rh-resize-none rh-overflow-hidden hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200"
|
|
4666
|
+
className: "rh-table-textarea rh-flex rh-items-center rh-leading-[20px] rh-py-[7px] rh-w-full rh-min-h-[40px] rh-text-sm rh-px-1 rh-border rh-bg-surface rh-rounded-xs rh-border-transparent rh-line-height-[20px] rh-outline-none rh-resize-none rh-overflow-hidden hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200 disabled:rh-opacity-60 disabled:rh-cursor-not-allowed disabled:hover:rh-border-transparent disabled:hover:rh-ring-0"
|
|
4652
4667
|
}
|
|
4653
4668
|
),
|
|
4654
4669
|
/* @__PURE__ */ jsx("style", { children: `.rh-table-textarea::placeholder { color: ${inputPlaceholderColor}; }` })
|
|
@@ -4659,12 +4674,13 @@ var CustomSelect = ({
|
|
|
4659
4674
|
"button",
|
|
4660
4675
|
{
|
|
4661
4676
|
type: "button",
|
|
4677
|
+
disabled,
|
|
4662
4678
|
onClick: (e) => {
|
|
4663
4679
|
e.stopPropagation();
|
|
4664
4680
|
openDropdown();
|
|
4665
4681
|
},
|
|
4666
4682
|
style: { backgroundColor: backgroundColor || void 0 },
|
|
4667
|
-
className: "rh-w-full rh-min-h-[40px] rh-flex rh-items-center rh-border rh-bg-surface rh-rounded-sm rh-border-transparent rh-justify-between rh-py-2 hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200 rh-cursor-pointer rh-text-left",
|
|
4683
|
+
className: "rh-w-full rh-min-h-[40px] rh-flex rh-items-center rh-border rh-bg-surface rh-rounded-sm rh-border-transparent rh-justify-between rh-py-2 hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200 rh-cursor-pointer rh-text-left disabled:rh-cursor-not-allowed disabled:rh-opacity-60 disabled:hover:rh-border-transparent disabled:hover:rh-ring-0",
|
|
4668
4684
|
children: /* @__PURE__ */ jsx("div", { className: "rh-flex rh-items-center rh-gap-2 rh-flex-1 rh-px-0.5", children: /* @__PURE__ */ jsx(
|
|
4669
4685
|
"span",
|
|
4670
4686
|
{
|
|
@@ -4750,6 +4766,8 @@ function TableInner({
|
|
|
4750
4766
|
rowKey,
|
|
4751
4767
|
rowClickable = false,
|
|
4752
4768
|
onRowClick,
|
|
4769
|
+
disableEditableControls = false,
|
|
4770
|
+
disableEditableSelects = false,
|
|
4753
4771
|
size = "md",
|
|
4754
4772
|
variant = "default",
|
|
4755
4773
|
sort,
|
|
@@ -4769,6 +4787,7 @@ function TableInner({
|
|
|
4769
4787
|
className = "",
|
|
4770
4788
|
...rest
|
|
4771
4789
|
}, ref) {
|
|
4790
|
+
const shouldDisableEditableControls = disableEditableControls || disableEditableSelects;
|
|
4772
4791
|
const handleSort = (column) => {
|
|
4773
4792
|
if (!column.sortable || !onSortChange) return;
|
|
4774
4793
|
const newDirection = sort?.key === column.key ? sort.direction === "asc" ? "desc" : sort.direction === "desc" ? null : "asc" : "asc";
|
|
@@ -4861,7 +4880,7 @@ function TableInner({
|
|
|
4861
4880
|
}
|
|
4862
4881
|
return column.editablePlaceholderColor;
|
|
4863
4882
|
};
|
|
4864
|
-
return /* @__PURE__ */ jsx("div", { className: "rh-w-full rh-rounded
|
|
4883
|
+
return /* @__PURE__ */ jsx("div", { className: "rh-w-full rh-rounded", children: /* @__PURE__ */ jsxs(
|
|
4865
4884
|
"table",
|
|
4866
4885
|
{
|
|
4867
4886
|
ref,
|
|
@@ -4979,6 +4998,7 @@ function TableInner({
|
|
|
4979
4998
|
CustomSelect,
|
|
4980
4999
|
{
|
|
4981
5000
|
type: column.type ?? "select",
|
|
5001
|
+
disabled: shouldDisableEditableControls,
|
|
4982
5002
|
options: column.choices,
|
|
4983
5003
|
value: column.editableValue(row),
|
|
4984
5004
|
placeholder: column.editablePlaceholder,
|