@povio/ui 0.0.9 → 0.1.0
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/components/buttons/Button/Button.d.ts +3 -2
- package/dist/components/buttons/Button/Button.js +6 -1
- package/dist/components/buttons/IconButton/IconButton.d.ts +3 -2
- package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts +3 -2
- package/dist/components/buttons/SplitButton/SplitButton.d.ts +3 -2
- package/dist/components/buttons/TextButton/TextButton.d.ts +3 -2
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +53 -45
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +86 -77
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +63 -55
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +46 -38
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +1 -0
- package/dist/components/inputs/DateTime/shared/TimePickerInput.js +1 -0
- package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +1 -1
- package/dist/components/inputs/Input/NumberInput/NumberInput.js +30 -21
- package/dist/components/inputs/Input/TextArea/TextArea.js +41 -32
- package/dist/components/inputs/Input/TextInput/TextInput.js +32 -40
- package/dist/components/inputs/Selection/shared/SelectBase.d.ts +1 -0
- package/dist/components/inputs/Selection/shared/SelectBase.js +3 -1
- package/dist/components/inputs/Selection/shared/SelectDesktop.js +72 -60
- package/dist/components/inputs/Selection/shared/SelectInput.d.ts +2 -2
- package/dist/components/inputs/Selection/shared/SelectInput.js +3 -0
- package/dist/components/inputs/Selection/shared/SelectInputTags.d.ts +2 -1
- package/dist/components/inputs/Selection/shared/SelectInputTags.js +43 -16
- package/dist/components/inputs/Selection/shared/SelectListBox.js +74 -55
- package/dist/components/inputs/Selection/shared/SelectListBoxItem.js +1 -1
- package/dist/components/inputs/Selection/shared/SelectMobile.js +6 -2
- package/dist/components/inputs/shared/TooltipWrapper.d.ts +8 -0
- package/dist/components/inputs/shared/TooltipWrapper.js +21 -0
- package/dist/components/inputs/shared/label.cva.js +1 -1
- package/dist/components/overlays/Tooltip/Tooltip.d.ts +2 -1
- package/dist/components/overlays/Tooltip/Tooltip.js +12 -2
- package/dist/components/table/HeaderText.js +1 -1
- package/dist/components/table/table.cva.js +6 -6
- package/dist/components/text/Link/Link.d.ts +3 -1
- package/dist/components/text/Link/Link.js +7 -1
- package/dist/config/link.context.d.ts +10 -0
- package/dist/config/link.context.js +19 -0
- package/dist/config/uiConfig.context.d.ts +1 -1
- package/dist/config/uiConfig.context.js +2 -1
- package/dist/hooks/useTableNav.js +0 -15
- package/dist/index.d.ts +2 -4
- package/dist/index.js +3 -3
- package/dist/utils/vendor/acl/AclGuard.d.ts +5 -5
- package/dist/utils/vendor/acl/AclGuard.js +2 -3
- package/dist/utils/vendor/auth/auth.context.d.ts +2 -1
- package/dist/utils/vendor/auth/auth.context.js +2 -0
- package/package.json +1 -1
- package/dist/utils/vendor/auth/withPrivateAuthGuard.d.ts +0 -6
- package/dist/utils/vendor/auth/withPrivateAuthGuard.js +0 -17
|
@@ -43,63 +43,82 @@ const SelectListBox = ({
|
|
|
43
43
|
onChange(ids[0]);
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
layoutOptions: {
|
|
51
|
-
estimatedRowHeight: 40,
|
|
52
|
-
...virtualizerOptions
|
|
53
|
-
},
|
|
54
|
-
children: /* @__PURE__ */ jsx(
|
|
55
|
-
ListBox,
|
|
46
|
+
const renderItem = (item) => {
|
|
47
|
+
if (item.isSelectAllItem) {
|
|
48
|
+
return /* @__PURE__ */ jsx(
|
|
49
|
+
SelectListBoxItemSelectAll,
|
|
56
50
|
{
|
|
57
|
-
...
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
)
|
|
51
|
+
...item
|
|
52
|
+
},
|
|
53
|
+
item.id
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
if (item.isLoadingItem) {
|
|
57
|
+
return /* @__PURE__ */ jsx(
|
|
58
|
+
SelectListBoxLoadingItem,
|
|
59
|
+
{
|
|
60
|
+
...item,
|
|
61
|
+
onLoadMore
|
|
62
|
+
},
|
|
63
|
+
item.id
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
return /* @__PURE__ */ jsx(
|
|
67
|
+
SelectListBoxItem,
|
|
68
|
+
{
|
|
69
|
+
...item,
|
|
70
|
+
isSearchable,
|
|
71
|
+
isNewItem: item.isNewItem,
|
|
72
|
+
newItemRender
|
|
73
|
+
},
|
|
74
|
+
item.id
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
if (virtualizerOptions || listItems.length > 100) {
|
|
78
|
+
return /* @__PURE__ */ jsx(
|
|
79
|
+
Virtualizer,
|
|
80
|
+
{
|
|
81
|
+
layout: ListLayout,
|
|
82
|
+
layoutOptions: virtualizerOptions,
|
|
83
|
+
children: /* @__PURE__ */ jsx(
|
|
84
|
+
ListBox,
|
|
85
|
+
{
|
|
86
|
+
...props,
|
|
87
|
+
"aria-label": label,
|
|
88
|
+
selectionMode,
|
|
89
|
+
className: clsx(
|
|
90
|
+
"flex-1 outline-none [&>div:last-child>*]:border-b-0",
|
|
91
|
+
isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
|
|
92
|
+
className
|
|
93
|
+
),
|
|
94
|
+
items: listItems,
|
|
95
|
+
selectedKeys: selectedIds,
|
|
96
|
+
onSelectionChange,
|
|
97
|
+
escapeKeyBehavior: "none",
|
|
98
|
+
shouldSelectOnPressUp: true,
|
|
99
|
+
children: renderItem
|
|
100
100
|
}
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
return /* @__PURE__ */ jsx(
|
|
106
|
+
ListBox,
|
|
107
|
+
{
|
|
108
|
+
...props,
|
|
109
|
+
"aria-label": label,
|
|
110
|
+
selectionMode,
|
|
111
|
+
className: clsx(
|
|
112
|
+
"flex-1 outline-none [&>div:last-child]:border-b-0",
|
|
113
|
+
isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
|
|
114
|
+
className
|
|
115
|
+
),
|
|
116
|
+
items: listItems,
|
|
117
|
+
selectedKeys: selectedIds,
|
|
118
|
+
onSelectionChange,
|
|
119
|
+
escapeKeyBehavior: "none",
|
|
120
|
+
shouldSelectOnPressUp: true,
|
|
121
|
+
children: renderItem
|
|
103
122
|
}
|
|
104
123
|
);
|
|
105
124
|
};
|
|
@@ -66,7 +66,7 @@ const SelectListBoxItem = ({
|
|
|
66
66
|
};
|
|
67
67
|
const selectListBoxItemClass = clsx(
|
|
68
68
|
"group flex cursor-pointer items-center gap-2 px-list-side-item py-list-height-item",
|
|
69
|
-
"border-b border-b-elevation-outline-default-1 outline-none
|
|
69
|
+
"border-b border-b-elevation-outline-default-1 outline-none",
|
|
70
70
|
"font-labels-default text-interactive-text-secondary-idle text-label-2",
|
|
71
71
|
"hover:text-interactive-text-secondary-hover",
|
|
72
72
|
"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
|
|
@@ -39,7 +39,9 @@ const SelectMobile = ({
|
|
|
39
39
|
hideDropdownIcon,
|
|
40
40
|
isSearchable,
|
|
41
41
|
isClearable,
|
|
42
|
-
as
|
|
42
|
+
as,
|
|
43
|
+
collapseAfter,
|
|
44
|
+
selectedTagsType
|
|
43
45
|
} = props;
|
|
44
46
|
const formFieldProps = {
|
|
45
47
|
error,
|
|
@@ -103,7 +105,9 @@ const SelectMobile = ({
|
|
|
103
105
|
showSelectionContent,
|
|
104
106
|
onBlur,
|
|
105
107
|
fieldProps,
|
|
106
|
-
headerProps
|
|
108
|
+
headerProps,
|
|
109
|
+
collapseAfter,
|
|
110
|
+
selectedTagsType
|
|
107
111
|
}
|
|
108
112
|
),
|
|
109
113
|
/* @__PURE__ */ jsx(
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TextInputProps } from '../Input/TextInput/TextInput';
|
|
2
|
+
interface TooltipWrapperProps {
|
|
3
|
+
error?: string;
|
|
4
|
+
as?: TextInputProps["as"];
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const TooltipWrapper: (props: TooltipWrapperProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null | undefined;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
|
|
3
|
+
const TooltipWrapper = (props) => {
|
|
4
|
+
if (props.as !== "inline") {
|
|
5
|
+
return props.children;
|
|
6
|
+
}
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
Tooltip,
|
|
9
|
+
{
|
|
10
|
+
text: props.error || void 0,
|
|
11
|
+
placement: "bottom",
|
|
12
|
+
color: "error",
|
|
13
|
+
hidden: !props.error,
|
|
14
|
+
isNonInteractiveTrigger: true,
|
|
15
|
+
children: /* @__PURE__ */ jsx("div", { children: props.children })
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
TooltipWrapper
|
|
21
|
+
};
|
|
@@ -7,5 +7,6 @@ export interface TooltipProps extends PropsWithChildren<AriaTooltipProps>, Toolt
|
|
|
7
7
|
delay?: number;
|
|
8
8
|
closeDelay?: number;
|
|
9
9
|
isNonInteractiveTrigger?: boolean;
|
|
10
|
+
triggerClassName?: string;
|
|
10
11
|
}
|
|
11
|
-
export declare const Tooltip: ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, ...tooltipProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const Tooltip: ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, ...tooltipProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,7 +6,7 @@ import { PointerHorizontalIcon } from "../../../assets/icons/PointerHorizontal.j
|
|
|
6
6
|
import { PointerVerticalIcon } from "../../../assets/icons/PointerVertical.js";
|
|
7
7
|
import { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva } from "./tooltip.cva.js";
|
|
8
8
|
import { Typography } from "../../text/Typography/Typography.js";
|
|
9
|
-
const CustomTrigger = ({ children }) => {
|
|
9
|
+
const CustomTrigger = ({ children, className }) => {
|
|
10
10
|
const ref = useRef(null);
|
|
11
11
|
const { focusableProps } = useFocusable({}, ref);
|
|
12
12
|
return /* @__PURE__ */ jsx(
|
|
@@ -15,6 +15,7 @@ const CustomTrigger = ({ children }) => {
|
|
|
15
15
|
ref,
|
|
16
16
|
...focusableProps,
|
|
17
17
|
tabIndex: 0,
|
|
18
|
+
className,
|
|
18
19
|
children
|
|
19
20
|
}
|
|
20
21
|
);
|
|
@@ -27,6 +28,7 @@ const Tooltip = ({
|
|
|
27
28
|
closeDelay,
|
|
28
29
|
color,
|
|
29
30
|
isNonInteractiveTrigger,
|
|
31
|
+
triggerClassName,
|
|
30
32
|
...tooltipProps
|
|
31
33
|
}) => {
|
|
32
34
|
const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment;
|
|
@@ -37,7 +39,15 @@ const Tooltip = ({
|
|
|
37
39
|
closeDelay: closeDelay ?? 0,
|
|
38
40
|
isDisabled,
|
|
39
41
|
children: [
|
|
40
|
-
/* @__PURE__ */ jsx(
|
|
42
|
+
/* @__PURE__ */ jsx(
|
|
43
|
+
Trigger,
|
|
44
|
+
{
|
|
45
|
+
...isNonInteractiveTrigger && {
|
|
46
|
+
className: triggerClassName
|
|
47
|
+
},
|
|
48
|
+
children
|
|
49
|
+
}
|
|
50
|
+
),
|
|
41
51
|
/* @__PURE__ */ jsxs(
|
|
42
52
|
Tooltip$1,
|
|
43
53
|
{
|
|
@@ -4,7 +4,7 @@ const HeaderText = ({ children }) => /* @__PURE__ */ jsx(
|
|
|
4
4
|
Typography,
|
|
5
5
|
{
|
|
6
6
|
variant: "default",
|
|
7
|
-
size: "label-
|
|
7
|
+
size: "label-1",
|
|
8
8
|
as: "span",
|
|
9
9
|
className: "overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1",
|
|
10
10
|
children
|
|
@@ -20,7 +20,9 @@ const tableRow = cva(
|
|
|
20
20
|
);
|
|
21
21
|
const tableHeadRow = cva(["h-8 w-full"]);
|
|
22
22
|
const tableHeadData = cva(
|
|
23
|
-
[
|
|
23
|
+
[
|
|
24
|
+
"border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left"
|
|
25
|
+
],
|
|
24
26
|
{
|
|
25
27
|
variants: {
|
|
26
28
|
hasRightBorder: {
|
|
@@ -37,11 +39,9 @@ const tableData = cva(
|
|
|
37
39
|
[
|
|
38
40
|
"relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2 py-2",
|
|
39
41
|
"border-b border-b-elevation-outline-default-1",
|
|
40
|
-
"has-[
|
|
41
|
-
"has-[
|
|
42
|
-
"has-[
|
|
43
|
-
"has-[input]:invalid:border-b-input-outlined-outline-error",
|
|
44
|
-
"has-[input]:disabled:hover:border-transparent"
|
|
42
|
+
"has-[*>[data-hovered]:not([data-disabled])]:hover:border-b-input-outlined-outline-hover",
|
|
43
|
+
"has-[*>[data-invalid]]:border-b-input-outlined-outline-error!",
|
|
44
|
+
"has-[*>[data-focused]]:border-b-input-outlined-outline-active"
|
|
45
45
|
],
|
|
46
46
|
{
|
|
47
47
|
variants: {
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { LinkProps as AriaLinkProps } from 'react-aria-components';
|
|
3
3
|
import { LinkVariantProps } from './link.cva';
|
|
4
|
-
export interface
|
|
4
|
+
export interface LinkNavigationProps extends AriaLinkProps {
|
|
5
|
+
}
|
|
6
|
+
export interface LinkProps extends PropsWithChildren<LinkNavigationProps>, LinkVariantProps {
|
|
5
7
|
className?: string;
|
|
6
8
|
}
|
|
7
9
|
export declare const Link: ({ variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Link as Link$1 } from "react-aria-components";
|
|
3
3
|
import { link } from "./link.cva.js";
|
|
4
|
+
import { LinkContext } from "../../../config/link.context.js";
|
|
4
5
|
import { UIStyle } from "../../../config/uiStyle.context.js";
|
|
5
6
|
const Link = ({ variant, ...props }) => {
|
|
7
|
+
const linkContext = LinkContext.useLinkContext();
|
|
6
8
|
const uiStyle = UIStyle.useConfig();
|
|
7
9
|
const linkCva = uiStyle?.link?.cva ?? link;
|
|
10
|
+
const LinkComponent = linkContext?.LinkComponent ?? Link$1;
|
|
11
|
+
if (!props.to && props.href) {
|
|
12
|
+
props.to = props.href;
|
|
13
|
+
}
|
|
8
14
|
return /* @__PURE__ */ jsx(
|
|
9
|
-
|
|
15
|
+
LinkComponent,
|
|
10
16
|
{
|
|
11
17
|
...props,
|
|
12
18
|
className: linkCva({ variant, className: props.className })
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ComponentType, PropsWithChildren } from 'react';
|
|
2
|
+
import { LinkNavigationProps } from '../components/text/Link/Link';
|
|
3
|
+
interface LinkContextValue {
|
|
4
|
+
LinkComponent?: ComponentType<LinkNavigationProps>;
|
|
5
|
+
}
|
|
6
|
+
export declare namespace LinkContext {
|
|
7
|
+
const LinkContextProvider: ({ children, LinkComponent }: PropsWithChildren<LinkContextValue>) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
const useLinkContext: () => LinkContextValue;
|
|
9
|
+
}
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, use } from "react";
|
|
3
|
+
var LinkContext;
|
|
4
|
+
((LinkContext2) => {
|
|
5
|
+
const LinkContextInternal = createContext(null);
|
|
6
|
+
LinkContext2.LinkContextProvider = ({ children, LinkComponent }) => {
|
|
7
|
+
const value = {
|
|
8
|
+
LinkComponent
|
|
9
|
+
};
|
|
10
|
+
return /* @__PURE__ */ jsx(LinkContextInternal.Provider, { value, children });
|
|
11
|
+
};
|
|
12
|
+
LinkContext2.useLinkContext = () => {
|
|
13
|
+
const context = use(LinkContextInternal);
|
|
14
|
+
return context;
|
|
15
|
+
};
|
|
16
|
+
})(LinkContext || (LinkContext = {}));
|
|
17
|
+
export {
|
|
18
|
+
LinkContext
|
|
19
|
+
};
|
|
@@ -16,7 +16,7 @@ export declare namespace UIConfig {
|
|
|
16
16
|
numberInput: Pick<NumberInputProps, "formatOptions">;
|
|
17
17
|
radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
|
|
18
18
|
checkbox: Pick<CheckboxProps, "variant">;
|
|
19
|
-
select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "selectedTagsType">;
|
|
19
|
+
select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType">;
|
|
20
20
|
toggle: Pick<ToggleProps, "variant">;
|
|
21
21
|
slider: Pick<SliderProps, "minValue" | "maxValue">;
|
|
22
22
|
dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros">;
|
|
@@ -49,9 +49,7 @@ class DataGridNav {
|
|
|
49
49
|
}
|
|
50
50
|
/** Used as a keyboard listener for key down */
|
|
51
51
|
tableKeyDown(e) {
|
|
52
|
-
this.debugLog("tableKeyDown", `Key pressed: ${e.key}`);
|
|
53
52
|
if (this.disabled) {
|
|
54
|
-
this.debugLog("tableKeyDown", "interaction is disabled");
|
|
55
53
|
return;
|
|
56
54
|
}
|
|
57
55
|
if ("ArrowDown" === e.key || "ArrowUp" === e.key || "ArrowLeft" === e.key || "ArrowRight" === e.key) {
|
|
@@ -65,14 +63,11 @@ class DataGridNav {
|
|
|
65
63
|
}
|
|
66
64
|
const cell = e.target.parentElement?.closest(`${this.selectors.Cell},${this.selectors.Row}`);
|
|
67
65
|
if (!cell) {
|
|
68
|
-
this.debugLog("tableKeyDown", "cell not found");
|
|
69
66
|
return;
|
|
70
67
|
}
|
|
71
68
|
if (cell.matches(this.selectors.Cell)) {
|
|
72
|
-
this.debugLog("tableKeyDown", "event captured in cell");
|
|
73
69
|
this.cellNavigation(e);
|
|
74
70
|
} else {
|
|
75
|
-
this.debugLog("tableKeyDown", "event captured in cell");
|
|
76
71
|
this.gridNavigation(e);
|
|
77
72
|
}
|
|
78
73
|
}
|
|
@@ -93,7 +88,6 @@ class DataGridNav {
|
|
|
93
88
|
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
|
|
94
89
|
const cell = e.target.closest(this.selectors.Cell);
|
|
95
90
|
if (!cell) {
|
|
96
|
-
this.debugLog("cellNavigation", "cell not found");
|
|
97
91
|
return;
|
|
98
92
|
}
|
|
99
93
|
const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
|
|
@@ -108,7 +102,6 @@ class DataGridNav {
|
|
|
108
102
|
if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
|
|
109
103
|
const cell = e.target.closest(this.selectors.Cell);
|
|
110
104
|
if (!cell) {
|
|
111
|
-
this.debugLog("cellNavigation", "cell not found");
|
|
112
105
|
return;
|
|
113
106
|
}
|
|
114
107
|
const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
|
|
@@ -204,7 +197,6 @@ class DataGridNav {
|
|
|
204
197
|
const row = e.target.closest(this.selectors.Row);
|
|
205
198
|
const siblings = row.parentElement?.children;
|
|
206
199
|
if (!siblings) {
|
|
207
|
-
this.debugLog("cellNavigation", "siblings not found");
|
|
208
200
|
return;
|
|
209
201
|
}
|
|
210
202
|
const rowToFocus = secondKey === "Home" ? siblings[0] : siblings[siblings.length - 1];
|
|
@@ -225,13 +217,11 @@ class DataGridNav {
|
|
|
225
217
|
if (row && cell) {
|
|
226
218
|
const position = this.getColumnIndex(cell);
|
|
227
219
|
if (position === void 0) {
|
|
228
|
-
this.debugLog("cellNavigation", "position not found");
|
|
229
220
|
return;
|
|
230
221
|
}
|
|
231
222
|
const direction = e.key === "PageUp" ? "prev" : "next";
|
|
232
223
|
const siblings = row.parentElement?.children;
|
|
233
224
|
if (!siblings) {
|
|
234
|
-
this.debugLog("cellNavigation", "siblings not found");
|
|
235
225
|
return;
|
|
236
226
|
}
|
|
237
227
|
let destinationRow;
|
|
@@ -270,10 +260,7 @@ class DataGridNav {
|
|
|
270
260
|
if (row && cell) {
|
|
271
261
|
const cellPosition = this.getColumnIndex(cell);
|
|
272
262
|
const rowPosition = this.getRowIndex(row);
|
|
273
|
-
this.debugLog("gridNavigation", `Initial row position: ${rowPosition}`);
|
|
274
|
-
this.debugLog("gridNavigation", `Initial cell position: ${cellPosition}`);
|
|
275
263
|
if (cellPosition === void 0 || rowPosition === void 0) {
|
|
276
|
-
this.debugLog("verticalCellNavigation", "row or cell position not found");
|
|
277
264
|
return;
|
|
278
265
|
}
|
|
279
266
|
const direction = e.key === "ArrowUp" ? "prev" : "next";
|
|
@@ -346,7 +333,6 @@ class DataGridNav {
|
|
|
346
333
|
position++;
|
|
347
334
|
}
|
|
348
335
|
if (siblings[position] === void 0) {
|
|
349
|
-
this.debugLog("getColumnIndex", "position finding was not successful");
|
|
350
336
|
return void 0;
|
|
351
337
|
}
|
|
352
338
|
return position;
|
|
@@ -365,7 +351,6 @@ class DataGridNav {
|
|
|
365
351
|
position++;
|
|
366
352
|
}
|
|
367
353
|
if (siblings[position] === void 0) {
|
|
368
|
-
this.debugLog("getRowIndex", "position finding was not successful");
|
|
369
354
|
return void 0;
|
|
370
355
|
}
|
|
371
356
|
return position;
|
package/dist/index.d.ts
CHANGED
|
@@ -143,7 +143,7 @@ export { PaginatedTable } from './components/table/PaginatedTable';
|
|
|
143
143
|
export type { TableProps, TableWrapperProps } from './components/table/Table';
|
|
144
144
|
export { Table } from './components/table/Table';
|
|
145
145
|
export type { TableRowVariantProps } from './components/table/table.cva';
|
|
146
|
-
export type { LinkProps } from './components/text/Link/Link';
|
|
146
|
+
export type { LinkNavigationProps, LinkProps } from './components/text/Link/Link';
|
|
147
147
|
export { Link } from './components/text/Link/Link';
|
|
148
148
|
export type { LinkVariantProps } from './components/text/Link/link.cva';
|
|
149
149
|
export type { TagProps } from './components/text/Tag/Tag';
|
|
@@ -154,6 +154,7 @@ export { Typography } from './components/text/Typography/Typography';
|
|
|
154
154
|
export type { TypographyVariantProps } from './components/text/Typography/typography.cva';
|
|
155
155
|
export { Confirmation } from './config/confirmation.context';
|
|
156
156
|
export { ns, resources } from './config/i18n';
|
|
157
|
+
export { LinkContext } from './config/link.context';
|
|
157
158
|
export { UIRouter } from './config/router.context';
|
|
158
159
|
export { UIConfig } from './config/uiConfig.context';
|
|
159
160
|
export { UIStyle } from './config/uiStyle.context';
|
|
@@ -200,11 +201,8 @@ export { createAclGuard } from './utils/vendor/acl/AclGuard';
|
|
|
200
201
|
export { AbilityContext } from './utils/vendor/acl/ability.context';
|
|
201
202
|
export type { AppAbilities, AppAbility } from './utils/vendor/acl/appAbility.types';
|
|
202
203
|
export { Can } from './utils/vendor/acl/Can';
|
|
203
|
-
export type { AuthGuardProps } from './utils/vendor/auth/AuthGuard';
|
|
204
204
|
export { AuthGuard } from './utils/vendor/auth/AuthGuard';
|
|
205
205
|
export { AuthContext } from './utils/vendor/auth/auth.context';
|
|
206
|
-
export type { WithPrivateAuthGuardProps } from './utils/vendor/auth/withPrivateAuthGuard';
|
|
207
|
-
export { withPrivateAuthGuard } from './utils/vendor/auth/withPrivateAuthGuard';
|
|
208
206
|
export type { GeneralErrorCodes } from './utils/vendor/error-handling';
|
|
209
207
|
export { ApplicationException, ErrorHandler, SharedErrorHandler } from './utils/vendor/error-handling';
|
|
210
208
|
export type { RequestConfig, RequestInfo, Response, RestClient as IRestClient, } from './utils/vendor/rest-client.types';
|
package/dist/index.js
CHANGED
|
@@ -93,6 +93,7 @@ import { Tag } from "./components/text/Tag/Tag.js";
|
|
|
93
93
|
import { Typography } from "./components/text/Typography/Typography.js";
|
|
94
94
|
import { Confirmation } from "./config/confirmation.context.js";
|
|
95
95
|
import { ns, resources } from "./config/i18n.js";
|
|
96
|
+
import { LinkContext } from "./config/link.context.js";
|
|
96
97
|
import { UIRouter } from "./config/router.context.js";
|
|
97
98
|
import { UIConfig } from "./config/uiConfig.context.js";
|
|
98
99
|
import { UIStyle } from "./config/uiStyle.context.js";
|
|
@@ -133,7 +134,6 @@ import { AbilityContext } from "./utils/vendor/acl/ability.context.js";
|
|
|
133
134
|
import { Can } from "./utils/vendor/acl/Can.js";
|
|
134
135
|
import { AuthGuard } from "./utils/vendor/auth/AuthGuard.js";
|
|
135
136
|
import { AuthContext } from "./utils/vendor/auth/auth.context.js";
|
|
136
|
-
import { withPrivateAuthGuard } from "./utils/vendor/auth/withPrivateAuthGuard.js";
|
|
137
137
|
import { ApplicationException, ErrorHandler, SharedErrorHandler } from "./utils/vendor/error-handling.js";
|
|
138
138
|
import { RestInterceptor } from "./utils/vendor/rest-interceptor.js";
|
|
139
139
|
export {
|
|
@@ -199,6 +199,7 @@ export {
|
|
|
199
199
|
Inputs,
|
|
200
200
|
ItalicIcon,
|
|
201
201
|
Link,
|
|
202
|
+
LinkContext,
|
|
202
203
|
LinkIcon,
|
|
203
204
|
Loader,
|
|
204
205
|
Menu,
|
|
@@ -279,6 +280,5 @@ export {
|
|
|
279
280
|
useTableColumnConfig,
|
|
280
281
|
useTableNav,
|
|
281
282
|
useToast,
|
|
282
|
-
useTranslationMemo
|
|
283
|
-
withPrivateAuthGuard
|
|
283
|
+
useTranslationMemo
|
|
284
284
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { AppAbilities } from './appAbility.types';
|
|
3
|
-
|
|
3
|
+
interface AclGuardProps<TAppAbilities extends AppAbilities = AppAbilities> {
|
|
4
4
|
canUse: TAppAbilities;
|
|
5
5
|
redirectTo?: string;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
}
|
|
6
|
+
}
|
|
7
|
+
export declare const createAclGuard: <TAppAbilities extends AppAbilities = AppAbilities>() => ({ canUse, redirectTo, children }: PropsWithChildren<AclGuardProps<TAppAbilities>>) => import('react').ReactNode;
|
|
8
|
+
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { UIRouter } from "../../../config/router.context.js";
|
|
2
2
|
import { AbilityContext } from "./ability.context.js";
|
|
3
|
-
|
|
4
|
-
const createAclGuard = () => withPrivateAuthGuard(({ canUse, redirectTo = "/", children }) => {
|
|
3
|
+
const createAclGuard = () => ({ canUse, redirectTo = "/", children }) => {
|
|
5
4
|
const ability = AbilityContext.useAbility();
|
|
6
5
|
const { replace } = UIRouter.useUIRouter();
|
|
7
6
|
if (!ability.can(canUse[0], canUse[1])) {
|
|
@@ -9,7 +8,7 @@ const createAclGuard = () => withPrivateAuthGuard(({ canUse, redirectTo = "/", c
|
|
|
9
8
|
return null;
|
|
10
9
|
}
|
|
11
10
|
return children;
|
|
12
|
-
}
|
|
11
|
+
};
|
|
13
12
|
export {
|
|
14
13
|
createAclGuard
|
|
15
14
|
};
|
|
@@ -11,11 +11,12 @@ export declare namespace AuthContext {
|
|
|
11
11
|
updateTokens?: (accessToken: string | null, refreshToken?: string | null) => void;
|
|
12
12
|
accessToken?: string | null;
|
|
13
13
|
user?: TUser | null;
|
|
14
|
+
userPromise?: () => Promise<TUser | null>;
|
|
14
15
|
routes?: Routes;
|
|
15
16
|
loadingState?: ReactNode;
|
|
16
17
|
}
|
|
17
18
|
type ProviderProps<TUser = unknown> = Type<TUser>;
|
|
18
|
-
export const Provider: <TUser = unknown>({ isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, routes, loadingState, children, }: PropsWithChildren<ProviderProps<TUser>>) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export const Provider: <TUser = unknown>({ isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, userPromise, routes, loadingState, children, }: PropsWithChildren<ProviderProps<TUser>>) => import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export const useAuth: <TUser = unknown>() => Type<TUser>;
|
|
20
21
|
export {};
|
|
21
22
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { ComponentType, PropsWithChildren } from 'react';
|
|
2
|
-
import { AuthGuardProps } from './AuthGuard';
|
|
3
|
-
export interface WithPrivateAuthGuardProps {
|
|
4
|
-
privateAuthGuardProps?: Omit<AuthGuardProps, "type">;
|
|
5
|
-
}
|
|
6
|
-
export declare const withPrivateAuthGuard: <T extends PropsWithChildren & WithPrivateAuthGuardProps>(WrappedComponent: ComponentType<T & WithPrivateAuthGuardProps>) => ({ privateAuthGuardProps, ...props }: T & WithPrivateAuthGuardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { AuthGuard } from "./AuthGuard.js";
|
|
3
|
-
const withPrivateAuthGuard = (WrappedComponent) => {
|
|
4
|
-
return ({ privateAuthGuardProps, ...props }) => {
|
|
5
|
-
return /* @__PURE__ */ jsx(
|
|
6
|
-
AuthGuard,
|
|
7
|
-
{
|
|
8
|
-
type: "private",
|
|
9
|
-
...privateAuthGuardProps,
|
|
10
|
-
children: /* @__PURE__ */ jsx(WrappedComponent, { ...props })
|
|
11
|
-
}
|
|
12
|
-
);
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
export {
|
|
16
|
-
withPrivateAuthGuard
|
|
17
|
-
};
|