@companix/uikit 0.0.30 → 0.0.32

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.
@@ -1,5 +1,5 @@
1
1
  import { InputProps } from '../Input/Input';
2
- import { CalendarProps } from './Calendar';
2
+ import { CalendarProps } from '../Calendar/Calendar';
3
3
  export interface DatePickerProps extends Omit<CalendarProps, 'onChange'>, Omit<InputProps, 'value' | 'onChange' | 'rightElement'> {
4
4
  onChange?: (value: Date | null) => void;
5
5
  clearButton?: boolean;
@@ -7,8 +7,8 @@ export interface InputProps extends Omit<InputContainerProps, 'inputRef' | 'chil
7
7
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
8
8
  inputRef?: React.Ref<HTMLInputElement>;
9
9
  inputClassName?: string;
10
+ inputType?: React.HTMLInputTypeAttribute;
10
11
  mask?: string;
11
12
  maskChar?: string;
12
- type?: React.HTMLInputTypeAttribute;
13
13
  }
14
14
  export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -22,5 +22,6 @@ export interface PopoverProps {
22
22
  className?: string;
23
23
  fitMaxHeight?: boolean;
24
24
  disabled?: boolean;
25
+ zIndex?: number;
25
26
  }
26
27
  export declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,4 +1,4 @@
1
- import { CalendarProps } from '../DatePicker/Calendar';
1
+ import { CalendarProps } from '../Calendar/Calendar';
2
2
  export interface UseCalendarDependencies extends Pick<CalendarProps, 'minDateTime' | 'maxDateTime' | 'shouldDisableDate' | 'disableFuture' | 'disablePast'> {
3
3
  disablePast?: boolean;
4
4
  disableFuture?: boolean;
@@ -1,4 +1,4 @@
1
- import { CalendarProps } from '../DatePicker/Calendar';
1
+ import { CalendarProps } from '../Calendar/Calendar';
2
2
  export declare function isSameDate(d1: Date, d2: Date): boolean;
3
3
  export declare const MONDAY = 1;
4
4
  export declare function startOfWeek(date: Date, { weekStartsOn }: {
@@ -4,16 +4,16 @@ import { mergeRefs as c } from "react-merge-refs";
4
4
  import { InputElement as x } from "./bundle.es43.js";
5
5
  import { InputContainer as I } from "./bundle.es44.js";
6
6
  import g from "classnames";
7
- const k = b(
7
+ const N = b(
8
8
  ({
9
9
  onChange: m,
10
10
  onValueChange: f,
11
11
  readOnly: i,
12
12
  inputClassName: o,
13
- value: n,
14
- placeholder: p,
13
+ value: p,
14
+ placeholder: n,
15
15
  mask: d,
16
- type: s = "text",
16
+ inputType: s = "text",
17
17
  maskChar: u,
18
18
  inputRef: a,
19
19
  ...e
@@ -28,8 +28,8 @@ const k = b(
28
28
  "aria-disabled": e.disabled,
29
29
  onChange: m,
30
30
  onValueChange: f,
31
- value: n,
32
- placeholder: p,
31
+ value: p,
32
+ placeholder: n,
33
33
  disabled: e.disabled,
34
34
  readOnly: i,
35
35
  maskChar: u,
@@ -39,5 +39,5 @@ const k = b(
39
39
  }
40
40
  );
41
41
  export {
42
- k as Input
42
+ N as Input
43
43
  };
@@ -1,18 +1,19 @@
1
1
  import { jsx as e, jsxs as o } from "react/jsx-runtime";
2
2
  import d from "classnames";
3
3
  import * as r from "@radix-ui/react-dialog";
4
- import { VisuallyHidden as n } from "@radix-ui/react-visually-hidden";
4
+ import { VisuallyHidden as i } from "@radix-ui/react-visually-hidden";
5
5
  import { varToStyle as c } from "@companix/utils-browser";
6
- const p = ({ open: i, onOpenChange: t, children: a, size: l, direction: s, className: m }) => /* @__PURE__ */ e(r.Root, { open: i, onOpenChange: t, children: /* @__PURE__ */ o(r.Portal, { children: [
6
+ const p = ({ open: t, onOpenChange: l, children: a, size: s, direction: m, className: n }) => /* @__PURE__ */ e(r.Root, { open: t, onOpenChange: l, children: /* @__PURE__ */ o(r.Portal, { children: [
7
7
  /* @__PURE__ */ e(r.Overlay, { className: "drawer-overlay" }),
8
8
  /* @__PURE__ */ o(
9
9
  r.Content,
10
10
  {
11
- style: c({ "--drawer-size": l ?? "50%" }),
12
- className: d("drawer", m),
13
- "data-direction": s,
11
+ style: c({ "--drawer-size": s ?? "50%" }),
12
+ className: d("drawer", n),
13
+ "data-direction": m,
14
14
  children: [
15
- /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(r.Title, {}) }),
15
+ /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r.Title, {}) }),
16
+ /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r.Description, {}) }),
16
17
  a
17
18
  ]
18
19
  }
@@ -1,10 +1,10 @@
1
1
  import { jsx as u } from "react/jsx-runtime";
2
- import { Popover as x } from "./bundle.es7.js";
3
- import { Input as A } from "./bundle.es10.js";
4
- import { useState as M, useRef as j } from "react";
2
+ import { Popover as T } from "./bundle.es7.js";
3
+ import { Input as w } from "./bundle.es10.js";
4
+ import { useState as A, useRef as j } from "react";
5
5
  import { Calendar as E } from "./bundle.es51.js";
6
6
  import { useDayDisableCheker as N } from "./bundle.es52.js";
7
- import { getNum as f, formatTime as v } from "@companix/utils-js";
7
+ import { getNum as h, formatTime as v } from "@companix/utils-js";
8
8
  import { removeDigits as O } from "./bundle.es53.js";
9
9
  import { SelectRightElements as Y } from "./bundle.es54.js";
10
10
  const i = {
@@ -19,7 +19,7 @@ const i = {
19
19
  toValue: (e) => {
20
20
  const n = e.split(i.char);
21
21
  if (n.length === 3) {
22
- const [r, l, a] = [f(n[0]), f(n[1]), f(n[2])];
22
+ const [r, l, a] = [h(n[0]), h(n[1]), h(n[2])];
23
23
  if (r && l && a) {
24
24
  const o = new Date(a, l - 1, r);
25
25
  if (o.getFullYear() === a && o.getDate() === r && o.getMonth() === l - 1)
@@ -40,36 +40,36 @@ const i = {
40
40
  disablePickers: I,
41
41
  showNeighboringMonth: P,
42
42
  onChange: c,
43
- shouldDisableDate: d,
43
+ shouldDisableDate: g,
44
44
  viewDate: S,
45
- disablePast: g,
45
+ disablePast: d,
46
46
  disableFuture: D,
47
47
  minDateTime: C,
48
48
  maxDateTime: b,
49
49
  // input props
50
50
  ...V
51
- } = e, [m, s] = M(() => i.toString(o ?? null)), p = j(null), k = N({
51
+ } = e, [m, s] = A(() => i.toString(o ?? null)), p = j(null), k = N({
52
52
  disableFuture: D,
53
- disablePast: g,
54
- shouldDisableDate: d,
53
+ disablePast: d,
54
+ shouldDisableDate: g,
55
55
  minDateTime: C,
56
56
  maxDateTime: b
57
57
  }), B = (t) => {
58
58
  a || p.current && p.current.getAttribute("data-state") === "open" && t.preventDefault();
59
59
  }, F = (t) => {
60
60
  t.stopPropagation(), s(""), c?.(null);
61
- }, R = (t) => {
61
+ }, x = (t) => {
62
62
  s(t);
63
- const h = i.toValue(t);
64
- h && !k(h) && c?.(h);
65
- }, T = () => {
63
+ const f = i.toValue(t);
64
+ f && !k(f) && c?.(f);
65
+ }, M = () => {
66
66
  const t = i.toValue(m);
67
67
  (!t || k(t)) && s(i.toString(o ?? null));
68
- }, w = (t) => {
68
+ }, R = (t) => {
69
69
  c?.(t), s(i.toString(t));
70
70
  };
71
71
  return /* @__PURE__ */ u(
72
- x,
72
+ T,
73
73
  {
74
74
  minimal: !0,
75
75
  ref: p,
@@ -77,31 +77,32 @@ const i = {
77
77
  onOpenAutoFocus: (t) => t.preventDefault(),
78
78
  onCloseAutoFocus: (t) => t.preventDefault(),
79
79
  disabled: a,
80
+ fitMaxHeight: !1,
80
81
  content: () => /* @__PURE__ */ u(
81
82
  E,
82
83
  {
83
84
  value: o,
84
- disablePast: g,
85
+ disablePast: d,
85
86
  disableFuture: D,
86
87
  enableTime: y,
87
88
  disablePickers: I,
88
89
  showNeighboringMonth: P,
89
- onChange: w,
90
- shouldDisableDate: d,
90
+ onChange: R,
91
+ shouldDisableDate: g,
91
92
  viewDate: S,
92
93
  minDateTime: C,
93
94
  maxDateTime: b
94
95
  }
95
96
  ),
96
97
  children: /* @__PURE__ */ u(
97
- A,
98
+ w,
98
99
  {
99
100
  ...V,
100
101
  value: m,
101
102
  disabled: a,
102
103
  onClick: B,
103
- onValueChange: R,
104
- onBlur: T,
104
+ onValueChange: x,
105
+ onBlur: M,
105
106
  mask: "99-99-9999",
106
107
  rightElement: /* @__PURE__ */ u(
107
108
  Y,
@@ -1,9 +1,9 @@
1
1
  import { jsxs as t, jsx as r } from "react/jsx-runtime";
2
2
  import * as o from "@radix-ui/react-popover";
3
- import { attr as y } from "@companix/utils-browser";
4
- import B from "classnames";
5
- import { forwardRef as M, useRef as j } from "react";
6
- const D = M((a, i) => {
3
+ import { attr as B } from "@companix/utils-browser";
4
+ import M from "classnames";
5
+ import { forwardRef as j, useRef as k } from "react";
6
+ const D = j((a, i) => {
7
7
  const {
8
8
  children: n,
9
9
  sideOffset: s,
@@ -18,38 +18,40 @@ const D = M((a, i) => {
18
18
  content: u,
19
19
  onOpenChange: v,
20
20
  align: C,
21
- disabled: w,
22
- minimal: x,
21
+ disabled: x,
22
+ minimal: w,
23
23
  className: L,
24
24
  fitMaxHeight: N = !0,
25
- side: O,
26
- showArrows: A
27
- } = a, e = j(null), P = () => {
25
+ zIndex: O = 100,
26
+ side: A,
27
+ showArrows: P
28
+ } = a, e = k(null), b = () => {
28
29
  e.current && e.current.click();
29
- }, b = (R) => {
30
- w && R.preventDefault();
30
+ }, y = (R) => {
31
+ x && R.preventDefault();
31
32
  };
32
33
  return /* @__PURE__ */ t(o.Root, { open: g, onOpenChange: v, children: [
33
- /* @__PURE__ */ r(o.Trigger, { ref: p, ...h, onClick: b, asChild: !0, children: n }),
34
+ /* @__PURE__ */ r(o.Trigger, { ref: p, ...h, onClick: y, asChild: !0, children: n }),
34
35
  /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ t(
35
36
  o.Content,
36
37
  {
37
38
  ref: i,
38
- className: B("popover", L),
39
- side: O,
39
+ className: M("popover", L),
40
+ side: A,
40
41
  align: C,
41
- "data-appearance": x ? "minimal" : "default",
42
+ "data-appearance": w ? "minimal" : "default",
42
43
  "data-match-target": l,
43
44
  sideOffset: s ?? 6,
44
45
  avoidCollisions: !0,
45
46
  arrowPadding: 10,
47
+ style: { zIndex: O },
46
48
  onAnimationStart: m,
47
49
  onAnimationEnd: c,
48
50
  onOpenAutoFocus: d,
49
51
  onCloseAutoFocus: f,
50
52
  children: [
51
53
  /* @__PURE__ */ r(o.Close, { ref: e, style: { display: "none" } }),
52
- A && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ t("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
54
+ P && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ t("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
53
55
  /* @__PURE__ */ r(
54
56
  "path",
55
57
  {
@@ -69,7 +71,7 @@ const D = M((a, i) => {
69
71
  }
70
72
  )
71
73
  ] }) }) }),
72
- /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": y(N), children: u({ close: P }) })
74
+ /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": B(N), children: u({ close: b }) })
73
75
  ]
74
76
  }
75
77
  ) })
package/dist/index.d.ts CHANGED
@@ -63,7 +63,7 @@ export { createAlertAgent } from './DialogAlert';
63
63
  export { createToaster } from './Toaster';
64
64
  export { Toast } from './Toaster/Toast';
65
65
  export * from './types';
66
- export type { CalendarProps } from './DatePicker/Calendar';
66
+ export type { CalendarProps } from './Calendar/Calendar';
67
67
  export { createDialogsRegistry, DialogShell } from './__helpers/createDialogRegistry';
68
68
  export { createPopoversRegistry } from './__helpers/createPopoversRegistry';
69
69
  export type { PopupProps } from './__helpers/createDialogRegistry';
package/dist/index.scss CHANGED
@@ -17,8 +17,7 @@
17
17
  @use './Input/Input.scss';
18
18
  @use './Input/Form.scss';
19
19
  @use './DateInput/DateInput.scss';
20
- @use './DatePicker/DatePicker.scss';
21
- @use './DatePicker/Calendar.scss';
20
+ @use './Calendar/Calendar.scss';
22
21
  @use './Switch/Switch.scss';
23
22
  @use './Spinner/Spinner.scss';
24
23
  @use './ButtonGroup/ButtonGroup.scss';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@companix/uikit",
3
- "version": "0.0.30",
3
+ "version": "0.0.32",
4
4
  "module": "./dist/bundle.es.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "type": "module",
File without changes
File without changes
File without changes