tp-react-elements 1.3.2 → 1.3.3

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 (48) hide show
  1. package/dist/_virtual/index.esm12.js +2 -2
  2. package/dist/_virtual/index.esm13.js +2 -2
  3. package/dist/_virtual/index.esm4.js +2 -2
  4. package/dist/_virtual/index.esm5.js +2 -2
  5. package/dist/_virtual/index.esm6.js +2 -2
  6. package/dist/_virtual/index.esm7.js +2 -2
  7. package/dist/components/DateRangePicker/DateRangePicker.d.ts +0 -3
  8. package/dist/components/DateRangePicker/DateRangePicker.esm.js +4 -0
  9. package/dist/components/Form/FormRender.esm.js +4 -0
  10. package/dist/components/FormComponents/Select/SearchableSelect.d.ts +6 -0
  11. package/dist/components/FormComponents/Select/SearchableSelect.esm.js +78 -0
  12. package/dist/components/FormComponents/index.d.ts +1 -0
  13. package/dist/components/FormComponents/index.esm.js +1 -0
  14. package/dist/components/PaginatedGrid/DynamicFilterBar.d.ts +33 -7
  15. package/dist/components/PaginatedGrid/DynamicFilterBar.esm.js +95 -40
  16. package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js +22 -4
  17. package/dist/components/PaginatedGrid/columns.d.ts +19 -0
  18. package/dist/index.d.ts +1 -0
  19. package/dist/index.esm.css +1 -1
  20. package/dist/index.esm.js +1 -0
  21. package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js +1 -1
  22. package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js +1 -1
  23. package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js +1 -1
  24. package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js +1 -1
  25. package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js +1 -1
  26. package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js +1 -1
  27. package/dist/utils/Interface/FormInterface.d.ts +1 -1
  28. package/dist/utils/rdrStyles.d.ts +12 -0
  29. package/dist/utils/rdrStyles.esm.js +180 -0
  30. package/package.json +5 -1
  31. package/dist/node_modules/@tanstack/query-core/build/modern/environmentManager.esm.js +0 -22
  32. package/dist/node_modules/@tanstack/query-core/build/modern/focusManager.esm.js +0 -65
  33. package/dist/node_modules/@tanstack/query-core/build/modern/notifyManager.esm.js +0 -83
  34. package/dist/node_modules/@tanstack/query-core/build/modern/onlineManager.esm.js +0 -55
  35. package/dist/node_modules/@tanstack/query-core/build/modern/query.esm.js +0 -16
  36. package/dist/node_modules/@tanstack/query-core/build/modern/queryObserver.esm.js +0 -463
  37. package/dist/node_modules/@tanstack/query-core/build/modern/retryer.esm.js +0 -8
  38. package/dist/node_modules/@tanstack/query-core/build/modern/subscribable.esm.js +0 -24
  39. package/dist/node_modules/@tanstack/query-core/build/modern/thenable.esm.js +0 -34
  40. package/dist/node_modules/@tanstack/query-core/build/modern/timeoutManager.esm.js +0 -66
  41. package/dist/node_modules/@tanstack/query-core/build/modern/utils.esm.js +0 -115
  42. package/dist/node_modules/@tanstack/react-query/build/modern/IsRestoringProvider.esm.js +0 -7
  43. package/dist/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.esm.js +0 -15
  44. package/dist/node_modules/@tanstack/react-query/build/modern/QueryErrorResetBoundary.esm.js +0 -21
  45. package/dist/node_modules/@tanstack/react-query/build/modern/errorBoundaryUtils.esm.js +0 -27
  46. package/dist/node_modules/@tanstack/react-query/build/modern/suspense.esm.js +0 -22
  47. package/dist/node_modules/@tanstack/react-query/build/modern/useBaseQuery.esm.js +0 -94
  48. package/dist/node_modules/@tanstack/react-query/build/modern/useQuery.esm.js +0 -8
@@ -1,4 +1,4 @@
1
- import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
1
+ import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
2
2
  import React__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireCalendar } from '../Calendar/index.esm.js';
@@ -1,4 +1,4 @@
1
- import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
1
+ import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
2
2
  import React__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireDateRange } from '../DateRange/index.esm.js';
@@ -1,4 +1,4 @@
1
- import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
1
+ import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
2
2
  import React__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireStyles } from '../../styles.esm.js';
@@ -1,4 +1,4 @@
1
- import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
1
+ import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
2
2
  import React__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireDayCell } from '../DayCell/index.esm.js';
@@ -11,7 +11,7 @@ export interface TextFieldInputProps {
11
11
  export interface FormSectionPropsItem {
12
12
  name: string;
13
13
  label: string;
14
- inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
14
+ inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'searchable-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
15
15
  options?: OptionsProps[];
16
16
  required?: boolean;
17
17
  errorMessage?: string;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Call this hook at the top of any component that renders a `<DateRange />` calendar
3
+ * from `react-date-range`. The styles are injected once into `document.head` and
4
+ * never removed (the injection is idempotent — safe to call from multiple components).
5
+ *
6
+ * @example
7
+ * const MyCalendarChip = () => {
8
+ * useRdrStyles();
9
+ * return <DateRange ... />;
10
+ * };
11
+ */
12
+ export declare function useRdrStyles(): void;
@@ -0,0 +1,180 @@
1
+ import { useEffect } from 'react';
2
+
3
+ /**
4
+ * react-date-range CSS injected as a JavaScript string — NOT as a CSS import.
5
+ *
6
+ * WHY THIS FILE EXISTS
7
+ * --------------------
8
+ * Importing `react-date-range/dist/styles.css` and `theme/default.css` directly
9
+ * in the component source causes rollup-plugin-postcss (extract: true) to bundle
10
+ * those rules into the library's extracted `dist/index.css`. When a consumer
11
+ * app imports that CSS file they get the react-date-range rules applied globally,
12
+ * which can interfere with the consumer's own MUI dropdowns and date-pickers.
13
+ *
14
+ * Instead we ship the CSS as a JavaScript string and inject a single <style> tag
15
+ * the first time any DateRange calendar is rendered. This means:
16
+ * • The CSS is NOT in the extracted CSS bundle.
17
+ * • The CSS IS present at runtime (injected when the component mounts).
18
+ * • The CSS only affects elements with react-date-range's own `.rdr*` class names,
19
+ * so it cannot conflict with MUI or any other library.
20
+ *
21
+ * USAGE
22
+ * -----
23
+ * Call `useRdrStyles()` at the top of any component that renders <DateRange />.
24
+ * The injection is idempotent — subsequent calls are no-ops.
25
+ */
26
+ const STYLE_ID = 'tp-rdr-styles';
27
+ /* ─── Combined CSS from react-date-range ──────────────────────────────────── */
28
+ /* Source: react-date-range/dist/styles.css + theme/default.css v2.0.1 */
29
+ const RDR_CSS = `
30
+ /* ── react-date-range/dist/styles.css ── */
31
+ .rdrCalendarWrapper{box-sizing:border-box;background:#ffffff;display:inline-flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}
32
+ .rdrDateDisplay{display:flex;justify-content:space-between}
33
+ .rdrDateDisplayItem{flex:1 1;width:0;text-align:center;color:inherit}
34
+ .rdrDateDisplayItem+.rdrDateDisplayItem{margin-left:.833em}
35
+ .rdrDateDisplayItem input{text-align:inherit}
36
+ .rdrDateDisplayItem input:disabled{cursor:default}
37
+ .rdrDateDisplayItemActive{}
38
+ .rdrMonthAndYearWrapper{box-sizing:inherit;display:flex;justify-content:space-between}
39
+ .rdrMonthAndYearPickers{flex:1 1 auto;display:flex;justify-content:center;align-items:center}
40
+ .rdrMonthPicker{}
41
+ .rdrYearPicker{}
42
+ .rdrNextPrevButton{box-sizing:inherit;cursor:pointer;outline:none}
43
+ .rdrPprevButton{}
44
+ .rdrNextButton{}
45
+ .rdrMonths{display:flex}
46
+ .rdrMonthsVertical{flex-direction:column}
47
+ .rdrMonthsHorizontal>div>div>div{display:flex;flex-direction:row}
48
+ .rdrMonth{width:27.667em}
49
+ .rdrWeekDays{display:flex}
50
+ .rdrWeekDay{flex-basis:calc(100% / 7);box-sizing:inherit;text-align:center}
51
+ .rdrDays{display:flex;flex-wrap:wrap}
52
+ .rdrDateDisplayWrapper{}
53
+ .rdrMonthName{}
54
+ .rdrInfiniteMonths{overflow:auto}
55
+ .rdrDateRangeWrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}
56
+ .rdrDateInput{position:relative}
57
+ .rdrDateInput input{outline:none}
58
+ .rdrDateInput .rdrWarning{position:absolute;font-size:1.6em;line-height:1.6em;top:0;right:.25em;color:#FF0000}
59
+ .rdrDay{box-sizing:inherit;width:calc(100% / 7);position:relative;font:inherit;cursor:pointer}
60
+ .rdrDayNumber{display:block;position:relative}
61
+ .rdrDayNumber span{color:#1d2429}
62
+ .rdrDayDisabled{cursor:not-allowed}
63
+ @supports (-ms-ime-align:auto){.rdrDay{flex-basis:14.285% !important}}
64
+ .rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge{pointer-events:none}
65
+ .rdrInRange{}
66
+ .rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{pointer-events:none}
67
+ .rdrDayHovered{}
68
+ .rdrDayActive{}
69
+ .rdrDateRangePickerWrapper{display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}
70
+ .rdrDefinedRangesWrapper{}
71
+ .rdrStaticRanges{display:flex;flex-direction:column}
72
+ .rdrStaticRange{font-size:inherit}
73
+ .rdrStaticRangeLabel{}
74
+ .rdrInputRanges{}
75
+ .rdrInputRange{display:flex}
76
+ .rdrInputRangeInput{}
77
+
78
+ /* ── react-date-range/dist/theme/default.css ── */
79
+ .rdrCalendarWrapper{color:#000000;font-size:12px}
80
+ .rdrDateDisplayWrapper{background-color:rgb(239,242,247)}
81
+ .rdrDateDisplay{margin:.833em}
82
+ .rdrDateDisplayItem{border-radius:4px;background-color:rgb(255,255,255);box-shadow:0 1px 2px 0 rgba(35,57,66,.21);border:1px solid transparent}
83
+ .rdrDateDisplayItem input{cursor:pointer;height:2.5em;line-height:2.5em;border:0;background:transparent;width:100%;color:#849095}
84
+ .rdrDateDisplayItemActive{border-color:currentColor}
85
+ .rdrDateDisplayItemActive input{color:#7d888d}
86
+ .rdrMonthAndYearWrapper{align-items:center;height:60px;padding-top:10px}
87
+ .rdrMonthAndYearPickers{font-weight:600}
88
+ .rdrMonthAndYearPickers select{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:10px 30px 10px 10px;border-radius:4px;outline:0;color:#3e484f;background:url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;background-position:right 8px center;cursor:pointer;text-align:center}
89
+ .rdrMonthAndYearPickers select:hover{background-color:rgba(0,0,0,.07)}
90
+ .rdrMonthPicker,.rdrYearPicker{margin:0 5px}
91
+ .rdrNextPrevButton{display:block;width:24px;height:24px;margin:0 .833em;padding:0;border:0;border-radius:5px;background:#EFF2F7}
92
+ .rdrNextPrevButton:hover{background:#E1E7F0}
93
+ .rdrNextPrevButton i{display:block;width:0;height:0;padding:0;text-align:center;border-style:solid;margin:auto;transform:translate(-3px,0)}
94
+ .rdrPprevButton i{border-width:4px 6px 4px 4px;border-color:transparent rgb(52,73,94) transparent transparent;transform:translate(-3px,0)}
95
+ .rdrNextButton i{margin:0 0 0 7px;border-width:4px 4px 4px 6px;border-color:transparent transparent transparent rgb(52,73,94);transform:translate(3px,0)}
96
+ .rdrWeekDays{padding:0 .833em}
97
+ .rdrMonth{padding:0 .833em 1.666em .833em}
98
+ .rdrMonth .rdrWeekDays{padding:0}
99
+ .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{display:none}
100
+ .rdrWeekDay{font-weight:400;line-height:2.667em;color:rgb(132,144,149)}
101
+ .rdrDay{background:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:0;padding:0;line-height:3em;height:3em;text-align:center;color:#1d2429}
102
+ .rdrDay:focus{outline:0}
103
+ .rdrDayNumber{outline:0;font-weight:300;position:absolute;left:0;right:0;top:5px;bottom:5px;display:flex;align-items:center;justify-content:center}
104
+ .rdrDayToday .rdrDayNumber span{font-weight:500}
105
+ .rdrDayToday .rdrDayNumber span:after{content:'';position:absolute;bottom:4px;left:50%;transform:translate(-50%,0);width:18px;height:2px;border-radius:2px;background:#3d91ff}
106
+ .rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after{background:#fff}
107
+ .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:rgba(255,255,255,.85)}
108
+ .rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge{background:currentColor;position:absolute;top:5px;left:0;right:0;bottom:5px}
109
+ .rdrSelected{left:2px;right:2px}
110
+ .rdrInRange{}
111
+ .rdrStartEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}
112
+ .rdrEndEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}
113
+ .rdrSelected{border-radius:1.042em}
114
+ .rdrDayStartOfMonth .rdrInRange,.rdrDayStartOfMonth .rdrEndEdge,.rdrDayStartOfWeek .rdrInRange,.rdrDayStartOfWeek .rdrEndEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}
115
+ .rdrDayEndOfMonth .rdrInRange,.rdrDayEndOfMonth .rdrStartEdge,.rdrDayEndOfWeek .rdrInRange,.rdrDayEndOfWeek .rdrStartEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}
116
+ .rdrDayStartOfMonth .rdrDayInPreview,.rdrDayStartOfMonth .rdrDayEndPreview,.rdrDayStartOfWeek .rdrDayInPreview,.rdrDayStartOfWeek .rdrDayEndPreview{border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;border-left-width:1px;left:0}
117
+ .rdrDayEndOfMonth .rdrDayInPreview,.rdrDayEndOfMonth .rdrDayStartPreview,.rdrDayEndOfWeek .rdrDayInPreview,.rdrDayEndOfWeek .rdrDayStartPreview{border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;border-right-width:1px;right:0}
118
+ .rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{background:rgba(255,255,255,.09);position:absolute;top:3px;left:0;right:0;bottom:3px;pointer-events:none;border:0 solid currentColor;z-index:1}
119
+ .rdrDayStartPreview{border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;left:0}
120
+ .rdrDayInPreview{border-top-width:1px;border-bottom-width:1px}
121
+ .rdrDayEndPreview{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;right:0}
122
+ .rdrDefinedRangesWrapper{font-size:12px;width:226px;border-right:solid 1px #eff2f7;background:#fff}
123
+ .rdrDefinedRangesWrapper .rdrStaticRangeSelected{color:currentColor;font-weight:600}
124
+ .rdrStaticRange{border:0;cursor:pointer;display:block;outline:0;border-bottom:1px solid #eff2f7;padding:0;background:#fff}
125
+ .rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{background:#eff2f7}
126
+ .rdrStaticRangeLabel{display:block;outline:0;line-height:18px;padding:10px 20px;text-align:left}
127
+ .rdrInputRanges{padding:10px 0}
128
+ .rdrInputRange{align-items:center;padding:5px 20px}
129
+ .rdrInputRangeInput{width:30px;height:30px;line-height:30px;border-radius:4px;text-align:center;border:solid 1px rgb(222,231,235);margin-right:10px;color:rgb(108,118,122)}
130
+ .rdrInputRangeInput:focus,.rdrInputRangeInput:hover{border-color:rgb(180,191,196);outline:0;color:#333}
131
+ .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{content:'';border:1px solid currentColor;border-radius:1.333em;position:absolute;top:-2px;bottom:-2px;left:0;right:0;background:transparent}
132
+ .rdrDayPassive{pointer-events:none}
133
+ .rdrDayPassive .rdrDayNumber span{color:#d5dce0}
134
+ .rdrDayPassive .rdrInRange,.rdrDayPassive .rdrStartEdge,.rdrDayPassive .rdrEndEdge,.rdrDayPassive .rdrSelected,.rdrDayPassive .rdrDayStartPreview,.rdrDayPassive .rdrDayInPreview,.rdrDayPassive .rdrDayEndPreview{display:none}
135
+ .rdrDayDisabled{background-color:rgb(248,248,248)}
136
+ .rdrDayDisabled .rdrDayNumber span{color:#aeb9bf}
137
+ .rdrDayDisabled .rdrInRange,.rdrDayDisabled .rdrStartEdge,.rdrDayDisabled .rdrEndEdge,.rdrDayDisabled .rdrSelected,.rdrDayDisabled .rdrDayStartPreview,.rdrDayDisabled .rdrDayInPreview,.rdrDayDisabled .rdrDayEndPreview{filter:grayscale(100%) opacity(60%)}
138
+ .rdrMonthName{text-align:left;font-weight:600;color:#849095;padding:.833em}
139
+
140
+ /* ── DateRangePicker.scss override (compiled) ── */
141
+ .rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,
142
+ .rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,
143
+ .rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,
144
+ .rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:#fff !important}
145
+ `;
146
+ /* ─── Singleton injection ─────────────────────────────────────────────────── */
147
+ let _injected = false;
148
+ function injectRdrStyles() {
149
+ if (_injected)
150
+ return;
151
+ if (typeof document === 'undefined')
152
+ return;
153
+ if (document.getElementById(STYLE_ID)) {
154
+ _injected = true;
155
+ return;
156
+ }
157
+ const style = document.createElement('style');
158
+ style.id = STYLE_ID;
159
+ style.textContent = RDR_CSS;
160
+ document.head.appendChild(style);
161
+ _injected = true;
162
+ }
163
+ /**
164
+ * Call this hook at the top of any component that renders a `<DateRange />` calendar
165
+ * from `react-date-range`. The styles are injected once into `document.head` and
166
+ * never removed (the injection is idempotent — safe to call from multiple components).
167
+ *
168
+ * @example
169
+ * const MyCalendarChip = () => {
170
+ * useRdrStyles();
171
+ * return <DateRange ... />;
172
+ * };
173
+ */
174
+ function useRdrStyles() {
175
+ useEffect(() => {
176
+ injectRdrStyles();
177
+ }, []);
178
+ }
179
+
180
+ export { useRdrStyles };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tp-react-elements",
3
- "version": "1.3.2",
3
+ "version": "1.3.3",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "React form components library built with React Hook Form and Yup",
@@ -81,6 +81,7 @@
81
81
  "prepublishOnly": "npm run build:lib"
82
82
  },
83
83
  "peerDependencies": {
84
+ "@tanstack/react-query": ">=5.0.0 <6.0.0",
84
85
  "@emotion/react": ">=11.14.0 <13.0.0",
85
86
  "@emotion/styled": ">=11.14.1 <13.0.0",
86
87
  "@hookform/error-message": ">=2.0.1 <3.0.0",
@@ -102,6 +103,9 @@
102
103
  "yup": ">=1.7.0 <2.0.0"
103
104
  },
104
105
  "peerDependenciesMeta": {
106
+ "@tanstack/react-query": {
107
+ "optional": true
108
+ },
105
109
  "react-idle-timer": {
106
110
  "optional": true
107
111
  },
@@ -1,22 +0,0 @@
1
- import { isServer } from './utils.esm.js';
2
-
3
- // src/environmentManager.ts
4
- var environmentManager = /* @__PURE__ */ (() => {
5
- let isServerFn = () => isServer;
6
- return {
7
- /**
8
- * Returns whether the current runtime should be treated as a server environment.
9
- */
10
- isServer() {
11
- return isServerFn();
12
- },
13
- /**
14
- * Overrides the server check globally.
15
- */
16
- setIsServer(isServerValue) {
17
- isServerFn = isServerValue;
18
- }
19
- };
20
- })();
21
-
22
- export { environmentManager };
@@ -1,65 +0,0 @@
1
- import { Subscribable } from './subscribable.esm.js';
2
-
3
- // src/focusManager.ts
4
- var FocusManager = class extends Subscribable {
5
- #focused;
6
- #cleanup;
7
- #setup;
8
- constructor() {
9
- super();
10
- this.#setup = (onFocus) => {
11
- if (typeof window !== "undefined" && window.addEventListener) {
12
- const listener = () => onFocus();
13
- window.addEventListener("visibilitychange", listener, false);
14
- return () => {
15
- window.removeEventListener("visibilitychange", listener);
16
- };
17
- }
18
- return;
19
- };
20
- }
21
- onSubscribe() {
22
- if (!this.#cleanup) {
23
- this.setEventListener(this.#setup);
24
- }
25
- }
26
- onUnsubscribe() {
27
- if (!this.hasListeners()) {
28
- this.#cleanup?.();
29
- this.#cleanup = void 0;
30
- }
31
- }
32
- setEventListener(setup) {
33
- this.#setup = setup;
34
- this.#cleanup?.();
35
- this.#cleanup = setup((focused) => {
36
- if (typeof focused === "boolean") {
37
- this.setFocused(focused);
38
- } else {
39
- this.onFocus();
40
- }
41
- });
42
- }
43
- setFocused(focused) {
44
- const changed = this.#focused !== focused;
45
- if (changed) {
46
- this.#focused = focused;
47
- this.onFocus();
48
- }
49
- }
50
- onFocus() {
51
- const isFocused = this.isFocused();
52
- this.listeners.forEach((listener) => {
53
- listener(isFocused);
54
- });
55
- }
56
- isFocused() {
57
- if (typeof this.#focused === "boolean") {
58
- return this.#focused;
59
- }
60
- return globalThis.document?.visibilityState !== "hidden";
61
- }
62
- };
63
- var focusManager = new FocusManager();
64
-
65
- export { FocusManager, focusManager };
@@ -1,83 +0,0 @@
1
- import { systemSetTimeoutZero } from './timeoutManager.esm.js';
2
-
3
- // src/notifyManager.ts
4
- var defaultScheduler = systemSetTimeoutZero;
5
- function createNotifyManager() {
6
- let queue = [];
7
- let transactions = 0;
8
- let notifyFn = (callback) => {
9
- callback();
10
- };
11
- let batchNotifyFn = (callback) => {
12
- callback();
13
- };
14
- let scheduleFn = defaultScheduler;
15
- const schedule = (callback) => {
16
- if (transactions) {
17
- queue.push(callback);
18
- } else {
19
- scheduleFn(() => {
20
- notifyFn(callback);
21
- });
22
- }
23
- };
24
- const flush = () => {
25
- const originalQueue = queue;
26
- queue = [];
27
- if (originalQueue.length) {
28
- scheduleFn(() => {
29
- batchNotifyFn(() => {
30
- originalQueue.forEach((callback) => {
31
- notifyFn(callback);
32
- });
33
- });
34
- });
35
- }
36
- };
37
- return {
38
- batch: (callback) => {
39
- let result;
40
- transactions++;
41
- try {
42
- result = callback();
43
- } finally {
44
- transactions--;
45
- if (!transactions) {
46
- flush();
47
- }
48
- }
49
- return result;
50
- },
51
- /**
52
- * All calls to the wrapped function will be batched.
53
- */
54
- batchCalls: (callback) => {
55
- return (...args) => {
56
- schedule(() => {
57
- callback(...args);
58
- });
59
- };
60
- },
61
- schedule,
62
- /**
63
- * Use this method to set a custom notify function.
64
- * This can be used to for example wrap notifications with `React.act` while running tests.
65
- */
66
- setNotifyFunction: (fn) => {
67
- notifyFn = fn;
68
- },
69
- /**
70
- * Use this method to set a custom function to batch notifications together into a single tick.
71
- * By default React Query will use the batch function provided by ReactDOM or React Native.
72
- */
73
- setBatchNotifyFunction: (fn) => {
74
- batchNotifyFn = fn;
75
- },
76
- setScheduler: (fn) => {
77
- scheduleFn = fn;
78
- }
79
- };
80
- }
81
- var notifyManager = createNotifyManager();
82
-
83
- export { createNotifyManager, defaultScheduler, notifyManager };
@@ -1,55 +0,0 @@
1
- import { Subscribable } from './subscribable.esm.js';
2
-
3
- // src/onlineManager.ts
4
- var OnlineManager = class extends Subscribable {
5
- #online = true;
6
- #cleanup;
7
- #setup;
8
- constructor() {
9
- super();
10
- this.#setup = (onOnline) => {
11
- if (typeof window !== "undefined" && window.addEventListener) {
12
- const onlineListener = () => onOnline(true);
13
- const offlineListener = () => onOnline(false);
14
- window.addEventListener("online", onlineListener, false);
15
- window.addEventListener("offline", offlineListener, false);
16
- return () => {
17
- window.removeEventListener("online", onlineListener);
18
- window.removeEventListener("offline", offlineListener);
19
- };
20
- }
21
- return;
22
- };
23
- }
24
- onSubscribe() {
25
- if (!this.#cleanup) {
26
- this.setEventListener(this.#setup);
27
- }
28
- }
29
- onUnsubscribe() {
30
- if (!this.hasListeners()) {
31
- this.#cleanup?.();
32
- this.#cleanup = void 0;
33
- }
34
- }
35
- setEventListener(setup) {
36
- this.#setup = setup;
37
- this.#cleanup?.();
38
- this.#cleanup = setup(this.setOnline.bind(this));
39
- }
40
- setOnline(online) {
41
- const changed = this.#online !== online;
42
- if (changed) {
43
- this.#online = online;
44
- this.listeners.forEach((listener) => {
45
- listener(online);
46
- });
47
- }
48
- }
49
- isOnline() {
50
- return this.#online;
51
- }
52
- };
53
- var onlineManager = new OnlineManager();
54
-
55
- export { OnlineManager, onlineManager };
@@ -1,16 +0,0 @@
1
- import { canFetch } from './retryer.esm.js';
2
-
3
- // src/query.ts
4
- function fetchState(data, options) {
5
- return {
6
- fetchFailureCount: 0,
7
- fetchFailureReason: null,
8
- fetchStatus: canFetch(options.networkMode) ? "fetching" : "paused",
9
- ...data === void 0 && {
10
- error: null,
11
- status: "pending"
12
- }
13
- };
14
- }
15
-
16
- export { fetchState };