@cognite/aura 0.3.1 → 0.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.
- package/DESIGN.md +1651 -7
- package/README.md +45 -3
- package/dist/components/index.d.ts +4 -2
- package/dist/components/index.js +58 -325
- package/dist/components/ui/core/accordion/accordion.js +79 -114
- package/dist/components/ui/core/action-toolbar/action-toolbar.js +108 -176
- package/dist/components/ui/core/alert/alert.js +158 -206
- package/dist/components/ui/core/avatar/avatar.js +64 -90
- package/dist/components/ui/core/badge/badge.js +73 -108
- package/dist/components/ui/core/banner/banner.js +146 -215
- package/dist/components/ui/core/breadcrumb/breadcrumb.js +105 -200
- package/dist/components/ui/core/button/button.js +47 -52
- package/dist/components/ui/core/button-group/button-group.js +40 -79
- package/dist/components/ui/core/card/card.js +102 -185
- package/dist/components/ui/core/chart/chart.js +116 -206
- package/dist/components/ui/core/chart/index.js +2 -8
- package/dist/components/ui/core/checkbox/checkbox.js +67 -132
- package/dist/components/ui/core/checkbox/checkbox.metadata.js +7 -7
- package/dist/components/ui/core/code-block/code-block.d.ts +1 -1
- package/dist/components/ui/core/code-block/code-block.js +179 -267
- package/dist/components/ui/core/collapsible/collapsible.js +29 -49
- package/dist/components/ui/core/combobox/combobox.js +41 -0
- package/dist/components/ui/core/command/command.js +85 -150
- package/dist/components/ui/core/count/count.js +21 -32
- package/dist/components/ui/core/date-time-pickers/date-picker/date-picker.js +60 -83
- package/dist/components/ui/core/date-time-pickers/date-picker/types.d.ts +1 -2
- package/dist/components/ui/core/date-time-pickers/date-picker/use-date-picker.js +36 -62
- package/dist/components/ui/core/date-time-pickers/date-range-picker/date-range-picker.js +63 -98
- package/dist/components/ui/core/date-time-pickers/date-range-picker/types.d.ts +1 -2
- package/dist/components/ui/core/date-time-pickers/date-range-picker/use-date-range-picker.js +60 -81
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/date-time-range-picker.js +118 -189
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/types.d.ts +1 -2
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/use-date-time-range-picker.js +104 -158
- package/dist/components/ui/core/date-time-pickers/index.d.ts +2 -0
- package/dist/components/ui/core/date-time-pickers/index.js +5 -8
- package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.js +42 -56
- package/dist/components/ui/core/date-time-pickers/shared/calendar/calendar.js +66 -117
- package/dist/components/ui/core/date-time-pickers/shared/calendar-header/calendar-header.js +63 -93
- package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.d.ts +1 -1
- package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.js +64 -98
- package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js +38 -67
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.d.ts +0 -2
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js +23 -39
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.js +52 -62
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.js +18 -18
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.js +24 -31
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-time-state.js +24 -33
- package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.js +4 -7
- package/dist/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.js +17 -31
- package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/index.d.ts +2 -0
- package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.d.ts +19 -0
- package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js +41 -0
- package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js +33 -50
- package/dist/components/ui/core/date-time-pickers/time-picker/index.d.ts +3 -0
- package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.d.ts +16 -0
- package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.js +79 -0
- package/dist/components/ui/core/date-time-pickers/time-picker/types.d.ts +23 -0
- package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.d.ts +3 -0
- package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.js +42 -0
- package/dist/components/ui/core/date-time-pickers/utils/calendar-utils.js +39 -52
- package/dist/components/ui/core/date-time-pickers/utils/time-utils.js +7 -15
- package/dist/components/ui/core/dialog/dialog.js +82 -155
- package/dist/components/ui/core/dropdown-menu/dropdown-menu.d.ts +19 -17
- package/dist/components/ui/core/dropdown-menu/dropdown-menu.js +150 -250
- package/dist/components/ui/core/empty-state/empty-state.context.js +5 -8
- package/dist/components/ui/core/empty-state/empty-state.js +86 -138
- package/dist/components/ui/core/helper-text/helper-text.js +37 -65
- package/dist/components/ui/core/hover-card/hover-card.js +54 -80
- package/dist/components/ui/core/inline-citation/inline-citation.js +98 -181
- package/dist/components/ui/core/input/input.js +12 -27
- package/dist/components/ui/core/input-group/input-group.js +76 -173
- package/dist/components/ui/core/kbd/kbd.js +20 -36
- package/dist/components/ui/core/label/label.js +26 -43
- package/dist/components/ui/core/loader/loader.js +80 -117
- package/dist/components/ui/core/message/message-response-default-streamdown-controls.js +12 -12
- package/dist/components/ui/core/message/message.d.ts +2 -2
- package/dist/components/ui/core/message/message.js +316 -542
- package/dist/components/ui/core/pagination/pagination-size-context.js +5 -6
- package/dist/components/ui/core/pagination/pagination-teleport.js +86 -106
- package/dist/components/ui/core/pagination/pagination-teleport.utils.js +6 -6
- package/dist/components/ui/core/pagination/pagination.js +231 -334
- package/dist/components/ui/core/popover/popover.js +90 -157
- package/dist/components/ui/core/progress/progress.js +36 -61
- package/dist/components/ui/core/prompt-input/prompt-input.js +274 -413
- package/dist/components/ui/core/radio-group/radio-group.js +58 -113
- package/dist/components/ui/core/reasoning/reasoning.js +55 -86
- package/dist/components/ui/core/scroll-area/scroll-area.js +41 -71
- package/dist/components/ui/core/search/search.js +77 -99
- package/dist/components/ui/core/segmented-control/segmented-control.js +110 -167
- package/dist/components/ui/core/select/select.js +168 -293
- package/dist/components/ui/core/separator/separator.js +13 -23
- package/dist/components/ui/core/shimmer/shimmer.d.ts +2 -4
- package/dist/components/ui/core/shimmer/shimmer.js +40 -107
- package/dist/components/ui/core/skeleton/skeleton.js +13 -18
- package/dist/components/ui/core/sonner-toast/sonner-toast.js +54 -47
- package/dist/components/ui/core/sources/sources.d.ts +5 -1
- package/dist/components/ui/core/sources/sources.js +58 -79
- package/dist/components/ui/core/switch/switch.js +62 -0
- package/dist/components/ui/core/tabs/tabs.js +149 -223
- package/dist/components/ui/core/tabs/tabs.utils.js +6 -8
- package/dist/components/ui/core/textarea/textarea.js +13 -27
- package/dist/components/ui/core/toggle/toggle.js +55 -74
- package/dist/components/ui/core/tool/tool.js +127 -163
- package/dist/components/ui/core/tooltip/tooltip.js +47 -86
- package/dist/components/ui/core/topbar/topbar.js +106 -190
- package/dist/eslint/index.js +5 -10
- package/dist/eslint/no-overriding-styles.js +178 -237
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +1 -0
- package/dist/lib/highlight-code.d.ts +9 -0
- package/dist/lib/highlight-code.js +42 -0
- package/dist/lib/portal-container-context.js +8 -9
- package/dist/lib/style-scope.js +6 -6
- package/dist/lib/use-controllable-state.js +21 -30
- package/dist/lib/utils.d.ts +0 -2
- package/dist/lib/utils.js +32 -112
- package/dist/styles.css +1 -1
- package/dist/styles.source.css +23 -0
- package/package.json +23 -7
- package/dist/components/ui/core/date-time-pickers/shared/constants.js +0 -14
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
};
|
|
17
|
-
export {
|
|
18
|
-
p as useRangeStepManager
|
|
1
|
+
import { useCallback as e, useState as t } from "react";
|
|
2
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.ts
|
|
3
|
+
var n = () => {
|
|
4
|
+
let [n, r] = t("start");
|
|
5
|
+
return {
|
|
6
|
+
step: n,
|
|
7
|
+
handleNext: e(() => {
|
|
8
|
+
r("end");
|
|
9
|
+
}, []),
|
|
10
|
+
handleBack: e(() => {
|
|
11
|
+
r("start");
|
|
12
|
+
}, []),
|
|
13
|
+
resetStep: e(() => {
|
|
14
|
+
r("start");
|
|
15
|
+
}, [])
|
|
16
|
+
};
|
|
19
17
|
};
|
|
18
|
+
//#endregion
|
|
19
|
+
export { n as useRangeStepManager };
|
|
@@ -1,32 +1,25 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
clearDate: () => n.current.tempDate === null ? !1 : (s(null), !0),
|
|
25
|
-
resetDate: (t) => {
|
|
26
|
-
s(t), o(t ?? a);
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
export {
|
|
31
|
-
g as useSingleDateState
|
|
1
|
+
import { useRef as e, useState as t } from "react";
|
|
2
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.ts
|
|
3
|
+
var n = ({ value: n, defaultDate: r, mapDate: i, onDateSelected: a }) => {
|
|
4
|
+
let [o, s] = t(n), [c, l] = t(() => n ?? r), u = e({ tempDate: n }), d = (e) => {
|
|
5
|
+
u.current.tempDate = e, s(e);
|
|
6
|
+
};
|
|
7
|
+
return {
|
|
8
|
+
tempDate: o,
|
|
9
|
+
displayedMonth: c,
|
|
10
|
+
stateRef: u,
|
|
11
|
+
handleDateClick: (e) => {
|
|
12
|
+
let t = i ? i(e) : e;
|
|
13
|
+
d(t), a?.(t);
|
|
14
|
+
},
|
|
15
|
+
handleMonthChange: (e) => {
|
|
16
|
+
l(e);
|
|
17
|
+
},
|
|
18
|
+
clearDate: () => u.current.tempDate === null ? !1 : (d(null), !0),
|
|
19
|
+
resetDate: (e) => {
|
|
20
|
+
d(e), l(e ?? r);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
32
23
|
};
|
|
24
|
+
//#endregion
|
|
25
|
+
export { n as useSingleDateState };
|
|
@@ -1,34 +1,25 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
minute: p,
|
|
24
|
-
amPm: t,
|
|
25
|
-
hour24: A,
|
|
26
|
-
handleHourChange: u,
|
|
27
|
-
handleMinuteChange: h,
|
|
28
|
-
handleAmPmChange: c,
|
|
29
|
-
resetTime: H
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
export {
|
|
33
|
-
S as useTimeState
|
|
1
|
+
import { convert12HourTo24Hour as e, convert24HourTo12Hour as t, getAmPmFromHour as n } from "../../utils/time-utils.js";
|
|
2
|
+
import { useCallback as r, useMemo as i, useState as a } from "react";
|
|
3
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-time-state.ts
|
|
4
|
+
var o = ({ initialHour: o = 9, initialMinute: s = 0, timeFormat: c = "24h" } = {}) => {
|
|
5
|
+
let [l, u] = a(c === "12h" ? t(o) : o), [d, f] = a(s), [p, m] = a(() => n(o));
|
|
6
|
+
return {
|
|
7
|
+
hour: l,
|
|
8
|
+
minute: d,
|
|
9
|
+
amPm: p,
|
|
10
|
+
hour24: i(() => c === "12h" ? e(l, p) : l, [
|
|
11
|
+
l,
|
|
12
|
+
p,
|
|
13
|
+
c
|
|
14
|
+
]),
|
|
15
|
+
handleHourChange: u,
|
|
16
|
+
handleMinuteChange: f,
|
|
17
|
+
handleAmPmChange: m,
|
|
18
|
+
resetTime: r((e, r) => {
|
|
19
|
+
let i = c === "12h" ? t(e) : e;
|
|
20
|
+
u(i), f(r), m(n(e));
|
|
21
|
+
}, [c])
|
|
22
|
+
};
|
|
34
23
|
};
|
|
24
|
+
//#endregion
|
|
25
|
+
export { o as useTimeState };
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
e as SCROLL_ITEM_SELECTED_CLASSES,
|
|
6
|
-
n as SCROLL_ITEM_UNSELECTED_CLASSES
|
|
7
|
-
};
|
|
1
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/shared/scroll-cell-classes.ts
|
|
2
|
+
var e = "overflow-y-auto flex flex-col items-center py-2 w-9 h-72 shrink-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", t = "w-9 h-9 flex items-center justify-center rounded-lg cursor-pointer text-sm font-medium leading-[18px] tracking-normal select-none transition-colors duration-150 shrink-0", n = "bg-primary-background text-foreground-on-primary hover:bg-primary-background", r = "text-secondary-foreground hover:bg-accent-background";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as SCROLL_CONTAINER_CLASSES, t as SCROLL_ITEM_BASE_CLASSES, n as SCROLL_ITEM_SELECTED_CLASSES, r as SCROLL_ITEM_UNSELECTED_CLASSES };
|
|
@@ -1,31 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
{
|
|
19
|
-
variant: "ghost",
|
|
20
|
-
size: "default",
|
|
21
|
-
className: "w-full justify-start text-secondary-foreground",
|
|
22
|
-
onClick: () => a(e.getValue()),
|
|
23
|
-
children: e.label
|
|
24
|
-
},
|
|
25
|
-
e.id ?? e.label
|
|
26
|
-
))
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
|
-
export {
|
|
30
|
-
m as ShortcutsPanel
|
|
31
|
-
};
|
|
1
|
+
import { cn as e } from "../../../../../../lib/utils.js";
|
|
2
|
+
import { Button as t } from "../../../button/button.js";
|
|
3
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
4
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.tsx
|
|
5
|
+
var r = [], i = ({ shortcuts: i = r, onShortcutClick: a, className: o }) => i.length === 0 ? null : /* @__PURE__ */ n("div", {
|
|
6
|
+
"data-slot": "shortcuts-panel",
|
|
7
|
+
className: e("flex flex-col gap-1 p-3 border-r border-border min-w-[150px]", o),
|
|
8
|
+
children: i.map((e) => /* @__PURE__ */ n(t, {
|
|
9
|
+
variant: "ghost",
|
|
10
|
+
size: "default",
|
|
11
|
+
className: "w-full justify-start text-secondary-foreground",
|
|
12
|
+
onClick: () => a(e.getValue()),
|
|
13
|
+
children: e.label
|
|
14
|
+
}, e.id ?? e.label))
|
|
15
|
+
});
|
|
16
|
+
//#endregion
|
|
17
|
+
export { i as ShortcutsPanel };
|
package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
type TimePickerPanelBaseProps = {
|
|
3
|
+
hour: number;
|
|
4
|
+
minute: number;
|
|
5
|
+
onHourChange: (hour: number) => void;
|
|
6
|
+
onMinuteChange: (minute: number) => void;
|
|
7
|
+
className?: string;
|
|
8
|
+
};
|
|
9
|
+
export type TimePickerPanelProps = TimePickerPanelBaseProps & ({
|
|
10
|
+
timeFormat: '12h';
|
|
11
|
+
amPm: 'AM' | 'PM';
|
|
12
|
+
onAmPmChange: (amPm: 'AM' | 'PM') => void;
|
|
13
|
+
} | {
|
|
14
|
+
timeFormat?: '24h';
|
|
15
|
+
amPm?: undefined;
|
|
16
|
+
onAmPmChange?: undefined;
|
|
17
|
+
});
|
|
18
|
+
export declare const TimePickerPanel: FC<TimePickerPanelProps>;
|
|
19
|
+
export {};
|
package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { cn as e } from "../../../../../../lib/utils.js";
|
|
2
|
+
import { AmPmScroll as t } from "../am-pm-scroll/am-pm-scroll.js";
|
|
3
|
+
import { TimePickerScroll as n } from "../time-picker-scroll/time-picker-scroll.js";
|
|
4
|
+
import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
5
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.tsx
|
|
6
|
+
var o = (o) => {
|
|
7
|
+
let { hour: s, minute: c, onHourChange: l, onMinuteChange: u, className: d } = o, f = o.timeFormat ?? "24h";
|
|
8
|
+
return /* @__PURE__ */ a("div", {
|
|
9
|
+
"data-slot": "time-picker-panel",
|
|
10
|
+
className: e("flex items-stretch", d),
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ i("div", {
|
|
13
|
+
className: "px-3",
|
|
14
|
+
children: /* @__PURE__ */ i(n, {
|
|
15
|
+
value: s,
|
|
16
|
+
onChange: l,
|
|
17
|
+
type: "hour",
|
|
18
|
+
timeFormat: f
|
|
19
|
+
})
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }),
|
|
22
|
+
/* @__PURE__ */ i("div", {
|
|
23
|
+
className: "px-3",
|
|
24
|
+
children: /* @__PURE__ */ i(n, {
|
|
25
|
+
value: c,
|
|
26
|
+
onChange: u,
|
|
27
|
+
type: "minute"
|
|
28
|
+
})
|
|
29
|
+
}),
|
|
30
|
+
o.timeFormat === "12h" && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }), /* @__PURE__ */ i("div", {
|
|
31
|
+
className: "px-3",
|
|
32
|
+
children: /* @__PURE__ */ i(t, {
|
|
33
|
+
value: o.amPm,
|
|
34
|
+
onChange: o.onAmPmChange
|
|
35
|
+
})
|
|
36
|
+
})] })
|
|
37
|
+
]
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
//#endregion
|
|
41
|
+
export { o as TimePickerPanel };
|
package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js
CHANGED
|
@@ -1,52 +1,35 @@
|
|
|
1
|
+
import { cn as e } from "../../../../../../lib/utils.js";
|
|
2
|
+
import { SCROLL_CONTAINER_CLASSES as t, SCROLL_ITEM_BASE_CLASSES as n, SCROLL_ITEM_SELECTED_CLASSES as r, SCROLL_ITEM_UNSELECTED_CLASSES as i } from "../scroll-cell-classes.js";
|
|
3
|
+
import { generateHours as a, generateMinutes as o } from "../../utils/time-utils.js";
|
|
4
|
+
import { useEffect as s, useRef as c } from "react";
|
|
1
5
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
})
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
children: _.map((o) => {
|
|
30
|
-
const t = S !== null && o === S;
|
|
31
|
-
return /* @__PURE__ */ l(
|
|
32
|
-
"div",
|
|
33
|
-
{
|
|
34
|
-
ref: t ? n : void 0,
|
|
35
|
-
className: E(
|
|
36
|
-
T,
|
|
37
|
-
t ? u : R
|
|
38
|
-
),
|
|
39
|
-
onClick: () => m(o),
|
|
40
|
-
role: "option",
|
|
41
|
-
"aria-selected": t,
|
|
42
|
-
children: o.toString().padStart(2, "0")
|
|
43
|
-
},
|
|
44
|
-
o
|
|
45
|
-
);
|
|
46
|
-
})
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
};
|
|
50
|
-
export {
|
|
51
|
-
M as TimePickerScroll
|
|
6
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.tsx
|
|
7
|
+
var u = ({ value: u, onChange: d, type: f, timeFormat: p = "24h", className: m }) => {
|
|
8
|
+
let h = c(null), g = c(null), _ = f === "hour" ? a(p) : o(), v = u === null ? null : f === "hour" && p === "12h" ? u === 0 ? 12 : u > 12 ? u - 12 : u : u;
|
|
9
|
+
return s(() => {
|
|
10
|
+
if (u !== null && g.current && h.current) {
|
|
11
|
+
let e = h.current, t = g.current;
|
|
12
|
+
e.scrollTo({
|
|
13
|
+
top: t.offsetTop - e.offsetHeight / 2 + t.offsetHeight / 2,
|
|
14
|
+
behavior: "smooth"
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
}, [u]), /* @__PURE__ */ l("div", {
|
|
18
|
+
"data-slot": "time-picker-scroll",
|
|
19
|
+
ref: h,
|
|
20
|
+
className: e(t, m),
|
|
21
|
+
children: _.map((t) => {
|
|
22
|
+
let a = v !== null && t === v;
|
|
23
|
+
return /* @__PURE__ */ l("div", {
|
|
24
|
+
ref: a ? g : void 0,
|
|
25
|
+
className: e(n, a ? r : i),
|
|
26
|
+
onClick: () => d(t),
|
|
27
|
+
role: "option",
|
|
28
|
+
"aria-selected": a,
|
|
29
|
+
children: t.toString().padStart(2, "0")
|
|
30
|
+
}, t);
|
|
31
|
+
})
|
|
32
|
+
});
|
|
52
33
|
};
|
|
34
|
+
//#endregion
|
|
35
|
+
export { u as TimePickerScroll };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { Dayjs } from 'dayjs';
|
|
3
|
+
import { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';
|
|
4
|
+
import { TimeFormat } from '../utils/format-utils';
|
|
5
|
+
export type { ShortcutItem };
|
|
6
|
+
export interface TimePickerProps {
|
|
7
|
+
value: Dayjs | null;
|
|
8
|
+
onChange: (time: Dayjs | null) => void;
|
|
9
|
+
timeFormat?: TimeFormat;
|
|
10
|
+
format?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
shortcuts?: ShortcutItem[];
|
|
13
|
+
defaultDate?: Dayjs;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const TimePicker: FC<TimePickerProps>;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { cn as e } from "../../../../../lib/utils.js";
|
|
2
|
+
import { Button as t } from "../../button/button.js";
|
|
3
|
+
import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../../popover/popover.js";
|
|
4
|
+
import { DateTimeInput as a } from "../shared/date-time-input/date-time-input.js";
|
|
5
|
+
import { ShortcutsPanel as o } from "../shared/shortcuts-panel/shortcuts-panel.js";
|
|
6
|
+
import { TimePickerPanel as s } from "../shared/time-picker-panel/time-picker-panel.js";
|
|
7
|
+
import { useTimePicker as c } from "./use-time-picker.js";
|
|
8
|
+
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
9
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/time-picker/time-picker.tsx
|
|
10
|
+
var d = ({ value: d, onChange: f, timeFormat: p = "24h", format: m, placeholder: h, shortcuts: g, defaultDate: _, className: v }) => {
|
|
11
|
+
let y = m ?? (p === "12h" ? "h:mm A" : "HH:mm"), { isOpen: b, hour: x, minute: S, amPm: C, displayValue: w, handleOpenChange: T, handleApply: E, handleHourChange: D, handleMinuteChange: O, handleAmPmChange: k, handleApplyShortcut: A, inputRef: j, popoverRef: M } = c({
|
|
12
|
+
value: d,
|
|
13
|
+
onChange: f,
|
|
14
|
+
timeFormat: p,
|
|
15
|
+
defaultDate: _
|
|
16
|
+
});
|
|
17
|
+
return /* @__PURE__ */ l("div", {
|
|
18
|
+
"data-slot": "time-picker",
|
|
19
|
+
className: e("relative w-full", v),
|
|
20
|
+
children: /* @__PURE__ */ u(n, {
|
|
21
|
+
open: b,
|
|
22
|
+
onOpenChange: T,
|
|
23
|
+
children: [/* @__PURE__ */ l(i, {
|
|
24
|
+
render: /* @__PURE__ */ l("div", {
|
|
25
|
+
ref: j,
|
|
26
|
+
className: "w-full"
|
|
27
|
+
}),
|
|
28
|
+
children: /* @__PURE__ */ l(a, {
|
|
29
|
+
value: w,
|
|
30
|
+
format: y,
|
|
31
|
+
placeholder: h,
|
|
32
|
+
isOpen: b,
|
|
33
|
+
variant: "time",
|
|
34
|
+
ariaLabel: "Time picker"
|
|
35
|
+
})
|
|
36
|
+
}), /* @__PURE__ */ l(r, {
|
|
37
|
+
ref: M,
|
|
38
|
+
className: "rounded-xl w-auto p-0",
|
|
39
|
+
side: "bottom",
|
|
40
|
+
align: "start",
|
|
41
|
+
children: /* @__PURE__ */ u("div", {
|
|
42
|
+
"data-slot": "time-picker-content",
|
|
43
|
+
className: "flex flex-col",
|
|
44
|
+
children: [/* @__PURE__ */ u("div", {
|
|
45
|
+
className: "flex flex-row",
|
|
46
|
+
children: [g && g.length > 0 && /* @__PURE__ */ l(o, {
|
|
47
|
+
shortcuts: g,
|
|
48
|
+
onShortcutClick: A
|
|
49
|
+
}), p === "12h" ? /* @__PURE__ */ l(s, {
|
|
50
|
+
hour: x,
|
|
51
|
+
minute: S,
|
|
52
|
+
amPm: C,
|
|
53
|
+
timeFormat: "12h",
|
|
54
|
+
onHourChange: D,
|
|
55
|
+
onMinuteChange: O,
|
|
56
|
+
onAmPmChange: k
|
|
57
|
+
}) : /* @__PURE__ */ l(s, {
|
|
58
|
+
hour: x,
|
|
59
|
+
minute: S,
|
|
60
|
+
timeFormat: "24h",
|
|
61
|
+
onHourChange: D,
|
|
62
|
+
onMinuteChange: O
|
|
63
|
+
})]
|
|
64
|
+
}), /* @__PURE__ */ l("div", {
|
|
65
|
+
className: "flex p-2 border-t border-border",
|
|
66
|
+
children: /* @__PURE__ */ l(t, {
|
|
67
|
+
variant: "secondary",
|
|
68
|
+
className: "w-full",
|
|
69
|
+
onClick: E,
|
|
70
|
+
children: "Apply"
|
|
71
|
+
})
|
|
72
|
+
})]
|
|
73
|
+
})
|
|
74
|
+
})]
|
|
75
|
+
})
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
//#endregion
|
|
79
|
+
export { d as TimePicker };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Dayjs } from 'dayjs';
|
|
2
|
+
import { TimeFormat } from '../utils/format-utils';
|
|
3
|
+
export interface UseTimePickerProps {
|
|
4
|
+
value: Dayjs | null;
|
|
5
|
+
onChange: (time: Dayjs | null) => void;
|
|
6
|
+
timeFormat?: TimeFormat;
|
|
7
|
+
defaultDate?: Dayjs;
|
|
8
|
+
}
|
|
9
|
+
export interface UseTimePickerReturn {
|
|
10
|
+
isOpen: boolean;
|
|
11
|
+
hour: number;
|
|
12
|
+
minute: number;
|
|
13
|
+
amPm: 'AM' | 'PM';
|
|
14
|
+
displayValue: Dayjs | null;
|
|
15
|
+
handleOpenChange: (open: boolean) => void;
|
|
16
|
+
handleApply: () => void;
|
|
17
|
+
handleHourChange: (hour: number) => void;
|
|
18
|
+
handleMinuteChange: (minute: number) => void;
|
|
19
|
+
handleAmPmChange: (amPm: 'AM' | 'PM') => void;
|
|
20
|
+
handleApplyShortcut: (shortcutValue: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
|
|
21
|
+
inputRef: React.RefObject<HTMLDivElement>;
|
|
22
|
+
popoverRef: React.RefObject<HTMLDivElement>;
|
|
23
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { usePopoverState as e } from "../shared/hooks/use-popover-state.js";
|
|
2
|
+
import { useTimeState as t } from "../shared/hooks/use-time-state.js";
|
|
3
|
+
import { useCallback as n, useEffect as r, useRef as i } from "react";
|
|
4
|
+
import a from "dayjs";
|
|
5
|
+
//#region libs/aura/src/components/ui/core/date-time-pickers/time-picker/use-time-picker.ts
|
|
6
|
+
var o = ({ value: o, onChange: s, timeFormat: c = "24h", defaultDate: l = a() }) => {
|
|
7
|
+
let u = i(() => {}), { isOpen: d, setIsOpen: f, popoverRef: p, inputRef: m } = e({ onBackspace: n(() => u.current(), []) }), { hour: h, minute: g, amPm: _, hour24: v, handleHourChange: y, handleMinuteChange: b, handleAmPmChange: x, resetTime: S } = t({
|
|
8
|
+
initialHour: o?.hour() ?? 9,
|
|
9
|
+
initialMinute: o?.minute() ?? 0,
|
|
10
|
+
timeFormat: c
|
|
11
|
+
}), C = o ?? l, w = (e) => e.hour(v).minute(g).second(0).millisecond(0), T = (e) => C.hour(e.hour()).minute(e.minute()).second(0).millisecond(0), E = d ? w(C) : o, D = () => {
|
|
12
|
+
S(o?.hour() ?? 9, o?.minute() ?? 0);
|
|
13
|
+
}, O = () => {
|
|
14
|
+
o !== null && (s(null), D());
|
|
15
|
+
};
|
|
16
|
+
return r(() => {
|
|
17
|
+
u.current = O;
|
|
18
|
+
}), {
|
|
19
|
+
isOpen: d,
|
|
20
|
+
hour: h,
|
|
21
|
+
minute: g,
|
|
22
|
+
amPm: _,
|
|
23
|
+
displayValue: E,
|
|
24
|
+
handleOpenChange: (e) => {
|
|
25
|
+
D(), f(e);
|
|
26
|
+
},
|
|
27
|
+
handleApply: () => {
|
|
28
|
+
s(w(C)), f(!1);
|
|
29
|
+
},
|
|
30
|
+
handleHourChange: y,
|
|
31
|
+
handleMinuteChange: b,
|
|
32
|
+
handleAmPmChange: x,
|
|
33
|
+
handleApplyShortcut: (e) => {
|
|
34
|
+
let t = Array.isArray(e) ? e[0] : e;
|
|
35
|
+
s(t ? T(t) : null), f(!1);
|
|
36
|
+
},
|
|
37
|
+
inputRef: m,
|
|
38
|
+
popoverRef: p
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
//#endregion
|
|
42
|
+
export { o as useTimePicker };
|
|
@@ -1,52 +1,39 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
r.
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
function N(e, t) {
|
|
41
|
-
return !e || !t ? !1 : e.isSame(t, "day");
|
|
42
|
-
}
|
|
43
|
-
export {
|
|
44
|
-
p as getCalendarDays,
|
|
45
|
-
y as getWeekNumber,
|
|
46
|
-
W as getWeekNumbers,
|
|
47
|
-
S as getWeekdayNames,
|
|
48
|
-
g as isDateInRange,
|
|
49
|
-
b as isOutsideMonth,
|
|
50
|
-
N as isSameDay,
|
|
51
|
-
M as isToday
|
|
52
|
-
};
|
|
1
|
+
import e from "dayjs";
|
|
2
|
+
import t from "dayjs/plugin/isBetween.js";
|
|
3
|
+
import n from "dayjs/plugin/isSameOrBefore.js";
|
|
4
|
+
import r from "dayjs/plugin/weekOfYear.js";
|
|
5
|
+
e.extend(t), e.extend(n), e.extend(r);
|
|
6
|
+
function i(e, t) {
|
|
7
|
+
let n = t ? e.locale(t) : e, r = n.startOf("month").startOf("week"), i = n.endOf("month").endOf("week"), a = [], o = r;
|
|
8
|
+
for (; o.isSameOrBefore(i, "day");) a.push(o), o = o.add(1, "day");
|
|
9
|
+
return a;
|
|
10
|
+
}
|
|
11
|
+
function a(e, t, n) {
|
|
12
|
+
return !t || !n || !e.isValid() || !t.isValid() || !n.isValid() || t.isAfter(n, "day") ? !1 : e.isBetween(t, n, "day", "[]");
|
|
13
|
+
}
|
|
14
|
+
function o(e, t) {
|
|
15
|
+
return e.month() !== t.month();
|
|
16
|
+
}
|
|
17
|
+
function s(t, n) {
|
|
18
|
+
return t.isSame(n ?? e(), "day");
|
|
19
|
+
}
|
|
20
|
+
function c(t, n) {
|
|
21
|
+
let r = n || e(), i = (t ? r.locale(t) : r).startOf("week");
|
|
22
|
+
return Array.from({ length: 7 }, (e, t) => i.add(t, "day").format("dd"));
|
|
23
|
+
}
|
|
24
|
+
function l(e) {
|
|
25
|
+
return e.week();
|
|
26
|
+
}
|
|
27
|
+
function u(e) {
|
|
28
|
+
let t = [];
|
|
29
|
+
for (let n = 0; n < e.length; n += 7) {
|
|
30
|
+
let r = e[n];
|
|
31
|
+
r && t.push(l(r));
|
|
32
|
+
}
|
|
33
|
+
return t;
|
|
34
|
+
}
|
|
35
|
+
function d(e, t) {
|
|
36
|
+
return !e || !t ? !1 : e.isSame(t, "day");
|
|
37
|
+
}
|
|
38
|
+
//#endregion
|
|
39
|
+
export { i as getCalendarDays, l as getWeekNumber, u as getWeekNumbers, c as getWeekdayNames, a as isDateInRange, o as isOutsideMonth, d as isSameDay, s as isToday };
|