@companix/uikit 0.0.42 → 0.0.43
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/OptionItem/Option.scss +4 -1
- package/dist/Select/Select.scss +18 -0
- package/dist/Select/SelectOptions.d.ts +6 -0
- package/dist/Select/index.d.ts +4 -0
- package/dist/bundle.es10.js +39 -38
- package/dist/bundle.es12.js +43 -38
- package/dist/bundle.es48.js +44 -19
- package/dist/bundle.es50.js +1 -1
- package/dist/bundle.es54.js +2 -2
- package/dist/bundle.es62.js +13 -74
- package/dist/bundle.es63.js +71 -45
- package/dist/bundle.es64.js +48 -13
- package/package.json +1 -1
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
@include mixins.use-styles(option);
|
|
15
15
|
|
|
16
16
|
&-icon {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
|
|
17
20
|
@include mixins.use-styles(option, icon);
|
|
18
21
|
|
|
19
22
|
svg {
|
|
@@ -23,10 +26,10 @@
|
|
|
23
26
|
|
|
24
27
|
&-content {
|
|
25
28
|
display: flex;
|
|
26
|
-
flex-direction: column;
|
|
27
29
|
flex-grow: 1;
|
|
28
30
|
min-width: 0;
|
|
29
31
|
max-width: 100%;
|
|
32
|
+
gap: 8px;
|
|
30
33
|
|
|
31
34
|
&-inner {
|
|
32
35
|
@include mixins.use-styles(option, content, layout);
|
package/dist/Select/Select.scss
CHANGED
|
@@ -36,6 +36,24 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
&-add-option {
|
|
40
|
+
color: #2d81e0;
|
|
41
|
+
|
|
42
|
+
&:not([data-disabled]):hover {
|
|
43
|
+
background-color: #2d80e02b !important;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:not([data-disabled]):active {
|
|
47
|
+
background-color: #2d80e042 !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
svg {
|
|
51
|
+
width: 18px;
|
|
52
|
+
min-width: 18px;
|
|
53
|
+
height: 18px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
39
57
|
&-element {
|
|
40
58
|
height: 100%;
|
|
41
59
|
display: flex;
|
|
@@ -7,6 +7,12 @@ interface SelectPopoverProps<T> {
|
|
|
7
7
|
active?: T | null;
|
|
8
8
|
onSelect?: (value: T) => void;
|
|
9
9
|
onOpened?: () => void;
|
|
10
|
+
close: () => void;
|
|
11
|
+
addOption?: {
|
|
12
|
+
text: string;
|
|
13
|
+
closeOnClick?: boolean;
|
|
14
|
+
onClick: () => void;
|
|
15
|
+
};
|
|
10
16
|
}
|
|
11
17
|
export declare const SelectOptions: <T>(props: SelectPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
12
18
|
export {};
|
package/dist/Select/index.d.ts
CHANGED
|
@@ -19,6 +19,10 @@ export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'close
|
|
|
19
19
|
scrollRef?: React.Ref<{
|
|
20
20
|
scrollTo: (index: number) => void;
|
|
21
21
|
}>;
|
|
22
|
+
addOption?: {
|
|
23
|
+
text: string;
|
|
24
|
+
onClick: () => void;
|
|
25
|
+
};
|
|
22
26
|
};
|
|
23
27
|
export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
24
28
|
export {};
|
package/dist/bundle.es10.js
CHANGED
|
@@ -1,57 +1,58 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import * as o from "@radix-ui/react-popover";
|
|
3
3
|
import { attr as B } from "@companix/utils-browser";
|
|
4
4
|
import M from "classnames";
|
|
5
5
|
import { forwardRef as j, useRef as k } from "react";
|
|
6
|
-
const D = j((
|
|
6
|
+
const D = j((i, n) => {
|
|
7
7
|
const {
|
|
8
|
-
children:
|
|
9
|
-
sideOffset:
|
|
10
|
-
matchTarget:
|
|
11
|
-
onAnimationEnd:
|
|
12
|
-
onAnimationStart:
|
|
13
|
-
onOpenAutoFocus:
|
|
8
|
+
children: s,
|
|
9
|
+
sideOffset: l,
|
|
10
|
+
matchTarget: c,
|
|
11
|
+
onAnimationEnd: m,
|
|
12
|
+
onAnimationStart: d,
|
|
13
|
+
onOpenAutoFocus: p,
|
|
14
14
|
onCloseAutoFocus: f,
|
|
15
|
-
triggerRef:
|
|
16
|
-
triggerProps:
|
|
17
|
-
open:
|
|
18
|
-
content:
|
|
19
|
-
onOpenChange:
|
|
20
|
-
align:
|
|
21
|
-
disabled:
|
|
22
|
-
minimal:
|
|
23
|
-
className:
|
|
24
|
-
fitMaxHeight:
|
|
25
|
-
zIndex:
|
|
15
|
+
triggerRef: h,
|
|
16
|
+
triggerProps: g,
|
|
17
|
+
open: u,
|
|
18
|
+
content: v,
|
|
19
|
+
onOpenChange: C,
|
|
20
|
+
align: x,
|
|
21
|
+
disabled: w,
|
|
22
|
+
minimal: L,
|
|
23
|
+
className: N,
|
|
24
|
+
fitMaxHeight: O = !0,
|
|
25
|
+
zIndex: P = 9999,
|
|
26
26
|
side: A,
|
|
27
|
-
showArrows:
|
|
28
|
-
} =
|
|
27
|
+
showArrows: b
|
|
28
|
+
} = i, e = k(null), y = () => {
|
|
29
29
|
e.current && e.current.click();
|
|
30
|
-
},
|
|
31
|
-
|
|
30
|
+
}, R = (t) => {
|
|
31
|
+
w && t.preventDefault();
|
|
32
32
|
};
|
|
33
|
-
return /* @__PURE__ */
|
|
34
|
-
/* @__PURE__ */ r(o.Trigger, { ref:
|
|
35
|
-
/* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */
|
|
33
|
+
return /* @__PURE__ */ a(o.Root, { open: u, onOpenChange: C, children: [
|
|
34
|
+
/* @__PURE__ */ r(o.Trigger, { ref: h, ...g, onClick: R, asChild: !0, children: s }),
|
|
35
|
+
/* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ a(
|
|
36
36
|
o.Content,
|
|
37
37
|
{
|
|
38
|
-
ref:
|
|
39
|
-
className: M("popover",
|
|
38
|
+
ref: n,
|
|
39
|
+
className: M("popover", N),
|
|
40
40
|
side: A,
|
|
41
|
-
align:
|
|
42
|
-
"data-appearance":
|
|
43
|
-
"data-match-target":
|
|
44
|
-
sideOffset:
|
|
41
|
+
align: x,
|
|
42
|
+
"data-appearance": L ? "minimal" : "default",
|
|
43
|
+
"data-match-target": c,
|
|
44
|
+
sideOffset: l ?? 6,
|
|
45
45
|
avoidCollisions: !0,
|
|
46
46
|
arrowPadding: 10,
|
|
47
|
-
style: { zIndex:
|
|
48
|
-
onAnimationStart:
|
|
49
|
-
onAnimationEnd:
|
|
50
|
-
onOpenAutoFocus:
|
|
47
|
+
style: { zIndex: P },
|
|
48
|
+
onAnimationStart: d,
|
|
49
|
+
onAnimationEnd: m,
|
|
50
|
+
onOpenAutoFocus: p,
|
|
51
51
|
onCloseAutoFocus: f,
|
|
52
|
+
onWheel: (t) => t.stopPropagation(),
|
|
52
53
|
children: [
|
|
53
54
|
/* @__PURE__ */ r(o.Close, { ref: e, style: { display: "none" } }),
|
|
54
|
-
|
|
55
|
+
b && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ a("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
|
|
55
56
|
/* @__PURE__ */ r(
|
|
56
57
|
"path",
|
|
57
58
|
{
|
|
@@ -71,7 +72,7 @@ const D = j((a, i) => {
|
|
|
71
72
|
}
|
|
72
73
|
)
|
|
73
74
|
] }) }) }),
|
|
74
|
-
/* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": B(
|
|
75
|
+
/* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": B(O), children: v({ close: y }) })
|
|
75
76
|
]
|
|
76
77
|
}
|
|
77
78
|
) })
|
package/dist/bundle.es12.js
CHANGED
|
@@ -1,77 +1,82 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo as
|
|
3
|
-
import { Popover as
|
|
4
|
-
import { useFroozeClosing as
|
|
5
|
-
import { SelectInput as
|
|
6
|
-
import { useScrollListController as
|
|
7
|
-
import { SelectOptions as
|
|
8
|
-
import { mergeRefs as
|
|
9
|
-
const
|
|
2
|
+
import { useMemo as T, useImperativeHandle as b } from "react";
|
|
3
|
+
import { Popover as z } from "./bundle.es10.js";
|
|
4
|
+
import { useFroozeClosing as B } from "./bundle.es45.js";
|
|
5
|
+
import { SelectInput as D } from "./bundle.es46.js";
|
|
6
|
+
import { useScrollListController as j } from "./bundle.es47.js";
|
|
7
|
+
import { SelectOptions as w } from "./bundle.es48.js";
|
|
8
|
+
import { mergeRefs as H } from "react-merge-refs";
|
|
9
|
+
const K = (m) => {
|
|
10
10
|
const {
|
|
11
11
|
options: n,
|
|
12
12
|
onChange: i,
|
|
13
13
|
value: r,
|
|
14
|
-
minimalOptions:
|
|
15
|
-
matchTarget:
|
|
16
|
-
children:
|
|
14
|
+
minimalOptions: f,
|
|
15
|
+
matchTarget: u = "width",
|
|
16
|
+
children: d,
|
|
17
17
|
disabled: p,
|
|
18
|
-
scrollRef:
|
|
19
|
-
popoverRef:
|
|
18
|
+
scrollRef: v,
|
|
19
|
+
popoverRef: h,
|
|
20
20
|
clearButton: s,
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
addOption: x,
|
|
22
|
+
...C
|
|
23
|
+
} = m, t = T(() => {
|
|
23
24
|
const o = r === null ? -1 : n.findIndex((e) => e.value === r);
|
|
24
25
|
return {
|
|
25
26
|
index: o,
|
|
26
27
|
option: n[o]
|
|
27
28
|
};
|
|
28
|
-
}, [n, r]),
|
|
29
|
-
|
|
30
|
-
scrollTo: (o) =>
|
|
29
|
+
}, [n, r]), R = t.option?.value ?? null, { popoverRef: O, froozePopoverPosition: c, handleAnimationEnd: g } = B(), { scrollToElement: a, optionsWrapperRef: P, scrollBoxRef: S } = j();
|
|
30
|
+
b(v, () => ({
|
|
31
|
+
scrollTo: (o) => a(o, "top")
|
|
31
32
|
}));
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
},
|
|
33
|
+
const A = (o, e) => {
|
|
34
|
+
c(), i(o), e();
|
|
35
|
+
}, E = (o) => {
|
|
36
|
+
c(), o();
|
|
37
|
+
}, F = (o) => {
|
|
35
38
|
o.stopPropagation(), s && i(null);
|
|
36
|
-
},
|
|
37
|
-
t.index !== -1 &&
|
|
39
|
+
}, I = () => {
|
|
40
|
+
t.index !== -1 && a(t.index, "center");
|
|
38
41
|
};
|
|
39
42
|
return /* @__PURE__ */ l(
|
|
40
|
-
|
|
43
|
+
z,
|
|
41
44
|
{
|
|
42
45
|
minimal: !0,
|
|
43
|
-
ref:
|
|
46
|
+
ref: H([O, h]),
|
|
44
47
|
sideOffset: 0,
|
|
45
|
-
matchTarget:
|
|
48
|
+
matchTarget: u,
|
|
46
49
|
onAnimationEnd: g,
|
|
47
50
|
onOpenAutoFocus: (o) => o.preventDefault(),
|
|
48
51
|
onCloseAutoFocus: (o) => o.preventDefault(),
|
|
49
52
|
disabled: p,
|
|
50
53
|
content: ({ close: o }) => /* @__PURE__ */ l(
|
|
51
|
-
|
|
54
|
+
w,
|
|
52
55
|
{
|
|
53
56
|
options: n,
|
|
54
|
-
active:
|
|
55
|
-
scrollboxRef:
|
|
56
|
-
optionsWrapperRef:
|
|
57
|
-
minimalOptions:
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
active: R,
|
|
58
|
+
scrollboxRef: S,
|
|
59
|
+
optionsWrapperRef: P,
|
|
60
|
+
minimalOptions: f,
|
|
61
|
+
close: () => E(o),
|
|
62
|
+
addOption: x,
|
|
63
|
+
onOpened: I,
|
|
64
|
+
onSelect: (e) => A(e, o)
|
|
60
65
|
}
|
|
61
66
|
),
|
|
62
|
-
children:
|
|
63
|
-
|
|
67
|
+
children: d ?? /* @__PURE__ */ l(
|
|
68
|
+
D,
|
|
64
69
|
{
|
|
65
|
-
...
|
|
70
|
+
...C,
|
|
66
71
|
disabled: p,
|
|
67
72
|
clearButton: s,
|
|
68
73
|
value: t.option?.title ?? "",
|
|
69
|
-
onClear:
|
|
74
|
+
onClear: F
|
|
70
75
|
}
|
|
71
76
|
)
|
|
72
77
|
}
|
|
73
78
|
);
|
|
74
79
|
};
|
|
75
80
|
export {
|
|
76
|
-
|
|
81
|
+
K as Select
|
|
77
82
|
};
|
package/dist/bundle.es48.js
CHANGED
|
@@ -1,22 +1,47 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import { OptionItem as
|
|
4
|
-
import { OptionsList as
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
1
|
+
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as u } from "react";
|
|
3
|
+
import { OptionItem as i } from "./bundle.es14.js";
|
|
4
|
+
import { OptionsList as x } from "./bundle.es16.js";
|
|
5
|
+
import { Icon as k } from "./bundle.es33.js";
|
|
6
|
+
import { faPlus as v } from "@companix/icons-solid";
|
|
7
|
+
const b = (n) => {
|
|
8
|
+
const {
|
|
9
|
+
active: c,
|
|
10
|
+
onOpened: l,
|
|
11
|
+
addOption: o,
|
|
12
|
+
scrollboxRef: m,
|
|
13
|
+
optionsWrapperRef: r,
|
|
14
|
+
options: s,
|
|
15
|
+
onSelect: p,
|
|
16
|
+
close: a,
|
|
17
|
+
minimalOptions: f
|
|
18
|
+
} = n;
|
|
19
|
+
return u(() => {
|
|
20
|
+
l?.();
|
|
21
|
+
}, []), /* @__PURE__ */ d(x, { scrollboxRef: m, optionsWrapperRef: r, maxHeight: 300, children: [
|
|
22
|
+
o && /* @__PURE__ */ e(
|
|
23
|
+
i,
|
|
24
|
+
{
|
|
25
|
+
className: "select-add-option",
|
|
26
|
+
icon: /* @__PURE__ */ e(k, { icon: v }),
|
|
27
|
+
title: o.text,
|
|
28
|
+
onClick: () => {
|
|
29
|
+
(o.closeOnClick ?? !0) && a(), o.onClick();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
),
|
|
33
|
+
s.map((t, O) => /* @__PURE__ */ e(
|
|
34
|
+
i,
|
|
35
|
+
{
|
|
36
|
+
active: c === t.value,
|
|
37
|
+
onClick: () => p?.(t.value),
|
|
38
|
+
minimal: f,
|
|
39
|
+
...t
|
|
40
|
+
},
|
|
41
|
+
`select-option-${O}`
|
|
42
|
+
))
|
|
43
|
+
] });
|
|
19
44
|
};
|
|
20
45
|
export {
|
|
21
|
-
|
|
46
|
+
b as SelectOptions
|
|
22
47
|
};
|
package/dist/bundle.es50.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsxs as b, jsx as o } from "react/jsx-runtime";
|
|
|
2
2
|
import h from "classnames";
|
|
3
3
|
import { attr as e } from "@companix/utils-browser";
|
|
4
4
|
import { forwardRef as x } from "react";
|
|
5
|
-
import { useInputPadding as N } from "./bundle.
|
|
5
|
+
import { useInputPadding as N } from "./bundle.es62.js";
|
|
6
6
|
const v = x(
|
|
7
7
|
({
|
|
8
8
|
required: s,
|
package/dist/bundle.es54.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as D, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { dateToFormat as $, weeks as g, createVoids as p, getDayIndex as b, getFirstDay as u, getMonthMaxDay as k } from "./bundle.es56.js";
|
|
3
|
-
import { CalendarHeader as F } from "./bundle.
|
|
4
|
-
import { useCalendar as j } from "./bundle.
|
|
3
|
+
import { CalendarHeader as F } from "./bundle.es63.js";
|
|
4
|
+
import { useCalendar as j } from "./bundle.es64.js";
|
|
5
5
|
import { attr as m } from "@companix/utils-browser";
|
|
6
6
|
import { isSameDate as f } from "./bundle.es55.js";
|
|
7
7
|
import { useLayoutEffect as I } from "react";
|
package/dist/bundle.es62.js
CHANGED
|
@@ -1,77 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
onNextMonth: N,
|
|
14
|
-
onPrevMonth: v
|
|
15
|
-
}) => {
|
|
16
|
-
const e = n.getFullYear(), r = n.getMonth(), s = "ru", M = u(
|
|
17
|
-
(t) => {
|
|
18
|
-
c(_(n, t));
|
|
19
|
-
},
|
|
20
|
-
[c, n]
|
|
21
|
-
), x = u(
|
|
22
|
-
(t) => {
|
|
23
|
-
c(F(n, t));
|
|
24
|
-
},
|
|
25
|
-
[c, n]
|
|
26
|
-
), A = h(() => k(s).map((t) => ({
|
|
27
|
-
...t,
|
|
28
|
-
className: "capitalize",
|
|
29
|
-
disabled: a && a(t.value)
|
|
30
|
-
})), [s, a]), Y = h(() => z(e, 100).map((t) => ({
|
|
31
|
-
...t,
|
|
32
|
-
disabled: m && m(t.value)
|
|
33
|
-
})), [e, m]);
|
|
34
|
-
let l = r === 11 && e === f;
|
|
35
|
-
a && !l && (l = a(
|
|
36
|
-
r === 11 ? 0 : r + 1,
|
|
37
|
-
r === 11 ? Math.min(e + 1, f) : e
|
|
38
|
-
));
|
|
39
|
-
let i = r === 0 && e === g;
|
|
40
|
-
return a && !i && (i = a(
|
|
41
|
-
r === 0 ? 11 : r - 1,
|
|
42
|
-
r === 0 ? Math.max(e - 1, g) : e
|
|
43
|
-
)), /* @__PURE__ */ d("div", { className: "calendar-header", children: [
|
|
44
|
-
!i && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "left", onClick: v, children: /* @__PURE__ */ o(C, { icon: E }) }),
|
|
45
|
-
/* @__PURE__ */ d("div", { className: "calendar-pickers", children: [
|
|
46
|
-
/* @__PURE__ */ o(
|
|
47
|
-
p,
|
|
48
|
-
{
|
|
49
|
-
fill: !0,
|
|
50
|
-
options: Y,
|
|
51
|
-
size: "sm",
|
|
52
|
-
value: e,
|
|
53
|
-
minimalOptions: !0,
|
|
54
|
-
matchTarget: "min-width",
|
|
55
|
-
onChange: (t) => x(t)
|
|
56
|
-
}
|
|
57
|
-
),
|
|
58
|
-
/* @__PURE__ */ o(
|
|
59
|
-
p,
|
|
60
|
-
{
|
|
61
|
-
fill: !0,
|
|
62
|
-
options: A,
|
|
63
|
-
size: "sm",
|
|
64
|
-
className: "capitalize",
|
|
65
|
-
value: r,
|
|
66
|
-
minimalOptions: !0,
|
|
67
|
-
matchTarget: "min-width",
|
|
68
|
-
onChange: (t) => M(t)
|
|
69
|
-
}
|
|
70
|
-
)
|
|
71
|
-
] }),
|
|
72
|
-
!l && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "right", onClick: N, children: /* @__PURE__ */ o(C, { icon: T }) })
|
|
73
|
-
] });
|
|
1
|
+
import { useRef as l, useCallback as p } from "react";
|
|
2
|
+
import { useEffectWithLayout as d } from "./bundle.es65.js";
|
|
3
|
+
const g = (r, f) => {
|
|
4
|
+
const c = l(null), i = l(null), o = { Right: c, Left: i }, u = p((t) => {
|
|
5
|
+
if (r.current) {
|
|
6
|
+
const n = r.current.style, e = o[t];
|
|
7
|
+
e.current && e.current.clientWidth ? n[`padding${t}`] !== `${e.current.clientWidth}px` && (n[`padding${t}`] = `${e.current.clientWidth}px`) : n[`padding${t}`] && (n[`padding${t}`] = "");
|
|
8
|
+
}
|
|
9
|
+
}, []);
|
|
10
|
+
return d(() => {
|
|
11
|
+
u("Left"), u("Right");
|
|
12
|
+
}, f), { rightRef: c, leftRef: i };
|
|
74
13
|
};
|
|
75
14
|
export {
|
|
76
|
-
|
|
15
|
+
g as useInputPadding
|
|
77
16
|
};
|
package/dist/bundle.es63.js
CHANGED
|
@@ -1,51 +1,77 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsxs as d, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback as u, useMemo as h } from "react";
|
|
3
|
+
import { Select as p } from "./bundle.es12.js";
|
|
4
|
+
import { getMonths as k, getYears as z, DEFAULT_MAX_YEAR as f, DEFAULT_MIN_YEAR as g } from "./bundle.es56.js";
|
|
5
|
+
import { Icon as C } from "./bundle.es33.js";
|
|
6
|
+
import { faChevronLeft as E, faChevronRight as T } from "@companix/icons-solid";
|
|
7
|
+
import { setMonth as _, setYear as F } from "./bundle.es55.js";
|
|
8
|
+
const y = ({
|
|
9
|
+
viewDate: n,
|
|
10
|
+
onChange: c,
|
|
11
|
+
isMonthDisabled: a,
|
|
12
|
+
isYearDisabled: m,
|
|
13
|
+
onNextMonth: N,
|
|
14
|
+
onPrevMonth: v
|
|
11
15
|
}) => {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
u(N(e, 1));
|
|
16
|
-
}, [e]), D = R({
|
|
17
|
-
disableFuture: c,
|
|
18
|
-
disablePast: r,
|
|
19
|
-
shouldDisableDate: E,
|
|
20
|
-
minDateTime: l,
|
|
21
|
-
maxDateTime: s
|
|
22
|
-
}), k = M(
|
|
23
|
-
(o, t) => {
|
|
24
|
-
const n = /* @__PURE__ */ new Date();
|
|
25
|
-
t = t || e.getFullYear();
|
|
26
|
-
const h = l ? l.getMonth() : 0, Y = s ? s.getMonth() : 11, F = l?.getFullYear() || w, f = s?.getFullYear() || A;
|
|
27
|
-
let g = t >= F && t <= f ? t === F && h > o || t === f && o > Y : !0;
|
|
28
|
-
return c && (g = g || (t === n.getFullYear() ? o > n.getMonth() : t > n.getFullYear())), r && (g = g || (t === n.getFullYear() ? o < n.getMonth() : t < n.getFullYear())), g;
|
|
16
|
+
const e = n.getFullYear(), r = n.getMonth(), s = "ru", M = u(
|
|
17
|
+
(t) => {
|
|
18
|
+
c(_(n, t));
|
|
29
19
|
},
|
|
30
|
-
[c,
|
|
31
|
-
),
|
|
32
|
-
(
|
|
33
|
-
|
|
34
|
-
let Y = n > o || o > h;
|
|
35
|
-
return c && (Y = Y || o > t.getFullYear()), r && (Y = Y || o < t.getFullYear()), Y;
|
|
20
|
+
[c, n]
|
|
21
|
+
), x = u(
|
|
22
|
+
(t) => {
|
|
23
|
+
c(F(n, t));
|
|
36
24
|
},
|
|
37
|
-
[c,
|
|
38
|
-
)
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
25
|
+
[c, n]
|
|
26
|
+
), A = h(() => k(s).map((t) => ({
|
|
27
|
+
...t,
|
|
28
|
+
className: "capitalize",
|
|
29
|
+
disabled: a && a(t.value)
|
|
30
|
+
})), [s, a]), Y = h(() => z(e, 100).map((t) => ({
|
|
31
|
+
...t,
|
|
32
|
+
disabled: m && m(t.value)
|
|
33
|
+
})), [e, m]);
|
|
34
|
+
let l = r === 11 && e === f;
|
|
35
|
+
a && !l && (l = a(
|
|
36
|
+
r === 11 ? 0 : r + 1,
|
|
37
|
+
r === 11 ? Math.min(e + 1, f) : e
|
|
38
|
+
));
|
|
39
|
+
let i = r === 0 && e === g;
|
|
40
|
+
return a && !i && (i = a(
|
|
41
|
+
r === 0 ? 11 : r - 1,
|
|
42
|
+
r === 0 ? Math.max(e - 1, g) : e
|
|
43
|
+
)), /* @__PURE__ */ d("div", { className: "calendar-header", children: [
|
|
44
|
+
!i && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "left", onClick: v, children: /* @__PURE__ */ o(C, { icon: E }) }),
|
|
45
|
+
/* @__PURE__ */ d("div", { className: "calendar-pickers", children: [
|
|
46
|
+
/* @__PURE__ */ o(
|
|
47
|
+
p,
|
|
48
|
+
{
|
|
49
|
+
fill: !0,
|
|
50
|
+
options: Y,
|
|
51
|
+
size: "sm",
|
|
52
|
+
value: e,
|
|
53
|
+
minimalOptions: !0,
|
|
54
|
+
matchTarget: "min-width",
|
|
55
|
+
onChange: (t) => x(t)
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ o(
|
|
59
|
+
p,
|
|
60
|
+
{
|
|
61
|
+
fill: !0,
|
|
62
|
+
options: A,
|
|
63
|
+
size: "sm",
|
|
64
|
+
className: "capitalize",
|
|
65
|
+
value: r,
|
|
66
|
+
minimalOptions: !0,
|
|
67
|
+
matchTarget: "min-width",
|
|
68
|
+
onChange: (t) => M(t)
|
|
69
|
+
}
|
|
70
|
+
)
|
|
71
|
+
] }),
|
|
72
|
+
!l && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "right", onClick: N, children: /* @__PURE__ */ o(C, { icon: T }) })
|
|
73
|
+
] });
|
|
48
74
|
};
|
|
49
75
|
export {
|
|
50
|
-
|
|
76
|
+
y as CalendarHeader
|
|
51
77
|
};
|
package/dist/bundle.es64.js
CHANGED
|
@@ -1,16 +1,51 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { subMonths as L, addMonths as N, useDayDisableCheker as R } from "./bundle.es55.js";
|
|
2
|
+
import { DEFAULT_MIN_YEAR as w, DEFAULT_MAX_YEAR as A } from "./bundle.es56.js";
|
|
3
|
+
import { useState as U, useCallback as M } from "react";
|
|
4
|
+
const X = ({
|
|
5
|
+
value: p,
|
|
6
|
+
disablePast: r,
|
|
7
|
+
disableFuture: c,
|
|
8
|
+
shouldDisableDate: E,
|
|
9
|
+
minDateTime: l,
|
|
10
|
+
maxDateTime: s
|
|
11
|
+
}) => {
|
|
12
|
+
const [e, u] = U(p || /* @__PURE__ */ new Date()), _ = M(() => {
|
|
13
|
+
u(L(e));
|
|
14
|
+
}, [e]), C = M(() => {
|
|
15
|
+
u(N(e, 1));
|
|
16
|
+
}, [e]), D = R({
|
|
17
|
+
disableFuture: c,
|
|
18
|
+
disablePast: r,
|
|
19
|
+
shouldDisableDate: E,
|
|
20
|
+
minDateTime: l,
|
|
21
|
+
maxDateTime: s
|
|
22
|
+
}), k = M(
|
|
23
|
+
(o, t) => {
|
|
24
|
+
const n = /* @__PURE__ */ new Date();
|
|
25
|
+
t = t || e.getFullYear();
|
|
26
|
+
const h = l ? l.getMonth() : 0, Y = s ? s.getMonth() : 11, F = l?.getFullYear() || w, f = s?.getFullYear() || A;
|
|
27
|
+
let g = t >= F && t <= f ? t === F && h > o || t === f && o > Y : !0;
|
|
28
|
+
return c && (g = g || (t === n.getFullYear() ? o > n.getMonth() : t > n.getFullYear())), r && (g = g || (t === n.getFullYear() ? o < n.getMonth() : t < n.getFullYear())), g;
|
|
29
|
+
},
|
|
30
|
+
[c, r, e, l, s]
|
|
31
|
+
), v = M(
|
|
32
|
+
(o) => {
|
|
33
|
+
const t = /* @__PURE__ */ new Date(), n = l?.getFullYear() || w, h = s?.getFullYear() || A;
|
|
34
|
+
let Y = n > o || o > h;
|
|
35
|
+
return c && (Y = Y || o > t.getFullYear()), r && (Y = Y || o < t.getFullYear()), Y;
|
|
36
|
+
},
|
|
37
|
+
[c, r, l, s]
|
|
38
|
+
);
|
|
39
|
+
return {
|
|
40
|
+
viewDate: e,
|
|
41
|
+
setViewDate: u,
|
|
42
|
+
setPrevMonth: _,
|
|
43
|
+
setNextMonth: C,
|
|
44
|
+
isDayDisabled: D,
|
|
45
|
+
isMonthDisabled: k,
|
|
46
|
+
isYearDisabled: v
|
|
47
|
+
};
|
|
13
48
|
};
|
|
14
49
|
export {
|
|
15
|
-
|
|
50
|
+
X as useCalendar
|
|
16
51
|
};
|