@wallarm-org/design-system 1.1.0 → 1.2.0-rc-fix-inline-edit-blur-commit.1
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/Field/FieldAction.d.ts +5 -1
- package/dist/components/Field/FieldAction.js +2 -2
- package/dist/components/Field/index.d.ts +1 -1
- package/dist/components/InlineEdit/InlineEditActions.d.ts +6 -0
- package/dist/components/InlineEdit/InlineEditActions.js +66 -0
- package/dist/components/InlineEdit/InlineEditControl.d.ts +6 -0
- package/dist/components/InlineEdit/InlineEditControl.js +12 -5
- package/dist/components/Link/classes.js +1 -1
- package/dist/components/List/List.d.ts +14 -0
- package/dist/components/List/List.js +24 -0
- package/dist/components/List/ListIcon.d.ts +6 -0
- package/dist/components/List/ListIcon.js +17 -0
- package/dist/components/List/ListItem.d.ts +6 -0
- package/dist/components/List/ListItem.js +20 -0
- package/dist/components/List/classes.d.ts +6 -0
- package/dist/components/List/classes.js +26 -0
- package/dist/components/List/index.d.ts +3 -0
- package/dist/components/List/index.js +3 -0
- package/dist/components/PasswordComplexity/PasswordComplexity.d.ts +13 -0
- package/dist/components/PasswordComplexity/PasswordComplexity.js +36 -0
- package/dist/components/PasswordComplexity/classes.d.ts +6 -0
- package/dist/components/PasswordComplexity/classes.js +18 -0
- package/dist/components/PasswordComplexity/index.d.ts +2 -0
- package/dist/components/PasswordComplexity/index.js +2 -0
- package/dist/components/PasswordComplexity/validators.d.ts +8 -0
- package/dist/components/PasswordComplexity/validators.js +9 -0
- package/dist/components/PasswordInput/PasswordInput.d.ts +5 -0
- package/dist/components/PasswordInput/PasswordInput.js +53 -0
- package/dist/components/PasswordInput/index.d.ts +1 -0
- package/dist/components/PasswordInput/index.js +1 -0
- package/dist/components/Table/TableContext/TableProvider.js +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/metadata/components.json +2151 -482
- package/package.json +1 -1
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, FC, Ref } from 'react';
|
|
2
|
-
type
|
|
2
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { linkVariants } from '../Link';
|
|
4
|
+
type FieldActionNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'color' | 'disabled' | 'type'>;
|
|
5
|
+
export type FieldActionType = NonNullable<VariantProps<typeof linkVariants>['type']>;
|
|
3
6
|
export interface FieldActionBaseProps {
|
|
4
7
|
asChild?: boolean;
|
|
8
|
+
type?: FieldActionType;
|
|
5
9
|
ref?: Ref<HTMLButtonElement>;
|
|
6
10
|
}
|
|
7
11
|
type FieldActionProps = FieldActionNativeProps & FieldActionBaseProps;
|
|
@@ -3,14 +3,14 @@ import { Slot } from "@radix-ui/react-slot";
|
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { useTestId } from "../../utils/testId.js";
|
|
5
5
|
import { linkVariants } from "../Link/index.js";
|
|
6
|
-
const FieldAction = ({ asChild = false, ...props })=>{
|
|
6
|
+
const FieldAction = ({ asChild = false, type = 'default', ...props })=>{
|
|
7
7
|
const testId = useTestId('action');
|
|
8
8
|
const Comp = asChild ? Slot : 'button';
|
|
9
9
|
return /*#__PURE__*/ jsx(Comp, {
|
|
10
10
|
...props,
|
|
11
11
|
"data-testid": testId,
|
|
12
12
|
className: cn(linkVariants({
|
|
13
|
-
type
|
|
13
|
+
type,
|
|
14
14
|
weight: 'medium',
|
|
15
15
|
size: 'sm'
|
|
16
16
|
}), 'ml-auto hover:decoration-transparent active:decoration-transparent')
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { Field } from './Field';
|
|
2
|
-
export { FieldAction } from './FieldAction';
|
|
2
|
+
export { FieldAction, type FieldActionType } from './FieldAction';
|
|
3
3
|
export { FieldContent } from './FieldContent';
|
|
4
4
|
export { FieldDescription } from './FieldDescription';
|
|
5
5
|
export { FieldError } from './FieldError';
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Check } from "../../icons/Check.js";
|
|
3
|
+
import { X } from "../../icons/X.js";
|
|
4
|
+
import { Button } from "../Button/index.js";
|
|
5
|
+
import { Kbd } from "../Kbd/index.js";
|
|
6
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
|
|
7
|
+
const InlineEditActions = ({ onSubmit, onCancel })=>/*#__PURE__*/ jsxs("div", {
|
|
8
|
+
className: "absolute right-0 top-full mt-4 flex z-10",
|
|
9
|
+
"data-slot": "inline-edit-actions",
|
|
10
|
+
onKeyDown: (e)=>e.stopPropagation(),
|
|
11
|
+
children: [
|
|
12
|
+
/*#__PURE__*/ jsxs(Tooltip, {
|
|
13
|
+
children: [
|
|
14
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
15
|
+
asChild: true,
|
|
16
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
17
|
+
size: "small",
|
|
18
|
+
variant: "outline",
|
|
19
|
+
color: "neutral",
|
|
20
|
+
className: "rounded-r-none border-r-0",
|
|
21
|
+
onClick: onSubmit,
|
|
22
|
+
"aria-label": "Save",
|
|
23
|
+
tabIndex: -1,
|
|
24
|
+
children: /*#__PURE__*/ jsx(Check, {})
|
|
25
|
+
})
|
|
26
|
+
}),
|
|
27
|
+
/*#__PURE__*/ jsxs(TooltipContent, {
|
|
28
|
+
children: [
|
|
29
|
+
"Save ",
|
|
30
|
+
/*#__PURE__*/ jsx(Kbd, {
|
|
31
|
+
children: "↵"
|
|
32
|
+
})
|
|
33
|
+
]
|
|
34
|
+
})
|
|
35
|
+
]
|
|
36
|
+
}),
|
|
37
|
+
/*#__PURE__*/ jsxs(Tooltip, {
|
|
38
|
+
closeOnEscape: false,
|
|
39
|
+
children: [
|
|
40
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
41
|
+
asChild: true,
|
|
42
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
43
|
+
size: "small",
|
|
44
|
+
variant: "outline",
|
|
45
|
+
color: "neutral",
|
|
46
|
+
className: "rounded-l-none",
|
|
47
|
+
onClick: onCancel,
|
|
48
|
+
"aria-label": "Cancel",
|
|
49
|
+
tabIndex: -1,
|
|
50
|
+
children: /*#__PURE__*/ jsx(X, {})
|
|
51
|
+
})
|
|
52
|
+
}),
|
|
53
|
+
/*#__PURE__*/ jsxs(TooltipContent, {
|
|
54
|
+
children: [
|
|
55
|
+
"Discard ",
|
|
56
|
+
/*#__PURE__*/ jsx(Kbd, {
|
|
57
|
+
children: "ESC"
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
})
|
|
61
|
+
]
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
InlineEditActions.displayName = 'InlineEditActions';
|
|
66
|
+
export { InlineEditActions };
|
|
@@ -8,6 +8,12 @@ export interface InlineEditControlProps extends Omit<HTMLAttributes<HTMLDivEleme
|
|
|
8
8
|
* hatch for custom editors that cannot call useInlineEditSubmitMode.
|
|
9
9
|
*/
|
|
10
10
|
submitMode?: InlineEditSubmitMode;
|
|
11
|
+
/**
|
|
12
|
+
* Show floating action buttons (submit/cancel) below the input.
|
|
13
|
+
* Provides a mouse-clickable alternative to Enter/Escape keyboard shortcuts.
|
|
14
|
+
* @default true
|
|
15
|
+
*/
|
|
16
|
+
showActions?: boolean;
|
|
11
17
|
/** Function children receive the inline-edit context (render-prop). */
|
|
12
18
|
children?: ReactNode | ((ctx: InlineEditContextValue) => ReactNode);
|
|
13
19
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useEffect, useRef } from "react";
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { useTestId } from "../../utils/testId.js";
|
|
5
|
+
import { InlineEditActions } from "./InlineEditActions.js";
|
|
5
6
|
import { useInlineEdit } from "./InlineEditContext.js";
|
|
6
7
|
const FOCUSABLE_SELECTOR = 'input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
|
|
7
8
|
function findOpenListbox(focusable) {
|
|
@@ -10,7 +11,7 @@ function findOpenListbox(focusable) {
|
|
|
10
11
|
const controlled = document.getElementById(controlsId);
|
|
11
12
|
return controlled?.getAttribute('role') === 'listbox' ? controlled : null;
|
|
12
13
|
}
|
|
13
|
-
const InlineEditControl = ({ ref, children, className, onKeyDown, onBlur, submitMode: submitModeProp, ...props })=>{
|
|
14
|
+
const InlineEditControl = ({ showActions = true, ref, children, className, onKeyDown, onBlur, submitMode: submitModeProp, ...props })=>{
|
|
14
15
|
const testId = useTestId('control');
|
|
15
16
|
const ctx = useInlineEdit();
|
|
16
17
|
const { editing, selectOnFocus, submit, cancel, isCommitPending } = ctx;
|
|
@@ -64,15 +65,21 @@ const InlineEditControl = ({ ref, children, className, onKeyDown, onBlur, submit
|
|
|
64
65
|
if (submitsOnBlur) submit();
|
|
65
66
|
else if ('none' !== submitMode) cancel();
|
|
66
67
|
};
|
|
67
|
-
return /*#__PURE__*/
|
|
68
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
68
69
|
...props,
|
|
69
70
|
ref: combinedRef,
|
|
70
71
|
"data-testid": testId,
|
|
71
72
|
"data-slot": "inline-edit-control",
|
|
72
73
|
onKeyDown: handleKeyDown,
|
|
73
74
|
onBlur: handleBlur,
|
|
74
|
-
className: cn('w-full min-w-0', '[&_[data-slot=input]]:px-6', '[&_textarea]:px-6', '[&_[data-scope=number-input][data-part=input]]:px-6', '[&_[data-scope=select][data-part=trigger]]:px-6', '[&_div[data-scope=select][data-part=trigger]:has([data-slot=overflow-list])]:pl-0', '[&_[data-slot=input-group-addon]]:px-6', '[&_[data-slot=input-group]>div:not([data-slot])]:pl-0', className),
|
|
75
|
-
children:
|
|
75
|
+
className: cn('w-full min-w-0 relative', '[&_[data-slot=input]]:px-6', '[&_textarea]:px-6', '[&_[data-scope=number-input][data-part=input]]:px-6', '[&_[data-scope=select][data-part=trigger]]:px-6', '[&_div[data-scope=select][data-part=trigger]:has([data-slot=overflow-list])]:pl-0', '[&_[data-slot=input-group-addon]]:px-6', '[&_[data-slot=input-group]>div:not([data-slot])]:pl-0', className),
|
|
76
|
+
children: [
|
|
77
|
+
'function' == typeof children ? children(ctx) : children,
|
|
78
|
+
showActions && /*#__PURE__*/ jsx(InlineEditActions, {
|
|
79
|
+
onSubmit: submit,
|
|
80
|
+
onCancel: cancel
|
|
81
|
+
})
|
|
82
|
+
]
|
|
76
83
|
});
|
|
77
84
|
};
|
|
78
85
|
InlineEditControl.displayName = 'InlineEditControl';
|
|
@@ -4,7 +4,7 @@ const linkVariants = cva('inline-flex items-center gap-4 font-sans transition-co
|
|
|
4
4
|
type: {
|
|
5
5
|
default: 'text-text-link-default hover:text-text-link-hover active:text-link-default',
|
|
6
6
|
alt: 'text-text-link-default-alt hover:text-text-link-hover-alt active:text-link-default-alt',
|
|
7
|
-
muted: 'text-text-secondary hover:text-
|
|
7
|
+
muted: 'text-text-secondary hover:text-slate-600 active:text-slate-600',
|
|
8
8
|
table: 'text-text-primary hover:text-text-link-hover active:text-link-default'
|
|
9
9
|
},
|
|
10
10
|
size: {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
import { type TestableProps } from '../../utils/testId';
|
|
3
|
+
type ListVariant = 'ordered' | 'unordered';
|
|
4
|
+
type ListSpacing = 0 | 2 | 4 | 8 | 12 | 16 | 24;
|
|
5
|
+
type ListMarker = 'none' | 'disc' | 'decimal';
|
|
6
|
+
export interface ListProps extends HTMLAttributes<HTMLElement>, TestableProps {
|
|
7
|
+
ref?: Ref<HTMLElement>;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
variant?: ListVariant;
|
|
10
|
+
spacing?: ListSpacing;
|
|
11
|
+
marker?: ListMarker;
|
|
12
|
+
}
|
|
13
|
+
export declare const List: FC<ListProps>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { TestIdProvider } from "../../utils/testId.js";
|
|
4
|
+
import { listVariants } from "./classes.js";
|
|
5
|
+
const List = ({ ref, className, children, variant = 'unordered', spacing, marker, 'data-testid': testId, ...props })=>{
|
|
6
|
+
const Comp = 'ordered' === variant ? 'ol' : 'ul';
|
|
7
|
+
return /*#__PURE__*/ jsx(Comp, {
|
|
8
|
+
...props,
|
|
9
|
+
ref: ref,
|
|
10
|
+
"data-slot": "list",
|
|
11
|
+
"data-testid": testId,
|
|
12
|
+
role: "list",
|
|
13
|
+
className: cn(listVariants({
|
|
14
|
+
spacing,
|
|
15
|
+
marker
|
|
16
|
+
}), className),
|
|
17
|
+
children: /*#__PURE__*/ jsx(TestIdProvider, {
|
|
18
|
+
value: testId,
|
|
19
|
+
children: children
|
|
20
|
+
})
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
List.displayName = 'List';
|
|
24
|
+
export { List };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { useTestId } from "../../utils/testId.js";
|
|
4
|
+
import { listIconVariants } from "./classes.js";
|
|
5
|
+
const ListIcon = ({ ref, className, children, ...props })=>{
|
|
6
|
+
const testId = useTestId('icon');
|
|
7
|
+
return /*#__PURE__*/ jsx("span", {
|
|
8
|
+
...props,
|
|
9
|
+
ref: ref,
|
|
10
|
+
"data-slot": "list-icon",
|
|
11
|
+
"data-testid": testId,
|
|
12
|
+
className: cn(listIconVariants(), className),
|
|
13
|
+
children: children
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
ListIcon.displayName = 'ListIcon';
|
|
17
|
+
export { ListIcon };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { TestIdProvider, useTestId } from "../../utils/testId.js";
|
|
4
|
+
import { listItemVariants } from "./classes.js";
|
|
5
|
+
const ListItem = ({ ref, className, children, ...props })=>{
|
|
6
|
+
const testId = useTestId('item');
|
|
7
|
+
return /*#__PURE__*/ jsx("li", {
|
|
8
|
+
...props,
|
|
9
|
+
ref: ref,
|
|
10
|
+
"data-slot": "list-item",
|
|
11
|
+
"data-testid": testId,
|
|
12
|
+
className: cn(listItemVariants(), className),
|
|
13
|
+
children: /*#__PURE__*/ jsx(TestIdProvider, {
|
|
14
|
+
value: testId,
|
|
15
|
+
children: children
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
ListItem.displayName = 'ListItem';
|
|
20
|
+
export { ListItem };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const listVariants: (props?: ({
|
|
2
|
+
spacing?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | null | undefined;
|
|
3
|
+
marker?: "decimal" | "disc" | "none" | null | undefined;
|
|
4
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
5
|
+
export declare const listItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
6
|
+
export declare const listIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
const listVariants = cva('flex flex-col', {
|
|
3
|
+
variants: {
|
|
4
|
+
spacing: {
|
|
5
|
+
0: 'gap-0',
|
|
6
|
+
2: 'gap-2',
|
|
7
|
+
4: 'gap-4',
|
|
8
|
+
8: 'gap-8',
|
|
9
|
+
12: 'gap-12',
|
|
10
|
+
16: 'gap-16',
|
|
11
|
+
24: 'gap-24'
|
|
12
|
+
},
|
|
13
|
+
marker: {
|
|
14
|
+
none: 'list-none',
|
|
15
|
+
disc: 'list-disc pl-24',
|
|
16
|
+
decimal: 'list-decimal pl-24'
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: {
|
|
20
|
+
spacing: 4,
|
|
21
|
+
marker: 'none'
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
const listItemVariants = cva('flex');
|
|
25
|
+
const listIconVariants = cva('inline-flex items-center shrink-0 mr-6 align-middle');
|
|
26
|
+
export { listIconVariants, listItemVariants, listVariants };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { FC, ReactNode, Ref } from 'react';
|
|
2
|
+
import { type ListProps } from '../List';
|
|
3
|
+
export type PasswordComplexityItemId = 'length' | 'uppercase' | 'lowercase' | 'number' | 'symbol' | 'match';
|
|
4
|
+
export interface PasswordComplexityItem {
|
|
5
|
+
id: PasswordComplexityItemId;
|
|
6
|
+
label: ReactNode;
|
|
7
|
+
met: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface PasswordComplexityProps extends Omit<ListProps, 'children' | 'variant' | 'marker'> {
|
|
10
|
+
ref?: Ref<HTMLElement>;
|
|
11
|
+
items: PasswordComplexityItem[];
|
|
12
|
+
}
|
|
13
|
+
export declare const PasswordComplexity: FC<PasswordComplexityProps>;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Check } from "../../icons/Check.js";
|
|
3
|
+
import { Dot } from "../../icons/Dot.js";
|
|
4
|
+
import { cn } from "../../utils/cn.js";
|
|
5
|
+
import { List } from "../List/index.js";
|
|
6
|
+
import { ListIcon } from "../List/ListIcon.js";
|
|
7
|
+
import { ListItem } from "../List/ListItem.js";
|
|
8
|
+
import { passwordComplexityIconVariants, passwordComplexityLabelVariants } from "./classes.js";
|
|
9
|
+
const PasswordComplexity = ({ ref, items, spacing = 4, className, ...props })=>/*#__PURE__*/ jsx(List, {
|
|
10
|
+
...props,
|
|
11
|
+
ref: ref,
|
|
12
|
+
spacing: spacing,
|
|
13
|
+
className: cn(className),
|
|
14
|
+
children: items.map((item)=>/*#__PURE__*/ jsxs(ListItem, {
|
|
15
|
+
children: [
|
|
16
|
+
/*#__PURE__*/ jsx(ListIcon, {
|
|
17
|
+
className: passwordComplexityIconVariants({
|
|
18
|
+
met: item.met
|
|
19
|
+
}),
|
|
20
|
+
children: item.met ? /*#__PURE__*/ jsx(Check, {
|
|
21
|
+
size: "md"
|
|
22
|
+
}) : /*#__PURE__*/ jsx(Dot, {
|
|
23
|
+
size: "md"
|
|
24
|
+
})
|
|
25
|
+
}),
|
|
26
|
+
/*#__PURE__*/ jsx("span", {
|
|
27
|
+
className: passwordComplexityLabelVariants({
|
|
28
|
+
met: item.met
|
|
29
|
+
}),
|
|
30
|
+
children: item.label
|
|
31
|
+
})
|
|
32
|
+
]
|
|
33
|
+
}, item.id))
|
|
34
|
+
});
|
|
35
|
+
PasswordComplexity.displayName = 'PasswordComplexity';
|
|
36
|
+
export { PasswordComplexity };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const passwordComplexityIconVariants: (props?: ({
|
|
2
|
+
met?: boolean | null | undefined;
|
|
3
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
4
|
+
export declare const passwordComplexityLabelVariants: (props?: ({
|
|
5
|
+
met?: boolean | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
const passwordComplexityIconVariants = cva('', {
|
|
3
|
+
variants: {
|
|
4
|
+
met: {
|
|
5
|
+
true: 'text-text-success',
|
|
6
|
+
false: 'text-text-tertiary'
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
const passwordComplexityLabelVariants = cva('text-sm', {
|
|
11
|
+
variants: {
|
|
12
|
+
met: {
|
|
13
|
+
true: 'text-text-secondary line-through',
|
|
14
|
+
false: 'text-text-primary'
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
export { passwordComplexityIconVariants, passwordComplexityLabelVariants };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const passwordValidators: {
|
|
2
|
+
minLength: (min: number) => (value: string) => boolean;
|
|
3
|
+
hasUppercase: (value: string) => boolean;
|
|
4
|
+
hasLowercase: (value: string) => boolean;
|
|
5
|
+
hasNumber: (value: string) => boolean;
|
|
6
|
+
hasSymbol: (value: string) => boolean;
|
|
7
|
+
passwordsMatch: (a: string, b: string) => boolean;
|
|
8
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const passwordValidators = {
|
|
2
|
+
minLength: (min)=>(value)=>value.length >= min,
|
|
3
|
+
hasUppercase: (value)=>/[A-Z]/.test(value),
|
|
4
|
+
hasLowercase: (value)=>/[a-z]/.test(value),
|
|
5
|
+
hasNumber: (value)=>/\d/.test(value),
|
|
6
|
+
hasSymbol: (value)=>/[^A-Za-z0-9]/.test(value),
|
|
7
|
+
passwordsMatch: (a, b)=>!!a && a === b
|
|
8
|
+
};
|
|
9
|
+
export { passwordValidators };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Eye, EyeOff } from "../../icons/index.js";
|
|
4
|
+
import { Input } from "../Input/index.js";
|
|
5
|
+
import { InputGroup } from "../InputGroup/InputGroup.js";
|
|
6
|
+
import { InputGroupAddon } from "../InputGroup/InputGroupAddon.js";
|
|
7
|
+
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
8
|
+
import { TooltipContent } from "../Tooltip/TooltipContent.js";
|
|
9
|
+
import { TooltipTrigger } from "../Tooltip/TooltipTrigger.js";
|
|
10
|
+
const PasswordInput = ({ disabled = false, size = 'default', error = false, className, ref, 'data-testid': testId, ...props })=>{
|
|
11
|
+
const [visible, setVisible] = useState(false);
|
|
12
|
+
const toggle = ()=>setVisible((prev)=>!prev);
|
|
13
|
+
return /*#__PURE__*/ jsxs(InputGroup, {
|
|
14
|
+
size: size,
|
|
15
|
+
className: className,
|
|
16
|
+
"data-slot": "password-input",
|
|
17
|
+
"data-testid": testId,
|
|
18
|
+
children: [
|
|
19
|
+
/*#__PURE__*/ jsx(Input, {
|
|
20
|
+
...props,
|
|
21
|
+
type: visible ? 'text' : 'password',
|
|
22
|
+
disabled: disabled,
|
|
23
|
+
size: size,
|
|
24
|
+
error: error,
|
|
25
|
+
ref: ref
|
|
26
|
+
}),
|
|
27
|
+
/*#__PURE__*/ jsx(InputGroupAddon, {
|
|
28
|
+
align: "inline-end",
|
|
29
|
+
children: /*#__PURE__*/ jsxs(Tooltip, {
|
|
30
|
+
children: [
|
|
31
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
32
|
+
asChild: true,
|
|
33
|
+
children: /*#__PURE__*/ jsx("button", {
|
|
34
|
+
type: "button",
|
|
35
|
+
tabIndex: -1,
|
|
36
|
+
disabled: disabled,
|
|
37
|
+
"aria-label": visible ? 'Hide password' : 'Show password',
|
|
38
|
+
onClick: toggle,
|
|
39
|
+
className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
|
|
40
|
+
children: visible ? /*#__PURE__*/ jsx(EyeOff, {}) : /*#__PURE__*/ jsx(Eye, {})
|
|
41
|
+
})
|
|
42
|
+
}),
|
|
43
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
44
|
+
children: visible ? 'Hide password' : 'Show password'
|
|
45
|
+
})
|
|
46
|
+
]
|
|
47
|
+
})
|
|
48
|
+
})
|
|
49
|
+
]
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
PasswordInput.displayName = 'PasswordInput';
|
|
53
|
+
export { PasswordInput };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PasswordInput, type PasswordInputProps } from './PasswordInput';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PasswordInput } from "./PasswordInput.js";
|
|
@@ -164,6 +164,9 @@ const TableProvider = (props)=>{
|
|
|
164
164
|
enableColumnPinning: true,
|
|
165
165
|
enableGrouping: groupingEnabled,
|
|
166
166
|
enableExpanding: expandingEnabled,
|
|
167
|
+
...expandingEnabled ? {
|
|
168
|
+
autoResetExpanded: false
|
|
169
|
+
} : {},
|
|
167
170
|
...expandingEnabled && (renderExpandedRow || subRowGroupingEnabled) ? {
|
|
168
171
|
getRowCanExpand: ()=>true
|
|
169
172
|
} : {},
|
package/dist/index.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ export { OTPInput, type OTPInputProps } from './components/InputOTP';
|
|
|
45
45
|
export { type DatacenterKey, datacenters, Ip, IpAddress, type IpAddressProps, IpCountry, type IpCountryProps, IpList, type IpListProps, IpPort, type IpPortProps, type IpProps, IpProvider, type IpProviderProps, type ProxyTypeKey, proxyTypes, type SourceKey, sourceLabels, } from './components/Ip';
|
|
46
46
|
export { Kbd, KbdGroup } from './components/Kbd';
|
|
47
47
|
export { Link, type LinkProps } from './components/Link';
|
|
48
|
+
export { List, ListIcon, type ListIconProps, ListItem, type ListItemProps, type ListProps, } from './components/List';
|
|
48
49
|
export { Loader, type LoaderProps } from './components/Loader';
|
|
49
50
|
export { Logo, type LogoProps, type LogoSize, type LogoStyle, type LogoType, } from './components/Logo';
|
|
50
51
|
export { NavRail, NavRailBody, type NavRailBodyProps, NavRailFooter, type NavRailFooterProps, NavRailItem, type NavRailItemProps, type NavRailProps, NavRailSeparator, type NavRailSeparatorProps, NavRailSkeleton, type NavRailSkeletonProps, } from './components/NavRail';
|
|
@@ -54,6 +55,8 @@ export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentPro
|
|
|
54
55
|
export { Page, PageActions, type PageActionsProps, PageContent, type PageContentProps, PageHeader, type PageHeaderProps, type PageHostContextValue, PageHostProvider, type PageLayoutOptions, type PageProps, PageTitle, type PageTitleProps, usePageHost, } from './components/Page';
|
|
55
56
|
export { Pagination, type PaginationAlign, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationList, type PaginationListProps, PaginationNext, type PaginationNextProps, type PaginationPage, type PaginationPageChangeDetails, PaginationPageSize, type PaginationPageSizeChangeDetails, type PaginationPageSizeProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationSize, usePaginationSizeContext, } from './components/Pagination';
|
|
56
57
|
export { type CopyFormatData, formatAsFilter, ParameterPath, type ParameterPathProps, } from './components/ParameterPath';
|
|
58
|
+
export { PasswordComplexity, type PasswordComplexityItem, type PasswordComplexityItemId, type PasswordComplexityProps, passwordValidators, } from './components/PasswordComplexity';
|
|
59
|
+
export { PasswordInput, type PasswordInputProps } from './components/PasswordInput';
|
|
57
60
|
export { Popover, PopoverContent, PopoverTrigger } from './components/Popover';
|
|
58
61
|
export { Progress, type ProgressColor, type ProgressProps, } from './components/Progress';
|
|
59
62
|
export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type RadioGroupProps, RadioIndicator, RadioLabel, type RadioLabelProps, type RadioProps, } from './components/Radio';
|
package/dist/index.js
CHANGED
|
@@ -34,6 +34,7 @@ export { OTPInput } from "./components/InputOTP/index.js";
|
|
|
34
34
|
export { Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, datacenters, proxyTypes, sourceLabels } from "./components/Ip/index.js";
|
|
35
35
|
export { Kbd, KbdGroup } from "./components/Kbd/index.js";
|
|
36
36
|
export { Link } from "./components/Link/index.js";
|
|
37
|
+
export { List, ListIcon, ListItem } from "./components/List/index.js";
|
|
37
38
|
export { Loader } from "./components/Loader/index.js";
|
|
38
39
|
export { Logo } from "./components/Logo/index.js";
|
|
39
40
|
export { NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton } from "./components/NavRail/index.js";
|
|
@@ -43,6 +44,8 @@ export { OverflowTooltip, OverflowTooltipContent } from "./components/OverflowTo
|
|
|
43
44
|
export { Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, usePageHost } from "./components/Page/index.js";
|
|
44
45
|
export { Pagination, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPageSize, PaginationPrevious, usePaginationSizeContext } from "./components/Pagination/index.js";
|
|
45
46
|
export { ParameterPath, formatAsFilter } from "./components/ParameterPath/index.js";
|
|
47
|
+
export { PasswordComplexity, passwordValidators } from "./components/PasswordComplexity/index.js";
|
|
48
|
+
export { PasswordInput } from "./components/PasswordInput/index.js";
|
|
46
49
|
export { Popover, PopoverContent, PopoverTrigger } from "./components/Popover/index.js";
|
|
47
50
|
export { Progress } from "./components/Progress/index.js";
|
|
48
51
|
export { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from "./components/Radio/index.js";
|