@lets-events/react 12.9.0 → 12.9.1

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.
Files changed (6) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.js +52 -33
  4. package/dist/index.mjs +52 -33
  5. package/package.json +1 -1
  6. package/src/components/FormFields/DateAndTimeFormField.tsx +22 -9
package/.turbo/turbo-build.log CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
 
3
- > @lets-events/react@12.9.0 build
3
+ > @lets-events/react@12.9.1 build
4
4
  > tsup src/index.tsx --format esm,cjs --dts --external react
5
5
 
6
6
  CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
10
10
  CLI Target: es6
11
11
  ESM Build start
12
12
  CJS Build start
13
- CJS dist/index.js 414.81 KB
14
- CJS ⚡️ Build success in 532ms
15
- ESM dist/index.mjs 399.34 KB
16
- ESM ⚡️ Build success in 533ms
13
+ ESM dist/index.mjs 399.64 KB
14
+ ESM ⚡️ Build success in 505ms
15
+ CJS dist/index.js 415.12 KB
16
+ CJS ⚡️ Build success in 506ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 9136ms
18
+ DTS ⚡️ Build success in 9204ms
19
19
  DTS dist/index.d.mts 404.35 KB
20
20
  DTS dist/index.d.ts 404.35 KB
21
21
  ⠙
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @lets-events/react
2
2
 
3
+ ## 12.9.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Disabled click area
8
+
3
9
  ## 12.9.0
4
10
 
5
11
  ### Minor Changes
package/dist/index.js CHANGED
@@ -13418,6 +13418,7 @@ var DateAndTimeFormField = (_a) => {
13418
13418
  event.stopPropagation();
13419
13419
  addToast({
13420
13420
  type: "error",
13421
+ icon: "xmark-circle",
13421
13422
  message: disabledInfo
13422
13423
  });
13423
13424
  },
@@ -13431,10 +13432,6 @@ var DateAndTimeFormField = (_a) => {
13431
13432
  },
13432
13433
  [disabled]
13433
13434
  );
13434
- const disabledInteractionProps = disabled ? {
13435
- onClickCapture: handleDisabledClick,
13436
- onMouseDownCapture: handleDisabledMouseDown
13437
- } : void 0;
13438
13435
  const handleValidate = (0, import_react28.useCallback)(
13439
13436
  (value) => {
13440
13437
  var _a2;
@@ -13510,35 +13507,57 @@ var DateAndTimeFormField = (_a) => {
13510
13507
  haveError
13511
13508
  }
13512
13509
  ),
13513
- /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { gap: 12, align: "start", children: [
13514
- /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
13515
- Calendar,
13516
- __spreadValues({
13517
- selected: draftDate,
13518
- setSelected: (date) => {
13519
- const d = typeof date === "function" ? date(draftDate) : date;
13520
- handleDateChange(d);
13521
- },
13522
- hasError: haveError,
13523
- allowPastDates,
13524
- maxYearsFromNow,
13525
- maxDate,
13526
- disabled
13527
- }, props)
13528
- ) })),
13529
- /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
13530
- TimePicker,
13531
- __spreadValues({
13532
- selected: draftTime,
13533
- setSelected: (value) => {
13534
- const time = typeof value === "function" ? value(draftTime) : value;
13535
- handleTimeChange(time);
13536
- },
13537
- disabled,
13538
- hasError: haveError
13539
- }, props)
13540
- ) }))
13541
- ] }),
13510
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
13511
+ Flex,
13512
+ {
13513
+ gap: 12,
13514
+ align: "start",
13515
+ style: disabled ? { position: "relative" } : void 0,
13516
+ children: [
13517
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
13518
+ Calendar,
13519
+ __spreadValues({
13520
+ selected: draftDate,
13521
+ setSelected: (date) => {
13522
+ const d = typeof date === "function" ? date(draftDate) : date;
13523
+ handleDateChange(d);
13524
+ },
13525
+ hasError: haveError,
13526
+ allowPastDates,
13527
+ maxYearsFromNow,
13528
+ maxDate,
13529
+ disabled
13530
+ }, props)
13531
+ ) }),
13532
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
13533
+ TimePicker,
13534
+ __spreadValues({
13535
+ selected: draftTime,
13536
+ setSelected: (value) => {
13537
+ const time = typeof value === "function" ? value(draftTime) : value;
13538
+ handleTimeChange(time);
13539
+ },
13540
+ disabled,
13541
+ hasError: haveError
13542
+ }, props)
13543
+ ) }),
13544
+ disabled && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
13545
+ "div",
13546
+ {
13547
+ "aria-hidden": true,
13548
+ style: {
13549
+ position: "absolute",
13550
+ inset: 0,
13551
+ zIndex: 1,
13552
+ cursor: "not-allowed"
13553
+ },
13554
+ onClick: handleDisabledClick,
13555
+ onMouseDown: handleDisabledMouseDown
13556
+ }
13557
+ )
13558
+ ]
13559
+ }
13560
+ ),
13542
13561
  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorFormMessage, { message: errorMsg })
13543
13562
  ] });
13544
13563
  };
package/dist/index.mjs CHANGED
@@ -13311,6 +13311,7 @@ var DateAndTimeFormField = (_a) => {
13311
13311
  event.stopPropagation();
13312
13312
  addToast({
13313
13313
  type: "error",
13314
+ icon: "xmark-circle",
13314
13315
  message: disabledInfo
13315
13316
  });
13316
13317
  },
@@ -13324,10 +13325,6 @@ var DateAndTimeFormField = (_a) => {
13324
13325
  },
13325
13326
  [disabled]
13326
13327
  );
13327
- const disabledInteractionProps = disabled ? {
13328
- onClickCapture: handleDisabledClick,
13329
- onMouseDownCapture: handleDisabledMouseDown
13330
- } : void 0;
13331
13328
  const handleValidate = useCallback8(
13332
13329
  (value) => {
13333
13330
  var _a2;
@@ -13403,35 +13400,57 @@ var DateAndTimeFormField = (_a) => {
13403
13400
  haveError
13404
13401
  }
13405
13402
  ),
13406
- /* @__PURE__ */ jsxs33(Flex, { gap: 12, align: "start", children: [
13407
- /* @__PURE__ */ jsx59(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ jsx59(
13408
- Calendar,
13409
- __spreadValues({
13410
- selected: draftDate,
13411
- setSelected: (date) => {
13412
- const d = typeof date === "function" ? date(draftDate) : date;
13413
- handleDateChange(d);
13414
- },
13415
- hasError: haveError,
13416
- allowPastDates,
13417
- maxYearsFromNow,
13418
- maxDate,
13419
- disabled
13420
- }, props)
13421
- ) })),
13422
- /* @__PURE__ */ jsx59(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ jsx59(
13423
- TimePicker,
13424
- __spreadValues({
13425
- selected: draftTime,
13426
- setSelected: (value) => {
13427
- const time = typeof value === "function" ? value(draftTime) : value;
13428
- handleTimeChange(time);
13429
- },
13430
- disabled,
13431
- hasError: haveError
13432
- }, props)
13433
- ) }))
13434
- ] }),
13403
+ /* @__PURE__ */ jsxs33(
13404
+ Flex,
13405
+ {
13406
+ gap: 12,
13407
+ align: "start",
13408
+ style: disabled ? { position: "relative" } : void 0,
13409
+ children: [
13410
+ /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
13411
+ Calendar,
13412
+ __spreadValues({
13413
+ selected: draftDate,
13414
+ setSelected: (date) => {
13415
+ const d = typeof date === "function" ? date(draftDate) : date;
13416
+ handleDateChange(d);
13417
+ },
13418
+ hasError: haveError,
13419
+ allowPastDates,
13420
+ maxYearsFromNow,
13421
+ maxDate,
13422
+ disabled
13423
+ }, props)
13424
+ ) }),
13425
+ /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
13426
+ TimePicker,
13427
+ __spreadValues({
13428
+ selected: draftTime,
13429
+ setSelected: (value) => {
13430
+ const time = typeof value === "function" ? value(draftTime) : value;
13431
+ handleTimeChange(time);
13432
+ },
13433
+ disabled,
13434
+ hasError: haveError
13435
+ }, props)
13436
+ ) }),
13437
+ disabled && /* @__PURE__ */ jsx59(
13438
+ "div",
13439
+ {
13440
+ "aria-hidden": true,
13441
+ style: {
13442
+ position: "absolute",
13443
+ inset: 0,
13444
+ zIndex: 1,
13445
+ cursor: "not-allowed"
13446
+ },
13447
+ onClick: handleDisabledClick,
13448
+ onMouseDown: handleDisabledMouseDown
13449
+ }
13450
+ )
13451
+ ]
13452
+ }
13453
+ ),
13435
13454
  /* @__PURE__ */ jsx59(ErrorFormMessage, { message: errorMsg })
13436
13455
  ] });
13437
13456
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lets-events/react",
3
- "version": "12.9.0",
3
+ "version": "12.9.1",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/components/FormFields/DateAndTimeFormField.tsx CHANGED
@@ -53,6 +53,7 @@ export const DateAndTimeFormField = ({
53
53
  event.stopPropagation();
54
54
  addToast({
55
55
  type: "error",
56
+ icon: "xmark-circle",
56
57
  message: disabledInfo,
57
58
  });
58
59
  },
@@ -68,12 +69,6 @@ export const DateAndTimeFormField = ({
68
69
  [disabled]
69
70
  );
70
71
 
71
- const disabledInteractionProps = disabled
72
- ? {
73
- onClickCapture: handleDisabledClick,
74
- onMouseDownCapture: handleDisabledMouseDown,
75
- }
76
- : undefined;
77
72
  const handleValidate = useCallback(
78
73
  (value?: string) => {
79
74
  if (value === undefined || value === null || value === "") {
@@ -165,8 +160,12 @@ export const DateAndTimeFormField = ({
165
160
  />
166
161
  )}
167
162
 
168
- <Flex gap={12} align="start">
169
- <Flex direction="column" {...(disabledInteractionProps ?? {})}>
163
+ <Flex
164
+ gap={12}
165
+ align="start"
166
+ style={disabled ? { position: "relative" } : undefined}
167
+ >
168
+ <Flex direction="column">
170
169
  <Calendar
171
170
  selected={draftDate}
172
171
  setSelected={(date) => {
@@ -182,7 +181,7 @@ export const DateAndTimeFormField = ({
182
181
  />
183
182
  </Flex>
184
183
 
185
- <Flex direction="column" {...(disabledInteractionProps ?? {})}>
184
+ <Flex direction="column">
186
185
  <TimePicker
187
186
  selected={draftTime}
188
187
  setSelected={(value) => {
@@ -194,6 +193,20 @@ export const DateAndTimeFormField = ({
194
193
  {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
195
194
  />
196
195
  </Flex>
196
+
197
+ {disabled && (
198
+ <div
199
+ aria-hidden
200
+ style={{
201
+ position: "absolute",
202
+ inset: 0,
203
+ zIndex: 1,
204
+ cursor: "not-allowed",
205
+ }}
206
+ onClick={handleDisabledClick}
207
+ onMouseDown={handleDisabledMouseDown}
208
+ />
209
+ )}
197
210
  </Flex>
198
211
 
199
212
  <ErrorFormMessage message={errorMsg} />