@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.js CHANGED
@@ -2844,6 +2844,17 @@ function getClockPosition(index, radius) {
2844
2844
  top: `calc(50% + ${Math.sin(angle) * radius}px)`
2845
2845
  };
2846
2846
  }
2847
+ function getRehagroPortalStyle(source) {
2848
+ const root = source?.closest(".rh-root");
2849
+ if (!root) return void 0;
2850
+ const variables = {};
2851
+ for (let index = 0; index < root.style.length; index += 1) {
2852
+ const property = root.style.item(index);
2853
+ if (!property.startsWith("--rh-")) continue;
2854
+ variables[property] = root.style.getPropertyValue(property);
2855
+ }
2856
+ return variables;
2857
+ }
2847
2858
  var TimePicker = React9.forwardRef(
2848
2859
  function TimePicker2(props, ref) {
2849
2860
  const {
@@ -3159,128 +3170,129 @@ var TimePicker = React9.forwardRef(
3159
3170
  ]
3160
3171
  }
3161
3172
  ),
3162
- isOpen && presentation === "clock" && /* @__PURE__ */ jsxRuntime.jsx(
3163
- "div",
3164
- {
3165
- role: "presentation",
3166
- className: "rh-fixed rh-inset-0 rh-z-50 rh-flex rh-items-center rh-justify-center rh-bg-text/50 rh-p-4",
3167
- onMouseDown: (event) => {
3168
- if (event.target === event.currentTarget) closeClockDialog();
3169
- },
3170
- children: /* @__PURE__ */ jsxRuntime.jsxs(
3171
- "div",
3172
- {
3173
- ref: dropdownRef,
3174
- role: "dialog",
3175
- "aria-modal": "true",
3176
- "aria-label": "Seletor de hora",
3177
- 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",
3178
- style: { boxShadow: "0 24px 48px rgb(8 11 18 / 0.24)" },
3179
- children: [
3180
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-normal rh-uppercase rh-text-text-muted", children: "Selecione a hora" }),
3181
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-6 rh-flex rh-items-center rh-justify-between", children: [
3182
- isManualClockInput ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-2", children: [
3183
- /* @__PURE__ */ jsxRuntime.jsx(
3184
- "input",
3185
- {
3186
- "aria-label": "Hora",
3187
- inputMode: "numeric",
3188
- maxLength: 2,
3189
- value: pad(pendingHour),
3190
- onChange: (event) => handleManualClockChange("hour", event.target.value),
3191
- 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"
3192
- }
3193
- ),
3194
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-3xl rh-font-semibold rh-text-text-muted", children: ":" }),
3173
+ isOpen && presentation === "clock" && typeof document !== "undefined" && reactDom.createPortal(
3174
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-root", style: getRehagroPortalStyle(wrapperRef.current), children: /* @__PURE__ */ jsxRuntime.jsx(
3175
+ "div",
3176
+ {
3177
+ role: "presentation",
3178
+ className: "rh-fixed rh-inset-0 rh-z-50 rh-flex rh-items-center rh-justify-center rh-bg-text/50 rh-p-4",
3179
+ onMouseDown: (event) => {
3180
+ if (event.target === event.currentTarget) closeClockDialog();
3181
+ },
3182
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
3183
+ "div",
3184
+ {
3185
+ ref: dropdownRef,
3186
+ role: "dialog",
3187
+ "aria-modal": "true",
3188
+ "aria-label": "Seletor de hora",
3189
+ 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",
3190
+ style: { boxShadow: "0 24px 48px rgb(8 11 18 / 0.24)" },
3191
+ children: [
3192
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-normal rh-uppercase rh-text-text-muted", children: "Selecione a hora" }),
3193
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-6 rh-flex rh-items-center rh-justify-between", children: [
3194
+ isManualClockInput ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-2", children: [
3195
+ /* @__PURE__ */ jsxRuntime.jsx(
3196
+ "input",
3197
+ {
3198
+ "aria-label": "Hora",
3199
+ inputMode: "numeric",
3200
+ maxLength: 2,
3201
+ value: pad(pendingHour),
3202
+ onChange: (event) => handleManualClockChange("hour", event.target.value),
3203
+ 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"
3204
+ }
3205
+ ),
3206
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-2xl rh-font-semibold rh-text-text-muted", children: ":" }),
3207
+ /* @__PURE__ */ jsxRuntime.jsx(
3208
+ "input",
3209
+ {
3210
+ "aria-label": "Minuto",
3211
+ inputMode: "numeric",
3212
+ maxLength: 2,
3213
+ value: pad(pendingMinute),
3214
+ onChange: (event) => handleManualClockChange("minute", event.target.value),
3215
+ 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"
3216
+ }
3217
+ )
3218
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-1 rh-text-2xl rh-font-semibold", children: [
3219
+ /* @__PURE__ */ jsxRuntime.jsx(
3220
+ "button",
3221
+ {
3222
+ type: "button",
3223
+ onClick: () => setClockStep("hour"),
3224
+ className: [
3225
+ "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
3226
+ clockStep === "hour" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
3227
+ ].join(" "),
3228
+ children: clockDisplayText.slice(0, 2)
3229
+ }
3230
+ ),
3231
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-text-muted", children: ":" }),
3232
+ /* @__PURE__ */ jsxRuntime.jsx(
3233
+ "button",
3234
+ {
3235
+ type: "button",
3236
+ onClick: () => setClockStep("minute"),
3237
+ className: [
3238
+ "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
3239
+ clockStep === "minute" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
3240
+ ].join(" "),
3241
+ children: clockDisplayText.slice(3, 5)
3242
+ }
3243
+ )
3244
+ ] }),
3195
3245
  /* @__PURE__ */ jsxRuntime.jsx(
3196
- "input",
3246
+ "button",
3197
3247
  {
3198
- "aria-label": "Minuto",
3199
- inputMode: "numeric",
3200
- maxLength: 2,
3201
- value: pad(pendingMinute),
3202
- onChange: (event) => handleManualClockChange("minute", event.target.value),
3203
- 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"
3248
+ type: "button",
3249
+ "aria-label": isManualClockInput ? "Voltar ao rel\xF3gio" : "Digitar hor\xE1rio manualmente",
3250
+ onClick: () => setIsManualClockInput((current) => !current),
3251
+ className: "rh-rounded-full rh-p-2 rh-text-text hover:rh-bg-background",
3252
+ children: /* @__PURE__ */ jsxRuntime.jsx(PencilIcon, {})
3204
3253
  }
3205
3254
  )
3206
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-1 rh-text-3xl rh-font-semibold", children: [
3255
+ ] }),
3256
+ !isManualClockInput && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "rh-relative rh-h-full rh-w-full", children: [
3257
+ clockStep === "hour" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3258
+ CLOCK_HOURS_OUTER.map(
3259
+ (hour, index) => clockHourButton(hour, index, 102)
3260
+ ),
3261
+ CLOCK_HOURS_INNER.map(
3262
+ (hour, index) => clockHourButton(hour, index, 68)
3263
+ )
3264
+ ] }) : CLOCK_MINUTES.map((minute, index) => clockMinuteButton(minute, index)),
3265
+ /* @__PURE__ */ jsxRuntime.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" })
3266
+ ] }) }),
3267
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-8 rh-flex rh-justify-end rh-gap-6", children: [
3207
3268
  /* @__PURE__ */ jsxRuntime.jsx(
3208
3269
  "button",
3209
3270
  {
3210
3271
  type: "button",
3211
- onClick: () => setClockStep("hour"),
3212
- className: [
3213
- "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
3214
- clockStep === "hour" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
3215
- ].join(" "),
3216
- children: clockDisplayText.slice(0, 2)
3272
+ onClick: closeClockDialog,
3273
+ className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
3274
+ children: "Cancelar"
3217
3275
  }
3218
3276
  ),
3219
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-text-muted", children: ":" }),
3220
3277
  /* @__PURE__ */ jsxRuntime.jsx(
3221
3278
  "button",
3222
3279
  {
3223
3280
  type: "button",
3224
- onClick: () => setClockStep("minute"),
3225
- className: [
3226
- "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
3227
- clockStep === "minute" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
3228
- ].join(" "),
3229
- children: clockDisplayText.slice(3, 5)
3281
+ onClick: () => {
3282
+ if (hasPendingValue) commit(pendingHour, pendingMinute);
3283
+ else closeClockDialog();
3284
+ },
3285
+ className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
3286
+ children: "OK"
3230
3287
  }
3231
3288
  )
3232
- ] }),
3233
- /* @__PURE__ */ jsxRuntime.jsx(
3234
- "button",
3235
- {
3236
- type: "button",
3237
- "aria-label": isManualClockInput ? "Voltar ao rel\xF3gio" : "Digitar hor\xE1rio manualmente",
3238
- onClick: () => setIsManualClockInput((current) => !current),
3239
- className: "rh-rounded-full rh-p-2 rh-text-text hover:rh-bg-background",
3240
- children: /* @__PURE__ */ jsxRuntime.jsx(PencilIcon, {})
3241
- }
3242
- )
3243
- ] }),
3244
- !isManualClockInput && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "rh-relative rh-h-full rh-w-full", children: [
3245
- clockStep === "hour" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3246
- CLOCK_HOURS_OUTER.map(
3247
- (hour, index) => clockHourButton(hour, index, 102)
3248
- ),
3249
- CLOCK_HOURS_INNER.map(
3250
- (hour, index) => clockHourButton(hour, index, 68)
3251
- )
3252
- ] }) : CLOCK_MINUTES.map(
3253
- (minute, index) => clockMinuteButton(minute, index)
3254
- ),
3255
- /* @__PURE__ */ jsxRuntime.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" })
3256
- ] }) }),
3257
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-8 rh-flex rh-justify-end rh-gap-6", children: [
3258
- /* @__PURE__ */ jsxRuntime.jsx(
3259
- "button",
3260
- {
3261
- type: "button",
3262
- onClick: closeClockDialog,
3263
- className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
3264
- children: "Cancelar"
3265
- }
3266
- ),
3267
- /* @__PURE__ */ jsxRuntime.jsx(
3268
- "button",
3269
- {
3270
- type: "button",
3271
- onClick: () => {
3272
- if (hasPendingValue) commit(pendingHour, pendingMinute);
3273
- else closeClockDialog();
3274
- },
3275
- className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
3276
- children: "OK"
3277
- }
3278
- )
3279
- ] })
3280
- ]
3281
- }
3282
- )
3283
- }
3289
+ ] })
3290
+ ]
3291
+ }
3292
+ )
3293
+ }
3294
+ ) }),
3295
+ document.body
3284
3296
  ),
3285
3297
  helperText && !isHelperDismissed && /* @__PURE__ */ jsxRuntime.jsxs(
3286
3298
  "span",