@rehagro/ui 1.0.58 → 1.0.59

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.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" && /* @__PURE__ */ jsx(
3157
- "div",
3158
- {
3159
- role: "presentation",
3160
- className: "rh-fixed rh-inset-0 rh-z-50 rh-flex rh-items-center rh-justify-center rh-bg-text/50 rh-p-4",
3161
- onMouseDown: (event) => {
3162
- if (event.target === event.currentTarget) closeClockDialog();
3163
- },
3164
- children: /* @__PURE__ */ jsxs(
3165
- "div",
3166
- {
3167
- ref: dropdownRef,
3168
- role: "dialog",
3169
- "aria-modal": "true",
3170
- "aria-label": "Seletor de hora",
3171
- 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",
3172
- style: { boxShadow: "0 24px 48px rgb(8 11 18 / 0.24)" },
3173
- children: [
3174
- /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-normal rh-uppercase rh-text-text-muted", children: "Selecione a hora" }),
3175
- /* @__PURE__ */ jsxs("div", { className: "rh-mt-6 rh-flex rh-items-center rh-justify-between", children: [
3176
- isManualClockInput ? /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-gap-2", children: [
3177
- /* @__PURE__ */ jsx(
3178
- "input",
3179
- {
3180
- "aria-label": "Hora",
3181
- inputMode: "numeric",
3182
- maxLength: 2,
3183
- value: pad(pendingHour),
3184
- onChange: (event) => handleManualClockChange("hour", event.target.value),
3185
- 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"
3186
- }
3187
- ),
3188
- /* @__PURE__ */ jsx("span", { className: "rh-text-3xl rh-font-semibold rh-text-text-muted", children: ":" }),
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
- "input",
3240
+ "button",
3191
3241
  {
3192
- "aria-label": "Minuto",
3193
- inputMode: "numeric",
3194
- maxLength: 2,
3195
- value: pad(pendingMinute),
3196
- onChange: (event) => handleManualClockChange("minute", 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"
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
- ] }) : /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-gap-1 rh-text-3xl rh-font-semibold", children: [
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: () => setClockStep("hour"),
3206
- className: [
3207
- "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
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: () => setClockStep("minute"),
3219
- className: [
3220
- "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
3221
- clockStep === "minute" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
3222
- ].join(" "),
3223
- children: clockDisplayText.slice(3, 5)
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
- /* @__PURE__ */ jsx(
3228
- "button",
3229
- {
3230
- type: "button",
3231
- "aria-label": isManualClockInput ? "Voltar ao rel\xF3gio" : "Digitar hor\xE1rio manualmente",
3232
- onClick: () => setIsManualClockInput((current) => !current),
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",